@remotion/studio 4.0.525 → 4.0.527

package/dist/components/Timeline/TimelineDeleteKeybindings.js

@@ -6,6 +6,7 @@ const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
 const ConfirmationDialog_1 = require("../ConfirmationDialog");
+const SequencePropsSubscriptionProvider_1 = require("../SequencePropsSubscriptionProvider");
 const duplicate_selected_timeline_item_1 = require("./duplicate-selected-timeline-item");
 const imperative_state_1 = require("./imperative-state");
 const split_selected_timeline_item_1 = require("./split-selected-timeline-item");
@@ -15,7 +16,7 @@ const TimelineDeleteKeybindings = () => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const sequencesRef = (0, react_1.useContext)(remotion_1.Internals.SequenceManagerRefContext);
-    const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
+    const overrideIdToNodePathMappingsRef = (0, react_1.useContext)(SequencePropsSubscriptionProvider_1.OverrideIdToNodePathMappingsRefContext);
     const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
     const { canSelect } = (0, TimelineSelection_1.useTimelineSelection)();
     const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
@@ -56,11 +57,8 @@ const TimelineDeleteKeybindings = () => {
         });
         const split = keybindings.registerKeybinding({
             event: 'keydown',
-            key: 'd',
-            callback: (event) => {
-                if (!(0, split_selected_timeline_item_1.shouldHandleTimelineSplitShortcut)(event)) {
-                    return;
-                }
+            action: 'splitSequences',
+            callback: () => {
                 const { selectedItems } = currentSelection.current;
                 if (selectedItems.length === 0) {
                     return;
@@ -68,7 +66,7 @@ const TimelineDeleteKeybindings = () => {
                 const splitPromise = (0, split_selected_timeline_item_1.splitSelectedTimelineItems)({
                     selections: selectedItems,
                     sequences: sequencesRef.current,
-                    overrideIdsToNodePaths: overrideIdToNodePathMappings,
+                    overrideIdsToNodePaths: overrideIdToNodePathMappingsRef.current,
                     propStatuses: propStatusesRef.current,
                     splitFrame: (0, imperative_state_1.getCurrentFrame)(),
                 });
@@ -77,7 +75,6 @@ const TimelineDeleteKeybindings = () => {
                 }
                 splitPromise.catch(() => undefined);
             },
-            commandCtrlKey: true,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
@@ -93,7 +90,7 @@ const TimelineDeleteKeybindings = () => {
         currentSelection,
         deleteTimelineItems,
         keybindings,
-        overrideIdToNodePathMappings,
+        overrideIdToNodePathMappingsRef,
         propStatusesRef,
         previewServerState,
         sequencesRef,

package/dist/components/Timeline/TimelineEffectItem.js

@@ -24,6 +24,7 @@ const rowLabel = {
     fontSize: 12,
     color: colors_1.WHITE_ALPHA_80,
     userSelect: 'none',
+    WebkitUserSelect: 'none',
 };
 const rowStyle = {
     height: timeline_layout_1.TREE_GROUP_ROW_HEIGHT,

package/dist/components/Timeline/TimelineExpandArrowButton.js

@@ -52,6 +52,7 @@ const arrowButton = {
     fontSize: 8,
     marginRight: 4,
     userSelect: 'none',
+    WebkitUserSelect: 'none',
     outline: 'none',
     lineHeight: 1,
 };

package/dist/components/Timeline/TimelineExpandedRow.js

@@ -20,6 +20,7 @@ const rowLabel = {
     fontSize: 12,
     color: colors_1.WHITE_ALPHA_80,
     userSelect: 'none',
+    WebkitUserSelect: 'none',
 };
 const TimelineExpandedRowInner = ({ node, depth, nestedDepth, rowDepthBase, getIsExpanded, toggleTrack, validatedLocation, nodePath, schema, keyframeDisplayOffset, keyframeControlsMode, }) => {
     const rowDepth = (rowDepthBase !== null && rowDepthBase !== void 0 ? rowDepthBase : (0, timeline_row_layout_1.getExpandedRowDepth)({ nestedDepth, treeDepth: 0 })) + depth;

package/dist/components/Timeline/TimelineFieldLabel.js

@@ -12,6 +12,7 @@ const fieldNameBase = {
     lineHeight: `${timeline_field_row_layout_1.TIMELINE_STACKED_FIELD_HEADER_HEIGHT}px`,
     color: colors_1.WHITE_ALPHA_80,
     userSelect: 'none',
+    WebkitUserSelect: 'none',
     whiteSpace: 'nowrap',
     overflow: 'hidden',
     textOverflow: 'ellipsis',

package/dist/components/Timeline/TimelineHeightContainer.js

@@ -47,7 +47,17 @@ const baseStyle = {
 };
 const TimelineHeightContainerInner = ({ children }) => {
     const { totalSize } = (0, TimelineVirtualization_1.useTimelineVirtualization)();
+    const onPointerDownCapture = (0, react_1.useCallback)((event) => {
+        const { activeElement } = document;
+        if (event.button === 0 &&
+            activeElement instanceof HTMLButtonElement &&
+            event.target instanceof Node &&
+            !activeElement.contains(event.target)) {
+            // Timeline drags can prevent the browser's default focus change.
+            activeElement.blur();
+        }
+    }, []);
     const style = (0, react_1.useMemo)(() => ({ ...baseStyle, height: totalSize }), [totalSize]);
-    return jsx_runtime_1.jsx("div", { style: style, children: children });
+    return (jsx_runtime_1.jsx("div", { style: style, onPointerDownCapture: onPointerDownCapture, children: children }));
 };
 exports.TimelineHeightContainer = react_1.default.memo(TimelineHeightContainerInner);

package/dist/components/Timeline/TimelineKeyframeControls.js

@@ -10,11 +10,13 @@ const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_node_path_key_1 = require("../../helpers/timeline-node-path-key");
+const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const call_add_keyframe_1 = require("./call-add-keyframe");
 const call_delete_keyframe_1 = require("./call-delete-keyframe");
 const get_easing_selection_after_keyframe_delete_1 = require("./get-easing-selection-after-keyframe-delete");
 const get_keyframe_navigation_1 = require("./get-keyframe-navigation");
 const get_timeline_keyframes_1 = require("./get-timeline-keyframes");
+const normalize_font_weight_for_keyframe_1 = require("./normalize-font-weight-for-keyframe");
 const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
 const TimelineKeyframeDiamondIcon_1 = require("./TimelineKeyframeDiamondIcon");
 const TimelineKeyframeTracksContext_1 = require("./TimelineKeyframeTracksContext");
@@ -50,6 +52,7 @@ const navButtonStyle = {
     outline: 'none',
     padding: 0,
     userSelect: 'none',
+    WebkitUserSelect: 'none',
     width: NAV_BUTTON_SIZE,
 };
 const inspectorNavButtonStyle = {
@@ -222,12 +225,19 @@ const getAddChange = (target) => {
     if (value === null) {
         return null;
     }
+    const fieldSchema = target.schema[target.fieldKey];
+    const normalizedValue = (fieldSchema === null || fieldSchema === void 0 ? void 0 : fieldSchema.type) === 'font-weight'
+        ? (0, normalize_font_weight_for_keyframe_1.normalizeFontWeightForKeyframe)(value)
+        : value;
+    if (normalizedValue === null) {
+        return null;
+    }
     const change = {
         fileName: target.fileName,
         nodePath: target.nodePath,
         fieldKey: target.fieldKey,
         sourceFrame: target.sourceFrame,
-        value,
+        value: normalizedValue,
         schema: target.schema,
     };
     if (target.effectIndex === null) {
@@ -313,6 +323,7 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getDragOverrides, getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { expandParentTracks } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
     const { selectedItems, selectItems } = (0, TimelineSelection_1.useTimelineSelection)();
     const tracks = (0, TimelineKeyframeTracksContext_1.useTimelineKeyframeTracks)();
     const clientId = previewServerState.type === 'connected'
@@ -481,6 +492,9 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
             setPropStatuses,
             clientId,
         });
+        for (const { target } of addChanges) {
+            expandParentTracks(target.nodePathInfo);
+        }
         if (mode === 'timeline') {
             selectItems(addChanges.map(({ target }) => ({
                 type: 'keyframe',
@@ -491,6 +505,7 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
     }, [
         canToggleKeyframe,
         clientId,
+        expandParentTracks,
         hasKeyframeAtCurrentFrame,
         keyframeToggleTargets,
         mode,

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

@@ -1,14 +1,14 @@
 import React from 'react';
 import type { TSequence } from 'remotion';
-import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
+import type { TimelineTrackWithDisplayGroup } from './timeline-display-groups';
 export declare const TimelineLayerChildrenProvider: React.Provider<{
     readonly collapsed: Record<string, boolean>;
     readonly keys: Map<string, string>;
     readonly parents: Set<string>;
     readonly toggle: (key: string) => void;
 } | null>;
-export declare const useTimelineLayerChildren: (tracks: TimelineTrackData[], sequences: TSequence[], compositionId: string | null) => {
-    visibleTracks: TimelineTrackData[];
+export declare const useTimelineLayerChildren: (tracks: TimelineTrackWithDisplayGroup[], sequences: TSequence[], compositionId: string | null) => {
+    visibleTracks: TimelineTrackWithDisplayGroup[];
     value: {
         collapsed: Record<string, boolean>;
         keys: Map<string, string>;

package/dist/components/Timeline/TimelineLayerChildren.js

@@ -70,17 +70,19 @@ const useTimelineLayerChildren = (tracks, sequences, compositionId) => {
                 parent = (_c = (_a = byId.get(parent)) === null || _a === void 0 ? void 0 : _a.parent) !== null && _c !== void 0 ? _c : null;
             }
             ancestors.set(track.sequence.id, parentIds);
-            // Source identity survives remounts. For layers without source metadata,
-            // use the structural position instead of the ephemeral sequence ID.
+            // Source identity survives remounts. While it is resolving, the stack
+            // gives interactive layers a stable display identity.
             const identity = track.nodePathInfo
                 ? ['source', (0, timeline_node_path_key_1.timelineNodePathInfoToKey)(track.nodePathInfo)]
-                : [
-                    'position',
-                    ...[...parentIds]
-                        .reverse()
-                        .concat(track.sequence.id)
-                        .map((id) => siblingIndices.get(id)),
-                ];
+                : track.displayGroup
+                    ? ['stack', track.displayGroup.key]
+                    : [
+                        'position',
+                        ...[...parentIds]
+                            .reverse()
+                            .concat(track.sequence.id)
+                            .map((id) => siblingIndices.get(id)),
+                    ];
             keys.set(track.sequence.id, JSON.stringify([compositionId, identity]));
         }
         return { keys, parents, ancestors };

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

@@ -1,7 +1,7 @@
 import React from 'react';
 export declare const timelineLayerIconContainer: React.CSSProperties;
 export declare const TimelineLayerEye: React.FC<{
-    readonly onInvoked: (type: 'enable' | 'disable') => void;
+    readonly onInvoked: ((type: 'enable' | 'disable') => void) | null;
     readonly hidden: boolean;
     readonly type: 'eye' | 'speaker' | 'effect';
 }>;

package/dist/components/Timeline/TimelineLayerEye.js

@@ -54,6 +54,9 @@ const TimelineLayerEye = ({ onInvoked, hidden, type }) => {
         }
         e.preventDefault();
         e.stopPropagation();
+        if (onInvoked === null) {
+            return;
+        }
         stopLayerPointerSession === null || stopLayerPointerSession === void 0 ? void 0 : stopLayerPointerSession();
         layerPointedDown = hidden ? 'enable' : 'disable';
         onInvoked(layerPointedDown);
@@ -83,14 +86,14 @@ const TimelineLayerEye = ({ onInvoked, hidden, type }) => {
         e.stopPropagation();
     }, []);
     const onPointerEnter = (0, react_1.useCallback)(() => {
-        if (layerPointedDown) {
+        if (layerPointedDown && onInvoked !== null) {
             onInvoked(layerPointedDown);
         }
     }, [onInvoked]);
     const registerLayerEye = (0, react_1.useCallback)((element) => {
         if (element) {
             layerEyeActions.set(element, () => {
-                if (layerPointedDown) {
+                if (layerPointedDown && onInvoked !== null) {
                     onInvoked(layerPointedDown);
                 }
             });
@@ -99,7 +102,7 @@ const TimelineLayerEye = ({ onInvoked, hidden, type }) => {
     const onDoubleClick = (0, react_1.useCallback)((e) => {
         e.stopPropagation();
     }, []);
-    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) }));
+    return (jsx_runtime_1.jsx("div", { ref: registerLayerEye, [TIMELINE_LAYER_EYE_ATTR]: true, style: exports.timelineLayerIconContainer, draggable: false, onDragStart: onDragStart, onDoubleClick: onDoubleClick, onPointerEnter: onInvoked === null ? undefined : onPointerEnter, onPointerDown: onPointerDown, children: renderAction(colors_1.LIGHT_COLOR) }));
 };
 exports.TimelineLayerEye = TimelineLayerEye;
 const spacerStyle = {

package/dist/components/Timeline/TimelineList.js

@@ -1,7 +1,11 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineList = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
 const colors_1 = require("../../helpers/colors");
 const TimelineSequenceItem_1 = require("./TimelineSequenceItem");
 const TimelineVirtualization_1 = require("./TimelineVirtualization");
@@ -10,11 +14,13 @@ const container = {
     background: colors_1.BACKGROUND,
     position: 'relative',
 };
-const TimelineListTrack = ({ row }) => {
+const noConnectedCompositions = [];
+const TimelineListTrack = react_1.default.memo(({ row }) => {
     var _a;
+    var _b, _c;
     const { afterDropLineOffset, siblingIndex, track } = row;
-    return (jsx_runtime_1.jsx(TimelineSequenceItem_1.TimelineSequenceItem, { afterDropLineOffset: afterDropLineOffset, siblingIndex: siblingIndex, connectedCompositions: (_a = track.connectedCompositions) !== null && _a !== void 0 ? _a : [], nestedDepth: track.depth, sequence: track.sequence, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, sequenceFrameOffset: track.sequenceFrameOffset }));
-};
+    return (jsx_runtime_1.jsx(TimelineSequenceItem_1.TimelineSequenceItem, { afterDropLineOffset: afterDropLineOffset, siblingIndex: siblingIndex, connectedCompositions: (_b = track.connectedCompositions) !== null && _b !== void 0 ? _b : noConnectedCompositions, nestedDepth: track.depth, sequence: track.sequence, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, sequenceFrameOffset: track.sequenceFrameOffset, numberOfHiddenDuplicates: Math.max(0, ((_c = (_a = track.displayGroup) === null || _a === void 0 ? void 0 : _a.numberOfSequences) !== null && _c !== void 0 ? _c : 1) - 1), showProvisionalVisibilityToggle: track.nodePathInfo === null && track.displayGroup !== null }));
+});
 const TimelineList = () => {
     const { rows, tracksEnd, virtualItems } = (0, TimelineVirtualization_1.useTimelineVirtualization)();
     return (jsx_runtime_1.jsx("div", { style: { ...container, height: tracksEnd }, children: virtualItems.map((virtualItem) => (jsx_runtime_1.jsx("div", { style: {

package/dist/components/Timeline/TimelineSchemaField.js

@@ -39,7 +39,6 @@ const react_1 = __importStar(require("react"));
 const colors_1 = require("../../helpers/colors");
 const hoverable_1 = require("../../helpers/hoverable");
 const modals_1 = require("../../state/modals");
-const SettingsContext_1 = require("../SettingsContext");
 const timeline_field_display_utils_1 = require("./timeline-field-display-utils");
 const TimelineArrayField_1 = require("./TimelineArrayField");
 const TimelinePrimitiveFieldValue_1 = require("./TimelinePrimitiveFieldValue");
@@ -117,16 +116,13 @@ const UnsupportedStatus = ({ label, onFix, formattedValue }) => {
 exports.UnsupportedStatus = UnsupportedStatus;
 const TimelineNonEditableStatus = ({ propStatus, field, runtimeValue, validatedLocation }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
-    const { remotionSkillsInfo } = (0, SettingsContext_1.useSettings)();
     const onFix = (0, react_1.useCallback)(() => {
-        var _a;
         setSelectedModal({
             type: 'fix-computed-value',
             prop: field.key,
-            context: `${validatedLocation.source}:${validatedLocation.line}:${validatedLocation.column}`,
-            remotionInteractivitySkillAvailable: (_a = remotionSkillsInfo === null || remotionSkillsInfo === void 0 ? void 0 : remotionSkillsInfo.remotionInteractivitySkillAvailable) !== null && _a !== void 0 ? _a : false,
+            location: validatedLocation,
         });
-    }, [field.key, remotionSkillsInfo, setSelectedModal, validatedLocation]);
+    }, [field.key, setSelectedModal, validatedLocation]);
     if (propStatus.status === 'computed') {
         return (jsx_runtime_1.jsx(exports.UnsupportedStatus, { label: runtimeValue === undefined
                 ? 'computed'

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

@@ -155,14 +155,20 @@ export declare const useTimelineMarqueeSelection: () => {
 };
 export declare const useTimelineMarqueeSelectableItem: (item: CanvasSelectionItem | null, ref: React.RefObject<Element | null>) => void;
 export declare const useTimelineRowSelection: (nodePathInfo: SequenceNodePathInfo | null, revealInInspector?: boolean) => {
+    clearSelection: () => void;
     onSelect: (interaction?: CanvasSelectionInteraction | undefined) => void;
     selectable: boolean;
+    selectedItems: readonly CanvasSelectionItem[];
+    selectItem: (item: CanvasSelectionItem, interaction?: CanvasSelectionInteraction | undefined, allSelectableItems?: readonly CanvasSelectionItem[] | undefined, options?: TimelineSelectionOptions | undefined) => void;
     selectionItem: CanvasSelectionItem | null;
     selected: boolean;
 };
 export declare const useTimelineKeyframeSelection: (nodePathInfo: SequenceNodePathInfo, frame: number) => {
+    clearSelection: () => void;
     onSelect: (interaction?: CanvasSelectionInteraction | undefined) => void;
     selectable: boolean;
+    selectedItems: readonly CanvasSelectionItem[];
+    selectItem: (item: CanvasSelectionItem, interaction?: CanvasSelectionInteraction | undefined, allSelectableItems?: readonly CanvasSelectionItem[] | undefined, options?: TimelineSelectionOptions | undefined) => void;
     selectionItem: CanvasSelectionItem;
     selected: boolean;
 };
@@ -172,9 +178,11 @@ export declare const useTimelineEasingSelection: ({ nodePathInfo, fromFrame, toF
     readonly toFrame: number;
     readonly segmentIndex: number;
 }) => {
+    clearSelection: () => void;
     onSelect: (interaction?: CanvasSelectionInteraction | undefined) => void;
     selectable: boolean;
-    selected: boolean;
+    selectedItems: readonly CanvasSelectionItem[];
+    selectItem: (item: CanvasSelectionItem, interaction?: CanvasSelectionInteraction | undefined, allSelectableItems?: readonly CanvasSelectionItem[] | undefined, options?: TimelineSelectionOptions | undefined) => void;
     selectionItem: {
         readonly type: "easing";
         readonly nodePathInfo: SequenceNodePathInfo;
@@ -182,13 +190,16 @@ export declare const useTimelineEasingSelection: ({ nodePathInfo, fromFrame, toF
         readonly toFrame: number;
         readonly segmentIndex: number;
     };
+    selected: boolean;
 };
 export declare const useTimelineGuideSelection: (guideId: string) => {
     clearSelection: () => void;
-    onSelect: () => void;
+    onSelect: (interaction?: CanvasSelectionInteraction | undefined) => void;
     selectable: boolean;
-    selected: boolean;
+    selectedItems: readonly CanvasSelectionItem[];
+    selectItem: (item: CanvasSelectionItem, interaction?: CanvasSelectionInteraction | undefined, allSelectableItems?: readonly CanvasSelectionItem[] | undefined, options?: TimelineSelectionOptions | undefined) => void;
     selectionItem: CanvasSelectionItem;
+    selected: boolean;
 };
 export declare const useTimelineRowContainsSelection: (nodePathInfo: SequenceNodePathInfo | null) => boolean;
 export declare const useTimelineRowHighlightBackground: (nodePathInfo: SequenceNodePathInfo | null, { hovered, selectedBackground, }: {

package/dist/components/Timeline/TimelineSelection.js

@@ -14,6 +14,7 @@ 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");
+const use_sync_external_store_1 = require("../../helpers/use-sync-external-store");
 const z_index_1 = require("../../state/z-index");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const options_sidebar_tabs_1 = require("../options-sidebar-tabs");
@@ -225,6 +226,7 @@ const defaultTimelineSelectionContextValue = {
     clearSelection: () => undefined,
 };
 const TimelineSelectionContext = (0, react_1.createContext)(defaultTimelineSelectionContextValue);
+const TimelineRowSelectionContext = (0, react_1.createContext)(null);
 const EMPTY_SELECTABLE_TIMELINE_ITEMS = [];
 const SelectableTimelineItemsContext = (0, react_1.createContext)({ current: EMPTY_SELECTABLE_TIMELINE_ITEMS });
 const TimelineSelectionOrderProvider = ({ children, items }) => {
@@ -561,6 +563,9 @@ const TimelineSelectionProvider = ({ children }) => {
         ? selectionState
         : exports.EMPTY_TIMELINE_SELECTION_STATE;
     const availableSelectedItems = availableSelectionState.selectedItems;
+    const getAvailableSelectionState = (0, react_1.useCallback)(() => selectionScope.current === timelineSelectionScope
+        ? selectionController.getSnapshot()
+        : exports.EMPTY_TIMELINE_SELECTION_STATE, [selectionController, timelineSelectionScope]);
     const requestRevealSelectionItem = (0, react_1.useCallback)((item) => {
         setRevealRequest((previousRequest) => {
             var _a;
@@ -790,9 +795,24 @@ const TimelineSelectionProvider = ({ children }) => {
     ]);
     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(TimelineEscapeKeybindings, {}), (0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                        jsx_runtime_1.jsx(TimelineClipboardKeybindings_1.TimelineClipboardKeybindings, {}), jsx_runtime_1.jsx(TimelineDeleteKeybindings_1.TimelineDeleteKeybindings, {})
-                    ] })) : null] }) }));
+    const rowSelectionContextValue = (0, react_1.useMemo)(() => ({
+        canSelect,
+        clearSelection,
+        getSnapshot: getAvailableSelectionState,
+        registerMarqueeSelectableItem,
+        selectItem,
+        subscribe: selectionController.subscribe,
+    }), [
+        canSelect,
+        clearSelection,
+        getAvailableSelectionState,
+        registerMarqueeSelectableItem,
+        selectItem,
+        selectionController.subscribe,
+    ]);
+    return (jsx_runtime_1.jsx(CurrentTimelineSelectionContext.Provider, { value: currentSelection, children: jsx_runtime_1.jsx(TimelineRowSelectionContext.Provider, { value: rowSelectionContextValue, children: jsx_runtime_1.jsxs(TimelineSelectionContext.Provider, { value: value, children: [children, jsx_runtime_1.jsx(TimelineEscapeKeybindings, {}), (0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                            jsx_runtime_1.jsx(TimelineClipboardKeybindings_1.TimelineClipboardKeybindings, {}), jsx_runtime_1.jsx(TimelineDeleteKeybindings_1.TimelineDeleteKeybindings, {})
+                        ] })) : null] }) }) }));
 };
 exports.TimelineSelectionProvider = TimelineSelectionProvider;
 const useTimelineSelection = () => {
@@ -974,7 +994,11 @@ const useTimelineMarqueeSelection = () => {
 };
 exports.useTimelineMarqueeSelection = useTimelineMarqueeSelection;
 const useTimelineMarqueeSelectableItem = (item, ref) => {
-    const { registerMarqueeSelectableItem } = (0, exports.useTimelineSelection)();
+    const selectionContext = (0, react_1.useContext)(TimelineRowSelectionContext);
+    if (selectionContext === null) {
+        throw new Error('useTimelineMarqueeSelectableItem must be used inside TimelineSelectionProvider');
+    }
+    const { registerMarqueeSelectableItem } = selectionContext;
     (0, react_1.useEffect)(() => {
         if (item === null) {
             return;
@@ -988,47 +1012,68 @@ const useTimelineMarqueeSelectableItem = (item, ref) => {
 };
 exports.useTimelineMarqueeSelectableItem = useTimelineMarqueeSelectableItem;
 const useTimelineRowSelection = (nodePathInfo, revealInInspector = false) => {
-    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);
+    return useTimelineSelectionItem({
+        revealInInspector,
+        selectionItem,
+        useSelectionOrder: true,
+    });
+};
+exports.useTimelineRowSelection = useTimelineRowSelection;
+const useTimelineSelectionItem = ({ revealInInspector, selectionItem, useSelectionOrder, }) => {
+    var _a;
+    const selectionContext = (0, react_1.useContext)(TimelineRowSelectionContext);
+    if (selectionContext === null) {
+        throw new Error('useTimelineSelectionItem must be used inside TimelineSelectionProvider');
+    }
+    const selectableTimelineItemsRef = (0, react_1.useContext)(SelectableTimelineItemsContext);
+    const selectionItemKey = (0, react_1.useMemo)(() => selectionItem === null ? null : (0, exports.getTimelineSelectionKey)(selectionItem), [selectionItem]);
+    const getSelectedState = (0, react_1.useCallback)(() => {
+        if (selectionItemKey === null) {
+            return null;
+        }
+        const snapshot = selectionContext.getSnapshot();
+        return snapshot.selectedItems.some((item) => (0, exports.getTimelineSelectionKey)(item) === selectionItemKey)
+            ? snapshot
+            : null;
+    }, [selectionContext, selectionItemKey]);
+    const selectedState = (0, use_sync_external_store_1.useSyncExternalStore)(selectionContext.subscribe, getSelectedState, getSelectedState);
     const onSelect = (0, react_1.useCallback)((interaction) => {
         if (selectionItem === null) {
             return;
         }
-        selectItem(selectionItem, interaction, selectableTimelineItemsRef.current, { revealInInspector });
-    }, [revealInInspector, selectItem, selectableTimelineItemsRef, selectionItem]);
+        selectionContext.selectItem(selectionItem, interaction, useSelectionOrder ? selectableTimelineItemsRef.current : undefined, { revealInInspector });
+    }, [
+        revealInInspector,
+        selectableTimelineItemsRef,
+        selectionContext,
+        selectionItem,
+        useSelectionOrder,
+    ]);
     return {
+        clearSelection: selectionContext.clearSelection,
         onSelect,
-        selectable: canSelect && selectionItem !== null,
+        selectable: selectionContext.canSelect && selectionItem !== null,
+        selectedItems: (_a = selectedState === null || selectedState === void 0 ? void 0 : selectedState.selectedItems) !== null && _a !== void 0 ? _a : exports.EMPTY_TIMELINE_SELECTION_STATE.selectedItems,
+        selectItem: selectionContext.selectItem,
         selectionItem,
-        selected,
+        selected: selectedState !== null,
     };
 };
-exports.useTimelineRowSelection = useTimelineRowSelection;
 const useTimelineKeyframeSelection = (nodePathInfo, frame) => {
-    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]);
-    const selected = isSelected(selectionItem);
-    const onSelect = (0, react_1.useCallback)((interaction) => {
-        selectItem(selectionItem, interaction, selectableTimelineItemsRef.current);
-    }, [selectItem, selectableTimelineItemsRef, selectionItem]);
-    return {
-        onSelect,
-        selectable: canSelect,
+    return useTimelineSelectionItem({
+        revealInInspector: false,
         selectionItem,
-        selected,
-    };
+        useSelectionOrder: true,
+    });
 };
 exports.useTimelineKeyframeSelection = useTimelineKeyframeSelection;
 const useTimelineEasingSelection = ({ nodePathInfo, fromFrame, toFrame, segmentIndex, }) => {
-    const { canSelect, isSelected, selectItem } = (0, exports.useTimelineSelection)();
-    const selectableTimelineItemsRef = (0, react_1.useContext)(SelectableTimelineItemsContext);
     const selectionItem = (0, react_1.useMemo)(() => ({
         type: 'easing',
         nodePathInfo,
@@ -1036,43 +1081,40 @@ const useTimelineEasingSelection = ({ nodePathInfo, fromFrame, toFrame, segmentI
         toFrame,
         segmentIndex,
     }), [nodePathInfo, fromFrame, segmentIndex, toFrame]);
-    const selected = isSelected(selectionItem);
-    const onSelect = (0, react_1.useCallback)((interaction) => {
-        selectItem(selectionItem, interaction, selectableTimelineItemsRef.current);
-    }, [selectItem, selectableTimelineItemsRef, selectionItem]);
-    return {
-        onSelect,
-        selectable: canSelect,
-        selected,
+    return useTimelineSelectionItem({
+        revealInInspector: false,
         selectionItem,
-    };
+        useSelectionOrder: true,
+    });
 };
 exports.useTimelineEasingSelection = useTimelineEasingSelection;
 const useTimelineGuideSelection = (guideId) => {
-    const { canSelect, clearSelection, isSelected, selectItem } = (0, exports.useTimelineSelection)();
     const selectionItem = (0, react_1.useMemo)(() => ({
         type: 'guide',
         guideId,
     }), [guideId]);
-    const selected = isSelected(selectionItem);
-    const onSelect = (0, react_1.useCallback)(() => {
-        selectItem(selectionItem);
-    }, [selectItem, selectionItem]);
-    return {
-        clearSelection,
-        onSelect,
-        selectable: canSelect,
-        selected,
+    return useTimelineSelectionItem({
+        revealInInspector: false,
         selectionItem,
-    };
+        useSelectionOrder: false,
+    });
 };
 exports.useTimelineGuideSelection = useTimelineGuideSelection;
 const useTimelineRowContainsSelection = (nodePathInfo) => {
-    const { containsSelection } = (0, exports.useTimelineSelection)();
-    if (nodePathInfo === null) {
-        return false;
+    const selectionContext = (0, react_1.useContext)(TimelineRowSelectionContext);
+    if (selectionContext === null) {
+        throw new Error('useTimelineRowContainsSelection must be used inside TimelineSelectionProvider');
     }
-    return containsSelection(nodePathInfo);
+    const getContainsSelection = (0, react_1.useCallback)(() => {
+        if (nodePathInfo === null) {
+            return false;
+        }
+        return selectionContext
+            .getSnapshot()
+            .selectedItems.some((selected) => selected.type !== 'guide' &&
+            nodePathDescendsFrom(selected.nodePathInfo, nodePathInfo));
+    }, [nodePathInfo, selectionContext]);
+    return (0, use_sync_external_store_1.useSyncExternalStore)(selectionContext.subscribe, getContainsSelection, getContainsSelection);
 };
 exports.useTimelineRowContainsSelection = useTimelineRowContainsSelection;
 const useTimelineRowHighlightBackground = (nodePathInfo, { hovered, selectedBackground, }) => {