@remotion/studio 4.0.501 → 4.0.503

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

@@ -101,6 +101,6 @@ const SidebarRenderButton = ({ composition, visible }) => {
     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.d.ts

@@ -1,5 +1,11 @@
 import React from 'react';
 import type { PreviewSize } from 'remotion';
+import type { ComboboxValue } from './NewComposition/ComboBox';
 export declare const getPreviewSizeLabel: (previewSize: PreviewSize) => string;
 export declare const getUniqueSizes: (size: PreviewSize) => PreviewSize[];
+export declare const usePreviewSizeMenuItems: () => {
+    items: ComboboxValue[];
+    selectedId: string;
+    zoomable: boolean | null;
+};
 export declare const SizeSelector: React.FC;

package/dist/components/SizeSelector.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SizeSelector = exports.getUniqueSizes = exports.getPreviewSizeLabel = void 0;
+exports.SizeSelector = exports.usePreviewSizeMenuItems = exports.getUniqueSizes = exports.getPreviewSizeLabel = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
@@ -67,14 +67,9 @@ const getUniqueSizes = (size) => {
 };
 exports.getUniqueSizes = getUniqueSizes;
 const zoomableFileTypes = ['video', 'image'];
-const SizeSelector = () => {
+const usePreviewSizeMenuItems = () => {
     const { size, setSize } = (0, react_1.useContext)(remotion_1.Internals.PreviewSizeContext);
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const style = (0, react_1.useMemo)(() => {
-        return {
-            padding: ControlButton_1.CONTROL_BUTTON_PADDING - 2,
-        };
-    }, []);
     const zoomable = (0, react_1.useMemo)(() => {
         if (!canvasContent) {
             return null;
@@ -111,9 +106,23 @@ const SizeSelector = () => {
             };
         });
     }, [setSize, size]);
+    return {
+        items,
+        selectedId: String(size.size),
+        zoomable,
+    };
+};
+exports.usePreviewSizeMenuItems = usePreviewSizeMenuItems;
+const SizeSelector = () => {
+    const { items, selectedId, zoomable } = (0, exports.usePreviewSizeMenuItems)();
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            padding: ControlButton_1.CONTROL_BUTTON_PADDING - 2,
+        };
+    }, []);
     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: String(size.size), 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 }) }));
 };
 exports.SizeSelector = SizeSelector;

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

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

package/dist/components/Splitter/SplitterContainer.js

@@ -6,6 +6,7 @@ const player_1 = require("@remotion/player");
 const react_1 = require("react");
 const timeline_1 = require("../../state/timeline");
 const SplitterContext_1 = require("./SplitterContext");
+const SplitterHandle_1 = require("./SplitterHandle");
 const containerRow = {
     display: 'flex',
     flexDirection: 'row',
@@ -19,14 +20,31 @@ exports.containerColumn = {
     flex: 1,
     height: 0,
 };
-const SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFlex, maxFlexerSize, maxAntiFlexerSize, id, }) => {
+const SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFlex, maxFlexerSize, minFlexerSize, maxAntiFlexerSize, id, }) => {
     const [initialTimelineFlex, persistFlex] = (0, timeline_1.useTimelineFlex)(id);
     const [flexValue, setFlexValue] = (0, react_1.useState)(initialTimelineFlex !== null && initialTimelineFlex !== void 0 ? initialTimelineFlex : defaultFlex);
     const ref = (0, react_1.useRef)(null);
     const isDragging = (0, react_1.useRef)(false);
+    const size = player_1.PlayerInternals.useElementSize(ref, {
+        triggerOnWindowResize: true,
+        shouldApplyCssTransforms: true,
+    });
+    const availableSize = size
+        ? (orientation === 'vertical' ? size.width : size.height) -
+            SplitterHandle_1.SPLITTER_HANDLE_SIZE
+        : null;
+    const effectiveFlexValue = (0, SplitterContext_1.getClampedSplitterFlex)({
+        availableSize,
+        flexValue,
+        maxAntiFlexerSize,
+        maxFlex,
+        maxFlexerSize,
+        minFlex,
+        minFlexerSize,
+    });
     const value = (0, react_1.useMemo)(() => {
         return {
-            flexValue,
+            flexValue: effectiveFlexValue,
             ref,
             setFlexValue,
             isDragging,
@@ -35,16 +53,18 @@ const SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFle
             maxFlex,
             minFlex,
             maxFlexerSize,
+            minFlexerSize,
             maxAntiFlexerSize,
             defaultFlex,
             persistFlex,
         };
     }, [
         defaultFlex,
-        flexValue,
+        effectiveFlexValue,
         id,
         maxFlex,
         maxFlexerSize,
+        minFlexerSize,
         maxAntiFlexerSize,
         minFlex,
         orientation,

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

@@ -12,6 +12,7 @@ export type TSplitterContext = {
     maxFlex: number;
     minFlex: number;
     maxFlexerSize: number | null;
+    minFlexerSize: number | null;
     maxAntiFlexerSize: number | null;
     defaultFlex: number;
     id: string;
@@ -21,4 +22,17 @@ export type TSplitterContext = {
         y: number;
     }>;
 };
+type SplitterFlexBounds = Pick<TSplitterContext, 'maxAntiFlexerSize' | 'maxFlex' | 'maxFlexerSize' | 'minFlex' | 'minFlexerSize'> & {
+    readonly availableSize: number | null;
+};
+export declare const getSplitterFlexBounds: ({ availableSize, maxAntiFlexerSize, maxFlex, maxFlexerSize, minFlex, minFlexerSize, }: SplitterFlexBounds) => {
+    minFlex: number;
+    maxFlex: number;
+};
+export declare const getClampedSplitterFlex: ({ flexValue, ...bounds }: Pick<TSplitterContext, "maxAntiFlexerSize" | "maxFlex" | "maxFlexerSize" | "minFlex" | "minFlexerSize"> & {
+    readonly availableSize: number | null;
+} & {
+    readonly flexValue: number;
+}) => number;
 export declare const SplitterContext: React.Context<TSplitterContext>;
+export {};

package/dist/components/Splitter/SplitterContext.js

@@ -3,8 +3,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SplitterContext = void 0;
+exports.SplitterContext = exports.getClampedSplitterFlex = exports.getSplitterFlexBounds = void 0;
 const react_1 = __importDefault(require("react"));
+const getSplitterFlexBounds = ({ availableSize, maxAntiFlexerSize, maxFlex, maxFlexerSize, minFlex, minFlexerSize, }) => {
+    if (availableSize === null || availableSize <= 0) {
+        return { minFlex, maxFlex };
+    }
+    const minimum = Math.min(1, Math.max(minFlex, minFlexerSize === null ? 0 : minFlexerSize / availableSize, maxAntiFlexerSize === null ? 0 : 1 - maxAntiFlexerSize / availableSize));
+    const maximum = Math.max(minimum, Math.min(maxFlex, maxFlexerSize === null ? 1 : maxFlexerSize / availableSize));
+    return { minFlex: minimum, maxFlex: maximum };
+};
+exports.getSplitterFlexBounds = getSplitterFlexBounds;
+const getClampedSplitterFlex = ({ flexValue, ...bounds }) => {
+    const { minFlex, maxFlex } = (0, exports.getSplitterFlexBounds)(bounds);
+    return Math.min(maxFlex, Math.max(minFlex, flexValue));
+};
+exports.getClampedSplitterFlex = getClampedSplitterFlex;
 exports.SplitterContext = react_1.default.createContext({
     flexValue: 1,
     ref: { current: null },
@@ -14,6 +28,7 @@ exports.SplitterContext = react_1.default.createContext({
     maxFlex: 1,
     minFlex: 1,
     maxFlexerSize: null,
+    minFlexerSize: null,
     maxAntiFlexerSize: null,
     defaultFlex: 1,
     id: '--',

package/dist/components/Splitter/SplitterHandle.js

@@ -4,6 +4,7 @@ exports.SplitterHandle = exports.SPLITTER_HANDLE_SIZE = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = require("react");
+const pointer_session_1 = require("../../helpers/pointer-session");
 const ForceSpecificCursor_1 = require("../ForceSpecificCursor");
 const SplitterContext_1 = require("./SplitterContext");
 exports.SPLITTER_HANDLE_SIZE = 3;
@@ -28,7 +29,6 @@ const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
         if (!current) {
             return;
         }
-        // Cleanup for the listeners that only exist for the duration of a drag.
         let endDrag = null;
         const onPointerDown = (e) => {
             var _a;
@@ -49,16 +49,17 @@ const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
             const availableSize = (dragContext.orientation === 'vertical'
                 ? containerWidth
                 : containerHeight) - exports.SPLITTER_HANDLE_SIZE;
-            const minFlex = dragContext.maxAntiFlexerSize === null || availableSize <= 0
-                ? dragContext.minFlex
-                : Math.max(dragContext.minFlex, 1 - dragContext.maxAntiFlexerSize / availableSize);
-            const maxFlex = dragContext.maxFlexerSize === null || availableSize <= 0
-                ? dragContext.maxFlex
-                : Math.min(dragContext.maxFlex, dragContext.maxFlexerSize / availableSize);
+            const { minFlex, maxFlex } = (0, SplitterContext_1.getSplitterFlexBounds)({
+                availableSize,
+                maxAntiFlexerSize: dragContext.maxAntiFlexerSize,
+                maxFlex: dragContext.maxFlex,
+                maxFlexerSize: dragContext.maxFlexerSize,
+                minFlex: dragContext.minFlex,
+                minFlexerSize: dragContext.minFlexerSize,
+            });
             const startFlex = Math.min(maxFlex, Math.max(minFlex, dragContext.flexValue));
             dragContext.isDragging.current = start;
             (0, ForceSpecificCursor_1.forceSpecificCursor)(dragContext.orientation === 'horizontal' ? 'row-resize' : 'col-resize');
-            current.classList.add('remotion-splitter-active');
             const getNewValue = (ev, clamp) => {
                 if (!dragContext.ref.current) {
                     throw new Error('domRect is not mounted');
@@ -73,17 +74,6 @@ const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
                 }
                 return newFlex;
             };
-            endDrag = () => {
-                dragContext.isDragging.current = false;
-                (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
-                current.classList.remove('remotion-splitter-active');
-                window.removeEventListener('pointermove', onPointerMove);
-                window.removeEventListener('pointerup', onPointerUp);
-                window.removeEventListener('pointercancel', onPointerCancel);
-                window.removeEventListener('blur', onWindowBlur);
-                endDrag = null;
-                player_1.PlayerInternals.updateAllElementsSizes();
-            };
             const onPointerMove = (ev) => {
                 if (!dragContext.isDragging.current) {
                     return;
@@ -105,23 +95,22 @@ const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
                     }
                 }
             };
-            const onPointerUp = (ev) => {
-                if (!dragContext.isDragging.current) {
-                    return;
-                }
-                dragContext.persistFlex(getNewValue(ev, true));
-                endDrag === null || endDrag === void 0 ? void 0 : endDrag();
-            };
-            const onPointerCancel = () => {
-                endDrag === null || endDrag === void 0 ? void 0 : endDrag();
-            };
-            const onWindowBlur = () => {
-                endDrag === null || endDrag === void 0 ? void 0 : endDrag();
-            };
-            window.addEventListener('pointermove', onPointerMove);
-            window.addEventListener('pointerup', onPointerUp);
-            window.addEventListener('pointercancel', onPointerCancel);
-            window.addEventListener('blur', onWindowBlur);
+            endDrag = (0, pointer_session_1.startPointerSession)({
+                event: e,
+                target: current,
+                onMove: onPointerMove,
+                onEnd: (reason, endEvent) => {
+                    if ((reason === 'pointerup' || reason === 'buttons-released') &&
+                        endEvent &&
+                        dragContext.isDragging.current) {
+                        dragContext.persistFlex(getNewValue(endEvent, true));
+                    }
+                    dragContext.isDragging.current = false;
+                    (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
+                    endDrag = null;
+                    player_1.PlayerInternals.updateAllElementsSizes();
+                },
+            });
         };
         current.addEventListener('pointerdown', onPointerDown);
         return () => {
@@ -129,44 +118,6 @@ const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
             endDrag === null || endDrag === void 0 ? void 0 : endDrag();
         };
     }, []);
-    (0, react_1.useEffect)(() => {
-        const { current } = ref;
-        if (!current) {
-            return;
-        }
-        let isMouseDown = false;
-        const onMouseDown = () => {
-            isMouseDown = true;
-        };
-        const onMouseUp = () => {
-            isMouseDown = false;
-        };
-        const onMouseEnter = (e) => {
-            if (e.button !== 0) {
-                return;
-            }
-            if (isMouseDown) {
-                return;
-            }
-            current.classList.add('remotion-splitter-hover');
-        };
-        const onMouseLeave = (e) => {
-            if (e.button !== 0) {
-                return;
-            }
-            current.classList.remove('remotion-splitter-hover');
-        };
-        current.addEventListener('mouseenter', onMouseEnter);
-        current.addEventListener('mouseleave', onMouseLeave);
-        window.addEventListener('mousedown', onMouseDown);
-        window.addEventListener('mouseup', onMouseUp);
-        return () => {
-            current.removeEventListener('mouseenter', onMouseEnter);
-            current.removeEventListener('mouseleave', onMouseLeave);
-            window.removeEventListener('mousedown', onMouseDown);
-            window.removeEventListener('mouseup', onMouseUp);
-        };
-    }, []);
     return (jsx_runtime_1.jsx("div", { ref: ref, className: [
             'remotion-splitter',
             context.orientation === 'horizontal'

package/dist/components/Timeline/EasingEditorModal.js

@@ -7,6 +7,7 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
+const pointer_session_1 = require("../../helpers/pointer-session");
 const Checkbox_1 = require("../Checkbox");
 const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
 const InputDragger_1 = require("../NewComposition/InputDragger");
@@ -642,33 +643,40 @@ const EasingEditor = ({ state, renderHeader }) => {
         }
         setBezierAndPreview(next);
     }, [getValueFromPointer, setBezierAndPreview]);
-    (0, react_1.useEffect)(() => {
-        if (activeHandle === null) {
-            return;
-        }
-        const onPointerMove = (event) => {
-            updateHandleFromPointer(activeHandle, event);
-        };
-        const onPointerUp = () => {
-            commitEasing(serializeBezier(bezierRef.current), liveOverrideVersionRef.current);
-            setActiveHandle(null);
-        };
-        window.addEventListener('pointermove', onPointerMove);
-        window.addEventListener('pointerup', onPointerUp, { once: true });
-        return () => {
-            window.removeEventListener('pointermove', onPointerMove);
-            window.removeEventListener('pointerup', onPointerUp);
-        };
-    }, [activeHandle, commitEasing, updateHandleFromPointer]);
     const onHandlePointerDown = (0, react_1.useCallback)((handle, event) => {
         if (previewServerState.type !== 'connected') {
             return;
         }
         event.preventDefault();
         event.stopPropagation();
+        const bezierBeforeDrag = [...bezierRef.current];
         setActiveHandle(handle);
         updateHandleFromPointer(handle, event);
-    }, [previewServerState.type, updateHandleFromPointer]);
+        (0, pointer_session_1.startPointerSession)({
+            event,
+            target: event.currentTarget,
+            onMove: (moveEvent) => {
+                updateHandleFromPointer(handle, moveEvent);
+            },
+            onEnd: (reason) => {
+                if (reason === 'pointerup' || reason === 'buttons-released') {
+                    commitEasing(serializeBezier(bezierRef.current), liveOverrideVersionRef.current);
+                }
+                else {
+                    clearEasingDragOverrides(pendingOverrideTargetsRef.current);
+                    pendingOverrideTargetsRef.current = [];
+                    bezierRef.current = bezierBeforeDrag;
+                    setBezier(bezierBeforeDrag);
+                }
+                setActiveHandle(null);
+            },
+        });
+    }, [
+        clearEasingDragOverrides,
+        commitEasing,
+        previewServerState.type,
+        updateHandleFromPointer,
+    ]);
     (0, react_1.useEffect)(() => {
         return () => {
             clearEasingDragOverrides(pendingOverrideTargetsRef.current);

package/dist/components/Timeline/Timeline.js

@@ -75,6 +75,7 @@ const TimelineTracks_1 = require("./TimelineTracks");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 const use_resolved_stack_1 = require("./use-resolved-stack");
 const use_timeline_asset_drop_1 = require("./use-timeline-asset-drop");
+const MIN_TIMELINE_LABELS_WIDTH = 240;
 const container = {
     minHeight: '100%',
     flex: 1,
@@ -267,7 +268,7 @@ const TimelineInner = () => {
                 }
                 return (jsx_runtime_1.jsx(SubscribeToNodePaths_1.SubscribeToNodePaths, { overrideId: sequence.controls.overrideId, componentIdentity: sequence.controls.componentIdentity, schema: sequence.controls.schema, getStack: sequence.getStack, effects: sequence.effects }, sequence.id));
             }), (0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? jsx_runtime_1.jsx(SequencePropsObserver_1.SequencePropsObserver, {}) : null, jsx_runtime_1.jsx(TimelineKeyframeTracksContext_1.TimelineKeyframeTracksProvider, { tracks: filtered, children: jsx_runtime_1.jsxs(TimelineSelection_1.TimelineSelectableItemsProvider, { timeline: shown, children: [(0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectAllKeybindings, { timeline: shown })) : null, jsx_runtime_1.jsx(TimelineHeightContainer_1.TimelineHeightContainer, { shown: shown, hasBeenCut: hasBeenCut, children: isStill ? (jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown })) : (jsx_runtime_1.jsxs(TimelineWidthProvider_1.TimelineWidthProvider, { children: [
-                                    jsx_runtime_1.jsx(TimelinePinchZoom_1.TimelinePinchZoom, {}), jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, maxFlexerSize: null, maxAntiFlexerSize: null, children: [
+                                    jsx_runtime_1.jsx(TimelinePinchZoom_1.TimelinePinchZoom, {}), jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, maxFlexerSize: null, minFlexerSize: MIN_TIMELINE_LABELS_WIDTH, maxAntiFlexerSize: null, children: [
                                             jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "flexer", sticky: jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePlaceholders, {}), children: jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown }) }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { onCollapse: noop, allowToCollapse: "none" }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "anti-flexer", sticky: null, children: jsx_runtime_1.jsxs(TimelineScrollable_1.TimelineScrollable, { children: [
                                                         jsx_runtime_1.jsx(TimelineTracks_1.TimelineTracks, { timeline: shown, hasBeenCut: hasBeenCut }), jsx_runtime_1.jsx(TimelinePlayCursorSyncer_1.TimelinePlayCursorSyncer, {}), jsx_runtime_1.jsx(TimelineInOutPointer_1.TimelineInOutPointer, {}), jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimeIndicators, {}), jsx_runtime_1.jsx(TimelineDragHandler_1.TimelineDragHandler, {}), (0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? (jsx_runtime_1.jsx(TimelineInOutDragHandler_1.TimelineInOutDragHandler, {})) : null, jsx_runtime_1.jsx(TimelineSlider_1.TimelineSlider, {})
                                                     ] }) })

package/dist/components/Timeline/TimelineAssetField.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { CanUpdateSequencePropStatusStatic } from 'remotion';
+import { type CanUpdateSequencePropStatusStatic } from 'remotion';
 import type { SchemaFieldInfo, TimelineFieldOnDragValueChange, TimelineFieldOnSave } from '../../helpers/timeline-layout';
 import { type InspectorInlineActionProps } from '../InspectorPanel/common';
 export type InspectorSourceAction = Omit<InspectorInlineActionProps, 'variant'>;

package/dist/components/Timeline/TimelineAssetField.js

@@ -3,11 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineAssetField = exports.toFileToken = exports.AssetSelectionContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
+const write_static_file_1 = require("../../api/write-static-file");
 const pen_1 = require("../../icons/pen");
 const modals_1 = require("../../state/modals");
+const import_assets_1 = require("../import-assets");
 const InlineAction_1 = require("../InlineAction");
 const common_1 = require("../InspectorPanel/common");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const use_static_files_1 = require("../use-static-files");
 const penIcon = {
     display: 'block',
     height: 14,
@@ -30,6 +35,7 @@ const TimelineAssetField = ({ field, effectiveValue, propStatus, onSave, onDragV
         throw new Error('TimelineAssetField rendered for non-asset field');
     }
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const staticFiles = (0, use_static_files_1.useStaticFiles)();
     const { getSourceAction, initialQuery, sourceAction } = (0, react_1.useContext)(exports.AssetSelectionContext);
     const inlineSourceAction = (0, react_1.useMemo)(() => {
         if (field.key !== 'src') {
@@ -49,6 +55,32 @@ const TimelineAssetField = ({ field, effectiveValue, propStatus, onSave, onDragV
             onDragEnd();
         });
     }, [propStatus.codeValue, onDragValueChange, onSave, onDragEnd]);
+    const selectFile = (0, react_1.useCallback)(async () => {
+        const [file] = await (0, import_assets_1.pickFilesToImport)({ multiple: false });
+        if (!file) {
+            return;
+        }
+        const existing = staticFiles.find((candidate) => candidate.name === file.name);
+        if (existing && existing.sizeInBytes !== file.size) {
+            (0, NotificationCenter_1.showNotification)(`File with name ${file.name} already exists and is different`, 4000);
+            return;
+        }
+        try {
+            if (!existing) {
+                await (0, write_static_file_1.writeStaticFile)({
+                    contents: await file.arrayBuffer(),
+                    filePath: file.name,
+                });
+            }
+            onSelect(file.name, (0, remotion_1.staticFile)(file.name));
+            if (!existing) {
+                (0, NotificationCenter_1.showNotification)(`Created ${file.name} in public folder`, 3000);
+            }
+        }
+        catch (error) {
+            (0, NotificationCenter_1.showNotification)(`Could not upload asset: ${error instanceof Error ? error.message : String(error)}`, 4000);
+        }
+    }, [onSelect, staticFiles]);
     const openAssetSelection = (0, react_1.useCallback)(() => {
         setSelectedModal({
             type: 'quick-switcher',
@@ -56,12 +88,15 @@ const TimelineAssetField = ({ field, effectiveValue, propStatus, onSave, onDragV
             invocationTimestamp: Date.now(),
             assetSelection: {
                 initialQuery,
+                onSelectFile: () => {
+                    selectFile().catch(() => undefined);
+                },
                 onSelected: (asset) => onSelect(asset.name, asset.src),
             },
             compositionSelection: null,
         });
-    }, [initialQuery, onSelect, setSelectedModal]);
-    const action = (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: openAssetSelection, disabled: window.remotion_isReadOnlyStudio, title: "Change source", renderAction: (color) => jsx_runtime_1.jsx(pen_1.PenIcon, { color: color, style: penIcon }) }));
+    }, [initialQuery, onSelect, selectFile, setSelectedModal]);
+    const action = (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: openAssetSelection, disabled: window.remotion_isReadOnlyStudio, title: "Change source", renderAction: (color) => jsx_runtime_1.jsx(pen_1.PenIcon, { color: color, style: penIcon }) }));
     if (inlineSourceAction === null) {
         return action;
     }