@pixerate/editor 0.64.0 → 0.66.0

package/dist/animation-editor/index.cjs

@@ -51,6 +51,7 @@ var _chunkA6PHCAGXcjs = require('../chunk-A6PHCAGX.cjs');
 
 
 
+
 var _chunk2FHLHZALcjs = require('../chunk-2FHLHZAL.cjs');
 
 // src/animation-editor/types.ts
@@ -1258,10 +1259,92 @@ 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(_nullishCoalesce(onion.before, () => ( 2))));
+  const after = Math.max(0, Math.floor(_nullishCoalesce(onion.after, () => ( 0))));
+  const base = Math.min(1, Math.max(0, _nullishCoalesce(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, _nullishCoalesce(options.from, () => ( 0)));
+  const to = Math.min(timeline.duration, _nullishCoalesce(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 = _optionalChain([node, 'optionalAccess', _34 => _34.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 = _nullishCoalesce(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 ? _nullishCoalesce(_optionalChain([/^\s*<rect[^>]*\/>/, 'access', _35 => _35.exec, 'call', _36 => _36(body), 'optionalAccess', _37 => _37[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) => {
-  const effect = _optionalChain([node, 'access', _34 => _34.effects, 'optionalAccess', _35 => _35.find, 'call', _36 => _36((e) => e.id === effectId)]);
+  const effect = _optionalChain([node, 'access', _38 => _38.effects, 'optionalAccess', _39 => _39.find, 'call', _40 => _40((e) => e.id === effectId)]);
   if (!effect) return null;
   return Object.entries(effect.params).filter(([, v]) => typeof v === "number").map(([k]) => k);
 };
@@ -1414,7 +1497,7 @@ function checkMotionScene(scene) {
     if (!shot.at) return;
     const timing = timeline.shots[i];
     if (timing.cue === void 0) {
-      const what = shot.at.beat !== void 0 ? `beat ${shot.at.beat}, but the scene has no beat grid; set one with set_animation_settings ({ "beat": { "bpm": \u2026 } })` : `word ${shot.at.word}, but the narration has ${_nullishCoalesce(_optionalChain([scene, 'access', _37 => _37.narration, 'optionalAccess', _38 => _38.words, 'access', _39 => _39.length]), () => ( 0))} words (indexes from 0)`;
+      const what = shot.at.beat !== void 0 ? `beat ${shot.at.beat}, but the scene has no beat grid; set one with set_animation_settings ({ "beat": { "bpm": \u2026 } })` : `word ${shot.at.word}, but the narration has ${_nullishCoalesce(_optionalChain([scene, 'access', _41 => _41.narration, 'optionalAccess', _42 => _42.words, 'access', _43 => _43.length]), () => ( 0))} words (indexes from 0)`;
       issues.push(motionIssue("unknown-cue", `Shot "${shot.id}" is cued to ${what}.`, { shot: shot.id }));
     } else if (timing.missedBy !== void 0) {
       const late = Math.round(timing.missedBy);
@@ -1447,7 +1530,7 @@ function checkMotionScene(scene) {
     const cam = frame.camera;
     const docIndex = indexMotionNodes(frame.document.nodes);
     for (const id of command2.targets) {
-      const b = _optionalChain([docIndex, 'access', _40 => _40.get, 'call', _41 => _41(id), 'optionalAccess', _42 => _42.bounds]);
+      const b = _optionalChain([docIndex, 'access', _44 => _44.get, 'call', _45 => _45(id), 'optionalAccess', _46 => _46.bounds]);
       if (!b || reported.has(id) || !visibleAt(timeline, id, timing.end, nodes.get(id).node)) continue;
       const outside = b.x + b.width < cam.x || b.y + b.height < cam.y || b.x > cam.x + cam.width || b.y > cam.y + cam.height;
       if (outside) {
@@ -1481,6 +1564,7 @@ var MOTION_EDIT_OPS = [
   "add_commands",
   "update_command",
   "delete_commands",
+  "move_command",
   "set_artwork",
   "set_controls",
   "replace_scene"
@@ -1605,6 +1689,16 @@ function applyOne(scene, edit) {
       const drop = new Set(edit.commands);
       return replaceShot(scene, i, { ...scene.shots[i], run: run.filter((_, k) => !drop.has(k)) });
     }
+    case "move_command": {
+      const i = shotIndex(scene, edit.shot);
+      const run = [...scene.shots[i].run];
+      if (!Number.isInteger(edit.command) || edit.command < 0 || edit.command >= run.length)
+        fail(`Shot "${edit.shot}" has ${run.length} command${run.length === 1 ? "" : "s"}; "command" must be an index from 0 to ${run.length - 1} (got ${edit.command}).`);
+      const to = position(edit.to, run.length - 1, '"to"');
+      const [moved] = run.splice(edit.command, 1);
+      run.splice(to, 0, moved);
+      return replaceShot(scene, i, { ...scene.shots[i], run });
+    }
     case "set_artwork":
       return { ...scene, artwork: edit.artwork };
     case "set_controls": {
@@ -1637,9 +1731,9 @@ function applyMotionEdits(scene, edits) {
   let next = scene;
   for (let i = 0; i < list.length; i++) {
     const edit = list[i];
-    const prefix = list.length > 1 ? `op ${i + 1} (${_optionalChain([edit, 'optionalAccess', _43 => _43.op])}): ` : "";
+    const prefix = list.length > 1 ? `op ${i + 1} (${_optionalChain([edit, 'optionalAccess', _47 => _47.op])}): ` : "";
     if (!edit || !MOTION_EDIT_OPS.includes(edit.op))
-      return { ok: false, error: `${prefix}Unknown op ${namedWithSuggestion(String(_optionalChain([edit, 'optionalAccess', _44 => _44.op])), MOTION_EDIT_OPS)}. Nothing was changed.` };
+      return { ok: false, error: `${prefix}Unknown op ${namedWithSuggestion(String(_optionalChain([edit, 'optionalAccess', _48 => _48.op])), MOTION_EDIT_OPS)}. Nothing was changed.` };
     try {
       next = applyOne(next, edit);
     } catch (error) {
@@ -1799,7 +1893,7 @@ function toFlairSvgMotion(scene, options = {}) {
         const wrapper = freshId(`${id}--follow`);
         const centre = freshId(`${id}--follow-centre`);
         const c = entry.center;
-        const at = _optionalChain([motionNodeOffset, 'call', _45 => _45(entry, timeline, 0, nodes), 'optionalAccess', _46 => _46.follow]);
+        const at = _optionalChain([motionNodeOffset, 'call', _49 => _49(entry, timeline, 0, nodes), 'optionalAccess', _50 => _50.follow]);
         const placed = at ? `translate(${f(at.x)} ${f(at.y)})${at.angle ? ` rotate(${f(at.angle)})` : ""}` : void 0;
         (wrap[id] ??= []).push({ id: wrapper, ...placed ? { transform: placed } : {} }, { id: centre, transform: `translate(${f(-c.x)} ${f(-c.y)})` });
         follows.push({ id, wrapper, routes: ids, segments: followSegments.filter((seg) => seg.path && ids.has(seg.path)) });
@@ -1859,7 +1953,7 @@ function toFlairSvgMotion(scene, options = {}) {
           exact: () => false,
           value: (t) => {
             const frame = motionFrameAt(scene, t, { draw: false, offsets: false });
-            const now = _chunkYJLCBA7Vcjs.expandVectorAppearance.call(void 0, _optionalChain([indexMotionNodes, 'call', _47 => _47(frame.document.nodes), 'access', _48 => _48.get, 'call', _49 => _49(id), 'optionalAccess', _50 => _50.node]));
+            const now = _chunkYJLCBA7Vcjs.expandVectorAppearance.call(void 0, _optionalChain([indexMotionNodes, 'call', _51 => _51(frame.document.nodes), 'access', _52 => _52.get, 'call', _53 => _53(id), 'optionalAccess', _54 => _54.node]));
             if (!now || now.type !== "path") return "";
             const bezier = _chunkO2UH7LZEcjs.transformBezierPath.call(void 0, _chunkYJLCBA7Vcjs.vectorPathWorldBezier.call(void 0, now, _chunkYJLCBA7Vcjs.IDENTITY_MATRIX, { effects: false }), inverse);
             return _chunkO2UH7LZEcjs.bezierPathToSvg.call(void 0, bezier, { precision: Math.min(precision, 2) });
@@ -1880,8 +1974,8 @@ function toFlairSvgMotion(scene, options = {}) {
       ...delay > 0 ? { delay: round2(delay) } : {},
       ms: round2(ms),
       ease: written,
-      ..._optionalChain([segment, 'optionalAccess', _51 => _51.behavior]) ? { behavior: segment.behavior } : {},
-      ..._optionalChain([segment, 'optionalAccess', _52 => _52.steps]) ? { strobe: segment.steps } : {}
+      ..._optionalChain([segment, 'optionalAccess', _55 => _55.behavior]) ? { behavior: segment.behavior } : {},
+      ..._optionalChain([segment, 'optionalAccess', _56 => _56.steps]) ? { strobe: segment.steps } : {}
     };
     if (channel.kind === "view") animate.push({ ...base, view: to });
     else if (channel.kind === "draw") animate.push({ ...base, draw: [from, to] });
@@ -1954,7 +2048,7 @@ function toFlairSvgMotion(scene, options = {}) {
   if (routes.length) svg = svg.replace(/^(<svg[^>]*>)/, `$1<defs>${routes.join("")}</defs>`);
   const lastChange = animate.reduce((m, a) => Math.max(m, (_nullishCoalesce(a.delay, () => ( 0))) + (_nullishCoalesce(a.ms, () => ( 0)))), 0);
   let motion = { svg, animate };
-  if (_optionalChain([scene, 'access', _53 => _53.controls, 'optionalAccess', _54 => _54.length])) {
+  if (_optionalChain([scene, 'access', _57 => _57.controls, 'optionalAccess', _58 => _58.length])) {
     const declarations = scene.controls.map((c) => `{{${c.name}: color default=${c.default.toUpperCase()}${c.label ? ` label='${c.label.replace(/'/g, "\u2019")}'` : ""}}}`).join(" ");
     const swap = (text) => scene.controls.reduce((s, c) => s.replace(new RegExp(`${c.default}(?![0-9a-fA-F])`, "gi"), `{{${c.name}}}`), text);
     svg = svg.replace(/^(<svg[^>]*>)/, `$1<!-- ${declarations} -->`);
@@ -1976,7 +2070,7 @@ function toFlairVectorEffect(scene, options = {}) {
     tags: _nullishCoalesce(options.tags, () => ( [])),
     motion: out.motion,
     hold: out.hold,
-    ..._optionalChain([scene, 'access', _55 => _55.presets, 'optionalAccess', _56 => _56.length]) ? { presets: scene.presets } : {},
+    ..._optionalChain([scene, 'access', _59 => _59.presets, 'optionalAccess', _60 => _60.length]) ? { presets: scene.presets } : {},
     ...options.trigger ? { trigger: options.trigger } : {}
   };
 }
@@ -2019,7 +2113,7 @@ function resolvePlaceholders(motion, notes) {
   const filled = text.replace(PLACEHOLDER, (_, name) => {
     const d = declared.get(name);
     if (!d) unknown.add(name);
-    return (_nullishCoalesce(_optionalChain([d, 'optionalAccess', _57 => _57.value]), () => ( ""))).replace(/"/g, '\\"');
+    return (_nullishCoalesce(_optionalChain([d, 'optionalAccess', _61 => _61.value]), () => ( ""))).replace(/"/g, '\\"');
   });
   for (const name of unknown) notes.push(`Placeholder "{{${name}}}" has no declaration, so it was left empty.`);
   return { motion: JSON.parse(filled), controls };
@@ -2073,7 +2167,7 @@ function commandsFor(anim, nodes, entered, notes) {
   if (anim.along) {
     const path = nodes.get(anim.along);
     if (!path || path.node.type !== "path") notes.push(`${where} follows "${anim.along}", which is not a path in the artwork; the follow was skipped.`);
-    else out.push({ type: "follow", targets, path: anim.along, from: _nullishCoalesce(_optionalChain([anim, 'access', _58 => _58.at, 'optionalAccess', _59 => _59[0]]), () => ( 0)), to: _nullishCoalesce(_optionalChain([anim, 'access', _60 => _60.at, 'optionalAccess', _61 => _61[1]]), () => ( 1)), ...anim.orient ? { rotate: true } : {}, ...timing, ...ease(MOTION_EASE_IN_OUT) });
+    else out.push({ type: "follow", targets, path: anim.along, from: _nullishCoalesce(_optionalChain([anim, 'access', _62 => _62.at, 'optionalAccess', _63 => _63[0]]), () => ( 0)), to: _nullishCoalesce(_optionalChain([anim, 'access', _64 => _64.at, 'optionalAccess', _65 => _65[1]]), () => ( 1)), ...anim.orient ? { rotate: true } : {}, ...timing, ...ease(MOTION_EASE_IN_OUT) });
   }
   for (const [attr, [a, b]] of Object.entries(_nullishCoalesce(anim.attrs, () => ( {})))) {
     if (attr === "opacity") {
@@ -2084,7 +2178,7 @@ function commandsFor(anim, nodes, entered, notes) {
         out.push({ type: "enter", targets, style: "fade", ...timing, ...ease(MOTION_EASE_OUT) });
       } else out.push({ type: "fade", targets, to: Math.min(1, Math.max(0, to)), ...timing, ...ease(MOTION_EASE_IN_OUT) });
     } else if (attr === "fill" || attr === "stroke") {
-      if (_optionalChain([behavior, 'optionalAccess', _62 => _62.type]) === "pulse") out.push({ type: "color-pulse", targets, color: String(b), paint: attr, count: _nullishCoalesce(behavior.count, () => ( 1)), ...timing, ...ease("linear") });
+      if (_optionalChain([behavior, 'optionalAccess', _66 => _66.type]) === "pulse") out.push({ type: "color-pulse", targets, color: String(b), paint: attr, count: _nullishCoalesce(behavior.count, () => ( 1)), ...timing, ...ease("linear") });
       else {
         if (behavior) notes.push(`${where}: a ${attr} ${behavior.type} became a plain colour change.`);
         out.push({ type: "style", targets, [attr]: String(b), ...timing, ...ease(MOTION_EASE_IN_OUT) });
@@ -2173,11 +2267,17 @@ function fromFlairSvgMotion(input, options = {}) {
 ${problems.join("\n")}`);
   return { scene, notes: [...new Set(notes)], issues: checkMotionScene(scene) };
 }
+function presetColor(value) {
+  if (typeof value === "string") return /^#[0-9a-f]{6}$/i.test(value) ? value.toLowerCase() : value;
+  if (Array.isArray(value) && value.length >= 3 && value.slice(0, 3).every((n) => typeof n === "number" && Number.isFinite(n)))
+    return `#${value.slice(0, 3).map((n) => Math.round(Math.min(1, Math.max(0, n)) * 255).toString(16).padStart(2, "0")).join("")}`;
+  return void 0;
+}
 function fromFlairVectorEffect(effect, options = {}) {
   if (!effect || effect.kind !== "vector" || !effect.motion) throw new Error('Give a Flair vector effect: { kind: "vector", id, name, motion: { svg, animate } }.');
   const result = fromFlairSvgMotion(effect.motion, { name: _nullishCoalesce(_nullishCoalesce(options.name, () => ( effect.id)), () => ( effect.name)), hold: _nullishCoalesce(options.hold, () => ( effect.hold)) });
   const names = new Set((_nullishCoalesce(result.scene.controls, () => ( []))).map((c) => c.name));
-  const presets = (_nullishCoalesce(effect.presets, () => ( []))).map((p) => ({ name: p.name, values: Object.fromEntries(Object.entries(p.values).filter(([k]) => names.has(k))) })).filter((p) => Object.keys(p.values).length);
+  const presets = (_nullishCoalesce(effect.presets, () => ( []))).map((p) => ({ name: p.name, values: Object.fromEntries(Object.entries(p.values).flatMap(([k, v]) => names.has(k) && presetColor(v) ? [[k, presetColor(v)]] : [])) })).filter((p) => Object.keys(p.values).length);
   const scene = { ...result.scene, ...effect.description ? { description: effect.description } : {}, ...presets.length ? { presets } : {} };
   const notes = [...result.notes];
   if (effect.trigger) notes.push(`The effect plays on ${effect.trigger}; scenes play through, so the trigger is not kept (pass it back to toFlairVectorEffect).`);
@@ -2360,7 +2460,7 @@ function toLottie(scene, options = {}) {
     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 _chunkYJLCBA7Vcjs.vectorPathWorldBezier.call(void 0, path);
-      const now = _optionalChain([indexMotionNodes, 'call', _63 => _63(motionFrameAt(scene, t, { draw: false, offsets: false }).document.nodes), 'access', _64 => _64.get, 'call', _65 => _65(path.id), 'optionalAccess', _66 => _66.node]);
+      const now = _optionalChain([indexMotionNodes, 'call', _67 => _67(motionFrameAt(scene, t, { draw: false, offsets: false }).document.nodes), 'access', _68 => _68.get, 'call', _69 => _69(path.id), 'optionalAccess', _70 => _70.node]);
       return now && now.type === "path" ? _chunkYJLCBA7Vcjs.vectorPathWorldBezier.call(void 0, _chunkYJLCBA7Vcjs.expandVectorAppearances.call(void 0, [now])[0]) : _chunkYJLCBA7Vcjs.vectorPathWorldBezier.call(void 0, path);
     };
     const rest = lottieContours(_chunkO2UH7LZEcjs.toBezierPath.call(void 0, geometryAt(0)), round2);
@@ -2406,7 +2506,7 @@ function toLottie(scene, options = {}) {
         lj: path.strokeLinejoin === "round" ? 2 : path.strokeLinejoin === "bevel" ? 3 : 1,
         ml: 4
       });
-      if (_optionalChain([path, 'access', _67 => _67.strokeDasharray, 'optionalAccess', _68 => _68.length])) notes.push(`"${path.id}": its dashes are not exported; the stroke is solid.`);
+      if (_optionalChain([path, 'access', _71 => _71.strokeDasharray, 'optionalAccess', _72 => _72.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);
@@ -2556,7 +2656,7 @@ var AnimationEditorController = (_class = class {
       time: p.time,
       playing: p.playing,
       loop: p.loop,
-      currentShot: _nullishCoalesce(_optionalChain([motionShotAt, 'call', _69 => _69(timeline, p.time), 'optionalAccess', _70 => _70.id]), () => ( null)),
+      currentShot: _nullishCoalesce(_optionalChain([motionShotAt, 'call', _73 => _73(timeline, p.time), 'optionalAccess', _74 => _74.id]), () => ( null)),
       selection: this.selection,
       readOnly: this.readOnly,
       error: this.error,
@@ -2595,7 +2695,7 @@ var AnimationEditorController = (_class = class {
       this.applying = false;
     }
     this.notify();
-    _optionalChain([this, 'access', _71 => _71.onChange, 'optionalCall', _72 => _72(scene)]);
+    _optionalChain([this, 'access', _75 => _75.onChange, 'optionalCall', _76 => _76(scene)]);
   }
   commit(label, next) {
     const before = this.scene;
@@ -2701,7 +2801,7 @@ var AnimationEditorController = (_class = 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 = {}) {
@@ -2914,6 +3014,7 @@ var EDIT_OP = {
     object({ op: { const: "move_shot", description: "Like move_shot." }, shot: SHOT_ID, to: { type: "integer", minimum: 0, description: "New position (0 = first)." } }, ["op", "shot", "to"]),
     object({ op: { const: "add_commands", description: "Like add_commands." }, shot: SHOT_ID, commands: { type: "array", items: MOTION_COMMAND_SCHEMA, minItems: 1, description: "Commands to add." }, at: { type: "integer", minimum: 0, description: "Index in the shot's run (default: the end)." } }, ["op", "shot", "commands"]),
     object({ op: { const: "update_command", description: "Like update_command." }, shot: SHOT_ID, command: { type: "integer", minimum: 0, description: "Index in the shot's run." }, set: { type: "object", description: "Command fields to replace." }, remove: { type: "array", items: { type: "string" }, description: "Command fields to clear." } }, ["op", "shot", "command"]),
+    object({ op: { const: "move_command", description: "Like move_command." }, shot: SHOT_ID, command: { type: "integer", minimum: 0, description: "Index in the shot's run." }, to: { type: "integer", minimum: 0, description: "New index in the run (0 = first)." } }, ["op", "shot", "command", "to"]),
     object({ op: { const: "delete_commands", description: "Like delete_commands." }, shot: SHOT_ID, commands: { type: "array", items: { type: "integer", minimum: 0 }, minItems: 1, description: "Indexes in the shot's run." } }, ["op", "shot", "commands"]),
     object({ op: { const: "set_controls", description: "Like set_controls." }, controls: { type: "array", items: CONTROL, description: "Controls (empty clears)." }, presets: { type: "array", items: PRESET, description: "Presets (empty clears)." } }, ["op", "controls"])
   ]
@@ -3061,10 +3162,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 = _nullishCoalesce(time, () => ( controller.getState().time));
       if (shot !== void 0) {
@@ -3072,7 +3183,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 });
@@ -3097,9 +3212,9 @@ function createAnimationEditorToolProvider(controller, options = {}) {
     handler: ({ from = 0, to, limit = 200 }) => {
       const s = scene();
       const timeline = compileMotionScene(s);
-      const words = _nullishCoalesce(_optionalChain([s, 'access', _73 => _73.narration, 'optionalAccess', _74 => _74.words]), () => ( []));
+      const words = _nullishCoalesce(_optionalChain([s, 'access', _77 => _77.narration, 'optionalAccess', _78 => _78.words]), () => ( []));
       const end = _nullishCoalesce(to, () => ( Math.max(timeline.duration, words.length ? _nullishCoalesce(words[words.length - 1].end, () => ( words[words.length - 1].start)) : 0)));
-      const shotAt = (ms) => _optionalChain([timeline, 'access', _75 => _75.shots, 'access', _76 => _76.find, 'call', _77 => _77((x) => ms >= x.start && ms < x.end), 'optionalAccess', _78 => _78.id]);
+      const shotAt = (ms) => _optionalChain([timeline, 'access', _79 => _79.shots, 'access', _80 => _80.find, 'call', _81 => _81((x) => ms >= x.start && ms < x.end), 'optionalAccess', _82 => _82.id]);
       const beats = [];
       if (s.beat && s.beat.bpm > 0) {
         const first = Math.max(0, Math.ceil(motionBeatAt(s.beat, from).beat - 1e-9));
@@ -3120,6 +3235,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",
@@ -3269,7 +3402,7 @@ function createAnimationEditorToolProvider(controller, options = {}) {
     inputSchema: object({ shot: SHOT_ID, commands: { type: "array", items: MOTION_COMMAND_SCHEMA, minItems: 1, description: "Commands to add." }, at: { type: "integer", minimum: 0, description: "Index in the run (default: the end)." } }, ["shot", "commands"]),
     annotations: { title: "Add commands to a shot", ...WRITE },
     handler: ({ shot, commands, at }) => {
-      const before = _nullishCoalesce(_optionalChain([scene, 'call', _79 => _79(), 'access', _80 => _80.shots, 'access', _81 => _81.find, 'call', _82 => _82((s) => s.id === shot), 'optionalAccess', _83 => _83.run, 'access', _84 => _84.length]), () => ( 0));
+      const before = _nullishCoalesce(_optionalChain([scene, 'call', _83 => _83(), 'access', _84 => _84.shots, 'access', _85 => _85.find, 'call', _86 => _86((s) => s.id === shot), 'optionalAccess', _87 => _87.run, 'access', _88 => _88.length]), () => ( 0));
       const first = _nullishCoalesce(at, () => ( before));
       return apply({ op: "add_commands", shot, commands, at }, "Add commands", (s) => {
         const shots = describeMotionShots(s);
@@ -3302,6 +3435,21 @@ function createAnimationEditorToolProvider(controller, options = {}) {
     annotations: { title: "Delete commands", ...DESTRUCTIVE },
     handler: ({ shot, commands }) => apply({ op: "delete_commands", shot, commands }, "Delete commands")
   };
+  const moveCommand = {
+    name: "move_command",
+    title: "Reorder a command",
+    description: `Moves one command to a new index in its shot's run (0 = first), as one undo step; the others close up around it. A command with "with": "previous" then starts with its new neighbour. Returns the command's new index, its old one and the shot's timing.`,
+    inputSchema: object(
+      {
+        shot: SHOT_ID,
+        command: { type: "integer", minimum: 0, description: "Index of the command in the shot's run (from get_animation)." },
+        to: { type: "integer", minimum: 0, description: "Its new index, 0 = first (at most the last index)." }
+      },
+      ["shot", "command", "to"]
+    ),
+    annotations: { title: "Reorder a command", ...WRITE },
+    handler: ({ shot, command: command2, to }) => apply({ op: "move_command", shot, command: command2, to }, "Move command", (s) => ({ shot, command: to, from: command2, commands: describeMotionShots(s).find((x) => x.id === shot).commands.map((c) => ({ index: c.index, type: c.type, start: c.start, end: c.end })) }))
+  };
   const setSettings = {
     name: "set_animation_settings",
     title: "Change animation settings",
@@ -3383,8 +3531,8 @@ function createAnimationEditorToolProvider(controller, options = {}) {
       return { redone, ...redone ? { label } : {} };
     }
   };
-  const reads = [getAnimation, getShot, findElements, 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];
+  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, moveCommand, setSettings, setControls, editAnimation, writeAnimation, undo, redo];
   return {
     id: _nullishCoalesce(options.id, () => ( "animation")),
     namespace: options.namespace,
@@ -3429,12 +3577,314 @@ 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.
+2. Plan a few shots, each one idea. Add them with insert_shots (add_commands, update_command, move_command and delete_commands refine a shot), 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; 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.`;
 
+// src/animation-editor/form.ts
+var TIMING = /* @__PURE__ */ new Set(["duration", "delay", "stagger", "with", "ease", "repeat", "repeatMode", "steps", "note"]);
+var COLORS = /* @__PURE__ */ new Set(["fill", "stroke", "color"]);
+var NODES = /* @__PURE__ */ new Set(["into", "path"]);
+function branch(type) {
+  return (_nullishCoalesce(MOTION_COMMAND_SCHEMA.oneOf, () => ( []))).find((b) => _optionalChain([b, 'access', _89 => _89.properties, 'optionalAccess', _90 => _90.type, 'optionalAccess', _91 => _91.const]) === type);
+}
+function unitOf(type, name) {
+  if (name === "duration" || name === "delay" || name === "stagger") return "ms";
+  if (name === "steps") return "fps";
+  if (name === "frequency") return "Hz";
+  if (name === "repeat" || name === "count") return "\xD7";
+  if (name === "distance" || name === "strokeWidth") return "units";
+  if (name === "angle") return "\xB0";
+  if (name === "amount") return type === "pulse" ? "\xD7" : "units";
+  if (name === "rotate" && type === "wiggle") return "\xB0";
+  if ((name === "by" || name === "to") && type === "rotate") return "\xB0";
+  if (name === "scale" || name === "to" && type === "scale") return "\xD7";
+  if ((name === "from" || name === "to") && (type === "draw" || type === "fade" || type === "follow")) return "0\u20131";
+  return void 0;
+}
+function motionFieldLabel(name) {
+  const words = name.replace(/([a-z])([A-Z])/g, "$1 $2").toLowerCase();
+  return words.charAt(0).toUpperCase() + words.slice(1);
+}
+function kindOf(name, schema) {
+  if (name === "targets") return "targets";
+  if (name === "ease") return "ease";
+  if (schema.enum) return "enum";
+  if (schema.anyOf) return "scale";
+  if (schema.type === "object") return "point";
+  if (schema.type === "boolean") return "boolean";
+  if (schema.type === "integer") return "integer";
+  if (schema.type === "number") return "number";
+  if (COLORS.has(name)) return "color";
+  if (NODES.has(name)) return "node";
+  return "text";
+}
+function motionCommandFields(type) {
+  const schema = branch(type);
+  if (!_optionalChain([schema, 'optionalAccess', _92 => _92.properties])) return [];
+  const required = new Set(_nullishCoalesce(schema.required, () => ( [])));
+  const fields = Object.entries(schema.properties).filter(([name]) => name !== "type").map(([name, s]) => {
+    const kind = kindOf(name, s);
+    const min = typeof s.minimum === "number" ? s.minimum : typeof s.exclusiveMinimum === "number" ? s.exclusiveMinimum : void 0;
+    return {
+      name,
+      kind,
+      label: motionFieldLabel(name),
+      description: _nullishCoalesce(s.description, () => ( "")),
+      required: required.has(name),
+      ...s.enum ? { options: s.enum.map(String) } : {},
+      ...min !== void 0 ? { min } : {},
+      ...typeof s.maximum === "number" ? { max: s.maximum } : {},
+      ...unitOf(type, name) ? { unit: unitOf(type, name) } : {},
+      group: TIMING.has(name) ? "timing" : "main"
+    };
+  });
+  return [...fields.filter((f) => f.group === "main"), ...fields.filter((f) => f.group === "timing")];
+}
+function parseMotionFieldInput(field, raw) {
+  if (field.kind === "boolean") return raw === true ? { set: true } : { remove: true };
+  if (field.kind === "targets") {
+    const ids = (Array.isArray(raw) ? raw : String(raw).split(",")).map((s) => String(s).trim()).filter(Boolean);
+    return ids.length ? { set: ids } : { error: "Pick at least one target." };
+  }
+  if (field.kind === "point" || field.kind === "scale" && typeof raw === "object" && !Array.isArray(raw)) {
+    const p = raw;
+    if (p.x.trim() === "" && p.y.trim() === "") return field.required ? { error: `${field.label} is required.` } : { remove: true };
+    const x = Number(p.x);
+    const y = Number(p.y);
+    if (!Number.isFinite(x) || !Number.isFinite(y)) return { error: `${field.label} needs a number for x and for y.` };
+    return { set: { x, y } };
+  }
+  const text = String(raw).trim();
+  if (text === "") return field.required ? { error: `${field.label} is required.` } : { remove: true };
+  if (field.kind === "number" || field.kind === "integer" || field.kind === "scale") {
+    const n = Number(text);
+    if (!Number.isFinite(n)) return { error: `${field.label} must be a number${field.unit ? ` (${field.unit})` : ""}.` };
+    if (field.kind === "integer" && !Number.isInteger(n)) return { error: `${field.label} must be a whole number.` };
+    if (field.min !== void 0 && n < field.min) return { error: `${field.label} must be at least ${field.min}.` };
+    if (field.max !== void 0 && n > field.max) return { error: `${field.label} must be at most ${field.max}.` };
+    return { set: n };
+  }
+  if (field.kind === "enum" && field.options && !field.options.includes(text)) return { error: `${field.label} must be one of ${field.options.join(", ")}.` };
+  return { set: text };
+}
+function motionFieldEdit(shot, command2, field, raw) {
+  const input = parseMotionFieldInput(field, raw);
+  if ("error" in input) return input;
+  if ("remove" in input) return { op: "update_command", shot, command: command2, remove: [field.name] };
+  return { op: "update_command", shot, command: command2, set: { [field.name]: input.set } };
+}
+function defaultMotionCommand(type, targets, scene) {
+  if (type === "wait") return { type: "wait", duration: 500 };
+  if (!targets.length) return { error: "Pick a target first: click an element on the stage." };
+  const nodes = [...indexMotionNodes(scene.artwork.nodes).values()];
+  const other = (pred) => _optionalChain([nodes, 'access', _93 => _93.find, 'call', _94 => _94((e) => !targets.includes(e.node.id) && pred(e)), 'optionalAccess', _95 => _95.node, 'access', _96 => _96.id]);
+  const base = { targets: [...targets] };
+  switch (type) {
+    case "scale":
+      return { type, ...base, to: 1.2 };
+    case "fade":
+      return { type, ...base, to: 0.5 };
+    case "move":
+      return { type, ...base, by: { x: 40, y: 0 } };
+    case "rotate":
+      return { type, ...base, by: 90 };
+    case "style":
+      return { type, ...base, fill: "#f59e0b" };
+    case "morph": {
+      const into = _nullishCoalesce(other((e) => e.node.type === "path" && e.node.visible === false), () => ( other((e) => e.node.type === "path")));
+      return into ? { type, ...base, into } : { error: "Morph needs another shape to become; draw one (it can stay hidden)." };
+    }
+    case "match": {
+      const into = _nullishCoalesce(other((e) => e.node.type === "group" && e.node.visible === false), () => ( other((e) => e.node.type === "group")));
+      return into ? { type, ...base, into } : { error: "Match needs another group to become; group the end state (it can stay hidden)." };
+    }
+    case "follow": {
+      const path = _nullishCoalesce(other((e) => e.node.type === "path" && e.node.visible === false), () => ( other((e) => e.node.type === "path")));
+      return path ? { type, ...base, path } : { error: "Follow needs a path to travel along; draw one (it can stay hidden)." };
+    }
+    case "effect": {
+      for (const id of targets) {
+        const node = _optionalChain([nodes, 'access', _97 => _97.find, 'call', _98 => _98((e) => e.node.id === id), 'optionalAccess', _99 => _99.node]);
+        for (const effect of _nullishCoalesce(_optionalChain([node, 'optionalAccess', _100 => _100.effects]), () => ( []))) {
+          const param = Object.entries(effect.params).find(([, v]) => typeof v === "number");
+          if (param) return { type, ...base, effect: effect.id, param: param[0], to: param[1] + 1 };
+        }
+      }
+      return { error: "Effect needs a target with a live path effect (wiggle, twist, zig zag\u2026)." };
+    }
+    default:
+      return { type, ...base };
+  }
+}
+function motionCommandSummary(command2) {
+  const c = command2;
+  const what = [command2.type, typeof c.style === "string" ? c.style : ""].filter(Boolean).join(" ");
+  if (command2.type === "wait") return `wait ${command2.duration} ms`;
+  const extra = typeof c.into === "string" ? ` \u2192 ${c.into}` : typeof c.path === "string" ? ` along ${c.path}` : "";
+  return `${what} \xB7 ${(_nullishCoalesce(command2.targets, () => ( []))).join(", ")}${extra}`;
+}
+function motionCommandRows(scene, shotId) {
+  const index = scene.shots.findIndex((s) => s.id === shotId);
+  if (index < 0) return [];
+  const timeline = compileMotionScene(scene);
+  return scene.shots[index].run.map((command2, i) => {
+    const t = timeline.commands.find((c) => c.shotIndex === index && c.command === i);
+    const primitive = motionFlairPrimitive(command2);
+    return { index: i, command: command2, summary: motionCommandSummary(command2), start: _nullishCoalesce(_optionalChain([t, 'optionalAccess', _101 => _101.start]), () => ( 0)), end: _nullishCoalesce(_optionalChain([t, 'optionalAccess', _102 => _102.end]), () => ( 0)), ...primitive ? { flairPrimitive: primitive } : {} };
+  });
+}
+function duplicateMotionCommandEdit(scene, shot, command2) {
+  const run = _nullishCoalesce(_optionalChain([scene, 'access', _103 => _103.shots, 'access', _104 => _104.find, 'call', _105 => _105((s) => s.id === shot), 'optionalAccess', _106 => _106.run]), () => ( []));
+  return { op: "add_commands", shot, commands: run[command2] ? [structuredClone(run[command2])] : [], at: command2 + 1 };
+}
+var MOTION_EASE_CHOICES = [
+  { value: "", label: "Default" },
+  ..._chunk2FHLHZALcjs.ANIMATION_EASING_PRESETS.map((p) => ({ value: p, label: _chunk2FHLHZALcjs.ANIMATION_EASING_LABELS[p] }))
+];
+function motionEaseKey(ease) {
+  if (ease === void 0 || ease === null) return "";
+  return typeof ease === "string" ? ease : "custom";
+}
+function motionEasingCurve(ease, samples = 48, durationMs = 1e3) {
+  const resolved = _chunk2FHLHZALcjs.resolveEasing.call(void 0, ease);
+  const ms = resolved !== "hold" && resolved.type === "spring" ? _chunk2FHLHZALcjs.springSettleMs.call(void 0, resolved) : durationMs;
+  const n = Math.max(2, Math.floor(samples));
+  const points = [];
+  for (let i = 0; i <= n; i++) {
+    const u = i / n;
+    points.push({ u, v: resolved === "hold" ? i === n ? 1 : 0 : _chunk2FHLHZALcjs.evaluateEasing.call(void 0, ease, u, ms) });
+  }
+  const values = points.map((p) => p.v);
+  return { points, min: Math.min(0, ...values), max: Math.max(1, ...values), durationMs: ms };
+}
+function motionEasingPath(curve, width, height, pad = 4) {
+  const span = curve.max - curve.min || 1;
+  const f = (n) => String(Math.round(n * 100) / 100);
+  return curve.points.map((p, i) => `${i ? "L" : "M"}${f(pad + p.u * (width - 2 * pad))} ${f(pad + (1 - (p.v - curve.min) / span) * (height - 2 * pad))}`).join(" ");
+}
+function motionEasingGuides(curve, height, pad = 4) {
+  const span = curve.max - curve.min || 1;
+  const y = (v) => pad + (1 - (v - curve.min) / span) * (height - 2 * pad);
+  return { zero: y(0), one: y(1) };
+}
+function motionNodeAtElement(scene, target, root) {
+  const ids = indexMotionNodes(scene.artwork.nodes);
+  for (let el = target; el && el !== root; el = el.parentElement) {
+    const id = el.getAttribute("id");
+    if (id && ids.has(id)) return id;
+  }
+  return null;
+}
+var escapeRegExp = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+function highlightMotionSvg(svg, ids, color = "#f43f5e") {
+  if (!ids.length) return svg;
+  let out = svg;
+  for (const id of ids) {
+    const escaped = id.replace(/&/g, "&amp;").replace(/"/g, "&quot;");
+    out = out.replace(new RegExp(` id="${escapeRegExp(escaped)}"`), ` id="${escaped}" data-picked=""`);
+  }
+  return out.replace(/(<svg\b[^>]*>)/, `$1<style>[data-picked]{filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 3px ${color}) drop-shadow(0 0 3px ${color})}</style>`);
+}
+function motionRulerTicks(duration, width, minGap = 56) {
+  const span = Math.max(1, duration);
+  const steps = [100, 250, 500, 1e3, 2e3, 5e3, 1e4, 3e4, 6e4];
+  const step = _nullishCoalesce(steps.find((s) => s / span * Math.max(1, width) >= minGap), () => ( steps[steps.length - 1]));
+  const ticks = [];
+  for (let t = 0; t <= span + 1e-6; t += step / 2) {
+    const major = Math.round(t / (step / 2)) % 2 === 0;
+    ticks.push({ time: t, major, label: major ? `${step < 1e3 ? (t / 1e3).toFixed(step < 500 ? 2 : 1) : String(Math.round(t / 1e3))}s` : "" });
+  }
+  return ticks;
+}
+function fitMotionSceneEdits(scene, ms, options = {}) {
+  const fit = fitMotionScene(scene, ms, options);
+  return fit.scene.shots.flatMap((shot, i) => {
+    const before = scene.shots[i].speed;
+    if (before === shot.speed) return [];
+    return shot.speed === void 0 ? [{ op: "update_shot", shot: shot.id, remove: ["speed"] }] : [{ op: "update_shot", shot: shot.id, set: { speed: shot.speed } }];
+  });
+}
+function motionCueKey(cue) {
+  if (!cue) return "";
+  if (typeof cue.beat === "number") return `beat:${cue.beat}`;
+  if (typeof cue.word === "number") return `word:${cue.word}`;
+  if (typeof cue.ms === "number") return `ms:${cue.ms}`;
+  return "";
+}
+function motionCueFromKey(key) {
+  const m = /^(beat|word|ms):(-?\d+(?:\.\d+)?)$/.exec(key);
+  if (!m) return void 0;
+  return { [m[1]]: Number(m[2]) };
+}
+function motionCueChoices(scene, limit = 256) {
+  const choices = [];
+  const s = (ms) => `${(ms / 1e3).toFixed(2)} s`;
+  const end = Math.max(compileMotionScene(scene).duration, ..._nullishCoalesce(_optionalChain([scene, 'access', _107 => _107.narration, 'optionalAccess', _108 => _108.words, 'access', _109 => _109.map, 'call', _110 => _110((w) => _nullishCoalesce(w.end, () => ( w.start)))]), () => ( [0]))) + 2e3;
+  if (scene.beat && scene.beat.bpm > 0) {
+    for (let beat = 0; choices.length < limit; beat++) {
+      const time = motionBeatTime(scene.beat, beat);
+      if (time > end) break;
+      if (time < 0) continue;
+      const at = motionBeatAt(scene.beat, time);
+      choices.push({ value: `beat:${beat}`, label: `Beat ${beat} (bar ${at.bar}.${at.beatInBar}) \xB7 ${s(time)}`, time });
+    }
+  }
+  _optionalChain([scene, 'access', _111 => _111.narration, 'optionalAccess', _112 => _112.words, 'access', _113 => _113.forEach, 'call', _114 => _114((w, i) => {
+    if (choices.length < limit * 2) choices.push({ value: `word:${i}`, label: `Word ${i} \u201C${w.text}\u201D \xB7 ${s(w.start)}`, time: w.start });
+  })]);
+  return choices;
+}
+function motionShotCueTime(scene, cue) {
+  return cue ? motionCueTime(scene, cue) : void 0;
+}
+function formatMotionNarration(narration) {
+  return (_nullishCoalesce(_optionalChain([narration, 'optionalAccess', _115 => _115.words]), () => ( []))).map((w) => `${w.start} ${w.text}`).join("\n");
+}
+function parseMotionNarration(text) {
+  const lines = text.split("\n").map((l) => l.trim()).filter(Boolean);
+  if (!lines.length) return { narration: null };
+  const words = [];
+  for (const [i, line] of lines.entries()) {
+    const m = /^(\d+(?:\.\d+)?)\s+(.+)$/.exec(line);
+    if (!m) return { error: `Line ${i + 1} ("${line}") should be a start time in ms and a word, e.g. "1200 hello".` };
+    const start = Number(m[1]);
+    if (words.length && start < words[words.length - 1].start) return { error: `Line ${i + 1} starts before the word above it; keep the words in time order.` };
+    words.push({ text: m[2], start });
+  }
+  return { narration: { words } };
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -3525,5 +3975,5 @@ Keep motion purposeful: one thing moving at a time reads best, ease-out for arri
 
 
 
-exports.ANIMATION_EDITOR_AGENT_INSTRUCTIONS = ANIMATION_EDITOR_AGENT_INSTRUCTIONS; exports.AnimationEditorController = AnimationEditorController; exports.FLAIR_EASES = FLAIR_EASES; exports.FLAIR_EXPORT_VERSION = FLAIR_EXPORT_VERSION; exports.MOTION_ADDITIVE_PROPERTIES = MOTION_ADDITIVE_PROPERTIES; exports.MOTION_BLENDS = MOTION_BLENDS; exports.MOTION_CAMERA_MS = MOTION_CAMERA_MS; exports.MOTION_COMMAND_SCHEMA = MOTION_COMMAND_SCHEMA; exports.MOTION_COMMAND_TYPES = MOTION_COMMAND_TYPES; exports.MOTION_DEFAULT_DURATIONS = MOTION_DEFAULT_DURATIONS; exports.MOTION_DEFAULT_HOLD = MOTION_DEFAULT_HOLD; exports.MOTION_DIRECTIONS = MOTION_DIRECTIONS; exports.MOTION_DRAW_EFFECT_ID = MOTION_DRAW_EFFECT_ID; exports.MOTION_DRAW_MS_PER_UNIT = MOTION_DRAW_MS_PER_UNIT; exports.MOTION_DRAW_RANGE = MOTION_DRAW_RANGE; exports.MOTION_EASE_IN_OUT = MOTION_EASE_IN_OUT; exports.MOTION_EASE_OUT = MOTION_EASE_OUT; exports.MOTION_EDIT_OPS = MOTION_EDIT_OPS; exports.MOTION_ENTER_STYLES = MOTION_ENTER_STYLES; exports.MOTION_EXIT_STYLES = MOTION_EXIT_STYLES; exports.MOTION_IRIS_SHAPES = MOTION_IRIS_SHAPES; exports.MOTION_ISSUE_CODES = MOTION_ISSUE_CODES; exports.MOTION_MIN_CHANGE_MS = MOTION_MIN_CHANGE_MS; exports.MOTION_REPEAT_MODES = MOTION_REPEAT_MODES; exports.MOTION_SPEED_RANGE = MOTION_SPEED_RANGE; exports.MOTION_SPLIT_ORIENTATIONS = MOTION_SPLIT_ORIENTATIONS; exports.MotionSceneFormatError = MotionSceneFormatError; exports.activeSegment = activeSegment; exports.applyMotionControlValues = applyMotionControlValues; exports.applyMotionEdits = applyMotionEdits; exports.checkMotionScene = checkMotionScene; exports.commandShapeProblems = commandShapeProblems; exports.compileMotionScene = compileMotionScene; exports.createAnimationEditorToolProvider = createAnimationEditorToolProvider; exports.createMotionScene = createMotionScene; exports.describeMotionElements = describeMotionElements; exports.describeMotionShots = describeMotionShots; exports.fitMotionRect = fitMotionRect; exports.fitMotionScene = fitMotionScene; exports.flairAtLeast = flairAtLeast; exports.flairCurveFor = flairCurveFor; exports.flairEaseFor = flairEaseFor; exports.freshShotId = freshShotId; exports.fromFlairSvgMotion = fromFlairSvgMotion; exports.fromFlairVectorEffect = fromFlairVectorEffect; exports.indexMotionNodes = indexMotionNodes; exports.interpolateMotionValue = interpolateMotionValue; exports.isMotionCommand = isMotionCommand; exports.isMotionShot = isMotionShot; exports.matchMotionNodes = matchMotionNodes; exports.motionAddTrackKey = motionAddTrackKey; exports.motionBeatAt = motionBeatAt; exports.motionBeatTime = motionBeatTime; exports.motionClipAttrs = motionClipAttrs; exports.motionCommandDuration = motionCommandDuration; exports.motionCommandRepeat = motionCommandRepeat; exports.motionCueTime = motionCueTime; exports.motionCycleDuration = motionCycleDuration; exports.motionFlairPrimitive = motionFlairPrimitive; exports.motionFollowRoute = motionFollowRoute; exports.motionFrameAt = motionFrameAt; exports.motionFrameToSvg = motionFrameToSvg; exports.motionIssue = motionIssue; exports.motionIssueKey = motionIssueKey; exports.motionIssueLine = motionIssueLine; exports.motionNodeClips = motionNodeClips; exports.motionNodeOffset = motionNodeOffset; exports.motionPathLength = motionPathLength; exports.motionRestValue = motionRestValue; exports.motionRevealClip = motionRevealClip; exports.motionRevealPadding = motionRevealPadding; exports.motionSceneShapeProblems = motionSceneShapeProblems; exports.motionSceneToJson = motionSceneToJson; exports.motionShotAt = motionShotAt; exports.motionShotTimeScale = motionShotTimeScale; exports.motionTrackKey = motionTrackKey; exports.namedWithSuggestion = namedWithSuggestion; exports.parseMotionScene = parseMotionScene; exports.resolveMotionCamera = resolveMotionCamera; exports.segmentProgress = segmentProgress; exports.segmentValue = segmentValue; exports.shotShapeProblems = shotShapeProblems; exports.suggestName = suggestName; exports.toFlairEffectDocument = toFlairEffectDocument; exports.toFlairSvgMotion = toFlairSvgMotion; exports.toFlairVectorEffect = toFlairVectorEffect; exports.toLottie = toLottie; exports.trackValue = trackValue; exports.withMotionLayers = withMotionLayers; exports.withViewBox = withViewBox;
+exports.ANIMATION_EDITOR_AGENT_INSTRUCTIONS = ANIMATION_EDITOR_AGENT_INSTRUCTIONS; exports.AnimationEditorController = AnimationEditorController; exports.FLAIR_EASES = FLAIR_EASES; exports.FLAIR_EXPORT_VERSION = FLAIR_EXPORT_VERSION; exports.MOTION_ADDITIVE_PROPERTIES = MOTION_ADDITIVE_PROPERTIES; exports.MOTION_BLENDS = MOTION_BLENDS; exports.MOTION_CAMERA_MS = MOTION_CAMERA_MS; exports.MOTION_COMMAND_SCHEMA = MOTION_COMMAND_SCHEMA; exports.MOTION_COMMAND_TYPES = MOTION_COMMAND_TYPES; exports.MOTION_DEFAULT_DURATIONS = MOTION_DEFAULT_DURATIONS; exports.MOTION_DEFAULT_HOLD = MOTION_DEFAULT_HOLD; exports.MOTION_DIRECTIONS = MOTION_DIRECTIONS; exports.MOTION_DRAW_EFFECT_ID = MOTION_DRAW_EFFECT_ID; exports.MOTION_DRAW_MS_PER_UNIT = MOTION_DRAW_MS_PER_UNIT; exports.MOTION_DRAW_RANGE = MOTION_DRAW_RANGE; exports.MOTION_EASE_CHOICES = MOTION_EASE_CHOICES; exports.MOTION_EASE_IN_OUT = MOTION_EASE_IN_OUT; exports.MOTION_EASE_OUT = MOTION_EASE_OUT; exports.MOTION_EDIT_OPS = MOTION_EDIT_OPS; exports.MOTION_ENTER_STYLES = MOTION_ENTER_STYLES; exports.MOTION_EXIT_STYLES = MOTION_EXIT_STYLES; exports.MOTION_IRIS_SHAPES = MOTION_IRIS_SHAPES; exports.MOTION_ISSUE_CODES = MOTION_ISSUE_CODES; exports.MOTION_MIN_CHANGE_MS = MOTION_MIN_CHANGE_MS; exports.MOTION_REPEAT_MODES = MOTION_REPEAT_MODES; exports.MOTION_SPEED_RANGE = MOTION_SPEED_RANGE; exports.MOTION_SPLIT_ORIENTATIONS = MOTION_SPLIT_ORIENTATIONS; exports.MotionSceneFormatError = MotionSceneFormatError; exports.activeSegment = activeSegment; exports.applyMotionControlValues = applyMotionControlValues; exports.applyMotionEdits = applyMotionEdits; exports.checkMotionScene = checkMotionScene; exports.commandShapeProblems = commandShapeProblems; exports.compileMotionScene = compileMotionScene; exports.createAnimationEditorToolProvider = createAnimationEditorToolProvider; exports.createMotionScene = createMotionScene; exports.defaultMotionCommand = defaultMotionCommand; exports.describeMotionElements = describeMotionElements; exports.describeMotionShots = describeMotionShots; exports.duplicateMotionCommandEdit = duplicateMotionCommandEdit; exports.fitMotionRect = fitMotionRect; exports.fitMotionScene = fitMotionScene; exports.fitMotionSceneEdits = fitMotionSceneEdits; exports.flairAtLeast = flairAtLeast; exports.flairCurveFor = flairCurveFor; exports.flairEaseFor = flairEaseFor; exports.formatMotionNarration = formatMotionNarration; exports.freshShotId = freshShotId; exports.fromFlairSvgMotion = fromFlairSvgMotion; exports.fromFlairVectorEffect = fromFlairVectorEffect; exports.highlightMotionSvg = highlightMotionSvg; exports.indexMotionNodes = indexMotionNodes; exports.interpolateMotionValue = interpolateMotionValue; exports.isMotionCommand = isMotionCommand; exports.isMotionShot = isMotionShot; exports.matchMotionNodes = matchMotionNodes; exports.motionAddTrackKey = motionAddTrackKey; exports.motionBeatAt = motionBeatAt; exports.motionBeatTime = motionBeatTime; exports.motionClipAttrs = motionClipAttrs; exports.motionCommandDuration = motionCommandDuration; exports.motionCommandFields = motionCommandFields; exports.motionCommandRepeat = motionCommandRepeat; exports.motionCommandRows = motionCommandRows; exports.motionCommandSummary = motionCommandSummary; exports.motionCueChoices = motionCueChoices; exports.motionCueFromKey = motionCueFromKey; exports.motionCueKey = motionCueKey; exports.motionCueTime = motionCueTime; exports.motionCycleDuration = motionCycleDuration; exports.motionEaseKey = motionEaseKey; exports.motionEasingCurve = motionEasingCurve; exports.motionEasingGuides = motionEasingGuides; exports.motionEasingPath = motionEasingPath; exports.motionFieldEdit = motionFieldEdit; exports.motionFieldLabel = motionFieldLabel; exports.motionFlairPrimitive = motionFlairPrimitive; exports.motionFollowRoute = motionFollowRoute; exports.motionFrameAt = motionFrameAt; exports.motionFrameToSvg = motionFrameToSvg; exports.motionGhosts = motionGhosts; exports.motionIssue = motionIssue; exports.motionIssueKey = motionIssueKey; exports.motionIssueLine = motionIssueLine; exports.motionMovingIds = motionMovingIds; exports.motionNodeAtElement = motionNodeAtElement; exports.motionNodeClips = motionNodeClips; exports.motionNodeOffset = motionNodeOffset; exports.motionPath = motionPath; exports.motionPathLength = motionPathLength; exports.motionPathsSvg = motionPathsSvg; exports.motionRestValue = motionRestValue; exports.motionRevealClip = motionRevealClip; exports.motionRevealPadding = motionRevealPadding; exports.motionRulerTicks = motionRulerTicks; exports.motionSceneShapeProblems = motionSceneShapeProblems; exports.motionSceneToJson = motionSceneToJson; exports.motionShotAt = motionShotAt; exports.motionShotCueTime = motionShotCueTime; exports.motionShotTimeScale = motionShotTimeScale; exports.motionStageSvg = motionStageSvg; exports.motionTrackKey = motionTrackKey; exports.namedWithSuggestion = namedWithSuggestion; exports.parseMotionFieldInput = parseMotionFieldInput; exports.parseMotionNarration = parseMotionNarration; exports.parseMotionScene = parseMotionScene; exports.resolveMotionCamera = resolveMotionCamera; exports.segmentProgress = segmentProgress; exports.segmentValue = segmentValue; exports.shotShapeProblems = shotShapeProblems; exports.suggestName = suggestName; exports.toFlairEffectDocument = toFlairEffectDocument; exports.toFlairSvgMotion = toFlairSvgMotion; exports.toFlairVectorEffect = toFlairVectorEffect; exports.toLottie = toLottie; exports.trackValue = trackValue; exports.withMotionLayers = withMotionLayers; exports.withViewBox = withViewBox;
 //# sourceMappingURL=index.cjs.map