use-scroll-animate 10.2.0 → 10.4.0

package/dist/runtime/format-sprite.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"format-sprite.cjs","sources":["../../src/runtime/format-sprite.ts"],"sourcesContent":["/**\n * `motionary/runtime/format-sprite` (10.3) — sprite sheets and image\n * sequences on the runtime timeline (original implementation).\n *\n * - `parseSpriteSheet(json)` — TexturePacker JSON (hash and array), Aseprite\n *   JSON (hash and array, per-frame `duration`, `meta.frameTags` with\n *   `forward` / `reverse` / `pingpong` directions) and the generic\n *   `{ frames: [{ x, y, w, h }] }` shape; trimmed frames (`spriteSourceSize` /\n *   `sourceSize`) and rotated frames are supported.\n * - `gridSheet(cols, rows, w, h, n?)` — a plain grid sheet.\n * - `frameOrder(sheet, tag?)` — the playback order of a tag (pingpong without repeating the ends).\n * - `spritePlayer(target, sheet, image, { tag, fps })` — a runtime `Playable`\n *   that draws frames onto a `<canvas>` or moves the background of an element.\n * - `imageSequence('frame_{0001}.webp', { start, end })`, `preloadImages(urls)`,\n *   `sequencePlayer(canvas, images, { fps })` — numbered image sequences,\n *   scrubbable (`player.progress = p`, e.g. from a scroll scene).\n * Parsing works without the DOM (SSR / workers); players need a canvas / element.\n */\nimport { RUNTIME_VERSION, type RuntimeModule } from './registry';\nimport { Playable } from './tween';\n\nexport interface SpriteFrame {\n  name: string;\n  x: number;\n  y: number;\n  w: number;\n  h: number;\n  rotated: boolean;\n  /** Offset of the trimmed frame inside the original (untrimmed) size. */\n  offsetX: number;\n  offsetY: number;\n  sourceW: number;\n  sourceH: number;\n  /** ms (Aseprite), or undefined (use the player's fps). */\n  duration?: number;\n}\nexport interface SpriteTag {\n  name: string;\n  from: number;\n  to: number;\n  direction: 'forward' | 'reverse' | 'pingpong' | 'pingpong_reverse';\n}\nexport interface SpriteSheet {\n  frames: SpriteFrame[];\n  tags: SpriteTag[];\n  image?: string;\n  size?: { w: number; h: number };\n  format: 'texturepacker' | 'aseprite' | 'generic';\n}\n\nconst num = (v: unknown, d = 0) => (typeof v === 'number' && Number.isFinite(v) ? v : d);\n\n/** Parse a sprite-sheet JSON (object or string). */\nexport function parseSpriteSheet(input: string | Record<string, any>): SpriteSheet {\n  const j = typeof input === 'string' ? JSON.parse(input) : input;\n  if (!j || !j.frames) throw new Error('[motionary] format-sprite: no \"frames\" in the sprite sheet JSON');\n  const meta = j.meta || {};\n  const aseprite = /aseprite/i.test(meta.app || '') || Array.isArray(meta.frameTags);\n  const entries: [string, any][] = Array.isArray(j.frames) ? j.frames.map((f: any, i: number) => [f.filename ?? f.name ?? String(i), f]) : Object.entries(j.frames);\n  const frames = entries.map(([name, f]) => {\n    const r = f.frame || f;\n    const rotated = !!f.rotated;\n    const sss = f.spriteSourceSize || { x: 0, y: 0 };\n    const ss = f.sourceSize || { w: r.w, h: r.h };\n    const out: SpriteFrame = { name, x: num(r.x), y: num(r.y), w: num(r.w), h: num(r.h), rotated, offsetX: num(sss.x), offsetY: num(sss.y), sourceW: num(ss.w, r.w), sourceH: num(ss.h, r.h) };\n    if (typeof f.duration === 'number') out.duration = f.duration;\n    return out;\n  });\n  if (!Array.isArray(j.frames) && !aseprite) frames.sort((a, b) => a.name.localeCompare(b.name, undefined, { numeric: true }));\n  const tags: SpriteTag[] = (meta.frameTags || []).map((t: any) => ({ name: t.name, from: num(t.from), to: num(t.to), direction: t.direction || 'forward' }));\n  return { frames, tags, image: meta.image, size: meta.size, format: aseprite ? 'aseprite' : meta.app || j.meta ? 'texturepacker' : 'generic' };\n}\n\n/** A grid sheet: `cols × rows` cells of `w × h` (first `n` cells). */\nexport function gridSheet(cols: number, rows: number, w: number, h: number, n = cols * rows): SpriteSheet {\n  const frames: SpriteFrame[] = [];\n  for (let i = 0; i < n; i++) frames.push({ name: String(i), x: (i % cols) * w, y: Math.floor(i / cols) * h, w, h, rotated: false, offsetX: 0, offsetY: 0, sourceW: w, sourceH: h });\n  return { frames, tags: [], format: 'generic' };\n}\n\n/** Frame indices for a tag (or the whole sheet). */\nexport function frameOrder(sheet: SpriteSheet, tag?: string): number[] {\n  const t = tag ? sheet.tags.find((x) => x.name === tag) : undefined;\n  if (tag && !t) throw new Error(`[motionary] format-sprite: unknown tag \"${tag}\" (have: ${sheet.tags.map((x) => x.name).join(', ') || 'none'})`);\n  const from = t ? t.from : 0, to = t ? t.to : sheet.frames.length - 1;\n  const fwd = Array.from({ length: to - from + 1 }, (_, i) => from + i);\n  const dir = t?.direction || 'forward';\n  if (dir === 'reverse') return fwd.reverse();\n  if (dir === 'pingpong') return [...fwd, ...fwd.slice(1, -1).reverse()];\n  if (dir === 'pingpong_reverse') { const r = fwd.reverse(); return [...r, ...r.slice(1, -1).reverse()]; }\n  return fwd;\n}\n\n/** Draw one frame onto a 2D context at (dx, dy), honouring trim offsets and rotation. */\nexport function drawFrame(ctx: CanvasRenderingContext2D, image: CanvasImageSource, f: SpriteFrame, dx = 0, dy = 0, scale = 1): void {\n  ctx.save();\n  ctx.translate(dx + f.offsetX * scale, dy + f.offsetY * scale);\n  if (f.rotated) {\n    // TexturePacker stores rotated frames 90° clockwise: w/h are the unrotated size\n    ctx.rotate(-Math.PI / 2);\n    ctx.drawImage(image, f.x, f.y, f.h, f.w, -f.h * scale, 0, f.h * scale, f.w * scale);\n  } else ctx.drawImage(image, f.x, f.y, f.w, f.h, 0, 0, f.w * scale, f.h * scale);\n  ctx.restore();\n}\n\n/** Plays a list of frames (by index) with per-frame durations. */\nabstract class FramePlayable extends Playable {\n  protected times: number[] = [0];\n  protected order: number[] = [];\n  protected current = -1;\n  protected setOrder(order: number[], dur: (i: number) => number): void {\n    this.order = order;\n    this.times = [0];\n    for (const i of order) this.times.push(this.times[this.times.length - 1] + dur(i));\n  }\n  get duration(): number {\n    return this.times[this.times.length - 1];\n  }\n  /** Index into `order` at a local time. */\n  protected indexAt(ms: number): number {\n    let lo = 0, hi = this.order.length - 1;\n    while (lo < hi) {\n      const mid = (lo + hi + 1) >> 1;\n      if (this.times[mid] <= ms) lo = mid;\n      else hi = mid - 1;\n    }\n    return Math.min(lo, this.order.length - 1);\n  }\n  protected renderLocal(ms: number): void {\n    const k = this.order[this.indexAt(Math.min(ms, this.duration - 0.001))];\n    if (k === this.current) return;\n    this.current = k;\n    this.show(k);\n  }\n  /** The frame index currently shown. */\n  get frame(): number {\n    return this.current;\n  }\n  protected abstract show(index: number): void;\n}\n\nexport interface SpritePlayerOptions {\n  tag?: string;\n  /** Frames per second for frames without their own duration (default 12). */\n  fps?: number;\n  repeat?: number;\n  yoyo?: boolean;\n  paused?: boolean;\n  /** Canvas only: draw scale (default: fit the canvas width). */\n  scale?: number;\n}\n\nclass SpritePlayer extends FramePlayable {\n  constructor(private target: HTMLCanvasElement | HTMLElement, private sheet: SpriteSheet, private image: CanvasImageSource | string, o: SpritePlayerOptions) {\n    super({ repeat: o.repeat ?? -1, yoyo: o.yoyo });\n    const fps = o.fps || 12;\n    this.setOrder(frameOrder(sheet, o.tag), (i) => sheet.frames[i].duration ?? 1000 / fps);\n    this.scale = o.scale;\n    if (!o.paused) this.play();\n  }\n  private scale?: number;\n  protected show(i: number): void {\n    const f = this.sheet.frames[i];\n    const t = this.target as HTMLCanvasElement;\n    if (typeof t.getContext === 'function' && typeof this.image !== 'string') {\n      const ctx = t.getContext('2d');\n      if (!ctx) return;\n      const s = this.scale ?? t.width / (f.sourceW || f.w || 1);\n      ctx.clearRect(0, 0, t.width, t.height);\n      drawFrame(ctx, this.image, f, 0, 0, s);\n    } else {\n      const el = this.target as HTMLElement;\n      if (typeof this.image === 'string') el.style.backgroundImage = `url(\"${this.image}\")`;\n      el.style.backgroundPosition = `${-f.x}px ${-f.y}px`;\n      el.style.width = `${f.w}px`;\n      el.style.height = `${f.h}px`;\n      el.style.backgroundRepeat = 'no-repeat';\n    }\n  }\n}\n\n/** Play a sprite sheet on a canvas (image = loaded image / bitmap) or an element's background (image = URL). */\nexport function spritePlayer(target: HTMLCanvasElement | HTMLElement, sheet: SpriteSheet, image: CanvasImageSource | string, o: SpritePlayerOptions = {}): Playable & { readonly frame: number } {\n  return new SpritePlayer(target, sheet, image, o);\n}\n\n/** 'frame_{0001}.webp' + { start: 1, end: 3 } → frame_0001.webp, frame_0002.webp, frame_0003.webp ('{1}' = no padding). */\nexport function imageSequence(pattern: string, o: { start?: number; end: number; step?: number }): string[] {\n  const m = /\\{(\\d+)\\}/.exec(pattern);\n  if (!m) throw new Error('[motionary] format-sprite: the pattern needs a {0001}-style placeholder');\n  const pad = m[1].length;\n  const out: string[] = [];\n  for (let i = o.start ?? (+m[1] || 0); i <= o.end; i += o.step || 1) out.push(pattern.replace(m[0], String(i).padStart(pad, '0')));\n  return out;\n}\n\n/** Load images (resolves when all are decoded; rejects with the failing URL). */\nexport function preloadImages(urls: string[]): Promise<HTMLImageElement[]> {\n  return Promise.all(urls.map((u) => new Promise<HTMLImageElement>((ok, bad) => {\n    const img = new Image();\n    img.decoding = 'async';\n    img.onload = () => ok(img);\n    img.onerror = () => bad(new Error(`[motionary] format-sprite: could not load ${u}`));\n    img.src = u;\n  })));\n}\n\nclass SequencePlayer extends FramePlayable {\n  constructor(private canvas: HTMLCanvasElement, private images: CanvasImageSource[], o: { fps?: number; repeat?: number; yoyo?: boolean; paused?: boolean }) {\n    super({ repeat: o.repeat ?? 0, yoyo: o.yoyo });\n    const fps = o.fps || 24;\n    this.setOrder(images.map((_, i) => i), () => 1000 / fps);\n    if (!o.paused) this.play();\n  }\n  protected show(i: number): void {\n    const ctx = this.canvas.getContext('2d');\n    const img = this.images[i] as any;\n    if (!ctx || !img) return;\n    const w = this.canvas.width, h = this.canvas.height;\n    const iw = img.naturalWidth || img.width || w, ih = img.naturalHeight || img.height || h;\n    const s = Math.max(w / iw, h / ih); // cover\n    ctx.clearRect(0, 0, w, h);\n    ctx.drawImage(img, (w - iw * s) / 2, (h - ih * s) / 2, iw * s, ih * s);\n  }\n}\n\n/** Play (or scrub, via `progress`) an image sequence on a canvas, `object-fit: cover` style. */\nexport function sequencePlayer(canvas: HTMLCanvasElement, images: CanvasImageSource[], o: { fps?: number; repeat?: number; yoyo?: boolean; paused?: boolean } = {}): Playable & { readonly frame: number } {\n  return new SequencePlayer(canvas, images, o);\n}\n\nexport interface FormatSpriteApi {\n  parseSpriteSheet: typeof parseSpriteSheet;\n  gridSheet: typeof gridSheet;\n  frameOrder: typeof frameOrder;\n  drawFrame: typeof drawFrame;\n  spritePlayer: typeof spritePlayer;\n  imageSequence: typeof imageSequence;\n  preloadImages: typeof preloadImages;\n  sequencePlayer: typeof sequencePlayer;\n}\n\n/** The module object for `use(formatSprite)`. */\nexport const formatSprite: RuntimeModule<FormatSpriteApi> = { id: 'format-sprite', version: RUNTIME_VERSION, requires: ['core'], api: { parseSpriteSheet, gridSheet, frameOrder, drawFrame, spritePlayer, imageSequence, preloadImages, sequencePlayer } };\n"],"names":["Playable","RUNTIME_VERSION"],"mappings":";;;;;;;AAAA;;;;;;;;;;;;;;;;;AAiBG;AAiCH,MAAM,GAAG,GAAG,CAAC,CAAU,EAAE,CAAC,GAAG,CAAC,MAAM,OAAO,CAAC,KAAK,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAExF;AACM,SAAU,gBAAgB,CAAC,KAAmC,EAAA;AAClE,IAAA,MAAM,CAAC,GAAG,OAAO,KAAK,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,KAAK;AAC/D,IAAA,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM;AAAE,QAAA,MAAM,IAAI,KAAK,CAAC,iEAAiE,CAAC;AACvG,IAAA,MAAM,IAAI,GAAG,CAAC,CAAC,IAAI,IAAI,EAAE;IACzB,MAAM,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,EAAE,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC;IAClF,MAAM,OAAO,GAAoB,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAM,EAAE,CAAS,KAAK,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,IAAI,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;AACjK,IAAA,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,KAAI;AACvC,QAAA,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,IAAI,CAAC;AACtB,QAAA,MAAM,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO;AAC3B,QAAA,MAAM,GAAG,GAAG,CAAC,CAAC,gBAAgB,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AAChD,QAAA,MAAM,EAAE,GAAG,CAAC,CAAC,UAAU,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE;AAC7C,QAAA,MAAM,GAAG,GAAgB,EAAE,IAAI,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE;AAC1L,QAAA,IAAI,OAAO,CAAC,CAAC,QAAQ,KAAK,QAAQ;AAAE,YAAA,GAAG,CAAC,QAAQ,GAAG,CAAC,CAAC,QAAQ;AAC7D,QAAA,OAAO,GAAG;AACZ,IAAA,CAAC,CAAC;IACF,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ;AAAE,QAAA,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;IAC5H,MAAM,IAAI,GAAgB,CAAC,IAAI,CAAC,SAAS,IAAI,EAAE,EAAE,GAAG,CAAC,CAAC,CAAM,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC,SAAS,IAAI,SAAS,EAAE,CAAC,CAAC;AAC3J,IAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,GAAG,UAAU,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC,IAAI,GAAG,eAAe,GAAG,SAAS,EAAE;AAC/I;AAEA;AACM,SAAU,SAAS,CAAC,IAAY,EAAE,IAAY,EAAE,CAAS,EAAE,CAAS,EAAE,CAAC,GAAG,IAAI,GAAG,IAAI,EAAA;IACzF,MAAM,MAAM,GAAkB,EAAE;IAChC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE;QAAE,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,IAAI,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;IAClL,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE;AAChD;AAEA;AACM,SAAU,UAAU,CAAC,KAAkB,EAAE,GAAY,EAAA;IACzD,MAAM,CAAC,GAAG,GAAG,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,KAAK,GAAG,CAAC,GAAG,SAAS;IAClE,IAAI,GAAG,IAAI,CAAC,CAAC;AAAE,QAAA,MAAM,IAAI,KAAK,CAAC,CAAA,wCAAA,EAA2C,GAAG,CAAA,SAAA,EAAY,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,MAAM,CAAA,CAAA,CAAG,CAAC;AAC/I,IAAA,MAAM,IAAI,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,GAAG,CAAC,EAAE,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC;IACpE,MAAM,GAAG,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,GAAG,IAAI,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,IAAI,GAAG,CAAC,CAAC;AACrE,IAAA,MAAM,GAAG,GAAG,CAAC,EAAE,SAAS,IAAI,SAAS;IACrC,IAAI,GAAG,KAAK,SAAS;AAAE,QAAA,OAAO,GAAG,CAAC,OAAO,EAAE;IAC3C,IAAI,GAAG,KAAK,UAAU;AAAE,QAAA,OAAO,CAAC,GAAG,GAAG,EAAE,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC;AACtE,IAAA,IAAI,GAAG,KAAK,kBAAkB,EAAE;AAAE,QAAA,MAAM,CAAC,GAAG,GAAG,CAAC,OAAO,EAAE;AAAE,QAAA,OAAO,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC;IAAE;AACvG,IAAA,OAAO,GAAG;AACZ;AAEA;SACgB,SAAS,CAAC,GAA6B,EAAE,KAAwB,EAAE,CAAc,EAAE,EAAE,GAAG,CAAC,EAAE,EAAE,GAAG,CAAC,EAAE,KAAK,GAAG,CAAC,EAAA;IAC1H,GAAG,CAAC,IAAI,EAAE;AACV,IAAA,GAAG,CAAC,SAAS,CAAC,EAAE,GAAG,CAAC,CAAC,OAAO,GAAG,KAAK,EAAE,EAAE,GAAG,CAAC,CAAC,OAAO,GAAG,KAAK,CAAC;AAC7D,IAAA,IAAI,CAAC,CAAC,OAAO,EAAE;;QAEb,GAAG,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC;AACxB,QAAA,GAAG,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC;IACrF;;AAAO,QAAA,GAAG,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC;IAC/E,GAAG,CAAC,OAAO,EAAE;AACf;AAEA;AACA,MAAe,aAAc,SAAQA,cAAQ,CAAA;AAA7C,IAAA,WAAA,GAAA;;AACY,QAAA,IAAA,CAAA,KAAK,GAAa,CAAC,CAAC,CAAC;QACrB,IAAA,CAAA,KAAK,GAAa,EAAE;QACpB,IAAA,CAAA,OAAO,GAAG,EAAE;IA8BxB;IA7BY,QAAQ,CAAC,KAAe,EAAE,GAA0B,EAAA;AAC5D,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK;AAClB,QAAA,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;QAChB,KAAK,MAAM,CAAC,IAAI,KAAK;YAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC;IACpF;AACA,IAAA,IAAI,QAAQ,GAAA;AACV,QAAA,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;IAC1C;;AAEU,IAAA,OAAO,CAAC,EAAU,EAAA;AAC1B,QAAA,IAAI,EAAE,GAAG,CAAC,EAAE,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;AACtC,QAAA,OAAO,EAAE,GAAG,EAAE,EAAE;YACd,MAAM,GAAG,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,KAAK,CAAC;AAC9B,YAAA,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,EAAE;gBAAE,EAAE,GAAG,GAAG;;AAC9B,gBAAA,EAAE,GAAG,GAAG,GAAG,CAAC;QACnB;AACA,QAAA,OAAO,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;IAC5C;AACU,IAAA,WAAW,CAAC,EAAU,EAAA;QAC9B,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC;AACvE,QAAA,IAAI,CAAC,KAAK,IAAI,CAAC,OAAO;YAAE;AACxB,QAAA,IAAI,CAAC,OAAO,GAAG,CAAC;AAChB,QAAA,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IACd;;AAEA,IAAA,IAAI,KAAK,GAAA;QACP,OAAO,IAAI,CAAC,OAAO;IACrB;AAED;AAaD,MAAM,YAAa,SAAQ,aAAa,CAAA;AACtC,IAAA,WAAA,CAAoB,MAAuC,EAAU,KAAkB,EAAU,KAAiC,EAAE,CAAsB,EAAA;AACxJ,QAAA,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,MAAM,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC;QAD7B,IAAA,CAAA,MAAM,GAAN,MAAM;QAA2C,IAAA,CAAA,KAAK,GAAL,KAAK;QAAuB,IAAA,CAAA,KAAK,GAAL,KAAK;AAEpG,QAAA,MAAM,GAAG,GAAG,CAAC,CAAC,GAAG,IAAI,EAAE;AACvB,QAAA,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,QAAQ,IAAI,IAAI,GAAG,GAAG,CAAC;AACtF,QAAA,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK;QACpB,IAAI,CAAC,CAAC,CAAC,MAAM;YAAE,IAAI,CAAC,IAAI,EAAE;IAC5B;AAEU,IAAA,IAAI,CAAC,CAAS,EAAA;QACtB,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;AAC9B,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,MAA2B;AAC1C,QAAA,IAAI,OAAO,CAAC,CAAC,UAAU,KAAK,UAAU,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE;YACxE,MAAM,GAAG,GAAG,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC;AAC9B,YAAA,IAAI,CAAC,GAAG;gBAAE;YACV,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;AACzD,YAAA,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC;AACtC,YAAA,SAAS,CAAC,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;QACxC;aAAO;AACL,YAAA,MAAM,EAAE,GAAG,IAAI,CAAC,MAAqB;AACrC,YAAA,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ;gBAAE,EAAE,CAAC,KAAK,CAAC,eAAe,GAAG,QAAQ,IAAI,CAAC,KAAK,CAAA,EAAA,CAAI;AACrF,YAAA,EAAE,CAAC,KAAK,CAAC,kBAAkB,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI;YACnD,EAAE,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,CAAA,EAAA,CAAI;YAC3B,EAAE,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC,CAAC,CAAC,CAAA,EAAA,CAAI;AAC5B,YAAA,EAAE,CAAC,KAAK,CAAC,gBAAgB,GAAG,WAAW;QACzC;IACF;AACD;AAED;AACM,SAAU,YAAY,CAAC,MAAuC,EAAE,KAAkB,EAAE,KAAiC,EAAE,CAAA,GAAyB,EAAE,EAAA;IACtJ,OAAO,IAAI,YAAY,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;AAClD;AAEA;AACM,SAAU,aAAa,CAAC,OAAe,EAAE,CAAiD,EAAA;IAC9F,MAAM,CAAC,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC;AACnC,IAAA,IAAI,CAAC,CAAC;AAAE,QAAA,MAAM,IAAI,KAAK,CAAC,yEAAyE,CAAC;IAClG,MAAM,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM;IACvB,MAAM,GAAG,GAAa,EAAE;AACxB,IAAA,KAAK,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC;QAAE,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;AACjI,IAAA,OAAO,GAAG;AACZ;AAEA;AACM,SAAU,aAAa,CAAC,IAAc,EAAA;IAC1C,OAAO,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,IAAI,OAAO,CAAmB,CAAC,EAAE,EAAE,GAAG,KAAI;AAC3E,QAAA,MAAM,GAAG,GAAG,IAAI,KAAK,EAAE;AACvB,QAAA,GAAG,CAAC,QAAQ,GAAG,OAAO;QACtB,GAAG,CAAC,MAAM,GAAG,MAAM,EAAE,CAAC,GAAG,CAAC;AAC1B,QAAA,GAAG,CAAC,OAAO,GAAG,MAAM,GAAG,CAAC,IAAI,KAAK,CAAC,CAAA,0CAAA,EAA6C,CAAC,CAAA,CAAE,CAAC,CAAC;AACpF,QAAA,GAAG,CAAC,GAAG,GAAG,CAAC;IACb,CAAC,CAAC,CAAC,CAAC;AACN;AAEA,MAAM,cAAe,SAAQ,aAAa,CAAA;AACxC,IAAA,WAAA,CAAoB,MAAyB,EAAU,MAA2B,EAAE,CAAsE,EAAA;AACxJ,QAAA,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,MAAM,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC;QAD5B,IAAA,CAAA,MAAM,GAAN,MAAM;QAA6B,IAAA,CAAA,MAAM,GAAN,MAAM;AAE3D,QAAA,MAAM,GAAG,GAAG,CAAC,CAAC,GAAG,IAAI,EAAE;QACvB,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,MAAM,IAAI,GAAG,GAAG,CAAC;QACxD,IAAI,CAAC,CAAC,CAAC,MAAM;YAAE,IAAI,CAAC,IAAI,EAAE;IAC5B;AACU,IAAA,IAAI,CAAC,CAAS,EAAA;QACtB,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC;QACxC,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAQ;AACjC,QAAA,IAAI,CAAC,GAAG,IAAI,CAAC,GAAG;YAAE;AAClB,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM;QACnD,MAAM,EAAE,GAAG,GAAG,CAAC,YAAY,IAAI,GAAG,CAAC,KAAK,IAAI,CAAC,EAAE,EAAE,GAAG,GAAG,CAAC,aAAa,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC;AACxF,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC;QACnC,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AACzB,QAAA,GAAG,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,IAAI,CAAC,EAAE,EAAE,GAAG,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC;IACxE;AACD;AAED;AACM,SAAU,cAAc,CAAC,MAAyB,EAAE,MAA2B,EAAE,IAAyE,EAAE,EAAA;IAChK,OAAO,IAAI,cAAc,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;AAC9C;AAaA;AACO,MAAM,YAAY,GAAmC,EAAE,EAAE,EAAE,eAAe,EAAE,OAAO,EAAEC,wBAAe,EAAE,QAAQ,EAAE,CAAC,MAAM,CAAC,EAAE,GAAG,EAAE,EAAE,gBAAgB,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,cAAc,EAAE;;;;;;;;;;"}

package/dist/runtime/format-sprite.d.cts

@@ -0,0 +1,224 @@
+/** A runtime module: `{ id, version, api }`, registered with `use()`. */
+interface RuntimeModule<A = unknown> {
+    /** Module id: 'core', 'format-css', 'scroll', … (import path `motionary/runtime/<id>`). */
+    id: string;
+    version: string;
+    /** Other modules this one needs (registered first by `use()` callers). */
+    requires?: string[];
+    /** The module's public API (what `requireModule(id)` returns). */
+    api: A;
+    /** Optional one-time setup, called on first registration. */
+    setup?(registry: RuntimeRegistry): void;
+}
+interface RuntimeRegistry {
+    version: string;
+    modules: Map<string, RuntimeModule>;
+    /** Shared per-page state slots (the ticker lives here). */
+    slots: Record<string, unknown>;
+}
+
+/** Easing functions (t ∈ [0, 1] → progress). Original implementations of the standard Penner-style curves. */
+type Ease = (t: number) => number;
+
+type Target = object | Element;
+type Props = Record<string, number | string>;
+interface PlayOptions {
+    /** Delay before the first iteration, ms. */
+    delay?: number;
+    /** Extra iterations (-1 = forever). */
+    repeat?: number;
+    /** Alternate direction on every other iteration. */
+    yoyo?: boolean;
+    /** Start paused (`play()` to start). */
+    paused?: boolean;
+    onUpdate?: (progress: number) => void;
+    onComplete?: () => void;
+}
+interface TweenOptions extends PlayOptions {
+    to?: Props;
+    from?: Props;
+    /** ms (default 600). */
+    duration?: number;
+    ease?: string | Ease;
+    /** Delay added per target index (ms) when several targets are given. */
+    stagger?: number;
+}
+/** Common playback: delay, repeat, yoyo, direction, ticker attachment, promise. */
+declare abstract class Playable {
+    delay: number;
+    repeat: number;
+    yoyo: boolean;
+    /** Playback rate multiplier. */
+    timeScale: number;
+    onUpdate?: (progress: number) => void;
+    onComplete?: () => void;
+    protected _t: number;
+    private _dir;
+    private _off;
+    private _done;
+    private _resolve;
+    /** Resolves on completion (forward end, or start when reversed). */
+    finished: Promise<void>;
+    /** Set when owned by a timeline (then the ticker never drives it). */
+    parent: Timeline | null;
+    constructor(o: PlayOptions);
+    /** One iteration, ms. */
+    abstract get duration(): number;
+    /** Render at `ms` into one iteration. */
+    protected abstract renderLocal(ms: number, iterationEnded: boolean): void;
+    get totalDuration(): number;
+    get time(): number;
+    get progress(): number;
+    set progress(p: number);
+    get isActive(): boolean;
+    get reversed(): boolean;
+    /** Jump to `ms` (total time, including the delay) and render. */
+    seek(ms: number): this;
+    play(): this;
+    pause(): this;
+    /** Play backwards from the current time. */
+    reverse(): this;
+    restart(): this;
+    /** Stop and detach for good. */
+    kill(): void;
+    /** Promise-like: `await tween(...)`. */
+    then<R>(ok?: (v: void) => R, err?: (e: unknown) => R): Promise<R>;
+    private attach;
+    private advance;
+    protected complete(): void;
+}
+/** Position: ms number, '<' (start of previous), '>' (end of previous, default), '+=200' / '-=200' (relative to the end), 'label', 'label+=100', '<+=100'. */
+type Position = number | string;
+interface TimelineOptions extends PlayOptions {
+    /** Defaults merged into every `.to()`. */
+    defaults?: Omit<TweenOptions, 'to' | 'from'>;
+}
+/** A sequence of tweens, nested timelines and callbacks. */
+declare class Timeline extends Playable {
+    private children;
+    private labels;
+    private prevStart;
+    private prevEnd;
+    private defaults;
+    private lastLocal;
+    constructor(o?: TimelineOptions);
+    get duration(): number;
+    private resolve;
+    /** Add a tween, timeline or callback at a position. */
+    add(item: Playable | (() => void), position?: Position): this;
+    /** `tween(target, vars)` placed at `position` (stagger across several targets). */
+    to(target: Target | Target[] | ArrayLike<Target>, vars: TweenOptions, position?: Position): this;
+    call(fn: () => void, position?: Position): this;
+    label(name: string, position?: Position): this;
+    /** Time of a label, ms. */
+    labelTime(name: string): number | undefined;
+    remove(item: Playable): void;
+    /** Children in start order (callbacks excluded). */
+    getChildren(): Playable[];
+    protected renderLocal(ms: number): void;
+}
+
+/**
+ * `motionary/runtime/format-sprite` (10.3) — sprite sheets and image
+ * sequences on the runtime timeline (original implementation).
+ *
+ * - `parseSpriteSheet(json)` — TexturePacker JSON (hash and array), Aseprite
+ *   JSON (hash and array, per-frame `duration`, `meta.frameTags` with
+ *   `forward` / `reverse` / `pingpong` directions) and the generic
+ *   `{ frames: [{ x, y, w, h }] }` shape; trimmed frames (`spriteSourceSize` /
+ *   `sourceSize`) and rotated frames are supported.
+ * - `gridSheet(cols, rows, w, h, n?)` — a plain grid sheet.
+ * - `frameOrder(sheet, tag?)` — the playback order of a tag (pingpong without repeating the ends).
+ * - `spritePlayer(target, sheet, image, { tag, fps })` — a runtime `Playable`
+ *   that draws frames onto a `<canvas>` or moves the background of an element.
+ * - `imageSequence('frame_{0001}.webp', { start, end })`, `preloadImages(urls)`,
+ *   `sequencePlayer(canvas, images, { fps })` — numbered image sequences,
+ *   scrubbable (`player.progress = p`, e.g. from a scroll scene).
+ * Parsing works without the DOM (SSR / workers); players need a canvas / element.
+ */
+
+interface SpriteFrame {
+    name: string;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    rotated: boolean;
+    /** Offset of the trimmed frame inside the original (untrimmed) size. */
+    offsetX: number;
+    offsetY: number;
+    sourceW: number;
+    sourceH: number;
+    /** ms (Aseprite), or undefined (use the player's fps). */
+    duration?: number;
+}
+interface SpriteTag {
+    name: string;
+    from: number;
+    to: number;
+    direction: 'forward' | 'reverse' | 'pingpong' | 'pingpong_reverse';
+}
+interface SpriteSheet {
+    frames: SpriteFrame[];
+    tags: SpriteTag[];
+    image?: string;
+    size?: {
+        w: number;
+        h: number;
+    };
+    format: 'texturepacker' | 'aseprite' | 'generic';
+}
+/** Parse a sprite-sheet JSON (object or string). */
+declare function parseSpriteSheet(input: string | Record<string, any>): SpriteSheet;
+/** A grid sheet: `cols × rows` cells of `w × h` (first `n` cells). */
+declare function gridSheet(cols: number, rows: number, w: number, h: number, n?: number): SpriteSheet;
+/** Frame indices for a tag (or the whole sheet). */
+declare function frameOrder(sheet: SpriteSheet, tag?: string): number[];
+/** Draw one frame onto a 2D context at (dx, dy), honouring trim offsets and rotation. */
+declare function drawFrame(ctx: CanvasRenderingContext2D, image: CanvasImageSource, f: SpriteFrame, dx?: number, dy?: number, scale?: number): void;
+interface SpritePlayerOptions {
+    tag?: string;
+    /** Frames per second for frames without their own duration (default 12). */
+    fps?: number;
+    repeat?: number;
+    yoyo?: boolean;
+    paused?: boolean;
+    /** Canvas only: draw scale (default: fit the canvas width). */
+    scale?: number;
+}
+/** Play a sprite sheet on a canvas (image = loaded image / bitmap) or an element's background (image = URL). */
+declare function spritePlayer(target: HTMLCanvasElement | HTMLElement, sheet: SpriteSheet, image: CanvasImageSource | string, o?: SpritePlayerOptions): Playable & {
+    readonly frame: number;
+};
+/** 'frame_{0001}.webp' + { start: 1, end: 3 } → frame_0001.webp, frame_0002.webp, frame_0003.webp ('{1}' = no padding). */
+declare function imageSequence(pattern: string, o: {
+    start?: number;
+    end: number;
+    step?: number;
+}): string[];
+/** Load images (resolves when all are decoded; rejects with the failing URL). */
+declare function preloadImages(urls: string[]): Promise<HTMLImageElement[]>;
+/** Play (or scrub, via `progress`) an image sequence on a canvas, `object-fit: cover` style. */
+declare function sequencePlayer(canvas: HTMLCanvasElement, images: CanvasImageSource[], o?: {
+    fps?: number;
+    repeat?: number;
+    yoyo?: boolean;
+    paused?: boolean;
+}): Playable & {
+    readonly frame: number;
+};
+interface FormatSpriteApi {
+    parseSpriteSheet: typeof parseSpriteSheet;
+    gridSheet: typeof gridSheet;
+    frameOrder: typeof frameOrder;
+    drawFrame: typeof drawFrame;
+    spritePlayer: typeof spritePlayer;
+    imageSequence: typeof imageSequence;
+    preloadImages: typeof preloadImages;
+    sequencePlayer: typeof sequencePlayer;
+}
+/** The module object for `use(formatSprite)`. */
+declare const formatSprite: RuntimeModule<FormatSpriteApi>;
+
+export { drawFrame, formatSprite, frameOrder, gridSheet, imageSequence, parseSpriteSheet, preloadImages, sequencePlayer, spritePlayer };
+export type { FormatSpriteApi, SpriteFrame, SpritePlayerOptions, SpriteSheet, SpriteTag };

package/dist/runtime/format-sprite.d.ts

@@ -0,0 +1,224 @@
+/** A runtime module: `{ id, version, api }`, registered with `use()`. */
+interface RuntimeModule<A = unknown> {
+    /** Module id: 'core', 'format-css', 'scroll', … (import path `motionary/runtime/<id>`). */
+    id: string;
+    version: string;
+    /** Other modules this one needs (registered first by `use()` callers). */
+    requires?: string[];
+    /** The module's public API (what `requireModule(id)` returns). */
+    api: A;
+    /** Optional one-time setup, called on first registration. */
+    setup?(registry: RuntimeRegistry): void;
+}
+interface RuntimeRegistry {
+    version: string;
+    modules: Map<string, RuntimeModule>;
+    /** Shared per-page state slots (the ticker lives here). */
+    slots: Record<string, unknown>;
+}
+
+/** Easing functions (t ∈ [0, 1] → progress). Original implementations of the standard Penner-style curves. */
+type Ease = (t: number) => number;
+
+type Target = object | Element;
+type Props = Record<string, number | string>;
+interface PlayOptions {
+    /** Delay before the first iteration, ms. */
+    delay?: number;
+    /** Extra iterations (-1 = forever). */
+    repeat?: number;
+    /** Alternate direction on every other iteration. */
+    yoyo?: boolean;
+    /** Start paused (`play()` to start). */
+    paused?: boolean;
+    onUpdate?: (progress: number) => void;
+    onComplete?: () => void;
+}
+interface TweenOptions extends PlayOptions {
+    to?: Props;
+    from?: Props;
+    /** ms (default 600). */
+    duration?: number;
+    ease?: string | Ease;
+    /** Delay added per target index (ms) when several targets are given. */
+    stagger?: number;
+}
+/** Common playback: delay, repeat, yoyo, direction, ticker attachment, promise. */
+declare abstract class Playable {
+    delay: number;
+    repeat: number;
+    yoyo: boolean;
+    /** Playback rate multiplier. */
+    timeScale: number;
+    onUpdate?: (progress: number) => void;
+    onComplete?: () => void;
+    protected _t: number;
+    private _dir;
+    private _off;
+    private _done;
+    private _resolve;
+    /** Resolves on completion (forward end, or start when reversed). */
+    finished: Promise<void>;
+    /** Set when owned by a timeline (then the ticker never drives it). */
+    parent: Timeline | null;
+    constructor(o: PlayOptions);
+    /** One iteration, ms. */
+    abstract get duration(): number;
+    /** Render at `ms` into one iteration. */
+    protected abstract renderLocal(ms: number, iterationEnded: boolean): void;
+    get totalDuration(): number;
+    get time(): number;
+    get progress(): number;
+    set progress(p: number);
+    get isActive(): boolean;
+    get reversed(): boolean;
+    /** Jump to `ms` (total time, including the delay) and render. */
+    seek(ms: number): this;
+    play(): this;
+    pause(): this;
+    /** Play backwards from the current time. */
+    reverse(): this;
+    restart(): this;
+    /** Stop and detach for good. */
+    kill(): void;
+    /** Promise-like: `await tween(...)`. */
+    then<R>(ok?: (v: void) => R, err?: (e: unknown) => R): Promise<R>;
+    private attach;
+    private advance;
+    protected complete(): void;
+}
+/** Position: ms number, '<' (start of previous), '>' (end of previous, default), '+=200' / '-=200' (relative to the end), 'label', 'label+=100', '<+=100'. */
+type Position = number | string;
+interface TimelineOptions extends PlayOptions {
+    /** Defaults merged into every `.to()`. */
+    defaults?: Omit<TweenOptions, 'to' | 'from'>;
+}
+/** A sequence of tweens, nested timelines and callbacks. */
+declare class Timeline extends Playable {
+    private children;
+    private labels;
+    private prevStart;
+    private prevEnd;
+    private defaults;
+    private lastLocal;
+    constructor(o?: TimelineOptions);
+    get duration(): number;
+    private resolve;
+    /** Add a tween, timeline or callback at a position. */
+    add(item: Playable | (() => void), position?: Position): this;
+    /** `tween(target, vars)` placed at `position` (stagger across several targets). */
+    to(target: Target | Target[] | ArrayLike<Target>, vars: TweenOptions, position?: Position): this;
+    call(fn: () => void, position?: Position): this;
+    label(name: string, position?: Position): this;
+    /** Time of a label, ms. */
+    labelTime(name: string): number | undefined;
+    remove(item: Playable): void;
+    /** Children in start order (callbacks excluded). */
+    getChildren(): Playable[];
+    protected renderLocal(ms: number): void;
+}
+
+/**
+ * `motionary/runtime/format-sprite` (10.3) — sprite sheets and image
+ * sequences on the runtime timeline (original implementation).
+ *
+ * - `parseSpriteSheet(json)` — TexturePacker JSON (hash and array), Aseprite
+ *   JSON (hash and array, per-frame `duration`, `meta.frameTags` with
+ *   `forward` / `reverse` / `pingpong` directions) and the generic
+ *   `{ frames: [{ x, y, w, h }] }` shape; trimmed frames (`spriteSourceSize` /
+ *   `sourceSize`) and rotated frames are supported.
+ * - `gridSheet(cols, rows, w, h, n?)` — a plain grid sheet.
+ * - `frameOrder(sheet, tag?)` — the playback order of a tag (pingpong without repeating the ends).
+ * - `spritePlayer(target, sheet, image, { tag, fps })` — a runtime `Playable`
+ *   that draws frames onto a `<canvas>` or moves the background of an element.
+ * - `imageSequence('frame_{0001}.webp', { start, end })`, `preloadImages(urls)`,
+ *   `sequencePlayer(canvas, images, { fps })` — numbered image sequences,
+ *   scrubbable (`player.progress = p`, e.g. from a scroll scene).
+ * Parsing works without the DOM (SSR / workers); players need a canvas / element.
+ */
+
+interface SpriteFrame {
+    name: string;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    rotated: boolean;
+    /** Offset of the trimmed frame inside the original (untrimmed) size. */
+    offsetX: number;
+    offsetY: number;
+    sourceW: number;
+    sourceH: number;
+    /** ms (Aseprite), or undefined (use the player's fps). */
+    duration?: number;
+}
+interface SpriteTag {
+    name: string;
+    from: number;
+    to: number;
+    direction: 'forward' | 'reverse' | 'pingpong' | 'pingpong_reverse';
+}
+interface SpriteSheet {
+    frames: SpriteFrame[];
+    tags: SpriteTag[];
+    image?: string;
+    size?: {
+        w: number;
+        h: number;
+    };
+    format: 'texturepacker' | 'aseprite' | 'generic';
+}
+/** Parse a sprite-sheet JSON (object or string). */
+declare function parseSpriteSheet(input: string | Record<string, any>): SpriteSheet;
+/** A grid sheet: `cols × rows` cells of `w × h` (first `n` cells). */
+declare function gridSheet(cols: number, rows: number, w: number, h: number, n?: number): SpriteSheet;
+/** Frame indices for a tag (or the whole sheet). */
+declare function frameOrder(sheet: SpriteSheet, tag?: string): number[];
+/** Draw one frame onto a 2D context at (dx, dy), honouring trim offsets and rotation. */
+declare function drawFrame(ctx: CanvasRenderingContext2D, image: CanvasImageSource, f: SpriteFrame, dx?: number, dy?: number, scale?: number): void;
+interface SpritePlayerOptions {
+    tag?: string;
+    /** Frames per second for frames without their own duration (default 12). */
+    fps?: number;
+    repeat?: number;
+    yoyo?: boolean;
+    paused?: boolean;
+    /** Canvas only: draw scale (default: fit the canvas width). */
+    scale?: number;
+}
+/** Play a sprite sheet on a canvas (image = loaded image / bitmap) or an element's background (image = URL). */
+declare function spritePlayer(target: HTMLCanvasElement | HTMLElement, sheet: SpriteSheet, image: CanvasImageSource | string, o?: SpritePlayerOptions): Playable & {
+    readonly frame: number;
+};
+/** 'frame_{0001}.webp' + { start: 1, end: 3 } → frame_0001.webp, frame_0002.webp, frame_0003.webp ('{1}' = no padding). */
+declare function imageSequence(pattern: string, o: {
+    start?: number;
+    end: number;
+    step?: number;
+}): string[];
+/** Load images (resolves when all are decoded; rejects with the failing URL). */
+declare function preloadImages(urls: string[]): Promise<HTMLImageElement[]>;
+/** Play (or scrub, via `progress`) an image sequence on a canvas, `object-fit: cover` style. */
+declare function sequencePlayer(canvas: HTMLCanvasElement, images: CanvasImageSource[], o?: {
+    fps?: number;
+    repeat?: number;
+    yoyo?: boolean;
+    paused?: boolean;
+}): Playable & {
+    readonly frame: number;
+};
+interface FormatSpriteApi {
+    parseSpriteSheet: typeof parseSpriteSheet;
+    gridSheet: typeof gridSheet;
+    frameOrder: typeof frameOrder;
+    drawFrame: typeof drawFrame;
+    spritePlayer: typeof spritePlayer;
+    imageSequence: typeof imageSequence;
+    preloadImages: typeof preloadImages;
+    sequencePlayer: typeof sequencePlayer;
+}
+/** The module object for `use(formatSprite)`. */
+declare const formatSprite: RuntimeModule<FormatSpriteApi>;
+
+export { drawFrame, formatSprite, frameOrder, gridSheet, imageSequence, parseSpriteSheet, preloadImages, sequencePlayer, spritePlayer };
+export type { FormatSpriteApi, SpriteFrame, SpritePlayerOptions, SpriteSheet, SpriteTag };

package/dist/runtime/format-sprite.iife.js

@@ -0,0 +1,2 @@
+!function(e,t,r){"use strict";const s=(e,t=0)=>"number"==typeof e&&Number.isFinite(e)?e:t;function a(e){const t="string"==typeof e?JSON.parse(e):e;if(!t||!t.frames)throw new Error('[motionary] format-sprite: no "frames" in the sprite sheet JSON');const r=t.meta||{},a=/aseprite/i.test(r.app||"")||Array.isArray(r.frameTags),i=(Array.isArray(t.frames)?t.frames.map((e,t)=>[e.filename??e.name??String(t),e]):Object.entries(t.frames)).map(([e,t])=>{const r=t.frame||t,a=!!t.rotated,i=t.spriteSourceSize||{x:0,y:0},n=t.sourceSize||{w:r.w,h:r.h},o={name:e,x:s(r.x),y:s(r.y),w:s(r.w),h:s(r.h),rotated:a,offsetX:s(i.x),offsetY:s(i.y),sourceW:s(n.w,r.w),sourceH:s(n.h,r.h)};return"number"==typeof t.duration&&(o.duration=t.duration),o});Array.isArray(t.frames)||a||i.sort((e,t)=>e.name.localeCompare(t.name,void 0,{numeric:!0}));return{frames:i,tags:(r.frameTags||[]).map(e=>({name:e.name,from:s(e.from),to:s(e.to),direction:e.direction||"forward"})),image:r.image,size:r.size,format:a?"aseprite":r.app||t.meta?"texturepacker":"generic"}}function i(e,t,r,s,a=e*t){const i=[];for(let t=0;t<a;t++)i.push({name:String(t),x:t%e*r,y:Math.floor(t/e)*s,w:r,h:s,rotated:!1,offsetX:0,offsetY:0,sourceW:r,sourceH:s});return{frames:i,tags:[],format:"generic"}}function n(e,t){const r=t?e.tags.find(e=>e.name===t):void 0;if(t&&!r)throw new Error(`[motionary] format-sprite: unknown tag "${t}" (have: ${e.tags.map(e=>e.name).join(", ")||"none"})`);const s=r?r.from:0,a=r?r.to:e.frames.length-1,i=Array.from({length:a-s+1},(e,t)=>s+t),n=r?.direction||"forward";if("reverse"===n)return i.reverse();if("pingpong"===n)return[...i,...i.slice(1,-1).reverse()];if("pingpong_reverse"===n){const e=i.reverse();return[...e,...e.slice(1,-1).reverse()]}return i}function o(e,t,r,s=0,a=0,i=1){e.save(),e.translate(s+r.offsetX*i,a+r.offsetY*i),r.rotated?(e.rotate(-Math.PI/2),e.drawImage(t,r.x,r.y,r.h,r.w,-r.h*i,0,r.h*i,r.w*i)):e.drawImage(t,r.x,r.y,r.w,r.h,0,0,r.w*i,r.h*i),e.restore()}class h extends r.Playable{constructor(){super(...arguments),this.times=[0],this.order=[],this.current=-1}setOrder(e,t){this.order=e,this.times=[0];for(const r of e)this.times.push(this.times[this.times.length-1]+t(r))}get duration(){return this.times[this.times.length-1]}indexAt(e){let t=0,r=this.order.length-1;for(;t<r;){const s=t+r+1>>1;this.times[s]<=e?t=s:r=s-1}return Math.min(t,this.order.length-1)}renderLocal(e){const t=this.order[this.indexAt(Math.min(e,this.duration-.001))];t!==this.current&&(this.current=t,this.show(t))}get frame(){return this.current}}class m extends h{constructor(e,t,r,s){super({repeat:s.repeat??-1,yoyo:s.yoyo}),this.target=e,this.sheet=t,this.image=r;const a=s.fps||12;this.setOrder(n(t,s.tag),e=>t.frames[e].duration??1e3/a),this.scale=s.scale,s.paused||this.play()}show(e){const t=this.sheet.frames[e],r=this.target;if("function"==typeof r.getContext&&"string"!=typeof this.image){const e=r.getContext("2d");if(!e)return;const s=this.scale??r.width/(t.sourceW||t.w||1);e.clearRect(0,0,r.width,r.height),o(e,this.image,t,0,0,s)}else{const e=this.target;"string"==typeof this.image&&(e.style.backgroundImage=`url("${this.image}")`),e.style.backgroundPosition=`${-t.x}px ${-t.y}px`,e.style.width=`${t.w}px`,e.style.height=`${t.h}px`,e.style.backgroundRepeat="no-repeat"}}}function c(e,t,r,s={}){return new m(e,t,r,s)}function f(e,t){const r=/\{(\d+)\}/.exec(e);if(!r)throw new Error("[motionary] format-sprite: the pattern needs a {0001}-style placeholder");const s=r[1].length,a=[];for(let i=t.start??(+r[1]||0);i<=t.end;i+=t.step||1)a.push(e.replace(r[0],String(i).padStart(s,"0")));return a}function u(e){return Promise.all(e.map(e=>new Promise((t,r)=>{const s=new Image;s.decoding="async",s.onload=()=>t(s),s.onerror=()=>r(new Error(`[motionary] format-sprite: could not load ${e}`)),s.src=e})))}class p extends h{constructor(e,t,r){super({repeat:r.repeat??0,yoyo:r.yoyo}),this.canvas=e,this.images=t;const s=r.fps||24;this.setOrder(t.map((e,t)=>t),()=>1e3/s),r.paused||this.play()}show(e){const t=this.canvas.getContext("2d"),r=this.images[e];if(!t||!r)return;const s=this.canvas.width,a=this.canvas.height,i=r.naturalWidth||r.width||s,n=r.naturalHeight||r.height||a,o=Math.max(s/i,a/n);t.clearRect(0,0,s,a),t.drawImage(r,(s-i*o)/2,(a-n*o)/2,i*o,n*o)}}function d(e,t,r={}){return new p(e,t,r)}const g={id:"format-sprite",version:t.RUNTIME_VERSION,requires:["core"],api:{parseSpriteSheet:a,gridSheet:i,frameOrder:n,drawFrame:o,spritePlayer:c,imageSequence:f,preloadImages:u,sequencePlayer:d}};t.register(g),e.drawFrame=o,e.formatSprite=g,e.frameOrder=n,e.gridSheet=i,e.imageSequence=f,e.parseSpriteSheet=a,e.preloadImages=u,e.sequencePlayer=d,e.spritePlayer=c}(this.MotionaryRuntime=this.MotionaryRuntime||{},MotionaryRuntime,MotionaryRuntime);
+//# sourceMappingURL=format-sprite.iife.js.map

package/dist/runtime/format-sprite.iife.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"format-sprite.iife.js","sources":["../../src/runtime/format-sprite.ts","../../src/runtime/iife/format-sprite.ts"],"sourcesContent":["/**\n * `motionary/runtime/format-sprite` (10.3) — sprite sheets and image\n * sequences on the runtime timeline (original implementation).\n *\n * - `parseSpriteSheet(json)` — TexturePacker JSON (hash and array), Aseprite\n *   JSON (hash and array, per-frame `duration`, `meta.frameTags` with\n *   `forward` / `reverse` / `pingpong` directions) and the generic\n *   `{ frames: [{ x, y, w, h }] }` shape; trimmed frames (`spriteSourceSize` /\n *   `sourceSize`) and rotated frames are supported.\n * - `gridSheet(cols, rows, w, h, n?)` — a plain grid sheet.\n * - `frameOrder(sheet, tag?)` — the playback order of a tag (pingpong without repeating the ends).\n * - `spritePlayer(target, sheet, image, { tag, fps })` — a runtime `Playable`\n *   that draws frames onto a `<canvas>` or moves the background of an element.\n * - `imageSequence('frame_{0001}.webp', { start, end })`, `preloadImages(urls)`,\n *   `sequencePlayer(canvas, images, { fps })` — numbered image sequences,\n *   scrubbable (`player.progress = p`, e.g. from a scroll scene).\n * Parsing works without the DOM (SSR / workers); players need a canvas / element.\n */\nimport { RUNTIME_VERSION, type RuntimeModule } from './registry';\nimport { Playable } from './tween';\n\nexport interface SpriteFrame {\n  name: string;\n  x: number;\n  y: number;\n  w: number;\n  h: number;\n  rotated: boolean;\n  /** Offset of the trimmed frame inside the original (untrimmed) size. */\n  offsetX: number;\n  offsetY: number;\n  sourceW: number;\n  sourceH: number;\n  /** ms (Aseprite), or undefined (use the player's fps). */\n  duration?: number;\n}\nexport interface SpriteTag {\n  name: string;\n  from: number;\n  to: number;\n  direction: 'forward' | 'reverse' | 'pingpong' | 'pingpong_reverse';\n}\nexport interface SpriteSheet {\n  frames: SpriteFrame[];\n  tags: SpriteTag[];\n  image?: string;\n  size?: { w: number; h: number };\n  format: 'texturepacker' | 'aseprite' | 'generic';\n}\n\nconst num = (v: unknown, d = 0) => (typeof v === 'number' && Number.isFinite(v) ? v : d);\n\n/** Parse a sprite-sheet JSON (object or string). */\nexport function parseSpriteSheet(input: string | Record<string, any>): SpriteSheet {\n  const j = typeof input === 'string' ? JSON.parse(input) : input;\n  if (!j || !j.frames) throw new Error('[motionary] format-sprite: no \"frames\" in the sprite sheet JSON');\n  const meta = j.meta || {};\n  const aseprite = /aseprite/i.test(meta.app || '') || Array.isArray(meta.frameTags);\n  const entries: [string, any][] = Array.isArray(j.frames) ? j.frames.map((f: any, i: number) => [f.filename ?? f.name ?? String(i), f]) : Object.entries(j.frames);\n  const frames = entries.map(([name, f]) => {\n    const r = f.frame || f;\n    const rotated = !!f.rotated;\n    const sss = f.spriteSourceSize || { x: 0, y: 0 };\n    const ss = f.sourceSize || { w: r.w, h: r.h };\n    const out: SpriteFrame = { name, x: num(r.x), y: num(r.y), w: num(r.w), h: num(r.h), rotated, offsetX: num(sss.x), offsetY: num(sss.y), sourceW: num(ss.w, r.w), sourceH: num(ss.h, r.h) };\n    if (typeof f.duration === 'number') out.duration = f.duration;\n    return out;\n  });\n  if (!Array.isArray(j.frames) && !aseprite) frames.sort((a, b) => a.name.localeCompare(b.name, undefined, { numeric: true }));\n  const tags: SpriteTag[] = (meta.frameTags || []).map((t: any) => ({ name: t.name, from: num(t.from), to: num(t.to), direction: t.direction || 'forward' }));\n  return { frames, tags, image: meta.image, size: meta.size, format: aseprite ? 'aseprite' : meta.app || j.meta ? 'texturepacker' : 'generic' };\n}\n\n/** A grid sheet: `cols × rows` cells of `w × h` (first `n` cells). */\nexport function gridSheet(cols: number, rows: number, w: number, h: number, n = cols * rows): SpriteSheet {\n  const frames: SpriteFrame[] = [];\n  for (let i = 0; i < n; i++) frames.push({ name: String(i), x: (i % cols) * w, y: Math.floor(i / cols) * h, w, h, rotated: false, offsetX: 0, offsetY: 0, sourceW: w, sourceH: h });\n  return { frames, tags: [], format: 'generic' };\n}\n\n/** Frame indices for a tag (or the whole sheet). */\nexport function frameOrder(sheet: SpriteSheet, tag?: string): number[] {\n  const t = tag ? sheet.tags.find((x) => x.name === tag) : undefined;\n  if (tag && !t) throw new Error(`[motionary] format-sprite: unknown tag \"${tag}\" (have: ${sheet.tags.map((x) => x.name).join(', ') || 'none'})`);\n  const from = t ? t.from : 0, to = t ? t.to : sheet.frames.length - 1;\n  const fwd = Array.from({ length: to - from + 1 }, (_, i) => from + i);\n  const dir = t?.direction || 'forward';\n  if (dir === 'reverse') return fwd.reverse();\n  if (dir === 'pingpong') return [...fwd, ...fwd.slice(1, -1).reverse()];\n  if (dir === 'pingpong_reverse') { const r = fwd.reverse(); return [...r, ...r.slice(1, -1).reverse()]; }\n  return fwd;\n}\n\n/** Draw one frame onto a 2D context at (dx, dy), honouring trim offsets and rotation. */\nexport function drawFrame(ctx: CanvasRenderingContext2D, image: CanvasImageSource, f: SpriteFrame, dx = 0, dy = 0, scale = 1): void {\n  ctx.save();\n  ctx.translate(dx + f.offsetX * scale, dy + f.offsetY * scale);\n  if (f.rotated) {\n    // TexturePacker stores rotated frames 90° clockwise: w/h are the unrotated size\n    ctx.rotate(-Math.PI / 2);\n    ctx.drawImage(image, f.x, f.y, f.h, f.w, -f.h * scale, 0, f.h * scale, f.w * scale);\n  } else ctx.drawImage(image, f.x, f.y, f.w, f.h, 0, 0, f.w * scale, f.h * scale);\n  ctx.restore();\n}\n\n/** Plays a list of frames (by index) with per-frame durations. */\nabstract class FramePlayable extends Playable {\n  protected times: number[] = [0];\n  protected order: number[] = [];\n  protected current = -1;\n  protected setOrder(order: number[], dur: (i: number) => number): void {\n    this.order = order;\n    this.times = [0];\n    for (const i of order) this.times.push(this.times[this.times.length - 1] + dur(i));\n  }\n  get duration(): number {\n    return this.times[this.times.length - 1];\n  }\n  /** Index into `order` at a local time. */\n  protected indexAt(ms: number): number {\n    let lo = 0, hi = this.order.length - 1;\n    while (lo < hi) {\n      const mid = (lo + hi + 1) >> 1;\n      if (this.times[mid] <= ms) lo = mid;\n      else hi = mid - 1;\n    }\n    return Math.min(lo, this.order.length - 1);\n  }\n  protected renderLocal(ms: number): void {\n    const k = this.order[this.indexAt(Math.min(ms, this.duration - 0.001))];\n    if (k === this.current) return;\n    this.current = k;\n    this.show(k);\n  }\n  /** The frame index currently shown. */\n  get frame(): number {\n    return this.current;\n  }\n  protected abstract show(index: number): void;\n}\n\nexport interface SpritePlayerOptions {\n  tag?: string;\n  /** Frames per second for frames without their own duration (default 12). */\n  fps?: number;\n  repeat?: number;\n  yoyo?: boolean;\n  paused?: boolean;\n  /** Canvas only: draw scale (default: fit the canvas width). */\n  scale?: number;\n}\n\nclass SpritePlayer extends FramePlayable {\n  constructor(private target: HTMLCanvasElement | HTMLElement, private sheet: SpriteSheet, private image: CanvasImageSource | string, o: SpritePlayerOptions) {\n    super({ repeat: o.repeat ?? -1, yoyo: o.yoyo });\n    const fps = o.fps || 12;\n    this.setOrder(frameOrder(sheet, o.tag), (i) => sheet.frames[i].duration ?? 1000 / fps);\n    this.scale = o.scale;\n    if (!o.paused) this.play();\n  }\n  private scale?: number;\n  protected show(i: number): void {\n    const f = this.sheet.frames[i];\n    const t = this.target as HTMLCanvasElement;\n    if (typeof t.getContext === 'function' && typeof this.image !== 'string') {\n      const ctx = t.getContext('2d');\n      if (!ctx) return;\n      const s = this.scale ?? t.width / (f.sourceW || f.w || 1);\n      ctx.clearRect(0, 0, t.width, t.height);\n      drawFrame(ctx, this.image, f, 0, 0, s);\n    } else {\n      const el = this.target as HTMLElement;\n      if (typeof this.image === 'string') el.style.backgroundImage = `url(\"${this.image}\")`;\n      el.style.backgroundPosition = `${-f.x}px ${-f.y}px`;\n      el.style.width = `${f.w}px`;\n      el.style.height = `${f.h}px`;\n      el.style.backgroundRepeat = 'no-repeat';\n    }\n  }\n}\n\n/** Play a sprite sheet on a canvas (image = loaded image / bitmap) or an element's background (image = URL). */\nexport function spritePlayer(target: HTMLCanvasElement | HTMLElement, sheet: SpriteSheet, image: CanvasImageSource | string, o: SpritePlayerOptions = {}): Playable & { readonly frame: number } {\n  return new SpritePlayer(target, sheet, image, o);\n}\n\n/** 'frame_{0001}.webp' + { start: 1, end: 3 } → frame_0001.webp, frame_0002.webp, frame_0003.webp ('{1}' = no padding). */\nexport function imageSequence(pattern: string, o: { start?: number; end: number; step?: number }): string[] {\n  const m = /\\{(\\d+)\\}/.exec(pattern);\n  if (!m) throw new Error('[motionary] format-sprite: the pattern needs a {0001}-style placeholder');\n  const pad = m[1].length;\n  const out: string[] = [];\n  for (let i = o.start ?? (+m[1] || 0); i <= o.end; i += o.step || 1) out.push(pattern.replace(m[0], String(i).padStart(pad, '0')));\n  return out;\n}\n\n/** Load images (resolves when all are decoded; rejects with the failing URL). */\nexport function preloadImages(urls: string[]): Promise<HTMLImageElement[]> {\n  return Promise.all(urls.map((u) => new Promise<HTMLImageElement>((ok, bad) => {\n    const img = new Image();\n    img.decoding = 'async';\n    img.onload = () => ok(img);\n    img.onerror = () => bad(new Error(`[motionary] format-sprite: could not load ${u}`));\n    img.src = u;\n  })));\n}\n\nclass SequencePlayer extends FramePlayable {\n  constructor(private canvas: HTMLCanvasElement, private images: CanvasImageSource[], o: { fps?: number; repeat?: number; yoyo?: boolean; paused?: boolean }) {\n    super({ repeat: o.repeat ?? 0, yoyo: o.yoyo });\n    const fps = o.fps || 24;\n    this.setOrder(images.map((_, i) => i), () => 1000 / fps);\n    if (!o.paused) this.play();\n  }\n  protected show(i: number): void {\n    const ctx = this.canvas.getContext('2d');\n    const img = this.images[i] as any;\n    if (!ctx || !img) return;\n    const w = this.canvas.width, h = this.canvas.height;\n    const iw = img.naturalWidth || img.width || w, ih = img.naturalHeight || img.height || h;\n    const s = Math.max(w / iw, h / ih); // cover\n    ctx.clearRect(0, 0, w, h);\n    ctx.drawImage(img, (w - iw * s) / 2, (h - ih * s) / 2, iw * s, ih * s);\n  }\n}\n\n/** Play (or scrub, via `progress`) an image sequence on a canvas, `object-fit: cover` style. */\nexport function sequencePlayer(canvas: HTMLCanvasElement, images: CanvasImageSource[], o: { fps?: number; repeat?: number; yoyo?: boolean; paused?: boolean } = {}): Playable & { readonly frame: number } {\n  return new SequencePlayer(canvas, images, o);\n}\n\nexport interface FormatSpriteApi {\n  parseSpriteSheet: typeof parseSpriteSheet;\n  gridSheet: typeof gridSheet;\n  frameOrder: typeof frameOrder;\n  drawFrame: typeof drawFrame;\n  spritePlayer: typeof spritePlayer;\n  imageSequence: typeof imageSequence;\n  preloadImages: typeof preloadImages;\n  sequencePlayer: typeof sequencePlayer;\n}\n\n/** The module object for `use(formatSprite)`. */\nexport const formatSprite: RuntimeModule<FormatSpriteApi> = { id: 'format-sprite', version: RUNTIME_VERSION, requires: ['core'], api: { parseSpriteSheet, gridSheet, frameOrder, drawFrame, spritePlayer, imageSequence, preloadImages, sequencePlayer } };\n","// CDN build: load runtime.iife.js first, then this file → registers motionary/runtime/format-sprite and adds its API to window.MotionaryRuntime.\nimport { register } from '../registry';\nimport { formatSprite } from '../format-sprite';\nexport * from '../format-sprite';\nregister(formatSprite);\n"],"names":["num","v","d","Number","isFinite","parseSpriteSheet","input","j","JSON","parse","frames","Error","meta","aseprite","test","app","Array","isArray","frameTags","map","f","i","filename","name","String","Object","entries","r","frame","rotated","sss","spriteSourceSize","x","y","ss","sourceSize","w","h","out","offsetX","offsetY","sourceW","sourceH","duration","sort","a","b","localeCompare","undefined","numeric","tags","t","from","to","direction","image","size","format","gridSheet","cols","rows","n","push","Math","floor","frameOrder","sheet","tag","find","join","length","fwd","_","dir","reverse","slice","drawFrame","ctx","dx","dy","scale","save","translate","rotate","PI","drawImage","restore","FramePlayable","Playable","constructor","this","times","order","current","setOrder","dur","indexAt","ms","lo","hi","mid","min","renderLocal","k","show","SpritePlayer","target","o","super","repeat","yoyo","fps","paused","play","getContext","s","width","clearRect","height","el","style","backgroundImage","backgroundPosition","backgroundRepeat","spritePlayer","imageSequence","pattern","m","exec","pad","start","end","step","replace","padStart","preloadImages","urls","Promise","all","u","ok","bad","img","Image","decoding","onload","onerror","src","SequencePlayer","canvas","images","iw","naturalWidth","ih","naturalHeight","max","sequencePlayer","formatSprite","id","version","RUNTIME_VERSION","requires","api","register"],"mappings":"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"}