@remotion/studio-server 4.0.481 → 4.0.483

package/dist/codemods/duplicate-composition.js

@@ -80,6 +80,20 @@ const parseAndApplyCodemod = ({ input, codeMod, }) => {
             localName: codeMod.tag,
         });
     }
+    if (codeMod.type === 'new-composition') {
+        (0, imports_1.ensureNamedImport)({
+            ast: newAst,
+            importedName: 'Composition',
+            sourcePath: 'remotion',
+            localName: 'Composition',
+        });
+        (0, imports_1.ensureNamedImport)({
+            ast: newAst,
+            importedName: codeMod.componentName,
+            sourcePath: codeMod.componentImportPath,
+            localName: codeMod.componentName,
+        });
+    }
     const output = (0, parse_ast_1.serializeAst)(newAst);
     return { changesMade, newContents: output };
 };

package/dist/codemods/effect-param-expression.js

@@ -82,6 +82,16 @@ const makeEasingExpression = ({ easing, easingLocalName, }) => {
                     b.objectProperty(b.identifier('damping'), (0, update_nested_prop_1.parseValueExpression)(easing.damping)),
                     b.objectProperty(b.identifier('mass'), (0, update_nested_prop_1.parseValueExpression)(easing.mass)),
                     b.objectProperty(b.identifier('stiffness'), (0, update_nested_prop_1.parseValueExpression)(easing.stiffness)),
+                    ...(easing.allowTail === null
+                        ? []
+                        : [
+                            b.objectProperty(b.identifier('allowTail'), b.booleanLiteral(easing.allowTail)),
+                        ]),
+                    ...(easing.durationRestThreshold === null
+                        ? []
+                        : [
+                            b.objectProperty(b.identifier('durationRestThreshold'), (0, update_nested_prop_1.parseValueExpression)(easing.durationRestThreshold)),
+                        ]),
                     b.objectProperty(b.identifier('overshootClamping'), b.booleanLiteral(easing.overshootClamping)),
                 ]),
             ]);

package/dist/codemods/recast-mods.js

@@ -1,7 +1,42 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.applyCodemod = void 0;
+const recast = __importStar(require("recast"));
 const apply_visual_control_1 = require("./apply-visual-control");
+const b = recast.types.builders;
 const applyCodemod = ({ file, codeMod, }) => {
     const changesMade = [];
     if (codeMod.type === 'apply-visual-control') {
@@ -60,6 +95,14 @@ const mapReturnStatement = (statement, transformation, changesMade, parentFolder
     if (!statement.argument) {
         return statement;
     }
+    if (transformation.type === 'new-composition' &&
+        (statement.argument.type === 'JSXElement' ||
+            statement.argument.type === 'JSXFragment')) {
+        return {
+            ...statement,
+            argument: addNewCompositionToRootJsx(statement.argument, transformation, changesMade),
+        };
+    }
     const replacement = transformLoneJsxElement(statement.argument, transformation, changesMade, parentFolderName);
     if (replacement !== null) {
         return { ...statement, argument: replacement };
@@ -99,6 +142,55 @@ const isJsxExpression = (child) => {
 const isMeaningfulJsxChild = (child) => {
     return child.type !== 'JSXText' || child.value.trim() !== '';
 };
+const jsxId = (name) => ({ type: 'JSXIdentifier', name });
+const jsxAttributeWithString = (name, value) => ({
+    type: 'JSXAttribute',
+    name: jsxId(name),
+    value: { type: 'StringLiteral', value },
+});
+const jsxAttributeWithExpression = (name, expression) => ({
+    type: 'JSXAttribute',
+    name: jsxId(name),
+    value: {
+        type: 'JSXExpressionContainer',
+        expression,
+    },
+});
+const newCompositionElement = (transformation) => {
+    return {
+        type: 'JSXElement',
+        openingElement: {
+            type: 'JSXOpeningElement',
+            name: jsxId('Composition'),
+            attributes: [
+                jsxAttributeWithString('id', transformation.newId),
+                jsxAttributeWithExpression('component', b.identifier(transformation.componentName)),
+                jsxAttributeWithExpression('durationInFrames', b.numericLiteral(transformation.newDurationInFrames)),
+                jsxAttributeWithExpression('fps', b.numericLiteral(transformation.newFps)),
+                jsxAttributeWithExpression('width', b.numericLiteral(transformation.newWidth)),
+                jsxAttributeWithExpression('height', b.numericLiteral(transformation.newHeight)),
+            ],
+            selfClosing: true,
+        },
+        closingElement: null,
+        children: [],
+    };
+};
+const addNewCompositionToRootJsx = (root, transformation, changesMade) => {
+    if (changesMade.length > 0) {
+        return root;
+    }
+    changesMade.push({
+        description: 'Added new composition',
+    });
+    if (root.type === 'JSXFragment') {
+        return {
+            ...root,
+            children: [...root.children, newCompositionElement(transformation)],
+        };
+    }
+    return wrapInJsxFragment([root, newCompositionElement(transformation)]);
+};
 // When a <Composition> JSX element appears in a position where it cannot
 // simply be removed from a parent's children list (e.g. as the sole return
 // value of a wrapper component or as the concise body of an arrow function),
@@ -237,6 +329,14 @@ const mapRecognizedType = (expression, transformation, changesMade, parentFolder
     }
     if (expression.type === 'ArrowFunctionExpression' ||
         expression.type === 'FunctionExpression') {
+        if (transformation.type === 'new-composition' &&
+            (expression.body.type === 'JSXElement' ||
+                expression.body.type === 'JSXFragment')) {
+            return {
+                ...expression,
+                body: addNewCompositionToRootJsx(expression.body, transformation, changesMade),
+            };
+        }
         if (expression.type === 'ArrowFunctionExpression' &&
             expression.body.type === 'JSXElement') {
             const replacement = transformLoneJsxElement(expression.body, transformation, changesMade, parentFolderName);

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

@@ -340,6 +340,16 @@ const createEasingExpression = (easing) => {
                     b.objectProperty(b.identifier('damping'), (0, update_nested_prop_1.parseValueExpression)(easing.damping)),
                     b.objectProperty(b.identifier('mass'), (0, update_nested_prop_1.parseValueExpression)(easing.mass)),
                     b.objectProperty(b.identifier('stiffness'), (0, update_nested_prop_1.parseValueExpression)(easing.stiffness)),
+                    ...(easing.allowTail === null
+                        ? []
+                        : [
+                            b.objectProperty(b.identifier('allowTail'), b.booleanLiteral(easing.allowTail)),
+                        ]),
+                    ...(easing.durationRestThreshold === null
+                        ? []
+                        : [
+                            b.objectProperty(b.identifier('durationRestThreshold'), (0, update_nested_prop_1.parseValueExpression)(easing.durationRestThreshold)),
+                        ]),
                     b.objectProperty(b.identifier('overshootClamping'), b.booleanLiteral(easing.overshootClamping)),
                 ]),
             ]);
@@ -371,7 +381,7 @@ const getInlineOptionsFromExtraArgs = (extraArgs) => {
     }
     return existingOptions;
 };
-const normalizeEasingAfterAddingKeyframe = ({ extraArgs, previousSegmentCount, nextSegmentCount, }) => {
+const normalizeEasingAfterAddingKeyframe = ({ extraArgs, previousSegmentCount, nextSegmentCount, insertedKeyframeIndex, nextKeyframeCount, }) => {
     const options = getInlineOptionsFromExtraArgs(extraArgs);
     if (!options) {
         return { extraArgs, needsEasingImport: false };
@@ -383,6 +393,16 @@ const normalizeEasingAfterAddingKeyframe = ({ extraArgs, previousSegmentCount, n
     if (easing === null) {
         return { extraArgs, needsEasingImport: false };
     }
+    if (easing.length < nextSegmentCount) {
+        const isSplittingExistingSegment = insertedKeyframeIndex > 0 &&
+            insertedKeyframeIndex < nextKeyframeCount - 1;
+        const easingIndexToDuplicate = isSplittingExistingSegment && easing.length > 0
+            ? Math.min(insertedKeyframeIndex - 1, easing.length - 1)
+            : null;
+        easing.splice(insertedKeyframeIndex, 0, easingIndexToDuplicate === null
+            ? studio_shared_1.LINEAR_KEYFRAME_EASING
+            : easing[easingIndexToDuplicate]);
+    }
     while (easing.length < nextSegmentCount) {
         easing.push(studio_shared_1.LINEAR_KEYFRAME_EASING);
     }
@@ -391,6 +411,15 @@ const normalizeEasingAfterAddingKeyframe = ({ extraArgs, previousSegmentCount, n
         needsEasingImport: setEasingOption({ options, easing }),
     };
 };
+const getEasingIndexToRemove = ({ removedKeyframeIndex, keyframeCountBeforeRemoval, }) => {
+    if (removedKeyframeIndex === 0) {
+        return 0;
+    }
+    if (removedKeyframeIndex === keyframeCountBeforeRemoval - 1) {
+        return removedKeyframeIndex - 1;
+    }
+    return removedKeyframeIndex;
+};
 const normalizeEasingAfterRemovingKeyframe = ({ extraArgs, previousSegmentCount, nextSegmentCount, removedKeyframeIndex, }) => {
     const options = getInlineOptionsFromExtraArgs(extraArgs);
     if (!options) {
@@ -404,7 +433,10 @@ const normalizeEasingAfterRemovingKeyframe = ({ extraArgs, previousSegmentCount,
         return { extraArgs, needsEasingImport: false };
     }
     if (easing.length > 0) {
-        const easingIndexToRemove = removedKeyframeIndex === 0 ? 0 : removedKeyframeIndex - 1;
+        const easingIndexToRemove = getEasingIndexToRemove({
+            removedKeyframeIndex,
+            keyframeCountBeforeRemoval: previousSegmentCount + 1,
+        });
         easing.splice(easingIndexToRemove, 1);
     }
     while (easing.length > nextSegmentCount) {
@@ -430,11 +462,21 @@ const normalizeEasingAfterRemovingKeyframes = ({ extraArgs, previousSegmentCount
     if (easing === null) {
         return { extraArgs, needsEasingImport: false };
     }
-    for (const removedKeyframeIndex of [...removedKeyframeIndexes].sort((first, second) => second - first)) {
+    for (const { removedKeyframeIndex, keyframeCountBeforeRemoval } of [
+        ...removedKeyframeIndexes,
+    ]
+        .sort((first, second) => second - first)
+        .map((keyframeIndex, index) => ({
+        removedKeyframeIndex: keyframeIndex,
+        keyframeCountBeforeRemoval: previousSegmentCount + 1 - index,
+    }))) {
         if (easing.length === 0) {
             break;
         }
-        const easingIndexToRemove = removedKeyframeIndex === 0 ? 0 : removedKeyframeIndex - 1;
+        const easingIndexToRemove = getEasingIndexToRemove({
+            removedKeyframeIndex,
+            keyframeCountBeforeRemoval,
+        });
         easing.splice(easingIndexToRemove, 1);
     }
     while (easing.length > nextSegmentCount) {
@@ -587,6 +629,10 @@ const addKeyframe = ({ expression, key, frame, value, schema, }) => {
                 extraArgs: existing.extraArgs,
                 previousSegmentCount: Math.max(existing.keyframes.length - 1, 0),
                 nextSegmentCount: Math.max(nextKeyframes.length - 1, 0),
+                insertedKeyframeIndex: [...nextKeyframes]
+                    .sort((first, second) => first.frame - second.frame)
+                    .findIndex((keyframe) => keyframe.frame === frame),
+                nextKeyframeCount: nextKeyframes.length,
             })
             : { extraArgs: existing.extraArgs, needsEasingImport: false };
         return {

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

@@ -1,21 +1,38 @@
-import { type InsertableCompositionElement } from '@remotion/studio-shared';
+import { type InsertableCompositionElement, type InsertableCompositionElementPosition } from '@remotion/studio-shared';
 export type ResolvedCompositionComponent = {
     source: string;
     line: number;
     column: number;
     canAddSequence: boolean;
 };
+export type ResolvedCompositionComponentWithFile = ResolvedCompositionComponent & {
+    fileName: string;
+    exportName: string | 'default';
+};
+export declare const resolveCompositionComponentWithFile: ({ remotionRoot, compositionFile, compositionId, }: {
+    remotionRoot: string;
+    compositionFile: string;
+    compositionId: string;
+}) => Promise<ResolvedCompositionComponentWithFile>;
 export declare const resolveCompositionComponent: ({ remotionRoot, compositionFile, compositionId, }: {
     remotionRoot: string;
     compositionFile: string;
     compositionId: string;
 }) => Promise<ResolvedCompositionComponent>;
-export declare const insertJsxElementIntoComposition: ({ remotionRoot, compositionFile, compositionId, element, prettierConfigOverride, }: {
+export declare const insertJsxElementIntoComposition: ({ remotionRoot, compositionFile, compositionId, element, prettierConfigOverride, wrapInSequence, }: {
     remotionRoot: string;
     compositionFile: string;
     compositionId: string;
     element: InsertableCompositionElement;
     prettierConfigOverride: Record<string, unknown> | null;
+    wrapInSequence?: {
+        dimensions: {
+            width: number;
+            height: number;
+        };
+        name: string | null;
+        position: InsertableCompositionElementPosition | null;
+    } | null | undefined;
 }) => Promise<{
     fileName: string;
     source: string;

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

@@ -36,7 +36,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.insertJsxElementIntoComposition = exports.resolveCompositionComponent = void 0;
+exports.insertJsxElementIntoComposition = exports.resolveCompositionComponent = exports.resolveCompositionComponentWithFile = void 0;
 const node_fs_1 = __importDefault(require("node:fs"));
 const node_path_1 = __importDefault(require("node:path"));
 const studio_shared_1 = require("@remotion/studio-shared");
@@ -522,14 +522,31 @@ const roundTranslateCoordinate = (value) => {
     return Object.is(rounded, -0) ? 0 : rounded;
 };
 const formatTranslateValue = ({ x, y }) => `${roundTranslateCoordinate(x)}px ${roundTranslateCoordinate(y)}px`;
-const createPositionAbsoluteStyleAttribute = (position) => {
+const createStyleAttribute = (properties) => {
+    return recast.types.builders.jsxAttribute(recast.types.builders.jsxIdentifier('style'), recast.types.builders.jsxExpressionContainer(recast.types.builders.objectExpression(properties)));
+};
+const getPositionStyleProperties = (position) => {
     const properties = [
         recast.types.builders.objectProperty(recast.types.builders.identifier('position'), recast.types.builders.stringLiteral('absolute')),
     ];
     if (position) {
         properties.push(recast.types.builders.objectProperty(recast.types.builders.identifier('translate'), recast.types.builders.stringLiteral(formatTranslateValue(position))));
     }
-    return recast.types.builders.jsxAttribute(recast.types.builders.jsxIdentifier('style'), recast.types.builders.jsxExpressionContainer(recast.types.builders.objectExpression(properties)));
+    return properties;
+};
+const createPositionAbsoluteStyleAttribute = (position) => {
+    return createStyleAttribute(getPositionStyleProperties(position));
+};
+const createAssetStyleAttribute = ({ dimensions, position, }) => {
+    return createStyleAttribute([
+        ...getPositionStyleProperties(position),
+        ...(dimensions
+            ? [
+                recast.types.builders.objectProperty(recast.types.builders.identifier('width'), recast.types.builders.numericLiteral(dimensions.width)),
+                recast.types.builders.objectProperty(recast.types.builders.identifier('height'), recast.types.builders.numericLiteral(dimensions.height)),
+            ]
+            : []),
+    ]);
 };
 const createStaticFileSrcAttribute = ({ staticFileLocalName, src, }) => {
     return recast.types.builders.jsxAttribute(recast.types.builders.jsxIdentifier('src'), recast.types.builders.jsxExpressionContainer(recast.types.builders.callExpression(recast.types.builders.identifier(staticFileLocalName), [recast.types.builders.stringLiteral(src)])));
@@ -553,25 +570,29 @@ const createSolidElement = ({ localName, width, height, position, }) => {
         createPositionAbsoluteStyleAttribute(position),
     ], true), null, []);
 };
-const createComponentElement = ({ localName, props, position, }) => {
+const createComponentElement = ({ addPositionStyle, localName, props, position, }) => {
     return recast.types.builders.jsxElement(recast.types.builders.jsxOpeningElement(recast.types.builders.jsxIdentifier(localName), [
         ...props.map(createComponentProp),
-        createPositionAbsoluteStyleAttribute(position),
+        ...(addPositionStyle
+            ? [createPositionAbsoluteStyleAttribute(position)]
+            : []),
     ], true), null, []);
 };
+const createSequenceWrappedElement = ({ child, dimensions, name, position, sequenceLocalName, }) => {
+    return recast.types.builders.jsxElement(recast.types.builders.jsxOpeningElement(recast.types.builders.jsxIdentifier(sequenceLocalName), [
+        ...(name === null ? [] : [createStringAttribute('name', name)]),
+        createNumberAttribute('width', dimensions.width),
+        createNumberAttribute('height', dimensions.height),
+        createPositionAbsoluteStyleAttribute(position),
+    ], false), recast.types.builders.jsxClosingElement(recast.types.builders.jsxIdentifier(sequenceLocalName)), [child]);
+};
 const createAssetElement = ({ addPositionStyle, localName, staticFileLocalName, src, dimensions, position, }) => {
     return recast.types.builders.jsxElement(recast.types.builders.jsxOpeningElement(recast.types.builders.jsxIdentifier(localName), [
         staticFileLocalName === null
             ? createStringSrcAttribute(src)
             : createStaticFileSrcAttribute({ staticFileLocalName, src }),
         ...(addPositionStyle
-            ? [createPositionAbsoluteStyleAttribute(position)]
-            : []),
-        ...(dimensions
-            ? [
-                createNumberAttribute('width', dimensions.width),
-                createNumberAttribute('height', dimensions.height),
-            ]
+            ? [createAssetStyleAttribute({ dimensions, position })]
             : []),
     ], true), null, []);
 };
@@ -680,6 +701,24 @@ const ensureSolidImport = (ast) => {
         localName: getAvailableSolidLocalName(ast),
     });
 };
+const getAvailableSequenceLocalName = (ast) => {
+    const candidates = ['Sequence', 'RemotionSequence'];
+    const available = candidates.find((candidate) => {
+        return !hasTopLevelBinding({ ast, name: candidate });
+    });
+    if (!available) {
+        throw new Error('Cannot add <Sequence> because Sequence is already defined');
+    }
+    return available;
+};
+const ensureSequenceImport = (ast) => {
+    return (0, imports_1.ensureNamedImport)({
+        ast,
+        importedName: 'Sequence',
+        sourcePath: 'remotion',
+        localName: getAvailableSequenceLocalName(ast),
+    });
+};
 const getImportDeclarations = ({ ast, sourcePath, }) => {
     return ast.program.body.filter((node) => node.type === 'ImportDeclaration' &&
         node.source.type === 'StringLiteral' &&
@@ -1007,8 +1046,9 @@ const resolveCompositionComponentWithFile = async ({ remotionRoot, compositionFi
         visited: new Set(),
     });
 };
+exports.resolveCompositionComponentWithFile = resolveCompositionComponentWithFile;
 const resolveCompositionComponent = async ({ remotionRoot, compositionFile, compositionId, }) => {
-    const { source, line, column, canAddSequence } = await resolveCompositionComponentWithFile({
+    const { source, line, column, canAddSequence } = await (0, exports.resolveCompositionComponentWithFile)({
         remotionRoot,
         compositionFile,
         compositionId,
@@ -1021,7 +1061,7 @@ const resolveCompositionComponent = async ({ remotionRoot, compositionFile, comp
     };
 };
 exports.resolveCompositionComponent = resolveCompositionComponent;
-const createInsertableJsxElement = ({ ast, element, }) => {
+const createInsertableJsxElement = ({ addPositionStyleToComponent, ast, element, }) => {
     if (element.type === 'solid') {
         const solidLocalName = ensureSolidImport(ast);
         return createSolidElement({
@@ -1039,6 +1079,7 @@ const createInsertableJsxElement = ({ ast, element, }) => {
             importPath: element.importPath,
         });
         return createComponentElement({
+            addPositionStyle: addPositionStyleToComponent,
             localName: componentLocalName,
             props: element.props,
             position: element.position,
@@ -1079,8 +1120,8 @@ const createInsertableJsxElement = ({ ast, element, }) => {
     }
     throw new Error('Unsupported element type');
 };
-const insertJsxElementIntoComposition = async ({ remotionRoot, compositionFile, compositionId, element, prettierConfigOverride, }) => {
-    const location = await resolveCompositionComponentWithFile({
+const insertJsxElementIntoComposition = async ({ remotionRoot, compositionFile, compositionId, element, prettierConfigOverride, wrapInSequence = null, }) => {
+    const location = await (0, exports.resolveCompositionComponentWithFile)({
         remotionRoot,
         compositionFile,
         compositionId,
@@ -1093,11 +1134,24 @@ const insertJsxElementIntoComposition = async ({ remotionRoot, compositionFile,
         fileName: location.fileName,
     });
     const ast = (0, parse_ast_1.parseAst)(input);
-    const elementToInsert = createInsertableJsxElement({ ast, element });
+    const elementToInsert = createInsertableJsxElement({
+        addPositionStyleToComponent: wrapInSequence === null,
+        ast,
+        element,
+    });
+    const finalElementToInsert = wrapInSequence
+        ? createSequenceWrappedElement({
+            child: elementToInsert,
+            dimensions: wrapInSequence.dimensions,
+            name: wrapInSequence.name,
+            position: wrapInSequence.position,
+            sequenceLocalName: ensureSequenceImport(ast),
+        })
+        : elementToInsert;
     const logLine = addElementToComponentRoot({
         ast,
         exportName: location.exportName,
-        element: elementToInsert,
+        element: finalElementToInsert,
     });
     const finalFile = (0, parse_ast_1.serializeAst)(ast);
     const { output, formatted } = await (0, format_file_content_1.formatFileContent)({

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

@@ -17,6 +17,7 @@ const delete_static_file_1 = require("./routes/delete-static-file");
 const download_remote_asset_1 = require("./routes/download-remote-asset");
 const duplicate_effect_1 = require("./routes/duplicate-effect");
 const duplicate_jsx_node_1 = require("./routes/duplicate-jsx-node");
+const insert_element_1 = require("./routes/insert-element");
 const insert_jsx_element_1 = require("./routes/insert-jsx-element");
 const install_dependency_1 = require("./routes/install-dependency");
 const log_studio_error_1 = require("./routes/log-studio-error");
@@ -88,6 +89,7 @@ exports.allApiRoutes = {
     '/api/restart-studio': restart_studio_1.handleRestartStudio,
     '/api/install-package': install_dependency_1.handleInstallPackage,
     '/api/insert-jsx-element': insert_jsx_element_1.insertJsxElementHandler,
+    '/api/insert-element': insert_element_1.insertElementHandler,
     '/api/download-remote-asset': download_remote_asset_1.downloadRemoteAssetHandler,
     '/api/undo': undo_1.undoHandler,
     '/api/redo': redo_1.redoHandler,

package/dist/preview-server/handler.js

@@ -2,12 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.handleRequest = void 0;
 const parse_body_1 = require("./parse-body");
+const validate_same_origin_1 = require("./validate-same-origin");
 const handleRequest = async ({ remotionRoot, request, response, entryPoint, handler, logLevel, methods, binariesDirectory, publicDir, }) => {
     if (request.method === 'OPTIONS') {
         response.statusCode = 200;
         response.end();
         return;
     }
+    (0, validate_same_origin_1.validateSameOrigin)(request);
     response.setHeader('content-type', 'application/json');
     response.writeHead(200);
     try {

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

@@ -8,11 +8,20 @@ const node_fs_1 = require("node:fs");
 const node_path_1 = __importDefault(require("node:path"));
 const renderer_1 = require("@remotion/renderer");
 const apply_codemod_to_file_1 = require("../../codemods/apply-codemod-to-file");
+const duplicate_composition_1 = require("../../codemods/duplicate-composition");
 const simple_diff_1 = require("../../codemods/simple-diff");
 const file_watcher_1 = require("../../file-watcher");
 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 formatNewCompositionFile = (componentName) => {
+    return (0, duplicate_composition_1.formatOutput)(`import React from 'react';
+
+export const ${componentName}: React.FC = () => {
+	return null;
+};
+`);
+};
 const getCodemodUndoDescription = (codemod) => {
     if (codemod.type === 'delete-composition') {
         return {
@@ -37,6 +46,13 @@ const getCodemodUndoDescription = (codemod) => {
             entryType: codemod.type,
         };
     }
+    if (codemod.type === 'new-composition') {
+        return {
+            undoMessage: `↩️  Creation of composition "${codemod.newId}"`,
+            redoMessage: `↪️  Creation of composition "${codemod.newId}"`,
+            entryType: codemod.type,
+        };
+    }
     if (codemod.type === 'delete-folder') {
         const label = `folder "${codemod.parentName ? `${codemod.parentName}/` : ''}${codemod.folderName}"`;
         return {
@@ -62,7 +78,7 @@ const getCodemodUndoDescription = (codemod) => {
     };
 };
 const applyCodemodHandler = async ({ input: { codemod, dryRun, symbolicatedStack }, logLevel, remotionRoot, entryPoint, }) => {
-    var _a;
+    var _a, _b;
     try {
         const time = Date.now();
         const filePath = symbolicatedStack
@@ -72,6 +88,14 @@ const applyCodemodHandler = async ({ input: { codemod, dryRun, symbolicatedStack
             throw new Error('Cannot find file for composition in project');
         }
         (0, can_update_default_props_1.checkIfTypeScriptFile)(filePath);
+        const newCompositionComponentFilePath = codemod.type === 'new-composition'
+            ? node_path_1.default.join(node_path_1.default.dirname(filePath), `${codemod.componentName}.tsx`)
+            : null;
+        if (codemod.type === 'new-composition' &&
+            newCompositionComponentFilePath &&
+            (0, node_fs_1.existsSync)(newCompositionComponentFilePath)) {
+            throw new Error(`Cannot create ${node_path_1.default.relative(remotionRoot, newCompositionComponentFilePath)} because it already exists`);
+        }
         const input = (0, node_fs_1.readFileSync)(filePath, 'utf-8');
         const formatted = await (0, apply_codemod_to_file_1.applyCodemodToFile)({
             filePath,
@@ -83,22 +107,64 @@ const applyCodemodHandler = async ({ input: { codemod, dryRun, symbolicatedStack
         });
         if (!dryRun) {
             const { entryType, undoMessage, redoMessage } = getCodemodUndoDescription(codemod);
-            (0, undo_stack_1.pushToUndoStack)({
-                filePath,
-                oldContents: input,
-                newContents: null,
-                logLevel,
-                remotionRoot,
-                logLine: (_a = symbolicatedStack === null || symbolicatedStack === void 0 ? void 0 : symbolicatedStack.originalLineNumber) !== null && _a !== void 0 ? _a : 1,
-                description: {
-                    undoMessage,
-                    redoMessage,
+            const snapshots = [
+                {
+                    filePath,
+                    oldContents: input,
+                    newContents: null,
+                    logLine: (_a = symbolicatedStack === null || symbolicatedStack === void 0 ? void 0 : symbolicatedStack.originalLineNumber) !== null && _a !== void 0 ? _a : 1,
                 },
-                entryType,
-                suppressHmrOnFileRestore: false,
-            });
+            ];
+            let componentFilePath = null;
+            let componentFileContents = null;
+            if (codemod.type === 'new-composition') {
+                componentFilePath = newCompositionComponentFilePath;
+                if (componentFilePath === null) {
+                    throw new Error('Could not determine the new component file path');
+                }
+                componentFileContents = await formatNewCompositionFile(codemod.componentName);
+                snapshots.push({
+                    filePath: componentFilePath,
+                    oldContents: null,
+                    newContents: componentFileContents,
+                    logLine: 1,
+                });
+                (0, undo_stack_1.pushTransactionToUndoStack)({
+                    snapshots,
+                    logLevel,
+                    remotionRoot,
+                    description: {
+                        undoMessage,
+                        redoMessage,
+                    },
+                    entryType,
+                    suppressHmrOnFileRestore: false,
+                });
+            }
+            else {
+                (0, undo_stack_1.pushToUndoStack)({
+                    filePath,
+                    oldContents: input,
+                    newContents: null,
+                    logLevel,
+                    remotionRoot,
+                    logLine: (_b = symbolicatedStack === null || symbolicatedStack === void 0 ? void 0 : symbolicatedStack.originalLineNumber) !== null && _b !== void 0 ? _b : 1,
+                    description: {
+                        undoMessage,
+                        redoMessage,
+                    },
+                    entryType,
+                    suppressHmrOnFileRestore: false,
+                });
+            }
             (0, undo_stack_1.suppressUndoStackInvalidation)(filePath);
+            if (componentFilePath) {
+                (0, undo_stack_1.suppressUndoStackInvalidation)(componentFilePath);
+            }
             (0, file_watcher_1.writeFileAndNotifyFileWatchers)(filePath, formatted, undefined);
+            if (componentFilePath && componentFileContents !== null) {
+                (0, file_watcher_1.writeFileAndNotifyFileWatchers)(componentFilePath, componentFileContents, undefined);
+            }
             const end = Date.now() - time;
             const relativePath = node_path_1.default.relative(remotionRoot, filePath);
             renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, renderer_1.RenderInternals.chalk.blue(`Edited ${relativePath} in ${end}ms`));

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

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

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

@@ -0,0 +1,189 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.insertElementHandler = void 0;
+const node_fs_1 = require("node:fs");
+const node_path_1 = __importDefault(require("node:path"));
+const renderer_1 = require("@remotion/renderer");
+const studio_shared_1 = require("@remotion/studio-shared");
+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 validatePosition = (position) => {
+    if (position === null) {
+        return;
+    }
+    if (!Number.isFinite(position.x) || !Number.isFinite(position.y)) {
+        throw new Error('Position must be finite');
+    }
+};
+const isInside = ({ child, parent }) => {
+    const relative = node_path_1.default.relative(parent, child);
+    return (relative === '' ||
+        (!relative.startsWith('..') && !node_path_1.default.isAbsolute(relative)));
+};
+const withoutTsxExtension = (fileName) => {
+    return fileName.replace(/\.tsx$/, '');
+};
+const normalizeSourceForComparison = (source) => {
+    return source.replace(/\r\n/g, '\n').trim();
+};
+const makeRelativeImportPath = ({ fromFile, toFile, }) => {
+    const withoutExtension = withoutTsxExtension(toFile);
+    let relative = node_path_1.default
+        .relative(node_path_1.default.dirname(fromFile), withoutExtension)
+        .split(node_path_1.default.sep)
+        .join('/');
+    if (!relative.startsWith('.')) {
+        relative = `./${relative}`;
+    }
+    return relative;
+};
+const validateDimensions = (dimensions) => {
+    if (!Number.isFinite(dimensions.width) ||
+        !Number.isFinite(dimensions.height) ||
+        dimensions.width <= 0 ||
+        dimensions.height <= 0) {
+        throw new Error('Element dimensions must be positive finite numbers');
+    }
+};
+const validateElement = (element) => {
+    if ((0, studio_shared_1.makeElementFileNameFromSlug)(element.slug) === null) {
+        throw new Error('Element slug must produce a safe lowercase .tsx file name');
+    }
+    if (typeof element.sourceCode !== 'string' ||
+        element.sourceCode.trim().length === 0 ||
+        element.sourceCode.length > 200000) {
+        throw new Error('Unsupported Element source code');
+    }
+    if ((0, studio_shared_1.getElementComponentNameFromSourceCode)(element.sourceCode) === null) {
+        throw new Error('Element source must export exactly one named component');
+    }
+    validateDimensions(element.dimensions);
+};
+const insertElementHandler = ({ input: { compositionFile, compositionId, element, position }, remotionRoot, logLevel, }) => (0, save_props_mutex_1.withSavePropsLock)(async () => {
+    try {
+        validateElement(element);
+        validatePosition(position);
+        const componentName = (0, studio_shared_1.getElementComponentNameFromSourceCode)(element.sourceCode);
+        if (componentName === null) {
+            throw new Error('Element source must export exactly one named component');
+        }
+        renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[insert-element] Received request for compositionFile="${compositionFile}" compositionId="${compositionId}" element="${element.slug}"`);
+        const location = await (0, resolve_composition_component_1.resolveCompositionComponentWithFile)({
+            remotionRoot,
+            compositionFile,
+            compositionId,
+        });
+        if (!location.canAddSequence) {
+            throw new Error('Cannot insert Element into this composition component');
+        }
+        const derivedElementFileName = (0, studio_shared_1.makeElementFileNameFromSlug)(element.slug);
+        if (derivedElementFileName === null) {
+            throw new Error('Element slug must produce a safe lowercase .tsx file name');
+        }
+        const elementFileName = node_path_1.default.resolve(node_path_1.default.dirname(location.fileName), derivedElementFileName);
+        if (!isInside({ child: elementFileName, parent: remotionRoot })) {
+            throw new Error('Element file must stay inside the Remotion project');
+        }
+        const elementFileExists = (0, node_fs_1.existsSync)(elementFileName);
+        if (elementFileExists) {
+            const existingSource = (0, node_fs_1.readFileSync)(elementFileName, 'utf-8');
+            if (normalizeSourceForComparison(existingSource) !==
+                normalizeSourceForComparison(element.sourceCode)) {
+                throw new Error(`Element file already exists with different contents: ${derivedElementFileName}`);
+            }
+        }
+        const importPath = makeRelativeImportPath({
+            fromFile: location.fileName,
+            toFile: elementFileName,
+        });
+        const inserted = await (0, resolve_composition_component_1.insertJsxElementIntoComposition)({
+            remotionRoot,
+            compositionFile,
+            compositionId,
+            element: {
+                type: 'component',
+                componentName,
+                importName: componentName,
+                importPath,
+                props: [],
+                position: null,
+            },
+            prettierConfigOverride: null,
+            wrapInSequence: {
+                dimensions: element.dimensions,
+                name: element.displayName,
+                position,
+            },
+        });
+        (0, undo_stack_1.pushTransactionToUndoStack)({
+            snapshots: [
+                ...(elementFileExists
+                    ? []
+                    : [
+                        {
+                            filePath: elementFileName,
+                            oldContents: null,
+                            newContents: element.sourceCode,
+                            logLine: 1,
+                        },
+                    ]),
+                {
+                    filePath: inserted.fileName,
+                    oldContents: inserted.oldContents,
+                    newContents: inserted.output,
+                    logLine: inserted.logLine,
+                },
+            ],
+            logLevel,
+            remotionRoot,
+            description: {
+                undoMessage: `↩️  Added ${element.displayName}`,
+                redoMessage: `↪️  Added ${element.displayName}`,
+            },
+            entryType: 'insert-jsx-element',
+            suppressHmrOnFileRestore: false,
+        });
+        if (!elementFileExists) {
+            (0, undo_stack_1.suppressUndoStackInvalidation)(elementFileName);
+        }
+        (0, undo_stack_1.suppressUndoStackInvalidation)(inserted.fileName);
+        if (!elementFileExists) {
+            (0, file_watcher_1.writeFileAndNotifyFileWatchers)(elementFileName, element.sourceCode, undefined);
+        }
+        (0, file_watcher_1.writeFileAndNotifyFileWatchers)(inserted.fileName, inserted.output, undefined);
+        const compositionLocationLabel = (0, format_log_file_location_1.formatLogFileLocation)({
+            remotionRoot,
+            absolutePath: inserted.fileName,
+            line: inserted.logLine,
+        });
+        const elementLocationLabel = (0, format_log_file_location_1.formatLogFileLocation)({
+            remotionRoot,
+            absolutePath: elementFileName,
+            line: 1,
+        });
+        renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(elementLocationLabel)} ${elementFileExists ? 'Reused existing Element source' : 'Created Element source'}`);
+        renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(compositionLocationLabel)} Added <${componentName}>`);
+        if (!inserted.formatted) {
+            (0, log_update_1.warnAboutPrettierOnce)(logLevel);
+        }
+        (0, undo_stack_1.printUndoHint)(logLevel);
+        return {
+            success: true,
+        };
+    }
+    catch (err) {
+        return {
+            success: false,
+            reason: err.message,
+            stack: err.stack,
+        };
+    }
+});
+exports.insertElementHandler = insertElementHandler;

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

@@ -73,7 +73,7 @@ const startServer = async (options) => {
     const server = node_http_1.default.createServer((request, response) => {
         if (options.enableCrossSiteIsolation) {
             response.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
-            response.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');
+            response.setHeader('Cross-Origin-Embedder-Policy', 'credentialless');
         }
         new Promise((resolve) => {
             wdmMiddleware(request, response, () => {

package/dist/preview-server/undo-stack.d.ts

@@ -3,10 +3,10 @@ export interface UndoEntryDescription {
     undoMessage: string;
     redoMessage: string;
 }
-type UndoEntryType = 'visual-control' | 'default-props' | 'sequence-props' | 'effect-props' | 'keyframe-add' | 'keyframe-delete' | 'add-effect' | 'delete-effect' | 'duplicate-effect' | 'paste-effects' | 'reorder-effect' | 'reorder-sequence' | 'delete-jsx-node' | 'duplicate-jsx-node' | 'insert-jsx-element' | 'delete-composition' | 'rename-composition' | 'duplicate-composition' | 'delete-folder' | 'rename-folder';
+type UndoEntryType = 'visual-control' | 'default-props' | 'sequence-props' | 'effect-props' | 'keyframe-add' | 'keyframe-delete' | 'add-effect' | 'delete-effect' | 'duplicate-effect' | 'paste-effects' | 'reorder-effect' | 'reorder-sequence' | 'delete-jsx-node' | 'duplicate-jsx-node' | 'insert-jsx-element' | 'delete-composition' | 'rename-composition' | 'new-composition' | 'duplicate-composition' | 'delete-folder' | 'rename-folder';
 type UndoEntrySnapshot = {
     filePath: string;
-    oldContents: string;
+    oldContents: string | null;
     newContents: string | null;
     /** 1-based source line for terminal/IDE file links (e.g. path:line). */
     logLine: number;
@@ -53,6 +53,8 @@ type UndoEntry = {
     entryType: 'delete-composition';
 } | {
     entryType: 'rename-composition';
+} | {
+    entryType: 'new-composition';
 } | {
     entryType: 'duplicate-composition';
 } | {
@@ -74,7 +76,7 @@ export declare function pushToUndoStack({ filePath, oldContents, newContents, lo
 export declare function pushTransactionToUndoStack({ snapshots, logLevel, remotionRoot, description, entryType, suppressHmrOnFileRestore }: {
     snapshots: Array<{
         filePath: string;
-        oldContents: string;
+        oldContents: string | null;
         newContents: string | null;
         logLine: number;
     }>;

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

@@ -233,7 +233,9 @@ function popUndo() {
         var _a;
         return {
             ...snapshot,
-            newContents: (_a = snapshot.newContents) !== null && _a !== void 0 ? _a : (0, node_fs_1.readFileSync)(snapshot.filePath, 'utf-8'),
+            newContents: (_a = snapshot.newContents) !== null && _a !== void 0 ? _a : ((0, node_fs_1.existsSync)(snapshot.filePath)
+                ? (0, node_fs_1.readFileSync)(snapshot.filePath, 'utf-8')
+                : null),
         };
     });
     redoStack.push(makeUndoEntry({
@@ -250,13 +252,20 @@ function popUndo() {
         if (entry.suppressHmrOnFileRestore) {
             (0, watch_ignore_next_change_1.suppressBundlerUpdateForFile)(snapshot.filePath);
         }
-        (0, file_watcher_1.writeFileAndNotifyFileWatchers)(snapshot.filePath, snapshot.oldContents, undefined);
+        if (snapshot.oldContents === null) {
+            (0, node_fs_1.rmSync)(snapshot.filePath, { force: true });
+        }
+        else {
+            (0, file_watcher_1.writeFileAndNotifyFileWatchers)(snapshot.filePath, snapshot.oldContents, undefined);
+        }
     }
     renderer_1.RenderInternals.Log.verbose({ indent: false, logLevel: storedLogLevel }, renderer_1.RenderInternals.chalk.gray(`Undo: restored ${entry.filePath} (undo: ${undoStack.length}, redo: ${redoStack.length})`));
     logFileAction(entry.description.undoMessage, entry.filePath, entry.logLine);
     if (entry.entryType === 'visual-control') {
         for (const snapshot of entry.snapshots) {
-            emitVisualControlChanges(snapshot.oldContents);
+            if (snapshot.oldContents !== null) {
+                emitVisualControlChanges(snapshot.oldContents);
+            }
         }
     }
     for (const filePath of getEntryFilePaths(entry)) {

package/dist/routes.js

@@ -105,7 +105,7 @@ const handleFallback = async ({ remotionRoot, hash, response, request, getCurren
     response.setHeader('content-type', 'text/html');
     if (enableCrossSiteIsolation) {
         response.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
-        response.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');
+        response.setHeader('Cross-Origin-Embedder-Policy', 'credentialless');
     }
     const packageManager = (0, get_package_manager_1.getPackageManager)({
         remotionRoot,

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.481",
+	"version": "4.0.483",
 	"description": "Run a Remotion Studio with a server backend",
 	"main": "dist",
 	"scripts": {
@@ -27,11 +27,11 @@
 		"@babel/parser": "7.24.1",
 		"semver": "7.5.3",
 		"prettier": "3.8.1",
-		"remotion": "4.0.481",
+		"remotion": "4.0.483",
 		"recast": "0.23.11",
-		"@remotion/bundler": "4.0.481",
-		"@remotion/renderer": "4.0.481",
-		"@remotion/studio-shared": "4.0.481",
+		"@remotion/bundler": "4.0.483",
+		"@remotion/renderer": "4.0.483",
+		"@remotion/studio-shared": "4.0.483",
 		"memfs": "3.4.3",
 		"open": "8.4.2"
 	},
@@ -39,7 +39,7 @@
 		"ast-types": "0.16.1",
 		"react": "19.2.3",
 		"@types/semver": "7.5.3",
-		"@remotion/eslint-config-internal": "4.0.481",
+		"@remotion/eslint-config-internal": "4.0.483",
 		"eslint": "9.19.0",
 		"@types/node": "20.12.14",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"