@remotion/studio-server 4.0.467 → 4.0.468

package/dist/codemods/apply-codemod-to-file.js

@@ -1,22 +1,19 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.applyCodemodToFile = exports.resolveFilePathFromSymbolicatedStack = void 0;
 const node_fs_1 = require("node:fs");
-const node_path_1 = __importDefault(require("node:path"));
+const resolve_file_inside_project_1 = require("../helpers/resolve-file-inside-project");
 const can_update_default_props_1 = require("../preview-server/routes/can-update-default-props");
 const duplicate_composition_1 = require("./duplicate-composition");
 const resolveFilePathFromSymbolicatedStack = (remotionRoot, stack) => {
     if (!stack.originalFileName) {
         throw new Error('Could not determine the file where this composition is defined');
     }
-    const absolutePath = node_path_1.default.resolve(remotionRoot, stack.originalFileName);
-    const fileRelativeToRoot = node_path_1.default.relative(remotionRoot, absolutePath);
-    if (fileRelativeToRoot.startsWith('..')) {
-        throw new Error('Cannot apply codemod to a file outside the project');
-    }
+    const { absolutePath } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
+        remotionRoot,
+        fileName: stack.originalFileName,
+        action: 'apply codemod to',
+    });
     if (!(0, node_fs_1.existsSync)(absolutePath)) {
         throw new Error(`File not found: ${stack.originalFileName}`);
     }

package/dist/codemods/update-keyframes/update-keyframes.d.ts

@@ -0,0 +1,61 @@
+import type { SequenceNodePath } from 'remotion';
+export type KeyframeOperation = {
+    type: 'add';
+    frame: number;
+    value: unknown;
+} | {
+    type: 'remove';
+    frame: number;
+};
+export type SequenceKeyframeUpdate = {
+    key: string;
+    operation: KeyframeOperation;
+};
+export type EffectKeyframeUpdate = {
+    key: string;
+    operation: KeyframeOperation;
+};
+export declare const updateSequenceKeyframesAst: ({ input, nodePath, updates, }: {
+    input: string;
+    nodePath: SequenceNodePath;
+    updates: SequenceKeyframeUpdate[];
+}) => {
+    serialized: string;
+    oldValueStrings: string[];
+    logLine: number;
+};
+export declare const updateSequenceKeyframes: ({ input, nodePath, updates, prettierConfigOverride, }: {
+    input: string;
+    nodePath: SequenceNodePath;
+    updates: SequenceKeyframeUpdate[];
+    prettierConfigOverride?: Record<string, unknown> | null | undefined;
+}) => Promise<{
+    output: string;
+    formatted: boolean;
+    oldValueStrings: string[];
+    logLine: number;
+}>;
+export declare const updateEffectKeyframesAst: ({ input, sequenceNodePath, effectIndex, updates, }: {
+    input: string;
+    sequenceNodePath: SequenceNodePath;
+    effectIndex: number;
+    updates: EffectKeyframeUpdate[];
+}) => {
+    serialized: string;
+    oldValueStrings: string[];
+    logLine: number;
+    effectCallee: string;
+};
+export declare const updateEffectKeyframes: ({ input, sequenceNodePath, effectIndex, updates, prettierConfigOverride, }: {
+    input: string;
+    sequenceNodePath: SequenceNodePath;
+    effectIndex: number;
+    updates: EffectKeyframeUpdate[];
+    prettierConfigOverride?: Record<string, unknown> | null | undefined;
+}) => Promise<{
+    output: string;
+    formatted: boolean;
+    oldValueStrings: string[];
+    logLine: number;
+    effectCallee: string;
+}>;

package/dist/codemods/update-keyframes/update-keyframes.js

@@ -0,0 +1,401 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateEffectKeyframes = exports.updateEffectKeyframesAst = exports.updateSequenceKeyframes = exports.updateSequenceKeyframesAst = void 0;
+const recast = __importStar(require("recast"));
+const can_update_sequence_props_1 = require("../../preview-server/routes/can-update-sequence-props");
+const format_file_content_1 = require("../format-file-content");
+const parse_ast_1 = require("../parse-ast");
+const update_effect_props_1 = require("../update-effect-props/update-effect-props");
+const update_nested_prop_1 = require("../update-nested-prop");
+const b = recast.types.builders;
+const getSupportedCallArgument = (arg) => {
+    if (arg === undefined ||
+        arg.type === 'ArgumentPlaceholder' ||
+        arg.type === 'JSXNamespacedName') {
+        return null;
+    }
+    return arg;
+};
+const getNumericValue = (node) => {
+    if (node.type === 'NumericLiteral') {
+        return node.value;
+    }
+    if (node.type === 'UnaryExpression' &&
+        (node.operator === '-' || node.operator === '+') &&
+        node.argument.type === 'NumericLiteral') {
+        return node.operator === '-' ? -node.argument.value : node.argument.value;
+    }
+    if (node.type === 'TSAsExpression') {
+        return getNumericValue(node.expression);
+    }
+    return null;
+};
+const getInterpolationExpression = (node) => {
+    if (node.type === 'TSAsExpression') {
+        return getInterpolationExpression(node.expression);
+    }
+    if (node.type !== 'CallExpression' ||
+        node.callee.type !== 'Identifier' ||
+        (node.callee.name !== 'interpolate' &&
+            node.callee.name !== 'interpolateColors')) {
+        return null;
+    }
+    const frameArg = getSupportedCallArgument(node.arguments[0]);
+    const inputArg = node.arguments[1];
+    const outputArg = node.arguments[2];
+    if (!frameArg ||
+        !inputArg ||
+        !outputArg ||
+        inputArg.type !== 'ArrayExpression' ||
+        outputArg.type !== 'ArrayExpression' ||
+        inputArg.elements.length !== outputArg.elements.length) {
+        return null;
+    }
+    const keyframes = [];
+    for (let i = 0; i < inputArg.elements.length; i++) {
+        const inputElement = inputArg.elements[i];
+        const outputElement = outputArg.elements[i];
+        if (!inputElement ||
+            !outputElement ||
+            inputElement.type === 'SpreadElement' ||
+            outputElement.type === 'SpreadElement') {
+            return null;
+        }
+        const frame = getNumericValue(inputElement);
+        if (frame === null || !(0, can_update_sequence_props_1.isStaticValue)(outputElement)) {
+            return null;
+        }
+        keyframes.push({
+            frame,
+            output: outputElement,
+            value: (0, can_update_sequence_props_1.extractStaticValue)(outputElement),
+        });
+    }
+    if (keyframes.length === 0) {
+        return null;
+    }
+    const extraArgs = [];
+    for (const arg of node.arguments.slice(3)) {
+        const supportedArg = getSupportedCallArgument(arg);
+        if (!supportedArg) {
+            return null;
+        }
+        extraArgs.push(supportedArg);
+    }
+    return {
+        callee: node.callee,
+        input: frameArg,
+        extraArgs,
+        keyframes,
+    };
+};
+const getInterpolationCalleeForValues = ({ staticValue, newValue, }) => {
+    return b.identifier(typeof staticValue === 'string' && typeof newValue === 'string'
+        ? 'interpolateColors'
+        : 'interpolate');
+};
+const createFrameExpression = (frame) => {
+    return (0, update_nested_prop_1.parseValueExpression)(frame);
+};
+const createInterpolateExpression = ({ callee, input, extraArgs, keyframes, }) => {
+    const sortedKeyframes = [...keyframes].sort((first, second) => first.frame - second.frame);
+    return b.callExpression(callee, [
+        input,
+        b.arrayExpression(sortedKeyframes.map((keyframe) => createFrameExpression(keyframe.frame))),
+        b.arrayExpression(sortedKeyframes.map((keyframe) => keyframe.output)),
+        ...extraArgs,
+    ]);
+};
+const addKeyframe = ({ expression, frame, value, }) => {
+    const existing = getInterpolationExpression(expression);
+    const newOutput = (0, update_nested_prop_1.parseValueExpression)(value);
+    if (existing) {
+        const existingIndex = existing.keyframes.findIndex((keyframe) => keyframe.frame === frame);
+        const nextKeyframes = existingIndex === -1
+            ? [...existing.keyframes, { frame, output: newOutput, value }]
+            : existing.keyframes.map((keyframe, index) => index === existingIndex
+                ? { frame, output: newOutput, value }
+                : keyframe);
+        return createInterpolateExpression({
+            callee: existing.callee,
+            input: existing.input,
+            extraArgs: existing.extraArgs,
+            keyframes: nextKeyframes,
+        });
+    }
+    if (!(0, can_update_sequence_props_1.isStaticValue)(expression)) {
+        throw new Error('Cannot add keyframe to computed expression');
+    }
+    if (frame === 0) {
+        throw new Error('Cannot add keyframe to static expression at frame 0 because interpolate requires two distinct frames');
+    }
+    const staticValue = (0, can_update_sequence_props_1.extractStaticValue)(expression);
+    const staticOutput = (0, update_nested_prop_1.parseValueExpression)(staticValue);
+    return createInterpolateExpression({
+        callee: getInterpolationCalleeForValues({
+            staticValue,
+            newValue: value,
+        }),
+        input: b.identifier('frame'),
+        extraArgs: [],
+        keyframes: [
+            { frame: 0, output: staticOutput, value: staticValue },
+            { frame, output: newOutput, value },
+        ],
+    });
+};
+const removeKeyframe = ({ expression, frame, }) => {
+    const existing = getInterpolationExpression(expression);
+    if (!existing) {
+        throw new Error('Cannot remove keyframe from non-interpolated expression');
+    }
+    const keyframeIndex = existing.keyframes.findIndex((keyframe) => keyframe.frame === frame);
+    if (keyframeIndex === -1) {
+        throw new Error(`Cannot remove keyframe at frame ${frame}: not found`);
+    }
+    const nextKeyframes = existing.keyframes.filter((_keyframe, index) => index !== keyframeIndex);
+    if (nextKeyframes.length === 1) {
+        return (0, update_nested_prop_1.parseValueExpression)(nextKeyframes[0].value);
+    }
+    return createInterpolateExpression({
+        callee: existing.callee,
+        input: existing.input,
+        extraArgs: existing.extraArgs,
+        keyframes: nextKeyframes,
+    });
+};
+const applyKeyframeOperation = ({ expression, operation, }) => {
+    if (operation.type === 'add') {
+        return addKeyframe({
+            expression,
+            frame: operation.frame,
+            value: operation.value,
+        });
+    }
+    return removeKeyframe({ expression, frame: operation.frame });
+};
+const getExpressionFromJsxAttribute = (attr) => {
+    if (!attr.value) {
+        return b.booleanLiteral(true);
+    }
+    if (attr.value.type === 'StringLiteral') {
+        return attr.value;
+    }
+    if (attr.value.type !== 'JSXExpressionContainer') {
+        return null;
+    }
+    const { expression } = attr.value;
+    if (expression.type === 'JSXEmptyExpression') {
+        return null;
+    }
+    return expression;
+};
+const findJsxAttribute = (attributes, name) => {
+    const attrIndex = attributes.findIndex((candidate) => {
+        if (candidate.type === 'JSXSpreadAttribute') {
+            return false;
+        }
+        if (candidate.name.type === 'JSXNamespacedName') {
+            return false;
+        }
+        return candidate.name.name === name;
+    });
+    const foundAttr = attrIndex === -1 ? undefined : attributes[attrIndex];
+    return {
+        attrIndex,
+        attr: foundAttr && foundAttr.type === 'JSXAttribute'
+            ? foundAttr
+            : undefined,
+    };
+};
+const findObjectProperty = (objExpr, propertyName) => {
+    const propIndex = objExpr.properties.findIndex((prop) => prop.type === 'ObjectProperty' &&
+        ((prop.key.type === 'Identifier' && prop.key.name === propertyName) ||
+            (prop.key.type === 'StringLiteral' && prop.key.value === propertyName)));
+    return {
+        propIndex,
+        prop: propIndex === -1
+            ? undefined
+            : objExpr.properties[propIndex],
+    };
+};
+const getObjectExpression = (attr) => {
+    if (!attr.value || attr.value.type !== 'JSXExpressionContainer') {
+        return null;
+    }
+    if (attr.value.expression.type !== 'ObjectExpression') {
+        return null;
+    }
+    return attr.value.expression;
+};
+const getSequenceWritableProp = ({ attributes, key, }) => {
+    const dotIndex = key.indexOf('.');
+    if (dotIndex === -1) {
+        const { attr: topLevelAttr } = findJsxAttribute(attributes, key);
+        if (!topLevelAttr) {
+            throw new Error(`Cannot update keyframes: "${key}" is not set`);
+        }
+        const expression = getExpressionFromJsxAttribute(topLevelAttr);
+        if (!expression) {
+            throw new Error(`Cannot update keyframes: "${key}" is computed`);
+        }
+        return {
+            expression,
+            setExpression: (nextExpression) => {
+                topLevelAttr.value = b.jsxExpressionContainer(nextExpression);
+            },
+        };
+    }
+    const parentKey = key.slice(0, dotIndex);
+    const childKey = key.slice(dotIndex + 1);
+    const { attr: parentAttr } = findJsxAttribute(attributes, parentKey);
+    if (!parentAttr) {
+        throw new Error(`Cannot update keyframes: "${parentKey}" is not set`);
+    }
+    const objExpr = getObjectExpression(parentAttr);
+    if (!objExpr) {
+        throw new Error(`Cannot update keyframes: "${parentKey}" is computed`);
+    }
+    const { prop } = findObjectProperty(objExpr, childKey);
+    if (!prop) {
+        throw new Error(`Cannot update keyframes: "${key}" is not set`);
+    }
+    return {
+        expression: prop.value,
+        setExpression: (nextExpression) => {
+            prop.value = nextExpression;
+        },
+    };
+};
+const updateSequenceKeyframesAst = ({ input, nodePath, updates, }) => {
+    var _a;
+    var _b;
+    const ast = (0, parse_ast_1.parseAst)(input);
+    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 location to update keyframes');
+    }
+    if (!node.attributes) {
+        node.attributes = [];
+    }
+    const oldValueStrings = [];
+    for (const update of updates) {
+        const prop = getSequenceWritableProp({
+            attributes: node.attributes,
+            key: update.key,
+        });
+        oldValueStrings.push(recast.print(prop.expression).code);
+        prop.setExpression(applyKeyframeOperation({
+            expression: prop.expression,
+            operation: update.operation,
+        }));
+    }
+    return {
+        serialized: (0, parse_ast_1.serializeAst)(ast),
+        oldValueStrings,
+        logLine: (_b = (_a = node.loc) === null || _a === void 0 ? void 0 : _a.start.line) !== null && _b !== void 0 ? _b : 1,
+    };
+};
+exports.updateSequenceKeyframesAst = updateSequenceKeyframesAst;
+const updateSequenceKeyframes = async ({ input, nodePath, updates, prettierConfigOverride, }) => {
+    const { serialized, oldValueStrings, logLine } = (0, exports.updateSequenceKeyframesAst)({
+        input,
+        nodePath,
+        updates,
+    });
+    const { output, formatted } = await (0, format_file_content_1.formatFileContent)({
+        input: serialized,
+        prettierConfigOverride,
+    });
+    return { output, formatted, oldValueStrings, logLine };
+};
+exports.updateSequenceKeyframes = updateSequenceKeyframes;
+const updateEffectKeyframesAst = ({ input, sequenceNodePath, effectIndex, updates, }) => {
+    var _a, _b;
+    var _c, _d, _e;
+    const ast = (0, parse_ast_1.parseAst)(input);
+    const jsx = (0, can_update_sequence_props_1.findJsxElementAtNodePath)(ast, sequenceNodePath);
+    if (!jsx) {
+        throw new Error('Could not find a JSX element at the specified location to update effect keyframes');
+    }
+    const attr = (0, update_effect_props_1.findEffectsAttr)((_c = jsx.attributes) !== null && _c !== void 0 ? _c : []);
+    if (!attr) {
+        throw new Error('Could not find effects on the target JSX element');
+    }
+    const found = (0, update_effect_props_1.findEffectCallExpression)({ attr, effectIndex });
+    if (found.kind === 'error') {
+        throw new Error(`Cannot update effect keyframe: ${found.reason}`);
+    }
+    const { call, callee: effectCallee } = found;
+    if (call.arguments.length === 0 ||
+        call.arguments[0].type !== 'ObjectExpression') {
+        throw new Error('Cannot update effect keyframe: computed');
+    }
+    const objExpr = call.arguments[0];
+    const oldValueStrings = [];
+    for (const update of updates) {
+        const { prop } = findObjectProperty(objExpr, update.key);
+        if (!prop) {
+            throw new Error(`Cannot update keyframes: "${update.key}" is not set`);
+        }
+        oldValueStrings.push(recast.print(prop.value).code);
+        prop.value = applyKeyframeOperation({
+            expression: prop.value,
+            operation: update.operation,
+        });
+    }
+    return {
+        serialized: (0, parse_ast_1.serializeAst)(ast),
+        oldValueStrings,
+        logLine: (_e = (_d = (_a = call.loc) === null || _a === void 0 ? void 0 : _a.start.line) !== null && _d !== void 0 ? _d : (_b = jsx.loc) === null || _b === void 0 ? void 0 : _b.start.line) !== null && _e !== void 0 ? _e : 1,
+        effectCallee,
+    };
+};
+exports.updateEffectKeyframesAst = updateEffectKeyframesAst;
+const updateEffectKeyframes = async ({ input, sequenceNodePath, effectIndex, updates, prettierConfigOverride, }) => {
+    const { serialized, oldValueStrings, logLine, effectCallee } = (0, exports.updateEffectKeyframesAst)({
+        input,
+        sequenceNodePath,
+        effectIndex,
+        updates,
+    });
+    const { output, formatted } = await (0, format_file_content_1.formatFileContent)({
+        input: serialized,
+        prettierConfigOverride,
+    });
+    return { output, formatted, oldValueStrings, logLine, effectCallee };
+};
+exports.updateEffectKeyframes = updateEffectKeyframes;

package/dist/helpers/resolve-file-inside-project.d.ts

@@ -0,0 +1,8 @@
+export declare const resolveFileInsideProject: ({ remotionRoot, fileName, action, }: {
+    remotionRoot: string;
+    fileName: string;
+    action: string;
+}) => {
+    absolutePath: string;
+    fileRelativeToRoot: string;
+};

package/dist/helpers/resolve-file-inside-project.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveFileInsideProject = void 0;
+const node_path_1 = __importDefault(require("node:path"));
+const formatOutsideProjectError = ({ action, fileName, absolutePath, remotionRoot, }) => `Cannot ${action} a file outside the project: "${fileName}" resolves to "${absolutePath}", but the project root is "${remotionRoot}".`;
+const resolveFileInsideProject = ({ remotionRoot, fileName, action, }) => {
+    const resolvedRemotionRoot = node_path_1.default.resolve(remotionRoot);
+    const absolutePath = node_path_1.default.resolve(resolvedRemotionRoot, fileName);
+    const fileRelativeToRoot = node_path_1.default.relative(resolvedRemotionRoot, absolutePath);
+    if (fileRelativeToRoot === '..' ||
+        fileRelativeToRoot.startsWith(`..${node_path_1.default.sep}`) ||
+        node_path_1.default.isAbsolute(fileRelativeToRoot)) {
+        throw new Error(formatOutsideProjectError({
+            action,
+            fileName,
+            absolutePath,
+            remotionRoot: resolvedRemotionRoot,
+        }));
+    }
+    return { absolutePath, fileRelativeToRoot };
+};
+exports.resolveFileInsideProject = resolveFileInsideProject;

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

@@ -32,18 +32,15 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.applyVisualControlHandler = void 0;
 const node_fs_1 = require("node:fs");
-const node_path_1 = __importDefault(require("node:path"));
 const renderer_1 = require("@remotion/renderer");
 const recast = __importStar(require("recast"));
 const parse_ast_1 = require("../../codemods/parse-ast");
 const recast_mods_1 = require("../../codemods/recast-mods");
 const file_watcher_1 = require("../../file-watcher");
+const resolve_file_inside_project_1 = require("../../helpers/resolve-file-inside-project");
 const format_log_file_location_1 = require("../format-log-file-location");
 const live_events_1 = require("../live-events");
 const undo_stack_1 = require("../undo-stack");
@@ -71,11 +68,11 @@ const getVisualControlChangeLine = (file, changeId) => {
 };
 const applyVisualControlHandler = async ({ input: { fileName, changes }, remotionRoot, logLevel }) => {
     renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[apply-visual-control] Received request for ${fileName} with ${changes.length} changes`);
-    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 apply visual control change to a file outside the project');
-    }
+    const { absolutePath } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
+        remotionRoot,
+        fileName,
+        action: 'apply visual control change to',
+    });
     const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
     const ast = (0, parse_ast_1.parseAst)(fileContents);
     const logLine = changes.length > 0 ? getVisualControlChangeLine(ast, changes[0].id) : 1;

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

@@ -1,13 +1,10 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.computeEffectPropsStatusesFromFile = exports.computeEffectPropsStatusesFromContent = exports.computeEffectPropStatus = void 0;
 const node_fs_1 = require("node:fs");
-const node_path_1 = __importDefault(require("node:path"));
 const parse_ast_1 = require("../../codemods/parse-ast");
 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 can_update_sequence_props_1 = require("./can-update-sequence-props");
 const findEffectsAttr = (jsx) => {
     for (const attr of jsx.attributes) {
@@ -129,11 +126,11 @@ const computeEffectPropsStatusesFromContent = ({ fileContents, sequenceNodePath,
 };
 exports.computeEffectPropsStatusesFromContent = computeEffectPropsStatusesFromContent;
 const computeEffectPropsStatusesFromFile = ({ fileName, sequenceNodePath, effects, keysFor, remotionRoot, }) => {
-    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 { absolutePath } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
+        remotionRoot,
+        fileName,
+        action: 'read',
+    });
     const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
     return (0, exports.computeEffectPropsStatusesFromContent)({
         fileContents,

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

@@ -32,17 +32,14 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.computeSequencePropsStatusFromFilenameByLine = exports.computeSequencePropsStatus = exports.computeSequencePropsStatusFromContent = exports.computeSequencePropsOnlyStatus = exports.lineColumnToNodePath = exports.findJsxElementAtNodePath = exports.getComputedStatus = exports.extractStaticValue = exports.isStaticValue = void 0;
 const node_fs_1 = require("node:fs");
-const node_path_1 = __importDefault(require("node:path"));
 const renderer_1 = require("@remotion/renderer");
 const recast = __importStar(require("recast"));
 const parse_ast_1 = require("../../codemods/parse-ast");
 const get_ast_node_path_1 = require("../../helpers/get-ast-node-path");
+const resolve_file_inside_project_1 = require("../../helpers/resolve-file-inside-project");
 const jsx_element_not_found_at_location_error_1 = require("../jsx-element-not-found-at-location-error");
 const can_update_effect_props_1 = require("./can-update-effect-props");
 const isStaticValue = (node) => {
@@ -131,16 +128,17 @@ const getNumericValue = (node) => {
     }
     return null;
 };
-const getInterpolateKeyframes = (node) => {
+const getInterpolationKeyframes = (node) => {
     if (node.type === 'TSAsExpression') {
-        return getInterpolateKeyframes(node.expression);
+        return getInterpolationKeyframes(node.expression);
     }
     if (node.type !== 'CallExpression') {
         return undefined;
     }
     const callExpression = node;
     if (callExpression.callee.type !== 'Identifier' ||
-        callExpression.callee.name !== 'interpolate') {
+        (callExpression.callee.name !== 'interpolate' &&
+            callExpression.callee.name !== 'interpolateColors')) {
         return undefined;
     }
     const inputArg = callExpression.arguments[1];
@@ -176,7 +174,7 @@ const getInterpolateKeyframes = (node) => {
     return keyframes.length > 0 ? keyframes : undefined;
 };
 const getComputedStatus = (node) => {
-    const keyframes = getInterpolateKeyframes(node);
+    const keyframes = getInterpolationKeyframes(node);
     if (!keyframes) {
         return { canUpdate: false, reason: 'computed' };
     }
@@ -348,11 +346,11 @@ const computeSequenceOnlyPropsRecord = ({ jsxElement, keys, }) => {
     return filteredProps;
 };
 const computeSequencePropsOnlyStatus = ({ fileName, nodePath, keys, remotionRoot, }) => {
-    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 { absolutePath } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
+        remotionRoot,
+        fileName,
+        action: 'read',
+    });
     const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
     const ast = (0, parse_ast_1.parseAst)(fileContents);
     const jsxElement = (0, exports.findJsxElementAtNodePath)(ast, nodePath);
@@ -381,11 +379,11 @@ const computeSequencePropsStatusFromContent = ({ fileContents, nodePath, keys, e
 };
 exports.computeSequencePropsStatusFromContent = computeSequencePropsStatusFromContent;
 const computeSequencePropsStatus = ({ fileName, nodePath, keys, effects, remotionRoot, }) => {
-    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 { absolutePath } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
+        remotionRoot,
+        fileName,
+        action: 'read',
+    });
     const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
     return (0, exports.computeSequencePropsStatusFromContent)({
         fileContents,
@@ -397,11 +395,11 @@ const computeSequencePropsStatus = ({ fileName, nodePath, keys, effects, remotio
 exports.computeSequencePropsStatus = computeSequencePropsStatus;
 const computeSequencePropsStatusFromFilenameByLine = ({ fileName, line, keys, effects, remotionRoot, logLevel, }) => {
     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 { absolutePath } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
+            remotionRoot,
+            fileName,
+            action: 'read',
+        });
         const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
         const ast = (0, parse_ast_1.parseAst)(fileContents);
         const resolvedNodePath = (0, exports.lineColumnToNodePath)(ast, line);

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

@@ -1,14 +1,11 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.deleteEffectHandler = void 0;
 const node_fs_1 = require("node:fs");
-const node_path_1 = __importDefault(require("node:path"));
 const renderer_1 = require("@remotion/renderer");
 const delete_effect_1 = require("../../codemods/delete-effect");
 const file_watcher_1 = require("../../file-watcher");
+const resolve_file_inside_project_1 = require("../../helpers/resolve-file-inside-project");
 const format_log_file_location_1 = require("../format-log-file-location");
 const undo_stack_1 = require("../undo-stack");
 const formatting_1 = require("./log-updates/formatting");
@@ -16,11 +13,11 @@ const log_update_1 = require("./log-updates/log-update");
 const deleteEffectHandler = async ({ input: { fileName, sequenceNodePath, effectIndex }, remotionRoot, logLevel, }) => {
     try {
         renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[delete-effect] Received request for fileName="${fileName}" effectIndex=${effectIndex}`);
-        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 modify a file outside the project');
-        }
+        const { absolutePath, fileRelativeToRoot } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
+            remotionRoot,
+            fileName,
+            action: 'modify',
+        });
         const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
         const { output, formatted, effectLabel, logLine } = await (0, delete_effect_1.deleteEffect)({
             input: fileContents,

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

@@ -1,25 +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.deleteJsxNodeHandler = void 0;
 const node_fs_1 = require("node:fs");
-const node_path_1 = __importDefault(require("node:path"));
 const renderer_1 = require("@remotion/renderer");
 const delete_jsx_node_1 = require("../../codemods/delete-jsx-node");
 const file_watcher_1 = require("../../file-watcher");
+const resolve_file_inside_project_1 = require("../../helpers/resolve-file-inside-project");
 const format_log_file_location_1 = require("../format-log-file-location");
 const undo_stack_1 = require("../undo-stack");
 const log_update_1 = require("./log-updates/log-update");
 const deleteJsxNodeHandler = async ({ input: { fileName, nodePath }, remotionRoot, logLevel }) => {
     try {
         renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[delete-jsx-node] Received request for fileName="${fileName}"`);
-        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 modify a file outside the project');
-        }
+        const { absolutePath, fileRelativeToRoot } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
+            remotionRoot,
+            fileName,
+            action: 'modify',
+        });
         const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
         const { output, formatted, nodeLabel, logLine } = await (0, delete_jsx_node_1.deleteJsxNode)({
             input: fileContents,

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

@@ -1,25 +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.duplicateJsxNodeHandler = void 0;
 const node_fs_1 = require("node:fs");
-const node_path_1 = __importDefault(require("node:path"));
 const renderer_1 = require("@remotion/renderer");
 const duplicate_jsx_node_1 = require("../../codemods/duplicate-jsx-node");
 const file_watcher_1 = require("../../file-watcher");
+const resolve_file_inside_project_1 = require("../../helpers/resolve-file-inside-project");
 const format_log_file_location_1 = require("../format-log-file-location");
 const undo_stack_1 = require("../undo-stack");
 const log_update_1 = require("./log-updates/log-update");
 const duplicateJsxNodeHandler = async ({ input: { fileName, nodePath }, remotionRoot, logLevel }) => {
     try {
         renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[duplicate-jsx-node] Received request for fileName="${fileName}"`);
-        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 modify a file outside the project');
-        }
+        const { absolutePath, fileRelativeToRoot } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
+            remotionRoot,
+            fileName,
+            action: 'modify',
+        });
         const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
         const { output, formatted, nodeLabel, logLine } = await (0, duplicate_jsx_node_1.duplicateJsxNode)({
             input: fileContents,

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

@@ -1,16 +1,13 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.saveEffectPropsHandler = void 0;
 const node_fs_1 = require("node:fs");
-const node_path_1 = __importDefault(require("node:path"));
 const renderer_1 = require("@remotion/renderer");
 const studio_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 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");
@@ -21,11 +18,11 @@ const log_update_1 = require("./log-updates/log-update");
 const save_props_mutex_1 = require("./save-props-mutex");
 const saveEffectPropsHandler = ({ input: { fileName, sequenceNodePath, effectIndex, key, value, defaultValue, schema, clientId, }, remotionRoot, logLevel, }) => (0, save_props_mutex_1.withSavePropsLock)(async () => {
     renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[save-effect-props] Received request for fileName="${fileName}" effectIndex=${effectIndex} key="${key}"`);
-    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 modify a file outside the project');
-    }
+    const { absolutePath, fileRelativeToRoot } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
+        remotionRoot,
+        fileName,
+        action: 'modify',
+    });
     const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
     const parsedDefault = defaultValue !== null ? JSON.parse(defaultValue) : null;
     const { output, oldValueString, formatted, logLine, effectCallee, removedProps, } = await (0, update_effect_props_1.updateEffectProps)({

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

@@ -1,16 +1,13 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 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 studio_shared_1 = require("@remotion/studio-shared");
 const no_react_1 = require("remotion/no-react");
 const update_sequence_props_1 = require("../../codemods/update-sequence-props/update-sequence-props");
 const file_watcher_1 = require("../../file-watcher");
+const resolve_file_inside_project_1 = require("../../helpers/resolve-file-inside-project");
 const undo_stack_1 = require("../undo-stack");
 const watch_ignore_next_change_1 = require("../watch-ignore-next-change");
 const can_update_sequence_props_1 = require("./can-update-sequence-props");
@@ -19,11 +16,11 @@ const log_update_1 = require("./log-updates/log-update");
 const save_props_mutex_1 = require("./save-props-mutex");
 const saveSequencePropsHandler = ({ input: { fileName, nodePath, key, value, defaultValue, schema, clientId }, remotionRoot, logLevel, }) => (0, save_props_mutex_1.withSavePropsLock)(async () => {
     renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[save-sequence-props] Received request for fileName="${fileName}" key="${key}"`);
-    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 modify a file outside the project');
-    }
+    const { absolutePath, fileRelativeToRoot } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
+        remotionRoot,
+        fileName,
+        action: 'modify',
+    });
     const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
     const { output, oldValueStrings, formatted, logLine, removedProps } = await (0, update_sequence_props_1.updateSequenceProps)({
         input: fileContents,

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.467",
+	"version": "4.0.468",
 	"description": "Run a Remotion Studio with a server backend",
 	"main": "dist",
 	"scripts": {
@@ -27,11 +27,11 @@
 		"@babel/parser": "7.24.1",
 		"semver": "7.5.3",
 		"prettier": "3.8.1",
-		"remotion": "4.0.467",
+		"remotion": "4.0.468",
 		"recast": "0.23.11",
-		"@remotion/bundler": "4.0.467",
-		"@remotion/renderer": "4.0.467",
-		"@remotion/studio-shared": "4.0.467",
+		"@remotion/bundler": "4.0.468",
+		"@remotion/renderer": "4.0.468",
+		"@remotion/studio-shared": "4.0.468",
 		"memfs": "3.4.3",
 		"open": "8.4.2"
 	},
@@ -39,7 +39,7 @@
 		"ast-types": "0.16.1",
 		"react": "19.2.3",
 		"@types/semver": "7.5.3",
-		"@remotion/eslint-config-internal": "4.0.467",
+		"@remotion/eslint-config-internal": "4.0.468",
 		"eslint": "9.19.0",
 		"@types/node": "20.12.14",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"