remotion 4.0.519 → 4.0.520

package/THIRD_PARTY_LICENSES.md

@@ -0,0 +1,28 @@
+# Third-party licenses
+
+## use-sync-external-store
+
+The vendored `useSyncExternalStore` compatibility implementation is adapted
+from `use-sync-external-store` 1.5.0.
+
+MIT License
+
+Copyright (c) Meta Platforms, Inc. and affiliates.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/cjs/Composition.js

@@ -13,9 +13,9 @@ const Folder_js_1 = require("./Folder.js");
 const input_props_serialization_js_1 = require("./input-props-serialization.js");
 const is_player_js_1 = require("./is-player.js");
 const loading_indicator_js_1 = require("./loading-indicator.js");
-const nonce_js_1 = require("./nonce.js");
 const portal_node_js_1 = require("./portal-node.js");
 const ResolveCompositionConfig_js_1 = require("./ResolveCompositionConfig.js");
+const sequence_order_marker_js_1 = require("./sequence-order-marker.js");
 const use_delay_render_js_1 = require("./use-delay-render.js");
 const use_lazy_component_js_1 = require("./use-lazy-component.js");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
@@ -40,7 +40,6 @@ const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultPro
         componentName: 'Composition',
         noSuspense: false,
     });
-    const nonce = (0, nonce_js_1.useNonce)();
     const isPlayer = (0, is_player_js_1.useIsPlayer)();
     const environment = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     const canUseComposition = (0, react_1.useContext)(CanUseRemotionHooks_js_1.CanUseRemotionHooks);
@@ -77,7 +76,7 @@ const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultPro
             folderName,
             component: lazy,
             defaultProps: (0, input_props_serialization_js_1.serializeThenDeserializeInStudio)((defaultProps !== null && defaultProps !== void 0 ? defaultProps : {})),
-            nonce: nonce.get(),
+            order: null,
             parentFolderName: parentName,
             componentFromProps,
             schema: schema !== null && schema !== void 0 ? schema : null,
@@ -96,7 +95,6 @@ const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultPro
         folderName,
         defaultProps,
         width,
-        nonce,
         parentName,
         componentFromProps,
         schema,
@@ -145,10 +143,12 @@ const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultPro
  */
 const Composition = (props) => {
     const { onlyRenderComposition } = (0, react_1.useContext)(CompositionManagerContext_js_1.CompositionSetters);
+    const environment = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     if (onlyRenderComposition && onlyRenderComposition !== props.id) {
         return null;
     }
     // @ts-expect-error
-    return jsx_runtime_1.jsx(InnerComposition, { ...props });
+    const composition = jsx_runtime_1.jsx(InnerComposition, { ...props });
+    return environment.isStudio ? (jsx_runtime_1.jsx(sequence_order_marker_js_1.CompositionOrderMarker, { compositionId: props.id, children: composition })) : (composition);
 };
 exports.Composition = Composition;

package/dist/cjs/CompositionManager.d.ts

@@ -5,7 +5,6 @@ import type { CalculateMetadataFunction } from './Composition.js';
 import type { DownloadBehavior } from './download-behavior.js';
 import type { EffectDefinition } from './effects/effect-types.js';
 import type { InteractivitySchema } from './interactivity-schema.js';
-import type { NonceHistory } from './nonce.js';
 import type { InferProps, PropsIfHasProps } from './props-if-has-props.js';
 import type { RuntimeValueSnapshot, RuntimeValueStore } from './runtime-value-store.js';
 export type TComposition<Schema extends AnyZodObject, Props extends Record<string, unknown>> = {
@@ -18,7 +17,7 @@ export type TComposition<Schema extends AnyZodObject, Props extends Record<strin
     parentFolderName: string | null;
     component: LazyExoticComponent<ComponentType<Props>> | ComponentType<Props>;
     componentFromProps?: unknown;
-    nonce: NonceHistory;
+    order: number | null;
     schema: Schema | null;
     calculateMetadata: CalculateMetadataFunction<InferProps<Schema, Props>> | null;
     stack: string | null;
@@ -79,7 +78,7 @@ export type TSequence = {
     documentationLink: string | null;
     parent: string | null;
     showInTimeline: boolean;
-    nonce: NonceHistory;
+    timelineOrder: number | null;
     loopDisplay: LoopDisplay | undefined;
     getStack: () => string | null;
     premountDisplay: number | null;

package/dist/cjs/CompositionManagerContext.d.ts

@@ -2,7 +2,6 @@ import type React from 'react';
 import type { AnyZodObject } from './any-zod-type.js';
 import type { AnyComposition, TComposition } from './CompositionManager.js';
 import type { TFolder } from './Folder.js';
-import type { NonceHistory } from './nonce.js';
 import type { VideoConfig } from './video-config.js';
 export type BaseMetadata = Pick<VideoConfig, 'durationInFrames' | 'fps' | 'props' | 'height' | 'width' | 'defaultCodec' | 'defaultOutName' | 'defaultVideoImageFormat' | 'defaultPixelFormat' | 'defaultProResProfile' | 'defaultSampleRate'>;
 export type AssetPreviewMetadata = BaseMetadata & {
@@ -29,7 +28,7 @@ export type CanvasContent = {
 export type CompositionManagerSetters = {
     registerComposition: <Schema extends AnyZodObject, Props extends Record<string, unknown>>(comp: TComposition<Schema, Props>) => void;
     unregisterComposition: (name: string) => void;
-    registerFolder: (name: string, parent: string | null, nonce: NonceHistory, stack: string | null) => void;
+    registerFolder: (name: string, parent: string | null, stack: string | null) => void;
     unregisterFolder: (name: string, parent: string | null) => void;
     setCanvasContent: React.Dispatch<React.SetStateAction<CanvasContent | null>>;
     setCurrentAssetMetadata: React.Dispatch<React.SetStateAction<AssetPreviewMetadata | null>>;

package/dist/cjs/CompositionManagerProvider.js

@@ -5,11 +5,26 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const CompositionManager_1 = require("./CompositionManager");
 const CompositionManagerContext_1 = require("./CompositionManagerContext");
+const sequence_order_marker_js_1 = require("./sequence-order-marker.js");
+const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
+const useIsomorphicLayoutEffect = typeof window === 'undefined' ? react_1.useEffect : react_1.useLayoutEffect;
 const CompositionManagerProvider = ({ children, onlyRenderComposition, currentCompositionMetadata, initialCompositions, initialCanvasContent, }) => {
+    const { isStudio } = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
+    const [compositionManagerId] = (0, react_1.useState)(() => String(Math.random()));
+    const committedOrderRef = (0, react_1.useRef)(null);
+    const committedOrderIdsRef = (0, react_1.useRef)(null);
+    const internalOrderRef = (0, react_1.useRef)(new Map(initialCompositions.map((composition, index) => [
+        (0, sequence_order_marker_js_1.getCompositionAndFolderOrderKey)({
+            type: 'composition',
+            id: composition.id,
+        }),
+        index,
+    ])));
+    const nextInternalOrderRef = (0, react_1.useRef)(initialCompositions.length);
     const [folders, setFolders] = (0, react_1.useState)([]);
     const [canvasContent, setCanvasContent] = (0, react_1.useState)(initialCanvasContent);
     const [currentAssetMetadata, setCurrentAssetMetadata] = (0, react_1.useState)(null);
-    const [compositions, setCompositions] = (0, react_1.useState)(initialCompositions);
+    const [compositions, setCompositions] = (0, react_1.useState)(() => initialCompositions.map((composition, order) => ({ ...composition, order })));
     // CompositionManagerProvider state
     const currentcompositionsRef = (0, react_1.useRef)(compositions);
     const updateCompositions = (0, react_1.useCallback)((updateComps) => {
@@ -20,36 +35,134 @@ const CompositionManagerProvider = ({ children, onlyRenderComposition, currentCo
         });
     }, []);
     const registerComposition = (0, react_1.useCallback)((comp) => {
+        const orderKey = (0, sequence_order_marker_js_1.getCompositionAndFolderOrderKey)({
+            type: 'composition',
+            id: comp.id,
+        });
+        const internalOrder = nextInternalOrderRef.current++;
+        internalOrderRef.current.set(orderKey, internalOrder);
         updateCompositions((comps) => {
+            var _a;
+            var _b;
             if (comps.find((c) => c.id === comp.id)) {
                 throw new Error(`Multiple composition with id ${comp.id} are registered.`);
             }
-            return [...comps, comp];
+            return [
+                ...comps,
+                {
+                    ...comp,
+                    order: (_b = (_a = committedOrderRef.current) === null || _a === void 0 ? void 0 : _a.get(orderKey)) !== null && _b !== void 0 ? _b : internalOrder,
+                },
+            ];
         });
     }, [updateCompositions]);
     const unregisterComposition = (0, react_1.useCallback)((id) => {
+        internalOrderRef.current.delete((0, sequence_order_marker_js_1.getCompositionAndFolderOrderKey)({ type: 'composition', id }));
         setCompositions((comps) => {
             return comps.filter((c) => c.id !== id);
         });
     }, []);
-    const registerFolder = (0, react_1.useCallback)((name, parent, nonce, stack) => {
+    const registerFolder = (0, react_1.useCallback)((name, parent, stack) => {
+        const orderKey = (0, sequence_order_marker_js_1.getCompositionAndFolderOrderKey)({
+            type: 'folder',
+            id: (0, sequence_order_marker_js_1.getFolderOrderId)({ name, parent }),
+        });
+        const internalOrder = nextInternalOrderRef.current++;
+        internalOrderRef.current.set(orderKey, internalOrder);
         setFolders((prevFolders) => {
+            var _a;
+            var _b;
             return [
                 ...prevFolders,
                 {
                     name,
                     parent,
-                    nonce,
+                    order: (_b = (_a = committedOrderRef.current) === null || _a === void 0 ? void 0 : _a.get(orderKey)) !== null && _b !== void 0 ? _b : internalOrder,
                     stack,
                 },
             ];
         });
     }, []);
     const unregisterFolder = (0, react_1.useCallback)((name, parent) => {
+        internalOrderRef.current.delete((0, sequence_order_marker_js_1.getCompositionAndFolderOrderKey)({
+            type: 'folder',
+            id: (0, sequence_order_marker_js_1.getFolderOrderId)({ name, parent }),
+        }));
         setFolders((prevFolders) => {
             return prevFolders.filter((p) => !(p.name === name && p.parent === parent));
         });
     }, []);
+    useIsomorphicLayoutEffect(() => {
+        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(sequence_order_marker_js_1.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) => {
+                        var _a, _b;
+                        const nextOrder = (_b = (_a = order.get((0, sequence_order_marker_js_1.getCompositionAndFolderOrderKey)({
+                            type: 'composition',
+                            id: composition.id,
+                        }))) !== null && _a !== void 0 ? _a : internalOrderRef.current.get((0, sequence_order_marker_js_1.getCompositionAndFolderOrderKey)({
+                            type: 'composition',
+                            id: composition.id,
+                        }))) !== null && _b !== void 0 ? _b : 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) => {
+                        var _a, _b;
+                        const nextOrder = (_b = (_a = order.get((0, sequence_order_marker_js_1.getCompositionAndFolderOrderKey)({
+                            type: 'folder',
+                            id: (0, sequence_order_marker_js_1.getFolderOrderId)(folder),
+                        }))) !== null && _a !== void 0 ? _a : internalOrderRef.current.get((0, sequence_order_marker_js_1.getCompositionAndFolderOrderKey)({
+                            type: 'folder',
+                            id: (0, sequence_order_marker_js_1.getFolderOrderId)(folder),
+                        }))) !== null && _b !== void 0 ? _b : folder.order;
+                        if (nextOrder === folder.order) {
+                            return folder;
+                        }
+                        changed = true;
+                        return { ...folder, order: nextOrder };
+                    });
+                    return changed ? nextFolders : currentFolders;
+                });
+            });
+        };
+        window.addEventListener(sequence_order_marker_js_1.COMMIT_ORDER_EVENT, onCommitOrder);
+        return () => {
+            unmounted = true;
+            window.removeEventListener(sequence_order_marker_js_1.COMMIT_ORDER_EVENT, onCommitOrder);
+        };
+    }, [compositionManagerId, isStudio, updateCompositions]);
     (0, react_1.useImperativeHandle)(CompositionManager_1.compositionsRef, () => {
         return {
             getCompositions: () => currentcompositionsRef.current,
@@ -87,6 +200,7 @@ const CompositionManagerProvider = ({ children, onlyRenderComposition, currentCo
         currentAssetMetadata,
         canvasContent,
     ]);
-    return (jsx_runtime_1.jsx(CompositionManagerContext_1.CompositionManager.Provider, { value: compositionManagerContextValue, children: jsx_runtime_1.jsx(CompositionManagerContext_1.CompositionSetters.Provider, { value: compositionManagerSetters, children: children }) }));
+    const providers = (jsx_runtime_1.jsx(CompositionManagerContext_1.CompositionManager.Provider, { value: compositionManagerContextValue, children: jsx_runtime_1.jsx(CompositionManagerContext_1.CompositionSetters.Provider, { value: compositionManagerSetters, children: children }) }));
+    return isStudio ? (jsx_runtime_1.jsx(sequence_order_marker_js_1.CompositionManagerOrderMarker, { managerId: compositionManagerId, children: providers })) : (providers);
 };
 exports.CompositionManagerProvider = CompositionManagerProvider;

package/dist/cjs/Folder.d.ts

@@ -1,9 +1,8 @@
 import type { FC, ReactNode } from 'react';
-import type { NonceHistory } from './nonce.js';
 export type TFolder = {
     name: string;
     parent: string | null;
-    nonce: NonceHistory;
+    order: number | null;
     stack: string | null;
 };
 type FolderContextType = {

package/dist/cjs/Folder.js

@@ -4,8 +4,9 @@ exports.Folder = exports.FolderContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const CompositionManagerContext_js_1 = require("./CompositionManagerContext.js");
-const nonce_js_1 = require("./nonce.js");
+const sequence_order_marker_js_1 = require("./sequence-order-marker.js");
 const truthy_js_1 = require("./truthy.js");
+const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
 const validate_folder_name_js_1 = require("./validation/validate-folder-name.js");
 exports.FolderContext = (0, react_1.createContext)({
     folderName: null,
@@ -20,7 +21,7 @@ const Folder = (props) => {
     const { name, children } = props;
     const parent = (0, react_1.useContext)(exports.FolderContext);
     const { registerFolder, unregisterFolder } = (0, react_1.useContext)(CompositionManagerContext_js_1.CompositionSetters);
-    const nonce = (0, nonce_js_1.useNonce)();
+    const environment = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     const stack = (_a = props
         ._remotionInternalStack) !== null && _a !== void 0 ? _a : null;
     (0, validate_folder_name_js_1.validateFolderName)(name);
@@ -33,7 +34,7 @@ const Folder = (props) => {
         };
     }, [name, parentName]);
     (0, react_1.useEffect)(() => {
-        registerFolder(name, parentName, nonce.get(), stack);
+        registerFolder(name, parentName, stack);
         return () => {
             unregisterFolder(name, parentName);
         };
@@ -43,9 +44,9 @@ const Folder = (props) => {
         parentName,
         registerFolder,
         unregisterFolder,
-        nonce,
         stack,
     ]);
-    return (jsx_runtime_1.jsx(exports.FolderContext.Provider, { value: value, children: children }));
+    const folder = (jsx_runtime_1.jsx(exports.FolderContext.Provider, { value: value, children: children }));
+    return environment.isStudio ? (jsx_runtime_1.jsx(sequence_order_marker_js_1.FolderOrderMarker, { folderId: (0, sequence_order_marker_js_1.getFolderOrderId)({ name, parent: parentName }), children: folder })) : (folder);
 };
 exports.Folder = Folder;

package/dist/cjs/RemotionRoot.js

@@ -7,22 +7,15 @@ const shared_audio_tags_js_1 = require("./audio/shared-audio-tags.js");
 const buffering_js_1 = require("./buffering.js");
 const EditorProps_js_1 = require("./EditorProps.js");
 const log_level_context_js_1 = require("./log-level-context.js");
-const nonce_js_1 = require("./nonce.js");
 const prefetch_state_js_1 = require("./prefetch-state.js");
 const SequenceManager_js_1 = require("./SequenceManager.js");
 const TimelineContext_js_1 = require("./TimelineContext.js");
 const use_media_enabled_js_1 = require("./use-media-enabled.js");
 const duration_state_js_1 = require("./video/duration-state.js");
 const RemotionRootContexts = ({ children, numberOfAudioTags, logLevel, audioLatencyHint, previewSampleRate, videoEnabled, audioEnabled, frameState, _experimentalKeepAudioContextAlive, }) => {
-    const nonceContext = (0, react_1.useMemo)(() => {
-        let counter = 0;
-        return {
-            getNonce: () => counter++,
-        };
-    }, []);
     const logging = (0, react_1.useMemo)(() => {
         return { logLevel, mountTime: Date.now() };
     }, [logLevel]);
-    return (jsx_runtime_1.jsx(log_level_context_js_1.LogLevelContext.Provider, { value: logging, children: jsx_runtime_1.jsx(nonce_js_1.NonceContext.Provider, { value: nonceContext, children: jsx_runtime_1.jsx(TimelineContext_js_1.TimelineContextProvider, { frameState: frameState, children: jsx_runtime_1.jsx(use_media_enabled_js_1.MediaEnabledProvider, { videoEnabled: videoEnabled, audioEnabled: audioEnabled, children: jsx_runtime_1.jsx(EditorProps_js_1.EditorPropsProvider, { children: jsx_runtime_1.jsx(prefetch_state_js_1.PrefetchProvider, { children: jsx_runtime_1.jsx(SequenceManager_js_1.SequenceManagerProvider, { children: jsx_runtime_1.jsx(duration_state_js_1.DurationsContextProvider, { children: jsx_runtime_1.jsx(buffering_js_1.BufferingProvider, { children: jsx_runtime_1.jsx(shared_audio_tags_js_1.SharedAudioContextProvider, { audioLatencyHint: audioLatencyHint, audioEnabled: audioEnabled, previewSampleRate: previewSampleRate, _experimentalKeepAudioContextAlive: _experimentalKeepAudioContextAlive, children: jsx_runtime_1.jsx(shared_audio_tags_js_1.SharedAudioTagsContextProvider, { numberOfAudioTags: numberOfAudioTags, children: children }) }) }) }) }) }) }) }) }) }) }));
+    return (jsx_runtime_1.jsx(log_level_context_js_1.LogLevelContext.Provider, { value: logging, children: jsx_runtime_1.jsx(TimelineContext_js_1.TimelineContextProvider, { frameState: frameState, children: jsx_runtime_1.jsx(use_media_enabled_js_1.MediaEnabledProvider, { videoEnabled: videoEnabled, audioEnabled: audioEnabled, children: jsx_runtime_1.jsx(EditorProps_js_1.EditorPropsProvider, { children: jsx_runtime_1.jsx(prefetch_state_js_1.PrefetchProvider, { children: jsx_runtime_1.jsx(SequenceManager_js_1.SequenceManagerProvider, { children: jsx_runtime_1.jsx(duration_state_js_1.DurationsContextProvider, { children: jsx_runtime_1.jsx(buffering_js_1.BufferingProvider, { children: jsx_runtime_1.jsx(shared_audio_tags_js_1.SharedAudioContextProvider, { audioLatencyHint: audioLatencyHint, audioEnabled: audioEnabled, previewSampleRate: previewSampleRate, _experimentalKeepAudioContextAlive: _experimentalKeepAudioContextAlive, children: jsx_runtime_1.jsx(shared_audio_tags_js_1.SharedAudioTagsContextProvider, { numberOfAudioTags: numberOfAudioTags, children: children }) }) }) }) }) }) }) }) }) }));
 };
 exports.RemotionRootContexts = RemotionRootContexts;

package/dist/cjs/Sequence.js

@@ -8,14 +8,15 @@ const AbsoluteFillElement_js_1 = require("./AbsoluteFillElement.js");
 const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
 const freeze_js_1 = require("./freeze.js");
 const interactivity_schema_js_1 = require("./interactivity-schema.js");
-const nonce_js_1 = require("./nonce.js");
 const sequence_crop_js_1 = require("./sequence-crop.js");
+const sequence_order_marker_js_1 = require("./sequence-order-marker.js");
 const SequenceContext_js_1 = require("./SequenceContext.js");
 const SequenceManager_js_1 = require("./SequenceManager.js");
 const is_inside_series_js_1 = require("./series/is-inside-series.js");
 const timeline_position_state_js_1 = require("./timeline-position-state.js");
 const use_premounting_js_1 = require("./use-premounting.js");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
+const use_sequence_registration_js_1 = require("./use-sequence-registration.js");
 const use_video_config_js_1 = require("./use-video-config.js");
 const v5_flag_js_1 = require("./v5-flag.js");
 const with_interactivity_schema_js_1 = require("./with-interactivity-schema.js");
@@ -28,7 +29,6 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
     const cumulatedFrom = parentSequence
         ? parentSequence.cumulatedFrom + parentSequence.relativeFrom
         : 0;
-    const nonce = (0, nonce_js_1.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}`);
     }
@@ -88,7 +88,6 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
         ? Math.min(parentSequence.durationInFrames - effectiveRelativeFrom, durationInFrames)
         : durationInFrames;
     const actualDurationInFrames = Math.max(0, Math.min(videoConfig.durationInFrames - from, parentSequenceDuration));
-    const { registerSequence, unregisterSequence } = (0, react_1.useContext)(SequenceManager_js_1.SequenceManager);
     const sequenceRegistrationEnabled = (0, react_1.useContext)(SequenceManager_js_1.SequenceRegistrationContext);
     const wrapperRefForOutline = (0, react_1.useRef)(null);
     const refForOutline = other.layout === 'none'
@@ -225,14 +224,11 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
         controlsSchema,
         controlsSupportsEffects,
     ]);
-    (0, react_1.useEffect)(() => {
+    const getSequenceForRegistration = (0, react_1.useCallback)(() => {
         var _a, _b, _c;
-        if (!env.isStudio && !sequenceRegistrationEnabled) {
-            return;
-        }
         if (isMedia) {
             if (isMedia.type === 'image') {
-                registerSequence({
+                return {
                     type: 'image',
                     controls: registrationControls,
                     effects: _remotionInternalEffects !== null && _remotionInternalEffects !== void 0 ? _remotionInternalEffects : EMPTY_EFFECTS,
@@ -244,57 +240,52 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
                     trimBefore: registeredTrimBefore,
                     id,
                     loopDisplay,
-                    nonce: nonce.get(),
                     parent: (_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id) !== null && _a !== void 0 ? _a : null,
                     postmountDisplay: postmountDisplay !== null && postmountDisplay !== void 0 ? postmountDisplay : null,
                     premountDisplay: premountDisplay !== null && premountDisplay !== void 0 ? premountDisplay : null,
                     showInTimeline,
+                    timelineOrder: null,
                     src: isMedia.src,
                     getStack: () => stackRef.current,
                     refForOutline: refForOutline !== null && refForOutline !== void 0 ? refForOutline : null,
                     isInsideSeries,
                     frozenFrame: registeredFrozenFrame,
                     singleChildComponent: singleChildComponent !== null && singleChildComponent !== void 0 ? singleChildComponent : null,
-                });
-            }
-            else {
-                registerSequence({
-                    type: isMedia.type,
-                    controls: registrationControls,
-                    effects: _remotionInternalEffects !== null && _remotionInternalEffects !== void 0 ? _remotionInternalEffects : EMPTY_EFFECTS,
-                    effectRuntimeValues,
-                    displayName: timelineClipName,
-                    documentationLink: resolvedDocumentationLink,
-                    doesVolumeChange: isMedia.data.doesVolumeChange,
-                    duration: actualDurationInFrames,
-                    from,
-                    trimBefore: registeredTrimBefore,
-                    id,
-                    loopDisplay,
-                    nonce: nonce.get(),
-                    parent: (_b = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id) !== null && _b !== void 0 ? _b : null,
-                    playbackRate: isMedia.data.playbackRate,
-                    postmountDisplay: postmountDisplay !== null && postmountDisplay !== void 0 ? postmountDisplay : null,
-                    premountDisplay: premountDisplay !== null && premountDisplay !== void 0 ? premountDisplay : null,
-                    showInTimeline,
-                    src: isMedia.data.src,
-                    getStack: () => stackRef.current,
-                    startMediaFrom: startMediaFrom !== null && startMediaFrom !== void 0 ? startMediaFrom : isMedia.data.startMediaFrom,
-                    mediaFrameAtSequenceZero,
-                    volume: isMedia.data.volumes,
-                    muted: isMedia.data.muted,
-                    refForOutline: refForOutline !== null && refForOutline !== void 0 ? refForOutline : null,
-                    isInsideSeries,
-                    frozenFrame: registeredFrozenFrame,
-                    frozenMediaFrame,
-                    singleChildComponent: singleChildComponent !== null && singleChildComponent !== void 0 ? singleChildComponent : null,
-                });
+                };
             }
-            return () => {
-                unregisterSequence(id);
+            return {
+                type: isMedia.type,
+                controls: registrationControls,
+                effects: _remotionInternalEffects !== null && _remotionInternalEffects !== void 0 ? _remotionInternalEffects : EMPTY_EFFECTS,
+                effectRuntimeValues,
+                displayName: timelineClipName,
+                documentationLink: resolvedDocumentationLink,
+                doesVolumeChange: isMedia.data.doesVolumeChange,
+                duration: actualDurationInFrames,
+                from,
+                trimBefore: registeredTrimBefore,
+                id,
+                loopDisplay,
+                parent: (_b = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id) !== null && _b !== void 0 ? _b : null,
+                playbackRate: isMedia.data.playbackRate,
+                postmountDisplay: postmountDisplay !== null && postmountDisplay !== void 0 ? postmountDisplay : null,
+                premountDisplay: premountDisplay !== null && premountDisplay !== void 0 ? premountDisplay : null,
+                showInTimeline,
+                timelineOrder: null,
+                src: isMedia.data.src,
+                getStack: () => stackRef.current,
+                startMediaFrom: startMediaFrom !== null && startMediaFrom !== void 0 ? startMediaFrom : isMedia.data.startMediaFrom,
+                mediaFrameAtSequenceZero,
+                volume: isMedia.data.volumes,
+                muted: isMedia.data.muted,
+                refForOutline: refForOutline !== null && refForOutline !== void 0 ? refForOutline : null,
+                isInsideSeries,
+                frozenFrame: registeredFrozenFrame,
+                frozenMediaFrame,
+                singleChildComponent: singleChildComponent !== null && singleChildComponent !== void 0 ? singleChildComponent : null,
             };
         }
-        registerSequence({
+        return {
             from,
             trimBefore: registeredTrimBefore,
             duration: actualDurationInFrames,
@@ -304,7 +295,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
             parent: (_c = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id) !== null && _c !== void 0 ? _c : null,
             type: 'sequence',
             showInTimeline,
-            nonce: nonce.get(),
+            timelineOrder: null,
             loopDisplay,
             getStack: () => stackRef.current,
             premountDisplay: premountDisplay !== null && premountDisplay !== void 0 ? premountDisplay : null,
@@ -316,29 +307,18 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
             isInsideSeries,
             frozenFrame: registeredFrozenFrame,
             singleChildComponent: singleChildComponent !== null && singleChildComponent !== void 0 ? singleChildComponent : null,
-        });
-        return () => {
-            unregisterSequence(id);
         };
     }, [
-        durationInFrames,
         id,
-        name,
-        registerSequence,
         timelineClipName,
-        unregisterSequence,
         parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id,
         actualDurationInFrames,
         from,
-        trimBefore,
         registeredTrimBefore,
         showInTimeline,
-        nonce,
         loopDisplay,
         premountDisplay,
         postmountDisplay,
-        env.isStudio,
-        sequenceRegistrationEnabled,
         registrationControls,
         _remotionInternalEffects,
         effectRuntimeValues,
@@ -352,6 +332,12 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
         frozenMediaFrame,
         singleChildComponent,
     ]);
+    (0, use_sequence_registration_js_1.useSequenceRegistration)({
+        getSequence: env.isStudio || sequenceRegistrationEnabled
+            ? getSequenceForRegistration
+            : null,
+        id,
+    });
     // Ceil to support floats
     // https://github.com/remotion-dev/remotion/issues/2958
     const endThreshold = Math.ceil(cumulatedFrom + from + durationInFrames - 1);
@@ -395,9 +381,10 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
         throw new TypeError('It is not supported to pass both a `ref` and `layout="none"` to <Sequence />.');
     }
     if (hidden) {
-        return null;
+        return env.isStudio ? (jsx_runtime_1.jsx(sequence_order_marker_js_1.SequenceOrderMarker, { sequenceId: id, children: null })) : null;
     }
-    return (jsx_runtime_1.jsx(SequenceContext_js_1.SequenceContext.Provider, { value: contextValue, children: frozenContent === null ? null : other.layout === 'none' ? (frozenContent) : (jsx_runtime_1.jsx(AbsoluteFillElement_js_1.AbsoluteFillElement, { ref: sequenceRef, style: defaultStyle, className: other.className, children: frozenContent })) }));
+    const sequence = (jsx_runtime_1.jsx(SequenceContext_js_1.SequenceContext.Provider, { value: contextValue, children: frozenContent === null ? null : other.layout === 'none' ? (frozenContent) : (jsx_runtime_1.jsx(AbsoluteFillElement_js_1.AbsoluteFillElement, { ref: sequenceRef, style: defaultStyle, className: other.className, children: frozenContent })) }));
+    return env.isStudio ? (jsx_runtime_1.jsx(sequence_order_marker_js_1.SequenceOrderMarker, { sequenceId: id, children: sequence })) : (sequence);
 };
 const RegularSequence = (0, react_1.forwardRef)(RegularSequenceRefForwardingFunction);
 const PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {

package/dist/cjs/SequenceManager.d.ts

@@ -3,6 +3,7 @@ import type { TSequence } from './CompositionManager.js';
 import type { CanUpdateSequencePropStatus, DragOverrideValue, GetDragOverrides, GetEffectDragOverrides, PropStatuses } from './use-schema.js';
 export type SequenceManagerContext = {
     registerSequence: (seq: TSequence) => void;
+    updateSequence: ((seq: TSequence) => void) | null;
     unregisterSequence: (id: string) => void;
     sequences: TSequence[];
 };