@swiftbrowser/web 0.3.0 → 0.4.0

package/README.md

@@ -32,7 +32,9 @@ src/bitmaps.ts      UIImage bitmaps: draws recipes on each image's <canvas>, thr
 src/bitmapStore.ts  The bitmap store: keeps `imagedata` sources, decodes them, draws recipes (bitmapPlan.ts, imageOps.ts); no DOM
 src/bitmapWorker.ts The store in a worker, answering drawings with ImageBitmaps
 src/imageOps.ts     Core Image's steps (sepia, crystallize, edges, blur, pixellate, unsharp mask, vignette, crop) on rasters; no DOM
-src/styles.css      iOS tokens, device frame, device mode, element styles
+src/hostContent.ts  `host` elements: the registry of the page's own DOM elements the renderer adopts (docs/ops-protocol.md, "Host elements")
+src/pointerEffects.ts Hover events, tooltips, cursors and symbol effects for page-side producers; frame reports' safe-area overlap (docs/ops-protocol.md, "Pointer, effects, matched geometry and frames on screen")
+src/styles.css      iOS tokens, device frame, device mode, element styles, host boxes and islands
 node/               Node side: apps.ts (the AppSpec registry type), config.ts (Vite config from specs),
                     examples.ts (Examples/* as specs, build-wasm.sh runner, descriptions),
                     index.ts (createDevServer / buildSite, the package entry); compiled to node/dist/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftbrowser/web",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "type": "module",
   "description": "SwiftBrowser web renderer and dev server: applies render ops from a Swift/Wasm app to the DOM inside an iPhone frame.",
   "repository": {
@@ -14,7 +14,9 @@
     ".": {
       "types": "./node/dist/node/index.d.ts",
       "default": "./node/dist/node/index.js"
-    }
+    },
+    "./src/styles.css": "./src/styles.css",
+    "./src/*": "./src/*.ts"
   },
   "files": [
     "node/dist",

package/src/animation.ts

@@ -56,6 +56,11 @@ export interface UpdatedRecord {
   /** `animationToken` changed in this pass; `animation` is the subtree's. */
   tokenChanged: boolean;
   animation?: Animation;
+  /**
+   * The change animates by default (an inspector shown or hidden): with the
+   * commit's animation when it has one, else with `default`.
+   */
+  implicit?: boolean;
 }
 
 export interface RemovedRecord {
@@ -65,6 +70,17 @@ export interface RemovedRecord {
   /** Position relative to the animation root, before removal. */
   rect: DOMRect | null;
   transition: Transition | undefined;
+  /** `.matchedGeometryEffect` boxes in the removed subtree (itself included): their ids and where they were. */
+  matched?: { id: string; el: HTMLElement; rect: DOMRect }[];
+}
+
+/** A text whose content changed under a `contentTransition`: a copy of how it looked, and where. */
+export interface ContentChange {
+  el: HTMLElement;
+  clone: HTMLElement;
+  rect: DOMRect;
+  kind: 'numericText' | 'opacity' | 'interpolate';
+  countsDown: boolean;
 }
 
 export interface PassRecord {
@@ -72,10 +88,11 @@ export interface PassRecord {
   /** Elements attached by `insert` in this pass that were detached before. */
   inserted: Set<HTMLElement>;
   removed: RemovedRecord[];
+  contentChanges: ContentChange[];
 }
 
 export function emptyPass(): PassRecord {
-  return { updated: new Map(), inserted: new Set(), removed: [] };
+  return { updated: new Map(), inserted: new Set(), removed: [], contentChanges: [] };
 }
 
 export interface FrameRect {
@@ -401,11 +418,13 @@ export class Animator {
    * Animate the pass. `commitAnimation` is the commit's own animation
    * (`withAnimation`); subtrees whose `animationToken` changed use their own
    * animation instead, as `.animation(_:value:)` overrides the transaction.
+   * An `implicit` change (an inspector shown or hidden) animates even without
+   * one, with the commit's animation or `default`.
    */
   commit(pass: PassRecord, commitAnimation: Animation | undefined, frames: readonly FrameChange[] = []): void {
     const tokenRoots = new Map<HTMLElement, Animation | undefined>();
     for (const [el, rec] of pass.updated) {
-      if (rec.tokenChanged) tokenRoots.set(el, rec.animation);
+      if (rec.tokenChanged) tokenRoots.set(el, rec.implicit ? commitAnimation : rec.animation);
     }
     if (!commitAnimation && tokenRoots.size === 0) {
       // Not animated: frames still tweening toward a box this pass replaced
@@ -414,6 +433,13 @@ export class Animator {
       return;
     }
 
+    // Matched geometry: a box inserted with the id of a removed one starts
+    // from the removed one's frame, and the removed one's exit travels to
+    // the new frame. Both frames are read now, before the tweens below hold
+    // ancestors at their old geometry.
+    const matchedPairs = this.matchedPairs(pass);
+    const matchedTo = new Map<RemovedRecord, { from: DOMRect; to: DOMRect }>();
+
     const animationFor = (chain: Iterable<HTMLElement>): Animation | undefined | false => {
       for (const el of chain) {
         if (tokenRoots.has(el)) return tokenRoots.get(el) ?? { type: 'default' };
@@ -475,6 +501,22 @@ export class Animator {
       this.animateFrame(change.el, start, change.to, animation);
     }
 
+    // Matched geometry. The inserted box starts from the removed one's frame
+    // relative to where it is drawn now: its ancestors' tweens have started
+    // and carry it along, so the two together move it on screen. The removed
+    // box's exit clone sits at the root and travels to the final frame, read
+    // before any tween began.
+    if (matchedPairs.length > 0) {
+      const base = this.rootRect();
+      for (const pair of matchedPairs) {
+        const animation = animationFor([pair.box, ...ancestorsOf(pair.box)]);
+        if (animation === false) continue;
+        const drawn = this.rectOf(pair.box, base) ?? pair.to;
+        this.animateMatched(pair.box, pair.from, drawn, animation);
+        if (pair.rec.rect) matchedTo.set(pair.rec, { from: pair.from, to: pair.to });
+      }
+    }
+
     // Inserted elements: only subtree roots (a nested fade would compound).
     for (const el of pass.inserted) {
       if (!el.isConnected || pass.updated.has(el)) continue;
@@ -485,14 +527,116 @@ export class Animator {
       this.enter(el, transitionOf(el), animation);
     }
 
+    // Content transitions: the old text leaves as the new one arrives.
+    for (const change of pass.contentChanges) {
+      if (!change.el.isConnected) continue;
+      const animation = animationFor(ancestorsAndSelf(change.el));
+      if (animation === false) continue;
+      this.transitionContent(change, animation);
+    }
+
     // Removed elements: leave a clone that plays the transition backwards.
     for (const rec of pass.removed) {
       if (!rec.rect) continue;
       if (this.selfAnimating.has(rec.el.dataset['sbKind'] ?? '')) continue;
       const animation = animationFor([rec.el, ...rec.ancestors]);
       if (animation === false) continue;
-      this.exit(rec, animation);
+      const clone = this.exit(rec, animation);
+      const move = matchedTo.get(rec);
+      if (clone && move) this.moveClone(clone, move.from, move.to, animation);
+    }
+  }
+
+  /** The matched boxes this pass inserted, with the frame of the removed box of the same id and their own. */
+  private matchedPairs(pass: PassRecord): { box: HTMLElement; rec: RemovedRecord; from: DOMRect; to: DOMRect }[] {
+    const removed = new Map<string, { rec: RemovedRecord; rect: DOMRect }>();
+    for (const rec of pass.removed) {
+      for (const m of rec.matched ?? []) removed.set(m.id, { rec, rect: m.rect });
     }
+    if (removed.size === 0) return [];
+    const pairs: { box: HTMLElement; rec: RemovedRecord; from: DOMRect; to: DOMRect }[] = [];
+    const base = this.rootRect();
+    for (const el of pass.inserted) {
+      if (!el.isConnected || hasAncestorIn(el, pass.inserted)) continue;
+      const boxes = el.dataset['sbMatched'] !== undefined ? [el] : [];
+      boxes.push(...el.querySelectorAll<HTMLElement>('[data-sb-matched]'));
+      for (const box of boxes) {
+        const source = removed.get(box.dataset['sbMatched']!);
+        const to = source ? this.rectOf(box, base) : null;
+        if (source && to) pairs.push({ box, rec: source.rec, from: source.rect, to });
+      }
+    }
+    return pairs;
+  }
+
+  /**
+   * `.contentTransition`: a copy of the old text at its old place leaves
+   * (upward for `numericText`, downward when counting down) while the new
+   * text comes in from the other side; `opacity` crossfades in place.
+   */
+  transitionContent(change: ContentChange, animation: Animation | undefined): void {
+    const clone = change.clone;
+    clone.classList.add(EXIT_CLONE_CLASS);
+    clone.setAttribute('aria-hidden', 'true');
+    clone.toggleAttribute('inert', true);
+    const s = clone.style;
+    s.position = 'absolute';
+    s.left = `${change.rect.left}px`;
+    s.top = `${change.rect.top}px`;
+    s.width = `${change.rect.width}px`;
+    s.height = `${change.rect.height}px`;
+    s.margin = '0';
+    s.pointerEvents = 'none';
+    this.root.append(clone);
+    const timing = baseTiming(timingFor(animation));
+    const rolls = change.kind === 'numericText';
+    const away = change.countsDown ? '0 45%' : '0 -45%';
+    const toward = change.countsDown ? '0 -45%' : '0 45%';
+    const out = clone.animate(
+      [
+        { opacity: 1, translate: '0 0', filter: 'blur(0px)' },
+        { opacity: 0, translate: rolls ? away : '0 0', filter: rolls ? 'blur(2px)' : 'blur(0px)' },
+      ],
+      { ...timing, fill: 'forwards' },
+    );
+    change.el.animate(
+      [
+        { opacity: 0, translate: rolls ? toward : '0 0', filter: rolls ? 'blur(2px)' : 'blur(0px)' },
+        { opacity: 1, translate: '0 0', filter: 'blur(0px)' },
+      ],
+      { ...timing, fill: 'backwards' },
+    );
+    const done = (): void => clone.remove();
+    out.finished.then(done, done);
+    window.setTimeout(done, timing.duration + timing.delay + 100);
+  }
+
+  /** FLIP a matched box from the removed one's frame to its own. */
+  animateMatched(el: HTMLElement, from: DOMRect, to: DOMRect, animation: Animation | undefined): void {
+    const sx = to.width > 0 ? from.width / to.width : 1;
+    const sy = to.height > 0 ? from.height / to.height : 1;
+    const own = el.style.transform;
+    const start = `translate(${from.left - to.left}px, ${from.top - to.top}px) scale(${sx}, ${sy})`;
+    const timing = baseTiming(timingFor(animation));
+    el.animate(
+      [
+        { transformOrigin: '0 0', transform: own ? `${start} ${own}` : start },
+        { transformOrigin: '0 0', transform: own || 'none' },
+      ],
+      { ...timing, fill: 'backwards' },
+    );
+  }
+
+  /** Move a removed box's exit clone so its matched box ends on the new frame. */
+  private moveClone(clone: HTMLElement, from: DOMRect, to: DOMRect, animation: Animation | undefined): void {
+    const sx = from.width > 0 ? to.width / from.width : 1;
+    const sy = from.height > 0 ? to.height / from.height : 1;
+    const timing = baseTiming(timingFor(animation));
+    clone.style.transformOrigin = `${from.left - parseFloat(clone.style.left || '0')}px ${from.top - parseFloat(clone.style.top || '0')}px`;
+    clone.animate(
+      [{ transform: 'none' }, { transform: `translate(${to.left - from.left}px, ${to.top - from.top}px) scale(${sx}, ${sy})` }],
+      { ...timing, fill: 'forwards', composite: 'add' },
+    );
   }
 
   /** Tween every animated property whose computed value changed. */
@@ -746,3 +890,10 @@ function jumpAbove(
   }
   return x || y ? { x, y } : null;
 }
+
+/** The element's ancestors, nearest first. */
+function ancestorsOf(el: HTMLElement): HTMLElement[] {
+  const out: HTMLElement[] = [];
+  for (let a = el.parentElement; a; a = a.parentElement) out.push(a);
+  return out;
+}