@px-petals/roku.motion-web 0.0.0-stage → 1.1.0

package/list/list.js

@@ -0,0 +1,518 @@
+/**
+ * Lists: a view-model list property drawn as one instance of a row artboard
+ * for each item, as Rive's ArtboardComponentList does.
+ *
+ * A bundle's `lists` names each list: its view-model path, the row artboards
+ * it draws (a Lottie each, with the row view model's slots), the flex of the
+ * container the rows sit in, and the container's box in each layout band.
+ * This player compiles the row's Lottie once for each item, so every row
+ * has its own slots, filled from the item's instance through the bind's
+ * converters, and lays the rows out with `list.flex.js`. A row with a state
+ * machine runs it for each item, with the runner nested artboards use.
+ *
+ * The rows are drawn over the animation, after it. A host changes them with
+ * `setInputs({ rows: [ ... ] })`: a row whose item has not changed stays as
+ * it is, with its machine's state.
+ *
+ * Not done: pointer listeners and text inside a row, and the list's own
+ * transform and opacity.
+ */
+
+import { createAnimation } from '../lottie/lottie.js'
+import { multiply } from '../lottie/lottie.paths.js'
+import { createNested, extend } from '../motion/motion.nested.js'
+import { slotValues, sourceValue } from '../motion/motion.values.js'
+import { layoutRows } from './list.flex.js'
+import { itemValues, rowNameOf, signature } from './list.items.js'
+
+/** @import { Animation } from '../lottie/lottie.js' */
+
+/**
+ * The scope a row's machine runs its focus in: `row.<id>` for the row's own, `row.<id>/<sid>` for a nested artboard in it.
+ *
+ * @param   {number} id
+ * @param   {string} sid the machine's, `row` for the row's own
+ * @returns {string}
+ */
+function scopeOf(id, sid) {
+  return sid === 'row' ? 'row.' + id : 'row.' + id + '/' + sid
+}
+
+/**
+ * @typedef {object} Row
+ * @property {string}                                 sig    which item it was made for
+ * @property {any}                                    entry  the list's description of its row artboard
+ * @property {Animation}                              anim   its own compiled copy of the row's Lottie
+ * @property {ReturnType<typeof createNested> | null} runner its machine, when the row has one
+ * @property {number}                                 id     which row it is, for the pointer's names
+ */
+
+/**
+ * @typedef {object} Options
+ * @property {string}                                          base       where the row Lotties' images resolve from
+ * @property {() => Record<string, string>}                    [families] the bundle's fonts by name, as registered, which a text in a row is drawn in
+ * @property {() => number}                                    band       the width of the layout band showing, 0 for the file's own size
+ * @property {() => number}                                    [blended]  between two bands that blend, the canvas's width, else 0: the box is then the mix of the two bands'
+ * @property {() => (import('../bands/bands.js').Cell | null)} [cell]     where the canvas falls in the layout grid, while the fit is layout: the box is then the (bilinear) mix of the cell's corners'; it replaces `band` and `blended`
+ * @property {((list: any[]) => ReturnType<typeof import('../skin/skin.js').createSkins>) | null} [skins] makes the skins of a row's `data.skins`; null when the bundle has none, so the skin code is never loaded
+ * @property {(message: string) => void}                       error
+ * @property {(action: any, scope: string) => void}            focus      a row's machine ran a focus action: FocusTarget with the machine's own rid, FocusMove or FocusClear; `scope` is the machine (`row.<id>`, or `row.<id>/<sid>` for a nested artboard in the row)
+ */
+
+/**
+ * @param {any[] | undefined}   entries a bundle's `lists`
+ * @param {Record<string, any>} lotties the rows' Lotties, by file name
+ * @param {Options}             options
+ */
+export function createLists(entries, lotties, options) {
+  /** @type {{ entry: any, rows: Row[] }[]} */
+  const lists = []
+  for (let n = 0; n < (entries || []).length; n++) {
+    /** @type {Row[]} */
+    const rows = []
+    lists.push({ entry: entries ? entries[n] : null, rows })
+  }
+  let hasMachines = false
+  let nextRow = 1
+  /** whether the rows changed since the pointer last looked: they hold its targets */
+  let moved = false
+  /** how many times the rows changed: the focus tree has their nodes */
+  let version = 0
+  /** @type {Row[]} rows made since the focus tree last took them in */
+  let fresh = []
+
+  /**
+   * @param   {any}        list
+   * @param   {any}        item
+   * @returns {Row | null}
+   */
+  function makeRow(list, item) {
+    const name = rowNameOf(item, list.entry.rows)
+    if (name === null) {
+      options.error("list '" + list.entry.path + "' has no row for " + signature(item))
+      return null
+    }
+    const entry = list.entry.rows[name]
+    const lottie = lotties[entry.lottie]
+    if (!lottie) return null
+
+    const anim = createAnimation(lottie, { base: options.base, families: options.families })
+    const values = itemValues(item, entry.data)
+    const table = slotValues(entry.data, values, options.error)
+    for (const sid in table) anim.slots[sid] = table[sid]
+    // the skinned paths the row's binds move, deformed for this item: its animation is its file's name
+    const rowSkins = options.skins && entry.data && entry.data.skins ? options.skins(entry.data.skins) : null
+    const animationId = String(entry.lottie).replace(/\.json$/, '')
+    const deformRow = (/** @type {Record<string, any>} */ current) => {
+      if (!rowSkins) return
+      const deformed = rowSkins.evaluate((source) => sourceValue(source, current, entry.data, options.error), animationId)
+      for (const sid in deformed) anim.slots[sid] = deformed[sid]
+    }
+    deformRow(values)
+
+    // the row's own machine, and the machines of the nested artboards in it: each runs on the row's clock
+    const machines = entry.machine ? [ { sid: 'row', fps: entry.machine.fps, machine: entry.machine.machine, animations: entry.machine.animations, inputs: {}, remoteKeys: entry.remoteKeys } ] : []
+    for (let n = 0; n < (entry.nested || []).length; n++) machines.push(entry.nested[n])
+
+    const id = nextRow++
+    /** @type {Row['runner']} */
+    let runner = null
+    if (machines.length) {
+      runner = createNested(machines, {
+        focus: (action, sid) => options.focus(action, scopeOf(id, sid)),
+        // the row's own machine sets properties of the row's view model (a listener, a state's action): the slots follow
+        values: (sid, changed) => {
+          if (sid !== 'row') return
+          const table = slotValues(entry.data, extend(values, changed), options.error)
+          for (const slot in table) anim.slots[slot] = table[slot]
+          deformRow(extend(values, changed))
+        },
+      })
+      runner.takeInputs(values)
+      hasMachines = true
+    }
+    const row = { sig: signature(item), entry, anim, runner, id }
+    // the shapes its pointer listeners watch, and its focus nodes, are recorded as it draws
+    const watched = runner ? Object.keys(runner.pointerTargets()) : []
+    const nodes = entry.focus ? entry.focus.nodes : []
+    for (let n = 0; n < nodes.length; n++) if (nodes[n].rid !== '' && watched.indexOf(nodes[n].rid) < 0) watched.push(nodes[n].rid)
+    if (watched.length) anim.hits.watch(watched)
+    fresh.push(row)
+    return row
+  }
+
+  /**
+   * @param   {string}                              name `<row>|<target>`
+   * @returns {{ row: Row, target: string } | null}
+   */
+  function rowOf(name) {
+    const at = name.indexOf('|')
+    if (at < 0) return null
+    const id = Number(name.slice(0, at))
+    for (let n = 0; n < lists.length; n++) {
+      for (let k = 0; k < lists[n].rows.length; k++) if (lists[n].rows[k].id === id) return { row: lists[n].rows[k], target: name.slice(at + 1) }
+    }
+    return null
+  }
+
+  /**
+   * @param   {string}                                                                    scope `row.<id>` or `row.<id>/<sid>`
+   * @returns {{ row: Row & { runner: NonNullable<Row['runner']> }, sid: string } | null}
+   */
+  function machineOf(scope) {
+    const at = scope.indexOf('/')
+    const id = Number((at < 0 ? scope : scope.slice(0, at)).slice(4))
+    for (let n = 0; n < lists.length; n++) {
+      for (let k = 0; k < lists[n].rows.length; k++) {
+        const row = lists[n].rows[k]
+        if (row.id === id && row.runner) return { row: /** @type {any} */ (row), sid: at < 0 ? 'row' : scope.slice(at + 1) }
+      }
+    }
+    return null
+  }
+
+  return {
+    /** How many lists the bundle has */
+    count: lists.length,
+
+    /**
+     * Brings every list's rows up to date with the view-model values. A row
+     * whose item is unchanged is kept.
+     *
+     * @param {Record<string, any>} values
+     */
+    update(values) {
+      for (let n = 0; n < lists.length; n++) {
+        const list = lists[n]
+        const items = values[list.entry.path]
+        if (!Array.isArray(items)) continue
+
+        /** @type {Row[]} */
+        const next = []
+        for (let k = 0; k < items.length; k++) {
+          const kept = list.rows[k] && list.rows[k].sig === signature(items[k]) ? list.rows[k] : null
+          const row = kept || makeRow(list, items[k])
+          if (row) next.push(row)
+        }
+        if (next.length !== list.rows.length || next.some((row, k) => row !== list.rows[k])) {
+          moved = true
+          version++
+        }
+        list.rows = next
+      }
+    },
+
+    /**
+     * Where the pointer listeners of the rows' machines are, each row's under
+     * its own name: `<row>|<target>`, a target as the row's machine names it.
+     *
+     * @returns {Record<string, string[]>}
+     */
+    pointerTargets() {
+      moved = false
+      /** @type {Record<string, string[]>} */
+      const found = {}
+      for (let n = 0; n < lists.length; n++) {
+        for (let k = 0; k < lists[n].rows.length; k++) {
+          const row = lists[n].rows[k]
+          if (!row.runner) continue
+          const targets = row.runner.pointerTargets()
+          for (const name in targets) found[row.id + '|' + name] = targets[name]
+        }
+      }
+      return found
+    },
+
+    /** Changes whenever rows come or go, which is when the focus tree needs their nodes again */
+    get version() {
+      return version
+    },
+
+    /**
+     * A list's rows' focus nodes, named by the host's tree: `row.<id>/<rid>`
+     * (and `row.<id>/<sid>/<rid>` for a nested artboard in the row). Their
+     * topmost node is inside `marker`, the node that holds the list's place.
+     *
+     * @param   {string} listId the list's id (`list.1`)
+     * @param   {string} marker the list's node in the host's tree
+     * @returns {any[]}
+     */
+    nodes(listId, marker) {
+      const found = []
+      for (let n = 0; n < lists.length; n++) {
+        if (lists[n].entry.id !== listId) continue
+        for (let k = 0; k < lists[n].rows.length; k++) {
+          const row = lists[n].rows[k]
+          const own = row.entry.focus ? row.entry.focus.nodes : []
+          const prefix = 'row.' + row.id + '/'
+          for (let j = 0; j < own.length; j++) {
+            const node = extend(own[j], { rid: prefix + own[j].rid })
+            if (own[j].rid === '') {
+              // the row's own artboard is a node of the tree, inside the list's
+              node.parent = marker
+              node.kind = 'group'
+            } else {
+              node.parent = own[j].parent === '' ? (own.some((/** @type {any} */ one) => one.rid === '') ? prefix : marker) : prefix + own[j].parent
+            }
+            if (node.name) node.name = 'row ' + row.id + '/' + node.name
+            found.push(node)
+          }
+        }
+      }
+      return found
+    },
+
+    /**
+     * The key bindings of the rows' focus nodes, named as `nodes` names them,
+     * with the machine each runs in as `scope`.
+     *
+     * @returns {any[]}
+     */
+    bindings() {
+      const found = []
+      for (let n = 0; n < lists.length; n++) {
+        for (let k = 0; k < lists[n].rows.length; k++) {
+          const row = lists[n].rows[k]
+          const prefix = 'row.' + row.id + '/'
+          const own = row.entry.remoteKeys || []
+          for (let j = 0; j < own.length; j++) found.push(extend(own[j], { target: prefix + own[j].target, scope: 'row.' + row.id }))
+          const inside = row.entry.nested || []
+          for (let j = 0; j < inside.length; j++) {
+            const keys = inside[j].remoteKeys || []
+            for (let i = 0; i < keys.length; i++) found.push(extend(keys[i], { target: prefix + inside[j].sid + '/' + keys[i].target, scope: 'row.' + row.id + '/' + inside[j].sid }))
+          }
+        }
+      }
+      return found
+    },
+
+    /**
+     * Focus actions the rows' machines ran as they started take effect: the
+     * focus tree has their nodes now.
+     */
+    flushFocus() {
+      const made = fresh
+      fresh = []
+      for (let n = 0; n < made.length; n++) {
+        const runner = made[n].runner
+        if (runner) runner.flushFocus()
+      }
+    },
+
+    /**
+     * A node of a row gained or lost focus.
+     *
+     * @param {'Focus' | 'Blur'} type
+     * @param {string}           scope `row.<id>` or `row.<id>/<sid>`
+     * @param {string}           rid   the node in its machine's artboard
+     */
+    focusEvent(type, scope, rid) {
+      const found = machineOf(scope)
+      if (found && found.row.runner) found.row.runner.focusEvent(type, found.sid, rid)
+    },
+
+    /**
+     * Runs a key binding's actions in the machine of a row it belongs to.
+     *
+     * @param {string} scope   `row.<id>` or `row.<id>/<sid>`
+     * @param {any[]}  actions
+     */
+    act(scope, actions) {
+      const found = machineOf(scope)
+      if (found) found.row.runner.act(found.sid, actions)
+    },
+
+    /**
+     * Where a row's node was drawn, for the arrows.
+     *
+     * @param   {string}                          rid `row.<id>/<rid>`
+     * @returns {{ x: number, y: number } | null}
+     */
+    center(rid) {
+      const at = rid.indexOf('/')
+      const found = at < 0 ? null : rowOf(rid.slice(4, at) + '|' + rid.slice(at + 1))
+      return found ? found.row.anim.hits.center(found.target) : null
+    },
+
+    /** Whether rows came or went since the pointer last asked for its targets */
+    get isPointerStale() {
+      return moved
+    },
+
+    /**
+     * Whether a canvas pixel is on a target of a row, in the last frame drawn.
+     *
+     * @param   {string}  name `<row>|<target>`
+     * @param   {number}  x
+     * @param   {number}  y
+     * @returns {boolean}
+     */
+    hit(name, x, y) {
+      const found = rowOf(name)
+      return !!found && found.row.anim.hits.test(found.target, x, y)
+    },
+
+    /**
+     * A pointer event on a target of a row's machine.
+     *
+     * @param   {string}  type
+     * @param   {string}  name `<row>|<target>`
+     * @returns {boolean}      whether a row owns the target
+     */
+    pointer(type, name) {
+      const found = rowOf(name)
+      return !!found && !!found.row.runner && found.row.runner.pointer(type, found.target)
+    },
+
+    /**
+     * Moves the rows' machines on.
+     *
+     * @param {number} seconds
+     */
+    tick(seconds) {
+      for (let n = 0; n < lists.length; n++) {
+        for (let k = 0; k < lists[n].rows.length; k++) {
+          const runner = lists[n].rows[k].runner
+          if (runner) runner.tick(seconds)
+        }
+      }
+    },
+
+    /** Whether any row runs a machine, which keeps the clock going */
+    get isAnimated() {
+      return hasMachines
+    },
+
+    /**
+     * What each row of a list has now: the slot values its item gave it, and
+     * the frame of its Lottie it draws.
+     *
+     * @param   {string}                                          path the list's view-model path
+     * @returns {{ slots: Record<string, any>, frame: number }[]}
+     */
+    inspect(path) {
+      const found = []
+      for (let n = 0; n < lists.length; n++) {
+        if (lists[n].entry.path !== path) continue
+        for (let k = 0; k < lists[n].rows.length; k++) found.push({ slots: lists[n].rows[k].anim.slots, frame: rowFrame(lists[n].rows[k]) })
+      }
+      return found
+    },
+
+    /**
+     * Where each list's rows are, in the artboard of the layout band showing.
+     *
+     * @returns {{ path: string, rows: { x: number, y: number, width: number, height: number }[] }[]}
+     */
+    layout() {
+      /** @type {{ path: string, rows: { x: number, y: number, width: number, height: number }[] }[]} */
+      const found = []
+      for (let n = 0; n < lists.length; n++) {
+        const placed = place(lists[n], options.band(), options.blended ? options.blended() : 0, options.cell ? options.cell() : null)
+        const rows = []
+        for (let k = 0; k < lists[n].rows.length; k++) rows.push({ x: placed.left + placed.x[k], y: placed.top + placed.y[k], width: lists[n].rows[k].entry.width, height: lists[n].rows[k].entry.height })
+        found.push({ path: lists[n].entry.path, rows })
+      }
+      return found
+    },
+
+    /**
+     * Draws every row.
+     *
+     * @param {CanvasRenderingContext2D}                   ctx
+     * @param {import('../lottie/lottie.paths.js').Matrix} matrix the artboard's space onto the canvas
+     */
+    draw(ctx, matrix) {
+      for (let n = 0; n < lists.length; n++) {
+        const list = lists[n]
+        if (!list.rows.length) continue
+        const placed = place(list, options.band(), options.blended ? options.blended() : 0, options.cell ? options.cell() : null)
+        for (let k = 0; k < list.rows.length; k++) {
+          const row = list.rows[k]
+          const at = multiply(matrix, [ 1, 0, 0, 1, placed.left + placed.x[k], placed.top + placed.y[k] ])
+          ctx.save()
+          // a row is cut off at its own edge, as an artboard is
+          ctx.setTransform(at[0], at[1], at[2], at[3], at[4], at[5])
+          ctx.beginPath()
+          ctx.rect(0, 0, row.entry.width, row.entry.height)
+          ctx.clip()
+          row.anim.draw(ctx, rowFrame(row), at)
+          ctx.restore()
+        }
+      }
+    },
+  }
+}
+
+/**
+ * The frame of a row's Lottie to draw: the machine's, else the first. The
+ * machines of the nested artboards in the row set where their layers' time
+ * remaps are in the row's slots.
+ *
+ * @param   {Row}    row
+ * @returns {number}
+ */
+function rowFrame(row) {
+  if (!row.runner) return row.anim.inPoint
+  row.runner.apply(row.anim.slots, row.anim.fps)
+  const time = row.anim.slots.row
+  if (time === undefined) return row.anim.inPoint
+  // a Lottie draws up to its out point, not at it: a finished machine holds the last frame it has
+  return Math.min(row.anim.inPoint + time * row.anim.fps, Math.max(row.anim.outPoint - 0.001, row.anim.inPoint))
+}
+
+/**
+ * The container's box at a band of the layout grid.
+ *
+ * @param   {any}                                                                  entry  the list's description
+ * @param   {{ width: number, height: number }}                                    corner the band
+ * @returns {{ width: number, x: number, y: number, w: number, h: number } | null}
+ */
+function boxAt(entry, corner) {
+  const all = entry.gridBoxes ? entry.boxes.concat(entry.gridBoxes) : entry.boxes
+  let found = null
+  // a box says its height unless the file is older than the grid
+  for (let n = 0; n < all.length; n++) if (all[n].width === corner.width && (all[n].height === undefined || all[n].height === corner.height)) found = all[n]
+  return found
+}
+
+/**
+ * The container's box in the band showing, and where its rows sit in it.
+ *
+ * @param   {{ entry: any, rows: Row[] }}                             list
+ * @param   {number}                                                  band    the layout band's width, 0 for the file's own
+ * @param   {number}                                                  blended the canvas's width between two blending bands, else 0
+ * @param   {import('../bands/bands.js').Cell | null}                 [cell]  where the canvas falls in the layout grid
+ * @returns {{ left: number, top: number, x: number[], y: number[] }}
+ */
+function place(list, band, blended, cell) {
+  const boxes = list.entry.boxes
+  let box = boxes[0]
+  let at = 0
+  for (let n = 0; n < boxes.length; n++) {
+    const isOwn = band === 0 ? boxes[n].authored : boxes[n].width === band
+    if (isOwn) {
+      box = boxes[n]
+      at = n
+    }
+  }
+  const after = boxes[at + 1]
+  const corner = cell ? boxAt(list.entry, cell.corner) : null
+  if (cell && corner) {
+    // the container's box is bilinear in the size inside a cell that blends: a straight line along one side of it
+    const right = (cell.right && boxAt(list.entry, cell.right)) || corner
+    const up = (cell.up && boxAt(list.entry, cell.up)) || corner
+    const diag = (cell.diag && boxAt(list.entry, cell.diag)) || (cell.right ? right : up)
+    const mix = (/** @type {'x' | 'y' | 'w' | 'h'} */ key) => (corner[key] * (1 - cell.u) + right[key] * cell.u) * (1 - cell.v) + (up[key] * (1 - cell.u) + diag[key] * cell.u) * cell.v
+    box = { width: corner.width, authored: false, x: mix('x'), y: mix('y'), w: mix('w'), h: mix('h') }
+  } else if (blended > box.width && after && after.width > box.width) {
+    // the container's box is a straight line in the width between bands that blend
+    const t = Math.min(1, (blended - box.width) / (after.width - box.width))
+    const mix = (/** @type {number} */ a, /** @type {number} */ b) => a + (b - a) * t
+    box = { width: blended, authored: false, x: mix(box.x, after.x), y: mix(box.y, after.y), w: mix(box.w, after.w), h: mix(box.h, after.h) }
+  }
+  const sizes = []
+  for (let n = 0; n < list.rows.length; n++) sizes.push({ w: list.rows[n].entry.width, h: list.rows[n].entry.height })
+  const laid = layoutRows(list.entry.flex, box, sizes)
+  return { left: box.x, top: box.y, x: laid.x, y: laid.y }
+}

package/lottie/lottie.js

@@ -0,0 +1,124 @@
+/**
+ * A Lottie animation drawn on a 2D canvas, for the subset Motion's bundles
+ * use: shape layers (groups, paths, rectangles, ellipses, stars, fills,
+ * strokes, gradients, dashes, trims, merges), precomps, solids, images,
+ * masks and mattes. Compiled once; each frame is drawn from scratch.
+ *
+ * `slots` is live: a slot id set there overrides the property carrying it,
+ * which is how live data reaches the animation without recompiling it.
+ */
+
+import { createHits } from '../hit/hit.js'
+import { compileLayers, drawLayers } from './lottie.layers.js'
+import { evaluator } from './lottie.props.js'
+
+/** @import { Matrix } from './lottie.paths.js' */
+/** @import { Slots } from './lottie.props.js' */
+
+/**
+ * @typedef {object} Animation
+ * @property {number}                                                                 width
+ * @property {number}                                                                 height
+ * @property {number}                                                                 fps
+ * @property {number}                                                                 inPoint  first frame
+ * @property {number}                                                                 outPoint the frame it ends at, exclusive
+ * @property {Slots}                                                                  slots    slot id → live value, read every frame
+ * @property {import('../hit/hit.js').Hits}                                           hits     where the last frame drew the shapes pointer listeners target
+ * @property {Promise<void>}                                                          ready    resolves once its images have loaded
+ * @property {(sid: string, frame: number) => any}                                    probe    the value the property carrying a slot id has at a frame, as drawn (a live slot value included); undefined when there is none
+ * @property {(ctx: CanvasRenderingContext2D, frame: number, matrix: Matrix) => void} draw
+ */
+
+/**
+ * @param   {any}                          lottie             parsed Lottie JSON
+ * @param   {object}                       [options]
+ * @param   {string}                       [options.base]     where image paths that aren't data URIs resolve from
+ * @param   {() => Record<string, string>} [options.families] the bundle's fonts by name, as registered, which a text a precomp holds is drawn in
+ * @returns {Animation}
+ */
+export function createAnimation(lottie, options) {
+  const base = (options && options.base) || ''
+  /** @type {Slots} */
+  const slots = {}
+
+  /** @type {Record<string, any>} */
+  const assets = {}
+  for (let n = 0; n < (lottie.assets || []).length; n++) assets[lottie.assets[n].id] = lottie.assets[n]
+
+  const loading = loadImages(lottie.assets || [], base)
+  const hits = createHits()
+  const context = { assets, images: loading.images, fps: lottie.fr || 30, slots, hits, families: (options && options.families) || null }
+  const layers = compileLayers(lottie.layers, context)
+  /** @type {Record<string, import('./lottie.props.js').Evaluator> | null} */
+  let probes = null
+
+  return {
+    width: lottie.w || 0,
+    height: lottie.h || 0,
+    fps: lottie.fr || 30,
+    inPoint: lottie.ip || 0,
+    outPoint: lottie.op || 0,
+    slots,
+    hits,
+    ready: loading.ready,
+    probe(sid, frame) {
+      if (!probes) probes = collectProbes(lottie.layers, slots)
+      return probes[sid] ? probes[sid](frame) : undefined
+    },
+    draw(ctx, frame, matrix) {
+      hits.begin()
+      drawLayers(ctx, layers, context, frame, matrix, 1)
+    },
+  }
+}
+
+/**
+ * An evaluator for each slotted property in a layer list, by slot id; the
+ * first property to carry an id answers for it. Properties inside precomps
+ * run on their own clocks and are not probed.
+ *
+ * @param   {any[]}                                                 layers
+ * @param   {Slots}                                                 slots
+ * @returns {Record<string, import('./lottie.props.js').Evaluator>}
+ */
+function collectProbes(layers, slots) {
+  /** @type {Record<string, import('./lottie.props.js').Evaluator>} */
+  const found = {}
+  const visit = (/** @type {any} */ value) => {
+    if (!value || typeof value !== 'object') return
+    if (typeof value.sid === 'string' && value.k !== undefined && !found[value.sid]) found[value.sid] = evaluator(value, slots, undefined)
+    for (const key in value) visit(value[key])
+  }
+  visit(layers)
+  return found
+}
+
+/**
+ * The image assets, loading. lottie-roku embeds every image as a data URI,
+ * so a bundle's load without a request.
+ *
+ * @param   {any[]}                                                              assets
+ * @param   {string}                                                             base
+ * @returns {{ images: Record<string, HTMLImageElement>, ready: Promise<void> }}
+ */
+function loadImages(assets, base) {
+  /** @type {Record<string, HTMLImageElement>} */
+  const images = {}
+  const pending = []
+  for (let n = 0; n < assets.length; n++) {
+    const asset = assets[n]
+    const isImage = !asset.layers && typeof asset.p === 'string'
+    if (!isImage) continue
+
+    const image = new Image()
+    const source = asset.e === 1 || asset.p.indexOf('data:') === 0 ? asset.p : base + (asset.u || '') + asset.p
+    pending.push(new Promise((resolve) => {
+      // a missing image draws nothing, as it does in the reference players
+      image.onload = () => resolve(undefined)
+      image.onerror = () => resolve(undefined)
+    }))
+    image.src = source
+    images[asset.id] = image
+  }
+  return { images, ready: Promise.all(pending).then(() => undefined) }
+}