@remotion/studio 4.0.475 → 4.0.477

package/dist/components/Canvas.js

@@ -113,6 +113,27 @@ const getSfxDragUrl = (event) => {
     }
     return null;
 };
+const getDropPosition = ({ clientX, clientY, contentDimensions, previewSize, size, }) => {
+    if (contentDimensions === null || contentDimensions === 'none') {
+        return null;
+    }
+    const scale = remotion_1.Internals.calculateScale({
+        canvasSize: size,
+        compositionHeight: contentDimensions.height,
+        compositionWidth: contentDimensions.width,
+        previewSize: previewSize.size,
+    });
+    const { centerX, centerY } = (0, get_effective_translation_1.getCenterPointWhileScrolling)({
+        size,
+        clientX,
+        clientY,
+        compositionWidth: contentDimensions.width,
+        compositionHeight: contentDimensions.height,
+        scale,
+        translation: previewSize.translation,
+    });
+    return { centerX, centerY };
+};
 const isDragEventInsideCanvas = (event) => {
     const { current } = canvas_ref_1.canvasRef;
     if (!current) {
@@ -572,6 +593,13 @@ const Canvas = ({ canvasContent, size }) => {
         event.stopPropagation();
         setIsAddingAsset(true);
         try {
+            const dropPosition = getDropPosition({
+                clientX: event.clientX,
+                clientY: event.clientY,
+                contentDimensions,
+                previewSize,
+                size,
+            });
             if (isFileDragEvent(event)) {
                 const files = Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) !== null && _b !== void 0 ? _b : []);
                 if (files.length === 0) {
@@ -581,6 +609,7 @@ const Canvas = ({ canvasContent, size }) => {
                     files,
                     compositionFile,
                     compositionId: currentCompositionId,
+                    dropPosition,
                 });
             }
             else if (isAssetDragEvent(event)) {
@@ -592,6 +621,7 @@ const Canvas = ({ canvasContent, size }) => {
                     assetPaths: [assetPath],
                     compositionFile,
                     compositionId: currentCompositionId,
+                    dropPosition,
                 });
             }
             else if (isSfxDragEvent(event)) {
@@ -612,6 +642,7 @@ const Canvas = ({ canvasContent, size }) => {
                         component: componentDragData.component,
                         compositionFile,
                         compositionId: currentCompositionId,
+                        dropPosition,
                     });
                     return;
                 }
@@ -623,13 +654,21 @@ const Canvas = ({ canvasContent, size }) => {
                     url,
                     compositionFile,
                     compositionId: currentCompositionId,
+                    dropPosition,
                 });
             }
         }
         finally {
             setIsAddingAsset(false);
         }
-    }, [canDropAssets, compositionFile, currentCompositionId]);
+    }, [
+        canDropAssets,
+        compositionFile,
+        contentDimensions,
+        currentCompositionId,
+        previewSize,
+        size,
+    ]);
     (0, react_1.useEffect)(() => {
         if (!canDropAssets) {
             return;

package/dist/components/ColorPicker/ColorPickerPopup.d.ts

@@ -1,5 +1,11 @@
 import React from 'react';
 export declare const POPUP_WIDTH = 240;
+export declare const parseEyeDropperColor: (pickedColor: string) => {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+};
 export type ChannelKey = 'r' | 'g' | 'b' | 'a-percent';
 export declare const ColorPickerPopup: React.FC<{
     readonly value: string;

package/dist/components/ColorPicker/ColorPickerPopup.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ColorPickerPopup = exports.POPUP_WIDTH = void 0;
+exports.ColorPickerPopup = exports.parseEyeDropperColor = exports.POPUP_WIDTH = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const color_conversion_1 = require("../../helpers/color-conversion");
@@ -100,6 +100,14 @@ const eyedropperButtonStyle = {
     flex: '0 0 auto',
 };
 const hasEyeDropper = () => typeof window !== 'undefined' && 'EyeDropper' in window;
+const parseEyeDropperColor = (pickedColor) => {
+    const parsed = (0, color_conversion_1.parseAnyColor)(pickedColor);
+    return {
+        ...parsed,
+        a: 255,
+    };
+};
+exports.parseEyeDropperColor = parseEyeDropperColor;
 const ChannelInput = ({ label, channel, value, min, max, onCommit, }) => {
     const [draft, setDraft] = (0, react_1.useState)(String(Math.round(value)));
     const { tabIndex } = (0, z_index_1.useZIndex)();
@@ -243,10 +251,7 @@ const ColorPickerPopup = ({ value, onChange, onChangeComplete }) => {
         dropper
             .open()
             .then((result) => {
-            const parsed = (0, color_conversion_1.parseAnyColor)(result.sRGBHex);
-            // `EyeDropper` always returns full opacity; preserve the user's
-            // previously chosen alpha so opening it doesn't drop transparency.
-            parsed.a = rgba.a;
+            const parsed = (0, exports.parseEyeDropperColor)(result.sRGBHex);
             const newHsva = (0, color_conversion_1.rgbaToHsva)(parsed);
             if (newHsva.s === 0) {
                 newHsva.h = hsva.h;
@@ -256,7 +261,7 @@ const ColorPickerPopup = ({ value, onChange, onChangeComplete }) => {
             .catch(() => {
             // Aborted; ignore.
         });
-    }, [emit, hsva.h, rgba.a]);
+    }, [emit, hsva.h]);
     const previewFill = (0, react_1.useMemo)(() => {
         return {
             ...previewSwatchFillBase,

package/dist/components/ControlButton.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 export declare const CONTROL_BUTTON_PADDING = 6;
+export declare const CONTROL_BUTTON_SIZE = 30;
 export declare const ControlButton: (props: React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
     readonly title: string;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ControlButton.js

@@ -1,18 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ControlButton = exports.CONTROL_BUTTON_PADDING = void 0;
+exports.ControlButton = exports.CONTROL_BUTTON_SIZE = exports.CONTROL_BUTTON_PADDING = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const z_index_1 = require("../state/z-index");
 exports.CONTROL_BUTTON_PADDING = 6;
+exports.CONTROL_BUTTON_SIZE = 30;
 const ControlButton = (props) => {
     const style = (0, react_1.useMemo)(() => {
         return {
             opacity: props.disabled ? 0.5 : 1,
             display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: exports.CONTROL_BUTTON_SIZE,
+            height: exports.CONTROL_BUTTON_SIZE,
             background: 'none',
             border: 'none',
-            padding: exports.CONTROL_BUTTON_PADDING,
+            padding: 0,
         };
     }, [props.disabled]);
     const { tabIndex } = (0, z_index_1.useZIndex)();

package/dist/components/EditorGuides/Guide.js

@@ -3,14 +3,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const no_react_1 = require("remotion/no-react");
-const colors_1 = require("../../helpers/colors");
+const editor_guide_selection_1 = require("../../helpers/editor-guide-selection");
 const editor_guides_1 = require("../../state/editor-guides");
 const editor_rulers_1 = require("../../state/editor-rulers");
 const ContextMenu_1 = require("../ContextMenu");
 const ForceSpecificCursor_1 = require("../ForceSpecificCursor");
+const should_clear_selection_on_pointer_down_1 = require("../Timeline/should-clear-selection-on-pointer-down");
+const TimelineSelection_1 = require("../Timeline/TimelineSelection");
 const PADDING_FOR_EASY_DRAG = 4;
 const GuideComp = ({ guide, canvasDimensions, scale }) => {
-    const { shouldCreateGuideRef, setGuidesList, setSelectedGuideId, selectedGuideId, setHoveredGuideId, hoveredGuideId, } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
+    const { shouldCreateGuideRef, shouldDeleteGuideRef, setGuidesList, setDraggingGuideId, setHoveredGuideId, hoveredGuideId, draggingGuideId, } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
+    const { clearSelection, onSelect, selected } = (0, TimelineSelection_1.useTimelineGuideSelection)(guide.id);
+    const pointerDownPositionRef = (0, react_1.useRef)(null);
+    const hasMovedGuideRef = (0, react_1.useRef)(false);
     const onPointerEnter = (0, react_1.useCallback)(() => {
         setHoveredGuideId(() => guide.id);
     }, [guide.id, setHoveredGuideId]);
@@ -43,20 +48,121 @@ const GuideComp = ({ guide, canvasDimensions, scale }) => {
             top: `${isVerticalGuide ? `-${editor_rulers_1.RULER_WIDTH}px` : '0px'}`,
             left: `${isVerticalGuide ? '0px' : `-${editor_rulers_1.RULER_WIDTH}px`}`,
             display: guide.show ? 'block' : 'none',
-            backgroundColor: selectedGuideId === guide.id || hoveredGuideId === guide.id
-                ? colors_1.SELECTED_GUIDE
-                : colors_1.UNSELECTED_GUIDE,
+            backgroundColor: (0, editor_guide_selection_1.getEditorGuideColor)({
+                selected,
+                active: hoveredGuideId === guide.id || draggingGuideId === guide.id,
+            }),
         };
-    }, [isVerticalGuide, guide.show, guide.id, selectedGuideId, hoveredGuideId]);
+    }, [
+        isVerticalGuide,
+        guide.show,
+        hoveredGuideId,
+        guide.id,
+        selected,
+        draggingGuideId,
+    ]);
+    const onPointerDown = (0, react_1.useCallback)((e) => {
+        if (e.button !== 0) {
+            return;
+        }
+        e.stopPropagation();
+        e.currentTarget.setPointerCapture(e.pointerId);
+        hasMovedGuideRef.current = false;
+        pointerDownPositionRef.current = {
+            guideId: guide.id,
+            clientX: e.clientX,
+            clientY: e.clientY,
+        };
+        shouldCreateGuideRef.current = true;
+        (0, ForceSpecificCursor_1.forceSpecificCursor)('no-drop');
+        setDraggingGuideId(() => guide.id);
+    }, [guide.id, setDraggingGuideId, shouldCreateGuideRef]);
     const onMouseDown = (0, react_1.useCallback)((e) => {
-        e.preventDefault();
         if (e.button !== 0) {
             return;
         }
+        e.preventDefault();
+        e.stopPropagation();
+        hasMovedGuideRef.current = false;
+        pointerDownPositionRef.current = {
+            guideId: guide.id,
+            clientX: e.clientX,
+            clientY: e.clientY,
+        };
         shouldCreateGuideRef.current = true;
         (0, ForceSpecificCursor_1.forceSpecificCursor)('no-drop');
-        setSelectedGuideId(() => guide.id);
-    }, [shouldCreateGuideRef, setSelectedGuideId, guide.id]);
+        setDraggingGuideId(() => guide.id);
+    }, [guide.id, setDraggingGuideId, shouldCreateGuideRef]);
+    const updateHasMovedGuide = (0, react_1.useCallback)((clientX, clientY) => {
+        const pointerDownPosition = pointerDownPositionRef.current;
+        if (pointerDownPosition === null) {
+            return;
+        }
+        if (!(0, editor_guide_selection_1.isGuidePointerUpAClick)({
+            pointerDownPosition,
+            guideId: guide.id,
+            clientX,
+            clientY,
+        })) {
+            hasMovedGuideRef.current = true;
+        }
+    }, [guide.id]);
+    const onPointerMove = (0, react_1.useCallback)((e) => {
+        updateHasMovedGuide(e.clientX, e.clientY);
+    }, [updateHasMovedGuide]);
+    const onMouseMove = (0, react_1.useCallback)((e) => {
+        updateHasMovedGuide(e.clientX, e.clientY);
+    }, [updateHasMovedGuide]);
+    const onPointerUp = (0, react_1.useCallback)((e) => {
+        if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+            e.currentTarget.releasePointerCapture(e.pointerId);
+        }
+        const pointerDownPosition = pointerDownPositionRef.current;
+        pointerDownPositionRef.current = null;
+        if (shouldDeleteGuideRef.current) {
+            return;
+        }
+        if ((0, editor_guide_selection_1.isGuidePointerUpAClick)({
+            pointerDownPosition,
+            guideId: guide.id,
+            clientX: e.clientX,
+            clientY: e.clientY,
+        })) {
+            onSelect();
+        }
+    }, [guide.id, onSelect, shouldDeleteGuideRef]);
+    const onMouseUp = (0, react_1.useCallback)((e) => {
+        const pointerDownPosition = pointerDownPositionRef.current;
+        pointerDownPositionRef.current = null;
+        if (shouldDeleteGuideRef.current) {
+            return;
+        }
+        if ((0, editor_guide_selection_1.isGuidePointerUpAClick)({
+            pointerDownPosition,
+            guideId: guide.id,
+            clientX: e.clientX,
+            clientY: e.clientY,
+        })) {
+            onSelect();
+        }
+    }, [guide.id, onSelect, shouldDeleteGuideRef]);
+    const onClick = (0, react_1.useCallback)((e) => {
+        if (e.button !== 0) {
+            return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+    }, []);
+    const onPointerCancel = (0, react_1.useCallback)(() => {
+        pointerDownPositionRef.current = null;
+    }, []);
+    const isActive = selected || hoveredGuideId === guide.id;
+    const activeClassName = isActive ? '__remotion_editor_guide_selected' : null;
+    const guideClassName = (0, react_1.useMemo)(() => {
+        return ['__remotion_editor_guide_content', activeClassName]
+            .filter(no_react_1.NoReactInternals.truthy)
+            .join(' ');
+    }, [activeClassName]);
     const values = (0, react_1.useMemo)(() => {
         return [
             {
@@ -66,12 +172,15 @@ const GuideComp = ({ guide, canvasDimensions, scale }) => {
                 leftItem: null,
                 onClick: () => {
                     setGuidesList((prevState) => {
-                        const newGuides = prevState.filter((selected) => {
-                            return selected.id !== guide.id;
+                        const newGuides = prevState.filter((candidate) => {
+                            return candidate.id !== guide.id;
                         });
                         (0, editor_guides_1.persistGuidesList)(newGuides);
                         return newGuides;
                     });
+                    if (selected) {
+                        clearSelection();
+                    }
                 },
                 quickSwitcherLabel: null,
                 subMenu: null,
@@ -79,14 +188,7 @@ const GuideComp = ({ guide, canvasDimensions, scale }) => {
                 value: 'remove',
             },
         ];
-    }, [guide.id, setGuidesList]);
-    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: values, onOpen: null, children: jsx_runtime_1.jsx("div", { style: guideStyle, onMouseDown: onMouseDown, className: "__remotion_editor_guide", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsx("div", { style: guideContentStyle, className: [
-                    '__remotion_editor_guide_content',
-                    selectedGuideId === guide.id || hoveredGuideId === guide.id
-                        ? '__remotion_editor_guide_selected'
-                        : null,
-                ]
-                    .filter(no_react_1.NoReactInternals.truthy)
-                    .join(' ') }) }) }));
+    }, [clearSelection, guide.id, selected, setGuidesList]);
+    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: values, onOpen: null, children: jsx_runtime_1.jsx("div", { style: guideStyle, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerCancel, onMouseDown: onMouseDown, onMouseMove: onMouseMove, onMouseUp: onMouseUp, onClick: onClick, className: "__remotion_editor_guide", [should_clear_selection_on_pointer_down_1.PREVENT_CLEAR_SELECTION_ON_POINTER_DOWN_ATTR]: 'true', onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsx("div", { style: guideContentStyle, className: guideClassName }) }) }));
 };
 exports.default = (0, react_1.memo)(GuideComp);

package/dist/components/EditorRuler/Ruler.js

@@ -4,26 +4,32 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const colors_1 = require("../../helpers/colors");
+const editor_guide_selection_1 = require("../../helpers/editor-guide-selection");
 const editor_ruler_1 = require("../../helpers/editor-ruler");
 const editor_guides_1 = require("../../state/editor-guides");
 const editor_rulers_1 = require("../../state/editor-rulers");
 const ForceSpecificCursor_1 = require("../ForceSpecificCursor");
+const should_clear_selection_on_pointer_down_1 = require("../Timeline/should-clear-selection-on-pointer-down");
+const TimelineSelection_1 = require("../Timeline/TimelineSelection");
 const makeGuideId = () => {
     return Math.random().toString(36).substring(7);
 };
 const Ruler = ({ scale, points, originOffset, startMarking, size, markingGaps, orientation, }) => {
     const rulerCanvasRef = (0, react_1.useRef)(null);
     const isVerticalRuler = orientation === 'vertical';
-    const { shouldCreateGuideRef, setGuidesList, selectedGuideId, hoveredGuideId, setSelectedGuideId, guidesList, setEditorShowGuides, } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
+    const { shouldCreateGuideRef, setGuidesList, draggingGuideId, hoveredGuideId, setDraggingGuideId, guidesList, setEditorShowGuides, } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
+    const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
     const unsafeVideoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     if (!unsafeVideoConfig) {
         throw new Error('Video config not set');
     }
     const [cursor, setCursor] = (0, react_1.useState)(isVerticalRuler ? 'ew-resize' : 'ns-resize');
-    const selectedOrHoveredGuide = (0, react_1.useMemo)(() => {
-        var _a, _b;
-        return ((_b = (_a = guidesList.find((guide) => guide.id === selectedGuideId)) !== null && _a !== void 0 ? _a : guidesList.find((guide) => guide.id === hoveredGuideId)) !== null && _b !== void 0 ? _b : null);
-    }, [guidesList, hoveredGuideId, selectedGuideId]);
+    const guideHighlight = (0, react_1.useMemo)(() => (0, editor_guide_selection_1.getRulerGuideHighlight)({
+        guidesList,
+        selectedItems,
+        hoveredGuideId,
+        draggingGuideId,
+    }), [draggingGuideId, guidesList, hoveredGuideId, selectedItems]);
     const rulerWidth = isVerticalRuler ? editor_rulers_1.RULER_WIDTH : size.width - editor_rulers_1.RULER_WIDTH;
     const rulerHeight = isVerticalRuler ? size.height - editor_rulers_1.RULER_WIDTH : editor_rulers_1.RULER_WIDTH;
     (0, react_1.useEffect)(() => {
@@ -35,7 +41,7 @@ const Ruler = ({ scale, points, originOffset, startMarking, size, markingGaps, o
             markingGaps,
             orientation,
             rulerCanvasRef,
-            selectedGuide: selectedOrHoveredGuide,
+            guideHighlight,
             canvasHeight: rulerHeight * window.devicePixelRatio,
             canvasWidth: rulerWidth * window.devicePixelRatio,
         });
@@ -46,7 +52,7 @@ const Ruler = ({ scale, points, originOffset, startMarking, size, markingGaps, o
         originOffset,
         markingGaps,
         orientation,
-        selectedOrHoveredGuide,
+        guideHighlight,
         size,
         rulerHeight,
         rulerWidth,
@@ -62,7 +68,7 @@ const Ruler = ({ scale, points, originOffset, startMarking, size, markingGaps, o
         borderRight: isVerticalRuler ? '1px solid ' + colors_1.RULER_COLOR : undefined,
         cursor,
     }), [rulerWidth, rulerHeight, cursor, isVerticalRuler]);
-    const onMouseDown = (0, react_1.useCallback)((e) => {
+    const onPointerDown = (0, react_1.useCallback)((e) => {
         if (e.button !== 0) {
             return;
         }
@@ -73,7 +79,7 @@ const Ruler = ({ scale, points, originOffset, startMarking, size, markingGaps, o
         (0, ForceSpecificCursor_1.forceSpecificCursor)('no-drop');
         const guideId = makeGuideId();
         setEditorShowGuides(() => true);
-        setSelectedGuideId(() => guideId);
+        setDraggingGuideId(() => guideId);
         setGuidesList((prevState) => {
             return [
                 ...prevState,
@@ -89,7 +95,7 @@ const Ruler = ({ scale, points, originOffset, startMarking, size, markingGaps, o
     }, [
         shouldCreateGuideRef,
         setEditorShowGuides,
-        setSelectedGuideId,
+        setDraggingGuideId,
         setGuidesList,
         orientation,
         originOffset,
@@ -97,15 +103,15 @@ const Ruler = ({ scale, points, originOffset, startMarking, size, markingGaps, o
     ]);
     const changeCursor = (0, react_1.useCallback)((e) => {
         e.preventDefault();
-        if (selectedGuideId !== null) {
+        if (draggingGuideId !== null) {
             setCursor('no-drop');
         }
-    }, [setCursor, selectedGuideId]);
+    }, [setCursor, draggingGuideId]);
     (0, react_1.useEffect)(() => {
-        if (selectedGuideId === null) {
+        if (draggingGuideId === null) {
             setCursor(isVerticalRuler ? 'ew-resize' : 'ns-resize');
         }
-    }, [selectedGuideId, isVerticalRuler]);
-    return (jsx_runtime_1.jsx("canvas", { ref: rulerCanvasRef, width: rulerWidth * window.devicePixelRatio, height: rulerHeight * window.devicePixelRatio, style: rulerStyle, onPointerDown: onMouseDown, onPointerEnter: changeCursor, onPointerLeave: changeCursor }));
+    }, [draggingGuideId, isVerticalRuler]);
+    return (jsx_runtime_1.jsx("canvas", { ref: rulerCanvasRef, width: rulerWidth * window.devicePixelRatio, height: rulerHeight * window.devicePixelRatio, style: rulerStyle, [should_clear_selection_on_pointer_down_1.PREVENT_CLEAR_SELECTION_ON_POINTER_DOWN_ATTR]: 'true', onPointerDown: onPointerDown, onPointerEnter: changeCursor, onPointerLeave: changeCursor }));
 };
 exports.default = Ruler;

package/dist/components/EditorRuler/index.js

@@ -12,6 +12,7 @@ const use_studio_canvas_dimensions_1 = require("../../helpers/use-studio-canvas-
 const editor_guides_1 = require("../../state/editor-guides");
 const editor_rulers_1 = require("../../state/editor-rulers");
 const ForceSpecificCursor_1 = require("../ForceSpecificCursor");
+const TimelineSelection_1 = require("../Timeline/TimelineSelection");
 const Ruler_1 = __importDefault(require("./Ruler"));
 const originBlockStyles = {
     position: 'absolute',
@@ -29,7 +30,8 @@ const EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerR
         contentDimensions,
         assetMetadata,
     });
-    const { shouldCreateGuideRef, shouldDeleteGuideRef, setGuidesList, selectedGuideId, setSelectedGuideId, } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
+    const { shouldCreateGuideRef, shouldDeleteGuideRef, setGuidesList, draggingGuideId, setDraggingGuideId, } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
+    const { clearSelection, selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
     const rulerMarkingGaps = (0, react_1.useMemo)(() => {
         const minimumGap = editor_rulers_1.MINIMUM_RULER_MARKING_GAP_PX;
         const predefinedGap = editor_rulers_1.PREDEFINED_RULER_SCALE_GAPS.find((gap) => gap * scale > minimumGap);
@@ -74,7 +76,7 @@ const EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerR
                 (0, ForceSpecificCursor_1.forceSpecificCursor)('no-drop');
                 setGuidesList((prevState) => {
                     const newGuides = prevState.map((guide) => {
-                        if (guide.id !== selectedGuideId) {
+                        if (guide.id !== draggingGuideId) {
                             return guide;
                         }
                         return {
@@ -93,7 +95,7 @@ const EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerR
                 setGuidesList((prevState) => {
                     // Intentionally no persist, only persist on mouse up
                     return prevState.map((guide) => {
-                        if (guide.id !== selectedGuideId) {
+                        if (guide.id !== draggingGuideId) {
                             return guide;
                         }
                         const position = guide.orientation === 'vertical'
@@ -116,7 +118,7 @@ const EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerR
         containerRef,
         shouldDeleteGuideRef,
         setGuidesList,
-        selectedGuideId,
+        draggingGuideId,
         scale,
         canvasPosition.left,
         canvasPosition.top,
@@ -127,27 +129,33 @@ const EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerR
                 if (!shouldDeleteGuideRef.current) {
                     return true;
                 }
-                return selected.id !== selectedGuideId;
+                return selected.id !== draggingGuideId;
             });
             (0, editor_guides_1.persistGuidesList)(newGuides);
             return newGuides;
         });
+        const deletedGuideWasSelected = selectedItems.some((item) => item.type === 'guide' && item.guideId === draggingGuideId);
+        if (shouldDeleteGuideRef.current && deletedGuideWasSelected) {
+            clearSelection();
+        }
         shouldDeleteGuideRef.current = false;
         (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
         shouldCreateGuideRef.current = false;
-        setSelectedGuideId(() => null);
+        setDraggingGuideId(() => null);
         document.removeEventListener('pointerup', onMouseUp);
         document.removeEventListener('pointermove', onMouseMove);
     }, [
-        selectedGuideId,
+        clearSelection,
+        draggingGuideId,
         shouldCreateGuideRef,
         shouldDeleteGuideRef,
-        setSelectedGuideId,
+        setDraggingGuideId,
         setGuidesList,
         onMouseMove,
+        selectedItems,
     ]);
     (0, react_1.useEffect)(() => {
-        if (selectedGuideId !== null) {
+        if (draggingGuideId !== null) {
             document.addEventListener('pointermove', onMouseMove);
             document.addEventListener('pointerup', onMouseUp);
         }
@@ -158,7 +166,7 @@ const EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerR
                 cancelAnimationFrame(requestAnimationFrameRef.current);
             }
         };
-    }, [selectedGuideId, onMouseMove, onMouseUp]);
+    }, [draggingGuideId, onMouseMove, onMouseUp]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx("div", { style: originBlockStyles }), jsx_runtime_1.jsx(Ruler_1.default, { orientation: "horizontal", scale: scale, points: horizontalRulerPoints, startMarking: horizontalRulerStartMarking, markingGaps: rulerMarkingGaps, originOffset: canvasPosition.left, size: canvasSize }), jsx_runtime_1.jsx(Ruler_1.default, { orientation: "vertical", scale: scale, points: verticalRulerPoints, startMarking: verticalRulerStartMarking, markingGaps: rulerMarkingGaps, originOffset: canvasPosition.top, size: canvasSize })
         ] }));

package/dist/components/GlobalKeybindings.js

@@ -40,6 +40,17 @@ const GlobalKeybindings = () => {
             commandCtrlKey: true,
             preventDefault: true,
         });
+        const cmdSKey = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 's',
+            callback: () => {
+                (0, NotificationCenter_1.showNotification)('Remotion saves automatically', 2000);
+            },
+            triggerIfInputFieldFocused: true,
+            keepRegisteredWhenNotHighestContext: false,
+            commandCtrlKey: true,
+            preventDefault: true,
+        });
         const cmdIKey = process.env.ASK_AI_ENABLED
             ? keybindings.registerKeybinding({
                 event: 'keydown',
@@ -103,6 +114,7 @@ const GlobalKeybindings = () => {
             cKey.unregister();
             questionMark.unregister();
             cmdKKey.unregister();
+            cmdSKey.unregister();
             cmdIKey === null || cmdIKey === void 0 ? void 0 : cmdIKey.unregister();
             pageDown.unregister();
             pageUp.unregister();

package/dist/components/KeyboardShortcutsExplainer.js

@@ -138,6 +138,30 @@ const KeyboardShortcutsExplainer = () => {
                                     jsx_runtime_1.jsxs("div", { style: left, children: [
                                             jsx_runtime_1.jsx("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), jsx_runtime_1.jsx("kbd", { style: key, children: "Y" })
                                         ] }), jsx_runtime_1.jsx("div", { style: right, children: "Redo" })
+                                ] }), jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsx("div", { style: title, children: "Interactivity" }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
+                                    jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "Shift" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Select range / axis lock drag" })
+                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
+                                    jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }) }), jsx_runtime_1.jsx("div", { style: right, children: "Toggle selection" })
+                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
+                                    jsx_runtime_1.jsxs("div", { style: left, children: [
+                                            jsx_runtime_1.jsx("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), jsx_runtime_1.jsx("kbd", { style: key, children: "A" })
+                                        ] }), jsx_runtime_1.jsx("div", { style: right, children: "Select sequence rows" })
+                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
+                                    jsx_runtime_1.jsxs("div", { style: left, children: [
+                                            jsx_runtime_1.jsx("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), jsx_runtime_1.jsx("kbd", { style: key, children: "D" })
+                                        ] }), jsx_runtime_1.jsx("div", { style: right, children: "Duplicate sequences" })
+                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
+                                    jsx_runtime_1.jsxs("div", { style: left, children: [
+                                            jsx_runtime_1.jsx("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), jsx_runtime_1.jsx("kbd", { style: key, children: "C" })
+                                        ] }), jsx_runtime_1.jsx("div", { style: right, children: "Copy effects / values" })
+                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
+                                    jsx_runtime_1.jsxs("div", { style: left, children: [
+                                            jsx_runtime_1.jsx("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), jsx_runtime_1.jsx("kbd", { style: key, children: "V" })
+                                        ] }), jsx_runtime_1.jsx("div", { style: right, children: "Paste effects / values" })
+                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
+                                    jsx_runtime_1.jsxs("div", { style: left, children: [
+                                            jsx_runtime_1.jsx("kbd", { style: key, children: "Del" }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), jsx_runtime_1.jsx("kbd", { style: key, children: "\u232B" })
+                                        ] }), jsx_runtime_1.jsx("div", { style: right, children: "Delete / reset selection" })
                                 ] }), process.env.ASK_AI_ENABLED && (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                                     jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsx("div", { style: title, children: "AI" }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
                                             jsx_runtime_1.jsxs("div", { style: left, children: [

package/dist/components/NewComposition/InputDragger.d.ts

@@ -1,6 +1,11 @@
 import type { InputHTMLAttributes } from 'react';
 import React from 'react';
 import type { RemInputStatus } from './RemInput';
+export declare const deriveInputDraggerStep: ({ min, snapToStep, step, }: {
+    readonly min: string | number | undefined;
+    readonly snapToStep: boolean;
+    readonly step: string | number | undefined;
+}) => string | number;
 export declare const InputDragger: React.ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
     readonly onValueChange: (newVal: number) => void;
     readonly onValueChangeEnd?: ((newVal: number) => void) | undefined;
@@ -10,4 +15,5 @@ export declare const InputDragger: React.ForwardRefExoticComponent<InputHTMLAttr
     readonly rightAlign: boolean;
     readonly small?: boolean | undefined;
     readonly snapToStep?: boolean | undefined;
+    readonly dragDecimalPlaces?: number | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;