@remotion/studio-server 4.0.474 → 4.0.475

package/dist/codemods/effect-param-expression.js

@@ -39,10 +39,7 @@ const imports_1 = require("../helpers/imports");
 const update_nested_prop_1 = require("./update-nested-prop");
 const b = recast.types.builders;
 const isNonLinearEasing = (easing) => easing !== 'linear';
-const keyframedParamNeedsEasingImport = (param) => {
-    return (param.interpolationFunction !== 'interpolateColors' &&
-        param.easing.some(isNonLinearEasing));
-};
+const keyframedParamNeedsEasingImport = (param) => param.easing.some(isNonLinearEasing);
 const getRequiredRemotionImportsForEffectParams = (params) => {
     const requiredImports = new Set();
     for (const param of params) {
@@ -91,10 +88,10 @@ const makeKeyframedOptions = ({ param, remotionLocalNames, }) => {
         if (param.clamping.right !== 'extend') {
             properties.push(b.objectProperty(b.identifier('extrapolateRight'), b.stringLiteral(param.clamping.right)));
         }
-        if (keyframedParamNeedsEasingImport(param)) {
-            const easingLocalName = (_a = remotionLocalNames.Easing) !== null && _a !== void 0 ? _a : 'Easing';
-            properties.push(b.objectProperty(b.identifier('easing'), b.arrayExpression(param.easing.map((easing) => makeEasingExpression({ easing, easingLocalName })))));
-        }
+    }
+    if (keyframedParamNeedsEasingImport(param)) {
+        const easingLocalName = (_a = remotionLocalNames.Easing) !== null && _a !== void 0 ? _a : 'Easing';
+        properties.push(b.objectProperty(b.identifier('easing'), b.arrayExpression(param.easing.map((easing) => makeEasingExpression({ easing, easingLocalName })))));
     }
     if (param.posterize !== undefined) {
         properties.push(b.objectProperty(b.identifier('posterize'), (0, update_nested_prop_1.parseValueExpression)(param.posterize)));

package/dist/codemods/update-keyframes/update-keyframes.d.ts

@@ -1,5 +1,8 @@
 import { type KeyframeInterpolationFunction } from '@remotion/studio-shared';
-import type { ExtrapolateType, SequenceNodePath, SequenceSchema } from 'remotion';
+import type { CanUpdateSequencePropStatus, ExtrapolateType, SequenceNodePath, SequenceSchema } from 'remotion';
+type KeyframeEasing = Extract<CanUpdateSequencePropStatus, {
+    status: 'keyframed';
+}>['easing'][number];
 export type KeyframeOperation = {
     type: 'add';
     frame: number;
@@ -14,6 +17,10 @@ export type KeyframeOperation = {
         right: ExtrapolateType;
     } | undefined;
     posterize: number | undefined;
+} | {
+    type: 'easing';
+    segmentIndex: number;
+    easing: KeyframeEasing;
 } | {
     type: 'move';
     moves: {
@@ -32,6 +39,7 @@ export type EffectKeyframeUpdate = {
 export type IntroducedKeyframeIdentifiers = {
     calleeName: KeyframeInterpolationFunction | null;
     needsFrameHook: boolean;
+    needsEasingImport: boolean;
 };
 export declare const updateSequenceKeyframesAst: ({ input, nodePath, updates, schema, }: {
     input: string;
@@ -89,3 +97,4 @@ export declare const updateEffectKeyframes: ({ input, sequenceNodePath, effectIn
     effectCallee: string;
     updatedSequenceNodePath: SequenceNodePath;
 }>;
+export {};

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

@@ -44,6 +44,62 @@ const update_effect_props_1 = require("../update-effect-props/update-effect-prop
 const update_nested_prop_1 = require("../update-nested-prop");
 const ensure_imports_and_frame_hook_1 = require("./ensure-imports-and-frame-hook");
 const b = recast.types.builders;
+const getObjectPropertyNameFromUpdateKey = (key) => {
+    const dotIndex = key.indexOf('.');
+    return dotIndex === -1 ? key : key.slice(dotIndex + 1);
+};
+const lineStartsWithPropertyName = ({ line, propertyName, }) => {
+    const trimmed = line.trimStart();
+    return (trimmed.startsWith(`${propertyName}:`) ||
+        trimmed.startsWith(`'${propertyName}':`) ||
+        trimmed.startsWith(`"${propertyName}":`));
+};
+const getIndent = (line) => {
+    var _a;
+    var _b;
+    return (_b = (_a = line.match(/^[ \t]*/)) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : '';
+};
+const removeBlankLinesFromObjectsWithProperties = ({ input, propertyNames, }) => {
+    if (propertyNames.length === 0) {
+        return input;
+    }
+    const lines = input.split('\n');
+    const linesToRemove = new Set();
+    for (let i = 0; i < lines.length; i++) {
+        const propertyName = propertyNames.find((name) => lineStartsWithPropertyName({ line: lines[i], propertyName: name }));
+        if (!propertyName) {
+            continue;
+        }
+        const propertyIndentLength = getIndent(lines[i]).length;
+        let objectStart = i;
+        for (let j = i - 1; j >= 0; j--) {
+            const trimmed = lines[j].trim();
+            if (trimmed.endsWith('{') &&
+                getIndent(lines[j]).length < propertyIndentLength) {
+                objectStart = j;
+                break;
+            }
+        }
+        let objectEnd = i;
+        for (let j = i + 1; j < lines.length; j++) {
+            const trimmed = lines[j].trim();
+            if (trimmed.startsWith('}') &&
+                getIndent(lines[j]).length < propertyIndentLength) {
+                objectEnd = j;
+                break;
+            }
+        }
+        for (let j = objectStart + 1; j < objectEnd; j++) {
+            if (lines[j].trim() === '') {
+                linesToRemove.add(j);
+            }
+        }
+    }
+    if (linesToRemove.size === 0) {
+        return input;
+    }
+    return lines.filter((_, index) => !linesToRemove.has(index)).join('\n');
+};
 const getSupportedCallArgument = (arg) => {
     if (arg === undefined ||
         arg.type === 'ArgumentPlaceholder' ||
@@ -168,6 +224,173 @@ const setOptionsProperty = ({ options, propertyName, value, }) => {
     }
     options.properties.push(b.objectProperty(b.identifier(propertyName), value));
 };
+const isLinearEasing = (easing) => easing === 'linear';
+const getKeyframeEasing = (node) => {
+    if (node.type === 'TSAsExpression') {
+        return getKeyframeEasing(node.expression);
+    }
+    if (node.type === 'MemberExpression' &&
+        node.object.type === 'Identifier' &&
+        node.object.name === 'Easing' &&
+        node.property.type === 'Identifier' &&
+        node.property.name === 'linear' &&
+        node.computed === false) {
+        return 'linear';
+    }
+    if (node.type !== 'CallExpression' ||
+        node.callee.type !== 'MemberExpression' ||
+        node.callee.object.type !== 'Identifier' ||
+        node.callee.object.name !== 'Easing' ||
+        node.callee.property.type !== 'Identifier' ||
+        node.callee.property.name !== 'bezier' ||
+        node.callee.computed ||
+        node.arguments.length !== 4) {
+        return null;
+    }
+    const values = node.arguments.map((arg) => {
+        if (arg.type === 'ArgumentPlaceholder' ||
+            arg.type === 'JSXNamespacedName' ||
+            arg.type === 'SpreadElement') {
+            return null;
+        }
+        return getNumericValue(arg);
+    });
+    if (values.some((value) => value === null)) {
+        return null;
+    }
+    return values;
+};
+const getKeyframeEasingArray = ({ easingNode, segmentCount, }) => {
+    if (segmentCount === 0) {
+        return [];
+    }
+    if (easingNode.type === 'TSAsExpression') {
+        return getKeyframeEasingArray({
+            easingNode: easingNode.expression,
+            segmentCount,
+        });
+    }
+    if (easingNode.type === 'ArrayExpression') {
+        if (easingNode.elements.length > segmentCount) {
+            return null;
+        }
+        const parsed = easingNode.elements.map((element) => {
+            if (!element || element.type === 'SpreadElement') {
+                return null;
+            }
+            return getKeyframeEasing(element);
+        });
+        if (parsed.some((value) => value === null)) {
+            return null;
+        }
+        const easingArray = parsed;
+        while (easingArray.length < segmentCount) {
+            easingArray.push('linear');
+        }
+        return easingArray;
+    }
+    const easing = getKeyframeEasing(easingNode);
+    if (!easing) {
+        return null;
+    }
+    return new Array(segmentCount).fill(easing);
+};
+const getExistingEasingArray = ({ options, segmentCount, }) => {
+    const { prop } = findObjectOptionProperty(options, 'easing');
+    if (!prop) {
+        return new Array(segmentCount).fill('linear');
+    }
+    const easing = getKeyframeEasingArray({
+        easingNode: prop.value,
+        segmentCount,
+    });
+    if (!easing) {
+        throw new Error('Cannot update easing: easing must be inline');
+    }
+    return easing;
+};
+const getExistingEasingArrayOrNull = ({ options, segmentCount, }) => {
+    const { prop } = findObjectOptionProperty(options, 'easing');
+    if (!prop) {
+        return null;
+    }
+    return getExistingEasingArray({ options, segmentCount });
+};
+const createEasingExpression = (easing) => {
+    if (easing === 'linear') {
+        return b.memberExpression(b.identifier('Easing'), b.identifier('linear'));
+    }
+    return b.callExpression(b.memberExpression(b.identifier('Easing'), b.identifier('bezier')), easing.map((value) => (0, update_nested_prop_1.parseValueExpression)(value)));
+};
+const createEasingArrayExpression = (easing) => b.arrayExpression(easing.map((easingValue) => createEasingExpression(easingValue)));
+const setEasingOption = ({ options, easing, }) => {
+    const hasNonLinearEasing = easing.some((easingValue) => !isLinearEasing(easingValue));
+    setOptionsProperty({
+        options,
+        propertyName: 'easing',
+        value: hasNonLinearEasing ? createEasingArrayExpression(easing) : null,
+    });
+    return hasNonLinearEasing;
+};
+const getExtraArgsWithOptions = ({ extraArgs, options, }) => {
+    return options.properties.length === 0
+        ? extraArgs.slice(1)
+        : [options, ...extraArgs.slice(1)];
+};
+const getInlineOptionsFromExtraArgs = (extraArgs) => {
+    const existingOptions = extraArgs[0];
+    if (!existingOptions || existingOptions.type !== 'ObjectExpression') {
+        return null;
+    }
+    return existingOptions;
+};
+const normalizeEasingAfterAddingKeyframe = ({ extraArgs, previousSegmentCount, nextSegmentCount, }) => {
+    const options = getInlineOptionsFromExtraArgs(extraArgs);
+    if (!options) {
+        return { extraArgs, needsEasingImport: false };
+    }
+    const easing = getExistingEasingArrayOrNull({
+        options,
+        segmentCount: previousSegmentCount,
+    });
+    if (easing === null) {
+        return { extraArgs, needsEasingImport: false };
+    }
+    while (easing.length < nextSegmentCount) {
+        easing.push('linear');
+    }
+    return {
+        extraArgs: getExtraArgsWithOptions({ extraArgs, options }),
+        needsEasingImport: setEasingOption({ options, easing }),
+    };
+};
+const normalizeEasingAfterRemovingKeyframe = ({ extraArgs, previousSegmentCount, nextSegmentCount, removedKeyframeIndex, }) => {
+    const options = getInlineOptionsFromExtraArgs(extraArgs);
+    if (!options) {
+        return { extraArgs, needsEasingImport: false };
+    }
+    const easing = getExistingEasingArrayOrNull({
+        options,
+        segmentCount: previousSegmentCount,
+    });
+    if (easing === null) {
+        return { extraArgs, needsEasingImport: false };
+    }
+    if (easing.length > 0) {
+        const easingIndexToRemove = removedKeyframeIndex === 0 ? 0 : removedKeyframeIndex - 1;
+        easing.splice(easingIndexToRemove, 1);
+    }
+    while (easing.length > nextSegmentCount) {
+        easing.pop();
+    }
+    while (easing.length < nextSegmentCount) {
+        easing.push('linear');
+    }
+    return {
+        extraArgs: getExtraArgsWithOptions({ extraArgs, options }),
+        needsEasingImport: setEasingOption({ options, easing }),
+    };
+};
 const validatePosterize = (posterize) => {
     if (posterize === undefined) {
         return;
@@ -227,6 +450,46 @@ const updateKeyframeSettings = ({ expression, clamping, posterize, }) => {
         keyframes: existing.keyframes,
     });
 };
+const updateKeyframeEasing = ({ expression, segmentIndex, easing, }) => {
+    const existing = getInterpolationExpression(expression);
+    if (!existing) {
+        throw new Error('Cannot update easing on non-keyframed value');
+    }
+    const segmentCount = Math.max(0, existing.keyframes.length - 1);
+    if (!Number.isInteger(segmentIndex) ||
+        segmentIndex < 0 ||
+        segmentIndex >= segmentCount) {
+        throw new Error('Cannot update easing: segment index out of range');
+    }
+    const extraArgs = [...existing.extraArgs];
+    const existingOptions = extraArgs[0];
+    if (existingOptions && existingOptions.type !== 'ObjectExpression') {
+        throw new Error('Cannot update easing: options must be inline');
+    }
+    const options = (existingOptions === null || existingOptions === void 0 ? void 0 : existingOptions.type) === 'ObjectExpression'
+        ? existingOptions
+        : createEmptyOptionsExpression();
+    const nextEasing = getExistingEasingArray({ options, segmentCount });
+    nextEasing[segmentIndex] = easing;
+    const hasNonLinearEasing = nextEasing.some((easingValue) => !isLinearEasing(easingValue));
+    setOptionsProperty({
+        options,
+        propertyName: 'easing',
+        value: hasNonLinearEasing ? createEasingArrayExpression(nextEasing) : null,
+    });
+    const nextExtraArgs = options.properties.length === 0
+        ? extraArgs.slice(1)
+        : [options, ...extraArgs.slice(1)];
+    return {
+        expression: createInterpolateExpression({
+            callee: existing.callee,
+            input: existing.input,
+            extraArgs: nextExtraArgs,
+            keyframes: existing.keyframes,
+        }),
+        needsEasingImport: hasNonLinearEasing,
+    };
+};
 const createInterpolateExpression = ({ callee, input, extraArgs, keyframes, }) => {
     const sortedKeyframes = [...keyframes].sort((first, second) => first.frame - second.frame);
     return b.callExpression(callee, [
@@ -239,6 +502,7 @@ const createInterpolateExpression = ({ callee, input, extraArgs, keyframes, }) =
 const noIntroducedIdentifiers = {
     calleeName: null,
     needsFrameHook: false,
+    needsEasingImport: false,
 };
 const addKeyframe = ({ expression, key, frame, value, schema, }) => {
     if (!(0, studio_shared_1.isSchemaFieldKeyframable)({ schema, key })) {
@@ -261,11 +525,18 @@ const addKeyframe = ({ expression, key, frame, value, schema, }) => {
             : existing.keyframes.map((keyframe, index) => index === existingIndex
                 ? { frame, output: newOutput, value }
                 : keyframe);
+        const normalizedEasing = existingIndex === -1
+            ? normalizeEasingAfterAddingKeyframe({
+                extraArgs: existing.extraArgs,
+                previousSegmentCount: Math.max(existing.keyframes.length - 1, 0),
+                nextSegmentCount: Math.max(nextKeyframes.length - 1, 0),
+            })
+            : { extraArgs: existing.extraArgs, needsEasingImport: false };
         return {
             expression: createInterpolateExpression({
                 callee: b.identifier(nextCalleeName),
                 input: existing.input,
-                extraArgs: existing.extraArgs,
+                extraArgs: normalizedEasing.extraArgs,
                 keyframes: nextKeyframes,
             }),
             introduced: {
@@ -273,6 +544,7 @@ const addKeyframe = ({ expression, key, frame, value, schema, }) => {
                     ? schemaCalleeName
                     : null,
                 needsFrameHook: false,
+                needsEasingImport: normalizedEasing.needsEasingImport,
             },
         };
     }
@@ -302,6 +574,7 @@ const addKeyframe = ({ expression, key, frame, value, schema, }) => {
                 ? callee.name
                 : null,
             needsFrameHook: true,
+            needsEasingImport: false,
         },
     };
 };
@@ -316,14 +589,29 @@ const removeKeyframe = ({ expression, frame, }) => {
     }
     const nextKeyframes = existing.keyframes.filter((_keyframe, index) => index !== keyframeIndex);
     if (nextKeyframes.length === 0) {
-        return existing.keyframes[keyframeIndex].output;
+        return {
+            expression: existing.keyframes[keyframeIndex].output,
+            introduced: noIntroducedIdentifiers,
+        };
     }
-    return createInterpolateExpression({
-        callee: existing.callee,
-        input: existing.input,
+    const normalizedEasing = normalizeEasingAfterRemovingKeyframe({
         extraArgs: existing.extraArgs,
-        keyframes: nextKeyframes,
+        previousSegmentCount: Math.max(existing.keyframes.length - 1, 0),
+        nextSegmentCount: Math.max(nextKeyframes.length - 1, 0),
+        removedKeyframeIndex: keyframeIndex,
     });
+    return {
+        expression: createInterpolateExpression({
+            callee: existing.callee,
+            input: existing.input,
+            extraArgs: normalizedEasing.extraArgs,
+            keyframes: nextKeyframes,
+        }),
+        introduced: {
+            ...noIntroducedIdentifiers,
+            needsEasingImport: normalizedEasing.needsEasingImport,
+        },
+    };
 };
 const moveKeyframes = ({ expression, moves, }) => {
     var _a;
@@ -395,16 +683,27 @@ const applyKeyframeOperation = ({ expression, key, operation, schema, }) => {
             introduced: noIntroducedIdentifiers,
         };
     }
+    if (operation.type === 'easing') {
+        const updated = updateKeyframeEasing({
+            expression,
+            segmentIndex: operation.segmentIndex,
+            easing: operation.easing,
+        });
+        return {
+            expression: updated.expression,
+            introduced: {
+                ...noIntroducedIdentifiers,
+                needsEasingImport: updated.needsEasingImport,
+            },
+        };
+    }
     if (operation.type === 'move') {
         return {
             expression: moveKeyframes({ expression, moves: operation.moves }),
             introduced: noIntroducedIdentifiers,
         };
     }
-    return {
-        expression: removeKeyframe({ expression, frame: operation.frame }),
-        introduced: noIntroducedIdentifiers,
-    };
+    return removeKeyframe({ expression, frame: operation.frame });
 };
 const getExpressionFromJsxAttribute = (attr) => {
     if (!attr.value) {
@@ -609,6 +908,9 @@ const updateSequenceKeyframesAst = ({ input, nodePath, updates, schema, }) => {
             requiredImports.add('useCurrentFrame');
             needsFrameHook = true;
         }
+        if (introduced.needsEasingImport) {
+            requiredImports.add('Easing');
+        }
     }
     if (needsFrameHook) {
         const fnPath = (0, ensure_imports_and_frame_hook_1.findEnclosingFunctionPath)(jsxPath);
@@ -641,8 +943,12 @@ const updateSequenceKeyframes = async ({ input, nodePath, updates, schema, prett
         input: serialized,
         prettierConfigOverride,
     });
+    const outputWithoutInsertedBlankLines = removeBlankLinesFromObjectsWithProperties({
+        input: output,
+        propertyNames: updates.map((update) => getObjectPropertyNameFromUpdateKey(update.key)),
+    });
     return {
-        output,
+        output: outputWithoutInsertedBlankLines,
         formatted,
         oldValueStrings,
         newValueStrings,
@@ -699,6 +1005,9 @@ const updateEffectKeyframesAst = ({ input, sequenceNodePath, effectIndex, update
             requiredImports.add('useCurrentFrame');
             needsFrameHook = true;
         }
+        if (introduced.needsEasingImport) {
+            requiredImports.add('Easing');
+        }
     }
     if (needsFrameHook) {
         const fnPath = (0, ensure_imports_and_frame_hook_1.findEnclosingFunctionPath)(jsxPath);
@@ -733,8 +1042,12 @@ const updateEffectKeyframes = async ({ input, sequenceNodePath, effectIndex, upd
         input: serialized,
         prettierConfigOverride,
     });
+    const outputWithoutInsertedBlankLines = removeBlankLinesFromObjectsWithProperties({
+        input: output,
+        propertyNames: updates.map((update) => update.key),
+    });
     return {
-        output,
+        output: outputWithoutInsertedBlankLines,
         formatted,
         oldValueStrings,
         newValueStrings,

package/dist/helpers/imports.js

@@ -105,18 +105,23 @@ const ensureNamedImport = ({ ast, importedName, sourcePath, localName, }) => {
 };
 exports.ensureNamedImport = ensureNamedImport;
 const ensureNamedImports = ({ ast, importedNames, sourcePath, }) => {
-    var _a, _b;
+    var _a;
+    var _b, _c, _d;
     if (importedNames.size === 0) {
         return;
     }
     const existingImports = findImportDeclarations(ast, sourcePath);
     const existingNames = new Set();
     for (const existingImportDeclaration of existingImports) {
-        for (const importSpecifierCandidate of (_a = existingImportDeclaration.specifiers) !== null && _a !== void 0 ? _a : []) {
+        for (const importSpecifierCandidate of (_b = existingImportDeclaration.specifiers) !== null && _b !== void 0 ? _b : []) {
             if (importSpecifierCandidate.type !== 'ImportSpecifier') {
                 continue;
             }
-            existingNames.add((0, exports.getImportedName)(importSpecifierCandidate));
+            const importedName = (0, exports.getImportedName)(importSpecifierCandidate);
+            const localName = (_c = (_a = importSpecifierCandidate.local) === null || _a === void 0 ? void 0 : _a.name) !== null && _c !== void 0 ? _c : importedName;
+            if (localName === importedName) {
+                existingNames.add(importedName);
+            }
         }
     }
     const existingImport = existingImports.find((candidateImportDeclaration) => !hasNamespaceSpecifier(candidateImportDeclaration));
@@ -126,7 +131,7 @@ const ensureNamedImports = ({ ast, importedNames, sourcePath, }) => {
                 continue;
             }
             existingImport.specifiers = [
-                ...((_b = existingImport.specifiers) !== null && _b !== void 0 ? _b : []),
+                ...((_d = existingImport.specifiers) !== null && _d !== void 0 ? _d : []),
                 b.importSpecifier(b.identifier(importedName)),
             ];
             existingNames.add(importedName);

package/dist/helpers/resolve-composition-component.js

@@ -548,12 +548,12 @@ const createComponentElement = ({ localName, props, }) => {
         createPositionAbsoluteStyleAttribute(),
     ], true), null, []);
 };
-const createAssetElement = ({ localName, staticFileLocalName, src, dimensions, }) => {
+const createAssetElement = ({ addPositionStyle, localName, staticFileLocalName, src, dimensions, }) => {
     return recast.types.builders.jsxElement(recast.types.builders.jsxOpeningElement(recast.types.builders.jsxIdentifier(localName), [
         staticFileLocalName === null
             ? createStringSrcAttribute(src)
             : createStaticFileSrcAttribute({ staticFileLocalName, src }),
-        createPositionAbsoluteStyleAttribute(),
+        ...(addPositionStyle ? [createPositionAbsoluteStyleAttribute()] : []),
         ...(dimensions
             ? [
                 createNumberAttribute('width', dimensions.width),
@@ -1043,6 +1043,7 @@ const createInsertableJsxElement = ({ ast, element, }) => {
             throw new Error('Unsupported asset type');
         }
         return createAssetElement({
+            addPositionStyle: element.assetType !== 'audio',
             localName,
             staticFileLocalName,
             src: element.src,

package/dist/preview-server/api-routes.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.allApiRoutes = void 0;
 const add_effect_1 = require("./routes/add-effect");
 const add_effect_keyframe_1 = require("./routes/add-effect-keyframe");
+const add_keyframes_1 = require("./routes/add-keyframes");
 const add_render_1 = require("./routes/add-render");
 const add_sequence_keyframe_1 = require("./routes/add-sequence-keyframe");
 const apply_codemod_1 = require("./routes/apply-codemod");
@@ -71,6 +72,7 @@ exports.allApiRoutes = {
     '/api/move-keyframes': move_keyframes_1.moveKeyframesHandler,
     '/api/add-sequence-keyframe': add_sequence_keyframe_1.addSequenceKeyframeHandler,
     '/api/add-effect-keyframe': add_effect_keyframe_1.addEffectKeyframeHandler,
+    '/api/add-keyframes': add_keyframes_1.addKeyframesHandler,
     '/api/update-sequence-keyframe-settings': update_sequence_keyframe_settings_1.updateSequenceKeyframeSettingsHandler,
     '/api/update-effect-keyframe-settings': update_effect_keyframe_settings_1.updateEffectKeyframeSettingsHandler,
     '/api/delete-effect': delete_effect_1.deleteEffectHandler,

package/dist/preview-server/routes/add-keyframes.d.ts

@@ -0,0 +1,7 @@
+import type { AddKeyframesRequest, AddKeyframesResponse } from '@remotion/studio-shared';
+import type { ApiHandler } from '../api-types';
+export declare const addKeyframes: ({ sequenceKeyframes, effectKeyframes, clientId, remotionRoot, logLevel, }: AddKeyframesRequest & {
+    readonly remotionRoot: string;
+    readonly logLevel: "error" | "info" | "trace" | "verbose" | "warn";
+}) => Promise<void>;
+export declare const addKeyframesHandler: ApiHandler<AddKeyframesRequest, AddKeyframesResponse>;

package/dist/preview-server/routes/add-keyframes.js

@@ -0,0 +1,226 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addKeyframesHandler = exports.addKeyframes = void 0;
+const node_fs_1 = require("node:fs");
+const renderer_1 = require("@remotion/renderer");
+const update_keyframes_1 = require("../../codemods/update-keyframes/update-keyframes");
+const file_watcher_1 = require("../../file-watcher");
+const resolve_file_inside_project_1 = require("../../helpers/resolve-file-inside-project");
+const undo_stack_1 = require("../undo-stack");
+const watch_ignore_next_change_1 = require("../watch-ignore-next-change");
+const log_effect_update_1 = require("./log-updates/log-effect-update");
+const log_update_1 = require("./log-updates/log-update");
+const save_props_mutex_1 = require("./save-props-mutex");
+const groupBy = (items, getKey) => {
+    var _a;
+    const groups = new Map();
+    for (const item of items) {
+        const key = getKey(item);
+        const group = (_a = groups.get(key)) !== null && _a !== void 0 ? _a : [];
+        group.push(item);
+        groups.set(key, group);
+    }
+    return [...groups.values()];
+};
+const getBatchDescription = ({ totalKeyframes, firstKeyframe, }) => {
+    if (totalKeyframes === 1) {
+        return {
+            undoMessage: `↩️  ${firstKeyframe.key} keyframe removed at frame ${firstKeyframe.frame}`,
+            redoMessage: `↪️  ${firstKeyframe.key} keyframe added at frame ${firstKeyframe.frame}`,
+        };
+    }
+    return {
+        undoMessage: `↩️  ${totalKeyframes} keyframes removed`,
+        redoMessage: `↪️  ${totalKeyframes} keyframes added`,
+    };
+};
+const addKeyframes = async ({ sequenceKeyframes, effectKeyframes, clientId, remotionRoot, logLevel, }) => {
+    var _a, _b;
+    const totalKeyframes = sequenceKeyframes.length + effectKeyframes.length;
+    if (totalKeyframes === 0) {
+        throw new Error('No keyframes were specified for adding');
+    }
+    const fileGroups = new Map();
+    for (const [index, keyframe] of sequenceKeyframes.entries()) {
+        const { absolutePath, fileRelativeToRoot } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
+            remotionRoot,
+            fileName: keyframe.fileName,
+            action: 'modify',
+        });
+        const group = (_a = fileGroups.get(absolutePath)) !== null && _a !== void 0 ? _a : {
+            fileRelativeToRoot,
+            sequenceKeyframes: [],
+            effectKeyframes: [],
+        };
+        group.sequenceKeyframes.push({
+            ...keyframe,
+            index,
+            absolutePath,
+            fileRelativeToRoot,
+        });
+        fileGroups.set(absolutePath, group);
+    }
+    for (const [index, keyframe] of effectKeyframes.entries()) {
+        const { absolutePath, fileRelativeToRoot } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
+            remotionRoot,
+            fileName: keyframe.fileName,
+            action: 'modify',
+        });
+        const group = (_b = fileGroups.get(absolutePath)) !== null && _b !== void 0 ? _b : {
+            fileRelativeToRoot,
+            sequenceKeyframes: [],
+            effectKeyframes: [],
+        };
+        group.effectKeyframes.push({
+            ...keyframe,
+            index,
+            absolutePath,
+            fileRelativeToRoot,
+        });
+        fileGroups.set(absolutePath, group);
+    }
+    const snapshots = [];
+    const sequenceLogs = [];
+    const effectLogs = [];
+    for (const [absolutePath, group] of fileGroups) {
+        const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
+        let output = fileContents;
+        let firstLogLine = Number.POSITIVE_INFINITY;
+        for (const keyframeGroup of groupBy(group.sequenceKeyframes, (keyframe) => JSON.stringify(keyframe.nodePath.nodePath))) {
+            const [firstSequenceKeyframe] = keyframeGroup;
+            if (!firstSequenceKeyframe) {
+                continue;
+            }
+            const result = await (0, update_keyframes_1.updateSequenceKeyframes)({
+                input: output,
+                nodePath: firstSequenceKeyframe.nodePath.nodePath,
+                schema: firstSequenceKeyframe.schema,
+                updates: keyframeGroup.map((keyframe) => ({
+                    key: keyframe.key,
+                    operation: {
+                        type: 'add',
+                        frame: keyframe.frame,
+                        value: JSON.parse(keyframe.value),
+                    },
+                })),
+            });
+            output = result.output;
+            firstLogLine = Math.min(firstLogLine, result.logLine);
+            for (const [keyframeIndex, keyframe] of keyframeGroup.entries()) {
+                sequenceLogs.push({
+                    fileRelativeToRoot: keyframe.fileRelativeToRoot,
+                    line: result.logLine,
+                    key: keyframe.key,
+                    oldValueString: result.oldValueStrings[keyframeIndex],
+                    newValueString: result.newValueStrings[keyframeIndex],
+                    formatted: result.formatted,
+                });
+            }
+        }
+        for (const keyframeGroup of groupBy(group.effectKeyframes, (keyframe) => `${JSON.stringify(keyframe.sequenceNodePath.nodePath)}:${keyframe.effectIndex}`)) {
+            const [firstEffectKeyframe] = keyframeGroup;
+            if (!firstEffectKeyframe) {
+                continue;
+            }
+            const result = await (0, update_keyframes_1.updateEffectKeyframes)({
+                input: output,
+                sequenceNodePath: firstEffectKeyframe.sequenceNodePath.nodePath,
+                effectIndex: firstEffectKeyframe.effectIndex,
+                schema: firstEffectKeyframe.schema,
+                updates: keyframeGroup.map((keyframe) => ({
+                    key: keyframe.key,
+                    operation: {
+                        type: 'add',
+                        frame: keyframe.frame,
+                        value: JSON.parse(keyframe.value),
+                    },
+                })),
+            });
+            output = result.output;
+            firstLogLine = Math.min(firstLogLine, result.logLine);
+            for (const [keyframeIndex, keyframe] of keyframeGroup.entries()) {
+                effectLogs.push({
+                    fileRelativeToRoot: keyframe.fileRelativeToRoot,
+                    line: result.logLine,
+                    effectName: result.effectCallee,
+                    propKey: keyframe.key,
+                    oldValueString: result.oldValueStrings[keyframeIndex],
+                    newValueString: result.newValueStrings[keyframeIndex],
+                    formatted: result.formatted,
+                });
+            }
+        }
+        snapshots.push({
+            filePath: absolutePath,
+            oldContents: fileContents,
+            newContents: output,
+            logLine: Number.isFinite(firstLogLine) ? firstLogLine : 1,
+        });
+    }
+    const [firstKeyframe] = sequenceKeyframes.length > 0 ? sequenceKeyframes : effectKeyframes;
+    if (!firstKeyframe) {
+        throw new Error('No keyframes were specified for adding');
+    }
+    (0, undo_stack_1.pushTransactionToUndoStack)({
+        snapshots,
+        logLevel,
+        remotionRoot,
+        description: getBatchDescription({ totalKeyframes, firstKeyframe }),
+        entryType: sequenceKeyframes.length > 0 && effectKeyframes.length > 0
+            ? // Dead code for now: sequence props and effect props cannot be selected
+                // together yet. Keep the mixed transaction type for the planned UI.
+                'keyframe-add'
+            : sequenceKeyframes.length > 0
+                ? 'sequence-props'
+                : 'effect-props',
+        suppressHmrOnFileRestore: true,
+    });
+    for (const snapshot of snapshots) {
+        (0, undo_stack_1.suppressUndoStackInvalidation)(snapshot.filePath);
+        (0, watch_ignore_next_change_1.suppressBundlerUpdateForFile)(snapshot.filePath);
+        (0, file_watcher_1.writeFileAndNotifyFileWatchers)(snapshot.filePath, snapshot.newContents, clientId);
+    }
+    for (const log of sequenceLogs) {
+        (0, log_update_1.logUpdate)({
+            fileRelativeToRoot: log.fileRelativeToRoot,
+            line: log.line,
+            key: log.key,
+            oldValueString: log.oldValueString,
+            newValueString: log.newValueString,
+            defaultValueString: null,
+            formatted: log.formatted,
+            logLevel,
+            removedProps: [],
+            addedProps: [],
+        });
+    }
+    for (const log of effectLogs) {
+        (0, log_effect_update_1.logEffectUpdate)({
+            fileRelativeToRoot: log.fileRelativeToRoot,
+            line: log.line,
+            effectName: log.effectName,
+            propKey: log.propKey,
+            oldValueString: log.oldValueString,
+            newValueString: log.newValueString,
+            defaultValueString: null,
+            formatted: log.formatted,
+            logLevel,
+            removedProps: [],
+            addedProps: [],
+        });
+    }
+    (0, undo_stack_1.printUndoHint)(logLevel);
+};
+exports.addKeyframes = addKeyframes;
+const addKeyframesHandler = ({ input: { sequenceKeyframes, effectKeyframes, clientId }, remotionRoot, logLevel, }) => (0, save_props_mutex_1.withSavePropsLock)(async () => {
+    renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[add-keyframes] Received request to add ${sequenceKeyframes.length + effectKeyframes.length} keyframe(s)`);
+    await (0, exports.addKeyframes)({
+        sequenceKeyframes,
+        effectKeyframes,
+        clientId,
+        remotionRoot,
+        logLevel,
+    });
+    return { success: true };
+});
+exports.addKeyframesHandler = addKeyframesHandler;

package/dist/preview-server/routes/can-update-sequence-props.js

@@ -260,9 +260,6 @@ const getInterpolationMetadata = (interpolationFunction, callExpression, keyfram
         }
         const value = property.value;
         if (key === 'easing') {
-            if (interpolationFunction === 'interpolateColors') {
-                return null;
-            }
             const parsedEasing = getKeyframeEasingArray({
                 easingNode: value,
                 segments,

package/dist/preview-server/routes/log-updates/format-prop-change.js

@@ -10,7 +10,7 @@ const formatInnerPropChange = ({ key, oldValueString, newValueString, defaultVal
     if (defaultValueString !== null && oldValueString === defaultValueString) {
         return (0, formatting_1.formatAddition)({ valueString: newValueString, key });
     }
-    return `${(0, formatting_1.formatPropDelta)({ valueString: oldValueString, key })} \u2192 ${(0, formatting_1.formatPropDelta)({ valueString: newValueString, key })}`;
+    return (0, formatting_1.formatPropChangeDelta)({ key, oldValueString, newValueString });
 };
 const formatPropChange = ({ key, oldValueString, newValueString, defaultValueString, removedProps, addedProps, }) => {
     const suffix = (0, format_side_props_1.formatSideProps)({ removedProps, addedProps });

package/dist/preview-server/routes/log-updates/formatting.d.ts

@@ -7,6 +7,7 @@ export declare const equals: (str: string) => string;
 export declare const punctuation: (str: string) => string;
 export declare const stringValue: (str: string) => string;
 export declare const numberValue: (str: string) => string;
+export declare const inlineAddition: (str: string) => string;
 export declare const strikeThrough: (str: string) => string;
 export declare const strikeThroughOrRemovedPrefix: (str: string) => string;
 export declare const addedPrefixIfNoColor: (str: string) => string;
@@ -15,5 +16,10 @@ export type PropDelta = {
     valueString: string;
 };
 export declare const formatPropDelta: ({ key, valueString }: PropDelta) => string;
+export declare const formatPropChangeDelta: ({ key, oldValueString, newValueString, }: {
+    key: string;
+    oldValueString: string;
+    newValueString: string;
+}) => string;
 export declare const formatDeletion: (prop: PropDelta) => string;
 export declare const formatAddition: (prop: PropDelta) => string;

package/dist/preview-server/routes/log-updates/formatting.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.formatAddition = exports.formatDeletion = exports.formatPropDelta = exports.addedPrefixIfNoColor = exports.strikeThroughOrRemovedPrefix = exports.strikeThrough = exports.numberValue = exports.stringValue = exports.punctuation = exports.equals = exports.attrName = exports.bg = exports.fg = exports.colorValue = exports.colorEnabled = void 0;
+exports.formatAddition = exports.formatDeletion = exports.formatPropChangeDelta = exports.formatPropDelta = exports.addedPrefixIfNoColor = exports.strikeThroughOrRemovedPrefix = exports.strikeThrough = exports.inlineAddition = exports.numberValue = exports.stringValue = exports.punctuation = exports.equals = exports.attrName = exports.bg = exports.fg = exports.colorValue = exports.colorEnabled = void 0;
 const renderer_1 = require("@remotion/renderer");
 const colorEnabled = () => renderer_1.RenderInternals.chalk.enabled();
 exports.colorEnabled = colorEnabled;
@@ -35,6 +35,8 @@ const stringValue = (str) => (0, exports.fg)(230, 219, 116, str);
 exports.stringValue = stringValue;
 const numberValue = (str) => (0, exports.fg)(174, 129, 255, str);
 exports.numberValue = numberValue;
+const inlineAddition = (str) => (0, exports.fg)(166, 226, 46, str);
+exports.inlineAddition = inlineAddition;
 const strikeThrough = (str) => `\u001b[9m\u001b[38;2;255;85;85m${stripAnsi(str)}\u001b[39m\u001b[29m`;
 exports.strikeThrough = strikeThrough;
 const strikeThroughOrRemovedPrefix = (str) => (0, exports.colorEnabled)() ? (0, exports.strikeThrough)(str) : 'removed: ' + str;
@@ -49,6 +51,25 @@ const formatSimpleProp = (key, value) => {
 const formatNestedProp = (parentKey, childKey, value) => {
     return `${(0, exports.attrName)(parentKey)}${(0, exports.equals)('=')}${(0, exports.punctuation)('{{')}${(0, exports.punctuation)(childKey)}${(0, exports.punctuation)(':')} ${(0, exports.colorValue)(value)}${(0, exports.punctuation)('}}')}`;
 };
+const formatValueDelta = ({ oldValueString, newValueString, }) => {
+    const withoutUnchangedOptions = shortenUnchangedInterpolateOptions({
+        oldValueString,
+        newValueString,
+    });
+    const shortened = removeUnchangedInterpolateOptionProperties(withoutUnchangedOptions);
+    const inlineDelta = formatInlineAdditionOrRemoval(shortened);
+    if (inlineDelta !== null) {
+        return inlineDelta;
+    }
+    return `${(0, exports.colorValue)(shortened.oldValueString)} ${(0, exports.punctuation)('→')} ${(0, exports.colorValue)(shortened.newValueString)}`;
+};
+const formatSimplePropChange = ({ key, oldValueString, newValueString, }) => {
+    return `${(0, exports.attrName)(key)}${(0, exports.equals)('=')}${(0, exports.punctuation)('{')}${formatValueDelta({ oldValueString, newValueString })}${(0, exports.punctuation)('}')}`;
+};
+const formatNestedPropChange = ({ key, oldValueString, newValueString, }) => {
+    const dotIdx = key.indexOf('.');
+    return `${(0, exports.attrName)(key.slice(0, dotIdx))}${(0, exports.equals)('=')}${(0, exports.punctuation)('{{')}${(0, exports.punctuation)(key.slice(dotIdx + 1))}${(0, exports.punctuation)(':')} ${formatValueDelta({ oldValueString, newValueString })}${(0, exports.punctuation)('}}')}`;
+};
 const formatPropDelta = ({ key, valueString }) => {
     const dotIdx = key.indexOf('.');
     if (dotIdx === -1) {
@@ -57,6 +78,14 @@ const formatPropDelta = ({ key, valueString }) => {
     return formatNestedProp(key.slice(0, dotIdx), key.slice(dotIdx + 1), valueString);
 };
 exports.formatPropDelta = formatPropDelta;
+const formatPropChangeDelta = ({ key, oldValueString, newValueString, }) => {
+    const dotIdx = key.indexOf('.');
+    if (dotIdx === -1) {
+        return formatSimplePropChange({ key, oldValueString, newValueString });
+    }
+    return formatNestedPropChange({ key, oldValueString, newValueString });
+};
+exports.formatPropChangeDelta = formatPropChangeDelta;
 const formatDeletion = (prop) => {
     const formatted = (0, exports.formatPropDelta)(prop);
     return (0, exports.strikeThroughOrRemovedPrefix)(formatted);
@@ -67,3 +96,229 @@ const formatAddition = (prop) => {
     return (0, exports.addedPrefixIfNoColor)(formatted);
 };
 exports.formatAddition = formatAddition;
+const callStart = 'interpolate(';
+const normalizeArg = (arg) => {
+    return arg
+        .replace(/\s+/g, ' ')
+        .replace(/,(\s*[}\]])/g, '$1')
+        .trim();
+};
+const shortenUnchangedOptionProperties = new Set([
+    'extrapolateLeft',
+    'extrapolateRight',
+]);
+const splitTopLevelArgs = (argsSource) => {
+    const args = [];
+    let depth = 0;
+    let quote = null;
+    let start = 0;
+    for (let i = 0; i < argsSource.length; i++) {
+        const char = argsSource[i];
+        const previous = argsSource[i - 1];
+        if (quote) {
+            if (char === quote && previous !== '\\') {
+                quote = null;
+            }
+            continue;
+        }
+        if (char === "'" || char === '"' || char === '`') {
+            quote = char;
+            continue;
+        }
+        if (char === '(' || char === '[' || char === '{') {
+            depth++;
+            continue;
+        }
+        if (char === ')' || char === ']' || char === '}') {
+            depth--;
+            continue;
+        }
+        if (char === ',' && depth === 0) {
+            args.push(argsSource.slice(start, i).trim());
+            start = i + 1;
+        }
+    }
+    args.push(argsSource.slice(start).trim());
+    return args;
+};
+const getCommonPrefixLength = (oldValueString, newValueString) => {
+    const maxLength = Math.min(oldValueString.length, newValueString.length);
+    let index = 0;
+    while (index < maxLength && oldValueString[index] === newValueString[index]) {
+        index++;
+    }
+    return index;
+};
+const getCommonSuffixLength = ({ oldValueString, newValueString, prefixLength, }) => {
+    const maxLength = Math.min(oldValueString.length, newValueString.length) - prefixLength;
+    let index = 0;
+    while (index < maxLength &&
+        oldValueString[oldValueString.length - 1 - index] ===
+            newValueString[newValueString.length - 1 - index]) {
+        index++;
+    }
+    return index;
+};
+const minSharedInlineDeltaChars = 12;
+const formatInlineAdditionOrRemoval = ({ oldValueString, newValueString, }) => {
+    if (!(0, exports.colorEnabled)()) {
+        return null;
+    }
+    const prefixLength = getCommonPrefixLength(oldValueString, newValueString);
+    const suffixLength = getCommonSuffixLength({
+        oldValueString,
+        newValueString,
+        prefixLength,
+    });
+    if (prefixLength + suffixLength < minSharedInlineDeltaChars) {
+        return null;
+    }
+    const oldMiddleEnd = oldValueString.length - suffixLength;
+    const newMiddleEnd = newValueString.length - suffixLength;
+    const oldMiddle = oldValueString.slice(prefixLength, oldMiddleEnd);
+    const newMiddle = newValueString.slice(prefixLength, newMiddleEnd);
+    if (oldMiddle.length === 0 && newMiddle.length > 0) {
+        return `${newValueString.slice(0, prefixLength)}${(0, exports.inlineAddition)(newMiddle)}${newValueString.slice(newMiddleEnd)}`;
+    }
+    if (newMiddle.length === 0 && oldMiddle.length > 0) {
+        return `${oldValueString.slice(0, prefixLength)}${(0, exports.strikeThrough)(oldMiddle)}${oldValueString.slice(oldMiddleEnd)}`;
+    }
+    return null;
+};
+const getObjectPropertyKey = (propertySource) => {
+    const colonIndex = propertySource.indexOf(':');
+    if (colonIndex === -1) {
+        return null;
+    }
+    const key = propertySource.slice(0, colonIndex).trim();
+    if (/^[A-Za-z_$][\w$]*$/.test(key)) {
+        return key;
+    }
+    if ((key.startsWith("'") && key.endsWith("'")) ||
+        (key.startsWith('"') && key.endsWith('"'))) {
+        return key.slice(1, -1);
+    }
+    return null;
+};
+const parseTopLevelObjectProperties = (objectSource) => {
+    const trimmed = objectSource.trim();
+    if (!trimmed.startsWith('{') || !trimmed.endsWith('}')) {
+        return null;
+    }
+    const properties = splitTopLevelArgs(trimmed.slice(1, -1))
+        .filter(Boolean)
+        .map((propertySource) => {
+        const key = getObjectPropertyKey(propertySource);
+        if (key === null) {
+            return null;
+        }
+        const colonIndex = propertySource.indexOf(':');
+        return {
+            key,
+            value: normalizeArg(propertySource.slice(colonIndex + 1)),
+            source: propertySource.trim(),
+        };
+    });
+    if (properties.some((property) => property === null)) {
+        return null;
+    }
+    return properties;
+};
+const parseInterpolateCall = (valueString) => {
+    const trimmed = valueString.trim();
+    if (!trimmed.startsWith(callStart) || !trimmed.endsWith(')')) {
+        return null;
+    }
+    let depth = 0;
+    let quote = null;
+    for (let i = 'interpolate'.length; i < trimmed.length; i++) {
+        const char = trimmed[i];
+        const previous = trimmed[i - 1];
+        if (quote) {
+            if (char === quote && previous !== '\\') {
+                quote = null;
+            }
+            continue;
+        }
+        if (char === "'" || char === '"' || char === '`') {
+            quote = char;
+            continue;
+        }
+        if (char === '(' || char === '[' || char === '{') {
+            depth++;
+            continue;
+        }
+        if (char === ')' || char === ']' || char === '}') {
+            depth--;
+            if (depth === 0 && i !== trimmed.length - 1) {
+                return null;
+            }
+        }
+    }
+    if (depth !== 0) {
+        return null;
+    }
+    return {
+        args: splitTopLevelArgs(trimmed.slice(callStart.length, -1)),
+    };
+};
+const shortenUnchangedInterpolateOptions = ({ oldValueString, newValueString, }) => {
+    const oldCall = parseInterpolateCall(oldValueString);
+    const newCall = parseInterpolateCall(newValueString);
+    if (!oldCall ||
+        !newCall ||
+        oldCall.args.length <= 3 ||
+        newCall.args.length <= 3) {
+        return { oldValueString, newValueString };
+    }
+    const oldOptions = oldCall.args.slice(3).map(normalizeArg);
+    const newOptions = newCall.args.slice(3).map(normalizeArg);
+    if (oldOptions.length !== newOptions.length ||
+        oldOptions.some((option, index) => option !== newOptions[index])) {
+        return { oldValueString, newValueString };
+    }
+    return {
+        oldValueString: `interpolate(${oldCall.args.slice(0, 3).join(', ')})`,
+        newValueString: `interpolate(${newCall.args.slice(0, 3).join(', ')})`,
+    };
+};
+const removeUnchangedInterpolateOptionProperties = ({ oldValueString, newValueString, }) => {
+    const oldCall = parseInterpolateCall(oldValueString);
+    const newCall = parseInterpolateCall(newValueString);
+    if (!oldCall ||
+        !newCall ||
+        oldCall.args.length <= 3 ||
+        newCall.args.length <= 3) {
+        return { oldValueString, newValueString };
+    }
+    const oldProperties = parseTopLevelObjectProperties(oldCall.args[3]);
+    const newProperties = parseTopLevelObjectProperties(newCall.args[3]);
+    if (!oldProperties || !newProperties) {
+        return { oldValueString, newValueString };
+    }
+    const propertiesToRemove = [...shortenUnchangedOptionProperties].filter((propertyName) => {
+        const oldProperty = oldProperties.find((property) => property.key === propertyName);
+        const newProperty = newProperties.find((property) => property.key === propertyName);
+        return (oldProperty !== undefined &&
+            newProperty !== undefined &&
+            oldProperty.value === newProperty.value);
+    });
+    if (propertiesToRemove.length === 0) {
+        return { oldValueString, newValueString };
+    }
+    const removeProperties = (call, properties) => {
+        const nextOptions = properties.filter((property) => !propertiesToRemove.includes(property.key));
+        const nextArgs = nextOptions.length === 0
+            ? [...call.args.slice(0, 3), ...call.args.slice(4)]
+            : [
+                ...call.args.slice(0, 3),
+                `{${nextOptions.map((property) => property.source).join(', ')}}`,
+                ...call.args.slice(4),
+            ];
+        return `interpolate(${nextArgs.join(', ')})`;
+    };
+    return {
+        oldValueString: removeProperties(oldCall, oldProperties),
+        newValueString: removeProperties(newCall, newProperties),
+    };
+};

package/dist/preview-server/routes/update-effect-keyframe-settings.js

@@ -30,11 +30,17 @@ const updateEffectKeyframeSettingsHandler = ({ input: { fileName, sequenceNodePa
         updates: [
             {
                 key,
-                operation: {
-                    type: 'settings',
-                    clamping: settings.clamping,
-                    posterize: settings.posterize,
-                },
+                operation: settings.type === 'settings'
+                    ? {
+                        type: 'settings',
+                        clamping: settings.clamping,
+                        posterize: settings.posterize,
+                    }
+                    : {
+                        type: 'easing',
+                        segmentIndex: settings.segmentIndex,
+                        easing: settings.easing,
+                    },
             },
         ],
     });

package/dist/preview-server/routes/update-sequence-keyframe-settings.js

@@ -27,11 +27,17 @@ const updateSequenceKeyframeSettingsHandler = ({ input: { fileName, nodePath, ke
         updates: [
             {
                 key,
-                operation: {
-                    type: 'settings',
-                    clamping: settings.clamping,
-                    posterize: settings.posterize,
-                },
+                operation: settings.type === 'settings'
+                    ? {
+                        type: 'settings',
+                        clamping: settings.clamping,
+                        posterize: settings.posterize,
+                    }
+                    : {
+                        type: 'easing',
+                        segmentIndex: settings.segmentIndex,
+                        easing: settings.easing,
+                    },
             },
         ],
     });

package/dist/preview-server/undo-stack.d.ts

@@ -3,7 +3,7 @@ export interface UndoEntryDescription {
     undoMessage: string;
     redoMessage: string;
 }
-type UndoEntryType = 'visual-control' | 'default-props' | 'sequence-props' | 'effect-props' | 'keyframe-delete' | 'add-effect' | 'delete-effect' | 'paste-effects' | 'reorder-effect' | 'reorder-sequence' | 'delete-jsx-node' | 'duplicate-jsx-node' | 'insert-jsx-element' | 'delete-composition' | 'rename-composition' | 'duplicate-composition' | 'delete-folder' | 'rename-folder';
+type UndoEntryType = 'visual-control' | 'default-props' | 'sequence-props' | 'effect-props' | 'keyframe-add' | 'keyframe-delete' | 'add-effect' | 'delete-effect' | 'paste-effects' | 'reorder-effect' | 'reorder-sequence' | 'delete-jsx-node' | 'duplicate-jsx-node' | 'insert-jsx-element' | 'delete-composition' | 'rename-composition' | 'duplicate-composition' | 'delete-folder' | 'rename-folder';
 type UndoEntrySnapshot = {
     filePath: string;
     oldContents: string;
@@ -27,6 +27,8 @@ type UndoEntry = {
     entryType: 'sequence-props';
 } | {
     entryType: 'effect-props';
+} | {
+    entryType: 'keyframe-add';
 } | {
     entryType: 'keyframe-delete';
 } | {

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio-server"
 	},
 	"name": "@remotion/studio-server",
-	"version": "4.0.474",
+	"version": "4.0.475",
 	"description": "Run a Remotion Studio with a server backend",
 	"main": "dist",
 	"scripts": {
@@ -27,11 +27,11 @@
 		"@babel/parser": "7.24.1",
 		"semver": "7.5.3",
 		"prettier": "3.8.1",
-		"remotion": "4.0.474",
+		"remotion": "4.0.475",
 		"recast": "0.23.11",
-		"@remotion/bundler": "4.0.474",
-		"@remotion/renderer": "4.0.474",
-		"@remotion/studio-shared": "4.0.474",
+		"@remotion/bundler": "4.0.475",
+		"@remotion/renderer": "4.0.475",
+		"@remotion/studio-shared": "4.0.475",
 		"memfs": "3.4.3",
 		"open": "8.4.2"
 	},
@@ -39,7 +39,7 @@
 		"ast-types": "0.16.1",
 		"react": "19.2.3",
 		"@types/semver": "7.5.3",
-		"@remotion/eslint-config-internal": "4.0.474",
+		"@remotion/eslint-config-internal": "4.0.475",
 		"eslint": "9.19.0",
 		"@types/node": "20.12.14",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"