@rendiv/core 0.1.2 → 0.1.4

package/dist/index.js

@@ -1,24 +1,25 @@
-import G, { createContext as O, useContext as p, useEffect as M, forwardRef as le, useId as ae, useMemo as H, Children as J, useRef as R, useCallback as $, useState as ee } from "react";
-import { jsx as I, Fragment as se } from "react/jsx-runtime";
-const F = O({
+import G, { createContext as O, useContext as y, useEffect as N, forwardRef as ce, useId as se, useMemo as H, Children as J, useRef as x, useCallback as T, useState as ne } from "react";
+import { jsx as S, Fragment as le } from "react/jsx-runtime";
+const $ = O({
   frame: 0,
   playing: !1,
   playingRef: { current: !1 }
-}), x = O({
+}), P = O({
   id: null,
+  namePath: "",
   from: 0,
   durationInFrames: 1 / 0,
   parentOffset: 0,
   accumulatedOffset: 0,
   localOffset: 0
 });
-function Re() {
-  const e = p(F), n = p(x);
+function Ne() {
+  const e = y($), n = y(P);
   return e.frame - n.accumulatedOffset;
 }
-const D = O(null);
-function Fe() {
-  const e = p(D);
+const q = O(null);
+function xe() {
+  const e = y(q);
   if (!e)
     throw new Error(
       "useCompositionConfig() must be called inside a <Composition>, <Player>, or during rendering."
@@ -26,7 +27,7 @@ function Fe() {
   return e;
 }
 const X = () => {
-}, ne = O({
+}, te = O({
   compositions: [],
   registerComposition: X,
   unregisterComposition: X,
@@ -34,9 +35,9 @@ const X = () => {
   setCurrentCompositionId: X,
   inputProps: {}
 }), j = O(null);
-function xe(e) {
-  const { registerComposition: n, unregisterComposition: t } = p(ne), o = p(j);
-  return M(() => (n({
+function Re(e) {
+  const { registerComposition: n, unregisterComposition: t } = y(te), o = y(j);
+  return N(() => (n({
     id: e.id,
     component: e.component,
     durationInFrames: e.durationInFrames,
@@ -59,8 +60,8 @@ const ue = {
   height: "100%",
   display: "flex",
   flexDirection: "column"
-}, W = le(
-  ({ style: e, ...n }, t) => /* @__PURE__ */ I(
+}, Y = ce(
+  ({ style: e, ...n }, t) => /* @__PURE__ */ S(
     "div",
     {
       ref: t,
@@ -69,44 +70,54 @@ const ue = {
     }
   )
 );
-W.displayName = "Fill";
-const te = ({
+Y.displayName = "Fill";
+const re = ({
   from: e = 0,
   durationInFrames: n = 1 / 0,
   name: t,
   layout: o = "absolute-fill",
   style: r,
-  children: i
+  trackIndex: a = 0,
+  children: c
 }) => {
-  const c = p(x), l = p(F), u = ae(), a = c.accumulatedOffset + e, m = l.frame;
-  M(() => {
+  const i = y(P), d = y($), u = y(q), m = se(), h = t ?? "Sequence", b = `${h}[${e}]`, w = u ? `${u.id}/` : "", f = i.namePath ? `${i.namePath}/${b}` : `${w}${b}`;
+  let s = i.accumulatedOffset + e, g = n, I = a;
+  if (typeof window < "u") {
+    const v = window.__RENDIV_TIMELINE_OVERRIDES__, F = v == null ? void 0 : v.get(f);
+    F && (s = F.from, g = F.durationInFrames, F.trackIndex !== void 0 && (I = F.trackIndex));
+  }
+  const _ = I !== void 0 ? 1e4 - I : void 0, E = d.frame;
+  N(() => {
     if (typeof window > "u") return;
-    const w = window;
-    w.__RENDIV_TIMELINE_ENTRIES__ || (w.__RENDIV_TIMELINE_ENTRIES__ = /* @__PURE__ */ new Map());
-    const f = w.__RENDIV_TIMELINE_ENTRIES__, s = c.id, d = { id: u, name: t ?? "Sequence", from: a, durationInFrames: n, parentId: s };
-    return f.set(u, d), document.dispatchEvent(new CustomEvent("rendiv:timeline-sync")), () => {
-      f.delete(u), document.dispatchEvent(new CustomEvent("rendiv:timeline-sync"));
+    const p = window;
+    p.__RENDIV_TIMELINE_ENTRIES__ || (p.__RENDIV_TIMELINE_ENTRIES__ = /* @__PURE__ */ new Map());
+    const v = p.__RENDIV_TIMELINE_ENTRIES__, F = i.id, A = { id: m, name: h, namePath: f, from: s, durationInFrames: g, parentId: F };
+    return v.set(m, A), document.dispatchEvent(new CustomEvent("rendiv:timeline-sync")), () => {
+      v.delete(m), document.dispatchEvent(new CustomEvent("rendiv:timeline-sync"));
     };
-  }, [u, t, a, n]);
-  const h = H(
+  }, [m, h, f, s, g]);
+  const C = H(
     () => ({
-      id: u,
-      from: a,
-      durationInFrames: n,
-      parentOffset: c.accumulatedOffset,
-      accumulatedOffset: a,
+      id: m,
+      namePath: f,
+      from: s,
+      durationInFrames: g,
+      parentOffset: i.accumulatedOffset,
+      accumulatedOffset: s,
       localOffset: e
     }),
-    [u, a, n, c.accumulatedOffset, e]
+    [m, f, s, g, i.accumulatedOffset, e]
   );
-  if (m < a || m >= a + n) return null;
-  const b = /* @__PURE__ */ I(x.Provider, { value: h, children: i });
-  return o === "none" ? b : /* @__PURE__ */ I(W, { style: r, children: b });
+  if (E < s || E >= s + g) return null;
+  const R = /* @__PURE__ */ S(P.Provider, { value: C, children: c });
+  if (o === "none") return R;
+  const k = _ !== void 0 ? { ...r, zIndex: _ } : r;
+  return /* @__PURE__ */ S(Y, { style: k, children: R });
 };
-te.displayName = "Sequence";
+re.displayName = "Sequence";
 function $e(e) {
-  const { registerComposition: n, unregisterComposition: t } = p(ne), o = p(j);
-  return M(() => (n({
+  const { registerComposition: n, unregisterComposition: t } = y(te), o = y(j);
+  return N(() => (n({
     id: e.id,
     component: e.component,
     durationInFrames: 1,
@@ -119,65 +130,67 @@ function $e(e) {
   }), () => t(e.id)), [e.id]), null;
 }
 const fe = ({ name: e, children: n }) => {
-  const t = p(j), o = t ? `${t}/${e}` : e;
-  return /* @__PURE__ */ I(j.Provider, { value: o, children: n });
+  const t = y(j), o = t ? `${t}/${e}` : e;
+  return /* @__PURE__ */ S(j.Provider, { value: o, children: n });
 };
 fe.displayName = "Folder";
-function Y(e) {
+function Z(e) {
   throw new Error(
     "<Series.Sequence> can only be used as a direct child of <Series>."
   );
 }
-Y.displayName = "Series.Sequence";
-function re({ children: e }) {
+Z.displayName = "Series.Sequence";
+function oe({ children: e }) {
   const n = J.toArray(e);
   let t = 0;
   const o = [];
   for (const r of n) {
     if (!G.isValidElement(r)) continue;
-    if (r.type !== Y)
+    if (r.type !== Z)
       throw new Error(
         "Only <Series.Sequence> elements are allowed as children of <Series>."
       );
     const {
-      durationInFrames: i,
+      durationInFrames: a,
       offset: c = 0,
-      name: l,
-      layout: u,
-      style: a,
-      children: m
-    } = r.props, h = t + c;
-    let b = l;
-    if (!b) {
-      const w = J.toArray(m);
-      if (w.length > 0) {
-        const f = w[0];
-        if (G.isValidElement(f) && typeof f.type != "string") {
-          const s = f.type;
-          b = s.displayName || s.name;
+      name: i,
+      layout: d,
+      style: u,
+      trackIndex: m,
+      children: h
+    } = r.props, b = t + c;
+    let w = i;
+    if (!w) {
+      const f = J.toArray(h);
+      if (f.length > 0) {
+        const l = f[0];
+        if (G.isValidElement(l) && typeof l.type != "string") {
+          const s = l.type;
+          w = s.displayName || s.name;
         }
       }
     }
     o.push(
-      /* @__PURE__ */ I(
-        te,
+      /* @__PURE__ */ S(
+        re,
         {
-          from: h,
-          durationInFrames: i,
-          name: b,
-          layout: u,
-          style: a,
-          children: m
+          from: b,
+          durationInFrames: a,
+          name: w,
+          layout: d,
+          style: u,
+          trackIndex: m,
+          children: h
         },
         r.key ?? o.length
       )
-    ), t = h + i;
+    ), t = b + a;
   }
-  return /* @__PURE__ */ I(se, { children: o });
+  return /* @__PURE__ */ S(le, { children: o });
 }
-re.displayName = "Series";
-const Pe = Object.assign(re, {
-  Sequence: Y
+oe.displayName = "Series";
+const Pe = Object.assign(oe, {
+  Sequence: Z
 });
 function de({
   durationInFrames: e,
@@ -186,31 +199,32 @@ function de({
   style: o,
   children: r
 }) {
-  const i = p(F), c = p(x), l = i.frame - c.accumulatedOffset;
-  if (l < 0 || n !== 1 / 0 && l >= e * n) return null;
-  const u = l % e, a = H(
+  const a = y($), c = y(P), i = a.frame - c.accumulatedOffset;
+  if (i < 0 || n !== 1 / 0 && i >= e * n) return null;
+  const d = i % e, u = H(
     () => ({
-      frame: u + c.accumulatedOffset,
-      playing: i.playing,
-      playingRef: i.playingRef
+      frame: d + c.accumulatedOffset,
+      playing: a.playing,
+      playingRef: a.playingRef
     }),
-    [u, c.accumulatedOffset, i.playing, i.playingRef]
+    [d, c.accumulatedOffset, a.playing, a.playingRef]
   ), m = H(
     () => ({
       id: null,
+      namePath: c.namePath,
       from: c.accumulatedOffset,
       durationInFrames: e,
       parentOffset: c.accumulatedOffset,
       accumulatedOffset: c.accumulatedOffset,
       localOffset: 0
     }),
-    [c.accumulatedOffset, e]
-  ), h = /* @__PURE__ */ I(F.Provider, { value: a, children: /* @__PURE__ */ I(x.Provider, { value: m, children: r }) });
-  return t === "none" ? h : /* @__PURE__ */ I(W, { style: o, children: h });
+    [c.namePath, c.accumulatedOffset, e]
+  ), h = /* @__PURE__ */ S($.Provider, { value: u, children: /* @__PURE__ */ S(P.Provider, { value: m, children: r }) });
+  return t === "none" ? h : /* @__PURE__ */ S(Y, { style: o, children: h });
 }
 de.displayName = "Loop";
 function me({ frame: e, children: n }) {
-  const t = p(F), o = H(
+  const t = y($), o = H(
     () => ({
       frame: e,
       playing: t.playing,
@@ -218,22 +232,22 @@ function me({ frame: e, children: n }) {
     }),
     [e, t.playing, t.playingRef]
   );
-  return /* @__PURE__ */ I(F.Provider, { value: o, children: n });
+  return /* @__PURE__ */ S($.Provider, { value: o, children: n });
 }
 me.displayName = "Freeze";
 let he = 0;
 const L = /* @__PURE__ */ new Map();
-function k(e, n) {
+function V(e, n) {
   const t = ++he, o = e ?? `Handle ${t}`, { timeoutInMilliseconds: r } = n ?? {};
-  let i = null;
-  return r !== void 0 && r > 0 && (i = setTimeout(() => {
+  let a = null;
+  return r !== void 0 && r > 0 && (a = setTimeout(() => {
     if (L.has(t))
       throw L.delete(t), new Error(
         `holdRender() timed out after ${r}ms (label: "${o}"). You can increase the timeout by passing a larger timeoutInMilliseconds to holdRender().`
       );
-  }, r)), L.set(t, { label: o, timeoutId: i }), t;
+  }, r)), L.set(t, { label: o, timeoutId: a }), t;
 }
-function S(e) {
+function M(e) {
   const n = L.get(e);
   if (!n)
     throw new Error(
@@ -241,13 +255,13 @@ function S(e) {
     );
   n.timeoutId !== null && clearTimeout(n.timeoutId), L.delete(e);
 }
-function Le(e) {
+function ke(e) {
   throw new Error(`Render cancelled: ${e}`);
 }
-function Oe() {
+function Te() {
   return L.size;
 }
-function Te() {
+function Le() {
   return Array.from(L.values()).map((e) => e.label);
 }
 function ge({
@@ -256,32 +270,32 @@ function ge({
   onError: t,
   ...o
 }) {
-  const r = R(null);
-  M(() => {
-    const l = k(
+  const r = x(null);
+  N(() => {
+    const i = V(
       `Loading <Img> with src="${o.src}"`,
       { timeoutInMilliseconds: e }
     );
-    return r.current = l, () => {
-      r.current !== null && (S(r.current), r.current = null);
+    return r.current = i, () => {
+      r.current !== null && (M(r.current), r.current = null);
     };
   }, [o.src, e]);
-  const i = $(
-    (l) => {
-      r.current !== null && (S(r.current), r.current = null), n == null || n(l);
+  const a = T(
+    (i) => {
+      r.current !== null && (M(r.current), r.current = null), n == null || n(i);
     },
     [n]
-  ), c = $(
-    (l) => {
-      r.current !== null && (S(r.current), r.current = null), t == null || t(l);
+  ), c = T(
+    (i) => {
+      r.current !== null && (M(r.current), r.current = null), t == null || t(i);
     },
     [t]
   );
-  return /* @__PURE__ */ I(
+  return /* @__PURE__ */ S(
     "img",
     {
       ...o,
-      onLoad: i,
+      onLoad: a,
       onError: c
     }
   );
@@ -290,62 +304,62 @@ ge.displayName = "Img";
 const z = O({
   environment: "studio"
 });
-function oe({
+function ie({
   src: e,
   startFrom: n = 0,
   endAt: t,
   volume: o = 1,
   playbackRate: r = 1,
-  muted: i = !1,
+  muted: a = !1,
   style: c,
-  className: l,
-  holdRenderTimeout: u = 3e4,
-  ...a
+  className: i,
+  holdRenderTimeout: d = 3e4,
+  ...u
 }) {
-  const m = R(null), h = p(F), b = p(x), w = p(D), { environment: f } = p(z), s = R(null), d = R(null), y = f === "rendering", v = (w == null ? void 0 : w.fps) ?? 30, _ = h.frame - b.accumulatedOffset, C = _ + n, E = C / v;
-  M(() => {
-    const g = k(
+  const m = x(null), h = y($), b = y(P), w = y(q), { environment: f } = y(z), l = x(null), s = x(null), g = f === "rendering", I = (w == null ? void 0 : w.fps) ?? 30, _ = h.frame - b.accumulatedOffset, E = _ + n, C = E / I;
+  N(() => {
+    const p = V(
       `Loading <Video> metadata for src="${e}"`,
-      { timeoutInMilliseconds: u }
+      { timeoutInMilliseconds: d }
     );
-    return s.current = g, () => {
-      s.current !== null && (S(s.current), s.current = null);
+    return l.current = p, () => {
+      l.current !== null && (M(l.current), l.current = null);
     };
-  }, [e, u]);
-  const P = $(() => {
-    s.current !== null && (S(s.current), s.current = null);
-  }, []), T = $(() => {
-    s.current !== null && (S(s.current), s.current = null);
+  }, [e, d]);
+  const R = T(() => {
+    l.current !== null && (M(l.current), l.current = null);
+  }, []), k = T(() => {
+    l.current !== null && (M(l.current), l.current = null);
   }, []);
-  return M(() => {
-    const g = m.current;
-    g && (g.volume = o, g.muted = i);
-  }, [o, i]), M(() => {
-    const g = m.current;
-    g && (g.playbackRate = r);
-  }, [r]), M(() => {
-    const g = m.current;
-    if (g) {
-      if (t !== void 0 && C >= t) {
-        g.pause();
+  return N(() => {
+    const p = m.current;
+    p && (p.volume = o, p.muted = a);
+  }, [o, a]), N(() => {
+    const p = m.current;
+    p && (p.playbackRate = r);
+  }, [r]), N(() => {
+    const p = m.current;
+    if (p) {
+      if (t !== void 0 && E >= t) {
+        p.pause();
         return;
       }
-      if (y) {
-        if (g.pause(), d.current !== E) {
-          d.current = E;
-          const N = k(
-            `Seeking <Video> to ${E.toFixed(3)}s`,
-            { timeoutInMilliseconds: u }
-          ), V = () => {
-            S(N), g.removeEventListener("seeked", V);
+      if (g) {
+        if (p.pause(), s.current !== C) {
+          s.current = C;
+          const v = V(
+            `Seeking <Video> to ${C.toFixed(3)}s`,
+            { timeoutInMilliseconds: d }
+          ), F = () => {
+            M(v), p.removeEventListener("seeked", F);
           };
-          g.addEventListener("seeked", V), g.currentTime = E;
+          p.addEventListener("seeked", F), p.currentTime = C;
         }
       } else
-        Math.abs(g.currentTime - E) > 0.1 && (g.currentTime = E), h.playing && g.paused ? g.play().catch(() => {
-        }) : !h.playing && !g.paused && g.pause();
+        Math.abs(p.currentTime - C) > 0.1 && (p.currentTime = C), h.playing && p.paused ? p.play().catch(() => {
+        }) : !h.playing && !p.paused && p.pause();
     }
-  }, [_, y, E, h.playing, t, C, u]), /* @__PURE__ */ I(
+  }, [_, g, C, h.playing, t, E, d]), /* @__PURE__ */ S(
     "video",
     {
       ref: m,
@@ -353,34 +367,34 @@ function oe({
       preload: "auto",
       playsInline: !0,
       style: c,
-      className: l,
-      onLoadedMetadata: P,
-      onError: T,
-      ...a
+      className: i,
+      onLoadedMetadata: R,
+      onError: k,
+      ...u
     }
   );
 }
-oe.displayName = "Video";
+ie.displayName = "Video";
 function pe({
   src: e,
   startFrom: n = 0,
   endAt: t,
   volume: o = 1,
   playbackRate: r = 1,
-  muted: i = !1
+  muted: a = !1
 }) {
-  const c = R(null), l = p(F), u = p(x), a = p(D), { environment: m } = p(z), h = m === "rendering", b = (a == null ? void 0 : a.fps) ?? 30, w = l.frame - u.accumulatedOffset, f = w + n, s = f / b;
-  return M(() => {
+  const c = x(null), i = y($), d = y(P), u = y(q), { environment: m } = y(z), h = m === "rendering", b = (u == null ? void 0 : u.fps) ?? 30, w = i.frame - d.accumulatedOffset, f = w + n, l = f / b;
+  return N(() => {
     if (h) return;
-    const d = c.current;
-    if (!d) return;
-    if (d.volume = o, d.muted = i, d.playbackRate = r, t !== void 0 && f >= t) {
-      d.pause();
+    const s = c.current;
+    if (!s) return;
+    if (s.volume = o, s.muted = a, s.playbackRate = r, t !== void 0 && f >= t) {
+      s.pause();
       return;
     }
-    Math.abs(d.currentTime - s) > 0.1 && (d.currentTime = s), l.playing && d.paused ? d.play().catch(() => {
-    }) : !l.playing && !d.paused && d.pause();
-  }, [w, h, s, l.playing, o, i, r, t, f]), h ? null : /* @__PURE__ */ I(
+    Math.abs(s.currentTime - l) > 0.1 && (s.currentTime = l), i.playing && s.paused ? s.play().catch(() => {
+    }) : !i.playing && !s.paused && s.pause();
+  }, [w, h, l, i.playing, o, a, r, t, f]), h ? null : /* @__PURE__ */ S(
     "audio",
     {
       ref: c,
@@ -396,67 +410,67 @@ function ye({
   height: t,
   style: o,
   className: r,
-  holdRenderTimeout: i = 3e4
+  holdRenderTimeout: a = 3e4
 }) {
-  const c = R(null), l = p(F), u = p(x), a = p(D), m = R([]), h = R(null), [b, w] = ee(!1), f = (a == null ? void 0 : a.fps) ?? 30, s = l.frame - u.accumulatedOffset;
-  return M(() => {
-    const d = k(
+  const c = x(null), i = y($), d = y(P), u = y(q), m = x([]), h = x(null), [b, w] = ne(!1), f = (u == null ? void 0 : u.fps) ?? 30, l = i.frame - d.accumulatedOffset;
+  return N(() => {
+    const s = V(
       `Loading <AnimatedImage> frames from "${e}"`,
-      { timeoutInMilliseconds: i }
+      { timeoutInMilliseconds: a }
     );
-    h.current = d;
-    let y = !1;
-    async function v() {
+    h.current = s;
+    let g = !1;
+    async function I() {
       try {
-        const C = await (await fetch(e)).blob();
+        const E = await (await fetch(e)).blob();
         if (typeof ImageDecoder < "u") {
-          const E = new ImageDecoder({
-            data: await C.arrayBuffer(),
-            type: C.type
+          const C = new ImageDecoder({
+            data: await E.arrayBuffer(),
+            type: E.type
           });
-          await E.tracks.ready;
-          const P = E.tracks.selectedTrack;
-          if (!P) throw new Error("No image track found");
-          const T = P.frameCount, g = [];
-          for (let N = 0; N < T; N++) {
-            const V = await E.decode({ frameIndex: N }), ie = await createImageBitmap(V.image), ce = (V.image.duration ?? 1e5) / 1e3;
-            g.push({ image: ie, duration: ce }), V.image.close();
+          await C.tracks.ready;
+          const R = C.tracks.selectedTrack;
+          if (!R) throw new Error("No image track found");
+          const k = R.frameCount, p = [];
+          for (let v = 0; v < k; v++) {
+            const F = await C.decode({ frameIndex: v }), A = await createImageBitmap(F.image), ae = (F.image.duration ?? 1e5) / 1e3;
+            p.push({ image: A, duration: ae }), F.image.close();
           }
-          E.close(), y || (m.current = g, w(!0));
+          C.close(), g || (m.current = p, w(!0));
         } else {
-          const E = await createImageBitmap(C);
-          y || (m.current = [{ image: E, duration: 1 / 0 }], w(!0));
+          const C = await createImageBitmap(E);
+          g || (m.current = [{ image: C, duration: 1 / 0 }], w(!0));
         }
       } catch (_) {
         console.error("AnimatedImage: failed to decode frames", _);
       } finally {
-        h.current !== null && (S(h.current), h.current = null);
+        h.current !== null && (M(h.current), h.current = null);
       }
     }
-    return v(), () => {
-      y = !0, h.current !== null && (S(h.current), h.current = null);
+    return I(), () => {
+      g = !0, h.current !== null && (M(h.current), h.current = null);
     };
-  }, [e, i]), M(() => {
+  }, [e, a]), N(() => {
     if (!b || m.current.length === 0) return;
-    const d = c.current;
-    if (!d) return;
-    const y = d.getContext("2d");
-    if (!y) return;
-    const v = m.current, _ = s / f * 1e3;
-    let C = 0;
-    for (const N of v)
-      C += N.duration;
-    if (C <= 0) return;
-    const E = (_ % C + C) % C;
-    let P = 0, T = 0;
-    for (let N = 0; N < v.length; N++)
-      if (P += v[N].duration, E < P) {
-        T = N;
+    const s = c.current;
+    if (!s) return;
+    const g = s.getContext("2d");
+    if (!g) return;
+    const I = m.current, _ = l / f * 1e3;
+    let E = 0;
+    for (const v of I)
+      E += v.duration;
+    if (E <= 0) return;
+    const C = (_ % E + E) % E;
+    let R = 0, k = 0;
+    for (let v = 0; v < I.length; v++)
+      if (R += I[v].duration, C < R) {
+        k = v;
         break;
       }
-    const g = v[T];
-    g && (d.width = n ?? g.image.width, d.height = t ?? g.image.height, y.clearRect(0, 0, d.width, d.height), y.drawImage(g.image, 0, 0, d.width, d.height));
-  }, [s, f, b, n, t]), /* @__PURE__ */ I(
+    const p = I[k];
+    p && (s.width = n ?? p.image.width, s.height = t ?? p.image.height, g.clearRect(0, 0, s.width, s.height), g.drawImage(p.image, 0, 0, s.width, s.height));
+  }, [l, f, b, n, t]), /* @__PURE__ */ S(
     "canvas",
     {
       ref: c,
@@ -474,141 +488,141 @@ function we({
   onError: t,
   ...o
 }) {
-  const r = R(null);
-  M(() => {
-    const l = k(
+  const r = x(null);
+  N(() => {
+    const i = V(
       `Loading <IFrame> with src="${o.src}"`,
       { timeoutInMilliseconds: e }
     );
-    return r.current = l, () => {
-      r.current !== null && (S(r.current), r.current = null);
+    return r.current = i, () => {
+      r.current !== null && (M(r.current), r.current = null);
     };
   }, [o.src, e]);
-  const i = $(
-    (l) => {
-      r.current !== null && (S(r.current), r.current = null), n == null || n(l);
+  const a = T(
+    (i) => {
+      r.current !== null && (M(r.current), r.current = null), n == null || n(i);
     },
     [n]
-  ), c = $(
-    (l) => {
-      r.current !== null && (S(r.current), r.current = null), t == null || t(l);
+  ), c = T(
+    (i) => {
+      r.current !== null && (M(r.current), r.current = null), t == null || t(i);
     },
     [t]
   );
-  return /* @__PURE__ */ I(
+  return /* @__PURE__ */ S(
     "iframe",
     {
       ...o,
-      onLoad: i,
+      onLoad: a,
       onError: c
     }
   );
 }
 we.displayName = "IFrame";
-function be({
+function Ie({
   src: e,
   startFrom: n = 0,
   endAt: t,
   volume: o = 1,
   playbackRate: r = 1,
-  muted: i = !1,
+  muted: a = !1,
   style: c,
-  className: l,
-  holdRenderTimeout: u = 3e4
+  className: i,
+  holdRenderTimeout: d = 3e4
 }) {
-  const a = p(F), m = p(x), h = p(D), { environment: b } = p(z), w = b === "rendering", f = (h == null ? void 0 : h.fps) ?? 30, d = a.frame - m.accumulatedOffset + n, y = d / f;
-  return w ? /* @__PURE__ */ I(
-    ve,
+  const u = y($), m = y(P), h = y(q), { environment: b } = y(z), w = b === "rendering", f = (h == null ? void 0 : h.fps) ?? 30, s = u.frame - m.accumulatedOffset + n, g = s / f;
+  return w ? /* @__PURE__ */ S(
+    be,
     {
       src: e,
-      currentTime: y,
-      videoFrame: d,
+      currentTime: g,
+      videoFrame: s,
       endAt: t,
       style: c,
-      className: l,
-      holdRenderTimeout: u
+      className: i,
+      holdRenderTimeout: d
     }
-  ) : /* @__PURE__ */ I(
-    oe,
+  ) : /* @__PURE__ */ S(
+    ie,
     {
       src: e,
       startFrom: n,
       endAt: t,
       volume: o,
       playbackRate: r,
-      muted: i,
+      muted: a,
       style: c,
-      className: l,
-      holdRenderTimeout: u
+      className: i,
+      holdRenderTimeout: d
     }
   );
 }
-be.displayName = "OffthreadVideo";
-function ve({
+Ie.displayName = "OffthreadVideo";
+function be({
   src: e,
   currentTime: n,
   videoFrame: t,
   endAt: o,
   style: r,
-  className: i,
+  className: a,
   holdRenderTimeout: c
 }) {
-  const [l, u] = ee(null), a = R(null), m = R(null);
+  const [i, d] = ne(null), u = x(null), m = x(null);
   if (o !== void 0 && t >= o)
     return null;
-  M(() => {
-    const w = k(
+  N(() => {
+    const w = V(
       `Extracting <OffthreadVideo> frame at ${n.toFixed(3)}s from "${e}"`,
       { timeoutInMilliseconds: c }
     );
-    a.current = w;
+    u.current = w;
     const f = new URLSearchParams({
       src: e,
       time: String(n)
-    }), s = `${window.location.origin}/__offthread_video__?${f.toString()}`;
-    let d = !1;
-    return fetch(s).then((y) => {
-      if (!y.ok)
-        throw new Error(`OffthreadVideo: Failed to extract frame (HTTP ${y.status})`);
-      return y.blob();
-    }).then((y) => {
-      if (d) return;
+    }), l = `${window.location.origin}/__offthread_video__?${f.toString()}`;
+    let s = !1;
+    return fetch(l).then((g) => {
+      if (!g.ok)
+        throw new Error(`OffthreadVideo: Failed to extract frame (HTTP ${g.status})`);
+      return g.blob();
+    }).then((g) => {
+      if (s) return;
       m.current && URL.revokeObjectURL(m.current);
-      const v = URL.createObjectURL(y);
-      m.current = v, u(v);
-    }).catch((y) => {
-      console.error("OffthreadVideo frame extraction error:", y), a.current !== null && (S(a.current), a.current = null);
+      const I = URL.createObjectURL(g);
+      m.current = I, d(I);
+    }).catch((g) => {
+      console.error("OffthreadVideo frame extraction error:", g), u.current !== null && (M(u.current), u.current = null);
     }), () => {
-      d = !0, a.current !== null && (S(a.current), a.current = null);
+      s = !0, u.current !== null && (M(u.current), u.current = null);
     };
-  }, [n, e, c]), M(() => () => {
+  }, [n, e, c]), N(() => () => {
     m.current && (URL.revokeObjectURL(m.current), m.current = null);
   }, []);
-  const h = $(() => {
-    a.current !== null && (S(a.current), a.current = null);
-  }, []), b = $(() => {
-    a.current !== null && (S(a.current), a.current = null);
+  const h = T(() => {
+    u.current !== null && (M(u.current), u.current = null);
+  }, []), b = T(() => {
+    u.current !== null && (M(u.current), u.current = null);
   }, []);
-  return l ? /* @__PURE__ */ I(
+  return i ? /* @__PURE__ */ S(
     "img",
     {
-      src: l,
+      src: i,
       style: r,
-      className: i,
+      className: a,
       onLoad: h,
       onError: b,
       alt: ""
     }
   ) : null;
 }
-function Ie(e, n) {
+function ve(e, n) {
   for (let t = 1; t < n.length; t++)
     if (e <= n[t]) return t - 1;
   return n.length - 2;
 }
-function A(e, n, t, o, r, i) {
+function B(e, n, t, o, r, a) {
   let c;
-  return n === t ? c = 0 : c = (e - n) / (t - n), i && (c = i(c)), o + c * (r - o);
+  return n === t ? c = 0 : c = (e - n) / (t - n), a && (c = a(c)), o + c * (r - o);
 }
 function U(e, n, t, o) {
   if (n.length !== t.length)
@@ -617,16 +631,16 @@ function U(e, n, t, o) {
     );
   if (n.length < 2)
     throw new Error("inputRange and outputRange must have at least 2 elements.");
-  for (let u = 1; u < n.length; u++)
-    if (n[u] < n[u - 1])
+  for (let d = 1; d < n.length; d++)
+    if (n[d] < n[d - 1])
       throw new Error("inputRange must be monotonically non-decreasing.");
   const {
     easing: r,
-    extrapolateLeft: i = "extend",
+    extrapolateLeft: a = "extend",
     extrapolateRight: c = "extend"
   } = o ?? {};
   if (e < n[0])
-    return i === "clamp" ? t[0] : i === "identity" ? e : A(
+    return a === "clamp" ? t[0] : a === "identity" ? e : B(
       e,
       n[0],
       n[1],
@@ -639,119 +653,119 @@ function U(e, n, t, o) {
       return t[t.length - 1];
     if (c === "identity")
       return e;
-    const u = n.length - 1;
-    return A(
+    const d = n.length - 1;
+    return B(
       e,
-      n[u - 1],
-      n[u],
-      t[u - 1],
-      t[u],
+      n[d - 1],
+      n[d],
+      t[d - 1],
+      t[d],
       r
     );
   }
-  const l = Ie(e, n);
-  return A(
+  const i = ve(e, n);
+  return B(
     e,
-    n[l],
-    n[l + 1],
-    t[l],
-    t[l + 1],
+    n[i],
+    n[i + 1],
+    t[i],
+    t[i + 1],
     r
   );
 }
-function Ce(e, n, t, o, r, i, c) {
-  const l = -o * (e - t), u = -r * n, a = (l + u) / i, m = n + a * c;
+function Ee(e, n, t, o, r, a, c) {
+  const i = -o * (e - t), d = -r * n, u = (i + d) / a, m = n + u * c;
   return { position: e + m * c, velocity: m };
 }
-function Ee(e) {
+function Ce(e) {
   const {
     frame: n,
     fps: t,
     config: o = {},
     from: r = 0,
-    to: i = 1,
+    to: a = 1,
     durationInFrames: c,
-    durationRestThreshold: l = 5e-3
+    durationRestThreshold: i = 5e-3
   } = e, {
-    damping: u = 10,
-    mass: a = 1,
+    damping: d = 10,
+    mass: u = 1,
     stiffness: m = 100,
     clampOvershoot: h = !1
   } = o;
   if (n < 0) return r;
   if (c !== void 0 && n >= c)
-    return i;
+    return a;
   const b = 1 / t, w = 4, f = b / w;
-  let s = r, d = 0;
-  for (let y = 0; y < n; y++) {
-    for (let v = 0; v < w; v++) {
-      const _ = Ce(s, d, i, m, u, a, f);
-      s = _.position, d = _.velocity;
+  let l = r, s = 0;
+  for (let g = 0; g < n; g++) {
+    for (let I = 0; I < w; I++) {
+      const _ = Ee(l, s, a, m, d, u, f);
+      l = _.position, s = _.velocity;
     }
-    if (h && (r < i ? s = Math.min(s, i) : s = Math.max(s, i), s === i && (d = 0)), Math.abs(s - i) < l && Math.abs(d) < l)
-      return i;
+    if (h && (r < a ? l = Math.min(l, a) : l = Math.max(l, a), l === a && (s = 0)), Math.abs(l - a) < i && Math.abs(s) < i)
+      return a;
   }
-  return s;
+  return l;
 }
-function Ve(e) {
+function Oe(e) {
   const {
     fps: n,
     config: t,
     from: o = 0,
     to: r = 1,
-    threshold: i = 5e-3
+    threshold: a = 5e-3
   } = e, c = n * 60;
-  for (let l = 0; l < c; l++) {
-    const u = Ee({
-      frame: l,
+  for (let i = 0; i < c; i++) {
+    const d = Ce({
+      frame: i,
       fps: n,
       config: t,
       from: o,
       to: r,
-      durationRestThreshold: i
+      durationRestThreshold: a
     });
-    if (Math.abs(u - r) < i)
-      return l;
+    if (Math.abs(d - r) < a)
+      return i;
   }
   return c;
 }
-function q(e, n, t, o) {
-  const r = 3 * e, i = 3 * (t - e) - r, c = 1 - r - i, l = 3 * n, u = 3 * (o - n) - l, a = 1 - l - u;
+function D(e, n, t, o) {
+  const r = 3 * e, a = 3 * (t - e) - r, c = 1 - r - a, i = 3 * n, d = 3 * (o - n) - i, u = 1 - i - d;
   function m(f) {
-    return ((c * f + i) * f + r) * f;
+    return ((c * f + a) * f + r) * f;
   }
   function h(f) {
-    return ((a * f + u) * f + l) * f;
+    return ((u * f + d) * f + i) * f;
   }
   function b(f) {
-    return (3 * c * f + 2 * i) * f + r;
+    return (3 * c * f + 2 * a) * f + r;
   }
   function w(f) {
-    let s = f;
-    for (let v = 0; v < 8; v++) {
-      const _ = m(s) - f;
-      if (Math.abs(_) < 1e-7) return s;
-      const C = b(s);
-      if (Math.abs(C) < 1e-7) break;
-      s -= _ / C;
+    let l = f;
+    for (let I = 0; I < 8; I++) {
+      const _ = m(l) - f;
+      if (Math.abs(_) < 1e-7) return l;
+      const E = b(l);
+      if (Math.abs(E) < 1e-7) break;
+      l -= _ / E;
     }
-    let d = 0, y = 1;
-    for (s = f; d < y; ) {
-      const v = m(s);
-      if (Math.abs(v - f) < 1e-7) return s;
-      f > v ? d = s : y = s, s = (d + y) / 2;
+    let s = 0, g = 1;
+    for (l = f; s < g; ) {
+      const I = m(l);
+      if (Math.abs(I - f) < 1e-7) return l;
+      f > I ? s = l : g = l, l = (s + g) / 2;
     }
-    return s;
+    return l;
   }
   return (f) => f <= 0 ? 0 : f >= 1 ? 1 : h(w(f));
 }
-const ke = {
+const Ve = {
   linear: ((e) => e),
-  ease: q(0.25, 0.1, 0.25, 1),
-  easeIn: q(0.42, 0, 1, 1),
-  easeOut: q(0, 0, 0.58, 1),
-  easeInOut: q(0.42, 0, 0.58, 1),
-  bezier: q,
+  ease: D(0.25, 0.1, 0.25, 1),
+  easeIn: D(0.42, 0, 1, 1),
+  easeOut: D(0, 0, 0.58, 1),
+  easeInOut: D(0.42, 0, 0.58, 1),
+  bezier: D,
   bounce: ((e) => e < 1 / 2.75 ? 7.5625 * e * e : e < 2 / 2.75 ? 7.5625 * (e -= 1.5 / 2.75) * e + 0.75 : e < 2.5 / 2.75 ? 7.5625 * (e -= 2.25 / 2.75) * e + 0.9375 : 7.5625 * (e -= 2.625 / 2.75) * e + 0.984375),
   elastic: (e = 1) => {
     const n = 0.3 / Math.max(e, 1e-3);
@@ -785,7 +799,7 @@ function Q(e) {
     ];
   throw new Error(`Cannot parse color: ${e}`);
 }
-const Z = {
+const ee = {
   black: "#000000",
   white: "#ffffff",
   red: "#ff0000",
@@ -803,8 +817,8 @@ const Z = {
 };
 function Se(e) {
   const n = e.trim().toLowerCase();
-  if (Z[n]) {
-    const t = Z[n];
+  if (ee[n]) {
+    const t = ee[n];
     return t.startsWith("#") ? K(t) : Q(t);
   }
   if (n.startsWith("#"))
@@ -813,49 +827,49 @@ function Se(e) {
     return Q(n);
   throw new Error(`Unsupported color format: ${e}`);
 }
-function Me(e) {
+function _e(e) {
   const [n, t, o, r] = e;
   return r === 1 ? `rgb(${Math.round(n)}, ${Math.round(t)}, ${Math.round(o)})` : `rgba(${Math.round(n)}, ${Math.round(t)}, ${Math.round(o)}, ${Number(r.toFixed(3))})`;
 }
 function qe(e, n, t, o) {
   if (n.length !== t.length)
     throw new Error("inputRange and outputRange must have the same length.");
-  const r = t.map(Se), i = U(
+  const r = t.map(Se), a = U(
     e,
     n,
-    r.map((a) => a[0]),
+    r.map((u) => u[0]),
     o
   ), c = U(
     e,
     n,
-    r.map((a) => a[1]),
+    r.map((u) => u[1]),
     o
-  ), l = U(
+  ), i = U(
     e,
     n,
-    r.map((a) => a[2]),
+    r.map((u) => u[2]),
     o
-  ), u = U(
+  ), d = U(
     e,
     n,
-    r.map((a) => a[3]),
+    r.map((u) => u[3]),
     o
   );
-  return Me([
-    Math.max(0, Math.min(255, i)),
+  return _e([
+    Math.max(0, Math.min(255, a)),
     Math.max(0, Math.min(255, c)),
-    Math.max(0, Math.min(255, l)),
-    Math.max(0, Math.min(1, u))
+    Math.max(0, Math.min(255, i)),
+    Math.max(0, Math.min(1, d))
   ]);
 }
-let B = null;
+let W = null;
 function De(e) {
-  if (B !== null)
+  if (W !== null)
     throw new Error("setRootComponent() can only be called once.");
-  B = e;
+  W = e;
 }
 function Ue() {
-  return B;
+  return W;
 }
 function He(e) {
   return `/${e.startsWith("/") ? e.slice(1) : e}`;
@@ -864,14 +878,14 @@ function je() {
   return typeof window < "u" && window.__RENDIV_INPUT_PROPS__ ? window.__RENDIV_INPUT_PROPS__ : {};
 }
 function ze() {
-  const { environment: e } = p(z);
+  const { environment: e } = y(z);
   return {
     isStudio: e === "studio",
     isRendering: e === "rendering",
     isPlayer: e === "player"
   };
 }
-function Xe() {
+function Ae() {
   if (typeof window < "u") {
     const e = window.__RENDIV_ENVIRONMENT__;
     return {
@@ -882,45 +896,45 @@ function Xe() {
   }
   return { isStudio: !1, isRendering: !1, isPlayer: !1 };
 }
-const Ae = O(null);
+const Xe = O(null);
 export {
   ye as AnimatedImage,
   pe as Audio,
-  xe as Composition,
-  D as CompositionContext,
-  ne as CompositionManagerContext,
-  ke as Easing,
-  W as Fill,
+  Re as Composition,
+  q as CompositionContext,
+  te as CompositionManagerContext,
+  Ve as Easing,
+  Y as Fill,
   fe as Folder,
   j as FolderContext,
   me as Freeze,
   we as IFrame,
   ge as Img,
   de as Loop,
-  be as OffthreadVideo,
+  Ie as OffthreadVideo,
   z as RendivEnvironmentContext,
-  te as Sequence,
-  x as SequenceContext,
+  re as Sequence,
+  P as SequenceContext,
   Pe as Series,
   $e as Still,
-  F as TimelineContext,
-  Ae as TimelineRegistryContext,
-  oe as Video,
-  Le as abortRender,
+  $ as TimelineContext,
+  Xe as TimelineRegistryContext,
+  ie as Video,
+  ke as abortRender,
   qe as blendColors,
   je as getInputProps,
-  Oe as getPendingHoldCount,
-  Te as getPendingHoldLabels,
-  Xe as getRendivEnvironment,
+  Te as getPendingHoldCount,
+  Le as getPendingHoldLabels,
+  Ae as getRendivEnvironment,
   Ue as getRootComponent,
-  Ve as getSpringDuration,
-  k as holdRender,
+  Oe as getSpringDuration,
+  V as holdRender,
   U as interpolate,
-  S as releaseRender,
+  M as releaseRender,
   De as setRootComponent,
-  Ee as spring,
+  Ce as spring,
   He as staticFile,
-  Fe as useCompositionConfig,
-  Re as useFrame,
+  xe as useCompositionConfig,
+  Ne as useFrame,
   ze as useRendivEnvironment
 };