@remotion/studio-server 4.0.529 → 4.0.530

package/dist/codemods/add-composition-to-file.d.ts

@@ -0,0 +1,7 @@
+import { type CodemodResult } from '@remotion/codemods';
+import type { NewCompositionOptions } from '@remotion/studio-shared';
+export declare const addCompositionToFile: ({ filePath, options, remotionRoot, }: {
+    filePath: string;
+    options: NewCompositionOptions;
+    remotionRoot: string;
+}) => Promise<CodemodResult>;

package/dist/codemods/add-composition-to-file.js

@@ -0,0 +1,63 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addCompositionToFile = void 0;
+const node_fs_1 = require("node:fs");
+const promises_1 = require("node:fs/promises");
+const node_path_1 = __importDefault(require("node:path"));
+const codemods_1 = require("@remotion/codemods");
+const studio_shared_1 = require("@remotion/studio-shared");
+const can_update_default_props_1 = require("../preview-server/routes/can-update-default-props");
+const addCompositionToFile = async ({ filePath, options, remotionRoot, }) => {
+    (0, can_update_default_props_1.checkIfTypeScriptFile)(filePath);
+    const input = await (0, promises_1.readFile)(filePath, 'utf-8');
+    const componentFilePath = node_path_1.default.join(node_path_1.default.dirname(filePath), `${options.componentName}.tsx`);
+    if ((0, node_fs_1.existsSync)(componentFilePath)) {
+        throw new Error(`Cannot create ${node_path_1.default.relative(remotionRoot, componentFilePath)} because it already exists`);
+    }
+    const composition = {
+        project: { files: { [filePath]: input }, rootDir: node_path_1.default.dirname(filePath) },
+        compositionFile: filePath,
+        compositionId: options.newId,
+        component: {
+            filePath: componentFilePath,
+            importName: options.componentName,
+            importPath: options.componentImportPath,
+        },
+        metadata: {
+            width: options.newWidth,
+            height: options.newHeight,
+            fps: options.newFps,
+            durationInFrames: options.newDurationInFrames,
+        },
+        folder: options.folderName === null
+            ? undefined
+            : { name: options.folderName, parentName: options.parentName },
+    };
+    if (options.canvasCapture !== null) {
+        return (0, codemods_1.addCanvasCaptureComposition)({
+            ...composition,
+            capture: options.canvasCapture,
+        });
+    }
+    const result = (0, codemods_1.addComposition)(composition);
+    return {
+        ...result,
+        changes: [
+            ...result.changes,
+            {
+                filePath: componentFilePath,
+                previousContents: null,
+                nextContents: options.asset === null
+                    ? (0, studio_shared_1.emptyCompositionComponent)(options.componentName)
+                    : (0, studio_shared_1.assetCompositionComponent)({
+                        asset: options.asset,
+                        componentName: options.componentName,
+                    }),
+            },
+        ],
+    };
+};
+exports.addCompositionToFile = addCompositionToFile;

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

@@ -78,7 +78,12 @@ const applyCodemodToFile = async ({ filePath, codeMod, }) => {
                 {
                     filePath: componentFilePath,
                     previousContents: null,
-                    nextContents: (0, studio_shared_1.emptyCompositionComponent)(codeMod.componentName),
+                    nextContents: codeMod.asset === null
+                        ? (0, studio_shared_1.emptyCompositionComponent)(codeMod.componentName)
+                        : (0, studio_shared_1.assetCompositionComponent)({
+                            asset: codeMod.asset,
+                            componentName: codeMod.componentName,
+                        }),
                 },
             ],
         };

package/dist/codemods/update-keyframes/update-keyframes.d.ts

@@ -12,13 +12,13 @@ export declare const updateSequenceKeyframes: ({ input, nodePath, videoConfigVal
     nodePath: SequenceNodePath;
 }) => Promise<{
     changes: import("@remotion/codemods").CodemodFileChange[];
-    nodePathRemappings: import("@remotion/codemods").JsxNodePathRemapping[];
+    nodePathRemappings: import("@remotion/codemods").NodePathRemapping[];
     formatted: boolean;
     oldValueStrings: string[];
     newValueStrings: string[];
     logLine: number;
     updatedNodePath: SequenceNodePath;
-    updatedNode: import("@remotion/codemods").JsxNodeReference;
+    updatedNode: import("@remotion/codemods").NodeReference;
     output: string;
 }>;
 export declare const updateEffectKeyframes: ({ input, sequenceNodePath, effectIndex, videoConfigValues, ...options }: KeyframeInput & {
@@ -26,7 +26,7 @@ export declare const updateEffectKeyframes: ({ input, sequenceNodePath, effectIn
     effectIndex: number;
 }) => Promise<{
     changes: import("@remotion/codemods").CodemodFileChange[];
-    nodePathRemappings: import("@remotion/codemods").JsxNodePathRemapping[];
+    nodePathRemappings: import("@remotion/codemods").NodePathRemapping[];
     formatted: boolean;
     oldValueStrings: string[];
     newValueStrings: string[];

package/dist/codemods/update-keyframes/update-keyframes.js

@@ -5,7 +5,7 @@ const codemods_1 = require("@remotion/codemods");
 const updateSequenceKeyframes = async ({ input, nodePath, videoConfigValues, ...options }) => {
     var _a;
     var _b;
-    const result = await (0, codemods_1.updateJsxNodeKeyframes)({
+    const result = await (0, codemods_1.updateNodeKeyframes)({
         project: { files: { 'source.tsx': input }, rootDir: '/' },
         node: { filePath: 'source.tsx', nodePath },
         videoConfig: videoConfigValues !== null && videoConfigValues !== void 0 ? videoConfigValues : undefined,

package/dist/codemods/update-sequence-props/update-sequence-props.js

@@ -6,7 +6,7 @@ const updateMultipleSequenceProps = ({ input, changes, prettierConfigOverride, }
     return Promise.resolve().then(() => {
         var _a;
         var _b;
-        const result = (0, codemods_1.updateMultipleJsxNodeProps)({
+        const result = (0, codemods_1.updateMultipleNodeProps)({
             project: { files: { 'source.tsx': input }, rootDir: '/' },
             changes: changes.map(({ nodePath, updates, schema, videoConfigValues }) => ({
                 node: { filePath: 'source.tsx', nodePath },

package/dist/helpers/get-local-package-override.d.ts

@@ -0,0 +1,5 @@
+export declare const localPackageRootKey = "_remotionInternalPackageRoot";
+export declare const getLocalPackageOverride: ({ remotionRoot, packageName, }: {
+    remotionRoot: string;
+    packageName: string;
+}) => string | null;

package/dist/helpers/get-local-package-override.js

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getLocalPackageOverride = exports.localPackageRootKey = void 0;
+const node_fs_1 = __importDefault(require("node:fs"));
+const node_path_1 = __importDefault(require("node:path"));
+const node_url_1 = require("node:url");
+exports.localPackageRootKey = '_remotionInternalPackageRoot';
+const getLocalPackageOverride = ({ remotionRoot, packageName, }) => {
+    const packageJsonPath = node_path_1.default.join(remotionRoot, 'package.json');
+    if (!node_fs_1.default.existsSync(packageJsonPath)) {
+        return null;
+    }
+    const packageJson = JSON.parse(node_fs_1.default.readFileSync(packageJsonPath, 'utf-8'));
+    const localPackageRoot = packageJson[exports.localPackageRootKey];
+    if (typeof localPackageRoot !== 'string') {
+        return null;
+    }
+    const packagesRoot = node_path_1.default.join(localPackageRoot, 'packages');
+    if (!node_fs_1.default.existsSync(packagesRoot)) {
+        return null;
+    }
+    for (const directory of node_fs_1.default.readdirSync(packagesRoot)) {
+        const packageDirectory = node_path_1.default.join(packagesRoot, directory);
+        const candidatePackageJsonPath = node_path_1.default.join(packageDirectory, 'package.json');
+        if (!node_fs_1.default.existsSync(candidatePackageJsonPath)) {
+            continue;
+        }
+        const candidatePackageJson = JSON.parse(node_fs_1.default.readFileSync(candidatePackageJsonPath, 'utf-8'));
+        if (candidatePackageJson.name === packageName &&
+            !candidatePackageJson.private) {
+            return (0, node_url_1.pathToFileURL)(packageDirectory).href;
+        }
+    }
+    return null;
+};
+exports.getLocalPackageOverride = getLocalPackageOverride;

package/dist/helpers/resolve-composition-component.d.ts

@@ -12,12 +12,13 @@ export declare const resolveCompositionComponent: ({ remotionRoot, compositionFi
     compositionFile: string;
     compositionId: string;
 }) => Promise<ResolvedCompositionComponent>;
-export declare const insertJsxElementIntoComposition: ({ remotionRoot, compositionFile, compositionId, element, from, prettierConfigOverride, wrapInSequence, sourceFileOverrides, }: {
+export declare const insertJsxElementIntoComposition: ({ remotionRoot, compositionFile, compositionId, element, from, premountFor, prettierConfigOverride, wrapInSequence, sourceFileOverrides, }: {
     remotionRoot: string;
     compositionFile: string;
     compositionId: string;
     element: InsertableCompositionElement;
     from: number | null;
+    premountFor: number | null;
     prettierConfigOverride: Record<string, unknown> | null;
     wrapInSequence?: {
         dimensions: {

package/dist/helpers/resolve-composition-component.js

@@ -8,7 +8,7 @@ const node_fs_1 = __importDefault(require("node:fs"));
 const node_path_1 = __importDefault(require("node:path"));
 const codemods_1 = require("@remotion/codemods");
 const svg_to_jsx_1 = require("./svg-to-jsx");
-const { insertJsxElementIntoComposition: insertJsxElementIntoCompositionCodemod, resolveCompositionComponent: resolveCompositionComponentCodemod, resolveCompositionComponentWithFile: resolveCompositionComponentWithFileCodemod, } = codemods_1.CodemodsInternals;
+const { createElementFromInsertable, insertJsxElementIntoComposition: insertJsxElementIntoCompositionCodemod, resolveCompositionComponent: resolveCompositionComponentCodemod, resolveCompositionComponentWithFile: resolveCompositionComponentWithFileCodemod, } = codemods_1.CodemodsInternals;
 const makeCodemodEnvironment = (remotionRoot, sourceFileOverrides) => ({
     dirname: node_path_1.default.dirname,
     extname: node_path_1.default.extname,
@@ -40,24 +40,75 @@ const resolveCompositionComponent = ({ remotionRoot, compositionFile, compositio
     environment: makeCodemodEnvironment(remotionRoot, null),
 });
 exports.resolveCompositionComponent = resolveCompositionComponent;
-const insertJsxElementIntoComposition = ({ remotionRoot, compositionFile, compositionId, element, from, prettierConfigOverride, wrapInSequence = null, sourceFileOverrides, }) => {
+const insertJsxElementIntoComposition = async ({ remotionRoot, compositionFile, compositionId, element, from, premountFor, prettierConfigOverride, wrapInSequence = null, sourceFileOverrides, }) => {
     var _a;
-    return insertJsxElementIntoCompositionCodemod({
-        compositionFile,
-        compositionId,
+    var _b, _c;
+    const environment = makeCodemodEnvironment(remotionRoot, sourceFileOverrides);
+    const sequence = wrapInSequence === null
+        ? null
+        : {
+            dimensions: wrapInSequence.dimensions,
+            durationInFrames: (_b = wrapInSequence.durationInFrames) !== null && _b !== void 0 ? _b : null,
+            from: wrapInSequence.from,
+            name: wrapInSequence.name,
+            position: wrapInSequence.position,
+        };
+    // SVG markup and compositions need the file-system aware pipeline.
+    if (element.type === 'svg' || element.type === 'composition') {
+        return insertJsxElementIntoCompositionCodemod({
+            compositionFile,
+            compositionId,
+            element,
+            environment,
+            from,
+            premountFor,
+            prettierConfigOverride,
+            wrapInSequence: sequence,
+        });
+    }
+    const codemodElement = createElementFromInsertable({
         element,
-        environment: makeCodemodEnvironment(remotionRoot, sourceFileOverrides),
         from,
+        premountFor,
+        wrapInSequence: sequence,
+    });
+    const location = await resolveCompositionComponentWithFileCodemod({
+        compositionFile,
+        compositionId,
+        environment,
+    });
+    if (!location.canAddSequence) {
+        throw new Error('Cannot insert JSX element into this composition component');
+    }
+    const oldContents = await environment.readFile(location.fileName);
+    const project = {
+        rootDir: remotionRoot,
+        files: { [location.fileName]: oldContents },
+    };
+    const result = (0, codemods_1.addElement)({
+        project,
+        element: codemodElement,
+        target: {
+            type: 'component',
+            filePath: location.fileName,
+            exportName: location.exportName,
+        },
         prettierConfigOverride,
-        wrapInSequence: wrapInSequence === null
-            ? null
-            : {
-                dimensions: wrapInSequence.dimensions,
-                durationInFrames: (_a = wrapInSequence.durationInFrames) !== null && _a !== void 0 ? _a : null,
-                from: wrapInSequence.from,
-                name: wrapInSequence.name,
-                position: wrapInSequence.position,
-            },
     });
+    const nextProject = (0, codemods_1.applyCodemodChanges)(project, result.changes);
+    const insertedNode = (0, codemods_1.getNodes)({
+        project: nextProject,
+        filePath: location.fileName,
+    }).find((node) => JSON.stringify(node.nodePath) ===
+        JSON.stringify(result.insertedNode.nodePath));
+    return {
+        fileName: location.fileName,
+        source: location.source,
+        oldContents,
+        output: nextProject.files[location.fileName],
+        logLine: (_c = (_a = insertedNode === null || insertedNode === void 0 ? void 0 : insertedNode.location) === null || _a === void 0 ? void 0 : _a.line) !== null && _c !== void 0 ? _c : 1,
+        nodePathRemappings: result.nodePathRemappings.map(({ oldNodePath, newNodePath }) => ({ oldNodePath, newNodePath })),
+        insertedNodePath: result.insertedNode.nodePath,
+    };
 };
 exports.insertJsxElementIntoComposition = insertJsxElementIntoComposition;

package/dist/index.d.ts

@@ -106,6 +106,11 @@ export declare const StudioServerInternals: {
         version: string;
         additionalArgs: string[];
     }) => string[];
+    getLocalPackageOverride: ({ remotionRoot, packageName, }: {
+        remotionRoot: string;
+        packageName: string;
+    }) => string | null;
+    localPackageRootKey: string;
     getPackageManagerSpawnOptions: () => Pick<import("child_process").SpawnOptionsWithoutStdio, "shell">;
     addCompletedClientRender: ({ render, remotionRoot, }: {
         render: import("@remotion/studio-shared").CompletedClientRender;

package/dist/index.js

@@ -12,6 +12,7 @@ Object.defineProperty(exports, "parseRemotionSkillVersion", { enumerable: true,
 const file_watcher_1 = require("./file-watcher");
 const get_latest_remotion_version_1 = require("./get-latest-remotion-version");
 const get_installed_dependencies_1 = require("./helpers/get-installed-dependencies");
+const get_local_package_override_1 = require("./helpers/get-local-package-override");
 const install_command_1 = require("./helpers/install-command");
 const package_manager_spawn_options_1 = require("./helpers/package-manager-spawn-options");
 const max_timeline_tracks_1 = require("./max-timeline-tracks");
@@ -42,6 +43,8 @@ exports.StudioServerInternals = {
     getInstalledDependencies: get_installed_dependencies_1.getInstalledDependencies,
     getInstalledDependenciesWithVersions: get_installed_dependencies_1.getInstalledDependenciesWithVersions,
     getInstallCommand: install_command_1.getInstallCommand,
+    getLocalPackageOverride: get_local_package_override_1.getLocalPackageOverride,
+    localPackageRootKey: get_local_package_override_1.localPackageRootKey,
     getPackageManagerSpawnOptions: package_manager_spawn_options_1.getPackageManagerSpawnOptions,
     addCompletedClientRender: client_render_queue_1.addCompletedClientRender,
     getCompletedClientRenders: client_render_queue_1.getCompletedClientRenders,

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

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.allApiRoutes = void 0;
+const add_composition_1 = require("./routes/add-composition");
 const add_effect_1 = require("./routes/add-effect");
 const add_effect_keyframe_1 = require("./routes/add-effect-keyframe");
+const add_folder_1 = require("./routes/add-folder");
 const add_keyframes_1 = require("./routes/add-keyframes");
 const add_render_1 = require("./routes/add-render");
 const add_sequence_keyframe_1 = require("./routes/add-sequence-keyframe");
-const apply_codemod_1 = require("./routes/apply-codemod");
 const apply_visual_control_change_1 = require("./routes/apply-visual-control-change");
 const batch_update_keyframe_settings_1 = require("./routes/batch-update-keyframe-settings");
 const cancel_render_1 = require("./routes/cancel-render");
@@ -15,26 +16,31 @@ const convert_figma_clipboard_to_svg_1 = require("./routes/convert-figma-clipboa
 const copy_render_output_to_asset_1 = require("./routes/copy-render-output-to-asset");
 const default_coding_agent_1 = require("./routes/default-coding-agent");
 const default_editor_1 = require("./routes/default-editor");
+const delete_composition_1 = require("./routes/delete-composition");
 const delete_effect_1 = require("./routes/delete-effect");
-const delete_jsx_nodes_1 = require("./routes/delete-jsx-nodes");
 const delete_keyframes_1 = require("./routes/delete-keyframes");
+const delete_nodes_1 = require("./routes/delete-nodes");
 const delete_static_file_1 = require("./routes/delete-static-file");
 const download_remote_asset_1 = require("./routes/download-remote-asset");
+const duplicate_composition_1 = require("./routes/duplicate-composition");
 const duplicate_effect_1 = require("./routes/duplicate-effect");
-const duplicate_jsx_node_1 = require("./routes/duplicate-jsx-node");
+const duplicate_nodes_1 = require("./routes/duplicate-nodes");
 const find_in_file_1 = require("./routes/find-in-file");
 const insert_basic_captions_1 = require("./routes/insert-basic-captions");
+const insert_composition_element_1 = require("./routes/insert-composition-element");
 const insert_element_1 = require("./routes/insert-element");
-const insert_jsx_element_1 = require("./routes/insert-jsx-element");
 const install_remotion_skill_1 = require("./routes/install-remotion-skill");
 const invalidate_bundle_1 = require("./routes/invalidate-bundle");
 const log_studio_error_1 = require("./routes/log-studio-error");
+const move_composition_1 = require("./routes/move-composition");
+const move_folder_1 = require("./routes/move-folder");
 const move_keyframes_1 = require("./routes/move-keyframes");
 const open_in_editor_1 = require("./routes/open-in-editor");
 const open_in_file_explorer_1 = require("./routes/open-in-file-explorer");
 const open_in_git_client_1 = require("./routes/open-in-git-client");
 const open_in_terminal_1 = require("./routes/open-in-terminal");
 const paste_effects_1 = require("./routes/paste-effects");
+const precompose_jsx_nodes_1 = require("./routes/precompose-jsx-nodes");
 const prepare_element_install_1 = require("./routes/prepare-element-install");
 const project_info_1 = require("./routes/project-info");
 const redo_1 = require("./routes/redo");
@@ -42,6 +48,8 @@ const register_client_render_1 = require("./routes/register-client-render");
 const release_notes_1 = require("./routes/release-notes");
 const remotion_skills_info_1 = require("./routes/remotion-skills-info");
 const remove_render_1 = require("./routes/remove-render");
+const rename_composition_1 = require("./routes/rename-composition");
+const rename_folder_1 = require("./routes/rename-folder");
 const rename_static_file_1 = require("./routes/rename-static-file");
 const reorder_effect_1 = require("./routes/reorder-effect");
 const reorder_sequence_1 = require("./routes/reorder-sequence");
@@ -51,7 +59,7 @@ const save_effect_props_1 = require("./routes/save-effect-props");
 const save_multiple_effect_props_1 = require("./routes/save-multiple-effect-props");
 const save_sequence_props_1 = require("./routes/save-sequence-props");
 const shutdown_studio_1 = require("./routes/shutdown-studio");
-const split_jsx_sequence_1 = require("./routes/split-jsx-sequence");
+const split_sequences_1 = require("./routes/split-sequences");
 const split_video_from_audio_1 = require("./routes/split-video-from-audio");
 const subscribe_to_default_props_1 = require("./routes/subscribe-to-default-props");
 const subscribe_to_file_existence_1 = require("./routes/subscribe-to-file-existence");
@@ -61,13 +69,15 @@ const unregister_client_render_1 = require("./routes/unregister-client-render");
 const unsubscribe_from_default_props_1 = require("./routes/unsubscribe-from-default-props");
 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 unwrap_folder_1 = require("./routes/unwrap-folder");
 const update_available_1 = require("./routes/update-available");
+const update_composition_metadata_1 = require("./routes/update-composition-metadata");
 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");
 const update_sequence_keyframe_settings_1 = require("./routes/update-sequence-keyframe-settings");
 const upgrade_remotion_1 = require("./routes/upgrade-remotion");
-const wrap_jsx_node_1 = require("./routes/wrap-jsx-node");
+const wrap_node_1 = require("./routes/wrap-node");
 exports.allApiRoutes = {
     '/api/invalidate-bundle': invalidate_bundle_1.invalidateBundleHandler,
     '/api/composition-component-info': composition_component_info_1.compositionComponentInfoHandler,
@@ -88,7 +98,16 @@ exports.allApiRoutes = {
     '/api/unregister-client-render': unregister_client_render_1.unregisterClientRenderHandler,
     '/api/update-default-props': update_default_props_1.updateDefaultPropsHandler,
     '/api/apply-visual-control-change': apply_visual_control_change_1.applyVisualControlHandler,
-    '/api/apply-codemod': apply_codemod_1.applyCodemodHandler,
+    '/api/add-composition': add_composition_1.addCompositionHandler,
+    '/api/duplicate-composition': duplicate_composition_1.duplicateCompositionHandler,
+    '/api/rename-composition': rename_composition_1.renameCompositionHandler,
+    '/api/update-composition-metadata': update_composition_metadata_1.updateCompositionMetadataHandler,
+    '/api/delete-composition': delete_composition_1.deleteCompositionHandler,
+    '/api/move-composition': move_composition_1.moveCompositionHandler,
+    '/api/add-folder': add_folder_1.addFolderHandler,
+    '/api/rename-folder': rename_folder_1.renameFolderHandler,
+    '/api/unwrap-folder': unwrap_folder_1.unwrapFolderHandler,
+    '/api/move-folder': move_folder_1.moveFolderHandler,
     '/api/subscribe-to-default-props': subscribe_to_default_props_1.subscribeToDefaultProps,
     '/api/unsubscribe-from-default-props': unsubscribe_from_default_props_1.unsubscribeFromDefaultProps,
     '/api/subscribe-to-sequence-props': subscribe_to_sequence_props_1.subscribeToSequenceProps,
@@ -110,10 +129,11 @@ exports.allApiRoutes = {
     '/api/batch-update-keyframe-settings': batch_update_keyframe_settings_1.batchUpdateKeyframeSettingsHandler,
     '/api/delete-effect': delete_effect_1.deleteEffectHandler,
     '/api/paste-effects': paste_effects_1.pasteEffectsHandler,
-    '/api/delete-jsx-nodes': delete_jsx_nodes_1.deleteJsxNodesHandler,
-    '/api/duplicate-jsx-node': duplicate_jsx_node_1.duplicateJsxNodeHandler,
-    '/api/wrap-jsx-node': wrap_jsx_node_1.wrapJsxNodeHandler,
-    '/api/split-jsx-sequence': split_jsx_sequence_1.splitJsxSequenceHandler,
+    '/api/delete-nodes': delete_nodes_1.deleteNodesHandler,
+    '/api/duplicate-nodes': duplicate_nodes_1.duplicateNodesHandler,
+    '/api/wrap-node': wrap_node_1.wrapNodeHandler,
+    '/api/precompose-jsx-nodes': precompose_jsx_nodes_1.precomposeJsxNodesHandler,
+    '/api/split-sequences': split_sequences_1.splitSequencesHandler,
     '/api/split-video-from-audio': split_video_from_audio_1.splitVideoFromAudioHandler,
     '/api/insert-basic-captions': insert_basic_captions_1.insertBasicCaptionsHandler,
     '/api/replace-video-source': replace_video_source_1.replaceVideoSourceHandler,
@@ -130,7 +150,7 @@ 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/insert-jsx-element': insert_jsx_element_1.insertJsxElementHandler,
+    '/api/insert-composition-element': insert_composition_element_1.insertCompositionElementHandler,
     '/api/insert-element': insert_element_1.insertElementHandler,
     '/api/prepare-element-install': prepare_element_install_1.prepareElementInstallHandler,
     '/api/update-element-install-target': update_element_install_target_1.updateElementInstallTargetHandler,

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

@@ -30,19 +30,27 @@ exports.getElementInstallTargetByClientId = getElementInstallTargetByClientId;
 const getElementInstallTarget = (requestId) => {
     const now = Date.now();
     let bestTarget = null;
+    let unfocusedTarget = null;
+    let multipleUnfocusedTargets = false;
     for (const [clientId, currentTarget] of targetsByClientId) {
         if (now - currentTarget.updatedAt >= exports.ELEMENT_INSTALL_TARGET_MAX_AGE) {
             targetsByClientId.delete(clientId);
             continue;
         }
-        if (requestId !== null && currentTarget.requestId !== requestId) {
+        if ((requestId !== null && currentTarget.requestId !== requestId) ||
+            currentTarget.readOnly) {
+            continue;
+        }
+        if (currentTarget.lastFocusedAt === null) {
+            multipleUnfocusedTargets || (multipleUnfocusedTargets = unfocusedTarget !== null);
+            unfocusedTarget = currentTarget;
             continue;
         }
         if (bestTarget === null || compareTargets(currentTarget, bestTarget) > 0) {
             bestTarget = currentTarget;
         }
     }
-    return bestTarget;
+    return bestTarget !== null && bestTarget !== void 0 ? bestTarget : (multipleUnfocusedTargets ? null : unfocusedTarget);
 };
 exports.getElementInstallTarget = getElementInstallTarget;
 const issueStudioProtocolTarget = ({ now, origin, purpose, target, }) => {

package/dist/preview-server/routes/add-composition.d.ts

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

package/dist/preview-server/routes/add-composition.js

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addCompositionHandler = void 0;
+const node_fs_1 = require("node:fs");
+const renderer_1 = require("@remotion/renderer");
+const add_composition_to_file_1 = require("../../codemods/add-composition-to-file");
+const file_watcher_1 = require("../../file-watcher");
+const resolve_file_inside_project_1 = require("../../helpers/resolve-file-inside-project");
+const format_log_file_location_1 = require("../format-log-file-location");
+const project_info_1 = require("../project-info");
+const undo_stack_1 = require("../undo-stack");
+const can_update_default_props_1 = require("./can-update-default-props");
+const source_file_write_queue_1 = require("./source-file-write-queue");
+const addCompositionHandler = ({ input: request, logLevel, remotionRoot, entryPoint }) => (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
+    var _a, _b;
+    var _c, _d;
+    try {
+        let filePath;
+        if ((_a = request.symbolicatedStack) === null || _a === void 0 ? void 0 : _a.originalFileName) {
+            filePath = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
+                remotionRoot,
+                fileName: request.symbolicatedStack.originalFileName,
+                action: 'add a composition to',
+            }).absolutePath;
+        }
+        else {
+            const { rootFile } = await (0, project_info_1.getProjectInfo)(remotionRoot, entryPoint);
+            if (rootFile === null) {
+                throw new Error('Cannot find the Remotion root file');
+            }
+            filePath = rootFile;
+        }
+        (0, can_update_default_props_1.checkIfTypeScriptFile)(filePath);
+        const result = await (0, add_composition_to_file_1.addCompositionToFile)({
+            filePath,
+            options: request.options,
+            remotionRoot,
+        });
+        for (const change of result.changes) {
+            const currentContents = (0, node_fs_1.existsSync)(change.filePath)
+                ? (0, node_fs_1.readFileSync)(change.filePath, 'utf-8')
+                : null;
+            if (currentContents !== change.previousContents) {
+                throw new Error(`Source changed before adding composition: ${change.filePath}`);
+            }
+        }
+        if (result.changes.length > 0) {
+            const logLine = (_c = (_b = request.symbolicatedStack) === null || _b === void 0 ? void 0 : _b.originalLineNumber) !== null && _c !== void 0 ? _c : 1;
+            (0, undo_stack_1.pushTransactionToUndoStack)({
+                snapshots: result.changes.map((change) => ({
+                    filePath: change.filePath,
+                    oldContents: change.previousContents,
+                    newContents: change.nextContents,
+                    logLine: change.filePath === filePath ? logLine : 1,
+                    nodePathRemappings: null,
+                })),
+                logLevel,
+                remotionRoot,
+                description: {
+                    undoMessage: `↩️  Creation of composition "${request.options.newId}"`,
+                    redoMessage: `↪️  Creation of composition "${request.options.newId}"`,
+                },
+                entryType: 'new-composition',
+                suppressHmrOnFileRestore: false,
+                undoRedoNavigation: request.undoRedoNavigation,
+            });
+            for (const change of result.changes) {
+                if (change.nextContents === null) {
+                    throw new Error('Adding a composition cannot remove source files');
+                }
+                (0, undo_stack_1.suppressUndoStackInvalidation)(change.filePath);
+                (0, file_watcher_1.writeFileAndNotifyFileWatchers)({
+                    file: change.filePath,
+                    content: change.nextContents,
+                    originatorClientId: undefined,
+                    metadata: null,
+                });
+            }
+            const locationLabel = (0, format_log_file_location_1.formatLogFileLocation)({
+                remotionRoot,
+                absolutePath: filePath,
+                line: logLine,
+            });
+            renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${(0, source_file_write_queue_1.getCodemodTimingPrefix)(logLevel)}${renderer_1.RenderInternals.chalk.blueBright(locationLabel)} Created composition "${request.options.newId}"`);
+            (0, undo_stack_1.printUndoHint)(logLevel);
+        }
+        return { success: true, nodePathMutation: null };
+    }
+    catch (error) {
+        return {
+            success: false,
+            reason: error instanceof Error ? error.message : String(error),
+            stack: error instanceof Error ? ((_d = error.stack) !== null && _d !== void 0 ? _d : '') : '',
+        };
+    }
+});
+exports.addCompositionHandler = addCompositionHandler;

package/dist/preview-server/routes/add-folder.d.ts

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