react-x11 2.7.0 → 2.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-x11",
-  "version": "2.7.0",
+  "version": "2.8.1",
   "description": "react renderer with X11 as a target",
   "main": "./src/index.js",
   "files": [
@@ -98,7 +98,7 @@
     "yoga-layout": "^3.2.1"
   },
   "optionalDependencies": {
-    "@windowkit/appkit": "^0.5.0",
+    "@windowkit/appkit": "^0.5.1",
     "dbus-native": "^0.15.1",
     "x11-dri": "^0.7.0"
   },

package/src/cocoa/app.js

@@ -16,6 +16,7 @@ import { cssColorStraight } from 'ntk';
 
 import { deliverActivate, deliverOpen } from '../application.js';
 import { flushPendingFrames } from '../frames.js';
+import { flushSyncWork } from '../priority.js';
 import { setCompositingForTests } from '../compositing.js';
 import { setScreensForTests } from '../screens.js';
 import { setScaleForTests } from '../scale.js';
@@ -118,6 +119,23 @@ export class CocoaApp {
       options.cocoa?.presenter ??
       process.env.REACT_X11_COCOA_PRESENTER ??
       'surface';
+    // With the surface presenter, whether the nodes that animate get a
+    // layer of their own above the bitmap (src/cocoa/promotion.js). On by
+    // default — an animation the render server runs survives a busy JS
+    // thread, and the bitmap keeps the frame for everything else — where
+    // the bridge draws a layer's colour and a rastered one the same, which
+    // it says with `colorSpace()` (@windowkit/appkit >= 0.5.1, the range
+    // package.json asks for): before it a layer's colour was Generic RGB
+    // against sRGB surfaces, and a node moving between its layer and the
+    // bitmap changed shade on the way.
+    // Off (`cocoa.promote: false`, REACT_X11_COCOA_PROMOTE=0) keeps every
+    // animation on the frame clock, which is what the presenter bench's
+    // `surface` column measures; on (`true`, `=1`) is on regardless.
+    const promoteEnv = process.env.REACT_X11_COCOA_PROMOTE;
+    this._promote =
+      options.cocoa?.promote ??
+      (promoteEnv === '1' ||
+        (promoteEnv !== '0' && native.colorSpace?.() === 'sRGB'));
 
     // the app's own bridge, so an app over a fake one (the tests) needs no
     // real bridge on the machine — the manager's default loads it only when
@@ -594,9 +612,15 @@ export class CocoaApp {
     );
   }
 
-  _tickFrames() {
+  /**
+   * Run every frame that is due at `now`. The pump tick and the frame
+   * timer read the clock; a test names the moment, so that what a tick
+   * decides is a fact about that moment and not about how long the test
+   * took to ask — a shared runner stalls for milliseconds between two
+   * lines.
+   */
+  _tickFrames(now = performance.now()) {
     if (!this._rafQueue.length) return;
-    const now = performance.now();
     // Each window keeps its own clock, so a window on a 120Hz panel paints
     // every refresh while one on a 60Hz monitor paints every other pump
     // tick. Decided once per clock per tick: every frame a window queued
@@ -638,9 +662,21 @@ export class CocoaApp {
     for (const wnd of this._windows.values()) wnd.present();
   }
 
-  /** After any synchronously dispatched input: paint the response now (the
-   * same early flush a discrete event gets on X11) and put it on glass. */
+  /**
+   * After any synchronously dispatched input: land React's half of the
+   * response, paint it (the same early flush a discrete event gets on X11 —
+   * `discrete` in events.js) and put it on glass.
+   *
+   * `flushSyncWork` is not belt and braces. A discrete-priority update is
+   * committed on a **microtask**, and a microtask does not run until the
+   * call that dispatched the event returns to Node — which, inside one of
+   * AppKit's modal loops (a live resize, menu tracking, a dragging
+   * session), is after the whole gesture. Without it a handler's own
+   * `setState` reaches the screen when the gesture ends, and the gesture is
+   * exactly when it was worth showing.
+   */
   _afterInput() {
+    flushSyncWork();
     flushPendingFrames();
     this._presentAll();
   }
@@ -694,10 +730,14 @@ export class CocoaApp {
       case 'drag-perform':
         return this._routeDrop(ev);
       case 'drag-session-began':
+        // `draggingSession:willBeginAtPoint:`, dispatched from inside
+        // `beginDrag` — before the `onDragStart` handler's own render has
+        // been asked for, so there is nothing to flush yet. The frame that
+        // shows the drag beginning goes out from `CocoaWindow.beginDrag`,
+        // on the way back past it.
         return undefined;
       case 'drag-session-moved':
-        this._activeDrag?.nativeMoved(ev);
-        return undefined;
+        return this._routeDragMoved(ev);
       case 'drag-session-ended':
         return this._routeDragEnded(ev);
       case 'app-open-urls':
@@ -913,6 +953,20 @@ export class CocoaApp {
     this._afterInput();
   }
 
+  /**
+   * `draggingSession:movedToPoint:` — the source's own view of the gesture,
+   * and the only thing that arrives while AppKit tracks it: the pointer's
+   * `mousemove` stops, `pump2` does not return until the drop, and no timer
+   * or microtask of ours runs in between. So the frame belongs to the
+   * callback, like the destination's (`_routeDrop`) — that is what lets a
+   * `<popup dragPreview>` follow the pointer, and an `onDrag` that moves an
+   * insertion marker move it during the drag rather than on the release.
+   */
+  _routeDragMoved(ev) {
+    this._activeDrag?.nativeMoved(ev);
+    this._afterInput();
+  }
+
   /** The release of a drag AppKit was tracking for us. */
   _routeDragEnded(ev) {
     const drag = this._activeDrag;

package/src/cocoa/dnd.js

@@ -44,6 +44,7 @@
 // identifier for a MIME type no declared type claims is computed alike by
 // every process — how `application/x-myapp-…` travels between two react-x11
 // apps) and back (`pasteboardTypeInfo`).
+import { runWithPriority, DiscreteEventPriority } from '../priority.js';
 import {
   TEXT_TARGETS,
   TYPE_GROUPS,
@@ -254,6 +255,15 @@ export class CocoaDropTransport {
     this.session = session;
     this.node = node;
     this._registered = null;
+    // AppKit tracks the whole drag on this thread: the pump does not return
+    // until the drop, so nothing an enter/over dispatch schedules — a
+    // `useDropTarget` lighting its "drop here" label, any handler's
+    // `setState` — has a frame tick or a microtask to land on. Discrete is
+    // the one lane the app can land by hand from inside the callback
+    // (src/cocoa/app.js `_afterInput`), which is where the answer to
+    // AppKit's question is painted. The renderer's own `:drag-over` needs
+    // none of this and never did.
+    session.hoverPriority = DiscreteEventPriority;
     this.refreshTypes();
   }
 
@@ -326,7 +336,8 @@ export class CocoaDropTransport {
 
   _leave(ev) {
     const drag = this._local(ev);
-    this.session.localLeave();
+    // the leaving half of the same stream, in the same lane as the enter
+    runWithPriority(DiscreteEventPriority, () => this.session.localLeave());
     if (drag) drag.accepted = false;
   }
 

package/src/cocoa/presenter.js

@@ -35,7 +35,7 @@ import {
 import { EASING_CONTROL_POINTS, TRANSITION_CONTROL_POINTS } from '../styles.js';
 import { CocoaContext2D } from './context2d.js';
 
-const RASTER_PAD = 2; // antialiasing/italic overhang outside the ink bounds
+export const RASTER_PAD = 2; // antialiasing/italic overhang outside the ink bounds
 
 /**
  * A recording "context" for ntk's SvgView.draw: instead of rasterizing, it
@@ -325,7 +325,13 @@ const EDGE_PROPS = [
   'borderEndWidth',
 ];
 
-function stylePaintsPlain(node, style = node.style ?? {}) {
+/**
+ * Does `style` draw as a plain box — the property vocabulary of a layer
+ * (background, a uniform solid border, one radius), nothing that needs a
+ * raster? What decides whether a node is a PropBox on the layer presenter,
+ * and whether the surface presenter can promote it (src/cocoa/promotion.js).
+ */
+export function stylePaintsPlain(node, style = node.style ?? {}) {
   if (node.kind !== 'box') return false;
   if (style.backgroundImage || style.boxShadow || style.outlineWidth) {
     return false;
@@ -359,13 +365,13 @@ const ANIMATED_KEY_PATHS = Object.freeze({
 // looked up per app (`_animationEnds`)
 let animationSeq = 0;
 
-function uniformRadius(radius) {
+export function uniformRadius(radius) {
   if (radius === undefined) return 0;
   if (typeof radius === 'number') return radius;
   return null; // per-corner shapes go to raster
 }
 
-class Visual {
+export class Visual {
   constructor(presenter, node) {
     this.presenter = presenter;
     this.node = node;
@@ -409,7 +415,7 @@ class Visual {
   }
 }
 
-class RasterState {
+export class RasterState {
   constructor() {
     this.surface = null;
     this.gen = 0;
@@ -450,6 +456,218 @@ class RasterState {
   }
 }
 
+/**
+ * A plain box as the properties of its layer — what a PropBox visual sends
+ * on the layer presenter and what a promoted node's layer is set from on
+ * the surface presenter (src/cocoa/promotion.js): one function, so a box
+ * reads the same on either. `parentOrigin` is what `frame` is relative to,
+ * in window coordinates; everything goes out in points.
+ */
+export function propBoxProps(node, app, scale, parentOrigin, order) {
+  const abs = node.abs;
+  const style = node.style ?? {};
+  const border = typeof style.borderWidth === 'number' ? style.borderWidth : 0;
+  const colour = (value) =>
+    value ? (app._parseColor(String(value)) ?? [0, 0, 0, 0]) : [0, 0, 0, 0];
+  return {
+    frame: [
+      (abs.x - parentOrigin.x) / scale,
+      (abs.y - parentOrigin.y) / scale,
+      Math.max(0, abs.width) / scale,
+      Math.max(0, abs.height) / scale,
+    ],
+    zPosition: order,
+    hidden: Boolean(node.hidden),
+    masksToBounds: Boolean(node.clipsChildren?.()) && !node.isScroller?.(),
+    cornerRadius: (uniformRadius(style.borderRadius) ?? 0) / scale,
+    backgroundColor: colour(style.backgroundColor),
+    borderWidth: border / scale,
+    borderColor: colour(style.borderColor),
+  };
+}
+
+// --- animations the render server runs ---------------------------------------
+//
+// The node model keeps deciding what is animating and when it ends
+// (nodes.js `_retarget` / `_updateLoops`); what moves here is who
+// interpolates. Taken means the node's style goes to its target — the
+// layer's model value, sent by the next frame's property diff — and that
+// frame attaches an explicit animation carrying the pixels there; no frame
+// after it is scheduled for the property, and a loop costs no JS frames at
+// all. Declined means the frame clock runs it exactly as before, so
+// nothing here is load-bearing for correctness.
+//
+// Kept apart from the presenter because two of them hand animations over:
+// the layer presenter, where every plain box has a layer, and the surface
+// presenter's promotion (src/cocoa/promotion.js), where only the nodes
+// that animate do. They differ in which node has a layer and agree on
+// everything from there — `layerOf(node)` is the whole of the difference.
+
+/**
+ * The animations one presenter has handed to the render server: what
+ * `take` accepted and is waiting for the frame that attaches it, and what
+ * is running on a layer. `onIdle(node)`, when given, hears that the last
+ * animation running for a node ended on the bridge's word — the one end
+ * no frame follows on its own.
+ */
+export class LayerAnimations {
+  constructor({ native, app, scale, layerOf, onIdle = null }) {
+    this.native = native;
+    this.app = app;
+    this.scale = scale;
+    this.layerOf = layerOf;
+    this.onIdle = onIdle;
+    this.pending = new Map(); // node -> Map(prop -> entry)
+    this.live = new Map(); // node -> Map(id -> { prop, key, entry })
+  }
+
+  /**
+   * Take `prop`'s animation for `node`, or decline. Decided against the
+   * *target* style: a `:hover` that adds a shadow turns the node into a
+   * raster in the same swap that starts a fade, and a raster's background
+   * is in its bitmap, not on its layer.
+   */
+  take(node, prop, entry) {
+    const map = ANIMATED_KEY_PATHS[prop];
+    if (!map || !stylePaintsPlain(node, node._targetStyle ?? node.style)) {
+      return false;
+    }
+    if (this._value(map, entry.from) == null) return false;
+    if (this._value(map, entry.to) == null) return false;
+    let pending = this.pending.get(node);
+    if (!pending) this.pending.set(node, (pending = new Map()));
+    pending.set(prop, entry);
+    return true;
+  }
+
+  /** Stop what runs for `prop` on `node`: a loop the window lost sight of,
+   *  a declaration that changed, a transition the clock takes back. */
+  cancel(node, prop) {
+    this.pending.get(node)?.delete(prop);
+    this._removeLive(node, prop);
+  }
+
+  /** Is anything taken for `node` — waiting for a frame, or running? */
+  has(node) {
+    return this.pending.has(node) || this.live.has(node);
+  }
+
+  _ends() {
+    return (this.app._animationEnds ??= new Map());
+  }
+
+  /** A style value as the layer takes it — a colour as components, a
+   *  length in points — or null for one the layer cannot animate. */
+  _value(map, value) {
+    if (map.colour) {
+      return typeof value === 'string'
+        ? (this.app._parseColor(value) ?? null)
+        : null;
+    }
+    return typeof value === 'number'
+      ? value / (map.scaled ? this.scale : 1)
+      : null;
+  }
+
+  /** The frame's half: attach what `take` accepted to `layer`, after the
+   *  model value went out, inside the same transaction. */
+  apply(node, layer) {
+    const pending = this.pending.get(node);
+    if (!pending) return;
+    this.pending.delete(node);
+    for (const [prop, entry] of pending) {
+      const map = ANIMATED_KEY_PATHS[prop];
+      const id = `rx${++animationSeq}`;
+      const key = `${prop}:${id}`;
+      const opts = { duration: entry.duration / 1000, id };
+      if (entry.loop) {
+        // a loop replaces whatever ran for the property: its declaration
+        // changed, and a loop restarts from the top when it does
+        this._removeLive(node, prop);
+        opts.from = this._value(map, entry.from);
+        opts.to = this._value(map, entry.to);
+        opts.timing = EASING_CONTROL_POINTS[entry.easing];
+        opts.repeat = Infinity;
+        opts.autoreverse = entry.alternate;
+      } else if (map.colour) {
+        // From where the pixels are — which is what "an interrupted
+        // transition reverses from where it got to" means here. A colour
+        // cannot be additive, so the one before it is replaced.
+        this._removeLive(node, prop);
+        const shown = this.native.presentationValue?.(layer, map.keyPath);
+        opts.from = Array.isArray(shown) ? shown : this._value(map, entry.from);
+        opts.to = this._value(map, entry.to);
+        opts.timing = TRANSITION_CONTROL_POINTS;
+      } else {
+        // Additive: a delta over the model value, (old − new) → 0, and the
+        // ones before it keep running and sum. Continuity on a retarget with
+        // nothing read back, however many are in flight.
+        opts.from = this._value(map, entry.from) - this._value(map, entry.to);
+        opts.to = 0;
+        opts.additive = true;
+        opts.timing = TRANSITION_CONTROL_POINTS;
+      }
+      this.native.addAnimation(layer, map.keyPath, opts, key);
+      // looked up after the removals above, which may have pruned the map
+      let live = this.live.get(node);
+      if (!live) this.live.set(node, (live = new Map()));
+      live.set(id, { prop, key, entry });
+      this._ends().set(id, (ev) => this._animationEnded(node, id, ev));
+    }
+  }
+
+  /** Every animation running for `prop` on `node`, off the layer and out
+   *  of the books. */
+  _removeLive(node, prop) {
+    const live = this.live.get(node);
+    if (!live) return;
+    const layer = this.layerOf(node);
+    for (const [id, run] of live) {
+      if (run.prop !== prop) continue;
+      live.delete(id);
+      this._ends().delete(id);
+      if (layer) this.native.removeAnimation(layer, run.key);
+    }
+    if (live.size === 0) this.live.delete(node);
+  }
+
+  /** The bridge's `animation-end` for one of ours — it ran out, or CA
+   *  dropped it. An older additive one ending changes nothing: the node
+   *  checks the entry is still the one it holds. */
+  _animationEnded(node, id) {
+    this._ends().delete(id);
+    const live = this.live.get(node);
+    const run = live?.get(id);
+    if (!run) return;
+    live.delete(id);
+    if (live.size === 0) this.live.delete(node);
+    node._offloadEnded(run.prop, run.entry);
+    if (!this.has(node)) this.onIdle?.(node);
+  }
+
+  /** The layer is going — the visual is destroyed, or turns into a raster —
+   *  and every animation on it goes with it. What was still waiting for a
+   *  frame goes back to the frame clock when the node stays (`reclaim`);
+   *  what was running is over, and the model shows. */
+  drop(node, reclaim) {
+    const pending = this.pending.get(node);
+    if (pending) {
+      this.pending.delete(node);
+      for (const [prop, entry] of pending) {
+        if (reclaim) node._offloadDeclined(prop, entry);
+        else node._offloadEnded(prop, entry);
+      }
+    }
+    const live = this.live.get(node);
+    if (!live) return;
+    this.live.delete(node);
+    for (const [id, run] of live) {
+      this._ends().delete(id);
+      node._offloadEnded(run.prop, run.entry);
+    }
+  }
+}
+
 export class CocoaLayerPresenter {
   constructor(window) {
     this.window = window;
@@ -459,10 +677,13 @@ export class CocoaLayerPresenter {
     this.visuals = new Map(); // node -> Visual
     this.rasters = new Map(); // node -> RasterState
     this.bars = new Map(); // scroller node -> Map(axis -> { layer, raster })
-    // animations taken off the frame clock: accepted and waiting for the
-    // frame that attaches them, and running in the render server
-    this.pendingAnimations = new Map(); // node -> Map(prop -> entry)
-    this.liveAnimations = new Map(); // node -> Map(id -> { prop, key, entry })
+    // animations taken off the frame clock, by the node's own layer
+    this.animations = new LayerAnimations({
+      native: this.native,
+      app: window.app,
+      scale: this.scale,
+      layerOf: (node) => this.visuals.get(node)?.layer ?? null,
+    });
     // Claims since the last frame — taken at the top of `frame()`, the way
     // the X11 path takes its damage before painting, so a claim made from
     // inside a paint lands in the next frame instead of being cleared with
@@ -572,7 +793,7 @@ export class CocoaLayerPresenter {
           visual.destroy();
           this.visuals.delete(node);
           this._dropRaster(node);
-          this._dropAnimations(node, false);
+          this.animations.drop(node, false);
           const bars = this.bars.get(node);
           if (bars) {
             for (const entry of bars.values()) {
@@ -639,11 +860,11 @@ export class CocoaLayerPresenter {
       this._dropRaster(node);
       // a layer that turns into a raster takes its animations with it; the
       // frame clock can still run them over the bitmap
-      if (wantsRaster) this._dropAnimations(node, true);
+      if (wantsRaster) this.animations.drop(node, true);
       visual = null;
     }
-    if (wantsRaster && this.pendingAnimations.has(node)) {
-      this._dropAnimations(node, true);
+    if (wantsRaster && this.animations.pending.has(node)) {
+      this.animations.drop(node, true);
     }
     if (!visual) {
       visual = new Visual(this, node);
@@ -731,191 +952,23 @@ export class CocoaLayerPresenter {
 
   _syncPropBox(node, visual, parentOrigin, order) {
     const abs = node.abs;
-    const style = node.style ?? {};
-    const s = this.scale;
     visual.origin = { x: abs.x, y: abs.y };
-    const border =
-      typeof style.borderWidth === 'number' ? style.borderWidth : 0;
-    visual.set({
-      frame: [
-        (abs.x - parentOrigin.x) / s,
-        (abs.y - parentOrigin.y) / s,
-        Math.max(0, abs.width) / s,
-        Math.max(0, abs.height) / s,
-      ],
-      zPosition: order,
-      hidden: Boolean(node.hidden),
-      masksToBounds: Boolean(node.clipsChildren?.()) && !node.isScroller?.(),
-      cornerRadius: (uniformRadius(style.borderRadius) ?? 0) / s,
-      backgroundColor: style.backgroundColor
-        ? (this.window.app._parseColor(String(style.backgroundColor)) ?? [
-            0, 0, 0, 0,
-          ])
-        : [0, 0, 0, 0],
-      borderWidth: border / s,
-      borderColor: style.borderColor
-        ? (this.window.app._parseColor(String(style.borderColor)) ?? [
-            0, 0, 0, 0,
-          ])
-        : [0, 0, 0, 0],
-    });
+    visual.set(
+      propBoxProps(node, this.window.app, this.scale, parentOrigin, order),
+    );
     // after the model value went out, inside the same transaction
-    this._applyAnimations(node, visual);
+    this.animations.apply(node, visual.layer);
   }
 
-  // --- animations the render server runs -----------------------------------
-  //
-  // The node model keeps deciding what is animating and when it ends
-  // (nodes.js `_retarget` / `_updateLoops`); what moves here is who
-  // interpolates. Taken means the node's style goes to its target — the
-  // layer's model value, sent by the next frame's property diff — and that
-  // frame attaches an explicit animation carrying the pixels there; no frame
-  // after it is scheduled for the property, and a loop costs no JS frames at
-  // all. Declined means the frame clock runs it exactly as before, so
-  // nothing here is load-bearing for correctness.
-
-  /**
-   * Take `prop`'s animation for `node`, or decline. Decided against the
-   * *target* style: a `:hover` that adds a shadow turns the node into a
-   * raster in the same swap that starts a fade, and a raster's background
-   * is in its bitmap, not on its layer.
-   */
+  /** The window's animation seam (src/cocoa/window.js): take `prop`'s
+   *  animation for `node` off the frame clock, or decline. */
   animate(node, prop, entry) {
-    const map = ANIMATED_KEY_PATHS[prop];
-    if (!map || !stylePaintsPlain(node, node._targetStyle ?? node.style)) {
-      return false;
-    }
-    if (this._value(map, entry.from) == null) return false;
-    if (this._value(map, entry.to) == null) return false;
-    let pending = this.pendingAnimations.get(node);
-    if (!pending) this.pendingAnimations.set(node, (pending = new Map()));
-    pending.set(prop, entry);
-    return true;
+    return this.animations.take(node, prop, entry);
   }
 
-  /** Stop what runs for `prop` on `node`: a loop the window lost sight of,
-   *  a declaration that changed, a transition the clock takes back. */
+  /** …and stop what runs for `prop` on `node`. */
   cancel(node, prop) {
-    this.pendingAnimations.get(node)?.delete(prop);
-    this._removeLive(node, prop);
-  }
-
-  _ends() {
-    const app = this.window.app;
-    return (app._animationEnds ??= new Map());
-  }
-
-  /** A style value as the layer takes it — a colour as components, a
-   *  length in points — or null for one the layer cannot animate. */
-  _value(map, value) {
-    if (map.colour) {
-      return typeof value === 'string'
-        ? (this.window.app._parseColor(value) ?? null)
-        : null;
-    }
-    return typeof value === 'number'
-      ? value / (map.scaled ? this.scale : 1)
-      : null;
-  }
-
-  /** The frame's half: attach what `animate` accepted, after the model
-   *  value went out, inside the same transaction. */
-  _applyAnimations(node, visual) {
-    const pending = this.pendingAnimations.get(node);
-    if (!pending) return;
-    this.pendingAnimations.delete(node);
-    for (const [prop, entry] of pending) {
-      const map = ANIMATED_KEY_PATHS[prop];
-      const id = `rx${++animationSeq}`;
-      const key = `${prop}:${id}`;
-      const opts = { duration: entry.duration / 1000, id };
-      if (entry.loop) {
-        // a loop replaces whatever ran for the property: its declaration
-        // changed, and a loop restarts from the top when it does
-        this._removeLive(node, prop);
-        opts.from = this._value(map, entry.from);
-        opts.to = this._value(map, entry.to);
-        opts.timing = EASING_CONTROL_POINTS[entry.easing];
-        opts.repeat = Infinity;
-        opts.autoreverse = entry.alternate;
-      } else if (map.colour) {
-        // From where the pixels are — which is what "an interrupted
-        // transition reverses from where it got to" means here. A colour
-        // cannot be additive, so the one before it is replaced.
-        this._removeLive(node, prop);
-        const shown = this.native.presentationValue?.(
-          visual.layer,
-          map.keyPath,
-        );
-        opts.from = Array.isArray(shown) ? shown : this._value(map, entry.from);
-        opts.to = this._value(map, entry.to);
-        opts.timing = TRANSITION_CONTROL_POINTS;
-      } else {
-        // Additive: a delta over the model value, (old − new) → 0, and the
-        // ones before it keep running and sum. Continuity on a retarget with
-        // nothing read back, however many are in flight.
-        opts.from = this._value(map, entry.from) - this._value(map, entry.to);
-        opts.to = 0;
-        opts.additive = true;
-        opts.timing = TRANSITION_CONTROL_POINTS;
-      }
-      this.native.addAnimation(visual.layer, map.keyPath, opts, key);
-      // looked up after the removals above, which may have pruned the map
-      let live = this.liveAnimations.get(node);
-      if (!live) this.liveAnimations.set(node, (live = new Map()));
-      live.set(id, { prop, key, entry });
-      this._ends().set(id, (ev) => this._animationEnded(node, id, ev));
-    }
-  }
-
-  /** Every animation running for `prop` on `node`, off the layer and out
-   *  of the books. */
-  _removeLive(node, prop) {
-    const live = this.liveAnimations.get(node);
-    if (!live) return;
-    const visual = this.visuals.get(node);
-    for (const [id, run] of live) {
-      if (run.prop !== prop) continue;
-      live.delete(id);
-      this._ends().delete(id);
-      if (visual) this.native.removeAnimation(visual.layer, run.key);
-    }
-    if (live.size === 0) this.liveAnimations.delete(node);
-  }
-
-  /** The bridge's `animation-end` for one of ours — it ran out, or CA
-   *  dropped it. An older additive one ending changes nothing: the node
-   *  checks the entry is still the one it holds. */
-  _animationEnded(node, id) {
-    this._ends().delete(id);
-    const live = this.liveAnimations.get(node);
-    const run = live?.get(id);
-    if (!run) return;
-    live.delete(id);
-    if (live.size === 0) this.liveAnimations.delete(node);
-    node._offloadEnded(run.prop, run.entry);
-  }
-
-  /** The layer is going — the visual is destroyed, or turns into a raster —
-   *  and every animation on it goes with it. What was still waiting for a
-   *  frame goes back to the frame clock when the node stays (`reclaim`);
-   *  what was running is over, and the model shows. */
-  _dropAnimations(node, reclaim) {
-    const pending = this.pendingAnimations.get(node);
-    if (pending) {
-      this.pendingAnimations.delete(node);
-      for (const [prop, entry] of pending) {
-        if (reclaim) node._offloadDeclined(prop, entry);
-        else node._offloadEnded(prop, entry);
-      }
-    }
-    const live = this.liveAnimations.get(node);
-    if (!live) return;
-    this.liveAnimations.delete(node);
-    for (const [id, run] of live) {
-      this._ends().delete(id);
-      node._offloadEnded(run.prop, run.entry);
-    }
+    this.animations.cancel(node, prop);
   }
 
   /**