@remotion/studio-server 4.0.514 → 4.0.516

package/dist/codemods/delete-jsx-node.d.ts

@@ -1,9 +1,10 @@
 import { deleteJsxElementAtPath, findJsxElementPathForDeletion, getJsxElementTagLabel } from '@remotion/studio-codemods';
 import type { SequenceNodePath } from 'remotion';
 export { deleteJsxElementAtPath, findJsxElementPathForDeletion, getJsxElementTagLabel, };
-export declare const deleteJsxNodes: ({ input, nodePaths, prettierConfigOverride, }: {
+export declare const deleteJsxNodes: ({ input, nodePaths, onFormatFile, prettierConfigOverride, }: {
     input: string;
     nodePaths: SequenceNodePath[];
+    onFormatFile: ((stage: "complete" | "start") => void) | null;
     prettierConfigOverride?: Record<string, unknown> | null | undefined;
 }) => Promise<{
     output: string;

package/dist/codemods/delete-jsx-node.js

@@ -6,13 +6,18 @@ Object.defineProperty(exports, "deleteJsxElementAtPath", { enumerable: true, get
 Object.defineProperty(exports, "findJsxElementPathForDeletion", { enumerable: true, get: function () { return studio_codemods_1.findJsxElementPathForDeletion; } });
 Object.defineProperty(exports, "getJsxElementTagLabel", { enumerable: true, get: function () { return studio_codemods_1.getJsxElementTagLabel; } });
 const format_file_content_1 = require("./format-file-content");
-const deleteJsxNodes = ({ input, nodePaths, prettierConfigOverride, }) => (0, studio_codemods_1.deleteJsxNodes)({
+const deleteJsxNodes = ({ input, nodePaths, onFormatFile, prettierConfigOverride, }) => (0, studio_codemods_1.deleteJsxNodes)({
     input,
     nodePaths,
-    formatFile: ({ contents, prettierConfigOverride: override }) => (0, format_file_content_1.formatFileContent)({
-        input: contents,
-        prettierConfigOverride: override,
-    }),
+    formatFile: async ({ contents, prettierConfigOverride: override }) => {
+        onFormatFile === null || onFormatFile === void 0 ? void 0 : onFormatFile('start');
+        const result = await (0, format_file_content_1.formatFileContent)({
+            input: contents,
+            prettierConfigOverride: override,
+        });
+        onFormatFile === null || onFormatFile === void 0 ? void 0 : onFormatFile('complete');
+        return result;
+    },
     prettierConfigOverride,
 });
 exports.deleteJsxNodes = deleteJsxNodes;

package/dist/codemods/duplicate-jsx-node.d.ts

@@ -1,6 +1,6 @@
-import type { SequenceNodePathRemapping } from '@remotion/studio-shared';
+import { duplicateJsxElementAtPath } from '@remotion/studio-codemods';
 import type { SequenceNodePath } from 'remotion';
-export declare const duplicateJsxElementAtPath: (jsxPath: import("ast-types/lib/node-path").NodePath<N, V>) => void;
+export { duplicateJsxElementAtPath };
 export declare const duplicateJsxNode: ({ input, nodePath, prettierConfigOverride, }: {
     input: string;
     nodePath: SequenceNodePath;
@@ -10,5 +10,5 @@ export declare const duplicateJsxNode: ({ input, nodePath, prettierConfigOverrid
     formatted: boolean;
     nodeLabel: string;
     logLine: number;
-    nodePathRemappings: SequenceNodePathRemapping[];
+    nodePathRemappings: import("@remotion/studio-shared").SequenceNodePathRemapping[];
 }>;

package/dist/codemods/duplicate-jsx-node.js

@@ -1,319 +1,16 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.duplicateJsxNode = exports.duplicateJsxElementAtPath = void 0;
-const types_1 = require("@babel/types");
-const recast = __importStar(require("recast"));
-const delete_jsx_node_1 = require("./delete-jsx-node");
+const studio_codemods_1 = require("@remotion/studio-codemods");
+Object.defineProperty(exports, "duplicateJsxElementAtPath", { enumerable: true, get: function () { return studio_codemods_1.duplicateJsxElementAtPath; } });
 const format_file_content_1 = require("./format-file-content");
-const get_node_path_remappings_1 = require("./get-node-path-remappings");
-const parse_ast_1 = require("./parse-ast");
-const { namedTypes } = recast.types;
-const makeFragment = (first, second) => ({
-    type: 'JSXFragment',
-    openingFragment: { type: 'JSXOpeningFragment' },
-    closingFragment: { type: 'JSXClosingFragment' },
-    children: [first, second],
+const duplicateJsxNode = ({ input, nodePath, prettierConfigOverride, }) => (0, studio_codemods_1.duplicateJsxNode)({
+    input,
+    nodePath,
+    formatFile: ({ contents, prettierConfigOverride: override }) => (0, format_file_content_1.formatFileContent)({
+        input: contents,
+        prettierConfigOverride: override,
+    }),
+    prettierConfigOverride,
 });
-const uniquifyNamePropOnClone = (clone) => {
-    for (const attr of clone.openingElement.attributes) {
-        if (attr.type !== 'JSXAttribute' || attr.name.type !== 'JSXIdentifier') {
-            continue;
-        }
-        if (attr.name.name !== 'name') {
-            continue;
-        }
-        if (!attr.value) {
-            continue;
-        }
-        if (attr.value.type === 'StringLiteral') {
-            attr.value.value = `${attr.value.value}-copy`;
-            return;
-        }
-        if (attr.value.type === 'JSXExpressionContainer' &&
-            attr.value.expression.type === 'StringLiteral') {
-            attr.value.expression.value = `${attr.value.expression.value}-copy`;
-            return;
-        }
-    }
-};
-const duplicateInLogicalExpression = (parent, node, clone) => {
-    const frag = makeFragment(node, clone);
-    if (parent.left === node) {
-        parent.left = frag;
-        return true;
-    }
-    if (parent.right === node) {
-        parent.right = frag;
-        return true;
-    }
-    return false;
-};
-const duplicateInConditionalExpression = (parent, node, clone) => {
-    const frag = makeFragment(node, clone);
-    if (parent.consequent === node) {
-        parent.consequent = frag;
-        return true;
-    }
-    if (parent.alternate === node) {
-        parent.alternate = frag;
-        return true;
-    }
-    return false;
-};
-const duplicateInArrowFunctionExpression = (parent, node, clone) => {
-    const frag = makeFragment(node, clone);
-    if (parent.body === node) {
-        parent.body = frag;
-        return true;
-    }
-    return false;
-};
-const duplicateInReturnStatement = (parent, node, clone) => {
-    const frag = makeFragment(node, clone);
-    if (parent.argument === node) {
-        parent.argument = frag;
-        return true;
-    }
-    return false;
-};
-const duplicateInCallExpression = (parent, node, clone) => {
-    const idx = parent.arguments.indexOf(node);
-    if (idx !== -1) {
-        parent.arguments.splice(idx + 1, 0, clone);
-        return true;
-    }
-    return false;
-};
-const duplicateInOptionalCallExpression = (parent, node, clone) => {
-    const idx = parent.arguments.indexOf(node);
-    if (idx !== -1) {
-        parent.arguments.splice(idx + 1, 0, clone);
-        return true;
-    }
-    return false;
-};
-const duplicateInArrayExpression = (parent, node, clone) => {
-    const idx = parent.elements.indexOf(node);
-    if (idx !== -1) {
-        parent.elements.splice(idx + 1, 0, clone);
-        return true;
-    }
-    return false;
-};
-const duplicateInAssignmentExpression = (parent, node, clone) => {
-    const frag = makeFragment(node, clone);
-    if (parent.right === node) {
-        parent.right = frag;
-        return true;
-    }
-    return false;
-};
-const duplicateInVariableDeclarator = (parent, node, clone) => {
-    const frag = makeFragment(node, clone);
-    if (parent.init === node) {
-        parent.init = frag;
-        return true;
-    }
-    return false;
-};
-const duplicateInExportDefaultDeclaration = (parent, node, clone) => {
-    const frag = makeFragment(node, clone);
-    if (parent.declaration === node) {
-        parent.declaration =
-            frag;
-        return true;
-    }
-    return false;
-};
-const duplicateInSequenceExpression = (parent, node, clone) => {
-    const idx = parent.expressions.indexOf(node);
-    if (idx !== -1) {
-        parent.expressions.splice(idx + 1, 0, clone);
-        return true;
-    }
-    return false;
-};
-const duplicateInNewExpression = (parent, node, clone) => {
-    const idx = parent.arguments.indexOf(node);
-    if (idx !== -1) {
-        parent.arguments.splice(idx + 1, 0, clone);
-        return true;
-    }
-    return false;
-};
-const duplicateInExpressionStatement = (parent, node, clone) => {
-    const frag = makeFragment(node, clone);
-    if (parent.expression === node) {
-        parent.expression = frag;
-        return true;
-    }
-    return false;
-};
-const duplicateInParenthesizedExpression = (parent, node, clone) => {
-    const frag = makeFragment(node, clone);
-    if (parent.expression === node) {
-        parent.expression = frag;
-        return true;
-    }
-    return false;
-};
-const duplicateInJSXExpressionContainer = (parent, node, clone) => {
-    const frag = makeFragment(node, clone);
-    if (parent.expression === node) {
-        parent.expression = frag;
-        return true;
-    }
-    return false;
-};
-const duplicateInTSAsExpression = (parent, node, clone) => {
-    const frag = makeFragment(node, clone);
-    if (parent.expression === node) {
-        parent.expression = frag;
-        return true;
-    }
-    return false;
-};
-const duplicateInJSXParentChildren = (parent, node, clone) => {
-    const idx = parent.children.indexOf(node);
-    if (idx !== -1) {
-        parent.children.splice(idx + 1, 0, clone);
-        return true;
-    }
-    return false;
-};
-const insertDuplicateForParent = (parentNode, node, clone) => {
-    if (namedTypes.LogicalExpression.check(parentNode)) {
-        return duplicateInLogicalExpression(parentNode, node, clone);
-    }
-    if (namedTypes.ConditionalExpression.check(parentNode)) {
-        return duplicateInConditionalExpression(parentNode, node, clone);
-    }
-    if (namedTypes.ArrowFunctionExpression.check(parentNode)) {
-        return duplicateInArrowFunctionExpression(parentNode, node, clone);
-    }
-    if (namedTypes.ReturnStatement.check(parentNode)) {
-        return duplicateInReturnStatement(parentNode, node, clone);
-    }
-    if (namedTypes.CallExpression.check(parentNode)) {
-        return duplicateInCallExpression(parentNode, node, clone);
-    }
-    if (parentNode.type === 'OptionalCallExpression') {
-        return duplicateInOptionalCallExpression(parentNode, node, clone);
-    }
-    if (namedTypes.ArrayExpression.check(parentNode)) {
-        return duplicateInArrayExpression(parentNode, node, clone);
-    }
-    if (namedTypes.AssignmentExpression.check(parentNode)) {
-        return duplicateInAssignmentExpression(parentNode, node, clone);
-    }
-    if (namedTypes.VariableDeclarator.check(parentNode)) {
-        return duplicateInVariableDeclarator(parentNode, node, clone);
-    }
-    if (namedTypes.ExportDefaultDeclaration.check(parentNode)) {
-        return duplicateInExportDefaultDeclaration(parentNode, node, clone);
-    }
-    if (namedTypes.SequenceExpression.check(parentNode)) {
-        return duplicateInSequenceExpression(parentNode, node, clone);
-    }
-    if (namedTypes.NewExpression.check(parentNode)) {
-        return duplicateInNewExpression(parentNode, node, clone);
-    }
-    if (namedTypes.ExpressionStatement.check(parentNode)) {
-        return duplicateInExpressionStatement(parentNode, node, clone);
-    }
-    if (namedTypes.ParenthesizedExpression.check(parentNode)) {
-        return duplicateInParenthesizedExpression(parentNode, node, clone);
-    }
-    if (namedTypes.JSXExpressionContainer.check(parentNode)) {
-        return duplicateInJSXExpressionContainer(parentNode, node, clone);
-    }
-    if (namedTypes.TSAsExpression.check(parentNode)) {
-        return duplicateInTSAsExpression(parentNode, node, clone);
-    }
-    if (namedTypes.JSXElement.check(parentNode)) {
-        return duplicateInJSXParentChildren(parentNode, node, clone);
-    }
-    if (namedTypes.JSXFragment.check(parentNode)) {
-        return duplicateInJSXParentChildren(parentNode, node, clone);
-    }
-    return false;
-};
-const duplicateJsxElementAtPath = (jsxPath) => {
-    const { node, parentPath } = jsxPath;
-    if (!parentPath) {
-        throw new Error('Cannot duplicate JSX element with no parent');
-    }
-    const jsxNode = node;
-    const clone = (0, types_1.cloneNode)(jsxNode, true);
-    uniquifyNamePropOnClone(clone);
-    if (insertDuplicateForParent(parentPath.node, jsxNode, clone)) {
-        return;
-    }
-    jsxPath.replace(makeFragment(jsxNode, clone));
-};
-exports.duplicateJsxElementAtPath = duplicateJsxElementAtPath;
-const duplicateJsxNode = async ({ input, nodePath, prettierConfigOverride, }) => {
-    var _a, _b;
-    var _c, _d;
-    const ast = (0, parse_ast_1.parseAst)(input);
-    const capturedNodePaths = (0, get_node_path_remappings_1.captureJsxNodePaths)(ast);
-    const jsxPath = (0, delete_jsx_node_1.findJsxElementPathForDeletion)(ast, nodePath);
-    if (!jsxPath) {
-        throw new Error('Could not find a JSX element at the specified location to duplicate');
-    }
-    const jsxElement = jsxPath.node;
-    const nodeLabel = (0, delete_jsx_node_1.getJsxElementTagLabel)(jsxElement);
-    const logLine = (_d = (_c = (_a = jsxElement.openingElement.loc) === null || _a === void 0 ? void 0 : _a.start.line) !== null && _c !== void 0 ? _c : (_b = jsxElement.loc) === null || _b === void 0 ? void 0 : _b.start.line) !== null && _d !== void 0 ? _d : 1;
-    (0, exports.duplicateJsxElementAtPath)(jsxPath);
-    const finalFile = (0, parse_ast_1.serializeAst)(ast);
-    const { output, formatted } = await (0, format_file_content_1.formatFileContent)({
-        input: finalFile,
-        prettierConfigOverride,
-    });
-    const { nodePathRemappings } = (0, get_node_path_remappings_1.getNodePathRemappings)({
-        ast,
-        captured: capturedNodePaths,
-        output,
-    });
-    return {
-        output,
-        formatted,
-        nodeLabel,
-        logLine,
-        nodePathRemappings,
-    };
-};
 exports.duplicateJsxNode = duplicateJsxNode;

package/dist/helpers/open-file-for-writing-without-symlinks.d.ts

@@ -0,0 +1,4 @@
+export declare const openFileForWritingWithoutSymlinks: ({ rootDirectory, absolutePath, }: {
+    rootDirectory: string;
+    absolutePath: string;
+}) => number;

package/dist/helpers/open-file-for-writing-without-symlinks.js

@@ -0,0 +1,52 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.openFileForWritingWithoutSymlinks = void 0;
+const node_fs_1 = __importDefault(require("node:fs"));
+const node_path_1 = __importDefault(require("node:path"));
+const assertNoSymlinks = ({ rootDirectory, absolutePath, }) => {
+    const relativePath = node_path_1.default.relative(rootDirectory, absolutePath);
+    if (relativePath === '..' ||
+        relativePath.startsWith(`..${node_path_1.default.sep}`) ||
+        node_path_1.default.isAbsolute(relativePath)) {
+        throw new Error(`Not allowed to write to ${relativePath}`);
+    }
+    let pathToCheck = rootDirectory;
+    for (const segment of relativePath.split(node_path_1.default.sep)) {
+        pathToCheck = node_path_1.default.join(pathToCheck, segment);
+        try {
+            if (node_fs_1.default.lstatSync(pathToCheck).isSymbolicLink()) {
+                throw new Error(`Not allowed to write through symbolic link ${pathToCheck}`);
+            }
+        }
+        catch (error) {
+            if (error.code === 'ENOENT') {
+                break;
+            }
+            throw error;
+        }
+    }
+};
+const openFileForWritingWithoutSymlinks = ({ rootDirectory, absolutePath, }) => {
+    const resolvedRootDirectory = node_path_1.default.resolve(rootDirectory);
+    const resolvedAbsolutePath = node_path_1.default.resolve(absolutePath);
+    assertNoSymlinks({
+        rootDirectory: resolvedRootDirectory,
+        absolutePath: resolvedAbsolutePath,
+    });
+    node_fs_1.default.mkdirSync(node_path_1.default.dirname(resolvedAbsolutePath), { recursive: true });
+    assertNoSymlinks({
+        rootDirectory: resolvedRootDirectory,
+        absolutePath: resolvedAbsolutePath,
+    });
+    const flags = process.platform === 'win32'
+        ? 'w'
+        : node_fs_1.default.constants.O_CREAT |
+            node_fs_1.default.constants.O_WRONLY |
+            node_fs_1.default.constants.O_TRUNC |
+            node_fs_1.default.constants.O_NOFOLLOW;
+    return node_fs_1.default.openSync(resolvedAbsolutePath, flags);
+};
+exports.openFileForWritingWithoutSymlinks = openFileForWritingWithoutSymlinks;

package/dist/helpers/video-config-values.js

@@ -36,15 +36,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getVideoConfigIdentifierValues = void 0;
 const recast = __importStar(require("recast"));
 const getVideoConfigIdentifierValues = ({ ast, videoConfigValues, }) => {
-    if (videoConfigValues === null) {
-        return {};
-    }
     const candidates = new Map();
     const otherDeclarations = new Set();
+    const addCandidate = (identifier, value) => {
+        if (candidates.has(identifier) || otherDeclarations.has(identifier)) {
+            candidates.delete(identifier);
+            otherDeclarations.add(identifier);
+            return;
+        }
+        candidates.set(identifier, value);
+    };
     recast.types.visit(ast, {
         visitVariableDeclarator(path) {
             const { id, init } = path.node;
-            const isVideoConfigDeclaration = id.type === 'ObjectPattern' &&
+            const isVideoConfigDeclaration = videoConfigValues !== null &&
+                id.type === 'ObjectPattern' &&
                 (init === null || init === void 0 ? void 0 : init.type) === 'CallExpression' &&
                 init.callee.type === 'Identifier' &&
                 init.callee.name === 'useVideoConfig' &&
@@ -66,12 +72,25 @@ const getVideoConfigIdentifierValues = ({ ast, videoConfigValues, }) => {
                     }
                     const value = videoConfigValues[configKey];
                     if (Number.isFinite(value)) {
-                        candidates.set(property.value.name, value);
+                        addCandidate(property.value.name, value);
                     }
                 }
             }
             else if (id.type === 'Identifier') {
-                otherDeclarations.add(id.name);
+                const declaration = path.parentPath.node;
+                const numericConstant = declaration.type === 'VariableDeclaration' &&
+                    declaration.kind === 'const' &&
+                    (init === null || init === void 0 ? void 0 : init.type) === 'NumericLiteral' &&
+                    Number.isFinite(init.value)
+                    ? init.value
+                    : null;
+                if (numericConstant !== null) {
+                    addCandidate(id.name, numericConstant);
+                }
+                else {
+                    candidates.delete(id.name);
+                    otherDeclarations.add(id.name);
+                }
             }
             this.traverse(path);
         },

package/dist/preview-server/hmr-timing.d.ts

@@ -0,0 +1,5 @@
+export declare const logHmrTiming: ({ detail, logLevel, stage, }: {
+    detail: string | null;
+    logLevel: "error" | "info" | "trace" | "verbose" | "warn";
+    stage: string;
+}) => void;

package/dist/preview-server/hmr-timing.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.logHmrTiming = void 0;
+const renderer_1 = require("@remotion/renderer");
+const logHmrTiming = ({ detail, logLevel, stage, }) => {
+    const detailSuffix = detail ? ` ${detail}` : '';
+    renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[hmr-timing] epoch=${Date.now()} monotonic=${performance.now().toFixed(3)} stage=${stage}${detailSuffix}`);
+};
+exports.logHmrTiming = logHmrTiming;

package/dist/preview-server/hot-middleware/index.js

@@ -7,14 +7,23 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.setupWebpackHmr = void 0;
 const renderer_1 = require("@remotion/renderer");
+const hmr_timing_1 = require("../hmr-timing");
 const setupWebpackHmr = (compiler, logLevel, liveEventsServer) => {
     let latestStats = null;
     const publishHmr = (hmrEvent) => {
         liveEventsServer.sendEventToClient({ type: 'hmr', hmrEvent });
     };
     compiler.hooks.invalid.tap('remotion', onInvalid);
+    compiler.hooks.watchRun.tap('remotion-hmr-timing', () => {
+        (0, hmr_timing_1.logHmrTiming)({ detail: null, logLevel, stage: 'compiler-watch-run' });
+    });
     compiler.hooks.done.tap('remotion', onDone);
-    function onInvalid() {
+    function onInvalid(fileName, changeTime) {
+        (0, hmr_timing_1.logHmrTiming)({
+            detail: `file=${fileName !== null && fileName !== void 0 ? fileName : 'manual'} changeTime=${changeTime}`,
+            logLevel,
+            stage: 'compiler-invalid',
+        });
         latestStats = null;
         renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, 'Building...');
         publishHmr({
@@ -22,9 +31,15 @@ const setupWebpackHmr = (compiler, logLevel, liveEventsServer) => {
         });
     }
     function onDone(statsResult) {
+        (0, hmr_timing_1.logHmrTiming)({
+            detail: `reportedBuildDuration=${statsResult.endTime - statsResult.startTime}ms`,
+            logLevel,
+            stage: 'compiler-done',
+        });
         // Keep hold of latest stats so they can be propagated to new clients
         latestStats = statsResult;
         publishStats('built', latestStats, publishHmr);
+        (0, hmr_timing_1.logHmrTiming)({ detail: null, logLevel, stage: 'hmr-stats-published' });
     }
     liveEventsServer.addNewClientListener(() => {
         if (latestStats) {

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

@@ -775,6 +775,10 @@ const getPropsStatus = (jsxElement, ast, videoConfigValues, assetKeys) => {
     const props = {};
     for (const attr of jsxElement.attributes) {
         if (attr.type === 'JSXSpreadAttribute') {
+            // The spread may override every prop written before it
+            for (const key of Object.keys(props)) {
+                props[key] = computedStatus();
+            }
             continue;
         }
         if (attr.name.type === 'JSXNamespacedName') {
@@ -1113,14 +1117,28 @@ const getBorderRadiusShorthandStatus = ({ propValue, ast, videoConfigValues, })
     }
     return computedStatus();
 };
-const getNestedPropStatus = ({ jsxElement, ast, parentKey, childKey, videoConfigValues, allowSpecialValues, }) => {
-    const attr = jsxElement.attributes.find((a) => a.type !== 'JSXSpreadAttribute' &&
+const getNestedPropStatus = ({ jsxElement, ast, parentKey, childKey, videoConfigValues, allowSpecialValues, lastSpreadIndex, }) => {
+    const attrIndex = jsxElement.attributes.findIndex((a) => a.type !== 'JSXSpreadAttribute' &&
         a.name.type !== 'JSXNamespacedName' &&
         a.name.name === parentKey);
-    if (!attr || !attr.value) {
+    const attr = attrIndex === -1
+        ? undefined
+        : jsxElement.attributes[attrIndex];
+    if (attrIndex !== -1 && attrIndex < lastSpreadIndex) {
+        // A later spread may replace the whole parent object
+        return computedStatus();
+    }
+    if (!attr) {
+        if (lastSpreadIndex !== -1) {
+            // The spread may provide the parent object
+            return computedStatus();
+        }
         // Parent attribute doesn't exist, nested prop can be added
         return staticStatus(undefined, null);
     }
+    if (!attr.value) {
+        return staticStatus(undefined, null);
+    }
     if (attr.value.type !== 'JSXExpressionContainer') {
         return computedStatus();
     }
@@ -1210,6 +1228,13 @@ const computeEffectsForJsx = ({ ast, jsxElement, effects, videoConfigValues, })
     }));
 };
 const computeSequenceOnlyPropsRecord = ({ jsxElement, jsxElementNode, ast, keys, assetKeys, videoConfigValues, }) => {
+    // A JSX spread attribute ({...props}) is invisible to the parser and may
+    // set or override every prop that is not explicitly written after it.
+    // Affected props are treated as computed so the runtime values pass
+    // through untouched and Visual Mode does not offer to edit them.
+    // Attributes written after the last spread win at runtime and can be
+    // parsed as usual.
+    const lastSpreadIndex = jsxElement.attributes.reduce((highest, attr, index) => attr.type === 'JSXSpreadAttribute' ? index : highest, -1);
     const allProps = getPropsStatus(jsxElement, ast, videoConfigValues, assetKeys);
     const filteredProps = {};
     const mixedBorderRadius = hasMixedBorderRadiusRepresentation(jsxElement);
@@ -1221,6 +1246,14 @@ const computeSequenceOnlyPropsRecord = ({ jsxElement, jsxElementNode, ast, keys,
             continue;
         }
         if (key === 'children') {
+            const childrenAttrIndex = jsxElement.attributes.findIndex((attr) => attr.type === 'JSXAttribute' &&
+                attr.name.type === 'JSXIdentifier' &&
+                attr.name.name === 'children');
+            if (childrenAttrIndex !== -1 && childrenAttrIndex < lastSpreadIndex) {
+                // A later spread may override the children attribute
+                filteredProps[key] = computedStatus();
+                continue;
+            }
             const staticChildrenAttribute = (0, exports.getStaticJsxChildrenAttribute)(jsxElement);
             if (staticChildrenAttribute) {
                 filteredProps[key] = staticStatus(staticChildrenAttribute.value, null);
@@ -1230,6 +1263,14 @@ const computeSequenceOnlyPropsRecord = ({ jsxElement, jsxElementNode, ast, keys,
                 filteredProps[key] = computedStatus();
                 continue;
             }
+            // JSX element children are compiled after any spread and win over
+            // it. Only if the element body is empty may the spread provide the
+            // children.
+            const hasMeaningfulJsxChildren = jsxElementNode.children.some((candidate) => !(candidate.type === 'JSXText' && candidate.value.trim() === ''));
+            if (!hasMeaningfulJsxChildren && lastSpreadIndex !== -1) {
+                filteredProps[key] = computedStatus();
+                continue;
+            }
             const staticTextContent = (0, exports.getStaticJsxTextContent)(jsxElementNode);
             filteredProps[key] = staticTextContent
                 ? staticStatus(staticTextContent.value, null)
@@ -1245,11 +1286,16 @@ const computeSequenceOnlyPropsRecord = ({ jsxElement, jsxElementNode, ast, keys,
                 childKey: key.slice(dotIndex + 1),
                 videoConfigValues,
                 allowSpecialValues: assetKeys.includes(key),
+                lastSpreadIndex,
             });
         }
         else if (key in allProps) {
             filteredProps[key] = allProps[key];
         }
+        else if (lastSpreadIndex !== -1) {
+            // The spread may provide this prop
+            filteredProps[key] = computedStatus();
+        }
         else {
             filteredProps[key] = staticStatus(undefined, null);
         }

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

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