remotion 4.0.519 → 4.0.521

package/dist/esm/index.mjs

@@ -33,7 +33,7 @@ var Clipper = () => {
 };
 
 // src/Composition.tsx
-import { Suspense, useCallback as useCallback4, useContext as useContext10, useEffect as useEffect2 } from "react";
+import { Suspense, useCallback as useCallback3, useContext as useContext9, useEffect as useEffect2 } from "react";
 import { createPortal } from "react-dom";
 
 // src/CanUseRemotionHooks.tsx
@@ -207,43 +207,45 @@ var getSingleChildComponent = (children) => {
 };
 
 // src/Folder.tsx
-import { createContext as createContext6, useContext as useContext2, useEffect, useMemo as useMemo2 } from "react";
-
-// src/nonce.ts
-import { createContext as createContext5, useCallback, useContext, useMemo, useRef } from "react";
-var NonceContext = createContext5({
-  getNonce: () => 0
+import { createContext as createContext5, useContext as useContext2, useEffect, useMemo } from "react";
+
+// src/sequence-order-marker.tsx
+var SEQUENCE_ORDER_MARKER = Symbol.for("remotion.sequence-order-marker");
+var SEQUENCE_MANAGER_ORDER_MARKER = Symbol.for("remotion.sequence-manager-order-marker");
+var COMPOSITION_ORDER_MARKER = Symbol.for("remotion.composition-order-marker");
+var FOLDER_ORDER_MARKER = Symbol.for("remotion.folder-order-marker");
+var COMPOSITION_MANAGER_ORDER_MARKER = Symbol.for("remotion.composition-manager-order-marker");
+var COMMIT_ORDER_EVENT = "remotion:commit-order";
+var getCompositionAndFolderOrderKey = (item) => `${item.type}:${item.id}`;
+var getFolderOrderId = ({
+  name,
+  parent
+}) => [parent, name].filter(Boolean).join("/");
+var SequenceOrderMarker = ({ children }) => children;
+Object.defineProperty(SequenceOrderMarker, SEQUENCE_ORDER_MARKER, {
+  value: true
 });
-var fastRefreshNonce = 0;
-try {
-  if (typeof __webpack_module__ !== "undefined") {
-    if (__webpack_module__.hot) {
-      __webpack_module__.hot.addStatusHandler((status) => {
-        if (status === "idle") {
-          fastRefreshNonce++;
-        }
-      });
-    }
-  }
-} catch {}
-var useNonce = () => {
-  const context = useContext(NonceContext);
-  const nonce = context.getNonce();
-  const nonceRef = useRef(nonce);
-  nonceRef.current = nonce;
-  const history = useRef([[fastRefreshNonce, nonce]]);
-  const get = useCallback(() => {
-    if (fastRefreshNonce !== history.current[history.current.length - 1][0]) {
-      history.current = [
-        ...history.current,
-        [fastRefreshNonce, nonceRef.current]
-      ];
-    }
-    return history.current;
-  }, [history]);
-  return useMemo(() => {
-    return { get };
-  }, [get]);
+var SequenceManagerOrderMarker = ({ children }) => children;
+Object.defineProperty(SequenceManagerOrderMarker, SEQUENCE_MANAGER_ORDER_MARKER, {
+  value: true
+});
+var CompositionOrderMarker = ({ children }) => children;
+Object.defineProperty(CompositionOrderMarker, COMPOSITION_ORDER_MARKER, {
+  value: true
+});
+var FolderOrderMarker = ({ children }) => children;
+Object.defineProperty(FolderOrderMarker, FOLDER_ORDER_MARKER, {
+  value: true
+});
+var CompositionManagerOrderMarker = ({ children }) => children;
+Object.defineProperty(CompositionManagerOrderMarker, COMPOSITION_MANAGER_ORDER_MARKER, { value: true });
+var CommitOrderInternals = {
+  compositionManagerMarker: COMPOSITION_MANAGER_ORDER_MARKER,
+  compositionMarker: COMPOSITION_ORDER_MARKER,
+  folderMarker: FOLDER_ORDER_MARKER,
+  sequenceManagerMarker: SEQUENCE_MANAGER_ORDER_MARKER,
+  sequenceMarker: SEQUENCE_ORDER_MARKER,
+  eventName: COMMIT_ORDER_EVENT
 };
 
 // src/truthy.ts
@@ -251,6 +253,41 @@ function truthy(value) {
   return Boolean(value);
 }
 
+// src/use-remotion-environment.ts
+import { useContext, useState } from "react";
+
+// src/get-remotion-environment.ts
+function getNodeEnvString() {
+  return ["NOD", "E_EN", "V"].join("");
+}
+var getEnvString = () => {
+  return ["e", "nv"].join("");
+};
+var getRemotionEnvironment = () => {
+  const isPlayer = typeof window !== "undefined" && window.remotion_isPlayer;
+  const isRendering = typeof window !== "undefined" && typeof window.process !== "undefined" && typeof window.process.env !== "undefined" && (window.process[getEnvString()][getNodeEnvString()] === "test" || window.process[getEnvString()][getNodeEnvString()] === "production" && typeof window !== "undefined" && typeof window.remotion_puppeteerTimeout !== "undefined");
+  const isStudio = typeof window !== "undefined" && window.remotion_isStudio;
+  const isReadOnlyStudio = typeof window !== "undefined" && window.remotion_isReadOnlyStudio;
+  return {
+    isStudio,
+    isRendering,
+    isPlayer,
+    isReadOnlyStudio,
+    isClientSideRendering: false
+  };
+};
+
+// src/remotion-environment-context.ts
+import React4 from "react";
+var RemotionEnvironmentContext = React4.createContext(null);
+
+// src/use-remotion-environment.ts
+var useRemotionEnvironment = () => {
+  const context = useContext(RemotionEnvironmentContext);
+  const [env] = useState(() => getRemotionEnvironment());
+  return context ?? env;
+};
+
 // src/validation/validate-folder-name.ts
 var getRegex = () => /^([a-zA-Z0-9-\u4E00-\u9FFF])+$/g;
 var isFolderNameValid = (name) => name.match(getRegex());
@@ -269,7 +306,7 @@ var invalidFolderNameErrorMessage = `Folder name must match ${String(getRegex())
 
 // src/Folder.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
-var FolderContext = createContext6({
+var FolderContext = createContext5({
   folderName: null,
   parentName: null
 });
@@ -277,19 +314,19 @@ var Folder = (props) => {
   const { name, children } = props;
   const parent = useContext2(FolderContext);
   const { registerFolder, unregisterFolder } = useContext2(CompositionSetters);
-  const nonce = useNonce();
+  const environment = useRemotionEnvironment();
   const stack = props._remotionInternalStack ?? null;
   validateFolderName(name);
   const parentNameArr = [parent.parentName, parent.folderName].filter(truthy);
   const parentName = parentNameArr.length === 0 ? null : parentNameArr.join("/");
-  const value = useMemo2(() => {
+  const value = useMemo(() => {
     return {
       folderName: name,
       parentName
     };
   }, [name, parentName]);
   useEffect(() => {
-    registerFolder(name, parentName, nonce.get(), stack);
+    registerFolder(name, parentName, stack);
     return () => {
       unregisterFolder(name, parentName);
     };
@@ -299,34 +336,16 @@ var Folder = (props) => {
     parentName,
     registerFolder,
     unregisterFolder,
-    nonce,
     stack
   ]);
-  return /* @__PURE__ */ jsx2(FolderContext.Provider, {
+  const folder = /* @__PURE__ */ jsx2(FolderContext.Provider, {
     value,
     children
   });
-};
-
-// src/get-remotion-environment.ts
-function getNodeEnvString() {
-  return ["NOD", "E_EN", "V"].join("");
-}
-var getEnvString = () => {
-  return ["e", "nv"].join("");
-};
-var getRemotionEnvironment = () => {
-  const isPlayer = typeof window !== "undefined" && window.remotion_isPlayer;
-  const isRendering = typeof window !== "undefined" && typeof window.process !== "undefined" && typeof window.process.env !== "undefined" && (window.process[getEnvString()][getNodeEnvString()] === "test" || window.process[getEnvString()][getNodeEnvString()] === "production" && typeof window !== "undefined" && typeof window.remotion_puppeteerTimeout !== "undefined");
-  const isStudio = typeof window !== "undefined" && window.remotion_isStudio;
-  const isReadOnlyStudio = typeof window !== "undefined" && window.remotion_isReadOnlyStudio;
-  return {
-    isStudio,
-    isRendering,
-    isPlayer,
-    isReadOnlyStudio,
-    isClientSideRendering: false
-  };
+  return environment.isStudio ? /* @__PURE__ */ jsx2(FolderOrderMarker, {
+    folderId: getFolderOrderId({ name, parent: parentName }),
+    children: folder
+  }) : folder;
 };
 
 // src/input-props-serialization.ts
@@ -405,9 +424,9 @@ var serializeThenDeserializeInStudio = (props) => {
 };
 
 // src/is-player.tsx
-import { createContext as createContext7, useContext as useContext3 } from "react";
+import { createContext as createContext6, useContext as useContext3 } from "react";
 import { jsx as jsx3 } from "react/jsx-runtime";
-var IsPlayerContext = createContext7(false);
+var IsPlayerContext = createContext6(false);
 var IsPlayerContextProvider = ({
   children
 }) => {
@@ -421,7 +440,7 @@ var useIsPlayer = () => {
 };
 
 // src/AbsoluteFillElement.tsx
-import { forwardRef, useMemo as useMemo3 } from "react";
+import { forwardRef, useMemo as useMemo2 } from "react";
 import { jsx as jsx4 } from "react/jsx-runtime";
 var hasTailwindClassName = ({
   className,
@@ -445,7 +464,7 @@ var hasTailwindClassName = ({
 };
 var AbsoluteFillElementRefForwarding = (props, ref) => {
   const { style, ...other } = props;
-  const actualStyle = useMemo3(() => {
+  const actualStyle = useMemo2(() => {
     return {
       position: "absolute",
       top: hasTailwindClassName({
@@ -517,7 +536,7 @@ var AbsoluteFillElementRefForwarding = (props, ref) => {
 var AbsoluteFillElement = forwardRef(AbsoluteFillElementRefForwarding);
 
 // src/use-current-scale.ts
-import React7, { createContext as createContext11 } from "react";
+import React7, { createContext as createContext10 } from "react";
 
 // src/portal-node.ts
 var _portalNode = null;
@@ -563,32 +582,18 @@ var portalNode = () => {
   return _portalNode;
 };
 
-// src/use-remotion-environment.ts
-import { useContext as useContext4, useState } from "react";
-
-// src/remotion-environment-context.ts
-import React5 from "react";
-var RemotionEnvironmentContext = React5.createContext(null);
-
-// src/use-remotion-environment.ts
-var useRemotionEnvironment = () => {
-  const context = useContext4(RemotionEnvironmentContext);
-  const [env] = useState(() => getRemotionEnvironment());
-  return context ?? env;
-};
-
 // src/use-unsafe-video-config.ts
-import { useContext as useContext7, useMemo as useMemo7 } from "react";
+import { useContext as useContext6, useMemo as useMemo6 } from "react";
 
 // src/SequenceContext.tsx
-import { createContext as createContext8 } from "react";
-var SequenceContext = createContext8(null);
+import { createContext as createContext7 } from "react";
+var SequenceContext = createContext7(null);
 
 // src/use-video.ts
-import { useContext as useContext6, useMemo as useMemo6 } from "react";
+import { useContext as useContext5, useMemo as useMemo5 } from "react";
 
 // src/ResolveCompositionConfig.tsx
-import { createContext as createContext10, createRef, useContext as useContext5, useMemo as useMemo5 } from "react";
+import { createContext as createContext9, createRef, useContext as useContext4, useMemo as useMemo4 } from "react";
 
 // src/input-props-override.ts
 var getKey = () => {
@@ -647,9 +652,9 @@ var getInputProps = () => {
 };
 
 // src/EditorProps.tsx
-import React6, { createContext as createContext9, useCallback as useCallback2, useMemo as useMemo4 } from "react";
+import React6, { createContext as createContext8, useCallback, useMemo as useMemo3 } from "react";
 import { jsx as jsx5 } from "react/jsx-runtime";
-var EditorPropsContext = createContext9({
+var EditorPropsContext = createContext8({
   props: {},
   updateProps: () => {
     throw new Error("Not implemented");
@@ -658,7 +663,7 @@ var EditorPropsContext = createContext9({
 var timeValueRef = React6.createRef();
 var EditorPropsProvider = ({ children }) => {
   const [props, setProps] = React6.useState({});
-  const updateProps = useCallback2(({
+  const updateProps = useCallback(({
     defaultProps,
     id,
     newProps
@@ -670,7 +675,7 @@ var EditorPropsProvider = ({ children }) => {
       };
     });
   }, []);
-  const ctx = useMemo4(() => {
+  const ctx = useMemo3(() => {
     return { props, updateProps };
   }, [props, updateProps]);
   return /* @__PURE__ */ jsx5(EditorPropsContext.Provider, {
@@ -738,28 +743,28 @@ function validateFps(fps, location, isGif) {
 }
 
 // src/ResolveCompositionConfig.tsx
-var ResolveCompositionContext = createContext10(null);
+var ResolveCompositionContext = createContext9(null);
 var resolveCompositionsRef = createRef();
 var needsResolution = (composition) => {
   return Boolean(composition.calculateMetadata);
 };
 var useResolvedVideoConfig = (preferredCompositionId) => {
-  const context = useContext5(ResolveCompositionContext);
-  const { props: allEditorProps } = useContext5(EditorPropsContext);
+  const context = useContext4(ResolveCompositionContext);
+  const { props: allEditorProps } = useContext4(EditorPropsContext);
   const {
     compositions,
     canvasContent,
     currentCompositionMetadata,
     currentAssetMetadata
-  } = useContext5(CompositionManager);
+  } = useContext4(CompositionManager);
   const currentComposition = canvasContent?.type === "composition" ? canvasContent.compositionId : null;
   const compositionId = preferredCompositionId ?? currentComposition;
   const composition = compositions.find((c) => c.id === compositionId);
-  const selectedEditorProps = useMemo5(() => {
+  const selectedEditorProps = useMemo4(() => {
     return composition ? allEditorProps[composition.id] ?? {} : {};
   }, [allEditorProps, composition]);
   const env = useRemotionEnvironment();
-  return useMemo5(() => {
+  return useMemo4(() => {
     if (preferredCompositionId === null && canvasContent?.type === "asset" && currentAssetMetadata?.asset === canvasContent.asset) {
       return {
         type: "success",
@@ -844,12 +849,12 @@ var useVideo = () => {
     compositions,
     currentCompositionMetadata,
     currentAssetMetadata
-  } = useContext6(CompositionManager);
+  } = useContext5(CompositionManager);
   const selected = compositions.find((c) => {
     return canvasContent?.type === "composition" && c.id === canvasContent.compositionId;
   });
   const resolved = useResolvedVideoConfig(selected?.id ?? null);
-  return useMemo6(() => {
+  return useMemo5(() => {
     if (canvasContent?.type === "asset" && currentAssetMetadata?.asset === canvasContent.asset) {
       return {
         ...currentAssetMetadata,
@@ -888,12 +893,12 @@ var useVideo = () => {
 
 // src/use-unsafe-video-config.ts
 var useUnsafeVideoConfig = () => {
-  const context = useContext7(SequenceContext);
+  const context = useContext6(SequenceContext);
   const ctxWidth = context?.width ?? null;
   const ctxHeight = context?.height ?? null;
   const ctxDuration = context?.durationInFrames ?? null;
   const video = useVideo();
-  return useMemo7(() => {
+  return useMemo6(() => {
     if (!video) {
       return null;
     }
@@ -932,7 +937,7 @@ var useUnsafeVideoConfig = () => {
 
 // src/use-current-scale.ts
 var CurrentScaleContext = React7.createContext(null);
-var PreviewSizeContext = createContext11({
+var PreviewSizeContext = createContext10({
   setSize: () => {
     return;
   },
@@ -1061,7 +1066,7 @@ var Loading = () => {
 };
 
 // src/use-delay-render.tsx
-import { createContext as createContext13, useCallback as useCallback3, useContext as useContext9 } from "react";
+import { createContext as createContext12, useCallback as useCallback2, useContext as useContext8 } from "react";
 
 // src/cancel-render.ts
 var getErrorStackWithMessage = (error) => {
@@ -1275,9 +1280,9 @@ var continueRender = (handle) => {
 };
 
 // src/log-level-context.tsx
-import { createContext as createContext12 } from "react";
+import { createContext as createContext11 } from "react";
 import * as React8 from "react";
-var LogLevelContext = createContext12({
+var LogLevelContext = createContext11({
   logLevel: "info",
   mountTime: 0
 });
@@ -1297,12 +1302,12 @@ var useMountTime = () => {
 };
 
 // src/use-delay-render.tsx
-var DelayRenderContextType = createContext13(null);
+var DelayRenderContextType = createContext12(null);
 var useDelayRender = () => {
   const environment = useRemotionEnvironment();
-  const scope = useContext9(DelayRenderContextType) ?? (typeof window !== "undefined" ? window : undefined);
+  const scope = useContext8(DelayRenderContextType) ?? (typeof window !== "undefined" ? window : undefined);
   const logLevel = useLogLevel();
-  const delayRender2 = useCallback3((label2, options) => {
+  const delayRender2 = useCallback2((label2, options) => {
     if (!scope) {
       return Math.random();
     }
@@ -1313,7 +1318,7 @@ var useDelayRender = () => {
       options: options ?? {}
     });
   }, [environment, scope]);
-  const continueRender2 = useCallback3((handle) => {
+  const continueRender2 = useCallback2((handle) => {
     if (!scope) {
       return;
     }
@@ -1324,24 +1329,24 @@ var useDelayRender = () => {
       logLevel
     });
   }, [environment, logLevel, scope]);
-  const cancelRender2 = useCallback3((err) => {
+  const cancelRender2 = useCallback2((err) => {
     return cancelRenderInternal(scope ?? (typeof window !== "undefined" ? window : undefined), err);
   }, [scope]);
   return { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 };
 };
 
 // src/use-lazy-component.ts
-import React9, { useMemo as useMemo8, useRef as useRef2 } from "react";
+import React9, { useMemo as useMemo7, useRef } from "react";
 var useLazyComponent = ({
   compProps,
   componentName,
   noSuspense
 }) => {
-  const componentRef = useRef2(null);
+  const componentRef = useRef(null);
   if ("component" in compProps) {
     componentRef.current = compProps.component;
   }
-  const lazy = useMemo8(() => {
+  const lazy = useMemo7(() => {
     if ("component" in compProps) {
       if (typeof document === "undefined" || noSuspense) {
         return compProps.component;
@@ -1409,7 +1414,7 @@ var InnerComposition = ({
   schema,
   ...compProps
 }) => {
-  const compManager = useContext10(CompositionSetters);
+  const compManager = useContext9(CompositionSetters);
   const { registerComposition, unregisterComposition } = compManager;
   const video = useVideo();
   const lazy = useLazyComponent({
@@ -1417,10 +1422,9 @@ var InnerComposition = ({
     componentName: "Composition",
     noSuspense: false
   });
-  const nonce = useNonce();
   const isPlayer = useIsPlayer();
   const environment = useRemotionEnvironment();
-  const canUseComposition = useContext10(CanUseRemotionHooks);
+  const canUseComposition = useContext9(CanUseRemotionHooks);
   if (typeof window !== "undefined") {
     window.remotion_seenCompositionIds = Array.from(new Set([...window.remotion_seenCompositionIds ?? [], id]));
   }
@@ -1430,7 +1434,7 @@ var InnerComposition = ({
     }
     throw new Error("<Composition> mounted inside another composition. See https://remotion.dev/docs/wrong-composition-mount for help.");
   }
-  const { folderName, parentName } = useContext10(FolderContext);
+  const { folderName, parentName } = useContext9(FolderContext);
   const stack = compProps._remotionInternalStack ?? null;
   const componentFromProps = "component" in compProps ? resolveComponentIdentity(compProps.component) : null;
   useEffect2(() => {
@@ -1448,7 +1452,7 @@ var InnerComposition = ({
       folderName,
       component: lazy,
       defaultProps: serializeThenDeserializeInStudio(defaultProps ?? {}),
-      nonce: nonce.get(),
+      order: null,
       parentFolderName: parentName,
       componentFromProps,
       schema: schema ?? null,
@@ -1467,7 +1471,6 @@ var InnerComposition = ({
     folderName,
     defaultProps,
     width,
-    nonce,
     parentName,
     componentFromProps,
     schema,
@@ -1477,11 +1480,11 @@ var InnerComposition = ({
     unregisterComposition
   ]);
   const resolved = useResolvedVideoConfig(id);
-  const { setError, clearError } = useContext10(CompositionRenderErrorContext);
-  const onError = useCallback4((error2) => {
+  const { setError, clearError } = useContext9(CompositionRenderErrorContext);
+  const onError = useCallback3((error2) => {
     setError(error2);
   }, [setError]);
-  const onClear = useCallback4(() => {
+  const onClear = useCallback3(() => {
     clearError();
   }, [clearError]);
   if (environment.isStudio && video && video.component === lazy && video.id === id) {
@@ -1519,17 +1522,22 @@ var InnerComposition = ({
   return null;
 };
 var Composition = (props) => {
-  const { onlyRenderComposition } = useContext10(CompositionSetters);
+  const { onlyRenderComposition } = useContext9(CompositionSetters);
+  const environment = useRemotionEnvironment();
   if (onlyRenderComposition && onlyRenderComposition !== props.id) {
     return null;
   }
-  return /* @__PURE__ */ jsx7(InnerComposition, {
+  const composition = /* @__PURE__ */ jsx7(InnerComposition, {
     ...props
   });
+  return environment.isStudio ? /* @__PURE__ */ jsx7(CompositionOrderMarker, {
+    compositionId: props.id,
+    children: composition
+  }) : composition;
 };
 
 // src/version.ts
-var VERSION = "4.0.519";
+var VERSION = "4.0.521";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -1569,15 +1577,14 @@ var Null = () => {
 import {
   forwardRef as forwardRef3,
   useCallback as useCallback6,
-  useContext as useContext18,
-  useEffect as useEffect3,
-  useMemo as useMemo15,
+  useContext as useContext20,
+  useMemo as useMemo13,
   useRef as useRef6,
-  useState as useState5
+  useState as useState6
 } from "react";
 
 // src/freeze.tsx
-import { useContext as useContext14, useMemo as useMemo11 } from "react";
+import { useContext as useContext15, useMemo as useMemo9 } from "react";
 
 // src/timeline-position-state.ts
 var exports_timeline_position_state = {};
@@ -1585,46 +1592,88 @@ __export(exports_timeline_position_state, {
   useTimelineSetFrame: () => useTimelineSetFrame,
   useTimelinePosition: () => useTimelinePosition,
   useTimelineContext: () => useTimelineContext,
-  usePlayingState: () => usePlayingState,
+  usePlaying: () => usePlaying,
   usePlaybackRate: () => usePlaybackRate,
+  useBuffering: () => useBuffering,
   useAbsoluteTimelinePosition: () => useAbsoluteTimelinePosition,
   persistCurrentFrame: () => persistCurrentFrame,
   getInitialFrameState: () => getInitialFrameState,
   getFrameForComposition: () => getFrameForComposition,
   clampFrameToCompositionRange: () => clampFrameToCompositionRange
 });
-import { useContext as useContext11, useMemo as useMemo10 } from "react";
+import { useContext as useContext12 } from "react";
 
 // src/TimelineContext.tsx
 import {
-  createContext as createContext14,
+  createContext as createContext13,
+  useCallback as useCallback4,
   useLayoutEffect,
-  useMemo as useMemo9,
-  useRef as useRef3,
+  useMemo as useMemo8,
+  useRef as useRef2,
   useState as useState2
 } from "react";
+
+// src/runtime-value-store.ts
+var createRuntimeValueStore = (initialSnapshot) => {
+  let snapshot = initialSnapshot;
+  const listeners = new Set;
+  const store = {
+    getSnapshot: () => snapshot,
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    }
+  };
+  return {
+    store,
+    setSnapshot: (newSnapshot) => {
+      if (snapshot === newSnapshot) {
+        return;
+      }
+      snapshot = newSnapshot;
+      for (const listener of listeners) {
+        listener(snapshot);
+      }
+    }
+  };
+};
+
+// src/TimelineContext.tsx
 import { jsx as jsx8 } from "react/jsx-runtime";
-var SetTimelineContext = createContext14({
-  setFrame: () => {
-    throw new Error("default");
+var missingSetTimelineContext = () => {
+  throw new Error("SetTimelineContext is missing. This is likely caused by a Remotion version mismatch.");
+};
+var SetTimelineContext = createContext13({
+  setFrame: missingSetTimelineContext,
+  setPlaying: missingSetTimelineContext,
+  setBuffering: missingSetTimelineContext,
+  subscribePlaying: () => () => {
+    return;
   },
-  setPlaying: () => {
-    throw new Error("default");
-  }
+  subscribeBuffering: () => () => {
+    return;
+  },
+  isPlaying: () => false,
+  isBuffering: missingSetTimelineContext,
+  frameRef: { current: {} },
+  audioAndVideoTags: { current: [] }
 });
-var TimelineContext = createContext14(null);
-var TimelineImperativeContext = createContext14(null);
-var PlaybackRateContext = createContext14(null);
-var AbsoluteTimeContext = createContext14(null);
+var TimelineContext = createContext13(null);
+var PlaybackRateContext = createContext13(null);
+var AbsoluteTimeContext = createContext13(null);
 var TimelineContextProvider = ({ children, frameState }) => {
-  const [playing, setPlaying] = useState2(false);
-  const imperativePlaying = useRef3(false);
+  const playingStore = useMemo8(() => createRuntimeValueStore({ playing: false }), []);
+  const bufferingStore = useMemo8(() => createRuntimeValueStore({ buffering: false }), []);
   const [playbackRate, setPlaybackRate] = useState2(1);
-  const audioAndVideoTags = useRef3([]);
+  const audioAndVideoTags = useRef2([]);
   const [_frame, setFrame] = useState2(() => getInitialFrameState());
   const frame = frameState ?? _frame;
-  const frameRef = useRef3(frame);
+  const frameRef = useRef2(frame);
   frameRef.current = frame;
+  const readIsPlaying = useCallback4(() => playingStore.store.getSnapshot().playing, [playingStore]);
+  const readIsBuffering = useCallback4(() => bufferingStore.store.getSnapshot().buffering, [bufferingStore]);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   if (typeof window !== "undefined") {
     useLayoutEffect(() => {
@@ -1652,51 +1701,113 @@ var TimelineContextProvider = ({ children, frameState }) => {
       window.remotion_isPlayer = false;
     }, [continueRender2, delayRender2]);
   }
-  const timelineContextValue = useMemo9(() => {
+  const timelineContextValue = useMemo8(() => {
     return {
       frame,
-      playing,
-      imperativePlaying,
+      isPlaying: readIsPlaying,
       audioAndVideoTags
     };
-  }, [frame, playing]);
-  const timelineImperativeContextValue = useMemo9(() => {
-    return {
-      frameRef,
-      imperativePlaying,
-      audioAndVideoTags
-    };
-  }, []);
-  const playbackRateContextValue = useMemo9(() => {
+  }, [frame, readIsPlaying]);
+  const playbackRateContextValue = useMemo8(() => {
     return {
       playbackRate,
       setPlaybackRate
     };
   }, [playbackRate]);
-  const setTimelineContextValue = useMemo9(() => {
+  const setTimelineContextValue = useMemo8(() => {
     return {
       setFrame,
-      setPlaying
+      setPlaying: (updater) => {
+        const current = playingStore.store.getSnapshot().playing;
+        const next = typeof updater === "function" ? updater(current) : updater;
+        if (current !== next) {
+          playingStore.setSnapshot({ playing: next });
+        }
+      },
+      setBuffering: (buffering) => {
+        if (readIsBuffering() !== buffering) {
+          bufferingStore.setSnapshot({ buffering });
+        }
+      },
+      subscribePlaying: playingStore.store.subscribe,
+      subscribeBuffering: bufferingStore.store.subscribe,
+      isPlaying: readIsPlaying,
+      isBuffering: readIsBuffering,
+      frameRef,
+      audioAndVideoTags
     };
-  }, []);
+  }, [bufferingStore, playingStore, readIsBuffering, readIsPlaying]);
   return /* @__PURE__ */ jsx8(AbsoluteTimeContext.Provider, {
     value: timelineContextValue,
     children: /* @__PURE__ */ jsx8(PlaybackRateContext.Provider, {
       value: playbackRateContextValue,
-      children: /* @__PURE__ */ jsx8(TimelineImperativeContext.Provider, {
-        value: timelineImperativeContextValue,
-        children: /* @__PURE__ */ jsx8(TimelineContext.Provider, {
-          value: timelineContextValue,
-          children: /* @__PURE__ */ jsx8(SetTimelineContext.Provider, {
-            value: setTimelineContextValue,
-            children
-          })
+      children: /* @__PURE__ */ jsx8(TimelineContext.Provider, {
+        value: timelineContextValue,
+        children: /* @__PURE__ */ jsx8(SetTimelineContext.Provider, {
+          value: setTimelineContextValue,
+          children
         })
       })
     })
   });
 };
 
+// src/use-playing.ts
+import { useContext as useContext10 } from "react";
+
+// src/use-sync-external-store.ts
+import * as React12 from "react";
+var objectIs = typeof Object.is === "function" ? Object.is : (first, second) => first === second && (first !== 0 || 1 / first === 1 / second) || Number.isNaN(first) && Number.isNaN(second);
+var checkIfSnapshotChanged = (instance) => {
+  try {
+    return !objectIs(instance.value, instance.getSnapshot());
+  } catch {
+    return true;
+  }
+};
+var useSyncExternalStoreShimClient = (subscribe, getSnapshot) => {
+  const value = getSnapshot();
+  if (false) {}
+  const [{ instance }, forceUpdate] = React12.useState({
+    instance: { value, getSnapshot }
+  });
+  React12.useLayoutEffect(() => {
+    instance.value = value;
+    instance.getSnapshot = getSnapshot;
+    if (checkIfSnapshotChanged(instance)) {
+      forceUpdate({ instance });
+    }
+  }, [getSnapshot, instance, subscribe, value]);
+  React12.useEffect(() => {
+    if (checkIfSnapshotChanged(instance)) {
+      forceUpdate({ instance });
+    }
+    return subscribe(() => {
+      if (checkIfSnapshotChanged(instance)) {
+        forceUpdate({ instance });
+      }
+    });
+  }, [instance, subscribe]);
+  React12.useDebugValue(value);
+  return value;
+};
+var useSyncExternalStoreShimServer = (_subscribe, getSnapshot) => getSnapshot();
+var shim = typeof window === "undefined" || typeof window.document === "undefined" || typeof window.document.createElement === "undefined" ? useSyncExternalStoreShimServer : useSyncExternalStoreShimClient;
+var useSyncExternalStore2 = React12.useSyncExternalStore ?? shim;
+
+// src/use-playing.ts
+var usePlaying = () => {
+  const { isPlaying } = useTimelineContext();
+  const { subscribePlaying } = useContext10(SetTimelineContext);
+  return useSyncExternalStore2(subscribePlaying, isPlaying, isPlaying);
+};
+// src/use-buffering.ts
+import { useContext as useContext11 } from "react";
+var useBuffering = () => {
+  const { isBuffering, subscribeBuffering } = useContext11(SetTimelineContext);
+  return useSyncExternalStore2(subscribeBuffering, isBuffering, isBuffering);
+};
+
 // src/timeline-position-state.ts
 var makeKey = () => {
   return `remotion.time-all`;
@@ -1733,14 +1844,14 @@ var useTimelinePositionFromContext = (state) => {
   return clampFrameToCompositionRange(unclamped, videoConfig.durationInFrames);
 };
 var useTimelineContext = () => {
-  const state = useContext11(TimelineContext);
+  const state = useContext12(TimelineContext);
   if (state === null) {
     throw new Error("TimelineContext is not available. This hook must be used inside a <Player> or the Remotion Studio.");
   }
   return state;
 };
 var usePlaybackRate = () => {
-  const state = useContext11(PlaybackRateContext);
+  const state = useContext12(PlaybackRateContext);
   if (state === null) {
     throw new Error("PlaybackRateContext is not available. This hook must be used inside a <Player> or the Remotion Studio.");
   }
@@ -1751,26 +1862,21 @@ var useTimelinePosition = () => {
   return useTimelinePositionFromContext(state);
 };
 var useAbsoluteTimelinePosition = () => {
-  const state = useContext11(AbsoluteTimeContext);
+  const state = useContext12(AbsoluteTimeContext);
   if (state === null) {
     throw new Error("AbsoluteTimeContext is not available. This hook must be used inside a <Player> or the Remotion Studio.");
   }
   return useTimelinePositionFromContext(state);
 };
 var useTimelineSetFrame = () => {
-  const { setFrame } = useContext11(SetTimelineContext);
+  const { setFrame } = useContext12(SetTimelineContext);
   return setFrame;
 };
-var usePlayingState = () => {
-  const { playing, imperativePlaying } = useTimelineContext();
-  const { setPlaying } = useContext11(SetTimelineContext);
-  return useMemo10(() => [playing, setPlaying, imperativePlaying], [imperativePlaying, playing, setPlaying]);
-};
 
 // src/use-current-frame.ts
-import { useContext as useContext12 } from "react";
+import { useContext as useContext13 } from "react";
 var useCurrentFrame = () => {
-  const canUseRemotionHooks = useContext12(CanUseRemotionHooks);
+  const canUseRemotionHooks = useContext13(CanUseRemotionHooks);
   const env = useRemotionEnvironment();
   if (!canUseRemotionHooks) {
     if (env.isPlayer) {
@@ -1779,16 +1885,16 @@ 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 = useContext12(SequenceContext);
+  const context = useContext13(SequenceContext);
   const contextOffset = context ? context.cumulatedFrom + context.relativeFrom : 0;
   return frame - contextOffset;
 };
 
 // src/use-video-config.ts
-import { useContext as useContext13 } from "react";
+import { useContext as useContext14 } from "react";
 var useVideoConfig = () => {
   const videoConfig = useUnsafeVideoConfig();
-  const context = useContext13(CanUseRemotionHooks);
+  const context = useContext14(CanUseRemotionHooks);
   const isPlayer = useIsPlayer();
   if (!videoConfig) {
     if (typeof window !== "undefined" && window.remotion_isPlayer || isPlayer) {
@@ -1827,7 +1933,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 = useMemo11(() => {
+  const isActive = useMemo9(() => {
     if (typeof active === "boolean") {
       return active;
     }
@@ -1836,24 +1942,21 @@ var Freeze = ({
     }
   }, [active, frame]);
   const timelineContext = useTimelineContext();
-  const sequenceContext = useContext14(SequenceContext);
+  const sequenceContext = useContext15(SequenceContext);
   const relativeFrom = sequenceContext?.relativeFrom ?? 0;
-  const timelineValue = useMemo11(() => {
+  const timelineValue = useMemo9(() => {
     if (!isActive) {
       return timelineContext;
     }
     return {
       ...timelineContext,
-      playing: false,
-      imperativePlaying: {
-        current: false
-      },
+      isPlaying: () => false,
       frame: {
         [videoConfig.id]: frameToFreeze + relativeFrom
       }
     };
   }, [isActive, timelineContext, videoConfig.id, frameToFreeze, relativeFrom]);
-  const newSequenceContext = useMemo11(() => {
+  const newSequenceContext = useMemo9(() => {
     if (!sequenceContext) {
       return null;
     }
@@ -1950,22 +2053,10 @@ var textSchema = {
     hiddenFromList: false
   },
   "style.fontWeight": {
-    type: "enum",
-    default: "400",
+    type: "font-weight",
+    default: 400,
     description: "Font weight",
-    variants: {
-      "100": {},
-      "200": {},
-      "300": {},
-      "400": {},
-      "500": {},
-      "600": {},
-      "700": {},
-      "800": {},
-      "900": {},
-      normal: {},
-      bold: {}
-    }
+    keyframable: false
   },
   "style.fontStyle": {
     type: "enum",
@@ -2335,31 +2426,33 @@ var validateSequenceCrop = (crop, componentName = "<Sequence />") => {
 };
 
 // src/SequenceManager.tsx
-import React13, { useCallback as useCallback5, useMemo as useMemo12, useRef as useRef4, useState as useState3 } from "react";
+import React14, { useCallback as useCallback5, useMemo as useMemo10, useRef as useRef3, useState as useState4 } from "react";
 import { jsx as jsx10 } from "react/jsx-runtime";
-var SequenceManager = React13.createContext({
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? React14.useEffect : React14.useLayoutEffect;
+var SequenceManager = React14.createContext({
   registerSequence: () => {
     throw new Error("SequenceManagerContext not initialized");
   },
+  updateSequence: null,
   unregisterSequence: () => {
     throw new Error("SequenceManagerContext not initialized");
   },
   sequences: []
 });
-var SequenceManagerRefContext = React13.createContext({
+var SequenceManagerRefContext = React14.createContext({
   current: []
 });
-var SequenceRegistrationContext = React13.createContext(false);
+var SequenceRegistrationContext = React14.createContext(false);
 var makeSequencePropsSubscriptionKey = (key) => {
   return `${key.absolutePath}\x00${key.nodePath.join(".")}\x00${key.sequenceKeys.join(".")}\x00${key.effectKeys.map((keys) => keys.join(".")).join(".")}`;
 };
-var VisualModePropStatusesContext = React13.createContext({
+var VisualModePropStatusesContext = React14.createContext({
   propStatuses: {}
 });
-var VisualModePropStatusesRefContext = React13.createContext({
+var VisualModePropStatusesRefContext = React14.createContext({
   current: {}
 });
-var VisualModeDragOverridesContext = React13.createContext({
+var VisualModeDragOverridesContext = React14.createContext({
   getDragOverrides: () => {
     throw new Error("VisualModeDragOverridesContext not initialized");
   },
@@ -2367,7 +2460,7 @@ var VisualModeDragOverridesContext = React13.createContext({
     throw new Error("VisualModeDragOverridesContext not initialized");
   }
 });
-var VisualModeSettersContext = React13.createContext({
+var VisualModeSettersContext = React14.createContext({
   setDragOverrides: () => {
     throw new Error("VisualModeSettersContext not initialized");
   },
@@ -2389,15 +2482,19 @@ var VisualModeSettersContext = React13.createContext({
 });
 var effectDragOverridesKey = (nodePath, effectIndex) => `${makeSequencePropsSubscriptionKey(nodePath)}.effects.${effectIndex}`;
 var SequenceManagerProvider = ({ children }) => {
-  const [sequences, setSequences] = useState3([]);
-  const sequencesRef = useRef4(sequences);
+  const { isStudio } = useRemotionEnvironment();
+  const [sequenceManagerId] = useState4(() => String(Math.random()));
+  const committedOrderRef = useRef3(null);
+  const committedOrderIdsRef = useRef3(null);
+  const [sequences, setSequences] = useState4([]);
+  const sequencesRef = useRef3(sequences);
   sequencesRef.current = sequences;
-  const [dragOverrides, setControlOverrides] = useState3({});
-  const controlOverridesRef = useRef4(dragOverrides);
+  const [dragOverrides, setControlOverrides] = useState4({});
+  const controlOverridesRef = useRef3(dragOverrides);
   controlOverridesRef.current = dragOverrides;
-  const [effectDragOverridesState, setEffectDragOverridesState] = useState3({});
-  const [propStatuses, setPropStatusesMapState] = useState3({});
-  const propStatusesRef = useRef4(propStatuses);
+  const [effectDragOverridesState, setEffectDragOverridesState] = useState4({});
+  const [propStatuses, setPropStatusesMapState] = useState4({});
+  const propStatusesRef = useRef3(propStatuses);
   propStatusesRef.current = propStatuses;
   const setDragOverrides = useCallback5((nodePath, key, value) => {
     setControlOverrides((prev) => ({
@@ -2467,39 +2564,105 @@ var SequenceManagerProvider = ({ children }) => {
       return next;
     });
   }, []);
+  useIsomorphicLayoutEffect(() => {
+    if (!isStudio) {
+      return;
+    }
+    let unmounted = false;
+    const onCommitOrder = (event) => {
+      const { detail } = event;
+      const managerOrder = detail.sequenceManagers.find((item) => item.managerId === sequenceManagerId);
+      if (!managerOrder) {
+        return;
+      }
+      const previousOrder = committedOrderIdsRef.current;
+      if (previousOrder !== null && previousOrder.length === managerOrder.sequenceIds.length && previousOrder.every((sequenceId, index) => sequenceId === managerOrder.sequenceIds[index])) {
+        return;
+      }
+      const order = new Map(managerOrder.sequenceIds.map((sequenceId, index) => [
+        sequenceId,
+        index
+      ]));
+      committedOrderIdsRef.current = managerOrder.sequenceIds;
+      committedOrderRef.current = order;
+      queueMicrotask(() => {
+        if (unmounted) {
+          return;
+        }
+        setSequences((currentSequences) => {
+          let changed = false;
+          const nextSequences = currentSequences.map((sequence) => {
+            const timelineOrder = order.get(sequence.id) ?? null;
+            if (sequence.timelineOrder === timelineOrder) {
+              return sequence;
+            }
+            changed = true;
+            return { ...sequence, timelineOrder };
+          });
+          return changed ? nextSequences : currentSequences;
+        });
+      });
+    };
+    window.addEventListener(COMMIT_ORDER_EVENT, onCommitOrder);
+    return () => {
+      unmounted = true;
+      window.removeEventListener(COMMIT_ORDER_EVENT, onCommitOrder);
+    };
+  }, [isStudio, sequenceManagerId]);
   const registerSequence = useCallback5((seq) => {
     setSequences((seqs) => {
-      return [...seqs, seq];
+      return [
+        ...seqs,
+        {
+          ...seq,
+          timelineOrder: committedOrderRef.current?.get(seq.id) ?? null
+        }
+      ];
+    });
+  }, []);
+  const updateSequence = useCallback5((seq) => {
+    setSequences((seqs) => {
+      const index = seqs.findIndex((item) => item.id === seq.id);
+      if (index === -1) {
+        return seqs;
+      }
+      const next = [...seqs];
+      next[index] = {
+        ...seq,
+        timelineOrder: committedOrderRef.current?.get(seq.id) ?? null
+      };
+      return next;
     });
   }, []);
   const unregisterSequence = useCallback5((seq) => {
     setSequences((seqs) => seqs.filter((s) => s.id !== seq));
   }, []);
-  const sequenceContext = useMemo12(() => {
+  const sequenceContext = useMemo10(() => {
     return {
       registerSequence,
       sequences,
+      updateSequence,
       unregisterSequence
     };
-  }, [registerSequence, sequences, unregisterSequence]);
+  }, [registerSequence, sequences, unregisterSequence, updateSequence]);
   const getDragOverrides = useCallback5((nodePath) => {
     return dragOverrides[makeSequencePropsSubscriptionKey(nodePath)] ?? {};
   }, [dragOverrides]);
   const getEffectDragOverrides = useCallback5((nodePath, effectIndex) => {
     return effectDragOverridesState[effectDragOverridesKey(nodePath, effectIndex)] ?? {};
   }, [effectDragOverridesState]);
-  const propStatusesContext = useMemo12(() => {
+  const propStatusesContext = useMemo10(() => {
     return {
       propStatuses
     };
   }, [propStatuses]);
-  const dragOverridesContext = useMemo12(() => {
+  const dragOverridesContext = useMemo10(() => {
     return {
       getDragOverrides,
       getEffectDragOverrides
     };
   }, [getDragOverrides, getEffectDragOverrides]);
-  const settersContext = useMemo12(() => {
+  const settersContext = useMemo10(() => {
     return {
       setDragOverrides,
       clearDragOverrides,
@@ -2516,7 +2679,7 @@ var SequenceManagerProvider = ({ children }) => {
     setPropStatuses,
     remapPropStatuses
   ]);
-  return /* @__PURE__ */ jsx10(SequenceManagerRefContext.Provider, {
+  const providers = /* @__PURE__ */ jsx10(SequenceManagerRefContext.Provider, {
     value: sequencesRef,
     children: /* @__PURE__ */ jsx10(SequenceManager.Provider, {
       value: sequenceContext,
@@ -2535,12 +2698,16 @@ var SequenceManagerProvider = ({ children }) => {
       })
     })
   });
+  return isStudio ? /* @__PURE__ */ jsx10(SequenceManagerOrderMarker, {
+    managerId: sequenceManagerId,
+    children: providers
+  }) : providers;
 };
 
 // src/series/is-inside-series.tsx
-import React14, { createContext as createContext15 } from "react";
+import React15, { createContext as createContext14 } from "react";
 import { jsx as jsx11 } from "react/jsx-runtime";
-var IsInsideSeriesContext = createContext15(false);
+var IsInsideSeriesContext = createContext14(false);
 var IsInsideSeriesContainer = ({ children }) => {
   return /* @__PURE__ */ jsx11(IsInsideSeriesContext.Provider, {
     value: true,
@@ -2554,18 +2721,18 @@ var IsNotInsideSeriesProvider = ({ children }) => {
   });
 };
 var useRequireToBeInsideSeries = () => {
-  const isInsideSeries = React14.useContext(IsInsideSeriesContext);
+  const isInsideSeries = React15.useContext(IsInsideSeriesContext);
   if (!isInsideSeries) {
     throw new Error("This component must be inside a <Series /> component.");
   }
 };
 
 // src/use-premounting.ts
-import { useContext as useContext15, useMemo as useMemo13 } from "react";
+import { useContext as useContext16, useMemo as useMemo11 } from "react";
 
 // src/PremountContext.tsx
-import { createContext as createContext16 } from "react";
-var PremountContext = createContext16({
+import { createContext as createContext15 } from "react";
+var PremountContext = createContext15({
   premountFramesRemaining: 0
 });
 
@@ -2586,7 +2753,7 @@ var usePremounting = ({
   styleWhilePostmounted,
   hideWhilePremounted
 }) => {
-  const parentPremountContext = useContext15(PremountContext);
+  const parentPremountContext = useContext16(PremountContext);
   const frame = useCurrentFrame() - parentPremountContext.premountFramesRemaining;
   const environment = useRemotionEnvironment();
   const { fps } = useVideoConfig();
@@ -2597,7 +2764,7 @@ var usePremounting = ({
   const postmountingActive = !environment.isRendering && frame > endThreshold && frame <= endThreshold + effectivePostmountFor;
   const isPremountingOrPostmounting = premountingActive || postmountingActive;
   const freezeFrame = premountingActive ? from : postmountingActive ? from + durationInFrames - 1 : 0;
-  const premountingStyle = useMemo13(() => {
+  const premountingStyle = useMemo11(() => {
     if (!isPremountingOrPostmounting) {
       return style;
     }
@@ -2628,14 +2795,49 @@ var usePremounting = ({
   };
 };
 
+// src/use-sequence-registration.ts
+import { useContext as useContext17, useEffect as useEffect4, useRef as useRef4 } from "react";
+var useSequenceRegistration = ({
+  getSequence,
+  id
+}) => {
+  const { registerSequence, unregisterSequence, updateSequence } = useContext17(SequenceManager);
+  const getSequenceRef = useRef4(getSequence);
+  getSequenceRef.current = getSequence;
+  const lastRegisteredGetterRef = useRef4(null);
+  const registrationEnabled = getSequence !== null;
+  useEffect4(() => {
+    if (!registrationEnabled) {
+      return;
+    }
+    const currentGetter = getSequenceRef.current;
+    if (currentGetter === null) {
+      throw new Error("Expected a sequence registration getter");
+    }
+    registerSequence(currentGetter());
+    lastRegisteredGetterRef.current = currentGetter;
+    return () => {
+      lastRegisteredGetterRef.current = null;
+      unregisterSequence(id);
+    };
+  }, [id, registerSequence, registrationEnabled, unregisterSequence]);
+  useEffect4(() => {
+    if (getSequence === null || updateSequence === null || lastRegisteredGetterRef.current === getSequence) {
+      return;
+    }
+    updateSequence(getSequence());
+    lastRegisteredGetterRef.current = getSequence;
+  }, [getSequence, updateSequence]);
+};
+
 // src/with-interactivity-schema.ts
-import React15, {
-  createContext as createContext18,
+import React16, {
+  createContext as createContext17,
   forwardRef as forwardRef2,
-  useContext as useContext17,
-  useLayoutEffect as useLayoutEffect3,
-  useMemo as useMemo14,
-  useState as useState4
+  useContext as useContext19,
+  useLayoutEffect as useLayoutEffect4,
+  useMemo as useMemo12,
+  useState as useState5
 } from "react";
 
 // src/delete-nested-key.ts
@@ -2672,7 +2874,7 @@ var deleteNestedKey = (obj, keysToRemove) => {
 };
 
 // src/effects/use-memoized-effects.ts
-import { useContext as useContext16, useLayoutEffect as useLayoutEffect2, useRef as useRef5 } from "react";
+import { useContext as useContext18, useLayoutEffect as useLayoutEffect3, useRef as useRef5 } from "react";
 
 // src/bezier.ts
 var NEWTON_ITERATIONS = 4;
@@ -4542,39 +4744,12 @@ var getEffectiveVisualModeValue = ({
   return propStatus.codeValue;
 };
 
-// src/runtime-value-store.ts
-var createRuntimeValueStore = (initialSnapshot) => {
-  let snapshot = initialSnapshot;
-  const listeners = new Set;
-  const store = {
-    getSnapshot: () => snapshot,
-    subscribe: (listener) => {
-      listeners.add(listener);
-      return () => {
-        listeners.delete(listener);
-      };
-    }
-  };
-  return {
-    store,
-    setSnapshot: (newSnapshot) => {
-      if (snapshot === newSnapshot) {
-        return;
-      }
-      snapshot = newSnapshot;
-      for (const listener of listeners) {
-        listener();
-      }
-    }
-  };
-};
-
 // src/sequence-node-path.tsx
-import { createContext as createContext17 } from "react";
-var OverrideIdsToNodePathsGettersContext = createContext17({
+import { createContext as createContext16 } from "react";
+var OverrideIdsToNodePathsGettersContext = createContext16({
   overrideIdToNodePathMappings: {}
 });
-var OverrideIdsToNodePathsSettersContext = createContext17({
+var OverrideIdsToNodePathsSettersContext = createContext16({
   setOverrideIdToNodePath: () => {
     throw new Error("OverrideIdsToNodePathsSettersContext not initialized");
   }
@@ -4649,7 +4824,7 @@ var useMemoizedEffectDefinitions = (effects) => {
   const isSame = previous !== null && previous.definitions.length === definitions.length && previous.definitions.every((definition, i) => definition === definitions[i]);
   const controllers = isSame ? previous.controllers : effects.map((effect) => createRuntimeValueStore(effect.params));
   const stableDefinitions = isSame ? previous.definitions : definitions;
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     stableDefinitions.forEach((_definition, index) => {
       const snapshot = effects[index]?.params;
       controllers[index].setSnapshot(snapshot);
@@ -4696,10 +4871,10 @@ var useMemoizedEffects = ({
   overrideId
 }) => {
   const previousRef = useRef5(null);
-  const { propStatuses } = useContext16(VisualModePropStatusesContext);
-  const { getEffectDragOverrides } = useContext16(VisualModeDragOverridesContext);
+  const { propStatuses } = useContext18(VisualModePropStatusesContext);
+  const { getEffectDragOverrides } = useContext18(VisualModeDragOverridesContext);
   const frame = useCurrentFrame();
-  const { overrideIdToNodePathMappings } = useContext16(OverrideIdsToNodePathsGettersContext);
+  const { overrideIdToNodePathMappings } = useContext18(OverrideIdsToNodePathsGettersContext);
   const previous = previousRef.current;
   const nodePath = overrideId ? overrideIdToNodePathMappings[overrideId] ?? null : null;
   const resolved = effects.map((descriptor, index) => {
@@ -5033,9 +5208,9 @@ var mergeValues = ({
   return merged;
 };
 var stackToOverrideMap = {};
-var DisableInteractivityContext = createContext18(false);
+var DisableInteractivityContext = createContext17(false);
 var DisableInteractivityProvider = ({ children }) => {
-  return React15.createElement(DisableInteractivityContext.Provider, { value: true }, children);
+  return React16.createElement(DisableInteractivityContext.Provider, { value: true }, children);
 };
 var withInteractivitySchema = ({
   Component,
@@ -5054,30 +5229,30 @@ var withInteractivitySchema = ({
     } = props;
     const cleanProps = propsWithoutInternalStack;
     const env = useRemotionEnvironment();
-    const canUseRemotionHooks = useContext17(CanUseRemotionHooks);
-    const disableInteractivity = useContext17(DisableInteractivityContext);
+    const canUseRemotionHooks = useContext19(CanUseRemotionHooks);
+    const disableInteractivity = useContext19(DisableInteractivityContext);
     if (!env.isStudio || env.isRendering || !canUseRemotionHooks || disableInteractivity) {
-      return React15.createElement(Component, {
+      return React16.createElement(Component, {
         ...cleanProps,
         controls: null,
         ref
       });
     }
-    const { propStatuses } = useContext17(VisualModePropStatusesContext);
-    const { getDragOverrides } = useContext17(VisualModeDragOverridesContext);
-    const nodePathMapping = useContext17(OverrideIdsToNodePathsGettersContext);
+    const { propStatuses } = useContext19(VisualModePropStatusesContext);
+    const { getDragOverrides } = useContext19(VisualModeDragOverridesContext);
+    const nodePathMapping = useContext19(OverrideIdsToNodePathsGettersContext);
     const frame = useCurrentFrame();
     if (cleanProps.controls) {
       const passedControls = cleanProps.controls;
       if (getStackForControls(passedControls) === null) {
         setStackForControls(passedControls, internalStack);
       }
-      return React15.createElement(Component, {
+      return React16.createElement(Component, {
         ...cleanProps,
         ref
       });
     }
-    const [overrideId] = useState4(() => {
+    const [overrideId] = useState5(() => {
       if (!internalStack) {
         return String(Math.random());
       }
@@ -5095,12 +5270,12 @@ var withInteractivitySchema = ({
       key,
       props: cleanProps
     }));
-    const currentRuntimeValueDotNotation = useMemo14(() => readValuesFromProps(cleanProps, flatKeys, flatSchema), runtimeValues);
-    const [runtimeValueStore] = useState4(() => createRuntimeValueStore(currentRuntimeValueDotNotation));
-    useLayoutEffect3(() => {
+    const currentRuntimeValueDotNotation = useMemo12(() => readValuesFromProps(cleanProps, flatKeys, flatSchema), runtimeValues);
+    const [runtimeValueStore] = useState5(() => createRuntimeValueStore(currentRuntimeValueDotNotation));
+    useLayoutEffect4(() => {
       runtimeValueStore.setSnapshot(currentRuntimeValueDotNotation);
     }, [currentRuntimeValueDotNotation, runtimeValueStore]);
-    const controls = useMemo14(() => {
+    const controls = useMemo12(() => {
       return {
         schema: schemaWithSequenceName,
         currentRuntimeValueDotNotation,
@@ -5112,7 +5287,7 @@ var withInteractivitySchema = ({
       };
     }, [currentRuntimeValueDotNotation, overrideId, runtimeValueStore.store]);
     setStackForControls(controls, internalStack);
-    const { merged: valuesDotNotation, propsToDelete } = useMemo14(() => {
+    const { merged: valuesDotNotation, propsToDelete } = useMemo12(() => {
       return computeEffectiveSchemaValuesDotNotation({
         schema: schemaWithSequenceName,
         currentValue: currentRuntimeValueDotNotation,
@@ -5135,7 +5310,7 @@ var withInteractivitySchema = ({
       schemaKeys: activeKeys,
       propsToDelete
     });
-    return React15.createElement(Component, {
+    return React16.createElement(Component, {
       ...mergedProps,
       controls,
       ref
@@ -5176,10 +5351,9 @@ var RegularSequenceRefForwardingFunction = ({
   ...other
 }, ref) => {
   const { layout = "absolute-fill" } = other;
-  const [id] = useState5(() => String(Math.random()));
-  const parentSequence = useContext18(SequenceContext);
+  const [id] = useState6(() => String(Math.random()));
+  const parentSequence = useContext20(SequenceContext);
   const cumulatedFrom = parentSequence ? parentSequence.cumulatedFrom + parentSequence.relativeFrom : 0;
-  const nonce = useNonce();
   if (layout !== "absolute-fill" && layout !== "none") {
     throw new TypeError(`The layout prop of <Sequence /> expects either "absolute-fill" or "none", but you passed: ${layout}`);
   }
@@ -5239,14 +5413,13 @@ var RegularSequenceRefForwardingFunction = ({
   const absoluteFrom = (parentSequence?.absoluteFrom ?? 0) + effectiveRelativeFrom;
   const parentSequenceDuration = parentSequence ? Math.min(parentSequence.durationInFrames - effectiveRelativeFrom, durationInFrames) : durationInFrames;
   const actualDurationInFrames = Math.max(0, Math.min(videoConfig.durationInFrames - from, parentSequenceDuration));
-  const { registerSequence, unregisterSequence } = useContext18(SequenceManager);
-  const sequenceRegistrationEnabled = useContext18(SequenceRegistrationContext);
+  const sequenceRegistrationEnabled = useContext20(SequenceRegistrationContext);
   const wrapperRefForOutline = useRef6(null);
   const refForOutline = other.layout === "none" ? passedRefForOutline ?? null : passedRefForOutline ?? wrapperRefForOutline;
-  const premounting = useMemo15(() => {
+  const premounting = useMemo13(() => {
     return parentSequence?.premounting || Boolean(other._remotionInternalIsPremounting);
   }, [other._remotionInternalIsPremounting, parentSequence?.premounting]);
-  const postmounting = useMemo15(() => {
+  const postmounting = useMemo13(() => {
     return parentSequence?.postmounting || Boolean(other._remotionInternalIsPostmounting);
   }, [other._remotionInternalIsPostmounting, parentSequence?.postmounting]);
   const currentSequenceStart = cumulatedFrom + effectiveRelativeFrom;
@@ -5254,7 +5427,7 @@ var RegularSequenceRefForwardingFunction = ({
   const parentFirstFrame = parentSequence ? parentSequenceStart - parentSequence.cumulatedNegativeFrom : 0;
   const firstFrame = Math.max(0, parentFirstFrame, currentSequenceStart);
   const cumulatedNegativeFrom = currentSequenceStart - firstFrame;
-  const contextValue = useMemo15(() => {
+  const contextValue = useMemo13(() => {
     return {
       absoluteFrom,
       cumulatedFrom,
@@ -5285,12 +5458,12 @@ var RegularSequenceRefForwardingFunction = ({
     postmountDisplay,
     cumulatedNegativeFrom
   ]);
-  const timelineClipName = useMemo15(() => {
+  const timelineClipName = useMemo13(() => {
     return name ?? "";
   }, [name]);
   const resolvedDocumentationLink = documentationLink ?? "https://www.remotion.dev/docs/sequence";
   const env = useRemotionEnvironment();
-  const isInsideSeries = useContext18(IsInsideSeriesContext);
+  const isInsideSeries = useContext20(IsInsideSeriesContext);
   const stackRef = useRef6(null);
   stackRef.current = controls ? getStackForControls(controls) ?? stack ?? null : stack ?? null;
   const registeredFrozenFrame = typeof freeze === "number" ? freeze : null;
@@ -5305,8 +5478,8 @@ var RegularSequenceRefForwardingFunction = ({
   const controlsSupportsEffects = controls?.supportsEffects;
   const controlsComponentIdentity = controls?.componentIdentity;
   const controlsComponentName = controls?.componentName;
-  const effectRuntimeValues = useMemo15(() => _remotionInternalEffects?.runtimeValues ?? null, [_remotionInternalEffects]);
-  const registrationControls = useMemo15(() => {
+  const effectRuntimeValues = useMemo13(() => _remotionInternalEffects?.runtimeValues ?? null, [_remotionInternalEffects]);
+  const registrationControls = useMemo13(() => {
     if (controlsSchema === undefined || controlsRuntimeValues === undefined || controlsOverrideId === undefined || controlsSupportsEffects === undefined || controlsComponentIdentity === undefined || controlsComponentName === undefined) {
       return null;
     }
@@ -5326,13 +5499,10 @@ var RegularSequenceRefForwardingFunction = ({
     controlsSchema,
     controlsSupportsEffects
   ]);
-  useEffect3(() => {
-    if (!env.isStudio && !sequenceRegistrationEnabled) {
-      return;
-    }
+  const getSequenceForRegistration = useCallback6(() => {
     if (isMedia) {
       if (isMedia.type === "image") {
-        registerSequence({
+        return {
           type: "image",
           controls: registrationControls,
           effects: _remotionInternalEffects ?? EMPTY_EFFECTS,
@@ -5344,56 +5514,52 @@ var RegularSequenceRefForwardingFunction = ({
           trimBefore: registeredTrimBefore,
           id,
           loopDisplay,
-          nonce: nonce.get(),
           parent: parentSequence?.id ?? null,
           postmountDisplay: postmountDisplay ?? null,
           premountDisplay: premountDisplay ?? null,
           showInTimeline,
+          timelineOrder: null,
           src: isMedia.src,
           getStack: () => stackRef.current,
           refForOutline: refForOutline ?? null,
           isInsideSeries,
           frozenFrame: registeredFrozenFrame,
           singleChildComponent: singleChildComponent ?? null
-        });
-      } else {
-        registerSequence({
-          type: isMedia.type,
-          controls: registrationControls,
-          effects: _remotionInternalEffects ?? EMPTY_EFFECTS,
-          effectRuntimeValues,
-          displayName: timelineClipName,
-          documentationLink: resolvedDocumentationLink,
-          doesVolumeChange: isMedia.data.doesVolumeChange,
-          duration: actualDurationInFrames,
-          from,
-          trimBefore: registeredTrimBefore,
-          id,
-          loopDisplay,
-          nonce: nonce.get(),
-          parent: parentSequence?.id ?? null,
-          playbackRate: isMedia.data.playbackRate,
-          postmountDisplay: postmountDisplay ?? null,
-          premountDisplay: premountDisplay ?? null,
-          showInTimeline,
-          src: isMedia.data.src,
-          getStack: () => stackRef.current,
-          startMediaFrom: startMediaFrom ?? isMedia.data.startMediaFrom,
-          mediaFrameAtSequenceZero,
-          volume: isMedia.data.volumes,
-          muted: isMedia.data.muted,
-          refForOutline: refForOutline ?? null,
-          isInsideSeries,
-          frozenFrame: registeredFrozenFrame,
-          frozenMediaFrame,
-          singleChildComponent: singleChildComponent ?? null
-        });
+        };
       }
-      return () => {
-        unregisterSequence(id);
+      return {
+        type: isMedia.type,
+        controls: registrationControls,
+        effects: _remotionInternalEffects ?? EMPTY_EFFECTS,
+        effectRuntimeValues,
+        displayName: timelineClipName,
+        documentationLink: resolvedDocumentationLink,
+        doesVolumeChange: isMedia.data.doesVolumeChange,
+        duration: actualDurationInFrames,
+        from,
+        trimBefore: registeredTrimBefore,
+        id,
+        loopDisplay,
+        parent: parentSequence?.id ?? null,
+        playbackRate: isMedia.data.playbackRate,
+        postmountDisplay: postmountDisplay ?? null,
+        premountDisplay: premountDisplay ?? null,
+        showInTimeline,
+        timelineOrder: null,
+        src: isMedia.data.src,
+        getStack: () => stackRef.current,
+        startMediaFrom: startMediaFrom ?? isMedia.data.startMediaFrom,
+        mediaFrameAtSequenceZero,
+        volume: isMedia.data.volumes,
+        muted: isMedia.data.muted,
+        refForOutline: refForOutline ?? null,
+        isInsideSeries,
+        frozenFrame: registeredFrozenFrame,
+        frozenMediaFrame,
+        singleChildComponent: singleChildComponent ?? null
       };
     }
-    registerSequence({
+    return {
       from,
       trimBefore: registeredTrimBefore,
       duration: actualDurationInFrames,
@@ -5403,7 +5569,7 @@ var RegularSequenceRefForwardingFunction = ({
       parent: parentSequence?.id ?? null,
       type: "sequence",
       showInTimeline,
-      nonce: nonce.get(),
+      timelineOrder: null,
       loopDisplay,
       getStack: () => stackRef.current,
       premountDisplay: premountDisplay ?? null,
@@ -5415,29 +5581,18 @@ var RegularSequenceRefForwardingFunction = ({
       isInsideSeries,
       frozenFrame: registeredFrozenFrame,
       singleChildComponent: singleChildComponent ?? null
-    });
-    return () => {
-      unregisterSequence(id);
     };
   }, [
-    durationInFrames,
     id,
-    name,
-    registerSequence,
     timelineClipName,
-    unregisterSequence,
     parentSequence?.id,
     actualDurationInFrames,
     from,
-    trimBefore,
     registeredTrimBefore,
     showInTimeline,
-    nonce,
     loopDisplay,
     premountDisplay,
     postmountDisplay,
-    env.isStudio,
-    sequenceRegistrationEnabled,
     registrationControls,
     _remotionInternalEffects,
     effectRuntimeValues,
@@ -5451,6 +5606,10 @@ var RegularSequenceRefForwardingFunction = ({
     frozenMediaFrame,
     singleChildComponent
   ]);
+  useSequenceRegistration({
+    getSequence: env.isStudio || sequenceRegistrationEnabled ? getSequenceForRegistration : null,
+    id
+  });
   const endThreshold = Math.ceil(cumulatedFrom + from + durationInFrames - 1);
   const content2 = absoluteFrame < cumulatedFrom + from ? null : absoluteFrame > endThreshold ? null : children;
   const frozenContent = content2 === null || typeof freeze === "undefined" || freeze === null ? content2 : /* @__PURE__ */ jsx12(Freeze, {
@@ -5473,7 +5632,7 @@ var RegularSequenceRefForwardingFunction = ({
       ref.current = node;
     }
   }, [ref]);
-  const defaultStyle = useMemo15(() => {
+  const defaultStyle = useMemo13(() => {
     return {
       flexDirection: undefined,
       ...width ? { width } : {},
@@ -5488,9 +5647,12 @@ var RegularSequenceRefForwardingFunction = ({
     throw new TypeError('It is not supported to pass both a `ref` and `layout="none"` to <Sequence />.');
   }
   if (hidden) {
-    return null;
+    return env.isStudio ? /* @__PURE__ */ jsx12(SequenceOrderMarker, {
+      sequenceId: id,
+      children: null
+    }) : null;
   }
-  return /* @__PURE__ */ jsx12(SequenceContext.Provider, {
+  const sequence = /* @__PURE__ */ jsx12(SequenceContext.Provider, {
     value: contextValue,
     children: frozenContent === null ? null : other.layout === "none" ? frozenContent : /* @__PURE__ */ jsx12(AbsoluteFillElement, {
       ref: sequenceRef,
@@ -5499,6 +5661,10 @@ var RegularSequenceRefForwardingFunction = ({
       children: frozenContent
     })
   });
+  return env.isStudio ? /* @__PURE__ */ jsx12(SequenceOrderMarker, {
+    sequenceId: id,
+    children: sequence
+  }) : sequence;
 };
 var RegularSequence = forwardRef3(RegularSequenceRefForwardingFunction);
 var PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
@@ -5660,15 +5826,15 @@ addSequenceStackTraces(AbsoluteFill);
 // src/animated-image/AnimatedImage.tsx
 import {
   forwardRef as forwardRef4,
-  useEffect as useEffect5,
+  useEffect as useEffect6,
   useImperativeHandle as useImperativeHandle2,
-  useLayoutEffect as useLayoutEffect4,
+  useLayoutEffect as useLayoutEffect5,
   useRef as useRef10,
-  useState as useState6
+  useState as useState7
 } from "react";
 
 // src/use-crop-style.ts
-import { useMemo as useMemo16 } from "react";
+import { useMemo as useMemo14 } from "react";
 var useCropStyle = ({
   cropLeft,
   cropRight,
@@ -5678,7 +5844,7 @@ var useCropStyle = ({
   componentName
 }) => {
   validateSequenceCrop({ cropLeft, cropRight, cropTop, cropBottom }, componentName);
-  return useMemo16(() => {
+  return useMemo14(() => {
     const cropClipPath = getSequenceCropClipPath({
       ...resolveSequenceCrop({ cropLeft, cropRight, cropTop, cropBottom }),
       style
@@ -5691,7 +5857,7 @@ var useCropStyle = ({
 };
 
 // src/animated-image/canvas.tsx
-import React18, { useCallback as useCallback8, useImperativeHandle, useMemo as useMemo18, useRef as useRef9 } from "react";
+import React19, { useCallback as useCallback8, useImperativeHandle, useMemo as useMemo16, useRef as useRef9 } from "react";
 
 // src/calculate-image-fit.ts
 var calculateImageFit = (fit, imageSize, canvasSize) => {
@@ -5987,18 +6153,18 @@ var runEffectChain = async ({
 };
 
 // src/effects/use-effect-chain-state.ts
-import { useEffect as useEffect4, useMemo as useMemo17, useRef as useRef8 } from "react";
+import { useEffect as useEffect5, useMemo as useMemo15, useRef as useRef8 } from "react";
 var useEffectChainState = () => {
   const chainStateRef = useRef8(null);
   const sizeRef = useRef8(null);
-  useEffect4(() => {
+  useEffect5(() => {
     return () => {
       if (chainStateRef.current) {
         cleanupEffectChainState(chainStateRef.current);
       }
     };
   }, []);
-  return useMemo17(() => ({
+  return useMemo15(() => ({
     get: (width, height) => {
       if (!sizeRef.current || sizeRef.current.width !== width || sizeRef.current.height !== height) {
         if (chainStateRef.current) {
@@ -6017,7 +6183,7 @@ import { jsx as jsx14 } from "react/jsx-runtime";
 var CanvasRefForwardingFunction = ({ width, height, fit, className, style, effects, ...props }, ref) => {
   const canvasRef = useRef9(null);
   const chainState = useEffectChainState();
-  const sourceCanvas = useMemo18(() => {
+  const sourceCanvas = useMemo16(() => {
     if (typeof document === "undefined") {
       return null;
     }
@@ -6082,7 +6248,7 @@ var CanvasRefForwardingFunction = ({ width, height, fit, className, style, effec
     ...props
   });
 };
-var Canvas = React18.forwardRef(CanvasRefForwardingFunction);
+var Canvas = React19.forwardRef(CanvasRefForwardingFunction);
 
 // src/animated-image/create-image-decoder.ts
 var createImageDecoder = async ({
@@ -6287,6 +6453,7 @@ import { jsx as jsx15 } from "react/jsx-runtime";
 var animatedImageSchema = {
   src: {
     type: "asset",
+    assetType: "image",
     default: undefined,
     description: "Source",
     keyframable: false
@@ -6333,9 +6500,9 @@ var AnimatedImageContent = forwardRef4(({
   ...props
 }, canvasRef) => {
   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 = getCurrentTime({ frame, playbackRate, fps });
@@ -6356,8 +6523,8 @@ var AnimatedImageContent = forwardRef4(({
     }
     return c2;
   }, []);
-  const [initialLoopBehavior] = useState6(() => loopBehavior);
-  useEffect5(() => {
+  const [initialLoopBehavior] = useState7(() => loopBehavior);
+  useEffect6(() => {
     const controller = new AbortController;
     let cancelled = false;
     let continued = false;
@@ -6409,12 +6576,12 @@ var AnimatedImageContent = forwardRef4(({
     initialLoopBehavior,
     continueRender2
   ]);
-  useEffect5(() => {
+  useEffect6(() => {
     return () => {
       imageDecoder?.close();
     };
   }, [imageDecoder]);
-  useLayoutEffect4(() => {
+  useLayoutEffect5(() => {
     if (!imageDecoder) {
       return;
     }
@@ -6611,17 +6778,17 @@ var createEffect = (definition) => {
   return factory;
 };
 // src/Artifact.tsx
-import { useContext as useContext19, useLayoutEffect as useLayoutEffect6, useState as useState8 } from "react";
+import { useContext as useContext21, useLayoutEffect as useLayoutEffect7, useState as useState9 } from "react";
 
 // src/RenderAssetManager.tsx
 import {
-  createContext as createContext19,
+  createContext as createContext18,
   useCallback as useCallback9,
   useImperativeHandle as useImperativeHandle3,
-  useLayoutEffect as useLayoutEffect5,
-  useMemo as useMemo19,
+  useLayoutEffect as useLayoutEffect6,
+  useMemo as useMemo17,
   useRef as useRef11,
-  useState as useState7
+  useState as useState8
 } from "react";
 
 // src/validation/validate-artifact.ts
@@ -6657,7 +6824,7 @@ var validateRenderAsset = (artifact) => {
 
 // src/RenderAssetManager.tsx
 import { jsx as jsx16 } from "react/jsx-runtime";
-var RenderAssetManager = createContext19({
+var RenderAssetManager = createContext18({
   registerRenderAsset: () => {
     return;
   },
@@ -6667,7 +6834,7 @@ var RenderAssetManager = createContext19({
   renderAssets: []
 });
 var RenderAssetManagerProvider = ({ children, collectAssets }) => {
-  const [renderAssets, setRenderAssets] = useState7([]);
+  const [renderAssets, setRenderAssets] = useState8([]);
   const renderAssetsRef = useRef11([]);
   const registerRenderAsset = useCallback9((renderAsset) => {
     validateRenderAsset(renderAsset);
@@ -6690,7 +6857,7 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
     renderAssetsRef.current = renderAssetsRef.current.filter((a2) => a2.id !== id);
     setRenderAssets(renderAssetsRef.current);
   }, []);
-  useLayoutEffect5(() => {
+  useLayoutEffect6(() => {
     if (typeof window !== "undefined") {
       window.remotion_collectAssets = () => {
         const assets = renderAssetsRef.current;
@@ -6700,7 +6867,7 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
       };
     }
   }, []);
-  const contextValue = useMemo19(() => {
+  const contextValue = useMemo17(() => {
     return {
       registerRenderAsset,
       unregisterRenderAsset,
@@ -6716,13 +6883,13 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
 // src/Artifact.tsx
 var ArtifactThumbnail = Symbol("Thumbnail");
 var Artifact = ({ filename, content: content2, downloadBehavior }) => {
-  const { registerRenderAsset, unregisterRenderAsset } = useContext19(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext21(RenderAssetManager);
   const env = useRemotionEnvironment();
   const frame = useCurrentFrame();
-  const [id] = useState8(() => {
+  const [id] = useState9(() => {
     return String(Math.random());
   });
-  useLayoutEffect6(() => {
+  useLayoutEffect7(() => {
     if (!env.isRendering) {
       return;
     }
@@ -6773,7 +6940,7 @@ var Artifact = ({ filename, content: content2, downloadBehavior }) => {
 };
 Artifact.Thumbnail = ArtifactThumbnail;
 // src/audio/html5-audio.tsx
-import { forwardRef as forwardRef7, useCallback as useCallback15, useContext as useContext31 } from "react";
+import { forwardRef as forwardRef7, useCallback as useCallback16, useContext as useContext33 } from "react";
 
 // src/absolute-src.ts
 var getAbsoluteSrc = (relativeSrc) => {
@@ -6805,11 +6972,11 @@ var calculateMediaDuration = ({
 };
 
 // src/loop/index.tsx
-import React19, { createContext as createContext20, useMemo as useMemo20 } from "react";
+import React20, { createContext as createContext19, useMemo as useMemo18 } from "react";
 import { jsx as jsx17 } from "react/jsx-runtime";
-var LoopContext = createContext20(null);
+var LoopContext = createContext19(null);
 var useLoop = () => {
-  return React19.useContext(LoopContext);
+  return React20.useContext(LoopContext);
 };
 var Loop = ({
   durationInFrames,
@@ -6841,14 +7008,14 @@ var Loop = ({
   const iteration = Math.floor(currentFrame / durationInFrames);
   const start = iteration * durationInFrames;
   const from = Math.min(start, maxFrame);
-  const loopDisplay = useMemo20(() => {
+  const loopDisplay = useMemo18(() => {
     return {
       numberOfTimes: Math.min(compDuration / durationInFrames, times),
       startOffset: -from,
       durationInFrames
     };
   }, [compDuration, durationInFrames, from, times]);
-  const loopContext = useMemo20(() => {
+  const loopContext = useMemo18(() => {
     return {
       iteration: Math.floor(currentFrame / durationInFrames),
       durationInFrames
@@ -6872,7 +7039,7 @@ var Loop = ({
 Loop.useLoop = useLoop;
 
 // src/prefetch.ts
-import { useContext as useContext20 } from "react";
+import { useContext as useContext22 } from "react";
 
 // src/playback-logging.ts
 var playbackLogging = ({
@@ -6886,9 +7053,9 @@ var playbackLogging = ({
 };
 
 // src/prefetch-state.tsx
-import { createContext as createContext21, useEffect as useEffect6, useState as useState9 } from "react";
+import { createContext as createContext20, useEffect as useEffect7, useState as useState10 } from "react";
 import { jsx as jsx18 } from "react/jsx-runtime";
-var PreloadContext = createContext21({});
+var PreloadContext = createContext20({});
 var preloads = {};
 var updaters = [];
 var setPreloads = (updater) => {
@@ -6896,8 +7063,8 @@ var setPreloads = (updater) => {
   updaters.forEach((u) => u());
 };
 var PrefetchProvider = ({ children }) => {
-  const [_preloads, _setPreloads] = useState9(() => preloads);
-  useEffect6(() => {
+  const [_preloads, _setPreloads] = useState10(() => preloads);
+  useEffect7(() => {
     const updaterFunction = () => {
       _setPreloads(preloads);
     };
@@ -6928,7 +7095,7 @@ var getSrcWithoutHash = (src) => {
   return src.slice(0, hashIndex);
 };
 var usePreload = (src) => {
-  const preloads2 = useContext20(PreloadContext);
+  const preloads2 = useContext22(PreloadContext);
   const hashFragmentIndex = removeAndGetHashFragment(src);
   const withoutHashFragment = getSrcWithoutHash(src);
   if (!preloads2[withoutHashFragment]) {
@@ -7213,7 +7380,7 @@ var resolveTrimProps = ({
 };
 
 // src/video/duration-state.tsx
-import { createContext as createContext22, useMemo as useMemo21, useReducer } from "react";
+import { createContext as createContext21, useMemo as useMemo19, useReducer } from "react";
 import { jsx as jsx19 } from "react/jsx-runtime";
 var durationReducer = (state, action) => {
   switch (action.type) {
@@ -7231,7 +7398,7 @@ var durationReducer = (state, action) => {
       return state;
   }
 };
-var DurationsContext = createContext22({
+var DurationsContext = createContext21({
   durations: {},
   setDurations: () => {
     throw new Error("context missing");
@@ -7239,7 +7406,7 @@ var DurationsContext = createContext22({
 });
 var DurationsContextProvider = ({ children }) => {
   const [durations, setDurations] = useReducer(durationReducer, {});
-  const value = useMemo21(() => {
+  const value = useMemo19(() => {
     return {
       durations,
       setDurations
@@ -7252,15 +7419,15 @@ var DurationsContextProvider = ({ children }) => {
 };
 
 // src/audio/AudioForPreview.tsx
-import { useCallback as useCallback14 } from "react";
-import React25, {
+import { useCallback as useCallback15 } from "react";
+import React26, {
   forwardRef as forwardRef5,
-  useContext as useContext29,
-  useEffect as useEffect14,
+  useContext as useContext31,
+  useEffect as useEffect15,
   useImperativeHandle as useImperativeHandle4,
-  useMemo as useMemo29,
+  useMemo as useMemo27,
   useRef as useRef20,
-  useState as useState14
+  useState as useState15
 } from "react";
 
 // src/get-cross-origin-value.ts
@@ -7316,18 +7483,18 @@ var random = (seed, dummy) => {
 };
 
 // src/use-amplification.ts
-import { useContext as useContext22, useLayoutEffect as useLayoutEffect7, useRef as useRef15 } from "react";
+import { useContext as useContext24, useLayoutEffect as useLayoutEffect8, useRef as useRef15 } from "react";
 
 // src/audio/shared-audio-tags.tsx
-import React22, {
-  createContext as createContext23,
+import React23, {
+  createContext as createContext22,
   createRef as createRef2,
   useCallback as useCallback10,
-  useContext as useContext21,
-  useEffect as useEffect7,
-  useMemo as useMemo23,
+  useContext as useContext23,
+  useEffect as useEffect8,
+  useMemo as useMemo21,
   useRef as useRef13,
-  useState as useState10
+  useState as useState11
 } from "react";
 
 // src/play-and-handle-not-allowed-error.ts
@@ -7430,7 +7597,7 @@ var makeSharedElementSourceNode = ({
 };
 
 // src/audio/use-audio-context.ts
-import { useMemo as useMemo22, useRef as useRef12 } from "react";
+import { useMemo as useMemo20, useRef as useRef12 } from "react";
 var warned = false;
 var warnOnce = (logLevel) => {
   if (warned) {
@@ -7452,7 +7619,7 @@ var useSingletonAudioContext = ({
   if (sampleRate !== initialSampleRate.current) {
     throw new Error(`Changing the AudioContext sample rate dynamically is not supported. The sample rate was initialized with ${initialSampleRate.current} Hz, but ${sampleRate} Hz was passed later.`);
   }
-  const context = useMemo22(() => {
+  const context = useMemo20(() => {
     if (env.isRendering) {
       return null;
     }
@@ -7515,7 +7682,7 @@ var useSingletonAudioContext = ({
 
 // src/audio/wait-until-actually-resumed.ts
 var RESUME_WAIT_TIMEOUT = 1000;
-var waitUntilActuallyResumed = (audioContext, logLevel, signal) => {
+var waitUntilActuallyResumed = (audioContext, logLevel, signal, isAutoPlayAttempt) => {
   return new Promise((resolve) => {
     const startCurrentTime = audioContext.currentTime;
     const start = audioContext.getOutputTimestamp();
@@ -7563,14 +7730,16 @@ var waitUntilActuallyResumed = (audioContext, logLevel, signal) => {
       return;
     }
     signal.addEventListener("abort", onAbort, { once: true });
-    timeout = setTimeout(() => {
-      if (hasAudiblyStarted(startOutputPerformanceTime)) {
-        finish("resumed");
-        return;
-      }
-      Log.warn({ logLevel, tag: "audio" }, "WARNING: You enabled autoPlay on an unmuted <Player /> and the browser did not allow the video to be started. Remotion muted the <Player /> so it can play. To properly handle this, either set the `muted` prop or remove the `autoPlay` prop");
-      finish("failed");
-    }, RESUME_WAIT_TIMEOUT);
+    if (isAutoPlayAttempt) {
+      timeout = setTimeout(() => {
+        if (hasAudiblyStarted(startOutputPerformanceTime)) {
+          finish("resumed");
+          return;
+        }
+        Log.warn({ logLevel, tag: "audio" }, "WARNING: You enabled autoPlay on an unmuted <Player /> and the browser did not allow the video to be started. Remotion muted the <Player /> so it can play. To properly handle this, either set the `muted` prop or remove the `autoPlay` prop");
+        finish("failed");
+      }, RESUME_WAIT_TIMEOUT);
+    }
     animationFrame = requestAnimationFrame(check);
   });
 };
@@ -7603,8 +7772,8 @@ var didPropChange = (key, newProp, prevProp) => {
   }
   return true;
 };
-var SharedAudioContext = createContext23(null);
-var SharedAudioTagsContext = createContext23(null);
+var SharedAudioContext = createContext22(null);
+var SharedAudioTagsContext = createContext22(null);
 var shouldSaveForLater = (state) => {
   if (state === "suspended" || state === "running-to-suspended" || state === "interrupted") {
     return true;
@@ -7623,7 +7792,7 @@ var SharedAudioContextProvider = ({
 }) => {
   const logLevel = useLogLevel();
   const sampleRate = previewSampleRate ?? 48000;
-  useEffect7(() => {
+  useEffect8(() => {
     if (typeof window === "undefined") {
       return;
     }
@@ -7642,9 +7811,10 @@ var SharedAudioContextProvider = ({
   }
   const isResuming = useRef13(null);
   const nextResumeAttemptId = useRef13(0);
-  const audioSyncAnchor = useMemo23(() => ({ value: 0 }), []);
+  const nextResumeIsAutoPlayAttempt = useRef13(false);
+  const audioSyncAnchor = useMemo21(() => ({ value: 0 }), []);
   const audioSyncAnchorListeners = useRef13([]);
-  const audioSyncAnchorEmitter = useMemo23(() => {
+  const audioSyncAnchorEmitter = useMemo21(() => {
     return {
       dispatch: (event) => {
         audioSyncAnchorListeners.current.forEach((l) => l(event));
@@ -7664,7 +7834,7 @@ var SharedAudioContextProvider = ({
   const unscheduleAudioNode = useCallback10((node) => {
     nodesToResume.current.delete(node);
   }, []);
-  const scheduleAudioNode = useMemo23(() => {
+  const scheduleAudioNode = useMemo21(() => {
     return ({
       node,
       mediaTimestamp,
@@ -7717,6 +7887,8 @@ var SharedAudioContextProvider = ({
     };
   }, [ctxAndGain, _experimentalKeepAudioContextAlive, logLevel]);
   const resume = useCallback10(() => {
+    const isAutoPlayAttempt = nextResumeIsAutoPlayAttempt.current;
+    nextResumeIsAutoPlayAttempt.current = false;
     if (!ctxAndGain) {
       return Promise.resolve();
     }
@@ -7738,7 +7910,7 @@ var SharedAudioContextProvider = ({
     const abortController = new AbortController;
     const resumeAttemptId = nextResumeAttemptId.current++;
     const waitPromise = new Promise((resolve) => {
-      waitUntilActuallyResumed(ctxAndGain.audioContext, logLevel, abortController.signal).then(resolve);
+      waitUntilActuallyResumed(ctxAndGain.audioContext, logLevel, abortController.signal, isAutoPlayAttempt).then(resolve);
       resumePromise.catch((err) => {
         Log.warn({ logLevel, tag: "audio" }, "AudioContext resume rejected, muting playback and continuing without audio", err);
         abortController.abort();
@@ -7756,6 +7928,10 @@ var SharedAudioContextProvider = ({
     };
     return resumePromise.catch(() => {});
   }, [ctxAndGain, _experimentalKeepAudioContextAlive, logLevel]);
+  const resumeAsAutoPlay = useCallback10(() => {
+    nextResumeIsAutoPlayAttempt.current = true;
+    return resume();
+  }, [resume]);
   const getIsResumingAudioContext = useCallback10(() => {
     return isResuming.current?.promise ?? null;
   }, []);
@@ -7775,7 +7951,7 @@ var SharedAudioContextProvider = ({
     }
     return ctxAndGain.suspend();
   }, [ctxAndGain, _experimentalKeepAudioContextAlive]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!_experimentalKeepAudioContextAlive) {
       return;
     }
@@ -7803,7 +7979,7 @@ var SharedAudioContextProvider = ({
       ctxAndGain.suspend().catch(() => {});
     };
   }, [ctxAndGain, _experimentalKeepAudioContextAlive]);
-  const audioContextValue = useMemo23(() => {
+  const audioContextValue = useMemo21(() => {
     return {
       audioContext: ctxAndGain?.audioContext ?? null,
       getAudioContextState: () => ctxAndGain?.getState() ?? null,
@@ -7812,6 +7988,7 @@ var SharedAudioContextProvider = ({
       audioSyncAnchorEmitter,
       scheduleAudioNode,
       resume,
+      resumeAsAutoPlay,
       suspend,
       getIsResumingAudioContext,
       unscheduleAudioNode,
@@ -7823,6 +8000,7 @@ var SharedAudioContextProvider = ({
     audioSyncAnchorEmitter,
     scheduleAudioNode,
     resume,
+    resumeAsAutoPlay,
     suspend,
     getIsResumingAudioContext,
     unscheduleAudioNode,
@@ -7835,17 +8013,17 @@ var SharedAudioContextProvider = ({
 };
 var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
   const audios = useRef13([]);
-  const [initialNumberOfAudioTags] = useState10(numberOfAudioTags);
+  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 logLevel = useLogLevel();
   const mountTime = useMountTime();
   const env = useRemotionEnvironment();
-  const audioCtx = useContext21(SharedAudioContext);
+  const audioCtx = useContext23(SharedAudioContext);
   const audioContext = audioCtx?.audioContext ?? null;
   const resume = audioCtx?.resume;
-  const [refs] = useState10(() => {
+  const [refs] = useState11(() => {
     return new Array(numberOfAudioTags).fill(true).map(() => {
       const ref = createRef2();
       return {
@@ -7861,7 +8039,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
   for (const { mediaElementSourceNode } of refs) {
     mediaElementSourceNode?.setAudioContext(audioContext);
   }
-  const effectToUse = React22.useInsertionEffect ?? React22.useLayoutEffect;
+  const effectToUse = React23.useInsertionEffect ?? React23.useLayoutEffect;
   effectToUse(() => {
     return () => {
       requestAnimationFrame(() => {
@@ -7987,7 +8165,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     });
     resume?.();
   }, [logLevel, mountTime, refs, env.isPlayer, resume]);
-  const audioTagsValue = useMemo23(() => {
+  const audioTagsValue = useMemo21(() => {
     return {
       registerAudio,
       unregisterAudio,
@@ -8002,7 +8180,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     unregisterAudio,
     updateAudio
   ]);
-  const sharedAudioTagElements = useMemo23(() => {
+  const sharedAudioTagElements = useMemo21(() => {
     return refs.map(({ id, ref }) => {
       return /* @__PURE__ */ jsx20("audio", {
         ref,
@@ -8025,13 +8203,13 @@ var useSharedAudio = ({
   premounting,
   postmounting
 }) => {
-  const audioCtx = useContext21(SharedAudioContext);
-  const tagsCtx = useContext21(SharedAudioTagsContext);
-  const [elem] = useState10(() => {
+  const audioCtx = useContext23(SharedAudioContext);
+  const tagsCtx = useContext23(SharedAudioTagsContext);
+  const [elem] = useState11(() => {
     if (tagsCtx && tagsCtx.numberOfAudioTags > 0) {
       return tagsCtx.registerAudio({ aud, audioId, premounting, postmounting });
     }
-    const el = React22.createRef();
+    const el = React23.createRef();
     const mediaElementSourceNode = makeSharedElementSourceNode({
       audioContext: audioCtx?.audioContext ?? null,
       ref: el
@@ -8051,7 +8229,7 @@ var useSharedAudio = ({
     };
   });
   elem.mediaElementSourceNode?.setAudioContext(audioCtx?.audioContext ?? null);
-  const effectToUse = React22.useInsertionEffect ?? React22.useLayoutEffect;
+  const effectToUse = React23.useInsertionEffect ?? React23.useLayoutEffect;
   if (typeof document !== "undefined") {
     effectToUse(() => {
       if (tagsCtx && tagsCtx.numberOfAudioTags > 0) {
@@ -8213,13 +8391,13 @@ var useVolume = ({
   const audioStuffRef = useRef15(null);
   const currentVolumeRef = useRef15(volume);
   currentVolumeRef.current = volume;
-  const sharedAudioContext = useContext22(SharedAudioContext);
+  const sharedAudioContext = useContext24(SharedAudioContext);
   if (!sharedAudioContext) {
     throw new Error("useAmplification must be used within a SharedAudioContext");
   }
   const { audioContext, gainNode: masterGainNode } = sharedAudioContext;
   if (typeof window !== "undefined") {
-    useLayoutEffect7(() => {
+    useLayoutEffect8(() => {
       if (!audioContext) {
         return;
       }
@@ -8279,12 +8457,12 @@ var useVolume = ({
 };
 
 // src/use-media-in-timeline.ts
-import { useContext as useContext24, useEffect as useEffect8, useMemo as useMemo24, useState as useState11 } from "react";
+import { useCallback as useCallback11, useContext as useContext26, useEffect as useEffect9, useMemo as useMemo22, useState as useState12 } from "react";
 
 // src/audio/use-audio-frame.ts
-import { useContext as useContext23 } from "react";
+import { useContext as useContext25 } from "react";
 var useMediaStartsAt = () => {
-  const parentSequence = useContext23(SequenceContext);
+  const parentSequence = useContext25(SequenceContext);
   return parentSequence?.cumulatedNegativeFrom ?? 0;
 };
 var useFrameForVolumeProp = (behavior) => {
@@ -8386,8 +8564,8 @@ var useBasicMediaInTimeline = ({
   if (!src) {
     throw new Error("No src passed");
   }
-  const parentSequence = useContext24(SequenceContext);
-  const [initialVolume] = useState11(() => volume);
+  const parentSequence = useContext26(SequenceContext);
+  const [initialVolume] = useState12(() => volume);
   const duration = getTimelineDuration({
     compositionDurationInFrames: sequenceDurationInFrames,
     playbackRate,
@@ -8396,7 +8574,7 @@ var useBasicMediaInTimeline = ({
     parentSequenceDurationInFrames: parentSequence?.durationInFrames ?? null,
     loop
   });
-  const volumes = useMemo24(() => {
+  const volumes = useMemo22(() => {
     if (typeof volume === "number") {
       return volume;
     }
@@ -8415,20 +8593,18 @@ var useBasicMediaInTimeline = ({
       });
     }).join(",");
   }, [duration, mediaStartsAt, volume, mediaVolume]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (typeof volume === "number" && volume !== initialVolume) {
       warnOnce2(`Remotion: The ${mediaType} with src ${src} has changed it's volume. Prefer the callback syntax for setting volume to get better timeline display: https://www.remotion.dev/docs/audio/volume`);
     }
   }, [initialVolume, mediaType, src, volume]);
   const doesVolumeChange = typeof volume === "function";
-  const nonce = useNonce();
   const startMediaFrom = 0 - mediaStartsAt + (trimBefore ?? 0);
-  const memoizedResult = useMemo24(() => {
+  const memoizedResult = useMemo22(() => {
     return {
       volumes,
       duration,
       doesVolumeChange,
-      nonce,
       finalDisplayName: displayName ?? getAssetDisplayName(src),
       startMediaFrom,
       src,
@@ -8439,7 +8615,6 @@ var useBasicMediaInTimeline = ({
     volumes,
     duration,
     doesVolumeChange,
-    nonce,
     displayName,
     src,
     startMediaFrom,
@@ -8465,13 +8640,12 @@ var useMediaInTimeline = ({
   refForOutline,
   muted
 }) => {
-  const parentSequence = useContext24(SequenceContext);
+  const parentSequence = useContext26(SequenceContext);
   const startsAt = useMediaStartsAt();
-  const { registerSequence, unregisterSequence } = useContext24(SequenceManager);
-  const sequenceRegistrationEnabled = useContext24(SequenceRegistrationContext);
+  const sequenceRegistrationEnabled = useContext26(SequenceRegistrationContext);
   const { durationInFrames } = useVideoConfig();
   const mediaStartsAt = useMediaStartsAt();
-  const { volumes, duration, doesVolumeChange, nonce, finalDisplayName } = useBasicMediaInTimeline({
+  const { volumes, duration, doesVolumeChange, finalDisplayName } = useBasicMediaInTimeline({
     volume,
     mediaVolume,
     mediaType,
@@ -8486,17 +8660,11 @@ var useMediaInTimeline = ({
     muted
   });
   const { isStudio } = useRemotionEnvironment();
-  useEffect8(() => {
+  const getSequenceForRegistration = useCallback11(() => {
     if (!src) {
       throw new Error("No src passed");
     }
-    if (!isStudio && !sequenceRegistrationEnabled && window.process?.env?.NODE_ENV !== "test") {
-      return;
-    }
-    if (!showInTimeline) {
-      return;
-    }
-    registerSequence({
+    return {
       effectRuntimeValues: null,
       type: mediaType,
       src,
@@ -8510,7 +8678,7 @@ var useMediaInTimeline = ({
       volume: volumes,
       muted,
       showInTimeline: true,
-      nonce: nonce.get(),
+      timelineOrder: null,
       startMediaFrom: 0 - startsAt,
       mediaFrameAtSequenceZero: null,
       doesVolumeChange,
@@ -8525,71 +8693,57 @@ var useMediaInTimeline = ({
       isInsideSeries: false,
       frozenFrame: null,
       frozenMediaFrame: null
-    });
-    return () => {
-      unregisterSequence(id);
     };
   }, [
     duration,
     id,
     parentSequence,
     src,
-    registerSequence,
-    unregisterSequence,
     volumes,
     doesVolumeChange,
-    nonce,
     mediaType,
     startsAt,
     playbackRate,
     getStack,
-    showInTimeline,
     premountDisplay,
     postmountDisplay,
     loopDisplay,
     documentationLink,
     finalDisplayName,
-    isStudio,
-    sequenceRegistrationEnabled,
     refForOutline,
     muted
   ]);
+  const registrationEnabled = isStudio || sequenceRegistrationEnabled || typeof window !== "undefined" && window.process?.env?.NODE_ENV === "test";
+  useSequenceRegistration({
+    getSequence: registrationEnabled && showInTimeline ? getSequenceForRegistration : null,
+    id
+  });
 };
 
 // src/use-media-playback.ts
-import {
-  useCallback as useCallback13,
-  useContext as useContext27,
-  useEffect as useEffect12,
-  useLayoutEffect as useLayoutEffect9,
-  useRef as useRef19
-} from "react";
+import { useCallback as useCallback14, useEffect as useEffect13, useLayoutEffect as useLayoutEffect10, useRef as useRef18 } from "react";
 
 // src/buffer-until-first-frame.ts
-import { useCallback as useCallback12, useMemo as useMemo27, useRef as useRef17 } from "react";
+import { useCallback as useCallback13, useMemo as useMemo25, useRef as useRef16 } from "react";
 
 // src/use-buffer-state.ts
-import { useContext as useContext26, useMemo as useMemo26 } from "react";
+import { useContext as useContext28, useMemo as useMemo24 } from "react";
 
 // src/buffering.tsx
-import React23, {
-  useCallback as useCallback11,
-  useContext as useContext25,
-  useEffect as useEffect9,
-  useLayoutEffect as useLayoutEffect8,
-  useMemo as useMemo25,
-  useRef as useRef16,
-  useState as useState12
+import React24, {
+  useCallback as useCallback12,
+  useContext as useContext27,
+  useEffect as useEffect10,
+  useLayoutEffect as useLayoutEffect9,
+  useMemo as useMemo23,
+  useState as useState13
 } from "react";
 import { jsx as jsx21 } from "react/jsx-runtime";
-var useBufferManager = (logLevel, mountTime) => {
-  const [blocks, setBlocks] = useState12([]);
-  const onBufferingCallbacks = useRef16([]);
-  const onResumeCallbacks = useRef16([]);
+var useBufferManager = (logLevel, mountTime, setBuffering, isBuffering) => {
+  const [blockCount, setBlockCount] = useState13(0);
   const env = useRemotionEnvironment();
   const rendering = env.isRendering;
-  const buffering = useRef16(false);
-  const addBlock = useCallback11((block) => {
+  const addBlock = useCallback12(() => {
     if (rendering) {
       return {
         unblock: () => {
@@ -8598,49 +8752,23 @@ var useBufferManager = (logLevel, mountTime) => {
       };
     }
     let unblocked = false;
-    setBlocks((b2) => [...b2, block]);
+    setBlockCount((count) => count + 1);
     return {
       unblock: () => {
         if (unblocked) {
           return;
         }
         unblocked = true;
-        setBlocks((b2) => {
-          const newArr = b2.filter((bx) => bx !== block);
-          if (newArr.length === b2.length) {
-            return b2;
-          }
-          return newArr;
-        });
+        setBlockCount((count) => count - 1);
       }
     };
   }, [rendering]);
-  const listenForBuffering = useCallback11((callback) => {
-    onBufferingCallbacks.current = [
-      ...onBufferingCallbacks.current,
-      callback
-    ];
-    return {
-      remove: () => {
-        onBufferingCallbacks.current = onBufferingCallbacks.current.filter((cb) => cb !== callback);
-      }
-    };
-  }, []);
-  const listenForResume = useCallback11((callback) => {
-    onResumeCallbacks.current = [...onResumeCallbacks.current, callback];
-    return {
-      remove: () => {
-        onResumeCallbacks.current = onResumeCallbacks.current.filter((cb) => cb !== callback);
-      }
-    };
-  }, []);
-  useEffect9(() => {
+  useEffect10(() => {
     if (rendering) {
       return;
     }
-    if (blocks.length > 0 && !buffering.current) {
-      buffering.current = true;
-      [...onBufferingCallbacks.current].forEach((c2) => c2());
+    if (blockCount > 0 && !isBuffering()) {
+      setBuffering(true);
       playbackLogging({
         logLevel,
         message: "Player is entering buffer state",
@@ -8648,15 +8776,14 @@ var useBufferManager = (logLevel, mountTime) => {
         tag: "player"
       });
     }
-  }, [blocks]);
+  }, [blockCount]);
   if (typeof window !== "undefined") {
-    useLayoutEffect8(() => {
+    useLayoutEffect9(() => {
       if (rendering) {
         return;
       }
-      if (blocks.length === 0 && buffering.current) {
-        buffering.current = false;
-        [...onResumeCallbacks.current].forEach((c2) => c2());
+      if (blockCount === 0 && isBuffering()) {
+        setBuffering(false);
         playbackLogging({
           logLevel,
           message: "Player is exiting buffer state",
@@ -8664,54 +8791,33 @@ var useBufferManager = (logLevel, mountTime) => {
           tag: "player"
         });
       }
-    }, [blocks]);
+    }, [blockCount]);
   }
-  return useMemo25(() => {
-    return { addBlock, listenForBuffering, listenForResume, buffering };
-  }, [addBlock, buffering, listenForBuffering, listenForResume]);
+  return useMemo23(() => ({ addBlock }), [addBlock]);
 };
-var BufferingContextReact = React23.createContext(null);
+var BufferingContextReact = React24.createContext(null);
 var BufferingProvider = ({ children }) => {
-  const { logLevel, mountTime } = useContext25(LogLevelContext);
-  const bufferManager = useBufferManager(logLevel ?? "info", mountTime);
+  const { logLevel, mountTime } = useContext27(LogLevelContext);
+  const { isBuffering, setBuffering } = useContext27(SetTimelineContext);
+  const bufferManager = useBufferManager(logLevel ?? "info", mountTime, setBuffering, isBuffering);
   return /* @__PURE__ */ jsx21(BufferingContextReact.Provider, {
     value: bufferManager,
     children
   });
 };
-var useIsPlayerBuffering = (bufferManager) => {
-  const [isBuffering, setIsBuffering] = useState12(bufferManager.buffering.current);
-  useEffect9(() => {
-    const onBuffer = () => {
-      setIsBuffering(true);
-    };
-    const onResume = () => {
-      setIsBuffering(false);
-    };
-    const buffer = bufferManager.listenForBuffering(onBuffer);
-    const resume = bufferManager.listenForResume(onResume);
-    return () => {
-      buffer.remove();
-      resume.remove();
-    };
-  }, [bufferManager]);
-  return isBuffering;
-};
 
 // src/use-buffer-state.ts
 var useBufferState = () => {
-  const buffer = useContext26(BufferingContextReact);
+  const buffer = useContext28(BufferingContextReact);
   const logLevel = useLogLevel();
   const addBlock = buffer ? buffer.addBlock : null;
-  return useMemo26(() => ({
+  return useMemo24(() => ({
     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");
       }
       Log.trace({ logLevel, tag: "[buffer-state]" }, "Adding buffer handle", new Error().stack);
-      const { unblock } = addBlock({
-        id: String(Math.random())
-      });
+      const { unblock } = addBlock();
       let unblocked = false;
       return {
         unblock: () => {
@@ -8740,9 +8846,9 @@ var useBufferUntilFirstFrame = ({
   logLevel,
   mountTime
 }) => {
-  const bufferingRef = useRef17(false);
+  const bufferingRef = useRef16(false);
   const { delayPlayback } = useBufferState();
-  const bufferUntilFirstFrame = useCallback12((requestedTime) => {
+  const bufferUntilFirstFrame = useCallback13((requestedTime) => {
     if (mediaType !== "video") {
       return;
     }
@@ -8813,7 +8919,7 @@ var useBufferUntilFirstFrame = ({
     onVariableFpsVideoDetected,
     pauseWhenBuffering
   ]);
-  return useMemo27(() => {
+  return useMemo25(() => {
     return {
       isBuffering: () => bufferingRef.current,
       bufferUntilFirstFrame
@@ -8890,9 +8996,9 @@ var getMediaSyncAction = (input) => {
 };
 
 // src/media-tag-current-time-timestamp.ts
-import React24 from "react";
+import React25 from "react";
 var useCurrentTimeOfMediaTagWithUpdateTimeStamp = (mediaRef) => {
-  const lastUpdate = React24.useRef({
+  const lastUpdate = React25.useRef({
     time: mediaRef.current?.currentTime ?? 0,
     lastUpdate: performance.now()
   });
@@ -8926,7 +9032,7 @@ var seek = ({
 };
 
 // src/use-media-buffering.ts
-import { useEffect as useEffect10, useState as useState13 } from "react";
+import { useEffect as useEffect11, useState as useState14 } from "react";
 var useMediaBuffering = ({
   element,
   shouldBuffer,
@@ -8937,8 +9043,8 @@ var useMediaBuffering = ({
   src
 }) => {
   const buffer = useBufferState();
-  const [isBuffering, setIsBuffering] = useState13(false);
-  useEffect10(() => {
+  const [isBuffering, setIsBuffering] = useState14(false);
+  useEffect11(() => {
     let cleanupFns = [];
     const { current } = element;
     if (!current) {
@@ -9066,15 +9172,15 @@ var useMediaBuffering = ({
 };
 
 // src/use-request-video-callback-time.ts
-import { useEffect as useEffect11, useRef as useRef18 } from "react";
+import { useEffect as useEffect12, useRef as useRef17 } from "react";
 var useRequestVideoCallbackTime = ({
   mediaRef,
   mediaType,
   lastSeek,
   onVariableFpsVideoDetected
 }) => {
-  const currentTime = useRef18(null);
-  useEffect11(() => {
+  const currentTime = useRef17(null);
+  useEffect12(() => {
     const { current } = mediaRef;
     if (current) {
       currentTime.current = {
@@ -9189,6 +9295,23 @@ var warnAboutNonSeekableMedia = (ref, type) => {
 };
 
 // src/use-media-playback.ts
+var DEFAULT_ACCEPTABLE_TIMESHIFT_WITH_AMPLIFICATION = 0.65;
+var getPauseReason = ({
+  reason,
+  isPremounting,
+  isPostmounting
+}) => {
+  if (reason === "buffering") {
+    return "player is buffering but media tag is not";
+  }
+  if (isPremounting) {
+    return "media is premounting";
+  }
+  if (isPostmounting) {
+    return "media is postmounting";
+  }
+  return "Player is not playing";
+};
 var useMediaPlayback = ({
   mediaRef,
   src,
@@ -9205,19 +9328,16 @@ var useMediaPlayback = ({
   const { playbackRate: globalPlaybackRate } = usePlaybackRate();
   const frame = useCurrentFrame();
   const absoluteFrame = useTimelinePosition();
-  const [playing] = usePlayingState();
-  const buffering = useContext27(BufferingContextReact);
+  const playing = usePlaying();
+  const playerBuffering = useBuffering();
   const { fps } = useVideoConfig();
   const mediaStartsAt = useMediaStartsAt();
-  const lastSeekDueToShift = useRef19(null);
-  const lastSeek = useRef19(null);
+  const lastSeekDueToShift = useRef18(null);
+  const lastSeek = useRef18(null);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
-  if (!buffering) {
-    throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
-  }
-  const isVariableFpsVideoMap = useRef19({});
-  const onVariableFpsVideoDetected = useCallback13(() => {
+  const isVariableFpsVideoMap = useRef18({});
+  const onVariableFpsVideoDetected = useCallback14(() => {
     if (!src) {
       return;
     }
@@ -9259,56 +9379,17 @@ var useMediaPlayback = ({
   });
   const playbackRate = localPlaybackRate * globalPlaybackRate;
   const acceptableTimeShiftButLessThanDuration = (() => {
-    const DEFAULT_ACCEPTABLE_TIMESHIFT_WITH_NORMAL_PLAYBACK = 0.45;
-    const DEFAULT_ACCEPTABLE_TIMESHIFT_WITH_AMPLIFICATION = DEFAULT_ACCEPTABLE_TIMESHIFT_WITH_NORMAL_PLAYBACK + 0.2;
-    const defaultAcceptableTimeshift = DEFAULT_ACCEPTABLE_TIMESHIFT_WITH_AMPLIFICATION;
     if (mediaRef.current?.duration) {
-      return Math.min(mediaRef.current.duration, acceptableTimeshift ?? defaultAcceptableTimeshift);
+      return Math.min(mediaRef.current.duration, acceptableTimeshift ?? DEFAULT_ACCEPTABLE_TIMESHIFT_WITH_AMPLIFICATION);
     }
-    return acceptableTimeshift ?? defaultAcceptableTimeshift;
+    return acceptableTimeshift ?? DEFAULT_ACCEPTABLE_TIMESHIFT_WITH_AMPLIFICATION;
   })();
-  const isPlayerBuffering = useIsPlayerBuffering(buffering);
-  useEffect12(() => {
-    if (mediaRef.current?.paused) {
-      return;
-    }
-    if (!playing) {
-      playbackLogging({
-        logLevel,
-        tag: "pause",
-        message: `Pausing ${mediaRef.current?.src} because ${isPremounting ? "media is premounting" : isPostmounting ? "media is postmounting" : "Player is not playing"}`,
-        mountTime
-      });
-      mediaRef.current?.pause();
-      return;
-    }
-    const isMediaTagBufferingOrStalled = isMediaTagBuffering || isBuffering();
-    const playerBufferingNotStateButLive = buffering.buffering.current;
-    if (playerBufferingNotStateButLive && !isMediaTagBufferingOrStalled) {
-      playbackLogging({
-        logLevel,
-        tag: "pause",
-        message: `Pausing ${mediaRef.current?.src} because player is buffering but media tag is not`,
-        mountTime
-      });
-      mediaRef.current?.pause();
-    }
-  }, [
-    isBuffering,
-    isMediaTagBuffering,
-    buffering,
-    isPlayerBuffering,
-    isPremounting,
-    logLevel,
-    mediaRef,
-    mediaType,
-    mountTime,
-    playing,
-    isPostmounting
-  ]);
   const env = useRemotionEnvironment();
-  useLayoutEffect9(() => {
+  useLayoutEffect10(() => {
     const playbackRateToSet = Math.max(0, playbackRate);
+    if (mediaRef.current && mediaRef.current.defaultPlaybackRate !== playbackRateToSet) {
+      mediaRef.current.defaultPlaybackRate = playbackRateToSet;
+    }
     if (mediaRef.current && mediaRef.current.playbackRate !== playbackRateToSet) {
       mediaRef.current.playbackRate = playbackRateToSet;
     }
@@ -9316,7 +9397,7 @@ var useMediaPlayback = ({
       mediaRef.current.preservesPitch = preservePitch;
     }
   }, [mediaRef, playbackRate, preservePitch]);
-  useEffect12(() => {
+  useEffect13(() => {
     const tagName = mediaType === "audio" ? "<Html5Audio>" : "<Html5Video>";
     if (!mediaRef.current) {
       throw new Error(`No ${mediaType} ref found`);
@@ -9325,6 +9406,26 @@ var useMediaPlayback = ({
       throw new Error(`No 'src' attribute was passed to the ${tagName} element.`);
     }
     const { current } = mediaRef;
+    const isMediaTagBufferingOrStalled = isMediaTagBuffering || isBuffering();
+    let pauseReason = null;
+    if (!playing) {
+      pauseReason = "not-playing";
+    } else if (playerBuffering && !isMediaTagBufferingOrStalled) {
+      pauseReason = "buffering";
+    }
+    if (!current.paused && pauseReason !== null) {
+      playbackLogging({
+        logLevel,
+        tag: "pause",
+        message: `Pausing ${current.src} because ${getPauseReason({
+          reason: pauseReason,
+          isPremounting,
+          isPostmounting
+        })}`,
+        mountTime
+      });
+      current.pause();
+    }
     const action = getMediaSyncAction({
       duration: current.duration,
       currentTime: current.currentTime,
@@ -9340,8 +9441,8 @@ var useMediaPlayback = ({
       lastSeekDueToShift: lastSeekDueToShift.current,
       playing,
       playbackRate,
-      mediaTagBufferingOrStalled: isMediaTagBuffering || isBuffering(),
-      playerBuffering: buffering.buffering.current,
+      mediaTagBufferingOrStalled: isMediaTagBufferingOrStalled,
+      playerBuffering,
       absoluteFrame,
       onlyWarnForMediaSeekingError,
       isPremounting,
@@ -9416,7 +9517,6 @@ var useMediaPlayback = ({
     absoluteFrame,
     acceptableTimeShiftButLessThanDuration,
     bufferUntilFirstFrame,
-    buffering.buffering,
     rvcCurrentTime,
     logLevel,
     desiredUnclampedTime,
@@ -9426,6 +9526,7 @@ var useMediaPlayback = ({
     mediaType,
     onlyWarnForMediaSeekingError,
     playbackRate,
+    playerBuffering,
     playing,
     src,
     onAutoPlayError,
@@ -9439,7 +9540,7 @@ var useMediaPlayback = ({
 };
 
 // src/use-media-tag.ts
-import { useEffect as useEffect13 } from "react";
+import { useContext as useContext29, useEffect as useEffect14, useRef as useRef19 } from "react";
 var useMediaTag = ({
   mediaRef,
   id,
@@ -9448,15 +9549,18 @@ var useMediaTag = ({
   isPremounting,
   isPostmounting
 }) => {
-  const { audioAndVideoTags, imperativePlaying } = useTimelineContext();
+  const { audioAndVideoTags, isPlaying } = useTimelineContext();
+  const { subscribePlaying } = useContext29(SetTimelineContext);
+  const isPlayingRef = useRef19(isPlaying);
+  isPlayingRef.current = isPlaying;
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const env = useRemotionEnvironment();
-  useEffect13(() => {
+  useEffect14(() => {
     const tag = {
       id,
       play: (reason) => {
-        if (!imperativePlaying.current) {
+        if (!isPlayingRef.current()) {
           return;
         }
         if (isPremounting || isPostmounting) {
@@ -9474,7 +9578,24 @@ var useMediaTag = ({
       }
     };
     audioAndVideoTags.current.push(tag);
+    const unsubscribe = subscribePlaying((state) => {
+      if (state.playing) {
+        return;
+      }
+      const media = mediaRef.current;
+      if (!media || media.paused) {
+        return;
+      }
+      playbackLogging({
+        logLevel,
+        tag: "pause",
+        message: `Pausing ${media.src} because Player is not playing`,
+        mountTime
+      });
+      media.pause();
+    });
     return () => {
+      unsubscribe();
       audioAndVideoTags.current = audioAndVideoTags.current.filter((a2) => a2.id !== id);
     };
   }, [
@@ -9483,22 +9604,22 @@ var useMediaTag = ({
     mediaRef,
     mediaType,
     onAutoPlayError,
-    imperativePlaying,
     isPremounting,
     isPostmounting,
     logLevel,
     mountTime,
-    env.isPlayer
+    env.isPlayer,
+    subscribePlaying
   ]);
 };
 
 // src/volume-position-state.ts
-import { createContext as createContext24, useContext as useContext28, useMemo as useMemo28 } from "react";
-var MediaVolumeContext = createContext24({
+import { createContext as createContext23, useContext as useContext30, useMemo as useMemo26 } from "react";
+var MediaVolumeContext = createContext23({
   playerMuted: false,
   mediaVolume: 1
 });
-var SetMediaVolumeContext = createContext24({
+var SetMediaVolumeContext = createContext23({
   setPlayerMuted: () => {
     throw new Error("default");
   },
@@ -9507,16 +9628,16 @@ var SetMediaVolumeContext = createContext24({
   }
 });
 var useMediaVolumeState = () => {
-  const { mediaVolume } = useContext28(MediaVolumeContext);
-  const { setMediaVolume } = useContext28(SetMediaVolumeContext);
-  return useMemo28(() => {
+  const { mediaVolume } = useContext30(MediaVolumeContext);
+  const { setMediaVolume } = useContext30(SetMediaVolumeContext);
+  return useMemo26(() => {
     return [mediaVolume, setMediaVolume];
   }, [mediaVolume, setMediaVolume]);
 };
 var usePlayerMutedState = () => {
-  const { playerMuted } = useContext28(MediaVolumeContext);
-  const { setPlayerMuted } = useContext28(SetMediaVolumeContext);
-  return useMemo28(() => {
+  const { playerMuted } = useContext30(MediaVolumeContext);
+  const { setPlayerMuted } = useContext30(SetMediaVolumeContext);
+  return useMemo26(() => {
     return [playerMuted, setPlayerMuted];
   }, [playerMuted, setPlayerMuted]);
 };
@@ -9531,7 +9652,7 @@ var warnAboutTooHighVolume = (volume) => {
 // src/audio/AudioForPreview.tsx
 import { jsx as jsx22 } 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.");
   }
@@ -9574,8 +9695,9 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     throw new TypeError("No 'src' was passed to <Html5Audio>.");
   }
   const preloadedSrc = usePreload(src);
-  const sequenceContext = useContext29(SequenceContext);
-  const [timelineId] = useState14(() => String(Math.random()));
+  const sequenceContext = useContext31(SequenceContext);
+  const { isStudio } = useRemotionEnvironment();
+  const [timelineId] = useState15(() => String(Math.random()));
   const userPreferredVolume = evaluateVolume({
     frame: volumePropFrame,
     volume,
@@ -9587,7 +9709,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     requestsVideoFrame: false,
     isClientSideRendering: false
   });
-  const propsToPass = useMemo29(() => {
+  const propsToPass = useMemo27(() => {
     return {
       muted: muted || playerMuted || userPreferredVolume <= 0,
       src: preloadedSrc,
@@ -9604,7 +9726,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     userPreferredVolume,
     crossOriginValue
   ]);
-  const id = useMemo29(() => `audio-${random(src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}-muted:${props.muted}-loop:${props.loop}`, [
+  const id = useMemo27(() => `audio-${random(src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}-muted:${props.muted}-loop:${props.loop}`, [
     src,
     sequenceContext?.relativeFrom,
     sequenceContext?.cumulatedFrom,
@@ -9622,7 +9744,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     premounting: Boolean(sequenceContext?.premounting),
     postmounting: Boolean(sequenceContext?.postmounting)
   });
-  const getStack = useCallback14(() => {
+  const getStack = useCallback15(() => {
     return _remotionInternalStack ?? null;
   }, [_remotionInternalStack]);
   useMediaInTimeline({
@@ -9670,7 +9792,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     volume: userPreferredVolume,
     shouldUseWebAudioApi: useWebAudioApi ?? false
   });
-  const effectToUse = React25.useInsertionEffect ?? React25.useLayoutEffect;
+  const effectToUse = React26.useInsertionEffect ?? React26.useLayoutEffect;
   effectToUse(() => {
     return () => {
       requestAnimationFrame(() => {
@@ -9683,7 +9805,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
   }, [audioRef]);
   const currentOnDurationCallback = useRef20(onDuration);
   currentOnDurationCallback.current = onDuration;
-  useEffect14(() => {
+  useEffect15(() => {
     const { current } = audioRef;
     if (!current) {
       return;
@@ -9701,25 +9823,32 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     };
   }, [audioRef, src]);
   if (initialShouldPreMountAudioElements) {
-    return null;
+    return isStudio ? /* @__PURE__ */ jsx22(SequenceOrderMarker, {
+      sequenceId: timelineId,
+      children: null
+    }) : null;
   }
-  return /* @__PURE__ */ jsx22("audio", {
+  const audio = /* @__PURE__ */ jsx22("audio", {
     ref: audioRef,
     preload: "metadata",
     crossOrigin: crossOriginValue,
     ...propsToPass
   });
+  return isStudio ? /* @__PURE__ */ jsx22(SequenceOrderMarker, {
+    sequenceId: timelineId,
+    children: audio
+  }) : audio;
 };
 var AudioForPreview = forwardRef5(AudioForDevelopmentForwardRefFunction);
 
 // src/audio/AudioForRendering.tsx
 import {
   forwardRef as forwardRef6,
-  useContext as useContext30,
-  useEffect as useEffect15,
+  useContext as useContext32,
+  useEffect as useEffect16,
   useImperativeHandle as useImperativeHandle5,
-  useLayoutEffect as useLayoutEffect10,
-  useMemo as useMemo30,
+  useLayoutEffect as useLayoutEffect11,
+  useMemo as useMemo28,
   useRef as useRef21
 } from "react";
 import { jsx as jsx23 } from "react/jsx-runtime";
@@ -9747,10 +9876,10 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
   const absoluteFrame = useTimelinePosition();
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const frame = useCurrentFrame();
-  const sequenceContext = useContext30(SequenceContext);
-  const { registerRenderAsset, unregisterRenderAsset } = useContext30(RenderAssetManager);
+  const sequenceContext = useContext32(SequenceContext);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext32(RenderAssetManager);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const id = useMemo30(() => `audio-${random(props.src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo28(() => `audio-${random(props.src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}`, [
     props.src,
     sequenceContext?.relativeFrom,
     sequenceContext?.cumulatedFrom,
@@ -9765,7 +9894,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
   useImperativeHandle5(ref, () => {
     return audioRef.current;
   }, []);
-  useEffect15(() => {
+  useEffect16(() => {
     if (!props.src) {
       throw new Error("No src passed");
     }
@@ -9809,7 +9938,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
   ]);
   const { src } = props;
   const needsToRenderAudioTag = ref || _remotionInternalNeedsDurationCalculation;
-  useLayoutEffect10(() => {
+  useLayoutEffect11(() => {
     if (window.process?.env?.NODE_ENV === "test") {
       return;
     }
@@ -9860,7 +9989,7 @@ var AudioForRendering = forwardRef6(AudioForRenderingRefForwardingFunction);
 // src/audio/html5-audio.tsx
 import { jsx as jsx24 } from "react/jsx-runtime";
 var AudioRefForwardingFunction = (props, ref) => {
-  const audioTagsContext = useContext31(SharedAudioTagsContext);
+  const audioTagsContext = useContext33(SharedAudioTagsContext);
   const propsWithFreeze = props;
   const {
     startFrom,
@@ -9885,12 +10014,12 @@ var AudioRefForwardingFunction = (props, ref) => {
   if (typeof freeze !== "undefined") {
     throw new TypeError('The "freeze" prop is not supported on <Html5Audio />. Use <Sequence freeze={...}> to freeze media playback.');
   }
-  const { durations, setDurations } = useContext31(DurationsContext);
+  const { durations, setDurations } = useContext33(DurationsContext);
   if (typeof props.src !== "string") {
     throw new TypeError(`The \`<Html5Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
   }
   const preloadedSrc = usePreload(props.src);
-  const onError = useCallback15((e) => {
+  const onError = useCallback16((e) => {
     console.log(e.currentTarget.error);
     const errMessage = `Could not play audio with src ${preloadedSrc}: ${e.currentTarget.error}. See https://remotion.dev/docs/media-playback-error for help.`;
     if (loop) {
@@ -9904,7 +10033,7 @@ var AudioRefForwardingFunction = (props, ref) => {
       console.warn(errMessage);
     }
   }, [loop, onRemotionError, preloadedSrc]);
-  const onDuration = useCallback15((src, durationInSeconds) => {
+  const onDuration = useCallback16((src, durationInSeconds) => {
     setDurations({ type: "got-duration", durationInSeconds, src });
   }, [setDurations]);
   const durationFetched = durations[getAbsoluteSrc(preloadedSrc)] ?? durations[getAbsoluteSrc(props.src)];
@@ -9987,12 +10116,12 @@ var Audio = Html5Audio;
 // src/effects/Solid.tsx
 import {
   forwardRef as forwardRef8,
-  useCallback as useCallback16,
-  useEffect as useEffect16,
+  useCallback as useCallback17,
+  useEffect as useEffect17,
   useImperativeHandle as useImperativeHandle6,
-  useMemo as useMemo31,
+  useMemo as useMemo29,
   useRef as useRef22,
-  useState as useState15
+  useState as useState16
 } from "react";
 import { jsx as jsx25 } from "react/jsx-runtime";
 var resolveSolidPixelDensity = (pixelDensity) => {
@@ -10057,12 +10186,12 @@ var SolidInner = ({
   const resolvedPixelDensity = resolveSolidPixelDensity(pixelDensity);
   const canvasWidth = Math.ceil(width * resolvedPixelDensity);
   const canvasHeight = Math.ceil(height * resolvedPixelDensity);
-  const [outputCanvas, setOutputCanvas] = useState15(null);
+  const [outputCanvas, setOutputCanvas] = useState16(null);
   const memoizedEffects = useMemoizedEffects({
     effects,
     overrideId: overrideId ?? null
   });
-  const sourceCanvas = useMemo31(() => {
+  const sourceCanvas = useMemo29(() => {
     if (typeof document === "undefined") {
       return null;
     }
@@ -10072,7 +10201,7 @@ var SolidInner = ({
     return canvas;
   }, []);
   const chainState = useEffectChainState();
-  const canvasRef = useCallback16((canvas) => {
+  const canvasRef = useCallback17((canvas) => {
     setOutputCanvas(canvas);
     if (typeof reference === "function") {
       reference(canvas);
@@ -10080,7 +10209,7 @@ var SolidInner = ({
       reference.current = canvas;
     }
   }, [reference]);
-  useEffect16(() => {
+  useEffect17(() => {
     if (!outputCanvas || !sourceCanvas) {
       return;
     }
@@ -10130,7 +10259,7 @@ var SolidInner = ({
     cancelRender2,
     memoizedEffects
   ]);
-  const canvasStyle = useMemo31(() => {
+  const canvasStyle = useMemo29(() => {
     return {
       width,
       height,
@@ -10218,12 +10347,12 @@ Solid.displayName = "Solid";
 addSequenceStackTraces(Solid);
 // src/HtmlInCanvas.tsx
 import {
-  createContext as createContext25,
+  createContext as createContext24,
   forwardRef as forwardRef9,
-  useCallback as useCallback17,
-  useContext as useContext32,
-  useLayoutEffect as useLayoutEffect11,
-  useMemo as useMemo32,
+  useCallback as useCallback18,
+  useContext as useContext34,
+  useLayoutEffect as useLayoutEffect12,
+  useMemo as useMemo30,
   useRef as useRef23
 } from "react";
 import { jsx as jsx26 } from "react/jsx-runtime";
@@ -10300,7 +10429,7 @@ var defaultOnPaint = ({
   const transform = ctx.drawElementImage(elementImage, 0, 0);
   element.style.transform = transform.toString();
 };
-var HtmlInCanvasAncestorContext = createContext25(false);
+var HtmlInCanvasAncestorContext = createContext24(false);
 var HtmlInCanvasContent = forwardRef9(({
   width,
   height,
@@ -10312,7 +10441,7 @@ var HtmlInCanvasContent = forwardRef9(({
   controls,
   style
 }, ref) => {
-  const isInsideAncestorHtmlInCanvas = useContext32(HtmlInCanvasAncestorContext);
+  const isInsideAncestorHtmlInCanvas = useContext34(HtmlInCanvasAncestorContext);
   assertHtmlInCanvasDimensions(width, height);
   if (isInsideAncestorHtmlInCanvas) {
     throw new Error("<HtmlInCanvas> components cannot be nested. Chrome does not reliably render nested HTML-in-canvas subtrees. Consider merging the effects into one <HtmlInCanvas> if you can.");
@@ -10331,7 +10460,7 @@ var HtmlInCanvasContent = forwardRef9(({
   const paintTargetRef = useRef23(null);
   const divRef = useRef23(null);
   const canvasSizeKey = `${width}x${height}@${resolvedPixelDensity}-${usesDirectLayoutCanvas ? "direct" : "offscreen"}`;
-  const setLayoutCanvasRef = useCallback17((node) => {
+  const setLayoutCanvasRef = useCallback18((node) => {
     canvas2dRef.current = node;
     if (typeof ref === "function") {
       ref(node);
@@ -10353,7 +10482,7 @@ var HtmlInCanvasContent = forwardRef9(({
   const initializedRef = useRef23(false);
   const onInitCleanupRef = useRef23(null);
   const unmountedRef = useRef23(false);
-  const onPaintCb = useCallback17(async () => {
+  const onPaintCb = useCallback18(async () => {
     const element = divRef.current;
     if (!element) {
       throw new Error("Canvas or scene element not found");
@@ -10476,7 +10605,7 @@ var HtmlInCanvasContent = forwardRef9(({
     resolvedPixelDensity,
     canRetryMissingPaintRecord
   ]);
-  useLayoutEffect11(() => {
+  useLayoutEffect12(() => {
     const placeholder = canvas2dRef.current;
     if (!placeholder) {
       throw new Error("Canvas not found");
@@ -10508,7 +10637,7 @@ var HtmlInCanvasContent = forwardRef9(({
     usesDirectLayoutCanvas
   ]);
   const onPaintChangedRef = useRef23(false);
-  useLayoutEffect11(() => {
+  useLayoutEffect12(() => {
     if (!onPaintChangedRef.current) {
       onPaintChangedRef.current = true;
       return;
@@ -10519,7 +10648,7 @@ var HtmlInCanvasContent = forwardRef9(({
     }
     canvas.requestPaint?.();
   }, [onPaint, memoizedEffects]);
-  useLayoutEffect11(() => {
+  useLayoutEffect12(() => {
     const canvas = canvas2dRef.current;
     if (!canvas) {
       return;
@@ -10532,13 +10661,13 @@ var HtmlInCanvasContent = forwardRef9(({
       continueRender2(handle);
     };
   }, [width, height, continueRender2, delayRender2, canvasSizeKey]);
-  const innerStyle = useMemo32(() => {
+  const innerStyle = useMemo30(() => {
     return {
       width,
       height
     };
   }, [width, height]);
-  const canvasStyle = useMemo32(() => {
+  const canvasStyle = useMemo30(() => {
     return {
       width,
       height,
@@ -10581,7 +10710,7 @@ var HtmlInCanvasInner = forwardRef9(({
 }, ref) => {
   const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
   const actualRef = useRef23(null);
-  const setCanvasRef = useCallback17((node) => {
+  const setCanvasRef = useCallback18((node) => {
     actualRef.current = node;
     if (typeof ref === "function") {
       ref(node);
@@ -10653,13 +10782,13 @@ addSequenceStackTraces(HtmlInCanvas);
 // src/canvas-image/CanvasImage.tsx
 import {
   forwardRef as forwardRef10,
-  useCallback as useCallback18,
-  useContext as useContext33,
+  useCallback as useCallback19,
+  useContext as useContext35,
   useImperativeHandle as useImperativeHandle7,
-  useLayoutEffect as useLayoutEffect12,
-  useMemo as useMemo33,
+  useLayoutEffect as useLayoutEffect13,
+  useMemo as useMemo31,
   useRef as useRef24,
-  useState as useState16
+  useState as useState17
 } from "react";
 
 // src/truncate-src-for-label.ts
@@ -10678,6 +10807,7 @@ import { jsx as jsx27 } from "react/jsx-runtime";
 var canvasImageSchema = {
   src: {
     type: "asset",
+    assetType: "image",
     default: undefined,
     description: "Source",
     keyframable: false
@@ -10790,20 +10920,20 @@ var CanvasImageContent = forwardRef10(({
 }, ref) => {
   const { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
   const { delayPlayback } = useBufferState();
-  const [outputCanvas, setOutputCanvas] = useState16(null);
-  const [loadedImage, setLoadedImage] = useState16(null);
+  const [outputCanvas, setOutputCanvas] = useState17(null);
+  const [loadedImage, setLoadedImage] = useState17(null);
   const actualSrc = usePreload(src);
   const chainState = useEffectChainState();
   const memoizedEffects = useMemoizedEffects({
     effects,
     overrideId: controls?.overrideId ?? null
   });
-  const sequenceContext = useContext33(SequenceContext);
+  const sequenceContext = useContext35(SequenceContext);
   const pendingLoadDelayRef = useRef24(null);
-  const [isLoadPending, setIsLoadPending] = useState16(false);
+  const [isLoadPending, setIsLoadPending] = useState17(false);
   const isPremounting = Boolean(sequenceContext?.premounting);
   const isPostmounting = Boolean(sequenceContext?.postmounting);
-  const continuePendingLoadDelay = useCallback18(({ markAsReady }) => {
+  const continuePendingLoadDelay = useCallback19(({ markAsReady }) => {
     const pending = pendingLoadDelayRef.current;
     if (!pending || pending.continued) {
       return;
@@ -10815,13 +10945,13 @@ var CanvasImageContent = forwardRef10(({
     continueRender2(pending.handle);
     pendingLoadDelayRef.current = null;
   }, [continueRender2]);
-  const sourceCanvas = useMemo33(() => {
+  const sourceCanvas = useMemo31(() => {
     if (typeof document === "undefined") {
       return null;
     }
     return document.createElement("canvas");
   }, []);
-  const canvasRef = useCallback18((canvas) => {
+  const canvasRef = useCallback19((canvas) => {
     setOutputCanvas(canvas);
     if (refForOutline) {
       refForOutline.current = canvas;
@@ -10832,7 +10962,7 @@ var CanvasImageContent = forwardRef10(({
       ref.current = canvas;
     }
   }, [ref, refForOutline]);
-  useLayoutEffect12(() => {
+  useLayoutEffect13(() => {
     if (!pauseWhenLoading || !isLoadPending || isPremounting || isPostmounting) {
       return;
     }
@@ -10844,7 +10974,7 @@ var CanvasImageContent = forwardRef10(({
     isPremounting,
     pauseWhenLoading
   ]);
-  useLayoutEffect12(() => {
+  useLayoutEffect13(() => {
     const handle = delayRender2(`Rendering <CanvasImage> with src="${truncateSrcForLabel(actualSrc)}"`, {
       retries: delayRenderRetries ?? undefined,
       timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
@@ -10906,7 +11036,7 @@ var CanvasImageContent = forwardRef10(({
     maxRetries,
     onError
   ]);
-  useLayoutEffect12(() => {
+  useLayoutEffect13(() => {
     if (!loadedImage || !outputCanvas || !sourceCanvas) {
       return;
     }
@@ -11157,7 +11287,7 @@ var getStaticFiles = () => {
   return window.remotion_staticFiles;
 };
 // src/IFrame.tsx
-import { forwardRef as forwardRef11, useCallback as useCallback19, useState as useState17 } from "react";
+import { forwardRef as forwardRef11, useCallback as useCallback20, useState as useState18 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
 var IFrameRefForwarding = ({
   onLoad,
@@ -11167,15 +11297,15 @@ var IFrameRefForwarding = ({
   ...props2
 }, ref) => {
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const [handle] = useState17(() => delayRender2(`Loading <IFrame> with source ${props2.src}`, {
+  const [handle] = useState18(() => delayRender2(`Loading <IFrame> with source ${props2.src}`, {
     retries: delayRenderRetries ?? undefined,
     timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
   }));
-  const didLoad = useCallback19((e) => {
+  const didLoad = useCallback20((e) => {
     continueRender2(handle);
     onLoad?.(e);
   }, [handle, onLoad, continueRender2]);
-  const didGetError = useCallback19((e) => {
+  const didGetError = useCallback20((e) => {
     continueRender2(handle);
     if (onError) {
       onError(e);
@@ -11194,11 +11324,11 @@ var IFrameRefForwarding = ({
 var IFrame = forwardRef11(IFrameRefForwarding);
 // src/Img.tsx
 import {
-  useCallback as useCallback20,
-  useContext as useContext34,
-  useLayoutEffect as useLayoutEffect13,
+  useCallback as useCallback21,
+  useContext as useContext36,
+  useLayoutEffect as useLayoutEffect14,
   useRef as useRef25,
-  useState as useState18
+  useState as useState19
 } from "react";
 import { jsx as jsx29 } from "react/jsx-runtime";
 function exponentialBackoff2(errorCount) {
@@ -11221,13 +11351,13 @@ var ImgContent = ({
   const imageRef = useRef25(null);
   const errors = useRef25({});
   const { delayPlayback } = useBufferState();
-  const sequenceContext = useContext34(SequenceContext);
-  const [isLoading, setIsLoading] = useState18(false);
+  const sequenceContext = useContext36(SequenceContext);
+  const [isLoading, setIsLoading] = useState19(false);
   const _propsValid = true;
   if (!_propsValid) {
     throw new Error("typecheck error");
   }
-  const imageCallbackRef = useCallback20((img) => {
+  const imageCallbackRef = useCallback21((img) => {
     imageRef.current = img;
     refForOutline.current = img;
     if (typeof ref === "function") {
@@ -11237,7 +11367,7 @@ var ImgContent = ({
     }
   }, [ref, refForOutline]);
   const actualSrc = usePreload(src);
-  const retryIn = useCallback20((timeout) => {
+  const retryIn = useCallback21((timeout) => {
     if (!imageRef.current) {
       return;
     }
@@ -11257,7 +11387,7 @@ var ImgContent = ({
   const { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
   const isPremounting = Boolean(sequenceContext?.premounting);
   const isPostmounting = Boolean(sequenceContext?.postmounting);
-  const didGetError = useCallback20((e) => {
+  const didGetError = useCallback21((e) => {
     if (!errors.current) {
       return;
     }
@@ -11277,7 +11407,7 @@ var ImgContent = ({
     } catch {}
   }, [cancelRender2, maxRetries, onError, retryIn]);
   if (typeof window !== "undefined") {
-    useLayoutEffect13(() => {
+    useLayoutEffect14(() => {
       if (!pauseWhenLoading || !isLoading || isPremounting || isPostmounting) {
         return;
       }
@@ -11289,7 +11419,7 @@ var ImgContent = ({
       isPremounting,
       pauseWhenLoading
     ]);
-    useLayoutEffect13(() => {
+    useLayoutEffect14(() => {
       if (window.process?.env?.NODE_ENV === "test") {
         if (imageRef.current) {
           imageRef.current.src = actualSrc;
@@ -11446,6 +11576,7 @@ var CanvasImageWithPrivateProps = CanvasImage;
 var imgSchema = {
   src: {
     type: "asset",
+    assetType: "image",
     default: undefined,
     description: "Source",
     keyframable: false
@@ -11623,7 +11754,7 @@ var Img = withInteractivitySchema({
 });
 addSequenceStackTraces(Img);
 // src/Interactive.tsx
-import React32, { forwardRef as forwardRef12, useCallback as useCallback21, useRef as useRef26 } from "react";
+import React33, { forwardRef as forwardRef12, useCallback as useCallback22, useRef as useRef26 } from "react";
 import { jsx as jsx30 } from "react/jsx-runtime";
 var sourcePathToIdentityPrefix = (packageName) => {
   if (packageName === "remotion") {
@@ -11717,7 +11848,7 @@ var makeInteractiveElement = (tag, displayName, schema) => {
       componentName: displayName
     });
     const refForOutline = useRef26(null);
-    const callbackRef = useCallback21((element) => {
+    const callbackRef = useCallback22((element) => {
       refForOutline.current = element;
       setRef2(ref, element);
     }, [ref]);
@@ -11733,7 +11864,7 @@ var makeInteractiveElement = (tag, displayName, schema) => {
       controls,
       _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/interactive",
       outlineRef: refForOutline,
-      children: React32.createElement(tag, {
+      children: React33.createElement(tag, {
         ...props2,
         style: croppedStyle ?? undefined,
         ref: callbackRef
@@ -11849,18 +11980,21 @@ var getAnimatedImageDurationInSeconds = async ({
 };
 
 // src/CompositionManager.tsx
-import React33 from "react";
-var compositionsRef = React33.createRef();
+import React34 from "react";
+var compositionsRef = React34.createRef();
 
 // src/CompositionManagerProvider.tsx
 import {
-  useCallback as useCallback22,
+  useCallback as useCallback23,
+  useEffect as useEffect18,
   useImperativeHandle as useImperativeHandle8,
-  useMemo as useMemo34,
+  useLayoutEffect as useLayoutEffect15,
+  useMemo as useMemo32,
   useRef as useRef27,
-  useState as useState19
+  useState as useState20
 } from "react";
 import { jsx as jsx31 } from "react/jsx-runtime";
+var useIsomorphicLayoutEffect2 = typeof window === "undefined" ? useEffect18 : useLayoutEffect15;
 var CompositionManagerProvider = ({
   children,
   onlyRenderComposition,
@@ -11868,55 +12002,157 @@ var CompositionManagerProvider = ({
   initialCompositions,
   initialCanvasContent
 }) => {
-  const [folders, setFolders] = useState19([]);
-  const [canvasContent, setCanvasContent] = useState19(initialCanvasContent);
-  const [currentAssetMetadata, setCurrentAssetMetadata] = useState19(null);
-  const [compositions, setCompositions] = useState19(initialCompositions);
+  const { isStudio } = useRemotionEnvironment();
+  const [compositionManagerId] = useState20(() => String(Math.random()));
+  const committedOrderRef = useRef27(null);
+  const committedOrderIdsRef = useRef27(null);
+  const internalOrderRef = useRef27(new Map(initialCompositions.map((composition, index) => [
+    getCompositionAndFolderOrderKey({
+      type: "composition",
+      id: composition.id
+    }),
+    index
+  ])));
+  const nextInternalOrderRef = useRef27(initialCompositions.length);
+  const [folders, setFolders] = useState20([]);
+  const [canvasContent, setCanvasContent] = useState20(initialCanvasContent);
+  const [currentAssetMetadata, setCurrentAssetMetadata] = useState20(null);
+  const [compositions, setCompositions] = useState20(() => initialCompositions.map((composition, order) => ({ ...composition, order })));
   const currentcompositionsRef = useRef27(compositions);
-  const updateCompositions = useCallback22((updateComps) => {
+  const updateCompositions = useCallback23((updateComps) => {
     setCompositions((comps) => {
       const updated = updateComps(comps);
       currentcompositionsRef.current = updated;
       return updated;
     });
   }, []);
-  const registerComposition = useCallback22((comp) => {
+  const registerComposition = useCallback23((comp) => {
+    const orderKey = getCompositionAndFolderOrderKey({
+      type: "composition",
+      id: comp.id
+    });
+    const internalOrder = nextInternalOrderRef.current++;
+    internalOrderRef.current.set(orderKey, internalOrder);
     updateCompositions((comps) => {
       if (comps.find((c2) => c2.id === comp.id)) {
         throw new Error(`Multiple composition with id ${comp.id} are registered.`);
       }
-      return [...comps, comp];
+      return [
+        ...comps,
+        {
+          ...comp,
+          order: committedOrderRef.current?.get(orderKey) ?? internalOrder
+        }
+      ];
     });
   }, [updateCompositions]);
-  const unregisterComposition = useCallback22((id) => {
+  const unregisterComposition = useCallback23((id) => {
+    internalOrderRef.current.delete(getCompositionAndFolderOrderKey({ type: "composition", id }));
     setCompositions((comps) => {
       return comps.filter((c2) => c2.id !== id);
     });
   }, []);
-  const registerFolder = useCallback22((name, parent, nonce, stack) => {
+  const registerFolder = useCallback23((name, parent, stack) => {
+    const orderKey = getCompositionAndFolderOrderKey({
+      type: "folder",
+      id: getFolderOrderId({ name, parent })
+    });
+    const internalOrder = nextInternalOrderRef.current++;
+    internalOrderRef.current.set(orderKey, internalOrder);
     setFolders((prevFolders) => {
       return [
         ...prevFolders,
         {
           name,
           parent,
-          nonce,
+          order: committedOrderRef.current?.get(orderKey) ?? internalOrder,
           stack
         }
       ];
     });
   }, []);
-  const unregisterFolder = useCallback22((name, parent) => {
+  const unregisterFolder = useCallback23((name, parent) => {
+    internalOrderRef.current.delete(getCompositionAndFolderOrderKey({
+      type: "folder",
+      id: getFolderOrderId({ name, parent })
+    }));
     setFolders((prevFolders) => {
       return prevFolders.filter((p) => !(p.name === name && p.parent === parent));
     });
   }, []);
+  useIsomorphicLayoutEffect2(() => {
+    if (!isStudio) {
+      return;
+    }
+    let unmounted = false;
+    const onCommitOrder = (event) => {
+      const { detail } = event;
+      const managerOrder = detail.compositionManagers.find((item) => item.managerId === compositionManagerId);
+      if (!managerOrder) {
+        return;
+      }
+      const orderIds = managerOrder.compositionAndFolderOrder.map(getCompositionAndFolderOrderKey);
+      const previousOrder = committedOrderIdsRef.current;
+      if (previousOrder !== null && previousOrder.length === orderIds.length && previousOrder.every((id, index) => id === orderIds[index])) {
+        return;
+      }
+      const order = new Map(orderIds.map((id, index) => [id, index]));
+      committedOrderIdsRef.current = orderIds;
+      committedOrderRef.current = order;
+      queueMicrotask(() => {
+        if (unmounted) {
+          return;
+        }
+        updateCompositions((currentCompositions) => {
+          let changed = false;
+          const nextCompositions = currentCompositions.map((composition) => {
+            const nextOrder = order.get(getCompositionAndFolderOrderKey({
+              type: "composition",
+              id: composition.id
+            })) ?? internalOrderRef.current.get(getCompositionAndFolderOrderKey({
+              type: "composition",
+              id: composition.id
+            })) ?? composition.order;
+            if (nextOrder === composition.order) {
+              return composition;
+            }
+            changed = true;
+            return { ...composition, order: nextOrder };
+          });
+          return changed ? nextCompositions : currentCompositions;
+        });
+        setFolders((currentFolders) => {
+          let changed = false;
+          const nextFolders = currentFolders.map((folder) => {
+            const nextOrder = order.get(getCompositionAndFolderOrderKey({
+              type: "folder",
+              id: getFolderOrderId(folder)
+            })) ?? internalOrderRef.current.get(getCompositionAndFolderOrderKey({
+              type: "folder",
+              id: getFolderOrderId(folder)
+            })) ?? folder.order;
+            if (nextOrder === folder.order) {
+              return folder;
+            }
+            changed = true;
+            return { ...folder, order: nextOrder };
+          });
+          return changed ? nextFolders : currentFolders;
+        });
+      });
+    };
+    window.addEventListener(COMMIT_ORDER_EVENT, onCommitOrder);
+    return () => {
+      unmounted = true;
+      window.removeEventListener(COMMIT_ORDER_EVENT, onCommitOrder);
+    };
+  }, [compositionManagerId, isStudio, updateCompositions]);
   useImperativeHandle8(compositionsRef, () => {
     return {
       getCompositions: () => currentcompositionsRef.current
     };
   }, []);
-  const compositionManagerSetters = useMemo34(() => {
+  const compositionManagerSetters = useMemo32(() => {
     return {
       registerComposition,
       unregisterComposition,
@@ -11933,7 +12169,7 @@ var CompositionManagerProvider = ({
     unregisterFolder,
     onlyRenderComposition
   ]);
-  const compositionManagerContextValue = useMemo34(() => {
+  const compositionManagerContextValue = useMemo32(() => {
     return {
       compositions,
       folders,
@@ -11948,13 +12184,17 @@ var CompositionManagerProvider = ({
     currentAssetMetadata,
     canvasContent
   ]);
-  return /* @__PURE__ */ jsx31(CompositionManager.Provider, {
+  const providers = /* @__PURE__ */ jsx31(CompositionManager.Provider, {
     value: compositionManagerContextValue,
     children: /* @__PURE__ */ jsx31(CompositionSetters.Provider, {
       value: compositionManagerSetters,
       children
     })
   });
+  return isStudio ? /* @__PURE__ */ jsx31(CompositionManagerOrderMarker, {
+    managerId: compositionManagerId,
+    children: providers
+  }) : providers;
 };
 
 // src/default-css.ts
@@ -12024,8 +12264,8 @@ var getPreviewDomElement = () => {
 };
 
 // src/max-video-cache-size.ts
-import React34 from "react";
-var MaxMediaCacheSizeContext = React34.createContext(null);
+import React35 from "react";
+var MaxMediaCacheSizeContext = React35.createContext(null);
 
 // src/media-resource-manager.ts
 var disposeResource = (resource) => {
@@ -12174,14 +12414,14 @@ var waitForRoot = (fn) => {
 };
 
 // src/RemotionRoot.tsx
-import { useMemo as useMemo36 } from "react";
+import { useMemo as useMemo34 } from "react";
 
 // src/use-media-enabled.tsx
-import { createContext as createContext26, useContext as useContext35, useMemo as useMemo35 } from "react";
+import { createContext as createContext25, useContext as useContext37, useMemo as useMemo33 } from "react";
 import { jsx as jsx32 } from "react/jsx-runtime";
-var MediaEnabledContext = createContext26(null);
+var MediaEnabledContext = createContext25(null);
 var useVideoEnabled = () => {
-  const context = useContext35(MediaEnabledContext);
+  const context = useContext37(MediaEnabledContext);
   if (!context) {
     return window.remotion_videoEnabled;
   }
@@ -12191,7 +12431,7 @@ var useVideoEnabled = () => {
   return context.videoEnabled;
 };
 var useAudioEnabled = () => {
-  const context = useContext35(MediaEnabledContext);
+  const context = useContext37(MediaEnabledContext);
   if (!context) {
     return window.remotion_audioEnabled;
   }
@@ -12205,7 +12445,7 @@ var MediaEnabledProvider = ({
   videoEnabled,
   audioEnabled
 }) => {
-  const value = useMemo35(() => ({ videoEnabled, audioEnabled }), [videoEnabled, audioEnabled]);
+  const value = useMemo33(() => ({ videoEnabled, audioEnabled }), [videoEnabled, audioEnabled]);
   return /* @__PURE__ */ jsx32(MediaEnabledContext.Provider, {
     value,
     children
@@ -12225,38 +12465,29 @@ var RemotionRootContexts = ({
   frameState,
   _experimentalKeepAudioContextAlive
 }) => {
-  const nonceContext = useMemo36(() => {
-    let counter = 0;
-    return {
-      getNonce: () => counter++
-    };
-  }, []);
-  const logging = useMemo36(() => {
+  const logging = useMemo34(() => {
     return { logLevel, mountTime: Date.now() };
   }, [logLevel]);
   return /* @__PURE__ */ jsx33(LogLevelContext.Provider, {
     value: logging,
-    children: /* @__PURE__ */ jsx33(NonceContext.Provider, {
-      value: nonceContext,
-      children: /* @__PURE__ */ jsx33(TimelineContextProvider, {
-        frameState,
-        children: /* @__PURE__ */ jsx33(MediaEnabledProvider, {
-          videoEnabled,
-          audioEnabled,
-          children: /* @__PURE__ */ jsx33(EditorPropsProvider, {
-            children: /* @__PURE__ */ jsx33(PrefetchProvider, {
-              children: /* @__PURE__ */ jsx33(SequenceManagerProvider, {
-                children: /* @__PURE__ */ jsx33(DurationsContextProvider, {
-                  children: /* @__PURE__ */ jsx33(BufferingProvider, {
-                    children: /* @__PURE__ */ jsx33(SharedAudioContextProvider, {
-                      audioLatencyHint,
-                      audioEnabled,
-                      previewSampleRate,
-                      _experimentalKeepAudioContextAlive,
-                      children: /* @__PURE__ */ jsx33(SharedAudioTagsContextProvider, {
-                        numberOfAudioTags,
-                        children
-                      })
+    children: /* @__PURE__ */ jsx33(TimelineContextProvider, {
+      frameState,
+      children: /* @__PURE__ */ jsx33(MediaEnabledProvider, {
+        videoEnabled,
+        audioEnabled,
+        children: /* @__PURE__ */ jsx33(EditorPropsProvider, {
+          children: /* @__PURE__ */ jsx33(PrefetchProvider, {
+            children: /* @__PURE__ */ jsx33(SequenceManagerProvider, {
+              children: /* @__PURE__ */ jsx33(DurationsContextProvider, {
+                children: /* @__PURE__ */ jsx33(BufferingProvider, {
+                  children: /* @__PURE__ */ jsx33(SharedAudioContextProvider, {
+                    audioLatencyHint,
+                    audioEnabled,
+                    previewSampleRate,
+                    _experimentalKeepAudioContextAlive,
+                    children: /* @__PURE__ */ jsx33(SharedAudioTagsContextProvider, {
+                      numberOfAudioTags,
+                      children
                     })
                   })
                 })
@@ -12270,7 +12501,7 @@ var RemotionRootContexts = ({
 };
 
 // src/render-resource-manager.ts
-import React36 from "react";
+import React37 from "react";
 var makeRenderResourceManager = () => {
   const resources = new Map;
   let disposed = false;
@@ -12311,7 +12542,7 @@ var makeRenderResourceManager = () => {
     }
   };
 };
-var RenderResourceManagerContext = React36.createContext(null);
+var RenderResourceManagerContext = React37.createContext(null);
 
 // src/codec.ts
 var validCodecs = [
@@ -12502,8 +12733,8 @@ var resolveVideoConfigOrCatch = (params) => {
 };
 
 // src/sequence-stack-traces.ts
-import React37 from "react";
-var SequenceStackTracesUpdateContext = React37.createContext(() => {});
+import React38 from "react";
+var SequenceStackTracesUpdateContext = React38.createContext(() => {});
 
 // src/setup-env-variables.ts
 var getEnvVariables = () => {
@@ -12533,8 +12764,8 @@ var setupEnvVariables = () => {
 };
 
 // src/use-pixel-density.ts
-import React38, { useContext as useContext36 } from "react";
-var PixelDensityContext = React38.createContext(null);
+import React39, { useContext as useContext38 } from "react";
+var PixelDensityContext = React39.createContext(null);
 var getBrowserPixelDensity = () => {
   if (typeof window === "undefined") {
     return 1;
@@ -12542,8 +12773,8 @@ var getBrowserPixelDensity = () => {
   return window.devicePixelRatio || 1;
 };
 var usePixelDensity = (options) => {
-  const pixelDensity = useContext36(PixelDensityContext);
-  const canUseRemotionHooks = useContext36(CanUseRemotionHooks);
+  const pixelDensity = useContext38(PixelDensityContext);
+  const canUseRemotionHooks = useContext38(CanUseRemotionHooks);
   if (pixelDensity !== null) {
     return pixelDensity;
   }
@@ -12560,16 +12791,16 @@ var usePixelDensity = (options) => {
 };
 
 // src/video/OffthreadVideo.tsx
-import { useCallback as useCallback25 } from "react";
+import { useCallback as useCallback26 } from "react";
 
 // src/video/OffthreadVideoForRendering.tsx
 import {
-  useCallback as useCallback23,
-  useContext as useContext37,
-  useEffect as useEffect17,
-  useLayoutEffect as useLayoutEffect14,
-  useMemo as useMemo37,
-  useState as useState20
+  useCallback as useCallback24,
+  useContext as useContext39,
+  useEffect as useEffect19,
+  useLayoutEffect as useLayoutEffect16,
+  useMemo as useMemo35,
+  useState as useState21
 } from "react";
 
 // src/video/offthread-video-source.ts
@@ -12608,13 +12839,13 @@ var OffthreadVideoForRendering = ({
   const frame = useCurrentFrame();
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior);
   const videoConfig = useUnsafeVideoConfig();
-  const sequenceContext = useContext37(SequenceContext);
+  const sequenceContext = useContext39(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext37(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext39(RenderAssetManager);
   if (!src) {
     throw new TypeError("No `src` was passed to <OffthreadVideo>.");
   }
-  const id = useMemo37(() => `offthreadvideo-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo35(() => `offthreadvideo-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,
@@ -12629,7 +12860,7 @@ var OffthreadVideoForRendering = ({
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useEffect17(() => {
+  useEffect19(() => {
     if (!src) {
       throw new Error("No src passed");
     }
@@ -12669,14 +12900,14 @@ var OffthreadVideoForRendering = ({
     sequenceContext?.cumulatedNegativeFrom,
     audioStreamIndex
   ]);
-  const currentTime = useMemo37(() => {
+  const currentTime = useMemo35(() => {
     return getExpectedMediaFrameUncorrected({
       frame,
       playbackRate: playbackRate || 1,
       startFrom: -mediaStartsAt
     }) / videoConfig.fps;
   }, [frame, mediaStartsAt, playbackRate, videoConfig.fps]);
-  const actualSrc = useMemo37(() => {
+  const actualSrc = useMemo35(() => {
     return getOffthreadVideoSource({
       src,
       currentTime,
@@ -12684,9 +12915,9 @@ var OffthreadVideoForRendering = ({
       toneMapped
     });
   }, [toneMapped, currentTime, src, transparent]);
-  const [imageSrc, setImageSrc] = useState20(null);
+  const [imageSrc, setImageSrc] = useState21(null);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  useLayoutEffect14(() => {
+  useLayoutEffect16(() => {
     if (!window.remotion_videoEnabled) {
       return;
     }
@@ -12757,17 +12988,17 @@ var OffthreadVideoForRendering = ({
     continueRender2,
     delayRender2
   ]);
-  const onErr = useCallback23(() => {
+  const onErr = useCallback24(() => {
     if (onError) {
       onError?.(new Error("Failed to load image with src " + imageSrc));
     } else {
       cancelRender("Failed to load image with src " + imageSrc);
     }
   }, [imageSrc, onError]);
-  const className = useMemo37(() => {
+  const className = useMemo35(() => {
     return [OBJECTFIT_CONTAIN_CLASS_NAME, props2.className].filter(truthy).join(" ");
   }, [props2.className]);
-  const onImageFrame = useCallback23((img) => {
+  const onImageFrame = useCallback24((img) => {
     if (onVideoFrame) {
       onVideoFrame(img);
     }
@@ -12788,24 +13019,24 @@ var OffthreadVideoForRendering = ({
 };
 
 // src/video/VideoForPreview.tsx
-import React40, {
+import React41, {
   forwardRef as forwardRef13,
-  useCallback as useCallback24,
-  useContext as useContext38,
-  useEffect as useEffect19,
+  useCallback as useCallback25,
+  useContext as useContext40,
+  useEffect as useEffect21,
   useImperativeHandle as useImperativeHandle9,
-  useMemo as useMemo38,
+  useMemo as useMemo36,
   useRef as useRef28,
-  useState as useState21
+  useState as useState22
 } from "react";
 
 // src/video/emit-video-frame.ts
-import { useEffect as useEffect18 } from "react";
+import { useEffect as useEffect20 } from "react";
 var useEmitVideoFrame = ({
   ref,
   onVideoFrame
 }) => {
-  useEffect18(() => {
+  useEffect20(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -12847,12 +13078,12 @@ class MediaPlaybackError extends Error {
 // src/video/VideoForPreview.tsx
 import { jsx as jsx35 } from "react/jsx-runtime";
 var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
-  const context = useContext38(SharedAudioContext);
+  const context = useContext40(SharedAudioContext);
   if (!context) {
     throw new Error("SharedAudioContext not found");
   }
   const videoRef = useRef28(null);
-  const sharedSource = useMemo38(() => {
+  const sharedSource = useMemo36(() => {
     if (!context.audioContext) {
       return null;
     }
@@ -12861,7 +13092,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       ref: videoRef
     });
   }, [context.audioContext]);
-  const effectToUse = React40.useInsertionEffect ?? React40.useLayoutEffect;
+  const effectToUse = React41.useInsertionEffect ?? React41.useLayoutEffect;
   effectToUse(() => {
     return () => {
       requestAnimationFrame(() => {
@@ -12904,10 +13135,11 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   }
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const { fps, durationInFrames } = useVideoConfig();
-  const parentSequence = useContext38(SequenceContext);
+  const parentSequence = useContext40(SequenceContext);
+  const { isStudio } = useRemotionEnvironment();
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
-  const [timelineId] = useState21(() => String(Math.random()));
+  const [timelineId] = useState22(() => String(Math.random()));
   if (typeof acceptableTimeShift !== "undefined") {
     throw new Error("acceptableTimeShift has been removed. Use acceptableTimeShiftInSeconds instead.");
   }
@@ -12919,7 +13151,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     mediaVolume
   });
   warnAboutTooHighVolume(userPreferredVolume);
-  const getStack = useCallback24(() => {
+  const getStack = useCallback25(() => {
     return _remotionInternalStack ?? null;
   }, [_remotionInternalStack]);
   useMediaInTimeline({
@@ -12979,13 +13211,13 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   useImperativeHandle9(ref, () => {
     return videoRef.current;
   }, []);
-  useState21(() => playbackLogging({
+  useState22(() => playbackLogging({
     logLevel,
     message: `Mounting video with source = ${actualSrc}, v=${VERSION}, user agent=${typeof navigator === "undefined" ? "server" : navigator.userAgent}`,
     tag: "video",
     mountTime
   }));
-  useEffect19(() => {
+  useEffect21(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -13028,7 +13260,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   const currentOnDurationCallback = useRef28(onDuration);
   currentOnDurationCallback.current = onDuration;
   useEmitVideoFrame({ ref: videoRef, onVideoFrame });
-  useEffect19(() => {
+  useEffect21(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -13045,7 +13277,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.removeEventListener("loadedmetadata", onLoadedMetadata);
     };
   }, [src]);
-  useEffect19(() => {
+  useEffect21(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -13056,7 +13288,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.preload = "auto";
     }
   }, []);
-  const actualStyle = useMemo38(() => {
+  const actualStyle = useMemo36(() => {
     return {
       ...style
     };
@@ -13066,7 +13298,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     requestsVideoFrame: Boolean(onVideoFrame),
     isClientSideRendering: false
   });
-  return /* @__PURE__ */ jsx35("video", {
+  const video = /* @__PURE__ */ jsx35("video", {
     ...nativeProps,
     ref: videoRef,
     muted: muted || playerMuted || userPreferredVolume <= 0,
@@ -13078,6 +13310,10 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     crossOrigin: crossOriginValue,
     controls: false
   });
+  return isStudio ? /* @__PURE__ */ jsx35(SequenceOrderMarker, {
+    sequenceId: timelineId,
+    children: video
+  }) : video;
 };
 var VideoForPreview = forwardRef13(VideoForDevelopmentRefForwardingFunction);
 
@@ -13100,7 +13336,7 @@ var InnerOffthreadVideo = (props2) => {
   if (environment.isClientSideRendering) {
     throw new Error("<OffthreadVideo> is not supported in @remotion/web-renderer. Use <Video> from @remotion/media instead. See https://remotion.dev/docs/client-side-rendering/limitations");
   }
-  const onDuration = useCallback25(() => {
+  const onDuration = useCallback26(() => {
     return;
   }, []);
   if (typeof props2.src !== "string") {
@@ -13279,31 +13515,27 @@ var watchStaticFile = (fileName, callback) => {
 };
 
 // src/wrap-remotion-context.tsx
-import React42, { useMemo as useMemo39 } from "react";
+import React43, { useMemo as useMemo37 } from "react";
 import { jsx as jsx37 } from "react/jsx-runtime";
 function useRemotionContexts() {
-  const compositionManagerCtx = React42.useContext(CompositionManager);
-  const timelineContext = React42.useContext(TimelineContext);
-  const timelineImperativeContext = React42.useContext(TimelineImperativeContext);
-  const setTimelineContext = React42.useContext(SetTimelineContext);
-  const sequenceContext = React42.useContext(SequenceContext);
-  const nonceContext = React42.useContext(NonceContext);
-  const canUseRemotionHooksContext = React42.useContext(CanUseRemotionHooks);
-  const preloadContext = React42.useContext(PreloadContext);
-  const resolveCompositionContext = React42.useContext(ResolveCompositionContext);
-  const renderAssetManagerContext = React42.useContext(RenderAssetManager);
-  const sequenceManagerContext = React42.useContext(SequenceManager);
-  const sequenceManagerRefContext = React42.useContext(SequenceManagerRefContext);
-  const visualModePropStatusesRefContext = React42.useContext(VisualModePropStatusesRefContext);
-  const bufferManagerContext = React42.useContext(BufferingContextReact);
-  const logLevelContext = React42.useContext(LogLevelContext);
-  return useMemo39(() => ({
+  const compositionManagerCtx = React43.useContext(CompositionManager);
+  const timelineContext = React43.useContext(TimelineContext);
+  const setTimelineContext = React43.useContext(SetTimelineContext);
+  const sequenceContext = React43.useContext(SequenceContext);
+  const canUseRemotionHooksContext = React43.useContext(CanUseRemotionHooks);
+  const preloadContext = React43.useContext(PreloadContext);
+  const resolveCompositionContext = React43.useContext(ResolveCompositionContext);
+  const renderAssetManagerContext = React43.useContext(RenderAssetManager);
+  const sequenceManagerContext = React43.useContext(SequenceManager);
+  const sequenceManagerRefContext = React43.useContext(SequenceManagerRefContext);
+  const visualModePropStatusesRefContext = React43.useContext(VisualModePropStatusesRefContext);
+  const bufferManagerContext = React43.useContext(BufferingContextReact);
+  const logLevelContext = React43.useContext(LogLevelContext);
+  return useMemo37(() => ({
     compositionManagerCtx,
     timelineContext,
-    timelineImperativeContext,
     setTimelineContext,
     sequenceContext,
-    nonceContext,
     canUseRemotionHooksContext,
     preloadContext,
     resolveCompositionContext,
@@ -13315,11 +13547,9 @@ function useRemotionContexts() {
     logLevelContext
   }), [
     compositionManagerCtx,
-    nonceContext,
     sequenceContext,
     setTimelineContext,
     timelineContext,
-    timelineImperativeContext,
     canUseRemotionHooksContext,
     preloadContext,
     resolveCompositionContext,
@@ -13337,35 +13567,29 @@ var RemotionContextProvider = (props2) => {
     value: contexts.logLevelContext,
     children: /* @__PURE__ */ jsx37(CanUseRemotionHooks.Provider, {
       value: contexts.canUseRemotionHooksContext,
-      children: /* @__PURE__ */ jsx37(NonceContext.Provider, {
-        value: contexts.nonceContext,
-        children: /* @__PURE__ */ jsx37(PreloadContext.Provider, {
-          value: contexts.preloadContext,
-          children: /* @__PURE__ */ jsx37(CompositionManager.Provider, {
-            value: contexts.compositionManagerCtx,
-            children: /* @__PURE__ */ jsx37(SequenceManagerRefContext.Provider, {
-              value: contexts.sequenceManagerRefContext,
-              children: /* @__PURE__ */ jsx37(SequenceManager.Provider, {
-                value: contexts.sequenceManagerContext,
-                children: /* @__PURE__ */ jsx37(VisualModePropStatusesRefContext.Provider, {
-                  value: contexts.visualModePropStatusesRefContext,
-                  children: /* @__PURE__ */ jsx37(RenderAssetManager.Provider, {
-                    value: contexts.renderAssetManagerContext,
-                    children: /* @__PURE__ */ jsx37(ResolveCompositionContext.Provider, {
-                      value: contexts.resolveCompositionContext,
-                      children: /* @__PURE__ */ jsx37(TimelineImperativeContext.Provider, {
-                        value: contexts.timelineImperativeContext,
-                        children: /* @__PURE__ */ jsx37(TimelineContext.Provider, {
-                          value: contexts.timelineContext,
-                          children: /* @__PURE__ */ jsx37(SetTimelineContext.Provider, {
-                            value: contexts.setTimelineContext,
-                            children: /* @__PURE__ */ jsx37(SequenceContext.Provider, {
-                              value: contexts.sequenceContext,
-                              children: /* @__PURE__ */ jsx37(BufferingContextReact.Provider, {
-                                value: contexts.bufferManagerContext,
-                                children
-                              })
-                            })
+      children: /* @__PURE__ */ jsx37(PreloadContext.Provider, {
+        value: contexts.preloadContext,
+        children: /* @__PURE__ */ jsx37(CompositionManager.Provider, {
+          value: contexts.compositionManagerCtx,
+          children: /* @__PURE__ */ jsx37(SequenceManagerRefContext.Provider, {
+            value: contexts.sequenceManagerRefContext,
+            children: /* @__PURE__ */ jsx37(SequenceManager.Provider, {
+              value: contexts.sequenceManagerContext,
+              children: /* @__PURE__ */ jsx37(VisualModePropStatusesRefContext.Provider, {
+                value: contexts.visualModePropStatusesRefContext,
+                children: /* @__PURE__ */ jsx37(RenderAssetManager.Provider, {
+                  value: contexts.renderAssetManagerContext,
+                  children: /* @__PURE__ */ jsx37(ResolveCompositionContext.Provider, {
+                    value: contexts.resolveCompositionContext,
+                    children: /* @__PURE__ */ jsx37(TimelineContext.Provider, {
+                      value: contexts.timelineContext,
+                      children: /* @__PURE__ */ jsx37(SetTimelineContext.Provider, {
+                        value: contexts.setTimelineContext,
+                        children: /* @__PURE__ */ jsx37(SequenceContext.Provider, {
+                          value: contexts.sequenceContext,
+                          children: /* @__PURE__ */ jsx37(BufferingContextReact.Provider, {
+                            value: contexts.bufferManagerContext,
+                            children
                           })
                         })
                       })
@@ -13392,6 +13616,7 @@ var Internals = {
   MEDIABUNNY_DURATION_VALUE_KEY,
   makeRenderResourceManager,
   RenderResourceManagerContext,
+  createRuntimeValueStore,
   useUnsafeVideoConfig,
   useFrameForVolumeProp,
   useTimelinePosition,
@@ -13415,6 +13640,7 @@ var Internals = {
   SequenceManagerProvider,
   SequenceManagerRefContext,
   SequenceRegistrationContext,
+  CommitOrderInternals,
   SequenceStackTracesUpdateContext,
   baseSchema,
   sequenceSchema,
@@ -13472,7 +13698,6 @@ var Internals = {
   EditorPropsProvider,
   EditorPropsContext,
   usePreload,
-  NonceContext,
   resolveVideoConfig,
   resolveVideoConfigOrCatch,
   resolveVideoConfigWithMetadataOrCatch,
@@ -13518,11 +13743,11 @@ var Internals = {
   setInputPropsOverride,
   useVideoEnabled,
   useAudioEnabled,
-  useIsPlayerBuffering,
+  useBuffering,
   TimelinePosition: exports_timeline_position_state,
   DelayRenderContextType,
   TimelineContext,
-  TimelineImperativeContext,
+  usePlaying,
   PlaybackRateContext,
   AbsoluteTimeContext,
   RenderAssetManagerProvider,
@@ -13556,18 +13781,19 @@ var Internals = {
   resolveSequenceCrop,
   useCropStyle
 };
+Object.assign(Internals, { useSyncExternalStore: useSyncExternalStore2 });
 // src/series/index.tsx
-import React44, {
+import React45, {
   forwardRef as forwardRef14,
-  useMemo as useMemo40
+  useMemo as useMemo38
 } from "react";
 
 // src/series/flatten-children.tsx
-import React43 from "react";
+import React44 from "react";
 var flattenChildren = (children) => {
-  const childrenArray = React43.Children.toArray(children);
+  const childrenArray = React44.Children.toArray(children);
   return childrenArray.reduce((flatChildren, child) => {
-    if (child.type === React43.Fragment) {
+    if (child.type === React44.Fragment) {
       return flatChildren.concat(flattenChildren(child.props.children));
     }
     flatChildren.push(child);
@@ -13629,7 +13855,7 @@ var validateSeriesSequenceProps = ({
   return offset;
 };
 var SeriesInner = (props2) => {
-  const childrenValue = useMemo40(() => {
+  const childrenValue = useMemo38(() => {
     const flattenedChildren = flattenChildren(props2.children);
     const renderChildren = (i, startFrame) => {
       if (i === flattenedChildren.length) {
@@ -13653,7 +13879,7 @@ var SeriesInner = (props2) => {
         index: i,
         childrenLength: flattenedChildren.length
       });
-      return React44.cloneElement(castedElement, {
+      return React45.cloneElement(castedElement, {
         _remotionInternalRender: (resolvedProps, ref) => {
           const durationInFramesProp = resolvedProps.durationInFrames;
           const {
@@ -13812,27 +14038,27 @@ var staticFile = (path) => {
   return preparsed;
 };
 // src/Still.tsx
-import React45 from "react";
+import React46 from "react";
 var Still = (props2) => {
   const newProps = {
     ...props2,
     durationInFrames: 1,
     fps: 1
   };
-  return React45.createElement(Composition, newProps);
+  return React46.createElement(Composition, newProps);
 };
 addSequenceStackTraces(Still);
 // src/video/html5-video.tsx
-import { forwardRef as forwardRef16, useCallback as useCallback26, useContext as useContext40 } from "react";
+import { forwardRef as forwardRef16, useCallback as useCallback27, useContext as useContext42 } from "react";
 
 // src/video/VideoForRendering.tsx
 import {
   forwardRef as forwardRef15,
-  useContext as useContext39,
-  useEffect as useEffect20,
+  useContext as useContext41,
+  useEffect as useEffect22,
   useImperativeHandle as useImperativeHandle10,
-  useLayoutEffect as useLayoutEffect15,
-  useMemo as useMemo41,
+  useLayoutEffect as useLayoutEffect17,
+  useMemo as useMemo39,
   useRef as useRef29
 } from "react";
 
@@ -13984,14 +14210,14 @@ var VideoForRenderingForwardFunction = ({
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const videoConfig = useUnsafeVideoConfig();
   const videoRef = useRef29(null);
-  const sequenceContext = useContext39(SequenceContext);
+  const sequenceContext = useContext41(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
   const environment = useRemotionEnvironment();
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext39(RenderAssetManager);
-  const id = useMemo41(() => `video-${random(props2.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+  const { registerRenderAsset, unregisterRenderAsset } = useContext41(RenderAssetManager);
+  const id = useMemo39(() => `video-${random(props2.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     props2.src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,
@@ -14006,7 +14232,7 @@ var VideoForRenderingForwardFunction = ({
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useEffect20(() => {
+  useEffect22(() => {
     if (!props2.src) {
       throw new Error("No src passed");
     }
@@ -14050,7 +14276,7 @@ var VideoForRenderingForwardFunction = ({
     return videoRef.current;
   }, []);
   useEmitVideoFrame({ ref: videoRef, onVideoFrame });
-  useEffect20(() => {
+  useEffect22(() => {
     if (!window.remotion_videoEnabled) {
       return;
     }
@@ -14140,7 +14366,7 @@ var VideoForRenderingForwardFunction = ({
   ]);
   const { src } = props2;
   if (environment.isRendering) {
-    useLayoutEffect15(() => {
+    useLayoutEffect17(() => {
       if (window.process?.env?.NODE_ENV === "test") {
         return;
       }
@@ -14206,7 +14432,7 @@ var VideoForwardingFunction = (props2, ref) => {
   if (environment.isClientSideRendering) {
     throw new Error("<Html5Video> is not supported in @remotion/web-renderer. Use <Video> from @remotion/media instead. See https://remotion.dev/docs/client-side-rendering/limitations");
   }
-  const { durations, setDurations } = useContext40(DurationsContext);
+  const { durations, setDurations } = useContext42(DurationsContext);
   if (typeof ref === "string") {
     throw new Error("string refs are not supported");
   }
@@ -14214,7 +14440,7 @@ var VideoForwardingFunction = (props2, ref) => {
     throw new TypeError(`The \`<Html5Video>\` tag requires a string for \`src\`, but got ${JSON.stringify(props2.src)} instead.`);
   }
   const preloadedSrc = usePreload(props2.src);
-  const onDuration = useCallback26((src, durationInSeconds) => {
+  const onDuration = useCallback27((src, durationInSeconds) => {
     setDurations({ type: "got-duration", durationInSeconds, src });
   }, [setDurations]);
   const durationFetched = durations[getAbsoluteSrc(preloadedSrc)] ?? durations[getAbsoluteSrc(props2.src)];