@remotion/studio-server 4.0.513 → 4.0.514

package/dist/index.d.ts

@@ -60,7 +60,8 @@ export declare const StudioServerInternals: {
         installCommand: string;
         startCommand: string;
     };
-    getMaxTimelineTracks: () => number;
+    getMaxTimelineTracks: () => number | null;
+    getConfiguredMaxTimelineTracks: () => number | null;
     setMaxTimelineTracks: (maxTracks: number) => void;
     resetMaxTimelineTracks: () => void;
     getLatestRemotionVersion: () => Promise<any>;
@@ -92,7 +93,7 @@ export declare const StudioServerInternals: {
         codeMod: import("@remotion/studio-shared").RecastCodemod;
     }) => {
         newContents: string;
-        changesMade: import("./codemods/recast-mods").Change[];
+        changesMade: import("@remotion/studio-codemods").Change[];
     };
     applyCodemodToFile: ({ filePath, codeMod, }: {
         filePath: string;

package/dist/index.js

@@ -32,6 +32,7 @@ exports.StudioServerInternals = {
     lockFilePaths: get_package_manager_1.lockFilePaths,
     getPackageManager: get_package_manager_1.getPackageManager,
     getMaxTimelineTracks: max_timeline_tracks_1.getMaxTimelineTracks,
+    getConfiguredMaxTimelineTracks: max_timeline_tracks_1.getConfiguredMaxTimelineTracks,
     setMaxTimelineTracks: max_timeline_tracks_1.setMaxTimelineTracks,
     resetMaxTimelineTracks: max_timeline_tracks_1.resetMaxTimelineTracks,
     getLatestRemotionVersion: get_latest_remotion_version_1.getLatestRemotionVersion,

package/dist/max-timeline-tracks.d.ts

@@ -1,3 +1,4 @@
 export declare const setMaxTimelineTracks: (maxTracks: number) => void;
-export declare const getMaxTimelineTracks: () => number;
+export declare const getMaxTimelineTracks: () => number | null;
+export declare const getConfiguredMaxTimelineTracks: () => number | null;
 export declare const resetMaxTimelineTracks: () => void;

package/dist/max-timeline-tracks.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.resetMaxTimelineTracks = exports.getMaxTimelineTracks = exports.setMaxTimelineTracks = void 0;
-const studio_shared_1 = require("@remotion/studio-shared");
-let maxTimelineTracks = studio_shared_1.DEFAULT_TIMELINE_TRACKS;
+exports.resetMaxTimelineTracks = exports.getConfiguredMaxTimelineTracks = exports.getMaxTimelineTracks = exports.setMaxTimelineTracks = void 0;
+let maxTimelineTracks = null;
+let configuredMaxTimelineTracks = null;
 const setMaxTimelineTracks = (maxTracks) => {
     if (typeof maxTracks !== 'number') {
         throw new Error(`Need to pass a number to Config.setMaxTimelineTracks(), got ${typeof maxTracks}`);
@@ -17,13 +17,19 @@ const setMaxTimelineTracks = (maxTracks) => {
         throw new Error(`Need to pass a non-negative number to Config.setMaxTimelineTracks(), got ${maxTracks}`);
     }
     maxTimelineTracks = maxTracks;
+    configuredMaxTimelineTracks = maxTracks;
 };
 exports.setMaxTimelineTracks = setMaxTimelineTracks;
 const getMaxTimelineTracks = () => {
     return maxTimelineTracks;
 };
 exports.getMaxTimelineTracks = getMaxTimelineTracks;
+const getConfiguredMaxTimelineTracks = () => {
+    return configuredMaxTimelineTracks;
+};
+exports.getConfiguredMaxTimelineTracks = getConfiguredMaxTimelineTracks;
 const resetMaxTimelineTracks = () => {
-    maxTimelineTracks = studio_shared_1.DEFAULT_TIMELINE_TRACKS;
+    maxTimelineTracks = null;
+    configuredMaxTimelineTracks = null;
 };
 exports.resetMaxTimelineTracks = resetMaxTimelineTracks;

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

@@ -37,6 +37,7 @@ const prepare_element_install_1 = require("./routes/prepare-element-install");
 const project_info_1 = require("./routes/project-info");
 const redo_1 = require("./routes/redo");
 const register_client_render_1 = require("./routes/register-client-render");
+const remotion_skills_info_1 = require("./routes/remotion-skills-info");
 const remove_render_1 = require("./routes/remove-render");
 const rename_static_file_1 = require("./routes/rename-static-file");
 const reorder_effect_1 = require("./routes/reorder-effect");
@@ -46,6 +47,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 split_jsx_sequence_1 = require("./routes/split-jsx-sequence");
+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");
 const subscribe_to_sequence_props_1 = require("./routes/subscribe-to-sequence-props");
@@ -104,7 +106,9 @@ exports.allApiRoutes = {
     '/api/delete-jsx-node': delete_jsx_node_1.deleteJsxNodeHandler,
     '/api/duplicate-jsx-node': duplicate_jsx_node_1.duplicateJsxNodeHandler,
     '/api/split-jsx-sequence': split_jsx_sequence_1.splitJsxSequenceHandler,
+    '/api/split-video-from-audio': split_video_from_audio_1.splitVideoFromAudioHandler,
     '/api/update-available': update_available_1.handleUpdate,
+    '/api/remotion-skills-info': remotion_skills_info_1.remotionSkillsInfoHandler,
     '/api/project-info': project_info_1.projectInfoHandler,
     '/api/delete-static-file': delete_static_file_1.deleteStaticFileHandler,
     '/api/rename-static-file': rename_static_file_1.renameStaticFileHandler,

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

@@ -55,7 +55,7 @@ const addEffectHandler = ({ input: { fileName, sequenceNodePath, effectName, eff
                 absolutePath,
                 line: logLine,
             });
-            renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} Added ${(0, formatting_1.attrName)(effectLabel)} to ${nodeLabel}`);
+            renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${(0, source_file_write_queue_1.getCodemodTimingPrefix)(logLevel)}${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} Added ${(0, formatting_1.attrName)(effectLabel)} to ${nodeLabel}`);
             if (!formatted) {
                 (0, log_update_1.warnAboutPrettierOnce)(logLevel);
             }

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

@@ -7,10 +7,10 @@ exports.applyCodemodHandler = exports.getCodemodLogMessage = 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_codemods_1 = require("@remotion/studio-codemods");
 const generate_canvas_capture_composition_1 = require("../../canvas-capture/generate-canvas-capture-composition");
 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 format_log_file_location_1 = require("../format-log-file-location");
 const project_info_1 = require("../project-info");
@@ -194,7 +194,7 @@ const applyCodemodHandler = ({ input: { codemod, dryRun, symbolicatedStack }, lo
                 filePath,
                 codeMod: codemod,
             });
-            const diff = (0, simple_diff_1.simpleDiff)({
+            const diff = (0, studio_codemods_1.simpleDiff)({
                 oldLines: input.split('\n'),
                 newLines: formatted.split('\n'),
             });
@@ -272,7 +272,7 @@ const applyCodemodHandler = ({ input: { codemod, dryRun, symbolicatedStack }, lo
                     });
                 }
                 const logMessage = (0, exports.getCodemodLogMessage)(codemod);
-                const editMessage = `${renderer_1.RenderInternals.chalk.blueBright((0, format_log_file_location_1.formatLogFileLocation)({
+                const editMessage = `${(0, source_file_write_queue_1.getCodemodTimingPrefix)(logLevel)}${renderer_1.RenderInternals.chalk.blueBright((0, format_log_file_location_1.formatLogFileLocation)({
                     remotionRoot,
                     absolutePath: filePath,
                     line: logLine,

package/dist/preview-server/routes/apply-visual-control-change.js

@@ -36,9 +36,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.applyVisualControlHandler = void 0;
 const node_fs_1 = require("node:fs");
 const renderer_1 = require("@remotion/renderer");
+const studio_codemods_1 = require("@remotion/studio-codemods");
 const recast = __importStar(require("recast"));
 const parse_ast_1 = require("../../codemods/parse-ast");
-const recast_mods_1 = require("../../codemods/recast-mods");
 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");
@@ -78,7 +78,7 @@ const applyVisualControlHandler = ({ input: { fileName, changes }, remotionRoot,
         const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
         const ast = (0, parse_ast_1.parseAst)(fileContents);
         const logLine = changes.length > 0 ? getVisualControlChangeLine(ast, changes[0].id) : 1;
-        const { newAst, changesMade } = (0, recast_mods_1.applyCodemod)({
+        const { newAst, changesMade } = (0, studio_codemods_1.applyCodemod)({
             file: ast,
             codeMod: {
                 type: 'apply-visual-control',
@@ -150,7 +150,7 @@ const applyVisualControlHandler = ({ input: { fileName, changes }, remotionRoot,
             absolutePath,
             line: logLine,
         });
-        renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} Applied visual control changes`);
+        renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${(0, source_file_write_queue_1.getCodemodTimingPrefix)(logLevel)}${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} Applied visual control changes`);
         if (!formatted) {
             (0, log_update_1.warnAboutPrettierOnce)(logLevel);
         }

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

@@ -603,12 +603,8 @@ const getFrameDisplayOffsetAdjustmentBetweenPaths = ({ startPath, endPath, video
     }
     return current ? { adjustment, hasEnclosingElement } : null;
 };
-const getDefaultFrameDisplayOffsetAdjustment = ({ jsxElement, ast, videoConfigValues, }) => {
+const getDefaultFrameDisplayOffsetAdjustment = ({ jsxPath, videoConfigValues, }) => {
     var _a;
-    const jsxPath = findNodePath(ast, jsxElement);
-    if (!jsxPath) {
-        return null;
-    }
     let functionPath = jsxPath.parentPath;
     while (functionPath) {
         const node = functionPath.value;
@@ -629,15 +625,50 @@ const getDefaultFrameDisplayOffsetAdjustment = ({ jsxElement, ast, videoConfigVa
     });
     return (_a = result === null || result === void 0 ? void 0 : result.adjustment) !== null && _a !== void 0 ? _a : null;
 };
-const getCurrentFrameDisplayOffsetAdjustment = ({ node, ast, videoConfigValues, }) => {
+const resolveCurrentFrameExpression = ({ node, ast, seenDeclarations, }) => {
     var _a;
     if (node.type === 'TSAsExpression') {
-        return getCurrentFrameDisplayOffsetAdjustment({
+        return resolveCurrentFrameExpression({
             node: node.expression,
             ast,
-            videoConfigValues,
+            seenDeclarations,
         });
     }
+    if (node.type === 'BinaryExpression' &&
+        (node.operator === '+' || node.operator === '-')) {
+        const rightValue = getNumericValue(node.right);
+        if (rightValue !== null && Number.isFinite(rightValue)) {
+            const resolvedLeft = resolveCurrentFrameExpression({
+                node: node.left,
+                ast,
+                seenDeclarations,
+            });
+            if (resolvedLeft !== null) {
+                return {
+                    ...resolvedLeft,
+                    offset: resolvedLeft.offset +
+                        (node.operator === '+' ? rightValue : -rightValue),
+                };
+            }
+        }
+        if (node.operator === '+') {
+            const leftValue = getNumericValue(node.left);
+            if (leftValue !== null && Number.isFinite(leftValue)) {
+                const resolvedRight = resolveCurrentFrameExpression({
+                    node: node.right,
+                    ast,
+                    seenDeclarations,
+                });
+                if (resolvedRight !== null) {
+                    return {
+                        ...resolvedRight,
+                        offset: resolvedRight.offset + leftValue,
+                    };
+                }
+            }
+        }
+        return null;
+    }
     if (node.type !== 'Identifier') {
         return null;
     }
@@ -647,7 +678,9 @@ const getCurrentFrameDisplayOffsetAdjustment = ({ node, ast, videoConfigValues,
         return null;
     }
     let matchingDeclarations = 0;
-    let isCurrentFrameBinding = false;
+    let matchingDeclaration = null;
+    let initializer = null;
+    let isConstDeclaration = false;
     recast.types.visit(bindingScope.path, {
         visitVariableDeclarator(p) {
             var _a;
@@ -658,18 +691,68 @@ const getCurrentFrameDisplayOffsetAdjustment = ({ node, ast, videoConfigValues,
                 return this.traverse(p);
             }
             matchingDeclarations++;
-            isCurrentFrameBinding = Boolean(init && isUseCurrentFrameCall(init, ast));
+            const declaration = p.parentPath.node;
+            if (init) {
+                matchingDeclaration = p.node;
+                initializer = init;
+                isConstDeclaration =
+                    declaration.type === 'VariableDeclaration' &&
+                        declaration.kind === 'const';
+            }
             return false;
         },
     });
-    if (matchingDeclarations !== 1 || !isCurrentFrameBinding) {
+    if (matchingDeclarations !== 1 ||
+        matchingDeclaration === null ||
+        initializer === null ||
+        seenDeclarations.has(matchingDeclaration)) {
+        return null;
+    }
+    if (isUseCurrentFrameCall(initializer, ast)) {
+        return { bindingScopePath: bindingScope.path, offset: 0 };
+    }
+    if (!isConstDeclaration) {
+        return null;
+    }
+    const nextSeenDeclarations = new Set(seenDeclarations);
+    nextSeenDeclarations.add(matchingDeclaration);
+    return resolveCurrentFrameExpression({
+        node: initializer,
+        ast,
+        seenDeclarations: nextSeenDeclarations,
+    });
+};
+const getCurrentFrameDisplayOffsetAdjustment = ({ node, ast, videoConfigValues, }) => {
+    if (node.type === 'TSAsExpression') {
+        return getCurrentFrameDisplayOffsetAdjustment({
+            node: node.expression,
+            ast,
+            videoConfigValues,
+        });
+    }
+    const nodePath = findNodePath(ast, node);
+    const resolved = resolveCurrentFrameExpression({
+        node,
+        ast,
+        seenDeclarations: new Set(),
+    });
+    if (!nodePath || resolved === null) {
         return null;
     }
-    return getFrameDisplayOffsetAdjustmentBetweenPaths({
+    const frameDisplayOffset = getFrameDisplayOffsetAdjustmentBetweenPaths({
         startPath: nodePath,
-        endPath: bindingScope.path,
+        endPath: resolved.bindingScopePath,
         videoConfigValues,
     });
+    if (frameDisplayOffset === null) {
+        return null;
+    }
+    return {
+        ...frameDisplayOffset,
+        // interpolate(frame + offset, [keyframe], ...) reaches the keyframe at
+        // composition frame `keyframe - offset`.
+        adjustment: frameDisplayOffset.adjustment - resolved.offset,
+    };
 };
 const getComputedStatus = (node, ast, videoConfigValues) => {
     const interpolation = getInterpolationKeyframes(node, ast, videoConfigValues);
@@ -769,17 +852,17 @@ const findJsxElementAtNodePath = (ast, nodePath) => {
     return current ? current.value : null;
 };
 exports.findJsxElementAtNodePath = findJsxElementAtNodePath;
-const findJsxElementNodeAtNodePath = (ast, nodePath) => {
+const getJsxElementNodeFromJsxPath = (jsxPath) => {
     var _a;
-    const current = (0, exports.findJsxElementPathAtNodePath)(ast, nodePath);
-    if (!current) {
-        return null;
-    }
-    if (recast.types.namedTypes.JSXElement.check((_a = current.parentPath) === null || _a === void 0 ? void 0 : _a.value)) {
-        return current.parentPath.value;
+    if (recast.types.namedTypes.JSXElement.check((_a = jsxPath.parentPath) === null || _a === void 0 ? void 0 : _a.value)) {
+        return jsxPath.parentPath.value;
     }
     return null;
 };
+const findJsxElementNodeAtNodePath = (ast, nodePath) => {
+    const current = (0, exports.findJsxElementPathAtNodePath)(ast, nodePath);
+    return current ? getJsxElementNodeFromJsxPath(current) : null;
+};
 exports.findJsxElementNodeAtNodePath = findJsxElementNodeAtNodePath;
 const findJsxChildrenAttribute = (jsxElement) => {
     const childrenAttr = jsxElement.attributes.find((attr) => {
@@ -1175,9 +1258,10 @@ const computeSequenceOnlyPropsRecord = ({ jsxElement, jsxElementNode, ast, keys,
 };
 const computeSequencePropsStatusFromAstAndIdentifiers = ({ ast, nodePath, componentIdentity, keys, assetKeys, effects, videoConfigIdentifierValues, }) => {
     var _a;
-    const jsxElementNode = (0, exports.findJsxElementNodeAtNodePath)(ast, nodePath);
+    const jsxPath = (0, exports.findJsxElementPathAtNodePath)(ast, nodePath);
+    const jsxElementNode = jsxPath ? getJsxElementNodeFromJsxPath(jsxPath) : null;
     const jsxElement = (_a = jsxElementNode === null || jsxElementNode === void 0 ? void 0 : jsxElementNode.openingElement) !== null && _a !== void 0 ? _a : null;
-    if (!jsxElement || !jsxElementNode) {
+    if (!jsxPath || !jsxElement || !jsxElementNode) {
         throw new jsx_element_not_found_at_location_error_1.JsxElementNotFoundAtLocationError();
     }
     if (!(0, jsx_component_identity_1.jsxComponentIdentitiesMatch)({
@@ -1201,8 +1285,7 @@ const computeSequencePropsStatusFromAstAndIdentifiers = ({ ast, nodePath, compon
         videoConfigValues: videoConfigIdentifierValues,
     });
     const defaultKeyframeDisplayOffsetAdjustment = getDefaultFrameDisplayOffsetAdjustment({
-        jsxElement,
-        ast,
+        jsxPath,
         videoConfigValues: videoConfigIdentifierValues,
     });
     const addDefaultKeyframeDisplayOffsetAdjustment = (status) => {

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

@@ -90,7 +90,7 @@ const deleteEffectHandler = ({ input: effects, remotionRoot, logLevel }) => {
                     absolutePath: update.absolutePath,
                     line: update.logLine,
                 });
-                renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} ${(0, formatting_1.strikeThroughOrRemovedPrefix)(deletedEffectDescription)}`);
+                renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${(0, source_file_write_queue_1.getCodemodTimingPrefix)(logLevel)}${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} ${(0, formatting_1.strikeThroughOrRemovedPrefix)(deletedEffectDescription)}`);
                 if (!update.formatted) {
                     (0, log_update_1.warnAboutPrettierOnce)(logLevel);
                 }

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

@@ -87,7 +87,7 @@ const deleteJsxNodeHandler = ({ input: { nodes }, remotionRoot, logLevel }) => {
                     absolutePath: update.absolutePath,
                     line: update.logLine,
                 });
-                renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} Deleted ${deletedNodeDescription}`);
+                renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${(0, source_file_write_queue_1.getCodemodTimingPrefix)(logLevel)}${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} Deleted ${deletedNodeDescription}`);
                 if (!update.formatted) {
                     (0, log_update_1.warnAboutPrettierOnce)(logLevel);
                 }

package/dist/preview-server/routes/duplicate-effect.js

@@ -84,7 +84,7 @@ const duplicateEffectHandler = ({ input: effects, remotionRoot, logLevel }) => {
                     absolutePath: update.absolutePath,
                     line: update.logLine,
                 });
-                renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} Duplicated ${(0, formatting_1.attrName)(duplicatedEffectDescription)}`);
+                renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${(0, source_file_write_queue_1.getCodemodTimingPrefix)(logLevel)}${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} Duplicated ${(0, formatting_1.attrName)(duplicatedEffectDescription)}`);
                 if (!update.formatted) {
                     (0, log_update_1.warnAboutPrettierOnce)(logLevel);
                 }

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

@@ -56,7 +56,7 @@ const duplicateJsxNodeHandler = ({ input: { fileName, nodePath }, remotionRoot,
                 absolutePath,
                 line: logLine,
             });
-            renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} Duplicated ${nodeLabel}`);
+            renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${(0, source_file_write_queue_1.getCodemodTimingPrefix)(logLevel)}${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} Duplicated ${nodeLabel}`);
             if (!formatted) {
                 (0, log_update_1.warnAboutPrettierOnce)(logLevel);
             }

package/dist/preview-server/routes/element-install-plan.d.ts

@@ -25,7 +25,7 @@ export declare const getElementInstallPlan: ({ compositionFile, compositionId, e
     expectedFileState: ElementInstallExpectedFileState;
     filePath: string;
     importPath: string;
-    location: import("../../helpers/resolve-composition-component").ResolvedCompositionComponentWithFile;
+    location: import("@remotion/studio-codemods").ResolvedCompositionComponentWithFile;
     safePaths: {
         compositionFileName: string;
         elementFileName: string;

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

@@ -197,8 +197,8 @@ const insertElementHandler = ({ input: { compositionFile, compositionId, element
             : plan.elementFileExists
                 ? 'Reused existing Element source'
                 : 'Created Element source';
-        renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(elementLocationLabel)} ${elementFileAction}`);
-        renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(compositionLocationLabel)} Added <${plan.componentName}>`);
+        renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${(0, source_file_write_queue_1.getCodemodTimingPrefix)(logLevel)}${renderer_1.RenderInternals.chalk.blueBright(elementLocationLabel)} ${elementFileAction}`);
+        renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${(0, source_file_write_queue_1.getCodemodTimingPrefix)(logLevel)}${renderer_1.RenderInternals.chalk.blueBright(compositionLocationLabel)} Added <${plan.componentName}>`);
         if (!inserted.formatted) {
             (0, log_update_1.warnAboutPrettierOnce)(logLevel);
         }

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

@@ -204,7 +204,7 @@ const insertJsxElementHandler = ({ input: { compositionFile, compositionId, elem
             absolutePath: fileName,
             line: logLine,
         });
-        renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} Added ${elementLabel}`);
+        renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${(0, source_file_write_queue_1.getCodemodTimingPrefix)(logLevel)}${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} Added ${elementLabel}`);
         if (!formatted) {
             (0, log_update_1.warnAboutPrettierOnce)(logLevel);
         }

package/dist/preview-server/routes/log-updates/log-effect-update.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.logEffectUpdate = void 0;
 const renderer_1 = require("@remotion/renderer");
+const source_file_write_queue_1 = require("../source-file-write-queue");
 const format_effect_prop_change_1 = require("./format-effect-prop-change");
 const log_update_1 = require("./log-update");
 const logEffectUpdate = ({ fileRelativeToRoot, line, effectName, propKey, oldValueString, newValueString, defaultValueString, formatted, logLevel, removedProps, addedProps, }) => {
@@ -15,7 +16,7 @@ const logEffectUpdate = ({ fileRelativeToRoot, line, effectName, propKey, oldVal
         removedProps,
         addedProps,
     });
-    renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} ${propChange}`);
+    renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${(0, source_file_write_queue_1.getCodemodTimingPrefix)(logLevel)}${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} ${propChange}`);
     if (!formatted) {
         (0, log_update_1.warnAboutPrettierOnce)(logLevel);
     }

package/dist/preview-server/routes/log-updates/log-update.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.logUpdate = exports.normalizeQuotes = exports.warnAboutPrettierOnce = void 0;
 const renderer_1 = require("@remotion/renderer");
+const source_file_write_queue_1 = require("../source-file-write-queue");
 const format_prop_change_1 = require("./format-prop-change");
 let warnedAboutPrettier = false;
 const warnAboutPrettierOnce = (logLevel) => {
@@ -31,7 +32,7 @@ const logUpdate = ({ fileRelativeToRoot, line, key, oldValueString, newValueStri
         removedProps,
         addedProps,
     });
-    renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} ${propChange}`);
+    renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${(0, source_file_write_queue_1.getCodemodTimingPrefix)(logLevel)}${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} ${propChange}`);
     if (!formatted) {
         (0, exports.warnAboutPrettierOnce)(logLevel);
     }

package/dist/preview-server/routes/paste-effects.js

@@ -66,7 +66,7 @@ const pasteEffectsHandler = ({ input: { targetFileName, targetSequenceNodePath,
                 absolutePath,
                 line: logLine,
             });
-            renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} Pasted ${(0, formatting_1.attrName)(effectDescription)}`);
+            renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${(0, source_file_write_queue_1.getCodemodTimingPrefix)(logLevel)}${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} Pasted ${(0, formatting_1.attrName)(effectDescription)}`);
             if (!formatted) {
                 (0, log_update_1.warnAboutPrettierOnce)(logLevel);
             }

package/dist/preview-server/routes/remotion-skills-info.d.ts

@@ -0,0 +1,7 @@
+import type { GetRemotionSkillsInfoRequest, GetRemotionSkillsInfoResponse } from '@remotion/studio-shared';
+import type { ApiHandler } from '../api-types';
+export declare const getRemotionSkillsInfo: ({ remotionRoot, homeDirectory, }: {
+    remotionRoot: string;
+    homeDirectory?: string | undefined;
+}) => GetRemotionSkillsInfoResponse;
+export declare const remotionSkillsInfoHandler: ApiHandler<GetRemotionSkillsInfoRequest, GetRemotionSkillsInfoResponse>;

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

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.remotionSkillsInfoHandler = exports.getRemotionSkillsInfo = void 0;
+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 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')));
+    return {
+        remotionUpgradeSkillAvailable: isSkillAvailable('remotion-upgrade'),
+        remotionInteractivitySkillAvailable: isSkillAvailable('remotion-interactivity'),
+    };
+};
+exports.getRemotionSkillsInfo = getRemotionSkillsInfo;
+const remotionSkillsInfoHandler = ({ remotionRoot }) => Promise.resolve((0, exports.getRemotionSkillsInfo)({ remotionRoot }));
+exports.remotionSkillsInfoHandler = remotionSkillsInfoHandler;

package/dist/preview-server/routes/reorder-effect.js

@@ -54,7 +54,7 @@ const reorderEffectHandler = ({ input: { fileName, sequenceNodePath, fromIndex,
                 absolutePath,
                 line: logLine,
             });
-            renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} Reordered ${(0, formatting_1.attrName)(effectLabel)}`);
+            renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${(0, source_file_write_queue_1.getCodemodTimingPrefix)(logLevel)}${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} Reordered ${(0, formatting_1.attrName)(effectLabel)}`);
             if (!formatted) {
                 (0, log_update_1.warnAboutPrettierOnce)(logLevel);
             }

package/dist/preview-server/routes/reorder-sequence.js

@@ -62,7 +62,7 @@ const reorderSequenceHandler = ({ input: { fileName, sourceNodePath, targetNodeP
                 absolutePath,
                 line: logLine,
             });
-            renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} Reordered ${(0, formatting_1.attrName)(sequenceLabel)}`);
+            renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${(0, source_file_write_queue_1.getCodemodTimingPrefix)(logLevel)}${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} Reordered ${(0, formatting_1.attrName)(sequenceLabel)}`);
             if (!formatted) {
                 (0, log_update_1.warnAboutPrettierOnce)(logLevel);
             }

package/dist/preview-server/routes/source-file-write-queue.d.ts

@@ -1 +1,2 @@
+export declare const getCodemodTimingPrefix: (logLevel: "error" | "info" | "trace" | "verbose" | "warn") => string;
 export declare const withSourceFileWriteQueue: <T>(fn: () => Promise<T>) => Promise<T>;

package/dist/preview-server/routes/source-file-write-queue.js

@@ -1,9 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.withSourceFileWriteQueue = void 0;
+exports.withSourceFileWriteQueue = exports.getCodemodTimingPrefix = void 0;
+const node_async_hooks_1 = require("node:async_hooks");
 let chain = Promise.resolve();
+const codemodStartTime = new node_async_hooks_1.AsyncLocalStorage();
+const getCodemodTimingPrefix = (logLevel) => {
+    const startTime = codemodStartTime.getStore();
+    return logLevel === 'trace' && startTime !== undefined
+        ? `[${Date.now() - startTime}ms] `
+        : '';
+};
+exports.getCodemodTimingPrefix = getCodemodTimingPrefix;
 const withSourceFileWriteQueue = (fn) => {
-    const run = () => fn();
+    const run = () => codemodStartTime.run(Date.now(), fn);
     const next = chain.then(run, run);
     chain = next.then(() => undefined, () => undefined);
     return next;

package/dist/preview-server/routes/split-jsx-sequence.js

@@ -60,7 +60,7 @@ const splitJsxSequenceHandler = ({ input: { fileName, nodePath, sequenceKeys, sp
             absolutePath,
             line: logLine,
         });
-        renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} Split ${nodeLabel}`);
+        renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${(0, source_file_write_queue_1.getCodemodTimingPrefix)(logLevel)}${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} Split ${nodeLabel}`);
         if (!formatted) {
             (0, log_update_1.warnAboutPrettierOnce)(logLevel);
         }

package/dist/preview-server/routes/split-video-from-audio.d.ts

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