remotion 4.0.371 → 4.0.373

package/dist/esm/index.mjs

@@ -110,7 +110,7 @@ function truthy(value) {
 }
 
 // src/version.ts
-var VERSION = "4.0.371";
+var VERSION = "4.0.373";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -149,10 +149,10 @@ var Null = () => {
 // src/Sequence.tsx
 import {
   forwardRef as forwardRef2,
-  useContext as useContext11,
+  useContext as useContext12,
   useEffect as useEffect3,
-  useMemo as useMemo9,
-  useState as useState5
+  useMemo as useMemo10,
+  useState as useState6
 } from "react";
 
 // src/AbsoluteFill.tsx
@@ -306,28 +306,47 @@ var SequenceManagerProvider = ({ children }) => {
   });
 };
 
-// src/nonce.ts
-import { createContext as createContext4, useContext as useContext2, useEffect, useRef, useState as useState2 } from "react";
-var NonceContext = createContext4({
-  getNonce: () => 0,
-  fastRefreshes: 0,
-  manualRefreshes: 0
-});
-var SetNonceContext = createContext4({
-  increaseManualRefreshes: () => {}
-});
-var useNonce = () => {
-  const context = useContext2(NonceContext);
-  const [nonce, setNonce] = useState2(() => context.getNonce());
-  const lastContext = useRef(context);
-  useEffect(() => {
-    if (lastContext.current === context) {
-      return;
-    }
-    lastContext.current = context;
-    setNonce(context.getNonce);
-  }, [context]);
-  return nonce;
+// src/TimelineContext.tsx
+import {
+  createContext as createContext9,
+  useLayoutEffect,
+  useMemo as useMemo7,
+  useRef as useRef2,
+  useState as useState5
+} from "react";
+
+// src/random.ts
+function mulberry32(a) {
+  let t = a + 1831565813;
+  t = Math.imul(t ^ t >>> 15, t | 1);
+  t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+  return ((t ^ t >>> 14) >>> 0) / 4294967296;
+}
+function hashCode(str) {
+  let i = 0;
+  let chr = 0;
+  let hash = 0;
+  for (i = 0;i < str.length; i++) {
+    chr = str.charCodeAt(i);
+    hash = (hash << 5) - hash + chr;
+    hash |= 0;
+  }
+  return hash;
+}
+var random = (seed, dummy) => {
+  if (dummy !== undefined) {
+    throw new TypeError("random() takes only one argument");
+  }
+  if (seed === null) {
+    return Math.random();
+  }
+  if (typeof seed === "string") {
+    return mulberry32(hashCode(seed));
+  }
+  if (typeof seed === "number") {
+    return mulberry32(seed * 10000000000);
+  }
+  throw new Error("random() argument must be a number or a string");
 };
 
 // src/timeline-position-state.ts
@@ -338,14 +357,12 @@ __export(exports_timeline_position_state, {
   usePlayingState: () => usePlayingState,
   persistCurrentFrame: () => persistCurrentFrame,
   getInitialFrameState: () => getInitialFrameState,
-  getFrameForComposition: () => getFrameForComposition,
-  TimelineContext: () => TimelineContext,
-  SetTimelineContext: () => SetTimelineContext
+  getFrameForComposition: () => getFrameForComposition
 });
-import { createContext as createContext8, useContext as useContext6, useMemo as useMemo6 } from "react";
+import { useContext as useContext6, useMemo as useMemo6 } from "react";
 
 // src/use-remotion-environment.ts
-import { useContext as useContext3, useState as useState3 } from "react";
+import { useContext as useContext2, useState as useState2 } from "react";
 
 // src/remotion-environment-context.ts
 import React4 from "react";
@@ -353,8 +370,8 @@ var RemotionEnvironmentContext = React4.createContext(null);
 
 // src/use-remotion-environment.ts
 var useRemotionEnvironment = () => {
-  const context = useContext3(RemotionEnvironmentContext);
-  const [env] = useState3(() => getRemotionEnvironment());
+  const context = useContext2(RemotionEnvironmentContext);
+  const [env] = useState2(() => getRemotionEnvironment());
   return context ?? env;
 };
 
@@ -362,14 +379,14 @@ var useRemotionEnvironment = () => {
 import { useContext as useContext5, useMemo as useMemo5 } from "react";
 
 // src/CompositionManagerContext.tsx
-import { createContext as createContext5 } from "react";
-var CompositionManager = createContext5({
+import { createContext as createContext4 } from "react";
+var CompositionManager = createContext4({
   compositions: [],
   folders: [],
   currentCompositionMetadata: null,
   canvasContent: null
 });
-var CompositionSetters = createContext5({
+var CompositionSetters = createContext4({
   registerComposition: () => {
     return;
   },
@@ -405,13 +422,13 @@ import {
 
 // src/EditorProps.tsx
 import React5, {
-  createContext as createContext6,
+  createContext as createContext5,
   useCallback as useCallback2,
   useImperativeHandle,
   useMemo as useMemo3
 } from "react";
 import { jsx as jsx4 } from "react/jsx-runtime";
-var EditorPropsContext = createContext6({
+var EditorPropsContext = createContext5({
   props: {},
   updateProps: () => {
     throw new Error("Not implemented");
@@ -577,6 +594,30 @@ var getInputProps = () => {
   return parsed;
 };
 
+// src/nonce.ts
+import { createContext as createContext6, useContext as useContext3, useEffect, useRef, useState as useState3 } from "react";
+var NonceContext = createContext6({
+  getNonce: () => 0,
+  fastRefreshes: 0,
+  manualRefreshes: 0
+});
+var SetNonceContext = createContext6({
+  increaseManualRefreshes: () => {}
+});
+var useNonce = () => {
+  const context = useContext3(NonceContext);
+  const [nonce, setNonce] = useState3(() => context.getNonce());
+  const lastContext = useRef(context);
+  useEffect(() => {
+    if (lastContext.current === context) {
+      return;
+    }
+    lastContext.current = context;
+    setNonce(context.getNonce);
+  }, [context]);
+  return nonce;
+};
+
 // src/codec.ts
 var validCodecs = [
   "h264",
@@ -1164,27 +1205,6 @@ var useVideo = () => {
 };
 
 // src/timeline-position-state.ts
-var TimelineContext = createContext8({
-  frame: {},
-  playing: false,
-  playbackRate: 1,
-  rootId: "",
-  imperativePlaying: {
-    current: false
-  },
-  setPlaybackRate: () => {
-    throw new Error("default");
-  },
-  audioAndVideoTags: { current: [] }
-});
-var SetTimelineContext = createContext8({
-  setFrame: () => {
-    throw new Error("default");
-  },
-  setPlaying: () => {
-    throw new Error("default");
-  }
-});
 var makeKey = () => {
   return `remotion.time-all`;
 };
@@ -1227,29 +1247,309 @@ var usePlayingState = () => {
   return useMemo6(() => [playing, setPlaying, imperativePlaying], [imperativePlaying, playing, setPlaying]);
 };
 
+// src/use-delay-render.tsx
+import { createContext as createContext8, useCallback as useCallback4, useContext as useContext7 } from "react";
+
+// src/cancel-render.ts
+var isErrorLike = (err) => {
+  if (err instanceof Error) {
+    return true;
+  }
+  if (err === null) {
+    return false;
+  }
+  if (typeof err !== "object") {
+    return false;
+  }
+  if (!("stack" in err)) {
+    return false;
+  }
+  if (typeof err.stack !== "string") {
+    return false;
+  }
+  if (!("message" in err)) {
+    return false;
+  }
+  if (typeof err.message !== "string") {
+    return false;
+  }
+  return true;
+};
+function cancelRender(err) {
+  let error;
+  if (isErrorLike(err)) {
+    error = err;
+    if (!error.stack) {
+      error.stack = new Error(error.message).stack;
+    }
+  } else if (typeof err === "string") {
+    error = Error(err);
+  } else {
+    error = Error("Rendering was cancelled");
+  }
+  window.remotion_cancelledError = error.stack;
+  throw error;
+}
+
+// src/log.ts
+var logLevels = ["trace", "verbose", "info", "warn", "error"];
+var getNumberForLogLevel = (level) => {
+  return logLevels.indexOf(level);
+};
+var isEqualOrBelowLogLevel = (currentLevel, level) => {
+  return getNumberForLogLevel(currentLevel) <= getNumberForLogLevel(level);
+};
+var transformArgs = ({
+  args,
+  logLevel,
+  tag
+}) => {
+  const arr = [...args];
+  if (getRemotionEnvironment().isRendering && !getRemotionEnvironment().isClientSideRendering) {
+    arr.unshift(Symbol.for(`__remotion_level_${logLevel}`));
+  }
+  if (tag && getRemotionEnvironment().isRendering && !getRemotionEnvironment().isClientSideRendering) {
+    arr.unshift(Symbol.for(`__remotion_tag_${tag}`));
+  }
+  return arr;
+};
+var verbose = (options, ...args) => {
+  if (isEqualOrBelowLogLevel(options.logLevel, "verbose")) {
+    return console.debug(...transformArgs({ args, logLevel: "verbose", tag: options.tag }));
+  }
+};
+var trace = (options, ...args) => {
+  if (isEqualOrBelowLogLevel(options.logLevel, "trace")) {
+    return console.debug(...transformArgs({ args, logLevel: "trace", tag: options.tag }));
+  }
+};
+var info = (options, ...args) => {
+  if (isEqualOrBelowLogLevel(options.logLevel, "info")) {
+    return console.log(...transformArgs({ args, logLevel: "info", tag: options.tag }));
+  }
+};
+var warn = (options, ...args) => {
+  if (isEqualOrBelowLogLevel(options.logLevel, "warn")) {
+    return console.warn(...transformArgs({ args, logLevel: "warn", tag: options.tag }));
+  }
+};
+var error = (options, ...args) => {
+  return console.error(...transformArgs({ args, logLevel: "error", tag: options.tag }));
+};
+var Log = {
+  trace,
+  verbose,
+  info,
+  warn,
+  error
+};
+
+// src/delay-render.ts
+var handles = [];
+if (typeof window !== "undefined") {
+  window.remotion_renderReady = false;
+  if (!window.remotion_delayRenderTimeouts) {
+    window.remotion_delayRenderTimeouts = {};
+  }
+}
+var DELAY_RENDER_CALLSTACK_TOKEN = "The delayRender was called:";
+var DELAY_RENDER_RETRIES_LEFT = "Retries left: ";
+var DELAY_RENDER_RETRY_TOKEN = "- Rendering the frame will be retried.";
+var DELAY_RENDER_CLEAR_TOKEN = "handle was cleared after";
+var defaultTimeout = 30000;
+var delayRenderInternal = (scope, environment, label, options) => {
+  if (typeof label !== "string" && typeof label !== "undefined") {
+    throw new Error("The label parameter of delayRender() must be a string or undefined, got: " + JSON.stringify(label));
+  }
+  const handle = Math.random();
+  handles.push(handle);
+  const called = Error().stack?.replace(/^Error/g, "") ?? "";
+  if (environment.isRendering) {
+    const timeoutToUse = (options?.timeoutInMilliseconds ?? (typeof scope === "undefined" ? defaultTimeout : scope.remotion_puppeteerTimeout ?? defaultTimeout)) - 2000;
+    if (typeof scope !== "undefined") {
+      const retriesLeft = (options?.retries ?? 0) - (scope.remotion_attempt - 1);
+      scope.remotion_delayRenderTimeouts[handle] = {
+        label: label ?? null,
+        startTime: Date.now(),
+        timeout: setTimeout(() => {
+          const message = [
+            `A delayRender()`,
+            label ? `"${label}"` : null,
+            `was called but not cleared after ${timeoutToUse}ms. See https://remotion.dev/docs/timeout for help.`,
+            retriesLeft > 0 ? DELAY_RENDER_RETRIES_LEFT + retriesLeft : null,
+            retriesLeft > 0 ? DELAY_RENDER_RETRY_TOKEN : null,
+            DELAY_RENDER_CALLSTACK_TOKEN,
+            called
+          ].filter(truthy).join(" ");
+          cancelRender(Error(message));
+        }, timeoutToUse)
+      };
+    }
+  }
+  if (typeof scope !== "undefined") {
+    scope.remotion_renderReady = false;
+  }
+  return handle;
+};
+var delayRender = (label, options) => {
+  return delayRenderInternal(typeof window !== "undefined" ? window : undefined, getRemotionEnvironment(), label, options);
+};
+var continueRenderInternal = (scope, handle, environment) => {
+  if (typeof handle === "undefined") {
+    throw new TypeError("The continueRender() method must be called with a parameter that is the return value of delayRender(). No value was passed.");
+  }
+  if (typeof handle !== "number") {
+    throw new TypeError("The parameter passed into continueRender() must be the return value of delayRender() which is a number. Got: " + JSON.stringify(handle));
+  }
+  handles = handles.filter((h) => {
+    if (h === handle) {
+      if (environment.isRendering && scope !== undefined) {
+        if (!scope.remotion_delayRenderTimeouts[handle]) {
+          return false;
+        }
+        const { label, startTime, timeout } = scope.remotion_delayRenderTimeouts[handle];
+        clearTimeout(timeout);
+        const message = [
+          label ? `"${label}"` : "A handle",
+          DELAY_RENDER_CLEAR_TOKEN,
+          `${Date.now() - startTime}ms`
+        ].filter(truthy).join(" ");
+        Log.verbose({ logLevel: window.remotion_logLevel, tag: "delayRender()" }, message);
+        delete scope.remotion_delayRenderTimeouts[handle];
+      }
+      return false;
+    }
+    return true;
+  });
+  if (handles.length === 0 && typeof scope !== "undefined") {
+    scope.remotion_renderReady = true;
+  }
+};
+var continueRender = (handle) => {
+  continueRenderInternal(typeof window !== "undefined" ? window : undefined, handle, getRemotionEnvironment());
+};
+
+// src/use-delay-render.tsx
+var DelayRenderContextType = createContext8(null);
+var useDelayRender = () => {
+  const environment = useRemotionEnvironment();
+  const scope = useContext7(DelayRenderContextType);
+  const delayRender2 = useCallback4((label, options) => {
+    return delayRenderInternal(scope ?? (typeof window !== "undefined" ? window : undefined), environment, label, options);
+  }, [environment, scope]);
+  const continueRender2 = useCallback4((handle) => {
+    continueRenderInternal(scope ?? (typeof window !== "undefined" ? window : undefined), handle, environment);
+  }, [environment, scope]);
+  return { delayRender: delayRender2, continueRender: continueRender2 };
+};
+
+// src/TimelineContext.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var SetTimelineContext = createContext9({
+  setFrame: () => {
+    throw new Error("default");
+  },
+  setPlaying: () => {
+    throw new Error("default");
+  }
+});
+var TimelineContext = createContext9({
+  frame: {},
+  playing: false,
+  playbackRate: 1,
+  rootId: "",
+  imperativePlaying: {
+    current: false
+  },
+  setPlaybackRate: () => {
+    throw new Error("default");
+  },
+  audioAndVideoTags: { current: [] }
+});
+var TimelineContextProvider = ({ children, frameState }) => {
+  const [playing, setPlaying] = useState5(false);
+  const imperativePlaying = useRef2(false);
+  const [playbackRate, setPlaybackRate] = useState5(1);
+  const audioAndVideoTags = useRef2([]);
+  const [remotionRootId] = useState5(() => String(random(null)));
+  const [_frame, setFrame] = useState5(() => getInitialFrameState());
+  const frame = frameState ?? _frame;
+  const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
+  if (typeof window !== "undefined") {
+    useLayoutEffect(() => {
+      window.remotion_setFrame = (f, composition, attempt) => {
+        window.remotion_attempt = attempt;
+        const id = delayRender2(`Setting the current frame to ${f}`);
+        let asyncUpdate = true;
+        setFrame((s) => {
+          const currentFrame = s[composition] ?? window.remotion_initialFrame;
+          if (currentFrame === f) {
+            asyncUpdate = false;
+            return s;
+          }
+          return {
+            ...s,
+            [composition]: f
+          };
+        });
+        if (asyncUpdate) {
+          requestAnimationFrame(() => continueRender2(id));
+        } else {
+          continueRender2(id);
+        }
+      };
+      window.remotion_isPlayer = false;
+    }, [continueRender2, delayRender2]);
+  }
+  const timelineContextValue = useMemo7(() => {
+    return {
+      frame,
+      playing,
+      imperativePlaying,
+      rootId: remotionRootId,
+      playbackRate,
+      setPlaybackRate,
+      audioAndVideoTags
+    };
+  }, [frame, playbackRate, playing, remotionRootId]);
+  const setTimelineContextValue = useMemo7(() => {
+    return {
+      setFrame,
+      setPlaying
+    };
+  }, []);
+  return /* @__PURE__ */ jsx6(TimelineContext.Provider, {
+    value: timelineContextValue,
+    children: /* @__PURE__ */ jsx6(SetTimelineContext.Provider, {
+      value: setTimelineContextValue,
+      children
+    })
+  });
+};
+
 // src/use-video-config.ts
-import { useContext as useContext8 } from "react";
+import { useContext as useContext9 } from "react";
 
 // src/CanUseRemotionHooks.tsx
-import { createContext as createContext9 } from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
-var CanUseRemotionHooks = createContext9(false);
+import { createContext as createContext10 } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var CanUseRemotionHooks = createContext10(false);
 var CanUseRemotionHooksProvider = ({ children }) => {
-  return /* @__PURE__ */ jsx6(CanUseRemotionHooks.Provider, {
+  return /* @__PURE__ */ jsx7(CanUseRemotionHooks.Provider, {
     value: true,
     children
   });
 };
 
 // src/use-unsafe-video-config.ts
-import { useContext as useContext7, useMemo as useMemo7 } from "react";
+import { useContext as useContext8, useMemo as useMemo8 } from "react";
 var useUnsafeVideoConfig = () => {
-  const context = useContext7(SequenceContext);
+  const context = useContext8(SequenceContext);
   const ctxWidth = context?.width ?? null;
   const ctxHeight = context?.height ?? null;
   const ctxDuration = context?.durationInFrames ?? null;
   const video = useVideo();
-  return useMemo7(() => {
+  return useMemo8(() => {
     if (!video) {
       return null;
     }
@@ -1287,7 +1587,7 @@ var useUnsafeVideoConfig = () => {
 // src/use-video-config.ts
 var useVideoConfig = () => {
   const videoConfig = useUnsafeVideoConfig();
-  const context = useContext8(CanUseRemotionHooks);
+  const context = useContext9(CanUseRemotionHooks);
   const isPlayer = useIsPlayer();
   if (!videoConfig) {
     if (typeof window !== "undefined" && window.remotion_isPlayer || isPlayer) {
@@ -1306,12 +1606,12 @@ var useVideoConfig = () => {
 };
 
 // src/freeze.tsx
-import { useContext as useContext10, useMemo as useMemo8 } from "react";
+import { useContext as useContext11, useMemo as useMemo9 } from "react";
 
 // src/use-current-frame.ts
-import { useContext as useContext9 } from "react";
+import { useContext as useContext10 } from "react";
 var useCurrentFrame = () => {
-  const canUseRemotionHooks = useContext9(CanUseRemotionHooks);
+  const canUseRemotionHooks = useContext10(CanUseRemotionHooks);
   const env = useRemotionEnvironment();
   if (!canUseRemotionHooks) {
     if (env.isPlayer) {
@@ -1320,13 +1620,13 @@ var useCurrentFrame = () => {
     throw new Error(`useCurrentFrame() can only be called inside a component that was registered as a composition. See https://www.remotion.dev/docs/the-fundamentals#defining-compositions`);
   }
   const frame = useTimelinePosition();
-  const context = useContext9(SequenceContext);
+  const context = useContext10(SequenceContext);
   const contextOffset = context ? context.cumulatedFrom + context.relativeFrom : 0;
   return frame - contextOffset;
 };
 
 // src/freeze.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var Freeze = ({
   frame: frameToFreeze,
   children,
@@ -1346,7 +1646,7 @@ var Freeze = ({
   if (!Number.isFinite(frameToFreeze)) {
     throw new Error(`The 'frame' prop of <Freeze /> must be a finite number, but it is ${frameToFreeze}.`);
   }
-  const isActive = useMemo8(() => {
+  const isActive = useMemo9(() => {
     if (typeof active === "boolean") {
       return active;
     }
@@ -1354,10 +1654,10 @@ var Freeze = ({
       return active(frame);
     }
   }, [active, frame]);
-  const timelineContext = useContext10(TimelineContext);
-  const sequenceContext = useContext10(SequenceContext);
+  const timelineContext = useContext11(TimelineContext);
+  const sequenceContext = useContext11(SequenceContext);
   const relativeFrom = sequenceContext?.relativeFrom ?? 0;
-  const timelineValue = useMemo8(() => {
+  const timelineValue = useMemo9(() => {
     if (!isActive) {
       return timelineContext;
     }
@@ -1372,7 +1672,7 @@ var Freeze = ({
       }
     };
   }, [isActive, timelineContext, videoConfig.id, frameToFreeze, relativeFrom]);
-  const newSequenceContext = useMemo8(() => {
+  const newSequenceContext = useMemo9(() => {
     if (!sequenceContext) {
       return null;
     }
@@ -1385,9 +1685,9 @@ var Freeze = ({
       cumulatedFrom: 0
     };
   }, [sequenceContext, isActive]);
-  return /* @__PURE__ */ jsx7(TimelineContext.Provider, {
+  return /* @__PURE__ */ jsx8(TimelineContext.Provider, {
     value: timelineValue,
-    children: /* @__PURE__ */ jsx7(SequenceContext.Provider, {
+    children: /* @__PURE__ */ jsx8(SequenceContext.Provider, {
       value: newSequenceContext,
       children
     })
@@ -1395,7 +1695,7 @@ var Freeze = ({
 };
 
 // src/Sequence.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var RegularSequenceRefForwardingFunction = ({
   from = 0,
   durationInFrames = Infinity,
@@ -1411,9 +1711,9 @@ var RegularSequenceRefForwardingFunction = ({
   ...other
 }, ref) => {
   const { layout = "absolute-fill" } = other;
-  const [id] = useState5(() => String(Math.random()));
-  const parentSequence = useContext11(SequenceContext);
-  const { rootId } = useContext11(TimelineContext);
+  const [id] = useState6(() => String(Math.random()));
+  const parentSequence = useContext12(SequenceContext);
+  const { rootId } = useContext12(TimelineContext);
   const cumulatedFrom = parentSequence ? parentSequence.cumulatedFrom + parentSequence.relativeFrom : 0;
   const nonce = useNonce();
   if (layout !== "absolute-fill" && layout !== "none") {
@@ -1438,15 +1738,15 @@ var RegularSequenceRefForwardingFunction = ({
   const videoConfig = useVideoConfig();
   const parentSequenceDuration = parentSequence ? Math.min(parentSequence.durationInFrames - from, durationInFrames) : durationInFrames;
   const actualDurationInFrames = Math.max(0, Math.min(videoConfig.durationInFrames - from, parentSequenceDuration));
-  const { registerSequence, unregisterSequence } = useContext11(SequenceManager);
-  const { hidden } = useContext11(SequenceVisibilityToggleContext);
-  const premounting = useMemo9(() => {
+  const { registerSequence, unregisterSequence } = useContext12(SequenceManager);
+  const { hidden } = useContext12(SequenceVisibilityToggleContext);
+  const premounting = useMemo10(() => {
     return parentSequence?.premounting || Boolean(other._remotionInternalIsPremounting);
   }, [other._remotionInternalIsPremounting, parentSequence?.premounting]);
-  const postmounting = useMemo9(() => {
+  const postmounting = useMemo10(() => {
     return parentSequence?.postmounting || Boolean(other._remotionInternalIsPostmounting);
   }, [other._remotionInternalIsPostmounting, parentSequence?.postmounting]);
-  const contextValue = useMemo9(() => {
+  const contextValue = useMemo10(() => {
     return {
       cumulatedFrom,
       relativeFrom: from,
@@ -1473,7 +1773,7 @@ var RegularSequenceRefForwardingFunction = ({
     premountDisplay,
     postmountDisplay
   ]);
-  const timelineClipName = useMemo9(() => {
+  const timelineClipName = useMemo10(() => {
     return name ?? "";
   }, [name]);
   const env = useRemotionEnvironment();
@@ -1521,7 +1821,7 @@ var RegularSequenceRefForwardingFunction = ({
   const endThreshold = Math.ceil(cumulatedFrom + from + durationInFrames - 1);
   const content = absoluteFrame < cumulatedFrom + from ? null : absoluteFrame > endThreshold ? null : children;
   const styleIfThere = other.layout === "none" ? undefined : other.style;
-  const defaultStyle = useMemo9(() => {
+  const defaultStyle = useMemo10(() => {
     return {
       flexDirection: undefined,
       ...width ? { width } : {},
@@ -1536,9 +1836,9 @@ var RegularSequenceRefForwardingFunction = ({
   if (isSequenceHidden) {
     return null;
   }
-  return /* @__PURE__ */ jsx8(SequenceContext.Provider, {
+  return /* @__PURE__ */ jsx9(SequenceContext.Provider, {
     value: contextValue,
-    children: content === null ? null : other.layout === "none" ? content : /* @__PURE__ */ jsx8(AbsoluteFill, {
+    children: content === null ? null : other.layout === "none" ? content : /* @__PURE__ */ jsx9(AbsoluteFill, {
       ref,
       style: defaultStyle,
       className: other.className,
@@ -1567,7 +1867,7 @@ var PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
   const postmountingActive = frame > endThreshold && frame <= endThreshold + postmountFor;
   const freezeFrame = premountingActive ? from : postmountingActive ? from + durationInFrames - 1 : 0;
   const isFreezingActive = premountingActive || postmountingActive;
-  const style = useMemo9(() => {
+  const style = useMemo10(() => {
     return {
       ...passedStyle,
       opacity: premountingActive || postmountingActive ? 0 : 1,
@@ -1582,246 +1882,52 @@ var PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
     styleWhilePremounted,
     styleWhilePostmounted
   ]);
-  return /* @__PURE__ */ jsx8(Freeze, {
+  return /* @__PURE__ */ jsx9(Freeze, {
     frame: freezeFrame,
     active: isFreezingActive,
-    children: /* @__PURE__ */ jsx8(Sequence, {
+    children: /* @__PURE__ */ jsx9(Sequence, {
       ref,
       from,
       durationInFrames,
       style,
       _remotionInternalPremountDisplay: premountFor,
       _remotionInternalPostmountDisplay: postmountFor,
-      _remotionInternalIsPremounting: premountingActive,
-      _remotionInternalIsPostmounting: postmountingActive,
-      ...otherProps
-    })
-  });
-};
-var PremountedPostmountedSequence = forwardRef2(PremountedPostmountedSequenceRefForwardingFunction);
-var SequenceRefForwardingFunction = (props, ref) => {
-  const env = useRemotionEnvironment();
-  if (props.layout !== "none" && !env.isRendering) {
-    if (props.premountFor || props.postmountFor) {
-      return /* @__PURE__ */ jsx8(PremountedPostmountedSequence, {
-        ...props,
-        ref
-      });
-    }
-  }
-  return /* @__PURE__ */ jsx8(RegularSequence, {
-    ...props,
-    ref
-  });
-};
-var Sequence = forwardRef2(SequenceRefForwardingFunction);
-// src/animated-image/AnimatedImage.tsx
-import {
-  forwardRef as forwardRef3,
-  useEffect as useEffect4,
-  useImperativeHandle as useImperativeHandle4,
-  useLayoutEffect,
-  useRef as useRef3,
-  useState as useState6
-} from "react";
-
-// src/cancel-render.ts
-var isErrorLike = (err) => {
-  if (err instanceof Error) {
-    return true;
-  }
-  if (err === null) {
-    return false;
-  }
-  if (typeof err !== "object") {
-    return false;
-  }
-  if (!("stack" in err)) {
-    return false;
-  }
-  if (typeof err.stack !== "string") {
-    return false;
-  }
-  if (!("message" in err)) {
-    return false;
-  }
-  if (typeof err.message !== "string") {
-    return false;
-  }
-  return true;
-};
-function cancelRender(err) {
-  let error;
-  if (isErrorLike(err)) {
-    error = err;
-    if (!error.stack) {
-      error.stack = new Error(error.message).stack;
-    }
-  } else if (typeof err === "string") {
-    error = Error(err);
-  } else {
-    error = Error("Rendering was cancelled");
-  }
-  window.remotion_cancelledError = error.stack;
-  throw error;
-}
-
-// src/use-delay-render.ts
-import { useCallback as useCallback4 } from "react";
-
-// src/log.ts
-var logLevels = ["trace", "verbose", "info", "warn", "error"];
-var getNumberForLogLevel = (level) => {
-  return logLevels.indexOf(level);
-};
-var isEqualOrBelowLogLevel = (currentLevel, level) => {
-  return getNumberForLogLevel(currentLevel) <= getNumberForLogLevel(level);
-};
-var transformArgs = ({
-  args,
-  logLevel,
-  tag
-}) => {
-  const arr = [...args];
-  if (getRemotionEnvironment().isRendering && !getRemotionEnvironment().isClientSideRendering) {
-    arr.unshift(Symbol.for(`__remotion_level_${logLevel}`));
-  }
-  if (tag && getRemotionEnvironment().isRendering && !getRemotionEnvironment().isClientSideRendering) {
-    arr.unshift(Symbol.for(`__remotion_tag_${tag}`));
-  }
-  return arr;
-};
-var verbose = (options, ...args) => {
-  if (isEqualOrBelowLogLevel(options.logLevel, "verbose")) {
-    return console.debug(...transformArgs({ args, logLevel: "verbose", tag: options.tag }));
-  }
-};
-var trace = (options, ...args) => {
-  if (isEqualOrBelowLogLevel(options.logLevel, "trace")) {
-    return console.debug(...transformArgs({ args, logLevel: "trace", tag: options.tag }));
-  }
-};
-var info = (options, ...args) => {
-  if (isEqualOrBelowLogLevel(options.logLevel, "info")) {
-    return console.log(...transformArgs({ args, logLevel: "info", tag: options.tag }));
-  }
-};
-var warn = (options, ...args) => {
-  if (isEqualOrBelowLogLevel(options.logLevel, "warn")) {
-    return console.warn(...transformArgs({ args, logLevel: "warn", tag: options.tag }));
-  }
-};
-var error = (options, ...args) => {
-  return console.error(...transformArgs({ args, logLevel: "error", tag: options.tag }));
-};
-var Log = {
-  trace,
-  verbose,
-  info,
-  warn,
-  error
-};
-
-// src/delay-render.ts
-var handles = [];
-if (typeof window !== "undefined") {
-  window.remotion_renderReady = false;
-  if (!window.remotion_delayRenderTimeouts) {
-    window.remotion_delayRenderTimeouts = {};
-  }
-}
-var DELAY_RENDER_CALLSTACK_TOKEN = "The delayRender was called:";
-var DELAY_RENDER_RETRIES_LEFT = "Retries left: ";
-var DELAY_RENDER_RETRY_TOKEN = "- Rendering the frame will be retried.";
-var DELAY_RENDER_CLEAR_TOKEN = "handle was cleared after";
-var defaultTimeout = 30000;
-var delayRenderInternal = (environment, label, options) => {
-  if (typeof label !== "string" && typeof label !== "undefined") {
-    throw new Error("The label parameter of delayRender() must be a string or undefined, got: " + JSON.stringify(label));
-  }
-  const handle = Math.random();
-  handles.push(handle);
-  const called = Error().stack?.replace(/^Error/g, "") ?? "";
-  if (environment.isRendering) {
-    const timeoutToUse = (options?.timeoutInMilliseconds ?? (typeof window === "undefined" ? defaultTimeout : window.remotion_puppeteerTimeout ?? defaultTimeout)) - 2000;
-    if (typeof window !== "undefined") {
-      const retriesLeft = (options?.retries ?? 0) - (window.remotion_attempt - 1);
-      window.remotion_delayRenderTimeouts[handle] = {
-        label: label ?? null,
-        startTime: Date.now(),
-        timeout: setTimeout(() => {
-          const message = [
-            `A delayRender()`,
-            label ? `"${label}"` : null,
-            `was called but not cleared after ${timeoutToUse}ms. See https://remotion.dev/docs/timeout for help.`,
-            retriesLeft > 0 ? DELAY_RENDER_RETRIES_LEFT + retriesLeft : null,
-            retriesLeft > 0 ? DELAY_RENDER_RETRY_TOKEN : null,
-            DELAY_RENDER_CALLSTACK_TOKEN,
-            called
-          ].filter(truthy).join(" ");
-          cancelRender(Error(message));
-        }, timeoutToUse)
-      };
-    }
-  }
-  if (typeof window !== "undefined") {
-    window.remotion_renderReady = false;
-  }
-  return handle;
-};
-var delayRender = (label, options) => {
-  return delayRenderInternal(getRemotionEnvironment(), label, options);
+      _remotionInternalIsPremounting: premountingActive,
+      _remotionInternalIsPostmounting: postmountingActive,
+      ...otherProps
+    })
+  });
 };
-var continueRenderInternal = (handle, environment) => {
-  if (typeof handle === "undefined") {
-    throw new TypeError("The continueRender() method must be called with a parameter that is the return value of delayRender(). No value was passed.");
-  }
-  if (typeof handle !== "number") {
-    throw new TypeError("The parameter passed into continueRender() must be the return value of delayRender() which is a number. Got: " + JSON.stringify(handle));
-  }
-  handles = handles.filter((h) => {
-    if (h === handle) {
-      if (environment.isRendering) {
-        if (!window.remotion_delayRenderTimeouts[handle]) {
-          return false;
-        }
-        const { label, startTime, timeout } = window.remotion_delayRenderTimeouts[handle];
-        clearTimeout(timeout);
-        const message = [
-          label ? `"${label}"` : "A handle",
-          DELAY_RENDER_CLEAR_TOKEN,
-          `${Date.now() - startTime}ms`
-        ].filter(truthy).join(" ");
-        Log.verbose({ logLevel: window.remotion_logLevel, tag: "delayRender()" }, message);
-        delete window.remotion_delayRenderTimeouts[handle];
-      }
-      return false;
+var PremountedPostmountedSequence = forwardRef2(PremountedPostmountedSequenceRefForwardingFunction);
+var SequenceRefForwardingFunction = (props, ref) => {
+  const env = useRemotionEnvironment();
+  if (props.layout !== "none" && !env.isRendering) {
+    if (props.premountFor || props.postmountFor) {
+      return /* @__PURE__ */ jsx9(PremountedPostmountedSequence, {
+        ...props,
+        ref
+      });
     }
-    return true;
-  });
-  if (handles.length === 0 && typeof window !== "undefined") {
-    window.remotion_renderReady = true;
   }
+  return /* @__PURE__ */ jsx9(RegularSequence, {
+    ...props,
+    ref
+  });
 };
-var continueRender = (handle) => {
-  continueRenderInternal(handle, getRemotionEnvironment());
-};
-
-// src/use-delay-render.ts
-var useDelayRender = () => {
-  const environment = useRemotionEnvironment();
-  const delayRender2 = useCallback4((label, options) => {
-    return delayRenderInternal(environment, label, options);
-  }, [environment]);
-  const continueRender2 = useCallback4((handle) => {
-    continueRenderInternal(handle, environment);
-  }, [environment]);
-  return { delayRender: delayRender2, continueRender: continueRender2 };
-};
+var Sequence = forwardRef2(SequenceRefForwardingFunction);
+// src/animated-image/AnimatedImage.tsx
+import {
+  forwardRef as forwardRef3,
+  useEffect as useEffect4,
+  useImperativeHandle as useImperativeHandle4,
+  useLayoutEffect as useLayoutEffect2,
+  useRef as useRef4,
+  useState as useState7
+} from "react";
 
 // src/animated-image/canvas.tsx
-import React9, { useCallback as useCallback5, useImperativeHandle as useImperativeHandle3, useRef as useRef2 } from "react";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import React10, { useCallback as useCallback5, useImperativeHandle as useImperativeHandle3, useRef as useRef3 } from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var calcArgs = (fit, frameSize, canvasSize) => {
   switch (fit) {
     case "fill": {
@@ -1871,7 +1977,7 @@ var calcArgs = (fit, frameSize, canvasSize) => {
   }
 };
 var CanvasRefForwardingFunction = ({ width, height, fit, className, style }, ref) => {
-  const canvasRef = useRef2(null);
+  const canvasRef = useRef3(null);
   const draw = useCallback5((imageData) => {
     const canvas = canvasRef.current;
     const canvasWidth = width ?? imageData.displayWidth;
@@ -1911,13 +2017,13 @@ var CanvasRefForwardingFunction = ({ width, height, fit, className, style }, ref
       }
     };
   }, [draw]);
-  return /* @__PURE__ */ jsx9("canvas", {
+  return /* @__PURE__ */ jsx10("canvas", {
     ref: canvasRef,
     className,
     style
   });
 };
-var Canvas = React9.forwardRef(CanvasRefForwardingFunction);
+var Canvas = React10.forwardRef(CanvasRefForwardingFunction);
 
 // src/animated-image/decode-image.ts
 var CACHE_SIZE = 5;
@@ -2070,7 +2176,7 @@ var resolveAnimatedImageSource = (src) => {
 };
 
 // src/animated-image/AnimatedImage.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var AnimatedImage = forwardRef3(({
   src,
   width,
@@ -2081,7 +2187,7 @@ var AnimatedImage = forwardRef3(({
   fit = "fill",
   ...props
 }, canvasRef) => {
-  const mountState = useRef3({ isMounted: true });
+  const mountState = useRef4({ isMounted: true });
   useEffect4(() => {
     const { current } = mountState;
     current.isMounted = true;
@@ -2090,15 +2196,15 @@ var AnimatedImage = forwardRef3(({
     };
   }, []);
   const resolvedSrc = resolveAnimatedImageSource(src);
-  const [imageDecoder, setImageDecoder] = useState6(null);
+  const [imageDecoder, setImageDecoder] = useState7(null);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const [decodeHandle] = useState6(() => delayRender2(`Rendering <AnimatedImage/> with src="${resolvedSrc}"`));
+  const [decodeHandle] = useState7(() => delayRender2(`Rendering <AnimatedImage/> with src="${resolvedSrc}"`));
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
   const currentTime = frame / playbackRate / fps;
-  const currentTimeRef = useRef3(currentTime);
+  const currentTimeRef = useRef4(currentTime);
   currentTimeRef.current = currentTime;
-  const ref = useRef3(null);
+  const ref = useRef4(null);
   useImperativeHandle4(canvasRef, () => {
     const c = ref.current?.getCanvas();
     if (!c) {
@@ -2106,7 +2212,7 @@ var AnimatedImage = forwardRef3(({
     }
     return c;
   }, []);
-  const [initialLoopBehavior] = useState6(() => loopBehavior);
+  const [initialLoopBehavior] = useState7(() => loopBehavior);
   useEffect4(() => {
     const controller = new AbortController;
     decodeImage({
@@ -2139,7 +2245,7 @@ var AnimatedImage = forwardRef3(({
     initialLoopBehavior,
     continueRender2
   ]);
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     if (!imageDecoder) {
       return;
     }
@@ -2170,7 +2276,7 @@ var AnimatedImage = forwardRef3(({
     continueRender2,
     delayRender2
   ]);
-  return /* @__PURE__ */ jsx10(Canvas, {
+  return /* @__PURE__ */ jsx11(Canvas, {
     ref,
     width,
     height,
@@ -2179,15 +2285,15 @@ var AnimatedImage = forwardRef3(({
   });
 });
 // src/Artifact.tsx
-import { useContext as useContext12, useEffect as useEffect5, useState as useState8 } from "react";
+import { useContext as useContext13, useEffect as useEffect5, useState as useState9 } from "react";
 
 // src/RenderAssetManager.tsx
 import {
-  createContext as createContext10,
+  createContext as createContext11,
   useCallback as useCallback6,
-  useLayoutEffect as useLayoutEffect2,
-  useMemo as useMemo10,
-  useState as useState7
+  useLayoutEffect as useLayoutEffect3,
+  useMemo as useMemo11,
+  useState as useState8
 } from "react";
 
 // src/validation/validate-artifact.ts
@@ -2222,8 +2328,8 @@ var validateRenderAsset = (artifact) => {
 };
 
 // src/RenderAssetManager.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
-var RenderAssetManager = createContext10({
+import { jsx as jsx12 } from "react/jsx-runtime";
+var RenderAssetManager = createContext11({
   registerRenderAsset: () => {
     return;
   },
@@ -2233,7 +2339,7 @@ var RenderAssetManager = createContext10({
   renderAssets: []
 });
 var RenderAssetManagerProvider = ({ children }) => {
-  const [renderAssets, setRenderAssets] = useState7([]);
+  const [renderAssets, setRenderAssets] = useState8([]);
   const registerRenderAsset = useCallback6((renderAsset) => {
     validateRenderAsset(renderAsset);
     setRenderAssets((assets) => {
@@ -2245,7 +2351,7 @@ var RenderAssetManagerProvider = ({ children }) => {
       return assts.filter((a) => a.id !== id);
     });
   }, []);
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     if (typeof window !== "undefined") {
       window.remotion_collectAssets = () => {
         setRenderAssets([]);
@@ -2253,14 +2359,14 @@ var RenderAssetManagerProvider = ({ children }) => {
       };
     }
   }, [renderAssets]);
-  const contextValue = useMemo10(() => {
+  const contextValue = useMemo11(() => {
     return {
       registerRenderAsset,
       unregisterRenderAsset,
       renderAssets
     };
   }, [renderAssets, registerRenderAsset, unregisterRenderAsset]);
-  return /* @__PURE__ */ jsx11(RenderAssetManager.Provider, {
+  return /* @__PURE__ */ jsx12(RenderAssetManager.Provider, {
     value: contextValue,
     children
   });
@@ -2269,10 +2375,10 @@ var RenderAssetManagerProvider = ({ children }) => {
 // src/Artifact.tsx
 var ArtifactThumbnail = Symbol("Thumbnail");
 var Artifact = ({ filename, content, downloadBehavior }) => {
-  const { registerRenderAsset, unregisterRenderAsset } = useContext12(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext13(RenderAssetManager);
   const env = useRemotionEnvironment();
   const frame = useCurrentFrame();
-  const [id] = useState8(() => {
+  const [id] = useState9(() => {
     return String(Math.random());
   });
   useEffect5(() => {
@@ -2326,7 +2432,7 @@ var Artifact = ({ filename, content, downloadBehavior }) => {
 };
 Artifact.Thumbnail = ArtifactThumbnail;
 // src/audio/Audio.tsx
-import { forwardRef as forwardRef6, useCallback as useCallback11, useContext as useContext26 } from "react";
+import { forwardRef as forwardRef6, useCallback as useCallback11, useContext as useContext27 } from "react";
 
 // src/absolute-src.ts
 var getAbsoluteSrc = (relativeSrc) => {
@@ -2358,11 +2464,11 @@ var calculateMediaDuration = ({
 };
 
 // src/loop/index.tsx
-import React10, { createContext as createContext11, useMemo as useMemo11 } from "react";
-import { jsx as jsx12 } from "react/jsx-runtime";
-var LoopContext = createContext11(null);
+import React11, { createContext as createContext12, useMemo as useMemo12 } from "react";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var LoopContext = createContext12(null);
 var useLoop = () => {
-  return React10.useContext(LoopContext);
+  return React11.useContext(LoopContext);
 };
 var Loop = ({ durationInFrames, times = Infinity, children, name, ...props }) => {
   const currentFrame = useCurrentFrame();
@@ -2387,22 +2493,22 @@ var Loop = ({ durationInFrames, times = Infinity, children, name, ...props }) =>
   const iteration = Math.floor(currentFrame / durationInFrames);
   const start = iteration * durationInFrames;
   const from = Math.min(start, maxFrame);
-  const loopDisplay = useMemo11(() => {
+  const loopDisplay = useMemo12(() => {
     return {
       numberOfTimes: actualTimes,
       startOffset: -from,
       durationInFrames
     };
   }, [actualTimes, durationInFrames, from]);
-  const loopContext = useMemo11(() => {
+  const loopContext = useMemo12(() => {
     return {
       iteration: Math.floor(currentFrame / durationInFrames),
       durationInFrames
     };
   }, [currentFrame, durationInFrames]);
-  return /* @__PURE__ */ jsx12(LoopContext.Provider, {
+  return /* @__PURE__ */ jsx13(LoopContext.Provider, {
     value: loopContext,
-    children: /* @__PURE__ */ jsx12(Sequence, {
+    children: /* @__PURE__ */ jsx13(Sequence, {
       durationInFrames,
       from,
       name: name ?? "<Loop>",
@@ -2416,7 +2522,7 @@ var Loop = ({ durationInFrames, times = Infinity, children, name, ...props }) =>
 Loop.useLoop = useLoop;
 
 // src/prefetch.ts
-import { useContext as useContext13 } from "react";
+import { useContext as useContext14 } from "react";
 
 // src/playback-logging.ts
 var playbackLogging = ({
@@ -2430,9 +2536,9 @@ var playbackLogging = ({
 };
 
 // src/prefetch-state.tsx
-import { createContext as createContext12, useEffect as useEffect6, useState as useState9 } from "react";
-import { jsx as jsx13 } from "react/jsx-runtime";
-var PreloadContext = createContext12({});
+import { createContext as createContext13, useEffect as useEffect6, useState as useState10 } from "react";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var PreloadContext = createContext13({});
 var preloads = {};
 var updaters = [];
 var setPreloads = (updater) => {
@@ -2440,7 +2546,7 @@ var setPreloads = (updater) => {
   updaters.forEach((u) => u());
 };
 var PrefetchProvider = ({ children }) => {
-  const [_preloads, _setPreloads] = useState9(() => preloads);
+  const [_preloads, _setPreloads] = useState10(() => preloads);
   useEffect6(() => {
     const updaterFunction = () => {
       _setPreloads(preloads);
@@ -2450,7 +2556,7 @@ var PrefetchProvider = ({ children }) => {
       updaters = updaters.filter((u) => u !== updaterFunction);
     };
   }, []);
-  return /* @__PURE__ */ jsx13(PreloadContext.Provider, {
+  return /* @__PURE__ */ jsx14(PreloadContext.Provider, {
     value: _preloads,
     children
   });
@@ -2472,7 +2578,7 @@ var getSrcWithoutHash = (src) => {
   return src.slice(0, hashIndex);
 };
 var usePreload = (src) => {
-  const preloads2 = useContext13(PreloadContext);
+  const preloads2 = useContext14(PreloadContext);
   const hashFragmentIndex = removeAndGetHashFragment(src);
   const withoutHashFragment = getSrcWithoutHash(src);
   if (!preloads2[withoutHashFragment]) {
@@ -2745,8 +2851,8 @@ var resolveTrimProps = ({
 };
 
 // src/video/duration-state.tsx
-import { createContext as createContext13, useMemo as useMemo12, useReducer } from "react";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { createContext as createContext14, useMemo as useMemo13, useReducer } from "react";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var durationReducer = (state, action) => {
   switch (action.type) {
     case "got-duration": {
@@ -2763,7 +2869,7 @@ var durationReducer = (state, action) => {
       return state;
   }
 };
-var DurationsContext = createContext13({
+var DurationsContext = createContext14({
   durations: {},
   setDurations: () => {
     throw new Error("context missing");
@@ -2771,13 +2877,13 @@ var DurationsContext = createContext13({
 });
 var DurationsContextProvider = ({ children }) => {
   const [durations, setDurations] = useReducer(durationReducer, {});
-  const value = useMemo12(() => {
+  const value = useMemo13(() => {
     return {
       durations,
       setDurations
     };
   }, [durations]);
-  return /* @__PURE__ */ jsx14(DurationsContext.Provider, {
+  return /* @__PURE__ */ jsx15(DurationsContext.Provider, {
     value,
     children
   });
@@ -2786,12 +2892,12 @@ var DurationsContextProvider = ({ children }) => {
 // src/audio/AudioForPreview.tsx
 import {
   forwardRef as forwardRef4,
-  useContext as useContext24,
+  useContext as useContext25,
   useEffect as useEffect14,
   useImperativeHandle as useImperativeHandle5,
-  useMemo as useMemo20,
-  useRef as useRef11,
-  useState as useState14
+  useMemo as useMemo21,
+  useRef as useRef12,
+  useState as useState15
 } from "react";
 
 // src/get-cross-origin-value.ts
@@ -2809,74 +2915,40 @@ var getCrossOriginValue = ({
 };
 
 // src/log-level-context.tsx
-import { createContext as createContext14 } from "react";
-import * as React13 from "react";
-var LogLevelContext = createContext14({
+import { createContext as createContext15 } from "react";
+import * as React14 from "react";
+var LogLevelContext = createContext15({
   logLevel: "info",
   mountTime: 0
 });
 var useLogLevel = () => {
-  const { logLevel } = React13.useContext(LogLevelContext);
+  const { logLevel } = React14.useContext(LogLevelContext);
   if (logLevel === null) {
     throw new Error("useLogLevel must be used within a LogLevelProvider");
   }
   return logLevel;
 };
 var useMountTime = () => {
-  const { mountTime } = React13.useContext(LogLevelContext);
+  const { mountTime } = React14.useContext(LogLevelContext);
   if (mountTime === null) {
     throw new Error("useMountTime must be used within a LogLevelProvider");
   }
   return mountTime;
 };
 
-// src/random.ts
-function mulberry32(a) {
-  let t = a + 1831565813;
-  t = Math.imul(t ^ t >>> 15, t | 1);
-  t ^= t + Math.imul(t ^ t >>> 7, t | 61);
-  return ((t ^ t >>> 14) >>> 0) / 4294967296;
-}
-function hashCode(str) {
-  let i = 0;
-  let chr = 0;
-  let hash = 0;
-  for (i = 0;i < str.length; i++) {
-    chr = str.charCodeAt(i);
-    hash = (hash << 5) - hash + chr;
-    hash |= 0;
-  }
-  return hash;
-}
-var random = (seed, dummy) => {
-  if (dummy !== undefined) {
-    throw new TypeError("random() takes only one argument");
-  }
-  if (seed === null) {
-    return Math.random();
-  }
-  if (typeof seed === "string") {
-    return mulberry32(hashCode(seed));
-  }
-  if (typeof seed === "number") {
-    return mulberry32(seed * 10000000000);
-  }
-  throw new Error("random() argument must be a number or a string");
-};
-
 // src/use-amplification.ts
-import { useContext as useContext16, useLayoutEffect as useLayoutEffect3, useRef as useRef6 } from "react";
+import { useContext as useContext17, useLayoutEffect as useLayoutEffect4, useRef as useRef7 } from "react";
 
 // src/audio/shared-audio-tags.tsx
-import React14, {
-  createContext as createContext15,
+import React15, {
+  createContext as createContext16,
   createRef as createRef2,
   useCallback as useCallback7,
-  useContext as useContext15,
+  useContext as useContext16,
   useEffect as useEffect7,
-  useMemo as useMemo14,
-  useRef as useRef4,
-  useState as useState10
+  useMemo as useMemo15,
+  useRef as useRef5,
+  useState as useState11
 } from "react";
 
 // src/play-and-handle-not-allowed-error.ts
@@ -2964,7 +3036,7 @@ var makeSharedElementSourceNode = ({
 };
 
 // src/audio/use-audio-context.ts
-import { useMemo as useMemo13 } from "react";
+import { useMemo as useMemo14 } from "react";
 var warned = false;
 var warnOnce = (logLevel) => {
   if (warned) {
@@ -2976,7 +3048,7 @@ var warnOnce = (logLevel) => {
   }
 };
 var useSingletonAudioContext = (logLevel, latencyHint) => {
-  const audioContext = useMemo13(() => {
+  const audioContext = useMemo14(() => {
     if (typeof AudioContext === "undefined") {
       warnOnce(logLevel);
       return null;
@@ -2989,7 +3061,7 @@ var useSingletonAudioContext = (logLevel, latencyHint) => {
 };
 
 // src/audio/shared-audio-tags.tsx
-import { jsx as jsx15, jsxs } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs } from "react/jsx-runtime";
 var EMPTY_AUDIO = "data:audio/mp3;base64,/+MYxAAJcAV8AAgAABn//////+/gQ5BAMA+D4Pg+BAQBAEAwD4Pg+D4EBAEAQDAPg++hYBH///hUFQVBUFREDQNHmf///////+MYxBUGkAGIMAAAAP/29Xt6lUxBTUUzLjEwMFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV/+MYxDUAAANIAAAAAFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV";
 var compareProps = (obj1, obj2) => {
   const keysA = Object.keys(obj1).sort();
@@ -3016,16 +3088,18 @@ var didPropChange = (key, newProp, prevProp) => {
   }
   return true;
 };
-var SharedAudioContext = createContext15(null);
-var SharedAudioContextProvider = ({ children, numberOfAudioTags, component, audioLatencyHint }) => {
-  const audios = useRef4([]);
-  const [initialNumberOfAudioTags] = useState10(numberOfAudioTags);
+var SharedAudioContext = createContext16(null);
+var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHint }) => {
+  const audios = useRef5([]);
+  const [initialNumberOfAudioTags] = useState11(numberOfAudioTags);
   if (numberOfAudioTags !== initialNumberOfAudioTags) {
     throw new Error("The number of shared audio tags has changed dynamically. Once you have set this property, you cannot change it afterwards.");
   }
+  const compositionManager = useContext16(CompositionManager);
+  const component = compositionManager.compositions.find((c) => compositionManager.canvasContent?.type === "composition" ? c.id === compositionManager.canvasContent.compositionId : null);
   const logLevel = useLogLevel();
   const audioContext = useSingletonAudioContext(logLevel, audioLatencyHint);
-  const refs = useMemo14(() => {
+  const refs = useMemo15(() => {
     return new Array(numberOfAudioTags).fill(true).map(() => {
       const ref = createRef2();
       return {
@@ -3038,7 +3112,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, component, audi
       };
     });
   }, [audioContext, numberOfAudioTags]);
-  const takenAudios = useRef4(new Array(numberOfAudioTags).fill(false));
+  const takenAudios = useRef5(new Array(numberOfAudioTags).fill(false));
   const rerenderAudios = useCallback7(() => {
     refs.forEach(({ ref, id }) => {
       const data = audios.current?.find((a) => a.id === id);
@@ -3144,7 +3218,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, component, audi
     });
     audioContext?.resume();
   }, [audioContext, logLevel, mountTime, refs, env.isPlayer]);
-  const value = useMemo14(() => {
+  const value = useMemo15(() => {
     return {
       registerAudio,
       unregisterAudio,
@@ -3175,7 +3249,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, component, audi
     value,
     children: [
       refs.map(({ id, ref }) => {
-        return /* @__PURE__ */ jsx15("audio", {
+        return /* @__PURE__ */ jsx16("audio", {
           ref,
           preload: "metadata",
           src: EMPTY_AUDIO
@@ -3190,12 +3264,12 @@ var useSharedAudio = ({
   audioId,
   premounting
 }) => {
-  const ctx = useContext15(SharedAudioContext);
-  const [elem] = useState10(() => {
+  const ctx = useContext16(SharedAudioContext);
+  const [elem] = useState11(() => {
     if (ctx && ctx.numberOfAudioTags > 0) {
       return ctx.registerAudio({ aud, audioId, premounting });
     }
-    const el = React14.createRef();
+    const el = React15.createRef();
     const mediaElementSourceNode = ctx?.audioContext ? makeSharedElementSourceNode({
       audioContext: ctx.audioContext,
       ref: el
@@ -3209,7 +3283,7 @@ var useSharedAudio = ({
       premounting
     };
   });
-  const effectToUse = React14.useInsertionEffect ?? React14.useLayoutEffect;
+  const effectToUse = React15.useInsertionEffect ?? React15.useLayoutEffect;
   if (typeof document !== "undefined") {
     effectToUse(() => {
       if (ctx && ctx.numberOfAudioTags > 0) {
@@ -3234,7 +3308,7 @@ var isApproximatelyTheSame = (num1, num2) => {
 };
 
 // src/video/video-fragment.ts
-import { useRef as useRef5 } from "react";
+import { useRef as useRef6 } from "react";
 var toSeconds = (time, fps) => {
   return Math.round(time / fps * 100) / 100;
 };
@@ -3321,9 +3395,9 @@ var useAppendVideoFragment = ({
   duration: initialDuration,
   fps
 }) => {
-  const actualFromRef = useRef5(initialActualFrom);
-  const actualDuration = useRef5(initialDuration);
-  const actualSrc = useRef5(initialActualSrc);
+  const actualFromRef = useRef6(initialActualFrom);
+  const actualDuration = useRef6(initialDuration);
+  const actualSrc = useRef6(initialActualSrc);
   if (!isSubsetOfDuration({
     prevStartFrom: actualFromRef.current,
     newStartFrom: initialActualFrom,
@@ -3362,16 +3436,16 @@ var useVolume = ({
   source,
   shouldUseWebAudioApi
 }) => {
-  const audioStuffRef = useRef6(null);
-  const currentVolumeRef = useRef6(volume);
+  const audioStuffRef = useRef7(null);
+  const currentVolumeRef = useRef7(volume);
   currentVolumeRef.current = volume;
-  const sharedAudioContext = useContext16(SharedAudioContext);
+  const sharedAudioContext = useContext17(SharedAudioContext);
   if (!sharedAudioContext) {
     throw new Error("useAmplification must be used within a SharedAudioContext");
   }
   const { audioContext } = sharedAudioContext;
   if (typeof window !== "undefined") {
-    useLayoutEffect3(() => {
+    useLayoutEffect4(() => {
       if (!audioContext) {
         return;
       }
@@ -3421,12 +3495,12 @@ var useVolume = ({
 };
 
 // src/use-media-in-timeline.ts
-import { useContext as useContext18, useEffect as useEffect8, useMemo as useMemo15, useState as useState11 } from "react";
+import { useContext as useContext19, useEffect as useEffect8, useMemo as useMemo16, useState as useState12 } from "react";
 
 // src/audio/use-audio-frame.ts
-import { useContext as useContext17 } from "react";
+import { useContext as useContext18 } from "react";
 var useMediaStartsAt = () => {
-  const parentSequence = useContext17(SequenceContext);
+  const parentSequence = useContext18(SequenceContext);
   const startsAt = Math.min(0, parentSequence?.relativeFrom ?? 0);
   return startsAt;
 };
@@ -3497,9 +3571,9 @@ var useBasicMediaInTimeline = ({
     throw new Error("No src passed");
   }
   const startsAt = useMediaStartsAt();
-  const parentSequence = useContext18(SequenceContext);
+  const parentSequence = useContext19(SequenceContext);
   const videoConfig = useVideoConfig();
-  const [initialVolume] = useState11(() => volume);
+  const [initialVolume] = useState12(() => volume);
   const mediaDuration = calculateMediaDuration({
     mediaDurationInFrames: videoConfig.durationInFrames,
     playbackRate,
@@ -3507,7 +3581,7 @@ var useBasicMediaInTimeline = ({
     trimAfter
   });
   const duration = parentSequence ? Math.min(parentSequence.durationInFrames, mediaDuration) : mediaDuration;
-  const volumes = useMemo15(() => {
+  const volumes = useMemo16(() => {
     if (typeof volume === "number") {
       return volume;
     }
@@ -3526,7 +3600,7 @@ var useBasicMediaInTimeline = ({
   }, [initialVolume, mediaType, src, volume]);
   const doesVolumeChange = typeof volume === "function";
   const nonce = useNonce();
-  const { rootId } = useContext18(TimelineContext);
+  const { rootId } = useContext19(TimelineContext);
   const env = useRemotionEnvironment();
   return {
     volumes,
@@ -3552,9 +3626,9 @@ var useMediaInTimeline = ({
   postmountDisplay,
   loopDisplay
 }) => {
-  const parentSequence = useContext18(SequenceContext);
+  const parentSequence = useContext19(SequenceContext);
   const startsAt = useMediaStartsAt();
-  const { registerSequence, unregisterSequence } = useContext18(SequenceManager);
+  const { registerSequence, unregisterSequence } = useContext19(SequenceManager);
   const {
     volumes,
     duration,
@@ -3633,34 +3707,34 @@ var useMediaInTimeline = ({
 // src/use-media-playback.ts
 import {
   useCallback as useCallback10,
-  useContext as useContext21,
+  useContext as useContext22,
   useEffect as useEffect12,
-  useLayoutEffect as useLayoutEffect5,
-  useRef as useRef10
+  useLayoutEffect as useLayoutEffect6,
+  useRef as useRef11
 } from "react";
 
 // src/buffer-until-first-frame.ts
-import { useCallback as useCallback9, useMemo as useMemo18, useRef as useRef8 } from "react";
+import { useCallback as useCallback9, useMemo as useMemo19, useRef as useRef9 } from "react";
 
 // src/use-buffer-state.ts
-import { useContext as useContext20, useMemo as useMemo17 } from "react";
+import { useContext as useContext21, useMemo as useMemo18 } from "react";
 
 // src/buffering.tsx
-import React15, {
+import React16, {
   useCallback as useCallback8,
-  useContext as useContext19,
+  useContext as useContext20,
   useEffect as useEffect9,
-  useLayoutEffect as useLayoutEffect4,
-  useMemo as useMemo16,
-  useRef as useRef7,
-  useState as useState12
+  useLayoutEffect as useLayoutEffect5,
+  useMemo as useMemo17,
+  useRef as useRef8,
+  useState as useState13
 } from "react";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var useBufferManager = (logLevel, mountTime) => {
-  const [blocks, setBlocks] = useState12([]);
-  const [onBufferingCallbacks, setOnBufferingCallbacks] = useState12([]);
-  const [onResumeCallbacks, setOnResumeCallbacks] = useState12([]);
-  const buffering = useRef7(false);
+  const [blocks, setBlocks] = useState13([]);
+  const [onBufferingCallbacks, setOnBufferingCallbacks] = useState13([]);
+  const [onResumeCallbacks, setOnResumeCallbacks] = useState13([]);
+  const buffering = useRef8(false);
   const addBlock = useCallback8((block) => {
     setBlocks((b) => [...b, block]);
     return {
@@ -3703,7 +3777,7 @@ var useBufferManager = (logLevel, mountTime) => {
     }
   }, [blocks]);
   if (typeof window !== "undefined") {
-    useLayoutEffect4(() => {
+    useLayoutEffect5(() => {
       if (blocks.length === 0) {
         onResumeCallbacks.forEach((c) => c());
         playbackLogging({
@@ -3715,21 +3789,21 @@ var useBufferManager = (logLevel, mountTime) => {
       }
     }, [blocks]);
   }
-  return useMemo16(() => {
+  return useMemo17(() => {
     return { addBlock, listenForBuffering, listenForResume, buffering };
   }, [addBlock, buffering, listenForBuffering, listenForResume]);
 };
-var BufferingContextReact = React15.createContext(null);
+var BufferingContextReact = React16.createContext(null);
 var BufferingProvider = ({ children }) => {
-  const { logLevel, mountTime } = useContext19(LogLevelContext);
+  const { logLevel, mountTime } = useContext20(LogLevelContext);
   const bufferManager = useBufferManager(logLevel ?? "info", mountTime);
-  return /* @__PURE__ */ jsx16(BufferingContextReact.Provider, {
+  return /* @__PURE__ */ jsx17(BufferingContextReact.Provider, {
     value: bufferManager,
     children
   });
 };
 var useIsPlayerBuffering = (bufferManager) => {
-  const [isBuffering, setIsBuffering] = useState12(bufferManager.buffering.current);
+  const [isBuffering, setIsBuffering] = useState13(bufferManager.buffering.current);
   useEffect9(() => {
     const onBuffer = () => {
       setIsBuffering(true);
@@ -3753,9 +3827,9 @@ var useIsPlayerBuffering = (bufferManager) => {
 
 // src/use-buffer-state.ts
 var useBufferState = () => {
-  const buffer = useContext20(BufferingContextReact);
+  const buffer = useContext21(BufferingContextReact);
   const addBlock = buffer ? buffer.addBlock : null;
-  return useMemo17(() => ({
+  return useMemo18(() => ({
     delayPlayback: () => {
       if (!addBlock) {
         throw new Error("Tried to enable the buffering state, but a Remotion context was not found. This API can only be called in a component that was passed to the Remotion Player or a <Composition>. Or you might have experienced a version mismatch - run `npx remotion versions` and ensure all packages have the same version. This error is thrown by the buffer state https://remotion.dev/docs/player/buffer-state");
@@ -3781,7 +3855,7 @@ var useBufferUntilFirstFrame = ({
   logLevel,
   mountTime
 }) => {
-  const bufferingRef = useRef8(false);
+  const bufferingRef = useRef9(false);
   const { delayPlayback } = useBufferState();
   const bufferUntilFirstFrame = useCallback9((requestedTime) => {
     if (mediaType !== "video") {
@@ -3854,7 +3928,7 @@ var useBufferUntilFirstFrame = ({
     onVariableFpsVideoDetected,
     pauseWhenBuffering
   ]);
-  return useMemo18(() => {
+  return useMemo19(() => {
     return {
       isBuffering: () => bufferingRef.current,
       bufferUntilFirstFrame
@@ -3863,9 +3937,9 @@ var useBufferUntilFirstFrame = ({
 };
 
 // src/media-tag-current-time-timestamp.ts
-import React16 from "react";
+import React17 from "react";
 var useCurrentTimeOfMediaTagWithUpdateTimeStamp = (mediaRef) => {
-  const lastUpdate = React16.useRef({
+  const lastUpdate = React17.useRef({
     time: mediaRef.current?.currentTime ?? 0,
     lastUpdate: performance.now()
   });
@@ -3899,7 +3973,7 @@ var seek = ({
 };
 
 // src/use-media-buffering.ts
-import { useEffect as useEffect10, useState as useState13 } from "react";
+import { useEffect as useEffect10, useState as useState14 } from "react";
 var useMediaBuffering = ({
   element,
   shouldBuffer,
@@ -3910,7 +3984,7 @@ var useMediaBuffering = ({
   src
 }) => {
   const buffer = useBufferState();
-  const [isBuffering, setIsBuffering] = useState13(false);
+  const [isBuffering, setIsBuffering] = useState14(false);
   useEffect10(() => {
     let cleanupFns = [];
     const { current } = element;
@@ -4039,14 +4113,14 @@ var useMediaBuffering = ({
 };
 
 // src/use-request-video-callback-time.ts
-import { useEffect as useEffect11, useRef as useRef9 } from "react";
+import { useEffect as useEffect11, useRef as useRef10 } from "react";
 var useRequestVideoCallbackTime = ({
   mediaRef,
   mediaType,
   lastSeek,
   onVariableFpsVideoDetected
 }) => {
-  const currentTime = useRef9(null);
+  const currentTime = useRef10(null);
   useEffect11(() => {
     const { current } = mediaRef;
     if (current) {
@@ -4275,21 +4349,21 @@ var useMediaPlayback = ({
   isPostmounting,
   onAutoPlayError
 }) => {
-  const { playbackRate: globalPlaybackRate } = useContext21(TimelineContext);
+  const { playbackRate: globalPlaybackRate } = useContext22(TimelineContext);
   const frame = useCurrentFrame();
   const absoluteFrame = useTimelinePosition();
   const [playing] = usePlayingState();
-  const buffering = useContext21(BufferingContextReact);
+  const buffering = useContext22(BufferingContextReact);
   const { fps } = useVideoConfig();
   const mediaStartsAt = useMediaStartsAt();
-  const lastSeekDueToShift = useRef10(null);
-  const lastSeek = useRef10(null);
+  const lastSeekDueToShift = useRef11(null);
+  const lastSeek = useRef11(null);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   if (!buffering) {
     throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
   }
-  const isVariableFpsVideoMap = useRef10({});
+  const isVariableFpsVideoMap = useRef11({});
   const onVariableFpsVideoDetected = useCallback10(() => {
     if (!src) {
       return;
@@ -4380,7 +4454,7 @@ var useMediaPlayback = ({
     isPostmounting
   ]);
   const env = useRemotionEnvironment();
-  useLayoutEffect5(() => {
+  useLayoutEffect6(() => {
     const playbackRateToSet = Math.max(0, playbackRate);
     if (mediaRef.current && mediaRef.current.playbackRate !== playbackRateToSet) {
       mediaRef.current.playbackRate = playbackRateToSet;
@@ -4505,7 +4579,7 @@ var useMediaPlayback = ({
 };
 
 // src/use-media-tag.ts
-import { useContext as useContext22, useEffect as useEffect13 } from "react";
+import { useContext as useContext23, useEffect as useEffect13 } from "react";
 var useMediaTag = ({
   mediaRef,
   id,
@@ -4514,7 +4588,7 @@ var useMediaTag = ({
   isPremounting,
   isPostmounting
 }) => {
-  const { audioAndVideoTags, imperativePlaying } = useContext22(TimelineContext);
+  const { audioAndVideoTags, imperativePlaying } = useContext23(TimelineContext);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const env = useRemotionEnvironment();
@@ -4559,12 +4633,12 @@ var useMediaTag = ({
 };
 
 // src/volume-position-state.ts
-import { createContext as createContext16, useContext as useContext23, useMemo as useMemo19 } from "react";
-var MediaVolumeContext = createContext16({
+import { createContext as createContext17, useContext as useContext24, useMemo as useMemo20 } from "react";
+var MediaVolumeContext = createContext17({
   mediaMuted: false,
   mediaVolume: 1
 });
-var SetMediaVolumeContext = createContext16({
+var SetMediaVolumeContext = createContext17({
   setMediaMuted: () => {
     throw new Error("default");
   },
@@ -4573,16 +4647,16 @@ var SetMediaVolumeContext = createContext16({
   }
 });
 var useMediaVolumeState = () => {
-  const { mediaVolume } = useContext23(MediaVolumeContext);
-  const { setMediaVolume } = useContext23(SetMediaVolumeContext);
-  return useMemo19(() => {
+  const { mediaVolume } = useContext24(MediaVolumeContext);
+  const { setMediaVolume } = useContext24(SetMediaVolumeContext);
+  return useMemo20(() => {
     return [mediaVolume, setMediaVolume];
   }, [mediaVolume, setMediaVolume]);
 };
 var useMediaMutedState = () => {
-  const { mediaMuted } = useContext23(MediaVolumeContext);
-  const { setMediaMuted } = useContext23(SetMediaVolumeContext);
-  return useMemo19(() => {
+  const { mediaMuted } = useContext24(MediaVolumeContext);
+  const { setMediaMuted } = useContext24(SetMediaVolumeContext);
+  return useMemo20(() => {
     return [mediaMuted, setMediaMuted];
   }, [mediaMuted, setMediaMuted]);
 };
@@ -4595,9 +4669,9 @@ var warnAboutTooHighVolume = (volume) => {
 };
 
 // src/audio/AudioForPreview.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var AudioForDevelopmentForwardRefFunction = (props, ref) => {
-  const [initialShouldPreMountAudioElements] = useState14(props.shouldPreMountAudioTags);
+  const [initialShouldPreMountAudioElements] = useState15(props.shouldPreMountAudioTags);
   if (props.shouldPreMountAudioTags !== initialShouldPreMountAudioElements) {
     throw new Error("Cannot change the behavior for pre-mounting audio tags dynamically.");
   }
@@ -4636,13 +4710,13 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
   const [mediaVolume] = useMediaVolumeState();
   const [mediaMuted] = useMediaMutedState();
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
-  const { hidden } = useContext24(SequenceVisibilityToggleContext);
+  const { hidden } = useContext25(SequenceVisibilityToggleContext);
   if (!src) {
     throw new TypeError("No 'src' was passed to <Html5Audio>.");
   }
   const preloadedSrc = usePreload(src);
-  const sequenceContext = useContext24(SequenceContext);
-  const [timelineId] = useState14(() => String(Math.random()));
+  const sequenceContext = useContext25(SequenceContext);
+  const [timelineId] = useState15(() => String(Math.random()));
   const isSequenceHidden = hidden[timelineId] ?? false;
   const userPreferredVolume = evaluateVolume({
     frame: volumePropFrame,
@@ -4654,7 +4728,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     crossOrigin,
     requestsVideoFrame: false
   });
-  const propsToPass = useMemo20(() => {
+  const propsToPass = useMemo21(() => {
     return {
       muted: muted || mediaMuted || isSequenceHidden || userPreferredVolume <= 0,
       src: preloadedSrc,
@@ -4672,7 +4746,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     userPreferredVolume,
     crossOriginValue
   ]);
-  const id = useMemo20(() => `audio-${random(src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}-muted:${props.muted}-loop:${props.loop}`, [
+  const id = useMemo21(() => `audio-${random(src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}-muted:${props.muted}-loop:${props.loop}`, [
     src,
     sequenceContext?.relativeFrom,
     sequenceContext?.cumulatedFrom,
@@ -4680,7 +4754,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     props.muted,
     props.loop
   ]);
-  const context = useContext24(SharedAudioContext);
+  const context = useContext25(SharedAudioContext);
   if (!context) {
     throw new Error("SharedAudioContext not found");
   }
@@ -4733,7 +4807,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
   useImperativeHandle5(ref, () => {
     return audioRef.current;
   }, [audioRef]);
-  const currentOnDurationCallback = useRef11(onDuration);
+  const currentOnDurationCallback = useRef12(onDuration);
   currentOnDurationCallback.current = onDuration;
   useEffect14(() => {
     const { current } = audioRef;
@@ -4755,7 +4829,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
   if (initialShouldPreMountAudioElements) {
     return null;
   }
-  return /* @__PURE__ */ jsx17("audio", {
+  return /* @__PURE__ */ jsx18("audio", {
     ref: audioRef,
     preload: "metadata",
     crossOrigin: crossOriginValue,
@@ -4767,16 +4841,16 @@ var AudioForPreview = forwardRef4(AudioForDevelopmentForwardRefFunction);
 // src/audio/AudioForRendering.tsx
 import {
   forwardRef as forwardRef5,
-  useContext as useContext25,
+  useContext as useContext26,
   useEffect as useEffect15,
   useImperativeHandle as useImperativeHandle6,
-  useLayoutEffect as useLayoutEffect6,
-  useMemo as useMemo21,
-  useRef as useRef12
+  useLayoutEffect as useLayoutEffect7,
+  useMemo as useMemo22,
+  useRef as useRef13
 } from "react";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var AudioForRenderingRefForwardingFunction = (props, ref) => {
-  const audioRef = useRef12(null);
+  const audioRef = useRef13(null);
   const {
     volume: volumeProp,
     playbackRate,
@@ -4798,10 +4872,10 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
   const absoluteFrame = useTimelinePosition();
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const frame = useCurrentFrame();
-  const sequenceContext = useContext25(SequenceContext);
-  const { registerRenderAsset, unregisterRenderAsset } = useContext25(RenderAssetManager);
+  const sequenceContext = useContext26(SequenceContext);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext26(RenderAssetManager);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const id = useMemo21(() => `audio-${random(props.src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo22(() => `audio-${random(props.src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}`, [
     props.src,
     sequenceContext?.relativeFrom,
     sequenceContext?.cumulatedFrom,
@@ -4860,7 +4934,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
   ]);
   const { src } = props;
   const needsToRenderAudioTag = ref || _remotionInternalNeedsDurationCalculation;
-  useLayoutEffect6(() => {
+  useLayoutEffect7(() => {
     if (window.process?.env?.NODE_ENV === "test") {
       return;
     }
@@ -4900,7 +4974,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
   if (!needsToRenderAudioTag) {
     return null;
   }
-  return /* @__PURE__ */ jsx18("audio", {
+  return /* @__PURE__ */ jsx19("audio", {
     ref: audioRef,
     ...nativeProps,
     onError: onNativeError
@@ -4909,9 +4983,9 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
 var AudioForRendering = forwardRef5(AudioForRenderingRefForwardingFunction);
 
 // src/audio/Audio.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var AudioRefForwardingFunction = (props, ref) => {
-  const audioContext = useContext26(SharedAudioContext);
+  const audioContext = useContext27(SharedAudioContext);
   const {
     startFrom,
     endAt,
@@ -4927,7 +5001,7 @@ var AudioRefForwardingFunction = (props, ref) => {
   const { loop, ...propsOtherThanLoop } = props;
   const { fps } = useVideoConfig();
   const environment = useRemotionEnvironment();
-  const { durations, setDurations } = useContext26(DurationsContext);
+  const { durations, setDurations } = useContext27(DurationsContext);
   if (typeof props.src !== "string") {
     throw new TypeError(`The \`<Html5Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
   }
@@ -4959,14 +5033,14 @@ var AudioRefForwardingFunction = (props, ref) => {
   });
   if (loop && durationFetched !== undefined) {
     if (!Number.isFinite(durationFetched)) {
-      return /* @__PURE__ */ jsx19(Html5Audio, {
+      return /* @__PURE__ */ jsx20(Html5Audio, {
         ...propsOtherThanLoop,
         ref,
         _remotionInternalNativeLoopPassed: true
       });
     }
     const duration = durationFetched * fps;
-    return /* @__PURE__ */ jsx19(Loop, {
+    return /* @__PURE__ */ jsx20(Loop, {
       layout: "none",
       durationInFrames: calculateMediaDuration({
         trimAfter: trimAfterValue,
@@ -4974,7 +5048,7 @@ var AudioRefForwardingFunction = (props, ref) => {
         playbackRate: props.playbackRate ?? 1,
         trimBefore: trimBeforeValue
       }),
-      children: /* @__PURE__ */ jsx19(Html5Audio, {
+      children: /* @__PURE__ */ jsx20(Html5Audio, {
         ...propsOtherThanLoop,
         ref,
         _remotionInternalNativeLoopPassed: true
@@ -4982,13 +5056,13 @@ var AudioRefForwardingFunction = (props, ref) => {
     });
   }
   if (typeof trimBeforeValue !== "undefined" || typeof trimAfterValue !== "undefined") {
-    return /* @__PURE__ */ jsx19(Sequence, {
+    return /* @__PURE__ */ jsx20(Sequence, {
       layout: "none",
       from: 0 - (trimBeforeValue ?? 0),
       showInTimeline: false,
       durationInFrames: trimAfterValue,
       name,
-      children: /* @__PURE__ */ jsx19(Html5Audio, {
+      children: /* @__PURE__ */ jsx20(Html5Audio, {
         _remotionInternalNeedsDurationCalculation: Boolean(loop),
         pauseWhenBuffering: pauseWhenBuffering ?? false,
         ...otherProps,
@@ -4998,7 +5072,7 @@ var AudioRefForwardingFunction = (props, ref) => {
   }
   validateMediaProps({ playbackRate: props.playbackRate, volume: props.volume }, "Html5Audio");
   if (environment.isRendering) {
-    return /* @__PURE__ */ jsx19(AudioForRendering, {
+    return /* @__PURE__ */ jsx20(AudioForRendering, {
       onDuration,
       ...props,
       ref,
@@ -5006,7 +5080,7 @@ var AudioRefForwardingFunction = (props, ref) => {
       _remotionInternalNeedsDurationCalculation: Boolean(loop)
     });
   }
-  return /* @__PURE__ */ jsx19(AudioForPreview, {
+  return /* @__PURE__ */ jsx20(AudioForPreview, {
     _remotionInternalNativeLoopPassed: props._remotionInternalNativeLoopPassed ?? false,
     _remotionInternalStack: stack ?? null,
     shouldPreMountAudioTags: audioContext !== null && audioContext.numberOfAudioTags > 0,
@@ -5023,11 +5097,11 @@ var Html5Audio = forwardRef6(AudioRefForwardingFunction);
 addSequenceStackTraces(Html5Audio);
 var Audio = Html5Audio;
 // src/Composition.tsx
-import { Suspense, useContext as useContext28, useEffect as useEffect17 } from "react";
+import { Suspense, useContext as useContext29, useEffect as useEffect17 } from "react";
 import { createPortal } from "react-dom";
 
 // src/Folder.tsx
-import { createContext as createContext17, useContext as useContext27, useEffect as useEffect16, useMemo as useMemo22 } from "react";
+import { createContext as createContext18, useContext as useContext28, useEffect as useEffect16, useMemo as useMemo23 } from "react";
 
 // src/validation/validate-folder-name.ts
 var getRegex = () => /^([a-zA-Z0-9-\u4E00-\u9FFF])+$/g;
@@ -5046,18 +5120,18 @@ var validateFolderName = (name) => {
 var invalidFolderNameErrorMessage = `Folder name must match ${String(getRegex())}`;
 
 // src/Folder.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
-var FolderContext = createContext17({
+import { jsx as jsx21 } from "react/jsx-runtime";
+var FolderContext = createContext18({
   folderName: null,
   parentName: null
 });
 var Folder = ({ name, children }) => {
-  const parent = useContext27(FolderContext);
-  const { registerFolder, unregisterFolder } = useContext27(CompositionSetters);
+  const parent = useContext28(FolderContext);
+  const { registerFolder, unregisterFolder } = useContext28(CompositionSetters);
   validateFolderName(name);
   const parentNameArr = [parent.parentName, parent.folderName].filter(truthy);
   const parentName = parentNameArr.length === 0 ? null : parentNameArr.join("/");
-  const value = useMemo22(() => {
+  const value = useMemo23(() => {
     return {
       folderName: name,
       parentName
@@ -5069,14 +5143,14 @@ var Folder = ({ name, children }) => {
       unregisterFolder(name, parentName);
     };
   }, [name, parent.folderName, parentName, registerFolder, unregisterFolder]);
-  return /* @__PURE__ */ jsx20(FolderContext.Provider, {
+  return /* @__PURE__ */ jsx21(FolderContext.Provider, {
     value,
     children
   });
 };
 
 // src/loading-indicator.tsx
-import { jsx as jsx21, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs2 } from "react/jsx-runtime";
 var rotate = {
   transform: `rotate(90deg)`
 };
@@ -5095,7 +5169,7 @@ var Loading = () => {
     style: container,
     id: "remotion-comp-loading",
     children: [
-      /* @__PURE__ */ jsx21("style", {
+      /* @__PURE__ */ jsx22("style", {
         type: "text/css",
         children: `
 				@keyframes anim {
@@ -5112,12 +5186,12 @@ var Loading = () => {
 				}
 			`
       }),
-      /* @__PURE__ */ jsx21("svg", {
+      /* @__PURE__ */ jsx22("svg", {
         width: ICON_SIZE,
         height: ICON_SIZE,
         viewBox: "-100 -100 400 400",
         style: rotate,
-        children: /* @__PURE__ */ jsx21("path", {
+        children: /* @__PURE__ */ jsx22("path", {
           fill: "#555",
           stroke: "#555",
           strokeWidth: "100",
@@ -5164,13 +5238,13 @@ var portalNode = () => {
 };
 
 // src/use-lazy-component.ts
-import React20, { useMemo as useMemo23 } from "react";
+import React21, { useMemo as useMemo24 } from "react";
 var useLazyComponent = ({
   compProps,
   componentName,
   noSuspense
 }) => {
-  const lazy = useMemo23(() => {
+  const lazy = useMemo24(() => {
     if ("component" in compProps) {
       if (typeof document === "undefined" || noSuspense) {
         return compProps.component;
@@ -5184,7 +5258,7 @@ var useLazyComponent = ({
       if (typeof compProps.lazyComponent === "undefined") {
         throw new Error(`A value of \`undefined\` was passed to the \`lazyComponent\` prop. Check the value you are passing to the <${componentName}/> component.`);
       }
-      return React20.lazy(compProps.lazyComponent);
+      return React21.lazy(compProps.lazyComponent);
     }
     throw new Error("You must pass either 'component' or 'lazyComponent'");
   }, [compProps.component, compProps.lazyComponent]);
@@ -5215,7 +5289,7 @@ var validateDefaultAndInputProps = (defaultProps, name, compositionId) => {
 };
 
 // src/Composition.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var Fallback = () => {
   const { continueRender: continueRender2, delayRender: delayRender2 } = useDelayRender();
   useEffect17(() => {
@@ -5234,7 +5308,7 @@ var InnerComposition = ({
   schema,
   ...compProps
 }) => {
-  const compManager = useContext28(CompositionSetters);
+  const compManager = useContext29(CompositionSetters);
   const { registerComposition, unregisterComposition } = compManager;
   const video = useVideo();
   const lazy = useLazyComponent({
@@ -5245,7 +5319,7 @@ var InnerComposition = ({
   const nonce = useNonce();
   const isPlayer = useIsPlayer();
   const environment = useRemotionEnvironment();
-  const canUseComposition = useContext28(CanUseRemotionHooks);
+  const canUseComposition = useContext29(CanUseRemotionHooks);
   if (typeof window !== "undefined") {
     window.remotion_seenCompositionIds = Array.from(new Set([...window.remotion_seenCompositionIds ?? [], id]));
   }
@@ -5255,7 +5329,7 @@ var InnerComposition = ({
     }
     throw new Error("<Composition> mounted inside another composition. See https://remotion.dev/docs/wrong-composition-mount for help.");
   }
-  const { folderName, parentName } = useContext28(FolderContext);
+  const { folderName, parentName } = useContext29(FolderContext);
   useEffect17(() => {
     if (!id) {
       throw new Error("No id for composition passed.");
@@ -5308,10 +5382,10 @@ var InnerComposition = ({
     if (resolved === null || resolved.type !== "success" && resolved.type !== "success-and-refreshing") {
       return null;
     }
-    return createPortal(/* @__PURE__ */ jsx22(CanUseRemotionHooksProvider, {
-      children: /* @__PURE__ */ jsx22(Suspense, {
-        fallback: /* @__PURE__ */ jsx22(Loading, {}),
-        children: /* @__PURE__ */ jsx22(Comp, {
+    return createPortal(/* @__PURE__ */ jsx23(CanUseRemotionHooksProvider, {
+      children: /* @__PURE__ */ jsx23(Suspense, {
+        fallback: /* @__PURE__ */ jsx23(Loading, {}),
+        children: /* @__PURE__ */ jsx23(Comp, {
           ...resolved.result.props ?? {}
         })
       })
@@ -5322,10 +5396,10 @@ var InnerComposition = ({
     if (resolved === null || resolved.type !== "success" && resolved.type !== "success-and-refreshing") {
       return null;
     }
-    return createPortal(/* @__PURE__ */ jsx22(CanUseRemotionHooksProvider, {
-      children: /* @__PURE__ */ jsx22(Suspense, {
-        fallback: /* @__PURE__ */ jsx22(Fallback, {}),
-        children: /* @__PURE__ */ jsx22(Comp, {
+    return createPortal(/* @__PURE__ */ jsx23(CanUseRemotionHooksProvider, {
+      children: /* @__PURE__ */ jsx23(Suspense, {
+        fallback: /* @__PURE__ */ jsx23(Fallback, {}),
+        children: /* @__PURE__ */ jsx23(Comp, {
           ...resolved.result.props ?? {}
         })
       })
@@ -5334,11 +5408,11 @@ var InnerComposition = ({
   return null;
 };
 var Composition = (props2) => {
-  const { onlyRenderComposition } = useContext28(CompositionSetters);
+  const { onlyRenderComposition } = useContext29(CompositionSetters);
   if (onlyRenderComposition && onlyRenderComposition !== props2.id) {
     return null;
   }
-  return /* @__PURE__ */ jsx22(InnerComposition, {
+  return /* @__PURE__ */ jsx23(InnerComposition, {
     ...props2
   });
 };
@@ -5556,8 +5630,8 @@ var getStaticFiles = () => {
   return window.remotion_staticFiles;
 };
 // src/IFrame.tsx
-import { forwardRef as forwardRef7, useCallback as useCallback12, useState as useState15 } from "react";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { forwardRef as forwardRef7, useCallback as useCallback12, useState as useState16 } from "react";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var IFrameRefForwarding = ({
   onLoad,
   onError,
@@ -5566,7 +5640,7 @@ var IFrameRefForwarding = ({
   ...props2
 }, ref) => {
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const [handle] = useState15(() => delayRender2(`Loading <IFrame> with source ${props2.src}`, {
+  const [handle] = useState16(() => delayRender2(`Loading <IFrame> with source ${props2.src}`, {
     retries: delayRenderRetries ?? undefined,
     timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
   }));
@@ -5582,7 +5656,7 @@ var IFrameRefForwarding = ({
       console.error("Error loading iframe:", e, "Handle the event using the onError() prop to make this message disappear.");
     }
   }, [handle, onError, continueRender2]);
-  return /* @__PURE__ */ jsx23("iframe", {
+  return /* @__PURE__ */ jsx24("iframe", {
     referrerPolicy: "strict-origin-when-cross-origin",
     ...props2,
     ref,
@@ -5595,12 +5669,12 @@ var IFrame = forwardRef7(IFrameRefForwarding);
 import {
   forwardRef as forwardRef8,
   useCallback as useCallback13,
-  useContext as useContext29,
+  useContext as useContext30,
   useImperativeHandle as useImperativeHandle7,
-  useLayoutEffect as useLayoutEffect7,
-  useRef as useRef13
+  useLayoutEffect as useLayoutEffect8,
+  useRef as useRef14
 } from "react";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 function exponentialBackoff(errorCount) {
   return 1000 * 2 ** (errorCount - 1);
 }
@@ -5615,10 +5689,10 @@ var ImgRefForwarding = ({
   crossOrigin,
   ...props2
 }, ref) => {
-  const imageRef = useRef13(null);
-  const errors = useRef13({});
+  const imageRef = useRef14(null);
+  const errors = useRef14({});
   const { delayPlayback } = useBufferState();
-  const sequenceContext = useContext29(SequenceContext);
+  const sequenceContext = useContext30(SequenceContext);
   if (!src) {
     throw new Error('No "src" prop was passed to <Img>.');
   }
@@ -5668,7 +5742,7 @@ var ImgRefForwarding = ({
   if (typeof window !== "undefined") {
     const isPremounting = Boolean(sequenceContext?.premounting);
     const isPostmounting = Boolean(sequenceContext?.postmounting);
-    useLayoutEffect7(() => {
+    useLayoutEffect8(() => {
       if (window.process?.env?.NODE_ENV === "test") {
         if (imageRef.current) {
           imageRef.current.src = actualSrc;
@@ -5738,7 +5812,7 @@ var ImgRefForwarding = ({
     crossOrigin,
     requestsVideoFrame: false
   });
-  return /* @__PURE__ */ jsx24("img", {
+  return /* @__PURE__ */ jsx25("img", {
     ...props2,
     ref: imageRef,
     crossOrigin: crossOriginValue,
@@ -5751,26 +5825,29 @@ var Img = forwardRef8(ImgRefForwarding);
 import { createRef as createRef3 } from "react";
 
 // src/CompositionManager.tsx
-import React24, {
+import React25 from "react";
+var compositionsRef = React25.createRef();
+
+// src/CompositionManagerProvider.tsx
+import {
   useCallback as useCallback14,
   useImperativeHandle as useImperativeHandle8,
-  useMemo as useMemo24,
-  useRef as useRef14,
-  useState as useState16
+  useMemo as useMemo25,
+  useRef as useRef15,
+  useState as useState17
 } from "react";
-import { jsx as jsx25 } from "react/jsx-runtime";
-var compositionsRef = React24.createRef();
+import { jsx as jsx26 } from "react/jsx-runtime";
 var CompositionManagerProvider = ({
   children,
-  numberOfAudioTags,
   onlyRenderComposition,
   currentCompositionMetadata,
-  audioLatencyHint
+  initialCompositions,
+  initialCanvasContent
 }) => {
-  const [compositions, setCompositions] = useState16([]);
-  const currentcompositionsRef = useRef14(compositions);
-  const [folders, setFolders] = useState16([]);
-  const [canvasContent, setCanvasContent] = useState16(null);
+  const [folders, setFolders] = useState17([]);
+  const [canvasContent, setCanvasContent] = useState17(initialCanvasContent);
+  const [compositions, setCompositions] = useState17(initialCompositions);
+  const currentcompositionsRef = useRef15(compositions);
   const updateCompositions = useCallback14((updateComps) => {
     setCompositions((comps) => {
       const updated = updateComps(comps);
@@ -5813,7 +5890,6 @@ var CompositionManagerProvider = ({
       getCompositions: () => currentcompositionsRef.current
     };
   }, []);
-  const composition = compositions.find((c2) => canvasContent?.type === "composition" ? c2.id === canvasContent.compositionId : null);
   const updateCompositionDefaultProps = useCallback14((id, newDefaultProps) => {
     setCompositions((comps) => {
       const updated = comps.map((c2) => {
@@ -5828,15 +5904,7 @@ var CompositionManagerProvider = ({
       return updated;
     });
   }, []);
-  const contextValue = useMemo24(() => {
-    return {
-      compositions,
-      folders,
-      currentCompositionMetadata,
-      canvasContent
-    };
-  }, [compositions, folders, currentCompositionMetadata, canvasContent]);
-  const setters = useMemo24(() => {
+  const compositionManagerSetters = useMemo25(() => {
     return {
       registerComposition,
       unregisterComposition,
@@ -5854,22 +5922,19 @@ var CompositionManagerProvider = ({
     updateCompositionDefaultProps,
     onlyRenderComposition
   ]);
-  return /* @__PURE__ */ jsx25(CompositionManager.Provider, {
-    value: contextValue,
-    children: /* @__PURE__ */ jsx25(CompositionSetters.Provider, {
-      value: setters,
-      children: /* @__PURE__ */ jsx25(SequenceManagerProvider, {
-        children: /* @__PURE__ */ jsx25(RenderAssetManagerProvider, {
-          children: /* @__PURE__ */ jsx25(ResolveCompositionConfig, {
-            children: /* @__PURE__ */ jsx25(SharedAudioContextProvider, {
-              numberOfAudioTags,
-              component: composition?.component ?? null,
-              audioLatencyHint,
-              children
-            })
-          })
-        })
-      })
+  const compositionManagerContextValue = useMemo25(() => {
+    return {
+      compositions,
+      folders,
+      currentCompositionMetadata,
+      canvasContent
+    };
+  }, [compositions, folders, currentCompositionMetadata, canvasContent]);
+  return /* @__PURE__ */ jsx26(CompositionManager.Provider, {
+    value: compositionManagerContextValue,
+    children: /* @__PURE__ */ jsx26(CompositionSetters.Provider, {
+      value: compositionManagerSetters,
+      children
     })
   });
 };
@@ -5963,20 +6028,14 @@ var waitForRoot = (fn) => {
 };
 
 // src/RemotionRoot.tsx
-import {
-  useEffect as useEffect18,
-  useLayoutEffect as useLayoutEffect8,
-  useMemo as useMemo26,
-  useRef as useRef15,
-  useState as useState17
-} from "react";
+import { useEffect as useEffect18, useMemo as useMemo27, useState as useState18 } from "react";
 
 // src/use-media-enabled.tsx
-import { createContext as createContext18, useContext as useContext30, useMemo as useMemo25 } from "react";
-import { jsx as jsx26 } from "react/jsx-runtime";
-var MediaEnabledContext = createContext18(null);
+import { createContext as createContext19, useContext as useContext31, useMemo as useMemo26 } from "react";
+import { jsx as jsx27 } from "react/jsx-runtime";
+var MediaEnabledContext = createContext19(null);
 var useVideoEnabled = () => {
-  const context = useContext30(MediaEnabledContext);
+  const context = useContext31(MediaEnabledContext);
   if (!context) {
     return window.remotion_videoEnabled;
   }
@@ -5986,7 +6045,7 @@ var useVideoEnabled = () => {
   return context.videoEnabled;
 };
 var useAudioEnabled = () => {
-  const context = useContext30(MediaEnabledContext);
+  const context = useContext31(MediaEnabledContext);
   if (!context) {
     return window.remotion_audioEnabled;
   }
@@ -6000,78 +6059,27 @@ var MediaEnabledProvider = ({
   videoEnabled,
   audioEnabled
 }) => {
-  const value = useMemo25(() => ({ videoEnabled, audioEnabled }), [videoEnabled, audioEnabled]);
-  return /* @__PURE__ */ jsx26(MediaEnabledContext.Provider, {
+  const value = useMemo26(() => ({ videoEnabled, audioEnabled }), [videoEnabled, audioEnabled]);
+  return /* @__PURE__ */ jsx27(MediaEnabledContext.Provider, {
     value,
     children
   });
 };
 
 // src/RemotionRoot.tsx
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var RemotionRoot = ({
   children,
   numberOfAudioTags,
   logLevel,
-  onlyRenderComposition,
-  currentCompositionMetadata,
   audioLatencyHint,
   videoEnabled,
-  audioEnabled
+  audioEnabled,
+  frameState
 }) => {
-  const [remotionRootId] = useState17(() => String(random(null)));
-  const [frame, setFrame] = useState17(() => getInitialFrameState());
-  const [playing, setPlaying] = useState17(false);
-  const imperativePlaying = useRef15(false);
-  const [fastRefreshes, setFastRefreshes] = useState17(0);
-  const [manualRefreshes, setManualRefreshes] = useState17(0);
-  const [playbackRate, setPlaybackRate] = useState17(1);
-  const audioAndVideoTags = useRef15([]);
-  const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  if (typeof window !== "undefined") {
-    useLayoutEffect8(() => {
-      window.remotion_setFrame = (f, composition, attempt) => {
-        window.remotion_attempt = attempt;
-        const id = delayRender2(`Setting the current frame to ${f}`);
-        let asyncUpdate = true;
-        setFrame((s) => {
-          const currentFrame = s[composition] ?? window.remotion_initialFrame;
-          if (currentFrame === f) {
-            asyncUpdate = false;
-            return s;
-          }
-          return {
-            ...s,
-            [composition]: f
-          };
-        });
-        if (asyncUpdate) {
-          requestAnimationFrame(() => continueRender2(id));
-        } else {
-          continueRender2(id);
-        }
-      };
-      window.remotion_isPlayer = false;
-    }, [continueRender2, delayRender2]);
-  }
-  const timelineContextValue = useMemo26(() => {
-    return {
-      frame,
-      playing,
-      imperativePlaying,
-      rootId: remotionRootId,
-      playbackRate,
-      setPlaybackRate,
-      audioAndVideoTags
-    };
-  }, [frame, playbackRate, playing, remotionRootId]);
-  const setTimelineContextValue = useMemo26(() => {
-    return {
-      setFrame,
-      setPlaying
-    };
-  }, []);
-  const nonceContext = useMemo26(() => {
+  const [fastRefreshes, setFastRefreshes] = useState18(0);
+  const [manualRefreshes, setManualRefreshes] = useState18(0);
+  const nonceContext = useMemo27(() => {
     let counter = 0;
     return {
       getNonce: () => counter++,
@@ -6079,7 +6087,7 @@ var RemotionRoot = ({
       manualRefreshes
     };
   }, [fastRefreshes, manualRefreshes]);
-  const setNonceContext = useMemo26(() => {
+  const setNonceContext = useMemo27(() => {
     return {
       increaseManualRefreshes: () => {
         setManualRefreshes((i) => i + 1);
@@ -6097,32 +6105,33 @@ var RemotionRoot = ({
       }
     }
   }, []);
-  const logging = useMemo26(() => {
+  const logging = useMemo27(() => {
     return { logLevel, mountTime: Date.now() };
   }, [logLevel]);
-  return /* @__PURE__ */ jsx27(LogLevelContext.Provider, {
+  return /* @__PURE__ */ jsx28(LogLevelContext.Provider, {
     value: logging,
-    children: /* @__PURE__ */ jsx27(NonceContext.Provider, {
+    children: /* @__PURE__ */ jsx28(NonceContext.Provider, {
       value: nonceContext,
-      children: /* @__PURE__ */ jsx27(SetNonceContext.Provider, {
+      children: /* @__PURE__ */ jsx28(SetNonceContext.Provider, {
         value: setNonceContext,
-        children: /* @__PURE__ */ jsx27(TimelineContext.Provider, {
-          value: timelineContextValue,
-          children: /* @__PURE__ */ jsx27(SetTimelineContext.Provider, {
-            value: setTimelineContextValue,
-            children: /* @__PURE__ */ jsx27(MediaEnabledProvider, {
-              videoEnabled,
-              audioEnabled,
-              children: /* @__PURE__ */ jsx27(EditorPropsProvider, {
-                children: /* @__PURE__ */ jsx27(PrefetchProvider, {
-                  children: /* @__PURE__ */ jsx27(CompositionManagerProvider, {
-                    numberOfAudioTags,
-                    onlyRenderComposition,
-                    currentCompositionMetadata,
-                    audioLatencyHint,
-                    children: /* @__PURE__ */ jsx27(DurationsContextProvider, {
-                      children: /* @__PURE__ */ jsx27(BufferingProvider, {
-                        children
+        children: /* @__PURE__ */ jsx28(TimelineContextProvider, {
+          frameState,
+          children: /* @__PURE__ */ jsx28(MediaEnabledProvider, {
+            videoEnabled,
+            audioEnabled,
+            children: /* @__PURE__ */ jsx28(EditorPropsProvider, {
+              children: /* @__PURE__ */ jsx28(PrefetchProvider, {
+                children: /* @__PURE__ */ jsx28(SequenceManagerProvider, {
+                  children: /* @__PURE__ */ jsx28(RenderAssetManagerProvider, {
+                    children: /* @__PURE__ */ jsx28(ResolveCompositionConfig, {
+                      children: /* @__PURE__ */ jsx28(SharedAudioContextProvider, {
+                        numberOfAudioTags,
+                        audioLatencyHint,
+                        children: /* @__PURE__ */ jsx28(DurationsContextProvider, {
+                          children: /* @__PURE__ */ jsx28(BufferingProvider, {
+                            children
+                          })
+                        })
                       })
                     })
                   })
@@ -6164,9 +6173,9 @@ var setupEnvVariables = () => {
 };
 
 // src/use-current-scale.ts
-import React26, { createContext as createContext19 } from "react";
-var CurrentScaleContext = React26.createContext(null);
-var PreviewSizeContext = createContext19({
+import React27, { createContext as createContext20 } from "react";
+var CurrentScaleContext = React27.createContext(null);
+var PreviewSizeContext = createContext20({
   setSize: () => {
     return;
   },
@@ -6190,8 +6199,8 @@ var calculateScale = ({
   return Number(previewSize);
 };
 var useCurrentScale = (options) => {
-  const hasContext = React26.useContext(CurrentScaleContext);
-  const zoomContext = React26.useContext(PreviewSizeContext);
+  const hasContext = React27.useContext(CurrentScaleContext);
+  const zoomContext = React27.useContext(PreviewSizeContext);
   const config = useUnsafeVideoConfig();
   const env = useRemotionEnvironment();
   if (hasContext === null || config === null || zoomContext === null) {
@@ -6226,11 +6235,11 @@ import { useCallback as useCallback16 } from "react";
 // src/video/OffthreadVideoForRendering.tsx
 import {
   useCallback as useCallback15,
-  useContext as useContext31,
+  useContext as useContext32,
   useEffect as useEffect19,
   useLayoutEffect as useLayoutEffect9,
-  useMemo as useMemo27,
-  useState as useState18
+  useMemo as useMemo28,
+  useState as useState19
 } from "react";
 
 // src/video/offthread-video-source.ts
@@ -6244,7 +6253,7 @@ var getOffthreadVideoSource = ({
 };
 
 // src/video/OffthreadVideoForRendering.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var OffthreadVideoForRendering = ({
   onError,
   volume: volumeProp,
@@ -6268,13 +6277,13 @@ var OffthreadVideoForRendering = ({
   const frame = useCurrentFrame();
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior);
   const videoConfig = useUnsafeVideoConfig();
-  const sequenceContext = useContext31(SequenceContext);
+  const sequenceContext = useContext32(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext31(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext32(RenderAssetManager);
   if (!src) {
     throw new TypeError("No `src` was passed to <OffthreadVideo>.");
   }
-  const id = useMemo27(() => `offthreadvideo-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo28(() => `offthreadvideo-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,
@@ -6329,14 +6338,14 @@ var OffthreadVideoForRendering = ({
     sequenceContext?.relativeFrom,
     audioStreamIndex
   ]);
-  const currentTime = useMemo27(() => {
+  const currentTime = useMemo28(() => {
     return getExpectedMediaFrameUncorrected({
       frame,
       playbackRate: playbackRate || 1,
       startFrom: -mediaStartsAt
     }) / videoConfig.fps;
   }, [frame, mediaStartsAt, playbackRate, videoConfig.fps]);
-  const actualSrc = useMemo27(() => {
+  const actualSrc = useMemo28(() => {
     return getOffthreadVideoSource({
       src,
       currentTime,
@@ -6344,7 +6353,7 @@ var OffthreadVideoForRendering = ({
       toneMapped
     });
   }, [toneMapped, currentTime, src, transparent]);
-  const [imageSrc, setImageSrc] = useState18(null);
+  const [imageSrc, setImageSrc] = useState19(null);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   useLayoutEffect9(() => {
     if (!window.remotion_videoEnabled) {
@@ -6424,7 +6433,7 @@ var OffthreadVideoForRendering = ({
       cancelRender("Failed to load image with src " + imageSrc);
     }
   }, [imageSrc, onError]);
-  const className = useMemo27(() => {
+  const className = useMemo28(() => {
     return [OBJECTFIT_CONTAIN_CLASS_NAME, props2.className].filter(truthy).join(" ");
   }, [props2.className]);
   const onImageFrame = useCallback15((img) => {
@@ -6436,7 +6445,7 @@ var OffthreadVideoForRendering = ({
     return null;
   }
   continueRender2(imageSrc.handle);
-  return /* @__PURE__ */ jsx28(Img, {
+  return /* @__PURE__ */ jsx29(Img, {
     src: imageSrc.src,
     delayRenderRetries,
     delayRenderTimeoutInMilliseconds,
@@ -6450,12 +6459,12 @@ var OffthreadVideoForRendering = ({
 // src/video/VideoForPreview.tsx
 import {
   forwardRef as forwardRef9,
-  useContext as useContext32,
+  useContext as useContext33,
   useEffect as useEffect21,
   useImperativeHandle as useImperativeHandle9,
-  useMemo as useMemo28,
+  useMemo as useMemo29,
   useRef as useRef16,
-  useState as useState19
+  useState as useState20
 } from "react";
 
 // src/video/emit-video-frame.ts
@@ -6488,14 +6497,14 @@ var useEmitVideoFrame = ({
 };
 
 // src/video/VideoForPreview.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
-  const context = useContext32(SharedAudioContext);
+  const context = useContext33(SharedAudioContext);
   if (!context) {
     throw new Error("SharedAudioContext not found");
   }
   const videoRef = useRef16(null);
-  const sharedSource = useMemo28(() => {
+  const sharedSource = useMemo29(() => {
     if (!context.audioContext) {
       return null;
     }
@@ -6538,11 +6547,11 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   }
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const { fps, durationInFrames } = useVideoConfig();
-  const parentSequence = useContext32(SequenceContext);
-  const { hidden } = useContext32(SequenceVisibilityToggleContext);
+  const parentSequence = useContext33(SequenceContext);
+  const { hidden } = useContext33(SequenceVisibilityToggleContext);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
-  const [timelineId] = useState19(() => String(Math.random()));
+  const [timelineId] = useState20(() => String(Math.random()));
   const isSequenceHidden = hidden[timelineId] ?? false;
   if (typeof acceptableTimeShift !== "undefined") {
     throw new Error("acceptableTimeShift has been removed. Use acceptableTimeShiftInSeconds instead.");
@@ -6608,7 +6617,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   useImperativeHandle9(ref, () => {
     return videoRef.current;
   }, []);
-  useState19(() => playbackLogging({
+  useState20(() => playbackLogging({
     logLevel,
     message: `Mounting video with source = ${actualSrc}, v=${VERSION}, user agent=${typeof navigator === "undefined" ? "server" : navigator.userAgent}`,
     tag: "video",
@@ -6673,7 +6682,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.preload = "auto";
     }
   }, []);
-  const actualStyle = useMemo28(() => {
+  const actualStyle = useMemo29(() => {
     return {
       ...style,
       opacity: isSequenceHidden ? 0 : style?.opacity ?? 1
@@ -6683,7 +6692,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     crossOrigin,
     requestsVideoFrame: Boolean(onVideoFrame)
   });
-  return /* @__PURE__ */ jsx29("video", {
+  return /* @__PURE__ */ jsx30("video", {
     ref: videoRef,
     muted: muted || mediaMuted || isSequenceHidden || userPreferredVolume <= 0,
     playsInline: true,
@@ -6698,7 +6707,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
 var VideoForPreview = forwardRef9(VideoForDevelopmentRefForwardingFunction);
 
 // src/video/OffthreadVideo.tsx
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var InnerOffthreadVideo = (props2) => {
   const {
     startFrom,
@@ -6726,13 +6735,13 @@ var InnerOffthreadVideo = (props2) => {
     trimAfter
   });
   if (typeof trimBeforeValue !== "undefined" || typeof trimAfterValue !== "undefined") {
-    return /* @__PURE__ */ jsx30(Sequence, {
+    return /* @__PURE__ */ jsx31(Sequence, {
       layout: "none",
       from: 0 - (trimBeforeValue ?? 0),
       showInTimeline: false,
       durationInFrames: trimAfterValue,
       name,
-      children: /* @__PURE__ */ jsx30(InnerOffthreadVideo, {
+      children: /* @__PURE__ */ jsx31(InnerOffthreadVideo, {
         pauseWhenBuffering: pauseWhenBuffering ?? false,
         ...otherProps,
         trimAfter: undefined,
@@ -6747,7 +6756,7 @@ var InnerOffthreadVideo = (props2) => {
   }
   validateMediaProps(props2, "Video");
   if (environment.isRendering) {
-    return /* @__PURE__ */ jsx30(OffthreadVideoForRendering, {
+    return /* @__PURE__ */ jsx31(OffthreadVideoForRendering, {
       pauseWhenBuffering: pauseWhenBuffering ?? false,
       ...otherProps,
       trimAfter: undefined,
@@ -6769,7 +6778,7 @@ var InnerOffthreadVideo = (props2) => {
     delayRenderTimeoutInMilliseconds,
     ...propsForPreview
   } = otherProps;
-  return /* @__PURE__ */ jsx30(VideoForPreview, {
+  return /* @__PURE__ */ jsx31(VideoForPreview, {
     _remotionInternalStack: stack ?? null,
     onDuration,
     onlyWarnForMediaSeekingError: true,
@@ -6818,7 +6827,7 @@ var OffthreadVideo = ({
   if (imageFormat) {
     throw new TypeError(`The \`<OffthreadVideo>\` tag does no longer accept \`imageFormat\`. Use the \`transparent\` prop if you want to render a transparent video.`);
   }
-  return /* @__PURE__ */ jsx30(InnerOffthreadVideo, {
+  return /* @__PURE__ */ jsx31(InnerOffthreadVideo, {
     acceptableTimeShiftInSeconds,
     allowAmplificationDuringRender: allowAmplificationDuringRender ?? true,
     audioStreamIndex: audioStreamIndex ?? 0,
@@ -6891,22 +6900,22 @@ var watchStaticFile = (fileName, callback) => {
 };
 
 // src/wrap-remotion-context.tsx
-import React30, { useMemo as useMemo29 } from "react";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import React31, { useMemo as useMemo30 } from "react";
+import { jsx as jsx32 } from "react/jsx-runtime";
 function useRemotionContexts() {
-  const compositionManagerCtx = React30.useContext(CompositionManager);
-  const timelineContext = React30.useContext(TimelineContext);
-  const setTimelineContext = React30.useContext(SetTimelineContext);
-  const sequenceContext = React30.useContext(SequenceContext);
-  const nonceContext = React30.useContext(NonceContext);
-  const canUseRemotionHooksContext = React30.useContext(CanUseRemotionHooks);
-  const preloadContext = React30.useContext(PreloadContext);
-  const resolveCompositionContext = React30.useContext(ResolveCompositionContext);
-  const renderAssetManagerContext = React30.useContext(RenderAssetManager);
-  const sequenceManagerContext = React30.useContext(SequenceManager);
-  const bufferManagerContext = React30.useContext(BufferingContextReact);
-  const logLevelContext = React30.useContext(LogLevelContext);
-  return useMemo29(() => ({
+  const compositionManagerCtx = React31.useContext(CompositionManager);
+  const timelineContext = React31.useContext(TimelineContext);
+  const setTimelineContext = React31.useContext(SetTimelineContext);
+  const sequenceContext = React31.useContext(SequenceContext);
+  const nonceContext = React31.useContext(NonceContext);
+  const canUseRemotionHooksContext = React31.useContext(CanUseRemotionHooks);
+  const preloadContext = React31.useContext(PreloadContext);
+  const resolveCompositionContext = React31.useContext(ResolveCompositionContext);
+  const renderAssetManagerContext = React31.useContext(RenderAssetManager);
+  const sequenceManagerContext = React31.useContext(SequenceManager);
+  const bufferManagerContext = React31.useContext(BufferingContextReact);
+  const logLevelContext = React31.useContext(LogLevelContext);
+  return useMemo30(() => ({
     compositionManagerCtx,
     timelineContext,
     setTimelineContext,
@@ -6936,29 +6945,29 @@ function useRemotionContexts() {
 }
 var RemotionContextProvider = (props2) => {
   const { children, contexts } = props2;
-  return /* @__PURE__ */ jsx31(LogLevelContext.Provider, {
+  return /* @__PURE__ */ jsx32(LogLevelContext.Provider, {
     value: contexts.logLevelContext,
-    children: /* @__PURE__ */ jsx31(CanUseRemotionHooks.Provider, {
+    children: /* @__PURE__ */ jsx32(CanUseRemotionHooks.Provider, {
       value: contexts.canUseRemotionHooksContext,
-      children: /* @__PURE__ */ jsx31(NonceContext.Provider, {
+      children: /* @__PURE__ */ jsx32(NonceContext.Provider, {
         value: contexts.nonceContext,
-        children: /* @__PURE__ */ jsx31(PreloadContext.Provider, {
+        children: /* @__PURE__ */ jsx32(PreloadContext.Provider, {
           value: contexts.preloadContext,
-          children: /* @__PURE__ */ jsx31(CompositionManager.Provider, {
+          children: /* @__PURE__ */ jsx32(CompositionManager.Provider, {
             value: contexts.compositionManagerCtx,
-            children: /* @__PURE__ */ jsx31(SequenceManager.Provider, {
+            children: /* @__PURE__ */ jsx32(SequenceManager.Provider, {
               value: contexts.sequenceManagerContext,
-              children: /* @__PURE__ */ jsx31(RenderAssetManager.Provider, {
+              children: /* @__PURE__ */ jsx32(RenderAssetManager.Provider, {
                 value: contexts.renderAssetManagerContext,
-                children: /* @__PURE__ */ jsx31(ResolveCompositionContext.Provider, {
+                children: /* @__PURE__ */ jsx32(ResolveCompositionContext.Provider, {
                   value: contexts.resolveCompositionContext,
-                  children: /* @__PURE__ */ jsx31(TimelineContext.Provider, {
+                  children: /* @__PURE__ */ jsx32(TimelineContext.Provider, {
                     value: contexts.timelineContext,
-                    children: /* @__PURE__ */ jsx31(SetTimelineContext.Provider, {
+                    children: /* @__PURE__ */ jsx32(SetTimelineContext.Provider, {
                       value: contexts.setTimelineContext,
-                      children: /* @__PURE__ */ jsx31(SequenceContext.Provider, {
+                      children: /* @__PURE__ */ jsx32(SequenceContext.Provider, {
                         value: contexts.sequenceContext,
-                        children: /* @__PURE__ */ jsx31(BufferingContextReact.Provider, {
+                        children: /* @__PURE__ */ jsx32(BufferingContextReact.Provider, {
                           value: contexts.bufferManagerContext,
                           children
                         })
@@ -6993,6 +7002,7 @@ var Internals = {
   SequenceManager,
   SequenceVisibilityToggleContext,
   RemotionRoot,
+  CompositionManagerProvider,
   useVideo,
   getRoot,
   useMediaVolumeState,
@@ -7017,6 +7027,7 @@ var Internals = {
   compositionsRef,
   portalNode,
   waitForRoot,
+  SetTimelineContext,
   CanUseRemotionHooksProvider,
   CanUseRemotionHooks,
   PrefetchProvider,
@@ -7065,7 +7076,10 @@ var Internals = {
   setInputPropsOverride,
   useVideoEnabled,
   useAudioEnabled,
-  useIsPlayerBuffering
+  useIsPlayerBuffering,
+  TimelinePosition: exports_timeline_position_state,
+  DelayRenderContextType,
+  TimelineContext
 };
 // src/interpolate-colors.ts
 var NUMBER = "[-+]?\\d*\\.?\\d+";
@@ -7431,14 +7445,14 @@ var validateFrame = ({
   }
 };
 // src/series/index.tsx
-import { Children, forwardRef as forwardRef10, useMemo as useMemo30 } from "react";
+import { Children, forwardRef as forwardRef10, useMemo as useMemo31 } from "react";
 
 // src/series/flatten-children.tsx
-import React31 from "react";
+import React32 from "react";
 var flattenChildren = (children) => {
-  const childrenArray = React31.Children.toArray(children);
+  const childrenArray = React32.Children.toArray(children);
   return childrenArray.reduce((flatChildren, child) => {
-    if (child.type === React31.Fragment) {
+    if (child.type === React32.Fragment) {
       return flatChildren.concat(flattenChildren(child.props.children));
     }
     flatChildren.push(child);
@@ -7447,39 +7461,39 @@ var flattenChildren = (children) => {
 };
 
 // src/series/is-inside-series.tsx
-import React32, { createContext as createContext20 } from "react";
-import { jsx as jsx32 } from "react/jsx-runtime";
-var IsInsideSeriesContext = createContext20(false);
+import React33, { createContext as createContext21 } from "react";
+import { jsx as jsx33 } from "react/jsx-runtime";
+var IsInsideSeriesContext = createContext21(false);
 var IsInsideSeriesContainer = ({ children }) => {
-  return /* @__PURE__ */ jsx32(IsInsideSeriesContext.Provider, {
+  return /* @__PURE__ */ jsx33(IsInsideSeriesContext.Provider, {
     value: true,
     children
   });
 };
 var IsNotInsideSeriesProvider = ({ children }) => {
-  return /* @__PURE__ */ jsx32(IsInsideSeriesContext.Provider, {
+  return /* @__PURE__ */ jsx33(IsInsideSeriesContext.Provider, {
     value: false,
     children
   });
 };
 var useRequireToBeInsideSeries = () => {
-  const isInsideSeries = React32.useContext(IsInsideSeriesContext);
+  const isInsideSeries = React33.useContext(IsInsideSeriesContext);
   if (!isInsideSeries) {
     throw new Error("This component must be inside a <Series /> component.");
   }
 };
 
 // src/series/index.tsx
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var SeriesSequenceRefForwardingFunction = ({ children }, _ref) => {
   useRequireToBeInsideSeries();
-  return /* @__PURE__ */ jsx33(IsNotInsideSeriesProvider, {
+  return /* @__PURE__ */ jsx34(IsNotInsideSeriesProvider, {
     children
   });
 };
 var SeriesSequence = forwardRef10(SeriesSequenceRefForwardingFunction);
 var Series = (props2) => {
-  const childrenValue = useMemo30(() => {
+  const childrenValue = useMemo31(() => {
     let startFrame = 0;
     const flattenedChildren = flattenChildren(props2.children);
     return Children.map(flattenedChildren, (child, i) => {
@@ -7523,7 +7537,7 @@ var Series = (props2) => {
       }
       const currentStartFrame = startFrame + offset;
       startFrame += durationInFramesProp + offset;
-      return /* @__PURE__ */ jsx33(Sequence, {
+      return /* @__PURE__ */ jsx34(Sequence, {
         name: name || "<Series.Sequence>",
         from: currentStartFrame,
         durationInFrames: durationInFramesProp,
@@ -7534,14 +7548,14 @@ var Series = (props2) => {
     });
   }, [props2.children]);
   if (ENABLE_V5_BREAKING_CHANGES) {
-    return /* @__PURE__ */ jsx33(IsInsideSeriesContainer, {
-      children: /* @__PURE__ */ jsx33(Sequence, {
+    return /* @__PURE__ */ jsx34(IsInsideSeriesContainer, {
+      children: /* @__PURE__ */ jsx34(Sequence, {
         ...props2,
         children: childrenValue
       })
     });
   }
-  return /* @__PURE__ */ jsx33(IsInsideSeriesContainer, {
+  return /* @__PURE__ */ jsx34(IsInsideSeriesContainer, {
     children: childrenValue
   });
 };
@@ -7878,26 +7892,26 @@ var staticFile = (path) => {
   return preparsed;
 };
 // src/Still.tsx
-import React34 from "react";
+import React35 from "react";
 var Still = (props2) => {
   const newProps = {
     ...props2,
     durationInFrames: 1,
     fps: 1
   };
-  return React34.createElement(Composition, newProps);
+  return React35.createElement(Composition, newProps);
 };
 // src/video/Video.tsx
-import { forwardRef as forwardRef12, useCallback as useCallback17, useContext as useContext34 } from "react";
+import { forwardRef as forwardRef12, useCallback as useCallback17, useContext as useContext35 } from "react";
 
 // src/video/VideoForRendering.tsx
 import {
   forwardRef as forwardRef11,
-  useContext as useContext33,
+  useContext as useContext34,
   useEffect as useEffect22,
   useImperativeHandle as useImperativeHandle10,
   useLayoutEffect as useLayoutEffect10,
-  useMemo as useMemo31,
+  useMemo as useMemo32,
   useRef as useRef17
 } from "react";
 
@@ -8026,7 +8040,7 @@ var seekToTimeMultipleUntilRight = ({
 };
 
 // src/video/VideoForRendering.tsx
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var VideoForRenderingForwardFunction = ({
   onError,
   volume: volumeProp,
@@ -8047,14 +8061,14 @@ var VideoForRenderingForwardFunction = ({
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const videoConfig = useUnsafeVideoConfig();
   const videoRef = useRef17(null);
-  const sequenceContext = useContext33(SequenceContext);
+  const sequenceContext = useContext34(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
   const environment = useRemotionEnvironment();
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext33(RenderAssetManager);
-  const id = useMemo31(() => `video-${random(props2.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+  const { registerRenderAsset, unregisterRenderAsset } = useContext34(RenderAssetManager);
+  const id = useMemo32(() => `video-${random(props2.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     props2.src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,
@@ -8230,7 +8244,7 @@ var VideoForRenderingForwardFunction = ({
       delayRender2
     ]);
   }
-  return /* @__PURE__ */ jsx34("video", {
+  return /* @__PURE__ */ jsx35("video", {
     ref: videoRef,
     disableRemotePlayback: true,
     ...props2
@@ -8239,7 +8253,7 @@ var VideoForRenderingForwardFunction = ({
 var VideoForRendering = forwardRef11(VideoForRenderingForwardFunction);
 
 // src/video/Video.tsx
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var VideoForwardingFunction = (props2, ref) => {
   const {
     startFrom,
@@ -8257,7 +8271,7 @@ var VideoForwardingFunction = (props2, ref) => {
   const { loop, ...propsOtherThanLoop } = props2;
   const { fps } = useVideoConfig();
   const environment = useRemotionEnvironment();
-  const { durations, setDurations } = useContext34(DurationsContext);
+  const { durations, setDurations } = useContext35(DurationsContext);
   if (typeof ref === "string") {
     throw new Error("string refs are not supported");
   }
@@ -8279,14 +8293,14 @@ var VideoForwardingFunction = (props2, ref) => {
   });
   if (loop && durationFetched !== undefined) {
     if (!Number.isFinite(durationFetched)) {
-      return /* @__PURE__ */ jsx35(Html5Video, {
+      return /* @__PURE__ */ jsx36(Html5Video, {
         ...propsOtherThanLoop,
         ref,
         _remotionInternalNativeLoopPassed: true
       });
     }
     const mediaDuration = durationFetched * fps;
-    return /* @__PURE__ */ jsx35(Loop, {
+    return /* @__PURE__ */ jsx36(Loop, {
       durationInFrames: calculateMediaDuration({
         trimAfter: trimAfterValue,
         mediaDurationInFrames: mediaDuration,
@@ -8295,7 +8309,7 @@ var VideoForwardingFunction = (props2, ref) => {
       }),
       layout: "none",
       name,
-      children: /* @__PURE__ */ jsx35(Html5Video, {
+      children: /* @__PURE__ */ jsx36(Html5Video, {
         ...propsOtherThanLoop,
         ref,
         _remotionInternalNativeLoopPassed: true
@@ -8303,13 +8317,13 @@ var VideoForwardingFunction = (props2, ref) => {
     });
   }
   if (typeof trimBeforeValue !== "undefined" || typeof trimAfterValue !== "undefined") {
-    return /* @__PURE__ */ jsx35(Sequence, {
+    return /* @__PURE__ */ jsx36(Sequence, {
       layout: "none",
       from: 0 - (trimBeforeValue ?? 0),
       showInTimeline: false,
       durationInFrames: trimAfterValue,
       name,
-      children: /* @__PURE__ */ jsx35(Html5Video, {
+      children: /* @__PURE__ */ jsx36(Html5Video, {
         pauseWhenBuffering: pauseWhenBuffering ?? false,
         ...otherProps,
         ref
@@ -8318,14 +8332,14 @@ var VideoForwardingFunction = (props2, ref) => {
   }
   validateMediaProps({ playbackRate: props2.playbackRate, volume: props2.volume }, "Html5Video");
   if (environment.isRendering) {
-    return /* @__PURE__ */ jsx35(VideoForRendering, {
+    return /* @__PURE__ */ jsx36(VideoForRendering, {
       onDuration,
       onVideoFrame: onVideoFrame ?? null,
       ...otherProps,
       ref
     });
   }
-  return /* @__PURE__ */ jsx35(VideoForPreview, {
+  return /* @__PURE__ */ jsx36(VideoForPreview, {
     onlyWarnForMediaSeekingError: false,
     ...otherProps,
     ref,