@pixerate/editor 0.229.0 → 0.231.0

package/dist/animation-editor/index.js

@@ -8,7 +8,7 @@ import {
   motionIssueLine,
   namedWithSuggestion,
   suggestName
-} from "../chunk-W4KFNAWC.js";
+} from "../chunk-TYCJGFCF.js";
 import {
   IDENTITY_MATRIX,
   applyMatrix,
@@ -43,12 +43,18 @@ import {
 } from "../chunk-WEIK3UYB.js";
 import "../chunk-PWBZH3FK.js";
 import {
+  CAMERA_MOVE_MAX_MS,
   EffectUnsupportedError,
   EffectsSlot,
+  cameraBoxOfView,
+  cameraMoveField,
+  cameraMoveParts,
+  cameraViewOfBox,
   createEffectToolProvider,
   isEffectError,
+  resolveCameraMoveSpec,
   resolveEffectValues
-} from "../chunk-UGYUGZE2.js";
+} from "../chunk-TCZ2J7PR.js";
 import "../chunk-V2ZCJRDM.js";
 import "../chunk-2PBZBRP5.js";
 import "../chunk-ODBT55Q7.js";
@@ -98,6 +104,7 @@ import "../chunk-6ONMQ6WF.js";
 
 // src/animation-editor/types.ts
 var MOTION_TRIGGERS = ["click", "hover", "press", "scroll"];
+var motionCameraFramed = (camera) => typeof camera.frame === "string" || typeof camera.x === "number";
 var MOTION_TEXT_UNITS = ["letter", "word", "line"];
 var MOTION_CASCADES = ["forward", "backward", "center", "edges", "random"];
 var MOTION_DRIVEN_PROPERTIES = ["x", "y", "rotation", "scaleX", "scaleY", "opacity"];
@@ -190,7 +197,8 @@ ${problems.map((p) => `- ${p}`).join("\n")}`);
 };
 var SCENE_KEYS = ["version", "name", "description", "artwork", "shots", "clips", "drivers", "motionBlur", "loop", "trigger", "fps", "steps", "beat", "narration", "target", "controls", "presets"];
 var SHOT_KEYS = ["id", "label", "camera", "at", "run", "hold", "speed"];
-var CAMERA_KEYS = ["x", "y", "width", "height", "frame", "padding", "ease", "ms", "geometric"];
+var CAMERA_KEYS = ["x", "y", "width", "height", "frame", "padding", "ease", "ms", "geometric", "in", "during"];
+var CAMERA_MOVE_KEYS = ["move", "ms", "preset", "values"];
 var BASE_KEYS = ["type", "targets", "duration", "delay", "stagger", "with", "ease", "note", "repeat", "repeatMode", "steps", "split", "cascade", "source"];
 var DRAW_ORDER_KEYS = ["order", "pace", "align", "sortBy", "origin"];
 var COMMAND_KEYS = {
@@ -432,7 +440,25 @@ function shotShapeProblems(shot, where) {
       const isRect = ["x", "y", "width", "height"].every((k) => isNum(c[k]));
       if (typeof c.frame === "string") {
         if (c.padding !== void 0 && !isNum(c.padding)) problems.push(`${name} camera: "padding" must be a number.`);
-      } else if (!isRect) problems.push(`${name} camera: give { x, y, width, height } or { frame: "<node id>" }.`);
+      } else if (!isRect && (c.in === void 0 && c.during === void 0 || ["x", "y", "width", "height", "padding"].some((k) => c[k] !== void 0)))
+        problems.push(`${name} camera: give { x, y, width, height } or { frame: "<node id>" }, or only a move ("in" or "during") to keep the framing.`);
+      for (const field of ["in", "during"]) {
+        const m = c[field];
+        if (m === void 0) continue;
+        if (typeof m === "string") {
+          if (!m) problems.push(`${name} camera: "${field}" must name a camera move.`);
+          continue;
+        }
+        if (!isObject(m) || typeof m.move !== "string" || !m.move) {
+          problems.push(`${name} camera: "${field}" is a camera move's id, or { "move": id, "ms"?, "preset"?, "values"? }.`);
+          continue;
+        }
+        unknownKeys(m, CAMERA_MOVE_KEYS, `${name} camera ${field}`, problems);
+        if (m.ms !== void 0 && (field === "during" || !(isNum(m.ms) && m.ms >= 0)))
+          problems.push(field === "during" ? `${name} camera: a move while the shot holds plays across the shot's "hold"; set the hold instead of "during.ms".` : `${name} camera: "in.ms" must be a number \u2265 0.`);
+        if (m.preset !== void 0 && typeof m.preset !== "string") problems.push(`${name} camera: "${field}.preset" is a preset's name.`);
+        if (m.values !== void 0 && !isObject(m.values)) problems.push(`${name} camera: "${field}.values" is an object of the move's control values.`);
+      }
       if (c.ease !== void 0 && !isAnimationEasing(c.ease)) problems.push(`${name} camera: "ease" is not an easing.`);
       if (c.ms !== void 0 && !(isNum(c.ms) && c.ms >= 0)) problems.push(`${name} camera: "ms" must be a number \u2265 0.`);
       if (c.geometric !== void 0 && typeof c.geometric !== "boolean") problems.push(`${name} camera: "geometric" must be true or false.`);
@@ -1027,12 +1053,17 @@ function compileMotionScene(scene) {
     const start = t;
     let cursor = start;
     const f = motionShotTimeScale(shot);
+    const moveIn = shot.camera ? cameraMoveParts(shot.camera.in) : void 0;
+    const moveDuring = shot.camera ? cameraMoveParts(shot.camera.during) : void 0;
+    let playsIn = false;
     if (shot.camera) {
-      const rect = resolveMotionCamera(shot.camera, scene);
-      if (rect && rect.width > 0 && rect.height > 0) {
-        const ms2 = index === 0 ? 0 : (shot.camera.ms ?? MOTION_CAMERA_MS) * f;
+      const framed = motionCameraFramed(shot.camera);
+      const rect = framed ? resolveMotionCamera(shot.camera, scene) : null;
+      if (rect && rect.width > 0 && rect.height > 0 || !framed && moveIn) {
+        const ms2 = index === 0 ? 0 : (moveIn?.ms ?? shot.camera.ms ?? MOTION_CAMERA_MS) * f;
         cameraMoves.push({ shot: shot.id, start, end: start + ms2, to: rect, ease: shot.camera.ease ?? MOTION_EASE_IN_OUT, geometric: shot.camera.geometric === true });
         cursor = start + ms2;
+        playsIn = !!moveIn && index > 0;
       }
     }
     const commandsStart = cursor;
@@ -1051,7 +1082,19 @@ function compileMotionScene(scene) {
       runEnd = Math.max(runEnd, end2);
     });
     const end = runEnd + (shot.hold ?? MOTION_DEFAULT_HOLD) * f;
-    shots.push({ id: shot.id, index, ...shot.label ? { label: shot.label } : {}, start, commandsStart, commandsEnd: runEnd, end, ...cue !== void 0 ? { cue } : {}, ...missedBy !== void 0 ? { missedBy } : {} });
+    shots.push({
+      id: shot.id,
+      index,
+      ...shot.label ? { label: shot.label } : {},
+      start,
+      commandsStart,
+      commandsEnd: runEnd,
+      end,
+      ...cue !== void 0 ? { cue } : {},
+      ...missedBy !== void 0 ? { missedBy } : {},
+      ...playsIn ? { cameraIn: moveIn.move } : {},
+      ...moveDuring ? { cameraDuring: moveDuring.move } : {}
+    });
     t = end;
   });
   const tracks = /* @__PURE__ */ new Map();
@@ -1073,7 +1116,11 @@ function compileMotionScene(scene) {
     jobs.push({
       start: move.start,
       order: order++,
-      run: () => push({ node: "", property: "camera", start: move.start, end: move.end, from: valueAt("", "camera", move.start), to: [move.to.x, move.to.y, move.to.width, move.to.height], ease: move.ease, shot: move.shot, command: -1, ...move.geometric ? { geometric: true } : {} })
+      run: () => {
+        const from = valueAt("", "camera", move.start);
+        const to = move.to ? [move.to.x, move.to.y, move.to.width, move.to.height] : from;
+        push({ node: "", property: "camera", start: move.start, end: move.end, from, to, ease: move.ease, shot: move.shot, command: -1, ...move.geometric ? { geometric: true } : {} });
+      }
     });
   }
   for (const timing of commands) {
@@ -1372,6 +1419,160 @@ function motionShotAt(timeline, time) {
   return timeline.shots.find((s) => time < s.end) ?? timeline.shots[timeline.shots.length - 1];
 }
 
+// src/animation-editor/camera.ts
+var windowCache = /* @__PURE__ */ new WeakMap();
+function motionShotCameraMove(shot, role) {
+  return cameraMoveParts(shot?.camera?.[role === "transition" ? "in" : "during"]);
+}
+var motionCameraStage = (scene) => ({ width: scene.artwork.width, height: scene.artwork.height });
+var effectsPlayCamera = (provider) => !!provider && provider.capabilities.supportsCamera === true && typeof provider.cameraView === "function";
+async function motionCameraMoves(provider, role) {
+  if (!effectsPlayCamera(provider)) return [];
+  const all = await provider.list({ kind: "camera" });
+  return all.filter((e) => e.kind === "camera" && e.camera && (!role || e.camera.role === role));
+}
+function motionCameraWindows(scene, provider) {
+  if (!effectsPlayCamera(provider)) return [];
+  if (!scene.shots.some((s) => s.camera && (s.camera.in !== void 0 || s.camera.during !== void 0))) return [];
+  const timeline = compileMotionScene(scene);
+  let byProvider = windowCache.get(timeline);
+  if (!byProvider) windowCache.set(timeline, byProvider = /* @__PURE__ */ new WeakMap());
+  const cached = byProvider.get(provider);
+  if (cached) return cached;
+  const stage = motionCameraStage(scene);
+  const full = { x: 0, y: 0, width: stage.width, height: stage.height };
+  const track = timeline.tracks.get(motionTrackKey("", "camera"));
+  const boxView = (t) => {
+    const b = trackValue(track, t);
+    return cameraViewOfBox(Array.isArray(b) ? { x: b[0], y: b[1], width: b[2], height: b[3] } : full, stage);
+  };
+  const view = (move, values, from, to, u, ms2) => {
+    try {
+      return provider.cameraView(move, { from, to, u, ms: ms2, stage }, values);
+    } catch {
+      return null;
+    }
+  };
+  const windows = [];
+  let carry = null;
+  for (const timing of timeline.shots) {
+    const shot = scene.shots[timing.index];
+    const eases = timing.commandsStart > timing.start && !!track?.some((seg) => seg.shot === timing.id);
+    const framed = !!track?.some((seg) => seg.shot === timing.id);
+    if (timing.cameraIn && timing.commandsStart > timing.start) {
+      const spec = cameraMoveParts(shot.camera?.in);
+      const from = carry ?? boxView(timing.start);
+      const to = boxView(timing.commandsStart);
+      if (view(spec.move, spec.values, from, to, 0, timing.commandsStart - timing.start)) {
+        windows.push({ shot: timing.id, kind: "in", move: spec.move, ...spec.values ? { values: spec.values } : {}, start: timing.start, end: timing.commandsStart, from, to, after: null });
+        carry = null;
+      }
+    } else if (carry && eases) {
+      windows.push({ shot: timing.id, kind: "ease", start: timing.start, end: timing.commandsStart, from: carry, to: boxView(timing.commandsStart), after: null });
+      carry = null;
+    } else if (framed) carry = null;
+    if (timing.cameraDuring && timing.end > timing.commandsEnd) {
+      const spec = cameraMoveParts(shot.camera?.during);
+      const from = carry ?? boxView(timing.commandsEnd);
+      const ms2 = timing.end - timing.commandsEnd;
+      const last = view(spec.move, spec.values, from, from, 1, ms2);
+      if (last) {
+        windows.push({ shot: timing.id, kind: "during", move: spec.move, ...spec.values ? { values: spec.values } : {}, start: timing.commandsEnd, end: timing.end, from, to: from, after: last });
+        carry = last;
+      }
+    }
+  }
+  byProvider.set(provider, windows);
+  return windows;
+}
+var lerp = (a, b, t) => a + (b - a) * t;
+var smooth = (t) => t * t * (3 - 2 * t);
+function easeViews(from, to, u, stage) {
+  const k = smooth(Math.min(1, Math.max(0, u)));
+  const a = cameraBoxOfView(from, stage);
+  const b = cameraBoxOfView(to, stage);
+  const zoom = from.zoom * Math.pow(to.zoom / from.zoom, k);
+  const cx = lerp(a.x + a.width / 2, b.x + b.width / 2, k);
+  const cy = lerp(a.y + a.height / 2, b.y + b.height / 2, k);
+  const view = { zoom, scrollX: stage.width / (2 * zoom) - cx, scrollY: stage.height / (2 * zoom) - cy };
+  for (const key of ["tilt", "turn", "roll"]) if (from[key] || to[key]) view[key] = lerp(from[key] ?? 0, to[key] ?? 0, k);
+  return view;
+}
+function motionCameraViewAt(scene, time, provider) {
+  const windows = motionCameraWindows(scene, provider);
+  if (!windows.length || !effectsPlayCamera(provider)) return null;
+  const stage = motionCameraStage(scene);
+  let before;
+  for (const w of windows) {
+    if (w.start > time) break;
+    if (time < w.end || time === w.end && w === windows[windows.length - 1] && w.after) {
+      const u = w.end > w.start ? (time - w.start) / (w.end - w.start) : 1;
+      if (w.kind === "ease") return easeViews(w.from, w.to, u, stage);
+      try {
+        return provider.cameraView(w.move, { from: w.from, to: w.to, u: Math.min(1, Math.max(0, u)), ms: w.end - w.start, stage }, w.values);
+      } catch {
+        return null;
+      }
+    }
+    before = w;
+  }
+  if (!before?.after) return null;
+  const track = compileMotionScene(scene).tracks.get(motionTrackKey("", "camera"));
+  const retaken = track?.some((seg) => seg.start >= before.end && seg.start <= time);
+  return retaken ? null : before.after;
+}
+function motionCameraBox(view, scene) {
+  return cameraBoxOfView(view, motionCameraStage(scene));
+}
+function motionCameraTransform(view, width) {
+  if (!view || !view.tilt && !view.turn) return "";
+  const distance = (view.perspective ?? 2) * width;
+  return `perspective(${Math.round(distance)}px)${view.tilt ? ` rotateX(${round(view.tilt)}deg)` : ""}${view.turn ? ` rotateY(${round(-view.turn)}deg)` : ""}`;
+}
+var round = (n) => Math.round(n * 1e3) / 1e3;
+function withCameraViewEffects(svg, view, box, idPrefix = "vg-") {
+  if (!view || !view.roll && !(view.blur && view.blur > 0)) return svg;
+  const open = svg.match(/<svg\b[^>]*>/);
+  const close = svg.lastIndexOf("</svg>");
+  if (!open || close < 0) return svg;
+  const startBody = open.index + open[0].length;
+  const attrs = [];
+  let defs = "";
+  if (view.roll) attrs.push(`transform="rotate(${round(view.roll)} ${round(box.x + box.width / 2)} ${round(box.y + box.height / 2)})"`);
+  if (view.blur && view.blur > 0) {
+    const s = view.blur / view.zoom / 2;
+    const a = (view.blurAngle ?? 0) * Math.PI / 180;
+    const [sx, sy] = view.blurAngle === void 0 ? [s, s] : [Math.abs(Math.cos(a)) * s, Math.abs(Math.sin(a)) * s];
+    const id = `${idPrefix}camera-blur`;
+    defs = `<defs><filter id="${id}" x="-20%" y="-20%" width="140%" height="140%"><feGaussianBlur stdDeviation="${round(sx)} ${round(sy)}"/></filter></defs>`;
+    attrs.push(`filter="url(#${id})"`);
+  }
+  return `${svg.slice(0, startBody)}${defs}<g ${attrs.join(" ")}>${svg.slice(startBody, close)}</g>${svg.slice(close)}`;
+}
+async function checkMotionCameraMoves(scene, provider) {
+  const issues = [];
+  const named = scene.shots.filter((s) => s.camera && (s.camera.in !== void 0 || s.camera.during !== void 0));
+  if (!named.length) return issues;
+  if (!effectsPlayCamera(provider)) {
+    const ids = named.map((s) => `"${s.id}"`).join(", ");
+    issues.push(motionIssue("camera-move-not-played", `Shots ${ids} name camera moves, but ${provider ? `${provider.name} has no camera moves` : "no effects provider is set"}, so the camera eases between framings instead; set a provider with camera moves to play them.`));
+    return issues;
+  }
+  for (const shot of named) {
+    for (const [field, role] of [["in", "transition"], ["during", "hold"]]) {
+      const spec = shot.camera[field];
+      if (spec === void 0) continue;
+      try {
+        await resolveCameraMoveSpec(provider, spec, role);
+      } catch (error) {
+        const code = error.code === "invalid_values" || /preset/.test(error.message) ? "camera-move-values" : "camera-move-unknown";
+        issues.push(motionIssue(code, error.message, { shot: shot.id }));
+      }
+    }
+  }
+  return issues;
+}
+
 // src/animation-editor/evaluate.ts
 var MOTION_DRAW_EFFECT_ID = "~draw";
 var TRANSFORM_PROPS = ["x", "y", "rotation", "scaleX", "scaleY", "follow"];
@@ -1565,8 +1766,9 @@ function motionFrameAt(scene, time, options = {}) {
   };
   const document = { ...s.artwork, nodes: s.artwork.nodes.map(visit) };
   const cam = trackValue(timeline.tracks.get(motionTrackKey("", "camera")), time);
-  const box = Array.isArray(cam) ? cam : [0, 0, s.artwork.width, s.artwork.height];
-  return { time, document, camera: { x: tidy(box[0]), y: tidy(box[1]), width: tidy(box[2]), height: tidy(box[3]) }, clips };
+  const view = motionCameraViewAt(s, time, options.effects);
+  const box = view ? (({ x, y, width, height }) => [x, y, width, height])(motionCameraBox(view, s)) : Array.isArray(cam) ? cam : [0, 0, s.artwork.width, s.artwork.height];
+  return { time, document, camera: { x: tidy(box[0]), y: tidy(box[1]), width: tidy(box[2]), height: tidy(box[3]) }, ...view ? { view } : {}, clips };
 }
 function motionClipAttrs(clip) {
   const { shape: _shape, ...attrs } = clip;
@@ -1578,7 +1780,7 @@ function motionFrameToSvg(scene, time, options = {}) {
   const wrap = { ...options.wrap };
   for (const [id, clips] of Object.entries(frame.clips))
     wrap[id] = [...wrap[id] ?? [], ...clips.map((clip, i) => ({ clip: { id: `${prefix}reveal-${id}-${i}`, shape: clip.shape, attrs: motionClipAttrs(clip) } }))];
-  return withViewBox(vectorDocumentToSvg(frame.document, { ...options, wrap }), frame.camera);
+  return withCameraViewEffects(withViewBox(vectorDocumentToSvg(frame.document, { ...options, wrap }), frame.camera), frame.view, frame.camera, prefix);
 }
 function withViewBox(svg, box) {
   const f = (n) => String(Math.round(n * 1e3) / 1e3);
@@ -1694,7 +1896,7 @@ function motionStageSvg(scene, time, options = {}) {
     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 camera = motionFrameAt(scene, time, { effects: svgOptions.effects }).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;
@@ -1787,12 +1989,13 @@ function checkMotionScene(scene) {
   };
   scene.shots.forEach((shot, shotIndex2) => {
     if (shot.camera && "frame" in shot.camera && typeof shot.camera.frame === "string") known(shot.camera.frame, "unknown-frame", "node to frame", { shot: shot.id });
-    else if (shot.camera) {
+    else if (shot.camera && motionCameraFramed(shot.camera)) {
       const c = shot.camera;
       if (!(c.width > 0 && c.height > 0)) issues.push(motionIssue("invalid-camera", `The camera needs a positive width and height (got ${c.width} \xD7 ${c.height}).`, { shot: shot.id }));
       else if (Math.abs(c.width / c.height / artAspect - 1) > 0.02)
         issues.push(motionIssue("camera-aspect", `The camera is ${c.width} \xD7 ${c.height}, a different shape from the ${scene.artwork.width} \xD7 ${scene.artwork.height} artwork, so it shows bands at the sides; frame a node instead to match.`, { shot: shot.id }));
     }
+    if (shotIndex2 === 0 && shot.camera?.in !== void 0) issues.push(motionIssue("camera-move-first-shot", 'The first shot cuts to its framing (there is none before it to move from), so its camera "in" does not play; put the move on the next shot, or use a "during" move here.', { shot: shot.id }));
     if (!shot.run.length && !shot.camera && shotIndex2 > 0) issues.push(motionIssue("empty-shot", "This shot only holds; add commands or a camera move, or remove it.", { shot: shot.id }));
     shot.run.forEach((command3, i) => {
       const where = { shot: shot.id, command: i };
@@ -2356,7 +2559,7 @@ function simplifyTimedSamples(times, values, tol) {
   keep.forEach((k, i) => k && out.push(i));
   return out;
 }
-var round = (n, places = 2) => Math.round(n * 10 ** places) / 10 ** places || 0;
+var round2 = (n, places = 2) => Math.round(n * 10 ** places) / 10 ** places || 0;
 var ms = (n) => Math.max(0, Math.round(n));
 function motionTakeProblems(scene, take) {
   const problems = [];
@@ -2416,15 +2619,15 @@ function channelCommands(node, channel, pose, samples, tol, kept) {
     const base = { targets, duration: ms(duration), ease, ...extra };
     switch (channel) {
       case "move":
-        return { type: "move", ...base, to: { x: round(to[0]), y: round(to[1]) } };
+        return { type: "move", ...base, to: { x: round2(to[0]), y: round2(to[1]) } };
       case "scale":
-        return { type: "scale", ...base, to: Math.abs(to[0] - to[1]) < 1e-4 ? round(to[0], 4) : { x: round(to[0], 4), y: round(to[1], 4) } };
+        return { type: "scale", ...base, to: Math.abs(to[0] - to[1]) < 1e-4 ? round2(to[0], 4) : { x: round2(to[0], 4), y: round2(to[1], 4) } };
       case "rotation":
-        return { type: "rotate", ...base, to: round(to[0]) };
+        return { type: "rotate", ...base, to: round2(to[0]) };
       case "opacity":
-        return { type: "fade", ...base, to: round(to[0], 4) };
+        return { type: "fade", ...base, to: round2(to[0], 4) };
       default:
-        return { type: "style", ...base, strokeWidth: round(to[0]) };
+        return { type: "style", ...base, strokeWidth: round2(to[0]) };
     }
   };
   if (differs(list[0].v, rest)) {
@@ -2444,10 +2647,10 @@ function channelCommands(node, channel, pose, samples, tol, kept) {
     const span = end.t - first.t;
     const via = [];
     for (const k of keep.slice(1, -1)) {
-      const f = round((list[k].t - first.t) / span, 6);
+      const f = round2((list[k].t - first.t) / span, 6);
       if (f > (via.at(-1)?.f ?? 0) && f < 1) via.push({ s: list[k], f });
     }
-    const extra = via.length ? { via: via.map(({ s }) => ({ x: round(s.v[0]), y: round(s.v[1]) })), times: via.map(({ f }) => f) } : {};
+    const extra = via.length ? { via: via.map(({ s }) => ({ x: round2(s.v[0]), y: round2(s.v[1]) })), times: via.map(({ f }) => f) } : {};
     out.push({ start: first.t, command: make(end.v, span, "linear", extra) });
     kept.n += via.length + 2;
     return out;
@@ -2551,7 +2754,7 @@ function toFlairSvgMotion(scene, options = {}) {
   const behaviors = options.behaviors ?? flairAtLeast(flair, "0.38");
   const springs = flairAtLeast(flair, "0.39");
   const strobes = flairAtLeast(flair, "0.39");
-  const writeEase = (ease) => typeof ease === "string" || "spring" in ease ? ease : ease.map(round3);
+  const writeEase = (ease) => typeof ease === "string" || "spring" in ease ? ease : ease.map(round4);
   const easeOf2 = (segment) => {
     const resolved = resolveEasing(segment.ease);
     if (resolved !== "hold" && resolved.type === "spring") {
@@ -2564,8 +2767,8 @@ function toFlairSvgMotion(scene, options = {}) {
     return back && curves ? flairCurveFor(back, curves) : void 0;
   };
   const plays = (s) => (!s.behavior || behaviors) && (!s.steps || strobes) && !s.geometric;
-  const round3 = (n) => Math.round(n * 10 ** precision) / 10 ** precision;
-  const f = (n) => String(round3(n));
+  const round4 = (n) => Math.round(n * 10 ** precision) / 10 ** precision;
+  const f = (n) => String(round4(n));
   const timeline = compileMotionScene(scene);
   const nodes = indexMotionNodes(scene.artwork.nodes);
   const notes = [];
@@ -2631,7 +2834,7 @@ function toFlairSvgMotion(scene, options = {}) {
     }
     const opacitySources = sourcesOf(id, ["opacity"]);
     if (timeline.tracks.has(motionTrackKey(id, "opacity")) || opacitySources.length)
-      channels.push({ id, kind: "attr", attr: "opacity", segments: [...track(id, "opacity"), ...opacitySources], exact: (s) => plays(s) && !drivenBy.has(s), value: (t) => round3(motionPropertyValue(timeline, id, "opacity", t)) });
+      channels.push({ id, kind: "attr", attr: "opacity", segments: [...track(id, "opacity"), ...opacitySources], exact: (s) => plays(s) && !drivenBy.has(s), value: (t) => round4(motionPropertyValue(timeline, id, "opacity", t)) });
     const followed = follows.some((x) => x.id === id);
     const transformSegments = [...TRANSFORM_PROPS2.flatMap((p) => followed && p === "follow" ? [] : [...track(id, p), ...timeline.tracks.get(motionAddTrackKey(id, p)) ?? []]), ...sourcesOf(id, ["x", "y", "rotation", "scaleX", "scaleY"])];
     if (transformSegments.length) {
@@ -2664,11 +2867,11 @@ function toFlairSvgMotion(scene, options = {}) {
       paint("fill", "fill");
       paint("stroke", "stroke");
       const width = owner(path, "strokeWidth");
-      if (width) channels.push({ id: path.id, kind: "attr", attr: "stroke-width", segments: [...track(width, "strokeWidth")], exact: () => true, value: (t) => round3(Number(trackValue(track(width, "strokeWidth"), t))) });
+      if (width) channels.push({ id: path.id, kind: "attr", attr: "stroke-width", segments: [...track(width, "strokeWidth")], exact: () => true, value: (t) => round4(Number(trackValue(track(width, "strokeWidth"), t))) });
       const fade = owner(path, "fillOpacity");
-      if (fade) channels.push({ id: path.id, kind: "attr", attr: "fill-opacity", segments: [...track(fade, "fillOpacity")], exact: () => true, value: (t) => round3(Number(trackValue(track(fade, "fillOpacity"), t))) });
+      if (fade) channels.push({ id: path.id, kind: "attr", attr: "fill-opacity", segments: [...track(fade, "fillOpacity")], exact: () => true, value: (t) => round4(Number(trackValue(track(fade, "fillOpacity"), t))) });
       const draw = owner(path, "drawEnd");
-      if (draw) channels.push({ id: path.id, kind: "draw", segments: [...track(draw, "drawEnd")], exact: () => true, value: (t) => round3(Math.min(1, Math.max(0, Number(trackValue(track(draw, "drawEnd"), t))))) });
+      if (draw) channels.push({ id: path.id, kind: "draw", segments: [...track(draw, "drawEnd")], exact: () => true, value: (t) => round4(Math.min(1, Math.max(0, Number(trackValue(track(draw, "drawEnd"), t))))) });
       if (owner(path, "drawStart")) notes.push(`"${path.id}": drawing from a start other than 0 is not exported; Flair draws from the start of the path.`);
     }
     const shapeSegments = [...timeline.tracks.entries()].filter(([k]) => k.startsWith(`${id}\0`) && (k.endsWith("\0shape") || k.includes("\0effect:"))).flatMap(([, v]) => v);
@@ -2694,7 +2897,26 @@ function toFlairSvgMotion(scene, options = {}) {
     }
   }
   const camera = track("", "camera");
-  if (camera.length) channels.push({ id: "", kind: "view", segments: [...camera], exact: () => true, overshoot: true, value: (t) => trackValue(camera, t).map(round3) });
+  const windows = motionCameraWindows(scene, options.effects);
+  const moveSegments = windows.map((w) => ({ node: "", property: "camera", start: w.start, end: w.end, from: [], to: [], ease: "linear", shot: w.shot, command: -1 }));
+  const sampledMove = new WeakSet(moveSegments);
+  const cameraValue = windows.length ? (t) => {
+    const box = motionFrameAt(scene, t, { draw: false, offsets: false, effects: options.effects }).camera;
+    return [box.x, box.y, box.width, box.height].map(round4);
+  } : (t) => trackValue(camera, t).map(round4);
+  if (camera.length || windows.length) channels.push({ id: "", kind: "view", segments: [...camera, ...moveSegments].sort((a, b) => a.start - b.start), exact: (seg) => !sampledMove.has(seg), overshoot: true, value: cameraValue });
+  const cameraTag = (t) => {
+    const w = windows.find((x) => t >= x.start - 1e-6 && t < x.end - 1e-6 && x.move);
+    if (w) return `${w.move}@${w.shot}`;
+    const seg = camera.find((x) => t >= x.start - 1e-6 && t < Math.max(x.end, x.start + 1e-3));
+    const shot = seg ? scene.shots.find((x) => x.id === seg.shot) : void 0;
+    const move = cameraMoveParts(shot?.camera?.in)?.move;
+    return move && shot ? `${move}@${shot.id}` : void 0;
+  };
+  const unplayed = scene.shots.filter((x) => x.camera && (x.camera.in !== void 0 || x.camera.during !== void 0) && !windows.some((w) => w.shot === x.id));
+  if (unplayed.length)
+    notes.push(`The camera moves of ${unplayed.map((x) => `"${x.id}"`).join(", ")} are written as eased framings, tagged with the move's id${options.effects ? " (the effects provider cannot play them)" : "; pass an effects provider with camera moves (options.effects) to sample them exactly"}.`);
+  if (windows.length) notes.push("Camera moves are written as framings (the view box): their tilt, turn, roll and motion blur are not carried over to Flair.");
   const animate = [];
   let sampled = 0;
   const same = (a, b) => JSON.stringify(a) === JSON.stringify(b);
@@ -2702,12 +2924,16 @@ function toFlairSvgMotion(scene, options = {}) {
     const written = writeEase(ease);
     const base = {
       ...channel.id ? { id: channel.id } : {},
-      ...delay > 0 ? { delay: round3(delay) } : {},
-      ms: round3(ms2),
+      ...delay > 0 ? { delay: round4(delay) } : {},
+      ms: round4(ms2),
       ease: written,
       ...segment?.behavior ? { behavior: segment.behavior } : {},
       ...segment?.steps ? { strobe: segment.steps } : {}
     };
+    if (channel.kind === "view") {
+      const tag2 = cameraTag(delay);
+      if (tag2) base.tag = tag2;
+    }
     if (channel.kind === "view") animate.push({ ...base, view: to });
     else if (channel.kind === "draw") animate.push({ ...base, draw: [from, to] });
     else if (channel.kind === "attrs") {
@@ -2745,6 +2971,16 @@ function toFlairSvgMotion(scene, options = {}) {
         const t0 = a + (b - a) * (k - 1) / n;
         const t1 = a + (b - a) * k / n;
         const next = channel.value(t1);
+        const jump = channel.kind === "view" && active.some((x) => sampledMove.has(x)) ? viewJump(channel.value, t0, t1) : void 0;
+        if (jump) {
+          const [before, after] = [channel.value(jump - 1e-3), channel.value(jump)];
+          emit(channel, t0, jump - t0, prev, before, "linear");
+          emit(channel, jump, 0, before, after, "linear");
+          if (!same(after, next)) emit(channel, jump, t1 - jump, after, next, "linear");
+          sampled += 2;
+          prev = next;
+          continue;
+        }
         if (!same(prev, next)) {
           emit(channel, t0, t1 - t0, prev, next, "linear");
           sampled++;
@@ -2757,11 +2993,11 @@ function toFlairSvgMotion(scene, options = {}) {
     const starts = follow.segments.map((seg) => seg.start);
     for (const seg of follow.segments) {
       const along = { id: follow.wrapper, along: follow.routes.get(seg.path), ...seg.rotate ? { orient: true } : {} };
-      const progress = (t) => round3(Math.min(1, Math.max(0, Number(segmentValue(seg, t)))));
+      const progress = (t) => round4(Math.min(1, Math.max(0, Number(segmentValue(seg, t)))));
       const curve = seg.end > seg.start ? plays(seg) ? easeOf2(seg) : void 0 : "linear";
       if (curve && !(overshoots(curve) && seg.rotate)) {
         const ends = seg.reverse ? [Number(seg.to), Number(seg.from)] : [Number(seg.from), Number(seg.to)];
-        animate.push({ ...along, ...seg.start > 0 ? { delay: round3(seg.start) } : {}, ms: round3(seg.end - seg.start), ease: writeEase(curve), ...seg.steps ? { strobe: seg.steps } : {}, at: [round3(ends[0]), round3(ends[1])] });
+        animate.push({ ...along, ...seg.start > 0 ? { delay: round4(seg.start) } : {}, ms: round4(seg.end - seg.start), ease: writeEase(curve), ...seg.steps ? { strobe: seg.steps } : {}, at: [round4(ends[0]), round4(ends[1])] });
         continue;
       }
       const until = Math.min(seg.end, ...starts.filter((t) => t > seg.start));
@@ -2769,7 +3005,7 @@ function toFlairSvgMotion(scene, options = {}) {
       for (let k = 1; k <= n; k++) {
         const t0 = seg.start + (until - seg.start) * (k - 1) / n;
         const t1 = seg.start + (until - seg.start) * k / n;
-        animate.push({ ...along, ...t0 > 0 ? { delay: round3(t0) } : {}, ms: round3(t1 - t0), ease: "linear", at: [progress(t0), progress(t1)] });
+        animate.push({ ...along, ...t0 > 0 ? { delay: round4(t0) } : {}, ms: round4(t1 - t0), ease: "linear", at: [progress(t0), progress(t1)] });
         sampled++;
       }
     }
@@ -2784,7 +3020,7 @@ function toFlairSvgMotion(scene, options = {}) {
       timeline.shots.forEach((shot, i) => {
         if (shot.start <= at + 1e-6) step = i;
       });
-      const delay = round3(at - timeline.shots[step].start);
+      const delay = round4(at - timeline.shots[step].start);
       delete a.delay;
       if (delay > 0) a.delay = delay;
       a.step = step + 1;
@@ -2804,7 +3040,7 @@ function toFlairSvgMotion(scene, options = {}) {
     svg = svg.slice(0, header) + swap(svg.slice(header));
     motion = { svg, animate: animate.map((a) => a.attrs ? { ...a, attrs: Object.fromEntries(Object.entries(a.attrs).map(([k, [x, y]]) => [k, [typeof x === "string" ? swap(x) : x, typeof y === "string" ? swap(y) : y]])) } : a) };
   }
-  return { motion, duration: timeline.duration, hold: Math.max(0, round3(timeline.duration - lastChange)), sampled, notes: [...new Set(notes)], ...trigger ? { trigger } : {} };
+  return { motion, duration: timeline.duration, hold: Math.max(0, round4(timeline.duration - lastChange)), sampled, notes: [...new Set(notes)], ...trigger ? { trigger } : {} };
 }
 var kebab = (text) => text.trim().replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/[^A-Za-z0-9]+/g, "-").replace(/^-+|-+$/g, "").toLowerCase() || "animation";
 function toFlairVectorEffect(scene, options = {}) {
@@ -2836,6 +3072,20 @@ function toFlairEffectDocument(scene, options = {}) {
     presets: scene.presets ?? []
   };
 }
+function viewJump(value, t0, t1) {
+  const box = (t) => value(t);
+  const apart = (a2, b2) => Math.hypot(a2[0] + a2[2] / 2 - b2[0] - b2[2] / 2, a2[1] + a2[3] / 2 - b2[1] - b2[3] / 2, a2[2] - b2[2]);
+  let lo = t0;
+  let hi = t1;
+  for (let i = 0; i < 40 && hi - lo > 1e-4; i++) {
+    const mid = (lo + hi) / 2;
+    if (apart(box(lo), box(mid)) >= apart(box(mid), box(hi))) hi = mid;
+    else lo = mid;
+  }
+  const a = box(lo);
+  const b = box(hi);
+  return apart(a, b) > Math.min(a[2], b[2]) / 20 ? hi : void 0;
+}
 
 // src/animation-editor/flair-import.ts
 var PLACEHOLDER = /\{\{\s*([A-Za-z_]\w*)\s*(?::\s*([A-Za-z0-9]*)([^}]*))?\}\}/g;
@@ -3050,7 +3300,7 @@ function rgba(color) {
   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, round3) {
+function lottieContours(path, round4) {
   const out = [];
   let cur = null;
   let px = 0;
@@ -3091,7 +3341,7 @@ function lottieContours(path, round3) {
     }
   }
   if (cur) out.push(cur);
-  return out.map((c) => ({ c: c.c, v: c.v.map((p) => p.map(round3)), i: c.i.map((p) => p.map(round3)), o: c.o.map((p) => p.map(round3)) }));
+  return out.map((c) => ({ c: c.c, v: c.v.map((p) => p.map(round4)), i: c.i.map((p) => p.map(round4)), o: c.o.map((p) => p.map(round4)) }));
 }
 function staticParts(m) {
   const sx = Math.hypot(m[0], m[1]);
@@ -3103,8 +3353,8 @@ function staticParts(m) {
 function toLottie(scene, options = {}) {
   const fps = options.fps ?? scene.fps ?? 30;
   const precision = options.precision ?? 3;
-  const round3 = (n) => Math.round(n * 10 ** precision) / 10 ** precision;
-  const frame = (ms2) => round3(ms2 * fps / 1e3);
+  const round4 = (n) => Math.round(n * 10 ** precision) / 10 ** precision;
+  const frame = (ms2) => round4(ms2 * fps / 1e3);
   const timeline = compileMotionScene(scene);
   const nodes = indexMotionNodes(scene.artwork.nodes);
   const notes = [];
@@ -3121,16 +3371,16 @@ function toLottie(scene, options = {}) {
     return [e.x1, e.y1, e.x2, e.y2];
   };
   const animate = (segments, value, exact = true) => {
-    const rest = value(0).map(round3);
+    const rest = value(0).map(round4);
     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(round3) };
+      const k = { t: frame(t), s: v.map(round4) };
       if (ease === "hold") k.h = 1;
       else {
         const [x1, y1, x2, y2] = ease === "linear" || !ease ? [0, 0, 1, 1] : ease;
-        k.o = { x: [round3(x1)], y: [round3(y1)] };
-        k.i = { x: [round3(x2)], y: [round3(y2)] };
+        k.o = { x: [round4(x1)], y: [round4(y1)] };
+        k.i = { x: [round4(x2)], y: [round4(y2)] };
       }
       if (keys.length && keys[keys.length - 1].t === k.t) keys[keys.length - 1] = k;
       else keys.push(k);
@@ -3178,7 +3428,7 @@ function toLottie(scene, options = {}) {
   const poseTransform = (entry) => {
     const id = entry.node.id;
     const tr = STATIC_TR();
-    const c = [entry.center.x, entry.center.y].map(round3);
+    const c = [entry.center.x, entry.center.y].map(round4);
     const own = (p) => track(id, p);
     const sources = motionDriverSources(timeline, id, ["x", "y", "rotation", "scaleX", "scaleY"]);
     const layered = ["x", "y", "rotation", "scaleX", "scaleY"].some((p) => layers(id, p).length) || sources.length > 0;
@@ -3189,7 +3439,7 @@ function toLottie(scene, options = {}) {
       tr.p = animate(mixed ? [...own("x"), ...own("y"), ...own("follow"), ...layers(id, "x"), ...layers(id, "y"), ...sources] : [...own("x"), ...own("y")], (t) => poseAt(entry, t).p, !mixed);
       tr.r = animate(mixed ? [...own("rotation"), ...own("follow"), ...layers(id, "rotation"), ...sources] : own("rotation"), (t) => [poseAt(entry, t).r], !mixed);
       tr.s = animate(mixed ? [...own("scaleX"), ...own("scaleY"), ...layers(id, "scaleX"), ...layers(id, "scaleY"), ...sources] : [...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(round3) };
+      if (tr.p.a === 0) tr.p = { a: 0, k: poseAt(entry, 0).p.map(round4) };
     }
     const opacitySources = motionDriverSources(timeline, id, ["opacity"]);
     if (opacitySources.length) {
@@ -3198,7 +3448,7 @@ function toLottie(scene, options = {}) {
     }
     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: round3(rest * 100) };
+    tr.o = opacity.length ? animate(opacity, (t) => [Math.min(1, Math.max(0, Number(trackValue(opacity, t) ?? rest))) * 100]) : { a: 0, k: round4(rest * 100) };
     return tr;
   };
   const owner = (path, p) => {
@@ -3220,7 +3470,7 @@ function toLottie(scene, options = {}) {
       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)), round3);
+    const rest = lottieContours(toBezierPath(geometryAt(0)), round4);
     rest.forEach((contour, n) => {
       let ks = { a: 0, k: contour };
       if (shapeSegments.length) {
@@ -3229,7 +3479,7 @@ function toLottie(scene, options = {}) {
         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)), round3)[n];
+          const c = lottieContours(toBezierPath(geometryAt(t)), round4)[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] } } : {} });
         }
@@ -3258,9 +3508,9 @@ function toLottie(scene, options = {}) {
       items.push({
         ty: "st",
         nm: "Stroke",
-        c: colour2.length ? animate(colour2, (t) => rgba(trackValue(colour2, t)) ?? stroke ?? [0, 0, 0, 1]) : { a: 0, k: (stroke ?? [0, 0, 0, 1]).map(round3) },
+        c: colour2.length ? animate(colour2, (t) => rgba(trackValue(colour2, t)) ?? stroke ?? [0, 0, 0, 1]) : { a: 0, k: (stroke ?? [0, 0, 0, 1]).map(round4) },
         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: round3(path.strokeWidth ?? 1) },
+        w: widthFrom ? animate(track(widthFrom, "strokeWidth"), (t) => [Math.max(0, Number(trackValue(track(widthFrom, "strokeWidth"), t) ?? path.strokeWidth ?? 1))]) : { a: 0, k: round4(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
@@ -3275,7 +3525,7 @@ function toLottie(scene, options = {}) {
       items.push({
         ty: "fl",
         nm: "Fill",
-        c: colour2.length ? animate(colour2, (t) => rgba(trackValue(colour2, t)) ?? fill ?? [0, 0, 0, 1]) : { a: 0, k: (fill ?? [0, 0, 0, 1]).map(round3) },
+        c: colour2.length ? animate(colour2, (t) => rgba(trackValue(colour2, t)) ?? fill ?? [0, 0, 0, 1]) : { a: 0, k: (fill ?? [0, 0, 0, 1]).map(round4) },
         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
       });
@@ -3301,9 +3551,9 @@ function toLottie(scene, options = {}) {
         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(round3) };
-          innerTr.s = { a: 0, k: parts.s.map(round3) };
-          innerTr.r = { a: 0, k: round3(parts.r) };
+          innerTr.p = { a: 0, k: parts.p.map(round4) };
+          innerTr.s = { a: 0, k: parts.s.map(round4) };
+          innerTr.r = { a: 0, k: round4(parts.r) };
         }
       }
     }
@@ -3313,7 +3563,7 @@ function toLottie(scene, options = {}) {
   const artwork = { ...scene.artwork, nodes: expandVectorAppearances(scene.artwork.nodes) };
   const content = shown(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(round3) }, o: { a: 0, k: 100 }, r: 1 }, STATIC_TR()] });
+    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(round4) }, o: { a: 0, k: 100 }, r: 1 }, STATIC_TR()] });
   const camera = track("", "camera");
   const root = STATIC_TR();
   if (camera.length) {
@@ -4129,6 +4379,64 @@ var AnimationEditorController = class {
     const r = this.apply({ op: "replace_scene", scene: withoutMotionEffect(this.scene, instance).scene }, `Remove ${was.name ?? was.effect}`);
     return r.ok ? { ok: true, effect: was, notes: [] } : r;
   }
+  /**
+   * The provider's camera moves for a role (`transition` for a shot's `camera.in`, `hold` for its
+   * `camera.during`), or all of them. Empty without a provider that has camera moves.
+   */
+  cameraMoves(role) {
+    return motionCameraMoves(this.effects.provider, role);
+  }
+  /**
+   * Sets the camera move a shot gets in with (`transition`, its `camera.in`) or plays while it
+   * holds (`hold`, its `camera.during`). The move is checked against the provider first (its
+   * role, preset and values; a preset's values are written out), then set in one undo step.
+   * A shot with no camera gets one that keeps the framing. Returns the shot's camera and when the
+   * move plays. `merge` folds a slider drag's changes into one undo step.
+   */
+  async setShotCameraMove(shot, role, spec, options = {}) {
+    const reason = this.readOnlyReason();
+    if (reason) return this.refuse(reason);
+    const found = this.scene.shots.find((s) => s.id === shot);
+    if (!found) return this.refuse(`There is no shot "${shot}"; the shots are ${this.scene.shots.map((s) => `"${s.id}"`).join(", ") || "none yet"}.`);
+    let resolved;
+    try {
+      resolved = await resolveCameraMoveSpec(this.effects.require(), spec, role);
+    } catch (error) {
+      if (isEffectError(error) || error instanceof Error) return this.refuse(error.message);
+      throw error;
+    }
+    const field = cameraMoveField(role);
+    const current = this.scene.shots.find((s) => s.id === shot);
+    if (!current) return this.refuse(`Shot "${shot}" was removed while the move was checked.`);
+    const parts = role === "transition" && resolved.spec.ms === void 0 ? { ...resolved.spec, ms: resolved.description.camera.durationMs } : resolved.spec;
+    const simple = parts.ms === void 0 && parts.preset === void 0 && parts.values === void 0;
+    const camera = { ...current.camera ?? {}, [field]: simple ? parts.move : parts };
+    const r = this.apply({ op: "update_shot", shot, set: { camera } }, `${role === "hold" ? "Hold move" : "Camera move"} ${resolved.description.name}`, { merge: options.merge });
+    if (!r.ok) return r;
+    return this.cameraMoveResult(shot, role, resolved.description.id);
+  }
+  /** Removes a shot's camera move for a role, keeping its framing (a camera left with nothing is removed). One undo step. Works without a provider. */
+  clearShotCameraMove(shot, role) {
+    const found = this.scene.shots.find((s) => s.id === shot);
+    if (!found) return this.refuse(`There is no shot "${shot}"; the shots are ${this.scene.shots.map((s) => `"${s.id}"`).join(", ") || "none yet"}.`);
+    const field = cameraMoveField(role);
+    if (found.camera?.[field] === void 0) return this.refuse(`Shot "${shot}" has no camera "${field}" move to clear${found.camera?.[field === "in" ? "during" : "in"] !== void 0 ? `; it has a "${field === "in" ? "during" : "in"}" move (role ${role === "hold" ? "transition" : "hold"})` : ""}.`);
+    const rest = { ...found.camera };
+    delete rest[field];
+    const keep = motionCameraFramed(rest) || rest.in !== void 0 || rest.during !== void 0;
+    const r = this.apply(keep ? { op: "update_shot", shot, set: { camera: rest } } : { op: "update_shot", shot, remove: ["camera"] }, role === "hold" ? "Clear hold move" : "Clear camera move");
+    if (!r.ok) return r;
+    return this.cameraMoveResult(shot, role);
+  }
+  cameraMoveResult(shot, role, move) {
+    const timing = compileMotionScene(this.scene).shots.find((s) => s.id === shot);
+    const camera = this.scene.shots.find((s) => s.id === shot)?.camera ?? null;
+    const window = role === "transition" ? { start: timing.start, end: timing.commandsStart } : { start: timing.commandsEnd, end: timing.end };
+    const notes = [];
+    if (move && role === "transition" && timing.index === 0) notes.push('This is the first shot, which cuts to its framing, so its "in" move does not play; it plays from the second shot on.');
+    if (move && !effectsPlayCamera(this.effects.provider)) notes.push("The provider cannot play camera moves, so the camera eases instead.");
+    return { ok: true, shot, camera, ...move ? { window } : {}, notes };
+  }
   /** Opens a scene (JSON or object). `clearHistory` drops the undo stack (opening a file); otherwise it is one undo step. */
   load(scene, options = {}) {
     if (options.clearHistory) this.cancelRecording();
@@ -4207,11 +4515,11 @@ var AnimationEditorController = class {
   }
   /** The scene at `time` (default: the playhead). */
   frame(time = this.player.currentTime, options = {}) {
-    return motionFrameAt(this.viewScene(), time, options);
+    return motionFrameAt(this.viewScene(), time, { effects: this.effects.provider, ...options });
   }
   /** The scene at `time` (default: the playhead) as SVG. */
   toSvg(time = this.player.currentTime, options = {}) {
-    return motionStageSvg(this.viewScene(), time, options);
+    return motionStageSvg(this.viewScene(), time, { effects: this.effects.provider, ...options });
   }
   // ---------------------------------------------------------------------------------------
   // Recording
@@ -4354,15 +4662,15 @@ var AnimationEditorController = class {
   }
   /** The scene as a Flair `SvgMotion`. */
   toFlairMotion(options = {}) {
-    return toFlairSvgMotion(this.scene, options);
+    return toFlairSvgMotion(this.scene, { effects: this.effects.provider, ...options });
   }
   /** The scene as a Flair catalog vector effect. */
   toFlairEffect(options = {}) {
-    return toFlairVectorEffect(this.scene, options);
+    return toFlairVectorEffect(this.scene, { effects: this.effects.provider, ...options });
   }
   /** The scene as a Flair `EffectDocument`. */
   toFlairDocument(options = {}) {
-    return toFlairEffectDocument(this.scene, options);
+    return toFlairEffectDocument(this.scene, { effects: this.effects.provider, ...options });
   }
 };
 
@@ -4776,11 +5084,11 @@ function describeElement(node, ancestors) {
     ...effects.length ? { effects } : {}
   };
 }
-var round2 = (n) => Math.round(n * 10) / 10;
+var round3 = (n) => Math.round(n * 10) / 10;
 function describeMotionElements(scene) {
   return [...indexMotionNodes(scene.artwork.nodes).values()].map((e) => ({
     ...describeElement(e.node, e.ancestors),
-    ...e.bounds ? { bounds: { x: round2(e.bounds.x), y: round2(e.bounds.y), width: round2(e.bounds.width), height: round2(e.bounds.height) } } : {}
+    ...e.bounds ? { bounds: { x: round3(e.bounds.x), y: round3(e.bounds.y), width: round3(e.bounds.width), height: round3(e.bounds.height) } } : {}
   }));
 }
 function describeMotionShots(scene) {
@@ -5856,6 +6164,71 @@ function parseMotionDrivers(text) {
   return { drivers };
 }
 
+// src/animation-editor/camera-tools.ts
+var ROLE = {
+  type: "string",
+  enum: ["transition", "hold"],
+  description: `transition: the move the camera gets into the shot with (its camera "in": a glide, whip pan, punch zoom, cut). hold: the move it makes while the shot holds (its camera "during": a Ken Burns drift, a crash zoom), played across the shot's hold.`
+};
+var summary = (e) => ({ id: e.id, name: e.name, role: e.camera.role, durationMs: e.camera.durationMs, ...e.camera.cut !== void 0 ? { cut: e.camera.cut } : {}, ...e.description ? { description: e.description } : {}, ...e.tags?.length ? { tags: e.tags } : {} });
+var done = (r) => {
+  if (!r.ok) throw new Error(r.error);
+  return { shot: r.shot, camera: r.camera, ...r.window ? { window: r.window } : {}, ...r.notes.length ? { notes: r.notes } : {} };
+};
+function animationCameraMoveTools(controller, ctx) {
+  return [
+    {
+      name: "list_camera_moves",
+      title: "List camera moves",
+      description: "Lists the effects provider's camera moves, for a role or both: { available, moves: [{ id, name, role, durationMs, cut (0\u20131 of the way through where the view jumps, for moves that cut), description, tags }] }. Use the ids with set_shot_camera_move (role transition for how the camera gets into a shot, hold for how it moves while the shot holds) and describe_effect for a move's controls and presets. Without a provider that has camera moves it returns available: false and the reason; the camera then eases between framings.",
+      inputSchema: { type: "object", properties: { role: ROLE }, additionalProperties: false },
+      annotations: { title: "List camera moves", ...ctx.annotations.read },
+      handler: async (args) => {
+        const provider = controller.effectsProvider;
+        if (!effectsPlayCamera(provider)) return { available: false, reason: provider ? `${provider.name} has no camera moves (capabilities.supportsCamera is not set), so shots ease between framings.` : "No effects provider is registered, so there are no camera moves; shots ease between framings.", moves: [] };
+        return { available: true, provider: provider.name, moves: (await controller.cameraMoves(args.role)).map(summary) };
+      }
+    },
+    {
+      name: "set_shot_camera_move",
+      title: "Set a shot's camera move",
+      description: `Sets the camera move a shot gets in with (role transition, its camera "in") or makes while it holds (role hold, its camera "during"), from list_camera_moves. The move is checked first: an id of the wrong role, an unknown preset or values outside its controls are refused with the moves or presets that fit. A shot with no camera gets one that keeps the framing; set the framing itself with update_shot. One undo step. Returns { shot, camera (the shot's camera now), window: { start, end } (ms when the move plays), notes }. The first shot cuts to its framing, so its transition does not play. A hold move plays across the shot's hold: lengthen it with update_shot (hold) for a slower move.`,
+      inputSchema: {
+        type: "object",
+        properties: {
+          shot: { type: "string", minLength: 1, description: "A shot id from get_animation." },
+          role: ROLE,
+          move: { type: "string", minLength: 1, description: "A camera move id of that role from list_camera_moves." },
+          ms: { type: "number", minimum: 0, maximum: CAMERA_MOVE_MAX_MS, description: `How long a transition takes, ms (0\u2013${CAMERA_MOVE_MAX_MS}; default the move's durationMs). Not for a hold, which plays across the shot's hold.` },
+          preset: { type: "string", minLength: 1, description: "A preset of the move by name, from describe_effect; its values are written out on the shot." },
+          values: ctx.valuesSchema("Control values over the move's defaults (and the preset's), from describe_effect")
+        },
+        required: ["shot", "role", "move"],
+        additionalProperties: false
+      },
+      annotations: { title: "Set a shot's camera move", ...ctx.annotations.writeIdempotent },
+      handler: async (args) => {
+        ctx.requireProvider();
+        const spec = { move: args.move, ...args.ms !== void 0 ? { ms: args.ms } : {}, ...args.preset !== void 0 ? { preset: args.preset } : {}, ...args.values !== void 0 ? { values: args.values } : {} };
+        return done(await controller.setShotCameraMove(args.shot, args.role, spec));
+      }
+    },
+    {
+      name: "clear_shot_camera_move",
+      title: "Clear a shot's camera move",
+      description: `Removes a shot's camera move for a role (transition: its camera "in"; hold: its camera "during"), keeping its framing; the camera then eases into the shot, or stays still while it holds. Works without a provider. One undo step. Returns { shot, camera (null when the shot has none left), notes }.`,
+      inputSchema: {
+        type: "object",
+        properties: { shot: { type: "string", minLength: 1, description: "A shot id from get_animation." }, role: ROLE },
+        required: ["shot", "role"],
+        additionalProperties: false
+      },
+      annotations: { title: "Clear a shot's camera move", ...ctx.annotations.destructive },
+      handler: async (args) => done(controller.clearShotCameraMove(args.shot, args.role))
+    }
+  ];
+}
+
 // src/animation-editor/effect-tools.ts
 var info = (e) => ({ id: e.instance, effect: e.effect, ...e.name ? { name: e.name } : {}, ...e.provider ? { provider: e.provider } : {}, role: e.kind === "vector" ? "vector picture" : "motion", enabled: true, values: e.values, targets: e.targets, shots: e.shots });
 function createAnimationEffectsToolProvider(controller, options = {}) {
@@ -5864,7 +6237,7 @@ function createAnimationEffectsToolProvider(controller, options = {}) {
     if (ro) return typeof ro === "string" ? ro : "The animation is read-only.";
     return controller.readOnlyReason();
   };
-  const done = (r, target) => {
+  const done2 = (r, target) => {
     if (!r.ok) throw new Error(r.error);
     return { target, effect: info(r.effect), effects: controller.appliedEffects().filter((e) => e.targets.includes(target)).map(info), ...r.notes.length ? { notes: r.notes } : {} };
   };
@@ -5891,16 +6264,17 @@ function createAnimationEffectsToolProvider(controller, options = {}) {
     },
     apply: async (target, effect, args) => {
       if (args.index !== void 0 || args.opacity !== void 0 || args.enabled === false) throw new Error("index, opacity and enabled do not apply to motion effects; the effect becomes commands in a new shot.");
-      return done(await controller.applyMotionEffect(effect, [target], { values: args.values }), target);
+      return done2(await controller.applyMotionEffect(effect, [target], { values: args.values }), target);
     },
     update: async (target, instance, changes) => {
       const extra = ["enabled", "opacity", "index"].filter((k) => changes[k] !== void 0);
       if (extra.length) throw new Error(`A motion effect only takes values; ${extra.join(", ")} do not apply (move or delete its commands with edit_animation).`);
-      return done(await controller.updateMotionEffect(instance, changes.values ?? {}), target);
+      return done2(await controller.updateMotionEffect(instance, changes.values ?? {}), target);
     },
-    remove: async (target, instance) => done(controller.removeMotionEffect(instance), target),
+    remove: async (target, instance) => done2(controller.removeMotionEffect(instance), target),
     subscribe: (notify) => controller.subscribe(() => notify()),
     extraTools: (ctx) => [
+      ...animationCameraMoveTools(controller, ctx),
       {
         name: "add_vector_effect",
         title: "Add a vector effect",
@@ -6003,9 +6377,11 @@ export {
   MOTION_TRIGGERS,
   MotionSceneFormatError,
   activeSegment,
+  animationCameraMoveTools,
   applyMotionControlValues,
   applyMotionDrivers,
   applyMotionEdits,
+  checkMotionCameraMoves,
   checkMotionScene,
   clipsShapeProblems,
   commandShapeProblems,
@@ -6019,6 +6395,7 @@ export {
   describeMotionShots,
   driversShapeProblems,
   duplicateMotionCommandEdit,
+  effectsPlayCamera,
   fitMotionRect,
   fitMotionScene,
   fitMotionSceneEdits,
@@ -6042,6 +6419,13 @@ export {
   motionBeatAt,
   motionBeatTime,
   motionBlurTimes,
+  motionCameraBox,
+  motionCameraFramed,
+  motionCameraMoves,
+  motionCameraStage,
+  motionCameraTransform,
+  motionCameraViewAt,
+  motionCameraWindows,
   motionCascade,
   motionClientToDocument,
   motionClipAttrs,
@@ -6093,6 +6477,7 @@ export {
   motionSceneShapeProblems,
   motionSceneToJson,
   motionShotAt,
+  motionShotCameraMove,
   motionShotCueTime,
   motionShotTimeScale,
   motionStageSvg,
@@ -6123,6 +6508,7 @@ export {
   toLottie,
   trackValue,
   withAnimationPlayback,
+  withCameraViewEffects,
   withMotionLayers,
   withViewBox,
   withoutMotionEffect