@remotion/studio-server 4.0.524 → 4.0.525

package/dist/codemods/update-sequence-props/update-sequence-props.js

@@ -3,72 +3,34 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.updateSequenceProps = exports.updateMultipleSequenceProps = exports.updateSequencePropsAst = void 0;
 const studio_codemods_1 = require("@remotion/studio-codemods");
 Object.defineProperty(exports, "updateSequencePropsAst", { enumerable: true, get: function () { return studio_codemods_1.updateSequencePropsAst; } });
-const format_file_content_1 = require("../format-file-content");
-const format_inline_content_1 = require("../format-inline-content");
-const updateMultipleSequenceProps = async ({ input, changes, prettierConfigOverride, ast: providedAst, }) => {
-    const { output: unformattedOutput, results, ast, openingElementRanges, } = (0, studio_codemods_1.updateMultipleSequenceProps)({
-        input,
-        changes,
-        ast: providedAst,
-    });
-    if (unformattedOutput === input) {
-        return { output: input, formatted: true, results, ast };
-    }
-    if ((openingElementRanges === null || openingElementRanges === void 0 ? void 0 : openingElementRanges.length) === 1) {
-        const [range] = openingElementRanges;
-        const openingElement = unformattedOutput.slice(range.start, range.end);
-        const formattableOpeningElement = range.selfClosing
-            ? openingElement
-            : openingElement.slice(0, -1) + ' />';
-        const lineStart = unformattedOutput.lastIndexOf('\n', range.start) + 1;
-        const linePrefix = unformattedOutput.slice(lineStart, range.start);
-        const { formatted: formattedOpeningElement, didFormat } = await (0, format_inline_content_1.formatInlineContent)({
-            inlineContent: formattableOpeningElement,
-            linePrefix,
-            endOfLine: 'lf',
+const updateMultipleSequenceProps = ({ input, changes, prettierConfigOverride, ast: providedAst, }) => {
+    return Promise.resolve().then(() => {
+        const { output, results, ast } = (0, studio_codemods_1.updateMultipleSequenceProps)({
+            input,
+            changes,
+            ast: providedAst,
             prettierConfigOverride,
         });
-        let finalOpeningElement = formattedOpeningElement;
-        if (!range.selfClosing) {
-            const slashIndex = finalOpeningElement.lastIndexOf('/>');
-            if (slashIndex !== finalOpeningElement.length - 2) {
-                throw new Error('Could not format JSX opening element');
-            }
-            const lastLineStart = finalOpeningElement.lastIndexOf('\n') + 1;
-            const beforeSlash = finalOpeningElement.slice(lastLineStart, slashIndex);
-            finalOpeningElement =
-                beforeSlash.trim().length === 0
-                    ? finalOpeningElement.slice(0, slashIndex) + '>'
-                    : finalOpeningElement.slice(0, slashIndex).trimEnd() + '>';
-        }
-        return {
-            output: unformattedOutput.slice(0, range.start) +
-                finalOpeningElement +
-                unformattedOutput.slice(range.end),
-            formatted: didFormat,
-            results,
-            ast,
-        };
-    }
-    const { output, formatted } = await (0, format_file_content_1.formatFileContent)({
-        input: unformattedOutput,
-        prettierConfigOverride,
+        return { output, formatted: true, results, ast };
     });
-    return { output, formatted, results, ast };
 };
 exports.updateMultipleSequenceProps = updateMultipleSequenceProps;
 const updateSequenceProps = async ({ input, nodePath, updates, schema, prettierConfigOverride, videoConfigValues, }) => {
-    const { serialized, oldValueStrings, logLine, removedProps } = (0, studio_codemods_1.updateSequencePropsAst)({
+    const { output, results } = await (0, exports.updateMultipleSequenceProps)({
         input,
-        nodePath,
-        updates,
-        schema,
-        videoConfigValues,
-    });
-    const { output, formatted } = await (0, format_file_content_1.formatFileContent)({
-        input: serialized,
+        changes: [{ nodePath, updates, schema, videoConfigValues }],
         prettierConfigOverride,
     });
-    return { output, oldValueStrings, formatted, logLine, removedProps };
+    const result = results[0];
+    if (!result) {
+        throw new Error('Expected sequence prop update result');
+    }
+    return {
+        output,
+        oldValueStrings: result.oldValueStrings,
+        formatted: true,
+        logLine: result.logLine,
+        removedProps: result.removedProps,
+    };
 };
 exports.updateSequenceProps = updateSequenceProps;

package/dist/helpers/resolve-composition-component.d.ts

@@ -12,7 +12,7 @@ export declare const resolveCompositionComponent: ({ remotionRoot, compositionFi
     compositionFile: string;
     compositionId: string;
 }) => Promise<ResolvedCompositionComponent>;
-export declare const insertJsxElementIntoComposition: ({ remotionRoot, compositionFile, compositionId, element, from, prettierConfigOverride, wrapInSequence, }: {
+export declare const insertJsxElementIntoComposition: ({ remotionRoot, compositionFile, compositionId, element, from, prettierConfigOverride, wrapInSequence, sourceFileOverrides, }: {
     remotionRoot: string;
     compositionFile: string;
     compositionId: string;
@@ -29,6 +29,7 @@ export declare const insertJsxElementIntoComposition: ({ remotionRoot, compositi
         name: string | null;
         position: InsertableCompositionElementPosition | null;
     } | null | undefined;
+    sourceFileOverrides: ReadonlyMap<string, string> | null;
 }) => Promise<{
     fileName: string;
     source: string;

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

@@ -8,14 +8,20 @@ const node_fs_1 = __importDefault(require("node:fs"));
 const node_path_1 = __importDefault(require("node:path"));
 const studio_codemods_1 = require("@remotion/studio-codemods");
 const svg_to_jsx_1 = require("./svg-to-jsx");
-const makeCodemodEnvironment = (remotionRoot) => ({
+const makeCodemodEnvironment = (remotionRoot, sourceFileOverrides) => ({
     dirname: node_path_1.default.dirname,
     extname: node_path_1.default.extname,
-    fileExists: (fileName) => node_fs_1.default.existsSync(fileName) && node_fs_1.default.statSync(fileName).isFile(),
+    fileExists: (fileName) => (sourceFileOverrides === null || sourceFileOverrides === void 0 ? void 0 : sourceFileOverrides.has(node_path_1.default.resolve(fileName))) === true ||
+        (node_fs_1.default.existsSync(fileName) && node_fs_1.default.statSync(fileName).isFile()),
     isAbsolute: node_path_1.default.isAbsolute,
     join: node_path_1.default.join,
     pathSeparator: node_path_1.default.sep,
-    readFile: (fileName) => node_fs_1.default.promises.readFile(fileName, 'utf-8'),
+    readFile: (fileName) => {
+        const override = sourceFileOverrides === null || sourceFileOverrides === void 0 ? void 0 : sourceFileOverrides.get(node_path_1.default.resolve(fileName));
+        return override === undefined
+            ? node_fs_1.default.promises.readFile(fileName, 'utf-8')
+            : Promise.resolve(override);
+    },
     relative: node_path_1.default.relative,
     resolve: node_path_1.default.resolve,
     rootDir: remotionRoot,
@@ -24,22 +30,22 @@ const makeCodemodEnvironment = (remotionRoot) => ({
 const resolveCompositionComponentWithFile = ({ remotionRoot, compositionFile, compositionId, }) => (0, studio_codemods_1.resolveCompositionComponentWithFile)({
     compositionFile,
     compositionId,
-    environment: makeCodemodEnvironment(remotionRoot),
+    environment: makeCodemodEnvironment(remotionRoot, null),
 });
 exports.resolveCompositionComponentWithFile = resolveCompositionComponentWithFile;
 const resolveCompositionComponent = ({ remotionRoot, compositionFile, compositionId, }) => (0, studio_codemods_1.resolveCompositionComponent)({
     compositionFile,
     compositionId,
-    environment: makeCodemodEnvironment(remotionRoot),
+    environment: makeCodemodEnvironment(remotionRoot, null),
 });
 exports.resolveCompositionComponent = resolveCompositionComponent;
-const insertJsxElementIntoComposition = ({ remotionRoot, compositionFile, compositionId, element, from, prettierConfigOverride, wrapInSequence = null, }) => {
+const insertJsxElementIntoComposition = ({ remotionRoot, compositionFile, compositionId, element, from, prettierConfigOverride, wrapInSequence = null, sourceFileOverrides, }) => {
     var _a;
     return (0, studio_codemods_1.insertJsxElementIntoComposition)({
         compositionFile,
         compositionId,
         element,
-        environment: makeCodemodEnvironment(remotionRoot),
+        environment: makeCodemodEnvironment(remotionRoot, sourceFileOverrides),
         from,
         prettierConfigOverride,
         wrapInSequence: wrapInSequence === null

package/dist/preview-server/api-routes.js

@@ -25,6 +25,8 @@ const duplicate_jsx_node_1 = require("./routes/duplicate-jsx-node");
 const find_in_file_1 = require("./routes/find-in-file");
 const insert_element_1 = require("./routes/insert-element");
 const insert_jsx_element_1 = require("./routes/insert-jsx-element");
+const install_remotion_skill_1 = require("./routes/install-remotion-skill");
+const invalidate_bundle_1 = require("./routes/invalidate-bundle");
 const log_studio_error_1 = require("./routes/log-studio-error");
 const move_keyframes_1 = require("./routes/move-keyframes");
 const open_in_editor_1 = require("./routes/open-in-editor");
@@ -64,6 +66,7 @@ const update_element_install_target_1 = require("./routes/update-element-install
 const update_sequence_keyframe_settings_1 = require("./routes/update-sequence-keyframe-settings");
 const upgrade_remotion_1 = require("./routes/upgrade-remotion");
 exports.allApiRoutes = {
+    '/api/invalidate-bundle': invalidate_bundle_1.invalidateBundleHandler,
     '/api/composition-component-info': composition_component_info_1.compositionComponentInfoHandler,
     '/api/copy-render-output-to-asset': copy_render_output_to_asset_1.copyRenderOutputToAssetHandler,
     '/api/convert-figma-clipboard-to-svg': convert_figma_clipboard_to_svg_1.convertFigmaClipboardToSvgHandler,
@@ -111,6 +114,8 @@ exports.allApiRoutes = {
     '/api/update-available': update_available_1.handleUpdate,
     '/api/release-notes': release_notes_1.getReleaseNotesHandler,
     '/api/remotion-skills-info': remotion_skills_info_1.remotionSkillsInfoHandler,
+    '/api/install-remotion-skill': install_remotion_skill_1.installRemotionSkillHandler,
+    '/api/remove-remotion-skill': install_remotion_skill_1.removeRemotionSkillHandler,
     '/api/project-info': project_info_1.projectInfoHandler,
     '/api/delete-static-file': delete_static_file_1.deleteStaticFileHandler,
     '/api/rename-static-file': rename_static_file_1.renameStaticFileHandler,

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

@@ -179,6 +179,7 @@ const addKeyframes = async ({ sequenceKeyframes, effectKeyframes, clientId, remo
                 ? 'sequence-props'
                 : 'effect-props',
         suppressHmrOnFileRestore: true,
+        undoRedoNavigation: null,
     });
     for (const snapshot of snapshots) {
         (0, undo_stack_1.suppressUndoStackInvalidation)(snapshot.filePath);

package/dist/preview-server/routes/apply-codemod.d.ts

@@ -1,4 +1,23 @@
 import type { ApplyCodemodRequest, ApplyCodemodResponse } from '@remotion/studio-shared';
 import type { ApiHandler } from '../api-types';
+export declare const formatNewCompositionFile: (codemod: {
+    type: "new-composition";
+    newId: string;
+    componentName: string;
+    componentImportPath: string;
+    folderName: string | null;
+    parentName: string | null;
+    newHeight: number;
+    newWidth: number;
+    newFps: number;
+    newDurationInFrames: number;
+    canvasCapture: {
+        readonly videoFileName: string;
+        readonly videoHeight: number;
+        readonly videoWidth: number;
+        readonly keyframeFps: number;
+        readonly data: import("@remotion/studio-shared").CanvasCaptureData;
+    } | null;
+}) => string;
 export declare const getCodemodLogMessage: (codemod: import("@remotion/studio-shared").RecastCodemod) => string;
 export declare const applyCodemodHandler: ApiHandler<ApplyCodemodRequest, ApplyCodemodResponse>;

package/dist/preview-server/routes/apply-codemod.js

@@ -3,12 +3,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.applyCodemodHandler = exports.getCodemodLogMessage = void 0;
+exports.applyCodemodHandler = exports.getCodemodLogMessage = exports.formatNewCompositionFile = void 0;
 const node_fs_1 = require("node:fs");
 const node_path_1 = __importDefault(require("node:path"));
 const renderer_1 = require("@remotion/renderer");
 const studio_codemods_1 = require("@remotion/studio-codemods");
-const generate_canvas_capture_composition_1 = require("../../canvas-capture/generate-canvas-capture-composition");
 const apply_codemod_to_file_1 = require("../../codemods/apply-codemod-to-file");
 const file_watcher_1 = require("../../file-watcher");
 const format_log_file_location_1 = require("../format-log-file-location");
@@ -16,29 +15,8 @@ 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 formatNewCompositionFile = (codemod) => {
-    if (codemod.canvasCapture !== null) {
-        return (0, generate_canvas_capture_composition_1.generateCanvasCaptureComposition)({
-            componentName: codemod.componentName,
-            compositionId: codemod.newId,
-            data: codemod.canvasCapture.data,
-            durationInFrames: codemod.newDurationInFrames,
-            fps: codemod.newFps,
-            height: codemod.newHeight,
-            keyframeFps: codemod.canvasCapture.keyframeFps,
-            videoFileName: codemod.canvasCapture.videoFileName,
-            videoHeight: codemod.canvasCapture.videoHeight,
-            videoWidth: codemod.canvasCapture.videoWidth,
-            width: codemod.newWidth,
-        });
-    }
-    return `import React from 'react';
-
-export const ${codemod.componentName}: React.FC = () => {
-	return null;
-};
-`;
-};
+const formatNewCompositionFile = (codemod) => (0, studio_codemods_1.makeNewCompositionComponentSource)(codemod);
+exports.formatNewCompositionFile = formatNewCompositionFile;
 const getFolderPath = (parentName, folderName) => {
     return parentName ? `${parentName}/${folderName}` : folderName;
 };
@@ -184,7 +162,7 @@ const getCodemodUndoDescription = (codemod) => {
         entryType: 'visual-control',
     };
 };
-const applyCodemodHandler = ({ input: { codemod, dryRun, symbolicatedStack }, logLevel, remotionRoot, entryPoint, }) => {
+const applyCodemodHandler = ({ input: { codemod, dryRun, symbolicatedStack, undoRedoNavigation }, logLevel, remotionRoot, entryPoint, }) => {
     return (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
         var _a;
         try {
@@ -231,7 +209,7 @@ const applyCodemodHandler = ({ input: { codemod, dryRun, symbolicatedStack }, lo
                     if (componentFilePath === null) {
                         throw new Error('Could not determine the new component file path');
                     }
-                    componentFileContents = await formatNewCompositionFile(codemod);
+                    componentFileContents = await (0, exports.formatNewCompositionFile)(codemod);
                     snapshots.push({
                         filePath: componentFilePath,
                         oldContents: null,
@@ -239,35 +217,19 @@ const applyCodemodHandler = ({ input: { codemod, dryRun, symbolicatedStack }, lo
                         logLine: 1,
                         nodePathRemappings: null,
                     });
-                    (0, undo_stack_1.pushTransactionToUndoStack)({
-                        snapshots,
-                        logLevel,
-                        remotionRoot,
-                        description: {
-                            undoMessage,
-                            redoMessage,
-                        },
-                        entryType,
-                        suppressHmrOnFileRestore: false,
-                    });
-                }
-                else {
-                    (0, undo_stack_1.pushToUndoStack)({
-                        filePath,
-                        oldContents: input,
-                        newContents: null,
-                        logLevel,
-                        remotionRoot,
-                        logLine,
-                        description: {
-                            undoMessage,
-                            redoMessage,
-                        },
-                        entryType,
-                        suppressHmrOnFileRestore: false,
-                        nodePathRemappings: null,
-                    });
                 }
+                (0, undo_stack_1.pushTransactionToUndoStack)({
+                    snapshots,
+                    logLevel,
+                    remotionRoot,
+                    description: {
+                        undoMessage,
+                        redoMessage,
+                    },
+                    entryType,
+                    suppressHmrOnFileRestore: false,
+                    undoRedoNavigation,
+                });
                 (0, undo_stack_1.suppressUndoStackInvalidation)(filePath);
                 if (componentFilePath) {
                     (0, undo_stack_1.suppressUndoStackInvalidation)(componentFilePath);

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

@@ -151,6 +151,7 @@ const batchUpdateKeyframeSettings = async ({ sequenceKeyframes, effectKeyframes,
             },
         entryType: sequenceKeyframes.length > 0 ? 'sequence-props' : 'effect-props',
         suppressHmrOnFileRestore: true,
+        undoRedoNavigation: null,
     });
     for (const snapshot of snapshots) {
         (0, undo_stack_1.suppressUndoStackInvalidation)(snapshot.filePath);

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

@@ -186,6 +186,7 @@ const deleteKeyframes = async ({ sequenceKeyframes, effectKeyframes, clientId, r
                 ? 'sequence-props'
                 : 'effect-props',
         suppressHmrOnFileRestore: true,
+        undoRedoNavigation: null,
     });
     for (const snapshot of snapshots) {
         (0, undo_stack_1.suppressUndoStackInvalidation)(snapshot.filePath);

package/dist/preview-server/routes/duplicate-jsx-node.js

@@ -70,6 +70,7 @@ const duplicateJsxNodeHandler = ({ input: { nodes }, remotionRoot, logLevel }) =
                 },
                 entryType: 'duplicate-jsx-node',
                 suppressHmrOnFileRestore: false,
+                undoRedoNavigation: null,
             });
             for (const update of updates) {
                 (0, undo_stack_1.suppressUndoStackInvalidation)(update.absolutePath);

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

@@ -1,12 +1,21 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 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 renderer_1 = require("@remotion/renderer");
+const apply_codemod_to_file_1 = require("../../codemods/apply-codemod-to-file");
 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 project_info_1 = require("../project-info");
 const sequence_node_path_mutation_1 = require("../sequence-node-path-mutation");
 const undo_stack_1 = require("../undo-stack");
+const apply_codemod_1 = require("./apply-codemod");
+const can_update_default_props_1 = require("./can-update-default-props");
 const element_install_plan_1 = require("./element-install-plan");
 const source_file_write_queue_1 = require("./source-file-write-queue");
 const hasExpectedFileState = ({ expected, actual, }) => {
@@ -21,9 +30,9 @@ const hasExpectedFileState = ({ expected, actual, }) => {
     }
     return actual.sourceHash === expected.sourceHash;
 };
-const insertElementHandler = ({ input: { compositionFile, compositionId, element, installationName, expectedFileState, from, position, overwriteExisting, }, entryPoint, remotionRoot, logLevel, }) => (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
-    var _a;
-    var _b;
+const insertElementHandler = ({ input: { compositionFile, compositionId, element, installationName, expectedFileState, from, position, overwriteExisting, undoRedoNavigation, newComposition, }, entryPoint, remotionRoot, logLevel, }) => (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
+    var _a, _b, _c;
+    var _d, _e, _f;
     try {
         (0, element_install_plan_1.validateElementInstallPosition)(position);
         if (from !== null &&
@@ -50,13 +59,57 @@ const insertElementHandler = ({ input: { compositionFile, compositionId, element
             throw new Error('Component-owned Element initial style must be an object');
         }
         renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[insert-element] Received request for compositionFile="${compositionFile}" compositionId="${compositionId}" element="${element.slug}"`);
-        const plan = await (0, element_install_plan_1.getElementInstallPlan)({
-            installationName,
-            destination: {
+        let compositionCreation = null;
+        let sourceFileOverrides = null;
+        if (newComposition !== null) {
+            if (newComposition.codemod.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)
+                : (await (0, project_info_1.getProjectInfo)(remotionRoot, entryPoint)).rootFile;
+            if (registrationFilePath === null) {
+                throw new Error('Cannot find file for composition in project');
+            }
+            (0, can_update_default_props_1.checkIfTypeScriptFile)(registrationFilePath);
+            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`);
+            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 registrationFileNewContents = await (0, apply_codemod_to_file_1.applyCodemodToFile)({
+                filePath: registrationFilePath,
+                codeMod: newComposition.codemod,
+            });
+            const componentFileContents = await (0, apply_codemod_1.formatNewCompositionFile)(newComposition.codemod);
+            compositionCreation = {
+                componentFileContents,
+                componentFilePath,
+                registrationFileNewContents,
+                registrationFileOldContents,
+                registrationFilePath,
+            };
+            sourceFileOverrides = new Map([
+                [registrationFilePath, registrationFileNewContents],
+                [componentFilePath, componentFileContents],
+            ]);
+        }
+        const installDestination = newComposition === null
+            ? {
                 type: 'current-composition',
                 compositionFile,
                 compositionId,
-            },
+            }
+            : {
+                type: 'new-composition',
+                compositionFile,
+            };
+        const plan = await (0, element_install_plan_1.getElementInstallPlan)({
+            installationName,
+            destination: installDestination,
             element,
             entryPoint,
             remotionRoot,
@@ -93,8 +146,13 @@ const insertElementHandler = ({ input: { compositionFile, compositionId, element
                 },
             };
         }
+        if (compositionCreation !== null &&
+            plan.elementFileName ===
+                node_path_1.default.join(node_path_1.default.dirname(plan.safePaths.compositionFileName), node_path_1.default.basename(compositionCreation.componentFilePath))) {
+            throw new Error('Element source file conflicts with the new composition file');
+        }
         const shouldWriteElementFile = !plan.elementFileExists || elementSourcesDiffer;
-        const inserted = await (0, resolve_composition_component_1.insertJsxElementIntoComposition)({
+        const insertionInput = {
             remotionRoot,
             compositionFile,
             compositionId,
@@ -104,7 +162,7 @@ const insertElementHandler = ({ input: { compositionFile, compositionId, element
                 importName: plan.componentName,
                 importPath: plan.importPath,
                 props: [
-                    ...Object.entries((_b = element.initialProps) !== null && _b !== void 0 ? _b : {}).map(([name, value]) => ({ name, value })),
+                    ...Object.entries((_d = element.initialProps) !== null && _d !== void 0 ? _d : {}).map(([name, value]) => ({ name, value })),
                     ...(componentOwnsSequence && element.durationInFrames !== null
                         ? [
                             {
@@ -130,14 +188,18 @@ const insertElementHandler = ({ input: { compositionFile, compositionId, element
                     name: element.displayName,
                     position,
                 },
+        };
+        const inserted = await (0, resolve_composition_component_1.insertJsxElementIntoComposition)({
+            ...insertionInput,
+            sourceFileOverrides,
         });
+        if (compositionCreation !== null &&
+            inserted.fileName !== compositionCreation.componentFilePath) {
+            throw new Error('New composition component does not match installation target');
+        }
         const finalPlan = await (0, element_install_plan_1.getElementInstallPlan)({
             installationName,
-            destination: {
-                type: 'current-composition',
-                compositionFile,
-                compositionId,
-            },
+            destination: installDestination,
             element,
             entryPoint,
             remotionRoot,
@@ -152,6 +214,12 @@ const insertElementHandler = ({ input: { compositionFile, compositionId, element
         })) {
             throw new Error('Element source changed during installation');
         }
+        if (compositionCreation !== null &&
+            ((0, node_fs_1.readFileSync)(compositionCreation.registrationFilePath, 'utf-8') !==
+                compositionCreation.registrationFileOldContents ||
+                (0, node_fs_1.existsSync)(compositionCreation.componentFilePath))) {
+            throw new Error('Composition source changed during Element installation');
+        }
         const nodePathMutation = (0, sequence_node_path_mutation_1.broadcastSequenceNodePathMutation)([
             {
                 absolutePath: inserted.fileName,
@@ -160,6 +228,17 @@ const insertElementHandler = ({ input: { compositionFile, compositionId, element
         ], null);
         (0, undo_stack_1.pushTransactionToUndoStack)({
             snapshots: [
+                ...(compositionCreation === null
+                    ? []
+                    : [
+                        {
+                            filePath: compositionCreation.registrationFilePath,
+                            oldContents: compositionCreation.registrationFileOldContents,
+                            newContents: compositionCreation.registrationFileNewContents,
+                            logLine: (_e = (_b = newComposition === null || newComposition === void 0 ? void 0 : newComposition.symbolicatedStack) === null || _b === void 0 ? void 0 : _b.originalLineNumber) !== null && _e !== void 0 ? _e : 1,
+                            nodePathRemappings: null,
+                        },
+                    ]),
                 ...(shouldWriteElementFile
                     ? [
                         {
@@ -173,7 +252,7 @@ const insertElementHandler = ({ input: { compositionFile, compositionId, element
                     : []),
                 {
                     filePath: inserted.fileName,
-                    oldContents: inserted.oldContents,
+                    oldContents: compositionCreation === null ? inserted.oldContents : null,
                     newContents: inserted.output,
                     logLine: inserted.logLine,
                     nodePathRemappings: inserted.nodePathRemappings,
@@ -181,17 +260,34 @@ const insertElementHandler = ({ input: { compositionFile, compositionId, element
             ],
             logLevel,
             remotionRoot,
-            description: {
-                undoMessage: `↩️  Added ${element.displayName}`,
-                redoMessage: `↪️  Added ${element.displayName}`,
-            },
+            description: newComposition === null
+                ? {
+                    undoMessage: `↩️  Added ${element.displayName}`,
+                    redoMessage: `↪️  Added ${element.displayName}`,
+                }
+                : {
+                    undoMessage: `↩️  Installation of ${element.displayName} into composition "${compositionId}"`,
+                    redoMessage: `↪️  Installation of ${element.displayName} into composition "${compositionId}"`,
+                },
             entryType: 'insert-jsx-element',
             suppressHmrOnFileRestore: false,
+            undoRedoNavigation,
         });
+        if (compositionCreation !== null) {
+            (0, undo_stack_1.suppressUndoStackInvalidation)(compositionCreation.registrationFilePath);
+        }
         if (shouldWriteElementFile) {
             (0, undo_stack_1.suppressUndoStackInvalidation)(plan.elementFileName);
         }
         (0, undo_stack_1.suppressUndoStackInvalidation)(inserted.fileName);
+        if (compositionCreation !== null) {
+            (0, file_watcher_1.writeFileAndNotifyFileWatchers)({
+                file: compositionCreation.registrationFilePath,
+                content: compositionCreation.registrationFileNewContents,
+                originatorClientId: undefined,
+                metadata: null,
+            });
+        }
         if (shouldWriteElementFile) {
             (0, file_watcher_1.writeFileAndNotifyFileWatchers)({
                 file: plan.elementFileName,
@@ -206,6 +302,13 @@ const insertElementHandler = ({ input: { compositionFile, compositionId, element
             originatorClientId: undefined,
             metadata: { skipSequencePropsUpdate: true },
         });
+        if (newComposition !== null && compositionCreation !== null) {
+            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: (_f = (_c = newComposition.symbolicatedStack) === null || _c === void 0 ? void 0 : _c.originalLineNumber) !== null && _f !== void 0 ? _f : 1,
+            }))} Created composition "${compositionId}"`);
+        }
         const compositionLocationLabel = (0, format_log_file_location_1.formatLogFileLocation)({
             remotionRoot,
             absolutePath: inserted.fileName,

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

@@ -165,6 +165,7 @@ const insertJsxElementHandler = ({ input: { compositionFile, compositionId, elem
             element,
             from,
             prettierConfigOverride: null,
+            sourceFileOverrides: null,
         });
         const nodePathMutation = (0, sequence_node_path_mutation_1.broadcastSequenceNodePathMutation)([
             {

package/dist/preview-server/routes/install-remotion-skill.d.ts

@@ -0,0 +1,4 @@
+import type { GetRemotionSkillsInfoResponse, InstallRemotionSkillRequest, RemoveRemotionSkillRequest } from '@remotion/studio-shared';
+import type { ApiHandler } from '../api-types';
+export declare const installRemotionSkillHandler: ApiHandler<InstallRemotionSkillRequest, GetRemotionSkillsInfoResponse>;
+export declare const removeRemotionSkillHandler: ApiHandler<RemoveRemotionSkillRequest, GetRemotionSkillsInfoResponse>;