@remotion/studio-server 4.0.489 → 4.0.491

package/dist/codemods/update-keyframes/update-keyframes.js

@@ -38,6 +38,8 @@ const studio_shared_1 = require("@remotion/studio-shared");
 const recast = __importStar(require("recast"));
 const get_ast_node_path_1 = require("../../helpers/get-ast-node-path");
 const parse_keyframe_easing_expression_1 = require("../../helpers/parse-keyframe-easing-expression");
+const video_config_numeric_expression_1 = require("../../helpers/video-config-numeric-expression");
+const video_config_values_1 = require("../../helpers/video-config-values");
 const can_update_sequence_props_1 = require("../../preview-server/routes/can-update-sequence-props");
 const format_file_content_1 = require("../format-file-content");
 const parse_ast_1 = require("../parse-ast");
@@ -109,23 +111,9 @@ const getSupportedCallArgument = (arg) => {
     }
     return arg;
 };
-const getNumericValue = (node) => {
-    if (node.type === 'NumericLiteral') {
-        return node.value;
-    }
-    if (node.type === 'UnaryExpression' &&
-        (node.operator === '-' || node.operator === '+') &&
-        node.argument.type === 'NumericLiteral') {
-        return node.operator === '-' ? -node.argument.value : node.argument.value;
-    }
-    if (node.type === 'TSAsExpression') {
-        return getNumericValue(node.expression);
-    }
-    return null;
-};
-const getInterpolationExpression = (node) => {
+const getInterpolationExpression = (node, videoConfigValues) => {
     if (node.type === 'TSAsExpression') {
-        return getInterpolationExpression(node.expression);
+        return getInterpolationExpression(node.expression, videoConfigValues);
     }
     if (node.type !== 'CallExpression' ||
         node.callee.type !== 'Identifier' ||
@@ -153,12 +141,18 @@ const getInterpolationExpression = (node) => {
             outputElement.type === 'SpreadElement') {
             return null;
         }
-        const frame = getNumericValue(inputElement);
-        if (frame === null || !(0, can_update_sequence_props_1.isStaticValue)(outputElement)) {
+        const frameExpression = (0, video_config_numeric_expression_1.parseVideoConfigNumericExpression)({
+            node: inputElement,
+            videoConfigValues,
+        });
+        if (frameExpression === null || !(0, can_update_sequence_props_1.isStaticValue)(outputElement)) {
             return null;
         }
         keyframes.push({
-            frame,
+            frame: frameExpression.value,
+            frameExpression: inputElement,
+            frameNumericExpression: frameExpression,
+            originalFrame: frameExpression.value,
             output: outputElement,
             value: (0, can_update_sequence_props_1.extractStaticValue)(outputElement),
         });
@@ -192,11 +186,15 @@ const getInterpolationCalleeForValues = ({ schema, key, staticValue, newValue, }
 const createFrameExpression = (frame) => {
     return (0, update_nested_prop_1.parseValueExpression)(frame);
 };
-const createClampOptionsExpression = () => {
-    return b.objectExpression([
+const createClampOptionsExpression = ({ defaultOutput, }) => {
+    const properties = [
         b.objectProperty(b.identifier('extrapolateLeft'), b.stringLiteral('clamp')),
         b.objectProperty(b.identifier('extrapolateRight'), b.stringLiteral('clamp')),
-    ]);
+    ];
+    if (defaultOutput !== null && defaultOutput !== 'linear') {
+        properties.push(b.objectProperty(b.identifier('output'), b.stringLiteral(defaultOutput)));
+    }
+    return b.objectExpression(properties);
 };
 const createEmptyOptionsExpression = () => b.objectExpression([]);
 const findObjectOptionProperty = (options, propertyName) => {
@@ -451,9 +449,18 @@ const validatePosterize = (posterize) => {
         throw new Error('Cannot update keyframe settings: posterize must be > 0');
     }
 };
-const updateKeyframeSettings = ({ expression, clamping, posterize, }) => {
+const validateOutput = (output) => {
+    if (output === undefined ||
+        output === 'linear' ||
+        output === 'perceptual-scale') {
+        return;
+    }
+    throw new Error('Cannot update keyframe settings: output must be "linear" or "perceptual-scale"');
+};
+const updateKeyframeSettings = ({ expression, clamping, posterize, output, videoConfigValues, }) => {
     validatePosterize(posterize);
-    const existing = getInterpolationExpression(expression);
+    validateOutput(output);
+    const existing = getInterpolationExpression(expression, videoConfigValues);
     if (!existing) {
         throw new Error('Cannot update keyframe settings on non-keyframed value');
     }
@@ -474,6 +481,7 @@ const updateKeyframeSettings = ({ expression, clamping, posterize, }) => {
             propertyName: 'extrapolateRight',
             value: null,
         });
+        setOptionsProperty({ options, propertyName: 'output', value: null });
     }
     else if (clamping) {
         setOptionsProperty({
@@ -487,6 +495,13 @@ const updateKeyframeSettings = ({ expression, clamping, posterize, }) => {
             value: b.stringLiteral(clamping.right),
         });
     }
+    if (!isColorInterpolation && output !== undefined) {
+        setOptionsProperty({
+            options,
+            propertyName: 'output',
+            value: output === 'linear' ? null : b.stringLiteral(output),
+        });
+    }
     setOptionsProperty({
         options,
         propertyName: 'posterize',
@@ -502,8 +517,8 @@ const updateKeyframeSettings = ({ expression, clamping, posterize, }) => {
         keyframes: existing.keyframes,
     });
 };
-const updateKeyframeEasing = ({ expression, segmentIndex, easing, }) => {
-    const existing = getInterpolationExpression(expression);
+const updateKeyframeEasing = ({ expression, segmentIndex, easing, videoConfigValues, }) => {
+    const existing = getInterpolationExpression(expression, videoConfigValues);
     if (!existing) {
         throw new Error('Cannot update easing on non-keyframed value');
     }
@@ -546,7 +561,12 @@ const createInterpolateExpression = ({ callee, input, extraArgs, keyframes, }) =
     const sortedKeyframes = [...keyframes].sort((first, second) => first.frame - second.frame);
     return b.callExpression(callee, [
         input,
-        b.arrayExpression(sortedKeyframes.map((keyframe) => createFrameExpression(keyframe.frame))),
+        b.arrayExpression(sortedKeyframes.map((keyframe) => keyframe.frame === keyframe.originalFrame
+            ? keyframe.frameExpression
+            : (0, video_config_numeric_expression_1.updateVideoConfigNumericExpression)({
+                expression: keyframe.frameNumericExpression,
+                value: keyframe.frame,
+            }))),
         b.arrayExpression(sortedKeyframes.map((keyframe) => keyframe.output)),
         ...extraArgs,
     ]);
@@ -556,11 +576,12 @@ const noIntroducedIdentifiers = {
     needsFrameHook: false,
     needsEasingImport: false,
 };
-const addKeyframe = ({ expression, key, frame, value, schema, }) => {
+const addKeyframe = ({ expression, key, frame, value, schema, videoConfigValues, }) => {
+    var _a;
     if (!(0, studio_shared_1.isSchemaFieldKeyframable)({ schema, key })) {
         throw new Error(`Cannot add keyframe: "${key}" is not keyframable`);
     }
-    const existing = getInterpolationExpression(expression);
+    const existing = getInterpolationExpression(expression, videoConfigValues);
     const newOutput = (0, update_nested_prop_1.parseValueExpression)(value);
     if (existing) {
         const existingCalleeName = existing.callee.type === 'Identifier'
@@ -573,9 +594,19 @@ const addKeyframe = ({ expression, key, frame, value, schema, }) => {
         const nextCalleeName = schemaCalleeName !== null && schemaCalleeName !== void 0 ? schemaCalleeName : existingCalleeName;
         const existingIndex = existing.keyframes.findIndex((keyframe) => keyframe.frame === frame);
         const nextKeyframes = existingIndex === -1
-            ? [...existing.keyframes, { frame, output: newOutput, value }]
+            ? [
+                ...existing.keyframes,
+                {
+                    frame,
+                    frameExpression: createFrameExpression(frame),
+                    frameNumericExpression: { type: 'literal', value: frame },
+                    originalFrame: frame,
+                    output: newOutput,
+                    value,
+                },
+            ]
             : existing.keyframes.map((keyframe, index) => index === existingIndex
-                ? { frame, output: newOutput, value }
+                ? { ...keyframe, output: newOutput, value }
                 : keyframe);
         const normalizedEasing = existingIndex === -1
             ? normalizeEasingAfterAddingKeyframe({
@@ -604,11 +635,24 @@ const addKeyframe = ({ expression, key, frame, value, schema, }) => {
             },
         };
     }
-    if (!(0, can_update_sequence_props_1.isStaticValue)(expression)) {
+    const staticNumericExpression = (0, video_config_numeric_expression_1.parseVideoConfigNumericExpression)({
+        node: expression,
+        videoConfigValues,
+    });
+    if (!(0, can_update_sequence_props_1.isStaticValue)(expression) && staticNumericExpression === null) {
         throw new Error('Cannot add keyframe to computed expression');
     }
-    const staticValue = (0, can_update_sequence_props_1.extractStaticValue)(expression);
-    const keyframes = [{ frame, output: newOutput, value }];
+    const staticValue = (_a = staticNumericExpression === null || staticNumericExpression === void 0 ? void 0 : staticNumericExpression.value) !== null && _a !== void 0 ? _a : (0, can_update_sequence_props_1.extractStaticValue)(expression);
+    const keyframes = [
+        {
+            frame,
+            frameExpression: createFrameExpression(frame),
+            frameNumericExpression: { type: 'literal', value: frame },
+            originalFrame: frame,
+            output: newOutput,
+            value,
+        },
+    ];
     const callee = getInterpolationCalleeForValues({
         schema,
         key,
@@ -617,7 +661,11 @@ const addKeyframe = ({ expression, key, frame, value, schema, }) => {
     });
     const extraArgs = callee.type === 'Identifier' && callee.name === 'interpolateColors'
         ? []
-        : [createClampOptionsExpression()];
+        : [
+            createClampOptionsExpression({
+                defaultOutput: getDefaultKeyframeOutput({ schema, key }),
+            }),
+        ];
     return {
         expression: createInterpolateExpression({
             callee,
@@ -634,8 +682,8 @@ const addKeyframe = ({ expression, key, frame, value, schema, }) => {
         },
     };
 };
-const removeKeyframe = ({ expression, frame, }) => {
-    const existing = getInterpolationExpression(expression);
+const removeKeyframe = ({ expression, frame, videoConfigValues, }) => {
+    const existing = getInterpolationExpression(expression, videoConfigValues);
     if (!existing) {
         throw new Error('Cannot remove keyframe from non-interpolated expression');
     }
@@ -669,8 +717,8 @@ const removeKeyframe = ({ expression, frame, }) => {
         },
     };
 };
-const moveKeyframes = ({ expression, moves, }) => {
-    const existing = getInterpolationExpression(expression);
+const moveKeyframes = ({ expression, moves, videoConfigValues, }) => {
+    const existing = getInterpolationExpression(expression, videoConfigValues);
     if (!existing) {
         throw new Error('Cannot move keyframe in non-interpolated expression');
     }
@@ -728,7 +776,7 @@ const moveKeyframes = ({ expression, moves, }) => {
         keyframes: nextKeyframes,
     });
 };
-const applyKeyframeOperation = ({ expression, key, operation, schema, }) => {
+const applyKeyframeOperation = ({ expression, key, operation, schema, videoConfigValues, }) => {
     if (operation.type === 'add') {
         return addKeyframe({
             expression,
@@ -736,6 +784,7 @@ const applyKeyframeOperation = ({ expression, key, operation, schema, }) => {
             frame: operation.frame,
             value: operation.value,
             schema,
+            videoConfigValues,
         });
     }
     if (operation.type === 'settings') {
@@ -744,6 +793,8 @@ const applyKeyframeOperation = ({ expression, key, operation, schema, }) => {
                 expression,
                 clamping: operation.clamping,
                 posterize: operation.posterize,
+                output: operation.output,
+                videoConfigValues,
             }),
             introduced: noIntroducedIdentifiers,
         };
@@ -753,6 +804,7 @@ const applyKeyframeOperation = ({ expression, key, operation, schema, }) => {
             expression,
             segmentIndex: operation.segmentIndex,
             easing: operation.easing,
+            videoConfigValues,
         });
         return {
             expression: updated.expression,
@@ -764,11 +816,19 @@ const applyKeyframeOperation = ({ expression, key, operation, schema, }) => {
     }
     if (operation.type === 'move') {
         return {
-            expression: moveKeyframes({ expression, moves: operation.moves }),
+            expression: moveKeyframes({
+                expression,
+                moves: operation.moves,
+                videoConfigValues,
+            }),
             introduced: noIntroducedIdentifiers,
         };
     }
-    return removeKeyframe({ expression, frame: operation.frame });
+    return removeKeyframe({
+        expression,
+        frame: operation.frame,
+        videoConfigValues,
+    });
 };
 const getExpressionFromJsxAttribute = (attr) => {
     if (!attr.value) {
@@ -832,6 +892,14 @@ const findFieldInSchema = (schema, key) => {
     }
     return undefined;
 };
+const getDefaultKeyframeOutput = ({ schema, key, }) => {
+    const field = schema ? findFieldInSchema(schema, key) : undefined;
+    if (((field === null || field === void 0 ? void 0 : field.type) === 'number' || (field === null || field === void 0 ? void 0 : field.type) === 'scale') &&
+        field.defaultKeyframeOutput !== undefined) {
+        return field.defaultKeyframeOutput;
+    }
+    return key === 'style.scale' ? 'perceptual-scale' : null;
+};
 const getInitialValueForMissingProp = ({ schema, key, newValue, }) => {
     const field = schema ? findFieldInSchema(schema, key) : undefined;
     if (field && field.type !== 'hidden' && field.default !== undefined) {
@@ -958,10 +1026,14 @@ const getEffectPropsObjectExpression = (call) => {
     }
     return call.arguments[0];
 };
-const updateSequenceKeyframesAst = ({ input, nodePath, updates, schema, }) => {
+const updateSequenceKeyframesAst = ({ input, nodePath, updates, schema, videoConfigValues, }) => {
     var _a;
     var _b;
     const ast = (0, parse_ast_1.parseAst)(input);
+    const videoConfigIdentifierValues = (0, video_config_values_1.getVideoConfigIdentifierValues)({
+        ast,
+        videoConfigValues,
+    });
     const jsxPath = (0, get_ast_node_path_1.getAstNodePath)(ast, nodePath);
     const node = (0, can_update_sequence_props_1.findJsxElementAtNodePath)(ast, nodePath);
     if (!node || !jsxPath) {
@@ -994,6 +1066,7 @@ const updateSequenceKeyframesAst = ({ input, nodePath, updates, schema, }) => {
             key: update.key,
             operation: update.operation,
             schema: schema !== null && schema !== void 0 ? schema : null,
+            videoConfigValues: videoConfigIdentifierValues,
         });
         newValueStrings.push(recast.print(nextExpression).code);
         prop.setExpression(nextExpression);
@@ -1028,12 +1101,13 @@ const updateSequenceKeyframesAst = ({ input, nodePath, updates, schema, }) => {
     };
 };
 exports.updateSequenceKeyframesAst = updateSequenceKeyframesAst;
-const updateSequenceKeyframes = async ({ input, nodePath, updates, schema, prettierConfigOverride, }) => {
+const updateSequenceKeyframes = async ({ input, nodePath, updates, schema, prettierConfigOverride, videoConfigValues, }) => {
     const { serialized, oldValueStrings, newValueStrings, logLine, updatedNodePath, } = (0, exports.updateSequenceKeyframesAst)({
         input,
         nodePath,
         updates,
         schema,
+        videoConfigValues,
     });
     const { output, formatted } = await (0, format_file_content_1.formatFileContent)({
         input: serialized,
@@ -1053,10 +1127,14 @@ const updateSequenceKeyframes = async ({ input, nodePath, updates, schema, prett
     };
 };
 exports.updateSequenceKeyframes = updateSequenceKeyframes;
-const updateEffectKeyframesAst = ({ input, sequenceNodePath, effectIndex, updates, schema, }) => {
+const updateEffectKeyframesAst = ({ input, sequenceNodePath, effectIndex, updates, schema, videoConfigValues, }) => {
     var _a, _b;
     var _c, _d, _e;
     const ast = (0, parse_ast_1.parseAst)(input);
+    const videoConfigIdentifierValues = (0, video_config_values_1.getVideoConfigIdentifierValues)({
+        ast,
+        videoConfigValues,
+    });
     const jsxPath = (0, get_ast_node_path_1.getAstNodePath)(ast, sequenceNodePath);
     const jsx = (0, can_update_sequence_props_1.findJsxElementAtNodePath)(ast, sequenceNodePath);
     if (!jsx || !jsxPath) {
@@ -1096,6 +1174,7 @@ const updateEffectKeyframesAst = ({ input, sequenceNodePath, effectIndex, update
             key: update.key,
             operation: update.operation,
             schema: schema !== null && schema !== void 0 ? schema : null,
+            videoConfigValues: videoConfigIdentifierValues,
         });
         newValueStrings.push(recast.print(nextExpression).code);
         prop.setExpression(nextExpression);
@@ -1131,13 +1210,14 @@ const updateEffectKeyframesAst = ({ input, sequenceNodePath, effectIndex, update
     };
 };
 exports.updateEffectKeyframesAst = updateEffectKeyframesAst;
-const updateEffectKeyframes = async ({ input, sequenceNodePath, effectIndex, updates, schema, prettierConfigOverride, }) => {
+const updateEffectKeyframes = async ({ input, sequenceNodePath, effectIndex, updates, schema, prettierConfigOverride, videoConfigValues, }) => {
     const { serialized, oldValueStrings, newValueStrings, logLine, effectCallee, updatedSequenceNodePath, } = (0, exports.updateEffectKeyframesAst)({
         input,
         sequenceNodePath,
         effectIndex,
         updates,
         schema,
+        videoConfigValues,
     });
     const { output, formatted } = await (0, format_file_content_1.formatFileContent)({
         input: serialized,

package/dist/codemods/update-nested-prop.d.ts

@@ -1,11 +1,12 @@
-import type { JSXOpeningElement } from '@babel/types';
+import type { JSXOpeningElement, Expression } from '@babel/types';
 import type { ExpressionKind } from 'ast-types/lib/gen/kinds';
 export declare const parseValueExpression: (value: unknown) => ExpressionKind;
-export declare const updateNestedProp: ({ node, parentKey, childKey, value, defaultValue, isDefault, }: {
+export declare const updateNestedProp: ({ node, parentKey, childKey, value, defaultValue, isDefault, createValueExpression, }: {
     node: JSXOpeningElement;
     parentKey: string;
     childKey: string;
     value: unknown;
     defaultValue: unknown;
     isDefault: boolean;
+    createValueExpression: ((existing: Expression | null) => ExpressionKind) | null;
 }) => string;

package/dist/codemods/update-nested-prop.js

@@ -116,12 +116,15 @@ const removeNestedProp = ({ attr, attrIndex, attributes, childKey, }) => {
         attributes.splice(attrIndex, 1);
     }
 };
-const setNestedProp = ({ attr, attributes, parentKey, childKey, value, }) => {
-    const parsedValue = (0, exports.parseValueExpression)(value);
+const setNestedProp = ({ attr, attributes, parentKey, childKey, value, createValueExpression, }) => {
+    var _a;
     if (attr) {
         const objExpr = getObjectExpression(attr);
         if (objExpr) {
             const { prop } = findObjectProperty(objExpr, childKey);
+            const parsedValue = createValueExpression
+                ? createValueExpression((_a = prop === null || prop === void 0 ? void 0 : prop.value) !== null && _a !== void 0 ? _a : null)
+                : (0, exports.parseValueExpression)(value);
             if (prop) {
                 prop.value = parsedValue;
             }
@@ -131,6 +134,9 @@ const setNestedProp = ({ attr, attributes, parentKey, childKey, value, }) => {
         }
     }
     else {
+        const parsedValue = createValueExpression
+            ? createValueExpression(null)
+            : (0, exports.parseValueExpression)(value);
         const objExpr = b.objectExpression([
             b.objectProperty(b.identifier(childKey), parsedValue),
         ]);
@@ -138,7 +144,7 @@ const setNestedProp = ({ attr, attributes, parentKey, childKey, value, }) => {
         attributes.push(newAttr);
     }
 };
-const updateNestedProp = ({ node, parentKey, childKey, value, defaultValue, isDefault, }) => {
+const updateNestedProp = ({ node, parentKey, childKey, value, defaultValue, isDefault, createValueExpression, }) => {
     if (!node.attributes) {
         node.attributes = [];
     }
@@ -149,7 +155,14 @@ const updateNestedProp = ({ node, parentKey, childKey, value, defaultValue, isDe
         removeNestedProp({ attr, attrIndex, attributes, childKey });
     }
     else {
-        setNestedProp({ attr, attributes, parentKey, childKey, value });
+        setNestedProp({
+            attr,
+            attributes,
+            parentKey,
+            childKey,
+            value,
+            createValueExpression,
+        });
     }
     return oldValueString;
 };

package/dist/codemods/update-sequence-props/update-sequence-props.d.ts

@@ -1,5 +1,5 @@
 import type { GoogleFontSourceEdit } from '@remotion/studio-shared';
-import type { InteractivitySchema, SequenceNodePath } from 'remotion';
+import type { InteractivitySchema, SequenceNodePath, VideoConfigValues } from 'remotion';
 export type SequencePropUpdate = {
     key: string;
     value: unknown;
@@ -14,6 +14,7 @@ export type SequencePropsNodeUpdate = {
     nodePath: SequenceNodePath;
     updates: SequencePropUpdate[];
     schema: InteractivitySchema;
+    videoConfigValues: VideoConfigValues | null;
 };
 export type SequencePropsNodeUpdateResult = {
     oldValueStrings: string[];
@@ -33,11 +34,12 @@ type UpdateSequencePropsResult = {
     logLine: number;
     removedProps: RemovedProp[];
 };
-export declare const updateSequencePropsAst: ({ input, nodePath, updates, schema, }: {
+export declare const updateSequencePropsAst: ({ input, nodePath, updates, schema, videoConfigValues, }: {
     input: string;
     nodePath: SequenceNodePath;
     updates: SequencePropUpdate[];
     schema: InteractivitySchema;
+    videoConfigValues: VideoConfigValues | null;
 }) => {
     serialized: string;
     oldValueStrings: string[];
@@ -49,11 +51,12 @@ export declare const updateMultipleSequenceProps: ({ input, changes, prettierCon
     changes: SequencePropsNodeUpdate[];
     prettierConfigOverride: PrettierConfigOverride;
 }) => Promise<UpdateMultipleSequencePropsResult>;
-export declare const updateSequenceProps: ({ input, nodePath, updates, schema, prettierConfigOverride, }: {
+export declare const updateSequenceProps: ({ input, nodePath, updates, schema, prettierConfigOverride, videoConfigValues, }: {
     input: string;
     nodePath: SequenceNodePath;
     updates: SequencePropUpdate[];
     schema: InteractivitySchema;
     prettierConfigOverride: PrettierConfigOverride;
+    videoConfigValues: VideoConfigValues | null;
 }) => Promise<UpdateSequencePropsResult>;
 export {};

package/dist/codemods/update-sequence-props/update-sequence-props.js

@@ -36,6 +36,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.updateSequenceProps = exports.updateMultipleSequenceProps = exports.updateSequencePropsAst = void 0;
 const recast = __importStar(require("recast"));
 const no_react_1 = require("remotion/no-react");
+const video_config_numeric_expression_1 = require("../../helpers/video-config-numeric-expression");
+const video_config_values_1 = require("../../helpers/video-config-values");
 const can_update_sequence_props_1 = require("../../preview-server/routes/can-update-sequence-props");
 const format_file_content_1 = require("../format-file-content");
 const parse_ast_1 = require("../parse-ast");
@@ -60,6 +62,7 @@ const removeVariantKey = ({ node, variantKey, }) => {
         value: undefined,
         defaultValue: null,
         isDefault: true,
+        createValueExpression: null,
     });
 };
 const snapshotTopLevelAttrs = (node) => {
@@ -471,17 +474,32 @@ const applyGoogleFontSourceEdits = ({ ast, updates, }) => {
         removeUnusedGoogleFontSourceEdits(ast);
     }
 };
-const updateSequencePropsNode = ({ jsxElement, updates, schema, }) => {
-    var _a, _b, _c;
-    var _d, _e;
+const updateSequencePropsNode = ({ jsxElement, updates, schema, videoConfigValues, }) => {
+    var _a, _b, _c, _d;
+    var _e, _f;
     const node = jsxElement.openingElement;
-    const logLine = (_d = (_a = node.loc) === null || _a === void 0 ? void 0 : _a.start.line) !== null && _d !== void 0 ? _d : 1;
+    const logLine = (_e = (_a = node.loc) === null || _a === void 0 ? void 0 : _a.start.line) !== null && _e !== void 0 ? _e : 1;
     const oldValueStrings = [];
     const initialAttrs = snapshotTopLevelAttrs(node);
     const updatedTopLevelKeys = new Set(updates.map(({ key }) => {
         const dot = key.indexOf('.');
         return dot === -1 ? key : key.slice(0, dot);
     }));
+    const createValueExpression = ({ existing, value, }) => {
+        if (existing === null || typeof value !== 'number') {
+            return (0, update_nested_prop_1.parseValueExpression)(value);
+        }
+        const expression = (0, video_config_numeric_expression_1.parseVideoConfigNumericExpression)({
+            node: existing,
+            videoConfigValues,
+        });
+        if (expression === null) {
+            return (0, update_nested_prop_1.parseValueExpression)(value);
+        }
+        return expression.value === value
+            ? existing
+            : (0, video_config_numeric_expression_1.updateVideoConfigNumericExpression)({ expression, value });
+    };
     for (const { key, value, defaultValue } of updates) {
         let oldValueString = '';
         if (key === 'children') {
@@ -504,6 +522,7 @@ const updateSequencePropsNode = ({ jsxElement, updates, schema, }) => {
                 value,
                 defaultValue,
                 isDefault,
+                createValueExpression: (existing) => createValueExpression({ existing, value }),
             });
         }
         else {
@@ -540,7 +559,15 @@ const updateSequencePropsNode = ({ jsxElement, updates, schema, }) => {
                 }
             }
             else {
-                const parsed = (0, update_nested_prop_1.parseValueExpression)(value);
+                const existingExpression = (attr === null || attr === void 0 ? void 0 : attr.type) === 'JSXAttribute' &&
+                    ((_d = attr.value) === null || _d === void 0 ? void 0 : _d.type) === 'JSXExpressionContainer' &&
+                    attr.value.expression.type !== 'JSXEmptyExpression'
+                    ? attr.value.expression
+                    : null;
+                const parsed = createValueExpression({
+                    existing: existingExpression,
+                    value,
+                });
                 const newValue = value === true ? null : b.jsxExpressionContainer(parsed);
                 if (!attr || attr.type === 'JSXSpreadAttribute') {
                     const newAttr = b.jsxAttribute(b.jsxIdentifier(key), newValue);
@@ -570,7 +597,7 @@ const updateSequencePropsNode = ({ jsxElement, updates, schema, }) => {
         }
     }
     const finalAttrNames = new Set();
-    for (const a of (_e = node.attributes) !== null && _e !== void 0 ? _e : []) {
+    for (const a of (_f = node.attributes) !== null && _f !== void 0 ? _f : []) {
         if (a.type === 'JSXAttribute' && a.name.type === 'JSXIdentifier') {
             finalAttrNames.add(a.name.name);
         }
@@ -588,8 +615,12 @@ const updateSequencePropsNode = ({ jsxElement, updates, schema, }) => {
         removedProps,
     };
 };
-const updateSequencePropsAst = ({ input, nodePath, updates, schema, }) => {
+const updateSequencePropsAst = ({ input, nodePath, updates, schema, videoConfigValues, }) => {
     const ast = (0, parse_ast_1.parseAst)(input);
+    const videoConfigIdentifierValues = (0, video_config_values_1.getVideoConfigIdentifierValues)({
+        ast,
+        videoConfigValues,
+    });
     const jsxElement = (0, can_update_sequence_props_1.findJsxElementNodeAtNodePath)(ast, nodePath);
     if (!jsxElement) {
         throw new Error('Could not find a JSX element at the specified line to update');
@@ -598,6 +629,7 @@ const updateSequencePropsAst = ({ input, nodePath, updates, schema, }) => {
         jsxElement,
         updates,
         schema,
+        videoConfigValues: videoConfigIdentifierValues,
     });
     applyGoogleFontSourceEdits({ ast, updates });
     return {
@@ -611,13 +643,21 @@ exports.updateSequencePropsAst = updateSequencePropsAst;
 const updateMultipleSequenceProps = async ({ input, changes, prettierConfigOverride, }) => {
     const ast = (0, parse_ast_1.parseAst)(input);
     const allUpdates = [];
-    const results = changes.map(({ nodePath, updates, schema }) => {
+    const results = changes.map(({ nodePath, updates, schema, videoConfigValues }) => {
         const jsxElement = (0, can_update_sequence_props_1.findJsxElementNodeAtNodePath)(ast, nodePath);
         if (!jsxElement) {
             throw new Error('Could not find a JSX element at the specified line to update');
         }
         allUpdates.push(...updates);
-        return updateSequencePropsNode({ jsxElement, updates, schema });
+        return updateSequencePropsNode({
+            jsxElement,
+            updates,
+            schema,
+            videoConfigValues: (0, video_config_values_1.getVideoConfigIdentifierValues)({
+                ast,
+                videoConfigValues,
+            }),
+        });
     });
     applyGoogleFontSourceEdits({ ast, updates: allUpdates });
     const { output, formatted } = await (0, format_file_content_1.formatFileContent)({
@@ -631,12 +671,13 @@ const updateMultipleSequenceProps = async ({ input, changes, prettierConfigOverr
     };
 };
 exports.updateMultipleSequenceProps = updateMultipleSequenceProps;
-const updateSequenceProps = async ({ input, nodePath, updates, schema, prettierConfigOverride, }) => {
+const updateSequenceProps = async ({ input, nodePath, updates, schema, prettierConfigOverride, videoConfigValues, }) => {
     const { serialized, oldValueStrings, logLine, removedProps } = (0, exports.updateSequencePropsAst)({
         input,
         nodePath,
         updates,
         schema,
+        videoConfigValues,
     });
     const { output, formatted } = await (0, format_file_content_1.formatFileContent)({
         input: serialized,

package/dist/helpers/get-installed-installable-packages.js

@@ -1,22 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getInstalledInstallablePackages = void 0;
-const studio_shared_1 = require("@remotion/studio-shared");
 const get_installed_dependencies_1 = require("./get-installed-dependencies");
 const getInstalledInstallablePackages = (remotionRoot) => {
-    const { dependencies, devDependencies, optionalDependencies } = (0, get_installed_dependencies_1.getInstalledDependencies)(remotionRoot);
-    const installablePackages = [
+    const { dependencies, devDependencies, optionalDependencies, peerDependencies, } = (0, get_installed_dependencies_1.getInstalledDependencies)(remotionRoot);
+    return Array.from(new Set([
         ...dependencies,
         ...devDependencies,
         ...optionalDependencies,
-    ];
-    const remotionPackages = Object.entries(studio_shared_1.installableMap)
-        .filter(([, _installable]) => _installable)
-        .map(([pkg]) => (pkg === 'core' ? 'remotion' : `@remotion/${pkg}`))
-        .filter((pkg) => installablePackages.includes(pkg));
-    const installedExtraPackages = studio_shared_1.extraPackages
-        .map((pkg) => pkg.name)
-        .filter((pkg) => installablePackages.includes(pkg));
-    return [...remotionPackages, ...installedExtraPackages];
+        ...peerDependencies,
+    ]));
 };
 exports.getInstalledInstallablePackages = getInstalledInstallablePackages;