@remotion/studio 4.0.502 → 4.0.504

package/dist/components/ControlButton.js

@@ -1,27 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ControlButton = exports.CONTROL_BUTTON_SIZE = exports.CONTROL_BUTTON_PADDING = void 0;
+exports.ControlButton = 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");
+const colors_1 = require("../helpers/colors");
+const InlineAction_1 = require("./InlineAction");
 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,
-            flexShrink: 0,
-            background: 'none',
-            border: 'none',
-            padding: 0,
-        };
-    }, [props.disabled]);
-    const { tabIndex } = (0, z_index_1.useZIndex)();
-    return (jsx_runtime_1.jsx("button", { type: 'button', tabIndex: tabIndex, ...props, style: style }));
+    const { children, onClick, title, ...buttonProps } = props;
+    const renderAction = typeof children === 'function' ? children : () => children;
+    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { ...buttonProps, title: title, onClick: onClick, renderAction: renderAction, variant: null, unhoveredColor: colors_1.WHITE_ALPHA_80 }));
 };
 exports.ControlButton = ControlButton;

package/dist/components/Editor.js

@@ -46,14 +46,12 @@ 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 canvas_capture_enabled_1 = require("./canvas-capture-enabled");
 const EditorContent_1 = require("./EditorContent");
 const ForceSpecificCursor_1 = require("./ForceSpecificCursor");
 const Modals_1 = require("./Modals");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const RenderErrorContext_1 = require("./RenderErrorContext");
 const SequencePropsSubscriptionProvider_1 = require("./SequencePropsSubscriptionProvider");
-const StudioCanvasCapture_1 = require("./StudioCanvasCapture");
 const TopPanel_1 = require("./TopPanel");
 const background = {
     backgroundColor: colors_1.BACKGROUND,
@@ -94,13 +92,12 @@ const Editor = ({ Root, readOnlyStudio }) => {
     }, []);
     const compositionRenderErrorContextValue = (0, react_1.useMemo)(() => ({ setError: setRenderError, clearError }), [clearError]);
     const renderErrorContextValue = (0, react_1.useMemo)(() => ({ error: renderError }), [renderError]);
-    const editor = (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: [
+    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.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.jsx(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: (0, studio_runtime_config_1.getStudioBufferStateDelayInMilliseconds)(), onMounted: onMounted, readOnlyStudio: readOnlyStudio }) }) }) })
                                     ] }) })
                         ] }), jsx_runtime_1.jsx(Modals_1.Modals, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(NotificationCenter_1.NotificationCenter, {})
                 ] }) }) }));
-    return canvas_capture_enabled_1.CANVAS_CAPTURE_ENABLED ? (jsx_runtime_1.jsx(StudioCanvasCapture_1.StudioCanvasCapture, { density: 1.5, children: editor })) : (editor);
 };
 exports.Editor = Editor;

package/dist/components/EditorContent.js

@@ -35,7 +35,7 @@ const StudioClearSelectionArea = ({ 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, maxFlexerSize: null, minFlexerSize: null, maxAntiFlexerSize: null, children: [
+    const content = (jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "horizontal", id: "top-to-bottom", maxFlex: 0.9, minFlex: 0.2, defaultFlex: 0.75, maxFlexerSize: null, minFlexerSize: null, maxAntiFlexerSize: null, minAntiFlexerSize: null, 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.jsx(TimelineSelection_1.TimelineSelectionProvider, { children: jsx_runtime_1.jsxs(StudioClearSelectionArea, { children: [

package/dist/components/EditorGuides/Guide.js

@@ -4,6 +4,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const no_react_1 = require("remotion/no-react");
 const editor_guide_selection_1 = require("../../helpers/editor-guide-selection");
+const pointer_session_1 = require("../../helpers/pointer-session");
 const editor_guides_1 = require("../../state/editor-guides");
 const editor_rulers_1 = require("../../state/editor-rulers");
 const ContextMenu_1 = require("../ContextMenu");
@@ -12,7 +13,7 @@ const should_clear_selection_on_pointer_down_1 = require("../Timeline/should-cle
 const TimelineSelection_1 = require("../Timeline/TimelineSelection");
 const PADDING_FOR_EASY_DRAG = 4;
 const GuideComp = ({ guide, canvasDimensions, scale }) => {
-    const { shouldCreateGuideRef, shouldDeleteGuideRef, setGuidesList, setDraggingGuideId, setHoveredGuideId, hoveredGuideId, draggingGuideId, } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
+    const { shouldCreateGuideRef, shouldDeleteGuideRef, setGuidesList, setDraggingGuideId, setHoveredGuideId, hoveredGuideId, draggingGuideId, moveGuidePointerRef, } = (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);
@@ -61,36 +62,6 @@ const GuideComp = ({ guide, canvasDimensions, scale }) => {
         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) {
@@ -105,12 +76,6 @@ const GuideComp = ({ guide, canvasDimensions, scale }) => {
             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) => {
@@ -136,43 +101,56 @@ const GuideComp = ({ guide, canvasDimensions, scale }) => {
         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) {
+    const onPointerDown = (0, react_1.useCallback)((e) => {
+        if (e.button !== 0) {
             return;
         }
-        if ((0, editor_guide_selection_1.isGuidePointerUpAClick)({
-            pointerDownPosition,
+        e.preventDefault();
+        e.stopPropagation();
+        hasMovedGuideRef.current = false;
+        pointerDownPositionRef.current = {
             guideId: guide.id,
             clientX: e.clientX,
             clientY: e.clientY,
-        })) {
-            onSelect();
-        }
-    }, [finishGuideInteraction, guide.id, onSelect, shouldDeleteGuideRef]);
+        };
+        shouldCreateGuideRef.current = false;
+        setDraggingGuideId(() => guide.id);
+        (0, pointer_session_1.startPointerSession)({
+            event: e.nativeEvent,
+            target: e.currentTarget,
+            onMove: (moveEvent) => {
+                var _a;
+                updateHasMovedGuide(moveEvent.clientX, moveEvent.clientY);
+                (_a = moveGuidePointerRef.current) === null || _a === void 0 ? void 0 : _a.call(moveGuidePointerRef, moveEvent);
+            },
+            onEnd: (reason, endEvent) => {
+                const pointerDownPosition = pointerDownPositionRef.current;
+                pointerDownPositionRef.current = null;
+                const shouldDeleteGuide = shouldDeleteGuideRef.current;
+                finishGuideInteraction();
+                if (shouldDeleteGuide || reason !== 'pointerup' || !endEvent) {
+                    return;
+                }
+                if ((0, editor_guide_selection_1.isGuidePointerUpAClick)({
+                    pointerDownPosition,
+                    guideId: guide.id,
+                    clientX: endEvent.clientX,
+                    clientY: endEvent.clientY,
+                })) {
+                    onSelect();
+                }
+            },
+        });
+    }, [
+        finishGuideInteraction,
+        guide.id,
+        moveGuidePointerRef,
+        onSelect,
+        setDraggingGuideId,
+        shouldCreateGuideRef,
+        shouldDeleteGuideRef,
+        updateHasMovedGuide,
+    ]);
     const onClick = (0, react_1.useCallback)((e) => {
         if (e.button !== 0) {
             return;
@@ -180,10 +158,6 @@ const GuideComp = ({ guide, canvasDimensions, scale }) => {
         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)(() => {
@@ -217,6 +191,6 @@ const GuideComp = ({ guide, canvasDimensions, scale }) => {
             },
         ];
     }, [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 }) }) }));
+    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: values, onOpen: null, children: jsx_runtime_1.jsx("div", { style: guideStyle, onPointerDown: onPointerDown, 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.d.ts

@@ -12,6 +12,7 @@ interface RulerProps {
     readonly markingGaps: number;
     readonly orientation: 'horizontal' | 'vertical';
     readonly size: Size;
+    readonly onPointerSessionStart: (event: React.PointerEvent<HTMLCanvasElement>, guideId: string) => void;
 }
 declare const Ruler: React.FC<RulerProps>;
 export default Ruler;

package/dist/components/EditorRuler/Ruler.js

@@ -14,7 +14,7 @@ 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 Ruler = ({ scale, points, originOffset, startMarking, size, markingGaps, orientation, onPointerSessionStart, }) => {
     const rulerCanvasRef = (0, react_1.useRef)(null);
     const isVerticalRuler = orientation === 'vertical';
     const { shouldCreateGuideRef, setGuidesList, draggingGuideId, hoveredGuideId, setDraggingGuideId, guidesList, setEditorShowGuides, } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
@@ -94,6 +94,7 @@ const Ruler = ({ scale, points, originOffset, startMarking, size, markingGaps, o
                 },
             ];
         });
+        onPointerSessionStart(e, guideId);
     }, [
         shouldCreateGuideRef,
         setEditorShowGuides,
@@ -103,6 +104,7 @@ const Ruler = ({ scale, points, originOffset, startMarking, size, markingGaps, o
         originOffset,
         unsafeVideoConfig.id,
         cursor,
+        onPointerSessionStart,
     ]);
     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 }));
 };

package/dist/components/EditorRuler/index.js

@@ -8,6 +8,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
 const editor_ruler_1 = require("../../helpers/editor-ruler");
+const pointer_session_1 = require("../../helpers/pointer-session");
 const use_studio_canvas_dimensions_1 = require("../../helpers/use-studio-canvas-dimensions");
 const editor_guides_1 = require("../../state/editor-guides");
 const editor_rulers_1 = require("../../state/editor-rulers");
@@ -30,7 +31,7 @@ const EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerR
         contentDimensions,
         assetMetadata,
     });
-    const { shouldCreateGuideRef, shouldDeleteGuideRef, setGuidesList, draggingGuideId, setDraggingGuideId, } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
+    const { shouldCreateGuideRef, shouldDeleteGuideRef, setGuidesList, draggingGuideId, moveGuidePointerRef, 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;
@@ -58,7 +59,7 @@ const EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerR
         scale,
     }), [verticalRulerScaleRange, rulerMarkingGaps, scale]);
     const requestAnimationFrameRef = (0, react_1.useRef)(null);
-    const onMouseMove = (0, react_1.useCallback)((e) => {
+    const onMouseMove = (0, react_1.useCallback)((e, guideId) => {
         if (requestAnimationFrameRef.current) {
             cancelAnimationFrame(requestAnimationFrameRef.current);
         }
@@ -75,7 +76,7 @@ const EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerR
                 }
                 setGuidesList((prevState) => {
                     const newGuides = prevState.map((guide) => {
-                        if (guide.id !== draggingGuideId) {
+                        if (guide.id !== guideId) {
                             return guide;
                         }
                         const desiredCursor = guide.orientation === 'vertical' ? 'ew-resize' : 'ns-resize';
@@ -96,7 +97,7 @@ const EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerR
                 setGuidesList((prevState) => {
                     // Intentionally no persist, only persist on mouse up
                     return prevState.map((guide) => {
-                        if (guide.id !== draggingGuideId) {
+                        if (guide.id !== guideId) {
                             return guide;
                         }
                         const position = guide.orientation === 'vertical'
@@ -119,24 +120,27 @@ const EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerR
         containerRef,
         shouldDeleteGuideRef,
         setGuidesList,
-        draggingGuideId,
         scale,
         canvasPosition.left,
         canvasPosition.top,
     ]);
-    const onMouseUp = (0, react_1.useCallback)(() => {
+    const finishGuideInteraction = (0, react_1.useCallback)((guideId) => {
+        if (requestAnimationFrameRef.current) {
+            cancelAnimationFrame(requestAnimationFrameRef.current);
+            requestAnimationFrameRef.current = null;
+        }
         const shouldDeleteGuide = shouldDeleteGuideRef.current;
         setGuidesList((prevState) => {
             const newGuides = prevState.filter((selected) => {
                 if (!shouldDeleteGuide) {
                     return true;
                 }
-                return selected.id !== draggingGuideId;
+                return selected.id !== guideId;
             });
             (0, editor_guides_1.persistGuidesList)(newGuides);
             return newGuides;
         });
-        const deletedGuideWasSelected = selectedItems.some((item) => item.type === 'guide' && item.guideId === draggingGuideId);
+        const deletedGuideWasSelected = selectedItems.some((item) => item.type === 'guide' && item.guideId === guideId);
         if (shouldDeleteGuide && deletedGuideWasSelected) {
             clearSelection();
         }
@@ -144,36 +148,35 @@ const EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerR
         (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
         shouldCreateGuideRef.current = false;
         setDraggingGuideId(() => null);
-        document.removeEventListener('pointerup', onMouseUp);
-        document.removeEventListener('pointercancel', onMouseUp);
-        document.removeEventListener('pointermove', onMouseMove);
     }, [
         clearSelection,
-        draggingGuideId,
         shouldCreateGuideRef,
         shouldDeleteGuideRef,
         setDraggingGuideId,
         setGuidesList,
-        onMouseMove,
         selectedItems,
     ]);
     (0, react_1.useLayoutEffect)(() => {
-        if (draggingGuideId !== null) {
-            document.addEventListener('pointermove', onMouseMove);
-            document.addEventListener('pointerup', onMouseUp);
-            document.addEventListener('pointercancel', onMouseUp);
-        }
+        moveGuidePointerRef.current = (event) => {
+            onMouseMove(event, draggingGuideId);
+        };
         return () => {
-            document.removeEventListener('pointermove', onMouseMove);
-            document.removeEventListener('pointerup', onMouseUp);
-            document.removeEventListener('pointercancel', onMouseUp);
+            moveGuidePointerRef.current = null;
             if (requestAnimationFrameRef.current) {
                 cancelAnimationFrame(requestAnimationFrameRef.current);
             }
         };
-    }, [draggingGuideId, onMouseMove, onMouseUp]);
+    }, [draggingGuideId, moveGuidePointerRef, onMouseMove]);
+    const onPointerSessionStart = (0, react_1.useCallback)((event, guideId) => {
+        (0, pointer_session_1.startPointerSession)({
+            event: event.nativeEvent,
+            target: event.currentTarget,
+            onMove: (moveEvent) => onMouseMove(moveEvent, guideId),
+            onEnd: () => finishGuideInteraction(guideId),
+        });
+    }, [finishGuideInteraction, onMouseMove]);
     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 })
+            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, onPointerSessionStart: onPointerSessionStart }), jsx_runtime_1.jsx(Ruler_1.default, { orientation: "vertical", scale: scale, points: verticalRulerPoints, startMarking: verticalRulerStartMarking, markingGaps: rulerMarkingGaps, originOffset: canvasPosition.top, size: canvasSize, onPointerSessionStart: onPointerSessionStart })
         ] }));
 };
 exports.EditorRulers = EditorRulers;

package/dist/components/EffectPickerModal.js

@@ -6,6 +6,8 @@ const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const use_keybinding_1 = require("../helpers/use-keybinding");
+const effects_1 = require("../icons/effects");
+const external_link_1 = require("../icons/external-link");
 const modals_1 = require("../state/modals");
 const ContextMenu_1 = require("./ContextMenu");
 const effect_drag_and_drop_1 = require("./effect-drag-and-drop");
@@ -16,13 +18,54 @@ const DismissableModal_1 = require("./NewComposition/DismissableModal");
 const RemInput_1 = require("./NewComposition/RemInput");
 const shared_1 = require("./QuickSwitcher/shared");
 const container = {
-    width: 500,
+    width: 400,
+};
+const panelStyle = {
+    borderRadius: 6,
+    overflow: 'hidden',
 };
 const content = {
     padding: '12px 16px 10px',
 };
 const inputStyle = {
     width: '100%',
+    borderRadius: 4,
+};
+const aboutEffectsRow = {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    marginBottom: 8,
+};
+const aboutEffectsLink = {
+    alignItems: 'center',
+    color: colors_1.LIGHT_TEXT,
+    cursor: 'default',
+    display: 'inline-flex',
+    fontFamily: 'sans-serif',
+    fontSize: 12,
+    gap: 4,
+    lineHeight: '14px',
+    minWidth: 0,
+    textDecoration: 'none',
+};
+const aboutEffectsLinkHovered = {
+    ...aboutEffectsLink,
+    color: colors_1.WHITE,
+};
+const aboutEffectsLabel = {
+    color: 'inherit',
+    fontFamily: 'sans-serif',
+    fontSize: 12,
+    lineHeight: '14px',
+    minWidth: 0,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
+const aboutEffectsIcon = {
+    flexShrink: 0,
+    height: 12,
+    width: 12,
 };
 const resultList = {
     height: 320,
@@ -35,15 +78,28 @@ const noResults = {
     padding: '12px 16px',
 };
 const resultContainer = {
-    cursor: 'pointer',
+    cursor: 'default',
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
-    padding: '7px 16px',
+    paddingLeft: 16,
+    paddingRight: 16,
+    marginBottom: 1,
+    marginLeft: 4,
+    marginRight: 4,
+    borderRadius: 4,
+};
+const iconStyle = {
+    width: 18,
+    height: 18,
+    flexShrink: 0,
 };
 const labelContainer = {
     flex: 1,
     minWidth: 0,
+    overflow: 'hidden',
+    paddingTop: 5,
+    paddingBottom: 5,
 };
 const label = {
     fontSize: shared_1.QUICK_SWITCHER_RESULT_LABEL_FONT_SIZE,
@@ -63,7 +119,7 @@ const EffectPickerResult = ({ item, selected, onSelected }) => {
     const style = (0, react_1.useMemo)(() => {
         return {
             ...resultContainer,
-            backgroundColor: (0, colors_1.getBackgroundFromHoverState)({ hovered, selected }),
+            backgroundColor: hovered || selected ? colors_1.WHITE_ALPHA_06 : colors_1.TRANSPARENT,
         };
     }, [hovered, selected]);
     const labelStyle = (0, react_1.useMemo)(() => {
@@ -95,11 +151,12 @@ const EffectPickerResult = ({ item, selected, onSelected }) => {
         ];
     }, [item]);
     return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: null, children: jsx_runtime_1.jsxs("div", { ref: ref, style: style, onClick: onClick, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), children: [
-                jsx_runtime_1.jsx("div", { style: labelContainer, children: jsx_runtime_1.jsx("div", { style: labelStyle, children: item.label }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: category, children: item.category })
+                jsx_runtime_1.jsx(effects_1.EffectsIcon, { color: selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: labelContainer, children: jsx_runtime_1.jsx("div", { style: labelStyle, children: item.label }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: category, children: item.category })
             ] }) }));
 };
 const EffectPickerContent = ({ state }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const [aboutEffectsHovered, setAboutEffectsHovered] = (0, react_1.useState)(false);
     const [query, setQuery] = (0, react_1.useState)('');
     const [selectedIndex, setSelectedIndex] = (0, react_1.useState)(0);
     const inputRef = (0, react_1.useRef)(null);
@@ -168,12 +225,16 @@ const EffectPickerContent = ({ state }) => {
         setSelectedIndex(0);
     }, []);
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx("div", { style: content, children: jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: inputRef, type: "text", style: inputStyle, autoFocus: true, status: "ok", value: query, onChange: onTextChange, placeholder: "Search effects...", rightAlign: false }) }), jsx_runtime_1.jsx("div", { style: resultList, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: results.length === 0 ? (jsx_runtime_1.jsx("div", { style: noResults, children: "No effects found" })) : (results.map((item, i) => {
+            jsx_runtime_1.jsxs("div", { style: content, children: [
+                    jsx_runtime_1.jsx("div", { style: aboutEffectsRow, children: jsx_runtime_1.jsxs("a", { href: "https://remotion.dev/effects", target: "_blank", rel: "noopener noreferrer", style: aboutEffectsHovered ? aboutEffectsLinkHovered : aboutEffectsLink, onMouseEnter: () => setAboutEffectsHovered(true), onMouseLeave: () => setAboutEffectsHovered(false), children: [
+                                jsx_runtime_1.jsx("span", { style: aboutEffectsLabel, children: "About effects" }), jsx_runtime_1.jsx(external_link_1.ExternalLinkIcon, { "aria-hidden": "true", color: aboutEffectsHovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: aboutEffectsIcon })
+                            ] }) }), jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: inputRef, type: "text", style: inputStyle, autoFocus: true, status: "ok", value: query, onChange: onTextChange, placeholder: "Search effects...", rightAlign: false })
+                ] }), jsx_runtime_1.jsx("div", { style: resultList, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: results.length === 0 ? (jsx_runtime_1.jsx("div", { style: noResults, children: "No effects found" })) : (results.map((item, i) => {
                     return (jsx_runtime_1.jsx(EffectPickerResult, { item: item, selected: selectedIndexRounded === i, onSelected: selectItem }, item.id));
                 })) })
         ] }));
 };
 const EffectPickerModal = ({ state }) => {
-    return (jsx_runtime_1.jsx(DismissableModal_1.DismissableModal, { children: jsx_runtime_1.jsx(EffectPickerContent, { state: state }) }));
+    return (jsx_runtime_1.jsx(DismissableModal_1.DismissableModal, { panelStyle: panelStyle, children: jsx_runtime_1.jsx(EffectPickerContent, { state: state }) }));
 };
 exports.EffectPickerModal = EffectPickerModal;

package/dist/components/ElementInstallConfirmation.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export declare const ElementInstallConfirmation: React.FC<{
+    readonly displayName: string;
+    readonly sourceLabel: string;
+    readonly sourceIsUnverified: boolean;
+    readonly compositionId: string;
+    readonly filePath: string;
+    readonly overwritesExistingFile: boolean;
+    readonly dependenciesToReview: string[];
+    readonly missingPackages: string[];
+    readonly sourceCode: string;
+}>;