@remotion/studio 4.0.517 → 4.0.519

package/dist/components/SidebarRenderButton.d.ts

@@ -3,4 +3,5 @@ import type { _InternalTypes } from 'remotion';
 export declare const SidebarRenderButton: React.FC<{
     readonly composition: _InternalTypes['AnyCompMetadata'];
     readonly visible: boolean;
+    readonly readOnlyStudio: boolean;
 }>;

package/dist/components/SidebarRenderButton.js

@@ -5,10 +5,14 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../helpers/client-id");
+const hoverable_1 = require("../helpers/hoverable");
 const render_1 = require("../icons/render");
 const modals_1 = require("../state/modals");
 const InlineAction_1 = require("./InlineAction");
-const SidebarRenderButton = ({ composition, visible }) => {
+const revealStyle = {
+    display: 'flex',
+};
+const SidebarRenderButton = ({ composition, visible, readOnlyStudio }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const iconStyle = (0, react_1.useMemo)(() => {
         return {
@@ -78,15 +82,21 @@ const SidebarRenderButton = ({ composition, visible }) => {
             initialMediaCacheSizeInBytes: defaults.mediaCacheSizeInBytes,
             renderDefaults: defaults,
             initialDarkMode: defaults.darkMode,
-            readOnlyStudio: false,
+            readOnlyStudio,
         });
-    }, [composition.defaultProps, composition.id, props, setSelectedModal]);
+    }, [
+        composition.defaultProps,
+        composition.id,
+        props,
+        readOnlyStudio,
+        setSelectedModal,
+    ]);
     const renderAction = (0, react_1.useCallback)((color) => {
         return jsx_runtime_1.jsx(render_1.ThinRenderIcon, { fill: color, svgProps: iconStyle });
     }, [iconStyle]);
-    if (!visible || connectionStatus !== 'connected') {
+    if (!visible || (connectionStatus !== 'connected' && !readOnlyStudio)) {
         return null;
     }
-    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick, variant: null }));
+    return (jsx_runtime_1.jsx("div", { className: hoverable_1.HOVER_GROUP_REVEAL_CLASS_NAME, style: revealStyle, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick, variant: null, style: hoverable_1.NO_HOVER_BACKGROUND_STYLE, className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME }) }));
 };
 exports.SidebarRenderButton = SidebarRenderButton;

package/dist/components/Timeline/SequencePropsObserver.js

@@ -7,6 +7,7 @@ const fast_refresh_context_1 = require("../../fast-refresh-context");
 const client_id_1 = require("../../helpers/client-id");
 const sequence_node_path_mutations_1 = require("../../helpers/sequence-node-path-mutations");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
+const sequence_props_subscription_store_1 = require("./sequence-props-subscription-store");
 const SequencePropsObserver = () => {
     const { subscribeToEvent } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { remapPropStatuses, setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
@@ -37,11 +38,13 @@ const SequencePropsObserver = () => {
         }
         const statusRemappings = [];
         const overrideUpdates = [];
+        const overrideIdsToRefresh = new Set();
         for (const [overrideId, previousNodePath] of Object.entries(overrideIdToNodePathMappingsRef.current)) {
             let { nodePath } = previousNodePath;
             let wasRemapped = false;
             let wasDeleted = false;
             let runtimeNodePathExists = true;
+            let runtimeNodePathNeedsRefresh = false;
             const previousNodePathString = JSON.stringify(previousNodePath.nodePath);
             for (const mutation of mutations) {
                 for (const file of mutation.files) {
@@ -49,29 +52,35 @@ const SequencePropsObserver = () => {
                         continue;
                     }
                     // Prop statuses follow source nodes to their new paths. Override IDs,
-                    // however, follow React's runtime instances. After deleting an unkeyed
-                    // sibling, React reuses the instance already at the destination path.
-                    // Keep that mapping in place and only remove mappings for vacated paths.
-                    const runtimeNodePathIsSource = file.remappings.some((item) => JSON.stringify(item.oldNodePath) === previousNodePathString);
+                    // however, follow React's runtime instances. Structural edits may reuse
+                    // the instance already at a path, so only remove mappings from paths
+                    // which are sources without also being destinations.
+                    const runtimeNodePathIsSource = file.remappings.some((item) => item.oldNodePath !== null &&
+                        JSON.stringify(item.oldNodePath) === previousNodePathString);
                     const runtimeNodePathIsDestination = file.remappings.some((item) => item.newNodePath !== null &&
                         JSON.stringify(item.newNodePath) === previousNodePathString);
-                    const runtimeNodePathWasRestored = file.restoredNodePaths.some((item) => JSON.stringify(item) === previousNodePathString);
+                    const runtimeNodePathWasInserted = file.remappings.some((item) => item.oldNodePath === null &&
+                        item.newNodePath !== null &&
+                        JSON.stringify(item.newNodePath) === previousNodePathString);
+                    const runtimeNodePathWasUpdated = file.remappings.some((item) => item.oldNodePath !== null &&
+                        item.newNodePath !== null &&
+                        JSON.stringify(item.oldNodePath) === previousNodePathString &&
+                        JSON.stringify(item.newNodePath) === previousNodePathString);
                     if (runtimeNodePathIsSource) {
-                        runtimeNodePathExists =
-                            runtimeNodePathIsDestination || runtimeNodePathWasRestored;
+                        runtimeNodePathExists = runtimeNodePathIsDestination;
+                        runtimeNodePathNeedsRefresh =
+                            runtimeNodePathWasInserted || runtimeNodePathWasUpdated;
                     }
-                    else if (runtimeNodePathIsDestination ||
-                        runtimeNodePathWasRestored) {
+                    else if (runtimeNodePathIsDestination) {
                         runtimeNodePathExists = true;
+                        runtimeNodePathNeedsRefresh =
+                            runtimeNodePathWasInserted || runtimeNodePathWasUpdated;
                     }
                     if (wasDeleted) {
-                        const wasRestored = file.restoredNodePaths.some((restoredNodePath) => JSON.stringify(restoredNodePath) === JSON.stringify(nodePath));
-                        if (wasRestored) {
-                            wasDeleted = false;
-                        }
                         continue;
                     }
-                    const remapping = file.remappings.find((item) => JSON.stringify(item.oldNodePath) === JSON.stringify(nodePath));
+                    const remapping = file.remappings.find((item) => item.oldNodePath !== null &&
+                        JSON.stringify(item.oldNodePath) === JSON.stringify(nodePath));
                     if (!remapping) {
                         continue;
                     }
@@ -97,11 +106,17 @@ const SequencePropsObserver = () => {
                 overrideId,
                 nodePath: runtimeNodePathExists ? previousNodePath : null,
             });
+            if (runtimeNodePathExists && runtimeNodePathNeedsRefresh) {
+                overrideIdsToRefresh.add(overrideId);
+            }
         }
         remapPropStatuses(statusRemappings);
         for (const event of overrideUpdates) {
             setOverrideIdToNodePath(event.overrideId, event.nodePath);
         }
+        for (const overrideId of overrideIdsToRefresh) {
+            (0, sequence_props_subscription_store_1.refreshSequencePropsSubscription)(overrideId);
+        }
         for (const event of statusRemappings) {
             if (event.nodePath === null) {
                 continue;

package/dist/components/Timeline/TimelineKeyframeControls.js

@@ -206,6 +206,7 @@ const hasTargetKeyframeAtCurrentFrame = (target) => {
     return (0, get_keyframe_navigation_1.hasKeyframeAtSourceFrame)(target.propStatus.keyframes, target.sourceFrame);
 };
 const getAddChange = (target) => {
+    var _a;
     if (target.propStatus.status === 'computed' ||
         !(0, studio_shared_1.isSchemaFieldKeyframable)({ schema: target.schema, key: target.fieldKey }) ||
         hasTargetKeyframeAtCurrentFrame(target)) {
@@ -213,7 +214,8 @@ const getAddChange = (target) => {
     }
     const value = getCurrentKeyframeValue({
         propStatus: target.propStatus,
-        jsxFrame: target.sourceFrame,
+        jsxFrame: target.sourceFrame +
+            ((_a = target.propStatus.keyframeDisplayOffsetAdjustment) !== null && _a !== void 0 ? _a : 0),
         defaultValue: target.defaultValue,
         dragOverrideValue: target.dragOverrideValue,
     });

package/dist/components/Timeline/TimelineRowChrome.js

@@ -91,8 +91,10 @@ const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, styl
     }, [onSelect]);
     const onContextMenu = (0, react_1.useCallback)((e) => {
         e.stopPropagation();
-        onSelect();
-    }, [onSelect]);
+        if (!selected) {
+            onSelect();
+        }
+    }, [onSelect, selected]);
     const onDoubleClickIfNotInteractive = (0, react_1.useCallback)((e) => {
         const { target } = e;
         if (target instanceof Element &&

package/dist/components/Timeline/TimelineSequence.js

@@ -54,6 +54,7 @@ const delete_jsx_node_api_1 = require("../delete-jsx-node-api");
 const InitialCompositionLoader_1 = require("../InitialCompositionLoader");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const use_select_asset_1 = require("../use-select-asset");
+const delete_selected_timeline_item_1 = require("./delete-selected-timeline-item");
 const disable_sequence_interactivity_1 = require("./disable-sequence-interactivity");
 const duplicate_selected_timeline_item_1 = require("./duplicate-selected-timeline-item");
 const get_sequence_context_menu_items_1 = require("./get-sequence-context-menu-items");
@@ -117,7 +118,7 @@ const TimelineSequenceNegativeStartInner = ({ left, width, leftEdgeVisible, clip
 };
 const TimelineSequenceNegativeStart = react_1.default.memo(TimelineSequenceNegativeStartInner);
 const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premount, postmount, negativeStart, leftEdgeVisible, negativeStartClipped, style, children, nodePathInfo, sequenceFrameOffset, fromCanUpdate, frozenFrame, onMoveDragPointerDown, onPointerDownCapture, onDoubleClick, }) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     const ref = (0, react_1.useRef)(null);
     const { onSelect, selectable, selected, selectionItem } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
     const containsSelection = (0, TimelineSelection_1.useTimelineRowContainsSelection)(nodePathInfo);
@@ -195,8 +196,8 @@ const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premount, po
                 s.type !== 'video' &&
                 s.type !== 'image' &&
                 s.loopDisplay === undefined &&
-                (isInRange || isPremounting || isPostmounting) ? (jsx_runtime_1.jsx("div", { style: {
-                    paddingLeft: 5 + ((_c = negativeStart === null || negativeStart === void 0 ? void 0 : negativeStart.width) !== null && _c !== void 0 ? _c : 0) + ((_d = premount === null || premount === void 0 ? void 0 : premount.width) !== null && _d !== void 0 ? _d : 0),
+                (frozenFrame !== null || isInRange || isPremounting || isPostmounting) ? (jsx_runtime_1.jsx("div", { style: {
+                    paddingLeft: 5 + negativeStartEnd + ((_c = premount === null || premount === void 0 ? void 0 : premount.width) !== null && _c !== void 0 ? _c : 0),
                     height: '100%',
                     display: 'flex',
                     alignItems: 'center',
@@ -279,7 +280,16 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     const selectAsset = (0, use_select_asset_1.useSelectAsset)();
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
-    const { onSelect, selectable } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
+    const { onSelect, selectable, selected } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
+    const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
+    const selectedSequenceNodePathInfos = (0, react_1.useMemo)(() => {
+        if (!selected ||
+            selectedItems.length < 2 ||
+            selectedItems.some((item) => item.type !== 'sequence')) {
+            return null;
+        }
+        return selectedItems.flatMap((item) => item.type === 'sequence' ? [item.nodePathInfo] : []);
+    }, [selected, selectedItems]);
     const onSequenceDoubleClick = (0, react_1.useCallback)((e) => {
         if ((0, TimelineSelection_1.isTimelineSelectionModifierEvent)(e)) {
             e.stopPropagation();
@@ -332,6 +342,12 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         }
         (0, duplicate_selected_timeline_item_1.duplicateSequencesFromSource)([nodePathInfo], confirm).catch(() => undefined);
     }, [confirm, duplicateDisabled, nodePathInfo, validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source]);
+    const onDuplicateSelectedSequences = (0, react_1.useCallback)(() => {
+        if (!previewInteractive || selectedSequenceNodePathInfos === null) {
+            return;
+        }
+        (0, duplicate_selected_timeline_item_1.duplicateSequencesFromSource)(selectedSequenceNodePathInfos, confirm).catch(() => undefined);
+    }, [confirm, previewInteractive, selectedSequenceNodePathInfos]);
     const onDeleteSequenceFromSource = (0, react_1.useCallback)(async () => {
         if (!(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) || !nodePath || deleteDisabled) {
             return;
@@ -371,6 +387,12 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         nodePathInfo,
         validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source,
     ]);
+    const onDeleteSelectedSequences = (0, react_1.useCallback)(() => {
+        if (!previewInteractive || selectedSequenceNodePathInfos === null) {
+            return;
+        }
+        (0, delete_selected_timeline_item_1.deleteSequencesFromSource)(selectedSequenceNodePathInfos, confirm).catch(() => undefined);
+    }, [confirm, previewInteractive, selectedSequenceNodePathInfos]);
     const onDisableSequenceInteractivity = (0, react_1.useCallback)(() => {
         if (disableInteractivityDisabled ||
             !nodePath ||
@@ -393,9 +415,17 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     ]);
     const getContextMenuItems = (0, react_1.useCallback)(() => {
         var _a;
-        if (selectable) {
+        if (selectable && !selected) {
             onSelect({ shiftKey: false, toggleKey: false });
         }
+        if (selectedSequenceNodePathInfos !== null) {
+            return (0, get_sequence_context_menu_items_1.getMultiSequenceContextMenuItems)({
+                deleteDisabled: !previewInteractive,
+                duplicateDisabled: !previewInteractive,
+                onDeleteSelectedSequences,
+                onDuplicateSelectedSequences,
+            });
+        }
         const freezeFrameMenuItem = (0, use_sequence_freeze_frame_menu_item_1.getSequenceFreezeFrameMenuItem)({
             clientId: previewInteractive && previewServerState.type === 'connected'
                 ? previewServerState.clientId
@@ -454,8 +484,10 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         nodePath,
         onSelect,
         onDeleteSequenceFromSource,
+        onDeleteSelectedSequences,
         onDisableSequenceInteractivity,
         onDuplicateSequenceFromSource,
+        onDuplicateSelectedSequences,
         openInCodingAgent,
         openInEditor,
         originalLocation,
@@ -465,6 +497,8 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         s,
         selectAsset,
         selectable,
+        selected,
+        selectedSequenceNodePathInfos,
         sequenceFrameOffset,
         setPropStatuses,
         setSelectedModal,
@@ -543,9 +577,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
                 ? colors_1.TIMELINE_AUDIO_GRADIENT
                 : s.type === 'video'
                     ? colors_1.TIMELINE_VIDEO_GRADIENT
-                    : s.type === 'image'
-                        ? colors_1.TIMELINE_IMAGE_GRADIENT
-                        : colors_1.BLUE,
+                    : colors_1.BLUE,
             border: `${get_timeline_sequence_layout_1.SEQUENCE_BORDER_WIDTH}px solid ${colors_1.WHITE_ALPHA_20}`,
             borderLeftColor: (visibleLayout === null || visibleLayout === void 0 ? void 0 : visibleLayout.leftEdgeVisible) && !negativeStartClipped
                 ? colors_1.WHITE_ALPHA_20

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -62,6 +62,7 @@ const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const reorder_sequence_api_1 = require("../reorder-sequence-api");
 const selected_outline_types_1 = require("../selected-outline-types");
 const use_select_asset_1 = require("../use-select-asset");
+const delete_selected_timeline_item_1 = require("./delete-selected-timeline-item");
 const disable_sequence_interactivity_1 = require("./disable-sequence-interactivity");
 const duplicate_selected_timeline_item_1 = require("./duplicate-selected-timeline-item");
 const get_sequence_context_menu_items_1 = require("./get-sequence-context-menu-items");
@@ -195,6 +196,14 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
     const { onSelect, selectable, selected } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
     const { selectItem, selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
+    const selectedSequenceNodePathInfos = (0, react_1.useMemo)(() => {
+        if (!selected ||
+            selectedItems.length < 2 ||
+            selectedItems.some((item) => item.type !== 'sequence')) {
+            return null;
+        }
+        return selectedItems.flatMap((item) => item.type === 'sequence' ? [item.nodePathInfo] : []);
+    }, [selected, selectedItems]);
     const containsSelection = (0, TimelineSelection_1.useTimelineRowContainsSelection)(nodePathInfo);
     const [effectDropHovered, setEffectDropHovered] = (0, react_1.useState)(false);
     const [isRenaming, setIsRenaming] = (0, react_1.useState)(false);
@@ -246,6 +255,12 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
         }
         (0, duplicate_selected_timeline_item_1.duplicateSequencesFromSource)([nodePathInfo], confirm).catch(() => undefined);
     }, [confirm, duplicateDisabled, nodePathInfo, validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source]);
+    const onDuplicateSelectedSequences = (0, react_1.useCallback)(() => {
+        if (!previewInteractive || selectedSequenceNodePathInfos === null) {
+            return;
+        }
+        (0, duplicate_selected_timeline_item_1.duplicateSequencesFromSource)(selectedSequenceNodePathInfos, confirm).catch(() => undefined);
+    }, [confirm, previewInteractive, selectedSequenceNodePathInfos]);
     const onDeleteSequenceFromSource = (0, react_1.useCallback)(async () => {
         if (deleteDisabled || !(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) || !nodePath) {
             return;
@@ -285,6 +300,12 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
         validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source,
         nodePathInfo,
     ]);
+    const onDeleteSelectedSequences = (0, react_1.useCallback)(() => {
+        if (!previewInteractive || selectedSequenceNodePathInfos === null) {
+            return;
+        }
+        (0, delete_selected_timeline_item_1.deleteSequencesFromSource)(selectedSequenceNodePathInfos, confirm).catch(() => undefined);
+    }, [confirm, previewInteractive, selectedSequenceNodePathInfos]);
     const onDisableSequenceInteractivity = (0, react_1.useCallback)(() => {
         if (disableInteractivityDisabled ||
             !nodePath ||
@@ -693,9 +714,17 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
     }, [canRotate, nodePathInfo, selectItem, setManuallyEnabled]);
     const getContextMenuItems = (0, react_1.useCallback)(() => {
         var _a;
-        if (selectable) {
+        if (selectable && !selected) {
             onSelect({ shiftKey: false, toggleKey: false });
         }
+        if (selectedSequenceNodePathInfos !== null) {
+            return (0, get_sequence_context_menu_items_1.getMultiSequenceContextMenuItems)({
+                deleteDisabled: !previewInteractive,
+                duplicateDisabled: !previewInteractive,
+                onDeleteSelectedSequences,
+                onDuplicateSelectedSequences,
+            });
+        }
         const freezeFrameMenuItem = (0, use_sequence_freeze_frame_menu_item_1.getSequenceFreezeFrameMenuItem)({
             clientId: previewInteractive && previewServerState.type === 'connected'
                 ? previewServerState.clientId
@@ -835,8 +864,10 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
         onCrop,
         onRotate,
         onDeleteSequenceFromSource,
+        onDeleteSelectedSequences,
         onDisableSequenceInteractivity,
         onDuplicateSequenceFromSource,
+        onDuplicateSelectedSequences,
         onRenameSequence,
         onSelect,
         openInCodingAgent,
@@ -847,6 +878,8 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
         propStatusesForOverride,
         selectAsset,
         selectable,
+        selected,
+        selectedSequenceNodePathInfos,
         sequence,
         sequenceFrameOffset,
         setSelectedModal,

package/dist/components/Timeline/TimelineStack/get-stack.d.ts

@@ -1 +1,2 @@
+export declare const getSourceMapFilesForSource: (source: string) => Record<string, string> | null;
 export declare const getOriginalLocationFromStack: (stack: string, type: "sequence" | "visual-control") => Promise<import("../../../error-overlay/react-overlay/utils/get-source-map").OriginalPosition | null>;

package/dist/components/Timeline/TimelineStack/get-stack.js

@@ -1,16 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getOriginalLocationFromStack = void 0;
+exports.getOriginalLocationFromStack = exports.getSourceMapFilesForSource = void 0;
 const trace_mapping_1 = require("@jridgewell/trace-mapping");
 const get_source_map_1 = require("../../../error-overlay/react-overlay/utils/get-source-map");
 const get_location_of_sequence_1 = require("../../../helpers/get-location-of-sequence");
 const traceMapCache = {};
 const traceMapPromises = {};
+const traceMapsByOriginalSource = new Map();
+const sourceMapFilesCache = new WeakMap();
 const browserStudioOriginalSourcePrefix = 'browser-studio-original://';
 const studioOriginalSourcePrefix = 'studio-original://';
-const getSourceMapCache = async (fileName) => {
+const getSourceMapCache = (fileName) => {
     if (traceMapCache[fileName]) {
-        return traceMapCache[fileName];
+        return Promise.resolve(traceMapCache[fileName]);
     }
     if (traceMapPromises[fileName]) {
         return traceMapPromises[fileName];
@@ -18,8 +20,16 @@ const getSourceMapCache = async (fileName) => {
     traceMapPromises[fileName] = fetch(`${fileName}.map`)
         .then((res) => res.json())
         .then((json) => {
+        var _a;
         const map = new trace_mapping_1.TraceMap(json);
         traceMapCache[fileName] = map;
+        for (let index = 0; index < map.sources.length; index++) {
+            const source = map.sources[index];
+            const content = (_a = map.sourcesContent) === null || _a === void 0 ? void 0 : _a[index];
+            if (source !== null && typeof content === 'string') {
+                traceMapsByOriginalSource.set(source, map);
+            }
+        }
         return map;
     })
         .finally(() => {
@@ -27,6 +37,28 @@ const getSourceMapCache = async (fileName) => {
     });
     return traceMapPromises[fileName];
 };
+const getSourceMapFilesForSource = (source) => {
+    var _a;
+    const map = traceMapsByOriginalSource.get(source);
+    if (!map) {
+        return null;
+    }
+    const cached = sourceMapFilesCache.get(map);
+    if (cached) {
+        return cached;
+    }
+    const files = {};
+    for (let index = 0; index < map.sources.length; index++) {
+        const fileName = map.sources[index];
+        const content = (_a = map.sourcesContent) === null || _a === void 0 ? void 0 : _a[index];
+        if (fileName !== null && typeof content === 'string') {
+            files[fileName] = content;
+        }
+    }
+    sourceMapFilesCache.set(map, files);
+    return files;
+};
+exports.getSourceMapFilesForSource = getSourceMapFilesForSource;
 const getOriginalLocationFromStack = async (stack, type) => {
     const location = type === 'sequence'
         ? (0, get_location_of_sequence_1.getLocationOfSequence)(stack)

package/dist/components/Timeline/duplicate-selected-timeline-item.js

@@ -26,35 +26,33 @@ const confirmDuplicatingProgrammaticallyDuplicatedSequences = (nodePathInfos, co
         confirmLabel: 'Duplicate',
     });
 };
-const duplicateSequence = (nodePathInfo) => {
-    const nodePath = nodePathInfo.sequenceSubscriptionKey;
-    return (0, duplicate_jsx_node_api_1.duplicateJsxNode)({
-        fileName: nodePath.absolutePath,
-        nodePath: nodePath.nodePath,
-    });
-};
-const duplicateSequencesFromSource = (nodePathInfos, confirm) => {
+const duplicateSequencesFromSource = async (nodePathInfos, confirm) => {
     const programmaticallyDuplicated = nodePathInfos.filter((nodePathInfo) => nodePathInfo.numberOfSequencesWithThisNodePath > 1);
     const regular = nodePathInfos.filter((nodePathInfo) => nodePathInfo.numberOfSequencesWithThisNodePath <= 1);
-    return confirmDuplicatingProgrammaticallyDuplicatedSequences(programmaticallyDuplicated, confirm).then((shouldDuplicateProgrammaticSequences) => {
-        const toDuplicate = [...regular];
-        if (shouldDuplicateProgrammaticSequences) {
-            toDuplicate.push(...programmaticallyDuplicated);
+    const shouldDuplicateProgrammaticSequences = await confirmDuplicatingProgrammaticallyDuplicatedSequences(programmaticallyDuplicated, confirm);
+    const toDuplicate = [...regular];
+    if (shouldDuplicateProgrammaticSequences) {
+        toDuplicate.push(...programmaticallyDuplicated);
+    }
+    const nodes = toDuplicate.map((nodePathInfo) => {
+        const nodePath = nodePathInfo.sequenceSubscriptionKey;
+        return {
+            fileName: nodePath.absolutePath,
+            nodePath: nodePath.nodePath,
+        };
+    });
+    try {
+        if (nodes.length === 0) {
+            return;
         }
-        if (toDuplicate.length === 0) {
-            return Promise.resolve();
+        const result = await (0, duplicate_jsx_node_api_1.duplicateJsxNode)({ nodes });
+        if (!result.success) {
+            (0, NotificationCenter_1.showNotification)(result.reason, 4000);
         }
-        return Promise.all(toDuplicate.map(duplicateSequence))
-            .then((results) => {
-            const failedResult = results.find((result) => !result.success);
-            if (failedResult && !failedResult.success) {
-                (0, NotificationCenter_1.showNotification)(failedResult.reason, 4000);
-            }
-        })
-            .catch((err) => {
-            (0, NotificationCenter_1.showNotification)(err.message, 4000);
-        });
-    });
+    }
+    catch (err) {
+        (0, NotificationCenter_1.showNotification)(err.message, 4000);
+    }
 };
 exports.duplicateSequencesFromSource = duplicateSequencesFromSource;
 const isDuplicatableSequenceRowSelection = (selection) => selection.type === 'sequence';

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

@@ -2,6 +2,12 @@ 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 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, }: {
     readonly assetLinkInfo: TimelineAssetLinkInfo | null;
     readonly canOpenInEditor: 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 = void 0;
+exports.getSequenceContextMenuItems = exports.getMultiSequenceContextMenuItems = void 0;
 const no_react_1 = require("remotion/no-react");
 const format_file_location_1 = require("../../helpers/format-file-location");
 const get_open_in_menu_items_1 = require("../get-open-in-menu-items");
@@ -27,6 +27,39 @@ const normalizeMenuDividers = (items) => {
     return normalized;
 };
 const interactiveSvgComponentIdentity = 'dev.remotion.remotion.Interactive.Svg';
+const getMultiSequenceContextMenuItems = ({ deleteDisabled, duplicateDisabled, onDeleteSelectedSequences, onDuplicateSelectedSequences, }) => {
+    return [
+        {
+            type: 'item',
+            id: 'duplicate-selected-sequences',
+            keyHint: null,
+            label: 'Duplicate selected',
+            leftItem: null,
+            disabled: duplicateDisabled,
+            onClick: onDuplicateSelectedSequences,
+            quickSwitcherLabel: null,
+            subMenu: null,
+            value: 'duplicate-selected-sequences',
+        },
+        {
+            type: 'divider',
+            id: 'duplicate-delete-selected-sequences-divider',
+        },
+        {
+            type: 'item',
+            id: 'delete-selected-sequences',
+            keyHint: null,
+            label: 'Delete selected',
+            leftItem: null,
+            disabled: deleteDisabled,
+            onClick: onDeleteSelectedSequences,
+            quickSwitcherLabel: null,
+            subMenu: null,
+            value: 'delete-selected-sequences',
+        },
+    ];
+};
+exports.getMultiSequenceContextMenuItems = getMultiSequenceContextMenuItems;
 const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, 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;

package/dist/components/Timeline/sequence-props-subscription-store.d.ts

@@ -2,6 +2,8 @@ import type { SequenceNodePath, InteractivitySchema, VideoConfigValues } from 'r
 import { subscribeToSequenceProps } from '../sequence-props-api';
 type SubscribeResult = Awaited<ReturnType<typeof subscribeToSequenceProps>>;
 type ApplyResult = (result: SubscribeResult) => void;
+export declare const subscribeToSequencePropsRefresh: (overrideId: string, listener: () => void) => () => void;
+export declare const refreshSequencePropsSubscription: (overrideId: string) => void;
 export declare const acquireSequencePropsSubscription: ({ fileName, line, column, schema, componentIdentity, effects, nodePath, clientId, applyOnce, applyEach, videoConfigValues, stack, }: {
     fileName: string;
     line: number;

package/dist/components/Timeline/sequence-props-subscription-store.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.acquireSequencePropsSubscription = void 0;
+exports.acquireSequencePropsSubscription = exports.refreshSequencePropsSubscription = exports.subscribeToSequencePropsRefresh = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const remotion_1 = require("remotion");
 const sequence_props_api_1 = require("../sequence-props-api");
@@ -8,6 +8,27 @@ const sequence_props_api_1 = require("../sequence-props-api");
 // resolve both the old and new JSX nodes to the same line and column.
 const makeKey = ({ fileName, line, column, componentIdentity, sequenceKeys, assetKeys, effectKeys, videoConfigValues, stack, }) => `${fileName}\0${line}\0${column}\0${componentIdentity !== null && componentIdentity !== void 0 ? componentIdentity : ''}\0${sequenceKeys.join('\0')}\0${assetKeys.join('\0')}\0${effectKeys.map((keys) => keys.join('\0')).join('\0\0')}\0${JSON.stringify(videoConfigValues)}\0${stack !== null && stack !== void 0 ? stack : ''}`;
 const entries = new Map();
+const refreshListeners = new Map();
+const subscribeToSequencePropsRefresh = (overrideId, listener) => {
+    var _a;
+    const listeners = (_a = refreshListeners.get(overrideId)) !== null && _a !== void 0 ? _a : new Set();
+    listeners.add(listener);
+    refreshListeners.set(overrideId, listeners);
+    return () => {
+        listeners.delete(listener);
+        if (listeners.size === 0) {
+            refreshListeners.delete(overrideId);
+        }
+    };
+};
+exports.subscribeToSequencePropsRefresh = subscribeToSequencePropsRefresh;
+const refreshSequencePropsSubscription = (overrideId) => {
+    var _a;
+    for (const listener of (_a = refreshListeners.get(overrideId)) !== null && _a !== void 0 ? _a : []) {
+        listener();
+    }
+};
+exports.refreshSequencePropsSubscription = refreshSequencePropsSubscription;
 const acquireSequencePropsSubscription = ({ fileName, line, column, schema, componentIdentity, effects, nodePath, clientId, applyOnce, applyEach, videoConfigValues, stack, }) => {
     const sequenceKeys = (0, studio_shared_1.getAllSchemaKeys)(schema);
     const assetKeys = (0, studio_shared_1.getAssetSchemaKeys)(schema);