@remotion/studio-server 4.0.522 → 4.0.524

package/dist/canvas-capture/generate-canvas-capture-composition.d.ts

@@ -11,4 +11,4 @@ export declare const generateCanvasCaptureComposition: ({ componentName, composi
     readonly videoHeight: number;
     readonly videoWidth: number;
     readonly width: number;
-}) => Promise<string>;
+}) => string;

package/dist/canvas-capture/generate-canvas-capture-composition.js

@@ -1,7 +1,40 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateCanvasCaptureComposition = void 0;
-const duplicate_composition_1 = require("../codemods/duplicate-composition");
+const recast = __importStar(require("recast"));
 const customCursorRegex = /^\s*url\(/;
 const collapseMouseMovementsByFrame = ({ data, keyframeFps, }) => {
     const movements = [];
@@ -30,7 +63,39 @@ const getCursorName = (cursor) => {
     }
     return ((_a = cursor.split(',').at(-1)) === null || _a === void 0 ? void 0 : _a.trim().toLowerCase()) || 'default';
 };
-const serialize = (value) => JSON.stringify(value);
+const serialize = (value) => {
+    if (typeof value === 'string') {
+        return recast.prettyPrint(recast.types.builders.stringLiteral(value), {
+            quote: 'single',
+        }).code;
+    }
+    return JSON.stringify(value);
+};
+const serializeArray = (values, indentation) => {
+    const items = values.map(serialize);
+    const inline = `[${items.join(', ')}]`;
+    if (indentation * 2 + inline.length + 1 <= 80) {
+        return inline;
+    }
+    const lines = [];
+    const numeric = values.every((value) => typeof value === 'number');
+    for (const item of items) {
+        const previous = lines.at(-1);
+        if (numeric &&
+            previous &&
+            (indentation + 1) * 2 + previous.length + item.length + 2 <= 80) {
+            lines[lines.length - 1] = `${previous} ${item},`;
+        }
+        else {
+            lines.push(`${item},`);
+        }
+    }
+    return [
+        '[',
+        ...lines.map((line) => `${'\t'.repeat(indentation + 1)}${line}`),
+        `${'\t'.repeat(indentation)}]`,
+    ].join('\n');
+};
 const generateCanvasCaptureComposition = ({ componentName, compositionId, data, durationInFrames, fps, height, keyframeFps, videoFileName, videoHeight, videoWidth, width, }) => {
     var _a;
     const movements = collapseMouseMovementsByFrame({ data, keyframeFps });
@@ -79,11 +144,11 @@ const generateCanvasCaptureComposition = ({ componentName, compositionId, data,
     }, []);
     const customCursor = (_a = movements.find((movement) => customCursorRegex.test(movement.cursor))) === null || _a === void 0 ? void 0 : _a.cursor;
     const cursorProp = cursorKeyframes.length === 1
-        ? `cursor=${serialize(cursorKeyframes[0].value)}`
+        ? `cursor={${serialize(cursorKeyframes[0].value)}}`
         : `cursor={interpolate(
 					frame,
-					${serialize(cursorKeyframes.map((keyframe) => keyframe.frame))},
-					${serialize(cursorKeyframes.map((keyframe) => keyframe.value))},
+					${serializeArray(cursorKeyframes.map((keyframe) => keyframe.frame), 5)},
+					${serializeArray(cursorKeyframes.map((keyframe) => keyframe.value), 5)},
 					{
 						easing: Easing.step1,
 						extrapolateLeft: 'clamp',
@@ -94,8 +159,8 @@ const generateCanvasCaptureComposition = ({ componentName, compositionId, data,
         ? serialize(scaleKeyframes[0].value)
         : `interpolate(
 						frame,
-						${serialize(scaleKeyframes.map((keyframe) => keyframe.frame))},
-						${serialize(scaleKeyframes.map((keyframe) => keyframe.value))},
+						${serializeArray(scaleKeyframes.map((keyframe) => keyframe.frame), 6)},
+						${serializeArray(scaleKeyframes.map((keyframe) => keyframe.value), 6)},
 						{
 							easing: Easing.step1,
 							extrapolateLeft: 'clamp',
@@ -106,8 +171,8 @@ const generateCanvasCaptureComposition = ({ componentName, compositionId, data,
         ? serialize(positionKeyframes[0].value)
         : `interpolate(
 						frame,
-						${serialize(positionKeyframes.map((keyframe) => keyframe.frame))},
-						${serialize(positionKeyframes.map((keyframe) => keyframe.value))},
+						${serializeArray(positionKeyframes.map((keyframe) => keyframe.frame), 6)},
+						${serializeArray(positionKeyframes.map((keyframe) => keyframe.value), 6)},
 						{
 							extrapolateLeft: 'clamp',
 							extrapolateRight: 'clamp',
@@ -116,7 +181,7 @@ const generateCanvasCaptureComposition = ({ componentName, compositionId, data,
     const previewComponentName = componentName.endsWith('Composition')
         ? `${componentName.slice(0, -'Composition'.length)}Preview`
         : `${componentName}Preview`;
-    return (0, duplicate_composition_1.formatOutput)(`import {MacOSCursor} from '@remotion/mac-cursors';
+    return `import {MacOSCursor} from '@remotion/mac-cursors';
 import {Video} from '@remotion/media';
 import {
 	AbsoluteFill,
@@ -160,7 +225,7 @@ ${customCursor === undefined ? '' : `\t\t\t\tcustomCursor={${serialize(customCur
 export const ${componentName} = () => {
 	return (
 		<Composition
-			id=${serialize(compositionId)}
+			id={${serialize(compositionId)}}
 			component={${previewComponentName}}
 			width={${width}}
 			height={${height}}
@@ -169,6 +234,6 @@ export const ${componentName} = () => {
 		/>
 	);
 };
-`);
+`;
 };
 exports.generateCanvasCaptureComposition = generateCanvasCaptureComposition;

package/dist/codemods/apply-codemod-to-file.js

@@ -27,6 +27,13 @@ const applyCodemodToFile = async ({ filePath, codeMod, }) => {
         codeMod,
         input,
     });
-    return (0, duplicate_composition_1.formatOutput)(newContents);
+    if (codeMod.type === 'new-composition' ||
+        codeMod.type === 'duplicate-composition' ||
+        codeMod.type === 'rename-composition' ||
+        codeMod.type === 'delete-composition') {
+        return newContents;
+    }
+    const formatted = await (0, duplicate_composition_1.formatOutput)(newContents);
+    return formatted;
 };
 exports.applyCodemodToFile = applyCodemodToFile;

package/dist/preview-server/api-routes.d.ts

@@ -1,6 +1,6 @@
 import type { ApiRoutes } from '@remotion/studio-shared';
 import type { ApiHandler } from './api-types';
-type StandardApiRoute = Exclude<keyof ApiRoutes, '/api/update-config'>;
+type StandardApiRoute = Exclude<keyof ApiRoutes, '/api/install-package' | '/api/update-config'>;
 export declare const allApiRoutes: {
     [key in StandardApiRoute]: ApiHandler<ApiRoutes[key]['Request'], ApiRoutes[key]['Response']>;
 };

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

@@ -25,7 +25,6 @@ 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_dependency_1 = require("./routes/install-dependency");
 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");
@@ -120,7 +119,6 @@ exports.allApiRoutes = {
     '/api/restart-studio': restart_studio_1.handleRestartStudio,
     '/api/default-coding-agent-info': default_coding_agent_1.getDefaultCodingAgentInfoHandler,
     '/api/default-editor-info': default_editor_1.getDefaultEditorInfoHandler,
-    '/api/install-package': install_dependency_1.handleInstallPackage,
     '/api/insert-jsx-element': insert_jsx_element_1.insertJsxElementHandler,
     '/api/insert-element': insert_element_1.insertElementHandler,
     '/api/prepare-element-install': prepare_element_install_1.prepareElementInstallHandler,

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

@@ -10,7 +10,6 @@ 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 duplicate_composition_1 = require("../../codemods/duplicate-composition");
 const file_watcher_1 = require("../../file-watcher");
 const format_log_file_location_1 = require("../format-log-file-location");
 const project_info_1 = require("../project-info");
@@ -33,12 +32,12 @@ const formatNewCompositionFile = (codemod) => {
             width: codemod.newWidth,
         });
     }
-    return (0, duplicate_composition_1.formatOutput)(`import React from 'react';
+    return `import React from 'react';
 
 export const ${codemod.componentName}: React.FC = () => {
 	return null;
 };
-`);
+`;
 };
 const getFolderPath = (parentName, folderName) => {
     return parentName ? `${parentName}/${folderName}` : folderName;

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

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

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

@@ -50,7 +50,7 @@ const duplicateJsxNodeHandler = ({ input: { nodes }, remotionRoot, logLevel }) =
             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`;

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

@@ -1,5 +1,4 @@
 import type { ElementInstallExpectedFileState, PrepareElementInstallRequest } from '@remotion/studio-shared';
-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: import("@remotion/studio-shared").InstallableElement) => void;
@@ -7,7 +6,7 @@ export declare const makeRelativeElementImportPath: ({ fromFile, toFile, }: {
     fromFile: string;
     toFile: string;
 }) => string;
-export declare const getElementInstallPlan: ({ destination, element, entryPoint, remotionRoot, }: PrepareElementInstallRequest & {
+export declare const getElementInstallPlan: ({ destination, element, installationName, entryPoint, remotionRoot, }: PrepareElementInstallRequest & {
     entryPoint: string;
     remotionRoot: string;
 }) => Promise<{

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

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getElementInstallPlan = exports.makeRelativeElementImportPath = exports.validateElementForInstallation = exports.validateElementInstallPosition = exports.getElementSourceHash = exports.normalizeElementSourceForComparison = void 0;
+exports.getElementInstallPlan = exports.makeRelativeElementImportPath = exports.validateElementForInstallation = exports.validateElementInstallPosition = exports.getElementSourceHash = void 0;
 const node_crypto_1 = require("node:crypto");
 const node_fs_1 = require("node:fs");
 const node_path_1 = __importDefault(require("node:path"));
@@ -11,10 +11,6 @@ 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();
-};
-exports.normalizeElementSourceForComparison = normalizeElementSourceForComparison;
 const getElementSourceHash = (source) => {
     return (0, node_crypto_1.createHash)('sha256').update(source).digest('hex');
 };
@@ -75,7 +71,7 @@ const getExpectedFileState = (existingSource) => {
         sourceHash: (0, exports.getElementSourceHash)(existingSource),
     };
 };
-const getElementInstallPlan = async ({ destination, element, entryPoint, remotionRoot, }) => {
+const getElementInstallPlan = async ({ destination, element, installationName, entryPoint, remotionRoot, }) => {
     var _a;
     (0, exports.validateElementForInstallation)(element);
     const componentName = studio_protocol_1.StudioProtocolInternals.getElementComponentNameFromSourceCode(element.sourceCode);
@@ -92,9 +88,11 @@ const getElementInstallPlan = async ({ destination, element, entryPoint, remotio
     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 derivedElementFileName = studio_protocol_1.StudioProtocolInternals.makeElementFileNameFromSlug(installationName !== null && installationName !== void 0 ? installationName : element.slug);
+    if (derivedElementFileName === null ||
+        (typeof installationName === 'string' &&
+            derivedElementFileName !== `${installationName}.element.tsx`)) {
+        throw new Error('Use a lowercase installation name with letters, numbers and hyphens, without a file extension.');
     }
     const destinationCompositionFile = destination.compositionFile;
     const destinationCompositionFileName = destinationCompositionFile === null

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

@@ -21,7 +21,9 @@ const hasExpectedFileState = ({ expected, actual, }) => {
     }
     return actual.sourceHash === expected.sourceHash;
 };
-const insertElementHandler = ({ input: { compositionFile, compositionId, element, expectedFileState, from, position, overwriteExisting, }, entryPoint, remotionRoot, logLevel, }) => (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
+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;
     try {
         (0, element_install_plan_1.validateElementInstallPosition)(position);
         if (from !== null &&
@@ -32,8 +34,24 @@ const insertElementHandler = ({ input: { compositionFile, compositionId, element
             ? 'wrapped'
             : element.installationMode;
         const componentOwnsSequence = installationMode === 'component-owned-sequence';
+        if (componentOwnsSequence &&
+            element.initialProps !== null &&
+            ['from', 'durationInFrames', 'name'].some((prop) => {
+                var _a;
+                return Object.hasOwn((_a = element.initialProps) !== null && _a !== void 0 ? _a : {}, prop);
+            })) {
+            throw new Error('Component-owned Element initial props must not override from, durationInFrames, or name');
+        }
+        if (componentOwnsSequence &&
+            ((_a = element.initialProps) === null || _a === void 0 ? void 0 : _a.style) !== undefined &&
+            (element.initialProps.style === null ||
+                typeof element.initialProps.style !== 'object' ||
+                Array.isArray(element.initialProps.style))) {
+            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: {
                 type: 'current-composition',
                 compositionFile,
@@ -63,11 +81,8 @@ const insertElementHandler = ({ input: { compositionFile, compositionId, element
             throw new Error('Element source changed during installation');
         }
         const elementSourcesDiffer = plan.existingElementSource !== null &&
-            (0, element_install_plan_1.normalizeElementSourceForComparison)(plan.existingElementSource) !==
-                (0, element_install_plan_1.normalizeElementSourceForComparison)(element.sourceCode);
-        if (elementSourcesDiffer &&
-            !overwriteExisting &&
-            plan.existingElementSource !== null) {
+            plan.existingElementSource !== element.sourceCode;
+        if (!overwriteExisting && plan.existingElementSource !== null) {
             return {
                 success: false,
                 type: 'file-conflict',
@@ -88,19 +103,20 @@ const insertElementHandler = ({ input: { compositionFile, compositionId, element
                 componentName: plan.componentName,
                 importName: plan.componentName,
                 importPath: plan.importPath,
-                props: componentOwnsSequence
-                    ? [
-                        ...(element.durationInFrames === null
-                            ? []
-                            : [
-                                {
-                                    name: 'durationInFrames',
-                                    value: element.durationInFrames,
-                                },
-                            ]),
-                        { name: 'name', value: element.displayName },
-                    ]
-                    : [],
+                props: [
+                    ...Object.entries((_b = element.initialProps) !== null && _b !== void 0 ? _b : {}).map(([name, value]) => ({ name, value })),
+                    ...(componentOwnsSequence && element.durationInFrames !== null
+                        ? [
+                            {
+                                name: 'durationInFrames',
+                                value: element.durationInFrames,
+                            },
+                        ]
+                        : []),
+                    ...(componentOwnsSequence
+                        ? [{ name: 'name', value: element.displayName }]
+                        : []),
+                ],
                 position: componentOwnsSequence ? position : null,
             },
             from: componentOwnsSequence ? from : null,
@@ -116,6 +132,7 @@ const insertElementHandler = ({ input: { compositionFile, compositionId, element
                 },
         });
         const finalPlan = await (0, element_install_plan_1.getElementInstallPlan)({
+            installationName,
             destination: {
                 type: 'current-composition',
                 compositionFile,
@@ -140,7 +157,7 @@ const insertElementHandler = ({ input: { compositionFile, compositionId, element
                 absolutePath: inserted.fileName,
                 remappings: inserted.nodePathRemappings,
             },
-        ]);
+        ], null);
         (0, undo_stack_1.pushTransactionToUndoStack)({
             snapshots: [
                 ...(shouldWriteElementFile

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

@@ -171,7 +171,13 @@ const insertJsxElementHandler = ({ input: { compositionFile, compositionId, elem
                 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.');
         }

package/dist/preview-server/routes/install-dependency.d.ts

@@ -1,4 +1,18 @@
 import { type InstallPackageRequest, type InstallPackageResponse, type PackageInstallSpec } from '@remotion/studio-shared';
-import type { ApiHandler } from '../api-types';
 export declare const getPackageInstallSpec: (dependency: PackageInstallSpec) => string;
-export declare const handleInstallPackage: ApiHandler<InstallPackageRequest, InstallPackageResponse>;
+export declare const handleInstallPackage: ({ logLevel, remotionRoot, input: { dependencies }, invalidateBundle, }: {
+    input: InstallPackageRequest;
+    entryPoint: string;
+    remotionRoot: string;
+    request: import("http").IncomingMessage;
+    response: import("http").ServerResponse<import("http").IncomingMessage>;
+    logLevel: "error" | "info" | "trace" | "verbose" | "warn";
+    methods: import("../api-types").QueueMethods;
+    publicDir: string;
+    binariesDirectory: string | null;
+    configFile: string | null;
+    getDefaultCodingAgent: () => "claude-code" | "codex" | "copilot" | "cursor" | null;
+    getDefaultEditor: () => import("@remotion/renderer").DefaultEditor | null;
+} & {
+    readonly invalidateBundle: () => Promise<void>;
+}) => Promise<InstallPackageResponse>;

package/dist/preview-server/routes/install-dependency.js

@@ -22,7 +22,7 @@ const getPackageInstallSpec = (dependency) => {
     return extraVersion === null ? name : `${name}@${extraVersion}`;
 };
 exports.getPackageInstallSpec = getPackageInstallSpec;
-const handleInstallPackage = async ({ logLevel, remotionRoot, input: { dependencies } }) => {
+const handleInstallPackage = async ({ logLevel, remotionRoot, input: { dependencies }, invalidateBundle, }) => {
     for (const dependency of dependencies) {
         if (!(0, studio_shared_1.isValidPackageName)(dependency.name)) {
             return Promise.reject(new Error(`Package name ${JSON.stringify(dependency.name)} is invalid.`));
@@ -41,12 +41,24 @@ const handleInstallPackage = async ({ logLevel, remotionRoot, input: { dependenc
     if (manager === 'unknown') {
         throw new Error(`No lockfile was found in your project (one of ${get_package_manager_1.lockFilePaths.map((p) => p.path).join(', ')}). Install dependencies using your favorite manager!`);
     }
+    const additionalArgs = ['--ignore-scripts'];
+    if (manager.manager === 'yarn') {
+        const version = (0, node_child_process_1.execFileSync)('yarn', ['--version'], {
+            ...(0, package_manager_spawn_options_1.getPackageManagerSpawnOptions)(),
+            cwd: remotionRoot,
+            encoding: 'utf8',
+            timeout: 10000,
+        }).trim();
+        if (!/^1\./.test(version)) {
+            additionalArgs[0] = '--mode=skip-build';
+        }
+    }
     const packagesWithVersions = dependencies.map(exports.getPackageInstallSpec);
     const command = (0, install_command_1.getInstallCommand)({
         manager: manager.manager,
         packages: packagesWithVersions,
         version: '',
-        additionalArgs: manager.manager === 'yarn' ? [] : ['--ignore-scripts'],
+        additionalArgs,
     });
     renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, renderer_1.RenderInternals.chalk.gray(`╭─  ${manager.manager} ${command.join(' ')}`));
     const time = Date.now();
@@ -54,6 +66,7 @@ const handleInstallPackage = async ({ logLevel, remotionRoot, input: { dependenc
         await new Promise((resolve, reject) => {
             const cmd = (0, node_child_process_1.spawn)(manager.manager, command, {
                 ...(0, package_manager_spawn_options_1.getPackageManagerSpawnOptions)(),
+                cwd: remotionRoot,
                 env: {
                     ...process.env,
                     YARN_ENABLE_SCRIPTS: 'false',
@@ -70,6 +83,7 @@ const handleInstallPackage = async ({ logLevel, remotionRoot, input: { dependenc
                 ? resolve()
                 : reject(new Error(`Command exited with code ${code} and signal ${signal}`)));
         });
+        await invalidateBundle();
         renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, renderer_1.RenderInternals.chalk.gray('╰─ '), `Done in ${Date.now() - time}ms`);
         return {};
     }

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

@@ -33,7 +33,7 @@ const reorderSequenceHandler = ({ input: { fileName, sourceNodePath, targetNodeP
                     absolutePath,
                     remappings: nodePathRemappings,
                 },
-            ]);
+            ], null);
             (0, undo_stack_1.pushToUndoStack)({
                 filePath: absolutePath,
                 oldContents: fileContents,

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

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

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

@@ -29,7 +29,7 @@ const splitVideoFromAudioHandler = ({ input: { fileName, nodePath }, remotionRoo
                 absolutePath,
                 remappings: nodePathRemappings,
             },
-        ]);
+        ], null);
         (0, undo_stack_1.pushToUndoStack)({
             filePath: absolutePath,
             oldContents: fileContents,

package/dist/preview-server/routes/update-config.js

@@ -238,6 +238,12 @@ const updateConfigHandler = async ({ input, configFile, getStudioRuntimeConfig,
         if (update.type === 'delete') {
             continue;
         }
+        if (update.setter === 'setKeyboardShortcuts') {
+            const keyboardShortcutsError = (0, studio_shared_1.validateStudioKeyboardShortcuts)(update.value);
+            if (keyboardShortcutsError !== null) {
+                return { success: false, reason: keyboardShortcutsError };
+            }
+        }
         if (update.setter === 'setDefaultCodingAgent' &&
             (typeof update.value !== 'string' ||
                 !renderer_1.defaultCodingAgentIds.includes(update.value))) {

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

@@ -2,4 +2,8 @@ import type { SequenceNodePathMutation, SequenceNodePathRemapping } from '@remot
 export declare const broadcastSequenceNodePathMutation: (files: {
     absolutePath: string;
     remappings: SequenceNodePathRemapping[];
-}[]) => SequenceNodePathMutation;
+}[], timelineSelection: {
+    compositionId: string;
+    absolutePath: string;
+    nodePath: import("remotion").SequenceNodePath;
+} | null) => SequenceNodePathMutation;

package/dist/preview-server/sequence-node-path-mutation.js

@@ -5,11 +5,12 @@ const node_crypto_1 = require("node:crypto");
 const live_events_1 = require("./live-events");
 const mutationSessionId = (0, node_crypto_1.randomUUID)();
 let mutationCounter = 0;
-const broadcastSequenceNodePathMutation = (files) => {
+const broadcastSequenceNodePathMutation = (files, timelineSelection) => {
     var _a;
     mutationCounter++;
     const mutation = {
         mutationId: `${mutationSessionId}:${mutationCounter}`,
+        timelineSelection,
         files,
     };
     (_a = (0, live_events_1.getLiveEventsListener)()) === null || _a === void 0 ? void 0 : _a.sendEventToClient({

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

@@ -140,6 +140,22 @@ const startServer = async (options) => {
         }
         (0, watch_ignore_next_change_1.setWatchIgnoreNextChangePlugin)(watchIgnorePlugin);
         const wdmMiddleware = (0, dev_middleware_1.wdm)(compiler, options.logLevel);
+        const invalidateBundle = () => {
+            return new Promise((resolve, reject) => {
+                const watching = compiler === null || compiler === void 0 ? void 0 : compiler.watching;
+                if (!watching) {
+                    reject(new Error('The Studio bundle is not being watched.'));
+                    return;
+                }
+                watching.invalidate((error) => {
+                    if (error) {
+                        reject(error);
+                        return;
+                    }
+                    resolve();
+                });
+            });
+        };
         const liveEventsServer = (0, live_events_1.makeLiveEventsRouter)(options.logLevel, () => {
             const undoStack = (0, undo_stack_1.getUndoStack)();
             const redoStack = (0, undo_stack_1.getRedoStack)();
@@ -196,6 +212,7 @@ const startServer = async (options) => {
                     getDefaultCodingAgent: options.getDefaultCodingAgent,
                     getDefaultEditor: options.getDefaultEditor,
                     configFile: options.configFile,
+                    invalidateBundle,
                 });
             })
                 .catch((err) => {

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

@@ -43,7 +43,7 @@ const getProject = ({ gitSource, remotionRoot, }) => (0, studio_shared_1.getProj
 });
 const handleStudioProtocolDiscovery = ({ gitSource, liveEventsServer, remotionRoot, request, response, }) => {
     (0, origin_policy_1.setStudioProtocolCorsHeaders)({ request, response });
-    const requestOrigin = (0, origin_policy_1.getAllowedStudioProtocolOrigin)(request.headers.origin);
+    const requestOrigin = (0, origin_policy_1.getAllowedStudioProtocolOrigin)(request);
     if (requestOrigin === null) {
         (0, protocol_response_1.writeStudioProtocolError)({
             code: 'unsupported-origin',

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

@@ -11,7 +11,7 @@ const handleStudioProtocolElementLibrary = async ({ configFile, focusStudioTab,
     var _a;
     var _b;
     (0, origin_policy_1.setStudioProtocolCorsHeaders)({ request, response });
-    const requestOrigin = (0, origin_policy_1.getAllowedStudioProtocolOrigin)(request.headers.origin);
+    const requestOrigin = (0, origin_policy_1.getAllowedStudioProtocolOrigin)(request);
     if (requestOrigin === null) {
         (0, protocol_response_1.writeStudioProtocolError)({
             code: 'unsupported-origin',

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

@@ -10,7 +10,7 @@ const protocol_response_1 = require("./protocol-response");
 // 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;
+    var _a, _b, _c;
     if (target.compositionFile === null || target.compositionId === null) {
         return false;
     }
@@ -23,7 +23,8 @@ const deliverElementInstall = ({ element, focusStudioTab, liveEventsServer, orig
         element: {
             ...element,
             durationInFrames: (_a = element.durationInFrames) !== null && _a !== void 0 ? _a : null,
-            installationMode: (_b = element.installationMode) !== null && _b !== void 0 ? _b : null,
+            initialProps: (_b = element.initialProps) !== null && _b !== void 0 ? _b : null,
+            installationMode: (_c = element.installationMode) !== null && _c !== void 0 ? _c : null,
         },
         from: null,
         position: null,
@@ -43,7 +44,7 @@ const deliverElementInstall = ({ element, focusStudioTab, liveEventsServer, orig
 };
 const handleStudioProtocolInstall = async ({ focusStudioTab, liveEventsServer, request, response, }) => {
     (0, origin_policy_1.setStudioProtocolCorsHeaders)({ request, response });
-    const requestOrigin = (0, origin_policy_1.getAllowedStudioProtocolOrigin)(request.headers.origin);
+    const requestOrigin = (0, origin_policy_1.getAllowedStudioProtocolOrigin)(request);
     if (requestOrigin === null) {
         (0, protocol_response_1.writeStudioProtocolError)({
             code: 'unsupported-origin',

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

@@ -9,7 +9,7 @@ const protocol_response_1 = require("./protocol-response");
 const MAX_STUDIO_PROTOCOL_LICENSE_KEY_BODY_SIZE = 4096;
 const handleStudioProtocolLicenseKey = async ({ configFile, focusStudioTab, liveEventsServer, request, response, }) => {
     (0, origin_policy_1.setStudioProtocolCorsHeaders)({ request, response });
-    const requestOrigin = (0, origin_policy_1.getAllowedStudioProtocolOrigin)(request.headers.origin);
+    const requestOrigin = (0, origin_policy_1.getAllowedStudioProtocolOrigin)(request);
     if (requestOrigin === null) {
         (0, protocol_response_1.writeStudioProtocolError)({
             code: 'unsupported-origin',

package/dist/preview-server/studio-protocol/origin-policy.d.ts

@@ -1,5 +1,5 @@
 import type { IncomingMessage, ServerResponse } from 'node:http';
-export declare const getAllowedStudioProtocolOrigin: (origin: string | undefined) => string | null;
+export declare const getAllowedStudioProtocolOrigin: (request: IncomingMessage) => string | null;
 export declare const setStudioProtocolCorsHeaders: ({ request, response, }: {
     readonly request: IncomingMessage;
     readonly response: ServerResponse<IncomingMessage>;

package/dist/preview-server/studio-protocol/origin-policy.js

@@ -3,11 +3,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.handleStudioProtocolOptions = exports.setStudioProtocolCorsHeaders = exports.getAllowedStudioProtocolOrigin = void 0;
 const isLoopbackHttp = (url) => url.protocol === 'http:' &&
     (url.hostname === 'localhost' || url.hostname === '127.0.0.1');
-const getAllowedStudioProtocolOrigin = (origin) => {
-    if (!origin) {
-        return null;
-    }
+const getAllowedStudioProtocolOrigin = (request) => {
     try {
+        const { origin, referer, host } = request.headers;
+        if (origin === undefined) {
+            // Browsers omit Origin on same-origin GET requests. Only trust a
+            // Referer matching this local HTTP Studio, never an arbitrary site.
+            const refererUrl = new URL(referer !== null && referer !== void 0 ? referer : '');
+            return isLoopbackHttp(refererUrl) &&
+                refererUrl.origin === `http://${host}`
+                ? refererUrl.origin
+                : null;
+        }
         const url = new URL(origin);
         if (url.protocol !== 'https:' && !isLoopbackHttp(url)) {
             return null;
@@ -20,7 +27,7 @@ const getAllowedStudioProtocolOrigin = (origin) => {
 };
 exports.getAllowedStudioProtocolOrigin = getAllowedStudioProtocolOrigin;
 const setStudioProtocolCorsHeaders = ({ request, response, }) => {
-    const origin = (0, exports.getAllowedStudioProtocolOrigin)(request.headers.origin);
+    const origin = (0, exports.getAllowedStudioProtocolOrigin)(request);
     if (origin === null) {
         return;
     }
@@ -34,7 +41,7 @@ const setStudioProtocolCorsHeaders = ({ request, response, }) => {
 exports.setStudioProtocolCorsHeaders = setStudioProtocolCorsHeaders;
 const handleStudioProtocolOptions = ({ request, response, }) => {
     (0, exports.setStudioProtocolCorsHeaders)({ request, response });
-    const origin = (0, exports.getAllowedStudioProtocolOrigin)(request.headers.origin);
+    const origin = (0, exports.getAllowedStudioProtocolOrigin)(request);
     response.writeHead(origin === null ? 403 : 204);
     response.end();
     return Promise.resolve();

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

@@ -264,7 +264,7 @@ function popUndo() {
             },
         ];
     });
-    const nodePathMutation = files.length === 0 ? null : (0, sequence_node_path_mutation_1.broadcastSequenceNodePathMutation)(files);
+    const nodePathMutation = files.length === 0 ? null : (0, sequence_node_path_mutation_1.broadcastSequenceNodePathMutation)(files, null);
     for (const snapshot of entry.snapshots) {
         suppressUndoStackInvalidation(snapshot.filePath);
         if (entry.suppressHmrOnFileRestore) {
@@ -334,7 +334,7 @@ function popRedo() {
             },
         ];
     });
-    const nodePathMutation = files.length === 0 ? null : (0, sequence_node_path_mutation_1.broadcastSequenceNodePathMutation)(files);
+    const nodePathMutation = files.length === 0 ? null : (0, sequence_node_path_mutation_1.broadcastSequenceNodePathMutation)(files, null);
     for (const snapshot of snapshotsWithNewContents) {
         suppressUndoStackInvalidation(snapshot.filePath);
         if (entry.suppressHmrOnFileRestore) {

package/dist/routes.d.ts

@@ -3,7 +3,7 @@ import type { DefaultEditor } from '@remotion/renderer';
 import type { GitSource, RenderDefaults, RenderJob, StudioRuntimeConfig } from '@remotion/studio-shared';
 import type { QueueMethods } from './preview-server/api-types';
 import type { LiveEventsServer } from './preview-server/live-events';
-export declare const handleRoutes: ({ staticHash, staticHashPrefix, outputHash, outputHashPrefix, request, response, liveEventsServer, getCurrentInputProps, getEnvVariables, remotionRoot, entryPoint, publicDir, logLevel, getRenderQueue, getRenderDefaults, getNumberOfAudioTags, queueMethods: methods, gitSource, binariesDirectory, getAudioLatencyHint, getExperimentalKeepAudioContextAlive, getPreviewSampleRate, enableCrossSiteIsolation, getStudioRuntimeConfig, getDefaultCodingAgent, getDefaultEditor, configFile, }: {
+export declare const handleRoutes: ({ staticHash, staticHashPrefix, outputHash, outputHashPrefix, request, response, liveEventsServer, getCurrentInputProps, getEnvVariables, remotionRoot, entryPoint, publicDir, logLevel, getRenderQueue, getRenderDefaults, getNumberOfAudioTags, queueMethods: methods, gitSource, binariesDirectory, getAudioLatencyHint, getExperimentalKeepAudioContextAlive, getPreviewSampleRate, enableCrossSiteIsolation, getStudioRuntimeConfig, getDefaultCodingAgent, getDefaultEditor, configFile, invalidateBundle, }: {
     staticHash: string;
     staticHashPrefix: string;
     outputHash: string;
@@ -31,4 +31,5 @@ export declare const handleRoutes: ({ staticHash, staticHashPrefix, outputHash,
     getDefaultCodingAgent: () => "claude-code" | "codex" | "copilot" | "cursor" | null;
     getDefaultEditor: () => DefaultEditor | null;
     configFile: string | null;
+    invalidateBundle: () => Promise<void>;
 }) => Promise<void>;

package/dist/routes.js

@@ -52,6 +52,7 @@ const get_static_file_fallback_hint_1 = require("./preview-server/get-static-fil
 const handler_1 = require("./preview-server/handler");
 const public_folder_1 = require("./preview-server/public-folder");
 const app_icon_1 = require("./preview-server/routes/app-icon");
+const install_dependency_1 = require("./preview-server/routes/install-dependency");
 const open_in_editor_1 = require("./preview-server/routes/open-in-editor");
 const update_config_1 = require("./preview-server/routes/update-config");
 const serve_static_1 = require("./preview-server/serve-static");
@@ -139,6 +140,7 @@ const handleFallback = async ({ remotionRoot, hash, response, request, getCurren
     (0, public_folder_1.fetchFolder)({ publicDir, staticHash: hash });
     const installedDependencies = (0, get_installed_installable_packages_1.getInstalledInstallablePackages)(remotionRoot);
     response.end(bundler_1.BundlerInternals.indexHtml({
+        importMap: null,
         staticHash: hash,
         publicPath: '/',
         editorName: displayName,
@@ -287,7 +289,7 @@ const handleBeep = (_, response) => {
     readStream.pipe(response);
     return Promise.resolve();
 };
-const handleRoutes = ({ staticHash, staticHashPrefix, outputHash, outputHashPrefix, request, response, liveEventsServer, getCurrentInputProps, getEnvVariables, remotionRoot, entryPoint, publicDir, logLevel, getRenderQueue, getRenderDefaults, getNumberOfAudioTags, queueMethods: methods, gitSource, binariesDirectory, getAudioLatencyHint, getExperimentalKeepAudioContextAlive, getPreviewSampleRate, enableCrossSiteIsolation, getStudioRuntimeConfig, getDefaultCodingAgent, getDefaultEditor, configFile, }) => {
+const handleRoutes = ({ staticHash, staticHashPrefix, outputHash, outputHashPrefix, request, response, liveEventsServer, getCurrentInputProps, getEnvVariables, remotionRoot, entryPoint, publicDir, logLevel, getRenderQueue, getRenderDefaults, getNumberOfAudioTags, queueMethods: methods, gitSource, binariesDirectory, getAudioLatencyHint, getExperimentalKeepAudioContextAlive, getPreviewSampleRate, enableCrossSiteIsolation, getStudioRuntimeConfig, getDefaultCodingAgent, getDefaultEditor, configFile, invalidateBundle, }) => {
     const url = new URL(request.url, 'http://localhost');
     if (url.pathname === '/api/file-source') {
         return handleFileSource({
@@ -387,6 +389,22 @@ const handleRoutes = ({ staticHash, staticHashPrefix, outputHash, outputHashPref
             getDefaultEditor,
         });
     }
+    if (url.pathname === '/api/install-package') {
+        return (0, handler_1.handleRequest)({
+            remotionRoot,
+            entryPoint,
+            handler: (params) => (0, install_dependency_1.handleInstallPackage)({ ...params, invalidateBundle }),
+            request,
+            response,
+            logLevel,
+            methods,
+            binariesDirectory,
+            publicDir,
+            configFile,
+            getDefaultCodingAgent,
+            getDefaultEditor,
+        });
+    }
     for (const [key, value] of Object.entries(api_routes_1.allApiRoutes)) {
         if (url.pathname === key) {
             return (0, handler_1.handleRequest)({

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.522",
+	"version": "4.0.524",
 	"description": "Run a Remotion Studio with a server backend",
 	"main": "dist",
 	"scripts": {
@@ -23,7 +23,7 @@
 		"access": "public"
 	},
 	"dependencies": {
-		"@remotion/studio-protocol": "4.0.522",
+		"@remotion/studio-protocol": "4.0.524",
 		"@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.5.4",
 		"prettier": "3.8.1",
-		"remotion": "4.0.522",
+		"remotion": "4.0.524",
 		"recast": "0.23.21",
-		"@remotion/bundler": "4.0.522",
-		"@remotion/renderer": "4.0.522",
-		"@remotion/studio-codemods": "4.0.522",
-		"@remotion/studio-shared": "4.0.522",
+		"@remotion/bundler": "4.0.524",
+		"@remotion/renderer": "4.0.524",
+		"@remotion/studio-codemods": "4.0.524",
+		"@remotion/studio-shared": "4.0.524",
 		"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.522",
+		"@remotion/eslint-config-internal": "4.0.524",
 		"eslint": "9.19.0",
 		"@types/node": "20.12.14",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"