@remotion/studio 4.0.502 → 4.0.504

package/dist/components/RenderModal/render-modals.js

@@ -4,8 +4,8 @@ exports.flexer = exports.buttonStyle = exports.icon = exports.iconContainer = ex
 const colors_1 = require("../../helpers/colors");
 const ModalContainer_1 = require("../ModalContainer");
 exports.outerModalStyle = {
-    width: (0, ModalContainer_1.getMaxModalWidth)(1000),
-    height: (0, ModalContainer_1.getMaxModalHeight)(640),
+    width: (0, ModalContainer_1.getMaxModalWidth)(800),
+    height: (0, ModalContainer_1.getMaxModalHeight)(490),
     overflow: 'hidden',
     display: 'flex',
     flexDirection: 'column',
@@ -19,7 +19,8 @@ exports.container = {
 };
 exports.optionsPanel = {
     display: 'flex',
-    width: '100%',
+    flex: 1,
+    minWidth: 0,
 };
 exports.horizontalLayout = {
     display: 'flex',
@@ -28,31 +29,33 @@ exports.horizontalLayout = {
     flex: 1,
 };
 exports.leftSidebar = {
-    padding: 12,
+    padding: 6,
 };
 exports.horizontalTab = {
-    width: 250,
+    width: 150,
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
     textAlign: 'left',
-    fontSize: 16,
-    fontWeight: 'bold',
-    paddingLeft: 15,
-    paddingTop: 12,
-    paddingBottom: 12,
+    fontSize: 14,
+    fontWeight: 'normal',
+    paddingLeft: 8,
+    paddingTop: 6,
+    paddingBottom: 6,
+    borderRadius: 4,
 };
 exports.iconContainer = {
-    width: 20,
-    height: 20,
-    marginRight: 15,
+    width: 18,
+    height: 18,
+    marginRight: 8,
+    color: 'inherit',
     display: 'inline-flex',
     justifyContent: 'center',
     alignItems: 'center',
 };
 exports.icon = {
-    color: colors_1.CURRENT_COLOR_LOWERCASE,
-    height: 20,
+    color: 'inherit',
+    height: 18,
 };
 exports.buttonStyle = {
     backgroundColor: colors_1.BLUE,

package/dist/components/RenderQueue/RenderQueueCopyToClipboard.js

@@ -53,6 +53,6 @@ const RenderQueueCopyToClipboard = ({ job }) => {
             (0, NotificationCenter_1.showNotification)(`Could not copy to clipboard: ${err.message}`, 2000);
         }
     }, [job.outName]);
-    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { title: "Copy to clipboard", renderAction: renderCopyAction, onClick: onClick }));
+    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, title: "Copy to clipboard", renderAction: renderCopyAction, onClick: onClick }));
 };
 exports.RenderQueueCopyToClipboard = RenderQueueCopyToClipboard;

package/dist/components/RenderQueue/RenderQueueDownloadItem.js

@@ -31,6 +31,6 @@ const RenderQueueDownloadItem = ({ job }) => {
     const renderAction = (0, react_1.useCallback)((color) => {
         return (jsx_runtime_1.jsx("svg", { style: icon, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 242.7-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7 288 32zM64 352c-35.3 0-64 28.7-64 64l0 32c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-32c0-35.3-28.7-64-64-64l-101.5 0-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352 64 352zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z" }) }));
     }, [icon]);
-    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick, title: "Download" }));
+    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, renderAction: renderAction, onClick: onClick, title: "Download" }));
 };
 exports.RenderQueueDownloadItem = RenderQueueDownloadItem;

package/dist/components/RenderQueue/RenderQueueItemCancelButton.js

@@ -30,6 +30,6 @@ const RenderQueueCancelButton = ({ job }) => {
     const renderAction = (0, react_1.useCallback)((color) => {
         return (jsx_runtime_1.jsx("svg", { style: icon, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M367.2 412.5L99.5 144.8C77.1 176.1 64 214.5 64 256c0 106 86 192 192 192c41.5 0 79.9-13.1 111.2-35.5zm45.3-45.3C434.9 335.9 448 297.5 448 256c0-106-86-192-192-192c-41.5 0-79.9 13.1-111.2 35.5L412.5 367.2zM512 256c0 141.4-114.6 256-256 256S0 397.4 0 256S114.6 0 256 0S512 114.6 512 256z" }) }));
     }, [icon]);
-    return jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick });
+    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick, variant: null }));
 };
 exports.RenderQueueCancelButton = RenderQueueCancelButton;

package/dist/components/RenderQueue/RenderQueueOpenInFolder.js

@@ -24,6 +24,6 @@ const RenderQueueOpenInFinderItem = ({ job }) => {
     const renderAction = (0, react_1.useCallback)((color) => {
         return jsx_runtime_1.jsx(folder_1.ExpandedFolderIconSolid, { style: icon, color: color });
     }, [icon]);
-    return jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick });
+    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick, variant: null }));
 };
 exports.RenderQueueOpenInFinderItem = RenderQueueOpenInFinderItem;

package/dist/components/RenderQueue/RenderQueueRemoveItem.js

@@ -46,6 +46,6 @@ const RenderQueueRemoveItem = ({ job }) => {
     const renderAction = (0, react_1.useCallback)((color) => {
         return (jsx_runtime_1.jsx("svg", { style: icon, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z" }) }));
     }, [icon]);
-    return jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick });
+    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick, variant: null }));
 };
 exports.RenderQueueRemoveItem = RenderQueueRemoveItem;

package/dist/components/RenderQueue/RenderQueueRepeat.js

@@ -4,16 +4,12 @@ exports.RenderQueueRepeatItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
-const mobile_layout_1 = require("../../helpers/mobile-layout");
 const retry_payload_1 = require("../../helpers/retry-payload");
 const modals_1 = require("../../state/modals");
-const sidebar_1 = require("../../state/sidebar");
 const InlineAction_1 = require("../InlineAction");
 const context_1 = require("./context");
 const RenderQueueRepeatItem = ({ job }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
-    const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
-    const { setSidebarCollapsedState } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     const isClientJob = (0, context_1.isClientRenderJob)(job);
     const onClick = (0, react_1.useCallback)((e) => {
         e.stopPropagation();
@@ -25,16 +21,7 @@ const RenderQueueRepeatItem = ({ job }) => {
             const retryPayload = (0, retry_payload_1.makeRetryPayload)(job);
             setSelectedModal(retryPayload);
         }
-        if (isMobileLayout) {
-            setSidebarCollapsedState({ left: 'collapsed', right: 'collapsed' });
-        }
-    }, [
-        isMobileLayout,
-        job,
-        isClientJob,
-        setSelectedModal,
-        setSidebarCollapsedState,
-    ]);
+    }, [job, isClientJob, setSelectedModal]);
     const icon = (0, react_1.useMemo)(() => {
         return {
             height: 12,
@@ -44,6 +31,6 @@ const RenderQueueRepeatItem = ({ job }) => {
     const renderAction = (0, react_1.useCallback)((color) => {
         return (jsx_runtime_1.jsx("svg", { style: icon, viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M386.3 160H336c-17.7 0-32 14.3-32 32s14.3 32 32 32H464c17.7 0 32-14.3 32-32V64c0-17.7-14.3-32-32-32s-32 14.3-32 32v51.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0s-87.5 229.3 0 316.8s229.3 87.5 316.8 0c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0c-62.5 62.5-163.8 62.5-226.3 0s-62.5-163.8 0-226.3s163.8-62.5 226.3 0L386.3 160z" }) }));
     }, [icon]);
-    return jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: onClick, renderAction: renderAction });
+    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: onClick, renderAction: renderAction, variant: null }));
 };
 exports.RenderQueueRepeatItem = RenderQueueRepeatItem;

package/dist/components/SelectedOutlineCropControls.js

@@ -38,6 +38,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
+const pointer_session_1 = require("../helpers/pointer-session");
 const ForceSpecificCursor_1 = require("./ForceSpecificCursor");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const selected_outline_drag_1 = require("./selected-outline-drag");
@@ -232,9 +233,6 @@ const CropHandle = ({ handle, outline, onDraggingChange, target }) => {
             }
         };
         const onPointerUp = () => {
-            window.removeEventListener('pointermove', onPointerMove);
-            window.removeEventListener('pointerup', onPointerUp);
-            window.removeEventListener('pointercancel', onPointerUp);
             if (dragStarted) {
                 (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
                 onDraggingChange(false);
@@ -270,9 +268,12 @@ const CropHandle = ({ handle, outline, onDraggingChange, target }) => {
                 clearDragOverrides(cropDrag.nodePath);
             });
         };
-        window.addEventListener('pointermove', onPointerMove);
-        window.addEventListener('pointerup', onPointerUp);
-        window.addEventListener('pointercancel', onPointerUp);
+        (0, pointer_session_1.startPointerSession)({
+            event,
+            target: event.currentTarget,
+            onMove: onPointerMove,
+            onEnd: onPointerUp,
+        });
     }, [
         clearDragOverrides,
         cropDrag,

package/dist/components/SelectedOutlineElement.js

@@ -45,6 +45,7 @@ const get_connected_compositions_1 = require("../helpers/get-connected-compositi
 const get_sequence_double_click_action_1 = require("../helpers/get-sequence-double-click-action");
 const interactivity_enabled_1 = require("../helpers/interactivity-enabled");
 const open_in_editor_1 = require("../helpers/open-in-editor");
+const pointer_session_1 = require("../helpers/pointer-session");
 const editor_snapping_1 = require("../state/editor-snapping");
 const modals_1 = require("../state/modals");
 const call_api_1 = require("./call-api");
@@ -65,6 +66,7 @@ const disable_sequence_interactivity_1 = require("./Timeline/disable-sequence-in
 const duplicate_selected_timeline_item_1 = require("./Timeline/duplicate-selected-timeline-item");
 const focus_inspector_field_1 = require("./Timeline/focus-inspector-field");
 const get_sequence_context_menu_items_1 = require("./Timeline/get-sequence-context-menu-items");
+const imperative_state_1 = require("./Timeline/imperative-state");
 const save_sequence_prop_1 = require("./Timeline/save-sequence-prop");
 const timeline_asset_link_1 = require("./Timeline/timeline-asset-link");
 const timeline_translate_utils_1 = require("./Timeline/timeline-translate-utils");
@@ -227,9 +229,6 @@ const SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, targe
             updateFromPointerPosition();
         };
         const onPointerUp = () => {
-            window.removeEventListener('pointermove', onPointerMove);
-            window.removeEventListener('pointerup', onPointerUp);
-            window.removeEventListener('pointercancel', onPointerUp);
             window.removeEventListener('keydown', onKeyChange);
             window.removeEventListener('keyup', onKeyChange);
             (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
@@ -272,9 +271,12 @@ const SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, targe
                 clearDragOverrides(transformOriginDrag.nodePath);
             });
         };
-        window.addEventListener('pointermove', onPointerMove);
-        window.addEventListener('pointerup', onPointerUp);
-        window.addEventListener('pointercancel', onPointerUp);
+        (0, pointer_session_1.startPointerSession)({
+            event,
+            target: event.currentTarget,
+            onMove: onPointerMove,
+            onEnd: onPointerUp,
+        });
         window.addEventListener('keydown', onKeyChange);
         window.addEventListener('keyup', onKeyChange);
     }, [
@@ -308,9 +310,6 @@ const SelectedOutlinePolygon = ({ allDragTargets, allDragOutlines, contextMenuVa
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { editorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
-    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
-    const timelinePositionRef = (0, react_1.useRef)(timelinePosition);
-    timelinePositionRef.current = timelinePosition;
     const polygonRef = (0, react_1.useRef)(null);
     const points = (0, react_1.useMemo)(() => outline.points.map(selected_outline_measurement_1.pointToString).join(' '), [outline.points]);
     const drag = (_a = target === null || target === void 0 ? void 0 : target.drag) !== null && _a !== void 0 ? _a : null;
@@ -341,7 +340,7 @@ const SelectedOutlinePolygon = ({ allDragTargets, allDragOutlines, contextMenuVa
         const dragStates = (0, selected_outline_drag_1.getSelectedOutlineDragStates)({
             dragTargets: selected ? allDragTargets : [drag],
             getDragOverrides,
-            timelinePosition: timelinePositionRef.current,
+            timelinePosition: (0, imperative_state_1.getCurrentFrame)(),
         });
         let lastValues = new Map();
         let currentPointerX = startPointerX;
@@ -437,9 +436,6 @@ const SelectedOutlinePolygon = ({ allDragTargets, allDragOutlines, contextMenuVa
             updateDragOverrides();
         };
         const onPointerUp = () => {
-            window.removeEventListener('pointermove', onPointerMove);
-            window.removeEventListener('pointerup', onPointerUp);
-            window.removeEventListener('pointercancel', onPointerUp);
             window.removeEventListener('keydown', onKeyChange);
             window.removeEventListener('keyup', onKeyChange);
             if (dragStarted) {
@@ -486,9 +482,12 @@ const SelectedOutlinePolygon = ({ allDragTargets, allDragOutlines, contextMenuVa
                 (0, selected_outline_drag_1.clearSelectedOutlineDragOverrides)({ clearDragOverrides, dragStates });
             });
         };
-        window.addEventListener('pointermove', onPointerMove);
-        window.addEventListener('pointerup', onPointerUp);
-        window.addEventListener('pointercancel', onPointerUp);
+        (0, pointer_session_1.startPointerSession)({
+            event,
+            target: event.currentTarget,
+            onMove: onPointerMove,
+            onEnd: onPointerUp,
+        });
         window.addEventListener('keydown', onKeyChange);
         window.addEventListener('keyup', onKeyChange);
     }, [
@@ -574,9 +573,6 @@ const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, contextMenuValues,
     var _a, _b;
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
-    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
-    const timelinePositionRef = (0, react_1.useRef)(timelinePosition);
-    timelinePositionRef.current = timelinePosition;
     const scaleDrag = (_a = target === null || target === void 0 ? void 0 : target.scaleDrag) !== null && _a !== void 0 ? _a : null;
     const selected = (_b = target === null || target === void 0 ? void 0 : target.selected) !== null && _b !== void 0 ? _b : false;
     const lineRef = (0, react_1.useRef)(null);
@@ -602,7 +598,7 @@ const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, contextMenuValues,
         const dragStates = (0, selected_outline_drag_1.getSelectedOutlineScaleDragStates)({
             dragTargets: selected ? allScaleDragTargets : [scaleDrag],
             getDragOverrides,
-            timelinePosition: timelinePositionRef.current,
+            timelinePosition: (0, imperative_state_1.getCurrentFrame)(),
         });
         let lastValues = new Map();
         let dragStarted = false;
@@ -648,9 +644,6 @@ const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, contextMenuValues,
             }
         };
         const onPointerUp = () => {
-            window.removeEventListener('pointermove', onPointerMove);
-            window.removeEventListener('pointerup', onPointerUp);
-            window.removeEventListener('pointercancel', onPointerUp);
             if (dragStarted) {
                 (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
                 onDraggingChange(false);
@@ -701,9 +694,12 @@ const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, contextMenuValues,
                 });
             });
         };
-        window.addEventListener('pointermove', onPointerMove);
-        window.addEventListener('pointerup', onPointerUp);
-        window.addEventListener('pointercancel', onPointerUp);
+        (0, pointer_session_1.startPointerSession)({
+            event,
+            target: event.currentTarget,
+            onMove: onPointerMove,
+            onEnd: onPointerUp,
+        });
     }, [
         allScaleDragTargets,
         clearDragOverrides,
@@ -743,9 +739,6 @@ const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, contextMe
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { editorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
-    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
-    const timelinePositionRef = (0, react_1.useRef)(timelinePosition);
-    timelinePositionRef.current = timelinePosition;
     const rotationDrag = (_a = target === null || target === void 0 ? void 0 : target.rotationDrag) !== null && _a !== void 0 ? _a : null;
     const selected = (_b = target === null || target === void 0 ? void 0 : target.selected) !== null && _b !== void 0 ? _b : false;
     const circleRef = (0, react_1.useRef)(null);
@@ -785,7 +778,7 @@ const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, contextMe
         const dragStates = (0, selected_outline_drag_1.getSelectedOutlineRotationDragStates)({
             dragTargets: selected ? allRotationDragTargets : [rotationDrag],
             getDragOverrides,
-            timelinePosition: timelinePositionRef.current,
+            timelinePosition: (0, imperative_state_1.getCurrentFrame)(),
         });
         let previousAngle = (0, selected_outline_measurement_1.getAngleDegrees)(center, {
             x: event.clientX,
@@ -864,9 +857,6 @@ const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, contextMe
             }
         };
         const onPointerUp = () => {
-            window.removeEventListener('pointermove', onPointerMove);
-            window.removeEventListener('pointerup', onPointerUp);
-            window.removeEventListener('pointercancel', onPointerUp);
             window.removeEventListener('keydown', onKeyChange);
             window.removeEventListener('keyup', onKeyChange);
             if (dragStarted) {
@@ -919,9 +909,12 @@ const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, contextMe
                 });
             });
         };
-        window.addEventListener('pointermove', onPointerMove);
-        window.addEventListener('pointerup', onPointerUp);
-        window.addEventListener('pointercancel', onPointerUp);
+        (0, pointer_session_1.startPointerSession)({
+            event,
+            target: event.currentTarget,
+            onMove: onPointerMove,
+            onEnd: onPointerUp,
+        });
         window.addEventListener('keydown', onKeyChange);
         window.addEventListener('keyup', onKeyChange);
     }, [
@@ -1003,7 +996,7 @@ const SelectedOutlineElement = ({ allDragTargets, allDragOutlines, allRotationDr
             if (originalLocation === null) {
                 return;
             }
-            await (0, open_in_editor_1.openOriginalPositionInEditor)(originalLocation);
+            await (0, open_in_editor_1.openOriginalPositionInEditor)(originalLocation, null);
         };
         openTargetInEditor().catch((err) => {
             (0, NotificationCenter_1.showNotification)(err.message, 2000);
@@ -1050,6 +1043,7 @@ const SelectedOutlineElement = ({ allDragTargets, allDragOutlines, allRotationDr
             deleteDisabled: sourceEditDisabled,
             disableInteractivityDisabled,
             duplicateDisabled: sourceEditDisabled,
+            editorInfo: null,
             fileLocation,
             includeSourceEditItems: sourceEditingEnabled,
             onDeleteSequenceFromSource: async () => {
@@ -1107,7 +1101,7 @@ const SelectedOutlineElement = ({ allDragTargets, allDragOutlines, allRotationDr
                 if (!originalLocation) {
                     return;
                 }
-                (0, open_in_editor_1.openOriginalPositionInEditor)(originalLocation).catch((err) => {
+                (0, open_in_editor_1.openOriginalPositionInEditor)(originalLocation, null).catch((err) => {
                     (0, NotificationCenter_1.showNotification)(err.message, 2000);
                 });
             },

package/dist/components/SelectedOutlineUvControls.js

@@ -38,6 +38,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
+const pointer_session_1 = require("../helpers/pointer-session");
 const editor_snapping_1 = require("../state/editor-snapping");
 const ForceSpecificCursor_1 = require("./ForceSpecificCursor");
 const selected_outline_drag_1 = require("./selected-outline-drag");
@@ -217,9 +218,6 @@ const SelectedUvEllipseStartHandle = ({ control, onDraggingChange, outline }) =>
             updateFromPointerEvent(moveEvent);
         };
         const onPointerUp = () => {
-            window.removeEventListener('pointermove', onPointerMove);
-            window.removeEventListener('pointerup', onPointerUp);
-            window.removeEventListener('pointercancel', onPointerUp);
             if (dragging) {
                 (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
                 onDraggingChange(false);
@@ -236,9 +234,12 @@ const SelectedUvEllipseStartHandle = ({ control, onDraggingChange, outline }) =>
                 sourceFrame: control.handle.sourceFrame,
             });
         };
-        window.addEventListener('pointermove', onPointerMove);
-        window.addEventListener('pointerup', onPointerUp);
-        window.addEventListener('pointercancel', onPointerUp);
+        (0, pointer_session_1.startPointerSession)({
+            event,
+            target: event.currentTarget,
+            onMove: onPointerMove,
+            onEnd: onPointerUp,
+        });
     }, [
         clearEffectDragOverrides,
         control.handle,
@@ -317,9 +318,6 @@ const SelectedUvEllipseResizeHandle = ({ axis, control, onDraggingChange, outlin
             updateFromPointerEvent(moveEvent);
         };
         const onPointerUp = () => {
-            window.removeEventListener('pointermove', onPointerMove);
-            window.removeEventListener('pointerup', onPointerUp);
-            window.removeEventListener('pointercancel', onPointerUp);
             if (dragging) {
                 (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
                 onDraggingChange(false);
@@ -336,9 +334,12 @@ const SelectedUvEllipseResizeHandle = ({ axis, control, onDraggingChange, outlin
                 sourceFrame: control.handle.sourceFrame,
             });
         };
-        window.addEventListener('pointermove', onPointerMove);
-        window.addEventListener('pointerup', onPointerUp);
-        window.addEventListener('pointercancel', onPointerUp);
+        (0, pointer_session_1.startPointerSession)({
+            event,
+            target: event.currentTarget,
+            onMove: onPointerMove,
+            onEnd: onPointerUp,
+        });
     }, [
         axis,
         clearEffectDragOverrides,
@@ -470,9 +471,6 @@ const SelectedUvEllipseRotationHandle = ({ control, onDraggingChange }) => {
             }
         };
         const onPointerUp = () => {
-            window.removeEventListener('pointermove', onPointerMove);
-            window.removeEventListener('pointerup', onPointerUp);
-            window.removeEventListener('pointercancel', onPointerUp);
             window.removeEventListener('keydown', onKeyChange);
             window.removeEventListener('keyup', onKeyChange);
             if (dragging) {
@@ -491,9 +489,12 @@ const SelectedUvEllipseRotationHandle = ({ control, onDraggingChange }) => {
                 sourceFrame: control.handle.sourceFrame,
             });
         };
-        window.addEventListener('pointermove', onPointerMove);
-        window.addEventListener('pointerup', onPointerUp);
-        window.addEventListener('pointercancel', onPointerUp);
+        (0, pointer_session_1.startPointerSession)({
+            event,
+            target: event.currentTarget,
+            onMove: onPointerMove,
+            onEnd: onPointerUp,
+        });
         window.addEventListener('keydown', onKeyChange);
         window.addEventListener('keyup', onKeyChange);
     }, [
@@ -595,9 +596,6 @@ const SelectedUvHandleCircle = ({ handle, nodePathInfo, onDraggingChange, onSele
             updateDragFromPointerEvent(moveEvent);
         };
         const onPointerUp = () => {
-            window.removeEventListener('pointermove', onPointerMove);
-            window.removeEventListener('pointerup', onPointerUp);
-            window.removeEventListener('pointercancel', onPointerUp);
             if (dragging) {
                 (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
                 onDraggingChange(false);
@@ -645,9 +643,12 @@ const SelectedUvHandleCircle = ({ handle, nodePathInfo, onDraggingChange, onSele
                 clearEffectDragOverrides(handle.nodePath, handle.effectIndex);
             });
         };
-        window.addEventListener('pointermove', onPointerMove);
-        window.addEventListener('pointerup', onPointerUp);
-        window.addEventListener('pointercancel', onPointerUp);
+        (0, pointer_session_1.startPointerSession)({
+            event,
+            target: event.currentTarget,
+            onMove: onPointerMove,
+            onEnd: onPointerUp,
+        });
     }, [
         clearEffectDragOverrides,
         editorSnapping,

package/dist/components/ShowGuidesProvider.js

@@ -7,6 +7,7 @@ const editor_guides_1 = require("../state/editor-guides");
 const ShowGuidesProvider = ({ children }) => {
     const [guidesList, setGuidesList] = (0, react_1.useState)(() => (0, editor_guides_1.loadGuidesList)());
     const [draggingGuideId, setDraggingGuideId] = (0, react_1.useState)(null);
+    const moveGuidePointerRef = (0, react_1.useRef)(null);
     const [hoveredGuideId, setHoveredGuideId] = (0, react_1.useState)(null);
     const [editorShowGuides, setEditorShowGuidesState] = (0, react_1.useState)(() => (0, editor_guides_1.loadEditorShowGuidesOption)());
     const shouldCreateGuideRef = (0, react_1.useRef)(false);
@@ -25,6 +26,7 @@ const ShowGuidesProvider = ({ children }) => {
             guidesList,
             setGuidesList,
             draggingGuideId,
+            moveGuidePointerRef,
             setDraggingGuideId,
             shouldCreateGuideRef,
             shouldDeleteGuideRef,

package/dist/components/SidebarCollapserControls.js

@@ -139,8 +139,8 @@ const SidebarCollapserControl = ({ side }) => {
         return (jsx_runtime_1.jsx("div", { "data-sidebar-toggle": "right", style: colorStyle(color), title: toggleRightTooltip, children: jsx_runtime_1.jsx("div", { style: rightIcon(color) }) }));
     }, [colorStyle, rightIcon, toggleRightTooltip]);
     if (side === 'left') {
-        return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: toggleLeft, renderAction: toggleLeftAction, unhoveredColor: colors_1.WHITE_ALPHA_80 }));
+        return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: toggleLeft, renderAction: toggleLeftAction, unhoveredColor: colors_1.WHITE_ALPHA_80 }));
     }
-    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: toggleRight, renderAction: toggleRightAction, unhoveredColor: colors_1.WHITE_ALPHA_80 }));
+    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: toggleRight, renderAction: toggleRightAction, unhoveredColor: colors_1.WHITE_ALPHA_80 }));
 };
 exports.SidebarCollapserControl = SidebarCollapserControl;

package/dist/components/SidebarRenderButton.js

@@ -5,15 +5,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../helpers/client-id");
-const mobile_layout_1 = require("../helpers/mobile-layout");
 const render_1 = require("../icons/render");
 const modals_1 = require("../state/modals");
-const sidebar_1 = require("../state/sidebar");
 const InlineAction_1 = require("./InlineAction");
 const SidebarRenderButton = ({ composition, visible }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
-    const { setSidebarCollapsedState } = (0, react_1.useContext)(sidebar_1.SidebarContext);
-    const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
     const iconStyle = (0, react_1.useMemo)(() => {
         return {
             style: {
@@ -84,23 +80,13 @@ const SidebarRenderButton = ({ composition, visible }) => {
             initialDarkMode: defaults.darkMode,
             readOnlyStudio: false,
         });
-        if (isMobileLayout) {
-            setSidebarCollapsedState({ left: 'collapsed', right: 'collapsed' });
-        }
-    }, [
-        composition.defaultProps,
-        composition.id,
-        isMobileLayout,
-        props,
-        setSelectedModal,
-        setSidebarCollapsedState,
-    ]);
+    }, [composition.defaultProps, composition.id, props, setSelectedModal]);
     const renderAction = (0, react_1.useCallback)((color) => {
         return jsx_runtime_1.jsx(render_1.ThinRenderIcon, { fill: color, svgProps: iconStyle });
     }, [iconStyle]);
     if (!visible || connectionStatus !== 'connected') {
         return null;
     }
-    return jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick });
+    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick, variant: null }));
 };
 exports.SidebarRenderButton = SidebarRenderButton;

package/dist/components/SizeSelector.js

@@ -4,6 +4,7 @@ exports.SizeSelector = exports.usePreviewSizeMenuItems = exports.getUniqueSizes
 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 get_preview_file_type_1 = require("../helpers/get-preview-file-type");
 const Checkmark_1 = require("../icons/Checkmark");
 const ControlButton_1 = require("./ControlButton");
@@ -123,6 +124,6 @@ const SizeSelector = () => {
     if (!zoomable) {
         return null;
     }
-    return (jsx_runtime_1.jsx("div", { style: style, "aria-label": accessibilityLabel, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { size: "compact", title: accessibilityLabel, style: comboStyle, selectedId: selectedId, values: items }) }));
+    return (jsx_runtime_1.jsx("div", { style: style, "aria-label": accessibilityLabel, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { size: "compact", title: accessibilityLabel, style: comboStyle, selectedId: selectedId, values: items, unhoveredIconColor: colors_1.WHITE_ALPHA_80 }) }));
 };
 exports.SizeSelector = SizeSelector;

package/dist/components/SnappingToggle.js

@@ -14,13 +14,12 @@ const SnappingToggle = () => {
     const onClick = (0, react_1.useCallback)(() => {
         setEditorSnapping((current) => !current);
     }, [setEditorSnapping]);
-    const color = editorSnapping ? colors_1.BLUE : colors_1.WHITE;
     const accessibilityLabel = [
         editorSnapping ? 'Disable snapping' : 'Enable snapping',
         (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? null : '(Shift+M)',
     ]
         .filter(no_react_1.NoReactInternals.truthy)
         .join(' ');
-    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, "aria-pressed": editorSnapping, "aria-keyshortcuts": "Shift+M", onClick: onClick, children: jsx_runtime_1.jsx(magnet_1.MagnetIcon, { style: { width: 17, height: 17 }, fill: color, "aria-hidden": "true", focusable: "false" }) }));
+    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, "aria-pressed": editorSnapping, "aria-keyshortcuts": "Shift+M", onClick: onClick, children: (color) => (jsx_runtime_1.jsx(magnet_1.MagnetIcon, { style: { width: 18, height: 18, transform: 'translateY(1px)' }, color: editorSnapping ? colors_1.BLUE : color, "aria-hidden": "true", focusable: "false" })) }));
 };
 exports.SnappingToggle = SnappingToggle;

package/dist/components/Spinner.d.ts

@@ -2,4 +2,5 @@ import React from 'react';
 export declare const Spinner: React.FC<{
     readonly size: number;
     readonly duration: number;
+    readonly color?: string;
 }>;

package/dist/components/Spinner.js

@@ -10,7 +10,7 @@ const className = '__remotion_spinner_line';
 const remotionSpinnerAnimation = '__remotion_spinner_animation';
 // Generated from https://github.com/remotion-dev/template-next/commit/9282c93f7c51ada31a42e18a94680fa09a14eee3
 const translated = 'M 44 0 L 50 0 a 6 6 0 0 1 6 6 L 56 26 a 6 6 0 0 1 -6 6 L 50 32 a 6 6 0 0 1 -6 -6 L 44 6 a 6 6 0 0 1 6 -6 Z';
-const Spinner = ({ size, duration }) => {
+const Spinner = ({ size, duration, color = colors_1.LIGHT_TEXT }) => {
     const style = (0, react_1.useMemo)(() => {
         return {
             width: size,
@@ -36,7 +36,7 @@ const Spinner = ({ size, duration }) => {
                             rotate: `${(index * Math.PI * 2) / lines}rad`,
                             transformOrigin: 'center center',
                             animationDelay: `${index * (duration / lines) - duration}s`,
-                        }, d: translated, fill: colors_1.LIGHT_TEXT }, index));
+                        }, d: translated, fill: color }, index));
                 }) })
         ] }));
 };

package/dist/components/Splitter/SplitterContainer.d.ts

@@ -8,6 +8,7 @@ export declare const SplitterContainer: React.FC<{
     readonly maxFlexerSize: number | null;
     readonly minFlexerSize: number | null;
     readonly maxAntiFlexerSize: number | null;
+    readonly minAntiFlexerSize: number | null;
     readonly id: string;
     readonly defaultFlex: number;
     readonly children: React.ReactNode;