@remotion/studio-server 4.0.488 → 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/index.d.ts

@@ -2,7 +2,7 @@ export { ApiRoutes, CopyStillToClipboardRequest, getDefaultOutLocation, OpenInFi
 export type { AggregateRenderProgress, BundlingState, CopyingState, DownloadProgress, HotMiddlewareOptions, JobProgressCallback, ModuleMap, PackageManager, ProjectInfo, RenderingProgressInput, RenderJob, RenderJobWithCleanup, RequiredChromiumOptions, StitchingProgressInput, UiOpenGlOptions, } from '@remotion/studio-shared';
 import { AnsiDiff } from './ansi-diff';
 export declare const StudioServerInternals: {
-    startStudio: ({ browserArgs, browserFlag, shouldOpenBrowser, fullEntryPath, logLevel, getCurrentInputProps, getEnvVariables, desiredPort, maxTimelineTracks, remotionRoot, keyboardShortcutsEnabled, experimentalClientSideRenderingEnabled, relativePublicDir, webpackOverride, poll, getRenderDefaults, getRenderQueue, numberOfAudioTags, queueMethods, previewEntry, gitSource, bufferStateDelayInMilliseconds, binariesDirectory, forceIPv4, audioLatencyHint, previewSampleRate, enableCrossSiteIsolation, askAIEnabled, interactivityEnabled, forceNew, rspack, }: {
+    startStudio: ({ browserArgs, browserFlag, shouldOpenBrowser, fullEntryPath, logLevel, getCurrentInputProps, getEnvVariables, desiredPort, maxTimelineTracks, remotionRoot, keyboardShortcutsEnabled, experimentalClientSideRenderingEnabled, relativePublicDir, webpackOverride, poll, getRenderDefaults, getRenderQueue, numberOfAudioTags, queueMethods, previewEntry, gitSource, bufferStateDelayInMilliseconds, binariesDirectory, forceIPv4, audioLatencyHint, previewSampleRate, enableCrossSiteIsolation, askAIEnabled, interactivityEnabled, forceNew, rspack, getStudioRuntimeConfig, }: {
         browserArgs: string;
         browserFlag: string;
         logLevel: "error" | "info" | "trace" | "verbose" | "warn";
@@ -34,6 +34,7 @@ export declare const StudioServerInternals: {
         interactivityEnabled: boolean;
         forceNew: boolean;
         rspack: boolean;
+        getStudioRuntimeConfig: () => import("@remotion/studio-shared").StudioRuntimeConfig;
     }) => Promise<import("./start-studio").StartStudioResult>;
     getRemotionVersion: () => any;
     waitForLiveEventsListener: () => Promise<import("./preview-server/live-events").LiveEventsServer>;

package/dist/preview-server/element-install-state.d.ts

@@ -1,5 +1,6 @@
 export declare const ELEMENT_INSTALL_TARGET_MAX_AGE = 5000;
 export type ElementInstallTarget = {
+    requestId: string | null;
     clientId: string;
     compositionFile: string | null;
     compositionId: string | null;
@@ -9,5 +10,5 @@ export type ElementInstallTarget = {
     updatedAt: number;
 };
 export declare const updateElementInstallTarget: (newTarget: Omit<ElementInstallTarget, "updatedAt">) => void;
-export declare const getElementInstallTarget: () => ElementInstallTarget | null;
+export declare const getElementInstallTarget: (requestId: string | null) => ElementInstallTarget | null;
 export declare const clearElementInstallStateForTests: () => void;

package/dist/preview-server/element-install-state.js

@@ -19,7 +19,7 @@ const updateElementInstallTarget = (newTarget) => {
     });
 };
 exports.updateElementInstallTarget = updateElementInstallTarget;
-const getElementInstallTarget = () => {
+const getElementInstallTarget = (requestId) => {
     const now = Date.now();
     let bestTarget = null;
     for (const [clientId, currentTarget] of targetsByClientId) {
@@ -27,6 +27,9 @@ const getElementInstallTarget = () => {
             targetsByClientId.delete(clientId);
             continue;
         }
+        if (requestId !== null && currentTarget.requestId !== requestId) {
+            continue;
+        }
         if (bestTarget === null || compareTargets(currentTarget, bestTarget) > 0) {
             bestTarget = currentTarget;
         }

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-element-install-target.js

@@ -9,6 +9,9 @@ const updateElementInstallTargetHandler = ({ input }) => {
     if (typeof input.clientId !== 'string' || input.clientId.length === 0) {
         throw new Error('Invalid client ID');
     }
+    if (input.requestId !== null && typeof input.requestId !== 'string') {
+        throw new Error('Invalid request ID');
+    }
     if (!isFiniteTimestamp(input.lastFocusedAt)) {
         throw new Error('Invalid focus timestamp');
     }

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/dist/preview-server/start-server.d.ts

@@ -1,5 +1,5 @@
 import type { WebpackOverrideFn } from '@remotion/bundler';
-import type { GitSource, RenderDefaults, RenderJob } from '@remotion/studio-shared';
+import type { GitSource, RenderDefaults, RenderJob, StudioRuntimeConfig } from '@remotion/studio-shared';
 import type { QueueMethods } from './api-types';
 import type { LiveEventsServer } from './live-events';
 export type StartServerResult = {
@@ -44,4 +44,5 @@ export declare const startServer: (options: {
     interactivityEnabled: boolean;
     forceNew: boolean;
     rspack: boolean;
+    getStudioRuntimeConfig: () => StudioRuntimeConfig;
 }) => Promise<StartServerResult>;

package/dist/preview-server/start-server.js

@@ -105,6 +105,7 @@ const startServer = async (options) => {
                 audioLatencyHint: options.audioLatencyHint,
                 previewSampleRate: options.previewSampleRate,
                 enableCrossSiteIsolation: options.enableCrossSiteIsolation,
+                getStudioRuntimeConfig: options.getStudioRuntimeConfig,
             });
         })
             .catch((err) => {

package/dist/preview-server/validate-same-origin.js

@@ -4,6 +4,9 @@ exports.validateSameOrigin = void 0;
 const validateSameOrigin = (req) => {
     const { origin, host } = req.headers;
     if (typeof origin !== 'string') {
+        if (req.method === 'GET' || req.method === 'HEAD') {
+            return;
+        }
         throw new Error('Request without Origin header not allowed');
     }
     if (typeof host !== 'string') {

package/dist/routes.d.ts

@@ -1,8 +1,8 @@
 import type { IncomingMessage, ServerResponse } from 'node:http';
-import type { GitSource, RenderDefaults, RenderJob } from '@remotion/studio-shared';
+import type { GitSource, RenderDefaults, RenderJob, StudioRuntimeConfig } from '@remotion/studio-shared';
 import type { QueueMethods } from './preview-server/api-types';
 import type { LiveEventsServer } from './preview-server/live-events';
-export declare const handleRoutes: ({ staticHash, staticHashPrefix, outputHash, outputHashPrefix, request, response, liveEventsServer, getCurrentInputProps, getEnvVariables, remotionRoot, entryPoint, publicDir, logLevel, getRenderQueue, getRenderDefaults, numberOfAudioTags, queueMethods: methods, gitSource, binariesDirectory, audioLatencyHint, previewSampleRate, enableCrossSiteIsolation, }: {
+export declare const handleRoutes: ({ staticHash, staticHashPrefix, outputHash, outputHashPrefix, request, response, liveEventsServer, getCurrentInputProps, getEnvVariables, remotionRoot, entryPoint, publicDir, logLevel, getRenderQueue, getRenderDefaults, numberOfAudioTags, queueMethods: methods, gitSource, binariesDirectory, audioLatencyHint, previewSampleRate, enableCrossSiteIsolation, getStudioRuntimeConfig, }: {
     staticHash: string;
     staticHashPrefix: string;
     outputHash: string;
@@ -25,4 +25,5 @@ export declare const handleRoutes: ({ staticHash, staticHashPrefix, outputHash,
     audioLatencyHint: AudioContextLatencyCategory | null;
     previewSampleRate: number | null;
     enableCrossSiteIsolation: boolean;
+    getStudioRuntimeConfig: () => StudioRuntimeConfig;
 }) => Promise<void>;

package/dist/routes.js

@@ -58,6 +58,7 @@ const validate_same_origin_1 = require("./preview-server/validate-same-origin");
 const watch_ignore_next_change_1 = require("./preview-server/watch-ignore-next-change");
 const loggedStaticFileHints = new Set();
 const ELEMENT_INSTALL_FOCUS_MAX_AGE = 5 * 60 * 1000;
+const ELEMENT_INSTALL_TARGET_RESPONSE_WAIT = 250;
 const static404 = (response) => {
     response.writeHead(404);
     response.end('The static/ prefix has been changed, this URL is no longer valid.');
@@ -114,34 +115,44 @@ const handleElementInstallOptions = ({ request, response, }) => {
     response.end();
     return Promise.resolve();
 };
-const handleElementInstallTarget = ({ request, response, remotionRoot, gitSource, }) => {
-    var _a, _b, _c, _d, _e;
+const handleElementInstallTarget = ({ liveEventsServer, request, response, remotionRoot, gitSource, }) => {
     if (!isAllowedElementInstallOrigin(request.headers.origin)) {
         response.writeHead(403);
         response.end(JSON.stringify({ success: false, reason: 'Origin not allowed' }));
         return Promise.resolve();
     }
-    const target = (0, element_install_state_1.getElementInstallTarget)();
-    const now = Date.now();
-    const targetIsLive = target !== null && now - target.updatedAt < element_install_state_1.ELEMENT_INSTALL_TARGET_MAX_AGE;
-    const host = (_a = request.headers.host) !== null && _a !== void 0 ? _a : null;
-    const port = (_b = host === null || host === void 0 ? void 0 : host.split(':').at(-1)) !== null && _b !== void 0 ? _b : null;
-    setElementInstallCorsHeaders({ request, response });
-    response.writeHead(200, { 'Content-Type': 'application/json' });
-    response.end(JSON.stringify({
-        type: 'remotion-studio',
-        projectName: (0, studio_shared_1.getProjectName)({
-            basename: node_path_1.default.basename,
-            gitSource,
-            resolvedRemotionRoot: remotionRoot,
-        }),
-        port: port === null ? null : Number(port),
-        lastFocusedAt: (_c = target === null || target === void 0 ? void 0 : target.lastFocusedAt) !== null && _c !== void 0 ? _c : null,
-        canInstall: target !== null && target.canInstall && targetIsLive,
-        activeCompositionId: (_d = target === null || target === void 0 ? void 0 : target.compositionId) !== null && _d !== void 0 ? _d : null,
-        readOnly: (_e = target === null || target === void 0 ? void 0 : target.readOnly) !== null && _e !== void 0 ? _e : false,
-    }));
-    return Promise.resolve();
+    const requestId = `${Date.now()}-${Math.random().toString(16).slice(2)}`;
+    liveEventsServer.sendEventToClient({
+        type: 'request-element-install-target',
+        requestId,
+    });
+    return new Promise((resolve) => {
+        setTimeout(() => {
+            var _a, _b, _c, _d, _e;
+            const target = (0, element_install_state_1.getElementInstallTarget)(requestId);
+            const now = Date.now();
+            const targetIsLive = target !== null &&
+                now - target.updatedAt < element_install_state_1.ELEMENT_INSTALL_TARGET_MAX_AGE;
+            const host = (_a = request.headers.host) !== null && _a !== void 0 ? _a : null;
+            const port = (_b = host === null || host === void 0 ? void 0 : host.split(':').at(-1)) !== null && _b !== void 0 ? _b : null;
+            setElementInstallCorsHeaders({ request, response });
+            response.writeHead(200, { 'Content-Type': 'application/json' });
+            response.end(JSON.stringify({
+                type: 'remotion-studio',
+                projectName: (0, studio_shared_1.getProjectName)({
+                    basename: node_path_1.default.basename,
+                    gitSource,
+                    resolvedRemotionRoot: remotionRoot,
+                }),
+                port: port === null ? null : Number(port),
+                lastFocusedAt: (_c = target === null || target === void 0 ? void 0 : target.lastFocusedAt) !== null && _c !== void 0 ? _c : null,
+                canInstall: target !== null && target.canInstall && targetIsLive,
+                activeCompositionId: (_d = target === null || target === void 0 ? void 0 : target.compositionId) !== null && _d !== void 0 ? _d : null,
+                readOnly: (_e = target === null || target === void 0 ? void 0 : target.readOnly) !== null && _e !== void 0 ? _e : false,
+            }));
+            resolve();
+        }, ELEMENT_INSTALL_TARGET_RESPONSE_WAIT);
+    });
 };
 const handleRequestElementInstall = async ({ liveEventsServer, request, response, }) => {
     if (!isAllowedElementInstallOrigin(request.headers.origin)) {
@@ -163,7 +174,7 @@ const handleRequestElementInstall = async ({ liveEventsServer, request, response
             response.end(JSON.stringify({ success: false, reason: 'Invalid Element payload' }));
             return;
         }
-        const target = (0, element_install_state_1.getElementInstallTarget)();
+        const target = (0, element_install_state_1.getElementInstallTarget)(null);
         const now = Date.now();
         const targetIsLive = target !== null &&
             now - target.updatedAt < element_install_state_1.ELEMENT_INSTALL_TARGET_MAX_AGE;
@@ -212,7 +223,7 @@ const handleRequestElementInstall = async ({ liveEventsServer, request, response
         response.end(JSON.stringify({ success: false, reason: err.message }));
     }
 };
-const handleFallback = async ({ remotionRoot, hash, response, request, getCurrentInputProps, getEnvVariables, publicDir, getRenderQueue, getRenderDefaults, numberOfAudioTags, audioLatencyHint, previewSampleRate, gitSource, logLevel, enableCrossSiteIsolation, }) => {
+const handleFallback = async ({ remotionRoot, hash, response, request, getCurrentInputProps, getEnvVariables, publicDir, getRenderQueue, getRenderDefaults, numberOfAudioTags, audioLatencyHint, previewSampleRate, gitSource, logLevel, enableCrossSiteIsolation, getStudioRuntimeConfig, }) => {
     var _a;
     const acceptsHtml = ((_a = request.headers.accept) !== null && _a !== void 0 ? _a : '').includes('text/html');
     if (request.method === 'GET' && acceptsHtml) {
@@ -277,6 +288,7 @@ const handleFallback = async ({ remotionRoot, hash, response, request, getCurren
         mode: 'dev',
         audioLatencyHint: audioLatencyHint !== null && audioLatencyHint !== void 0 ? audioLatencyHint : 'playback',
         sampleRate: previewSampleRate,
+        studioRuntimeConfig: getStudioRuntimeConfig(),
     }));
 };
 const handleFileSource = async ({ method, remotionRoot, search, response, request, }) => {
@@ -379,7 +391,7 @@ const handleBeep = (_, response) => {
     readStream.pipe(response);
     return Promise.resolve();
 };
-const handleRoutes = ({ staticHash, staticHashPrefix, outputHash, outputHashPrefix, request, response, liveEventsServer, getCurrentInputProps, getEnvVariables, remotionRoot, entryPoint, publicDir, logLevel, getRenderQueue, getRenderDefaults, numberOfAudioTags, queueMethods: methods, gitSource, binariesDirectory, audioLatencyHint, previewSampleRate, enableCrossSiteIsolation, }) => {
+const handleRoutes = ({ staticHash, staticHashPrefix, outputHash, outputHashPrefix, request, response, liveEventsServer, getCurrentInputProps, getEnvVariables, remotionRoot, entryPoint, publicDir, logLevel, getRenderQueue, getRenderDefaults, numberOfAudioTags, queueMethods: methods, gitSource, binariesDirectory, audioLatencyHint, previewSampleRate, enableCrossSiteIsolation, getStudioRuntimeConfig, }) => {
     const url = new URL(request.url, 'http://localhost');
     if (url.pathname === '/api/file-source') {
         return handleFileSource({
@@ -413,6 +425,7 @@ const handleRoutes = ({ staticHash, staticHashPrefix, outputHash, outputHashPref
         }
         if (url.pathname === '/api/element-install-target') {
             return handleElementInstallTarget({
+                liveEventsServer,
                 request,
                 response,
                 remotionRoot,
@@ -496,6 +509,7 @@ const handleRoutes = ({ staticHash, staticHashPrefix, outputHash, outputHashPref
         audioLatencyHint,
         previewSampleRate,
         enableCrossSiteIsolation,
+        getStudioRuntimeConfig,
     });
 };
 exports.handleRoutes = handleRoutes;

package/dist/start-studio.d.ts

@@ -1,12 +1,12 @@
 import type { WebpackOverrideFn } from '@remotion/bundler';
-import type { GitSource, RenderDefaults, RenderJob } from '@remotion/studio-shared';
+import type { GitSource, RenderDefaults, RenderJob, StudioRuntimeConfig } from '@remotion/studio-shared';
 import type { QueueMethods } from './preview-server/api-types';
 export type StartStudioResult = {
     type: 'restarted';
 } | {
     type: 'already-running';
 };
-export declare const startStudio: ({ browserArgs, browserFlag, shouldOpenBrowser, fullEntryPath, logLevel, getCurrentInputProps, getEnvVariables, desiredPort, maxTimelineTracks, remotionRoot, keyboardShortcutsEnabled, experimentalClientSideRenderingEnabled, relativePublicDir, webpackOverride, poll, getRenderDefaults, getRenderQueue, numberOfAudioTags, queueMethods, previewEntry, gitSource, bufferStateDelayInMilliseconds, binariesDirectory, forceIPv4, audioLatencyHint, previewSampleRate, enableCrossSiteIsolation, askAIEnabled, interactivityEnabled, forceNew, rspack, }: {
+export declare const startStudio: ({ browserArgs, browserFlag, shouldOpenBrowser, fullEntryPath, logLevel, getCurrentInputProps, getEnvVariables, desiredPort, maxTimelineTracks, remotionRoot, keyboardShortcutsEnabled, experimentalClientSideRenderingEnabled, relativePublicDir, webpackOverride, poll, getRenderDefaults, getRenderQueue, numberOfAudioTags, queueMethods, previewEntry, gitSource, bufferStateDelayInMilliseconds, binariesDirectory, forceIPv4, audioLatencyHint, previewSampleRate, enableCrossSiteIsolation, askAIEnabled, interactivityEnabled, forceNew, rspack, getStudioRuntimeConfig, }: {
     browserArgs: string;
     browserFlag: string;
     logLevel: "error" | "info" | "trace" | "verbose" | "warn";
@@ -38,4 +38,5 @@ export declare const startStudio: ({ browserArgs, browserFlag, shouldOpenBrowser
     interactivityEnabled: boolean;
     forceNew: boolean;
     rspack: boolean;
+    getStudioRuntimeConfig: () => StudioRuntimeConfig;
 }) => Promise<StartStudioResult>;

package/dist/start-studio.js

@@ -19,7 +19,7 @@ const public_folder_1 = require("./preview-server/public-folder");
 const start_server_1 = require("./preview-server/start-server");
 const server_ready_1 = require("./server-ready");
 const watch_root_file_1 = require("./watch-root-file");
-const startStudio = async ({ browserArgs, browserFlag, shouldOpenBrowser, fullEntryPath, logLevel, getCurrentInputProps, getEnvVariables, desiredPort, maxTimelineTracks, remotionRoot, keyboardShortcutsEnabled, experimentalClientSideRenderingEnabled, relativePublicDir, webpackOverride, poll, getRenderDefaults, getRenderQueue, numberOfAudioTags, queueMethods, previewEntry, gitSource, bufferStateDelayInMilliseconds, binariesDirectory, forceIPv4, audioLatencyHint, previewSampleRate, enableCrossSiteIsolation, askAIEnabled, interactivityEnabled, forceNew, rspack, }) => {
+const startStudio = async ({ browserArgs, browserFlag, shouldOpenBrowser, fullEntryPath, logLevel, getCurrentInputProps, getEnvVariables, desiredPort, maxTimelineTracks, remotionRoot, keyboardShortcutsEnabled, experimentalClientSideRenderingEnabled, relativePublicDir, webpackOverride, poll, getRenderDefaults, getRenderQueue, numberOfAudioTags, queueMethods, previewEntry, gitSource, bufferStateDelayInMilliseconds, binariesDirectory, forceIPv4, audioLatencyHint, previewSampleRate, enableCrossSiteIsolation, askAIEnabled, interactivityEnabled, forceNew, rspack, getStudioRuntimeConfig, }) => {
     try {
         if (typeof Bun === 'undefined') {
             process.title = 'node (npx remotion studio)';
@@ -96,6 +96,7 @@ const startStudio = async ({ browserArgs, browserFlag, shouldOpenBrowser, fullEn
         interactivityEnabled,
         forceNew,
         rspack,
+        getStudioRuntimeConfig,
     });
     if (result.type === 'already-running') {
         renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `Already running on port ${result.port}.`);

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.488",
+	"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.488",
+		"remotion": "4.0.490",
 		"recast": "0.23.11",
-		"@remotion/bundler": "4.0.488",
-		"@remotion/renderer": "4.0.488",
-		"@remotion/studio-shared": "4.0.488",
+		"@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.488",
+		"@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"