@remotion/studio 4.0.524 → 4.0.526

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

@@ -91,6 +91,7 @@ export declare const extendTimelineMarqueeSelection: ({ currentSelection, marque
 }) => readonly CanvasSelectionItem[];
 type TimelineSelectionContextValue = {
     readonly canSelect: boolean;
+    readonly inspectorRevealRequest: TimelineSelectionRevealRequest | null;
     readonly revealRequest: TimelineSelectionRevealRequest | null;
     readonly selectedItems: readonly TimelineSelection[];
     readonly isSelected: (item: TimelineSelection) => boolean;
@@ -111,6 +112,7 @@ export declare const TimelineSelectionOrderProvider: React.FC<{
 }>;
 type TimelineSelectionOptions = {
     readonly reveal?: boolean;
+    readonly revealInInspector?: boolean;
 };
 type TimelineSelectionRevealRequest = {
     readonly item: TimelineSelection;
@@ -152,15 +154,21 @@ export declare const useTimelineMarqueeSelection: () => {
     onPointerDownCapture: (event: React.PointerEvent<HTMLDivElement>) => void;
 };
 export declare const useTimelineMarqueeSelectableItem: (item: CanvasSelectionItem | null, ref: React.RefObject<Element | null>) => void;
-export declare const useTimelineRowSelection: (nodePathInfo: SequenceNodePathInfo | null) => {
+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;
 };
@@ -170,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;
@@ -180,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");
@@ -209,6 +210,7 @@ const extendTimelineMarqueeSelection = ({ currentSelection, marqueeSelection, })
 exports.extendTimelineMarqueeSelection = extendTimelineMarqueeSelection;
 const defaultTimelineSelectionContextValue = {
     canSelect: false,
+    inspectorRevealRequest: null,
     revealRequest: null,
     selectedItems: [],
     isSelected: () => false,
@@ -224,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 }) => {
@@ -542,9 +545,12 @@ const TimelineSelectionProvider = ({ children }) => {
     const marqueeSelectableItems = (0, react_1.useRef)(new Map());
     const marqueeRegistrationCounter = (0, react_1.useRef)(0);
     const [revealRequest, setRevealRequest] = (0, react_1.useState)(null);
+    const [inspectorRevealRequest, setInspectorRevealRequest] = (0, react_1.useState)(null);
+    const inspectorRevealTokenCounter = (0, react_1.useRef)(0);
     (0, react_1.useEffect)(() => {
         if (!canSelect) {
             selectionScope.current = null;
+            setInspectorRevealRequest(null);
             setRevealRequest(null);
             selectionController.clear();
         }
@@ -557,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;
@@ -566,6 +575,13 @@ const TimelineSelectionProvider = ({ children }) => {
             });
         });
     }, []);
+    const requestRevealSelectionItemInInspector = (0, react_1.useCallback)((item) => {
+        inspectorRevealTokenCounter.current += 1;
+        setInspectorRevealRequest({
+            item,
+            token: inspectorRevealTokenCounter.current,
+        });
+    }, []);
     const expandParentsForSelectionItems = (0, react_1.useCallback)((items) => {
         for (const item of items) {
             if (item.type === 'guide') {
@@ -603,6 +619,12 @@ const TimelineSelectionProvider = ({ children }) => {
         if (options.reveal) {
             requestRevealSelectionItem(item);
         }
+        if (options.revealInInspector) {
+            requestRevealSelectionItemInInspector(item);
+        }
+        else {
+            setInspectorRevealRequest(null);
+        }
         if (selectionScope.current !== timelineSelectionScope) {
             selectionController.clear();
         }
@@ -611,6 +633,7 @@ const TimelineSelectionProvider = ({ children }) => {
     }, [
         canSelectItem,
         expandParentsForSelectionItem,
+        requestRevealSelectionItemInInspector,
         requestRevealSelectionItem,
         selectionController,
         timelineSelectionScope,
@@ -627,10 +650,17 @@ const TimelineSelectionProvider = ({ children }) => {
         if (options.reveal && items.length === 1) {
             requestRevealSelectionItem(items[0]);
         }
+        if (options.revealInInspector && items.length === 1) {
+            requestRevealSelectionItemInInspector(items[0]);
+        }
+        else {
+            setInspectorRevealRequest(null);
+        }
         selectionController.setSelectedItems(items);
     }, [
         canSelectItem,
         expandParentsForSelectionItems,
+        requestRevealSelectionItemInInspector,
         requestRevealSelectionItem,
         selectionController,
         timelineSelectionScope,
@@ -679,6 +709,7 @@ const TimelineSelectionProvider = ({ children }) => {
     }, [canSelectItem]);
     const clearSelection = (0, react_1.useCallback)(() => {
         selectionScope.current = null;
+        setInspectorRevealRequest(null);
         selectionController.clear();
     }, [selectionController]);
     const containsSelection = (0, react_1.useCallback)((nodePathInfo) => {
@@ -737,6 +768,7 @@ const TimelineSelectionProvider = ({ children }) => {
     }, [selectionController]);
     const value = (0, react_1.useMemo)(() => ({
         canSelect,
+        inspectorRevealRequest,
         revealRequest,
         selectedItems: availableSelectedItems,
         isSelected,
@@ -749,6 +781,7 @@ const TimelineSelectionProvider = ({ children }) => {
         clearSelection,
     }), [
         canSelect,
+        inspectorRevealRequest,
         revealRequest,
         availableSelectedItems,
         isSelected,
@@ -762,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 = () => {
@@ -929,8 +977,7 @@ const useTimelineMarqueeSelection = () => {
             captureTarget: target,
             onMove: onPointerMove,
             onEnd: (reason, endEvent) => {
-                if ((reason === 'pointerup' || reason === 'buttons-released') &&
-                    endEvent) {
+                if ((0, pointer_session_1.isPointerSessionRelease)(reason, endEvent)) {
                     updateSelection(endEvent.clientX, endEvent.clientY);
                 }
                 cleanup();
@@ -947,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;
@@ -960,48 +1011,69 @@ const useTimelineMarqueeSelectableItem = (item, ref) => {
     }, [item, ref, registerMarqueeSelectableItem]);
 };
 exports.useTimelineMarqueeSelectableItem = useTimelineMarqueeSelectableItem;
-const useTimelineRowSelection = (nodePathInfo) => {
-    const { canSelect, isSelected, selectItem } = (0, exports.useTimelineSelection)();
-    const selectableTimelineItemsRef = (0, react_1.useContext)(SelectableTimelineItemsContext);
+const useTimelineRowSelection = (nodePathInfo, revealInInspector = false) => {
     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);
-    }, [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,
@@ -1009,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, }) => {

package/dist/components/Timeline/TimelineSequence.js

@@ -263,7 +263,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         ? Infinity
         : naturalMediaDuration;
     const effectiveMaxMediaDuration = s.loopDisplay ? null : maxMediaDuration;
-    const { canOpenInEditor, canConfigureApps, codingAgentInfo, editorInfo, openInCodingAgent, openInEditor, originalLocation, } = (0, use_open_sequence_in_apps_1.useOpenSequenceInApps)(s);
+    const { canConfigureApps, canOpenInEditor, canOpenSource, codingAgentInfo, editorInfo, openInCodingAgent, openInEditor, openSource, originalLocation, } = (0, use_open_sequence_in_apps_1.useOpenSequenceInApps)(s);
     const validatedLocation = (0, react_1.useMemo)(() => {
         var _a;
         if (!originalLocation ||
@@ -304,8 +304,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
     const deleteTimelineItems = (0, use_delete_timeline_items_1.useDeleteTimelineItems)();
-    const { onSelect, selectable, selected } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
-    const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
+    const { onSelect, selectable, selected, selectedItems } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
     const selectedSequenceNodePathInfos = (0, react_1.useMemo)(() => {
         if (!selected ||
             selectedItems.length < 2 ||
@@ -321,7 +320,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         }
         const action = (0, get_sequence_double_click_action_1.getSequenceDoubleClickAction)({
             button: e.button,
-            canOpenInEditor,
+            canOpenSource,
             numberOfConnectedCompositions: connectedCompositions.length,
             sequenceWasDragged: dragAwareDoubleClick.consumePointerGestureWasDragged(),
         });
@@ -338,12 +337,12 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
             }));
             return;
         }
-        openInEditor(null);
+        openSource();
     }, [
-        canOpenInEditor,
+        canOpenSource,
         connectedCompositions,
         dragAwareDoubleClick,
-        openInEditor,
+        openSource,
         s,
         selectComposition,
         sequenceFrameOffset,
@@ -354,7 +353,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         }
         performSequenceDoubleClick(e);
     }, [dragAwareDoubleClick, performSequenceDoubleClick]);
-    const canHandleSequenceDoubleClick = connectedCompositions.length === 1 || canOpenInEditor;
+    const canHandleSequenceDoubleClick = connectedCompositions.length === 1 || canOpenSource;
     const canDeleteFromSource = Boolean(nodePath && (validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source));
     const deleteDisabled = !previewInteractive || !s.controls || !canDeleteFromSource;
     const isProgrammaticallyDuplicated = ((_h = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.numberOfSequencesWithThisNodePath) !== null && _h !== void 0 ? _h : 1) > 1;
@@ -462,6 +461,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
             assetLinkInfo: mediaSrc ? (0, timeline_asset_link_1.getTimelineAssetLinkInfo)(mediaSrc) : null,
             canOpenInEditor,
             codingAgentInfo,
+            copyImageElement: null,
             deleteDisabled,
             disableInteractivityDisabled,
             duplicateDisabled,

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

@@ -10,4 +10,6 @@ export declare const TimelineSequenceItem: React.NamedExoticComponent<{
     readonly keyframeDisplayOffset: number;
     readonly sequenceFrameOffset: number;
     readonly siblingIndex: number;
+    readonly numberOfHiddenDuplicates: number;
+    readonly showProvisionalVisibilityToggle: boolean;
 }>;

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -106,11 +106,12 @@ const effectDropHighlight = {
     outline: colors_1.BORDER_TIMELINE_DROP_BLUE,
     outlineOffset: -1,
 };
-const TimelineSequenceExpandArrowInner = ({ disabled, isExpanded, nodePathInfo, sequence }) => {
+const TimelineSequenceExpandArrowInner = ({ disabled, isExpanded, nodePathInfo, selectedItems, sequence }) => {
     const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
     const hasExpandableContent = (0, use_timeline_expanded_tree_1.useTimelineSequenceHasExpandableContent)({
         sequence,
         nodePathInfo,
+        selectedItems,
     });
     const onToggleExpand = (0, react_1.useCallback)(() => toggleTrack(nodePathInfo), [nodePathInfo, toggleTrack]);
     if (!hasExpandableContent) {
@@ -122,6 +123,7 @@ const areTimelineSequenceExpandArrowPropsEqual = (first, second) => {
     var _a, _b, _c, _d;
     return (first.disabled === second.disabled &&
         first.isExpanded === second.isExpanded &&
+        first.selectedItems === second.selectedItems &&
         ((_a = first.sequence.controls) === null || _a === void 0 ? void 0 : _a.schema) === ((_b = second.sequence.controls) === null || _b === void 0 ? void 0 : _b.schema) &&
         ((_c = first.sequence.controls) === null || _c === void 0 ? void 0 : _c.runtimeValues) ===
             ((_d = second.sequence.controls) === null || _d === void 0 ? void 0 : _d.runtimeValues) &&
@@ -169,9 +171,9 @@ const getSequencePointerDropTargetAtPoint = ({ clientX, clientY, }) => {
     return null;
 };
 const SEQUENCE_REORDER_POINTER_THRESHOLD = 3;
-const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions, nestedDepth, sequence, nodePathInfo, keyframeDisplayOffset, sequenceFrameOffset, siblingIndex, }) => {
+const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions, nestedDepth, sequence, nodePathInfo, keyframeDisplayOffset, sequenceFrameOffset, siblingIndex, numberOfHiddenDuplicates, showProvisionalVisibilityToggle, }) => {
     var _a, _b;
-    var _c, _d, _e, _f;
+    var _c, _d, _e;
     const nodePath = (_c = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _c !== void 0 ? _c : null;
     const { hovered, onPointerEnter, onPointerLeave } = (0, timeline_sequence_hover_1.useTimelineSequenceHover)(nodePathInfo);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
@@ -187,8 +189,7 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
     const assetContextMenu = (0, use_asset_timeline_context_menu_1.useAssetTimelineContextMenu)();
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
     const deleteTimelineItems = (0, use_delete_timeline_items_1.useDeleteTimelineItems)();
-    const { onSelect, selectable, selected } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
-    const { selectItem, selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
+    const { onSelect, selectable, selected, selectedItems, selectItem } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
     const selectedSequenceNodePathInfos = (0, react_1.useMemo)(() => {
         if (!selected ||
             selectedItems.length < 2 ||
@@ -204,7 +205,7 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
     const sequenceReorderWrapperRef = (0, react_1.useRef)(null);
     const stopSequencePointerSession = (0, react_1.useRef)(null);
     const suppressNextClick = (0, react_1.useRef)(false);
-    const { canOpenInEditor, canConfigureApps, codingAgentInfo, editorInfo, openInCodingAgent, openInEditor, originalLocation, } = (0, use_open_sequence_in_apps_1.useOpenSequenceInApps)(sequence);
+    const { canConfigureApps, canOpenInEditor, canOpenSource, codingAgentInfo, editorInfo, openInCodingAgent, openInEditor, openSource, originalLocation, } = (0, use_open_sequence_in_apps_1.useOpenSequenceInApps)(sequence);
     const validatedLocation = (0, react_1.useMemo)(() => {
         var _a;
         if (!originalLocation ||
@@ -229,17 +230,16 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
     const timelineDisplayName = sequence.displayName === '' && connectedCompositions.length === 1
         ? connectedCompositions[0].id
         : displayName;
-    const numberOfHiddenDuplicates = Math.max(0, ((_d = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.numberOfSequencesWithThisNodePath) !== null && _d !== void 0 ? _d : 1) - 1);
     const canDeleteFromSource = Boolean(nodePath && (validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source));
     const nodePathKey = (0, react_1.useMemo)(() => nodePath ? remotion_1.Internals.makeSequencePropsSubscriptionKey(nodePath) : null, [nodePath]);
-    const parentId = (_e = sequence.parent) !== null && _e !== void 0 ? _e : null;
+    const parentId = (_d = sequence.parent) !== null && _d !== void 0 ? _d : null;
     const canReorderSequence = previewInteractive &&
         Boolean(nodePath && nodePathKey && (validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source)) &&
         (nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.numberOfSequencesWithThisNodePath) === 1;
     const canHandleSequenceDrag = previewInteractive;
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
     const deleteDisabled = (0, react_1.useMemo)(() => !previewInteractive || !sequence.controls || !canDeleteFromSource, [previewInteractive, sequence.controls, canDeleteFromSource]);
-    const isProgrammaticallyDuplicated = ((_f = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.numberOfSequencesWithThisNodePath) !== null && _f !== void 0 ? _f : 1) > 1;
+    const isProgrammaticallyDuplicated = ((_e = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.numberOfSequencesWithThisNodePath) !== null && _e !== void 0 ? _e : 1) > 1;
     const duplicateDisabled = deleteDisabled || isProgrammaticallyDuplicated;
     const disableInteractivityDisabled = !previewInteractive ||
         !sequence.showInTimeline ||
@@ -477,10 +477,10 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
                 updateDropTarget(currentClientY);
             },
         });
-        stopSequencePointerSession.current = (0, pointer_session_1.startCapturedPointerSession)({
+        stopSequencePointerSession.current = (0, pointer_session_1.startDeferredCapturedPointerSession)({
             captureTarget: sourceElement,
             event: e.nativeEvent,
-            onMove: (pointerEvent) => {
+            onMove: (pointerEvent, capturePointer) => {
                 currentClientY = pointerEvent.clientY;
                 if (!didDrag &&
                     Math.hypot(pointerEvent.clientX - startX, pointerEvent.clientY - startY) < SEQUENCE_REORDER_POINTER_THRESHOLD) {
@@ -488,6 +488,7 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
                 }
                 if (!didDrag) {
                     didDrag = true;
+                    capturePointer();
                     previousUserSelect = document.body.style.userSelect;
                     previousWebkitUserSelect = document.body.style.webkitUserSelect;
                     document.body.style.userSelect = 'none';
@@ -515,7 +516,8 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
                 autoScroll.update({ clientX: startX, clientY: pointerEvent.clientY });
             },
             onEnd: (reason, pointerEvent) => {
-                if (reason === 'pointerup' && pointerEvent && didDrag) {
+                const released = (0, pointer_session_1.isPointerSessionRelease)(reason, pointerEvent);
+                if (released && didDrag) {
                     updateDropTarget(pointerEvent.clientY);
                 }
                 autoScroll.stop();
@@ -531,7 +533,7 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
                 setTimeout(() => {
                     suppressNextClick.current = false;
                 }, 0);
-                if (reason === 'pointerup' && pointerEvent && activeDrop) {
+                if (released && activeDrop) {
                     activeDropTarget === null || activeDropTarget === void 0 ? void 0 : activeDropTarget.reorder(activeDrop);
                 }
             },
@@ -639,6 +641,8 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
         codeHiddenStatus !== undefined &&
         codeHiddenStatus !== null &&
         codeHiddenStatus.status === 'static';
+    const showVisibilityToggle = canToggleVisibility ||
+        (previewInteractive && showProvisionalVisibilityToggle);
     const onSequenceDoubleClick = (0, react_1.useCallback)((e) => {
         if ((0, TimelineSelection_1.isTimelineSelectionModifierEvent)(e)) {
             e.stopPropagation();
@@ -646,7 +650,7 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
         }
         const action = (0, get_sequence_double_click_action_1.getSequenceDoubleClickAction)({
             button: e.button,
-            canOpenInEditor,
+            canOpenSource,
             numberOfConnectedCompositions: connectedCompositions.length,
             // The track list row reorders via native drag-and-drop, which
             // already suppresses `dblclick` after a drag.
@@ -665,16 +669,16 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
             }));
             return;
         }
-        openInEditor(null);
+        openSource();
     }, [
-        canOpenInEditor,
+        canOpenSource,
         connectedCompositions,
-        openInEditor,
+        openSource,
         selectComposition,
         sequence,
         sequenceFrameOffset,
     ]);
-    const canHandleSequenceDoubleClick = connectedCompositions.length === 1 || canOpenInEditor;
+    const canHandleSequenceDoubleClick = connectedCompositions.length === 1 || canOpenSource;
     const canRenameSelectedSequence = canRenameThisSequence &&
         selected &&
         selectedItems.length === 1 &&
@@ -702,7 +706,8 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
                 return;
             }
             if (document.activeElement instanceof HTMLInputElement ||
-                document.activeElement instanceof HTMLTextAreaElement) {
+                document.activeElement instanceof HTMLTextAreaElement ||
+                document.activeElement instanceof HTMLButtonElement) {
                 return;
             }
             e.preventDefault();
@@ -829,6 +834,7 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
             assetLinkInfo: mediaSrc ? (0, timeline_asset_link_1.getTimelineAssetLinkInfo)(mediaSrc) : null,
             canOpenInEditor,
             codingAgentInfo,
+            copyImageElement: null,
             deleteDisabled,
             disableInteractivityDisabled,
             duplicateDisabled,
@@ -1032,12 +1038,12 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
             clientId: previewServerState.clientId,
         });
     }, [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(TimelineLayerChildren_1.TimelineLayerChildrenToggle, { sequence: sequence }), 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: [
+    const trackRow = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: nestedDepth, eye: showVisibilityToggle ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: canToggleVisibility ? onToggleVisibility : null })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: jsx_runtime_1.jsx(TimelineLayerChildren_1.TimelineLayerChildrenToggle, { sequence: sequence }), 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.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: [
+                    ] })) : null, jsx_runtime_1.jsx(TimelineSequenceName_1.TimelineSequenceName, { displayName: timelineDisplayName, fallbackDisplayName: fallbackDisplayName, selected: selected, containsSelection: containsSelection, editing: isRenaming, onCancelEditing: onCancelRenaming, onSaveName: onSaveName }), 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, 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, selectedItems: selectedItems, sequence: sequence })
                     ] })) : null, mediaSrc ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                         jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }),
                         " ",