@swiftbrowser/web 0.18.3 → 0.21.0

package/src/chartDom.ts

@@ -325,7 +325,7 @@ function clipPathFor(doc: Document, defs: SVGDefsElement, mask: ChartMark, plot:
 /**
  * The SVG paint for a ShapeStyle: a CSS color for flat styles (the same
  * tokens the renderer uses: `--sb-color-*` for semantic and named colors,
- * the fill tokens for hierarchical levels), or `url(#gradient)` after adding
+ * the foreground's levels for hierarchical ones), or `url(#gradient)` after adding
  * a `<linearGradient>` / `<radialGradient>` to `defs`. `bbox` is the mark's
  * pixel bounds, which a radial gradient's center and radii refer to.
  */

package/src/deviceFrame.ts

@@ -0,0 +1,188 @@
+/**
+ * Which device a desktop preview draws the app in (frame mode only; a real
+ * phone or tablet is device mode, deviceMode.ts): an iPhone (the default),
+ * an iPad in landscape, or no device at all, the app filling the window
+ * under the toolbar. styles.css and page.css draw each from the document's
+ * `data-sb-frame`; the layout engine gets the device's safe area, and its
+ * size from the screen's box, so an iPad (or a wide window) lays out in the
+ * regular size class, sidebars and all.
+ *
+ * `?device=iphone|ipad|none` picks one (and is what the picker writes, so a
+ * link shares it); otherwise the last one picked on this site, from
+ * localStorage. The toolbar's close button (an x in a circle, at its end)
+ * hides the toolbar and writes `?toolbar=0`, so a link shows the app alone;
+ * without that parameter the toolbar is back. The pages' inline scripts apply the same rule before the
+ * first paint (app/index.html's, and the native apps' web/index.html), so
+ * an iPad never flashes an iPhone first.
+ */
+
+import type { EdgeInsets } from './layout';
+
+export type DeviceFrame = 'iphone' | 'ipad' | 'none';
+
+export const DEVICE_FRAMES: readonly { id: DeviceFrame; label: string }[] = [
+  { id: 'iphone', label: 'iPhone' },
+  { id: 'ipad', label: 'iPad' },
+  { id: 'none', label: 'None' },
+];
+
+/**
+ * The safe area each device gives the app: an iPhone 15 Pro's status bar and
+ * home indicator, an iPad's (24 and 20 points, as iPadOS draws them in
+ * landscape), and none without a device.
+ */
+export const FRAME_SAFE_AREAS: Readonly<Record<DeviceFrame, EdgeInsets>> = {
+  iphone: { top: 59, leading: 0, bottom: 34, trailing: 0 },
+  ipad: { top: 24, leading: 0, bottom: 20, trailing: 0 },
+  none: { top: 0, leading: 0, bottom: 0, trailing: 0 },
+};
+
+/** Where the last device picked is kept. */
+export const DEVICE_FRAME_KEY = 'sb-device-frame';
+
+const isFrame = (value: unknown): value is DeviceFrame => value === 'iphone' || value === 'ipad' || value === 'none';
+
+/** `?device=`, else the stored choice, else the iPhone. */
+export function decideDeviceFrame(search: string = location.search, storage: Pick<Storage, 'getItem'> | null = safeStorage()): DeviceFrame {
+  const asked = new URLSearchParams(search).get('device');
+  if (isFrame(asked)) return asked;
+  let stored: string | null = null;
+  try {
+    stored = storage?.getItem(DEVICE_FRAME_KEY) ?? null;
+  } catch {
+    // Storage blocked: the default.
+  }
+  return isFrame(stored) ? stored : 'iphone';
+}
+
+/**
+ * Marks the document with the device (`data-sb-frame`) and gives the status
+ * bar the date an iPad shows beside the time.
+ */
+export function applyDeviceFrame(frame: DeviceFrame, doc: Document = document): void {
+  doc.documentElement.dataset['sbFrame'] = frame;
+  const time = doc.querySelector('.status-time');
+  if (time && !time.querySelector('.status-date')) {
+    const date = doc.createElement('span');
+    date.className = 'status-date';
+    date.textContent = 'Tue Jan 9';
+    time.append(date);
+  }
+}
+
+/** What the picker drives: the renderer (or a mounted React root's). */
+export interface DeviceFrameTarget {
+  setSafeArea(insets: EdgeInsets | null): void;
+  viewportChanged(): void;
+}
+
+export interface DeviceFramePickerOptions {
+  /** The page's toolbar, which gets the picker. */
+  toolbar?: HTMLElement | null;
+  /** The toolbar item the picker goes before; the theme toggle by default, else the end. */
+  before?: Element | null;
+  search?: string;
+  storage?: Pick<Storage, 'getItem' | 'setItem'> | null;
+  /** Called after each change of device, the new one applied. */
+  onChange?: (frame: DeviceFrame) => void;
+  /** The close button at the toolbar's end (`installToolbarClose`); on unless false. */
+  closeButton?: boolean;
+}
+
+/**
+ * A desktop preview's device: applies the chosen one, lays the app out for
+ * it, and adds a Device picker to the toolbar that switches it in place (the
+ * app keeps its state) and remembers it. Does nothing in device mode, where
+ * the page is the device. Returns the device in use.
+ */
+export function installDeviceFrame(target: DeviceFrameTarget, options: DeviceFramePickerOptions = {}): DeviceFrame {
+  const doc = document;
+  if (doc.documentElement.dataset['sbMode'] === 'device') return 'iphone';
+  const storage = options.storage === undefined ? safeStorage() : options.storage;
+  let frame = decideDeviceFrame(options.search ?? location.search, storage);
+  const show = (next: DeviceFrame): void => {
+    frame = next;
+    applyDeviceFrame(next, doc);
+    target.setSafeArea(FRAME_SAFE_AREAS[next]);
+    target.viewportChanged();
+  };
+  show(frame);
+
+  const toolbar = options.toolbar === undefined ? doc.querySelector<HTMLElement>('.toolbar') : options.toolbar;
+  if (toolbar && options.closeButton !== false) installToolbarClose(toolbar, target);
+  if (!toolbar || toolbar.querySelector('#device-frame')) return frame;
+  const label = doc.createElement('label');
+  label.className = 'toolbar-label';
+  label.htmlFor = 'device-frame';
+  label.textContent = 'Device';
+  const select = doc.createElement('select');
+  select.id = 'device-frame';
+  select.className = 'toolbar-select';
+  for (const { id, label: text } of DEVICE_FRAMES) select.append(new Option(text, id, false, id === frame));
+  select.addEventListener('change', () => {
+    if (!isFrame(select.value)) return;
+    show(select.value);
+    try {
+      storage?.setItem(DEVICE_FRAME_KEY, select.value);
+    } catch {
+      // Storage full or blocked: the choice lasts the page.
+    }
+    const url = new URL(location.href);
+    if (select.value === 'iphone') url.searchParams.delete('device');
+    else url.searchParams.set('device', select.value);
+    history.replaceState(history.state, '', url);
+    options.onChange?.(frame);
+  });
+  const before = options.before === undefined ? toolbar.querySelector('#theme-toggle') : options.before;
+  if (before && before.parentElement === toolbar) {
+    toolbar.insertBefore(label, before);
+    toolbar.insertBefore(select, before);
+  } else {
+    toolbar.append(label, select);
+  }
+  return frame;
+}
+
+/** Whether the URL asks for the page without its toolbar (`?toolbar=0`). */
+export function toolbarHidden(search: string = location.search): boolean {
+  return new URLSearchParams(search).get('toolbar') === '0';
+}
+
+/**
+ * An x in a circle at the end of the toolbar that hides it, for the app
+ * alone in the page (a screenshot, a demo): the document gets
+ * `data-sb-toolbar="hidden"` (page.css), the URL `?toolbar=0` so a reload
+ * or a shared link keeps it hidden, and the renderer re-reads the screen's
+ * size, which grows without a device. The pages' inline scripts hide the
+ * toolbar before the first paint when the URL asks.
+ */
+export function installToolbarClose(toolbar: HTMLElement, target?: Pick<DeviceFrameTarget, 'viewportChanged'>): HTMLButtonElement {
+  const doc = toolbar.ownerDocument;
+  const existing = toolbar.querySelector<HTMLButtonElement>('.toolbar-close');
+  if (existing) return existing;
+  if (toolbarHidden()) doc.documentElement.dataset['sbToolbar'] = 'hidden';
+  const button = doc.createElement('button');
+  button.type = 'button';
+  button.className = 'toolbar-close';
+  button.setAttribute('aria-label', 'Hide the toolbar');
+  button.title = 'Hide the toolbar (remove ?toolbar=0 from the address to show it again)';
+  button.innerHTML =
+    '<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true"><circle cx="10" cy="10" r="10" /><path d="M6.5 6.5l7 7M13.5 6.5l-7 7" /></svg>';
+  button.addEventListener('click', () => {
+    doc.documentElement.dataset['sbToolbar'] = 'hidden';
+    const url = new URL(location.href);
+    url.searchParams.set('toolbar', '0');
+    history.replaceState(history.state, '', url);
+    target?.viewportChanged();
+  });
+  toolbar.append(button);
+  return button;
+}
+
+function safeStorage(): Storage | null {
+  try {
+    return typeof localStorage === 'undefined' ? null : localStorage;
+  } catch {
+    return null;
+  }
+}

package/src/dragDrop.ts

@@ -32,6 +32,12 @@ export interface DragDropHost {
   readonly root: HTMLElement;
   send(event: RendererEvent): void;
   nodeOf(id: ElementId): LayoutNode | undefined;
+  /**
+   * How a dropped file reaches the app: as base64 `data` (a Swift app, whose
+   * events cross into linear memory), or by `reference` (a React app in the
+   * same page gets the `File` itself, and a dropped folder's files by path).
+   */
+  fileDrops?(): 'bytes' | 'reference';
 }
 
 function idOf(el: Element | null): ElementId | null {
@@ -488,7 +494,7 @@ export class ExternalDrops {
     const scale = scaleOf(this.host.root);
     const point = { x: round2((event.clientX - rect.left) / scale), y: round2((event.clientY - rect.top) / scale) };
     const patterns = patternsOf(destination);
-    void readItems(transfer, patterns).then((items) => {
+    void readItems(transfer, patterns, { reference: this.host.fileDrops?.() === 'reference' }).then((items) => {
       if (items.length === 0) return;
       const drop: DropEvent = { type: 'drop', id, phase: 'performed', items, x: point.x, y: point.y };
       this.host.send(drop);
@@ -514,36 +520,86 @@ export class ExternalDrops {
   }
 }
 
-/** The drag's items the patterns accept: strings as text, files as base64 bytes. */
-export async function readItems(transfer: DataTransfer, patterns: readonly string[]): Promise<DropItem[]> {
-  const reads: Promise<DropItem | null>[] = [];
+export interface ReadItemsOptions {
+  /** Carry each file by reference (`file`, and `path` inside a dropped folder) instead of reading it into base64 `data`. */
+  reference?: boolean;
+}
+
+/** The entry behind a dragged item where the browser offers one (`webkitGetAsEntry`), for folders. */
+type EntryItem = Pick<DataTransferItem, 'kind' | 'type' | 'getAsFile' | 'getAsString'> & { webkitGetAsEntry?: () => FileSystemEntry | null };
+
+/**
+ * The drag's items the patterns accept: strings as text, files as base64
+ * bytes (or by reference, `options.reference`). A dropped folder is walked
+ * (`webkitGetAsEntry`, which every browser with drag and drop offers) and
+ * each file in it that the patterns accept comes as an item of its own,
+ * named by its path from the folder, the folder's name first, as the folder
+ * chooser names picked files (hostRequests.ts `folderFiles`).
+ */
+export async function readItems(transfer: DataTransfer, patterns: readonly string[], options: ReadItemsOptions = {}): Promise<DropItem[]> {
+  const reads: Promise<DropItem[]>[] = [];
   const items = Array.from(transfer.items ?? []);
   if (items.length > 0) {
     for (const item of items) {
       if (item.kind === 'file') {
+        // The entry and the file must be taken now, inside the event: the item is empty afterwards.
+        const entry = (item as EntryItem).webkitGetAsEntry?.() ?? null;
+        if (entry?.isDirectory) {
+          reads.push(readDirectory(entry as FileSystemDirectoryEntry, entry.name, patterns, options));
+          continue;
+        }
         const file = item.getAsFile();
         const type = file?.type || 'application/octet-stream';
         if (!file || !acceptsType(patterns, type)) continue;
-        reads.push(readFile(file, type));
+        reads.push(readFile(file, type, undefined, options).then((read) => (read ? [read] : [])));
       } else if (item.kind === 'string' && (item.type === 'text/plain' || item.type === 'text/uri-list') && acceptsType(patterns, item.type)) {
         const type = item.type;
-        reads.push(new Promise((resolve) => item.getAsString((text) => resolve({ type, text }))));
+        reads.push(new Promise((resolve) => item.getAsString((text) => resolve([{ type, text }]))));
       }
     }
   } else {
     // Without `items` (an older browser, a synthetic transfer): the strings only.
     for (const type of ['text/plain', 'text/uri-list']) {
       const text = transfer.getData(type);
-      if (text && acceptsType(patterns, type)) reads.push(Promise.resolve({ type, text }));
+      if (text && acceptsType(patterns, type)) reads.push(Promise.resolve([{ type, text }]));
     }
   }
   const results = await Promise.all(reads);
-  return results.filter((item): item is DropItem => item !== null);
+  return results.flat();
+}
+
+/** Every file under a dropped folder's entry, at any depth, that the patterns accept, named by its path from the folder. */
+async function readDirectory(directory: FileSystemDirectoryEntry, path: string, patterns: readonly string[], options: ReadItemsOptions): Promise<DropItem[]> {
+  const entries = await allEntries(directory);
+  const out: DropItem[][] = await Promise.all(
+    entries.map(async (entry) => {
+      const entryPath = `${path}/${entry.name}`;
+      if (entry.isDirectory) return readDirectory(entry as FileSystemDirectoryEntry, entryPath, patterns, options);
+      const file = await new Promise<File | null>((resolve) => (entry as FileSystemFileEntry).file(resolve, () => resolve(null)));
+      const type = file?.type || 'application/octet-stream';
+      if (!file || !acceptsType(patterns, type)) return [];
+      const read = await readFile(file, type, entryPath, options);
+      return read ? [read] : [];
+    }),
+  );
+  return out.flat();
+}
+
+/** A directory entry's children: `readEntries` answers a batch at a time, until an empty one. */
+async function allEntries(directory: FileSystemDirectoryEntry): Promise<FileSystemEntry[]> {
+  const reader = directory.createReader();
+  const all: FileSystemEntry[] = [];
+  for (;;) {
+    const batch = await new Promise<FileSystemEntry[]>((resolve) => reader.readEntries(resolve, () => resolve([])));
+    if (batch.length === 0) return all;
+    all.push(...batch);
+  }
 }
 
-function readFile(file: File, type: string): Promise<DropItem | null> {
+function readFile(file: File, type: string, path: string | undefined, options: ReadItemsOptions): Promise<DropItem | null> {
+  if (options.reference) return Promise.resolve({ type, name: file.name, file, ...(path !== undefined ? { path } : {}) });
   return file
     .arrayBuffer()
-    .then((buffer) => ({ type, name: file.name, data: base64Encode(new Uint8Array(buffer)) }))
+    .then((buffer) => ({ type, name: file.name, data: base64Encode(new Uint8Array(buffer)), ...(path !== undefined ? { path } : {}) }))
     .catch(() => null);
 }

package/src/files.ts

@@ -48,8 +48,19 @@ export interface FilesHost {
   readonly directories: FileDirectories;
   /** The file's bytes. */
   read(url: string): Promise<Uint8Array>;
-  /** Writes the bytes as the file, replacing one there; its directory must exist. */
-  write(url: string, data: Uint8Array): Promise<void>;
+  /**
+   * The file's bytes from `start` up to `end` (exclusive, clamped to the
+   * file's size): what `read` would answer, sliced, without the rest of the
+   * file in memory where the host can avoid it. Hosts before 0.20 lack it;
+   * `fileManager` then reads the whole file and slices.
+   */
+  readRange?(url: string, start: number, end: number): Promise<Uint8Array>;
+  /**
+   * Writes the bytes as the file, replacing one there; its directory must
+   * exist. A `Blob` (a `File` the viewer picked or dropped) is kept as it
+   * is where the host can, so a large file never passes through memory.
+   */
+  write(url: string, data: Uint8Array | Blob): Promise<void>;
   /** Removes a file, or a directory and everything in it. */
   remove(url: string): Promise<void>;
   /** Makes the directory and the directories above it; one already there is fine. */
@@ -136,13 +147,47 @@ function parentOf(path: string): string {
 // Rows: a home's files by path, in IndexedDB or memory
 // ---------------------------------------------------------------------------
 
+/**
+ * A file's contents: bytes, or a `Blob` kept as the viewer handed it over
+ * (IndexedDB stores one without reading it into memory).
+ */
+export type FileData = Uint8Array | Blob;
+
 /** A file's bytes, or null for a directory, and when it was written and made. */
 export interface FileRow {
-  data: Uint8Array | null;
+  data: FileData | null;
   modified: number | null;
   created: number | null;
 }
 
+function isBlob(data: FileData): data is Blob {
+  return typeof Blob !== 'undefined' && data instanceof Blob;
+}
+
+/** How many bytes a file's data holds. */
+export function dataSize(data: FileData): number {
+  return isBlob(data) ? data.size : data.byteLength;
+}
+
+/** A file's data as bytes. */
+export async function dataBytes(data: FileData): Promise<Uint8Array> {
+  return isBlob(data) ? new Uint8Array(await data.arrayBuffer()) : data;
+}
+
+/** The bytes of a file's data from `start` up to `end`, clamped. */
+export async function dataSlice(data: FileData, start: number, end: number): Promise<Uint8Array> {
+  const size = dataSize(data);
+  const from = Math.min(Math.max(0, Math.floor(start)), size);
+  const to = Math.min(Math.max(from, Math.floor(end)), size);
+  if (isBlob(data)) return new Uint8Array(await data.slice(from, to).arrayBuffer());
+  return data.subarray(from, to);
+}
+
+/** A copy of a file's data a row can keep: a Blob is immutable and kept as it is. */
+function ownData(data: FileData): FileData {
+  return isBlob(data) ? data : data.slice();
+}
+
 /** The rows of one home, by path relative to it (`Documents/notes.txt`). */
 export interface FileRows {
   get(path: string): Promise<FileRow | undefined>;
@@ -157,7 +202,7 @@ export function memoryRows(): FileRows {
   const rows = new Map<string, FileRow>();
   return {
     get: async (path) => rows.get(path),
-    put: async (path, row) => void rows.set(path, { data: row.data === null ? null : row.data.slice(), modified: row.modified, created: row.created }),
+    put: async (path, row) => void rows.set(path, { data: row.data === null ? null : ownData(row.data), modified: row.modified, created: row.created }),
     remove: async (paths) => paths.forEach((path) => rows.delete(path)),
     keys: async () => [...rows.keys()],
   };
@@ -173,14 +218,15 @@ export function indexedDBRows(app: string, factory: IDBFactory = indexedDB): Fil
       const row = (await request((await store('readonly')).get(path))) as EntryRow | undefined;
       if (!row) return undefined;
       return {
-        data: row.directory ? null : new Uint8Array(row.data ?? new Uint8Array()),
+        // A Blob row stays a Blob: the browser hands it over without reading it.
+        data: row.directory ? null : row.data !== undefined && isBlob(row.data) ? row.data : new Uint8Array(row.data ?? new Uint8Array()),
         modified: typeof row.modified === 'number' ? row.modified : null,
         created: typeof row.created === 'number' ? row.created : null,
       };
     },
     async put(path, row) {
       const entries = await store('readwrite');
-      const stored: EntryRow = row.data === null ? { path, directory: true } : { path, data: row.data.slice() };
+      const stored: EntryRow = row.data === null ? { path, directory: true } : { path, data: ownData(row.data) };
       if (row.modified !== null) stored.modified = row.modified;
       if (row.created !== null) stored.created = row.created;
       entries.put(stored);
@@ -350,15 +396,24 @@ export class BrowserFiles implements FilesHost {
     this.objectURLs?.revoke(url);
   }
 
-  async read(url: string): Promise<Uint8Array> {
+  /** The row of a file (not a directory) at the URL. */
+  private async fileRow(url: string): Promise<FileRow & { data: FileData }> {
     const { mount, path } = this.locate(url);
     const row = await this.rowAt(mount, path);
     if (!row) throw new FilesFailure('notFound', `no file at ${url}`);
     if (row.data === null) throw new FilesFailure('isDirectory', `${url} is a directory`);
-    return row.data;
+    return row as FileRow & { data: FileData };
+  }
+
+  async read(url: string): Promise<Uint8Array> {
+    return dataBytes((await this.fileRow(url)).data);
+  }
+
+  async readRange(url: string, start: number, end: number): Promise<Uint8Array> {
+    return dataSlice((await this.fileRow(url)).data, start, end);
   }
 
-  async write(url: string, data: Uint8Array): Promise<void> {
+  async write(url: string, data: FileData): Promise<void> {
     const { mount, path } = this.locate(url);
     if (path === '') throw new FilesFailure('isDirectory', `${url} is a directory`);
     await this.requireDirectory(mount, parentOf(path), url);
@@ -413,7 +468,7 @@ export class BrowserFiles implements FilesHost {
     const row = await this.rowAt(mount, path);
     if (!row) return null;
     const directory = row.data === null;
-    return { size: row.data?.byteLength ?? 0, modified: row.modified, created: row.created, directory, type: directory ? '' : mediaType(path) };
+    return { size: row.data === null ? 0 : dataSize(row.data), modified: row.modified, created: row.created, directory, type: directory ? '' : mediaType(path) };
   }
 
   /** Every row at or below `path`, by path. */
@@ -464,10 +519,10 @@ export class BrowserFiles implements FilesHost {
     const key = `${mount.url}/${path}`;
     const known = this.loaded.get(key);
     if (known !== undefined) return known;
-    const data = await this.read(url);
+    const { data } = await this.fileRow(url);
     const type = mediaType(path);
-    if (!this.objectURLs) return `data:${type};base64,${base64Of(data)}`;
-    const made = this.objectURLs.create(new Blob([data.slice()], { type }));
+    if (!this.objectURLs) return `data:${type};base64,${base64Of(await dataBytes(data))}`;
+    const made = this.objectURLs.create(isBlob(data) ? data.slice(0, data.size, type) : new Blob([data.slice()], { type }));
     this.loaded.set(key, made);
     return made;
   }

package/src/hostRequests.ts

@@ -44,8 +44,10 @@ import type {
   UndoRequestParams,
   SharedFile,
 } from './protocol';
+import { browserAudioEngine, type AudioEngineHost } from './audioEngine';
 import { browserAudioRecorder, type AudioRecorderHost } from './audioRecorder';
 import { browserFiles, type FilesHost } from './files';
+import { browserLanguageModel, type LanguageModelHost } from './languageModel';
 import { browserClipboardHost, performClipboard, type ClipboardHost } from './clipboard';
 import { browserMediaHost, performMedia, type MediaHost } from './media';
 import { browserMediaSessionHost, MediaSessionBridge, performMediaSession } from './mediaSession';
@@ -194,8 +196,18 @@ export interface HostRequestEnvironment {
   clipboard?: ClipboardHost;
   /** The microphone, recording as `AVAudioRecorder` does (audioRecorder.ts); `useAudioRecorder` calls it. */
   audioRecorder?: AudioRecorderHost;
+  /** An engine shaped as `AVAudioEngine` (audioEngine.ts, on Web Audio); `AVAudioEngine` in @swiftbrowser/react sends it its commands. */
+  audioEngine?: AudioEngineHost;
+  /** The on-device language model (languageModel.ts: Chrome's Prompt API, else none available); `LanguageModelSession` in @swiftbrowser/react sends it its commands. */
+  languageModel?: LanguageModelHost;
   /** The app's files (files.ts: its IndexedDB home on a page, its sandbox natively); `FileManager` in @swiftbrowser/react calls it. */
   files?: FilesHost;
+  /**
+   * A dropped file the host left on disk (a `DropItem` with `url` and `size`,
+   * natively) as a `File` read on demand; a page never needs it, its drops
+   * carry the `File` itself.
+   */
+  fileFromReference?: (item: { type: string; name?: string; path?: string; url: string; size?: number }) => File;
   /** 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. */
@@ -204,18 +216,49 @@ export interface HostRequestEnvironment {
   undoManager?: UndoHost;
 }
 
+/**
+ * The type that, among a chooser's `accept`, asks for a folder rather than files (SwiftUI's `UTType.folder`).
+ * The chooser then answers with the files in the folder, at any depth, that the rest of `accept` allows.
+ */
+export const FOLDER_TYPE = 'public.folder';
+
+/**
+ * A chosen folder's files, as a `pickFiles` request answers them: those the
+ * rest of `accept` allows (an extension, a MIME type or a `type/*` pattern;
+ * any when it names none), each named by its path from the folder, the
+ * folder's own name first (`Bank/Leads/Saw.fxp`).
+ */
+export function folderFiles(files: File[], accept: string[]): File[] {
+  const allowed = accept.filter((part) => part !== FOLDER_TYPE).map((part) => part.toLowerCase());
+  const allows = (file: File): boolean =>
+    allowed.length === 0 ||
+    allowed.some((part) =>
+      part.startsWith('.') ? file.name.toLowerCase().endsWith(part)
+      : part.endsWith('/*') ? file.type.toLowerCase().startsWith(part.slice(0, -1))
+      : file.type.toLowerCase() === part);
+  return files.filter(allows).map((file) => {
+    const path = file.webkitRelativePath;
+    return path && path !== file.name ? new File([file], path, { type: file.type, lastModified: file.lastModified }) : file;
+  });
+}
+
 /**
  * The browser's file chooser: a hidden `<input type="file">` clicked at once,
  * inside the tap that sent the request (the loader performs the request while
  * the tap's click handler is still running; see wasm.ts). Resolves on
  * `change` with the files, or on `cancel` (the viewer closed the chooser)
  * with none. A browser without the `cancel` event never answers a dismissal;
- * the app's selection then just stays as it was.
+ * the app's selection then just stays as it was. With `FOLDER_TYPE` in
+ * `accept`, it is the folder chooser, answered as `folderFiles` says.
  */
 function chooseFiles(options: { accept: string; multiple: boolean }): Promise<File[]> {
+  const accept = options.accept.split(',').map((part) => part.trim()).filter((part) => part !== '');
+  const folder = accept.includes(FOLDER_TYPE);
   const input = document.createElement('input');
   input.type = 'file';
-  if (options.accept) input.accept = options.accept;
+  // A folder: the browser's folder chooser, which takes no `accept`; its files are filtered after.
+  if (folder) input.webkitdirectory = true;
+  else if (options.accept) input.accept = options.accept;
   input.multiple = options.multiple;
   // In the document (some browsers only open a chooser for an attached
   // input), but invisible and out of the way.
@@ -227,7 +270,10 @@ function chooseFiles(options: { accept: string; multiple: boolean }): Promise<Fi
       input.remove();
       resolve(files);
     };
-    input.addEventListener('change', () => finish(Array.from(input.files ?? [])), { once: true });
+    input.addEventListener('change', () => {
+      const files = Array.from(input.files ?? []);
+      finish(folder ? folderFiles(files, accept) : files);
+    }, { once: true });
     input.addEventListener('cancel', () => finish([]), { once: true });
   });
   input.click();
@@ -292,6 +338,7 @@ export function installPushService(workerURL: string, scope: string): void {
 }
 const scannerHost = browserScannerHost();
 const audioRecorderHost = browserAudioRecorder(() => browserEnvironment.files);
+const audioEngineHost = browserAudioEngine(() => browserEnvironment.files);
 const filesHost = browserFiles();
 const webAuthHost = browserWebAuthHost();
 const mediaHost = browserMediaHost(typeof document !== 'undefined' ? downloadBlob : undefined);
@@ -336,6 +383,9 @@ export const browserEnvironment: HostRequestEnvironment = {
   ...(mediaSessionHost ? { mediaSession: new MediaSessionBridge(mediaSessionHost) } : {}),
   ...(clipboardHost ? { clipboard: clipboardHost } : {}),
   ...(audioRecorderHost ? { audioRecorder: audioRecorderHost } : {}),
+  ...(audioEngineHost ? { audioEngine: audioEngineHost } : {}),
+  // A page's (a native app's runtime has no document, and fills this in with the host's).
+  ...(typeof document !== 'undefined' ? { languageModel: browserLanguageModel() } : {}),
   ...(filesHost ? { files: filesHost } : {}),
   ...(translationHost ? { translation: translationHost } : {}),
   ...(typeof document !== 'undefined' ? { pickColor: chooseColor } : {}),

package/src/interaction.ts

@@ -102,6 +102,8 @@ export interface InteractionHost {
   readonly root: HTMLElement;
   send(event: RendererEvent): void;
   nodeOf(id: ElementId): LayoutNode | undefined;
+  /** How a dropped file reaches the app (src/dragDrop.ts `DragDropHost`). */
+  fileDrops?(): 'bytes' | 'reference';
   /** Open the popover of a `contextmenu` element anchored to it. */
   openContextMenu(anchor: HTMLElement, id: ElementId): void;
   /** A covered screen is about to show (a back swipe starts): lay it out if it is stale. */
@@ -318,7 +320,10 @@ export class InteractionController {
   // -------------------------------------------------------------------------
 
   private readonly onPointerDown = (event: PointerEvent): void => {
-    if (this.session || !event.isPrimary || (event.pointerType === 'mouse' && event.button !== 0)) return;
+    // One pointer at a time, but not only the primary one: a finger on a
+    // knob while another holds a key (a `touches` element, src/touches.ts,
+    // owns that one) drags, as in SwiftUI.
+    if (this.session || (event.pointerType === 'mouse' && event.button !== 0)) return;
     const target = event.target as HTMLElement | null;
     if (!target) return;
     // Pointer downs in a text field select text, never gesture; a slider