@swiftbrowser/web 0.17.8 → 0.18.1

package/src/hostRequests.ts

@@ -37,14 +37,18 @@ import type {
   ClipboardRequestParams,
   TranslateRequestParams,
   PickColorRequestParams,
+  UndoRequestParams,
   SharedFile,
 } from './protocol';
+import { browserAudioRecorder, type AudioRecorderHost } from './audioRecorder';
+import { browserFiles, type FilesHost } from './files';
 import { browserClipboardHost, performClipboard, type ClipboardHost } from './clipboard';
 import { browserMediaHost, performMedia, type MediaHost } from './media';
 import { browserMediaSessionHost, MediaSessionBridge, performMediaSession } from './mediaSession';
 import { browserScannerHost, performScanner, type ScannerHost, type ScannerResult } from './scanner';
 import { browserTranslationHost, performTranslate, type TranslationHost } from './translation';
 import { chooseColor, performPickColor, type ColorChooser } from './colorPicker';
+import { browserUndoHost, performUndo, type UndoHost } from './undo';
 import { WebSocketHost, type WebSocketLike } from './webSocket';
 import { browserWebAuthHost, WebAuthSessions, type WebAuthResult } from './webAuth';
 
@@ -91,8 +95,16 @@ export interface PickFilesResult {
 }
 
 /** The browser facilities a request handler uses; tests substitute them. */
+/**
+ * What the environment fetches with: the global `fetch`'s call, and no more.
+ * Not `typeof fetch`, which in Bun's types also carries `fetch.preconnect`,
+ * so a wrapper (the CORS proxy's, the blocked hosts', an app's own) would
+ * not be one.
+ */
+export type FetchLike = (input: RequestInfo | URL, init?: RequestInit) => Promise<Response>;
+
 export interface HostRequestEnvironment {
-  fetch: typeof fetch;
+  fetch: FetchLike;
   /** Decodes an image and resolves with its natural size; rejects when it cannot be loaded. */
   loadImage: (url: string) => Promise<ImageResult>;
   /** The Web Share API (`navigator.share`), where the browser has it. */
@@ -129,10 +141,16 @@ export interface HostRequestEnvironment {
   mediaSession?: MediaSessionBridge;
   /** The system clipboard (`clipboard`, clipboard.ts). */
   clipboard?: ClipboardHost;
+  /** The microphone, recording as `AVAudioRecorder` does (audioRecorder.ts); `useAudioRecorder` calls it. */
+  audioRecorder?: AudioRecorderHost;
+  /** The app's files (files.ts: its IndexedDB home on a page, its sandbox natively); `FileManager` in @swiftbrowser/react calls it. */
+  files?: FilesHost;
   /** The browser's built-in translator (`translate`, translation.ts), where it has one. */
   translation?: TranslationHost;
   /** The browser's color chooser (`pickColor`, colorPicker.ts); it must open before it returns. */
   pickColor?: ColorChooser;
+  /** The system's undo for the app's undo manager (undo.ts): the keyboard here, the window's `UndoManager` natively; `useUndoManager` listens. */
+  undoManager?: UndoHost;
 }
 
 /**
@@ -190,6 +208,8 @@ export function installPushService(workerURL: string, scope: string): void {
   if (push) notificationHost.push = push;
 }
 const scannerHost = browserScannerHost();
+const audioRecorderHost = browserAudioRecorder(() => browserEnvironment.files);
+const filesHost = browserFiles();
 const webAuthHost = browserWebAuthHost();
 const mediaHost = browserMediaHost(typeof document !== 'undefined' ? downloadBlob : undefined);
 const mediaSessionHost = browserMediaSessionHost();
@@ -198,13 +218,16 @@ const translationHost = browserTranslationHost();
 
 export const browserEnvironment: HostRequestEnvironment = {
   fetch: (input, init) => fetch(input, init),
-  loadImage: (url) =>
-    new Promise((resolve, reject) => {
+  loadImage: async (url) => {
+    // A `file:` URL of the app's files loads at its object URL (`loadableURL`).
+    const src = await loadableURL(url);
+    return new Promise((resolve, reject) => {
       const img = new Image();
       img.onload = () => resolve({ width: img.naturalWidth, height: img.naturalHeight });
       img.onerror = () => reject(new Error(`network: could not load ${url}`));
-      img.src = url;
-    }),
+      img.src = src;
+    });
+  },
   ...(typeof navigator !== 'undefined' && typeof navigator.share === 'function'
     ? { share: (data: ShareData) => navigator.share(data) }
     : {}),
@@ -227,10 +250,26 @@ export const browserEnvironment: HostRequestEnvironment = {
   ...(mediaHost ? { media: mediaHost } : {}),
   ...(mediaSessionHost ? { mediaSession: new MediaSessionBridge(mediaSessionHost) } : {}),
   ...(clipboardHost ? { clipboard: clipboardHost } : {}),
+  ...(audioRecorderHost ? { audioRecorder: audioRecorderHost } : {}),
+  ...(filesHost ? { files: filesHost } : {}),
   ...(translationHost ? { translation: translationHost } : {}),
   ...(typeof document !== 'undefined' ? { pickColor: chooseColor } : {}),
+  ...(typeof document !== 'undefined' ? { undoManager: browserUndoHost(document) } : {}),
 };
 
+/**
+ * The URL a media element or an image loads `url` at: a `file:` URL of the
+ * app's files becomes an object URL of its bytes through the files host (a
+ * promise), any other URL is itself. A file that cannot be loaded resolves to
+ * the `file:` URL as given, so the element fails to load it and says so.
+ */
+export function loadableURL(url: string): string | Promise<string> {
+  if (!url.startsWith('file:')) return url;
+  const files = browserEnvironment.files;
+  if (!files) return url;
+  return files.loadURL(url).catch(() => url);
+}
+
 /**
  * Performs one request. Resolves with the result the app expects for the
  * op's kind; rejects with an `Error` whose message starts with a short tag
@@ -287,6 +326,9 @@ export async function performHostRequest(
     case 'pickColor':
       // Not awaited before the chooser opens: it is clicked inside the tap that sent the request.
       return performPickColor(op.params as PickColorRequestParams, env.pickColor);
+    case 'undo':
+      // The Swift app's undo manager, after a change: told to the host, which shows nothing on a page (undo.ts).
+      return performUndo(op.params as UndoRequestParams, env.undoManager);
     default:
       throw new Error(`unsupported: request kind ${String((op as { kind: unknown }).kind)}`);
   }

package/src/interaction.ts

@@ -35,6 +35,12 @@
  * directly for pull to refresh (the browser cancels the pointer once it
  * scrolls the list).
  *
+ * A gesture's `mode` changes its place in the order (src/gestureComposition.ts):
+ * `highPriority` is asked before the wrappers inside it, and `simultaneous`
+ * never claims: it begins when its own distance is met and receives every
+ * move beside the owner, whoever that turns out to be, so a canvas can track
+ * a finger its items are also dragging.
+ *
  * Two more candidates lift something (src/dragDrop.ts does the DOM work):
  * a movable `listrow` (by its edit-mode grip from the pointer down, or by a
  * long press when the list is not editing) is reordered among its
@@ -44,9 +50,10 @@
  */
 
 import { RowReorder, ViewDrag } from './dragDrop';
+import { isSimultaneous, placeWrapper } from './gestureComposition';
 import type { LayoutNode } from './layout';
 import { symbolOf, textOf, tintOf, unwrapStyledNode } from './nodeQueries';
-import type { DragEvent, ElementId, RendererEvent } from './protocol';
+import type { DragEvent, ElementId, GestureCoordinateSpace, GestureMode, RendererEvent } from './protocol';
 import { colorToCSS } from './styles';
 import {
   SWIPE_ACTION_WIDTH,
@@ -136,17 +143,27 @@ interface SwipeHost {
   actions: Record<SwipeEdge, ActionSpec[]>;
 }
 
+interface GestureCandidate {
+  kind: 'gesture';
+  el: HTMLElement;
+  id: ElementId;
+  drag: boolean;
+  longPress: boolean;
+  minDistance: number;
+  minDuration: number;
+  /** `.highPriorityGesture` / `.simultaneousGesture`; absent for `.gesture`. */
+  mode?: GestureMode;
+  /** The space of the drag's `location` and `startLocation`. */
+  space: GestureCoordinateSpace;
+  /** The element's box when the drag began (locations are relative to it). */
+  rect: DOMRect | null;
+  /** A simultaneous gesture that has begun (it runs beside the owner). */
+  active: boolean;
+}
+
 type Candidate =
   | { kind: 'swipeback'; screen: HTMLElement; below: HTMLElement | null; id: ElementId; width: number }
-  | {
-      kind: 'gesture';
-      el: HTMLElement;
-      id: ElementId;
-      drag: boolean;
-      longPress: boolean;
-      minDistance: number;
-      minDuration: number;
-    }
+  | GestureCandidate
   | { kind: 'contextmenu'; el: HTMLElement; id: ElementId }
   | { kind: 'swipe'; host: SwipeHost }
   | { kind: 'sheet'; sheet: HTMLElement; card: HTMLElement; id: ElementId }
@@ -165,15 +182,18 @@ interface Session {
   samples: Sample[];
   candidates: Candidate[];
   claimed: Candidate | null;
+  /** The simultaneous gestures running beside the owner (or alone, before any claim). */
+  along: GestureCandidate[];
+  /** The root's box, for `global` drag locations. */
+  rootRect: DOMRect | null;
   /** A long press fired: the session ignores further motion. */
   done: boolean;
   suppressClick: boolean;
   longPressTimer: number | null;
   /** The pointer went down on a pushed screen's edge strip (touch): a plain tap is forwarded. */
   edgeStrip: HTMLElement | null;
-  // gesture drag
-  gestureRect: DOMRect | null;
-  pendingDrag: DragEvent | null;
+  // gesture drag (one per gesture: the owner's and the simultaneous ones')
+  pendingDrag: Map<ElementId, DragEvent> | null;
   raf: number | null;
   // swipe row
   swipeStart: number;
@@ -322,11 +342,12 @@ export class InteractionController {
       samples: [{ t: event.timeStamp, x: event.clientX, y: event.clientY }],
       candidates,
       claimed: null,
+      along: [],
+      rootRect: null,
       done: false,
       suppressClick: false,
       longPressTimer: null,
       edgeStrip,
-      gestureRect: null,
       pendingDrag: null,
       raf: null,
       swipeStart: 0,
@@ -353,8 +374,12 @@ export class InteractionController {
       session.longPressTimer = window.setTimeout(() => this.fireLongPress(session, presser), duration);
     }
     // An immediate drag gesture (`minimumDistance: 0`) and a row's grip own the pointer from the start.
-    const immediate = candidates.find((c) => (c.kind === 'gesture' && c.drag && c.minDistance <= 0) || (c.kind === 'reorder' && c.immediate));
-    if (immediate && candidates[0] === immediate) this.claim(session, immediate, event.pointerId);
+    const immediate = candidates.find((c) => (c.kind === 'gesture' && c.drag && c.minDistance <= 0 && !isSimultaneous(c)) || (c.kind === 'reorder' && c.immediate));
+    if (immediate && candidates.find((c) => !isSimultaneous(c)) === immediate) this.claim(session, immediate, event.pointerId);
+    // An immediate simultaneous gesture begins beside whatever else there is.
+    for (const c of candidates) {
+      if (c.kind === 'gesture' && isSimultaneous(c) && c.drag && c.minDistance <= 0) this.beginAlong(session, c);
+    }
   };
 
   /** A lifted row or view moves with the finger: the list under it must not scroll. */
@@ -378,12 +403,16 @@ export class InteractionController {
       window.clearTimeout(session.longPressTimer);
       session.longPressTimer = null;
     }
+    // A simultaneous gesture begins once its own distance is met, claiming nothing.
+    for (const c of session.candidates) {
+      if (c.kind === 'gesture' && isSimultaneous(c) && !c.active && this.wants(c, dx, dy, distance)) this.beginAlong(session, c);
+    }
     if (!session.claimed) {
-      const owner = session.candidates.find((c) => this.wants(c, dx, dy, distance));
-      if (!owner) return;
-      this.claim(session, owner, event.pointerId);
+      const owner = session.candidates.find((c) => !isSimultaneous(c) && this.wants(c, dx, dy, distance));
+      if (owner) this.claim(session, owner, event.pointerId);
     }
     if (session.claimed) this.move(session, session.claimed, dx, dy);
+    for (const c of session.along) this.move(session, c, dx, dy);
   };
 
   private readonly onPointerUp = (event: PointerEvent): void => {
@@ -412,10 +441,20 @@ export class InteractionController {
     const dx = session.x - session.startX;
     const dy = session.y - session.startY;
     const velocity = velocityFrom(session.samples);
+    for (const c of session.along) {
+      if (cancelled) this.cancel(session, c, dx, dy);
+      else this.end(session, c, dx, dy, velocity);
+    }
     if (session.claimed) {
       if (cancelled) this.cancel(session, session.claimed, dx, dy);
       else this.end(session, session.claimed, dx, dy, velocity);
       session.suppressClick = true;
+    } else if (!cancelled && !session.done && this.tapImmediateGesture(session)) {
+      session.suppressClick = true;
+    } else if (session.along.length > 0 && Math.hypot(dx, dy) >= LONG_PRESS_SLOP) {
+      // A simultaneous gesture alone leaves a tap to the taps under it (as
+      // SwiftUI's tap and simultaneous drag both fire); a real drag was no tap.
+      session.suppressClick = true;
     } else if (!cancelled && session.edgeStrip && Math.hypot(dx, dy) < LONG_PRESS_SLOP && !session.done) {
       // A plain tap on the (touch-only) edge strip goes to whatever is under it.
       this.forwardTap(session.edgeStrip, session.x, session.y);
@@ -424,6 +463,21 @@ export class InteractionController {
     if (session.suppressClick) suppressNextClick();
   }
 
+  /**
+   * A tap that nothing claimed still reaches an immediate drag gesture
+   * (`minimumDistance: 0`) under it, as `began` then `ended`: a back swipe's
+   * edge, first in line there, keeps the gesture from claiming at the
+   * pointer down, but on iOS the edge pan only begins with motion.
+   */
+  private tapImmediateGesture(session: Session): boolean {
+    if (session.candidates[0]?.kind !== 'swipeback') return false;
+    const gesture = session.candidates.find((c): c is GestureCandidate => c.kind === 'gesture' && c.drag && c.minDistance <= 0 && !isSimultaneous(c));
+    if (!gesture) return false;
+    this.claim(session, gesture, session.pointerId);
+    this.end(session, gesture, session.x - session.startX, session.y - session.startY, { x: 0, y: 0 });
+    return true;
+  }
+
   private detachWindow(): void {
     window.removeEventListener('pointermove', this.onPointerMove);
     window.removeEventListener('pointerup', this.onPointerUp);
@@ -453,6 +507,7 @@ export class InteractionController {
     }
     // A horizontal scroll view takes horizontal motion from the rows around it.
     let inHorizontalScroller = false;
+    const wrapperStart = out.length;
     for (let el: HTMLElement | null = target; el && el !== this.host.root; el = el.parentElement) {
       const id = Number(el.dataset[ID_ATTR]);
       if (isHorizontalScroller(el)) inHorizontalScroller = true;
@@ -464,7 +519,21 @@ export class InteractionController {
         if (!drag && !longPress) continue;
         const minDistance = typeof props['minimumDistance'] === 'number' ? Math.max(0, props['minimumDistance']) : DRAG_MIN_DISTANCE;
         const minDuration = typeof props['minimumDuration'] === 'number' ? Math.max(0, props['minimumDuration']) * 1000 : LONG_PRESS_MS;
-        out.push({ kind: 'gesture', el, id, drag, longPress, minDistance, minDuration });
+        const mode = props['mode'];
+        const candidate: GestureCandidate = {
+          kind: 'gesture',
+          el,
+          id,
+          drag,
+          longPress,
+          minDistance,
+          minDuration,
+          space: props['coordinateSpace'] === 'global' ? 'global' : 'local',
+          rect: null,
+          active: false,
+        };
+        if (mode === 'highPriority' || mode === 'simultaneous') candidate.mode = mode;
+        placeWrapper(out, candidate, wrapperStart);
       } else if (el.classList.contains('sb-contextmenu') && Number.isInteger(id)) {
         out.push({ kind: 'contextmenu', el, id });
       } else if (el.classList.contains('sb-draggable') && Number.isInteger(id)) {
@@ -533,9 +602,19 @@ export class InteractionController {
     }
   }
 
+  /** A simultaneous gesture begins: `began` goes out and it hears every move until the pointer lifts. */
+  private beginAlong(session: Session, c: GestureCandidate): void {
+    c.active = true;
+    c.rect = c.el.getBoundingClientRect();
+    session.rootRect ??= this.host.root.getBoundingClientRect();
+    session.along.push(c);
+    this.host.send(this.dragEvent(session, c, 'began', { x: 0, y: 0 }));
+  }
+
   private claim(session: Session, c: Candidate, pointerId: number): void {
     session.claimed = c;
-    session.candidates = [c];
+    // The simultaneous gestures stay: those running keep hearing the pointer, the others may still begin.
+    session.candidates = [c, ...session.candidates.filter((other) => other !== c && isSimultaneous(other))];
     if (session.longPressTimer !== null) {
       window.clearTimeout(session.longPressTimer);
       session.longPressTimer = null;
@@ -548,7 +627,8 @@ export class InteractionController {
     }
     switch (c.kind) {
       case 'gesture': {
-        session.gestureRect = c.el.getBoundingClientRect();
+        c.rect = c.el.getBoundingClientRect();
+        session.rootRect ??= this.host.root.getBoundingClientRect();
         this.host.send(this.dragEvent(session, c, 'began', { x: 0, y: 0 }));
         break;
       }
@@ -610,14 +690,14 @@ export class InteractionController {
   private move(session: Session, c: Candidate, dx: number, dy: number): void {
     switch (c.kind) {
       case 'gesture': {
-        // Coalesced: the latest position goes out once per animation frame.
-        session.pendingDrag = this.dragEvent(session, c, 'changed', { x: 0, y: 0 });
+        // Coalesced: the latest position goes out once per animation frame (one per gesture).
+        (session.pendingDrag ??= new Map()).set(c.id, this.dragEvent(session, c, 'changed', { x: 0, y: 0 }));
         if (session.raf === null) {
           session.raf = requestAnimationFrame(() => {
             session.raf = null;
             const pending = session.pendingDrag;
             session.pendingDrag = null;
-            if (pending && this.session === session) this.host.send(pending);
+            if (pending && this.session === session) for (const event of pending.values()) this.host.send(event);
           });
         }
         return;
@@ -754,8 +834,9 @@ export class InteractionController {
     return reorder !== null && reorder.settling && reorder.row.parentElement === row.parentElement;
   }
 
-  private dragEvent(session: Session, c: Extract<Candidate, { kind: 'gesture' }>, phase: DragEvent['phase'], velocity: { x: number; y: number }): DragEvent {
-    const rect = session.gestureRect ?? c.el.getBoundingClientRect();
+  /** The event for `c` at the pointer's position, its locations in the gesture's space (the element's box, or the root's). */
+  private dragEvent(session: Session, c: GestureCandidate, phase: DragEvent['phase'], velocity: { x: number; y: number }): DragEvent {
+    const rect = c.space === 'global' ? (session.rootRect ??= this.host.root.getBoundingClientRect()) : (c.rect ??= c.el.getBoundingClientRect());
     return {
       type: 'drag',
       id: c.id,