@remotion/studio 4.0.525 → 4.0.526

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, }) => {

package/dist/components/Timeline/TimelineSequence.js

@@ -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 ||
@@ -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 ||
@@ -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 ||
@@ -641,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();
@@ -704,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();
@@ -831,6 +834,7 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
             assetLinkInfo: mediaSrc ? (0, timeline_asset_link_1.getTimelineAssetLinkInfo)(mediaSrc) : null,
             canOpenInEditor,
             codingAgentInfo,
+            copyImageElement: null,
             deleteDisabled,
             disableInteractivityDisabled,
             duplicateDisabled,
@@ -1034,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 }),
                         " ",

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

@@ -1,10 +1,10 @@
 import { type VirtualItem } from '@tanstack/react-virtual';
 import React from 'react';
-import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
+import type { TimelineTrackWithDisplayGroup } from './timeline-display-groups';
 export type TimelineVirtualRow = {
     readonly afterDropLineOffset: number;
     readonly siblingIndex: number;
-    readonly track: TimelineTrackData;
+    readonly track: TimelineTrackWithDisplayGroup;
 };
 type TimelineVirtualizationContextValue = {
     readonly rows: readonly TimelineVirtualRow[];
@@ -16,7 +16,7 @@ export declare const TimelineVirtualizationProvider: React.FC<{
     readonly children: React.ReactNode;
     readonly hasBeenCut: boolean;
     readonly isStill: boolean;
-    readonly timeline: readonly TimelineTrackData[];
+    readonly timeline: readonly TimelineTrackWithDisplayGroup[];
 }>;
 export declare const useTimelineVirtualization: () => TimelineVirtualizationContextValue;
 export {};

package/dist/components/Timeline/get-sequence-context-menu-items.d.ts

@@ -2,15 +2,17 @@ import type { EditorPickerId, GetDefaultCodingAgentInfoResponse, GetDefaultEdito
 import type { ResolvedStackLocation, TSequence } from 'remotion';
 import type { ComboboxValue } from '../NewComposition/ComboBox';
 import type { TimelineAssetLinkInfo } from './timeline-asset-link';
+export declare const findCopyableFrameElement: (element: Element | null) => Element | null;
 export declare const getMultiSequenceContextMenuItems: ({ deleteDisabled, duplicateDisabled, onDeleteSelectedSequences, onDuplicateSelectedSequences, }: {
     readonly deleteDisabled: boolean;
     readonly duplicateDisabled: boolean;
     readonly onDeleteSelectedSequences: () => void;
     readonly onDuplicateSelectedSequences: () => void;
 }) => ComboboxValue[];
-export declare const getSequenceContextMenuItems: ({ assetLinkInfo, canOpenInEditor, deleteDisabled, disableInteractivityDisabled, duplicateDisabled, isProgrammaticallyDuplicated, includeSourceEditItems, codingAgentInfo, editorInfo, onConfigureApps, onDeleteSequenceFromSource, onDisableSequenceInteractivity, onDuplicateSequenceFromSource, openInCodingAgent, openInEditor, originalLocation, selectAsset, sequence, sourceActions, }: {
+export declare const getSequenceContextMenuItems: ({ assetLinkInfo, canOpenInEditor, copyImageElement, deleteDisabled, disableInteractivityDisabled, duplicateDisabled, isProgrammaticallyDuplicated, includeSourceEditItems, codingAgentInfo, editorInfo, onConfigureApps, onDeleteSequenceFromSource, onDisableSequenceInteractivity, onDuplicateSequenceFromSource, openInCodingAgent, openInEditor, originalLocation, selectAsset, sequence, sourceActions, }: {
     readonly assetLinkInfo: TimelineAssetLinkInfo | null;
     readonly canOpenInEditor: boolean;
+    readonly copyImageElement: Element | null;
     readonly deleteDisabled: boolean;
     readonly disableInteractivityDisabled: boolean;
     readonly duplicateDisabled: boolean;

package/dist/components/Timeline/get-sequence-context-menu-items.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getSequenceContextMenuItems = exports.getMultiSequenceContextMenuItems = void 0;
+exports.getSequenceContextMenuItems = exports.getMultiSequenceContextMenuItems = exports.findCopyableFrameElement = void 0;
 const no_react_1 = require("remotion/no-react");
 const format_file_location_1 = require("../../helpers/format-file-location");
 const get_git_menu_item_1 = require("../../helpers/get-git-menu-item");
@@ -28,6 +28,74 @@ const normalizeMenuDividers = (items) => {
     return normalized;
 };
 const interactiveSvgComponentIdentity = 'dev.remotion.remotion.Interactive.Svg';
+const findCopyableFrameElement = (element) => {
+    var _a;
+    if ((element === null || element === void 0 ? void 0 : element.tagName) === 'CANVAS' || (element === null || element === void 0 ? void 0 : element.tagName) === 'VIDEO') {
+        return element;
+    }
+    return (_a = element === null || element === void 0 ? void 0 : element.querySelector('canvas, video')) !== null && _a !== void 0 ? _a : null;
+};
+exports.findCopyableFrameElement = findCopyableFrameElement;
+const copyImageToClipboard = async (element) => {
+    let canvas;
+    if (element.tagName === 'CANVAS') {
+        const sourceCanvas = element;
+        canvas = document.createElement('canvas');
+        canvas.width = sourceCanvas.width;
+        canvas.height = sourceCanvas.height;
+        const context = canvas.getContext('2d');
+        if (!context) {
+            throw new Error('Could not create canvas context');
+        }
+        context.drawImage(sourceCanvas, 0, 0);
+    }
+    else if (element.tagName === 'IMG') {
+        const image = element;
+        if (image.naturalWidth === 0 || image.naturalHeight === 0) {
+            throw new Error('Image has not loaded');
+        }
+        canvas = document.createElement('canvas');
+        canvas.width = image.naturalWidth;
+        canvas.height = image.naturalHeight;
+        const context = canvas.getContext('2d');
+        if (!context) {
+            throw new Error('Could not create canvas context');
+        }
+        context.drawImage(image, 0, 0);
+    }
+    else if (element.tagName === 'VIDEO') {
+        const video = element;
+        if (video.videoWidth === 0 || video.videoHeight === 0) {
+            throw new Error('Video frame has not loaded');
+        }
+        canvas = document.createElement('canvas');
+        canvas.width = video.videoWidth;
+        canvas.height = video.videoHeight;
+        const context = canvas.getContext('2d');
+        if (!context) {
+            throw new Error('Could not create canvas context');
+        }
+        context.drawImage(video, 0, 0);
+    }
+    else {
+        throw new Error('Expected an image, video, or canvas element');
+    }
+    const blob = new Promise((resolve, reject) => {
+        canvas.toBlob((result) => {
+            if (result) {
+                resolve(result);
+            }
+            else {
+                reject(new Error('Could not convert image to PNG'));
+            }
+        }, 'image/png');
+    });
+    await navigator.clipboard.write([
+        new ClipboardItem({
+            'image/png': blob,
+        }),
+    ]);
+};
 const getMultiSequenceContextMenuItems = ({ deleteDisabled, duplicateDisabled, onDeleteSelectedSequences, onDuplicateSelectedSequences, }) => {
     return [
         {
@@ -61,9 +129,9 @@ const getMultiSequenceContextMenuItems = ({ deleteDisabled, duplicateDisabled, o
     ];
 };
 exports.getMultiSequenceContextMenuItems = getMultiSequenceContextMenuItems;
-const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, deleteDisabled, disableInteractivityDisabled, duplicateDisabled, isProgrammaticallyDuplicated, includeSourceEditItems, codingAgentInfo, editorInfo, onConfigureApps, onDeleteSequenceFromSource, onDisableSequenceInteractivity, onDuplicateSequenceFromSource, openInCodingAgent, openInEditor, originalLocation, selectAsset, sequence, sourceActions = [], }) => {
+const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, copyImageElement, deleteDisabled, disableInteractivityDisabled, duplicateDisabled, isProgrammaticallyDuplicated, includeSourceEditItems, codingAgentInfo, editorInfo, onConfigureApps, onDeleteSequenceFromSource, onDisableSequenceInteractivity, onDuplicateSequenceFromSource, openInCodingAgent, openInEditor, originalLocation, selectAsset, sequence, sourceActions = [], }) => {
     var _a, _b, _c;
-    var _d, _e, _f;
+    var _d, _e;
     const isInteractiveSvg = ((_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.componentIdentity) === interactiveSvgComponentIdentity;
     const installedEditors = (_d = editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors) !== null && _d !== void 0 ? _d : [];
     const defaultEditorId = (0, use_default_editor_info_1.getPreferredEditorId)(editorInfo);
@@ -74,7 +142,7 @@ const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, deleteDis
         ? (0, get_git_menu_item_1.getGitSourceName)(window.remotion_gitSource)
         : null;
     const defaultOpenInName = defaultOpenInTarget === 'editor' ? editorName : gitSourceName;
-    const defaultCodingAgent = codingAgentInfo === null || codingAgentInfo === void 0 ? void 0 : codingAgentInfo.installedCodingAgents.find((codingAgent) => codingAgent.id === codingAgentInfo.defaultCodingAgent);
+    const copyImageLabel = copyImageElement && sequence.type === 'image' ? 'Copy image' : 'Copy frame';
     const contextForAgents = (0, format_file_location_1.formatContextForAgents)({
         location: originalLocation,
         name: sequence.displayName || ((_b = sequence.controls) === null || _b === void 0 ? void 0 : _b.componentName) || null,
@@ -83,31 +151,34 @@ const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, deleteDis
     const openInCodingAgentWithContext = (codingAgentId, codingAgentName) => {
         openInCodingAgent(codingAgentId, codingAgentName, codingAgentId === 'copilot' ? null : contextForAgents);
     };
-    const openInMenuItems = onConfigureApps
-        ? (0, get_open_in_menu_items_1.getOpenInMenuItems)({
-            codingAgentInfo,
-            editorDisabled: !canOpenInEditor || !originalLocation,
-            editorInfo,
-            excludeCodingAgentId: (_f = defaultCodingAgent === null || defaultCodingAgent === void 0 ? void 0 : defaultCodingAgent.id) !== null && _f !== void 0 ? _f : null,
-            excludeEditorId: defaultEditorId,
-            fileManagerDisabled: !(originalLocation === null || originalLocation === void 0 ? void 0 : originalLocation.source),
-            folder: false,
-            location: originalLocation,
-            onConfigureApps,
-            onOpenInCodingAgent: openInCodingAgentWithContext,
-            onOpenInEditor: openInEditor,
-            onOpenInFileExplorer: () => {
-                if (!(originalLocation === null || originalLocation === void 0 ? void 0 : originalLocation.source)) {
-                    return;
-                }
-                (0, actions_1.openInFileExplorer)({ directory: originalLocation.source }).catch((err) => {
-                    (0, NotificationCenter_1.showNotification)(`Could not open file: ${err.message}`, 2000);
-                });
-            },
-            onOpenInGitClient: () => undefined,
-            onOpenInTerminal: null,
-        })
-        : [];
+    const openInMenuItems = (0, get_open_in_menu_items_1.getOpenInMenuItems)({
+        canOpenDesktopApps: onConfigureApps !== null,
+        codingAgentInfo,
+        editorDisabled: !canOpenInEditor || !originalLocation,
+        editorInfo,
+        excludeCodingAgentId: null,
+        excludeEditorId: defaultEditorId,
+        excludeGitSource: defaultOpenInTarget === 'git-source',
+        fileManagerDisabled: !(originalLocation === null || originalLocation === void 0 ? void 0 : originalLocation.source),
+        folder: false,
+        gitSourceDisabled: !originalLocation,
+        onConfigureApps,
+        onOpenInCodingAgent: openInCodingAgentWithContext,
+        onOpenInEditor: openInEditor,
+        onOpenInFileExplorer: () => {
+            if (!(originalLocation === null || originalLocation === void 0 ? void 0 : originalLocation.source)) {
+                return;
+            }
+            (0, actions_1.openInFileExplorer)({ directory: originalLocation.source }).catch((err) => {
+                (0, NotificationCenter_1.showNotification)(`Could not open file: ${err.message}`, 2000);
+            });
+        },
+        onOpenInGitClient: () => undefined,
+        onOpenInGitSource: () => {
+            (0, get_git_menu_item_1.openGitSource)({ folder: false, location: originalLocation });
+        },
+        onOpenInTerminal: null,
+    });
     const items = [
         defaultOpenInTarget && defaultOpenInName
             ? {
@@ -133,21 +204,7 @@ const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, deleteDis
                     : 'open-in-git-source',
             }
             : null,
-        defaultCodingAgent
-            ? {
-                type: 'item',
-                id: 'open-in-default-coding-agent',
-                keyHint: null,
-                label: `Open in ${defaultCodingAgent.nameWithType}`,
-                leftItem: null,
-                disabled: false,
-                onClick: () => openInCodingAgentWithContext(defaultCodingAgent.id, defaultCodingAgent.nameWithType),
-                quickSwitcherLabel: null,
-                subMenu: null,
-                value: 'open-in-default-coding-agent',
-            }
-            : null,
-        onConfigureApps
+        openInMenuItems.length > 0
             ? {
                 type: 'item',
                 id: 'open-in-another-app',
@@ -182,7 +239,35 @@ const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, deleteDis
                 value: 'show-asset',
             }
             : null,
-        assetLinkInfo
+        copyImageElement
+            ? {
+                type: 'divider',
+                id: 'copy-image-divider',
+            }
+            : null,
+        copyImageElement
+            ? {
+                type: 'item',
+                id: copyImageLabel === 'Copy image' ? 'copy-image' : 'copy-frame',
+                keyHint: null,
+                label: copyImageLabel,
+                leftItem: null,
+                disabled: false,
+                onClick: () => {
+                    copyImageToClipboard(copyImageElement)
+                        .then(() => {
+                        (0, NotificationCenter_1.showNotification)(`Copied ${copyImageLabel === 'Copy image' ? 'image' : 'frame'} to clipboard`, 1000);
+                    })
+                        .catch((err) => {
+                        (0, NotificationCenter_1.showNotification)(`Could not copy ${copyImageLabel === 'Copy image' ? 'image' : 'frame'}: ${err.message}`, 2000);
+                    });
+                },
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: copyImageLabel === 'Copy image' ? 'copy-image' : 'copy-frame',
+            }
+            : null,
+        assetLinkInfo || copyImageElement
             ? {
                 type: 'divider',
                 id: 'sequence-link-divider',

package/dist/components/Timeline/normalize-font-weight-for-keyframe.d.ts

@@ -0,0 +1 @@
+export declare const normalizeFontWeightForKeyframe: (value: unknown) => number | null;