@pixerate/editor 0.144.0 → 0.145.0

package/dist/animation-editor/index.js

@@ -68,7 +68,7 @@ import {
 } from "../chunk-DS4WGCLJ.js";
 import {
   AnimationPlayer
-} from "../chunk-I4T4J27S.js";
+} from "../chunk-QX25HWFL.js";
 import {
   ANIMATION_EASING_LABELS,
   ANIMATION_EASING_PRESETS,
@@ -188,7 +188,7 @@ var COMMAND_KEYS = {
   enter: [...BASE_KEYS, ...DRAW_ORDER_KEYS, "style", "direction", "distance", "scale", "shape", "orientation"],
   exit: [...BASE_KEYS, ...DRAW_ORDER_KEYS, "style", "direction", "distance"],
   draw: [...BASE_KEYS, ...DRAW_ORDER_KEYS, "from", "to", "comet"],
-  move: [...BASE_KEYS, "by", "to", "via", "pacing", "blend"],
+  move: [...BASE_KEYS, "by", "to", "via", "pacing", "times", "blend"],
   rotate: [...BASE_KEYS, "by", "to", "blend"],
   scale: [...BASE_KEYS, "to", "geometric", "blend"],
   fade: [...BASE_KEYS, "to"],
@@ -292,6 +292,13 @@ function commandShapeProblems(command3, where) {
       if (command3.via !== void 0 && !(Array.isArray(command3.via) && command3.via.length > 0 && command3.via.length <= 64 && command3.via.every(isPoint))) p(`"via" must be a list of 1 to 64 points { "x": number, "y": number } (document units).`);
       if (command3.pacing !== void 0 && command3.pacing !== "even" && command3.pacing !== "equal") p(`"pacing" must be "even" (steady speed) or "equal" (each leg the same time).`);
       if (command3.pacing !== void 0 && command3.via === void 0) p(`"pacing" goes with "via".`);
+      if (command3.times !== void 0) {
+        const times = command3.times;
+        const via = Array.isArray(command3.via) ? command3.via.length : null;
+        if (command3.via === void 0) p(`"times" goes with "via".`);
+        else if (!(Array.isArray(times) && times.length === via && times.every((t, i) => isNum(t) && t > 0 && t < 1 && (i === 0 || t > times[i - 1]))))
+          p(`"times" must be ${via ?? "one per waypoint"} rising fractions of the duration between 0 and 1 (one per "via" point).`);
+      }
       break;
     case "rotate":
       if (command3.by === void 0 && command3.to === void 0) p(`give "by" or "to" (degrees).`);
@@ -887,8 +894,8 @@ function motionShotTimeScale(shot) {
 function motionBeatTime(grid, beat) {
   return (grid.offset ?? 0) + beat * 6e4 / grid.bpm;
 }
-function motionBeatAt(grid, ms) {
-  const beat = (ms - (grid.offset ?? 0)) * grid.bpm / 6e4;
+function motionBeatAt(grid, ms2) {
+  const beat = (ms2 - (grid.offset ?? 0)) * grid.bpm / 6e4;
   const meter = Math.max(1, Math.round(grid.meter ?? 4));
   const whole = Math.floor(beat + 1e-9);
   return { beat, bar: Math.floor(whole / meter) + 1, beatInBar: (whole % meter + meter) % meter + 1 };
@@ -982,8 +989,8 @@ function motionCycleDuration(command3, scene, target) {
   if (command3.type === "draw" || command3.type === "enter" && command3.style === "draw" || command3.type === "exit" && command3.style === "undraw") {
     const entry = target ? indexMotionNodes(scene.artwork.nodes).get(target) : void 0;
     const length = entry ? motionPathLength(entry.node) : 0;
-    const ms = length * MOTION_DRAW_MS_PER_UNIT;
-    return Math.round(Math.min(MOTION_DRAW_RANGE[1], Math.max(MOTION_DRAW_RANGE[0], ms)));
+    const ms2 = length * MOTION_DRAW_MS_PER_UNIT;
+    return Math.round(Math.min(MOTION_DRAW_RANGE[1], Math.max(MOTION_DRAW_RANGE[0], ms2)));
   }
   if (command3.type === "move" && command3.via?.length) return MOTION_DEFAULT_DURATIONS.move + 400 * command3.via.length;
   return MOTION_DEFAULT_DURATIONS[command3.type];
@@ -1014,9 +1021,9 @@ function compileMotionScene(scene) {
     if (shot.camera) {
       const rect = resolveMotionCamera(shot.camera, scene);
       if (rect && rect.width > 0 && rect.height > 0) {
-        const ms = index === 0 ? 0 : (shot.camera.ms ?? MOTION_CAMERA_MS) * f;
-        cameraMoves.push({ shot: shot.id, start, end: start + ms, to: rect, ease: shot.camera.ease ?? MOTION_EASE_IN_OUT, geometric: shot.camera.geometric === true });
-        cursor = start + ms;
+        const ms2 = index === 0 ? 0 : (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;
       }
     }
     const commandsStart = cursor;
@@ -1256,7 +1263,7 @@ function compileMotionScene(scene) {
           const y0 = num2("y");
           const add = command3.blend === "add";
           const offsets = [{ x: 0, y: 0 }, ...command3.via.map((p) => applyMatrix(inv, p)).map((p) => ({ x: p.x - entry.center.x - x0, y: p.y - entry.center.y - y0 })), { x: dx, y: dy }];
-          const times = smoothMotionTimes(offsets, start, end - start, command3.pacing ?? "even");
+          const times = command3.times?.length === command3.via.length ? [start, ...command3.times.map((f) => start + f * (end - start)), end] : smoothMotionTimes(offsets, start, end - start, command3.pacing ?? "even");
           for (const axis of ["x", "y"]) {
             const base = add ? 0 : axis === "x" ? x0 : y0;
             for (const leg of smoothMotionLegs(times, offsets.map((o) => o[axis])))
@@ -2255,8 +2262,8 @@ function createMotionScene(artwork, init = {}) {
 
 // src/animation-editor/fit.ts
 var MOTION_SPEED_RANGE = [0.05, 20];
-function fitMotionScene(scene, ms, options = {}) {
-  if (!(Number.isFinite(ms) && ms > 0)) throw new Error("Give the length to fit as a number of milliseconds above 0.");
+function fitMotionScene(scene, ms2, options = {}) {
+  if (!(Number.isFinite(ms2) && ms2 > 0)) throw new Error("Give the length to fit as a number of milliseconds above 0.");
   const ids = scene.shots.map((s) => s.id);
   const keep = new Set(options.keep ?? []);
   for (const id of keep) if (!ids.includes(id)) throw new Error(`There is no shot ${namedWithSuggestion(id, ids)} to keep.`);
@@ -2265,14 +2272,14 @@ function fitMotionScene(scene, ms, options = {}) {
   let rest = 0;
   timeline.shots.forEach((t) => keep.has(t.id) ? kept += t.end - t.start : rest += t.end - t.start);
   if (rest <= 0) throw new Error(keep.size ? "Every shot is kept, so nothing can change pace; keep fewer shots." : "The scene has no length to fit; add shots first.");
-  if (ms <= kept) throw new Error(`The kept shots alone last ${Math.round(kept)} ms, so the scene cannot fit ${Math.round(ms)} ms; keep fewer shots or give at least ${Math.ceil(kept) + 1} ms.`);
-  const k = (ms - kept) / rest;
+  if (ms2 <= kept) throw new Error(`The kept shots alone last ${Math.round(kept)} ms, so the scene cannot fit ${Math.round(ms2)} ms; keep fewer shots or give at least ${Math.ceil(kept) + 1} ms.`);
+  const k = (ms2 - kept) / rest;
   const speeds = {};
   const shots = scene.shots.map((shot) => {
     if (keep.has(shot.id)) return shot;
     const speed = Math.round((shot.speed ?? 1) / k * 1e4) / 1e4;
     if (speed < MOTION_SPEED_RANGE[0] || speed > MOTION_SPEED_RANGE[1])
-      throw new Error(`Fitting ${Math.round(ms)} ms would play shot "${shot.id}" at ${speed}\xD7 (speeds run ${MOTION_SPEED_RANGE[0]}\u2013${MOTION_SPEED_RANGE[1]}); aim nearer the current ${Math.round(timeline.duration)} ms.`);
+      throw new Error(`Fitting ${Math.round(ms2)} ms would play shot "${shot.id}" at ${speed}\xD7 (speeds run ${MOTION_SPEED_RANGE[0]}\u2013${MOTION_SPEED_RANGE[1]}); aim nearer the current ${Math.round(timeline.duration)} ms.`);
     speeds[shot.id] = speed;
     const { speed: _old, ...rest2 } = shot;
     return speed === 1 ? rest2 : { ...rest2, speed };
@@ -2281,6 +2288,214 @@ function fitMotionScene(scene, ms, options = {}) {
   return { scene: fitted, duration: compileMotionScene(fitted).duration, speeds };
 }
 
+// src/animation-editor/record.ts
+var TOLERANCE = { move: 1, scale: 0.01, rotation: 0.5, opacity: 0.01, strokeWidth: 0.25 };
+var COLOR_GAP = 80;
+var MAX_VIA = 64;
+function motionNodePose(scene, id, time) {
+  const entry = indexMotionNodes(scene.artwork.nodes).get(id);
+  if (!entry) throw new Error(`There is no element ${namedWithSuggestion(id, [...indexMotionNodes(scene.artwork.nodes).keys()])} in the artwork.`);
+  const timeline = compileMotionScene(scene);
+  const drawn = indexMotionNodes(motionFrameAt(scene, time).document.nodes).get(id);
+  const centre = applyMatrix(entry.parentWorld, { x: entry.center.x + motionPropertyValue(timeline, id, "x", time), y: entry.center.y + motionPropertyValue(timeline, id, "y", time) });
+  const paint = (property) => trackValue(timeline.tracks.get(motionTrackKey(id, property)), time) ?? motionRestValue(entry, property, scene.artwork);
+  const fill = paint("fill");
+  const stroke = paint("stroke");
+  const width = paint("strokeWidth");
+  return {
+    x: centre.x,
+    y: centre.y,
+    scaleX: motionPropertyValue(timeline, id, "scaleX", time),
+    scaleY: motionPropertyValue(timeline, id, "scaleY", time),
+    rotation: motionPropertyValue(timeline, id, "rotation", time),
+    opacity: motionPropertyValue(timeline, id, "opacity", time),
+    ...typeof fill === "string" && fill !== "transparent" ? { fill } : {},
+    ...typeof stroke === "string" && stroke !== "transparent" ? { stroke } : {},
+    ...typeof width === "number" ? { strokeWidth: width } : {},
+    bounds: drawn?.bounds ?? null
+  };
+}
+function simplifyTimedSamples(times, values, tol) {
+  const n = times.length;
+  if (n <= 2) return [...Array(n).keys()];
+  const keep = new Uint8Array(n);
+  keep[0] = keep[n - 1] = 1;
+  const stack = [[0, n - 1]];
+  while (stack.length) {
+    const [a, b] = stack.pop();
+    let worst = -1;
+    let at = -1;
+    const span = times[b] - times[a];
+    for (let i = a + 1; i < b; i++) {
+      const u = span > 0 ? (times[i] - times[a]) / span : 0;
+      let e = 0;
+      for (let d = 0; d < values[i].length; d++) {
+        const v = values[a][d] + (values[b][d] - values[a][d]) * u;
+        e += (values[i][d] - v) ** 2;
+      }
+      if (e > worst) {
+        worst = e;
+        at = i;
+      }
+    }
+    if (at >= 0 && Math.sqrt(worst) > tol) {
+      keep[at] = 1;
+      stack.push([a, at], [at, b]);
+    }
+  }
+  const out = [];
+  keep.forEach((k, i) => k && out.push(i));
+  return out;
+}
+var round = (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 = [];
+  const nodes = indexMotionNodes(scene.artwork.nodes);
+  if (!Array.isArray(take.samples) || !take.samples.length) return ["Give at least one sample."];
+  const num2 = (v) => typeof v === "number" && Number.isFinite(v);
+  take.samples.forEach((s, i) => {
+    const where = `Sample ${i + 1}`;
+    if (!s || typeof s !== "object") return problems.push(`${where} must be an object.`);
+    if (typeof s.node !== "string" || !nodes.has(s.node)) problems.push(`${where}: the artwork has no element ${namedWithSuggestion(String(s.node), [...nodes.keys()])}; get_animation lists the element ids.`);
+    if (!num2(s.t) || s.t < 0) problems.push(`${where}: "t" must be ms from the start of the take, \u2265 0.`);
+    if (s.x === void 0 !== (s.y === void 0)) problems.push(`${where}: give "x" and "y" together (the centre, document units).`);
+    for (const k of ["x", "y", "scaleX", "scaleY", "rotation", "opacity", "strokeWidth"]) if (s[k] !== void 0 && !num2(s[k])) problems.push(`${where}: "${k}" must be a number.`);
+    if (s.opacity !== void 0 && num2(s.opacity) && (s.opacity < 0 || s.opacity > 1)) problems.push(`${where}: "opacity" must be from 0 to 1.`);
+    if (s.strokeWidth !== void 0 && num2(s.strokeWidth) && s.strokeWidth < 0) problems.push(`${where}: "strokeWidth" must be \u2265 0.`);
+    for (const k of ["fill", "stroke"]) if (s[k] !== void 0 && (typeof s[k] !== "string" || normalizeTokenColor(s[k]) === null)) problems.push(`${where}: "${k}" must be a colour such as "#0ea5e9".`);
+    if (["x", "scaleX", "scaleY", "rotation", "opacity", "fill", "stroke", "strokeWidth"].every((k) => s[k] === void 0)) problems.push(`${where} records nothing; give at least one of x and y, scaleX, scaleY, rotation, opacity, fill, stroke, strokeWidth.`);
+  });
+  if (take.length !== void 0 && !(num2(take.length) && take.length >= 0)) problems.push('"length" must be ms \u2265 0.');
+  return problems;
+}
+function channelSamples(samples, pick) {
+  const out = [];
+  for (const s of samples) {
+    const v = pick(s);
+    if (v === void 0) continue;
+    if (out.length && Math.abs(out[out.length - 1].t - s.t) < 0.5) out[out.length - 1] = { t: s.t, v };
+    else out.push({ t: s.t, v });
+  }
+  return out;
+}
+function channelCommands(node, channel, pose, samples, tol, kept) {
+  const targets = [node];
+  const out = [];
+  if (channel === "fill" || channel === "stroke") {
+    const list2 = channelSamples(samples, (s) => s[channel] !== void 0 ? normalizeTokenColor(s[channel]) ?? void 0 : void 0);
+    let last = pose[channel] ? normalizeTokenColor(pose[channel]) : null;
+    let lastT = -Infinity;
+    list2.forEach((s, i) => {
+      const final = i === list2.length - 1;
+      if (s.v === last || !final && s.t - lastT < COLOR_GAP) return;
+      const duration = lastT === -Infinity ? 0 : s.t - lastT;
+      out.push({ start: s.t - duration, command: { type: "style", targets, [channel]: s.v, duration: ms(duration), ease: "linear" } });
+      kept.n++;
+      last = s.v;
+      lastT = s.t;
+    });
+    return out;
+  }
+  const pick = channel === "move" ? (s) => s.x !== void 0 && s.y !== void 0 ? [s.x, s.y] : void 0 : channel === "scale" ? (s) => s.scaleX !== void 0 || s.scaleY !== void 0 ? [s.scaleX ?? s.scaleY, s.scaleY ?? s.scaleX] : void 0 : (s) => s[channel] !== void 0 ? [s[channel]] : void 0;
+  const list = channelSamples(samples, pick);
+  if (!list.length) return out;
+  const rest = channel === "move" ? [pose.x, pose.y] : channel === "scale" ? [pose.scaleX, pose.scaleY] : [pose[channel] ?? (channel === "strokeWidth" ? 1 : 0)];
+  const limit = TOLERANCE[channel] * tol;
+  const differs = (a, b) => Math.hypot(...a.map((v, d) => v - b[d])) > limit;
+  const make = (to, duration, ease, extra = {}) => {
+    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]) } };
+      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) } };
+      case "rotation":
+        return { type: "rotate", ...base, to: round(to[0]) };
+      case "opacity":
+        return { type: "fade", ...base, to: round(to[0], 4) };
+      default:
+        return { type: "style", ...base, strokeWidth: round(to[0]) };
+    }
+  };
+  if (differs(list[0].v, rest)) {
+    out.push({ start: list[0].t, command: make(list[0].v, 0, "linear") });
+    kept.n++;
+  }
+  if (list.length < 2) return out;
+  const times = list.map((s) => s.t);
+  const values = list.map((s) => s.v);
+  let factor = 1;
+  let keep = simplifyTimedSamples(times, values, limit);
+  if (channel === "move") {
+    while (keep.length - 2 > MAX_VIA) keep = simplifyTimedSamples(times, values, limit * (factor *= 1.5));
+    const first = list[keep[0]];
+    const end = list[keep[keep.length - 1]];
+    if (!keep.some((k) => differs(values[k], first.v))) return out;
+    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);
+      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) } : {};
+    out.push({ start: first.t, command: make(end.v, span, "linear", extra) });
+    kept.n += via.length + 2;
+    return out;
+  }
+  const kt = keep.map((k) => times[k]);
+  const legs = values[0].map((_, d) => smoothMotionLegs(kt, keep.map((k) => values[k][d])));
+  for (let i = 0; i + 1 < keep.length; i++) {
+    const a = values[keep[i]];
+    const b = values[keep[i + 1]];
+    if (!differs(a, b)) continue;
+    const lead = a.length > 1 && Math.abs(b[1] - a[1]) > Math.abs(b[0] - a[0]) ? 1 : 0;
+    const leg = legs[lead][i];
+    out.push({ start: leg.start, command: make(b, leg.end - leg.start, leg.ease) });
+    kept.n++;
+  }
+  return out;
+}
+function motionTakeShot(scene, take, options = {}) {
+  const problems = motionTakeProblems(scene, take);
+  if (problems.length) throw new Error(problems.join(" "));
+  const tol = options.tolerance !== void 0 && options.tolerance > 0 ? options.tolerance : 1;
+  const at = options.at ?? scene.shots.length;
+  if (!Number.isInteger(at) || at < 0 || at > scene.shots.length) throw new Error(`"at" must be a whole number from 0 to ${scene.shots.length} (got ${at}).`);
+  const timeline = compileMotionScene(scene);
+  const start = at < timeline.shots.length ? timeline.shots[at].start : timeline.duration;
+  const samples = [...take.samples].sort((a, b) => a.t - b.t);
+  const placed = [];
+  const kept = { n: 0 };
+  const byNode = /* @__PURE__ */ new Map();
+  for (const s of samples) byNode.set(s.node, [...byNode.get(s.node) ?? [], s]);
+  for (const [node, list] of byNode) {
+    const pose = motionNodePose(scene, node, start);
+    for (const channel of ["move", "scale", "rotation", "opacity", "strokeWidth", "fill", "stroke"]) placed.push(...channelCommands(node, channel, pose, list, tol, kept));
+  }
+  placed.sort((a, b) => a.start - b.start);
+  const run = [];
+  let prev = 0;
+  let end = 0;
+  placed.forEach((p, i) => {
+    const s = ms(p.start);
+    const delay = i === 0 ? s : s - prev;
+    run.push({ ...p.command, ...i > 0 ? { with: "previous" } : {}, ...delay > 0 ? { delay } : {} });
+    prev = s;
+    end = Math.max(end, s + (p.command.duration ?? 0));
+  });
+  const length = take.length ?? samples[samples.length - 1].t;
+  const shot = { id: options.id ?? freshShotId(scene, "take"), label: options.label ?? "Recorded take", run, hold: ms(Math.max(0, length - end)) };
+  if (!run.length) Object.assign(shot, { run: [{ type: "wait", duration: ms(Math.max(1, length)) }], hold: 0 });
+  return { shot, at, start, samples: { given: take.samples.length, kept: kept.n } };
+}
+function motionClientToDocument(camera, box, clientX, clientY) {
+  const k = Math.min(box.width / camera.width, box.height / camera.height) || 1;
+  const ox = box.left + (box.width - camera.width * k) / 2;
+  const oy = box.top + (box.height - camera.height * k) / 2;
+  return { x: camera.x + (clientX - ox) / k, y: camera.y + (clientY - oy) / k };
+}
+
 // src/animation-editor/flair.ts
 var FLAIR_EASES = {
   linear: (t) => t,
@@ -2327,7 +2542,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(round2);
+  const writeEase = (ease) => typeof ease === "string" || "spring" in ease ? ease : ease.map(round3);
   const easeOf2 = (segment) => {
     const resolved = resolveEasing(segment.ease);
     if (resolved !== "hold" && resolved.type === "spring") {
@@ -2340,8 +2555,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 round2 = (n) => Math.round(n * 10 ** precision) / 10 ** precision;
-  const f = (n) => String(round2(n));
+  const round3 = (n) => Math.round(n * 10 ** precision) / 10 ** precision;
+  const f = (n) => String(round3(n));
   const timeline = compileMotionScene(scene);
   const nodes = indexMotionNodes(scene.artwork.nodes);
   const notes = [];
@@ -2407,7 +2622,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) => round2(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) => round3(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) {
@@ -2440,11 +2655,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) => round2(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) => round3(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) => round2(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) => round3(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) => round2(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) => round3(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);
@@ -2470,16 +2685,16 @@ 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(round2) });
+  if (camera.length) channels.push({ id: "", kind: "view", segments: [...camera], exact: () => true, overshoot: true, value: (t) => trackValue(camera, t).map(round3) });
   const animate = [];
   let sampled = 0;
   const same = (a, b) => JSON.stringify(a) === JSON.stringify(b);
-  const emit = (channel, delay, ms, from, to, ease, segment) => {
+  const emit = (channel, delay, ms2, from, to, ease, segment) => {
     const written = writeEase(ease);
     const base = {
       ...channel.id ? { id: channel.id } : {},
-      ...delay > 0 ? { delay: round2(delay) } : {},
-      ms: round2(ms),
+      ...delay > 0 ? { delay: round3(delay) } : {},
+      ms: round3(ms2),
       ease: written,
       ...segment?.behavior ? { behavior: segment.behavior } : {},
       ...segment?.steps ? { strobe: segment.steps } : {}
@@ -2533,11 +2748,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) => round2(Math.min(1, Math.max(0, Number(segmentValue(seg, t)))));
+      const progress = (t) => round3(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: round2(seg.start) } : {}, ms: round2(seg.end - seg.start), ease: writeEase(curve), ...seg.steps ? { strobe: seg.steps } : {}, at: [round2(ends[0]), round2(ends[1])] });
+        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])] });
         continue;
       }
       const until = Math.min(seg.end, ...starts.filter((t) => t > seg.start));
@@ -2545,7 +2760,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: round2(t0) } : {}, ms: round2(t1 - t0), ease: "linear", at: [progress(t0), progress(t1)] });
+        animate.push({ ...along, ...t0 > 0 ? { delay: round3(t0) } : {}, ms: round3(t1 - t0), ease: "linear", at: [progress(t0), progress(t1)] });
         sampled++;
       }
     }
@@ -2560,7 +2775,7 @@ function toFlairSvgMotion(scene, options = {}) {
       timeline.shots.forEach((shot, i) => {
         if (shot.start <= at + 1e-6) step = i;
       });
-      const delay = round2(at - timeline.shots[step].start);
+      const delay = round3(at - timeline.shots[step].start);
       delete a.delay;
       if (delay > 0) a.delay = delay;
       a.step = step + 1;
@@ -2580,7 +2795,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, round2(timeline.duration - lastChange)), sampled, notes: [...new Set(notes)], ...trigger ? { trigger } : {} };
+  return { motion, duration: timeline.duration, hold: Math.max(0, round3(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 = {}) {
@@ -2769,10 +2984,10 @@ function fromFlairSvgMotion(input, options = {}) {
           notes.push(`Step ${step}: a camera move ${camera ? "after the first" : `${anim.delay} ms in`} was dropped; a shot frames the camera once, at its start.`);
           continue;
         }
-        const ms = anim.ms ?? 800;
+        const ms2 = anim.ms ?? 800;
         const ease = easingOf(anim.ease, MOTION_EASE_IN_OUT);
-        camera = typeof anim.view === "string" ? { frame: anim.view, padding: 0, ms, ease } : { x: anim.view[0], y: anim.view[1], width: anim.view[2], height: anim.view[3], ms, ease };
-        cameraMs = index === 0 ? 0 : ms;
+        camera = typeof anim.view === "string" ? { frame: anim.view, padding: 0, ms: ms2, ease } : { x: anim.view[0], y: anim.view[1], width: anim.view[2], height: anim.view[3], ms: ms2, ease };
+        cameraMs = index === 0 ? 0 : ms2;
         continue;
       }
       if (!anim.id) continue;
@@ -2826,7 +3041,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, round2) {
+function lottieContours(path, round3) {
   const out = [];
   let cur = null;
   let px = 0;
@@ -2867,7 +3082,7 @@ function lottieContours(path, round2) {
     }
   }
   if (cur) out.push(cur);
-  return out.map((c) => ({ c: c.c, v: c.v.map((p) => p.map(round2)), i: c.i.map((p) => p.map(round2)), o: c.o.map((p) => p.map(round2)) }));
+  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)) }));
 }
 function staticParts(m) {
   const sx = Math.hypot(m[0], m[1]);
@@ -2879,8 +3094,8 @@ function staticParts(m) {
 function toLottie(scene, options = {}) {
   const fps = options.fps ?? scene.fps ?? 30;
   const precision = options.precision ?? 3;
-  const round2 = (n) => Math.round(n * 10 ** precision) / 10 ** precision;
-  const frame = (ms) => round2(ms * fps / 1e3);
+  const round3 = (n) => Math.round(n * 10 ** precision) / 10 ** precision;
+  const frame = (ms2) => round3(ms2 * fps / 1e3);
   const timeline = compileMotionScene(scene);
   const nodes = indexMotionNodes(scene.artwork.nodes);
   const notes = [];
@@ -2897,16 +3112,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(round2);
+    const rest = value(0).map(round3);
     if (!segments.length) return { a: 0, k: rest.length === 1 ? rest[0] : rest };
     const keys = [];
     const key = (t, v, ease) => {
-      const k = { t: frame(t), s: v.map(round2) };
+      const k = { t: frame(t), s: v.map(round3) };
       if (ease === "hold") k.h = 1;
       else {
         const [x1, y1, x2, y2] = ease === "linear" || !ease ? [0, 0, 1, 1] : ease;
-        k.o = { x: [round2(x1)], y: [round2(y1)] };
-        k.i = { x: [round2(x2)], y: [round2(y2)] };
+        k.o = { x: [round3(x1)], y: [round3(y1)] };
+        k.i = { x: [round3(x2)], y: [round3(y2)] };
       }
       if (keys.length && keys[keys.length - 1].t === k.t) keys[keys.length - 1] = k;
       else keys.push(k);
@@ -2954,7 +3169,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(round2);
+    const c = [entry.center.x, entry.center.y].map(round3);
     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;
@@ -2965,7 +3180,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(round2) };
+      if (tr.p.a === 0) tr.p = { a: 0, k: poseAt(entry, 0).p.map(round3) };
     }
     const opacitySources = motionDriverSources(timeline, id, ["opacity"]);
     if (opacitySources.length) {
@@ -2974,7 +3189,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: round2(rest * 100) };
+    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) };
     return tr;
   };
   const owner = (path, p) => {
@@ -2996,7 +3211,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)), round2);
+    const rest = lottieContours(toBezierPath(geometryAt(0)), round3);
     rest.forEach((contour, n) => {
       let ks = { a: 0, k: contour };
       if (shapeSegments.length) {
@@ -3005,7 +3220,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)), round2)[n];
+          const c = lottieContours(toBezierPath(geometryAt(t)), round3)[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] } } : {} });
         }
@@ -3034,9 +3249,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(round2) },
+        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) },
         o: { a: 0, k: 100 },
-        w: widthFrom ? animate(track(widthFrom, "strokeWidth"), (t) => [Math.max(0, Number(trackValue(track(widthFrom, "strokeWidth"), t) ?? path.strokeWidth ?? 1))]) : { a: 0, k: round2(path.strokeWidth ?? 1) },
+        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) },
         lc: path.strokeLinecap === "round" ? 2 : path.strokeLinecap === "square" ? 3 : 1,
         lj: path.strokeLinejoin === "round" ? 2 : path.strokeLinejoin === "bevel" ? 3 : 1,
         ml: 4
@@ -3051,7 +3266,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(round2) },
+        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) },
         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
       });
@@ -3077,9 +3292,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(round2) };
-          innerTr.s = { a: 0, k: parts.s.map(round2) };
-          innerTr.r = { a: 0, k: round2(parts.r) };
+          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) };
         }
       }
     }
@@ -3089,7 +3304,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(round2) }, 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(round3) }, o: { a: 0, k: 100 }, r: 1 }, STATIC_TR()] });
   const camera = track("", "camera");
   const root = STATIC_TR();
   if (camera.length) {
@@ -3597,6 +3812,8 @@ function withoutMotionEffect(scene, instance) {
 }
 
 // src/animation-editor/controller.ts
+var MOTION_RECORD_GESTURE_MODES = ["move", "scale", "rotate"];
+var MOTION_MAX_TAKE_MS = 10 * 6e4;
 var BLANK = { width: 800, height: 450, background: "#ffffff", nodes: [] };
 var AnimationEditorController = class {
   history;
@@ -3614,6 +3831,7 @@ var AnimationEditorController = class {
   listeners = /* @__PURE__ */ new Set();
   unsubscribers = [];
   state;
+  recording = null;
   constructor(options = {}) {
     this.history = options.history ?? new HistoryManager();
     this.scene = options.scene ? parseMotionScene(options.scene) : createMotionScene(BLANK);
@@ -3640,6 +3858,7 @@ var AnimationEditorController = class {
    * controller survives React StrictMode's unmount / remount.
    */
   destroy() {
+    this.cancelRecording();
     this.player.pause();
     this.unsubscribers.splice(0).forEach((u) => u());
   }
@@ -3676,7 +3895,15 @@ var AnimationEditorController = class {
       undoLabel: h.undoName,
       redoLabel: h.redoName,
       revision: this.revision,
-      effectsProvider: this.effects.provider
+      effectsProvider: this.effects.provider,
+      recording: this.recording ? {
+        shot: this.recording.options.id,
+        at: this.recording.options.at,
+        start: this.recording.start,
+        elapsed: Math.max(0, p.time - this.recording.start),
+        samples: this.recording.samples.length,
+        gesture: this.recording.gesture ? { node: this.recording.gesture.node, mode: this.recording.gesture.mode } : null
+      } : null
     };
   }
   notify() {
@@ -3740,7 +3967,7 @@ var AnimationEditorController = class {
    * `dryRun` it reports what would happen and changes nothing.
    */
   apply(edits, label = "Edit animation", options = {}) {
-    const reason = this.readOnlyReason();
+    const reason = this.readOnlyReason() ?? (this.recording ? "A take is being recorded; stop or cancel the recording first." : null);
     if (reason) return this.refuse(reason);
     const result = applyMotionEdits(this.scene, edits);
     if (!result.ok) return options.dryRun ? result : this.refuse(result.error);
@@ -3895,6 +4122,7 @@ var AnimationEditorController = class {
   }
   /** 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();
     let parsed;
     try {
       parsed = parseMotionScene(scene);
@@ -3914,6 +4142,7 @@ var AnimationEditorController = class {
   setReadOnly(readOnly) {
     if (this.readOnly === readOnly) return;
     this.readOnly = readOnly;
+    if (readOnly) this.cancelRecording();
     this.notify();
   }
   /** Selects a shot (and optionally a command in it); `null` clears. Unknown shots clear. */
@@ -3933,30 +4162,186 @@ var AnimationEditorController = class {
   toggle() {
     this.player.toggle();
   }
-  /** Moves the playhead (ms). */
+  /** Moves the playhead (ms). Ignored while recording: a take runs on from where it started. */
   seek(time) {
+    if (this.recording) return;
     this.player.seek(time);
   }
   /** Moves the playhead to the start or end of a shot. Returns false for an unknown shot. */
   seekShot(id, at = "start") {
     const shot = compileMotionScene(this.scene).shots.find((s) => s.id === id);
-    if (!shot) return false;
+    if (!shot || this.recording) return false;
     this.player.seek(at === "start" ? shot.start : shot.end);
     return true;
   }
   undo() {
-    return this.history.undo();
+    return this.recording ? false : this.history.undo();
   }
   redo() {
-    return this.history.redo();
+    return this.recording ? false : this.history.redo();
+  }
+  /** The scene as shown: while recording, with the take so far as its shot. */
+  viewScene() {
+    const r = this.recording;
+    if (!r) return this.scene;
+    if (r.preview?.count === r.samples.length) return r.preview.scene;
+    let scene = this.scene;
+    if (r.samples.length) {
+      try {
+        const { shot, at } = motionTakeShot(this.scene, { samples: r.samples, length: Math.max(0, this.player.currentTime - r.start) }, r.options);
+        scene = { ...this.scene, shots: [...this.scene.shots.slice(0, at), shot, ...this.scene.shots.slice(at)] };
+      } catch {
+      }
+    }
+    r.preview = { count: r.samples.length, scene };
+    return scene;
   }
   /** The scene at `time` (default: the playhead). */
   frame(time = this.player.currentTime, options = {}) {
-    return motionFrameAt(this.scene, time, options);
+    return motionFrameAt(this.viewScene(), time, options);
   }
   /** The scene at `time` (default: the playhead) as SVG. */
   toSvg(time = this.player.currentTime, options = {}) {
-    return motionStageSvg(this.scene, time, options);
+    return motionStageSvg(this.viewScene(), time, options);
+  }
+  // ---------------------------------------------------------------------------------------
+  // Recording
+  // ---------------------------------------------------------------------------------------
+  /**
+   * Starts recording a take: the playhead goes to where the take's shot will start (default:
+   * the end of the scene) and plays on, and every `recordSample` (or stage gesture) is a value
+   * at that moment. Frames show the take so far. `stopRecording` turns it into one shot, one
+   * undo step. Edits, seeks and undo wait until the recording stops; `pause` pauses the take.
+   */
+  startRecording(options = {}) {
+    const reason = this.readOnlyReason() ?? (this.recording ? "A take is already being recorded." : null);
+    if (reason) return this.refuse(reason);
+    const at = options.at ?? this.scene.shots.length;
+    if (!Number.isInteger(at) || at < 0 || at > this.scene.shots.length) return this.refuse(`"at" must be a whole number from 0 to ${this.scene.shots.length} (got ${at}).`);
+    const id = options.id ?? freshShotId(this.scene, "take");
+    if (this.scene.shots.some((s) => s.id === id)) return this.refuse(`Shot id "${id}" is already used; choose another (e.g. "${freshShotId(this.scene, id)}").`);
+    const timeline = compileMotionScene(this.scene);
+    const start = at < timeline.shots.length ? timeline.shots[at].start : timeline.duration;
+    this.error = null;
+    this.recording = { options: { ...options, id, at }, start, samples: [], gesture: null, preview: null, restore: { loop: this.player.getState().loop } };
+    this.player.pause();
+    this.player.setPlaybackRate(1);
+    this.player.setLoop("none");
+    this.player.setDuration(start + MOTION_MAX_TAKE_MS);
+    this.player.seek(start);
+    this.player.play();
+    return { ok: true, recording: this.state.recording };
+  }
+  /**
+   * Records `values` for `node` at `t` (ms into the take; default now). Returns why a sample was
+   * refused (an unknown node, a value out of range), or null.
+   */
+  recordSample(node, values, t) {
+    const r = this.recording;
+    if (!r) return "Nothing is being recorded; startRecording first.";
+    const sample = { ...values, node, t: Math.max(0, t ?? this.player.liveTime - r.start) };
+    const problems = motionTakeProblems(this.scene, { samples: [sample] });
+    if (problems.length) return problems.join(" ").replace("Sample 1", "The sample");
+    r.samples.push(sample);
+    this.notify();
+    return null;
+  }
+  /** Where `node` is and how it looks now (while recording: in the take so far), or at `time`. */
+  pose(node, time = this.player.currentTime) {
+    return motionNodePose(this.viewScene(), node, time);
+  }
+  /** A point on a stage element (client pixels, e.g. a pointer event) in document units, through the camera now. */
+  clientToDocument(box, clientX, clientY) {
+    return motionClientToDocument(this.frame().camera, box, clientX, clientY);
+  }
+  /**
+   * Starts a stage drag while recording: from `point` (document units), `move` drags the node,
+   * `scale` scales it about its centre by how much nearer or farther the pointer is, and
+   * `rotate` turns it with the pointer. Returns false when not recording or `node` is unknown.
+   */
+  beginRecordGesture(node, mode, point) {
+    const r = this.recording;
+    if (!r || !indexMotionNodes(this.scene.artwork.nodes).has(node)) return false;
+    const pose = this.pose(node);
+    r.gesture = { node, mode, from: point, pose };
+    this.recordGesture(pose, point);
+    return true;
+  }
+  /** Records the drag's pose with the pointer at `point` (document units). */
+  updateRecordGesture(point) {
+    const g = this.recording?.gesture;
+    if (g) this.recordGesture(g.pose, point);
+  }
+  /** Ends the stage drag (the take keeps recording). */
+  endRecordGesture() {
+    const r = this.recording;
+    if (!r?.gesture) return;
+    r.gesture = null;
+    this.notify();
+  }
+  recordGesture(pose, point) {
+    const g = this.recording.gesture;
+    const c = { x: pose.x, y: pose.y };
+    if (g.mode === "move") {
+      this.recordSample(g.node, { x: pose.x + point.x - g.from.x, y: pose.y + point.y - g.from.y });
+    } else if (g.mode === "scale") {
+      const f = Math.hypot(point.x - c.x, point.y - c.y) / Math.max(1e-6, Math.hypot(g.from.x - c.x, g.from.y - c.y));
+      this.recordSample(g.node, { scaleX: Math.max(0.01, pose.scaleX * f), scaleY: Math.max(0.01, pose.scaleY * f) });
+    } else {
+      const turn = (Math.atan2(point.y - c.y, point.x - c.x) - Math.atan2(g.from.y - c.y, g.from.x - c.x)) * (180 / Math.PI);
+      const was = this.recording.samples.filter((s) => s.node === g.node && s.rotation !== void 0).at(-1)?.rotation ?? pose.rotation;
+      let next = pose.rotation + turn;
+      next += 360 * Math.round((was - next) / 360);
+      this.recordSample(g.node, { rotation: next });
+    }
+  }
+  endRecording() {
+    const r = this.recording;
+    if (!r) return null;
+    this.player.pause();
+    this.recording = null;
+    this.player.setLoop(r.restore.loop);
+    this.player.setDuration(() => compileMotionScene(this.scene).duration);
+    return r;
+  }
+  /**
+   * Stops recording and adds the take as a shot (one undo step), selected, with the playhead at
+   * its start. Returns the shot, or why nothing was added (nothing recorded).
+   */
+  stopRecording() {
+    const length = this.recording ? this.player.liveTime - this.recording.start : 0;
+    const r = this.endRecording();
+    if (!r) return this.refuse("Nothing is being recorded.");
+    if (!r.samples.length) {
+      this.player.seek(r.start);
+      return this.refuse("Nothing was recorded, so no shot was added: drag an element on the stage (or change its paint) while recording.");
+    }
+    const result = this.recordTake({ samples: r.samples, length }, r.options);
+    this.player.seek(r.start);
+    return result;
+  }
+  /** Stops recording and throws the take away. */
+  cancelRecording() {
+    const r = this.endRecording();
+    if (!r) return;
+    this.player.seek(r.start);
+    this.notify();
+  }
+  /**
+   * Adds a take given as samples (an agent's performance, or one recorded elsewhere) as a shot,
+   * one undo step, selected. With `dryRun` it returns the shot and changes nothing.
+   */
+  recordTake(take, options = {}) {
+    let made;
+    try {
+      made = motionTakeShot(this.scene, take, options);
+    } catch (error) {
+      return options.dryRun ? { ok: false, error: error.message } : this.refuse(error.message);
+    }
+    const result = this.apply({ op: "insert_shots", shots: [made.shot], at: made.at }, "Record take", { dryRun: options.dryRun });
+    if (!result.ok) return result;
+    if (!options.dryRun) this.select({ shot: made.shot.id });
+    return { ok: true, ...made, issues: result.issues };
   }
   /** The scene as a Flair `SvgMotion`. */
   toFlairMotion(options = {}) {
@@ -4111,7 +4496,7 @@ var MOTION_COMMAND_TYPE_SCHEMAS = {
     distance: { type: "number", description: "For slide: document units (default 40)." }
   }),
   draw: command2("draw", "Draws strokes on (or off) to a fraction of their length.", { ...DRAW_ORDER, comet: FRACTION("A travelling stroke this fraction of the length long: it runs along the path and off the end (leave out from and to)."), to: FRACTION("Fraction drawn at the end (default 1)."), from: FRACTION("Fraction drawn at the start (default: what is drawn now).") }),
-  move: command2("move", "Moves targets by an offset or so their centre lands on a point.", { via: { type: "array", items: POINT("A point the centre passes through."), minItems: 1, maxItems: 64, description: 'Waypoints (document units) the centre passes through on the way to "to" or "by", smoothly (velocity carries through each) and without overshooting any. Default length 700 ms + 400 per waypoint.' }, pacing: { type: "string", enum: ["even", "equal"], description: "With via: even (default) keeps the speed steady along the path; equal gives each stretch the same time." }, blend: BLEND("replace"), by: POINT("Offset in document units."), to: POINT("Point (document coordinates) for the centre.") }),
+  move: command2("move", "Moves targets by an offset or so their centre lands on a point.", { via: { type: "array", items: POINT("A point the centre passes through."), minItems: 1, maxItems: 64, description: 'Waypoints (document units) the centre passes through on the way to "to" or "by", smoothly (velocity carries through each) and without overshooting any. Default length 700 ms + 400 per waypoint.' }, pacing: { type: "string", enum: ["even", "equal"], description: "With via: even (default) keeps the speed steady along the path; equal gives each stretch the same time." }, times: { type: "array", items: { type: "number", exclusiveMinimum: 0, exclusiveMaximum: 1 }, minItems: 1, maxItems: 64, description: "With via: when the centre passes each waypoint, as rising fractions of the duration (0\u20131), one per waypoint; overrides pacing. Recorded takes set it." }, blend: BLEND("replace"), by: POINT("Offset in document units."), to: POINT("Point (document coordinates) for the centre.") }),
   rotate: command2("rotate", "Turns targets about their centre (degrees, clockwise).", { blend: BLEND("replace"), by: { type: "number", description: "Degrees to turn by." }, to: { type: "number", description: "Angle to turn to, in degrees from rest." } }),
   scale: command2("scale", "Scales targets about their centre (1 = rest size).", { blend: BLEND("replace"), to: { description: "A factor, or { x, y } factors.", anyOf: [{ type: "number" }, POINT("Factors per axis.")] }, geometric: { type: "boolean", description: "Grow by a steady factor, which reads as an even zoom (default false)." } }, ["to"]),
   fade: command2("fade", "Changes opacity.", { to: FRACTION("Opacity at the end (0\u20131).") }, ["to"]),
@@ -4242,6 +4627,7 @@ var COMMAND = object(
     comet: FRACTION("draw: a travelling stroke this fraction of the length long (leave out from and to)."),
     via: { type: "array", items: REF2("point"), minItems: 1, maxItems: 64, description: 'move: waypoints the centre passes through smoothly on the way to "to" or "by".' },
     pacing: { type: "string", enum: ["even", "equal"], description: "move with via: steady speed (even, default) or the same time per stretch (equal)." },
+    times: { type: "array", items: { type: "number", exclusiveMinimum: 0, exclusiveMaximum: 1 }, description: "move with via: rising fractions of the duration (0\u20131) at which each waypoint is passed; overrides pacing." },
     geometric: { type: "boolean", description: "scale: grow by a steady factor, an even zoom (default false)." },
     fill: { type: "string", description: "style: fill colour, CSS (hex, rgb(), rgba())." },
     stroke: { type: "string", description: "style: stroke colour, CSS." },
@@ -4381,11 +4767,11 @@ function describeElement(node, ancestors) {
     ...effects.length ? { effects } : {}
   };
 }
-var round = (n) => Math.round(n * 10) / 10;
+var round2 = (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: round(e.bounds.x), y: round(e.bounds.y), width: round(e.bounds.width), height: round(e.bounds.height) } } : {}
+    ...e.bounds ? { bounds: { x: round2(e.bounds.x), y: round2(e.bounds.y), width: round2(e.bounds.width), height: round2(e.bounds.height) } } : {}
   }));
 }
 function describeMotionShots(scene) {
@@ -4590,16 +4976,16 @@ function createAnimationEditorToolProvider(controller, options = {}) {
       const timeline = compileMotionScene(s);
       const words = s.narration?.words ?? [];
       const end = to ?? Math.max(timeline.duration, words.length ? words[words.length - 1].end ?? words[words.length - 1].start : 0);
-      const shotAt = (ms) => timeline.shots.find((x) => ms >= x.start && ms < x.end)?.id;
+      const shotAt = (ms2) => timeline.shots.find((x) => ms2 >= x.start && ms2 < x.end)?.id;
       const beats = [];
       if (s.beat && s.beat.bpm > 0) {
         const first = Math.max(0, Math.ceil(motionBeatAt(s.beat, from).beat - 1e-9));
         for (let b = first; beats.length < limit; b++) {
-          const ms = motionBeatTime(s.beat, b);
-          if (ms > end) break;
-          const at = motionBeatAt(s.beat, ms);
-          const shot = shotAt(ms);
-          beats.push({ beat: b, ms: Math.round(ms), bar: at.bar, beatInBar: at.beatInBar, ...shot ? { shot } : {} });
+          const ms2 = motionBeatTime(s.beat, b);
+          if (ms2 > end) break;
+          const at = motionBeatAt(s.beat, ms2);
+          const shot = shotAt(ms2);
+          beats.push({ beat: b, ms: Math.round(ms2), bar: at.bar, beatInBar: at.beatInBar, ...shot ? { shot } : {} });
         }
       }
       const listed = words.map((w, index) => ({ index, text: w.text, start: w.start, ...w.end !== void 0 ? { end: w.end } : {}, ...shotAt(w.start) ? { shot: shotAt(w.start) } : {} })).filter((w) => w.start >= from && w.start <= end).slice(0, limit);
@@ -4774,6 +5160,60 @@ function createAnimationEditorToolProvider(controller, options = {}) {
       return apply(edits, "Fit to length", () => report);
     }
   };
+  const recordTake = {
+    name: "record_animation_take",
+    title: "Record a performed take",
+    description: "Performs changes live and keeps them as a new shot (one undo step), the way a person records by dragging, resizing, turning and recolouring on the stage: give timed samples of where elements are and how they look, and they become smooth commands that play the performance back (a path is one move through waypoints at the recorded times; scales, turns, fades and stroke widths a few eased commands; paints change as picked). Returns the shot id, where it starts, its commands with their start and end times, and how many samples were kept. With dry_run it returns the shot without adding it.",
+    inputSchema: object(
+      {
+        samples: {
+          type: "array",
+          minItems: 1,
+          maxItems: 5e3,
+          description: "Values at moments of the take, in any order. Before an element's first sample a property keeps its pose and the change into the first sample is instant, so start a movement with a sample at the element's current pose (get_motion_path's last point) to have it travel from there.",
+          items: object(
+            {
+              node: { type: "string", minLength: 1, description: "Element id from get_animation." },
+              t: MS("Time from the start of the take"),
+              x: { type: "number", description: "Centre x, document units (with y)." },
+              y: { type: "number", description: "Centre y, document units (with x)." },
+              scaleX: { type: "number", exclusiveMinimum: 0, description: "Horizontal scale from rest (1 = rest size; give scaleX alone for a uniform scale)." },
+              scaleY: { type: "number", exclusiveMinimum: 0, description: "Vertical scale from rest (1 = rest size)." },
+              rotation: { type: "number", description: "Turn from rest, degrees clockwise (keep counting past 360 for more turns)." },
+              opacity: FRACTION("Opacity, 0\u20131."),
+              fill: { type: "string", description: 'Fill colour, e.g. "#0ea5e9".' },
+              stroke: { type: "string", description: 'Stroke colour, e.g. "#0f172a".' },
+              strokeWidth: { type: "number", minimum: 0, description: "Stroke width, document units." }
+            },
+            ["node", "t"]
+          )
+        },
+        length: MS("How long the take ran (default: the last sample); the shot holds after its last change until then"),
+        id: { ...SHOT_ID, description: 'Id for the new shot (default "take", "take-2"\u2026).' },
+        label: { type: "string", description: 'Label for the new shot (default "Recorded take").' },
+        at: { type: "integer", minimum: 0, description: "Position among the shots, 0 = first (default: the end); the take starts where that shot starts." },
+        tolerance: { type: "number", exclusiveMinimum: 0, description: "How closely commands follow the samples, as a multiple of 1 document unit, 0.01 of scale or opacity, 0.5\xB0 and 0.25 of stroke width (default 1; lower keeps more points)." },
+        dry_run: { type: "boolean", description: "Return the shot without adding it (default false)." }
+      },
+      ["samples"]
+    ),
+    annotations: { title: "Record a performed take", ...WRITE },
+    handler: ({ samples, length, id, label, at, tolerance, dry_run = false }) => {
+      const result = controller.recordTake({ samples, length }, { id, label, at, tolerance, dryRun: dry_run });
+      if (!result.ok) throw new Error(result.error);
+      const s = dry_run ? scene() : controller.getScene();
+      const report = { shot: result.shot.id, at: result.at, start: Math.round(result.start), samples: result.samples };
+      if (dry_run) return { dry_run: true, ...report, run: result.shot.run, hold: result.shot.hold, hint: "Nothing was changed; call again without dry_run to add the shot." };
+      const timeline = compileMotionScene(s);
+      const described = describeMotionShots(s).find((x) => x.id === result.shot.id);
+      return {
+        ...report,
+        commands: described.commands.map((c) => ({ index: c.index, type: c.type, targets: "targets" in c ? c.targets : [], start: c.start, end: c.end })),
+        duration: timeline.duration,
+        issues: issueSummary(result.issues)
+      };
+    }
+  };
   const PROP = { type: "string", enum: ["x", "y", "rotation", "scaleX", "scaleY", "opacity"], description: "x / y (offset, document units), rotation (degrees), scaleX / scaleY or opacity (1 = rest)." };
   const setDrivers = {
     name: "set_animation_drivers",
@@ -5045,7 +5485,7 @@ function createAnimationEditorToolProvider(controller, options = {}) {
   };
   const finish = (tools) => tools.map((tool) => ({ ...tool, inputSchema: withDefs(tool.inputSchema) }));
   const reads = finish([getAnimation, getShot, describeCommand, findElements, getTextLayout, getMotionPath, getTimingGrid, checkAnimation, renderFrame, exportFlairMotion, exportFlairEffect, exportLottie, seekAnimation]);
-  const writes = finish([setArtworkSvg, importPptx, setDrivers, setClip, copyAnimation, fitAnimation, importFlairEffect, insertShots, updateShot, deleteShots, moveShot, addCommands, updateCommand, deleteCommands, moveCommand, setSettings, setControls, editAnimation, writeAnimation, undo, redo]);
+  const writes = finish([setArtworkSvg, importPptx, setDrivers, setClip, copyAnimation, fitAnimation, recordTake, importFlairEffect, insertShots, updateShot, deleteShots, moveShot, addCommands, updateCommand, deleteCommands, moveCommand, setSettings, setControls, editAnimation, writeAnimation, undo, redo]);
   return withAnimationPlayback({
     id: options.id ?? "animation",
     namespace: options.namespace,
@@ -5279,15 +5719,15 @@ function motionEaseKey(ease) {
 }
 function motionEasingCurve(ease, samples = 48, durationMs = 1e3) {
   const resolved = resolveEasing(ease);
-  const ms = resolved !== "hold" && resolved.type === "spring" ? springSettleMs(resolved) : durationMs;
+  const ms2 = resolved !== "hold" && resolved.type === "spring" ? springSettleMs(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 : evaluateEasing(ease, u, ms) });
+    points.push({ u, v: resolved === "hold" ? i === n ? 1 : 0 : evaluateEasing(ease, u, ms2) });
   }
   const values = points.map((p) => p.v);
-  return { points, min: Math.min(0, ...values), max: Math.max(1, ...values), durationMs: ms };
+  return { points, min: Math.min(0, ...values), max: Math.max(1, ...values), durationMs: ms2 };
 }
 function motionEasingPath(curve, width, height, pad = 4) {
   const span = curve.max - curve.min || 1;
@@ -5328,8 +5768,8 @@ function motionRulerTicks(duration, width, minGap = 56) {
   }
   return ticks;
 }
-function fitMotionSceneEdits(scene, ms, options = {}) {
-  const fit = fitMotionScene(scene, ms, options);
+function fitMotionSceneEdits(scene, ms2, options = {}) {
+  const fit = fitMotionScene(scene, ms2, options);
   return fit.scene.shots.flatMap((shot, i) => {
     const before = scene.shots[i].speed;
     if (before === shot.speed) return [];
@@ -5350,7 +5790,7 @@ function motionCueFromKey(key) {
 }
 function motionCueChoices(scene, limit = 256) {
   const choices = [];
-  const s = (ms) => `${(ms / 1e3).toFixed(2)} s`;
+  const s = (ms2) => `${(ms2 / 1e3).toFixed(2)} s`;
   const end = Math.max(compileMotionScene(scene).duration, ...scene.narration?.words.map((w) => w.end ?? w.start) ?? [0]) + 2e3;
   if (scene.beat && scene.beat.bpm > 0) {
     for (let beat = 0; choices.length < limit; beat++) {
@@ -5517,7 +5957,9 @@ export {
   MOTION_EXIT_STYLES,
   MOTION_IRIS_SHAPES,
   MOTION_ISSUE_CODES,
+  MOTION_MAX_TAKE_MS,
   MOTION_MIN_CHANGE_MS,
+  MOTION_RECORD_GESTURE_MODES,
   MOTION_REPEAT_MODES,
   MOTION_SPEED_RANGE,
   MOTION_SPLIT_ORIENTATIONS,
@@ -5565,6 +6007,7 @@ export {
   motionBeatTime,
   motionBlurTimes,
   motionCascade,
+  motionClientToDocument,
   motionClipAttrs,
   motionClipLayout,
   motionCommandDuration,
@@ -5600,6 +6043,7 @@ export {
   motionNodeAtElement,
   motionNodeClips,
   motionNodeOffset,
+  motionNodePose,
   motionPartsFromVectorEffect,
   motionPath,
   motionPathLength,
@@ -5616,6 +6060,8 @@ export {
   motionShotCueTime,
   motionShotTimeScale,
   motionStageSvg,
+  motionTakeProblems,
+  motionTakeShot,
   motionTextLayout,
   motionTextUnits,
   motionTrackKey,
@@ -5631,6 +6077,7 @@ export {
   segmentProgress,
   segmentValue,
   shotShapeProblems,
+  simplifyTimedSamples,
   smoothMotionLegs,
   smoothMotionTimes,
   suggestName,