@pixerate/editor 0.63.0 → 0.65.0

package/dist/animation-editor/index.js

@@ -23,6 +23,7 @@ import {
   bezierPathLength,
   bezierPathPointAtLength,
   bezierPathToSvg,
+  toBezierPath,
   transformBezierPath
 } from "../chunk-GTMJ4Y3S.js";
 import {
@@ -1257,6 +1258,88 @@ function withViewBox(svg, box) {
   return svg.replace(/viewBox="[^"]*"/, `viewBox="${f(box.x)} ${f(box.y)} ${f(box.width)} ${f(box.height)}"`);
 }
 
+// src/animation-editor/onion.ts
+function motionGhosts(scene, time, onion = {}) {
+  const before = Math.max(0, Math.floor(onion.before ?? 2));
+  const after = Math.max(0, Math.floor(onion.after ?? 0));
+  const base = Math.min(1, Math.max(0, onion.opacity ?? 0.35));
+  const timeline = compileMotionScene(scene);
+  const ghosts = [];
+  const push = (t, offset) => ghosts.push({ time: t, offset, opacity: Math.round(base / Math.abs(offset) * 1e3) / 1e3 });
+  if (onion.spacing === "commands") {
+    const marks = [...new Set(timeline.commands.flatMap((c) => [c.start, c.end]))].sort((a, b) => a - b);
+    marks.filter((t) => t < time - 1e-6).reverse().slice(0, before).forEach((t, i) => push(t, -(i + 1)));
+    marks.filter((t) => t > time + 1e-6).slice(0, after).forEach((t, i) => push(t, i + 1));
+    return ghosts;
+  }
+  const spacing = typeof onion.spacing === "number" && onion.spacing > 0 ? onion.spacing : 1e3 / 12;
+  for (let i = 1; i <= before && time - i * spacing >= 0; i++) push(time - i * spacing, -i);
+  for (let i = 1; i <= after && time + i * spacing <= timeline.duration; i++) push(time + i * spacing, i);
+  return ghosts;
+}
+var MOVING = ["x", "y", "rotation", "scaleX", "scaleY", "follow", "shape"];
+function motionMovingIds(scene) {
+  const timeline = compileMotionScene(scene);
+  const nodes = indexMotionNodes(scene.artwork.nodes);
+  const moving = new Set(timeline.segments.filter((s) => s.node && MOVING.includes(s.property)).map((s) => s.node));
+  return [...nodes.values()].filter((e) => e.node.visible !== false && (moving.has(e.node.id) || e.ancestors.some((a) => moving.has(a)))).map((e) => e.node.id);
+}
+function motionPath(scene, id, options = {}) {
+  const nodes = indexMotionNodes(scene.artwork.nodes);
+  const entry = nodes.get(id);
+  if (!entry) throw new Error(`There is no element "${id}" in the artwork.`);
+  const timeline = compileMotionScene(scene);
+  const from = Math.max(0, options.from ?? 0);
+  const to = Math.min(timeline.duration, options.to ?? timeline.duration);
+  let step = options.step && options.step > 0 ? options.step : 1e3 / 30;
+  if ((to - from) / step > 400) step = (to - from) / 400;
+  const r = (n) => Math.round(n * 100) / 100;
+  const centreAt = (t) => {
+    const node = indexMotionNodes(motionFrameAtCache(scene, t)).get(id);
+    const b = node?.bounds;
+    return b ? { t: r(t), x: r(b.x + b.width / 2), y: r(b.y + b.height / 2) } : null;
+  };
+  const points = [];
+  for (let t = from; t <= to + 1e-6; t += step) {
+    const p = centreAt(Math.min(t, to));
+    if (p) points.push(p);
+  }
+  const owners = /* @__PURE__ */ new Set([id, ...entry.ancestors]);
+  const times = [...new Set(timeline.segments.filter((s) => owners.has(s.node) && MOVING.includes(s.property)).flatMap((s) => [s.start, s.end]))].filter((t) => t >= from && t <= to).sort((a, b) => a - b);
+  const keys = times.map(centreAt).filter((p) => p !== null);
+  return { id, points, keys };
+}
+function motionFrameAtCache(scene, t) {
+  return motionFrameAt(scene, t).document.nodes;
+}
+function motionPathsSvg(paths, camera, color = "#f43f5e") {
+  const w = Math.max(camera.width, camera.height) / 400;
+  const f = (n) => String(Math.round(n * 100) / 100);
+  return paths.filter((p) => p.points.length > 1).map(
+    (p) => `<g data-motion-path="${p.id.replace(/"/g, "&quot;")}" fill="none" stroke="${color}" stroke-width="${f(w)}" stroke-linecap="round" stroke-linejoin="round" opacity="0.8"><polyline points="${p.points.map((q) => `${f(q.x)},${f(q.y)}`).join(" ")}" stroke-dasharray="${f(w * 3)} ${f(w * 2)}"/>${p.keys.map((k) => `<circle cx="${f(k.x)}" cy="${f(k.y)}" r="${f(w * 2.5)}" fill="${color}" stroke="none"/>`).join("")}</g>`
+  ).join("");
+}
+var innerSvg = (svg) => svg.slice(svg.indexOf(">") + 1, svg.lastIndexOf("</svg>"));
+function motionStageSvg(scene, time, options = {}) {
+  const { onionSkin, motionPaths, motionPathColor, ...svgOptions } = options;
+  const current = motionFrameToSvg(scene, time, svgOptions);
+  if (!onionSkin && !motionPaths) return current;
+  const prefix = svgOptions.idPrefix ?? "vg-";
+  const ghosts = onionSkin ? motionGhosts(scene, time, onionSkin).map((g, i) => {
+    const own = `${prefix}ghost${i}-`;
+    const inner = innerSvg(motionFrameToSvg(scene, g.time, { ...svgOptions, idPrefix: own, background: false })).replace(new RegExp(` id="(?!${own.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})[^"]*"`, "g"), "");
+    return `<g data-onion="${g.offset < 0 ? "before" : "after"}" opacity="${g.opacity}">${inner}</g>`;
+  }) : [];
+  const camera = motionFrameAt(scene, time).camera;
+  const ids = motionPaths === true ? motionMovingIds(scene) : motionPaths ? [...motionPaths] : [];
+  const paths = ids.length ? motionPathsSvg(ids.map((id) => motionPath(scene, id)), camera, motionPathColor) : "";
+  const open = current.indexOf(">") + 1;
+  const close = current.lastIndexOf("</svg>");
+  const body = current.slice(open, close);
+  const bg = svgOptions.background !== false && scene.artwork.background ? /^\s*<rect[^>]*\/>/.exec(body)?.[0] ?? "" : "";
+  return `${current.slice(0, open)}${bg}${ghosts.join("")}${body.slice(bg.length)}${paths}</svg>`;
+}
+
 // src/animation-editor/check.ts
 var MOTION_MIN_CHANGE_MS = 120;
 var NUMERIC_PARAMS = (node, effectId) => {
@@ -2183,6 +2266,311 @@ function fromFlairVectorEffect(effect, options = {}) {
   return { scene, notes, issues: checkMotionScene(scene) };
 }
 
+// src/animation-editor/lottie.ts
+var STATIC_TR = () => ({
+  ty: "tr",
+  p: { a: 0, k: [0, 0] },
+  a: { a: 0, k: [0, 0] },
+  s: { a: 0, k: [100, 100] },
+  r: { a: 0, k: 0 },
+  o: { a: 0, k: 100 },
+  sk: { a: 0, k: 0 },
+  sa: { a: 0, k: 0 }
+});
+function rgba(color) {
+  const hex = typeof color === "string" ? normalizeTokenColor(color) : null;
+  if (!hex) return null;
+  const n = (i) => parseInt(hex.slice(i, i + 2), 16) / 255;
+  return [n(1), n(3), n(5), hex.length >= 9 ? parseInt(hex.slice(7, 9), 16) / 255 : 1];
+}
+function lottieContours(path, round2) {
+  const out = [];
+  let cur = null;
+  let px = 0;
+  let py = 0;
+  const add = (x, y, inX, inY) => {
+    cur.v.push([x, y]);
+    cur.i.push([inX - x, inY - y]);
+    cur.o.push([0, 0]);
+    px = x;
+    py = y;
+  };
+  for (const cmd of path) {
+    if (cmd.type === "M") {
+      if (cur) out.push(cur);
+      cur = { c: false, v: [], i: [], o: [] };
+      add(cmd.x, cmd.y, cmd.x, cmd.y);
+    } else if (!cur) continue;
+    else if (cmd.type === "L") add(cmd.x, cmd.y, cmd.x, cmd.y);
+    else if (cmd.type === "Q") {
+      const c1 = [px + 2 / 3 * (cmd.x1 - px), py + 2 / 3 * (cmd.y1 - py)];
+      const c2 = [cmd.x + 2 / 3 * (cmd.x1 - cmd.x), cmd.y + 2 / 3 * (cmd.y1 - cmd.y)];
+      cur.o[cur.o.length - 1] = [c1[0] - px, c1[1] - py];
+      add(cmd.x, cmd.y, c2[0], c2[1]);
+    } else if (cmd.type === "C") {
+      cur.o[cur.o.length - 1] = [cmd.x1 - px, cmd.y1 - py];
+      add(cmd.x, cmd.y, cmd.x2, cmd.y2);
+    } else if (cmd.type === "Z") {
+      cur.c = true;
+      const n = cur.v.length;
+      if (n > 1 && Math.abs(cur.v[n - 1][0] - cur.v[0][0]) < 1e-9 && Math.abs(cur.v[n - 1][1] - cur.v[0][1]) < 1e-9) {
+        cur.i[0] = cur.i[n - 1];
+        cur.v.pop();
+        cur.i.pop();
+        cur.o.pop();
+      }
+      out.push(cur);
+      cur = null;
+    }
+  }
+  if (cur) out.push(cur);
+  return out.map((c) => ({ c: c.c, v: c.v.map((p) => p.map(round2)), i: c.i.map((p) => p.map(round2)), o: c.o.map((p) => p.map(round2)) }));
+}
+function staticParts(m) {
+  const sx = Math.hypot(m[0], m[1]);
+  if (!(sx > 1e-12)) return null;
+  const sy = (m[0] * m[3] - m[1] * m[2]) / sx;
+  if (Math.abs(m[2] + m[1] / sx * sy) > 1e-6 || Math.abs(m[3] - m[0] / sx * sy) > 1e-6) return null;
+  return { p: [m[4], m[5]], s: [sx * 100, sy * 100], r: Math.atan2(m[1], m[0]) * 180 / Math.PI };
+}
+function toLottie(scene, options = {}) {
+  const fps = options.fps ?? scene.fps ?? 30;
+  const precision = options.precision ?? 3;
+  const round2 = (n) => Math.round(n * 10 ** precision) / 10 ** precision;
+  const frame = (ms) => round2(ms * fps / 1e3);
+  const timeline = compileMotionScene(scene);
+  const nodes = indexMotionNodes(scene.artwork.nodes);
+  const notes = [];
+  let sampled = 0;
+  const track = (id, p) => timeline.tracks.get(motionTrackKey(id, p)) ?? [];
+  const layers = (id, p) => timeline.tracks.get(`${motionTrackKey(id, p)}\0add`) ?? [];
+  const end = timeline.duration;
+  const curveOf = (s) => {
+    if (s.behavior || s.steps || s.geometric) return void 0;
+    const e = s.reverse ? reverseCubicBezier(s.ease) : resolveEasing(s.ease);
+    if (!e || e === "hold" || e.type !== "cubic-bezier") return void 0;
+    return [e.x1, e.y1, e.x2, e.y2];
+  };
+  const animate = (segments, value, exact = true) => {
+    const rest = value(0).map(round2);
+    if (!segments.length) return { a: 0, k: rest.length === 1 ? rest[0] : rest };
+    const keys = [];
+    const key = (t, v, ease) => {
+      const k = { t: frame(t), s: v.map(round2) };
+      if (ease === "hold") k.h = 1;
+      else {
+        const [x1, y1, x2, y2] = ease === "linear" || !ease ? [0, 0, 1, 1] : ease;
+        k.o = { x: [round2(x1)], y: [round2(y1)] };
+        k.i = { x: [round2(x2)], y: [round2(y2)] };
+      }
+      if (keys.length && keys[keys.length - 1].t === k.t) keys[keys.length - 1] = k;
+      else keys.push(k);
+    };
+    const times = [.../* @__PURE__ */ new Set([0, ...segments.flatMap((s) => [s.start, s.end]), end])].filter((t) => t >= 0 && t <= end).sort((a, b) => a - b);
+    for (let n = 0; n + 1 < times.length; n++) {
+      const a = times[n];
+      const b = times[n + 1];
+      const active = segments.filter((s) => s.start < b && s.end > a);
+      if (!active.length) {
+        key(a, value(a), "hold");
+        continue;
+      }
+      const first = active[0];
+      const curve = exact && active.every((s) => s.start === a && s.end === b && JSON.stringify(curveOf(s)) === JSON.stringify(curveOf(first))) ? curveOf(first) : void 0;
+      if (curve) {
+        key(a, value(a), curve);
+        continue;
+      }
+      const count = Math.max(1, Math.ceil((b - a) * fps / 1e3));
+      for (let k = 0; k < count; k++) {
+        const t = a + (b - a) * k / count;
+        key(t, value(t), "linear");
+        sampled++;
+      }
+    }
+    for (const s of segments) if (s.end <= s.start) key(s.start, value(s.start), "hold");
+    keys.sort((x, y) => x.t - y.t);
+    key(end, value(end), "hold");
+    const last = keys[keys.length - 1];
+    delete last.o;
+    delete last.i;
+    delete last.h;
+    return { a: 1, k: keys };
+  };
+  const poseAt = (entry, t) => {
+    const o = motionNodeOffset(entry, timeline, t, nodes);
+    if (!o) return { p: [entry.center.x, entry.center.y], s: [100, 100], r: 0 };
+    const m = o.matrix;
+    const sx = Math.hypot(m[0], m[1]);
+    const sy = sx > 1e-12 ? (m[0] * m[3] - m[1] * m[2]) / sx : 0;
+    const c = entry.center;
+    return { p: [m[0] * c.x + m[2] * c.y + m[4], m[1] * c.x + m[3] * c.y + m[5]], s: [sx * 100, sy * 100], r: Math.atan2(m[1], m[0]) * 180 / Math.PI };
+  };
+  const poseTransform = (entry) => {
+    const id = entry.node.id;
+    const tr = STATIC_TR();
+    const c = [entry.center.x, entry.center.y].map(round2);
+    const own = (p) => track(id, p);
+    const layered = ["x", "y", "rotation", "scaleX", "scaleY"].some((p) => layers(id, p).length);
+    const moving = ["x", "y", "rotation", "scaleX", "scaleY", "follow"].some((p) => own(p).length) || layered;
+    if (moving) {
+      const mixed = own("follow").length > 0 || layered;
+      tr.a = { a: 0, k: c };
+      tr.p = animate(mixed ? [...own("x"), ...own("y"), ...own("follow"), ...layers(id, "x"), ...layers(id, "y")] : [...own("x"), ...own("y")], (t) => poseAt(entry, t).p, !mixed);
+      tr.r = animate(mixed ? [...own("rotation"), ...own("follow"), ...layers(id, "rotation")] : own("rotation"), (t) => [poseAt(entry, t).r], !mixed);
+      tr.s = animate(mixed ? [...own("scaleX"), ...own("scaleY"), ...layers(id, "scaleX"), ...layers(id, "scaleY")] : [...own("scaleX"), ...own("scaleY")], (t) => poseAt(entry, t).s, !mixed);
+      if (tr.p.a === 0) tr.p = { a: 0, k: poseAt(entry, 0).p.map(round2) };
+    }
+    const opacity = own("opacity");
+    const rest = entry.node.opacity ?? 1;
+    tr.o = opacity.length ? animate(opacity, (t) => [Math.min(1, Math.max(0, Number(trackValue(opacity, t) ?? rest))) * 100]) : { a: 0, k: round2(rest * 100) };
+    return tr;
+  };
+  const owner = (path, p) => {
+    const entry = nodes.get(path.id);
+    if (!entry) return void 0;
+    return [...entry.ancestors, path.id].find((id) => timeline.tracks.has(motionTrackKey(id, p)));
+  };
+  const paintOf = (paint, what, id) => {
+    if (paint === void 0 || paint === null || paint === "none") return null;
+    const c = rgba(paint);
+    if (!c) notes.push(`"${id}": its ${what} is a gradient, which is not exported; it is left unpainted.`);
+    return c;
+  };
+  const pathShapes = (path) => {
+    const items = [];
+    const shapeSegments = [...timeline.tracks.entries()].filter(([k]) => k.startsWith(`${path.id}\0`) && (k.endsWith("\0shape") || k.includes("\0effect:"))).flatMap(([, v]) => v);
+    const geometryAt = (t) => {
+      if (!shapeSegments.length) return vectorPathWorldBezier(path);
+      const now = indexMotionNodes(motionFrameAt(scene, t, { draw: false, offsets: false }).document.nodes).get(path.id)?.node;
+      return now && now.type === "path" ? vectorPathWorldBezier(expandVectorAppearances([now])[0]) : vectorPathWorldBezier(path);
+    };
+    const rest = lottieContours(toBezierPath(geometryAt(0)), round2);
+    rest.forEach((contour, n) => {
+      let ks = { a: 0, k: contour };
+      if (shapeSegments.length) {
+        const keys = [];
+        let fits = true;
+        const count = Math.max(1, Math.ceil(end * fps / 1e3));
+        for (let k = 0; k <= count && fits; k++) {
+          const t = end * k / count;
+          const c = lottieContours(toBezierPath(geometryAt(t)), round2)[n];
+          if (!c || c.v.length !== contour.v.length || c.c !== contour.c) fits = false;
+          else keys.push({ t: frame(t), s: [c], ...k < count ? { o: { x: [0], y: [0] }, i: { x: [1], y: [1] } } : {} });
+        }
+        if (fits) {
+          ks = { a: 1, k: keys };
+          sampled += keys.length;
+        } else notes.push(`"${path.id}": its morph changes how many points the outline has, which Lottie cannot tween; it shows its starting shape.`);
+      }
+      items.push({ ty: "sh", nm: `${path.id} ${n + 1}`, ks });
+    });
+    const fillFrom = owner(path, "fill");
+    const strokeFrom = owner(path, "stroke");
+    const widthFrom = owner(path, "strokeWidth");
+    const fadeFrom = owner(path, "fillOpacity");
+    const drawFrom = owner(path, "drawEnd");
+    if (drawFrom) {
+      const draw = track(drawFrom, "drawEnd");
+      items.push({ ty: "tm", nm: "Draw on", s: { a: 0, k: 0 }, e: animate(draw, (t) => [Math.min(1, Math.max(0, Number(trackValue(draw, t) ?? 1))) * 100]), o: { a: 0, k: 0 }, m: 1 });
+    }
+    if (owner(path, "drawStart")) notes.push(`"${path.id}": drawing from a start other than 0 is not exported.`);
+    const stroke = paintOf(path.stroke, "stroke", path.id);
+    if (stroke || strokeFrom) {
+      const colour = strokeFrom ? track(strokeFrom, "stroke") : [];
+      items.push({
+        ty: "st",
+        nm: "Stroke",
+        c: colour.length ? animate(colour, (t) => rgba(trackValue(colour, t)) ?? stroke ?? [0, 0, 0, 1]) : { a: 0, k: (stroke ?? [0, 0, 0, 1]).map(round2) },
+        o: { a: 0, k: 100 },
+        w: widthFrom ? animate(track(widthFrom, "strokeWidth"), (t) => [Math.max(0, Number(trackValue(track(widthFrom, "strokeWidth"), t) ?? path.strokeWidth ?? 1))]) : { a: 0, k: round2(path.strokeWidth ?? 1) },
+        lc: path.strokeLinecap === "round" ? 2 : path.strokeLinecap === "square" ? 3 : 1,
+        lj: path.strokeLinejoin === "round" ? 2 : path.strokeLinejoin === "bevel" ? 3 : 1,
+        ml: 4
+      });
+      if (path.strokeDasharray?.length) notes.push(`"${path.id}": its dashes are not exported; the stroke is solid.`);
+      if (path.strokeAlign && path.strokeAlign !== "center") notes.push(`"${path.id}": its stroke is drawn centred (Lottie has no inside or outside strokes).`);
+    }
+    const fill = paintOf(path.fill, "fill", path.id);
+    if (fill || fillFrom) {
+      const colour = fillFrom ? track(fillFrom, "fill") : [];
+      const fade = fadeFrom ? track(fadeFrom, "fillOpacity") : [];
+      items.push({
+        ty: "fl",
+        nm: "Fill",
+        c: colour.length ? animate(colour, (t) => rgba(trackValue(colour, t)) ?? fill ?? [0, 0, 0, 1]) : { a: 0, k: (fill ?? [0, 0, 0, 1]).map(round2) },
+        o: fade.length ? animate(fade, (t) => [Math.min(1, Math.max(0, Number(trackValue(fade, t) ?? 1))) * 100]) : { a: 0, k: 100 },
+        r: path.fillRule === "evenodd" ? 2 : 1
+      });
+    }
+    return items;
+  };
+  const nodeGroup = (node) => {
+    const entry = nodes.get(node.id);
+    if (timeline.tracks.has(motionTrackKey(node.id, "clipRect")) || timeline.tracks.has(motionTrackKey(node.id, "clipCircle")))
+      notes.push(`"${node.id}": its wipe, iris or split reveal is not exported (Lottie masks belong to layers); it fades with its opacity only.`);
+    let inner;
+    const innerTr = STATIC_TR();
+    if (node.type === "path") inner = [...pathShapes(node)];
+    else {
+      inner = [...node.children].reverse().map(nodeGroup);
+      const m = nodeMatrix(node);
+      if (m !== IDENTITY_MATRIX) {
+        const parts = staticParts(m);
+        if (!parts) notes.push(`"${node.id}": its transform skews, which is not exported; it is drawn without the skew.`);
+        else {
+          innerTr.p = { a: 0, k: parts.p.map(round2) };
+          innerTr.s = { a: 0, k: parts.s.map(round2) };
+          innerTr.r = { a: 0, k: round2(parts.r) };
+        }
+      }
+    }
+    const body = { ty: "gr", nm: `${node.id} (own)`, it: [...inner, innerTr] };
+    return { ty: "gr", nm: node.name ?? node.id, ...node.visible === false ? { hd: true } : {}, it: [body, poseTransform(entry)] };
+  };
+  const artwork = { ...scene.artwork, nodes: expandVectorAppearances(scene.artwork.nodes) };
+  const content = [...artwork.nodes].reverse().map(nodeGroup);
+  if (artwork.background && rgba(artwork.background))
+    content.push({ ty: "gr", nm: "Background", it: [{ ty: "rc", nm: "Background", p: { a: 0, k: [artwork.width / 2, artwork.height / 2] }, s: { a: 0, k: [artwork.width, artwork.height] }, r: { a: 0, k: 0 } }, { ty: "fl", c: { a: 0, k: rgba(artwork.background).map(round2) }, o: { a: 0, k: 100 }, r: 1 }, STATIC_TR()] });
+  const camera = track("", "camera");
+  const root = STATIC_TR();
+  if (camera.length) {
+    const box = (t) => trackValue(camera, t) ?? [0, 0, artwork.width, artwork.height];
+    root.a = animate(camera, (t) => box(t).slice(0, 2), false);
+    root.s = animate(camera, (t) => [artwork.width / box(t)[2] * 100, artwork.height / box(t)[3] * 100], false);
+  }
+  const op = Math.max(1, Math.ceil(end * fps / 1e3));
+  const lottie = {
+    v: "5.7.4",
+    fr: fps,
+    ip: 0,
+    op,
+    w: artwork.width,
+    h: artwork.height,
+    nm: scene.name,
+    ddd: 0,
+    assets: [],
+    layers: [
+      {
+        ddd: 0,
+        ind: 1,
+        ty: 4,
+        nm: scene.name,
+        sr: 1,
+        ks: { o: { a: 0, k: 100 }, r: { a: 0, k: 0 }, p: { a: 0, k: [0, 0, 0] }, a: { a: 0, k: [0, 0, 0] }, s: { a: 0, k: [100, 100, 100] } },
+        ao: 0,
+        shapes: [{ ty: "gr", nm: "Camera", it: [...content, root] }],
+        ip: 0,
+        op,
+        st: 0,
+        bm: 0
+      }
+    ],
+    markers: timeline.shots.map((s) => ({ tm: frame(s.start), cm: s.label ?? s.id, dr: frame(s.end - s.start) }))
+  };
+  return { lottie, sampled, notes: [...new Set(notes)] };
+}
+
 // src/animation-editor/controller.ts
 var BLANK = { width: 800, height: 450, background: "#ffffff", nodes: [] };
 var AnimationEditorController = class {
@@ -2395,7 +2783,7 @@ var AnimationEditorController = class {
   }
   /** The scene at `time` (default: the playhead) as SVG. */
   toSvg(time = this.player.currentTime, options = {}) {
-    return motionFrameToSvg(this.scene, time, options);
+    return motionStageSvg(this.scene, time, options);
   }
   /** The scene as a Flair `SvgMotion`. */
   toFlairMotion(options = {}) {
@@ -2755,10 +3143,20 @@ function createAnimationEditorToolProvider(controller, options = {}) {
       time: MS("Time from the start"),
       shot: { ...SHOT_ID, description: 'Render a moment of this shot instead of "time".' },
       at: { type: "string", enum: ["start", "middle", "end"], description: "With shot: which moment (default end: everything drawn, before the next shot)." },
-      format: { type: "string", enum: ["svg", "png"], description: "svg (default) or png (only when the host supports it)." }
+      format: { type: "string", enum: ["svg", "png"], description: "svg (default) or png (only when the host supports it)." },
+      onion_skin: object(
+        {
+          before: { type: "integer", minimum: 0, maximum: 12, description: "Ghost frames before the moment (default 2)." },
+          after: { type: "integer", minimum: 0, maximum: 12, description: "Ghost frames after it (default 0)." },
+          spacing: { anyOf: [{ type: "number", exclusiveMinimum: 0 }, { type: "string", enum: ["commands"] }], description: 'Ms between ghosts (default 83, every other frame at 24 fps), or "commands" for the moments commands start and end.' }
+        },
+        [],
+        "Draw faded frames either side of the moment, to see motion in one picture."
+      ),
+      motion_paths: { anyOf: [{ type: "boolean" }, { type: "array", items: { type: "string", minLength: 1 } }], description: "Draw where nodes travel (dashed, with a dot where each change starts or ends): true for every node whose place changes, or a list of ids." }
     }),
     annotations: { title: "Render a frame", ...READ },
-    handler: async ({ time, shot, at = "end", format = "svg" }) => {
+    handler: async ({ time, shot, at = "end", format = "svg", onion_skin, motion_paths }) => {
       const s = scene();
       let t = time ?? controller.getState().time;
       if (shot !== void 0) {
@@ -2766,7 +3164,11 @@ function createAnimationEditorToolProvider(controller, options = {}) {
         if (!timing) throw new Error(`There is no shot "${shot}"; the shots are ${s.shots.map((x) => `"${x.id}"`).join(", ") || "none yet"}.`);
         t = at === "start" ? timing.start : at === "middle" ? (timing.commandsStart + timing.commandsEnd) / 2 : Math.max(timing.start, timing.end - 1);
       }
-      const svg = controller.toSvg(t, { pretty: false });
+      if (Array.isArray(motion_paths)) {
+        const known = new Set(describeMotionElements(s).map((e) => e.id));
+        for (const id of motion_paths) if (!known.has(id)) throw new Error(`There is no element ${namedWithSuggestion(id, known)} to draw a motion path for.`);
+      }
+      const svg = controller.toSvg(t, { pretty: false, ...onion_skin ? { onionSkin: onion_skin } : {}, ...motion_paths ? { motionPaths: motion_paths } : {} });
       if (format === "png") {
         if (!options.rasterize) throw new Error('This host cannot make PNG images; call render_animation_frame with format "svg".');
         const image = await options.rasterize(svg, { width: s.artwork.width, height: s.artwork.height });
@@ -2814,6 +3216,24 @@ function createAnimationEditorToolProvider(controller, options = {}) {
       };
     }
   };
+  const getMotionPath = {
+    name: "get_motion_path",
+    title: "Read where a node travels",
+    description: "Returns where a node's centre is over time, in document units (sampled), and where it is each time a change that moves it starts or ends. Use it to check a path, spacing or arc without reading pictures; render_animation_frame with motion_paths draws it.",
+    inputSchema: object({
+      node: { type: "string", minLength: 1, description: "Element id from get_animation." },
+      from: { type: "number", minimum: 0, description: "From this time, ms (default 0)." },
+      to: { type: "number", minimum: 0, description: "To this time, ms (default the end)." },
+      step: { type: "number", exclusiveMinimum: 0, description: "Ms between samples (default 33; at most 400 samples)." }
+    }, ["node"]),
+    annotations: { title: "Read where a node travels", ...READ },
+    handler: ({ node, from, to, step }) => {
+      const s = scene();
+      const ids = describeMotionElements(s).map((e) => e.id);
+      if (!ids.includes(node)) throw new Error(`There is no element ${namedWithSuggestion(node, ids)}.`);
+      return motionPath(s, node, { from, to, step });
+    }
+  };
   const exportFlairMotion = {
     name: "export_flair_motion",
     title: "Export as Flair vector motion",
@@ -2827,6 +3247,14 @@ function createAnimationEditorToolProvider(controller, options = {}) {
     annotations: { title: "Export as Flair vector motion", ...READ },
     handler: ({ fps, curves, behaviors, flair }) => controller.toFlairMotion({ ...fps ? { fps } : {}, ...curves === void 0 ? {} : { curves }, ...behaviors === void 0 ? {} : { behaviors }, ...flair ? { flair } : {} })
   };
+  const exportLottie = {
+    name: "export_lottie",
+    title: "Export as Lottie",
+    description: "Returns the animation as Lottie (Bodymovin JSON, v5) for lottie-web and the mobile Lottie players: one shape layer whose groups mirror the artwork, a marker per shot, eased changes as keyframes with bezier easing and the rest sampled. Also returns how many keyframes were sampled and notes on anything not carried over (gradients, dashes, reveal clips, morphs that change point counts).",
+    inputSchema: object({ fps: { type: "number", minimum: 1, maximum: 120, description: "Frame rate (default: the scene's fps, else 30)." } }),
+    annotations: { title: "Export as Lottie", ...READ },
+    handler: ({ fps }) => toLottie(scene(), fps ? { fps } : {})
+  };
   const exportFlairEffect = {
     name: "export_flair_effect",
     title: "Export as a Flair effect",
@@ -3069,7 +3497,7 @@ function createAnimationEditorToolProvider(controller, options = {}) {
       return { redone, ...redone ? { label } : {} };
     }
   };
-  const reads = [getAnimation, getShot, findElements, getTimingGrid, checkAnimation, renderFrame, exportFlairMotion, exportFlairEffect, seekAnimation];
+  const reads = [getAnimation, getShot, findElements, getMotionPath, getTimingGrid, checkAnimation, renderFrame, exportFlairMotion, exportFlairEffect, exportLottie, seekAnimation];
   const writes = [setArtworkSvg, fitAnimation, importFlairEffect, insertShots, updateShot, deleteShots, moveShot, addCommands, updateCommand, deleteCommands, setSettings, setControls, editAnimation, writeAnimation, undo, redo];
   return {
     id: options.id ?? "animation",
@@ -3116,7 +3544,7 @@ Commands
 Working method
 1. get_animation to learn the element ids (set_animation_artwork_svg first if there is no artwork: give every element you will animate an id; or import_flair_effect to start from a Flair effect and edit it).
 2. Plan a few shots, each one idea. Add them with insert_shots, or edit_animation to make several edits as one step (dry_run first when unsure).
-3. To hit a length, fit_animation (keep the shots whose pace matters). check_animation and fix every error and warning; render_animation_frame (shot + "end") to look at the result.
+3. To hit a length, fit_animation (keep the shots whose pace matters). check_animation and fix every error and warning; render_animation_frame (shot + "end") to look at the result; add onion_skin or motion_paths to see the motion in one picture, or get_motion_path for the numbers.
 4. To make a reusable Flair effect, set_animation_controls (colour controls stand for every use of their default colour) and export_flair_effect.
 
 Keep motion purposeful: one thing moving at a time reads best, ease-out for arrivals, ease-in for exits, and hold long enough to see each result.`;
@@ -3183,12 +3611,16 @@ export {
   motionFollowRoute,
   motionFrameAt,
   motionFrameToSvg,
+  motionGhosts,
   motionIssue,
   motionIssueKey,
   motionIssueLine,
+  motionMovingIds,
   motionNodeClips,
   motionNodeOffset,
+  motionPath,
   motionPathLength,
+  motionPathsSvg,
   motionRestValue,
   motionRevealClip,
   motionRevealPadding,
@@ -3196,6 +3628,7 @@ export {
   motionSceneToJson,
   motionShotAt,
   motionShotTimeScale,
+  motionStageSvg,
   motionTrackKey,
   namedWithSuggestion,
   parseMotionScene,
@@ -3207,6 +3640,7 @@ export {
   toFlairEffectDocument,
   toFlairSvgMotion,
   toFlairVectorEffect,
+  toLottie,
   trackValue,
   withMotionLayers,
   withViewBox