@rafaelaugusto/jolt 0.1.0-beta.5 → 0.1.0-beta.7

package/src/driver/ios-decoration.ts

@@ -234,13 +234,13 @@ export function playIOSDecoration(
         animation.values = NSArray.arrayWithArray(values)
         animation.keyTimes = NSArray.arrayWithArray(times)
         animation.duration = Math.max(1, track.duration) / 1000
-        timing.configure(animation, layer)
         if (track.repeat > 0) {
           animation.autoreverses = track.reverse
           animation.repeatCount = track.reverse
             ? (track.repeat + 1) / 2
             : track.repeat + 1
         }
+        timing.configure(animation, layer)
         if (animation.respondsToSelector('setPreferredFrameRateRange:')) {
           const max = Math.min(
             120,

package/src/driver/ios-playback.ts

@@ -21,7 +21,7 @@ export function iosPlayback(track: Track, startedAt: number) {
       anchor = CACurrentMediaTime() * 1000
       paused = hold
     },
-    configure(animation: CAAnimation, layer: CALayer) {
+    configure(animation: CAKeyframeAnimation, layer: CALayer) {
       const now = CACurrentMediaTime()
       const position = elapsed()
       animation.speed = paused ? 0 : 1
@@ -32,6 +32,20 @@ export function iosPlayback(track: Track, startedAt: number) {
       )
       animation.fillMode = paused ? 'both' : kCAFillModeBackwards
       animation.removedOnCompletion = !paused && track.repeat !== Infinity
+      // With speed 0, CA folds an exact duration boundary back to the first
+      // frame. Hold the actual endpoint with a constant copy, also when a
+      // shorter property waits at its end while another one is being scrubbed.
+      if (paused && Number.isFinite(track.end) && position >= track.end) {
+        const values = animation.values!
+        const index = track.reverse && track.repeat % 2 === 1 ? 0 : values.count - 1
+        const value = values.objectAtIndex(index)
+        animation.values = NSArray.arrayWithArray([value, value])
+        animation.keyTimes = NSArray.arrayWithArray([0, 1])
+        animation.duration = 1
+        animation.repeatCount = 0
+        animation.autoreverses = false
+        animation.timeOffset = 0
+      }
     },
   }
 }

package/src/driver/ios.ts

@@ -153,5 +153,7 @@ export function createIOSDriver(): Driver {
           : undefined,
 
     after,
+
+    reducedMotion: () => UIAccessibilityIsReduceMotionEnabled(),
   }
 }

package/src/engine.ts

@@ -12,12 +12,13 @@ import { readValue, writeValue, type Property } from './properties.js'
 import { createTrack, type Track } from './track.js'
 import type { ResolvedTransition } from './transition.js'
 import { isColorProperty } from './color.js'
+import type { PreparedPath, PathProperty } from './path.js'
 
 export interface Animation extends PromiseLike<boolean> {
   /**
    * Resolves with `true` once the animation played to the end, or with `false`
    * if it was stopped, superseded or skipped.
-   * Never rejects.
+   * Playback cancellation never rejects; sequences can reject setup/callback errors.
    */
   readonly finished: Promise<boolean>
   /** Stops playback. Each effect documents whether it preserves or restores its visual state. */
@@ -30,6 +31,7 @@ export interface Plan {
   keyframes: readonly (number | null)[]
   transition: ResolvedTransition
   relative?: boolean
+  path?: PreparedPath
 }
 
 interface Entry {
@@ -49,6 +51,21 @@ const revisions = new WeakMap<View, Map<Property, symbol>>()
 const running = new WeakMap<View, Map<Property, Entry>>()
 const arrivals = new WeakMap<Animation, Promise<unknown>>()
 
+/** Internal forecast for starting a timeline step before another one arrives. */
+export interface ArrivalTiming {
+  read(): { remaining: number | undefined; paused: boolean; arrived: boolean }
+  subscribe(callback: () => void): () => void
+}
+const arrivalTimings = new WeakMap<Animation, ArrivalTiming>()
+
+export function arrivalTimingOf(animation: Animation) {
+  return arrivalTimings.get(animation)
+}
+
+export function setArrivalTiming(animation: Animation, timing: ArrivalTiming) {
+  arrivalTimings.set(animation, timing)
+}
+
 /**
  * Resolves once the animation looks done, which for a spring is well before
  * `finished`. Sequences move on to the next step then.
@@ -83,6 +100,10 @@ export class ViewAnimation implements PlaybackAnimation {
   private idleListener: (() => void) | undefined
   private readyListener: (() => void) | undefined
   private readonly endless: boolean
+  private readonly timingListeners = new Set<() => void>()
+  private timingChanged() {
+    for (const callback of [...this.timingListeners]) callback()
+  }
 
   get paused() {
     return this._paused
@@ -136,6 +157,7 @@ export class ViewAnimation implements PlaybackAnimation {
     this.cancelArrival?.()
     this.haptics?.pause()
     if (this.started) this.controlTracks(this.time(), 'pause')
+    this.timingChanged()
   }
   play() {
     if (this.settled || !this._paused) return
@@ -148,6 +170,7 @@ export class ViewAnimation implements PlaybackAnimation {
       this.haptics?.play()
       if (this.pending === 0) this.becameIdle()
     }
+    this.timingChanged()
   }
   seekTime(time: number) {
     if (this.settled) return
@@ -173,6 +196,7 @@ export class ViewAnimation implements PlaybackAnimation {
     this.scheduleArrival()
     this.haptics?.seek()
     if (this.pending === 0) this.becameIdle()
+    this.timingChanged()
   }
   elapsed(entry: Entry, now: number) {
     return this.controlled
@@ -203,10 +227,12 @@ export class ViewAnimation implements PlaybackAnimation {
     if (remaining <= 0) {
       this.arrived = true
       this.arrive()
+      this.timingChanged()
     } else
       this.cancelArrival = getDriver().after(remaining, () => {
         this.arrived = true
         this.arrive()
+        this.timingChanged()
       })
   }
   private becameIdle() {
@@ -248,6 +274,17 @@ export class ViewAnimation implements PlaybackAnimation {
     )
     this.finished = new Promise((resolve) => (this.resolve = resolve))
     setArrival(this, new Promise<void>((resolve) => (this.arrive = resolve)))
+    setArrivalTiming(this, {
+      read: () => ({
+        remaining: this.started ? Math.max(0, this.arrival - this.time()) : undefined,
+        paused: this._paused,
+        arrived: this.arrived || this.settled,
+      }),
+      subscribe: (callback) => {
+        this.timingListeners.add(callback)
+        return () => this.timingListeners.delete(callback)
+      },
+    })
     if (view.isLoaded && view.nativeViewProtected) this.start(plans)
     else this.waitForLoad(plans)
   }
@@ -285,7 +322,7 @@ export class ViewAnimation implements PlaybackAnimation {
     const now = driver.now()
     const entries = entriesOf(this.view)
 
-    const tracks = plans.map(({ property, keyframes, transition, relative }) => {
+    const tracks = plans.map(({ property, keyframes, transition, relative, path }) => {
       const previous = entries.get(property)
       let current: number
       let velocity = 0
@@ -300,6 +337,12 @@ export class ViewAnimation implements PlaybackAnimation {
             ? driver.presented(this.view, property)
             : undefined) ?? readValue(this.view, property)
       }
+      if (path)
+        return path.track(
+          property as PathProperty,
+          relative ? current : 0,
+          transition.delay,
+        )
       return createTrack(
         property,
         keyframes.map((value) => {
@@ -357,6 +400,7 @@ export class ViewAnimation implements PlaybackAnimation {
     } else if (this._paused) this.controlTracks(0, 'pause')
     this.scheduleArrival()
     this.readyListener?.()
+    this.timingChanged()
     if (this.pending === 0) this.becameIdle()
   }
 
@@ -388,6 +432,7 @@ export class ViewAnimation implements PlaybackAnimation {
     this.haptics = undefined
     this.arrive()
     this.resolve(this.complete)
+    this.timingChanged()
   }
 }
 

package/src/image-effect-native.ts

@@ -0,0 +1,129 @@
+import { Utils, isAndroid, isIOS, type Image, type ImageSource } from '@nativescript/core'
+
+export interface ImageEffectSettings {
+  mode: number
+  x: number
+  y: number
+  amplitude: number
+  radius: number
+  duration: number
+  seed: number
+  to?: ImageSource
+}
+
+export interface ImageRenderer {
+  readonly backend: 'metal' | 'agsl'
+  readonly progress: number
+  readonly frames: number
+  readonly textureBytes: number
+  readonly longestFrameMs: number
+  play(endpoint: number): void
+  pause(): void
+  resume(): void
+  seek(progress: number): void
+  finish(endpoint: number): void
+  stop(preserveImage?: boolean): void
+}
+
+export function createImageRenderer(
+  image: Image,
+  settings: ImageEffectSettings,
+  ended: (completed: boolean, progress: number) => void,
+): ImageRenderer | undefined {
+  const { mode, x, y, amplitude, radius, duration, seed, to } = settings
+  if (isIOS && typeof JoltImageEffect !== 'undefined') {
+    const native =
+      JoltImageEffect.createWithViewDestinationModeOriginXOriginYAmplitudeRadiusDurationSeedListener(
+        image.nativeViewProtected,
+        to?.ios ?? null,
+        mode,
+        x,
+        y,
+        amplitude,
+        radius,
+        duration,
+        seed,
+        ended,
+      )
+    if (!native) return undefined
+    return {
+      backend: 'metal',
+      get progress() {
+        return native.progress
+      },
+      get frames() {
+        return native.frames
+      },
+      get textureBytes() {
+        return native.textureBytes
+      },
+      get longestFrameMs() {
+        return native.longestFrame * 1000
+      },
+      play: (p) => native.play(p),
+      pause: () => native.pause(),
+      resume: () => native.resume(),
+      seek: (p) => native.seek(p),
+      finish: (p) => native.finish(p),
+      stop: (preserveImage) =>
+        preserveImage ? native.stopPreservingImage() : native.stop(),
+    }
+  }
+  if (isAndroid && android.os.Build.VERSION.SDK_INT >= 33) {
+    const density = Utils.layout.getDisplayDensity()
+    const background = image.nativeViewProtected.getBackground()
+    // NativeScript draws bitmap pixels itself: ImageView.getImageMatrix() does
+    // not describe its stretch, EXIF rotation or inner border clipping.
+    const geometry = Array.create('float', 6)
+    geometry[0] = image.imageSource?.rotationAngle ?? 0
+    geometry[1] = to?.rotationAngle ?? 0
+    const corners = ['TopLeft', 'TopRight', 'BottomRight', 'BottomLeft']
+    corners.forEach((corner, i) => {
+      geometry[i + 2] = background?.[`getBorder${corner}Radius`]?.() ?? 0
+    })
+    const native = new org.rafaelaugusto.jolt.ImageEffect(
+      image.nativeViewProtected,
+      image.imageSource?.android ?? null,
+      to?.android ?? null,
+      geometry,
+      mode,
+      x * density,
+      y * density,
+      amplitude * density,
+      radius * density,
+      duration,
+      seed,
+      (image as Image & { touchListener?: android.view.View.OnTouchListener })
+        .touchListener ?? null,
+      new org.rafaelaugusto.jolt.ImageEffect.Listener({ onEnd: ended }),
+    )
+    if (!native.isSupported()) {
+      const reason = native.getFailureReason()
+      native.stop()
+      throw new Error(reason)
+    }
+    return {
+      backend: 'agsl',
+      get progress() {
+        return native.getProgress()
+      },
+      get frames() {
+        return native.getFrames()
+      },
+      get textureBytes() {
+        return native.getTextureBytes()
+      },
+      get longestFrameMs() {
+        return native.getLongestFrameNanos() / 1e6
+      },
+      play: (p) => native.play(p),
+      pause: () => native.pause(),
+      resume: () => native.resume(),
+      seek: (p) => native.seek(p),
+      finish: (p) => native.finish(p),
+      stop: (preserveImage) =>
+        preserveImage ? native.stopPreservingImage() : native.stop(),
+    }
+  }
+  return undefined
+}

package/src/image-effect.ts

@@ -0,0 +1,336 @@
+import {
+  Application,
+  Image,
+  ImageSource,
+  isIOS,
+  type EventData,
+} from '@nativescript/core'
+import { toView } from './animate.js'
+import { reducedMotion, timeScale } from './config.js'
+import type { Animation } from './engine.js'
+import { ownImage } from './image-owner.js'
+import { createImageRenderer, type ImageRenderer } from './image-effect-native.js'
+import type { Target } from './types.js'
+
+export type ImageEffectName = 'ripple' | 'distortion' | 'dissolve'
+export interface ImageEffectOptions {
+  /** Origin in target-local DIPs; defaults to the center. */
+  origin?: { x: number; y: number }
+  /** Maximum displacement in DIPs, 0..64. Defaults to 8. */
+  amplitude?: number
+  /** Influence radius in DIPs, greater than zero. Defaults to 96. */
+  radius?: number
+  /** Milliseconds for a finite effect (or drag release). Defaults to 650. */
+  duration?: number
+  /** Deterministic dissolve noise seed, 0..65535. Defaults to 1. */
+  seed?: number
+  /** Loaded destination raster for dissolve. */
+  to?: ImageSource
+  /** Prepare at progress zero without starting. */
+  paused?: boolean
+}
+export interface ImageEffectDiagnostics {
+  backend: 'waiting' | 'metal' | 'agsl' | 'fallback'
+  reason?: 'reduced-motion' | 'unsupported' | 'not-visible'
+  /** Native setup error, when available. Intended for developer diagnostics. */
+  detail?: string
+  frames: number
+  textureBytes: number
+  peakTextureBytes: number
+  preparationMs: number
+  longestFrameMs: number
+}
+export interface ImageEffect extends Animation {
+  readonly effect: ImageEffectName
+  readonly paused: boolean
+  /** Finite progress; distortion rejects seeking because it follows native touch input. */
+  progress: number
+  readonly diagnostics: Readonly<ImageEffectDiagnostics>
+  pause(): void
+  play(): void
+  /** Reverse a finite effect from its current pixels. Terminal handles remain terminal. */
+  reverse(): void
+  /** Complete immediately at the current direction's endpoint. */
+  finish(): void
+}
+
+const names: readonly ImageEffectName[] = ['ripple', 'distortion', 'dissolve']
+const surfaceChanges = [
+  'tintColorChange',
+  ...['TopLeft', 'TopRight', 'BottomRight', 'BottomLeft'].map(
+    (corner) => `border${corner}RadiusChange`,
+  ),
+  ...['Top', 'Right', 'Bottom', 'Left'].flatMap((edge) => [
+    `padding${edge}Change`,
+    `border${edge}WidthChange`,
+  ]),
+]
+
+/** Optional native image effects. Stop restores the source; dissolve completion commits its destination. */
+export function imageEffect(
+  target: Target,
+  effect: ImageEffectName,
+  options: ImageEffectOptions = {},
+): ImageEffect {
+  const image = toView(target)
+  if (!(image instanceof Image))
+    throw new TypeError('imageEffect() expects a NativeScript Image.')
+  if (!names.includes(effect))
+    throw new TypeError(`Unknown image effect: ${String(effect)}.`)
+  if (!options || typeof options !== 'object')
+    throw new TypeError('Image effect options must be an object.')
+  const amplitude = options.amplitude ?? 8,
+    radius = options.radius ?? 96
+  const duration = options.duration ?? 650,
+    seed = options.seed ?? 1
+  if (!Number.isFinite(amplitude) || amplitude < 0 || amplitude > 64)
+    throw new RangeError('Image displacement must be between 0 and 64 DIPs.')
+  if (
+    !Number.isFinite(radius) ||
+    radius <= 0 ||
+    !Number.isFinite(duration) ||
+    duration <= 0
+  )
+    throw new RangeError('Image radius and duration must be positive finite numbers.')
+  if (!Number.isInteger(seed) || seed < 0 || seed > 65535)
+    throw new RangeError('Image seed must be an integer between 0 and 65535.')
+  if (
+    options.origin &&
+    (!Number.isFinite(options.origin.x) || !Number.isFinite(options.origin.y))
+  )
+    throw new RangeError('Image origin must contain finite local coordinates.')
+  if (options.paused !== undefined && typeof options.paused !== 'boolean')
+    throw new TypeError('paused must be a boolean.')
+  if (
+    effect === 'dissolve' &&
+    (!(options.to instanceof ImageSource) ||
+      !Number.isFinite(options.to.width) ||
+      !Number.isFinite(options.to.height) ||
+      options.to.width <= 0 ||
+      options.to.height <= 0)
+  )
+    throw new TypeError('Dissolve requires a loaded destination ImageSource.')
+  return new Effect(image, effect, {
+    ...options,
+    amplitude,
+    radius,
+    duration: duration / timeScale(),
+    seed,
+  })
+}
+
+class Effect implements ImageEffect {
+  readonly finished: Promise<boolean>
+  private resolve!: (completed: boolean) => void
+  private renderer: ImageRenderer | undefined
+  private releaseOwnership: () => void = () => {}
+  private terminal = false
+  private queued = false
+  private committing = false
+  private userPaused: boolean
+  private suspended = false
+  private position = 0
+  private direction: 0 | 1 = 1
+  private dimensions = ''
+  private stats: ImageEffectDiagnostics = {
+    backend: 'waiting',
+    frames: 0,
+    textureBytes: 0,
+    peakTextureBytes: 0,
+    preparationMs: 0,
+    longestFrameMs: 0,
+  }
+  private reduceObserver:
+    ReturnType<typeof Application.ios.addNotificationObserver> | undefined
+
+  constructor(
+    private readonly image: Image,
+    readonly effect: ImageEffectName,
+    private readonly options: ImageEffectOptions &
+      Required<Pick<ImageEffectOptions, 'amplitude' | 'radius' | 'duration' | 'seed'>>,
+  ) {
+    this.userPaused = options.paused ?? false
+    this.finished = new Promise((resolve) => {
+      this.resolve = resolve
+    })
+    this.releaseOwnership = ownImage(image, this.stop)
+    for (const event of ['loaded', 'layoutChanged']) image.on(event, this.schedule)
+    for (const event of ['imageSourceChange', 'stretchChange'])
+      image.on(event, this.changed)
+    image.on('unloaded', this.stop)
+    image.style.on('visibilityChange', this.visible)
+    for (const event of surfaceChanges) image.style.on(event, this.changed)
+    Application.on(Application.suspendEvent, this.suspend)
+    Application.on(Application.resumeEvent, this.resume)
+    if (isIOS)
+      this.reduceObserver = Application.ios.addNotificationObserver(
+        UIAccessibilityReduceMotionStatusDidChangeNotification,
+        this.preferences,
+      )
+    this.schedule()
+  }
+  then<TResult1 = boolean, TResult2 = never>(
+    fulfilled?: ((value: boolean) => TResult1 | PromiseLike<TResult1>) | null,
+    rejected?: ((reason: unknown) => TResult2 | PromiseLike<TResult2>) | null,
+  ): PromiseLike<TResult1 | TResult2> {
+    return this.finished.then(fulfilled, rejected)
+  }
+  get paused() {
+    return this.userPaused
+  }
+  get progress() {
+    return this.renderer?.progress ?? this.position
+  }
+  set progress(value: number) {
+    if (this.effect === 'distortion')
+      throw new TypeError('Distortion follows touch input and cannot be scrubbed.')
+    if (!Number.isFinite(value) || value < 0 || value > 1)
+      throw new RangeError('Image progress must be between 0 and 1.')
+    if (this.terminal) return
+    this.position = value
+    this.renderer?.seek(value)
+  }
+  get diagnostics(): Readonly<ImageEffectDiagnostics> {
+    return {
+      ...this.stats,
+      ...(this.renderer
+        ? {
+            frames: this.renderer.frames,
+            textureBytes: this.renderer.textureBytes,
+            longestFrameMs: this.renderer.longestFrameMs,
+          }
+        : {}),
+    }
+  }
+  pause = () => {
+    if (this.terminal) return
+    this.userPaused = true
+    this.renderer?.pause()
+  }
+  play = () => {
+    if (this.terminal) return
+    this.userPaused = false
+    if (this.suspended) return
+    if (this.renderer) {
+      if (this.effect === 'distortion') this.renderer.resume()
+      else this.renderer.play(this.direction)
+    } else this.schedule()
+  }
+  reverse = () => {
+    if (this.effect === 'distortion')
+      throw new TypeError('Distortion has no finite playback direction.')
+    if (this.terminal) return
+    this.direction = this.direction === 1 ? 0 : 1
+    this.play()
+  }
+  finish = () => {
+    if (this.terminal) return
+    if (this.effect === 'distortion') return this.stop()
+    this.complete(true, this.direction)
+  }
+  stop = () => this.complete(false, this.progress)
+  private complete = (completed: boolean, position: number, preserveImage = false) => {
+    if (this.terminal) return
+    this.terminal = true
+    this.position = position
+    this.stats = { ...this.diagnostics, textureBytes: 0 }
+    this.renderer?.stop(preserveImage)
+    this.renderer = undefined
+    this.releaseOwnership()
+    for (const event of ['loaded', 'layoutChanged']) this.image.off(event, this.schedule)
+    for (const event of ['imageSourceChange', 'stretchChange'])
+      this.image.off(event, this.changed)
+    this.image.off('unloaded', this.stop)
+    this.image.style.off('visibilityChange', this.visible)
+    for (const event of surfaceChanges) this.image.style.off(event, this.changed)
+    Application.off(Application.suspendEvent, this.suspend)
+    Application.off(Application.resumeEvent, this.resume)
+    if (this.reduceObserver)
+      Application.ios.removeNotificationObserver(
+        this.reduceObserver,
+        UIAccessibilityReduceMotionStatusDidChangeNotification,
+      )
+    this.reduceObserver = undefined
+    if (completed && this.effect === 'dissolve' && position === 1) {
+      this.committing = true
+      // The view may clear its ImageSource on disposal. Keep the caller's
+      // destination reusable by giving the view its own wrapper.
+      const destination = new ImageSource(this.options.to!.getNativeSource())
+      destination.rotationAngle = this.options.to!.rotationAngle
+      this.image.imageSource = destination
+      this.committing = false
+    }
+    this.resolve(completed)
+  }
+  private changed = (event?: EventData) => {
+    if (this.committing) return
+    if (this.renderer)
+      this.complete(false, this.progress, event?.eventName === 'imageSourceChange')
+    else this.schedule()
+  }
+  private suspend = () => {
+    this.suspended = true
+    this.renderer?.pause()
+  }
+  private resume = () => {
+    this.suspended = false
+    this.schedule()
+    if (!this.userPaused) this.play()
+  }
+  private visible = () => {
+    if (this.image.visibility !== 'visible') this.stop()
+  }
+  private preferences = () => {
+    if (reducedMotion()) this.fallback('reduced-motion')
+  }
+  private fallback(reason: ImageEffectDiagnostics['reason']) {
+    this.stats = { ...this.stats, backend: 'fallback', reason }
+    // Reduced/unsupported rendering still performs a requested content change.
+    if (this.effect === 'dissolve' && this.direction === 1) {
+      this.complete(true, 1)
+    } else this.complete(false, 0)
+  }
+  private schedule = () => {
+    if (this.queued || this.terminal) return
+    this.queued = true
+    void Promise.resolve().then(() => {
+      this.queued = false
+      if (this.terminal || this.suspended || !this.image.isLoaded) return
+      if (reducedMotion()) return this.fallback('reduced-motion')
+      if (this.image.visibility !== 'visible') return this.fallback('not-visible')
+      const { width, height } = this.image.getActualSize()
+      if (width <= 0 || height <= 0) return
+      const dimensions = `${width}:${height}`
+      if (this.renderer) {
+        if (this.dimensions !== dimensions) this.stop()
+        return
+      }
+      if (!this.image.imageSource) return
+      this.dimensions = dimensions
+      const started = Date.now()
+      try {
+        this.renderer = createImageRenderer(
+          this.image,
+          {
+            ...this.options,
+            mode: names.indexOf(this.effect),
+            x: this.options.origin?.x ?? width / 2,
+            y: this.options.origin?.y ?? height / 2,
+          },
+          this.complete,
+        )
+      } catch (error) {
+        this.stats.preparationMs = Date.now() - started
+        this.stats.detail = String(error)
+        return this.fallback('unsupported')
+      }
+      if (!this.renderer) return this.fallback('unsupported')
+      this.stats.backend = this.renderer.backend
+      this.stats.preparationMs = Date.now() - started
+      this.stats.peakTextureBytes = this.renderer.textureBytes
+      this.renderer.pause()
+      if (this.position) this.renderer.seek(this.position)
+      if (!this.userPaused && !this.suspended) this.play()
+    })
+  }
+}

package/src/image-owner.ts

@@ -0,0 +1,12 @@
+import type { Image } from '@nativescript/core'
+
+/** Rendering effects share one image surface; ordinary view transforms stay independent. */
+const owners = new WeakMap<Image, () => void>()
+
+export function ownImage(image: Image, stop: () => void): () => void {
+  owners.get(image)?.()
+  owners.set(image, stop)
+  return () => {
+    if (owners.get(image) === stop) owners.delete(image)
+  }
+}