@remotion/studio 4.0.516 → 4.0.517

package/dist/components/Timeline/TimelineSelection.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useTimelineRowHighlightBackground = exports.useTimelineRowContainsSelection = exports.useTimelineGuideSelection = exports.useTimelineEasingSelection = exports.useTimelineKeyframeSelection = exports.useTimelineRowSelection = exports.useTimelineMarqueeSelectableItem = exports.useTimelineMarqueeSelection = exports.useCurrentTimelineSelectionStateAsRef = exports.TIMELINE_SCRUBBER_ATTR = exports.TIMELINE_MARQUEE_ITEM_ATTR = exports.useTimelineSelection = exports.TimelineSelectionProvider = exports.TimelineSelectableItemsProvider = exports.getTimelineSequenceSelectionForEscape = exports.TimelineSelectAllKeybindings = exports.getTimelineSequenceSelectionKey = exports.getSelectableTimelineItems = exports.getSelectableTimelineSequenceSelections = exports.getTimelineSelectionKey = exports.getTimelineSelectionFromNodePathInfo = exports.TimelineSelectionOrderProvider = exports.extendTimelineMarqueeSelection = exports.getTimelineMarqueeSelection = exports.timelineMarqueeRectsIntersect = exports.getClampedTimelineMarqueePoint = exports.getNormalizedTimelineMarqueeRect = exports.getAvailableTimelineSelectionState = exports.getTimelineSelectionAfterInteraction = exports.EMPTY_TIMELINE_SELECTION_STATE = exports.shouldSelectTimelineRowOnPointerDown = exports.isTimelineSelectionModifierEvent = exports.TIMELINE_TICKS_BACKGROUND = exports.TIMELINE_BACKGROUND = exports.getTimelineRowHighlightBackground = exports.getTimelineSelectedTrackHighlightStyle = exports.getTimelineColor = exports.getTimelineSelectedLabelStyle = exports.TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING = exports.TIMELINE_SELECTED_LABEL_TEXT = exports.TIMELINE_SELECTED_LABEL_BACKGROUND = exports.TIMELINE_HOVER_BACKGROUND = exports.TIMELINE_EXPANDED_SELECTED_BACKGROUND = exports.TIMELINE_SELECTED_BACKGROUND = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const canvas_1 = require("@remotion/canvas");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
@@ -78,98 +79,8 @@ const shouldSelectTimelineRowOnPointerDown = ({ selected, shiftKey, metaKey, ctr
     return (!selected || (0, exports.isTimelineSelectionModifierEvent)({ shiftKey, metaKey, ctrlKey }));
 };
 exports.shouldSelectTimelineRowOnPointerDown = shouldSelectTimelineRowOnPointerDown;
-exports.EMPTY_TIMELINE_SELECTION_STATE = {
-    selectedItems: [],
-    anchor: null,
-};
-const getTimelineSelectionType = (item) => item.type;
-const areTimelineSelectionTypesCompatible = (firstType, secondType) => {
-    if (firstType === secondType) {
-        return true;
-    }
-    return ((firstType === 'sequence-prop' && secondType === 'sequence-effect-prop') ||
-        (firstType === 'sequence-effect-prop' && secondType === 'sequence-prop') ||
-        (firstType === 'keyframe' && secondType === 'easing') ||
-        (firstType === 'easing' && secondType === 'keyframe'));
-};
-const isTimelineSelectionCompatibleWithType = (item, type) => areTimelineSelectionTypesCompatible(getTimelineSelectionType(item), type);
-const getTimelineSelectionAnchor = (selectedItems, previousAnchor, targetType) => {
-    if (previousAnchor &&
-        getTimelineSelectionType(previousAnchor) === targetType) {
-        return previousAnchor;
-    }
-    for (let i = selectedItems.length - 1; i >= 0; i--) {
-        const candidate = selectedItems[i];
-        if (getTimelineSelectionType(candidate) === targetType) {
-            return candidate;
-        }
-    }
-    return null;
-};
-const getRangeSelection = ({ anchor, clickedItem, allSelectableItems, }) => {
-    const anchorKey = (0, exports.getTimelineSelectionKey)(anchor);
-    const clickedKey = (0, exports.getTimelineSelectionKey)(clickedItem);
-    const orderedOfType = allSelectableItems.filter((item) => getTimelineSelectionType(item) === clickedItem.type);
-    const anchorIndex = orderedOfType.findIndex((item) => (0, exports.getTimelineSelectionKey)(item) === anchorKey);
-    const clickedIndex = orderedOfType.findIndex((item) => (0, exports.getTimelineSelectionKey)(item) === clickedKey);
-    if (anchorIndex === -1 || clickedIndex === -1) {
-        return [clickedItem];
-    }
-    const [from, to] = anchorIndex < clickedIndex
-        ? [anchorIndex, clickedIndex]
-        : [clickedIndex, anchorIndex];
-    return orderedOfType.slice(from, to + 1);
-};
-const getTimelineSelectionAfterInteraction = ({ currentState, clickedItem, interaction, allSelectableItems, }) => {
-    const { selectedItems, anchor: previousAnchor } = currentState;
-    const clickedType = getTimelineSelectionType(clickedItem);
-    if (clickedType === 'guide') {
-        return {
-            selectedItems: [clickedItem],
-            anchor: clickedItem,
-        };
-    }
-    const nextAnchor = getTimelineSelectionAnchor(selectedItems, previousAnchor, clickedType);
-    const clickedKey = (0, exports.getTimelineSelectionKey)(clickedItem);
-    if (interaction.shiftKey && nextAnchor) {
-        return {
-            selectedItems: getRangeSelection({
-                anchor: nextAnchor,
-                clickedItem,
-                allSelectableItems,
-            }),
-            anchor: nextAnchor,
-        };
-    }
-    if (interaction.toggleKey) {
-        const compatibleItems = selectedItems.filter((item) => isTimelineSelectionCompatibleWithType(item, clickedType));
-        const existingKeySet = new Set(compatibleItems.map(exports.getTimelineSelectionKey));
-        if (existingKeySet.has(clickedKey)) {
-            const toggledSelection = compatibleItems.filter((item) => (0, exports.getTimelineSelectionKey)(item) !== clickedKey);
-            return {
-                selectedItems: toggledSelection,
-                anchor: toggledSelection.length === 0 ? null : clickedItem,
-            };
-        }
-        const selectableOrderMap = new Map(allSelectableItems
-            .filter((item) => isTimelineSelectionCompatibleWithType(item, clickedType))
-            .map((item, index) => [(0, exports.getTimelineSelectionKey)(item), index]));
-        const extendedSelection = [...compatibleItems, clickedItem].sort((a, b) => {
-            var _a, _b;
-            return (((_a = selectableOrderMap.get((0, exports.getTimelineSelectionKey)(a))) !== null && _a !== void 0 ? _a : 0) -
-                ((_b = selectableOrderMap.get((0, exports.getTimelineSelectionKey)(b))) !== null && _b !== void 0 ? _b : 0));
-        });
-        return {
-            selectedItems: extendedSelection,
-            anchor: clickedItem,
-        };
-    }
-    return {
-        selectedItems: [clickedItem],
-        anchor: clickedItem,
-    };
-};
-exports.getTimelineSelectionAfterInteraction = getTimelineSelectionAfterInteraction;
+exports.EMPTY_TIMELINE_SELECTION_STATE = canvas_1.EMPTY_CANVAS_SELECTION;
+exports.getTimelineSelectionAfterInteraction = canvas_1.getCanvasSelectionAfterInteraction;
 const getAvailableTimelineSelectionState = ({ availableKeys, availableItemsByKey, state, }) => {
     if (state.selectedItems.length === 0 && state.anchor === null) {
         return state;
@@ -361,29 +272,7 @@ const getTimelineSelectionFromNodePathInfo = (nodePathInfo) => {
     return null;
 };
 exports.getTimelineSelectionFromNodePathInfo = getTimelineSelectionFromNodePathInfo;
-const getTimelineSelectionKey = (item) => {
-    switch (item.type) {
-        case 'guide':
-            return `guide.${item.guideId}`;
-        case 'sequence':
-            return `${(0, exports.getTimelineSequenceSelectionKey)(item.nodePathInfo)}.sequence`;
-        case 'sequence-prop':
-            return `${(0, exports.getTimelineSequenceSelectionKey)(item.nodePathInfo)}.sequence-prop.${item.key}`;
-        case 'sequence-all-effects':
-            return `${(0, exports.getTimelineSequenceSelectionKey)(item.nodePathInfo)}.sequence-all-effects`;
-        case 'sequence-effect':
-            return `${(0, exports.getTimelineSequenceSelectionKey)(item.nodePathInfo)}.sequence-effect.${item.i}`;
-        case 'sequence-effect-prop':
-            return `${(0, exports.getTimelineSequenceSelectionKey)(item.nodePathInfo)}.sequence-effect-prop.${item.i}.${item.key}`;
-        case 'keyframe':
-            return `${(0, timeline_node_path_key_1.timelineNodePathInfoToKey)(item.nodePathInfo)}.keyframe.${item.frame}`;
-        case 'easing':
-            return `${(0, timeline_node_path_key_1.timelineNodePathInfoToKey)(item.nodePathInfo)}.easing.${item.segmentIndex}`;
-        default:
-            throw new Error(`Unexpected timeline selection type: ${item}`);
-    }
-};
-exports.getTimelineSelectionKey = getTimelineSelectionKey;
+exports.getTimelineSelectionKey = canvas_1.getCanvasSelectionItemKey;
 const nodePathDescendsFrom = (descendant, ancestor) => {
     if ((0, studio_shared_1.stringifySequenceExpandedRowKey)(descendant.sequenceSubscriptionKey) !==
         (0, studio_shared_1.stringifySequenceExpandedRowKey)(ancestor.sequenceSubscriptionKey)) {
@@ -511,8 +400,7 @@ const getSelectableTimelineItems = ({ getDragOverrides, getEffectDragOverrides,
     });
 };
 exports.getSelectableTimelineItems = getSelectableTimelineItems;
-const getTimelineSequenceSelectionKey = (nodePathInfo) => (0, timeline_node_path_key_1.timelineNodePathInfoToKey)({ ...nodePathInfo, auxiliaryKeys: [] });
-exports.getTimelineSequenceSelectionKey = getTimelineSequenceSelectionKey;
+exports.getTimelineSequenceSelectionKey = canvas_1.getCanvasSequenceSelectionKey;
 const TimelineSelectAllKeybindings = ({ timeline }) => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const { canSelect } = (0, exports.useTimelineSelection)();
@@ -647,8 +535,8 @@ const TimelineSelectionProvider = ({ children }) => {
         (previewServerState.type === 'connected' ||
             window.remotion_isReadOnlyStudio);
     const keyframeOperationsAvailable = (0, browser_studio_operations_1.canUseKeyframeOperations)();
-    const [selectedItems, setSelectedItems] = (0, react_1.useState)([]);
-    const selectionAnchor = (0, react_1.useRef)(null);
+    const selectionController = (0, canvas_1.useCanvasSelectionController)();
+    const selectionState = (0, canvas_1.useCanvasSelection)(selectionController);
     const selectionScope = (0, react_1.useRef)(null);
     const marqueeSelectableItems = (0, react_1.useRef)(new Map());
     const marqueeRegistrationCounter = (0, react_1.useRef)(0);
@@ -656,25 +544,17 @@ const TimelineSelectionProvider = ({ children }) => {
     (0, react_1.useEffect)(() => {
         if (!canSelect) {
             selectionScope.current = null;
-            selectionAnchor.current = null;
             setRevealRequest(null);
-            setSelectedItems([]);
+            selectionController.clear();
         }
-    }, [canSelect]);
+    }, [canSelect, selectionController]);
     const canSelectItem = (0, react_1.useCallback)((item) => canSelect &&
         (!window.remotion_isReadOnlyStudio ||
             keyframeOperationsAvailable ||
             item.type === 'sequence'), [canSelect, keyframeOperationsAvailable]);
-    const getCurrentAvailableSelectionState = (0, react_1.useCallback)((currentSelectedItems) => {
-        if (selectionScope.current !== timelineSelectionScope) {
-            return exports.EMPTY_TIMELINE_SELECTION_STATE;
-        }
-        return {
-            selectedItems: currentSelectedItems,
-            anchor: selectionAnchor.current,
-        };
-    }, [timelineSelectionScope]);
-    const availableSelectionState = getCurrentAvailableSelectionState(selectedItems);
+    const availableSelectionState = selectionScope.current === timelineSelectionScope
+        ? selectionState
+        : exports.EMPTY_TIMELINE_SELECTION_STATE;
     const availableSelectedItems = availableSelectionState.selectedItems;
     const requestRevealSelectionItem = (0, react_1.useCallback)((item) => {
         setRevealRequest((previousRequest) => {
@@ -700,22 +580,12 @@ const TimelineSelectionProvider = ({ children }) => {
         expandParentTracks(item.nodePathInfo);
     }, [expandParentTracks]);
     (0, react_1.useEffect)(() => {
-        setSelectedItems((currentSelectedItems) => {
-            const nextState = selectionScope.current === timelineSelectionScope
-                ? {
-                    selectedItems: currentSelectedItems,
-                    anchor: selectionAnchor.current,
-                }
-                : exports.EMPTY_TIMELINE_SELECTION_STATE;
-            selectionScope.current = timelineSelectionScope;
-            selectionAnchor.current = nextState.anchor;
-            if (nextState.selectedItems.length === currentSelectedItems.length &&
-                nextState.selectedItems.every((item, index) => item === currentSelectedItems[index])) {
-                return currentSelectedItems;
-            }
-            return nextState.selectedItems;
-        });
-    }, [timelineSelectionScope]);
+        if (selectionScope.current === timelineSelectionScope) {
+            return;
+        }
+        selectionScope.current = timelineSelectionScope;
+        selectionController.clear();
+    }, [selectionController, timelineSelectionScope]);
     const selectedKeys = (0, react_1.useMemo)(() => new Set(availableSelectedItems.map(exports.getTimelineSelectionKey)), [availableSelectedItems]);
     const isSelected = (0, react_1.useCallback)((item) => {
         return selectedKeys.has((0, exports.getTimelineSelectionKey)(item));
@@ -732,26 +602,16 @@ const TimelineSelectionProvider = ({ children }) => {
         if (options.reveal) {
             requestRevealSelectionItem(item);
         }
-        setSelectedItems((currentSelectedItems) => {
-            const currentSelectionState = getCurrentAvailableSelectionState(currentSelectedItems);
-            const nextState = (0, exports.getTimelineSelectionAfterInteraction)({
-                currentState: {
-                    selectedItems: currentSelectionState.selectedItems,
-                    anchor: currentSelectionState.anchor,
-                },
-                clickedItem: item,
-                interaction,
-                allSelectableItems,
-            });
-            selectionScope.current = timelineSelectionScope;
-            selectionAnchor.current = nextState.anchor;
-            return nextState.selectedItems;
-        });
+        if (selectionScope.current !== timelineSelectionScope) {
+            selectionController.clear();
+        }
+        selectionScope.current = timelineSelectionScope;
+        selectionController.select(item, interaction, allSelectableItems);
     }, [
         canSelectItem,
         expandParentsForSelectionItem,
-        getCurrentAvailableSelectionState,
         requestRevealSelectionItem,
+        selectionController,
         timelineSelectionScope,
     ]);
     const selectItems = (0, react_1.useCallback)((items, options = {}) => {
@@ -762,17 +622,16 @@ const TimelineSelectionProvider = ({ children }) => {
             (0, options_sidebar_tabs_1.selectOptionsSidebarInspectorPanel)();
         }
         selectionScope.current = timelineSelectionScope;
-        selectionAnchor.current =
-            items.length === 0 ? null : items[items.length - 1];
         expandParentsForSelectionItems(items);
         if (options.reveal && items.length === 1) {
             requestRevealSelectionItem(items[0]);
         }
-        setSelectedItems(items);
+        selectionController.setSelectedItems(items);
     }, [
         canSelectItem,
         expandParentsForSelectionItems,
         requestRevealSelectionItem,
+        selectionController,
         timelineSelectionScope,
     ]);
     const registerMarqueeSelectableItem = (0, react_1.useCallback)((item, getRect) => {
@@ -819,9 +678,8 @@ const TimelineSelectionProvider = ({ children }) => {
     }, [canSelectItem]);
     const clearSelection = (0, react_1.useCallback)(() => {
         selectionScope.current = null;
-        selectionAnchor.current = null;
-        setSelectedItems([]);
-    }, []);
+        selectionController.clear();
+    }, [selectionController]);
     const containsSelection = (0, react_1.useCallback)((nodePathInfo) => {
         return availableSelectedItems.some((selected) => selected.type !== 'guide' &&
             nodePathDescendsFrom(selected.nodePathInfo, nodePathInfo));
@@ -982,7 +840,9 @@ const useTimelineMarqueeSelection = () => {
                 : nextSelection.selectedItems);
         };
         const autoScroll = (0, timeline_scroll_logic_1.startTimelineEdgeAutoScroll)({
+            includeHorizontal: true,
             includeVertical: true,
+            verticalTopOffset: 0,
             onTick: (directions) => {
                 if (scrollable && directions.x !== null) {
                     scrollable.scrollLeft +=

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
+export declare const SEQUENCE_REORDER_MIME_TYPE = "application/remotion-sequence-reorder";
 export declare const TimelineSequenceItem: React.NamedExoticComponent<{
     readonly afterDropLineOffset: number;
     readonly sequence: TSequence;

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineSequenceItem = void 0;
+exports.TimelineSequenceItem = exports.SEQUENCE_REORDER_MIME_TYPE = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
@@ -98,7 +98,7 @@ const effectDropHighlight = {
     outline: colors_1.BORDER_TIMELINE_DROP_BLUE,
     outlineOffset: -1,
 };
-const SEQUENCE_REORDER_MIME_TYPE = 'application/remotion-sequence-reorder';
+exports.SEQUENCE_REORDER_MIME_TYPE = 'application/remotion-sequence-reorder';
 let currentSequenceDrag = null;
 const TimelineSequenceExpandArrowInner = ({ disabled, isExpanded, nodePathInfo, sequence }) => {
     const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
@@ -146,7 +146,7 @@ const sequenceReorderAfterLine = {
     top: -1,
 };
 const hasSequenceReorderDragType = (dataTransfer) => {
-    return Array.from(dataTransfer.types).includes(SEQUENCE_REORDER_MIME_TYPE);
+    return Array.from(dataTransfer.types).includes(exports.SEQUENCE_REORDER_MIME_TYPE);
 };
 const isSequenceReorderDrag = (dataTransfer) => {
     return (currentSequenceDrag !== null || hasSequenceReorderDragType(dataTransfer));
@@ -155,7 +155,7 @@ const getSequenceReorderDragData = (dataTransfer) => {
     if (currentSequenceDrag) {
         return currentSequenceDrag;
     }
-    const value = dataTransfer.getData(SEQUENCE_REORDER_MIME_TYPE);
+    const value = dataTransfer.getData(exports.SEQUENCE_REORDER_MIME_TYPE);
     if (!value) {
         return null;
     }
@@ -378,7 +378,7 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
         };
         currentSequenceDrag = dragData;
         e.dataTransfer.effectAllowed = 'move';
-        e.dataTransfer.setData(SEQUENCE_REORDER_MIME_TYPE, JSON.stringify(dragData));
+        e.dataTransfer.setData(exports.SEQUENCE_REORDER_MIME_TYPE, JSON.stringify(dragData));
         e.stopPropagation();
     }, [
         canReorderSequence,
@@ -913,7 +913,9 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
     }, [canDropEffect, nodePath, previewServerState, validatedLocation]);
     const trackRow = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: nestedDepth, eye: canToggleVisibility ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: rowStyle, selected: selected, selectable: selectable, onSelect: onSelect, showSelectedBackground: true, containsSelection: containsSelection, hovered: hovered, outerHeight: outerHeight, onDragLeave: canDropEffect ? onEffectDragLeave : undefined, onDragOver: canDropEffect ? onEffectDragOver : undefined, onDrop: canDropEffect ? onEffectDrop : undefined, onDoubleClick: canHandleSequenceDoubleClick ? onSequenceDoubleClick : undefined, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsxs("div", { style: labelContainerStyle, children: [connectedCompositions.length > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                         jsx_runtime_1.jsx(CompositionOrStillIcon_1.CompositionOrStillIcon, { color: (0, TimelineSelection_1.getTimelineColor)(false, false), composition: connectedCompositions[0], style: connectedCompositionIconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 })
-                    ] })) : null, jsx_runtime_1.jsx(TimelineSequenceName_1.TimelineSequenceName, { displayName: timelineDisplayName, fallbackDisplayName: fallbackDisplayName, selected: selected, containsSelection: containsSelection, editing: isRenaming, onCancelEditing: onCancelRenaming, onSaveName: onSaveName }), hasExpandableContent && nodePathInfo !== null ? (jsx_runtime_1.jsx(TimelineSequenceExpandArrow, { disabled: !previewInteractive, isExpanded: isExpanded, nodePathInfo: nodePathInfo, sequence: sequence })) : null, numberOfHiddenDuplicates > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    ] })) : null, jsx_runtime_1.jsx(TimelineSequenceName_1.TimelineSequenceName, { displayName: timelineDisplayName, fallbackDisplayName: fallbackDisplayName, selected: selected, containsSelection: containsSelection, editing: isRenaming, onCancelEditing: onCancelRenaming, onSaveName: onSaveName }), hasExpandableContent && nodePathInfo !== null ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                        jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(TimelineSequenceExpandArrow, { disabled: !previewInteractive, isExpanded: isExpanded, nodePathInfo: nodePathInfo, sequence: sequence })
+                    ] })) : null, numberOfHiddenDuplicates > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                         jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(TimelineDuplicateCount_1.TimelineDuplicateCount, { count: numberOfHiddenDuplicates })
                     ] })) : null, mediaSrc ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                         jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }),

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

@@ -3,7 +3,6 @@ import type { CanUpdateSequencePropStatus, CanUpdateSequencePropStatusKeyframed,
 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';
-import { type TimelineSelection } from './TimelineSelection';
 export declare const timelineSequenceFromDragSnapThresholdPx = 10;
 export type TimelineSequenceDurationDragTarget = {
     readonly fileName: string;
@@ -105,21 +104,21 @@ export declare const getTimelineSequenceFromDragKeyframeMoves: ({ targets, delta
 };
 export declare const getTimelineSequenceDurationDragTargets: ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, propStatuses, }: {
     readonly draggedNodePathInfo: SequenceNodePathInfo;
-    readonly selectedItems: readonly TimelineSelection[];
+    readonly selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[];
     readonly sequences: TSequence[];
     readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
     readonly propStatuses: PropStatuses;
 }) => TimelineSequenceDurationDragTarget[] | null;
 export declare const getTimelineSequenceLeftEdgeDragTargets: ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, propStatuses, }: {
     readonly draggedNodePathInfo: SequenceNodePathInfo;
-    readonly selectedItems: readonly TimelineSelection[];
+    readonly selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[];
     readonly sequences: TSequence[];
     readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
     readonly propStatuses: PropStatuses;
 }) => TimelineSequenceLeftEdgeDragTarget[] | null;
 export declare const getTimelineSequenceFromDragTargets: ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, propStatuses, }: {
     readonly draggedNodePathInfo: SequenceNodePathInfo;
-    readonly selectedItems: readonly TimelineSelection[];
+    readonly selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[];
     readonly sequences: TSequence[];
     readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
     readonly propStatuses: PropStatuses;

package/dist/components/Timeline/delete-selected-timeline-item.d.ts

@@ -2,17 +2,16 @@ import type { OverrideIdToNodePaths, PropStatuses, TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import type { ConfirmationDialogFunction } from '../ConfirmationDialog-types';
 import type { SetPropStatuses } from './save-sequence-prop';
-import { type TimelineSelection } from './TimelineSelection';
 export declare const deleteSequencesFromSource: (nodePathInfos: SequenceNodePathInfo[], confirm: ConfirmationDialogFunction) => Promise<boolean>;
 export declare const getTimelineSelectionAfterDeletingItems: ({ selections, sequences, overrideIdsToNodePaths, propStatuses, timelinePosition, }: {
-    readonly selections: readonly TimelineSelection[];
+    readonly selections: readonly import("@remotion/canvas").CanvasSelectionItem[];
     readonly sequences?: TSequence[] | undefined;
     readonly overrideIdsToNodePaths?: OverrideIdToNodePaths | undefined;
     readonly propStatuses?: PropStatuses | undefined;
     readonly timelinePosition?: number | undefined;
-}) => readonly TimelineSelection[];
+}) => readonly import("@remotion/canvas").CanvasSelectionItem[];
 export declare const deleteSelectedTimelineItems: ({ selections, sequences, overrideIdsToNodePaths, setPropStatuses, clientId, confirm, propStatuses, timelinePosition, }: {
-    selections: readonly TimelineSelection[];
+    selections: readonly import("@remotion/canvas").CanvasSelectionItem[];
     sequences: TSequence[];
     overrideIdsToNodePaths: OverrideIdToNodePaths;
     setPropStatuses: SetPropStatuses;

package/dist/components/Timeline/duplicate-selected-timeline-item.d.ts

@@ -1,14 +1,13 @@
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import type { ConfirmationDialogFunction } from '../ConfirmationDialog-types';
-import type { TimelineSelection } from './TimelineSelection';
 export declare const duplicateSequencesFromSource: (nodePathInfos: readonly SequenceNodePathInfo[], confirm: ConfirmationDialogFunction) => Promise<void>;
-export declare const isDuplicatableSequenceRowSelection: (selection: TimelineSelection) => selection is {
+export declare const isDuplicatableSequenceRowSelection: (selection: import("@remotion/canvas").CanvasSelectionItem) => selection is {
     readonly type: "sequence";
     readonly nodePathInfo: SequenceNodePathInfo;
 } & {
     type: "sequence";
 };
-export declare const isDuplicatableEffectSelection: (selection: TimelineSelection) => selection is {
+export declare const isDuplicatableEffectSelection: (selection: import("@remotion/canvas").CanvasSelectionItem) => selection is {
     readonly type: "sequence-effect";
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly i: number;
@@ -16,6 +15,6 @@ export declare const isDuplicatableEffectSelection: (selection: TimelineSelectio
     type: "sequence-effect";
 };
 export declare const duplicateSelectedTimelineItems: ({ selections, confirm, }: {
-    selections: readonly TimelineSelection[];
+    selections: readonly import("@remotion/canvas").CanvasSelectionItem[];
     confirm: ConfirmationDialogFunction;
 }) => Promise<void> | null;

package/dist/components/Timeline/find-track-for-node-path-info.d.ts

@@ -4,4 +4,4 @@ export declare const findTrackForNodePathInfo: ({ sequences, overrideIdsToNodePa
     sequences: TSequence[];
     overrideIdsToNodePaths: OverrideIdToNodePaths;
     nodePathInfo: SequenceNodePathInfo;
-}) => import("../../helpers/get-timeline-sequence-sort-key").TimelineTrackData | undefined;
+}) => import("@remotion/canvas").TimelineTrackData | undefined;

package/dist/components/Timeline/keyframe-clipboard.d.ts

@@ -1,8 +1,7 @@
 import type { KeyframeClipboardData, KeyframeClipboardFieldType } from '@remotion/studio-shared';
 import { type InteractivitySchema, type OverrideIdToNodePaths, type PropStatuses, type SequencePropsSubscriptionKey, type TSequence } from 'remotion';
-import type { TimelineSelection } from './TimelineSelection';
 export declare const getKeyframeClipboardDataFromSelections: ({ selections, sequences, overrideIdsToNodePaths, propStatuses, }: {
-    readonly selections: readonly TimelineSelection[];
+    readonly selections: readonly import("@remotion/canvas").CanvasSelectionItem[];
     readonly sequences: TSequence[];
     readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
     readonly propStatuses: PropStatuses;
@@ -29,7 +28,7 @@ export declare const isKeyframeValueCompatible: ({ value, fieldType, }: {
     readonly fieldType: KeyframeClipboardFieldType | null;
 }) => boolean;
 export declare const getPasteKeyframeTarget: ({ selectedItems, payload, timelinePosition, sequences, overrideIdsToNodePaths, propStatuses, }: {
-    readonly selectedItems: readonly TimelineSelection[];
+    readonly selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[];
     readonly payload: KeyframeClipboardData;
     readonly timelinePosition: number;
     readonly sequences: TSequence[];

package/dist/components/Timeline/reset-selected-timeline-props.d.ts

@@ -1,6 +1,5 @@
 import type { OverrideIdToNodePaths, PropStatuses, SequencePropsSubscriptionKey, InteractivitySchema, TSequence } from 'remotion';
 import type { SetPropStatuses } from './save-sequence-prop';
-import type { TimelineSelection } from './TimelineSelection';
 type SequencePropResetTarget = {
     readonly type: 'sequence-prop';
     readonly fileName: string;
@@ -22,13 +21,13 @@ type EffectPropResetTarget = {
 };
 type TimelinePropResetTarget = SequencePropResetTarget | EffectPropResetTarget;
 export declare const getTimelinePropResetTargets: ({ selections, sequences, overrideIdsToNodePaths, propStatuses, }: {
-    readonly selections: readonly TimelineSelection[];
+    readonly selections: readonly import("@remotion/canvas").CanvasSelectionItem[];
     readonly sequences: TSequence[];
     readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
     readonly propStatuses: PropStatuses;
 }) => TimelinePropResetTarget[] | null;
 export declare const resetSelectedTimelineProps: ({ selections, sequences, overrideIdsToNodePaths, propStatuses, setPropStatuses, clientId, }: {
-    readonly selections: readonly TimelineSelection[];
+    readonly selections: readonly import("@remotion/canvas").CanvasSelectionItem[];
     readonly sequences: TSequence[];
     readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
     readonly propStatuses: PropStatuses;

package/dist/components/Timeline/sequence-prop-clipboard.d.ts

@@ -1,9 +1,8 @@
 import { type EffectClipboardParam, type SequencePropClipboardData } from '@remotion/studio-shared';
 import { type CanUpdateSequencePropStatus, type InteractivitySchema, type OverrideIdToNodePaths, type PropStatuses, type SequencePropsSubscriptionKey, type TSequence } from 'remotion';
-import type { TimelineSelection } from './TimelineSelection';
 export declare const propStatusToClipboardParam: (prop: CanUpdateSequencePropStatus) => EffectClipboardParam | null;
 export declare const getSequencePropClipboardDataFromSelection: ({ selection, propStatuses, sequences, overrideIdsToNodePaths, }: {
-    readonly selection: TimelineSelection;
+    readonly selection: import("@remotion/canvas").CanvasSelectionItem;
     readonly propStatuses: PropStatuses;
     readonly sequences: TSequence[];
     readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
@@ -22,7 +21,7 @@ export type PasteSequencePropTarget = {
     readonly type: 'none' | 'prop-mismatch' | 'uncopyable' | 'incompatible';
 };
 export declare const getPasteSequencePropTarget: ({ selectedItems, payload, propStatuses, sequences, overrideIdsToNodePaths, }: {
-    readonly selectedItems: readonly TimelineSelection[];
+    readonly selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[];
     readonly payload: SequencePropClipboardData;
     readonly propStatuses: PropStatuses;
     readonly sequences: TSequence[];

package/dist/components/Timeline/split-selected-timeline-item.d.ts

@@ -1,6 +1,5 @@
 import type { CanUpdateSequencePropStatus, OverrideIdToNodePaths, PropStatuses, TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
-import type { TimelineSelection } from './TimelineSelection';
 export type SplitTimelineSequenceEligibility = {
     canSplit: true;
     nodePathInfo: SequenceNodePathInfo;
@@ -9,7 +8,7 @@ export type SplitTimelineSequenceEligibility = {
     reason: string;
 };
 export declare const getTimelineSequenceSplitEligibility: ({ selection, sequence, splitFrame, propStatuses, }: {
-    selection: TimelineSelection;
+    selection: import("@remotion/canvas").CanvasSelectionItem;
     sequence: TSequence | null;
     splitFrame: number;
     propStatuses?: Partial<Record<"durationInFrames" | "from" | "trimBefore", CanUpdateSequencePropStatus>> | undefined;
@@ -25,7 +24,7 @@ export declare const shouldHandleTimelineSplitShortcut: ({ shiftKey, }: {
     readonly shiftKey: boolean;
 }) => boolean;
 export declare const splitSelectedTimelineItems: ({ selections, sequences, overrideIdsToNodePaths, propStatuses, splitFrame, splitSequence, }: {
-    selections: readonly TimelineSelection[];
+    selections: readonly import("@remotion/canvas").CanvasSelectionItem[];
     sequences: TSequence[];
     overrideIdsToNodePaths: OverrideIdToNodePaths;
     propStatuses: PropStatuses | undefined;

package/dist/components/Timeline/timeline-expanded-filter.d.ts

@@ -1,11 +1,10 @@
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import type { TimelineTreeNode } from '../../helpers/timeline-layout';
-import type { TimelineSelection } from './TimelineSelection';
 export declare const filterTimelineExpandedTree: ({ nodes, shouldShowNode, }: {
     readonly nodes: readonly TimelineTreeNode[];
     readonly shouldShowNode: (node: TimelineTreeNode) => boolean;
 }) => TimelineTreeNode[];
-export declare const getSelectedTimelineExpandedRowKeys: (selectedItems: readonly TimelineSelection[]) => ReadonlySet<string>;
+export declare const getSelectedTimelineExpandedRowKeys: (selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[]) => ReadonlySet<string>;
 export declare const isTimelineExpandedNodeSelected: ({ nodePathInfo, selectedRowKeys, }: {
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly selectedRowKeys: ReadonlySet<string>;

package/dist/components/Timeline/timeline-scroll-logic.d.ts

@@ -17,13 +17,15 @@ export type TimelineEdgeAutoScroller = {
 };
 /**
  * Shared edge auto-scroll loop for drag gestures on the timeline (playhead
- * scrubbing, marquee selection). Detects when the pointer is in an edge zone
- * and repeatedly invokes `onTick` while it stays there. The consumer performs
- * the actual scrolling (and any dependent updates) inside `onTick`, so it can
- * read a settled scroll position afterwards.
+ * scrubbing, marquee selection, sequence reordering). Detects when the pointer
+ * is in an edge zone and repeatedly invokes `onTick` while it stays there. The
+ * consumer performs the actual scrolling (and any dependent updates) inside
+ * `onTick`, so it can read a settled scroll position afterwards.
  */
-export declare const startTimelineEdgeAutoScroll: ({ includeVertical, onTick, }: {
+export declare const startTimelineEdgeAutoScroll: ({ includeHorizontal, includeVertical, verticalTopOffset, onTick, }: {
+    includeHorizontal: boolean;
     includeVertical: boolean;
+    verticalTopOffset: number;
     onTick: (directions: TimelineEdgeScrollDirections) => void;
 }) => TimelineEdgeAutoScroller;
 export declare const getFrameWhileScrollingLeft: ({ durationInFrames, width, }: {

package/dist/components/Timeline/timeline-scroll-logic.js

@@ -36,10 +36,10 @@ const canScrollTimelineVerticallyIntoDirection = () => {
         canScrollDown: scrollHeight - scrollTop - clientHeight > 0,
     };
 };
-const getEdgeScrollDirections = ({ clientX, clientY, includeVertical, active, }) => {
+const getEdgeScrollDirections = ({ clientX, clientY, includeHorizontal, includeVertical, verticalTopOffset, active, }) => {
     let x = null;
     const scrollable = timeline_refs_1.scrollableRef.current;
-    if (scrollable) {
+    if (includeHorizontal && scrollable) {
         const rect = scrollable.getBoundingClientRect();
         const leftThreshold = rect.left + (active.x === 'left' ? EDGE_SCROLL_EXIT_HYSTERESIS : 0);
         const rightThreshold = rect.left +
@@ -59,6 +59,7 @@ const getEdgeScrollDirections = ({ clientX, clientY, includeVertical, active, })
     if (includeVertical && vertical) {
         const rect = vertical.getBoundingClientRect();
         const topThreshold = rect.top +
+            verticalTopOffset +
             EDGE_SCROLL_VERTICAL_INSET +
             (active.y === 'up' ? EDGE_SCROLL_EXIT_HYSTERESIS : 0);
         const bottomThreshold = rect.bottom -
@@ -76,12 +77,12 @@ const getEdgeScrollDirections = ({ clientX, clientY, includeVertical, active, })
 };
 /**
  * Shared edge auto-scroll loop for drag gestures on the timeline (playhead
- * scrubbing, marquee selection). Detects when the pointer is in an edge zone
- * and repeatedly invokes `onTick` while it stays there. The consumer performs
- * the actual scrolling (and any dependent updates) inside `onTick`, so it can
- * read a settled scroll position afterwards.
+ * scrubbing, marquee selection, sequence reordering). Detects when the pointer
+ * is in an edge zone and repeatedly invokes `onTick` while it stays there. The
+ * consumer performs the actual scrolling (and any dependent updates) inside
+ * `onTick`, so it can read a settled scroll position afterwards.
  */
-const startTimelineEdgeAutoScroll = ({ includeVertical, onTick, }) => {
+const startTimelineEdgeAutoScroll = ({ includeHorizontal, includeVertical, verticalTopOffset, onTick, }) => {
     let active = { x: null, y: null };
     let lastPointer = null;
     let interval = null;
@@ -98,7 +99,9 @@ const startTimelineEdgeAutoScroll = ({ includeVertical, onTick, }) => {
         active = getEdgeScrollDirections({
             clientX: lastPointer.clientX,
             clientY: lastPointer.clientY,
+            includeHorizontal,
             includeVertical,
+            verticalTopOffset,
             active,
         });
         if (active.x === null && active.y === null) {
@@ -112,7 +115,9 @@ const startTimelineEdgeAutoScroll = ({ includeVertical, onTick, }) => {
         active = getEdgeScrollDirections({
             clientX: e.clientX,
             clientY: e.clientY,
+            includeHorizontal,
             includeVertical,
+            verticalTopOffset,
             active,
         });
         if (active.x !== null || active.y !== null) {