@swiftbrowser/web 0.17.7 → 0.18.0

package/src/styles.css

@@ -37,6 +37,9 @@
      device frame for the selected size (typography.ts); the fallbacks are the
      Large values. Unstyled text is `body` and scales with it. */
   --sb-font-size-body: var(--sb-ts-body-size, 17px);
+  /* The app's accent as resolved here (its AccentColor or the system's),
+     for what keeps it inside bars, which draw in the label color. */
+  --sb-color-app-accent: var(--sb-color-accent);
 }
 
 .device,
@@ -476,6 +479,15 @@ html[data-sb-mode="device"] .device-screen {
   display: block;
 }
 
+/* `.zIndex` orders a stack's children only: a stack with one under it
+   stacks its children on its own, so a negative index stays in front of
+   what is behind the stack (and takes its taps) rather than slipping under
+   it. The modifiers' boxes between (an `.id`, a `.shadow`) pass the index
+   through to the stack, as SwiftUI's modifiers pass the trait. */
+:is(.sb-vstack, .sb-hstack, .sb-zstack):has([data-sb-z]) {
+  isolation: isolate;
+}
+
 .sb-button {
   appearance: none;
   display: block;
@@ -793,7 +805,9 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   padding: 0;
   /* `.multilineTextAlignment` reaches fields as it reaches text (inputs reset it) */
   text-align: inherit;
-  color: var(--sb-color-primary);
+  /* `.foregroundStyle` colors a field's text as it does a text's (the
+     screen's color is the primary label's) */
+  color: inherit;
   background: transparent;
   border: 0;
   outline: none;
@@ -871,6 +885,67 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   transform: translateX(22px);
 }
 
+/* `.toggleStyle(.button)`: no switch; the toggle is a button in the tint,
+   filled with it faintly while on (as a bordered button), the same size
+   either way. In a bar it draws in the bar's label color while off and
+   the app's accent while on (a 50-tall pill in a bottom bar). */
+.sb-toggle[data-sb-toggle-style="button"] {
+  border-radius: 9999px;
+  color: var(--sb-tint, var(--sb-color-accent));
+  cursor: pointer;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+  transition: background-color 0.2s ease;
+}
+
+.sb-toggle[data-sb-toggle-style="button"] > .sb-switch {
+  display: none;
+}
+
+.sb-toggle[data-sb-toggle-style="button"][data-sb-on="true"] {
+  background: var(--sb-tint-fill, color-mix(in srgb, var(--sb-tint, var(--sb-color-accent)) var(--sb-tint-fill-amount), transparent));
+}
+
+.sb-toolbar .sb-toggle[data-sb-toggle-style="button"][data-sb-on="true"] {
+  color: var(--sb-tint, var(--sb-color-app-accent));
+  background: color-mix(in srgb, var(--sb-tint, var(--sb-color-app-accent)) var(--sb-tint-fill-amount), transparent);
+}
+
+/* A toggle in a bar (the automatic style) is no switch either: its switch
+   element is a pill under the label (the engine's `switch` rect, 10 wider
+   on each side and 36 tall), filled with the app's accent while on, the
+   label then in a light accent unless it has a color of its own. */
+.sb-toolbar .sb-toggle:not([data-sb-toggle-style]) {
+  isolation: isolate;
+  cursor: pointer;
+}
+
+.sb-toolbar .sb-toggle:not([data-sb-toggle-style]) > .sb-switch {
+  z-index: -1;
+  background: transparent;
+}
+
+.sb-toolbar .sb-toggle:not([data-sb-toggle-style]) > .sb-switch > .sb-switch-knob {
+  display: none;
+}
+
+.sb-toolbar .sb-toggle:not([data-sb-toggle-style])[data-sb-on="true"] > .sb-switch {
+  background: var(--sb-tint, var(--sb-color-app-accent));
+}
+
+.sb-toolbar .sb-toggle:not([data-sb-toggle-style])[data-sb-on="true"] {
+  color: color-mix(in srgb, var(--sb-tint, var(--sb-color-app-accent)) 50%, #ffffff);
+}
+
+.sb-toggle[data-sb-toggle-style="button"]:active {
+  opacity: 0.3;
+}
+
+.sb-toggle[data-sb-toggle-style="button"]:focus-visible {
+  outline: 2px solid var(--sb-color-accent);
+  outline-offset: 2px;
+}
+
 /* ---------------------------------------------------------------------------
    Phase 2: lists (iOS inset grouped). Geometry comes from the engine: the
    list is the scrolling viewport, sections carry the inset card (`rows`),
@@ -1717,11 +1792,15 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   --sb-icon-knockout: var(--sb-color-system-background);
 }
 
-.sb-list[data-sb-list-style="plain"] .sb-section-rows,
+.sb-list[data-sb-list-style="plain"] .sb-section-rows {
+  background: var(--sb-color-system-background);
+}
+
+/* A plain list's rows keep their `.listRowBackground(_:)` too. */
 .sb-list[data-sb-list-style="plain"] .sb-section-rows > [data-sb-id],
 .sb-list[data-sb-list-style="plain"] .sb-section-rows > [data-sb-ghost],
 .sb-list[data-sb-list-style="plain"] > .sb-list-content > :not(.sb-section) {
-  background: var(--sb-color-system-background);
+  background: var(--sb-row-background, var(--sb-color-system-background));
 }
 
 .sb-navscreen:has(> .sb-navscreen-body > .sb-navscreen-content > .sb-list[data-sb-list-style="plain"]) {
@@ -2507,14 +2586,42 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   --sb-color-accent: var(--sb-color-primary);
 }
 
+/* A `keyboard` toolbar (the input accessory view): its items on the glass
+   capsule the engine floats above the keyboard (chrome `keyboardBar`, 48
+   tall, 10 in from the sides and 10 above the keyboard, as Notes' format
+   bar on iOS 26; drawn by the screen's `.sb-keyboard-bar`), over the
+   content, which stops above it. */
+.sb-toolbar[data-sb-placement="keyboard"] {
+  z-index: 4;
+}
+
+.sb-keyboard-bar {
+  position: absolute;
+  z-index: 3;
+  box-sizing: border-box;
+  border-radius: 9999px;
+  background: var(--sb-glass-background);
+  box-shadow: var(--sb-glass-shadow);
+  -webkit-backdrop-filter: blur(12px) saturate(180%);
+  backdrop-filter: blur(12px) saturate(180%);
+  pointer-events: none;
+}
+
+/* A prominent or glass button in a bar is drawn in the app's accent (its
+   own 48 circle in a bottom bar), not the bar's label color. */
+.sb-toolbar .sb-button[data-sb-style="borderedProminent"] {
+  background: var(--sb-tint, var(--sb-color-app-accent));
+}
+
 /* The bar's Liquid Glass capsules (src/layoutDom.ts; engine `leadingGlass0`
    …, `trailingGlass0` …, `bottomGlass0` …): a 44-tall capsule in the
-   navigation bar, a 48-tall one in the bottom bar, under the items drawn on
-   them (`data-sb-toolbars`). */
+   navigation bar, a 48-tall one in the bottom bar (60 around a button
+   toggle), under the items drawn on them (`data-sb-toolbars`). Each is a
+   capsule, its ends half its height, whatever the height. */
 .sb-bar-glass {
   position: absolute;
   z-index: 2;
-  border-radius: 22px;
+  border-radius: 9999px;
   background: var(--sb-glass-background);
   box-shadow: var(--sb-glass-shadow);
   backdrop-filter: blur(12px) saturate(180%);
@@ -2522,10 +2629,6 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   pointer-events: none;
 }
 
-.sb-bar-glass[data-sb-placement="bottom"] {
-  border-radius: 24px;
-}
-
 /* While a sheet slides in or out, the glass in it does not blur. What is
    painted over a backdrop filter is composited on its own, and WebKit on
    iOS does not draw such a layer while the card it is in runs an
@@ -3052,6 +3155,12 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   pointer-events: auto;
 }
 
+/* `.contentShape(Rectangle())`: the box is hit across its area, empty space
+   and inert content (a stroke-only shape) included. */
+.sb-styled[data-sb-content-shape] {
+  pointer-events: auto;
+}
+
 /* A shape that is only stroked (`.stroke`, `.strokeBorder`) is hit along its
    line in SwiftUI, not across its box: an outline overlaid on a control must
    not swallow its taps. Its box takes none, except as the content of a
@@ -3653,6 +3762,16 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   pointer-events: none;
 }
 
+/* An alert's text fields (`.alert { TextField(...) }`): a 36 row the engine
+   gives them (chrome `field<i>`), a gray rounded field with the text 12 in. */
+.sb-alert .sb-alert-buttons > .sb-textfield {
+  box-sizing: border-box;
+  padding: 0 12px;
+  border-radius: 10px;
+  background: var(--sb-color-tertiary-fill);
+  font-size: 15px;
+}
+
 /* iOS 26: an alert's buttons are gray capsules, in the label color. */
 .sb-alert[data-sb-style="alert"] .sb-alert-buttons > .sb-button,
 .sb-alert[data-sb-style="alert"] .sb-alert-ok {
@@ -3919,12 +4038,24 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   resize: none;
   overflow: auto;
   background: transparent;
-  color: var(--sb-color-primary);
+  /* `.foregroundStyle` colors its text, as a field's (the screen's color is
+     the primary label's) */
+  color: inherit;
   font: inherit;
   font-size: var(--sb-font-size-body);
   line-height: 1.3;
 }
 
+/* The rich editor (src/richEditor.ts): a contenteditable box of a span per
+   run, wrapping as the engine measured its lines (one per newline). */
+div.sb-texteditor {
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  cursor: text;
+  -webkit-user-select: text;
+  user-select: text;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .sb-alert-scrim,
   .sb-alert--in > .sb-alert-layer,

package/src/symbols.ts

@@ -163,6 +163,7 @@ import {
   Fingerprint,
   Fish,
   Flag,
+  FlagOff,
   Flame,
   Folder,
   FolderMinus,
@@ -212,11 +213,13 @@ import {
   Leaf,
   Library,
   Lightbulb,
+  LineSquiggle,
   Link,
   Link2,
   List,
   ListChecks,
   ListFilter,
+  ListIndentDecrease,
   ListIndentIncrease,
   ListMusic,
   ListOrdered,
@@ -371,6 +374,7 @@ import {
   TextAlignEnd,
   TextAlignJustify,
   TextAlignStart,
+  TextCursorInput,
   Thermometer,
   ThumbsDown,
   ThumbsUp,
@@ -639,6 +643,14 @@ export const SF_SYMBOLS: Readonly<Record<string, SymbolGlyph>> = {
   'forward.fill': solid(FastForward),
   goforward: outline(RotateCw),
   gobackward: outline(RotateCcw),
+  // The skips' number is not drawn: the arrow alone.
+  'gobackward.10': outline(RotateCcw),
+  'gobackward.15': outline(RotateCcw),
+  'gobackward.30': outline(RotateCcw),
+  'goforward.10': outline(RotateCw),
+  'goforward.15': outline(RotateCw),
+  'goforward.30': outline(RotateCw),
+  'record.circle': outline(CircleDot),
   cube: outline(Box),
   'cube.fill': outline(Box),
   shift: outline(ArrowBigUp),
@@ -684,6 +696,7 @@ export const SF_SYMBOLS: Readonly<Record<string, SymbolGlyph>> = {
   'square.3.stack.3d': outline(Layers),
   'hand.point.up.left': outline(Pointer),
   'pin.slash': outline(PinOff),
+  'pin.slash.fill': outline(PinOff),
   'square.dotted': outline(SquareDashed),
   'rectangle.dashed': outline(SquareDashed),
   'circle.dashed': outline(CircleDashed),
@@ -784,6 +797,8 @@ export const SF_SYMBOLS: Readonly<Record<string, SymbolGlyph>> = {
   'bookmark.fill': solid(Bookmark),
   flag: outline(Flag),
   'flag.fill': solid(Flag),
+  'flag.slash': outline(FlagOff),
+  'flag.slash.fill': outline(FlagOff),
   tag: outline(Tag),
   'tag.fill': solid(Tag),
   textformat: outline(CaseSensitive),
@@ -1125,6 +1140,8 @@ export const SF_SYMBOLS: Readonly<Record<string, SymbolGlyph>> = {
   character: outline(Type),
   'list.dash': outline(List),
   'list.bullet.indent': outline(ListIndentIncrease),
+  'increase.indent': outline(ListIndentIncrease),
+  'decrease.indent': outline(ListIndentDecrease),
   'list.clipboard': outline(ClipboardList),
   'square.grid.3x3': outline(Grid3x3),
   'square.grid.2x2.fill': solid(LayoutGrid),
@@ -1249,6 +1266,11 @@ export const SF_SYMBOLS: Readonly<Record<string, SymbolGlyph>> = {
   paintbrush: outline(Paintbrush),
   paintpalette: outline(Palette),
   'pencil.tip': outline(PenTool),
+  'pencil.tip.crop.circle': outline(PenTool),
+  'pencil.tip.crop.circle.fill': knockout(PenTool),
+  scribble: outline(LineSquiggle),
+  'scribble.variable': outline(LineSquiggle),
+  'character.textbox': outline(TextCursorInput),
   'pencil.slash': outline(PencilOff),
   highlighter: outline(Highlighter),
   scissors: outline(Scissors),

package/src/touchPaging.ts

@@ -155,10 +155,30 @@ function pageAt(el: HTMLElement, horizontal: boolean, offset: number): Page | nu
   return pagesOf(el, horizontal).find((p) => p.start <= offset + 1 && offset < p.start + p.length) ?? null;
 }
 
-/** Pages of a paging scroll view in scroll coordinates along its axis: the children of its `scrollTargetLayout` stack, else of its content. */
+/**
+ * Pages of the viewport's length over a scroll extent: what `.paging` turns
+ * by when nothing marks the pages, as SwiftUI's does (the last one may run
+ * past the end; the rest intervals clamp it).
+ */
+export function viewportPages(extent: number, viewport: number): { start: number; length: number }[] {
+  if (viewport <= 0) return [];
+  const count = Math.max(1, Math.ceil(extent / viewport - 0.01));
+  return Array.from({ length: count }, (_, i) => ({ start: i * viewport, length: viewport }));
+}
+
+/**
+ * Pages of a paging scroll view in scroll coordinates along its axis: the
+ * children of its `scrollTargetLayout` stack, else of its content when it
+ * has several, else the viewport's length after length (the view itself
+ * their element).
+ */
 export function pagesOf(el: HTMLElement, horizontal: boolean): Page[] {
   const targets = [...el.querySelectorAll<HTMLElement>('[data-sb-scroll-target] > *')].filter((t) => t.parentElement?.closest('.sb-scrollview, .sb-list') === el);
   const children = targets.length > 0 ? targets : [...((el.firstElementChild?.children ?? []) as Iterable<Element>)];
+  if (children.length <= 1) {
+    const pages = viewportPages(horizontal ? el.scrollWidth : el.scrollHeight, horizontal ? el.clientWidth : el.clientHeight);
+    return pages.map((page) => ({ element: el, ...page }));
+  }
   const box = el.getBoundingClientRect();
   const computed = getComputedStyle(el);
   const padding = parseFloat(horizontal ? computed.scrollPaddingLeft : computed.scrollPaddingTop) || 0;
@@ -246,7 +266,8 @@ export class TouchPaging {
     const g = this.gesture;
     if (!held || !g?.ours || g.el !== held.el) return;
     const now = g.horizontal ? g.el.scrollLeft : g.el.scrollTop;
-    const page = held.page ? pagesOf(g.el, g.horizontal).find((p) => p.element === held.page!.element) : undefined;
+    // A page of the viewport's length (the view itself its element) is no page to find again.
+    const page = held.page && held.page.element !== g.el ? pagesOf(g.el, g.horizontal).find((p) => p.element === held.page!.element) : undefined;
     const shift = page ? page.start - held.page!.start : now - held.offset;
     g.from += shift;
     if (page) {

package/src/undo.ts

@@ -0,0 +1,126 @@
+/**
+ * The system's undo for the app's undo manager (`useUndoManager` in
+ * @swiftbrowser/react, whose stack is the truth): where the system's undo
+ * and redo come from, and what it is told the stack can do. In a browser
+ * that is the keyboard: ⌘Z and ⇧⌘Z (Ctrl-Z, Ctrl-Shift-Z and Ctrl-Y off
+ * Apple platforms) while no text input has the focus go to the manager; a
+ * focused field or editor keeps the browser's own undo of what was typed in
+ * it. A page has no Edit menu, so `update` has nothing to show. The native
+ * app replaces this host with one over the window's `UndoManager`
+ * (packages/native/src/undo.ts), which the shake, the three-finger swipe,
+ * the keyboard and the Edit menu reach.
+ *
+ * A Swift app's manager is in Wasm (the shim's `UndoManager`, one per app):
+ * it reports what it can do through `undo` host requests (`performUndo`),
+ * and the host's commands go back to it as `undo` and `redo` events
+ * (`relayUndo`, which the page installs in the request environment).
+ */
+
+import type { UndoRequestParams } from './protocol';
+
+/** What the stack can do, for the system to enable and name (the Edit menu's "Undo Move"). */
+export interface UndoState {
+  canUndo: boolean;
+  canRedo: boolean;
+  /** The name of what undo takes back, or '' for none. */
+  undoActionName: string;
+  redoActionName: string;
+}
+
+/** The manager's undo and redo, as the system calls them. */
+export interface UndoCommands {
+  undo(): void;
+  redo(): void;
+}
+
+export interface UndoHost {
+  /** The stack after a change: what the system enables and names. */
+  update(state: UndoState): void;
+  /**
+   * Where the system's undo and redo go from now on, until the returned
+   * function is called. One manager at a time: the last to listen.
+   */
+  listen(commands: UndoCommands): () => void;
+}
+
+/** The part of a `Document` the host listens on; tests fake it. */
+export interface UndoKeyTarget {
+  addEventListener(type: 'keydown', listener: (event: KeyboardEvent) => void): void;
+  removeEventListener(type: 'keydown', listener: (event: KeyboardEvent) => void): void;
+}
+
+/** Whether the keyboard's command key is ⌘ (Apple platforms) rather than Ctrl. */
+export const isApplePlatform = (): boolean => typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
+
+/** The undo or redo a key press asks for, or null for any other press. */
+export function undoKey(event: Pick<KeyboardEvent, 'key' | 'metaKey' | 'ctrlKey' | 'altKey' | 'shiftKey'>, apple: boolean): 'undo' | 'redo' | null {
+  if (event.altKey) return null;
+  const command = apple ? event.metaKey && !event.ctrlKey : event.ctrlKey && !event.metaKey;
+  if (!command) return null;
+  const key = event.key.toLowerCase();
+  if (key === 'z') return event.shiftKey ? 'redo' : 'undo';
+  if (key === 'y' && !apple && !event.shiftKey) return 'redo';
+  return null;
+}
+
+/** Whether `target` is in a text input, whose own undo the browser keeps. */
+export function inTextInput(target: EventTarget | null): boolean {
+  const element = target as { closest?: (selector: string) => unknown } | null;
+  return typeof element?.closest === 'function' && element.closest('input, textarea, select, [contenteditable]:not([contenteditable="false"])') != null;
+}
+
+/** The page's host: the keyboard, listened to while a manager listens. */
+export function browserUndoHost(target: UndoKeyTarget, apple: boolean = isApplePlatform()): UndoHost {
+  let listener: ((event: KeyboardEvent) => void) | null = null;
+  return {
+    update: () => undefined,
+    listen(commands) {
+      if (listener) target.removeEventListener('keydown', listener);
+      const onKey = (event: KeyboardEvent): void => {
+        if (event.defaultPrevented || event.isComposing || inTextInput(event.target)) return;
+        const command = undoKey(event, apple);
+        if (!command) return;
+        event.preventDefault();
+        commands[command]();
+      };
+      listener = onKey;
+      target.addEventListener('keydown', onKey);
+      return () => {
+        if (listener !== onKey) return;
+        target.removeEventListener('keydown', onKey);
+        listener = null;
+      };
+    },
+  };
+}
+
+/**
+ * An `undo` host request: the Swift app's manager, after a turn that changed
+ * what it can do. The host shows nothing on a page, but learns the state;
+ * a page without a host (no document) has nothing to tell. Answered `{}`.
+ */
+export function performUndo(params: UndoRequestParams, host: UndoHost | undefined): Record<string, never> {
+  host?.update({ canUndo: params.canUndo, canRedo: params.canRedo, undoActionName: params.undoActionName, redoActionName: params.redoActionName });
+  return {};
+}
+
+/**
+ * The host as the Swift app's request environment sees it: `update` passes
+ * through, and the first one (the app has a manager in use) makes the host
+ * listen, its undo and redo sent to the app as `undo` and `redo` events,
+ * which the runtime routes to the manager. Listening lasts: the stack the
+ * keys act on is the app's, which knows when there is nothing to undo.
+ */
+export function relayUndo(host: UndoHost, send: (event: { type: 'undo' | 'redo' }) => void): UndoHost {
+  let listening = false;
+  return {
+    update(state) {
+      if (!listening) {
+        listening = true;
+        host.listen({ undo: () => send({ type: 'undo' }), redo: () => send({ type: 'redo' }) });
+      }
+      host.update(state);
+    },
+    listen: (commands) => host.listen(commands),
+  };
+}

package/src/video.ts

@@ -18,8 +18,11 @@
  */
 
 import type { ElementId, RendererEvent, VideoEvent, VideoProps } from './protocol';
+import { loadableURL } from './hostRequests';
 
 interface VideoState {
+  /** The `url` prop as last applied ('' for none); the media's `src` is what `loadableURL` made of it. */
+  source: string;
   /** The props last applied. */
   props: VideoProps | null;
   /** The highest `seek` serial carried out (-1: none yet). */
@@ -30,8 +33,31 @@ interface VideoState {
   lastTime: number;
   /** The `requestAnimationFrame` loop reporting at `report`, if running. */
   ticker: number | null;
+  /** The position the frame loop last reported and when (`smoothTime`); null between runs of playback. */
+  smooth: { time: number; at: number } | null;
 }
 
+/**
+ * The position a frame report gives: the media clock, smoothed. Safari
+ * runs the element's clock from `play()` and holds it, a tenth of a
+ * second or more, while the audio hardware catches up, the sound playing
+ * on meanwhile; a playhead on that clock stalls. Between the clock's
+ * updates the position advances with the page's clock at the playback
+ * rate and is pulled toward the media clock over about `PULL` seconds, so
+ * a hold passes unseen and the drift it leaves closes gently; a jump of
+ * more than `SNAP` (a seek, a stall of real length) is taken at once.
+ */
+export function smoothTime(previous: { time: number; at: number } | null, clock: number, now: number, rate: number): number {
+  if (previous === null) return clock;
+  const elapsed = Math.max(0, (now - previous.at) / 1000);
+  const expected = previous.time + elapsed * rate;
+  const error = clock - expected;
+  if (Math.abs(error) > SNAP) return clock;
+  return expected + error * Math.min(1, elapsed / PULL);
+}
+const PULL = 0.3;
+const SNAP = 0.5;
+
 const STATES = new WeakMap<HTMLVideoElement, VideoState>();
 /** `video` elements made so far; `stopVideos` has nothing to do while there are none. */
 let made = 0;
@@ -61,7 +87,7 @@ function mediaOf(el: HTMLElement): HTMLVideoElement {
   video.preload = 'metadata';
   video.style.cssText = 'display:block;width:100%;height:100%;background:#000;object-fit:contain';
   el.replaceChildren(video);
-  STATES.set(video, { props: null, seekSerial: -1, pendingSeek: null, lastTime: 0, ticker: null });
+  STATES.set(video, { props: null, source: '', seekSerial: -1, pendingSeek: null, lastTime: 0, ticker: null, smooth: null });
   made += 1;
   return video;
 }
@@ -85,9 +111,20 @@ export function applyVideo(el: HTMLElement, props: VideoProps): void {
   el.dataset['sbGravity'] = props.gravity ?? 'resizeAspect';
 
   const url = typeof props.url === 'string' ? props.url : '';
-  if ((video.getAttribute('src') ?? '') !== url) {
+  if (state.source !== url) {
+    state.source = url;
     if (url) {
-      video.src = url;
+      const loadable = loadableURL(url);
+      if (typeof loadable === 'string') {
+        video.src = loadable;
+      } else {
+        // A file of the app's: its object URL comes later; play then if asked.
+        void loadable.then((src) => {
+          if (state.source !== url) return;
+          video.src = src;
+          if (state.props?.playing === true && video.paused) startPlaying(video);
+        });
+      }
     } else {
       video.removeAttribute('src');
       video.load();
@@ -119,7 +156,12 @@ export function applyVideo(el: HTMLElement, props: VideoProps): void {
   }
 
   const playing = props.playing === true && url !== '';
-  video.preload = playing ? 'auto' : 'metadata';
+  // A recording the page holds (a `data:` or `blob:` URL, a voice memo) is
+  // decoded ahead, so play() starts the sound at once: on an iPhone the
+  // media clock runs from play() while the decode and the audio hardware
+  // catch up, and the position held a third of a second after it set off.
+  // A remote video is fetched ahead only once it plays.
+  video.preload = playing || /^(data|blob):/.test(url) ? 'auto' : 'metadata';
   if (playing) {
     // An ended video plays again only after a seek (play() would restart it).
     if (video.paused && (seeked || !video.ended)) startPlaying(video);
@@ -151,6 +193,7 @@ function updateTicker(video: HTMLVideoElement, state: VideoState): void {
   if (!wanted) {
     if (state.ticker !== null) cancelAnimationFrame(state.ticker);
     state.ticker = null;
+    state.smooth = null;
     return;
   }
   if (state.ticker !== null || typeof requestAnimationFrame !== 'function') return;
@@ -158,7 +201,8 @@ function updateTicker(video: HTMLVideoElement, state: VideoState): void {
     state.ticker = null;
     const report = state.props?.report;
     if (!video.isConnected || state.props?.playing !== true || typeof report !== 'number' || report <= 0) return;
-    if (!video.paused && performance.now() - state.lastTime >= report * 1000) video.dispatchEvent(new CustomEvent(TICK));
+    // A millisecond under the interval counts (a `report` of a frame fires every frame, not every other).
+    if (!video.paused && performance.now() - state.lastTime >= report * 1000 - 1) video.dispatchEvent(new CustomEvent(TICK));
     state.ticker = requestAnimationFrame(frame);
   };
   state.ticker = requestAnimationFrame(frame);
@@ -229,6 +273,8 @@ export class VideoEvents {
     const props = state.props!;
     const time = round(video.currentTime);
     const url = video.getAttribute('src') ?? '';
+    // A seek, a pause, a new source or the end moves the clock on purpose: the next frame report starts from it.
+    if (event.type !== TICK && event.type !== 'timeupdate') state.smooth = null;
     switch (event.type) {
       case 'loadedmetadata':
         return {
@@ -244,9 +290,14 @@ export class VideoEvents {
         if (!video.paused && performance.now() - state.lastTime < TIME_EVENT_MIN_MS) return null;
         state.lastTime = performance.now();
         return { event: 'time', time };
-      case TICK:
-        state.lastTime = performance.now();
-        return { event: 'time', time };
+      case TICK: {
+        const now = performance.now();
+        state.lastTime = now;
+        const rate = video.playbackRate > 0 ? video.playbackRate : 1;
+        const smoothed = round(Math.min(Number.isFinite(video.duration) ? video.duration : Infinity, smoothTime(state.smooth, video.currentTime, now, rate)));
+        state.smooth = { time: smoothed, at: now };
+        return { event: 'time', time: smoothed };
+      }
       case 'playing':
         return { event: 'status', status: 'playing', time };
       case 'waiting':

package/src/vite-env.d.ts

@@ -18,6 +18,8 @@ interface SBLandingApp {
   urlSchemes?: string[];
   /** A CORS proxy (packages/cors-proxy) through which a refused cross-origin GET is retried (src/corsProxy.ts). */
   corsProxy?: string;
+  /** The Web Push application server key the app subscribes with (`SB_WEB_PUSH_KEY`, src/notifications.ts). */
+  webPushKey?: string;
   /** Hosts the app's requests may not reach (src/blockedHosts.ts). */
   blockedHosts?: string[];
 }