reframe-video 0.6.34 → 0.6.39

package/dist/index.js

@@ -255,11 +255,68 @@ function compileScene(ir) {
         const grouping = { kind: tl.parallel ? "par" : "seq", children: tl.children };
         const natural = durationOf(grouping, 0);
         const k = tl.scale ?? (tl.duration !== void 0 ? tl.duration / Math.max(1e-9, natural) : 1);
-        const beatStart = tl.at ?? start + (tl.gap ?? 0);
+        const at = typeof tl.at === "number" ? tl.at : void 0;
+        const beatStart = at ?? start + (tl.gap ?? 0);
         return beatStart + k * natural;
       }
     }
   };
+  let labelClock;
+  const anyAnchor = (tl) => tl.kind === "beat" && typeof tl.at === "string" || "children" in tl && tl.children.some(anyAnchor);
+  if (ir.timeline && anyAnchor(ir.timeline)) {
+    const clock = /* @__PURE__ */ new Map();
+    const clockWalk = (tl, start) => {
+      let end = start;
+      switch (tl.kind) {
+        case "seq": {
+          let t = start;
+          for (const c of orderBeats(tl.children)) t = clockWalk(c, t);
+          end = t;
+          break;
+        }
+        case "par": {
+          for (const c of tl.children) end = Math.max(end, clockWalk(c, start));
+          break;
+        }
+        case "stagger": {
+          tl.children.forEach((c, i) => {
+            end = Math.max(end, clockWalk(c, start + i * tl.interval));
+          });
+          break;
+        }
+        case "wait":
+          end = start + tl.duration;
+          break;
+        case "tween":
+          end = start + (tl.duration ?? DEFAULT_TWEEN_DURATION);
+          break;
+        case "motionPath":
+          end = start + (tl.duration ?? DEFAULT_MOTIONPATH_DURATION);
+          break;
+        case "to": {
+          const override = ir.states?.[tl.state] ?? {};
+          const si = tl.stagger ?? 0;
+          const targets = nodeOrder.filter((id) => id in override && (tl.filter === void 0 || tl.filter.includes(id)));
+          end = start + (tl.duration ?? DEFAULT_TO_DURATION) + Math.max(0, targets.length - 1) * si;
+          break;
+        }
+        case "beat": {
+          const grouping = { kind: tl.parallel ? "par" : "seq", children: tl.children };
+          const k = tl.scale ?? (tl.duration !== void 0 ? tl.duration / Math.max(1e-9, durationOf(grouping, 0)) : 1);
+          const inner = k === 1 ? grouping : scaleTimeline(grouping, k);
+          const at = typeof tl.at === "number" ? tl.at : void 0;
+          const beatStart = at ?? start + (tl.gap ?? 0);
+          end = clockWalk(inner, beatStart);
+          clock.set(tl.name, { t0: beatStart, t1: end });
+          break;
+        }
+      }
+      if ("label" in tl && tl.label !== void 0) clock.set(tl.label, { t0: start, t1: end });
+      return end;
+    };
+    clockWalk(ir.timeline, 0);
+    labelClock = clock;
+  }
   const walk = (tl, start) => {
     const end = walkInner(tl, start);
     if ("label" in tl && tl.label !== void 0) labelTimes.set(tl.label, { t0: start, t1: end });
@@ -276,7 +333,8 @@ function compileScene(ir) {
         const grouping = { kind: tl.parallel ? "par" : "seq", children: tl.children };
         const k = tl.scale ?? (tl.duration !== void 0 ? tl.duration / Math.max(1e-9, durationOf(grouping, 0)) : 1);
         const inner = k === 1 ? grouping : scaleTimeline(grouping, k);
-        const beatStart = tl.at ?? start + (tl.gap ?? 0);
+        const anchored = typeof tl.at === "string" ? labelClock?.get(tl.at)?.t0 : tl.at;
+        const beatStart = anchored !== void 0 ? anchored + (typeof tl.at === "string" ? tl.gap ?? 0 : 0) : start + (tl.gap ?? 0);
         const end = walk(inner, beatStart);
         beatTimes.set(tl.name, { t0: beatStart, t1: end });
         labelTimes.set(tl.name, { t0: beatStart, t1: end });
@@ -596,6 +654,7 @@ ${problems.map((p) => `  - ${p}`).join("\n")}`);
 function validateScene(ir) {
   const problems = [];
   const nodeById = /* @__PURE__ */ new Map();
+  const startAnchors = [];
   const checkPaint = (where, value) => {
     if (typeof value !== "object" || value === null) return;
     const g = value;
@@ -628,6 +687,7 @@ function validateScene(ir) {
       if (typeof props.shadowBlur === "number" && props.shadowBlur < 0) problems.push(`node "${node.id}": shadowBlur must be >= 0`);
       if (typeof props.blend === "string" && !BLEND_MODES.has(props.blend)) problems.push(`node "${node.id}": unknown blend "${props.blend}" \u2014 use ${[...BLEND_MODES].join(", ")}`);
       if (typeof props.fit === "string" && !IMAGE_FITS.has(props.fit)) problems.push(`node "${node.id}": unknown fit "${props.fit}" \u2014 use ${[...IMAGE_FITS].join(", ")}`);
+      if (node.type === "video" && typeof node.props.start === "string") startAnchors.push({ id: node.id, at: node.props.start });
       if (node.type === "group") {
         const clip = node.props.clip;
         if (clip) {
@@ -688,6 +748,7 @@ function validateScene(ir) {
     );
   }
   const labels = /* @__PURE__ */ new Set();
+  const beatAnchors = [];
   const checkEase = (path2, ease) => {
     if (ease === void 0) return;
     if (typeof ease === "string") {
@@ -779,6 +840,7 @@ function validateScene(ir) {
           );
         }
         labels.add(tl.name);
+        if (typeof tl.at === "string") beatAnchors.push({ name: tl.name, at: tl.at, path: path2 });
         if (tl.duration !== void 0 && tl.duration <= 0) {
           problems.push(`${path2}: beat "${tl.name}" duration must be > 0`);
         }
@@ -797,6 +859,22 @@ function validateScene(ir) {
     }
   };
   if (ir.timeline) checkTimeline(ir.timeline, "timeline");
+  for (const a of beatAnchors) {
+    if (a.at === a.name) {
+      problems.push(`${a.path}: beat "${a.name}" at: "${a.at}" cannot anchor to itself`);
+    } else if (!labels.has(a.at)) {
+      problems.push(
+        `${a.path}: beat "${a.name}" at: "${a.at}" \u2014 unknown timeline label \u2014 known labels: ${[...labels].join(", ") || "(none)"}`
+      );
+    }
+  }
+  for (const a of startAnchors) {
+    if (!labels.has(a.at)) {
+      problems.push(
+        `video "${a.id}" start: "${a.at}" \u2014 unknown timeline label \u2014 known labels: ${[...labels].join(", ") || "(none)"}`
+      );
+    }
+  }
   for (const [i, b] of (ir.behaviors ?? []).entries()) {
     checkProps(`behaviors[${i}]`, b.target, { [b.prop]: 0 });
   }
@@ -1000,6 +1078,13 @@ function compileComposition(comp) {
 
 // ../core/src/compose.ts
 var SCENE_PATCHABLE = ["background", "duration", "fps"];
+var TIMELINE_PATCHABLE = {
+  to: ["duration", "ease", "stagger"],
+  tween: ["duration", "ease"],
+  wait: ["duration"],
+  motionPath: ["points", "duration", "ease", "curviness", "autoRotate"],
+  beat: ["at", "gap", "scale", "duration", "order"]
+};
 function composeScene(base, ...overlays) {
   const ir = structuredClone(base);
   const report = { applied: [], orphans: [], warnings: [] };
@@ -1134,13 +1219,6 @@ function applyOverlay(ir, overlay, layer, report, baseNodeIds) {
       if ("children" in tl) tl.children.forEach(walkTimeline);
     };
     if (ir.timeline) walkTimeline(ir.timeline);
-    const PATCHABLE = {
-      to: ["duration", "ease", "stagger"],
-      tween: ["duration", "ease"],
-      wait: ["duration"],
-      motionPath: ["points", "duration", "ease", "curviness", "autoRotate"],
-      beat: ["at", "gap", "scale", "duration", "order"]
-    };
     let timingPatched = false;
     for (const [label, patch] of Object.entries(overlay.timeline)) {
       const step = byLabel.get(label);
@@ -1151,7 +1229,7 @@ function applyOverlay(ir, overlay, layer, report, baseNodeIds) {
         );
         continue;
       }
-      const allowed = PATCHABLE[step.kind] ?? [];
+      const allowed = TIMELINE_PATCHABLE[step.kind] ?? [];
       for (const [key2, value] of Object.entries(patch)) {
         if (value === void 0) continue;
         if (!allowed.includes(key2)) {
@@ -1231,6 +1309,134 @@ function formatComposeReport(report) {
   return lines.join("\n");
 }
 
+// ../core/src/manifest.ts
+function animatedPropsOf(compiled, id) {
+  const props = /* @__PURE__ */ new Set();
+  const prefix = `${id}.`;
+  for (const key2 of compiled.segments.keys()) {
+    if (key2.startsWith(prefix)) props.add(key2.slice(prefix.length));
+  }
+  const drivers = compiled.motionPaths.get(id);
+  if (drivers && drivers.length > 0) {
+    props.add("x");
+    props.add("y");
+    if (drivers.some((d) => d.autoRotate)) props.add("rotation");
+  }
+  return [...props].sort();
+}
+function indexTimeline(tl) {
+  const byLabel = /* @__PURE__ */ new Map();
+  const walk = (t) => {
+    if ("label" in t && t.label !== void 0) byLabel.set(t.label, t);
+    if (t.kind === "beat") byLabel.set(t.name, t);
+    if ("children" in t) t.children.forEach(walk);
+  };
+  if (tl) walk(tl);
+  return byLabel;
+}
+function walkMotion(tl, visit) {
+  const walk = (t) => {
+    if (t.kind === "tween" || t.kind === "motionPath") {
+      visit(t.kind, "label" in t && t.label !== void 0, t.target);
+    } else if (t.kind === "to") {
+      visit("to", t.label !== void 0, t.state);
+    }
+    if ("children" in t) t.children.forEach(walk);
+  };
+  if (tl) walk(tl);
+}
+function sceneManifest(compiled) {
+  const ir = compiled.ir;
+  const statesByNode = /* @__PURE__ */ new Map();
+  for (const [name, override] of Object.entries(ir.states ?? {})) {
+    for (const id of Object.keys(override)) {
+      const list = statesByNode.get(id) ?? [];
+      list.push(name);
+      statesByNode.set(id, list);
+    }
+  }
+  const nodes = [];
+  const walkNodes = (list, parent) => {
+    for (const node of list) {
+      nodes.push({
+        id: node.id,
+        type: node.type,
+        ...parent !== void 0 ? { parent } : {},
+        address: `nodes.${node.id}`,
+        editableProps: [...PROPS_BY_TYPE[node.type]],
+        animatedProps: animatedPropsOf(compiled, node.id),
+        inStates: statesByNode.get(node.id) ?? []
+      });
+      if (node.type === "group") walkNodes(node.children, node.id);
+    }
+  };
+  walkNodes(ir.nodes, void 0);
+  const states = Object.entries(ir.states ?? {}).map(([name, override]) => ({
+    name,
+    address: `states.${name}`,
+    touches: Object.entries(override).map(([id, props]) => ({ id, props: Object.keys(props) }))
+  }));
+  const byLabel = indexTimeline(ir.timeline);
+  const timeline = [];
+  const beats = [];
+  for (const [label, span] of compiled.labelTimes) {
+    const step = byLabel.get(label);
+    const kind = step?.kind ?? "seq";
+    if (compiled.beatTimes.has(label) && step?.kind === "beat") {
+      beats.push({ name: label, t0: span.t0, t1: span.t1, ownsNodes: step.nodes ?? [], address: `timeline.${label}` });
+    } else {
+      timeline.push({ label, kind, t0: span.t0, t1: span.t1, patchable: TIMELINE_PATCHABLE[kind] ?? [], address: `timeline.${label}` });
+    }
+  }
+  timeline.sort((a, b) => a.t0 - b.t0 || a.label.localeCompare(b.label));
+  beats.sort((a, b) => a.t0 - b.t0 || a.name.localeCompare(b.name));
+  const behaviors = (ir.behaviors ?? []).map((b) => ({
+    target: b.target,
+    prop: b.prop,
+    kind: b.behavior.name,
+    address: `behaviors.${b.target}.${b.prop}`
+  }));
+  let motionTotal = 0;
+  let motionLabeled = 0;
+  walkMotion(ir.timeline, (_kind, labeled) => {
+    motionTotal++;
+    if (labeled) motionLabeled++;
+  });
+  return {
+    scene: {
+      id: ir.id,
+      duration: compiled.duration,
+      fps: ir.fps ?? 30,
+      size: ir.size,
+      ...ir.background !== void 0 ? { background: ir.background } : {}
+    },
+    nodes,
+    states,
+    timeline,
+    beats,
+    behaviors,
+    summary: {
+      nodeCount: nodes.length,
+      labeledSteps: timeline.length + beats.length,
+      unlabeledMotionSteps: motionTotal - motionLabeled,
+      motionAddressableRatio: motionTotal === 0 ? 1 : motionLabeled / motionTotal
+    }
+  };
+}
+function lintScene(compiled) {
+  const findings = [];
+  walkMotion(compiled.ir.timeline, (kind, labeled, target) => {
+    if (labeled) return;
+    const what = kind === "to" ? `to("${target}")` : `${kind} on "${target}"`;
+    findings.push({
+      rule: "unlabeled-motion",
+      severity: "warn",
+      message: `${what} has no label \u2014 its timing can't be retimed or redirected by an overlay, and a base regeneration can silently drop it. Add a stable label.`
+    });
+  });
+  return findings;
+}
+
 // ../core/src/camera.ts
 var CAMERA_ID = "camera";
 var CAMERA_PROPS2 = ["x", "y", "zoom", "rotation", "perspective"];
@@ -1654,7 +1860,8 @@ function evaluate(compiled, t) {
         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 startRaw = node.props.start;
+        const start = typeof startRaw === "string" ? compiled.labelTimes.get(startRaw)?.t0 ?? 0 : startRaw ?? 0;
         const rate = node.props.rate ?? 1;
         const clipStart = node.props.clipStart ?? 0;
         const srcT = clipStart + Math.max(0, t - start) * rate;
@@ -1923,13 +2130,10 @@ function photoMontage(images, opts = {}) {
   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;
@@ -1955,7 +2159,7 @@ function photoMontage(images, opts = {}) {
     }
     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)
+      isVideoSrc(slide.src) ? video({ ...box, start: `shot-${i}`, volume: slide.volume ?? 0 }) : image(box)
     );
     const ken = tween(
       nid,
@@ -2009,903 +2213,6 @@ function photoMontage(images, opts = {}) {
 }
 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) })
-          )
-        )
-      ]);
-    }
-    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))
-        )
-      ]);
-    }
-  }
-}
-
-// ../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 })
-      ];
-    }
-    case "terminal": {
-      const winW = sw + 16;
-      const winH = sh + 76;
-      return [
-        rect({ id: `${id}-win`, x: 0, y: 0, anchor: "center", width: winW, height: winH, fill: p.chrome, stroke: p.bodyStroke, strokeWidth: 1.5, radius: 12 }),
-        ellipse({ id: `${id}-dot1`, x: -winW / 2 + 28, y: -winH / 2 + 22, anchor: "center", width: 12, height: 12, fill: "#FF5F57" }),
-        ellipse({ id: `${id}-dot2`, x: -winW / 2 + 50, y: -winH / 2 + 22, anchor: "center", width: 12, height: 12, fill: "#FEBC2E" }),
-        ellipse({ id: `${id}-dot3`, x: -winW / 2 + 72, y: -winH / 2 + 22, anchor: "center", width: 12, height: 12, fill: "#28C840" }),
-        rect({ id: `${id}-tab`, x: -winW / 2 + 170, y: -winH / 2 + 22, anchor: "center", width: 130, height: 24, fill: o.screen ?? p.screen, radius: 6 }),
-        text({ id: `${id}-title`, x: -winW / 2 + 170, y: -winH / 2 + 22, anchor: "center", content: urlText(o.url ?? "zsh"), fontFamily: "Inter", fontSize: 13, fill: p.chromeText }),
-        screen()
-      ];
-    }
-    case "car": {
-      const bodyW = sw + 60;
-      const bodyH = sh + 60;
-      return [
-        rect({ id: `${id}-body`, x: 0, y: 0, anchor: "center", width: bodyW, height: bodyH, fill: p.body, stroke: p.bodyStroke, strokeWidth: 2, radius: 40 }),
-        ellipse({ id: `${id}-knob`, x: -bodyW / 2 + 18, y: 0, anchor: "center", width: 22, height: 22, fill: p.body, stroke: p.detail, strokeWidth: 3 }),
-        screen(),
-        ellipse({ id: `${id}-btn1`, x: -44, y: sh / 2 + 16, anchor: "center", width: 12, height: 12, fill: p.detail }),
-        ellipse({ id: `${id}-btn2`, x: 0, y: sh / 2 + 16, anchor: "center", width: 12, height: 12, fill: p.detail }),
-        ellipse({ id: `${id}-btn3`, x: 44, y: sh / 2 + 16, anchor: "center", width: 12, height: 12, fill: p.detail })
-      ];
-    }
-  }
-}
-var urlText = (url) => {
-  const u = url ?? "reframe.video";
-  return u.length > 70 ? `${u.slice(0, 67)}\u2026` : u;
-};
-function devicePreset(name, opts = {}) {
-  const id = opts.id ?? "device";
-  const p = opts.color === "light" ? LIGHT : DARK;
-  const children = buildDevice(name, id, p, opts, opts.content ?? []);
-  return group(
-    {
-      id,
-      x: opts.x ?? 0,
-      y: opts.y ?? 0,
-      ...opts.scale !== void 0 && opts.scale !== 1 && { scale: opts.scale },
-      ...opts.opacity !== void 0 && opts.opacity !== 1 && { opacity: opts.opacity }
-    },
-    children
-  );
-}
-
-// ../core/src/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);
-}
-
-// ../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;
-  };
-}
-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 round = (v) => Math.round(v * 1e3) / 1e3;
-function footPos(p, stride, lift) {
-  p = (p % 1 + 1) % 1;
-  if (p < 0.5) {
-    const u2 = p / 0.5;
-    return [stride * (1 - 2 * u2), 138];
-  }
-  const u = (p - 0.5) / 0.5;
-  return [-stride + 2 * stride * u, 138 - Math.sin(Math.PI * u) * lift];
-}
-function gaitPose(ph, stride, lift, armSwing, facing) {
-  const fl = footPos(ph, stride, lift);
-  const fr = footPos(ph + 0.5, stride, lift);
-  const [hipL, kneeL] = ikReach(THIGH, SHIN, facing * fl[0], fl[1], facing < 0);
-  const [hipR, kneeR] = ikReach(THIGH, SHIN, facing * fr[0], fr[1], facing < 0);
-  const swing = Math.cos(2 * Math.PI * ph);
-  return {
-    legUpperL: round(hipL),
-    legLowerL: round(kneeL),
-    legUpperR: round(hipR),
-    legLowerR: round(kneeR),
-    armUpperR: round(-10 - armSwing * swing),
-    armLowerR: -16,
-    armUpperL: round(10 + armSwing * swing),
-    armLowerL: 16
-  };
-}
-function gait(c, run) {
-  const stride = (run ? 34 : 24) + (run ? 40 : 30) * c.e + c.jit(3);
-  const lift = run ? 40 : 26;
-  const armSwing = (run ? 26 : 16) + 20 * c.e;
-  const halfDur = (run ? 0.26 : 0.42) + c.jit(0.02);
-  const lean = run ? c.facing * -6 : 0;
-  const steps = c.cycles * 2;
-  const d = dur2(halfDur, c.sp);
-  const intro = dur2(0.16, c.sp);
-  const keys = [];
-  for (let k = 0; k <= steps; k++) {
-    const pose = { ...gaitPose(k / 2, stride, lift, armSwing, c.facing), chest: lean };
-    keys.push(poseTo(c.g, pose, { duration: k === 0 ? intro : d, ease: k === 0 ? "easeOutQuad" : "linear" }));
-  }
-  const total = intro + steps * d;
-  const travel = c.travel ?? stride * 2;
-  const children = [seq(...keys)];
-  if (travel !== 0) {
-    children.push(tween(c.g, { x: c.at[0] + c.facing * travel * c.cycles }, { duration: total, ease: "linear", label: "travel" }));
-  }
-  return beat(run ? "run" : "walk", {}, [par(...children)]);
-}
-function jumpBeat(c) {
-  const h = 120 + 150 * c.e;
-  const [y0] = [c.at[1]];
-  const CROUCH = { legUpperL: 18, legLowerL: 54, legUpperR: -18, legLowerR: 54, armUpperL: 28, armUpperR: -28 };
-  const LAUNCH = { legUpperL: 0, legLowerL: 0, legUpperR: 0, legLowerR: 0, armUpperL: 150, armUpperR: -150 };
-  const TUCK = { legUpperL: -28, legLowerL: 66, legUpperR: -28, legLowerR: 66, armUpperL: 124, armUpperR: -124 };
-  const REST = { legUpperL: 3, legLowerL: -2, legUpperR: -3, legLowerR: 2, armUpperL: 10, armLowerL: 8, armUpperR: -10, armLowerR: -8 };
-  const j = c.jit(0.03);
-  return beat("jump", {}, [
-    seq(
-      par(poseTo(c.g, CROUCH, { duration: dur2(0.24, c.sp), ease: "easeOutQuad" }), tween(c.g, { y: y0 + 26 }, { duration: dur2(0.24, c.sp), ease: "easeOutQuad" })),
-      par(poseTo(c.g, LAUNCH, { duration: dur2(0.22 + j, c.sp), ease: "easeOutCubic" }), tween(c.g, { y: y0 - h }, { duration: dur2(0.36, c.sp), ease: "easeOutCubic", label: "launch" })),
-      poseTo(c.g, TUCK, { duration: dur2(0.22, c.sp) }),
-      par(poseTo(c.g, CROUCH, { duration: dur2(0.28, c.sp), ease: "easeInQuad" }), tween(c.g, { y: y0 + 18 }, { duration: dur2(0.3, c.sp), ease: "easeInCubic", label: "land" })),
-      par(poseTo(c.g, REST, { duration: dur2(0.45, c.sp), ease: "easeOutBack" }), tween(c.g, { y: y0 }, { duration: dur2(0.45, c.sp), ease: "easeOutBack" }))
-    )
-  ]);
-}
-function danceBeat(c) {
-  const y0 = c.at[1];
-  const sway = 8 + 6 * c.e;
-  const armUp = 130 + 30 * c.e;
-  const A = { chest: sway, head: -sway * 0.5, armUpperR: -armUp, armLowerR: -20, armUpperL: 40, armLowerL: 30, legUpperL: 8, legUpperR: -2 };
-  const B = { chest: -sway, head: sway * 0.5, armUpperL: armUp, armLowerL: 20, armUpperR: -40, armLowerR: -30, legUpperL: 2, legUpperR: -8 };
-  const d = dur2(0.34, c.sp);
-  const keys = [];
-  for (let k = 0; k < c.cycles * 2; k++) {
-    const pose = k % 2 === 0 ? A : B;
-    keys.push(par(
-      poseTo(c.g, pose, { duration: d, ease: "easeInOutQuad" }),
-      tween(c.g, { y: y0 - (k % 2 === 0 ? 14 : 0) }, { duration: d, ease: "easeInOutQuad" })
-    ));
-  }
-  keys.push(tween(c.g, { y: y0 }, { duration: d }));
-  return beat("dance", {}, [seq(...keys)]);
-}
-function waveBeat(c) {
-  const n3 = 3 + Math.round(c.rand() * 2);
-  const amp = 16 + 10 * c.e;
-  const steps = [poseTo(c.g, { armUpperR: -150, armLowerR: -24 }, { duration: dur2(0.4, c.sp), ease: "easeOutBack" })];
-  for (let k = 0; k < n3; k++) {
-    steps.push(poseTo(c.g, { armLowerR: -24 + (k % 2 === 0 ? amp : -amp) }, { duration: dur2(0.22, c.sp), ease: "easeInOutQuad" }));
-  }
-  steps.push(poseTo(c.g, { armUpperR: -10, armLowerR: -8 }, { duration: dur2(0.4, c.sp), ease: "easeInOutCubic" }));
-  return beat("wave", {}, [seq(...steps)]);
-}
-function cheerBeat(c) {
-  const y0 = c.at[1];
-  const UP = { armUpperL: 152, armLowerL: 8, armUpperR: -152, armLowerR: -8 };
-  const d = dur2(0.3, c.sp);
-  const keys = [poseTo(c.g, UP, { duration: dur2(0.35, c.sp), ease: "easeOutBack" })];
-  for (let k = 0; k < c.cycles; k++) {
-    keys.push(par(tween(c.g, { y: y0 - 28 }, { duration: d, ease: "easeOutQuad" }), poseTo(c.g, { armUpperL: 160, armUpperR: -160 }, { duration: d })));
-    keys.push(par(tween(c.g, { y: y0 }, { duration: d, ease: "easeInQuad" }), poseTo(c.g, { armUpperL: 145, armUpperR: -145 }, { duration: d })));
-  }
-  return beat("cheer", {}, [seq(...keys)]);
-}
-function characterPreset(name, opts) {
-  const c = ctx2(opts);
-  let tl;
-  switch (name) {
-    case "walk":
-      tl = gait(c, false);
-      break;
-    case "run":
-      tl = gait(c, true);
-      break;
-    case "jump":
-      tl = jumpBeat(c);
-      break;
-    case "dance":
-      tl = danceBeat(c);
-      break;
-    case "wave":
-      tl = waveBeat(c);
-      break;
-    case "cheer":
-      tl = cheerBeat(c);
-      break;
-    default: {
-      const _exhaustive = name;
-      throw new Error(`unknown characterPreset "${_exhaustive}"`);
-    }
-  }
-  return c.label && tl.kind === "beat" ? { ...tl, name: c.label } : tl;
-}
-
-// ../core/src/figure.ts
-var K2 = 0.5523;
-var n2 = (v) => Number(v.toFixed(2));
-function limb(a, b, y0, y1) {
-  const ka = n2(a * K2), kb = n2(b * K2);
-  return `M ${-a} ${y0} C ${-a} ${n2(y0 - ka)} ${-ka} ${n2(y0 - a)} 0 ${n2(y0 - a)} C ${ka} ${n2(y0 - a)} ${a} ${n2(y0 - ka)} ${a} ${y0} L ${b} ${y1} C ${b} ${n2(y1 + kb)} ${kb} ${n2(y1 + b)} 0 ${n2(y1 + b)} C ${-kb} ${n2(y1 + b)} ${-b} ${n2(y1 + kb)} ${-b} ${y1} Z`;
-}
-function rrect(a, b, y0, y1, r) {
-  return `M ${n2(-a + r)} ${y0} L ${n2(a - r)} ${y0} Q ${a} ${y0} ${a} ${n2(y0 + r)} L ${b} ${n2(y1 - r)} Q ${b} ${y1} ${n2(b - r)} ${y1} L ${n2(-b + r)} ${y1} Q ${-b} ${y1} ${-b} ${n2(y1 - r)} L ${-a} ${n2(y0 + r)} Q ${-a} ${y0} ${n2(-a + r)} ${y0} Z`;
-}
-function darken(hex, f) {
-  const h = hex.replace("#", "");
-  const v = parseInt(h.length === 3 ? [...h].map((c) => c + c).join("") : h, 16);
-  const ch = (s) => Math.max(0, Math.min(255, Math.round((v >> s & 255) * (1 - f))));
-  const hx = (x) => x.toString(16).padStart(2, "0");
-  return `#${hx(ch(16))}${hx(ch(8))}${hx(ch(0))}`;
-}
-var DEF = {
-  clean: { skin: "#E9B58E", hair: "#2B313F", top: "#E86C4A", pants: "#39425C", shoe: "#20242F", accent: "#E86C4A" },
-  cute: { skin: "#FFD2A6", hair: "#5B4636", top: "#FF7E5F", pants: "#3E6F8E", shoe: "#272B38", accent: "#FF7E5F" }
-};
-function resolvePal(style, p = {}) {
-  const d = DEF[style];
-  const accent = p.accent ?? d.accent;
-  const top = p.top ?? (style === "clean" ? accent : d.top);
-  const skin = p.skin ?? d.skin;
-  const hair = p.hair ?? d.hair;
-  const pants = p.pants ?? d.pants;
-  const shoe = p.shoe ?? d.shoe;
-  return {
-    skin,
-    skinSh: darken(skin, 0.12),
-    hair,
-    hairSh: darken(hair, 0.14),
-    top,
-    topSh: darken(top, 0.12),
-    pants,
-    pantsSh: darken(pants, 0.14),
-    shoe,
-    shoeSh: darken(shoe, 0.22),
-    eye: "#2B313F",
-    cheek: "#FF9E7E",
-    white: "#FFFFFF",
-    mouth: "#8A4233"
-  };
-}
-var fp = (id, d, fill, stroke, sw = 0, opacity = 1) => path({ id, d, x: 0, y: 0, fill, opacity, ...stroke && sw > 0 ? { stroke, strokeWidth: sw } : {} });
-function cleanParts(p, face) {
-  const HC = -42;
-  return {
-    upperArm: (j) => [fp(`${j}-sleeve`, limb(12, 10, 2, 58), p.top)],
-    forearm: (j) => [
-      fp(`${j}-elbow`, ovalPath(10, 10, 0, 3), p.skin),
-      fp(`${j}-fore`, limb(10, 8, 2, 48), p.skin),
-      fp(`${j}-hand`, ovalPath(11, 12, 0, 50), p.skin)
-    ],
-    thigh: (j) => [fp(`${j}-thigh`, limb(15, 13, 2, 72), p.pants)],
-    shin: (j) => [
-      fp(`${j}-knee`, ovalPath(13, 13, 0, 2), p.pants),
-      fp(`${j}-shin`, limb(13, 11, 2, 62), p.pants),
-      fp(`${j}-shoe`, ovalPath(15, 9, 4, 67), p.shoe)
-    ],
-    torso: (j) => [
-      fp(`${j}-shadow`, rrect(38, 26, -28, 52, 20), p.topSh),
-      fp(`${j}-top`, rrect(40, 27, -30, 52, 22), p.top),
-      fp(`${j}-pelvis`, rrect(29, 24, 46, 104, 14), p.pants)
-    ],
-    head: (j) => [
-      fp(`${j}-neck`, rrect(9, 9, 2, 22, 5), p.skin),
-      fp(`${j}-skin`, ovalPath(42, 46, 0, HC), p.skin),
-      fp(`${j}-hair`, ovalPath(44, 27, 0, HC - 31), p.hair),
-      fp(`${j}-hairL`, ovalPath(8, 14, -39, HC - 18), p.hair),
-      fp(`${j}-hairR`, ovalPath(8, 14, 39, HC - 18), p.hair),
-      ...face ? [fp(`${j}-eyeL`, ovalPath(5, 7, -14, HC + 2), p.eye), fp(`${j}-eyeR`, ovalPath(5, 7, 14, HC + 2), p.eye)] : []
-    ]
-  };
-}
-var CUTE_HAIR = "M -64 -54 C -78 -96 -50 -126 0 -126 C 50 -126 78 -96 64 -54 C 60 -34 48 -28 41 -33 C 35 -54 23 -60 9 -60 C 3 -60 -3 -60 -9 -60 C -23 -60 -35 -54 -41 -33 C -48 -28 -60 -34 -64 -54 Z";
-function cuteParts(p, face) {
-  const HC = -50;
-  return {
-    upperArm: (j) => [fp(`${j}-sleeve`, limb(15, 13, 2, 58), p.top, p.topSh, 2.5)],
-    forearm: (j) => [
-      fp(`${j}-elbow`, ovalPath(12, 12, 0, 3), p.skin, p.skinSh, 2.5),
-      fp(`${j}-fore`, limb(12, 10, 2, 46), p.skin, p.skinSh, 2.5),
-      fp(`${j}-hand`, ovalPath(13, 14, 0, 50), p.skin, p.skinSh, 2.5)
-    ],
-    thigh: (j) => [fp(`${j}-thigh`, limb(19, 16, 2, 72), p.pants, p.pantsSh, 2.5)],
-    shin: (j) => [
-      fp(`${j}-knee`, ovalPath(16, 16, 0, 2), p.pants, p.pantsSh, 2.5),
-      fp(`${j}-shin`, limb(15, 12, 2, 60), p.pants, p.pantsSh, 2.5),
-      fp(`${j}-shoe`, ovalPath(18, 11, 5, 66), p.shoe, darken(p.shoe, 0.25), 2.5)
-    ],
-    torso: (j) => [
-      fp(`${j}-shadow`, rrect(40, 34, -18, 52, 16), p.topSh),
-      fp(`${j}-top`, rrect(42, 35, -20, 52, 18), p.top, p.topSh, 2.5),
-      fp(`${j}-pelvis`, rrect(36, 30, 46, 104, 16), p.pants, p.pantsSh, 2.5)
-    ],
-    head: (j) => [
-      fp(`${j}-neck`, ovalPath(15, 12, 0, 12), p.skinSh),
-      fp(`${j}-skin`, ovalPath(42, 46, 0, HC + 4), p.skin, p.skinSh, 2.5),
-      fp(`${j}-cheekL`, ovalPath(11, 8, -40, HC + 22), p.cheek, void 0, 0, 0.5),
-      fp(`${j}-cheekR`, ovalPath(11, 8, 40, HC + 22), p.cheek, void 0, 0, 0.5),
-      fp(`${j}-hair`, CUTE_HAIR, p.hair, p.hairSh, 2),
-      ...face ? [
-        fp(`${j}-eyeL`, ovalPath(10, 13, -25, HC + 8), p.eye),
-        fp(`${j}-eyeR`, ovalPath(10, 13, 25, HC + 8), p.eye),
-        fp(`${j}-glL`, ovalPath(3.4, 3.4, -28, HC + 3), p.white),
-        fp(`${j}-glR`, ovalPath(3.4, 3.4, 22, HC + 3), p.white),
-        path({ id: `${j}-mouth`, d: "M -15 0 Q 0 15 15 0", x: 0, y: HC + 28, fill: "none", stroke: p.mouth, strokeWidth: 5 })
-      ] : []
-    ]
-  };
-}
-function buildSkeleton(id, S) {
-  const arm = (side, x, r1, r2) => ({
-    name: `armUpper${side}`,
-    at: [x, -14],
-    length: 60,
-    width: 0,
-    rotation: r1,
-    shape: S.upperArm(`${id}-armUpper${side}`),
-    children: [{ name: `armLower${side}`, at: [0, 60], length: 56, width: 0, rotation: r2, shape: S.forearm(`${id}-armLower${side}`) }]
-  });
-  const leg = (side, x, r1, r2) => ({
-    name: `legUpper${side}`,
-    at: [x, 76],
-    length: 76,
-    width: 0,
-    rotation: r1,
-    shape: S.thigh(`${id}-legUpper${side}`),
-    children: [{ name: `legLower${side}`, at: [0, 76], length: 72, width: 0, rotation: r2, shape: S.shin(`${id}-legLower${side}`) }]
-  });
-  return {
-    name: "chest",
-    at: [0, 0],
-    shape: S.torso(`${id}-chest`),
-    children: [
-      { name: "head", at: [0, -42], rotation: 0, shape: S.head(`${id}-head`) },
-      arm("L", -40, 8, 6),
-      arm("R", 40, -8, -6),
-      leg("L", -20, 3, -2),
-      leg("R", 20, -3, 2)
-    ]
-  };
-}
-function figure(opts = {}) {
-  const style = opts.style ?? "clean";
-  const pal = resolvePal(style, opts.palette);
-  const face = opts.face ?? true;
-  const id = opts.id ?? "figure";
-  const parts = style === "clean" ? cleanParts(pal, face) : cuteParts(pal, face);
-  const rigOpts = { id };
-  if (opts.x !== void 0) rigOpts.x = opts.x;
-  if (opts.y !== void 0) rigOpts.y = opts.y;
-  if (opts.scale !== void 0) rigOpts.scale = opts.scale;
-  if (opts.opacity !== void 0) rigOpts.opacity = opts.opacity;
-  return rig(buildSkeleton(id, parts), rigOpts);
-}
-
 // ../core/src/textMetrics.ts
 var INTER_ADVANCE = {
   "400": {
@@ -3200,212 +2507,1320 @@ var INTER_ADVANCE = {
     "~": 68.55
   }
 };
-var INTER_FALLBACK = {
-  "400": 56.16,
-  "700": 58.74,
-  "800": 59.79
+var INTER_FALLBACK = {
+  "400": 56.16,
+  "700": 58.74,
+  "800": 59.79
+};
+
+// ../core/src/textFx.ts
+var clamp01 = (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 dur = (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;
+    });
+  }
+  return { nodes, glyphs, ids: glyphs.map((g) => g.id), width: total, x, y, fontSize };
+}
+var ctx = (o) => ({
+  sp: Math.max(0.25, o.speed ?? 1),
+  e: clamp01(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: dur(0.04, c.sp), ease: "linear" });
+    case "cascade":
+      return seq(
+        set({ y: g.y + 56, opacity: 0 }),
+        par(
+          tween(g.id, { opacity: 1 }, { duration: dur(0.22, c.sp), ease: "easeOutQuad" }),
+          tween(g.id, { y: g.y }, { duration: dur(0.34, c.sp), ease: "easeOutCubic" })
+        )
+      );
+    case "rise":
+      return seq(
+        set({ y: g.y + 36, opacity: 0 }),
+        par(
+          tween(g.id, { opacity: 1 }, { duration: dur(0.3, c.sp), ease: "easeOutQuad" }),
+          tween(g.id, { y: g.y }, { duration: dur(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: dur(0.2, c.sp), ease: "easeOutQuad" }),
+          tween(g.id, { y: g.y, scale: 1 }, { duration: dur(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: dur(0.4, c.sp), ease: "easeOutQuad" }),
+          tween(g.id, { x: g.x, y: g.y, rotation: 0, scale: 1 }, { duration: dur(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: dur(0.05, c.sp), ease: "linear" }));
+      }
+      flicker.push(tween(g.id, { content: g.ch }, { duration: dur(0.05, c.sp), ease: "linear" }));
+      return seq(...flicker);
+    }
+  }
+}
+function textIn(name, block, opts = {}) {
+  const c = { ...ctx(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: dur(0.7, c.sp), ease: "easeInCubic" }),
+        tween(g.id, { rotation: (rs(23) - 0.5) * 300, opacity: 0 }, { duration: dur(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: dur(0.6, c.sp), ease: "easeInCubic" }),
+        tween(g.id, { opacity: 0 }, { duration: dur(0.5, c.sp), ease: "easeInQuad" })
+      );
+    case "dissolve":
+      return seq(wait(rs(31) * 0.5), par(
+        tween(g.id, { opacity: 0 }, { duration: dur(0.4, c.sp), ease: "easeInQuad" }),
+        tween(g.id, { scale: 1.4 }, { duration: dur(0.4, c.sp), ease: "easeOutQuad" })
+      ));
+    case "fall":
+      return par(
+        tween(g.id, { y: g.y + 700 + rs(41) * 200 }, { duration: dur(0.8, c.sp), ease: "easeInQuad" }),
+        tween(g.id, { rotation: (rs(42) - 0.5) * 120, opacity: 0 }, { duration: dur(0.8, c.sp), ease: "easeInQuad" })
+      );
+    case "collapse":
+      return par(
+        tween(g.id, { x: block.x, y: block.y, scale: 0.2 }, { duration: dur(0.5, c.sp), ease: "easeInBack" }),
+        tween(g.id, { opacity: 0 }, { duration: dur(0.5, c.sp), ease: "easeInQuad" })
+      );
+  }
+}
+function textOut(name, block, opts = {}) {
+  const c = { ...ctx(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/titles.ts
+function title(opts) {
+  const id = opts.id ?? "title";
+  const block = splitText(opts.text, {
+    id,
+    x: opts.x ?? 960,
+    y: opts.y ?? 540,
+    fontSize: opts.fontSize ?? 96,
+    ...opts.fontWeight !== void 0 && { fontWeight: opts.fontWeight },
+    ...opts.fill !== void 0 && { fill: opts.fill },
+    ...opts.letterSpacing !== void 0 && { letterSpacing: opts.letterSpacing }
+  });
+  const fx = {
+    ...opts.speed !== void 0 && { speed: opts.speed },
+    ...opts.seed !== void 0 && { seed: opts.seed }
+  };
+  const entrance = textIn(opts.entrance ?? "cascade", block, { ...fx, label: `${id}-in` });
+  if (!opts.exit) return { nodes: block.nodes, timeline: entrance, block };
+  const timeline = seq(
+    entrance,
+    wait(Math.max(0, opts.hold ?? 2)),
+    textOut(opts.exit, block, { ...fx, label: `${id}-out` })
+  );
+  return { nodes: block.nodes, timeline, block };
+}
+function lowerThird(opts) {
+  const id = opts.id ?? "lt";
+  const x = opts.x ?? 120;
+  const y = opts.y ?? 860;
+  const fs = opts.fontSize ?? 48;
+  const roleFs = Math.round(fs * 0.58);
+  const barH = opts.role ? fs + roleFs + 24 : fs + 16;
+  const restX = 28;
+  const startX = restX - 8;
+  const children = [
+    rect({ id: `${id}-bar`, x: 0, y: 0, width: 6, height: barH, anchor: "top-left", fill: opts.accent ?? "#FF4D00", scaleY: 0 }),
+    text({ id: `${id}-name`, x: startX, y: 6, anchor: "top-left", content: opts.name, fontFamily: "Inter", fontSize: fs, fontWeight: 700, fill: opts.fill ?? "#FFFFFF", opacity: 0 })
+  ];
+  if (opts.role !== void 0) {
+    children.push(
+      text({ id: `${id}-role`, x: startX, y: 6 + fs + 8, anchor: "top-left", content: opts.role, fontFamily: "Inter", fontSize: roleFs, fill: opts.subFill ?? "#C9C9C9", opacity: 0 })
+    );
+  }
+  const nodes = [group({ id, x, y }, children)];
+  const entrance = beat(`${id}-in`, {}, [
+    par(
+      tween(`${id}-bar`, { scaleY: 1 }, { duration: 0.5, ease: "easeOutCubic" }),
+      seq(wait(0.08), tween(`${id}-name`, { opacity: 1, x: restX }, { duration: 0.45, ease: "easeOutCubic" })),
+      ...opts.role !== void 0 ? [seq(wait(0.16), tween(`${id}-role`, { opacity: 1, x: restX }, { duration: 0.45, ease: "easeOutCubic" }))] : []
+    )
+  ]);
+  const exit = beat(`${id}-out`, {}, [
+    par(
+      tween(`${id}-bar`, { scaleY: 0 }, { duration: 0.35, ease: "easeInCubic" }),
+      tween(`${id}-name`, { opacity: 0 }, { duration: 0.3, ease: "easeInCubic" }),
+      ...opts.role !== void 0 ? [tween(`${id}-role`, { opacity: 0 }, { duration: 0.3, ease: "easeInCubic" })] : []
+    )
+  ]);
+  return { nodes, timeline: seq(entrance, wait(Math.max(0, opts.hold ?? 3)), exit) };
+}
+
+// ../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 clamp012 = (x) => Math.max(0, Math.min(1, x));
+var SET = 1 / 120;
+function ctx2(o) {
+  const rand2 = makeRng2((o.seed ?? 0) + 1);
+  return {
+    e: clamp012(o.energy ?? 0.5),
+    sp: Math.max(0.25, o.speed ?? 1),
+    it: clamp012(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 dur2 = (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: dur2(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: dur2(1.3 + c.jit(0.2), c.sp), ease: "easeInOutQuad", ...i === 0 && { label: "draw" } })
+    )
+  );
+}
+function motionPreset(name, opts) {
+  const c = ctx2(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: dur2(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: dur2(0.45 + c.jit(0.05), c.sp), ease: "easeOutCubic", label: "punch" }),
+            tween(c.g, { scale: c.s }, { duration: dur2(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: dur2(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 = dur2(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: dur2(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: dur2(1.7, c.sp), ease: "easeInOutCubic", label: "orbit" }
+          ),
+          seq(
+            tween(c.g, { scale: c.s * (1.12 + 0.1 * c.e) }, { duration: dur2(0.85, c.sp), ease: "easeOutBack" }),
+            tween(c.g, { scale: c.s }, { duration: dur2(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: dur2(0.9, c.sp), ease: "easeOutBack", label: "spin" }),
+            tween(c.g, { scale: c.s }, { duration: dur2(0.3, c.sp), ease: "easeInOutQuad" })
+          ),
+          seq(wait(SET), fadeFills(c, 0.3))
+        )
+      ]);
+    }
+  }
+}
+
+// ../core/src/devicePreset.ts
+var DEVICE_PRESET_NAMES = ["phone", "tablet", "laptop", "browser", "watch", "monitor", "tv", "foldable", "terminal", "car"];
+var DARK = {
+  body: "#15161C",
+  bodyStroke: "#2A2D38",
+  bodyGrad: ["#272A35", "#0E0F15"],
+  screen: "#0E0F15",
+  detail: "#3A3D48",
+  chrome: "#1B1D24",
+  chromeGrad: ["#23262F", "#141620"],
+  chromeText: "#9AA0AD",
+  ambient: "#9FB4FF"
+};
+var LIGHT = {
+  body: "#E7E9EE",
+  bodyStroke: "#C3C7D1",
+  bodyGrad: ["#FAFBFD", "#D4D8E1"],
+  screen: "#FFFFFF",
+  detail: "#AEB3C0",
+  chrome: "#F2F3F6",
+  chromeGrad: ["#FCFCFE", "#E2E5EC"],
+  chromeText: "#5B606C",
+  ambient: "#7C9BFF"
+};
+var NEON_ACCENTS = ["#00E5FF", "#FF3DCB", "#7C5CFF", "#3DFF88", "#FF7A00"];
+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 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 hashId(id) {
+  let h = 2166136261;
+  for (let i = 0; i < id.length; i++) {
+    h ^= id.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  return h >>> 0;
+}
+function makeCtx(opts) {
+  const id = opts.id ?? "device";
+  const palette = opts.color === "light" ? LIGHT : DARK;
+  const material = opts.material ?? "premium";
+  const style = opts.style ?? "glass";
+  const seed = (opts.seed ?? hashId(id)) >>> 0;
+  const rng = makeRng3(seed + 1);
+  const accent = NEON_ACCENTS[Math.floor(rng() * NEON_ACCENTS.length)] ?? NEON_ACCENTS[0];
+  return {
+    id,
+    palette,
+    material,
+    style,
+    accent,
+    s: opts.scale ?? 1,
+    rng,
+    jit: (amp) => (rng() - 0.5) * 2 * amp,
+    o: opts
+  };
+}
+var isPremium = (c) => c.material === "premium";
+var isNeon = (c) => c.material === "premium" && c.style === "neon";
+function premiumFill(c, solid, grad) {
+  if (!isPremium(c) || c.style === "neon") return solid;
+  return linearGradient(grad, { angle: 125 + c.jit(12) });
+}
+var bodyStroke = (c, fallback) => isNeon(c) ? c.accent : fallback;
+function bodyFx(c) {
+  if (!isPremium(c)) return {};
+  return isNeon(c) ? glow(c.accent, (24 + c.jit(5)) * c.s) : dropShadow("rgba(0,0,0,0.5)", 46 * c.s, 0, 24 * c.s);
+}
+function slab(c, suffix, x, y, w, h, r, grad, solid, strokeC) {
+  return rect({
+    id: `${c.id}-${suffix}`,
+    x,
+    y,
+    anchor: "center",
+    width: w,
+    height: h,
+    radius: r,
+    fill: premiumFill(c, solid, grad),
+    stroke: bodyStroke(c, strokeC),
+    strokeWidth: isNeon(c) ? 2.5 : 2,
+    ...bodyFx(c)
+  });
+}
+function screenStack(c, cx, cy, dims, content) {
+  const children = [
+    rect({ id: `${c.id}-screenbg`, x: 0, y: 0, anchor: "center", width: dims.width, height: dims.height, fill: c.o.screen ?? c.palette.screen })
+  ];
+  if (isPremium(c)) {
+    const tint = isNeon(c) ? c.accent : c.palette.ambient;
+    children.push(
+      rect({
+        id: `${c.id}-ambient`,
+        x: 0,
+        y: 0,
+        anchor: "center",
+        width: dims.width,
+        height: dims.height,
+        fill: radialGradient([`${tint}33`, `${tint}00`], { cy: 0.32, r: 0.72 }),
+        opacity: isNeon(c) ? 0.55 : 0.32,
+        blend: "screen"
+      })
+    );
+  }
+  children.push(group({ id: `${c.id}-content`, x: 0, y: 0 }, content));
+  if (isPremium(c) && c.style === "glass") {
+    const ang = 22 + c.jit(9);
+    children.push(
+      rect({
+        id: `${c.id}-glare`,
+        x: -dims.width * 0.18,
+        y: 0,
+        anchor: "center",
+        width: dims.width * 0.46,
+        height: dims.height * 1.8,
+        fill: "#FFFFFF",
+        opacity: 0.05 + Math.abs(c.jit(0.025)),
+        rotation: ang,
+        blend: "screen"
+      })
+    );
+  }
+  return group({ id: `${c.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 } }, children);
+}
+function phoneNotch(c, style, sh) {
+  const yTop = -sh / 2 + 16;
+  switch (style) {
+    case "none":
+      return null;
+    case "punch":
+      return rect({ id: `${c.id}-notch`, x: 0, y: yTop + 2, anchor: "center", width: 18, height: 18, fill: "#000000", radius: 9 });
+    case "notch":
+      return rect({ id: `${c.id}-notch`, x: 0, y: -sh / 2 + 11, anchor: "center", width: 150, height: 26, fill: "#000000", radius: 13 });
+    case "island":
+    default:
+      return rect({ id: `${c.id}-notch`, x: 0, y: yTop, anchor: "center", width: 96, height: 30, fill: "#000000", radius: 15 });
+  }
+}
+var urlText = (url) => {
+  const u = url ?? "reframe.video";
+  return u.length > 70 ? `${u.slice(0, 67)}\u2026` : u;
+};
+var CHASSIS = {
+  phone: (c, dims, content) => phoneOrTablet("phone", c, dims, content),
+  tablet: (c, dims, content) => phoneOrTablet("tablet", c, dims, content),
+  laptop: (c, dims, content) => {
+    const p = c.palette;
+    const sw = dims.width, sh = dims.height;
+    const lidTop = dims.cy - (sh + 40) / 2;
+    const keyRows = [0, 1, 2, 3].map(
+      (r) => rect({ id: `${c.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: `${c.id}-base`, x: 0, y: 0, d: "M -450 140 L 450 140 L 520 196 L -520 196 Z", fill: premiumFill(c, p.body, p.bodyGrad), stroke: bodyStroke(c, p.bodyStroke), strokeWidth: isNeon(c) ? 2.5 : 2, ...bodyFx(c) }),
+      rect({ id: `${c.id}-foot-l`, x: -360, y: 198, anchor: "center", width: 70, height: 5, fill: p.detail, radius: 3 }),
+      rect({ id: `${c.id}-foot-r`, x: 360, y: 198, anchor: "center", width: 70, height: 5, fill: p.detail, radius: 3 }),
+      ...keyRows,
+      rect({ id: `${c.id}-trackpad`, x: 0, y: 184, anchor: "center", width: 150, height: 8, fill: p.detail, radius: 4 }),
+      rect({ id: `${c.id}-hinge`, x: 0, y: 134, anchor: "center", width: 900, height: 10, fill: p.detail, radius: 5 }),
+      screenStack(c, dims.cx, dims.cy, dims, content),
+      ellipse({ id: `${c.id}-webcam`, x: 0, y: lidTop + 14, anchor: "center", width: 6, height: 6, fill: p.detail }),
+      rect({ id: `${c.id}-lid`, x: 0, y: dims.cy, anchor: "center", width: sw + 40, height: sh + 40, stroke: bodyStroke(c, p.bodyStroke), strokeWidth: 2, radius: 18 })
+    ];
+  },
+  browser: (c, dims, content) => {
+    const p = c.palette;
+    const sw = dims.width, sh = dims.height;
+    const winW = sw + 16;
+    const winH = sh + 92;
+    const barY = -winH / 2 + 24;
+    return [
+      rect({ id: `${c.id}-win`, x: 0, y: 0, anchor: "center", width: winW, height: winH, fill: premiumFill(c, p.chrome, p.chromeGrad), stroke: bodyStroke(c, p.bodyStroke), strokeWidth: 1.5, radius: 14, ...bodyFx(c) }),
+      ellipse({ id: `${c.id}-dot1`, x: -winW / 2 + 30, y: barY, anchor: "center", width: 13, height: 13, fill: "#FF5F57" }),
+      ellipse({ id: `${c.id}-dot2`, x: -winW / 2 + 54, y: barY, anchor: "center", width: 13, height: 13, fill: "#FEBC2E" }),
+      ellipse({ id: `${c.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: `${c.id}-tab`, x: -winW / 2 + 230, y: barY, anchor: "center", width: 190, height: 30, fill: c.o.screen ?? p.screen, radius: 8 }),
+      text({ id: `${c.id}-tabtext`, x: -winW / 2 + 156, y: barY, anchor: "center-left", content: "Overview", fontFamily: "Inter", fontSize: 13, fill: p.chromeText }),
+      rect({ id: `${c.id}-urlpill`, x: 96, y: barY, anchor: "center", width: 700, height: 26, fill: c.o.screen ?? p.screen, stroke: p.bodyStroke, strokeWidth: 1, radius: 13 }),
+      rect({ id: `${c.id}-lock`, x: 96 - 330, y: barY, anchor: "center", width: 8, height: 10, fill: p.chromeText, radius: 2 }),
+      text({ id: `${c.id}-urltext`, x: 96 - 312, y: barY, anchor: "center-left", content: urlText(c.o.url), fontFamily: "Inter", fontSize: 14, fill: p.chromeText }),
+      screenStack(c, dims.cx, dims.cy, dims, content)
+    ];
+  },
+  watch: (c, dims, content) => {
+    const p = c.palette;
+    const sw = dims.width, sh = dims.height;
+    const bw = sw + 36;
+    const bh = sh + 36;
+    return [
+      // straps (drawn behind the body) flaring out top & bottom
+      path({ id: `${c.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: `${c.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 }),
+      slab(c, "body", 0, 0, bw, bh, 60, p.bodyGrad, p.body, p.bodyStroke),
+      screenStack(c, dims.cx, dims.cy, dims, content),
+      rect({ id: `${c.id}-crown`, x: bw / 2, y: -20, anchor: "center", width: 14, height: 40, fill: p.detail, radius: 6 }),
+      rect({ id: `${c.id}-button`, x: bw / 2 - 2, y: 40, anchor: "center", width: 8, height: 34, fill: p.detail, radius: 4 })
+    ];
+  },
+  monitor: (c, dims, content) => {
+    const p = c.palette;
+    const sw = dims.width, sh = dims.height;
+    const panelW = sw + 44;
+    const panelH = sh + 60;
+    return [
+      slab(c, "panel", 0, 0, panelW, panelH, 16, p.bodyGrad, p.body, p.bodyStroke),
+      screenStack(c, dims.cx, dims.cy, dims, content),
+      ellipse({ id: `${c.id}-led`, x: panelW / 2 - 26, y: panelH / 2 - 16, anchor: "center", width: 6, height: 6, fill: "#28C840" }),
+      rect({ id: `${c.id}-neck`, x: 0, y: panelH / 2 + 60, anchor: "center", width: 60, height: 120, fill: p.body }),
+      path({ id: `${c.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 })
+    ];
+  },
+  tv: (c, dims, content) => {
+    const p = c.palette;
+    const sw = dims.width, sh = dims.height;
+    const panelW = sw + 44;
+    const panelH = sh + 48;
+    const panelBottom = dims.cy + panelH / 2;
+    return [
+      slab(c, "panel", 0, dims.cy, panelW, panelH, 12, p.bodyGrad, p.body, p.bodyStroke),
+      screenStack(c, dims.cx, dims.cy, dims, content),
+      ellipse({ id: `${c.id}-brand`, x: 0, y: panelBottom - 12, anchor: "center", width: 6, height: 6, fill: p.detail }),
+      rect({ id: `${c.id}-neck`, x: 0, y: panelBottom + 48, anchor: "center", width: 64, height: 96, fill: p.body }),
+      path({ id: `${c.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 })
+    ];
+  },
+  foldable: (c, dims, content) => {
+    const p = c.palette;
+    const sw = dims.width, sh = dims.height;
+    const bodyW = sw + 40;
+    const bodyH = sh + 40;
+    return [
+      rect({ id: `${c.id}-hinge-l`, x: -bodyW / 2, y: 0, anchor: "center", width: 8, height: bodyH * 0.5, fill: p.detail, radius: 4 }),
+      rect({ id: `${c.id}-hinge-r`, x: bodyW / 2, y: 0, anchor: "center", width: 8, height: bodyH * 0.5, fill: p.detail, radius: 4 }),
+      slab(c, "body", 0, 0, bodyW, bodyH, 28, p.bodyGrad, p.body, p.bodyStroke),
+      screenStack(c, dims.cx, dims.cy, dims, content),
+      rect({ id: `${c.id}-crease`, x: 0, y: 0, anchor: "center", width: 4, height: sh, fill: p.bodyStroke, radius: 2, opacity: 0.5 }),
+      ellipse({ id: `${c.id}-cam1`, x: -10, y: -sh / 2 + 18, anchor: "center", width: 8, height: 8, fill: p.detail }),
+      ellipse({ id: `${c.id}-cam2`, x: 10, y: -sh / 2 + 18, anchor: "center", width: 8, height: 8, fill: p.detail })
+    ];
+  },
+  terminal: (c, dims, content) => {
+    const p = c.palette;
+    const sw = dims.width, sh = dims.height;
+    const winW = sw + 16;
+    const winH = sh + 76;
+    return [
+      rect({ id: `${c.id}-win`, x: 0, y: 0, anchor: "center", width: winW, height: winH, fill: premiumFill(c, p.chrome, p.chromeGrad), stroke: bodyStroke(c, p.bodyStroke), strokeWidth: 1.5, radius: 12, ...bodyFx(c) }),
+      ellipse({ id: `${c.id}-dot1`, x: -winW / 2 + 28, y: -winH / 2 + 22, anchor: "center", width: 12, height: 12, fill: "#FF5F57" }),
+      ellipse({ id: `${c.id}-dot2`, x: -winW / 2 + 50, y: -winH / 2 + 22, anchor: "center", width: 12, height: 12, fill: "#FEBC2E" }),
+      ellipse({ id: `${c.id}-dot3`, x: -winW / 2 + 72, y: -winH / 2 + 22, anchor: "center", width: 12, height: 12, fill: "#28C840" }),
+      rect({ id: `${c.id}-tab`, x: -winW / 2 + 170, y: -winH / 2 + 22, anchor: "center", width: 130, height: 24, fill: c.o.screen ?? p.screen, radius: 6 }),
+      text({ id: `${c.id}-title`, x: -winW / 2 + 170, y: -winH / 2 + 22, anchor: "center", content: urlText(c.o.url ?? "zsh"), fontFamily: "Inter", fontSize: 13, fill: p.chromeText }),
+      screenStack(c, dims.cx, dims.cy, dims, content)
+    ];
+  },
+  car: (c, dims, content) => {
+    const p = c.palette;
+    const sw = dims.width, sh = dims.height;
+    const bodyW = sw + 60;
+    const bodyH = sh + 60;
+    return [
+      slab(c, "body", 0, 0, bodyW, bodyH, 40, p.bodyGrad, p.body, p.bodyStroke),
+      ellipse({ id: `${c.id}-knob`, x: -bodyW / 2 + 18, y: 0, anchor: "center", width: 22, height: 22, fill: p.body, stroke: p.detail, strokeWidth: 3 }),
+      screenStack(c, dims.cx, dims.cy, dims, content),
+      ellipse({ id: `${c.id}-btn1`, x: -44, y: sh / 2 + 16, anchor: "center", width: 12, height: 12, fill: p.detail }),
+      ellipse({ id: `${c.id}-btn2`, x: 0, y: sh / 2 + 16, anchor: "center", width: 12, height: 12, fill: p.detail }),
+      ellipse({ id: `${c.id}-btn3`, x: 44, y: sh / 2 + 16, anchor: "center", width: 12, height: 12, fill: p.detail })
+    ];
+  }
 };
+function phoneOrTablet(name, c, dims, content) {
+  const p = c.palette;
+  const sw = dims.width, sh = dims.height;
+  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, c.o);
+  const nodes = [
+    slab(c, "body", 0, 0, bodyW, bodyH, bodyR, p.bodyGrad, p.body, p.bodyStroke),
+    screenStack(c, dims.cx, dims.cy, dims, content)
+  ];
+  if (name === "phone") {
+    if (land) {
+      nodes.push(
+        rect({ id: `${c.id}-notch`, x: -sw / 2 + 16, y: 0, anchor: "center", width: 30, height: 96, fill: "#000000", radius: 15 }),
+        rect({ id: `${c.id}-home`, x: sw / 2 - 4, y: 0, anchor: "center", width: 5, height: 120, fill: p.detail, radius: 3 })
+      );
+    } else {
+      const notch = phoneNotch(c, c.o.notch ?? "island", sh);
+      if (notch) nodes.push(notch);
+      nodes.push(
+        rect({ id: `${c.id}-home`, x: 0, y: sh / 2 - 18, anchor: "center", width: 120, height: 5, fill: p.detail, radius: 3 }),
+        // side hardware: power on the right, volume rocker on the left
+        rect({ id: `${c.id}-pwr`, x: bodyW / 2, y: -bodyH * 0.1, anchor: "center", width: 4, height: 78, fill: p.detail, radius: 2 }),
+        rect({ id: `${c.id}-volup`, x: -bodyW / 2, y: -bodyH * 0.16, anchor: "center", width: 4, height: 48, fill: p.detail, radius: 2 }),
+        rect({ id: `${c.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: `${c.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: `${c.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;
+}
+function devicePreset(name, opts = {}) {
+  const c = makeCtx(opts);
+  const dims = screenDims(name, opts);
+  const children = CHASSIS[name](c, dims, opts.content ?? []);
+  return group(
+    {
+      id: c.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);
+}
 
-// ../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);
+// ../core/src/characterPreset.ts
+var CHARACTER_PRESET_NAMES = ["walk", "run", "jump", "dance", "wave", "cheer"];
+var THIGH = 76;
+var SHIN = 72;
+var clamp013 = (x) => Math.max(0, Math.min(1, x));
+function makeRng4(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 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 } : {}
-      })
-    );
+function ctx3(o) {
+  const rand2 = makeRng4((o.seed ?? 0) + 1);
+  return {
+    g: o.target,
+    label: o.label,
+    e: clamp013(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
   };
-  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;
-    });
+}
+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];
   }
-  return { nodes, glyphs, ids: glyphs.map((g) => g.id), width: total, x, y, fontSize };
+  const u = (p - 0.5) / 0.5;
+  return [-stride + 2 * stride * u, 138 - Math.sin(Math.PI * u) * lift];
 }
-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);
-    }
+function gaitPose(ph, stride, lift, armSwing, facing) {
+  const fl = footPos(ph, stride, lift);
+  const fr = footPos(ph + 0.5, stride, lift);
+  const [hipL, kneeL] = ikReach(THIGH, SHIN, facing * fl[0], fl[1], facing < 0);
+  const [hipR, kneeR] = ikReach(THIGH, SHIN, facing * fr[0], fr[1], facing < 0);
+  const swing = Math.cos(2 * Math.PI * ph);
+  return {
+    legUpperL: round(hipL),
+    legLowerL: round(kneeL),
+    legUpperR: round(hipR),
+    legLowerR: round(kneeR),
+    armUpperR: round(-10 - armSwing * swing),
+    armLowerR: -16,
+    armUpperL: round(10 + armSwing * swing),
+    armLowerL: 16
+  };
+}
+function gait(c, run) {
+  const stride = (run ? 34 : 24) + (run ? 40 : 30) * c.e + c.jit(3);
+  const lift = run ? 40 : 26;
+  const armSwing = (run ? 26 : 16) + 20 * c.e;
+  const halfDur = (run ? 0.26 : 0.42) + c.jit(0.02);
+  const lean = run ? c.facing * -6 : 0;
+  const steps = c.cycles * 2;
+  const d = dur3(halfDur, c.sp);
+  const intro = dur3(0.16, c.sp);
+  const keys = [];
+  for (let k = 0; k <= steps; k++) {
+    const pose = { ...gaitPose(k / 2, stride, lift, armSwing, c.facing), chest: lean };
+    keys.push(poseTo(c.g, pose, { duration: k === 0 ? intro : d, ease: k === 0 ? "easeOutQuad" : "linear" }));
+  }
+  const total = intro + steps * d;
+  const travel = c.travel ?? stride * 2;
+  const children = [seq(...keys)];
+  if (travel !== 0) {
+    children.push(tween(c.g, { x: c.at[0] + c.facing * travel * c.cycles }, { duration: total, ease: "linear", label: "travel" }));
+  }
+  return beat(run ? "run" : "walk", {}, [par(...children)]);
+}
+function jumpBeat(c) {
+  const h = 120 + 150 * c.e;
+  const [y0] = [c.at[1]];
+  const CROUCH = { legUpperL: 18, legLowerL: 54, legUpperR: -18, legLowerR: 54, armUpperL: 28, armUpperR: -28 };
+  const LAUNCH = { legUpperL: 0, legLowerL: 0, legUpperR: 0, legLowerR: 0, armUpperL: 150, armUpperR: -150 };
+  const TUCK = { legUpperL: -28, legLowerL: 66, legUpperR: -28, legLowerR: 66, armUpperL: 124, armUpperR: -124 };
+  const REST = { legUpperL: 3, legLowerL: -2, legUpperR: -3, legLowerR: 2, armUpperL: 10, armLowerL: 8, armUpperR: -10, armLowerR: -8 };
+  const j = c.jit(0.03);
+  return beat("jump", {}, [
+    seq(
+      par(poseTo(c.g, CROUCH, { duration: dur3(0.24, c.sp), ease: "easeOutQuad" }), tween(c.g, { y: y0 + 26 }, { duration: dur3(0.24, c.sp), ease: "easeOutQuad" })),
+      par(poseTo(c.g, LAUNCH, { duration: dur3(0.22 + j, c.sp), ease: "easeOutCubic" }), tween(c.g, { y: y0 - h }, { duration: dur3(0.36, c.sp), ease: "easeOutCubic", label: "launch" })),
+      poseTo(c.g, TUCK, { duration: dur3(0.22, c.sp) }),
+      par(poseTo(c.g, CROUCH, { duration: dur3(0.28, c.sp), ease: "easeInQuad" }), tween(c.g, { y: y0 + 18 }, { duration: dur3(0.3, c.sp), ease: "easeInCubic", label: "land" })),
+      par(poseTo(c.g, REST, { duration: dur3(0.45, c.sp), ease: "easeOutBack" }), tween(c.g, { y: y0 }, { duration: dur3(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 = dur3(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 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 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: dur3(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: dur3(0.22, c.sp), ease: "easeInOutQuad" }));
+  }
+  steps.push(poseTo(c.g, { armUpperR: -10, armLowerR: -8 }, { duration: dur3(0.4, c.sp), ease: "easeInOutCubic" }));
+  return beat("wave", {}, [seq(...steps)]);
 }
-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);
-    }
-  });
+function cheerBeat(c) {
+  const y0 = c.at[1];
+  const UP = { armUpperL: 152, armLowerL: 8, armUpperR: -152, armLowerR: -8 };
+  const d = dur3(0.3, c.sp);
+  const keys = [poseTo(c.g, UP, { duration: dur3(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)]);
 }
-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);
+function characterPreset(name, opts) {
+  const c = ctx3(opts);
+  let tl;
   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" })
-      );
+    case "walk":
+      tl = gait(c, false);
+      break;
+    case "run":
+      tl = gait(c, true);
+      break;
+    case "jump":
+      tl = jumpBeat(c);
+      break;
+    case "dance":
+      tl = danceBeat(c);
+      break;
+    case "wave":
+      tl = waveBeat(c);
+      break;
+    case "cheer":
+      tl = cheerBeat(c);
+      break;
+    default: {
+      const _exhaustive = name;
+      throw new Error(`unknown characterPreset "${_exhaustive}"`);
+    }
   }
+  return c.label && tl.kind === "beat" ? { ...tl, name: c.label } : tl;
 }
-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]);
+
+// ../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 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)
-  }));
+function rrect(a, b, y0, y1, r) {
+  return `M ${n2(-a + r)} ${y0} L ${n2(a - r)} ${y0} Q ${a} ${y0} ${a} ${n2(y0 + r)} L ${b} ${n2(y1 - r)} Q ${b} ${y1} ${n2(b - r)} ${y1} L ${n2(-b + r)} ${y1} Q ${-b} ${y1} ${-b} ${n2(y1 - r)} L ${-a} ${n2(y0 + r)} Q ${-a} ${y0} ${n2(-a + r)} ${y0} Z`;
+}
+function darken(hex, f) {
+  const h = hex.replace("#", "");
+  const v = parseInt(h.length === 3 ? [...h].map((c) => c + c).join("") : h, 16);
+  const ch = (s) => Math.max(0, Math.min(255, Math.round((v >> s & 255) * (1 - f))));
+  const hx = (x) => x.toString(16).padStart(2, "0");
+  return `#${hx(ch(16))}${hx(ch(8))}${hx(ch(0))}`;
+}
+var DEF = {
+  clean: { skin: "#E9B58E", hair: "#2B313F", top: "#E86C4A", pants: "#39425C", shoe: "#20242F", accent: "#E86C4A" },
+  cute: { skin: "#FFD2A6", hair: "#5B4636", top: "#FF7E5F", pants: "#3E6F8E", shoe: "#272B38", accent: "#FF7E5F" }
+};
+function resolvePal(style, p = {}) {
+  const d = DEF[style];
+  const accent = p.accent ?? d.accent;
+  const top = p.top ?? (style === "clean" ? accent : d.top);
+  const skin = p.skin ?? d.skin;
+  const hair = p.hair ?? d.hair;
+  const pants = p.pants ?? d.pants;
+  const shoe = p.shoe ?? d.shoe;
+  return {
+    skin,
+    skinSh: darken(skin, 0.12),
+    hair,
+    hairSh: darken(hair, 0.14),
+    top,
+    topSh: darken(top, 0.12),
+    pants,
+    pantsSh: darken(pants, 0.14),
+    shoe,
+    shoeSh: darken(shoe, 0.22),
+    eye: "#2B313F",
+    cheek: "#FF9E7E",
+    white: "#FFFFFF",
+    mouth: "#8A4233"
+  };
+}
+var fp = (id, d, fill, stroke, sw = 0, opacity = 1) => path({ id, d, x: 0, y: 0, fill, opacity, ...stroke && sw > 0 ? { stroke, strokeWidth: sw } : {} });
+function cleanParts(p, face) {
+  const HC = -42;
+  return {
+    upperArm: (j) => [fp(`${j}-sleeve`, limb(12, 10, 2, 58), p.top)],
+    forearm: (j) => [
+      fp(`${j}-elbow`, ovalPath(10, 10, 0, 3), p.skin),
+      fp(`${j}-fore`, limb(10, 8, 2, 48), p.skin),
+      fp(`${j}-hand`, ovalPath(11, 12, 0, 50), p.skin)
+    ],
+    thigh: (j) => [fp(`${j}-thigh`, limb(15, 13, 2, 72), p.pants)],
+    shin: (j) => [
+      fp(`${j}-knee`, ovalPath(13, 13, 0, 2), p.pants),
+      fp(`${j}-shin`, limb(13, 11, 2, 62), p.pants),
+      fp(`${j}-shoe`, ovalPath(15, 9, 4, 67), p.shoe)
+    ],
+    torso: (j) => [
+      fp(`${j}-shadow`, rrect(38, 26, -28, 52, 20), p.topSh),
+      fp(`${j}-top`, rrect(40, 27, -30, 52, 22), p.top),
+      fp(`${j}-pelvis`, rrect(29, 24, 46, 104, 14), p.pants)
+    ],
+    head: (j) => [
+      fp(`${j}-neck`, rrect(9, 9, 2, 22, 5), p.skin),
+      fp(`${j}-skin`, ovalPath(42, 46, 0, HC), p.skin),
+      fp(`${j}-hair`, ovalPath(44, 27, 0, HC - 31), p.hair),
+      fp(`${j}-hairL`, ovalPath(8, 14, -39, HC - 18), p.hair),
+      fp(`${j}-hairR`, ovalPath(8, 14, 39, HC - 18), p.hair),
+      ...face ? [fp(`${j}-eyeL`, ovalPath(5, 7, -14, HC + 2), p.eye), fp(`${j}-eyeR`, ovalPath(5, 7, 14, HC + 2), p.eye)] : []
+    ]
+  };
+}
+var CUTE_HAIR = "M -64 -54 C -78 -96 -50 -126 0 -126 C 50 -126 78 -96 64 -54 C 60 -34 48 -28 41 -33 C 35 -54 23 -60 9 -60 C 3 -60 -3 -60 -9 -60 C -23 -60 -35 -54 -41 -33 C -48 -28 -60 -34 -64 -54 Z";
+function cuteParts(p, face) {
+  const HC = -50;
+  return {
+    upperArm: (j) => [fp(`${j}-sleeve`, limb(15, 13, 2, 58), p.top, p.topSh, 2.5)],
+    forearm: (j) => [
+      fp(`${j}-elbow`, ovalPath(12, 12, 0, 3), p.skin, p.skinSh, 2.5),
+      fp(`${j}-fore`, limb(12, 10, 2, 46), p.skin, p.skinSh, 2.5),
+      fp(`${j}-hand`, ovalPath(13, 14, 0, 50), p.skin, p.skinSh, 2.5)
+    ],
+    thigh: (j) => [fp(`${j}-thigh`, limb(19, 16, 2, 72), p.pants, p.pantsSh, 2.5)],
+    shin: (j) => [
+      fp(`${j}-knee`, ovalPath(16, 16, 0, 2), p.pants, p.pantsSh, 2.5),
+      fp(`${j}-shin`, limb(15, 12, 2, 60), p.pants, p.pantsSh, 2.5),
+      fp(`${j}-shoe`, ovalPath(18, 11, 5, 66), p.shoe, darken(p.shoe, 0.25), 2.5)
+    ],
+    torso: (j) => [
+      fp(`${j}-shadow`, rrect(40, 34, -18, 52, 16), p.topSh),
+      fp(`${j}-top`, rrect(42, 35, -20, 52, 18), p.top, p.topSh, 2.5),
+      fp(`${j}-pelvis`, rrect(36, 30, 46, 104, 16), p.pants, p.pantsSh, 2.5)
+    ],
+    head: (j) => [
+      fp(`${j}-neck`, ovalPath(15, 12, 0, 12), p.skinSh),
+      fp(`${j}-skin`, ovalPath(42, 46, 0, HC + 4), p.skin, p.skinSh, 2.5),
+      fp(`${j}-cheekL`, ovalPath(11, 8, -40, HC + 22), p.cheek, void 0, 0, 0.5),
+      fp(`${j}-cheekR`, ovalPath(11, 8, 40, HC + 22), p.cheek, void 0, 0, 0.5),
+      fp(`${j}-hair`, CUTE_HAIR, p.hair, p.hairSh, 2),
+      ...face ? [
+        fp(`${j}-eyeL`, ovalPath(10, 13, -25, HC + 8), p.eye),
+        fp(`${j}-eyeR`, ovalPath(10, 13, 25, HC + 8), p.eye),
+        fp(`${j}-glL`, ovalPath(3.4, 3.4, -28, HC + 3), p.white),
+        fp(`${j}-glR`, ovalPath(3.4, 3.4, 22, HC + 3), p.white),
+        path({ id: `${j}-mouth`, d: "M -15 0 Q 0 15 15 0", x: 0, y: HC + 28, fill: "none", stroke: p.mouth, strokeWidth: 5 })
+      ] : []
+    ]
+  };
+}
+function buildSkeleton(id, S) {
+  const arm = (side, x, r1, r2) => ({
+    name: `armUpper${side}`,
+    at: [x, -14],
+    length: 60,
+    width: 0,
+    rotation: r1,
+    shape: S.upperArm(`${id}-armUpper${side}`),
+    children: [{ name: `armLower${side}`, at: [0, 60], length: 56, width: 0, rotation: r2, shape: S.forearm(`${id}-armLower${side}`) }]
+  });
+  const leg = (side, x, r1, r2) => ({
+    name: `legUpper${side}`,
+    at: [x, 76],
+    length: 76,
+    width: 0,
+    rotation: r1,
+    shape: S.thigh(`${id}-legUpper${side}`),
+    children: [{ name: `legLower${side}`, at: [0, 76], length: 72, width: 0, rotation: r2, shape: S.shin(`${id}-legLower${side}`) }]
+  });
+  return {
+    name: "chest",
+    at: [0, 0],
+    shape: S.torso(`${id}-chest`),
+    children: [
+      { name: "head", at: [0, -42], rotation: 0, shape: S.head(`${id}-head`) },
+      arm("L", -40, 8, 6),
+      arm("R", 40, -8, -6),
+      leg("L", -20, 3, -2),
+      leg("R", 20, -3, 2)
+    ]
+  };
+}
+function figure(opts = {}) {
+  const style = opts.style ?? "clean";
+  const pal = resolvePal(style, opts.palette);
+  const face = opts.face ?? true;
+  const id = opts.id ?? "figure";
+  const parts = style === "clean" ? cleanParts(pal, face) : cuteParts(pal, face);
+  const rigOpts = { id };
+  if (opts.x !== void 0) rigOpts.x = opts.x;
+  if (opts.y !== void 0) rigOpts.y = opts.y;
+  if (opts.scale !== void 0) rigOpts.scale = opts.scale;
+  if (opts.opacity !== void 0) rigOpts.opacity = opts.opacity;
+  return rig(buildSkeleton(id, parts), rigOpts);
 }
 
 // ../core/src/motionOps.ts
@@ -3536,13 +3951,14 @@ var SFX_DURATION = {
   camera: 0.18
 };
 var FILE_CUE_DURATION = 0.4;
-function collectClipAudio(ir, duration, warnings) {
+function collectClipAudio(ir, duration, labelTimes, 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;
+        const startRaw = node.props.start;
+        const start = typeof startRaw === "string" ? labelTimes.get(startRaw)?.t0 ?? 0 : startRaw ?? 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`);
@@ -3560,7 +3976,7 @@ function resolveAudioPlan(compiled) {
   const audio = compiled.ir.audio;
   const warnings = [];
   const duration = compiled.duration;
-  const clipAudio = collectClipAudio(compiled.ir, duration, warnings);
+  const clipAudio = collectClipAudio(compiled.ir, duration, compiled.labelTimes, warnings);
   const autoCues = audio?.autoFoley ? autoFoley(compiled, audio.autoFoley === true ? {} : audio.autoFoley) : [];
   const manualCues = [...audio?.cues ?? [], ...autoCues];
   if (!audio || !audio.bgm && manualCues.length === 0) {
@@ -3799,6 +4215,7 @@ export {
   SFX_DURATION,
   SFX_NAMES,
   SceneValidationError,
+  TIMELINE_PATCHABLE,
   autoFoley,
   beat,
   cameraFit,
@@ -3839,6 +4256,8 @@ export {
   lerpValue,
   line,
   linearGradient,
+  lintScene,
+  lowerThird,
   motionOp,
   motionOpLabel,
   motionPath,
@@ -3863,6 +4282,7 @@ export {
   sampleBehavior,
   sampleProp,
   scene,
+  sceneManifest,
   seq,
   sketchToTimeline,
   splitText,
@@ -3872,6 +4292,7 @@ export {
   textLoop,
   textOut,
   textTypeCues,
+  title,
   to,
   tween,
   validateComposition,