@remotion/studio-server 4.0.518 → 4.0.520

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

@@ -9,10 +9,7 @@ export declare const deleteJsxNodes: ({ input, nodePaths, }: {
     formatted: boolean;
     nodeLabels: string[];
     logLines: number[];
-    nodePathRemappings: {
-        oldNodePath: SequenceNodePath;
-        newNodePath: SequenceNodePath | null;
-    }[];
+    nodePathRemappings: import("@remotion/studio-shared").SequenceNodePathRemapping[];
 }>;
 export declare const deleteJsxNode: ({ input, nodePath, }: {
     input: string;

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

@@ -12,3 +12,14 @@ export declare const duplicateJsxNode: ({ input, nodePath, prettierConfigOverrid
     logLine: number;
     nodePathRemappings: import("@remotion/studio-shared").SequenceNodePathRemapping[];
 }>;
+export declare const duplicateJsxNodes: ({ input, nodePaths, prettierConfigOverride, }: {
+    input: string;
+    nodePaths: SequenceNodePath[];
+    prettierConfigOverride?: Record<string, unknown> | null | undefined;
+}) => Promise<{
+    output: string;
+    formatted: boolean;
+    nodeLabels: string[];
+    logLines: number[];
+    nodePathRemappings: import("@remotion/studio-shared").SequenceNodePathRemapping[];
+}>;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.duplicateJsxNode = exports.duplicateJsxElementAtPath = void 0;
+exports.duplicateJsxNodes = exports.duplicateJsxNode = exports.duplicateJsxElementAtPath = void 0;
 const studio_codemods_1 = require("@remotion/studio-codemods");
 Object.defineProperty(exports, "duplicateJsxElementAtPath", { enumerable: true, get: function () { return studio_codemods_1.duplicateJsxElementAtPath; } });
 const format_file_content_1 = require("./format-file-content");
@@ -14,3 +14,13 @@ const duplicateJsxNode = ({ input, nodePath, prettierConfigOverride, }) => (0, s
     prettierConfigOverride,
 });
 exports.duplicateJsxNode = duplicateJsxNode;
+const duplicateJsxNodes = ({ input, nodePaths, prettierConfigOverride, }) => (0, studio_codemods_1.duplicateJsxNodes)({
+    input,
+    nodePaths,
+    formatFile: ({ contents, prettierConfigOverride: override }) => (0, format_file_content_1.formatFileContent)({
+        input: contents,
+        prettierConfigOverride: override,
+    }),
+    prettierConfigOverride,
+});
+exports.duplicateJsxNodes = duplicateJsxNodes;

package/dist/codemods/get-node-path-remappings.d.ts

@@ -4,6 +4,7 @@ import type { SequenceNodePath } from 'remotion';
 export type CapturedJsxNodePath = {
     node: JSXOpeningElement;
     nodePath: SequenceNodePath;
+    signature: string;
 };
 export declare const captureJsxNodePaths: (ast: File) => CapturedJsxNodePath[];
 export declare const getNodePathRemappings: ({ ast, captured, output, }: {

package/dist/codemods/get-node-path-remappings.js

@@ -44,6 +44,7 @@ const captureJsxNodePaths = (ast) => {
             captured.push({
                 node: path.node,
                 nodePath: (0, can_update_sequence_props_1.getNodePathForRecastPath)(path, ast),
+                signature: recast.prettyPrint(path.node).code,
             });
             return this.traverse(path);
         },
@@ -74,15 +75,27 @@ const getNodePathRemappings = ({ ast, captured, output, }) => {
     for (let i = 0; i < nodesAfterMutation.length; i++) {
         finalNodePathByNode.set(nodesAfterMutation[i], finalNodePaths[i]);
     }
-    const nodePathRemappings = captured.flatMap(({ node, nodePath }) => {
+    const capturedNodes = new Set(captured.map(({ node }) => node));
+    const nodePathRemappings = captured.flatMap(({ node, nodePath, signature }) => {
         var _a;
         const newNodePath = (_a = finalNodePathByNode.get(node)) !== null && _a !== void 0 ? _a : null;
         if (newNodePath !== null &&
-            JSON.stringify(nodePath) === JSON.stringify(newNodePath)) {
+            JSON.stringify(nodePath) === JSON.stringify(newNodePath) &&
+            recast.prettyPrint(node).code === signature) {
             return [];
         }
         return [{ oldNodePath: nodePath, newNodePath }];
     });
+    for (const node of nodesAfterMutation) {
+        if (capturedNodes.has(node)) {
+            continue;
+        }
+        const newNodePath = finalNodePathByNode.get(node);
+        if (!newNodePath) {
+            throw new Error('Could not map inserted JSX node path');
+        }
+        nodePathRemappings.push({ oldNodePath: null, newNodePath });
+    }
     return { finalNodePathByNode, nodePathRemappings };
 };
 exports.getNodePathRemappings = getNodePathRemappings;

package/dist/codemods/split-video-from-audio.d.ts

@@ -8,8 +8,5 @@ export declare const splitVideoFromAudio: ({ input, nodePath, prettierConfigOver
     formatted: boolean;
     nodeLabel: string;
     logLine: number;
-    nodePathRemappings: {
-        oldNodePath: SequenceNodePath;
-        newNodePath: SequenceNodePath | null;
-    }[];
+    nodePathRemappings: import("@remotion/studio-shared").SequenceNodePathRemapping[];
 }>;

package/dist/helpers/open-in-editor.js

@@ -255,7 +255,7 @@ function getArgumentsForLineNumber(editor, fileName, lineNumber, colNumber) {
         editor.endsWith('/Zed Preview.app/Contents/MacOS/cli');
     const isFolder = node_fs_1.default.existsSync(fileName) && node_fs_1.default.lstatSync(fileName).isDirectory();
     if (isZedEditor) {
-        return [fileName + ':' + lineNumber + ':' + colNumber];
+        return ['--existing', fileName + ':' + lineNumber + ':' + colNumber];
     }
     switch (editorBasename) {
         case 'atom':

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

@@ -37,6 +37,7 @@ const prepare_element_install_1 = require("./routes/prepare-element-install");
 const project_info_1 = require("./routes/project-info");
 const redo_1 = require("./routes/redo");
 const register_client_render_1 = require("./routes/register-client-render");
+const release_notes_1 = require("./routes/release-notes");
 const remotion_skills_info_1 = require("./routes/remotion-skills-info");
 const remove_render_1 = require("./routes/remove-render");
 const rename_static_file_1 = require("./routes/rename-static-file");
@@ -107,6 +108,7 @@ exports.allApiRoutes = {
     '/api/split-jsx-sequence': split_jsx_sequence_1.splitJsxSequenceHandler,
     '/api/split-video-from-audio': split_video_from_audio_1.splitVideoFromAudioHandler,
     '/api/update-available': update_available_1.handleUpdate,
+    '/api/release-notes': release_notes_1.getReleaseNotesHandler,
     '/api/remotion-skills-info': remotion_skills_info_1.remotionSkillsInfoHandler,
     '/api/project-info': project_info_1.projectInfoHandler,
     '/api/delete-static-file': delete_static_file_1.deleteStaticFileHandler,

package/dist/preview-server/element-install-state.d.ts

@@ -5,7 +5,6 @@ export type ElementInstallTarget = {
     clientId: string;
     compositionFile: string | null;
     compositionId: string | null;
-    canInstall: boolean;
     lastFocusedAt: number | null;
     readOnly: boolean;
     studioUrl: string;

package/dist/preview-server/element-install-state.js

@@ -80,8 +80,7 @@ const consumeStudioProtocolTarget = ({ now, origin, purpose, targetId, }) => {
     if (purpose !== 'install-element') {
         return issued.target;
     }
-    if (!current.canInstall ||
-        current.compositionFile !== issued.target.compositionFile ||
+    if (current.compositionFile !== issued.target.compositionFile ||
         current.compositionId !== issued.target.compositionId) {
         return null;
     }

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

@@ -65,7 +65,6 @@ const deleteJsxNodeHandler = ({ input: { nodes }, remotionRoot, logLevel }) => {
             const nodePathMutation = (0, sequence_node_path_mutation_1.broadcastSequenceNodePathMutation)(updates.map((update) => ({
                 absolutePath: update.absolutePath,
                 remappings: update.nodePathRemappings,
-                restoredNodePaths: [],
             })));
             for (const update of updates) {
                 const deletedNodeDescription = getDeletedNodeDescription(update.nodeLabels);

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

@@ -11,56 +11,88 @@ const sequence_node_path_mutation_1 = require("../sequence-node-path-mutation");
 const undo_stack_1 = require("../undo-stack");
 const log_update_1 = require("./log-updates/log-update");
 const source_file_write_queue_1 = require("./source-file-write-queue");
-const duplicateJsxNodeHandler = ({ input: { fileName, nodePath }, remotionRoot, logLevel }) => {
+const duplicateJsxNodeHandler = ({ input: { nodes }, remotionRoot, logLevel }) => {
     return (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
+        var _a;
         try {
-            renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[duplicate-jsx-node] Received request for fileName="${fileName}"`);
-            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 { output, formatted, nodeLabel, logLine, nodePathRemappings } = await (0, duplicate_jsx_node_1.duplicateJsxNode)({ input: fileContents, nodePath });
-            const nodePathMutation = (0, sequence_node_path_mutation_1.broadcastSequenceNodePathMutation)([
-                {
+            if (nodes.length === 0) {
+                throw new Error('No JSX nodes were specified for duplication');
+            }
+            renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[duplicate-jsx-node] 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]) => {
+                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 { output, formatted, nodeLabels, logLines, nodePathRemappings } = await (0, duplicate_jsx_node_1.duplicateJsxNodes)({
+                    input: fileContents,
+                    nodePaths: fileItems.map((item) => item.nodePath),
+                });
+                return {
                     absolutePath,
-                    remappings: nodePathRemappings,
-                    restoredNodePaths: [],
-                },
-            ]);
-            (0, undo_stack_1.pushToUndoStack)({
-                filePath: absolutePath,
-                oldContents: fileContents,
-                newContents: null,
+                    fileRelativeToRoot,
+                    fileContents,
+                    formatted,
+                    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,
+            })));
+            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,
-                logLine,
                 description: {
-                    undoMessage: `↩️  Duplication of ${nodeLabel}`,
-                    redoMessage: `↪️  Duplication of ${nodeLabel}`,
+                    undoMessage: `↩️  Duplication of ${duplicatedNodeDescription}`,
+                    redoMessage: `↪️  Duplication of ${duplicatedNodeDescription}`,
                 },
                 entryType: 'duplicate-jsx-node',
                 suppressHmrOnFileRestore: false,
-                nodePathRemappings,
-            });
-            (0, undo_stack_1.suppressUndoStackInvalidation)(absolutePath);
-            (0, file_watcher_1.writeFileAndNotifyFileWatchers)({
-                file: absolutePath,
-                content: output,
-                originatorClientId: undefined,
-                metadata: { skipSequencePropsUpdate: true },
-            });
-            const locationLabel = (0, format_log_file_location_1.formatLogFileLocation)({
-                remotionRoot,
-                absolutePath,
-                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 ${nodeLabel}`);
-            if (!formatted) {
-                (0, log_update_1.warnAboutPrettierOnce)(logLevel);
+            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}`);
+                if (!update.formatted) {
+                    (0, log_update_1.warnAboutPrettierOnce)(logLevel);
+                }
+                renderer_1.RenderInternals.Log.verbose({ indent: false, logLevel }, `[duplicate-jsx-node] Wrote ${update.fileRelativeToRoot}${update.formatted ? ' (formatted)' : ''}`);
             }
-            renderer_1.RenderInternals.Log.verbose({ indent: false, logLevel }, `[duplicate-jsx-node] Wrote ${fileRelativeToRoot}${formatted ? ' (formatted)' : ''}`);
             (0, undo_stack_1.printUndoHint)(logLevel);
             return {
                 success: true,

package/dist/preview-server/routes/element-install-plan.d.ts

@@ -2,30 +2,24 @@ import type { ElementInstallExpectedFileState, PrepareElementInstallRequest } fr
 export declare const normalizeElementSourceForComparison: (source: string) => string;
 export declare const getElementSourceHash: (source: string) => string;
 export declare const validateElementInstallPosition: (position: import("@remotion/studio-shared").InsertableCompositionElementPosition | null) => void;
-export declare const validateElementForInstallation: (element: {
-    dependencies: import("@remotion/studio-protocol").ElementDependency[];
-    durationInFrames?: number | undefined;
-    installationMode?: import("@remotion/studio-protocol").ElementInstallationMode | undefined;
-    slug: string;
-    displayName: string;
-    sourceCode: string;
-    dimensions: import("@remotion/studio-protocol").ComponentDimensions | null;
-}) => void;
+export declare const validateElementForInstallation: (element: import("@remotion/studio-shared").InstallableElement) => void;
 export declare const makeRelativeElementImportPath: ({ fromFile, toFile, }: {
     fromFile: string;
     toFile: string;
 }) => string;
-export declare const getElementInstallPlan: ({ compositionFile, compositionId, element, remotionRoot, }: PrepareElementInstallRequest & {
+export declare const getElementInstallPlan: ({ destination, element, entryPoint, remotionRoot, }: PrepareElementInstallRequest & {
+    entryPoint: string;
     remotionRoot: string;
 }) => Promise<{
     componentName: string;
+    destinationCompositionFileName: string;
     elementFileExists: boolean;
     elementFileName: string;
     existingElementSource: string | null;
     expectedFileState: ElementInstallExpectedFileState;
     filePath: string;
     importPath: string;
-    location: import("@remotion/studio-codemods").ResolvedCompositionComponentWithFile;
+    location: import("@remotion/studio-codemods").ResolvedCompositionComponentWithFile | null;
     safePaths: {
         compositionFileName: string;
         elementFileName: string;

package/dist/preview-server/routes/element-install-plan.js

@@ -9,6 +9,7 @@ const node_fs_1 = require("node:fs");
 const node_path_1 = __importDefault(require("node:path"));
 const studio_protocol_1 = require("@remotion/studio-protocol");
 const resolve_composition_component_1 = require("../../helpers/resolve-composition-component");
+const project_info_1 = require("../project-info");
 const safe_element_install_path_1 = require("./safe-element-install-path");
 const normalizeElementSourceForComparison = (source) => {
     return source.replace(/\r\n/g, '\n').trim();
@@ -74,27 +75,38 @@ const getExpectedFileState = (existingSource) => {
         sourceHash: (0, exports.getElementSourceHash)(existingSource),
     };
 };
-const getElementInstallPlan = async ({ compositionFile, compositionId, element, remotionRoot, }) => {
+const getElementInstallPlan = async ({ destination, element, entryPoint, remotionRoot, }) => {
+    var _a;
     (0, exports.validateElementForInstallation)(element);
     const componentName = studio_protocol_1.StudioProtocolInternals.getElementComponentNameFromSourceCode(element.sourceCode);
     if (componentName === null) {
         throw new Error('Element source must export exactly one named component');
     }
-    const location = await (0, resolve_composition_component_1.resolveCompositionComponentWithFile)({
-        remotionRoot,
-        compositionFile,
-        compositionId,
-    });
-    if (!location.canAddSequence) {
+    const location = destination.type === 'current-composition'
+        ? await (0, resolve_composition_component_1.resolveCompositionComponentWithFile)({
+            remotionRoot,
+            compositionFile: destination.compositionFile,
+            compositionId: destination.compositionId,
+        })
+        : null;
+    if (location !== null && !location.canAddSequence) {
         throw new Error('Cannot insert Element into this composition component');
     }
     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');
     }
+    const destinationCompositionFile = destination.compositionFile;
+    const destinationCompositionFileName = destinationCompositionFile === null
+        ? (await (0, project_info_1.getProjectInfo)(remotionRoot, entryPoint)).rootFile
+        : node_path_1.default.resolve(remotionRoot, destinationCompositionFile);
+    if (destinationCompositionFileName === null) {
+        throw new Error('Could not find the root file of the project');
+    }
+    const compositionFileName = (_a = location === null || location === void 0 ? void 0 : location.fileName) !== null && _a !== void 0 ? _a : destinationCompositionFileName;
     const safePaths = await (0, safe_element_install_path_1.getSafeElementInstallPaths)({
-        compositionFileName: location.fileName,
-        elementFileName: node_path_1.default.resolve(node_path_1.default.dirname(location.fileName), derivedElementFileName),
+        compositionFileName,
+        elementFileName: node_path_1.default.resolve(node_path_1.default.dirname(compositionFileName), derivedElementFileName),
         remotionRoot,
     });
     const elementFileExists = (0, node_fs_1.existsSync)(safePaths.elementFileName);
@@ -103,6 +115,7 @@ const getElementInstallPlan = async ({ compositionFile, compositionId, element,
         : null;
     return {
         componentName,
+        destinationCompositionFileName,
         elementFileExists,
         elementFileName: safePaths.elementFileName,
         existingElementSource,

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

@@ -22,21 +22,26 @@ const hasExpectedFileState = ({ expected, actual, }) => {
     }
     return actual.sourceHash === expected.sourceHash;
 };
-const insertElementHandler = ({ input: { compositionFile, compositionId, element, expectedFileState, from, position, overwriteExisting, }, remotionRoot, logLevel, }) => (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
-    var _a, _b;
+const insertElementHandler = ({ input: { compositionFile, compositionId, element, expectedFileState, from, position, overwriteExisting, }, entryPoint, remotionRoot, logLevel, }) => (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
     try {
         (0, element_install_plan_1.validateElementInstallPosition)(position);
         if (from !== null &&
             (!Number.isInteger(from) || !Number.isFinite(from) || from < 0)) {
             throw new Error('from must be a non-negative integer');
         }
-        const installationMode = (_a = element.installationMode) !== null && _a !== void 0 ? _a : 'wrapped';
+        const installationMode = element.installationMode === null
+            ? 'wrapped'
+            : element.installationMode;
         const componentOwnsSequence = installationMode === 'component-owned-sequence';
         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)({
-            compositionFile,
-            compositionId,
+            destination: {
+                type: 'current-composition',
+                compositionFile,
+                compositionId,
+            },
             element,
+            entryPoint,
             remotionRoot,
         });
         if (expectedFileState !== null &&
@@ -86,7 +91,7 @@ const insertElementHandler = ({ input: { compositionFile, compositionId, element
                 importPath: plan.importPath,
                 props: componentOwnsSequence
                     ? [
-                        ...(element.durationInFrames === undefined
+                        ...(element.durationInFrames === null
                             ? []
                             : [
                                 {
@@ -105,16 +110,20 @@ const insertElementHandler = ({ input: { compositionFile, compositionId, element
                 ? null
                 : {
                     dimensions: element.dimensions,
-                    durationInFrames: (_b = element.durationInFrames) !== null && _b !== void 0 ? _b : null,
+                    durationInFrames: element.durationInFrames,
                     from,
                     name: element.displayName,
                     position,
                 },
         });
         const finalPlan = await (0, element_install_plan_1.getElementInstallPlan)({
-            compositionFile,
-            compositionId,
+            destination: {
+                type: 'current-composition',
+                compositionFile,
+                compositionId,
+            },
             element,
+            entryPoint,
             remotionRoot,
         });
         if (finalPlan.safePaths.compositionFileName !==
@@ -131,7 +140,6 @@ const insertElementHandler = ({ input: { compositionFile, compositionId, element
             {
                 absolutePath: inserted.fileName,
                 remappings: inserted.nodePathRemappings,
-                restoredNodePaths: [],
             },
         ]);
         (0, undo_stack_1.pushTransactionToUndoStack)({

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

@@ -171,7 +171,6 @@ const insertJsxElementHandler = ({ input: { compositionFile, compositionId, elem
             {
                 absolutePath: fileName,
                 remappings: nodePathRemappings,
-                restoredNodePaths: [],
             },
         ]);
         if (insertedNodePath === null) {

package/dist/preview-server/routes/prepare-element-install.js

@@ -3,12 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.prepareElementInstallHandler = void 0;
 const element_install_plan_1 = require("./element-install-plan");
 const source_file_write_queue_1 = require("./source-file-write-queue");
-const prepareElementInstallHandler = ({ input, remotionRoot }) => (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
+const prepareElementInstallHandler = ({ entryPoint, input, remotionRoot }) => (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
     try {
-        const plan = await (0, element_install_plan_1.getElementInstallPlan)({ ...input, remotionRoot });
+        const plan = await (0, element_install_plan_1.getElementInstallPlan)({
+            ...input,
+            entryPoint,
+            remotionRoot,
+        });
         return {
             success: true,
             plan: {
+                compositionFile: plan.destinationCompositionFileName,
                 expectedFileState: plan.expectedFileState,
                 filePath: plan.filePath,
             },

package/dist/preview-server/routes/release-notes.d.ts

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

package/dist/preview-server/routes/release-notes.js

@@ -0,0 +1,127 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getReleaseNotesHandler = void 0;
+const semver_1 = __importDefault(require("semver"));
+const githubApiVersion = '2022-11-28';
+const releaseNotesTimeout = 5000;
+const releaseNotesCacheDuration = 5 * 60 * 1000;
+const maximumReleaseNotes = 5;
+const releaseNotesCache = new Map();
+const getReleaseNotesHandler = async ({ input }) => {
+    const currentVersion = semver_1.default.valid(input.currentVersion);
+    const latestVersion = semver_1.default.valid(input.latestVersion);
+    if (currentVersion === null || latestVersion === null) {
+        throw new Error(`Invalid Remotion version range: ${input.currentVersion} to ${input.latestVersion}`);
+    }
+    const cacheKey = `${currentVersion}:${latestVersion}`;
+    const cachedReleaseNotes = releaseNotesCache.get(cacheKey);
+    if (cachedReleaseNotes && cachedReleaseNotes.expiresAt > Date.now()) {
+        return cachedReleaseNotes.response;
+    }
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), releaseNotesTimeout);
+    try {
+        const releaseResponse = await fetch('https://api.github.com/repos/remotion-dev/remotion/releases?per_page=100', {
+            headers: {
+                accept: 'application/vnd.github+json',
+                'user-agent': 'Remotion Studio',
+                'x-github-api-version': githubApiVersion,
+            },
+            signal: controller.signal,
+        });
+        if (!releaseResponse.ok) {
+            return { hasMore: false, releases: [] };
+        }
+        const githubReleases = (await releaseResponse.json());
+        if (!Array.isArray(githubReleases)) {
+            return { hasMore: false, releases: [] };
+        }
+        const matchingReleases = githubReleases
+            .flatMap((release) => {
+            if (typeof release !== 'object' || release === null) {
+                return [];
+            }
+            const { body, published_at: publishedAt, tag_name: tagName, } = release;
+            if (typeof tagName !== 'string') {
+                return [];
+            }
+            const version = semver_1.default.valid(tagName.startsWith('v') ? tagName.slice(1) : tagName);
+            if (version === null ||
+                !semver_1.default.gt(version, currentVersion) ||
+                !semver_1.default.lte(version, latestVersion)) {
+                return [];
+            }
+            return [
+                {
+                    body: typeof body === 'string' ? body : null,
+                    publishedAt: typeof publishedAt === 'string' ? publishedAt : null,
+                    version,
+                },
+            ];
+        })
+            .sort((a, b) => semver_1.default.rcompare(a.version, b.version));
+        const hasMore = matchingReleases.length > maximumReleaseNotes;
+        const releases = await Promise.all(matchingReleases.slice(0, maximumReleaseNotes).map(async (release) => {
+            if (release.body === null || release.body.trim() === '') {
+                return {
+                    publishedAt: release.publishedAt,
+                    releaseNotesHtml: null,
+                    version: release.version,
+                };
+            }
+            try {
+                const markdownResponse = await fetch('https://api.github.com/markdown', {
+                    body: JSON.stringify({
+                        context: 'remotion-dev/remotion',
+                        mode: 'gfm',
+                        text: release.body,
+                    }),
+                    headers: {
+                        accept: 'text/html',
+                        'content-type': 'application/json',
+                        'user-agent': 'Remotion Studio',
+                        'x-github-api-version': githubApiVersion,
+                    },
+                    method: 'POST',
+                    signal: controller.signal,
+                });
+                if (!markdownResponse.ok) {
+                    return {
+                        publishedAt: release.publishedAt,
+                        releaseNotesHtml: null,
+                        version: release.version,
+                    };
+                }
+                const releaseNotesHtml = await markdownResponse.text();
+                return {
+                    publishedAt: release.publishedAt,
+                    releaseNotesHtml: releaseNotesHtml || null,
+                    version: release.version,
+                };
+            }
+            catch (_a) {
+                return {
+                    publishedAt: release.publishedAt,
+                    releaseNotesHtml: null,
+                    version: release.version,
+                };
+            }
+        }));
+        const response = { hasMore, releases };
+        releaseNotesCache.set(cacheKey, {
+            expiresAt: Date.now() + releaseNotesCacheDuration,
+            response,
+        });
+        return response;
+    }
+    catch (_a) {
+        return { hasMore: false, releases: [] };
+    }
+    finally {
+        clearTimeout(timeout);
+    }
+};
+exports.getReleaseNotesHandler = getReleaseNotesHandler;

package/dist/preview-server/routes/reorder-sequence.js

@@ -32,7 +32,6 @@ const reorderSequenceHandler = ({ input: { fileName, sourceNodePath, targetNodeP
                 {
                     absolutePath,
                     remappings: nodePathRemappings,
-                    restoredNodePaths: [],
                 },
             ]);
             (0, undo_stack_1.pushToUndoStack)({

package/dist/preview-server/routes/split-jsx-sequence.js

@@ -30,7 +30,6 @@ const splitJsxSequenceHandler = ({ input: { fileName, nodePath, sequenceKeys, sp
             {
                 absolutePath,
                 remappings: nodePathRemappings,
-                restoredNodePaths: [],
             },
         ]);
         (0, undo_stack_1.pushToUndoStack)({

package/dist/preview-server/routes/split-video-from-audio.js

@@ -28,7 +28,6 @@ const splitVideoFromAudioHandler = ({ input: { fileName, nodePath }, remotionRoo
             {
                 absolutePath,
                 remappings: nodePathRemappings,
-                restoredNodePaths: [],
             },
         ]);
         (0, undo_stack_1.pushToUndoStack)({

package/dist/preview-server/sequence-node-path-mutation.d.ts

@@ -1,7 +1,5 @@
 import type { SequenceNodePathMutation, SequenceNodePathRemapping } from '@remotion/studio-shared';
-import type { SequenceNodePath } from 'remotion';
 export declare const broadcastSequenceNodePathMutation: (files: {
     absolutePath: string;
     remappings: SequenceNodePathRemapping[];
-    restoredNodePaths: SequenceNodePath[];
 }[]) => SequenceNodePathMutation;

package/dist/preview-server/start-server.js

@@ -19,16 +19,20 @@ const startServer = async (options) => {
     var _a, _b;
     const desiredPort = (_b = (_a = options === null || options === void 0 ? void 0 : options.port) !== null && _a !== void 0 ? _a : (process.env.PORT ? Number(process.env.PORT) : undefined)) !== null && _b !== void 0 ? _b : undefined;
     const portConfig = renderer_1.RenderInternals.getPortConfig(options.forceIPv4);
-    const onPortUnavailable = options.forceNew
-        ? undefined
-        : async (port) => {
+    const onPortUnavailable = async (port) => {
+        if (!options.forceNew) {
             const detection = await (0, detect_remotion_server_1.detectRemotionServer)({
                 port,
                 cwd: options.remotionRoot,
                 hostname: portConfig.hostsToTry[0],
             });
-            return detection.type === 'match' ? 'stop' : 'continue';
-        };
+            if (detection.type === 'match') {
+                return 'stop';
+            }
+        }
+        renderer_1.RenderInternals.Log.info({ indent: false, logLevel: options.logLevel }, renderer_1.RenderInternals.chalk.gray(`Port ${port} is busy, trying another.`));
+        return 'continue';
+    };
     let portSelection = await renderer_1.RenderInternals.getDesiredPort({
         desiredPort,
         from: 3000,

package/dist/preview-server/studio-protocol/handle-discovery.js

@@ -32,8 +32,7 @@ const getLiveStudioTarget = (requestId) => {
     }
     return target;
 };
-const isInstallableTarget = (target) => target !== null &&
-    target.canInstall &&
+const isElementRequestTarget = (target) => target !== null &&
     target.compositionFile !== null &&
     target.compositionId !== null &&
     target.lastFocusedAt !== null;
@@ -68,7 +67,7 @@ const handleStudioProtocolDiscovery = ({ gitSource, liveEventsServer, remotionRo
         setTimeout(() => {
             const now = Date.now();
             const target = getLiveStudioTarget(requestId);
-            const installTarget = isInstallableTarget(target) ? target : null;
+            const installTarget = isElementRequestTarget(target) ? target : null;
             const issuedInstallTarget = installTarget === null
                 ? null
                 : (0, element_install_state_1.issueStudioProtocolTarget)({

package/dist/preview-server/studio-protocol/handle-element-library.js

@@ -1,19 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.handleStudioProtocolElementLibrary = void 0;
-const zod_1 = require("zod");
+const studio_protocol_1 = require("@remotion/studio-protocol");
 const element_install_state_1 = require("../element-install-state");
 const parse_body_1 = require("../parse-body");
 const origin_policy_1 = require("./origin-policy");
 const protocol_response_1 = require("./protocol-response");
-const studioProtocolElementLibraryRequestSchema = zod_1.z.object({
-    operation: zod_1.z.literal('add-element-library'),
-    protocol: zod_1.z.literal('remotion-studio-protocol'),
-    protocolVersion: zod_1.z.literal(1),
-    targetId: zod_1.z.string().min(1),
-    url: zod_1.z.string(),
-    displayName: zod_1.z.string().nullable(),
-});
 const MAX_STUDIO_PROTOCOL_ELEMENT_LIBRARY_BODY_SIZE = 16 * 1024;
 const handleStudioProtocolElementLibrary = async ({ configFile, focusStudioTab, liveEventsServer, request, response, }) => {
     var _a;
@@ -62,8 +54,8 @@ const handleStudioProtocolElementLibrary = async ({ configFile, focusStudioTab,
         });
         return;
     }
-    const parsedRequest = studioProtocolElementLibraryRequestSchema.safeParse(body);
-    if (!parsedRequest.success) {
+    const parsedRequest = studio_protocol_1.StudioProtocolInternals.parseStudioProtocolAddElementLibraryRequest(body);
+    if (parsedRequest === null) {
         (0, protocol_response_1.writeStudioProtocolError)({
             code: 'unsupported-protocol',
             message: 'Invalid Remotion Studio Protocol request.',
@@ -74,7 +66,7 @@ const handleStudioProtocolElementLibrary = async ({ configFile, focusStudioTab,
     }
     let normalizedUrl;
     try {
-        const parsedUrl = new URL(parsedRequest.data.url);
+        const parsedUrl = new URL(parsedRequest.url);
         if (parsedUrl.protocol !== 'http:' && parsedUrl.protocol !== 'https:') {
             throw new Error('Unsupported protocol');
         }
@@ -89,7 +81,7 @@ const handleStudioProtocolElementLibrary = async ({ configFile, focusStudioTab,
         });
         return;
     }
-    const displayName = (_b = (_a = parsedRequest.data.displayName) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : null;
+    const displayName = (_b = (_a = parsedRequest.displayName) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : null;
     if (displayName === '') {
         (0, protocol_response_1.writeStudioProtocolError)({
             code: 'invalid-display-name',
@@ -103,7 +95,7 @@ const handleStudioProtocolElementLibrary = async ({ configFile, focusStudioTab,
         now: Date.now(),
         origin: requestOrigin,
         purpose: 'add-element-library',
-        targetId: parsedRequest.data.targetId,
+        targetId: parsedRequest.targetId,
     });
     if (target === null) {
         (0, protocol_response_1.writeStudioProtocolError)({

package/dist/preview-server/studio-protocol/handle-install.js

@@ -2,22 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.handleStudioProtocolInstall = void 0;
 const studio_protocol_1 = require("@remotion/studio-protocol");
-const zod_1 = require("zod");
 const element_install_state_1 = require("../element-install-state");
 const parse_body_1 = require("../parse-body");
 const origin_policy_1 = require("./origin-policy");
 const protocol_response_1 = require("./protocol-response");
-const studioProtocolInstallRequestSchema = zod_1.z.object({
-    operation: zod_1.z.literal('install-element'),
-    protocol: zod_1.z.literal('remotion-studio-protocol'),
-    protocolVersion: zod_1.z.literal(1),
-    targetId: zod_1.z.string(),
-    payload: zod_1.z.unknown(),
-});
 // A valid payload may contain 250,000 JSON characters. Allow room for its
 // UTF-8 representation and the protocol envelope while keeping memory bounded.
 const MAX_STUDIO_PROTOCOL_INSTALL_BODY_SIZE = 1000000;
 const deliverElementInstall = ({ element, focusStudioTab, liveEventsServer, origin, target, }) => {
+    var _a, _b;
     if (target.compositionFile === null || target.compositionId === null) {
         return false;
     }
@@ -27,7 +20,11 @@ const deliverElementInstall = ({ element, focusStudioTab, liveEventsServer, orig
         createdAt: Date.now(),
         compositionFile: target.compositionFile,
         compositionId: target.compositionId,
-        element,
+        element: {
+            ...element,
+            durationInFrames: (_a = element.durationInFrames) !== null && _a !== void 0 ? _a : null,
+            installationMode: (_b = element.installationMode) !== null && _b !== void 0 ? _b : null,
+        },
         from: null,
         position: null,
         source: {
@@ -89,21 +86,15 @@ const handleStudioProtocolInstall = async ({ focusStudioTab, liveEventsServer, r
         });
         return;
     }
-    const parsedRequest = studioProtocolInstallRequestSchema.safeParse(body);
-    if (!parsedRequest.success) {
-        (0, protocol_response_1.writeStudioProtocolError)({
-            code: 'unsupported-protocol',
-            message: 'Invalid Remotion Studio Protocol request.',
-            response,
-            status: 400,
-        });
-        return;
-    }
-    const payload = studio_protocol_1.StudioProtocolInternals.parseStudioElementPayload(parsedRequest.data.payload);
-    if (payload === null) {
+    const parsedRequest = studio_protocol_1.StudioProtocolInternals.parseStudioProtocolInstallRequest(body);
+    if (parsedRequest.status !== 'valid') {
         (0, protocol_response_1.writeStudioProtocolError)({
-            code: 'invalid-payload',
-            message: 'Invalid Element payload.',
+            code: parsedRequest.status === 'invalid-payload'
+                ? 'invalid-payload'
+                : 'unsupported-protocol',
+            message: parsedRequest.status === 'invalid-payload'
+                ? 'Invalid Element payload.'
+                : 'Invalid Remotion Studio Protocol request.',
             response,
             status: 400,
         });
@@ -113,7 +104,7 @@ const handleStudioProtocolInstall = async ({ focusStudioTab, liveEventsServer, r
         now: Date.now(),
         origin: requestOrigin,
         purpose: 'install-element',
-        targetId: parsedRequest.data.targetId,
+        targetId: parsedRequest.request.targetId,
     });
     if (target === null) {
         (0, protocol_response_1.writeStudioProtocolError)({
@@ -125,7 +116,7 @@ const handleStudioProtocolInstall = async ({ focusStudioTab, liveEventsServer, r
         return;
     }
     if (!deliverElementInstall({
-        element: payload.element,
+        element: parsedRequest.request.payload.element,
         focusStudioTab,
         liveEventsServer,
         origin: requestOrigin,

package/dist/preview-server/studio-protocol/handle-license-key.js

@@ -2,18 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.handleStudioProtocolLicenseKey = void 0;
 const studio_protocol_1 = require("@remotion/studio-protocol");
-const zod_1 = require("zod");
 const element_install_state_1 = require("../element-install-state");
 const parse_body_1 = require("../parse-body");
 const origin_policy_1 = require("./origin-policy");
 const protocol_response_1 = require("./protocol-response");
-const studioProtocolLicenseKeyRequestSchema = zod_1.z.object({
-    operation: zod_1.z.literal('set-license-key'),
-    protocol: zod_1.z.literal('remotion-studio-protocol'),
-    protocolVersion: zod_1.z.literal(1),
-    targetId: zod_1.z.string().min(1),
-    licenseKey: zod_1.z.string(),
-});
 const MAX_STUDIO_PROTOCOL_LICENSE_KEY_BODY_SIZE = 4096;
 const handleStudioProtocolLicenseKey = async ({ configFile, focusStudioTab, liveEventsServer, request, response, }) => {
     (0, origin_policy_1.setStudioProtocolCorsHeaders)({ request, response });
@@ -60,8 +52,8 @@ const handleStudioProtocolLicenseKey = async ({ configFile, focusStudioTab, live
         });
         return;
     }
-    const parsedRequest = studioProtocolLicenseKeyRequestSchema.safeParse(body);
-    if (!parsedRequest.success) {
+    const parsedRequest = studio_protocol_1.StudioProtocolInternals.parseStudioProtocolSetLicenseKeyRequest(body);
+    if (parsedRequest === null) {
         (0, protocol_response_1.writeStudioProtocolError)({
             code: 'unsupported-protocol',
             message: 'Invalid Remotion Studio Protocol request.',
@@ -70,7 +62,7 @@ const handleStudioProtocolLicenseKey = async ({ configFile, focusStudioTab, live
         });
         return;
     }
-    if (!studio_protocol_1.StudioProtocolInternals.isValidPublicLicenseKey(parsedRequest.data.licenseKey)) {
+    if (!studio_protocol_1.StudioProtocolInternals.isValidPublicLicenseKey(parsedRequest.licenseKey)) {
         (0, protocol_response_1.writeStudioProtocolError)({
             code: 'invalid-license-key',
             message: 'The license key is not a valid public Remotion license key.',
@@ -83,7 +75,7 @@ const handleStudioProtocolLicenseKey = async ({ configFile, focusStudioTab, live
         now: Date.now(),
         origin: requestOrigin,
         purpose: 'set-license-key',
-        targetId: parsedRequest.data.targetId,
+        targetId: parsedRequest.targetId,
     });
     if (target === null) {
         (0, protocol_response_1.writeStudioProtocolError)({
@@ -105,7 +97,7 @@ const handleStudioProtocolLicenseKey = async ({ configFile, focusStudioTab, live
     }
     const delivered = liveEventsServer.sendEventToClientId(target.clientId, {
         type: 'license-key-install-request',
-        licenseKey: parsedRequest.data.licenseKey,
+        licenseKey: parsedRequest.licenseKey,
     });
     if (!delivered) {
         (0, protocol_response_1.writeStudioProtocolError)({

package/dist/preview-server/undo-stack.js

@@ -257,18 +257,10 @@ function popUndo() {
         return [
             {
                 absolutePath: snapshot.filePath,
-                remappings: snapshot.nodePathRemappings.flatMap((remapping) => {
-                    if (remapping.newNodePath === null) {
-                        return [];
-                    }
-                    return [
-                        {
-                            oldNodePath: remapping.newNodePath,
-                            newNodePath: remapping.oldNodePath,
-                        },
-                    ];
-                }),
-                restoredNodePaths: snapshot.nodePathRemappings.flatMap((remapping) => remapping.newNodePath === null ? [remapping.oldNodePath] : []),
+                remappings: snapshot.nodePathRemappings.map((remapping) => ({
+                    oldNodePath: remapping.newNodePath,
+                    newNodePath: remapping.oldNodePath,
+                })),
             },
         ];
     });
@@ -339,7 +331,6 @@ function popRedo() {
             {
                 absolutePath: snapshot.filePath,
                 remappings: snapshot.nodePathRemappings,
-                restoredNodePaths: [],
             },
         ];
     });

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio-server"
 	},
 	"name": "@remotion/studio-server",
-	"version": "4.0.518",
+	"version": "4.0.520",
 	"description": "Run a Remotion Studio with a server backend",
 	"main": "dist",
 	"scripts": {
@@ -23,7 +23,7 @@
 		"access": "public"
 	},
 	"dependencies": {
-		"@remotion/studio-protocol": "4.0.518",
+		"@remotion/studio-protocol": "4.0.520",
 		"@babel/types": "7.24.0",
 		"@babel/parser": "7.24.1",
 		"@svgr/core": "8.1.0",
@@ -32,12 +32,12 @@
 		"semver": "7.5.3",
 		"zod": "4.4.3",
 		"prettier": "3.8.1",
-		"remotion": "4.0.518",
+		"remotion": "4.0.520",
 		"recast": "0.23.21",
-		"@remotion/bundler": "4.0.518",
-		"@remotion/renderer": "4.0.518",
-		"@remotion/studio-codemods": "4.0.518",
-		"@remotion/studio-shared": "4.0.518",
+		"@remotion/bundler": "4.0.520",
+		"@remotion/renderer": "4.0.520",
+		"@remotion/studio-codemods": "4.0.520",
+		"@remotion/studio-shared": "4.0.520",
 		"memfs": "3.4.3",
 		"open": "8.4.2"
 	},
@@ -45,7 +45,7 @@
 		"ast-types": "0.16.1",
 		"react": "19.2.3",
 		"@types/semver": "7.5.3",
-		"@remotion/eslint-config-internal": "4.0.518",
+		"@remotion/eslint-config-internal": "4.0.520",
 		"eslint": "9.19.0",
 		"@types/node": "20.12.14",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"