@remotion/studio-server 4.0.522 → 4.0.523

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/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,7 @@ 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 () => {
     try {
         (0, element_install_plan_1.validateElementInstallPosition)(position);
         if (from !== null &&
@@ -34,6 +34,7 @@ const insertElementHandler = ({ input: { compositionFile, compositionId, element
         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)({
+            installationName,
             destination: {
                 type: 'current-composition',
                 compositionFile,
@@ -63,11 +64,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',
@@ -116,6 +114,7 @@ const insertElementHandler = ({ input: { compositionFile, compositionId, element
                 },
         });
         const finalPlan = await (0, element_install_plan_1.getElementInstallPlan)({
+            installationName,
             destination: {
                 type: 'current-composition',
                 compositionFile,
@@ -140,7 +139,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/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.523",
 	"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.523",
 		"@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.523",
 		"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.523",
+		"@remotion/renderer": "4.0.523",
+		"@remotion/studio-codemods": "4.0.523",
+		"@remotion/studio-shared": "4.0.523",
 		"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.523",
 		"eslint": "9.19.0",
 		"@types/node": "20.12.14",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"