@remotion/studio-server 4.0.516 → 4.0.518

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

@@ -1,11 +1,9 @@
 import { deleteJsxElementAtPath, findJsxElementPathForDeletion, getJsxElementTagLabel } from '@remotion/studio-codemods';
 import type { SequenceNodePath } from 'remotion';
 export { deleteJsxElementAtPath, findJsxElementPathForDeletion, getJsxElementTagLabel, };
-export declare const deleteJsxNodes: ({ input, nodePaths, onFormatFile, prettierConfigOverride, }: {
+export declare const deleteJsxNodes: ({ input, nodePaths, }: {
     input: string;
     nodePaths: SequenceNodePath[];
-    onFormatFile: ((stage: "complete" | "start") => void) | null;
-    prettierConfigOverride?: Record<string, unknown> | null | undefined;
 }) => Promise<{
     output: string;
     formatted: boolean;
@@ -16,10 +14,9 @@ export declare const deleteJsxNodes: ({ input, nodePaths, onFormatFile, prettier
         newNodePath: SequenceNodePath | null;
     }[];
 }>;
-export declare const deleteJsxNode: ({ input, nodePath, prettierConfigOverride, }: {
+export declare const deleteJsxNode: ({ input, nodePath, }: {
     input: string;
     nodePath: SequenceNodePath;
-    prettierConfigOverride?: Record<string, unknown> | null | undefined;
 }) => Promise<{
     output: string;
     formatted: boolean;

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

@@ -5,29 +5,13 @@ const studio_codemods_1 = require("@remotion/studio-codemods");
 Object.defineProperty(exports, "deleteJsxElementAtPath", { enumerable: true, get: function () { return studio_codemods_1.deleteJsxElementAtPath; } });
 Object.defineProperty(exports, "findJsxElementPathForDeletion", { enumerable: true, get: function () { return studio_codemods_1.findJsxElementPathForDeletion; } });
 Object.defineProperty(exports, "getJsxElementTagLabel", { enumerable: true, get: function () { return studio_codemods_1.getJsxElementTagLabel; } });
-const format_file_content_1 = require("./format-file-content");
-const deleteJsxNodes = ({ input, nodePaths, onFormatFile, prettierConfigOverride, }) => (0, studio_codemods_1.deleteJsxNodes)({
+const deleteJsxNodes = ({ input, nodePaths, }) => (0, studio_codemods_1.deleteJsxNodes)({
     input,
     nodePaths,
-    formatFile: async ({ contents, prettierConfigOverride: override }) => {
-        onFormatFile === null || onFormatFile === void 0 ? void 0 : onFormatFile('start');
-        const result = await (0, format_file_content_1.formatFileContent)({
-            input: contents,
-            prettierConfigOverride: override,
-        });
-        onFormatFile === null || onFormatFile === void 0 ? void 0 : onFormatFile('complete');
-        return result;
-    },
-    prettierConfigOverride,
 });
 exports.deleteJsxNodes = deleteJsxNodes;
-const deleteJsxNode = ({ input, nodePath, prettierConfigOverride, }) => (0, studio_codemods_1.deleteJsxNode)({
+const deleteJsxNode = ({ input, nodePath, }) => (0, studio_codemods_1.deleteJsxNode)({
     input,
     nodePath,
-    formatFile: ({ contents, prettierConfigOverride: override }) => (0, format_file_content_1.formatFileContent)({
-        input: contents,
-        prettierConfigOverride: override,
-    }),
-    prettierConfigOverride,
 });
 exports.deleteJsxNode = deleteJsxNode;

package/dist/detect-outdated-remotion-skills.js

@@ -44,10 +44,10 @@ const getStatusForSkillsDirectory = ({ currentVersion, scope, skillsDirectory, }
     }
     const outdatedSkillNames = remotion_skill_names_1.remotionSkillNames.filter((skillName) => {
         const skill = installedSkills.get(skillName);
-        return (!(skill === null || skill === void 0 ? void 0 : skill.installed) ||
-            skill.version === null ||
-            semver_1.default.valid(skill.version) === null ||
-            semver_1.default.lt(skill.version, currentVersion));
+        return ((skill === null || skill === void 0 ? void 0 : skill.installed) &&
+            (skill.version === null ||
+                semver_1.default.valid(skill.version) === null ||
+                semver_1.default.lt(skill.version, currentVersion)));
     });
     if (outdatedSkillNames.length > 0) {
         return { type: 'outdated', scope, skillsDirectory, outdatedSkillNames };

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

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

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

@@ -57,7 +57,6 @@ const unsubscribe_from_default_props_1 = require("./routes/unsubscribe-from-defa
 const unsubscribe_from_file_existence_1 = require("./routes/unsubscribe-from-file-existence");
 const unsubscribe_from_sequence_props_1 = require("./routes/unsubscribe-from-sequence-props");
 const update_available_1 = require("./routes/update-available");
-const update_config_1 = require("./routes/update-config");
 const update_default_props_1 = require("./routes/update-default-props");
 const update_effect_keyframe_settings_1 = require("./routes/update-effect-keyframe-settings");
 const update_element_install_target_1 = require("./routes/update-element-install-target");
@@ -113,7 +112,6 @@ exports.allApiRoutes = {
     '/api/delete-static-file': delete_static_file_1.deleteStaticFileHandler,
     '/api/rename-static-file': rename_static_file_1.renameStaticFileHandler,
     '/api/restart-studio': restart_studio_1.handleRestartStudio,
-    '/api/update-config': update_config_1.updateConfigHandler,
     '/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,

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

@@ -11,7 +11,7 @@ export type ElementInstallTarget = {
     studioUrl: string;
     updatedAt: number;
 };
-export type StudioProtocolTargetPurpose = 'install-element' | 'set-license-key';
+export type StudioProtocolTargetPurpose = 'install-element' | 'set-license-key' | 'add-element-library';
 type StudioProtocolTarget = {
     readonly id: string;
     readonly origin: string;

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

@@ -77,7 +77,7 @@ const consumeStudioProtocolTarget = ({ now, origin, purpose, targetId, }) => {
         current.readOnly) {
         return null;
     }
-    if (purpose === 'set-license-key') {
+    if (purpose !== 'install-element') {
         return issued.target;
     }
     if (!current.canInstall ||

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

@@ -10,7 +10,6 @@ const format_log_file_location_1 = require("../format-log-file-location");
 const hmr_timing_1 = require("../hmr-timing");
 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 getDeletedNodeDescription = (nodeLabels) => {
     if (nodeLabels.length === 1) {
@@ -44,23 +43,15 @@ const deleteJsxNodeHandler = ({ input: { nodes }, remotionRoot, logLevel }) => {
                     action: 'modify',
                 });
                 const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
-                const { output, formatted, nodeLabels, logLines, nodePathRemappings } = await (0, delete_jsx_node_1.deleteJsxNodes)({
+                const { output, nodeLabels, logLines, nodePathRemappings } = await (0, delete_jsx_node_1.deleteJsxNodes)({
                     input: fileContents,
                     nodePaths: fileItems.map((item) => item.nodePath),
-                    onFormatFile: (stage) => {
-                        (0, hmr_timing_1.logHmrTiming)({
-                            detail: `file=${fileRelativeToRoot}`,
-                            logLevel,
-                            stage: `source-file-format-${stage}`,
-                        });
-                    },
                 });
                 return {
                     absolutePath,
                     fileRelativeToRoot,
                     fileContents,
                     output,
-                    formatted,
                     nodeLabels,
                     nodePathRemappings,
                     logLine: Math.min(...logLines),
@@ -116,10 +107,7 @@ const deleteJsxNodeHandler = ({ input: { nodes }, remotionRoot, logLevel }) => {
                     line: update.logLine,
                 });
                 renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${(0, source_file_write_queue_1.getCodemodTimingPrefix)(logLevel)}${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} Deleted ${deletedNodeDescription}`);
-                if (!update.formatted) {
-                    (0, log_update_1.warnAboutPrettierOnce)(logLevel);
-                }
-                renderer_1.RenderInternals.Log.verbose({ indent: false, logLevel }, `[delete-jsx-node] Wrote ${update.fileRelativeToRoot}${update.formatted ? ' (formatted)' : ''}`);
+                renderer_1.RenderInternals.Log.verbose({ indent: false, logLevel }, `[delete-jsx-node] Wrote ${update.fileRelativeToRoot}`);
             }
             (0, undo_stack_1.printUndoHint)(logLevel);
             return {

package/dist/preview-server/routes/update-config.d.ts

@@ -1,7 +1,12 @@
-import { type ConfigUpdate, type UpdateConfigRequest, type UpdateConfigResponse } from '@remotion/studio-shared';
+import { type ConfigUpdate, type StudioRuntimeConfig, type UpdateConfigRequest, type UpdateConfigResponse } from '@remotion/studio-shared';
 import type { ApiHandler } from '../api-types';
-export declare const updateConfigFile: ({ configContents, updates, }: {
+export declare const updateConfigFile: ({ configContents, existingElementLibraryUrls, updates, }: {
     readonly configContents: string;
+    readonly existingElementLibraryUrls: readonly string[];
     readonly updates: ConfigUpdate[];
 }) => string;
-export declare const updateConfigHandler: ApiHandler<UpdateConfigRequest, UpdateConfigResponse>;
+type UpdateConfigHandlerParams = Parameters<ApiHandler<UpdateConfigRequest, UpdateConfigResponse>>[0] & {
+    readonly getStudioRuntimeConfig: () => StudioRuntimeConfig;
+};
+export declare const updateConfigHandler: ({ input, configFile, getStudioRuntimeConfig, }: UpdateConfigHandlerParams) => Promise<UpdateConfigResponse>;
+export {};

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

@@ -74,7 +74,7 @@ const validateUpdates = (updates) => {
         }
         const { setter, type } = update;
         if (typeof setter !== 'string' ||
-            !validSetterName.test(setter) ||
+            (!validSetterName.test(setter) && setter !== 'addElementLibrary') ||
             !(setter in studio_shared_1.configMethodLifecycles)) {
             return `Invalid config setter: ${JSON.stringify(setter)}.`;
         }
@@ -82,6 +82,34 @@ const validateUpdates = (updates) => {
             return `The config setter ${setter} was specified more than once.`;
         }
         setters.add(setter);
+        if (setter === 'addElementLibrary') {
+            if (type !== 'set' ||
+                !('value' in update) ||
+                typeof update.value !== 'object' ||
+                update.value === null ||
+                Array.isArray(update.value)) {
+                return 'Config.addElementLibrary() expects an object value.';
+            }
+            const elementLibrary = update.value;
+            const { displayName, url } = elementLibrary;
+            if (typeof url !== 'string') {
+                return 'Config.addElementLibrary() expects an HTTP or HTTPS URL.';
+            }
+            try {
+                const parsedUrl = new URL(url);
+                if (parsedUrl.protocol !== 'http:' && parsedUrl.protocol !== 'https:') {
+                    return 'Config.addElementLibrary() expects an HTTP or HTTPS URL.';
+                }
+            }
+            catch (_a) {
+                return 'Config.addElementLibrary() expects an HTTP or HTTPS URL.';
+            }
+            if (displayName !== undefined &&
+                (typeof displayName !== 'string' || displayName.trim() === '')) {
+                return 'Config.addElementLibrary() expects a non-empty display name.';
+            }
+            continue;
+        }
         if (type === 'delete') {
             continue;
         }
@@ -93,20 +121,64 @@ const validateUpdates = (updates) => {
     }
     return null;
 };
-const updateConfigFile = ({ configContents, updates, }) => {
+const updateConfigFile = ({ configContents, existingElementLibraryUrls, updates, }) => {
     const setters = new Set(updates.map(({ setter }) => setter));
+    const elementLibraryUrls = new Set();
+    for (const url of existingElementLibraryUrls) {
+        try {
+            elementLibraryUrls.add(new URL(url).href);
+        }
+        catch (_a) {
+            // Runtime config only contains validated URLs.
+        }
+    }
+    let changed = false;
     const ast = (0, parse_ast_1.parseAst)(configContents);
     recast.types.visit(ast.program, {
         visitExpressionStatement(path) {
             const { expression } = path.node;
-            if (expression.type === 'CallExpression' &&
-                expression.callee.type === 'MemberExpression' &&
-                !expression.callee.computed &&
-                expression.callee.object.type === 'Identifier' &&
-                expression.callee.object.name === 'Config' &&
-                expression.callee.property.type === 'Identifier' &&
-                setters.has(expression.callee.property.name)) {
+            if (expression.type !== 'CallExpression' ||
+                expression.callee.type !== 'MemberExpression' ||
+                expression.callee.computed ||
+                expression.callee.object.type !== 'Identifier' ||
+                expression.callee.object.name !== 'Config' ||
+                expression.callee.property.type !== 'Identifier') {
+                this.traverse(path);
+                return;
+            }
+            const setter = expression.callee.property.name;
+            if (setter === 'addElementLibrary') {
+                const argument = expression.arguments[0];
+                if ((argument === null || argument === void 0 ? void 0 : argument.type) === 'ObjectExpression') {
+                    const urlProperty = argument.properties.find((property) => {
+                        if (property.type !== 'ObjectProperty' || property.computed) {
+                            return false;
+                        }
+                        return ((property.key.type === 'Identifier' &&
+                            property.key.name === 'url') ||
+                            (property.key.type === 'StringLiteral' &&
+                                property.key.value === 'url'));
+                    });
+                    if ((urlProperty === null || urlProperty === void 0 ? void 0 : urlProperty.type) === 'ObjectProperty' &&
+                        urlProperty.value.type === 'StringLiteral') {
+                        try {
+                            const parsedUrl = new URL(urlProperty.value.value);
+                            if (parsedUrl.protocol === 'http:' ||
+                                parsedUrl.protocol === 'https:') {
+                                elementLibraryUrls.add(parsedUrl.href);
+                            }
+                        }
+                        catch (_a) {
+                            // Preserve invalid existing config without treating it as a match.
+                        }
+                    }
+                }
+                this.traverse(path);
+                return;
+            }
+            if (setters.has(setter)) {
                 path.prune();
+                changed = true;
                 return false;
             }
             this.traverse(path);
@@ -117,22 +189,41 @@ const updateConfigFile = ({ configContents, updates, }) => {
         if (update.type === 'delete') {
             continue;
         }
-        const serializedValue = JSON.stringify(update.value)
+        const { setter, value: initialValue } = update;
+        let value = initialValue;
+        if (setter === 'addElementLibrary') {
+            const elementLibrary = initialValue;
+            const { displayName: rawDisplayName, url } = elementLibrary;
+            const normalizedUrl = new URL(url).href;
+            if (elementLibraryUrls.has(normalizedUrl)) {
+                continue;
+            }
+            const displayName = typeof rawDisplayName === 'string' ? rawDisplayName.trim() : null;
+            value =
+                displayName === null
+                    ? { url: normalizedUrl }
+                    : { url: normalizedUrl, displayName };
+            elementLibraryUrls.add(normalizedUrl);
+        }
+        const serializedValue = JSON.stringify(value)
             .replaceAll('\u2028', '\\u2028')
             .replaceAll('\u2029', '\\u2029');
-        const statement = (0, parse_ast_1.parseAst)(`Config.${update.setter}(${serializedValue});`)
-            .program.body[0];
+        const statement = (0, parse_ast_1.parseAst)(`Config.${setter}(${serializedValue});`).program
+            .body[0];
         const separator = updatedConfig.endsWith('\n') ? '' : '\n';
         updatedConfig += `${separator}${recast.prettyPrint(statement, {
             lineTerminator: '\n',
             quote: 'single',
             useTabs: true,
         }).code}\n`;
+        changed = true;
     }
-    return updatedConfig;
+    return changed ? updatedConfig : configContents;
 };
 exports.updateConfigFile = updateConfigFile;
-const updateConfigHandler = async ({ input, configFile }) => {
+const updateConfigHandler = async ({ input, configFile, getStudioRuntimeConfig, }) => {
+    var _a;
+    var _b;
     if (configFile === null || configFile === undefined) {
         return {
             success: false,
@@ -182,9 +273,17 @@ const updateConfigHandler = async ({ input, configFile }) => {
         }
     }
     const configContents = (0, node_fs_1.readFileSync)(configFile, 'utf8');
+    const updatedConfig = (0, exports.updateConfigFile)({
+        configContents,
+        existingElementLibraryUrls: (_b = (_a = getStudioRuntimeConfig().elementLibraries) === null || _a === void 0 ? void 0 : _a.map(({ url }) => url)) !== null && _b !== void 0 ? _b : [],
+        updates: input.updates,
+    });
+    if (updatedConfig === configContents) {
+        return { success: true };
+    }
     (0, file_watcher_1.writeFileAndNotifyFileWatchers)({
         file: configFile,
-        content: (0, exports.updateConfigFile)({ configContents, updates: input.updates }),
+        content: updatedConfig,
         originatorClientId: input.clientId,
         metadata: null,
     });

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

@@ -85,6 +85,14 @@ const handleStudioProtocolDiscovery = ({ gitSource, liveEventsServer, remotionRo
                     purpose: 'set-license-key',
                     target,
                 });
+            const issuedElementLibraryTarget = target === null
+                ? null
+                : (0, element_install_state_1.issueStudioProtocolTarget)({
+                    now,
+                    origin: requestOrigin,
+                    purpose: 'add-element-library',
+                    target,
+                });
             response.writeHead(200, {
                 'Cache-Control': 'no-store',
                 'Content-Type': 'application/json',
@@ -120,6 +128,18 @@ const handleStudioProtocolDiscovery = ({ gitSource, liveEventsServer, remotionRo
                                 lastFocusedAt: target.lastFocusedAt,
                             },
                     },
+                    {
+                        type: 'add-element-library',
+                        target: issuedElementLibraryTarget === null ||
+                            target === null ||
+                            target.lastFocusedAt === null
+                            ? null
+                            : {
+                                id: issuedElementLibraryTarget.id,
+                                expiresAt: issuedElementLibraryTarget.expiresAt,
+                                lastFocusedAt: target.lastFocusedAt,
+                            },
+                    },
                 ],
             }));
             resolve();

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

@@ -0,0 +1,11 @@
+import type { IncomingMessage, ServerResponse } from 'node:http';
+import type { LiveEventsServer } from '../live-events';
+type FocusStudioTab = (studioUrl: string) => void;
+export declare const handleStudioProtocolElementLibrary: ({ configFile, focusStudioTab, liveEventsServer, request, response, }: {
+    readonly configFile: string | null;
+    readonly focusStudioTab: FocusStudioTab;
+    readonly liveEventsServer: LiveEventsServer;
+    readonly request: IncomingMessage;
+    readonly response: ServerResponse<IncomingMessage>;
+}) => Promise<void>;
+export {};

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

@@ -0,0 +1,149 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleStudioProtocolElementLibrary = void 0;
+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 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;
+    var _b;
+    (0, origin_policy_1.setStudioProtocolCorsHeaders)({ request, response });
+    const requestOrigin = (0, origin_policy_1.getAllowedStudioProtocolOrigin)(request.headers.origin);
+    if (requestOrigin === null) {
+        (0, protocol_response_1.writeStudioProtocolError)({
+            code: 'unsupported-origin',
+            message: 'Origin not allowed',
+            response,
+            status: 403,
+        });
+        return;
+    }
+    if (request.method !== 'POST') {
+        (0, protocol_response_1.writeStudioProtocolError)({
+            code: 'method-not-allowed',
+            message: 'Use POST to add an Element catalog.',
+            response,
+            status: 405,
+        });
+        return;
+    }
+    let body;
+    try {
+        body = await (0, parse_body_1.parseRequestBody)(request, {
+            maxBytes: MAX_STUDIO_PROTOCOL_ELEMENT_LIBRARY_BODY_SIZE,
+        });
+    }
+    catch (error) {
+        if (error instanceof parse_body_1.RequestBodyTooLargeError) {
+            (0, protocol_response_1.writeStudioProtocolError)({
+                code: 'request-too-large',
+                message: 'The request body is too large.',
+                response,
+                status: 413,
+            });
+            return;
+        }
+        (0, protocol_response_1.writeStudioProtocolError)({
+            code: 'invalid-request',
+            message: 'The request body is not valid JSON.',
+            response,
+            status: 400,
+        });
+        return;
+    }
+    const parsedRequest = studioProtocolElementLibraryRequestSchema.safeParse(body);
+    if (!parsedRequest.success) {
+        (0, protocol_response_1.writeStudioProtocolError)({
+            code: 'unsupported-protocol',
+            message: 'Invalid Remotion Studio Protocol request.',
+            response,
+            status: 400,
+        });
+        return;
+    }
+    let normalizedUrl;
+    try {
+        const parsedUrl = new URL(parsedRequest.data.url);
+        if (parsedUrl.protocol !== 'http:' && parsedUrl.protocol !== 'https:') {
+            throw new Error('Unsupported protocol');
+        }
+        normalizedUrl = parsedUrl.href;
+    }
+    catch (_c) {
+        (0, protocol_response_1.writeStudioProtocolError)({
+            code: 'invalid-url',
+            message: 'The Element catalog URL must be an absolute HTTP or HTTPS URL.',
+            response,
+            status: 400,
+        });
+        return;
+    }
+    const displayName = (_b = (_a = parsedRequest.data.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',
+            message: 'The Element catalog display name must not be empty.',
+            response,
+            status: 400,
+        });
+        return;
+    }
+    const target = (0, element_install_state_1.consumeStudioProtocolTarget)({
+        now: Date.now(),
+        origin: requestOrigin,
+        purpose: 'add-element-library',
+        targetId: parsedRequest.data.targetId,
+    });
+    if (target === null) {
+        (0, protocol_response_1.writeStudioProtocolError)({
+            code: 'target-expired',
+            message: 'The selected Studio target is no longer available.',
+            response,
+            status: 409,
+        });
+        return;
+    }
+    if (configFile === null) {
+        (0, protocol_response_1.writeStudioProtocolError)({
+            code: 'no-config-file',
+            message: 'The selected Studio did not load a Remotion config file.',
+            response,
+            status: 409,
+        });
+        return;
+    }
+    const delivered = liveEventsServer.sendEventToClientId(target.clientId, {
+        type: 'element-library-add-request',
+        url: normalizedUrl,
+        displayName,
+        origin: requestOrigin,
+    });
+    if (!delivered) {
+        (0, protocol_response_1.writeStudioProtocolError)({
+            code: 'target-expired',
+            message: 'The selected Remotion Studio tab is no longer connected.',
+            response,
+            status: 409,
+        });
+        return;
+    }
+    focusStudioTab(target.studioUrl);
+    response.writeHead(200, { 'Content-Type': 'application/json' });
+    response.end(JSON.stringify({
+        protocol: 'remotion-studio-protocol',
+        protocolVersion: 1,
+        status: 'awaiting-confirmation',
+    }));
+};
+exports.handleStudioProtocolElementLibrary = handleStudioProtocolElementLibrary;

package/dist/routes.js

@@ -53,8 +53,10 @@ 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 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");
 const handle_discovery_1 = require("./preview-server/studio-protocol/handle-discovery");
+const handle_element_library_1 = require("./preview-server/studio-protocol/handle-element-library");
 const handle_install_1 = require("./preview-server/studio-protocol/handle-install");
 const handle_license_key_1 = require("./preview-server/studio-protocol/handle-license-key");
 const origin_policy_1 = require("./preview-server/studio-protocol/origin-policy");
@@ -321,7 +323,8 @@ const handleRoutes = ({ staticHash, staticHashPrefix, outputHash, outputHashPref
     }
     if (url.pathname === '/api/studio-protocol' ||
         url.pathname === '/api/studio-protocol/install' ||
-        url.pathname === '/api/studio-protocol/license-key') {
+        url.pathname === '/api/studio-protocol/license-key' ||
+        url.pathname === '/api/studio-protocol/element-library') {
         if (request.method === 'OPTIONS') {
             return (0, origin_policy_1.handleStudioProtocolOptions)({
                 request,
@@ -348,6 +351,17 @@ const handleRoutes = ({ staticHash, staticHashPrefix, outputHash, outputHashPref
                 response,
             });
         }
+        if (url.pathname === '/api/studio-protocol/element-library') {
+            return (0, handle_element_library_1.handleStudioProtocolElementLibrary)({
+                configFile,
+                focusStudioTab: (studioUrl) => {
+                    (0, better_opn_1.focusBrowserTab)({ url: studioUrl }).catch(() => undefined);
+                },
+                liveEventsServer,
+                request,
+                response,
+            });
+        }
         return (0, handle_install_1.handleStudioProtocolInstall)({
             focusStudioTab: (studioUrl) => {
                 (0, better_opn_1.focusBrowserTab)({ url: studioUrl }).catch(() => undefined);
@@ -357,6 +371,22 @@ const handleRoutes = ({ staticHash, staticHashPrefix, outputHash, outputHashPref
             response,
         });
     }
+    if (url.pathname === '/api/update-config') {
+        return (0, handler_1.handleRequest)({
+            remotionRoot,
+            entryPoint,
+            handler: (params) => (0, update_config_1.updateConfigHandler)({ ...params, getStudioRuntimeConfig }),
+            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.516",
+	"version": "4.0.518",
 	"description": "Run a Remotion Studio with a server backend",
 	"main": "dist",
 	"scripts": {
@@ -23,7 +23,7 @@
 		"access": "public"
 	},
 	"dependencies": {
-		"@remotion/studio-protocol": "4.0.516",
+		"@remotion/studio-protocol": "4.0.518",
 		"@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.516",
+		"remotion": "4.0.518",
 		"recast": "0.23.21",
-		"@remotion/bundler": "4.0.516",
-		"@remotion/renderer": "4.0.516",
-		"@remotion/studio-codemods": "4.0.516",
-		"@remotion/studio-shared": "4.0.516",
+		"@remotion/bundler": "4.0.518",
+		"@remotion/renderer": "4.0.518",
+		"@remotion/studio-codemods": "4.0.518",
+		"@remotion/studio-shared": "4.0.518",
 		"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.516",
+		"@remotion/eslint-config-internal": "4.0.518",
 		"eslint": "9.19.0",
 		"@types/node": "20.12.14",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"

package/dist/preview-server/routes/delete-effect-keyframe.d.ts

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

package/dist/preview-server/routes/delete-effect-keyframe.js

@@ -1,89 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.deleteEffectKeyframeHandler = void 0;
-const node_fs_1 = require("node:fs");
-const renderer_1 = require("@remotion/renderer");
-const studio_shared_1 = require("@remotion/studio-shared");
-const parse_ast_1 = require("../../codemods/parse-ast");
-const update_keyframes_1 = require("../../codemods/update-keyframes/update-keyframes");
-const file_watcher_1 = require("../../file-watcher");
-const resolve_file_inside_project_1 = require("../../helpers/resolve-file-inside-project");
-const undo_stack_1 = require("../undo-stack");
-const watch_ignore_next_change_1 = require("../watch-ignore-next-change");
-const can_update_effect_props_1 = require("./can-update-effect-props");
-const can_update_sequence_props_1 = require("./can-update-sequence-props");
-const log_effect_update_1 = require("./log-updates/log-effect-update");
-const save_props_mutex_1 = require("./save-props-mutex");
-const deleteEffectKeyframeHandler = ({ input: { fileName, sequenceNodePath, effectIndex, key, frame, schema, clientId, }, remotionRoot, logLevel, }) => (0, save_props_mutex_1.withSavePropsLock)(async () => {
-    renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[delete-effect-keyframe] Received request for fileName="${fileName}" effectIndex=${effectIndex} key="${key}" frame=${frame}`);
-    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, oldValueStrings, newValueStrings, formatted, logLine, effectCallee, } = await (0, update_keyframes_1.updateEffectKeyframes)({
-        input: fileContents,
-        sequenceNodePath: sequenceNodePath.nodePath,
-        effectIndex,
-        updates: [
-            {
-                key,
-                operation: {
-                    type: 'remove',
-                    frame,
-                },
-            },
-        ],
-    });
-    const oldValueString = oldValueStrings[0];
-    const newValueString = newValueStrings[0];
-    const undoPropChange = `${key} keyframe restored at frame ${frame}`;
-    const redoPropChange = `${key} keyframe deleted at frame ${frame}`;
-    (0, undo_stack_1.pushToUndoStack)({
-        filePath: absolutePath,
-        oldContents: fileContents,
-        newContents: null,
-        logLevel,
-        remotionRoot,
-        logLine,
-        description: {
-            undoMessage: `↩️  ${undoPropChange}`,
-            redoMessage: `↪️  ${redoPropChange}`,
-        },
-        entryType: 'effect-props',
-        suppressHmrOnFileRestore: true,
-    });
-    (0, undo_stack_1.suppressUndoStackInvalidation)(absolutePath);
-    (0, watch_ignore_next_change_1.suppressBundlerUpdateForFile)(absolutePath);
-    (0, file_watcher_1.writeFileAndNotifyFileWatchers)(absolutePath, output, clientId);
-    (0, log_effect_update_1.logEffectUpdate)({
-        fileRelativeToRoot,
-        line: logLine,
-        effectName: effectCallee,
-        propKey: key,
-        oldValueString,
-        newValueString,
-        defaultValueString: null,
-        formatted,
-        logLevel,
-        removedProps: [],
-        addedProps: [],
-    });
-    (0, undo_stack_1.printUndoHint)(logLevel);
-    const ast = (0, parse_ast_1.parseAst)((0, node_fs_1.readFileSync)(absolutePath, 'utf-8'));
-    const jsx = (0, can_update_sequence_props_1.findJsxElementAtNodePath)(ast, sequenceNodePath.nodePath);
-    if (!jsx) {
-        return {
-            canUpdate: false,
-            effectIndex,
-            reason: 'not-found',
-        };
-    }
-    return (0, can_update_effect_props_1.computeEffectPropStatus)({
-        jsx,
-        effectIndex,
-        keys: (0, studio_shared_1.getAllSchemaKeys)(schema),
-    });
-});
-exports.deleteEffectKeyframeHandler = deleteEffectKeyframeHandler;

package/dist/preview-server/routes/delete-sequence-keyframe.d.ts

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

package/dist/preview-server/routes/delete-sequence-keyframe.js

@@ -1,82 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.deleteSequenceKeyframeHandler = void 0;
-const node_fs_1 = require("node:fs");
-const renderer_1 = require("@remotion/renderer");
-const studio_shared_1 = require("@remotion/studio-shared");
-const update_keyframes_1 = require("../../codemods/update-keyframes/update-keyframes");
-const file_watcher_1 = require("../../file-watcher");
-const resolve_file_inside_project_1 = require("../../helpers/resolve-file-inside-project");
-const undo_stack_1 = require("../undo-stack");
-const watch_ignore_next_change_1 = require("../watch-ignore-next-change");
-const can_update_sequence_props_1 = require("./can-update-sequence-props");
-const log_update_1 = require("./log-updates/log-update");
-const save_props_mutex_1 = require("./save-props-mutex");
-const deleteSequenceKeyframeHandler = ({ input: { fileName, nodePath, key, frame, schema, clientId }, remotionRoot, logLevel, }) => (0, save_props_mutex_1.withSavePropsLock)(async () => {
-    renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[delete-sequence-keyframe] Received request for fileName="${fileName}" key="${key}" frame=${frame}`);
-    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, oldValueStrings, newValueStrings, formatted, logLine } = await (0, update_keyframes_1.updateSequenceKeyframes)({
-        input: fileContents,
-        nodePath: nodePath.nodePath,
-        updates: [
-            {
-                key,
-                operation: {
-                    type: 'remove',
-                    frame,
-                },
-            },
-        ],
-    });
-    const oldValueString = oldValueStrings[0];
-    const newValueString = newValueStrings[0];
-    const undoPropChange = `${key} keyframe restored at frame ${frame}`;
-    const redoPropChange = `${key} keyframe deleted at frame ${frame}`;
-    (0, undo_stack_1.pushToUndoStack)({
-        filePath: absolutePath,
-        oldContents: fileContents,
-        newContents: null,
-        logLevel,
-        remotionRoot,
-        logLine,
-        description: {
-            undoMessage: `↩️  ${undoPropChange}`,
-            redoMessage: `↪️  ${redoPropChange}`,
-        },
-        entryType: 'sequence-props',
-        suppressHmrOnFileRestore: true,
-    });
-    (0, undo_stack_1.suppressUndoStackInvalidation)(absolutePath);
-    (0, watch_ignore_next_change_1.suppressBundlerUpdateForFile)(absolutePath);
-    (0, file_watcher_1.writeFileAndNotifyFileWatchers)(absolutePath, output, clientId);
-    (0, log_update_1.logUpdate)({
-        fileRelativeToRoot,
-        line: logLine,
-        key,
-        oldValueString,
-        newValueString,
-        defaultValueString: null,
-        formatted,
-        logLevel,
-        removedProps: [],
-        addedProps: [],
-    });
-    (0, undo_stack_1.printUndoHint)(logLevel);
-    const status = (0, can_update_sequence_props_1.computeSequencePropsStatusFromContent)({
-        fileContents: output,
-        keys: (0, studio_shared_1.getAllSchemaKeys)(schema),
-        nodePath: nodePath.nodePath,
-        effects: [],
-    });
-    return {
-        canUpdate: true,
-        props: status.props,
-        results: [{ fileName, nodePath, props: status.props }],
-    };
-});
-exports.deleteSequenceKeyframeHandler = deleteSequenceKeyframeHandler;

package/dist/preview-server/routes/save-props-mutex.d.ts

@@ -1 +0,0 @@
-export declare const withSavePropsLock: <T>(fn: () => Promise<T>) => Promise<T>;

package/dist/preview-server/routes/save-props-mutex.js

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.withSavePropsLock = void 0;
-let chain = Promise.resolve();
-const withSavePropsLock = (fn) => {
-    const run = () => fn();
-    const next = chain.then(run, run);
-    chain = next.then(() => undefined, () => undefined);
-    return next;
-};
-exports.withSavePropsLock = withSavePropsLock;