@remotion/studio 4.0.512 → 4.0.514

package/dist/components/Timeline/use-timeline-keyframe-drag.js

@@ -10,6 +10,7 @@ const timeline_layout_1 = require("../../helpers/timeline-layout");
 const call_move_keyframe_1 = require("./call-move-keyframe");
 const find_track_for_node_path_info_1 = require("./find-track-for-node-path-info");
 const get_bounded_keyframe_drag_delta_1 = require("./get-bounded-keyframe-drag-delta");
+const get_timeline_keyframes_1 = require("./get-timeline-keyframes");
 const parse_keyframe_field_from_node_path_1 = require("./parse-keyframe-field-from-node-path");
 const TimelineKeyframeDragState_1 = require("./TimelineKeyframeDragState");
 const TimelineSelection_1 = require("./TimelineSelection");
@@ -101,7 +102,7 @@ const getTimelineSelectionsAfterEasingKeyframeDrag = ({ delta, selections, targe
 exports.getTimelineSelectionsAfterEasingKeyframeDrag = getTimelineSelectionsAfterEasingKeyframeDrag;
 const getCodeValueForTarget = ({ propStatuses, nodePath, }) => propStatuses[remotion_1.Internals.makeSequencePropsSubscriptionKey(nodePath)];
 const getTimelineKeyframeDragTarget = ({ propStatuses, displayFrame, nodePathInfo, overrideIdsToNodePaths, sequences, }) => {
-    var _a, _b;
+    var _a, _b, _c;
     const field = (0, parse_keyframe_field_from_node_path_1.parseKeyframeFieldFromNodePath)(nodePathInfo.auxiliaryKeys);
     if (field === null) {
         return null;
@@ -115,7 +116,6 @@ const getTimelineKeyframeDragTarget = ({ propStatuses, displayFrame, nodePathInf
     if (!(sequence === null || sequence === void 0 ? void 0 : sequence.controls)) {
         return null;
     }
-    const sourceFrame = displayFrame - ((_b = track === null || track === void 0 ? void 0 : track.keyframeDisplayOffset) !== null && _b !== void 0 ? _b : 0);
     const nodePath = nodePathInfo.sequenceSubscriptionKey;
     const fileName = nodePath.absolutePath;
     const sequenceStatus = getCodeValueForTarget({ propStatuses, nodePath });
@@ -132,7 +132,12 @@ const getTimelineKeyframeDragTarget = ({ propStatuses, displayFrame, nodePathInf
         if ((effectPropStatus === null || effectPropStatus === void 0 ? void 0 : effectPropStatus.status) !== 'keyframed') {
             return null;
         }
-        if (!effectPropStatus.keyframes.some((keyframe) => keyframe.frame === sourceFrame)) {
+        const effectSourceFrame = displayFrame -
+            (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+                propStatus: effectPropStatus,
+                keyframeDisplayOffset: (_b = track === null || track === void 0 ? void 0 : track.keyframeDisplayOffset) !== null && _b !== void 0 ? _b : 0,
+            });
+        if (!effectPropStatus.keyframes.some((keyframe) => keyframe.frame === effectSourceFrame)) {
             return null;
         }
         return {
@@ -145,13 +150,18 @@ const getTimelineKeyframeDragTarget = ({ propStatuses, displayFrame, nodePathInf
             nodePathInfo,
             propStatus: effectPropStatus,
             schema: effect.schema,
-            sourceFrame,
+            sourceFrame: effectSourceFrame,
         };
     }
     const sequencePropStatus = sequenceStatus.props[field.fieldKey];
     if ((sequencePropStatus === null || sequencePropStatus === void 0 ? void 0 : sequencePropStatus.status) !== 'keyframed') {
         return null;
     }
+    const sourceFrame = displayFrame -
+        (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+            propStatus: sequencePropStatus,
+            keyframeDisplayOffset: (_c = track === null || track === void 0 ? void 0 : track.keyframeDisplayOffset) !== null && _c !== void 0 ? _c : 0,
+        });
     if (!sequencePropStatus.keyframes.some((keyframe) => keyframe.frame === sourceFrame)) {
         return null;
     }

package/dist/components/UpdateCheck.d.ts

@@ -1,13 +1,5 @@
-import type { PackageManager } from '@remotion/studio-shared';
-export type UpdateInfo = {
-    currentVersion: string;
-    latestVersion: string;
-    updateAvailable: boolean;
-    skillsUpdateAvailable: boolean;
-    remotionUpgradeSkillAvailable: boolean;
-    timedOut: boolean;
-    packageManager: PackageManager | 'unknown';
-};
+import type { GetRemotionSkillsInfoResponse, UpdateAvailableResponse } from '@remotion/studio-shared';
+export type UpdateInfo = UpdateAvailableResponse & Pick<GetRemotionSkillsInfoResponse, 'remotionUpgradeSkillAvailable'>;
 export type Bug = {
     title: string;
     description: string;

package/dist/components/UpdateCheck.js

@@ -9,6 +9,7 @@ const modals_1 = require("../state/modals");
 const z_index_1 = require("../state/z-index");
 const InlineAction_1 = require("./InlineAction");
 const actions_1 = require("./RenderQueue/actions");
+const SettingsContext_1 = require("./SettingsContext");
 const buttonStyle = {
     appearance: 'none',
     border: 'none',
@@ -28,6 +29,7 @@ const updateIconContainer = {
 const UpdateCheck = () => {
     const [info, setInfo] = (0, react_1.useState)(null);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
+    const { remotionSkillsInfo } = (0, SettingsContext_1.useSettings)();
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const [knownBugs, setKnownBugs] = (0, react_1.useState)(null);
     const [hovered, setHovered] = (0, react_1.useState)(false);
@@ -76,12 +78,16 @@ const UpdateCheck = () => {
         };
     }, [checkForBugs, checkForUpdates]);
     const openModal = (0, react_1.useCallback)(() => {
+        var _a;
         setSelectedModal({
             type: 'update',
-            info: info,
+            info: {
+                ...info,
+                remotionUpgradeSkillAvailable: (_a = remotionSkillsInfo === null || remotionSkillsInfo === void 0 ? void 0 : remotionSkillsInfo.remotionUpgradeSkillAvailable) !== null && _a !== void 0 ? _a : false,
+            },
             knownBugs: knownBugs,
         });
-    }, [info, knownBugs, setSelectedModal]);
+    }, [info, knownBugs, remotionSkillsInfo, setSelectedModal]);
     const dynButtonStyle = (0, react_1.useMemo)(() => {
         return {
             ...buttonStyle,

package/dist/components/VisualControls/ClickableFileName.js

@@ -3,18 +3,25 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ClickableFileName = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
 const open_in_editor_1 = require("../../helpers/open-in-editor");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const Fieldset_1 = require("../RenderModal/SchemaEditor/Fieldset");
 const source_attribution_1 = require("../Timeline/TimelineStack/source-attribution");
+const use_default_editor_info_1 = require("../use-default-editor-info");
 const container = {
     paddingLeft: (0, Fieldset_1.getSchemaEditorFieldsetPadding)(),
     paddingTop: (0, Fieldset_1.getSchemaEditorFieldsetPadding)() / 2,
 };
 const ClickableFileName = ({ originalFileName, }) => {
     const [titleHovered, setTitleHovered] = (0, react_1.useState)(false);
-    const hoverEffect = titleHovered && originalFileName.type === 'loaded';
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { canOpenInEditor, defaultEditorId } = (0, use_default_editor_info_1.useEditorOpening)(previewServerState.type === 'connected');
+    const canOpen = canOpenInEditor &&
+        defaultEditorId !== null &&
+        originalFileName.type === 'loaded';
+    const hoverEffect = titleHovered && canOpen;
     const onTitlePointerEnter = (0, react_1.useCallback)(() => {
         setTitleHovered(true);
     }, []);
@@ -24,19 +31,19 @@ const ClickableFileName = ({ originalFileName, }) => {
     const style = (0, react_1.useMemo)(() => {
         return {
             fontSize: 12,
-            cursor: originalFileName.type === 'loaded' ? 'pointer' : undefined,
+            cursor: canOpen ? 'pointer' : undefined,
             borderBottom: hoverEffect ? colors_1.BORDER_WHITE : 'none',
             color: hoverEffect ? colors_1.WHITE_HEX : colors_1.LIGHT_COLOR,
         };
-    }, [originalFileName, hoverEffect]);
+    }, [canOpen, hoverEffect]);
     const onClick = (0, react_1.useCallback)(() => {
-        if (originalFileName.type !== 'loaded') {
+        if (originalFileName.type !== 'loaded' || !canOpen || !defaultEditorId) {
             return;
         }
-        (0, open_in_editor_1.openOriginalPositionInEditor)(originalFileName.originalFileName, null).catch((err) => {
+        (0, open_in_editor_1.openOriginalPositionInEditor)(originalFileName.originalFileName, defaultEditorId).catch((err) => {
             (0, NotificationCenter_1.showNotification)(err.message, 2000);
         });
-    }, [originalFileName]);
+    }, [canOpen, defaultEditorId, originalFileName]);
     return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsx("span", { style: style, onClick: onClick, onPointerEnter: onTitlePointerEnter, onPointerLeave: onTitlePointerLeave, children: originalFileName.type === 'loaded'
                 ? (0, source_attribution_1.getOriginalSourceAttribution)(originalFileName.originalFileName)
                 : originalFileName.type === 'loading'

package/dist/components/VisualControls/VisualControlHandle.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const no_react_1 = require("remotion/no-react");
 const fast_refresh_context_1 = require("../../fast-refresh-context");
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const get_current_edited_value_1 = require("../../visual-controls/get-current-edited-value");
 const VisualControls_1 = require("../../visual-controls/VisualControls");
 const get_zod_if_possible_1 = require("../get-zod-if-possible");
@@ -35,6 +36,13 @@ const VisualControlHandle = ({ value, keyName }) => {
         if (disableSave) {
             return;
         }
+        // Saving visual control changes goes through
+        // /api/apply-visual-control-change, which Browser Studio does not
+        // support.
+        if ((0, browser_studio_operations_1.getBrowserStudioOperations)()) {
+            (0, NotificationCenter_1.showNotification)('Saving visual control changes is not supported in Browser Studio', 4000);
+            return;
+        }
         if (originalFileName.type !== 'loaded') {
             throw new Error('Original file name is not loaded');
         }

package/dist/components/composition-menu-items.d.ts

@@ -1,8 +1,9 @@
+import type { EditorPickerId } from '@remotion/studio-shared';
 import type { SetStateAction } from 'react';
 import type { ResolvedStackLocation } from 'remotion';
 import type { ModalState } from '../state/modals';
 import type { ComboboxValue } from './NewComposition/ComboBox';
-export declare const getCompositionMenuItems: ({ composition, connectionStatus, resolvedLocation, setSelectedModal, closeMenu, readOnlyStudio, includeCompositionManagementItems, }: {
+export declare const getCompositionMenuItems: ({ composition, connectionStatus, resolvedLocation, setSelectedModal, closeMenu, readOnlyStudio, includeCompositionManagementItems, editorId, editorName, }: {
     composition: import("remotion").AnyComposition | null;
     connectionStatus: "connected" | "disconnected" | "init";
     resolvedLocation: ResolvedStackLocation | null;
@@ -10,6 +11,8 @@ export declare const getCompositionMenuItems: ({ composition, connectionStatus,
     closeMenu: () => void;
     readOnlyStudio: boolean;
     includeCompositionManagementItems: boolean;
+    editorId: EditorPickerId | null;
+    editorName: string | null;
 }) => ComboboxValue[];
 export declare const getCompositionContextMenuItems: (args: Omit<{
     composition: import("remotion").AnyComposition | null;
@@ -19,6 +22,8 @@ export declare const getCompositionContextMenuItems: (args: Omit<{
     closeMenu: () => void;
     readOnlyStudio: boolean;
     includeCompositionManagementItems: boolean;
+    editorId: EditorPickerId | null;
+    editorName: string | null;
 }, "includeCompositionManagementItems"> & {
     readonly includeCompositionManagementItems: boolean;
 }) => ComboboxValue[];

package/dist/components/composition-menu-items.js

@@ -6,13 +6,15 @@ const format_file_location_1 = require("../helpers/format-file-location");
 const open_in_editor_1 = require("../helpers/open-in-editor");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const open_in_new_window_1 = require("./open-in-new-window");
-const getCompositionMenuItems = ({ composition, connectionStatus, resolvedLocation, setSelectedModal, closeMenu, readOnlyStudio, includeCompositionManagementItems, }) => {
-    const editorName = window.remotion_editorName;
+const getCompositionMenuItems = ({ composition, connectionStatus, resolvedLocation, setSelectedModal, closeMenu, readOnlyStudio, includeCompositionManagementItems, editorId, editorName, }) => {
     const fileLocation = (0, format_file_location_1.formatFileLocation)({
         location: resolvedLocation,
         root: window.remotion_cwd,
     });
-    const showInEditorDisabled = !composition || connectionStatus !== 'connected' || !resolvedLocation;
+    const showInEditorDisabled = !editorId ||
+        !composition ||
+        connectionStatus !== 'connected' ||
+        !resolvedLocation;
     const openComponentInEditorDisabled = showInEditorDisabled || !(resolvedLocation === null || resolvedLocation === void 0 ? void 0 : resolvedLocation.source);
     const copyFileLocationDisabled = !composition || !fileLocation;
     return [
@@ -24,11 +26,11 @@ const getCompositionMenuItems = ({ composition, connectionStatus, resolvedLocati
                 leftItem: null,
                 onClick: async () => {
                     closeMenu();
-                    if (!composition || !resolvedLocation) {
+                    if (!composition || !resolvedLocation || !editorId) {
                         return;
                     }
                     try {
-                        await (0, open_in_editor_1.openOriginalPositionInEditor)(resolvedLocation, null);
+                        await (0, open_in_editor_1.openOriginalPositionInEditor)(resolvedLocation, editorId);
                     }
                     catch (err) {
                         (0, NotificationCenter_1.showNotification)(err.message, 2000);
@@ -49,13 +51,14 @@ const getCompositionMenuItems = ({ composition, connectionStatus, resolvedLocati
                 leftItem: null,
                 onClick: async () => {
                     closeMenu();
-                    if (!composition || !(resolvedLocation === null || resolvedLocation === void 0 ? void 0 : resolvedLocation.source)) {
+                    if (!composition || !(resolvedLocation === null || resolvedLocation === void 0 ? void 0 : resolvedLocation.source) || !editorId) {
                         return;
                     }
                     try {
                         await (0, open_in_editor_1.openCompositionComponentInEditor)({
                             compositionFile: resolvedLocation.source,
                             compositionId: composition.id,
+                            editorId,
                         });
                     }
                     catch (err) {

package/dist/components/delete-jsx-node-api.d.ts

@@ -0,0 +1,2 @@
+import type { DeleteJsxNodeRequest, DeleteJsxNodeResponse } from '@remotion/studio-shared';
+export declare const deleteJsxNode: (request: DeleteJsxNodeRequest) => Promise<DeleteJsxNodeResponse>;

package/dist/components/delete-jsx-node-api.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deleteJsxNode = void 0;
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
+const call_api_1 = require("./call-api");
+const deleteJsxNode = (request) => {
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    return browserStudioOperations
+        ? browserStudioOperations.deleteJsxNode(request)
+        : (0, call_api_1.callApi)('/api/delete-jsx-node', request);
+};
+exports.deleteJsxNode = deleteJsxNode;

package/dist/components/element-install-api.d.ts

@@ -0,0 +1,3 @@
+import type { InsertElementRequest, InsertElementResponse, PrepareElementInstallRequest, PrepareElementInstallResponse } from '@remotion/studio-shared';
+export declare const prepareElementInstall: (request: PrepareElementInstallRequest) => Promise<PrepareElementInstallResponse>;
+export declare const installElement: (request: InsertElementRequest) => Promise<InsertElementResponse>;

package/dist/components/element-install-api.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.installElement = exports.prepareElementInstall = void 0;
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
+const call_api_1 = require("./call-api");
+const prepareElementInstall = (request) => {
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    return browserStudioOperations
+        ? browserStudioOperations.prepareElementInstall(request)
+        : (0, call_api_1.callApi)('/api/prepare-element-install', request);
+};
+exports.prepareElementInstall = prepareElementInstall;
+const installElement = (request) => {
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    return browserStudioOperations
+        ? browserStudioOperations.insertElement(request)
+        : (0, call_api_1.callApi)('/api/insert-element', request);
+};
+exports.installElement = installElement;

package/dist/components/folder-menu-items.d.ts

@@ -1,12 +1,15 @@
+import type { EditorPickerId } from '@remotion/studio-shared';
 import type { SetStateAction } from 'react';
 import type { ResolvedStackLocation } from 'remotion';
 import type { ModalState } from '../state/modals';
 import type { ComboboxValue } from './NewComposition/ComboBox';
-export declare const getFolderMenuItems: ({ closeMenu, connectionStatus, folder, readOnlyStudio, resolvedLocation, setSelectedModal, }: {
+export declare const getFolderMenuItems: ({ closeMenu, connectionStatus, folder, readOnlyStudio, resolvedLocation, setSelectedModal, editorId, editorName, }: {
     closeMenu: () => void;
     connectionStatus: "connected" | "disconnected" | "init";
     folder: import("remotion").TFolder;
     readOnlyStudio: boolean;
     resolvedLocation: ResolvedStackLocation | null;
     setSelectedModal: (value: SetStateAction<ModalState | null>) => void;
+    editorId: EditorPickerId | null;
+    editorName: string | null;
 }) => ComboboxValue[];

package/dist/components/folder-menu-items.js

@@ -6,8 +6,7 @@ const format_file_location_1 = require("../helpers/format-file-location");
 const get_folder_id_1 = require("../helpers/get-folder-id");
 const open_in_editor_1 = require("../helpers/open-in-editor");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
-const getFolderMenuItems = ({ closeMenu, connectionStatus, folder, readOnlyStudio, resolvedLocation, setSelectedModal, }) => {
-    const editorName = window.remotion_editorName;
+const getFolderMenuItems = ({ closeMenu, connectionStatus, folder, readOnlyStudio, resolvedLocation, setSelectedModal, editorId, editorName, }) => {
     const folderId = (0, get_folder_id_1.getFolderId)({
         folderName: folder.name,
         parentName: folder.parent,
@@ -16,7 +15,7 @@ const getFolderMenuItems = ({ closeMenu, connectionStatus, folder, readOnlyStudi
         location: resolvedLocation,
         root: window.remotion_cwd,
     });
-    const showInEditorDisabled = connectionStatus !== 'connected' || !resolvedLocation;
+    const showInEditorDisabled = !editorId || connectionStatus !== 'connected' || !resolvedLocation;
     const copyFileLocationDisabled = !fileLocation;
     const codemodDisabled = readOnlyStudio || !folder.stack;
     return [
@@ -28,11 +27,11 @@ const getFolderMenuItems = ({ closeMenu, connectionStatus, folder, readOnlyStudi
                 leftItem: null,
                 onClick: async () => {
                     closeMenu();
-                    if (!resolvedLocation) {
+                    if (!resolvedLocation || !editorId) {
                         return;
                     }
                     try {
-                        await (0, open_in_editor_1.openOriginalPositionInEditor)(resolvedLocation, null);
+                        await (0, open_in_editor_1.openOriginalPositionInEditor)(resolvedLocation, editorId);
                     }
                     catch (err) {
                         (0, NotificationCenter_1.showNotification)(err.message, 2000);

package/dist/components/get-open-in-menu-items.d.ts

@@ -11,7 +11,7 @@ export declare const getOpenInMenuItems: ({ codingAgentInfo, editorDisabled, edi
     readonly fileManagerDisabled: boolean;
     readonly folder: boolean;
     readonly location: OriginalPosition | null;
-    readonly onConfigureApps: () => void;
+    readonly onConfigureApps: (() => void) | null;
     readonly onOpenInCodingAgent: (codingAgentId: "claude-code" | "codex" | "copilot" | "cursor", codingAgentName: string) => void;
     readonly onOpenInEditor: (editorId: EditorPickerId) => void;
     readonly onOpenInFileExplorer: () => void;

package/dist/components/get-open-in-menu-items.js

@@ -174,20 +174,22 @@ const getOpenInMenuItems = ({ codingAgentInfo, editorDisabled, editorInfo, exclu
                 ...systemApps,
             ]
             : []),
-        ...(hasCategorizedApps || systemApps.length > 0
+        ...(onConfigureApps && (hasCategorizedApps || systemApps.length > 0)
             ? [{ type: 'divider', id: 'open-in-settings-divider' }]
             : []),
-        {
-            id: 'change-default-apps',
-            keyHint: null,
-            label: jsx_runtime_1.jsx("span", { style: menuLabel, children: "Change default apps..." }),
-            leftItem: null,
-            onClick: onConfigureApps,
-            quickSwitcherLabel: null,
-            subMenu: null,
-            type: 'item',
-            value: 'change-default-apps',
-        },
-    ];
+        onConfigureApps
+            ? {
+                id: 'change-default-apps',
+                keyHint: null,
+                label: jsx_runtime_1.jsx("span", { style: menuLabel, children: "Change default apps..." }),
+                leftItem: null,
+                onClick: onConfigureApps,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                type: 'item',
+                value: 'change-default-apps',
+            }
+            : null,
+    ].filter(no_react_1.NoReactInternals.truthy);
 };
 exports.getOpenInMenuItems = getOpenInMenuItems;

package/dist/components/import-assets.js

@@ -6,11 +6,13 @@ const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
 const get_static_files_1 = require("../api/get-static-files");
 const write_static_file_1 = require("../api/write-static-file");
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 const clipboard_figma_1 = require("../helpers/clipboard-figma");
 const inserted_element_selection_1 = require("../helpers/inserted-element-selection");
 const install_required_package_1 = require("../helpers/install-required-package");
 const use_media_metadata_1 = require("../helpers/use-media-metadata");
 const call_api_1 = require("./call-api");
+const element_install_api_1 = require("./element-install-api");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const getFromForDrop = ({ durationInFrames, from, preferCompositionStart, }) => {
     if (preferCompositionStart !== true) {
@@ -494,13 +496,14 @@ const notifyUnsupportedFiles = (unsupportedFiles) => {
 };
 const insertCompositionElement = async ({ compositionFile, compositionId, element, from, }) => {
     const requiredPackage = (0, studio_shared_1.getRequiredPackageForInsertableElement)(element);
-    await (0, install_required_package_1.installRequiredPackages)(requiredPackage ? [{ name: requiredPackage, version: null }] : []);
-    const result = await (0, call_api_1.callApi)('/api/insert-jsx-element', {
-        compositionFile,
-        compositionId,
-        element,
-        from,
-    });
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    if (browserStudioOperations === null) {
+        await (0, install_required_package_1.installRequiredPackages)(requiredPackage ? [{ name: requiredPackage, version: null }] : []);
+    }
+    const request = { compositionFile, compositionId, element, from };
+    const result = browserStudioOperations
+        ? await browserStudioOperations.insertJsxElement(request)
+        : await (0, call_api_1.callApi)('/api/insert-jsx-element', request);
     if (!result.success) {
         (0, NotificationCenter_1.showNotification)(result.reason, 4000);
         return false;
@@ -635,6 +638,12 @@ const importAssets = async ({ compositionFile, compositionId, destinationDimensi
 };
 exports.importAssets = importAssets;
 const importFigmaClipboard = async ({ compositionFile, compositionId, destinationDimensions, dropPosition, html, }) => {
+    // Figma clipboard conversion requires the SVGR-based pipeline in
+    // @remotion/studio-server, which Browser Studio does not support.
+    if ((0, browser_studio_operations_1.getBrowserStudioOperations)()) {
+        (0, NotificationCenter_1.showNotification)('Importing Figma clipboard data is not supported in Browser Studio', 4000);
+        return;
+    }
     try {
         const converted = await (0, call_api_1.callApi)('/api/convert-figma-clipboard-to-svg', {
             html,
@@ -925,8 +934,10 @@ const insertComposition = async ({ composition, compositionFile, compositionId,
 exports.insertComposition = insertComposition;
 const insertElement = async ({ compositionFile, compositionId, element, expectedFileState, position, from, overwriteExisting, }) => {
     try {
-        await (0, install_required_package_1.installRequiredPackages)(element.dependencies);
-        const response = await (0, call_api_1.callApi)('/api/insert-element', {
+        if ((0, browser_studio_operations_1.getBrowserStudioOperations)() === null) {
+            await (0, install_required_package_1.installRequiredPackages)(element.dependencies);
+        }
+        const response = await (0, element_install_api_1.installElement)({
             compositionFile,
             compositionId,
             element,

package/dist/components/reorder-sequence-api.d.ts

@@ -0,0 +1,2 @@
+import type { ReorderSequenceRequest, ReorderSequenceResponse } from '@remotion/studio-shared';
+export declare const reorderSequence: (request: ReorderSequenceRequest) => Promise<ReorderSequenceResponse>;

package/dist/components/reorder-sequence-api.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.reorderSequence = void 0;
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
+const call_api_1 = require("./call-api");
+const reorderSequence = (request) => {
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    return browserStudioOperations
+        ? browserStudioOperations.reorderSequence(request)
+        : (0, call_api_1.callApi)('/api/reorder-sequence', request);
+};
+exports.reorderSequence = reorderSequence;

package/dist/components/sequence-props-api.js

@@ -3,6 +3,41 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.unsubscribeFromSequenceProps = exports.subscribeToSequenceProps = exports.saveSequenceProps = void 0;
 const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 const call_api_1 = require("./call-api");
+let pendingSequencePropsSubscriptions = [];
+let sequencePropsSubscriptionTimer = null;
+const flushSequencePropsSubscriptions = () => {
+    sequencePropsSubscriptionTimer = null;
+    const pending = pendingSequencePropsSubscriptions;
+    pendingSequencePropsSubscriptions = [];
+    const firstRequest = pending[0].request;
+    (0, call_api_1.callApi)('/api/subscribe-to-sequence-props', {
+        ...firstRequest,
+        requests: pending.map(({ request }) => request),
+    }).then((response) => {
+        if (!Array.isArray(response.results)) {
+            pending[0].resolve(response);
+            const error = new Error('Legacy single subscription response received for a batched request');
+            for (const item of pending.slice(1)) {
+                item.reject(error);
+            }
+            return;
+        }
+        if (response.results.length !== pending.length) {
+            const error = new Error(`Expected ${pending.length} sequence prop subscription results, got ${response.results.length}`);
+            for (const item of pending) {
+                item.reject(error);
+            }
+            return;
+        }
+        for (let index = 0; index < pending.length; index++) {
+            pending[index].resolve(response.results[index]);
+        }
+    }, (error) => {
+        for (const item of pending) {
+            item.reject(error);
+        }
+    });
+};
 const saveSequenceProps = (request) => {
     const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
     return browserStudioOperations
@@ -12,9 +47,15 @@ const saveSequenceProps = (request) => {
 exports.saveSequenceProps = saveSequenceProps;
 const subscribeToSequenceProps = (request) => {
     const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
-    return browserStudioOperations
-        ? browserStudioOperations.subscribeToSequenceProps(request)
-        : (0, call_api_1.callApi)('/api/subscribe-to-sequence-props', request);
+    if (browserStudioOperations) {
+        return browserStudioOperations.subscribeToSequenceProps(request);
+    }
+    return new Promise((resolve, reject) => {
+        pendingSequencePropsSubscriptions.push({ request, resolve, reject });
+        if (sequencePropsSubscriptionTimer === null) {
+            sequencePropsSubscriptionTimer = setTimeout(flushSequencePropsSubscriptions, 0);
+        }
+    });
 };
 exports.subscribeToSequenceProps = subscribeToSequenceProps;
 const unsubscribeFromSequenceProps = (request) => {

package/dist/components/split-jsx-sequence-api.d.ts

@@ -0,0 +1,2 @@
+import type { SplitJsxSequenceRequest, SplitJsxSequenceResponse } from '@remotion/studio-shared';
+export declare const splitJsxSequence: (request: SplitJsxSequenceRequest) => Promise<SplitJsxSequenceResponse>;

package/dist/components/split-jsx-sequence-api.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.splitJsxSequence = void 0;
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
+const call_api_1 = require("./call-api");
+const splitJsxSequence = (request) => {
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    return browserStudioOperations
+        ? browserStudioOperations.splitJsxSequence(request)
+        : (0, call_api_1.callApi)('/api/split-jsx-sequence', request);
+};
+exports.splitJsxSequence = splitJsxSequence;

package/dist/components/split-video-from-audio-api.d.ts

@@ -0,0 +1,2 @@
+import type { SplitVideoFromAudioRequest, SplitVideoFromAudioResponse } from '@remotion/studio-shared';
+export declare const splitVideoFromAudio: (request: SplitVideoFromAudioRequest) => Promise<SplitVideoFromAudioResponse>;

package/dist/components/split-video-from-audio-api.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.splitVideoFromAudio = void 0;
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
+const call_api_1 = require("./call-api");
+const splitVideoFromAudio = (request) => {
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    return browserStudioOperations
+        ? browserStudioOperations.splitVideoFromAudio(request)
+        : (0, call_api_1.callApi)('/api/split-video-from-audio', request);
+};
+exports.splitVideoFromAudio = splitVideoFromAudio;

package/dist/components/use-default-editor-info.d.ts

@@ -1,5 +1,13 @@
 import type { EditorPickerId, GetDefaultEditorInfoResponse } from '@remotion/studio-shared';
 export declare const canUseEditorPicker: (previewServerConnected: boolean) => boolean;
+export declare const canOpenInEditor: (previewServerConnected: boolean) => boolean;
 export declare const getPreferredEditorId: (editorInfo: GetDefaultEditorInfoResponse | null) => EditorPickerId | null;
+export declare const useEditorOpening: (previewServerConnected: boolean) => {
+    canConfigureApps: boolean;
+    canOpenInEditor: boolean;
+    defaultEditorId: EditorPickerId | null;
+    defaultEditorName: string | null;
+    editorInfo: GetDefaultEditorInfoResponse | null;
+};
 export declare const useDefaultEditorInfo: (enabled: boolean) => GetDefaultEditorInfoResponse | null;
 export declare const useDefaultCodingAgentInfo: (enabled: boolean) => import("@remotion/studio-shared").GetDefaultCodingAgentInfoResponse | null;