@remotion/studio-server 4.0.487 → 4.0.489

package/dist/better-opn/index.d.ts

@@ -1,3 +1,4 @@
+export declare const getChromiumBrowsersToTry: (processes: string) => ("Arc" | "Brave Browser" | "Chromium" | "Google Chrome" | "Google Chrome Canary" | "Microsoft Edge" | "Vivaldi")[];
 export declare const openBrowser: ({ url, browserFlag, browserArgs, }: {
     url: string;
     browserFlag: string | undefined;

package/dist/better-opn/index.js

@@ -1,9 +1,26 @@
 "use strict";
 // Copied from https://github.com/michaellzc/better-opn#readme
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.openBrowser = void 0;
+exports.openBrowser = exports.getChromiumBrowsersToTry = void 0;
 const node_child_process_1 = require("node:child_process");
 const open = require("open");
+const supportedChromiumBrowsers = [
+    'Google Chrome',
+    'Google Chrome Canary',
+    'Microsoft Edge',
+    'Brave Browser',
+    'Vivaldi',
+    'Chromium',
+    'Arc',
+];
+const getChromiumBrowsersToTry = (processes) => {
+    const processNames = new Set(processes
+        .split('\n')
+        .map((line) => line.trim())
+        .filter(Boolean));
+    return supportedChromiumBrowsers.filter((browser) => processNames.has(browser));
+};
+exports.getChromiumBrowsersToTry = getChromiumBrowsersToTry;
 const normalizeURLToMatch = (target) => {
     // We may encounter URL parse error but want to fallback to default behavior
     try {
@@ -26,17 +43,8 @@ const startBrowserProcess = async ({ browser, url, args, }) => {
     if (shouldTryOpenChromiumWithAppleScript) {
         let appleScriptDenied = false;
         // Will use the first open browser found from list
-        const supportedChromiumBrowsers = [
-            'Google Chrome',
-            'Google Chrome Canary',
-            'Microsoft Edge',
-            'Brave Browser',
-            'Vivaldi',
-            'Chromium',
-            'Arc',
-        ];
         const processes = await new Promise((resolve, reject) => {
-            (0, node_child_process_1.exec)('ps cax', (err, stdout) => {
+            (0, node_child_process_1.exec)('ps -cax -o comm=', (err, stdout) => {
                 if (err) {
                     reject(err);
                 }
@@ -45,7 +53,7 @@ const startBrowserProcess = async ({ browser, url, args, }) => {
                 }
             });
         });
-        const browsersToTry = supportedChromiumBrowsers.filter((b) => processes.includes(b));
+        const browsersToTry = (0, exports.getChromiumBrowsersToTry)(processes);
         for (const chromiumBrowser of browsersToTry) {
             if (appleScriptDenied) {
                 continue;

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, 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";
@@ -31,8 +31,10 @@ export declare const StudioServerInternals: {
         binariesDirectory: string | null;
         forceIPv4: boolean;
         askAIEnabled: boolean;
+        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/api-routes.js

@@ -47,6 +47,7 @@ const unsubscribe_from_sequence_props_1 = require("./routes/unsubscribe-from-seq
 const update_available_1 = require("./routes/update-available");
 const update_default_props_1 = require("./routes/update-default-props");
 const update_effect_keyframe_settings_1 = require("./routes/update-effect-keyframe-settings");
+const update_element_install_target_1 = require("./routes/update-element-install-target");
 const update_sequence_keyframe_settings_1 = require("./routes/update-sequence-keyframe-settings");
 exports.allApiRoutes = {
     '/api/composition-component-info': composition_component_info_1.compositionComponentInfoHandler,
@@ -92,6 +93,7 @@ exports.allApiRoutes = {
     '/api/install-package': install_dependency_1.handleInstallPackage,
     '/api/insert-jsx-element': insert_jsx_element_1.insertJsxElementHandler,
     '/api/insert-element': insert_element_1.insertElementHandler,
+    '/api/update-element-install-target': update_element_install_target_1.updateElementInstallTargetHandler,
     '/api/download-remote-asset': download_remote_asset_1.downloadRemoteAssetHandler,
     '/api/undo': undo_1.undoHandler,
     '/api/redo': redo_1.redoHandler,

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

@@ -0,0 +1,14 @@
+export declare const ELEMENT_INSTALL_TARGET_MAX_AGE = 5000;
+export type ElementInstallTarget = {
+    requestId: string | null;
+    clientId: string;
+    compositionFile: string | null;
+    compositionId: string | null;
+    canInstall: boolean;
+    lastFocusedAt: number | null;
+    readOnly: boolean;
+    updatedAt: number;
+};
+export declare const updateElementInstallTarget: (newTarget: Omit<ElementInstallTarget, "updatedAt">) => void;
+export declare const getElementInstallTarget: (requestId: string | null) => ElementInstallTarget | null;
+export declare const clearElementInstallStateForTests: () => void;

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

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.clearElementInstallStateForTests = exports.getElementInstallTarget = exports.updateElementInstallTarget = exports.ELEMENT_INSTALL_TARGET_MAX_AGE = void 0;
+exports.ELEMENT_INSTALL_TARGET_MAX_AGE = 5000;
+const targetsByClientId = new Map();
+const compareTargets = (a, b) => {
+    var _a, _b;
+    const aFocusedAt = (_a = a.lastFocusedAt) !== null && _a !== void 0 ? _a : 0;
+    const bFocusedAt = (_b = b.lastFocusedAt) !== null && _b !== void 0 ? _b : 0;
+    if (aFocusedAt !== bFocusedAt) {
+        return aFocusedAt - bFocusedAt;
+    }
+    return a.updatedAt - b.updatedAt;
+};
+const updateElementInstallTarget = (newTarget) => {
+    targetsByClientId.set(newTarget.clientId, {
+        ...newTarget,
+        updatedAt: Date.now(),
+    });
+};
+exports.updateElementInstallTarget = updateElementInstallTarget;
+const getElementInstallTarget = (requestId) => {
+    const now = Date.now();
+    let bestTarget = null;
+    for (const [clientId, currentTarget] of targetsByClientId) {
+        if (now - currentTarget.updatedAt >= exports.ELEMENT_INSTALL_TARGET_MAX_AGE) {
+            targetsByClientId.delete(clientId);
+            continue;
+        }
+        if (requestId !== null && currentTarget.requestId !== requestId) {
+            continue;
+        }
+        if (bestTarget === null || compareTargets(currentTarget, bestTarget) > 0) {
+            bestTarget = currentTarget;
+        }
+    }
+    return bestTarget;
+};
+exports.getElementInstallTarget = getElementInstallTarget;
+const clearElementInstallStateForTests = () => {
+    targetsByClientId.clear();
+};
+exports.clearElementInstallStateForTests = clearElementInstallStateForTests;

package/dist/preview-server/live-events.d.ts

@@ -2,7 +2,7 @@ import type { IncomingMessage, ServerResponse } from 'node:http';
 import type { EventSourceEvent } from '@remotion/studio-shared';
 export type LiveEventsServer = {
     sendEventToClient: (event: EventSourceEvent) => void;
-    sendEventToClientId: (clientId: string, event: EventSourceEvent) => void;
+    sendEventToClientId: (clientId: string, event: EventSourceEvent) => boolean;
     router: (request: IncomingMessage, response: ServerResponse) => Promise<void>;
     closeConnections: () => Promise<void>;
     addNewClientListener: (cb: () => void) => () => void;

package/dist/preview-server/live-events.js

@@ -63,9 +63,11 @@ const makeLiveEventsRouter = (logLevel, getInitialUndoRedoState) => {
     };
     const sendEventToClientId = (clientId, event) => {
         const client = clients.find((c) => c.id === clientId);
-        if (client) {
-            client.response.write(serializeMessage(event));
+        if (!client) {
+            return false;
         }
+        client.response.write(serializeMessage(event));
+        return true;
     };
     const addNewClientListener = (cb) => {
         newClientListeners.push(cb);

package/dist/preview-server/routes/update-element-install-target.d.ts

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

package/dist/preview-server/routes/update-element-install-target.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateElementInstallTargetHandler = void 0;
+const element_install_state_1 = require("../element-install-state");
+const isFiniteTimestamp = (value) => {
+    return value === null || (Number.isFinite(value) && value > 0);
+};
+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');
+    }
+    if (input.compositionFile !== null &&
+        typeof input.compositionFile !== 'string') {
+        throw new Error('Invalid composition file');
+    }
+    if (input.compositionId !== null && typeof input.compositionId !== 'string') {
+        throw new Error('Invalid composition ID');
+    }
+    (0, element_install_state_1.updateElementInstallTarget)(input);
+    return Promise.resolve({});
+};
+exports.updateElementInstallTargetHandler = updateElementInstallTargetHandler;

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 = {
@@ -41,6 +41,8 @@ export declare const startServer: (options: {
     previewSampleRate: number | null;
     enableCrossSiteIsolation: boolean;
     askAIEnabled: boolean;
+    interactivityEnabled: boolean;
     forceNew: boolean;
     rspack: boolean;
+    getStudioRuntimeConfig: () => StudioRuntimeConfig;
 }) => Promise<StartServerResult>;

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

@@ -45,6 +45,7 @@ const startServer = async (options) => {
         poll: options.poll,
         bufferStateDelayInMilliseconds: options.bufferStateDelayInMilliseconds,
         askAIEnabled: options.askAIEnabled,
+        interactivityEnabled: options.interactivityEnabled,
         extraPlugins: [watchIgnorePlugin],
     };
     let compiler;
@@ -104,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

@@ -3,11 +3,24 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.validateSameOrigin = void 0;
 const validateSameOrigin = (req) => {
     const { origin, host } = req.headers;
-    if (origin) {
-        const originUrl = new URL(origin);
-        if (originUrl.host !== host) {
-            throw new Error('Request from different origin not allowed');
+    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') {
+        throw new Error('Request without Host header not allowed');
+    }
+    let originUrl;
+    try {
+        originUrl = new URL(origin);
+    }
+    catch (_a) {
+        throw new Error('Request from different origin not allowed');
+    }
+    if (originUrl.origin !== `http://${host}`) {
+        throw new Error('Request from different origin not allowed');
     }
 };
 exports.validateSameOrigin = validateSameOrigin;

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

@@ -46,15 +46,19 @@ const get_file_source_1 = require("./helpers/get-file-source");
 const get_installed_installable_packages_1 = require("./helpers/get-installed-installable-packages");
 const resolve_output_path_1 = require("./helpers/resolve-output-path");
 const api_routes_1 = require("./preview-server/api-routes");
+const element_install_state_1 = require("./preview-server/element-install-state");
 const get_package_manager_1 = require("./preview-server/get-package-manager");
 const get_static_file_fallback_hint_1 = require("./preview-server/get-static-file-fallback-hint");
 const handler_1 = require("./preview-server/handler");
+const parse_body_1 = require("./preview-server/parse-body");
 const public_folder_1 = require("./preview-server/public-folder");
 const open_in_editor_1 = require("./preview-server/routes/open-in-editor");
 const serve_static_1 = require("./preview-server/serve-static");
 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.');
@@ -78,7 +82,148 @@ const handleRemotionConfig = (response, remotionRoot) => {
     response.end(JSON.stringify(body));
     return Promise.resolve();
 };
-const handleFallback = async ({ remotionRoot, hash, response, request, getCurrentInputProps, getEnvVariables, publicDir, getRenderQueue, getRenderDefaults, numberOfAudioTags, audioLatencyHint, previewSampleRate, gitSource, logLevel, enableCrossSiteIsolation, }) => {
+const isAllowedElementInstallOrigin = (origin) => {
+    if (!origin) {
+        return false;
+    }
+    try {
+        const url = new URL(origin);
+        return ((url.protocol === 'https:' &&
+            (url.hostname === 'remotion.dev' ||
+                url.hostname === 'www.remotion.dev')) ||
+            (url.protocol === 'http:' &&
+                (url.hostname === 'localhost' || url.hostname === '127.0.0.1')));
+    }
+    catch (_a) {
+        return false;
+    }
+};
+const setElementInstallCorsHeaders = ({ request, response, }) => {
+    const { origin } = request.headers;
+    if (isAllowedElementInstallOrigin(origin)) {
+        response.setHeader('Access-Control-Allow-Origin', origin);
+        response.setHeader('Vary', 'Origin');
+        response.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
+        response.setHeader('Access-Control-Allow-Headers', 'Content-Type');
+        response.setHeader('Access-Control-Max-Age', '600');
+        response.setHeader('Access-Control-Allow-Private-Network', 'true');
+    }
+};
+const handleElementInstallOptions = ({ request, response, }) => {
+    setElementInstallCorsHeaders({ request, response });
+    response.writeHead(isAllowedElementInstallOrigin(request.headers.origin) ? 204 : 403);
+    response.end();
+    return Promise.resolve();
+};
+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 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)) {
+        response.writeHead(403);
+        response.end(JSON.stringify({ success: false, reason: 'Origin not allowed' }));
+        return;
+    }
+    setElementInstallCorsHeaders({ request, response });
+    response.setHeader('Content-Type', 'application/json');
+    try {
+        const body = await (0, parse_body_1.parseRequestBody)(request);
+        const parsed = (0, studio_shared_1.parseElementDragData)(JSON.stringify({
+            type: 'remotion-element',
+            version: 1,
+            element: body.element,
+        }));
+        if (parsed === null) {
+            response.writeHead(400);
+            response.end(JSON.stringify({ success: false, reason: 'Invalid Element payload' }));
+            return;
+        }
+        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;
+        const targetWasRecentlyFocused = target !== null &&
+            target.lastFocusedAt !== null &&
+            now - target.lastFocusedAt < ELEMENT_INSTALL_FOCUS_MAX_AGE;
+        if (target === null ||
+            !target.canInstall ||
+            target.compositionFile === null ||
+            target.compositionId === null ||
+            !targetIsLive ||
+            !targetWasRecentlyFocused) {
+            response.writeHead(409);
+            response.end(JSON.stringify({
+                success: false,
+                reason: 'No focused writable Remotion Studio composition',
+            }));
+            return;
+        }
+        const installRequest = {
+            id: `${Date.now()}-${Math.random().toString(16).slice(2)}`,
+            clientId: target.clientId,
+            createdAt: Date.now(),
+            compositionFile: target.compositionFile,
+            compositionId: target.compositionId,
+            element: parsed.element,
+            position: null,
+        };
+        const delivered = liveEventsServer.sendEventToClientId(target.clientId, {
+            type: 'element-install-request',
+            request: installRequest,
+        });
+        if (delivered === false) {
+            response.writeHead(409);
+            response.end(JSON.stringify({
+                success: false,
+                reason: 'The selected Remotion Studio tab is no longer connected',
+            }));
+            return;
+        }
+        response.writeHead(200);
+        response.end(JSON.stringify({ success: true, status: 'sent' }));
+    }
+    catch (err) {
+        response.writeHead(500);
+        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, getStudioRuntimeConfig, }) => {
     var _a;
     const acceptsHtml = ((_a = request.headers.accept) !== null && _a !== void 0 ? _a : '').includes('text/html');
     if (request.method === 'GET' && acceptsHtml) {
@@ -143,14 +288,16 @@ 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, }) => {
+const handleFileSource = async ({ method, remotionRoot, search, response, request, }) => {
     if (method === 'OPTIONS') {
         response.writeHead(200);
         response.end();
         return Promise.resolve();
     }
+    (0, validate_same_origin_1.validateSameOrigin)(request);
     if (!search.startsWith('?')) {
         throw new Error('query must start with ?');
     }
@@ -244,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({
@@ -252,6 +399,7 @@ const handleRoutes = ({ staticHash, staticHashPrefix, outputHash, outputHashPref
             search: url.search,
             method: request.method,
             response,
+            request,
         });
     }
     if (url.pathname === `${staticHash}/api/add-asset`) {
@@ -270,6 +418,26 @@ const handleRoutes = ({ staticHash, staticHashPrefix, outputHash, outputHashPref
             remotionRoot,
         });
     }
+    if (url.pathname === '/api/element-install-target' ||
+        url.pathname === '/api/request-element-install') {
+        if (request.method === 'OPTIONS') {
+            return handleElementInstallOptions({ request, response });
+        }
+        if (url.pathname === '/api/element-install-target') {
+            return handleElementInstallTarget({
+                liveEventsServer,
+                request,
+                response,
+                remotionRoot,
+                gitSource,
+            });
+        }
+        return handleRequestElementInstall({
+            liveEventsServer,
+            request,
+            response,
+        });
+    }
     for (const [key, value] of Object.entries(api_routes_1.allApiRoutes)) {
         if (url.pathname === key) {
             return (0, handler_1.handleRequest)({
@@ -341,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, 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";
@@ -35,6 +35,8 @@ export declare const startStudio: ({ browserArgs, browserFlag, shouldOpenBrowser
     binariesDirectory: string | null;
     forceIPv4: boolean;
     askAIEnabled: boolean;
+    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, 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)';
@@ -93,8 +93,10 @@ const startStudio = async ({ browserArgs, browserFlag, shouldOpenBrowser, fullEn
         previewSampleRate,
         enableCrossSiteIsolation,
         askAIEnabled,
+        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.487",
+	"version": "4.0.489",
 	"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.487",
+		"remotion": "4.0.489",
 		"recast": "0.23.11",
-		"@remotion/bundler": "4.0.487",
-		"@remotion/renderer": "4.0.487",
-		"@remotion/studio-shared": "4.0.487",
+		"@remotion/bundler": "4.0.489",
+		"@remotion/renderer": "4.0.489",
+		"@remotion/studio-shared": "4.0.489",
 		"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.487",
+		"@remotion/eslint-config-internal": "4.0.489",
 		"eslint": "9.19.0",
 		"@types/node": "20.12.14",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"