reframe-video 0.1.3 → 0.3.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;
@@ -14,40 +15,62 @@ function locate(segCount, u) {
   return { i, t: scaled - i };
 }
 function controls(points, closed, i) {
-  const n = points.length;
+  const n3 = points.length;
   const at = (k) => {
-    if (closed) return points[(k % n + n) % n];
-    return points[Math.max(0, Math.min(n - 1, k))];
+    if (closed) return points[(k % n3 + n3) % n3];
+    return points[Math.max(0, Math.min(n3 - 1, k))];
   };
   return [at(i - 1), at(i), at(i + 1), at(i + 2)];
 }
 function segCountOf(points, closed) {
-  const n = points.length;
-  if (n < 2) return 0;
-  return closed ? n : n - 1;
-}
-function pathPoint(points, closed, u) {
-  const n = points.length;
-  if (n === 0) return [0, 0];
-  if (n === 1) return [points[0][0], points[0][1]];
+  const n3 = points.length;
+  if (n3 < 2) return 0;
+  return closed ? n3 : n3 - 1;
+}
+function pathPoint(points, closed, u, curviness = 1) {
+  const n3 = points.length;
+  if (n3 === 0) return [0, 0];
+  if (n3 === 1) return [points[0][0], points[0][1]];
   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 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) {
-  const n = points.length;
-  if (n < 2) return 0;
+function pathTangentAngle(points, closed, u, curviness = 1) {
+  const n3 = points.length;
+  if (n3 < 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((n3) => n3.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,735 @@ 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/rig.ts
+var DEFAULT_LINE = "#FFE3D2";
+var DEFAULT_FILL = "#0E1424";
+var LINE_W = 5;
+var GLOW_W = 16;
+var K = 0.5523;
+var n = (v) => Number(v.toFixed(2));
+function capsulePath(hw, len) {
+  const yT = hw;
+  const yB = Math.max(hw, len - hw);
+  const k = hw * K;
+  return `M ${n(-hw)} ${n(yT)} C ${n(-hw)} ${n(yT - k)} ${n(-k)} ${n(yT - hw)} 0 ${n(yT - hw)} C ${n(k)} ${n(yT - hw)} ${n(hw)} ${n(yT - k)} ${n(hw)} ${n(yT)} L ${n(hw)} ${n(yB)} C ${n(hw)} ${n(yB + k)} ${n(k)} ${n(yB + hw)} 0 ${n(yB + hw)} C ${n(-k)} ${n(yB + hw)} ${n(-hw)} ${n(yB + k)} ${n(-hw)} ${n(yB)} Z`;
+}
+function ovalPath(a, b, cx = 0, cy = 0) {
+  const ka = n(a * K), kb = n(b * K);
+  const t = n(cy - b), bo = n(cy + b), c = n(cy), A = n(a), L = n(-a), X = n(cx);
+  return `M ${X} ${t} C ${n(cx + ka)} ${t} ${n(cx + A)} ${n(cy - kb)} ${n(cx + A)} ${c} C ${n(cx + A)} ${n(cy + kb)} ${n(cx + ka)} ${bo} ${X} ${bo} C ${n(cx - ka)} ${bo} ${n(cx + L)} ${n(cy + kb)} ${n(cx + L)} ${c} C ${n(cx + L)} ${n(cy - kb)} ${n(cx - ka)} ${t} ${X} ${t} Z`;
+}
+function boneShape(jointId, bone, o) {
+  if (bone.shape) return bone.shape;
+  const len = bone.length ?? 0;
+  if (len <= 0) return [];
+  const d = capsulePath((bone.width ?? 20) / 2, len);
+  const nodes = [];
+  if (o.glow) nodes.push(path({ id: `${jointId}-glow`, d, x: 0, y: 0, fill: "none", stroke: o.glow, strokeWidth: GLOW_W, opacity: 0.18 }));
+  nodes.push(path({ id: `${jointId}-shape`, d, x: 0, y: 0, fill: o.fill, stroke: o.color, strokeWidth: LINE_W }));
+  return nodes;
+}
+function buildBone(bone, id, o) {
+  const jointId = `${id}-${bone.name}`;
+  return group(
+    { id: jointId, x: bone.at[0], y: bone.at[1], rotation: bone.rotation ?? 0 },
+    [...boneShape(jointId, bone, o), ...(bone.children ?? []).map((c) => buildBone(c, id, o))]
+  );
+}
+function rig(root, opts = {}) {
+  const id = opts.id ?? "rig";
+  const o = { color: opts.color ?? DEFAULT_LINE, fill: opts.fill ?? DEFAULT_FILL, glow: opts.glow };
+  return group(
+    { id, x: opts.x ?? 0, y: opts.y ?? 0, scale: opts.scale ?? 1, opacity: opts.opacity ?? 1 },
+    [buildBone(root, id, o)]
+  );
+}
+function rigPose(id, pose) {
+  const out = {};
+  for (const [name, deg] of Object.entries(pose)) out[`${id}-${name}`] = { rotation: deg };
+  return out;
+}
+function poseTo(id, pose, opts = {}) {
+  const tweens = Object.entries(pose).map(
+    ([name, deg]) => tween(`${id}-${name}`, { rotation: deg }, { duration: opts.duration ?? 0.5, ease: opts.ease ?? "easeInOutCubic" })
+  );
+  return opts.stagger ? stagger(opts.stagger, ...tweens) : par(...tweens);
+}
+function ikReach(upper, lower, dx, dy, flip = false) {
+  const D = Math.hypot(dx, dy);
+  const cos2 = Math.max(-1, Math.min(1, (D * D - upper * upper - lower * lower) / (2 * upper * lower)));
+  const theta2 = (flip ? -1 : 1) * Math.acos(cos2);
+  const vx = -lower * Math.sin(theta2);
+  const vy = upper + lower * Math.cos(theta2);
+  const theta1 = Math.atan2(dy, dx) - Math.atan2(vy, vx);
+  const deg = (r) => r * 180 / Math.PI;
+  return [deg(theta1), deg(theta2)];
+}
+function humanoid(opts = {}) {
+  const line2 = opts.color ?? DEFAULT_LINE;
+  const fill = opts.fill ?? DEFAULT_FILL;
+  const glow = opts.glow;
+  const blob = (jid, a, b, cy) => {
+    const d = ovalPath(a, b, 0, cy);
+    const nodes = [];
+    if (glow) nodes.push(path({ id: `${jid}-glow`, d, x: 0, y: 0, fill: "none", stroke: glow, strokeWidth: GLOW_W, opacity: 0.18 }));
+    nodes.push(path({ id: `${jid}-shape`, d, x: 0, y: 0, fill, stroke: line2, strokeWidth: LINE_W }));
+    return nodes;
+  };
+  const id = opts.id ?? "rig";
+  const root = {
+    name: "chest",
+    at: [0, 0],
+    shape: blob(`${id}-chest`, 44, 62, 22),
+    children: [
+      { name: "head", at: [0, -42], rotation: 0, shape: blob(`${id}-head`, 40, 42, -34) },
+      { name: "armUpperL", at: [-42, -20], length: 60, width: 20, rotation: 10, children: [
+        { name: "armLowerL", at: [0, 60], length: 56, width: 16, rotation: 8 }
+      ] },
+      { name: "armUpperR", at: [42, -20], length: 60, width: 20, rotation: -10, children: [
+        { name: "armLowerR", at: [0, 60], length: 56, width: 16, rotation: -8 }
+      ] },
+      { name: "legUpperL", at: [-20, 76], length: 76, width: 26, rotation: 3, children: [
+        { name: "legLowerL", at: [0, 76], length: 72, width: 22, rotation: -2 }
+      ] },
+      { name: "legUpperR", at: [20, 76], length: 76, width: 26, rotation: -3, children: [
+        { name: "legLowerR", at: [0, 76], length: 72, width: 22, rotation: 2 }
+      ] }
+    ]
+  };
+  return rig(root, opts);
+}
+
+// ../core/src/characterPreset.ts
+var CHARACTER_PRESET_NAMES = ["walk", "run", "jump", "dance", "wave", "cheer"];
+var THIGH = 76;
+var SHIN = 72;
+var clamp012 = (x) => Math.max(0, Math.min(1, x));
+function makeRng2(seed) {
+  let a = seed >>> 0 || 2654435769;
+  return () => {
+    a = a + 1831565813 | 0;
+    let t = Math.imul(a ^ a >>> 15, 1 | a);
+    t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+var dur2 = (base, sp) => base / sp;
+function ctx2(o) {
+  const rand = makeRng2((o.seed ?? 0) + 1);
+  return {
+    g: o.target,
+    label: o.label,
+    e: clamp012(o.energy ?? 0.5),
+    sp: Math.max(0.25, o.speed ?? 1),
+    cycles: Math.max(1, Math.round(o.cycles ?? 4)),
+    facing: o.facing ?? 1,
+    at: o.at ?? [0, 0],
+    travel: o.travel,
+    rand,
+    jit: (amp) => (rand() - 0.5) * 2 * amp
+  };
+}
+var round = (v) => Math.round(v * 1e3) / 1e3;
+function footPos(p, stride, lift) {
+  p = (p % 1 + 1) % 1;
+  if (p < 0.5) {
+    const u2 = p / 0.5;
+    return [stride * (1 - 2 * u2), 138];
+  }
+  const u = (p - 0.5) / 0.5;
+  return [-stride + 2 * stride * u, 138 - Math.sin(Math.PI * u) * lift];
+}
+function gaitPose(ph, stride, lift, armSwing, facing) {
+  const fl = footPos(ph, stride, lift);
+  const fr = footPos(ph + 0.5, stride, lift);
+  const [hipL, kneeL] = ikReach(THIGH, SHIN, facing * fl[0], fl[1], facing < 0);
+  const [hipR, kneeR] = ikReach(THIGH, SHIN, facing * fr[0], fr[1], facing < 0);
+  const swing = Math.cos(2 * Math.PI * ph);
+  return {
+    legUpperL: round(hipL),
+    legLowerL: round(kneeL),
+    legUpperR: round(hipR),
+    legLowerR: round(kneeR),
+    armUpperR: round(-10 - armSwing * swing),
+    armLowerR: -16,
+    armUpperL: round(10 + armSwing * swing),
+    armLowerL: 16
+  };
+}
+function gait(c, run) {
+  const stride = (run ? 34 : 24) + (run ? 40 : 30) * c.e + c.jit(3);
+  const lift = run ? 40 : 26;
+  const armSwing = (run ? 26 : 16) + 20 * c.e;
+  const halfDur = (run ? 0.26 : 0.42) + c.jit(0.02);
+  const lean = run ? c.facing * -6 : 0;
+  const steps = c.cycles * 2;
+  const d = dur2(halfDur, c.sp);
+  const intro = dur2(0.16, c.sp);
+  const keys = [];
+  for (let k = 0; k <= steps; k++) {
+    const pose = { ...gaitPose(k / 2, stride, lift, armSwing, c.facing), chest: lean };
+    keys.push(poseTo(c.g, pose, { duration: k === 0 ? intro : d, ease: k === 0 ? "easeOutQuad" : "linear" }));
+  }
+  const total = intro + steps * d;
+  const travel = c.travel ?? stride * 2;
+  const children = [seq(...keys)];
+  if (travel !== 0) {
+    children.push(tween(c.g, { x: c.at[0] + c.facing * travel * c.cycles }, { duration: total, ease: "linear", label: "travel" }));
+  }
+  return beat(run ? "run" : "walk", {}, [par(...children)]);
+}
+function jumpBeat(c) {
+  const h = 120 + 150 * c.e;
+  const [y0] = [c.at[1]];
+  const CROUCH = { legUpperL: 18, legLowerL: 54, legUpperR: -18, legLowerR: 54, armUpperL: 28, armUpperR: -28 };
+  const LAUNCH = { legUpperL: 0, legLowerL: 0, legUpperR: 0, legLowerR: 0, armUpperL: 150, armUpperR: -150 };
+  const TUCK = { legUpperL: -28, legLowerL: 66, legUpperR: -28, legLowerR: 66, armUpperL: 124, armUpperR: -124 };
+  const REST = { legUpperL: 3, legLowerL: -2, legUpperR: -3, legLowerR: 2, armUpperL: 10, armLowerL: 8, armUpperR: -10, armLowerR: -8 };
+  const j = c.jit(0.03);
+  return beat("jump", {}, [
+    seq(
+      par(poseTo(c.g, CROUCH, { duration: dur2(0.24, c.sp), ease: "easeOutQuad" }), tween(c.g, { y: y0 + 26 }, { duration: dur2(0.24, c.sp), ease: "easeOutQuad" })),
+      par(poseTo(c.g, LAUNCH, { duration: dur2(0.22 + j, c.sp), ease: "easeOutCubic" }), tween(c.g, { y: y0 - h }, { duration: dur2(0.36, c.sp), ease: "easeOutCubic", label: "launch" })),
+      poseTo(c.g, TUCK, { duration: dur2(0.22, c.sp) }),
+      par(poseTo(c.g, CROUCH, { duration: dur2(0.28, c.sp), ease: "easeInQuad" }), tween(c.g, { y: y0 + 18 }, { duration: dur2(0.3, c.sp), ease: "easeInCubic", label: "land" })),
+      par(poseTo(c.g, REST, { duration: dur2(0.45, c.sp), ease: "easeOutBack" }), tween(c.g, { y: y0 }, { duration: dur2(0.45, c.sp), ease: "easeOutBack" }))
+    )
+  ]);
+}
+function danceBeat(c) {
+  const y0 = c.at[1];
+  const sway = 8 + 6 * c.e;
+  const armUp = 130 + 30 * c.e;
+  const A = { chest: sway, head: -sway * 0.5, armUpperR: -armUp, armLowerR: -20, armUpperL: 40, armLowerL: 30, legUpperL: 8, legUpperR: -2 };
+  const B = { chest: -sway, head: sway * 0.5, armUpperL: armUp, armLowerL: 20, armUpperR: -40, armLowerR: -30, legUpperL: 2, legUpperR: -8 };
+  const d = dur2(0.34, c.sp);
+  const keys = [];
+  for (let k = 0; k < c.cycles * 2; k++) {
+    const pose = k % 2 === 0 ? A : B;
+    keys.push(par(
+      poseTo(c.g, pose, { duration: d, ease: "easeInOutQuad" }),
+      tween(c.g, { y: y0 - (k % 2 === 0 ? 14 : 0) }, { duration: d, ease: "easeInOutQuad" })
+    ));
+  }
+  keys.push(tween(c.g, { y: y0 }, { duration: d }));
+  return beat("dance", {}, [seq(...keys)]);
+}
+function waveBeat(c) {
+  const n3 = 3 + Math.round(c.rand() * 2);
+  const amp = 16 + 10 * c.e;
+  const steps = [poseTo(c.g, { armUpperR: -150, armLowerR: -24 }, { duration: dur2(0.4, c.sp), ease: "easeOutBack" })];
+  for (let k = 0; k < n3; k++) {
+    steps.push(poseTo(c.g, { armLowerR: -24 + (k % 2 === 0 ? amp : -amp) }, { duration: dur2(0.22, c.sp), ease: "easeInOutQuad" }));
+  }
+  steps.push(poseTo(c.g, { armUpperR: -10, armLowerR: -8 }, { duration: dur2(0.4, c.sp), ease: "easeInOutCubic" }));
+  return beat("wave", {}, [seq(...steps)]);
+}
+function cheerBeat(c) {
+  const y0 = c.at[1];
+  const UP = { armUpperL: 152, armLowerL: 8, armUpperR: -152, armLowerR: -8 };
+  const d = dur2(0.3, c.sp);
+  const keys = [poseTo(c.g, UP, { duration: dur2(0.35, c.sp), ease: "easeOutBack" })];
+  for (let k = 0; k < c.cycles; k++) {
+    keys.push(par(tween(c.g, { y: y0 - 28 }, { duration: d, ease: "easeOutQuad" }), poseTo(c.g, { armUpperL: 160, armUpperR: -160 }, { duration: d })));
+    keys.push(par(tween(c.g, { y: y0 }, { duration: d, ease: "easeInQuad" }), poseTo(c.g, { armUpperL: 145, armUpperR: -145 }, { duration: d })));
+  }
+  return beat("cheer", {}, [seq(...keys)]);
+}
+function characterPreset(name, opts) {
+  const c = ctx2(opts);
+  let tl;
+  switch (name) {
+    case "walk":
+      tl = gait(c, false);
+      break;
+    case "run":
+      tl = gait(c, true);
+      break;
+    case "jump":
+      tl = jumpBeat(c);
+      break;
+    case "dance":
+      tl = danceBeat(c);
+      break;
+    case "wave":
+      tl = waveBeat(c);
+      break;
+    case "cheer":
+      tl = cheerBeat(c);
+      break;
+    default: {
+      const _exhaustive = name;
+      throw new Error(`unknown characterPreset "${_exhaustive}"`);
+    }
+  }
+  return c.label && tl.kind === "beat" ? { ...tl, name: c.label } : tl;
+}
+
+// ../core/src/figure.ts
+var K2 = 0.5523;
+var n2 = (v) => Number(v.toFixed(2));
+function limb(a, b, y0, y1) {
+  const ka = n2(a * K2), kb = n2(b * K2);
+  return `M ${-a} ${y0} C ${-a} ${n2(y0 - ka)} ${-ka} ${n2(y0 - a)} 0 ${n2(y0 - a)} C ${ka} ${n2(y0 - a)} ${a} ${n2(y0 - ka)} ${a} ${y0} L ${b} ${y1} C ${b} ${n2(y1 + kb)} ${kb} ${n2(y1 + b)} 0 ${n2(y1 + b)} C ${-kb} ${n2(y1 + b)} ${-b} ${n2(y1 + kb)} ${-b} ${y1} Z`;
+}
+function rrect(a, b, y0, y1, r) {
+  return `M ${n2(-a + r)} ${y0} L ${n2(a - r)} ${y0} Q ${a} ${y0} ${a} ${n2(y0 + r)} L ${b} ${n2(y1 - r)} Q ${b} ${y1} ${n2(b - r)} ${y1} L ${n2(-b + r)} ${y1} Q ${-b} ${y1} ${-b} ${n2(y1 - r)} L ${-a} ${n2(y0 + r)} Q ${-a} ${y0} ${n2(-a + r)} ${y0} Z`;
+}
+function darken(hex, f) {
+  const h = hex.replace("#", "");
+  const v = parseInt(h.length === 3 ? [...h].map((c) => c + c).join("") : h, 16);
+  const ch = (s) => Math.max(0, Math.min(255, Math.round((v >> s & 255) * (1 - f))));
+  const hx = (x) => x.toString(16).padStart(2, "0");
+  return `#${hx(ch(16))}${hx(ch(8))}${hx(ch(0))}`;
+}
+var DEF = {
+  clean: { skin: "#E9B58E", hair: "#2B313F", top: "#E86C4A", pants: "#39425C", shoe: "#20242F", accent: "#E86C4A" },
+  cute: { skin: "#FFD2A6", hair: "#5B4636", top: "#FF7E5F", pants: "#3E6F8E", shoe: "#272B38", accent: "#FF7E5F" }
+};
+function resolvePal(style, p = {}) {
+  const d = DEF[style];
+  const accent = p.accent ?? d.accent;
+  const top = p.top ?? (style === "clean" ? accent : d.top);
+  const skin = p.skin ?? d.skin;
+  const hair = p.hair ?? d.hair;
+  const pants = p.pants ?? d.pants;
+  const shoe = p.shoe ?? d.shoe;
+  return {
+    skin,
+    skinSh: darken(skin, 0.12),
+    hair,
+    hairSh: darken(hair, 0.14),
+    top,
+    topSh: darken(top, 0.12),
+    pants,
+    pantsSh: darken(pants, 0.14),
+    shoe,
+    shoeSh: darken(shoe, 0.22),
+    eye: "#2B313F",
+    cheek: "#FF9E7E",
+    white: "#FFFFFF",
+    mouth: "#8A4233"
+  };
+}
+var fp = (id, d, fill, stroke, sw = 0, opacity = 1) => path({ id, d, x: 0, y: 0, fill, opacity, ...stroke && sw > 0 ? { stroke, strokeWidth: sw } : {} });
+function cleanParts(p, face) {
+  const HC = -42;
+  return {
+    upperArm: (j) => [fp(`${j}-sleeve`, limb(12, 10, 2, 58), p.top)],
+    forearm: (j) => [
+      fp(`${j}-elbow`, ovalPath(10, 10, 0, 3), p.skin),
+      fp(`${j}-fore`, limb(10, 8, 2, 48), p.skin),
+      fp(`${j}-hand`, ovalPath(11, 12, 0, 50), p.skin)
+    ],
+    thigh: (j) => [fp(`${j}-thigh`, limb(15, 13, 2, 72), p.pants)],
+    shin: (j) => [
+      fp(`${j}-knee`, ovalPath(13, 13, 0, 2), p.pants),
+      fp(`${j}-shin`, limb(13, 11, 2, 62), p.pants),
+      fp(`${j}-shoe`, ovalPath(15, 9, 4, 67), p.shoe)
+    ],
+    torso: (j) => [
+      fp(`${j}-shadow`, rrect(38, 26, -28, 52, 20), p.topSh),
+      fp(`${j}-top`, rrect(40, 27, -30, 52, 22), p.top),
+      fp(`${j}-pelvis`, rrect(29, 24, 46, 104, 14), p.pants)
+    ],
+    head: (j) => [
+      fp(`${j}-neck`, rrect(9, 9, 2, 22, 5), p.skin),
+      fp(`${j}-skin`, ovalPath(42, 46, 0, HC), p.skin),
+      fp(`${j}-hair`, ovalPath(44, 27, 0, HC - 31), p.hair),
+      fp(`${j}-hairL`, ovalPath(8, 14, -39, HC - 18), p.hair),
+      fp(`${j}-hairR`, ovalPath(8, 14, 39, HC - 18), p.hair),
+      ...face ? [fp(`${j}-eyeL`, ovalPath(5, 7, -14, HC + 2), p.eye), fp(`${j}-eyeR`, ovalPath(5, 7, 14, HC + 2), p.eye)] : []
+    ]
+  };
+}
+var CUTE_HAIR = "M -64 -54 C -78 -96 -50 -126 0 -126 C 50 -126 78 -96 64 -54 C 60 -34 48 -28 41 -33 C 35 -54 23 -60 9 -60 C 3 -60 -3 -60 -9 -60 C -23 -60 -35 -54 -41 -33 C -48 -28 -60 -34 -64 -54 Z";
+function cuteParts(p, face) {
+  const HC = -50;
+  return {
+    upperArm: (j) => [fp(`${j}-sleeve`, limb(15, 13, 2, 58), p.top, p.topSh, 2.5)],
+    forearm: (j) => [
+      fp(`${j}-elbow`, ovalPath(12, 12, 0, 3), p.skin, p.skinSh, 2.5),
+      fp(`${j}-fore`, limb(12, 10, 2, 46), p.skin, p.skinSh, 2.5),
+      fp(`${j}-hand`, ovalPath(13, 14, 0, 50), p.skin, p.skinSh, 2.5)
+    ],
+    thigh: (j) => [fp(`${j}-thigh`, limb(19, 16, 2, 72), p.pants, p.pantsSh, 2.5)],
+    shin: (j) => [
+      fp(`${j}-knee`, ovalPath(16, 16, 0, 2), p.pants, p.pantsSh, 2.5),
+      fp(`${j}-shin`, limb(15, 12, 2, 60), p.pants, p.pantsSh, 2.5),
+      fp(`${j}-shoe`, ovalPath(18, 11, 5, 66), p.shoe, darken(p.shoe, 0.25), 2.5)
+    ],
+    torso: (j) => [
+      fp(`${j}-shadow`, rrect(40, 34, -18, 52, 16), p.topSh),
+      fp(`${j}-top`, rrect(42, 35, -20, 52, 18), p.top, p.topSh, 2.5),
+      fp(`${j}-pelvis`, rrect(36, 30, 46, 104, 16), p.pants, p.pantsSh, 2.5)
+    ],
+    head: (j) => [
+      fp(`${j}-neck`, ovalPath(15, 12, 0, 12), p.skinSh),
+      fp(`${j}-skin`, ovalPath(42, 46, 0, HC + 4), p.skin, p.skinSh, 2.5),
+      fp(`${j}-cheekL`, ovalPath(11, 8, -40, HC + 22), p.cheek, void 0, 0, 0.5),
+      fp(`${j}-cheekR`, ovalPath(11, 8, 40, HC + 22), p.cheek, void 0, 0, 0.5),
+      fp(`${j}-hair`, CUTE_HAIR, p.hair, p.hairSh, 2),
+      ...face ? [
+        fp(`${j}-eyeL`, ovalPath(10, 13, -25, HC + 8), p.eye),
+        fp(`${j}-eyeR`, ovalPath(10, 13, 25, HC + 8), p.eye),
+        fp(`${j}-glL`, ovalPath(3.4, 3.4, -28, HC + 3), p.white),
+        fp(`${j}-glR`, ovalPath(3.4, 3.4, 22, HC + 3), p.white),
+        path({ id: `${j}-mouth`, d: "M -15 0 Q 0 15 15 0", x: 0, y: HC + 28, fill: "none", stroke: p.mouth, strokeWidth: 5 })
+      ] : []
+    ]
+  };
+}
+function buildSkeleton(id, S) {
+  const arm = (side, x, r1, r2) => ({
+    name: `armUpper${side}`,
+    at: [x, -14],
+    length: 60,
+    width: 0,
+    rotation: r1,
+    shape: S.upperArm(`${id}-armUpper${side}`),
+    children: [{ name: `armLower${side}`, at: [0, 60], length: 56, width: 0, rotation: r2, shape: S.forearm(`${id}-armLower${side}`) }]
+  });
+  const leg = (side, x, r1, r2) => ({
+    name: `legUpper${side}`,
+    at: [x, 76],
+    length: 76,
+    width: 0,
+    rotation: r1,
+    shape: S.thigh(`${id}-legUpper${side}`),
+    children: [{ name: `legLower${side}`, at: [0, 76], length: 72, width: 0, rotation: r2, shape: S.shin(`${id}-legLower${side}`) }]
+  });
+  return {
+    name: "chest",
+    at: [0, 0],
+    shape: S.torso(`${id}-chest`),
+    children: [
+      { name: "head", at: [0, -42], rotation: 0, shape: S.head(`${id}-head`) },
+      arm("L", -40, 8, 6),
+      arm("R", 40, -8, -6),
+      leg("L", -20, 3, -2),
+      leg("R", 20, -3, 2)
+    ]
+  };
+}
+function figure(opts = {}) {
+  const style = opts.style ?? "clean";
+  const pal = resolvePal(style, opts.palette);
+  const face = opts.face ?? true;
+  const id = opts.id ?? "figure";
+  const parts = style === "clean" ? cleanParts(pal, face) : cuteParts(pal, face);
+  const rigOpts = { id };
+  if (opts.x !== void 0) rigOpts.x = opts.x;
+  if (opts.y !== void 0) rigOpts.y = opts.y;
+  if (opts.scale !== void 0) rigOpts.scale = opts.scale;
+  if (opts.opacity !== void 0) rigOpts.opacity = opts.opacity;
+  return rig(buildSkeleton(id, parts), rigOpts);
+}
+
+// ../core/src/motionOps.ts
+var MOTION_OPS = ["rotate", "zoom", "ken-burns", "slide-in", "fade", "draw-on", "pulse"];
+var clamp013 = (n3) => Math.max(0, Math.min(1, n3));
+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 = clamp013(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 +1817,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 +1833,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 });
+    }
   }
-  return { duration, bgm, cues, duckWindows, warnings };
+  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 }
+    });
+  }
+  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
@@ -976,8 +1918,8 @@ function valueNoise(x, seed) {
   const b = hash01(i + 1, seed) * 2 - 1;
   return a + (b - a) * u;
 }
-function hash01(n, seed) {
-  let h = n * 374761393 + seed * 668265263 | 0;
+function hash01(n3, seed) {
+  let h = n3 * 374761393 + seed * 668265263 | 0;
   h = h ^ h >>> 13 | 0;
   h = Math.imul(h, 1274126177);
   h = (h ^ h >>> 16) >>> 0;
@@ -1070,8 +2012,8 @@ function isColor(v) {
 function parseColor(hex) {
   let h = hex.slice(1);
   if (h.length <= 4) h = [...h].map((c) => c + c).join("");
-  const n = parseInt(h.padEnd(8, "f"), 16);
-  return [n >>> 24 & 255, n >>> 16 & 255, n >>> 8 & 255, n & 255];
+  const n3 = parseInt(h.padEnd(8, "f"), 16);
+  return [n3 >>> 24 & 255, n3 >>> 16 & 255, n3 >>> 8 & 255, n3 & 255];
 }
 function formatColor([r, g, b, a]) {
   const hex = (v) => Math.round(Math.max(0, Math.min(255, v))).toString(16).padStart(2, "0");
@@ -1091,26 +2033,86 @@ function lerpValue(from, to2, u) {
       a[3] + (b[3] - a[3]) * u
     ]);
   }
+  if (looksLikePath(from) && looksLikePath(to2)) {
+    const a = tokenizePath(from);
+    const b = tokenizePath(to2);
+    if (a && b && morphCompatible(a, b)) return morphPath(a, b, u);
+    return u < 0.5 ? from : to2;
+  }
   return to2;
 }
+var PATH_BODY = /^[\sMmLlHhVvCcSsQqTtAaZz0-9.,eE+-]+$/;
+function looksLikePath(v) {
+  return typeof v === "string" && /^\s*[Mm]/.test(v) && PATH_BODY.test(v);
+}
+var PATH_TOKEN = /([MmLlHhVvCcSsQqTtAaZz])|(-?(?:\d+\.?\d*|\.\d+)(?:[eE][-+]?\d+)?)/g;
+function tokenizePath(d) {
+  const out = [];
+  let cur = null;
+  let m;
+  PATH_TOKEN.lastIndex = 0;
+  while (m = PATH_TOKEN.exec(d)) {
+    if (m[1]) out.push(cur = { cmd: m[1], nums: [] });
+    else if (m[2]) {
+      if (!cur) return null;
+      cur.nums.push(parseFloat(m[2]));
+    }
+  }
+  return out.length ? out : null;
+}
+function morphCompatible(a, b) {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) {
+    const ca = a[i];
+    const cb = b[i];
+    if (ca.cmd !== cb.cmd || ca.nums.length !== cb.nums.length) return false;
+    if (ca.cmd === "A" || ca.cmd === "a") return false;
+  }
+  return true;
+}
+var fmtNum = (v) => {
+  const r = Number(v.toFixed(3));
+  return Object.is(r, -0) ? "0" : String(r);
+};
+function morphPath(a, b, u) {
+  let s = "";
+  for (let i = 0; i < a.length; i++) {
+    const an = a[i].nums;
+    const bn = b[i].nums;
+    s += (i ? " " : "") + a[i].cmd;
+    for (let j = 0; j < an.length; j++) s += " " + fmtNum(an[j] + (bn[j] - an[j]) * u);
+  }
+  return s;
+}
 
 // ../core/src/evaluate.ts
 var IDENTITY = [1, 0, 0, 1, 0, 0];
-function multiply(m, n) {
+function multiply(m, n3) {
   return [
-    m[0] * n[0] + m[2] * n[1],
-    m[1] * n[0] + m[3] * n[1],
-    m[0] * n[2] + m[2] * n[3],
-    m[1] * n[2] + m[3] * n[3],
-    m[0] * n[4] + m[2] * n[5] + m[4],
-    m[1] * n[4] + m[3] * n[5] + m[5]
+    m[0] * n3[0] + m[2] * n3[1],
+    m[1] * n3[0] + m[3] * n3[1],
+    m[0] * n3[2] + m[2] * n3[3],
+    m[1] * n3[2] + m[3] * n3[3],
+    m[0] * n3[4] + m[2] * n3[5] + m[4],
+    m[1] * n3[4] + m[3] * n3[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 K3 = [1, ty, tx, 1, 0, 0];
+  const S = [scale * scaleX, 0, 0, scale * scaleY, 0, 0];
+  const m = multiply(R, multiply(K3, S));
+  return [m[0], m[1], m[2], m[3], x, y];
 }
 var ANCHOR_FACTORS = {
   "top-left": [0, 0],
@@ -1135,53 +2137,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;
     }
-    return value;
+    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 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 +2229,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 +2248,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 +2261,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 +2293,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 +2311,8 @@ function evaluate(compiled, t) {
           width,
           height,
           offsetX: -width * ax,
-          offsetY: -height * ay
+          offsetY: -height * ay,
+          ...clipSpread
         });
         return;
       }
@@ -1284,7 +2329,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 +2353,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;
 }
 
@@ -1364,29 +2411,29 @@ function sketchToTimeline(sketch, nodeIds) {
   const steps = [];
   events.forEach((ev, i) => {
     const node = nodeIds[i % nodeIds.length];
-    const dur2 = Math.max(0.05, ev.t1 - ev.t0);
+    const dur3 = Math.max(0.05, ev.t1 - ev.t0);
     const ease = easeFor(ev.easing);
     let motion;
     switch (ev.kind) {
       case "enter":
-        motion = tween(node, { opacity: 1 }, { duration: dur2, ease });
+        motion = tween(node, { opacity: 1 }, { duration: dur3, ease });
         break;
       case "exit":
-        motion = tween(node, { opacity: 0 }, { duration: dur2, ease });
+        motion = tween(node, { opacity: 0 }, { duration: dur3, ease });
         break;
       case "emphasis": {
         const peak = 1 + Math.max(0.08, Math.min(0.5, ev.magnitude));
         motion = seq(
-          tween(node, { scale: peak }, { duration: dur2 / 2, ease: "easeOutCubic" }),
-          tween(node, { scale: 1 }, { duration: dur2 / 2, ease: "easeInOutQuad" })
+          tween(node, { scale: peak }, { duration: dur3 / 2, ease: "easeOutCubic" }),
+          tween(node, { scale: 1 }, { duration: dur3 / 2, ease: "easeInOutQuad" })
         );
         break;
       }
       case "scale":
-        motion = tween(node, { scale: 1 + Math.max(-0.5, Math.min(0.5, ev.magnitude)) }, { duration: dur2, ease });
+        motion = tween(node, { scale: 1 + Math.max(-0.5, Math.min(0.5, ev.magnitude)) }, { duration: dur3, ease });
         break;
       case "move":
-        motion = tween(node, { opacity: 1 }, { duration: dur2, ease });
+        motion = tween(node, { opacity: 1 }, { duration: dur3, ease });
         break;
     }
     steps.push(ev.t0 > 0 ? seq(wait(ev.t0), motion) : motion);
@@ -1394,38 +2441,61 @@ function sketchToTimeline(sketch, nodeIds) {
   return par(...steps);
 }
 export {
+  CHARACTER_PRESET_NAMES,
+  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,
+  characterPreset,
   collectImageSrcs,
+  compileComposition,
   compileScene,
   composeScene,
+  composition,
+  deviceBounds,
+  devicePreset,
+  deviceScreen,
+  deviceScreenCenter,
   ellipse,
   evaluate,
+  figure,
   formatComposeReport,
   group,
+  humanoid,
+  ikReach,
   image,
   isColor,
   lerpValue,
   line,
+  motionOp,
+  motionOpLabel,
   motionPath,
   motionPreset,
+  nodeParentMatrix,
   oscillate,
+  ovalPath,
   par,
   path,
   pathPoint,
   pathTangentAngle,
+  poseTo,
   rect,
   resolveAudioPlan,
+  resolveCompositionAudioPlan,
   resolveEase,
+  rig,
+  rigPose,
   sampleBehavior,
+  sampleProp,
   scene,
   seq,
   sketchToTimeline,
@@ -1433,6 +2503,7 @@ export {
   text,
   to,
   tween,
+  validateComposition,
   validateScene,
   wait,
   wiggle