remotion 4.0.504 → 4.0.506

package/dist/cjs/CompositionManager.d.ts

@@ -7,6 +7,7 @@ import type { EffectDefinition } from './effects/effect-types.js';
 import type { InteractivitySchema } from './interactivity-schema.js';
 import type { NonceHistory } from './nonce.js';
 import type { InferProps, PropsIfHasProps } from './props-if-has-props.js';
+import type { RuntimeValueSnapshot, RuntimeValueStore } from './runtime-value-store.js';
 export type TComposition<Schema extends AnyZodObject, Props extends Record<string, unknown>> = {
     width: number | undefined;
     height: number | undefined;
@@ -56,14 +57,17 @@ export type LoopDisplay = {
     durationInFrames: number;
 };
 export type JsxComponentIdentity = string;
-export type SequenceControls = {
+export type SequenceRegistrationControls = {
     schema: InteractivitySchema;
-    currentRuntimeValueDotNotation: Record<string, unknown>;
+    runtimeValues: RuntimeValueStore;
     overrideId: string;
     supportsEffects: boolean;
     componentIdentity: JsxComponentIdentity | null;
     componentName: string;
 };
+export type SequenceControls = SequenceRegistrationControls & {
+    currentRuntimeValueDotNotation: RuntimeValueSnapshot;
+};
 export type TSequence = {
     from: number;
     trimBefore: number | null;
@@ -78,7 +82,7 @@ export type TSequence = {
     getStack: () => string | null;
     premountDisplay: number | null;
     postmountDisplay: number | null;
-    controls: SequenceControls | null;
+    controls: SequenceRegistrationControls | null;
     refForOutline: React.RefObject<Element | null> | null;
     effects: readonly EffectDefinition<unknown>[];
     isInsideSeries: boolean;

package/dist/cjs/Interactive.d.ts

@@ -10,8 +10,8 @@ export type InteractiveBaseProps = Pick<SequenceProps, 'durationInFrames' | 'fro
 export type InteractiveTransformProps = Pick<AbsoluteFillLayout, 'style'>;
 export type InteractiveCropProps = Pick<SequenceProps, 'cropLeft' | 'cropRight' | 'cropTop' | 'cropBottom'>;
 export type InteractivePremountProps = Pick<AbsoluteFillLayout, 'premountFor' | 'postmountFor' | 'styleWhilePremounted' | 'styleWhilePostmounted'>;
-type InteractiveSequenceProps = InteractiveBaseProps;
-type InteractiveElementProps<Tag extends InteractiveTag> = Omit<React.ComponentPropsWithoutRef<Tag>, keyof InteractiveSequenceProps> & InteractiveSequenceProps;
+type InteractiveManagedProps = InteractiveBaseProps & InteractiveCropProps;
+type InteractiveElementProps<Tag extends InteractiveTag> = Omit<React.ComponentPropsWithoutRef<Tag>, keyof InteractiveManagedProps> & InteractiveManagedProps;
 type InteractiveElementComponent<Tag extends InteractiveTag> = React.ComponentType<InteractiveElementProps<Tag> & React.RefAttributes<ElementForTag<Tag>>>;
 type RemotionComponentIdentityPackage = 'remotion' | `@remotion/${string}`;
 /**

package/dist/cjs/Interactive.js

@@ -39,6 +39,7 @@ const react_1 = __importStar(require("react"));
 const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
 const interactivity_schema_js_1 = require("./interactivity-schema.js");
 const Sequence_js_1 = require("./Sequence.js");
+const use_crop_style_js_1 = require("./use-crop-style.js");
 const with_interactivity_schema_js_1 = require("./with-interactivity-schema.js");
 const sourcePathToIdentityPrefix = (packageName) => {
     if (packageName === 'remotion') {
@@ -58,6 +59,7 @@ const makeRemotionComponentIdentity = ({ packageName, componentName, }) => {
 const interactiveElementSchema = {
     ...interactivity_schema_js_1.baseSchema,
     ...interactivity_schema_js_1.transformSchema,
+    ...interactivity_schema_js_1.cropSchema,
 };
 const interactiveBackgroundElementSchema = {
     ...interactiveElementSchema,
@@ -106,7 +108,15 @@ const withSchema = (options) => {
 };
 const makeInteractiveElement = (tag, displayName, schema) => {
     const Inner = (0, react_1.forwardRef)((propsWithControls, ref) => {
-        const { durationInFrames, from, trimBefore, freeze, hidden, name, showInTimeline, controls, ...props } = propsWithControls;
+        const { durationInFrames, from, trimBefore, freeze, hidden, name, showInTimeline, controls, cropLeft, cropRight, cropTop, cropBottom, style, ...props } = propsWithControls;
+        const croppedStyle = (0, use_crop_style_js_1.useCropStyle)({
+            cropLeft,
+            cropRight,
+            cropTop,
+            cropBottom,
+            style: style !== null && style !== void 0 ? style : null,
+            componentName: displayName,
+        });
         const refForOutline = (0, react_1.useRef)(null);
         const callbackRef = (0, react_1.useCallback)((element) => {
             refForOutline.current = element;
@@ -114,6 +124,7 @@ const makeInteractiveElement = (tag, displayName, schema) => {
         }, [ref]);
         return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, trimBefore: trimBefore, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, freeze: freeze, hidden: hidden, name: name !== null && name !== void 0 ? name : displayName, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, controls: controls, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/interactive", outlineRef: refForOutline, children: react_1.default.createElement(tag, {
                 ...props,
+                style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined,
                 ref: callbackRef,
             }) }));
     });

package/dist/cjs/Sequence.js

@@ -189,6 +189,37 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
                     : registeredFrozenFrame) *
                     isMedia.data.playbackRate
         : null;
+    const controlsSchema = controls === null || controls === void 0 ? void 0 : controls.schema;
+    const controlsRuntimeValues = controls === null || controls === void 0 ? void 0 : controls.runtimeValues;
+    const controlsOverrideId = controls === null || controls === void 0 ? void 0 : controls.overrideId;
+    const controlsSupportsEffects = controls === null || controls === void 0 ? void 0 : controls.supportsEffects;
+    const controlsComponentIdentity = controls === null || controls === void 0 ? void 0 : controls.componentIdentity;
+    const controlsComponentName = controls === null || controls === void 0 ? void 0 : controls.componentName;
+    const registrationControls = (0, react_1.useMemo)(() => {
+        if (controlsSchema === undefined ||
+            controlsRuntimeValues === undefined ||
+            controlsOverrideId === undefined ||
+            controlsSupportsEffects === undefined ||
+            controlsComponentIdentity === undefined ||
+            controlsComponentName === undefined) {
+            return null;
+        }
+        return {
+            schema: controlsSchema,
+            runtimeValues: controlsRuntimeValues,
+            overrideId: controlsOverrideId,
+            supportsEffects: controlsSupportsEffects,
+            componentIdentity: controlsComponentIdentity,
+            componentName: controlsComponentName,
+        };
+    }, [
+        controlsComponentIdentity,
+        controlsComponentName,
+        controlsOverrideId,
+        controlsRuntimeValues,
+        controlsSchema,
+        controlsSupportsEffects,
+    ]);
     (0, react_1.useEffect)(() => {
         var _a, _b, _c;
         if (!env.isStudio) {
@@ -198,7 +229,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
             if (isMedia.type === 'image') {
                 registerSequence({
                     type: 'image',
-                    controls: controls !== null && controls !== void 0 ? controls : null,
+                    controls: registrationControls,
                     effects: _remotionInternalEffects !== null && _remotionInternalEffects !== void 0 ? _remotionInternalEffects : EMPTY_EFFECTS,
                     displayName: timelineClipName,
                     documentationLink: resolvedDocumentationLink,
@@ -223,7 +254,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
             else {
                 registerSequence({
                     type: isMedia.type,
-                    controls: controls !== null && controls !== void 0 ? controls : null,
+                    controls: registrationControls,
                     effects: _remotionInternalEffects !== null && _remotionInternalEffects !== void 0 ? _remotionInternalEffects : EMPTY_EFFECTS,
                     displayName: timelineClipName,
                     documentationLink: resolvedDocumentationLink,
@@ -270,7 +301,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
             getStack: () => stackRef.current,
             premountDisplay: premountDisplay !== null && premountDisplay !== void 0 ? premountDisplay : null,
             postmountDisplay: postmountDisplay !== null && postmountDisplay !== void 0 ? postmountDisplay : null,
-            controls: controls !== null && controls !== void 0 ? controls : null,
+            controls: registrationControls,
             effects: _remotionInternalEffects !== null && _remotionInternalEffects !== void 0 ? _remotionInternalEffects : EMPTY_EFFECTS,
             refForOutline: refForOutline !== null && refForOutline !== void 0 ? refForOutline : null,
             isInsideSeries,
@@ -298,7 +329,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
         premountDisplay,
         postmountDisplay,
         env.isStudio,
-        controls,
+        registrationControls,
         _remotionInternalEffects,
         isMedia,
         resolvedDocumentationLink,

package/dist/cjs/TimelineContext.d.ts

@@ -7,6 +7,11 @@ export type TimelineContextValue = {
     imperativePlaying: RefObject<boolean>;
     audioAndVideoTags: RefObject<PlayableMediaTag[]>;
 };
+export type TimelineImperativeContextValue = {
+    frameRef: RefObject<Record<string, number>>;
+    imperativePlaying: RefObject<boolean>;
+    audioAndVideoTags: RefObject<PlayableMediaTag[]>;
+};
 export type PlaybackRateContextValue = {
     playbackRate: number;
     setPlaybackRate: (u: React.SetStateAction<number>) => void;
@@ -17,6 +22,7 @@ export type SetTimelineContextValue = {
 };
 export declare const SetTimelineContext: React.Context<SetTimelineContextValue>;
 export declare const TimelineContext: React.Context<TimelineContextValue | null>;
+export declare const TimelineImperativeContext: React.Context<TimelineImperativeContextValue | null>;
 export declare const PlaybackRateContext: React.Context<PlaybackRateContextValue | null>;
 export declare const AbsoluteTimeContext: React.Context<TimelineContextValue | null>;
 export declare const TimelineContextProvider: React.FC<{

package/dist/cjs/TimelineContext.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineContextProvider = exports.AbsoluteTimeContext = exports.PlaybackRateContext = exports.TimelineContext = exports.SetTimelineContext = void 0;
+exports.TimelineContextProvider = exports.AbsoluteTimeContext = exports.PlaybackRateContext = exports.TimelineImperativeContext = exports.TimelineContext = exports.SetTimelineContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const timeline_position_state_1 = require("./timeline-position-state");
@@ -14,6 +14,7 @@ exports.SetTimelineContext = (0, react_1.createContext)({
     },
 });
 exports.TimelineContext = (0, react_1.createContext)(null);
+exports.TimelineImperativeContext = (0, react_1.createContext)(null);
 exports.PlaybackRateContext = (0, react_1.createContext)(null);
 exports.AbsoluteTimeContext = (0, react_1.createContext)(null);
 const TimelineContextProvider = ({ children, frameState }) => {
@@ -23,6 +24,8 @@ const TimelineContextProvider = ({ children, frameState }) => {
     const audioAndVideoTags = (0, react_1.useRef)([]);
     const [_frame, setFrame] = (0, react_1.useState)(() => (0, timeline_position_state_1.getInitialFrameState)());
     const frame = frameState !== null && frameState !== void 0 ? frameState : _frame;
+    const frameRef = (0, react_1.useRef)(frame);
+    frameRef.current = frame;
     const { delayRender, continueRender } = (0, use_delay_render_1.useDelayRender)();
     if (typeof window !== 'undefined') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -63,6 +66,13 @@ const TimelineContextProvider = ({ children, frameState }) => {
             audioAndVideoTags,
         };
     }, [frame, playing]);
+    const timelineImperativeContextValue = (0, react_1.useMemo)(() => {
+        return {
+            frameRef,
+            imperativePlaying,
+            audioAndVideoTags,
+        };
+    }, []);
     const playbackRateContextValue = (0, react_1.useMemo)(() => {
         return {
             playbackRate,
@@ -75,6 +85,6 @@ const TimelineContextProvider = ({ children, frameState }) => {
             setPlaying,
         };
     }, []);
-    return (jsx_runtime_1.jsx(exports.AbsoluteTimeContext.Provider, { value: timelineContextValue, children: jsx_runtime_1.jsx(exports.PlaybackRateContext.Provider, { value: playbackRateContextValue, children: jsx_runtime_1.jsx(exports.TimelineContext.Provider, { value: timelineContextValue, children: jsx_runtime_1.jsx(exports.SetTimelineContext.Provider, { value: setTimelineContextValue, children: children }) }) }) }));
+    return (jsx_runtime_1.jsx(exports.AbsoluteTimeContext.Provider, { value: timelineContextValue, children: jsx_runtime_1.jsx(exports.PlaybackRateContext.Provider, { value: playbackRateContextValue, children: jsx_runtime_1.jsx(exports.TimelineImperativeContext.Provider, { value: timelineImperativeContextValue, children: jsx_runtime_1.jsx(exports.TimelineContext.Provider, { value: timelineContextValue, children: jsx_runtime_1.jsx(exports.SetTimelineContext.Provider, { value: setTimelineContextValue, children: children }) }) }) }) }));
 };
 exports.TimelineContextProvider = TimelineContextProvider;

package/dist/cjs/index.d.ts

@@ -1,7 +1,7 @@
 import './_check-rsc.js';
 import './asset-types.js';
 import type { Codec } from './codec.js';
-import type { AnyCompMetadata, AnyComposition, AudioOrVideoAsset, JsxComponentIdentity, LoopDisplay, SequenceControls, TRenderAsset } from './CompositionManager.js';
+import type { AnyCompMetadata, AnyComposition, AudioOrVideoAsset, JsxComponentIdentity, LoopDisplay, SequenceControls, SequenceRegistrationControls, TRenderAsset } from './CompositionManager.js';
 import type { DelayRenderScope } from './delay-render.js';
 import { type TFolder } from './Folder.js';
 import type { StaticFile } from './get-static-files.js';
@@ -9,6 +9,7 @@ import type { AssetFieldSchema, ArrayFieldSchema, ArrayItemFieldSchema, Captions
 import type { LogLevel } from './log.js';
 import type { ProResProfile } from './prores-profile.js';
 import type { PixelFormat, VideoImageFormat } from './render-types.js';
+import type { RuntimeValueSnapshot, RuntimeValueStore } from './runtime-value-store.js';
 import type { UseBufferState } from './use-buffer-state';
 import type { VideoConfig } from './video-config.js';
 export type VideoConfigWithSerializedProps = Omit<VideoConfig, 'defaultProps' | 'props'> & {
@@ -183,4 +184,4 @@ export type _InternalTypes = {
     TRenderAsset: TRenderAsset;
     ProResProfile: ProResProfile;
 };
-export type { AnyComposition, AssetFieldSchema, ArrayFieldSchema, ArrayItemFieldSchema, CaptionsFieldSchema, DelayRenderScope, JsxComponentIdentity, LoopDisplay, SequenceControls, InteractivitySchemaField, InteractivitySchema, UseBufferState, };
+export type { AnyComposition, AssetFieldSchema, ArrayFieldSchema, ArrayItemFieldSchema, CaptionsFieldSchema, DelayRenderScope, JsxComponentIdentity, LoopDisplay, RuntimeValueSnapshot, RuntimeValueStore, SequenceControls, SequenceRegistrationControls, InteractivitySchemaField, InteractivitySchema, UseBufferState, };

package/dist/cjs/internals.d.ts

@@ -16,7 +16,7 @@ import type { ResolvedStackLocation } from './sequence-stack-traces.js';
 import type { CannotUpdateSequenceReason } from './SequenceManager.js';
 import { type CanUpdateEffectPropsResponse, type CanUpdateEffectPropsResponseFalse, type CanUpdateEffectPropsResponseTrue, type CanUpdateSequencePropsResponse, type CanUpdateSequencePropsResponseFalse, type CanUpdateSequencePropsResponseTrue, type SequenceNodePath, type SequencePropsSubscriptionKey, type VideoConfigValues } from './SequenceManager.js';
 import * as TimelinePosition from './timeline-position-state.js';
-import { type PlaybackRateContextValue, type SetTimelineContextValue, type TimelineContextValue } from './TimelineContext.js';
+import { type PlaybackRateContextValue, type SetTimelineContextValue, type TimelineImperativeContextValue, type TimelineContextValue } from './TimelineContext.js';
 import { truthy } from './truthy.js';
 import type { CanUpdateSequencePropStatusFalse, CanUpdateSequencePropStatusEasing, CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusStatic, DragOverrideValue, GetDragOverrides, GetEffectDragOverrides, GetEffectPropStatuses, GetPropStatuses, VideoConfigNumericExpression } from './use-schema.js';
 import { type CanUpdateSequencePropStatus, type DragOverrides, type EffectDragOverrides, type PropStatuses } from './use-schema.js';
@@ -1166,6 +1166,7 @@ export declare const Internals: {
     readonly TimelinePosition: typeof TimelinePosition;
     readonly DelayRenderContextType: import("react").Context<import("./delay-render.js").DelayRenderScope | null>;
     readonly TimelineContext: import("react").Context<TimelineContextValue | null>;
+    readonly TimelineImperativeContext: import("react").Context<TimelineImperativeContextValue | null>;
     readonly PlaybackRateContext: import("react").Context<PlaybackRateContextValue | null>;
     readonly AbsoluteTimeContext: import("react").Context<TimelineContextValue | null>;
     readonly RenderAssetManagerProvider: import("react").FC<{
@@ -1269,4 +1270,4 @@ export declare const Internals: {
         readonly componentName: string;
     }) => import("react").CSSProperties | null;
 };
-export type { ArrayFieldSchema, AssetFieldSchema, ArrayItemFieldSchema, CannotUpdateSequenceReason, CanUpdateEffectPropsResponse, CanUpdateEffectPropsResponseFalse, CanUpdateEffectPropsResponseTrue, CanUpdateSequencePropsResponse, CanUpdateSequencePropsResponseFalse, CanUpdateSequencePropsResponseTrue, CanUpdateSequencePropStatus, CanUpdateSequencePropStatusEasing, CanUpdateSequencePropStatusFalse, CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusStatic, VideoConfigNumericExpression, CompositionManagerContext, CompProps, DragOverrides, DragOverrideValue, EffectDragOverrides, GetDragOverrides, GetEffectDragOverrides, GetEffectPropStatuses, GetPropStatuses, JsxComponentIdentity, LoggingContextValue, MediaVolumeContextValue, NonceHistory, OverrideIdsToNodePathsGettersContext, OverrideIdsToNodePathsSettersContext, OverrideIdToNodePaths, OverrideToNodePathGetters, OverrideToNodeSetters, PlaybackRateContextValue, PropStatuses, RemotionAudioContextState, RemotionEnvironment, ResolvedStackLocation, ScheduleAudioNodeOptions, ScheduleAudioNodeResult, InteractivitySchemaField, SequenceNodePath, SequencePropsSubscriptionKey, VideoConfigValues, InteractivitySchema, SerializedJSONWithCustomFields, SetMediaVolumeContextValue, SetTimelineContextValue, TCompMetadata, TComposition, TimelineContextValue, TRenderAsset, TSequence, VisibleFieldSchema, WatchRemotionStaticFilesPayload, };
+export type { ArrayFieldSchema, AssetFieldSchema, ArrayItemFieldSchema, CannotUpdateSequenceReason, CanUpdateEffectPropsResponse, CanUpdateEffectPropsResponseFalse, CanUpdateEffectPropsResponseTrue, CanUpdateSequencePropsResponse, CanUpdateSequencePropsResponseFalse, CanUpdateSequencePropsResponseTrue, CanUpdateSequencePropStatus, CanUpdateSequencePropStatusEasing, CanUpdateSequencePropStatusFalse, CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusStatic, VideoConfigNumericExpression, CompositionManagerContext, CompProps, DragOverrides, DragOverrideValue, EffectDragOverrides, GetDragOverrides, GetEffectDragOverrides, GetEffectPropStatuses, GetPropStatuses, JsxComponentIdentity, LoggingContextValue, MediaVolumeContextValue, NonceHistory, OverrideIdsToNodePathsGettersContext, OverrideIdsToNodePathsSettersContext, OverrideIdToNodePaths, OverrideToNodePathGetters, OverrideToNodeSetters, PlaybackRateContextValue, PropStatuses, RemotionAudioContextState, RemotionEnvironment, ResolvedStackLocation, ScheduleAudioNodeOptions, ScheduleAudioNodeResult, InteractivitySchemaField, SequenceNodePath, SequencePropsSubscriptionKey, VideoConfigValues, InteractivitySchema, SerializedJSONWithCustomFields, SetMediaVolumeContextValue, SetTimelineContextValue, TCompMetadata, TComposition, TimelineContextValue, TimelineImperativeContextValue, TRenderAsset, TSequence, VisibleFieldSchema, WatchRemotionStaticFilesPayload, };

package/dist/cjs/internals.js

@@ -248,6 +248,7 @@ exports.Internals = {
     TimelinePosition,
     DelayRenderContextType: use_delay_render_js_1.DelayRenderContextType,
     TimelineContext: TimelineContext_js_1.TimelineContext,
+    TimelineImperativeContext: TimelineContext_js_1.TimelineImperativeContext,
     PlaybackRateContext: TimelineContext_js_1.PlaybackRateContext,
     AbsoluteTimeContext: TimelineContext_js_1.AbsoluteTimeContext,
     RenderAssetManagerProvider: RenderAssetManager_js_1.RenderAssetManagerProvider,

package/dist/cjs/runtime-value-store.d.ts

@@ -0,0 +1,10 @@
+export type RuntimeValueSnapshot = Readonly<Record<string, unknown>>;
+export type RuntimeValueStore = {
+    getSnapshot: () => RuntimeValueSnapshot;
+    subscribe: (listener: () => void) => () => void;
+};
+export type RuntimeValueStoreController = {
+    store: RuntimeValueStore;
+    setSnapshot: (newSnapshot: RuntimeValueSnapshot) => void;
+};
+export declare const createRuntimeValueStore: (initialSnapshot: Readonly<Record<string, unknown>>) => RuntimeValueStoreController;

package/dist/cjs/runtime-value-store.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createRuntimeValueStore = void 0;
+const createRuntimeValueStore = (initialSnapshot) => {
+    let snapshot = initialSnapshot;
+    const listeners = new Set();
+    const store = {
+        getSnapshot: () => snapshot,
+        subscribe: (listener) => {
+            listeners.add(listener);
+            return () => {
+                listeners.delete(listener);
+            };
+        },
+    };
+    return {
+        store,
+        setSnapshot: (newSnapshot) => {
+            if (snapshot === newSnapshot) {
+                return;
+            }
+            snapshot = newSnapshot;
+            for (const listener of listeners) {
+                listener();
+            }
+        },
+    };
+};
+exports.createRuntimeValueStore = createRuntimeValueStore;

package/dist/cjs/version.d.ts

@@ -3,4 +3,4 @@
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-export declare const VERSION = "4.0.504";
+export declare const VERSION = "4.0.506";

package/dist/cjs/version.js

@@ -7,4 +7,4 @@ exports.VERSION = void 0;
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-exports.VERSION = '4.0.504';
+exports.VERSION = '4.0.506';

package/dist/cjs/with-interactivity-schema.js

@@ -40,6 +40,7 @@ const use_memoized_effects_js_1 = require("./effects/use-memoized-effects.js");
 const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
 const flatten_schema_js_1 = require("./flatten-schema.js");
 const interactivity_schema_js_1 = require("./interactivity-schema.js");
+const runtime_value_store_js_1 = require("./runtime-value-store.js");
 const sequence_node_path_js_1 = require("./sequence-node-path.js");
 const SequenceManager_js_1 = require("./SequenceManager.js");
 const use_current_frame_js_1 = require("./use-current-frame.js");
@@ -187,16 +188,25 @@ const withInteractivitySchema = ({ Component, componentName, componentIdentity,
         // eslint-disable-next-line react-hooks/exhaustive-deps
         runtimeValues);
         // eslint-disable-next-line react-hooks/rules-of-hooks
+        const [runtimeValueStore] = (0, react_1.useState)(() => (0, runtime_value_store_js_1.createRuntimeValueStore)(currentRuntimeValueDotNotation));
+        // Publishing in a layout effect ensures that abandoned renders cannot expose
+        // uncommitted runtime values to Studio consumers.
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        (0, react_1.useLayoutEffect)(() => {
+            runtimeValueStore.setSnapshot(currentRuntimeValueDotNotation);
+        }, [currentRuntimeValueDotNotation, runtimeValueStore]);
+        // eslint-disable-next-line react-hooks/rules-of-hooks
         const controls = (0, react_1.useMemo)(() => {
             return {
                 schema: schemaWithSequenceName,
                 currentRuntimeValueDotNotation,
+                runtimeValues: runtimeValueStore.store,
                 overrideId,
                 supportsEffects,
                 componentIdentity,
                 componentName,
             };
-        }, [currentRuntimeValueDotNotation, overrideId]);
+        }, [currentRuntimeValueDotNotation, overrideId, runtimeValueStore.store]);
         (0, enable_sequence_stack_traces_js_1.setStackForControls)(controls, internalStack);
         // 3. Apply drag/code overrides on top of the runtime values.
         // eslint-disable-next-line react-hooks/rules-of-hooks

package/dist/cjs/wrap-remotion-context.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 export declare function useRemotionContexts(): {
     compositionManagerCtx: import("./CompositionManagerContext.js").CompositionManagerContext;
     timelineContext: import("./TimelineContext.js").TimelineContextValue | null;
+    timelineImperativeContext: import("./TimelineContext.js").TimelineImperativeContextValue | null;
     setTimelineContext: import("./TimelineContext.js").SetTimelineContextValue;
     sequenceContext: import("./SequenceContext.js").SequenceContextType | null;
     nonceContext: import("./nonce.js").TNonceContext;

package/dist/cjs/wrap-remotion-context.js

@@ -54,6 +54,7 @@ const TimelineContext_js_1 = require("./TimelineContext.js");
 function useRemotionContexts() {
     const compositionManagerCtx = react_1.default.useContext(CompositionManagerContext_js_1.CompositionManager);
     const timelineContext = react_1.default.useContext(TimelineContext_js_1.TimelineContext);
+    const timelineImperativeContext = react_1.default.useContext(TimelineContext_js_1.TimelineImperativeContext);
     const setTimelineContext = react_1.default.useContext(TimelineContext_js_1.SetTimelineContext);
     const sequenceContext = react_1.default.useContext(SequenceContext_js_1.SequenceContext);
     const nonceContext = react_1.default.useContext(nonce_js_1.NonceContext);
@@ -69,6 +70,7 @@ function useRemotionContexts() {
     return (0, react_1.useMemo)(() => ({
         compositionManagerCtx,
         timelineContext,
+        timelineImperativeContext,
         setTimelineContext,
         sequenceContext,
         nonceContext,
@@ -87,6 +89,7 @@ function useRemotionContexts() {
         sequenceContext,
         setTimelineContext,
         timelineContext,
+        timelineImperativeContext,
         canUseRemotionHooksContext,
         preloadContext,
         resolveCompositionContext,
@@ -100,6 +103,6 @@ function useRemotionContexts() {
 }
 const RemotionContextProvider = (props) => {
     const { children, contexts } = props;
-    return (jsx_runtime_1.jsx(log_level_context_js_1.LogLevelContext.Provider, { value: contexts.logLevelContext, children: jsx_runtime_1.jsx(CanUseRemotionHooks_js_1.CanUseRemotionHooks.Provider, { value: contexts.canUseRemotionHooksContext, children: jsx_runtime_1.jsx(nonce_js_1.NonceContext.Provider, { value: contexts.nonceContext, children: jsx_runtime_1.jsx(prefetch_state_js_1.PreloadContext.Provider, { value: contexts.preloadContext, children: jsx_runtime_1.jsx(CompositionManagerContext_js_1.CompositionManager.Provider, { value: contexts.compositionManagerCtx, children: jsx_runtime_1.jsx(SequenceManager_js_1.SequenceManagerRefContext.Provider, { value: contexts.sequenceManagerRefContext, children: jsx_runtime_1.jsx(SequenceManager_js_1.SequenceManager.Provider, { value: contexts.sequenceManagerContext, children: jsx_runtime_1.jsx(SequenceManager_js_1.VisualModePropStatusesRefContext.Provider, { value: contexts.visualModePropStatusesRefContext, children: jsx_runtime_1.jsx(RenderAssetManager_js_1.RenderAssetManager.Provider, { value: contexts.renderAssetManagerContext, children: jsx_runtime_1.jsx(ResolveCompositionConfig_js_1.ResolveCompositionContext.Provider, { value: contexts.resolveCompositionContext, children: jsx_runtime_1.jsx(TimelineContext_js_1.TimelineContext.Provider, { value: contexts.timelineContext, children: jsx_runtime_1.jsx(TimelineContext_js_1.SetTimelineContext.Provider, { value: contexts.setTimelineContext, children: jsx_runtime_1.jsx(SequenceContext_js_1.SequenceContext.Provider, { value: contexts.sequenceContext, children: jsx_runtime_1.jsx(buffering_js_1.BufferingContextReact.Provider, { value: contexts.bufferManagerContext, children: children }) }) }) }) }) }) }) }) }) }) }) }) }) }));
+    return (jsx_runtime_1.jsx(log_level_context_js_1.LogLevelContext.Provider, { value: contexts.logLevelContext, children: jsx_runtime_1.jsx(CanUseRemotionHooks_js_1.CanUseRemotionHooks.Provider, { value: contexts.canUseRemotionHooksContext, children: jsx_runtime_1.jsx(nonce_js_1.NonceContext.Provider, { value: contexts.nonceContext, children: jsx_runtime_1.jsx(prefetch_state_js_1.PreloadContext.Provider, { value: contexts.preloadContext, children: jsx_runtime_1.jsx(CompositionManagerContext_js_1.CompositionManager.Provider, { value: contexts.compositionManagerCtx, children: jsx_runtime_1.jsx(SequenceManager_js_1.SequenceManagerRefContext.Provider, { value: contexts.sequenceManagerRefContext, children: jsx_runtime_1.jsx(SequenceManager_js_1.SequenceManager.Provider, { value: contexts.sequenceManagerContext, children: jsx_runtime_1.jsx(SequenceManager_js_1.VisualModePropStatusesRefContext.Provider, { value: contexts.visualModePropStatusesRefContext, children: jsx_runtime_1.jsx(RenderAssetManager_js_1.RenderAssetManager.Provider, { value: contexts.renderAssetManagerContext, children: jsx_runtime_1.jsx(ResolveCompositionConfig_js_1.ResolveCompositionContext.Provider, { value: contexts.resolveCompositionContext, children: jsx_runtime_1.jsx(TimelineContext_js_1.TimelineImperativeContext.Provider, { value: contexts.timelineImperativeContext, children: jsx_runtime_1.jsx(TimelineContext_js_1.TimelineContext.Provider, { value: contexts.timelineContext, children: jsx_runtime_1.jsx(TimelineContext_js_1.SetTimelineContext.Provider, { value: contexts.setTimelineContext, children: jsx_runtime_1.jsx(SequenceContext_js_1.SequenceContext.Provider, { value: contexts.sequenceContext, children: jsx_runtime_1.jsx(buffering_js_1.BufferingContextReact.Provider, { value: contexts.bufferManagerContext, children: children }) }) }) }) }) }) }) }) }) }) }) }) }) }) }));
 };
 exports.RemotionContextProvider = RemotionContextProvider;

package/dist/esm/index.mjs

@@ -1322,7 +1322,7 @@ var getSingleChildComponent = (children) => {
 };
 
 // src/version.ts
-var VERSION = "4.0.504";
+var VERSION = "4.0.506";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -1410,6 +1410,7 @@ var SetTimelineContext = createContext13({
   }
 });
 var TimelineContext = createContext13(null);
+var TimelineImperativeContext = createContext13(null);
 var PlaybackRateContext = createContext13(null);
 var AbsoluteTimeContext = createContext13(null);
 var TimelineContextProvider = ({ children, frameState }) => {
@@ -1419,6 +1420,8 @@ var TimelineContextProvider = ({ children, frameState }) => {
   const audioAndVideoTags = useRef3([]);
   const [_frame, setFrame] = useState2(() => getInitialFrameState());
   const frame = frameState ?? _frame;
+  const frameRef = useRef3(frame);
+  frameRef.current = frame;
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   if (typeof window !== "undefined") {
     useLayoutEffect(() => {
@@ -1454,6 +1457,13 @@ var TimelineContextProvider = ({ children, frameState }) => {
       audioAndVideoTags
     };
   }, [frame, playing]);
+  const timelineImperativeContextValue = useMemo8(() => {
+    return {
+      frameRef,
+      imperativePlaying,
+      audioAndVideoTags
+    };
+  }, []);
   const playbackRateContextValue = useMemo8(() => {
     return {
       playbackRate,
@@ -1470,11 +1480,14 @@ var TimelineContextProvider = ({ children, frameState }) => {
     value: timelineContextValue,
     children: /* @__PURE__ */ jsx8(PlaybackRateContext.Provider, {
       value: playbackRateContextValue,
-      children: /* @__PURE__ */ jsx8(TimelineContext.Provider, {
-        value: timelineContextValue,
-        children: /* @__PURE__ */ jsx8(SetTimelineContext.Provider, {
-          value: setTimelineContextValue,
-          children
+      children: /* @__PURE__ */ jsx8(TimelineImperativeContext.Provider, {
+        value: timelineImperativeContextValue,
+        children: /* @__PURE__ */ jsx8(TimelineContext.Provider, {
+          value: timelineContextValue,
+          children: /* @__PURE__ */ jsx8(SetTimelineContext.Provider, {
+            value: setTimelineContextValue,
+            children
+          })
         })
       })
     })
@@ -2432,7 +2445,13 @@ var usePremounting = ({
 };
 
 // src/with-interactivity-schema.ts
-import React14, { forwardRef as forwardRef2, useContext as useContext17, useMemo as useMemo14, useState as useState4 } from "react";
+import React14, {
+  forwardRef as forwardRef2,
+  useContext as useContext17,
+  useLayoutEffect as useLayoutEffect2,
+  useMemo as useMemo14,
+  useState as useState4
+} from "react";
 
 // src/delete-nested-key.ts
 var deleteNestedKey = (obj, keysToRemove) => {
@@ -4377,6 +4396,33 @@ var getFlatSchemaWithAllKeys = (schema) => {
   return out;
 };
 
+// src/runtime-value-store.ts
+var createRuntimeValueStore = (initialSnapshot) => {
+  let snapshot = initialSnapshot;
+  const listeners = new Set;
+  const store = {
+    getSnapshot: () => snapshot,
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    }
+  };
+  return {
+    store,
+    setSnapshot: (newSnapshot) => {
+      if (snapshot === newSnapshot) {
+        return;
+      }
+      snapshot = newSnapshot;
+      for (const listener of listeners) {
+        listener();
+      }
+    }
+  };
+};
+
 // src/find-props-to-delete.ts
 var findPropsToDelete = ({
   schema,
@@ -4683,16 +4729,21 @@ var withInteractivitySchema = ({
       props: cleanProps
     }));
     const currentRuntimeValueDotNotation = useMemo14(() => readValuesFromProps(cleanProps, flatKeys, flatSchema), runtimeValues);
+    const [runtimeValueStore] = useState4(() => createRuntimeValueStore(currentRuntimeValueDotNotation));
+    useLayoutEffect2(() => {
+      runtimeValueStore.setSnapshot(currentRuntimeValueDotNotation);
+    }, [currentRuntimeValueDotNotation, runtimeValueStore]);
     const controls = useMemo14(() => {
       return {
         schema: schemaWithSequenceName,
         currentRuntimeValueDotNotation,
+        runtimeValues: runtimeValueStore.store,
         overrideId,
         supportsEffects,
         componentIdentity,
         componentName
       };
-    }, [currentRuntimeValueDotNotation, overrideId]);
+    }, [currentRuntimeValueDotNotation, overrideId, runtimeValueStore.store]);
     setStackForControls(controls, internalStack);
     const { merged: valuesDotNotation, propsToDelete } = useMemo14(() => {
       return computeEffectiveSchemaValuesDotNotation({
@@ -4880,6 +4931,32 @@ var RegularSequenceRefForwardingFunction = ({
   const startMediaFrom = isMedia && isMedia.type !== "image" ? isMedia.data.startMediaFrom + parentCumulatedNegativeFrom - cumulatedNegativeFrom : null;
   const mediaFrameAtSequenceZero = isMedia && isMedia.type !== "image" ? isMedia.data.startMediaFrom + parentCumulatedNegativeFrom : null;
   const frozenMediaFrame = isMedia && isMedia.type !== "image" && mediaFrameAtSequenceZero !== null ? registeredFrozenFrame === null ? null : mediaFrameAtSequenceZero + (loopDisplay ? registeredFrozenFrame % loopDisplay.durationInFrames : registeredFrozenFrame) * isMedia.data.playbackRate : null;
+  const controlsSchema = controls?.schema;
+  const controlsRuntimeValues = controls?.runtimeValues;
+  const controlsOverrideId = controls?.overrideId;
+  const controlsSupportsEffects = controls?.supportsEffects;
+  const controlsComponentIdentity = controls?.componentIdentity;
+  const controlsComponentName = controls?.componentName;
+  const registrationControls = useMemo15(() => {
+    if (controlsSchema === undefined || controlsRuntimeValues === undefined || controlsOverrideId === undefined || controlsSupportsEffects === undefined || controlsComponentIdentity === undefined || controlsComponentName === undefined) {
+      return null;
+    }
+    return {
+      schema: controlsSchema,
+      runtimeValues: controlsRuntimeValues,
+      overrideId: controlsOverrideId,
+      supportsEffects: controlsSupportsEffects,
+      componentIdentity: controlsComponentIdentity,
+      componentName: controlsComponentName
+    };
+  }, [
+    controlsComponentIdentity,
+    controlsComponentName,
+    controlsOverrideId,
+    controlsRuntimeValues,
+    controlsSchema,
+    controlsSupportsEffects
+  ]);
   useEffect3(() => {
     if (!env.isStudio) {
       return;
@@ -4888,7 +4965,7 @@ var RegularSequenceRefForwardingFunction = ({
       if (isMedia.type === "image") {
         registerSequence({
           type: "image",
-          controls: controls ?? null,
+          controls: registrationControls,
           effects: _remotionInternalEffects ?? EMPTY_EFFECTS,
           displayName: timelineClipName,
           documentationLink: resolvedDocumentationLink,
@@ -4912,7 +4989,7 @@ var RegularSequenceRefForwardingFunction = ({
       } else {
         registerSequence({
           type: isMedia.type,
-          controls: controls ?? null,
+          controls: registrationControls,
           effects: _remotionInternalEffects ?? EMPTY_EFFECTS,
           displayName: timelineClipName,
           documentationLink: resolvedDocumentationLink,
@@ -4959,7 +5036,7 @@ var RegularSequenceRefForwardingFunction = ({
       getStack: () => stackRef.current,
       premountDisplay: premountDisplay ?? null,
       postmountDisplay: postmountDisplay ?? null,
-      controls: controls ?? null,
+      controls: registrationControls,
       effects: _remotionInternalEffects ?? EMPTY_EFFECTS,
       refForOutline: refForOutline ?? null,
       isInsideSeries,
@@ -4987,7 +5064,7 @@ var RegularSequenceRefForwardingFunction = ({
     premountDisplay,
     postmountDisplay,
     env.isStudio,
-    controls,
+    registrationControls,
     _remotionInternalEffects,
     isMedia,
     resolvedDocumentationLink,
@@ -5210,7 +5287,7 @@ import {
   forwardRef as forwardRef4,
   useEffect as useEffect5,
   useImperativeHandle as useImperativeHandle2,
-  useLayoutEffect as useLayoutEffect2,
+  useLayoutEffect as useLayoutEffect3,
   useRef as useRef10,
   useState as useState6
 } from "react";
@@ -5962,7 +6039,7 @@ var AnimatedImageContent = forwardRef4(({
       imageDecoder?.close();
     };
   }, [imageDecoder]);
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     if (!imageDecoder) {
       return;
     }
@@ -6159,14 +6236,14 @@ var createEffect = (definition) => {
   return factory;
 };
 // src/Artifact.tsx
-import { useContext as useContext19, useLayoutEffect as useLayoutEffect4, useState as useState8 } from "react";
+import { useContext as useContext19, useLayoutEffect as useLayoutEffect5, useState as useState8 } from "react";
 
 // src/RenderAssetManager.tsx
 import {
   createContext as createContext17,
   useCallback as useCallback9,
   useImperativeHandle as useImperativeHandle3,
-  useLayoutEffect as useLayoutEffect3,
+  useLayoutEffect as useLayoutEffect4,
   useMemo as useMemo19,
   useRef as useRef11,
   useState as useState7
@@ -6238,7 +6315,7 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
     renderAssetsRef.current = renderAssetsRef.current.filter((a2) => a2.id !== id);
     setRenderAssets(renderAssetsRef.current);
   }, []);
-  useLayoutEffect3(() => {
+  useLayoutEffect4(() => {
     if (typeof window !== "undefined") {
       window.remotion_collectAssets = () => {
         const assets = renderAssetsRef.current;
@@ -6270,7 +6347,7 @@ var Artifact = ({ filename, content, downloadBehavior }) => {
   const [id] = useState8(() => {
     return String(Math.random());
   });
-  useLayoutEffect4(() => {
+  useLayoutEffect5(() => {
     if (!env.isRendering) {
       return;
     }
@@ -6864,7 +6941,7 @@ var random = (seed, dummy) => {
 };
 
 // src/use-amplification.ts
-import { useContext as useContext22, useLayoutEffect as useLayoutEffect5, useRef as useRef15 } from "react";
+import { useContext as useContext22, useLayoutEffect as useLayoutEffect6, useRef as useRef15 } from "react";
 
 // src/audio/shared-audio-tags.tsx
 import React21, {
@@ -7667,7 +7744,7 @@ var useVolume = ({
   }
   const { audioContext, gainNode: masterGainNode } = sharedAudioContext;
   if (typeof window !== "undefined") {
-    useLayoutEffect5(() => {
+    useLayoutEffect6(() => {
       if (!audioContext) {
         return;
       }
@@ -7988,7 +8065,7 @@ import {
   useCallback as useCallback13,
   useContext as useContext27,
   useEffect as useEffect12,
-  useLayoutEffect as useLayoutEffect7,
+  useLayoutEffect as useLayoutEffect8,
   useRef as useRef19
 } from "react";
 
@@ -8003,7 +8080,7 @@ import React22, {
   useCallback as useCallback11,
   useContext as useContext25,
   useEffect as useEffect9,
-  useLayoutEffect as useLayoutEffect6,
+  useLayoutEffect as useLayoutEffect7,
   useMemo as useMemo25,
   useRef as useRef16,
   useState as useState12
@@ -8074,7 +8151,7 @@ var useBufferManager = (logLevel, mountTime) => {
     }
   }, [blocks]);
   if (typeof window !== "undefined") {
-    useLayoutEffect6(() => {
+    useLayoutEffect7(() => {
       if (rendering) {
         return;
       }
@@ -8731,7 +8808,7 @@ var useMediaPlayback = ({
     isPostmounting
   ]);
   const env = useRemotionEnvironment();
-  useLayoutEffect7(() => {
+  useLayoutEffect8(() => {
     const playbackRateToSet = Math.max(0, playbackRate);
     if (mediaRef.current && mediaRef.current.playbackRate !== playbackRateToSet) {
       mediaRef.current.playbackRate = playbackRateToSet;
@@ -9141,7 +9218,7 @@ import {
   useContext as useContext30,
   useEffect as useEffect15,
   useImperativeHandle as useImperativeHandle5,
-  useLayoutEffect as useLayoutEffect8,
+  useLayoutEffect as useLayoutEffect9,
   useMemo as useMemo30,
   useRef as useRef21
 } from "react";
@@ -9232,7 +9309,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
   ]);
   const { src } = props;
   const needsToRenderAudioTag = ref || _remotionInternalNeedsDurationCalculation;
-  useLayoutEffect8(() => {
+  useLayoutEffect9(() => {
     if (window.process?.env?.NODE_ENV === "test") {
       return;
     }
@@ -9645,7 +9722,7 @@ import {
   forwardRef as forwardRef9,
   useCallback as useCallback17,
   useContext as useContext32,
-  useLayoutEffect as useLayoutEffect9,
+  useLayoutEffect as useLayoutEffect10,
   useMemo as useMemo32,
   useRef as useRef23
 } from "react";
@@ -9904,7 +9981,7 @@ var HtmlInCanvasContent = forwardRef9(({
     resolvedPixelDensity,
     canRetryMissingPaintRecord
   ]);
-  useLayoutEffect9(() => {
+  useLayoutEffect10(() => {
     const placeholder = canvas2dRef.current;
     if (!placeholder) {
       throw new Error("Canvas not found");
@@ -9936,7 +10013,7 @@ var HtmlInCanvasContent = forwardRef9(({
     usesDirectLayoutCanvas
   ]);
   const onPaintChangedRef = useRef23(false);
-  useLayoutEffect9(() => {
+  useLayoutEffect10(() => {
     if (!onPaintChangedRef.current) {
       onPaintChangedRef.current = true;
       return;
@@ -9947,7 +10024,7 @@ var HtmlInCanvasContent = forwardRef9(({
     }
     canvas.requestPaint?.();
   }, [onPaint, memoizedEffects]);
-  useLayoutEffect9(() => {
+  useLayoutEffect10(() => {
     const canvas = canvas2dRef.current;
     if (!canvas) {
       return;
@@ -10091,7 +10168,7 @@ import {
   useCallback as useCallback18,
   useContext as useContext33,
   useImperativeHandle as useImperativeHandle7,
-  useLayoutEffect as useLayoutEffect10,
+  useLayoutEffect as useLayoutEffect11,
   useMemo as useMemo33,
   useRef as useRef24,
   useState as useState16
@@ -10261,7 +10338,7 @@ var CanvasImageContent = forwardRef10(({
       ref.current = canvas;
     }
   }, [ref, refForOutline]);
-  useLayoutEffect10(() => {
+  useLayoutEffect11(() => {
     if (!pauseWhenLoading || !isLoadPending || isPremounting || isPostmounting) {
       return;
     }
@@ -10273,7 +10350,7 @@ var CanvasImageContent = forwardRef10(({
     isPremounting,
     pauseWhenLoading
   ]);
-  useLayoutEffect10(() => {
+  useLayoutEffect11(() => {
     const handle = delayRender2(`Rendering <CanvasImage> with src="${truncateSrcForLabel(actualSrc)}"`, {
       retries: delayRenderRetries ?? undefined,
       timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
@@ -10335,7 +10412,7 @@ var CanvasImageContent = forwardRef10(({
     maxRetries,
     onError
   ]);
-  useLayoutEffect10(() => {
+  useLayoutEffect11(() => {
     if (!loadedImage || !outputCanvas || !sourceCanvas) {
       return;
     }
@@ -10625,7 +10702,7 @@ var IFrame = forwardRef11(IFrameRefForwarding);
 import {
   useCallback as useCallback20,
   useContext as useContext34,
-  useLayoutEffect as useLayoutEffect11,
+  useLayoutEffect as useLayoutEffect12,
   useRef as useRef25,
   useState as useState18
 } from "react";
@@ -10706,7 +10783,7 @@ var ImgContent = ({
     } catch {}
   }, [cancelRender2, maxRetries, onError, retryIn]);
   if (typeof window !== "undefined") {
-    useLayoutEffect11(() => {
+    useLayoutEffect12(() => {
       if (!pauseWhenLoading || !isLoading || isPremounting || isPostmounting) {
         return;
       }
@@ -10718,7 +10795,7 @@ var ImgContent = ({
       isPremounting,
       pauseWhenLoading
     ]);
-    useLayoutEffect11(() => {
+    useLayoutEffect12(() => {
       if (window.process?.env?.NODE_ENV === "test") {
         if (imageRef.current) {
           imageRef.current.src = actualSrc;
@@ -11072,7 +11149,8 @@ var makeRemotionComponentIdentity = ({
 };
 var interactiveElementSchema = {
   ...baseSchema,
-  ...transformSchema
+  ...transformSchema,
+  ...cropSchema
 };
 var interactiveBackgroundElementSchema = {
   ...interactiveElementSchema,
@@ -11129,8 +11207,21 @@ var makeInteractiveElement = (tag, displayName, schema) => {
       name,
       showInTimeline,
       controls,
+      cropLeft,
+      cropRight,
+      cropTop,
+      cropBottom,
+      style,
       ...props2
     } = propsWithControls;
+    const croppedStyle = useCropStyle({
+      cropLeft,
+      cropRight,
+      cropTop,
+      cropBottom,
+      style: style ?? null,
+      componentName: displayName
+    });
     const refForOutline = useRef26(null);
     const callbackRef = useCallback21((element) => {
       refForOutline.current = element;
@@ -11150,6 +11241,7 @@ var makeInteractiveElement = (tag, displayName, schema) => {
       outlineRef: refForOutline,
       children: React31.createElement(tag, {
         ...props2,
+        style: croppedStyle ?? undefined,
         ref: callbackRef
       })
     });
@@ -11868,7 +11960,7 @@ import {
   useCallback as useCallback23,
   useContext as useContext37,
   useEffect as useEffect17,
-  useLayoutEffect as useLayoutEffect12,
+  useLayoutEffect as useLayoutEffect13,
   useMemo as useMemo37,
   useState as useState20
 } from "react";
@@ -11987,7 +12079,7 @@ var OffthreadVideoForRendering = ({
   }, [toneMapped, currentTime, src, transparent]);
   const [imageSrc, setImageSrc] = useState20(null);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  useLayoutEffect12(() => {
+  useLayoutEffect13(() => {
     if (!window.remotion_videoEnabled) {
       return;
     }
@@ -12584,6 +12676,7 @@ import { jsx as jsx37 } from "react/jsx-runtime";
 function useRemotionContexts() {
   const compositionManagerCtx = React41.useContext(CompositionManager);
   const timelineContext = React41.useContext(TimelineContext);
+  const timelineImperativeContext = React41.useContext(TimelineImperativeContext);
   const setTimelineContext = React41.useContext(SetTimelineContext);
   const sequenceContext = React41.useContext(SequenceContext);
   const nonceContext = React41.useContext(NonceContext);
@@ -12599,6 +12692,7 @@ function useRemotionContexts() {
   return useMemo39(() => ({
     compositionManagerCtx,
     timelineContext,
+    timelineImperativeContext,
     setTimelineContext,
     sequenceContext,
     nonceContext,
@@ -12617,6 +12711,7 @@ function useRemotionContexts() {
     sequenceContext,
     setTimelineContext,
     timelineContext,
+    timelineImperativeContext,
     canUseRemotionHooksContext,
     preloadContext,
     resolveCompositionContext,
@@ -12650,15 +12745,18 @@ var RemotionContextProvider = (props2) => {
                     value: contexts.renderAssetManagerContext,
                     children: /* @__PURE__ */ jsx37(ResolveCompositionContext.Provider, {
                       value: contexts.resolveCompositionContext,
-                      children: /* @__PURE__ */ jsx37(TimelineContext.Provider, {
-                        value: contexts.timelineContext,
-                        children: /* @__PURE__ */ jsx37(SetTimelineContext.Provider, {
-                          value: contexts.setTimelineContext,
-                          children: /* @__PURE__ */ jsx37(SequenceContext.Provider, {
-                            value: contexts.sequenceContext,
-                            children: /* @__PURE__ */ jsx37(BufferingContextReact.Provider, {
-                              value: contexts.bufferManagerContext,
-                              children
+                      children: /* @__PURE__ */ jsx37(TimelineImperativeContext.Provider, {
+                        value: contexts.timelineImperativeContext,
+                        children: /* @__PURE__ */ jsx37(TimelineContext.Provider, {
+                          value: contexts.timelineContext,
+                          children: /* @__PURE__ */ jsx37(SetTimelineContext.Provider, {
+                            value: contexts.setTimelineContext,
+                            children: /* @__PURE__ */ jsx37(SequenceContext.Provider, {
+                              value: contexts.sequenceContext,
+                              children: /* @__PURE__ */ jsx37(BufferingContextReact.Provider, {
+                                value: contexts.bufferManagerContext,
+                                children
+                              })
                             })
                           })
                         })
@@ -12804,6 +12902,7 @@ var Internals = {
   TimelinePosition: exports_timeline_position_state,
   DelayRenderContextType,
   TimelineContext,
+  TimelineImperativeContext,
   PlaybackRateContext,
   AbsoluteTimeContext,
   RenderAssetManagerProvider,
@@ -13111,7 +13210,7 @@ import {
   useContext as useContext39,
   useEffect as useEffect20,
   useImperativeHandle as useImperativeHandle10,
-  useLayoutEffect as useLayoutEffect13,
+  useLayoutEffect as useLayoutEffect14,
   useMemo as useMemo41,
   useRef as useRef29
 } from "react";
@@ -13420,7 +13519,7 @@ var VideoForRenderingForwardFunction = ({
   ]);
   const { src } = props2;
   if (environment.isRendering) {
-    useLayoutEffect13(() => {
+    useLayoutEffect14(() => {
       if (window.process?.env?.NODE_ENV === "test") {
         return;
       }

package/dist/esm/version.mjs

@@ -1,5 +1,5 @@
 // src/version.ts
-var VERSION = "4.0.504";
+var VERSION = "4.0.506";
 export {
   VERSION
 };

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/core"
 	},
 	"name": "remotion",
-	"version": "4.0.504",
+	"version": "4.0.506",
 	"description": "Make videos programmatically",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
@@ -35,7 +35,7 @@
 		"react-dom": "19.2.3",
 		"webpack": "5.105.0",
 		"zod": "4.4.3",
-		"@remotion/eslint-config-internal": "4.0.504",
+		"@remotion/eslint-config-internal": "4.0.506",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},