@remotion/studio-server 4.0.500 → 4.0.502

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

@@ -1,44 +1,11 @@
 "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.computeCanUpdateDefaultProps = exports.computeCanUpdateDefaultPropsFromContent = exports.checkIfTypeScriptFile = void 0;
+exports.computeCanUpdateDefaultProps = exports.checkIfTypeScriptFile = exports.computeCanUpdateDefaultPropsFromContent = void 0;
 const node_fs_1 = require("node:fs");
-const recast = __importStar(require("recast"));
-const parse_ast_1 = require("../../codemods/parse-ast");
+const studio_codemods_1 = require("@remotion/studio-codemods");
 const project_info_1 = require("../project-info");
-const can_update_sequence_props_1 = require("./can-update-sequence-props");
+const studio_codemods_2 = require("@remotion/studio-codemods");
+Object.defineProperty(exports, "computeCanUpdateDefaultPropsFromContent", { enumerable: true, get: function () { return studio_codemods_2.computeCanUpdateDefaultPropsFromContent; } });
 const checkIfTypeScriptFile = (file) => {
     if (!file.endsWith('.tsx') &&
         !file.endsWith('.ts') &&
@@ -48,100 +15,6 @@ const checkIfTypeScriptFile = (file) => {
     }
 };
 exports.checkIfTypeScriptFile = checkIfTypeScriptFile;
-const extractDefaultPropsFromSource = (input, compositionId) => {
-    const ast = (0, parse_ast_1.parseAst)(input);
-    let result = null;
-    recast.types.visit(ast, {
-        visitJSXElement(path) {
-            var _a;
-            const { openingElement } = path.node;
-            const openingName = openingElement.name;
-            if (openingName.type !== 'JSXIdentifier' &&
-                openingName.type !== 'JSXNamespacedName') {
-                this.traverse(path);
-                return;
-            }
-            if (openingName.name !== 'Composition' && openingName.name !== 'Still') {
-                this.traverse(path);
-                return;
-            }
-            if (!((_a = openingElement.attributes) === null || _a === void 0 ? void 0 : _a.some((attr) => {
-                if (attr.type === 'JSXSpreadAttribute') {
-                    return;
-                }
-                if (!attr.value) {
-                    return;
-                }
-                if (attr.value.type === 'JSXElement') {
-                    return;
-                }
-                if (attr.value.type === 'JSXExpressionContainer') {
-                    return;
-                }
-                if (attr.value.type === 'JSXFragment') {
-                    return;
-                }
-                return attr.name.name === 'id' && attr.value.value === compositionId;
-            }))) {
-                this.traverse(path);
-                return;
-            }
-            const defaultPropsAttr = openingElement.attributes.find((attr) => {
-                if (attr.type === 'JSXSpreadAttribute') {
-                    return;
-                }
-                return attr.name.name === 'defaultProps';
-            });
-            if (!defaultPropsAttr || defaultPropsAttr.type === 'JSXSpreadAttribute') {
-                this.traverse(path);
-                return;
-            }
-            if (!defaultPropsAttr.value ||
-                defaultPropsAttr.value.type !== 'JSXExpressionContainer') {
-                this.traverse(path);
-                return;
-            }
-            const { expression } = defaultPropsAttr.value;
-            if (expression.type === 'JSXEmptyExpression') {
-                this.traverse(path);
-                return;
-            }
-            if ((0, can_update_sequence_props_1.isStaticValue)(expression, {
-                allowSpecialValues: true,
-            })) {
-                const value = (0, can_update_sequence_props_1.extractStaticValue)(expression, {
-                    allowSpecialValues: true,
-                });
-                if (value !== null &&
-                    typeof value === 'object' &&
-                    !Array.isArray(value)) {
-                    result = value;
-                }
-            }
-            this.traverse(path);
-        },
-    });
-    return result;
-};
-const computeCanUpdateDefaultPropsFromContent = (content, compositionId) => {
-    try {
-        const currentDefaultProps = extractDefaultPropsFromSource(content, compositionId);
-        if (currentDefaultProps === null) {
-            throw new Error(`Could not find or extract defaultProps for composition "${compositionId}"`);
-        }
-        return {
-            canUpdate: true,
-            currentDefaultProps,
-        };
-    }
-    catch (err) {
-        return {
-            canUpdate: false,
-            reason: err.message,
-        };
-    }
-};
-exports.computeCanUpdateDefaultPropsFromContent = computeCanUpdateDefaultPropsFromContent;
 const computeCanUpdateDefaultProps = async ({ compositionId, remotionRoot, entryPoint, }) => {
     try {
         const projectInfo = await (0, project_info_1.getProjectInfo)(remotionRoot, entryPoint);
@@ -150,7 +23,7 @@ const computeCanUpdateDefaultProps = async ({ compositionId, remotionRoot, entry
         }
         (0, exports.checkIfTypeScriptFile)(projectInfo.rootFile);
         const input = (0, node_fs_1.readFileSync)(projectInfo.rootFile, 'utf-8');
-        const result = (0, exports.computeCanUpdateDefaultPropsFromContent)(input, compositionId);
+        const result = (0, studio_codemods_1.computeCanUpdateDefaultPropsFromContent)(input, compositionId);
         return {
             result,
             rootFile: projectInfo.rootFile,

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

@@ -22,7 +22,7 @@ export declare const getStaticJsxChildrenAttribute: (jsxElement: JSXOpeningEleme
 export declare const hasJsxChildrenAttribute: (jsxElement: JSXOpeningElement) => boolean;
 export declare const getStaticJsxTextContent: (jsxElement: JSXElement) => StaticJsxTextContent | null;
 export declare const findNodePathForJsxElement: (ast: File, target: JSXOpeningElement) => SequenceNodePath | null;
-export declare const lineColumnToNodePath: (ast: File, targetLine: number) => SequenceNodePath | null;
+export declare const lineColumnToNodePath: (ast: File, targetLine: number, targetColumn?: number | undefined, fileContents?: string | undefined) => SequenceNodePath | null;
 export declare const computeSequencePropsStatusFromContent: ({ fileContents, nodePath, componentIdentity, keys, assetKeys, effects, videoConfigValues, }: {
     fileContents: string;
     nodePath: SequenceNodePath;
@@ -42,9 +42,10 @@ export declare const computeSequencePropsStatus: ({ fileName, nodePath, componen
     remotionRoot: string;
     videoConfigValues: VideoConfigValues | null;
 }) => CanUpdateSequencePropsResponseTrue;
-export declare const computeSequencePropsStatusFromFilenameByLine: ({ fileName, line, componentIdentity, keys, assetKeys, effects, remotionRoot, logLevel, videoConfigValues, }: {
+export declare const computeSequencePropsStatusFromFilenameByLocation: ({ fileName, line, column, componentIdentity, keys, assetKeys, effects, remotionRoot, logLevel, videoConfigValues, }: {
     fileName: string;
     line: number;
+    column: number;
     componentIdentity: string | null;
     keys: string[];
     assetKeys?: string[] | undefined;

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

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.computeSequencePropsStatusFromFilenameByLine = exports.computeSequencePropsStatus = exports.computeSequencePropsStatusFromContent = exports.lineColumnToNodePath = exports.findNodePathForJsxElement = exports.getStaticJsxTextContent = exports.hasJsxChildrenAttribute = exports.getStaticJsxChildrenAttribute = exports.findJsxElementNodeAtNodePath = exports.findJsxElementAtNodePath = exports.findJsxElementPathAtNodePath = exports.getComputedStatus = exports.extractStaticValue = exports.isStaticValue = void 0;
+exports.computeSequencePropsStatusFromFilenameByLocation = exports.computeSequencePropsStatus = exports.computeSequencePropsStatusFromContent = exports.lineColumnToNodePath = exports.findNodePathForJsxElement = exports.getStaticJsxTextContent = exports.hasJsxChildrenAttribute = exports.getStaticJsxChildrenAttribute = exports.findJsxElementNodeAtNodePath = exports.findJsxElementAtNodePath = exports.findJsxElementPathAtNodePath = exports.getComputedStatus = exports.extractStaticValue = exports.isStaticValue = void 0;
 const node_fs_1 = require("node:fs");
 const renderer_1 = require("@remotion/renderer");
 const studio_shared_1 = require("@remotion/studio-shared");
@@ -43,6 +43,7 @@ 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_border_radius_shorthand_1 = require("../../helpers/parse-border-radius-shorthand");
 const parse_keyframe_easing_expression_1 = require("../../helpers/parse-keyframe-easing-expression");
 const resolve_file_inside_project_1 = require("../../helpers/resolve-file-inside-project");
 const video_config_numeric_expression_1 = require("../../helpers/video-config-numeric-expression");
@@ -641,19 +642,51 @@ const findNodePathForJsxElement = (ast, target) => {
     return foundPath;
 };
 exports.findNodePathForJsxElement = findNodePathForJsxElement;
-const lineColumnToNodePath = (ast, targetLine) => {
-    let foundPath = null;
+const RECAST_TAB_WIDTH = 4;
+const sourceColumnToRecastColumn = ({ fileContents, line, column, }) => {
+    const sourceLine = fileContents.split('\n')[line - 1];
+    if (sourceLine === undefined) {
+        return column;
+    }
+    let recastColumn = 0;
+    for (let index = 0; index < column; index++) {
+        if (sourceLine[index] === '\t') {
+            recastColumn += RECAST_TAB_WIDTH - (recastColumn % RECAST_TAB_WIDTH);
+        }
+        else {
+            recastColumn++;
+        }
+    }
+    return recastColumn;
+};
+const lineColumnToNodePath = (ast, targetLine, targetColumn, fileContents) => {
+    var _a;
+    const lineMatches = [];
+    const exactMatches = [];
+    const recastTargetColumn = targetColumn === undefined || fileContents === undefined
+        ? targetColumn
+        : sourceColumnToRecastColumn({
+            fileContents,
+            line: targetLine,
+            column: targetColumn,
+        });
     recast.types.visit(ast, {
         visitJSXOpeningElement(p) {
             const { node } = p;
             if (node.loc && node.loc.start.line === targetLine) {
-                foundPath = getNodePathForRecastPath(p, ast);
-                return false;
+                const nodePath = getNodePathForRecastPath(p, ast);
+                lineMatches.push(nodePath);
+                if (node.loc.start.column === recastTargetColumn) {
+                    exactMatches.push(nodePath);
+                }
             }
             return this.traverse(p);
         },
     });
-    return foundPath;
+    if (exactMatches.length === 1) {
+        return exactMatches[0];
+    }
+    return (_a = lineMatches.at(-1)) !== null && _a !== void 0 ? _a : null;
 };
 exports.lineColumnToNodePath = lineColumnToNodePath;
 const PIXEL_VALUE_REGEX = /^-?\d+(\.\d+)?px$/;
@@ -679,6 +712,70 @@ const getObjectPropertyName = (property) => {
     }
     return null;
 };
+const BORDER_RADIUS_SHORTHAND = 'borderRadius';
+const BORDER_RADIUS_LONGHANDS = [
+    'borderTopLeftRadius',
+    'borderTopRightRadius',
+    'borderBottomRightRadius',
+    'borderBottomLeftRadius',
+];
+const BORDER_RADIUS_PROPERTIES = new Set([
+    BORDER_RADIUS_SHORTHAND,
+    ...BORDER_RADIUS_LONGHANDS,
+]);
+const hasMixedBorderRadiusRepresentation = (jsxElement) => {
+    var _a;
+    const style = jsxElement.attributes.find((attribute) => attribute.type === 'JSXAttribute' &&
+        attribute.name.type !== 'JSXNamespacedName' &&
+        attribute.name.name === 'style');
+    if (!style ||
+        style.type !== 'JSXAttribute' ||
+        ((_a = style.value) === null || _a === void 0 ? void 0 : _a.type) !== 'JSXExpressionContainer' ||
+        style.value.expression.type !== 'ObjectExpression') {
+        return false;
+    }
+    let hasShorthand = false;
+    let hasLonghand = false;
+    for (const property of style.value.expression.properties) {
+        if (property.type !== 'ObjectProperty') {
+            continue;
+        }
+        const name = getObjectPropertyName(property);
+        hasShorthand || (hasShorthand = name === BORDER_RADIUS_SHORTHAND);
+        hasLonghand || (hasLonghand = BORDER_RADIUS_LONGHANDS.some((longhand) => longhand === name));
+    }
+    return hasShorthand && hasLonghand;
+};
+const getUniformBorderRadius = (value) => {
+    const parsed = (0, parse_border_radius_shorthand_1.parseBorderRadiusShorthand)(value);
+    if (!parsed) {
+        return null;
+    }
+    const values = Object.values(parsed);
+    return values.every((radius) => radius === values[0]) ? values[0] : null;
+};
+const getBorderRadiusShorthandStatus = ({ propValue, ast, videoConfigValues, }) => {
+    if ((0, exports.isStaticValue)(propValue)) {
+        const uniform = getUniformBorderRadius((0, exports.extractStaticValue)(propValue));
+        return uniform === null ? computedStatus() : staticStatus(uniform, null);
+    }
+    const numericExpression = (0, video_config_numeric_expression_1.parseVideoConfigNumericExpression)({
+        node: propValue,
+        videoConfigValues,
+    });
+    if (numericExpression !== null && numericExpression.value >= 0) {
+        return staticStatus(numericExpression.value, numericExpression);
+    }
+    const computed = (0, exports.getComputedStatus)(propValue, ast, videoConfigValues);
+    if (computed.status === 'keyframed' &&
+        computed.interpolationFunction === 'interpolate' &&
+        computed.keyframes.every((keyframe) => typeof keyframe.value === 'number' &&
+            Number.isFinite(keyframe.value) &&
+            keyframe.value >= 0)) {
+        return computed;
+    }
+    return computedStatus();
+};
 const getNestedPropStatus = ({ jsxElement, ast, parentKey, childKey, videoConfigValues, allowSpecialValues, }) => {
     const attr = jsxElement.attributes.find((a) => a.type !== 'JSXSpreadAttribute' &&
         a.name.type !== 'JSXNamespacedName' &&
@@ -735,9 +832,6 @@ const getNestedPropStatus = ({ jsxElement, ast, parentKey, childKey, videoConfig
         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();
     }
@@ -746,6 +840,13 @@ const getNestedPropStatus = ({ jsxElement, ast, parentKey, childKey, videoConfig
         return staticStatus(undefined, null);
     }
     const propValue = prop.value;
+    if (parentKey === 'style' && childKey === BORDER_RADIUS_SHORTHAND) {
+        return getBorderRadiusShorthandStatus({
+            propValue,
+            ast,
+            videoConfigValues,
+        });
+    }
     const staticValueOptions = { allowSpecialValues };
     if (!(0, exports.isStaticValue)(propValue, staticValueOptions)) {
         const numericExpression = (0, video_config_numeric_expression_1.parseVideoConfigNumericExpression)({
@@ -774,7 +875,14 @@ const computeEffectsForJsx = ({ ast, jsxElement, effects, videoConfigValues, })
 const computeSequenceOnlyPropsRecord = ({ jsxElement, jsxElementNode, ast, keys, assetKeys, videoConfigValues, }) => {
     const allProps = getPropsStatus(jsxElement, ast, videoConfigValues, assetKeys);
     const filteredProps = {};
+    const mixedBorderRadius = hasMixedBorderRadiusRepresentation(jsxElement);
     for (const key of keys) {
+        if (mixedBorderRadius &&
+            key.startsWith('style.') &&
+            BORDER_RADIUS_PROPERTIES.has(key.slice('style.'.length))) {
+            filteredProps[key] = computedStatus();
+            continue;
+        }
         if (key === 'children') {
             const staticChildrenAttribute = (0, exports.getStaticJsxChildrenAttribute)(jsxElement);
             if (staticChildrenAttribute) {
@@ -868,7 +976,7 @@ const computeSequencePropsStatus = ({ fileName, nodePath, componentIdentity, key
     });
 };
 exports.computeSequencePropsStatus = computeSequencePropsStatus;
-const computeSequencePropsStatusFromFilenameByLine = ({ fileName, line, componentIdentity, keys, assetKeys = [], effects, remotionRoot, logLevel, videoConfigValues, }) => {
+const computeSequencePropsStatusFromFilenameByLocation = ({ fileName, line, column, componentIdentity, keys, assetKeys = [], effects, remotionRoot, logLevel, videoConfigValues, }) => {
     try {
         const { absolutePath } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
             remotionRoot,
@@ -877,7 +985,7 @@ const computeSequencePropsStatusFromFilenameByLine = ({ fileName, line, componen
         });
         const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
         const ast = (0, parse_ast_1.parseAst)(fileContents);
-        const resolvedNodePath = (0, exports.lineColumnToNodePath)(ast, line);
+        const resolvedNodePath = (0, exports.lineColumnToNodePath)(ast, line, column, fileContents);
         if (!resolvedNodePath) {
             return {
                 status: {
@@ -909,6 +1017,16 @@ const computeSequencePropsStatusFromFilenameByLine = ({ fileName, line, componen
         };
     }
     catch (err) {
+        if (err instanceof jsx_component_identity_1.JsxElementIdentityMismatchError ||
+            err instanceof jsx_element_not_found_at_location_error_1.JsxElementNotFoundAtLocationError) {
+            return {
+                status: {
+                    canUpdate: false,
+                    reason: 'not-found',
+                },
+                success: false,
+            };
+        }
         renderer_1.RenderInternals.Log.error({ indent: false, logLevel }, err);
         return {
             status: {
@@ -919,4 +1037,4 @@ const computeSequencePropsStatusFromFilenameByLine = ({ fileName, line, componen
         };
     }
 };
-exports.computeSequencePropsStatusFromFilenameByLine = computeSequencePropsStatusFromFilenameByLine;
+exports.computeSequencePropsStatusFromFilenameByLocation = computeSequencePropsStatusFromFilenameByLocation;

package/dist/preview-server/routes/find-in-file.d.ts

@@ -1,12 +1,4 @@
 import type { FindInFileRequest, FindInFileResponse } from '@remotion/studio-shared';
 import type { ApiHandler } from '../api-types';
-export declare const findSearchPosition: ({ contents, lineNumber, columnNumber, search, }: {
-    contents: string;
-    lineNumber: number;
-    columnNumber: number;
-    search: string;
-}) => {
-    lineNumber: number;
-    columnNumber: number;
-};
+export { findSearchPosition } from '@remotion/studio-codemods';
 export declare const findInFileHandler: ApiHandler<FindInFileRequest, FindInFileResponse>;

package/dist/preview-server/routes/find-in-file.js

@@ -6,26 +6,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.findInFileHandler = exports.findSearchPosition = void 0;
 const node_fs_1 = __importDefault(require("node:fs"));
 const node_path_1 = __importDefault(require("node:path"));
-const findSearchPosition = ({ contents, lineNumber, columnNumber, search, }) => {
-    const lines = contents.split(/\r?\n/);
-    const startLineIndex = Math.max(0, lineNumber - 1);
-    for (let lineIndex = startLineIndex; lineIndex < lines.length; lineIndex++) {
-        const startColumnIndex = lineIndex === startLineIndex ? Math.max(0, columnNumber - 1) : 0;
-        const foundColumnIndex = lines[lineIndex].indexOf(search, startColumnIndex);
-        if (foundColumnIndex !== -1) {
-            return {
-                lineNumber: lineIndex + 1,
-                columnNumber: foundColumnIndex + 1,
-            };
-        }
-    }
-    return { lineNumber, columnNumber };
-};
-exports.findSearchPosition = findSearchPosition;
+const studio_codemods_1 = require("@remotion/studio-codemods");
+const studio_codemods_2 = require("@remotion/studio-codemods");
+Object.defineProperty(exports, "findSearchPosition", { enumerable: true, get: function () { return studio_codemods_2.findSearchPosition; } });
 const findInFileHandler = async ({ input, remotionRoot }) => {
     const { fileName, lineNumber, columnNumber, search } = input;
     const contents = await node_fs_1.default.promises.readFile(node_path_1.default.resolve(remotionRoot, fileName), 'utf-8');
-    return (0, exports.findSearchPosition)({
+    return (0, studio_codemods_1.findSearchPosition)({
         contents,
         lineNumber,
         columnNumber,

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

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.insertElementHandler = void 0;
 const node_fs_1 = require("node:fs");
 const node_path_1 = __importDefault(require("node:path"));
-const drag_and_drop_1 = require("@remotion/drag-and-drop");
 const renderer_1 = require("@remotion/renderer");
+const studio_protocol_1 = require("@remotion/studio-protocol");
 const file_watcher_1 = require("../../file-watcher");
 const resolve_composition_component_1 = require("../../helpers/resolve-composition-component");
 const format_log_file_location_1 = require("../format-log-file-location");
@@ -56,7 +56,7 @@ const validateDimensions = (dimensions) => {
     }
 };
 const validateElement = (element) => {
-    if (drag_and_drop_1.DragAndDropInternals.makeElementFileNameFromSlug(element.slug) === null) {
+    if (studio_protocol_1.StudioProtocolInternals.makeElementFileNameFromSlug(element.slug) === null) {
         throw new Error('Element slug must produce a safe lowercase .tsx file name');
     }
     if (typeof element.sourceCode !== 'string' ||
@@ -64,12 +64,12 @@ const validateElement = (element) => {
         element.sourceCode.length > 200000) {
         throw new Error('Unsupported Element source code');
     }
-    if (drag_and_drop_1.DragAndDropInternals.getElementComponentNameFromSourceCode(element.sourceCode) === null) {
+    if (studio_protocol_1.StudioProtocolInternals.getElementComponentNameFromSourceCode(element.sourceCode) === null) {
         throw new Error('Element source must export exactly one named component');
     }
     validateDimensions(element.dimensions);
 };
-const insertElementHandler = ({ input: { compositionFile, compositionId, element, from, position }, remotionRoot, logLevel, }) => (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
+const insertElementHandler = ({ input: { compositionFile, compositionId, element, from, position, overwriteExisting, }, remotionRoot, logLevel, }) => (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
     try {
         validateElement(element);
         validatePosition(position);
@@ -77,7 +77,7 @@ const insertElementHandler = ({ input: { compositionFile, compositionId, element
             (!Number.isInteger(from) || !Number.isFinite(from) || from < 0)) {
             throw new Error('from must be a non-negative integer');
         }
-        const componentName = drag_and_drop_1.DragAndDropInternals.getElementComponentNameFromSourceCode(element.sourceCode);
+        const componentName = studio_protocol_1.StudioProtocolInternals.getElementComponentNameFromSourceCode(element.sourceCode);
         if (componentName === null) {
             throw new Error('Element source must export exactly one named component');
         }
@@ -90,7 +90,7 @@ const insertElementHandler = ({ input: { compositionFile, compositionId, element
         if (!location.canAddSequence) {
             throw new Error('Cannot insert Element into this composition component');
         }
-        const derivedElementFileName = drag_and_drop_1.DragAndDropInternals.makeElementFileNameFromSlug(element.slug);
+        const derivedElementFileName = studio_protocol_1.StudioProtocolInternals.makeElementFileNameFromSlug(element.slug);
         if (derivedElementFileName === null) {
             throw new Error('Element slug must produce a safe lowercase .tsx file name');
         }
@@ -99,13 +99,27 @@ const insertElementHandler = ({ input: { compositionFile, compositionId, element
             throw new Error('Element file must stay inside the Remotion project');
         }
         const elementFileExists = (0, node_fs_1.existsSync)(elementFileName);
-        if (elementFileExists) {
-            const existingSource = (0, node_fs_1.readFileSync)(elementFileName, 'utf-8');
-            if (normalizeSourceForComparison(existingSource) !==
-                normalizeSourceForComparison(element.sourceCode)) {
-                throw new Error(`Element file already exists with different contents: ${derivedElementFileName}`);
-            }
+        const existingElementSource = elementFileExists
+            ? (0, node_fs_1.readFileSync)(elementFileName, 'utf-8')
+            : null;
+        const elementSourcesDiffer = existingElementSource !== null &&
+            normalizeSourceForComparison(existingElementSource) !==
+                normalizeSourceForComparison(element.sourceCode);
+        if (elementSourcesDiffer && !overwriteExisting) {
+            return {
+                success: false,
+                type: 'file-conflict',
+                conflict: {
+                    filePath: node_path_1.default
+                        .relative(remotionRoot, elementFileName)
+                        .split(node_path_1.default.sep)
+                        .join('/'),
+                    existingSource: existingElementSource,
+                    incomingSource: element.sourceCode,
+                },
+            };
         }
+        const shouldWriteElementFile = !elementFileExists || elementSourcesDiffer;
         const importPath = makeRelativeImportPath({
             fromFile: location.fileName,
             toFile: elementFileName,
@@ -133,16 +147,16 @@ const insertElementHandler = ({ input: { compositionFile, compositionId, element
         });
         (0, undo_stack_1.pushTransactionToUndoStack)({
             snapshots: [
-                ...(elementFileExists
-                    ? []
-                    : [
+                ...(shouldWriteElementFile
+                    ? [
                         {
                             filePath: elementFileName,
-                            oldContents: null,
+                            oldContents: existingElementSource,
                             newContents: element.sourceCode,
                             logLine: 1,
                         },
-                    ]),
+                    ]
+                    : []),
                 {
                     filePath: inserted.fileName,
                     oldContents: inserted.oldContents,
@@ -159,11 +173,11 @@ const insertElementHandler = ({ input: { compositionFile, compositionId, element
             entryType: 'insert-jsx-element',
             suppressHmrOnFileRestore: false,
         });
-        if (!elementFileExists) {
+        if (shouldWriteElementFile) {
             (0, undo_stack_1.suppressUndoStackInvalidation)(elementFileName);
         }
         (0, undo_stack_1.suppressUndoStackInvalidation)(inserted.fileName);
-        if (!elementFileExists) {
+        if (shouldWriteElementFile) {
             (0, file_watcher_1.writeFileAndNotifyFileWatchers)(elementFileName, element.sourceCode, undefined);
         }
         (0, file_watcher_1.writeFileAndNotifyFileWatchers)(inserted.fileName, inserted.output, undefined);
@@ -177,7 +191,12 @@ const insertElementHandler = ({ input: { compositionFile, compositionId, element
             absolutePath: elementFileName,
             line: 1,
         });
-        renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(elementLocationLabel)} ${elementFileExists ? 'Reused existing Element source' : 'Created Element source'}`);
+        const elementFileAction = elementSourcesDiffer
+            ? 'Overwrote existing Element source'
+            : elementFileExists
+                ? 'Reused existing Element source'
+                : 'Created Element source';
+        renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(elementLocationLabel)} ${elementFileAction}`);
         renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(compositionLocationLabel)} Added <${componentName}>`);
         if (!inserted.formatted) {
             (0, log_update_1.warnAboutPrettierOnce)(logLevel);
@@ -190,6 +209,7 @@ const insertElementHandler = ({ input: { compositionFile, compositionId, element
     catch (err) {
         return {
             success: false,
+            type: 'error',
             reason: err.message,
             stack: err.stack,
         };

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

@@ -5,8 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.insertJsxElementHandler = void 0;
 const node_path_1 = __importDefault(require("node:path"));
-const drag_and_drop_1 = require("@remotion/drag-and-drop");
 const renderer_1 = require("@remotion/renderer");
+const studio_protocol_1 = require("@remotion/studio-protocol");
 const studio_shared_1 = require("@remotion/studio-shared");
 const file_watcher_1 = require("../../file-watcher");
 const resolve_composition_component_1 = require("../../helpers/resolve-composition-component");
@@ -79,16 +79,16 @@ const validateElement = (element, remotionRoot) => {
         return;
     }
     if (element.type === 'component') {
-        if (!drag_and_drop_1.DragAndDropInternals.isComponentIdentifier(element.componentName)) {
+        if (!studio_protocol_1.StudioProtocolInternals.isComponentIdentifier(element.componentName)) {
             throw new Error('Unsupported component name');
         }
-        if (!drag_and_drop_1.DragAndDropInternals.isComponentIdentifier(element.importName)) {
+        if (!studio_protocol_1.StudioProtocolInternals.isComponentIdentifier(element.importName)) {
             throw new Error('Unsupported component import name');
         }
-        if (!drag_and_drop_1.DragAndDropInternals.isComponentImportPath(element.importPath)) {
+        if (!studio_protocol_1.StudioProtocolInternals.isComponentImportPath(element.importPath)) {
             throw new Error('Unsupported component import path');
         }
-        if (!drag_and_drop_1.DragAndDropInternals.areComponentProps(element.props)) {
+        if (!studio_protocol_1.StudioProtocolInternals.areComponentProps(element.props)) {
             throw new Error('Unsupported component props');
         }
         return;