@remotion/studio-server 4.0.432 → 4.0.433

package/dist/codemods/update-nested-prop.d.ts

@@ -1,13 +1,11 @@
-import { type EnumPath } from '@remotion/studio-shared';
-import type { namedTypes } from 'ast-types';
+import type { JSXOpeningElement } from '@babel/types';
 import type { ExpressionKind } from 'ast-types/lib/gen/kinds';
-export declare const parseValueExpression: (value: unknown, enumPaths: EnumPath[]) => ExpressionKind;
-export declare const updateNestedProp: ({ node, parentKey, childKey, value, enumPaths, defaultValue, isDefault, }: {
-    node: namedTypes.JSXOpeningElement;
+export declare const parseValueExpression: (value: unknown) => ExpressionKind;
+export declare const updateNestedProp: ({ node, parentKey, childKey, value, defaultValue, isDefault, }: {
+    node: JSXOpeningElement;
     parentKey: string;
     childKey: string;
     value: unknown;
-    enumPaths: EnumPath[];
     defaultValue: unknown;
     isDefault: boolean;
 }) => string;

package/dist/codemods/update-nested-prop.js

@@ -38,8 +38,8 @@ const studio_shared_1 = require("@remotion/studio-shared");
 const recast = __importStar(require("recast"));
 const parse_ast_1 = require("./parse-ast");
 const b = recast.types.builders;
-const parseValueExpression = (value, enumPaths) => {
-    return (0, parse_ast_1.parseAst)(`a = ${(0, studio_shared_1.stringifyDefaultProps)({ props: value, enumPaths })}`)
+const parseValueExpression = (value) => {
+    return (0, parse_ast_1.parseAst)(`a = ${(0, studio_shared_1.stringifyDefaultProps)({ props: value, enumPaths: [] })}`)
         .program.body[0].expression.right;
 };
 exports.parseValueExpression = parseValueExpression;
@@ -64,11 +64,9 @@ const findJsxAttribute = (attributes, name) => {
 const findObjectProperty = (objExpr, propertyName) => {
     const propIndex = objExpr.properties.findIndex((p) => p.type === 'ObjectProperty' &&
         ((p.key.type === 'Identifier' &&
-            p.key.name ===
-                propertyName) ||
+            p.key.name === propertyName) ||
             (p.key.type === 'StringLiteral' &&
-                p.key
-                    .value === propertyName)));
+                p.key.value === propertyName)));
     return {
         propIndex,
         prop: propIndex !== -1
@@ -118,8 +116,8 @@ const removeNestedProp = ({ attr, attrIndex, attributes, childKey, }) => {
         attributes.splice(attrIndex, 1);
     }
 };
-const setNestedProp = ({ attr, attributes, parentKey, childKey, value, enumPaths, }) => {
-    const parsedValue = (0, exports.parseValueExpression)(value, enumPaths);
+const setNestedProp = ({ attr, attributes, parentKey, childKey, value, }) => {
+    const parsedValue = (0, exports.parseValueExpression)(value);
     if (attr) {
         const objExpr = getObjectExpression(attr);
         if (objExpr) {
@@ -140,7 +138,7 @@ const setNestedProp = ({ attr, attributes, parentKey, childKey, value, enumPaths
         attributes.push(newAttr);
     }
 };
-const updateNestedProp = ({ node, parentKey, childKey, value, enumPaths, defaultValue, isDefault, }) => {
+const updateNestedProp = ({ node, parentKey, childKey, value, defaultValue, isDefault, }) => {
     if (!node.attributes) {
         node.attributes = [];
     }
@@ -151,7 +149,7 @@ const updateNestedProp = ({ node, parentKey, childKey, value, enumPaths, default
         removeNestedProp({ attr, attrIndex, attributes, childKey });
     }
     else {
-        setNestedProp({ attr, attributes, parentKey, childKey, value, enumPaths });
+        setNestedProp({ attr, attributes, parentKey, childKey, value });
     }
     return oldValueString;
 };

package/dist/codemods/update-sequence-props.d.ts

@@ -1,12 +1,13 @@
-import type { EnumPath } from '@remotion/studio-shared';
-export declare const updateSequenceProps: ({ input, targetLine, key, value, enumPaths, defaultValue, }: {
+import type { SequenceNodePath } from '@remotion/studio-shared';
+export declare const updateSequenceProps: ({ input, nodePath, key, value, defaultValue, prettierConfigOverride, }: {
     input: string;
-    targetLine: number;
+    nodePath: SequenceNodePath;
     key: string;
     value: unknown;
-    enumPaths: EnumPath[];
     defaultValue: unknown;
+    prettierConfigOverride?: Record<string, unknown> | null | undefined;
 }) => Promise<{
     output: string;
     oldValueString: string;
+    formatted: boolean;
 }>;

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

@@ -35,12 +35,13 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.updateSequenceProps = void 0;
 const recast = __importStar(require("recast"));
+const can_update_sequence_props_1 = require("../preview-server/routes/can-update-sequence-props");
 const parse_ast_1 = require("./parse-ast");
 const update_nested_prop_1 = require("./update-nested-prop");
 const b = recast.types.builders;
-const updateSequenceProps = async ({ input, targetLine, key, value, enumPaths, defaultValue, }) => {
+const updateSequenceProps = async ({ input, nodePath, key, value, defaultValue, prettierConfigOverride, }) => {
+    var _a, _b;
     const ast = (0, parse_ast_1.parseAst)(input);
-    let found = false;
     let oldValueString = '';
     const isDefault = defaultValue !== null &&
         JSON.stringify(value) === JSON.stringify(defaultValue);
@@ -48,61 +49,55 @@ const updateSequenceProps = async ({ input, targetLine, key, value, enumPaths, d
     const isNested = dotIndex !== -1;
     const parentKey = isNested ? key.slice(0, dotIndex) : key;
     const childKey = isNested ? key.slice(dotIndex + 1) : '';
-    recast.types.visit(ast, {
-        visitJSXOpeningElement(path) {
-            var _a, _b;
-            const { node } = path;
-            if (!node.loc || node.loc.start.line !== targetLine) {
-                return this.traverse(path);
-            }
-            if (isNested) {
-                oldValueString = (0, update_nested_prop_1.updateNestedProp)({
-                    node,
-                    parentKey,
-                    childKey,
-                    value,
-                    enumPaths,
-                    defaultValue,
-                    isDefault,
-                });
-                found = true;
-                return this.traverse(path);
-            }
-            const attrIndex = (_a = node.attributes) === null || _a === void 0 ? void 0 : _a.findIndex((a) => {
-                if (a.type === 'JSXSpreadAttribute') {
-                    return false;
-                }
-                if (a.name.type === 'JSXNamespacedName') {
-                    return false;
-                }
-                return a.name.name === key;
-            });
-            const attr = attrIndex !== undefined && attrIndex !== -1
-                ? (_b = node.attributes) === null || _b === void 0 ? void 0 : _b[attrIndex]
-                : undefined;
-            if (attr && attr.type !== 'JSXSpreadAttribute' && attr.value) {
-                const printed = recast.print(attr.value).code;
-                // Strip JSX expression container braces, e.g. "{30}" -> "30"
-                oldValueString =
-                    printed.startsWith('{') && printed.endsWith('}')
-                        ? printed.slice(1, -1)
-                        : printed;
-            }
-            else if (attr && attr.type !== 'JSXSpreadAttribute' && !attr.value) {
-                // JSX shorthand like `loop` (no value) is implicitly `true`
-                oldValueString = 'true';
+    const node = (0, can_update_sequence_props_1.findJsxElementAtNodePath)(ast, nodePath);
+    if (!node) {
+        throw new Error('Could not find a JSX element at the specified line to update');
+    }
+    if (isNested) {
+        oldValueString = (0, update_nested_prop_1.updateNestedProp)({
+            node,
+            parentKey,
+            childKey,
+            value,
+            defaultValue,
+            isDefault,
+        });
+    }
+    else {
+        const attrIndex = (_a = node.attributes) === null || _a === void 0 ? void 0 : _a.findIndex((a) => {
+            if (a.type === 'JSXSpreadAttribute') {
+                return false;
             }
-            else if (!attr && defaultValue !== null) {
-                oldValueString = JSON.stringify(defaultValue);
+            if (a.name.type === 'JSXNamespacedName') {
+                return false;
             }
-            if (isDefault) {
-                if (attr && attr.type !== 'JSXSpreadAttribute' && node.attributes) {
-                    node.attributes.splice(attrIndex, 1);
-                }
-                found = true;
-                return this.traverse(path);
+            return a.name.name === key;
+        });
+        const attr = attrIndex !== undefined && attrIndex !== -1
+            ? (_b = node.attributes) === null || _b === void 0 ? void 0 : _b[attrIndex]
+            : undefined;
+        if (attr && attr.type !== 'JSXSpreadAttribute' && attr.value) {
+            const printed = recast.print(attr.value).code;
+            // Strip JSX expression container braces, e.g. "{30}" -> "30"
+            oldValueString =
+                printed.startsWith('{') && printed.endsWith('}')
+                    ? printed.slice(1, -1)
+                    : printed;
+        }
+        else if (attr && attr.type !== 'JSXSpreadAttribute' && !attr.value) {
+            // JSX shorthand like `loop` (no value) is implicitly `true`
+            oldValueString = 'true';
+        }
+        else if (!attr && defaultValue !== null) {
+            oldValueString = JSON.stringify(defaultValue);
+        }
+        if (isDefault) {
+            if (attr && attr.type !== 'JSXSpreadAttribute' && node.attributes) {
+                node.attributes.splice(attrIndex, 1);
             }
-            const parsed = (0, update_nested_prop_1.parseValueExpression)(value, enumPaths);
+        }
+        else {
+            const parsed = (0, update_nested_prop_1.parseValueExpression)(value);
             const newValue = value === true ? null : b.jsxExpressionContainer(parsed);
             if (!attr || attr.type === 'JSXSpreadAttribute') {
                 const newAttr = b.jsxAttribute(b.jsxIdentifier(key), newValue);
@@ -114,36 +109,53 @@ const updateSequenceProps = async ({ input, targetLine, key, value, enumPaths, d
             else {
                 attr.value = newValue;
             }
-            found = true;
-            return this.traverse(path);
-        },
-    });
-    if (!found) {
-        throw new Error('Could not find a JSX element at the specified line to update');
+        }
     }
+    const finalFile = (0, parse_ast_1.serializeAst)(ast);
     let prettier = null;
     try {
         prettier = await Promise.resolve().then(() => __importStar(require('prettier')));
     }
-    catch (_a) {
-        throw new Error('Prettier cannot be found in the current project.');
+    catch (_c) {
+        return {
+            output: finalFile,
+            oldValueString,
+            formatted: false,
+        };
     }
     const { format, resolveConfig, resolveConfigFile } = prettier;
-    const configFilePath = await resolveConfigFile();
-    if (!configFilePath) {
-        throw new Error('The Prettier config file was not found');
+    let prettierConfig;
+    if (prettierConfigOverride !== undefined) {
+        prettierConfig = prettierConfigOverride;
+    }
+    else {
+        const configFilePath = await resolveConfigFile();
+        if (!configFilePath) {
+            return {
+                output: finalFile,
+                oldValueString,
+                formatted: false,
+            };
+        }
+        prettierConfig = await resolveConfig(configFilePath);
     }
-    const prettierConfig = await resolveConfig(configFilePath);
     if (!prettierConfig) {
-        throw new Error('The Prettier config file was not found. For this feature, the "prettier" package must be installed and a .prettierrc file must exist.');
+        return {
+            output: finalFile,
+            oldValueString,
+            formatted: false,
+        };
     }
-    const finalFile = (0, parse_ast_1.serializeAst)(ast);
     const prettified = await format(finalFile, {
         ...prettierConfig,
         filepath: 'test.tsx',
         plugins: [],
-        endOfLine: 'auto',
+        endOfLine: 'lf',
     });
-    return { output: prettified, oldValueString };
+    return {
+        output: prettified,
+        oldValueString,
+        formatted: true,
+    };
 };
 exports.updateSequenceProps = updateSequenceProps;

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

@@ -1,8 +1,17 @@
-import type { Expression } from '@babel/types';
-import type { CanUpdateSequencePropsResponse } from '@remotion/studio-shared';
+import type { Expression, File, JSXOpeningElement } from '@babel/types';
+import type { CanUpdateSequencePropsResponse, SequenceNodePath } from '@remotion/studio-shared';
 export declare const isStaticValue: (node: Expression) => boolean;
 export declare const extractStaticValue: (node: Expression) => unknown;
-export declare const computeSequencePropsStatus: ({ fileName, line, keys, remotionRoot, }: {
+export declare const findJsxElementAtNodePath: (ast: File, nodePath: SequenceNodePath) => JSXOpeningElement | null;
+export declare const lineColumnToNodePath: (ast: File, targetLine: number) => SequenceNodePath | null;
+export declare const computeSequencePropsStatusFromContent: (fileContents: string, nodePath: SequenceNodePath, keys: string[]) => CanUpdateSequencePropsResponse;
+export declare const computeSequencePropsStatus: ({ fileName, nodePath, keys, remotionRoot, }: {
+    fileName: string;
+    nodePath: SequenceNodePath;
+    keys: string[];
+    remotionRoot: string;
+}) => CanUpdateSequencePropsResponse;
+export declare const computeSequencePropsStatusByLine: ({ fileName, line, keys, remotionRoot, }: {
     fileName: string;
     line: number;
     keys: string[];

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

@@ -36,7 +36,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.computeSequencePropsStatus = exports.extractStaticValue = exports.isStaticValue = void 0;
+exports.computeSequencePropsStatusByLine = exports.computeSequencePropsStatus = exports.computeSequencePropsStatusFromContent = exports.lineColumnToNodePath = exports.findJsxElementAtNodePath = exports.extractStaticValue = exports.isStaticValue = void 0;
 const node_fs_1 = require("node:fs");
 const node_path_1 = __importDefault(require("node:path"));
 const recast = __importStar(require("recast"));
@@ -151,19 +151,64 @@ const getPropsStatus = (jsxElement) => {
     }
     return props;
 };
-const findJsxElementAtLine = (ast, targetLine) => {
-    let found = null;
+const getNodePathForRecastPath = (
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+recastPath) => {
+    const segments = [];
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let current = recastPath;
+    while (current && current.parentPath) {
+        segments.unshift(current.name);
+        current = current.parentPath;
+    }
+    // Recast paths start with "root" which doesn't correspond to a real AST property
+    if (segments.length > 0 && segments[0] === 'root') {
+        return segments.slice(1);
+    }
+    return segments;
+};
+const findJsxElementAtNodePath = (ast, nodePath) => {
+    let current = new recast.types.NodePath(ast);
+    for (const segment of nodePath) {
+        current = current.get(segment);
+        if (current.value === null || current.value === undefined) {
+            return null;
+        }
+    }
+    if (recast.types.namedTypes.JSXOpeningElement.check(current.value)) {
+        return current.value;
+    }
+    return null;
+};
+exports.findJsxElementAtNodePath = findJsxElementAtNodePath;
+const lineColumnToNodePath = (ast, targetLine) => {
+    let foundPath = null;
     recast.types.visit(ast, {
-        visitJSXOpeningElement(nodePath) {
-            const { node } = nodePath;
+        visitJSXOpeningElement(p) {
+            const { node } = p;
             if (node.loc && node.loc.start.line === targetLine) {
-                found = node;
+                foundPath = getNodePathForRecastPath(p);
                 return false;
             }
-            return this.traverse(nodePath);
+            return this.traverse(p);
         },
     });
-    return found;
+    return foundPath;
+};
+exports.lineColumnToNodePath = lineColumnToNodePath;
+const PIXEL_VALUE_REGEX = /^-?\d+(\.\d+)?px$/;
+const isSupportedTranslateValue = (value) => {
+    const parts = value.split(/\s+/);
+    if (parts.length === 1 || parts.length === 2) {
+        return parts.every((part) => PIXEL_VALUE_REGEX.test(part));
+    }
+    return false;
+};
+const validateStyleValue = (childKey, value) => {
+    if (childKey === 'translate' && typeof value === 'string') {
+        return isSupportedTranslateValue(value);
+    }
+    return true;
 };
 const getNestedPropStatus = (jsxElement, parentKey, childKey) => {
     const attr = jsxElement.attributes.find((a) => a.type !== 'JSXSpreadAttribute' &&
@@ -194,9 +239,58 @@ const getNestedPropStatus = (jsxElement, parentKey, childKey) => {
     if (!(0, exports.isStaticValue)(propValue)) {
         return { canUpdate: false, reason: 'computed' };
     }
-    return { canUpdate: true, codeValue: (0, exports.extractStaticValue)(propValue) };
+    const codeValue = (0, exports.extractStaticValue)(propValue);
+    if (!validateStyleValue(childKey, codeValue)) {
+        return { canUpdate: false, reason: 'computed' };
+    }
+    return { canUpdate: true, codeValue };
+};
+const computeSequencePropsStatusFromContent = (fileContents, nodePath, keys) => {
+    const ast = (0, parse_ast_1.parseAst)(fileContents);
+    const jsxElement = (0, exports.findJsxElementAtNodePath)(ast, nodePath);
+    if (!jsxElement) {
+        throw new Error('Could not find a JSX element at the specified location');
+    }
+    const allProps = getPropsStatus(jsxElement);
+    const filteredProps = {};
+    for (const key of keys) {
+        const dotIndex = key.indexOf('.');
+        if (dotIndex !== -1) {
+            filteredProps[key] = getNestedPropStatus(jsxElement, key.slice(0, dotIndex), key.slice(dotIndex + 1));
+        }
+        else if (key in allProps) {
+            filteredProps[key] = allProps[key];
+        }
+        else {
+            filteredProps[key] = { canUpdate: true, codeValue: undefined };
+        }
+    }
+    return {
+        canUpdate: true,
+        props: filteredProps,
+        nodePath,
+    };
+};
+exports.computeSequencePropsStatusFromContent = computeSequencePropsStatusFromContent;
+const computeSequencePropsStatus = ({ fileName, nodePath, keys, remotionRoot, }) => {
+    try {
+        const absolutePath = node_path_1.default.resolve(remotionRoot, fileName);
+        const fileRelativeToRoot = node_path_1.default.relative(remotionRoot, absolutePath);
+        if (fileRelativeToRoot.startsWith('..')) {
+            throw new Error('Cannot read a file outside the project');
+        }
+        const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
+        return (0, exports.computeSequencePropsStatusFromContent)(fileContents, nodePath, keys);
+    }
+    catch (err) {
+        return {
+            canUpdate: false,
+            reason: err.message,
+        };
+    }
 };
-const computeSequencePropsStatus = ({ fileName, line, keys, remotionRoot, }) => {
+exports.computeSequencePropsStatus = computeSequencePropsStatus;
+const computeSequencePropsStatusByLine = ({ fileName, line, keys, remotionRoot, }) => {
     try {
         const absolutePath = node_path_1.default.resolve(remotionRoot, fileName);
         const fileRelativeToRoot = node_path_1.default.relative(remotionRoot, absolutePath);
@@ -205,28 +299,16 @@ const computeSequencePropsStatus = ({ fileName, line, keys, remotionRoot, }) =>
         }
         const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
         const ast = (0, parse_ast_1.parseAst)(fileContents);
-        const jsxElement = findJsxElementAtLine(ast, line);
-        if (!jsxElement) {
+        const resolvedNodePath = (0, exports.lineColumnToNodePath)(ast, line);
+        if (!resolvedNodePath) {
             throw new Error('Could not find a JSX element at the specified location');
         }
-        const allProps = getPropsStatus(jsxElement);
-        const filteredProps = {};
-        for (const key of keys) {
-            const dotIndex = key.indexOf('.');
-            if (dotIndex !== -1) {
-                filteredProps[key] = getNestedPropStatus(jsxElement, key.slice(0, dotIndex), key.slice(dotIndex + 1));
-            }
-            else if (key in allProps) {
-                filteredProps[key] = allProps[key];
-            }
-            else {
-                filteredProps[key] = { canUpdate: true, codeValue: undefined };
-            }
-        }
-        return {
-            canUpdate: true,
-            props: filteredProps,
-        };
+        return (0, exports.computeSequencePropsStatus)({
+            fileName,
+            nodePath: resolvedNodePath,
+            keys,
+            remotionRoot,
+        });
     }
     catch (err) {
         return {
@@ -235,4 +317,4 @@ const computeSequencePropsStatus = ({ fileName, line, keys, remotionRoot, }) =>
         };
     }
 };
-exports.computeSequencePropsStatus = computeSequencePropsStatus;
+exports.computeSequencePropsStatusByLine = computeSequencePropsStatusByLine;

package/dist/preview-server/routes/log-update.d.ts

@@ -0,0 +1,10 @@
+export declare const logUpdate: ({ absolutePath, fileRelativeToRoot, key, oldValueString, newValueString, defaultValueString, formatted, logLevel, }: {
+    absolutePath: string;
+    fileRelativeToRoot: string;
+    key: string;
+    oldValueString: string;
+    newValueString: string;
+    defaultValueString: string | null;
+    formatted: boolean;
+    logLevel: "error" | "info" | "trace" | "verbose" | "warn";
+}) => void;

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

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.logUpdate = void 0;
+const renderer_1 = require("@remotion/renderer");
+const make_link_1 = require("../../hyperlinks/make-link");
+let warnedAboutPrettier = false;
+const normalizeQuotes = (str) => {
+    if (str.length >= 2 &&
+        ((str.startsWith("'") && str.endsWith("'")) ||
+            (str.startsWith('"') && str.endsWith('"')))) {
+        return `'${str.slice(1, -1)}'`;
+    }
+    return str;
+};
+const formatValueChange = ({ oldValueString, newValueString, defaultValueString, }) => {
+    // Changed to default value (prop gets deleted) → show only old value in red
+    if (defaultValueString !== null && newValueString === defaultValueString) {
+        return renderer_1.RenderInternals.chalk.red(oldValueString);
+    }
+    // Changed from default value (prop gets added) → show only new value in green
+    if (defaultValueString !== null && oldValueString === defaultValueString) {
+        return renderer_1.RenderInternals.chalk.green(newValueString);
+    }
+    return `${renderer_1.RenderInternals.chalk.red(oldValueString)} \u2192 ${renderer_1.RenderInternals.chalk.green(newValueString)}`;
+};
+const formatPropChange = ({ key, oldValueString, newValueString, defaultValueString, }) => {
+    const isResetToDefault = defaultValueString !== null && newValueString === defaultValueString;
+    const isChangeFromDefault = defaultValueString !== null && oldValueString === defaultValueString;
+    const valueChange = formatValueChange({
+        oldValueString,
+        newValueString,
+        defaultValueString,
+    });
+    const dotIndex = key.indexOf('.');
+    if (dotIndex === -1) {
+        if (isResetToDefault) {
+            return renderer_1.RenderInternals.chalk.red(`${key}={${oldValueString}}`);
+        }
+        if (isChangeFromDefault) {
+            return renderer_1.RenderInternals.chalk.green(`${key}={${newValueString}}`);
+        }
+        return `${key}={${valueChange}}`;
+    }
+    const parentKey = key.slice(0, dotIndex);
+    const childKey = key.slice(dotIndex + 1);
+    if (isResetToDefault) {
+        return `${parentKey}={{${renderer_1.RenderInternals.chalk.red(`${childKey}: ${oldValueString}`)}}}`;
+    }
+    if (isChangeFromDefault) {
+        return `${parentKey}={{${renderer_1.RenderInternals.chalk.green(`${childKey}: ${newValueString}`)}}}`;
+    }
+    return `${parentKey}={{${childKey}: ${valueChange}}}`;
+};
+const logUpdate = ({ absolutePath, fileRelativeToRoot, key, oldValueString, newValueString, defaultValueString, formatted, logLevel, }) => {
+    const locationLabel = `${fileRelativeToRoot}`;
+    const fileLink = (0, make_link_1.makeHyperlink)({
+        url: `file://${absolutePath}`,
+        text: locationLabel,
+        fallback: locationLabel,
+    });
+    const propChange = formatPropChange({
+        key,
+        oldValueString: normalizeQuotes(oldValueString),
+        newValueString: normalizeQuotes(newValueString),
+        defaultValueString: defaultValueString !== null ? normalizeQuotes(defaultValueString) : null,
+    });
+    renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${fileLink}:`)} ${propChange}`);
+    if (!formatted && !warnedAboutPrettier) {
+        warnedAboutPrettier = true;
+        renderer_1.RenderInternals.Log.warn({ indent: false, logLevel }, renderer_1.RenderInternals.chalk.yellow('Could not format with Prettier. File will need to be formatted manually.'));
+    }
+};
+exports.logUpdate = logUpdate;

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

@@ -6,11 +6,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.saveSequencePropsHandler = void 0;
 const node_fs_1 = require("node:fs");
 const node_path_1 = __importDefault(require("node:path"));
-const renderer_1 = require("@remotion/renderer");
 const update_sequence_props_1 = require("../../codemods/update-sequence-props");
-const make_link_1 = require("../../hyperlinks/make-link");
 const hmr_suppression_1 = require("../hmr-suppression");
-const saveSequencePropsHandler = async ({ input: { fileName, line, column, key, value, enumPaths, defaultValue }, remotionRoot, logLevel, }) => {
+const log_update_1 = require("./log-update");
+const saveSequencePropsHandler = async ({ input: { fileName, nodePath, key, value, defaultValue }, remotionRoot, logLevel, }) => {
     try {
         const absolutePath = node_path_1.default.resolve(remotionRoot, fileName);
         const fileRelativeToRoot = node_path_1.default.relative(remotionRoot, absolutePath);
@@ -18,24 +17,27 @@ const saveSequencePropsHandler = async ({ input: { fileName, line, column, key,
             throw new Error('Cannot modify a file outside the project');
         }
         const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
-        const { output, oldValueString } = await (0, update_sequence_props_1.updateSequenceProps)({
+        const { output, oldValueString, formatted } = await (0, update_sequence_props_1.updateSequenceProps)({
             input: fileContents,
-            targetLine: line,
+            nodePath,
             key,
             value: JSON.parse(value),
-            enumPaths,
             defaultValue: defaultValue !== null ? JSON.parse(defaultValue) : null,
         });
         (0, hmr_suppression_1.suppressHmrForFile)(absolutePath);
         (0, node_fs_1.writeFileSync)(absolutePath, output);
         const newValueString = JSON.stringify(JSON.parse(value));
-        const locationLabel = `${fileRelativeToRoot}:${line}:${column}`;
-        const fileLink = (0, make_link_1.makeHyperlink)({
-            url: `file://${absolutePath}`,
-            text: locationLabel,
-            fallback: locationLabel,
+        const parsedDefault = defaultValue !== null ? JSON.parse(defaultValue) : null;
+        (0, log_update_1.logUpdate)({
+            absolutePath,
+            fileRelativeToRoot,
+            key,
+            oldValueString,
+            newValueString,
+            defaultValueString: parsedDefault !== null ? JSON.stringify(parsedDefault) : null,
+            formatted,
+            logLevel,
         });
-        renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, renderer_1.RenderInternals.chalk.blueBright(`${fileLink} updated: ${key} ${oldValueString} \u2192 ${newValueString}`));
         return {
             success: true,
         };

package/dist/preview-server/routes/subscribe-to-sequence-props.js

@@ -2,11 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.subscribeToSequenceProps = void 0;
 const sequence_props_watchers_1 = require("../sequence-props-watchers");
-const subscribeToSequenceProps = ({ input: { fileName, line, column, keys, clientId }, remotionRoot }) => {
+const subscribeToSequenceProps = ({ input: { fileName, line, keys, clientId }, remotionRoot }) => {
     const result = (0, sequence_props_watchers_1.subscribeToSequencePropsWatchers)({
         fileName,
         line,
-        column,
         keys,
         remotionRoot,
         clientId,

package/dist/preview-server/routes/unsubscribe-from-sequence-props.js

@@ -2,11 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.unsubscribeFromSequenceProps = void 0;
 const sequence_props_watchers_1 = require("../sequence-props-watchers");
-const unsubscribeFromSequenceProps = ({ input: { fileName, line, column, clientId }, remotionRoot }) => {
+const unsubscribeFromSequenceProps = ({ input: { fileName, nodePath, clientId }, remotionRoot }) => {
     (0, sequence_props_watchers_1.unsubscribeFromSequencePropsWatchers)({
         fileName,
-        line,
-        column,
+        nodePath,
         remotionRoot,
         clientId,
     });

package/dist/preview-server/sequence-props-watchers.d.ts

@@ -1,16 +1,14 @@
-import type { CanUpdateSequencePropsResponse } from '@remotion/studio-shared';
-export declare const subscribeToSequencePropsWatchers: ({ fileName, line, column, keys, remotionRoot, clientId, }: {
+import type { CanUpdateSequencePropsResponse, SequenceNodePath } from '@remotion/studio-shared';
+export declare const subscribeToSequencePropsWatchers: ({ fileName, line, keys, remotionRoot, clientId, }: {
     fileName: string;
     line: number;
-    column: number;
     keys: string[];
     remotionRoot: string;
     clientId: string;
 }) => CanUpdateSequencePropsResponse;
-export declare const unsubscribeFromSequencePropsWatchers: ({ fileName, line, column, remotionRoot, clientId, }: {
+export declare const unsubscribeFromSequencePropsWatchers: ({ fileName, nodePath, remotionRoot, clientId, }: {
     fileName: string;
-    line: number;
-    column: number;
+    nodePath: SequenceNodePath;
     remotionRoot: string;
     clientId: string;
 }) => void;

package/dist/preview-server/sequence-props-watchers.js

@@ -9,23 +9,28 @@ const file_watcher_1 = require("../file-watcher");
 const live_events_1 = require("./live-events");
 const can_update_sequence_props_1 = require("./routes/can-update-sequence-props");
 const sequencePropsWatchers = {};
-const makeWatcherKey = ({ absolutePath, line, column, }) => {
-    return `${absolutePath}:${line}:${column}`;
+const makeWatcherKey = ({ absolutePath, nodePath, }) => {
+    return `${absolutePath}:${JSON.stringify(nodePath)}`;
 };
-const subscribeToSequencePropsWatchers = ({ fileName, line, column, keys, remotionRoot, clientId, }) => {
+const subscribeToSequencePropsWatchers = ({ fileName, line, keys, remotionRoot, clientId, }) => {
     var _a;
     const absolutePath = node_path_1.default.resolve(remotionRoot, fileName);
-    const watcherKey = makeWatcherKey({ absolutePath, line, column });
-    // Unwatch any existing watcher for the same key
-    if ((_a = sequencePropsWatchers[clientId]) === null || _a === void 0 ? void 0 : _a[watcherKey]) {
-        sequencePropsWatchers[clientId][watcherKey].unwatch();
-    }
-    const initialResult = (0, can_update_sequence_props_1.computeSequencePropsStatus)({
+    // Initial lookup by line+column to resolve the nodePath
+    const initialResult = (0, can_update_sequence_props_1.computeSequencePropsStatusByLine)({
         fileName,
         line,
         keys,
         remotionRoot,
     });
+    if (!initialResult.canUpdate) {
+        return initialResult;
+    }
+    const { nodePath } = initialResult;
+    const watcherKey = makeWatcherKey({ absolutePath, nodePath });
+    // Unwatch any existing watcher for the same key
+    if ((_a = sequencePropsWatchers[clientId]) === null || _a === void 0 ? void 0 : _a[watcherKey]) {
+        sequencePropsWatchers[clientId][watcherKey].unwatch();
+    }
     const { unwatch } = (0, file_watcher_1.installFileWatcher)({
         file: absolutePath,
         onChange: (type) => {
@@ -34,7 +39,7 @@ const subscribeToSequencePropsWatchers = ({ fileName, line, column, keys, remoti
             }
             const result = (0, can_update_sequence_props_1.computeSequencePropsStatus)({
                 fileName,
-                line,
+                nodePath,
                 keys,
                 remotionRoot,
             });
@@ -42,8 +47,7 @@ const subscribeToSequencePropsWatchers = ({ fileName, line, column, keys, remoti
                 listener.sendEventToClient({
                     type: 'sequence-props-updated',
                     fileName,
-                    line,
-                    column,
+                    nodePath,
                     result,
                 });
             });
@@ -56,14 +60,16 @@ const subscribeToSequencePropsWatchers = ({ fileName, line, column, keys, remoti
     return initialResult;
 };
 exports.subscribeToSequencePropsWatchers = subscribeToSequencePropsWatchers;
-const unsubscribeFromSequencePropsWatchers = ({ fileName, line, column, remotionRoot, clientId, }) => {
-    var _a;
+const unsubscribeFromSequencePropsWatchers = ({ fileName, nodePath, remotionRoot, clientId, }) => {
     const absolutePath = node_path_1.default.resolve(remotionRoot, fileName);
-    const watcherKey = makeWatcherKey({ absolutePath, line, column });
-    if (!sequencePropsWatchers[clientId]) {
+    const watcherKey = makeWatcherKey({ absolutePath, nodePath });
+    if (!sequencePropsWatchers[clientId] ||
+        !sequencePropsWatchers[clientId][watcherKey]) {
+        // eslint-disable-next-line no-console
+        console.warn(`Unexpected: unsubscribe for sequence props watcher that does not exist (clientId=${clientId}, key=${watcherKey})`);
         return;
     }
-    (_a = sequencePropsWatchers[clientId][watcherKey]) === null || _a === void 0 ? void 0 : _a.unwatch();
+    sequencePropsWatchers[clientId][watcherKey].unwatch();
     delete sequencePropsWatchers[clientId][watcherKey];
 };
 exports.unsubscribeFromSequencePropsWatchers = unsubscribeFromSequencePropsWatchers;

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.432",
+	"version": "4.0.433",
 	"description": "Run a Remotion Studio with a server backend",
 	"main": "dist",
 	"sideEffects": false,
@@ -27,11 +27,11 @@
 		"@babel/parser": "7.24.1",
 		"semver": "7.5.3",
 		"prettier": "3.8.1",
-		"remotion": "4.0.432",
+		"remotion": "4.0.433",
 		"recast": "0.23.11",
-		"@remotion/bundler": "4.0.432",
-		"@remotion/renderer": "4.0.432",
-		"@remotion/studio-shared": "4.0.432",
+		"@remotion/bundler": "4.0.433",
+		"@remotion/renderer": "4.0.433",
+		"@remotion/studio-shared": "4.0.433",
 		"memfs": "3.4.3",
 		"source-map": "0.7.3",
 		"open": "^8.4.2"
@@ -41,10 +41,10 @@
 		"react": "19.2.3",
 		"@babel/types": "7.24.0",
 		"@types/semver": "^7.3.4",
-		"@remotion/eslint-config-internal": "4.0.432",
+		"@remotion/eslint-config-internal": "4.0.433",
 		"eslint": "9.19.0",
 		"@types/node": "20.12.14",
-		"@typescript/native-preview": "7.0.0-dev.20260301.1"
+		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},
 	"exports": {
 		".": "./dist/index.js",