@remotion/studio 4.0.502 → 4.0.504

package/dist/components/Timeline/TimelineInOutDragHandler.js

@@ -39,6 +39,7 @@ const player_1 = require("@remotion/player");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const get_left_of_timeline_slider_1 = require("../../helpers/get-left-of-timeline-slider");
+const pointer_session_1 = require("../../helpers/pointer-session");
 const in_out_1 = require("../../state/in-out");
 const z_index_1 = require("../../state/z-index");
 const ContextMenu_1 = require("../ContextMenu");
@@ -86,6 +87,7 @@ const TimelineInOutDragHandlerInner = () => {
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
     const { setInAndOutFrames } = (0, in_out_1.useTimelineSetInOutFramePosition)();
     const onInPointerDown = (0, react_1.useCallback)((e) => {
+        var _a, _b;
         if (e.button !== 0) {
             return;
         }
@@ -108,9 +110,14 @@ const TimelineInOutDragHandlerInner = () => {
             dragging: 'in',
             initialOffset: getClientXWithScroll(e.clientX),
             boundaries: [-Infinity, outMarker - inMarker],
+            button: e.button,
+            pointerId: e.pointerId,
+            target: e.currentTarget,
         });
+        (_b = (_a = e.currentTarget).setPointerCapture) === null || _b === void 0 ? void 0 : _b.call(_a, e.pointerId);
     }, [isHighestContext, videoConfig, inFrame, get, outFrame]);
     const onOutPointerDown = (0, react_1.useCallback)((e) => {
+        var _a, _b;
         if (e.button !== 0) {
             return;
         }
@@ -133,7 +140,11 @@ const TimelineInOutDragHandlerInner = () => {
             dragging: 'out',
             initialOffset: getClientXWithScroll(e.clientX),
             boundaries: [inMarker - outMarker, Infinity],
+            button: e.button,
+            pointerId: e.pointerId,
+            target: e.currentTarget,
         });
+        (_b = (_a = e.currentTarget).setPointerCapture) === null || _b === void 0 ? void 0 : _b.call(_a, e.pointerId);
     }, [isHighestContext, videoConfig, inFrame, get, outFrame]);
     const onPointerMoveInOut = (0, react_1.useCallback)((e) => {
         if (!videoConfig) {
@@ -264,18 +275,22 @@ const TimelineInOutDragHandlerInner = () => {
         if (inOutDragging.dragging === false) {
             return;
         }
-        window.addEventListener('pointermove', onPointerMoveInOut);
-        window.addEventListener('pointerup', onPointerUpInOut);
-        window.addEventListener('pointercancel', onPointerCancelInOut);
-        window.addEventListener('blur', onPointerCancelInOut);
-        return () => {
-            window.removeEventListener('pointermove', onPointerMoveInOut);
-            window.removeEventListener('pointerup', onPointerUpInOut);
-            window.removeEventListener('pointercancel', onPointerCancelInOut);
-            window.removeEventListener('blur', onPointerCancelInOut);
-        };
+        return (0, pointer_session_1.startPointerSession)({
+            event: inOutDragging,
+            target: inOutDragging.target,
+            onMove: onPointerMoveInOut,
+            onEnd: (reason, endEvent) => {
+                if ((reason === 'pointerup' || reason === 'buttons-released') &&
+                    endEvent) {
+                    onPointerUpInOut(endEvent);
+                }
+                else {
+                    onPointerCancelInOut();
+                }
+            },
+        });
     }, [
-        inOutDragging.dragging,
+        inOutDragging,
         onPointerCancelInOut,
         onPointerMoveInOut,
         onPointerUpInOut,

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 export declare const getTimelineKeyframeEasingLineStyle: (selected: boolean) => React.CSSProperties;
-export declare const TimelineKeyframeEasingLineVisual: React.FC<{
+export declare const TimelineKeyframeEasingLineVisual: React.NamedExoticComponent<{
     readonly selected: boolean;
 }>;
 export declare const TimelineKeyframeEasingLine: React.NamedExoticComponent<{

package/dist/components/Timeline/TimelineKeyframeEasingLine.js

@@ -72,11 +72,11 @@ const getTimelineKeyframeEasingLineStyle = (selected) => ({
     outline: selected ? `1px solid ${colors_1.BLUE}` : undefined,
 });
 exports.getTimelineKeyframeEasingLineStyle = getTimelineKeyframeEasingLineStyle;
-const TimelineKeyframeEasingLineVisual = ({ selected }) => {
+const TimelineKeyframeEasingLineVisualUnmemoized = ({ selected }) => {
     const lineStyle = (0, react_1.useMemo)(() => (0, exports.getTimelineKeyframeEasingLineStyle)(selected), [selected]);
     return jsx_runtime_1.jsx("div", { style: lineStyle });
 };
-exports.TimelineKeyframeEasingLineVisual = TimelineKeyframeEasingLineVisual;
+exports.TimelineKeyframeEasingLineVisual = react_1.default.memo(TimelineKeyframeEasingLineVisualUnmemoized);
 const TimelineKeyframeEasingLineUnmemoized = ({ fromFrame, toFrame, rowHeight, nodePathInfo, segmentIndex }) => {
     const buttonRef = (0, react_1.useRef)(null);
     const videoConfig = (0, remotion_1.useVideoConfig)();

package/dist/components/Timeline/TimelineLayerEye.js

@@ -4,6 +4,7 @@ exports.TimelineLayerEyeSpacer = exports.TimelineLayerEye = exports.timelineLaye
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
+const pointer_session_1 = require("../../helpers/pointer-session");
 const eyeIcon = {
     width: 12,
     color: colors_1.CURRENT_COLOR,
@@ -30,6 +31,10 @@ exports.timelineLayerIconContainer = {
     flexShrink: 0,
 };
 let layerPointedDown = null;
+let stopLayerPointerSession = null;
+let lastPaintedLayerEye = null;
+const layerEyeActions = new WeakMap();
+const TIMELINE_LAYER_EYE_ATTR = 'data-timeline-layer-eye';
 const TimelineLayerEye = ({ onInvoked, hidden, type }) => {
     const renderAction = (0, react_1.useCallback)((color) => {
         if (hidden) {
@@ -49,11 +54,29 @@ const TimelineLayerEye = ({ onInvoked, hidden, type }) => {
         }
         e.preventDefault();
         e.stopPropagation();
+        stopLayerPointerSession === null || stopLayerPointerSession === void 0 ? void 0 : stopLayerPointerSession();
         layerPointedDown = hidden ? 'enable' : 'disable';
         onInvoked(layerPointedDown);
-        window.addEventListener('pointerup', () => {
-            layerPointedDown = null;
-        }, { once: true });
+        lastPaintedLayerEye = e.currentTarget;
+        stopLayerPointerSession = (0, pointer_session_1.startPointerSession)({
+            event: e,
+            target: e.currentTarget,
+            onMove: (moveEvent) => {
+                var _a, _b;
+                const pointedElement = (_a = document
+                    .elementFromPoint(moveEvent.clientX, moveEvent.clientY)) === null || _a === void 0 ? void 0 : _a.closest(`[${TIMELINE_LAYER_EYE_ATTR}]`);
+                if (!pointedElement || pointedElement === lastPaintedLayerEye) {
+                    return;
+                }
+                lastPaintedLayerEye = pointedElement;
+                (_b = layerEyeActions.get(pointedElement)) === null || _b === void 0 ? void 0 : _b();
+            },
+            onEnd: () => {
+                layerPointedDown = null;
+                lastPaintedLayerEye = null;
+                stopLayerPointerSession = null;
+            },
+        });
     }, [hidden, onInvoked]);
     const onDragStart = (0, react_1.useCallback)((e) => {
         e.preventDefault();
@@ -64,10 +87,19 @@ const TimelineLayerEye = ({ onInvoked, hidden, type }) => {
             onInvoked(layerPointedDown);
         }
     }, [onInvoked]);
+    const registerLayerEye = (0, react_1.useCallback)((element) => {
+        if (element) {
+            layerEyeActions.set(element, () => {
+                if (layerPointedDown) {
+                    onInvoked(layerPointedDown);
+                }
+            });
+        }
+    }, [onInvoked]);
     const onDoubleClick = (0, react_1.useCallback)((e) => {
         e.stopPropagation();
     }, []);
-    return (jsx_runtime_1.jsx("div", { style: exports.timelineLayerIconContainer, draggable: false, onDragStart: onDragStart, onDoubleClick: onDoubleClick, onPointerEnter: onPointerEnter, onPointerDown: onPointerDown, children: renderAction(colors_1.LIGHT_COLOR) }));
+    return (jsx_runtime_1.jsx("div", { ref: registerLayerEye, [TIMELINE_LAYER_EYE_ATTR]: true, style: exports.timelineLayerIconContainer, draggable: false, onDragStart: onDragStart, onDoubleClick: onDoubleClick, onPointerEnter: onPointerEnter, onPointerDown: onPointerDown, children: renderAction(colors_1.LIGHT_COLOR) }));
 };
 exports.TimelineLayerEye = TimelineLayerEye;
 const spacerStyle = {

package/dist/components/Timeline/TimelineSelection.js

@@ -8,6 +8,7 @@ const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
 const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
+const pointer_session_1 = require("../../helpers/pointer-session");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_node_path_key_1 = require("../../helpers/timeline-node-path-key");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
@@ -16,6 +17,7 @@ const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const options_sidebar_tabs_1 = require("../options-sidebar-tabs");
 const get_node_keyframes_1 = require("./get-node-keyframes");
 const get_timeline_easing_segments_1 = require("./get-timeline-easing-segments");
+const imperative_state_1 = require("./imperative-state");
 const timeline_expanded_filter_1 = require("./timeline-expanded-filter");
 const timeline_refs_1 = require("./timeline-refs");
 const TimelineClipboardKeybindings_1 = require("./TimelineClipboardKeybindings");
@@ -570,7 +572,6 @@ const TimelineSelectableItemsProvider = ({ children, timeline }) => {
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getDragOverrides, getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
-    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const { selectedItems } = (0, exports.useTimelineSelection)();
     const selectableItems = (0, react_1.useMemo)(() => (0, exports.getSelectableTimelineItems)({
         getDragOverrides,
@@ -579,7 +580,7 @@ const TimelineSelectableItemsProvider = ({ children, timeline }) => {
         propStatuses,
         selectedItems,
         timeline,
-        timelinePosition,
+        timelinePosition: (0, imperative_state_1.getCurrentFrame)(),
     }), [
         getDragOverrides,
         getEffectDragOverrides,
@@ -587,7 +588,6 @@ const TimelineSelectableItemsProvider = ({ children, timeline }) => {
         propStatuses,
         selectedItems,
         timeline,
-        timelinePosition,
     ]);
     return (jsx_runtime_1.jsx(exports.TimelineSelectionOrderProvider, { items: selectableItems, children: children }));
 };
@@ -910,10 +910,7 @@ const useTimelineMarqueeSelection = () => {
             event.target.closest(`[${exports.TIMELINE_SCRUBBER_ATTR}]`)) {
             return;
         }
-        const { currentTarget: target, pointerId } = event;
-        if (target.setPointerCapture) {
-            target.setPointerCapture(pointerId);
-        }
+        const { currentTarget: target } = event;
         const initialBounds = target.getBoundingClientRect();
         const marqueeBounds = {
             bottom: initialBounds.bottom,
@@ -937,13 +934,6 @@ const useTimelineMarqueeSelection = () => {
         const extendSelection = event.metaKey || event.ctrlKey;
         const selectionBeforeMarquee = selectedItems;
         const cleanup = () => {
-            var _a;
-            window.removeEventListener('pointermove', onPointerMove);
-            window.removeEventListener('pointerup', onPointerUp);
-            window.removeEventListener('pointercancel', onPointerCancel);
-            if ((_a = target.hasPointerCapture) === null || _a === void 0 ? void 0 : _a.call(target, pointerId)) {
-                target.releasePointerCapture(pointerId);
-            }
             document.body.style.userSelect = previousUserSelect;
             document.body.style.webkitUserSelect = previousWebkitUserSelect;
             setMarqueeRect(null);
@@ -979,16 +969,18 @@ const useTimelineMarqueeSelection = () => {
         const onPointerMove = (moveEvent) => {
             updateSelection(moveEvent.clientX, moveEvent.clientY);
         };
-        const onPointerUp = (upEvent) => {
-            updateSelection(upEvent.clientX, upEvent.clientY);
-            cleanup();
-        };
-        const onPointerCancel = () => {
-            cleanup();
-        };
-        window.addEventListener('pointermove', onPointerMove);
-        window.addEventListener('pointerup', onPointerUp);
-        window.addEventListener('pointercancel', onPointerCancel);
+        (0, pointer_session_1.startPointerSession)({
+            event,
+            target,
+            onMove: onPointerMove,
+            onEnd: (reason, endEvent) => {
+                if ((reason === 'pointerup' || reason === 'buttons-released') &&
+                    endEvent) {
+                    updateSelection(endEvent.clientX, endEvent.clientY);
+                }
+                cleanup();
+            },
+        });
     }, [
         canSelect,
         getMarqueeSelection,

package/dist/components/Timeline/TimelineSequence.js

@@ -53,6 +53,7 @@ const ConfirmationDialog_1 = require("../ConfirmationDialog");
 const ContextMenu_1 = require("../ContextMenu");
 const InitialCompositionLoader_1 = require("../InitialCompositionLoader");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const use_default_editor_info_1 = require("../use-default-editor-info");
 const use_select_asset_1 = require("../use-select-asset");
 const disable_sequence_interactivity_1 = require("./disable-sequence-interactivity");
 const duplicate_selected_timeline_item_1 = require("./duplicate-selected-timeline-item");
@@ -197,6 +198,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
     const previewInteractive = previewConnected && (0, interactivity_enabled_1.isStudioInteractivityEnabled)();
+    const editorInfo = (0, use_default_editor_info_1.useDefaultEditorInfo)((0, use_default_editor_info_1.canUseEditorPicker)(previewConnected));
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const selectAsset = (0, use_select_asset_1.useSelectAsset)();
@@ -208,11 +210,11 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         root: window.remotion_cwd,
     }), [originalLocation]);
     const canOpenInEditor = Boolean(window.remotion_editorName && previewConnected && originalLocation);
-    const openInEditor = (0, react_1.useCallback)(() => {
+    const openInEditor = (0, react_1.useCallback)((editorId) => {
         if (!canOpenInEditor || !originalLocation) {
             return;
         }
-        (0, open_in_editor_1.openOriginalPositionInEditor)(originalLocation).catch((err) => {
+        (0, open_in_editor_1.openOriginalPositionInEditor)(originalLocation, editorId).catch((err) => {
             (0, NotificationCenter_1.showNotification)(err.message, 2000);
         });
     }, [canOpenInEditor, originalLocation]);
@@ -238,7 +240,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
             }));
             return;
         }
-        openInEditor();
+        openInEditor(null);
     }, [
         canOpenInEditor,
         connectedCompositions,
@@ -344,6 +346,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
             deleteDisabled,
             disableInteractivityDisabled,
             duplicateDisabled,
+            editorInfo,
             fileLocation,
             includeSourceEditItems: (0, interactivity_enabled_1.isStudioInteractivityEnabled)(),
             onDeleteSequenceFromSource,
@@ -363,6 +366,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         deleteDisabled,
         disableInteractivityDisabled,
         duplicateDisabled,
+        editorInfo,
         fileLocation,
         freezeFrameMenuItem,
         onDeleteSequenceFromSource,

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -196,7 +196,7 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
     const [sequenceDropIndicator, setSequenceDropIndicator] = (0, react_1.useState)(null);
     const [sequenceDropRejection, setSequenceDropRejection] = (0, react_1.useState)(null);
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
-    const { canOpenInEditor, openInEditor, originalLocation } = (0, use_open_sequence_in_editor_1.useOpenSequenceInEditor)(sequence);
+    const { canOpenInEditor, editorInfo, openInEditor, originalLocation } = (0, use_open_sequence_in_editor_1.useOpenSequenceInEditor)(sequence);
     const fileLocation = (0, react_1.useMemo)(() => (0, format_file_location_1.formatFileLocation)({
         location: originalLocation,
         root: window.remotion_cwd,
@@ -580,7 +580,7 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
             }));
             return;
         }
-        openInEditor();
+        openInEditor(null);
     }, [
         canOpenInEditor,
         connectedCompositions,
@@ -714,6 +714,7 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
             deleteDisabled,
             disableInteractivityDisabled,
             duplicateDisabled,
+            editorInfo,
             fileLocation,
             includeSourceEditItems: (0, interactivity_enabled_1.isStudioInteractivityEnabled)(),
             onDeleteSequenceFromSource,
@@ -741,22 +742,26 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
                             },
                         ]
                         : []),
-                    {
-                        type: 'item',
-                        id: 'crop',
-                        keyHint: null,
-                        label: 'Crop',
-                        leftItem: null,
-                        disabled: !canCrop,
-                        onClick: onCrop,
-                        quickSwitcherLabel: null,
-                        subMenu: null,
-                        value: 'crop',
-                    },
-                    {
-                        type: 'divider',
-                        id: 'crop-divider',
-                    },
+                    ...(canCrop
+                        ? [
+                            {
+                                type: 'item',
+                                id: 'crop',
+                                keyHint: null,
+                                label: 'Crop',
+                                leftItem: null,
+                                disabled: false,
+                                onClick: onCrop,
+                                quickSwitcherLabel: null,
+                                subMenu: null,
+                                value: 'crop',
+                            },
+                            {
+                                type: 'divider',
+                                id: 'crop-divider',
+                            },
+                        ]
+                        : []),
                     {
                         type: 'item',
                         id: 'rename-sequence',
@@ -784,6 +789,7 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
         deleteDisabled,
         disableInteractivityDisabled,
         duplicateDisabled,
+        editorInfo,
         fileLocation,
         freezeFrameMenuItem,
         nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.supportsEffects,

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { CanUpdateSequencePropStatus, CanUpdateSequencePropStatusKeyframed, OverrideIdToNodePaths, PropStatuses, SequencePropsSubscriptionKey, TSequence, InteractivitySchema } from 'remotion';
+import type { CanUpdateSequencePropStatus, CanUpdateSequencePropStatusKeyframed, InteractivitySchema, OverrideIdToNodePaths, PropStatuses, SequencePropsSubscriptionKey, TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import type { MoveEffectKeyframeChange, MoveSequenceKeyframeChange } from './call-move-keyframe';
 import { type SaveSequencePropChange } from './save-sequence-prop';

package/dist/components/Timeline/TimelineSequenceRightEdgeDragHandle.js

@@ -9,6 +9,7 @@ const no_react_1 = require("remotion/no-react");
 const calculate_timeline_1 = require("../../helpers/calculate-timeline");
 const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
+const pointer_session_1 = require("../../helpers/pointer-session");
 const sort_by_nonce_history_1 = require("../../helpers/sort-by-nonce-history");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const editor_snapping_1 = require("../../state/editor-snapping");
@@ -604,6 +605,7 @@ const TimelineSequenceLeftEdgeDragHandle = ({ nodePathInfo, windowWidth, timelin
         });
     }, []);
     const onPointerDown = (0, react_1.useCallback)((e) => {
+        var _a, _b;
         if (e.button !== 0) {
             return;
         }
@@ -632,8 +634,11 @@ const TimelineSequenceLeftEdgeDragHandle = ({ nodePathInfo, windowWidth, timelin
             latestDeltaFrames: 0,
             pxPerFrame,
             pointerId: e.pointerId,
+            button: e.button,
+            target: e.currentTarget,
             targets,
         };
+        (_b = (_a = e.currentTarget).setPointerCapture) === null || _b === void 0 ? void 0 : _b.call(_a, e.pointerId);
         document.body.style.userSelect = 'none';
         document.body.style.webkitUserSelect = 'none';
         (0, ForceSpecificCursor_1.forceSpecificCursor)('ew-resize');
@@ -687,20 +692,27 @@ const TimelineSequenceLeftEdgeDragHandle = ({ nodePathInfo, windowWidth, timelin
             }
             finishDrag(false);
         };
-        const onWindowBlur = () => {
-            finishDrag(false);
-        };
-        window.addEventListener('pointermove', onMove);
-        window.addEventListener('pointerup', onUp);
-        window.addEventListener('pointercancel', onCancel);
-        window.addEventListener('blur', onWindowBlur);
-        return () => {
-            window.removeEventListener('pointermove', onMove);
-            window.removeEventListener('pointerup', onUp);
-            window.removeEventListener('pointercancel', onCancel);
-            window.removeEventListener('blur', onWindowBlur);
-            finishDrag(false);
-        };
+        const activeDragState = dragStateRef.current;
+        if (!activeDragState) {
+            return;
+        }
+        return (0, pointer_session_1.startPointerSession)({
+            event: activeDragState,
+            target: activeDragState.target,
+            onMove,
+            onEnd: (reason, endEvent) => {
+                if ((reason === 'pointerup' || reason === 'buttons-released') &&
+                    endEvent) {
+                    onUp(endEvent);
+                }
+                else if (endEvent) {
+                    onCancel(endEvent);
+                }
+                else {
+                    finishDrag(false);
+                }
+            },
+        });
     }, [dragging, finishDrag]);
     const style = {
         ...baseStyle,
@@ -801,6 +813,7 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
         });
     }, []);
     const onPointerDown = (0, react_1.useCallback)((e) => {
+        var _a, _b;
         if (e.button !== 0) {
             return;
         }
@@ -831,8 +844,11 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
             latestDeltaFrames: 0,
             pxPerFrame,
             pointerId: e.pointerId,
+            button: e.button,
+            target: e.currentTarget,
             targets,
         };
+        (_b = (_a = e.currentTarget).setPointerCapture) === null || _b === void 0 ? void 0 : _b.call(_a, e.pointerId);
         document.body.style.userSelect = 'none';
         document.body.style.webkitUserSelect = 'none';
         setDragging(true);
@@ -900,20 +916,27 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
             }
             finishDrag(false);
         };
-        const onWindowBlur = () => {
-            finishDrag(false);
-        };
-        window.addEventListener('pointermove', onMove);
-        window.addEventListener('pointerup', onUp);
-        window.addEventListener('pointercancel', onCancel);
-        window.addEventListener('blur', onWindowBlur);
-        return () => {
-            window.removeEventListener('pointermove', onMove);
-            window.removeEventListener('pointerup', onUp);
-            window.removeEventListener('pointercancel', onCancel);
-            window.removeEventListener('blur', onWindowBlur);
-            finishDrag(false);
-        };
+        const activeDragState = dragStateRef.current;
+        if (!activeDragState) {
+            return;
+        }
+        return (0, pointer_session_1.startPointerSession)({
+            event: activeDragState,
+            target: activeDragState.target,
+            onMove,
+            onEnd: (reason, endEvent) => {
+                if ((reason === 'pointerup' || reason === 'buttons-released') &&
+                    endEvent) {
+                    onUp(endEvent);
+                }
+                else if (endEvent) {
+                    onCancel(endEvent);
+                }
+                else {
+                    finishDrag(false);
+                }
+            },
+        });
     }, [dragging, finishDrag]);
     return {
         dragging,
@@ -994,6 +1017,7 @@ const TimelineSequenceRightEdgeDragHandle = ({ nodePathInfo, windowWidth, timeli
         });
     }, []);
     const onPointerDown = (0, react_1.useCallback)((e) => {
+        var _a, _b;
         if (e.button !== 0) {
             return;
         }
@@ -1022,8 +1046,11 @@ const TimelineSequenceRightEdgeDragHandle = ({ nodePathInfo, windowWidth, timeli
             latestDeltaFrames: 0,
             pxPerFrame,
             pointerId: e.pointerId,
+            button: e.button,
+            target: e.currentTarget,
             targets,
         };
+        (_b = (_a = e.currentTarget).setPointerCapture) === null || _b === void 0 ? void 0 : _b.call(_a, e.pointerId);
         document.body.style.userSelect = 'none';
         document.body.style.webkitUserSelect = 'none';
         (0, ForceSpecificCursor_1.forceSpecificCursor)('ew-resize');
@@ -1072,21 +1099,27 @@ const TimelineSequenceRightEdgeDragHandle = ({ nodePathInfo, windowWidth, timeli
             }
             finishDrag(false);
         };
-        // Bail if the page loses focus mid-drag.
-        const onWindowBlur = () => {
-            finishDrag(false);
-        };
-        window.addEventListener('pointermove', onMove);
-        window.addEventListener('pointerup', onUp);
-        window.addEventListener('pointercancel', onCancel);
-        window.addEventListener('blur', onWindowBlur);
-        return () => {
-            window.removeEventListener('pointermove', onMove);
-            window.removeEventListener('pointerup', onUp);
-            window.removeEventListener('pointercancel', onCancel);
-            window.removeEventListener('blur', onWindowBlur);
-            finishDrag(false);
-        };
+        const activeDragState = dragStateRef.current;
+        if (!activeDragState) {
+            return;
+        }
+        return (0, pointer_session_1.startPointerSession)({
+            event: activeDragState,
+            target: activeDragState.target,
+            onMove,
+            onEnd: (reason, endEvent) => {
+                if ((reason === 'pointerup' || reason === 'buttons-released') &&
+                    endEvent) {
+                    onUp(endEvent);
+                }
+                else if (endEvent) {
+                    onCancel(endEvent);
+                }
+                else {
+                    finishDrag(false);
+                }
+            },
+        });
     }, [dragging, finishDrag]);
     const style = {
         ...baseStyle,

package/dist/components/Timeline/TimelineStack/get-stack.js

@@ -7,6 +7,7 @@ const get_location_of_sequence_1 = require("../../../helpers/get-location-of-seq
 const traceMapCache = {};
 const traceMapPromises = {};
 const browserStudioOriginalSourcePrefix = 'browser-studio-original://';
+const studioOriginalSourcePrefix = 'studio-original://';
 const getSourceMapCache = async (fileName) => {
     if (traceMapCache[fileName]) {
         return traceMapCache[fileName];
@@ -33,11 +34,15 @@ const getOriginalLocationFromStack = async (stack, type) => {
     if (!location) {
         return null;
     }
-    if (location.fileName.startsWith(browserStudioOriginalSourcePrefix)) {
+    const originalSourcePrefix = [
+        browserStudioOriginalSourcePrefix,
+        studioOriginalSourcePrefix,
+    ].find((prefix) => location.fileName.startsWith(prefix));
+    if (originalSourcePrefix) {
         return {
             column: location.columnNumber,
             line: location.lineNumber,
-            source: decodeURIComponent(location.fileName.slice(browserStudioOriginalSourcePrefix.length)),
+            source: decodeURIComponent(location.fileName.slice(originalSourcePrefix.length)),
         };
     }
     const map = await getSourceMapCache(location.fileName);

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

@@ -1,2 +1,4 @@
 import React from 'react';
-export declare const TimelineZoomControls: React.FC;
+export declare const TimelineZoomControls: React.FC<{
+    readonly sliderMaxWidth?: number;
+}>;