@remotion/studio 4.0.479 → 4.0.481

package/dist/components/Timeline/TimelineSelection.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-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.TimelineSelectAllKeybindings = exports.getTimelineSequenceSelectionKey = exports.getSelectableTimelineSequenceSelections = exports.getTimelineSelectionKey = exports.getTimelineSelectionFromNodePathInfo = 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.getTimelineSelectedTrackHighlightStyle = exports.getTimelineColor = exports.getTimelineSelectedLabelStyle = exports.TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING = exports.TIMELINE_SELECTED_LABEL_TEXT = exports.TIMELINE_SELECTED_LABEL_BACKGROUND = exports.TIMELINE_SELECTED_BACKGROUND = void 0;
+exports.useTimelineRowContainsSelection = exports.useTimelineGuideSelection = exports.useTimelineEasingSelection = exports.useTimelineKeyframeSelection = exports.useTimelineRowSelection = exports.useTimelineFocusableItem = exports.useTimelineMarqueeSelectableItem = exports.useTimelineMarqueeSelection = exports.useCurrentTimelineSelectionStateAsRef = exports.TIMELINE_SCRUBBER_ATTR = exports.TIMELINE_MARQUEE_ITEM_ATTR = exports.useTimelineSelection = exports.TimelineSelectionProvider = exports.TimelineSelectableItemsProvider = exports.TimelineSelectAllKeybindings = exports.getTimelineSequenceSelectionKey = exports.getSelectableTimelineItems = exports.getSelectableTimelineSequenceSelections = exports.getTimelineSelectionKey = exports.getTimelineSelectionFromNodePathInfo = exports.TimelineSelectionOrderProvider = 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.getTimelineSelectedTrackHighlightStyle = exports.getTimelineColor = exports.getTimelineSelectedLabelStyle = exports.TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING = exports.TIMELINE_SELECTED_LABEL_TEXT = exports.TIMELINE_SELECTED_LABEL_BACKGROUND = exports.TIMELINE_SELECTED_BACKGROUND = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
@@ -11,6 +11,11 @@ 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");
 const z_index_1 = require("../../state/z-index");
+const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
+const get_node_keyframes_1 = require("./get-node-keyframes");
+const get_timeline_easing_segments_1 = require("./get-timeline-easing-segments");
+const timeline_expanded_filter_1 = require("./timeline-expanded-filter");
+const timeline_refs_1 = require("./timeline-refs");
 const TimelineClipboardKeybindings_1 = require("./TimelineClipboardKeybindings");
 const TimelineDeleteKeybindings_1 = require("./TimelineDeleteKeybindings");
 exports.TIMELINE_SELECTED_BACKGROUND = '#3B3F42';
@@ -242,8 +247,8 @@ const defaultTimelineSelectionContextValue = {
     isSelected: () => false,
     selectItem: () => undefined,
     selectItems: () => undefined,
-    registerSelectableItem: () => () => undefined,
     registerMarqueeSelectableItem: () => () => undefined,
+    registerFocusableItem: () => () => undefined,
     getMarqueeSelection: () => ({
         lockedSelectionKind: null,
         selectedItems: [],
@@ -252,7 +257,16 @@ const defaultTimelineSelectionContextValue = {
     clearSelection: () => undefined,
 };
 const TimelineSelectionContext = (0, react_1.createContext)(defaultTimelineSelectionContextValue);
+const EMPTY_SELECTABLE_TIMELINE_ITEMS = [];
+const SelectableTimelineItemsContext = (0, react_1.createContext)({ current: EMPTY_SELECTABLE_TIMELINE_ITEMS });
+const TimelineSelectionOrderProvider = ({ children, items }) => {
+    const itemsRef = (0, react_1.useRef)(items);
+    itemsRef.current = items;
+    return (jsx_runtime_1.jsx(SelectableTimelineItemsContext.Provider, { value: itemsRef, children: children }));
+};
+exports.TimelineSelectionOrderProvider = TimelineSelectionOrderProvider;
 const CurrentTimelineSelectionContext = (0, react_1.createContext)(null);
+const TIMELINE_SELECTION_FOCUS_PADDING = 8;
 const parseEffectIndex = (effectIndex) => {
     const parsed = Number(effectIndex);
     if (!Number.isInteger(parsed) || parsed < 0) {
@@ -341,6 +355,108 @@ const getSelectableTimelineSequenceSelections = (tracks) => {
     });
 };
 exports.getSelectableTimelineSequenceSelections = getSelectableTimelineSequenceSelections;
+const canEditEasingForInterpolationFunction = (interpolationFunction) => interpolationFunction === 'interpolate' ||
+    interpolationFunction === 'interpolateColors';
+const getTimelineTreeNodeCanEditEasing = ({ node, nodePathInfo, propStatuses, }) => {
+    var _a;
+    if (node.kind !== 'field' || node.field === null) {
+        return false;
+    }
+    if (node.field.kind === 'sequence-field') {
+        const sequencePropStatus = (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePathInfo.sequenceSubscriptionKey)) === null || _a === void 0 ? void 0 : _a[node.field.key];
+        return ((sequencePropStatus === null || sequencePropStatus === void 0 ? void 0 : sequencePropStatus.status) === 'keyframed' &&
+            canEditEasingForInterpolationFunction(sequencePropStatus.interpolationFunction));
+    }
+    const effectStatus = remotion_1.Internals.getEffectPropStatusesCtx({
+        propStatuses,
+        nodePath: nodePathInfo.sequenceSubscriptionKey,
+        effectIndex: node.field.effectIndex,
+    });
+    const effectPropStatus = effectStatus.type === 'can-update-effect'
+        ? effectStatus.props[node.field.key]
+        : null;
+    return ((effectPropStatus === null || effectPropStatus === void 0 ? void 0 : effectPropStatus.status) === 'keyframed' &&
+        canEditEasingForInterpolationFunction(effectPropStatus.interpolationFunction));
+};
+const getSelectableTimelineItems = ({ getDragOverrides, getEffectDragOverrides, getIsExpanded, propStatuses, selectedItems, timeline, timelinePosition, }) => {
+    const selectedRowKeys = (0, timeline_expanded_filter_1.getSelectedTimelineExpandedRowKeys)(selectedItems);
+    return timeline.flatMap((track) => {
+        const { nodePathInfo } = track;
+        if (nodePathInfo === null) {
+            return [];
+        }
+        const sequenceSelection = (0, exports.getTimelineSelectionFromNodePathInfo)(nodePathInfo);
+        if (sequenceSelection === null) {
+            return [];
+        }
+        if (!getIsExpanded(nodePathInfo)) {
+            return [sequenceSelection];
+        }
+        const tree = (0, timeline_layout_1.buildTimelineTree)({
+            sequence: track.sequence,
+            nodePathInfo,
+            getDragOverrides,
+            getEffectDragOverrides,
+            propStatuses,
+        });
+        const filteredTree = (0, timeline_expanded_filter_1.filterTimelineExpandedTree)({
+            nodes: tree,
+            shouldShowNode: (node) => (0, timeline_expanded_filter_1.isTimelineExpandedNodeSelected)({
+                nodePathInfo: node.nodePathInfo,
+                selectedRowKeys,
+            }) ||
+                (0, get_node_keyframes_1.getNodeHasKeyframes)({
+                    node,
+                    nodePath: nodePathInfo.sequenceSubscriptionKey,
+                    propStatuses,
+                    getDragOverrides,
+                    getEffectDragOverrides,
+                }),
+        });
+        const visibleTreeRows = (0, timeline_layout_1.flattenVisibleTreeNodes)({
+            nodes: filteredTree,
+            getIsExpanded,
+        });
+        return [
+            sequenceSelection,
+            ...visibleTreeRows.flatMap(({ node }) => {
+                const rowSelection = (0, exports.getTimelineSelectionFromNodePathInfo)(node.nodePathInfo);
+                if (rowSelection === null) {
+                    return [];
+                }
+                const keyframes = (0, get_node_keyframes_1.getNodeKeyframes)({
+                    node,
+                    nodePath: nodePathInfo.sequenceSubscriptionKey,
+                    propStatuses,
+                    keyframeDisplayOffset: track.keyframeDisplayOffset,
+                    getDragOverrides,
+                    getEffectDragOverrides,
+                    timelinePosition,
+                });
+                const keyframeSelections = keyframes.map((keyframe) => ({
+                    type: 'keyframe',
+                    nodePathInfo: node.nodePathInfo,
+                    frame: keyframe.frame,
+                }));
+                const easingSelections = getTimelineTreeNodeCanEditEasing({
+                    node,
+                    nodePathInfo,
+                    propStatuses,
+                })
+                    ? (0, get_timeline_easing_segments_1.getTimelineEasingSegments)(keyframes).map((segment) => ({
+                        type: 'easing',
+                        nodePathInfo: node.nodePathInfo,
+                        fromFrame: segment.fromFrame,
+                        toFrame: segment.toFrame,
+                        segmentIndex: segment.segmentIndex,
+                    }))
+                    : [];
+                return [rowSelection, ...easingSelections, ...keyframeSelections];
+            }),
+        ];
+    });
+};
+exports.getSelectableTimelineItems = getSelectableTimelineItems;
 const getTimelineSequenceSelectionKey = (nodePathInfo) => (0, timeline_node_path_key_1.timelineNodePathInfoToKey)({ ...nodePathInfo, auxiliaryKeys: [] });
 exports.getTimelineSequenceSelectionKey = getTimelineSequenceSelectionKey;
 const TimelineSelectAllKeybindings = ({ timeline }) => {
@@ -376,25 +492,72 @@ const TimelineSelectAllKeybindings = ({ timeline }) => {
     return null;
 };
 exports.TimelineSelectAllKeybindings = TimelineSelectAllKeybindings;
+const TimelineEscapeKeybindings = () => {
+    const keybindings = (0, use_keybinding_1.useKeybinding)();
+    const currentSelection = (0, exports.useCurrentTimelineSelectionStateAsRef)();
+    (0, react_1.useEffect)(() => {
+        const escape = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'Escape',
+            callback: (event) => {
+                const { selectedItems, clearSelection } = currentSelection.current;
+                if (selectedItems.length === 0) {
+                    return;
+                }
+                clearSelection();
+                event.preventDefault();
+            },
+            commandCtrlKey: false,
+            preventDefault: false,
+            triggerIfInputFieldFocused: false,
+            keepRegisteredWhenNotHighestContext: false,
+        });
+        return () => {
+            escape.unregister();
+        };
+    }, [currentSelection, keybindings]);
+    return null;
+};
+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,
+        getEffectDragOverrides,
+        getIsExpanded,
+        propStatuses,
+        selectedItems,
+        timeline,
+        timelinePosition,
+    }), [
+        getDragOverrides,
+        getEffectDragOverrides,
+        getIsExpanded,
+        propStatuses,
+        selectedItems,
+        timeline,
+        timelinePosition,
+    ]);
+    return (jsx_runtime_1.jsx(exports.TimelineSelectionOrderProvider, { items: selectableItems, children: children }));
+};
+exports.TimelineSelectableItemsProvider = TimelineSelectableItemsProvider;
 const TimelineSelectionProvider = ({ children }) => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const timelineSelectionScope = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? canvasContent.compositionId : null;
+    const { expandParentTracks } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
     const canSelect = previewServerState.type === 'connected' &&
         !window.remotion_isReadOnlyStudio;
     const [selectedItems, setSelectedItems] = (0, react_1.useState)([]);
     const selectionAnchor = (0, react_1.useRef)(null);
     const selectionScope = (0, react_1.useRef)(null);
-    const selectableItemsOrder = (0, react_1.useRef)(new Map());
-    const selectableItems = (0, react_1.useRef)(new Map());
-    const selectableItemRegistrationCounts = (0, react_1.useRef)(new Map());
     const marqueeSelectableItems = (0, react_1.useRef)(new Map());
-    const registrationCounter = (0, react_1.useRef)(0);
     const marqueeRegistrationCounter = (0, react_1.useRef)(0);
-    const [selectableItemsVersion, setSelectableItemsVersion] = (0, react_1.useState)(0);
-    const bumpSelectableItemsVersion = (0, react_1.useCallback)(() => {
-        setSelectableItemsVersion((version) => version + 1);
-    }, []);
+    const focusableItems = (0, react_1.useRef)(new Map());
+    const previousSingleSelectionKey = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         if (!canSelect) {
             selectionScope.current = null;
@@ -407,28 +570,65 @@ const TimelineSelectionProvider = ({ children }) => {
         if (selectionScope.current !== timelineSelectionScope) {
             return exports.EMPTY_TIMELINE_SELECTION_STATE;
         }
-        return (0, exports.getAvailableTimelineSelectionState)({
-            availableKeys: new Set(selectableItems.current.keys()),
-            availableItemsByKey: selectableItems.current,
-            state: {
-                selectedItems: currentSelectedItems,
-                anchor: selectionAnchor.current,
-            },
-        });
+        return {
+            selectedItems: currentSelectedItems,
+            anchor: selectionAnchor.current,
+        };
     }, [timelineSelectionScope]);
     const availableSelectionState = getCurrentAvailableSelectionState(selectedItems);
     const availableSelectedItems = availableSelectionState.selectedItems;
+    (0, react_1.useEffect)(() => {
+        if (availableSelectedItems.length !== 1) {
+            previousSingleSelectionKey.current = null;
+            return;
+        }
+        const selectedKey = (0, exports.getTimelineSelectionKey)(availableSelectedItems[0]);
+        if (previousSingleSelectionKey.current === selectedKey) {
+            return;
+        }
+        previousSingleSelectionKey.current = selectedKey;
+        const animationFrame = requestAnimationFrame(() => {
+            var _a;
+            const registered = (_a = focusableItems.current.get(selectedKey)) !== null && _a !== void 0 ? _a : marqueeSelectableItems.current.get(selectedKey);
+            const scrollParent = timeline_refs_1.timelineVerticalScroll.current;
+            const rect = registered === null || registered === void 0 ? void 0 : registered.getRect();
+            if (!scrollParent || !rect) {
+                return;
+            }
+            const parentRect = scrollParent.getBoundingClientRect();
+            if (rect.top < parentRect.top) {
+                scrollParent.scrollTop -=
+                    parentRect.top - rect.top + TIMELINE_SELECTION_FOCUS_PADDING;
+                return;
+            }
+            if (rect.bottom > parentRect.bottom) {
+                scrollParent.scrollTop +=
+                    rect.bottom - parentRect.bottom + TIMELINE_SELECTION_FOCUS_PADDING;
+            }
+        });
+        return () => cancelAnimationFrame(animationFrame);
+    }, [availableSelectedItems]);
+    const expandParentsForSelectionItems = (0, react_1.useCallback)((items) => {
+        for (const item of items) {
+            if (item.type === 'guide') {
+                continue;
+            }
+            expandParentTracks(item.nodePathInfo);
+        }
+    }, [expandParentTracks]);
+    const expandParentsForSelectionItem = (0, react_1.useCallback)((item) => {
+        if (item.type === 'guide') {
+            return;
+        }
+        expandParentTracks(item.nodePathInfo);
+    }, [expandParentTracks]);
     (0, react_1.useEffect)(() => {
         setSelectedItems((currentSelectedItems) => {
             const nextState = selectionScope.current === timelineSelectionScope
-                ? (0, exports.getAvailableTimelineSelectionState)({
-                    availableKeys: new Set(selectableItems.current.keys()),
-                    availableItemsByKey: selectableItems.current,
-                    state: {
-                        selectedItems: currentSelectedItems,
-                        anchor: selectionAnchor.current,
-                    },
-                })
+                ? {
+                    selectedItems: currentSelectedItems,
+                    anchor: selectionAnchor.current,
+                }
                 : exports.EMPTY_TIMELINE_SELECTION_STATE;
             selectionScope.current = timelineSelectionScope;
             selectionAnchor.current = nextState.anchor;
@@ -438,7 +638,7 @@ const TimelineSelectionProvider = ({ children }) => {
             }
             return nextState.selectedItems;
         });
-    }, [selectableItemsVersion, timelineSelectionScope]);
+    }, [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));
@@ -446,19 +646,13 @@ const TimelineSelectionProvider = ({ children }) => {
     const selectItem = (0, react_1.useCallback)((item, interaction = {
         shiftKey: false,
         toggleKey: false,
-    }) => {
+    }, allSelectableItems = []) => {
         if (!canSelectItem(item)) {
             return;
         }
+        expandParentsForSelectionItem(item);
         setSelectedItems((currentSelectedItems) => {
             const currentSelectionState = getCurrentAvailableSelectionState(currentSelectedItems);
-            const orderedSelectableItems = [
-                ...selectableItems.current.values(),
-            ].sort((a, b) => {
-                var _a, _b;
-                return (((_a = selectableItemsOrder.current.get((0, exports.getTimelineSelectionKey)(a))) !== null && _a !== void 0 ? _a : 0) -
-                    ((_b = selectableItemsOrder.current.get((0, exports.getTimelineSelectionKey)(b))) !== null && _b !== void 0 ? _b : 0));
-            });
             const nextState = (0, exports.getTimelineSelectionAfterInteraction)({
                 currentState: {
                     selectedItems: currentSelectionState.selectedItems,
@@ -466,13 +660,18 @@ const TimelineSelectionProvider = ({ children }) => {
                 },
                 clickedItem: item,
                 interaction,
-                allSelectableItems: orderedSelectableItems,
+                allSelectableItems,
             });
             selectionScope.current = timelineSelectionScope;
             selectionAnchor.current = nextState.anchor;
             return nextState.selectedItems;
         });
-    }, [canSelectItem, getCurrentAvailableSelectionState, timelineSelectionScope]);
+    }, [
+        canSelectItem,
+        expandParentsForSelectionItem,
+        getCurrentAvailableSelectionState,
+        timelineSelectionScope,
+    ]);
     const selectItems = (0, react_1.useCallback)((items) => {
         if (!items.every(canSelectItem)) {
             return;
@@ -480,33 +679,9 @@ const TimelineSelectionProvider = ({ children }) => {
         selectionScope.current = timelineSelectionScope;
         selectionAnchor.current =
             items.length === 0 ? null : items[items.length - 1];
+        expandParentsForSelectionItems(items);
         setSelectedItems(items);
-    }, [canSelectItem, timelineSelectionScope]);
-    const registerSelectableItem = (0, react_1.useCallback)((item) => {
-        var _a;
-        const key = (0, exports.getTimelineSelectionKey)(item);
-        const currentRegistrationCount = (_a = selectableItemRegistrationCounts.current.get(key)) !== null && _a !== void 0 ? _a : 0;
-        if (currentRegistrationCount === 0) {
-            const registrationOrder = registrationCounter.current;
-            registrationCounter.current += 1;
-            selectableItemsOrder.current.set(key, registrationOrder);
-        }
-        selectableItemRegistrationCounts.current.set(key, currentRegistrationCount + 1);
-        selectableItems.current.set(key, item);
-        bumpSelectableItemsVersion();
-        return () => {
-            var _a;
-            const nextRegistrationCount = ((_a = selectableItemRegistrationCounts.current.get(key)) !== null && _a !== void 0 ? _a : 1) - 1;
-            if (nextRegistrationCount > 0) {
-                selectableItemRegistrationCounts.current.set(key, nextRegistrationCount);
-                return;
-            }
-            selectableItemRegistrationCounts.current.delete(key);
-            selectableItems.current.delete(key);
-            selectableItemsOrder.current.delete(key);
-            bumpSelectableItemsVersion();
-        };
-    }, [bumpSelectableItemsVersion]);
+    }, [canSelectItem, expandParentsForSelectionItems, timelineSelectionScope]);
     const registerMarqueeSelectableItem = (0, react_1.useCallback)((item, getRect) => {
         const key = (0, exports.getTimelineSelectionKey)(item);
         const registrationOrder = marqueeRegistrationCounter.current;
@@ -520,6 +695,15 @@ const TimelineSelectionProvider = ({ children }) => {
             marqueeSelectableItems.current.delete(key);
         };
     }, []);
+    const registerFocusableItem = (0, react_1.useCallback)((item, getRect) => {
+        const key = (0, exports.getTimelineSelectionKey)(item);
+        focusableItems.current.set(key, {
+            getRect,
+        });
+        return () => {
+            focusableItems.current.delete(key);
+        };
+    }, []);
     const getMarqueeSelectionForRect = (0, react_1.useCallback)((marqueeRect, lockedSelectionKind) => {
         const candidates = [...marqueeSelectableItems.current.values()]
             .sort((a, b) => a.order - b.order)
@@ -564,8 +748,8 @@ const TimelineSelectionProvider = ({ children }) => {
         isSelected,
         selectItem,
         selectItems,
-        registerSelectableItem,
         registerMarqueeSelectableItem,
+        registerFocusableItem,
         getMarqueeSelection: getMarqueeSelectionForRect,
         containsSelection,
         clearSelection,
@@ -575,15 +759,15 @@ const TimelineSelectionProvider = ({ children }) => {
         isSelected,
         selectItem,
         selectItems,
-        registerSelectableItem,
         registerMarqueeSelectableItem,
+        registerFocusableItem,
         getMarqueeSelectionForRect,
         containsSelection,
         clearSelection,
     ]);
     const currentSelection = (0, react_1.useRef)(value);
     currentSelection.current = value;
-    return (jsx_runtime_1.jsx(CurrentTimelineSelectionContext.Provider, { value: currentSelection, children: jsx_runtime_1.jsxs(TimelineSelectionContext.Provider, { value: value, children: [children, jsx_runtime_1.jsx(TimelineClipboardKeybindings_1.TimelineClipboardKeybindings, {}), jsx_runtime_1.jsx(TimelineDeleteKeybindings_1.TimelineDeleteKeybindings, {})
+    return (jsx_runtime_1.jsx(CurrentTimelineSelectionContext.Provider, { value: currentSelection, children: jsx_runtime_1.jsxs(TimelineSelectionContext.Provider, { value: value, children: [children, jsx_runtime_1.jsx(TimelineEscapeKeybindings, {}), jsx_runtime_1.jsx(TimelineClipboardKeybindings_1.TimelineClipboardKeybindings, {}), jsx_runtime_1.jsx(TimelineDeleteKeybindings_1.TimelineDeleteKeybindings, {})
             ] }) }));
 };
 exports.TimelineSelectionProvider = TimelineSelectionProvider;
@@ -712,22 +896,31 @@ const useTimelineMarqueeSelectableItem = (item, ref) => {
     }, [item, ref, registerMarqueeSelectableItem]);
 };
 exports.useTimelineMarqueeSelectableItem = useTimelineMarqueeSelectableItem;
-const useTimelineRowSelection = (nodePathInfo) => {
-    const { canSelect, isSelected, selectItem, registerSelectableItem } = (0, exports.useTimelineSelection)();
-    const selectionItem = (0, react_1.useMemo)(() => (0, exports.getTimelineSelectionFromNodePathInfo)(nodePathInfo), [nodePathInfo]);
+const useTimelineFocusableItem = (item, ref) => {
+    const { registerFocusableItem } = (0, exports.useTimelineSelection)();
     (0, react_1.useEffect)(() => {
-        if (selectionItem === null) {
+        if (item === null) {
             return;
         }
-        return registerSelectableItem(selectionItem);
-    }, [registerSelectableItem, selectionItem]);
+        return registerFocusableItem(item, () => {
+            var _a;
+            var _b;
+            return (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) !== null && _b !== void 0 ? _b : null;
+        });
+    }, [item, ref, registerFocusableItem]);
+};
+exports.useTimelineFocusableItem = useTimelineFocusableItem;
+const useTimelineRowSelection = (nodePathInfo) => {
+    const { canSelect, isSelected, selectItem } = (0, exports.useTimelineSelection)();
+    const selectableTimelineItemsRef = (0, react_1.useContext)(SelectableTimelineItemsContext);
+    const selectionItem = (0, react_1.useMemo)(() => (0, exports.getTimelineSelectionFromNodePathInfo)(nodePathInfo), [nodePathInfo]);
     const selected = selectionItem === null ? false : isSelected(selectionItem);
     const onSelect = (0, react_1.useCallback)((interaction) => {
         if (selectionItem === null) {
             return;
         }
-        selectItem(selectionItem, interaction);
-    }, [selectItem, selectionItem]);
+        selectItem(selectionItem, interaction, selectableTimelineItemsRef.current);
+    }, [selectItem, selectableTimelineItemsRef, selectionItem]);
     return {
         onSelect,
         selectable: canSelect && selectionItem !== null,
@@ -737,19 +930,17 @@ const useTimelineRowSelection = (nodePathInfo) => {
 };
 exports.useTimelineRowSelection = useTimelineRowSelection;
 const useTimelineKeyframeSelection = (nodePathInfo, frame) => {
-    const { canSelect, isSelected, selectItem, registerSelectableItem } = (0, exports.useTimelineSelection)();
+    const { canSelect, isSelected, selectItem } = (0, exports.useTimelineSelection)();
+    const selectableTimelineItemsRef = (0, react_1.useContext)(SelectableTimelineItemsContext);
     const selectionItem = (0, react_1.useMemo)(() => ({
         type: 'keyframe',
         nodePathInfo,
         frame,
     }), [nodePathInfo, frame]);
-    (0, react_1.useEffect)(() => {
-        return registerSelectableItem(selectionItem);
-    }, [registerSelectableItem, selectionItem]);
     const selected = isSelected(selectionItem);
     const onSelect = (0, react_1.useCallback)((interaction) => {
-        selectItem(selectionItem, interaction);
-    }, [selectItem, selectionItem]);
+        selectItem(selectionItem, interaction, selectableTimelineItemsRef.current);
+    }, [selectItem, selectableTimelineItemsRef, selectionItem]);
     return {
         onSelect,
         selectable: canSelect,
@@ -759,7 +950,8 @@ const useTimelineKeyframeSelection = (nodePathInfo, frame) => {
 };
 exports.useTimelineKeyframeSelection = useTimelineKeyframeSelection;
 const useTimelineEasingSelection = ({ nodePathInfo, fromFrame, toFrame, segmentIndex, }) => {
-    const { canSelect, isSelected, selectItem, registerSelectableItem } = (0, exports.useTimelineSelection)();
+    const { canSelect, isSelected, selectItem } = (0, exports.useTimelineSelection)();
+    const selectableTimelineItemsRef = (0, react_1.useContext)(SelectableTimelineItemsContext);
     const selectionItem = (0, react_1.useMemo)(() => ({
         type: 'easing',
         nodePathInfo,
@@ -767,13 +959,10 @@ const useTimelineEasingSelection = ({ nodePathInfo, fromFrame, toFrame, segmentI
         toFrame,
         segmentIndex,
     }), [nodePathInfo, fromFrame, segmentIndex, toFrame]);
-    (0, react_1.useEffect)(() => {
-        return registerSelectableItem(selectionItem);
-    }, [registerSelectableItem, selectionItem]);
     const selected = isSelected(selectionItem);
     const onSelect = (0, react_1.useCallback)((interaction) => {
-        selectItem(selectionItem, interaction);
-    }, [selectItem, selectionItem]);
+        selectItem(selectionItem, interaction, selectableTimelineItemsRef.current);
+    }, [selectItem, selectableTimelineItemsRef, selectionItem]);
     return {
         onSelect,
         selectable: canSelect,
@@ -783,14 +972,11 @@ const useTimelineEasingSelection = ({ nodePathInfo, fromFrame, toFrame, segmentI
 };
 exports.useTimelineEasingSelection = useTimelineEasingSelection;
 const useTimelineGuideSelection = (guideId) => {
-    const { canSelect, clearSelection, isSelected, selectItem, registerSelectableItem, } = (0, exports.useTimelineSelection)();
+    const { canSelect, clearSelection, isSelected, selectItem } = (0, exports.useTimelineSelection)();
     const selectionItem = (0, react_1.useMemo)(() => ({
         type: 'guide',
         guideId,
     }), [guideId]);
-    (0, react_1.useEffect)(() => {
-        return registerSelectableItem(selectionItem);
-    }, [registerSelectableItem, selectionItem]);
     const selected = isSelected(selectionItem);
     const onSelect = (0, react_1.useCallback)(() => {
         selectItem(selectionItem);