lecodes-sdk 1.0.0 → 1.1.0

package/src/animate/tween/Timeline.ts

@@ -0,0 +1,175 @@
+// `Timeline` (docs/timeline-plan.md §2.4): choreography over the keyframe core. Tracks on any
+// number of targets (UI elements, 3D / 2D nodes, lights, cameras) at absolute positions, JS calls
+// at times, labels, holds — one clock, one handle. Also the `animateTo` / `animateFrom` bag
+// builder every target class delegates to (`tweenBag`).
+
+import { TweenAnimation, type Animation } from "./Animation"
+import { makeValueTrack, type AnimateOptions, type AnimateValue } from "./animateValue"
+import { CLOCK_GAME, CLOCK_UI, bagProps, iterationsOf, makeTrack, type Track, type TweenMeta, type TweenSpec, type TweenTarget } from "./spec"
+
+/** Vector-valued props: an array value is ONE keyframe unless it is an array of vectors. */
+const VECTOR_PROPS = new Set(["position", "scale", "quaternion", "eulerAngles", "color"])
+
+const clockOf = (clock: TweenMeta["clock"], fallback: number): number =>
+  clock === "game" ? CLOCK_GAME : clock === "ui" ? CLOCK_UI : fallback
+
+/** @internal Build the tracks of one options bag on one target. `fromCurrent` = animateTo shape. */
+export const bagTracks = (target: TweenTarget, bag: Record<string, unknown>, atMs: number, fromCurrent: boolean): Track[] => {
+  const meta = bag as TweenMeta
+  const tracks: Track[] = []
+  for (const [prop, value] of bagProps(bag)) {
+    const track = makeTrack(target, prop, value, meta, atMs, fromCurrent, VECTOR_PROPS.has(prop))
+    if (track) tracks.push(track)
+  }
+  return tracks
+}
+
+/** @internal The `animateTo` / `animateFrom` implementation: one bag → one animation, played now. */
+export const tweenBag = (target: TweenTarget, bag: Record<string, unknown>, fromCurrent: boolean): Animation => {
+  const meta = bag as TweenMeta
+  const tracks = bagTracks(target, bag, 0, fromCurrent)
+  let durationMs = 0
+  for (const t of tracks) durationMs = Math.max(durationMs, t.atMs + t.durMs)
+  const spec: TweenSpec = {
+    clock: clockOf(meta.clock, target._tweenClock),
+    durationMs, delayMs: 0,
+    iterations: iterationsOf(meta.loop),
+    pingPong: meta.loopMode !== "restart",
+    rate: 1, tracks, calls: [],
+  }
+  return new TweenAnimation(spec).play()
+}
+
+export type TimelineOptions = {
+  /** `'ui'` (default) = wall time; `'game'` follows `Time.scale` and pauses with the game. */
+  clock?: "ui" | "game",
+  /** Repeat the whole timeline: `true` = forever, a number = cycles. */
+  loop?: boolean | number,
+  loopMode?: "restart" | "ping-pong",
+  /** Wait before the first play, ms. */
+  delay?: number,
+}
+
+/** Where a track goes: ms, a label, or `[label, offsetMs]`. Default = the current end (sequencing). */
+export type TimelinePosition = number | string | [string, number]
+
+export type TimelineAddOptions = {
+  at?: TimelinePosition,
+  /** With several targets: each starts this many ms after the previous one. */
+  stagger?: number,
+}
+
+/** A choreography: tracks on many targets at absolute times, JS calls, labels and holds, driven by
+ *  one clock. Build it once, `play()` on every entrance — `play()` restarts from t = 0 and the pose
+ *  at any time is fully defined by the tracks (the first keyframe of a track holds before it
+ *  starts, the last one after it ends). */
+export class TimelineImpl extends TweenAnimation {
+  private _labels = new Map<string, number>()
+  private _end = 0
+
+  constructor(options: TimelineOptions = {}) {
+    super({
+      clock: clockOf(options.clock, CLOCK_UI),
+      durationMs: 0,
+      delayMs: options.delay ?? 0,
+      iterations: iterationsOf(options.loop),
+      pingPong: options.loopMode !== "restart",
+      rate: 1, tracks: [], calls: [],
+    })
+  }
+
+  private _at(at: TimelinePosition | undefined): number {
+    if (at === undefined) return this._end
+    if (typeof at === "number") return at
+    const name = Array.isArray(at) ? at[0] : at
+    const offset = Array.isArray(at) ? at[1] : 0
+    const base = this._labels.get(name)
+    if (base === undefined) throw new Error(`Timeline: unknown label "${name}"`)
+    return base + offset
+  }
+
+  private _grow(endMs: number): void {
+    if (endMs > this._end) this._end = endMs
+    this._spec.durationMs = this._end
+  }
+
+  /** Animate `props` on one target or several (staggered), like `animateTo` — arrays are keyframes,
+   *  `duration` / `easing` / `times` / `commit` apply. The bag's `delay` shifts the track after `at`. */
+  add(target: TweenTarget | TweenTarget[], props: Record<string, unknown> & TweenMeta, options: TimelineAddOptions = {}): this {
+    const at = this._at(options.at)
+    const targets = Array.isArray(target) ? target : [target]
+    const stagger = options.stagger ?? 0
+    targets.forEach((t, i) => {
+      const tracks = bagTracks(t, props, at + i * stagger, true)
+      for (const tr of tracks) { this._spec.tracks.push(tr); this._grow(tr.atMs + tr.durMs) }
+    })
+    return this
+  }
+
+  /** Like `add` with the `animateFrom` shape: the target's own state is the implicit last keyframe. */
+  addFrom(target: TweenTarget | TweenTarget[], props: Record<string, unknown> & TweenMeta, options: TimelineAddOptions = {}): this {
+    const at = this._at(options.at)
+    const targets = Array.isArray(target) ? target : [target]
+    const stagger = options.stagger ?? 0
+    targets.forEach((t, i) => {
+      const tracks = bagTracks(t, props, at + i * stagger, false)
+      for (const tr of tracks) { this._spec.tracks.push(tr); this._grow(tr.atMs + tr.durMs) }
+    })
+    return this
+  }
+
+  /** A free-value track (see the `animate()` global): the host evaluates it and calls `onUpdate`
+   *  every frame with the value. */
+  animate<T extends AnimateValue>(options: AnimateOptions<T>, at?: TimelinePosition): this {
+    const { track, deliver, slot } = makeValueTrack(options, this._at(at))
+    this._values.set(slot, deliver)
+    this._spec.tracks.push(track)
+    this._grow(track.atMs + track.durMs)
+    return this
+  }
+
+  /** Call `fn` when playback crosses `at` (forward or backward), in time order, always before
+   *  finish, never from a previous run. */
+  call(at: TimelinePosition, fn: () => void): this {
+    const t = this._at(at)
+    this._spec.calls.push(t)
+    this._calls.push(fn)
+    this._grow(t)
+    return this
+  }
+
+  /** Name a time — for `at`, `seek` and callers (`tl.labels.landed`). Default = the current end. */
+  label(name: string, at?: TimelinePosition): this {
+    this._labels.set(name, this._at(at))
+    return this
+  }
+
+  /** Named times, ms. */
+  get labels(): Record<string, number> {
+    const o: Record<string, number> = {}
+    for (const [k, v] of this._labels) o[k] = v
+    return o
+  }
+
+  /** Extend the timeline with stillness after its current end. */
+  hold(ms: number): this {
+    this._grow(this._end + Math.max(0, ms))
+    return this
+  }
+
+  /** The current end, ms (tracks, calls and holds). */
+  get end(): number { return this._end }
+
+  /** `seek` also accepts a label. */
+  override seek(at: number | string): this {
+    return super.seek(typeof at === "string" ? this._at(at) : at)
+  }
+}
+
+/** The timeline handle type (see {@link TimelineImpl} for the members). */
+export type Timeline = TimelineImpl
+
+/** Create a timeline — `Timeline()` / `Timeline({ clock: 'game', loop: true })`. */
+export function Timeline(options?: TimelineOptions): Timeline {
+  return new TimelineImpl(options)
+}

package/src/animate/tween/animateValue.ts

@@ -0,0 +1,100 @@
+// `animate()` — "animate a VALUE, I apply it" (docs/timeline-plan.md): the free-value tween for
+// anything without a native writer (a material parameter, a volume, a number the Canvas draws).
+// Since 2026-09-14 it runs on the keyframe core like everything else: a VALUE-domain track the host
+// evaluates natively and hands back to JS once per frame, the same easing vocabulary, keyframes,
+// loops and clocks, and the same `Animation` handle. `Timeline.animate` puts one into a timeline.
+
+import { TweenAnimation, type Animation } from "./Animation"
+import { Mat4 } from "../../math/mat4"
+import type { Vec2Like, Vec3Like } from "../../math/vec"
+import type { QuatLike } from "../../math/quat"
+import type { Mat4Like } from "../../math/mat4"
+import type { ColorInput } from "../../core/color"
+import {
+  CLOCK_GAME, CLOCK_UI, DOM_VALUE, KIND_FLOAT, KIND_MAT4, DEFAULT_DURATION_MS, easingFor, iterationsOf, lanesOf, valueValue,
+  type Keyframe, type Track, type TweenChannel, type TweenMeta, type TweenSpec, type TweenTarget,
+} from "./spec"
+
+/** What `animate()` tweens: a number, a color (string / packed / rgb(a) array — delivered as rgba
+ *  0..1), a 2 / 3-vector, a quaternion (slerp), or a 4x4 matrix (position / rotation / scale). */
+export type AnimateValue = number | string | Vec2Like | Vec3Like | QuatLike | Mat4Like | ColorInput
+
+/** `onUpdate` receives a number for a number; every other kind arrives as the SAME `Float32Array`
+ *  every frame (overwritten in place — copy it if you keep it). A matrix is the 16 floats. */
+export type AnimateOut<T> = T extends number ? number : Float32Array
+
+export type AnimateOptions<T extends AnimateValue> = Omit<TweenMeta, "commit" | "layer"> & {
+  /** Start value (required unless `values` is given). */
+  from?: T,
+  /** End value. */
+  to?: T,
+  /** Keyframes instead of from/to (offsets via `times`). */
+  values?: T[],
+  onUpdate(value: AnimateOut<T>): void,
+  /** After the last frame of a run that reached its end (not on cancel). */
+  onComplete?(): void,
+}
+
+/** @internal Deliverers turn the host's lanes into the `onUpdate` argument without allocating. */
+const deliverer = (kind: number, lanes: number, onUpdate: (v: any) => void): ((l: Float32Array) => void) => {
+  if (kind === KIND_FLOAT) return (l) => onUpdate(l[0])
+  if (kind === KIND_MAT4) {
+    const out = new Float32Array(16)
+    return (l) => {
+      const m = Mat4.compose([l[0]!, l[1]!, l[2]!], [l[3]!, l[4]!, l[5]!, l[6]!], [l[7]!, l[8]!, l[9]!]).m
+      for (let i = 0; i < 16; i++) out[i] = m[i]!
+      onUpdate(out)
+    }
+  }
+  const out = new Float32Array(lanes)
+  return (l) => { for (let i = 0; i < lanes; i++) out[i] = l[i]!; onUpdate(out) }
+}
+
+/** VALUE slots are unique per world: the host addresses a value track by (animation, slot), and the
+ *  evaluator must never see two animations naming the same slot (a channel is owned by the newest
+ *  animation that names it — values have no shared state to own). */
+let nextSlot = 0
+
+/** @internal Build a VALUE track from animate options. Returns the track, its deliverer and its slot. */
+export const makeValueTrack = (o: AnimateOptions<any>, atMs: number): { track: Track, deliver: (l: Float32Array) => void, slot: number } => {
+  const slot = ++nextSlot
+  const raw: unknown[] = o.values ?? (o.from !== undefined && o.to !== undefined ? [o.from, o.to] : [])
+  if (raw.length < 1) throw new Error("animate: give `from` + `to`, or `values`")
+  const norm = raw.map((v) => valueValue(v))
+  if (norm.some((n) => n === null)) throw new Error("animate: a value is not a number, color, vector, quaternion or matrix")
+  const kind = norm[0]!.kind
+  if (norm.some((n) => n!.kind !== kind)) throw new Error("animate: every value must be the same kind")
+  const lanes = lanesOf(kind)
+  const easing = easingFor(o.easing, "value")
+  const keys: Keyframe[] = norm.map((n, i) => ({
+    t: o.times && o.times.length === norm.length ? o.times[i]! : norm.length === 1 ? 1 : i / (norm.length - 1),
+    easing,
+    value: { lanes: (n as { lanes: number[] }).lanes },
+    raw: raw[i],
+  }))
+  const channel: TweenChannel = { domain: DOM_VALUE, id: () => slot, value: valueValue }
+  const target: TweenTarget = { _tweenClock: CLOCK_UI, _tweenChannel: () => channel }
+  const track: Track = {
+    target, prop: "value", channel, kind, lanes,
+    atMs: atMs + (o.delay ?? 0), durMs: Math.max(0, o.duration ?? DEFAULT_DURATION_MS),
+    commit: false, keys,
+  }
+  return { track, deliver: deliverer(kind, lanes, o.onUpdate), slot }
+}
+
+/** Tween a free value and apply it yourself in `onUpdate` — the primitive for anything without a
+ *  native channel (material params, volumes, numbers a Canvas draws). Same easing / keyframes /
+ *  `loop` / `clock` as `animateTo`; returns the {@link Animation} handle. Default clock: `'ui'`. */
+export const animate = <T extends AnimateValue>(options: AnimateOptions<T>): Animation => {
+  const { track, deliver, slot } = makeValueTrack(options, 0)
+  const spec: TweenSpec = {
+    clock: options.clock === "game" ? CLOCK_GAME : CLOCK_UI,
+    durationMs: track.atMs + track.durMs, delayMs: 0,
+    iterations: iterationsOf(options.loop), pingPong: options.loopMode !== "restart",
+    rate: 1, tracks: [track], calls: [],
+  }
+  const a = new TweenAnimation(spec)
+  a._values.set(slot, deliver)
+  if (options.onComplete) a.onFinish((done) => { if (done) options.onComplete!() })
+  return a.play()
+}

package/src/animate/tween/easing.ts

@@ -0,0 +1,172 @@
+// Easing vocabulary of the keyframe animation core (docs/timeline-plan.md §2.1). Every form the
+// options bag accepts is normalized here into an `EasingSpec` the native evaluator (creator-tween)
+// understands: linear, a NAMED curve (evaluated natively by id — the formulas below are the twin,
+// used for the old-host path and tests), a cubic bezier, `steps(n)`, or a sampled TABLE for an
+// arbitrary `Easing` function (65 points, linear between them — the only way a JS function can
+// cross the bridge).
+
+import type { Easing } from "../easings"
+
+export const EASE_LINEAR = 0
+export const EASE_NAMED = 1
+export const EASE_BEZIER = 2
+export const EASE_STEPS = 3
+export const EASE_TABLE = 4
+
+/** Samples per table (t = i / 64). Interpolation error for the smooth built-ins is < 1e-3. */
+export const EASE_TABLE_SIZE = 65
+
+export type EasingSpec = {
+  kind: number,
+  /** kind-specific parameters: NAMED [id], BEZIER [x1, y1, x2, y2], STEPS [n, jumpAtStart], TABLE [tableIndex] */
+  p: [number, number, number, number],
+  /** TABLE only — the samples, appended to the blob's table section by the builder. */
+  table?: Float32Array,
+}
+
+/** A curve in the options bag: a name, `"cubic-bezier(x1,y1,x2,y2)"`, `"steps(n)"`, a bezier tuple,
+ *  or any `Easing` function. */
+export type EasingInput = string | readonly [number, number, number, number] | Easing
+
+// ---- named curves (ids are the native contract — append, never renumber) ------------------------
+
+const c1 = 1.70158
+const c2 = c1 * 1.525
+const c3 = c1 + 1
+const c4 = (2 * Math.PI) / 3
+const c5 = (2 * Math.PI) / 4.5
+
+const outBounce = (x: number): number => {
+  const n1 = 7.5625, d1 = 2.75
+  if (x < 1 / d1) return n1 * x * x
+  if (x < 2 / d1) return n1 * (x -= 1.5 / d1) * x + 0.75
+  if (x < 2.5 / d1) return n1 * (x -= 2.25 / d1) * x + 0.9375
+  return n1 * (x -= 2.625 / d1) * x + 0.984375
+}
+
+/** id → (name, formula). The formulas are the standard easings.net set; creator-tween's
+ *  `ctweenEaseNamed` implements the same list by id. */
+export const NAMED_EASINGS: ReadonlyArray<readonly [string, Easing]> = [
+  ["linear", (x) => x],                                                              // 0
+  ["inSine", (x) => 1 - Math.cos((x * Math.PI) / 2)],                                // 1
+  ["outSine", (x) => Math.sin((x * Math.PI) / 2)],                                   // 2
+  ["inOutSine", (x) => -(Math.cos(Math.PI * x) - 1) / 2],                            // 3
+  ["inQuad", (x) => x * x],                                                          // 4
+  ["outQuad", (x) => 1 - (1 - x) * (1 - x)],                                         // 5
+  ["inOutQuad", (x) => (x < 0.5 ? 2 * x * x : 1 - (-2 * x + 2) ** 2 / 2)],          // 6
+  ["inCubic", (x) => x * x * x],                                                     // 7
+  ["outCubic", (x) => 1 - (1 - x) ** 3],                                             // 8
+  ["inOutCubic", (x) => (x < 0.5 ? 4 * x * x * x : 1 - (-2 * x + 2) ** 3 / 2)],     // 9
+  ["inQuart", (x) => x ** 4],                                                        // 10
+  ["outQuart", (x) => 1 - (1 - x) ** 4],                                             // 11
+  ["inOutQuart", (x) => (x < 0.5 ? 8 * x ** 4 : 1 - (-2 * x + 2) ** 4 / 2)],        // 12
+  ["inExpo", (x) => (x === 0 ? 0 : 2 ** (10 * x - 10))],                             // 13
+  ["outExpo", (x) => (x === 1 ? 1 : 1 - 2 ** (-10 * x))],                            // 14
+  ["inOutExpo", (x) => (x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ? 2 ** (20 * x - 10) / 2 : (2 - 2 ** (-20 * x + 10)) / 2)], // 15
+  ["inCirc", (x) => 1 - Math.sqrt(1 - x * x)],                                       // 16
+  ["outCirc", (x) => Math.sqrt(1 - (x - 1) ** 2)],                                   // 17
+  ["inOutCirc", (x) => (x < 0.5 ? (1 - Math.sqrt(1 - (2 * x) ** 2)) / 2 : (Math.sqrt(1 - (-2 * x + 2) ** 2) + 1) / 2)], // 18
+  ["inBack", (x) => c3 * x * x * x - c1 * x * x],                                    // 19
+  ["outBack", (x) => 1 + c3 * (x - 1) ** 3 + c1 * (x - 1) ** 2],                     // 20
+  ["inOutBack", (x) => (x < 0.5 ? ((2 * x) ** 2 * ((c2 + 1) * 2 * x - c2)) / 2 : ((2 * x - 2) ** 2 * ((c2 + 1) * (x * 2 - 2) + c2) + 2) / 2)], // 21
+  ["inElastic", (x) => (x === 0 ? 0 : x === 1 ? 1 : -(2 ** (10 * x - 10)) * Math.sin((x * 10 - 10.75) * c4))], // 22
+  ["outElastic", (x) => (x === 0 ? 0 : x === 1 ? 1 : 2 ** (-10 * x) * Math.sin((x * 10 - 0.75) * c4) + 1)],   // 23
+  ["inOutElastic", (x) => (x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ? -(2 ** (20 * x - 10) * Math.sin((20 * x - 11.125) * c5)) / 2 : (2 ** (-20 * x + 10) * Math.sin((20 * x - 11.125) * c5)) / 2 + 1)], // 24
+  ["inBounce", (x) => 1 - outBounce(1 - x)],                                         // 25
+  ["outBounce", outBounce],                                                          // 26
+  ["inOutBounce", (x) => (x < 0.5 ? (1 - outBounce(1 - 2 * x)) / 2 : (1 + outBounce(2 * x - 1)) / 2)], // 27
+  ["smoothstep", (x) => x * x * (3 - 2 * x)],                                        // 28 — the $class / onPressed default
+]
+
+/** Short spellings → canonical names. `in`/`out`/`inOut` are the quadratics, matching the SDK's
+ *  `easeIn`/`easeOut`/`easeInOut` functions. */
+const ALIASES: Record<string, string> = {
+  in: "inQuad", out: "outQuad", inOut: "inOutQuad",
+  easeIn: "inQuad", easeOut: "outQuad", easeInOut: "inOutQuad",
+  "ease-in": "inQuad", "ease-out": "outQuad", "ease-in-out": "inOutQuad",
+}
+
+const namedId = (name: string): number => {
+  const canon = ALIASES[name] ?? name
+  for (let i = 0; i < NAMED_EASINGS.length; i++) if (NAMED_EASINGS[i]![0] === canon) return i
+  return -1
+}
+
+/** The CSS `ease` curve — what a bare `"ease"` means. */
+const CSS_EASE: [number, number, number, number] = [0.25, 0.1, 0.25, 1]
+
+const LINEAR: EasingSpec = { kind: EASE_LINEAR, p: [0, 0, 0, 0] }
+
+/** Sample an `Easing` function into a table. Endpoints are forced exact so a curve that is
+ *  numerically 0.9999 at 1 still lands on the keyframe. */
+export const sampleEasing = (fn: Easing): Float32Array => {
+  const t = new Float32Array(EASE_TABLE_SIZE)
+  for (let i = 0; i < EASE_TABLE_SIZE; i++) t[i] = fn(i / (EASE_TABLE_SIZE - 1))
+  t[0] = 0
+  t[EASE_TABLE_SIZE - 1] = 1
+  return t
+}
+
+/** Normalize one easing input. Unknown strings fall back to linear with a console warning (a typo
+ *  should be visible, not a silent snap). */
+export const parseEasing = (input: EasingInput | undefined): EasingSpec => {
+  if (input === undefined) return LINEAR
+  if (typeof input === "function") return { kind: EASE_TABLE, p: [0, 0, 0, 0], table: sampleEasing(input) }
+  if (Array.isArray(input)) {
+    const [x1, y1, x2, y2] = input as readonly number[]
+    return { kind: EASE_BEZIER, p: [x1!, y1!, x2!, y2!] }
+  }
+  const s = (input as string).trim()
+  if (s === "linear") return LINEAR
+  if (s === "ease") return { kind: EASE_BEZIER, p: CSS_EASE }
+  if (s === "steps") return { kind: EASE_STEPS, p: [1, 0, 0, 0] }
+  let m = /^steps\(\s*(\d+)\s*(?:,\s*(start|end|jump-start|jump-end)\s*)?\)$/.exec(s)
+  if (m) return { kind: EASE_STEPS, p: [Math.max(1, parseInt(m[1]!, 10)), m[2] === "start" || m[2] === "jump-start" ? 1 : 0, 0, 0] }
+  m = /^cubic-bezier\(\s*([-\d.e]+)\s*,\s*([-\d.e]+)\s*,\s*([-\d.e]+)\s*,\s*([-\d.e]+)\s*\)$/.exec(s)
+  if (m) return { kind: EASE_BEZIER, p: [parseFloat(m[1]!), parseFloat(m[2]!), parseFloat(m[3]!), parseFloat(m[4]!)] }
+  const id = namedId(s)
+  if (id === 0) return LINEAR
+  if (id > 0) return { kind: EASE_NAMED, p: [id, 0, 0, 0] }
+  console.warn(`[tween] unknown easing "${s}" — using linear`)
+  return LINEAR
+}
+
+// ---- evaluation twin (old-host path + tests) ---------------------------------------------------
+
+const bezierY = (x: number, x1: number, y1: number, x2: number, y2: number): number => {
+  // Newton on the x polynomial, then y at that t — the same method creator-tween uses.
+  const ax = 1 - 3 * x2 + 3 * x1, bx = 3 * x2 - 6 * x1, cx = 3 * x1
+  const ay = 1 - 3 * y2 + 3 * y1, by = 3 * y2 - 6 * y1, cy = 3 * y1
+  let t = x
+  for (let i = 0; i < 8; i++) {
+    const xt = ((ax * t + bx) * t + cx) * t - x
+    const dx = (3 * ax * t + 2 * bx) * t + cx
+    if (Math.abs(xt) < 1e-6) break
+    if (Math.abs(dx) < 1e-6) break
+    t -= xt / dx
+  }
+  t = Math.min(1, Math.max(0, t))
+  return ((ay * t + by) * t + cy) * t
+}
+
+/** Evaluate an `EasingSpec` at `u` ∈ [0, 1] — the JS twin of `ctweenEase`. */
+export const evalEasing = (e: EasingSpec, u: number): number => {
+  if (u <= 0) return e.kind === EASE_STEPS && e.p[1] === 1 ? 1 / e.p[0] : 0
+  if (u >= 1) return 1
+  switch (e.kind) {
+    case EASE_NAMED: return NAMED_EASINGS[e.p[0]]![1](u)
+    case EASE_BEZIER: return bezierY(u, e.p[0], e.p[1], e.p[2], e.p[3])
+    case EASE_STEPS: {
+      const n = e.p[0]
+      return e.p[1] === 1 ? Math.min(1, Math.ceil(u * n) / n) : Math.floor(u * n) / n
+    }
+    case EASE_TABLE: {
+      const t = e.table!
+      const f = u * (EASE_TABLE_SIZE - 1)
+      const i = Math.floor(f)
+      const a = t[i]!, b = t[Math.min(i + 1, EASE_TABLE_SIZE - 1)]!
+      return a + (b - a) * (f - i)
+    }
+    default: return u
+  }
+}