@remotion/studio 4.0.513 → 4.0.515

package/dist/components/Timeline/timeline-scroll-logic.d.ts

@@ -2,6 +2,30 @@ export declare const canScrollTimelineIntoDirection: () => {
     canScrollRight: boolean;
     canScrollLeft: boolean;
 };
+export declare const SCROLL_INCREMENT = 200;
+export declare const EDGE_SCROLL_VERTICAL_INCREMENT = 60;
+export type TimelineEdgeScrollDirections = {
+    x: 'left' | 'right' | null;
+    y: 'up' | 'down' | null;
+};
+export type TimelineEdgeAutoScroller = {
+    update: (e: {
+        clientX: number;
+        clientY: number;
+    }) => TimelineEdgeScrollDirections;
+    stop: () => void;
+};
+/**
+ * Shared edge auto-scroll loop for drag gestures on the timeline (playhead
+ * scrubbing, marquee selection). Detects when the pointer is in an edge zone
+ * and repeatedly invokes `onTick` while it stays there. The consumer performs
+ * the actual scrolling (and any dependent updates) inside `onTick`, so it can
+ * read a settled scroll position afterwards.
+ */
+export declare const startTimelineEdgeAutoScroll: ({ includeVertical, onTick, }: {
+    includeVertical: boolean;
+    onTick: (directions: TimelineEdgeScrollDirections) => void;
+}) => TimelineEdgeAutoScroller;
 export declare const getFrameWhileScrollingLeft: ({ durationInFrames, width, }: {
     durationInFrames: number;
     width: number;

package/dist/components/Timeline/timeline-scroll-logic.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.prepareToPreserveTimelineCursor = exports.getScrollLeftToKeepCursorInPlace = exports.viewportClientXToScrollContentX = exports.getFrameFromTimelineDrop = exports.getFrameFromX = exports.getFrameWhileScrollingRight = exports.getFrameIncrementFromWidth = exports.getScrollPositionForCursorOnRightEdge = exports.getScrollPositionForCursorOnLeftEdge = exports.scrollToTimelineXOffset = exports.ensureFrameIsInViewport = exports.isCursorInViewport = exports.getFrameWhileScrollingLeft = exports.canScrollTimelineIntoDirection = void 0;
+exports.prepareToPreserveTimelineCursor = exports.getScrollLeftToKeepCursorInPlace = exports.viewportClientXToScrollContentX = exports.getFrameFromTimelineDrop = exports.getFrameFromX = exports.getFrameWhileScrollingRight = exports.getFrameIncrementFromWidth = exports.getScrollPositionForCursorOnRightEdge = exports.getScrollPositionForCursorOnLeftEdge = exports.scrollToTimelineXOffset = exports.ensureFrameIsInViewport = exports.isCursorInViewport = exports.getFrameWhileScrollingLeft = exports.startTimelineEdgeAutoScroll = exports.EDGE_SCROLL_VERTICAL_INCREMENT = exports.SCROLL_INCREMENT = exports.canScrollTimelineIntoDirection = void 0;
 const remotion_1 = require("remotion");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
+const imperative_state_1 = require("./imperative-state");
 const timeline_refs_1 = require("./timeline-refs");
 const TimelineSlider_1 = require("./TimelineSlider");
 const canScrollTimelineIntoDirection = () => {
@@ -13,7 +14,126 @@ const canScrollTimelineIntoDirection = () => {
     return { canScrollRight, canScrollLeft };
 };
 exports.canScrollTimelineIntoDirection = canScrollTimelineIntoDirection;
-const SCROLL_INCREMENT = 200;
+exports.SCROLL_INCREMENT = 200;
+exports.EDGE_SCROLL_VERTICAL_INCREMENT = 60;
+const EDGE_SCROLL_INTERVAL_MS = 100;
+// Once edge-scrolling has started, the pointer must move this many pixels
+// back inside the timeline to stop it. Prevents pixel jitter around the edge
+// threshold from rapidly cancelling and restarting the auto-scroll.
+const EDGE_SCROLL_EXIT_HYSTERESIS = 8;
+// The vertical edge zones extend this many pixels into the viewport, so the
+// auto-scroll already engages when dragging close to (not exactly onto) the
+// top or bottom edge.
+const EDGE_SCROLL_VERTICAL_INSET = 8;
+const canScrollTimelineVerticallyIntoDirection = () => {
+    const { current } = timeline_refs_1.timelineVerticalScroll;
+    if (!current) {
+        return { canScrollUp: false, canScrollDown: false };
+    }
+    const { scrollTop, scrollHeight, clientHeight } = current;
+    return {
+        canScrollUp: scrollTop > 0,
+        canScrollDown: scrollHeight - scrollTop - clientHeight > 0,
+    };
+};
+const getEdgeScrollDirections = ({ clientX, clientY, includeVertical, active, }) => {
+    let x = null;
+    const scrollable = timeline_refs_1.scrollableRef.current;
+    if (scrollable) {
+        const rect = scrollable.getBoundingClientRect();
+        const leftThreshold = rect.left + (active.x === 'left' ? EDGE_SCROLL_EXIT_HYSTERESIS : 0);
+        const rightThreshold = rect.left +
+            scrollable.clientWidth -
+            timeline_layout_1.TIMELINE_PADDING -
+            (active.x === 'right' ? EDGE_SCROLL_EXIT_HYSTERESIS : 0);
+        const { canScrollLeft, canScrollRight } = (0, exports.canScrollTimelineIntoDirection)();
+        if (clientX <= leftThreshold && canScrollLeft) {
+            x = 'left';
+        }
+        else if (clientX >= rightThreshold && canScrollRight) {
+            x = 'right';
+        }
+    }
+    let y = null;
+    const vertical = timeline_refs_1.timelineVerticalScroll.current;
+    if (includeVertical && vertical) {
+        const rect = vertical.getBoundingClientRect();
+        const topThreshold = rect.top +
+            EDGE_SCROLL_VERTICAL_INSET +
+            (active.y === 'up' ? EDGE_SCROLL_EXIT_HYSTERESIS : 0);
+        const bottomThreshold = rect.bottom -
+            EDGE_SCROLL_VERTICAL_INSET -
+            (active.y === 'down' ? EDGE_SCROLL_EXIT_HYSTERESIS : 0);
+        const { canScrollUp, canScrollDown } = canScrollTimelineVerticallyIntoDirection();
+        if (clientY <= topThreshold && canScrollUp) {
+            y = 'up';
+        }
+        else if (clientY >= bottomThreshold && canScrollDown) {
+            y = 'down';
+        }
+    }
+    return { x, y };
+};
+/**
+ * Shared edge auto-scroll loop for drag gestures on the timeline (playhead
+ * scrubbing, marquee selection). Detects when the pointer is in an edge zone
+ * and repeatedly invokes `onTick` while it stays there. The consumer performs
+ * the actual scrolling (and any dependent updates) inside `onTick`, so it can
+ * read a settled scroll position afterwards.
+ */
+const startTimelineEdgeAutoScroll = ({ includeVertical, onTick, }) => {
+    let active = { x: null, y: null };
+    let lastPointer = null;
+    let interval = null;
+    const stopInterval = () => {
+        if (interval !== null) {
+            clearInterval(interval);
+            interval = null;
+        }
+    };
+    const tick = () => {
+        if (lastPointer === null) {
+            return;
+        }
+        active = getEdgeScrollDirections({
+            clientX: lastPointer.clientX,
+            clientY: lastPointer.clientY,
+            includeVertical,
+            active,
+        });
+        if (active.x === null && active.y === null) {
+            stopInterval();
+            return;
+        }
+        onTick(active);
+    };
+    const update = (e) => {
+        lastPointer = { clientX: e.clientX, clientY: e.clientY };
+        active = getEdgeScrollDirections({
+            clientX: e.clientX,
+            clientY: e.clientY,
+            includeVertical,
+            active,
+        });
+        if (active.x !== null || active.y !== null) {
+            if (interval === null) {
+                onTick(active);
+                interval = setInterval(tick, EDGE_SCROLL_INTERVAL_MS);
+            }
+        }
+        else {
+            stopInterval();
+        }
+        return active;
+    };
+    const stop = () => {
+        stopInterval();
+        lastPointer = null;
+        active = { x: null, y: null };
+    };
+    return { update, stop };
+};
+exports.startTimelineEdgeAutoScroll = startTimelineEdgeAutoScroll;
 const calculateFrameWhileScrollingRight = ({ durationInFrames, width, scrollLeft, }) => {
     var _a;
     return ((0, exports.getFrameFromX)({
@@ -28,7 +148,7 @@ const calculateFrameWhileScrollingRight = ({ durationInFrames, width, scrollLeft
 const getFrameWhileScrollingLeft = ({ durationInFrames, width, }) => {
     var _a, _b;
     const nextFrame = (0, exports.getFrameFromX)({
-        clientX: ((_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) - SCROLL_INCREMENT,
+        clientX: ((_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) - exports.SCROLL_INCREMENT,
         durationInFrames,
         width,
         extrapolate: 'clamp',
@@ -71,6 +191,9 @@ exports.isCursorInViewport = isCursorInViewport;
 const ensureFrameIsInViewport = ({ direction, durationInFrames, frame, }) => {
     var _a, _b, _c;
     var _d, _e;
+    // Sync the imperative frame first: scrolling below triggers the scroll
+    // listener in TimelineSlider, which reads the frame imperatively.
+    (0, imperative_state_1.setCurrentFrame)(frame);
     (_a = TimelineSlider_1.redrawTimelineSliderFast.current) === null || _a === void 0 ? void 0 : _a.draw(frame);
     const width = (_d = (_b = timeline_refs_1.scrollableRef.current) === null || _b === void 0 ? void 0 : _b.scrollWidth) !== null && _d !== void 0 ? _d : 0;
     const scrollLeft = (_e = (_c = timeline_refs_1.scrollableRef.current) === null || _c === void 0 ? void 0 : _c.scrollLeft) !== null && _e !== void 0 ? _e : 0;
@@ -183,7 +306,7 @@ const getFrameWhileScrollingRight = ({ durationInFrames, width, }) => {
     const nextFrame = calculateFrameWhileScrollingRight({
         durationInFrames,
         width,
-        scrollLeft: ((_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) + SCROLL_INCREMENT,
+        scrollLeft: ((_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) + exports.SCROLL_INCREMENT,
     });
     const currentFrame = calculateFrameWhileScrollingRight({
         durationInFrames,

package/dist/components/Timeline/use-timeline-height.d.ts

@@ -1,6 +1,4 @@
 import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
-export declare const useTimelineHeight: ({ shown, hasBeenCut, isStill, }: {
-    shown: TimelineTrackData[];
-    hasBeenCut: boolean;
-    isStill: boolean;
-}) => number;
+export declare const useTimelineTrackHeights: ({ timeline, }: {
+    timeline: readonly TimelineTrackData[];
+}) => readonly number[];

package/dist/components/Timeline/use-timeline-height.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTimelineHeight = void 0;
+exports.useTimelineTrackHeights = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
@@ -8,11 +8,9 @@ const timeline_layout_1 = require("../../helpers/timeline-layout");
 const use_runtime_values_1 = require("../../helpers/use-runtime-values");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const get_node_keyframes_1 = require("./get-node-keyframes");
-const MaxTimelineTracks_1 = require("./MaxTimelineTracks");
 const timeline_expanded_filter_1 = require("./timeline-expanded-filter");
 const TimelineSelection_1 = require("./TimelineSelection");
-const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
-const useTimelineHeight = ({ shown, hasBeenCut, isStill, }) => {
+const useTimelineTrackHeights = ({ timeline, }) => {
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
@@ -20,7 +18,7 @@ const useTimelineHeight = ({ shown, hasBeenCut, isStill, }) => {
     const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
     const previewServerConnected = previewServerState.type === 'connected';
     const selectedRowKeys = (0, react_1.useMemo)(() => (0, timeline_expanded_filter_1.getSelectedTimelineExpandedRowKeys)(selectedItems), [selectedItems]);
-    const expandedControls = (0, react_1.useMemo)(() => shown.flatMap((track) => {
+    const expandedControls = (0, react_1.useMemo)(() => timeline.flatMap((track) => {
         if (!previewServerConnected ||
             track.nodePathInfo === null ||
             !getIsExpanded(track.nodePathInfo) ||
@@ -28,14 +26,14 @@ const useTimelineHeight = ({ shown, hasBeenCut, isStill, }) => {
             return [];
         }
         return [track.sequence.controls];
-    }), [getIsExpanded, previewServerConnected, shown]);
+    }), [getIsExpanded, previewServerConnected, timeline]);
     const runtimeValueSnapshots = (0, use_runtime_values_1.useRuntimeValueSnapshots)(expandedControls);
     const runtimeValuesByStore = (0, react_1.useMemo)(() => new Map(expandedControls.map((controls, index) => [
         controls.runtimeValues,
         runtimeValueSnapshots[index],
     ])), [expandedControls, runtimeValueSnapshots]);
-    return (0, react_1.useMemo)(() => {
-        const tracksHeight = shown.reduce((acc, track) => {
+    const heights = (0, react_1.useMemo)(() => {
+        return timeline.map((track) => {
             const isExpanded = previewServerConnected &&
                 track.nodePathInfo !== null &&
                 getIsExpanded(track.nodePathInfo);
@@ -84,16 +82,10 @@ const useTimelineHeight = ({ shown, hasBeenCut, isStill, }) => {
                 const separators = Math.max(0, flat.length - 1);
                 return totalRowsHeight + separators + timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM;
             })();
-            return acc + layerHeight + expandedHeight;
-        }, 0);
-        return (tracksHeight +
-            timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM +
-            (hasBeenCut ? MaxTimelineTracks_1.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT : 0) +
-            (isStill ? 0 : TimelineTimeIndicators_1.TIMELINE_TIME_INDICATOR_HEIGHT));
+            return layerHeight + expandedHeight;
+        });
     }, [
-        shown,
-        hasBeenCut,
-        isStill,
+        timeline,
         previewServerConnected,
         getIsExpanded,
         propStatuses,
@@ -102,5 +94,11 @@ const useTimelineHeight = ({ shown, hasBeenCut, isStill, }) => {
         selectedRowKeys,
         runtimeValuesByStore,
     ]);
+    const stableHeights = (0, react_1.useRef)(heights);
+    if (stableHeights.current.length !== heights.length ||
+        heights.some((height, index) => stableHeights.current[index] !== height)) {
+        stableHeights.current = heights;
+    }
+    return stableHeights.current;
 };
-exports.useTimelineHeight = useTimelineHeight;
+exports.useTimelineTrackHeights = useTimelineTrackHeights;

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/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/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/effect-drag-and-drop.js

@@ -3,8 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.addEffectToSequence = exports.addEffectFromDragData = exports.getEffectDragData = exports.hasExplicitEffectDragType = exports.hasEffectDragType = void 0;
 const studio_protocol_1 = require("@remotion/studio-protocol");
 const studio_shared_1 = require("@remotion/studio-shared");
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 const install_required_package_1 = require("../helpers/install-required-package");
-const call_api_1 = require("./call-api");
+const effect_operations_api_1 = require("./effect-operations-api");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const hasEffectDragType = (dataTransfer) => {
     var _a;
@@ -33,8 +34,10 @@ exports.addEffectFromDragData = addEffectFromDragData;
 const addEffectToSequence = async ({ clientId, effect, fileName, nodePath, }) => {
     try {
         const requiredPackage = (0, studio_shared_1.getRequiredPackageForEffectImportPath)(effect.importPath);
-        await (0, install_required_package_1.installRequiredPackages)(requiredPackage ? [{ name: requiredPackage, version: null }] : []);
-        const result = await (0, call_api_1.callApi)('/api/add-effect', {
+        if ((0, browser_studio_operations_1.getBrowserStudioEffectOperations)() === null) {
+            await (0, install_required_package_1.installRequiredPackages)(requiredPackage ? [{ name: requiredPackage, version: null }] : []);
+        }
+        const result = await (0, effect_operations_api_1.addEffect)({
             fileName,
             sequenceNodePath: nodePath,
             effectName: effect.name,

package/dist/components/effect-operations-api.d.ts

@@ -0,0 +1,8 @@
+import type { AddEffectRequest, DeleteEffectRequest, DuplicateEffectRequest, PasteEffectsRequest, ReorderEffectRequest, SaveEffectPropsRequest, SaveMultipleEffectPropsRequest } from '@remotion/studio-shared';
+export declare const addEffect: (request: AddEffectRequest) => Promise<import("@remotion/studio-shared").AddEffectResponse>;
+export declare const deleteEffects: (request: DeleteEffectRequest) => Promise<import("@remotion/studio-shared").DeleteEffectResponse>;
+export declare const duplicateEffects: (request: DuplicateEffectRequest) => Promise<import("@remotion/studio-shared").DuplicateEffectResponse>;
+export declare const pasteEffects: (request: PasteEffectsRequest) => Promise<import("@remotion/studio-shared").PasteEffectsResponse>;
+export declare const reorderEffect: (request: ReorderEffectRequest) => Promise<import("@remotion/studio-shared").ReorderEffectResponse>;
+export declare const saveEffectProps: (request: SaveEffectPropsRequest) => Promise<import("remotion").CanUpdateEffectPropsResponse>;
+export declare const saveMultipleEffectProps: (request: SaveMultipleEffectPropsRequest) => Promise<import("@remotion/studio-shared").SaveMultipleEffectPropsResponse>;

package/dist/components/effect-operations-api.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.saveMultipleEffectProps = exports.saveEffectProps = exports.reorderEffect = exports.pasteEffects = exports.duplicateEffects = exports.deleteEffects = exports.addEffect = void 0;
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
+const call_api_1 = require("./call-api");
+const getBrowserEffectOperations = () => {
+    var _a;
+    var _b;
+    return (_b = (_a = (0, browser_studio_operations_1.getBrowserStudioOperations)()) === null || _a === void 0 ? void 0 : _a.effects) !== null && _b !== void 0 ? _b : null;
+};
+const addEffect = (request) => {
+    var _a;
+    var _b;
+    return (_b = (_a = getBrowserEffectOperations()) === null || _a === void 0 ? void 0 : _a.addEffect(request)) !== null && _b !== void 0 ? _b : (0, call_api_1.callApi)('/api/add-effect', request);
+};
+exports.addEffect = addEffect;
+const deleteEffects = (request) => {
+    var _a;
+    var _b;
+    return (_b = (_a = getBrowserEffectOperations()) === null || _a === void 0 ? void 0 : _a.deleteEffects(request)) !== null && _b !== void 0 ? _b : (0, call_api_1.callApi)('/api/delete-effect', request);
+};
+exports.deleteEffects = deleteEffects;
+const duplicateEffects = (request) => {
+    var _a;
+    var _b;
+    return (_b = (_a = getBrowserEffectOperations()) === null || _a === void 0 ? void 0 : _a.duplicateEffects(request)) !== null && _b !== void 0 ? _b : (0, call_api_1.callApi)('/api/duplicate-effect', request);
+};
+exports.duplicateEffects = duplicateEffects;
+const pasteEffects = (request) => {
+    var _a;
+    var _b;
+    return (_b = (_a = getBrowserEffectOperations()) === null || _a === void 0 ? void 0 : _a.pasteEffects(request)) !== null && _b !== void 0 ? _b : (0, call_api_1.callApi)('/api/paste-effects', request);
+};
+exports.pasteEffects = pasteEffects;
+const reorderEffect = (request) => {
+    var _a;
+    var _b;
+    return (_b = (_a = getBrowserEffectOperations()) === null || _a === void 0 ? void 0 : _a.reorderEffect(request)) !== null && _b !== void 0 ? _b : (0, call_api_1.callApi)('/api/reorder-effect', request);
+};
+exports.reorderEffect = reorderEffect;
+const saveEffectProps = (request) => {
+    var _a;
+    var _b;
+    return (_b = (_a = getBrowserEffectOperations()) === null || _a === void 0 ? void 0 : _a.saveEffectProps(request)) !== null && _b !== void 0 ? _b : (0, call_api_1.callApi)('/api/save-effect-props', request);
+};
+exports.saveEffectProps = saveEffectProps;
+const saveMultipleEffectProps = (request) => {
+    var _a;
+    var _b;
+    return (_b = (_a = getBrowserEffectOperations()) === null || _a === void 0 ? void 0 : _a.saveMultipleEffectProps(request)) !== null && _b !== void 0 ? _b : (0, call_api_1.callApi)('/api/save-multiple-effect-props', request);
+};
+exports.saveMultipleEffectProps = saveMultipleEffectProps;

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/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/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/error-overlay/remotion-overlay/Overlay.js

@@ -43,7 +43,7 @@ const Overlay = () => {
     if (errors.errors.length === 0) {
         return null;
     }
-    return (jsx_runtime_1.jsx(client_id_1.PreviewServerConnection, { children: jsx_runtime_1.jsx(SettingsContext_1.SettingsProvider, { children: jsx_runtime_1.jsx(keybindings_1.KeybindingContextProvider, { children: jsx_runtime_1.jsx(remotion_1.AbsoluteFill, { style: {
+    return (jsx_runtime_1.jsx(client_id_1.PreviewServerConnection, { children: jsx_runtime_1.jsx(SettingsContext_1.SettingsProvider, { children: jsx_runtime_1.jsx(keybindings_1.KeybindingContextProvider, { children: jsx_runtime_1.jsx(remotion_1.Internals.AbsoluteFillElement, { style: {
                         backgroundColor: BACKGROUND_COLOR,
                         overflow: 'auto',
                         color: colors_1.WHITE,

package/dist/error-overlay/remotion-overlay/log-studio-error.js

@@ -2,9 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.logStudioError = exports.logStudioErrorData = void 0;
 const call_api_1 = require("../../components/call-api");
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const loggedErrors = new Set();
 const maxLoggedErrors = 100;
 const logStudioErrorData = (data) => {
+    if ((0, browser_studio_operations_1.getBrowserStudioOperations)() !== null) {
+        return;
+    }
     const key = JSON.stringify([data.name, data.message, data.stack]);
     if (loggedErrors.has(key)) {
         return;