remotion 4.0.536 → 4.0.538

package/dist/cjs/AbsoluteFill.d.ts

@@ -9,76 +9,76 @@ export type AbsoluteFillProps = Omit<AbsoluteFillElementProps, keyof Interactive
 };
 export declare const absoluteFillSchema: {
     readonly 'style.transformOrigin': {
-        readonly type: "transform-origin";
+        readonly type: 'transform-origin';
         readonly step: 1;
-        readonly default: "50% 50%";
-        readonly description: "Transform origin";
+        readonly default: '50% 50%';
+        readonly description: 'Transform origin';
     };
     readonly 'style.translate': {
-        readonly type: "translate";
+        readonly type: 'translate';
         readonly step: 1;
-        readonly default: "0px 0px";
-        readonly description: "Offset";
+        readonly default: '0px 0px';
+        readonly description: 'Offset';
     };
     readonly 'style.scale': {
-        readonly type: "scale";
+        readonly type: 'scale';
         readonly max: 100;
         readonly step: 0.01;
         readonly default: 1;
-        readonly description: "Scale";
-        readonly defaultKeyframeOutput: "perceptual-scale";
+        readonly description: 'Scale';
+        readonly defaultKeyframeOutput: 'perceptual-scale';
     };
     readonly 'style.rotate': {
-        readonly type: "rotation-css";
+        readonly type: 'rotation-css';
         readonly step: 1;
-        readonly default: "0deg";
-        readonly description: "Rotation";
+        readonly default: '0deg';
+        readonly description: 'Rotation';
     };
     readonly 'style.opacity': {
-        readonly type: "number";
+        readonly type: 'number';
         readonly min: 0;
         readonly max: 1;
         readonly step: 0.01;
         readonly default: 1;
-        readonly description: "Opacity";
+        readonly description: 'Opacity';
         readonly hiddenFromList: false;
     };
     readonly 'style.color': {
-        readonly type: "color";
+        readonly type: 'color';
         readonly default: undefined;
-        readonly description: "Color";
+        readonly description: 'Color';
     };
     readonly 'style.fontFamily': {
-        readonly type: "font-family";
+        readonly type: 'font-family';
         readonly default: undefined;
-        readonly description: "Font family";
+        readonly description: 'Font family';
         readonly keyframable: false;
     };
     readonly 'style.fontSize': {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: undefined;
         readonly min: 0;
         readonly step: 1;
-        readonly description: "Font size";
+        readonly description: 'Font size';
         readonly hiddenFromList: false;
     };
     readonly 'style.lineHeight': {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: undefined;
         readonly min: 0;
         readonly step: 0.05;
-        readonly description: "Line height";
+        readonly description: 'Line height';
         readonly hiddenFromList: false;
     };
     readonly 'style.fontWeight': {
-        readonly type: "font-weight";
+        readonly type: 'font-weight';
         readonly default: 400;
-        readonly description: "Font weight";
+        readonly description: 'Font weight';
     };
     readonly 'style.fontStyle': {
-        readonly type: "enum";
-        readonly default: "normal";
-        readonly description: "Font style";
+        readonly type: 'enum';
+        readonly default: 'normal';
+        readonly description: 'Font style';
         readonly variants: {
             readonly normal: {};
             readonly italic: {};
@@ -86,9 +86,9 @@ export declare const absoluteFillSchema: {
         };
     };
     readonly 'style.textAlign': {
-        readonly type: "enum";
-        readonly default: "left";
-        readonly description: "Text align";
+        readonly type: 'enum';
+        readonly default: 'left';
+        readonly description: 'Text align';
         readonly variants: {
             readonly left: {};
             readonly center: {};
@@ -99,24 +99,24 @@ export declare const absoluteFillSchema: {
         };
     };
     readonly 'style.letterSpacing': {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: undefined;
         readonly step: 0.1;
-        readonly description: "Letter spacing";
+        readonly description: 'Letter spacing';
         readonly hiddenFromList: false;
     };
     readonly 'style.borderWidth': {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: undefined;
         readonly min: 0;
         readonly step: 1;
-        readonly description: "Border width";
+        readonly description: 'Border width';
         readonly hiddenFromList: false;
     };
     readonly 'style.borderStyle': {
-        readonly type: "enum";
-        readonly default: "none";
-        readonly description: "Border style";
+        readonly type: 'enum';
+        readonly default: 'none';
+        readonly description: 'Border style';
         readonly variants: {
             readonly none: {};
             readonly hidden: {};
@@ -131,68 +131,68 @@ export declare const absoluteFillSchema: {
         };
     };
     readonly 'style.borderColor': {
-        readonly type: "color";
+        readonly type: 'color';
         readonly default: undefined;
-        readonly description: "Border color";
+        readonly description: 'Border color';
     };
     readonly 'style.borderRadius': {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
         readonly min: 0;
         readonly step: 1;
-        readonly description: "Border radius";
+        readonly description: 'Border radius';
         readonly hiddenFromList: false;
         readonly keyframable: true;
     };
     readonly 'style.borderTopLeftRadius': {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
         readonly min: 0;
         readonly step: 1;
-        readonly description: "Top left radius";
+        readonly description: 'Top left radius';
         readonly hiddenFromList: false;
     };
     readonly 'style.borderTopRightRadius': {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
         readonly min: 0;
         readonly step: 1;
-        readonly description: "Top right radius";
+        readonly description: 'Top right radius';
         readonly hiddenFromList: false;
     };
     readonly 'style.borderBottomRightRadius': {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
         readonly min: 0;
         readonly step: 1;
-        readonly description: "Bottom right radius";
+        readonly description: 'Bottom right radius';
         readonly hiddenFromList: false;
     };
     readonly 'style.borderBottomLeftRadius': {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
         readonly min: 0;
         readonly step: 1;
-        readonly description: "Bottom left radius";
+        readonly description: 'Bottom left radius';
         readonly hiddenFromList: false;
     };
     readonly 'style.backgroundColor': {
-        readonly type: "color";
-        readonly default: "transparent";
-        readonly description: "Color";
+        readonly type: 'color';
+        readonly default: 'transparent';
+        readonly description: 'Color';
     };
     readonly children: import("./interactivity-schema.js").InteractivitySchemaField;
     readonly premountFor: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: undefined;
-        readonly description: "Premount For";
+        readonly description: 'Premount For';
         readonly min: 0;
         readonly step: 1;
         readonly hiddenFromList: false;
         readonly keyframable: false;
     };
     readonly postmountFor: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
         readonly min: 0;
         readonly step: 1;
@@ -200,36 +200,36 @@ export declare const absoluteFillSchema: {
         readonly keyframable: false;
     };
     readonly durationInFrames: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: undefined;
         readonly min: 1;
         readonly step: 1;
         readonly hiddenFromList: true;
     };
     readonly from: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
         readonly step: 1;
         readonly hiddenFromList: true;
     };
     readonly trimBefore: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
         readonly min: 0;
         readonly step: 1;
         readonly hiddenFromList: true;
     };
     readonly playbackRate: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 1;
         readonly min: 0.01;
         readonly step: 0.1;
-        readonly description: "Playback rate";
+        readonly description: 'Playback rate';
         readonly hiddenFromList: false;
         readonly keyframable: false;
     };
     readonly freeze: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: null;
         readonly step: 1;
         readonly hiddenFromList: true;
@@ -242,5 +242,5 @@ export declare const AbsoluteFill: React.ComponentType<Omit<AbsoluteFillElementP
     /**
      * @deprecated For internal use only
      */
-    readonly stack?: string | undefined;
+    readonly stack?: string;
 }>;

package/dist/cjs/AbsoluteFill.js

@@ -46,7 +46,7 @@ const AbsoluteFillWithTiming = ({ ref: callbackRef, from, premountFor, postmount
         styleWhilePostmounted: styleWhilePostmounted !== null && styleWhilePostmounted !== void 0 ? styleWhilePostmounted : null,
         hideWhilePremounted: 'opacity',
     });
-    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, _remotionInternalIsPremounting: premountingActive, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, trimBefore: trimBefore, playbackRate: playbackRate, loop: loop, freeze: freeze, durationInFrames: durationInFrames, hidden: hidden, name: name !== null && name !== void 0 ? name : '<AbsoluteFill>', showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, controls: controls, _remotionInternalStack: stack, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/absolute-fill", _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: jsx_runtime_1.jsx(AbsoluteFillElement_js_1.AbsoluteFillElement, { ref: callbackRef, ...divProps, style: premountingStyle !== null && premountingStyle !== void 0 ? premountingStyle : undefined, children: children }) }) }));
+    return ((0, jsx_runtime_1.jsx)(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, _remotionInternalIsPremounting: premountingActive, children: (0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, trimBefore: trimBefore, playbackRate: playbackRate, loop: loop, freeze: freeze, durationInFrames: durationInFrames, hidden: hidden, name: name !== null && name !== void 0 ? name : '<AbsoluteFill>', showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, controls: controls, _remotionInternalStack: stack, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/absolute-fill", _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: (0, jsx_runtime_1.jsx)(AbsoluteFillElement_js_1.AbsoluteFillElement, { ref: callbackRef, ...divProps, style: premountingStyle !== null && premountingStyle !== void 0 ? premountingStyle : undefined, children: children }) }) }));
 };
 const AbsoluteFillInner = ({ ref, from, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, trimBefore, playbackRate, loop, freeze, durationInFrames, hidden, name, showInTimeline, stack, controls, children, ...divProps }) => {
     const videoConfig = (0, use_unsafe_video_config_js_1.useUnsafeVideoConfig)();
@@ -54,9 +54,9 @@ const AbsoluteFillInner = ({ ref, from, premountFor, postmountFor, styleWhilePre
         setRef(ref, element);
     }, [ref]);
     if (videoConfig === null) {
-        return hidden ? null : (jsx_runtime_1.jsx(AbsoluteFillElement_js_1.AbsoluteFillElement, { ref: callbackRef, ...divProps, children: children }));
+        return hidden ? null : ((0, jsx_runtime_1.jsx)(AbsoluteFillElement_js_1.AbsoluteFillElement, { ref: callbackRef, ...divProps, children: children }));
     }
-    return (jsx_runtime_1.jsx(AbsoluteFillWithTiming, { ...divProps, ref: callbackRef, from: from, premountFor: premountFor, postmountFor: postmountFor, styleWhilePremounted: styleWhilePremounted, styleWhilePostmounted: styleWhilePostmounted, trimBefore: trimBefore, playbackRate: playbackRate, loop: loop, freeze: freeze, durationInFrames: durationInFrames, hidden: hidden, name: name, showInTimeline: showInTimeline, stack: stack, controls: controls, children: children }));
+    return ((0, jsx_runtime_1.jsx)(AbsoluteFillWithTiming, { ...divProps, ref: callbackRef, from: from, premountFor: premountFor, postmountFor: postmountFor, styleWhilePremounted: styleWhilePremounted, styleWhilePostmounted: styleWhilePostmounted, trimBefore: trimBefore, playbackRate: playbackRate, loop: loop, freeze: freeze, durationInFrames: durationInFrames, hidden: hidden, name: name, showInTimeline: showInTimeline, stack: stack, controls: controls, children: children }));
 };
 /*
  * @description A helper component which renders an absolutely positioned <div> element with full width, height, and flex display suited for content layering.

package/dist/cjs/AbsoluteFillElement.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 export type AbsoluteFillElementProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
-export declare const AbsoluteFillElement: React.ForwardRefExoticComponent<Omit<AbsoluteFillElementProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const AbsoluteFillElement: React.NamedExoticComponent<Omit<AbsoluteFillElementProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/cjs/AbsoluteFillElement.js

@@ -1,8 +1,41 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AbsoluteFillElement = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const hasTailwindClassName = ({ className, classPrefix, type, }) => {
     if (!className) {
         return false;
@@ -106,6 +139,6 @@ const AbsoluteFillElementRefForwarding = (props, ref) => {
             ...style,
         };
     }, [other.className, style]);
-    return jsx_runtime_1.jsx("div", { ref: ref, style: actualStyle, ...other });
+    return (0, jsx_runtime_1.jsx)("div", { ref: ref, style: actualStyle, ...other });
 };
-exports.AbsoluteFillElement = (0, react_1.forwardRef)(AbsoluteFillElementRefForwarding);
+exports.AbsoluteFillElement = react_1.default.memo((0, react_1.forwardRef)(AbsoluteFillElementRefForwarding));

package/dist/cjs/CanUseRemotionHooks.js

@@ -5,6 +5,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 exports.CanUseRemotionHooks = (0, react_1.createContext)(false);
 const CanUseRemotionHooksProvider = ({ children }) => {
-    return (jsx_runtime_1.jsx(exports.CanUseRemotionHooks.Provider, { value: true, children: children }));
+    return ((0, jsx_runtime_1.jsx)(exports.CanUseRemotionHooks.Provider, { value: true, children: children }));
 };
 exports.CanUseRemotionHooksProvider = CanUseRemotionHooksProvider;

package/dist/cjs/Composition.js

@@ -100,14 +100,8 @@ const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultPro
     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) => {
-        setError(error);
-    }, [setError]);
-    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 }));
+    const { setError: onError, clearError: onClear } = (0, react_1.useContext)(composition_render_error_context_js_1.CompositionRenderErrorContext);
+    const wrapRegistration = (content) => ((0, jsx_runtime_1.jsx)(committed_metadata_js_1.CommittedMetadataProvider, { value: null, _remotionCommitMetadata: metadata, children: content }));
     if (environment.isStudio &&
         video &&
         video.component === lazy &&
@@ -118,7 +112,7 @@ const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultPro
                 resolved.type !== 'success-and-refreshing')) {
             return wrapRegistration(null);
         }
-        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)()));
+        return wrapRegistration((0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(CanUseRemotionHooks_js_1.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(CompositionErrorBoundary_js_1.CompositionErrorBoundary, { onError: onError, onClear: onClear, children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(loading_indicator_js_1.Loading, {}), children: (0, jsx_runtime_1.jsx)(Comp, { ...((_c = resolved.result.props) !== null && _c !== void 0 ? _c : {}) }) }) }) }), (0, portal_node_js_1.portalNode)()));
     }
     if (environment.isRendering &&
         video &&
@@ -130,7 +124,7 @@ const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultPro
                 resolved.type !== 'success-and-refreshing')) {
             return wrapRegistration(null);
         }
-        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 wrapRegistration((0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(CanUseRemotionHooks_js_1.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(Fallback, {}), children: (0, jsx_runtime_1.jsx)(Comp, { ...((_d = resolved.result.props) !== null && _d !== void 0 ? _d : {}) }) }) }), (0, portal_node_js_1.portalNode)()));
     }
     return wrapRegistration(null);
 };
@@ -144,6 +138,6 @@ const Composition = (props) => {
         return null;
     }
     // @ts-expect-error
-    return jsx_runtime_1.jsx(InnerComposition, { ...props });
+    return (0, jsx_runtime_1.jsx)(InnerComposition, { ...props });
 };
 exports.Composition = Composition;

package/dist/cjs/CompositionErrorBoundary.js

@@ -18,8 +18,11 @@ const getHot = () => {
     }
 };
 class CompositionErrorBoundary extends react_1.default.Component {
-    state = { hasError: false };
-    hmrStatusHandler = null;
+    constructor() {
+        super(...arguments);
+        this.state = { hasError: false };
+        this.hmrStatusHandler = null;
+    }
     static getDerivedStateFromError() {
         return { hasError: true };
     }

package/dist/cjs/CompositionManager.d.ts

@@ -112,6 +112,7 @@ export type AudioOrVideoAsset = {
     toneFrequency: number;
     audioStartFrame: number;
     audioStreamIndex: number;
+    preservePitch: boolean | null;
 };
 export type InlineAudioAsset = {
     type: 'inline-audio';

package/dist/cjs/CompositionManagerContext.d.ts

@@ -38,4 +38,7 @@ export type CompositionManagerContext = {
     canvasContent: CanvasContent | null;
 };
 export declare const CompositionManager: React.Context<CompositionManagerContext>;
+export declare const CompositionManagerRefContext: React.Context<{
+    readonly current: CompositionManagerContext;
+}>;
 export declare const CompositionSetters: React.Context<CompositionManagerSetters>;

package/dist/cjs/CompositionManagerContext.js

@@ -1,16 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CompositionSetters = exports.CompositionManager = exports.getAssetPreviewCompositionId = void 0;
+exports.CompositionSetters = exports.CompositionManagerRefContext = exports.CompositionManager = exports.getAssetPreviewCompositionId = void 0;
 const react_1 = require("react");
 const getAssetPreviewCompositionId = (asset) => `asset:${asset}`;
 exports.getAssetPreviewCompositionId = getAssetPreviewCompositionId;
-exports.CompositionManager = (0, react_1.createContext)({
+const defaultCompositionManagerContext = {
     compositions: [],
     folders: [],
     currentCompositionMetadata: null,
     currentAssetMetadata: null,
     canvasContent: null,
-});
+};
+exports.CompositionManager = (0, react_1.createContext)(defaultCompositionManagerContext);
+exports.CompositionManagerRefContext = (0, react_1.createContext)({ current: defaultCompositionManagerContext });
 exports.CompositionSetters = (0, react_1.createContext)({
     setCanvasContent: () => undefined,
     setCurrentAssetMetadata: () => undefined,

package/dist/cjs/CompositionManagerProvider.d.ts

@@ -2,7 +2,7 @@ import { type AnyComposition } from './CompositionManager';
 import type { CanvasContent } from './CompositionManagerContext';
 import type { BaseMetadata } from './CompositionManagerContext.js';
 export declare const CompositionManagerProvider: ({ children, onlyRenderComposition, currentCompositionMetadata, initialCompositions, initialCanvasContent, }: {
-    readonly children: import("react").ReactNode;
+    readonly children: React.ReactNode;
     readonly onlyRenderComposition: string | null;
     readonly currentCompositionMetadata: BaseMetadata | null;
     readonly initialCompositions: AnyComposition[];

package/dist/cjs/CompositionManagerProvider.js

@@ -103,9 +103,11 @@ const CompositionManagerProvider = ({ children, onlyRenderComposition, currentCo
         currentAssetMetadata,
         canvasContent,
     ]);
+    const compositionManagerRef = (0, react_1.useRef)(compositionManagerContextValue);
+    compositionManagerRef.current = compositionManagerContextValue;
     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 }) }) }));
+    return ((0, jsx_runtime_1.jsx)(CompositionRegistryProvider_js_1.CompositionRegistryProvider, { ref: flushSnapshotRef, onSnapshot: onCommitRegistrations, children: (0, jsx_runtime_1.jsx)(CompositionManagerContext_1.CompositionManager.Provider, { value: compositionManagerContextValue, children: (0, jsx_runtime_1.jsx)(CompositionManagerContext_1.CompositionManagerRefContext.Provider, { value: compositionManagerRef, children: (0, jsx_runtime_1.jsx)(CompositionManagerContext_1.CompositionSetters.Provider, { value: compositionManagerSetters, children: children }) }) }) }));
 };
 exports.CompositionManagerProvider = CompositionManagerProvider;

package/dist/cjs/CompositionRegistryProvider.d.ts

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

package/dist/cjs/CompositionRegistryProvider.js

@@ -138,5 +138,5 @@ exports.CompositionRegistryProvider = (0, react_1.forwardRef)(({ children, onSna
             onCommit: useCommitObserver ? onObservedSnapshot : null,
         }
         : null, [isStudio, managerId, onObservedSnapshot, useCommitObserver]);
-    return (jsx_runtime_1.jsx(CompositionRegistryFallbackProvider, { value: useCommitObserver ? null : fallbackRegistry, _remotionCommitMetadata: metadata, children: children }));
+    return ((0, jsx_runtime_1.jsx)(CompositionRegistryFallbackProvider, { value: useCommitObserver ? null : fallbackRegistry, _remotionCommitMetadata: metadata, children: children }));
 });

package/dist/cjs/EditorProps.d.ts

@@ -13,9 +13,9 @@ export declare const EditorPropsContext: React.Context<EditorPropsContextType>;
 export declare const timeValueRef: React.RefObject<{
     goToFrame: () => void;
     seek: (newFrame: number) => void;
-    play: (e?: PointerEvent | SyntheticEvent<Element, Event> | undefined) => void;
+    play: (e?: SyntheticEvent | PointerEvent) => void;
     pause: () => void;
-    toggle: (e?: PointerEvent | SyntheticEvent<Element, Event> | undefined) => void;
+    toggle: (e?: SyntheticEvent | PointerEvent) => void;
 } | null>;
 export declare const EditorPropsProvider: React.FC<{
     readonly children: React.ReactNode;

package/dist/cjs/EditorProps.js

@@ -59,6 +59,6 @@ const EditorPropsProvider = ({ children }) => {
     const ctx = (0, react_1.useMemo)(() => {
         return { props, updateProps };
     }, [props, updateProps]);
-    return (jsx_runtime_1.jsx(exports.EditorPropsContext.Provider, { value: ctx, children: children }));
+    return ((0, jsx_runtime_1.jsx)(exports.EditorPropsContext.Provider, { value: ctx, children: children }));
 };
 exports.EditorPropsProvider = EditorPropsProvider;

package/dist/cjs/Folder.js

@@ -38,6 +38,6 @@ const Folder = (props) => {
         value: registration,
     }), [name, parentName, registration]);
     (0, composition_registry_fallback_js_1.useCommittedCompositionEntry)(metadata);
-    return (jsx_runtime_1.jsx(FolderContextProvider, { value: value, _remotionCommitMetadata: metadata, children: children }));
+    return ((0, jsx_runtime_1.jsx)(FolderContextProvider, { value: value, _remotionCommitMetadata: metadata, children: children }));
 };
 exports.Folder = Folder;