@remotion/studio 4.0.501 → 4.0.503

package/dist/components/InlineAction.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const z_index_1 = require("../state/z-index");
-const InlineAction = ({ renderAction, onClick, disabled, title, unhoveredColor = colors_1.LIGHT_TEXT, }) => {
+const InlineAction = ({ renderAction, onClick, disabled, title, unhoveredColor = colors_1.LIGHT_TEXT, variant, }) => {
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const onPointerEnter = (0, react_1.useCallback)(() => {
@@ -21,7 +21,7 @@ const InlineAction = ({ renderAction, onClick, disabled, title, unhoveredColor =
                 ? colors_1.TRANSPARENT
                 : (0, colors_1.getBackgroundFromHoverState)({ hovered, selected: false }),
             height: 24,
-            width: 24,
+            width: variant === 'compact' ? 14 : 24,
             padding: 0,
             display: 'inline-flex',
             justifyContent: 'center',
@@ -30,7 +30,7 @@ const InlineAction = ({ renderAction, onClick, disabled, title, unhoveredColor =
             opacity: disabled ? 0.5 : 1,
             pointerEvents: disabled ? 'none' : 'auto',
         };
-    }, [disabled, hovered]);
-    return (jsx_runtime_1.jsx("button", { type: "button", disabled: disabled, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, style: style, tabIndex: tabIndex, title: title, children: renderAction(hovered ? colors_1.WHITE : unhoveredColor) }));
+    }, [disabled, hovered, variant]);
+    return (jsx_runtime_1.jsx("button", { type: "button", disabled: disabled, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, style: style, tabIndex: tabIndex, title: title, "aria-label": title, children: renderAction(hovered ? colors_1.WHITE : unhoveredColor) }));
 };
 exports.InlineAction = InlineAction;

package/dist/components/InspectorLocationCopy.d.ts

@@ -4,4 +4,5 @@ export declare const InspectorLocationCopy: React.FC<{
     readonly children: React.ReactNode;
     readonly location: OriginalPosition | null;
     readonly name: string | null;
+    readonly openInEditorLocation: OriginalPosition | null;
 }>;

package/dist/components/InspectorLocationCopy.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const format_file_location_1 = require("../helpers/format-file-location");
 const clipboard_1 = require("../icons/clipboard");
 const InlineAction_1 = require("./InlineAction");
+const InspectorOpenInEditor_1 = require("./InspectorOpenInEditor");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const row = {
     alignItems: 'center',
@@ -22,6 +23,8 @@ const content = {
     overflow: 'hidden',
 };
 const action = {
+    alignItems: 'center',
+    display: 'flex',
     flexShrink: 0,
     height: 24,
     marginLeft: 0,
@@ -32,7 +35,7 @@ const icon = {
     height: 12,
     width: 12,
 };
-const InspectorLocationCopy = ({ children, location, name }) => {
+const InspectorLocationCopy = ({ children, location, name, openInEditorLocation }) => {
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const [focusedWithin, setFocusedWithin] = (0, react_1.useState)(false);
     const textToCopy = (0, react_1.useMemo)(() => {
@@ -56,10 +59,11 @@ const InspectorLocationCopy = ({ children, location, name }) => {
     }, [textToCopy]);
     const showAction = hovered || focusedWithin;
     return (jsx_runtime_1.jsxs("div", { style: row, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), onFocus: () => setFocusedWithin(true), onBlur: () => setFocusedWithin(false), children: [
-            jsx_runtime_1.jsx("div", { style: content, children: children }), textToCopy ? (jsx_runtime_1.jsx("div", { style: {
+            jsx_runtime_1.jsx("div", { style: content, children: children }), textToCopy || openInEditorLocation ? (jsx_runtime_1.jsxs("div", { style: {
                     ...action,
                     opacity: showAction ? 1 : 0,
                     pointerEvents: showAction ? 'auto' : 'none',
-                }, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: onCopy, renderAction: renderCopyAction, title: "Copy location for agents" }) })) : null] }));
+                }, children: [
+                    jsx_runtime_1.jsx(InspectorOpenInEditor_1.InspectorOpenInEditor, { location: openInEditorLocation }), textToCopy ? (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onCopy, renderAction: renderCopyAction, title: "Copy location for agents" })) : null] })) : null] }));
 };
 exports.InspectorLocationCopy = InspectorLocationCopy;

package/dist/components/InspectorOpenInEditor.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { OriginalPosition } from '../error-overlay/react-overlay/utils/get-source-map';
+export declare const InspectorOpenInEditor: React.FC<{
+    readonly location: OriginalPosition | null;
+}>;

package/dist/components/InspectorOpenInEditor.js

@@ -0,0 +1,135 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InspectorOpenInEditor = 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 caret_1 = require("../icons/caret");
+const editor_1 = require("../icons/editor");
+const modals_1 = require("../state/modals");
+const z_index_1 = require("../state/z-index");
+const InlineDropdown_1 = require("./InlineDropdown");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const use_default_editor_info_1 = require("./use-default-editor-info");
+const splitButton = {
+    alignItems: 'center',
+    display: 'inline-flex',
+    flexDirection: 'row',
+    flexShrink: 0,
+    height: 24,
+};
+const mainButtonBase = {
+    alignItems: 'center',
+    background: colors_1.TRANSPARENT,
+    border: 'none',
+    borderRadius: 3,
+    color: colors_1.LIGHT_TEXT,
+    display: 'inline-flex',
+    fontFamily: 'sans-serif',
+    fontSize: 11,
+    height: 24,
+    lineHeight: '14px',
+    padding: '0 6px',
+    whiteSpace: 'nowrap',
+};
+const menuLabel = {
+    color: 'inherit',
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    lineHeight: '16px',
+};
+const editorButtonIconSize = 18;
+const editorMenuIconSize = 18;
+const InspectorOpenInEditor = ({ location }) => {
+    var _a;
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const editorPickerAvailable = (0, use_default_editor_info_1.canUseEditorPicker)(previewServerState.type === 'connected');
+    const editorInfo = (0, use_default_editor_info_1.useDefaultEditorInfo)(editorPickerAvailable);
+    const openWithEditor = (0, react_1.useCallback)(async (editorId) => {
+        if (!location) {
+            return;
+        }
+        try {
+            await (0, open_in_editor_1.openOriginalPositionInEditor)(location, editorId);
+        }
+        catch (err) {
+            (0, NotificationCenter_1.showNotification)(err.message, 2000);
+        }
+    }, [location]);
+    const preferredEditorId = (0, use_default_editor_info_1.getPreferredEditorId)(editorInfo);
+    const editorName = (_a = window.remotion_editorName) !== null && _a !== void 0 ? _a : 'default editor';
+    const canOpenDefault = location !== null && window.remotion_editorName !== null;
+    const onOpenDefault = (0, react_1.useCallback)((event) => {
+        event.stopPropagation();
+        openWithEditor(null).catch(() => undefined);
+    }, [openWithEditor]);
+    const mainButtonStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...mainButtonBase,
+            background: (0, colors_1.getBackgroundFromHoverState)({
+                hovered,
+                selected: false,
+            }),
+            color: hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT,
+            opacity: canOpenDefault ? 1 : 0.5,
+            pointerEvents: canOpenDefault ? 'auto' : 'none',
+        };
+    }, [canOpenDefault, hovered]);
+    const renderDropdownAction = (0, react_1.useCallback)((color) => {
+        return jsx_runtime_1.jsx(caret_1.CaretDown, { color: color, small: true });
+    }, []);
+    const menuItems = (0, react_1.useMemo)(() => {
+        var _a;
+        const alternateEditors = ((_a = editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors) !== null && _a !== void 0 ? _a : [])
+            .filter((editor) => editor.id !== preferredEditorId)
+            .map((editor) => ({
+            id: `open-in-${editor.id}`,
+            keyHint: null,
+            label: jsx_runtime_1.jsx("span", { style: menuLabel, children: editor.name }),
+            leftItem: jsx_runtime_1.jsx(editor_1.EditorIcon, { editorId: editor.id, size: editorMenuIconSize }),
+            onClick: () => {
+                openWithEditor(editor.id).catch(() => undefined);
+            },
+            quickSwitcherLabel: null,
+            subMenu: null,
+            type: 'item',
+            value: editor.id,
+        }));
+        const settingsItems = [
+            ...(alternateEditors.length > 0
+                ? [{ type: 'divider', id: 'editor-settings-divider' }]
+                : []),
+            {
+                id: 'set-default-editor',
+                keyHint: null,
+                label: jsx_runtime_1.jsx("span", { style: menuLabel, children: "Set default editor..." }),
+                leftItem: null,
+                onClick: () => {
+                    setSelectedModal({ type: 'configure-default-editor' });
+                },
+                quickSwitcherLabel: null,
+                subMenu: null,
+                type: 'item',
+                value: 'set-default-editor',
+            },
+        ];
+        return [...alternateEditors, ...settingsItems];
+    }, [
+        editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors,
+        openWithEditor,
+        preferredEditorId,
+        setSelectedModal,
+    ]);
+    if (!editorPickerAvailable) {
+        return null;
+    }
+    return (jsx_runtime_1.jsxs("div", { style: splitButton, children: [
+            jsx_runtime_1.jsx("button", { "aria-label": `Open in ${editorName}`, disabled: !canOpenDefault, onClick: onOpenDefault, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), style: mainButtonStyle, tabIndex: tabIndex, title: `Open in ${editorName}`, type: "button", children: jsx_runtime_1.jsx(editor_1.EditorIcon, { editorId: preferredEditorId, size: editorButtonIconSize }) }), jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { renderAction: renderDropdownAction, title: "Open in another editor", values: menuItems, variant: "compact" })
+        ] }));
+};
+exports.InspectorOpenInEditor = InspectorOpenInEditor;

package/dist/components/InspectorPanel/AlignmentControls.js

@@ -44,7 +44,7 @@ const verticalDivider = {
     margin: '0 8px',
 };
 const AlignmentButton = ({ onClick, title, Icon, disabled }) => {
-    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { title: title, onClick: onClick, renderAction: (color) => jsx_runtime_1.jsx(Icon, { style: iconStyle, color: color }), disabled: disabled }));
+    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, title: title, onClick: onClick, renderAction: (color) => jsx_runtime_1.jsx(Icon, { style: iconStyle, color: color }), disabled: disabled }));
 };
 const AlignmentControls = ({ track }) => {
     var _a;

package/dist/components/InspectorPanel/CompositionInspectorHeader.js

@@ -72,7 +72,7 @@ const CompositionInspectorHeader = () => {
         if (!validatedLocation) {
             return;
         }
-        (0, open_in_editor_1.openOriginalPositionInEditor)(validatedLocation).catch((err) => {
+        (0, open_in_editor_1.openOriginalPositionInEditor)(validatedLocation, null).catch((err) => {
             (0, NotificationCenter_1.showNotification)(err.message, 2000);
         });
     }, [validatedLocation]);
@@ -80,7 +80,7 @@ const CompositionInspectorHeader = () => {
         if (!componentLocation) {
             return;
         }
-        (0, open_in_editor_1.openOriginalPositionInEditor)(componentLocation).catch((err) => {
+        (0, open_in_editor_1.openOriginalPositionInEditor)(componentLocation, null).catch((err) => {
             (0, NotificationCenter_1.showNotification)(err.message, 2000);
         });
     }, [componentLocation]);
@@ -90,7 +90,7 @@ const CompositionInspectorHeader = () => {
         }
         return (0, is_composition_still_1.isCompositionStill)(video) ? (jsx_runtime_1.jsx(still_1.StillIcon, { color: color, style: sourceLocationIconStyle })) : (jsx_runtime_1.jsx(video_1.FilmIcon, { color: color, style: sourceLocationIconStyle }));
     }, [video]);
-    return (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoHeader, { minHeight: COMPOSITION_INSPECTOR_HEADER_HEIGHT, padding: "4px 0", children: video ? (jsx_runtime_1.jsxs(InspectorLocationCopy_1.InspectorLocationCopy, { location: validatedLocation, name: video.id, children: [
+    return (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoHeader, { minHeight: COMPOSITION_INSPECTOR_HEADER_HEIGHT, padding: "4px 0", children: video ? (jsx_runtime_1.jsxs(InspectorLocationCopy_1.InspectorLocationCopy, { location: validatedLocation, name: video.id, openInEditorLocation: componentLocation, children: [
                 jsx_runtime_1.jsx(InlineCompositionName_1.InlineCompositionName, { compositionId: video.id, stack: (_e = currentComposition === null || currentComposition === void 0 ? void 0 : currentComposition.stack) !== null && _e !== void 0 ? _e : null, compositions: compositions }, video.id), jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: validatedLocation, canOpen: validatedLocation !== null, onOpen: openFileLocation, renderIcon: renderCompositionIcon, size: "inline-action" }), compositionComponentInfo === null &&
                     compositionFile !== null &&
                     compositionId !== null ? (jsx_runtime_1.jsx("div", { "aria-hidden": true, style: componentLocationPlaceholder })) : (jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: componentLocation, canOpen: componentLocation !== null, onOpen: openComponentLocation, renderIcon: renderReactIcon, size: "inline-action" }))] })) : null }));

package/dist/components/InspectorPanel/CompositionMetadata.js

@@ -97,7 +97,7 @@ const PresetDropdown = ({ disabled, title, values, visible }) => {
     return (jsx_runtime_1.jsx("div", { style: {
             ...presetDropdownContainer,
             visibility: visible ? 'visible' : 'hidden',
-        }, children: jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { disabled: disabled, renderAction: renderAction, title: title, values: values }) }));
+        }, children: jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { disabled: disabled, renderAction: renderAction, title: title, values: values, variant: "compact" }) }));
 };
 const CompositionMetadataValue = ({ computed, disabled, field, onSave, pendingValue, value }) => {
     var _a;

package/dist/components/InspectorPanel/KeyframeEasingNavigator.js

@@ -139,8 +139,8 @@ const KeyframeEasingNavigator = ({ currentSelection, includeEasings, keyframes,
     if (currentItem === null) {
         return null;
     }
-    return (jsx_runtime_1.jsxs("div", { style: navigatorContainer, children: [jsx_runtime_1.jsx(InlineAction_1.InlineAction, { disabled: previousItem === null, onClick: selectPrevious, title: "Previous animation item", renderAction: (color) => (jsx_runtime_1.jsx(NavigationChevron, { color: previousItem === null ? disabledChevronColor : color, direction: "left" })) }), jsx_runtime_1.jsxs("div", { style: itemStrip, children: [
+    return (jsx_runtime_1.jsxs("div", { style: navigatorContainer, children: [jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, disabled: previousItem === null, onClick: selectPrevious, title: "Previous animation item", renderAction: (color) => (jsx_runtime_1.jsx(NavigationChevron, { color: previousItem === null ? disabledChevronColor : color, direction: "left" })) }), jsx_runtime_1.jsxs("div", { style: itemStrip, children: [
                     jsx_runtime_1.jsx(TimelineNavigatorItem, { extendLineLeft: false, extendLineRight: currentItem.type === 'keyframe', item: previousItem, onSelect: selectItem, selected: previousItem === null ? false : isSelected(previousItem.selection) }), jsx_runtime_1.jsx(TimelineNavigatorItem, { extendLineLeft: (previousItem === null || previousItem === void 0 ? void 0 : previousItem.type) === 'keyframe', extendLineRight: (nextItem === null || nextItem === void 0 ? void 0 : nextItem.type) === 'keyframe', item: currentItem, onSelect: selectItem, selected: isSelected(currentItem.selection) }), jsx_runtime_1.jsx(TimelineNavigatorItem, { extendLineLeft: currentItem.type === 'keyframe', extendLineRight: false, item: nextItem, onSelect: selectItem, selected: nextItem === null ? false : isSelected(nextItem.selection) })
-                ] }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { disabled: nextItem === null, onClick: selectNext, title: "Next animation item", renderAction: (color) => (jsx_runtime_1.jsx(NavigationChevron, { color: nextItem === null ? disabledChevronColor : color, direction: "right" })) })] }));
+                ] }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, disabled: nextItem === null, onClick: selectNext, title: "Next animation item", renderAction: (color) => (jsx_runtime_1.jsx(NavigationChevron, { color: nextItem === null ? disabledChevronColor : color, direction: "right" })) })] }));
 };
 exports.KeyframeEasingNavigator = KeyframeEasingNavigator;

package/dist/components/InspectorPanel/SequenceInspectorHeader.js

@@ -56,7 +56,7 @@ const useSequenceInspectorSourceLocation = (sequence) => {
         if (!canOpenInEditor) {
             return;
         }
-        openInEditor();
+        openInEditor(null);
     }, [canOpenInEditor, openInEditor]);
     return {
         canOpenInEditor,
@@ -94,7 +94,7 @@ const SequenceInspectorHeader = ({ sourceLocation, track }) => {
     const onRename = (0, react_1.useCallback)((newName) => {
         saveName(newName).catch(() => undefined);
     }, [saveName]);
-    return (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoHeader, { contentSized: true, padding: "4px 0", children: jsx_runtime_1.jsxs(InspectorLocationCopy_1.InspectorLocationCopy, { location: sourceLocation.validatedLocation, name: componentName !== null && componentName !== void 0 ? componentName : null, children: [
+    return (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoHeader, { contentSized: true, padding: "4px 0", children: jsx_runtime_1.jsxs(InspectorLocationCopy_1.InspectorLocationCopy, { location: sourceLocation.validatedLocation, name: componentName !== null && componentName !== void 0 ? componentName : null, openInEditorLocation: sourceLocation.validatedLocation, children: [
                 jsx_runtime_1.jsx(InlineEditableTitle_1.InlineEditableTitle, { value: sequenceDisplayName, canRename: canRename, onCommit: onRename, size: "inspector" }), documentationLink ? (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: false, style: defaultCursor, size: "compact", title: "Open component docs", onClick: openDocumentationLink, children: componentName })) : (jsx_runtime_1.jsx("div", { style: subtitleStyle, children: componentName })), jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: sourceLocation.validatedLocation, canOpen: sourceLocation.canOpenInEditor, onOpen: sourceLocation.openFileLocation, renderIcon: renderReactIcon, size: "inline-action" })
             ] }) }));
 };

package/dist/components/InspectorPanel/use-composition-actions.d.ts

@@ -5,7 +5,7 @@ export declare const useCompositionActions: () => {
     canShowInsertAsset: boolean;
     canShowInsertComposition: boolean;
     canShowInsertSolid: boolean;
-    insertAsset: () => Promise<void>;
+    insertAsset: () => void;
     insertComposition: () => void;
     insertSolid: () => Promise<void>;
 };

package/dist/components/InspectorPanel/use-composition-actions.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCompositionActions = void 0;
-const drag_and_drop_1 = require("@remotion/drag-and-drop");
+const studio_protocol_1 = require("@remotion/studio-protocol");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
@@ -100,7 +100,7 @@ const useCompositionActions = () => {
         currentCompositionId,
         videoConfig,
     ]);
-    const insertAsset = (0, react_1.useCallback)(async () => {
+    const onFilesSelected = (0, react_1.useCallback)(async () => {
         if (!canInsertAsset ||
             currentCompositionId === null ||
             compositionFile === null ||
@@ -128,6 +128,49 @@ const useCompositionActions = () => {
             setIsAddingAsset(false);
         }
     }, [canInsertAsset, compositionFile, currentCompositionId, videoConfig]);
+    const onAssetSelected = (0, react_1.useCallback)(async (asset) => {
+        if (!canInsertAsset ||
+            currentCompositionId === null ||
+            compositionFile === null ||
+            videoConfig === null) {
+            return;
+        }
+        setIsAddingAsset(true);
+        try {
+            await (0, import_assets_1.insertExistingAssets)({
+                assetPaths: [asset.name],
+                fps: videoConfig.fps,
+                compositionFile,
+                compositionId: currentCompositionId,
+                destinationDimensions: null,
+                dropPosition: null,
+                from: null,
+            });
+        }
+        finally {
+            setIsAddingAsset(false);
+        }
+    }, [canInsertAsset, compositionFile, currentCompositionId, videoConfig]);
+    const insertAsset = (0, react_1.useCallback)(() => {
+        if (!canInsertAsset) {
+            return;
+        }
+        setSelectedModal({
+            type: 'quick-switcher',
+            mode: 'assets',
+            invocationTimestamp: Date.now(),
+            assetSelection: {
+                initialQuery: '',
+                onSelectFile: () => {
+                    onFilesSelected().catch(() => undefined);
+                },
+                onSelected: (asset) => {
+                    onAssetSelected(asset).catch(() => undefined);
+                },
+            },
+            compositionSelection: null,
+        });
+    }, [canInsertAsset, onAssetSelected, onFilesSelected, setSelectedModal]);
     const onCompositionSelected = (0, react_1.useCallback)(async (composition) => {
         var _a, _b, _c, _d, _e;
         if (!canInsertComposition ||
@@ -141,7 +184,7 @@ const useCompositionActions = () => {
                 ? await (0, get_stack_1.getOriginalLocationFromStack)(composition.stack, 'sequence')
                 : null;
             const selectedCompositionFile = (_b = (_a = resolvedLocation === null || resolvedLocation === void 0 ? void 0 : resolvedLocation.source) !== null && _a !== void 0 ? _a : browserStudioOperations === null || browserStudioOperations === void 0 ? void 0 : browserStudioOperations.getCompositionFile(composition.id)) !== null && _b !== void 0 ? _b : null;
-            const compositionDragData = drag_and_drop_1.DragAndDropInternals.makeDragData({
+            const compositionDragData = studio_protocol_1.StudioProtocolInternals.makeDragData({
                 type: 'composition',
                 compositionFile: selectedCompositionFile,
                 compositionId: composition.id,

package/dist/components/InspectorSequenceSection.js

@@ -468,7 +468,7 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
         setPropStatuses,
         validatedLocation.source,
     ]);
-    const borderRadiusAction = borderRadiusGroup ? (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { disabled: borderRadiusConversion === null ||
+    const borderRadiusAction = borderRadiusGroup ? (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, disabled: borderRadiusConversion === null ||
             previewServerState.type !== 'connected', onClick: onConvertBorderRadius, title: borderRadiusConversion === null
             ? borderRadiusUsesShorthand
                 ? 'A static border radius is required to use individual corners'
@@ -477,7 +477,7 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
                 ? 'Use individual corner radii'
                 : 'Use one border radius value', renderAction: (color) => borderRadiusUsesShorthand ? (jsx_runtime_1.jsx(fullscreen_1.FullscreenIcon, { color: color, style: borderRadiusToggleIcon })) : (jsx_runtime_1.jsx(border_radius_1.BorderRadiusIcon, { color: color, style: borderRadiusToggleIcon })) })) : null;
     const effectsHeader = (jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderRow, children: [
-            jsx_runtime_1.jsx("div", { style: effectsHeaderTitle, children: "Effects" }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { disabled: !canAddEffect, onClick: onAddEffect, title: canAddEffect ? 'Add effect' : undefined, renderAction: (color) => jsx_runtime_1.jsx(plus_1.Plus, { color: color, style: plusIcon }) })] }));
+            jsx_runtime_1.jsx("div", { style: effectsHeaderTitle, children: "Effects" }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, disabled: !canAddEffect, onClick: onAddEffect, title: canAddEffect ? 'Add effect' : undefined, renderAction: (color) => jsx_runtime_1.jsx(plus_1.Plus, { color: color, style: plusIcon }) })] }));
     const renderRow = ({ node, depth }) => {
         return (jsx_runtime_1.jsx(TimelineRowLayoutContext_1.TimelineRowLayoutContext.Provider, { value: TimelineRowLayoutContext_1.INSPECTOR_TIMELINE_ROW_LAYOUT, children: jsx_runtime_1.jsx(TimelineExpandedRow_1.TimelineExpandedRow, { node: node, depth: depth, nestedDepth: 0, rowDepthBase: 0, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack, validatedLocation: validatedLocation, nodePath: nodePathInfo.sequenceSubscriptionKey, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: "inspector" }) }, JSON.stringify(node.nodePathInfo)));
     };

package/dist/components/LoopToggle.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+export declare const toggleLoop: (setLoop: React.Dispatch<React.SetStateAction<boolean>>) => void;
 export declare const LoopToggle: React.FC<{
     readonly loop: boolean;
     readonly setLoop: React.Dispatch<React.SetStateAction<boolean>>;

package/dist/components/LoopToggle.js

@@ -1,18 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LoopToggle = void 0;
+exports.LoopToggle = exports.toggleLoop = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const loop_1 = require("../state/loop");
 const ControlButton_1 = require("./ControlButton");
 const accessibilityLabel = 'Loop video';
+const toggleLoop = (setLoop) => {
+    setLoop((currentLoop) => {
+        (0, loop_1.persistLoopOption)(!currentLoop);
+        return !currentLoop;
+    });
+};
+exports.toggleLoop = toggleLoop;
 const LoopToggle = ({ loop, setLoop }) => {
     const onClick = (0, react_1.useCallback)(() => {
-        setLoop((c) => {
-            (0, loop_1.persistLoopOption)(!c);
-            return !c;
-        });
+        (0, exports.toggleLoop)(setLoop);
     }, [setLoop]);
     return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: jsx_runtime_1.jsx("svg", { viewBox: "0 0 512 512", style: { width: 18, height: 18 }, children: jsx_runtime_1.jsx("path", { fill: loop ? colors_1.BLUE : colors_1.WHITE, d: "M493.544 181.463c11.956 22.605 18.655 48.4 18.452 75.75C511.339 345.365 438.56 416 350.404 416H192v47.495c0 22.475-26.177 32.268-40.971 17.475l-80-80c-9.372-9.373-9.372-24.569 0-33.941l80-80C166.138 271.92 192 282.686 192 304v48h158.875c52.812 0 96.575-42.182 97.12-94.992.155-15.045-3.17-29.312-9.218-42.046-4.362-9.185-2.421-20.124 4.8-27.284 4.745-4.706 8.641-8.555 11.876-11.786 11.368-11.352 30.579-8.631 38.091 5.571zM64.005 254.992c.545-52.81 44.308-94.992 97.12-94.992H320v47.505c0 22.374 26.121 32.312 40.971 17.465l80-80c9.372-9.373 9.372-24.569 0-33.941l-80-80C346.014 16.077 320 26.256 320 48.545V96H161.596C73.44 96 .661 166.635.005 254.788c-.204 27.35 6.495 53.145 18.452 75.75 7.512 14.202 26.723 16.923 38.091 5.57 3.235-3.231 7.13-7.08 11.876-11.786 7.22-7.16 9.162-18.098 4.8-27.284-6.049-12.735-9.374-27.001-9.219-42.046z" }) }) }));
 };

package/dist/components/Menu/MenuItem.js

@@ -9,6 +9,7 @@ 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 pointer_session_1 = require("../../helpers/pointer-session");
 const z_index_1 = require("../../state/z-index");
 const MenuContent_1 = require("../NewComposition/MenuContent");
 const is_menu_item_1 = require("./is-menu-item");
@@ -68,12 +69,18 @@ const MenuItem = ({ label: itemName, selected, id, onItemSelected, onItemHovered
             return;
         }
         onItemSelected(id);
-        window.addEventListener('pointerup', (evt) => {
-            if (!(0, is_menu_item_1.isMenuItem)(evt.target)) {
-                onItemQuit();
-            }
-        }, {
-            once: true,
+        (0, pointer_session_1.startPointerSession)({
+            event: e.nativeEvent,
+            target: e.currentTarget,
+            onEnd: (reason, evt) => {
+                if ((reason === 'pointerup' || reason === 'buttons-released') &&
+                    evt) {
+                    const target = document.elementFromPoint(evt.clientX, evt.clientY);
+                    if (!target || !(0, is_menu_item_1.isMenuItem)(target)) {
+                        onItemQuit();
+                    }
+                }
+            },
         });
     }, [id, onItemQuit, onItemSelected]);
     const onMenuPointerDown = (0, react_1.useCallback)((e) => {

package/dist/components/Menu/MenuSubItem.js

@@ -90,9 +90,19 @@ const MenuSubItem = ({ label, leaveLeftSpace, leftItem, onActionChosen, id, sele
             return null;
         }
         const left = size.left + size.width + styles_1.SUBMENU_LEFT_INSET;
+        const minSpaceRequired = mobileLayout
+            ? styles_1.MAX_MOBILE_MENU_WIDTH
+            : styles_1.MAX_MENU_WIDTH;
+        const spaceToLeft = size.left;
+        const spaceToRight = size.windowSize.width - size.left - size.width;
+        const canOpenOnRight = spaceToRight >= minSpaceRequired || spaceToRight >= spaceToLeft;
         return {
             ...styles_1.menuContainerTowardsBottom,
-            left: mobileLayout ? left * 0.7 : left,
+            ...(canOpenOnRight
+                ? { left }
+                : {
+                    right: size.windowSize.width - size.left + styles_1.SUBMENU_LEFT_INSET,
+                }),
             top: size.top - styles_1.MENU_VERTICAL_PADDING,
         };
     }, [mobileLayout, selected, size, subMenu, subMenuActivated]);

package/dist/components/MenuBuildIndicator.js

@@ -55,7 +55,7 @@ const MenuBuildIndicator = () => {
                 originalColumnNumber: 1,
                 originalFunctionName: null,
                 originalScriptCode: null,
-            })
+            }, null)
                 .then(({ success }) => {
                 if (!success) {
                     (0, NotificationCenter_1.showNotification)(`Could not open ${window.remotion_editorName}`, 2000);

package/dist/components/MenuCompositionName.js

@@ -72,7 +72,7 @@ const MenuCompositionName = () => {
                 });
             }
             else if (resolvedLocation) {
-                await (0, open_in_editor_1.openOriginalPositionInEditor)(resolvedLocation);
+                await (0, open_in_editor_1.openOriginalPositionInEditor)(resolvedLocation, null);
             }
         }
         catch (err) {

package/dist/components/MobilePanel.js

@@ -21,12 +21,15 @@ const overlay = {
 const panel = {
     position: 'fixed',
     top: menu_toolbar_height_1.MENU_TOOLBAR_HEIGHT,
-    width: 'min(350px, calc(100% - 50px))',
     height: `calc(100% - ${menu_toolbar_height_1.MENU_TOOLBAR_HEIGHT}px)`,
     overflow: 'hidden',
     background: colors_1.BACKGROUND,
     boxShadow: colors_1.SHADOW_BLACK,
 };
+const sidebarWidth = {
+    left: 'min(210px, calc(100% - 50px))',
+    right: 'min(245px, calc(100% - 50px))',
+};
 function MobilePanel({ children, onClose, side, }) {
     const { currentZIndex } = (0, z_index_1.useZIndex)();
     const onOutsideClick = react_1.default.useCallback((target) => {
@@ -41,6 +44,7 @@ function MobilePanel({ children, onClose, side, }) {
     }, [onClose, side]);
     return react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: overlay, children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: onClose, onOutsideClick: onOutsideClick, children: jsx_runtime_1.jsx("div", { style: {
                     ...panel,
+                    width: sidebarWidth[side],
                     left: side === 'left' ? 0 : undefined,
                     right: side === 'right' ? 0 : undefined,
                 }, children: children }) }) }), (0, portals_1.getPortal)(currentZIndex));

package/dist/components/ModalContainer.js

@@ -34,6 +34,6 @@ const ModalContainer = ({ children, onEscape, onOutsideClick, noZIndex, panelSty
         // Prevent deselection of currently selected items
         e.stopPropagation();
     }, []);
-    return (jsx_runtime_1.jsx("div", { className: "css-reset", style: backgroundOverlay, role: "dialog", "aria-modal": "true", onPointerDown: onPointerDown, children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { disabled: noZIndex, onOutsideClick: onOutsideClick, onEscape: onEscape, children: jsx_runtime_1.jsx("div", { style: { ...panel, ...panelStyle }, children: children }) }) }));
+    return (jsx_runtime_1.jsx("div", { className: "css-reset", style: backgroundOverlay, role: "dialog", "aria-modal": "true", onPointerDown: onPointerDown, children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { disabled: noZIndex, onOutsideClick: onOutsideClick, onEscape: onEscape, stackOnHighest: true, children: jsx_runtime_1.jsx("div", { style: { ...panel, ...panelStyle }, children: children }) }) }));
 };
 exports.ModalContainer = ModalContainer;

package/dist/components/ModalFooter.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
 export declare const ModalFooterContainer: React.FC<{
     readonly children: React.ReactNode;
+    readonly style?: React.CSSProperties;
 }>;

package/dist/components/ModalFooter.js

@@ -10,7 +10,7 @@ const content = {
     fontSize: 13,
     minWidth: 500,
 };
-const ModalFooterContainer = ({ children }) => {
-    return jsx_runtime_1.jsx("div", { style: { ...content, borderTop: colors_1.BORDER_BLACK }, children: children });
+const ModalFooterContainer = ({ children, style }) => {
+    return (jsx_runtime_1.jsx("div", { style: { ...content, ...style, borderTop: colors_1.BORDER_BLACK }, children: children }));
 };
 exports.ModalFooterContainer = ModalFooterContainer;