@remotion/studio-server 4.0.533 → 4.0.534

package/dist/helpers/video-config-values.js

@@ -33,24 +33,14 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getVideoConfigIdentifierValues = void 0;
+exports.getVideoConfigIdentifierValues = exports.getVideoConfigIdentifiers = void 0;
 const recast = __importStar(require("recast"));
-const getVideoConfigIdentifierValues = ({ ast, videoConfigValues, }) => {
+const getVideoConfigIdentifiers = ({ ast, }) => {
     const candidates = new Map();
-    const otherDeclarations = new Set();
-    const addCandidate = (identifier, value) => {
-        if (candidates.has(identifier) || otherDeclarations.has(identifier)) {
-            candidates.delete(identifier);
-            otherDeclarations.add(identifier);
-            return;
-        }
-        candidates.set(identifier, value);
-    };
     recast.types.visit(ast, {
         visitVariableDeclarator(path) {
             const { id, init } = path.node;
-            const isVideoConfigDeclaration = videoConfigValues !== null &&
-                id.type === 'ObjectPattern' &&
+            const isVideoConfigDeclaration = id.type === 'ObjectPattern' &&
                 (init === null || init === void 0 ? void 0 : init.type) === 'CallExpression' &&
                 init.callee.type === 'Identifier' &&
                 init.callee.name === 'useVideoConfig' &&
@@ -67,13 +57,16 @@ const getVideoConfigIdentifierValues = ({ ast, videoConfigValues, }) => {
                         : property.key.type === 'StringLiteral'
                             ? property.key.value
                             : null;
-                    if (configKey === null || !(configKey in videoConfigValues)) {
+                    if (configKey !== 'durationInFrames' &&
+                        configKey !== 'fps' &&
+                        configKey !== 'width' &&
+                        configKey !== 'height') {
                         continue;
                     }
-                    const value = videoConfigValues[configKey];
-                    if (Number.isFinite(value)) {
-                        addCandidate(property.value.name, value);
-                    }
+                    candidates.set(property.value, {
+                        type: 'video-config',
+                        field: configKey,
+                    });
                 }
             }
             else if (id.type === 'Identifier') {
@@ -85,19 +78,42 @@ const getVideoConfigIdentifierValues = ({ ast, videoConfigValues, }) => {
                     ? init.value
                     : null;
                 if (numericConstant !== null) {
-                    addCandidate(id.name, numericConstant);
+                    candidates.set(id, {
+                        type: 'constant',
+                        value: numericConstant,
+                    });
                 }
-                else {
-                    candidates.delete(id.name);
-                    otherDeclarations.add(id.name);
+            }
+            this.traverse(path);
+        },
+    });
+    // Resolve each reference to its declaration. Components may independently
+    // declare the same name, while parameters and other shadowing stay computed.
+    const bindings = new Map();
+    recast.types.visit(ast, {
+        visitIdentifier(path) {
+            var _a;
+            var _b;
+            const declarations = (_b = (_a = path.scope.lookup(path.node.name)) === null || _a === void 0 ? void 0 : _a.getBindings()[path.node.name]) !== null && _b !== void 0 ? _b : [];
+            if (declarations.length === 1) {
+                const binding = candidates.get(declarations[0].node);
+                if (binding !== undefined) {
+                    bindings.set(path.node, binding);
                 }
             }
             this.traverse(path);
         },
     });
-    for (const identifier of otherDeclarations) {
-        candidates.delete(identifier);
-    }
-    return Object.fromEntries(candidates);
+    return bindings;
 };
+exports.getVideoConfigIdentifiers = getVideoConfigIdentifiers;
+// Editing uses the current instance's configuration supplied with the mutation.
+const getVideoConfigIdentifierValues = ({ ast, videoConfigValues, }) => new Map([...(0, exports.getVideoConfigIdentifiers)({ ast })].flatMap(([identifier, binding]) => {
+    if (binding.type === 'constant')
+        return [[identifier, binding]];
+    const value = videoConfigValues === null || videoConfigValues === void 0 ? void 0 : videoConfigValues[binding.field];
+    return value === undefined || !Number.isFinite(value)
+        ? []
+        : [[identifier, { type: 'constant', value }]];
+}));
 exports.getVideoConfigIdentifierValues = getVideoConfigIdentifierValues;

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

@@ -58,6 +58,7 @@ const restart_studio_1 = require("./routes/restart-studio");
 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 shared_memory_capture_support_1 = require("./routes/shared-memory-capture-support");
 const shutdown_studio_1 = require("./routes/shutdown-studio");
 const split_sequences_1 = require("./routes/split-sequences");
 const split_video_from_audio_1 = require("./routes/split-video-from-audio");
@@ -79,6 +80,7 @@ const update_sequence_keyframe_settings_1 = require("./routes/update-sequence-ke
 const upgrade_remotion_1 = require("./routes/upgrade-remotion");
 const wrap_node_1 = require("./routes/wrap-node");
 exports.allApiRoutes = {
+    '/api/shared-memory-capture-support': shared_memory_capture_support_1.sharedMemoryCaptureSupportHandler,
     '/api/invalidate-bundle': invalidate_bundle_1.invalidateBundleHandler,
     '/api/composition-component-info': composition_component_info_1.compositionComponentInfoHandler,
     '/api/copy-render-output-to-asset': copy_render_output_to_asset_1.copyRenderOutputToAssetHandler,
@@ -142,6 +144,8 @@ exports.allApiRoutes = {
     '/api/remotion-skills-info': remotion_skills_info_1.remotionSkillsInfoHandler,
     '/api/install-remotion-skill': install_remotion_skill_1.installRemotionSkillHandler,
     '/api/remove-remotion-skill': install_remotion_skill_1.removeRemotionSkillHandler,
+    '/api/upgrade-remotion-skill': install_remotion_skill_1.upgradeRemotionSkillHandler,
+    '/api/open-remotion-skill': remotion_skills_info_1.openRemotionSkillHandler,
     '/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-sequence-keyframe.js

@@ -83,7 +83,6 @@ const addSequenceKeyframeHandler = ({ input: { fileName, nodePath, key, frame, v
         nodePath: updatedNodePath,
         componentIdentity: null,
         effects: [],
-        videoConfigValues: nodePath.videoConfigValues,
     });
     const updatedSubscriptionKey = { ...nodePath, nodePath: updatedNodePath };
     return {

package/dist/preview-server/routes/can-update-effect-props.d.ts

@@ -1,5 +1,5 @@
 import type { File, JSXOpeningElement } from '@babel/types';
-import type { CanUpdateEffectPropsResponse, SequenceNodePath, InteractivitySchema, VideoConfigValues } from 'remotion';
+import type { CanUpdateEffectPropsResponse, SequenceNodePath, InteractivitySchema } from 'remotion';
 import { type VideoConfigIdentifierValues } from '../../helpers/video-config-values';
 export declare const computeEffectPropStatus: ({ ast, jsx, effectIndex, keys, videoConfigValues, }: {
     ast: File;
@@ -8,18 +8,16 @@ export declare const computeEffectPropStatus: ({ ast, jsx, effectIndex, keys, vi
     keys: string[];
     videoConfigValues: VideoConfigIdentifierValues;
 }) => CanUpdateEffectPropsResponse;
-export declare const computeEffectPropsStatusesFromContent: ({ fileContents, sequenceNodePath, effects, keysFor, videoConfigValues, }: {
+export declare const computeEffectPropsStatusesFromContent: ({ fileContents, sequenceNodePath, effects, keysFor, }: {
     fileContents: string;
     sequenceNodePath: SequenceNodePath;
     effects: InteractivitySchema[];
     keysFor: (effect: InteractivitySchema) => string[];
-    videoConfigValues: VideoConfigValues | null;
-}) => CanUpdateEffectPropsResponse[];
-export declare const computeEffectPropsStatusesFromFile: ({ fileName, sequenceNodePath, effects, keysFor, remotionRoot, videoConfigValues, }: {
+}) => CanUpdateEffectPropsResponse<import("remotion").SourceNumericValue>[];
+export declare const computeEffectPropsStatusesFromFile: ({ fileName, sequenceNodePath, effects, keysFor, remotionRoot, }: {
     fileName: string;
     sequenceNodePath: SequenceNodePath;
     effects: InteractivitySchema[];
     keysFor: (effect: InteractivitySchema) => string[];
     remotionRoot: string;
-    videoConfigValues: VideoConfigValues | null;
 }) => CanUpdateEffectPropsResponse[];

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

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.computeEffectPropsStatusesFromFile = exports.computeEffectPropsStatusesFromContent = exports.computeEffectPropStatus = void 0;
 const node_fs_1 = require("node:fs");
-const parse_ast_1 = require("../../codemods/parse-ast");
+const codemods_1 = require("@remotion/codemods");
+const no_react_1 = require("remotion/no-react");
 const update_effect_props_1 = require("../../codemods/update-effect-props/update-effect-props");
 const resolve_file_inside_project_1 = require("../../helpers/resolve-file-inside-project");
 const video_config_numeric_expression_1 = require("../../helpers/video-config-numeric-expression");
-const video_config_values_1 = require("../../helpers/video-config-values");
 const can_update_sequence_props_1 = require("./can-update-sequence-props");
 const staticStatus = (codeValue) => ({
     status: 'static',
@@ -112,7 +112,7 @@ const getPropsFromObjectExpression = ({ ast, objExpr, keys, videoConfigValues, }
                 ? {
                     status: 'static',
                     keyframeDisplayOffsetAdjustment: null,
-                    codeValue: numericExpression.value,
+                    codeValue: no_react_1.NoReactInternals.evaluateSourceNumericValue(numericExpression, null),
                     ...(numericExpression.type === 'literal'
                         ? {}
                         : { numericExpression }),
@@ -195,30 +195,8 @@ const computeEffectPropStatus = ({ ast, jsx, effectIndex, keys, videoConfigValue
     };
 };
 exports.computeEffectPropStatus = computeEffectPropStatus;
-const computeEffectPropsStatusesFromContent = ({ fileContents, sequenceNodePath, effects, keysFor, videoConfigValues, }) => {
-    const ast = (0, parse_ast_1.parseAst)(fileContents);
-    const videoConfigIdentifierValues = (0, video_config_values_1.getVideoConfigIdentifierValues)({
-        ast,
-        videoConfigValues,
-    });
-    const jsx = (0, can_update_sequence_props_1.findJsxElementAtNodePath)(ast, sequenceNodePath);
-    if (!jsx) {
-        return effects.map((_effect, effectIndex) => ({
-            canUpdate: false,
-            effectIndex,
-            reason: 'not-found',
-        }));
-    }
-    return effects.map((effect, effectIndex) => (0, exports.computeEffectPropStatus)({
-        ast,
-        jsx,
-        effectIndex,
-        keys: keysFor(effect),
-        videoConfigValues: videoConfigIdentifierValues,
-    }));
-};
-exports.computeEffectPropsStatusesFromContent = computeEffectPropsStatusesFromContent;
-const computeEffectPropsStatusesFromFile = ({ fileName, sequenceNodePath, effects, keysFor, remotionRoot, videoConfigValues, }) => {
+({ computeEffectPropsStatusesFromContent: exports.computeEffectPropsStatusesFromContent } = codemods_1.CodemodsInternals);
+const computeEffectPropsStatusesFromFile = ({ fileName, sequenceNodePath, effects, keysFor, remotionRoot, }) => {
     const { absolutePath } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
         remotionRoot,
         fileName,
@@ -230,7 +208,6 @@ const computeEffectPropsStatusesFromFile = ({ fileName, sequenceNodePath, effect
         sequenceNodePath,
         effects,
         keysFor,
-        videoConfigValues,
     });
 };
 exports.computeEffectPropsStatusesFromFile = computeEffectPropsStatusesFromFile;

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

@@ -1,13 +1,14 @@
 import type { Expression, File, JSXElement, JSXOpeningElement } from '@babel/types';
 import type { SubscribeToSequencePropsResponse } from '@remotion/studio-shared';
-import type { CanUpdateSequencePropsResponseTrue, CanUpdateSequencePropStatus, SequenceNodePath, VideoConfigValues } from 'remotion';
+import type { CanUpdateSequencePropsResponseTrue, CanUpdateSequencePropStatus, SequenceNodePath } from 'remotion';
 import { type VideoConfigIdentifierValues } from '../../helpers/video-config-values';
+type CanUpdatePropStatus = CanUpdateSequencePropStatus;
 type StaticValueOptions = {
     allowSpecialValues: boolean;
 };
 export declare const isStaticValue: (node: Expression, options?: StaticValueOptions) => boolean;
 export declare const extractStaticValue: (node: Expression, options?: StaticValueOptions) => unknown;
-export declare const getComputedStatus: (node: Expression, ast: File, videoConfigValues: VideoConfigIdentifierValues) => CanUpdateSequencePropStatus;
+export declare const getComputedStatus: (node: Expression, ast: File, videoConfigValues: VideoConfigIdentifierValues) => CanUpdatePropStatus;
 export declare const getNodePathForRecastPath: (recastPath: any, ast: File) => SequenceNodePath;
 export declare const findJsxElementPathAtNodePath: (ast: File, nodePath: SequenceNodePath) => import("ast-types/lib/node-path").NodePath<N, V> | null;
 export declare const findJsxElementAtNodePath: (ast: File, nodePath: SequenceNodePath) => JSXOpeningElement | null;
@@ -40,16 +41,15 @@ export declare const resolveSequencePropsNodePathsFromFilename: ({ fileName, tar
     }[];
     remotionRoot: string;
 }) => (SequenceNodePath | null)[];
-export declare const computeSequencePropsStatusFromContent: ({ fileContents, nodePath, componentIdentity, keys, assetKeys, effects, videoConfigValues, }: {
+export declare const computeSequencePropsStatusFromContent: ({ fileContents, nodePath, componentIdentity, keys, assetKeys, effects, }: {
     fileContents: string;
     nodePath: SequenceNodePath;
     componentIdentity: string | null;
     keys: string[];
     assetKeys?: string[] | undefined;
     effects: string[][];
-    videoConfigValues: VideoConfigValues | null;
 }) => CanUpdateSequencePropsResponseTrue;
-export declare const computeSequencePropsStatus: ({ fileName, nodePath, componentIdentity, keys, assetKeys, effects, remotionRoot, videoConfigValues, }: {
+export declare const computeSequencePropsStatus: ({ fileName, nodePath, componentIdentity, keys, assetKeys, effects, remotionRoot, }: {
     fileName: string;
     nodePath: SequenceNodePath;
     componentIdentity: string | null;
@@ -57,9 +57,8 @@ export declare const computeSequencePropsStatus: ({ fileName, nodePath, componen
     assetKeys?: string[] | undefined;
     effects: string[][];
     remotionRoot: string;
-    videoConfigValues: VideoConfigValues | null;
 }) => CanUpdateSequencePropsResponseTrue;
-export declare const computeSequencePropsStatusFromFilenameByLocation: ({ fileName, line, column, componentIdentity, keys, assetKeys, effects, remotionRoot, logLevel, videoConfigValues, }: {
+export declare const computeSequencePropsStatusFromFilenameByLocation: ({ fileName, line, column, componentIdentity, keys, assetKeys, effects, remotionRoot, logLevel, }: {
     fileName: string;
     line: number;
     column: number;
@@ -69,6 +68,5 @@ export declare const computeSequencePropsStatusFromFilenameByLocation: ({ fileNa
     effects: string[][];
     remotionRoot: string;
     logLevel: "error" | "info" | "trace" | "verbose" | "warn";
-    videoConfigValues: VideoConfigValues;
 }) => SubscribeToSequencePropsResponse;
 export {};

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

@@ -439,7 +439,7 @@ const getInterpolationKeyframes = (node, ast, videoConfigValues) => {
             return undefined;
         }
         keyframes.push({
-            frame: frameExpression.value,
+            frame: no_react_1.NoReactInternals.evaluateSourceNumericValue(frameExpression, null),
             value: (0, exports.extractStaticValue)(outputElement),
             ...(frameExpression.type === 'literal' ? {} : { frameExpression }),
         });
@@ -521,8 +521,7 @@ const findNodePath = (ast, target) => {
     return found;
 };
 const getJsxNumericAttribute = ({ openingElement, name, defaultValue, videoConfigValues, }) => {
-    var _a, _b;
-    var _c;
+    var _a;
     if (openingElement.attributes.some((attribute) => attribute.type === 'JSXSpreadAttribute')) {
         return null;
     }
@@ -537,10 +536,13 @@ const getJsxNumericAttribute = ({ openingElement, name, defaultValue, videoConfi
             attribute.value.expression.type === 'JSXEmptyExpression') {
             return null;
         }
-        return ((_c = (_b = (0, video_config_numeric_expression_1.parseVideoConfigNumericExpression)({
+        const numericExpression = (0, video_config_numeric_expression_1.parseVideoConfigNumericExpression)({
             node: attribute.value.expression,
             videoConfigValues,
-        })) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : null);
+        });
+        return numericExpression === null
+            ? null
+            : no_react_1.NoReactInternals.evaluateSourceNumericValue(numericExpression, null);
     }
     return defaultValue;
 };
@@ -975,7 +977,7 @@ const resolveSequencePropsNodePathsFromFilename = ({ fileName, targets, remotion
     });
 };
 exports.resolveSequencePropsNodePathsFromFilename = resolveSequencePropsNodePathsFromFilename;
-const computeSequencePropsStatusFromContent = ({ fileContents, nodePath, componentIdentity, keys, assetKeys = [], effects, videoConfigValues, }) => {
+const computeSequencePropsStatusFromContent = ({ fileContents, nodePath, componentIdentity, keys, assetKeys = [], effects, }) => {
     try {
         return (0, codemods_1.getNodeProps)({
             project: { rootDir: '/', files: { 'source.tsx': fileContents } },
@@ -984,7 +986,6 @@ const computeSequencePropsStatusFromContent = ({ fileContents, nodePath, compone
             keys,
             assetKeys,
             effectKeys: effects,
-            videoConfig: videoConfigValues !== null && videoConfigValues !== void 0 ? videoConfigValues : undefined,
         });
     }
     catch (error) {
@@ -998,7 +999,7 @@ const computeSequencePropsStatusFromContent = ({ fileContents, nodePath, compone
     }
 };
 exports.computeSequencePropsStatusFromContent = computeSequencePropsStatusFromContent;
-const computeSequencePropsStatus = ({ fileName, nodePath, componentIdentity, keys, assetKeys = [], effects, remotionRoot, videoConfigValues, }) => {
+const computeSequencePropsStatus = ({ fileName, nodePath, componentIdentity, keys, assetKeys = [], effects, remotionRoot, }) => {
     const { absolutePath } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
         remotionRoot,
         fileName,
@@ -1012,11 +1013,10 @@ const computeSequencePropsStatus = ({ fileName, nodePath, componentIdentity, key
         keys,
         assetKeys,
         effects,
-        videoConfigValues,
     });
 };
 exports.computeSequencePropsStatus = computeSequencePropsStatus;
-const computeSequencePropsStatusFromFilenameByLocation = ({ fileName, line, column, componentIdentity, keys, assetKeys = [], effects, remotionRoot, logLevel, videoConfigValues, }) => {
+const computeSequencePropsStatusFromFilenameByLocation = ({ fileName, line, column, componentIdentity, keys, assetKeys = [], effects, remotionRoot, logLevel, }) => {
     try {
         const { absolutePath } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
             remotionRoot,
@@ -1046,14 +1046,13 @@ const computeSequencePropsStatusFromFilenameByLocation = ({ fileName, line, colu
                 assetKeys,
                 effects,
                 remotionRoot,
-                videoConfigValues,
             }),
             nodePath: {
                 absolutePath,
                 nodePath: resolvedNodePath,
                 sequenceKeys: keys,
                 effectKeys: effects,
-                videoConfigValues,
+                videoConfigValues: null,
             },
             success: true,
         };

package/dist/preview-server/routes/default-coding-agent.js

@@ -6,10 +6,12 @@ const git_client_registry_1 = require("../../helpers/git-client-registry");
 const terminal_registry_1 = require("../../helpers/terminal-registry");
 const getDefaultCodingAgentInfoHandler = async ({ getDefaultCodingAgent }) => {
     const installedCodingAgents = await (0, coding_agent_registry_1.getAvailableCodingAgents)();
+    const runningCodingAgents = await (0, coding_agent_registry_1.getRunningCodingAgents)(installedCodingAgents);
     const installedTerminals = await (0, terminal_registry_1.getAvailableTerminals)();
     const installedGitClients = await (0, git_client_registry_1.getAvailableGitClients)();
     return {
         defaultCodingAgent: getDefaultCodingAgent(),
+        runningCodingAgents,
         installedCodingAgents: installedCodingAgents.map(({ id, name, nameWithType }) => ({
             id,
             name,

package/dist/preview-server/routes/default-editor.js

@@ -5,6 +5,7 @@ const custom_editor_1 = require("../../helpers/custom-editor");
 const editor_registry_1 = require("../../helpers/editor-registry");
 const getDefaultEditorInfoHandler = async ({ getDefaultEditor }) => {
     const installedEditors = await (0, editor_registry_1.getAvailableEditors)();
+    const runningEditors = await (0, editor_registry_1.getRunningEditors)(installedEditors);
     const configuredEditor = getDefaultEditor();
     const customEditor = configuredEditor &&
         typeof configuredEditor === 'object' &&
@@ -12,7 +13,10 @@ const getDefaultEditorInfoHandler = async ({ getDefaultEditor }) => {
         ? configuredEditor
         : null;
     return {
-        defaultEditor: typeof configuredEditor === 'object' ? 'custom' : configuredEditor,
+        defaultEditor: configuredEditor && typeof configuredEditor === 'object'
+            ? 'custom'
+            : configuredEditor,
+        runningEditors,
         installedEditors: [
             ...installedEditors.map(({ id, name, nameWithType }) => ({
                 id,

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

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

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

@@ -239,7 +239,6 @@ const deleteKeyframes = async ({ sequenceKeyframes, effectKeyframes, clientId, r
             nodePath: keyframe.nodePath.nodePath,
             componentIdentity: null,
             effects: [],
-            videoConfigValues: keyframe.nodePath.videoConfigValues,
         });
         return {
             fileName: keyframe.fileName,

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

@@ -54,7 +54,7 @@ const insertElementHandler = async ({ input: { compositionFile, compositionId, e
     }
     return (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
         var _a, _b, _c, _d, _e, _f;
-        var _g, _h, _j, _k;
+        var _g, _h, _j;
         const createdAssets = [];
         const changedSources = [];
         let undoEntryPushed = false;
@@ -187,6 +187,13 @@ const insertElementHandler = async ({ input: { compositionFile, compositionId, e
                 throw new Error('Element source file conflicts with the new composition file');
             }
             const shouldWriteElementFile = !plan.elementFileExists || elementSourcesDiffer;
+            const initialProps = { ...element.initialProps };
+            if (componentOwnsSequence && element.dimensions !== null) {
+                initialProps.style = {
+                    ...element.dimensions,
+                    ...(typeof initialProps.style === 'object' ? initialProps.style : {}),
+                };
+            }
             const insertionInput = {
                 remotionRoot,
                 compositionFile,
@@ -197,7 +204,10 @@ const insertElementHandler = async ({ input: { compositionFile, compositionId, e
                     importName: plan.componentName,
                     importPath: plan.importPath,
                     props: [
-                        ...Object.entries((_h = element.initialProps) !== null && _h !== void 0 ? _h : {}).map(([name, value]) => ({ name, value })),
+                        ...Object.entries(initialProps).map(([name, value]) => ({
+                            name,
+                            value,
+                        })),
                         ...(componentOwnsSequence && element.durationInFrames !== null
                             ? [
                                 {
@@ -289,7 +299,7 @@ const insertElementHandler = async ({ input: { compositionFile, compositionId, e
                     try {
                         (0, node_fs_1.unlinkSync)(asset.absolutePath);
                     }
-                    catch (_l) {
+                    catch (_k) {
                         // Keep the original write error.
                     }
                     throw error;
@@ -328,7 +338,7 @@ const insertElementHandler = async ({ input: { compositionFile, compositionId, e
                                 filePath: compositionCreation.registrationFilePath,
                                 oldContents: compositionCreation.registrationFileOldContents,
                                 newContents: compositionCreation.registrationFileNewContents,
-                                logLine: (_j = (_e = newComposition === null || newComposition === void 0 ? void 0 : newComposition.symbolicatedStack) === null || _e === void 0 ? void 0 : _e.originalLineNumber) !== null && _j !== void 0 ? _j : 1,
+                                logLine: (_h = (_e = newComposition === null || newComposition === void 0 ? void 0 : newComposition.symbolicatedStack) === null || _e === void 0 ? void 0 : _e.originalLineNumber) !== null && _h !== void 0 ? _h : 1,
                                 nodePathRemappings: null,
                             },
                         ]),
@@ -397,7 +407,7 @@ const insertElementHandler = async ({ input: { compositionFile, compositionId, e
                 renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${(0, source_file_write_queue_1.getCodemodTimingPrefix)(logLevel)}${renderer_1.RenderInternals.chalk.blueBright((0, format_log_file_location_1.formatLogFileLocation)({
                     remotionRoot,
                     absolutePath: compositionCreation.registrationFilePath,
-                    line: (_k = (_f = newComposition.symbolicatedStack) === null || _f === void 0 ? void 0 : _f.originalLineNumber) !== null && _k !== void 0 ? _k : 1,
+                    line: (_j = (_f = newComposition.symbolicatedStack) === null || _f === void 0 ? void 0 : _f.originalLineNumber) !== null && _j !== void 0 ? _j : 1,
                 }))} Created composition "${compositionId}"`);
             }
             const compositionLocationLabel = (0, format_log_file_location_1.formatLogFileLocation)({
@@ -441,7 +451,7 @@ const insertElementHandler = async ({ input: { compositionFile, compositionId, e
                         });
                     }
                 }
-                catch (_m) {
+                catch (_l) {
                     // Preserve subsequent user changes and the original installation error.
                 }
             }
@@ -451,7 +461,7 @@ const insertElementHandler = async ({ input: { compositionFile, compositionId, e
                         (0, node_fs_1.unlinkSync)(asset.absolutePath);
                     }
                 }
-                catch (_o) {
+                catch (_m) {
                     // Preserve subsequent user changes and the original installation error.
                 }
             }

package/dist/preview-server/routes/install-remotion-skill.d.ts

@@ -1,4 +1,5 @@
-import type { GetRemotionSkillsInfoResponse, InstallRemotionSkillRequest, RemoveRemotionSkillRequest } from '@remotion/studio-shared';
+import type { GetRemotionSkillsInfoResponse, InstallRemotionSkillRequest, RemoveRemotionSkillRequest, UpgradeRemotionSkillRequest } from '@remotion/studio-shared';
 import type { ApiHandler } from '../api-types';
 export declare const installRemotionSkillHandler: ApiHandler<InstallRemotionSkillRequest, GetRemotionSkillsInfoResponse>;
 export declare const removeRemotionSkillHandler: ApiHandler<RemoveRemotionSkillRequest, GetRemotionSkillsInfoResponse>;
+export declare const upgradeRemotionSkillHandler: ApiHandler<UpgradeRemotionSkillRequest, GetRemotionSkillsInfoResponse>;