@remotion/studio-server 4.0.486 → 4.0.488

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/codemods/update-keyframes/update-keyframes.js

@@ -37,6 +37,7 @@ exports.updateEffectKeyframes = exports.updateEffectKeyframesAst = exports.updat
 const studio_shared_1 = require("@remotion/studio-shared");
 const recast = __importStar(require("recast"));
 const get_ast_node_path_1 = require("../../helpers/get-ast-node-path");
+const parse_keyframe_easing_expression_1 = require("../../helpers/parse-keyframe-easing-expression");
 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");
@@ -225,55 +226,7 @@ const setOptionsProperty = ({ options, propertyName, value, }) => {
     options.properties.push(b.objectProperty(b.identifier(propertyName), value));
 };
 const isLinearEasing = (easing) => easing.type === 'linear';
-const getKeyframeEasing = (node) => {
-    if (node.type === 'TSAsExpression') {
-        return getKeyframeEasing(node.expression);
-    }
-    if (node.type === 'MemberExpression' &&
-        node.object.type === 'Identifier' &&
-        node.object.name === 'Easing' &&
-        node.property.type === 'Identifier' &&
-        node.property.name === 'linear' &&
-        node.computed === false) {
-        return { type: 'linear' };
-    }
-    if (node.type !== 'CallExpression' ||
-        node.callee.type !== 'MemberExpression' ||
-        node.callee.object.type !== 'Identifier' ||
-        node.callee.object.name !== 'Easing' ||
-        node.callee.property.type !== 'Identifier' ||
-        node.callee.computed) {
-        return null;
-    }
-    if (node.callee.property.name === 'spring') {
-        if (node.arguments.length > 1) {
-            return null;
-        }
-        const springConfig = node.arguments[0];
-        if ((springConfig === null || springConfig === void 0 ? void 0 : springConfig.type) === 'ArgumentPlaceholder' ||
-            (springConfig === null || springConfig === void 0 ? void 0 : springConfig.type) === 'JSXNamespacedName' ||
-            (springConfig === null || springConfig === void 0 ? void 0 : springConfig.type) === 'SpreadElement') {
-            return null;
-        }
-        return (0, studio_shared_1.parseSpringEasingConfig)(springConfig);
-    }
-    if (node.callee.property.name !== 'bezier' || node.arguments.length !== 4) {
-        return null;
-    }
-    const values = node.arguments.map((arg) => {
-        if (arg.type === 'ArgumentPlaceholder' ||
-            arg.type === 'JSXNamespacedName' ||
-            arg.type === 'SpreadElement') {
-            return null;
-        }
-        return getNumericValue(arg);
-    });
-    if (values.some((value) => value === null)) {
-        return null;
-    }
-    const [x1, y1, x2, y2] = values;
-    return { type: 'bezier', x1, y1, x2, y2 };
-};
+const getKeyframeEasing = (node) => (0, parse_keyframe_easing_expression_1.parseKeyframeEasingExpression)(node);
 const getKeyframeEasingArray = ({ easingNode, segmentCount, }) => {
     if (segmentCount === 0) {
         return [];

package/dist/helpers/parse-keyframe-easing-expression.d.ts

@@ -0,0 +1,3 @@
+import type { Expression } from '@babel/types';
+import type { CanUpdateSequencePropStatusEasing } from 'remotion';
+export declare const parseKeyframeEasingExpression: (node: Expression) => CanUpdateSequencePropStatusEasing | null;

package/dist/helpers/parse-keyframe-easing-expression.js

@@ -0,0 +1,141 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseKeyframeEasingExpression = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
+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 getExpressionArgument = (arg) => {
+    if (arg === undefined ||
+        arg.type === 'ArgumentPlaceholder' ||
+        arg.type === 'JSXNamespacedName' ||
+        arg.type === 'SpreadElement') {
+        return null;
+    }
+    return arg;
+};
+const getMemberExpressionKeyframeEasing = (name) => {
+    if (name === 'linear') {
+        return studio_shared_1.LINEAR_KEYFRAME_EASING;
+    }
+    if (name === 'ease') {
+        return studio_shared_1.EASE_KEYFRAME_EASING;
+    }
+    if (name === 'quad') {
+        return studio_shared_1.QUAD_KEYFRAME_EASING;
+    }
+    if (name === 'cubic') {
+        return studio_shared_1.CUBIC_KEYFRAME_EASING;
+    }
+    return null;
+};
+const parseKeyframeEasingExpression = (node) => {
+    if (node.type === 'TSAsExpression') {
+        return (0, exports.parseKeyframeEasingExpression)(node.expression);
+    }
+    if (node.type === 'MemberExpression' &&
+        node.object.type === 'Identifier' &&
+        node.object.name === 'Easing' &&
+        node.property.type === 'Identifier' &&
+        node.computed === false) {
+        return getMemberExpressionKeyframeEasing(node.property.name);
+    }
+    if (node.type !== 'CallExpression' ||
+        node.callee.type !== 'MemberExpression' ||
+        node.callee.object.type !== 'Identifier' ||
+        node.callee.object.name !== 'Easing' ||
+        node.callee.property.type !== 'Identifier' ||
+        node.callee.computed) {
+        return null;
+    }
+    const propertyName = node.callee.property.name;
+    if (propertyName === 'spring') {
+        if (node.arguments.length > 1) {
+            return null;
+        }
+        if (node.arguments.length === 0) {
+            return (0, studio_shared_1.parseSpringEasingConfig)(undefined);
+        }
+        const springConfig = getExpressionArgument(node.arguments[0]);
+        return springConfig ? (0, studio_shared_1.parseSpringEasingConfig)(springConfig) : null;
+    }
+    if (propertyName === 'bezier') {
+        if (node.arguments.length !== 4) {
+            return null;
+        }
+        const values = node.arguments.map((arg) => {
+            const expression = getExpressionArgument(arg);
+            return expression ? getNumericValue(expression) : null;
+        });
+        if (values.some((value) => value === null)) {
+            return null;
+        }
+        const [x1, y1, x2, y2] = values;
+        return { type: 'bezier', x1, y1, x2, y2 };
+    }
+    if (propertyName === 'back') {
+        if (node.arguments.length > 1) {
+            return null;
+        }
+        if (node.arguments.length === 0) {
+            return (0, studio_shared_1.getBackKeyframeEasing)();
+        }
+        const expression = getExpressionArgument(node.arguments[0]);
+        if (!expression) {
+            return null;
+        }
+        const s = getNumericValue(expression);
+        if (s === null) {
+            return null;
+        }
+        return (0, studio_shared_1.getBackKeyframeEasing)(s);
+    }
+    if (propertyName === 'poly') {
+        if (node.arguments.length !== 1) {
+            return null;
+        }
+        const expression = getExpressionArgument(node.arguments[0]);
+        const n = expression ? getNumericValue(expression) : null;
+        return n === null ? null : (0, studio_shared_1.getPolyKeyframeEasing)(n);
+    }
+    if (propertyName === 'in') {
+        if (node.arguments.length !== 1) {
+            return null;
+        }
+        const expression = getExpressionArgument(node.arguments[0]);
+        return expression ? (0, exports.parseKeyframeEasingExpression)(expression) : null;
+    }
+    if (propertyName === 'out') {
+        if (node.arguments.length !== 1) {
+            return null;
+        }
+        const expression = getExpressionArgument(node.arguments[0]);
+        const easing = expression
+            ? (0, exports.parseKeyframeEasingExpression)(expression)
+            : null;
+        return easing ? (0, studio_shared_1.getOutKeyframeEasing)(easing) : null;
+    }
+    if (propertyName === 'inOut') {
+        if (node.arguments.length !== 1) {
+            return null;
+        }
+        const expression = getExpressionArgument(node.arguments[0]);
+        const easing = expression
+            ? (0, exports.parseKeyframeEasingExpression)(expression)
+            : null;
+        return (easing === null || easing === void 0 ? void 0 : easing.type) === 'linear' ? easing : null;
+    }
+    return null;
+};
+exports.parseKeyframeEasingExpression = parseKeyframeEasingExpression;

package/dist/helpers/resolve-composition-component.d.ts

@@ -29,7 +29,7 @@ export declare const insertJsxElementIntoComposition: ({ remotionRoot, compositi
         dimensions: {
             width: number;
             height: number;
-        };
+        } | null;
         durationInFrames?: number | null | undefined;
         name: string | null;
         position: InsertableCompositionElementPosition | null;

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

@@ -583,8 +583,12 @@ const createComponentElement = ({ addPositionStyle, localName, props, position,
 const createSequenceWrappedElement = ({ child, dimensions, durationInFrames, name, position, sequenceLocalName, }) => {
     return recast.types.builders.jsxElement(recast.types.builders.jsxOpeningElement(recast.types.builders.jsxIdentifier(sequenceLocalName), [
         ...(name === null ? [] : [createStringAttribute('name', name)]),
-        createNumberAttribute('width', dimensions.width),
-        createNumberAttribute('height', dimensions.height),
+        ...(dimensions !== null
+            ? [
+                createNumberAttribute('width', dimensions.width),
+                createNumberAttribute('height', dimensions.height),
+            ]
+            : []),
         ...(durationInFrames === null
             ? []
             : [createNumberAttribute('durationInFrames', durationInFrames)]),

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, }: {
         browserArgs: string;
         browserFlag: string;
         logLevel: "error" | "info" | "trace" | "verbose" | "warn";
@@ -31,6 +31,7 @@ export declare const StudioServerInternals: {
         binariesDirectory: string | null;
         forceIPv4: boolean;
         askAIEnabled: boolean;
+        interactivityEnabled: boolean;
         forceNew: boolean;
         rspack: boolean;
     }) => Promise<import("./start-studio").StartStudioResult>;

package/dist/open-browser-shortcut.d.ts

@@ -0,0 +1,9 @@
+export declare const registerOpenBrowserShortcut: ({ browserArgs, browserFlag, url, logLevel, }: {
+    browserArgs: string;
+    browserFlag: string;
+    url: string;
+    logLevel: "error" | "info" | "trace" | "verbose" | "warn";
+}) => {
+    registered: boolean;
+    cleanup: () => void;
+};

package/dist/open-browser-shortcut.js

@@ -0,0 +1,111 @@
+"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.registerOpenBrowserShortcut = void 0;
+const readline = __importStar(require("node:readline"));
+const renderer_1 = require("@remotion/renderer");
+const maybe_open_browser_1 = require("./maybe-open-browser");
+const live_events_1 = require("./preview-server/live-events");
+const registerOpenBrowserShortcut = ({ browserArgs, browserFlag, url, logLevel, }) => {
+    if (!process.stdin.isTTY) {
+        return { registered: false, cleanup: () => undefined };
+    }
+    if (typeof process.stdin.setRawMode !== 'function') {
+        return { registered: false, cleanup: () => undefined };
+    }
+    const wasRaw = process.stdin.isRaw;
+    const shouldPauseAfterCleanup = process.stdin.isPaused();
+    let cleanedUp = false;
+    let isOpeningBrowser = false;
+    const cleanup = () => {
+        if (cleanedUp) {
+            return;
+        }
+        cleanedUp = true;
+        process.stdin.removeListener('keypress', onKeypress);
+        process.removeListener('SIGINT', cleanup);
+        process.removeListener('exit', cleanup);
+        if (!wasRaw && process.stdin.isTTY) {
+            process.stdin.setRawMode(false);
+        }
+        if (shouldPauseAfterCleanup) {
+            process.stdin.pause();
+        }
+    };
+    const openStudio = () => {
+        if (isOpeningBrowser) {
+            return;
+        }
+        isOpeningBrowser = true;
+        (0, live_events_1.clearPrintPortMessageTimeout)();
+        (0, maybe_open_browser_1.maybeOpenBrowser)({
+            browserArgs,
+            browserFlag,
+            shouldOpenBrowser: true,
+            url,
+            logLevel,
+        })
+            .then((result) => {
+            if (result.didOpenBrowser) {
+                renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `Opened ${url} in browser`);
+            }
+        })
+            .catch((err) => {
+            renderer_1.RenderInternals.Log.error({ indent: false, logLevel }, 'Could not open browser:', err);
+        })
+            .finally(() => {
+            isOpeningBrowser = false;
+        });
+    };
+    function onKeypress(_str, key) {
+        if ((key === null || key === void 0 ? void 0 : key.ctrl) && key.name === 'c') {
+            cleanup();
+            process.kill(process.pid, 'SIGINT');
+            return;
+        }
+        if ((key === null || key === void 0 ? void 0 : key.meta) || (key === null || key === void 0 ? void 0 : key.ctrl) || (key === null || key === void 0 ? void 0 : key.name) !== 's') {
+            return;
+        }
+        openStudio();
+    }
+    readline.emitKeypressEvents(process.stdin);
+    process.stdin.setRawMode(true);
+    process.stdin.resume();
+    process.stdin.on('keypress', onKeypress);
+    process.once('SIGINT', cleanup);
+    process.once('exit', cleanup);
+    return { registered: true, cleanup };
+};
+exports.registerOpenBrowserShortcut = registerOpenBrowserShortcut;

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,13 @@
+export declare const ELEMENT_INSTALL_TARGET_MAX_AGE = 5000;
+export type ElementInstallTarget = {
+    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: () => ElementInstallTarget | null;
+export declare const clearElementInstallStateForTests: () => void;

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

@@ -0,0 +1,40 @@
+"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 = () => {
+    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 (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,11 +2,12 @@ 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;
 };
+export declare const clearPrintPortMessageTimeout: () => void;
 export type InitialUndoRedoState = {
     undoFile: string | null;
     redoFile: string | null;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setLiveEventsListener = exports.waitForLiveEventsListener = exports.makeLiveEventsRouter = void 0;
+exports.setLiveEventsListener = exports.waitForLiveEventsListener = exports.makeLiveEventsRouter = exports.clearPrintPortMessageTimeout = void 0;
 const server_ready_1 = require("../server-ready");
 const default_props_watchers_1 = require("./default-props-watchers");
 const file_existence_watchers_1 = require("./file-existence-watchers");
@@ -9,6 +9,13 @@ const serializeMessage = (message) => {
     return `data: ${JSON.stringify(message)}\n\n`;
 };
 let printPortMessageTimeout = null;
+const clearPrintPortMessageTimeout = () => {
+    if (printPortMessageTimeout) {
+        clearTimeout(printPortMessageTimeout);
+        printPortMessageTimeout = null;
+    }
+};
+exports.clearPrintPortMessageTimeout = clearPrintPortMessageTimeout;
 const makeLiveEventsRouter = (logLevel, getInitialUndoRedoState) => {
     let clients = [];
     let newClientListeners = [];
@@ -33,9 +40,7 @@ const makeLiveEventsRouter = (logLevel, getInitialUndoRedoState) => {
         };
         clients.push(newClient);
         newClientListeners.forEach((cb) => cb());
-        if (printPortMessageTimeout) {
-            clearTimeout(printPortMessageTimeout);
-        }
+        (0, exports.clearPrintPortMessageTimeout)();
         request.on('close', () => {
             (0, default_props_watchers_1.unsubscribeClientDefaultPropsWatchers)(clientId);
             (0, file_existence_watchers_1.unsubscribeClientFileExistenceWatchers)(clientId);
@@ -43,9 +48,7 @@ const makeLiveEventsRouter = (logLevel, getInitialUndoRedoState) => {
             clients = clients.filter((client) => client.id !== clientId);
             // If all clients disconnected, print a comment so user can easily restart it.
             if (clients.length === 0) {
-                if (printPortMessageTimeout) {
-                    clearTimeout(printPortMessageTimeout);
-                }
+                (0, exports.clearPrintPortMessageTimeout)();
                 printPortMessageTimeout = setTimeout(() => {
                     (0, server_ready_1.printServerReadyComment)('To restart', logLevel);
                 }, 2500);
@@ -60,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/can-update-sequence-props.js

@@ -42,6 +42,7 @@ const no_react_1 = require("remotion/no-react");
 const parse_ast_1 = require("../../codemods/parse-ast");
 const get_ast_node_path_1 = require("../../helpers/get-ast-node-path");
 const import_agnostic_node_path_1 = require("../../helpers/import-agnostic-node-path");
+const parse_keyframe_easing_expression_1 = require("../../helpers/parse-keyframe-easing-expression");
 const resolve_file_inside_project_1 = require("../../helpers/resolve-file-inside-project");
 const jsx_component_identity_1 = require("../jsx-component-identity");
 const jsx_element_not_found_at_location_error_1 = require("../jsx-element-not-found-at-location-error");
@@ -200,55 +201,7 @@ const getExtrapolateType = (node) => {
     }
     return null;
 };
-const getKeyframeEasing = (node) => {
-    if (node.type === 'TSAsExpression') {
-        return getKeyframeEasing(node.expression);
-    }
-    if (node.type === 'MemberExpression' &&
-        node.object.type === 'Identifier' &&
-        node.object.name === 'Easing' &&
-        node.property.type === 'Identifier' &&
-        node.property.name === 'linear' &&
-        node.computed === false) {
-        return { type: 'linear' };
-    }
-    if (node.type !== 'CallExpression' ||
-        node.callee.type !== 'MemberExpression' ||
-        node.callee.object.type !== 'Identifier' ||
-        node.callee.object.name !== 'Easing' ||
-        node.callee.property.type !== 'Identifier' ||
-        node.callee.computed) {
-        return null;
-    }
-    if (node.callee.property.name === 'spring') {
-        if (node.arguments.length > 1) {
-            return null;
-        }
-        const springConfig = node.arguments[0];
-        if ((springConfig === null || springConfig === void 0 ? void 0 : springConfig.type) === 'ArgumentPlaceholder' ||
-            (springConfig === null || springConfig === void 0 ? void 0 : springConfig.type) === 'JSXNamespacedName' ||
-            (springConfig === null || springConfig === void 0 ? void 0 : springConfig.type) === 'SpreadElement') {
-            return null;
-        }
-        return (0, studio_shared_1.parseSpringEasingConfig)(springConfig);
-    }
-    if (node.callee.property.name !== 'bezier' || node.arguments.length !== 4) {
-        return null;
-    }
-    const values = node.arguments.map((arg) => {
-        if (arg.type === 'ArgumentPlaceholder' ||
-            arg.type === 'JSXNamespacedName' ||
-            arg.type === 'SpreadElement') {
-            return null;
-        }
-        return getNumericValue(arg);
-    });
-    if (values.some((v) => v === null)) {
-        return null;
-    }
-    const [x1, y1, x2, y2] = values;
-    return { type: 'bezier', x1, y1, x2, y2 };
-};
+const getKeyframeEasing = (node) => (0, parse_keyframe_easing_expression_1.parseKeyframeEasingExpression)(node);
 const getKeyframeEasingArray = ({ easingNode, segments, }) => {
     if (segments === 0) {
         return [];

package/dist/preview-server/routes/insert-element.js

@@ -45,6 +45,9 @@ const makeRelativeImportPath = ({ fromFile, toFile, }) => {
     return relative;
 };
 const validateDimensions = (dimensions) => {
+    if (dimensions === null) {
+        return;
+    }
     if (!Number.isFinite(dimensions.width) ||
         !Number.isFinite(dimensions.height) ||
         dimensions.width <= 0 ||

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,25 @@
+"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 (!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

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

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

@@ -3,11 +3,21 @@ 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') {
+        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.js

@@ -46,15 +46,18 @@ 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 static404 = (response) => {
     response.writeHead(404);
     response.end('The static/ prefix has been changed, this URL is no longer valid.');
@@ -78,6 +81,137 @@ const handleRemotionConfig = (response, remotionRoot) => {
     response.end(JSON.stringify(body));
     return Promise.resolve();
 };
+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 = ({ request, response, remotionRoot, gitSource, }) => {
+    var _a, _b, _c, _d, _e;
+    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 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)();
+        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, }) => {
     var _a;
     const acceptsHtml = ((_a = request.headers.accept) !== null && _a !== void 0 ? _a : '').includes('text/html');
@@ -145,12 +279,13 @@ const handleFallback = async ({ remotionRoot, hash, response, request, getCurren
         sampleRate: previewSampleRate,
     }));
 };
-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 ?');
     }
@@ -252,6 +387,7 @@ const handleRoutes = ({ staticHash, staticHashPrefix, outputHash, outputHashPref
             search: url.search,
             method: request.method,
             response,
+            request,
         });
     }
     if (url.pathname === `${staticHash}/api/add-asset`) {
@@ -270,6 +406,25 @@ 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({
+                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)({

package/dist/start-studio.d.ts

@@ -6,7 +6,7 @@ export type StartStudioResult = {
 } | {
     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, }: {
     browserArgs: string;
     browserFlag: string;
     logLevel: "error" | "info" | "trace" | "verbose" | "warn";
@@ -35,6 +35,7 @@ export declare const startStudio: ({ browserArgs, browserFlag, shouldOpenBrowser
     binariesDirectory: string | null;
     forceIPv4: boolean;
     askAIEnabled: boolean;
+    interactivityEnabled: boolean;
     forceNew: boolean;
     rspack: boolean;
 }) => Promise<StartStudioResult>;

package/dist/start-studio.js

@@ -11,6 +11,7 @@ const renderer_1 = require("@remotion/renderer");
 const file_watcher_1 = require("./file-watcher");
 const get_network_address_1 = require("./get-network-address");
 const maybe_open_browser_1 = require("./maybe-open-browser");
+const open_browser_shortcut_1 = require("./open-browser-shortcut");
 const close_and_restart_1 = require("./preview-server/close-and-restart");
 const get_absolute_public_dir_1 = require("./preview-server/get-absolute-public-dir");
 const live_events_1 = require("./preview-server/live-events");
@@ -18,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, }) => {
     try {
         if (typeof Bun === 'undefined') {
             process.title = 'node (npx remotion studio)';
@@ -92,6 +93,7 @@ const startStudio = async ({ browserArgs, browserFlag, shouldOpenBrowser, fullEn
         previewSampleRate,
         enableCrossSiteIsolation,
         askAIEnabled,
+        interactivityEnabled,
         forceNew,
         rspack,
     });
@@ -120,14 +122,26 @@ const startStudio = async ({ browserArgs, browserFlag, shouldOpenBrowser, fullEn
     }
     (0, server_ready_1.printServerReadyComment)('Server ready', logLevel);
     renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, 'Building...');
-    await (0, maybe_open_browser_1.maybeOpenBrowser)({
+    const studioUrl = `http://localhost:${port}`;
+    const openBrowserShortcut = (0, open_browser_shortcut_1.registerOpenBrowserShortcut)({
         browserArgs,
         browserFlag,
-        shouldOpenBrowser,
-        url: `http://localhost:${port}`,
+        url: studioUrl,
         logLevel,
     });
-    await (0, close_and_restart_1.noOpUntilRestart)();
+    try {
+        await (0, maybe_open_browser_1.maybeOpenBrowser)({
+            browserArgs,
+            browserFlag,
+            shouldOpenBrowser,
+            url: studioUrl,
+            logLevel,
+        });
+        await (0, close_and_restart_1.noOpUntilRestart)();
+    }
+    finally {
+        openBrowserShortcut.cleanup();
+    }
     renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, 'Closing server to restart...');
     await liveEventsServer.closeConnections();
     cleanupLiveEventsListener();

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