remotion 4.0.473 → 4.0.474

package/dist/cjs/CompositionManager.d.ts

@@ -71,7 +71,7 @@ export type TSequence = {
     premountDisplay: number | null;
     postmountDisplay: number | null;
     controls: SequenceControls | null;
-    refForOutline: React.RefObject<HTMLElement | null> | null;
+    refForOutline: React.RefObject<Element | null> | null;
     effects: readonly EffectDefinition<unknown>[];
     isInsideSeries: boolean;
 } & EnhancedTSequenceData;

package/dist/cjs/Sequence.d.ts

@@ -65,7 +65,7 @@ export type SequencePropsWithoutDuration = {
     /**
      * @deprecated For internal use only.
      */
-    readonly _remotionInternalRefForOutline?: React.RefObject<HTMLElement | null> | null;
+    readonly _remotionInternalRefForOutline?: React.RefObject<Element | null> | null;
 } & LayoutAndStyle;
 export type SequenceProps = {
     readonly durationInFrames?: number;

package/dist/cjs/SequenceManager.d.ts

@@ -1,15 +1,22 @@
 import React from 'react';
 import type { TSequence } from './CompositionManager.js';
-import type { CanUpdateSequencePropStatus, CodeValues, DragOverrideValue, GetDragOverrides, GetEffectDragOverrides } from './use-schema.js';
+import type { CanUpdateSequencePropStatus, DragOverrideValue, GetDragOverrides, GetEffectDragOverrides, PropStatuses } from './use-schema.js';
 export type SequenceManagerContext = {
     registerSequence: (seq: TSequence) => void;
     unregisterSequence: (id: string) => void;
     sequences: TSequence[];
 };
+export type SequenceManagerRef = {
+    current: TSequence[];
+};
 export type SequenceNodePath = Array<string | number>;
 export declare const SequenceManager: React.Context<SequenceManagerContext>;
-export type VisualModeCodeValues = {
-    codeValues: CodeValues;
+export declare const SequenceManagerRefContext: React.Context<SequenceManagerRef>;
+export type VisualModePropStatuses = {
+    propStatuses: PropStatuses;
+};
+export type VisualModePropStatusesRef = {
+    current: PropStatuses;
 };
 export type VisualModeDragOverrides = {
     getDragOverrides: GetDragOverrides;
@@ -20,7 +27,7 @@ export type VisualModeSetters = {
     clearDragOverrides: (nodePath: SequencePropsSubscriptionKey) => void;
     setEffectDragOverrides: (nodePath: SequencePropsSubscriptionKey, effectIndex: number, key: string, value: DragOverrideValue) => void;
     clearEffectDragOverrides: (nodePath: SequencePropsSubscriptionKey, effectIndex: number) => void;
-    setCodeValues: (nodePath: SequencePropsSubscriptionKey, values: (prev: CanUpdateSequencePropsResponse) => CanUpdateSequencePropsResponse) => void;
+    setPropStatuses: (nodePath: SequencePropsSubscriptionKey, values: (prev: CanUpdateSequencePropsResponse) => CanUpdateSequencePropsResponse) => void;
 };
 export type CanUpdateEffectPropsResponseTrue = {
     canUpdate: true;
@@ -48,7 +55,8 @@ export type CanUpdateSequencePropsResponseFalse = {
 };
 export type CanUpdateSequencePropsResponse = CanUpdateSequencePropsResponseTrue | CanUpdateSequencePropsResponseFalse;
 export declare const makeSequencePropsSubscriptionKey: (key: SequencePropsSubscriptionKey) => string;
-export declare const VisualModeCodeValuesContext: React.Context<VisualModeCodeValues>;
+export declare const VisualModePropStatusesContext: React.Context<VisualModePropStatuses>;
+export declare const VisualModePropStatusesRefContext: React.Context<VisualModePropStatusesRef>;
 export declare const VisualModeDragOverridesContext: React.Context<VisualModeDragOverrides>;
 export declare const VisualModeSettersContext: React.Context<VisualModeSetters>;
 export type SequencePropsSubscriptionKey = {

package/dist/cjs/SequenceManager.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SequenceManagerProvider = exports.VisualModeSettersContext = exports.VisualModeDragOverridesContext = exports.VisualModeCodeValuesContext = exports.makeSequencePropsSubscriptionKey = exports.SequenceManager = void 0;
+exports.SequenceManagerProvider = exports.VisualModeSettersContext = exports.VisualModeDragOverridesContext = exports.VisualModePropStatusesRefContext = exports.VisualModePropStatusesContext = exports.makeSequencePropsSubscriptionKey = exports.SequenceManagerRefContext = exports.SequenceManager = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 exports.SequenceManager = react_1.default.createContext({
@@ -45,12 +45,18 @@ exports.SequenceManager = react_1.default.createContext({
     },
     sequences: [],
 });
+exports.SequenceManagerRefContext = react_1.default.createContext({
+    current: [],
+});
 const makeSequencePropsSubscriptionKey = (key) => {
     return `${key.nodePath.join('.')}.${key.sequenceKeys.join('.')}.${key.effectKeys.map((keys) => keys.join('.')).join('.')}`;
 };
 exports.makeSequencePropsSubscriptionKey = makeSequencePropsSubscriptionKey;
-exports.VisualModeCodeValuesContext = react_1.default.createContext({
-    codeValues: {},
+exports.VisualModePropStatusesContext = react_1.default.createContext({
+    propStatuses: {},
+});
+exports.VisualModePropStatusesRefContext = react_1.default.createContext({
+    current: {},
 });
 exports.VisualModeDragOverridesContext = react_1.default.createContext({
     getDragOverrides: () => {
@@ -73,18 +79,22 @@ exports.VisualModeSettersContext = react_1.default.createContext({
     clearEffectDragOverrides: () => {
         throw new Error('VisualModeSettersContext not initialized');
     },
-    setCodeValues: () => {
+    setPropStatuses: () => {
         throw new Error('VisualModeSettersContext not initialized');
     },
 });
 const effectDragOverridesKey = (nodePath, effectIndex) => `${(0, exports.makeSequencePropsSubscriptionKey)(nodePath)}.effects.${effectIndex}`;
 const SequenceManagerProvider = ({ children }) => {
     const [sequences, setSequences] = (0, react_1.useState)([]);
+    const sequencesRef = (0, react_1.useRef)(sequences);
+    sequencesRef.current = sequences;
     const [dragOverrides, setControlOverrides] = (0, react_1.useState)({});
     const controlOverridesRef = (0, react_1.useRef)(dragOverrides);
     controlOverridesRef.current = dragOverrides;
     const [effectDragOverridesState, setEffectDragOverridesState] = (0, react_1.useState)({});
-    const [codeValues, setCodeValuesMapState] = (0, react_1.useState)({});
+    const [propStatuses, setPropStatusesMapState] = (0, react_1.useState)({});
+    const propStatusesRef = (0, react_1.useRef)(propStatuses);
+    propStatusesRef.current = propStatuses;
     const setDragOverrides = (0, react_1.useCallback)((nodePath, key, value) => {
         setControlOverrides((prev) => ({
             ...prev,
@@ -128,8 +138,8 @@ const SequenceManagerProvider = ({ children }) => {
             return next;
         });
     }, []);
-    const setCodeValues = (0, react_1.useCallback)((nodePath, values) => {
-        setCodeValuesMapState((prev) => {
+    const setPropStatuses = (0, react_1.useCallback)((nodePath, values) => {
+        setPropStatusesMapState((prev) => {
             const key = (0, exports.makeSequencePropsSubscriptionKey)(nodePath);
             const prevKey = prev[key];
             const newKey = values(prevKey);
@@ -162,11 +172,11 @@ const SequenceManagerProvider = ({ children }) => {
         var _a;
         return ((_a = effectDragOverridesState[effectDragOverridesKey(nodePath, effectIndex)]) !== null && _a !== void 0 ? _a : {});
     }, [effectDragOverridesState]);
-    const codeValuesContext = (0, react_1.useMemo)(() => {
+    const propStatusesContext = (0, react_1.useMemo)(() => {
         return {
-            codeValues,
+            propStatuses,
         };
-    }, [codeValues]);
+    }, [propStatuses]);
     const dragOverridesContext = (0, react_1.useMemo)(() => {
         return {
             getDragOverrides,
@@ -179,15 +189,15 @@ const SequenceManagerProvider = ({ children }) => {
             clearDragOverrides,
             setEffectDragOverrides,
             clearEffectDragOverrides,
-            setCodeValues,
+            setPropStatuses,
         };
     }, [
         setDragOverrides,
         clearDragOverrides,
         setEffectDragOverrides,
         clearEffectDragOverrides,
-        setCodeValues,
+        setPropStatuses,
     ]);
-    return (jsx_runtime_1.jsx(exports.SequenceManager.Provider, { value: sequenceContext, children: jsx_runtime_1.jsx(exports.VisualModeCodeValuesContext.Provider, { value: codeValuesContext, children: jsx_runtime_1.jsx(exports.VisualModeDragOverridesContext.Provider, { value: dragOverridesContext, children: jsx_runtime_1.jsx(exports.VisualModeSettersContext.Provider, { value: settersContext, children: children }) }) }) }));
+    return (jsx_runtime_1.jsx(exports.SequenceManagerRefContext.Provider, { value: sequencesRef, children: jsx_runtime_1.jsx(exports.SequenceManager.Provider, { value: sequenceContext, children: jsx_runtime_1.jsx(exports.VisualModePropStatusesRefContext.Provider, { value: propStatusesRef, children: jsx_runtime_1.jsx(exports.VisualModePropStatusesContext.Provider, { value: propStatusesContext, children: jsx_runtime_1.jsx(exports.VisualModeDragOverridesContext.Provider, { value: dragOverridesContext, children: jsx_runtime_1.jsx(exports.VisualModeSettersContext.Provider, { value: settersContext, children: children }) }) }) }) }) }));
 };
 exports.SequenceManagerProvider = SequenceManagerProvider;

package/dist/cjs/calculate-media-duration.js

@@ -12,6 +12,6 @@ const calculateMediaDuration = ({ trimAfter, mediaDurationInFrames, playbackRate
         duration -= trimBefore;
     }
     const actualDuration = duration / playbackRate;
-    return Math.floor(actualDuration);
+    return Number(actualDuration.toFixed(10));
 };
 exports.calculateMediaDuration = calculateMediaDuration;

package/dist/cjs/effects/use-memoized-effects.d.ts

@@ -1,6 +1,6 @@
 import type { CannotUpdateEffectReason, CannotUpdateSequenceReason } from '../SequenceManager.js';
 import { type SequencePropsSubscriptionKey } from '../SequenceManager.js';
-import { type CanUpdateSequencePropStatus, type CodeValues } from '../use-schema.js';
+import { type CanUpdateSequencePropStatus, type PropStatuses } from '../use-schema.js';
 import type { EffectDefinition, EffectDefinitionAndStack, EffectDescriptor } from './effect-types.js';
 export declare const useMemoizedEffectDefinitions: (effects: readonly EffectDescriptor<unknown>[]) => readonly EffectDefinition<unknown>[];
 type EffectStatus = {
@@ -13,13 +13,13 @@ type EffectStatus = {
     type: 'can-update-effect';
     props: Record<string, CanUpdateSequencePropStatus>;
 };
-export declare const getEffectCodeValuesCtx: ({ codeValues, nodePath, effectIndex, }: {
-    codeValues: CodeValues;
+export declare const getEffectPropStatusesCtx: ({ propStatuses, nodePath, effectIndex, }: {
+    propStatuses: PropStatuses;
     nodePath: SequencePropsSubscriptionKey;
     effectIndex: number;
 }) => EffectStatus;
-export declare const getCodeValuesCtx: (codeValues: CodeValues, nodePath: SequencePropsSubscriptionKey) => Record<string, CanUpdateSequencePropStatus> | undefined;
-export type GetCodeValuesType = typeof getCodeValuesCtx;
+export declare const getPropStatusesCtx: (propStatuses: PropStatuses, nodePath: SequencePropsSubscriptionKey) => Record<string, CanUpdateSequencePropStatus> | undefined;
+export type GetPropStatusesType = typeof getPropStatusesCtx;
 export declare const useMemoizedEffects: ({ effects, overrideId, }: {
     effects: readonly EffectDescriptor<unknown>[];
     readonly overrideId: string | null;

package/dist/cjs/effects/use-memoized-effects.js

@@ -1,21 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMemoizedEffects = exports.getCodeValuesCtx = exports.getEffectCodeValuesCtx = exports.useMemoizedEffectDefinitions = void 0;
+exports.useMemoizedEffects = exports.getPropStatusesCtx = exports.getEffectPropStatusesCtx = exports.useMemoizedEffectDefinitions = void 0;
 const react_1 = require("react");
 const get_effective_visual_mode_value_js_1 = require("../get-effective-visual-mode-value.js");
+const interpolate_keyframed_status_js_1 = require("../interpolate-keyframed-status.js");
 const sequence_node_path_js_1 = require("../sequence-node-path.js");
 const SequenceManager_js_1 = require("../SequenceManager.js");
-const SequenceManager_js_2 = require("../SequenceManager.js");
 const use_current_frame_js_1 = require("../use-current-frame.js");
-const mergeOverrides = ({ descriptor, codeOverrides, dragOverrides, frame, }) => {
-    if (!codeOverrides && !dragOverrides) {
+const mergeOverrides = ({ descriptor, propStatusOverrides, dragOverrides, frame, }) => {
+    if (!propStatusOverrides && !dragOverrides) {
         return { params: descriptor.params, effectKey: descriptor.effectKey };
     }
     const merged = {
         ...descriptor.params,
     };
-    if (codeOverrides) {
-        for (const [key, value] of Object.entries(codeOverrides)) {
+    if (propStatusOverrides) {
+        for (const [key, value] of Object.entries(propStatusOverrides)) {
             if (value !== undefined) {
                 merged[key] = value;
             }
@@ -37,16 +37,27 @@ const mergeOverrides = ({ descriptor, codeOverrides, dragOverrides, frame, }) =>
         effectKey: descriptor.definition.calculateKey(merged),
     };
 };
-const extractCodeOverrides = (propStatus) => {
+const resolvePropStatusOverrides = (propStatus, frame) => {
     if (!propStatus) {
         return null;
     }
     const out = {};
     let hasAny = false;
     for (const [key, status] of Object.entries(propStatus)) {
-        if (status.status !== 'computed') {
+        if (status.status === 'static') {
             out[key] = status.codeValue;
             hasAny = true;
+            continue;
+        }
+        if (status.status === 'keyframed') {
+            const value = (0, interpolate_keyframed_status_js_1.interpolateKeyframedStatus)({
+                frame,
+                status,
+            });
+            if (value !== null) {
+                out[key] = value;
+                hasAny = true;
+            }
         }
     }
     return hasAny ? out : null;
@@ -65,8 +76,8 @@ const useMemoizedEffectDefinitions = (effects) => {
     return definitions;
 };
 exports.useMemoizedEffectDefinitions = useMemoizedEffectDefinitions;
-const getEffectCodeValuesCtx = ({ codeValues, nodePath, effectIndex, }) => {
-    const status = codeValues[(0, SequenceManager_js_1.makeSequencePropsSubscriptionKey)(nodePath)];
+const getEffectPropStatusesCtx = ({ propStatuses, nodePath, effectIndex, }) => {
+    const status = propStatuses[(0, SequenceManager_js_1.makeSequencePropsSubscriptionKey)(nodePath)];
     if (!status) {
         return { type: 'cannot-update-sequence', reason: 'not-found' };
     }
@@ -82,9 +93,9 @@ const getEffectCodeValuesCtx = ({ codeValues, nodePath, effectIndex, }) => {
     }
     return { type: 'can-update-effect', props: effect.props };
 };
-exports.getEffectCodeValuesCtx = getEffectCodeValuesCtx;
-const getCodeValuesCtx = (codeValues, nodePath) => {
-    const status = codeValues[(0, SequenceManager_js_1.makeSequencePropsSubscriptionKey)(nodePath)];
+exports.getEffectPropStatusesCtx = getEffectPropStatusesCtx;
+const getPropStatusesCtx = (propStatuses, nodePath) => {
+    const status = propStatuses[(0, SequenceManager_js_1.makeSequencePropsSubscriptionKey)(nodePath)];
     if (!status) {
         return undefined;
     }
@@ -93,12 +104,12 @@ const getCodeValuesCtx = (codeValues, nodePath) => {
     }
     return status.props;
 };
-exports.getCodeValuesCtx = getCodeValuesCtx;
+exports.getPropStatusesCtx = getPropStatusesCtx;
 const useMemoizedEffects = ({ effects, overrideId, }) => {
     var _a;
     const previousRef = (0, react_1.useRef)(null);
-    const { codeValues } = (0, react_1.useContext)(SequenceManager_js_2.VisualModeCodeValuesContext);
-    const { getEffectDragOverrides } = (0, react_1.useContext)(SequenceManager_js_2.VisualModeDragOverridesContext);
+    const { propStatuses } = (0, react_1.useContext)(SequenceManager_js_1.VisualModePropStatusesContext);
+    const { getEffectDragOverrides } = (0, react_1.useContext)(SequenceManager_js_1.VisualModeDragOverridesContext);
     const frame = (0, use_current_frame_js_1.useCurrentFrame)();
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(sequence_node_path_js_1.OverrideIdsToNodePathsGettersContext);
     const previous = previousRef.current;
@@ -113,19 +124,19 @@ const useMemoizedEffects = ({ effects, overrideId, }) => {
                 effectKey: descriptor.effectKey,
             };
         }
-        const effectStatus = (0, exports.getEffectCodeValuesCtx)({
-            codeValues,
+        const effectStatus = (0, exports.getEffectPropStatusesCtx)({
+            propStatuses,
             nodePath,
             effectIndex: index,
         });
-        const codeOverrides = effectStatus.type === 'can-update-effect'
-            ? extractCodeOverrides(effectStatus.props)
+        const propStatusOverrides = effectStatus.type === 'can-update-effect'
+            ? resolvePropStatusOverrides(effectStatus.props, frame)
             : null;
         const dragOverridesMap = getEffectDragOverrides(nodePath, index);
         const dragOverrides = Object.keys(dragOverridesMap).length === 0 ? null : dragOverridesMap;
         const { params, effectKey } = mergeOverrides({
             descriptor,
-            codeOverrides,
+            propStatusOverrides,
             dragOverrides,
             frame,
         });

package/dist/cjs/get-effective-visual-mode-value.d.ts

@@ -9,8 +9,8 @@ export declare const resolveDragOverrideValue: ({ dragOverrideValue, frame, }: {
     dragOverrideValue: DragOverrideValue | undefined;
     frame: number | null;
 }) => ResolvedDragOverrideValue;
-export declare const getEffectiveVisualModeValue: ({ codeValue, dragOverrideValue, defaultValue, frame, shouldResortToDefaultValueIfUndefined, }: {
-    codeValue: CanUpdateSequencePropStatusKeyframed | CanUpdateSequencePropStatusStatic;
+export declare const getEffectiveVisualModeValue: ({ propStatus, dragOverrideValue, defaultValue, frame, shouldResortToDefaultValueIfUndefined, }: {
+    propStatus: CanUpdateSequencePropStatusKeyframed | CanUpdateSequencePropStatusStatic;
     dragOverrideValue: DragOverrideValue | undefined;
     defaultValue: unknown;
     frame?: number | null | undefined;

package/dist/cjs/get-effective-visual-mode-value.js

@@ -22,7 +22,7 @@ const resolveDragOverrideValue = ({ dragOverrideValue, frame, }) => {
     return { type: 'resolved', value: interpolated };
 };
 exports.resolveDragOverrideValue = resolveDragOverrideValue;
-const getEffectiveVisualModeValue = ({ codeValue, dragOverrideValue, defaultValue, frame = null, shouldResortToDefaultValueIfUndefined = false, }) => {
+const getEffectiveVisualModeValue = ({ propStatus, dragOverrideValue, defaultValue, frame = null, shouldResortToDefaultValueIfUndefined = false, }) => {
     const dragOverride = (0, exports.resolveDragOverrideValue)({
         dragOverrideValue,
         frame,
@@ -30,16 +30,19 @@ const getEffectiveVisualModeValue = ({ codeValue, dragOverrideValue, defaultValu
     if (dragOverride.type === 'resolved' && dragOverride.value !== undefined) {
         return dragOverride.value;
     }
-    if (codeValue.status === 'keyframed' && frame !== null) {
-        return (0, interpolate_keyframed_status_1.interpolateKeyframedStatus)({
-            frame,
-            status: codeValue,
-        });
+    if (propStatus.status === 'keyframed') {
+        if (frame !== null) {
+            return (0, interpolate_keyframed_status_1.interpolateKeyframedStatus)({
+                frame,
+                status: propStatus,
+            });
+        }
+        return shouldResortToDefaultValueIfUndefined ? defaultValue : undefined;
     }
-    if (codeValue.codeValue === undefined &&
+    if (propStatus.codeValue === undefined &&
         shouldResortToDefaultValueIfUndefined) {
         return defaultValue;
     }
-    return codeValue.codeValue;
+    return propStatus.codeValue;
 };
 exports.getEffectiveVisualModeValue = getEffectiveVisualModeValue;

package/dist/cjs/internals.d.ts

@@ -18,8 +18,8 @@ import { type CanUpdateEffectPropsResponse, type CanUpdateEffectPropsResponseFal
 import * as TimelinePosition from './timeline-position-state.js';
 import { type PlaybackRateContextValue, type SetTimelineContextValue, type TimelineContextValue } from './TimelineContext.js';
 import { truthy } from './truthy.js';
-import type { CanUpdateSequencePropStatusFalse, CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusStatic, DragOverrideValue, GetCodeValues, GetDragOverrides, GetEffectCodeValues, GetEffectDragOverrides } from './use-schema.js';
-import { type CanUpdateSequencePropStatus, type CodeValues, type DragOverrides, type EffectDragOverrides } from './use-schema.js';
+import type { CanUpdateSequencePropStatusFalse, CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusStatic, DragOverrideValue, GetDragOverrides, GetEffectDragOverrides, GetEffectPropStatuses, GetPropStatuses } from './use-schema.js';
+import { type CanUpdateSequencePropStatus, type DragOverrides, type EffectDragOverrides, type PropStatuses } from './use-schema.js';
 import type { MediaVolumeContextValue, SetMediaVolumeContextValue } from './volume-position-state.js';
 import type { WatchRemotionStaticFilesPayload } from './watch-static-file.js';
 import { useRemotionContexts } from './wrap-remotion-context.js';
@@ -70,10 +70,12 @@ export declare const Internals: {
     }, "ref"> & import("react").RefAttributes<HTMLVideoElement>>;
     readonly CompositionManager: import("react").Context<CompositionManagerContext>;
     readonly CompositionSetters: import("react").Context<import("./CompositionManagerContext.js").CompositionManagerSetters>;
-    readonly VisualModeCodeValuesContext: import("react").Context<import("./SequenceManager.js").VisualModeCodeValues>;
+    readonly VisualModePropStatusesContext: import("react").Context<import("./SequenceManager.js").VisualModePropStatuses>;
+    readonly VisualModePropStatusesRefContext: import("react").Context<import("./SequenceManager.js").VisualModePropStatusesRef>;
     readonly VisualModeDragOverridesContext: import("react").Context<import("./SequenceManager.js").VisualModeDragOverrides>;
     readonly VisualModeSettersContext: import("react").Context<import("./SequenceManager.js").VisualModeSetters>;
     readonly SequenceManager: import("react").Context<import("./SequenceManager.js").SequenceManagerContext>;
+    readonly SequenceManagerRefContext: import("react").Context<import("./SequenceManager.js").SequenceManagerRef>;
     readonly SequenceStackTracesUpdateContext: import("react").Context<import("./sequence-stack-traces.js").UpdateResolvedStackTraceFn>;
     readonly wrapInSchema: <S extends SequenceSchema, Props extends object>({ Component, schema, supportsEffects, }: {
         Component: import("react").ComponentType<Props & {
@@ -301,7 +303,7 @@ export declare const Internals: {
         postmountDisplay: number | null;
         loopDisplay: import("./CompositionManager.js").LoopDisplay | undefined;
         documentationLink: string | null;
-        refForOutline: import("react").RefObject<HTMLElement | null> | null;
+        refForOutline: import("react").RefObject<Element | null> | null;
     }) => void;
     readonly useLazyComponent: <Props>({ compProps, componentName, noSuspense, }: {
         compProps: CompProps<Props>;
@@ -638,8 +640,8 @@ export declare const Internals: {
         children: import("react").ReactNode;
         collectAssets: import("react").RefObject<import("./RenderAssetManager.js").CollectAssetsRef | null> | null;
     }>;
-    readonly getEffectiveVisualModeValue: ({ codeValue, dragOverrideValue, defaultValue, frame, shouldResortToDefaultValueIfUndefined, }: {
-        codeValue: CanUpdateSequencePropStatusKeyframed | CanUpdateSequencePropStatusStatic;
+    readonly getEffectiveVisualModeValue: ({ propStatus, dragOverrideValue, defaultValue, frame, shouldResortToDefaultValueIfUndefined, }: {
+        propStatus: CanUpdateSequencePropStatusKeyframed | CanUpdateSequencePropStatusStatic;
         dragOverrideValue: DragOverrideValue | undefined;
         defaultValue: unknown;
         frame?: number | null | undefined;
@@ -693,9 +695,9 @@ export declare const Internals: {
         value: unknown;
     }) => string[];
     readonly makeSequencePropsSubscriptionKey: (key: SequencePropsSubscriptionKey) => string;
-    readonly getCodeValuesCtx: (codeValues: CodeValues, nodePath: SequencePropsSubscriptionKey) => Record<string, CanUpdateSequencePropStatus> | undefined;
-    readonly getEffectCodeValuesCtx: ({ codeValues, nodePath, effectIndex, }: {
-        codeValues: CodeValues;
+    readonly getPropStatusesCtx: (propStatuses: PropStatuses, nodePath: SequencePropsSubscriptionKey) => Record<string, CanUpdateSequencePropStatus> | undefined;
+    readonly getEffectPropStatusesCtx: ({ propStatuses, nodePath, effectIndex, }: {
+        propStatuses: PropStatuses;
         nodePath: SequencePropsSubscriptionKey;
         effectIndex: number;
     }) => {
@@ -723,4 +725,4 @@ export declare const Internals: {
         readonly hiddenFromList: true;
     };
 };
-export type { ArrayFieldSchema, ArrayItemFieldSchema, CannotUpdateSequenceReason, CanUpdateEffectPropsResponse, CanUpdateEffectPropsResponseFalse, CanUpdateEffectPropsResponseTrue, CanUpdateSequencePropsResponse, CanUpdateSequencePropsResponseFalse, CanUpdateSequencePropsResponseTrue, CanUpdateSequencePropStatus, CanUpdateSequencePropStatusFalse, CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusStatic, CodeValues, CompositionManagerContext, CompProps, DragOverrides, DragOverrideValue, EffectDragOverrides, GetCodeValues, GetDragOverrides, GetEffectCodeValues, GetEffectDragOverrides, LoggingContextValue, MediaVolumeContextValue, NonceHistory, OverrideIdsToNodePathsGettersContext, OverrideIdsToNodePathsSettersContext, OverrideIdToNodePaths, OverrideToNodePathGetters, OverrideToNodeSetters, PlaybackRateContextValue, RemotionAudioContextState, RemotionEnvironment, ResolvedStackLocation, ScheduleAudioNodeOptions, ScheduleAudioNodeResult, SequenceFieldSchema, SequenceNodePath, SequencePropsSubscriptionKey, SequenceSchema, SerializedJSONWithCustomFields, SetMediaVolumeContextValue, SetTimelineContextValue, TCompMetadata, TComposition, TimelineContextValue, TRenderAsset, TSequence, VisibleFieldSchema, WatchRemotionStaticFilesPayload, };
+export type { ArrayFieldSchema, ArrayItemFieldSchema, CannotUpdateSequenceReason, CanUpdateEffectPropsResponse, CanUpdateEffectPropsResponseFalse, CanUpdateEffectPropsResponseTrue, CanUpdateSequencePropsResponse, CanUpdateSequencePropsResponseFalse, CanUpdateSequencePropsResponseTrue, CanUpdateSequencePropStatus, CanUpdateSequencePropStatusFalse, CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusStatic, CompositionManagerContext, CompProps, DragOverrides, DragOverrideValue, EffectDragOverrides, GetDragOverrides, GetEffectDragOverrides, GetEffectPropStatuses, GetPropStatuses, LoggingContextValue, MediaVolumeContextValue, NonceHistory, OverrideIdsToNodePathsGettersContext, OverrideIdsToNodePathsSettersContext, OverrideIdToNodePaths, OverrideToNodePathGetters, OverrideToNodeSetters, PlaybackRateContextValue, PropStatuses, RemotionAudioContextState, RemotionEnvironment, ResolvedStackLocation, ScheduleAudioNodeOptions, ScheduleAudioNodeResult, SequenceFieldSchema, SequenceNodePath, SequencePropsSubscriptionKey, SequenceSchema, SerializedJSONWithCustomFields, SetMediaVolumeContextValue, SetTimelineContextValue, TCompMetadata, TComposition, TimelineContextValue, TRenderAsset, TSequence, VisibleFieldSchema, WatchRemotionStaticFilesPayload, };

package/dist/cjs/internals.js

@@ -134,10 +134,12 @@ exports.Internals = {
     VideoForPreview: VideoForPreview_js_1.VideoForPreview,
     CompositionManager: CompositionManagerContext_js_1.CompositionManager,
     CompositionSetters: CompositionManagerContext_js_1.CompositionSetters,
-    VisualModeCodeValuesContext: SequenceManager_js_1.VisualModeCodeValuesContext,
+    VisualModePropStatusesContext: SequenceManager_js_1.VisualModePropStatusesContext,
+    VisualModePropStatusesRefContext: SequenceManager_js_1.VisualModePropStatusesRefContext,
     VisualModeDragOverridesContext: SequenceManager_js_1.VisualModeDragOverridesContext,
     VisualModeSettersContext: SequenceManager_js_1.VisualModeSettersContext,
     SequenceManager: SequenceManager_js_1.SequenceManager,
+    SequenceManagerRefContext: SequenceManager_js_1.SequenceManagerRefContext,
     SequenceStackTracesUpdateContext: sequence_stack_traces_js_1.SequenceStackTracesUpdateContext,
     wrapInSchema: wrap_in_schema_js_1.wrapInSchema,
     sequenceSchema: sequence_field_schema_js_1.sequenceSchema,
@@ -256,8 +258,8 @@ exports.Internals = {
     OverrideIdsToNodePathsSettersContext: sequence_node_path_js_1.OverrideIdsToNodePathsSettersContext,
     findPropsToDelete: find_props_to_delete_js_1.findPropsToDelete,
     makeSequencePropsSubscriptionKey: SequenceManager_js_1.makeSequencePropsSubscriptionKey,
-    getCodeValuesCtx: use_memoized_effects_js_1.getCodeValuesCtx,
-    getEffectCodeValuesCtx: use_memoized_effects_js_1.getEffectCodeValuesCtx,
+    getPropStatusesCtx: use_memoized_effects_js_1.getPropStatusesCtx,
+    getEffectPropStatusesCtx: use_memoized_effects_js_1.getEffectPropStatusesCtx,
     hiddenField: sequence_field_schema_js_1.hiddenField,
     durationInFramesField: sequence_field_schema_js_1.durationInFramesField,
     fromField: sequence_field_schema_js_1.fromField,

package/dist/cjs/use-media-in-timeline.d.ts

@@ -38,5 +38,5 @@ export declare const useMediaInTimeline: ({ volume, mediaVolume, src, mediaType,
     postmountDisplay: number | null;
     loopDisplay: LoopDisplay | undefined;
     documentationLink: string | null;
-    refForOutline: import("react").RefObject<HTMLElement | null> | null;
+    refForOutline: import("react").RefObject<Element | null> | null;
 }) => void;

package/dist/cjs/use-schema.d.ts

@@ -20,7 +20,6 @@ export type CanUpdateSequencePropStatusComputed = {
 };
 export type CanUpdateSequencePropStatusKeyframed = {
     status: 'keyframed';
-    codeValue: unknown;
     interpolationFunction: CanUpdateSequencePropStatusInterpolationFunction;
     keyframes: CanUpdateSequencePropStatusKeyframe[];
     easing: CanUpdateSequencePropStatusEasing[];
@@ -38,9 +37,9 @@ export type DragOverrideValue = {
 };
 export type DragOverrides = Record<string, Record<string, DragOverrideValue>>;
 export type EffectDragOverrides = Record<string, Record<string, DragOverrideValue>>;
-export type CodeValues = Record<string, CanUpdateSequencePropsResponse>;
-export type GetCodeValues = (nodePath: SequencePropsSubscriptionKey) => Record<string, CanUpdateSequencePropStatus> | undefined;
-export type GetEffectCodeValues = (nodePath: SequencePropsSubscriptionKey, effectIndex: number) => Record<string, CanUpdateSequencePropStatus> | undefined;
+export type PropStatuses = Record<string, CanUpdateSequencePropsResponse>;
+export type GetPropStatuses = (nodePath: SequencePropsSubscriptionKey) => Record<string, CanUpdateSequencePropStatus> | undefined;
+export type GetEffectPropStatuses = (nodePath: SequencePropsSubscriptionKey, effectIndex: number) => Record<string, CanUpdateSequencePropStatus> | undefined;
 export type GetDragOverrides = (nodePath: SequencePropsSubscriptionKey) => DragOverrides[string];
 export type GetEffectDragOverrides = (nodePath: SequencePropsSubscriptionKey, effectIndex: number) => Record<string, DragOverrideValue>;
 export declare const makeStaticDragOverride: (value: unknown) => DragOverrideValue;

package/dist/cjs/use-schema.js

@@ -64,16 +64,16 @@ const computeEffectiveSchemaValuesDotNotation = ({ schema, currentValue, overrid
     const merged = {};
     const propsToDelete = new Set();
     for (const key of Object.keys(currentValue)) {
-        const codeValueStatus = (_b = propStatus === null || propStatus === void 0 ? void 0 : propStatus[key]) !== null && _b !== void 0 ? _b : null;
+        const status = (_b = propStatus === null || propStatus === void 0 ? void 0 : propStatus[key]) !== null && _b !== void 0 ? _b : null;
         const field = findFieldInSchema(schema, key);
         if ((field === null || field === void 0 ? void 0 : field.type) === 'hidden') {
             continue;
         }
         let value;
-        if (codeValueStatus === null) {
+        if (status === null) {
             value = currentValue[key];
         }
-        else if ((0, exports.isKeyframedStatus)(codeValueStatus)) {
+        else if ((0, exports.isKeyframedStatus)(status)) {
             if ((field === null || field === void 0 ? void 0 : field.type) === 'array' || (field === null || field === void 0 ? void 0 : field.keyframable) === false) {
                 value = currentValue[key];
             }
@@ -88,7 +88,7 @@ const computeEffectiveSchemaValuesDotNotation = ({ schema, currentValue, overrid
                 else if (frame !== null) {
                     const interpolated = (0, interpolate_keyframed_status_js_1.interpolateKeyframedStatus)({
                         frame,
-                        status: codeValueStatus,
+                        status,
                     });
                     value = interpolated !== null && interpolated !== void 0 ? interpolated : currentValue[key];
                 }
@@ -97,12 +97,12 @@ const computeEffectiveSchemaValuesDotNotation = ({ schema, currentValue, overrid
                 }
             }
         }
-        else if (codeValueStatus.status === 'computed') {
+        else if (status.status === 'computed') {
             value = currentValue[key];
         }
         else {
             value = (0, get_effective_visual_mode_value_js_1.getEffectiveVisualModeValue)({
-                codeValue: codeValueStatus,
+                propStatus: status,
                 dragOverrideValue: overrideValues[key],
                 defaultValue: field === null || field === void 0 ? void 0 : field.default,
                 frame,

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.473";
+export declare const VERSION = "4.0.474";

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.473';
+exports.VERSION = '4.0.474';

package/dist/cjs/wrap-in-schema.js

@@ -112,7 +112,7 @@ const wrapInSchema = ({ Component, schema, supportsEffects, }) => {
             });
         }
         // eslint-disable-next-line react-hooks/rules-of-hooks
-        const { codeValues } = (0, react_1.useContext)(SequenceManager_js_1.VisualModeCodeValuesContext);
+        const { propStatuses } = (0, react_1.useContext)(SequenceManager_js_1.VisualModePropStatusesContext);
         // eslint-disable-next-line react-hooks/rules-of-hooks
         const { getDragOverrides } = (0, react_1.useContext)(SequenceManager_js_1.VisualModeDragOverridesContext);
         // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -169,14 +169,14 @@ const wrapInSchema = ({ Component, schema, supportsEffects, }) => {
                 overrideValues: nodePath === null ? {} : getDragOverrides(nodePath),
                 propStatus: nodePath === null
                     ? undefined
-                    : (0, use_memoized_effects_js_1.getCodeValuesCtx)(codeValues, nodePath),
+                    : (0, use_memoized_effects_js_1.getPropStatusesCtx)(propStatuses, nodePath),
                 frame,
             });
         }, [
             currentRuntimeValueDotNotation,
             getDragOverrides,
             nodePath,
-            codeValues,
+            propStatuses,
             frame,
         ]);
         // 4. Eliminate values forbidden by the resolved discriminated union.

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

@@ -25,6 +25,8 @@ export declare function useRemotionContexts(): {
     } | null;
     renderAssetManagerContext: import("./RenderAssetManager.js").RenderAssetManagerContext;
     sequenceManagerContext: import("./SequenceManager.js").SequenceManagerContext;
+    sequenceManagerRefContext: import("./SequenceManager.js").SequenceManagerRef;
+    visualModePropStatusesRefContext: import("./SequenceManager.js").VisualModePropStatusesRef;
     bufferManagerContext: {
         addBlock: (block: {
             id: string;

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

@@ -62,6 +62,8 @@ function useRemotionContexts() {
     const resolveCompositionContext = react_1.default.useContext(ResolveCompositionConfig_js_1.ResolveCompositionContext);
     const renderAssetManagerContext = react_1.default.useContext(RenderAssetManager_js_1.RenderAssetManager);
     const sequenceManagerContext = react_1.default.useContext(SequenceManager_js_1.SequenceManager);
+    const sequenceManagerRefContext = react_1.default.useContext(SequenceManager_js_1.SequenceManagerRefContext);
+    const visualModePropStatusesRefContext = react_1.default.useContext(SequenceManager_js_1.VisualModePropStatusesRefContext);
     const bufferManagerContext = react_1.default.useContext(buffering_js_1.BufferingContextReact);
     const logLevelContext = react_1.default.useContext(log_level_context_js_1.LogLevelContext);
     return (0, react_1.useMemo)(() => ({
@@ -75,6 +77,8 @@ function useRemotionContexts() {
         resolveCompositionContext,
         renderAssetManagerContext,
         sequenceManagerContext,
+        sequenceManagerRefContext,
+        visualModePropStatusesRefContext,
         bufferManagerContext,
         logLevelContext,
     }), [
@@ -88,12 +92,14 @@ function useRemotionContexts() {
         resolveCompositionContext,
         renderAssetManagerContext,
         sequenceManagerContext,
+        sequenceManagerRefContext,
+        visualModePropStatusesRefContext,
         bufferManagerContext,
         logLevelContext,
     ]);
 }
 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.SequenceManager.Provider, { value: contexts.sequenceManagerContext, 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.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

@@ -1291,7 +1291,7 @@ var addSequenceStackTraces = (component) => {
 };
 
 // src/version.ts
-var VERSION = "4.0.473";
+var VERSION = "4.0.474";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -1832,11 +1832,17 @@ var SequenceManager = React11.createContext({
   },
   sequences: []
 });
+var SequenceManagerRefContext = React11.createContext({
+  current: []
+});
 var makeSequencePropsSubscriptionKey = (key) => {
   return `${key.nodePath.join(".")}.${key.sequenceKeys.join(".")}.${key.effectKeys.map((keys) => keys.join(".")).join(".")}`;
 };
-var VisualModeCodeValuesContext = React11.createContext({
-  codeValues: {}
+var VisualModePropStatusesContext = React11.createContext({
+  propStatuses: {}
+});
+var VisualModePropStatusesRefContext = React11.createContext({
+  current: {}
 });
 var VisualModeDragOverridesContext = React11.createContext({
   getDragOverrides: () => {
@@ -1859,18 +1865,22 @@ var VisualModeSettersContext = React11.createContext({
   clearEffectDragOverrides: () => {
     throw new Error("VisualModeSettersContext not initialized");
   },
-  setCodeValues: () => {
+  setPropStatuses: () => {
     throw new Error("VisualModeSettersContext not initialized");
   }
 });
 var effectDragOverridesKey = (nodePath, effectIndex) => `${makeSequencePropsSubscriptionKey(nodePath)}.effects.${effectIndex}`;
 var SequenceManagerProvider = ({ children }) => {
   const [sequences, setSequences] = useState3([]);
+  const sequencesRef = useRef4(sequences);
+  sequencesRef.current = sequences;
   const [dragOverrides, setControlOverrides] = useState3({});
   const controlOverridesRef = useRef4(dragOverrides);
   controlOverridesRef.current = dragOverrides;
   const [effectDragOverridesState, setEffectDragOverridesState] = useState3({});
-  const [codeValues, setCodeValuesMapState] = useState3({});
+  const [propStatuses, setPropStatusesMapState] = useState3({});
+  const propStatusesRef = useRef4(propStatuses);
+  propStatusesRef.current = propStatuses;
   const setDragOverrides = useCallback5((nodePath, key, value) => {
     setControlOverrides((prev) => ({
       ...prev,
@@ -1914,8 +1924,8 @@ var SequenceManagerProvider = ({ children }) => {
       return next;
     });
   }, []);
-  const setCodeValues = useCallback5((nodePath, values) => {
-    setCodeValuesMapState((prev) => {
+  const setPropStatuses = useCallback5((nodePath, values) => {
+    setPropStatusesMapState((prev) => {
       const key = makeSequencePropsSubscriptionKey(nodePath);
       const prevKey = prev[key];
       const newKey = values(prevKey);
@@ -1946,11 +1956,11 @@ var SequenceManagerProvider = ({ children }) => {
   const getEffectDragOverrides = useCallback5((nodePath, effectIndex) => {
     return effectDragOverridesState[effectDragOverridesKey(nodePath, effectIndex)] ?? {};
   }, [effectDragOverridesState]);
-  const codeValuesContext = useMemo12(() => {
+  const propStatusesContext = useMemo12(() => {
     return {
-      codeValues
+      propStatuses
     };
-  }, [codeValues]);
+  }, [propStatuses]);
   const dragOverridesContext = useMemo12(() => {
     return {
       getDragOverrides,
@@ -1963,24 +1973,30 @@ var SequenceManagerProvider = ({ children }) => {
       clearDragOverrides,
       setEffectDragOverrides,
       clearEffectDragOverrides,
-      setCodeValues
+      setPropStatuses
     };
   }, [
     setDragOverrides,
     clearDragOverrides,
     setEffectDragOverrides,
     clearEffectDragOverrides,
-    setCodeValues
+    setPropStatuses
   ]);
-  return /* @__PURE__ */ jsx10(SequenceManager.Provider, {
-    value: sequenceContext,
-    children: /* @__PURE__ */ jsx10(VisualModeCodeValuesContext.Provider, {
-      value: codeValuesContext,
-      children: /* @__PURE__ */ jsx10(VisualModeDragOverridesContext.Provider, {
-        value: dragOverridesContext,
-        children: /* @__PURE__ */ jsx10(VisualModeSettersContext.Provider, {
-          value: settersContext,
-          children
+  return /* @__PURE__ */ jsx10(SequenceManagerRefContext.Provider, {
+    value: sequencesRef,
+    children: /* @__PURE__ */ jsx10(SequenceManager.Provider, {
+      value: sequenceContext,
+      children: /* @__PURE__ */ jsx10(VisualModePropStatusesRefContext.Provider, {
+        value: propStatusesRef,
+        children: /* @__PURE__ */ jsx10(VisualModePropStatusesContext.Provider, {
+          value: propStatusesContext,
+          children: /* @__PURE__ */ jsx10(VisualModeDragOverridesContext.Provider, {
+            value: dragOverridesContext,
+            children: /* @__PURE__ */ jsx10(VisualModeSettersContext.Provider, {
+              value: settersContext,
+              children
+            })
+          })
         })
       })
     })
@@ -3178,7 +3194,7 @@ var resolveDragOverrideValue = ({
   return { type: "resolved", value: interpolated };
 };
 var getEffectiveVisualModeValue = ({
-  codeValue,
+  propStatus,
   dragOverrideValue,
   defaultValue,
   frame = null,
@@ -3191,16 +3207,19 @@ var getEffectiveVisualModeValue = ({
   if (dragOverride.type === "resolved" && dragOverride.value !== undefined) {
     return dragOverride.value;
   }
-  if (codeValue.status === "keyframed" && frame !== null) {
-    return interpolateKeyframedStatus({
-      frame,
-      status: codeValue
-    });
+  if (propStatus.status === "keyframed") {
+    if (frame !== null) {
+      return interpolateKeyframedStatus({
+        frame,
+        status: propStatus
+      });
+    }
+    return shouldResortToDefaultValueIfUndefined ? defaultValue : undefined;
   }
-  if (codeValue.codeValue === undefined && shouldResortToDefaultValueIfUndefined) {
+  if (propStatus.codeValue === undefined && shouldResortToDefaultValueIfUndefined) {
     return defaultValue;
   }
-  return codeValue.codeValue;
+  return propStatus.codeValue;
 };
 
 // src/sequence-node-path.tsx
@@ -3217,18 +3236,18 @@ var OverrideIdsToNodePathsSettersContext = createContext16({
 // src/effects/use-memoized-effects.ts
 var mergeOverrides = ({
   descriptor,
-  codeOverrides,
+  propStatusOverrides,
   dragOverrides,
   frame
 }) => {
-  if (!codeOverrides && !dragOverrides) {
+  if (!propStatusOverrides && !dragOverrides) {
     return { params: descriptor.params, effectKey: descriptor.effectKey };
   }
   const merged = {
     ...descriptor.params
   };
-  if (codeOverrides) {
-    for (const [key, value] of Object.entries(codeOverrides)) {
+  if (propStatusOverrides) {
+    for (const [key, value] of Object.entries(propStatusOverrides)) {
       if (value !== undefined) {
         merged[key] = value;
       }
@@ -3250,16 +3269,27 @@ var mergeOverrides = ({
     effectKey: descriptor.definition.calculateKey(merged)
   };
 };
-var extractCodeOverrides = (propStatus) => {
+var resolvePropStatusOverrides = (propStatus, frame) => {
   if (!propStatus) {
     return null;
   }
   const out = {};
   let hasAny = false;
   for (const [key, status] of Object.entries(propStatus)) {
-    if (status.status !== "computed") {
+    if (status.status === "static") {
       out[key] = status.codeValue;
       hasAny = true;
+      continue;
+    }
+    if (status.status === "keyframed") {
+      const value = interpolateKeyframedStatus({
+        frame,
+        status
+      });
+      if (value !== null) {
+        out[key] = value;
+        hasAny = true;
+      }
     }
   }
   return hasAny ? out : null;
@@ -3275,12 +3305,12 @@ var useMemoizedEffectDefinitions = (effects) => {
   previousRef.current = definitions;
   return definitions;
 };
-var getEffectCodeValuesCtx = ({
-  codeValues,
+var getEffectPropStatusesCtx = ({
+  propStatuses,
   nodePath,
   effectIndex
 }) => {
-  const status = codeValues[makeSequencePropsSubscriptionKey(nodePath)];
+  const status = propStatuses[makeSequencePropsSubscriptionKey(nodePath)];
   if (!status) {
     return { type: "cannot-update-sequence", reason: "not-found" };
   }
@@ -3296,8 +3326,8 @@ var getEffectCodeValuesCtx = ({
   }
   return { type: "can-update-effect", props: effect.props };
 };
-var getCodeValuesCtx = (codeValues, nodePath) => {
-  const status = codeValues[makeSequencePropsSubscriptionKey(nodePath)];
+var getPropStatusesCtx = (propStatuses, nodePath) => {
+  const status = propStatuses[makeSequencePropsSubscriptionKey(nodePath)];
   if (!status) {
     return;
   }
@@ -3311,7 +3341,7 @@ var useMemoizedEffects = ({
   overrideId
 }) => {
   const previousRef = useRef5(null);
-  const { codeValues } = useContext15(VisualModeCodeValuesContext);
+  const { propStatuses } = useContext15(VisualModePropStatusesContext);
   const { getEffectDragOverrides } = useContext15(VisualModeDragOverridesContext);
   const frame = useCurrentFrame();
   const { overrideIdToNodePathMappings } = useContext15(OverrideIdsToNodePathsGettersContext);
@@ -3325,17 +3355,17 @@ var useMemoizedEffects = ({
         effectKey: descriptor.effectKey
       };
     }
-    const effectStatus = getEffectCodeValuesCtx({
-      codeValues,
+    const effectStatus = getEffectPropStatusesCtx({
+      propStatuses,
       nodePath,
       effectIndex: index
     });
-    const codeOverrides = effectStatus.type === "can-update-effect" ? extractCodeOverrides(effectStatus.props) : null;
+    const propStatusOverrides = effectStatus.type === "can-update-effect" ? resolvePropStatusOverrides(effectStatus.props, frame) : null;
     const dragOverridesMap = getEffectDragOverrides(nodePath, index);
     const dragOverrides = Object.keys(dragOverridesMap).length === 0 ? null : dragOverridesMap;
     const { params, effectKey } = mergeOverrides({
       descriptor,
-      codeOverrides,
+      propStatusOverrides,
       dragOverrides,
       frame
     });
@@ -3493,15 +3523,15 @@ var computeEffectiveSchemaValuesDotNotation = ({
   const merged = {};
   const propsToDelete = new Set;
   for (const key of Object.keys(currentValue)) {
-    const codeValueStatus = propStatus?.[key] ?? null;
+    const status = propStatus?.[key] ?? null;
     const field = findFieldInSchema(schema, key);
     if (field?.type === "hidden") {
       continue;
     }
     let value;
-    if (codeValueStatus === null) {
+    if (status === null) {
       value = currentValue[key];
-    } else if (isKeyframedStatus(codeValueStatus)) {
+    } else if (isKeyframedStatus(status)) {
       if (field?.type === "array" || field?.keyframable === false) {
         value = currentValue[key];
       } else {
@@ -3514,18 +3544,18 @@ var computeEffectiveSchemaValuesDotNotation = ({
         } else if (frame !== null) {
           const interpolated = interpolateKeyframedStatus({
             frame,
-            status: codeValueStatus
+            status
           });
           value = interpolated ?? currentValue[key];
         } else {
           value = currentValue[key];
         }
       }
-    } else if (codeValueStatus.status === "computed") {
+    } else if (status.status === "computed") {
       value = currentValue[key];
     } else {
       value = getEffectiveVisualModeValue({
-        codeValue: codeValueStatus,
+        propStatus: status,
         dragOverrideValue: overrideValues[key],
         defaultValue: field?.default,
         frame,
@@ -3619,7 +3649,7 @@ var wrapInSchema = ({
         ref
       });
     }
-    const { codeValues } = useContext16(VisualModeCodeValuesContext);
+    const { propStatuses } = useContext16(VisualModePropStatusesContext);
     const { getDragOverrides } = useContext16(VisualModeDragOverridesContext);
     const nodePathMapping = useContext16(OverrideIdsToNodePathsGettersContext);
     const frame = useCurrentFrame();
@@ -3658,14 +3688,14 @@ var wrapInSchema = ({
         schema,
         currentValue: currentRuntimeValueDotNotation,
         overrideValues: nodePath === null ? {} : getDragOverrides(nodePath),
-        propStatus: nodePath === null ? undefined : getCodeValuesCtx(codeValues, nodePath),
+        propStatus: nodePath === null ? undefined : getPropStatusesCtx(propStatuses, nodePath),
         frame
       });
     }, [
       currentRuntimeValueDotNotation,
       getDragOverrides,
       nodePath,
-      codeValues,
+      propStatuses,
       frame
     ]);
     const activeKeys = selectActiveKeys(schema, valuesDotNotation);
@@ -4970,7 +5000,7 @@ var calculateMediaDuration = ({
     duration -= trimBefore;
   }
   const actualDuration = duration / playbackRate;
-  return Math.floor(actualDuration);
+  return Number(actualDuration.toFixed(10));
 };
 
 // src/loop/index.tsx
@@ -10524,6 +10554,8 @@ function useRemotionContexts() {
   const resolveCompositionContext = React38.useContext(ResolveCompositionContext);
   const renderAssetManagerContext = React38.useContext(RenderAssetManager);
   const sequenceManagerContext = React38.useContext(SequenceManager);
+  const sequenceManagerRefContext = React38.useContext(SequenceManagerRefContext);
+  const visualModePropStatusesRefContext = React38.useContext(VisualModePropStatusesRefContext);
   const bufferManagerContext = React38.useContext(BufferingContextReact);
   const logLevelContext = React38.useContext(LogLevelContext);
   return useMemo37(() => ({
@@ -10537,6 +10569,8 @@ function useRemotionContexts() {
     resolveCompositionContext,
     renderAssetManagerContext,
     sequenceManagerContext,
+    sequenceManagerRefContext,
+    visualModePropStatusesRefContext,
     bufferManagerContext,
     logLevelContext
   }), [
@@ -10550,6 +10584,8 @@ function useRemotionContexts() {
     resolveCompositionContext,
     renderAssetManagerContext,
     sequenceManagerContext,
+    sequenceManagerRefContext,
+    visualModePropStatusesRefContext,
     bufferManagerContext,
     logLevelContext
   ]);
@@ -10566,21 +10602,27 @@ var RemotionContextProvider = (props2) => {
           value: contexts.preloadContext,
           children: /* @__PURE__ */ jsx35(CompositionManager.Provider, {
             value: contexts.compositionManagerCtx,
-            children: /* @__PURE__ */ jsx35(SequenceManager.Provider, {
-              value: contexts.sequenceManagerContext,
-              children: /* @__PURE__ */ jsx35(RenderAssetManager.Provider, {
-                value: contexts.renderAssetManagerContext,
-                children: /* @__PURE__ */ jsx35(ResolveCompositionContext.Provider, {
-                  value: contexts.resolveCompositionContext,
-                  children: /* @__PURE__ */ jsx35(TimelineContext.Provider, {
-                    value: contexts.timelineContext,
-                    children: /* @__PURE__ */ jsx35(SetTimelineContext.Provider, {
-                      value: contexts.setTimelineContext,
-                      children: /* @__PURE__ */ jsx35(SequenceContext.Provider, {
-                        value: contexts.sequenceContext,
-                        children: /* @__PURE__ */ jsx35(BufferingContextReact.Provider, {
-                          value: contexts.bufferManagerContext,
-                          children
+            children: /* @__PURE__ */ jsx35(SequenceManagerRefContext.Provider, {
+              value: contexts.sequenceManagerRefContext,
+              children: /* @__PURE__ */ jsx35(SequenceManager.Provider, {
+                value: contexts.sequenceManagerContext,
+                children: /* @__PURE__ */ jsx35(VisualModePropStatusesRefContext.Provider, {
+                  value: contexts.visualModePropStatusesRefContext,
+                  children: /* @__PURE__ */ jsx35(RenderAssetManager.Provider, {
+                    value: contexts.renderAssetManagerContext,
+                    children: /* @__PURE__ */ jsx35(ResolveCompositionContext.Provider, {
+                      value: contexts.resolveCompositionContext,
+                      children: /* @__PURE__ */ jsx35(TimelineContext.Provider, {
+                        value: contexts.timelineContext,
+                        children: /* @__PURE__ */ jsx35(SetTimelineContext.Provider, {
+                          value: contexts.setTimelineContext,
+                          children: /* @__PURE__ */ jsx35(SequenceContext.Provider, {
+                            value: contexts.sequenceContext,
+                            children: /* @__PURE__ */ jsx35(BufferingContextReact.Provider, {
+                              value: contexts.bufferManagerContext,
+                              children
+                            })
+                          })
                         })
                       })
                     })
@@ -10613,10 +10655,12 @@ var Internals = {
   VideoForPreview,
   CompositionManager,
   CompositionSetters,
-  VisualModeCodeValuesContext,
+  VisualModePropStatusesContext,
+  VisualModePropStatusesRefContext,
   VisualModeDragOverridesContext,
   VisualModeSettersContext,
   SequenceManager,
+  SequenceManagerRefContext,
   SequenceStackTracesUpdateContext,
   wrapInSchema,
   sequenceSchema,
@@ -10735,8 +10779,8 @@ var Internals = {
   OverrideIdsToNodePathsSettersContext,
   findPropsToDelete,
   makeSequencePropsSubscriptionKey,
-  getCodeValuesCtx,
-  getEffectCodeValuesCtx,
+  getPropStatusesCtx,
+  getEffectPropStatusesCtx,
   hiddenField,
   durationInFramesField,
   fromField

package/dist/esm/version.mjs

@@ -1,5 +1,5 @@
 // src/version.ts
-var VERSION = "4.0.473";
+var VERSION = "4.0.474";
 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.473",
+	"version": "4.0.474",
 	"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.3.6",
-		"@remotion/eslint-config-internal": "4.0.473",
+		"@remotion/eslint-config-internal": "4.0.474",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},