@remotion/studio 4.0.472 → 4.0.474

package/dist/components/ConfirmationDialog.js

@@ -0,0 +1,103 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConfirmationDialog = exports.useConfirmationDialog = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ShortcutHint_1 = require("../error-overlay/remotion-overlay/ShortcutHint");
+const modals_1 = require("../state/modals");
+const Button_1 = require("./Button");
+const layout_1 = require("./layout");
+const ModalButton_1 = require("./ModalButton");
+const ModalContainer_1 = require("./ModalContainer");
+const ModalFooter_1 = require("./ModalFooter");
+const ModalHeader_1 = require("./ModalHeader");
+const content = {
+    padding: 16,
+    fontSize: 14,
+    flex: 1,
+    minWidth: 420,
+    maxWidth: 560,
+    lineHeight: 1.4,
+};
+const useConfirmationDialog = () => {
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    return (0, react_1.useCallback)((options) => {
+        return new Promise((resolve) => {
+            var _a, _b;
+            let settled = false;
+            const settle = (result) => {
+                if (settled) {
+                    return;
+                }
+                settled = true;
+                resolve(result);
+            };
+            setSelectedModal({
+                type: 'confirmation-dialog',
+                id: String(Math.random()),
+                title: options.title,
+                message: options.message,
+                confirmLabel: (_a = options.confirmLabel) !== null && _a !== void 0 ? _a : 'Continue',
+                cancelLabel: (_b = options.cancelLabel) !== null && _b !== void 0 ? _b : 'Cancel',
+                onConfirm: () => settle(true),
+                onCancel: () => settle(false),
+            });
+        });
+    }, [setSelectedModal]);
+};
+exports.useConfirmationDialog = useConfirmationDialog;
+const ConfirmationDialog = ({ state }) => {
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const settledRef = (0, react_1.useRef)(false);
+    const closeCurrentModal = (0, react_1.useCallback)(() => {
+        setSelectedModal((modal) => (modal === null || modal === void 0 ? void 0 : modal.type) === 'confirmation-dialog' && modal.id === state.id
+            ? null
+            : modal);
+    }, [setSelectedModal, state.id]);
+    const settle = (0, react_1.useCallback)((confirmed) => {
+        if (settledRef.current) {
+            return;
+        }
+        settledRef.current = true;
+        closeCurrentModal();
+        if (confirmed) {
+            state.onConfirm();
+        }
+        else {
+            state.onCancel();
+        }
+    }, [closeCurrentModal, state]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            if (settledRef.current) {
+                return;
+            }
+            settledRef.current = true;
+            state.onCancel();
+        };
+    }, [state]);
+    const onCancel = (0, react_1.useCallback)(() => {
+        settle(false);
+    }, [settle]);
+    const onConfirm = (0, react_1.useCallback)(() => {
+        settle(true);
+    }, [settle]);
+    const onSubmit = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+        onConfirm();
+    }, [onConfirm]);
+    const cancelStyle = (0, react_1.useMemo)(() => {
+        return {
+            minWidth: 90,
+        };
+    }, []);
+    return (jsx_runtime_1.jsxs(ModalContainer_1.ModalContainer, { onOutsideClick: onCancel, onEscape: onCancel, children: [
+            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: state.title, onClose: onCancel }), jsx_runtime_1.jsxs("form", { onSubmit: onSubmit, children: [
+                    jsx_runtime_1.jsx("div", { style: content, children: state.message }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
+                                jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(Button_1.Button, { onClick: onCancel, style: cancelStyle, children: state.cancelLabel }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsxs(ModalButton_1.ModalButton, { onClick: onConfirm, autoFocus: true, children: [state.confirmLabel, jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: false })
+                                    ] })
+                            ] }) })
+                ] })
+        ] }));
+};
+exports.ConfirmationDialog = ConfirmationDialog;

package/dist/components/ContextMenu.d.ts

@@ -1,12 +1,20 @@
 import React from 'react';
 import type { ComboboxValue } from './NewComposition/ComboBox';
+type ContextMenuOpenHandler = () => false | void;
+type ContextMenuTargetOpenResult = false | void | readonly ComboboxValue[];
+type ContextMenuTargetOpenHandler = (event: MouseEvent) => ContextMenuTargetOpenResult | Promise<ContextMenuTargetOpenResult>;
 type ContextMenuProps = {
     readonly children: React.ReactNode;
     readonly values: ComboboxValue[];
-    readonly onOpen: (() => void) | null;
+    readonly onOpen: ContextMenuOpenHandler | null;
     readonly style?: React.CSSProperties;
     readonly className?: string;
     readonly onPointerDown?: React.PointerEventHandler<HTMLDivElement>;
 };
 export declare const ContextMenu: React.ForwardRefExoticComponent<ContextMenuProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuForTarget: React.FC<{
+    readonly triggerRef: React.RefObject<HTMLElement | SVGElement | null>;
+    readonly values: ComboboxValue[];
+    readonly onOpen: ContextMenuTargetOpenHandler | null;
+}>;
 export {};

package/dist/components/ContextMenu.js

@@ -36,7 +36,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ContextMenu = void 0;
+exports.ContextMenuForTarget = exports.ContextMenu = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = __importStar(require("react"));
@@ -47,8 +47,8 @@ const z_index_1 = require("../state/z-index");
 const portals_1 = require("./Menu/portals");
 const styles_1 = require("./Menu/styles");
 const MenuContent_1 = require("./NewComposition/MenuContent");
-const ContextMenuPortal = ({ containerRef, currentZIndex, onHide, opened, values }) => {
-    const size = player_1.PlayerInternals.useElementSize(containerRef, {
+const ContextMenuPortal = ({ sizeSource, currentZIndex, onHide, opened, values }) => {
+    const size = player_1.PlayerInternals.useElementSize(sizeSource, {
         triggerOnWindowResize: true,
         shouldApplyCssTransforms: true,
     });
@@ -134,7 +134,9 @@ exports.ContextMenu = react_1.default.forwardRef(({ children, values, onOpen, st
         const onClick = (e) => {
             e.preventDefault();
             e.stopPropagation();
-            onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+            if ((onOpen === null || onOpen === void 0 ? void 0 : onOpen()) === false) {
+                return false;
+            }
             setOpened({ type: 'open', left: e.clientX, top: e.clientY });
             return false;
         };
@@ -147,6 +149,48 @@ exports.ContextMenu = react_1.default.forwardRef(({ children, values, onOpen, st
         setOpened({ type: 'not-open' });
     }, []);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("div", { ref: setRef, onContextMenu: () => false, style: style, className: className, onPointerDown: onPointerDown, children: children }), opened.type === 'open' ? (jsx_runtime_1.jsx(ContextMenuPortal, { containerRef: ref, currentZIndex: currentZIndex, onHide: onHide, opened: opened, values: values })) : null] }));
+            jsx_runtime_1.jsx("div", { ref: setRef, onContextMenu: () => false, style: style, className: className, onPointerDown: onPointerDown, children: children }), opened.type === 'open' ? (jsx_runtime_1.jsx(ContextMenuPortal, { sizeSource: ref, currentZIndex: currentZIndex, onHide: onHide, opened: opened, values: values })) : null] }));
 });
 exports.ContextMenu.displayName = 'ContextMenu';
+const ContextMenuForTarget = ({ triggerRef, values, onOpen }) => {
+    const [opened, setOpened] = (0, react_1.useState)({ type: 'not-open' });
+    const [openedValues, setOpenedValues] = (0, react_1.useState)(values);
+    const [body, setBody] = (0, react_1.useState)(null);
+    const { currentZIndex } = (0, z_index_1.useZIndex)();
+    (0, react_1.useEffect)(() => {
+        // Access document.body after mount so importing this component stays safe
+        // in DOM-less test environments.
+        setBody(document.body);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        const { current } = triggerRef;
+        if (!current) {
+            return;
+        }
+        const onClick = async (event) => {
+            const e = event;
+            e.preventDefault();
+            e.stopPropagation();
+            const result = await (onOpen === null || onOpen === void 0 ? void 0 : onOpen(e));
+            if (result === false) {
+                return false;
+            }
+            const nextValues = Array.isArray(result) ? result : values;
+            if (nextValues.length === 0) {
+                return false;
+            }
+            setOpenedValues(nextValues);
+            setOpened({ type: 'open', left: e.clientX, top: e.clientY });
+            return false;
+        };
+        current.addEventListener('contextmenu', onClick);
+        return () => {
+            current.removeEventListener('contextmenu', onClick);
+        };
+    }, [onOpen, triggerRef, values]);
+    const onHide = (0, react_1.useCallback)(() => {
+        setOpened({ type: 'not-open' });
+    }, []);
+    return opened.type === 'open' ? (jsx_runtime_1.jsx(ContextMenuPortal, { sizeSource: body, currentZIndex: currentZIndex, onHide: onHide, opened: opened, values: [...openedValues] })) : null;
+};
+exports.ContextMenuForTarget = ContextMenuForTarget;

package/dist/components/CurrentAsset.d.ts

@@ -1,3 +1,4 @@
 import React from 'react';
 export declare const CURRENT_ASSET_HEIGHT = 80;
+export declare const getCurrentAssetMetadataSource: (assetName: string | null) => string | null;
 export declare const CurrentAsset: React.FC;

package/dist/components/CurrentAsset.js

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CurrentAsset = exports.CURRENT_ASSET_HEIGHT = void 0;
+exports.CurrentAsset = exports.getCurrentAssetMetadataSource = exports.CURRENT_ASSET_HEIGHT = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
 const format_media_duration_1 = require("../helpers/format-media-duration");
+const get_preview_file_type_1 = require("../helpers/get-preview-file-type");
 const use_media_metadata_1 = require("../helpers/use-media-metadata");
 const use_static_files_1 = require("./use-static-files");
 exports.CURRENT_ASSET_HEIGHT = 80;
@@ -38,6 +39,16 @@ const row = {
     lineHeight: '18px',
     backgroundColor: colors_1.BACKGROUND,
 };
+const getCurrentAssetMetadataSource = (assetName) => {
+    if (!assetName) {
+        return null;
+    }
+    const fileType = (0, get_preview_file_type_1.getPreviewFileType)(assetName);
+    return fileType === 'audio' || fileType === 'video'
+        ? (0, remotion_1.staticFile)(assetName)
+        : null;
+};
+exports.getCurrentAssetMetadataSource = getCurrentAssetMetadataSource;
 const CurrentAsset = () => {
     var _a;
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
@@ -51,7 +62,7 @@ const CurrentAsset = () => {
         const file = staticFiles.find((f) => f.name === assetName);
         return (_a = file === null || file === void 0 ? void 0 : file.sizeInBytes) !== null && _a !== void 0 ? _a : null;
     }, [assetName, staticFiles]);
-    const src = assetName ? (0, remotion_1.staticFile)(assetName) : null;
+    const src = (0, exports.getCurrentAssetMetadataSource)(assetName);
     const mediaMetadata = (0, use_media_metadata_1.useMediaMetadata)(src);
     if (!assetName) {
         return jsx_runtime_1.jsx("div", { style: container });

package/dist/components/EditorContent.js

@@ -9,8 +9,10 @@ const MenuToolbar_1 = require("./MenuToolbar");
 const SplitterContainer_1 = require("./Splitter/SplitterContainer");
 const SplitterElement_1 = require("./Splitter/SplitterElement");
 const SplitterHandle_1 = require("./Splitter/SplitterHandle");
+const should_clear_selection_on_pointer_down_1 = require("./Timeline/should-clear-selection-on-pointer-down");
 const Timeline_1 = require("./Timeline/Timeline");
 const TimelineEmptyState_1 = require("./Timeline/TimelineEmptyState");
+const TimelineKeyframeDragState_1 = require("./Timeline/TimelineKeyframeDragState");
 const TimelineSelection_1 = require("./Timeline/TimelineSelection");
 const noop = () => undefined;
 const container = {
@@ -19,13 +21,24 @@ const container = {
     flex: 1,
     height: 0,
 };
+const StudioClearSelectionArea = ({ children }) => {
+    const { clearSelection } = (0, TimelineSelection_1.useTimelineSelection)();
+    const onPointerDown = (0, react_1.useCallback)((e) => {
+        if (!(0, should_clear_selection_on_pointer_down_1.shouldClearSelectionOnPointerDown)(e)) {
+            return;
+        }
+        clearSelection();
+    }, [clearSelection]);
+    return (jsx_runtime_1.jsx("div", { style: container, onPointerDown: onPointerDown, children: children }));
+};
 const EditorContent = ({ readOnlyStudio, children }) => {
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const showTimeline = canvasContent !== null && canvasContent.type === 'composition';
     const content = (jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "horizontal", id: "top-to-bottom", maxFlex: 0.9, minFlex: 0.2, defaultFlex: 0.75, children: [
             jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: children }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "none", onCollapse: noop }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: showTimeline ? jsx_runtime_1.jsx(Timeline_1.Timeline, {}) : jsx_runtime_1.jsx(TimelineEmptyState_1.TimelineEmptyState, {}) })
         ] }));
-    return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx(InitialCompositionLoader_1.InitialCompositionLoader, {}), jsx_runtime_1.jsx(MenuToolbar_1.MenuToolbar, { readOnlyStudio: readOnlyStudio }), showTimeline ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionProvider, { children: content })) : (content)] }));
+    return (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionProvider, { children: jsx_runtime_1.jsxs(StudioClearSelectionArea, { children: [
+                jsx_runtime_1.jsx(InitialCompositionLoader_1.InitialCompositionLoader, {}), jsx_runtime_1.jsx(MenuToolbar_1.MenuToolbar, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(TimelineKeyframeDragState_1.TimelineKeyframeDragStateProvider, { children: content })
+            ] }) }));
 };
 exports.EditorContent = EditorContent;

package/dist/components/EditorContexts.js

@@ -19,13 +19,14 @@ const ClientRenderQueueProcessor_1 = require("./RenderQueue/ClientRenderQueuePro
 const context_1 = require("./RenderQueue/context");
 const SetTimelineInOutProvider_1 = require("./SetTimelineInOutProvider");
 const ShowGuidesProvider_1 = require("./ShowGuidesProvider");
+const ShowOutlinesProvider_1 = require("./ShowOutlinesProvider");
 const ShowRulersProvider_1 = require("./ShowRulersProvider");
 const VisualControlsUndoSync_1 = require("./VisualControls/VisualControlsUndoSync");
 const ZoomGesturesProvider_1 = require("./ZoomGesturesProvider");
 const EditorContexts = ({ children, readOnlyStudio }) => {
     return (jsx_runtime_1.jsx(get_zod_if_possible_1.ZodProvider, { children: jsx_runtime_1.jsx(VisualControls_1.VisualControlsProvider, { children: jsx_runtime_1.jsxs(client_id_1.PreviewServerConnection, { readOnlyStudio: readOnlyStudio, children: [
                     jsx_runtime_1.jsx(VisualControlsUndoSync_1.VisualControlsUndoSync, {}), jsx_runtime_1.jsxs(context_1.RenderQueueContextProvider, { children: [
-                            jsx_runtime_1.jsx(ClientRenderQueueProcessor_1.ClientRenderQueueProcessor, {}), jsx_runtime_1.jsx(keybindings_1.KeybindingContextProvider, { children: jsx_runtime_1.jsx(CheckerboardProvider_1.CheckerboardProvider, { children: jsx_runtime_1.jsx(ZoomGesturesProvider_1.ZoomGesturesProvider, { children: jsx_runtime_1.jsx(ShowRulersProvider_1.ShowRulersProvider, { children: jsx_runtime_1.jsx(ShowGuidesProvider_1.ShowGuidesProvider, { children: jsx_runtime_1.jsx(preview_size_1.PreviewSizeProvider, { children: jsx_runtime_1.jsx(ModalsProvider_1.ModalsProvider, { children: jsx_runtime_1.jsx(MediaVolumeProvider_1.MediaVolumeProvider, { children: jsx_runtime_1.jsx(player_1.PlayerInternals.PlayerEmitterProvider, { currentPlaybackRate: null, children: jsx_runtime_1.jsx(sidebar_1.SidebarContextProvider, { children: jsx_runtime_1.jsx(folders_1.FolderContextProvider, { children: jsx_runtime_1.jsx(highest_z_index_1.HighestZIndexProvider, { children: jsx_runtime_1.jsx(SetTimelineInOutProvider_1.SetTimelineInOutProvider, { children: jsx_runtime_1.jsx(ExpandedTracksProvider_1.ExpandedTracksProvider, { children: children }) }) }) }) }) }) }) }) }) }) }) }) }) })
+                            jsx_runtime_1.jsx(ClientRenderQueueProcessor_1.ClientRenderQueueProcessor, {}), jsx_runtime_1.jsx(keybindings_1.KeybindingContextProvider, { children: jsx_runtime_1.jsx(CheckerboardProvider_1.CheckerboardProvider, { children: jsx_runtime_1.jsx(ZoomGesturesProvider_1.ZoomGesturesProvider, { children: jsx_runtime_1.jsx(ShowRulersProvider_1.ShowRulersProvider, { children: jsx_runtime_1.jsx(ShowGuidesProvider_1.ShowGuidesProvider, { children: jsx_runtime_1.jsx(ShowOutlinesProvider_1.ShowOutlinesProvider, { children: jsx_runtime_1.jsx(preview_size_1.PreviewSizeProvider, { children: jsx_runtime_1.jsx(ModalsProvider_1.ModalsProvider, { children: jsx_runtime_1.jsx(MediaVolumeProvider_1.MediaVolumeProvider, { children: jsx_runtime_1.jsx(player_1.PlayerInternals.PlayerEmitterProvider, { currentPlaybackRate: null, children: jsx_runtime_1.jsx(sidebar_1.SidebarContextProvider, { children: jsx_runtime_1.jsx(folders_1.FolderContextProvider, { children: jsx_runtime_1.jsx(highest_z_index_1.HighestZIndexProvider, { children: jsx_runtime_1.jsx(SetTimelineInOutProvider_1.SetTimelineInOutProvider, { children: jsx_runtime_1.jsx(ExpandedTracksProvider_1.ExpandedTracksProvider, { children: children }) }) }) }) }) }) }) }) }) }) }) }) }) }) })
                         ] })
                 ] }) }) }));
 };

package/dist/components/EditorRuler/Ruler.js

@@ -67,6 +67,8 @@ const Ruler = ({ scale, points, originOffset, startMarking, size, markingGaps, o
             return;
         }
         e.preventDefault();
+        // Prevent deselection of currently selected items
+        e.stopPropagation();
         shouldCreateGuideRef.current = true;
         (0, ForceSpecificCursor_1.forceSpecificCursor)('no-drop');
         const guideId = makeGuideId();

package/dist/components/ExplorerPanel.d.ts

@@ -1,7 +1,3 @@
-export declare const explorerSidebarTabs: import("react").RefObject<{
-    selectAssetsPanel: () => void;
-    selectCompositionPanel: () => void;
-} | null>;
 export declare const ExplorerPanel: React.FC<{
     readOnlyStudio: boolean;
 }>;

package/dist/components/ExplorerPanel.js

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ExplorerPanel = exports.explorerSidebarTabs = void 0;
+exports.ExplorerPanel = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const AssetSelector_1 = require("./AssetSelector");
 const CompositionSelector_1 = require("./CompositionSelector");
 const CompSelectorRef_1 = require("./CompSelectorRef");
+const ExplorerPanelRef_1 = require("./ExplorerPanelRef");
 const Tabs_1 = require("./Tabs");
 const container = {
     height: '100%',
@@ -30,7 +31,6 @@ const tabsContainer = {
 const persistSelectedOptionsSidebarPanel = (panel) => {
     localStorage.setItem(localStorageKey, panel);
 };
-exports.explorerSidebarTabs = (0, react_1.createRef)();
 const ExplorerPanel = ({ readOnlyStudio }) => {
     const [panel, setPanel] = (0, react_1.useState)(() => getSelectedPanel());
     const onCompositionsSelected = (0, react_1.useCallback)(() => {
@@ -41,7 +41,7 @@ const ExplorerPanel = ({ readOnlyStudio }) => {
         setPanel('assets');
         persistSelectedOptionsSidebarPanel('assets');
     }, []);
-    (0, react_1.useImperativeHandle)(exports.explorerSidebarTabs, () => {
+    (0, react_1.useImperativeHandle)(ExplorerPanelRef_1.explorerSidebarTabs, () => {
         return {
             selectAssetsPanel: () => {
                 setPanel('assets');
@@ -53,7 +53,11 @@ const ExplorerPanel = ({ readOnlyStudio }) => {
             },
         };
     }, []);
-    return (jsx_runtime_1.jsx(CompSelectorRef_1.CompSelectorRef, { children: jsx_runtime_1.jsxs("div", { style: container, className: "css-reset", children: [
+    const onPointerDown = (0, react_1.useCallback)((e) => {
+        // Prevent deselection of currently selected items
+        e.stopPropagation();
+    }, []);
+    return (jsx_runtime_1.jsx(CompSelectorRef_1.CompSelectorRef, { children: jsx_runtime_1.jsxs("div", { style: container, className: "css-reset", onPointerDown: onPointerDown, children: [
                 jsx_runtime_1.jsx("div", { style: tabsContainer, children: jsx_runtime_1.jsxs(Tabs_1.Tabs, { children: [
                             jsx_runtime_1.jsx(Tabs_1.Tab, { selected: panel === 'compositions', onClick: onCompositionsSelected, children: "Compositions" }), jsx_runtime_1.jsx(Tabs_1.Tab, { selected: panel === 'assets', onClick: onAssetsSelected, children: "Assets" })
                         ] }) }), panel === 'compositions' ? (jsx_runtime_1.jsx(CompositionSelector_1.CompositionSelector, {})) : (jsx_runtime_1.jsx(AssetSelector_1.AssetSelector, { readOnlyStudio: readOnlyStudio }))] }) }));

package/dist/components/ExplorerPanelRef.d.ts

@@ -0,0 +1,4 @@
+export declare const explorerSidebarTabs: import("react").RefObject<{
+    selectAssetsPanel: () => void;
+    selectCompositionPanel: () => void;
+} | null>;

package/dist/components/ExplorerPanelRef.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.explorerSidebarTabs = void 0;
+const react_1 = require("react");
+exports.explorerSidebarTabs = (0, react_1.createRef)();

package/dist/components/FilePreview.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { AssetMetadata } from '../helpers/get-asset-metadata';
-import type { AssetFileType } from './Preview';
+import type { AssetFileType } from '../helpers/get-preview-file-type';
 export declare const FilePreview: React.FC<{
     readonly src: string;
     readonly fileType: AssetFileType;

package/dist/components/InitialCompositionLoader.d.ts

@@ -1,4 +1,3 @@
 import type React from 'react';
-export declare const useSelectAsset: () => (asset: string) => void;
 export declare const useSelectComposition: () => (c: import("remotion").AnyComposition, push: boolean) => void;
 export declare const InitialCompositionLoader: React.FC;

package/dist/components/InitialCompositionLoader.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InitialCompositionLoader = exports.useSelectComposition = exports.useSelectAsset = void 0;
+exports.InitialCompositionLoader = exports.useSelectComposition = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const create_folder_tree_1 = require("../helpers/create-folder-tree");
@@ -9,32 +9,10 @@ const persist_open_folders_1 = require("../helpers/persist-open-folders");
 const url_state_1 = require("../helpers/url-state");
 const folders_1 = require("../state/folders");
 const sidebar_1 = require("../state/sidebar");
-const ExplorerPanel_1 = require("./ExplorerPanel");
+const ExplorerPanelRef_1 = require("./ExplorerPanelRef");
 const load_canvas_content_from_url_1 = require("./load-canvas-content-from-url");
+const use_select_asset_1 = require("./use-select-asset");
 const use_static_files_1 = require("./use-static-files");
-const useSelectAsset = () => {
-    const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
-    const { setAssetFoldersExpanded } = (0, react_1.useContext)(folders_1.FolderContext);
-    return (0, react_1.useCallback)((asset) => {
-        var _a;
-        setCanvasContent({ type: 'asset', asset });
-        (_a = ExplorerPanel_1.explorerSidebarTabs.current) === null || _a === void 0 ? void 0 : _a.selectAssetsPanel();
-        setAssetFoldersExpanded((ex) => {
-            const split = asset.split('/');
-            const keysToExpand = split.map((_, i) => {
-                return split.slice(0, i).join('/');
-            });
-            const newState = {
-                ...ex,
-            };
-            for (const key of keysToExpand) {
-                newState[key] = true;
-            }
-            return newState;
-        });
-    }, [setAssetFoldersExpanded, setCanvasContent]);
-};
-exports.useSelectAsset = useSelectAsset;
 const useSelectComposition = () => {
     const { setCompositionFoldersExpanded } = (0, react_1.useContext)(folders_1.FolderContext);
     const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
@@ -45,7 +23,7 @@ const useSelectComposition = () => {
         if (push) {
             (0, url_state_1.pushUrl)(`/${c.id}`);
         }
-        (_a = ExplorerPanel_1.explorerSidebarTabs.current) === null || _a === void 0 ? void 0 : _a.selectCompositionPanel();
+        (_a = ExplorerPanelRef_1.explorerSidebarTabs.current) === null || _a === void 0 ? void 0 : _a.selectCompositionPanel();
         setCanvasContent({ type: 'composition', compositionId: c.id });
         const { folderName, parentFolderName } = c;
         if (folderName !== null) {
@@ -76,7 +54,7 @@ const InitialCompositionLoader = () => {
     const { compositions, canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
     const selectComposition = (0, exports.useSelectComposition)();
-    const selectAsset = (0, exports.useSelectAsset)();
+    const selectAsset = (0, use_select_asset_1.useSelectAsset)();
     const staticFiles = (0, use_static_files_1.useStaticFiles)();
     (0, react_1.useEffect)(() => {
         const canvasContentFromUrl = (0, load_canvas_content_from_url_1.deriveCanvasContentFromUrl)();

package/dist/components/Menu/MenuItem.js

@@ -61,6 +61,8 @@ const MenuItem = ({ label: itemName, selected, id, onItemSelected, onItemHovered
         setHovered(false);
     }, []);
     const onPointerDown = (0, react_1.useCallback)((e) => {
+        // Prevent deselection of currently selected items
+        e.stopPropagation();
         if (e.button !== 0) {
             return;
         }
@@ -73,6 +75,10 @@ const MenuItem = ({ label: itemName, selected, id, onItemSelected, onItemHovered
             once: true,
         });
     }, [id, onItemQuit, onItemSelected]);
+    const onMenuPointerDown = (0, react_1.useCallback)((e) => {
+        // Prevent deselection of currently selected items
+        e.stopPropagation();
+    }, []);
     const onClick = (0, react_1.useCallback)((e) => {
         e.stopPropagation();
         const isKeyboardInitiated = e.detail === 0;
@@ -92,7 +98,7 @@ const MenuItem = ({ label: itemName, selected, id, onItemSelected, onItemHovered
     }, [size]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx("button", { ref: ref, role: "button", tabIndex: tabIndex, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onPointerDown: onPointerDown, onClick: onClick, style: containerStyle, type: "button", className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, children: itemName }), portalStyle
-                ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { className: "css-reset", style: outerStyle, children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: onItemQuit, onOutsideClick: onItemQuit, children: jsx_runtime_1.jsx("div", { style: portalStyle, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: onPreviousMenu, onPreviousMenu: onNextMenu, values: menu.items, onHide: onItemQuit, leaveLeftSpace: menu.leaveLeftPadding, preselectIndex: false, topItemCanBeUnselected: true, fixedHeight: null }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
+                ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { className: "css-reset", style: outerStyle, children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: onItemQuit, onOutsideClick: onItemQuit, children: jsx_runtime_1.jsx("div", { style: portalStyle, onPointerDown: onMenuPointerDown, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: onPreviousMenu, onPreviousMenu: onNextMenu, values: menu.items, onHide: onItemQuit, leaveLeftSpace: menu.leaveLeftPadding, preselectIndex: false, topItemCanBeUnselected: true, fixedHeight: null }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));
 };
 exports.MenuItem = MenuItem;

package/dist/components/Menu/SubMenu.js

@@ -18,7 +18,11 @@ const SubMenuComponent = ({ portalStyle, subMenuActivated, subMenu, onQuitFullMe
             onQuitFullMenu();
         }
     }, [mobileLayout, onQuitFullMenu, onQuitSubMenu]);
-    return (jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: onQuitFullMenu, onOutsideClick: onOutsideClick, children: jsx_runtime_1.jsx("div", { style: portalStyle, className: "css-reset", children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: onQuitSubMenu, values: subMenu.items, onHide: onQuitFullMenu, leaveLeftSpace: subMenu.leaveLeftSpace, preselectIndex: subMenuActivated === 'without-mouse' &&
+    const onPointerDown = (0, react_1.useCallback)((e) => {
+        // Prevent deselection of currently selected items
+        e.stopPropagation();
+    }, []);
+    return (jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: onQuitFullMenu, onOutsideClick: onOutsideClick, children: jsx_runtime_1.jsx("div", { style: portalStyle, className: "css-reset", onPointerDown: onPointerDown, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: onQuitSubMenu, values: subMenu.items, onHide: onQuitFullMenu, leaveLeftSpace: subMenu.leaveLeftSpace, preselectIndex: subMenuActivated === 'without-mouse' &&
                     typeof subMenu.preselectIndex === 'number'
                     ? subMenu.preselectIndex
                     : false, topItemCanBeUnselected: false, fixedHeight: null }) }) }));

package/dist/components/Menu/portals.js

@@ -1,15 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getPortal = exports.portals = void 0;
-exports.portals = [
-    document.getElementById('menuportal-0'),
-    document.getElementById('menuportal-1'),
-    document.getElementById('menuportal-2'),
-    document.getElementById('menuportal-3'),
-    document.getElementById('menuportal-4'),
-    document.getElementById('menuportal-5'),
+const portalIds = [
+    'menuportal-0',
+    'menuportal-1',
+    'menuportal-2',
+    'menuportal-3',
+    'menuportal-4',
+    'menuportal-5',
 ];
+exports.portals = 
+// This module is imported by Bun tests that run without a DOM.
+typeof document === 'undefined'
+    ? []
+    : portalIds.map((id) => document.getElementById(id));
 const getPortal = (i) => {
-    return exports.portals[i];
+    const portal = exports.portals[i];
+    if (!portal) {
+        throw new Error(`Expected menu portal ${i} to exist`);
+    }
+    return portal;
 };
 exports.getPortal = getPortal;

package/dist/components/MenuToolbar.js

@@ -90,7 +90,11 @@ const MenuToolbar = ({ readOnlyStudio }) => {
     const onItemQuit = (0, react_1.useCallback)(() => {
         setSelected(null);
     }, [setSelected]);
-    return (jsx_runtime_1.jsxs(layout_1.Row, { align: "center", className: "css-reset", style: row, children: [
+    const onPointerDown = (0, react_1.useCallback)((e) => {
+        // Prevent deselection of currently selected items
+        e.stopPropagation();
+    }, []);
+    return (jsx_runtime_1.jsxs(layout_1.Row, { align: "center", className: "css-reset", style: row, onPointerDown: onPointerDown, children: [
             jsx_runtime_1.jsxs("div", { style: fixedWidthLeft, children: [structure.map((s) => {
                         return (jsx_runtime_1.jsx(MenuItem_1.MenuItem, { selected: selected === s.id, onItemSelected: itemClicked, onItemHovered: itemHovered, id: s.id, label: s.label, onItemQuit: onItemQuit, menu: s, onPreviousMenu: onPreviousMenu, onNextMenu: onNextMenu, leaveLeftPadding: s.leaveLeftPadding }, s.id));
                     }), readOnlyStudio ? null : jsx_runtime_1.jsx(UpdateCheck_1.UpdateCheck, {})] }), jsx_runtime_1.jsx("div", { style: flex }), jsx_runtime_1.jsx(MenuBuildIndicator_1.MenuBuildIndicator, {}), jsx_runtime_1.jsx("div", { style: flex }), jsx_runtime_1.jsxs("div", { style: fixedWidthRight, children: [readOnlyStudio ? null : jsx_runtime_1.jsx(UndoRedoButtons_1.UndoRedoButtons, {}), jsx_runtime_1.jsx(SidebarCollapserControls_1.SidebarCollapserControls, {})

package/dist/components/ModalContainer.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModalContainer = exports.getMaxModalHeight = exports.getMaxModalWidth = void 0;
 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 padding = 20;
@@ -29,6 +30,10 @@ const panel = {
     margin: 'auto',
 };
 const ModalContainer = ({ children, onEscape, onOutsideClick, noZIndex }) => {
-    return (jsx_runtime_1.jsx("div", { className: "css-reset", style: backgroundOverlay, role: "dialog", "aria-modal": "true", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { disabled: noZIndex, onOutsideClick: onOutsideClick, onEscape: onEscape, children: jsx_runtime_1.jsx("div", { style: panel, children: children }) }) }));
+    const onPointerDown = (0, react_1.useCallback)((e) => {
+        // 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, children: children }) }) }));
 };
 exports.ModalContainer = ModalContainer;