remotion 4.0.534 → 4.0.535

package/README.md

@@ -81,7 +81,7 @@ Remotion is extensively documented over more than 1000 pages.
   - [Discord](https://remotion.dev/discord)
   - [Search](https://remotion.dev/search)
   - [Ask AI](https://remotion.dev/ai)
-  - [GitHub Issues](https://remotion.dev/issues)
+  - [GitHub Issues](https://github.com/remotion-dev/remotion/issues)
 
 ## Documentation
 

package/dist/cjs/AbsoluteFill.d.ts

@@ -181,12 +181,7 @@ export declare const absoluteFillSchema: {
         readonly default: "transparent";
         readonly description: "Color";
     };
-    readonly children: {
-        readonly type: "text-content";
-        readonly default: "";
-        readonly description: "Text";
-        readonly keyframable: false;
-    };
+    readonly children: import("./interactivity-schema.js").InteractivitySchemaField;
     readonly premountFor: {
         readonly type: "number";
         readonly default: 0;

package/dist/cjs/AbsoluteFill.js

@@ -20,7 +20,7 @@ exports.absoluteFillSchema = {
     ...interactivity_schema_js_1.borderSchema,
     ...interactivity_schema_js_1.borderRadiusSchema,
     ...interactivity_schema_js_1.textSchema,
-    ...interactivity_schema_js_1.textContentSchema,
+    ...interactivity_schema_js_1.childrenSchema,
 };
 const setRef = (ref, value) => {
     if (typeof ref === 'function') {

package/dist/cjs/Composition.js

@@ -5,17 +5,18 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_dom_1 = require("react-dom");
 const CanUseRemotionHooks_js_1 = require("./CanUseRemotionHooks.js");
+const committed_metadata_js_1 = require("./committed-metadata.js");
+const component_identity_js_1 = require("./component-identity.js");
+const composition_registry_fallback_js_1 = require("./composition-registry-fallback.js");
 const composition_render_error_context_js_1 = require("./composition-render-error-context.js");
 const CompositionErrorBoundary_js_1 = require("./CompositionErrorBoundary.js");
 const CompositionManagerContext_js_1 = require("./CompositionManagerContext.js");
-const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
 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 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");
@@ -32,8 +33,6 @@ const Fallback = () => {
 };
 const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultProps, schema, ...compProps }) => {
     var _a, _b, _c, _d;
-    const compManager = (0, react_1.useContext)(CompositionManagerContext_js_1.CompositionSetters);
-    const { registerComposition, unregisterComposition } = compManager;
     const video = (0, use_video_js_1.useVideo)();
     const lazy = (0, use_lazy_component_js_1.useLazyComponent)({
         compProps: compProps,
@@ -57,9 +56,9 @@ const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultPro
     const stack = (_b = compProps
         ._remotionInternalStack) !== null && _b !== void 0 ? _b : null;
     const componentFromProps = 'component' in compProps
-        ? (0, enable_sequence_stack_traces_js_1.resolveComponentIdentity)(compProps.component)
+        ? (0, component_identity_js_1.resolveComponentIdentity)(compProps.component)
         : null;
-    (0, react_1.useEffect)(() => {
+    const registration = (0, react_1.useMemo)(() => {
         var _a;
         // Ensure it's a URL safe id
         if (!id) {
@@ -67,7 +66,7 @@ const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultPro
         }
         (0, validate_composition_id_js_1.validateCompositionId)(id);
         (0, validate_default_props_js_1.validateDefaultAndInputProps)(defaultProps, 'defaultProps', id);
-        registerComposition({
+        return {
             durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : undefined,
             fps: fps !== null && fps !== void 0 ? fps : undefined,
             height: height !== null && height !== void 0 ? height : undefined,
@@ -82,9 +81,6 @@ const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultPro
             schema: schema !== null && schema !== void 0 ? schema : null,
             calculateMetadata: (_a = compProps.calculateMetadata) !== null && _a !== void 0 ? _a : null,
             stack,
-        });
-        return () => {
-            unregisterComposition(id);
         };
     }, [
         durationInFrames,
@@ -100,9 +96,9 @@ const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultPro
         schema,
         compProps.calculateMetadata,
         stack,
-        registerComposition,
-        unregisterComposition,
     ]);
+    const metadata = (0, react_1.useMemo)(() => ({ type: 'composition', id, value: registration }), [id, registration]);
+    (0, composition_registry_fallback_js_1.useCommittedCompositionEntry)(metadata);
     const resolved = (0, ResolveCompositionConfig_js_1.useResolvedVideoConfig)(id);
     const { setError, clearError } = (0, react_1.useContext)(composition_render_error_context_js_1.CompositionRenderErrorContext);
     const onError = (0, react_1.useCallback)((error) => {
@@ -111,6 +107,7 @@ const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultPro
     const onClear = (0, react_1.useCallback)(() => {
         clearError();
     }, [clearError]);
+    const wrapRegistration = (content) => (jsx_runtime_1.jsx(committed_metadata_js_1.CommittedMetadataProvider, { value: null, _remotionCommitMetadata: metadata, children: content }));
     if (environment.isStudio &&
         video &&
         video.component === lazy &&
@@ -119,9 +116,9 @@ const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultPro
         if (resolved === null ||
             (resolved.type !== 'success' &&
                 resolved.type !== 'success-and-refreshing')) {
-            return null;
+            return wrapRegistration(null);
         }
-        return (0, react_dom_1.createPortal)(jsx_runtime_1.jsx(CanUseRemotionHooks_js_1.CanUseRemotionHooksProvider, { children: jsx_runtime_1.jsx(CompositionErrorBoundary_js_1.CompositionErrorBoundary, { onError: onError, onClear: onClear, children: jsx_runtime_1.jsx(react_1.Suspense, { fallback: jsx_runtime_1.jsx(loading_indicator_js_1.Loading, {}), children: jsx_runtime_1.jsx(Comp, { ...((_c = resolved.result.props) !== null && _c !== void 0 ? _c : {}) }) }) }) }), (0, portal_node_js_1.portalNode)());
+        return wrapRegistration((0, react_dom_1.createPortal)(jsx_runtime_1.jsx(CanUseRemotionHooks_js_1.CanUseRemotionHooksProvider, { children: jsx_runtime_1.jsx(CompositionErrorBoundary_js_1.CompositionErrorBoundary, { onError: onError, onClear: onClear, children: jsx_runtime_1.jsx(react_1.Suspense, { fallback: jsx_runtime_1.jsx(loading_indicator_js_1.Loading, {}), children: jsx_runtime_1.jsx(Comp, { ...((_c = resolved.result.props) !== null && _c !== void 0 ? _c : {}) }) }) }) }), (0, portal_node_js_1.portalNode)()));
     }
     if (environment.isRendering &&
         video &&
@@ -131,11 +128,11 @@ const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultPro
         if (resolved === null ||
             (resolved.type !== 'success' &&
                 resolved.type !== 'success-and-refreshing')) {
-            return null;
+            return wrapRegistration(null);
         }
-        return (0, react_dom_1.createPortal)(jsx_runtime_1.jsx(CanUseRemotionHooks_js_1.CanUseRemotionHooksProvider, { children: jsx_runtime_1.jsx(react_1.Suspense, { fallback: jsx_runtime_1.jsx(Fallback, {}), children: jsx_runtime_1.jsx(Comp, { ...((_d = resolved.result.props) !== null && _d !== void 0 ? _d : {}) }) }) }), (0, portal_node_js_1.portalNode)());
+        return wrapRegistration((0, react_dom_1.createPortal)(jsx_runtime_1.jsx(CanUseRemotionHooks_js_1.CanUseRemotionHooksProvider, { children: jsx_runtime_1.jsx(react_1.Suspense, { fallback: jsx_runtime_1.jsx(Fallback, {}), children: jsx_runtime_1.jsx(Comp, { ...((_d = resolved.result.props) !== null && _d !== void 0 ? _d : {}) }) }) }), (0, portal_node_js_1.portalNode)()));
     }
-    return null;
+    return wrapRegistration(null);
 };
 /*
  * @description This component is used to register a video to make it renderable and make it show in the sidebar, in dev mode.
@@ -143,12 +140,10 @@ 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
-    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);
+    return jsx_runtime_1.jsx(InnerComposition, { ...props });
 };
 exports.Composition = Composition;

package/dist/cjs/CompositionManager.d.ts

@@ -33,8 +33,6 @@ type EnhancedTSequenceData = {
 } | {
     type: 'audio';
     src: string;
-    volume: string | number;
-    doesVolumeChange: boolean;
     muted: boolean;
     startMediaFrom: number;
     mediaFrameAtSequenceZero: number | null;
@@ -43,8 +41,6 @@ type EnhancedTSequenceData = {
 } | {
     type: 'video';
     src: string;
-    volume: string | number;
-    doesVolumeChange: boolean;
     muted: boolean;
     startMediaFrom: number;
     mediaFrameAtSequenceZero: number | null;

package/dist/cjs/CompositionManagerContext.d.ts

@@ -1,6 +1,5 @@
 import type React from 'react';
-import type { AnyZodObject } from './any-zod-type.js';
-import type { AnyComposition, TComposition } from './CompositionManager.js';
+import type { AnyComposition } from './CompositionManager.js';
 import type { TFolder } from './Folder.js';
 import type { VideoConfig } from './video-config.js';
 export type BaseMetadata = Pick<VideoConfig, 'durationInFrames' | 'fps' | 'props' | 'height' | 'width' | 'defaultCodec' | 'defaultOutName' | 'defaultVideoImageFormat' | 'defaultPixelFormat' | 'defaultProResProfile' | 'defaultSampleRate'>;
@@ -27,10 +26,6 @@ export type CanvasContent = {
     sizeInBytes: number;
 };
 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, 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>>;
     onlyRenderComposition: string | null;

package/dist/cjs/CompositionManagerContext.js

@@ -12,10 +12,6 @@ exports.CompositionManager = (0, react_1.createContext)({
     canvasContent: null,
 });
 exports.CompositionSetters = (0, react_1.createContext)({
-    registerComposition: () => undefined,
-    unregisterComposition: () => undefined,
-    registerFolder: () => undefined,
-    unregisterFolder: () => undefined,
     setCanvasContent: () => undefined,
     setCurrentAssetMetadata: () => undefined,
     onlyRenderComposition: null,

package/dist/cjs/CompositionManagerProvider.js

@@ -3,185 +3,91 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CompositionManagerProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const committed_metadata_js_1 = require("./committed-metadata.js");
 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 CompositionRegistryProvider_js_1 = require("./CompositionRegistryProvider.js");
+const registry_store_js_1 = require("./registry-store.js");
+const use_sync_external_store_js_1 = require("./use-sync-external-store.js");
 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 committedKeysRef = (0, react_1.useRef)(new Set());
+    const flushSnapshotRef = (0, react_1.useRef)(null);
+    const committedDescriptorsRef = (0, react_1.useRef)(new Map());
+    const [registrationError, setRegistrationError] = (0, react_1.useState)(null);
+    const [registry] = (0, react_1.useState)(() => (0, registry_store_js_1.createRegistryStore)({
+        compositions: initialCompositions.map((composition, order) => ({
+            ...composition,
+            order,
+        })),
+        folders: [],
+    }));
+    const { compositions, folders } = (0, use_sync_external_store_js_1.useSyncExternalStore)(registry.subscribe, registry.getSnapshot, registry.getSnapshot);
     const [canvasContent, setCanvasContent] = (0, react_1.useState)(initialCanvasContent);
     const [currentAssetMetadata, setCurrentAssetMetadata] = (0, react_1.useState)(null);
-    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) => {
-        // The renderer may read registrations before React commits the state.
-        const updated = updateComps(currentcompositionsRef.current);
-        currentcompositionsRef.current = updated;
-        setCompositions(updated);
-    }, []);
-    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,
-                    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 }));
-        updateCompositions((comps) => comps.filter((c) => c.id !== id));
-    }, [updateCompositions]);
-    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,
-                    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) {
+    const onCommitRegistrations = (0, react_1.useCallback)((pending) => {
+        const previousKeys = committedKeysRef.current;
+        const previousDescriptors = committedDescriptorsRef.current;
+        const existingIds = new Set(registry
+            .getSnapshot()
+            .compositions.map((composition) => composition.id));
+        const descriptors = new Map();
+        for (const composition of pending.compositions) {
+            const key = `composition:${composition.id}`;
+            if (descriptors.has(key) ||
+                (!previousKeys.has(key) && existingIds.has(composition.id))) {
+                setRegistrationError(new Error(`Multiple composition with id ${composition.id} are registered.`));
                 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;
-                });
+            descriptors.set(key, composition);
+        }
+        for (const folder of pending.folders) {
+            descriptors.set(`folder:${(0, committed_metadata_js_1.getFolderOrderId)(folder)}`, folder);
+        }
+        const nextKeys = new Set(descriptors.keys());
+        const order = new Map(pending.orderIds.map((id, index) => [id, index]));
+        committedKeysRef.current = nextKeys;
+        committedDescriptorsRef.current = descriptors;
+        registry.setSnapshot((current) => {
+            const nextCompositions = (0, registry_store_js_1.reconcileRegistryEntries)({
+                current: current.compositions,
+                entries: pending.compositions,
+                previousDescriptors,
+                previousKeys,
+                nextKeys,
+                getKey: (composition) => `composition:${composition.id}`,
+                order,
+                orderProperty: 'order',
             });
-        };
-        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]);
+            const nextFolders = (0, registry_store_js_1.reconcileRegistryEntries)({
+                current: current.folders,
+                entries: pending.folders,
+                previousDescriptors,
+                previousKeys,
+                nextKeys,
+                getKey: (folder) => `folder:${(0, committed_metadata_js_1.getFolderOrderId)(folder)}`,
+                order,
+                orderProperty: 'order',
+            });
+            return nextCompositions === current.compositions &&
+                nextFolders === current.folders
+                ? current
+                : { compositions: nextCompositions, folders: nextFolders };
+        });
+    }, [registry]);
     (0, react_1.useImperativeHandle)(CompositionManager_1.compositionsRef, () => {
         return {
-            getCompositions: () => currentcompositionsRef.current,
+            getCompositions: () => {
+                var _a;
+                (_a = flushSnapshotRef.current) === null || _a === void 0 ? void 0 : _a.call(flushSnapshotRef);
+                return registry.getSnapshot().compositions;
+            },
         };
-    }, []);
-    const compositionManagerSetters = (0, react_1.useMemo)(() => {
-        return {
-            registerComposition,
-            unregisterComposition,
-            registerFolder,
-            unregisterFolder,
-            setCanvasContent,
-            setCurrentAssetMetadata,
-            onlyRenderComposition,
-        };
-    }, [
-        registerComposition,
-        registerFolder,
-        unregisterComposition,
-        unregisterFolder,
+    }, [registry]);
+    const compositionManagerSetters = (0, react_1.useMemo)(() => ({
+        setCanvasContent,
+        setCurrentAssetMetadata,
         onlyRenderComposition,
-    ]);
+    }), [onlyRenderComposition]);
     const compositionManagerContextValue = (0, react_1.useMemo)(() => {
         return {
             compositions,
@@ -197,7 +103,9 @@ const CompositionManagerProvider = ({ children, onlyRenderComposition, currentCo
         currentAssetMetadata,
         canvasContent,
     ]);
-    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);
+    if (registrationError !== null) {
+        throw registrationError;
+    }
+    return (jsx_runtime_1.jsx(CompositionRegistryProvider_js_1.CompositionRegistryProvider, { ref: flushSnapshotRef, onSnapshot: onCommitRegistrations, children: jsx_runtime_1.jsx(CompositionManagerContext_1.CompositionManager.Provider, { value: compositionManagerContextValue, children: jsx_runtime_1.jsx(CompositionManagerContext_1.CompositionSetters.Provider, { value: compositionManagerSetters, children: children }) }) }));
 };
 exports.CompositionManagerProvider = CompositionManagerProvider;

package/dist/cjs/CompositionRegistryProvider.d.ts

@@ -0,0 +1,5 @@
+import { type CommittedCompositionSnapshot } from './committed-metadata.js';
+export declare const CompositionRegistryProvider: import("react").ForwardRefExoticComponent<{
+    readonly children: import("react").ReactNode;
+    readonly onSnapshot: (snapshot: CommittedCompositionSnapshot) => void;
+} & import("react").RefAttributes<() => void>>;

package/dist/cjs/CompositionRegistryProvider.js

@@ -0,0 +1,142 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CompositionRegistryProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const committed_metadata_js_1 = require("./committed-metadata.js");
+const composition_registry_fallback_js_1 = require("./composition-registry-fallback.js");
+const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
+const useIsomorphicLayoutEffect = typeof window === 'undefined' ? react_1.useEffect : react_1.useLayoutEffect;
+const CompositionRegistryFallbackProvider = (0, committed_metadata_js_1.withCommittedMetadata)(composition_registry_fallback_js_1.CompositionRegistryFallbackContext.Provider);
+// Every consumer receives a complete committed snapshot. The fallback changes
+// how descriptors are captured, rather than exposing a second registration API.
+exports.CompositionRegistryProvider = (0, react_1.forwardRef)(({ children, onSnapshot }, flushSnapshotRef) => {
+    const { isStudio } = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
+    const [managerId] = (0, react_1.useState)(() => String(Math.random()));
+    const [useCommitObserver, setUseCommitObserver] = (0, react_1.useState)(() => isStudio && (0, committed_metadata_js_1.isCommitRegistrationObserverInstalled)());
+    const observedCommitRef = (0, react_1.useRef)(false);
+    const observerFailedRef = (0, react_1.useRef)(false);
+    const unmountedRef = (0, react_1.useRef)(false);
+    const onSnapshotRef = (0, react_1.useRef)(onSnapshot);
+    const lastSnapshotRef = (0, react_1.useRef)(null);
+    const pendingSnapshotRef = (0, react_1.useRef)(null);
+    const flushSnapshot = (0, react_1.useCallback)(() => {
+        const pending = pendingSnapshotRef.current;
+        pendingSnapshotRef.current = null;
+        if (pending === null || unmountedRef.current) {
+            return;
+        }
+        const committed = typeof pending === 'function' ? pending() : pending;
+        const previous = lastSnapshotRef.current;
+        if (previous !== null &&
+            (previous.compositions === committed.compositions ||
+                (previous.compositions.length === committed.compositions.length &&
+                    previous.compositions.every((composition, index) => composition === committed.compositions[index]))) &&
+            (previous.folders === committed.folders ||
+                (previous.folders.length === committed.folders.length &&
+                    previous.folders.every((folder, index) => folder === committed.folders[index]))) &&
+            (previous.orderIds === committed.orderIds ||
+                (previous.orderIds.length === committed.orderIds.length &&
+                    previous.orderIds.every((id, index) => id === committed.orderIds[index])))) {
+            return;
+        }
+        lastSnapshotRef.current = committed;
+        onSnapshotRef.current(committed);
+    }, []);
+    (0, react_1.useImperativeHandle)(flushSnapshotRef, () => flushSnapshot, [flushSnapshot]);
+    const queueSnapshot = (0, react_1.useCallback)((snapshot) => {
+        const alreadyPending = pendingSnapshotRef.current !== null;
+        pendingSnapshotRef.current = snapshot;
+        if (alreadyPending) {
+            return;
+        }
+        queueMicrotask(flushSnapshot);
+    }, [flushSnapshot]);
+    const onObservedSnapshot = (0, react_1.useCallback)((snapshot) => {
+        if (observerFailedRef.current) {
+            return;
+        }
+        observedCommitRef.current = true;
+        queueSnapshot(snapshot);
+    }, [queueSnapshot]);
+    const fallbackRegistry = (0, react_1.useMemo)(() => {
+        const entries = new Map();
+        const getSnapshot = () => {
+            const compositions = [];
+            const folders = [];
+            const orderIds = [];
+            for (const entry of entries.values()) {
+                if (entry.type === 'composition') {
+                    compositions.push(entry.value);
+                    orderIds.push((0, committed_metadata_js_1.getCompositionAndFolderOrderKey)({
+                        type: 'composition',
+                        id: entry.value.id,
+                    }));
+                }
+                else {
+                    folders.push(entry.value);
+                    orderIds.push((0, committed_metadata_js_1.getCompositionAndFolderOrderKey)({
+                        type: 'folder',
+                        id: (0, committed_metadata_js_1.getFolderOrderId)(entry.value),
+                    }));
+                }
+            }
+            return { compositions, folders, orderIds };
+        };
+        return { entries, notifyCommit: () => queueSnapshot(getSnapshot) };
+    }, [queueSnapshot]);
+    useIsomorphicLayoutEffect(() => {
+        if (onSnapshotRef.current !== onSnapshot) {
+            const previous = lastSnapshotRef.current;
+            lastSnapshotRef.current = null;
+            if (useCommitObserver && previous !== null) {
+                queueSnapshot(previous);
+            }
+        }
+        onSnapshotRef.current = onSnapshot;
+        if (!useCommitObserver) {
+            fallbackRegistry.notifyCommit();
+        }
+    }, [fallbackRegistry, onSnapshot, queueSnapshot, useCommitObserver]);
+    useIsomorphicLayoutEffect(() => {
+        unmountedRef.current = false;
+        let unmounted = false;
+        const onRegistrationError = () => {
+            if (observerFailedRef.current) {
+                return;
+            }
+            observerFailedRef.current = true;
+            pendingSnapshotRef.current = null;
+            queueMicrotask(() => {
+                if (!unmountedRef.current) {
+                    setUseCommitObserver(false);
+                }
+            });
+        };
+        if (isStudio) {
+            window.addEventListener(committed_metadata_js_1.COMMIT_REGISTRATION_ERROR_EVENT, onRegistrationError);
+            if (useCommitObserver) {
+                queueMicrotask(() => {
+                    if (!unmounted && !observedCommitRef.current) {
+                        onRegistrationError();
+                    }
+                });
+            }
+        }
+        return () => {
+            unmounted = true;
+            unmountedRef.current = true;
+            if (isStudio) {
+                window.removeEventListener(committed_metadata_js_1.COMMIT_REGISTRATION_ERROR_EVENT, onRegistrationError);
+            }
+        };
+    }, [isStudio, useCommitObserver]);
+    const metadata = (0, react_1.useMemo)(() => isStudio
+        ? {
+            type: 'composition-manager',
+            id: managerId,
+            onCommit: useCommitObserver ? onObservedSnapshot : null,
+        }
+        : null, [isStudio, managerId, onObservedSnapshot, useCommitObserver]);
+    return (jsx_runtime_1.jsx(CompositionRegistryFallbackProvider, { value: useCommitObserver ? null : fallbackRegistry, _remotionCommitMetadata: metadata, children: children }));
+});

package/dist/cjs/DefaultPremountContext.d.ts

@@ -0,0 +1 @@
+export declare const DefaultPremountContext: import("react").Context<number>;

package/dist/cjs/DefaultPremountContext.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultPremountContext = void 0;
+const react_1 = require("react");
+const default_premount_in_seconds_js_1 = require("./default-premount-in-seconds.js");
+exports.DefaultPremountContext = (0, react_1.createContext)(default_premount_in_seconds_js_1.DEFAULT_PREMOUNT_IN_SECONDS);