remotion 4.0.533 → 4.0.535

package/dist/cjs/audio/AudioForPreview.js

@@ -37,11 +37,12 @@ exports.AudioForPreview = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = __importStar(require("react"));
+const committed_metadata_js_1 = require("../committed-metadata.js");
 const get_cross_origin_value_js_1 = require("../get-cross-origin-value.js");
 const log_level_context_js_1 = require("../log-level-context.js");
 const prefetch_js_1 = require("../prefetch.js");
 const random_js_1 = require("../random.js");
-const sequence_order_marker_js_1 = require("../sequence-order-marker.js");
+const sequence_activity_context_js_1 = require("../sequence-activity-context.js");
 const SequenceContext_js_1 = require("../SequenceContext.js");
 const use_amplification_js_1 = require("../use-amplification.js");
 const use_media_in_timeline_js_1 = require("../use-media-in-timeline.js");
@@ -55,38 +56,24 @@ const shared_audio_tags_js_1 = require("./shared-audio-tags.js");
 const use_audio_frame_js_1 = require("./use-audio-frame.js");
 const use_media_audio_state_js_1 = require("./use-media-audio-state.js");
 const AudioForDevelopmentForwardRefFunction = (props, ref) => {
-    var _a, _b, _c;
+    var _a;
     const [initialShouldPreMountAudioElements] = (0, react_2.useState)(props.shouldPreMountAudioTags);
     if (props.shouldPreMountAudioTags !== initialShouldPreMountAudioElements) {
         throw new Error('Cannot change the behavior for pre-mounting audio tags dynamically.');
     }
     const logLevel = (0, log_level_context_js_1.useLogLevel)();
-    const { volume, muted, playbackRate, preservePitch, shouldPreMountAudioTags, src, onDuration, acceptableTimeShiftInSeconds, _remotionInternalNeedsDurationCalculation, _remotionInternalNativeLoopPassed, _remotionInternalStack, allowAmplificationDuringRender, name, pauseWhenBuffering, showInTimeline, loopVolumeCurveBehavior, crossOrigin, delayRenderRetries, delayRenderTimeoutInMilliseconds, toneFrequency, useWebAudioApi, onError, onNativeError, audioStreamIndex, ...nativeProps } = props;
+    const { timelineId, userPreferredVolume, isMutedForPlayback, volume, muted, playbackRate, preservePitch, shouldPreMountAudioTags, src, onDuration, acceptableTimeShiftInSeconds, _remotionInternalNeedsDurationCalculation, _remotionInternalNativeLoopPassed, _remotionInternalStack, allowAmplificationDuringRender, name, pauseWhenBuffering, showInTimeline, loopVolumeCurveBehavior, crossOrigin, delayRenderRetries, delayRenderTimeoutInMilliseconds, toneFrequency, useWebAudioApi, onError, onNativeError, audioStreamIndex, ...nativeProps } = props;
     // Typecheck that we are not accidentially passing unrecognized props
     // to the DOM
     const _propsValid = true;
     if (!_propsValid) {
         throw new Error('typecheck error');
     }
-    const [mediaVolume] = (0, volume_position_state_js_1.useMediaVolumeState)();
-    const volumePropFrame = (0, use_audio_frame_js_1.useFrameForVolumeProp)(loopVolumeCurveBehavior !== null && loopVolumeCurveBehavior !== void 0 ? loopVolumeCurveBehavior : 'repeat');
     if (!src) {
         throw new TypeError("No 'src' was passed to <Html5Audio>.");
     }
     const preloadedSrc = (0, prefetch_js_1.usePreload)(src);
     const sequenceContext = (0, react_2.useContext)(SequenceContext_js_1.SequenceContext);
-    const { isStudio } = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
-    const [timelineId] = (0, react_2.useState)(() => String(Math.random()));
-    const userPreferredVolume = (0, volume_prop_js_1.evaluateVolume)({
-        frame: volumePropFrame,
-        volume,
-        mediaVolume,
-    });
-    const { isMutedForTimeline, isMutedForPlayback } = (0, use_media_audio_state_js_1.useMediaAudioState)({
-        muted: muted !== null && muted !== void 0 ? muted : false,
-        volume: userPreferredVolume,
-        audioEnabled: true,
-    });
     (0, volume_safeguard_js_1.warnAboutTooHighVolume)(userPreferredVolume);
     const crossOriginValue = (0, get_cross_origin_value_js_1.getCrossOriginValue)({
         crossOrigin,
@@ -124,26 +111,6 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
         premounting: Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premounting),
         postmounting: Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.postmounting),
     });
-    const getStack = (0, react_1.useCallback)(() => {
-        return _remotionInternalStack !== null && _remotionInternalStack !== void 0 ? _remotionInternalStack : null;
-    }, [_remotionInternalStack]);
-    (0, use_media_in_timeline_js_1.useMediaInTimeline)({
-        volume,
-        mediaVolume,
-        src,
-        mediaType: 'audio',
-        playbackRate: playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1,
-        displayName: name !== null && name !== void 0 ? name : null,
-        id: timelineId,
-        getStack,
-        showInTimeline,
-        premountDisplay: (_a = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premountDisplay) !== null && _a !== void 0 ? _a : null,
-        postmountDisplay: (_b = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.postmountDisplay) !== null && _b !== void 0 ? _b : null,
-        loopDisplay: undefined,
-        loopVolumeCurveBehavior: loopVolumeCurveBehavior !== null && loopVolumeCurveBehavior !== void 0 ? loopVolumeCurveBehavior : 'repeat',
-        documentationLink: 'https://www.remotion.dev/docs/html5-audio',
-        muted: isMutedForTimeline,
-    });
     // putting playback before useVolume
     // because volume looks at playbackrate
     (0, use_media_playback_js_1.useMediaPlayback)({
@@ -181,7 +148,7 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
      *
      * Need to import it from React to fix React 17 ESM support.
      */
-    const effectToUse = (_c = react_2.default.useInsertionEffect) !== null && _c !== void 0 ? _c : react_2.default.useLayoutEffect;
+    const effectToUse = (_a = react_2.default.useInsertionEffect) !== null && _a !== void 0 ? _a : react_2.default.useLayoutEffect;
     // Disconnecting the SharedElementSourceNodes if the Audio tag unmounts to prevent leak.
     // https://github.com/remotion-dev/remotion/issues/6285
     // But useInsertionEffect will fire before other effects, meaning the
@@ -218,9 +185,55 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
         };
     }, [audioRef, src]);
     if (initialShouldPreMountAudioElements) {
-        return isStudio ? (jsx_runtime_1.jsx(sequence_order_marker_js_1.SequenceOrderMarker, { sequenceId: timelineId, outlineChildrenRef: null, children: null })) : null;
+        return null;
     }
     const audio = (jsx_runtime_1.jsx("audio", { ref: audioRef, preload: "metadata", crossOrigin: crossOriginValue, ...propsToPass }));
-    return isStudio ? (jsx_runtime_1.jsx(sequence_order_marker_js_1.SequenceOrderMarker, { sequenceId: timelineId, outlineChildrenRef: null, children: audio })) : (audio);
+    return audio;
+};
+const AudioForPreviewContent = (0, react_2.forwardRef)(AudioForDevelopmentForwardRefFunction);
+const AudioForPreviewRefForwardingFunction = (props, ref) => {
+    var _a, _b;
+    const { volume, muted, playbackRate, src, name, _remotionInternalStack, showInTimeline, loopVolumeCurveBehavior, } = props;
+    const [timelineId] = (0, react_2.useState)(() => String(Math.random()));
+    const sequenceContext = (0, react_2.useContext)(SequenceContext_js_1.SequenceContext);
+    const { isStudio } = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
+    const [mediaVolume] = (0, volume_position_state_js_1.useMediaVolumeState)();
+    const volumePropFrame = (0, use_audio_frame_js_1.useFrameForVolumeProp)(loopVolumeCurveBehavior !== null && loopVolumeCurveBehavior !== void 0 ? loopVolumeCurveBehavior : 'repeat');
+    const userPreferredVolume = (0, volume_prop_js_1.evaluateVolume)({
+        frame: volumePropFrame,
+        volume,
+        mediaVolume,
+    });
+    const { isMutedForTimeline, isMutedForPlayback } = (0, use_media_audio_state_js_1.useMediaAudioState)({
+        muted: muted !== null && muted !== void 0 ? muted : false,
+        volume: userPreferredVolume,
+        audioEnabled: true,
+    });
+    const getStack = (0, react_1.useCallback)(() => {
+        return _remotionInternalStack !== null && _remotionInternalStack !== void 0 ? _remotionInternalStack : null;
+    }, [_remotionInternalStack]);
+    const { registration } = (0, use_media_in_timeline_js_1.useMediaInTimelineRegistration)({
+        src,
+        mediaType: 'audio',
+        playbackRate: playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1,
+        displayName: name !== null && name !== void 0 ? name : null,
+        id: timelineId,
+        getStack,
+        showInTimeline,
+        premountDisplay: (_a = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premountDisplay) !== null && _a !== void 0 ? _a : null,
+        postmountDisplay: (_b = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.postmountDisplay) !== null && _b !== void 0 ? _b : null,
+        loopDisplay: undefined,
+        documentationLink: 'https://www.remotion.dev/docs/html5-audio',
+        muted: isMutedForTimeline,
+    });
+    const metadata = (0, react_2.useMemo)(() => isStudio || registration !== null
+        ? {
+            type: 'sequence',
+            id: timelineId,
+            value: registration,
+            outlineChildrenRef: null,
+        }
+        : null, [isStudio, registration, timelineId]);
+    return (jsx_runtime_1.jsx(committed_metadata_js_1.CommittedMetadataProvider, { value: null, _remotionCommitMetadata: metadata, children: jsx_runtime_1.jsx(sequence_activity_context_js_1.SequenceContent, { children: jsx_runtime_1.jsx(AudioForPreviewContent, { ...props, ref: ref, timelineId: timelineId, userPreferredVolume: userPreferredVolume, isMutedForPlayback: isMutedForPlayback }) }) }));
 };
-exports.AudioForPreview = (0, react_2.forwardRef)(AudioForDevelopmentForwardRefFunction);
+exports.AudioForPreview = (0, react_2.forwardRef)(AudioForPreviewRefForwardingFunction);

package/dist/cjs/audio/get-audio-sync-anchor-tolerance.d.ts

@@ -0,0 +1 @@
+export declare const getAudioSyncAnchorTolerance: (audioContext: AudioContext) => number;

package/dist/cjs/audio/get-audio-sync-anchor-tolerance.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAudioSyncAnchorTolerance = void 0;
+const ALLOWED_GLOBAL_TIME_ANCHOR_SHIFT = 0.1;
+// The tolerance is measured in AudioContext seconds.
+const getAudioSyncAnchorTolerance = (audioContext) => {
+    const { baseLatency, outputLatency } = audioContext;
+    const safeOutputLatency = outputLatency === 0 ? 0.3 : outputLatency;
+    return ALLOWED_GLOBAL_TIME_ANCHOR_SHIFT + baseLatency + safeOutputLatency;
+};
+exports.getAudioSyncAnchorTolerance = getAudioSyncAnchorTolerance;

package/dist/cjs/audio/use-audio-context.js

@@ -46,6 +46,8 @@ const useSingletonAudioContext = ({ logLevel, latencyHint, audioEnabled, sampleR
         // Tracks the state we are transitioning towards while resume()/suspend()
         // have been called but the native state has not updated yet.
         let transitionTarget = null;
+        let transitionId = 0;
+        let pendingResume = null;
         const getState = () => {
             const nativeState = audioContext.state;
             if (transitionTarget === 'running' && nativeState !== 'running') {
@@ -57,24 +59,41 @@ const useSingletonAudioContext = ({ logLevel, latencyHint, audioEnabled, sampleR
             return nativeState;
         };
         const resume = () => {
+            const id = ++transitionId;
             transitionTarget = 'running';
+            // Keep resume synchronous so it retains the browser's user activation.
             const promise = audioContext.resume();
-            promise.finally(() => {
-                if (transitionTarget === 'running') {
+            pendingResume = promise;
+            return promise.finally(() => {
+                if (pendingResume === promise) {
+                    pendingResume = null;
+                }
+                if (transitionId === id) {
                     transitionTarget = null;
                 }
             });
-            return promise;
         };
         const suspend = () => {
+            const id = ++transitionId;
             transitionTarget = 'suspended';
-            const promise = audioContext.suspend();
-            promise.finally(() => {
-                if (transitionTarget === 'suspended') {
+            // Chromium can freeze the audio clock if suspend runs before an
+            // in-flight resume settles, while its reported state is still suspended.
+            // A newer playback request must cancel this deferred suspension.
+            const promise = pendingResume
+                ? pendingResume
+                    .catch(() => { })
+                    .then(() => {
+                    if (transitionId !== id) {
+                        return;
+                    }
+                    return audioContext.suspend();
+                })
+                : audioContext.suspend();
+            return promise.finally(() => {
+                if (transitionId === id) {
                     transitionTarget = null;
                 }
             });
-            return promise;
         };
         return {
             audioContext,

package/dist/cjs/canvas-image/CanvasImage.js

@@ -12,6 +12,7 @@ const freeze_js_1 = require("../freeze.js");
 const interactivity_schema_js_1 = require("../interactivity-schema.js");
 const prefetch_js_1 = require("../prefetch.js");
 const resolve_sequence_duration_js_1 = require("../resolve-sequence-duration.js");
+const sequence_activity_context_js_1 = require("../sequence-activity-context.js");
 const Sequence_js_1 = require("../Sequence.js");
 const SequenceContext_js_1 = require("../SequenceContext.js");
 const truncate_src_for_label_js_1 = require("../truncate-src-for-label.js");
@@ -111,7 +112,7 @@ const waitForNextFrame = ({ onFrame, }) => {
     return () => cancelAnimationFrame(frame);
 };
 const CanvasImageContent = (0, react_1.forwardRef)(({ src, crossOrigin, width, height, fit = 'fill', effects, controls, onError, className, style, id, pauseWhenLoading, maxRetries = 2, delayRenderRetries, delayRenderTimeoutInMilliseconds, ...canvasProps }, ref) => {
-    var _a;
+    var _a, _b;
     const { delayRender, continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
     const { delayPlayback } = (0, use_buffer_state_js_1.useBufferState)();
     const [outputCanvas, setOutputCanvas] = (0, react_1.useState)(null);
@@ -121,6 +122,7 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, crossOrigin, width, h
     const memoizedEffects = (0, use_memoized_effects_js_1.useMemoizedEffects)({
         effects,
         overrideId: (_a = controls === null || controls === void 0 ? void 0 : controls.overrideId) !== null && _a !== void 0 ? _a : null,
+        videoConfigValues: (_b = controls === null || controls === void 0 ? void 0 : controls.videoConfigValues) !== null && _b !== void 0 ? _b : null,
     });
     const sequenceContext = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
     const pendingLoadDelayRef = (0, react_1.useRef)(null);
@@ -363,7 +365,7 @@ const CanvasImageInner = (0, react_1.forwardRef)(({ src, crossOrigin, width, hei
         style: premountingStyle,
         componentName: _remotionInternalCropComponentName !== null && _remotionInternalCropComponentName !== void 0 ? _remotionInternalCropComponentName : '<CanvasImage />',
     });
-    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, loop: loop, durationInFrames: durationInFrames, freeze: freeze, hidden: hidden, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, name: name !== null && name !== void 0 ? name : '<CanvasImage>', _remotionInternalDocumentationLink: _remotionInternalDocumentationLink !== null && _remotionInternalDocumentationLink !== void 0 ? _remotionInternalDocumentationLink : 'https://www.remotion.dev/docs/canvasimage', controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalIsMedia: isMedia, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: jsx_runtime_1.jsx(CanvasImageContent, { ref: actualRef, src: src, crossOrigin: crossOrigin, width: width, height: height, fit: fit, effects: effects, controls: controls, className: className, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, id: id, onError: onError, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, ...canvasProps }) }) }));
+    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, loop: loop, durationInFrames: durationInFrames, freeze: freeze, hidden: hidden, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, name: name !== null && name !== void 0 ? name : '<CanvasImage>', _remotionInternalDocumentationLink: _remotionInternalDocumentationLink !== null && _remotionInternalDocumentationLink !== void 0 ? _remotionInternalDocumentationLink : 'https://www.remotion.dev/docs/canvasimage', controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalIsMedia: isMedia, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: jsx_runtime_1.jsx(sequence_activity_context_js_1.SequenceContent, { children: jsx_runtime_1.jsx(CanvasImageContent, { ref: actualRef, src: src, crossOrigin: crossOrigin, width: width, height: height, fit: fit, effects: effects, controls: controls, className: className, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, id: id, onError: onError, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, ...canvasProps }) }) }) }));
 });
 /*
  * @description Renders a static image to a `<canvas>` and applies Remotion effects.

package/dist/cjs/committed-metadata.d.ts

@@ -0,0 +1,68 @@
+import type { Provider, ProviderExoticComponent, ProviderProps, RefObject } from 'react';
+import type { AnyComposition, TSequence } from './CompositionManager.js';
+import type { TFolder } from './Folder.js';
+export declare const COMMIT_ORDER_EVENT = "remotion:commit-order";
+export declare const COMMIT_REGISTRATION_ERROR_EVENT = "remotion:commit-registration-error";
+export declare const isCommitRegistrationObserverInstalled: () => boolean;
+export type CompositionAndFolderOrderItem = {
+    readonly type: 'composition';
+    readonly id: string;
+} | {
+    readonly type: 'folder';
+    readonly id: string;
+};
+export declare const getCompositionAndFolderOrderKey: (item: CompositionAndFolderOrderItem) => string;
+export type CommitOrderEventDetail = {
+    readonly sequenceManagers: readonly {
+        readonly managerId: string;
+        readonly sequenceIds: readonly string[];
+    }[];
+};
+export declare const getFolderOrderId: ({ name, parent, }: {
+    readonly name: string;
+    readonly parent: string | null;
+}) => string;
+export type CommittedSequenceSnapshot = {
+    readonly sequences: readonly TSequence[];
+    readonly sequenceIds: readonly string[];
+};
+export type CommittedCompositionSnapshot = {
+    readonly compositions: readonly AnyComposition[];
+    readonly folders: readonly TFolder[];
+    readonly orderIds: readonly string[];
+};
+export type CommittedMetadata = {
+    readonly type: 'sequence';
+    readonly id: string;
+    readonly value: TSequence | null;
+    readonly outlineChildrenRef: RefObject<Element | null> | null;
+} | {
+    readonly type: 'composition';
+    readonly id: string;
+    readonly value: AnyComposition;
+} | {
+    readonly type: 'folder';
+    readonly id: string;
+    readonly value: TFolder;
+} | {
+    readonly type: 'sequence-manager';
+    readonly id: string;
+    readonly onCommit: ((sequences: readonly TSequence[], sequenceIds: readonly string[]) => void) | null;
+} | {
+    readonly type: 'composition-manager';
+    readonly id: string;
+    readonly onCommit: ((snapshot: CommittedCompositionSnapshot) => void) | null;
+};
+export declare const withCommittedMetadata: <T>(provider: Provider<T>) => ProviderExoticComponent<ProviderProps<T> & {
+    readonly _remotionCommitMetadata: CommittedMetadata | null;
+}>;
+export declare const CommittedMetadataProvider: ProviderExoticComponent<ProviderProps<null> & {
+    readonly _remotionCommitMetadata: CommittedMetadata | null;
+}>;
+export declare const CommittedMetadataInternals: {
+    metadataProp: "_remotionCommitMetadata";
+    eventName: string;
+    installationMarker: symbol;
+    failureMarker: symbol;
+    registrationErrorEventName: string;
+};

package/dist/cjs/committed-metadata.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CommittedMetadataInternals = exports.CommittedMetadataProvider = exports.withCommittedMetadata = exports.getFolderOrderId = exports.getCompositionAndFolderOrderKey = exports.isCommitRegistrationObserverInstalled = exports.COMMIT_REGISTRATION_ERROR_EVENT = exports.COMMIT_ORDER_EVENT = void 0;
+const react_1 = require("react");
+const COMMITTED_METADATA_PROP = '_remotionCommitMetadata';
+exports.COMMIT_ORDER_EVENT = 'remotion:commit-order';
+exports.COMMIT_REGISTRATION_ERROR_EVENT = 'remotion:commit-registration-error';
+const COMMIT_OBSERVER_INSTALLATION_MARKER = Symbol.for('remotion.commit-order-observer-installed');
+const COMMIT_OBSERVER_FAILURE_MARKER = Symbol.for('remotion.commit-registration-observer-failed');
+const isCommitRegistrationObserverInstalled = () => {
+    if (typeof window === 'undefined') {
+        return false;
+    }
+    const hook = Reflect.get(window, '__REACT_DEVTOOLS_GLOBAL_HOOK__');
+    return (typeof hook === 'object' &&
+        hook !== null &&
+        Reflect.get(hook, 'isDisabled') !== true &&
+        Reflect.get(hook, COMMIT_OBSERVER_INSTALLATION_MARKER) === true &&
+        Reflect.get(hook, COMMIT_OBSERVER_FAILURE_MARKER) !== true);
+};
+exports.isCommitRegistrationObserverInstalled = isCommitRegistrationObserverInstalled;
+const getCompositionAndFolderOrderKey = (item) => `${item.type}:${item.id}`;
+exports.getCompositionAndFolderOrderKey = getCompositionAndFolderOrderKey;
+const getFolderOrderId = ({ name, parent, }) => [parent, name].filter(Boolean).join('/');
+exports.getFolderOrderId = getFolderOrderId;
+// This is the same provider, with an additional private prop type. Metadata
+// stays outside its context value, so edits do not notify context consumers.
+const withCommittedMetadata = (provider) => provider;
+exports.withCommittedMetadata = withCommittedMetadata;
+// Leaves without an existing provider still need a committed Fiber when their
+// content is null. Its constant context value never carries registry metadata.
+exports.CommittedMetadataProvider = (0, exports.withCommittedMetadata)((0, react_1.createContext)(null).Provider);
+exports.CommittedMetadataInternals = {
+    metadataProp: COMMITTED_METADATA_PROP,
+    eventName: exports.COMMIT_ORDER_EVENT,
+    installationMarker: COMMIT_OBSERVER_INSTALLATION_MARKER,
+    failureMarker: COMMIT_OBSERVER_FAILURE_MARKER,
+    registrationErrorEventName: exports.COMMIT_REGISTRATION_ERROR_EVENT,
+};

package/dist/cjs/component-identity.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+type ComponentIdentityResolver = (component: unknown) => unknown;
+export declare const setComponentIdentityResolver: (resolver: ComponentIdentityResolver | null) => void;
+export declare const resolveComponentIdentity: (component: unknown) => unknown;
+export declare const getSingleChildComponent: (children: React.ReactNode) => unknown;
+export {};

package/dist/cjs/component-identity.js

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSingleChildComponent = exports.resolveComponentIdentity = exports.setComponentIdentityResolver = void 0;
+const react_1 = __importDefault(require("react"));
+const is_inside_series_js_1 = require("./series/is-inside-series.js");
+// Studio installs a resolver that maps refreshed component implementations to
+// the stable family object maintained by React Refresh.
+let componentIdentityResolver = null;
+const setComponentIdentityResolver = (resolver) => {
+    componentIdentityResolver = resolver;
+};
+exports.setComponentIdentityResolver = setComponentIdentityResolver;
+const resolveComponentIdentity = (component) => {
+    var _a;
+    return (_a = componentIdentityResolver === null || componentIdentityResolver === void 0 ? void 0 : componentIdentityResolver(component)) !== null && _a !== void 0 ? _a : component;
+};
+exports.resolveComponentIdentity = resolveComponentIdentity;
+const getSingleChildComponent = (children) => {
+    const mountedChildren = react_1.default.Children.toArray(children);
+    if (mountedChildren.length !== 1) {
+        return null;
+    }
+    const child = mountedChildren[0];
+    if (!react_1.default.isValidElement(child)) {
+        return null;
+    }
+    // Series inserts this transparent context boundary around its authored children.
+    if (child.type === is_inside_series_js_1.IsNotInsideSeriesProvider) {
+        return (0, exports.getSingleChildComponent)(child.props.children);
+    }
+    if (typeof child.type !== 'function' && typeof child.type !== 'object') {
+        return null;
+    }
+    return (0, exports.resolveComponentIdentity)(child.type);
+};
+exports.getSingleChildComponent = getSingleChildComponent;

package/dist/cjs/composition-registry-fallback.d.ts

@@ -0,0 +1,14 @@
+import type { AnyComposition } from './CompositionManager.js';
+import type { TFolder } from './Folder.js';
+export type CommittedCompositionEntry = {
+    readonly type: 'composition';
+    readonly value: AnyComposition;
+} | {
+    readonly type: 'folder';
+    readonly value: TFolder;
+};
+export declare const CompositionRegistryFallbackContext: import("react").Context<{
+    readonly entries: Map<object, CommittedCompositionEntry>;
+    readonly notifyCommit: () => void;
+} | null>;
+export declare const useCommittedCompositionEntry: (entry: CommittedCompositionEntry | null) => void;

package/dist/cjs/composition-registry-fallback.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCommittedCompositionEntry = exports.CompositionRegistryFallbackContext = void 0;
+const react_1 = require("react");
+exports.CompositionRegistryFallbackContext = (0, react_1.createContext)(null);
+const useIsomorphicLayoutEffect = typeof window === 'undefined' ? react_1.useEffect : react_1.useLayoutEffect;
+// The fallback stages descriptors during layout effects and publishes one
+// complete snapshot after the commit, including mount and unmount changes.
+const useCommittedCompositionEntry = (entry) => {
+    const registry = (0, react_1.useContext)(exports.CompositionRegistryFallbackContext);
+    const key = (0, react_1.useRef)({});
+    useIsomorphicLayoutEffect(() => {
+        if (registry === null) {
+            return;
+        }
+        if (entry === null) {
+            registry.entries.delete(key.current);
+        }
+        else {
+            registry.entries.set(key.current, entry);
+        }
+        registry.notifyCommit();
+    }, [entry, registry]);
+    useIsomorphicLayoutEffect(() => {
+        if (registry === null) {
+            return;
+        }
+        const identity = key.current;
+        return () => {
+            registry.entries.delete(identity);
+            registry.notifyCommit();
+        };
+    }, [registry]);
+};
+exports.useCommittedCompositionEntry = useCommittedCompositionEntry;

package/dist/cjs/create-element-source-proxy.d.ts

@@ -0,0 +1,4 @@
+import type React from 'react';
+import type JsxRuntimeDev from 'react/jsx-dev-runtime';
+import type JsxRuntime from 'react/jsx-runtime';
+export declare const createElementSourceProxy: <T extends typeof React.createElement | typeof JsxRuntime.jsx | typeof JsxRuntimeDev.jsxDEV>(api: T, sourceArgumentIndex: number | null, getSourceFileName: (fileName: string) => string) => T;

package/dist/cjs/create-element-source-proxy.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createElementSourceProxy = void 0;
+const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
+const componentsToAddStacksTo = (0, enable_sequence_stack_traces_js_1.getComponentsToAddStacksTo)();
+const internalStackProp = enable_sequence_stack_traces_js_1.REMOTION_INTERNAL_STACK_PROP;
+const createElementSourceProxy = (api, sourceArgumentIndex, getSourceFileName) => {
+    return new Proxy(api, {
+        apply(target, thisArg, argArray) {
+            const component = argArray[0];
+            if (componentsToAddStacksTo.includes(component)) {
+                const [first, props, ...rest] = argArray;
+                const source = sourceArgumentIndex === null ? null : argArray[sourceArgumentIndex];
+                const existingStack = props === null || props === void 0 ? void 0 : props[internalStackProp];
+                // Internal wrappers already captured the authored location in their controls.
+                const controlsStack = !existingStack &&
+                    component === (0, enable_sequence_stack_traces_js_1.getSequenceComponent)() &&
+                    (props === null || props === void 0 ? void 0 : props.controls)
+                    ? (0, enable_sequence_stack_traces_js_1.getStackForControls)(props.controls)
+                    : null;
+                const stack = existingStack ||
+                    (controlsStack !== null && controlsStack !== void 0 ? controlsStack : (source &&
+                        typeof source.fileName === 'string' &&
+                        typeof source.lineNumber === 'number' &&
+                        typeof source.columnNumber === 'number'
+                        ? (0, enable_sequence_stack_traces_js_1.makeOriginalSourceStack)({
+                            fileName: getSourceFileName(source.fileName),
+                            lineNumber: source.lineNumber,
+                            // JSX development locations are one-based, like stack traces.
+                            // Resolved source locations and AST lookups use zero-based columns.
+                            columnNumber: source.columnNumber - 1,
+                        })
+                        : new Error().stack));
+                const newProps = existingStack
+                    ? { ...props }
+                    : {
+                        ...(props !== null && props !== void 0 ? props : {}),
+                        [internalStackProp]: stack,
+                    };
+                return Reflect.apply(target, thisArg, [first, newProps, ...rest]);
+            }
+            return Reflect.apply(target, thisArg, argArray);
+        },
+    });
+};
+exports.createElementSourceProxy = createElementSourceProxy;

package/dist/cjs/default-premount-in-seconds.d.ts

@@ -0,0 +1,3 @@
+export declare const DEFAULT_PREMOUNT_IN_SECONDS: number;
+export declare const DEFAULT_STUDIO_PREMOUNT_IN_SECONDS = 2;
+export declare const validateDefaultPremountInSeconds: (value: unknown) => void;

package/dist/cjs/default-premount-in-seconds.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateDefaultPremountInSeconds = exports.DEFAULT_STUDIO_PREMOUNT_IN_SECONDS = exports.DEFAULT_PREMOUNT_IN_SECONDS = void 0;
+const v5_flag_js_1 = require("./v5-flag.js");
+exports.DEFAULT_PREMOUNT_IN_SECONDS = v5_flag_js_1.ENABLE_V5_BREAKING_CHANGES ? 2 : 0;
+exports.DEFAULT_STUDIO_PREMOUNT_IN_SECONDS = 2;
+const validateDefaultPremountInSeconds = (value) => {
+    if (typeof value !== 'number' || !Number.isFinite(value) || value < 0) {
+        throw new TypeError(`defaultPremountInSeconds must be a finite, non-negative number, but got ${String(value)}.`);
+    }
+};
+exports.validateDefaultPremountInSeconds = validateDefaultPremountInSeconds;

package/dist/cjs/effects/Solid.js

@@ -7,6 +7,7 @@ const enable_sequence_stack_traces_js_1 = require("../enable-sequence-stack-trac
 const freeze_js_1 = require("../freeze.js");
 const interactivity_schema_js_1 = require("../interactivity-schema.js");
 const resolve_sequence_duration_js_1 = require("../resolve-sequence-duration.js");
+const sequence_activity_context_js_1 = require("../sequence-activity-context.js");
 const Sequence_js_1 = require("../Sequence.js");
 const use_crop_style_js_1 = require("../use-crop-style.js");
 const use_delay_render_js_1 = require("../use-delay-render.js");
@@ -65,7 +66,7 @@ exports.solidSchema = {
     ...interactivity_schema_js_1.borderRadiusSchema,
     ...interactivity_schema_js_1.cropSchema,
 };
-const SolidInner = ({ color, width, height, effects = [], className, style, pixelDensity, overrideId, reference, }) => {
+const SolidInner = ({ color, width, height, effects = [], className, style, pixelDensity, overrideId, videoConfigValues, reference, }) => {
     const { delayRender, continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
     const resolvedPixelDensity = resolveSolidPixelDensity(pixelDensity);
     const canvasWidth = Math.ceil(width * resolvedPixelDensity);
@@ -74,6 +75,7 @@ const SolidInner = ({ color, width, height, effects = [], className, style, pixe
     const memoizedEffects = (0, use_memoized_effects_js_1.useMemoizedEffects)({
         effects,
         overrideId: overrideId !== null && overrideId !== void 0 ? overrideId : null,
+        videoConfigValues,
     });
     const sourceCanvas = (0, react_1.useMemo)(() => {
         if (typeof document === 'undefined') {
@@ -157,7 +159,7 @@ const SolidInner = ({ color, width, height, effects = [], className, style, pixe
     return (jsx_runtime_1.jsx("canvas", { ref: canvasRef, width: canvasWidth, height: canvasHeight, className: className, style: canvasStyle }));
 };
 const SolidOuter = (0, react_1.forwardRef)(({ effects = [], controls, color, height, width, className, durationInFrames, style, name, from, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, trimBefore, playbackRate, loop, freeze, hidden, showInTimeline, pixelDensity, cropLeft, cropRight, cropTop, cropBottom, ...props }, ref) => {
-    var _a;
+    var _a, _b;
     props;
     const memoizedEffectDefinitions = (0, use_memoized_effects_js_1.useMemoizedEffectDefinitions)(effects);
     const actualRef = (0, react_1.useRef)(null);
@@ -186,7 +188,7 @@ const SolidOuter = (0, react_1.forwardRef)(({ effects = [], controls, color, hei
         style: premountingStyle,
         componentName: '<Solid />',
     });
-    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, trimBefore: trimBefore, playbackRate: playbackRate, loop: loop, freeze: freeze, hidden: hidden, showInTimeline: showInTimeline, controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : '<Solid>', _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/solid", ...props, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: jsx_runtime_1.jsx(SolidInner, { reference: actualRef, overrideId: (_a = controls === null || controls === void 0 ? void 0 : controls.overrideId) !== null && _a !== void 0 ? _a : null, color: color, height: height, width: width, className: className, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, effects: effects, pixelDensity: pixelDensity }) }) }));
+    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, trimBefore: trimBefore, playbackRate: playbackRate, loop: loop, freeze: freeze, hidden: hidden, showInTimeline: showInTimeline, controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : '<Solid>', _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/solid", ...props, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: jsx_runtime_1.jsx(sequence_activity_context_js_1.SequenceContent, { children: jsx_runtime_1.jsx(SolidInner, { reference: actualRef, videoConfigValues: (_a = controls === null || controls === void 0 ? void 0 : controls.videoConfigValues) !== null && _a !== void 0 ? _a : null, overrideId: (_b = controls === null || controls === void 0 ? void 0 : controls.overrideId) !== null && _b !== void 0 ? _b : null, color: color, height: height, width: width, className: className, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, effects: effects, pixelDensity: pixelDensity }) }) }) }));
 });
 exports.Solid = (0, with_interactivity_schema_js_1.withInteractivitySchema)({
     Component: SolidOuter,

package/dist/cjs/effects/canvas-pool.d.ts

@@ -9,6 +9,7 @@ export declare class CanvasPool {
     private readonly onContextLost;
     private disposed;
     constructor(width: number, height: number, onContextLost: (canvas: HTMLCanvasElement) => void);
+    getCanvas(backend: Backend, index: 0 | 1): HTMLCanvasElement;
     getPair(backend: Backend): CanvasPair;
     assertContextNotLost(canvas: HTMLCanvasElement): void;
     dispose(): void;

package/dist/cjs/effects/canvas-pool.js

@@ -30,20 +30,25 @@ class CanvasPool {
         this.height = height;
         this.onContextLost = onContextLost;
     }
-    getPair(backend) {
+    getCanvas(backend, index) {
+        var _a;
         if (this.disposed) {
             throw new Error('Effect chain state was used after it had been cleaned up');
         }
-        const existing = this.pairs.get(backend);
-        if (existing) {
-            return existing;
+        let pair = this.pairs.get(backend);
+        if (!pair) {
+            pair = [null, null];
+            this.pairs.set(backend, pair);
         }
-        const pair = [
-            this.allocateCanvas(backend),
-            this.allocateCanvas(backend),
-        ];
-        this.pairs.set(backend, pair);
-        return pair;
+        // A single effect needs one target. Allocate its ping-pong partner only
+        // when a later pass actually uses it.
+        (_a = pair[index]) !== null && _a !== void 0 ? _a : (pair[index] = this.allocateCanvas(backend));
+        return pair[index];
+    }
+    getPair(backend) {
+        this.getCanvas(backend, 0);
+        this.getCanvas(backend, 1);
+        return this.pairs.get(backend);
     }
     assertContextNotLost(canvas) {
         if (this.lostContexts.has(canvas)) {