@remotion/studio-server 4.0.529 → 4.0.530

package/dist/preview-server/routes/duplicate-composition.js

@@ -0,0 +1,114 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.duplicateCompositionHandler = void 0;
+const node_fs_1 = require("node:fs");
+const node_path_1 = __importDefault(require("node:path"));
+const codemods_1 = require("@remotion/codemods");
+const renderer_1 = require("@remotion/renderer");
+const file_watcher_1 = require("../../file-watcher");
+const resolve_file_inside_project_1 = require("../../helpers/resolve-file-inside-project");
+const format_log_file_location_1 = require("../format-log-file-location");
+const project_info_1 = require("../project-info");
+const undo_stack_1 = require("../undo-stack");
+const can_update_default_props_1 = require("./can-update-default-props");
+const source_file_write_queue_1 = require("./source-file-write-queue");
+const duplicateCompositionHandler = ({ input: request, logLevel, remotionRoot, entryPoint }) => (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
+    var _a, _b;
+    var _c, _d, _e, _f, _g, _h;
+    try {
+        let filePath;
+        if ((_a = request.symbolicatedStack) === null || _a === void 0 ? void 0 : _a.originalFileName) {
+            filePath = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
+                remotionRoot,
+                fileName: request.symbolicatedStack.originalFileName,
+                action: 'duplicate a composition in',
+            }).absolutePath;
+        }
+        else {
+            const { rootFile } = await (0, project_info_1.getProjectInfo)(remotionRoot, entryPoint);
+            if (rootFile === null) {
+                throw new Error('Cannot find the Remotion root file');
+            }
+            filePath = rootFile;
+        }
+        (0, can_update_default_props_1.checkIfTypeScriptFile)(filePath);
+        const result = (0, codemods_1.duplicateComposition)({
+            project: {
+                files: { [filePath]: (0, node_fs_1.readFileSync)(filePath, 'utf-8') },
+                rootDir: node_path_1.default.dirname(filePath),
+            },
+            compositionFile: filePath,
+            compositionId: request.idToDuplicate,
+            newId: request.newId,
+            tag: request.tag,
+            metadata: {
+                width: (_c = request.newWidth) !== null && _c !== void 0 ? _c : undefined,
+                height: (_d = request.newHeight) !== null && _d !== void 0 ? _d : undefined,
+                fps: request.tag === 'Still' ? undefined : ((_e = request.newFps) !== null && _e !== void 0 ? _e : undefined),
+                durationInFrames: request.tag === 'Still'
+                    ? undefined
+                    : ((_f = request.newDurationInFrames) !== null && _f !== void 0 ? _f : undefined),
+            },
+        });
+        for (const change of result.changes) {
+            const currentContents = (0, node_fs_1.existsSync)(change.filePath)
+                ? (0, node_fs_1.readFileSync)(change.filePath, 'utf-8')
+                : null;
+            if (currentContents !== change.previousContents) {
+                throw new Error(`Source changed before duplicating composition: ${change.filePath}`);
+            }
+        }
+        if (result.changes.length > 0) {
+            const logLine = (_g = (_b = request.symbolicatedStack) === null || _b === void 0 ? void 0 : _b.originalLineNumber) !== null && _g !== void 0 ? _g : 1;
+            (0, undo_stack_1.pushTransactionToUndoStack)({
+                snapshots: result.changes.map((change) => ({
+                    filePath: change.filePath,
+                    oldContents: change.previousContents,
+                    newContents: change.nextContents,
+                    logLine: change.filePath === filePath ? logLine : 1,
+                    nodePathRemappings: null,
+                })),
+                logLevel,
+                remotionRoot,
+                description: {
+                    undoMessage: `↩️  Duplication of composition "${request.idToDuplicate}" to "${request.newId}"`,
+                    redoMessage: `↪️  Duplication of composition "${request.idToDuplicate}" to "${request.newId}"`,
+                },
+                entryType: 'duplicate-composition',
+                suppressHmrOnFileRestore: false,
+                undoRedoNavigation: request.undoRedoNavigation,
+            });
+            for (const change of result.changes) {
+                if (change.nextContents === null) {
+                    throw new Error('Duplicating a composition cannot remove source files');
+                }
+                (0, undo_stack_1.suppressUndoStackInvalidation)(change.filePath);
+                (0, file_watcher_1.writeFileAndNotifyFileWatchers)({
+                    file: change.filePath,
+                    content: change.nextContents,
+                    originatorClientId: undefined,
+                    metadata: null,
+                });
+            }
+            const locationLabel = (0, format_log_file_location_1.formatLogFileLocation)({
+                remotionRoot,
+                absolutePath: filePath,
+                line: logLine,
+            });
+            renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${(0, source_file_write_queue_1.getCodemodTimingPrefix)(logLevel)}${renderer_1.RenderInternals.chalk.blueBright(locationLabel)} Duplicated composition "${request.idToDuplicate}" to "${request.newId}"`);
+            (0, undo_stack_1.printUndoHint)(logLevel);
+        }
+        return { success: true, nodePathMutation: null };
+    }
+    catch (error) {
+        return {
+            success: false,
+            reason: error instanceof Error ? error.message : String(error),
+            stack: error instanceof Error ? ((_h = error.stack) !== null && _h !== void 0 ? _h : '') : '',
+        };
+    }
+});
+exports.duplicateCompositionHandler = duplicateCompositionHandler;

package/dist/preview-server/routes/duplicate-nodes.d.ts

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

package/dist/preview-server/routes/duplicate-nodes.js

@@ -0,0 +1,123 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.duplicateNodesHandler = void 0;
+const node_fs_1 = require("node:fs");
+const codemods_1 = require("@remotion/codemods");
+const renderer_1 = require("@remotion/renderer");
+const file_watcher_1 = require("../../file-watcher");
+const resolve_file_inside_project_1 = require("../../helpers/resolve-file-inside-project");
+const format_log_file_location_1 = require("../format-log-file-location");
+const sequence_node_path_mutation_1 = require("../sequence-node-path-mutation");
+const undo_stack_1 = require("../undo-stack");
+const source_file_write_queue_1 = require("./source-file-write-queue");
+const duplicateNodesHandler = ({ input: { nodes }, remotionRoot, logLevel }) => {
+    return (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
+        var _a;
+        try {
+            if (nodes.length === 0) {
+                throw new Error('No JSX nodes were specified for duplication');
+            }
+            renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[duplicate-nodes] Received request to duplicate ${nodes.length} JSX node${nodes.length === 1 ? '' : 's'}`);
+            const itemsByFileName = new Map();
+            for (const item of nodes) {
+                const fileItems = (_a = itemsByFileName.get(item.fileName)) !== null && _a !== void 0 ? _a : [];
+                fileItems.push(item);
+                itemsByFileName.set(item.fileName, fileItems);
+            }
+            const updates = await Promise.all([...itemsByFileName.entries()].map(async ([fileName, fileItems]) => {
+                var _a;
+                var _b;
+                const { absolutePath, fileRelativeToRoot } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
+                    remotionRoot,
+                    fileName,
+                    action: 'modify',
+                });
+                const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
+                const result = await (0, codemods_1.duplicateNodes)({
+                    project: {
+                        files: { [absolutePath]: fileContents },
+                        rootDir: remotionRoot,
+                    },
+                    nodes: fileItems.map((item) => ({
+                        filePath: absolutePath,
+                        nodePath: item.nodePath,
+                    })),
+                });
+                const output = (_b = (_a = result.changes[0]) === null || _a === void 0 ? void 0 : _a.nextContents) !== null && _b !== void 0 ? _b : fileContents;
+                const { nodeLabels, logLines } = result.editDetails[0];
+                const nodePathRemappings = result.nodePathRemappings.map(({ oldNodePath, newNodePath, oldJsxName, newJsxName }) => ({
+                    oldNodePath,
+                    newNodePath,
+                    oldJsxName,
+                    newJsxName,
+                }));
+                return {
+                    absolutePath,
+                    fileRelativeToRoot,
+                    fileContents,
+                    logLine: Math.min(...logLines),
+                    nodeLabels,
+                    nodePathRemappings,
+                    output,
+                };
+            }));
+            const nodePathMutation = (0, sequence_node_path_mutation_1.broadcastSequenceNodePathMutation)(updates.map((update) => ({
+                absolutePath: update.absolutePath,
+                remappings: update.nodePathRemappings,
+            })), null);
+            const duplicatedNodeDescription = nodes.length === 1
+                ? updates[0].nodeLabels[0]
+                : `${nodes.length} JSX nodes`;
+            (0, undo_stack_1.pushTransactionToUndoStack)({
+                snapshots: updates.map((update) => ({
+                    filePath: update.absolutePath,
+                    oldContents: update.fileContents,
+                    newContents: null,
+                    logLine: update.logLine,
+                    nodePathRemappings: update.nodePathRemappings,
+                })),
+                logLevel,
+                remotionRoot,
+                description: {
+                    undoMessage: `↩️  Duplication of ${duplicatedNodeDescription}`,
+                    redoMessage: `↪️  Duplication of ${duplicatedNodeDescription}`,
+                },
+                entryType: 'duplicate-nodes',
+                suppressHmrOnFileRestore: false,
+                undoRedoNavigation: null,
+            });
+            for (const update of updates) {
+                (0, undo_stack_1.suppressUndoStackInvalidation)(update.absolutePath);
+                (0, file_watcher_1.writeFileAndNotifyFileWatchers)({
+                    file: update.absolutePath,
+                    content: update.output,
+                    originatorClientId: undefined,
+                    metadata: { skipSequencePropsUpdate: true },
+                });
+                const locationLabel = (0, format_log_file_location_1.formatLogFileLocation)({
+                    remotionRoot,
+                    absolutePath: update.absolutePath,
+                    line: update.logLine,
+                });
+                const fileDescription = update.nodeLabels.length === 1
+                    ? update.nodeLabels[0]
+                    : `${update.nodeLabels.length} JSX nodes`;
+                renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${(0, source_file_write_queue_1.getCodemodTimingPrefix)(logLevel)}${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} Duplicated ${fileDescription}`);
+                renderer_1.RenderInternals.Log.verbose({ indent: false, logLevel }, `[duplicate-nodes] Wrote ${update.fileRelativeToRoot}`);
+            }
+            (0, undo_stack_1.printUndoHint)(logLevel);
+            return {
+                success: true,
+                nodePathMutation,
+            };
+        }
+        catch (err) {
+            return {
+                success: false,
+                reason: err.message,
+                stack: err.stack,
+            };
+        }
+    });
+};
+exports.duplicateNodesHandler = duplicateNodesHandler;

package/dist/preview-server/routes/insert-basic-captions.js

@@ -11,7 +11,7 @@ const sequence_node_path_mutation_1 = require("../sequence-node-path-mutation");
 const undo_stack_1 = require("../undo-stack");
 const source_file_write_queue_1 = require("./source-file-write-queue");
 const { basicCaptionsElementSource, getBasicCaptionsElementFile, insertBasicCaptions, } = codemods_1.CodemodsInternals;
-const insertBasicCaptionsHandler = ({ input: { fileName, nodePath, captions, durationInFrames }, remotionRoot, logLevel, }) => (0, source_file_write_queue_1.withSourceFileWriteQueue)(() => {
+const insertBasicCaptionsHandler = ({ input: { fileName, nodePath, captions, durationInFrames, premountFor }, remotionRoot, logLevel, }) => (0, source_file_write_queue_1.withSourceFileWriteQueue)(() => {
     var _a;
     try {
         const { absolutePath } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
@@ -49,6 +49,7 @@ const insertBasicCaptionsHandler = ({ input: { fileName, nodePath, captions, dur
             nodePath,
             captions,
             durationInFrames,
+            premountFor,
             importPath: elementFile.importPath,
         });
         const nodePathMutation = (0, sequence_node_path_mutation_1.broadcastSequenceNodePathMutation)([{ absolutePath, remappings: nodePathRemappings }], null);

package/dist/preview-server/routes/insert-composition-element.d.ts

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

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

@@ -0,0 +1,236 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.insertCompositionElementHandler = void 0;
+const node_path_1 = __importDefault(require("node:path"));
+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");
+const format_log_file_location_1 = require("../format-log-file-location");
+const sequence_node_path_mutation_1 = require("../sequence-node-path-mutation");
+const undo_stack_1 = require("../undo-stack");
+const source_file_write_queue_1 = require("./source-file-write-queue");
+const validateDimension = (name, value) => {
+    if (!Number.isFinite(value) || value < 1) {
+        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 isInsideRemotionRoot = ({ fileName, remotionRoot, }) => {
+    const relativePath = node_path_1.default.relative(remotionRoot, fileName);
+    return !relativePath.startsWith('..') && !node_path_1.default.isAbsolute(relativePath);
+};
+const hasParentDirectorySegment = (fileName) => {
+    return fileName.split('/').includes('..');
+};
+const validateCompositionFile = ({ compositionFile, remotionRoot, }) => {
+    if (!compositionFile ||
+        compositionFile.includes('\0') ||
+        compositionFile.includes('\\') ||
+        compositionFile.startsWith('/') ||
+        hasParentDirectorySegment(compositionFile)) {
+        throw new Error('Unsupported composition file');
+    }
+    const resolved = node_path_1.default.resolve(remotionRoot, compositionFile);
+    if (!isInsideRemotionRoot({ fileName: resolved, remotionRoot })) {
+        throw new Error('Unsupported composition file');
+    }
+};
+const validateElement = (element, remotionRoot) => {
+    validatePosition(element.position);
+    if (element.type === 'solid') {
+        validateDimension('width', element.width);
+        validateDimension('height', element.height);
+        return;
+    }
+    if (element.type === 'svg') {
+        if (typeof element.markup !== 'string' || element.markup.trim() === '') {
+            throw new Error('SVG markup must be a non-empty string');
+        }
+        return;
+    }
+    if (element.type === 'asset') {
+        if (element.srcType === 'remote') {
+            if (!(0, studio_shared_1.isUrl)(element.src)) {
+                throw new Error('Remote asset source must be a URL');
+            }
+        }
+        else if (!element.src || element.src.includes('\\')) {
+            throw new Error('Asset path must be a static file path');
+        }
+        if (element.dimensions) {
+            validateDimension('width', element.dimensions.width);
+            validateDimension('height', element.dimensions.height);
+        }
+        if (element.durationInFrames !== null) {
+            validateDimension('durationInFrames', element.durationInFrames);
+        }
+        return;
+    }
+    if (element.type === 'component') {
+        if (!studio_protocol_1.StudioProtocolInternals.isComponentIdentifier(element.componentName)) {
+            throw new Error('Unsupported component name');
+        }
+        if (!studio_protocol_1.StudioProtocolInternals.isComponentIdentifier(element.importName)) {
+            throw new Error('Unsupported component import name');
+        }
+        if (!studio_protocol_1.StudioProtocolInternals.isComponentImportPath(element.importPath)) {
+            throw new Error('Unsupported component import path');
+        }
+        if (!studio_protocol_1.StudioProtocolInternals.areComponentProps(element.props)) {
+            throw new Error('Unsupported component props');
+        }
+        return;
+    }
+    if (element.type === 'composition') {
+        if (typeof element.compositionId !== 'string' || !element.compositionId) {
+            throw new Error('Unsupported composition ID');
+        }
+        if (typeof element.compositionFile !== 'string') {
+            throw new Error('Unsupported composition file');
+        }
+        validateCompositionFile({
+            compositionFile: element.compositionFile,
+            remotionRoot,
+        });
+        validateDimension('width', element.width);
+        validateDimension('height', element.height);
+        validateDimension('durationInFrames', element.durationInFrames);
+        const parsedProps = JSON.parse(element.serializedResolvedPropsWithCustomSchema);
+        if (typeof parsedProps !== 'object' ||
+            parsedProps === null ||
+            Array.isArray(parsedProps)) {
+            throw new Error('Resolved composition props must be an object');
+        }
+        return;
+    }
+    throw new Error('Unsupported element type');
+};
+const getElementLabel = (element) => {
+    if (element.type === 'solid') {
+        return '<Solid>';
+    }
+    if (element.type === 'svg') {
+        return '<Interactive.Svg>';
+    }
+    if (element.type === 'asset') {
+        if (element.assetType === 'image') {
+            return '<CanvasImage>';
+        }
+        if (element.assetType === 'video') {
+            return '<Video>';
+        }
+        if (element.assetType === 'gif') {
+            return '<Gif>';
+        }
+        if (element.assetType === 'animated-image') {
+            return '<AnimatedImage>';
+        }
+        if (element.assetType === 'audio') {
+            return '<Audio>';
+        }
+    }
+    if (element.type === 'component') {
+        return `<${element.componentName}>`;
+    }
+    if (element.type === 'composition') {
+        return `composition "${element.compositionId}"`;
+    }
+    throw new Error('Unsupported element type');
+};
+const insertCompositionElementHandler = ({ input: { compositionFile, compositionId, element, from, premountFor }, 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');
+        }
+        if (premountFor !== null &&
+            (!Number.isInteger(premountFor) || premountFor < 0)) {
+            throw new Error('premountFor must be a non-negative integer');
+        }
+        const elementLabel = getElementLabel(element);
+        renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[insert-composition-element] Received request for compositionFile="${compositionFile}" compositionId="${compositionId}" element="${element.type}"`);
+        const { fileName, source, oldContents, output, insertedNodePath, logLine, nodePathRemappings, } = await (0, resolve_composition_component_1.insertJsxElementIntoComposition)({
+            remotionRoot,
+            compositionFile,
+            compositionId,
+            element,
+            from,
+            premountFor,
+            prettierConfigOverride: null,
+            sourceFileOverrides: null,
+        });
+        const nodePathMutation = (0, sequence_node_path_mutation_1.broadcastSequenceNodePathMutation)([
+            {
+                absolutePath: fileName,
+                remappings: nodePathRemappings,
+            },
+        ], insertedNodePath === null
+            ? null
+            : {
+                absolutePath: fileName,
+                compositionId,
+                nodePath: insertedNodePath,
+            });
+        if (insertedNodePath === null) {
+            renderer_1.RenderInternals.Log.warn({ indent: false, logLevel }, 'Could not determine the inserted JSX element node path. Skipping automatic selection.');
+        }
+        (0, undo_stack_1.pushToUndoStack)({
+            filePath: fileName,
+            oldContents,
+            newContents: output,
+            logLevel,
+            remotionRoot,
+            logLine,
+            description: {
+                undoMessage: `↩️  Added ${elementLabel}`,
+                redoMessage: `↪️  Added ${elementLabel}`,
+            },
+            entryType: 'insert-composition-element',
+            suppressHmrOnFileRestore: false,
+            nodePathRemappings,
+        });
+        (0, undo_stack_1.suppressUndoStackInvalidation)(fileName);
+        (0, file_watcher_1.writeFileAndNotifyFileWatchers)({
+            file: fileName,
+            content: output,
+            originatorClientId: undefined,
+            metadata: { skipSequencePropsUpdate: true },
+        });
+        const locationLabel = (0, format_log_file_location_1.formatLogFileLocation)({
+            remotionRoot,
+            absolutePath: fileName,
+            line: logLine,
+        });
+        renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${(0, source_file_write_queue_1.getCodemodTimingPrefix)(logLevel)}${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} Added ${elementLabel}`);
+        renderer_1.RenderInternals.Log.verbose({ indent: false, logLevel }, `[insert-composition-element] Wrote ${source}`);
+        (0, undo_stack_1.printUndoHint)(logLevel);
+        return {
+            success: true,
+            insertedNodePath: insertedNodePath === null
+                ? null
+                : { absolutePath: fileName, nodePath: insertedNodePath },
+            nodePathMutation,
+        };
+    }
+    catch (err) {
+        return {
+            success: false,
+            reason: err.message,
+            stack: err.stack,
+        };
+    }
+});
+exports.insertCompositionElementHandler = insertCompositionElementHandler;

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

@@ -8,10 +8,11 @@ const node_fs_1 = require("node:fs");
 const node_path_1 = __importDefault(require("node:path"));
 const renderer_1 = require("@remotion/renderer");
 const studio_protocol_1 = require("@remotion/studio-protocol");
-const apply_codemod_to_file_1 = require("../../codemods/apply-codemod-to-file");
+const add_composition_to_file_1 = require("../../codemods/add-composition-to-file");
 const file_watcher_1 = require("../../file-watcher");
 const open_file_for_writing_without_symlinks_1 = require("../../helpers/open-file-for-writing-without-symlinks");
 const resolve_composition_component_1 = require("../../helpers/resolve-composition-component");
+const resolve_file_inside_project_1 = require("../../helpers/resolve-file-inside-project");
 const format_log_file_location_1 = require("../format-log-file-location");
 const project_info_1 = require("../project-info");
 const sequence_node_path_mutation_1 = require("../sequence-node-path-mutation");
@@ -32,7 +33,7 @@ const hasExpectedFileState = ({ expected, actual, }) => {
     }
     return actual.sourceHash === expected.sourceHash;
 };
-const insertElementHandler = async ({ input: { compositionFile, compositionId, element, installationName, expectedFileState, from, position, overwriteExisting, undoRedoNavigation, newComposition, }, entryPoint, remotionRoot, logLevel, publicDir, }) => {
+const insertElementHandler = async ({ input: { compositionFile, compositionId, element, installationName, expectedFileState, from, premountFor, position, overwriteExisting, undoRedoNavigation, newComposition, }, entryPoint, remotionRoot, logLevel, publicDir, }) => {
     var _a;
     let resolvedAssets;
     try {
@@ -52,8 +53,8 @@ const insertElementHandler = async ({ input: { compositionFile, compositionId, e
         };
     }
     return (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
-        var _a, _b, _c, _d, _e;
-        var _f, _g, _h, _j;
+        var _a, _b, _c, _d, _e, _f;
+        var _g, _h, _j, _k;
         const createdAssets = [];
         const changedSources = [];
         let undoEntryPushed = false;
@@ -86,11 +87,15 @@ const insertElementHandler = async ({ input: { compositionFile, compositionId, e
             let compositionCreation = null;
             let sourceFileOverrides = null;
             if (newComposition !== null) {
-                if (newComposition.codemod.newId !== compositionId) {
+                if (newComposition.options.newId !== compositionId) {
                     throw new Error('New composition ID does not match installation target');
                 }
-                const registrationFilePath = newComposition.symbolicatedStack
-                    ? (0, apply_codemod_to_file_1.resolveFilePathFromSymbolicatedStack)(remotionRoot, newComposition.symbolicatedStack)
+                const registrationFilePath = ((_b = newComposition.symbolicatedStack) === null || _b === void 0 ? void 0 : _b.originalFileName)
+                    ? (0, resolve_file_inside_project_1.resolveFileInsideProject)({
+                        remotionRoot,
+                        fileName: newComposition.symbolicatedStack.originalFileName,
+                        action: 'add a composition to',
+                    }).absolutePath
                     : (await (0, project_info_1.getProjectInfo)(remotionRoot, entryPoint)).rootFile;
                 if (registrationFilePath === null) {
                     throw new Error('Cannot find file for composition in project');
@@ -99,17 +104,18 @@ const insertElementHandler = async ({ input: { compositionFile, compositionId, e
                 if (node_path_1.default.resolve(remotionRoot, compositionFile) !== registrationFilePath) {
                     throw new Error('New composition source does not match installation target');
                 }
-                const componentFilePath = node_path_1.default.join(node_path_1.default.dirname(registrationFilePath), `${newComposition.codemod.componentName}.tsx`);
+                const componentFilePath = node_path_1.default.join(node_path_1.default.dirname(registrationFilePath), `${newComposition.options.componentName}.tsx`);
                 if ((0, node_fs_1.existsSync)(componentFilePath)) {
                     throw new Error(`Cannot create ${node_path_1.default.relative(remotionRoot, componentFilePath)} because it already exists`);
                 }
                 const registrationFileOldContents = (0, node_fs_1.readFileSync)(registrationFilePath, 'utf-8');
-                const codemodResult = await (0, apply_codemod_to_file_1.applyCodemodToFile)({
+                const codemodResult = await (0, add_composition_to_file_1.addCompositionToFile)({
                     filePath: registrationFilePath,
-                    codeMod: newComposition.codemod,
+                    options: newComposition.options,
+                    remotionRoot,
                 });
-                const registrationFileNewContents = (_f = (_b = codemodResult.changes.find((change) => change.filePath === registrationFilePath)) === null || _b === void 0 ? void 0 : _b.nextContents) !== null && _f !== void 0 ? _f : registrationFileOldContents;
-                const componentFileContents = (_c = codemodResult.changes.find((change) => change.filePath === componentFilePath)) === null || _c === void 0 ? void 0 : _c.nextContents;
+                const registrationFileNewContents = (_g = (_c = codemodResult.changes.find((change) => change.filePath === registrationFilePath)) === null || _c === void 0 ? void 0 : _c.nextContents) !== null && _g !== void 0 ? _g : registrationFileOldContents;
+                const componentFileContents = (_d = codemodResult.changes.find((change) => change.filePath === componentFilePath)) === null || _d === void 0 ? void 0 : _d.nextContents;
                 if (componentFileContents === null ||
                     componentFileContents === undefined) {
                     throw new Error('Could not create the composition component');
@@ -191,7 +197,7 @@ const insertElementHandler = async ({ input: { compositionFile, compositionId, e
                     importName: plan.componentName,
                     importPath: plan.importPath,
                     props: [
-                        ...Object.entries((_g = element.initialProps) !== null && _g !== void 0 ? _g : {}).map(([name, value]) => ({ name, value })),
+                        ...Object.entries((_h = element.initialProps) !== null && _h !== void 0 ? _h : {}).map(([name, value]) => ({ name, value })),
                         ...(componentOwnsSequence && element.durationInFrames !== null
                             ? [
                                 {
@@ -207,6 +213,7 @@ const insertElementHandler = async ({ input: { compositionFile, compositionId, e
                     position: componentOwnsSequence ? position : null,
                 },
                 from: componentOwnsSequence ? from : null,
+                premountFor,
                 prettierConfigOverride: null,
                 wrapInSequence: componentOwnsSequence
                     ? null
@@ -282,7 +289,7 @@ const insertElementHandler = async ({ input: { compositionFile, compositionId, e
                     try {
                         (0, node_fs_1.unlinkSync)(asset.absolutePath);
                     }
-                    catch (_k) {
+                    catch (_l) {
                         // Keep the original write error.
                     }
                     throw error;
@@ -321,7 +328,7 @@ const insertElementHandler = async ({ input: { compositionFile, compositionId, e
                                 filePath: compositionCreation.registrationFilePath,
                                 oldContents: compositionCreation.registrationFileOldContents,
                                 newContents: compositionCreation.registrationFileNewContents,
-                                logLine: (_h = (_d = newComposition === null || newComposition === void 0 ? void 0 : newComposition.symbolicatedStack) === null || _d === void 0 ? void 0 : _d.originalLineNumber) !== null && _h !== void 0 ? _h : 1,
+                                logLine: (_j = (_e = newComposition === null || newComposition === void 0 ? void 0 : newComposition.symbolicatedStack) === null || _e === void 0 ? void 0 : _e.originalLineNumber) !== null && _j !== void 0 ? _j : 1,
                                 nodePathRemappings: null,
                             },
                         ]),
@@ -355,7 +362,7 @@ const insertElementHandler = async ({ input: { compositionFile, compositionId, e
                         undoMessage: `↩️  Installation of ${element.displayName} into composition "${compositionId}"`,
                         redoMessage: `↪️  Installation of ${element.displayName} into composition "${compositionId}"`,
                     },
-                entryType: 'insert-jsx-element',
+                entryType: 'insert-composition-element',
                 suppressHmrOnFileRestore: false,
                 undoRedoNavigation,
             });
@@ -390,7 +397,7 @@ const insertElementHandler = async ({ input: { compositionFile, compositionId, e
                 renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${(0, source_file_write_queue_1.getCodemodTimingPrefix)(logLevel)}${renderer_1.RenderInternals.chalk.blueBright((0, format_log_file_location_1.formatLogFileLocation)({
                     remotionRoot,
                     absolutePath: compositionCreation.registrationFilePath,
-                    line: (_j = (_e = newComposition.symbolicatedStack) === null || _e === void 0 ? void 0 : _e.originalLineNumber) !== null && _j !== void 0 ? _j : 1,
+                    line: (_k = (_f = newComposition.symbolicatedStack) === null || _f === void 0 ? void 0 : _f.originalLineNumber) !== null && _k !== void 0 ? _k : 1,
                 }))} Created composition "${compositionId}"`);
             }
             const compositionLocationLabel = (0, format_log_file_location_1.formatLogFileLocation)({
@@ -434,7 +441,7 @@ const insertElementHandler = async ({ input: { compositionFile, compositionId, e
                         });
                     }
                 }
-                catch (_l) {
+                catch (_m) {
                     // Preserve subsequent user changes and the original installation error.
                 }
             }
@@ -444,7 +451,7 @@ const insertElementHandler = async ({ input: { compositionFile, compositionId, e
                         (0, node_fs_1.unlinkSync)(asset.absolutePath);
                     }
                 }
-                catch (_m) {
+                catch (_o) {
                     // Preserve subsequent user changes and the original installation error.
                 }
             }