@flatkit/player 0.1.0

package/dist/chunk-BXKJAHHO.js

@@ -0,0 +1,1681 @@
+// src/drawScene.ts
+import { regionBBox } from "@flatkit/engine/bbox";
+import { regionPaint } from "@flatkit/engine/paint";
+import { cssFilterString } from "@flatkit/engine/filters";
+import { containerLayers, getSymbol, hiddenLayerIds, isContainer, isGroup, isInstance, isText, isImage, isRegion, maskMap, guideMap } from "@flatkit/engine/layers";
+import { pathToBezier, transformPath } from "@flatkit/engine/path";
+import { resolveInstanceFrame } from "@flatkit/engine/timeline";
+import { resolveLayerAt } from "@flatkit/engine/cel";
+import { apply, compose, IDENTITY } from "@flatkit/engine/transform";
+var clamp01 = (v) => Math.max(0, Math.min(1, v));
+var scaleOf = (ctx) => {
+  const m = ctx.getTransform();
+  return Math.hypot(m.a, m.b) || 1;
+};
+function applyTransform(ctx, t) {
+  ctx.transform(t.a, t.b, t.c, t.d, t.e, t.f);
+}
+var scratchPool = [];
+var scratchTop = 0;
+var SCRATCH_BUCKET = 256;
+function acquireScratch(w, h, maxW, maxH) {
+  if (typeof document === "undefined") return null;
+  const bw = Math.min(maxW, Math.max(SCRATCH_BUCKET, Math.ceil(w / SCRATCH_BUCKET) * SCRATCH_BUCKET));
+  const bh = Math.min(maxH, Math.max(SCRATCH_BUCKET, Math.ceil(h / SCRATCH_BUCKET) * SCRATCH_BUCKET));
+  let canvas = scratchPool[scratchTop];
+  if (!canvas) {
+    canvas = document.createElement("canvas");
+    scratchPool[scratchTop] = canvas;
+  }
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return null;
+  if (canvas.width !== bw || canvas.height !== bh) {
+    canvas.width = bw;
+    canvas.height = bh;
+  } else {
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    ctx.globalCompositeOperation = "source-over";
+    ctx.globalAlpha = 1;
+    ctx.filter = "none";
+    ctx.clearRect(0, 0, bw, bh);
+  }
+  scratchTop++;
+  return { canvas, ctx };
+}
+function releaseScratch() {
+  if (scratchTop > 0) scratchTop--;
+}
+function filterSpreadPx(filters, scale) {
+  if (!filters || filters.length === 0) return 0;
+  let m = 0;
+  for (const f of filters) {
+    if (f.type === "blur") m += Math.max(0, f.radius) * 3;
+    else if (f.type === "glow") m += Math.max(0, f.blur) * 2;
+    else if (f.type === "shadow") m += Math.abs(f.dx) + Math.abs(f.dy) + Math.max(0, f.blur) * 2;
+  }
+  return m * scale;
+}
+function expandRect(acc, m, x0, y0, x1, y1) {
+  const pts = [apply(m, { x: x0, y: y0 }), apply(m, { x: x1, y: y0 }), apply(m, { x: x1, y: y1 }), apply(m, { x: x0, y: y1 })];
+  for (const p of pts) {
+    if (p.x < acc.minX) acc.minX = p.x;
+    if (p.y < acc.minY) acc.minY = p.y;
+    if (p.x > acc.maxX) acc.maxX = p.x;
+    if (p.y > acc.maxY) acc.maxY = p.y;
+  }
+}
+function accumDevBBox(doc, items, frame, matrix, seen, acc, rctx) {
+  for (const it of items) {
+    if (it.hidden) continue;
+    if (isContainer(it)) {
+      if (isInstance(it) && seen.has(it.symbolId)) continue;
+      const t = compose(matrix, it.transform);
+      if (isInstance(it)) {
+        const sym = getSymbol(doc, it.symbolId);
+        const local = sym?.timeline ? resolveInstanceFrame(it.playback, frame, sym.timeline.durationFrames) : frame;
+        const sub = { fps: subFps(sym?.timeline?.fps, rctx), expr: rctx.expr };
+        const next = /* @__PURE__ */ new Set([...seen, it.symbolId]);
+        for (const l of containerLayers(doc, it)) if (l.visible) accumDevBBox(doc, resolveLayerAt(l, local, { fps: sub.fps, ctx: sub.expr, parent: t }), local, t, next, acc, sub);
+      } else if (isGroup(it) && it.timeline) {
+        const sub = { fps: subFps(it.timeline.fps, rctx), expr: rctx.expr };
+        for (const l of it.layers) if (l.visible) accumDevBBox(doc, resolveLayerAt(l, frame, { fps: sub.fps, ctx: sub.expr, parent: t }), frame, t, seen, acc, sub);
+      } else {
+        for (const l of containerLayers(doc, it)) if (l.visible) accumDevBBox(doc, resolveLayerAt(l, frame, { fps: rctx.fps, ctx: rctx.expr, parent: t }), frame, t, seen, acc, rctx);
+      }
+    } else if (isText(it)) {
+      expandRect(acc, compose(matrix, it.transform), 0, 0, it.box.w, it.box.h);
+    } else if (isImage(it)) {
+      expandRect(acc, compose(matrix, it.transform), 0, 0, it.w, it.h);
+    } else {
+      const b = regionBBox(it);
+      if (b) expandRect(acc, matrix, b.minX, b.minY, b.maxX, b.maxY);
+    }
+  }
+}
+var matOf = (m) => ({ a: m.a, b: m.b, c: m.c, d: m.d, e: m.e, f: m.f });
+var staticMemo = /* @__PURE__ */ new WeakMap();
+var hasExpr = (it) => "expressions" in it && !!it.expressions && Object.keys(it.expressions).length > 0;
+function layersStatic(doc, layers, seen) {
+  for (const l of layers) {
+    if (l.cels && l.cels.length) return false;
+    for (const it of l.items) if (!isRenderStatic(doc, it, seen)) return false;
+  }
+  return true;
+}
+function isRenderStatic(doc, it, seen = /* @__PURE__ */ new Set()) {
+  const memo = staticMemo.get(it);
+  if (memo !== void 0) return memo;
+  if (isText(it) && it.bind || hasExpr(it)) {
+    staticMemo.set(it, false);
+    return false;
+  }
+  let result = true;
+  if (isInstance(it)) {
+    if (seen.has(it.symbolId)) return true;
+    result = getSymbol(doc, it.symbolId)?.timeline ? false : layersStatic(doc, containerLayers(doc, it), /* @__PURE__ */ new Set([...seen, it.symbolId]));
+  } else if (isGroup(it)) {
+    result = it.timeline ? false : layersStatic(doc, it.layers, seen);
+  }
+  staticMemo.set(it, result);
+  return result;
+}
+function filterCacheSlot(rctx, doc, it, ctx, tint, filterStr) {
+  if (!rctx.filterCache || typeof document === "undefined" || !isRenderStatic(doc, it)) return void 0;
+  const m = ctx.getTransform();
+  const r = (n) => Math.round(n * 100) / 100;
+  const sig = `${r(m.a)},${r(m.b)},${r(m.c)},${r(m.d)},${r(m.e)},${r(m.f)}|${tint ? `${tint.color}:${tint.amount}` : ""}|${filterStr}|${rctx.imageEpoch ?? 0}`;
+  return { map: rctx.filterCache, id: it.id, sig };
+}
+function compositeFiltered(ctx, opacity, tint, filters, scale, devBBox, draw, cache) {
+  const prev = cache ? cache.map.get(cache.id) : void 0;
+  if (prev && prev.canvas && prev.sig === cache.sig) {
+    ctx.save();
+    ctx.globalAlpha *= opacity;
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    ctx.drawImage(prev.canvas, 0, 0, prev.ow, prev.oh, prev.ox, prev.oy, prev.ow, prev.oh);
+    ctx.restore();
+    return;
+  }
+  const stable = !!(prev && prev.sig === cache.sig);
+  const filterStr = cssFilterString(filters, scale);
+  const cw = ctx.canvas.width;
+  const ch = ctx.canvas.height;
+  let ox = 0, oy = 0, ow = cw, oh = ch;
+  if (devBBox && devBBox.minX <= devBBox.maxX) {
+    const m = filterSpreadPx(filters, scale);
+    ox = Math.max(0, Math.floor(devBBox.minX - m));
+    oy = Math.max(0, Math.floor(devBBox.minY - m));
+    ow = Math.max(1, Math.min(cw, Math.ceil(devBBox.maxX + m)) - ox);
+    oh = Math.max(1, Math.min(ch, Math.ceil(devBBox.maxY + m)) - oy);
+    if (ow >= cw && oh >= ch) {
+      ox = 0;
+      oy = 0;
+      ow = cw;
+      oh = ch;
+    }
+  }
+  const scratch = acquireScratch(ow, oh, cw, ch);
+  if (!scratch) {
+    ctx.save();
+    ctx.globalAlpha *= opacity;
+    draw(ctx);
+    ctx.restore();
+    return;
+  }
+  const octx = scratch.ctx;
+  try {
+    const dev = ctx.getTransform();
+    octx.setTransform(dev.a, dev.b, dev.c, dev.d, dev.e - ox, dev.f - oy);
+    draw(octx);
+    if (tint) {
+      octx.setTransform(1, 0, 0, 1, 0, 0);
+      octx.globalCompositeOperation = "source-atop";
+      octx.globalAlpha = clamp01(tint.amount);
+      octx.fillStyle = tint.color;
+      octx.fillRect(0, 0, ow, oh);
+    }
+    const store = cache && stable && typeof document !== "undefined" ? ensureCacheCanvas(cache, ox, oy, ow, oh) : null;
+    const cctx = store ? store.canvas.getContext("2d") : null;
+    if (store && cctx) {
+      cctx.setTransform(1, 0, 0, 1, 0, 0);
+      cctx.globalAlpha = 1;
+      cctx.globalCompositeOperation = "source-over";
+      cctx.filter = filterStr || "none";
+      cctx.clearRect(0, 0, store.canvas.width, store.canvas.height);
+      cctx.drawImage(scratch.canvas, 0, 0, ow, oh, 0, 0, ow, oh);
+      store.sig = cache.sig;
+      store.ox = ox;
+      store.oy = oy;
+      store.ow = ow;
+      store.oh = oh;
+      ctx.save();
+      ctx.globalAlpha *= opacity;
+      ctx.setTransform(1, 0, 0, 1, 0, 0);
+      ctx.drawImage(store.canvas, 0, 0, ow, oh, ox, oy, ow, oh);
+      ctx.restore();
+    } else {
+      if (cache) cache.map.set(cache.id, { sig: cache.sig, ox, oy, ow, oh });
+      ctx.save();
+      ctx.globalAlpha *= opacity;
+      ctx.setTransform(1, 0, 0, 1, 0, 0);
+      if (filterStr) ctx.filter = filterStr;
+      ctx.drawImage(scratch.canvas, 0, 0, ow, oh, ox, oy, ow, oh);
+      ctx.restore();
+    }
+  } finally {
+    releaseScratch();
+  }
+}
+function ensureCacheCanvas(cache, ox, oy, ow, oh) {
+  const e = cache.map.get(cache.id);
+  if (e?.canvas && e.canvas.width >= ow && e.canvas.height >= oh) return e;
+  const canvas = document.createElement("canvas");
+  canvas.width = Math.max(1, ow);
+  canvas.height = Math.max(1, oh);
+  const fresh = { canvas, sig: "", ox, oy, ow, oh };
+  cache.map.set(cache.id, fresh);
+  return fresh;
+}
+function compositeMasked(ctx, opacity, devBBox, blit, drawContent, drawMatter) {
+  const cw = ctx.canvas.width;
+  const ch = ctx.canvas.height;
+  let ox = 0, oy = 0, ow = cw, oh = ch;
+  if (devBBox && devBBox.minX <= devBBox.maxX) {
+    ox = Math.max(0, Math.floor(devBBox.minX));
+    oy = Math.max(0, Math.floor(devBBox.minY));
+    ow = Math.max(1, Math.min(cw, Math.ceil(devBBox.maxX)) - ox);
+    oh = Math.max(1, Math.min(ch, Math.ceil(devBBox.maxY)) - oy);
+    if (ow >= cw && oh >= ch) {
+      ox = 0;
+      oy = 0;
+      ow = cw;
+      oh = ch;
+    }
+  }
+  const scratch = acquireScratch(ow, oh, cw, ch);
+  if (!scratch) {
+    ctx.save();
+    ctx.globalAlpha *= opacity;
+    drawContent(ctx);
+    ctx.restore();
+    return;
+  }
+  const octx = scratch.ctx;
+  try {
+    const dev = ctx.getTransform();
+    octx.setTransform(dev.a, dev.b, dev.c, dev.d, dev.e - ox, dev.f - oy);
+    drawContent(octx);
+    octx.setTransform(dev.a, dev.b, dev.c, dev.d, dev.e - ox, dev.f - oy);
+    octx.globalCompositeOperation = "destination-in";
+    drawMatter(octx);
+    octx.globalCompositeOperation = "source-over";
+    ctx.save();
+    ctx.globalAlpha *= opacity;
+    ctx.globalCompositeOperation = blit;
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    ctx.drawImage(scratch.canvas, 0, 0, ow, oh, ox, oy, ow, oh);
+    ctx.restore();
+  } finally {
+    releaseScratch();
+  }
+}
+function itemsHaveGlyph(doc, items, seen = /* @__PURE__ */ new Set()) {
+  for (const it of items) {
+    if (it.hidden) continue;
+    if (isText(it) || isImage(it)) return true;
+    if (isContainer(it)) {
+      if (isInstance(it) && seen.has(it.symbolId)) continue;
+      const next = isInstance(it) ? /* @__PURE__ */ new Set([...seen, it.symbolId]) : seen;
+      for (const l of containerLayers(doc, it)) if (l.visible && itemsHaveGlyph(doc, resolveLayerAt(l, 0, {}), next)) return true;
+    }
+  }
+  return false;
+}
+var subFps = (tlFps, parent) => tlFps ?? parent.fps;
+var MAX_NEST = 256;
+function renderContainerChildren(ctx, doc, it, frame, hidden, seen, rctx, parent = IDENTITY, depth = 0) {
+  if (isInstance(it)) {
+    const sym = getSymbol(doc, it.symbolId);
+    const local = rctx.freezeNested ? 0 : sym?.timeline ? resolveInstanceFrame(it.playback, frame, sym.timeline.durationFrames) : frame;
+    renderLayers(ctx, doc, containerLayers(doc, it), local, hidden, seen, { fps: subFps(sym?.timeline?.fps, rctx), expr: rctx.expr, freezeNested: rctx.freezeNested, image: rctx.image, filterCache: rctx.filterCache, imageEpoch: rctx.imageEpoch, itemState: rctx.itemState }, parent, depth + 1);
+  } else if (isGroup(it) && it.timeline) {
+    renderLayers(ctx, doc, it.layers, rctx.freezeNested ? 0 : frame, hidden, seen, { fps: subFps(it.timeline.fps, rctx), expr: rctx.expr, freezeNested: rctx.freezeNested, image: rctx.image, filterCache: rctx.filterCache, imageEpoch: rctx.imageEpoch, itemState: rctx.itemState }, parent, depth + 1);
+  } else {
+    renderLayers(ctx, doc, containerLayers(doc, it), frame, hidden, seen, rctx, parent, depth + 1);
+  }
+}
+function regionPath(region, dx = 0, dy = 0) {
+  const path = new Path2D();
+  for (const sub of region.path.subpaths) {
+    const bz = pathToBezier(sub);
+    if (!bz) continue;
+    path.moveTo(bz.start.x + dx, bz.start.y + dy);
+    for (const s of bz.segs) path.bezierCurveTo(s.c1.x + dx, s.c1.y + dy, s.c2.x + dx, s.c2.y + dy, s.p.x + dx, s.p.y + dy);
+    if (sub.closed) path.closePath();
+  }
+  return path;
+}
+function collectShape(doc, items, frame, matrix, seen, path, rctx) {
+  for (const it of items) {
+    if (it.hidden) continue;
+    if (isContainer(it)) {
+      if (isInstance(it) && seen.has(it.symbolId)) continue;
+      const t = compose(matrix, it.transform);
+      if (isInstance(it)) {
+        const sym = getSymbol(doc, it.symbolId);
+        const local = sym?.timeline ? resolveInstanceFrame(it.playback, frame, sym.timeline.durationFrames) : frame;
+        const sub = { fps: subFps(sym?.timeline?.fps, rctx), expr: rctx.expr };
+        const next = /* @__PURE__ */ new Set([...seen, it.symbolId]);
+        for (const l of containerLayers(doc, it)) if (l.visible) collectShape(doc, resolveLayerAt(l, local, { fps: sub.fps, ctx: sub.expr, parent: t }), local, t, next, path, sub);
+      } else if (isGroup(it) && it.timeline) {
+        const sub = { fps: subFps(it.timeline.fps, rctx), expr: rctx.expr };
+        for (const l of it.layers) if (l.visible) collectShape(doc, resolveLayerAt(l, frame, { fps: sub.fps, ctx: sub.expr, parent: t }), frame, t, seen, path, sub);
+      } else {
+        for (const l of containerLayers(doc, it)) if (l.visible) collectShape(doc, resolveLayerAt(l, frame, { fps: rctx.fps, ctx: rctx.expr, parent: t }), frame, t, seen, path, rctx);
+      }
+    } else {
+      path.addPath(regionPath(it), new DOMMatrix([matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f]));
+    }
+  }
+}
+function guidePathOf(guide, frame, rctx) {
+  const items = resolveLayerAt(guide, frame, { fps: rctx.fps, ctx: rctx.expr });
+  const subpaths = [];
+  for (const it of items) {
+    if (!isRegion(it)) continue;
+    const path = it.xform ? transformPath(it.path, it.xform) : it.path;
+    subpaths.push(...path.subpaths);
+  }
+  return subpaths.length ? { subpaths } : null;
+}
+function paintStyle(ctx, paint, bbox, fallback) {
+  if (paint.type === "solid") return paint.color;
+  const b = paint.box ?? bbox;
+  if (!b) return fallback;
+  const w = b.maxX - b.minX;
+  const h = b.maxY - b.minY;
+  let g;
+  if (paint.type === "linear") {
+    const cx = (b.minX + b.maxX) / 2;
+    const cy = (b.minY + b.maxY) / 2;
+    const a = paint.angle * Math.PI / 180;
+    const ux = Math.cos(a);
+    const uy = Math.sin(a);
+    const half = (Math.abs(w * ux) + Math.abs(h * uy)) / 2;
+    g = ctx.createLinearGradient(cx - ux * half, cy - uy * half, cx + ux * half, cy + uy * half);
+  } else {
+    const cx = b.minX + paint.cx * w;
+    const cy = b.minY + paint.cy * h;
+    g = ctx.createRadialGradient(cx, cy, 0, cx, cy, Math.max(1e-4, paint.r * Math.max(w, h)));
+  }
+  for (const s of paint.stops) g.addColorStop(clamp01(s.offset), s.color);
+  return g;
+}
+function fillStyleFor(ctx, region) {
+  return paintStyle(ctx, regionPaint(region), regionBBox(region), region.color);
+}
+function renderItems(ctx, doc, items, frame, hidden, seen, rctx, parent = IDENTITY, depth = 0) {
+  for (const it of items) {
+    if (hidden?.has(it.id)) continue;
+    if (it.hidden) continue;
+    const opacity = it.opacity ?? 1;
+    if (opacity <= 0) continue;
+    const blend = "blend" in it ? it.blend : void 0;
+    const op = blend === "add" ? "lighter" : blend === "screen" ? "screen" : blend === "multiply" ? "multiply" : null;
+    if (op) {
+      ctx.save();
+      ctx.globalCompositeOperation = op;
+    }
+    const pm = rctx.preview?.ids.has(it.id) ? rctx.preview.m : null;
+    if (pm) ctx.save();
+    if (pm) applyTransform(ctx, pm);
+    renderOneItem(ctx, doc, it, frame, hidden, seen, rctx, opacity, parent, depth);
+    if (pm) ctx.restore();
+    if (op) ctx.restore();
+  }
+}
+function renderOneItem(ctx, doc, it, frame, hidden, seen, rctx, opacity, parent = IDENTITY, depth = 0) {
+  {
+    if (isContainer(it)) {
+      if (isInstance(it) && seen.has(it.symbolId)) return;
+      const next = isInstance(it) ? /* @__PURE__ */ new Set([...seen, it.symbolId]) : seen;
+      const ctm = it.transform;
+      const childParent = compose(parent, ctm);
+      const tint = it.tint && it.tint.amount > 1e-3 ? it.tint : null;
+      const scale = scaleOf(ctx);
+      const filterStr = cssFilterString(it.filters, scale);
+      if (tint || filterStr) {
+        const acc = { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity };
+        accumDevBBox(doc, [it], frame, matOf(ctx.getTransform()), seen, acc, rctx);
+        const devBBox = acc.minX <= acc.maxX ? acc : null;
+        const cache = filterCacheSlot(rctx, doc, it, ctx, tint, filterStr);
+        compositeFiltered(ctx, opacity, tint, it.filters, scale, devBBox, (octx) => {
+          applyTransform(octx, ctm);
+          renderContainerChildren(octx, doc, it, frame, hidden, next, rctx, childParent, depth);
+        }, cache);
+      } else {
+        ctx.save();
+        ctx.globalAlpha *= opacity;
+        applyTransform(ctx, ctm);
+        renderContainerChildren(ctx, doc, it, frame, hidden, next, rctx, childParent, depth);
+        ctx.restore();
+      }
+    } else if (isText(it)) {
+      const acc = { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity };
+      expandRect(acc, compose(matOf(ctx.getTransform()), it.transform), 0, 0, it.box.w, it.box.h);
+      paintLeaf(ctx, it.tint, it.filters, opacity, acc, scaleOf(ctx), (c) => paintText(c, it));
+    } else if (isImage(it)) {
+      const src = rctx.image?.(it.assetId) ?? null;
+      const acc = { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity };
+      expandRect(acc, compose(matOf(ctx.getTransform()), it.transform), 0, 0, it.w, it.h);
+      paintLeaf(ctx, it.tint, it.filters, opacity, acc, scaleOf(ctx), (c) => paintImage(c, it, src));
+    } else {
+      const reg = it;
+      if (reg.filters?.length) {
+        const lb = regionBBox(reg);
+        const acc = { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity };
+        if (lb) expandRect(acc, matOf(ctx.getTransform()), lb.minX, lb.minY, lb.maxX, lb.maxY);
+        paintLeaf(ctx, void 0, reg.filters, opacity, acc, scaleOf(ctx), (c) => paintRegion(c, reg));
+      } else {
+        ctx.save();
+        if (opacity < 1) ctx.globalAlpha *= opacity;
+        paintRegion(ctx, reg);
+        ctx.restore();
+      }
+    }
+  }
+}
+function paintRegion(c, reg) {
+  const path = regionPath(reg);
+  if (!reg.noFill) {
+    c.fillStyle = fillStyleFor(c, reg);
+    c.fill(path, "evenodd");
+  }
+  if (reg.stroke) {
+    const s = reg.stroke;
+    c.lineWidth = s.width;
+    c.lineCap = s.cap ?? "round";
+    c.lineJoin = s.join ?? "round";
+    if (s.miterLimit != null) c.miterLimit = s.miterLimit;
+    c.setLineDash(s.dash ?? []);
+    c.strokeStyle = paintStyle(c, s.paint, regionBBox(reg), reg.color);
+    c.stroke(path);
+  }
+}
+var textFont = (t) => `${t.italic ? "italic " : ""}${t.weight ?? 400} ${t.size}px ${t.font}`;
+function paintText(ctx, t) {
+  ctx.save();
+  applyTransform(ctx, t.transform);
+  ctx.fillStyle = t.color;
+  ctx.textBaseline = "top";
+  ctx.font = textFont(t);
+  ctx.textAlign = t.align;
+  const x = t.align === "left" ? 0 : t.align === "right" ? t.box.w : t.box.w / 2;
+  const lh = t.size * t.lineHeight;
+  const lines = t.wrap && t.box.w > 0 ? wrapLines(ctx, t.content, t.box.w) : t.content.split("\n");
+  for (let i = 0; i < lines.length; i++) ctx.fillText(lines[i], x, i * lh);
+  ctx.restore();
+}
+function wrapLines(ctx, content, maxW) {
+  const out = [];
+  for (const para of content.split("\n")) {
+    const words = para.split(/\s+/).filter(Boolean);
+    if (words.length === 0) {
+      out.push("");
+      continue;
+    }
+    let line = words[0];
+    for (let i = 1; i < words.length; i++) {
+      const test = line + " " + words[i];
+      if (ctx.measureText(test).width <= maxW) line = test;
+      else {
+        out.push(line);
+        line = words[i];
+      }
+    }
+    out.push(line);
+  }
+  return out;
+}
+function paintImage(ctx, im, src) {
+  ctx.save();
+  applyTransform(ctx, im.transform);
+  if (src) ctx.drawImage(src, 0, 0, im.w, im.h);
+  else {
+    ctx.fillStyle = "rgba(127,131,140,0.18)";
+    ctx.fillRect(0, 0, im.w, im.h);
+  }
+  ctx.restore();
+}
+function paintLeaf(ctx, tint, filters, opacity, devBBox, scale, draw) {
+  const t = tint && tint.amount > 1e-3 ? tint : null;
+  const filterStr = cssFilterString(filters, scale);
+  if (!t && !filterStr) {
+    ctx.save();
+    if (opacity < 1) ctx.globalAlpha *= opacity;
+    draw(ctx);
+    ctx.restore();
+    return;
+  }
+  compositeFiltered(ctx, opacity, t, filters, scale, devBBox.minX <= devBBox.maxX ? devBBox : null, draw);
+}
+function renderLayers(ctx, doc, layers, frame, hidden, seen, rctx, parent = IDENTITY, depth = 0) {
+  if (depth > MAX_NEST) return;
+  const hid = hiddenLayerIds(layers);
+  const masks = maskMap(layers);
+  const guides = guideMap(layers);
+  const clipCache = /* @__PURE__ */ new Map();
+  const maskCache = /* @__PURE__ */ new Map();
+  const guideCache = /* @__PURE__ */ new Map();
+  for (const layer of layers) {
+    if (hid.has(layer.id)) continue;
+    if (layer.isMask) continue;
+    if (layer.isGuide) continue;
+    const a = ctx.globalAlpha;
+    ctx.globalAlpha = a * layer.opacity;
+    const guideLayer = guides.get(layer.id);
+    let guidePath;
+    if (guideLayer) {
+      guidePath = guideCache.get(guideLayer.id);
+      if (guidePath === void 0) {
+        guidePath = guidePathOf(guideLayer, frame, rctx);
+        guideCache.set(guideLayer.id, guidePath);
+      }
+    }
+    const items = resolveLayerAt(layer, frame, { fps: rctx.fps, ctx: rctx.expr, guide: guidePath ?? void 0, orient: layer.orientToGuide, parent, itemState: rctx.itemState });
+    const mask = masks.get(layer.id);
+    if (mask) {
+      let mi = maskCache.get(mask.id);
+      if (!mi) {
+        const mItems = resolveLayerAt(mask, frame, { fps: rctx.fps, ctx: rctx.expr });
+        mi = { items: mItems, glyph: itemsHaveGlyph(doc, mItems, /* @__PURE__ */ new Set()) };
+        maskCache.set(mask.id, mi);
+      }
+      if (mi.glyph) {
+        const acc = { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity };
+        accumDevBBox(doc, mi.items, frame, matOf(ctx.getTransform()), seen, acc, rctx);
+        const matter = mi.items;
+        const blit = items.some((it) => "blend" in it && it.blend === "add") ? "lighter" : "source-over";
+        compositeMasked(
+          ctx,
+          1,
+          acc.minX <= acc.maxX ? acc : null,
+          blit,
+          (octx) => renderItems(octx, doc, items, frame, hidden, seen, rctx, parent, depth),
+          (octx) => renderItems(octx, doc, matter, frame, hidden, seen, rctx, parent, depth)
+        );
+      } else {
+        let clip = clipCache.get(mask.id);
+        if (!clip) {
+          const p = new Path2D();
+          collectShape(doc, mi.items, frame, IDENTITY, /* @__PURE__ */ new Set(), p, rctx);
+          clip = p;
+          clipCache.set(mask.id, clip);
+        }
+        ctx.save();
+        ctx.clip(clip, "evenodd");
+        renderItems(ctx, doc, items, frame, hidden, seen, rctx, parent, depth);
+        ctx.restore();
+      }
+    } else {
+      renderItems(ctx, doc, items, frame, hidden, seen, rctx, parent, depth);
+    }
+    ctx.globalAlpha = a;
+  }
+}
+
+// src/player.ts
+import { resolveInstanceFrame as resolveInstanceFrame3, scheduleSounds } from "@flatkit/engine/timeline";
+import { compileExpr, evalExpr, exprScope } from "@flatkit/engine/expr";
+import { runActions, MAX_SEND_TEXT, SEND_EVENT_NAME } from "@flatkit/engine/actions";
+import { containerLayers as containerLayers3, getSymbol as getSymbol3, isGroup as isGroup3, isInstance as isInstance3, isText as isText3 } from "@flatkit/engine/layers";
+import { withCels } from "@flatkit/engine/migrateCel";
+import { sanitizeDoc } from "@flatkit/engine/validateDoc";
+import { applyInstanceBinds } from "@flatkit/engine/instanceBind";
+import { importedFunctions } from "@flatkit/engine/stdlib";
+import { namedChannels, objectChannelsById, objectParentTransform } from "@flatkit/engine/sceneRefs";
+import { itemBoundsByName, itemBoundsById, dropZoneBounds, tracePathByName, groupTargets } from "@flatkit/engine/groups";
+import { projectToPath, samplePathAt } from "@flatkit/engine/path";
+import { apply as apply3, invert as invert2, spaceConversions, IDENTITY as IDENTITY3 } from "@flatkit/engine/transform";
+
+// src/hit.ts
+import { containerLayers as containerLayers2, getSymbol as getSymbol2, hiddenLayerIds as hiddenLayerIds2, isContainer as isContainer2, isGroup as isGroup2, isInstance as isInstance2, isText as isText2, isImage as isImage2, maskMap as maskMap2, guideMap as guideMap2 } from "@flatkit/engine/layers";
+import { apply as apply2, invert, compose as compose2, IDENTITY as IDENTITY2 } from "@flatkit/engine/transform";
+import { resolveInstanceFrame as resolveInstanceFrame2 } from "@flatkit/engine/timeline";
+import { resolveLayerAt as resolveLayerAt2 } from "@flatkit/engine/cel";
+import { pathToPolygons } from "@flatkit/engine/path";
+function pointInMask(mask, frame, fps, ctx, pt) {
+  let hasContainer = false;
+  for (const it of resolveLayerAt2(mask, frame, { fps, ctx })) {
+    if (it.hidden) continue;
+    if (isContainer2(it)) {
+      hasContainer = true;
+      continue;
+    }
+    if (pointInPolygons(pathToPolygons(it.path), pt)) return true;
+  }
+  return hasContainer;
+}
+function pointInBox(transform, w, h, pt) {
+  const p = apply2(invert(transform), pt);
+  return p.x >= 0 && p.x <= w && p.y >= 0 && p.y <= h;
+}
+function pointInPolygons(rings, pt) {
+  let inside = false;
+  for (const ring of rings) {
+    for (let i = 0, j = ring.length - 1; i < ring.length; j = i++) {
+      const a = ring[i];
+      const b = ring[j];
+      if (a.y > pt.y !== b.y > pt.y) {
+        const x = a.x + (pt.y - a.y) / (b.y - a.y) * (b.x - a.x);
+        if (pt.x < x) inside = !inside;
+      }
+    }
+  }
+  return inside;
+}
+function distToSeg(p, a, b) {
+  const dx = b.x - a.x;
+  const dy = b.y - a.y;
+  const l2 = dx * dx + dy * dy;
+  if (l2 === 0) return Math.hypot(p.x - a.x, p.y - a.y);
+  const t = Math.max(0, Math.min(1, ((p.x - a.x) * dx + (p.y - a.y) * dy) / l2));
+  return Math.hypot(p.x - (a.x + t * dx), p.y - (a.y + t * dy));
+}
+function pointNearPath(path, pt, dist) {
+  for (const sp of path.subpaths) {
+    const ring = pathToPolygons({ subpaths: [sp] })[0];
+    if (!ring || ring.length < 2) continue;
+    const segCount = sp.closed ? ring.length : ring.length - 1;
+    for (let i = 0; i < segCount; i++) if (distToSeg(pt, ring[i], ring[(i + 1) % ring.length]) <= dist) return true;
+  }
+  return false;
+}
+var hittable = (it) => !it.hidden && (it.opacity ?? 1) > 0.01 && !it.noHit;
+function hitRegion(r, pt) {
+  if (r.noFill && r.stroke) return pointNearPath(r.path, pt, r.stroke.width / 2 + 4);
+  return pointInPolygons(pathToPolygons(r.path), pt);
+}
+function subScopeFrame(it, sym, frame, freeze) {
+  const subScope = isInstance2(it) || isGroup2(it) && !!it.timeline;
+  if (!subScope) return frame;
+  if (freeze) return 0;
+  return isInstance2(it) && sym?.timeline ? resolveInstanceFrame2(it.playback, frame, sym.timeline.durationFrames) : frame;
+}
+var MAX_NEST2 = 256;
+function collectInScope(doc, layers, timeline, frame, ctx, pt, seen, freeze, out, parent = IDENTITY2, depth = 0) {
+  if (depth > MAX_NEST2) return;
+  const fps = timeline?.fps ?? 24;
+  const hid = hiddenLayerIds2(layers);
+  const masks = maskMap2(layers);
+  const guides = guideMap2(layers);
+  for (let li = layers.length - 1; li >= 0; li--) {
+    const layer = layers[li];
+    if (hid.has(layer.id) || layer.isMask) continue;
+    const mask = masks.get(layer.id);
+    if (mask && !pointInMask(mask, frame, fps, ctx, pt)) continue;
+    const gl = guides.get(layer.id);
+    const guide = gl ? guidePathOf(gl, frame, { fps, expr: ctx }) ?? void 0 : void 0;
+    const items = resolveLayerAt2(layer, frame, { fps, ctx, guide, orient: layer.orientToGuide, parent });
+    for (let i = items.length - 1; i >= 0; i--) {
+      const it = items[i];
+      if (!hittable(it)) continue;
+      if (isContainer2(it)) {
+        if (isInstance2(it) && seen.has(it.symbolId)) continue;
+        const local = apply2(invert(it.transform), pt);
+        const inst = isInstance2(it);
+        const sym = inst ? getSymbol2(doc, it.symbolId) : void 0;
+        const subTl = inst ? sym?.timeline : isGroup2(it) && it.timeline ? it.timeline : timeline;
+        const subFrame = subScopeFrame(it, sym, frame, freeze);
+        const next = inst ? /* @__PURE__ */ new Set([...seen, it.symbolId]) : seen;
+        const deeper = [];
+        collectInScope(doc, containerLayers2(doc, it), subTl, subFrame, ctx, local, next, freeze, deeper, compose2(parent, it.transform), depth + 1);
+        for (const d of deeper) out.push([it.id, ...d]);
+      } else if (isText2(it)) {
+        if (pointInBox(it.transform, it.box.w, it.box.h, pt)) out.push([it.id]);
+      } else if (isImage2(it)) {
+        if (pointInBox(it.transform, it.w, it.h, pt)) out.push([it.id]);
+      } else {
+        if (hitRegion(it, pt)) out.push([it.id]);
+      }
+    }
+  }
+}
+function hitChains(doc, frame, ctx, worldPt) {
+  const out = [];
+  collectInScope(doc, doc.layers, doc.timeline, frame, ctx, worldPt, /* @__PURE__ */ new Set(), false, out);
+  return out;
+}
+
+// src/player.ts
+function fit(cssW, cssH, docW, docH, pad) {
+  const scale = Math.max(1e-4, Math.min((cssW - 2 * pad) / docW, (cssH - 2 * pad) / docH));
+  return { tx: (cssW - docW * scale) / 2, ty: (cssH - docH * scale) / 2, scale };
+}
+var playerImgCache = /* @__PURE__ */ new Map();
+var isEmbeddedData = (data) => !!data && data.startsWith("data:");
+function sameOriginAssetResolver(baseUrl) {
+  let base;
+  try {
+    base = new URL(baseUrl);
+  } catch {
+    return () => null;
+  }
+  return (asset) => {
+    const data = asset.data;
+    if (typeof data !== "string" || !data) return null;
+    if (data.startsWith("data:")) return data;
+    if (data.startsWith("//") || /^[a-z][a-z0-9+.-]*:/i.test(data)) return null;
+    let url;
+    try {
+      url = new URL(data, base);
+    } catch {
+      return null;
+    }
+    return url.origin === base.origin ? url.href : null;
+  };
+}
+function cloneVars(vars) {
+  return new Map(Object.entries(vars ?? {}).map(([k, v]) => [k, Array.isArray(v) ? [...v] : v]));
+}
+function cloneVarMap(m) {
+  const out = /* @__PURE__ */ new Map();
+  for (const [k, v] of m) out.set(k, Array.isArray(v) ? [...v] : v);
+  return out;
+}
+function lerpVars(prev, cur, alpha) {
+  const out = /* @__PURE__ */ new Map();
+  for (const [k, c] of cur) {
+    const p = prev.get(k);
+    if (typeof c === "number" && typeof p === "number") out.set(k, p + (c - p) * alpha);
+    else if (Array.isArray(c) && Array.isArray(p) && p.length === c.length) out.set(k, c.map((ci, i) => p[i] + (ci - p[i]) * alpha));
+    else out.set(k, c);
+  }
+  return out;
+}
+var SIM_HZ = 60;
+var SIM_STEP = 1 / SIM_HZ;
+var SIM_MAX_STEPS = 30;
+var CLICK_EVENTS = ["click"];
+var HOVER_EVENTS = ["enter", "leave"];
+var GRAB_EVENTS = ["press", "release", "drag", "longpress"];
+var LONGPRESS_MS = 500;
+var LONGPRESS_TOL = 6;
+function simSteps(acc, dt, step, max) {
+  let a = acc + dt;
+  let n = 0;
+  while (a >= step && n < max) {
+    a -= step;
+    n++;
+  }
+  if (n >= max) a = 0;
+  return { steps: n, acc: a };
+}
+var playerAudioCtx = null;
+var playerAudioBuffers = /* @__PURE__ */ new Map();
+function getAudioCtx() {
+  if (!playerAudioCtx) playerAudioCtx = new (window.AudioContext ?? window.webkitAudioContext)();
+  return playerAudioCtx;
+}
+var FlatPlayer = class {
+  constructor(canvas, doc, opts = {}) {
+    this.canvas = canvas;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) throw new Error("FlatPlayer: 2D context unavailable");
+    this.ctx = ctx;
+    this.doc = applyInstanceBinds(withCels(sanitizeDoc(doc)));
+    this.loop = opts.loop ?? true;
+    this.pad = opts.padding ?? 0;
+    this.audioOn = opts.audio ?? true;
+    this.onEvent = opts.onEvent;
+    this.renderOn = opts.render ?? true;
+    this.imageProvider = opts.image;
+    this.resolveAsset = opts.resolveAsset ?? ((a) => isEmbeddedData(a.data) ? a.data : null);
+    this.vars = cloneVars(doc.variables);
+    this.buildFunctions();
+    this.measure();
+    this.render();
+    this.fireLoad();
+    window.addEventListener("resize", this.onResize);
+    if (opts.input ?? true) {
+      globalThis.addEventListener("keydown", this.onKeyDown);
+      globalThis.addEventListener("keyup", this.onKeyUp);
+      this.canvas.addEventListener("pointermove", this.onPointerMove);
+      this.canvas.addEventListener("pointerdown", this.onPointerDown);
+      this.canvas.addEventListener("pointerup", this.onPointerUp);
+      this.canvas.addEventListener("pointercancel", this.onPointerCancel);
+      this.canvas.addEventListener("pointerleave", this.onPointerLeave);
+    }
+    if (opts.autoplay) this.play();
+  }
+  canvas;
+  ctx;
+  doc;
+  loop;
+  pad;
+  dpr = 1;
+  cssW = 0;
+  cssH = 0;
+  view = { tx: 0, ty: 0, scale: 1 };
+  frame = 0;
+  playing = false;
+  raf = 0;
+  last = 0;
+  simAcc = 0;
+  // time accumulator for the fixed-step simulation (onEnterFrame)
+  // Render interpolation (anti-judder): we draw the motion driven by `onEnterFrame` at the INTERPOLATED
+  // position between the two last sim steps, by `simAlpha = simAcc/SIM_STEP`. Otherwise a 60 Hz sim
+  // on a 120 Hz screen (ProMotion) stutters. Cf. "Fix Your Timestep" (Gaffer).
+  prevSimVars = null;
+  simAlpha = 1;
+  simActive = false;
+  audioOn;
+  onEvent;
+  renderOn = true;
+  imageProvider;
+  resolveAsset;
+  // Gesture recording (`--record`): we play by hand, capture down/up/cancel + the `move`s
+  // DURING a drag (reduced volume), with `wait`s (elapsed frames) between them -> replayable script.
+  recording = null;
+  recordFrame = 0;
+  // Perf: cache of static filtered composites (set dressing). `imageEpoch` bumps on each decoded image
+  // -> invalidates the entries depending on an asset that just loaded. Cleared when the doc changes.
+  filterCache = /* @__PURE__ */ new Map();
+  imageEpoch = 0;
+  activeSources = [];
+  // -- Interaction (Layer B) --
+  vars = /* @__PURE__ */ new Map();
+  procs = /* @__PURE__ */ new Map();
+  // fn name(p) { ... }
+  valueFuncs = [];
+  // fn name(p) = expr (compiled)
+  funcDepth = 0;
+  // anti-recursion guard (procedures + value functions)
+  mouse = { x: 0, y: 0, dx: 0, dy: 0 };
+  // dx/dy = movement SINCE the last tick (reset to 0 after onEnterFrame) -> "is the mouse moving this frame?"
+  heldKeys = /* @__PURE__ */ new Set();
+  keyProxy = new Proxy(
+    {},
+    { get: (_t, k) => typeof k === "string" && this.heldKeys.has(k) ? 1 : 0 }
+  );
+  hovered = null;
+  hoverIds = /* @__PURE__ */ new Set();
+  // ALL ids in the topmost hit chain under the pointer (for self.hovered feedback, handler-independent)
+  selfChannels = null;
+  // `self` in a handler = the targeted object's channels (set for the duration of runActions)
+  selfParent = null;
+  // world transform of the targeted object's parent -> toLocal/toGlobal conversions
+  // namedChannels resolves the WHOLE scene (costly); memoized per frame -- otherwise recomputed on every
+  // evalNumber (hundreds/frame in a game) -> stutter. Invalidated by inputs (cf. bustNamed).
+  namedCache = null;
+  namedFrame = Number.NaN;
+  // -- Grabbing (drag / press / long-press) --
+  grabbed = null;
+  // grabbed item (between pointerdown and pointerup)
+  grabStart = { x: 0, y: 0 };
+  // world point of the grab (long-press tolerance)
+  dragActive = null;
+  // "drag" interactor in progress (parentInv cached at grab time)
+  // `reveal` coverage PERSISTED per target across grabs → true monotonicity (a child scratching with
+  // several short strokes keeps accumulating instead of resetting to the current stroke each grab).
+  revealStates = /* @__PURE__ */ new Map();
+  longPressTimer = null;
+  lastFrameInt = -1;
+  onResize = () => {
+    this.measure();
+    this.render();
+  };
+  /** Invalidates the named-objects cache (input changed outside of a frame advance). */
+  bustNamed() {
+    this.namedFrame = Number.NaN;
+  }
+  onKeyDown = (e) => {
+    this.heldKeys.add(e.key);
+    if (e.key === " ") this.heldKeys.add("Space");
+    this.bustNamed();
+  };
+  onKeyUp = (e) => {
+    this.heldKeys.delete(e.key);
+    if (e.key === " ") this.heldKeys.delete("Space");
+    this.bustNamed();
+  };
+  onPointerLeave = () => {
+    if (this.grabbed) {
+      const id = this.grabbed;
+      this.clearGrab();
+      this.fireEvent(id, "release");
+    }
+    if (this.hovered) {
+      this.fireEvent(this.hovered, "leave");
+      this.hovered = null;
+    }
+    this.hoverIds.clear();
+    this.render();
+  };
+  worldPoint(e) {
+    const r = this.canvas.getBoundingClientRect();
+    return { x: (e.clientX - r.left - this.view.tx) / this.view.scale, y: (e.clientY - r.top - this.view.ty) / this.view.scale };
+  }
+  /**
+   * Target of an event at a point: we walk ALL the hit chains (top to bottom) and, within each,
+   * from deepest to root. The first item carrying a handler for `event` wins. This way a click
+   * "falls through" a non-interactive item placed on top down to the clickable one below, instead
+   * of being swallowed by it.
+   */
+  pickTarget(chains, events) {
+    const inter = this.doc.interactions;
+    if (!inter) return null;
+    for (const chain of chains) {
+      for (let i = chain.length - 1; i >= 0; i--) {
+        if (inter.some((x) => x.targetId === chain[i] && events.includes(x.event))) return chain[i];
+      }
+    }
+    return null;
+  }
+  interactorFor(id) {
+    return this.doc.interactors?.find((x) => x.targetId === id);
+  }
+  /** Is the drag active? `enabled` absent = always; otherwise true iff the expression is != 0. */
+  interactorEnabled(it) {
+    return !it.enabled || this.evalNumber(it.enabled) !== 0;
+  }
+  /** Topmost grabbable item carrying an ACTIVE (drag) interactor, at a point. */
+  pickInteractor(chains) {
+    const ins = this.doc.interactors;
+    if (!ins?.length) return null;
+    for (const chain of chains) for (let i = chain.length - 1; i >= 0; i--) if (ins.some((x) => x.targetId === chain[i] && this.interactorEnabled(x))) return chain[i];
+    return null;
+  }
+  /** Applies the current drag: position = pointer + grab offset, then snap, then confine; writes varX/varY.
+   *  Snap/confine are in WORLD space (where the visual grid and the zone bbox live); the result is brought back into
+   *  the object's PARENT space (`parentInv` cached at grab time -- no scene walk per movement). */
+  /** Writes a gesture output: simple variable `name`, or array element `name[idx]` (idx is EVALUATED).
+   *  The indexed form is the natural output under `each` (e.g. `drag hx[i], hy[i]` -> `hx[0]`... after unfolding). */
+  writeOut(target, value) {
+    const lb = target.indexOf("[");
+    if (lb < 0) {
+      this.vars.set(target, value);
+      return;
+    }
+    const a = this.vars.get(target.slice(0, lb));
+    if (!Array.isArray(a)) return;
+    const i = Math.round(this.evalNumber(target.slice(lb + 1, target.lastIndexOf("]"))));
+    if (i >= 0 && i < a.length) a[i] = value;
+  }
+  applyDrag(p) {
+    const d = this.dragActive;
+    if (!d) return;
+    if (d.it.axis === "turn") {
+      const piv = d.it.pivot ?? { x: 0, y: 0 };
+      let a = Math.atan2(p.y - piv.y, p.x - piv.x) * 180 / Math.PI;
+      if (d.it.grid && d.it.grid > 0) a = Math.round(a / d.it.grid) * d.it.grid;
+      if (d.it.varX) this.writeOut(d.it.varX, a);
+      this.bustNamed();
+      return;
+    }
+    if (d.it.axis === "trace") {
+      const path = d.tracePath;
+      if (path && path.subpaths.length) {
+        const t = projectToPath(path, p);
+        const near = samplePathAt(path, t).point;
+        const tol = d.it.grid && d.it.grid > 0 ? d.it.grid : 24;
+        if (Math.hypot(p.x - near.x, p.y - near.y) <= tol) d.traceMaxT = Math.max(d.traceMaxT ?? 0, t);
+        if (d.it.varX) this.writeOut(d.it.varX, d.traceMaxT ?? 0);
+        this.bustNamed();
+      }
+      return;
+    }
+    if (d.it.axis === "reveal") {
+      const g = d.revealGrid;
+      const cells = d.revealCells;
+      if (g && cells) {
+        const brush = d.it.grid && d.it.grid > 0 ? d.it.grid : 24;
+        const c0 = Math.max(0, Math.floor((p.x - brush - g.minX) / g.cell));
+        const c1 = Math.min(g.cols - 1, Math.floor((p.x + brush - g.minX) / g.cell));
+        const r0 = Math.max(0, Math.floor((p.y - brush - g.minY) / g.cell));
+        const r1 = Math.min(g.rows - 1, Math.floor((p.y + brush - g.minY) / g.cell));
+        for (let r = r0; r <= r1; r++) for (let c = c0; c <= c1; c++) {
+          const cx = g.minX + (c + 0.5) * g.cell;
+          const cy = g.minY + (r + 0.5) * g.cell;
+          if (Math.hypot(p.x - cx, p.y - cy) <= brush) cells.add(r * g.cols + c);
+        }
+        if (d.it.varX) this.writeOut(d.it.varX, cells.size / (g.cols * g.rows));
+        this.bustNamed();
+      }
+      return;
+    }
+    if (d.it.axis === "link") {
+      if (d.it.varX) this.writeOut(d.it.varX, p.x);
+      if (d.it.varY) this.writeOut(d.it.varY, p.y);
+      this.bustNamed();
+      return;
+    }
+    let x = p.x + d.offX;
+    let y = p.y + d.offY;
+    if (d.it.grid && d.it.grid > 0) {
+      x = Math.round(x / d.it.grid) * d.it.grid;
+      y = Math.round(y / d.it.grid) * d.it.grid;
+    }
+    if (d.it.confine) {
+      const b = itemBoundsByName(this.doc, d.it.confine);
+      if (b) {
+        x = Math.max(b.minX, Math.min(b.maxX, x));
+        y = Math.max(b.minY, Math.min(b.maxY, y));
+      }
+    }
+    const local = apply3(d.parentInv, { x, y });
+    if (d.it.axis !== "y" && d.it.varX) this.writeOut(d.it.varX, local.x);
+    if (d.it.axis !== "x" && d.it.varY) this.writeOut(d.it.varY, local.y);
+    this.bustNamed();
+  }
+  /** Reveal state for a target: the grid of cells (side = brush) over its WORLD bbox, with the ticked cells
+   *  PERSISTED across grabs (`revealStates`) so coverage accumulates monotonically over several strokes. */
+  revealGridFor(id, it) {
+    const cached = this.revealStates.get(id);
+    if (cached) return cached;
+    const b = itemBoundsById(this.doc, id);
+    if (!b) return {};
+    const cell = it.grid && it.grid > 0 ? it.grid : 24;
+    const cols = Math.max(1, Math.ceil((b.maxX - b.minX) / cell));
+    const rows = Math.max(1, Math.ceil((b.maxY - b.minY) / cell));
+    const state = { revealCells: /* @__PURE__ */ new Set(), revealGrid: { minX: b.minX, minY: b.minY, cell, cols, rows } };
+    this.revealStates.set(id, state);
+    return state;
+  }
+  /** On release of a `link`: 1st target (named child of the group) containing the pointer -> index 1..n (0 = none).
+   *  If linked, the wire end (endX/endY) sticks to the target center; otherwise it stays at the pointer (the author handles
+   *  the "return" via target == 0). Several links coexist: one `link` interactor per source object. */
+  resolveLink(it, pointer) {
+    const targets = it.confine ? groupTargets(this.doc, it.confine) : [];
+    let hit = 0;
+    for (let i = 0; i < targets.length; i++) {
+      const b = targets[i].bbox;
+      if (pointer.x >= b.minX && pointer.x <= b.maxX && pointer.y >= b.minY && pointer.y <= b.maxY) {
+        hit = i + 1;
+        if (it.varX) this.writeOut(it.varX, (b.minX + b.maxX) / 2);
+        if (it.varY) this.writeOut(it.varY, (b.minY + b.maxY) / 2);
+        break;
+      }
+    }
+    if (it.varT) this.writeOut(it.varT, hit);
+    this.bustNamed();
+  }
+  /** On release: `when dropped on Zone` whose tested point falls within the zone bbox.
+   *  Tested point = the object's CENTER by default, or the POINTER if `at pointer`. Zone = the group's
+   *  explicit `hitbox` if present, otherwise the (static) bbox of its content. */
+  fireDrops(id, pointer) {
+    const drops = this.doc.interactions?.filter((x) => x.targetId === id && x.event === "drop");
+    if (!drops?.length) return;
+    const pos = objectChannelsById(this.doc, id, this.frame, this.exprCtx(), this.fps);
+    const center = { x: pos?.x ?? pointer.x, y: pos?.y ?? pointer.y };
+    for (const d of drops) {
+      if (!d.over) continue;
+      const t = d.atPointer ? pointer : center;
+      const b = dropZoneBounds(this.doc, d.over);
+      if (b && t.x >= b.minX && t.x <= b.maxX && t.y >= b.minY && t.y <= b.maxY) runActions(d.actions, this.host);
+    }
+  }
+  fireEvent(id, event) {
+    const matched = this.doc.interactions?.filter((x) => x.targetId === id && x.event === event);
+    if (!matched?.length) return;
+    const prevSelf = this.selfChannels;
+    const prevParent = this.selfParent;
+    this.selfChannels = null;
+    this.selfParent = null;
+    const ctx = this.exprCtx();
+    this.selfChannels = objectChannelsById(this.doc, id, this.frame, ctx, this.fps) ?? null;
+    this.selfParent = objectParentTransform(this.doc, id, this.frame, ctx, this.fps) ?? IDENTITY3;
+    for (const x of matched) runActions(x.actions, this.host);
+    this.selfChannels = prevSelf;
+    this.selfParent = prevParent;
+  }
+  onPointerMove = (e) => {
+    const p = this.worldPoint(e);
+    this.mouse.dx += p.x - this.mouse.x;
+    this.mouse.dy += p.y - this.mouse.y;
+    this.mouse.x = p.x;
+    this.mouse.y = p.y;
+    this.bustNamed();
+    if (this.grabbed) {
+      this.record("move", p, e.pointerId);
+      if (Math.hypot(p.x - this.grabStart.x, p.y - this.grabStart.y) > LONGPRESS_TOL) this.cancelLongPress();
+      this.canvas.style.cursor = "grabbing";
+      this.applyDrag(p);
+      this.fireEvent(this.grabbed, "drag");
+      this.render();
+      return;
+    }
+    if (this.doc.interactions?.length || this.doc.interactors?.length) {
+      const chains = hitChains(this.doc, this.frame, this.exprCtx(), p);
+      this.hoverIds = new Set(chains[0] ?? []);
+      this.canvas.style.cursor = this.pickTarget(chains, GRAB_EVENTS) ?? this.pickInteractor(chains) ? "grab" : this.pickTarget(chains, CLICK_EVENTS) ? "pointer" : "default";
+      const hov = this.pickTarget(chains, HOVER_EVENTS);
+      if (hov !== this.hovered) {
+        if (this.hovered) this.fireEvent(this.hovered, "leave");
+        if (hov) this.fireEvent(hov, "enter");
+        this.hovered = hov;
+      }
+    }
+    this.render();
+  };
+  onPointerDown = (e) => {
+    if (!this.doc.interactions?.length && !this.doc.interactors?.length) return;
+    const p = this.worldPoint(e);
+    this.record("down", p, e.pointerId);
+    const chains = hitChains(this.doc, this.frame, this.exprCtx(), p);
+    const clickId = this.pickTarget(chains, CLICK_EVENTS);
+    const grabId = this.pickTarget(chains, GRAB_EVENTS) ?? this.pickInteractor(chains);
+    if (clickId) this.fireEvent(clickId, "click");
+    if (grabId) {
+      this.grabbed = grabId;
+      this.grabStart = p;
+      const inter = this.interactorFor(grabId);
+      if (inter && this.interactorEnabled(inter)) {
+        const ctx = this.exprCtx();
+        const pos = objectChannelsById(this.doc, grabId, this.frame, ctx, this.fps);
+        const parent = objectParentTransform(this.doc, grabId, this.frame, ctx, this.fps) ?? IDENTITY3;
+        this.dragActive = { it: inter, offX: (pos?.x ?? p.x) - p.x, offY: (pos?.y ?? p.y) - p.y, parentInv: invert2(parent), ...inter.axis === "trace" ? { tracePath: inter.confine ? tracePathByName(this.doc, inter.confine) : null, traceMaxT: 0 } : {}, ...inter.axis === "reveal" ? this.revealGridFor(grabId, inter) : {} };
+      }
+      this.canvas.setPointerCapture?.(e.pointerId);
+      this.fireEvent(grabId, "press");
+      this.cancelLongPress();
+      this.longPressTimer = setTimeout(() => {
+        this.longPressTimer = null;
+        if (this.grabbed === grabId) {
+          this.fireEvent(grabId, "longpress");
+          this.render();
+        }
+      }, LONGPRESS_MS);
+    }
+    if (clickId || grabId) this.render();
+  };
+  onPointerUp = (e) => {
+    if (!this.grabbed) return;
+    const id = this.grabbed;
+    const p = this.worldPoint(e);
+    this.record("up", p, e.pointerId);
+    this.canvas.releasePointerCapture?.(e.pointerId);
+    if (this.dragActive?.it.axis === "link") this.resolveLink(this.dragActive.it, p);
+    this.fireEvent(id, "release");
+    if (this.dragActive) this.fireDrops(id, p);
+    this.clearGrab();
+    this.render();
+  };
+  // Interrupted gesture (canceled touch, OS gesture): we release WITHOUT a drop (the pointer did not "let go" on a target).
+  onPointerCancel = (e) => {
+    if (!this.grabbed) return;
+    const id = this.grabbed;
+    this.record("cancel", this.worldPoint(e), e.pointerId);
+    this.canvas.releasePointerCapture?.(e.pointerId);
+    this.fireEvent(id, "release");
+    this.clearGrab();
+    this.render();
+  };
+  cancelLongPress() {
+    if (this.longPressTimer !== null) {
+      clearTimeout(this.longPressTimer);
+      this.longPressTimer = null;
+    }
+  }
+  clearGrab() {
+    this.grabbed = null;
+    this.dragActive = null;
+    this.cancelLongPress();
+  }
+  /** Surface exposed to the action interpreter (frame-actions, future onClick). */
+  host = {
+    play: () => this.play(),
+    pause: () => this.pause(),
+    seek: (f) => this.seek(f),
+    labelFrame: (name) => this.doc.timeline?.labels?.find((l) => l.name === name)?.frame,
+    setVar: (name, v) => {
+      this.vars.set(name, v);
+    },
+    setIndex: (name, i, v) => {
+      const a = this.vars.get(name);
+      if (Array.isArray(a) && i >= 0 && i < a.length) a[i] = v;
+    },
+    callProc: (name, args) => this.callProc(name, args),
+    evalNumber: (src) => this.evalNumber(src),
+    emit: (name, value) => this.emit(name, value),
+    textContent: (itemId) => this.textContent(itemId),
+    playSound: (assetId) => this.playSound(assetId)
+  };
+  /**
+   * Timelines of "active" symbols (referenced by >=1 instance), deduplicated,
+   * with a representative local frame. NB (v1): single playhead -> the symbol
+   * actions share the global state; gotoFrame/play acts on the root.
+   */
+  activeSymbolTimelines(rootFrame) {
+    const out = [];
+    const seenSym = /* @__PURE__ */ new Set();
+    const walk = (layers, frame, seen) => {
+      for (const layer of layers) {
+        for (const it of layer.items) {
+          if (isInstance3(it)) {
+            if (seen.has(it.symbolId)) continue;
+            const sym = getSymbol3(this.doc, it.symbolId);
+            const local = sym?.timeline ? resolveInstanceFrame3(it.playback, frame, sym.timeline.durationFrames) : frame;
+            if (sym?.timeline && !seenSym.has(it.symbolId)) {
+              seenSym.add(it.symbolId);
+              out.push({ tl: sym.timeline, frame: local });
+            }
+            walk(containerLayers3(this.doc, it), local, /* @__PURE__ */ new Set([...seen, it.symbolId]));
+          } else if (isGroup3(it)) {
+            walk(it.layers, frame, seen);
+          }
+        }
+      }
+    };
+    walk(this.doc.layers, rootFrame, /* @__PURE__ */ new Set());
+    return out;
+  }
+  /** Actions on load (onLoad): root + active symbols. */
+  fireLoad() {
+    let changed = false;
+    if (this.doc.timeline?.onLoad?.length) {
+      runActions(this.doc.timeline.onLoad, this.host);
+      changed = true;
+    }
+    for (const s of this.activeSymbolTimelines(0)) {
+      if (s.tl.onLoad?.length) {
+        runActions(s.tl.onLoad, this.host);
+        changed = true;
+      }
+    }
+    if (changed) this.render();
+  }
+  /** (Re)compiles the available functions: imported packages (`use ...`) + doc functions (`fn ...`,
+   *  which TAKE PRECEDENCE on a name clash). -> procedures + value functions. */
+  buildFunctions() {
+    this.procs.clear();
+    this.valueFuncs = [];
+    for (const f of [...importedFunctions(this.doc.imports), ...this.doc.functions ?? []]) {
+      if (f.kind === "proc") this.procs.set(f.name, { params: f.params, body: f.body });
+      else this.valueFuncs.push({ name: f.name, params: f.params, comp: compileExpr(f.expr) });
+    }
+  }
+  /** Calls a procedure `fn name(p) { ... }`: binds the params (save/restore), bounds the recursion. */
+  callProc(name, args) {
+    const f = this.procs.get(name);
+    if (!f || this.funcDepth > 64) return;
+    const saved = f.params.map((p) => [p, this.vars.get(p)]);
+    f.params.forEach((p, i) => this.vars.set(p, args[i] ?? 0));
+    this.funcDepth++;
+    runActions(f.body, this.host);
+    this.funcDepth--;
+    for (const [p, v] of saved) {
+      if (v === void 0) this.vars.delete(p);
+      else this.vars.set(p, v);
+    }
+  }
+  /** Runtime context for expressions: variables (flattened), mouse, keys, random, value functions,
+   *  + scene objects by name (`Hero.x`, cf. sceneRefs). */
+  exprCtx(vars = this.vars) {
+    const interp = vars !== this.vars;
+    const ctx = { mouse: this.mouse, keys: this.keyProxy, random: () => Math.random() };
+    for (const [k, v] of vars) ctx[k] = v;
+    for (const vf of this.valueFuncs) {
+      ctx[vf.name] = (...args) => {
+        if (this.funcDepth > 64 || !vf.comp.ok) return Number.NaN;
+        const local = exprScope(ctx, this.frame / this.fps, this.frame);
+        vf.params.forEach((p, i) => {
+          local[p] = args[i] ?? 0;
+        });
+        this.funcDepth++;
+        const r = evalExpr(vf.comp.node, local, Number.NaN);
+        this.funcDepth--;
+        return r;
+      };
+    }
+    if (interp) {
+      const named = namedChannels(this.doc, this.frame, ctx, this.fps);
+      for (const name in named) if (!(name in ctx)) ctx[name] = named[name];
+    } else {
+      if (!this.namedCache || this.namedFrame !== this.frame) {
+        this.namedCache = namedChannels(this.doc, this.frame, ctx, this.fps);
+        this.namedFrame = this.frame;
+      }
+      for (const name in this.namedCache) if (!(name in ctx)) ctx[name] = this.namedCache[name];
+    }
+    if (this.selfChannels) ctx.self = this.selfChannels;
+    if (this.selfParent) Object.assign(ctx, spaceConversions(this.selfParent));
+    return ctx;
+  }
+  evalNumber(src) {
+    const c = compileExpr(src);
+    if (!c.ok) return 0;
+    return evalExpr(c.node, exprScope(this.exprCtx(), this.frame / this.fps, this.frame), 0);
+  }
+  /**
+   * Emits a `send` event toward the host. Silent no-op if no `onEvent` is provided
+   * (e.g. editor preview). Defense-in-depth validation (the parser already guarantees the name):
+   * conforming name, finite number (NaN -> 0, DSL convention), text <= MAX_SEND_TEXT (truncated).
+   * If the host callback throws, we catch and log -- the player does not break.
+   */
+  emit(name, value) {
+    if (!this.onEvent || !SEND_EVENT_NAME.test(name)) return;
+    let v = value;
+    if (typeof v === "number") {
+      if (!Number.isFinite(v)) v = 0;
+    } else if (typeof v === "string" && v.length > MAX_SEND_TEXT) v = v.slice(0, MAX_SEND_TEXT);
+    try {
+      this.onEvent(v === void 0 ? { name } : { name, value: v });
+    } catch (e) {
+      console.error("FlatPlayer: the onEvent callback threw an exception", e);
+    }
+  }
+  /** Live content of a Text item resolved by id OR name (for `text("...")`). `''` + warning if absent. */
+  textContent(key) {
+    const t = this.findText(key);
+    if (!t) {
+      console.warn(`FlatPlayer: text("${key}") -- no Text item "${key}" (id or name) in the document`);
+      return "";
+    }
+    return t.content.length > MAX_SEND_TEXT ? t.content.slice(0, MAX_SEND_TEXT) : t.content;
+  }
+  /**
+   * Looks up a Text item in the scene (layers + groups) and the library symbols.
+   * Resolves by `id` first (stable id set via `text "..." as "<id>"`), then by `name` as a fallback --
+   * like the rest of the text format references by name (`object "x"`, `instance "Sym" as "y"`).
+   */
+  findText(key) {
+    const scan = (layers, match) => {
+      for (const layer of layers) {
+        for (const it of layer.items) {
+          if (isText3(it)) {
+            if (match(it)) return it;
+          } else if (isGroup3(it)) {
+            const f = scan(it.layers, match);
+            if (f) return f;
+          }
+        }
+      }
+      return void 0;
+    };
+    const find = (match) => {
+      const inScene = scan(this.doc.layers, match);
+      if (inScene) return inScene;
+      for (const s of this.doc.symbols) {
+        const f = scan(s.layers, match);
+        if (f) return f;
+      }
+      return void 0;
+    };
+    return find((t) => t.id === key) ?? find((t) => t.name === key);
+  }
+  /** Plays an audio clip (asset) as a one-shot (`sound "id"` DSL). No-op if audio is off / asset absent. */
+  playSound(assetId) {
+    if (!this.audioOn) return;
+    const c = getAudioCtx();
+    if (c.state === "suspended") void c.resume();
+    const buf = playerAudioBuffers.get(assetId);
+    if (!buf || buf === "loading") {
+      this.decodeAudio(assetId);
+      return;
+    }
+    const src = c.createBufferSource();
+    src.buffer = buf;
+    src.connect(c.destination);
+    src.onended = () => {
+      this.activeSources = this.activeSources.filter((s) => s !== src);
+    };
+    src.start();
+    this.activeSources.push(src);
+  }
+  get fps() {
+    return Math.max(1, this.doc.timeline?.fps ?? 24);
+  }
+  get duration() {
+    return Math.max(1, this.doc.timeline?.durationFrames ?? 1);
+  }
+  get currentFrame() {
+    return this.frame;
+  }
+  get isPlaying() {
+    return this.playing;
+  }
+  /**
+   * Reads a state variable (Layer B) from the host: score, difficulty... `undefined` if absent.
+   * Returns a COPY of the arrays (the host cannot mutate the internal state by reference).
+   */
+  getVar(name) {
+    const v = this.vars.get(name);
+    return Array.isArray(v) ? [...v] : v;
+  }
+  /** Snapshot (copied) of all the state variables -- for debugging / the headless harness. */
+  allVars() {
+    const out = {};
+    for (const [k, v] of this.vars) out[k] = Array.isArray(v) ? [...v] : v;
+    return out;
+  }
+  // -- Gesture recording (`--record`) --
+  /** Starts recording (clears the previous one). Play the activity by hand, then `stopRecording()`. */
+  startRecording() {
+    this.recording = [];
+    this.recordFrame = this.frame;
+  }
+  /** Stops recording and returns the gesture script (replayable by `--play` / `playHeadless`). */
+  stopRecording() {
+    const r = this.recording ?? [];
+    this.recording = null;
+    return r;
+  }
+  get isRecording() {
+    return this.recording != null;
+  }
+  /** Center (RESOLVED origin, expressions included) of a named object, in world coords -- for the
+   *  semantic gestures `drag`/`tap` by name. `null` if the object does not exist. */
+  objectCenter(name) {
+    this.exprCtx();
+    const ch = this.namedCache?.[name];
+    return ch ? { x: ch.x, y: ch.y } : null;
+  }
+  /** Captures a gesture (no-op outside recording). Inserts a `wait` = frames elapsed since the last gesture. */
+  record(type, p, id) {
+    if (!this.recording) return;
+    const dframes = Math.round(this.frame - this.recordFrame);
+    if (dframes > 0) {
+      this.recording.push({ type: "wait", frames: dframes });
+      this.recordFrame = this.frame;
+    }
+    const r = (n) => Math.round(n * 100) / 100;
+    this.recording.push({ type, x: r(p.x), y: r(p.y), ...id !== 1 ? { id } : {} });
+  }
+  /**
+   * Writes a state variable (Layer B) from the host, then redraws -> bidirectional
+   * driving channel (the host sets the difficulty, injects a value, etc.). Clones the arrays.
+   */
+  setVar(name, value) {
+    this.vars.set(name, Array.isArray(value) ? [...value] : value);
+    this.bustNamed();
+    this.render();
+  }
+  /** Replaces the played document (resets the framing + the variables, keeps the frame). */
+  load(doc) {
+    this.doc = applyInstanceBinds(withCels(sanitizeDoc(doc)));
+    this.vars = cloneVars(doc.variables);
+    this.namedCache = null;
+    this.filterCache.clear();
+    this.revealStates.clear();
+    this.bustNamed();
+    this.buildFunctions();
+    this.measure();
+    this.render();
+    this.fireLoad();
+  }
+  measure() {
+    const r = this.canvas.getBoundingClientRect();
+    this.dpr = window.devicePixelRatio || 1;
+    this.cssW = r.width;
+    this.cssH = r.height;
+    this.canvas.width = Math.max(1, Math.round(r.width * this.dpr));
+    this.canvas.height = Math.max(1, Math.round(r.height * this.dpr));
+    this.view = fit(r.width, r.height, this.doc.width, this.doc.height, this.pad);
+  }
+  /** Draws the current frame (pure, without advancing time). */
+  render() {
+    if (!this.renderOn) return;
+    const { ctx, doc, view, dpr } = this;
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    ctx.clearRect(0, 0, this.cssW, this.cssH);
+    ctx.save();
+    ctx.translate(view.tx, view.ty);
+    ctx.scale(view.scale, view.scale);
+    if (doc.background) {
+      ctx.fillStyle = doc.background;
+      ctx.fillRect(0, 0, doc.width, doc.height);
+    }
+    ctx.beginPath();
+    ctx.rect(0, 0, doc.width, doc.height);
+    ctx.clip();
+    const expr = this.playing && this.simActive && this.prevSimVars && this.simAlpha < 1 ? this.exprCtx(lerpVars(this.prevSimVars, this.vars, this.simAlpha)) : this.exprCtx();
+    renderLayers(ctx, doc, doc.layers, this.frame, null, /* @__PURE__ */ new Set(), { fps: this.fps, expr, image: (id) => this.imageFor(id), filterCache: this.filterCache, imageEpoch: this.imageEpoch, itemState: (id) => this.itemStateFor(id) });
+    ctx.restore();
+  }
+  /** Interaction state of an item for `self.hovered`/`self.grabbed`/`self.pressed` in its channel exprs.
+   *  Returns undefined when the item is neither hovered nor grabbed (the cheap, common path → flags 0). */
+  itemStateFor(id) {
+    const hovered = this.hoverIds.has(id) ? 1 : 0;
+    const grabbed = this.grabbed === id ? 1 : 0;
+    return hovered || grabbed ? { hovered, grabbed, pressed: grabbed } : void 0;
+  }
+  // Decoded image of an asset (module cache). `null` while not loaded -> re-render on decode.
+  imageFor(assetId) {
+    if (this.imageProvider) return this.imageProvider(assetId);
+    const a = this.doc.assets?.find((x) => x.id === assetId);
+    if (!a) return null;
+    const url = this.resolveAsset(a);
+    if (url == null) return null;
+    let img = playerImgCache.get(a.id);
+    if (!img) {
+      img = new Image();
+      img.onload = () => {
+        this.imageEpoch++;
+        this.render();
+      };
+      img.src = url;
+      playerImgCache.set(a.id, img);
+    }
+    return img.complete && img.naturalWidth > 0 ? img : null;
+  }
+  seek(frame) {
+    this.frame = Math.max(0, Math.min(this.duration, frame));
+    this.lastFrameInt = Math.floor(this.frame);
+    if (this.playing) this.startAudio(this.frame);
+    this.render();
+  }
+  /**
+   * Advances the simulation by `steps` FIXED steps (60 Hz) without RAF: runs `onEnterFrame`
+   * (root + active symbols) and advances the playhead as if real time elapsed.
+   * Used by the headless mode (`--play`, `wait` gesture) to let a physics simulation
+   * unfold between two gestures -- in Node, requestAnimationFrame does not exist.
+   */
+  stepSim(steps) {
+    const rootSim = this.doc.timeline?.onEnterFrame;
+    for (let i = 0; i < Math.max(0, Math.floor(steps)); i++) {
+      let f = this.frame + SIM_STEP * this.fps;
+      if (f >= this.duration) f = this.loop ? f % this.duration : this.duration;
+      this.frame = f;
+      const symSims = this.activeSymbolTimelines(f).filter((s) => s.tl.onEnterFrame?.length);
+      if (rootSim?.length) runActions(rootSim, this.host);
+      for (const s of symSims) runActions(s.tl.onEnterFrame, this.host);
+      this.mouse.dx = 0;
+      this.mouse.dy = 0;
+      this.fireFrameActions();
+    }
+    this.render();
+  }
+  // -- Audio --
+  get audioEnabled() {
+    return this.audioOn;
+  }
+  /** Enables/disables audio (cuts immediately if off; (re)starts if on and playing). */
+  setAudio(on) {
+    if (on === this.audioOn) return;
+    this.audioOn = on;
+    if (!on) this.stopAudio();
+    else if (this.playing) this.startAudio(this.frame);
+  }
+  stopAudio() {
+    for (const s of this.activeSources) {
+      try {
+        s.stop();
+      } catch {
+      }
+    }
+    this.activeSources = [];
+  }
+  decodeAudio(assetId) {
+    if (playerAudioBuffers.has(assetId)) return;
+    const a = this.doc.assets?.find((x) => x.id === assetId);
+    if (!a) return;
+    const url = this.resolveAsset(a);
+    if (url == null) return;
+    playerAudioBuffers.set(assetId, "loading");
+    fetch(url).then((r) => r.arrayBuffer()).then((b) => getAudioCtx().decodeAudioData(b)).then((buf) => playerAudioBuffers.set(assetId, buf)).catch(() => playerAudioBuffers.delete(assetId));
+  }
+  /** (Re)schedules the audio clips for a playback starting from `fromFrame`. */
+  startAudio(fromFrame) {
+    this.stopAudio();
+    const sounds = this.doc.timeline?.sounds;
+    if (!this.audioOn || !sounds?.length) return;
+    const c = getAudioCtx();
+    if (c.state === "suspended") void c.resume();
+    const now = c.currentTime + 0.03;
+    for (const sch of scheduleSounds(sounds, this.fps, fromFrame, now)) {
+      const buf = playerAudioBuffers.get(sch.clip.assetId);
+      if (!buf || buf === "loading") {
+        this.decodeAudio(sch.clip.assetId);
+        continue;
+      }
+      if (!sch.clip.loop && sch.offset >= buf.duration) continue;
+      const src = c.createBufferSource();
+      src.buffer = buf;
+      src.loop = !!sch.clip.loop;
+      const g = c.createGain();
+      g.gain.value = sch.clip.gain ?? 1;
+      src.connect(g).connect(c.destination);
+      src.start(sch.when, Math.max(0, sch.offset));
+      this.activeSources.push(src);
+    }
+  }
+  /** Triggers the frame-actions when the playhead enters a new whole frame. */
+  fireFrameActions() {
+    const fi = Math.floor(this.frame);
+    if (fi === this.lastFrameInt) return;
+    this.lastFrameInt = fi;
+    const fa = this.doc.timeline?.frameActions;
+    if (fa) {
+      for (const e of fa) if (e.frame === fi) runActions(e.actions, this.host);
+    }
+  }
+  play() {
+    if (this.playing) return;
+    this.playing = true;
+    this.last = performance.now();
+    this.simAcc = 0;
+    this.prevSimVars = null;
+    this.simAlpha = 1;
+    this.simActive = false;
+    this.startAudio(this.frame);
+    const tick = (now) => {
+      if (!this.playing) return;
+      const dt = Math.min((now - this.last) / 1e3, 0.25);
+      this.last = now;
+      let f = this.frame + dt * this.fps;
+      if (f >= this.duration) {
+        if (this.loop) {
+          f %= this.duration;
+          this.startAudio(f);
+        } else {
+          f = this.duration;
+          this.playing = false;
+          this.stopAudio();
+        }
+      }
+      this.frame = f;
+      const symTLs = this.activeSymbolTimelines(f);
+      const rootSim = this.doc.timeline?.onEnterFrame;
+      const symSims = symTLs.filter((s) => s.tl.onEnterFrame?.length);
+      if (rootSim?.length || symSims.length) {
+        this.simActive = true;
+        const { steps, acc } = simSteps(this.simAcc, dt, SIM_STEP, SIM_MAX_STEPS);
+        this.simAcc = acc;
+        for (let i = 0; i < steps && this.playing; i++) {
+          this.prevSimVars = cloneVarMap(this.vars);
+          if (rootSim?.length) runActions(rootSim, this.host);
+          for (const s of symSims) runActions(s.tl.onEnterFrame, this.host);
+        }
+        this.simAlpha = Math.min(1, this.simAcc / SIM_STEP);
+      } else {
+        this.simAcc = 0;
+        this.simActive = false;
+        this.prevSimVars = null;
+      }
+      this.mouse.dx = 0;
+      this.mouse.dy = 0;
+      this.fireFrameActions();
+      this.render();
+      if (this.playing) this.raf = requestAnimationFrame(tick);
+    };
+    this.raf = requestAnimationFrame(tick);
+  }
+  pause() {
+    this.playing = false;
+    this.simActive = false;
+    cancelAnimationFrame(this.raf);
+    this.stopAudio();
+  }
+  toggle() {
+    if (this.playing) this.pause();
+    else this.play();
+  }
+  stop() {
+    this.pause();
+    this.seek(0);
+  }
+  /** Releases the listeners. To be called when the player is no longer used. */
+  destroy() {
+    this.pause();
+    window.removeEventListener("resize", this.onResize);
+    globalThis.removeEventListener("keydown", this.onKeyDown);
+    globalThis.removeEventListener("keyup", this.onKeyUp);
+    this.canvas.removeEventListener("pointermove", this.onPointerMove);
+    this.canvas.removeEventListener("pointerdown", this.onPointerDown);
+    this.canvas.removeEventListener("pointerup", this.onPointerUp);
+    this.canvas.removeEventListener("pointercancel", this.onPointerCancel);
+    this.canvas.removeEventListener("pointerleave", this.onPointerLeave);
+    this.cancelLongPress();
+  }
+};
+
+export {
+  applyTransform,
+  regionPath,
+  renderItems,
+  renderLayers,
+  sameOriginAssetResolver,
+  FlatPlayer
+};
+//# sourceMappingURL=chunk-BXKJAHHO.js.map