onda-engine 0.1.0

package/dist/react.js

@@ -0,0 +1,2052 @@
+import * as flubberNs from 'flubber';
+import { createContext, Children, isValidElement, createElement, Fragment, useContext } from 'react';
+import Reconciler from 'react-reconciler';
+import { DefaultEventPriority } from 'react-reconciler/constants.js';
+
+// ../react/src/interpolate.ts
+var Easing = {
+  linear: (t) => t,
+  // Remotion-named curves (drop-in for `Easing.quad`/`.cubic`/`.sin`/`.ease`).
+  quad: (t) => t * t,
+  cubic: (t) => t * t * t,
+  sin: (t) => 1 - Math.cos(t * Math.PI / 2),
+  ease: cubicBezier(0.42, 0, 1, 1),
+  easeInQuad: (t) => t * t,
+  easeOutQuad: (t) => 1 - (1 - t) * (1 - t),
+  easeInOutQuad: (t) => t < 0.5 ? 2 * t * t : 1 - (-2 * t + 2) ** 2 / 2,
+  easeInCubic: (t) => t ** 3,
+  easeOutCubic: (t) => 1 - (1 - t) ** 3,
+  easeInOutCubic: (t) => t < 0.5 ? 4 * t ** 3 : 1 - (-2 * t + 2) ** 3 / 2,
+  smoothStep: (t) => t * t * (3 - 2 * t),
+  easeInBack: (t) => 2.70158 * t ** 3 - 1.70158 * t ** 2,
+  easeOutBack: (t) => 1 + 2.70158 * (t - 1) ** 3 + 1.70158 * (t - 1) ** 2,
+  /** CSS cubic-bézier factory — Remotion's `Easing.bezier(x1,y1,x2,y2)`. */
+  bezier: (x1, y1, x2, y2) => cubicBezier(x1, y1, x2, y2)
+};
+function cubicBezier(x1, y1, x2, y2) {
+  const comp = (c1, c2, s) => {
+    const u = 1 - s;
+    return 3 * u * u * s * c1 + 3 * u * s * s * c2 + s * s * s;
+  };
+  const deriv = (c1, c2, s) => {
+    const u = 1 - s;
+    return 3 * u * u * c1 + 6 * u * s * (c2 - c1) + 3 * s * s * (1 - c2);
+  };
+  return (x) => {
+    let s = x;
+    for (let i = 0; i < 8; i++) {
+      const dx = comp(x1, x2, s) - x;
+      if (Math.abs(dx) < 1e-5) break;
+      const d = deriv(x1, x2, s);
+      if (Math.abs(d) < 1e-6) break;
+      s -= dx / d;
+    }
+    return comp(y1, y2, Math.min(1, Math.max(0, s)));
+  };
+}
+function interpolate(input, inputRange, outputRange, options = {}) {
+  if (inputRange.length < 2 || inputRange.length !== outputRange.length) {
+    throw new Error("interpolate: inputRange and outputRange must be the same length (>= 2)");
+  }
+  const { easing = Easing.linear, extrapolateLeft = "clamp", extrapolateRight = "clamp" } = options;
+  const last = inputRange.length - 1;
+  if (input <= at(inputRange, 0)) {
+    if (extrapolateLeft === "clamp") return at(outputRange, 0);
+    return segment(input, inputRange, outputRange, 0, easing);
+  }
+  if (input >= at(inputRange, last)) {
+    if (extrapolateRight === "clamp") return at(outputRange, last);
+    return segment(input, inputRange, outputRange, last - 1, easing);
+  }
+  let i = 0;
+  while (i < last - 1 && input >= at(inputRange, i + 1)) i++;
+  return segment(input, inputRange, outputRange, i, easing);
+}
+function at(arr, i) {
+  const value = arr[i];
+  if (value === void 0) throw new Error(`interpolate: index ${i} out of range`);
+  return value;
+}
+function segment(input, inputRange, outputRange, i, easing) {
+  const x0 = at(inputRange, i);
+  const x1 = at(inputRange, i + 1);
+  const y0 = at(outputRange, i);
+  const y1 = at(outputRange, i + 1);
+  const span = x1 - x0;
+  const t = span === 0 ? 0 : (input - x0) / span;
+  return y0 + (y1 - y0) * easing(t);
+}
+
+// ../react/src/color.ts
+function parseColor(input) {
+  if (input === "none" || input === "transparent") return { r: 0, g: 0, b: 0, a: 0 };
+  if (typeof input !== "string") {
+    if (input == null || typeof input !== "object" || typeof input.r !== "number" || typeof input.g !== "number" || typeof input.b !== "number") {
+      throw new Error(
+        `invalid color ${JSON.stringify(input)}: expected a hex string or a {r,g,b} object with numeric 0..1 channels`
+      );
+    }
+    return { r: input.r, g: input.g, b: input.b, ...input.a !== void 0 ? { a: input.a } : {} };
+  }
+  let hex = input.trim().replace(/^#/, "");
+  if (hex.length === 3 || hex.length === 4) {
+    hex = hex.split("").map((c) => c + c).join("");
+  }
+  if (hex.length !== 6 && hex.length !== 8 || !/^[0-9a-fA-F]+$/.test(hex)) {
+    throw new Error(`invalid color '${input}': expected #rgb, #rgba, #rrggbb, or #rrggbbaa`);
+  }
+  const channel = (i) => Number.parseInt(hex.slice(i, i + 2), 16) / 255;
+  const color = { r: channel(0), g: channel(2), b: channel(4) };
+  if (hex.length === 8) color.a = channel(6);
+  return color;
+}
+var clamp01 = (v) => v < 0 ? 0 : v > 1 ? 1 : v;
+var toHex = (v) => Math.round(clamp01(v) * 255).toString(16).padStart(2, "0");
+function interpolateColors(input, inputRange, outputRange, options = {}) {
+  const colors = outputRange.map(parseColor);
+  const mix = (sel) => interpolate(input, inputRange, colors.map(sel), options);
+  const hasAlpha = colors.some((c) => c.a !== void 0 && c.a < 1);
+  const rgb = `${toHex(mix((c) => c.r))}${toHex(mix((c) => c.g))}${toHex(mix((c) => c.b))}`;
+  return `#${rgb}${hasAlpha ? toHex(mix((c) => c.a ?? 1)) : ""}`;
+}
+
+// ../react/src/clip.ts
+function parseClip(input) {
+  switch (input.type) {
+    case "rect":
+      return {
+        shape: "rect",
+        size: { width: input.width, height: input.height },
+        ...input.cornerRadius != null ? { corner_radius: input.cornerRadius } : {}
+      };
+    case "ellipse":
+      return { shape: "ellipse", size: { width: input.width, height: input.height } };
+    case "path":
+      return { shape: "path", data: input.d };
+  }
+}
+function clipRect(width, height, cornerRadius) {
+  return { type: "rect", width, height, cornerRadius };
+}
+function clipEllipse(width, height) {
+  return { type: "ellipse", width, height };
+}
+function clipPath(d) {
+  return { type: "path", d };
+}
+
+// ../react/src/gradient.ts
+function toVec2(point) {
+  return Array.isArray(point) ? { x: point[0], y: point[1] } : point;
+}
+function stops(input) {
+  return input.map((s) => ({ offset: s.offset, color: parseColor(s.color) }));
+}
+function parseGradient(input) {
+  if (input.type === "linear") {
+    return {
+      gradient: "linear",
+      start: toVec2(input.start),
+      end: toVec2(input.end),
+      stops: stops(input.stops)
+    };
+  }
+  if (input.type === "fbm") {
+    return {
+      gradient: "fbm",
+      stops: stops(input.stops),
+      scale: input.scale ?? 1,
+      time: input.time ?? 0,
+      warp: input.warp ?? 0.5
+    };
+  }
+  return {
+    gradient: "radial",
+    center: toVec2(input.center),
+    radius: input.radius,
+    stops: stops(input.stops)
+  };
+}
+function linearGradient(start, end, stops2) {
+  return { type: "linear", start, end, stops: stops2 };
+}
+function radialGradient(center, radius, stops2) {
+  return { type: "radial", center, radius, stops: stops2 };
+}
+function fbmGradient(stops2, opts = {}) {
+  return { type: "fbm", stops: stops2, ...opts };
+}
+var flubberResolved = flubberNs;
+var flubberInterpolate = flubberResolved.interpolate ?? flubberResolved.default?.interpolate;
+var clamp012 = (t) => t < 0 ? 0 : t > 1 ? 1 : t;
+var cache = /* @__PURE__ */ new Map();
+function interpolator(from, to, opts) {
+  const maxSegmentLength = opts.maxSegmentLength ?? 2;
+  const key = `${from}\0${to}\0${maxSegmentLength}`;
+  let interp = cache.get(key);
+  if (!interp) {
+    interp = flubberInterpolate(from, to, { maxSegmentLength });
+    cache.set(key, interp);
+  }
+  return interp;
+}
+function morphPath(from, to, t, options = {}) {
+  return interpolator(from, to, options)(clamp012(t));
+}
+function morphPathSequence(shapes, t, options = {}) {
+  const first = shapes[0];
+  if (first === void 0) return "";
+  if (shapes.length === 1) return first;
+  const tt = clamp012(t);
+  const segments = shapes.length - 1;
+  const scaled = tt * segments;
+  const i = Math.min(segments - 1, Math.floor(scaled));
+  return interpolator(shapes[i], shapes[i + 1], options)(scaled - i);
+}
+var FrameContext = createContext(null);
+function useFrameState(hook) {
+  const state = useContext(FrameContext);
+  if (state === null) {
+    throw new Error(
+      `${hook} must be called inside a <Composition> rendered by renderFrame/renderFrames`
+    );
+  }
+  return state;
+}
+function useCurrentFrame() {
+  return useFrameState("useCurrentFrame").frame;
+}
+function useVideoConfig() {
+  const { width, height, fps, durationInFrames } = useFrameState("useVideoConfig");
+  return { width, height, fps, durationInFrames };
+}
+
+// ../react/src/components.ts
+function Composition(props) {
+  return createElement("onda-composition", props);
+}
+function Group(props) {
+  return createElement("onda-group", props);
+}
+function Repeater({
+  count,
+  offsetX = 0,
+  offsetY = 0,
+  rotation = 0,
+  scale = 1,
+  originX = 0,
+  originY = 0,
+  startOpacity = 1,
+  endOpacity = 1,
+  children
+}) {
+  const n = Math.max(1, Math.floor(count));
+  const opacityAt = (i) => startOpacity + (endOpacity - startOpacity) * (n > 1 ? i / (n - 1) : 0);
+  const buildLevel = (level) => {
+    if (level >= n) return null;
+    const copy = createElement(Group, { key: "copy", opacity: opacityAt(level) }, children);
+    const deeper = buildLevel(level + 1);
+    const transform = level === 0 ? {} : { x: offsetX, y: offsetY, rotation, scaleX: scale, scaleY: scale, originX, originY };
+    return createElement(Group, { key: level, ...transform }, copy, deeper);
+  };
+  return buildLevel(0) ?? createElement(Group, null);
+}
+function Merge(props) {
+  return createElement("onda-boolean", props);
+}
+function Precomp(props) {
+  const effects = [{ effect: "isolate" }, ...props.effects ?? []];
+  return createElement(Group, { ...props, effects });
+}
+function Flex(props) {
+  const { direction, justify, align, gap, padding, wrap, width, height, ...rest } = props;
+  const layout = { direction, justify, align, gap, padding, wrap, width, height };
+  return createElement("onda-group", { ...rest, layout });
+}
+function Center(props) {
+  const { children, y, height, ...rest } = props;
+  const { width } = useVideoConfig();
+  return createElement(
+    Flex,
+    {
+      ...rest,
+      x: 0,
+      y: y ?? 0,
+      width,
+      ...height !== void 0 ? { height } : {},
+      justify: "center",
+      align: "center"
+    },
+    children
+  );
+}
+function AbsoluteFill(props) {
+  const { width, height } = useVideoConfig();
+  return Flex({ direction: "column", ...props, width, height });
+}
+function Camera(props) {
+  const { children, focusX, focusY, zoom: zoom2 = 1, rotate = 0, viewportWidth, viewportHeight } = props;
+  const { width, height } = useVideoConfig();
+  const vw = viewportWidth ?? width;
+  const vh = viewportHeight ?? height;
+  const fx = focusX ?? vw / 2;
+  const fy = focusY ?? vh / 2;
+  return createElement(
+    Group,
+    { x: vw / 2, y: vh / 2 },
+    createElement(
+      Group,
+      { rotation: rotate, scaleX: zoom2, scaleY: zoom2, originX: 0, originY: 0 },
+      createElement(Group, { x: -fx, y: -fy }, children)
+    )
+  );
+}
+function Scene3D(props) {
+  const { camera, children, ...rest } = props;
+  return createElement("onda-group", { ...rest, camera3d: camera ?? {} }, children);
+}
+function Rect(props) {
+  return createElement("onda-rect", props);
+}
+function Ellipse(props) {
+  return createElement("onda-ellipse", props);
+}
+function Path(props) {
+  return createElement("onda-path", props);
+}
+function Text(props) {
+  return createElement("onda-text", props);
+}
+function Image(props) {
+  return createElement("onda-image", props);
+}
+function Video({ startFrom = 0, playbackRate = 1, endAt, loop, ...rest }) {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  let time = startFrom + frame / Math.max(1, fps) * playbackRate;
+  if (endAt != null && endAt > startFrom) {
+    const span = endAt - startFrom;
+    time = loop ? startFrom + ((time - startFrom) % span + span) % span : Math.min(time, endAt);
+  }
+  return createElement("onda-video", { ...rest, time: Math.max(0, time) });
+}
+function Audio(props) {
+  return createElement("onda-audio", props);
+}
+function Svg(props) {
+  return createElement("onda-svg", props);
+}
+
+// ../react/src/spring.ts
+function stableStep(mass, stiffness, damping) {
+  const omega = Math.max(damping / mass, Math.sqrt(stiffness / mass), 1e-6);
+  return Math.min(1 / 60, 1.6 / omega);
+}
+function positionAt(timeSec, mass, stiffness, damping, dt) {
+  if (timeSec <= 0) return 0;
+  const steps = Math.max(1, Math.round(timeSec / dt));
+  let position = 0;
+  let velocity = 0;
+  for (let i = 0; i < steps; i++) {
+    const force = -stiffness * (position - 1) - damping * velocity;
+    velocity += force / mass * dt;
+    position += velocity * dt;
+  }
+  return position;
+}
+var settleCache = /* @__PURE__ */ new Map();
+function measureSettleSeconds(mass, stiffness, damping, dt, threshold) {
+  const key = `${mass}|${stiffness}|${damping}|${dt}|${threshold}`;
+  const cached = settleCache.get(key);
+  if (cached !== void 0) return cached;
+  let position = 0;
+  let velocity = 0;
+  const maxSteps = 5e6;
+  let result = maxSteps * dt;
+  for (let i = 0; i < maxSteps; i++) {
+    const force = -stiffness * (position - 1) - damping * velocity;
+    velocity += force / mass * dt;
+    position += velocity * dt;
+    if (Math.abs(1 - position) < threshold && Math.abs(velocity) < threshold) {
+      result = (i + 1) * dt;
+      break;
+    }
+  }
+  settleCache.set(key, result);
+  return result;
+}
+function spring({
+  frame,
+  fps,
+  from = 0,
+  to = 1,
+  config = {},
+  durationInFrames,
+  durationRestThreshold = 5e-3
+}) {
+  const { mass = 1, stiffness = 100, damping = 10 } = config;
+  let position = 0;
+  if (fps > 0 && frame > 0) {
+    const dt = stableStep(mass, stiffness, damping);
+    let timeSec = frame / fps;
+    if (durationInFrames != null && durationInFrames > 0) {
+      const naturalSec = measureSettleSeconds(mass, stiffness, damping, dt, durationRestThreshold);
+      const durationSec = durationInFrames / fps;
+      timeSec = Math.min(frame / fps * (naturalSec / durationSec), naturalSec);
+    }
+    position = positionAt(timeSec, mass, stiffness, damping, dt);
+  }
+  return from + (to - from) * position;
+}
+function Sequence({
+  from = 0,
+  durationInFrames,
+  children
+}) {
+  const ctx = useContext(FrameContext);
+  if (!ctx) return null;
+  const local = ctx.frame - from;
+  const visible = local >= 0 && (durationInFrames === void 0 || local < durationInFrames);
+  if (!visible) return null;
+  const value = durationInFrames === void 0 ? { ...ctx, frame: local } : { ...ctx, frame: local, durationInFrames };
+  return createElement(FrameContext.Provider, { value }, children);
+}
+function Loop({ durationInFrames, children }) {
+  const ctx = useContext(FrameContext);
+  if (!ctx || durationInFrames <= 0) return null;
+  const local = (ctx.frame % durationInFrames + durationInFrames) % durationInFrames;
+  return createElement(FrameContext.Provider, { value: { ...ctx, frame: local } }, children);
+}
+function SeriesSequence(_props) {
+  return null;
+}
+function SeriesRoot({ children }) {
+  let offset = 0;
+  const items = Children.map(children, (child) => {
+    if (!isValidElement(child) || child.type !== SeriesSequence) {
+      throw new Error("<Series> children must be <Series.Sequence>");
+    }
+    const props = child.props;
+    const element = createElement(
+      Sequence,
+      { from: offset, durationInFrames: props.durationInFrames },
+      props.children
+    );
+    offset += props.durationInFrames;
+    return element;
+  });
+  return createElement(Fragment, null, items);
+}
+var Series = Object.assign(SeriesRoot, { Sequence: SeriesSequence });
+
+// ../react/src/random.ts
+function hashSeed(seed) {
+  if (typeof seed === "number") {
+    let h2 = Math.imul(seed ^ seed >>> 16, 2246822507) >>> 0;
+    h2 = Math.imul(h2 ^ h2 >>> 13, 3266489909) >>> 0;
+    return (h2 ^ h2 >>> 16) >>> 0;
+  }
+  let h = 2166136261 >>> 0;
+  for (let i = 0; i < seed.length; i++) {
+    h ^= seed.charCodeAt(i);
+    h = Math.imul(h, 16777619) >>> 0;
+  }
+  return h >>> 0;
+}
+function variantSeed(seed, variant) {
+  if (!variant) return seed;
+  let h = (hashSeed(seed) ^ Math.imul(variant | 0, 2654435769)) >>> 0;
+  h = Math.imul(h ^ h >>> 13, 3266489909) >>> 0;
+  return (h ^ h >>> 16) >>> 0;
+}
+function random(seed) {
+  let a = hashSeed(seed);
+  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 hashUnit(s, ...coords) {
+  let h = (s ^ 2654435769) >>> 0;
+  for (const c of coords) {
+    h ^= c | 0;
+    h = Math.imul(h, 16777619) >>> 0;
+    h ^= h >>> 13;
+  }
+  h = Math.imul(h ^ h >>> 15, 2246822507) >>> 0;
+  return (h >>> 0) / 4294967296;
+}
+function fade(t) {
+  return t * t * t * (t * (t * 6 - 15) + 10);
+}
+function lerp(a, b, t) {
+  return a + (b - a) * t;
+}
+function noise2D(seed, x, y) {
+  const s = hashSeed(seed);
+  const ix = Math.floor(x);
+  const iy = Math.floor(y);
+  const fx = x - ix;
+  const fy = y - iy;
+  const u = fade(fx);
+  const v = fade(fy);
+  const n = lerp(
+    lerp(hashUnit(s, ix, iy), hashUnit(s, ix + 1, iy), u),
+    lerp(hashUnit(s, ix, iy + 1), hashUnit(s, ix + 1, iy + 1), u),
+    v
+  );
+  return n * 2 - 1;
+}
+function noise3D(seed, x, y, z) {
+  const s = hashSeed(seed);
+  const ix = Math.floor(x);
+  const iy = Math.floor(y);
+  const iz = Math.floor(z);
+  const u = fade(x - ix);
+  const v = fade(y - iy);
+  const w = fade(z - iz);
+  const c = (dx, dy, dz) => hashUnit(s, ix + dx, iy + dy, iz + dz);
+  const front = lerp(lerp(c(0, 0, 0), c(1, 0, 0), u), lerp(c(0, 1, 0), c(1, 1, 0), u), v);
+  const back = lerp(lerp(c(0, 0, 1), c(1, 0, 1), u), lerp(c(0, 1, 1), c(1, 1, 1), u), v);
+  return lerp(front, back, w) * 2 - 1;
+}
+var lerp2 = (a, b, t) => a + (b - a) * t;
+function Particles({
+  count = 60,
+  seed = 1,
+  x = 0,
+  y = 0,
+  spawnRadius = 0,
+  speed = 4,
+  speedVariance = 0.5,
+  angle = -90,
+  spread = 360,
+  gravity = 0,
+  lifetime = 60,
+  emitOver = 0,
+  loop = false,
+  delay = 0,
+  shape = "circle",
+  size = 8,
+  opacity = [1, 0],
+  colors = ["#e85494", "#ffd36b", "#5ad1ff"],
+  spin = 0
+}) {
+  const frame = useCurrentFrame();
+  const key = String(seed);
+  const [s0, s1] = typeof size === "number" ? [size, size] : size;
+  const particles = [];
+  for (let i = 0; i < count; i++) {
+    const r = (suffix) => random(`${key}-${i}-${suffix}`);
+    const emitFrame = delay + (emitOver > 0 ? i / count * emitOver : 0);
+    let age = frame - emitFrame;
+    if (loop && age >= 0) age %= lifetime;
+    if (age < 0 || age >= lifetime) continue;
+    const sa = r("sa") * Math.PI * 2;
+    const sr = Math.sqrt(r("sr")) * spawnRadius;
+    const ox = x + Math.cos(sa) * sr;
+    const oy = y + Math.sin(sa) * sr;
+    const dir = (angle + (r("ang") - 0.5) * spread) * Math.PI / 180;
+    const spd = speed * (1 - speedVariance * r("spd"));
+    const vx = Math.cos(dir) * spd;
+    const vy = Math.sin(dir) * spd;
+    const px = ox + vx * age;
+    const py = oy + vy * age + 0.5 * gravity * age * age;
+    const t = age / lifetime;
+    const sz = lerp2(s0, s1, t);
+    const op = lerp2(opacity[0], opacity[1], t);
+    const color = colors[Math.floor(r("col") * colors.length) % colors.length];
+    const inner = shape === "square" ? createElement(Rect, { x: -sz / 2, y: -sz / 2, width: sz, height: sz, fill: color }) : createElement(Ellipse, { x: -sz / 2, y: -sz / 2, width: sz, height: sz, fill: color });
+    particles.push(
+      createElement(
+        Group,
+        { key: i, x: px, y: py, opacity: op, rotation: spin * t, originX: 0, originY: 0 },
+        inner
+      )
+    );
+  }
+  return createElement(Group, null, ...particles);
+}
+function linearTiming({ durationInFrames }) {
+  return {
+    durationInFrames,
+    getProgress: (frame) => durationInFrames <= 0 ? 1 : Math.min(1, Math.max(0, frame / durationInFrames))
+  };
+}
+function springTiming({
+  durationInFrames = 30,
+  config
+} = {}) {
+  return {
+    durationInFrames,
+    getProgress: (frame, fps) => Math.max(0, spring({ frame, fps, config }))
+  };
+}
+function fade2() {
+  return (children, { progress, entering }) => createElement(Group, { opacity: entering ? progress : 1 - progress }, children);
+}
+function slide({
+  direction = "from-right"
+} = {}) {
+  return (children, { progress, entering, width, height }) => {
+    const axisX = direction === "from-left" || direction === "from-right";
+    const span = axisX ? width : height;
+    const sign = direction === "from-right" || direction === "from-bottom" ? 1 : -1;
+    const offset = entering ? (1 - progress) * span * sign : -progress * span * sign;
+    const props = axisX ? { x: offset } : { y: offset };
+    return createElement(Group, props, children);
+  };
+}
+function wipe({
+  direction = "from-left"
+} = {}) {
+  return (children, { progress, entering, width, height }) => {
+    if (!entering) {
+      const fade3 = Math.max(0, 1 - progress / 0.6);
+      return createElement(Group, { opacity: fade3 }, children);
+    }
+    const p = Math.min(1, Math.max(0, progress));
+    switch (direction) {
+      case "from-left":
+        return createElement(Group, { clip: clipRect(width * p, height) }, children);
+      case "from-top":
+        return createElement(Group, { clip: clipRect(width, height * p) }, children);
+      case "from-right": {
+        const w = width * p;
+        return createElement(
+          Group,
+          { x: width - w },
+          createElement(Group, { x: -(width - w), clip: clipRect(w, height) }, children)
+        );
+      }
+      case "from-bottom": {
+        const h = height * p;
+        return createElement(
+          Group,
+          { y: height - h },
+          createElement(Group, { y: -(height - h), clip: clipRect(width, h) }, children)
+        );
+      }
+    }
+  };
+}
+function none() {
+  return (children) => createElement(Group, {}, children);
+}
+function scaleAbout(children, sx, sy, px, py) {
+  return createElement(
+    Group,
+    { x: px, y: py },
+    createElement(
+      Group,
+      { scaleX: sx, scaleY: sy },
+      createElement(Group, { x: -px, y: -py }, children)
+    )
+  );
+}
+function flip() {
+  return (children, { progress, entering, width, height }) => {
+    const sx = entering ? Math.max(0, progress * 2 - 1) : Math.max(0, 1 - progress * 2);
+    return scaleAbout(children, sx, 1, width / 2, height / 2);
+  };
+}
+var round = (n) => Math.round(n * 1e3) / 1e3;
+function iris() {
+  return (children, { progress, entering, width, height }) => {
+    if (!entering || progress >= 1) return createElement(Group, {}, children);
+    if (progress <= 0) return createElement(Group, { opacity: 0 }, children);
+    const cx = width / 2;
+    const cy = height / 2;
+    const r = progress * Math.hypot(cx, cy);
+    return createElement(
+      Group,
+      { x: cx - r, y: cy - r, clip: clipEllipse(2 * r, 2 * r) },
+      createElement(Group, { x: -(cx - r), y: -(cy - r) }, children)
+    );
+  };
+}
+function clockWipe() {
+  return (children, { progress, entering, width, height }) => {
+    if (!entering || progress >= 1) return createElement(Group, {}, children);
+    if (progress <= 0) return createElement(Group, { opacity: 0 }, children);
+    const cx = width / 2;
+    const cy = height / 2;
+    const r = Math.hypot(cx, cy);
+    const theta = progress * Math.PI * 2;
+    const steps = Math.max(2, Math.ceil(theta / (Math.PI * 2) * 64));
+    let d = `M ${round(cx)} ${round(cy)}`;
+    for (let i = 0; i <= steps; i++) {
+      const a = theta * i / steps;
+      d += ` L ${round(cx + r * Math.sin(a))} ${round(cy - r * Math.cos(a))}`;
+    }
+    d += " Z";
+    return createElement(Group, { clip: clipPath(d) }, children);
+  };
+}
+var PUSH_VECTOR = {
+  left: { x: -1, y: 0 },
+  right: { x: 1, y: 0 },
+  up: { x: 0, y: -1 },
+  down: { x: 0, y: 1 }
+};
+function push({
+  direction = "left"
+} = {}) {
+  return (children, { progress, entering, width, height }) => {
+    const { x, y } = PUSH_VECTOR[direction];
+    const tx = (entering ? -x * (1 - progress) : x * progress) * width;
+    const ty = (entering ? -y * (1 - progress) : y * progress) * height;
+    return createElement(Group, { x: tx, y: ty }, children);
+  };
+}
+function zoom({
+  direction = "in",
+  scaleAmount = 0.2
+} = {}) {
+  return (children, { progress, entering, width, height }) => {
+    const s = scaleAmount;
+    let scale;
+    if (direction === "in") {
+      scale = entering ? 1 + s / 2 - s / 2 * progress : 1 + s * progress;
+    } else {
+      scale = entering ? 1 - s / 2 + s / 2 * progress : 1 - s * progress;
+    }
+    const opacity = entering ? progress : 1 - progress;
+    return createElement(
+      Group,
+      { opacity },
+      scaleAbout(children, scale, scale, width / 2, height / 2)
+    );
+  };
+}
+function depthPush({
+  direction = "left",
+  scaleAmount = 0.08
+} = {}) {
+  return (children, { progress, entering, width, height }) => {
+    const { x, y } = PUSH_VECTOR[direction];
+    const tx = (entering ? -x * (1 - progress) : x * progress) * width;
+    const ty = (entering ? -y * (1 - progress) : y * progress) * height;
+    const scale = entering ? 1 + scaleAmount * (1 - progress) : 1 - scaleAmount * progress;
+    return createElement(
+      Group,
+      { x: tx, y: ty },
+      scaleAbout(children, scale, scale, width / 2, height / 2)
+    );
+  };
+}
+function dipToColor({ color = "#08080a" } = {}) {
+  return (children, { progress, entering, width, height }) => {
+    const sceneOpacity = entering ? Math.max(0, progress * 2 - 1) : Math.max(0, 1 - progress * 2);
+    const colorOpacity = entering ? Math.max(0, 1 - (progress - 0.5) * 2) : Math.min(1, progress * 2);
+    return createElement(
+      Group,
+      null,
+      createElement(Group, { opacity: sceneOpacity }, children),
+      createElement(
+        Group,
+        { opacity: colorOpacity },
+        createElement(Rect, { width, height, fill: color })
+      )
+    );
+  };
+}
+var BLUR_RING = [
+  [0, 0],
+  [1, 0],
+  [-1, 0],
+  [0, 1],
+  [0, -1],
+  [0.7, 0.7],
+  [-0.7, 0.7],
+  [0.7, -0.7],
+  [-0.7, -0.7]
+];
+function blurStack(children, radius) {
+  if (radius <= 0.5) return createElement(Group, {}, children);
+  const op = 1 / BLUR_RING.length;
+  return createElement(
+    Group,
+    {},
+    ...BLUR_RING.map(
+      ([dx, dy], i) => createElement(Group, { key: i, x: dx * radius, y: dy * radius, opacity: op }, children)
+    )
+  );
+}
+function blur({ maxBlur = 24 } = {}) {
+  return (children, { progress, entering }) => {
+    const sharp = entering ? progress : 1 - progress;
+    return createElement(
+      Group,
+      { opacity: entering ? progress : 1 - progress },
+      blurStack(children, (1 - sharp) * maxBlur)
+    );
+  };
+}
+function directionalSmear(children, dx, dy, radius) {
+  if (radius <= 0.5) return createElement(Group, {}, children);
+  const N = 6;
+  const op = 1 / N;
+  return createElement(
+    Group,
+    {},
+    ...Array.from({ length: N }, (_, i) => {
+      const t = (i / (N - 1) - 0.5) * 2;
+      return createElement(
+        Group,
+        { key: i, x: dx * t * radius, y: dy * t * radius, opacity: op },
+        children
+      );
+    })
+  );
+}
+function zoomBlur({
+  direction = "in",
+  scaleAmount = 0.35,
+  maxBlur = 28
+} = {}) {
+  return (children, { progress, entering, width, height }) => {
+    const s = scaleAmount;
+    const dirSign = direction === "in" ? 1 : -1;
+    const scale = entering ? 1 + dirSign * s * (1 - progress) : 1 + dirSign * s * progress;
+    const sharp = entering ? progress : 1 - progress;
+    const opacity = entering ? progress : 1 - progress;
+    return createElement(
+      Group,
+      { opacity },
+      scaleAbout(blurStack(children, (1 - sharp) * maxBlur), scale, scale, width / 2, height / 2)
+    );
+  };
+}
+function whipPan({
+  direction = "left",
+  maxBlur = 40
+} = {}) {
+  return (children, { progress, entering, width, height }) => {
+    const { x, y } = PUSH_VECTOR[direction];
+    const tx = (entering ? -x * (1 - progress) : x * progress) * width;
+    const ty = (entering ? -y * (1 - progress) : y * progress) * height;
+    const sharp = entering ? progress : 1 - progress;
+    return createElement(
+      Group,
+      { x: tx, y: ty },
+      directionalSmear(children, x, y, (1 - sharp) * maxBlur)
+    );
+  };
+}
+function filmBurn({ color = "#ffb070" } = {}) {
+  return (children, { progress, entering, width, height }) => {
+    const sceneOpacity = entering ? progress : 1 - progress;
+    const burn = Math.sin(Math.min(1, Math.max(0, progress)) * Math.PI);
+    const scene = createElement(Group, { opacity: sceneOpacity }, children);
+    if (!entering) return scene;
+    const leak = createElement(
+      Group,
+      { opacity: burn * 0.85, blendMode: "screen" },
+      createElement(Rect, {
+        width,
+        height,
+        gradient: radialGradient([width * 0.72, height * 0.28], Math.max(width, height) * 0.95, [
+          { offset: 0, color },
+          { offset: 0.45, color: "#7a3a12" },
+          { offset: 1, color: "#000000" }
+        ])
+      })
+    );
+    return createElement(Group, null, scene, leak);
+  };
+}
+function lumaWipe() {
+  return (children, { progress, entering, width, height }) => {
+    if (!entering) {
+      return createElement(Group, { opacity: Math.max(0, 1 - progress / 0.7) }, children);
+    }
+    const p = Math.min(1, Math.max(0, progress));
+    const feather = 0.22;
+    const lead = p * (1 + feather);
+    const matte = createElement(Rect, {
+      width,
+      height,
+      gradient: linearGradient(
+        [0, 0],
+        [width, 0],
+        [
+          { offset: 0, color: "#ffffff" },
+          { offset: Math.max(0, Math.min(1, lead - feather)), color: "#ffffff" },
+          { offset: Math.max(0, Math.min(1, lead)), color: "#000000" },
+          { offset: 1, color: "#000000" }
+        ]
+      )
+    });
+    return createElement(Group, { matte, matteMode: "luminance" }, children);
+  };
+}
+function chromaticAberration({
+  maxShift = 22
+} = {}) {
+  return (children, { progress, entering }) => {
+    const sharp = entering ? progress : 1 - progress;
+    const d = (1 - sharp) * maxShift;
+    const opacity = entering ? progress : 1 - progress;
+    if (d <= 0.5) return createElement(Group, { opacity }, children);
+    return createElement(
+      Group,
+      { opacity },
+      createElement(Group, { x: -d, opacity: 0.5 }, children),
+      createElement(Group, { x: d, opacity: 0.5 }, children),
+      createElement(Group, {}, children)
+    );
+  };
+}
+function devicePullback() {
+  return (children, { progress, entering, width, height }) => {
+    if (entering) {
+      const scale2 = 1.12 - 0.12 * progress;
+      return createElement(
+        Group,
+        { opacity: progress },
+        scaleAbout(children, scale2, scale2, width / 2, height / 2)
+      );
+    }
+    const scale = 1 - 0.45 * progress;
+    return createElement(
+      Group,
+      { opacity: 1 - progress, y: -progress * height * 0.06 },
+      scaleAbout(children, scale, scale, width / 2, height / 2)
+    );
+  };
+}
+function expandMorph() {
+  return (children, { progress, entering, width, height }) => {
+    if (entering) {
+      const scale2 = 0.3 + 0.7 * progress;
+      return createElement(
+        Group,
+        { opacity: Math.min(1, progress * 1.5) },
+        scaleAbout(children, scale2, scale2, width / 2, height / 2)
+      );
+    }
+    const scale = 1 + 0.5 * progress;
+    return createElement(
+      Group,
+      { opacity: 1 - progress },
+      scaleAbout(children, scale, scale, width / 2, height / 2)
+    );
+  };
+}
+function morph() {
+  return (children, { progress, entering, width, height }) => {
+    const scale = entering ? 0.94 + 0.06 * progress : 1 + 0.06 * progress;
+    return createElement(
+      Group,
+      { opacity: entering ? progress : 1 - progress },
+      scaleAbout(children, scale, scale, width / 2, height / 2)
+    );
+  };
+}
+function glassWipe({
+  direction = "from-left"
+} = {}) {
+  return (children, { progress, entering, width, height }) => {
+    if (!entering)
+      return createElement(Group, { opacity: Math.max(0, 1 - progress / 0.7) }, children);
+    const p = Math.min(1, Math.max(0, progress));
+    const frosted = blurStack(children, (1 - p) * 18);
+    switch (direction) {
+      case "from-top":
+        return createElement(Group, { clip: clipRect(width, height * p) }, frosted);
+      case "from-right": {
+        const w = width * p;
+        return createElement(
+          Group,
+          { x: width - w },
+          createElement(Group, { x: -(width - w), clip: clipRect(w, height) }, frosted)
+        );
+      }
+      case "from-bottom": {
+        const h = height * p;
+        return createElement(
+          Group,
+          { y: height - h },
+          createElement(Group, { y: -(height - h), clip: clipRect(width, h) }, frosted)
+        );
+      }
+      default:
+        return createElement(Group, { clip: clipRect(width * p, height) }, frosted);
+    }
+  };
+}
+function cellPhase(i, j) {
+  const n = Math.sin(i * 12.9898 + j * 78.233) * 43758.5453;
+  return n - Math.floor(n);
+}
+function gridPixelate({
+  cols = 16,
+  rows = 9
+} = {}) {
+  return (children, { progress, entering, width, height }) => {
+    if (!entering)
+      return createElement(Group, { opacity: Math.max(0, 1 - progress / 0.7) }, children);
+    if (progress >= 1) return createElement(Group, {}, children);
+    if (progress <= 0) return createElement(Group, { opacity: 0 }, children);
+    const cw = width / cols;
+    const ch = height / rows;
+    let d = "";
+    for (let j = 0; j < rows; j++) {
+      for (let i = 0; i < cols; i++) {
+        if (cellPhase(i, j) < progress) {
+          const x = round(i * cw);
+          const y = round(j * ch);
+          d += `M ${x} ${y} L ${round(x + cw)} ${y} L ${round(x + cw)} ${round(y + ch)} L ${x} ${round(y + ch)} Z `;
+        }
+      }
+    }
+    if (d === "") return createElement(Group, { opacity: 0 }, children);
+    return createElement(Group, { clip: clipPath(d) }, children);
+  };
+}
+function typeMask({ bars = 12 } = {}) {
+  return (children, { progress, entering, width, height }) => {
+    if (!entering)
+      return createElement(Group, { opacity: Math.max(0, 1 - progress / 0.7) }, children);
+    if (progress >= 1) return createElement(Group, {}, children);
+    if (progress <= 0) return createElement(Group, { opacity: 0 }, children);
+    const slot = width / bars;
+    const w = round(slot * Math.min(1, progress));
+    let d = "";
+    for (let i = 0; i < bars; i++) {
+      const x = round(i * slot);
+      d += `M ${x} 0 L ${round(x + w)} 0 L ${round(x + w)} ${round(height)} L ${x} ${round(height)} Z `;
+    }
+    return createElement(Group, { clip: clipPath(d) }, children);
+  };
+}
+var crossFade = fade2;
+function TransitionSequence(_props) {
+  return null;
+}
+function TransitionTransition(_props) {
+  return null;
+}
+function TransitionItem({
+  duration,
+  enter,
+  exit,
+  children
+}) {
+  const frame = useCurrentFrame();
+  const { fps, width, height } = useVideoConfig();
+  let content = children;
+  if (exit) {
+    const t = exit.timing.durationInFrames;
+    const start = duration - t;
+    const progress = frame >= start ? exit.timing.getProgress(frame - start, fps) : 0;
+    content = exit.presentation(content, { progress, entering: false, width, height });
+  }
+  if (enter) {
+    const t = enter.timing.durationInFrames;
+    const progress = frame < t ? enter.timing.getProgress(frame, fps) : 1;
+    content = enter.presentation(content, { progress, entering: true, width, height });
+  }
+  return createElement(Group, null, content);
+}
+function TransitionSeriesRoot({ children }) {
+  const items = Children.toArray(children).filter(isValidElement);
+  const sequences = [];
+  const transitions = [];
+  for (const el of items) {
+    if (el.type === TransitionSequence) {
+      sequences.push(el.props);
+      transitions.push(null);
+    } else if (el.type === TransitionTransition) {
+      if (sequences.length === 0 || transitions[transitions.length - 1] != null) {
+        throw new Error("<TransitionSeries.Transition> must sit between two sequences");
+      }
+      transitions[transitions.length - 1] = el.props;
+    } else {
+      throw new Error(
+        "<TransitionSeries> children must be <TransitionSeries.Sequence> or .Transition"
+      );
+    }
+  }
+  let offset = 0;
+  const rendered = [];
+  for (const [i, seq] of sequences.entries()) {
+    const before = i > 0 ? transitions[i - 1] ?? null : null;
+    const after = transitions[i] ?? null;
+    const enter = before ? { presentation: before.presentation, timing: before.timing } : void 0;
+    const exit = after ? { presentation: after.presentation, timing: after.timing } : void 0;
+    rendered.push(
+      createElement(
+        Sequence,
+        { key: i, from: offset, durationInFrames: seq.durationInFrames },
+        createElement(TransitionItem, {
+          duration: seq.durationInFrames,
+          enter,
+          exit,
+          // biome-ignore lint/correctness/noChildrenProp: raw createElement props object, not JSX
+          children: seq.children
+        })
+      )
+    );
+    offset += seq.durationInFrames - (after ? after.timing.durationInFrames : 0);
+  }
+  return createElement(Group, null, ...rendered);
+}
+var TransitionSeries = Object.assign(TransitionSeriesRoot, {
+  Sequence: TransitionSequence,
+  Transition: TransitionTransition
+});
+var HOST_CONTEXT = {};
+function childrenToText(children) {
+  if (children == null || children === false || children === true) return "";
+  if (Array.isArray(children)) return children.map(childrenToText).join("");
+  if (typeof children === "string") return children;
+  if (typeof children === "number") return String(children);
+  return "";
+}
+var HostTransitionContext = createContext(null);
+var currentUpdatePriority = DefaultEventPriority;
+var hostConfig = {
+  supportsMutation: true,
+  supportsPersistence: false,
+  supportsHydration: false,
+  isPrimaryRenderer: true,
+  noTimeout: -1,
+  scheduleTimeout: (fn, delay) => setTimeout(fn, delay),
+  cancelTimeout: (handle) => clearTimeout(handle),
+  createInstance(type, props) {
+    const node = { type, props, children: [] };
+    if (type === "onda-text") node.text = childrenToText(props.children);
+    return node;
+  },
+  createTextInstance(text) {
+    return { type: "#text", props: {}, children: [], text };
+  },
+  appendInitialChild(parent, child) {
+    parent.children.push(child);
+  },
+  finalizeInitialChildren() {
+    return false;
+  },
+  shouldSetTextContent(type) {
+    return type === "onda-text";
+  },
+  getRootHostContext() {
+    return HOST_CONTEXT;
+  },
+  getChildHostContext(parentContext) {
+    return parentContext;
+  },
+  getPublicInstance(instance) {
+    return instance;
+  },
+  prepareForCommit() {
+    return null;
+  },
+  resetAfterCommit() {
+  },
+  preparePortalMount() {
+  },
+  // 0.33: `prepareUpdate` is gone; `commitUpdate` receives the new props
+  // directly (no diff payload) and applies them.
+  commitUpdate(instance, type, _prevProps, nextProps) {
+    instance.props = nextProps;
+    if (type === "onda-text") instance.text = childrenToText(nextProps.children);
+  },
+  commitTextUpdate(textInstance, _oldText, newText) {
+    textInstance.text = newText;
+  },
+  resetTextContent() {
+  },
+  commitMount() {
+  },
+  appendChild(parent, child) {
+    parent.children.push(child);
+  },
+  appendChildToContainer(container, child) {
+    container.children.push(child);
+  },
+  insertBefore(parent, child, beforeChild) {
+    const index = parent.children.indexOf(beforeChild);
+    parent.children.splice(index < 0 ? parent.children.length : index, 0, child);
+  },
+  insertInContainerBefore(container, child, beforeChild) {
+    const index = container.children.indexOf(beforeChild);
+    container.children.splice(index < 0 ? container.children.length : index, 0, child);
+  },
+  removeChild(parent, child) {
+    const index = parent.children.indexOf(child);
+    if (index >= 0) parent.children.splice(index, 1);
+  },
+  removeChildFromContainer(container, child) {
+    const index = container.children.indexOf(child);
+    if (index >= 0) container.children.splice(index, 1);
+  },
+  clearContainer(container) {
+    container.children.length = 0;
+  },
+  getInstanceFromNode() {
+    return null;
+  },
+  beforeActiveInstanceBlur() {
+  },
+  afterActiveInstanceBlur() {
+  },
+  prepareScopeUpdate() {
+  },
+  getInstanceFromScope() {
+    return null;
+  },
+  detachDeletedInstance() {
+  },
+  // ── react-reconciler 0.33 (React 19) additions ─────────────────────────────
+  // ONDA is a static, single-pass renderer with no suspense, forms, or
+  // transitions, so these are inert (return the "nothing pending / never
+  // suspend / commit immediately" answers).
+  setCurrentUpdatePriority(newPriority) {
+    currentUpdatePriority = newPriority;
+  },
+  getCurrentUpdatePriority() {
+    return currentUpdatePriority;
+  },
+  resolveUpdatePriority() {
+    return DefaultEventPriority;
+  },
+  NotPendingTransition: null,
+  // React's public `Context` type omits the internal fields (`_currentValue`,
+  // `_threadCount`) the reconciler reads; the runtime object has them.
+  // biome-ignore lint/suspicious/noExplicitAny: bridge React's public Context to the reconciler's ReactContext.
+  HostTransitionContext,
+  resetFormInstance() {
+  },
+  requestPostPaintCallback() {
+  },
+  shouldAttemptEagerTransition() {
+    return false;
+  },
+  trackSchedulerEvent() {
+  },
+  resolveEventType() {
+    return null;
+  },
+  resolveEventTimeStamp() {
+    return -1;
+  },
+  maySuspendCommit() {
+    return false;
+  },
+  preloadInstance() {
+    return true;
+  },
+  startSuspendingCommit() {
+  },
+  suspendInstance() {
+  },
+  waitForCommitToBeReady() {
+    return null;
+  }
+};
+
+// ../react/src/reconciler.ts
+var reconciler = Reconciler(hostConfig);
+var activeFrameState = null;
+var activeDof = null;
+function renderFrame(element, frame) {
+  const config = videoConfig(element);
+  const frameState = { ...config, frame };
+  const prevFrameState = activeFrameState;
+  activeFrameState = frameState;
+  try {
+    const container = { children: [] };
+    const root = reconciler.createContainer(
+      container,
+      0,
+      // LegacyRoot — renders synchronously
+      null,
+      // hydrationCallbacks
+      false,
+      // isStrictMode
+      null,
+      // concurrentUpdatesByDefaultOverride
+      "",
+      // identifierPrefix
+      (error) => {
+        throw error;
+      },
+      (error) => {
+        throw error;
+      },
+      () => {
+      },
+      // onRecoverableError — non-fatal (e.g. hydration); ignore
+      () => {
+      }
+      // onDefaultTransitionIndicator — no transitions in a static render
+    );
+    reconciler.updateContainerSync(
+      createElement(FrameContext.Provider, { value: frameState }, element),
+      root,
+      null,
+      null
+    );
+    reconciler.flushSyncWork();
+    const top = container.children[0];
+    if (container.children.length !== 1 || !top || top.type !== "onda-composition") {
+      throw new Error("render: the root element must be a single <Composition>");
+    }
+    const scene = compositionToScene(top);
+    reconciler.updateContainerSync(null, root, null, null);
+    reconciler.flushSyncWork();
+    return scene;
+  } finally {
+    activeFrameState = prevFrameState;
+  }
+}
+function renderToScene(element) {
+  return renderFrame(element, 0);
+}
+function motionBlurConfig(element) {
+  const mb = element.props.motionBlur;
+  if (!mb) return void 0;
+  if (mb === true) return { shutter: 180, samples: 16 };
+  if (typeof mb !== "object") return void 0;
+  const o = mb;
+  const samples = typeof o.samples === "number" ? Math.max(1, Math.round(o.samples)) : 16;
+  if (samples < 2) return void 0;
+  const shutter = typeof o.shutter === "number" ? Math.min(720, Math.max(1, o.shutter)) : 180;
+  return { shutter, samples };
+}
+function outputFrameScenes(element, frame, mb) {
+  if (!mb) return [renderFrame(element, frame)];
+  const shutterFrames = mb.shutter / 360;
+  const scenes = [];
+  for (let i = 0; i < mb.samples; i++) {
+    const t = ((i + 0.5) / mb.samples - 0.5) * shutterFrames;
+    scenes.push(renderFrame(element, frame + t));
+  }
+  return scenes;
+}
+function renderFrames(element) {
+  const { durationInFrames } = videoConfig(element);
+  const mb = motionBlurConfig(element);
+  const frames = [];
+  for (let frame = 0; frame < durationInFrames; frame++) {
+    frames.push(...outputFrameScenes(element, frame, mb));
+  }
+  return frames;
+}
+function renderFramesRange(element, startFrame, endFrame) {
+  const mb = motionBlurConfig(element);
+  const frames = [];
+  for (let frame = startFrame; frame < endFrame; frame++) {
+    frames.push(...outputFrameScenes(element, frame, mb));
+  }
+  return frames;
+}
+function renderToSceneJSON(element, space = 2) {
+  return JSON.stringify(renderToScene(element), null, space);
+}
+function renderFramesJSON(element, space = 0) {
+  return JSON.stringify(renderFrames(element), null, space);
+}
+function renderFrameRangeJSON(element, startFrame, endFrame, space = 0) {
+  return JSON.stringify(renderFramesRange(element, startFrame, endFrame), null, space);
+}
+function videoConfig(element) {
+  if (element.type !== Composition) {
+    throw new Error("render: the root element must be a <Composition>");
+  }
+  const props = element.props;
+  return {
+    width: numberProp(props, "width", "Composition"),
+    height: numberProp(props, "height", "Composition"),
+    fps: numberProp(props, "fps", "Composition"),
+    durationInFrames: numberProp(props, "durationInFrames", "Composition")
+  };
+}
+function parseFinish(f) {
+  const out = {};
+  if (typeof f.exposure === "number") out.exposure = f.exposure;
+  if (f.bloom && typeof f.bloom.sigma === "number") {
+    out.bloom = { sigma: f.bloom.sigma };
+    if (typeof f.bloom.threshold === "number") out.bloom.threshold = f.bloom.threshold;
+    if (typeof f.bloom.intensity === "number") out.bloom.intensity = f.bloom.intensity;
+  }
+  if (typeof f.halation === "number") out.halation = f.halation;
+  if (typeof f.temperature === "number") out.temperature = f.temperature;
+  if (typeof f.contrast === "number") out.contrast = f.contrast;
+  if (typeof f.saturation === "number") out.saturation = f.saturation;
+  if (typeof f.vignette === "number") out.vignette = f.vignette;
+  if (typeof f.grain === "number" && f.grain > 0) {
+    out.grain = f.grain;
+    out.grain_seed = activeFrameState?.frame ?? 0;
+  }
+  if (f.lut && typeof f.lut.size === "number" && f.lut.size >= 2 && Array.isArray(f.lut.table) && f.lut.table.length === f.lut.size ** 3 * 3) {
+    out.lut = { size: f.lut.size, table: f.lut.table };
+  }
+  return out;
+}
+function parseDof(dof) {
+  if (!dof || typeof dof.focus !== "number") return null;
+  return {
+    focus: dof.focus,
+    aperture: typeof dof.aperture === "number" ? dof.aperture : 0.04,
+    range: typeof dof.range === "number" ? dof.range : 0,
+    maxBlur: typeof dof.maxBlur === "number" ? dof.maxBlur : 40
+  };
+}
+function dofBlur(depth, dof) {
+  const dist = Math.max(0, Math.abs(depth - dof.focus) - dof.range);
+  return Math.min(dist * dof.aperture, dof.maxBlur);
+}
+function isVec3(v) {
+  return Array.isArray(v) && v.length === 3 && v.every((n) => typeof n === "number");
+}
+function isVec2(v) {
+  return Array.isArray(v) && v.length === 2 && v.every((n) => typeof n === "number");
+}
+function parseCamera3D(input) {
+  const c = input ?? {};
+  const out = {};
+  if (isVec3(c.position)) out.position = c.position;
+  if (isVec3(c.target)) out.target = c.target;
+  if (isVec3(c.up)) out.up = c.up;
+  if (typeof c.fov === "number") out.fov = c.fov;
+  if (typeof c.near === "number") out.near = c.near;
+  if (typeof c.far === "number") out.far = c.far;
+  return out;
+}
+function parseExtrude(input) {
+  if (typeof input === "number") return input > 0 ? { depth: input } : null;
+  if (input && typeof input === "object") {
+    const d = input.depth;
+    if (typeof d === "number" && d > 0) return { depth: d };
+  }
+  return null;
+}
+function parseTransform3D(props) {
+  const { position3d, rotation3d, anchor3d } = props;
+  if (!isVec3(position3d) && !isVec3(rotation3d) && !isVec2(anchor3d)) return null;
+  const out = {};
+  if (isVec3(position3d)) out.position = position3d;
+  if (isVec3(rotation3d)) out.rotation = rotation3d;
+  if (isVec2(anchor3d)) out.anchor = anchor3d;
+  return out;
+}
+function compositionToScene(node) {
+  const { props } = node;
+  activeDof = parseDof(props.dof);
+  const children = node.children.length ? node.children.map(toNode) : null;
+  activeDof = null;
+  return {
+    composition: {
+      width: numberProp(props, "width", "Composition"),
+      height: numberProp(props, "height", "Composition"),
+      fps: numberProp(props, "fps", "Composition"),
+      duration_in_frames: numberProp(props, "durationInFrames", "Composition"),
+      // Opt-in cinematic LINEAR + ACES finishing (gpu/export only); omitted (→ gamma)
+      // unless explicitly enabled, so existing scenes stay byte-identical.
+      ...props.linear === true ? { linear: true } : {},
+      // Composition-level cinematic FINISH (linear-HDR chain + ACES); omitted unless set.
+      ...props.finish ? { finish: parseFinish(props.finish) } : {}
+    },
+    root: {
+      kind: { type: "group" },
+      ...children ? { children } : {}
+    }
+  };
+}
+function elementToNode(element) {
+  const container = { children: [] };
+  const root = reconciler.createContainer(
+    container,
+    0,
+    // LegacyRoot — renders synchronously
+    null,
+    false,
+    null,
+    "",
+    (error) => {
+      throw error;
+    },
+    (error) => {
+      throw error;
+    },
+    () => {
+    },
+    () => {
+    }
+  );
+  const wrapped = activeFrameState ? createElement(FrameContext.Provider, { value: activeFrameState }, element) : element;
+  reconciler.updateContainerSync(wrapped, root, null, null);
+  reconciler.flushSyncWork();
+  const top = container.children[0];
+  if (container.children.length !== 1 || !top) {
+    throw new Error(
+      "matte: the matte element must resolve to a single node (wrap many in a <Group>)"
+    );
+  }
+  const node = toNode(top);
+  reconciler.updateContainerSync(null, root, null, null);
+  reconciler.flushSyncWork();
+  return node;
+}
+function toNode(node) {
+  const { props } = node;
+  const base = {};
+  if (typeof props.id === "number") base.id = props.id;
+  const transform = transformOf(props);
+  if (transform) base.transform = transform;
+  if (typeof props.opacity === "number") base.opacity = props.opacity;
+  if (props.clip !== void 0) base.clip = parseClip(props.clip);
+  if (props.matte !== void 0) {
+    base.matte = {
+      mode: props.matteMode === "luminance" ? "luminance" : "alpha",
+      source: elementToNode(props.matte)
+    };
+  }
+  if (typeof props.blendMode === "string") base.blend = props.blendMode;
+  const effects = Array.isArray(props.effects) ? [...props.effects] : [];
+  if (typeof props.blur === "number" && props.blur > 0)
+    effects.unshift({ effect: "blur", sigma: props.blur });
+  const directionalBlur = parseDirectionalBlur(props.directionalBlur);
+  if (directionalBlur) effects.unshift(directionalBlur);
+  const chromaticAberration2 = parseChromaticAberration(props.chromaticAberration);
+  if (chromaticAberration2) effects.push(chromaticAberration2);
+  const vignette = parseVignette(props.vignette);
+  if (vignette) effects.push(vignette);
+  const posterize = parsePosterize(props.posterize);
+  if (posterize) effects.push(posterize);
+  const duotone = parseDuotone(props.duotone);
+  if (duotone) effects.push(duotone);
+  const chromaKey = parseChromaKey(props.chromaKey);
+  if (chromaKey) effects.push(chromaKey);
+  const bloom = parseBloom(props.bloom);
+  if (bloom) effects.push(bloom);
+  const grade = parseGrade(props.grade);
+  if (grade) effects.push(grade);
+  const goo = parseGoo(props.goo);
+  if (goo) effects.push(goo);
+  const grain = parseGrain(props.grain);
+  if (grain) effects.push(grain);
+  const backdropBlur = parseBackdropBlur(props.backdropBlur);
+  if (backdropBlur) effects.push(backdropBlur);
+  const lightWrap = parseLightWrap(props.lightWrap);
+  if (lightWrap) effects.push(lightWrap);
+  if (activeDof && typeof props.depth === "number") {
+    const sigma = dofBlur(props.depth, activeDof);
+    if (sigma > 0.4) effects.unshift({ effect: "blur", sigma });
+  }
+  if (effects.length) base.effects = effects;
+  if (props.camera3d !== void 0) base.camera3d = parseCamera3D(props.camera3d);
+  const transform3d = parseTransform3D(props);
+  if (transform3d) base.transform3d = transform3d;
+  const extrude = parseExtrude(props.extrude);
+  if (extrude) base.extrude = extrude;
+  if (props.layout !== void 0) base.layout = parseLayout(props.layout);
+  const children = node.children.map(toNode);
+  const withChildren = children.length ? { children } : {};
+  switch (node.type) {
+    case "onda-group":
+      return { ...base, kind: { type: "group" }, ...withChildren };
+    case "onda-rect": {
+      const geometry = {
+        shape: "rect",
+        size: {
+          width: numberProp(props, "width", "Rect"),
+          height: numberProp(props, "height", "Rect")
+        },
+        ...typeof props.cornerRadius === "number" ? { corner_radius: props.cornerRadius } : {}
+      };
+      return { ...base, kind: { type: "shape", geometry, ...fillStroke(props) }, ...withChildren };
+    }
+    case "onda-ellipse": {
+      const geometry = {
+        shape: "ellipse",
+        size: {
+          width: numberProp(props, "width", "Ellipse"),
+          height: numberProp(props, "height", "Ellipse")
+        }
+      };
+      return { ...base, kind: { type: "shape", geometry, ...fillStroke(props) }, ...withChildren };
+    }
+    case "onda-path": {
+      const geometry = { shape: "path", data: stringProp(props, "d", "Path") };
+      return { ...base, kind: { type: "shape", geometry, ...fillStroke(props) }, ...withChildren };
+    }
+    case "onda-boolean": {
+      const op = props.op === "difference" || props.op === "intersect" || props.op === "xor" ? props.op : "union";
+      const operands = [];
+      for (const c of children) {
+        if (c.kind.type === "shape") {
+          operands.push({ geometry: c.kind.geometry, transform: c.transform ?? {} });
+        }
+      }
+      const geometry = { shape: "boolean", op, operands };
+      return { ...base, kind: { type: "shape", geometry, ...fillStroke(props) } };
+    }
+    case "onda-text": {
+      const kind = {
+        type: "text",
+        content: node.text ?? "",
+        ...typeof props.fontSize === "number" ? { font_size: props.fontSize } : {},
+        ...props.color !== void 0 ? { color: parseColor(props.color) } : {},
+        ...typeof props.fontFamily === "string" ? { font_family: props.fontFamily } : {},
+        ...typeof props.fontWeight === "number" ? { weight: props.fontWeight } : {},
+        ...props.italic === true ? { italic: true } : {},
+        ...typeof props.letterSpacing === "number" ? { letter_spacing: props.letterSpacing } : {}
+      };
+      if (Array.isArray(props.runs)) {
+        kind.runs = props.runs.map((r) => ({
+          text: r.text,
+          ...r.color !== void 0 ? { color: parseColor(r.color) } : {},
+          ...typeof r.fontSize === "number" ? { font_size: r.fontSize } : {},
+          ...typeof r.fontFamily === "string" ? { font_family: r.fontFamily } : {},
+          ...typeof r.fontWeight === "number" ? { weight: r.fontWeight } : {},
+          ...r.italic === true ? { italic: true } : {}
+        }));
+      }
+      return { ...base, kind, ...withChildren };
+    }
+    case "onda-image":
+      return {
+        ...base,
+        kind: {
+          type: "image",
+          src: stringProp(props, "src", "Image"),
+          ...typeof props.width === "number" ? { width: props.width } : {},
+          ...typeof props.height === "number" ? { height: props.height } : {},
+          ...props.fit === "fill" || props.fit === "cover" || props.fit === "contain" ? { fit: props.fit } : {},
+          ...typeof props.blur === "number" && props.blur > 0 ? { blur: props.blur } : {}
+        },
+        ...withChildren
+      };
+    case "onda-video":
+      return {
+        ...base,
+        kind: {
+          type: "video",
+          src: stringProp(props, "src", "Video"),
+          ...typeof props.time === "number" ? { time: props.time } : {},
+          ...typeof props.width === "number" ? { width: props.width } : {},
+          ...typeof props.height === "number" ? { height: props.height } : {},
+          ...props.fit === "fill" || props.fit === "cover" || props.fit === "contain" ? { fit: props.fit } : {},
+          ...props.previewFallback === "element" || props.previewFallback === "skip" ? { previewFallback: props.previewFallback } : {}
+        },
+        ...withChildren
+      };
+    case "onda-audio":
+      return {
+        ...base,
+        kind: {
+          type: "audio",
+          src: stringProp(props, "src", "Audio"),
+          ...typeof props.start === "number" ? { start: props.start } : {},
+          ...typeof props.startAt === "number" ? { start_at: props.startAt } : {},
+          ...typeof props.volume === "number" ? { volume: props.volume } : {}
+        },
+        ...withChildren
+      };
+    case "onda-svg": {
+      if (typeof props.src !== "string" && typeof props.markup !== "string") {
+        throw new Error("<Svg> requires a 'src' or 'markup' prop");
+      }
+      return {
+        ...base,
+        kind: {
+          type: "svg",
+          ...typeof props.src === "string" ? { src: props.src } : {},
+          ...typeof props.markup === "string" ? { markup: props.markup } : {}
+        },
+        ...withChildren
+      };
+    }
+    case "#text":
+      throw new Error(
+        `renderToScene: raw text "${String(node.text ?? "").slice(0, 60)}" was placed inside a non-Text node. String children are only valid inside <Text>. Wrap it: h(Text, { x, y, fontSize, color }, '${String(node.text ?? "").slice(0, 30)}')`
+      );
+    default:
+      throw new Error(
+        `renderToScene: unsupported element type "${node.type}". Only ONDA primitives (Group/Rect/Ellipse/Path/Text/Image/Video/Svg) are valid. DOM elements like <div>/<span> and custom types are not rendered \u2014 use @onda-engine/react primitives only.`
+      );
+  }
+}
+function transformOf(props) {
+  const transform = {};
+  if (typeof props.x === "number" || typeof props.y === "number") {
+    transform.translate = { x: props.x ?? 0, y: props.y ?? 0 };
+  }
+  if (typeof props.scaleX === "number" || typeof props.scaleY === "number") {
+    transform.scale = { x: props.scaleX ?? 1, y: props.scaleY ?? 1 };
+  }
+  if (typeof props.rotation === "number") {
+    transform.rotate = props.rotation;
+  }
+  if (typeof props.originX === "number" || typeof props.originY === "number") {
+    transform.origin = { x: props.originX ?? 0, y: props.originY ?? 0 };
+  }
+  return transform.translate || transform.scale || transform.rotate !== void 0 || transform.origin ? transform : void 0;
+}
+var ALIGN_ALIASES = {
+  "flex-start": "start",
+  "flex-end": "end",
+  left: "start",
+  top: "start",
+  right: "end",
+  bottom: "end",
+  middle: "center",
+  "space-evenly": "space-around"
+};
+var normAlign = (v) => typeof v === "string" && v in ALIGN_ALIASES ? ALIGN_ALIASES[v] : v;
+function parseDirectionalBlur(input) {
+  if (input && typeof input === "object") {
+    const d = input;
+    if (typeof d.sigma === "number" && d.sigma > 0) {
+      return {
+        effect: "directional_blur",
+        sigma: d.sigma,
+        angle: typeof d.angle === "number" ? d.angle : 0
+      };
+    }
+  }
+  return void 0;
+}
+function parseChromaticAberration(input) {
+  return typeof input === "number" && input > 0 ? { effect: "chromatic_aberration", amount: input } : void 0;
+}
+function parseVignette(input) {
+  if (typeof input === "number") {
+    return input > 0 ? { effect: "vignette", amount: input, softness: 0.5 } : void 0;
+  }
+  if (input && typeof input === "object") {
+    const v = input;
+    if (typeof v.amount === "number" && v.amount > 0) {
+      return {
+        effect: "vignette",
+        amount: v.amount,
+        softness: typeof v.softness === "number" ? v.softness : 0.5
+      };
+    }
+  }
+  return void 0;
+}
+function parsePosterize(input) {
+  return typeof input === "number" && input >= 2 ? { effect: "posterize", levels: input } : void 0;
+}
+function parseDuotone(input) {
+  if (input && typeof input === "object") {
+    const d = input;
+    if (d.shadow !== void 0 && d.highlight !== void 0) {
+      const s = parseColor(d.shadow);
+      const h = parseColor(d.highlight);
+      return { effect: "duotone", shadow: [s.r, s.g, s.b], highlight: [h.r, h.g, h.b] };
+    }
+  }
+  return void 0;
+}
+function parseChromaKey(input) {
+  if (input && typeof input === "object") {
+    const c = input;
+    if (c.color !== void 0) {
+      const k = parseColor(c.color);
+      return {
+        effect: "chroma_key",
+        key: [k.r, k.g, k.b],
+        threshold: typeof c.threshold === "number" ? c.threshold : 0.4,
+        smoothness: typeof c.smoothness === "number" ? c.smoothness : 0.1
+      };
+    }
+  }
+  return void 0;
+}
+function parseBloom(input) {
+  if (typeof input === "number") {
+    return input > 0 ? { effect: "bloom", threshold: 0.7, intensity: 1, sigma: input } : void 0;
+  }
+  if (input && typeof input === "object") {
+    const b = input;
+    if (typeof b.sigma === "number" && b.sigma > 0) {
+      return {
+        effect: "bloom",
+        threshold: typeof b.threshold === "number" ? b.threshold : 0.7,
+        intensity: typeof b.intensity === "number" ? b.intensity : 1,
+        sigma: b.sigma
+      };
+    }
+  }
+  return void 0;
+}
+function parseGrade(input) {
+  if (!input || typeof input !== "object") return void 0;
+  const g = input;
+  const exposure = typeof g.exposure === "number" ? g.exposure : 0;
+  const contrast = typeof g.contrast === "number" ? g.contrast : 1;
+  const saturation = typeof g.saturation === "number" ? g.saturation : 1;
+  const temperature = typeof g.temperature === "number" ? g.temperature : 0;
+  const tint = typeof g.tint === "number" ? g.tint : 0;
+  if (exposure === 0 && contrast === 1 && saturation === 1 && temperature === 0 && tint === 0) {
+    return void 0;
+  }
+  return { effect: "color_grade", exposure, contrast, saturation, temperature, tint };
+}
+function parseGoo(input) {
+  if (typeof input === "number") {
+    return input > 0 ? { effect: "goo", sigma: input, threshold: 0.5 } : void 0;
+  }
+  if (input && typeof input === "object") {
+    const g = input;
+    if (typeof g.sigma === "number" && g.sigma > 0) {
+      return {
+        effect: "goo",
+        sigma: g.sigma,
+        threshold: typeof g.threshold === "number" ? g.threshold : 0.5
+      };
+    }
+  }
+  return void 0;
+}
+function parseGrain(input) {
+  if (typeof input === "number") {
+    return input > 0 ? { effect: "grain", intensity: input, size: 1, seed: 0 } : void 0;
+  }
+  if (input && typeof input === "object") {
+    const g = input;
+    if (typeof g.intensity === "number" && g.intensity > 0) {
+      return {
+        effect: "grain",
+        intensity: g.intensity,
+        size: typeof g.size === "number" ? g.size : 1,
+        seed: typeof g.seed === "number" ? g.seed : 0
+      };
+    }
+  }
+  return void 0;
+}
+function parseBackdropBlur(input) {
+  const TRANSPARENT = { r: 0, g: 0, b: 0, a: 0 };
+  if (typeof input === "number") {
+    return input > 0 ? { effect: "backdrop_blur", sigma: input, tint: TRANSPARENT, brightness: 1, saturation: 1 } : void 0;
+  }
+  if (input && typeof input === "object") {
+    const b = input;
+    if (typeof b.sigma === "number" && b.sigma > 0) {
+      return {
+        effect: "backdrop_blur",
+        sigma: b.sigma,
+        tint: b.tint !== void 0 ? parseColor(b.tint) : TRANSPARENT,
+        brightness: typeof b.brightness === "number" ? b.brightness : 1,
+        saturation: typeof b.saturation === "number" ? b.saturation : 1
+      };
+    }
+  }
+  return void 0;
+}
+function parseLightWrap(input) {
+  if (typeof input === "number") {
+    return input > 0 ? { effect: "light_wrap", sigma: input, strength: 1 } : void 0;
+  }
+  if (input && typeof input === "object") {
+    const w = input;
+    if (typeof w.sigma === "number" && w.sigma > 0) {
+      return {
+        effect: "light_wrap",
+        sigma: w.sigma,
+        strength: typeof w.strength === "number" ? w.strength : 1
+      };
+    }
+  }
+  return void 0;
+}
+function parseLayout(layout) {
+  const out = {};
+  if (layout.direction !== void 0) out.direction = layout.direction;
+  if (layout.justify !== void 0) out.justify = normAlign(layout.justify);
+  if (layout.align !== void 0) out.align = normAlign(layout.align);
+  if (typeof layout.gap === "number") out.gap = layout.gap;
+  if (typeof layout.padding === "number") out.padding = layout.padding;
+  if (layout.wrap === true) out.wrap = true;
+  if (typeof layout.width === "number") out.width = layout.width;
+  if (typeof layout.height === "number") out.height = layout.height;
+  return out;
+}
+function fillStroke(props) {
+  const out = {};
+  if (props.fill !== void 0) out.fill = parseColor(props.fill);
+  if (props.gradient !== void 0) out.gradient = parseGradient(props.gradient);
+  const sh = props.shadow;
+  if (sh && typeof sh.blur === "number") {
+    out.shadow = {
+      color: parseColor(sh.color),
+      blur: sh.blur,
+      ...typeof sh.offsetX === "number" || typeof sh.offsetY === "number" ? { offset: { x: sh.offsetX ?? 0, y: sh.offsetY ?? 0 } } : {},
+      ...typeof sh.spread === "number" ? { spread: sh.spread } : {}
+    };
+  }
+  if (props.stroke !== void 0) {
+    const trim = parseTrim(props);
+    out.stroke = {
+      color: parseColor(props.stroke),
+      width: typeof props.strokeWidth === "number" ? props.strokeWidth : 1,
+      ...props.strokeCap === "round" || props.strokeCap === "square" ? { cap: props.strokeCap } : {},
+      ...props.strokeJoin === "round" || props.strokeJoin === "bevel" ? { join: props.strokeJoin } : {},
+      ...Array.isArray(props.strokeDash) && props.strokeDash.length ? { dash: props.strokeDash } : {},
+      ...typeof props.strokeDashOffset === "number" ? { dash_offset: props.strokeDashOffset } : {},
+      ...trim ? { trim } : {}
+    };
+  }
+  return out;
+}
+function parseTrim(props) {
+  const { trimStart, trimEnd, trimOffset } = props;
+  if (typeof trimStart !== "number" && typeof trimEnd !== "number" && typeof trimOffset !== "number") {
+    return void 0;
+  }
+  const trim = {};
+  if (typeof trimStart === "number") trim.start = trimStart;
+  if (typeof trimEnd === "number") trim.end = trimEnd;
+  if (typeof trimOffset === "number") trim.offset = trimOffset;
+  return trim;
+}
+function numberProp(props, key, ctx) {
+  const value = props[key];
+  if (typeof value !== "number") throw new Error(`<${ctx}> requires a numeric '${key}' prop`);
+  return value;
+}
+function stringProp(props, key, ctx) {
+  const value = props[key];
+  if (typeof value !== "string") throw new Error(`<${ctx}> requires a string '${key}' prop`);
+  return value;
+}
+
+// ../react/src/fonts.ts
+var fonts = [];
+var seen = /* @__PURE__ */ new Set();
+function signature(data) {
+  let h = 2166136261;
+  for (let i = 0; i < data.length; i++) {
+    h ^= data[i];
+    h = Math.imul(h, 16777619);
+  }
+  return `${data.length}:${h >>> 0}`;
+}
+function registerFont(data) {
+  const sig = signature(data);
+  if (seen.has(sig)) return;
+  seen.add(sig);
+  fonts.push(data);
+}
+function registeredFonts() {
+  return fonts.slice();
+}
+function clearRegisteredFonts() {
+  fonts.length = 0;
+  seen.clear();
+}
+
+// ../react/src/warmers.ts
+var warmers = [];
+function registerEngineWarmer(warm) {
+  if (!warmers.includes(warm)) warmers.push(warm);
+}
+async function runEngineWarmers() {
+  await Promise.all(warmers.map((w) => w().catch(() => {
+  })));
+}
+//! `interpolate` — map a value through input/output ranges, the workhorse for
+//! frame-driven animation. Mirrors Remotion's API closely.
+//! Author-facing clip shapes, normalized into the engine's {@link ShapeGeometry}.
+//! Author-facing gradient inputs, normalized into the engine's {@link Gradient}.
+//! Path morphing — the Apple/ElevenLabs "magic move": one shape continuously
+//! morphing into another. The engine draws whatever path `d` it's handed, so this
+//! is a pure authoring helper (no engine change): it returns the in-between `d`
+//! string for a given progress `t`, which you feed to a `<Path>`.
+//!
+//! Backed by flubber, which solves the hard part — point CORRESPONDENCE between
+//! two arbitrary outlines (a naive `d`-string lerp tears shapes apart). The
+//! interpolator for a given (from → to) pair is cached, so calling `morphPath`
+//! every frame is cheap.
+//! Frame context + hooks. The engine renders a composition once per frame, with
+//! the current frame supplied via React context; components read it with
+//! {@link useCurrentFrame} and compute props from it (Remotion's model).
+//! The ONDA React components. Each is a thin typed wrapper that emits an
+//! internal host element; the reconciler maps those to scene-graph nodes.
+//! ```tsx
+//! <Composition width={1200} height={360} fps={30} durationInFrames={30}>
+//!   <Rect width={1200} height={360} fill="#0a0d17" />
+//!   <Text fontSize={96} color="#fff" x={96} y={110}>Hello ONDA</Text>
+//! </Composition>
+//! ```
+//! `spring()` — natural motion as a deterministic, frame-keyed value.
+//! A damped harmonic oscillator pulled from 0 toward 1, integrated with explicit
+//! Euler at a stable sub-frame step. Pure function of `frame` (IEEE-754 math), so
+//! renders are reproducible across machines. Use it like Remotion's spring —
+//! including `durationInFrames` to re-time how fast it settles.
+//! Why sub-stepping: explicit Euler diverges unless `dt < ~2/ω`, where `ω` is the
+//! fastest rate in the system. A heavily-overdamped config like the Onda house
+//! spring (damping 200) has `ω ≈ 200`, so a naive `dt = 1/fps` (≈0.033) blows up
+//! to NaN. We pick a stable sub-frame `dt` instead, independent of `fps`.
+//! Time-shifting composition primitives — `<Sequence>`, `<Series>`, `<Loop>`.
+//! These manipulate the frame context: children inside a `<Sequence from={N}>`
+//! see `useCurrentFrame()` shifted by `-N` and render only within their window.
+//! This is Remotion's compositional grammar, the way you assemble a timeline.
+//! Seeded, deterministic randomness for frame-driven motion.
+//! Compositions must render identically every time (same frame → same pixels),
+//! so `Math.random()` is off-limits. These are pure functions of their inputs:
+//! `random(seed)` for uniform values and `noise2D/3D` for smooth, organic motion
+//! (jitter, drift, wobble). Same seed + coords always yield the same result.
+//! THE SEEDING MODEL (the convention every seeded component follows):
+//! - Every component with randomness takes a `seed` prop with a fixed default —
+//!   so an instance is deterministic out of the box and STABLE across renders,
+//!   previews and exports (same seed → same pixels, every machine).
+//! - Per-element streams derive from the seed by salting (`random(seed + i *
+//!   prime)` or `random(`${seed}-${i}-part`)`), never by consuming a stateful
+//!   generator — order of evaluation can't change the result.
+//! - Want a DIFFERENT take, not a different look? Pass `variant` (an integer):
+//!   {@link variantSeed} derives a new well-mixed seed from `(seed, variant)`,
+//!   so alternates never require hand-edited magic seeds. `variant: 0` (or
+//!   omitted) is the identity — existing renders are untouched.
+//! `<Particles>` — a deterministic particle emitter. Every particle's whole state
+//! (spawn point, velocity, age, size, opacity, colour, spin) is a PURE function of
+//! `(frame, seed, index)` via the `random(seed)` hash, so the same comp renders the
+//! same field on every frame and every machine — no `Math.random`, no wall-clock,
+//! and no engine change: each live particle is just a circle/square in one
+//! full-canvas `<Group>`. Frame-based units (velocity = px/frame, gravity =
+//! px/frame²), so it composes with the rest of the timeline.
+//! Transitions between sequences — `<TransitionSeries>`.
+//! Like `<Series>`, but consecutive sequences can *overlap* by a transition's
+//! duration, during which the outgoing scene animates out and the incoming one
+//! animates in. Built entirely on the existing primitives: a transition is just
+//! `opacity` (fade), `translate` (slide), or a `clip` mask (wipe) driven by the
+//! transition's progress — no engine support needed.
+//! <TransitionSeries>
+//!   <TransitionSeries.Sequence durationInFrames={60}><A /></TransitionSeries.Sequence>
+//!   <TransitionSeries.Transition presentation={fade()} timing={linearTiming({ durationInFrames: 20 })} />
+//!   <TransitionSeries.Sequence durationInFrames={60}><B /></TransitionSeries.Sequence>
+//! </TransitionSeries>
+//! react-reconciler host config.
+//! ONDA's scene graph is a static snapshot, so this renderer just builds a
+//! mutable tree of [`HostNode`]s as React reconciles, which `reconciler.ts` then
+//! serializes once. Mutation mode; targets **react-reconciler 0.33 (React 19)**.
+//! Render a React element tree into an ONDA scene graph.
+//! Font registry — the single source for a composition's custom fonts.
+//! An author declares a font ONCE (via `@onda-engine/components`' `loadFont`, which loads
+//! it into the author-time measurement engine AND calls `registerFont` here). The
+//! render harness (`@onda-engine/render`) then drains this registry, materializes the
+//! bytes to temp files, and hands them to the `onda` CLI (`--font`) — so the font
+//! used to MEASURE the text (glyph placement) is the same one the renderer DRAWS,
+//! with no separate flag. Same hub pattern as the engine-warmer registry: bytes
+//! flow through `@onda-engine/react`, so neither `@onda-engine/components` nor `@onda-engine/render`
+//! depends on the other.
+//! Engine-warmer registry — a hook for packages that need to load async engine
+//! assets (e.g. the wasm text-measurement module) BEFORE the synchronous frame
+//! render, so components bake exact values instead of estimates on export.
+//! `@onda-engine/react` is the shared hub: `@onda-engine/components` registers its warmer on
+//! import (`registerEngineWarmer(preloadTextMetrics)`), and `@onda-engine/render` awaits
+//! `runEngineWarmers()` before `renderFramesJSON`. No package-to-package coupling,
+//! and it's automatic — importing the components that need warming registers it.
+//! `@onda-engine/react` — write React, get an ONDA scene graph.
+
+export { AbsoluteFill, Audio, Camera, Center, Composition, Easing, Ellipse, Flex, Group, Image, Image as Img, Loop, Merge, Particles, Path, Precomp, Rect, Repeater, Scene3D, Sequence, Series, Svg, Text, TransitionSeries, Video, blur, chromaticAberration, clearRegisteredFonts, clipEllipse, clipPath, clipRect, clockWipe, crossFade, cubicBezier, depthPush, devicePullback, dipToColor, expandMorph, fade2 as fade, fbmGradient, filmBurn, flip, glassWipe, gridPixelate, interpolate, interpolateColors, iris, linearGradient, linearTiming, lumaWipe, morph, morphPath, morphPathSequence, motionBlurConfig, noise2D, noise3D, none, parseClip, parseColor, parseGradient, push, radialGradient, random, registerEngineWarmer, registerFont, registeredFonts, renderFrame, renderFrameRangeJSON, renderFrames, renderFramesJSON, renderFramesRange, renderToScene, renderToSceneJSON, runEngineWarmers, slide, spring, springTiming, typeMask, useCurrentFrame, useVideoConfig, variantSeed, whipPan, wipe, zoom, zoomBlur };
+//# sourceMappingURL=react.js.map
+//# sourceMappingURL=react.js.map