remotion 4.0.521 → 4.0.522

package/dist/cjs/CompositionManager.d.ts

@@ -7,6 +7,7 @@ import type { EffectDefinition } from './effects/effect-types.js';
 import type { InteractivitySchema } from './interactivity-schema.js';
 import type { InferProps, PropsIfHasProps } from './props-if-has-props.js';
 import type { RuntimeValueSnapshot, RuntimeValueStore } from './runtime-value-store.js';
+import type { VideoConfigValues } from './video-config.js';
 export type TComposition<Schema extends AnyZodObject, Props extends Record<string, unknown>> = {
     width: number | undefined;
     height: number | undefined;
@@ -61,6 +62,7 @@ export type JsxComponentIdentity = string;
 export type SequenceRegistrationControls = {
     schema: InteractivitySchema;
     runtimeValues: RuntimeValueStore;
+    videoConfigValues: VideoConfigValues | null;
     overrideId: string;
     supportsEffects: boolean;
     componentIdentity: JsxComponentIdentity | null;

package/dist/cjs/Sequence.js

@@ -195,6 +195,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
     const controlsSupportsEffects = controls === null || controls === void 0 ? void 0 : controls.supportsEffects;
     const controlsComponentIdentity = controls === null || controls === void 0 ? void 0 : controls.componentIdentity;
     const controlsComponentName = controls === null || controls === void 0 ? void 0 : controls.componentName;
+    const controlsVideoConfigValues = controls === null || controls === void 0 ? void 0 : controls.videoConfigValues;
     const effectRuntimeValues = (0, react_1.useMemo)(() => {
         var _a;
         return (_a = _remotionInternalEffects === null || _remotionInternalEffects === void 0 ? void 0 : _remotionInternalEffects.runtimeValues) !== null && _a !== void 0 ? _a : null;
@@ -205,7 +206,8 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
             controlsOverrideId === undefined ||
             controlsSupportsEffects === undefined ||
             controlsComponentIdentity === undefined ||
-            controlsComponentName === undefined) {
+            controlsComponentName === undefined ||
+            controlsVideoConfigValues === undefined) {
             return null;
         }
         return {
@@ -215,10 +217,12 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
             supportsEffects: controlsSupportsEffects,
             componentIdentity: controlsComponentIdentity,
             componentName: controlsComponentName,
+            videoConfigValues: controlsVideoConfigValues,
         };
     }, [
         controlsComponentIdentity,
         controlsComponentName,
+        controlsVideoConfigValues,
         controlsOverrideId,
         controlsRuntimeValues,
         controlsSchema,

package/dist/cjs/SequenceManager.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { TSequence } from './CompositionManager.js';
 import type { CanUpdateSequencePropStatus, DragOverrideValue, GetDragOverrides, GetEffectDragOverrides, PropStatuses } from './use-schema.js';
+import type { VideoConfigValues } from './video-config.js';
 export type SequenceManagerContext = {
     registerSequence: (seq: TSequence) => void;
     updateSequence: ((seq: TSequence) => void) | null;
@@ -74,12 +75,7 @@ export type SequencePropsSubscriptionKey = {
     effectKeys: string[][];
     videoConfigValues: VideoConfigValues | null;
 };
-export type VideoConfigValues = {
-    durationInFrames: number;
-    fps: number;
-    height: number;
-    width: number;
-};
+export type { VideoConfigValues } from './video-config.js';
 export declare const SequenceManagerProvider: React.FC<{
     readonly children: React.ReactNode;
 }>;

package/dist/cjs/interpolate-translate.d.ts

@@ -0,0 +1,8 @@
+import { type InterpolateOptions } from './interpolate.js';
+export type InterpolateTranslateOptions = InterpolateOptions;
+export declare const interpolateTranslate: (input: number, inputRange: readonly number[], outputRange: readonly string[], options?: Partial<{
+    easing: import("./interpolate.js").EasingFunction | readonly import("./interpolate.js").EasingFunction[];
+    extrapolateLeft: import("./interpolate.js").ExtrapolateType;
+    extrapolateRight: import("./interpolate.js").ExtrapolateType;
+    posterize: number;
+}> | undefined) => string;

package/dist/cjs/interpolate-translate.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.interpolateTranslate = void 0;
+const interpolate_js_1 = require("./interpolate.js");
+const pixelValueRegex = /^([+-]?(?:\d+\.?\d*|\.\d+))px$/;
+const parseTranslate = (value) => {
+    if (typeof value !== 'string') {
+        throw new TypeError(`outputRange must contain only strings, but got ${typeof value}`);
+    }
+    const parts = value.trim().split(/\s+/);
+    if (parts.length < 1 || parts.length > 3 || parts[0] === '') {
+        throw new TypeError(`translate values must contain 1 to 3 pixel values, but got "${value}"`);
+    }
+    return parts.map((part) => {
+        const match = pixelValueRegex.exec(part);
+        if (match === null) {
+            throw new TypeError(`interpolateTranslate() only supports px values, but got "${part}" in "${value}"`);
+        }
+        return Number(match[1]);
+    });
+};
+/*
+ * @description Allows you to map a range of values to CSS translate values using pixel units.
+ * @see [Documentation](https://remotion.dev/docs/interpolate-translate)
+ */
+const interpolateTranslate = (input, inputRange, outputRange, options) => {
+    var _a;
+    if (typeof input === 'undefined') {
+        throw new TypeError('input can not be undefined');
+    }
+    if (typeof inputRange === 'undefined') {
+        throw new TypeError('inputRange can not be undefined');
+    }
+    if (typeof outputRange === 'undefined') {
+        throw new TypeError('outputRange can not be undefined');
+    }
+    if (inputRange.length !== outputRange.length) {
+        throw new TypeError('inputRange (' +
+            inputRange.length +
+            ' values provided) and outputRange (' +
+            outputRange.length +
+            ' values provided) must have the same length');
+    }
+    const parsedOutputRange = outputRange.map((translateValue) => parseTranslate(translateValue));
+    const firstValueLength = (_a = parsedOutputRange[0]) === null || _a === void 0 ? void 0 : _a.length;
+    if (firstValueLength === undefined) {
+        throw new TypeError('outputRange must have at least 1 element');
+    }
+    for (const parsedTranslate of parsedOutputRange) {
+        if (parsedTranslate.length !== firstValueLength) {
+            throw new TypeError(`All translate values must have the same number of pixel values, but got ${firstValueLength} and ${parsedTranslate.length}`);
+        }
+    }
+    return new Array(firstValueLength)
+        .fill(true)
+        .map((_, index) => {
+        const outputValues = [];
+        for (const translateValue of parsedOutputRange) {
+            const value = translateValue[index];
+            if (value === undefined) {
+                throw new TypeError(`All translate values must have the same number of pixel values, but got ${firstValueLength} and ${translateValue.length}`);
+            }
+            outputValues.push(value);
+        }
+        const interpolatedValue = (0, interpolate_js_1.interpolate)(input, inputRange, outputValues, options);
+        return `${interpolatedValue}px`;
+    })
+        .join(' ');
+};
+exports.interpolateTranslate = interpolateTranslate;

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

@@ -0,0 +1,425 @@
+export type HiddenFieldSchema = {
+    type: 'hidden';
+    keyframable?: boolean;
+};
+export type NumberFieldSchema = {
+    type: 'number';
+    min?: number;
+    max?: number;
+    step?: number;
+    default: number | null | undefined;
+    description?: string;
+    hiddenFromList: boolean;
+    keyframable?: boolean;
+};
+export type BooleanFieldSchema = {
+    type: 'boolean';
+    default: boolean;
+    description?: string;
+    keyframable?: boolean;
+};
+export type RotationCssFieldSchema = {
+    type: 'rotation-css';
+    step?: number;
+    default: string | undefined;
+    description?: string;
+    keyframable?: boolean;
+};
+export type RotationDegreesFieldSchema = {
+    type: 'rotation-degrees';
+    min?: number;
+    max?: number;
+    step?: number;
+    default: number | undefined;
+    description?: string;
+    keyframable?: boolean;
+};
+export type TranslateFieldSchema = {
+    type: 'translate';
+    step?: number;
+    default: string | undefined;
+    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;
+    max?: number;
+    step?: number;
+    default: number | string | undefined;
+    description?: string;
+    keyframable?: boolean;
+};
+export type UvCoordinateFieldSchema = {
+    type: 'uv-coordinate';
+    min?: number;
+    max?: number;
+    step?: number;
+    lineTo?: string;
+    default: readonly [number, number] | undefined;
+    description?: string;
+    keyframable?: boolean;
+};
+export type ColorFieldSchema = {
+    type: 'color';
+    default: string | undefined;
+    description?: string;
+    keyframable?: boolean;
+};
+export type EnumFieldSchema = {
+    type: 'enum';
+    default: string;
+    description?: string;
+    variants: Record<string, SequenceSchema>;
+    keyframable?: boolean;
+};
+export type NumberArrayItemSchema = Omit<NumberFieldSchema, 'default' | 'description' | 'hiddenFromList' | 'keyframable'>;
+export type BooleanArrayItemSchema = Omit<BooleanFieldSchema, 'default' | 'description' | 'keyframable'>;
+export type RotationCssArrayItemSchema = Omit<RotationCssFieldSchema, 'default' | 'description' | 'keyframable'>;
+export type RotationDegreesArrayItemSchema = Omit<RotationDegreesFieldSchema, 'default' | 'description' | 'keyframable'>;
+export type TranslateArrayItemSchema = Omit<TranslateFieldSchema, 'default' | 'description' | 'keyframable'>;
+export type UvCoordinateArrayItemSchema = Omit<UvCoordinateFieldSchema, 'default' | 'description' | 'keyframable'>;
+export type ColorArrayItemSchema = Omit<ColorFieldSchema, 'default' | 'description' | 'keyframable'>;
+export type EnumArrayItemSchema = {
+    type: 'enum';
+    variants: readonly string[];
+};
+export type ArrayItemFieldSchema = NumberArrayItemSchema | BooleanArrayItemSchema | RotationCssArrayItemSchema | RotationDegreesArrayItemSchema | TranslateArrayItemSchema | UvCoordinateArrayItemSchema | ColorArrayItemSchema | EnumArrayItemSchema;
+export type ArrayFieldSchema = {
+    type: 'array';
+    item: ArrayItemFieldSchema;
+    default: readonly unknown[] | undefined;
+    minLength?: number;
+    maxLength?: number;
+    newItemDefault: unknown;
+    description?: string;
+    keyframable?: false;
+};
+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;
+        readonly default: "0px 0px";
+        readonly description: "Offset";
+    };
+    readonly 'style.scale': {
+        readonly type: "scale";
+        readonly max: 100;
+        readonly step: 0.01;
+        readonly default: 1;
+        readonly description: "Scale";
+    };
+    readonly 'style.rotate': {
+        readonly type: "rotation-css";
+        readonly step: 1;
+        readonly default: "0deg";
+        readonly description: "Rotation";
+    };
+    readonly 'style.opacity': {
+        readonly type: "number";
+        readonly min: 0;
+        readonly max: 1;
+        readonly step: 0.01;
+        readonly default: 1;
+        readonly description: "Opacity";
+        readonly hiddenFromList: false;
+    };
+};
+export declare const sequencePremountSchema: {
+    readonly premountFor: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly description: "Premount For";
+        readonly min: 0;
+        readonly step: 1;
+        readonly hiddenFromList: false;
+    };
+    readonly postmountFor: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
+    readonly styleWhilePremounted: {
+        readonly type: "hidden";
+    };
+    readonly styleWhilePostmounted: {
+        readonly type: "hidden";
+    };
+};
+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;
+        readonly default: "0px 0px";
+        readonly description: "Offset";
+    };
+    readonly 'style.scale': {
+        readonly type: "scale";
+        readonly max: 100;
+        readonly step: 0.01;
+        readonly default: 1;
+        readonly description: "Scale";
+    };
+    readonly 'style.rotate': {
+        readonly type: "rotation-css";
+        readonly step: 1;
+        readonly default: "0deg";
+        readonly description: "Rotation";
+    };
+    readonly 'style.opacity': {
+        readonly type: "number";
+        readonly min: 0;
+        readonly max: 1;
+        readonly step: 0.01;
+        readonly default: 1;
+        readonly description: "Opacity";
+        readonly hiddenFromList: false;
+    };
+    readonly premountFor: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly description: "Premount For";
+        readonly min: 0;
+        readonly step: 1;
+        readonly hiddenFromList: false;
+    };
+    readonly postmountFor: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
+    readonly styleWhilePremounted: {
+        readonly type: "hidden";
+    };
+    readonly styleWhilePostmounted: {
+        readonly type: "hidden";
+    };
+};
+export declare const hiddenField: SequenceFieldSchema;
+export declare const sequenceNameField: SequenceFieldSchema;
+export declare const extendSchemaWithSequenceName: <S extends SequenceSchema>(schema: S) => S & {
+    name: SequenceFieldSchema;
+};
+export declare const durationInFramesField: {
+    readonly type: "number";
+    readonly default: undefined;
+    readonly min: 1;
+    readonly step: 1;
+    readonly hiddenFromList: true;
+};
+export declare const fromField: {
+    readonly type: "number";
+    readonly default: 0;
+    readonly step: 1;
+    readonly hiddenFromList: true;
+};
+export declare const freezeField: {
+    readonly type: "number";
+    readonly default: null;
+    readonly step: 1;
+    readonly hiddenFromList: true;
+};
+export declare const sequenceSchema: {
+    readonly hidden: BooleanFieldSchema;
+    readonly showInTimeline: HiddenFieldSchema;
+    readonly from: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
+    readonly freeze: {
+        readonly type: "number";
+        readonly default: null;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
+    readonly durationInFrames: {
+        readonly type: "number";
+        readonly default: undefined;
+        readonly min: 1;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
+    readonly layout: {
+        readonly type: "enum";
+        readonly default: "absolute-fill";
+        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;
+                    readonly default: "0px 0px";
+                    readonly description: "Offset";
+                };
+                readonly 'style.scale': {
+                    readonly type: "scale";
+                    readonly max: 100;
+                    readonly step: 0.01;
+                    readonly default: 1;
+                    readonly description: "Scale";
+                };
+                readonly 'style.rotate': {
+                    readonly type: "rotation-css";
+                    readonly step: 1;
+                    readonly default: "0deg";
+                    readonly description: "Rotation";
+                };
+                readonly 'style.opacity': {
+                    readonly type: "number";
+                    readonly min: 0;
+                    readonly max: 1;
+                    readonly step: 0.01;
+                    readonly default: 1;
+                    readonly description: "Opacity";
+                    readonly hiddenFromList: false;
+                };
+                readonly premountFor: {
+                    readonly type: "number";
+                    readonly default: 0;
+                    readonly description: "Premount For";
+                    readonly min: 0;
+                    readonly step: 1;
+                    readonly hiddenFromList: false;
+                };
+                readonly postmountFor: {
+                    readonly type: "number";
+                    readonly default: 0;
+                    readonly min: 0;
+                    readonly step: 1;
+                    readonly hiddenFromList: true;
+                };
+                readonly styleWhilePremounted: {
+                    readonly type: "hidden";
+                };
+                readonly styleWhilePostmounted: {
+                    readonly type: "hidden";
+                };
+            };
+            readonly none: {};
+        };
+    };
+} & {
+    name: SequenceFieldSchema;
+};
+export declare const sequenceSchemaWithoutFrom: {
+    readonly hidden: BooleanFieldSchema;
+    readonly showInTimeline: HiddenFieldSchema;
+    readonly freeze: {
+        readonly type: "number";
+        readonly default: null;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
+    readonly durationInFrames: {
+        readonly type: "number";
+        readonly default: undefined;
+        readonly min: 1;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
+    readonly layout: {
+        readonly type: "enum";
+        readonly default: "absolute-fill";
+        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;
+                    readonly default: "0px 0px";
+                    readonly description: "Offset";
+                };
+                readonly 'style.scale': {
+                    readonly type: "scale";
+                    readonly max: 100;
+                    readonly step: 0.01;
+                    readonly default: 1;
+                    readonly description: "Scale";
+                };
+                readonly 'style.rotate': {
+                    readonly type: "rotation-css";
+                    readonly step: 1;
+                    readonly default: "0deg";
+                    readonly description: "Rotation";
+                };
+                readonly 'style.opacity': {
+                    readonly type: "number";
+                    readonly min: 0;
+                    readonly max: 1;
+                    readonly step: 0.01;
+                    readonly default: 1;
+                    readonly description: "Opacity";
+                    readonly hiddenFromList: false;
+                };
+                readonly premountFor: {
+                    readonly type: "number";
+                    readonly default: 0;
+                    readonly description: "Premount For";
+                    readonly min: 0;
+                    readonly step: 1;
+                    readonly hiddenFromList: false;
+                };
+                readonly postmountFor: {
+                    readonly type: "number";
+                    readonly default: 0;
+                    readonly min: 0;
+                    readonly step: 1;
+                    readonly hiddenFromList: true;
+                };
+                readonly styleWhilePremounted: {
+                    readonly type: "hidden";
+                };
+                readonly styleWhilePostmounted: {
+                    readonly type: "hidden";
+                };
+            };
+            readonly none: {};
+        };
+    };
+} & {
+    name: SequenceFieldSchema;
+};
+export declare const sequenceSchemaDefaultLayoutNone: SequenceSchema;

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

@@ -0,0 +1,133 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sequenceSchemaDefaultLayoutNone = exports.sequenceSchemaWithoutFrom = exports.sequenceSchema = exports.freezeField = exports.fromField = exports.durationInFramesField = exports.extendSchemaWithSequenceName = exports.sequenceNameField = 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,
+        default: '0px 0px',
+        description: 'Offset',
+    },
+    'style.scale': {
+        type: 'scale',
+        max: 100,
+        step: 0.01,
+        default: 1,
+        description: 'Scale',
+    },
+    'style.rotate': {
+        type: 'rotation-css',
+        step: 1,
+        default: '0deg',
+        description: 'Rotation',
+    },
+    'style.opacity': {
+        type: 'number',
+        min: 0,
+        max: 1,
+        step: 0.01,
+        default: 1,
+        description: 'Opacity',
+        hiddenFromList: false,
+    },
+};
+exports.sequencePremountSchema = {
+    premountFor: {
+        type: 'number',
+        default: 0,
+        description: 'Premount For',
+        min: 0,
+        step: 1,
+        hiddenFromList: false,
+    },
+    postmountFor: {
+        type: 'number',
+        default: 0,
+        min: 0,
+        step: 1,
+        hiddenFromList: true,
+    },
+    styleWhilePremounted: {
+        type: 'hidden',
+    },
+    styleWhilePostmounted: {
+        type: 'hidden',
+    },
+};
+exports.sequenceStyleSchema = {
+    ...exports.sequenceVisualStyleSchema,
+    ...exports.sequencePremountSchema,
+};
+exports.hiddenField = {
+    type: 'boolean',
+    default: false,
+    description: 'Hidden',
+};
+const showInTimelineField = {
+    type: 'hidden',
+};
+exports.sequenceNameField = {
+    type: 'hidden',
+};
+const extendSchemaWithSequenceName = (schema) => {
+    return {
+        name: exports.sequenceNameField,
+        ...schema,
+    };
+};
+exports.extendSchemaWithSequenceName = extendSchemaWithSequenceName;
+exports.durationInFramesField = {
+    type: 'number',
+    default: undefined,
+    min: 1,
+    step: 1,
+    hiddenFromList: true,
+};
+exports.fromField = {
+    type: 'number',
+    default: 0,
+    step: 1,
+    hiddenFromList: true,
+};
+exports.freezeField = {
+    type: 'number',
+    default: null,
+    step: 1,
+    hiddenFromList: true,
+};
+exports.sequenceSchema = (0, exports.extendSchemaWithSequenceName)({
+    hidden: exports.hiddenField,
+    showInTimeline: showInTimelineField,
+    from: exports.fromField,
+    freeze: exports.freezeField,
+    durationInFrames: exports.durationInFramesField,
+    layout: {
+        type: 'enum',
+        default: 'absolute-fill',
+        description: 'Layout',
+        variants: {
+            'absolute-fill': exports.sequenceStyleSchema,
+            none: {},
+        },
+    },
+});
+exports.sequenceSchemaWithoutFrom = (0, exports.extendSchemaWithSequenceName)({
+    hidden: exports.hiddenField,
+    showInTimeline: showInTimelineField,
+    freeze: exports.freezeField,
+    durationInFrames: exports.durationInFramesField,
+    layout: exports.sequenceSchema.layout,
+});
+exports.sequenceSchemaDefaultLayoutNone = {
+    ...exports.sequenceSchema,
+    layout: {
+        ...exports.sequenceSchema.layout,
+        default: 'none',
+    },
+};

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

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.521';
+exports.VERSION = '4.0.522';

package/dist/cjs/video-config.d.ts

@@ -16,3 +16,4 @@ export type VideoConfig = {
     defaultProResProfile: ProResProfile | null;
     defaultSampleRate: number | null;
 };
+export type VideoConfigValues = Pick<VideoConfig, 'durationInFrames' | 'fps' | 'height' | 'width'>;

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

@@ -47,6 +47,7 @@ const SequenceManager_js_1 = require("./SequenceManager.js");
 const use_current_frame_js_1 = require("./use-current-frame.js");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
 const use_schema_js_1 = require("./use-schema.js");
+const use_unsafe_video_config_js_1 = require("./use-unsafe-video-config.js");
 const getNestedValue = (obj, key) => {
     const parts = key.split('.');
     let current = obj;
@@ -156,6 +157,24 @@ const withInteractivitySchema = ({ Component, componentName, componentIdentity,
         const nodePathMapping = (0, react_1.useContext)(sequence_node_path_js_1.OverrideIdsToNodePathsGettersContext);
         // eslint-disable-next-line react-hooks/rules-of-hooks
         const frame = (0, use_current_frame_js_1.useCurrentFrame)();
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const videoConfig = (0, use_unsafe_video_config_js_1.useUnsafeVideoConfig)();
+        const durationInFrames = videoConfig === null || videoConfig === void 0 ? void 0 : videoConfig.durationInFrames;
+        const fps = videoConfig === null || videoConfig === void 0 ? void 0 : videoConfig.fps;
+        const height = videoConfig === null || videoConfig === void 0 ? void 0 : videoConfig.height;
+        const width = videoConfig === null || videoConfig === void 0 ? void 0 : videoConfig.width;
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const videoConfigValues = (0, react_1.useMemo)(() => durationInFrames === undefined ||
+            fps === undefined ||
+            height === undefined ||
+            width === undefined
+            ? null
+            : {
+                durationInFrames,
+                fps,
+                height,
+                width,
+            }, [durationInFrames, fps, height, width]);
         // If the parent has passed `controls`, we should not override it.
         // @ts-expect-error
         if (cleanProps.controls) {
@@ -212,12 +231,18 @@ const withInteractivitySchema = ({ Component, componentName, componentIdentity,
                 schema: schemaWithSequenceName,
                 currentRuntimeValueDotNotation,
                 runtimeValues: runtimeValueStore.store,
+                videoConfigValues,
                 overrideId,
                 supportsEffects,
                 componentIdentity,
                 componentName,
             };
-        }, [currentRuntimeValueDotNotation, overrideId, runtimeValueStore.store]);
+        }, [
+            currentRuntimeValueDotNotation,
+            overrideId,
+            runtimeValueStore.store,
+            videoConfigValues,
+        ]);
         (0, enable_sequence_stack_traces_js_1.setStackForControls)(controls, internalStack);
         // 3. Apply drag/code overrides on top of the runtime values.
         // eslint-disable-next-line react-hooks/rules-of-hooks

package/dist/cjs/wrap-in-schema.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { SequenceControls } from './CompositionManager.js';
+import { type SequenceSchema } from './sequence-field-schema.js';
+export declare const getNestedValue: (obj: Record<string, unknown>, key: string) => unknown;
+export declare const readValuesFromProps: (props: Record<string, unknown>, keys: string[]) => Record<string, unknown>;
+export declare const selectActiveKeys: (schema: SequenceSchema, values: Record<string, unknown>) => string[];
+export declare const mergeValues: ({ props, valuesDotNotation, schemaKeys, propsToDelete, }: {
+    props: Record<string, unknown>;
+    valuesDotNotation: Record<string, unknown>;
+    schemaKeys: string[];
+    propsToDelete: Set<string>;
+}) => Record<string, unknown>;
+export declare const wrapInSchema: <S extends SequenceSchema, Props extends object>({ Component, componentIdentity, schema, supportsEffects, }: {
+    Component: React.ComponentType<Props & {
+        readonly _experimentalControls: SequenceControls | undefined;
+    }>;
+    componentIdentity: string | null;
+    schema: S;
+    supportsEffects: boolean;
+}) => React.ComponentType<Props>;

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

@@ -0,0 +1,203 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.wrapInSchema = exports.mergeValues = exports.selectActiveKeys = exports.readValuesFromProps = exports.getNestedValue = void 0;
+const react_1 = __importStar(require("react"));
+const delete_nested_key_js_1 = require("./delete-nested-key.js");
+const use_memoized_effects_js_1 = require("./effects/use-memoized-effects.js");
+const flatten_schema_js_1 = require("./flatten-schema.js");
+const sequence_field_schema_js_1 = require("./sequence-field-schema.js");
+const sequence_node_path_js_1 = require("./sequence-node-path.js");
+const SequenceManager_js_1 = require("./SequenceManager.js");
+const use_current_frame_js_1 = require("./use-current-frame.js");
+const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
+const use_schema_js_1 = require("./use-schema.js");
+const getNestedValue = (obj, key) => {
+    const parts = key.split('.');
+    let current = obj;
+    for (const part of parts) {
+        if (current === null ||
+            current === undefined ||
+            typeof current !== 'object')
+            return undefined;
+        current = current[part];
+    }
+    return current;
+};
+exports.getNestedValue = getNestedValue;
+const readValuesFromProps = (props, keys) => {
+    const out = {};
+    for (const key of keys) {
+        out[key] = (0, exports.getNestedValue)(props, key);
+    }
+    return out;
+};
+exports.readValuesFromProps = readValuesFromProps;
+const selectActiveKeys = (schema, values) => {
+    return Object.keys((0, flatten_schema_js_1.flattenActiveSchema)(schema, (key) => values[key]));
+};
+exports.selectActiveKeys = selectActiveKeys;
+const mergeValues = ({ props, valuesDotNotation, schemaKeys, propsToDelete, }) => {
+    const merged = { ...props };
+    for (const key of schemaKeys) {
+        const value = valuesDotNotation[key];
+        const parts = key.split('.');
+        if (parts.length === 1) {
+            merged[key] = value;
+            continue;
+        }
+        // For dot-notation keys like 'style.opacity',
+        // clone and set the nested path
+        let current = merged;
+        for (let i = 0; i < parts.length - 1; i++) {
+            const part = parts[i];
+            if (typeof current[part] === 'object' && current[part] !== null) {
+                current[part] = { ...current[part] };
+            }
+            else {
+                current[part] = {};
+            }
+            current = current[part];
+        }
+        current[parts[parts.length - 1]] = value;
+    }
+    (0, delete_nested_key_js_1.deleteNestedKey)(merged, propsToDelete);
+    return merged;
+};
+exports.mergeValues = mergeValues;
+const stackToOverrideMap = {};
+const wrapInSchema = ({ Component, componentIdentity, schema, supportsEffects, }) => {
+    // Schema is static for a component, so we move this outside
+    const schemaWithSequenceName = (0, sequence_field_schema_js_1.extendSchemaWithSequenceName)(schema);
+    const flatSchema = (0, flatten_schema_js_1.getFlatSchemaWithAllKeys)(schemaWithSequenceName);
+    const flatKeys = Object.keys(flatSchema);
+    const Wrapped = (0, react_1.forwardRef)((props, ref) => {
+        var _a;
+        const env = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
+        if (!env.isStudio || env.isReadOnlyStudio || env.isRendering) {
+            return react_1.default.createElement(Component, {
+                ...props,
+                _experimentalControls: null,
+                ref,
+            });
+        }
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        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
+        const nodePathMapping = (0, react_1.useContext)(sequence_node_path_js_1.OverrideIdsToNodePathsGettersContext);
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const frame = (0, use_current_frame_js_1.useCurrentFrame)();
+        // If the parent has passed `_experimentalControls`, we should not override it.
+        // @ts-expect-error
+        if (props._experimentalControls) {
+            return react_1.default.createElement(Component, {
+                ...props,
+                ref,
+            });
+        }
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const [overrideId] = (0, react_1.useState)(() => {
+            const { stack } = props;
+            if (!stack) {
+                return String(Math.random());
+            }
+            const existingOverrideId = stackToOverrideMap[stack];
+            if (existingOverrideId) {
+                return existingOverrideId;
+            }
+            const newOverrideId = String(Math.random());
+            stackToOverrideMap[stack] = newOverrideId;
+            return newOverrideId;
+        });
+        const nodePath = (_a = nodePathMapping.overrideIdToNodePathMappings[overrideId]) !== null && _a !== void 0 ? _a : null;
+        // Read the runtime values for every flat key from the JSX props,
+        // memoized on the leaf values so the object reference is stable
+        // when nothing changed — otherwise downstream `useMemo`s churn and
+        // effects (e.g. Sequence registration) re-fire every render.
+        const runtimeValues = flatKeys.map((k) => (0, exports.getNestedValue)(props, k));
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const currentRuntimeValueDotNotation = (0, react_1.useMemo)(() => (0, exports.readValuesFromProps)(props, flatKeys), 
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        runtimeValues);
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const controls = (0, react_1.useMemo)(() => {
+            return {
+                schema: schemaWithSequenceName,
+                currentRuntimeValueDotNotation,
+                overrideId,
+                supportsEffects,
+                componentIdentity,
+            };
+        }, [currentRuntimeValueDotNotation, overrideId]);
+        // 3. Apply drag/code overrides on top of the runtime values.
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const { merged: valuesDotNotation, propsToDelete } = (0, react_1.useMemo)(() => {
+            return (0, use_schema_js_1.computeEffectiveSchemaValuesDotNotation)({
+                schema: schemaWithSequenceName,
+                currentValue: currentRuntimeValueDotNotation,
+                overrideValues: nodePath === null ? {} : getDragOverrides(nodePath),
+                propStatus: nodePath === null
+                    ? undefined
+                    : (0, use_memoized_effects_js_1.getPropStatusesCtx)(propStatuses, nodePath),
+                frame,
+            });
+        }, [
+            currentRuntimeValueDotNotation,
+            getDragOverrides,
+            nodePath,
+            propStatuses,
+            frame,
+        ]);
+        // 4. Eliminate values forbidden by the resolved discriminated union.
+        const activeKeys = (0, exports.selectActiveKeys)(schemaWithSequenceName, valuesDotNotation);
+        // 5. Apply the active values back onto the props.
+        const mergedProps = (0, exports.mergeValues)({
+            props: props,
+            valuesDotNotation,
+            schemaKeys: activeKeys,
+            propsToDelete,
+        });
+        return react_1.default.createElement(Component, {
+            ...mergedProps,
+            _experimentalControls: controls,
+            ref,
+        });
+    });
+    Wrapped.displayName = `wrapInSchema(${Component.displayName || Component.name || 'Component'})`;
+    return Wrapped;
+};
+exports.wrapInSchema = wrapInSchema;

package/dist/esm/index.mjs

@@ -1537,7 +1537,7 @@ var Composition = (props) => {
 };
 
 // src/version.ts
-var VERSION = "4.0.521";
+var VERSION = "4.0.522";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -5242,6 +5242,17 @@ var withInteractivitySchema = ({
     const { getDragOverrides } = useContext19(VisualModeDragOverridesContext);
     const nodePathMapping = useContext19(OverrideIdsToNodePathsGettersContext);
     const frame = useCurrentFrame();
+    const videoConfig = useUnsafeVideoConfig();
+    const durationInFrames = videoConfig?.durationInFrames;
+    const fps = videoConfig?.fps;
+    const height = videoConfig?.height;
+    const width = videoConfig?.width;
+    const videoConfigValues = useMemo12(() => durationInFrames === undefined || fps === undefined || height === undefined || width === undefined ? null : {
+      durationInFrames,
+      fps,
+      height,
+      width
+    }, [durationInFrames, fps, height, width]);
     if (cleanProps.controls) {
       const passedControls = cleanProps.controls;
       if (getStackForControls(passedControls) === null) {
@@ -5280,12 +5291,18 @@ var withInteractivitySchema = ({
         schema: schemaWithSequenceName,
         currentRuntimeValueDotNotation,
         runtimeValues: runtimeValueStore.store,
+        videoConfigValues,
         overrideId,
         supportsEffects,
         componentIdentity,
         componentName
       };
-    }, [currentRuntimeValueDotNotation, overrideId, runtimeValueStore.store]);
+    }, [
+      currentRuntimeValueDotNotation,
+      overrideId,
+      runtimeValueStore.store,
+      videoConfigValues
+    ]);
     setStackForControls(controls, internalStack);
     const { merged: valuesDotNotation, propsToDelete } = useMemo12(() => {
       return computeEffectiveSchemaValuesDotNotation({
@@ -5478,9 +5495,10 @@ var RegularSequenceRefForwardingFunction = ({
   const controlsSupportsEffects = controls?.supportsEffects;
   const controlsComponentIdentity = controls?.componentIdentity;
   const controlsComponentName = controls?.componentName;
+  const controlsVideoConfigValues = controls?.videoConfigValues;
   const effectRuntimeValues = useMemo13(() => _remotionInternalEffects?.runtimeValues ?? null, [_remotionInternalEffects]);
   const registrationControls = useMemo13(() => {
-    if (controlsSchema === undefined || controlsRuntimeValues === undefined || controlsOverrideId === undefined || controlsSupportsEffects === undefined || controlsComponentIdentity === undefined || controlsComponentName === undefined) {
+    if (controlsSchema === undefined || controlsRuntimeValues === undefined || controlsOverrideId === undefined || controlsSupportsEffects === undefined || controlsComponentIdentity === undefined || controlsComponentName === undefined || controlsVideoConfigValues === undefined) {
       return null;
     }
     return {
@@ -5489,11 +5507,13 @@ var RegularSequenceRefForwardingFunction = ({
       overrideId: controlsOverrideId,
       supportsEffects: controlsSupportsEffects,
       componentIdentity: controlsComponentIdentity,
-      componentName: controlsComponentName
+      componentName: controlsComponentName,
+      videoConfigValues: controlsVideoConfigValues
     };
   }, [
     controlsComponentIdentity,
     controlsComponentName,
+    controlsVideoConfigValues,
     controlsOverrideId,
     controlsRuntimeValues,
     controlsSchema,

package/dist/esm/version.mjs

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