pixi-effects 0.35.0 → 0.37.0

package/dist/{chunk-Y253JQOH.js → chunk-SBR75G73.js}

@@ -1,4 +1,4 @@
-import { describeLayer, collectPropKeys } from './chunk-ITDYFBB6.js';
+import { describeLayer, collectPropKeys } from './chunk-32MMNDDN.js';
 import { suggestName, warnUnknownOptions } from './chunk-BXOCEZ4U.js';
 import * as PIXI from 'pixi.js';
 import { Rectangle, Container, FillGradient, Text, Color, GraphicsPath, Sprite, Texture, Graphics, Assets, Filter, GlProgram, defaultFilterVert, GpuProgram, UniformGroup, TextStyle, CanvasTextMetrics } from 'pixi.js';
@@ -971,6 +971,17 @@ function noise(x, seed = 0) {
   const u = f * f * f * (f * (f * 6 - 15) + 10);
   return a + (b - a) * u;
 }
+function noise2(x, y, seed = 0) {
+  if (!Number.isFinite(x) || !Number.isFinite(y)) return 0;
+  const i = Math.floor(x), j = Math.floor(y);
+  const fx = x - i, fy = y - j;
+  const s = fold(seed) * 668265261;
+  const corner = (a, b) => mix2(Math.imul((a | 0) + s, 2654435761) ^ Math.imul((b | 0) + 2135587861, 2246822507)) / 2147483648 - 1;
+  const ux = fx * fx * fx * (fx * (fx * 6 - 15) + 10), uy = fy * fy * fy * (fy * (fy * 6 - 15) + 10);
+  const top = corner(i, j) + (corner(i + 1, j) - corner(i, j)) * ux;
+  const bottom = corner(i, j + 1) + (corner(i + 1, j + 1) - corner(i, j + 1)) * ux;
+  return top + (bottom - top) * uy;
+}
 
 // src/expr/Parser.ts
 var FUNCS = {
@@ -2326,6 +2337,11 @@ function createFilter(spec) {
     return named;
   }
   const { type, name, ...given } = spec;
+  const unset = Object.keys(given).filter((k) => given[k] === void 0);
+  if (unset.length > 0) {
+    console.warn(`pixi-effects: the "${type}" filter has ${unset.map((k) => `"${k}"`).join(", ")} set to undefined (a misspelt variable or a missing field?): the filter's default is used instead.`);
+    for (const k of unset) delete given[k];
+  }
   const params = copyPlain(given);
   const Cls = registry[type];
   const inst = Cls ? new Cls(params) : createNamedFilter(type, params);
@@ -2841,7 +2857,37 @@ var TEXT_STYLE_DEFAULTS = {
 };
 
 // src/sequences/Text.ts
-function formatValue(v, f) {
+var TIME_PATTERNS = ["hh:mm:ss", "h:mm:ss", "hh:mm", "mm:ss", "m:ss"];
+function formatTime(v, pattern, warned2) {
+  if (!TIME_PATTERNS.includes(pattern)) {
+    if (!warned2.has(pattern)) {
+      warned2.add(pattern);
+      console.warn(`pixi-effects: format.time "${pattern}" is not one of ${TIME_PATTERNS.map((p) => `"${p}"`).join(", ")}: the value is printed as a number`);
+    }
+    return null;
+  }
+  const total = Math.floor(Math.abs(v));
+  const h = Math.floor(total / 3600), m = Math.floor(total % 3600 / 60), sec = total % 60;
+  const two = (n) => String(n).padStart(2, "0");
+  const sign = v < 0 && total > 0 ? "-" : "";
+  switch (pattern) {
+    case "hh:mm:ss":
+      return `${sign}${two(h)}:${two(m)}:${two(sec)}`;
+    case "h:mm:ss":
+      return `${sign}${h}:${two(m)}:${two(sec)}`;
+    case "hh:mm":
+      return `${sign}${two(h)}:${two(m)}`;
+    case "mm:ss":
+      return `${sign}${two(Math.floor(total / 60))}:${two(sec)}`;
+    default:
+      return `${sign}${Math.floor(total / 60)}:${two(sec)}`;
+  }
+}
+function formatValue(v, f, warned2 = /* @__PURE__ */ new Set()) {
+  if (f?.time !== void 0) {
+    const t = formatTime(v, String(f.time), warned2);
+    if (t !== null) return t;
+  }
   const fixed = v.toFixed(Math.max(0, Math.floor(f?.decimals ?? 0)));
   const pad = Math.max(0, Math.floor(f?.pad ?? 0));
   if (!f?.grouping && !pad) return fixed;
@@ -2860,6 +2906,8 @@ var TextSequence = class extends Sequence {
   /** `visibleChars` is in play (initial or animated): otherwise the whole text shows. */
   _typed = false;
   _lastText = "";
+  /** The `format.time` patterns already said to be wrong on this layer. */
+  _timeWarned = /* @__PURE__ */ new Set();
   /** A gradient fill for the text (`fillGradient`, static or animated): rebuilt as a FillGradient on each change (the text is re-rasterised). */
   _grad = null;
   _fillGradient = null;
@@ -2886,7 +2934,7 @@ var TextSequence = class extends Sequence {
   }
   /** Rewrite the displayed string from the template, the current `value` and `visibleChars`. */
   _refreshText() {
-    let next = this._template.includes("{value}") ? this._template.split("{value}").join(formatValue(this._counters.value, this.spec.format)) : this._template;
+    let next = this._template.includes("{value}") ? this._template.split("{value}").join(formatValue(this._counters.value, this.spec.format, this._timeWarned)) : this._template;
     if (this._typed) next = Array.from(next).slice(0, Math.max(0, Math.floor(this._counters.visibleChars))).join("");
     if (next === this._lastText) return;
     this._lastText = next;
@@ -2902,6 +2950,11 @@ var TextSequence = class extends Sequence {
       label: this.spec.name
     });
     text.cullable = true;
+    if (this.spec.resolution !== void 0) {
+      const r = this.spec.resolution;
+      if (typeof r === "number" && r >= 1 && r <= 8) text.resolution = r;
+      else console.warn(`pixi-effects: ${describeLayer(this.spec)}: resolution must be a number from 1 to 8 (the text is drawn at that many times the pixels), got ${JSON.stringify(r)}: ignored`);
+    }
     this.target = text;
     this.intrinsicWidth = text.width;
     this.intrinsicHeight = text.height;
@@ -2926,6 +2979,8 @@ var TextSequence = class extends Sequence {
       this.intrinsicWidth = text.width;
       this.intrinsicHeight = text.height;
     }
+    const startFill = initialProps.fill;
+    if (typeof startFill === "string" || typeof startFill === "number") text.style.fill = startFill;
     validateGradientKeyframes(this.spec, describeLayer(this.spec), void 0, "text");
     const gradientSpec = this.spec.fillGradient ?? initialProps.fillGradient;
     if (gradientSpec) {
@@ -3730,7 +3785,7 @@ function resolveSpansStyle(style, scope, who, warn = defaultWarn) {
   }
   return out;
 }
-var TEXT_ONLY = ["type", "spans", "text", "style", "format", "colorSpace", "fillGradient", "initial", "keyframes"];
+var TEXT_ONLY = ["type", "spans", "text", "style", "format", "colorSpace", "fillGradient", "initial", "keyframes", "resolution"];
 var NOT_FOR_A_GROUP = ["fill", "text", "value", "fillGradient"];
 function expandSpans(spec, warn = defaultWarn, scope) {
   const who = describeLayer(spec);
@@ -3775,7 +3830,9 @@ function expandSpans(spec, warn = defaultWarn, scope) {
     name: `${baseName}.${i}`,
     text: p.text,
     style: { ...style, ...p.style },
-    initial: { x: p.x, y: p.y, ...typed ? { visibleChars: p.length } : {} }
+    initial: { x: p.x, y: p.y, ...typed ? { visibleChars: p.length } : {} },
+    ...s.resolution !== void 0 ? { resolution: s.resolution } : {}
+    // the pieces are what is drawn
   }));
   const rest = {};
   for (const [k, v] of Object.entries(s)) if (!TEXT_ONLY.includes(k)) rest[k] = v;
@@ -3783,9 +3840,15 @@ function expandSpans(spec, warn = defaultWarn, scope) {
   spansMeta.set(group, { typed, pieces: drawn.map((p) => ({ start: p.start, length: p.length })), preview: layout.pieces.map((p, i) => (i > 0 && p.line !== layout.pieces[i - 1].line ? " " : "") + p.text).join("") });
   return group;
 }
+var ORIGINAL_SCALE_MODE = /* @__PURE__ */ new WeakMap();
 var ImageSequence = class extends Sequence {
   async build() {
     const texture = await Assets.get(this.spec.asset);
+    const source = texture.source;
+    if (source && !ORIGINAL_SCALE_MODE.has(source)) ORIGINAL_SCALE_MODE.set(source, source.scaleMode);
+    const mode = this.spec.scaleMode;
+    if (mode !== void 0 && mode !== "nearest" && mode !== "linear") console.warn(`pixi-effects: ${describeLayer(this.spec)}: scaleMode "${String(mode)}" is not "nearest" or "linear": ignored`);
+    if (source) source.scaleMode = mode === "nearest" || mode === "linear" ? mode : ORIGINAL_SCALE_MODE.get(source);
     const sprite = new Sprite({ texture, label: this.spec.name });
     sprite.cullable = true;
     this.target = sprite;
@@ -4642,6 +4705,21 @@ function slice(line, a, b) {
   }
   return out;
 }
+function splitEvenOdd(d) {
+  const parts = d.split(/(?=[Mm])/).map((x) => x.trim()).filter(Boolean);
+  if (parts.length < 2) return { main: d.trim(), holes: [] };
+  const area = (sub2) => flattenSvgPath(sub2).reduce((sum, line) => {
+    let a = 0;
+    for (let i = 0; i < line.pts.length; i += 2) {
+      const j = (i + 2) % line.pts.length;
+      a += line.pts[i] * line.pts[j + 1] - line.pts[j] * line.pts[i + 1];
+    }
+    return sum + Math.abs(a) / 2;
+  }, 0);
+  const areas = parts.map(area);
+  const big = areas.indexOf(Math.max(...areas));
+  return { main: parts[big], holes: parts.filter((_, i) => i !== big) };
+}
 
 // src/sequences/morphPath.ts
 function resample(line, n) {
@@ -4704,6 +4782,11 @@ function buildMorph(from, to, n = 128) {
   for (let i = 0; i < count; i++) {
     const fa = from[i], fb = to[i];
     const closed = (fa?.closed ?? fb.closed) && (fb?.closed ?? fa.closed);
+    if (fa && fb && fa.closed === fb.closed && fa.pts.length === fb.pts.length && fa.pts.length >= 6) {
+      const a2 = [...fa.pts];
+      pairs.push({ a: a2, b: closed ? align(a2, [...fb.pts]) : [...fb.pts], closed });
+      continue;
+    }
     const a = fa ? resample({ pts: fa.pts, closed }, n) : collapsed(resample({ pts: fb.pts, closed }, n));
     let b = fb ? resample({ pts: fb.pts, closed }, n) : collapsed(a);
     if (closed && fa && fb) b = align(a, b);
@@ -4787,6 +4870,8 @@ var ShapeSequence = class extends Sequence {
     const morph = this._setupMorph();
     this._drawGeometry = makeDrawGeometry(this.spec, scope, this._state, morph);
     this._outline = makeOutline(this.spec, scope, this._state, morph);
+    const eo = this.spec.shape === "path" && this.spec.fillRule === "evenodd" && !morph ? splitEvenOdd(this.spec.d) : null;
+    this._evenOdd = eo && eo.holes.length > 0 ? eo : null;
     const { trimStart, trimEnd } = this._state;
     this._state.trimStart = 0;
     this._state.trimEnd = 1;
@@ -4852,6 +4937,27 @@ var ShapeSequence = class extends Sequence {
   _painter = null;
   _gradDirty = false;
   _outline = null;
+  /** fillRule 'evenodd' on a path: the shape and the sub-paths cut out of it after it is filled (null: not used). */
+  _evenOdd = null;
+  /**
+   * fillRule 'evenodd': the shape is filled, each hole is cut out of that fill, and the stroke goes round the shape and every hole. (PIXI's `cut()` only reaches the
+   * LAST instruction, so it has to come between the fill and the stroke.)
+   */
+  _fillWithHoles(g) {
+    const s = this._state, { main, holes } = this._evenOdd;
+    applyFill(g, s);
+    for (const hole of holes) {
+      g.beginPath();
+      g.path(new GraphicsPath(hole));
+      g.cut();
+    }
+    if (s.strokeColor !== void 0 && s.strokeWidth > 0) {
+      g.beginPath();
+      g.path(new GraphicsPath(main));
+      for (const hole of holes) g.path(new GraphicsPath(hole));
+      applyStroke(g, s);
+    }
+  }
   _redraw() {
     const graphics = this.target;
     const s = this._state;
@@ -4863,6 +4969,10 @@ var ShapeSequence = class extends Sequence {
     const trimmed = (s.trimStart ?? 0) > 0 || (s.trimEnd ?? 1) < 1;
     if (!trimmed || !this._outline || !(s.strokeColor !== void 0 && s.strokeWidth > 0)) {
       this._drawGeometry(graphics);
+      if (this._evenOdd) {
+        this._fillWithHoles(graphics);
+        return;
+      }
       applyState(graphics, s);
       return;
     }
@@ -5086,8 +5196,9 @@ function makePolygonDraw(spec, scope) {
   };
 }
 function makePathDraw(spec) {
+  const d = spec.fillRule === "evenodd" ? splitEvenOdd(spec.d).main : spec.d;
   return (g) => {
-    g.path(new GraphicsPath(spec.d));
+    g.path(new GraphicsPath(d));
   };
 }
 var STATE_DRAWERS = {
@@ -5618,18 +5729,311 @@ function resolveDim(v, scope) {
   if (typeof v === "number") return v;
   return evaluateExpr(v, scope);
 }
+var MAX_SIZE = 8192;
+var MIN_RESOLUTION = 0.25;
+var MAX_RESOLUTION = 4;
+var NOT_PURE = /\bMath\s*\.\s*random\s*\(|\bDate\s*\.\s*now\s*\(|\bperformance\s*\.\s*now\s*\(|\bnew\s+Date\s*\(/;
+function seeded(seed) {
+  let a = seed >>> 0;
+  return () => {
+    a = a + 1831565813 >>> 0;
+    let t = a;
+    t = Math.imul(t ^ t >>> 15, t | 1);
+    t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+function offscreen(width, height) {
+  const c = document.createElement("canvas");
+  c.width = Math.max(1, Math.round(width));
+  c.height = Math.max(1, Math.round(height));
+  c.getContext("2d", { willReadFrequently: true });
+  return c;
+}
+var CanvasSequence = class extends Sequence {
+  canvas = null;
+  w = 1;
+  h = 1;
+  res = 1;
+  fps = 30;
+  layerW = 1;
+  layerH = 1;
+  seed = 0;
+  smoothing = true;
+  drawFn = null;
+  state;
+  /** The current value of every param: what keyframes move (`params.amount`). */
+  carrier = {};
+  failed = false;
+  warnedDraw = false;
+  warnedPaths = /* @__PURE__ */ new Set();
+  lastKey = "";
+  lastLocal = 0;
+  get canvasSpec() {
+    return this.spec;
+  }
+  pathRouters() {
+    return { params: (path) => this.resolveParam(path) };
+  }
+  async build() {
+    const spec = this.canvasSpec;
+    const who = describeLayer(spec);
+    if (this.duration === void 0) this.duration = this.parent?.duration ?? this.root.duration;
+    const scope = buildScope(this, this.parent, this.root);
+    this.layerW = this.size("width", spec.width, scope, this.parent?.width ?? this.root.width, who);
+    this.layerH = this.size("height", spec.height, scope, this.parent?.height ?? this.root.height, who);
+    const r = spec.resolution;
+    if (r === void 0) this.res = 1;
+    else if (typeof r === "number" && Number.isFinite(r) && r >= MIN_RESOLUTION && r <= MAX_RESOLUTION) this.res = r;
+    else {
+      this.res = typeof r === "number" && Number.isFinite(r) ? Math.min(MAX_RESOLUTION, Math.max(MIN_RESOLUTION, r)) : 1;
+      console.warn(`pixi-effects: ${who}: resolution must be a number from ${MIN_RESOLUTION} to ${MAX_RESOLUTION} (canvas pixels per layer pixel), got ${JSON.stringify(r)}: ${this.res} is used`);
+    }
+    const longest = Math.max(this.layerW, this.layerH);
+    if (longest * this.res > MAX_SIZE) {
+      const fitted = MAX_SIZE / longest;
+      console.warn(`pixi-effects: ${who}: ${this.layerW}\xD7${this.layerH} at resolution ${this.res} would be a canvas of ${Math.round(longest * this.res)} pixels, more than ${MAX_SIZE}: resolution ${Math.round(fitted * 1e3) / 1e3} is used (lower the size or the resolution)`);
+      this.res = fitted;
+    }
+    this.w = Math.max(1, Math.round(this.layerW * this.res));
+    this.h = Math.max(1, Math.round(this.layerH * this.res));
+    this.fps = this.root.frameRate ?? 30;
+    this.seed = typeof spec.seed === "number" && Number.isFinite(spec.seed) ? Math.floor(spec.seed) : 0;
+    this.smoothing = spec.smoothing !== false;
+    const params = spec.params;
+    if (params !== void 0) {
+      if (params === null || typeof params !== "object" || Array.isArray(params)) {
+        console.warn(`pixi-effects: ${who}: params must be an object of numbers, got ${JSON.stringify(params)}: ignored`);
+      } else {
+        const bad = [];
+        for (const [k, v] of Object.entries(params)) {
+          if (typeof v === "number" && Number.isFinite(v)) this.carrier[k] = v;
+          else bad.push(`"${k}"`);
+        }
+        if (bad.length) console.warn(`pixi-effects: ${who}: params ${bad.join(", ")} ${bad.length > 1 ? "are" : "is"} not a number, so ${bad.length > 1 ? "they are" : "it is"} ignored (params holds numbers that keyframes can animate as 'params.<name>')`);
+      }
+    }
+    if (typeof spec.draw === "function") {
+      this.drawFn = spec.draw;
+      if (NOT_PURE.test(spec.draw.toString())) {
+        console.warn(`pixi-effects: ${who}: draw calls Math.random, Date.now, performance.now or new Date, so it is not deterministic: the same frame would draw differently in playback, in a seek and in an export. Use info.random() (seeded), or derive the value from t`);
+      }
+    } else {
+      this.failed = true;
+      console.warn(`pixi-effects: ${who}: a canvas layer needs draw: (ctx, t, info) => { \u2026 } (a function that draws the picture at time t); the layer is drawn as a checkerboard`);
+    }
+    this.canvas = document.createElement("canvas");
+    this.canvas.width = this.w;
+    this.canvas.height = this.h;
+    const sprite = new Sprite({ texture: Texture.from(this.canvas), label: spec.name });
+    if (!this.smoothing) sprite.texture.source.scaleMode = "nearest";
+    sprite.width = this.layerW;
+    sprite.height = this.layerH;
+    this.target = sprite;
+    this.intrinsicWidth = this.layerW;
+    this.intrinsicHeight = this.layerH;
+    this.buildFilters();
+    if (typeof spec.setup === "function" && !this.failed) {
+      try {
+        this.state = await spec.setup(this.info(0));
+      } catch (e) {
+        this.failed = true;
+        this.say(`setup failed: ${e instanceof Error ? e.message : String(e)}; the layer is drawn as a checkerboard`);
+      }
+    }
+    this.drawAt(0);
+  }
+  async awaitFrameAt(local) {
+    this.drawAt(Math.max(0, Math.min(local, this.duration ?? local)));
+  }
+  size(name, v, scope, fallback, who) {
+    if (v === void 0) return fallback;
+    const n = typeof v === "number" ? v : evaluateExpr(v, scope);
+    if (!Number.isFinite(n) || n < 1) {
+      console.warn(`pixi-effects: ${who}: ${name} must be a number of pixels of at least 1 (or an expression), got ${JSON.stringify(v)}: ${fallback} is used`);
+      return fallback;
+    }
+    if (n > MAX_SIZE) {
+      console.warn(`pixi-effects: ${who}: ${name} ${n} is more than ${MAX_SIZE}: ${MAX_SIZE} is used`);
+      return MAX_SIZE;
+    }
+    return n;
+  }
+  say(why) {
+    if (this.warnedDraw) return;
+    this.warnedDraw = true;
+    console.warn(`pixi-effects: ${describeLayer(this.spec)}: ${why}`);
+  }
+  info(local) {
+    const duration = this.duration ?? 0;
+    const start = this.absoluteStart ?? this.at;
+    return {
+      frame: Math.round(local * this.fps),
+      duration,
+      progress: duration > 0 ? local / duration : 0,
+      width: this.layerW,
+      height: this.layerH,
+      resolution: this.res,
+      frameRate: this.fps,
+      params: { ...this.carrier },
+      state: this.state,
+      random: seeded(this.seed),
+      start,
+      time: start + local,
+      canvas: offscreen
+    };
+  }
+  /** Resolve `params.amount` for the keyframe pipeline; a name nobody declared is said once and dropped. */
+  resolveParam(path) {
+    if (path in this.carrier && !path.includes(".")) return { target: this.carrier, prop: path };
+    if (!this.warnedPaths.has(path)) {
+      this.warnedPaths.add(path);
+      const guess = suggestName(path.split(".")[0], Object.keys(this.carrier));
+      console.warn(`pixi-effects: ${describeLayer(this.spec)}: keyframe path params.${path} names no param "${path}"${guess ? `; did you mean "${guess}"?` : ""} (declare it in params with a starting value); skipped`);
+    }
+    return null;
+  }
+  drawAt(local) {
+    const c = this.canvas;
+    if (!c) return;
+    const ctx = c.getContext("2d");
+    if (!ctx) {
+      this.say("this browser gave no 2D context for the layer's canvas, so nothing can be drawn");
+      return;
+    }
+    const key = `${local}|${this.absoluteStart ?? this.at}|${JSON.stringify(this.carrier)}`;
+    if (key === this.lastKey) return;
+    this.lastKey = key;
+    this.lastLocal = local;
+    if (!this.paint(ctx, c, local)) this.lastKey = "";
+    this.target?.texture.source.update();
+  }
+  /** Draws one frame of the layer into `ctx` (the layer's own canvas, or the scratch one of the determinism check). false: `draw` threw. */
+  paint(ctx, c, local) {
+    const hasReset = "reset" in ctx && typeof ctx.reset === "function";
+    const fresh = () => {
+      if (hasReset) ctx.reset();
+      else {
+        ctx.setTransform(1, 0, 0, 1, 0, 0);
+        ctx.clearRect(0, 0, c.width, c.height);
+      }
+    };
+    fresh();
+    if (this.failed || !this.drawFn) {
+      this.checkerboard(ctx, c);
+      return true;
+    }
+    if (!hasReset) ctx.save();
+    let ok = true;
+    try {
+      ctx.scale(this.res, this.res);
+      ctx.imageSmoothingEnabled = this.smoothing;
+      this.drawFn(ctx, local, this.info(local));
+    } catch (e) {
+      if (!hasReset) {
+        ctx.restore();
+        ctx.save();
+      }
+      fresh();
+      this.say(`draw threw at ${local.toFixed(2)} s: ${e instanceof Error ? e.message : String(e)}; that frame is drawn as a checkerboard (the other frames are tried again)`);
+      this.checkerboard(ctx, c);
+      ok = false;
+    }
+    if (!hasReset) ctx.restore();
+    return ok;
+  }
+  /**
+   * Draws each of `times` in two orders and returns the moments where the pictures differ (a draw that uses Math.random, the clock or state that outlives the call), with how much
+   * (channel values that differ, the largest difference out of 255), and how long a draw took. One draw of every moment comes first and is thrown away: a browser can draw a canvas
+   * made in `setup` differently the first time it is used as a source, and a cache a draw fills on its first call is fine. The layer's own canvas is not touched (everything is drawn in a scratch canvas).
+   * A layer that failed, or a draw that throws, is reported in `threw`.
+   */
+  checkDeterminism(times) {
+    const none = { differs: [], drawMs: 0, threw: [] };
+    if (!this.canvas) return none;
+    if (this.failed || !this.drawFn) return { ...none, threw: [...times] };
+    const scratch = document.createElement("canvas");
+    scratch.width = this.w;
+    scratch.height = this.h;
+    const ctx = scratch.getContext("2d", { willReadFrequently: true });
+    if (!ctx) return none;
+    const keep = this.w * this.h * 4 * times.length <= 96e6;
+    const read2 = () => ctx.getImageData(0, 0, scratch.width, scratch.height).data;
+    const hash = (d) => {
+      let h = 2166136261;
+      for (let i = 0; i < d.length; i++) {
+        h ^= d[i];
+        h = Math.imul(h, 16777619);
+      }
+      return h >>> 0;
+    };
+    const ms = [];
+    const threw = /* @__PURE__ */ new Set();
+    const once = (t, timed) => {
+      const from = performance.now();
+      if (!this.paint(ctx, scratch, t)) threw.add(t);
+      if (timed) {
+        ctx.getImageData(0, 0, 1, 1);
+        ms.push(performance.now() - from);
+      }
+      return read2();
+    };
+    for (const t of times) once(t, false);
+    const first = times.map((t) => {
+      const d = once(t, true);
+      return keep ? d.slice() : hash(d);
+    });
+    const second = [...times].reverse().map((t) => once(t, false)).reverse();
+    scratch.width = scratch.height = 1;
+    const differs = [];
+    times.forEach((t, i) => {
+      const a = first[i], b = second[i];
+      if (typeof a === "number") {
+        if (a !== hash(b)) differs.push({ t, pixels: -1, maxDiff: -1 });
+        return;
+      }
+      let pixels = 0, maxDiff = 0;
+      for (let k = 0; k < a.length; k++) {
+        const d = Math.abs(a[k] - b[k]);
+        if (d) {
+          pixels++;
+          if (d > maxDiff) maxDiff = d;
+        }
+      }
+      if (pixels) differs.push({ t, pixels, maxDiff });
+    });
+    ms.sort((x, y) => x - y);
+    return { differs: differs.filter((d) => !threw.has(d.t)), drawMs: ms.length ? ms[Math.floor(ms.length / 2)] : 0, threw: times.filter((t) => threw.has(t)) };
+  }
+  checkerboard(ctx, c) {
+    const s = 32;
+    for (let y = 0; y < c.height; y += s) for (let x = 0; x < c.width; x += s) {
+      ctx.fillStyle = x / s + y / s & 1 ? "#ff00ff" : "#220022";
+      ctx.fillRect(x, y, s, s);
+    }
+  }
+  destroy() {
+    const texture = this.target?.texture;
+    if (this.canvas) {
+      this.canvas.width = this.canvas.height = 1;
+      this.canvas = null;
+    }
+    super.destroy();
+    texture?.destroy(true);
+  }
+};
 
 // src/core/Composition.ts
 var _CompositionSequence = null;
 async function getCompositionSequence() {
   if (!_CompositionSequence) {
-    _CompositionSequence = (await import('./Composition-NDXKQHB4.js')).CompositionSequence;
+    _CompositionSequence = (await import('./Composition-5KZETM4J.js')).CompositionSequence;
   }
   return _CompositionSequence;
 }
 var _SpansSequence = null;
 async function getSpansSequence() {
-  if (!_SpansSequence) _SpansSequence = (await import('./Spans-QHHWC2PB.js')).SpansSequence;
+  if (!_SpansSequence) _SpansSequence = (await import('./Spans-FSSO2HGX.js')).SpansSequence;
   return _SpansSequence;
 }
 var staticTypes = {
@@ -5641,6 +6045,7 @@ var staticTypes = {
   camera: CameraSequence,
   light: LightSequence,
   shader: ShaderSequence,
+  canvas: CanvasSequence,
   null: NullSequence
 };
 var registry2 = {};
@@ -5674,6 +6079,6 @@ async function buildSequenceTree(specs, parent, root) {
   return out;
 }
 
-export { CameraSequence, DEFAULT_FOV, DEG3 as DEG, EXPRESSION_NAMES, FALLOFFS, LIGHT_KINDS, LIGHT_PROPS, LightSequence, MANY_BLURRED, MAX_BLUR, MAX_CASTERS, MAX_LIGHTS, MIN_BLUR, NEAR, NullSequence, SHADOW_TAPS, Sequence, TextSequence, bindClock, bindCounterKeyframes, blurRadius, buildScope, buildSequenceTree, cameraBasis, checkEase, clockTable, contentLength, createTimeline, ensureFilterLibrary, evaluateExpr, flattenSvgPath, focusProblems, homeCamera, homeDistance, layerInitialZ, layerToWorld, lengthen, lightLevel, noise, packLights, parseEase, parseSpring, projectLayer, projectPoint, rand, random, registerSequenceType, remapOf, resolveAt, resolveNumber, spansMeta, springDuration, timeRemapOf };
-//# sourceMappingURL=chunk-Y253JQOH.js.map
-//# sourceMappingURL=chunk-Y253JQOH.js.map
+export { CameraSequence, DEFAULT_FOV, DEG3 as DEG, EXPRESSION_NAMES, FALLOFFS, LIGHT_KINDS, LIGHT_PROPS, LightSequence, MANY_BLURRED, MAX_BLUR, MAX_CASTERS, MAX_LIGHTS, MIN_BLUR, NEAR, NullSequence, SHADOW_TAPS, Sequence, TextSequence, bindClock, bindCounterKeyframes, blurRadius, buildScope, buildSequenceTree, cameraBasis, checkEase, clockTable, contentLength, createTimeline, ensureFilterLibrary, evaluateExpr, flattenSvgPath, focusProblems, homeCamera, homeDistance, layerInitialZ, layerToWorld, lengthen, lightLevel, noise, noise2, packLights, parseEase, parseSpring, projectLayer, projectPoint, rand, random, registerSequenceType, remapOf, resolveAt, resolveNumber, spansMeta, springDuration, timeRemapOf, trimPolylines };
+//# sourceMappingURL=chunk-SBR75G73.js.map
+//# sourceMappingURL=chunk-SBR75G73.js.map