@remotion/studio-server 4.0.515 → 4.0.516

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

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

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

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

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

@@ -1,6 +1,6 @@
-import type { SequenceNodePathRemapping } from '@remotion/studio-shared';
+import { duplicateJsxElementAtPath } from '@remotion/studio-codemods';
 import type { SequenceNodePath } from 'remotion';
-export declare const duplicateJsxElementAtPath: (jsxPath: import("ast-types/lib/node-path").NodePath<N, V>) => void;
+export { duplicateJsxElementAtPath };
 export declare const duplicateJsxNode: ({ input, nodePath, prettierConfigOverride, }: {
     input: string;
     nodePath: SequenceNodePath;
@@ -10,5 +10,5 @@ export declare const duplicateJsxNode: ({ input, nodePath, prettierConfigOverrid
     formatted: boolean;
     nodeLabel: string;
     logLine: number;
-    nodePathRemappings: SequenceNodePathRemapping[];
+    nodePathRemappings: import("@remotion/studio-shared").SequenceNodePathRemapping[];
 }>;

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

@@ -1,319 +1,16 @@
 "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.duplicateJsxNode = exports.duplicateJsxElementAtPath = void 0;
-const types_1 = require("@babel/types");
-const recast = __importStar(require("recast"));
-const delete_jsx_node_1 = require("./delete-jsx-node");
+const studio_codemods_1 = require("@remotion/studio-codemods");
+Object.defineProperty(exports, "duplicateJsxElementAtPath", { enumerable: true, get: function () { return studio_codemods_1.duplicateJsxElementAtPath; } });
 const format_file_content_1 = require("./format-file-content");
-const get_node_path_remappings_1 = require("./get-node-path-remappings");
-const parse_ast_1 = require("./parse-ast");
-const { namedTypes } = recast.types;
-const makeFragment = (first, second) => ({
-    type: 'JSXFragment',
-    openingFragment: { type: 'JSXOpeningFragment' },
-    closingFragment: { type: 'JSXClosingFragment' },
-    children: [first, second],
+const duplicateJsxNode = ({ input, nodePath, prettierConfigOverride, }) => (0, studio_codemods_1.duplicateJsxNode)({
+    input,
+    nodePath,
+    formatFile: ({ contents, prettierConfigOverride: override }) => (0, format_file_content_1.formatFileContent)({
+        input: contents,
+        prettierConfigOverride: override,
+    }),
+    prettierConfigOverride,
 });
-const uniquifyNamePropOnClone = (clone) => {
-    for (const attr of clone.openingElement.attributes) {
-        if (attr.type !== 'JSXAttribute' || attr.name.type !== 'JSXIdentifier') {
-            continue;
-        }
-        if (attr.name.name !== 'name') {
-            continue;
-        }
-        if (!attr.value) {
-            continue;
-        }
-        if (attr.value.type === 'StringLiteral') {
-            attr.value.value = `${attr.value.value}-copy`;
-            return;
-        }
-        if (attr.value.type === 'JSXExpressionContainer' &&
-            attr.value.expression.type === 'StringLiteral') {
-            attr.value.expression.value = `${attr.value.expression.value}-copy`;
-            return;
-        }
-    }
-};
-const duplicateInLogicalExpression = (parent, node, clone) => {
-    const frag = makeFragment(node, clone);
-    if (parent.left === node) {
-        parent.left = frag;
-        return true;
-    }
-    if (parent.right === node) {
-        parent.right = frag;
-        return true;
-    }
-    return false;
-};
-const duplicateInConditionalExpression = (parent, node, clone) => {
-    const frag = makeFragment(node, clone);
-    if (parent.consequent === node) {
-        parent.consequent = frag;
-        return true;
-    }
-    if (parent.alternate === node) {
-        parent.alternate = frag;
-        return true;
-    }
-    return false;
-};
-const duplicateInArrowFunctionExpression = (parent, node, clone) => {
-    const frag = makeFragment(node, clone);
-    if (parent.body === node) {
-        parent.body = frag;
-        return true;
-    }
-    return false;
-};
-const duplicateInReturnStatement = (parent, node, clone) => {
-    const frag = makeFragment(node, clone);
-    if (parent.argument === node) {
-        parent.argument = frag;
-        return true;
-    }
-    return false;
-};
-const duplicateInCallExpression = (parent, node, clone) => {
-    const idx = parent.arguments.indexOf(node);
-    if (idx !== -1) {
-        parent.arguments.splice(idx + 1, 0, clone);
-        return true;
-    }
-    return false;
-};
-const duplicateInOptionalCallExpression = (parent, node, clone) => {
-    const idx = parent.arguments.indexOf(node);
-    if (idx !== -1) {
-        parent.arguments.splice(idx + 1, 0, clone);
-        return true;
-    }
-    return false;
-};
-const duplicateInArrayExpression = (parent, node, clone) => {
-    const idx = parent.elements.indexOf(node);
-    if (idx !== -1) {
-        parent.elements.splice(idx + 1, 0, clone);
-        return true;
-    }
-    return false;
-};
-const duplicateInAssignmentExpression = (parent, node, clone) => {
-    const frag = makeFragment(node, clone);
-    if (parent.right === node) {
-        parent.right = frag;
-        return true;
-    }
-    return false;
-};
-const duplicateInVariableDeclarator = (parent, node, clone) => {
-    const frag = makeFragment(node, clone);
-    if (parent.init === node) {
-        parent.init = frag;
-        return true;
-    }
-    return false;
-};
-const duplicateInExportDefaultDeclaration = (parent, node, clone) => {
-    const frag = makeFragment(node, clone);
-    if (parent.declaration === node) {
-        parent.declaration =
-            frag;
-        return true;
-    }
-    return false;
-};
-const duplicateInSequenceExpression = (parent, node, clone) => {
-    const idx = parent.expressions.indexOf(node);
-    if (idx !== -1) {
-        parent.expressions.splice(idx + 1, 0, clone);
-        return true;
-    }
-    return false;
-};
-const duplicateInNewExpression = (parent, node, clone) => {
-    const idx = parent.arguments.indexOf(node);
-    if (idx !== -1) {
-        parent.arguments.splice(idx + 1, 0, clone);
-        return true;
-    }
-    return false;
-};
-const duplicateInExpressionStatement = (parent, node, clone) => {
-    const frag = makeFragment(node, clone);
-    if (parent.expression === node) {
-        parent.expression = frag;
-        return true;
-    }
-    return false;
-};
-const duplicateInParenthesizedExpression = (parent, node, clone) => {
-    const frag = makeFragment(node, clone);
-    if (parent.expression === node) {
-        parent.expression = frag;
-        return true;
-    }
-    return false;
-};
-const duplicateInJSXExpressionContainer = (parent, node, clone) => {
-    const frag = makeFragment(node, clone);
-    if (parent.expression === node) {
-        parent.expression = frag;
-        return true;
-    }
-    return false;
-};
-const duplicateInTSAsExpression = (parent, node, clone) => {
-    const frag = makeFragment(node, clone);
-    if (parent.expression === node) {
-        parent.expression = frag;
-        return true;
-    }
-    return false;
-};
-const duplicateInJSXParentChildren = (parent, node, clone) => {
-    const idx = parent.children.indexOf(node);
-    if (idx !== -1) {
-        parent.children.splice(idx + 1, 0, clone);
-        return true;
-    }
-    return false;
-};
-const insertDuplicateForParent = (parentNode, node, clone) => {
-    if (namedTypes.LogicalExpression.check(parentNode)) {
-        return duplicateInLogicalExpression(parentNode, node, clone);
-    }
-    if (namedTypes.ConditionalExpression.check(parentNode)) {
-        return duplicateInConditionalExpression(parentNode, node, clone);
-    }
-    if (namedTypes.ArrowFunctionExpression.check(parentNode)) {
-        return duplicateInArrowFunctionExpression(parentNode, node, clone);
-    }
-    if (namedTypes.ReturnStatement.check(parentNode)) {
-        return duplicateInReturnStatement(parentNode, node, clone);
-    }
-    if (namedTypes.CallExpression.check(parentNode)) {
-        return duplicateInCallExpression(parentNode, node, clone);
-    }
-    if (parentNode.type === 'OptionalCallExpression') {
-        return duplicateInOptionalCallExpression(parentNode, node, clone);
-    }
-    if (namedTypes.ArrayExpression.check(parentNode)) {
-        return duplicateInArrayExpression(parentNode, node, clone);
-    }
-    if (namedTypes.AssignmentExpression.check(parentNode)) {
-        return duplicateInAssignmentExpression(parentNode, node, clone);
-    }
-    if (namedTypes.VariableDeclarator.check(parentNode)) {
-        return duplicateInVariableDeclarator(parentNode, node, clone);
-    }
-    if (namedTypes.ExportDefaultDeclaration.check(parentNode)) {
-        return duplicateInExportDefaultDeclaration(parentNode, node, clone);
-    }
-    if (namedTypes.SequenceExpression.check(parentNode)) {
-        return duplicateInSequenceExpression(parentNode, node, clone);
-    }
-    if (namedTypes.NewExpression.check(parentNode)) {
-        return duplicateInNewExpression(parentNode, node, clone);
-    }
-    if (namedTypes.ExpressionStatement.check(parentNode)) {
-        return duplicateInExpressionStatement(parentNode, node, clone);
-    }
-    if (namedTypes.ParenthesizedExpression.check(parentNode)) {
-        return duplicateInParenthesizedExpression(parentNode, node, clone);
-    }
-    if (namedTypes.JSXExpressionContainer.check(parentNode)) {
-        return duplicateInJSXExpressionContainer(parentNode, node, clone);
-    }
-    if (namedTypes.TSAsExpression.check(parentNode)) {
-        return duplicateInTSAsExpression(parentNode, node, clone);
-    }
-    if (namedTypes.JSXElement.check(parentNode)) {
-        return duplicateInJSXParentChildren(parentNode, node, clone);
-    }
-    if (namedTypes.JSXFragment.check(parentNode)) {
-        return duplicateInJSXParentChildren(parentNode, node, clone);
-    }
-    return false;
-};
-const duplicateJsxElementAtPath = (jsxPath) => {
-    const { node, parentPath } = jsxPath;
-    if (!parentPath) {
-        throw new Error('Cannot duplicate JSX element with no parent');
-    }
-    const jsxNode = node;
-    const clone = (0, types_1.cloneNode)(jsxNode, true);
-    uniquifyNamePropOnClone(clone);
-    if (insertDuplicateForParent(parentPath.node, jsxNode, clone)) {
-        return;
-    }
-    jsxPath.replace(makeFragment(jsxNode, clone));
-};
-exports.duplicateJsxElementAtPath = duplicateJsxElementAtPath;
-const duplicateJsxNode = async ({ input, nodePath, prettierConfigOverride, }) => {
-    var _a, _b;
-    var _c, _d;
-    const ast = (0, parse_ast_1.parseAst)(input);
-    const capturedNodePaths = (0, get_node_path_remappings_1.captureJsxNodePaths)(ast);
-    const jsxPath = (0, delete_jsx_node_1.findJsxElementPathForDeletion)(ast, nodePath);
-    if (!jsxPath) {
-        throw new Error('Could not find a JSX element at the specified location to duplicate');
-    }
-    const jsxElement = jsxPath.node;
-    const nodeLabel = (0, delete_jsx_node_1.getJsxElementTagLabel)(jsxElement);
-    const logLine = (_d = (_c = (_a = jsxElement.openingElement.loc) === null || _a === void 0 ? void 0 : _a.start.line) !== null && _c !== void 0 ? _c : (_b = jsxElement.loc) === null || _b === void 0 ? void 0 : _b.start.line) !== null && _d !== void 0 ? _d : 1;
-    (0, exports.duplicateJsxElementAtPath)(jsxPath);
-    const finalFile = (0, parse_ast_1.serializeAst)(ast);
-    const { output, formatted } = await (0, format_file_content_1.formatFileContent)({
-        input: finalFile,
-        prettierConfigOverride,
-    });
-    const { nodePathRemappings } = (0, get_node_path_remappings_1.getNodePathRemappings)({
-        ast,
-        captured: capturedNodePaths,
-        output,
-    });
-    return {
-        output,
-        formatted,
-        nodeLabel,
-        logLine,
-        nodePathRemappings,
-    };
-};
 exports.duplicateJsxNode = duplicateJsxNode;

package/dist/preview-server/hmr-timing.d.ts

@@ -0,0 +1,5 @@
+export declare const logHmrTiming: ({ detail, logLevel, stage, }: {
+    detail: string | null;
+    logLevel: "error" | "info" | "trace" | "verbose" | "warn";
+    stage: string;
+}) => void;

package/dist/preview-server/hmr-timing.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.logHmrTiming = void 0;
+const renderer_1 = require("@remotion/renderer");
+const logHmrTiming = ({ detail, logLevel, stage, }) => {
+    const detailSuffix = detail ? ` ${detail}` : '';
+    renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[hmr-timing] epoch=${Date.now()} monotonic=${performance.now().toFixed(3)} stage=${stage}${detailSuffix}`);
+};
+exports.logHmrTiming = logHmrTiming;

package/dist/preview-server/hot-middleware/index.js

@@ -7,14 +7,23 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.setupWebpackHmr = void 0;
 const renderer_1 = require("@remotion/renderer");
+const hmr_timing_1 = require("../hmr-timing");
 const setupWebpackHmr = (compiler, logLevel, liveEventsServer) => {
     let latestStats = null;
     const publishHmr = (hmrEvent) => {
         liveEventsServer.sendEventToClient({ type: 'hmr', hmrEvent });
     };
     compiler.hooks.invalid.tap('remotion', onInvalid);
+    compiler.hooks.watchRun.tap('remotion-hmr-timing', () => {
+        (0, hmr_timing_1.logHmrTiming)({ detail: null, logLevel, stage: 'compiler-watch-run' });
+    });
     compiler.hooks.done.tap('remotion', onDone);
-    function onInvalid() {
+    function onInvalid(fileName, changeTime) {
+        (0, hmr_timing_1.logHmrTiming)({
+            detail: `file=${fileName !== null && fileName !== void 0 ? fileName : 'manual'} changeTime=${changeTime}`,
+            logLevel,
+            stage: 'compiler-invalid',
+        });
         latestStats = null;
         renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, 'Building...');
         publishHmr({
@@ -22,9 +31,15 @@ const setupWebpackHmr = (compiler, logLevel, liveEventsServer) => {
         });
     }
     function onDone(statsResult) {
+        (0, hmr_timing_1.logHmrTiming)({
+            detail: `reportedBuildDuration=${statsResult.endTime - statsResult.startTime}ms`,
+            logLevel,
+            stage: 'compiler-done',
+        });
         // Keep hold of latest stats so they can be propagated to new clients
         latestStats = statsResult;
         publishStats('built', latestStats, publishHmr);
+        (0, hmr_timing_1.logHmrTiming)({ detail: null, logLevel, stage: 'hmr-stats-published' });
     }
     liveEventsServer.addNewClientListener(() => {
         if (latestStats) {

package/dist/preview-server/routes/can-update-sequence-props.js

@@ -775,6 +775,10 @@ const getPropsStatus = (jsxElement, ast, videoConfigValues, assetKeys) => {
     const props = {};
     for (const attr of jsxElement.attributes) {
         if (attr.type === 'JSXSpreadAttribute') {
+            // The spread may override every prop written before it
+            for (const key of Object.keys(props)) {
+                props[key] = computedStatus();
+            }
             continue;
         }
         if (attr.name.type === 'JSXNamespacedName') {
@@ -1113,14 +1117,28 @@ const getBorderRadiusShorthandStatus = ({ propValue, ast, videoConfigValues, })
     }
     return computedStatus();
 };
-const getNestedPropStatus = ({ jsxElement, ast, parentKey, childKey, videoConfigValues, allowSpecialValues, }) => {
-    const attr = jsxElement.attributes.find((a) => a.type !== 'JSXSpreadAttribute' &&
+const getNestedPropStatus = ({ jsxElement, ast, parentKey, childKey, videoConfigValues, allowSpecialValues, lastSpreadIndex, }) => {
+    const attrIndex = jsxElement.attributes.findIndex((a) => a.type !== 'JSXSpreadAttribute' &&
         a.name.type !== 'JSXNamespacedName' &&
         a.name.name === parentKey);
-    if (!attr || !attr.value) {
+    const attr = attrIndex === -1
+        ? undefined
+        : jsxElement.attributes[attrIndex];
+    if (attrIndex !== -1 && attrIndex < lastSpreadIndex) {
+        // A later spread may replace the whole parent object
+        return computedStatus();
+    }
+    if (!attr) {
+        if (lastSpreadIndex !== -1) {
+            // The spread may provide the parent object
+            return computedStatus();
+        }
         // Parent attribute doesn't exist, nested prop can be added
         return staticStatus(undefined, null);
     }
+    if (!attr.value) {
+        return staticStatus(undefined, null);
+    }
     if (attr.value.type !== 'JSXExpressionContainer') {
         return computedStatus();
     }
@@ -1210,6 +1228,13 @@ const computeEffectsForJsx = ({ ast, jsxElement, effects, videoConfigValues, })
     }));
 };
 const computeSequenceOnlyPropsRecord = ({ jsxElement, jsxElementNode, ast, keys, assetKeys, videoConfigValues, }) => {
+    // A JSX spread attribute ({...props}) is invisible to the parser and may
+    // set or override every prop that is not explicitly written after it.
+    // Affected props are treated as computed so the runtime values pass
+    // through untouched and Visual Mode does not offer to edit them.
+    // Attributes written after the last spread win at runtime and can be
+    // parsed as usual.
+    const lastSpreadIndex = jsxElement.attributes.reduce((highest, attr, index) => attr.type === 'JSXSpreadAttribute' ? index : highest, -1);
     const allProps = getPropsStatus(jsxElement, ast, videoConfigValues, assetKeys);
     const filteredProps = {};
     const mixedBorderRadius = hasMixedBorderRadiusRepresentation(jsxElement);
@@ -1221,6 +1246,14 @@ const computeSequenceOnlyPropsRecord = ({ jsxElement, jsxElementNode, ast, keys,
             continue;
         }
         if (key === 'children') {
+            const childrenAttrIndex = jsxElement.attributes.findIndex((attr) => attr.type === 'JSXAttribute' &&
+                attr.name.type === 'JSXIdentifier' &&
+                attr.name.name === 'children');
+            if (childrenAttrIndex !== -1 && childrenAttrIndex < lastSpreadIndex) {
+                // A later spread may override the children attribute
+                filteredProps[key] = computedStatus();
+                continue;
+            }
             const staticChildrenAttribute = (0, exports.getStaticJsxChildrenAttribute)(jsxElement);
             if (staticChildrenAttribute) {
                 filteredProps[key] = staticStatus(staticChildrenAttribute.value, null);
@@ -1230,6 +1263,14 @@ const computeSequenceOnlyPropsRecord = ({ jsxElement, jsxElementNode, ast, keys,
                 filteredProps[key] = computedStatus();
                 continue;
             }
+            // JSX element children are compiled after any spread and win over
+            // it. Only if the element body is empty may the spread provide the
+            // children.
+            const hasMeaningfulJsxChildren = jsxElementNode.children.some((candidate) => !(candidate.type === 'JSXText' && candidate.value.trim() === ''));
+            if (!hasMeaningfulJsxChildren && lastSpreadIndex !== -1) {
+                filteredProps[key] = computedStatus();
+                continue;
+            }
             const staticTextContent = (0, exports.getStaticJsxTextContent)(jsxElementNode);
             filteredProps[key] = staticTextContent
                 ? staticStatus(staticTextContent.value, null)
@@ -1245,11 +1286,16 @@ const computeSequenceOnlyPropsRecord = ({ jsxElement, jsxElementNode, ast, keys,
                 childKey: key.slice(dotIndex + 1),
                 videoConfigValues,
                 allowSpecialValues: assetKeys.includes(key),
+                lastSpreadIndex,
             });
         }
         else if (key in allProps) {
             filteredProps[key] = allProps[key];
         }
+        else if (lastSpreadIndex !== -1) {
+            // The spread may provide this prop
+            filteredProps[key] = computedStatus();
+        }
         else {
             filteredProps[key] = staticStatus(undefined, null);
         }

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

@@ -7,6 +7,7 @@ const delete_jsx_node_1 = require("../../codemods/delete-jsx-node");
 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 hmr_timing_1 = require("../hmr-timing");
 const sequence_node_path_mutation_1 = require("../sequence-node-path-mutation");
 const undo_stack_1 = require("../undo-stack");
 const log_update_1 = require("./log-updates/log-update");
@@ -21,6 +22,11 @@ const deleteJsxNodeHandler = ({ input: { nodes }, remotionRoot, logLevel }) => {
     return (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
         var _a;
         try {
+            (0, hmr_timing_1.logHmrTiming)({
+                detail: null,
+                logLevel,
+                stage: 'delete-jsx-node-request-start',
+            });
             if (nodes.length === 0) {
                 throw new Error('No JSX nodes were specified for deletion');
             }
@@ -41,6 +47,13 @@ const deleteJsxNodeHandler = ({ input: { nodes }, remotionRoot, logLevel }) => {
                 const { output, formatted, nodeLabels, logLines, nodePathRemappings } = await (0, delete_jsx_node_1.deleteJsxNodes)({
                     input: fileContents,
                     nodePaths: fileItems.map((item) => item.nodePath),
+                    onFormatFile: (stage) => {
+                        (0, hmr_timing_1.logHmrTiming)({
+                            detail: `file=${fileRelativeToRoot}`,
+                            logLevel,
+                            stage: `source-file-format-${stage}`,
+                        });
+                    },
                 });
                 return {
                     absolutePath,
@@ -53,6 +66,11 @@ const deleteJsxNodeHandler = ({ input: { nodes }, remotionRoot, logLevel }) => {
                     logLine: Math.min(...logLines),
                 };
             }));
+            (0, hmr_timing_1.logHmrTiming)({
+                detail: `files=${updates.length}`,
+                logLevel,
+                stage: 'delete-jsx-node-codemod-complete',
+            });
             const nodePathMutation = (0, sequence_node_path_mutation_1.broadcastSequenceNodePathMutation)(updates.map((update) => ({
                 absolutePath: update.absolutePath,
                 remappings: update.nodePathRemappings,
@@ -76,12 +94,22 @@ const deleteJsxNodeHandler = ({ input: { nodes }, remotionRoot, logLevel }) => {
                     nodePathRemappings: update.nodePathRemappings,
                 });
                 (0, undo_stack_1.suppressUndoStackInvalidation)(update.absolutePath);
+                (0, hmr_timing_1.logHmrTiming)({
+                    detail: `file=${update.fileRelativeToRoot}`,
+                    logLevel,
+                    stage: 'source-file-write-start',
+                });
                 (0, file_watcher_1.writeFileAndNotifyFileWatchers)({
                     file: update.absolutePath,
                     content: update.output,
                     originatorClientId: undefined,
                     metadata: { skipSequencePropsUpdate: true },
                 });
+                (0, hmr_timing_1.logHmrTiming)({
+                    detail: `file=${update.fileRelativeToRoot}`,
+                    logLevel,
+                    stage: 'source-file-write-complete',
+                });
                 const locationLabel = (0, format_log_file_location_1.formatLogFileLocation)({
                     remotionRoot,
                     absolutePath: update.absolutePath,

package/dist/preview-server/routes/download-remote-asset.d.ts

@@ -1,7 +1,4 @@
-import { type DownloadRemoteAssetRequest, type DownloadRemoteAssetResponse, type ImageFileType } from '@remotion/studio-shared';
+import { getRemoteAssetFilename, type DownloadRemoteAssetRequest, type DownloadRemoteAssetResponse } from '@remotion/studio-shared';
 import type { ApiHandler } from '../api-types';
-export declare const getRemoteAssetFilename: ({ fileType, url, }: {
-    fileType: ImageFileType;
-    url: URL;
-}) => string;
+export { getRemoteAssetFilename };
 export declare const downloadRemoteAssetHandler: ApiHandler<DownloadRemoteAssetRequest, DownloadRemoteAssetResponse>;

package/dist/preview-server/routes/download-remote-asset.js

@@ -9,58 +9,9 @@ const node_fs_1 = require("node:fs");
 const node_net_1 = require("node:net");
 const node_path_1 = __importDefault(require("node:path"));
 const studio_shared_1 = require("@remotion/studio-shared");
+Object.defineProperty(exports, "getRemoteAssetFilename", { enumerable: true, get: function () { return studio_shared_1.getRemoteAssetFilename; } });
 const validate_same_origin_1 = require("../validate-same-origin");
-const maxRemoteAssetSize = 50 * 1024 * 1024;
-const remoteAssetDownloadTimeout = 15000;
 const maxRemoteAssetRedirects = 5;
-const remoteAssetAcceptHeader = 'image/png,image/apng,image/jpeg,image/webp,image/bmp,image/gif';
-const extensionsForFileType = {
-    png: ['png'],
-    apng: ['png', 'apng'],
-    jpeg: ['jpg', 'jpeg'],
-    webp: ['webp'],
-    bmp: ['bmp'],
-    gif: ['gif'],
-};
-const safeDecodeURIComponent = (value) => {
-    try {
-        return decodeURIComponent(value);
-    }
-    catch (_a) {
-        return value;
-    }
-};
-const sanitizeAssetFilename = (filename) => {
-    return Array.from(filename)
-        .map((character) => {
-        const charCode = character.charCodeAt(0);
-        return charCode <= 31 || '<>:"/\\|?*'.includes(character)
-            ? '-'
-            : character;
-    })
-        .join('')
-        .trim()
-        .replace(/^[. ]+|[. ]+$/g, '');
-};
-const getRemoteAssetFilename = ({ fileType, url, }) => {
-    const basename = safeDecodeURIComponent(node_path_1.default.posix.basename(url.pathname));
-    const sanitized = sanitizeAssetFilename(basename);
-    const filenameWithoutFallback = sanitized === '' ? 'image' : sanitized;
-    const extensions = extensionsForFileType[fileType.type];
-    const extension = node_path_1.default
-        .extname(filenameWithoutFallback)
-        .slice(1)
-        .toLowerCase();
-    if (extensions.includes(extension)) {
-        return filenameWithoutFallback;
-    }
-    const withoutExtension = extension
-        ? filenameWithoutFallback.slice(0, -(extension.length + 1))
-        : filenameWithoutFallback;
-    const safeName = withoutExtension === '' ? 'image' : withoutExtension;
-    return `${safeName}.${extensions[0]}`;
-};
-exports.getRemoteAssetFilename = getRemoteAssetFilename;
 const isForbiddenIpv4Address = (address) => {
     const parts = address.split('.').map((part) => Number(part));
     if (parts.length !== 4 ||
@@ -131,7 +82,7 @@ const fetchRemoteAsset = async ({ signal, url, }) => {
         await ensureRemoteUrlIsAllowed(currentUrl);
         const response = await fetch(currentUrl, {
             headers: {
-                accept: remoteAssetAcceptHeader,
+                accept: studio_shared_1.remoteAssetAcceptHeader,
             },
             redirect: 'manual',
             signal,
@@ -153,13 +104,13 @@ const fetchRemoteAsset = async ({ signal, url, }) => {
 };
 const readRemoteAsset = async ({ response, abort, }) => {
     const contentLength = response.headers.get('content-length');
-    if (contentLength !== null && Number(contentLength) > maxRemoteAssetSize) {
+    if (contentLength !== null && Number(contentLength) > studio_shared_1.maxRemoteAssetSize) {
         abort();
         throw new Error('Remote asset exceeds the 50MB size limit');
     }
     if (!response.body) {
         const buffer = await response.arrayBuffer();
-        if (buffer.byteLength > maxRemoteAssetSize) {
+        if (buffer.byteLength > studio_shared_1.maxRemoteAssetSize) {
             throw new Error('Remote asset exceeds the 50MB size limit');
         }
         return new Uint8Array(buffer);
@@ -176,7 +127,7 @@ const readRemoteAsset = async ({ response, abort, }) => {
             continue;
         }
         size += value.byteLength;
-        if (size > maxRemoteAssetSize) {
+        if (size > studio_shared_1.maxRemoteAssetSize) {
             abort();
             await reader.cancel();
             throw new Error('Remote asset exceeds the 50MB size limit');
@@ -203,7 +154,7 @@ const downloadRemoteAssetHandler = async ({ input, publicDir, request }) => {
     const controller = new AbortController();
     const timeout = setTimeout(() => {
         controller.abort();
-    }, remoteAssetDownloadTimeout);
+    }, studio_shared_1.remoteAssetDownloadTimeout);
     let contents;
     try {
         const response = await fetchRemoteAsset({
@@ -231,7 +182,7 @@ const downloadRemoteAssetHandler = async ({ input, publicDir, request }) => {
     if (!(0, studio_shared_1.isImageFileType)(fileType)) {
         throw new Error('Remote asset is not a supported image');
     }
-    const assetPath = (0, exports.getRemoteAssetFilename)({ fileType, url });
+    const assetPath = (0, studio_shared_1.getRemoteAssetFilename)({ fileType, url });
     const absolutePath = node_path_1.default.join(publicDir, assetPath);
     const relativeToPublicDir = node_path_1.default.relative(publicDir, absolutePath);
     if (relativeToPublicDir.startsWith('..') ||
@@ -252,20 +203,7 @@ const downloadRemoteAssetHandler = async ({ input, publicDir, request }) => {
         (0, node_fs_1.mkdirSync)(node_path_1.default.dirname(absolutePath), { recursive: true });
         (0, node_fs_1.writeFileSync)(absolutePath, contents);
     }
-    const element = {
-        type: 'asset',
-        assetType: fileType.type === 'gif'
-            ? 'gif'
-            : fileType.type === 'apng' ||
-                (fileType.type === 'webp' && fileType.animated)
-                ? 'animated-image'
-                : 'image',
-        src: assetPath,
-        srcType: 'static',
-        dimensions: fileType.dimensions,
-        durationInFrames: null,
-        position: null,
-    };
+    const element = (0, studio_shared_1.getRemoteAssetElement)({ assetPath, fileType });
     return {
         assetPath,
         sizeInBytes: contents.byteLength,

package/dist/preview-server/routes/remotion-skills-info.js

@@ -8,15 +8,25 @@ const node_fs_1 = require("node:fs");
 const node_os_1 = require("node:os");
 const node_path_1 = __importDefault(require("node:path"));
 const detect_outdated_remotion_skills_1 = require("../../detect-outdated-remotion-skills");
+const remotion_skill_names_1 = require("../../remotion-skill-names");
 const getRemotionSkillsInfo = ({ remotionRoot, homeDirectory = (0, node_os_1.homedir)(), }) => {
     const skillsDirectories = (0, detect_outdated_remotion_skills_1.getRemotionSkillsDirectories)({
         cwd: remotionRoot,
         homeDirectory,
     });
-    const isSkillAvailable = (skillName) => Object.values(skillsDirectories).some((skillsDirectory) => (0, node_fs_1.existsSync)(node_path_1.default.join(skillsDirectory, skillName, 'SKILL.md')));
+    const skills = remotion_skill_names_1.remotionSkillNames.map((name) => ({
+        name,
+        installedInProject: (0, node_fs_1.existsSync)(node_path_1.default.join(skillsDirectories.project, name, 'SKILL.md')),
+        installedGlobally: (0, node_fs_1.existsSync)(node_path_1.default.join(skillsDirectories.global, name, 'SKILL.md')),
+    }));
+    const isSkillAvailable = (skillName) => {
+        const skill = skills.find(({ name }) => name === skillName);
+        return Boolean((skill === null || skill === void 0 ? void 0 : skill.installedInProject) || (skill === null || skill === void 0 ? void 0 : skill.installedGlobally));
+    };
     return {
         remotionUpgradeSkillAvailable: isSkillAvailable('remotion-upgrade'),
         remotionInteractivitySkillAvailable: isSkillAvailable('remotion-interactivity'),
+        skills,
     };
 };
 exports.getRemotionSkillsInfo = getRemotionSkillsInfo;

package/dist/preview-server/serve-static.d.ts

@@ -6,10 +6,11 @@
  * MIT Licensed
  */
 import type { IncomingMessage, ServerResponse } from 'node:http';
-export declare const serveStatic: ({ root, path, req, res, allowOutsidePublicFolder, }: {
+export declare const serveStatic: ({ root, path, req, res, allowOutsidePublicFolder, allowRemotionConvertCors, }: {
     root: string;
     path: string;
     req: IncomingMessage;
     res: ServerResponse<IncomingMessage>;
     allowOutsidePublicFolder: boolean;
+    allowRemotionConvertCors: boolean;
 }) => Promise<void>;

package/dist/preview-server/serve-static.js

@@ -12,7 +12,36 @@ const node_fs_1 = require("node:fs");
 const renderer_1 = require("@remotion/renderer");
 const middleware_1 = require("./dev-middleware/middleware");
 const range_parser_1 = require("./dev-middleware/range-parser");
-const serveStatic = async function ({ root, path, req, res, allowOutsidePublicFolder, }) {
+const remotionConvertOrigins = [
+    'https://remotion.dev',
+    'https://www.remotion.dev',
+    'https://convert.remotion.dev',
+];
+const applyRemotionConvertCorsHeaders = ({ req, res, }) => {
+    const { origin } = req.headers;
+    if (!origin || !remotionConvertOrigins.includes(origin)) {
+        return false;
+    }
+    res.setHeader('Access-Control-Allow-Origin', origin);
+    res.setHeader('Vary', 'Origin, Access-Control-Request-Headers, Access-Control-Request-Private-Network');
+    res.setHeader('Access-Control-Allow-Methods', 'GET, HEAD, OPTIONS');
+    res.setHeader('Access-Control-Allow-Headers', 'Range, Content-Type');
+    res.setHeader('Access-Control-Expose-Headers', 'Accept-Ranges, Content-Length, Content-Range');
+    res.setHeader('Access-Control-Max-Age', '600');
+    if (req.headers['access-control-request-private-network']) {
+        res.setHeader('Access-Control-Allow-Private-Network', 'true');
+    }
+    return true;
+};
+const serveStatic = async function ({ root, path, req, res, allowOutsidePublicFolder, allowRemotionConvertCors, }) {
+    const remotionConvertCorsAllowed = allowRemotionConvertCors
+        ? applyRemotionConvertCorsHeaders({ req, res })
+        : false;
+    if (req.method === 'OPTIONS' && remotionConvertCorsAllowed) {
+        res.statusCode = 204;
+        res.end();
+        return;
+    }
     if (req.method !== 'GET' && req.method !== 'HEAD') {
         // method not allowed
         res.statusCode = 405;
@@ -43,6 +72,7 @@ const serveStatic = async function ({ root, path, req, res, allowOutsidePublicFo
             req,
             res,
             allowOutsidePublicFolder: true,
+            allowRemotionConvertCors,
         });
     }
     const isDirectory = lstat.isDirectory();

package/dist/routes.js

@@ -396,6 +396,7 @@ const handleRoutes = ({ staticHash, staticHashPrefix, outputHash, outputHashPref
             req: request,
             res: response,
             allowOutsidePublicFolder: false,
+            allowRemotionConvertCors: true,
         });
     }
     if (url.pathname.startsWith(staticHashPrefix)) {
@@ -410,6 +411,7 @@ const handleRoutes = ({ staticHash, staticHashPrefix, outputHash, outputHashPref
             req: request,
             res: response,
             allowOutsidePublicFolder: false,
+            allowRemotionConvertCors: false,
         });
     }
     if (url.pathname.startsWith(outputHashPrefix)) {

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.515",
+	"version": "4.0.516",
 	"description": "Run a Remotion Studio with a server backend",
 	"main": "dist",
 	"scripts": {
@@ -23,7 +23,7 @@
 		"access": "public"
 	},
 	"dependencies": {
-		"@remotion/studio-protocol": "4.0.515",
+		"@remotion/studio-protocol": "4.0.516",
 		"@babel/types": "7.24.0",
 		"@babel/parser": "7.24.1",
 		"@svgr/core": "8.1.0",
@@ -32,12 +32,12 @@
 		"semver": "7.5.3",
 		"zod": "4.4.3",
 		"prettier": "3.8.1",
-		"remotion": "4.0.515",
-		"recast": "0.23.11",
-		"@remotion/bundler": "4.0.515",
-		"@remotion/renderer": "4.0.515",
-		"@remotion/studio-codemods": "4.0.515",
-		"@remotion/studio-shared": "4.0.515",
+		"remotion": "4.0.516",
+		"recast": "0.23.21",
+		"@remotion/bundler": "4.0.516",
+		"@remotion/renderer": "4.0.516",
+		"@remotion/studio-codemods": "4.0.516",
+		"@remotion/studio-shared": "4.0.516",
 		"memfs": "3.4.3",
 		"open": "8.4.2"
 	},
@@ -45,7 +45,7 @@
 		"ast-types": "0.16.1",
 		"react": "19.2.3",
 		"@types/semver": "7.5.3",
-		"@remotion/eslint-config-internal": "4.0.515",
+		"@remotion/eslint-config-internal": "4.0.516",
 		"eslint": "9.19.0",
 		"@types/node": "20.12.14",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"