@swiftbrowser/web 0.1.0 → 0.3.0

package/public/app/oauth-callback.html

@@ -0,0 +1,62 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="color-scheme" content="light dark" />
+    <meta name="referrer" content="no-referrer" />
+    <title>Signing in…</title>
+    <style>
+      body {
+        margin: 0;
+        min-height: 100vh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font: 17px/1.4 -apple-system, system-ui, sans-serif;
+        background: Canvas;
+        color: CanvasText;
+      }
+      p {
+        margin: 16px;
+        text-align: center;
+        opacity: 0.7;
+      }
+    </style>
+  </head>
+  <body>
+    <p id="status">Signing in…</p>
+    <script>
+      // The end of a sign-in (docs/ops-protocol.md, "Signing in"). The app's
+      // OAuth redirect (`icecubesapp://`) was swapped for this page, so the
+      // provider sent the sign-in window here, with `code` (or `error`) in the
+      // query. Hand the URL to the app's page (src/webAuth.ts) and close: by
+      // postMessage to the opener, and on a BroadcastChannel for when a
+      // provider's Cross-Origin-Opener-Policy cut the window off from it.
+      (function () {
+        var message = { type: 'sb-web-auth-callback', url: location.href };
+        var delivered = false;
+        try {
+          if (window.opener && !window.opener.closed) {
+            window.opener.postMessage(message, location.origin);
+            delivered = true;
+          }
+        } catch (error) {}
+        try {
+          var channel = new BroadcastChannel('sb-web-auth');
+          channel.postMessage(message);
+          channel.close();
+          delivered = true;
+        } catch (error) {}
+        // The code is single-use and the app has it now; keep it out of history.
+        try {
+          history.replaceState(null, '', location.pathname);
+        } catch (error) {}
+        document.getElementById('status').textContent = delivered
+          ? 'You can close this window.'
+          : 'Return to the app to finish signing in.';
+        if (delivered) setTimeout(function () { window.close(); }, 50);
+      })();
+    </script>
+  </body>
+</html>

package/src/animation.ts

@@ -15,6 +15,14 @@
  * - removed elements leave a visual clone (stripped of element ids) at their
  *   old position which plays the `transition` backwards and is then dropped.
  *
+ * A frame tween is retargeted when a later layout pass moves the element
+ * again before it finished: the running tween is replaced by one from where
+ * the element is drawn now to its new frame, in the new commit's animation or,
+ * for a pass that is not animated (a custom `Layout` or `GeometryReader`
+ * answering the animated pass), in the time the old tween had left. Without
+ * that the old tween, which overrides the inline frame, kept drawing the
+ * element toward the stale frame until it ended and then snapped.
+ *
  * `Animation` maps to CSS easings; `spring` becomes a `linear()` easing
  * sampled from a damped spring where supported.
  */
@@ -165,6 +173,21 @@ export function easingFor(animation: Animation | undefined): string {
  * by which time the spring has settled to within ~1%.
  */
 export function springEasing(duration: number, bounce: number, samples = SPRING_SAMPLES): string {
+  // An animated pass asks for the same few curves once per tweened element.
+  const key = `${duration} ${bounce} ${samples}`;
+  let easing = springEasings.get(key);
+  if (easing === undefined) {
+    if (springEasings.size >= MAX_SPRING_EASINGS) springEasings.clear();
+    easing = sampleSpring(duration, bounce, samples);
+    springEasings.set(key, easing);
+  }
+  return easing;
+}
+
+const springEasings = new Map<string, string>();
+const MAX_SPRING_EASINGS = 64;
+
+function sampleSpring(duration: number, bounce: number, samples: number): string {
   const d = duration > 0 ? duration : 0.5;
   const zeta = Math.min(1, Math.max(0, 1 - bounce));
   const omega = (2 * Math.PI) / d;
@@ -178,6 +201,49 @@ export function springEasing(duration: number, bounce: number, samples = SPRING_
   return `linear(${points.join(', ')})`;
 }
 
+/**
+ * The eased progress of `animation` `elapsed` milliseconds after it began
+ * (its delay included): 0 before it starts, its curve's value while it runs
+ * (a spring that bounces passes 1), 1 after. For what CSS cannot tween, such
+ * as a custom shape's path (src/pathShape.ts), in the curve its CSS
+ * counterpart (`easingFor`) uses. Repeats are not applied.
+ */
+export function easedProgress(animation: Animation | undefined, elapsed: number): number {
+  const timing = timingFor(animation);
+  if (elapsed <= timing.delay) return 0;
+  if (timing.duration <= 0 || elapsed >= timing.delay + timing.duration) return 1;
+  const t = (elapsed - timing.delay) / timing.duration;
+  switch (animation?.type) {
+    case 'linear':
+      return t;
+    case 'easeIn':
+      return cubicBezier(0.42, 0, 1, 1, t);
+    case 'easeOut':
+      return cubicBezier(0, 0, 0.58, 1, t);
+    case 'spring': {
+      const d = animation.duration ?? 0.5;
+      const zeta = Math.min(1, Math.max(0, 1 - (animation.bounce ?? 0)));
+      return springPosition(t * (d > 0 ? d : 0.5), (2 * Math.PI) / (d > 0 ? d : 0.5), zeta);
+    }
+    default:
+      return cubicBezier(0.42, 0, 0.58, 1, t);
+  }
+}
+
+/** The y of the CSS cubic Bézier through (0,0), (x1,y1), (x2,y2), (1,1) at x = `t`. */
+function cubicBezier(x1: number, y1: number, x2: number, y2: number, t: number): number {
+  const at = (a: number, b: number, s: number) => 3 * a * s * (1 - s) ** 2 + 3 * b * s * s * (1 - s) + s ** 3;
+  // Bisection on x (monotonic for CSS's curves).
+  let lo = 0;
+  let hi = 1;
+  for (let i = 0; i < 30; i++) {
+    const mid = (lo + hi) / 2;
+    if (at(x1, x2, mid) < t) lo = mid;
+    else hi = mid;
+  }
+  return at(y1, y2, (lo + hi) / 2);
+}
+
 function springPosition(t: number, omega: number, zeta: number): number {
   if (zeta >= 1) {
     // Critically damped.
@@ -282,16 +348,24 @@ export const EXIT_CLONE_CLASS = 'sb-exit-clone';
 export interface AnimatorOptions {
   /** Kinds (by `data-sb-kind`) that animate their own enter/exit (navigation, sheets). */
   selfAnimatingKinds?: ReadonlySet<string>;
+  /**
+   * Plays what an updated element animates itself (a custom shape's path
+   * frames, src/pathShape.ts) in the animation its update has; returns
+   * whether it had anything to play.
+   */
+  playOwnFrames?: (el: HTMLElement, animation: Animation | undefined) => boolean;
 }
 
 export class Animator {
   /** The element clones of removed elements are appended to (the screen). */
   private readonly root: HTMLElement;
   private readonly selfAnimating: ReadonlySet<string>;
+  private readonly playOwnFrames: AnimatorOptions['playOwnFrames'];
 
   constructor(root: HTMLElement, options: AnimatorOptions = {}) {
     this.root = root;
     this.selfAnimating = options.selfAnimatingKinds ?? new Set();
+    this.playOwnFrames = options.playOwnFrames;
   }
 
   /** Computed values of the animated properties, or null when not rendered. */
@@ -304,12 +378,22 @@ export class Animator {
     return snap;
   }
 
-  /** Rectangle of `el` relative to the animation root. */
-  rectOf(el: HTMLElement): DOMRect | null {
-    if (!el.isConnected) return null;
+  /** The animation root's rectangle in the viewport. */
+  rootRect(): DOMRect {
+    return this.root.getBoundingClientRect();
+  }
+
+  /**
+   * Rectangle of `el` relative to the animation root (`base`: its rectangle,
+   * if already read), or null when it is not drawn. A removed element's exit
+   * clone is appended to the root, outside whatever hid the element: a
+   * screen below the top one (`visibility: hidden`) or an ancestor at
+   * opacity 0 must not leave a clone over the visible screen.
+   */
+  rectOf(el: HTMLElement, base: DOMRect = this.rootRect()): DOMRect | null {
+    if (!el.isConnected || !isDrawn(el)) return null;
     const r = el.getBoundingClientRect();
     if (r.width === 0 && r.height === 0) return null;
-    const base = this.root.getBoundingClientRect();
     return new DOMRect(r.left - base.left, r.top - base.top, r.width, r.height);
   }
 
@@ -323,7 +407,12 @@ export class Animator {
     for (const [el, rec] of pass.updated) {
       if (rec.tokenChanged) tokenRoots.set(el, rec.animation);
     }
-    if (!commitAnimation && tokenRoots.size === 0) return;
+    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.
+      for (const change of frames) this.retargetFrame(change, null);
+      return;
+    }
 
     const animationFor = (chain: Iterable<HTMLElement>): Animation | undefined | false => {
       for (const el of chain) {
@@ -340,15 +429,50 @@ export class Animator {
       this.animateChanges(el, rec.before, animation);
     }
 
+    // What elements animate themselves (a custom shape's path).
+    if (this.playOwnFrames) {
+      for (const el of pass.updated.keys()) {
+        if (!el.isConnected) continue;
+        const animation = animationFor(ancestorsAndSelf(el));
+        if (animation !== false) this.playOwnFrames(el, animation);
+      }
+    }
+
     // Frame changes: tween left/top/width/height from the previous box. The
     // inline values are relative to the parent's origin, so apply the delta.
+    const tweens: { change: FrameChange; from: FrameRect; animation: Animation | undefined; moved: boolean }[] = [];
+    const jumped = new Map<HTMLElement, { x: number; y: number }>();
     for (const change of frames) {
       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));
-      if (animation === false) continue;
-      this.animateFrame(el, from, to, 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 });
+        continue;
+      }
+      tweens.push({ change, from, animation, moved: true });
+    }
+    // The root of an `.animation(_:value:)` subtree whose own box did not
+    // change still moves with an ancestor that jumped.
+    const changed = new Set(frames.map((change) => change.el));
+    for (const [el, animation] of tokenRoots) {
+      if (changed.has(el) || !el.isConnected || pass.inserted.has(el)) continue;
+      const box = { x: parseFloat(el.style.left) || 0, y: parseFloat(el.style.top) || 0, width: el.offsetWidth, height: el.offsetHeight };
+      tweens.push({ change: { el, kind: el.dataset['sbKind'] ?? '', from: box, to: box }, from: box, animation: animation ?? { type: 'default' }, moved: false });
+    }
+    // An animated element under an ancestor that jumps (outside the animated
+    // subtree) starts from where it was drawn, not from its old place in the
+    // moved ancestor: SwiftUI animates its position on screen, so a shape
+    // that grows in a stack that re-centers grows about its center.
+    const tweened = new Set(tweens.map((tween) => tween.change.el));
+    for (const { change, from, animation, moved } of tweens) {
+      const shift = jumpAbove(change.el, jumped, tweened, this.root);
+      if (!moved && !shift) continue;
+      const start = shift ? { ...from, x: from.x - shift.x, y: from.y - shift.y } : from;
+      if (this.retargetFrame({ ...change, from: start }, animation, shift)) continue;
+      this.animateFrame(change.el, start, change.to, animation);
     }
 
     // Inserted elements: only subtree roots (a nested fade would compound).
@@ -419,7 +543,76 @@ export class Animator {
       end['height'] = `${to.height}px`;
     }
     const timing = timingFor(animation);
-    el.animate([start, end], { ...timing, fill: 'none' });
+    this.trackFrame(el, el.animate([start, end], { ...timing, fill: 'none' }));
+  }
+
+  /** The frame tween running on each element (see `retargetFrame`). */
+  private readonly frameTweens = new WeakMap<HTMLElement, globalThis.Animation>();
+
+  private trackFrame(el: HTMLElement, tween: globalThis.Animation): void {
+    this.frameTweens.set(el, tween);
+    tween.addEventListener('finish', () => {
+      if (this.frameTweens.get(el) === tween) this.frameTweens.delete(el);
+    });
+    tween.addEventListener('cancel', () => {
+      if (this.frameTweens.get(el) === tween) this.frameTweens.delete(el);
+    });
+  }
+
+  /**
+   * When `change.el` is still tweening toward the box this pass replaced,
+   * replace that tween with one from where the element is drawn now to its
+   * new inline frame: in `animation`'s timing when the pass animates the
+   * element, else (`null`) in the time the old tween had left, with its
+   * easing. Returns whether there was a tween to retarget.
+   */
+  retargetFrame(change: FrameChange, animation: Animation | undefined | null, shift: { x: number; y: number } | null = null): boolean {
+    const { el, from, to } = change;
+    const tween = this.frameTweens.get(el);
+    if (!tween || tween.playState === 'finished' || tween.playState === 'idle') return false;
+    if (!el.isConnected) {
+      tween.cancel();
+      return false;
+    }
+    // The drawn values: the tween's own properties from the computed style
+    // (it is still applied), the others from the box before this pass.
+    const tweened = new Set<string>();
+    for (const frame of (tween.effect as KeyframeEffect | null)?.getKeyframes() ?? []) {
+      for (const key of ['left', 'top', 'width', 'height']) if (key in frame) tweened.add(key);
+    }
+    const cs = getComputedStyle(el);
+    const left = parseFloat(el.style.left) || 0;
+    const top = parseFloat(el.style.top) || 0;
+    const prev = from ?? to;
+    const drawn: Record<'left' | 'top' | 'width' | 'height', number> = {
+      left: tweened.has('left') ? parseFloat(cs.left) - (shift?.x ?? 0) : left - (to.x - prev.x),
+      top: tweened.has('top') ? parseFloat(cs.top) - (shift?.y ?? 0) : top - (to.y - prev.y),
+      width: tweened.has('width') ? parseFloat(cs.width) : prev.width,
+      height: tweened.has('height') ? parseFloat(cs.height) : prev.height,
+    };
+    const target = { left, top, width: to.width, height: to.height };
+    let timing: KeyframeAnimationOptions;
+    if (animation === null) {
+      const computed = tween.effect?.getComputedTiming();
+      const end = Number(computed?.endTime ?? 0);
+      const now = Number(tween.currentTime ?? 0);
+      const remaining = Math.max(0, end - now);
+      const easing = tween.effect?.getTiming().easing ?? 'linear';
+      timing = { duration: remaining, easing };
+    } else {
+      timing = timingFor(animation);
+    }
+    tween.cancel();
+    const start: Keyframe = {};
+    const finish: Keyframe = {};
+    for (const key of ['left', 'top', 'width', 'height'] as const) {
+      if (!Number.isFinite(drawn[key]) || Math.abs(drawn[key] - target[key]) < 0.01) continue;
+      start[key] = `${drawn[key]}px`;
+      finish[key] = `${target[key]}px`;
+    }
+    if (Object.keys(start).length === 0 || !timing.duration) return true;
+    this.trackFrame(el, el.animate([start, finish], { ...timing, fill: 'none' }));
+    return true;
   }
 
   /** Play `transition` forwards on a freshly inserted element. */
@@ -484,6 +677,18 @@ export class Animator {
   }
 }
 
+/** Whether `el` is drawn: displayed, not `visibility: hidden`, no ancestor at opacity 0. */
+function isDrawn(el: HTMLElement): boolean {
+  if (typeof el.checkVisibility === 'function') {
+    return el.checkVisibility({ visibilityProperty: true, opacityProperty: true });
+  }
+  if (getComputedStyle(el).visibility === 'hidden') return false;
+  for (let e: HTMLElement | null = el; e; e = e.parentElement) {
+    if (getComputedStyle(e).opacity === '0') return false;
+  }
+  return true;
+}
+
 /** Transitions are stored by the renderer per element (see `setTransition`). */
 const TRANSITIONS = new WeakMap<HTMLElement, Transition>();
 
@@ -519,3 +724,25 @@ function hasAncestorIn(el: HTMLElement, set: ReadonlySet<HTMLElement>): boolean
   }
   return false;
 }
+
+/**
+ * How far the ancestors of `el` that jumped in this pass (moved without a
+ * tween) moved it, up to the nearest ancestor that tweens (which carries `el`
+ * from where it was drawn) or `root`; null when nothing above it jumped.
+ */
+function jumpAbove(
+  el: HTMLElement,
+  jumped: ReadonlyMap<HTMLElement, { x: number; y: number }>,
+  tweened: ReadonlySet<HTMLElement>,
+  root: HTMLElement,
+): { x: number; y: number } | null {
+  let x = 0;
+  let y = 0;
+  for (let node = el.parentElement; node && node !== root && !tweened.has(node); node = node.parentElement) {
+    const jump = jumped.get(node);
+    if (!jump) continue;
+    x += jump.x;
+    y += jump.y;
+  }
+  return x || y ? { x, y } : null;
+}

package/src/appFiles.ts

@@ -0,0 +1,201 @@
+/**
+ * Phase 19: the app's home directory, kept in IndexedDB.
+ *
+ * The module sees an iOS-like home at `/data` (`HOME`): `Documents`,
+ * `Library/Application Support` (`XDG_DATA_HOME`) and `Library/Caches`
+ * (`XDG_CACHE_HOME`), so `URL.documentsDirectory`, `FileManager.urls(for:in:)`
+ * and `Data.write(to:)` work as on a phone; `/tmp` is a second mount that
+ * nothing keeps. The page loads the home from the app's database before the
+ * module starts, and after any event (or executor run) that wrote to a file
+ * it compares the tree with what it last saved and writes the difference.
+ * One database per app, `sb-files:<App>`, with one object store, `entries`,
+ * keyed by `path` (relative to the home, `Documents/notes.txt`); a row is
+ * `{path, data}` for a file and `{path, directory: true}` for a directory.
+ * See docs/ops-protocol.md, "Phase 19".
+ */
+
+import { Directory, File, type Inode } from '@bjorn3/browser_wasi_shim';
+
+/** Where the home is mounted, and the environment that points Foundation at it. */
+export const HOME = '/data';
+export const TMP = '/tmp';
+export const HOME_ENVIRONMENT: readonly string[] = [
+  `HOME=${HOME}`,
+  `XDG_DATA_HOME=${HOME}/Library/Application Support`,
+  `XDG_CACHE_HOME=${HOME}/Library/Caches`,
+  `TMPDIR=${TMP}`,
+];
+
+/** The directories every home has, as on iOS. */
+export const HOME_DIRECTORIES: readonly string[] = ['Documents', 'Library', 'Library/Application Support', 'Library/Caches'];
+
+/** A home's contents: path → bytes for a file, `null` for a directory. */
+export type HomeEntries = Map<string, Uint8Array | null>;
+
+/** A writable WASI directory tree from saved entries, with the standard directories. */
+export function homeDirectory(entries: HomeEntries): Directory {
+  const root = new Directory(new Map<string, Inode>());
+  const directoryAt = (parts: readonly string[]): Directory => {
+    let dir = root;
+    for (const part of parts) {
+      const existing = dir.contents.get(part);
+      if (existing instanceof Directory) {
+        dir = existing;
+        continue;
+      }
+      const next = new Directory(new Map<string, Inode>());
+      dir.contents.set(part, next);
+      dir = next;
+    }
+    return dir;
+  };
+  for (const path of HOME_DIRECTORIES) directoryAt(path.split('/'));
+  // Directories before files, shallow paths first, so a parent always exists.
+  const sorted = [...entries].sort(([a, aData], [b, bData]) => Number(aData !== null) - Number(bData !== null) || a.split('/').length - b.split('/').length);
+  for (const [path, data] of sorted) {
+    const parts = path.split('/').filter((part) => part !== '' && part !== '.' && part !== '..');
+    if (parts.length === 0) continue;
+    if (data === null) {
+      directoryAt(parts);
+    } else {
+      directoryAt(parts.slice(0, -1)).contents.set(parts[parts.length - 1]!, new File(data));
+    }
+  }
+  return root;
+}
+
+/** Every file and directory under `root`, by path (the live bytes of each file). */
+export function homeEntries(root: Directory): HomeEntries {
+  const entries: HomeEntries = new Map();
+  const walk = (dir: Directory, prefix: string): void => {
+    for (const [name, child] of dir.contents) {
+      const path = prefix === '' ? name : `${prefix}/${name}`;
+      if (child instanceof Directory) {
+        entries.set(path, null);
+        walk(child, path);
+      } else if (child instanceof File) {
+        entries.set(path, child.data);
+      }
+    }
+  };
+  walk(root, '');
+  return entries;
+}
+
+function sameBytes(a: Uint8Array, b: Uint8Array): boolean {
+  if (a.byteLength !== b.byteLength) return false;
+  for (let i = 0; i < a.byteLength; i++) if (a[i] !== b[i]) return false;
+  return true;
+}
+
+/** What changed from `saved` to `current`: entries to write (copied) and paths to delete. */
+export interface HomeChanges {
+  put: [string, Uint8Array | null][];
+  remove: string[];
+}
+
+export function diffHome(saved: HomeEntries, current: HomeEntries): HomeChanges {
+  const put: [string, Uint8Array | null][] = [];
+  const remove: string[] = [];
+  for (const [path, data] of current) {
+    const before = saved.get(path);
+    if (before === undefined) {
+      put.push([path, data === null ? null : data.slice()]);
+    } else if (data === null ? before !== null : before === null || !sameBytes(before, data)) {
+      put.push([path, data === null ? null : data.slice()]);
+    }
+  }
+  for (const path of saved.keys()) if (!current.has(path)) remove.push(path);
+  return { put, remove };
+}
+
+/** `saved` with `changes` applied (what was just written). */
+export function applyHomeChanges(saved: HomeEntries, changes: HomeChanges): HomeEntries {
+  const next: HomeEntries = new Map(saved);
+  for (const path of changes.remove) next.delete(path);
+  for (const [path, data] of changes.put) next.set(path, data);
+  return next;
+}
+
+/** Where an app's home lives between launches. */
+export interface FilesPersistence {
+  load(): Promise<HomeEntries>;
+  /** Writes one set of changes; writes happen in the order they were made. */
+  apply(changes: HomeChanges): Promise<void>;
+  clear(): Promise<void>;
+}
+
+interface EntryRow {
+  path: string;
+  data?: Uint8Array;
+  directory?: boolean;
+}
+
+const ENTRIES = 'entries';
+
+export function filesDatabaseName(app: string): string {
+  return `sb-files:${app}`;
+}
+
+function request<T>(req: IDBRequest<T>): Promise<T> {
+  return new Promise((resolve, reject) => {
+    req.onsuccess = () => resolve(req.result);
+    req.onerror = () => reject(req.error ?? new Error('IndexedDB request failed'));
+  });
+}
+
+function done(transaction: IDBTransaction): Promise<void> {
+  return new Promise((resolve, reject) => {
+    transaction.oncomplete = () => resolve();
+    transaction.onabort = () => reject(transaction.error ?? new Error('IndexedDB transaction aborted'));
+    transaction.onerror = () => reject(transaction.error ?? new Error('IndexedDB transaction failed'));
+  });
+}
+
+/** The app's home in IndexedDB (`factory` is the browser's unless a test passes one). */
+export function indexedDBFiles(app: string, factory: IDBFactory = indexedDB): FilesPersistence {
+  let opened: Promise<IDBDatabase> | null = null;
+  const database = (): Promise<IDBDatabase> => {
+    opened ??= new Promise((resolve, reject) => {
+      const open = factory.open(filesDatabaseName(app), 1);
+      open.onupgradeneeded = () => {
+        if (!open.result.objectStoreNames.contains(ENTRIES)) open.result.createObjectStore(ENTRIES, { keyPath: 'path' });
+      };
+      open.onsuccess = () => resolve(open.result);
+      open.onerror = () => reject(open.error ?? new Error(`could not open ${filesDatabaseName(app)}`));
+      open.onblocked = () => reject(new Error(`${filesDatabaseName(app)} is blocked by another tab`));
+    });
+    return opened;
+  };
+  let queue: Promise<void> = Promise.resolve();
+
+  return {
+    async load() {
+      const db = await database();
+      const rows = await request(db.transaction(ENTRIES, 'readonly').objectStore(ENTRIES).getAll() as IDBRequest<EntryRow[]>);
+      const entries: HomeEntries = new Map();
+      for (const row of rows) entries.set(row.path, row.directory ? null : new Uint8Array(row.data ?? new Uint8Array()));
+      return entries;
+    },
+    apply(changes) {
+      queue = queue.then(async () => {
+        const db = await database();
+        const transaction = db.transaction(ENTRIES, 'readwrite');
+        const store = transaction.objectStore(ENTRIES);
+        for (const path of changes.remove) store.delete(path);
+        for (const [path, data] of changes.put) {
+          const row: EntryRow = data === null ? { path, directory: true } : { path, data };
+          store.put(row);
+        }
+        await done(transaction);
+      });
+      return queue;
+    },
+    async clear() {
+      const db = await database();
+      const transaction = db.transaction(ENTRIES, 'readwrite');
+      transaction.objectStore(ENTRIES).clear();
+      await done(transaction);
+    },
+  };
+}

package/src/base64.ts

@@ -0,0 +1,43 @@
+/** Base64 for the bytes that cross between Swift and the page (fetch bodies, image files); no DOM, so a worker can use it too. */
+
+const B64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
+
+/** Standard base64 (RFC 4648, padded); chunked so large bodies do not blow the call stack. */
+export function base64Encode(bytes: Uint8Array): string {
+  if (typeof btoa === 'function') {
+    let binary = '';
+    const chunk = 0x8000;
+    for (let i = 0; i < bytes.length; i += chunk) {
+      binary += String.fromCharCode(...bytes.subarray(i, i + chunk));
+    }
+    return btoa(binary);
+  }
+  let out = '';
+  for (let i = 0; i < bytes.length; i += 3) {
+    const a = bytes[i]!;
+    const b = i + 1 < bytes.length ? bytes[i + 1]! : 0;
+    const c = i + 2 < bytes.length ? bytes[i + 2]! : 0;
+    const n = (a << 16) | (b << 8) | c;
+    out += B64[(n >> 18) & 63]! + B64[(n >> 12) & 63]!;
+    out += i + 1 < bytes.length ? B64[(n >> 6) & 63]! : '=';
+    out += i + 2 < bytes.length ? B64[n & 63]! : '=';
+  }
+  return out;
+}
+
+export function base64Decode(text: string): Uint8Array {
+  if (typeof atob === 'function') {
+    const binary = atob(text);
+    const bytes = new Uint8Array(binary.length);
+    for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+    return bytes;
+  }
+  const clean = text.replace(/[^A-Za-z0-9+/]/g, '');
+  const out: number[] = [];
+  for (let i = 0; i < clean.length; i += 4) {
+    const n = [0, 1, 2, 3].reduce((acc, k) => (acc << 6) | (i + k < clean.length ? B64.indexOf(clean[i + k]!) : 0), 0);
+    const count = Math.min(3, Math.floor(((clean.length - i) * 6) / 8));
+    for (let k = 0; k < count; k++) out.push((n >> (16 - 8 * k)) & 0xff);
+  }
+  return new Uint8Array(out);
+}