@pixerate/editor 0.27.0 → 0.29.0

package/dist/canvas/index.js

@@ -1,13 +1,3 @@
-import {
-  TokenError,
-  getTokenCollection,
-  getTokenVariable,
-  hexToRgba,
-  isTokenInScope,
-  normalizeTokenColor,
-  resolveToken,
-  rgbaToHex
-} from "../chunk-HRMEDT2L.js";
 import {
   DEFAULT_NODE_HEIGHT,
   DEFAULT_NODE_WIDTH,
@@ -27,79 +17,46 @@ import {
   DEFAULT_ARRANGE_SHORTCUTS,
   matchArrangeShortcut
 } from "../chunk-7DWMJCAT.js";
-
-// src/canvas/clock.ts
-var pageHidden = () => typeof document !== "undefined" && document.hidden;
-var realClock = {
-  live: true,
-  now: () => typeof performance !== "undefined" ? performance.now() : Date.now(),
-  frame: () => new Promise((resolve) => {
-    if (typeof requestAnimationFrame === "function" && !pageHidden()) {
-      requestAnimationFrame(() => resolve());
-    } else {
-      setTimeout(resolve, 16);
-    }
-  }),
-  sleep: (ms) => new Promise((resolve) => setTimeout(resolve, Math.max(0, ms)))
-};
-var settle = () => new Promise((resolve) => setTimeout(resolve, 0));
-var ManualClock = class {
-  live = false;
-  time;
-  frames = [];
-  sleepers = [];
-  seq = 0;
-  constructor(start = 0) {
-    this.time = start;
-  }
-  now() {
-    return this.time;
-  }
-  frame() {
-    return new Promise((resolve) => this.frames.push(resolve));
-  }
-  sleep(ms) {
-    return new Promise(
-      (resolve) => this.sleepers.push({
-        at: this.time + Math.max(0, ms),
-        seq: this.seq++,
-        resolve
-      })
-    );
-  }
-  /** Whether any frames or sleep timers are currently pending. */
-  get pending() {
-    return this.frames.length > 0 || this.sleepers.length > 0;
-  }
-  /** Advances time by `ms`, resolving due sleep timers in order, followed by queued frames. */
-  async advance(ms) {
-    const end = this.time + Math.max(0, ms);
-    await settle();
-    while (true) {
-      let next;
-      for (const s of this.sleepers) {
-        if (s.at <= end && (!next || s.at < next.at || s.at === next.at && s.seq < next.seq)) {
-          next = s;
-        }
-      }
-      if (!next) break;
-      this.sleepers.splice(this.sleepers.indexOf(next), 1);
-      this.time = Math.max(this.time, next.at);
-      next.resolve();
-      await settle();
-    }
-    this.time = end;
-    const dueFrames = this.frames.splice(0, this.frames.length);
-    for (const resolveFrame of dueFrames) {
-      resolveFrame();
-    }
-    await settle();
-  }
-  /** Convenience method to advance by 1 frame at a given fps (default: 60fps = 16.67ms). */
-  async tick(fps = 60) {
-    await this.advance(Math.round(1e3 / fps));
-  }
-};
+import {
+  TokenError,
+  getTokenCollection,
+  getTokenVariable,
+  isTokenInScope,
+  resolveToken
+} from "../chunk-D6AVOTSD.js";
+import {
+  ANIMATION_EASING_LABELS,
+  ANIMATION_EASING_PRESETS,
+  ANIMATION_TIME_EPSILON,
+  AnimationPlayer,
+  CUBIC_BEZIER_PRESETS,
+  ManualClock,
+  createAnimationPlayer,
+  cubicBezierAt,
+  easingFromInfluence,
+  easingLabel,
+  easingToCss,
+  evaluateEasing,
+  evaluateTrack,
+  formatOklab,
+  interpolateAnimationValue,
+  isAnimationEasing,
+  isAnimationKeyframe,
+  mixColorsOklab,
+  normalizeKeyframes,
+  oklabToRgb,
+  pageHidden,
+  parseCssEasing,
+  parseOklab,
+  realClock,
+  resolveEasing,
+  rgbToOklab,
+  springAt,
+  wrapAnimationTime
+} from "../chunk-PWJARCI4.js";
+import {
+  normalizeTokenColor
+} from "../chunk-TGD52FEZ.js";
 
 // src/canvas/trajectory.ts
 var defaultEasing = (t) => --t * t * t + 1;
@@ -2277,7 +2234,7 @@ function fitSingleFrom(pts, u, t0, t1) {
   let best = generate(pts, u, t0, t1);
   let [bestErr, bestSplit] = maxError(pts, best, u);
   const params = u.slice();
-  for (let round3 = 0; round3 < MAX_REPARAM; round3++) {
+  for (let round2 = 0; round2 < MAX_REPARAM; round2++) {
     for (let i = 0; i < params.length; i++) params[i] = newton(best, pts[i], params[i]);
     const c = generate(pts, params, t0, t1);
     const [e, s] = maxError(pts, c, params);
@@ -7843,244 +7800,8 @@ function pruneCanvasTokenModes(nodes, state) {
   return changed ? out : nodes;
 }
 
-// src/canvas/animation/easing.ts
-var ANIMATION_EASING_PRESETS = [
-  "linear",
-  "ease",
-  "ease-in",
-  "ease-out",
-  "ease-in-out",
-  "ease-in-back",
-  "ease-out-back",
-  "spring",
-  "hold"
-];
-var ANIMATION_EASING_LABELS = {
-  linear: "Linear",
-  hold: "Hold",
-  ease: "Ease",
-  "ease-in": "Ease in",
-  "ease-out": "Ease out",
-  "ease-in-out": "Ease in-out",
-  "ease-in-back": "Back in",
-  "ease-out-back": "Back out",
-  spring: "Spring"
-};
-var CUBIC_BEZIER_PRESETS = {
-  linear: [0, 0, 1, 1],
-  ease: [0.25, 0.1, 0.25, 1],
-  "ease-in": [0.42, 0, 1, 1],
-  "ease-out": [0, 0, 0.58, 1],
-  "ease-in-out": [0.42, 0, 0.58, 1],
-  "ease-in-back": [0.36, 0, 0.66, -0.56],
-  "ease-out-back": [0.34, 1.56, 0.64, 1]
-};
-var DEFAULT_SPRING = { stiffness: 170, damping: 26, mass: 1, velocity: 0 };
-var clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
-var finite2 = (v, fallback) => typeof v === "number" && Number.isFinite(v) ? v : fallback;
-function cubicBezierAt(x1, y1, x2, y2, x) {
-  if (x <= 0) return 0;
-  if (x >= 1) return 1;
-  x1 = clamp(x1, 0, 1);
-  x2 = clamp(x2, 0, 1);
-  const bx = (s2) => 3 * (1 - s2) * (1 - s2) * s2 * x1 + 3 * (1 - s2) * s2 * s2 * x2 + s2 * s2 * s2;
-  const by = (s2) => 3 * (1 - s2) * (1 - s2) * s2 * y1 + 3 * (1 - s2) * s2 * s2 * y2 + s2 * s2 * s2;
-  const dbx = (s2) => 3 * (1 - s2) * (1 - s2) * x1 + 6 * (1 - s2) * s2 * (x2 - x1) + 3 * s2 * s2 * (1 - x2);
-  let s = x;
-  for (let i = 0; i < 8; i++) {
-    const d = dbx(s);
-    if (Math.abs(d) < 1e-9) break;
-    const next = s - (bx(s) - x) / d;
-    if (!(next >= 0 && next <= 1)) break;
-    s = next;
-  }
-  if (Math.abs(bx(s) - x) > 1e-7) {
-    let lo = 0;
-    let hi = 1;
-    for (let i = 0; i < 60; i++) {
-      s = (lo + hi) / 2;
-      if (bx(s) < x) lo = s;
-      else hi = s;
-    }
-  }
-  return by(s);
-}
-function springAt(spring, seconds) {
-  const stiffness = Math.max(1e-6, finite2(spring.stiffness, DEFAULT_SPRING.stiffness));
-  const damping = Math.max(0, finite2(spring.damping, DEFAULT_SPRING.damping));
-  const mass = Math.max(1e-6, finite2(spring.mass, DEFAULT_SPRING.mass));
-  const v0 = -finite2(spring.velocity, DEFAULT_SPRING.velocity);
-  const t = Math.max(0, seconds);
-  const w0 = Math.sqrt(stiffness / mass);
-  const zeta = damping / (2 * Math.sqrt(stiffness * mass));
-  let x;
-  if (zeta < 1 - 1e-6) {
-    const wd = w0 * Math.sqrt(1 - zeta * zeta);
-    x = Math.exp(-zeta * w0 * t) * (Math.cos(wd * t) + (zeta * w0 + v0) / wd * Math.sin(wd * t));
-  } else if (zeta <= 1 + 1e-6) {
-    x = Math.exp(-w0 * t) * (1 + (w0 + v0) * t);
-  } else {
-    const r = Math.sqrt(zeta * zeta - 1);
-    const s1 = -w0 * (zeta - r);
-    const s2 = -w0 * (zeta + r);
-    const c2 = (v0 - s1) / (s2 - s1);
-    const c1 = 1 - c2;
-    x = c1 * Math.exp(s1 * t) + c2 * Math.exp(s2 * t);
-  }
-  return 1 - x;
-}
-function resolveEasing(easing) {
-  if (easing === "hold") return "hold";
-  if (easing === "spring") return { type: "spring", ...DEFAULT_SPRING };
-  if (typeof easing === "string") {
-    const preset = CUBIC_BEZIER_PRESETS[easing];
-    if (preset) return { type: "cubic-bezier", x1: preset[0], y1: preset[1], x2: preset[2], y2: preset[3] };
-    const parsed = parseCssEasing(easing);
-    return parsed ? resolveEasing(parsed) : { type: "cubic-bezier", x1: 0, y1: 0, x2: 1, y2: 1 };
-  }
-  if (easing && typeof easing === "object") {
-    if (easing.type === "spring") {
-      return {
-        type: "spring",
-        stiffness: finite2(easing.stiffness, DEFAULT_SPRING.stiffness),
-        damping: finite2(easing.damping, DEFAULT_SPRING.damping),
-        mass: finite2(easing.mass, DEFAULT_SPRING.mass),
-        velocity: finite2(easing.velocity, DEFAULT_SPRING.velocity)
-      };
-    }
-    if (easing.type === "cubic-bezier") {
-      return {
-        type: "cubic-bezier",
-        x1: clamp(finite2(easing.x1, 0), 0, 1),
-        y1: finite2(easing.y1, 0),
-        x2: clamp(finite2(easing.x2, 1), 0, 1),
-        y2: finite2(easing.y2, 1)
-      };
-    }
-  }
-  return { type: "cubic-bezier", x1: 0, y1: 0, x2: 1, y2: 1 };
-}
-function evaluateEasing(easing, u, durationMs = 1e3) {
-  if (!(u > 0)) return 0;
-  if (u >= 1) return 1;
-  const resolved = resolveEasing(easing);
-  if (resolved === "hold") return 0;
-  if (resolved.type === "spring") return springAt(resolved, u * Math.max(0, durationMs) / 1e3);
-  const { x1, y1, x2, y2 } = resolved;
-  if (x1 === y1 && x2 === y2) return u;
-  return cubicBezierAt(x1, y1, x2, y2, u);
-}
-function easingFromInfluence(outInfluence = 1 / 3, inInfluence = 1 / 3) {
-  return {
-    type: "cubic-bezier",
-    x1: clamp(outInfluence, 0.01, 1),
-    y1: 0,
-    x2: 1 - clamp(inInfluence, 0.01, 1),
-    y2: 1
-  };
-}
-var NUMBER = String.raw`\s*(-?(?:\d+\.?\d*|\.\d+)(?:e[-+]?\d+)?)\s*`;
-var CUBIC_RE = new RegExp(`^cubic-bezier\\(${NUMBER},${NUMBER},${NUMBER},${NUMBER}\\)$`, "i");
-function parseCssEasing(text) {
-  const value = text.trim().toLowerCase();
-  if (value.length > 200) return null;
-  if (ANIMATION_EASING_PRESETS.includes(value)) return value;
-  if (value === "step-end" || /^steps\(\s*1\s*(,\s*(end|jump-end)\s*)?\)$/.test(value)) return "hold";
-  const m = CUBIC_RE.exec(value);
-  if (!m) return null;
-  const [x1, y1, x2, y2] = m.slice(1).map(Number);
-  if (![x1, y1, x2, y2].every(Number.isFinite) || x1 < 0 || x1 > 1 || x2 < 0 || x2 > 1) return null;
-  return { type: "cubic-bezier", x1, y1, x2, y2 };
-}
-function isAnimationEasing(value) {
-  if (typeof value === "string") return parseCssEasing(value) !== null;
-  if (typeof value !== "object" || value === null) return false;
-  const e = value;
-  if (e.type === "spring") return true;
-  return e.type === "cubic-bezier" && [e.x1, e.y1, e.x2, e.y2].every((v) => typeof v === "number" && Number.isFinite(v));
-}
-var round = (v, digits = 4) => {
-  const p = 10 ** digits;
-  return Math.round(v * p) / p;
-};
-function easingToCss(easing, durationMs = 1e3, samples = 24) {
-  const resolved = resolveEasing(easing);
-  if (resolved === "hold") return "steps(1, end)";
-  if (resolved.type === "spring") {
-    const n = Math.max(2, Math.floor(samples));
-    const points = [];
-    for (let i = 0; i <= n; i++) points.push(String(round(i === n ? 1 : springAt(resolved, i / n * durationMs / 1e3))));
-    return `linear(${points.join(", ")})`;
-  }
-  const { x1, y1, x2, y2 } = resolved;
-  for (const [name, p] of Object.entries(CUBIC_BEZIER_PRESETS)) {
-    if (["linear", "ease", "ease-in", "ease-out", "ease-in-out"].includes(name) && p[0] === x1 && p[1] === y1 && p[2] === x2 && p[3] === y2) {
-      return name;
-    }
-  }
-  return `cubic-bezier(${round(x1)}, ${round(y1)}, ${round(x2)}, ${round(y2)})`;
-}
-function easingLabel(easing) {
-  if (easing === void 0 || easing === null) return ANIMATION_EASING_LABELS.linear;
-  if (typeof easing === "string") return ANIMATION_EASING_LABELS[easing] ?? easing;
-  return easing.type === "spring" ? "Spring" : "Custom";
-}
-
-// src/canvas/animation/color.ts
-var toLinear = (c) => c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
-var toGamma = (c) => c <= 31308e-7 ? 12.92 * c : 1.055 * Math.sign(c) * Math.abs(c) ** (1 / 2.4) - 0.055;
-function rgbToOklab(r, g, b, alpha = 1) {
-  const lr = toLinear(r);
-  const lg = toLinear(g);
-  const lb = toLinear(b);
-  const l = Math.cbrt(0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb);
-  const m = Math.cbrt(0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb);
-  const s = Math.cbrt(0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb);
-  return {
-    l: 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,
-    a: 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,
-    b: 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s,
-    alpha
-  };
-}
-function oklabToRgb(color) {
-  const l_ = color.l + 0.3963377774 * color.a + 0.2158037573 * color.b;
-  const m_ = color.l - 0.1055613458 * color.a - 0.0638541728 * color.b;
-  const s_ = color.l - 0.0894841775 * color.a - 1.291485548 * color.b;
-  const l = l_ ** 3;
-  const m = m_ ** 3;
-  const s = s_ ** 3;
-  const clamp01 = (v) => Math.min(1, Math.max(0, v));
-  return {
-    r: clamp01(toGamma(4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s)),
-    g: clamp01(toGamma(-1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s)),
-    b: clamp01(toGamma(-0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s)),
-    a: clamp01(color.alpha)
-  };
-}
-function parseOklab(input) {
-  const hex = normalizeTokenColor(input);
-  if (hex === null) return null;
-  const c = hexToRgba(hex);
-  return rgbToOklab(c.r, c.g, c.b, c.a);
-}
-function formatOklab(color) {
-  const { r, g, b, a } = oklabToRgb(color);
-  return rgbaToHex(r, g, b, a);
-}
-function mixColorsOklab(from, to, t) {
-  const a = parseOklab(from);
-  const b = parseOklab(to);
-  if (!a || !b) return null;
-  const alpha = a.alpha + (b.alpha - a.alpha) * t;
-  const premul = (k) => a[k] * a.alpha + (b[k] * b.alpha - a[k] * a.alpha) * t;
-  if (alpha <= 1e-9) return formatOklab({ l: a.l + (b.l - a.l) * t, a: 0, b: 0, alpha: 0 });
-  return formatOklab({ l: premul("l") / alpha, a: premul("a") / alpha, b: premul("b") / alpha, alpha });
-}
-
 // src/canvas/animation/model.ts
 var ANIMATION_DATA_KEY = "animation";
-var ANIMATION_TIME_EPSILON = 1e-6;
 var num = (value) => {
   if (typeof value === "number") return Number.isFinite(value) ? value : void 0;
   if (typeof value === "string") {
@@ -8221,37 +7942,6 @@ function clampAnimationValue(property, value) {
   if (property.max !== void 0) v = Math.min(property.max, v);
   return v;
 }
-function isValue(value) {
-  return typeof value === "number" && Number.isFinite(value) || typeof value === "string";
-}
-function isAnimationKeyframe(value) {
-  if (typeof value !== "object" || value === null) return false;
-  const k = value;
-  return typeof k.time === "number" && Number.isFinite(k.time) && isValue(k.value) && (k.easing === void 0 || isAnimationEasing(k.easing));
-}
-var sortedCache = /* @__PURE__ */ new WeakMap();
-function normalizeKeyframes(keyframes) {
-  if (!Array.isArray(keyframes)) return [];
-  const cached = sortedCache.get(keyframes);
-  if (cached && cached.items.length === keyframes.length && cached.items.every((k, i) => k === keyframes[i])) return cached.out;
-  const indexed = keyframes.map((k, i) => ({ k, i })).filter(({ k }) => isAnimationKeyframe(k)).sort((a, b) => a.k.time - b.k.time || a.i - b.i);
-  const out = [];
-  let lastIndex = -1;
-  for (const { k, i } of indexed) {
-    const prev = out[out.length - 1];
-    if (prev && Math.abs(k.time - prev.time) <= ANIMATION_TIME_EPSILON) {
-      if (i > lastIndex) {
-        out[out.length - 1] = k;
-        lastIndex = i;
-      }
-      continue;
-    }
-    out.push(k);
-    lastIndex = i;
-  }
-  sortedCache.set(keyframes, { items: [...keyframes], out });
-  return out;
-}
 function getNodeAnimation(node) {
   const raw = node?.data?.[ANIMATION_DATA_KEY];
   if (typeof raw !== "object" || raw === null || typeof raw.tracks !== "object" || raw.tracks === null) return null;
@@ -8289,45 +7979,6 @@ function withNodeAnimation(node, animation) {
 
 // src/canvas/animation/evaluate.ts
 var nodesOf = (doc) => Array.isArray(doc) ? doc : doc.nodes;
-function interpolateAnimationValue(from, to, t, type = "number") {
-  if (typeof from === "number" && typeof to === "number") return from + (to - from) * t;
-  if (t <= 0) return from;
-  if (t >= 1) return to;
-  if (type === "color" || typeof from === "string" && typeof to === "string") {
-    const mixed = mixColorsOklab(from, to, t);
-    if (mixed !== null) return mixed;
-  }
-  return from;
-}
-function segmentIndex(keys, time) {
-  let lo = 0;
-  let hi = keys.length - 1;
-  let found = -1;
-  while (lo <= hi) {
-    const mid = lo + hi >> 1;
-    if (keys[mid].time <= time) {
-      found = mid;
-      lo = mid + 1;
-    } else hi = mid - 1;
-  }
-  return found;
-}
-function evaluateTrack(track, time, type = "number") {
-  const keyframes = Array.isArray(track) ? track : track?.keyframes;
-  const keys = normalizeKeyframes(keyframes);
-  if (keys.length === 0) return void 0;
-  if (!(time > keys[0].time)) return keys[0].value;
-  const last = keys[keys.length - 1];
-  if (time >= last.time) return last.value;
-  const i = segmentIndex(keys, time);
-  const a = keys[i];
-  const b = keys[i + 1];
-  if (time === a.time) return a.value;
-  const span = b.time - a.time;
-  const u = (time - a.time) / span;
-  if (a.easing === "hold") return a.value;
-  return interpolateAnimationValue(a.value, b.value, evaluateEasing(a.easing, u, span), type);
-}
 function getAnimationDuration(doc) {
   let end = 0;
   for (const node of nodesOf(doc)) {
@@ -8341,17 +7992,6 @@ function getAnimationDuration(doc) {
   }
   return end;
 }
-function wrapAnimationTime(time, duration, loop = "none") {
-  if (!Number.isFinite(time)) return 0;
-  if (!(duration > 0)) return 0;
-  if (loop === "loop") return (time % duration + duration) % duration;
-  if (loop === "ping-pong") {
-    const period = duration * 2;
-    const m = (time % period + period) % period;
-    return m <= duration ? m : period - m;
-  }
-  return Math.min(duration, Math.max(0, time));
-}
 function evaluateAnimation(doc, time, options = {}) {
   const only = options.ids ? new Set(options.ids) : null;
   const out = {};
@@ -8873,212 +8513,6 @@ function animateNode(nodes, nodeId, options) {
   return { nodes: draft.commit(), refs };
 }
 
-// src/canvas/animation/player.ts
-var AnimationPlayer = class {
-  clock;
-  durationSource;
-  onTime;
-  onEnd;
-  time;
-  playing = false;
-  scrubbing = false;
-  resumeAfterScrub = false;
-  loop;
-  rate;
-  /** Unwrapped time at `anchorAt` (keeps the ping-pong direction across frames). */
-  anchorRaw = 0;
-  anchorAt = 0;
-  generation = 0;
-  cached;
-  listeners = /* @__PURE__ */ new Set();
-  constructor(options = {}) {
-    this.clock = options.clock ?? realClock;
-    this.durationSource = options.duration ?? 1e3;
-    this.loop = options.loop ?? "none";
-    this.rate = Number.isFinite(options.playbackRate) && options.playbackRate !== 0 ? options.playbackRate : 1;
-    this.onTime = options.onTime;
-    this.onEnd = options.onEnd;
-    this.time = this.clamp(options.time ?? 0);
-    this.cached = this.snapshot();
-  }
-  /** Current timeline length (ms). */
-  get duration() {
-    const d = typeof this.durationSource === "function" ? this.durationSource() : this.durationSource;
-    return Number.isFinite(d) && d > 0 ? d : 0;
-  }
-  get currentTime() {
-    return this.time;
-  }
-  get isPlaying() {
-    return this.playing;
-  }
-  getState() {
-    return this.cached;
-  }
-  subscribe(listener) {
-    this.listeners.add(listener);
-    return () => {
-      this.listeners.delete(listener);
-    };
-  }
-  /** Replaces the callbacks (hooks keep them current without recreating the player). */
-  setCallbacks(callbacks) {
-    this.onTime = callbacks.onTime;
-    this.onEnd = callbacks.onEnd;
-  }
-  setDuration(duration) {
-    this.durationSource = duration;
-    this.time = this.clamp(this.time);
-    this.emit(false);
-  }
-  setLoop(loop) {
-    if (loop === this.loop) return;
-    this.reanchor();
-    this.loop = loop;
-    this.emit(false);
-  }
-  setPlaybackRate(rate) {
-    if (!Number.isFinite(rate) || rate === 0 || rate === this.rate) return;
-    this.reanchor();
-    this.rate = rate;
-    this.emit(false);
-  }
-  /** Starts playing from the playhead (from the start again when a one-shot play had ended). */
-  play() {
-    if (this.playing) return;
-    const d = this.duration;
-    if (this.loop === "none" && d > 0) {
-      if (this.rate > 0 && this.time >= d) this.time = 0;
-      if (this.rate < 0 && this.time <= 0) this.time = d;
-    }
-    this.playing = true;
-    this.scrubbing = false;
-    this.anchorRaw = this.time;
-    this.anchorAt = this.clock.now();
-    this.emit(false);
-    this.schedule();
-  }
-  pause() {
-    if (!this.playing) return;
-    this.tick(false);
-    this.playing = false;
-    this.generation++;
-    this.emit(true);
-  }
-  toggle() {
-    if (this.playing) this.pause();
-    else this.play();
-  }
-  /** Pauses and returns to the start. */
-  stop() {
-    this.playing = false;
-    this.generation++;
-    this.seek(0);
-  }
-  /** Moves the playhead (clamped to the timeline); playback continues from there. */
-  seek(time) {
-    if (!Number.isFinite(time)) return;
-    this.time = this.clamp(time);
-    this.anchorRaw = this.time;
-    this.anchorAt = this.clock.now();
-    this.emit(true);
-  }
-  /** Seeks while dragging the playhead: playback pauses until `endScrub`. */
-  scrub(time) {
-    if (!this.scrubbing) {
-      this.resumeAfterScrub = this.playing;
-      if (this.playing) {
-        this.playing = false;
-        this.generation++;
-      }
-      this.scrubbing = true;
-    }
-    this.seek(time);
-  }
-  /** Ends a scrub, resuming playback if it was playing when the scrub began. */
-  endScrub() {
-    if (!this.scrubbing) return;
-    this.scrubbing = false;
-    const resume = this.resumeAfterScrub;
-    this.resumeAfterScrub = false;
-    if (resume) this.play();
-    else this.emit(false);
-  }
-  /** Stops scheduling frames and drops listeners. */
-  destroy() {
-    this.playing = false;
-    this.generation++;
-    this.listeners.clear();
-  }
-  clamp(time) {
-    return Math.min(this.duration, Math.max(0, Number.isFinite(time) ? time : 0));
-  }
-  reanchor() {
-    if (!this.playing) return;
-    this.tick(false);
-    this.anchorRaw = this.rawNow();
-    this.anchorAt = this.clock.now();
-  }
-  rawNow() {
-    return this.anchorRaw + (this.clock.now() - this.anchorAt) * this.rate;
-  }
-  schedule() {
-    const generation = this.generation;
-    this.clock.frame().then(() => {
-      if (generation !== this.generation || !this.playing) return;
-      this.tick(true);
-      if (this.playing) this.schedule();
-    });
-  }
-  /** Advances the playhead to the clock's time; `notify` emits the change. */
-  tick(notify) {
-    if (!this.playing) return;
-    const d = this.duration;
-    const raw = this.rawNow();
-    let ended = false;
-    if (this.loop === "none" || d <= 0) {
-      if (this.rate > 0 && raw >= d) {
-        this.time = d;
-        ended = true;
-      } else if (this.rate < 0 && raw <= 0) {
-        this.time = 0;
-        ended = true;
-      } else this.time = this.clamp(raw);
-    } else {
-      this.time = wrapAnimationTime(raw, d, this.loop);
-    }
-    if (ended) {
-      this.playing = false;
-      this.generation++;
-    }
-    if (notify || ended) this.emit(true);
-    if (ended) this.onEnd?.();
-  }
-  snapshot() {
-    return {
-      time: this.time,
-      playing: this.playing,
-      scrubbing: this.scrubbing,
-      loop: this.loop,
-      playbackRate: this.rate,
-      duration: this.duration
-    };
-  }
-  emit(timeChanged) {
-    const next = this.snapshot();
-    const prev = this.cached;
-    if (prev.time === next.time && prev.playing === next.playing && prev.scrubbing === next.scrubbing && prev.loop === next.loop && prev.playbackRate === next.playbackRate && prev.duration === next.duration) {
-      return;
-    }
-    this.cached = next;
-    if (timeChanged && prev.time !== next.time) this.onTime?.(next.time);
-    for (const listener of this.listeners) listener(next);
-  }
-};
-function createAnimationPlayer(options) {
-  return new AnimationPlayer(options);
-}
-
 // src/canvas/animation/export.ts
 function sampleAnimationFrames(doc, options = {}) {
   const fps = options.fps ?? 30;
@@ -9109,22 +8543,22 @@ var CSS_ANIMATION_PROPERTIES = {
   width: { css: "width", camel: "width" },
   height: { css: "height", camel: "height" }
 };
-var round2 = (v) => Math.round(v * 1e3) / 1e3;
+var round = (v) => Math.round(v * 1e3) / 1e3;
 function cssValue(source, value, node, partner, partnerSource) {
   if (source === "x" || source === "y") {
     const dx = source === "x" ? value - node.position.x : partner !== void 0 ? partner - node.position.x : 0;
     const dy = source === "y" ? value - node.position.y : partner !== void 0 && partnerSource === "y" ? partner - node.position.y : 0;
-    return `${round2(dx)}px ${round2(dy)}px`;
+    return `${round(dx)}px ${round(dy)}px`;
   }
   if (typeof value === "string") return value;
   switch (source) {
     case "rotation":
-      return `${round2(value)}deg`;
+      return `${round(value)}deg`;
     case "scale":
     case "opacity":
-      return String(round2(value));
+      return String(round(value));
     default:
-      return `${round2(value)}px`;
+      return `${round(value)}px`;
   }
 }
 var sameTimes = (a, b) => a.length === b.length && a.every((k, i) => Math.abs(k.time - b[i].time) < 1e-6 && JSON.stringify(k.easing ?? "linear") === JSON.stringify(b[i].easing ?? "linear"));
@@ -9184,7 +8618,7 @@ function getCssPropertyAnimations(nodes, nodeId, options = {}) {
     if (sources.includes("motionPath")) {
       const position = (t) => {
         const moved = ANIMATABLE_PROPERTIES.find((p) => p.key === "motionPath").write(node, evalAt("motionPath", t));
-        return `${round2(moved.position.x - node.position.x)}px ${round2(moved.position.y - node.position.y)}px`;
+        return `${round(moved.position.x - node.position.x)}px ${round(moved.position.y - node.position.y)}px`;
       };
       out.push({ property: css, camel: camel2, sources, stops: sampledStops(duration, fps, allTimes, position), exact: false });
       continue;
@@ -9219,7 +8653,7 @@ function timing(options, duration) {
   const rate = options.playbackRate && Number.isFinite(options.playbackRate) && options.playbackRate !== 0 ? options.playbackRate : 1;
   const loop = options.loop ?? "none";
   return {
-    duration: round2(duration / Math.abs(rate)),
+    duration: round(duration / Math.abs(rate)),
     iterations: loop === "none" ? 1 : Infinity,
     direction: loop === "ping-pong" ? rate < 0 ? "alternate-reverse" : "alternate" : rate < 0 ? "reverse" : "normal"
   };
@@ -9236,7 +8670,7 @@ function exportCssAnimation(nodes, nodeId, options = {}) {
   for (const prop of props) {
     const name = `${base}-${cssIdent(prop.property)}`;
     const lines = prop.stops.map((s) => {
-      const pct = `${round2(s.offset * 100)}%`;
+      const pct = `${round(s.offset * 100)}%`;
       const easing = s.easing ? ` animation-timing-function: ${s.easing};` : "";
       return `  ${pct} { ${prop.property}: ${s.value};${easing} }`;
     });