@remotion/studio-server 4.0.489 → 4.0.490

package/dist/codemods/effect-param-expression.js

@@ -111,6 +111,9 @@ const makeKeyframedOptions = ({ param, remotionLocalNames, }) => {
         if (param.clamping.right !== 'extend') {
             properties.push(b.objectProperty(b.identifier('extrapolateRight'), b.stringLiteral(param.clamping.right)));
         }
+        if (param.output === 'perceptual-scale') {
+            properties.push(b.objectProperty(b.identifier('output'), b.stringLiteral(param.output)));
+        }
     }
     if (keyframedParamNeedsEasingImport(param)) {
         const easingLocalName = (_a = remotionLocalNames.Easing) !== null && _a !== void 0 ? _a : 'Easing';

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

@@ -1,5 +1,5 @@
 import { type KeyframeInterpolationFunction } from '@remotion/studio-shared';
-import type { CanUpdateSequencePropStatus, ExtrapolateType, SequenceNodePath, InteractivitySchema } from 'remotion';
+import type { CanUpdateSequencePropStatus, ExtrapolateType, InteractivitySchema, InterpolateOutputOption, SequenceNodePath } from 'remotion';
 type KeyframeEasing = Extract<CanUpdateSequencePropStatus, {
     status: 'keyframed';
 }>['easing'][number];
@@ -17,6 +17,7 @@ export type KeyframeOperation = {
         right: ExtrapolateType;
     } | undefined;
     posterize: number | undefined;
+    output: InterpolateOutputOption | undefined;
 } | {
     type: 'easing';
     segmentIndex: number;

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

@@ -192,11 +192,15 @@ const getInterpolationCalleeForValues = ({ schema, key, staticValue, newValue, }
 const createFrameExpression = (frame) => {
     return (0, update_nested_prop_1.parseValueExpression)(frame);
 };
-const createClampOptionsExpression = () => {
-    return b.objectExpression([
+const createClampOptionsExpression = ({ defaultOutput, }) => {
+    const properties = [
         b.objectProperty(b.identifier('extrapolateLeft'), b.stringLiteral('clamp')),
         b.objectProperty(b.identifier('extrapolateRight'), b.stringLiteral('clamp')),
-    ]);
+    ];
+    if (defaultOutput !== null && defaultOutput !== 'linear') {
+        properties.push(b.objectProperty(b.identifier('output'), b.stringLiteral(defaultOutput)));
+    }
+    return b.objectExpression(properties);
 };
 const createEmptyOptionsExpression = () => b.objectExpression([]);
 const findObjectOptionProperty = (options, propertyName) => {
@@ -451,8 +455,17 @@ const validatePosterize = (posterize) => {
         throw new Error('Cannot update keyframe settings: posterize must be > 0');
     }
 };
-const updateKeyframeSettings = ({ expression, clamping, posterize, }) => {
+const validateOutput = (output) => {
+    if (output === undefined ||
+        output === 'linear' ||
+        output === 'perceptual-scale') {
+        return;
+    }
+    throw new Error('Cannot update keyframe settings: output must be "linear" or "perceptual-scale"');
+};
+const updateKeyframeSettings = ({ expression, clamping, posterize, output, }) => {
     validatePosterize(posterize);
+    validateOutput(output);
     const existing = getInterpolationExpression(expression);
     if (!existing) {
         throw new Error('Cannot update keyframe settings on non-keyframed value');
@@ -474,6 +487,7 @@ const updateKeyframeSettings = ({ expression, clamping, posterize, }) => {
             propertyName: 'extrapolateRight',
             value: null,
         });
+        setOptionsProperty({ options, propertyName: 'output', value: null });
     }
     else if (clamping) {
         setOptionsProperty({
@@ -487,6 +501,13 @@ const updateKeyframeSettings = ({ expression, clamping, posterize, }) => {
             value: b.stringLiteral(clamping.right),
         });
     }
+    if (!isColorInterpolation && output !== undefined) {
+        setOptionsProperty({
+            options,
+            propertyName: 'output',
+            value: output === 'linear' ? null : b.stringLiteral(output),
+        });
+    }
     setOptionsProperty({
         options,
         propertyName: 'posterize',
@@ -617,7 +638,11 @@ const addKeyframe = ({ expression, key, frame, value, schema, }) => {
     });
     const extraArgs = callee.type === 'Identifier' && callee.name === 'interpolateColors'
         ? []
-        : [createClampOptionsExpression()];
+        : [
+            createClampOptionsExpression({
+                defaultOutput: getDefaultKeyframeOutput({ schema, key }),
+            }),
+        ];
     return {
         expression: createInterpolateExpression({
             callee,
@@ -744,6 +769,7 @@ const applyKeyframeOperation = ({ expression, key, operation, schema, }) => {
                 expression,
                 clamping: operation.clamping,
                 posterize: operation.posterize,
+                output: operation.output,
             }),
             introduced: noIntroducedIdentifiers,
         };
@@ -832,6 +858,14 @@ const findFieldInSchema = (schema, key) => {
     }
     return undefined;
 };
+const getDefaultKeyframeOutput = ({ schema, key, }) => {
+    const field = schema ? findFieldInSchema(schema, key) : undefined;
+    if (((field === null || field === void 0 ? void 0 : field.type) === 'number' || (field === null || field === void 0 ? void 0 : field.type) === 'scale') &&
+        field.defaultKeyframeOutput !== undefined) {
+        return field.defaultKeyframeOutput;
+    }
+    return key === 'style.scale' ? 'perceptual-scale' : null;
+};
 const getInitialValueForMissingProp = ({ schema, key, newValue, }) => {
     const field = schema ? findFieldInSchema(schema, key) : undefined;
     if (field && field.type !== 'hidden' && field.default !== undefined) {

package/dist/helpers/get-installed-installable-packages.js

@@ -1,22 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getInstalledInstallablePackages = void 0;
-const studio_shared_1 = require("@remotion/studio-shared");
 const get_installed_dependencies_1 = require("./get-installed-dependencies");
 const getInstalledInstallablePackages = (remotionRoot) => {
-    const { dependencies, devDependencies, optionalDependencies } = (0, get_installed_dependencies_1.getInstalledDependencies)(remotionRoot);
-    const installablePackages = [
+    const { dependencies, devDependencies, optionalDependencies, peerDependencies, } = (0, get_installed_dependencies_1.getInstalledDependencies)(remotionRoot);
+    return Array.from(new Set([
         ...dependencies,
         ...devDependencies,
         ...optionalDependencies,
-    ];
-    const remotionPackages = Object.entries(studio_shared_1.installableMap)
-        .filter(([, _installable]) => _installable)
-        .map(([pkg]) => (pkg === 'core' ? 'remotion' : `@remotion/${pkg}`))
-        .filter((pkg) => installablePackages.includes(pkg));
-    const installedExtraPackages = studio_shared_1.extraPackages
-        .map((pkg) => pkg.name)
-        .filter((pkg) => installablePackages.includes(pkg));
-    return [...remotionPackages, ...installedExtraPackages];
+        ...peerDependencies,
+    ]));
 };
 exports.getInstalledInstallablePackages = getInstalledInstallablePackages;

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

@@ -569,6 +569,7 @@ const createSolidElement = ({ localName, width, height, position, }) => {
     return recast.types.builders.jsxElement(recast.types.builders.jsxOpeningElement(recast.types.builders.jsxIdentifier(localName), [
         createNumberAttribute('width', width),
         createNumberAttribute('height', height),
+        createStringAttribute('color', 'gray'),
         createPositionAbsoluteStyleAttribute(position),
     ], true), null, []);
 };

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

@@ -201,6 +201,18 @@ const getExtrapolateType = (node) => {
     }
     return null;
 };
+const getInterpolateOutputOption = (node) => {
+    if (node.type === 'StringLiteral') {
+        if (node.value === 'linear' || node.value === 'perceptual-scale') {
+            return node.value;
+        }
+        return null;
+    }
+    if (node.type === 'TSAsExpression') {
+        return getInterpolateOutputOption(node.expression);
+    }
+    return null;
+};
 const getKeyframeEasing = (node) => (0, parse_keyframe_easing_expression_1.parseKeyframeEasingExpression)(node);
 const getKeyframeEasingArray = ({ easingNode, segments, }) => {
     if (segments === 0) {
@@ -248,6 +260,7 @@ const getInterpolationMetadata = (interpolationFunction, callExpression, keyfram
         easing: Array.from({ length: segments }, () => studio_shared_1.LINEAR_KEYFRAME_EASING),
         clamping: defaultClamping,
         posterize: undefined,
+        output: undefined,
     };
     const optionsArg = callExpression.arguments[3];
     if (!optionsArg) {
@@ -259,6 +272,7 @@ const getInterpolationMetadata = (interpolationFunction, callExpression, keyfram
     let { easing } = defaults;
     let { clamping } = defaults;
     let posterize;
+    let { output } = defaults;
     for (const property of optionsArg.properties) {
         if (property.type !== 'ObjectProperty' || property.computed) {
             return null;
@@ -307,12 +321,24 @@ const getInterpolationMetadata = (interpolationFunction, callExpression, keyfram
             posterize = parsedPosterize;
             continue;
         }
+        if (key === 'output') {
+            if (interpolationFunction === 'interpolateColors') {
+                return null;
+            }
+            const parsedOutput = getInterpolateOutputOption(value);
+            if (!parsedOutput) {
+                return null;
+            }
+            output = parsedOutput;
+            continue;
+        }
         return null;
     }
     return {
         easing,
         clamping,
         posterize,
+        output,
     };
 };
 const getInterpolationKeyframes = (node, ast) => {
@@ -394,6 +420,7 @@ const getInterpolationKeyframes = (node, ast) => {
         easing: metadata.easing,
         clamping: metadata.clamping,
         posterize: metadata.posterize,
+        output: metadata.output,
     };
 };
 const isUseCurrentFrameCall = (node) => {
@@ -440,6 +467,7 @@ const getComputedStatus = (node, ast) => {
         easing: interpolation.easing,
         clamping: interpolation.clamping,
         posterize: interpolation.posterize,
+        output: interpolation.output,
     };
 };
 exports.getComputedStatus = getComputedStatus;

package/dist/preview-server/routes/install-dependency.d.ts

@@ -1,3 +1,4 @@
 import { type InstallPackageRequest, type InstallPackageResponse } from '@remotion/studio-shared';
 import type { ApiHandler } from '../api-types';
+export declare const getPackageInstallSpec: (packageName: string) => string;
 export declare const handleInstallPackage: ApiHandler<InstallPackageRequest, InstallPackageResponse>;

package/dist/preview-server/routes/install-dependency.js

@@ -1,24 +1,31 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.handleInstallPackage = void 0;
+exports.handleInstallPackage = exports.getPackageInstallSpec = void 0;
 const node_child_process_1 = require("node:child_process");
 const renderer_1 = require("@remotion/renderer");
 const studio_shared_1 = require("@remotion/studio-shared");
 const version_1 = require("remotion/version");
 const install_command_1 = require("../../helpers/install-command");
 const get_package_manager_1 = require("../get-package-manager");
-const extraPackageNames = studio_shared_1.extraPackages.map((pkg) => pkg.name);
-const isExtraPackage = (packageName) => {
-    return extraPackageNames.includes(packageName);
-};
 const getExtraPackageVersion = (packageName) => {
     const pkg = studio_shared_1.extraPackages.find((p) => p.name === packageName);
     return pkg ? pkg.version : null;
 };
+const getPackageInstallSpec = (packageName) => {
+    const extraVersion = getExtraPackageVersion(packageName);
+    if (extraVersion) {
+        return `${packageName}@${extraVersion}`;
+    }
+    if (packageName === 'remotion' || packageName.startsWith('@remotion/')) {
+        return `${packageName}@${version_1.VERSION}`;
+    }
+    return packageName;
+};
+exports.getPackageInstallSpec = getPackageInstallSpec;
 const handleInstallPackage = async ({ logLevel, remotionRoot, input: { packageNames } }) => {
     for (const packageName of packageNames) {
-        if (!packageName.startsWith('@remotion/') && !isExtraPackage(packageName)) {
-            return Promise.reject(new Error(`Package ${packageName} is not allowed to be installed.`));
+        if (!(0, studio_shared_1.isValidPackageName)(packageName)) {
+            return Promise.reject(new Error(`Package name ${JSON.stringify(packageName)} is invalid.`));
         }
     }
     const manager = (0, get_package_manager_1.getPackageManager)({
@@ -32,14 +39,9 @@ const handleInstallPackage = async ({ logLevel, remotionRoot, input: { packageNa
             .map((p) => p.path)
             .join(', ')}). Install dependencies using your favorite manager!`);
     }
-    // Build packages with appropriate versions
-    const packagesWithVersions = packageNames.map((pkg) => {
-        const extraVersion = getExtraPackageVersion(pkg);
-        if (extraVersion) {
-            return `${pkg}@${extraVersion}`;
-        }
-        return `${pkg}@${version_1.VERSION}`;
-    });
+    // Remotion packages must match the Studio version and catalogued extra
+    // packages use their supported version. Other packages resolve normally.
+    const packagesWithVersions = packageNames.map(exports.getPackageInstallSpec);
     const command = (0, install_command_1.getInstallCommand)({
         manager: manager.manager,
         packages: packagesWithVersions,

package/dist/preview-server/routes/update-effect-keyframe-settings.js

@@ -35,6 +35,7 @@ const updateEffectKeyframeSettingsHandler = ({ input: { fileName, sequenceNodePa
                         type: 'settings',
                         clamping: settings.clamping,
                         posterize: settings.posterize,
+                        output: settings.output,
                     }
                     : {
                         type: 'easing',

package/dist/preview-server/routes/update-sequence-keyframe-settings.js

@@ -32,6 +32,7 @@ const updateSequenceKeyframeSettingsHandler = ({ input: { fileName, nodePath, ke
                         type: 'settings',
                         clamping: settings.clamping,
                         posterize: settings.posterize,
+                        output: settings.output,
                     }
                     : {
                         type: 'easing',

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.489",
+	"version": "4.0.490",
 	"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.489",
+		"remotion": "4.0.490",
 		"recast": "0.23.11",
-		"@remotion/bundler": "4.0.489",
-		"@remotion/renderer": "4.0.489",
-		"@remotion/studio-shared": "4.0.489",
+		"@remotion/bundler": "4.0.490",
+		"@remotion/renderer": "4.0.490",
+		"@remotion/studio-shared": "4.0.490",
 		"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.489",
+		"@remotion/eslint-config-internal": "4.0.490",
 		"eslint": "9.19.0",
 		"@types/node": "20.12.14",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"