@remotion/studio 4.0.471 → 4.0.473

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,58 +47,25 @@ 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");
-exports.ContextMenu = react_1.default.forwardRef(({ children, values, onOpen, style = undefined, className = undefined, onPointerDown = undefined, }, forwardedRef) => {
-    const ref = (0, react_1.useRef)(null);
-    const [opened, setOpened] = (0, react_1.useState)({ type: 'not-open' });
-    const { currentZIndex } = (0, z_index_1.useZIndex)();
-    const setRef = (0, react_1.useCallback)((node) => {
-        ref.current = node;
-        if (typeof forwardedRef === 'function') {
-            forwardedRef(node);
-            return;
-        }
-        if (forwardedRef) {
-            forwardedRef.current = node;
-        }
-    }, [forwardedRef]);
-    const size = player_1.PlayerInternals.useElementSize(ref, {
+const ContextMenuPortal = ({ sizeSource, currentZIndex, onHide, opened, values }) => {
+    const size = player_1.PlayerInternals.useElementSize(sizeSource, {
         triggerOnWindowResize: true,
         shouldApplyCssTransforms: true,
     });
     const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
-    (0, react_1.useEffect)(() => {
-        const { current } = ref;
-        if (!current) {
-            return;
-        }
-        const onClick = (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            onOpen === null || onOpen === void 0 ? void 0 : onOpen();
-            setOpened({ type: 'open', left: e.clientX, top: e.clientY });
-            return false;
-        };
-        current.addEventListener('contextmenu', onClick);
-        return () => {
-            current.removeEventListener('contextmenu', onClick);
-        };
-    }, [onOpen, size]);
     const spaceToBottom = (0, react_1.useMemo)(() => {
-        if (size && opened.type === 'open') {
+        if (size) {
             return size.windowSize.height - opened.top;
         }
         return 0;
-    }, [opened, size]);
+    }, [opened.top, size]);
     const spaceToTop = (0, react_1.useMemo)(() => {
-        if (size && opened.type === 'open') {
+        if (size) {
             return opened.top;
         }
         return 0;
-    }, [opened, size]);
+    }, [opened.top, size]);
     const portalStyle = (0, react_1.useMemo)(() => {
-        if (opened.type === 'not-open') {
-            return;
-        }
         if (!size) {
             return;
         }
@@ -128,17 +95,102 @@ exports.ContextMenu = react_1.default.forwardRef(({ children, values, onOpen, st
                     right: canOpenOnLeft ? size.windowSize.width - opened.left : 0,
                 }),
         };
-    }, [opened, size, isMobileLayout, spaceToTop, spaceToBottom]);
-    const onHide = (0, react_1.useCallback)(() => {
-        setOpened({ type: 'not-open' });
-    }, []);
+    }, [
+        opened.left,
+        opened.top,
+        size,
+        isMobileLayout,
+        spaceToTop,
+        spaceToBottom,
+    ]);
     // Prevent deselection of a selected item
     const onMenuPointerDown = (0, react_1.useCallback)((e) => {
         e.stopPropagation();
     }, []);
+    if (!portalStyle) {
+        return null;
+    }
+    return react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, 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, onPointerDown: onMenuPointerDown, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: values, onHide: onHide, leaveLeftSpace: true, preselectIndex: false, topItemCanBeUnselected: false, fixedHeight: null }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex));
+};
+exports.ContextMenu = react_1.default.forwardRef(({ children, values, onOpen, style = undefined, className = undefined, onPointerDown = undefined, }, forwardedRef) => {
+    const ref = (0, react_1.useRef)(null);
+    const [opened, setOpened] = (0, react_1.useState)({ type: 'not-open' });
+    const { currentZIndex } = (0, z_index_1.useZIndex)();
+    const setRef = (0, react_1.useCallback)((node) => {
+        ref.current = node;
+        if (typeof forwardedRef === 'function') {
+            forwardedRef(node);
+            return;
+        }
+        if (forwardedRef) {
+            forwardedRef.current = node;
+        }
+    }, [forwardedRef]);
+    (0, react_1.useEffect)(() => {
+        const { current } = ref;
+        if (!current) {
+            return;
+        }
+        const onClick = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            if ((onOpen === null || onOpen === void 0 ? void 0 : onOpen()) === false) {
+                return false;
+            }
+            setOpened({ type: 'open', left: e.clientX, top: e.clientY });
+            return false;
+        };
+        current.addEventListener('contextmenu', onClick);
+        return () => {
+            current.removeEventListener('contextmenu', onClick);
+        };
+    }, [onOpen]);
+    const onHide = (0, react_1.useCallback)(() => {
+        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 }), portalStyle
-                ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, 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, onPointerDown: onMenuPointerDown, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: values, onHide: onHide, leaveLeftSpace: true, preselectIndex: false, topItemCanBeUnselected: false, fixedHeight: null }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
-                : 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/Editor.js

@@ -41,6 +41,7 @@ const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
 const noop_1 = require("../helpers/noop");
 const canvas_ref_1 = require("../state/canvas-ref");
+const scale_lock_1 = require("../state/scale-lock");
 const timeline_zoom_1 = require("../state/timeline-zoom");
 const z_index_1 = require("../state/z-index");
 const EditorContent_1 = require("./EditorContent");
@@ -65,7 +66,8 @@ exports.BUFFER_STATE_DELAY_IN_MILLISECONDS = typeof process.env.BUFFER_STATE_DEL
     ? DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS
     : Number(process.env.BUFFER_STATE_DELAY_IN_MILLISECONDS);
 const Editor = ({ Root, readOnlyStudio }) => {
-    const size = player_1.PlayerInternals.useElementSize(canvas_ref_1.drawRef, {
+    const [drawElement, setDrawElement] = (0, react_1.useState)(null);
+    const size = player_1.PlayerInternals.useElementSize(drawElement, {
         triggerOnWindowResize: false,
         shouldApplyCssTransforms: true,
     });
@@ -73,6 +75,12 @@ const Editor = ({ Root, readOnlyStudio }) => {
     const onMounted = (0, react_1.useCallback)(() => {
         setCanvasMounted(true);
     }, []);
+    // Use a callback ref so the late-mounted canvas container triggers a render
+    // and useElementSize() can observe it. See GitHub issue #8098.
+    const setDrawRef = (0, react_1.useCallback)((node) => {
+        canvas_ref_1.drawRef.current = node;
+        setDrawElement(node);
+    }, []);
     const value = (0, react_1.useMemo)(() => {
         if (!size) {
             return null;
@@ -93,11 +101,11 @@ const Editor = ({ Root, readOnlyStudio }) => {
     const renderErrorContextValue = (0, react_1.useMemo)(() => ({ error: renderError }), [renderError]);
     return (jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: noop_1.noop, onOutsideClick: noop_1.noop, children: jsx_runtime_1.jsx(timeline_zoom_1.TimelineZoomContext, { children: jsx_runtime_1.jsxs(SequencePropsSubscriptionProvider_1.SequencePropsSubscriptionProvider, { children: [
                     jsx_runtime_1.jsxs(remotion_1.Internals.CurrentScaleContext.Provider, { value: value, children: [
-                            jsx_runtime_1.jsx(ForceSpecificCursor_1.ForceSpecificCursor, {}), jsx_runtime_1.jsxs("div", { style: background, children: [
-                                    jsx_runtime_1.jsx(remotion_1.Internals.CompositionRenderErrorContext.Provider, { value: compositionRenderErrorContextValue, children: canvasMounted ? jsx_runtime_1.jsx(MemoRoot, {}) : null }), jsx_runtime_1.jsxs(remotion_1.Internals.CanUseRemotionHooksProvider, { children: [
-                                            jsx_runtime_1.jsx(RenderErrorContext_1.RenderErrorContext.Provider, { value: renderErrorContextValue, children: jsx_runtime_1.jsx(EditorContent_1.EditorContent, { readOnlyStudio: readOnlyStudio, children: jsx_runtime_1.jsx(TopPanel_1.TopPanel, { drawRef: canvas_ref_1.drawRef, bufferStateDelayInMilliseconds: exports.BUFFER_STATE_DELAY_IN_MILLISECONDS, onMounted: onMounted, readOnlyStudio: readOnlyStudio }) }) }), jsx_runtime_1.jsx(GlobalKeybindings_1.GlobalKeybindings, {})
-                                        ] })
-                                ] })
+                            jsx_runtime_1.jsx(ForceSpecificCursor_1.ForceSpecificCursor, {}), jsx_runtime_1.jsx(scale_lock_1.ScaleLockProvider, { children: jsx_runtime_1.jsxs("div", { style: background, children: [
+                                        jsx_runtime_1.jsx(remotion_1.Internals.CompositionRenderErrorContext.Provider, { value: compositionRenderErrorContextValue, children: canvasMounted ? jsx_runtime_1.jsx(MemoRoot, {}) : null }), jsx_runtime_1.jsxs(remotion_1.Internals.CanUseRemotionHooksProvider, { children: [
+                                                jsx_runtime_1.jsx(RenderErrorContext_1.RenderErrorContext.Provider, { value: renderErrorContextValue, children: jsx_runtime_1.jsx(EditorContent_1.EditorContent, { readOnlyStudio: readOnlyStudio, children: jsx_runtime_1.jsx(TopPanel_1.TopPanel, { drawRef: setDrawRef, bufferStateDelayInMilliseconds: exports.BUFFER_STATE_DELAY_IN_MILLISECONDS, onMounted: onMounted, readOnlyStudio: readOnlyStudio }) }) }), jsx_runtime_1.jsx(GlobalKeybindings_1.GlobalKeybindings, {})
+                                            ] })
+                                    ] }) })
                         ] }), jsx_runtime_1.jsx(Modals_1.Modals, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(NotificationCenter_1.NotificationCenter, {})
                 ] }) }) }));
 };

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)();