@pixerate/editor 0.232.0 → 0.233.0

package/dist/animation-editor/index.js

@@ -1,3 +1,9 @@
+import {
+  effectLayerInput,
+  effectLayerOffered,
+  effectLayerRole,
+  effectSubjectKind
+} from "../chunk-I277KJLQ.js";
 import {
   createVectorMorph
 } from "../chunk-YMREOA67.js";
@@ -8,7 +14,7 @@ import {
   motionIssueLine,
   namedWithSuggestion,
   suggestName
-} from "../chunk-TYCJGFCF.js";
+} from "../chunk-EUKY4KFX.js";
 import {
   IDENTITY_MATRIX,
   applyMatrix,
@@ -42,10 +48,16 @@ import {
   transformBezierPath
 } from "../chunk-WEIK3UYB.js";
 import "../chunk-PWBZH3FK.js";
+import {
+  EffectRendererPool
+} from "../chunk-EHLOCVWB.js";
 import {
   CAMERA_MOVE_MAX_MS,
+  EFFECT_LAYER_ROLES,
+  EFFECT_TRANSITION_MS,
   EffectUnsupportedError,
   EffectsSlot,
+  NoEffectsProviderError,
   cameraBoxOfView,
   cameraMoveField,
   cameraMoveParts,
@@ -54,7 +66,7 @@ import {
   isEffectError,
   resolveCameraMoveSpec,
   resolveEffectValues
-} from "../chunk-PQYDJ2AV.js";
+} from "../chunk-SIK3LT6M.js";
 import "../chunk-V2ZCJRDM.js";
 import "../chunk-2PBZBRP5.js";
 import "../chunk-ODBT55Q7.js";
@@ -196,7 +208,10 @@ ${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 SHOT_KEYS = ["id", "label", "camera", "at", "run", "hold", "speed", "layers", "transition"];
+var LAYER_KEYS = ["id", "effect", "preset", "values", "subject", "role", "rect", "from", "until", "opacity", "fade", "provider", "name"];
+var TRANSITION_KEYS = ["effect", "ms", "preset", "values", "provider", "name"];
+var LAYER_ID = /^[A-Za-z_][\w.-]*$/;
 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"];
@@ -466,6 +481,50 @@ function shotShapeProblems(shot, where) {
   }
   if (!Array.isArray(shot.run)) problems.push(`${name}: "run" must be a list of commands (it may be empty).`);
   else shot.run.forEach((command3, i) => problems.push(...commandShapeProblems(command3, `${name}, command ${i + 1}`)));
+  problems.push(...shotLayersShapeProblems(shot, name));
+  return problems;
+}
+var isLayerTime = (t) => isNum(t) && t >= 0 || isObject(t) && Object.keys(t).length === 1 && Number.isInteger(t.shots) && t.shots >= 1;
+function shotLayersShapeProblems(shot, name) {
+  const problems = [];
+  if (shot.layers !== void 0) {
+    if (!Array.isArray(shot.layers)) problems.push(`${name}: "layers" must be a list of layers.`);
+    else
+      shot.layers.forEach((layer, i) => {
+        const where = `${name}, layer ${i + 1}`;
+        if (!isObject(layer)) return void problems.push(`${where} must be an object.`);
+        unknownKeys(layer, LAYER_KEYS, where, problems);
+        if (typeof layer.id !== "string" || !LAYER_ID.test(layer.id)) problems.push(`${where}: "id" must be letters, digits, "_", "-" or "." (e.g. "layer1").`);
+        if (layer.effect === void 0 && layer.subject === void 0) problems.push(`${where} needs an "effect", a "subject" or both.`);
+        if (layer.effect !== void 0 && (typeof layer.effect !== "string" || !layer.effect)) problems.push(`${where}: "effect" must be an effect id.`);
+        if (layer.subject !== void 0) {
+          const kind = effectSubjectKind(layer.subject);
+          if (kind === "video") problems.push(`${where}: an animation layer cannot play a video; use { "image" }, { "svg" }, { "text" } or { "slot" } (the video editor plays video).`);
+          else if (!kind || !String(layer.subject[kind]).trim()) problems.push(`${where}: "subject" must be { "image": url }, { "svg": markup }, { "text": words } or { "slot": name }.`);
+        }
+        if (layer.role !== void 0 && !EFFECT_LAYER_ROLES.includes(layer.role)) problems.push(`${where}: "role" must be one of ${EFFECT_LAYER_ROLES.join(", ")}.`);
+        if (layer.rect !== void 0) {
+          const r = layer.rect;
+          if (!isObject(r) || !["x", "y", "width", "height"].every((k) => isNum(r[k])) || !(r.width > 0 && r.height > 0)) problems.push(`${where}: "rect" must be { x, y, width, height } in artwork units, width and height > 0.`);
+        }
+        for (const k of ["from", "until"]) if (layer[k] !== void 0 && !isLayerTime(layer[k])) problems.push(`${where}: "${k}" must be ms \u2265 0 after the shot starts, or { "shots": n } (n \u2265 1: when the n-th shot after this one starts).`);
+        if (layer.opacity !== void 0 && !(isNum(layer.opacity) && layer.opacity >= 0 && layer.opacity <= 1)) problems.push(`${where}: "opacity" must be a number from 0 to 1.`);
+        if (layer.fade !== void 0 && !(isNum(layer.fade) && layer.fade >= 0)) problems.push(`${where}: "fade" must be ms \u2265 0.`);
+        if (layer.preset !== void 0 && typeof layer.preset !== "string") problems.push(`${where}: "preset" is a preset's name.`);
+        if (layer.values !== void 0 && !isObject(layer.values)) problems.push(`${where}: "values" is an object of the effect's control values.`);
+        for (const k of ["provider", "name"]) if (layer[k] !== void 0 && typeof layer[k] !== "string") problems.push(`${where}: "${k}" must be a string.`);
+      });
+  }
+  if (shot.transition !== void 0) {
+    const t = shot.transition;
+    if (!isObject(t) || typeof t.effect !== "string" || !t.effect) problems.push(`${name}: "transition" is { "effect": id, "ms"?, "preset"?, "values"? }.`);
+    else {
+      unknownKeys(t, TRANSITION_KEYS, `${name} transition`, problems);
+      if (t.ms !== void 0 && !(isNum(t.ms) && t.ms > 0 && t.ms <= 6e4)) problems.push(`${name} transition: "ms" must be a number from 1 to 60000.`);
+      if (t.preset !== void 0 && typeof t.preset !== "string") problems.push(`${name} transition: "preset" is a preset's name.`);
+      if (t.values !== void 0 && !isObject(t.values)) problems.push(`${name} transition: "values" is an object of the effect's control values.`);
+    }
+  }
   return problems;
 }
 function motionSceneShapeProblems(input) {
@@ -494,8 +553,8 @@ function motionSceneShapeProblems(input) {
       problems.push('Scene: "beat" must be { "bpm": 1\u20131000, "offset"?: ms, "meter"?: beats a bar }.');
   }
   if (input.narration !== void 0) {
-    const n = input.narration;
-    if (!isObject(n) || !Array.isArray(n.words) || !n.words.every((w, i, all) => isObject(w) && typeof w.text === "string" && isNum(w.start) && w.start >= 0 && (w.end === void 0 || isNum(w.end) && w.end >= w.start) && (i === 0 || w.start >= (all[i - 1].start ?? 0))))
+    const n2 = input.narration;
+    if (!isObject(n2) || !Array.isArray(n2.words) || !n2.words.every((w, i, all) => isObject(w) && typeof w.text === "string" && isNum(w.start) && w.start >= 0 && (w.end === void 0 || isNum(w.end) && w.end >= w.start) && (i === 0 || w.start >= (all[i - 1].start ?? 0))))
       problems.push('Scene: "narration" must be { "words": [{ "text", "start": ms, "end"?: ms }, \u2026] } in time order.');
   }
   if (input.steps !== void 0 && !(isNum(input.steps) && input.steps > 0 && input.steps <= 120)) problems.push('Scene: "steps" must be frames per second from above 0 to 120.');
@@ -513,6 +572,17 @@ function motionSceneShapeProblems(input) {
     problems.push('Scene: "presets" must be a list of { name, values }.');
   if (!Array.isArray(input.shots)) problems.push('Scene: "shots" must be a list.');
   else input.shots.forEach((shot, i) => problems.push(...shotShapeProblems(shot, `Shot ${i + 1}`)));
+  if (Array.isArray(input.shots)) {
+    const seen = /* @__PURE__ */ new Set();
+    for (const shot of input.shots)
+      if (isObject(shot) && Array.isArray(shot.layers)) {
+        for (const layer of shot.layers)
+          if (isObject(layer) && typeof layer.id === "string") {
+            if (seen.has(layer.id)) problems.push(`Layer id "${layer.id}" is used twice; layer ids are unique in the scene.`);
+            seen.add(layer.id);
+          }
+      }
+  }
   return problems;
 }
 function parseMotionScene(input) {
@@ -556,7 +626,7 @@ function matchMotionNodes(from, into) {
       for (const x of [...left]) {
         const k = key(x, a);
         if (!k) continue;
-        const y = [...right].find((n) => key(n, b) === k);
+        const y = [...right].find((n2) => key(n2, b) === k);
         if (!y) continue;
         left.delete(x);
         right.delete(y);
@@ -564,18 +634,18 @@ function matchMotionNodes(from, into) {
         else out.pairs.push([x.id, y.id]);
       }
     };
-    pair((n) => n.name?.trim() || void 0);
-    pair((n, g) => localId(n.id, g.id) || void 0);
+    pair((n2) => n2.name?.trim() || void 0);
+    pair((n2, g) => localId(n2.id, g.id) || void 0);
     for (const x of [...left]) {
-      const y = [...right].find((n) => n.type === x.type);
+      const y = [...right].find((n2) => n2.type === x.type);
       if (!y) continue;
       left.delete(x);
       right.delete(y);
       if (x.type === "group" && y.type === "group") visit(x, y);
       else out.pairs.push([x.id, y.id]);
     }
-    out.unpairedFrom.push(...[...left].map((n) => n.id));
-    out.unpairedInto.push(...[...right].map((n) => n.id));
+    out.unpairedFrom.push(...[...left].map((n2) => n2.id));
+    out.unpairedInto.push(...[...right].map((n2) => n2.id));
   };
   visit(from, into);
   return out;
@@ -583,10 +653,10 @@ function matchMotionNodes(from, into) {
 
 // src/animation-editor/smooth.ts
 function smoothMotionLegs(times, values) {
-  const n = values.length;
-  const slope = new Array(n).fill(0);
+  const n2 = values.length;
+  const slope = new Array(n2).fill(0);
   const secant = (i) => (values[i + 1] - values[i]) / Math.max(1e-9, times[i + 1] - times[i]);
-  for (let i = 1; i < n - 1; i++) {
+  for (let i = 1; i < n2 - 1; i++) {
     const a = secant(i - 1);
     const b = secant(i);
     if (a * b <= 0) continue;
@@ -595,7 +665,7 @@ function smoothMotionLegs(times, values) {
     slope[i] = 3 * (ha + hb) / ((2 * hb + ha) / a + (hb + 2 * ha) / b);
   }
   const legs = [];
-  for (let i = 0; i + 1 < n; i++) {
+  for (let i = 0; i + 1 < n2; i++) {
     const dt = times[i + 1] - times[i];
     const dv = values[i + 1] - values[i];
     if (Math.abs(dv) < 1e-9) {
@@ -658,8 +728,8 @@ function motionTextUnits(layout, by) {
   return layout.lines.flatMap((l) => l.words.flatMap((w) => w.letters.map((id) => [id])));
 }
 function motionCascade(units, cascade = "forward", seed = 1) {
-  const n = units.length;
-  const mid = (n - 1) / 2;
+  const n2 = units.length;
+  const mid = (n2 - 1) / 2;
   const indexed = units.map((u, i) => ({ u, i }));
   if (cascade === "backward") return [...units].reverse();
   if (cascade === "center") return indexed.sort((a, b) => Math.abs(a.i - mid) - Math.abs(b.i - mid) || a.i - b.i).map((x) => x.u);
@@ -674,7 +744,7 @@ function motionCascade(units, cascade = "forward", seed = 1) {
       return ((t ^ t >>> 14) >>> 0) / 4294967296;
     };
     const out = [...units];
-    for (let i = n - 1; i > 0; i--) {
+    for (let i = n2 - 1; i > 0; i--) {
       const j = Math.floor(rand() * (i + 1));
       [out[i], out[j]] = [out[j], out[i]];
     }
@@ -739,12 +809,12 @@ function strokeReach(node) {
   return reach;
 }
 function motionRevealPadding(entry) {
-  const box = entry.box;
-  if (!box || !(box.width > 0) || !(box.height > 0)) return null;
+  const box2 = entry.box;
+  if (!box2 || !(box2.width > 0) || !(box2.height > 0)) return null;
   const s = strokeReach(entry.node);
-  return [Math.min(1, s / box.width + 0.02), Math.min(1, s / box.height + 0.02)];
+  return [Math.min(1, s / box2.width + 0.02), Math.min(1, s / box2.height + 0.02)];
 }
-var clipRound = (n) => Math.round(n * 1e4) / 1e4 || 0;
+var clipRound = (n2) => Math.round(n2 * 1e4) / 1e4 || 0;
 function revealFull(property, [px, py]) {
   return (property === "clipRect" ? [-px, -py, 1 + 2 * px, 1 + 2 * py] : [0.5, 0.5, Math.hypot(0.5 + px, 0.5 + py)]).map(clipRound);
 }
@@ -978,8 +1048,8 @@ function motionDriverSources(timeline, node, properties, seen = /* @__PURE__ */
 }
 function motionCommandRepeat(command3) {
   if (command3.type === "wait" || command3.type === "enter" || command3.type === "exit") return 1;
-  const n = command3.repeat ?? 1;
-  return Number.isInteger(n) && n >= 1 ? n : 1;
+  const n2 = command3.repeat ?? 1;
+  return Number.isInteger(n2) && n2 >= 1 ? n2 : 1;
 }
 function motionCommandDuration(command3, scene, target) {
   return motionCycleDuration(command3, scene, target) * motionCommandRepeat(command3);
@@ -1054,13 +1124,14 @@ function compileMotionScene(scene) {
     let cursor = start;
     const f = motionShotTimeScale(shot);
     const moveIn = shot.camera ? cameraMoveParts(shot.camera.in) : void 0;
+    const transitionMs = index > 0 && shot.transition ? (shot.transition.ms ?? EFFECT_TRANSITION_MS) * f : 0;
     const moveDuring = shot.camera ? cameraMoveParts(shot.camera.during) : void 0;
     let playsIn = false;
     if (shot.camera) {
       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;
+        const ms2 = index === 0 || transitionMs > 0 && !moveIn ? 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;
@@ -1081,7 +1152,7 @@ function compileMotionScene(scene) {
       prevStart = begin;
       runEnd = Math.max(runEnd, end2);
     });
-    const end = runEnd + (shot.hold ?? MOTION_DEFAULT_HOLD) * f;
+    const end = Math.max(runEnd, start + transitionMs) + (shot.hold ?? MOTION_DEFAULT_HOLD) * f;
     shots.push({
       id: shot.id,
       index,
@@ -1093,7 +1164,8 @@ function compileMotionScene(scene) {
       ...cue !== void 0 ? { cue } : {},
       ...missedBy !== void 0 ? { missedBy } : {},
       ...playsIn ? { cameraIn: moveIn.move } : {},
-      ...moveDuring ? { cameraDuring: moveDuring.move } : {}
+      ...moveDuring ? { cameraDuring: moveDuring.move } : {},
+      ...transitionMs > 0 ? { transition: shot.transition.effect, transitionEnd: start + transitionMs } : {}
     });
     t = end;
   });
@@ -1157,14 +1229,14 @@ function compileMotionScene(scene) {
     const made = segments.slice(first);
     const steps = command3.steps ?? scene.steps;
     if (steps && steps > 0) for (const s of made) s.steps = steps;
-    const n = motionCommandRepeat(command3);
+    const n2 = motionCommandRepeat(command3);
     const mode = command3.repeatMode ?? "loop";
     const shift = (v, by, k) => {
       if (typeof v === "number" && typeof by === "number") return v + by * k;
       if (Array.isArray(v) && Array.isArray(by) && v.length === by.length) return v.map((x, i) => x + by[i] * k);
       return v;
     };
-    for (let k = 1; k < n; k++) {
+    for (let k = 1; k < n2; k++) {
       const at = start + k * cycle;
       for (const s of made) {
         if (mode === "mirror" && k % 2 === 1) {
@@ -1529,8 +1601,8 @@ function motionCameraTransform(view, width) {
   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-") {
+var round = (n2) => Math.round(n2 * 1e3) / 1e3;
+function withCameraViewEffects(svg, view, box2, idPrefix = "vg-") {
   if (!view || !view.roll && !(view.blur && view.blur > 0)) return svg;
   const open = svg.match(/<svg\b[^>]*>/);
   const close = svg.lastIndexOf("</svg>");
@@ -1538,7 +1610,7 @@ function withCameraViewEffects(svg, view, box, idPrefix = "vg-") {
   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.roll) attrs.push(`transform="rotate(${round(view.roll)} ${round(box2.x + box2.width / 2)} ${round(box2.y + box2.height / 2)})"`);
   if (view.blur && view.blur > 0) {
     const s = view.blur / view.zoom / 2;
     const a = (view.blurAngle ?? 0) * Math.PI / 180;
@@ -1573,6 +1645,329 @@ async function checkMotionCameraMoves(scene, provider) {
   return issues;
 }
 
+// src/animation-editor/layers.ts
+var spanCache = /* @__PURE__ */ new WeakMap();
+function motionLayerSpans(scene) {
+  const hit = spanCache.get(scene);
+  if (hit) return hit;
+  const timeline = compileMotionScene(scene);
+  const shots = timeline.shots;
+  const total = timeline.duration;
+  const at = (shotIndex2, t, fallback) => {
+    if (t === void 0) return fallback;
+    if (typeof t === "number") return shots[shotIndex2].start + t;
+    return shots[shotIndex2 + t.shots]?.start ?? total;
+  };
+  const out = [];
+  scene.shots.forEach((shot, shotIndex2) => {
+    (shot.layers ?? []).forEach((layer, index) => {
+      const start = at(shotIndex2, layer.from, shots[shotIndex2].start);
+      const end = Math.max(start, at(shotIndex2, layer.until ?? { shots: 1 }, total));
+      out.push({ layer, shot: shot.id, shotIndex: shotIndex2, index, role: effectLayerRole(layer), start, end });
+    });
+  });
+  spanCache.set(scene, out);
+  return out;
+}
+function motionLayersAt(scene, time) {
+  if (!scene.shots.some((s) => s.layers?.length)) return [];
+  const total = compileMotionScene(scene).duration;
+  const out = [];
+  for (const span of motionLayerSpans(scene)) {
+    if (time < span.start || time > span.end || time === span.end && span.end < total) continue;
+    const fade = span.layer.fade ?? 0;
+    const k = fade > 0 ? Math.min(1, (time - span.start) / fade, (span.end - time) / fade) : 1;
+    const opacity = Math.max(0, Math.min(1, (span.layer.opacity ?? 1) * k));
+    if (opacity <= 0) continue;
+    out.push({ ...span, time: time - span.start, opacity });
+  }
+  return out;
+}
+function motionTransitionAt(scene, time) {
+  if (!scene.shots.some((s) => s.transition)) return null;
+  for (const s of compileMotionScene(scene).shots) {
+    if (s.transition && s.transitionEnd !== void 0 && time >= s.start && time < s.transitionEnd)
+      return { shot: s.id, shotIndex: s.index, effect: s.transition, start: s.start, end: s.transitionEnd, progress: (time - s.start) / (s.transitionEnd - s.start) };
+  }
+  return null;
+}
+var motionSceneHasLayers = (scene) => scene.shots.some((s) => s.layers?.length || s.transition);
+var esc = (s) => s.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+var n = (v) => String(Math.round(v * 1e3) / 1e3);
+var box = (b) => `x="${n(b.x)}" y="${n(b.y)}" width="${n(b.width)}" height="${n(b.height)}"`;
+var svgDataUrl = (svg) => `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+function subjectSvg(subject, b, opacity, pictures) {
+  const o = opacity < 1 ? ` opacity="${n(opacity)}"` : "";
+  if ("image" in subject) {
+    const href = pictures?.subject(subject) ?? subject.image;
+    return `<image href="${esc(href)}" ${box(b)} preserveAspectRatio="xMidYMid meet"${o}/>`;
+  }
+  if ("svg" in subject) {
+    const href = subject.svg.trimStart().startsWith("<") ? svgDataUrl(subject.svg) : subject.svg;
+    return `<image href="${esc(href)}" ${box(b)} preserveAspectRatio="xMidYMid meet"${o}/>`;
+  }
+  if ("text" in subject) {
+    const size = Math.max(1, Math.min(b.height * 0.6, b.width / Math.max(1, subject.text.length) * 1.6));
+    return `<text x="${n(b.x + b.width / 2)}" y="${n(b.y + b.height / 2)}" text-anchor="middle" dominant-baseline="central" font-family="${esc(subject.font ?? "system-ui, sans-serif")}" font-weight="${esc(String(subject.weight ?? 700))}" font-size="${n(size)}" fill="#ffffff"${o}>${esc(subject.text)}</text>`;
+  }
+  return "";
+}
+function layerSvg(scene, active, camera, pictures) {
+  const b = active.layer.rect ?? camera;
+  if (!active.layer.effect) return active.layer.subject ? subjectSvg(active.layer.subject, b, active.opacity, pictures) : "";
+  const href = pictures?.layer(scene, active, b);
+  if (!href) return "";
+  return `<image href="${esc(href)}" ${box(b)} preserveAspectRatio="none" data-layer="${esc(active.layer.id)}"${active.opacity < 1 ? ` opacity="${n(active.opacity)}"` : ""}/>`;
+}
+function withMotionShotLayers(svg, scene, time, camera, pictures, background) {
+  const active = motionLayersAt(scene, time);
+  const open = svg.indexOf(">") + 1;
+  let body = svg.slice(open, svg.lastIndexOf("</svg>"));
+  const defs = /^\s*<defs>[\s\S]*?<\/defs>/.exec(body)?.[0] ?? "";
+  body = body.slice(defs.length);
+  const bg = background && scene.artwork.background ? `<rect width="${n(scene.artwork.width)}" height="${n(scene.artwork.height)}" fill="${esc(scene.artwork.background)}"/>` : "";
+  const draw = (roles) => active.filter((a) => roles.includes(a.role)).map((a) => layerSvg(scene, a, camera, pictures)).join("");
+  return `${svg.slice(0, open)}${defs}${bg}${draw(["background"])}${body}${draw(["subject"])}${draw(["overlay"])}</svg>`;
+}
+function motionTransitionSvg(svg, from, active, camera, picture) {
+  const open = svg.indexOf(">") + 1;
+  if (picture) return `${svg.slice(0, open)}<image href="${esc(picture)}" ${box(camera)} preserveAspectRatio="none" data-transition="${esc(active.effect)}"/></svg>`;
+  const inner = svg.slice(open, svg.lastIndexOf("</svg>"));
+  const fromView = /viewBox="([^"]*)"/.exec(from)?.[1] ?? "";
+  const fromInner = from.slice(from.indexOf(">") + 1, from.lastIndexOf("</svg>"));
+  return `${svg.slice(0, open)}<svg ${box(camera)} viewBox="${fromView}" preserveAspectRatio="none" data-transition-from="">${fromInner}</svg><g opacity="${n(active.progress)}" data-transition-to="">${inner}</g></svg>`;
+}
+var sceneIds = /* @__PURE__ */ new WeakMap();
+var nextSceneId = 1;
+var sceneId = (scene) => {
+  let id = sceneIds.get(scene);
+  if (!id) sceneIds.set(scene, id = nextSceneId++);
+  return id;
+};
+var MotionLayersEngine = class {
+  slot;
+  host;
+  frameSvg;
+  cache = /* @__PURE__ */ new Map();
+  pending = /* @__PURE__ */ new Map();
+  failures = /* @__PURE__ */ new Map();
+  descriptions = /* @__PURE__ */ new Map();
+  listeners = /* @__PURE__ */ new Set();
+  pool;
+  options;
+  generation = 0;
+  detach;
+  constructor(options = {}) {
+    this.slot = options.slot ?? new EffectsSlot();
+    this.host = options.host ?? null;
+    this.frameSvg = options.frameSvg;
+    this.options = { scale: options.scale ?? 1, maxSize: options.maxSize ?? 1280, fps: options.fps ?? 30, maxEntries: options.maxEntries ?? 160 };
+    this.pool = new EffectRendererPool({ maxRenderers: options.maxRenderers });
+    this.detach = this.slot.subscribe(() => {
+      this.reset();
+      this.notify();
+    });
+  }
+  get provider() {
+    return this.slot.provider;
+  }
+  /** Called when a picture is ready (draw the frame again). */
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+  /** Why pictures failed, newest last. */
+  failuresList() {
+    return [...this.failures.values()];
+  }
+  /** True while any picture is being made. */
+  get busy() {
+    return this.pending.size > 0;
+  }
+  /** Resolves once every picture asked for so far is made (or failed). */
+  async idle() {
+    while (this.pending.size) await Promise.all([...this.pending.values()]);
+  }
+  /** Forgets every picture and failure (a new provider, or the host changed). */
+  reset() {
+    this.generation++;
+    this.cache.clear();
+    this.pending.clear();
+    this.failures.clear();
+    this.descriptions.clear();
+    this.pool.clear();
+  }
+  dispose() {
+    this.detach();
+    this.reset();
+    this.listeners.clear();
+  }
+  notify() {
+    this.listeners.forEach((l) => l());
+  }
+  size(b) {
+    const k = Math.min(this.options.scale, this.options.maxSize / Math.max(b.width, b.height));
+    return { width: Math.max(1, Math.round(b.width * k)), height: Math.max(1, Math.round(b.height * k)) };
+  }
+  snap(t) {
+    const step = 1e3 / this.options.fps;
+    return Math.round(Math.round(t / step) * step * 1e3) / 1e3;
+  }
+  get(key) {
+    const v = this.cache.get(key);
+    if (v === void 0) return void 0;
+    this.cache.delete(key);
+    this.cache.set(key, v);
+    return v;
+  }
+  request(key, info2, work) {
+    if (this.cache.has(key) || this.pending.has(key) || this.failures.has(key)) return;
+    const generation = this.generation;
+    const run = work().then((url) => {
+      if (generation !== this.generation) return;
+      this.cache.set(key, url);
+      while (this.cache.size > this.options.maxEntries) this.cache.delete(this.cache.keys().next().value);
+    }).catch((error) => {
+      if (generation !== this.generation) return;
+      this.failures.set(key, { key, ...info2, error: error instanceof Error ? error : new Error(String(error)) });
+    }).finally(() => {
+      if (generation !== this.generation) return;
+      this.pending.delete(key);
+      this.notify();
+    });
+    this.pending.set(key, run);
+  }
+  describe(id) {
+    const provider = this.slot.require();
+    let d = this.descriptions.get(id);
+    if (!d) {
+      d = Promise.resolve(provider.describe(id));
+      this.descriptions.set(id, d);
+      d.catch(() => this.descriptions.delete(id));
+    }
+    return d;
+  }
+  subject(subject) {
+    if (subject.image.startsWith("data:")) return subject.image;
+    const host = this.host;
+    if (!host) return void 0;
+    const key = `img:${subject.image}`;
+    this.request(key, {}, () => host.loadImage(subject.image));
+    return this.get(key);
+  }
+  /** The pixels a layer's subject feeds its effect, at `size`. */
+  async subjectPixels(subject, size) {
+    const host = this.host;
+    const b = { x: 0, y: 0, ...size };
+    let s = subject;
+    if ("image" in s && !s.image.startsWith("data:")) s = { image: await host.loadImage(s.image) };
+    return host.rasterize(`<svg xmlns="http://www.w3.org/2000/svg" width="${size.width}" height="${size.height}" viewBox="0 0 ${size.width} ${size.height}">${subjectSvg(s, b, 1, void 0)}</svg>`, size.width, size.height);
+  }
+  layer(scene, active, b) {
+    const provider = this.slot.provider;
+    const host = this.host;
+    const layer = active.layer;
+    if (!provider || !host || !layer.effect) return void 0;
+    if (layer.subject && "slot" in layer.subject) return void 0;
+    const size = this.size(b);
+    const time = this.snap(active.time);
+    const key = `layer:${provider.id}:${layer.effect}:${JSON.stringify(layer.values ?? {})}:${JSON.stringify(layer.subject ?? null)}:${size.width}x${size.height}@${time}`;
+    const effect = layer.effect;
+    this.request(key, { layer: layer.id }, async () => {
+      const d = await this.describe(effect);
+      const values = resolveEffectValues(d, layer.values);
+      const input = effectLayerInput(d);
+      const inputs = layer.subject && input ? { [input]: await this.subjectPixels(layer.subject, size) } : void 0;
+      const pixels = await this.pool.render(provider, effect, size, { time, values, ...inputs ? { inputs } : {} });
+      return host.encode(pixels);
+    });
+    return this.get(key);
+  }
+  transition(scene, time, active) {
+    const provider = this.slot.provider;
+    const host = this.host;
+    const frameSvg = this.frameSvg;
+    if (!provider || !host || !frameSvg) return void 0;
+    const shot = scene.shots[active.shotIndex];
+    const t = shot.transition;
+    const size = this.size({ x: 0, y: 0, width: scene.artwork.width, height: scene.artwork.height });
+    const at = Math.min(active.end - 1e-3, this.snap(time));
+    const progress = (at - active.start) / (active.end - active.start);
+    const key = `transition:${sceneId(scene)}:${provider.id}:${t.effect}:${JSON.stringify(t.values ?? {})}:${size.width}x${size.height}@${at}`;
+    const fromKey = `from:${sceneId(scene)}:${active.shot}:${size.width}x${size.height}`;
+    this.request(key, { transition: active.shot }, async () => {
+      const d = await this.describe(t.effect);
+      const values = resolveEffectValues(d, t.values);
+      frameSvg(scene, Math.max(0, active.start - 1e-3));
+      frameSvg(scene, at);
+      await this.idleExcept(key);
+      const fromSvg = frameSvg(scene, Math.max(0, active.start - 1e-3));
+      const toSvg = frameSvg(scene, at);
+      let from = this.fromPixels.get(fromKey);
+      if (!from) {
+        from = host.rasterize(fromSvg, size.width, size.height);
+        this.fromPixels.set(fromKey, from);
+        if (this.fromPixels.size > 8) this.fromPixels.delete(this.fromPixels.keys().next().value);
+      }
+      const to = await host.rasterize(toSvg, size.width, size.height);
+      const pixels = await this.pool.render(provider, t.effect, size, { time: at - active.start, progress, values, inputs: { from: await from, to } });
+      return host.encode(pixels);
+    });
+    return this.get(key);
+  }
+  fromPixels = /* @__PURE__ */ new Map();
+  async idleExcept(key) {
+    for (; ; ) {
+      const others = [...this.pending].filter(([k]) => k !== key && !k.startsWith("transition:")).map(([, p]) => p);
+      if (!others.length) return;
+      await Promise.all(others);
+    }
+  }
+};
+function browserMotionLayerHost(doc = globalThis.document) {
+  const view = doc?.defaultView;
+  if (!doc || !view?.Image || typeof doc.createElement !== "function") return null;
+  const canvas = (width, height) => {
+    const c = doc.createElement("canvas");
+    c.width = width;
+    c.height = height;
+    const ctx = c.getContext("2d");
+    if (!ctx) throw new Error("This browser cannot draw layer pictures (no 2D canvas).");
+    return { c, ctx };
+  };
+  const load = (src, cors) => new Promise((resolve2, reject) => {
+    const image = new view.Image();
+    if (cors) image.crossOrigin = "anonymous";
+    image.onload = () => resolve2(image);
+    image.onerror = () => reject(new Error(`The picture ${src.startsWith("data:") ? "(a data: URL)" : `"${src}"`} could not be loaded; check the URL and that its server allows cross-origin use.`));
+    image.src = src;
+  });
+  return {
+    async rasterize(svg, width, height) {
+      const image = await load(svgDataUrl(svg), false);
+      const { ctx } = canvas(width, height);
+      ctx.drawImage(image, 0, 0, width, height);
+      const data = ctx.getImageData(0, 0, width, height);
+      return { width, height, data: data.data };
+    },
+    encode(pixels) {
+      const { c, ctx } = canvas(pixels.width, pixels.height);
+      const image = ctx.createImageData(pixels.width, pixels.height);
+      image.data.set(pixels.data);
+      ctx.putImageData(image, 0, 0);
+      return c.toDataURL("image/png");
+    },
+    async loadImage(url) {
+      if (url.startsWith("data:")) return url;
+      const image = await load(url, true);
+      const { c, ctx } = canvas(image.naturalWidth || 1, image.naturalHeight || 1);
+      ctx.drawImage(image, 0, 0);
+      return c.toDataURL("image/png");
+    }
+  };
+}
+var motionLayerSlot = (layer) => layer.subject && "slot" in layer.subject ? layer.subject.slot : void 0;
+
 // src/animation-editor/evaluate.ts
 var MOTION_DRAW_EFFECT_ID = "~draw";
 var TRANSFORM_PROPS = ["x", "y", "rotation", "scaleX", "scaleY", "follow"];
@@ -1767,8 +2162,8 @@ 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 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 };
+  const box2 = 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(box2[0]), y: tidy(box2[1]), width: tidy(box2[2]), height: tidy(box2[3]) }, ...view ? { view } : {}, clips };
 }
 function motionClipAttrs(clip) {
   const { shape: _shape, ...attrs } = clip;
@@ -1780,11 +2175,20 @@ 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 withCameraViewEffects(withViewBox(vectorDocumentToSvg(frame.document, { ...options, wrap }), frame.camera), frame.view, frame.camera, prefix);
+  if (!motionSceneHasLayers(scene)) return withCameraViewEffects(withViewBox(vectorDocumentToSvg(frame.document, { ...options, wrap }), frame.camera), frame.view, frame.camera, prefix);
+  const art = vectorDocumentToSvg(frame.document, { ...options, wrap, background: false });
+  let svg = withViewBox(withMotionShotLayers(art, scene, time, frame.camera, options.layers, options.background !== false), frame.camera);
+  const transition = options.transitions === false ? null : motionTransitionAt(scene, time);
+  if (transition) {
+    const picture = options.layers?.transition(scene, time, transition);
+    const from = picture ? "" : motionFrameToSvg(scene, Math.max(0, transition.start - 1e-3), { ...options, transitions: false, idPrefix: `${prefix}from-` });
+    svg = motionTransitionSvg(svg, from, transition, frame.camera, picture);
+  }
+  return withCameraViewEffects(svg, frame.view, frame.camera, prefix);
 }
-function withViewBox(svg, box) {
-  const f = (n) => String(Math.round(n * 1e3) / 1e3);
-  return svg.replace(/viewBox="[^"]*"/, `viewBox="${f(box.x)} ${f(box.y)} ${f(box.width)} ${f(box.height)}"`);
+function withViewBox(svg, box2) {
+  const f = (n2) => String(Math.round(n2 * 1e3) / 1e3);
+  return svg.replace(/viewBox="[^"]*"/, `viewBox="${f(box2.x)} ${f(box2.y)} ${f(box2.width)} ${f(box2.height)}"`);
 }
 
 // src/animation-editor/onion.ts
@@ -1822,7 +2226,7 @@ function motionPath(scene, id, options = {}) {
   const to = Math.min(timeline.duration, options.to ?? timeline.duration);
   let step = options.step && options.step > 0 ? options.step : 1e3 / 30;
   if ((to - from) / step > 400) step = (to - from) / 400;
-  const r = (n) => Math.round(n * 100) / 100;
+  const r = (n2) => Math.round(n2 * 100) / 100;
   const centreAt = (t) => {
     const node = indexMotionNodes(motionFrameAtCache(scene, t)).get(id);
     const b = node?.bounds;
@@ -1843,7 +2247,7 @@ function motionFrameAtCache(scene, t) {
 }
 function motionPathsSvg(paths, camera, color = "#f43f5e") {
   const w = Math.max(camera.width, camera.height) / 400;
-  const f = (n) => String(Math.round(n * 100) / 100);
+  const f = (n2) => String(Math.round(n2 * 100) / 100);
   return paths.filter((p) => p.points.length > 1).map(
     (p) => `<g data-motion-path="${p.id.replace(/"/g, "&quot;")}" fill="none" stroke="${color}" stroke-width="${f(w)}" stroke-linecap="round" stroke-linejoin="round" opacity="0.8"><polyline points="${p.points.map((q) => `${f(q.x)},${f(q.y)}`).join(" ")}" stroke-dasharray="${f(w * 3)} ${f(w * 2)}"/>${p.keys.map((k) => `<circle cx="${f(k.x)}" cy="${f(k.y)}" r="${f(w * 2.5)}" fill="${color}" stroke="none"/>`).join("")}</g>`
   ).join("");
@@ -1863,18 +2267,18 @@ function motionBlurTimes(scene, time, blur = {}) {
     const q = b.get(id)?.bounds;
     if (p && q) travel = Math.max(travel, Math.abs(p.x - q.x), Math.abs(p.y - q.y), Math.abs(p.x + p.width - q.x - q.width), Math.abs(p.y + p.height - q.y - q.height));
   }
-  const n = Math.min(most, Math.ceil(travel / 1.5));
-  if (n <= 1) return [time];
-  return Array.from({ length: n }, (_, k) => time - span / 2 + span * (k + 0.5) / n);
+  const n2 = Math.min(most, Math.ceil(travel / 1.5));
+  if (n2 <= 1) return [time];
+  return Array.from({ length: n2 }, (_, k) => time - span / 2 + span * (k + 0.5) / n2);
 }
 function averagedFrames(scene, times, options, prefix) {
-  const n = times.length;
-  return `<g data-motion-blur="${n}" style="isolation:isolate">${times.map((t, k) => {
+  const n2 = times.length;
+  return `<g data-motion-blur="${n2}" style="isolation:isolate">${times.map((t, k) => {
     const own = `${prefix}blur${k}-`;
     const frame = motionFrameToSvg(scene, t, { ...options, idPrefix: own, background: false });
     const view = /viewBox="([^"]*)"/.exec(frame)?.[1] ?? "";
-    const inner = k === n - 1 ? innerSvg(frame) : innerSvg(frame).replace(new RegExp(` id="(?!${own.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})[^"]*"`, "g"), "");
-    return `<svg viewBox="${view}" preserveAspectRatio="none" style="mix-blend-mode:plus-lighter" opacity="${Math.round(1e4 / n) / 1e4}">${inner}</svg>`;
+    const inner = k === n2 - 1 ? innerSvg(frame) : innerSvg(frame).replace(new RegExp(` id="(?!${own.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})[^"]*"`, "g"), "");
+    return `<svg viewBox="${view}" preserveAspectRatio="none" style="mix-blend-mode:plus-lighter" opacity="${Math.round(1e4 / n2) / 1e4}">${inner}</svg>`;
   }).join("")}</g>`;
 }
 var innerSvg = (svg) => svg.slice(svg.indexOf(">") + 1, svg.lastIndexOf("</svg>"));
@@ -1907,9 +2311,9 @@ function motionStageSvg(scene, time, options = {}) {
 }
 function motionContactSheetSvg(scene, times, options = {}) {
   const { columns, labels = true, ...frameOptions } = options;
-  const n = Math.max(1, times.length);
-  const cols = Math.max(1, Math.min(n, Math.floor(columns ?? Math.ceil(Math.sqrt(n)))));
-  const rows = Math.ceil(n / cols);
+  const n2 = Math.max(1, times.length);
+  const cols = Math.max(1, Math.min(n2, Math.floor(columns ?? Math.ceil(Math.sqrt(n2)))));
+  const rows = Math.ceil(n2 / cols);
   const { width: w, height: h } = scene.artwork;
   const gap = Math.round(Math.max(w, h) * 0.04);
   const label = labels ? Math.round(Math.max(12, h * 0.08)) : 0;
@@ -2100,7 +2504,7 @@ function checkMotionScene(scene) {
       if (!nodes.has(id)) issues.push(motionIssue("unknown-target", `Driver ${i + 1} names ${namedWithSuggestion(id, [...nodes.keys()])}, which the artwork does not have.`, { ids: [id] }));
   });
   {
-    const key = (n, p) => `${n}.${p}`;
+    const key = (n2, p) => `${n2}.${p}`;
     const edges = /* @__PURE__ */ new Map();
     for (const d of drivers) edges.set(key(d.target, d.property), [...edges.get(key(d.target, d.property)) ?? [], key(d.source.node, d.source.property)]);
     const state = /* @__PURE__ */ new Map();
@@ -2109,7 +2513,7 @@ function checkMotionScene(scene) {
       if (state.get(k) === 2) return false;
       if (state.get(k) === 1) return loop.push(...trail.slice(trail.indexOf(k)), k), true;
       state.set(k, 1);
-      for (const n of edges.get(k) ?? []) if (visit(n, [...trail, k])) return true;
+      for (const n2 of edges.get(k) ?? []) if (visit(n2, [...trail, k])) return true;
       state.set(k, 2);
       return false;
     };
@@ -2228,9 +2632,9 @@ var replaceShot = (scene, index, shot) => ({ ...scene, shots: scene.shots.map((s
 function freshShotId(scene, base = "shot") {
   const used = new Set(scene.shots.map((s) => s.id));
   if (!used.has(base)) return base;
-  let n = 2;
-  while (used.has(`${base}-${n}`)) n++;
-  return `${base}-${n}`;
+  let n2 = 2;
+  while (used.has(`${base}-${n2}`)) n2++;
+  return `${base}-${n2}`;
 }
 function applyOne(scene, edit) {
   switch (edit.op) {
@@ -2431,14 +2835,14 @@ function resolveMotionEditRefs(scene, edits) {
         if (v.startsWith("$$")) return v.slice(1);
         const m = REF.exec(v);
         if (!m) return v;
-        const n = m[1] === "last" ? i - 1 : Number(m[1]);
-        if (!(n >= 0 && n < i)) {
-          problem = `${where}: "${v}" refers to op ${n + 1}, but only ops before this one (1 to ${i}) can be referred to.`;
+        const n2 = m[1] === "last" ? i - 1 : Number(m[1]);
+        if (!(n2 >= 0 && n2 < i)) {
+          problem = `${where}: "${v}" refers to op ${n2 + 1}, but only ops before this one (1 to ${i}) can be referred to.`;
           return v;
         }
-        let value = outcomes[n];
+        let value = outcomes[n2];
         for (const part of m[2].match(/\.[A-Za-z_]\w*|\[\d+\]/g) ?? []) value = value == null ? void 0 : value[part.startsWith(".") ? part.slice(1) : part.slice(1, -1)];
-        if (value === void 0) problem = `${where}: "${v}" has no value; op ${n + 1} made ${JSON.stringify(outcomes[n])}.`;
+        if (value === void 0) problem = `${where}: "${v}" has no value; op ${n2 + 1} made ${JSON.stringify(outcomes[n2])}.`;
         return value;
       }
       if (Array.isArray(v)) return v.map(walk);
@@ -2528,11 +2932,11 @@ function motionNodePose(scene, id, time) {
   };
 }
 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]];
+  const n2 = times.length;
+  if (n2 <= 2) return [...Array(n2).keys()];
+  const keep = new Uint8Array(n2);
+  keep[0] = keep[n2 - 1] = 1;
+  const stack = [[0, n2 - 1]];
   while (stack.length) {
     const [a, b] = stack.pop();
     let worst = -1;
@@ -2559,8 +2963,8 @@ function simplifyTimedSamples(times, values, tol) {
   keep.forEach((k, i) => k && out.push(i));
   return out;
 }
-var round2 = (n, places = 2) => Math.round(n * 10 ** places) / 10 ** places || 0;
-var ms = (n) => Math.max(0, Math.round(n));
+var round2 = (n2, places = 2) => Math.round(n2 * 10 ** places) / 10 ** places || 0;
+var ms = (n2) => Math.max(0, Math.round(n2));
 function motionTakeProblems(scene, take) {
   const problems = [];
   const nodes = indexMotionNodes(scene.artwork.nodes);
@@ -2701,10 +3105,10 @@ function motionTakeShot(scene, take, options = {}) {
   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;
+function motionClientToDocument(camera, box2, clientX, clientY) {
+  const k = Math.min(box2.width / camera.width, box2.height / camera.height) || 1;
+  const ox = box2.left + (box2.width - camera.width * k) / 2;
+  const oy = box2.top + (box2.height - camera.height * k) / 2;
   return { x: camera.x + (clientX - ox) / k, y: camera.y + (clientY - oy) / k };
 }
 
@@ -2716,8 +3120,8 @@ var FLAIR_EASES = {
 };
 var FLAIR_EXPORT_VERSION = "0.39";
 function flairAtLeast(version, min) {
-  const a = version.split(".").map((n) => parseInt(n, 10) || 0);
-  const b = min.split(".").map((n) => parseInt(n, 10) || 0);
+  const a = version.split(".").map((n2) => parseInt(n2, 10) || 0);
+  const b = min.split(".").map((n2) => parseInt(n2, 10) || 0);
   for (let i = 0; i < Math.max(a.length, b.length); i++) if ((a[i] ?? 0) !== (b[i] ?? 0)) return (a[i] ?? 0) > (b[i] ?? 0);
   return true;
 }
@@ -2767,8 +3171,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 round4 = (n) => Math.round(n * 10 ** precision) / 10 ** precision;
-  const f = (n) => String(round4(n));
+  const round4 = (n2) => Math.round(n2 * 10 ** precision) / 10 ** precision;
+  const f = (n2) => String(round4(n2));
   const timeline = compileMotionScene(scene);
   const nodes = indexMotionNodes(scene.artwork.nodes);
   const notes = [];
@@ -2793,14 +3197,14 @@ function toFlairSvgMotion(scene, options = {}) {
   const usedIds = new Set(nodes.keys());
   const freshId = (base) => {
     let id = base;
-    for (let n = 2; usedIds.has(id); n++) id = `${base}-${n}`;
+    for (let n2 = 2; usedIds.has(id); n2++) id = `${base}-${n2}`;
     usedIds.add(id);
     return id;
   };
   for (const id of animatedNodes) {
     const entry = nodes.get(id);
     const node = entry.node;
-    const drawn = [...entry.ancestors.map((a) => nodes.get(a).node), node].every((n) => n.visible !== false);
+    const drawn = [...entry.ancestors.map((a) => nodes.get(a).node), node].every((n2) => n2.visible !== false);
     for (const [p, name] of [["clipRect", "reveal"], ["clipCircle", "iris"]]) {
       if (!drawn || !timeline.tracks.has(motionTrackKey(id, p))) continue;
       const wrapper = freshId(`${id}--${name}`);
@@ -2901,8 +3305,8 @@ function toFlairSvgMotion(scene, options = {}) {
   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);
+    const box2 = motionFrameAt(scene, t, { draw: false, offsets: false, effects: options.effects }).camera;
+    return [box2.x, box2.y, box2.width, box2.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) => {
@@ -2965,11 +3369,11 @@ function toFlairSvgMotion(scene, options = {}) {
         if (!same(from, to) || channel.kind === "view") emit(channel, a, b - a, from, to, ease, first);
         continue;
       }
-      const n = Math.max(1, Math.ceil((b - a) * fps / 1e3));
+      const n2 = Math.max(1, Math.ceil((b - a) * fps / 1e3));
       let prev = channel.value(a);
-      for (let k = 1; k <= n; k++) {
-        const t0 = a + (b - a) * (k - 1) / n;
-        const t1 = a + (b - a) * k / n;
+      for (let k = 1; k <= n2; k++) {
+        const t0 = a + (b - a) * (k - 1) / n2;
+        const t1 = a + (b - a) * k / n2;
         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) {
@@ -3001,10 +3405,10 @@ function toFlairSvgMotion(scene, options = {}) {
         continue;
       }
       const until = Math.min(seg.end, ...starts.filter((t) => t > seg.start));
-      const n = Math.max(1, Math.ceil((until - seg.start) * fps / 1e3));
-      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;
+      const n2 = Math.max(1, Math.ceil((until - seg.start) * fps / 1e3));
+      for (let k = 1; k <= n2; k++) {
+        const t0 = seg.start + (until - seg.start) * (k - 1) / n2;
+        const t1 = seg.start + (until - seg.start) * k / n2;
         animate.push({ ...along, ...t0 > 0 ? { delay: round4(t0) } : {}, ms: round4(t1 - t0), ease: "linear", at: [progress(t0), progress(t1)] });
         sampled++;
       }
@@ -3073,17 +3477,17 @@ function toFlairEffectDocument(scene, options = {}) {
   };
 }
 function viewJump(value, t0, t1) {
-  const box = (t) => value(t);
+  const box2 = (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;
+    if (apart(box2(lo), box2(mid)) >= apart(box2(mid), box2(hi))) hi = mid;
     else lo = mid;
   }
-  const a = box(lo);
-  const b = box(hi);
+  const a = box2(lo);
+  const b = box2(hi);
   return apart(a, b) > Math.min(a[2], b[2]) / 20 ? hi : void 0;
 }
 
@@ -3138,7 +3542,7 @@ function poseOf(value, entry) {
   return { dx: moved.x - c.x, dy: moved.y - c.y, rotation: Math.atan2(o[1], o[0]) * 180 / Math.PI, sx, sy };
 }
 var near = (a, b, eps = 1e-6) => Math.abs(a - b) < eps;
-var r3 = (n) => Math.round(n * 1e3) / 1e3;
+var r3 = (n2) => Math.round(n2 * 1e3) / 1e3;
 function commandsFor(anim, nodes, entered, notes) {
   const id = anim.id;
   const entry = nodes.get(id);
@@ -3269,17 +3673,17 @@ ${problems.join("\n")}`);
 }
 function presetColor(value) {
   if (typeof value === "string") return /^#[0-9a-f]{6}$/i.test(value) ? value.toLowerCase() : value;
-  if (Array.isArray(value) && value.length >= 3 && value.slice(0, 3).every((n) => typeof n === "number" && Number.isFinite(n)))
-    return `#${value.slice(0, 3).map((n) => Math.round(Math.min(1, Math.max(0, n)) * 255).toString(16).padStart(2, "0")).join("")}`;
+  if (Array.isArray(value) && value.length >= 3 && value.slice(0, 3).every((n2) => typeof n2 === "number" && Number.isFinite(n2)))
+    return `#${value.slice(0, 3).map((n2) => Math.round(Math.min(1, Math.max(0, n2)) * 255).toString(16).padStart(2, "0")).join("")}`;
   return void 0;
 }
 function fromFlairVectorEffect(effect, options = {}) {
   if (!effect || effect.kind !== "vector" || !effect.motion) throw new Error('Give a Flair vector effect: { kind: "vector", id, name, motion: { svg, animate } }.');
-  const result = fromFlairSvgMotion(effect.motion, { name: options.name ?? effect.id ?? effect.name, hold: options.hold ?? effect.hold, ...effect.trigger === "click" ? { clickSteps: true } : {} });
-  const names = new Set((result.scene.controls ?? []).map((c) => c.name));
+  const result2 = fromFlairSvgMotion(effect.motion, { name: options.name ?? effect.id ?? effect.name, hold: options.hold ?? effect.hold, ...effect.trigger === "click" ? { clickSteps: true } : {} });
+  const names = new Set((result2.scene.controls ?? []).map((c) => c.name));
   const presets = (effect.presets ?? []).map((p) => ({ name: p.name, values: Object.fromEntries(Object.entries(p.values).flatMap(([k, v]) => names.has(k) && presetColor(v) ? [[k, presetColor(v)]] : [])) })).filter((p) => Object.keys(p.values).length);
-  const scene = { ...result.scene, ...effect.description ? { description: effect.description } : {}, ...presets.length ? { presets } : {}, ...effect.trigger ? { trigger: effect.trigger } : {} };
-  const notes = [...result.notes];
+  const scene = { ...result2.scene, ...effect.description ? { description: effect.description } : {}, ...presets.length ? { presets } : {}, ...effect.trigger ? { trigger: effect.trigger } : {} };
+  const notes = [...result2.notes];
   return { scene, notes, issues: checkMotionScene(scene) };
 }
 
@@ -3297,8 +3701,8 @@ var STATIC_TR = () => ({
 function rgba(color) {
   const hex = typeof color === "string" ? normalizeTokenColor(color) : null;
   if (!hex) return null;
-  const n = (i) => parseInt(hex.slice(i, i + 2), 16) / 255;
-  return [n(1), n(3), n(5), hex.length >= 9 ? parseInt(hex.slice(7, 9), 16) / 255 : 1];
+  const n2 = (i) => parseInt(hex.slice(i, i + 2), 16) / 255;
+  return [n2(1), n2(3), n2(5), hex.length >= 9 ? parseInt(hex.slice(7, 9), 16) / 255 : 1];
 }
 function lottieContours(path, round4) {
   const out = [];
@@ -3329,9 +3733,9 @@ function lottieContours(path, round4) {
       add(cmd.x, cmd.y, cmd.x2, cmd.y2);
     } else if (cmd.type === "Z") {
       cur.c = true;
-      const n = cur.v.length;
-      if (n > 1 && Math.abs(cur.v[n - 1][0] - cur.v[0][0]) < 1e-9 && Math.abs(cur.v[n - 1][1] - cur.v[0][1]) < 1e-9) {
-        cur.i[0] = cur.i[n - 1];
+      const n2 = cur.v.length;
+      if (n2 > 1 && Math.abs(cur.v[n2 - 1][0] - cur.v[0][0]) < 1e-9 && Math.abs(cur.v[n2 - 1][1] - cur.v[0][1]) < 1e-9) {
+        cur.i[0] = cur.i[n2 - 1];
         cur.v.pop();
         cur.i.pop();
         cur.o.pop();
@@ -3353,7 +3757,7 @@ function staticParts(m) {
 function toLottie(scene, options = {}) {
   const fps = options.fps ?? scene.fps ?? 30;
   const precision = options.precision ?? 3;
-  const round4 = (n) => Math.round(n * 10 ** precision) / 10 ** precision;
+  const round4 = (n2) => Math.round(n2 * 10 ** precision) / 10 ** precision;
   const frame = (ms2) => round4(ms2 * fps / 1e3);
   const timeline = compileMotionScene(scene);
   const nodes = indexMotionNodes(scene.artwork.nodes);
@@ -3386,9 +3790,9 @@ function toLottie(scene, options = {}) {
       else keys.push(k);
     };
     const times = [.../* @__PURE__ */ new Set([0, ...segments.flatMap((s) => [s.start, s.end]), end])].filter((t) => t >= 0 && t <= end).sort((a, b) => a - b);
-    for (let n = 0; n + 1 < times.length; n++) {
-      const a = times[n];
-      const b = times[n + 1];
+    for (let n2 = 0; n2 + 1 < times.length; n2++) {
+      const a = times[n2];
+      const b = times[n2 + 1];
       const active = segments.filter((s) => s.start < b && s.end > a);
       if (!active.length) {
         key(a, value(a), "hold");
@@ -3471,7 +3875,7 @@ function toLottie(scene, options = {}) {
       return now && now.type === "path" ? vectorPathWorldBezier(expandVectorAppearances([now])[0]) : vectorPathWorldBezier(path);
     };
     const rest = lottieContours(toBezierPath(geometryAt(0)), round4);
-    rest.forEach((contour, n) => {
+    rest.forEach((contour, n2) => {
       let ks = { a: 0, k: contour };
       if (shapeSegments.length) {
         const keys = [];
@@ -3479,7 +3883,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)), round4)[n];
+          const c = lottieContours(toBezierPath(geometryAt(t)), round4)[n2];
           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] } } : {} });
         }
@@ -3488,7 +3892,7 @@ function toLottie(scene, options = {}) {
           sampled += keys.length;
         } else notes.push(`"${path.id}": its morph changes how many points the outline has, which Lottie cannot tween; it shows its starting shape.`);
       }
-      items.push({ ty: "sh", nm: `${path.id} ${n + 1}`, ks });
+      items.push({ ty: "sh", nm: `${path.id} ${n2 + 1}`, ks });
     });
     const fillFrom = owner(path, "fill");
     const strokeFrom = owner(path, "stroke");
@@ -3532,7 +3936,7 @@ function toLottie(scene, options = {}) {
     }
     return items;
   };
-  const shown = (list) => list.filter((n) => n.visible !== false);
+  const shown = (list) => list.filter((n2) => n2.visible !== false);
   const nodeGroup = (node) => {
     const entry = nodes.get(node.id);
     if (timeline.tracks.has(motionTrackKey(node.id, "clipRect")) || timeline.tracks.has(motionTrackKey(node.id, "clipCircle")))
@@ -3567,9 +3971,9 @@ function toLottie(scene, options = {}) {
   const camera = track("", "camera");
   const root = STATIC_TR();
   if (camera.length) {
-    const box = (t) => trackValue(camera, t) ?? [0, 0, artwork.width, artwork.height];
-    root.a = animate(camera, (t) => box(t).slice(0, 2), false);
-    root.s = animate(camera, (t) => [artwork.width / box(t)[2] * 100, artwork.height / box(t)[3] * 100], false);
+    const box2 = (t) => trackValue(camera, t) ?? [0, 0, artwork.width, artwork.height];
+    root.a = animate(camera, (t) => box2(t).slice(0, 2), false);
+    root.s = animate(camera, (t) => [artwork.width / box2(t)[2] * 100, artwork.height / box2(t)[3] * 100], false);
   }
   const op = Math.max(1, Math.ceil(end * fps / 1e3));
   const lottie = {
@@ -3610,8 +4014,8 @@ var kid = (el, name) => kids(el, name)[0] ?? null;
 var deep = (el, name) => el ? Array.from(el.getElementsByTagNameNS("*", name)) : [];
 var num = (el, attr, fallback = 0) => {
   const v = el?.getAttribute(attr);
-  const n = v === null || v === void 0 ? NaN : Number(v);
-  return Number.isFinite(n) ? n : fallback;
+  const n2 = v === null || v === void 0 ? NaN : Number(v);
+  return Number.isFinite(n2) ? n2 : fallback;
 };
 var dirname = (p) => p.slice(0, p.lastIndexOf("/") + 1);
 function resolve(base, target) {
@@ -3882,9 +4286,9 @@ function command(ctx, ctn, scene, artwork, target, hidden) {
     const motion = deep(ctn, "animMotion")[0];
     const d = motion?.getAttribute("path");
     if (!d) return null;
-    const entry = artwork.flatMap(function all(n) {
-      return n.type === "group" ? [n, ...n.children.flatMap(all)] : [n];
-    }).find((n) => n.id === target);
+    const entry = artwork.flatMap(function all(n2) {
+      return n2.type === "group" ? [n2, ...n2.children.flatMap(all)] : [n2];
+    }).find((n2) => n2.id === target);
     const t = entry?.transform ?? [1, 0, 0, 1, 0, 0];
     const p = entry?.type === "path" ? entry.subpaths[0]?.anchors : void 0;
     const xs = (p ?? []).map((a) => a.x);
@@ -3929,8 +4333,8 @@ async function fromPptxAnimation(data, options = {}) {
   if (!pres) throw new Error("This is not a PowerPoint file (.pptx): it has no ppt/presentation.xml.");
   const presRels = await rels(ctx, "ppt/presentation.xml");
   const slidePaths = deep(pres, "sldId").map((s) => presRels.get(s.getAttributeNS("http://schemas.openxmlformats.org/officeDocument/2006/relationships", "id") ?? s.getAttribute("r:id") ?? "") ?? "").filter(Boolean);
-  const n = options.slide ?? 1;
-  if (!(Number.isInteger(n) && n >= 1 && n <= slidePaths.length)) throw new Error(`There is no slide ${n}; the file has ${slidePaths.length} slide${slidePaths.length === 1 ? "" : "s"}.`);
+  const n2 = options.slide ?? 1;
+  if (!(Number.isInteger(n2) && n2 >= 1 && n2 <= slidePaths.length)) throw new Error(`There is no slide ${n2}; the file has ${slidePaths.length} slide${slidePaths.length === 1 ? "" : "s"}.`);
   const size = deep(pres, "sldSz")[0];
   const width = Math.round(num(size, "cx", 12192e3) / EMU);
   const height = Math.round(num(size, "cy", 6858e3) / EMU);
@@ -3945,8 +4349,8 @@ async function fromPptxAnimation(data, options = {}) {
     }
     break;
   }
-  const slide = await xml(ctx, slidePaths[n - 1]);
-  if (!slide) throw new Error(`Slide ${n} cannot be read.`);
+  const slide = await xml(ctx, slidePaths[n2 - 1]);
+  if (!slide) throw new Error(`Slide ${n2} cannot be read.`);
   const tree = deep(slide, "spTree")[0];
   const toPx = (x, y, w, h) => [x / EMU, y / EMU, w / EMU, h / EMU];
   const nodes = tree ? shapes(ctx, tree, toPx) : [];
@@ -3973,18 +4377,118 @@ async function fromPptxAnimation(data, options = {}) {
   }
   if (effects.length && !shots.length) ctx.notes.push("The slide's effects could not be read.");
   const artwork = { width, height, background: bg, nodes: [...nodes, ...hidden] };
-  const scene = { version: 1, name: `slide-${n}`, artwork, shots, ...shots.length > 1 ? { trigger: "click" } : {} };
+  const scene = { version: 1, name: `slide-${n2}`, artwork, shots, ...shots.length > 1 ? { trigger: "click" } : {} };
   const problems = motionSceneShapeProblems(scene);
   if (problems.length) throw new Error(`The imported scene is not well formed:
 ${problems.join("\n")}`);
   return { scene, notes: [...new Set(ctx.notes)], issues: checkMotionScene(scene), slides: slidePaths.length };
 }
 
+// src/animation-editor/layer-edit.ts
+function motionShotLayersInfo(scene, shot) {
+  const spans = motionLayerSpans(scene);
+  const timings = compileMotionScene(scene).shots;
+  return scene.shots.filter((s) => shot === void 0 || s.id === shot).map((s) => {
+    const timing = timings.find((t) => t.id === s.id);
+    return {
+      shot: s.id,
+      layers: spans.filter((sp) => sp.shot === s.id).map((sp) => ({ ...sp.layer, shot: s.id, index: sp.index, role: sp.role, start: sp.start, end: sp.end })),
+      transition: s.transition && timing.transitionEnd !== void 0 ? { ...s.transition, start: timing.start, end: timing.transitionEnd } : null
+    };
+  });
+}
+function findMotionShotLayer(scene, id) {
+  for (let shot = 0; shot < scene.shots.length; shot++) {
+    const index = (scene.shots[shot].layers ?? []).findIndex((l) => l.id === id);
+    if (index >= 0) return { shot, index };
+  }
+  return null;
+}
+var motionLayerIds = (scene) => scene.shots.flatMap((s) => (s.layers ?? []).map((l) => l.id));
+function freshMotionLayerId(scene, base = "layer") {
+  const used = new Set(motionLayerIds(scene));
+  for (let i = 1; ; i++) if (!used.has(`${base}${i}`)) return `${base}${i}`;
+}
+var kindHint = (d) => {
+  if (d.uses.includes("transition")) return "it is a transition: set it between shots with set_shot_transition";
+  if (d.kind === "camera") return "it is a camera move: set it with set_shot_camera_move";
+  if (d.kind === "motion") return "it animates artwork nodes: apply it with apply_effect";
+  return `its uses are ${d.uses.join(", ")}`;
+};
+function withPreset(d, preset2, values) {
+  if (preset2 === void 0) return values;
+  const p = d.presets.find((x) => x.name === preset2);
+  if (!p) throw new EffectUnsupportedError(`"${d.id}" has no preset "${preset2}"; ${d.presets.length ? `its presets are ${d.presets.map((x) => `"${x.name}"`).join(", ")}` : "it has no presets"}.`, d.id);
+  return { ...p.values, ...values ?? {} };
+}
+async function resolveMotionShotLayer(provider, layer) {
+  if (!layer.effect) {
+    if (!layer.subject) throw new Error('A layer needs an "effect", a "subject" or both.');
+    if (layer.preset !== void 0 || layer.values !== void 0) throw new Error('A bare subject has no controls; leave out "preset" and "values", or give an "effect".');
+    const { provider: _p, name: _n, ...rest } = layer;
+    return rest;
+  }
+  if (!provider) throw new NoEffectsProviderError();
+  const d = await provider.describe(layer.effect);
+  if (!effectLayerOffered(d)) throw new EffectUnsupportedError(`"${d.id}" (${d.name}) cannot be a layer; ${kindHint(d)}. A layer's effect is a generator, filter, overlay or title (search_effects with use "generator", "filter", "overlay" or "title").`, d.id);
+  const input = effectLayerInput(d);
+  if (layer.subject && !input) throw new EffectUnsupportedError(`"${d.id}" (${d.name}) draws its own picture and takes no subject; leave "subject" out, or pick a filter to change the subject.`, d.id);
+  if (!layer.subject && input && d.inputs.find((i) => i.name === input)?.required) throw new EffectUnsupportedError(`"${d.id}" (${d.name}) changes a picture; give a "subject": { "image": url }, { "svg": markup }, { "text": words } or { "slot": name }.`, d.id);
+  const values = withPreset(d, layer.preset, layer.values);
+  resolveEffectValues(d, values);
+  const out = { ...layer, provider: provider.id, name: d.name };
+  if (values && Object.keys(values).length) out.values = values;
+  else delete out.values;
+  return out;
+}
+async function resolveMotionShotTransition(provider, transition) {
+  if (!provider) throw new NoEffectsProviderError();
+  const d = await provider.describe(transition.effect);
+  if (!d.uses.includes("transition") || d.kind === "camera") throw new EffectUnsupportedError(`"${d.id}" (${d.name}) is not a transition (${kindHint(d)}); search_effects with use "transition" lists them.`, d.id);
+  if (transition.ms !== void 0 && !(transition.ms > 0 && transition.ms <= 6e4)) throw new Error(`A transition's "ms" is from 1 to 60000; got ${transition.ms}.`);
+  const values = withPreset(d, transition.preset, transition.values);
+  resolveEffectValues(d, values);
+  const out = { ...transition, ms: transition.ms ?? EFFECT_TRANSITION_MS, provider: provider.id, name: d.name };
+  if (values && Object.keys(values).length) out.values = values;
+  else delete out.values;
+  return out;
+}
+async function checkMotionShotLayers(scene, provider) {
+  const issues = [];
+  if (scene.shots[0]?.transition) issues.push(motionIssue("transition-first-shot", `Shot "${scene.shots[0].id}" is the first shot, so its transition does not play; move it to a later shot or clear it.`, { shot: scene.shots[0].id }));
+  for (const shot of scene.shots)
+    for (const layer of shot.layers ?? [])
+      if (layer.subject && "slot" in layer.subject) issues.push(motionIssue("layer-slot-empty", `Layer "${layer.id}" shows slot "${layer.subject.slot}", which is empty; set its "subject" to a picture with update_shot_layer.`, { shot: shot.id, ids: [layer.id] }));
+  const effectLayers = scene.shots.flatMap((s) => (s.layers ?? []).filter((l) => l.effect).map((l) => ({ shot: s.id, layer: l })));
+  const transitions = scene.shots.slice(1).filter((s) => s.transition);
+  if (!provider) {
+    if (effectLayers.length) issues.push(motionIssue("layer-not-drawn", `Layers ${effectLayers.map((e) => `"${e.layer.id}"`).join(", ")} name provider effects, but no effects provider is set, so they are left out of frames; set a provider to draw them.`, { ids: effectLayers.map((e) => e.layer.id) }));
+    if (transitions.length) issues.push(motionIssue("transition-not-played", `Shots ${transitions.map((s) => `"${s.id}"`).join(", ")} name transitions, but no effects provider is set, so they crossfade; set a provider to play them.`));
+    return issues;
+  }
+  for (const { shot, layer } of effectLayers) {
+    try {
+      await resolveMotionShotLayer(provider, layer);
+    } catch (error) {
+      const code = error.code === "invalid_values" || /preset/.test(error.message) ? "layer-effect-values" : "layer-effect-unknown";
+      issues.push(motionIssue(code, `Layer "${layer.id}": ${error.message}`, { shot, ids: [layer.id] }));
+    }
+  }
+  for (const shot of transitions) {
+    try {
+      await resolveMotionShotTransition(provider, shot.transition);
+    } catch (error) {
+      issues.push(motionIssue(error.code === "invalid_values" ? "layer-effect-values" : "transition-unknown", error.message, { shot: shot.id }));
+    }
+  }
+  return issues;
+}
+
 // src/animation-editor/effects.ts
 var sourceOf = (c) => c.source;
 function motionSceneEffects(scene) {
   const out = /* @__PURE__ */ new Map();
-  const groups = new Set(scene.artwork.nodes.filter((n) => n.type === "group").map((n) => n.id));
+  const groups = new Set(scene.artwork.nodes.filter((n2) => n2.type === "group").map((n2) => n2.id));
   for (const shot of scene.shots) {
     for (const c of shot.run) {
       const s = sourceOf(c);
@@ -4005,7 +4509,7 @@ function motionSceneEffects(scene) {
 }
 function nextMotionEffectInstance(scene) {
   const used = /* @__PURE__ */ new Set([...motionSceneEffects(scene).map((e) => e.instance), ...scene.shots.map((s) => s.id)]);
-  const walk = (nodes) => nodes.forEach((n) => (used.add(n.id), n.type === "group" && walk(n.children)));
+  const walk = (nodes) => nodes.forEach((n2) => (used.add(n2.id), n2.type === "group" && walk(n2.children)));
   walk(scene.artwork.nodes);
   for (let i = 1; ; i++) if (!used.has(`fx${i}`)) return `fx${i}`;
 }
@@ -4021,10 +4525,10 @@ function motionCommandsFromEffect(artwork, motion, source) {
 }
 function prefixed(nodes, shots, prefix) {
   const map = /* @__PURE__ */ new Map();
-  const rename = (list) => list.map((n) => {
-    map.set(n.id, prefix + n.id);
-    const next = { ...n, id: prefix + n.id };
-    if (next.type === "group") next.children = rename(n.children);
+  const rename = (list) => list.map((n2) => {
+    map.set(n2.id, prefix + n2.id);
+    const next = { ...n2, id: prefix + n2.id };
+    if (next.type === "group") next.children = rename(n2.children);
     return next;
   });
   const out = rename(nodes);
@@ -4040,14 +4544,14 @@ function prefixed(nodes, shots, prefix) {
   }));
   return { nodes: out, shots: remapped };
 }
-function motionPartsFromVectorEffect(artwork, motion, source, box = { x: 0, y: 0, width: artwork.width, height: artwork.height }) {
+function motionPartsFromVectorEffect(artwork, motion, source, box2 = { x: 0, y: 0, width: artwork.width, height: artwork.height }) {
   const imported = fromFlairSvgMotion({ svg: motion.svg, animate: [...motion.animate ?? []] }, { hold: 0 });
   const art = imported.scene.artwork;
   const prefix = `${source.instance}-`;
   const { nodes, shots } = prefixed(art.nodes, imported.scene.shots, prefix);
-  const k = Math.min(box.width / art.width, box.height / art.height);
-  const dx = box.x + (box.width - art.width * k) / 2;
-  const dy = box.y + (box.height - art.height * k) / 2;
+  const k = Math.min(box2.width / art.width, box2.height / art.height);
+  const dx = box2.x + (box2.width - art.width * k) / 2;
+  const dy = box2.y + (box2.height - art.height * k) / 2;
   const group = { type: "group", id: source.instance, name: source.name ?? source.effect, children: nodes, transform: [k, 0, 0, k, dx, dy] };
   const tagged = shots.map((s, i) => ({ ...s, id: i === 0 ? source.instance + "-shot" : `${source.instance}-shot-${i + 1}`, run: tag(s.run, source) }));
   return { group, shots: tagged.map((s) => s.hold === 0 ? (({ hold: _h, ...rest }) => rest)(s) : s), notes: imported.notes };
@@ -4066,7 +4570,7 @@ function withoutMotionEffect(scene, instance) {
     else if (run.length === 0) removedShots.push(shot.id);
     else shots.push({ ...shot, run });
   }
-  const artwork = { ...scene.artwork, nodes: scene.artwork.nodes.filter((n) => n.id !== instance) };
+  const artwork = { ...scene.artwork, nodes: scene.artwork.nodes.filter((n2) => n2.id !== instance) };
   return { scene: { ...scene, shots, artwork }, place, removedShots };
 }
 
@@ -4079,6 +4583,8 @@ var AnimationEditorController = class {
   player;
   /** The effects provider slot (see `setEffectsProvider`). */
   effects = new EffectsSlot();
+  /** Renders shot layer and transition pictures for frames (see `MotionLayersEngine`). */
+  layers;
   scene;
   issues;
   selection = null;
@@ -4098,6 +4604,11 @@ var AnimationEditorController = class {
     this.readOnly = options.readOnly ?? false;
     this.onChange = options.onChange;
     if (options.effects) this.effects.set(options.effects);
+    this.layers = new MotionLayersEngine({
+      slot: this.effects,
+      host: options.layerHost === void 0 ? browserMotionLayerHost() : options.layerHost,
+      frameSvg: (scene, time) => motionFrameToSvg(scene, time, { effects: this.effects.provider, layers: this.layers, transitions: false, pretty: false })
+    });
     this.player = new AnimationPlayer({ clock: options.clock, duration: () => compileMotionScene(this.scene).duration, loop: this.scene.loop ?? "none" });
     this.state = this.computeState();
     this.connect();
@@ -4109,7 +4620,8 @@ var AnimationEditorController = class {
       this.history.subscribe(() => {
         if (!this.applying) this.notify();
       }),
-      this.effects.subscribe(() => this.notify())
+      this.effects.subscribe(() => this.notify()),
+      this.layers.subscribe(() => this.notify())
     );
   }
   /**
@@ -4228,10 +4740,10 @@ var AnimationEditorController = class {
   apply(edits, label = "Edit animation", options = {}) {
     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);
-    if (!options.dryRun) this.commit(label, result.scene, options.merge);
-    return result;
+    const result2 = applyMotionEdits(this.scene, edits);
+    if (!result2.ok) return options.dryRun ? result2 : this.refuse(result2.error);
+    if (!options.dryRun) this.commit(label, result2.scene, options.merge);
+    return result2;
   }
   /** Replaces the artwork (e.g. from a vector editor's `onChange`), as one undo step. */
   setArtwork(artwork, label = "Change artwork") {
@@ -4284,7 +4796,7 @@ var AnimationEditorController = class {
   }
   knownNodes(ids) {
     const all = /* @__PURE__ */ new Set();
-    const walk = (nodes) => nodes.forEach((n) => (all.add(n.id), n.type === "group" && walk(n.children)));
+    const walk = (nodes) => nodes.forEach((n2) => (all.add(n2.id), n2.type === "group" && walk(n2.children)));
     walk(this.scene.artwork.nodes);
     const missing = ids.filter((id) => !all.has(id));
     if (missing.length) throw new Error(`The artwork has no node ${missing.map((m) => `"${m}"`).join(", ")}; get_animation lists the node ids.`);
@@ -4350,10 +4862,10 @@ var AnimationEditorController = class {
       const provider = this.effects.require();
       const source = { instance, effect: d.id, provider: provider.id, name: d.name, values: merged };
       if (was.kind === "vector") {
-        const old = this.scene.artwork.nodes.find((n) => n.id === instance);
+        const old = this.scene.artwork.nodes.find((n2) => n2.id === instance);
         const motion2 = await provider.applyVectorEffect(d.id, motionArtworkSvg(bare.artwork), merged);
         const { group, shots: shots2, notes: notes2 } = motionPartsFromVectorEffect(bare.artwork, motion2, source);
-        const index = this.scene.artwork.nodes.findIndex((n) => n.id === instance);
+        const index = this.scene.artwork.nodes.findIndex((n2) => n2.id === instance);
         const nodes = [...bare.artwork.nodes];
         nodes.splice(Math.max(0, index), 0, old?.transform ? { ...group, transform: old.transform } : group);
         const at = this.scene.shots.findIndex((s) => was.shots.includes(s.id));
@@ -4517,9 +5029,151 @@ var AnimationEditorController = class {
   frame(time = this.player.currentTime, options = {}) {
     return motionFrameAt(this.viewScene(), time, { effects: this.effects.provider, ...options });
   }
-  /** The scene at `time` (default: the playhead) as SVG. */
+  /**
+   * The scene at `time` (default: the playhead) as SVG. Shot layer and transition pictures that
+   * are not rendered yet are left out (a transition crossfades) and come in on a later frame;
+   * `toSvgExact` waits for them.
+   */
   toSvg(time = this.player.currentTime, options = {}) {
-    return motionStageSvg(this.viewScene(), time, { effects: this.effects.provider, ...options });
+    return motionStageSvg(this.viewScene(), time, { effects: this.effects.provider, layers: this.layers, ...options });
+  }
+  /** Like `toSvg`, once every shot layer and transition picture of the frame is rendered (or has failed). */
+  async toSvgExact(time = this.player.currentTime, options = {}) {
+    let svg = this.toSvg(time, options);
+    for (let pass = 0; pass < 8 && this.layers.busy; pass++) {
+      await this.layers.idle();
+      svg = this.toSvg(time, options);
+    }
+    return svg;
+  }
+  // ---------------------------------------------------------------------------------------
+  // Shot layers and transitions
+  // ---------------------------------------------------------------------------------------
+  /** Every shot's layers and transition (or one shot's). Throws for an unknown shot, naming the shots. */
+  shotLayers(shot) {
+    if (shot !== void 0 && !this.scene.shots.some((s) => s.id === shot)) throw new Error(this.noShot(shot));
+    return motionShotLayersInfo(this.scene, shot);
+  }
+  noShot(shot) {
+    return `There is no shot "${shot}"; the shots are ${this.scene.shots.map((s) => `"${s.id}"`).join(", ") || "none yet"}.`;
+  }
+  noLayer(layer) {
+    const ids = this.scene.shots.flatMap((s) => (s.layers ?? []).map((l) => `"${l.id}"`));
+    return `There is no layer "${layer}"; ${ids.length ? `the layers are ${ids.join(", ")}` : "the scene has no layers yet (add_shot_layer adds one)"}.`;
+  }
+  layerResult(shot, layerId, notes = []) {
+    const info2 = motionShotLayersInfo(this.scene, shot)[0];
+    const layer = layerId ? info2.layers.find((l) => l.id === layerId) : void 0;
+    return { ok: true, ...info2, ...layer ? { layer } : {}, notes };
+  }
+  async layerEdit(work, merge) {
+    const reason = this.readOnlyReason();
+    if (reason) return this.refuse(reason);
+    let plan;
+    try {
+      plan = await work();
+    } catch (error) {
+      if (isEffectError(error) || error instanceof Error) return this.refuse(error.message);
+      throw error;
+    }
+    const id = this.scene.shots[plan.shot].id;
+    const r = this.apply(plan.layers.length ? { op: "update_shot", shot: id, set: { layers: plan.layers } } : { op: "update_shot", shot: id, remove: ["layers"] }, plan.label, { merge });
+    if (!r.ok) return r;
+    return this.layerResult(id, plan.layer, plan.notes);
+  }
+  /**
+   * Adds a layer to a shot: a provider effect (a generator, filter, overlay or title), optionally
+   * applied to a `subject`, or a bare subject. Checked against the provider first; at `index`
+   * (default the top). One undo step. Returns the layer (with its id) and the shot's layers.
+   */
+  addShotLayer(shot, layer, options = {}) {
+    return this.layerEdit(async () => {
+      const at = this.scene.shots.findIndex((s) => s.id === shot);
+      if (at < 0) throw new Error(this.noShot(shot));
+      const id = layer.id ?? freshMotionLayerId(this.scene);
+      if (findMotionShotLayer(this.scene, id)) throw new Error(`Layer id "${id}" is already used; choose another (e.g. "${freshMotionLayerId(this.scene)}").`);
+      const resolved = await resolveMotionShotLayer(this.effects.provider, { ...layer, id });
+      const layers = [...this.scene.shots[at].layers ?? []];
+      const index = options.index ?? layers.length;
+      if (!Number.isInteger(index) || index < 0 || index > layers.length) throw new Error(`"index" must be a whole number from 0 to ${layers.length} (got ${index}).`);
+      layers.splice(index, 0, resolved);
+      const notes = resolved.subject && "slot" in resolved.subject ? [`The subject is slot "${resolved.subject.slot}", which draws nothing until it is filled; set "subject" with update_shot_layer.`] : [];
+      return { shot: at, layers, label: `Add layer ${resolved.name ?? id}`, layer: id, notes };
+    });
+  }
+  /** Changes a layer's fields (`null` clears an optional one); the result is checked against the provider. One undo step (`merge` folds a slider drag into one). */
+  updateShotLayer(layer, changes, options = {}) {
+    return this.layerEdit(async () => {
+      const found = findMotionShotLayer(this.scene, layer);
+      if (!found) throw new Error(this.noLayer(layer));
+      const was = this.scene.shots[found.shot].layers[found.index];
+      const next = { ...was };
+      for (const [k, v] of Object.entries(changes)) {
+        if (v === null) delete next[k];
+        else if (v !== void 0) next[k] = v;
+      }
+      if (changes.effect !== void 0 && changes.effect !== was.effect && changes.values === void 0) delete next.values;
+      const resolved = await resolveMotionShotLayer(this.effects.provider, next);
+      const layers = this.scene.shots[found.shot].layers.map((l, i) => i === found.index ? resolved : l);
+      return { shot: found.shot, layers, label: `Change layer ${resolved.name ?? layer}`, layer };
+    }, options.merge);
+  }
+  /** Removes a layer. One undo step. Works without a provider. */
+  removeShotLayer(layer) {
+    return this.layerEdit(async () => {
+      const found = findMotionShotLayer(this.scene, layer);
+      if (!found) throw new Error(this.noLayer(layer));
+      const layers = this.scene.shots[found.shot].layers.filter((_, i) => i !== found.index);
+      return { shot: found.shot, layers, label: "Remove layer" };
+    });
+  }
+  /** Moves a layer to `index` in its shot (0 = bottom). One undo step. */
+  moveShotLayer(layer, index) {
+    return this.layerEdit(async () => {
+      const found = findMotionShotLayer(this.scene, layer);
+      if (!found) throw new Error(this.noLayer(layer));
+      const layers = [...this.scene.shots[found.shot].layers];
+      if (!Number.isInteger(index) || index < 0 || index >= layers.length) throw new Error(`"index" must be a whole number from 0 to ${layers.length - 1} (got ${index}).`);
+      const [moved] = layers.splice(found.index, 1);
+      layers.splice(index, 0, moved);
+      return { shot: found.shot, layers, label: "Move layer", layer };
+    });
+  }
+  /**
+   * Sets the provider transition into a shot from the shot before (not the first shot). Checked
+   * against the provider (its use, preset and values; its length is written out). With no camera
+   * move in, the camera cuts. One undo step (`merge` folds a slider drag into one).
+   */
+  async setShotTransition(shot, transition, options = {}) {
+    const reason = this.readOnlyReason();
+    if (reason) return this.refuse(reason);
+    const at = this.scene.shots.findIndex((s) => s.id === shot);
+    if (at < 0) return this.refuse(this.noShot(shot));
+    if (at === 0) return this.refuse(`Shot "${shot}" is the first shot, so there is no shot before it to transition from; set the transition on a later shot${this.scene.shots[1] ? ` (e.g. "${this.scene.shots[1].id}")` : ""}.`);
+    let resolved;
+    try {
+      const { provider: _p, name: _n, ...given } = transition;
+      resolved = await resolveMotionShotTransition(this.effects.provider, given);
+    } catch (error) {
+      if (isEffectError(error) || error instanceof Error) return this.refuse(error.message);
+      throw error;
+    }
+    if (!this.scene.shots.some((s) => s.id === shot)) return this.refuse(`Shot "${shot}" was removed while the transition was checked.`);
+    const r = this.apply({ op: "update_shot", shot, set: { transition: resolved } }, `Transition ${resolved.name ?? resolved.effect}`, { merge: options.merge });
+    if (!r.ok) return r;
+    const camera = this.scene.shots.find((s) => s.id === shot).camera;
+    return this.layerResult(shot, void 0, camera?.in === void 0 ? ["With no camera move in, the camera cuts to this shot's framing and the transition does the move."] : []);
+  }
+  /** Removes a shot's transition. One undo step. Works without a provider. */
+  clearShotTransition(shot) {
+    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(this.noShot(shot));
+    if (!found.transition) return this.refuse(`Shot "${shot}" has no transition to clear.`);
+    const r = this.apply({ op: "update_shot", shot, remove: ["transition"] }, "Clear transition");
+    if (!r.ok) return r;
+    return this.layerResult(shot, void 0);
   }
   // ---------------------------------------------------------------------------------------
   // Recording
@@ -4568,8 +5222,8 @@ var AnimationEditorController = class {
     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);
+  clientToDocument(box2, clientX, clientY) {
+    return motionClientToDocument(this.frame().camera, box2, clientX, clientY);
   }
   /**
    * Starts a stage drag while recording: from `point` (document units), `move` drags the node,
@@ -4633,9 +5287,9 @@ var AnimationEditorController = class {
       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);
+    const result2 = this.recordTake({ samples: r.samples, length }, r.options);
     this.player.seek(r.start);
-    return result;
+    return result2;
   }
   /** Stops recording and throws the take away. */
   cancelRecording() {
@@ -4655,10 +5309,10 @@ var AnimationEditorController = class {
     } 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;
+    const result2 = this.apply({ op: "insert_shots", shots: [made.shot], at: made.at }, "Record take", { dryRun: options.dryRun });
+    if (!result2.ok) return result2;
     if (!options.dryRun) this.select({ shot: made.shot.id });
-    return { ok: true, ...made, issues: result.issues };
+    return { ok: true, ...made, issues: result2.issues };
   }
   /** The scene as a Flair `SvgMotion`. */
   toFlairMotion(options = {}) {
@@ -5019,7 +5673,7 @@ function withDefs(schema) {
   };
   visit(schema);
   if (!used.size) return schema;
-  return { ...schema, $defs: Object.fromEntries(Object.keys(DEFS).filter((n) => used.has(n)).map((n) => [n, DEFS[n]])) };
+  return { ...schema, $defs: Object.fromEntries(Object.keys(DEFS).filter((n2) => used.has(n2)).map((n2) => [n2, DEFS[n2]])) };
 }
 var SETTINGS = {
   name: { type: "string", minLength: 1, description: 'Short name, e.g. "logo-reveal".' },
@@ -5084,7 +5738,7 @@ function describeElement(node, ancestors) {
     ...effects.length ? { effects } : {}
   };
 }
-var round3 = (n) => Math.round(n * 10) / 10;
+var round3 = (n2) => Math.round(n2 * 10) / 10;
 function describeMotionElements(scene) {
   return [...indexMotionNodes(scene.artwork.nodes).values()].map((e) => ({
     ...describeElement(e.node, e.ancestors),
@@ -5125,20 +5779,20 @@ function createAnimationEditorToolProvider(controller, options = {}) {
     return controller.readOnlyReason();
   };
   const scene = () => controller.getScene();
-  const outcome = (result, extra = {}) => {
-    if (!result.ok) throw new Error(result.error);
-    const timeline = compileMotionScene(result.scene);
+  const outcome = (result2, extra = {}) => {
+    if (!result2.ok) throw new Error(result2.error);
+    const timeline = compileMotionScene(result2.scene);
     return {
       ...extra,
       duration: timeline.duration,
       shots: timeline.shots.map((s) => ({ id: s.id, start: s.start, end: s.end })),
-      issues: issueSummary(result.issues),
-      ...result.hints.length ? { hints: result.hints } : {}
+      issues: issueSummary(result2.issues),
+      ...result2.hints.length ? { hints: result2.hints } : {}
     };
   };
   const apply = (edits, label, extra) => {
-    const result = controller.apply(edits, label);
-    return outcome(result, result.ok && extra ? extra(result.scene) : {});
+    const result2 = controller.apply(edits, label);
+    return outcome(result2, result2.ok && extra ? extra(result2.scene) : {});
   };
   const getAnimation = {
     name: "get_animation",
@@ -5266,7 +5920,7 @@ function createAnimationEditorToolProvider(controller, options = {}) {
         }
         return { times, svg: sheet };
       }
-      const svg = controller.toSvg(t, { pretty: false, ...overlays });
+      const svg = await controller.toSvgExact(t, { pretty: false, ...overlays });
       if (format === "png") {
         if (!options.rasterize) throw new Error('This host cannot make PNG images; call render_animation_frame with format "svg".');
         const image = await options.rasterize(svg, { width: s.artwork.width, height: s.artwork.height });
@@ -5326,7 +5980,7 @@ function createAnimationEditorToolProvider(controller, options = {}) {
       if (!nodes.has(group)) throw new Error(`There is no element ${namedWithSuggestion(group, [...nodes.keys()])}.`);
       const layout = motionTextLayout(nodes, group);
       if (!layout) throw new Error(`"${group}" is not a group of paths; convert the text to outlines (one path a letter) and group it.`);
-      return { group, letters: layout.lines.reduce((n, l) => n + l.words.reduce((m, w) => m + w.letters.length, 0), 0), ...layout };
+      return { group, letters: layout.lines.reduce((n2, l) => n2 + l.words.reduce((m, w) => m + w.letters.length, 0), 0), ...layout };
     }
   };
   const getMotionPath = {
@@ -5415,17 +6069,17 @@ function createAnimationEditorToolProvider(controller, options = {}) {
     ),
     annotations: { title: "Import a PowerPoint slide's animation", ...DESTRUCTIVE },
     handler: async ({ data, slide, dry_run = false }) => {
-      let result;
+      let result2;
       try {
         const bytes = Uint8Array.from(atob(data.replace(/\s+/g, "")), (c) => c.charCodeAt(0));
-        result = await fromPptxAnimation(bytes, slide ? { slide } : {});
+        result2 = await fromPptxAnimation(bytes, slide ? { slide } : {});
       } catch (error) {
         throw new Error(`The slide could not be imported: ${error.message} Nothing was changed.`);
       }
-      const report = { slides: result.slides, notes: result.notes, issues: issueSummary(result.issues), shots: describeMotionShots(result.scene).map(({ id, start, end, commands }) => ({ id, start, end, commands: commands.length })) };
+      const report = { slides: result2.slides, notes: result2.notes, issues: issueSummary(result2.issues), shots: describeMotionShots(result2.scene).map(({ id, start, end, commands }) => ({ id, start, end, commands: commands.length })) };
       if (dry_run) return { dry_run: true, ...report, hint: "Nothing was replaced; call again without dry_run to import." };
-      const applied = controller.apply({ op: "replace_scene", scene: result.scene }, "Import PowerPoint slide");
-      return outcome(applied, applied.ok ? { ...report, elements: describeMotionElements(result.scene) } : {});
+      const applied = controller.apply({ op: "replace_scene", scene: result2.scene }, "Import PowerPoint slide");
+      return outcome(applied, applied.ok ? { ...report, elements: describeMotionElements(result2.scene) } : {});
     }
   };
   const importFlairEffect = {
@@ -5444,16 +6098,16 @@ function createAnimationEditorToolProvider(controller, options = {}) {
     annotations: { title: "Import a Flair effect", ...DESTRUCTIVE },
     handler: ({ effect, motion, name, dry_run = false }) => {
       if (effect === void 0 === (motion === void 0)) throw new Error('Give exactly one of "effect" (a Flair vector effect) or "motion" (a Flair SvgMotion). Nothing was changed.');
-      let result;
+      let result2;
       try {
-        result = effect !== void 0 ? fromFlairVectorEffect(effect, name ? { name } : {}) : fromFlairSvgMotion(motion, name ? { name } : {});
+        result2 = effect !== void 0 ? fromFlairVectorEffect(effect, name ? { name } : {}) : fromFlairSvgMotion(motion, name ? { name } : {});
       } catch (error) {
         throw new Error(`The Flair effect could not be imported: ${error.message} Nothing was changed.`);
       }
-      const report = { notes: result.notes, issues: issueSummary(result.issues), shots: describeMotionShots(result.scene).map(({ id, start, end, commands }) => ({ id, start, end, commands: commands.length })) };
+      const report = { notes: result2.notes, issues: issueSummary(result2.issues), shots: describeMotionShots(result2.scene).map(({ id, start, end, commands }) => ({ id, start, end, commands: commands.length })) };
       if (dry_run) return { dry_run: true, ...report, hint: "Nothing was replaced; call again without dry_run to import." };
-      const applied = controller.apply({ op: "replace_scene", scene: result.scene }, "Import Flair effect");
-      return outcome(applied, applied.ok ? { ...report, elements: describeMotionElements(result.scene) } : {});
+      const applied = controller.apply({ op: "replace_scene", scene: result2.scene }, "Import Flair effect");
+      return outcome(applied, applied.ok ? { ...report, elements: describeMotionElements(result2.scene) } : {});
     }
   };
   const fitAnimation = {
@@ -5516,18 +6170,18 @@ function createAnimationEditorToolProvider(controller, options = {}) {
     ),
     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 result2 = controller.recordTake({ samples, length }, { id, label, at, tolerance, dryRun: dry_run });
+      if (!result2.ok) throw new Error(result2.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 report = { shot: result2.shot.id, at: result2.at, start: Math.round(result2.start), samples: result2.samples };
+      if (dry_run) return { dry_run: true, ...report, run: result2.shot.run, hold: result2.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);
+      const described = describeMotionShots(s).find((x) => x.id === result2.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)
+        issues: issueSummary(result2.issues)
       };
     }
   };
@@ -5606,16 +6260,16 @@ function createAnimationEditorToolProvider(controller, options = {}) {
       for (const shot of s.shots) {
         if (only && !only.has(shot.id)) continue;
         const run = [];
-        let n = 0;
+        let n2 = 0;
         for (const c of shot.run) {
           run.push(c);
           if (c.type === "wait" || !c.targets.includes(from)) continue;
           const { delay: _delay, ...rest } = c;
           run.push({ ...rest, targets: to, with: "previous", ...stagger ? { stagger } : {} });
-          n++;
+          n2++;
         }
-        if (n) {
-          copied[shot.id] = n;
+        if (n2) {
+          copied[shot.id] = n2;
           edits.push({ op: "update_shot", shot: shot.id, set: { run } });
         }
       }
@@ -5742,8 +6396,8 @@ function createAnimationEditorToolProvider(controller, options = {}) {
     handler: ({ ops, dry_run = false }) => {
       const refs = resolveMotionEditRefs(controller.getScene(), ops);
       if (!refs.ok) throw new Error(refs.error);
-      const result = controller.apply(refs.edits, "Edit animation", { dryRun: dry_run });
-      return outcome(result, { outcomes: refs.outcomes, ...dry_run ? { dry_run: true, hint: "Nothing was applied; call again without dry_run to apply." } : {} });
+      const result2 = controller.apply(refs.edits, "Edit animation", { dryRun: dry_run });
+      return outcome(result2, { outcomes: refs.outcomes, ...dry_run ? { dry_run: true, hint: "Nothing was applied; call again without dry_run to apply." } : {} });
     }
   };
   const writeAnimation = {
@@ -5907,7 +6561,7 @@ function motionCommandFields(type) {
   const schema = branch(type);
   if (!schema?.properties) return [];
   const required = new Set(schema.required ?? []);
-  const fields = Object.entries(schema.properties).filter(([name]) => name !== "type").map(([name, s]) => {
+  const fields2 = Object.entries(schema.properties).filter(([name]) => name !== "type").map(([name, s]) => {
     const kind = kindOf(name, s);
     const min = typeof s.minimum === "number" ? s.minimum : typeof s.exclusiveMinimum === "number" ? s.exclusiveMinimum : void 0;
     return {
@@ -5923,7 +6577,7 @@ function motionCommandFields(type) {
       group: TIMING.has(name) ? "timing" : "main"
     };
   });
-  return [...fields.filter((f) => f.group === "main"), ...fields.filter((f) => f.group === "timing")];
+  return [...fields2.filter((f) => f.group === "main"), ...fields2.filter((f) => f.group === "timing")];
 }
 function parseMotionFieldInput(field, raw) {
   if (field.kind === "boolean") return raw === true ? { set: true } : { remove: true };
@@ -5942,12 +6596,12 @@ function parseMotionFieldInput(field, raw) {
   const text = String(raw).trim();
   if (text === "") return field.required ? { error: `${field.label} is required.` } : { remove: true };
   if (field.kind === "number" || field.kind === "integer" || field.kind === "scale") {
-    const n = Number(text);
-    if (!Number.isFinite(n)) return { error: `${field.label} must be a number${field.unit ? ` (${field.unit})` : ""}.` };
-    if (field.kind === "integer" && !Number.isInteger(n)) return { error: `${field.label} must be a whole number.` };
-    if (field.min !== void 0 && n < field.min) return { error: `${field.label} must be at least ${field.min}.` };
-    if (field.max !== void 0 && n > field.max) return { error: `${field.label} must be at most ${field.max}.` };
-    return { set: n };
+    const n2 = Number(text);
+    if (!Number.isFinite(n2)) return { error: `${field.label} must be a number${field.unit ? ` (${field.unit})` : ""}.` };
+    if (field.kind === "integer" && !Number.isInteger(n2)) return { error: `${field.label} must be a whole number.` };
+    if (field.min !== void 0 && n2 < field.min) return { error: `${field.label} must be at least ${field.min}.` };
+    if (field.max !== void 0 && n2 > field.max) return { error: `${field.label} must be at most ${field.max}.` };
+    return { set: n2 };
   }
   if (field.kind === "enum" && field.options && !field.options.includes(text)) return { error: `${field.label} must be one of ${field.options.join(", ")}.` };
   return { set: text };
@@ -6037,18 +6691,18 @@ function motionEaseKey(ease) {
 function motionEasingCurve(ease, samples = 48, durationMs = 1e3) {
   const resolved = resolveEasing(ease);
   const ms2 = resolved !== "hold" && resolved.type === "spring" ? springSettleMs(resolved) : durationMs;
-  const n = Math.max(2, Math.floor(samples));
+  const n2 = 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, ms2) });
+  for (let i = 0; i <= n2; i++) {
+    const u = i / n2;
+    points.push({ u, v: resolved === "hold" ? i === n2 ? 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: ms2 };
 }
 function motionEasingPath(curve, width, height, pad = 4) {
   const span = curve.max - curve.min || 1;
-  const f = (n) => String(Math.round(n * 100) / 100);
+  const f = (n2) => String(Math.round(n2 * 100) / 100);
   return curve.points.map((p, i) => `${i ? "L" : "M"}${f(pad + p.u * (width - 2 * pad))} ${f(pad + (1 - (p.v - curve.min) / span) * (height - 2 * pad))}`).join(" ");
 }
 function motionEasingGuides(curve, height, pad = 4) {
@@ -6158,7 +6812,7 @@ function parseMotionDrivers(text) {
     if (factor !== void 0) d.factor = Number(factor);
     if (offset !== void 0) d.offset = (sign === "-" ? -1 : 1) * Number(offset);
     if (min !== void 0) d.clamp = [Number(min), Number(max)];
-    if ([d.factor, d.offset, ...d.clamp ?? []].some((n) => n !== void 0 && !Number.isFinite(n))) return { error: `Line ${i + 1} has a number that cannot be read.` };
+    if ([d.factor, d.offset, ...d.clamp ?? []].some((n2) => n2 !== void 0 && !Number.isFinite(n2))) return { error: `Line ${i + 1} has a number that cannot be read.` };
     drivers.push(d);
   }
   return { drivers };
@@ -6229,6 +6883,163 @@ function animationCameraMoveTools(controller, ctx) {
   ];
 }
 
+// src/animation-editor/layer-tools.ts
+var LAYER_USES = ["generator", "filter", "overlay", "title"];
+var SHOT2 = { type: "string", minLength: 1, description: "A shot id from get_animation." };
+var LAYER = { type: "string", minLength: 1, description: 'A layer id from list_shot_layers (e.g. "layer1").' };
+var SUBJECT = {
+  anyOf: [
+    { type: "object", properties: { image: { type: "string", minLength: 1, description: "A picture URL or data: URL." } }, required: ["image"], additionalProperties: false, description: '{ "image": url }' },
+    { type: "object", properties: { svg: { type: "string", minLength: 1, description: "SVG markup or an SVG URL." } }, required: ["svg"], additionalProperties: false, description: '{ "svg": markup }' },
+    {
+      type: "object",
+      properties: { text: { type: "string", minLength: 1, description: "The words." }, font: { type: "string", description: "A CSS font family (default system-ui)." }, weight: { anyOf: [{ type: "number" }, { type: "string" }], description: "A CSS font weight (default 700)." } },
+      required: ["text"],
+      additionalProperties: false,
+      description: '{ "text": words }'
+    },
+    { type: "object", properties: { slot: { type: "string", minLength: 1, description: "A slot name the host fills later." } }, required: ["slot"], additionalProperties: false, description: '{ "slot": name }: draws nothing until filled.' }
+  ],
+  description: "What the layer shows, or feeds its effect (a filter changes it): a picture, SVG, words, or a slot to fill later. Leave out for a generator, overlay or title that draws its own picture."
+};
+var RECT = {
+  type: "object",
+  properties: {
+    x: { type: "number", description: "Left edge, artwork units." },
+    y: { type: "number", description: "Top edge, artwork units." },
+    width: { type: "number", exclusiveMinimum: 0, description: "Width, artwork units." },
+    height: { type: "number", exclusiveMinimum: 0, description: "Height, artwork units." }
+  },
+  required: ["x", "y", "width", "height"],
+  additionalProperties: false,
+  description: "Where the layer sits on the artwork (it moves with the camera). Leave out to fill the screen."
+};
+var TIME = (what, fallback) => ({
+  anyOf: [
+    { type: "number", minimum: 0, description: "Ms after the shot starts." },
+    { type: "object", properties: { shots: { type: "integer", minimum: 1, description: "1: when the next shot starts; 2: the one after\u2026" } }, required: ["shots"], additionalProperties: false, description: '{ "shots": n }' }
+  ],
+  description: `When the layer ${what}: ms after its shot starts, or { "shots": n } for when the n-th shot after its own starts (default ${fallback}).`
+});
+var fields = (ctx) => ({
+  effect: { ...ctx.effectIdSchema(LAYER_USES), description: "A generator, filter, overlay or title effect id from search_effects. Leave out for a bare subject." },
+  preset: { type: "string", minLength: 1, description: "A preset of the effect by name, from describe_effect; its values are written out on the layer." },
+  values: ctx.valuesSchema("Control values over the effect's defaults (and the preset's), from describe_effect"),
+  subject: SUBJECT,
+  role: { type: "string", enum: [...EFFECT_LAYER_ROLES], description: "background: under the artwork; subject: over the artwork; overlay: over everything. Default subject with a rect, else background." },
+  rect: RECT,
+  from: TIME("starts", "0: as its shot starts"),
+  until: TIME("stops", '{ "shots": 1 }: as the next shot starts'),
+  opacity: { type: "number", minimum: 0, maximum: 1, description: "Opacity 0\u20131 (default 1)." },
+  fade: { type: "number", minimum: 0, maximum: 6e4, description: "Ms it fades in and out over (default 0: it cuts)." }
+});
+var result = (r) => {
+  if (!r.ok) throw new Error(r.error);
+  const { ok: _ok, notes, ...rest } = r;
+  return { ...rest, ...notes.length ? { notes } : {} };
+};
+function animationShotLayerTools(controller, ctx) {
+  const f = fields(ctx);
+  return [
+    {
+      name: "list_shot_layers",
+      title: "List shot layers",
+      description: "Lists the layers and transition of every shot, or of one: [{ shot, layers: [{ id, effect, name, subject, role, rect, from, until, opacity, fade, values, index (0 = bottom), start, end (ms when it shows) }], transition: { effect, ms, values, start, end } or null }]. Use the layer ids with update_shot_layer, move_shot_layer and remove_shot_layer. Works without a provider.",
+      inputSchema: { type: "object", properties: { shot: { ...SHOT2, description: "Only this shot (default every shot)." } }, additionalProperties: false },
+      annotations: { title: "List shot layers", ...ctx.annotations.read },
+      handler: async (args) => ({ shots: controller.shotLayers(args.shot) })
+    },
+    {
+      name: "add_shot_layer",
+      title: "Add a shot layer",
+      description: "Adds a layer to a shot: a provider effect (a generator such as a gradient background, a filter applied to a subject, an overlay or title) or a bare subject (a picture, SVG or words). It shows from its shot's start until the next shot starts unless from / until say otherwise, fills the screen unless given a rect, and goes on top unless given an index. Checked first: an effect that cannot be a layer (a transition, a camera move, a motion effect) is refused with the tool to use instead, as are a subject the effect cannot take, a filter without a subject, an unknown preset and values outside its controls. One undo step. Returns { shot, layer (with its id, start and end), layers (the shot's, bottom to top), transition, notes }. Check it with render_animation_frame.",
+      inputSchema: {
+        type: "object",
+        properties: { shot: SHOT2, ...f, id: { type: "string", pattern: "^[A-Za-z_][\\w.-]*$", description: "The layer's id (default layer1, layer2\u2026); unique in the scene." }, index: { type: "integer", minimum: 0, description: "Its place in the shot, 0 = bottom (default the top)." } },
+        required: ["shot"],
+        additionalProperties: false
+      },
+      annotations: { title: "Add a shot layer", ...ctx.annotations.write },
+      handler: async ({ shot, index, ...layer }) => {
+        if (layer.effect !== void 0) ctx.requireProvider();
+        if (layer.effect === void 0 && layer.subject === void 0) throw new Error('Give an "effect" (search_effects with use generator, filter, overlay or title), a "subject" (a picture, SVG or words), or both.');
+        return result(await controller.addShotLayer(shot, layer, { index }));
+      }
+    },
+    {
+      name: "update_shot_layer",
+      title: "Change a shot layer",
+      description: `Changes a layer's fields: give the ones to change, and list in "clear" the optional ones to remove (back to their defaults). A new effect starts from its own defaults unless values are given. Checked against the provider like add_shot_layer. One undo step. Returns { shot, layer, layers, transition }.`,
+      inputSchema: {
+        type: "object",
+        properties: {
+          layer: LAYER,
+          ...f,
+          clear: { type: "array", items: { type: "string", enum: ["effect", "preset", "values", "subject", "role", "rect", "from", "until", "opacity", "fade"] }, uniqueItems: true, description: "Fields to remove." }
+        },
+        required: ["layer"],
+        additionalProperties: false
+      },
+      annotations: { title: "Change a shot layer", ...ctx.annotations.writeIdempotent },
+      handler: async ({ layer, clear, ...set }) => {
+        const changes = { ...set };
+        for (const k of clear ?? []) {
+          if (k in set) throw new Error(`"${k}" is both given and cleared; do one or the other.`);
+          changes[k] = null;
+        }
+        if (!Object.keys(changes).length) throw new Error('Give at least one field to change, or a field in "clear".');
+        return result(await controller.updateShotLayer(layer, changes));
+      }
+    },
+    {
+      name: "move_shot_layer",
+      title: "Restack a shot layer",
+      description: "Moves a layer to another place in its shot's stack (0 = bottom; within a role, later layers draw over earlier ones). One undo step. Returns { shot, layer, layers }.",
+      inputSchema: { type: "object", properties: { layer: LAYER, index: { type: "integer", minimum: 0, description: "Its new place in the shot, 0 = bottom." } }, required: ["layer", "index"], additionalProperties: false },
+      annotations: { title: "Restack a shot layer", ...ctx.annotations.writeIdempotent },
+      handler: async ({ layer, index }) => result(await controller.moveShotLayer(layer, index))
+    },
+    {
+      name: "remove_shot_layer",
+      title: "Remove a shot layer",
+      description: "Removes a layer from its shot. Works without a provider. One undo step. Returns the shot's remaining layers.",
+      inputSchema: { type: "object", properties: { layer: LAYER }, required: ["layer"], additionalProperties: false },
+      annotations: { title: "Remove a shot layer", ...ctx.annotations.destructive },
+      handler: async ({ layer }) => result(await controller.removeShotLayer(layer))
+    },
+    {
+      name: "set_shot_transition",
+      title: "Set a shot's transition",
+      description: `Sets the transition into a shot: a provider effect with the use transition (search_effects with use "transition") blends the last frame of the shot before into this shot over ms. Not on the first shot (there is no shot before it). With no camera move in (set_shot_camera_move, role transition), the camera cuts and the transition does the move; with one, both play together. Checked first: an effect that is not a transition, an unknown preset or values outside its controls are refused. One undo step. Returns { shot, layers, transition: { effect, ms, values, start, end }, notes }.`,
+      inputSchema: {
+        type: "object",
+        properties: {
+          shot: { ...SHOT2, description: "A shot id from get_animation (not the first shot)." },
+          effect: { ...ctx.effectIdSchema(["transition"]), description: "A transition effect id from search_effects (use transition)." },
+          ms: { type: "number", exclusiveMinimum: 0, maximum: 6e4, description: `How long it takes, ms (default ${EFFECT_TRANSITION_MS}).` },
+          preset: { type: "string", minLength: 1, description: "A preset of the transition by name, from describe_effect." },
+          values: ctx.valuesSchema("Control values over the transition's defaults (and the preset's)")
+        },
+        required: ["shot", "effect"],
+        additionalProperties: false
+      },
+      annotations: { title: "Set a shot's transition", ...ctx.annotations.writeIdempotent },
+      handler: async ({ shot, effect, ms: ms2, preset: preset2, values }) => {
+        ctx.requireProvider();
+        return result(await controller.setShotTransition(shot, { effect, ...ms2 !== void 0 ? { ms: ms2 } : {}, ...preset2 !== void 0 ? { preset: preset2 } : {}, ...values !== void 0 ? { values } : {} }));
+      }
+    },
+    {
+      name: "clear_shot_transition",
+      title: "Clear a shot's transition",
+      description: "Removes the transition into a shot, so it cuts (or the camera eases) from the shot before. Works without a provider. One undo step. Returns { shot, layers, transition: null }.",
+      inputSchema: { type: "object", properties: { shot: SHOT2 }, required: ["shot"], additionalProperties: false },
+      annotations: { title: "Clear a shot's transition", ...ctx.annotations.destructive },
+      handler: async ({ shot }) => result(controller.clearShotTransition(shot))
+    }
+  ];
+}
+
 // 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 = {}) {
@@ -6275,6 +7086,7 @@ function createAnimationEffectsToolProvider(controller, options = {}) {
     subscribe: (notify) => controller.subscribe(() => notify()),
     extraTools: (ctx) => [
       ...animationCameraMoveTools(controller, ctx),
+      ...animationShotLayerTools(controller, ctx),
       {
         name: "add_vector_effect",
         title: "Add a vector effect",
@@ -6318,8 +7130,8 @@ function createAnimationEditorDocument(controller) {
     kind: "animation",
     get: () => controller.getScene(),
     load: (document, { history }) => {
-      const result = controller.load(document, { clearHistory: history === "reset" });
-      if (!result.ok) throw new Error(result.error);
+      const result2 = controller.load(document, { clearHistory: history === "reset" });
+      if (!result2.ok) throw new Error(result2.error);
     },
     subscribe: (listener) => {
       let scene = controller.getScene();
@@ -6375,14 +7187,18 @@ export {
   MOTION_TEXT_STAGGER,
   MOTION_TEXT_UNITS,
   MOTION_TRIGGERS,
+  MotionLayersEngine,
   MotionSceneFormatError,
   activeSegment,
   animationCameraMoveTools,
+  animationShotLayerTools,
   applyMotionControlValues,
   applyMotionDrivers,
   applyMotionEdits,
+  browserMotionLayerHost,
   checkMotionCameraMoves,
   checkMotionScene,
+  checkMotionShotLayers,
   clipsShapeProblems,
   commandShapeProblems,
   compileMotionScene,
@@ -6396,6 +7212,7 @@ export {
   driversShapeProblems,
   duplicateMotionCommandEdit,
   effectsPlayCamera,
+  findMotionShotLayer,
   fitMotionRect,
   fitMotionScene,
   fitMotionSceneEdits,
@@ -6404,6 +7221,7 @@ export {
   flairEaseFor,
   formatMotionDrivers,
   formatMotionNarration,
+  freshMotionLayerId,
   freshShotId,
   fromFlairSvgMotion,
   fromFlairVectorEffect,
@@ -6459,6 +7277,10 @@ export {
   motionIssue,
   motionIssueKey,
   motionIssueLine,
+  motionLayerIds,
+  motionLayerSlot,
+  motionLayerSpans,
+  motionLayersAt,
   motionMovingIds,
   motionNodeAtElement,
   motionNodeClips,
@@ -6474,11 +7296,13 @@ export {
   motionRevealPadding,
   motionRulerTicks,
   motionSceneEffects,
+  motionSceneHasLayers,
   motionSceneShapeProblems,
   motionSceneToJson,
   motionShotAt,
   motionShotCameraMove,
   motionShotCueTime,
+  motionShotLayersInfo,
   motionShotTimeScale,
   motionStageSvg,
   motionTakeProblems,
@@ -6486,6 +7310,8 @@ export {
   motionTextLayout,
   motionTextUnits,
   motionTrackKey,
+  motionTransitionAt,
+  motionTransitionSvg,
   namedWithSuggestion,
   nextMotionEffectInstance,
   parseMotionDrivers,
@@ -6495,13 +7321,17 @@ export {
   planAnimationToolPlayback,
   resolveMotionCamera,
   resolveMotionEditRefs,
+  resolveMotionShotLayer,
+  resolveMotionShotTransition,
   segmentProgress,
   segmentValue,
+  shotLayersShapeProblems,
   shotShapeProblems,
   simplifyTimedSamples,
   smoothMotionLegs,
   smoothMotionTimes,
   suggestName,
+  svgDataUrl,
   toFlairEffectDocument,
   toFlairSvgMotion,
   toFlairVectorEffect,
@@ -6510,6 +7340,7 @@ export {
   withAnimationPlayback,
   withCameraViewEffects,
   withMotionLayers,
+  withMotionShotLayers,
   withViewBox,
   withoutMotionEffect
 };