@pixerate/editor 0.26.1 → 0.28.0

package/dist/canvas/index.js

@@ -1,17 +1,3 @@
-import {
-  DEFAULT_ARRANGE_SHORTCUTS,
-  matchArrangeShortcut
-} from "../chunk-7DWMJCAT.js";
-import {
-  TokenError,
-  getTokenCollection,
-  getTokenVariable,
-  hexToRgba,
-  isTokenInScope,
-  normalizeTokenColor,
-  resolveToken,
-  rgbaToHex
-} from "../chunk-HRMEDT2L.js";
 import {
   DEFAULT_NODE_HEIGHT,
   DEFAULT_NODE_WIDTH,
@@ -27,79 +13,50 @@ import {
   overlaps,
   placeBeside
 } from "../chunk-VHZCXHS4.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 {
+  DEFAULT_ARRANGE_SHORTCUTS,
+  matchArrangeShortcut
+} from "../chunk-7DWMJCAT.js";
+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} }`;
     });
@@ -11382,6 +10816,289 @@ function restoreCanvasMainComponent(nodes, id, options = {}) {
   for (const nn of nested) after = rebaseInstance(after, nn, options.tokens);
   return done(nodes, after, [compId], options);
 }
+var VARIANT_GAP = 20;
+var variantKey = (values) => formatVariantName(values);
+function variantNameProblem(kind, s) {
+  const label = kind === "property" ? "Variant property names" : "Variant values";
+  if (!s) return `${label} must not be empty.`;
+  if (/[,=]/.test(s)) return `${label} can't contain "," or "=".`;
+  return void 0;
+}
+function cleanVariantPairs(pairs) {
+  const out = {};
+  for (const [rawKey, rawValue] of Object.entries(pairs)) {
+    if (typeof rawValue !== "string") return `"${rawKey}" takes a text value.`;
+    const k = rawKey.trim();
+    const v = rawValue.trim();
+    const problem = variantNameProblem("property", k) ?? variantNameProblem("value", v);
+    if (problem) return problem;
+    out[k] = v;
+  }
+  return out;
+}
+function variantOrder(ids, values) {
+  const order = [];
+  for (const id of ids) for (const k of Object.keys(values.get(id) ?? {})) if (!order.includes(k)) order.push(k);
+  return order;
+}
+function withVariantValues(node, values, order) {
+  const name = formatVariantName(values, order);
+  const data = { ...dataOf(node), [COMPONENT_DATA_KEY]: { ...getComponentData(node) ?? {}, variant: values }, label: name };
+  if (typeof data.name === "string" && data.name.includes("=")) data.name = name;
+  return same(dataOf(node), data) ? node : withData(node, data);
+}
+function closestVariant(list, wanted) {
+  const entries = Object.entries(wanted);
+  let best;
+  const better = (a, b) => {
+    for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return a[i] > b[i];
+    return false;
+  };
+  for (const v of list) {
+    const values = getVariantValues(v);
+    const matches2 = entries.map(([k, val]) => values[k] === val ? 1 : 0);
+    const score = [matches2.reduce((a, b) => a + b, 0), ...matches2];
+    if (!best || better(score, best.score)) best = { score, id: v.id };
+  }
+  return best?.id;
+}
+function variantEditIn(g, setId) {
+  const set = g.get(setId);
+  if (!isCanvasComponentSet(set)) return { code: "not-found", reason: "Choose a component set." };
+  if (owningInstanceIn(g, setId)) return { code: "inside-instance", reason: "A component set inside an instance can't be edited: edit its main." };
+  const variants = variantsIn(g, setId);
+  return { set, variants, values: new Map(variants.map((v) => [v.id, getVariantValues(v)])) };
+}
+function addMissingProperties(edit, pairs, defaultValue) {
+  const known = /* @__PURE__ */ new Set();
+  for (const v of edit.values.values()) for (const k of Object.keys(v)) known.add(k);
+  const added = Object.keys(pairs).filter((k) => !known.has(k));
+  if (added.length === 0) return void 0;
+  const problem = variantNameProblem("value", defaultValue);
+  if (problem) return problem;
+  const defs = dataOf(edit.set)[COMPONENT_SET_DATA_KEY]?.properties;
+  const clash = isRecord(defs) ? added.find((k) => k in defs) : void 0;
+  if (clash) return `"${clash}" is a component property.`;
+  for (const [id, v] of edit.values) {
+    const next = { ...v };
+    for (const k of added) next[k] = defaultValue;
+    edit.values.set(id, next);
+  }
+  return void 0;
+}
+function duplicateAmong(values, ids) {
+  for (const id of ids) {
+    const key = variantKey(values.get(id));
+    for (const [other, v] of values) {
+      if (other !== id && variantKey(v) === key) return formatVariantName(values.get(id), variantOrder([...values.keys()], values));
+    }
+  }
+  return void 0;
+}
+function writeVariantEdit(edit, extra = []) {
+  const order = variantOrder([...edit.variants.map((v) => v.id), ...extra], edit.values);
+  const updates = /* @__PURE__ */ new Map();
+  for (const v of edit.variants) {
+    const next = withVariantValues(v, edit.values.get(v.id), order);
+    if (next !== v) updates.set(v.id, next);
+  }
+  return updates;
+}
+function nextVariantValuesIn(g, setId, fromId) {
+  const variants = variantsIn(g, setId);
+  const base = getVariantValues(g.get(fromId));
+  const first = variantOptionsIn(g, setId)[0];
+  const prop = first?.name ?? "Property 1";
+  const used = new Set(variants.map((v) => variantKey(getVariantValues(v))));
+  for (let k = variants.length + 1; ; k++) {
+    const values = { ...base, [prop]: `Variant${k}` };
+    if (!first?.values.includes(`Variant${k}`) && !used.has(variantKey(values))) return values;
+  }
+}
+function getNextVariantValues(nodes, setId, from) {
+  const g = new Graph(nodes);
+  return nextVariantValuesIn(g, setId, from ?? defaultVariantIn(g, setId));
+}
+function relayoutSet(nodes, setId, options) {
+  if (options.layout === false || !getAutoLayout(nodes.find((n) => n.id === setId))) return nodes;
+  return applyNodeUpdates(nodes, layoutUpMany(nodes, [setId], typeof options.layout === "object" ? options.layout : {}));
+}
+function addCanvasVariant(nodes, setId, options = {}) {
+  const g = new Graph(nodes);
+  const edit = variantEditIn(g, setId);
+  if (!("set" in edit)) return fail(nodes, edit.code, edit.reason);
+  if (edit.variants.length === 0) return fail(nodes, "invalid", "The set has no variant to duplicate.");
+  const fromId = options.from ?? defaultVariantIn(g, setId);
+  const source = edit.variants.find((v) => v.id === fromId);
+  if (!source) return fail(nodes, "not-found", `"${fromId}" is not a variant of this set.`);
+  const wanted = cleanVariantPairs(options.variant ?? nextVariantValuesIn(g, setId, fromId));
+  if (typeof wanted === "string") return fail(nodes, "invalid", wanted);
+  const problem = addMissingProperties(edit, wanted, (options.defaultValue ?? "Default").trim());
+  if (problem) return fail(nodes, "invalid", problem);
+  const id = options.id ?? uniqueId(`${setId}-variant`, g.byId);
+  if (g.get(id)) return fail(nodes, "invalid", `Id "${id}" is taken.`);
+  edit.values.set(id, { ...edit.values.get(fromId), ...wanted });
+  const dup = duplicateAmong(edit.values, [id]);
+  if (dup) return fail(nodes, "invalid", `A variant with ${dup} exists already.`);
+  const autoLayout = !!getAutoLayout(edit.set);
+  const { width, height } = getNodeSize(source);
+  let position = options.position ? { ...options.position } : { ...source.position };
+  if (!options.position && !autoLayout) {
+    const rects = edit.variants.map((v) => ({ ...v.position, ...getNodeSize(v) }));
+    position = { x: source.position.x + width + VARIANT_GAP, y: source.position.y };
+    for (let k = 0; k <= rects.length; k++) {
+      const hit = rects.find((r) => position.x < r.x + r.width && r.x < position.x + width && position.y < r.y + r.height && r.y < position.y + height);
+      if (!hit) break;
+      position = { x: hit.x + hit.width + VARIANT_GAP, y: position.y };
+    }
+  }
+  const taken = new Set(g.byId.keys());
+  taken.add(id);
+  const map = /* @__PURE__ */ new Map([[fromId, id]]);
+  const sub3 = g.subtree(fromId);
+  for (const d of sub3) {
+    if (d === fromId) continue;
+    const nid = uniqueId(`${id}-${d}`, taken);
+    taken.add(nid);
+    map.set(d, nid);
+  }
+  const order = variantOrder([...edit.variants.map((v) => v.id), id], edit.values);
+  const subSet = new Set(sub3);
+  const copies = nodes.filter((n) => subSet.has(n.id)).map((n) => {
+    const next = { ...n, id: map.get(n.id) };
+    if (n.parentId !== void 0 && n.id !== fromId) next.parentId = map.get(n.parentId) ?? n.parentId;
+    for (const k of RUNTIME_KEYS) delete next[k];
+    if (n.id !== fromId) return next;
+    next.position = position;
+    return withVariantValues(next, edit.values.get(id), order);
+  });
+  const updates = writeVariantEdit(edit, [id]);
+  const inSet = new Set(g.subtree(setId));
+  let last = -1;
+  nodes.forEach((n, i) => {
+    if (inSet.has(n.id)) last = i;
+  });
+  let after = [];
+  nodes.forEach((n, i) => {
+    after.push(updates.get(n.id) ?? n);
+    if (i === last) after.push(...copies);
+  });
+  if (autoLayout && !options.position) after = relayoutSet(after, setId, options);
+  else {
+    const size = getNodeSize(edit.set);
+    const w = Math.max(size.width, position.x + width + VARIANT_GAP);
+    const h = Math.max(size.height, position.y + height + VARIANT_GAP);
+    if (w !== size.width || h !== size.height) after = applyNodeUpdates(after, [{ id: setId, width: w, height: h }]);
+  }
+  return done(nodes, after, [id], options);
+}
+function removeCanvasVariant(nodes, variantId, options = {}) {
+  const g = new Graph(nodes);
+  const set = variantSetIn(g, variantId);
+  if (!set) return fail(nodes, "not-found", "Choose a variant of a component set.");
+  if (owningInstanceIn(g, set.id)) return fail(nodes, "inside-instance", "A component set inside an instance can't be edited: edit its main.");
+  const others = variantsIn(g, set.id).filter((v) => v.id !== variantId);
+  if (others.length === 0) return fail(nodes, "invalid", "A component set needs at least one variant: delete the set instead.");
+  const replacement = closestVariant(others, getVariantValues(g.get(variantId)));
+  const swap = (v) => v === variantId ? replacement : v;
+  const repointed = nodes.map((n) => {
+    const data = dataOf(n);
+    let next;
+    const inst = getInstanceData(n);
+    if (inst) {
+      const moved = { ...inst, componentId: swap(inst.componentId) };
+      if (inst.properties) moved.properties = Object.fromEntries(Object.entries(inst.properties).map(([k, v]) => [k, swap(v)]));
+      if (!same(moved, inst)) next = { ...data, [INSTANCE_DATA_KEY]: moved };
+    }
+    for (const key of [COMPONENT_DATA_KEY, COMPONENT_SET_DATA_KEY]) {
+      const owner = data[key];
+      if (!isRecord(owner) || !isRecord(owner.properties)) continue;
+      const defs = {};
+      for (const [k, def] of Object.entries(owner.properties)) {
+        defs[k] = def.type === "instanceSwap" ? { ...def, default: swap(def.default), ...def.preferred ? { preferred: [...new Set(def.preferred.map(swap))] } : {} } : def;
+      }
+      if (!same(defs, owner.properties)) next = { ...next ?? data, [key]: { ...owner, properties: defs } };
+    }
+    return next ? withData(n, next) : n;
+  });
+  const mid = syncCanvasComponents(nodes, repointed, options);
+  const gone = new Set(new Graph(mid).subtree(variantId));
+  const after = relayoutSet(
+    mid.filter((n) => !gone.has(n.id)),
+    set.id,
+    options
+  );
+  return { ok: true, nodes: syncCanvasComponents(mid, after, options), ids: [replacement] };
+}
+function setCanvasVariantProperties(nodes, variantId, values, options = {}) {
+  const g = new Graph(nodes);
+  const set = variantSetIn(g, variantId);
+  if (!set) return fail(nodes, "not-found", "Choose a variant of a component set.");
+  const edit = variantEditIn(g, set.id);
+  if (!("set" in edit)) return fail(nodes, edit.code, edit.reason);
+  const wanted = cleanVariantPairs(values);
+  if (typeof wanted === "string") return fail(nodes, "invalid", wanted);
+  const problem = addMissingProperties(edit, wanted, (options.defaultValue ?? "Default").trim());
+  if (problem) return fail(nodes, "invalid", problem);
+  edit.values.set(variantId, { ...edit.values.get(variantId), ...wanted });
+  const dup = duplicateAmong(edit.values, [variantId]);
+  if (dup) return fail(nodes, "invalid", `A variant with ${dup} exists already.`);
+  const updates = writeVariantEdit(edit);
+  if (updates.size === 0) return { ok: true, nodes, ids: [variantId] };
+  return done(nodes, nodes.map((n) => updates.get(n.id) ?? n), [variantId], options);
+}
+function updateInstanceValues(g, setId, updates, fn) {
+  const ids = new Set(variantsIn(g, setId).map((v) => v.id));
+  for (const n of g.nodes) {
+    const inst = getInstanceData(n);
+    if (!inst?.properties || !ids.has(inst.componentId)) continue;
+    const props = fn({ ...inst.properties });
+    if (same(props, inst.properties)) continue;
+    const cur = updates.get(n.id) ?? n;
+    updates.set(n.id, withData(cur, { ...dataOf(cur), [INSTANCE_DATA_KEY]: { ...inst, properties: props } }));
+  }
+}
+function renameCanvasVariantProperty(nodes, setId, name, newName, options = {}) {
+  const g = new Graph(nodes);
+  const edit = variantEditIn(g, setId);
+  if (!("set" in edit)) return fail(nodes, edit.code, edit.reason);
+  const known = variantOptionsIn(g, setId);
+  if (!known.some((o) => o.name === name)) return fail(nodes, "unknown-property", `Unknown variant property "${name}".`);
+  const to = newName.trim();
+  const problem = variantNameProblem("property", to);
+  if (problem) return fail(nodes, "invalid", problem);
+  if (to === name) return { ok: true, nodes, ids: [setId] };
+  if (known.some((o) => o.name === to)) return fail(nodes, "invalid", `"${to}" exists already.`);
+  if (to in propertyDefsIn(g, edit.variants[0].id)) return fail(nodes, "invalid", `"${to}" is a component property.`);
+  const rename = (v) => Object.fromEntries(Object.entries(v).map(([k, val]) => [k === name ? to : k, val]));
+  for (const [id, v] of edit.values) edit.values.set(id, rename(v));
+  const updates = writeVariantEdit(edit);
+  updateInstanceValues(g, setId, updates, (props) => name in props ? rename(props) : props);
+  return done(nodes, nodes.map((n) => updates.get(n.id) ?? n), [setId], options);
+}
+function renameCanvasVariantValue(nodes, setId, property, value, newValue, options = {}) {
+  const g = new Graph(nodes);
+  const edit = variantEditIn(g, setId);
+  if (!("set" in edit)) return fail(nodes, edit.code, edit.reason);
+  const option = variantOptionsIn(g, setId).find((o) => o.name === property);
+  if (!option) return fail(nodes, "unknown-property", `Unknown variant property "${property}".`);
+  if (!option.values.includes(value)) return fail(nodes, "invalid", `"${property}" has no value "${value}".`);
+  const to = newValue.trim();
+  const problem = variantNameProblem("value", to);
+  if (problem) return fail(nodes, "invalid", problem);
+  if (to === value) return { ok: true, nodes, ids: [setId] };
+  const touched = [];
+  for (const [id, v] of edit.values) {
+    if (v[property] !== value) continue;
+    edit.values.set(id, { ...v, [property]: to });
+    touched.push(id);
+  }
+  const dup = duplicateAmong(edit.values, touched);
+  if (dup) return fail(nodes, "invalid", `A variant with ${dup} exists already.`);
+  const updates = writeVariantEdit(edit);
+  updateInstanceValues(g, setId, updates, (props) => props[property] === value ? { ...props, [property]: to } : props);
+  return done(nodes, nodes.map((n) => updates.get(n.id) ?? n), [setId], options);
+}
 
 // src/canvas/componentsController.ts
 function makePatch(from, to) {
@@ -11449,6 +11166,24 @@ function createCanvasComponentsController(options) {
   }
   const reason = (result) => result.ok ? true : result.reason;
   const nodes = () => options.getNodes();
+  const refused = (why) => ({ ok: false, nodes: nodes(), code: "not-found", reason: why });
+  const setOf = (id) => {
+    const at = target(id);
+    const node = at ? nodes().find((n) => n.id === at) : void 0;
+    if (!node) return void 0;
+    return isCanvasComponentSet(node) ? node.id : getVariantSet(nodes(), node.id);
+  };
+  const variantOf = (id) => {
+    const at = target(id);
+    return at && getVariantSet(nodes(), at) ? at : void 0;
+  };
+  const NO_SET = "Select a component set or one of its variants.";
+  const NO_VARIANT = "Select a variant of a component set.";
+  const addOptions = (setId, addOptions_) => {
+    if (addOptions_.from !== void 0 || setId !== void 0) return addOptions_;
+    const v = variantOf();
+    return v ? { ...addOptions_, from: v } : addOptions_;
+  };
   const controller = {
     sync,
     /** Rebuilds every instance from its main (e.g. after loading), not recorded in history. */
@@ -11563,6 +11298,63 @@ function createCanvasComponentsController(options) {
         (n) => setCanvasComponentProperty(n, componentId, name, def, { ...syncOptions(), ...propertyOptions })
       );
     },
+    /**
+     * Adds a variant to a set (default: the selection's set) by duplicating `from` (default:
+     * the selected variant, else the default variant) with the given `variant` values.
+     */
+    addVariant(setId, variantOptions = {}) {
+      const set2 = setOf(setId);
+      if (!set2) return refused(NO_SET);
+      const opts = addOptions(setId, variantOptions);
+      return run("Add Variant", (n) => addCanvasVariant(n, set2, { ...syncOptions(), ...opts }));
+    },
+    canAddVariant(setId, variantOptions = {}) {
+      const set2 = setOf(setId);
+      return set2 ? reason(addCanvasVariant(nodes(), set2, { ...addOptions(setId, variantOptions), layout: false })) : NO_SET;
+    },
+    /** Removes a variant (default: the selected one); its instances switch to the closest variant. */
+    removeVariant(variantId) {
+      const v = variantOf(variantId);
+      if (!v) return refused(NO_VARIANT);
+      return run("Remove Variant", (n) => removeCanvasVariant(n, v, syncOptions()));
+    },
+    canRemoveVariant(variantId) {
+      const v = variantOf(variantId);
+      return v ? reason(removeCanvasVariant(nodes(), v, { layout: false })) : NO_VARIANT;
+    },
+    /** Edits a variant's property values (default: the selected variant). */
+    setVariantProperties(values, variantId, variantOptions = {}) {
+      const v = variantOf(variantId);
+      if (!v) return refused(NO_VARIANT);
+      return run("Edit Variant", (n) => setCanvasVariantProperties(n, v, values, { ...syncOptions(), ...variantOptions }));
+    },
+    canSetVariantProperties(values, variantId) {
+      const v = variantOf(variantId);
+      if (!v) return NO_VARIANT;
+      return values ? reason(setCanvasVariantProperties(nodes(), v, values, { layout: false })) : true;
+    },
+    /** Renames a variant property across a set (default: the selection's set). */
+    renameVariantProperty(name, newName, setId) {
+      const set2 = setOf(setId);
+      if (!set2) return refused(NO_SET);
+      return run("Rename Variant Property", (n) => renameCanvasVariantProperty(n, set2, name, newName, syncOptions()));
+    },
+    canRenameVariantProperty(name, newName, setId) {
+      const set2 = setOf(setId);
+      if (!set2) return NO_SET;
+      return name !== void 0 && newName !== void 0 ? reason(renameCanvasVariantProperty(nodes(), set2, name, newName, { layout: false })) : true;
+    },
+    /** Renames a value of a variant property across a set (default: the selection's set). */
+    renameVariantValue(property, value, newValue, setId) {
+      const set2 = setOf(setId);
+      if (!set2) return refused(NO_SET);
+      return run("Rename Variant Value", (n) => renameCanvasVariantValue(n, set2, property, value, newValue, syncOptions()));
+    },
+    canRenameVariantValue(property, value, newValue, setId) {
+      const set2 = setOf(setId);
+      if (!set2) return NO_SET;
+      return property !== void 0 && value !== void 0 && newValue !== void 0 ? reason(renameCanvasVariantValue(nodes(), set2, property, value, newValue, { layout: false })) : true;
+    },
     /** Binds (or with `null` unbinds) a main layer's field to a component property. */
     bindComponentProperty(layerId, field, name) {
       return run("Bind Component Property", (n) => bindCanvasComponentProperty(n, layerId, field, name, syncOptions()));
@@ -11644,6 +11436,7 @@ export {
   StreamingLayoutManager,
   TOKEN_BINDINGS_DATA_KEY,
   TOKEN_MODES_DATA_KEY,
+  addCanvasVariant,
   addKeyframesAtTime,
   alignNodes,
   animateNode,
@@ -11767,6 +11560,7 @@ export {
   getLayoutParent,
   getLayoutSizing,
   getLayoutedNodes,
+  getNextVariantValues,
   getNodeAnimation,
   getNodeOverrides,
   getNodeRect,
@@ -11880,7 +11674,10 @@ export {
   recordAnimationChanges,
   relayoutUpdates,
   remapPastedNodes,
+  removeCanvasVariant,
   removeTrack,
+  renameCanvasVariantProperty,
+  renameCanvasVariantValue,
   reorderNodes,
   repositionNodesTo,
   resetCanvasInstanceOverrides,
@@ -11908,6 +11705,7 @@ export {
   setCanvasComponentProperty,
   setCanvasInstanceProperties,
   setCanvasTokenMode,
+  setCanvasVariantProperties,
   setKeyframe,
   setKeyframeEasing,
   setMotionPath,