@remotion/studio-server 4.0.469 → 4.0.471

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

@@ -9,44 +9,75 @@ const resolve_file_inside_project_1 = require("../../helpers/resolve-file-inside
 const format_log_file_location_1 = require("../format-log-file-location");
 const undo_stack_1 = require("../undo-stack");
 const log_update_1 = require("./log-updates/log-update");
-const deleteJsxNodeHandler = async ({ input: { fileName, nodePath }, remotionRoot, logLevel }) => {
+const getDeletedNodeDescription = (nodeLabels) => {
+    if (nodeLabels.length === 1) {
+        return nodeLabels[0];
+    }
+    return `${nodeLabels.length} JSX nodes`;
+};
+const deleteJsxNodeHandler = async ({ input: { nodes }, remotionRoot, logLevel }) => {
+    var _a;
     try {
-        renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[delete-jsx-node] Received request for fileName="${fileName}"`);
-        const { absolutePath, fileRelativeToRoot } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
-            remotionRoot,
-            fileName,
-            action: 'modify',
-        });
-        const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
-        const { output, formatted, nodeLabel, logLine } = await (0, delete_jsx_node_1.deleteJsxNode)({
-            input: fileContents,
-            nodePath,
-        });
-        (0, undo_stack_1.pushToUndoStack)({
-            filePath: absolutePath,
-            oldContents: fileContents,
-            logLevel,
-            remotionRoot,
-            logLine,
-            description: {
-                undoMessage: `↩️  Deletion of ${nodeLabel}`,
-                redoMessage: `↪️  Deletion of ${nodeLabel}`,
-            },
-            entryType: 'delete-jsx-node',
-            suppressHmrOnFileRestore: false,
-        });
-        (0, undo_stack_1.suppressUndoStackInvalidation)(absolutePath);
-        (0, file_watcher_1.writeFileAndNotifyFileWatchers)(absolutePath, output, undefined);
-        const locationLabel = (0, format_log_file_location_1.formatLogFileLocation)({
-            remotionRoot,
-            absolutePath,
-            line: logLine,
-        });
-        renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} Deleted ${nodeLabel}`);
-        if (!formatted) {
-            (0, log_update_1.warnAboutPrettierOnce)(logLevel);
+        if (nodes.length === 0) {
+            throw new Error('No JSX nodes were specified for deletion');
+        }
+        renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[delete-jsx-node] Received request to delete ${nodes.length} JSX node${nodes.length === 1 ? '' : 's'}`);
+        const itemsByFileName = new Map();
+        for (const item of nodes) {
+            const fileItems = (_a = itemsByFileName.get(item.fileName)) !== null && _a !== void 0 ? _a : [];
+            fileItems.push(item);
+            itemsByFileName.set(item.fileName, fileItems);
+        }
+        const updates = await Promise.all([...itemsByFileName.entries()].map(async ([fileName, fileItems]) => {
+            const { absolutePath, fileRelativeToRoot } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
+                remotionRoot,
+                fileName,
+                action: 'modify',
+            });
+            const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
+            const { output, formatted, nodeLabels, logLines } = await (0, delete_jsx_node_1.deleteJsxNodes)({
+                input: fileContents,
+                nodePaths: fileItems.map((item) => item.nodePath),
+            });
+            return {
+                absolutePath,
+                fileRelativeToRoot,
+                fileContents,
+                output,
+                formatted,
+                nodeLabels,
+                logLine: Math.min(...logLines),
+            };
+        }));
+        for (const update of updates) {
+            const deletedNodeDescription = getDeletedNodeDescription(update.nodeLabels);
+            (0, undo_stack_1.pushToUndoStack)({
+                filePath: update.absolutePath,
+                oldContents: update.fileContents,
+                newContents: null,
+                logLevel,
+                remotionRoot,
+                logLine: update.logLine,
+                description: {
+                    undoMessage: `↩️  Deletion of ${deletedNodeDescription}`,
+                    redoMessage: `↪️  Deletion of ${deletedNodeDescription}`,
+                },
+                entryType: 'delete-jsx-node',
+                suppressHmrOnFileRestore: false,
+            });
+            (0, undo_stack_1.suppressUndoStackInvalidation)(update.absolutePath);
+            (0, file_watcher_1.writeFileAndNotifyFileWatchers)(update.absolutePath, update.output, undefined);
+            const locationLabel = (0, format_log_file_location_1.formatLogFileLocation)({
+                remotionRoot,
+                absolutePath: update.absolutePath,
+                line: update.logLine,
+            });
+            renderer_1.RenderInternals.Log.info({ indent: false, 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 ${fileRelativeToRoot}${formatted ? ' (formatted)' : ''}`);
         (0, undo_stack_1.printUndoHint)(logLevel);
         return {
             success: true,

package/dist/preview-server/routes/delete-keyframes.d.ts

@@ -0,0 +1,13 @@
+import type { DeleteEffectKeyframe, DeleteKeyframesRequest, DeleteKeyframesResponse, DeleteSequenceKeyframe, SaveSequencePropsResult } from '@remotion/studio-shared';
+import type { ApiHandler } from '../api-types';
+export declare const deleteKeyframes: ({ sequenceKeyframes, effectKeyframes, clientId, remotionRoot, logLevel, }: {
+    sequenceKeyframes: DeleteSequenceKeyframe[];
+    effectKeyframes: DeleteEffectKeyframe[];
+    clientId: string;
+    remotionRoot: string;
+    logLevel: "error" | "info" | "trace" | "verbose" | "warn";
+}) => Promise<{
+    sequenceResults: SaveSequencePropsResult[];
+    effectResults: import("remotion").CanUpdateEffectPropsResponse[];
+}>;
+export declare const deleteKeyframesHandler: ApiHandler<DeleteKeyframesRequest, DeleteKeyframesResponse>;

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

@@ -0,0 +1,263 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deleteKeyframesHandler = exports.deleteKeyframes = 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 log_update_1 = require("./log-updates/log-update");
+const save_props_mutex_1 = require("./save-props-mutex");
+const groupBy = (items, getKey) => {
+    var _a;
+    const groups = new Map();
+    for (const item of items) {
+        const key = getKey(item);
+        const group = (_a = groups.get(key)) !== null && _a !== void 0 ? _a : [];
+        group.push(item);
+        groups.set(key, group);
+    }
+    return [...groups.values()];
+};
+const getBatchDescription = ({ totalKeyframes, firstKeyframe, }) => {
+    if (totalKeyframes === 1) {
+        return {
+            undoMessage: `↩️  ${firstKeyframe.key} keyframe restored at frame ${firstKeyframe.frame}`,
+            redoMessage: `↪️  ${firstKeyframe.key} keyframe deleted at frame ${firstKeyframe.frame}`,
+        };
+    }
+    return {
+        undoMessage: `↩️  ${totalKeyframes} keyframes restored`,
+        redoMessage: `↪️  ${totalKeyframes} keyframes deleted`,
+    };
+};
+const deleteKeyframes = async ({ sequenceKeyframes, effectKeyframes, clientId, remotionRoot, logLevel, }) => {
+    var _a, _b;
+    const totalKeyframes = sequenceKeyframes.length + effectKeyframes.length;
+    if (totalKeyframes === 0) {
+        throw new Error('No keyframes were specified for deletion');
+    }
+    const fileGroups = new Map();
+    const resolvedSequenceKeyframes = [];
+    const resolvedEffectKeyframes = [];
+    for (const [index, keyframe] of sequenceKeyframes.entries()) {
+        const { absolutePath, fileRelativeToRoot } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
+            remotionRoot,
+            fileName: keyframe.fileName,
+            action: 'modify',
+        });
+        const group = (_a = fileGroups.get(absolutePath)) !== null && _a !== void 0 ? _a : {
+            fileRelativeToRoot,
+            sequenceKeyframes: [],
+            effectKeyframes: [],
+        };
+        const resolved = { ...keyframe, index, absolutePath, fileRelativeToRoot };
+        group.sequenceKeyframes.push(resolved);
+        resolvedSequenceKeyframes.push(resolved);
+        fileGroups.set(absolutePath, group);
+    }
+    for (const [index, keyframe] of effectKeyframes.entries()) {
+        const { absolutePath, fileRelativeToRoot } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
+            remotionRoot,
+            fileName: keyframe.fileName,
+            action: 'modify',
+        });
+        const group = (_b = fileGroups.get(absolutePath)) !== null && _b !== void 0 ? _b : {
+            fileRelativeToRoot,
+            sequenceKeyframes: [],
+            effectKeyframes: [],
+        };
+        const resolved = { ...keyframe, index, absolutePath, fileRelativeToRoot };
+        group.effectKeyframes.push(resolved);
+        resolvedEffectKeyframes.push(resolved);
+        fileGroups.set(absolutePath, group);
+    }
+    const snapshots = [];
+    const outputByPath = new Map();
+    const sequenceLogs = [];
+    const effectLogs = [];
+    for (const [absolutePath, group] of fileGroups) {
+        const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
+        let output = fileContents;
+        let firstLogLine = Number.POSITIVE_INFINITY;
+        for (const keyframeGroup of groupBy(group.sequenceKeyframes, (keyframe) => JSON.stringify(keyframe.nodePath.nodePath))) {
+            const [firstSequenceKeyframe] = keyframeGroup;
+            if (!firstSequenceKeyframe) {
+                continue;
+            }
+            const result = await (0, update_keyframes_1.updateSequenceKeyframes)({
+                input: output,
+                nodePath: firstSequenceKeyframe.nodePath.nodePath,
+                updates: keyframeGroup.map((keyframe) => ({
+                    key: keyframe.key,
+                    operation: {
+                        type: 'remove',
+                        frame: keyframe.frame,
+                    },
+                })),
+            });
+            output = result.output;
+            firstLogLine = Math.min(firstLogLine, result.logLine);
+            for (const [keyframeIndex, keyframe] of keyframeGroup.entries()) {
+                sequenceLogs.push({
+                    fileRelativeToRoot: keyframe.fileRelativeToRoot,
+                    line: result.logLine,
+                    key: keyframe.key,
+                    oldValueString: result.oldValueStrings[keyframeIndex],
+                    newValueString: result.newValueStrings[keyframeIndex],
+                    formatted: result.formatted,
+                });
+            }
+        }
+        for (const keyframeGroup of groupBy(group.effectKeyframes, (keyframe) => `${JSON.stringify(keyframe.sequenceNodePath.nodePath)}:${keyframe.effectIndex}`)) {
+            const [firstEffectKeyframe] = keyframeGroup;
+            if (!firstEffectKeyframe) {
+                continue;
+            }
+            const result = await (0, update_keyframes_1.updateEffectKeyframes)({
+                input: output,
+                sequenceNodePath: firstEffectKeyframe.sequenceNodePath.nodePath,
+                effectIndex: firstEffectKeyframe.effectIndex,
+                updates: keyframeGroup.map((keyframe) => ({
+                    key: keyframe.key,
+                    operation: {
+                        type: 'remove',
+                        frame: keyframe.frame,
+                    },
+                })),
+            });
+            output = result.output;
+            firstLogLine = Math.min(firstLogLine, result.logLine);
+            for (const [keyframeIndex, keyframe] of keyframeGroup.entries()) {
+                effectLogs.push({
+                    fileRelativeToRoot: keyframe.fileRelativeToRoot,
+                    line: result.logLine,
+                    effectName: result.effectCallee,
+                    propKey: keyframe.key,
+                    oldValueString: result.oldValueStrings[keyframeIndex],
+                    newValueString: result.newValueStrings[keyframeIndex],
+                    formatted: result.formatted,
+                });
+            }
+        }
+        snapshots.push({
+            filePath: absolutePath,
+            oldContents: fileContents,
+            newContents: output,
+            logLine: Number.isFinite(firstLogLine) ? firstLogLine : 1,
+        });
+        outputByPath.set(absolutePath, output);
+    }
+    const [firstKeyframe] = sequenceKeyframes.length > 0 ? sequenceKeyframes : effectKeyframes;
+    if (!firstKeyframe) {
+        throw new Error('No keyframes were specified for deletion');
+    }
+    (0, undo_stack_1.pushTransactionToUndoStack)({
+        snapshots,
+        logLevel,
+        remotionRoot,
+        description: getBatchDescription({ totalKeyframes, firstKeyframe }),
+        entryType: sequenceKeyframes.length > 0 && effectKeyframes.length > 0
+            ? 'keyframe-delete'
+            : sequenceKeyframes.length > 0
+                ? 'sequence-props'
+                : 'effect-props',
+        suppressHmrOnFileRestore: true,
+    });
+    for (const snapshot of snapshots) {
+        (0, undo_stack_1.suppressUndoStackInvalidation)(snapshot.filePath);
+        (0, watch_ignore_next_change_1.suppressBundlerUpdateForFile)(snapshot.filePath);
+        (0, file_watcher_1.writeFileAndNotifyFileWatchers)(snapshot.filePath, snapshot.newContents, clientId);
+    }
+    for (const log of sequenceLogs) {
+        (0, log_update_1.logUpdate)({
+            fileRelativeToRoot: log.fileRelativeToRoot,
+            line: log.line,
+            key: log.key,
+            oldValueString: log.oldValueString,
+            newValueString: log.newValueString,
+            defaultValueString: null,
+            formatted: log.formatted,
+            logLevel,
+            removedProps: [],
+            addedProps: [],
+        });
+    }
+    for (const log of effectLogs) {
+        (0, log_effect_update_1.logEffectUpdate)({
+            fileRelativeToRoot: log.fileRelativeToRoot,
+            line: log.line,
+            effectName: log.effectName,
+            propKey: log.propKey,
+            oldValueString: log.oldValueString,
+            newValueString: log.newValueString,
+            defaultValueString: null,
+            formatted: log.formatted,
+            logLevel,
+            removedProps: [],
+            addedProps: [],
+        });
+    }
+    (0, undo_stack_1.printUndoHint)(logLevel);
+    const sequenceResults = resolvedSequenceKeyframes.map((keyframe) => {
+        const output = outputByPath.get(keyframe.absolutePath);
+        if (!output) {
+            throw new Error('Could not compute sequence keyframe deletion status');
+        }
+        const status = (0, can_update_sequence_props_1.computeSequencePropsStatusFromContent)({
+            fileContents: output,
+            keys: (0, studio_shared_1.getAllSchemaKeys)(keyframe.schema),
+            nodePath: keyframe.nodePath.nodePath,
+            effects: [],
+        });
+        return {
+            fileName: keyframe.fileName,
+            nodePath: keyframe.nodePath,
+            props: status.props,
+        };
+    });
+    const astByPath = new Map();
+    const effectResults = resolvedEffectKeyframes.map((keyframe) => {
+        var _a;
+        const output = outputByPath.get(keyframe.absolutePath);
+        if (!output) {
+            throw new Error('Could not compute effect keyframe deletion status');
+        }
+        const ast = (_a = astByPath.get(keyframe.absolutePath)) !== null && _a !== void 0 ? _a : (0, parse_ast_1.parseAst)(output);
+        astByPath.set(keyframe.absolutePath, ast);
+        const jsx = (0, can_update_sequence_props_1.findJsxElementAtNodePath)(ast, keyframe.sequenceNodePath.nodePath);
+        if (!jsx) {
+            return {
+                canUpdate: false,
+                effectIndex: keyframe.effectIndex,
+                reason: 'not-found',
+            };
+        }
+        return (0, can_update_effect_props_1.computeEffectPropStatus)({
+            jsx,
+            effectIndex: keyframe.effectIndex,
+            keys: (0, studio_shared_1.getAllSchemaKeys)(keyframe.schema),
+        });
+    });
+    return { sequenceResults, effectResults };
+};
+exports.deleteKeyframes = deleteKeyframes;
+const deleteKeyframesHandler = ({ input: { sequenceKeyframes, effectKeyframes, clientId }, remotionRoot, logLevel, }) => (0, save_props_mutex_1.withSavePropsLock)(async () => {
+    renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[delete-keyframes] Received request to delete ${sequenceKeyframes.length + effectKeyframes.length} keyframe(s)`);
+    await (0, exports.deleteKeyframes)({
+        sequenceKeyframes,
+        effectKeyframes,
+        clientId,
+        remotionRoot,
+        logLevel,
+    });
+    return { success: true };
+});
+exports.deleteKeyframesHandler = deleteKeyframesHandler;

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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1,82 @@
+"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/duplicate-jsx-node.js

@@ -25,6 +25,7 @@ const duplicateJsxNodeHandler = async ({ input: { fileName, nodePath }, remotion
         (0, undo_stack_1.pushToUndoStack)({
             filePath: absolutePath,
             oldContents: fileContents,
+            newContents: null,
             logLevel,
             remotionRoot,
             logLine,

package/dist/preview-server/routes/insert-jsx-element.d.ts

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

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

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.insertJsxElementHandler = void 0;
+const renderer_1 = require("@remotion/renderer");
+const file_watcher_1 = require("../../file-watcher");
+const resolve_composition_component_1 = require("../../helpers/resolve-composition-component");
+const format_log_file_location_1 = require("../format-log-file-location");
+const undo_stack_1 = require("../undo-stack");
+const log_update_1 = require("./log-updates/log-update");
+const save_props_mutex_1 = require("./save-props-mutex");
+const validateDimension = (name, value) => {
+    if (!Number.isFinite(value) || value < 1) {
+        throw new Error(`${name} must be a positive number`);
+    }
+};
+const validateElement = (element) => {
+    if (element.type === 'solid') {
+        validateDimension('width', element.width);
+        validateDimension('height', element.height);
+    }
+};
+const getElementLabel = (element) => {
+    if (element.type === 'solid') {
+        return '<Solid>';
+    }
+    throw new Error('Unsupported element type');
+};
+const insertJsxElementHandler = ({ input: { compositionFile, compositionId, element }, remotionRoot, logLevel, }) => (0, save_props_mutex_1.withSavePropsLock)(async () => {
+    try {
+        validateElement(element);
+        const elementLabel = getElementLabel(element);
+        renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[insert-jsx-element] Received request for compositionFile="${compositionFile}" compositionId="${compositionId}" element="${element.type}"`);
+        const { fileName, source, oldContents, output, formatted, logLine } = await (0, resolve_composition_component_1.insertJsxElementIntoComposition)({
+            remotionRoot,
+            compositionFile,
+            compositionId,
+            element,
+            prettierConfigOverride: null,
+        });
+        (0, undo_stack_1.pushToUndoStack)({
+            filePath: fileName,
+            oldContents,
+            newContents: output,
+            logLevel,
+            remotionRoot,
+            logLine,
+            description: {
+                undoMessage: `↩️  Added ${elementLabel}`,
+                redoMessage: `↪️  Added ${elementLabel}`,
+            },
+            entryType: 'insert-jsx-element',
+            suppressHmrOnFileRestore: false,
+        });
+        (0, undo_stack_1.suppressUndoStackInvalidation)(fileName);
+        (0, file_watcher_1.writeFileAndNotifyFileWatchers)(fileName, output, undefined);
+        const locationLabel = (0, format_log_file_location_1.formatLogFileLocation)({
+            remotionRoot,
+            absolutePath: fileName,
+            line: logLine,
+        });
+        renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} Added ${elementLabel}`);
+        if (!formatted) {
+            (0, log_update_1.warnAboutPrettierOnce)(logLevel);
+        }
+        renderer_1.RenderInternals.Log.verbose({ indent: false, logLevel }, `[insert-jsx-element] Wrote ${source}${formatted ? ' (formatted)' : ''}`);
+        (0, undo_stack_1.printUndoHint)(logLevel);
+        return {
+            success: true,
+        };
+    }
+    catch (err) {
+        return {
+            success: false,
+            reason: err.message,
+            stack: err.stack,
+        };
+    }
+});
+exports.insertJsxElementHandler = insertJsxElementHandler;

package/dist/preview-server/routes/open-in-editor.d.ts

@@ -0,0 +1,4 @@
+import type { OpenInEditorRequest, OpenInEditorResponse } from '@remotion/studio-shared';
+import type { ApiHandler } from '../api-types';
+export declare const getEditorName: () => Promise<string | null>;
+export declare const openInEditorHandler: ApiHandler<OpenInEditorRequest, OpenInEditorResponse>;

package/dist/preview-server/routes/open-in-editor.js

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.openInEditorHandler = exports.getEditorName = void 0;
+const node_path_1 = __importDefault(require("node:path"));
+const open_in_editor_1 = require("../../helpers/open-in-editor");
+const editorGuess = (0, open_in_editor_1.guessEditor)();
+const getEditorName = async () => {
+    const [edit] = await editorGuess;
+    return (0, open_in_editor_1.getDisplayNameForEditor)(edit ? edit.command : null);
+};
+exports.getEditorName = getEditorName;
+const openInEditorHandler = async ({ input, remotionRoot, logLevel }) => {
+    try {
+        if (!('stack' in input)) {
+            throw new TypeError('Need to pass stack');
+        }
+        const { stack } = input;
+        const guess = await editorGuess;
+        const didOpen = await (0, open_in_editor_1.launchEditor)({
+            colNumber: stack.originalColumnNumber,
+            editor: guess[0],
+            fileName: node_path_1.default.resolve(remotionRoot, stack.originalFileName),
+            lineNumber: stack.originalLineNumber,
+            vsCodeNewWindow: false,
+            logLevel,
+        });
+        return {
+            success: didOpen,
+        };
+    }
+    catch (_a) {
+        return {
+            success: false,
+        };
+    }
+};
+exports.openInEditorHandler = openInEditorHandler;

package/dist/preview-server/routes/register-client-render.d.ts

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

package/dist/preview-server/routes/register-client-render.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.registerClientRenderHandler = void 0;
+const client_render_queue_1 = require("../../client-render-queue");
+const validate_same_origin_1 = require("../validate-same-origin");
+const registerClientRenderHandler = ({ input, remotionRoot, request }) => {
+    (0, validate_same_origin_1.validateSameOrigin)(request);
+    (0, client_render_queue_1.addCompletedClientRender)({ render: input, remotionRoot });
+    return Promise.resolve();
+};
+exports.registerClientRenderHandler = registerClientRenderHandler;

package/dist/preview-server/routes/reorder-effect.d.ts

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