@remotion/studio 4.0.476 → 4.0.478

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/CanvasIfSizeIsAvailable.js

@@ -4,7 +4,7 @@ exports.CanvasIfSizeIsAvailable = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const editor_rulers_1 = require("../state/editor-rulers");
+const ruler_canvas_size_1 = require("../helpers/ruler-canvas-size");
 const CanvasOrLoading_1 = require("./CanvasOrLoading");
 const use_is_ruler_visible_1 = require("./EditorRuler/use-is-ruler-visible");
 const CanvasIfSizeIsAvailable = () => {
@@ -18,11 +18,7 @@ const CanvasIfSizeIsAvailable = () => {
         if (!size) {
             return null;
         }
-        return {
-            ...size,
-            width: size.width - editor_rulers_1.RULER_WIDTH,
-            height: size.height - editor_rulers_1.RULER_WIDTH,
-        };
+        return (0, ruler_canvas_size_1.applyRulerInsetsToCanvasSize)({ rulersAreVisible, size });
     }, [context, rulersAreVisible]);
     if (!sizeWithRulersApplied) {
         return null;

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,149 @@ 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 = false;
+        setDraggingGuideId(() => guide.id);
+    }, [guide.id, setDraggingGuideId, shouldCreateGuideRef]);
     const onMouseDown = (0, react_1.useCallback)((e) => {
+        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 = false;
+        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 finishGuideInteraction = (0, react_1.useCallback)(() => {
+        const shouldDeleteGuide = shouldDeleteGuideRef.current;
+        setGuidesList((prevState) => {
+            const newGuides = shouldDeleteGuide
+                ? prevState.filter((candidate) => candidate.id !== guide.id)
+                : prevState;
+            (0, editor_guides_1.persistGuidesList)(newGuides);
+            return newGuides;
+        });
+        if (shouldDeleteGuide && selected) {
+            clearSelection();
+        }
+        shouldDeleteGuideRef.current = false;
+        shouldCreateGuideRef.current = false;
+        (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
+        setDraggingGuideId(() => null);
+    }, [
+        clearSelection,
+        guide.id,
+        selected,
+        setDraggingGuideId,
+        setGuidesList,
+        shouldCreateGuideRef,
+        shouldDeleteGuideRef,
+    ]);
+    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;
+        const shouldDeleteGuide = shouldDeleteGuideRef.current;
+        finishGuideInteraction();
+        if (shouldDeleteGuide) {
+            return;
+        }
+        if ((0, editor_guide_selection_1.isGuidePointerUpAClick)({
+            pointerDownPosition,
+            guideId: guide.id,
+            clientX: e.clientX,
+            clientY: e.clientY,
+        })) {
+            onSelect();
+        }
+    }, [finishGuideInteraction, guide.id, onSelect, shouldDeleteGuideRef]);
+    const onMouseUp = (0, react_1.useCallback)((e) => {
+        const pointerDownPosition = pointerDownPositionRef.current;
+        pointerDownPositionRef.current = null;
+        const shouldDeleteGuide = shouldDeleteGuideRef.current;
+        finishGuideInteraction();
+        if (shouldDeleteGuide) {
+            return;
+        }
+        if ((0, editor_guide_selection_1.isGuidePointerUpAClick)({
+            pointerDownPosition,
+            guideId: guide.id,
+            clientX: e.clientX,
+            clientY: e.clientY,
+        })) {
+            onSelect();
+        }
+    }, [finishGuideInteraction, guide.id, onSelect, shouldDeleteGuideRef]);
+    const onClick = (0, react_1.useCallback)((e) => {
         if (e.button !== 0) {
             return;
         }
-        shouldCreateGuideRef.current = true;
-        (0, ForceSpecificCursor_1.forceSpecificCursor)('no-drop');
-        setSelectedGuideId(() => guide.id);
-    }, [shouldCreateGuideRef, setSelectedGuideId, guide.id]);
+        e.preventDefault();
+        e.stopPropagation();
+    }, []);
+    const onPointerCancel = (0, react_1.useCallback)(() => {
+        pointerDownPositionRef.current = null;
+        finishGuideInteraction();
+    }, [finishGuideInteraction]);
+    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 +200,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 +216,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 cursor = isVerticalRuler ? 'ew-resize' : 'ns-resize';
+    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;
         }
@@ -70,10 +76,10 @@ const Ruler = ({ scale, points, originOffset, startMarking, size, markingGaps, o
         // Prevent deselection of currently selected items
         e.stopPropagation();
         shouldCreateGuideRef.current = true;
-        (0, ForceSpecificCursor_1.forceSpecificCursor)('no-drop');
+        (0, ForceSpecificCursor_1.forceSpecificCursor)(cursor);
         const guideId = makeGuideId();
         setEditorShowGuides(() => true);
-        setSelectedGuideId(() => guideId);
+        setDraggingGuideId(() => guideId);
         setGuidesList((prevState) => {
             return [
                 ...prevState,
@@ -89,23 +95,13 @@ const Ruler = ({ scale, points, originOffset, startMarking, size, markingGaps, o
     }, [
         shouldCreateGuideRef,
         setEditorShowGuides,
-        setSelectedGuideId,
+        setDraggingGuideId,
         setGuidesList,
         orientation,
         originOffset,
         unsafeVideoConfig.id,
+        cursor,
     ]);
-    const changeCursor = (0, react_1.useCallback)((e) => {
-        e.preventDefault();
-        if (selectedGuideId !== null) {
-            setCursor('no-drop');
-        }
-    }, [setCursor, selectedGuideId]);
-    (0, react_1.useEffect)(() => {
-        if (selectedGuideId === 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 }));
+    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 }));
 };
 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);
@@ -71,12 +73,13 @@ const EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerR
                 if (!shouldDeleteGuideRef.current) {
                     shouldDeleteGuideRef.current = true;
                 }
-                (0, ForceSpecificCursor_1.forceSpecificCursor)('no-drop');
                 setGuidesList((prevState) => {
                     const newGuides = prevState.map((guide) => {
-                        if (guide.id !== selectedGuideId) {
+                        if (guide.id !== draggingGuideId) {
                             return guide;
                         }
+                        const desiredCursor = guide.orientation === 'vertical' ? 'ew-resize' : 'ns-resize';
+                        (0, ForceSpecificCursor_1.forceSpecificCursor)(desiredCursor);
                         return {
                             ...guide,
                             show: false,
@@ -93,7 +96,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,49 +119,59 @@ const EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerR
         containerRef,
         shouldDeleteGuideRef,
         setGuidesList,
-        selectedGuideId,
+        draggingGuideId,
         scale,
         canvasPosition.left,
         canvasPosition.top,
     ]);
     const onMouseUp = (0, react_1.useCallback)(() => {
+        const shouldDeleteGuide = shouldDeleteGuideRef.current;
         setGuidesList((prevState) => {
             const newGuides = prevState.filter((selected) => {
-                if (!shouldDeleteGuideRef.current) {
+                if (!shouldDeleteGuide) {
                     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 (shouldDeleteGuide && deletedGuideWasSelected) {
+            clearSelection();
+        }
         shouldDeleteGuideRef.current = false;
         (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
         shouldCreateGuideRef.current = false;
-        setSelectedGuideId(() => null);
+        setDraggingGuideId(() => null);
         document.removeEventListener('pointerup', onMouseUp);
+        document.removeEventListener('pointercancel', onMouseUp);
         document.removeEventListener('pointermove', onMouseMove);
     }, [
-        selectedGuideId,
+        clearSelection,
+        draggingGuideId,
         shouldCreateGuideRef,
         shouldDeleteGuideRef,
-        setSelectedGuideId,
+        setDraggingGuideId,
         setGuidesList,
         onMouseMove,
+        selectedItems,
     ]);
-    (0, react_1.useEffect)(() => {
-        if (selectedGuideId !== null) {
+    (0, react_1.useLayoutEffect)(() => {
+        if (draggingGuideId !== null) {
             document.addEventListener('pointermove', onMouseMove);
             document.addEventListener('pointerup', onMouseUp);
+            document.addEventListener('pointercancel', onMouseUp);
         }
         return () => {
             document.removeEventListener('pointermove', onMouseMove);
             document.removeEventListener('pointerup', onMouseUp);
+            document.removeEventListener('pointercancel', onMouseUp);
             if (requestAnimationFrameRef.current) {
                 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/InlineAction.js

@@ -22,6 +22,7 @@ const InlineAction = ({ renderAction, onClick, disabled, title, }) => {
                 : (0, colors_1.getBackgroundFromHoverState)({ hovered, selected: false }),
             height: 24,
             width: 24,
+            padding: 0,
             display: 'inline-flex',
             justifyContent: 'center',
             alignItems: 'center',

package/dist/components/MenuToolbar.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+export declare const MENU_TOOLBAR_HEIGHT = 30;
 export declare const MenuToolbar: React.FC<{
     readonly readOnlyStudio: boolean;
 }>;

package/dist/components/MenuToolbar.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MenuToolbar = void 0;
+exports.MenuToolbar = exports.MENU_TOOLBAR_HEIGHT = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
@@ -12,13 +12,16 @@ const MenuBuildIndicator_1 = require("./MenuBuildIndicator");
 const SidebarCollapserControls_1 = require("./SidebarCollapserControls");
 const UndoRedoButtons_1 = require("./UndoRedoButtons");
 const UpdateCheck_1 = require("./UpdateCheck");
+exports.MENU_TOOLBAR_HEIGHT = 30;
 const row = {
     alignItems: 'center',
     flexDirection: 'row',
     display: 'flex',
     color: 'white',
     borderBottom: '1px solid black',
+    boxSizing: 'border-box',
     fontSize: 13,
+    height: exports.MENU_TOOLBAR_HEIGHT,
     paddingLeft: 6,
     paddingRight: 10,
     backgroundColor: colors_1.BACKGROUND,

package/dist/components/OutlineToggle.js

@@ -15,6 +15,6 @@ const OutlineToggle = () => {
     const accessibilityLabel = editorShowOutlines
         ? 'Hide outlines'
         : 'Show outlines';
-    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: jsx_runtime_1.jsx("svg", { style: { width: 16, height: 16 }, viewBox: "0 0 512 512", fill: color, "aria-hidden": "true", focusable: "false", children: jsx_runtime_1.jsx("path", { d: "M32 119.4C12.9 108.4 0 87.7 0 64 0 28.7 28.7 0 64 0 87.7 0 108.4 12.9 119.4 32l273.1 0c11.1-19.1 31.7-32 55.4-32 35.3 0 64 28.7 64 64 0 23.7-12.9 44.4-32 55.4l0 273.1c19.1 11.1 32 31.7 32 55.4 0 35.3-28.7 64-64 64-23.7 0-44.4-12.9-55.4-32l-273.1 0c-11.1 19.1-31.7 32-55.4 32-35.3 0-64-28.7-64-64 0-23.7 12.9-44.4 32-55.4l0-273.1zm64 0l0 273.1c9.7 5.6 17.8 13.7 23.4 23.4l273.1 0c5.6-9.7 13.7-17.8 23.4-23.4l0-273.1c-9.7-5.6-17.8-13.7-23.4-23.4L119.4 96c-5.6 9.7-13.7 17.8-23.4 23.4z" }) }) }));
+    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: jsx_runtime_1.jsx("svg", { style: { width: 18, height: 18 }, viewBox: "0 0 512 512", fill: color, "aria-hidden": "true", focusable: "false", children: jsx_runtime_1.jsx("path", { d: "M32 119.4C12.9 108.4 0 87.7 0 64 0 28.7 28.7 0 64 0 87.7 0 108.4 12.9 119.4 32l273.1 0c11.1-19.1 31.7-32 55.4-32 35.3 0 64 28.7 64 64 0 23.7-12.9 44.4-32 55.4l0 273.1c19.1 11.1 32 31.7 32 55.4 0 35.3-28.7 64-64 64-23.7 0-44.4-12.9-55.4-32l-273.1 0c-11.1 19.1-31.7 32-55.4 32-35.3 0-64-28.7-64-64 0-23.7 12.9-44.4 32-55.4l0-273.1zm64 0l0 273.1c9.7 5.6 17.8 13.7 23.4 23.4l273.1 0c5.6-9.7 13.7-17.8 23.4-23.4l0-273.1c-9.7-5.6-17.8-13.7-23.4-23.4L119.4 96c-5.6 9.7-13.7 17.8-23.4 23.4z" }) }) }));
 };
 exports.OutlineToggle = OutlineToggle;

package/dist/components/SelectedOutlineElement.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { SelectedOutline } from './selected-outline-geometry';
+import { type SelectedOutlineDragTarget, type SelectedOutlineRotationDragTarget, type SelectedOutlineScaleDragTarget, type SelectedOutlineTarget } from './selected-outline-types';
+import type { TimelineSelection, TimelineSelectionInteraction } from './Timeline/TimelineSelection';
+export declare const SelectedOutlineElement: React.FC<{
+    readonly allDragTargets: readonly SelectedOutlineDragTarget[];
+    readonly allRotationDragTargets: readonly SelectedOutlineRotationDragTarget[];
+    readonly allScaleDragTargets: readonly SelectedOutlineScaleDragTarget[];
+    readonly dragging: boolean;
+    readonly hovered: boolean;
+    readonly outline: SelectedOutline;
+    readonly onDraggingChange: (dragging: boolean) => void;
+    readonly onHoverChange: (key: string | null) => void;
+    readonly onSelect: (item: TimelineSelection, interaction: TimelineSelectionInteraction) => void;
+    readonly scale: number;
+    readonly target: SelectedOutlineTarget | undefined;
+}>;