reframe-video 0.1.2 → 0.2.0

package/dist/index.js

@@ -1,4 +1,5 @@
 // ../core/src/ir.ts
+var DEFAULT_CROSSFADE = 0.5;
 var DEFAULT_TO_DURATION = 0.5;
 var DEFAULT_TWEEN_DURATION = 0.5;
 var DEFAULT_MOTIONPATH_DURATION = 1;
@@ -26,7 +27,7 @@ function segCountOf(points, closed) {
   if (n < 2) return 0;
   return closed ? n : n - 1;
 }
-function pathPoint(points, closed, u) {
+function pathPoint(points, closed, u, curviness = 1) {
   const n = points.length;
   if (n === 0) return [0, 0];
   if (n === 1) return [points[0][0], points[0][1]];
@@ -35,19 +36,41 @@ function pathPoint(points, closed, u) {
   const [p0, p1, p2, p3] = controls(points, closed, i);
   const t2 = t * t;
   const t3 = t2 * t;
-  const f = (a, b, c, d) => 0.5 * (2 * b + (-a + c) * t + (2 * a - 5 * b + 4 * c - d) * t2 + (-a + 3 * b - 3 * c + d) * t3);
-  return [f(p0[0], p1[0], p2[0], p3[0]), f(p0[1], p1[1], p2[1], p3[1])];
+  if (curviness === 1) {
+    const f = (a, b, c, d) => 0.5 * (2 * b + (-a + c) * t + (2 * a - 5 * b + 4 * c - d) * t2 + (-a + 3 * b - 3 * c + d) * t3);
+    return [f(p0[0], p1[0], p2[0], p3[0]), f(p0[1], p1[1], p2[1], p3[1])];
+  }
+  const h00 = 2 * t3 - 3 * t2 + 1;
+  const h10 = t3 - 2 * t2 + t;
+  const h01 = -2 * t3 + 3 * t2;
+  const h11 = t3 - t2;
+  const k = curviness * 0.5;
+  const H = (a, b, c, d) => h00 * b + h10 * k * (c - a) + h01 * c + h11 * k * (d - b);
+  return [H(p0[0], p1[0], p2[0], p3[0]), H(p0[1], p1[1], p2[1], p3[1])];
 }
-function pathTangentAngle(points, closed, u) {
+function pathTangentAngle(points, closed, u, curviness = 1) {
   const n = points.length;
   if (n < 2) return 0;
   const segs = segCountOf(points, closed);
   const { i, t } = locate(segs, u);
   const [p0, p1, p2, p3] = controls(points, closed, i);
   const t2 = t * t;
-  const d = (a, b, c, e) => 0.5 * (-a + c + 2 * (2 * a - 5 * b + 4 * c - e) * t + 3 * (-a + 3 * b - 3 * c + e) * t2);
-  const dx = d(p0[0], p1[0], p2[0], p3[0]);
-  const dy = d(p0[1], p1[1], p2[1], p3[1]);
+  let dx;
+  let dy;
+  if (curviness === 1) {
+    const d = (a, b, c, e) => 0.5 * (-a + c + 2 * (2 * a - 5 * b + 4 * c - e) * t + 3 * (-a + 3 * b - 3 * c + e) * t2);
+    dx = d(p0[0], p1[0], p2[0], p3[0]);
+    dy = d(p0[1], p1[1], p2[1], p3[1]);
+  } else {
+    const g00 = 6 * t2 - 6 * t;
+    const g10 = 3 * t2 - 4 * t + 1;
+    const g01 = -6 * t2 + 6 * t;
+    const g11 = 3 * t2 - 2 * t;
+    const k = curviness * 0.5;
+    const D = (a, b, c, e) => g00 * b + g10 * k * (c - a) + g01 * c + g11 * k * (e - b);
+    dx = D(p0[0], p1[0], p2[0], p3[0]);
+    dy = D(p0[1], p1[1], p2[1], p3[1]);
+  }
   if (dx === 0 && dy === 0) return 0;
   return Math.atan2(dy, dx) * 180 / Math.PI;
 }
@@ -124,8 +147,8 @@ function compileScene(ir) {
   const currentValue = (target, prop) => {
     const v = current.get(key(target, prop));
     if (v !== void 0) return v;
-    if (prop === "opacity" || prop === "scale" || prop === "progress") return 1;
-    if (prop === "rotation") return 0;
+    if (prop === "opacity" || prop === "scale" || prop === "progress" || prop === "scaleX" || prop === "scaleY") return 1;
+    if (prop === "rotation" || prop === "skewX" || prop === "skewY") return 0;
     throw new Error(`cannot animate "${prop}" of "${target}": no base value to start from`);
   };
   const labelTimes = /* @__PURE__ */ new Map();
@@ -228,16 +251,17 @@ function compileScene(ir) {
         const duration = tl.duration ?? DEFAULT_MOTIONPATH_DURATION;
         const points = tl.points;
         const closed = tl.closed ?? false;
+        const curviness = tl.curviness ?? 1;
         const autoRotate = tl.autoRotate ?? false;
         const rotateOffset = tl.rotateOffset ?? 0;
         let list = motionPaths.get(tl.target);
         if (!list) motionPaths.set(tl.target, list = []);
-        list.push({ t0: start, t1: start + duration, points, closed, autoRotate, rotateOffset, ...tl.ease !== void 0 && { ease: tl.ease } });
+        list.push({ t0: start, t1: start + duration, points, closed, curviness, autoRotate, rotateOffset, ...tl.ease !== void 0 && { ease: tl.ease } });
         if (points.length > 0) {
-          const [ex, ey] = pathPoint(points, closed, 1);
+          const [ex, ey] = pathPoint(points, closed, 1, curviness);
           current.set(key(tl.target, "x"), ex);
           current.set(key(tl.target, "y"), ey);
-          if (autoRotate) current.set(key(tl.target, "rotation"), pathTangentAngle(points, closed, 1) + rotateOffset);
+          if (autoRotate) current.set(key(tl.target, "rotation"), pathTangentAngle(points, closed, 1, curviness) + rotateOffset);
         }
         return start + duration;
       }
@@ -284,7 +308,7 @@ function compileScene(ir) {
 }
 
 // ../core/src/validate.ts
-var COMMON_PROPS = ["x", "y", "opacity", "rotation", "scale", "anchor"];
+var COMMON_PROPS = ["x", "y", "opacity", "rotation", "scale", "scaleX", "scaleY", "skewX", "skewY", "anchor"];
 var PROPS_BY_TYPE = {
   rect: [...COMMON_PROPS, "width", "height", "fill", "stroke", "strokeWidth", "radius"],
   ellipse: [...COMMON_PROPS, "width", "height", "fill", "stroke", "strokeWidth"],
@@ -312,7 +336,18 @@ function validateScene(ir) {
         problems.push(`duplicate node id "${node.id}" \u2014 every node id must be unique`);
       }
       nodeById.set(node.id, node);
-      if (node.type === "group") collect(node.children);
+      if (node.type === "group") {
+        const clip = node.props.clip;
+        if (clip) {
+          if (clip.kind !== "rect" && clip.kind !== "ellipse") {
+            problems.push(`group "${node.id}" clip: unknown kind "${clip.kind}" \u2014 use "rect" or "ellipse"`);
+          }
+          if (!(clip.width > 0) || !(clip.height > 0)) {
+            problems.push(`group "${node.id}" clip: width and height must be > 0`);
+          }
+        }
+        collect(node.children);
+      }
     }
   };
   collect(ir.nodes);
@@ -395,6 +430,9 @@ function validateScene(ir) {
         if (tl.duration !== void 0 && tl.duration <= 0) {
           problems.push(`${path2}: motionPath "${tl.target}" duration must be > 0`);
         }
+        if (tl.curviness !== void 0 && tl.curviness < 0) {
+          problems.push(`${path2}: motionPath "${tl.target}" curviness must be >= 0`);
+        }
         break;
       }
       case "wait":
@@ -413,6 +451,13 @@ function validateScene(ir) {
         if (tl.scale !== void 0 && tl.scale <= 0) {
           problems.push(`${path2}: beat "${tl.name}" scale must be > 0`);
         }
+        for (const id of tl.nodes ?? []) {
+          if (!nodeById.has(id)) {
+            problems.push(
+              `${path2}: beat "${tl.name}" owns unknown node "${id}" \u2014 known ids: ${[...nodeById.keys()].join(", ")}`
+            );
+          }
+        }
         tl.children.forEach((c, i) => checkTimeline(c, `${path2}.beat(${tl.name})[${i}]`));
         break;
     }
@@ -453,6 +498,36 @@ function validateScene(ir) {
   }
   if (problems.length > 0) throw new SceneValidationError(problems);
 }
+var TRANSITIONS = ["cut", "crossfade"];
+function validateComposition(comp) {
+  const problems = [];
+  if (comp.scenes.length === 0) problems.push("composition has no scenes");
+  const seen = /* @__PURE__ */ new Set();
+  for (const [i, entry] of comp.scenes.entries()) {
+    const where = `scenes[${i}]`;
+    try {
+      validateScene(entry.scene);
+    } catch (err) {
+      if (err instanceof SceneValidationError) {
+        for (const p of err.problems) problems.push(`${where} (scene "${entry.scene.id}"): ${p}`);
+      } else throw err;
+    }
+    if (seen.has(entry.scene.id)) {
+      problems.push(`${where}: duplicate scene id "${entry.scene.id}" \u2014 scene ids must be unique in a composition`);
+    }
+    seen.add(entry.scene.id);
+    if (entry.transition !== void 0 && !TRANSITIONS.includes(entry.transition)) {
+      problems.push(`${where}: unknown transition "${entry.transition}" \u2014 valid: ${TRANSITIONS.join(", ")}`);
+    }
+    if (typeof entry.at === "string" && Number.isNaN(Number(entry.at))) {
+      problems.push(`${where}: "at" string "${entry.at}" is not a number (use "-0.5"/"+0.5" or a number)`);
+    }
+    if (typeof entry.at === "number" && entry.at < 0) {
+      problems.push(`${where}: absolute "at" must be >= 0`);
+    }
+  }
+  if (problems.length > 0) throw new SceneValidationError(problems);
+}
 
 // ../core/src/dsl.ts
 function scene(input) {
@@ -463,6 +538,11 @@ function scene(input) {
   }
   return ir;
 }
+function composition(input) {
+  const ir = { version: 1, ...input };
+  validateComposition(ir);
+  return ir;
+}
 function rect(props) {
   const { id, ...rest } = props;
   return { type: "rect", id, props: rest };
@@ -522,11 +602,47 @@ function wiggle(target, prop, params, window = {}) {
   return { target, prop, ...window, behavior: { kind: "named", name: "wiggle", params } };
 }
 
+// ../core/src/composeComposition.ts
+function compileComposition(comp) {
+  const scenes = [];
+  let prevEnd = 0;
+  comp.scenes.forEach((entry, i) => {
+    const compiled = compileScene(entry.scene);
+    const duration2 = compiled.duration;
+    const transition = entry.transition ?? "cut";
+    const append = i === 0 ? 0 : prevEnd;
+    let start;
+    if (typeof entry.at === "number") {
+      start = entry.at;
+    } else if (typeof entry.at === "string") {
+      start = append + Number(entry.at);
+    } else if (transition === "crossfade" && i > 0) {
+      start = append - DEFAULT_CROSSFADE;
+    } else {
+      start = append;
+    }
+    start = Math.max(0, start);
+    const overlap = i > 0 ? Math.max(0, prevEnd - start) : 0;
+    scenes.push({ id: entry.scene.id, scene: entry.scene, compiled, start, duration: duration2, transition, overlap });
+    prevEnd = start + duration2;
+  });
+  const duration = scenes.reduce((max, s) => Math.max(max, s.start + s.duration), 0);
+  return { ir: comp, scenes, duration };
+}
+
 // ../core/src/compose.ts
 var SCENE_PATCHABLE = ["background", "duration", "fps"];
 function composeScene(base, ...overlays) {
   const ir = structuredClone(base);
   const report = { applied: [], orphans: [], warnings: [] };
+  const baseNodeIds = /* @__PURE__ */ new Set();
+  const collectBase = (nodes) => {
+    for (const node of nodes) {
+      baseNodeIds.add(node.id);
+      if (node.type === "group") collectBase(node.children);
+    }
+  };
+  collectBase(base.nodes);
   overlays.forEach((overlay, index) => {
     const layer = overlay.name ?? `overlay-${index}`;
     if (overlay.target !== void 0 && overlay.target !== ir.id) {
@@ -534,12 +650,12 @@ function composeScene(base, ...overlays) {
         `${layer}: authored against scene "${overlay.target}" but composing onto "${ir.id}"`
       );
     }
-    applyOverlay(ir, overlay, layer, report);
+    applyOverlay(ir, overlay, layer, report, baseNodeIds);
   });
   validateScene(ir);
   return { ir, report };
 }
-function applyOverlay(ir, overlay, layer, report) {
+function applyOverlay(ir, overlay, layer, report, baseNodeIds) {
   const nodeById = /* @__PURE__ */ new Map();
   const collect = (nodes) => {
     for (const node of nodes) {
@@ -654,7 +770,7 @@ function applyOverlay(ir, overlay, layer, report) {
       to: ["duration", "ease", "stagger"],
       tween: ["duration", "ease"],
       wait: ["duration"],
-      motionPath: ["points", "duration", "ease"],
+      motionPath: ["points", "duration", "ease", "curviness", "autoRotate"],
       beat: ["at", "gap", "scale", "duration", "order"]
     };
     let timingPatched = false;
@@ -692,6 +808,49 @@ function applyOverlay(ir, overlay, layer, report) {
     nodeById.set(node.id, node);
     applied(`addNodes.${node.id}`, "add-node");
   }
+  for (const id of overlay.removeNodes ?? []) {
+    if (baseNodeIds.has(id)) {
+      orphan(
+        `removeNodes.${id}`,
+        `"${id}" is a base scene node \u2014 the scene owns it; hide it with opacity: 0 instead of removing`
+      );
+      continue;
+    }
+    const index = ir.nodes.findIndex((n) => n.id === id);
+    if (index < 0) {
+      orphan(
+        `removeNodes.${id}`,
+        `unknown overlay-added node "${id}" \u2014 nothing to remove`
+      );
+      continue;
+    }
+    ir.nodes.splice(index, 1);
+    nodeById.delete(id);
+    applied(`removeNodes.${id}`, "remove-node");
+  }
+  if (overlay.addTimeline && overlay.addTimeline.length > 0) {
+    const collectTargets = (tl, out) => {
+      if (tl.kind === "tween" || tl.kind === "motionPath") out.add(tl.target);
+      if ("children" in tl) tl.children.forEach((c) => collectTargets(c, out));
+    };
+    const valid = [];
+    overlay.addTimeline.forEach((frag, i) => {
+      const targets = /* @__PURE__ */ new Set();
+      collectTargets(frag, targets);
+      const missing = [...targets].filter((id) => !nodeById.has(id));
+      if (missing.length > 0) {
+        orphan(`addTimeline[${i}]`, `targets unknown node(s) ${missing.join(", ")} \u2014 known ids: ${knownIds()}`);
+        return;
+      }
+      valid.push(structuredClone(frag));
+      applied(`addTimeline[${i}]`, "add-timeline");
+    });
+    if (valid.length > 0) {
+      ir.timeline = ir.timeline ? { kind: "par", children: [ir.timeline, ...valid] } : valid.length === 1 ? valid[0] : { kind: "par", children: valid };
+      delete ir.duration;
+      ir.duration = compileScene(ir).duration;
+    }
+  }
 }
 function formatComposeReport(report) {
   const lines = [];
@@ -884,6 +1043,310 @@ function motionPreset(name, opts) {
   }
 }
 
+// ../core/src/devicePreset.ts
+var DEVICE_PRESET_NAMES = ["phone", "tablet", "laptop", "browser", "watch", "monitor", "tv", "foldable", "terminal", "car"];
+var DARK = { body: "#15161C", bodyStroke: "#2A2D38", screen: "#0E0F15", detail: "#3A3D48", chrome: "#1B1D24", chromeText: "#9AA0AD" };
+var LIGHT = { body: "#E7E9EE", bodyStroke: "#C3C7D1", screen: "#FFFFFF", detail: "#AEB3C0", chrome: "#F2F3F6", chromeText: "#5B606C" };
+var SCREENS = {
+  phone: { width: 352, height: 736, radius: 38 },
+  tablet: { width: 544, height: 764, radius: 18 },
+  laptop: { width: 840, height: 520, radius: 8, cy: -150 },
+  browser: { width: 984, height: 568, radius: 6, cy: 24 },
+  watch: { width: 184, height: 224, radius: 44 },
+  monitor: { width: 1056, height: 600, radius: 6 },
+  tv: { width: 1280, height: 720, radius: 8, cy: -24 },
+  foldable: { width: 760, height: 560, radius: 20 },
+  terminal: { width: 900, height: 560, radius: 6, cy: 18 },
+  car: { width: 1e3, height: 520, radius: 24 }
+};
+var BOUNDS = {
+  phone: { width: 392, height: 812 },
+  tablet: { width: 600, height: 820 },
+  laptop: { width: 1100, height: 650 },
+  browser: { width: 1e3, height: 660 },
+  watch: { width: 220, height: 300 },
+  monitor: { width: 1120, height: 860 },
+  tv: { width: 1340, height: 920 },
+  foldable: { width: 800, height: 600 },
+  terminal: { width: 916, height: 636 },
+  car: { width: 1060, height: 600 }
+};
+var isLandscape = (name, o) => (name === "phone" || name === "tablet") && o.orientation === "landscape";
+function screenDims(name, o) {
+  const d = SCREENS[name];
+  const base = { cx: d.cx ?? 0, cy: d.cy ?? 0 };
+  return isLandscape(name, o) ? { width: d.height, height: d.width, radius: d.radius, ...base } : { width: d.width, height: d.height, radius: d.radius, ...base };
+}
+function deviceScreen(name, opts = {}) {
+  const d = screenDims(name, opts);
+  return { x: 0, y: 0, width: d.width, height: d.height, radius: d.radius };
+}
+function deviceScreenCenter(name, opts = {}) {
+  const d = screenDims(name, opts);
+  return { x: d.cx, y: d.cy };
+}
+function deviceBounds(name, opts = {}) {
+  const b = BOUNDS[name];
+  return isLandscape(name, opts) ? { width: b.height, height: b.width } : { ...b };
+}
+function screenGroup(id, p, o, cx, cy, dims, content) {
+  return group({ id: `${id}-screen`, x: cx, y: cy, clip: { kind: "rect", x: -dims.width / 2, y: -dims.height / 2, width: dims.width, height: dims.height, radius: dims.radius } }, [
+    rect({ id: `${id}-screenbg`, x: 0, y: 0, anchor: "center", width: dims.width, height: dims.height, fill: o.screen ?? p.screen }),
+    group({ id: `${id}-content`, x: 0, y: 0 }, content)
+  ]);
+}
+function buildDevice(name, id, p, o, content) {
+  const dims = screenDims(name, o);
+  const sw = dims.width;
+  const sh = dims.height;
+  const screen = () => screenGroup(id, p, o, dims.cx, dims.cy, dims, content);
+  switch (name) {
+    case "phone":
+    case "tablet": {
+      const bezel = name === "phone" ? 20 : 28;
+      const bodyW = sw + bezel * 2;
+      const bodyH = sh + bezel * 2;
+      const bodyR = name === "phone" ? 54 : 34;
+      const land = isLandscape(name, o);
+      const nodes = [
+        rect({ id: `${id}-body`, x: 0, y: 0, anchor: "center", width: bodyW, height: bodyH, fill: p.body, stroke: p.bodyStroke, strokeWidth: 2, radius: bodyR }),
+        screen()
+      ];
+      if (name === "phone") {
+        nodes.push(
+          land ? rect({ id: `${id}-notch`, x: -sw / 2 + 16, y: 0, anchor: "center", width: 30, height: 96, fill: "#000000", radius: 15 }) : rect({ id: `${id}-notch`, x: 0, y: -sh / 2 + 16, anchor: "center", width: 96, height: 30, fill: "#000000", radius: 15 }),
+          land ? rect({ id: `${id}-home`, x: sw / 2 - 4, y: 0, anchor: "center", width: 5, height: 120, fill: p.detail, radius: 3 }) : rect({ id: `${id}-home`, x: 0, y: sh / 2 - 18, anchor: "center", width: 120, height: 5, fill: p.detail, radius: 3 })
+        );
+        if (!land) {
+          nodes.push(
+            rect({ id: `${id}-pwr`, x: bodyW / 2, y: -bodyH * 0.1, anchor: "center", width: 4, height: 78, fill: p.detail, radius: 2 }),
+            rect({ id: `${id}-volup`, x: -bodyW / 2, y: -bodyH * 0.16, anchor: "center", width: 4, height: 48, fill: p.detail, radius: 2 }),
+            rect({ id: `${id}-voldn`, x: -bodyW / 2, y: -bodyH * 0.16 + 60, anchor: "center", width: 4, height: 48, fill: p.detail, radius: 2 })
+          );
+        }
+      } else {
+        nodes.push(
+          rect({ id: `${id}-camera`, x: land ? -sw / 2 - 14 : 0, y: land ? 0 : -sh / 2 - 14, anchor: "center", width: 8, height: 8, fill: p.detail, radius: 4 }),
+          rect({ id: `${id}-pwr`, x: land ? -bodyW * 0.18 : bodyW * 0.18, y: land ? -bodyH / 2 : -bodyH / 2, anchor: "center", width: 60, height: 4, fill: p.detail, radius: 2 })
+        );
+      }
+      return nodes;
+    }
+    case "laptop": {
+      const lidTop = dims.cy - (sh + 40) / 2;
+      const keyRows = [0, 1, 2, 3].map(
+        (r) => rect({ id: `${id}-keys${r}`, x: 0, y: 150 + r * 11, anchor: "center", width: 640 + r * 50, height: 6, fill: p.chrome, radius: 3 })
+      );
+      return [
+        path({ id: `${id}-base`, x: 0, y: 0, d: "M -450 140 L 450 140 L 520 196 L -520 196 Z", fill: p.body, stroke: p.bodyStroke, strokeWidth: 2 }),
+        rect({ id: `${id}-foot-l`, x: -360, y: 198, anchor: "center", width: 70, height: 5, fill: p.detail, radius: 3 }),
+        rect({ id: `${id}-foot-r`, x: 360, y: 198, anchor: "center", width: 70, height: 5, fill: p.detail, radius: 3 }),
+        ...keyRows,
+        rect({ id: `${id}-trackpad`, x: 0, y: 184, anchor: "center", width: 150, height: 8, fill: p.detail, radius: 4 }),
+        rect({ id: `${id}-hinge`, x: 0, y: 134, anchor: "center", width: 900, height: 10, fill: p.detail, radius: 5 }),
+        screen(),
+        ellipse({ id: `${id}-webcam`, x: 0, y: lidTop + 14, anchor: "center", width: 6, height: 6, fill: p.detail }),
+        rect({ id: `${id}-lid`, x: 0, y: dims.cy, anchor: "center", width: sw + 40, height: sh + 40, stroke: p.bodyStroke, strokeWidth: 2, radius: 18 })
+      ];
+    }
+    case "browser": {
+      const winW = sw + 16;
+      const winH = sh + 92;
+      const barY = -winH / 2 + 24;
+      return [
+        rect({ id: `${id}-win`, x: 0, y: 0, anchor: "center", width: winW, height: winH, fill: p.chrome, stroke: p.bodyStroke, strokeWidth: 1.5, radius: 14 }),
+        ellipse({ id: `${id}-dot1`, x: -winW / 2 + 30, y: barY, anchor: "center", width: 13, height: 13, fill: "#FF5F57" }),
+        ellipse({ id: `${id}-dot2`, x: -winW / 2 + 54, y: barY, anchor: "center", width: 13, height: 13, fill: "#FEBC2E" }),
+        ellipse({ id: `${id}-dot3`, x: -winW / 2 + 78, y: barY, anchor: "center", width: 13, height: 13, fill: "#28C840" }),
+        // an active tab tucked under the lights
+        rect({ id: `${id}-tab`, x: -winW / 2 + 230, y: barY, anchor: "center", width: 190, height: 30, fill: o.screen ?? p.screen, radius: 8 }),
+        text({ id: `${id}-tabtext`, x: -winW / 2 + 156, y: barY, anchor: "center-left", content: "Overview", fontFamily: "Inter", fontSize: 13, fill: p.chromeText }),
+        rect({ id: `${id}-urlpill`, x: 96, y: barY, anchor: "center", width: 700, height: 26, fill: o.screen ?? p.screen, stroke: p.bodyStroke, strokeWidth: 1, radius: 13 }),
+        rect({ id: `${id}-lock`, x: 96 - 330, y: barY, anchor: "center", width: 8, height: 10, fill: p.chromeText, radius: 2 }),
+        text({ id: `${id}-urltext`, x: 96 - 312, y: barY, anchor: "center-left", content: urlText(o.url), fontFamily: "Inter", fontSize: 14, fill: p.chromeText }),
+        screen()
+      ];
+    }
+    case "watch": {
+      const bw = sw + 36;
+      const bh = sh + 36;
+      return [
+        // straps (drawn behind the body) flaring out top & bottom
+        path({ id: `${id}-bandtop`, x: 0, y: -bh / 2 + 4, d: "M -78 0 L 78 0 L 64 -86 L -64 -86 Z", fill: p.body, stroke: p.bodyStroke, strokeWidth: 2 }),
+        path({ id: `${id}-bandbot`, x: 0, y: bh / 2 - 4, d: "M -78 0 L 78 0 L 64 86 L -64 86 Z", fill: p.body, stroke: p.bodyStroke, strokeWidth: 2 }),
+        rect({ id: `${id}-body`, x: 0, y: 0, anchor: "center", width: bw, height: bh, fill: p.body, stroke: p.bodyStroke, strokeWidth: 3, radius: 60 }),
+        screen(),
+        rect({ id: `${id}-crown`, x: bw / 2, y: -20, anchor: "center", width: 14, height: 40, fill: p.detail, radius: 6 }),
+        rect({ id: `${id}-button`, x: bw / 2 - 2, y: 40, anchor: "center", width: 8, height: 34, fill: p.detail, radius: 4 })
+      ];
+    }
+    case "monitor": {
+      const panelW = sw + 44;
+      const panelH = sh + 60;
+      return [
+        rect({ id: `${id}-panel`, x: 0, y: 0, anchor: "center", width: panelW, height: panelH, fill: p.body, stroke: p.bodyStroke, strokeWidth: 2, radius: 16 }),
+        screen(),
+        ellipse({ id: `${id}-led`, x: panelW / 2 - 26, y: panelH / 2 - 16, anchor: "center", width: 6, height: 6, fill: "#28C840" }),
+        rect({ id: `${id}-neck`, x: 0, y: panelH / 2 + 60, anchor: "center", width: 60, height: 120, fill: p.body }),
+        path({ id: `${id}-stand`, x: 0, y: panelH / 2 + 60, d: "M -160 50 L 160 50 L 220 80 L -220 80 Z", fill: p.body, stroke: p.bodyStroke, strokeWidth: 2 })
+      ];
+    }
+    case "tv": {
+      const panelW = sw + 44;
+      const panelH = sh + 48;
+      const panelBottom = dims.cy + panelH / 2;
+      return [
+        rect({ id: `${id}-panel`, x: 0, y: dims.cy, anchor: "center", width: panelW, height: panelH, fill: p.body, stroke: p.bodyStroke, strokeWidth: 2, radius: 12 }),
+        screen(),
+        ellipse({ id: `${id}-brand`, x: 0, y: panelBottom - 12, anchor: "center", width: 6, height: 6, fill: p.detail }),
+        rect({ id: `${id}-neck`, x: 0, y: panelBottom + 48, anchor: "center", width: 64, height: 96, fill: p.body }),
+        path({ id: `${id}-stand`, x: 0, y: panelBottom + 96, d: "M -210 0 L 210 0 L 270 34 L -270 34 Z", fill: p.body, stroke: p.bodyStroke, strokeWidth: 2 })
+      ];
+    }
+    case "foldable": {
+      const bodyW = sw + 40;
+      const bodyH = sh + 40;
+      return [
+        rect({ id: `${id}-hinge-l`, x: -bodyW / 2, y: 0, anchor: "center", width: 8, height: bodyH * 0.5, fill: p.detail, radius: 4 }),
+        rect({ id: `${id}-hinge-r`, x: bodyW / 2, y: 0, anchor: "center", width: 8, height: bodyH * 0.5, fill: p.detail, radius: 4 }),
+        rect({ id: `${id}-body`, x: 0, y: 0, anchor: "center", width: bodyW, height: bodyH, fill: p.body, stroke: p.bodyStroke, strokeWidth: 2, radius: 28 }),
+        screen(),
+        rect({ id: `${id}-crease`, x: 0, y: 0, anchor: "center", width: 4, height: sh, fill: p.bodyStroke, radius: 2, opacity: 0.5 }),
+        ellipse({ id: `${id}-cam1`, x: -10, y: -sh / 2 + 18, anchor: "center", width: 8, height: 8, fill: p.detail }),
+        ellipse({ id: `${id}-cam2`, x: 10, y: -sh / 2 + 18, anchor: "center", width: 8, height: 8, fill: p.detail })
+      ];
+    }
+    case "terminal": {
+      const winW = sw + 16;
+      const winH = sh + 76;
+      return [
+        rect({ id: `${id}-win`, x: 0, y: 0, anchor: "center", width: winW, height: winH, fill: p.chrome, stroke: p.bodyStroke, strokeWidth: 1.5, radius: 12 }),
+        ellipse({ id: `${id}-dot1`, x: -winW / 2 + 28, y: -winH / 2 + 22, anchor: "center", width: 12, height: 12, fill: "#FF5F57" }),
+        ellipse({ id: `${id}-dot2`, x: -winW / 2 + 50, y: -winH / 2 + 22, anchor: "center", width: 12, height: 12, fill: "#FEBC2E" }),
+        ellipse({ id: `${id}-dot3`, x: -winW / 2 + 72, y: -winH / 2 + 22, anchor: "center", width: 12, height: 12, fill: "#28C840" }),
+        rect({ id: `${id}-tab`, x: -winW / 2 + 170, y: -winH / 2 + 22, anchor: "center", width: 130, height: 24, fill: o.screen ?? p.screen, radius: 6 }),
+        text({ id: `${id}-title`, x: -winW / 2 + 170, y: -winH / 2 + 22, anchor: "center", content: urlText(o.url ?? "zsh"), fontFamily: "Inter", fontSize: 13, fill: p.chromeText }),
+        screen()
+      ];
+    }
+    case "car": {
+      const bodyW = sw + 60;
+      const bodyH = sh + 60;
+      return [
+        rect({ id: `${id}-body`, x: 0, y: 0, anchor: "center", width: bodyW, height: bodyH, fill: p.body, stroke: p.bodyStroke, strokeWidth: 2, radius: 40 }),
+        ellipse({ id: `${id}-knob`, x: -bodyW / 2 + 18, y: 0, anchor: "center", width: 22, height: 22, fill: p.body, stroke: p.detail, strokeWidth: 3 }),
+        screen(),
+        ellipse({ id: `${id}-btn1`, x: -44, y: sh / 2 + 16, anchor: "center", width: 12, height: 12, fill: p.detail }),
+        ellipse({ id: `${id}-btn2`, x: 0, y: sh / 2 + 16, anchor: "center", width: 12, height: 12, fill: p.detail }),
+        ellipse({ id: `${id}-btn3`, x: 44, y: sh / 2 + 16, anchor: "center", width: 12, height: 12, fill: p.detail })
+      ];
+    }
+  }
+}
+var urlText = (url) => {
+  const u = url ?? "reframe.video";
+  return u.length > 70 ? `${u.slice(0, 67)}\u2026` : u;
+};
+function devicePreset(name, opts = {}) {
+  const id = opts.id ?? "device";
+  const p = opts.color === "light" ? LIGHT : DARK;
+  const children = buildDevice(name, id, p, opts, opts.content ?? []);
+  return group(
+    {
+      id,
+      x: opts.x ?? 0,
+      y: opts.y ?? 0,
+      ...opts.scale !== void 0 && opts.scale !== 1 && { scale: opts.scale },
+      ...opts.opacity !== void 0 && opts.opacity !== 1 && { opacity: opts.opacity }
+    },
+    children
+  );
+}
+
+// ../core/src/motionOps.ts
+var MOTION_OPS = ["rotate", "zoom", "ken-burns", "slide-in", "fade", "draw-on", "pulse"];
+var clamp012 = (n) => Math.max(0, Math.min(1, n));
+function settleEase2(e) {
+  return e < 0.34 ? "easeOutCubic" : e < 0.67 ? "easeOutBack" : "easeOutElastic";
+}
+function fromVec2(from, dist) {
+  switch (from) {
+    case "right":
+      return [dist, 0];
+    case "top":
+      return [0, -dist];
+    case "bottom":
+      return [0, dist];
+    default:
+      return [-dist, 0];
+  }
+}
+var motionOpLabel = (name, target) => `op-${name}-${target}`;
+function motionOp(name, target, opts = {}) {
+  const e = clamp012(opts.energy ?? 0.5);
+  const sp = Math.max(0.25, opts.speed ?? 1);
+  const amt = opts.amount ?? 1;
+  const b = { scale: 1, x: 0, y: 0, rotation: 0, ...opts.base };
+  const d = (base) => base / sp;
+  const label = motionOpLabel(name, target);
+  switch (name) {
+    case "rotate":
+      return { timeline: beat(label, {}, [tween(target, { rotation: b.rotation + 360 * amt }, { duration: d(1), ease: settleEase2(e) })]) };
+    case "zoom": {
+      const peak = b.scale * (1 + 0.22 * amt);
+      return {
+        timeline: beat(label, {}, [
+          seq(
+            tween(target, { scale: peak }, { duration: d(0.4), ease: "easeOutBack" }),
+            tween(target, { scale: b.scale }, { duration: d(0.45), ease: "easeInOutQuad" })
+          )
+        ])
+      };
+    }
+    case "ken-burns":
+      return {
+        timeline: beat(label, {}, [
+          par(
+            tween(target, { scale: b.scale * (1 + 0.1 * amt) }, { duration: d(3), ease: "easeInOutQuad" }),
+            tween(target, { x: b.x + 26 * amt, y: b.y - 16 * amt }, { duration: d(3), ease: "easeInOutQuad" })
+          )
+        ])
+      };
+    case "slide-in": {
+      const [dx, dy] = fromVec2(opts.from ?? "left", 320 * amt);
+      return {
+        setup: { [target]: { x: b.x + dx, y: b.y + dy, opacity: 0 } },
+        timeline: beat(label, {}, [
+          par(
+            tween(target, { x: b.x, y: b.y }, { duration: d(0.7), ease: settleEase2(e) }),
+            tween(target, { opacity: 1 }, { duration: d(0.4), ease: "easeOutQuad" })
+          )
+        ])
+      };
+    }
+    case "fade":
+      return {
+        setup: { [target]: { opacity: 0 } },
+        timeline: beat(label, {}, [tween(target, { opacity: 1 }, { duration: d(0.6), ease: "easeOutQuad" })])
+      };
+    case "draw-on":
+      return {
+        setup: { [target]: { progress: 0 } },
+        timeline: beat(label, {}, [tween(target, { progress: 1 }, { duration: d(1.3), ease: "easeInOutQuad" })])
+      };
+    case "pulse": {
+      const hi = b.scale * (1 + 0.12 * amt);
+      const pulses = 2 + Math.round(amt);
+      const steps = [];
+      for (let i = 0; i < pulses; i++) {
+        steps.push(tween(target, { scale: hi }, { duration: d(0.22), ease: "easeOutQuad" }));
+        steps.push(tween(target, { scale: b.scale }, { duration: d(0.22), ease: "easeInQuad" }));
+      }
+      return { timeline: beat(label, {}, [seq(...steps)]) };
+    }
+  }
+}
+
 // ../core/src/audio.ts
 var SFX_DURATION = {
   whoosh: 0.35,
@@ -929,6 +1392,15 @@ function resolveAudioPlan(compiled) {
     });
   }
   cues.sort((a, b) => a.t - b.t);
+  return {
+    duration,
+    bgm: resolveBgm(audio.bgm),
+    cues,
+    duckWindows: mergeDuckWindows(cues, duration),
+    warnings
+  };
+}
+function mergeDuckWindows(cues, duration) {
   const duckWindows = [];
   for (const cue of cues) {
     const window = { t0: cue.t, t1: Math.min(duration, cue.t + cue.duration) };
@@ -936,23 +1408,68 @@ function resolveAudioPlan(compiled) {
     if (last && window.t0 <= last.t1 + 0.1) last.t1 = Math.max(last.t1, window.t1);
     else duckWindows.push(window);
   }
-  let bgm = null;
-  if (audio.bgm) {
-    const b = audio.bgm;
-    const duck = b.duck === false ? null : {
-      depth: b.duck?.depth ?? 0.5,
-      attack: b.duck?.attack ?? 0.05,
-      release: b.duck?.release ?? 0.25
-    };
-    bgm = {
-      source: b.file ? { kind: "file", path: b.file } : { kind: "synth", name: b.synth ?? "ambient-pad" },
-      gain: b.gain ?? 0.5,
-      fadeIn: b.fadeIn ?? 0,
-      fadeOut: b.fadeOut ?? 0,
-      duck
-    };
+  return duckWindows;
+}
+function resolveBgm(b) {
+  if (!b) return null;
+  const duck = b.duck === false ? null : {
+    depth: b.duck?.depth ?? 0.5,
+    attack: b.duck?.attack ?? 0.05,
+    release: b.duck?.release ?? 0.25
+  };
+  return {
+    source: b.file ? { kind: "file", path: b.file } : { kind: "synth", name: b.synth ?? "ambient-pad" },
+    gain: b.gain ?? 0.5,
+    fadeIn: b.fadeIn ?? 0,
+    fadeOut: b.fadeOut ?? 0,
+    duck
+  };
+}
+function resolveCompositionAudioPlan(comp) {
+  const audio = comp.ir.audio;
+  const duration = comp.duration;
+  const warnings = [];
+  const cues = [];
+  for (const placement of comp.scenes) {
+    const plan = resolveAudioPlan(placement.compiled);
+    if (!plan) continue;
+    if (plan.bgm) {
+      warnings.push(`scene "${placement.id}": per-scene bgm ignored \u2014 set bgm at the composition level`);
+    }
+    for (const w of plan.warnings) warnings.push(`scene "${placement.id}": ${w}`);
+    for (const cue of plan.cues) {
+      const t = cue.t + placement.start;
+      if (t >= duration) continue;
+      cues.push({ ...cue, t });
+    }
+  }
+  for (const [index, cue] of (audio?.cues ?? []).entries()) {
+    if (typeof cue.at !== "number") {
+      warnings.push(`composition cue[${index}]: "at" must be an absolute number (no composition labels) \u2014 dropped`);
+      continue;
+    }
+    const t = Math.max(0, cue.at + (cue.offset ?? 0));
+    const cueDuration = cue.sfx ? SFX_DURATION[cue.sfx] : FILE_CUE_DURATION;
+    if (t >= duration) {
+      warnings.push(`composition cue[${index}] at ${t.toFixed(2)}s past the composition end \u2014 dropped`);
+      continue;
+    }
+    cues.push({
+      t,
+      gain: cue.gain ?? 1,
+      duration: cueDuration,
+      source: cue.sfx ? { kind: "sfx", name: cue.sfx, params: cue.params ?? {} } : { kind: "file", path: cue.file }
+    });
   }
-  return { duration, bgm, cues, duckWindows, warnings };
+  if (!audio?.bgm && cues.length === 0) return null;
+  cues.sort((a, b) => a.t - b.t);
+  return {
+    duration,
+    bgm: resolveBgm(audio?.bgm),
+    cues,
+    duckWindows: mergeDuckWindows(cues, duration),
+    warnings
+  };
 }
 
 // ../core/src/behaviors.ts
@@ -1106,11 +1623,22 @@ function multiply(m, n) {
     m[1] * n[4] + m[3] * n[5] + m[5]
   ];
 }
-function localMatrix(x, y, rotationDeg, scale) {
+function localMatrix(x, y, rotationDeg, scale, scaleX = 1, scaleY = 1, skewXDeg = 0, skewYDeg = 0) {
   const r = rotationDeg * Math.PI / 180;
-  const cos = Math.cos(r) * scale;
-  const sin = Math.sin(r) * scale;
-  return [cos, sin, -sin, cos, x, y];
+  if (scaleX === 1 && scaleY === 1 && skewXDeg === 0 && skewYDeg === 0) {
+    const cos = Math.cos(r) * scale;
+    const sin = Math.sin(r) * scale;
+    return [cos, sin, -sin, cos, x, y];
+  }
+  const c = Math.cos(r);
+  const s = Math.sin(r);
+  const tx = Math.tan(skewXDeg * Math.PI / 180);
+  const ty = Math.tan(skewYDeg * Math.PI / 180);
+  const R = [c, s, -s, c, 0, 0];
+  const K = [1, ty, tx, 1, 0, 0];
+  const S = [scale * scaleX, 0, 0, scale * scaleY, 0, 0];
+  const m = multiply(R, multiply(K, S));
+  return [m[0], m[1], m[2], m[3], x, y];
 }
 var ANCHOR_FACTORS = {
   "top-left": [0, 0],
@@ -1135,53 +1663,86 @@ function behaviorEnvelope(b, t) {
   if (Number.isFinite(until) && ramp > 0) envelope = Math.min(envelope, (until - t) / ramp);
   return Math.max(0, Math.min(1, envelope));
 }
-function evaluate(compiled, t) {
-  const ops = [];
-  const valueAt = (target, prop, fallback) => {
-    let value = compiled.initialValues.get(`${target}.${prop}`) ?? fallback;
-    let segStart = Number.NEGATIVE_INFINITY;
-    const segs = compiled.segments.get(`${target}.${prop}`);
-    if (segs) {
+function sampleProp(compiled, t, target, prop, fallback) {
+  let value = compiled.initialValues.get(`${target}.${prop}`) ?? fallback;
+  let segStart = Number.NEGATIVE_INFINITY;
+  const segs = compiled.segments.get(`${target}.${prop}`);
+  if (segs) {
+    let active;
+    for (const seg of segs) {
+      if (seg.t0 <= t) active = seg;
+      else break;
+    }
+    if (active) {
+      segStart = active.t0;
+      if (t >= active.t1) {
+        value = active.to;
+      } else {
+        const u = resolveEase(active.ease)((t - active.t0) / (active.t1 - active.t0));
+        value = lerpValue(active.from, active.to, u);
+      }
+    }
+  }
+  if (prop === "x" || prop === "y" || prop === "rotation") {
+    const drivers = compiled.motionPaths.get(target);
+    if (drivers) {
       let active;
-      for (const seg of segs) {
-        if (seg.t0 <= t) active = seg;
+      for (const d of drivers) {
+        if (d.t0 <= t) active = d;
         else break;
       }
-      if (active) {
-        segStart = active.t0;
-        if (t >= active.t1) {
-          value = active.to;
-        } else {
-          const u = resolveEase(active.ease)((t - active.t0) / (active.t1 - active.t0));
-          value = lerpValue(active.from, active.to, u);
-        }
+      if (active && active.t0 >= segStart && (prop !== "rotation" || active.autoRotate) && active.points.length > 0) {
+        const span = active.t1 - active.t0;
+        const u = span <= 0 ? 1 : resolveEase(active.ease)(Math.max(0, Math.min(1, (t - active.t0) / span)));
+        if (prop === "x") value = pathPoint(active.points, active.closed, u, active.curviness)[0];
+        else if (prop === "y") value = pathPoint(active.points, active.closed, u, active.curviness)[1];
+        else value = pathTangentAngle(active.points, active.closed, u, active.curviness) + active.rotateOffset;
       }
     }
-    if (prop === "x" || prop === "y" || prop === "rotation") {
-      const drivers = compiled.motionPaths.get(target);
-      if (drivers) {
-        let active;
-        for (const d of drivers) {
-          if (d.t0 <= t) active = d;
-          else break;
-        }
-        if (active && active.t0 >= segStart && (prop !== "rotation" || active.autoRotate) && active.points.length > 0) {
-          const span = active.t1 - active.t0;
-          const u = span <= 0 ? 1 : resolveEase(active.ease)(Math.max(0, Math.min(1, (t - active.t0) / span)));
-          if (prop === "x") value = pathPoint(active.points, active.closed, u)[0];
-          else if (prop === "y") value = pathPoint(active.points, active.closed, u)[1];
-          else value = pathTangentAngle(active.points, active.closed, u) + active.rotateOffset;
-        }
-      }
+  }
+  for (const b of compiled.ir.behaviors ?? []) {
+    if (b.target === target && b.prop === prop && typeof value === "number") {
+      const envelope = behaviorEnvelope(b, t);
+      if (envelope > 0) value = value + envelope * sampleBehavior(b.behavior, t);
     }
-    for (const b of compiled.ir.behaviors ?? []) {
-      if (b.target === target && b.prop === prop && typeof value === "number") {
-        const envelope = behaviorEnvelope(b, t);
-        if (envelope > 0) value = value + envelope * sampleBehavior(b.behavior, t);
-      }
+  }
+  return value;
+}
+function nodeParentMatrix(compiled, id, t) {
+  const num = (target, prop, fallback) => {
+    const v = sampleProp(compiled, t, target, prop, fallback);
+    return typeof v === "number" ? v : fallback;
+  };
+  let result = null;
+  const walk = (node, parent) => {
+    if (node.id === id) {
+      result = parent;
+      return true;
+    }
+    if (node.type === "group") {
+      const m = multiply(
+        parent,
+        localMatrix(
+          num(node.id, "x", node.props.x),
+          num(node.id, "y", node.props.y),
+          num(node.id, "rotation", node.props.rotation ?? 0),
+          num(node.id, "scale", node.props.scale ?? 1),
+          num(node.id, "scaleX", node.props.scaleX ?? 1),
+          num(node.id, "scaleY", node.props.scaleY ?? 1),
+          num(node.id, "skewX", node.props.skewX ?? 0),
+          num(node.id, "skewY", node.props.skewY ?? 0)
+        )
+      );
+      for (const child of node.children) if (walk(child, m)) return true;
     }
-    return value;
+    return false;
   };
+  for (const node of compiled.ir.nodes) if (walk(node, IDENTITY)) break;
+  return result;
+}
+function evaluate(compiled, t) {
+  const ops = [];
+  const valueAt = (target, prop, fallback) => sampleProp(compiled, t, target, prop, fallback);
   const num = (target, prop, fallback) => {
     const v = valueAt(target, prop, fallback);
     return typeof v === "number" ? v : fallback;
@@ -1194,8 +1755,9 @@ function evaluate(compiled, t) {
     const v = valueAt(target, prop, base ?? "");
     return v === "" && base === void 0 ? void 0 : String(v);
   };
-  const walk = (node, parent, parentOpacity) => {
+  const walk = (node, parent, parentOpacity, clips) => {
     const id = node.id;
+    const clipSpread = clips.length > 0 ? { clips } : void 0;
     if (node.type === "line") {
       const opacity2 = parentOpacity * num(id, "opacity", node.props.opacity ?? 1);
       if (opacity2 <= 0) return;
@@ -1212,7 +1774,8 @@ function evaluate(compiled, t) {
         x2: x1 + (num(id, "x2", node.props.x2) - x1) * progress,
         y2: y1 + (num(id, "y2", node.props.y2) - y1) * progress,
         stroke: str(id, "stroke", node.props.stroke),
-        strokeWidth: num(id, "strokeWidth", node.props.strokeWidth ?? 1)
+        strokeWidth: num(id, "strokeWidth", node.props.strokeWidth ?? 1),
+        ...clipSpread
       });
       return;
     }
@@ -1224,13 +1787,19 @@ function evaluate(compiled, t) {
         num(id, "x", node.props.x),
         num(id, "y", node.props.y),
         num(id, "rotation", node.props.rotation ?? 0),
-        num(id, "scale", node.props.scale ?? 1)
+        num(id, "scale", node.props.scale ?? 1),
+        num(id, "scaleX", node.props.scaleX ?? 1),
+        num(id, "scaleY", node.props.scaleY ?? 1),
+        num(id, "skewX", node.props.skewX ?? 0),
+        num(id, "skewY", node.props.skewY ?? 0)
       )
     );
     switch (node.type) {
-      case "group":
-        for (const child of node.children) walk(child, matrix, opacity);
+      case "group": {
+        const childClips = node.props.clip ? [...clips, { transform: matrix, shape: node.props.clip }] : clips;
+        for (const child of node.children) walk(child, matrix, opacity, childClips);
         return;
+      }
       case "rect":
       case "ellipse": {
         const width = num(id, "width", node.props.width);
@@ -1250,7 +1819,8 @@ function evaluate(compiled, t) {
           offsetY: -height * ay,
           ...fill !== void 0 && { fill },
           ...stroke !== void 0 && { stroke, strokeWidth },
-          ...node.type === "rect" && { radius: num(id, "radius", node.props.radius ?? 0) }
+          ...node.type === "rect" && { radius: num(id, "radius", node.props.radius ?? 0) },
+          ...clipSpread
         });
         return;
       }
@@ -1267,7 +1837,8 @@ function evaluate(compiled, t) {
           width,
           height,
           offsetX: -width * ax,
-          offsetY: -height * ay
+          offsetY: -height * ay,
+          ...clipSpread
         });
         return;
       }
@@ -1284,7 +1855,8 @@ function evaluate(compiled, t) {
           d: str(id, "d", node.props.d),
           progress: Math.max(0, Math.min(1, num(id, "progress", node.props.progress ?? 1))),
           ...fill !== void 0 && { fill },
-          ...stroke !== void 0 && { stroke, strokeWidth: num(id, "strokeWidth", node.props.strokeWidth ?? 1) }
+          ...stroke !== void 0 && { stroke, strokeWidth: num(id, "strokeWidth", node.props.strokeWidth ?? 1) },
+          ...clipSpread
         });
         return;
       }
@@ -1307,13 +1879,14 @@ function evaluate(compiled, t) {
           fill: str(id, "fill", node.props.fill ?? "#ffffff"),
           letterSpacing: num(id, "letterSpacing", node.props.letterSpacing ?? 0),
           align: TEXT_ALIGN[ax] ?? "left",
-          baseline: TEXT_BASELINE[ay] ?? "top"
+          baseline: TEXT_BASELINE[ay] ?? "top",
+          ...clipSpread
         });
         return;
       }
     }
   };
-  for (const node of compiled.ir.nodes) walk(node, IDENTITY, 1);
+  for (const node of compiled.ir.nodes) walk(node, IDENTITY, 1, []);
   return ops;
 }
 
@@ -1394,19 +1967,28 @@ function sketchToTimeline(sketch, nodeIds) {
   return par(...steps);
 }
 export {
+  DEFAULT_CROSSFADE,
   DEFAULT_FPS,
   DEFAULT_MOTIONPATH_DURATION,
   DEFAULT_TO_DURATION,
   DEFAULT_TWEEN_DURATION,
+  DEVICE_PRESET_NAMES,
   EASE_NAMES,
+  MOTION_OPS,
   PRESET_NAMES,
   PROPS_BY_TYPE,
   SFX_DURATION,
   SceneValidationError,
   beat,
   collectImageSrcs,
+  compileComposition,
   compileScene,
   composeScene,
+  composition,
+  deviceBounds,
+  devicePreset,
+  deviceScreen,
+  deviceScreenCenter,
   ellipse,
   evaluate,
   formatComposeReport,
@@ -1415,8 +1997,11 @@ export {
   isColor,
   lerpValue,
   line,
+  motionOp,
+  motionOpLabel,
   motionPath,
   motionPreset,
+  nodeParentMatrix,
   oscillate,
   par,
   path,
@@ -1424,8 +2009,10 @@ export {
   pathTangentAngle,
   rect,
   resolveAudioPlan,
+  resolveCompositionAudioPlan,
   resolveEase,
   sampleBehavior,
+  sampleProp,
   scene,
   seq,
   sketchToTimeline,
@@ -1433,6 +2020,7 @@ export {
   text,
   to,
   tween,
+  validateComposition,
   validateScene,
   wait,
   wiggle