@remotion/studio-server 4.0.495 → 4.0.497

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

@@ -44,6 +44,7 @@ const recast = __importStar(require("recast"));
 const no_react_1 = require("remotion/no-react");
 const format_file_content_1 = require("../codemods/format-file-content");
 const parse_ast_1 = require("../codemods/parse-ast");
+const strip_parenthesized_extra_1 = require("../codemods/strip-parenthesized-extra");
 const update_nested_prop_1 = require("../codemods/update-nested-prop");
 const imports_1 = require("./imports");
 const svg_to_jsx_1 = require("./svg-to-jsx");
@@ -577,16 +578,18 @@ const createSolidElement = ({ localName, width, height, position, }) => {
         createPositionAbsoluteStyleAttribute(position),
     ], true), null, []);
 };
-const createComponentElement = ({ addPositionStyle, localName, props, position, }) => {
+const createComponentElement = ({ addPositionStyle, from, localName, props, position, }) => {
     return recast.types.builders.jsxElement(recast.types.builders.jsxOpeningElement(recast.types.builders.jsxIdentifier(localName), [
         ...props.map(createComponentProp),
+        ...(from === null ? [] : [createNumberAttribute('from', from)]),
         ...(addPositionStyle
             ? [createPositionAbsoluteStyleAttribute(position)]
             : []),
     ], true), null, []);
 };
-const createSequenceWrappedElement = ({ child, dimensions, durationInFrames, name, position, sequenceLocalName, }) => {
+const createSequenceWrappedElement = ({ child, dimensions, durationInFrames, from, name, position, sequenceLocalName, }) => {
     return recast.types.builders.jsxElement(recast.types.builders.jsxOpeningElement(recast.types.builders.jsxIdentifier(sequenceLocalName), [
+        ...(from === null ? [] : [createNumberAttribute('from', from)]),
         ...(name === null ? [] : [createStringAttribute('name', name)]),
         ...(dimensions !== null
             ? [
@@ -600,22 +603,29 @@ const createSequenceWrappedElement = ({ child, dimensions, durationInFrames, nam
         createPositionAbsoluteStyleAttribute(position),
     ], false), recast.types.builders.jsxClosingElement(recast.types.builders.jsxIdentifier(sequenceLocalName)), [child]);
 };
-const createAssetElement = ({ addPositionStyle, localName, staticFileLocalName, src, dimensions, position, }) => {
+const createAssetElement = ({ addPositionStyle, durationInFrames, from, localName, staticFileLocalName, src, dimensions, position, }) => {
     return recast.types.builders.jsxElement(recast.types.builders.jsxOpeningElement(recast.types.builders.jsxIdentifier(localName), [
         staticFileLocalName === null
             ? createStringSrcAttribute(src)
             : createStaticFileSrcAttribute({ staticFileLocalName, src }),
+        ...(durationInFrames === null
+            ? []
+            : [createNumberAttribute('durationInFrames', durationInFrames)]),
+        ...(from === null ? [] : [createNumberAttribute('from', from)]),
         ...(addPositionStyle
             ? [createAssetStyleAttribute({ dimensions, position })]
             : []),
     ], true), null, []);
 };
-const createSvgElement = async ({ interactiveLocalName, markup, position, }) => {
+const createSvgElement = async ({ from, interactiveLocalName, markup, position, }) => {
     var _a;
     var _b;
     const svgElement = await (0, svg_to_jsx_1.svgMarkupToJsx)(markup);
     const attributes = (_b = svgElement.openingElement.attributes) !== null && _b !== void 0 ? _b : [];
     svgElement.openingElement.attributes = attributes;
+    if (from !== null) {
+        attributes.push(createNumberAttribute('from', from));
+    }
     const styleAttribute = attributes.find((attribute) => attribute.type === 'JSXAttribute' &&
         attribute.name.type === 'JSXIdentifier' &&
         attribute.name.name === 'style');
@@ -1110,7 +1120,7 @@ const addElementToComponentRoot = ({ ast, exportName, element, }) => {
     if (rootNode.type === 'JSXElement' && rootNode.openingElement.selfClosing) {
         const fragment = recast.types.builders.jsxFragment(recast.types.builders.jsxOpeningFragment(), recast.types.builders.jsxClosingFragment(), [
             createSequenceWithChild({
-                child: rootNode,
+                child: (0, strip_parenthesized_extra_1.stripParenthesizedExtra)(rootNode),
                 sequenceLocalName: ensureSequenceImport(ast),
             }),
             element,
@@ -1316,7 +1326,7 @@ const resolveCompositionComponent = async ({ remotionRoot, compositionFile, comp
     };
 };
 exports.resolveCompositionComponent = resolveCompositionComponent;
-const createInsertableJsxElement = ({ addPositionStyleToComponent, ast, destinationFileName, element, remotionRoot, }) => {
+const createInsertableJsxElement = ({ addPositionStyleToComponent, ast, destinationFileName, element, from, remotionRoot, }) => {
     if (element.type === 'solid') {
         const solidLocalName = ensureSolidImport(ast);
         return createSolidElement({
@@ -1335,6 +1345,7 @@ const createInsertableJsxElement = ({ addPositionStyleToComponent, ast, destinat
         });
         return createComponentElement({
             addPositionStyle: addPositionStyleToComponent,
+            from,
             localName: componentLocalName,
             props: element.props,
             position: element.position,
@@ -1342,6 +1353,7 @@ const createInsertableJsxElement = ({ addPositionStyleToComponent, ast, destinat
     }
     if (element.type === 'svg') {
         return createSvgElement({
+            from,
             interactiveLocalName: ensureInteractiveImport(ast),
             markup: element.markup,
             position: element.position,
@@ -1387,17 +1399,21 @@ const createInsertableJsxElement = ({ addPositionStyleToComponent, ast, destinat
             throw new Error('Unsupported asset type');
         }
         return createAssetElement({
-            addPositionStyle: element.assetType !== 'audio',
+            addPositionStyle: addPositionStyleToComponent && element.assetType !== 'audio',
+            durationInFrames: element.assetType === 'image' ? null : element.durationInFrames,
+            from,
             localName,
             staticFileLocalName,
             src: element.src,
-            dimensions: element.dimensions,
+            dimensions: element.assetType === 'image' && from !== null
+                ? null
+                : element.dimensions,
             position: element.position,
         });
     }
     throw new Error('Unsupported element type');
 };
-const insertJsxElementIntoComposition = async ({ remotionRoot, compositionFile, compositionId, element, prettierConfigOverride, wrapInSequence = null, }) => {
+const insertJsxElementIntoComposition = async ({ remotionRoot, compositionFile, compositionId, element, from, prettierConfigOverride, wrapInSequence = null, }) => {
     var _a;
     const location = await (0, exports.resolveCompositionComponentWithFile)({
         remotionRoot,
@@ -1422,13 +1438,26 @@ const insertJsxElementIntoComposition = async ({ remotionRoot, compositionFile,
             durationInFrames: element.durationInFrames,
             name: element.compositionId,
             position: element.position,
+            from,
         }
-        : wrapInSequence;
+        : from === null ||
+            element.type === 'asset' ||
+            element.type === 'svg' ||
+            element.type === 'component'
+            ? wrapInSequence
+            : {
+                dimensions: null,
+                durationInFrames: null,
+                name: null,
+                position: element.position,
+                from,
+            };
     const elementToInsert = await createInsertableJsxElement({
         addPositionStyleToComponent: sequenceWrapper === null,
         ast,
         destinationFileName: location.fileName,
         element,
+        from,
         remotionRoot,
     });
     const finalElementToInsert = sequenceWrapper
@@ -1436,6 +1465,7 @@ const insertJsxElementIntoComposition = async ({ remotionRoot, compositionFile,
             child: elementToInsert,
             dimensions: sequenceWrapper.dimensions,
             durationInFrames: (_a = sequenceWrapper.durationInFrames) !== null && _a !== void 0 ? _a : null,
+            from: sequenceWrapper.from,
             name: sequenceWrapper.name,
             position: sequenceWrapper.position,
             sequenceLocalName: ensureSequenceImport(ast),

package/dist/index.d.ts

@@ -115,6 +115,7 @@ export declare const StudioServerInternals: {
         version: string;
         additionalArgs: string[];
     }) => string[];
+    getPackageManagerSpawnOptions: () => Pick<import("child_process").SpawnOptionsWithoutStdio, "shell">;
     addCompletedClientRender: ({ render, remotionRoot, }: {
         render: import("@remotion/studio-shared").CompletedClientRender;
         remotionRoot: string;

package/dist/index.js

@@ -13,6 +13,7 @@ const file_watcher_1 = require("./file-watcher");
 const get_latest_remotion_version_1 = require("./get-latest-remotion-version");
 const get_installed_dependencies_1 = require("./helpers/get-installed-dependencies");
 const install_command_1 = require("./helpers/install-command");
+const package_manager_spawn_options_1 = require("./helpers/package-manager-spawn-options");
 const max_timeline_tracks_1 = require("./max-timeline-tracks");
 const get_package_manager_1 = require("./preview-server/get-package-manager");
 const live_events_1 = require("./preview-server/live-events");
@@ -41,6 +42,7 @@ exports.StudioServerInternals = {
     getInstalledDependencies: get_installed_dependencies_1.getInstalledDependencies,
     getInstalledDependenciesWithVersions: get_installed_dependencies_1.getInstalledDependenciesWithVersions,
     getInstallCommand: install_command_1.getInstallCommand,
+    getPackageManagerSpawnOptions: package_manager_spawn_options_1.getPackageManagerSpawnOptions,
     addCompletedClientRender: client_render_queue_1.addCompletedClientRender,
     getCompletedClientRenders: client_render_queue_1.getCompletedClientRenders,
     removeCompletedClientRender: client_render_queue_1.removeCompletedClientRender,

package/dist/open-browser-shortcut.js

@@ -36,6 +36,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.registerOpenBrowserShortcut = void 0;
 const readline = __importStar(require("node:readline"));
 const renderer_1 = require("@remotion/renderer");
+const better_opn_1 = require("./better-opn");
 const maybe_open_browser_1 = require("./maybe-open-browser");
 const live_events_1 = require("./preview-server/live-events");
 const registerOpenBrowserShortcut = ({ browserArgs, browserFlag, url, logLevel, }) => {
@@ -64,30 +65,39 @@ const registerOpenBrowserShortcut = ({ browserArgs, browserFlag, url, logLevel,
             process.stdin.pause();
         }
     };
-    const openStudio = () => {
+    const openStudio = async () => {
         if (isOpeningBrowser) {
             return;
         }
         isOpeningBrowser = true;
         (0, live_events_1.clearPrintPortMessageTimeout)();
-        (0, maybe_open_browser_1.maybeOpenBrowser)({
-            browserArgs,
-            browserFlag,
-            shouldOpenBrowser: true,
-            url,
-            logLevel,
-        })
-            .then((result) => {
+        try {
+            const didFocus = await (0, better_opn_1.focusBrowserTabByOrigin)({
+                url,
+                browserArgs,
+                browserFlag,
+            });
+            if (didFocus) {
+                renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, renderer_1.RenderInternals.chalk.blue(`Opened ${url} in browser`));
+                return;
+            }
+            const result = await (0, maybe_open_browser_1.maybeOpenBrowser)({
+                browserArgs,
+                browserFlag,
+                shouldOpenBrowser: true,
+                url,
+                logLevel,
+            });
             if (result.didOpenBrowser) {
-                renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `Opened ${url} in browser`);
+                renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, renderer_1.RenderInternals.chalk.blue(`Opened ${url} in browser`));
             }
-        })
-            .catch((err) => {
+        }
+        catch (err) {
             renderer_1.RenderInternals.Log.error({ indent: false, logLevel }, 'Could not open browser:', err);
-        })
-            .finally(() => {
+        }
+        finally {
             isOpeningBrowser = false;
-        });
+        }
     };
     function onKeypress(_str, key) {
         if ((key === null || key === void 0 ? void 0 : key.ctrl) && key.name === 'c') {
@@ -98,7 +108,7 @@ const registerOpenBrowserShortcut = ({ browserArgs, browserFlag, url, logLevel,
         if ((key === null || key === void 0 ? void 0 : key.meta) || (key === null || key === void 0 ? void 0 : key.ctrl) || (key === null || key === void 0 ? void 0 : key.name) !== 's') {
             return;
         }
-        openStudio();
+        openStudio().catch(() => undefined);
     }
     readline.emitKeypressEvents(process.stdin);
     process.stdin.setRawMode(true);

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

@@ -40,6 +40,7 @@ const studio_shared_1 = require("@remotion/studio-shared");
 const recast = __importStar(require("recast"));
 const no_react_1 = require("remotion/no-react");
 const parse_ast_1 = require("../../codemods/parse-ast");
+const css_shorthand_properties_1 = require("../../helpers/css-shorthand-properties");
 const get_ast_node_path_1 = require("../../helpers/get-ast-node-path");
 const import_agnostic_node_path_1 = require("../../helpers/import-agnostic-node-path");
 const parse_keyframe_easing_expression_1 = require("../../helpers/parse-keyframe-easing-expression");
@@ -669,6 +670,15 @@ const validateStyleValue = (childKey, value) => {
     }
     return true;
 };
+const getObjectPropertyName = (property) => {
+    if (property.key.type === 'Identifier') {
+        return property.key.name;
+    }
+    if (property.key.type === 'StringLiteral') {
+        return property.key.value;
+    }
+    return null;
+};
 const getNestedPropStatus = ({ jsxElement, ast, parentKey, childKey, videoConfigValues, allowSpecialValues, }) => {
     const attr = jsxElement.attributes.find((a) => a.type !== 'JSXSpreadAttribute' &&
         a.name.type !== 'JSXNamespacedName' &&
@@ -687,9 +697,50 @@ const getNestedPropStatus = ({ jsxElement, ast, parentKey, childKey, videoConfig
         return computedStatus();
     }
     const objExpr = expression;
-    const prop = objExpr.properties.find((p) => p.type === 'ObjectProperty' &&
-        ((p.key.type === 'Identifier' && p.key.name === childKey) ||
-            (p.key.type === 'StringLiteral' && p.key.value === childKey)));
+    const cssShorthand = (0, css_shorthand_properties_1.getCssShorthandForLonghand)({
+        parentKey,
+        longhand: childKey,
+    });
+    if (cssShorthand &&
+        objExpr.properties.some((property) => {
+            if (property.type !== 'ObjectProperty') {
+                return false;
+            }
+            const propertyName = getObjectPropertyName(property);
+            return (propertyName !== null &&
+                cssShorthand.isUnsupportedProperty(propertyName));
+        })) {
+        return computedStatus();
+    }
+    let prop;
+    for (let index = objExpr.properties.length - 1; index >= 0; index--) {
+        const candidate = objExpr.properties[index];
+        if (candidate.type === 'SpreadElement') {
+            return computedStatus();
+        }
+        if (candidate.type === 'ObjectProperty' &&
+            (getObjectPropertyName(candidate) === childKey ||
+                getObjectPropertyName(candidate) === (cssShorthand === null || cssShorthand === void 0 ? void 0 : cssShorthand.shorthand))) {
+            prop = candidate;
+            break;
+        }
+    }
+    if (prop &&
+        cssShorthand &&
+        getObjectPropertyName(prop) === cssShorthand.shorthand) {
+        const shorthandValue = prop.value;
+        if (!(0, exports.isStaticValue)(shorthandValue, { allowSpecialValues: false })) {
+            return computedStatus();
+        }
+        const staticShorthandValue = (0, exports.extractStaticValue)(shorthandValue, {
+            allowSpecialValues: false,
+        });
+        if (typeof staticShorthandValue !== 'string') {
+            return computedStatus();
+        }
+        const parsed = cssShorthand.parse(staticShorthandValue);
+        return parsed ? staticStatus(parsed[childKey], null) : computedStatus();
+    }
     if (!prop) {
         // Property not set in the object, can be added
         return staticStatus(undefined, null);

package/dist/preview-server/routes/download-remote-asset.js

@@ -263,6 +263,7 @@ const downloadRemoteAssetHandler = async ({ input, publicDir, request }) => {
         src: assetPath,
         srcType: 'static',
         dimensions: fileType.dimensions,
+        durationInFrames: null,
         position: null,
     };
     return {

package/dist/preview-server/routes/insert-element.js

@@ -69,10 +69,14 @@ const validateElement = (element) => {
     }
     validateDimensions(element.dimensions);
 };
-const insertElementHandler = ({ input: { compositionFile, compositionId, element, position }, remotionRoot, logLevel, }) => (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
+const insertElementHandler = ({ input: { compositionFile, compositionId, element, from, position }, remotionRoot, logLevel, }) => (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
     try {
         validateElement(element);
         validatePosition(position);
+        if (from !== null &&
+            (!Number.isInteger(from) || !Number.isFinite(from) || from < 0)) {
+            throw new Error('from must be a non-negative integer');
+        }
         const componentName = (0, studio_shared_1.getElementComponentNameFromSourceCode)(element.sourceCode);
         if (componentName === null) {
             throw new Error('Element source must export exactly one named component');
@@ -118,9 +122,11 @@ const insertElementHandler = ({ input: { compositionFile, compositionId, element
                 props: [],
                 position: null,
             },
+            from: null,
             prettierConfigOverride: null,
             wrapInSequence: {
                 dimensions: element.dimensions,
+                from,
                 name: element.displayName,
                 position,
             },

package/dist/preview-server/routes/insert-jsx-element.js

@@ -72,6 +72,9 @@ const validateElement = (element, remotionRoot) => {
             validateDimension('width', element.dimensions.width);
             validateDimension('height', element.dimensions.height);
         }
+        if (element.durationInFrames !== null) {
+            validateDimension('durationInFrames', element.durationInFrames);
+        }
         return;
     }
     if (element.type === 'component') {
@@ -145,9 +148,13 @@ const getElementLabel = (element) => {
     }
     throw new Error('Unsupported element type');
 };
-const insertJsxElementHandler = ({ input: { compositionFile, compositionId, element }, remotionRoot, logLevel, }) => (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
+const insertJsxElementHandler = ({ input: { compositionFile, compositionId, element, from }, remotionRoot, logLevel, }) => (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
     try {
         validateElement(element, remotionRoot);
+        if (from !== null &&
+            (!Number.isInteger(from) || !Number.isFinite(from) || from < 0)) {
+            throw new Error('from must be a non-negative integer');
+        }
         const elementLabel = getElementLabel(element);
         renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[insert-jsx-element] Received request for compositionFile="${compositionFile}" compositionId="${compositionId}" element="${element.type}"`);
         const { fileName, source, oldContents, output, formatted, logLine } = await (0, resolve_composition_component_1.insertJsxElementIntoComposition)({
@@ -155,6 +162,7 @@ const insertJsxElementHandler = ({ input: { compositionFile, compositionId, elem
             compositionFile,
             compositionId,
             element,
+            from,
             prettierConfigOverride: null,
         });
         (0, undo_stack_1.pushToUndoStack)({

package/dist/preview-server/routes/install-dependency.js

@@ -6,6 +6,7 @@ const renderer_1 = require("@remotion/renderer");
 const studio_shared_1 = require("@remotion/studio-shared");
 const version_1 = require("remotion/version");
 const install_command_1 = require("../../helpers/install-command");
+const package_manager_spawn_options_1 = require("../../helpers/package-manager-spawn-options");
 const get_package_manager_1 = require("../get-package-manager");
 const getExtraPackageVersion = (packageName) => {
     const pkg = studio_shared_1.extraPackages.find((p) => p.name === packageName);
@@ -52,7 +53,10 @@ const handleInstallPackage = async ({ logLevel, remotionRoot, input: { packageNa
     const time = Date.now();
     try {
         await new Promise((resolve, reject) => {
-            const cmd = (0, node_child_process_1.spawn)(manager.manager, command, {});
+            const cmd = (0, node_child_process_1.spawn)(manager.manager, command, (0, package_manager_spawn_options_1.getPackageManagerSpawnOptions)());
+            cmd.on('error', (err) => {
+                reject(err);
+            });
             cmd.stdout.on('data', (d) => {
                 const splitted = d.toString().trim().split('\n');
                 splitted.forEach((line) => {

package/dist/preview-server/routes/save-sequence-props.js

@@ -59,14 +59,20 @@ const shouldSuppressHmrForSequencePropEdits = (edits) => {
         (edit.sourceEdit === null || edit.sourceEdit === undefined));
 };
 exports.shouldSuppressHmrForSequencePropEdits = shouldSuppressHmrForSequencePropEdits;
-const saveSequencePropsHandler = ({ input: { edits, movedKeyframes = { sequenceKeyframes: [], effectKeyframes: [] }, clientId, undoLabel, redoLabel, }, remotionRoot, logLevel, }) => (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
-    var _a, _b, _c;
-    const totalKeyframeMoves = movedKeyframes.sequenceKeyframes.length +
-        movedKeyframes.effectKeyframes.length;
-    if (edits.length === 0 && totalKeyframeMoves === 0) {
+const saveSequencePropsHandler = ({ input: { edits, addedKeyframes, movedKeyframes, clientId, undoLabel, redoLabel, }, remotionRoot, logLevel, }) => (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
+    var _a, _b, _c, _d;
+    const keyframesToAdd = addedKeyframes === null ? [] : addedKeyframes;
+    const keyframesToMove = movedKeyframes === null
+        ? { sequenceKeyframes: [], effectKeyframes: [] }
+        : movedKeyframes;
+    const totalKeyframeMoves = keyframesToMove.sequenceKeyframes.length +
+        keyframesToMove.effectKeyframes.length;
+    if (edits.length === 0 &&
+        keyframesToAdd.length === 0 &&
+        totalKeyframeMoves === 0) {
         throw new Error('No sequence prop edits to save');
     }
-    renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[save-sequence-props] Received request with ${edits.length} edit(s) and ${totalKeyframeMoves} moved keyframe(s)`);
+    renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[save-sequence-props] Received request with ${edits.length} edit(s), ${keyframesToAdd.length} added keyframe(s), and ${totalKeyframeMoves} moved keyframe(s)`);
     const editGroups = new Map();
     for (const [index, edit] of edits.entries()) {
         const parsedValue = parseSequencePropEditValue(edit.value);
@@ -79,7 +85,8 @@ const saveSequencePropsHandler = ({ input: { edits, movedKeyframes = { sequenceK
         const group = (_a = editGroups.get(absolutePath)) !== null && _a !== void 0 ? _a : {
             fileRelativeToRoot,
             edits: [],
-            sequenceKeyframes: [],
+            addedKeyframes: [],
+            movedSequenceKeyframes: [],
             effectKeyframes: [],
         };
         group.edits.push({
@@ -98,7 +105,7 @@ const saveSequencePropsHandler = ({ input: { edits, movedKeyframes = { sequenceK
         });
         editGroups.set(absolutePath, group);
     }
-    for (const [index, keyframe,] of movedKeyframes.sequenceKeyframes.entries()) {
+    for (const keyframe of keyframesToAdd) {
         const { absolutePath, fileRelativeToRoot } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
             remotionRoot,
             fileName: keyframe.fileName,
@@ -107,13 +114,14 @@ const saveSequencePropsHandler = ({ input: { edits, movedKeyframes = { sequenceK
         const group = (_b = editGroups.get(absolutePath)) !== null && _b !== void 0 ? _b : {
             fileRelativeToRoot,
             edits: [],
-            sequenceKeyframes: [],
+            addedKeyframes: [],
+            movedSequenceKeyframes: [],
             effectKeyframes: [],
         };
-        group.sequenceKeyframes.push({ ...keyframe, index });
+        group.addedKeyframes.push(keyframe);
         editGroups.set(absolutePath, group);
     }
-    for (const [index, keyframe] of movedKeyframes.effectKeyframes.entries()) {
+    for (const [index, keyframe,] of keyframesToMove.sequenceKeyframes.entries()) {
         const { absolutePath, fileRelativeToRoot } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
             remotionRoot,
             fileName: keyframe.fileName,
@@ -122,7 +130,24 @@ const saveSequencePropsHandler = ({ input: { edits, movedKeyframes = { sequenceK
         const group = (_c = editGroups.get(absolutePath)) !== null && _c !== void 0 ? _c : {
             fileRelativeToRoot,
             edits: [],
-            sequenceKeyframes: [],
+            addedKeyframes: [],
+            movedSequenceKeyframes: [],
+            effectKeyframes: [],
+        };
+        group.movedSequenceKeyframes.push({ ...keyframe, index });
+        editGroups.set(absolutePath, group);
+    }
+    for (const [index, keyframe] of keyframesToMove.effectKeyframes.entries()) {
+        const { absolutePath, fileRelativeToRoot } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
+            remotionRoot,
+            fileName: keyframe.fileName,
+            action: 'modify',
+        });
+        const group = (_d = editGroups.get(absolutePath)) !== null && _d !== void 0 ? _d : {
+            fileRelativeToRoot,
+            edits: [],
+            addedKeyframes: [],
+            movedSequenceKeyframes: [],
             effectKeyframes: [],
         };
         group.effectKeyframes.push({ ...keyframe, index });
@@ -158,7 +183,40 @@ const saveSequencePropsHandler = ({ input: { edits, movedKeyframes = { sequenceK
                 });
             }
         }
-        for (const keyframeGroup of groupBy(group.sequenceKeyframes, (keyframe) => JSON.stringify(keyframe.nodePath.nodePath))) {
+        for (const keyframeGroup of groupBy(group.addedKeyframes, (keyframe) => JSON.stringify(keyframe.nodePath.nodePath))) {
+            const [firstSequenceKeyframe] = keyframeGroup;
+            if (!firstSequenceKeyframe) {
+                continue;
+            }
+            const updates = keyframeGroup.map((keyframe) => ({
+                key: keyframe.key,
+                operation: {
+                    type: 'add',
+                    frame: keyframe.frame,
+                    value: JSON.parse(keyframe.value),
+                },
+            }));
+            const result = await (0, update_keyframes_1.updateSequenceKeyframes)({
+                input: output,
+                nodePath: firstSequenceKeyframe.nodePath.nodePath,
+                schema: firstSequenceKeyframe.schema,
+                videoConfigValues: firstSequenceKeyframe.nodePath.videoConfigValues,
+                updates,
+            });
+            output = result.output;
+            firstLogLine = Math.min(firstLogLine, result.logLine);
+            for (const [updateIndex, update] of updates.entries()) {
+                sequenceKeyframeLogs.push({
+                    fileRelativeToRoot: group.fileRelativeToRoot,
+                    line: result.logLine,
+                    key: update.key,
+                    oldValueString: result.oldValueStrings[updateIndex],
+                    newValueString: result.newValueStrings[updateIndex],
+                    formatted: result.formatted,
+                });
+            }
+        }
+        for (const keyframeGroup of groupBy(group.movedSequenceKeyframes, (keyframe) => JSON.stringify(keyframe.nodePath.nodePath))) {
             const [firstSequenceKeyframe] = keyframeGroup;
             if (!firstSequenceKeyframe) {
                 continue;
@@ -318,10 +376,16 @@ const saveSequencePropsHandler = ({ input: { edits, movedKeyframes = { sequenceK
         });
     }
     (0, undo_stack_1.printUndoHint)(logLevel);
-    const results = edits.map((edit) => {
+    const statusTargets = [
+        ...new Map([...edits, ...keyframesToAdd].map((target) => [
+            JSON.stringify(target.nodePath),
+            target,
+        ])).values(),
+    ];
+    const results = statusTargets.map((target) => {
         const { absolutePath } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
             remotionRoot,
-            fileName: edit.fileName,
+            fileName: target.fileName,
             action: 'modify',
         });
         const output = outputByPath.get(absolutePath);
@@ -330,22 +394,26 @@ const saveSequencePropsHandler = ({ input: { edits, movedKeyframes = { sequenceK
         }
         const newStatus = (0, can_update_sequence_props_1.computeSequencePropsStatusFromContent)({
             fileContents: output,
-            keys: (0, studio_shared_1.getAllSchemaKeys)(edit.schema),
-            assetKeys: (0, studio_shared_1.getAssetSchemaKeys)(edit.schema),
-            nodePath: edit.nodePath.nodePath,
+            keys: (0, studio_shared_1.getAllSchemaKeys)(target.schema),
+            assetKeys: (0, studio_shared_1.getAssetSchemaKeys)(target.schema),
+            nodePath: target.nodePath.nodePath,
             componentIdentity: null,
             effects: [],
-            videoConfigValues: edit.nodePath.videoConfigValues,
+            videoConfigValues: target.nodePath.videoConfigValues,
         });
         return {
-            fileName: edit.fileName,
-            nodePath: edit.nodePath,
+            fileName: target.fileName,
+            nodePath: target.nodePath,
             props: newStatus.props,
         };
     });
+    const firstResult = results[0];
+    if (!firstResult) {
+        throw new Error('Could not compute sequence prop edit status');
+    }
     return {
         canUpdate: true,
-        props: results[0].props,
+        props: firstResult.props,
         results,
     };
 });

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.495",
+	"version": "4.0.497",
 	"description": "Run a Remotion Studio with a server backend",
 	"main": "dist",
 	"scripts": {
@@ -30,11 +30,11 @@
 		"kiwi-schema": "0.5.0",
 		"semver": "7.5.3",
 		"prettier": "3.8.1",
-		"remotion": "4.0.495",
+		"remotion": "4.0.497",
 		"recast": "0.23.11",
-		"@remotion/bundler": "4.0.495",
-		"@remotion/renderer": "4.0.495",
-		"@remotion/studio-shared": "4.0.495",
+		"@remotion/bundler": "4.0.497",
+		"@remotion/renderer": "4.0.497",
+		"@remotion/studio-shared": "4.0.497",
 		"memfs": "3.4.3",
 		"open": "8.4.2"
 	},
@@ -42,7 +42,7 @@
 		"ast-types": "0.16.1",
 		"react": "19.2.3",
 		"@types/semver": "7.5.3",
-		"@remotion/eslint-config-internal": "4.0.495",
+		"@remotion/eslint-config-internal": "4.0.497",
 		"eslint": "9.19.0",
 		"@types/node": "20.12.14",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"

package/dist/preview-server/routes/delete-effect-keyframe.d.ts

@@ -1,3 +0,0 @@
-import type { DeleteEffectKeyframeRequest, DeleteEffectKeyframeResponse } from '@remotion/studio-shared';
-import type { ApiHandler } from '../api-types';
-export declare const deleteEffectKeyframeHandler: ApiHandler<DeleteEffectKeyframeRequest, DeleteEffectKeyframeResponse>;