remotion 4.0.473 → 4.0.475

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 & {
@@ -103,6 +105,12 @@ export declare const Internals: {
             readonly description: "Layout";
             readonly variants: {
                 readonly 'absolute-fill': {
+                    readonly 'style.transformOrigin': {
+                        readonly type: "transform-origin";
+                        readonly step: 1;
+                        readonly default: "50% 50%";
+                        readonly description: "Transform origin";
+                    };
                     readonly 'style.translate': {
                         readonly type: "translate";
                         readonly step: 1;
@@ -159,6 +167,12 @@ export declare const Internals: {
     };
     readonly SequenceWithoutSchema: import("react").ForwardRefExoticComponent<import("./Sequence.js").SequenceProps & import("react").RefAttributes<HTMLDivElement>>;
     readonly sequenceStyleSchema: {
+        readonly 'style.transformOrigin': {
+            readonly type: "transform-origin";
+            readonly step: 1;
+            readonly default: "50% 50%";
+            readonly description: "Transform origin";
+        };
         readonly 'style.translate': {
             readonly type: "translate";
             readonly step: 1;
@@ -210,6 +224,12 @@ export declare const Internals: {
         };
     };
     readonly sequenceVisualStyleSchema: {
+        readonly 'style.transformOrigin': {
+            readonly type: "transform-origin";
+            readonly step: 1;
+            readonly default: "50% 50%";
+            readonly description: "Transform origin";
+        };
         readonly 'style.translate': {
             readonly type: "translate";
             readonly step: 1;
@@ -301,7 +321,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 +658,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 +713,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 +743,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/interpolate-colors.d.ts

@@ -2,9 +2,8 @@
  * Copied from:
  * https://github.com/software-mansion/react-native-reanimated/blob/master/src/reanimated2/Colors.ts
  */
-export type InterpolateColorsOptions = {
-    posterize: number | undefined;
-};
+import { type InterpolateOptions } from './interpolate.js';
+export type InterpolateColorsOptions = Pick<InterpolateOptions, 'easing' | 'posterize'>;
 export declare const colorNames: {
     [key: string]: number;
 };

package/dist/cjs/interpolate-colors.js

@@ -539,6 +539,7 @@ function processColor(color) {
 const interpolateColorsRGB = (value, inputRange, colors, options) => {
     const [r, g, b, a] = [red, green, blue, opacity].map((f) => {
         const unrounded = (0, interpolate_js_1.interpolate)(value, inputRange, colors.map((c) => f(c)), {
+            easing: options === null || options === void 0 ? void 0 : options.easing,
             extrapolateLeft: 'clamp',
             extrapolateRight: 'clamp',
             posterize: options === null || options === void 0 ? void 0 : options.posterize,

package/dist/cjs/interpolate-keyframed-status.js

@@ -28,6 +28,7 @@ const interpolateKeyframedStatus = ({ frame, status, }) => {
         }
         try {
             return (0, interpolate_colors_js_1.interpolateColors)(frame, inputRange, outputs, {
+                easing: easing.map(easingToFn),
                 posterize: status.posterize,
             });
         }

package/dist/cjs/interpolate.js

@@ -42,6 +42,32 @@ const lengthUnits = new Set([
     'vw',
 ]);
 const cssNumberRegex = /^([+-]?(?:\d+\.?\d*|\.\d+))([a-zA-Z%]+)?$/;
+const transformOriginKeywords = new Set([
+    'left',
+    'center',
+    'right',
+    'top',
+    'bottom',
+]);
+const transformOriginKeywordOptions = (keyword) => {
+    if (keyword === 'left') {
+        return [{ axis: 'x', value: { value: 0, unit: '%' } }];
+    }
+    if (keyword === 'right') {
+        return [{ axis: 'x', value: { value: 100, unit: '%' } }];
+    }
+    if (keyword === 'top') {
+        return [{ axis: 'y', value: { value: 0, unit: '%' } }];
+    }
+    if (keyword === 'bottom') {
+        return [{ axis: 'y', value: { value: 100, unit: '%' } }];
+    }
+    return [
+        { axis: 'x', value: { value: 50, unit: '%' } },
+        { axis: 'y', value: { value: 50, unit: '%' } },
+    ];
+};
+const transformOriginCenter = { value: 50, unit: '%' };
 const stringifyNumber = (value) => {
     return String((0, normalize_number_js_1.normalizeNumber)(value));
 };
@@ -67,6 +93,124 @@ const parseStringInterpolationComponent = (component, value) => {
     }
     throw new TypeError(`Cannot interpolate "${value}" because "${unit}" is not a supported translate or rotate unit`);
 };
+const parseTransformOriginLengthPercentage = ({ component, value, allowPercentage, }) => {
+    var _a;
+    const match = cssNumberRegex.exec(component);
+    if (match === null) {
+        throw new TypeError(`Cannot interpolate "${value}" because "${component}" is not a supported transform-origin ${allowPercentage ? 'length-percentage' : 'z length'}`);
+    }
+    const unit = (_a = match[2]) !== null && _a !== void 0 ? _a : null;
+    const numberValue = Number(match[1]);
+    if (!Number.isFinite(numberValue)) {
+        throw new TypeError(`Cannot interpolate "${value}" because "${component}" is not finite`);
+    }
+    if (unit === null ||
+        !lengthUnits.has(unit) ||
+        (!allowPercentage && unit === '%')) {
+        throw new TypeError(`Cannot interpolate "${value}" because "${component}" is not a supported transform-origin ${allowPercentage ? 'length-percentage' : 'z length'}`);
+    }
+    return { value: numberValue, unit };
+};
+const parseTransformOriginToken = (component, value) => {
+    const lower = component.toLowerCase();
+    if (transformOriginKeywords.has(lower)) {
+        return { type: 'keyword', keyword: lower };
+    }
+    return {
+        type: 'length-percentage',
+        parsed: parseTransformOriginLengthPercentage({
+            component,
+            value,
+            allowPercentage: true,
+        }),
+    };
+};
+const parseTwoTransformOriginKeywords = (first, second, value) => {
+    const candidates = [];
+    for (const firstOption of transformOriginKeywordOptions(first)) {
+        for (const secondOption of transformOriginKeywordOptions(second)) {
+            if (firstOption.axis === secondOption.axis) {
+                continue;
+            }
+            candidates.push(firstOption.axis === 'x'
+                ? [firstOption.value, secondOption.value]
+                : [secondOption.value, firstOption.value]);
+        }
+    }
+    if (candidates.length === 0) {
+        throw new TypeError(`Cannot interpolate "${value}" because "${first} ${second}" is not a valid transform-origin keyword pair`);
+    }
+    return candidates[0];
+};
+const parseTransformOriginXY = (parts, value) => {
+    if (parts.length === 1) {
+        const token = parseTransformOriginToken(parts[0], value);
+        if (token.type === 'length-percentage') {
+            return [token.parsed, transformOriginCenter];
+        }
+        if (token.keyword === 'top' || token.keyword === 'bottom') {
+            return [
+                transformOriginCenter,
+                transformOriginKeywordOptions(token.keyword)[0].value,
+            ];
+        }
+        return [
+            transformOriginKeywordOptions(token.keyword)[0].value,
+            transformOriginCenter,
+        ];
+    }
+    const first = parseTransformOriginToken(parts[0], value);
+    const second = parseTransformOriginToken(parts[1], value);
+    if (first.type === 'length-percentage' &&
+        second.type === 'length-percentage') {
+        return [first.parsed, second.parsed];
+    }
+    if (first.type === 'keyword' && second.type === 'keyword') {
+        return parseTwoTransformOriginKeywords(first.keyword, second.keyword, value);
+    }
+    const keyword = first.type === 'keyword'
+        ? first
+        : second.type === 'keyword'
+            ? second
+            : null;
+    const length = first.type === 'length-percentage'
+        ? first.parsed
+        : second.type === 'length-percentage'
+            ? second.parsed
+            : null;
+    if (keyword === null || length === null) {
+        throw new Error('Expected a keyword and a length-percentage value');
+    }
+    const keywordIsFirst = first.type === 'keyword';
+    if (keyword.keyword === 'left' || keyword.keyword === 'right') {
+        if (!keywordIsFirst) {
+            throw new TypeError(`Cannot interpolate "${value}" because horizontal transform-origin keywords must come before a length-percentage value`);
+        }
+        return [transformOriginKeywordOptions(keyword.keyword)[0].value, length];
+    }
+    if (keyword.keyword === 'top' || keyword.keyword === 'bottom') {
+        return [length, transformOriginKeywordOptions(keyword.keyword)[0].value];
+    }
+    return keywordIsFirst
+        ? [transformOriginCenter, length]
+        : [length, transformOriginCenter];
+};
+const parseTransformOriginValue = (output, parts) => {
+    const [x, y] = parseTransformOriginXY(parts.slice(0, 2), output);
+    const z = parts[2] === undefined
+        ? { value: 0, unit: null }
+        : parseTransformOriginLengthPercentage({
+            component: parts[2],
+            value: output,
+            allowPercentage: false,
+        });
+    return {
+        kind: 'translate',
+        values: [x.value, y.value, z.value],
+        units: [x.unit, y.unit, z.unit],
+        dimensions: parts[2] === undefined ? 2 : 3,
+    };
+};
 const parseStringInterpolationValue = (output) => {
     var _a, _b, _c, _d, _e, _f;
     var _g, _h, _j, _k, _l, _m;
@@ -85,6 +229,9 @@ const parseStringInterpolationValue = (output) => {
     if (parts.length < 1 || parts.length > 3 || parts[0] === '') {
         throw new TypeError(`String outputRange values must contain 1 to 3 components, but got "${output}"`);
     }
+    if (parts.some((part) => transformOriginKeywords.has(part.toLowerCase()))) {
+        return parseTransformOriginValue(output, parts);
+    }
     const parsed = parts.map((part) => parseStringInterpolationComponent(part, output));
     const [{ kind }] = parsed;
     for (const part of parsed) {

package/dist/cjs/no-react.d.ts

@@ -82,6 +82,12 @@ export declare const NoReactInternals: {
             readonly description: "Layout";
             readonly variants: {
                 readonly 'absolute-fill': {
+                    readonly 'style.transformOrigin': {
+                        readonly type: "transform-origin";
+                        readonly step: 1;
+                        readonly default: "50% 50%";
+                        readonly description: "Transform origin";
+                    };
                     readonly 'style.translate': {
                         readonly type: "translate";
                         readonly step: 1;

package/dist/cjs/sequence-field-schema.d.ts

@@ -41,6 +41,13 @@ export type TranslateFieldSchema = {
     description?: string;
     keyframable?: boolean;
 };
+export type TransformOriginFieldSchema = {
+    type: 'transform-origin';
+    step?: number;
+    default: string | undefined;
+    description?: string;
+    keyframable?: boolean;
+};
 export type ScaleFieldSchema = {
     type: 'scale';
     min?: number;
@@ -95,13 +102,19 @@ export type ArrayFieldSchema = {
     description?: string;
     keyframable?: false;
 };
-export type VisibleFieldSchema = NumberFieldSchema | BooleanFieldSchema | RotationCssFieldSchema | RotationDegreesFieldSchema | TranslateFieldSchema | ScaleFieldSchema | UvCoordinateFieldSchema | ColorFieldSchema | ArrayFieldSchema | EnumFieldSchema;
+export type VisibleFieldSchema = NumberFieldSchema | BooleanFieldSchema | RotationCssFieldSchema | RotationDegreesFieldSchema | TranslateFieldSchema | TransformOriginFieldSchema | ScaleFieldSchema | UvCoordinateFieldSchema | ColorFieldSchema | ArrayFieldSchema | EnumFieldSchema;
 export type SequenceFieldSchema = VisibleFieldSchema | HiddenFieldSchema;
 export type SequenceSchema = {
     [key: string]: SequenceFieldSchema;
 };
 export type SchemaKeysRecord<S extends SequenceSchema> = Record<keyof S, unknown>;
 export declare const sequenceVisualStyleSchema: {
+    readonly 'style.transformOrigin': {
+        readonly type: "transform-origin";
+        readonly step: 1;
+        readonly default: "50% 50%";
+        readonly description: "Transform origin";
+    };
     readonly 'style.translate': {
         readonly type: "translate";
         readonly step: 1;
@@ -155,6 +168,12 @@ export declare const sequencePremountSchema: {
     };
 };
 export declare const sequenceStyleSchema: {
+    readonly 'style.transformOrigin': {
+        readonly type: "transform-origin";
+        readonly step: 1;
+        readonly default: "50% 50%";
+        readonly description: "Transform origin";
+    };
     readonly 'style.translate': {
         readonly type: "translate";
         readonly step: 1;
@@ -240,6 +259,12 @@ export declare const sequenceSchema: {
         readonly description: "Layout";
         readonly variants: {
             readonly 'absolute-fill': {
+                readonly 'style.transformOrigin': {
+                    readonly type: "transform-origin";
+                    readonly step: 1;
+                    readonly default: "50% 50%";
+                    readonly description: "Transform origin";
+                };
                 readonly 'style.translate': {
                     readonly type: "translate";
                     readonly step: 1;
@@ -309,6 +334,12 @@ export declare const sequenceSchemaWithoutFrom: {
         readonly description: "Layout";
         readonly variants: {
             readonly 'absolute-fill': {
+                readonly 'style.transformOrigin': {
+                    readonly type: "transform-origin";
+                    readonly step: 1;
+                    readonly default: "50% 50%";
+                    readonly description: "Transform origin";
+                };
                 readonly 'style.translate': {
                     readonly type: "translate";
                     readonly step: 1;

package/dist/cjs/sequence-field-schema.js

@@ -2,6 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.sequenceSchemaDefaultLayoutNone = exports.sequenceSchemaWithoutFrom = exports.sequenceSchema = exports.fromField = exports.durationInFramesField = exports.hiddenField = exports.sequenceStyleSchema = exports.sequencePremountSchema = exports.sequenceVisualStyleSchema = void 0;
 exports.sequenceVisualStyleSchema = {
+    'style.transformOrigin': {
+        type: 'transform-origin',
+        step: 1,
+        default: '50% 50%',
+        description: 'Transform origin',
+    },
     'style.translate': {
         type: 'translate',
         step: 1,

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.475";

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.475';

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;