@remotion/studio-server 4.0.476 → 4.0.477

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

@@ -515,10 +515,15 @@ const createStringAttribute = (name, value) => {
 const createBooleanAttribute = (name, value) => {
     return recast.types.builders.jsxAttribute(recast.types.builders.jsxIdentifier(name), recast.types.builders.jsxExpressionContainer(recast.types.builders.booleanLiteral(value)));
 };
-const createPositionAbsoluteStyleAttribute = () => {
-    return recast.types.builders.jsxAttribute(recast.types.builders.jsxIdentifier('style'), recast.types.builders.jsxExpressionContainer(recast.types.builders.objectExpression([
+const formatTranslateValue = ({ x, y }) => `${x}px ${y}px`;
+const createPositionAbsoluteStyleAttribute = (position) => {
+    const properties = [
         recast.types.builders.objectProperty(recast.types.builders.identifier('position'), recast.types.builders.stringLiteral('absolute')),
-    ])));
+    ];
+    if (position) {
+        properties.push(recast.types.builders.objectProperty(recast.types.builders.identifier('translate'), recast.types.builders.stringLiteral(formatTranslateValue(position))));
+    }
+    return recast.types.builders.jsxAttribute(recast.types.builders.jsxIdentifier('style'), recast.types.builders.jsxExpressionContainer(recast.types.builders.objectExpression(properties)));
 };
 const createStaticFileSrcAttribute = ({ staticFileLocalName, src, }) => {
     return recast.types.builders.jsxAttribute(recast.types.builders.jsxIdentifier('src'), recast.types.builders.jsxExpressionContainer(recast.types.builders.callExpression(recast.types.builders.identifier(staticFileLocalName), [recast.types.builders.stringLiteral(src)])));
@@ -535,25 +540,27 @@ const createComponentProp = ({ name, value, }) => {
 const createStringSrcAttribute = (src) => {
     return recast.types.builders.jsxAttribute(recast.types.builders.jsxIdentifier('src'), recast.types.builders.stringLiteral(src));
 };
-const createSolidElement = ({ localName, width, height, }) => {
+const createSolidElement = ({ localName, width, height, position, }) => {
     return recast.types.builders.jsxElement(recast.types.builders.jsxOpeningElement(recast.types.builders.jsxIdentifier(localName), [
         createNumberAttribute('width', width),
         createNumberAttribute('height', height),
-        createPositionAbsoluteStyleAttribute(),
+        createPositionAbsoluteStyleAttribute(position),
     ], true), null, []);
 };
-const createComponentElement = ({ localName, props, }) => {
+const createComponentElement = ({ localName, props, position, }) => {
     return recast.types.builders.jsxElement(recast.types.builders.jsxOpeningElement(recast.types.builders.jsxIdentifier(localName), [
         ...props.map(createComponentProp),
-        createPositionAbsoluteStyleAttribute(),
+        createPositionAbsoluteStyleAttribute(position),
     ], true), null, []);
 };
-const createAssetElement = ({ addPositionStyle, localName, staticFileLocalName, src, dimensions, }) => {
+const createAssetElement = ({ addPositionStyle, 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 }),
-        ...(addPositionStyle ? [createPositionAbsoluteStyleAttribute()] : []),
+        ...(addPositionStyle
+            ? [createPositionAbsoluteStyleAttribute(position)]
+            : []),
         ...(dimensions
             ? [
                 createNumberAttribute('width', dimensions.width),
@@ -1007,6 +1014,7 @@ const createInsertableJsxElement = ({ ast, element, }) => {
             localName: solidLocalName,
             width: element.width,
             height: element.height,
+            position: element.position,
         });
     }
     if (element.type === 'component') {
@@ -1019,6 +1027,7 @@ const createInsertableJsxElement = ({ ast, element, }) => {
         return createComponentElement({
             localName: componentLocalName,
             props: element.props,
+            position: element.position,
         });
     }
     if (element.type === 'asset') {
@@ -1048,6 +1057,7 @@ const createInsertableJsxElement = ({ ast, element, }) => {
             staticFileLocalName,
             src: element.src,
             dimensions: element.dimensions,
+            position: element.position,
         });
     }
     throw new Error('Unsupported element type');

package/dist/preview-server/jsx-component-identity.d.ts

@@ -0,0 +1,12 @@
+import type { File, JSXOpeningElement } from '@babel/types';
+export declare class JsxElementIdentityMismatchError extends Error {
+    constructor();
+}
+export declare const getJsxComponentIdentity: ({ ast, jsxElement, }: {
+    ast: File;
+    jsxElement: JSXOpeningElement;
+}) => string | null;
+export declare const jsxComponentIdentitiesMatch: ({ expected, actual, }: {
+    expected: string | null;
+    actual: string | null;
+}) => boolean;

package/dist/preview-server/jsx-component-identity.js

@@ -0,0 +1,126 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.jsxComponentIdentitiesMatch = exports.getJsxComponentIdentity = exports.JsxElementIdentityMismatchError = void 0;
+const imports_1 = require("../helpers/imports");
+class JsxElementIdentityMismatchError extends Error {
+    constructor() {
+        super('JSX element identity changed');
+    }
+}
+exports.JsxElementIdentityMismatchError = JsxElementIdentityMismatchError;
+const jsxMemberToString = (expr) => {
+    if (expr.type === 'JSXIdentifier') {
+        return expr.name;
+    }
+    return `${jsxMemberToString(expr.object)}.${expr.property.name}`;
+};
+const getJsxRootIdentifier = (expr) => {
+    if (expr.type === 'JSXIdentifier') {
+        return expr;
+    }
+    return getJsxRootIdentifier(expr.object);
+};
+const getTagName = (node) => {
+    if (node.name.type === 'JSXIdentifier') {
+        return node.name.name;
+    }
+    if (node.name.type === 'JSXMemberExpression') {
+        return jsxMemberToString(node.name);
+    }
+    return null;
+};
+const getMemberPath = (tagName) => {
+    const dotIndex = tagName.indexOf('.');
+    return dotIndex === -1 ? '' : tagName.slice(dotIndex + 1);
+};
+const getMemberPathAfterImportName = ({ tagName, importName, }) => {
+    const parts = tagName.split('.');
+    const importNameIndex = parts.indexOf(importName);
+    if (importNameIndex === -1) {
+        return getMemberPath(tagName);
+    }
+    return parts.slice(importNameIndex + 1).join('.');
+};
+const sourcePathToIdentityPrefix = (sourcePath) => {
+    if (sourcePath === 'remotion') {
+        return 'dev.remotion.remotion';
+    }
+    if (sourcePath.startsWith('@remotion/')) {
+        const packageName = sourcePath
+            .slice('@remotion/'.length)
+            .replace(/-([a-z])/g, (_, char) => char.toUpperCase());
+        return `dev.remotion.${packageName}`;
+    }
+    return null;
+};
+const makeImportedIdentity = ({ sourcePath, importName, memberPath, }) => {
+    const prefix = sourcePathToIdentityPrefix(sourcePath);
+    if (prefix === null) {
+        return null;
+    }
+    return [prefix, importName, memberPath].filter(Boolean).join('.');
+};
+const getJsxComponentIdentity = ({ ast, jsxElement, }) => {
+    var _a;
+    const tagName = getTagName(jsxElement);
+    if (tagName === null) {
+        return null;
+    }
+    const rootIdentifier = jsxElement.name.type === 'JSXIdentifier'
+        ? jsxElement.name
+        : jsxElement.name.type === 'JSXMemberExpression'
+            ? getJsxRootIdentifier(jsxElement.name)
+            : null;
+    if (rootIdentifier === null) {
+        return tagName;
+    }
+    for (const node of ast.program.body) {
+        if (node.type !== 'ImportDeclaration') {
+            continue;
+        }
+        const sourcePath = String(node.source.value);
+        for (const specifier of node.specifiers) {
+            if (specifier.type === 'ImportSpecifier' &&
+                ((_a = specifier.local) === null || _a === void 0 ? void 0 : _a.name) === rootIdentifier.name) {
+                const importName = (0, imports_1.getImportedName)(specifier);
+                return makeImportedIdentity({
+                    sourcePath,
+                    importName,
+                    memberPath: getMemberPath(tagName),
+                });
+            }
+            if (specifier.type === 'ImportNamespaceSpecifier' &&
+                specifier.local.name === rootIdentifier.name) {
+                const [importName, ...members] = getMemberPath(tagName).split('.');
+                if (!importName) {
+                    return null;
+                }
+                return makeImportedIdentity({
+                    sourcePath,
+                    importName,
+                    memberPath: members.join('.'),
+                });
+            }
+            if (specifier.type === 'ImportDefaultSpecifier' &&
+                specifier.local.name === rootIdentifier.name) {
+                return makeImportedIdentity({
+                    sourcePath,
+                    importName: 'default',
+                    memberPath: getMemberPathAfterImportName({
+                        tagName,
+                        importName: rootIdentifier.name,
+                    }),
+                });
+            }
+        }
+    }
+    return tagName;
+};
+exports.getJsxComponentIdentity = getJsxComponentIdentity;
+const jsxComponentIdentitiesMatch = ({ expected, actual, }) => {
+    if (expected === null) {
+        return true;
+    }
+    return expected === actual;
+};
+exports.jsxComponentIdentitiesMatch = jsxComponentIdentitiesMatch;

package/dist/preview-server/routes/add-sequence-keyframe.js

@@ -74,6 +74,7 @@ const addSequenceKeyframeHandler = ({ input: { fileName, nodePath, key, frame, v
         fileContents: output,
         keys: (0, studio_shared_1.getAllSchemaKeys)(schema),
         nodePath: updatedNodePath,
+        componentIdentity: null,
         effects: [],
     });
     const updatedSubscriptionKey = { ...nodePath, nodePath: updatedNodePath };

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

@@ -10,22 +10,25 @@ export declare const getComputedStatus: (node: Expression, ast: File) => CanUpda
 export declare const findJsxElementAtNodePath: (ast: File, nodePath: SequenceNodePath) => JSXOpeningElement | null;
 export declare const findNodePathForJsxElement: (ast: File, target: JSXOpeningElement) => SequenceNodePath | null;
 export declare const lineColumnToNodePath: (ast: File, targetLine: number) => SequenceNodePath | null;
-export declare const computeSequencePropsStatusFromContent: ({ fileContents, nodePath, keys, effects, }: {
+export declare const computeSequencePropsStatusFromContent: ({ fileContents, nodePath, componentIdentity, keys, effects, }: {
     fileContents: string;
     nodePath: SequenceNodePath;
+    componentIdentity: string | null;
     keys: string[];
     effects: string[][];
 }) => CanUpdateSequencePropsResponseTrue;
-export declare const computeSequencePropsStatus: ({ fileName, nodePath, keys, effects, remotionRoot, }: {
+export declare const computeSequencePropsStatus: ({ fileName, nodePath, componentIdentity, keys, effects, remotionRoot, }: {
     fileName: string;
     nodePath: SequenceNodePath;
+    componentIdentity: string | null;
     keys: string[];
     effects: string[][];
     remotionRoot: string;
 }) => CanUpdateSequencePropsResponseTrue;
-export declare const computeSequencePropsStatusFromFilenameByLine: ({ fileName, line, keys, effects, remotionRoot, logLevel, }: {
+export declare const computeSequencePropsStatusFromFilenameByLine: ({ fileName, line, componentIdentity, keys, effects, remotionRoot, logLevel, }: {
     fileName: string;
     line: number;
+    componentIdentity: string | null;
     keys: string[];
     effects: string[][];
     remotionRoot: string;

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

@@ -43,6 +43,7 @@ const parse_ast_1 = require("../../codemods/parse-ast");
 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 resolve_file_inside_project_1 = require("../../helpers/resolve-file-inside-project");
+const jsx_component_identity_1 = require("../jsx-component-identity");
 const jsx_element_not_found_at_location_error_1 = require("../jsx-element-not-found-at-location-error");
 const can_update_effect_props_1 = require("./can-update-effect-props");
 const staticStatus = (codeValue) => ({
@@ -353,6 +354,25 @@ const getInterpolationKeyframes = (node, ast) => {
     if (node.type === 'TSAsExpression') {
         return getInterpolationKeyframes(node.expression, ast);
     }
+    if (node.type === 'CallExpression' &&
+        node.callee.type === 'Identifier' &&
+        node.callee.name === 'String' &&
+        node.arguments.length === 1 &&
+        node.arguments[0].type !== 'ArgumentPlaceholder' &&
+        node.arguments[0].type !== 'JSXNamespacedName' &&
+        node.arguments[0].type !== 'SpreadElement') {
+        const interpolation = getInterpolationKeyframes(node.arguments[0], ast);
+        if (!interpolation) {
+            return undefined;
+        }
+        return {
+            ...interpolation,
+            keyframes: interpolation.keyframes.map((keyframe) => ({
+                ...keyframe,
+                value: String(keyframe.value),
+            })),
+        };
+    }
     if (node.type !== 'CallExpression') {
         return undefined;
     }
@@ -627,12 +647,18 @@ const computeSequenceOnlyPropsRecord = ({ jsxElement, ast, keys, }) => {
     }
     return filteredProps;
 };
-const computeSequencePropsStatusFromContent = ({ fileContents, nodePath, keys, effects, }) => {
+const computeSequencePropsStatusFromContent = ({ fileContents, nodePath, componentIdentity, keys, effects, }) => {
     const ast = (0, parse_ast_1.parseAst)(fileContents);
     const jsxElement = (0, exports.findJsxElementAtNodePath)(ast, nodePath);
     if (!jsxElement) {
         throw new jsx_element_not_found_at_location_error_1.JsxElementNotFoundAtLocationError();
     }
+    if (!(0, jsx_component_identity_1.jsxComponentIdentitiesMatch)({
+        expected: componentIdentity,
+        actual: (0, jsx_component_identity_1.getJsxComponentIdentity)({ ast, jsxElement }),
+    })) {
+        throw new jsx_component_identity_1.JsxElementIdentityMismatchError();
+    }
     const filteredProps = computeSequenceOnlyPropsRecord({ jsxElement, ast, keys });
     const effectsStatuses = computeEffectsForJsx({ ast, jsxElement, effects });
     return {
@@ -642,7 +668,7 @@ const computeSequencePropsStatusFromContent = ({ fileContents, nodePath, keys, e
     };
 };
 exports.computeSequencePropsStatusFromContent = computeSequencePropsStatusFromContent;
-const computeSequencePropsStatus = ({ fileName, nodePath, keys, effects, remotionRoot, }) => {
+const computeSequencePropsStatus = ({ fileName, nodePath, componentIdentity, keys, effects, remotionRoot, }) => {
     const { absolutePath } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
         remotionRoot,
         fileName,
@@ -652,12 +678,13 @@ const computeSequencePropsStatus = ({ fileName, nodePath, keys, effects, remotio
     return (0, exports.computeSequencePropsStatusFromContent)({
         fileContents,
         nodePath,
+        componentIdentity,
         keys,
         effects,
     });
 };
 exports.computeSequencePropsStatus = computeSequencePropsStatus;
-const computeSequencePropsStatusFromFilenameByLine = ({ fileName, line, keys, effects, remotionRoot, logLevel, }) => {
+const computeSequencePropsStatusFromFilenameByLine = ({ fileName, line, componentIdentity, keys, effects, remotionRoot, logLevel, }) => {
     try {
         const { absolutePath } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
             remotionRoot,
@@ -680,6 +707,7 @@ const computeSequencePropsStatusFromFilenameByLine = ({ fileName, line, keys, ef
             status: (0, exports.computeSequencePropsStatus)({
                 fileName,
                 nodePath: resolvedNodePath,
+                componentIdentity,
                 keys,
                 effects,
                 remotionRoot,

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

@@ -215,6 +215,7 @@ const deleteKeyframes = async ({ sequenceKeyframes, effectKeyframes, clientId, r
             fileContents: output,
             keys: (0, studio_shared_1.getAllSchemaKeys)(keyframe.schema),
             nodePath: keyframe.nodePath.nodePath,
+            componentIdentity: null,
             effects: [],
         });
         return {

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

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

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

@@ -14,7 +14,16 @@ const validateDimension = (name, value) => {
         throw new Error(`${name} must be a positive number`);
     }
 };
+const validatePosition = (position) => {
+    if (position === null) {
+        return;
+    }
+    if (!Number.isFinite(position.x) || !Number.isFinite(position.y)) {
+        throw new Error('Position must be finite');
+    }
+};
 const validateElement = (element) => {
+    validatePosition(element.position);
     if (element.type === 'solid') {
         validateDimension('width', element.width);
         validateDimension('height', element.height);

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

@@ -145,6 +145,7 @@ const saveSequencePropsHandler = ({ input: { edits, clientId, undoLabel, redoLab
             fileContents: output,
             keys: (0, studio_shared_1.getAllSchemaKeys)(edit.schema),
             nodePath: edit.nodePath.nodePath,
+            componentIdentity: null,
             effects: [],
         });
         return {

package/dist/preview-server/routes/subscribe-to-sequence-props.js

@@ -2,12 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.subscribeToSequenceProps = void 0;
 const sequence_props_watchers_1 = require("../sequence-props-watchers");
-const subscribeToSequenceProps = ({ input: { fileName, line, column, nodePath, keys, effects, clientId }, remotionRoot, logLevel, }) => {
+const subscribeToSequenceProps = ({ input: { fileName, line, column, nodePath, componentIdentity, keys, effects, clientId, }, remotionRoot, logLevel, }) => {
     const result = (0, sequence_props_watchers_1.subscribeToSequencePropsWatchers)({
         fileName,
         line,
         column,
         nodePath,
+        componentIdentity,
         keys,
         effects,
         remotionRoot,

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

@@ -77,6 +77,7 @@ const updateSequenceKeyframeSettingsHandler = ({ input: { fileName, nodePath, ke
         fileContents: output,
         keys: (0, studio_shared_1.getAllSchemaKeys)(schema),
         nodePath: updatedNodePath,
+        componentIdentity: null,
         effects: [],
     });
     const updatedSubscriptionKey = { ...nodePath, nodePath: updatedNodePath };

package/dist/preview-server/sequence-props-watchers.d.ts

@@ -1,10 +1,11 @@
 import { type SubscribeToSequencePropsResponse } from '@remotion/studio-shared';
 import type { SequenceNodePath } from 'remotion';
-export declare const subscribeToSequencePropsWatchers: ({ fileName, line, column, nodePath: preferredNodePath, keys, effects, remotionRoot, clientId, logLevel, }: {
+export declare const subscribeToSequencePropsWatchers: ({ fileName, line, column, nodePath: preferredNodePath, componentIdentity, keys, effects, remotionRoot, clientId, logLevel, }: {
     fileName: string;
     line: number;
     column: number;
     nodePath: SequenceNodePath | null;
+    componentIdentity: string | null;
     keys: string[];
     effects: string[][];
     remotionRoot: string;

package/dist/preview-server/sequence-props-watchers.js

@@ -8,42 +8,64 @@ const node_path_1 = __importDefault(require("node:path"));
 const renderer_1 = require("@remotion/renderer");
 const studio_shared_1 = require("@remotion/studio-shared");
 const file_watcher_1 = require("../file-watcher");
+const jsx_component_identity_1 = require("./jsx-component-identity");
 const jsx_element_not_found_at_location_error_1 = require("./jsx-element-not-found-at-location-error");
 const live_events_1 = require("./live-events");
 const node_path_cache_1 = require("./node-path-cache");
 const can_update_sequence_props_1 = require("./routes/can-update-sequence-props");
 const sequencePropsWatchers = {};
-const getSequencePropsStatus = ({ fileName, line, column, preferredNodePath, keys, effects, remotionRoot, logLevel, }) => {
+const getSequencePropsStatus = ({ fileName, line, column, preferredNodePath, componentIdentity, keys, effects, remotionRoot, logLevel, }) => {
     if (preferredNodePath) {
-        const fromNodePath = (0, can_update_sequence_props_1.computeSequencePropsStatus)({
-            fileName,
-            nodePath: preferredNodePath,
-            keys,
-            effects,
-            remotionRoot,
-        });
-        return {
-            status: fromNodePath,
-            nodePath: {
-                absolutePath: node_path_1.default.resolve(remotionRoot, fileName),
+        try {
+            const fromNodePath = (0, can_update_sequence_props_1.computeSequencePropsStatus)({
+                fileName,
                 nodePath: preferredNodePath,
-                sequenceKeys: keys,
-                effectKeys: effects,
-            },
-            success: true,
-        };
+                componentIdentity,
+                keys,
+                effects,
+                remotionRoot,
+            });
+            return {
+                status: fromNodePath,
+                nodePath: {
+                    absolutePath: node_path_1.default.resolve(remotionRoot, fileName),
+                    nodePath: preferredNodePath,
+                    sequenceKeys: keys,
+                    effectKeys: effects,
+                },
+                success: true,
+            };
+        }
+        catch (error) {
+            if (!(error instanceof jsx_component_identity_1.JsxElementIdentityMismatchError ||
+                error instanceof jsx_element_not_found_at_location_error_1.JsxElementNotFoundAtLocationError)) {
+                throw error;
+            }
+        }
     }
     // Try cached nodePath first (handles stale source maps after suppressed rebuilds)
     const cachedNodePath = (0, node_path_cache_1.getCachedNodePath)(fileName, line, column);
     if (cachedNodePath) {
-        const cachedResult = (0, can_update_sequence_props_1.computeSequencePropsStatus)({
-            fileName,
-            nodePath: cachedNodePath,
-            keys,
-            effects,
-            remotionRoot,
-        });
-        if (cachedResult.canUpdate) {
+        const cachedResult = (() => {
+            try {
+                return (0, can_update_sequence_props_1.computeSequencePropsStatus)({
+                    fileName,
+                    nodePath: cachedNodePath,
+                    componentIdentity,
+                    keys,
+                    effects,
+                    remotionRoot,
+                });
+            }
+            catch (error) {
+                if (error instanceof jsx_component_identity_1.JsxElementIdentityMismatchError ||
+                    error instanceof jsx_element_not_found_at_location_error_1.JsxElementNotFoundAtLocationError) {
+                    return null;
+                }
+                throw error;
+            }
+        })();
+        if (cachedResult === null || cachedResult === void 0 ? void 0 : cachedResult.canUpdate) {
             return {
                 status: cachedResult,
                 nodePath: {
@@ -59,6 +81,7 @@ const getSequencePropsStatus = ({ fileName, line, column, preferredNodePath, key
     const status = (0, can_update_sequence_props_1.computeSequencePropsStatusFromFilenameByLine)({
         fileName,
         line,
+        componentIdentity,
         keys,
         effects,
         remotionRoot,
@@ -66,13 +89,14 @@ const getSequencePropsStatus = ({ fileName, line, column, preferredNodePath, key
     });
     return status;
 };
-const subscribeToSequencePropsWatchers = ({ fileName, line, column, nodePath: preferredNodePath, keys, effects, remotionRoot, clientId, logLevel, }) => {
+const subscribeToSequencePropsWatchers = ({ fileName, line, column, nodePath: preferredNodePath, componentIdentity, keys, effects, remotionRoot, clientId, logLevel, }) => {
     var _a;
     const initialResult = getSequencePropsStatus({
         fileName,
         line,
         column,
         preferredNodePath,
+        componentIdentity,
         keys,
         effects,
         remotionRoot,
@@ -105,6 +129,7 @@ const subscribeToSequencePropsWatchers = ({ fileName, line, column, nodePath: pr
                 const result = (0, can_update_sequence_props_1.computeSequencePropsStatusFromContent)({
                     fileContents: event.content,
                     nodePath: nodePath.nodePath,
+                    componentIdentity,
                     keys,
                     effects,
                 });
@@ -125,7 +150,8 @@ const subscribeToSequencePropsWatchers = ({ fileName, line, column, nodePath: pr
                 });
             }
             catch (error) {
-                if (error instanceof jsx_element_not_found_at_location_error_1.JsxElementNotFoundAtLocationError) {
+                if (error instanceof jsx_element_not_found_at_location_error_1.JsxElementNotFoundAtLocationError ||
+                    error instanceof jsx_component_identity_1.JsxElementIdentityMismatchError) {
                     (0, live_events_1.waitForLiveEventsListener)().then((listener) => {
                         listener.sendEventToClientId(clientId, {
                             type: 'lost-node-path',

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.476",
+	"version": "4.0.477",
 	"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.476",
+		"remotion": "4.0.477",
 		"recast": "0.23.11",
-		"@remotion/bundler": "4.0.476",
-		"@remotion/renderer": "4.0.476",
-		"@remotion/studio-shared": "4.0.476",
+		"@remotion/bundler": "4.0.477",
+		"@remotion/renderer": "4.0.477",
+		"@remotion/studio-shared": "4.0.477",
 		"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.476",
+		"@remotion/eslint-config-internal": "4.0.477",
 		"eslint": "9.19.0",
 		"@types/node": "20.12.14",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"