reframe-video 0.6.32 → 0.6.34

package/dist/index.js

@@ -1259,6 +1259,35 @@ function cameraTo(props, opts = {}) {
   return tween(CAMERA_ID, props, opts);
 }
 
+// ../core/src/behaviors.ts
+function sampleBehavior(b, t) {
+  switch (b.name) {
+    case "oscillate": {
+      const { amplitude, frequency, phase = 0 } = b.params;
+      return amplitude * Math.sin(2 * Math.PI * frequency * t + phase);
+    }
+    case "wiggle": {
+      const { amplitude, frequency, seed } = b.params;
+      return amplitude * valueNoise(t * frequency, seed);
+    }
+  }
+}
+function valueNoise(x, seed) {
+  const i = Math.floor(x);
+  const f = x - i;
+  const u = f * f * (3 - 2 * f);
+  const a = hash01(i, seed) * 2 - 1;
+  const b = hash01(i + 1, seed) * 2 - 1;
+  return a + (b - a) * u;
+}
+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;
+  return h / 4294967295;
+}
+
 // ../core/src/gradient.ts
 function isGradient(p) {
   return typeof p === "object" && p !== null && (p.kind === "linear" || p.kind === "radial" || p.kind === "conic");
@@ -1291,735 +1320,705 @@ function conicGradient(stops, opts = {}) {
   };
 }
 
-// ../core/src/effects.ts
-function glow(color, blur = 24) {
-  return { shadowColor: color, shadowBlur: blur, shadowX: 0, shadowY: 0 };
+// ../core/src/evaluate.ts
+var IDENTITY = [1, 0, 0, 1, 0, 0];
+function multiply(m, n3) {
+  return [
+    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 dropShadow(color, blur = 24, x = 0, y = 12) {
-  return { shadowColor: color, shadowBlur: blur, shadowX: x, shadowY: y };
+var DEG = Math.PI / 180;
+var z0 = (x) => x === 0 ? 0 : x;
+function projectDepth(m, z, vx, vy, d) {
+  if (z === 0) return m;
+  const p = d + z > 0 ? d / (d + z) : 1e-6;
+  return [
+    z0(m[0] * p),
+    z0(m[1] * p),
+    z0(m[2] * p),
+    z0(m[3] * p),
+    z0(vx + (m[4] - vx) * p),
+    z0(vy + (m[5] - vy) * p)
+  ];
 }
-
-// ../core/src/layout.ts
-function row(count, opts = {}) {
-  if (count <= 0) return [];
-  const center = opts.center ?? 0;
-  if (count === 1) return [center];
-  if (opts.span !== void 0) {
-    const start2 = center - opts.span / 2;
-    const pitch2 = opts.span / (count - 1);
-    return Array.from({ length: count }, (_, i) => start2 + i * pitch2);
+function tiltSkew(m, rotXdeg, rotYdeg, hw, hh, d) {
+  const ky = Math.sin(rotYdeg * DEG) * hw / d;
+  const kx = Math.sin(rotXdeg * DEG) * hh / d;
+  if (ky === 0 && kx === 0) return m;
+  return multiply(m, [1, kx, ky, 1, 0, 0]);
+}
+function localMatrix(x, y, rotationDeg, scale, scaleX = 1, scaleY = 1, skewXDeg = 0, skewYDeg = 0) {
+  const r = rotationDeg * Math.PI / 180;
+  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 iw = opts.itemWidth ?? 0;
-  const gap = opts.gap ?? 0;
-  const pitch = iw + gap;
-  const total = count * iw + (count - 1) * gap;
-  const start = center - total / 2 + iw / 2;
-  return Array.from({ length: count }, (_, i) => start + i * pitch);
+  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 column = row;
-function grid(rows, cols, opts = {}) {
-  const axis = (center, gap, item, span) => ({
-    center,
-    ...gap !== void 0 ? { gap } : {},
-    ...item !== void 0 ? { itemWidth: item } : {},
-    ...span !== void 0 ? { span } : {}
-  });
-  const xs = row(cols, axis(opts.center?.x ?? 0, opts.gapX, opts.cellW, opts.spanX));
-  const ys = row(rows, axis(opts.center?.y ?? 0, opts.gapY, opts.cellH, opts.spanY));
-  const out = [];
-  for (let r = 0; r < rows; r++) for (let c = 0; c < cols; c++) out.push({ x: xs[c], y: ys[r] });
-  return out;
+var ANCHOR_FACTORS = {
+  "top-left": [0, 0],
+  "top-center": [0.5, 0],
+  "top-right": [1, 0],
+  "center-left": [0, 0.5],
+  center: [0.5, 0.5],
+  "center-right": [1, 0.5],
+  "bottom-left": [0, 1],
+  "bottom-center": [0.5, 1],
+  "bottom-right": [1, 1]
+};
+var TEXT_ALIGN = { 0: "left", 0.5: "center", 1: "right" };
+var TEXT_BASELINE = { 0: "top", 0.5: "middle", 1: "bottom" };
+function formatNumber(value, decimals, thousands) {
+  const fixed = value.toFixed(decimals);
+  if (!thousands) return fixed;
+  const neg = fixed.startsWith("-");
+  const body = neg ? fixed.slice(1) : fixed;
+  const dot = body.indexOf(".");
+  const intPart = dot === -1 ? body : body.slice(0, dot);
+  const frac = dot === -1 ? "" : body.slice(dot);
+  const grouped = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return (neg ? "-" : "") + grouped + frac;
 }
-
-// ../core/src/montage.ts
-var VIDEO_EXT = /\.(mp4|mov|webm|m4v|mkv)$/i;
-var isVideoSrc = (src) => VIDEO_EXT.test(src);
-function makeRng(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;
-  };
+function behaviorEnvelope(b, t) {
+  const from = b.from ?? Number.NEGATIVE_INFINITY;
+  const until = b.until ?? Number.POSITIVE_INFINITY;
+  if (t < from || t > until) return 0;
+  const ramp = b.ramp ?? 0.2;
+  let envelope = 1;
+  if (Number.isFinite(from) && ramp > 0) envelope = Math.min(envelope, (t - from) / ramp);
+  if (Number.isFinite(until) && ramp > 0) envelope = Math.min(envelope, (until - t) / ramp);
+  return Math.max(0, Math.min(1, envelope));
 }
-var norm = (img) => typeof img === "string" ? { src: img } : img;
-function photoMontage(images, opts = {}) {
-  const id = opts.id ?? "shot";
-  const W = opts.size?.width ?? 1920;
-  const H = opts.size?.height ?? 1080;
-  const hold = Math.max(0.5, opts.hold ?? 3.2);
-  const zoom = Math.max(1.001, opts.zoom ?? 1.18);
-  const grade = opts.grade !== false;
-  const rand2 = makeRng((opts.seed ?? 0) + 1);
-  const slides = images.map(norm);
-  const cx = W / 2;
-  const cy = H / 2;
-  const nodes = [];
-  const shots = [];
-  let clock = 0;
-  slides.forEach((slide, i) => {
-    const nid = `${id}-${i}`;
-    const slideHold = Math.max(0.5, slide.hold ?? hold);
-    const transition = Math.min(opts.transition ?? 0.6, slideHold * 0.9);
-    const shotStart = clock;
-    clock += slideHold;
-    const kind = slide.ken ?? ["in", "out", "pan"][Math.floor(rand2() * 3)] ?? "in";
-    const angle = rand2() * Math.PI * 2;
-    const panFrac = 0.4 + rand2() * 0.35;
-    const dx = Math.cos(angle);
-    const dy = Math.sin(angle);
-    let kA, kB;
-    let xA, xB, yA, yB;
-    if (kind === "pan") {
-      kA = kB = zoom;
-      const sx = dx * (zoom - 1) * (W / 2) * panFrac;
-      const sy = dy * (zoom - 1) * (H / 2) * panFrac;
-      xA = cx - sx;
-      xB = cx + sx;
-      yA = cy - sy;
-      yB = cy + sy;
-    } else {
-      kA = kind === "in" ? 1 : zoom;
-      kB = kind === "in" ? zoom : 1;
-      xA = cx + dx * (kA - 1) * (W / 2) * panFrac;
-      xB = cx + dx * (kB - 1) * (W / 2) * panFrac;
-      yA = cy + dy * (kA - 1) * (H / 2) * panFrac;
-      yB = cy + dy * (kB - 1) * (H / 2) * panFrac;
+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;
     }
-    const box = { id: nid, src: slide.src, x: xA, y: yA, width: W, height: H, anchor: "center", fit: "cover", scale: kA, opacity: i === 0 ? 1 : 0 };
-    nodes.push(
-      isVideoSrc(slide.src) ? video({ ...box, start: shotStart, volume: slide.volume ?? 0 }) : image(box)
-    );
-    const ken = tween(
-      nid,
-      { scale: kB, x: xB, y: yB },
-      { duration: slideHold, ease: "easeInOutQuad", label: `shot-${i}` }
-    );
-    const shot = i === 0 ? par(ken) : par(
-      ken,
-      tween(`${id}-${i - 1}`, { opacity: 0 }, { duration: transition, ease: "linear", label: `cross-${i}` }),
-      tween(nid, { opacity: 1 }, { duration: transition, ease: "linear" })
-    );
-    shots.push(shot);
-  });
-  if (grade) {
-    nodes.push(
-      rect({
-        id: `${id}-vignette`,
-        x: 0,
-        y: 0,
-        width: W,
-        height: H,
-        fill: radialGradient(
-          [
-            { offset: 0.55, color: "#FFFFFF" },
-            { offset: 1, color: "#6E6E6E" }
-          ],
-          { cx: 0.5, cy: 0.5, r: 0.72 }
-        ),
-        blend: "multiply"
-      })
-    );
-    nodes.push(
-      rect({
-        id: `${id}-scrim`,
-        x: 0,
-        y: 0,
-        width: W,
-        height: H,
-        fill: linearGradient(
-          [
-            { offset: 0, color: "#00000000" },
-            { offset: 0.62, color: "#00000000" },
-            { offset: 1, color: "#000000B0" }
-          ],
-          { angle: 90 }
-        )
-      })
-    );
-  }
-  return { nodes, timeline: beat("montage", { nodes: nodes.map((n3) => n3.id) }, [seq(...shots)]) };
-}
-var videoMontage = photoMontage;
-
-// ../core/src/presets.ts
-var PRESET_NAMES = [
-  "draw-bloom",
-  "punch-in",
-  "rise-settle",
-  "slide-bank",
-  "reveal-orbit",
-  "spin-forge"
-];
-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 clamp01 = (x) => Math.max(0, Math.min(1, x));
-var SET = 1 / 120;
-function ctx(o) {
-  const rand2 = makeRng2((o.seed ?? 0) + 1);
-  return {
-    e: clamp01(o.energy ?? 0.5),
-    sp: Math.max(0.25, o.speed ?? 1),
-    it: clamp01(o.intensity ?? 0.5),
-    from: o.from,
-    rand: rand2,
-    jit: (amp) => (rand2() - 0.5) * 2 * amp,
-    g: o.target.group,
-    cx: o.target.center[0],
-    cy: o.target.center[1],
-    s: o.target.baseScale,
-    fills: o.target.fills,
-    inks: o.target.inks
-  };
-}
-var dur = (base, sp) => base / sp;
-function settleEase(e) {
-  return e < 0.34 ? "easeOutCubic" : e < 0.67 ? "easeOutBack" : "easeOutElastic";
-}
-function fromVec(from, dist) {
-  switch (from) {
-    case "left":
-      return [-dist, 0];
-    case "right":
-      return [dist, 0];
-    case "top":
-      return [0, -dist];
-    default:
-      return [0, dist];
-  }
-}
-function fadeFills(c, base = 0.4, gap = 0.06) {
-  return stagger(
-    gap / c.sp,
-    ...c.fills.map(
-      (id, i) => tween(id, { opacity: 1 }, { duration: dur(base, c.sp), ease: "easeOutQuad", ...i === 0 && { label: "reveal" } })
-    )
-  );
-}
-function drawInks(c) {
-  return stagger(
-    0.15 / c.sp,
-    ...c.inks.map(
-      (id, i) => tween(id, { progress: 1 }, { duration: dur(1.3 + c.jit(0.2), c.sp), ease: "easeInOutQuad", ...i === 0 && { label: "draw" } })
-    )
-  );
-}
-function motionPreset(name, opts) {
-  const c = ctx(opts);
-  switch (name) {
-    case "draw-bloom":
-      return beat("draw-bloom", {}, [
-        drawInks(c),
-        fadeFills(c, 0.45),
-        tween(c.g, { scale: c.s * (1.02 + 0.05 * c.e) }, { duration: dur(2.4, c.sp), ease: "easeInOutQuad", label: "settle" })
-      ]);
-    case "punch-in": {
-      const peak = c.s * (1 + 0.06 + 0.24 * c.e + c.jit(0.02));
-      return beat("punch-in", {}, [
-        par(
-          fadeFills(c, 0.25),
-          seq(
-            tween(c.g, { scale: peak }, { duration: dur(0.45 + c.jit(0.05), c.sp), ease: "easeOutCubic", label: "punch" }),
-            tween(c.g, { scale: c.s }, { duration: dur(0.5, c.sp), ease: settleEase(c.e) })
-          )
-        )
-      ]);
+    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);
+      }
     }
-    case "rise-settle": {
-      const es = 0.65 + c.rand() * 0.7;
-      const dist = (220 + 260 * c.it) * es;
-      const [dx, dy] = fromVec(c.from ?? "bottom", dist);
-      const jx = c.jit(110);
-      return beat("rise-settle", {}, [
-        par(
-          motionPath(
-            c.g,
-            [
-              [c.cx + dx + jx, c.cy + dy],
-              [c.cx + dx * 0.4 - jx * 0.6, c.cy + dy * 0.4],
-              [c.cx, c.cy]
-            ],
-            { duration: dur(1.1, c.sp), ease: settleEase(c.e), label: "rise" }
-          ),
-          fadeFills(c, 0.4)
-        )
-      ]);
+  }
+  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, 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;
+      }
     }
-    case "slide-bank": {
-      const es = 0.65 + c.rand() * 0.7;
-      const dist = (420 + 240 * c.it) * es;
-      const [dx, dy] = fromVec(c.from ?? "left", dist);
-      const arc = c.jit(140);
-      const midx = c.jit(120);
-      const move = dur(1.2, c.sp);
-      return beat("slide-bank", {}, [
-        par(
-          motionPath(
-            c.g,
-            [
-              [c.cx + dx, c.cy + dy],
-              [c.cx + dx * 0.4 + midx, c.cy + dy * 0.4 - 70 - arc],
-              [c.cx, c.cy]
-            ],
-            { duration: move, ease: settleEase(c.e), autoRotate: true, label: "slide" }
-          ),
-          // level the bank out once it lands (authored after the path → wins for rotation)
-          seq(wait(move), tween(c.g, { rotation: 0 }, { duration: dur(0.5, c.sp), ease: "easeOutCubic" })),
-          fadeFills(c, 0.4)
-        )
-      ]);
+  }
+  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);
     }
-    case "reveal-orbit": {
-      const es = 0.65 + c.rand() * 0.7;
-      const orbit = (180 + 160 * c.it) * es;
-      const jx = c.jit(0.4);
-      const jy = c.jit(0.4);
-      return beat("reveal-orbit", {}, [
-        drawInks(c),
-        fadeFills(c, 0.45),
-        par(
-          motionPath(
-            c.g,
-            [
-              [c.cx, c.cy],
-              [c.cx - orbit * (1 + jx), c.cy - orbit * 0.8],
-              [c.cx + orbit * (1 + jy), c.cy - orbit],
-              [c.cx, c.cy]
-            ],
-            { duration: dur(1.7, c.sp), ease: "easeInOutCubic", label: "orbit" }
-          ),
-          seq(
-            tween(c.g, { scale: c.s * (1.12 + 0.1 * c.e) }, { duration: dur(0.85, c.sp), ease: "easeOutBack" }),
-            tween(c.g, { scale: c.s }, { duration: dur(0.85, c.sp), ease: "easeInOutQuad" })
-          )
-        )
-      ]);
+  }
+  return value;
+}
+function nodeParentMatrix(compiled, id, t) {
+  const num2 = (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;
     }
-    case "spin-forge": {
-      const turns = 1 + Math.round(c.it);
-      const dir = c.rand() < 0.5 ? -1 : 1;
-      const startRot = dir * 360 * turns;
-      const peak = c.s * (1 + 0.05 + 0.2 * c.e);
-      return beat("spin-forge", {}, [
-        par(
-          seq(
-            tween(c.g, { scale: c.s * 0.2, rotation: startRot }, { duration: SET }),
-            // establish (invisible)
-            tween(c.g, { scale: peak, rotation: 0 }, { duration: dur(0.9, c.sp), ease: "easeOutBack", label: "spin" }),
-            tween(c.g, { scale: c.s }, { duration: dur(0.3, c.sp), ease: "easeInOutQuad" })
-          ),
-          seq(wait(SET), fadeFills(c, 0.3))
+    if (node.type === "group") {
+      const m = multiply(
+        parent,
+        localMatrix(
+          num2(node.id, "x", node.props.x),
+          num2(node.id, "y", node.props.y),
+          num2(node.id, "rotation", node.props.rotation ?? 0),
+          num2(node.id, "scale", node.props.scale ?? 1),
+          num2(node.id, "scaleX", node.props.scaleX ?? 1),
+          num2(node.id, "scaleY", node.props.scaleY ?? 1),
+          num2(node.id, "skewX", node.props.skewX ?? 0),
+          num2(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;
 }
-
-// ../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 deviceScreenPoint(name, opts, local) {
-  const c = deviceScreenCenter(name, opts);
-  const s = opts.scale ?? 1;
-  return [(opts.x ?? 0) + s * (c.x + local[0]), (opts.y ?? 0) + s * (c.y + local[1])];
-}
-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 })
-      ];
+function evaluate(compiled, t) {
+  const ops = [];
+  const valueAt = (target, prop, fallback) => sampleProp(compiled, t, target, prop, fallback);
+  const num2 = (target, prop, fallback) => {
+    const v = valueAt(target, prop, fallback);
+    return typeof v === "number" ? v : fallback;
+  };
+  const str = (target, prop, fallback) => {
+    const v = valueAt(target, prop, fallback);
+    return typeof v === "string" ? v : String(v);
+  };
+  const opt = (target, prop, base) => {
+    const v = valueAt(target, prop, base ?? "");
+    return v === "" && base === void 0 ? void 0 : String(v);
+  };
+  const effectFx = (id, p) => {
+    const fx = {};
+    if (p.blur !== void 0) fx.blur = num2(id, "blur", p.blur);
+    if (p.shadowColor !== void 0) {
+      fx.shadowColor = str(id, "shadowColor", p.shadowColor);
+      fx.shadowBlur = num2(id, "shadowBlur", p.shadowBlur ?? 0);
+      fx.shadowX = num2(id, "shadowX", p.shadowX ?? 0);
+      fx.shadowY = num2(id, "shadowY", p.shadowY ?? 0);
     }
-    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()
-      ];
+    if (p.blend !== void 0 && p.blend !== "normal") fx.blend = p.blend;
+    return fx;
+  };
+  const persp = compiled.hasPerspective;
+  const dPersp = persp ? num2("camera", "perspective", 0) : 0;
+  const vx = persp ? compiled.ir.size.width / 2 : 0;
+  const vy = persp ? compiled.ir.size.height / 2 : 0;
+  const aperture = persp ? num2("camera", "aperture", 0) : 0;
+  const focus = persp ? num2("camera", "focus", 0) : 0;
+  const dofFx = (fx, depth, project) => {
+    if (!project || aperture <= 0) return fx;
+    const extra = aperture * Math.abs(depth - focus);
+    if (extra <= 0) return fx;
+    return { ...fx, blur: z0((fx.blur ?? 0) + extra) };
+  };
+  const zSort = compiled.zSort;
+  const depthOf = (node, zAcc) => zAcc + num2(node.id, "z", node.props.z ?? 0);
+  const depthOrder = (children, zAcc) => [...children].sort((a, b) => depthOf(b, zAcc) - depthOf(a, zAcc));
+  const walk = (node, parent, parentOpacity, clips, zAcc, project) => {
+    const id = node.id;
+    const clipSpread = clips.length > 0 ? { clips } : void 0;
+    const fx = effectFx(id, node.props);
+    if (node.type === "line") {
+      const opacity2 = parentOpacity * num2(id, "opacity", node.props.opacity ?? 1);
+      if (opacity2 <= 0) return;
+      const progress = Math.max(0, Math.min(1, num2(id, "progress", node.props.progress ?? 1)));
+      const x1 = num2(id, "x1", node.props.x1);
+      const y1 = num2(id, "y1", node.props.y1);
+      ops.push({
+        type: "line",
+        id,
+        // a line carries no z/rotate of its own — it just inherits the subtree's depth
+        transform: project ? projectDepth(parent, zAcc, vx, vy, dPersp) : parent,
+        opacity: opacity2,
+        x1,
+        y1,
+        x2: x1 + (num2(id, "x2", node.props.x2) - x1) * progress,
+        y2: y1 + (num2(id, "y2", node.props.y2) - y1) * progress,
+        stroke: str(id, "stroke", node.props.stroke),
+        strokeWidth: num2(id, "strokeWidth", node.props.strokeWidth ?? 1),
+        // a line carries no z of its own — DOF uses the inherited subtree depth
+        ...dofFx(fx, zAcc, project),
+        ...clipSpread
+      });
+      return;
     }
-    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 })
-      ];
+    const opacity = parentOpacity * num2(id, "opacity", node.props.opacity ?? 1);
+    if (opacity <= 0) return;
+    let effScaleX = num2(id, "scaleX", node.props.scaleX ?? 1);
+    let effScaleY = num2(id, "scaleY", node.props.scaleY ?? 1);
+    let depth = zAcc;
+    let rotX = 0;
+    let rotY = 0;
+    if (project) {
+      rotX = num2(id, "rotateX", node.props.rotateX ?? 0);
+      rotY = num2(id, "rotateY", node.props.rotateY ?? 0);
+      depth = zAcc + num2(id, "z", node.props.z ?? 0);
+      if (rotY !== 0) effScaleX *= Math.abs(Math.cos(rotY * DEG));
+      if (rotX !== 0) effScaleY *= Math.abs(Math.cos(rotX * DEG));
     }
-  }
-}
-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/cursor.ts
-var ARROW_D = "M0 0 L0 30 L8 23 L12.6 33 L17 31 L12.4 21.4 L21 21.4 Z";
-function cursor(opts = {}) {
-  const id = opts.id ?? "cursor";
-  const style = opts.style ?? "arrow";
-  const fill = opts.fill ?? "#FFFFFF";
-  const accent = opts.accent ?? "#FF5A1F";
-  const art = style === "arrow" ? [path({ id: `${id}-arrow`, d: ARROW_D, x: 0, y: 0, fill, stroke: "#15171E", strokeWidth: 2 })] : style === "dot" ? [ellipse({ id: `${id}-dot`, x: 0, y: 0, width: 18, height: 18, fill: accent, anchor: "center" })] : [ellipse({ id: `${id}-ring`, x: 0, y: 0, width: 22, height: 22, fill: "none", stroke: accent, strokeWidth: 3, anchor: "center" })];
-  return group(
-    { id, x: opts.x ?? 0, y: opts.y ?? 0, scale: opts.scale ?? 1, opacity: opts.opacity ?? 1 },
-    [
-      // ripple ring (behind the pointer), emanates from the hotspot on click
-      ellipse({ id: `${id}-ripple`, x: 0, y: 0, width: 30, height: 30, fill: "none", stroke: accent, strokeWidth: 3, opacity: 0, scale: 0, anchor: "center" }),
-      // the pointer art lives in its own group so a click "tap" can scale it
-      // independently of the cursor's resting scale
-      group({ id: `${id}-art`, x: 0, y: 0 }, art)
-    ]
-  );
-}
-var clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
-function cursorTo(id, from, to2, opts = {}) {
-  const dx = to2[0] - from[0], dy = to2[1] - from[1];
-  const dist = Math.hypot(dx, dy) || 1;
-  const arc = opts.arc ?? 0.12;
-  const mid = [(from[0] + to2[0]) / 2 + -dy / dist * arc * dist, (from[1] + to2[1]) / 2 + dx / dist * arc * dist];
-  const duration = opts.duration ?? clamp(dist / 1400, 0.4, 0.9);
-  return motionPath(id, [from, mid, to2], { duration, ease: opts.ease ?? "easeInOutCubic", curviness: 1, ...opts.label && { label: opts.label } });
-}
-function cursorPath(id, points, opts = {}) {
-  return motionPath(id, points, {
-    duration: opts.duration ?? clamp(points.length * 0.5, 0.5, 4),
-    ease: opts.ease ?? "easeInOutCubic",
-    curviness: opts.curviness ?? 1,
-    ...opts.label && { label: opts.label }
-  });
-}
-function clickBody(id, o) {
-  const sp = Math.max(0.25, o.speed ?? 1);
-  const d = (b) => b / sp;
-  const out = [
-    // the pointer taps
-    seq(tween(`${id}-art`, { scale: 0.82 }, { duration: d(0.08), ease: "easeOutQuad" }), tween(`${id}-art`, { scale: 1 }, { duration: d(0.1), ease: "easeOutBack" }))
-  ];
-  if (o.ripple !== false) {
-    out.push(seq(
-      tween(`${id}-ripple`, { scale: 0.2, opacity: 0.55 }, { duration: 1e-3 }),
-      par(
-        tween(`${id}-ripple`, { scale: 5 }, { duration: d(0.5), ease: "easeOutCubic" }),
-        tween(`${id}-ripple`, { opacity: 0 }, { duration: d(0.5), ease: "easeOutQuad" })
+    const matrix = multiply(
+      parent,
+      localMatrix(
+        num2(id, "x", node.props.x),
+        num2(id, "y", node.props.y),
+        num2(id, "rotation", node.props.rotation ?? 0),
+        num2(id, "scale", node.props.scale ?? 1),
+        effScaleX,
+        effScaleY,
+        num2(id, "skewX", node.props.skewX ?? 0),
+        num2(id, "skewY", node.props.skewY ?? 0)
       )
-    ));
+    );
+    const projDraw = (m, hw, hh) => {
+      if (!project) return m;
+      const tilted = rotX !== 0 || rotY !== 0 ? tiltSkew(m, rotX, rotY, hw, hh, dPersp) : m;
+      return projectDepth(tilted, depth, vx, vy, dPersp);
+    };
+    const leafFx = dofFx(fx, depth, project);
+    switch (node.type) {
+      case "group": {
+        const clipTf = projDraw(matrix, 0, 0);
+        const childClips = node.props.clip ? [...clips, { transform: clipTf, shape: node.props.clip }] : clips;
+        const hasFx = fx.blur !== void 0 || fx.shadowColor !== void 0 || fx.blend !== void 0;
+        if (hasFx) ops.push({ type: "group-fx-push", id, transform: matrix, opacity, ...fx, ...clipSpread });
+        if (node.props.matte && node.children.length >= 2) {
+          ops.push({ type: "matte-push", id, transform: matrix, opacity, mode: node.props.matte, ...clipSpread });
+          walk(node.children[0], matrix, opacity, childClips, depth, project);
+          ops.push({ type: "matte-sep", id, transform: matrix, opacity });
+          for (let i = 1; i < node.children.length; i++) walk(node.children[i], matrix, opacity, childClips, depth, project);
+          ops.push({ type: "matte-pop", id, transform: matrix, opacity });
+        } else {
+          const kids = zSort && project ? depthOrder(node.children, depth) : node.children;
+          for (const child of kids) walk(child, matrix, opacity, childClips, depth, project);
+        }
+        if (hasFx) ops.push({ type: "group-fx-pop", id, transform: matrix, opacity });
+        return;
+      }
+      case "rect":
+      case "ellipse": {
+        const width = num2(id, "width", node.props.width);
+        const height = num2(id, "height", node.props.height);
+        const [ax, ay] = ANCHOR_FACTORS[node.props.anchor ?? "top-left"];
+        const strokeWidth = num2(id, "strokeWidth", node.props.strokeWidth ?? 1);
+        const fillP = node.props.fill;
+        const strokeP = node.props.stroke;
+        const fill = isGradient(fillP) ? fillP : opt(id, "fill", fillP);
+        const stroke = isGradient(strokeP) ? strokeP : opt(id, "stroke", strokeP);
+        ops.push({
+          type: node.type,
+          id,
+          transform: projDraw(matrix, width / 2, height / 2),
+          opacity,
+          width,
+          height,
+          offsetX: -width * ax,
+          offsetY: -height * ay,
+          ...fill !== void 0 && { fill },
+          ...stroke !== void 0 && { stroke, strokeWidth },
+          ...node.type === "rect" && { radius: num2(id, "radius", node.props.radius ?? 0) },
+          ...leafFx,
+          ...clipSpread
+        });
+        return;
+      }
+      case "image": {
+        const width = num2(id, "width", node.props.width);
+        const height = num2(id, "height", node.props.height);
+        const [ax, ay] = ANCHOR_FACTORS[node.props.anchor ?? "top-left"];
+        ops.push({
+          type: "image",
+          id,
+          transform: projDraw(matrix, width / 2, height / 2),
+          opacity,
+          src: str(id, "src", node.props.src),
+          width,
+          height,
+          offsetX: -width * ax,
+          offsetY: -height * ay,
+          ...node.props.fit && node.props.fit !== "fill" ? { fit: node.props.fit } : {},
+          ...leafFx,
+          ...clipSpread
+        });
+        return;
+      }
+      case "video": {
+        const width = num2(id, "width", node.props.width);
+        const height = num2(id, "height", node.props.height);
+        const [ax, ay] = ANCHOR_FACTORS[node.props.anchor ?? "top-left"];
+        const fps = compiled.ir.fps ?? 30;
+        const start = node.props.start ?? 0;
+        const rate = node.props.rate ?? 1;
+        const clipStart = node.props.clipStart ?? 0;
+        const srcT = clipStart + Math.max(0, t - start) * rate;
+        const frame = Math.max(0, Math.round(srcT * fps));
+        ops.push({
+          type: "video",
+          id,
+          transform: projDraw(matrix, width / 2, height / 2),
+          opacity,
+          src: str(id, "src", node.props.src),
+          width,
+          height,
+          offsetX: -width * ax,
+          offsetY: -height * ay,
+          frame,
+          ...node.props.fit && node.props.fit !== "fill" ? { fit: node.props.fit } : {},
+          ...leafFx,
+          ...clipSpread
+        });
+        return;
+      }
+      case "path": {
+        const ox = num2(id, "originX", node.props.originX ?? 0);
+        const oy = num2(id, "originY", node.props.originY ?? 0);
+        const fillP = node.props.fill;
+        const strokeP = node.props.stroke;
+        const fill = isGradient(fillP) ? fillP : opt(id, "fill", fillP);
+        const stroke = isGradient(strokeP) ? strokeP : opt(id, "stroke", strokeP);
+        const dStr = str(id, "d", node.props.d);
+        const needsBox = isGradient(fill) || isGradient(stroke);
+        ops.push({
+          type: "path",
+          id,
+          // origin-shift in local space, then project (no per-op extent → cos + VP only)
+          transform: projDraw(ox === 0 && oy === 0 ? matrix : multiply(matrix, [1, 0, 0, 1, -ox, -oy]), 0, 0),
+          opacity,
+          d: dStr,
+          progress: Math.max(0, Math.min(1, num2(id, "progress", node.props.progress ?? 1))),
+          ...fill !== void 0 && { fill },
+          ...stroke !== void 0 && { stroke, strokeWidth: num2(id, "strokeWidth", node.props.strokeWidth ?? 1) },
+          ...needsBox && { bbox: pathBBox(dStr) },
+          ...leafFx,
+          ...clipSpread
+        });
+        return;
+      }
+      case "text": {
+        const [ax, ay] = ANCHOR_FACTORS[node.props.anchor ?? "top-left"];
+        const raw = valueAt(id, "content", node.props.content);
+        const decimals = Math.max(
+          0,
+          Math.round(num2(id, "contentDecimals", node.props.contentDecimals ?? 0))
+        );
+        const body = typeof raw === "number" ? formatNumber(raw, decimals, node.props.contentThousands === true) : raw;
+        ops.push({
+          type: "text",
+          id,
+          transform: projDraw(matrix, 0, 0),
+          opacity,
+          // static affixes wrap the (possibly counting-up) body; absent ⇒ body unchanged
+          content: (node.props.prefix ?? "") + body + (node.props.suffix ?? ""),
+          fontFamily: str(id, "fontFamily", node.props.fontFamily),
+          fontSize: num2(id, "fontSize", node.props.fontSize),
+          fontWeight: num2(id, "fontWeight", node.props.fontWeight ?? 400),
+          fill: str(id, "fill", node.props.fill ?? "#ffffff"),
+          letterSpacing: num2(id, "letterSpacing", node.props.letterSpacing ?? 0),
+          align: TEXT_ALIGN[ax] ?? "left",
+          baseline: TEXT_BASELINE[ay] ?? "top",
+          ...leafFx,
+          ...clipSpread
+        });
+        return;
+      }
+    }
+  };
+  const cameraRoot = compiled.hasCamera ? cameraMatrix(
+    {
+      x: num2("camera", "x", compiled.ir.size.width / 2),
+      y: num2("camera", "y", compiled.ir.size.height / 2),
+      zoom: num2("camera", "zoom", 1),
+      rotation: num2("camera", "rotation", 0)
+    },
+    compiled.ir.size
+  ) : IDENTITY;
+  let roots = compiled.ir.nodes;
+  if (zSort) {
+    const isHud = (n3) => !!(n3.props.fixed && compiled.hasCamera);
+    roots = [...depthOrder(compiled.ir.nodes.filter((n3) => !isHud(n3)), 0), ...compiled.ir.nodes.filter(isHud)];
   }
-  if (o.press) {
-    out.push(seq(tween(o.press, { scale: 0.94 }, { duration: d(0.08), ease: "easeOutQuad" }), tween(o.press, { scale: 1 }, { duration: d(0.14), ease: "easeOutBack" })));
+  for (const node of roots) {
+    const root = compiled.hasCamera && node.props.fixed ? IDENTITY : cameraRoot;
+    const project = persp && !(node.props.fixed && compiled.hasCamera);
+    walk(node, root, 1, [], 0, project);
   }
-  return out;
-}
-function cursorClick(id, opts = {}) {
-  return beat(opts.label ?? "cursor-click", {}, [par(...clickBody(id, opts))]);
+  return ops;
 }
-function cursorDouble(id, opts = {}) {
-  const sp = Math.max(0.25, opts.speed ?? 1);
-  return beat(opts.label ?? "cursor-double", {}, [
-    seq(par(...clickBody(id, { ...opts, ripple: false })), wait(0.12 / sp), par(...clickBody(id, opts)))
-  ]);
+
+// ../core/src/autoFoley.ts
+var V_MIN = 360;
+var V_STOP = 60;
+var V_DECEL = 520;
+var V_MAX = 2600;
+var MIN_DUR = 0.1;
+var num = (c, t, id, prop, fb) => {
+  const v = sampleProp(c, t, id, prop, fb);
+  return typeof v === "number" ? v : fb;
+};
+function nodeSize(node) {
+  const p = node.props;
+  return Math.max(p.width ?? 0, p.height ?? 0, (p.radius ?? 0) * 2, p.fontSize ?? 0, 0);
+}
+var FAMILY = { whoosh: "move", swish: "move", thud: "hit", knock: "hit", pop: "pop" };
+var DEDUP_DT = 0.09;
+function autoFoley(compiled, opts = {}) {
+  const master = opts.gain ?? 0.5;
+  const sens = opts.sensitivity ?? 1;
+  const wantWhoosh = opts.whoosh !== false;
+  const wantImpact = opts.impact !== false;
+  const wantPop = opts.pop !== false;
+  const wantPan = opts.pan !== false;
+  const vMin = V_MIN / sens, vStop = V_STOP, vDecel = V_DECEL / sens;
+  const fps = compiled.ir.fps ?? 30;
+  const N = Math.max(1, Math.ceil(compiled.duration * fps));
+  const W = compiled.ir.size.width || 1920;
+  const ids = opts.nodes ?? [...compiled.nodeById.keys()];
+  const cands = [];
+  const panOf = (x) => wantPan ? Math.max(-1, Math.min(1, x / W * 2 - 1)) : 0;
+  const loud = (v) => Math.max(0.2, Math.min(1, (v - vMin) / (V_MAX - vMin)));
+  for (const id of ids) {
+    const node = compiled.nodeById.get(id);
+    if (!node || node.type === "line") continue;
+    const size = nodeSize(node);
+    const xs = [], ys = [], ss = [], os = [];
+    for (let i2 = 0; i2 <= N; i2++) {
+      const t = i2 / fps;
+      xs.push(num(compiled, t, id, "x", node.props.x ?? 0));
+      ys.push(num(compiled, t, id, "y", node.props.y ?? 0));
+      ss.push(num(compiled, t, id, "scale", node.props.scale ?? 1));
+      os.push(num(compiled, t, id, "opacity", node.props.opacity ?? 1));
+    }
+    const speed = (i2) => i2 <= 0 ? 0 : Math.hypot(xs[i2] - xs[i2 - 1], ys[i2] - ys[i2 - 1]) * fps;
+    const worldX = (frame) => {
+      const m = nodeParentMatrix(compiled, id, frame / fps);
+      return m ? m[0] * xs[frame] + m[2] * ys[frame] + m[4] : xs[frame];
+    };
+    let i = 1;
+    while (i <= N) {
+      if (speed(i) <= vMin) {
+        i++;
+        continue;
+      }
+      const a = i;
+      let peak = i, peakV = speed(i);
+      while (i <= N && speed(i) > vStop) {
+        const s = speed(i);
+        if (s > peakV) {
+          peakV = s;
+          peak = i;
+        }
+        i++;
+      }
+      const b = i - 1;
+      const durS = (b - a + 1) / fps;
+      const visible = os[peak] > 0.1;
+      if (peakV > vMin && durS >= MIN_DUR && visible) {
+        if (wantWhoosh) {
+          const quickFlick = durS < 0.25;
+          cands.push({ t: peak / fps, sfx: quickFlick ? "swish" : "whoosh", gain: master * loud(peakV), pan: panOf(worldX(peak)), rank: peakV });
+        }
+        const stopped = b >= N || speed(b + 1) < vStop && speed(Math.min(N, b + 2)) < vStop;
+        const wxb = worldX(b);
+        const landsOnScreen = wxb >= 0 && wxb <= W && os[b] > 0.1;
+        if (wantImpact && peakV > vDecel && stopped && landsOnScreen && b < N) {
+          cands.push({ t: (b + 1) / fps, sfx: size > 220 ? "thud" : "knock", gain: master * loud(peakV), pan: panOf(worldX(b)), rank: peakV * 1.1 });
+        }
+      }
+    }
+    if (wantPop && ss[0] < 0.25) {
+      for (let k = 1; k <= N; k++) {
+        if (ss[k - 1] < 0.5 && ss[k] >= 0.5 && os[k] > 0.05) {
+          cands.push({ t: k / fps, sfx: "pop", gain: master * 0.7, pan: panOf(worldX(k)), rank: 600 });
+          break;
+        }
+      }
+    }
+  }
+  cands.sort((p, q) => q.rank - p.rank);
+  const kept = [];
+  for (const c of cands) {
+    const fam = FAMILY[c.sfx] ?? c.sfx;
+    if (kept.some((k) => (FAMILY[k.sfx] ?? k.sfx) === fam && Math.abs(k.t - c.t) < DEDUP_DT)) continue;
+    kept.push(c);
+  }
+  const max = opts.maxCues ?? 32;
+  return kept.slice(0, max).map((c) => ({
+    at: Number(c.t.toFixed(3)),
+    sfx: c.sfx,
+    gain: Number(c.gain.toFixed(3)),
+    ...c.pan !== 0 ? { pan: Number(c.pan.toFixed(3)) } : {}
+  }));
 }
 
-// ../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`;
+// ../core/src/effects.ts
+function glow(color, blur = 24) {
+  return { shadowColor: color, shadowBlur: blur, shadowX: 0, shadowY: 0 };
 }
-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 dropShadow(color, blur = 24, x = 0, y = 12) {
+  return { shadowColor: color, shadowBlur: blur, shadowX: x, shadowY: y };
 }
-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)]
-  );
+
+// ../core/src/layout.ts
+function row(count, opts = {}) {
+  if (count <= 0) return [];
+  const center = opts.center ?? 0;
+  if (count === 1) return [center];
+  if (opts.span !== void 0) {
+    const start2 = center - opts.span / 2;
+    const pitch2 = opts.span / (count - 1);
+    return Array.from({ length: count }, (_, i) => start2 + i * pitch2);
+  }
+  const iw = opts.itemWidth ?? 0;
+  const gap = opts.gap ?? 0;
+  const pitch = iw + gap;
+  const total = count * iw + (count - 1) * gap;
+  const start = center - total / 2 + iw / 2;
+  return Array.from({ length: count }, (_, i) => start + i * pitch);
 }
-function rigPose(id, pose) {
-  const out = {};
-  for (const [name, deg] of Object.entries(pose)) out[`${id}-${name}`] = { rotation: deg };
+var column = row;
+function grid(rows, cols, opts = {}) {
+  const axis = (center, gap, item, span) => ({
+    center,
+    ...gap !== void 0 ? { gap } : {},
+    ...item !== void 0 ? { itemWidth: item } : {},
+    ...span !== void 0 ? { span } : {}
+  });
+  const xs = row(cols, axis(opts.center?.x ?? 0, opts.gapX, opts.cellW, opts.spanX));
+  const ys = row(rows, axis(opts.center?.y ?? 0, opts.gapY, opts.cellH, opts.spanY));
+  const out = [];
+  for (let r = 0; r < rows; r++) for (let c = 0; c < cols; c++) out.push({ x: xs[c], y: ys[r] });
   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 glow2 = opts.glow;
-  const blob = (jid, a, b, cy) => {
-    const d = ovalPath(a, b, 0, cy);
-    const nodes = [];
-    if (glow2) nodes.push(path({ id: `${jid}-glow`, d, x: 0, y: 0, fill: "none", stroke: glow2, 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 }
-      ] }
-    ]
+
+// ../core/src/montage.ts
+var VIDEO_EXT = /\.(mp4|mov|webm|m4v|mkv)$/i;
+var isVideoSrc = (src) => VIDEO_EXT.test(src);
+function makeRng(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;
   };
-  return rig(root, opts);
 }
+var norm = (img) => typeof img === "string" ? { src: img } : img;
+function photoMontage(images, opts = {}) {
+  const id = opts.id ?? "shot";
+  const W = opts.size?.width ?? 1920;
+  const H = opts.size?.height ?? 1080;
+  const hold = Math.max(0.5, opts.hold ?? 3.2);
+  const zoom = Math.max(1.001, opts.zoom ?? 1.18);
+  const grade = opts.grade !== false;
+  const rand2 = makeRng((opts.seed ?? 0) + 1);
+  const slides = images.map(norm);
+  const cx = W / 2;
+  const cy = H / 2;
+  const nodes = [];
+  const shots = [];
+  let clock = 0;
+  slides.forEach((slide, i) => {
+    const nid = `${id}-${i}`;
+    const slideHold = Math.max(0.5, slide.hold ?? hold);
+    const transition = Math.min(opts.transition ?? 0.6, slideHold * 0.9);
+    const shotStart = clock;
+    clock += slideHold;
+    const kind = slide.ken ?? ["in", "out", "pan"][Math.floor(rand2() * 3)] ?? "in";
+    const angle = rand2() * Math.PI * 2;
+    const panFrac = 0.4 + rand2() * 0.35;
+    const dx = Math.cos(angle);
+    const dy = Math.sin(angle);
+    let kA, kB;
+    let xA, xB, yA, yB;
+    if (kind === "pan") {
+      kA = kB = zoom;
+      const sx = dx * (zoom - 1) * (W / 2) * panFrac;
+      const sy = dy * (zoom - 1) * (H / 2) * panFrac;
+      xA = cx - sx;
+      xB = cx + sx;
+      yA = cy - sy;
+      yB = cy + sy;
+    } else {
+      kA = kind === "in" ? 1 : zoom;
+      kB = kind === "in" ? zoom : 1;
+      xA = cx + dx * (kA - 1) * (W / 2) * panFrac;
+      xB = cx + dx * (kB - 1) * (W / 2) * panFrac;
+      yA = cy + dy * (kA - 1) * (H / 2) * panFrac;
+      yB = cy + dy * (kB - 1) * (H / 2) * panFrac;
+    }
+    const box = { id: nid, src: slide.src, x: xA, y: yA, width: W, height: H, anchor: "center", fit: "cover", scale: kA, opacity: i === 0 ? 1 : 0 };
+    nodes.push(
+      isVideoSrc(slide.src) ? video({ ...box, start: shotStart, volume: slide.volume ?? 0 }) : image(box)
+    );
+    const ken = tween(
+      nid,
+      { scale: kB, x: xB, y: yB },
+      { duration: slideHold, ease: "easeInOutQuad", label: `shot-${i}` }
+    );
+    const shot = i === 0 ? par(ken) : par(
+      ken,
+      tween(`${id}-${i - 1}`, { opacity: 0 }, { duration: transition, ease: "linear", label: `cross-${i}` }),
+      tween(nid, { opacity: 1 }, { duration: transition, ease: "linear" })
+    );
+    shots.push(shot);
+  });
+  if (grade) {
+    nodes.push(
+      rect({
+        id: `${id}-vignette`,
+        x: 0,
+        y: 0,
+        width: W,
+        height: H,
+        fill: radialGradient(
+          [
+            { offset: 0.55, color: "#FFFFFF" },
+            { offset: 1, color: "#6E6E6E" }
+          ],
+          { cx: 0.5, cy: 0.5, r: 0.72 }
+        ),
+        blend: "multiply"
+      })
+    );
+    nodes.push(
+      rect({
+        id: `${id}-scrim`,
+        x: 0,
+        y: 0,
+        width: W,
+        height: H,
+        fill: linearGradient(
+          [
+            { offset: 0, color: "#00000000" },
+            { offset: 0.62, color: "#00000000" },
+            { offset: 1, color: "#000000B0" }
+          ],
+          { angle: 90 }
+        )
+      })
+    );
+  }
+  return { nodes, timeline: beat("montage", { nodes: nodes.map((n3) => n3.id) }, [seq(...shots)]) };
+}
+var videoMontage = photoMontage;
 
-// ../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 makeRng3(seed) {
+// ../core/src/presets.ts
+var PRESET_NAMES = [
+  "draw-bloom",
+  "punch-in",
+  "rise-settle",
+  "slide-bank",
+  "reveal-orbit",
+  "spin-forge"
+];
+function makeRng2(seed) {
   let a = seed >>> 0 || 2654435769;
   return () => {
     a = a + 1831565813 | 0;
@@ -2028,1567 +2027,1675 @@ function makeRng3(seed) {
     return ((t ^ t >>> 14) >>> 0) / 4294967296;
   };
 }
-var dur2 = (base, sp) => base / sp;
-function ctx2(o) {
-  const rand2 = makeRng3((o.seed ?? 0) + 1);
+var clamp01 = (x) => Math.max(0, Math.min(1, x));
+var SET = 1 / 120;
+function ctx(o) {
+  const rand2 = makeRng2((o.seed ?? 0) + 1);
   return {
-    g: o.target,
-    label: o.label,
-    e: clamp012(o.energy ?? 0.5),
+    e: clamp01(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,
+    it: clamp01(o.intensity ?? 0.5),
+    from: o.from,
     rand: rand2,
-    jit: (amp) => (rand2() - 0.5) * 2 * amp
+    jit: (amp) => (rand2() - 0.5) * 2 * amp,
+    g: o.target.group,
+    cx: o.target.center[0],
+    cy: o.target.center[1],
+    s: o.target.baseScale,
+    fills: o.target.fills,
+    inks: o.target.inks
   };
 }
-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
-  };
+var dur = (base, sp) => base / sp;
+function settleEase(e) {
+  return e < 0.34 ? "easeOutCubic" : e < 0.67 ? "easeOutBack" : "easeOutElastic";
 }
-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" }));
+function fromVec(from, dist) {
+  switch (from) {
+    case "left":
+      return [-dist, 0];
+    case "right":
+      return [dist, 0];
+    case "top":
+      return [0, -dist];
+    default:
+      return [0, dist];
   }
-  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 fadeFills(c, base = 0.4, gap = 0.06) {
+  return stagger(
+    gap / c.sp,
+    ...c.fills.map(
+      (id, i) => tween(id, { opacity: 1 }, { duration: dur(base, c.sp), ease: "easeOutQuad", ...i === 0 && { label: "reveal" } })
     )
-  ]);
-}
-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 drawInks(c) {
+  return stagger(
+    0.15 / c.sp,
+    ...c.inks.map(
+      (id, i) => tween(id, { progress: 1 }, { duration: dur(1.3 + c.jit(0.2), c.sp), ease: "easeInOutQuad", ...i === 0 && { label: "draw" } })
+    )
+  );
 }
-function characterPreset(name, opts) {
-  const c = ctx2(opts);
-  let tl;
+function motionPreset(name, opts) {
+  const c = ctx(opts);
   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}"`);
+    case "draw-bloom":
+      return beat("draw-bloom", {}, [
+        drawInks(c),
+        fadeFills(c, 0.45),
+        tween(c.g, { scale: c.s * (1.02 + 0.05 * c.e) }, { duration: dur(2.4, c.sp), ease: "easeInOutQuad", label: "settle" })
+      ]);
+    case "punch-in": {
+      const peak = c.s * (1 + 0.06 + 0.24 * c.e + c.jit(0.02));
+      return beat("punch-in", {}, [
+        par(
+          fadeFills(c, 0.25),
+          seq(
+            tween(c.g, { scale: peak }, { duration: dur(0.45 + c.jit(0.05), c.sp), ease: "easeOutCubic", label: "punch" }),
+            tween(c.g, { scale: c.s }, { duration: dur(0.5, c.sp), ease: settleEase(c.e) })
+          )
+        )
+      ]);
+    }
+    case "rise-settle": {
+      const es = 0.65 + c.rand() * 0.7;
+      const dist = (220 + 260 * c.it) * es;
+      const [dx, dy] = fromVec(c.from ?? "bottom", dist);
+      const jx = c.jit(110);
+      return beat("rise-settle", {}, [
+        par(
+          motionPath(
+            c.g,
+            [
+              [c.cx + dx + jx, c.cy + dy],
+              [c.cx + dx * 0.4 - jx * 0.6, c.cy + dy * 0.4],
+              [c.cx, c.cy]
+            ],
+            { duration: dur(1.1, c.sp), ease: settleEase(c.e), label: "rise" }
+          ),
+          fadeFills(c, 0.4)
+        )
+      ]);
+    }
+    case "slide-bank": {
+      const es = 0.65 + c.rand() * 0.7;
+      const dist = (420 + 240 * c.it) * es;
+      const [dx, dy] = fromVec(c.from ?? "left", dist);
+      const arc = c.jit(140);
+      const midx = c.jit(120);
+      const move = dur(1.2, c.sp);
+      return beat("slide-bank", {}, [
+        par(
+          motionPath(
+            c.g,
+            [
+              [c.cx + dx, c.cy + dy],
+              [c.cx + dx * 0.4 + midx, c.cy + dy * 0.4 - 70 - arc],
+              [c.cx, c.cy]
+            ],
+            { duration: move, ease: settleEase(c.e), autoRotate: true, label: "slide" }
+          ),
+          // level the bank out once it lands (authored after the path → wins for rotation)
+          seq(wait(move), tween(c.g, { rotation: 0 }, { duration: dur(0.5, c.sp), ease: "easeOutCubic" })),
+          fadeFills(c, 0.4)
+        )
+      ]);
+    }
+    case "reveal-orbit": {
+      const es = 0.65 + c.rand() * 0.7;
+      const orbit = (180 + 160 * c.it) * es;
+      const jx = c.jit(0.4);
+      const jy = c.jit(0.4);
+      return beat("reveal-orbit", {}, [
+        drawInks(c),
+        fadeFills(c, 0.45),
+        par(
+          motionPath(
+            c.g,
+            [
+              [c.cx, c.cy],
+              [c.cx - orbit * (1 + jx), c.cy - orbit * 0.8],
+              [c.cx + orbit * (1 + jy), c.cy - orbit],
+              [c.cx, c.cy]
+            ],
+            { duration: dur(1.7, c.sp), ease: "easeInOutCubic", label: "orbit" }
+          ),
+          seq(
+            tween(c.g, { scale: c.s * (1.12 + 0.1 * c.e) }, { duration: dur(0.85, c.sp), ease: "easeOutBack" }),
+            tween(c.g, { scale: c.s }, { duration: dur(0.85, c.sp), ease: "easeInOutQuad" })
+          )
+        )
+      ]);
+    }
+    case "spin-forge": {
+      const turns = 1 + Math.round(c.it);
+      const dir = c.rand() < 0.5 ? -1 : 1;
+      const startRot = dir * 360 * turns;
+      const peak = c.s * (1 + 0.05 + 0.2 * c.e);
+      return beat("spin-forge", {}, [
+        par(
+          seq(
+            tween(c.g, { scale: c.s * 0.2, rotation: startRot }, { duration: SET }),
+            // establish (invisible)
+            tween(c.g, { scale: peak, rotation: 0 }, { duration: dur(0.9, c.sp), ease: "easeOutBack", label: "spin" }),
+            tween(c.g, { scale: c.s }, { duration: dur(0.3, c.sp), ease: "easeInOutQuad" })
+          ),
+          seq(wait(SET), fadeFills(c, 0.3))
+        )
+      ]);
     }
   }
-  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" }
+// ../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 }
 };
-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 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 };
 }
-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)] : []
-    ]
-  };
+function deviceScreen(name, opts = {}) {
+  const d = screenDims(name, opts);
+  return { x: 0, y: 0, width: d.width, height: d.height, radius: d.radius };
 }
-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 deviceScreenCenter(name, opts = {}) {
+  const d = screenDims(name, opts);
+  return { x: d.cx, y: d.cy };
 }
-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 deviceBounds(name, opts = {}) {
+  const b = BOUNDS[name];
+  return isLandscape(name, opts) ? { width: b.height, height: b.width } : { ...b };
 }
-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);
+function deviceScreenPoint(name, opts, local) {
+  const c = deviceScreenCenter(name, opts);
+  const s = opts.scale ?? 1;
+  return [(opts.x ?? 0) + s * (c.x + local[0]), (opts.y ?? 0) + s * (c.y + local[1])];
 }
-
-// ../core/src/textMetrics.ts
-var INTER_ADVANCE = {
-  "400": {
-    "0": 63.09,
-    "1": 40.67,
-    "2": 60.99,
-    "3": 61.77,
-    "4": 64.6,
-    "5": 59.33,
-    "6": 62.01,
-    "7": 56.59,
-    "8": 61.87,
-    "9": 62.01,
-    " ": 28.13,
-    "!": 28.76,
-    '"': 46.58,
-    "#": 63.33,
-    "$": 64.16,
-    "%": 98.19,
-    "&": 64.4,
-    "'": 29.98,
-    "(": 36.47,
-    ")": 36.47,
-    "*": 50.1,
-    "+": 66.16,
-    ",": 28.81,
-    "-": 46,
-    ".": 28.81,
-    "/": 36.04,
-    ":": 28.81,
-    ";": 30.18,
-    "<": 66.16,
-    "=": 66.16,
-    ">": 66.16,
-    "?": 51.12,
-    "@": 96.58,
-    "A": 68.99,
-    "B": 65.43,
-    "C": 73.05,
-    "D": 72.17,
-    "E": 60.11,
-    "F": 59.03,
-    "G": 74.61,
-    "H": 74.32,
-    "I": 26.86,
-    "J": 57.08,
-    "K": 67.19,
-    "L": 56.54,
-    "M": 90.33,
-    "N": 75.34,
-    "O": 76.46,
-    "P": 63.87,
-    "Q": 76.46,
-    "R": 64.36,
-    "S": 64.16,
-    "T": 64.55,
-    "U": 74.41,
-    "V": 68.99,
-    "W": 98.54,
-    "X": 68.21,
-    "Y": 67.87,
-    "Z": 62.89,
-    "[": 36.47,
-    "\\": 36.04,
-    "]": 36.47,
-    "^": 47.12,
-    "_": 45.61,
-    "`": 32.28,
-    "a": 56.15,
-    "b": 61.23,
-    "c": 57.13,
-    "d": 61.23,
-    "e": 58.3,
-    "f": 37.01,
-    "g": 61.33,
-    "h": 59.13,
-    "i": 24.22,
-    "j": 24.22,
-    "k": 54.88,
-    "l": 24.22,
-    "m": 87.6,
-    "n": 59.08,
-    "o": 59.96,
-    "p": 61.23,
-    "q": 61.23,
-    "r": 37.65,
-    "s": 52.78,
-    "t": 32.71,
-    "u": 59.13,
-    "v": 56.2,
-    "w": 81.84,
-    "x": 54.59,
-    "y": 56.2,
-    "z": 55.22,
-    "{": 42.63,
-    "|": 33.25,
-    "}": 42.63,
-    "~": 66.16
-  },
-  "700": {
-    "0": 67.43,
-    "1": 43.12,
-    "2": 62.94,
-    "3": 64.55,
-    "4": 67.63,
-    "5": 62.21,
-    "6": 64.94,
-    "7": 58.15,
-    "8": 65.09,
-    "9": 64.94,
-    " ": 23.68,
-    "!": 33.79,
-    '"': 55.13,
-    "#": 64.89,
-    "$": 65.48,
-    "%": 101.56,
-    "&": 67.19,
-    "'": 33.89,
-    "(": 37.7,
-    ")": 37.7,
-    "*": 55.91,
-    "+": 67.87,
-    ",": 33.4,
-    "-": 46.78,
-    ".": 33.4,
-    "/": 38.82,
-    ":": 33.4,
-    ";": 34.28,
-    "<": 67.87,
-    "=": 67.87,
-    ">": 67.87,
-    "?": 55.96,
-    "@": 101.61,
-    "A": 74.66,
-    "B": 66.16,
-    "C": 73.97,
-    "D": 72.22,
-    "E": 60.74,
-    "F": 58.69,
-    "G": 75.05,
-    "H": 74.71,
-    "I": 28.08,
-    "J": 58.45,
-    "K": 71.92,
-    "L": 56.54,
-    "M": 93.16,
-    "N": 76.22,
-    "O": 77.05,
-    "P": 64.79,
-    "Q": 77.69,
-    "R": 65.67,
-    "S": 65.48,
-    "T": 66.75,
-    "U": 73.19,
-    "V": 74.66,
-    "W": 103.76,
-    "X": 73.83,
-    "Y": 73.1,
-    "Z": 66.41,
-    "[": 37.7,
-    "\\": 38.82,
-    "]": 37.7,
-    "^": 48.68,
-    "_": 47.61,
-    "`": 36.52,
-    "a": 58.06,
-    "b": 63.04,
-    "c": 58.84,
-    "d": 63.04,
-    "e": 59.57,
-    "f": 39.79,
-    "g": 63.18,
-    "h": 62.26,
-    "i": 27.1,
-    "j": 27.1,
-    "k": 58.01,
-    "l": 27.1,
-    "m": 91.26,
-    "n": 62.26,
-    "o": 61.33,
-    "p": 63.04,
-    "q": 63.04,
-    "r": 40.72,
-    "s": 56.01,
-    "t": 36.62,
-    "u": 62.26,
-    "v": 59.96,
-    "w": 85.01,
-    "x": 58.01,
-    "y": 60.21,
-    "z": 57.28,
-    "{": 46.88,
-    "|": 37.16,
-    "}": 46.88,
-    "~": 67.87
-  },
-  "800": {
-    "0": 69.19,
-    "1": 44.14,
-    "2": 63.77,
-    "3": 65.67,
-    "4": 68.85,
-    "5": 63.38,
-    "6": 66.16,
-    "7": 58.79,
-    "8": 66.41,
-    "9": 66.16,
-    " ": 21.88,
-    "!": 35.84,
-    '"': 58.64,
-    "#": 65.53,
-    "$": 66.02,
-    "%": 102.93,
-    "&": 68.31,
-    "'": 35.45,
-    "(": 38.23,
-    ")": 38.23,
-    "*": 58.25,
-    "+": 68.55,
-    ",": 35.25,
-    "-": 47.12,
-    ".": 35.25,
-    "/": 39.99,
-    ":": 35.25,
-    ";": 35.99,
-    "<": 68.55,
-    "=": 68.55,
-    ">": 68.55,
-    "?": 57.91,
-    "@": 103.61,
-    "A": 76.95,
-    "B": 66.46,
-    "C": 74.37,
-    "D": 72.27,
-    "E": 60.99,
-    "F": 58.54,
-    "G": 75.24,
-    "H": 74.85,
-    "I": 28.56,
-    "J": 58.98,
-    "K": 73.83,
-    "L": 56.54,
-    "M": 94.34,
-    "N": 76.56,
-    "O": 77.29,
-    "P": 65.19,
-    "Q": 78.17,
-    "R": 66.21,
-    "S": 66.02,
-    "T": 67.68,
-    "U": 72.71,
-    "V": 76.95,
-    "W": 105.86,
-    "X": 76.12,
-    "Y": 75.2,
-    "Z": 67.87,
-    "[": 38.23,
-    "\\": 39.99,
-    "]": 38.23,
-    "^": 49.32,
-    "_": 48.44,
-    "`": 38.23,
-    "a": 58.84,
-    "b": 63.77,
-    "c": 59.52,
-    "d": 63.77,
-    "e": 60.06,
-    "f": 40.97,
-    "g": 63.92,
-    "h": 63.53,
-    "i": 28.32,
-    "j": 28.32,
-    "k": 59.28,
-    "l": 28.32,
-    "m": 92.72,
-    "n": 63.53,
-    "o": 61.91,
-    "p": 63.77,
-    "q": 63.77,
-    "r": 41.99,
-    "s": 57.32,
-    "t": 38.18,
-    "u": 63.53,
-    "v": 61.52,
-    "w": 86.28,
-    "x": 59.42,
-    "y": 61.82,
-    "z": 58.11,
-    "{": 48.63,
-    "|": 38.77,
-    "}": 48.63,
-    "~": 68.55
-  }
-};
-var INTER_FALLBACK = {
-  "400": 56.16,
-  "700": 58.74,
-  "800": 59.79
-};
-
-// ../core/src/textFx.ts
-var clamp013 = (v) => Math.max(0, Math.min(1, v));
-var fract = (v) => v - Math.floor(v);
-var rand = (i, salt) => fract(Math.sin(i * 127.1 + salt * 311.7) * 43758.5453);
-var dur3 = (base, sp) => base / sp;
-var SCRAMBLE = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#%&@";
-var advance = (ch, weight, fontSize) => (INTER_ADVANCE[weight]?.[ch] ?? INTER_FALLBACK[weight]) * (fontSize / 100);
-function splitText(textStr, opts) {
-  const { id, x, y, fontSize } = opts;
-  const weight = opts.fontWeight ?? 800;
-  const fill = opts.fill ?? "#FFFFFF";
-  const ls = opts.letterSpacing ?? 0;
-  const align = opts.align ?? "center";
-  const unit = opts.unit ?? "glyph";
-  const opacity = opts.opacity ?? 0;
-  const chars = [...textStr];
-  let total = 0;
-  chars.forEach((ch, i) => {
-    total += advance(ch, weight, fontSize) + (i < chars.length - 1 ? ls : 0);
-  });
-  let cursor2 = align === "center" ? x - total / 2 : x;
-  const glyphs = [];
-  const nodes = [];
-  const mk = (ch, cx, adv, lsProp) => {
-    const g = { id: `${id}-${glyphs.length}`, ch, x: cx, y, advance: adv, i: glyphs.length };
-    glyphs.push(g);
-    nodes.push(
-      text({
-        id: g.id,
-        x: cx,
-        y,
-        content: ch,
-        fontFamily: "Inter",
-        fontSize,
-        fontWeight: weight,
-        fill,
-        anchor: "center",
-        opacity,
-        ...lsProp ? { letterSpacing: lsProp } : {}
-      })
-    );
-  };
-  if (unit === "word") {
-    let i = 0;
-    while (i < chars.length) {
-      if (chars[i] === " ") {
-        cursor2 += advance(" ", weight, fontSize) + ls;
-        i++;
-        continue;
-      }
-      let word = "";
-      let w = 0;
-      const startCursor = cursor2;
-      while (i < chars.length && chars[i] !== " ") {
-        const a = advance(chars[i], weight, fontSize);
-        word += chars[i];
-        w += a + (chars[i + 1] && chars[i + 1] !== " " ? ls : 0);
-        i++;
+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 })
+        );
       }
-      mk(word, startCursor + w / 2, w, ls);
-      cursor2 = startCursor + w + ls;
+      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 })
+      ];
     }
-  } else {
-    chars.forEach((ch) => {
-      const a = advance(ch, weight, fontSize);
-      if (ch !== " ") mk(ch, cursor2 + a / 2, a);
-      cursor2 += a + ls;
-    });
   }
-  return { nodes, glyphs, ids: glyphs.map((g) => g.id), width: total, x, y, fontSize };
 }
-var ctx3 = (o) => ({
-  sp: Math.max(0.25, o.speed ?? 1),
-  e: clamp013(o.energy ?? 0.5),
-  seed: o.seed ?? 0,
-  fs: 0,
-  stag: o.stagger
-});
-var IN_STAGGER = { typewriter: 0.065, cascade: 0.04, rise: 0.03, bounce: 0.045, assemble: 0.05, decode: 0.05 };
-function glyphIn(name, g, c) {
-  const set = (props) => tween(g.id, props, { duration: 1e-3 });
-  const rs = (salt) => rand(g.i, salt + c.seed);
-  switch (name) {
-    case "typewriter":
-      return tween(g.id, { opacity: 1 }, { duration: dur3(0.04, c.sp), ease: "linear" });
-    case "cascade":
-      return seq(
-        set({ y: g.y + 56, opacity: 0 }),
-        par(
-          tween(g.id, { opacity: 1 }, { duration: dur3(0.22, c.sp), ease: "easeOutQuad" }),
-          tween(g.id, { y: g.y }, { duration: dur3(0.34, c.sp), ease: "easeOutCubic" })
-        )
-      );
-    case "rise":
-      return seq(
-        set({ y: g.y + 36, opacity: 0 }),
-        par(
-          tween(g.id, { opacity: 1 }, { duration: dur3(0.3, c.sp), ease: "easeOutQuad" }),
-          tween(g.id, { y: g.y }, { duration: dur3(0.4, c.sp), ease: "easeOutQuad" })
-        )
-      );
-    case "bounce":
-      return seq(
-        set({ y: g.y - 80 * (0.6 + c.e), opacity: 0, scale: 0.7 }),
-        par(
-          tween(g.id, { opacity: 1 }, { duration: dur3(0.2, c.sp), ease: "easeOutQuad" }),
-          tween(g.id, { y: g.y, scale: 1 }, { duration: dur3(0.7, c.sp), ease: "easeOutBounce" })
-        )
-      );
-    case "assemble":
-      return seq(
-        set({ x: g.x + (rs(11) - 0.5) * 1e3 * (0.5 + c.e), y: g.y + (rs(12) - 0.5) * 640, rotation: (rs(13) - 0.5) * 200, scale: 0.4, opacity: 0 }),
-        par(
-          tween(g.id, { opacity: 1 }, { duration: dur3(0.4, c.sp), ease: "easeOutQuad" }),
-          tween(g.id, { x: g.x, y: g.y, rotation: 0, scale: 1 }, { duration: dur3(0.8, c.sp), ease: "easeOutExpo" })
-        )
-      );
-    case "decode": {
-      const steps = 4 + Math.floor(rs(7) * 3);
-      const flicker = [set({ opacity: 1 })];
-      for (let k = 0; k < steps; k++) {
-        flicker.push(tween(g.id, { content: SCRAMBLE[Math.floor(rand(g.i, 20 + k + c.seed) * SCRAMBLE.length)] }, { duration: dur3(0.05, c.sp), ease: "linear" }));
-      }
-      flicker.push(tween(g.id, { content: g.ch }, { duration: dur3(0.05, c.sp), ease: "linear" }));
-      return seq(...flicker);
-    }
+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/cursor.ts
+var ARROW_D = "M0 0 L0 30 L8 23 L12.6 33 L17 31 L12.4 21.4 L21 21.4 Z";
+function cursor(opts = {}) {
+  const id = opts.id ?? "cursor";
+  const style = opts.style ?? "arrow";
+  const fill = opts.fill ?? "#FFFFFF";
+  const accent = opts.accent ?? "#FF5A1F";
+  const art = style === "arrow" ? [path({ id: `${id}-arrow`, d: ARROW_D, x: 0, y: 0, fill, stroke: "#15171E", strokeWidth: 2 })] : style === "dot" ? [ellipse({ id: `${id}-dot`, x: 0, y: 0, width: 18, height: 18, fill: accent, anchor: "center" })] : [ellipse({ id: `${id}-ring`, x: 0, y: 0, width: 22, height: 22, fill: "none", stroke: accent, strokeWidth: 3, anchor: "center" })];
+  return group(
+    { id, x: opts.x ?? 0, y: opts.y ?? 0, scale: opts.scale ?? 1, opacity: opts.opacity ?? 1 },
+    [
+      // ripple ring (behind the pointer), emanates from the hotspot on click
+      ellipse({ id: `${id}-ripple`, x: 0, y: 0, width: 30, height: 30, fill: "none", stroke: accent, strokeWidth: 3, opacity: 0, scale: 0, anchor: "center" }),
+      // the pointer art lives in its own group so a click "tap" can scale it
+      // independently of the cursor's resting scale
+      group({ id: `${id}-art`, x: 0, y: 0 }, art)
+    ]
+  );
+}
+var clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
+function cursorTo(id, from, to2, opts = {}) {
+  const dx = to2[0] - from[0], dy = to2[1] - from[1];
+  const dist = Math.hypot(dx, dy) || 1;
+  const arc = opts.arc ?? 0.12;
+  const mid = [(from[0] + to2[0]) / 2 + -dy / dist * arc * dist, (from[1] + to2[1]) / 2 + dx / dist * arc * dist];
+  const duration = opts.duration ?? clamp(dist / 1400, 0.4, 0.9);
+  return motionPath(id, [from, mid, to2], { duration, ease: opts.ease ?? "easeInOutCubic", curviness: 1, ...opts.label && { label: opts.label } });
+}
+function cursorPath(id, points, opts = {}) {
+  return motionPath(id, points, {
+    duration: opts.duration ?? clamp(points.length * 0.5, 0.5, 4),
+    ease: opts.ease ?? "easeInOutCubic",
+    curviness: opts.curviness ?? 1,
+    ...opts.label && { label: opts.label }
+  });
+}
+function clickBody(id, o) {
+  const sp = Math.max(0.25, o.speed ?? 1);
+  const d = (b) => b / sp;
+  const out = [
+    // the pointer taps
+    seq(tween(`${id}-art`, { scale: 0.82 }, { duration: d(0.08), ease: "easeOutQuad" }), tween(`${id}-art`, { scale: 1 }, { duration: d(0.1), ease: "easeOutBack" }))
+  ];
+  if (o.ripple !== false) {
+    out.push(seq(
+      tween(`${id}-ripple`, { scale: 0.2, opacity: 0.55 }, { duration: 1e-3 }),
+      par(
+        tween(`${id}-ripple`, { scale: 5 }, { duration: d(0.5), ease: "easeOutCubic" }),
+        tween(`${id}-ripple`, { opacity: 0 }, { duration: d(0.5), ease: "easeOutQuad" })
+      )
+    ));
+  }
+  if (o.press) {
+    out.push(seq(tween(o.press, { scale: 0.94 }, { duration: d(0.08), ease: "easeOutQuad" }), tween(o.press, { scale: 1 }, { duration: d(0.14), ease: "easeOutBack" })));
   }
+  return out;
+}
+function cursorClick(id, opts = {}) {
+  return beat(opts.label ?? "cursor-click", {}, [par(...clickBody(id, opts))]);
+}
+function cursorDouble(id, opts = {}) {
+  const sp = Math.max(0.25, opts.speed ?? 1);
+  return beat(opts.label ?? "cursor-double", {}, [
+    seq(par(...clickBody(id, { ...opts, ripple: false })), wait(0.12 / sp), par(...clickBody(id, opts)))
+  ]);
+}
+
+// ../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 glow2 = opts.glow;
+  const blob = (jid, a, b, cy) => {
+    const d = ovalPath(a, b, 0, cy);
+    const nodes = [];
+    if (glow2) nodes.push(path({ id: `${jid}-glow`, d, x: 0, y: 0, fill: "none", stroke: glow2, 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);
 }
-function textIn(name, block, opts = {}) {
-  const c = { ...ctx3(opts), fs: block.fontSize };
-  const interval = (c.stag ?? IN_STAGGER[name]) / c.sp;
-  return beat(opts.label ?? `text-in-${name}`, {}, [stagger(interval, ...block.glyphs.map((g) => glyphIn(name, g, c)))]);
+
+// ../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 makeRng3(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;
+  };
 }
-function textLoop(name, block, opts = {}) {
-  const win = { ...opts.from !== void 0 && { from: opts.from }, ...opts.until !== void 0 && { until: opts.until }, ...opts.ramp !== void 0 && { ramp: opts.ramp } };
-  const f = opts.frequency ?? (name === "wave" ? 0.9 : name === "shimmer" ? 1.4 : 0.7);
-  const ps = opts.phaseStep ?? 0.55;
-  return block.glyphs.map((g, i) => {
-    switch (name) {
-      case "wave":
-        return oscillate(g.id, "y", { amplitude: opts.amplitude ?? 9, frequency: f, phase: i * ps }, win);
-      case "shimmer":
-        return oscillate(g.id, "opacity", { amplitude: opts.amplitude ?? 0.25, frequency: f, phase: i * ps }, win);
-      case "wobble":
-        return oscillate(g.id, "rotation", { amplitude: opts.amplitude ?? 6, frequency: f, phase: i * ps }, win);
-      case "float":
-        return oscillate(g.id, "y", { amplitude: opts.amplitude ?? 5, frequency: f, phase: i * ps }, win);
-    }
-  });
+var dur2 = (base, sp) => base / sp;
+function ctx2(o) {
+  const rand2 = makeRng3((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: rand2,
+    jit: (amp) => (rand2() - 0.5) * 2 * amp
+  };
 }
-var OUT_STAGGER = { shatter: 0.02, fly: 0.012, dissolve: 0, fall: 0.02, collapse: 0.02 };
-function glyphOut(name, g, c, block, dir) {
-  const rs = (salt) => rand(g.i, salt + c.seed);
-  switch (name) {
-    case "shatter":
-      return par(
-        tween(g.id, { x: g.x + (rs(21) - 0.5) * 1100 * (0.6 + c.e), y: g.y + (rs(22) - 0.5) * 760 }, { duration: dur3(0.7, c.sp), ease: "easeInCubic" }),
-        tween(g.id, { rotation: (rs(23) - 0.5) * 300, opacity: 0 }, { duration: dur3(0.7, c.sp), ease: "easeInQuad" })
-      );
-    case "fly":
-      return par(
-        tween(g.id, { x: g.x + dir[0] * 1200, y: g.y + dir[1] * 1200 }, { duration: dur3(0.6, c.sp), ease: "easeInCubic" }),
-        tween(g.id, { opacity: 0 }, { duration: dur3(0.5, c.sp), ease: "easeInQuad" })
-      );
-    case "dissolve":
-      return seq(wait(rs(31) * 0.5), par(
-        tween(g.id, { opacity: 0 }, { duration: dur3(0.4, c.sp), ease: "easeInQuad" }),
-        tween(g.id, { scale: 1.4 }, { duration: dur3(0.4, c.sp), ease: "easeOutQuad" })
-      ));
-    case "fall":
-      return par(
-        tween(g.id, { y: g.y + 700 + rs(41) * 200 }, { duration: dur3(0.8, c.sp), ease: "easeInQuad" }),
-        tween(g.id, { rotation: (rs(42) - 0.5) * 120, opacity: 0 }, { duration: dur3(0.8, c.sp), ease: "easeInQuad" })
-      );
-    case "collapse":
-      return par(
-        tween(g.id, { x: block.x, y: block.y, scale: 0.2 }, { duration: dur3(0.5, c.sp), ease: "easeInBack" }),
-        tween(g.id, { opacity: 0 }, { duration: dur3(0.5, c.sp), ease: "easeInQuad" })
-      );
+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 textOut(name, block, opts = {}) {
-  const c = { ...ctx3(opts), fs: block.fontSize };
-  const dir = opts.dir ?? [0, -1];
-  const steps = block.glyphs.map((g) => glyphOut(name, g, c, block, dir));
-  const interval = (c.stag ?? OUT_STAGGER[name]) / c.sp;
-  const body = interval > 0 ? stagger(interval, ...steps) : par(...steps);
-  return beat(opts.label ?? `text-out-${name}`, {}, [body]);
-}
-function textTypeCues(block, opts) {
-  const interval = opts.interval ?? 0.065;
-  const gain = opts.gain ?? 0.4;
-  const off = opts.offset ?? 0;
-  const KEYS = ["001", "004", "007", "010", "014"];
-  return block.glyphs.map((g, i) => ({
-    at: opts.at,
-    offset: off + i * interval,
-    file: `keypress-${KEYS[i % KEYS.length]}.wav`,
-    gain: gain + 0.2 * rand(i, 31)
-  }));
-}
-
-// ../core/src/motionOps.ts
-var MOTION_OPS = ["rotate", "zoom", "ken-burns", "slide-in", "fade", "draw-on", "pulse"];
-var clamp014 = (n3) => Math.max(0, Math.min(1, n3));
-function settleEase2(e) {
-  return e < 0.34 ? "easeOutCubic" : e < 0.67 ? "easeOutBack" : "easeOutElastic";
+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 fromVec2(from, dist) {
-  switch (from) {
-    case "right":
-      return [dist, 0];
-    case "top":
-      return [0, -dist];
-    case "bottom":
-      return [0, dist];
-    default:
-      return [-dist, 0];
+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)]);
 }
-var motionOpLabel = (name, target) => `op-${name}-${target}`;
-function motionOp(name, target, opts = {}) {
-  const e = clamp014(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)]) };
-    }
+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)]);
 }
-
-// ../core/src/audio.ts
-var SFX_DURATION = {
-  // transition
-  whoosh: 0.35,
-  swish: 0.32,
-  swoosh: 0.35,
-  rise: 0.5,
-  riser: 0.85,
-  warp: 0.5,
-  // ui
-  tick: 0.03,
-  click: 0.05,
-  blip: 0.1,
-  pop: 0.12,
-  select: 0.18,
-  // impact
-  thud: 0.25,
-  boom: 0.6,
-  knock: 0.14,
-  sub: 0.7,
-  // positive
-  chime: 0.7,
-  ding: 0.5,
-  coin: 0.3,
-  sparkle: 0.6,
-  shimmer: 0.9,
-  success: 0.6,
-  // alert
-  zap: 0.22,
-  error: 0.4,
-  // tech
-  glitch: 0.3,
-  static: 0.18,
-  scan: 0.45,
-  powerup: 0.4,
-  powerdown: 0.5,
-  // rhythm / foley
-  snare: 0.18,
-  hat: 0.05,
-  bubble: 0.16,
-  notify: 0.45,
-  camera: 0.18
-};
-var FILE_CUE_DURATION = 0.4;
-function collectClipAudio(ir, duration, warnings) {
-  const out = [];
-  const walk = (nodes) => {
-    for (const node of nodes) {
-      if (node.type === "video") {
-        const gain = node.props.volume ?? 1;
-        const start = node.props.start ?? 0;
-        if (gain <= 0) continue;
-        if (start >= duration) {
-          warnings.push(`video "${node.id}": start ${start.toFixed(2)}s past the scene end \u2014 audio dropped`);
-          continue;
-        }
-        out.push({ nodeId: node.id, src: node.props.src, start, rate: node.props.rate ?? 1, clipStart: node.props.clipStart ?? 0, gain, fadeIn: node.props.fadeIn ?? 0, pan: node.props.pan ?? 0 });
-      }
-      if (node.type === "group") walk(node.children);
-    }
-  };
-  walk(ir.nodes);
-  return out;
+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 resolveAudioPlan(compiled) {
-  const audio = compiled.ir.audio;
-  const warnings = [];
-  const duration = compiled.duration;
-  const clipAudio = collectClipAudio(compiled.ir, duration, warnings);
-  if (!audio || !audio.bgm && (audio.cues ?? []).length === 0) {
-    return clipAudio.length === 0 ? null : { duration, bgm: null, cues: [], duckWindows: [], clipAudio, warnings };
+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 })));
   }
-  const cues = [];
-  for (const [index, cue] of (audio.cues ?? []).entries()) {
-    let anchor;
-    if (typeof cue.at === "number") {
-      anchor = cue.at;
-    } else {
-      const span = compiled.labelTimes.get(cue.at);
-      if (!span) {
-        warnings.push(`cue[${index}]: unknown label "${cue.at}" \u2014 cue dropped`);
-        continue;
-      }
-      anchor = span.t0;
-    }
-    const t = Math.max(0, anchor + (cue.offset ?? 0));
-    const cueDuration = cue.sfx ? SFX_DURATION[cue.sfx] : FILE_CUE_DURATION;
-    if (t >= duration) {
-      warnings.push(`cue[${index}] at ${t.toFixed(2)}s starts past the scene end (${duration.toFixed(2)}s) \u2014 dropped`);
-      continue;
-    }
-    if (t + cueDuration > duration) {
-      warnings.push(`cue[${index}] at ${t.toFixed(2)}s extends past the scene end \u2014 it will be truncated`);
+  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}"`);
     }
-    cues.push({
-      t,
-      gain: cue.gain ?? 1,
-      duration: cueDuration,
-      fadeIn: cue.fadeIn ?? 0,
-      fadeOut: cue.fadeOut ?? 0,
-      pan: cue.pan ?? 0,
-      source: cue.sfx ? (
-        // auto-vary: default the seed to the cue's order so repeated sfx differ
-        // (pitch/texture); an explicit params.seed always wins.
-        { kind: "sfx", name: cue.sfx, params: { seed: index, ...cue.params } }
-      ) : { kind: "file", path: cue.file }
-    });
   }
-  cues.sort((a, b) => a.t - b.t);
-  return {
-    duration,
-    bgm: resolveBgm(audio.bgm),
-    cues,
-    duckWindows: mergeDuckWindows(cues, duration),
-    clipAudio,
-    warnings
-  };
+  return c.label && tl.kind === "beat" ? { ...tl, name: c.label } : tl;
 }
-function mergeDuckWindows(cues, duration) {
-  const duckWindows = [];
-  for (const cue of cues) {
-    const window = { t0: cue.t, t1: Math.min(duration, cue.t + cue.duration) };
-    const last = duckWindows[duckWindows.length - 1];
-    if (last && window.t0 <= last.t1 + 0.1) last.t1 = Math.max(last.t1, window.t1);
-    else duckWindows.push(window);
-  }
-  return duckWindows;
+
+// ../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 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
+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 {
-    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
+    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)] : []
+    ]
   };
 }
-function resolveCompositionAudioPlan(comp) {
-  const audio = comp.ir.audio;
-  const duration = comp.duration;
-  const warnings = [];
-  const cues = [];
-  const clipAudio = [];
-  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 clip of plan.clipAudio) {
-      const start = clip.start + placement.start;
-      if (start >= duration) continue;
-      clipAudio.push({ ...clip, start });
-    }
-  }
-  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,
-      fadeIn: cue.fadeIn ?? 0,
-      fadeOut: cue.fadeOut ?? 0,
-      pan: cue.pan ?? 0,
-      source: cue.sfx ? (
-        // auto-vary: default the seed to the cue's order so repeated sfx differ
-        // (pitch/texture); an explicit params.seed always wins.
-        { kind: "sfx", name: cue.sfx, params: { seed: index, ...cue.params } }
-      ) : { kind: "file", path: cue.file }
-    });
-  }
-  if (!audio?.bgm && cues.length === 0 && clipAudio.length === 0) return null;
-  cues.sort((a, b) => a.t - b.t);
+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 {
-    duration,
-    bgm: resolveBgm(audio?.bgm),
-    cues,
-    duckWindows: mergeDuckWindows(cues, duration),
-    clipAudio,
-    warnings
+    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 })
+      ] : []
+    ]
   };
 }
-
-// ../core/src/behaviors.ts
-function sampleBehavior(b, t) {
-  switch (b.name) {
-    case "oscillate": {
-      const { amplitude, frequency, phase = 0 } = b.params;
-      return amplitude * Math.sin(2 * Math.PI * frequency * t + phase);
-    }
-    case "wiggle": {
-      const { amplitude, frequency, seed } = b.params;
-      return amplitude * valueNoise(t * frequency, seed);
-    }
-  }
-}
-function valueNoise(x, seed) {
-  const i = Math.floor(x);
-  const f = x - i;
-  const u = f * f * (3 - 2 * f);
-  const a = hash01(i, seed) * 2 - 1;
-  const b = hash01(i + 1, seed) * 2 - 1;
-  return a + (b - a) * u;
+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 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;
-  return h / 4294967295;
+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/evaluate.ts
-var IDENTITY = [1, 0, 0, 1, 0, 0];
-function multiply(m, n3) {
-  return [
-    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]
-  ];
-}
-var DEG = Math.PI / 180;
-var z0 = (x) => x === 0 ? 0 : x;
-function projectDepth(m, z, vx, vy, d) {
-  if (z === 0) return m;
-  const p = d + z > 0 ? d / (d + z) : 1e-6;
-  return [
-    z0(m[0] * p),
-    z0(m[1] * p),
-    z0(m[2] * p),
-    z0(m[3] * p),
-    z0(vx + (m[4] - vx) * p),
-    z0(vy + (m[5] - vy) * p)
-  ];
-}
-function tiltSkew(m, rotXdeg, rotYdeg, hw, hh, d) {
-  const ky = Math.sin(rotYdeg * DEG) * hw / d;
-  const kx = Math.sin(rotXdeg * DEG) * hh / d;
-  if (ky === 0 && kx === 0) return m;
-  return multiply(m, [1, kx, ky, 1, 0, 0]);
-}
-function localMatrix(x, y, rotationDeg, scale, scaleX = 1, scaleY = 1, skewXDeg = 0, skewYDeg = 0) {
-  const r = rotationDeg * Math.PI / 180;
-  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],
-  "top-center": [0.5, 0],
-  "top-right": [1, 0],
-  "center-left": [0, 0.5],
-  center: [0.5, 0.5],
-  "center-right": [1, 0.5],
-  "bottom-left": [0, 1],
-  "bottom-center": [0.5, 1],
-  "bottom-right": [1, 1]
+// ../core/src/textMetrics.ts
+var INTER_ADVANCE = {
+  "400": {
+    "0": 63.09,
+    "1": 40.67,
+    "2": 60.99,
+    "3": 61.77,
+    "4": 64.6,
+    "5": 59.33,
+    "6": 62.01,
+    "7": 56.59,
+    "8": 61.87,
+    "9": 62.01,
+    " ": 28.13,
+    "!": 28.76,
+    '"': 46.58,
+    "#": 63.33,
+    "$": 64.16,
+    "%": 98.19,
+    "&": 64.4,
+    "'": 29.98,
+    "(": 36.47,
+    ")": 36.47,
+    "*": 50.1,
+    "+": 66.16,
+    ",": 28.81,
+    "-": 46,
+    ".": 28.81,
+    "/": 36.04,
+    ":": 28.81,
+    ";": 30.18,
+    "<": 66.16,
+    "=": 66.16,
+    ">": 66.16,
+    "?": 51.12,
+    "@": 96.58,
+    "A": 68.99,
+    "B": 65.43,
+    "C": 73.05,
+    "D": 72.17,
+    "E": 60.11,
+    "F": 59.03,
+    "G": 74.61,
+    "H": 74.32,
+    "I": 26.86,
+    "J": 57.08,
+    "K": 67.19,
+    "L": 56.54,
+    "M": 90.33,
+    "N": 75.34,
+    "O": 76.46,
+    "P": 63.87,
+    "Q": 76.46,
+    "R": 64.36,
+    "S": 64.16,
+    "T": 64.55,
+    "U": 74.41,
+    "V": 68.99,
+    "W": 98.54,
+    "X": 68.21,
+    "Y": 67.87,
+    "Z": 62.89,
+    "[": 36.47,
+    "\\": 36.04,
+    "]": 36.47,
+    "^": 47.12,
+    "_": 45.61,
+    "`": 32.28,
+    "a": 56.15,
+    "b": 61.23,
+    "c": 57.13,
+    "d": 61.23,
+    "e": 58.3,
+    "f": 37.01,
+    "g": 61.33,
+    "h": 59.13,
+    "i": 24.22,
+    "j": 24.22,
+    "k": 54.88,
+    "l": 24.22,
+    "m": 87.6,
+    "n": 59.08,
+    "o": 59.96,
+    "p": 61.23,
+    "q": 61.23,
+    "r": 37.65,
+    "s": 52.78,
+    "t": 32.71,
+    "u": 59.13,
+    "v": 56.2,
+    "w": 81.84,
+    "x": 54.59,
+    "y": 56.2,
+    "z": 55.22,
+    "{": 42.63,
+    "|": 33.25,
+    "}": 42.63,
+    "~": 66.16
+  },
+  "700": {
+    "0": 67.43,
+    "1": 43.12,
+    "2": 62.94,
+    "3": 64.55,
+    "4": 67.63,
+    "5": 62.21,
+    "6": 64.94,
+    "7": 58.15,
+    "8": 65.09,
+    "9": 64.94,
+    " ": 23.68,
+    "!": 33.79,
+    '"': 55.13,
+    "#": 64.89,
+    "$": 65.48,
+    "%": 101.56,
+    "&": 67.19,
+    "'": 33.89,
+    "(": 37.7,
+    ")": 37.7,
+    "*": 55.91,
+    "+": 67.87,
+    ",": 33.4,
+    "-": 46.78,
+    ".": 33.4,
+    "/": 38.82,
+    ":": 33.4,
+    ";": 34.28,
+    "<": 67.87,
+    "=": 67.87,
+    ">": 67.87,
+    "?": 55.96,
+    "@": 101.61,
+    "A": 74.66,
+    "B": 66.16,
+    "C": 73.97,
+    "D": 72.22,
+    "E": 60.74,
+    "F": 58.69,
+    "G": 75.05,
+    "H": 74.71,
+    "I": 28.08,
+    "J": 58.45,
+    "K": 71.92,
+    "L": 56.54,
+    "M": 93.16,
+    "N": 76.22,
+    "O": 77.05,
+    "P": 64.79,
+    "Q": 77.69,
+    "R": 65.67,
+    "S": 65.48,
+    "T": 66.75,
+    "U": 73.19,
+    "V": 74.66,
+    "W": 103.76,
+    "X": 73.83,
+    "Y": 73.1,
+    "Z": 66.41,
+    "[": 37.7,
+    "\\": 38.82,
+    "]": 37.7,
+    "^": 48.68,
+    "_": 47.61,
+    "`": 36.52,
+    "a": 58.06,
+    "b": 63.04,
+    "c": 58.84,
+    "d": 63.04,
+    "e": 59.57,
+    "f": 39.79,
+    "g": 63.18,
+    "h": 62.26,
+    "i": 27.1,
+    "j": 27.1,
+    "k": 58.01,
+    "l": 27.1,
+    "m": 91.26,
+    "n": 62.26,
+    "o": 61.33,
+    "p": 63.04,
+    "q": 63.04,
+    "r": 40.72,
+    "s": 56.01,
+    "t": 36.62,
+    "u": 62.26,
+    "v": 59.96,
+    "w": 85.01,
+    "x": 58.01,
+    "y": 60.21,
+    "z": 57.28,
+    "{": 46.88,
+    "|": 37.16,
+    "}": 46.88,
+    "~": 67.87
+  },
+  "800": {
+    "0": 69.19,
+    "1": 44.14,
+    "2": 63.77,
+    "3": 65.67,
+    "4": 68.85,
+    "5": 63.38,
+    "6": 66.16,
+    "7": 58.79,
+    "8": 66.41,
+    "9": 66.16,
+    " ": 21.88,
+    "!": 35.84,
+    '"': 58.64,
+    "#": 65.53,
+    "$": 66.02,
+    "%": 102.93,
+    "&": 68.31,
+    "'": 35.45,
+    "(": 38.23,
+    ")": 38.23,
+    "*": 58.25,
+    "+": 68.55,
+    ",": 35.25,
+    "-": 47.12,
+    ".": 35.25,
+    "/": 39.99,
+    ":": 35.25,
+    ";": 35.99,
+    "<": 68.55,
+    "=": 68.55,
+    ">": 68.55,
+    "?": 57.91,
+    "@": 103.61,
+    "A": 76.95,
+    "B": 66.46,
+    "C": 74.37,
+    "D": 72.27,
+    "E": 60.99,
+    "F": 58.54,
+    "G": 75.24,
+    "H": 74.85,
+    "I": 28.56,
+    "J": 58.98,
+    "K": 73.83,
+    "L": 56.54,
+    "M": 94.34,
+    "N": 76.56,
+    "O": 77.29,
+    "P": 65.19,
+    "Q": 78.17,
+    "R": 66.21,
+    "S": 66.02,
+    "T": 67.68,
+    "U": 72.71,
+    "V": 76.95,
+    "W": 105.86,
+    "X": 76.12,
+    "Y": 75.2,
+    "Z": 67.87,
+    "[": 38.23,
+    "\\": 39.99,
+    "]": 38.23,
+    "^": 49.32,
+    "_": 48.44,
+    "`": 38.23,
+    "a": 58.84,
+    "b": 63.77,
+    "c": 59.52,
+    "d": 63.77,
+    "e": 60.06,
+    "f": 40.97,
+    "g": 63.92,
+    "h": 63.53,
+    "i": 28.32,
+    "j": 28.32,
+    "k": 59.28,
+    "l": 28.32,
+    "m": 92.72,
+    "n": 63.53,
+    "o": 61.91,
+    "p": 63.77,
+    "q": 63.77,
+    "r": 41.99,
+    "s": 57.32,
+    "t": 38.18,
+    "u": 63.53,
+    "v": 61.52,
+    "w": 86.28,
+    "x": 59.42,
+    "y": 61.82,
+    "z": 58.11,
+    "{": 48.63,
+    "|": 38.77,
+    "}": 48.63,
+    "~": 68.55
+  }
 };
-var TEXT_ALIGN = { 0: "left", 0.5: "center", 1: "right" };
-var TEXT_BASELINE = { 0: "top", 0.5: "middle", 1: "bottom" };
-function formatNumber(value, decimals, thousands) {
-  const fixed = value.toFixed(decimals);
-  if (!thousands) return fixed;
-  const neg = fixed.startsWith("-");
-  const body = neg ? fixed.slice(1) : fixed;
-  const dot = body.indexOf(".");
-  const intPart = dot === -1 ? body : body.slice(0, dot);
-  const frac = dot === -1 ? "" : body.slice(dot);
-  const grouped = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
-  return (neg ? "-" : "") + grouped + frac;
-}
-function behaviorEnvelope(b, t) {
-  const from = b.from ?? Number.NEGATIVE_INFINITY;
-  const until = b.until ?? Number.POSITIVE_INFINITY;
-  if (t < from || t > until) return 0;
-  const ramp = b.ramp ?? 0.2;
-  let envelope = 1;
-  if (Number.isFinite(from) && ramp > 0) envelope = Math.min(envelope, (t - from) / ramp);
-  if (Number.isFinite(until) && ramp > 0) envelope = Math.min(envelope, (until - t) / ramp);
-  return Math.max(0, Math.min(1, envelope));
-}
-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);
+var INTER_FALLBACK = {
+  "400": 56.16,
+  "700": 58.74,
+  "800": 59.79
+};
+
+// ../core/src/textFx.ts
+var clamp013 = (v) => Math.max(0, Math.min(1, v));
+var fract = (v) => v - Math.floor(v);
+var rand = (i, salt) => fract(Math.sin(i * 127.1 + salt * 311.7) * 43758.5453);
+var dur3 = (base, sp) => base / sp;
+var SCRAMBLE = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#%&@";
+var advance = (ch, weight, fontSize) => (INTER_ADVANCE[weight]?.[ch] ?? INTER_FALLBACK[weight]) * (fontSize / 100);
+function splitText(textStr, opts) {
+  const { id, x, y, fontSize } = opts;
+  const weight = opts.fontWeight ?? 800;
+  const fill = opts.fill ?? "#FFFFFF";
+  const ls = opts.letterSpacing ?? 0;
+  const align = opts.align ?? "center";
+  const unit = opts.unit ?? "glyph";
+  const opacity = opts.opacity ?? 0;
+  const chars = [...textStr];
+  let total = 0;
+  chars.forEach((ch, i) => {
+    total += advance(ch, weight, fontSize) + (i < chars.length - 1 ? ls : 0);
+  });
+  let cursor2 = align === "center" ? x - total / 2 : x;
+  const glyphs = [];
+  const nodes = [];
+  const mk = (ch, cx, adv, lsProp) => {
+    const g = { id: `${id}-${glyphs.length}`, ch, x: cx, y, advance: adv, i: glyphs.length };
+    glyphs.push(g);
+    nodes.push(
+      text({
+        id: g.id,
+        x: cx,
+        y,
+        content: ch,
+        fontFamily: "Inter",
+        fontSize,
+        fontWeight: weight,
+        fill,
+        anchor: "center",
+        opacity,
+        ...lsProp ? { letterSpacing: lsProp } : {}
+      })
+    );
+  };
+  if (unit === "word") {
+    let i = 0;
+    while (i < chars.length) {
+      if (chars[i] === " ") {
+        cursor2 += advance(" ", weight, fontSize) + ls;
+        i++;
+        continue;
       }
+      let word = "";
+      let w = 0;
+      const startCursor = cursor2;
+      while (i < chars.length && chars[i] !== " ") {
+        const a = advance(chars[i], weight, fontSize);
+        word += chars[i];
+        w += a + (chars[i + 1] && chars[i + 1] !== " " ? ls : 0);
+        i++;
+      }
+      mk(word, startCursor + w / 2, w, ls);
+      cursor2 = startCursor + w + ls;
     }
+  } else {
+    chars.forEach((ch) => {
+      const a = advance(ch, weight, fontSize);
+      if (ch !== " ") mk(ch, cursor2 + a / 2, a);
+      cursor2 += a + ls;
+    });
   }
-  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, 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;
+  return { nodes, glyphs, ids: glyphs.map((g) => g.id), width: total, x, y, fontSize };
+}
+var ctx3 = (o) => ({
+  sp: Math.max(0.25, o.speed ?? 1),
+  e: clamp013(o.energy ?? 0.5),
+  seed: o.seed ?? 0,
+  fs: 0,
+  stag: o.stagger
+});
+var IN_STAGGER = { typewriter: 0.065, cascade: 0.04, rise: 0.03, bounce: 0.045, assemble: 0.05, decode: 0.05 };
+function glyphIn(name, g, c) {
+  const set = (props) => tween(g.id, props, { duration: 1e-3 });
+  const rs = (salt) => rand(g.i, salt + c.seed);
+  switch (name) {
+    case "typewriter":
+      return tween(g.id, { opacity: 1 }, { duration: dur3(0.04, c.sp), ease: "linear" });
+    case "cascade":
+      return seq(
+        set({ y: g.y + 56, opacity: 0 }),
+        par(
+          tween(g.id, { opacity: 1 }, { duration: dur3(0.22, c.sp), ease: "easeOutQuad" }),
+          tween(g.id, { y: g.y }, { duration: dur3(0.34, c.sp), ease: "easeOutCubic" })
+        )
+      );
+    case "rise":
+      return seq(
+        set({ y: g.y + 36, opacity: 0 }),
+        par(
+          tween(g.id, { opacity: 1 }, { duration: dur3(0.3, c.sp), ease: "easeOutQuad" }),
+          tween(g.id, { y: g.y }, { duration: dur3(0.4, c.sp), ease: "easeOutQuad" })
+        )
+      );
+    case "bounce":
+      return seq(
+        set({ y: g.y - 80 * (0.6 + c.e), opacity: 0, scale: 0.7 }),
+        par(
+          tween(g.id, { opacity: 1 }, { duration: dur3(0.2, c.sp), ease: "easeOutQuad" }),
+          tween(g.id, { y: g.y, scale: 1 }, { duration: dur3(0.7, c.sp), ease: "easeOutBounce" })
+        )
+      );
+    case "assemble":
+      return seq(
+        set({ x: g.x + (rs(11) - 0.5) * 1e3 * (0.5 + c.e), y: g.y + (rs(12) - 0.5) * 640, rotation: (rs(13) - 0.5) * 200, scale: 0.4, opacity: 0 }),
+        par(
+          tween(g.id, { opacity: 1 }, { duration: dur3(0.4, c.sp), ease: "easeOutQuad" }),
+          tween(g.id, { x: g.x, y: g.y, rotation: 0, scale: 1 }, { duration: dur3(0.8, c.sp), ease: "easeOutExpo" })
+        )
+      );
+    case "decode": {
+      const steps = 4 + Math.floor(rs(7) * 3);
+      const flicker = [set({ opacity: 1 })];
+      for (let k = 0; k < steps; k++) {
+        flicker.push(tween(g.id, { content: SCRAMBLE[Math.floor(rand(g.i, 20 + k + c.seed) * SCRAMBLE.length)] }, { duration: dur3(0.05, c.sp), ease: "linear" }));
       }
+      flicker.push(tween(g.id, { content: g.ch }, { duration: dur3(0.05, c.sp), ease: "linear" }));
+      return seq(...flicker);
     }
   }
-  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);
+}
+function textIn(name, block, opts = {}) {
+  const c = { ...ctx3(opts), fs: block.fontSize };
+  const interval = (c.stag ?? IN_STAGGER[name]) / c.sp;
+  return beat(opts.label ?? `text-in-${name}`, {}, [stagger(interval, ...block.glyphs.map((g) => glyphIn(name, g, c)))]);
+}
+function textLoop(name, block, opts = {}) {
+  const win = { ...opts.from !== void 0 && { from: opts.from }, ...opts.until !== void 0 && { until: opts.until }, ...opts.ramp !== void 0 && { ramp: opts.ramp } };
+  const f = opts.frequency ?? (name === "wave" ? 0.9 : name === "shimmer" ? 1.4 : 0.7);
+  const ps = opts.phaseStep ?? 0.55;
+  return block.glyphs.map((g, i) => {
+    switch (name) {
+      case "wave":
+        return oscillate(g.id, "y", { amplitude: opts.amplitude ?? 9, frequency: f, phase: i * ps }, win);
+      case "shimmer":
+        return oscillate(g.id, "opacity", { amplitude: opts.amplitude ?? 0.25, frequency: f, phase: i * ps }, win);
+      case "wobble":
+        return oscillate(g.id, "rotation", { amplitude: opts.amplitude ?? 6, frequency: f, phase: i * ps }, win);
+      case "float":
+        return oscillate(g.id, "y", { amplitude: opts.amplitude ?? 5, frequency: f, phase: i * ps }, win);
     }
+  });
+}
+var OUT_STAGGER = { shatter: 0.02, fly: 0.012, dissolve: 0, fall: 0.02, collapse: 0.02 };
+function glyphOut(name, g, c, block, dir) {
+  const rs = (salt) => rand(g.i, salt + c.seed);
+  switch (name) {
+    case "shatter":
+      return par(
+        tween(g.id, { x: g.x + (rs(21) - 0.5) * 1100 * (0.6 + c.e), y: g.y + (rs(22) - 0.5) * 760 }, { duration: dur3(0.7, c.sp), ease: "easeInCubic" }),
+        tween(g.id, { rotation: (rs(23) - 0.5) * 300, opacity: 0 }, { duration: dur3(0.7, c.sp), ease: "easeInQuad" })
+      );
+    case "fly":
+      return par(
+        tween(g.id, { x: g.x + dir[0] * 1200, y: g.y + dir[1] * 1200 }, { duration: dur3(0.6, c.sp), ease: "easeInCubic" }),
+        tween(g.id, { opacity: 0 }, { duration: dur3(0.5, c.sp), ease: "easeInQuad" })
+      );
+    case "dissolve":
+      return seq(wait(rs(31) * 0.5), par(
+        tween(g.id, { opacity: 0 }, { duration: dur3(0.4, c.sp), ease: "easeInQuad" }),
+        tween(g.id, { scale: 1.4 }, { duration: dur3(0.4, c.sp), ease: "easeOutQuad" })
+      ));
+    case "fall":
+      return par(
+        tween(g.id, { y: g.y + 700 + rs(41) * 200 }, { duration: dur3(0.8, c.sp), ease: "easeInQuad" }),
+        tween(g.id, { rotation: (rs(42) - 0.5) * 120, opacity: 0 }, { duration: dur3(0.8, c.sp), ease: "easeInQuad" })
+      );
+    case "collapse":
+      return par(
+        tween(g.id, { x: block.x, y: block.y, scale: 0.2 }, { duration: dur3(0.5, c.sp), ease: "easeInBack" }),
+        tween(g.id, { opacity: 0 }, { duration: dur3(0.5, c.sp), ease: "easeInQuad" })
+      );
   }
-  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 false;
-  };
-  for (const node of compiled.ir.nodes) if (walk(node, IDENTITY)) break;
-  return result;
+function textOut(name, block, opts = {}) {
+  const c = { ...ctx3(opts), fs: block.fontSize };
+  const dir = opts.dir ?? [0, -1];
+  const steps = block.glyphs.map((g) => glyphOut(name, g, c, block, dir));
+  const interval = (c.stag ?? OUT_STAGGER[name]) / c.sp;
+  const body = interval > 0 ? stagger(interval, ...steps) : par(...steps);
+  return beat(opts.label ?? `text-out-${name}`, {}, [body]);
+}
+function textTypeCues(block, opts) {
+  const interval = opts.interval ?? 0.065;
+  const gain = opts.gain ?? 0.4;
+  const off = opts.offset ?? 0;
+  const KEYS = ["001", "004", "007", "010", "014"];
+  return block.glyphs.map((g, i) => ({
+    at: opts.at,
+    offset: off + i * interval,
+    file: `keypress-${KEYS[i % KEYS.length]}.wav`,
+    gain: gain + 0.2 * rand(i, 31)
+  }));
+}
+
+// ../core/src/motionOps.ts
+var MOTION_OPS = ["rotate", "zoom", "ken-burns", "slide-in", "fade", "draw-on", "pulse"];
+var clamp014 = (n3) => Math.max(0, Math.min(1, n3));
+function settleEase2(e) {
+  return e < 0.34 ? "easeOutCubic" : e < 0.67 ? "easeOutBack" : "easeOutElastic";
 }
-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;
-  };
-  const str = (target, prop, fallback) => {
-    const v = valueAt(target, prop, fallback);
-    return typeof v === "string" ? v : String(v);
-  };
-  const opt = (target, prop, base) => {
-    const v = valueAt(target, prop, base ?? "");
-    return v === "" && base === void 0 ? void 0 : String(v);
-  };
-  const effectFx = (id, p) => {
-    const fx = {};
-    if (p.blur !== void 0) fx.blur = num(id, "blur", p.blur);
-    if (p.shadowColor !== void 0) {
-      fx.shadowColor = str(id, "shadowColor", p.shadowColor);
-      fx.shadowBlur = num(id, "shadowBlur", p.shadowBlur ?? 0);
-      fx.shadowX = num(id, "shadowX", p.shadowX ?? 0);
-      fx.shadowY = num(id, "shadowY", p.shadowY ?? 0);
-    }
-    if (p.blend !== void 0 && p.blend !== "normal") fx.blend = p.blend;
-    return fx;
-  };
-  const persp = compiled.hasPerspective;
-  const dPersp = persp ? num("camera", "perspective", 0) : 0;
-  const vx = persp ? compiled.ir.size.width / 2 : 0;
-  const vy = persp ? compiled.ir.size.height / 2 : 0;
-  const aperture = persp ? num("camera", "aperture", 0) : 0;
-  const focus = persp ? num("camera", "focus", 0) : 0;
-  const dofFx = (fx, depth, project) => {
-    if (!project || aperture <= 0) return fx;
-    const extra = aperture * Math.abs(depth - focus);
-    if (extra <= 0) return fx;
-    return { ...fx, blur: z0((fx.blur ?? 0) + extra) };
-  };
-  const zSort = compiled.zSort;
-  const depthOf = (node, zAcc) => zAcc + num(node.id, "z", node.props.z ?? 0);
-  const depthOrder = (children, zAcc) => [...children].sort((a, b) => depthOf(b, zAcc) - depthOf(a, zAcc));
-  const walk = (node, parent, parentOpacity, clips, zAcc, project) => {
-    const id = node.id;
-    const clipSpread = clips.length > 0 ? { clips } : void 0;
-    const fx = effectFx(id, node.props);
-    if (node.type === "line") {
-      const opacity2 = parentOpacity * num(id, "opacity", node.props.opacity ?? 1);
-      if (opacity2 <= 0) return;
-      const progress = Math.max(0, Math.min(1, num(id, "progress", node.props.progress ?? 1)));
-      const x1 = num(id, "x1", node.props.x1);
-      const y1 = num(id, "y1", node.props.y1);
-      ops.push({
-        type: "line",
-        id,
-        // a line carries no z/rotate of its own — it just inherits the subtree's depth
-        transform: project ? projectDepth(parent, zAcc, vx, vy, dPersp) : parent,
-        opacity: opacity2,
-        x1,
-        y1,
-        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),
-        // a line carries no z of its own — DOF uses the inherited subtree depth
-        ...dofFx(fx, zAcc, project),
-        ...clipSpread
-      });
-      return;
+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 = clamp014(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" })
+          )
+        ])
+      };
     }
-    const opacity = parentOpacity * num(id, "opacity", node.props.opacity ?? 1);
-    if (opacity <= 0) return;
-    let effScaleX = num(id, "scaleX", node.props.scaleX ?? 1);
-    let effScaleY = num(id, "scaleY", node.props.scaleY ?? 1);
-    let depth = zAcc;
-    let rotX = 0;
-    let rotY = 0;
-    if (project) {
-      rotX = num(id, "rotateX", node.props.rotateX ?? 0);
-      rotY = num(id, "rotateY", node.props.rotateY ?? 0);
-      depth = zAcc + num(id, "z", node.props.z ?? 0);
-      if (rotY !== 0) effScaleX *= Math.abs(Math.cos(rotY * DEG));
-      if (rotX !== 0) effScaleY *= Math.abs(Math.cos(rotX * DEG));
+    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" })
+          )
+        ])
+      };
     }
-    const matrix = multiply(
-      parent,
-      localMatrix(
-        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),
-        effScaleX,
-        effScaleY,
-        num(id, "skewX", node.props.skewX ?? 0),
-        num(id, "skewY", node.props.skewY ?? 0)
-      )
-    );
-    const projDraw = (m, hw, hh) => {
-      if (!project) return m;
-      const tilted = rotX !== 0 || rotY !== 0 ? tiltSkew(m, rotX, rotY, hw, hh, dPersp) : m;
-      return projectDepth(tilted, depth, vx, vy, dPersp);
-    };
-    const leafFx = dofFx(fx, depth, project);
-    switch (node.type) {
-      case "group": {
-        const clipTf = projDraw(matrix, 0, 0);
-        const childClips = node.props.clip ? [...clips, { transform: clipTf, shape: node.props.clip }] : clips;
-        const hasFx = fx.blur !== void 0 || fx.shadowColor !== void 0 || fx.blend !== void 0;
-        if (hasFx) ops.push({ type: "group-fx-push", id, transform: matrix, opacity, ...fx, ...clipSpread });
-        if (node.props.matte && node.children.length >= 2) {
-          ops.push({ type: "matte-push", id, transform: matrix, opacity, mode: node.props.matte, ...clipSpread });
-          walk(node.children[0], matrix, opacity, childClips, depth, project);
-          ops.push({ type: "matte-sep", id, transform: matrix, opacity });
-          for (let i = 1; i < node.children.length; i++) walk(node.children[i], matrix, opacity, childClips, depth, project);
-          ops.push({ type: "matte-pop", id, transform: matrix, opacity });
-        } else {
-          const kids = zSort && project ? depthOrder(node.children, depth) : node.children;
-          for (const child of kids) walk(child, matrix, opacity, childClips, depth, project);
-        }
-        if (hasFx) ops.push({ type: "group-fx-pop", id, transform: matrix, opacity });
-        return;
-      }
-      case "rect":
-      case "ellipse": {
-        const width = num(id, "width", node.props.width);
-        const height = num(id, "height", node.props.height);
-        const [ax, ay] = ANCHOR_FACTORS[node.props.anchor ?? "top-left"];
-        const strokeWidth = num(id, "strokeWidth", node.props.strokeWidth ?? 1);
-        const fillP = node.props.fill;
-        const strokeP = node.props.stroke;
-        const fill = isGradient(fillP) ? fillP : opt(id, "fill", fillP);
-        const stroke = isGradient(strokeP) ? strokeP : opt(id, "stroke", strokeP);
-        ops.push({
-          type: node.type,
-          id,
-          transform: projDraw(matrix, width / 2, height / 2),
-          opacity,
-          width,
-          height,
-          offsetX: -width * ax,
-          offsetY: -height * ay,
-          ...fill !== void 0 && { fill },
-          ...stroke !== void 0 && { stroke, strokeWidth },
-          ...node.type === "rect" && { radius: num(id, "radius", node.props.radius ?? 0) },
-          ...leafFx,
-          ...clipSpread
-        });
-        return;
-      }
-      case "image": {
-        const width = num(id, "width", node.props.width);
-        const height = num(id, "height", node.props.height);
-        const [ax, ay] = ANCHOR_FACTORS[node.props.anchor ?? "top-left"];
-        ops.push({
-          type: "image",
-          id,
-          transform: projDraw(matrix, width / 2, height / 2),
-          opacity,
-          src: str(id, "src", node.props.src),
-          width,
-          height,
-          offsetX: -width * ax,
-          offsetY: -height * ay,
-          ...node.props.fit && node.props.fit !== "fill" ? { fit: node.props.fit } : {},
-          ...leafFx,
-          ...clipSpread
-        });
-        return;
-      }
-      case "video": {
-        const width = num(id, "width", node.props.width);
-        const height = num(id, "height", node.props.height);
-        const [ax, ay] = ANCHOR_FACTORS[node.props.anchor ?? "top-left"];
-        const fps = compiled.ir.fps ?? 30;
-        const start = node.props.start ?? 0;
-        const rate = node.props.rate ?? 1;
-        const clipStart = node.props.clipStart ?? 0;
-        const srcT = clipStart + Math.max(0, t - start) * rate;
-        const frame = Math.max(0, Math.round(srcT * fps));
-        ops.push({
-          type: "video",
-          id,
-          transform: projDraw(matrix, width / 2, height / 2),
-          opacity,
-          src: str(id, "src", node.props.src),
-          width,
-          height,
-          offsetX: -width * ax,
-          offsetY: -height * ay,
-          frame,
-          ...node.props.fit && node.props.fit !== "fill" ? { fit: node.props.fit } : {},
-          ...leafFx,
-          ...clipSpread
-        });
-        return;
+    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" }));
       }
-      case "path": {
-        const ox = num(id, "originX", node.props.originX ?? 0);
-        const oy = num(id, "originY", node.props.originY ?? 0);
-        const fillP = node.props.fill;
-        const strokeP = node.props.stroke;
-        const fill = isGradient(fillP) ? fillP : opt(id, "fill", fillP);
-        const stroke = isGradient(strokeP) ? strokeP : opt(id, "stroke", strokeP);
-        const dStr = str(id, "d", node.props.d);
-        const needsBox = isGradient(fill) || isGradient(stroke);
-        ops.push({
-          type: "path",
-          id,
-          // origin-shift in local space, then project (no per-op extent → cos + VP only)
-          transform: projDraw(ox === 0 && oy === 0 ? matrix : multiply(matrix, [1, 0, 0, 1, -ox, -oy]), 0, 0),
-          opacity,
-          d: dStr,
-          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) },
-          ...needsBox && { bbox: pathBBox(dStr) },
-          ...leafFx,
-          ...clipSpread
-        });
-        return;
+      return { timeline: beat(label, {}, [seq(...steps)]) };
+    }
+  }
+}
+
+// ../core/src/audio.ts
+var SFX_DURATION = {
+  // transition
+  whoosh: 0.35,
+  swish: 0.32,
+  swoosh: 0.35,
+  rise: 0.5,
+  riser: 0.85,
+  warp: 0.5,
+  // ui
+  tick: 0.03,
+  click: 0.05,
+  blip: 0.1,
+  pop: 0.12,
+  select: 0.18,
+  // impact
+  thud: 0.25,
+  boom: 0.6,
+  knock: 0.14,
+  sub: 0.7,
+  // positive
+  chime: 0.7,
+  ding: 0.5,
+  coin: 0.3,
+  sparkle: 0.6,
+  shimmer: 0.9,
+  success: 0.6,
+  // alert
+  zap: 0.22,
+  error: 0.4,
+  // tech
+  glitch: 0.3,
+  static: 0.18,
+  scan: 0.45,
+  powerup: 0.4,
+  powerdown: 0.5,
+  // rhythm / foley
+  snare: 0.18,
+  hat: 0.05,
+  bubble: 0.16,
+  notify: 0.45,
+  camera: 0.18
+};
+var FILE_CUE_DURATION = 0.4;
+function collectClipAudio(ir, duration, warnings) {
+  const out = [];
+  const walk = (nodes) => {
+    for (const node of nodes) {
+      if (node.type === "video") {
+        const gain = node.props.volume ?? 1;
+        const start = node.props.start ?? 0;
+        if (gain <= 0) continue;
+        if (start >= duration) {
+          warnings.push(`video "${node.id}": start ${start.toFixed(2)}s past the scene end \u2014 audio dropped`);
+          continue;
+        }
+        out.push({ nodeId: node.id, src: node.props.src, start, rate: node.props.rate ?? 1, clipStart: node.props.clipStart ?? 0, gain, fadeIn: node.props.fadeIn ?? 0, pan: node.props.pan ?? 0 });
       }
-      case "text": {
-        const [ax, ay] = ANCHOR_FACTORS[node.props.anchor ?? "top-left"];
-        const raw = valueAt(id, "content", node.props.content);
-        const decimals = Math.max(
-          0,
-          Math.round(num(id, "contentDecimals", node.props.contentDecimals ?? 0))
-        );
-        const body = typeof raw === "number" ? formatNumber(raw, decimals, node.props.contentThousands === true) : raw;
-        ops.push({
-          type: "text",
-          id,
-          transform: projDraw(matrix, 0, 0),
-          opacity,
-          // static affixes wrap the (possibly counting-up) body; absent ⇒ body unchanged
-          content: (node.props.prefix ?? "") + body + (node.props.suffix ?? ""),
-          fontFamily: str(id, "fontFamily", node.props.fontFamily),
-          fontSize: num(id, "fontSize", node.props.fontSize),
-          fontWeight: num(id, "fontWeight", node.props.fontWeight ?? 400),
-          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",
-          ...leafFx,
-          ...clipSpread
-        });
-        return;
+      if (node.type === "group") walk(node.children);
+    }
+  };
+  walk(ir.nodes);
+  return out;
+}
+function resolveAudioPlan(compiled) {
+  const audio = compiled.ir.audio;
+  const warnings = [];
+  const duration = compiled.duration;
+  const clipAudio = collectClipAudio(compiled.ir, duration, warnings);
+  const autoCues = audio?.autoFoley ? autoFoley(compiled, audio.autoFoley === true ? {} : audio.autoFoley) : [];
+  const manualCues = [...audio?.cues ?? [], ...autoCues];
+  if (!audio || !audio.bgm && manualCues.length === 0) {
+    return clipAudio.length === 0 ? null : { duration, bgm: null, cues: [], duckWindows: [], clipAudio, warnings };
+  }
+  const cues = [];
+  for (const [index, cue] of manualCues.entries()) {
+    let anchor;
+    if (typeof cue.at === "number") {
+      anchor = cue.at;
+    } else {
+      const span = compiled.labelTimes.get(cue.at);
+      if (!span) {
+        warnings.push(`cue[${index}]: unknown label "${cue.at}" \u2014 cue dropped`);
+        continue;
       }
+      anchor = span.t0;
     }
+    const t = Math.max(0, anchor + (cue.offset ?? 0));
+    const cueDuration = cue.sfx ? SFX_DURATION[cue.sfx] : FILE_CUE_DURATION;
+    if (t >= duration) {
+      warnings.push(`cue[${index}] at ${t.toFixed(2)}s starts past the scene end (${duration.toFixed(2)}s) \u2014 dropped`);
+      continue;
+    }
+    if (t + cueDuration > duration) {
+      warnings.push(`cue[${index}] at ${t.toFixed(2)}s extends past the scene end \u2014 it will be truncated`);
+    }
+    cues.push({
+      t,
+      gain: cue.gain ?? 1,
+      duration: cueDuration,
+      fadeIn: cue.fadeIn ?? 0,
+      fadeOut: cue.fadeOut ?? 0,
+      pan: cue.pan ?? 0,
+      source: cue.sfx ? (
+        // auto-vary: default the seed to the cue's order so repeated sfx differ
+        // (pitch/texture); an explicit params.seed always wins.
+        { kind: "sfx", name: cue.sfx, params: { seed: index, ...cue.params } }
+      ) : { kind: "file", path: cue.file }
+    });
+  }
+  cues.sort((a, b) => a.t - b.t);
+  return {
+    duration,
+    bgm: resolveBgm(audio.bgm),
+    cues,
+    duckWindows: mergeDuckWindows(cues, duration),
+    clipAudio,
+    warnings
   };
-  const cameraRoot = compiled.hasCamera ? cameraMatrix(
-    {
-      x: num("camera", "x", compiled.ir.size.width / 2),
-      y: num("camera", "y", compiled.ir.size.height / 2),
-      zoom: num("camera", "zoom", 1),
-      rotation: num("camera", "rotation", 0)
-    },
-    compiled.ir.size
-  ) : IDENTITY;
-  let roots = compiled.ir.nodes;
-  if (zSort) {
-    const isHud = (n3) => !!(n3.props.fixed && compiled.hasCamera);
-    roots = [...depthOrder(compiled.ir.nodes.filter((n3) => !isHud(n3)), 0), ...compiled.ir.nodes.filter(isHud)];
+}
+function mergeDuckWindows(cues, duration) {
+  const duckWindows = [];
+  for (const cue of cues) {
+    const window = { t0: cue.t, t1: Math.min(duration, cue.t + cue.duration) };
+    const last = duckWindows[duckWindows.length - 1];
+    if (last && window.t0 <= last.t1 + 0.1) last.t1 = Math.max(last.t1, window.t1);
+    else duckWindows.push(window);
   }
-  for (const node of roots) {
-    const root = compiled.hasCamera && node.props.fixed ? IDENTITY : cameraRoot;
-    const project = persp && !(node.props.fixed && compiled.hasCamera);
-    walk(node, root, 1, [], 0, project);
+  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 = [];
+  const clipAudio = [];
+  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 clip of plan.clipAudio) {
+      const start = clip.start + placement.start;
+      if (start >= duration) continue;
+      clipAudio.push({ ...clip, start });
+    }
   }
-  return ops;
+  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,
+      fadeIn: cue.fadeIn ?? 0,
+      fadeOut: cue.fadeOut ?? 0,
+      pan: cue.pan ?? 0,
+      source: cue.sfx ? (
+        // auto-vary: default the seed to the cue's order so repeated sfx differ
+        // (pitch/texture); an explicit params.seed always wins.
+        { kind: "sfx", name: cue.sfx, params: { seed: index, ...cue.params } }
+      ) : { kind: "file", path: cue.file }
+    });
+  }
+  if (!audio?.bgm && cues.length === 0 && clipAudio.length === 0) return null;
+  cues.sort((a, b) => a.t - b.t);
+  return {
+    duration,
+    bgm: resolveBgm(audio?.bgm),
+    cues,
+    duckWindows: mergeDuckWindows(cues, duration),
+    clipAudio,
+    warnings
+  };
 }
 
 // ../core/src/assets.ts
@@ -3692,6 +3799,7 @@ export {
   SFX_DURATION,
   SFX_NAMES,
   SceneValidationError,
+  autoFoley,
   beat,
   cameraFit,
   cameraMatrix,