@remotion/studio-server 4.0.499 → 4.0.501

package/dist/codemods/update-inline-caption-patches.d.ts

@@ -0,0 +1,11 @@
+import type { CaptionPatch } from '@remotion/studio-shared';
+import type { SequenceNodePath } from 'remotion';
+export declare const updateInlineCaptionPatches: ({ input, nodePath, patches, }: {
+    input: string;
+    nodePath: SequenceNodePath;
+    patches: CaptionPatch[];
+}) => {
+    output: string;
+    logLine: number;
+    changedFields: string[][];
+};

package/dist/codemods/update-inline-caption-patches.js

@@ -0,0 +1,186 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateInlineCaptionPatches = void 0;
+const can_update_sequence_props_1 = require("../preview-server/routes/can-update-sequence-props");
+const parse_ast_1 = require("./parse-ast");
+const captionKeys = [
+    'text',
+    'startMs',
+    'endMs',
+    'timestampMs',
+    'confidence',
+];
+const getPropertyKey = (property) => {
+    if (property.key.type === 'Identifier') {
+        return property.key.name;
+    }
+    if (property.key.type === 'StringLiteral') {
+        return property.key.value;
+    }
+    return null;
+};
+const getStaticValue = (value) => {
+    if (value.type === 'StringLiteral' || value.type === 'NumericLiteral') {
+        return value.value;
+    }
+    if (value.type === 'NullLiteral') {
+        return null;
+    }
+    throw new Error('Captions must use static literal values to be edited');
+};
+const getStaticCaption = (expression) => {
+    const values = new Map();
+    for (const property of expression.properties) {
+        if (property.type !== 'ObjectProperty' || property.computed) {
+            throw new Error('Captions must use static object properties to be edited');
+        }
+        const key = getPropertyKey(property);
+        if (key !== null && captionKeys.includes(key)) {
+            values.set(key, getStaticValue(property.value));
+        }
+    }
+    const text = values.get('text');
+    const startMs = values.get('startMs');
+    const endMs = values.get('endMs');
+    const timestampMs = values.get('timestampMs');
+    const confidence = values.get('confidence');
+    if (typeof text !== 'string' ||
+        typeof startMs !== 'number' ||
+        typeof endMs !== 'number' ||
+        (timestampMs !== null && typeof timestampMs !== 'number') ||
+        (confidence !== null && typeof confidence !== 'number')) {
+        throw new Error('Captions must have the standard static caption shape to edit');
+    }
+    return { text, startMs, endMs, timestampMs, confidence };
+};
+const isCaptionKey = (key) => captionKeys.includes(key);
+const getReplacementValue = ({ value, previous, }) => {
+    var _a;
+    if (value === null || typeof value === 'number') {
+        return String(value);
+    }
+    if (previous.type === 'StringLiteral' &&
+        typeof ((_a = previous.extra) === null || _a === void 0 ? void 0 : _a.raw) === 'string' &&
+        previous.extra.raw.startsWith("'")) {
+        return `'${value.replace(/\\/g, '\\\\').replace(/'/g, "\\'")}'`;
+    }
+    return JSON.stringify(value);
+};
+const getSourceValueRange = ({ input, property, key, }) => {
+    var _a, _b;
+    const line = (_a = property.loc) === null || _a === void 0 ? void 0 : _a.start.line;
+    if (line === null || line === undefined) {
+        throw new Error(`Could not locate caption ${key} in the source file`);
+    }
+    const lines = input.split('\n');
+    const lineStart = lines
+        .slice(0, line - 1)
+        .reduce((length, current) => length + current.length + 1, 0);
+    const sourceLine = lines[line - 1];
+    if (sourceLine === undefined) {
+        throw new Error(`Could not locate caption ${key} in the source file`);
+    }
+    const keyStart = sourceLine.indexOf(key);
+    const valueStart = sourceLine.indexOf(':', keyStart) + 1;
+    const rawValue = property.value.type === 'StringLiteral' &&
+        typeof ((_b = property.value.extra) === null || _b === void 0 ? void 0 : _b.raw) === 'string'
+        ? property.value.extra.raw
+        : property.value.type === 'StringLiteral'
+            ? JSON.stringify(property.value.value)
+            : String(getStaticValue(property.value));
+    const valueOffset = sourceLine.indexOf(rawValue, valueStart);
+    if (keyStart === -1 || valueOffset === -1) {
+        throw new Error(`Could not locate caption ${key} in the source file`);
+    }
+    return {
+        start: lineStart + valueOffset,
+        end: lineStart + valueOffset + rawValue.length,
+    };
+};
+const updateCaption = ({ input, caption, patch, }) => {
+    const current = getStaticCaption(caption);
+    if (!captionKeys.every((key) => current[key] === patch.before[key])) {
+        throw new Error(`Caption ${patch.index} changed in the source file before this edit could be saved`);
+    }
+    const changedKeys = Object.keys(patch.changes);
+    if (changedKeys.length === 0 || !changedKeys.every(isCaptionKey)) {
+        throw new Error('Caption patches must change at least one caption field');
+    }
+    const replacements = [];
+    for (const key of changedKeys) {
+        const value = patch.changes[key];
+        if ((key === 'text' && typeof value !== 'string') ||
+            ((key === 'startMs' || key === 'endMs') &&
+                (typeof value !== 'number' || !Number.isFinite(value))) ||
+            ((key === 'timestampMs' || key === 'confidence') &&
+                value !== null &&
+                (typeof value !== 'number' || !Number.isFinite(value)))) {
+            throw new Error(`Caption ${key} has an invalid value`);
+        }
+        const property = caption.properties.find((candidate) => {
+            return (candidate.type === 'ObjectProperty' &&
+                !candidate.computed &&
+                getPropertyKey(candidate) === key);
+        });
+        if (!property || property.type !== 'ObjectProperty') {
+            throw new Error(`Caption ${patch.index} is missing ${key}`);
+        }
+        const { start, end } = getSourceValueRange({ input, property, key });
+        replacements.push({
+            start,
+            end,
+            value: getReplacementValue({
+                value: value,
+                previous: property.value,
+            }),
+        });
+    }
+    return { changedFields: changedKeys, replacements };
+};
+const updateInlineCaptionPatches = ({ input, nodePath, patches, }) => {
+    var _a, _b, _c;
+    var _d;
+    if (patches.length === 0) {
+        throw new Error('Expected at least one caption patch');
+    }
+    const ast = (0, parse_ast_1.parseAst)(input);
+    const jsxElement = (0, can_update_sequence_props_1.findJsxElementNodeAtNodePath)(ast, nodePath);
+    if (!jsxElement) {
+        throw new Error('Could not find a JSX element at the specified line to update');
+    }
+    const captionsAttribute = (_a = jsxElement.openingElement.attributes) === null || _a === void 0 ? void 0 : _a.find((attribute) => attribute.type === 'JSXAttribute' &&
+        attribute.name.type === 'JSXIdentifier' &&
+        attribute.name.name === 'captions');
+    if (!captionsAttribute ||
+        captionsAttribute.type !== 'JSXAttribute' ||
+        ((_b = captionsAttribute.value) === null || _b === void 0 ? void 0 : _b.type) !== 'JSXExpressionContainer' ||
+        captionsAttribute.value.expression.type !== 'ArrayExpression') {
+        throw new Error('Captions must be an inline JSX array to edit them');
+    }
+    const captions = captionsAttribute.value.expression.elements;
+    const changedFields = [];
+    const replacements = [];
+    for (const patch of patches) {
+        if (!Number.isInteger(patch.index) || patch.index < 0) {
+            throw new Error('Caption patch index must be a non-negative integer');
+        }
+        const caption = captions[patch.index];
+        if (!caption || caption.type !== 'ObjectExpression') {
+            throw new Error(`Could not find inline caption ${patch.index}`);
+        }
+        const result = updateCaption({ input, caption, patch });
+        changedFields.push(result.changedFields);
+        replacements.push(...result.replacements);
+    }
+    const output = replacements
+        .sort((a, b) => b.start - a.start)
+        .reduce((current, replacement) => current.slice(0, replacement.start) +
+        replacement.value +
+        current.slice(replacement.end), input);
+    return {
+        output,
+        logLine: (_d = (_c = jsxElement.openingElement.loc) === null || _c === void 0 ? void 0 : _c.start.line) !== null && _d !== void 0 ? _d : 1,
+        changedFields,
+    };
+};
+exports.updateInlineCaptionPatches = updateInlineCaptionPatches;

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

@@ -498,10 +498,12 @@ const migrateCssShorthand = ({ node, cssShorthand, }) => {
         }
         const shorthandValue = property.value.type === 'StringLiteral'
             ? property.value.value
-            : property.value.type === 'TemplateLiteral' &&
-                property.value.expressions.length === 0
-                ? ((_d = (_c = property.value.quasis[0]) === null || _c === void 0 ? void 0 : _c.value.cooked) !== null && _d !== void 0 ? _d : null)
-                : null;
+            : property.value.type === 'NumericLiteral'
+                ? property.value.value
+                : property.value.type === 'TemplateLiteral' &&
+                    property.value.expressions.length === 0
+                    ? ((_d = (_c = property.value.quasis[0]) === null || _c === void 0 ? void 0 : _c.value.cooked) !== null && _d !== void 0 ? _d : null)
+                    : null;
         if (shorthandValue === null) {
             continue;
         }

package/dist/helpers/css-shorthand-properties.d.ts

@@ -3,20 +3,26 @@ export type CssShorthandProperty = {
     readonly parentKey: string;
     readonly shorthand: string;
     readonly longhands: readonly string[];
-    readonly parse: (value: string) => ParsedCssShorthand | null;
+    readonly parse: (value: unknown) => ParsedCssShorthand | null;
     readonly isUnsupportedProperty: (propertyName: string) => boolean;
 };
 export declare const cssShorthandProperties: readonly [{
     readonly parentKey: "style";
     readonly shorthand: "background";
     readonly longhands: readonly ["backgroundColor", "backgroundImage", "backgroundPosition", "backgroundSize", "backgroundRepeat", "backgroundOrigin", "backgroundClip", "backgroundAttachment"];
-    readonly parse: (value: string) => import("./parse-background-shorthand").ParsedBackgroundShorthand | null;
+    readonly parse: (value: unknown) => import("./parse-background-shorthand").ParsedBackgroundShorthand | null;
     readonly isUnsupportedProperty: () => false;
 }, {
     readonly parentKey: "style";
     readonly shorthand: "border";
     readonly longhands: readonly ["borderWidth", "borderStyle", "borderColor"];
-    readonly parse: (value: string) => import("./parse-border-shorthand").ParsedBorderShorthand | null;
+    readonly parse: (value: unknown) => import("./parse-border-shorthand").ParsedBorderShorthand | null;
+    readonly isUnsupportedProperty: (propertyName: string) => boolean;
+}, {
+    readonly parentKey: "style";
+    readonly shorthand: "borderRadius";
+    readonly longhands: readonly ["borderTopLeftRadius", "borderTopRightRadius", "borderBottomRightRadius", "borderBottomLeftRadius"];
+    readonly parse: (value: unknown) => import("./parse-border-radius-shorthand").ParsedBorderRadiusShorthand | null;
     readonly isUnsupportedProperty: (propertyName: string) => boolean;
 }];
 export declare const getCssShorthandForLonghand: ({ parentKey, longhand, }: {

package/dist/helpers/css-shorthand-properties.js

@@ -2,15 +2,28 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getCssShorthandsForUpdates = exports.getCssShorthandForLonghand = exports.cssShorthandProperties = void 0;
 const parse_background_shorthand_1 = require("./parse-background-shorthand");
+const parse_border_radius_shorthand_1 = require("./parse-border-radius-shorthand");
 const parse_border_shorthand_1 = require("./parse-border-shorthand");
 const borderSidePropertyRegex = /^border(?:Top|Right|Bottom|Left)(?:Width|Style|Color)?$/;
 const borderShorthand = {
     parentKey: 'style',
     shorthand: 'border',
     longhands: ['borderWidth', 'borderStyle', 'borderColor'],
-    parse: parse_border_shorthand_1.parseBorderShorthand,
+    parse: (value) => typeof value === 'string' ? (0, parse_border_shorthand_1.parseBorderShorthand)(value) : null,
     isUnsupportedProperty: (propertyName) => borderSidePropertyRegex.test(propertyName),
 };
+const borderRadiusShorthand = {
+    parentKey: 'style',
+    shorthand: 'borderRadius',
+    longhands: [
+        'borderTopLeftRadius',
+        'borderTopRightRadius',
+        'borderBottomRightRadius',
+        'borderBottomLeftRadius',
+    ],
+    parse: parse_border_radius_shorthand_1.parseBorderRadiusShorthand,
+    isUnsupportedProperty: (propertyName) => /^border(?:StartStart|StartEnd|EndStart|EndEnd)Radius$/.test(propertyName),
+};
 const backgroundShorthand = {
     parentKey: 'style',
     shorthand: 'background',
@@ -24,12 +37,13 @@ const backgroundShorthand = {
         'backgroundClip',
         'backgroundAttachment',
     ],
-    parse: parse_background_shorthand_1.parseBackgroundShorthand,
+    parse: (value) => typeof value === 'string' ? (0, parse_background_shorthand_1.parseBackgroundShorthand)(value) : null,
     isUnsupportedProperty: () => false,
 };
 exports.cssShorthandProperties = [
     backgroundShorthand,
     borderShorthand,
+    borderRadiusShorthand,
 ];
 const getCssShorthandForLonghand = ({ parentKey, longhand, }) => {
     var _a;

package/dist/helpers/parse-border-radius-shorthand.d.ts

@@ -0,0 +1,7 @@
+export type ParsedBorderRadiusShorthand = {
+    borderTopLeftRadius: number;
+    borderTopRightRadius: number;
+    borderBottomRightRadius: number;
+    borderBottomLeftRadius: number;
+};
+export declare const parseBorderRadiusShorthand: (value: unknown) => ParsedBorderRadiusShorthand | null;

package/dist/helpers/parse-border-radius-shorthand.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseBorderRadiusShorthand = void 0;
+const parsePixelRadius = (value) => {
+    if (value === '0') {
+        return 0;
+    }
+    const match = value.match(/^(\d+(?:\.\d+)?|\.\d+)px$/i);
+    return match ? Number(match[1]) : null;
+};
+const expandBorderRadius = (values) => {
+    if (values.length === 1) {
+        return [values[0], values[0], values[0], values[0]];
+    }
+    if (values.length === 2) {
+        return [values[0], values[1], values[0], values[1]];
+    }
+    if (values.length === 3) {
+        return [values[0], values[1], values[2], values[1]];
+    }
+    return [values[0], values[1], values[2], values[3]];
+};
+const parseBorderRadiusShorthand = (value) => {
+    let values;
+    if (typeof value === 'number') {
+        if (!Number.isFinite(value) || value < 0) {
+            return null;
+        }
+        values = [value];
+    }
+    else if (typeof value === 'string') {
+        const tokens = value.trim().split(/\s+/);
+        if (tokens.length < 1 || tokens.length > 4) {
+            return null;
+        }
+        const parsed = tokens.map(parsePixelRadius);
+        if (parsed.some((radius) => radius === null)) {
+            return null;
+        }
+        values = parsed;
+    }
+    else {
+        return null;
+    }
+    const [topLeft, topRight, bottomRight, bottomLeft] = expandBorderRadius(values);
+    return {
+        borderTopLeftRadius: topLeft,
+        borderTopRightRadius: topRight,
+        borderBottomRightRadius: bottomRight,
+        borderBottomLeftRadius: bottomLeft,
+    };
+};
+exports.parseBorderRadiusShorthand = parseBorderRadiusShorthand;

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

@@ -39,6 +39,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.insertJsxElementIntoComposition = exports.resolveCompositionComponent = exports.resolveCompositionComponentWithFile = void 0;
 const node_fs_1 = __importDefault(require("node:fs"));
 const node_path_1 = __importDefault(require("node:path"));
+const studio_codemods_1 = require("@remotion/studio-codemods");
 const studio_shared_1 = require("@remotion/studio-shared");
 const recast = __importStar(require("recast"));
 const no_react_1 = require("remotion/no-react");
@@ -1427,56 +1428,71 @@ const insertJsxElementIntoComposition = async ({ remotionRoot, compositionFile,
         remotionRoot,
         fileName: location.fileName,
     });
-    const ast = (0, parse_ast_1.parseAst)(input);
-    if (element.type === 'composition' &&
-        element.compositionId === compositionId) {
-        throw new Error('Cannot insert a composition into itself');
-    }
-    const sequenceWrapper = element.type === 'composition'
-        ? {
-            dimensions: { width: element.width, height: element.height },
-            durationInFrames: element.durationInFrames,
-            name: element.compositionId,
+    let finalFile;
+    let logLine;
+    if (element.type === 'solid' && from === null && wrapInSequence === null) {
+        const inserted = (0, studio_codemods_1.insertSolidIntoSource)({
+            exportName: location.exportName,
+            height: element.height,
             position: element.position,
-            from,
+            source: input,
+            width: element.width,
+        });
+        finalFile = inserted.output;
+        logLine = inserted.line;
+    }
+    else {
+        const ast = (0, parse_ast_1.parseAst)(input);
+        if (element.type === 'composition' &&
+            element.compositionId === compositionId) {
+            throw new Error('Cannot insert a composition into itself');
         }
-        : from === null ||
-            element.type === 'asset' ||
-            element.type === 'svg' ||
-            element.type === 'component'
-            ? wrapInSequence
-            : {
-                dimensions: null,
-                durationInFrames: null,
-                name: null,
+        const sequenceWrapper = element.type === 'composition'
+            ? {
+                dimensions: { width: element.width, height: element.height },
+                durationInFrames: element.durationInFrames,
+                name: element.compositionId,
                 position: element.position,
                 from,
-            };
-    const elementToInsert = await createInsertableJsxElement({
-        addPositionStyleToComponent: sequenceWrapper === null,
-        ast,
-        destinationFileName: location.fileName,
-        element,
-        from,
-        remotionRoot,
-    });
-    const finalElementToInsert = sequenceWrapper
-        ? createSequenceWrappedElement({
-            child: elementToInsert,
-            dimensions: sequenceWrapper.dimensions,
-            durationInFrames: (_a = sequenceWrapper.durationInFrames) !== null && _a !== void 0 ? _a : null,
-            from: sequenceWrapper.from,
-            name: sequenceWrapper.name,
-            position: sequenceWrapper.position,
-            sequenceLocalName: ensureSequenceImport(ast),
-        })
-        : elementToInsert;
-    const logLine = addElementToComponentRoot({
-        ast,
-        exportName: location.exportName,
-        element: finalElementToInsert,
-    });
-    const finalFile = (0, parse_ast_1.serializeAst)(ast);
+            }
+            : from === null ||
+                element.type === 'asset' ||
+                element.type === 'svg' ||
+                element.type === 'component'
+                ? wrapInSequence
+                : {
+                    dimensions: null,
+                    durationInFrames: null,
+                    name: null,
+                    position: element.position,
+                    from,
+                };
+        const elementToInsert = await createInsertableJsxElement({
+            addPositionStyleToComponent: sequenceWrapper === null,
+            ast,
+            destinationFileName: location.fileName,
+            element,
+            from,
+            remotionRoot,
+        });
+        const finalElementToInsert = sequenceWrapper
+            ? createSequenceWrappedElement({
+                child: elementToInsert,
+                dimensions: sequenceWrapper.dimensions,
+                durationInFrames: (_a = sequenceWrapper.durationInFrames) !== null && _a !== void 0 ? _a : null,
+                from: sequenceWrapper.from,
+                name: sequenceWrapper.name,
+                position: sequenceWrapper.position,
+                sequenceLocalName: ensureSequenceImport(ast),
+            })
+            : elementToInsert;
+        logLine = addElementToComponentRoot({
+            ast,
+            exportName: location.exportName,
+            element: finalElementToInsert,
+        });
+        finalFile = (0, parse_ast_1.serializeAst)(ast);
+    }
     const { output, formatted } = await (0, format_file_content_1.formatFileContent)({
         input: finalFile,
         prettierConfigOverride,

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

@@ -19,6 +19,7 @@ const delete_static_file_1 = require("./routes/delete-static-file");
 const download_remote_asset_1 = require("./routes/download-remote-asset");
 const duplicate_effect_1 = require("./routes/duplicate-effect");
 const duplicate_jsx_node_1 = require("./routes/duplicate-jsx-node");
+const find_in_file_1 = require("./routes/find-in-file");
 const insert_element_1 = require("./routes/insert-element");
 const insert_jsx_element_1 = require("./routes/insert-jsx-element");
 const install_dependency_1 = require("./routes/install-dependency");
@@ -36,6 +37,7 @@ const reorder_effect_1 = require("./routes/reorder-effect");
 const reorder_sequence_1 = require("./routes/reorder-sequence");
 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 split_jsx_sequence_1 = require("./routes/split-jsx-sequence");
 const subscribe_to_default_props_1 = require("./routes/subscribe-to-default-props");
@@ -61,6 +63,7 @@ exports.allApiRoutes = {
     '/api/subscribe-to-file-existence': subscribe_to_file_existence_1.subscribeToFileExistence,
     '/api/remove-render': remove_render_1.handleRemoveRender,
     '/api/open-in-editor': open_in_editor_1.openInEditorHandler,
+    '/api/find-in-file': find_in_file_1.findInFileHandler,
     '/api/open-in-file-explorer': open_in_file_explorer_1.handleOpenInFileExplorer,
     '/api/register-client-render': register_client_render_1.registerClientRenderHandler,
     '/api/unregister-client-render': unregister_client_render_1.unregisterClientRenderHandler,
@@ -73,6 +76,7 @@ exports.allApiRoutes = {
     '/api/unsubscribe-from-sequence-props': unsubscribe_from_sequence_props_1.unsubscribeFromSequenceProps,
     '/api/save-sequence-props': save_sequence_props_1.saveSequencePropsHandler,
     '/api/save-effect-props': save_effect_props_1.saveEffectPropsHandler,
+    '/api/save-multiple-effect-props': save_multiple_effect_props_1.saveMultipleEffectPropsHandler,
     '/api/add-effect': add_effect_1.addEffectHandler,
     '/api/reorder-effect': reorder_effect_1.reorderEffectHandler,
     '/api/duplicate-effect': duplicate_effect_1.duplicateEffectHandler,

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

@@ -43,6 +43,7 @@ const parse_ast_1 = require("../../codemods/parse-ast");
 const css_shorthand_properties_1 = require("../../helpers/css-shorthand-properties");
 const get_ast_node_path_1 = require("../../helpers/get-ast-node-path");
 const import_agnostic_node_path_1 = require("../../helpers/import-agnostic-node-path");
+const parse_border_radius_shorthand_1 = require("../../helpers/parse-border-radius-shorthand");
 const parse_keyframe_easing_expression_1 = require("../../helpers/parse-keyframe-easing-expression");
 const resolve_file_inside_project_1 = require("../../helpers/resolve-file-inside-project");
 const video_config_numeric_expression_1 = require("../../helpers/video-config-numeric-expression");
@@ -679,6 +680,70 @@ const getObjectPropertyName = (property) => {
     }
     return null;
 };
+const BORDER_RADIUS_SHORTHAND = 'borderRadius';
+const BORDER_RADIUS_LONGHANDS = [
+    'borderTopLeftRadius',
+    'borderTopRightRadius',
+    'borderBottomRightRadius',
+    'borderBottomLeftRadius',
+];
+const BORDER_RADIUS_PROPERTIES = new Set([
+    BORDER_RADIUS_SHORTHAND,
+    ...BORDER_RADIUS_LONGHANDS,
+]);
+const hasMixedBorderRadiusRepresentation = (jsxElement) => {
+    var _a;
+    const style = jsxElement.attributes.find((attribute) => attribute.type === 'JSXAttribute' &&
+        attribute.name.type !== 'JSXNamespacedName' &&
+        attribute.name.name === 'style');
+    if (!style ||
+        style.type !== 'JSXAttribute' ||
+        ((_a = style.value) === null || _a === void 0 ? void 0 : _a.type) !== 'JSXExpressionContainer' ||
+        style.value.expression.type !== 'ObjectExpression') {
+        return false;
+    }
+    let hasShorthand = false;
+    let hasLonghand = false;
+    for (const property of style.value.expression.properties) {
+        if (property.type !== 'ObjectProperty') {
+            continue;
+        }
+        const name = getObjectPropertyName(property);
+        hasShorthand || (hasShorthand = name === BORDER_RADIUS_SHORTHAND);
+        hasLonghand || (hasLonghand = BORDER_RADIUS_LONGHANDS.some((longhand) => longhand === name));
+    }
+    return hasShorthand && hasLonghand;
+};
+const getUniformBorderRadius = (value) => {
+    const parsed = (0, parse_border_radius_shorthand_1.parseBorderRadiusShorthand)(value);
+    if (!parsed) {
+        return null;
+    }
+    const values = Object.values(parsed);
+    return values.every((radius) => radius === values[0]) ? values[0] : null;
+};
+const getBorderRadiusShorthandStatus = ({ propValue, ast, videoConfigValues, }) => {
+    if ((0, exports.isStaticValue)(propValue)) {
+        const uniform = getUniformBorderRadius((0, exports.extractStaticValue)(propValue));
+        return uniform === null ? computedStatus() : staticStatus(uniform, null);
+    }
+    const numericExpression = (0, video_config_numeric_expression_1.parseVideoConfigNumericExpression)({
+        node: propValue,
+        videoConfigValues,
+    });
+    if (numericExpression !== null && numericExpression.value >= 0) {
+        return staticStatus(numericExpression.value, numericExpression);
+    }
+    const computed = (0, exports.getComputedStatus)(propValue, ast, videoConfigValues);
+    if (computed.status === 'keyframed' &&
+        computed.interpolationFunction === 'interpolate' &&
+        computed.keyframes.every((keyframe) => typeof keyframe.value === 'number' &&
+            Number.isFinite(keyframe.value) &&
+            keyframe.value >= 0)) {
+        return computed;
+    }
+    return computedStatus();
+};
 const getNestedPropStatus = ({ jsxElement, ast, parentKey, childKey, videoConfigValues, allowSpecialValues, }) => {
     const attr = jsxElement.attributes.find((a) => a.type !== 'JSXSpreadAttribute' &&
         a.name.type !== 'JSXNamespacedName' &&
@@ -735,9 +800,6 @@ const getNestedPropStatus = ({ jsxElement, ast, parentKey, childKey, videoConfig
         const staticShorthandValue = (0, exports.extractStaticValue)(shorthandValue, {
             allowSpecialValues: false,
         });
-        if (typeof staticShorthandValue !== 'string') {
-            return computedStatus();
-        }
         const parsed = cssShorthand.parse(staticShorthandValue);
         return parsed ? staticStatus(parsed[childKey], null) : computedStatus();
     }
@@ -746,6 +808,13 @@ const getNestedPropStatus = ({ jsxElement, ast, parentKey, childKey, videoConfig
         return staticStatus(undefined, null);
     }
     const propValue = prop.value;
+    if (parentKey === 'style' && childKey === BORDER_RADIUS_SHORTHAND) {
+        return getBorderRadiusShorthandStatus({
+            propValue,
+            ast,
+            videoConfigValues,
+        });
+    }
     const staticValueOptions = { allowSpecialValues };
     if (!(0, exports.isStaticValue)(propValue, staticValueOptions)) {
         const numericExpression = (0, video_config_numeric_expression_1.parseVideoConfigNumericExpression)({
@@ -774,7 +843,14 @@ const computeEffectsForJsx = ({ ast, jsxElement, effects, videoConfigValues, })
 const computeSequenceOnlyPropsRecord = ({ jsxElement, jsxElementNode, ast, keys, assetKeys, videoConfigValues, }) => {
     const allProps = getPropsStatus(jsxElement, ast, videoConfigValues, assetKeys);
     const filteredProps = {};
+    const mixedBorderRadius = hasMixedBorderRadiusRepresentation(jsxElement);
     for (const key of keys) {
+        if (mixedBorderRadius &&
+            key.startsWith('style.') &&
+            BORDER_RADIUS_PROPERTIES.has(key.slice('style.'.length))) {
+            filteredProps[key] = computedStatus();
+            continue;
+        }
         if (key === 'children') {
             const staticChildrenAttribute = (0, exports.getStaticJsxChildrenAttribute)(jsxElement);
             if (staticChildrenAttribute) {

package/dist/preview-server/routes/find-in-file.d.ts

@@ -0,0 +1,4 @@
+import type { FindInFileRequest, FindInFileResponse } from '@remotion/studio-shared';
+import type { ApiHandler } from '../api-types';
+export { findSearchPosition } from '@remotion/studio-codemods';
+export declare const findInFileHandler: ApiHandler<FindInFileRequest, FindInFileResponse>;

package/dist/preview-server/routes/find-in-file.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findInFileHandler = exports.findSearchPosition = void 0;
+const node_fs_1 = __importDefault(require("node:fs"));
+const node_path_1 = __importDefault(require("node:path"));
+const studio_codemods_1 = require("@remotion/studio-codemods");
+const studio_codemods_2 = require("@remotion/studio-codemods");
+Object.defineProperty(exports, "findSearchPosition", { enumerable: true, get: function () { return studio_codemods_2.findSearchPosition; } });
+const findInFileHandler = async ({ input, remotionRoot }) => {
+    const { fileName, lineNumber, columnNumber, search } = input;
+    const contents = await node_fs_1.default.promises.readFile(node_path_1.default.resolve(remotionRoot, fileName), 'utf-8');
+    return (0, studio_codemods_1.findSearchPosition)({
+        contents,
+        lineNumber,
+        columnNumber,
+        search,
+    });
+};
+exports.findInFileHandler = findInFileHandler;

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

@@ -69,7 +69,7 @@ const validateElement = (element) => {
     }
     validateDimensions(element.dimensions);
 };
-const insertElementHandler = ({ input: { compositionFile, compositionId, element, from, position }, remotionRoot, logLevel, }) => (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
+const insertElementHandler = ({ input: { compositionFile, compositionId, element, from, position, overwriteExisting, }, remotionRoot, logLevel, }) => (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
     try {
         validateElement(element);
         validatePosition(position);
@@ -99,13 +99,27 @@ const insertElementHandler = ({ input: { compositionFile, compositionId, element
             throw new Error('Element file must stay inside the Remotion project');
         }
         const elementFileExists = (0, node_fs_1.existsSync)(elementFileName);
-        if (elementFileExists) {
-            const existingSource = (0, node_fs_1.readFileSync)(elementFileName, 'utf-8');
-            if (normalizeSourceForComparison(existingSource) !==
-                normalizeSourceForComparison(element.sourceCode)) {
-                throw new Error(`Element file already exists with different contents: ${derivedElementFileName}`);
-            }
+        const existingElementSource = elementFileExists
+            ? (0, node_fs_1.readFileSync)(elementFileName, 'utf-8')
+            : null;
+        const elementSourcesDiffer = existingElementSource !== null &&
+            normalizeSourceForComparison(existingElementSource) !==
+                normalizeSourceForComparison(element.sourceCode);
+        if (elementSourcesDiffer && !overwriteExisting) {
+            return {
+                success: false,
+                type: 'file-conflict',
+                conflict: {
+                    filePath: node_path_1.default
+                        .relative(remotionRoot, elementFileName)
+                        .split(node_path_1.default.sep)
+                        .join('/'),
+                    existingSource: existingElementSource,
+                    incomingSource: element.sourceCode,
+                },
+            };
         }
+        const shouldWriteElementFile = !elementFileExists || elementSourcesDiffer;
         const importPath = makeRelativeImportPath({
             fromFile: location.fileName,
             toFile: elementFileName,
@@ -133,16 +147,16 @@ const insertElementHandler = ({ input: { compositionFile, compositionId, element
         });
         (0, undo_stack_1.pushTransactionToUndoStack)({
             snapshots: [
-                ...(elementFileExists
-                    ? []
-                    : [
+                ...(shouldWriteElementFile
+                    ? [
                         {
                             filePath: elementFileName,
-                            oldContents: null,
+                            oldContents: existingElementSource,
                             newContents: element.sourceCode,
                             logLine: 1,
                         },
-                    ]),
+                    ]
+                    : []),
                 {
                     filePath: inserted.fileName,
                     oldContents: inserted.oldContents,
@@ -159,11 +173,11 @@ const insertElementHandler = ({ input: { compositionFile, compositionId, element
             entryType: 'insert-jsx-element',
             suppressHmrOnFileRestore: false,
         });
-        if (!elementFileExists) {
+        if (shouldWriteElementFile) {
             (0, undo_stack_1.suppressUndoStackInvalidation)(elementFileName);
         }
         (0, undo_stack_1.suppressUndoStackInvalidation)(inserted.fileName);
-        if (!elementFileExists) {
+        if (shouldWriteElementFile) {
             (0, file_watcher_1.writeFileAndNotifyFileWatchers)(elementFileName, element.sourceCode, undefined);
         }
         (0, file_watcher_1.writeFileAndNotifyFileWatchers)(inserted.fileName, inserted.output, undefined);
@@ -177,7 +191,12 @@ const insertElementHandler = ({ input: { compositionFile, compositionId, element
             absolutePath: elementFileName,
             line: 1,
         });
-        renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(elementLocationLabel)} ${elementFileExists ? 'Reused existing Element source' : 'Created Element source'}`);
+        const elementFileAction = elementSourcesDiffer
+            ? 'Overwrote existing Element source'
+            : 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 <${componentName}>`);
         if (!inserted.formatted) {
             (0, log_update_1.warnAboutPrettierOnce)(logLevel);
@@ -190,6 +209,7 @@ const insertElementHandler = ({ input: { compositionFile, compositionId, element
     catch (err) {
         return {
             success: false,
+            type: 'error',
             reason: err.message,
             stack: err.stack,
         };

package/dist/preview-server/routes/save-multiple-effect-props.d.ts

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

package/dist/preview-server/routes/save-multiple-effect-props.js

@@ -0,0 +1,171 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.saveMultipleEffectPropsHandler = void 0;
+const node_fs_1 = require("node:fs");
+const renderer_1 = require("@remotion/renderer");
+const studio_shared_1 = require("@remotion/studio-shared");
+const parse_ast_1 = require("../../codemods/parse-ast");
+const update_effect_props_1 = require("../../codemods/update-effect-props/update-effect-props");
+const file_watcher_1 = require("../../file-watcher");
+const resolve_file_inside_project_1 = require("../../helpers/resolve-file-inside-project");
+const video_config_values_1 = require("../../helpers/video-config-values");
+const undo_stack_1 = require("../undo-stack");
+const watch_ignore_next_change_1 = require("../watch-ignore-next-change");
+const can_update_effect_props_1 = require("./can-update-effect-props");
+const can_update_sequence_props_1 = require("./can-update-sequence-props");
+const log_effect_update_1 = require("./log-updates/log-effect-update");
+const source_file_write_queue_1 = require("./source-file-write-queue");
+const resolveEdit = ({ edit, index, }) => {
+    const defaultValue = edit.defaultValue === null ? null : JSON.parse(edit.defaultValue);
+    const update = edit.type === 'value'
+        ? {
+            key: edit.key,
+            value: JSON.parse(edit.value),
+            defaultValue,
+        }
+        : {
+            key: edit.key,
+            effectParam: edit.effectParam,
+            defaultValue,
+        };
+    return {
+        index,
+        edit,
+        update,
+        defaultValueString: defaultValue === null ? null : JSON.stringify(defaultValue),
+    };
+};
+const saveMultipleEffectPropsHandler = ({ input: { edits, clientId, undoLabel, redoLabel }, remotionRoot, logLevel, }) => (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
+    var _a;
+    if (edits.length === 0) {
+        throw new Error('No effect prop edits to save');
+    }
+    renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[save-multiple-effect-props] Received request with ${edits.length} edit(s)`);
+    const editGroups = new Map();
+    for (const [index, edit] of edits.entries()) {
+        const { absolutePath, fileRelativeToRoot } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
+            remotionRoot,
+            fileName: edit.fileName,
+            action: 'modify',
+        });
+        const group = (_a = editGroups.get(absolutePath)) !== null && _a !== void 0 ? _a : {
+            fileRelativeToRoot,
+            edits: [],
+        };
+        group.edits.push(resolveEdit({ edit, index }));
+        editGroups.set(absolutePath, group);
+    }
+    const snapshots = [];
+    const outputByPath = new Map();
+    const resultByIndex = new Map();
+    for (const [absolutePath, group] of editGroups) {
+        const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
+        let output = fileContents;
+        let firstLogLine = Number.POSITIVE_INFINITY;
+        for (const edit of group.edits) {
+            const result = await (0, update_effect_props_1.updateEffectProps)({
+                input: output,
+                sequenceNodePath: edit.edit.sequenceNodePath.nodePath,
+                effectIndex: edit.edit.effectIndex,
+                update: edit.update,
+                schema: edit.edit.schema,
+            });
+            output = result.output;
+            firstLogLine = Math.min(firstLogLine, result.logLine);
+            resultByIndex.set(edit.index, {
+                ...result,
+                edit,
+                fileRelativeToRoot: group.fileRelativeToRoot,
+            });
+        }
+        outputByPath.set(absolutePath, output);
+        snapshots.push({
+            filePath: absolutePath,
+            oldContents: fileContents,
+            newContents: output,
+            logLine: Number.isFinite(firstLogLine) ? firstLogLine : 1,
+        });
+    }
+    (0, undo_stack_1.pushTransactionToUndoStack)({
+        snapshots,
+        logLevel,
+        remotionRoot,
+        description: {
+            undoMessage: `↩️  ${undoLabel}`,
+            redoMessage: `↪️  ${redoLabel}`,
+        },
+        entryType: 'effect-props',
+        suppressHmrOnFileRestore: true,
+    });
+    for (const [absolutePath, output] of outputByPath) {
+        (0, undo_stack_1.suppressUndoStackInvalidation)(absolutePath);
+        (0, watch_ignore_next_change_1.suppressBundlerUpdateForFile)(absolutePath);
+        (0, file_watcher_1.writeFileAndNotifyFileWatchers)(absolutePath, output, clientId);
+    }
+    for (const index of edits.keys()) {
+        const result = resultByIndex.get(index);
+        if (!result) {
+            throw new Error('Could not compute effect prop edit result');
+        }
+        (0, log_effect_update_1.logEffectUpdate)({
+            fileRelativeToRoot: result.fileRelativeToRoot,
+            line: result.logLine,
+            effectName: result.effectCallee,
+            propKey: result.edit.edit.key,
+            oldValueString: result.oldValueString,
+            newValueString: result.newValueString,
+            defaultValueString: result.edit.defaultValueString,
+            formatted: result.formatted,
+            logLevel,
+            removedProps: result.removedProps,
+            addedProps: [],
+        });
+    }
+    (0, undo_stack_1.printUndoHint)(logLevel);
+    const statusTargets = [
+        ...new Map(edits.map((edit) => [
+            JSON.stringify([
+                edit.fileName,
+                edit.sequenceNodePath.nodePath,
+                edit.effectIndex,
+            ]),
+            edit,
+        ])).values(),
+    ];
+    const results = statusTargets.map((edit) => {
+        const { absolutePath } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
+            remotionRoot,
+            fileName: edit.fileName,
+            action: 'modify',
+        });
+        const output = outputByPath.get(absolutePath);
+        if (!output) {
+            throw new Error('Could not compute effect prop edit status');
+        }
+        const ast = (0, parse_ast_1.parseAst)(output);
+        const jsx = (0, can_update_sequence_props_1.findJsxElementAtNodePath)(ast, edit.sequenceNodePath.nodePath);
+        const status = jsx
+            ? (0, can_update_effect_props_1.computeEffectPropStatus)({
+                ast,
+                jsx,
+                effectIndex: edit.effectIndex,
+                keys: (0, studio_shared_1.getAllSchemaKeys)(edit.schema),
+                videoConfigValues: (0, video_config_values_1.getVideoConfigIdentifierValues)({
+                    ast,
+                    videoConfigValues: edit.sequenceNodePath.videoConfigValues,
+                }),
+            })
+            : {
+                canUpdate: false,
+                effectIndex: edit.effectIndex,
+                reason: 'not-found',
+            };
+        return {
+            fileName: edit.fileName,
+            sequenceNodePath: edit.sequenceNodePath,
+            status,
+        };
+    });
+    return { results };
+});
+exports.saveMultipleEffectPropsHandler = saveMultipleEffectPropsHandler;

package/dist/preview-server/routes/save-sequence-props.js

@@ -4,6 +4,7 @@ exports.saveSequencePropsHandler = exports.shouldSuppressHmrForSequencePropEdits
 const node_fs_1 = require("node:fs");
 const renderer_1 = require("@remotion/renderer");
 const studio_shared_1 = require("@remotion/studio-shared");
+const update_inline_caption_patches_1 = require("../../codemods/update-inline-caption-patches");
 const update_keyframes_1 = require("../../codemods/update-keyframes/update-keyframes");
 const update_sequence_props_1 = require("../../codemods/update-sequence-props/update-sequence-props");
 const file_watcher_1 = require("../../file-watcher");
@@ -59,8 +60,8 @@ const shouldSuppressHmrForSequencePropEdits = (edits) => {
         (edit.sourceEdit === null || edit.sourceEdit === undefined));
 };
 exports.shouldSuppressHmrForSequencePropEdits = shouldSuppressHmrForSequencePropEdits;
-const saveSequencePropsHandler = ({ input: { edits, addedKeyframes, movedKeyframes, clientId, undoLabel, redoLabel, }, remotionRoot, logLevel, }) => (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
-    var _a, _b, _c, _d;
+const saveSequencePropsHandler = ({ input: { edits, addedKeyframes, movedKeyframes, captionPatches = [], clientId, undoLabel, redoLabel, }, remotionRoot, logLevel, }) => (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
+    var _a, _b, _c, _d, _e;
     const keyframesToAdd = addedKeyframes === null ? [] : addedKeyframes;
     const keyframesToMove = movedKeyframes === null
         ? { sequenceKeyframes: [], effectKeyframes: [] }
@@ -68,11 +69,12 @@ const saveSequencePropsHandler = ({ input: { edits, addedKeyframes, movedKeyfram
     const totalKeyframeMoves = keyframesToMove.sequenceKeyframes.length +
         keyframesToMove.effectKeyframes.length;
     if (edits.length === 0 &&
+        captionPatches.length === 0 &&
         keyframesToAdd.length === 0 &&
         totalKeyframeMoves === 0) {
         throw new Error('No sequence prop edits to save');
     }
-    renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[save-sequence-props] Received request with ${edits.length} edit(s), ${keyframesToAdd.length} added keyframe(s), and ${totalKeyframeMoves} moved keyframe(s)`);
+    renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[save-sequence-props] Received request with ${edits.length} edit(s), ${captionPatches.length} caption patch request(s), ${keyframesToAdd.length} added keyframe(s), and ${totalKeyframeMoves} moved keyframe(s)`);
     const editGroups = new Map();
     for (const [index, edit] of edits.entries()) {
         const parsedValue = parseSequencePropEditValue(edit.value);
@@ -85,6 +87,7 @@ const saveSequencePropsHandler = ({ input: { edits, addedKeyframes, movedKeyfram
         const group = (_a = editGroups.get(absolutePath)) !== null && _a !== void 0 ? _a : {
             fileRelativeToRoot,
             edits: [],
+            captionPatches: [],
             addedKeyframes: [],
             movedSequenceKeyframes: [],
             effectKeyframes: [],
@@ -105,15 +108,33 @@ const saveSequencePropsHandler = ({ input: { edits, addedKeyframes, movedKeyfram
         });
         editGroups.set(absolutePath, group);
     }
+    for (const captionPatch of captionPatches) {
+        const { absolutePath, fileRelativeToRoot } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
+            remotionRoot,
+            fileName: captionPatch.fileName,
+            action: 'modify',
+        });
+        const group = (_b = editGroups.get(absolutePath)) !== null && _b !== void 0 ? _b : {
+            fileRelativeToRoot,
+            edits: [],
+            captionPatches: [],
+            addedKeyframes: [],
+            movedSequenceKeyframes: [],
+            effectKeyframes: [],
+        };
+        group.captionPatches.push(captionPatch);
+        editGroups.set(absolutePath, group);
+    }
     for (const keyframe of keyframesToAdd) {
         const { absolutePath, fileRelativeToRoot } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
             remotionRoot,
             fileName: keyframe.fileName,
             action: 'modify',
         });
-        const group = (_b = editGroups.get(absolutePath)) !== null && _b !== void 0 ? _b : {
+        const group = (_c = editGroups.get(absolutePath)) !== null && _c !== void 0 ? _c : {
             fileRelativeToRoot,
             edits: [],
+            captionPatches: [],
             addedKeyframes: [],
             movedSequenceKeyframes: [],
             effectKeyframes: [],
@@ -127,9 +148,10 @@ const saveSequencePropsHandler = ({ input: { edits, addedKeyframes, movedKeyfram
             fileName: keyframe.fileName,
             action: 'modify',
         });
-        const group = (_c = editGroups.get(absolutePath)) !== null && _c !== void 0 ? _c : {
+        const group = (_d = editGroups.get(absolutePath)) !== null && _d !== void 0 ? _d : {
             fileRelativeToRoot,
             edits: [],
+            captionPatches: [],
             addedKeyframes: [],
             movedSequenceKeyframes: [],
             effectKeyframes: [],
@@ -143,9 +165,10 @@ const saveSequencePropsHandler = ({ input: { edits, addedKeyframes, movedKeyfram
             fileName: keyframe.fileName,
             action: 'modify',
         });
-        const group = (_d = editGroups.get(absolutePath)) !== null && _d !== void 0 ? _d : {
+        const group = (_e = editGroups.get(absolutePath)) !== null && _e !== void 0 ? _e : {
             fileRelativeToRoot,
             edits: [],
+            captionPatches: [],
             addedKeyframes: [],
             movedSequenceKeyframes: [],
             effectKeyframes: [],
@@ -157,6 +180,7 @@ const saveSequencePropsHandler = ({ input: { edits, addedKeyframes, movedKeyfram
     const outputByPath = new Map();
     const resultByIndex = new Map();
     const sequenceKeyframeLogs = [];
+    const captionPatchLogs = [];
     const effectKeyframeLogs = [];
     for (const [absolutePath, group] of editGroups) {
         const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
@@ -183,6 +207,32 @@ const saveSequencePropsHandler = ({ input: { edits, addedKeyframes, movedKeyfram
                 });
             }
         }
+        for (const captionPatchRequest of group.captionPatches) {
+            const result = (0, update_inline_caption_patches_1.updateInlineCaptionPatches)({
+                input: output,
+                nodePath: captionPatchRequest.nodePath.nodePath,
+                patches: captionPatchRequest.patches,
+            });
+            output = result.output;
+            firstLogLine = Math.min(firstLogLine, result.logLine);
+            for (const [index, patch] of captionPatchRequest.patches.entries()) {
+                const changedFields = result.changedFields[index];
+                if (!changedFields) {
+                    throw new Error('Could not determine changed caption fields');
+                }
+                captionPatchLogs.push({
+                    fileRelativeToRoot: group.fileRelativeToRoot,
+                    line: result.logLine,
+                    index: patch.index,
+                    oldValueString: changedFields
+                        .map((field) => `${field}: ${patch.before[field]}`)
+                        .join(', '),
+                    newValueString: changedFields
+                        .map((field) => `${field}: ${patch.changes[field]}`)
+                        .join(', '),
+                });
+            }
+        }
         for (const keyframeGroup of groupBy(group.addedKeyframes, (keyframe) => JSON.stringify(keyframe.nodePath.nodePath))) {
             const [firstSequenceKeyframe] = keyframeGroup;
             if (!firstSequenceKeyframe) {
@@ -310,7 +360,8 @@ const saveSequencePropsHandler = ({ input: { edits, addedKeyframes, movedKeyfram
     }
     const undoMessage = `↩️  ${undoLabel}`;
     const redoMessage = `↪️  ${redoLabel}`;
-    const suppressHmr = (0, exports.shouldSuppressHmrForSequencePropEdits)(edits);
+    const suppressHmr = captionPatches.length === 0 &&
+        (0, exports.shouldSuppressHmrForSequencePropEdits)(edits);
     (0, undo_stack_1.pushTransactionToUndoStack)({
         snapshots,
         logLevel,
@@ -346,6 +397,20 @@ const saveSequencePropsHandler = ({ input: { edits, addedKeyframes, movedKeyfram
             });
         }
     }
+    for (const log of captionPatchLogs) {
+        (0, log_update_1.logUpdate)({
+            fileRelativeToRoot: log.fileRelativeToRoot,
+            line: log.line,
+            key: `captions[${log.index}]`,
+            oldValueString: log.oldValueString,
+            newValueString: log.newValueString,
+            defaultValueString: null,
+            formatted: true,
+            logLevel,
+            removedProps: [],
+            addedProps: [],
+        });
+    }
     for (const log of sequenceKeyframeLogs) {
         (0, log_update_1.logUpdate)({
             fileRelativeToRoot: log.fileRelativeToRoot,
@@ -377,7 +442,7 @@ const saveSequencePropsHandler = ({ input: { edits, addedKeyframes, movedKeyfram
     }
     (0, undo_stack_1.printUndoHint)(logLevel);
     const statusTargets = [
-        ...new Map([...edits, ...keyframesToAdd].map((target) => [
+        ...new Map([...edits, ...captionPatches, ...keyframesToAdd].map((target) => [
             JSON.stringify(target.nodePath),
             target,
         ])).values(),

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.499",
+	"version": "4.0.501",
 	"description": "Run a Remotion Studio with a server backend",
 	"main": "dist",
 	"scripts": {
@@ -23,7 +23,7 @@
 		"access": "public"
 	},
 	"dependencies": {
-		"@remotion/drag-and-drop": "4.0.499",
+		"@remotion/drag-and-drop": "4.0.501",
 		"@babel/types": "7.24.0",
 		"@babel/parser": "7.24.1",
 		"@svgr/core": "8.1.0",
@@ -31,11 +31,12 @@
 		"kiwi-schema": "0.5.0",
 		"semver": "7.5.3",
 		"prettier": "3.8.1",
-		"remotion": "4.0.499",
+		"remotion": "4.0.501",
 		"recast": "0.23.11",
-		"@remotion/bundler": "4.0.499",
-		"@remotion/renderer": "4.0.499",
-		"@remotion/studio-shared": "4.0.499",
+		"@remotion/bundler": "4.0.501",
+		"@remotion/renderer": "4.0.501",
+		"@remotion/studio-codemods": "4.0.501",
+		"@remotion/studio-shared": "4.0.501",
 		"memfs": "3.4.3",
 		"open": "8.4.2"
 	},
@@ -43,7 +44,7 @@
 		"ast-types": "0.16.1",
 		"react": "19.2.3",
 		"@types/semver": "7.5.3",
-		"@remotion/eslint-config-internal": "4.0.499",
+		"@remotion/eslint-config-internal": "4.0.501",
 		"eslint": "9.19.0",
 		"@types/node": "20.12.14",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"