retake-dev 0.4.0

package/src/runtime/00-core.js

@@ -0,0 +1,308 @@
+// Virtual clock. Every app-visible notion of time (timers, rAF, performance.now,
+// Date) reads from `clock.now`, which only the engine advances. All runtime
+// files are concatenated into one IIFE by the Vite plugin, in filename order.
+
+// W is the window the runtime patches (its timers, Date, network...), so its
+// globals take shapes lib.dom doesn't describe: untyped for the type check.
+const W = /** @type {any} */ (window)
+/** @type {any} the runtime API (70-boot.js fills it in) */
+const PT = (W.__retake = { emit() {} })
+const real = {
+  setTimeout: W.setTimeout.bind(W),
+  clearTimeout: W.clearTimeout.bind(W),
+  setInterval: W.setInterval.bind(W),
+  raf: W.requestAnimationFrame.bind(W),
+  perfNow: performance.now.bind(performance),
+  Date: W.Date,
+  random: Math.random,
+  fetch: W.fetch.bind(W),
+  idle: W.requestIdleCallback ? W.requestIdleCallback.bind(W) : null,
+  local: W.localStorage,
+  session: W.sessionStorage,
+}
+
+const KEY = "retake:"
+// performance.now() and rAF timestamps are offset so they never read 0 (lots of
+// code treats a 0 timestamp as "unset").
+const PERF_BASE = 1000
+// Timers created by the dev server itself must keep real time, or HMR stalls
+// whenever the clock is paused. (Turbopack's HMR client is a chunk of its own.)
+const EXEMPT = /@vite\/client|@react-refresh|vite\/dist\/client|dev_hmr-client_hmr-client/
+// The dev server's own traffic, by URL (RT.exemptUrls, picked by the server
+// for the framework): its HMR socket, overlay and hot-update requests. A call
+// stack can't always tell (Turbopack bundles Next's router and its HMR client
+// together), a URL can. Exempt traffic is never recorded, held or replayed.
+let exemptUrlRe = null
+try {
+  if (RT.exemptUrls && RT.exemptUrls.length) exemptUrlRe = new RegExp(RT.exemptUrls.join("|"))
+} catch {}
+function isExemptUrl(url) {
+  if (!exemptUrlRe) return false
+  try {
+    const u = new URL(String(url), location.href)
+    return exemptUrlRe.test(u.pathname + u.search)
+  } catch {
+    return false
+  }
+}
+
+const clock = { now: 0, rate: 1, playing: false, seeking: false, booted: false }
+
+// ---- timers ---------------------------------------------------------------
+
+const timers = new Map()
+let timerSeq = 1e9
+
+function isExempt() {
+  return EXEMPT.test(new Error().stack || "")
+}
+
+// While rebuilding, React's per-element console tasks (async stack tagging
+// for devtools) are skipped. Its per-element Error stacks are NOT: notes read
+// an element's source file:line from them, and notes are made in rebuilt frames.
+const realCreateTask = console.createTask
+if (realCreateTask) {
+  const noTask = { run: (fn) => fn() }
+  console.createTask = function (name) {
+    return clock.seeking ? noTask : realCreateTask.call(console, name)
+  }
+}
+
+function addTimer(fn, delay, args, repeat) {
+  const id = timerSeq++
+  const d = Math.max(repeat ? 4 : 0, Number(delay) || 0)
+  timers.set(id, { id, fn, args, due: clock.now + d, delay: d, repeat })
+  return id
+}
+
+function nextTimer() {
+  let best = null
+  for (const t of timers.values()) if (!best || t.due < best.due) best = t
+  return best
+}
+
+// Debug aid: `window.__retakeTrace = []` before load collects a log of
+// what ran when, to diff a recording against its replay.
+const trace = (...entry) => W.__retakeTrace && W.__retakeTrace.push([clock.now, ...entry])
+
+function runTimer(t) {
+  trace("timer", t.due, String(t.fn).slice(0, 80))
+  if (t.repeat) t.due += t.delay
+  else timers.delete(t.id)
+  safeCall(t.fn, t.args)
+}
+
+function safeCall(fn, args) {
+  try {
+    fn.apply(W, args)
+  } catch (err) {
+    // Rethrow outside our loop so the app's error overlay still sees it.
+    real.setTimeout(() => {
+      throw err
+    })
+  }
+}
+
+W.setTimeout = function (fn, delay, ...args) {
+  if (typeof fn !== "function" || isExempt()) return real.setTimeout(fn, delay, ...args)
+  return addTimer(fn, delay, args, false)
+}
+W.setInterval = function (fn, delay, ...args) {
+  if (typeof fn !== "function" || isExempt()) return real.setInterval(fn, delay, ...args)
+  return addTimer(fn, delay, args, true)
+}
+W.clearTimeout = W.clearInterval = function (id) {
+  if (timers.has(id)) timers.delete(id)
+  else real.clearTimeout(id)
+}
+
+// requestIdleCallback runs on the virtual clock too: "idle" is right after
+// the current moment's work.
+if (W.requestIdleCallback) {
+  W.requestIdleCallback = function (cb, opts) {
+    if (typeof cb !== "function" || isExempt()) return real.setTimeout(cb, 1)
+    return addTimer(() => cb({ didTimeout: false, timeRemaining: () => 50 }), 1, [], false)
+  }
+  W.cancelIdleCallback = function (id) {
+    W.clearTimeout(id)
+  }
+}
+
+// ---- animation frames -----------------------------------------------------
+
+let rafQueue = new Map()
+let rafSeq = 1
+
+W.requestAnimationFrame = function (cb) {
+  if (W.__retakeTrace) trace("req", (new Error().stack || "").split("\n")[2])
+  const id = rafSeq++
+  rafQueue.set(id, cb)
+  return id
+}
+W.cancelAnimationFrame = function (id) {
+  rafQueue.delete(id)
+}
+
+function runRaf() {
+  if (!rafQueue.size) return
+  const queue = rafQueue
+  rafQueue = new Map()
+  trace("raf", queue.size)
+  for (const cb of queue.values()) safeCall(cb, [clock.now + PERF_BASE])
+}
+
+// ---- performance.now / Date -----------------------------------------------
+
+performance.now = () => clock.now + PERF_BASE
+try {
+  Object.defineProperty(document.timeline, "currentTime", {
+    get: () => clock.now + PERF_BASE,
+    configurable: true,
+  })
+} catch {}
+
+let epoch = real.Date.now()
+function VDate(...args) {
+  if (!new.target) return new real.Date(epoch + clock.now).toString()
+  return args.length ? new real.Date(...args) : new real.Date(epoch + clock.now)
+}
+VDate.prototype = real.Date.prototype
+VDate.now = () => epoch + clock.now
+VDate.parse = real.Date.parse
+VDate.UTC = real.Date.UTC
+W.Date = VDate
+
+// ---- seeded randomness ----------------------------------------------------
+
+let seed = 0
+let byteState = 0
+function seedRandom(s) {
+  seed = s >>> 0
+  byteState = (seed ^ 0x9e3779b9) >>> 0
+  let state = seed
+  Math.random = function () {
+    state = (state + 0x6d2b79f5) >>> 0
+    let x = state
+    x = Math.imul(x ^ (x >>> 15), x | 1)
+    x ^= x + Math.imul(x ^ (x >>> 7), x | 61)
+    return ((x ^ (x >>> 14)) >>> 0) / 4294967296
+  }
+}
+// crypto.getRandomValues from its own seeded stream, so ids made with it
+// (nanoid, uuid v4) come out the same on replay without shifting Math.random.
+function nextByteWord() {
+  byteState = (byteState + 0x6d2b79f5) >>> 0
+  let x = byteState
+  x = Math.imul(x ^ (x >>> 15), x | 1)
+  x ^= x + Math.imul(x ^ (x >>> 7), x | 61)
+  return (x ^ (x >>> 14)) >>> 0
+}
+if (W.crypto && crypto.getRandomValues) {
+  const realGetRandomValues = crypto.getRandomValues.bind(crypto)
+  crypto.getRandomValues = function (arr) {
+    if (!arr || !ArrayBuffer.isView(arr) || isExempt()) return realGetRandomValues(arr)
+    if (arr.byteLength > 65536) throw new DOMException("The ArrayBufferView's byte length exceeds 65536", "QuotaExceededError")
+    const bytes = new Uint8Array(arr.buffer, arr.byteOffset, arr.byteLength)
+    for (let i = 0; i < bytes.length; i += 4) {
+      const w = nextByteWord()
+      for (let j = 0; j < 4 && i + j < bytes.length; j++) bytes[i + j] = (w >>> (j * 8)) & 255
+    }
+    return arr
+  }
+}
+if (W.crypto && crypto.randomUUID) {
+  crypto.randomUUID = /** @type {Crypto["randomUUID"]} */ (function () {
+    const h = () => Math.floor(Math.random() * 16).toString(16)
+    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) =>
+      c === "x" ? h() : ((Math.random() * 4) | 8).toString(16),
+    )
+  })
+}
+
+// ---- event-loop yield (no 4ms clamp, unlike setTimeout) -------------------
+
+const yieldChannel = new MessageChannel()
+const yieldQueue = []
+yieldChannel.port1.onmessage = () => yieldQueue.shift()()
+function yieldTask() {
+  return new Promise((resolve) => {
+    yieldQueue.push(resolve)
+    yieldChannel.port2.postMessage(0)
+  })
+}
+// React's scheduler (and similar) queue work through MessageChannel. Counting
+// in-flight messages on app channels tells us when the app has gone idle, so
+// time only advances once the previous moment's renders and effects are done.
+// Recording and replay both wait this way, which is what makes replay exact.
+let appMessages = 0
+const appPorts = new WeakSet()
+const RealChannel = W.MessageChannel
+W.MessageChannel = function MessageChannel() {
+  const ch = new RealChannel()
+  appPorts.add(ch.port1)
+  appPorts.add(ch.port2)
+  return ch
+}
+W.MessageChannel.prototype = RealChannel.prototype
+const MPP = MessagePort.prototype
+const portPost = MPP.postMessage
+MPP.postMessage = function (...args) {
+  if (appPorts.has(this)) appMessages++
+  return portPost.apply(this, args)
+}
+const portOnMessage = Object.getOwnPropertyDescriptor(MPP, "onmessage")
+Object.defineProperty(MPP, "onmessage", {
+  configurable: true,
+  get() {
+    return portOnMessage.get.call(this)
+  },
+  set(fn) {
+    if (!appPorts.has(this) || typeof fn !== "function") return portOnMessage.set.call(this, fn)
+    portOnMessage.set.call(this, function (e) {
+      if (appMessages > 0) appMessages--
+      return fn.call(this, e)
+    })
+  },
+})
+
+const stats = { settles: 0, stuck: 0, yields: 0, idbWaits: 0, fastSettles: 0 }
+// Set when a replay hands the app something that may finish in real time (a
+// network reply, a worker message, media readiness): the next settle then
+// yields a real task, whatever else is true.
+let dispatchedSinceYield = true
+// Wait until the app is idle: no pending MessageChannel work (React's
+// scheduler) and no IndexedDB work or replayed script load in flight (they
+// answer in real time).
+// fastOk (replay only): when the app has nothing queued, a few microtask turns
+// do instead of a task round trip, which is most of a canvas-heavy page's
+// rebuild time. The dock's `fastReplay = false` turns it off (a kill switch).
+async function settle(fastOk) {
+  stats.settles++
+  if (fastOk && clock.seeking && !dispatchedSinceYield && appMessages === 0 && !otherBusy() && !(shell && shell.fastReplay === false)) {
+    for (let i = 0; i < 8; i++) await null
+    if (appMessages === 0) {
+      stats.fastSettles++
+      return
+    }
+  }
+  const deadline = real.perfNow() + 2000
+  for (let round = 0; round < 20; round++) {
+    let i = 0
+    for (; i < 60; i++) {
+      await yieldTask()
+      dispatchedSinceYield = false
+      stats.yields++
+      if (appMessages === 0) break
+    }
+    if (i === 60) {
+      stats.stuck++
+      appMessages = 0 // lost count (a port we can't see); don't stall forever
+    }
+    if (!otherBusy() || real.perfNow() > deadline) return
+    stats.idbWaits++
+    while (otherBusy() && real.perfNow() < deadline) await new Promise((r) => real.setTimeout(r, 0))
+  }
+}
+// Work that answers in real time and that time waits for: IndexedDB requests
+// (32-state.js) and, replaying, scripts the recording loaded at this moment (36-scripts.js).
+const otherBusy = () => (typeof idbBusy !== "undefined" && idbBusy > 0) || (typeof scriptBusy !== "undefined" && scriptBusy > 0)

package/src/runtime/10-animations.js

@@ -0,0 +1,362 @@
+// Web Animations + CSS animations/transitions. Every animation is held paused
+// underneath and its currentTime is driven from the virtual clock, so pausing,
+// slow motion and seeking all apply. App-facing calls (play, pause, startTime…)
+// are translated so libraries like motion still see a normal running animation.
+
+const managed = new Map() // Animation -> { t, v, userPaused, done }
+const AP = Animation.prototype
+const orig = {
+  play: AP.play,
+  pause: AP.pause,
+  finish: AP.finish,
+  cancel: AP.cancel,
+  reverse: AP.reverse,
+  updatePlaybackRate: AP.updatePlaybackRate,
+  currentTime: Object.getOwnPropertyDescriptor(AP, "currentTime"),
+  startTime: Object.getOwnPropertyDescriptor(AP, "startTime"),
+  playbackRate: Object.getOwnPropertyDescriptor(AP, "playbackRate"),
+  playState: Object.getOwnPropertyDescriptor(AP, "playState"),
+  animate: Element.prototype.animate,
+}
+const rateOf = (a) => orig.playbackRate.get.call(a)
+const stateOf = (a) => orig.playState.get.call(a)
+const endOf = (a) => (a.effect ? a.effect.getComputedTiming().endTime : Infinity)
+
+// created: the app just made it (element.animate()), rather than it being
+// found on a scan (a CSS transition or animation, seen a frame after its cause).
+function adopt(a, created) {
+  if (managed.has(a)) return managed.get(a)
+  const ps = stateOf(a)
+  if (ps === "idle") return null
+  // A running animation seen for the first time starts from 0 at this
+  // boundary, whatever real time the browser gave it before we saw it: live,
+  // a CSS transition has usually run a few real ms by then, in a rebuild
+  // none, and the two must agree.
+  // Replaying: if the recording has this animation, it starts when it did
+  // live. (Live, which frame first sees a new CSS transition races with the
+  // browser's own scheduling; the recorded start settles it.)
+  const recorded = ps === "running" && (hasFuture() || clock.seeking) ? recordedStart(a) : null
+  const s = {
+    t: recorded != null ? (clock.now - recorded) * (rateOf(a) || 1) : ps === "running" ? 0 : Number(orig.currentTime.get.call(a)) || 0,
+    v: clock.now,
+    userPaused: ps === "paused",
+    done: ps === "finished",
+    native: false,
+    checks: 0,
+  }
+  managed.set(a, s)
+  if (!s.done && !s.userPaused) orig.pause.call(a)
+  // The browser drops finished animations once a later one covers them; the
+  // timeline still needs them to show earlier moments.
+  if (a.persist) a.persist()
+  logAnim(a, s, !!created)
+  return s
+}
+
+// A CSS animation paused via `animation-play-state` stays frozen.
+function cssPaused(a) {
+  if (typeof CSSAnimation === "undefined" || !(a instanceof CSSAnimation)) return false
+  const el = a.effect && /** @type {KeyframeEffect} */ (a.effect).target
+  if (!el) return false
+  const cs = getComputedStyle(el)
+  const names = cs.animationName.split(", ")
+  const states = cs.animationPlayState.split(", ")
+  const i = names.indexOf(a.animationName)
+  return i >= 0 && states[i % states.length] === "paused"
+}
+
+function catchUp(a, s) {
+  if (!s.done && !s.userPaused && !cssPaused(a)) s.t += (clock.now - s.v) * rateOf(a)
+  s.v = clock.now
+}
+
+let syncCount = 0
+// scan: look for new animations too. A new CSS animation needs a style
+// change, which comes from a DOM change, input, a timer or a frame callback;
+// when none of those happened, only the running ones need driving.
+function syncAnimations(scan = true) {
+  // While previewing another moment, the preview owns every animation.
+  if (previewing) return
+  syncSmil(clock.now)
+  if (scan) for (const a of document.getAnimations()) adopt(a)
+  // Finished animations are only checked for removal now and then; a long
+  // session collects hundreds of them.
+  const sweep = ++syncCount % 30 === 0
+  for (const [a, s] of managed) {
+    if (s.done && !sweep) continue
+    if (stateOf(a) === "idle") {
+      managed.delete(a)
+      endAnim(a)
+      continue
+    }
+    if (s.done) continue
+    catchUp(a, s)
+    const rate = rateOf(a)
+    // An endless loop (a spinner, a shimmer) runs natively on the compositor
+    // while recording at normal pace, lined up with the virtual clock and
+    // re-lined if it drifts; the clock takes it back on pause, seek or preview.
+    const endless = endOf(a) === Infinity && !s.userPaused && !cssPaused(a)
+    const native = endless && clock.playing && !clock.seeking && clock.rate === 1 && !hasFuture()
+    if (native) {
+      if (!s.native) {
+        orig.currentTime.set.call(a, s.t)
+        orig.play.call(a)
+        orig.currentTime.set.call(a, s.t)
+        s.native = true
+      } else if (++s.checks % 30 === 0 && Math.abs((Number(orig.currentTime.get.call(a)) || 0) - s.t) > 20) {
+        orig.currentTime.set.call(a, s.t)
+      }
+      continue
+    }
+    if (s.native) {
+      orig.pause.call(a)
+      s.native = false
+    }
+    s.checks = 0
+    if ((rate > 0 && s.t >= endOf(a)) || (rate < 0 && s.t <= 0)) {
+      finishNow(a, s)
+    } else {
+      orig.currentTime.set.call(a, s.t)
+    }
+  }
+}
+
+// ---- SMIL ---------------------------------------------------------------------
+// SVG's own animations (<animate>, <set>, <animateMotion>, <animateTransform>)
+// aren't on the document's animation timeline: they run on their outermost
+// <svg>'s clock, from when it came onto the page. Each of those clocks is held
+// paused and set from the virtual one, so pausing pauses them, a rebuild lands
+// them where they were, and a preview shows them at t (instead of every frame
+// swapped in starting them again from 0).
+const SVG_NS = "http://www.w3.org/2000/svg"
+const SMIL = "animate, set, animateMotion, animateTransform"
+const smilSvgs = new Set() // outermost <svg>s with SMIL animations in them, as found
+const smilBegin = new WeakMap() // outermost <svg> -> the virtual ms its clock started at
+const smilShown = new WeakMap() // outermost <svg> -> the clock time (s) last set
+// Look for SMIL in a subtree: the document at boot, then what the app adds
+// (logMutations), so nothing walks the whole page every frame.
+function findSmil(root) {
+  if (!root || !root.querySelectorAll || (root.nodeType === 1 && root.namespaceURI !== SVG_NS && !root.firstElementChild)) return
+  let els
+  try {
+    els = [...root.querySelectorAll(SMIL)]
+    if (root.nodeType === 1 && root.matches(SMIL)) els.push(root)
+  } catch {
+    return
+  }
+  for (const el of els) {
+    if (el.namespaceURI !== SVG_NS) continue
+    let svg = el.ownerSVGElement
+    while (svg && svg.ownerSVGElement) svg = svg.ownerSVGElement
+    if (svg) smilSvgs.add(svg)
+  }
+}
+// Show every SMIL clock at virtual time `at` (only those inside `scope`).
+// A clock seen for the first time starts at `begin`: the page's start for the
+// page's own svgs (at boot), else now (one the app put in since).
+function syncSmil(at, scope, begin = clock.now) {
+  if (!smilSvgs.size) return
+  for (const svg of smilSvgs) {
+    if (!svg.isConnected || (scope && !scope.contains(svg))) continue
+    let b = smilBegin.get(svg)
+    if (b == null) {
+      if (previewing) continue // never seen live: nothing known to show
+      smilBegin.set(svg, (b = begin))
+      try {
+        svg.pauseAnimations()
+      } catch {}
+    }
+    if (clock.seeking) continue // set where the seek lands
+    const sec = Math.max(0, at - b) / 1000
+    if (smilShown.get(svg) === sec) continue
+    smilShown.set(svg, sec)
+    try {
+      svg.setCurrentTime(sec)
+    } catch {}
+  }
+}
+
+// The clock stopped or jumped: endless loops come back under its control now.
+function reclaimNative() {
+  for (const [a, s] of managed) {
+    if (!s.native) continue
+    orig.pause.call(a)
+    s.native = false
+    orig.currentTime.set.call(a, s.t)
+  }
+}
+
+Element.prototype.animate = function (...args) {
+  const a = orig.animate.apply(this, args)
+  adopt(a, true)
+  return a
+}
+
+AP.play = function () {
+  const s = managed.get(this)
+  if (!s) return orig.play.call(this)
+  catchUp(this, s)
+  const rate = rateOf(this)
+  if (rate > 0 && (s.done || s.t >= endOf(this))) s.t = 0
+  if (rate < 0 && (s.done || s.t <= 0)) s.t = endOf(this)
+  s.done = false
+  s.userPaused = false
+  orig.play.call(this) // renews the `finished` promise
+  orig.pause.call(this)
+  orig.currentTime.set.call(this, s.t)
+}
+AP.pause = function () {
+  const s = managed.get(this)
+  if (!s) return orig.pause.call(this)
+  catchUp(this, s)
+  s.userPaused = true
+}
+AP.finish = function () {
+  const s = managed.get(this)
+  if (!s) return orig.finish.call(this)
+  finishNow(this, s)
+}
+AP.cancel = function () {
+  managed.delete(this)
+  endAnim(this)
+  return orig.cancel.call(this)
+}
+AP.reverse = function () {
+  const s = managed.get(this)
+  if (!s) return orig.reverse.call(this)
+  catchUp(this, s)
+  orig.playbackRate.set.call(this, -rateOf(this))
+  s.t = Math.min(Math.max(s.t, 0), endOf(this))
+  s.done = false
+  s.userPaused = false
+}
+AP.updatePlaybackRate = function (r) {
+  const s = managed.get(this)
+  if (!s) return orig.updatePlaybackRate.call(this, r)
+  catchUp(this, s)
+  orig.playbackRate.set.call(this, r)
+}
+
+Object.defineProperty(AP, "currentTime", {
+  configurable: true,
+  get() {
+    return orig.currentTime.get.call(this)
+  },
+  set(value) {
+    const s = managed.get(this)
+    if (s && value != null) {
+      s.t = Number(value)
+      s.v = clock.now
+      s.done = false
+    }
+    orig.currentTime.set.call(this, value)
+  },
+})
+Object.defineProperty(AP, "startTime", {
+  configurable: true,
+  get() {
+    const s = managed.get(this)
+    if (!s) return orig.startTime.get.call(this)
+    catchUp(this, s)
+    return clock.now + PERF_BASE - s.t / (rateOf(this) || 1)
+  },
+  set(value) {
+    const s = managed.get(this) || adopt(this, true)
+    if (!s || value == null) return orig.startTime.set.call(this, value)
+    s.t = (clock.now + PERF_BASE - Number(value)) * rateOf(this)
+    s.v = clock.now
+    s.done = false
+    s.userPaused = false
+    orig.currentTime.set.call(this, s.t)
+  },
+})
+Object.defineProperty(AP, "playbackRate", {
+  configurable: true,
+  get() {
+    return rateOf(this)
+  },
+  set(value) {
+    const s = managed.get(this)
+    if (s) catchUp(this, s)
+    orig.playbackRate.set.call(this, value)
+  },
+})
+Object.defineProperty(AP, "playState", {
+  configurable: true,
+  get() {
+    const s = managed.get(this)
+    const ps = stateOf(this)
+    if (!s || ps === "idle" || ps === "finished") return ps
+    return s.userPaused ? "paused" : "running"
+  },
+})
+
+// ---- deterministic end events -----------------------------------------------
+// The browser delivers `finish`, `animationend` and `transitionend` on its next
+// rendering step, i.e. at a real-time moment. We fire them ourselves, right when
+// the virtual clock finishes the animation, and drop the browser's copies.
+
+const finishHandlers = new WeakMap() // Animation -> { prop, listeners: Set }
+const handlersOf = (a) => {
+  if (!finishHandlers.has(a)) finishHandlers.set(a, { prop: null, listeners: new Set() })
+  return finishHandlers.get(a)
+}
+Object.defineProperty(AP, "onfinish", {
+  configurable: true,
+  get() {
+    return finishHandlers.get(this)?.prop ?? null
+  },
+  set(fn) {
+    handlersOf(this).prop = typeof fn === "function" ? fn : null
+  },
+})
+const animAdd = AP.addEventListener
+const animRemove = AP.removeEventListener
+AP.addEventListener = function (type, fn, opts) {
+  if (type !== "finish" || !fn) return animAdd.call(this, type, fn, opts)
+  handlersOf(this).listeners.add(fn)
+}
+AP.removeEventListener = function (type, fn, opts) {
+  if (type !== "finish") return animRemove.call(this, type, fn, opts)
+  finishHandlers.get(this)?.listeners.delete(fn)
+}
+
+let synthesizing = 0
+function finishNow(a, s) {
+  if (s.done) return
+  s.done = true
+  orig.finish.call(a)
+  const h = finishHandlers.get(a)
+  const ev = new AnimationPlaybackEvent("finish", { currentTime: a.currentTime, timelineTime: clock.now + PERF_BASE })
+  if (h) {
+    for (const fn of [h.prop, ...h.listeners]) {
+      if (!fn) continue
+      safeCall(typeof fn === "function" ? fn : fn.handleEvent.bind(fn), [ev])
+    }
+  }
+  const target = a.effect && a.effect.target
+  if (!target) return
+  let dom = null
+  if (typeof CSSAnimation !== "undefined" && a instanceof CSSAnimation) {
+    dom = new AnimationEvent("animationend", { bubbles: true, animationName: a.animationName, elapsedTime: endOf(a) / 1000 })
+  } else if (typeof CSSTransition !== "undefined" && a instanceof CSSTransition) {
+    dom = new TransitionEvent("transitionend", { bubbles: true, propertyName: a.transitionProperty, elapsedTime: endOf(a) / 1000 })
+  }
+  if (!dom) return
+  synthesizing++
+  try {
+    target.dispatchEvent(dom)
+  } finally {
+    synthesizing--
+  }
+}
+
+for (const type of ["animationend", "transitionend"]) {
+  W.addEventListener(
+    type,
+    (e) => {
+      if (e.isTrusted && !synthesizing) e.stopImmediatePropagation()
+    },
+    true,
+  )
+}