@remotion/studio 4.0.514 → 4.0.516

package/dist/components/Timeline/save-effect-prop.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.saveEffectProp = exports.saveMultipleEffectProps = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
-const call_api_1 = require("../call-api");
+const effect_operations_api_1 = require("../effect-operations-api");
 const apply_effect_response_to_prop_statuses_1 = require("./apply-effect-response-to-prop-statuses");
 const save_prop_queue_1 = require("./save-prop-queue");
 const saveMultipleEffectProps = ({ changes, setPropStatuses, clientId, undoLabel, redoLabel, }) => {
@@ -21,7 +21,7 @@ const saveMultipleEffectProps = ({ changes, setPropStatuses, clientId, undoLabel
             schema: change.schema,
         }));
     }
-    return (0, call_api_1.callApi)('/api/save-multiple-effect-props', {
+    return (0, effect_operations_api_1.saveMultipleEffectProps)({
         edits: changes.map((change) => change.type === 'effect-param'
             ? {
                 type: 'effect-param',
@@ -71,7 +71,7 @@ const saveEffectProp = (input) => {
                 schema,
             }),
         applyServerResponse: (prev, response) => (0, apply_effect_response_to_prop_statuses_1.applyEffectResponseToPropStatuses)({ previous: prev, response }),
-        apiCall: () => (0, call_api_1.callApi)('/api/save-effect-props', input.type === 'effect-param'
+        apiCall: () => (0, effect_operations_api_1.saveEffectProps)(input.type === 'effect-param'
             ? {
                 type: 'effect-param',
                 fileName,

package/dist/components/Timeline/split-selected-timeline-item.js

@@ -97,7 +97,6 @@ const splitTimelineSequenceFromSource = ({ nodePathInfo, splitFrame, }) => {
     })
         .then((result) => {
         if (result.success) {
-            (0, NotificationCenter_1.showNotification)('Split sequence', 2000);
             return true;
         }
         (0, NotificationCenter_1.showNotification)(result.reason, 4000);

package/dist/components/Timeline/timeline-field-row-layout.d.ts

@@ -1,10 +1,10 @@
 import type React from 'react';
 import { type SchemaFieldInfo } from '../../helpers/timeline-layout';
+export declare const TIMELINE_STACKED_FIELD_HEADER_HEIGHT = 14;
 export declare const isTimelineFieldStacked: ({ field, transform3DMode, }: {
     readonly field: SchemaFieldInfo;
     readonly transform3DMode: boolean;
 }) => boolean;
 export declare const getTimelineFieldLabelRowStyle: (depth: number, basePadding?: number | undefined) => React.CSSProperties;
 export declare const timelineFieldValueColumnStyle: React.CSSProperties;
-export declare const timelineCompactStackedFieldValueColumnStyle: React.CSSProperties;
 export declare const timelineStackedFieldContentStyle: React.CSSProperties;

package/dist/components/Timeline/timeline-field-row-layout.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.timelineStackedFieldContentStyle = exports.timelineCompactStackedFieldValueColumnStyle = exports.timelineFieldValueColumnStyle = exports.getTimelineFieldLabelRowStyle = exports.isTimelineFieldStacked = void 0;
+exports.timelineStackedFieldContentStyle = exports.timelineFieldValueColumnStyle = exports.getTimelineFieldLabelRowStyle = exports.isTimelineFieldStacked = exports.TIMELINE_STACKED_FIELD_HEADER_HEIGHT = void 0;
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_row_layout_1 = require("./timeline-row-layout");
+exports.TIMELINE_STACKED_FIELD_HEADER_HEIGHT = 14;
 const isTimelineFieldStacked = ({ field, transform3DMode, }) => {
     return (field.typeName === 'text-content' ||
         (transform3DMode &&
@@ -31,16 +32,12 @@ exports.timelineFieldValueColumnStyle = {
     minWidth: 0,
     paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
 };
-exports.timelineCompactStackedFieldValueColumnStyle = {
-    ...exports.timelineFieldValueColumnStyle,
-    marginBottom: -3,
-    position: 'relative',
-    top: -3,
-};
 exports.timelineStackedFieldContentStyle = {
     alignSelf: 'stretch',
+    boxSizing: 'border-box',
     display: 'flex',
     flex: 1,
     flexDirection: 'column',
     minWidth: 0,
+    paddingBlock: 3,
 };

package/dist/components/Timeline/timeline-field-utils.js

@@ -36,7 +36,5 @@ exports.draggerStyle = {
     width: 80,
 };
 exports.leftAlignedDraggerStyle = {
-    paddingBottom: 2,
     paddingLeft: 0,
-    paddingTop: 2,
 };

package/dist/components/Timeline/use-timeline-asset-drop.js

@@ -132,6 +132,7 @@ const useTimelineAssetDrop = () => {
                 event,
                 fps: videoConfig.fps,
                 from: frame,
+                localFiles: null,
                 preferCompositionStart: false,
             });
         }

package/dist/components/TimelineCombobox.js

@@ -1,181 +1,46 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineCombobox = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const player_1 = require("@remotion/player");
-const react_1 = require("react");
-const react_dom_1 = __importDefault(require("react-dom"));
 const colors_1 = require("../helpers/colors");
-const mobile_layout_1 = require("../helpers/mobile-layout");
-const noop_1 = require("../helpers/noop");
 const caret_1 = require("../icons/caret");
-const z_index_1 = require("../state/z-index");
 const layout_1 = require("./layout");
-const is_menu_item_1 = require("./Menu/is-menu-item");
-const portals_1 = require("./Menu/portals");
-const styles_1 = require("./Menu/styles");
-const MenuContent_1 = require("./NewComposition/MenuContent");
-const container = {
-    boxSizing: 'border-box',
-    border: 'none',
-    borderRadius: 3,
-    height: 24,
-    padding: '0 4px',
-    fontFamily: 'inherit',
-    maxWidth: '100%',
+const SegmentedButton_1 = require("./SegmentedButton");
+const segmentedButtonStyle = {
+    height: 28,
 };
 const label = {
     flex: 'none',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
     fontFamily: 'inherit',
     fontSize: 12,
     lineHeight: '16px',
-    color: colors_1.WHITE_ALPHA_80,
     minWidth: 0,
+    overflow: 'hidden',
     textAlign: 'left',
+    textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
 };
 const TimelineCombobox = ({ values, selectedId, title, labelWidth = 32, renderLeftItem, unhoveredIconColor = colors_1.LIGHT_TEXT, }) => {
-    const [hovered, setIsHovered] = (0, react_1.useState)(false);
-    const [opened, setOpened] = (0, react_1.useState)(false);
-    const ref = (0, react_1.useRef)(null);
-    const { tabIndex, currentZIndex } = (0, z_index_1.useZIndex)();
-    const size = player_1.PlayerInternals.useElementSize(ref, {
-        triggerOnWindowResize: true,
-        shouldApplyCssTransforms: true,
-    });
-    const refresh = size === null || size === void 0 ? void 0 : size.refresh;
-    const onHide = (0, react_1.useCallback)(() => {
-        setOpened(false);
-    }, []);
-    const onOverlayPointerDown = (0, react_1.useCallback)((e) => {
-        e.stopPropagation();
-    }, []);
-    (0, react_1.useEffect)(() => {
-        const { current } = ref;
-        if (!current) {
-            return;
-        }
-        const onMouseEnter = () => setIsHovered(true);
-        const onMouseLeave = () => setIsHovered(false);
-        const onPointerDown = (e) => {
-            e.stopPropagation();
-            return setOpened((isOpened) => {
-                if (!isOpened) {
-                    refresh === null || refresh === void 0 ? void 0 : refresh();
-                }
-                return !isOpened;
-            });
-        };
-        const onClick = (e) => {
-            e.stopPropagation();
-            const isKeyboardInitiated = e.detail === 0;
-            if (!isKeyboardInitiated) {
-                return;
-            }
-            return setOpened((isOpened) => {
-                if (!isOpened) {
-                    refresh === null || refresh === void 0 ? void 0 : refresh();
-                    window.addEventListener('pointerup', (evt) => {
-                        if (!(0, is_menu_item_1.isMenuItem)(evt.target)) {
-                            setOpened(false);
-                        }
-                    }, { once: true });
-                }
-                return !isOpened;
-            });
-        };
-        current.addEventListener('mouseenter', onMouseEnter);
-        current.addEventListener('mouseleave', onMouseLeave);
-        current.addEventListener('pointerdown', onPointerDown);
-        current.addEventListener('click', onClick);
-        return () => {
-            current.removeEventListener('mouseenter', onMouseEnter);
-            current.removeEventListener('mouseleave', onMouseLeave);
-            current.removeEventListener('pointerdown', onPointerDown);
-            current.removeEventListener('click', onClick);
-        };
-    }, [refresh]);
-    const spaceToBottom = (0, react_1.useMemo)(() => {
-        const margin = 10;
-        if (size && opened) {
-            return size.windowSize.height - (size.top + size.height) - margin;
-        }
-        return 0;
-    }, [opened, size]);
-    const spaceToTop = (0, react_1.useMemo)(() => {
-        const margin = 10;
-        if (size && opened) {
-            return size.top - margin;
-        }
-        return 0;
-    }, [opened, size]);
-    const derivedMaxHeight = (0, react_1.useMemo)(() => {
-        return spaceToTop > spaceToBottom ? spaceToTop : spaceToBottom;
-    }, [spaceToBottom, spaceToTop]);
-    const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
-    const portalStyle = (0, react_1.useMemo)(() => {
-        if (!opened || !size) {
-            return null;
-        }
-        const spaceToRight = size.windowSize.width - size.left;
-        const spaceToLeft = size.left + size.width;
-        const minSpaceRequired = isMobileLayout
-            ? styles_1.MAX_MOBILE_MENU_WIDTH
-            : styles_1.MAX_MENU_WIDTH;
-        const verticalLayout = spaceToTop > spaceToBottom ? 'bottom' : 'top';
-        const canOpenOnLeft = spaceToLeft >= minSpaceRequired;
-        const canOpenOnRight = spaceToRight >= minSpaceRequired;
-        const horizontalLayout = canOpenOnRight ? 'left' : 'right';
-        return {
-            ...(verticalLayout === 'top'
-                ? {
-                    ...styles_1.menuContainerTowardsBottom,
-                    top: size.top + size.height,
-                }
-                : {
-                    ...styles_1.menuContainerTowardsTop,
-                    bottom: size.windowSize.height - size.top,
-                }),
-            ...(horizontalLayout === 'left'
-                ? { left: size.left }
-                : canOpenOnLeft
-                    ? { right: size.windowSize.width - size.left - size.width }
-                    : { left: 0 }),
-        };
-    }, [isMobileLayout, opened, size, spaceToBottom, spaceToTop]);
     const selected = values.find((value) => value.id === selectedId);
-    const style = (0, react_1.useMemo)(() => {
-        return {
-            ...container,
-            userSelect: 'none',
-            WebkitUserSelect: 'none',
-            display: 'inline-flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            backgroundColor: (0, colors_1.getBackgroundFromHoverState)({
-                hovered,
-                selected: opened,
-            }),
-        };
-    }, [hovered, opened]);
-    const foregroundColor = hovered || opened ? colors_1.WHITE : colors_1.WHITE_ALPHA_80;
-    const labelStyle = (0, react_1.useMemo)(() => {
-        return {
-            ...label,
-            width: labelWidth,
-            color: foregroundColor,
-        };
-    }, [foregroundColor, labelWidth]);
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsxs("button", { ref: ref, title: title, "aria-label": title, tabIndex: tabIndex, type: "button", style: style, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, children: [renderLeftItem ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [renderLeftItem(foregroundColor), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 })
-                        ] })) : null, selected ? (jsx_runtime_1.jsx("div", { title: typeof selected.label === 'string' ? selected.label : undefined, style: labelStyle, children: selected.label })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(caret_1.CaretDown, { color: hovered || opened ? colors_1.WHITE : unhoveredIconColor })
-                ] }), portalStyle
-                ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, onPointerDown: onOverlayPointerDown, children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: jsx_runtime_1.jsx("div", { style: portalStyle, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: values, onHide: onHide, leaveLeftSpace: true, preselectIndex: values.findIndex((value) => selected && value.id === selected.id), topItemCanBeUnselected: false, fixedHeight: derivedMaxHeight }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
-                : null] }));
+    const segments = [
+        {
+            ariaLabel: title,
+            buttonId: null,
+            disabled: false,
+            idleColor: unhoveredIconColor,
+            leaveLeftSpace: true,
+            onOpenChange: null,
+            renderContent: (color) => (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [renderLeftItem ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [renderLeftItem(color), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 })
+                        ] })) : null, selected ? (jsx_runtime_1.jsx("div", { title: typeof selected.label === 'string' ? selected.label : undefined, style: { ...label, width: labelWidth }, children: selected.label })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(caret_1.CaretDown, { color: color })
+                ] })),
+            segmentId: 'selector',
+            selectedId,
+            style: { fontFamily: 'inherit', padding: '0 4px' },
+            title,
+            type: 'menu',
+            values,
+        },
+    ];
+    return (jsx_runtime_1.jsx(SegmentedButton_1.SegmentedButton, { segments: segments, style: segmentedButtonStyle, title: null }));
 };
 exports.TimelineCombobox = TimelineCombobox;

package/dist/components/TimelineInOutToggle.js

@@ -22,6 +22,9 @@ const style = {
     width: 17,
     height: 17,
 };
+const buttonStyle = {
+    width: 18,
+};
 exports.inOutHandles = (0, react_1.createRef)();
 exports.defaultInOutValue = { inFrame: null, outFrame: null };
 const TimelineInOutPointToggle = () => {
@@ -243,7 +246,7 @@ const TimelineInOutPointToggle = () => {
         };
     }, [confId, onInMark, onInOutClear, onOutMark]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: getTooltipText('In', 'I'), "aria-label": getTooltipText('In', 'I'), onClick: onInMark, onContextMenu: clearInMark, disabled: !videoConfig || isFirstFrame, children: (color) => (jsx_runtime_1.jsx(timelineInOutPointer_1.TimelineInPointer, { color: inFrame === null ? color : colors_1.BLUE, style: style })) }), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: getTooltipText('Out', 'O'), "aria-label": getTooltipText('Out', 'O'), onClick: onOutMark, onContextMenu: clearOutMark, disabled: !videoConfig || isLastFrame, children: (color) => (jsx_runtime_1.jsx(timelineInOutPointer_1.TimelineOutPointer, { color: outFrame === null ? color : colors_1.BLUE, style: style })) })
+            jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: getTooltipText('In', 'I'), "aria-label": getTooltipText('In', 'I'), style: buttonStyle, onClick: onInMark, onContextMenu: clearInMark, disabled: !videoConfig || isFirstFrame, children: (color) => (jsx_runtime_1.jsx(timelineInOutPointer_1.TimelineInPointer, { color: inFrame === null ? color : colors_1.BLUE, style: style })) }), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: getTooltipText('Out', 'O'), "aria-label": getTooltipText('Out', 'O'), style: buttonStyle, onClick: onOutMark, onContextMenu: clearOutMark, disabled: !videoConfig || isLastFrame, children: (color) => (jsx_runtime_1.jsx(timelineInOutPointer_1.TimelineOutPointer, { color: outFrame === null ? color : colors_1.BLUE, style: style })) })
         ] }));
 };
 exports.TimelineInOutPointToggle = TimelineInOutPointToggle;

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

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

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

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

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,
@@ -42,10 +45,7 @@ const addEffectToSequence = async ({ clientId, effect, fileName, nodePath, }) =>
             effectConfig: effect.config,
             clientId,
         });
-        if (result.success) {
-            (0, NotificationCenter_1.showNotification)(`Added ${effect.name}()`, 2000);
-        }
-        else {
+        if (!result.success) {
             (0, NotificationCenter_1.showNotification)(result.reason, 4000);
         }
     }

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/handle-drop.d.ts

@@ -1,7 +1,7 @@
 import type { Dimensions } from '../helpers/is-current-selected-still';
 import { type InsertElementDropPosition } from './import-assets';
 import type { SvgImportMode } from './SvgImportDialog';
-export declare const handleDrop: ({ chooseSvgImportMode, compositionFile, compositionId, destinationDimensions, dropPosition, event, fps, from, preferCompositionStart, }: {
+export declare const handleDrop: ({ chooseSvgImportMode, compositionFile, compositionId, destinationDimensions, dropPosition, event, fps, from, localFiles, preferCompositionStart, }: {
     chooseSvgImportMode: () => Promise<SvgImportMode | null>;
     compositionFile: string;
     compositionId: string;
@@ -10,5 +10,6 @@ export declare const handleDrop: ({ chooseSvgImportMode, compositionFile, compos
     event: DragEvent;
     fps: number;
     from: number | null;
+    localFiles: File[] | null;
     preferCompositionStart: boolean;
 }) => Promise<void>;

package/dist/components/handle-drop.js

@@ -6,11 +6,11 @@ const drop_handler_data_1 = require("./drop-handler-data");
 const element_drag_and_drop_1 = require("./element-drag-and-drop");
 const element_install_request_1 = require("./element-install-request");
 const import_assets_1 = require("./import-assets");
-const handleDrop = async ({ chooseSvgImportMode, compositionFile, compositionId, destinationDimensions, dropPosition, event, fps, from, preferCompositionStart, }) => {
+const handleDrop = async ({ chooseSvgImportMode, compositionFile, compositionId, destinationDimensions, dropPosition, event, fps, from, localFiles, preferCompositionStart, }) => {
     var _a;
     var _b;
-    if ((0, drop_handler_data_1.isFileDragEvent)(event)) {
-        const files = Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) !== null && _b !== void 0 ? _b : []);
+    if (localFiles !== null || (0, drop_handler_data_1.isFileDragEvent)(event)) {
+        const files = localFiles !== null && localFiles !== void 0 ? localFiles : Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) !== null && _b !== void 0 ? _b : []);
         if (files.length === 0) {
             return;
         }