@remotion/studio 4.0.526 → 4.0.527

package/dist/components/Timeline/TimelineSequence.js

@@ -52,6 +52,7 @@ const AudioWaveform_1 = require("../AudioWaveform");
 const ConfirmationDialog_1 = require("../ConfirmationDialog");
 const ContextMenu_1 = require("../ContextMenu");
 const InitialCompositionLoader_1 = require("../InitialCompositionLoader");
+const SequencePropsSubscriptionProvider_1 = require("../SequencePropsSubscriptionProvider");
 const use_select_asset_1 = require("../use-select-asset");
 const disable_sequence_interactivity_1 = require("./disable-sequence-interactivity");
 const duplicate_selected_timeline_item_1 = require("./duplicate-selected-timeline-item");
@@ -61,6 +62,7 @@ const get_timeline_media_start_frame_1 = require("./get-timeline-media-start-fra
 const get_timeline_sequence_visible_layout_1 = require("./get-timeline-sequence-visible-layout");
 const imperative_state_1 = require("./imperative-state");
 const LoopedTimelineIndicators_1 = require("./LoopedTimelineIndicators");
+const split_selected_timeline_item_1 = require("./split-selected-timeline-item");
 const timeline_asset_link_1 = require("./timeline-asset-link");
 const TimelineImageInfo_1 = require("./TimelineImageInfo");
 const TimelineSelection_1 = require("./TimelineSelection");
@@ -242,6 +244,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     var _f, _g, _h, _j, _k, _l, _m;
     const video = remotion_1.Internals.useVideo();
     const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
+    const overrideIdToNodePathMappingsRef = (0, react_1.useContext)(SequencePropsSubscriptionProvider_1.OverrideIdToNodePathMappingsRefContext);
     const renderWindow = (0, react_1.useContext)(TimelineViewport_1.TimelineViewportContext);
     const mediaDurationDragLimitsRegistry = (0, react_1.useContext)(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceMediaDurationDragLimitsContext);
     const dragAwareDoubleClick = (0, react_1.useMemo)(() => (0, drag_aware_double_click_1.createDragAwareDoubleClickTracker)(), []);
@@ -377,6 +380,26 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         }
         (0, duplicate_selected_timeline_item_1.duplicateSequencesFromSource)(selectedSequenceNodePathInfos, confirm).catch(() => undefined);
     }, [confirm, previewInteractive, selectedSequenceNodePathInfos]);
+    const onSplitSelectedSequences = (0, react_1.useCallback)(() => {
+        var _a;
+        if (!previewInteractive || selectedSequenceNodePathInfos === null) {
+            return;
+        }
+        (_a = (0, split_selected_timeline_item_1.splitSelectedTimelineItems)({
+            selections: selectedItems,
+            sequences,
+            overrideIdsToNodePaths: overrideIdToNodePathMappingsRef.current,
+            propStatuses,
+            splitFrame: (0, imperative_state_1.getCurrentFrame)(),
+        })) === null || _a === void 0 ? void 0 : _a.catch(() => undefined);
+    }, [
+        overrideIdToNodePathMappingsRef,
+        previewInteractive,
+        propStatuses,
+        selectedItems,
+        selectedSequenceNodePathInfos,
+        sequences,
+    ]);
     const onDeleteSequenceFromSource = (0, react_1.useCallback)(() => {
         if (!(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) ||
             !nodePath ||
@@ -433,8 +456,10 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
             return (0, get_sequence_context_menu_items_1.getMultiSequenceContextMenuItems)({
                 deleteDisabled: !previewInteractive,
                 duplicateDisabled: !previewInteractive,
+                splitDisabled: !previewInteractive,
                 onDeleteSelectedSequences,
                 onDuplicateSelectedSequences,
+                onSplitSelectedSequences,
             });
         }
         const splitMenuItem = (0, get_sequence_split_menu_item_1.getSequenceSplitMenuItem)({
@@ -513,6 +538,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         onDisableSequenceInteractivity,
         onDuplicateSequenceFromSource,
         onDuplicateSelectedSequences,
+        onSplitSelectedSequences,
         openInCodingAgent,
         openInEditor,
         originalLocation,

package/dist/components/Timeline/TimelineSequenceFrame.js

@@ -15,6 +15,7 @@ const relativeFrameStyle = {
     whiteSpace: 'nowrap',
     pointerEvents: 'none',
     userSelect: 'none',
+    WebkitUserSelect: 'none',
 };
 const snowflakeStyle = {
     flexShrink: 0,

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -62,6 +62,7 @@ const layout_1 = require("../layout");
 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 SequencePropsSubscriptionProvider_1 = require("../SequencePropsSubscriptionProvider");
 const use_select_asset_1 = require("../use-select-asset");
 const disable_sequence_interactivity_1 = require("./disable-sequence-interactivity");
 const duplicate_selected_timeline_item_1 = require("./duplicate-selected-timeline-item");
@@ -69,6 +70,7 @@ const get_sequence_context_menu_items_1 = require("./get-sequence-context-menu-i
 const get_sequence_split_menu_item_1 = require("./get-sequence-split-menu-item");
 const imperative_state_1 = require("./imperative-state");
 const save_sequence_prop_1 = require("./save-sequence-prop");
+const split_selected_timeline_item_1 = require("./split-selected-timeline-item");
 const timeline_asset_link_1 = require("./timeline-asset-link");
 const timeline_refs_1 = require("./timeline-refs");
 const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
@@ -175,6 +177,9 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
     var _a, _b;
     var _c, _d, _e;
     const nodePath = (_c = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _c !== void 0 ? _c : null;
+    const sequencesRef = (0, react_1.useContext)(remotion_1.Internals.SequenceManagerRefContext);
+    const overrideIdToNodePathMappingsRef = (0, react_1.useContext)(SequencePropsSubscriptionProvider_1.OverrideIdToNodePathMappingsRefContext);
+    const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
     const { hovered, onPointerEnter, onPointerLeave } = (0, timeline_sequence_hover_1.useTimelineSequenceHover)(nodePathInfo);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
@@ -257,6 +262,26 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
         }
         (0, duplicate_selected_timeline_item_1.duplicateSequencesFromSource)(selectedSequenceNodePathInfos, confirm).catch(() => undefined);
     }, [confirm, previewInteractive, selectedSequenceNodePathInfos]);
+    const onSplitSelectedSequences = (0, react_1.useCallback)(() => {
+        var _a;
+        if (!previewInteractive || selectedSequenceNodePathInfos === null) {
+            return;
+        }
+        (_a = (0, split_selected_timeline_item_1.splitSelectedTimelineItems)({
+            selections: selectedItems,
+            sequences: sequencesRef.current,
+            overrideIdsToNodePaths: overrideIdToNodePathMappingsRef.current,
+            propStatuses: propStatusesRef.current,
+            splitFrame: (0, imperative_state_1.getCurrentFrame)(),
+        })) === null || _a === void 0 ? void 0 : _a.catch(() => undefined);
+    }, [
+        overrideIdToNodePathMappingsRef,
+        previewInteractive,
+        propStatusesRef,
+        selectedItems,
+        selectedSequenceNodePathInfos,
+        sequencesRef,
+    ]);
     const onDeleteSequenceFromSource = (0, react_1.useCallback)(() => {
         if (deleteDisabled ||
             !(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) ||
@@ -806,8 +831,10 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
             return (0, get_sequence_context_menu_items_1.getMultiSequenceContextMenuItems)({
                 deleteDisabled: !previewInteractive,
                 duplicateDisabled: !previewInteractive,
+                splitDisabled: !previewInteractive,
                 onDeleteSelectedSequences,
                 onDuplicateSelectedSequences,
+                onSplitSelectedSequences,
             });
         }
         const splitMenuItem = (0, get_sequence_split_menu_item_1.getSequenceSplitMenuItem)({
@@ -964,6 +991,7 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
         onDisableSequenceInteractivity,
         onDuplicateSequenceFromSource,
         onDuplicateSelectedSequences,
+        onSplitSelectedSequences,
         onRenameSequence,
         onSelect,
         openInCodingAgent,

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

@@ -4,6 +4,7 @@ type TimelineRenderWindow = {
     readonly width: number;
 };
 export declare const TimelineViewportContext: React.Context<TimelineRenderWindow | null>;
+export declare const syncTimelineViewport: () => void;
 export declare const getTimelineRenderWindow: (scrollable: HTMLDivElement) => TimelineRenderWindow;
 export declare const TimelineViewportProvider: React.FC<{
     readonly children: React.ReactNode;

package/dist/components/Timeline/TimelineViewport.js

@@ -1,9 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineViewportProvider = exports.getTimelineRenderWindow = exports.TimelineViewportContext = void 0;
+exports.TimelineViewportProvider = exports.getTimelineRenderWindow = exports.syncTimelineViewport = exports.TimelineViewportContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 exports.TimelineViewportContext = (0, react_1.createContext)(null);
+let updateTimelineViewport = null;
+const syncTimelineViewport = () => {
+    updateTimelineViewport === null || updateTimelineViewport === void 0 ? void 0 : updateTimelineViewport();
+};
+exports.syncTimelineViewport = syncTimelineViewport;
 const getTimelineRenderWindow = (scrollable) => {
     const viewportWidth = scrollable.clientWidth;
     if (viewportWidth === 0) {
@@ -41,6 +46,7 @@ const TimelineViewportProvider = ({ children, scrollable }) => {
     (0, react_1.useLayoutEffect)(() => {
         let element = null;
         let resizeObserver = null;
+        updateTimelineViewport = update;
         const animationFrame = requestAnimationFrame(() => {
             element = scrollable.current;
             if (!element) {
@@ -52,6 +58,9 @@ const TimelineViewportProvider = ({ children, scrollable }) => {
             element.addEventListener('scroll', update);
         });
         return () => {
+            if (updateTimelineViewport === update) {
+                updateTimelineViewport = null;
+            }
             cancelAnimationFrame(animationFrame);
             resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
             element === null || element === void 0 ? void 0 : element.removeEventListener('scroll', update);

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

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.deleteSelectedTimelineItems = exports.getTimelineSelectionAfterDeletingItems = exports.deleteSequencesFromSource = void 0;
 const remotion_1 = require("remotion");
 const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
-const delete_jsx_node_api_1 = require("../delete-jsx-node-api");
+const delete_jsx_nodes_api_1 = require("../delete-jsx-nodes-api");
 const effect_operations_api_1 = require("../effect-operations-api");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const delete_selected_keyframe_1 = require("./delete-selected-keyframe");
@@ -39,7 +39,7 @@ const deleteSequencesFromSource = async (nodePathInfos, confirm) => {
     if (!(await confirmDeletingDuplicatedSequences(nodePathInfos, confirm))) {
         return false;
     }
-    return (0, delete_jsx_node_api_1.deleteJsxNode)({
+    return (0, delete_jsx_nodes_api_1.deleteJsxNodes)({
         nodes: nodePathInfos.map((nodePathInfo) => {
             const nodePath = nodePathInfo.sequenceSubscriptionKey;
             return {

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

@@ -3,11 +3,13 @@ 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, }: {
+export declare const getMultiSequenceContextMenuItems: ({ deleteDisabled, duplicateDisabled, splitDisabled, onDeleteSelectedSequences, onDuplicateSelectedSequences, onSplitSelectedSequences, }: {
     readonly deleteDisabled: boolean;
     readonly duplicateDisabled: boolean;
+    readonly splitDisabled: boolean;
     readonly onDeleteSelectedSequences: () => void;
     readonly onDuplicateSelectedSequences: () => void;
+    readonly onSplitSelectedSequences: () => void;
 }) => ComboboxValue[];
 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;

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

@@ -96,7 +96,7 @@ const copyImageToClipboard = async (element) => {
         }),
     ]);
 };
-const getMultiSequenceContextMenuItems = ({ deleteDisabled, duplicateDisabled, onDeleteSelectedSequences, onDuplicateSelectedSequences, }) => {
+const getMultiSequenceContextMenuItems = ({ deleteDisabled, duplicateDisabled, splitDisabled, onDeleteSelectedSequences, onDuplicateSelectedSequences, onSplitSelectedSequences, }) => {
     return [
         {
             type: 'item',
@@ -110,6 +110,18 @@ const getMultiSequenceContextMenuItems = ({ deleteDisabled, duplicateDisabled, o
             subMenu: null,
             value: 'duplicate-selected-sequences',
         },
+        {
+            type: 'item',
+            id: 'split-selected-sequences',
+            keyHint: null,
+            label: 'Split selected at playhead',
+            leftItem: null,
+            disabled: splitDisabled,
+            onClick: onSplitSelectedSequences,
+            quickSwitcherLabel: null,
+            subMenu: null,
+            value: 'split-selected-sequences',
+        },
         {
             type: 'divider',
             id: 'duplicate-delete-selected-sequences-divider',

package/dist/components/Timeline/split-selected-timeline-item.d.ts

@@ -17,20 +17,23 @@ export declare const splitTimelineSequenceFromSource: ({ nodePathInfo, splitFram
     nodePathInfo: SequenceNodePathInfo;
     splitFrame: number;
 }) => Promise<boolean>;
-export declare const shouldHandleTimelineDuplicateShortcut: ({ shiftKey, }: {
-    readonly shiftKey: boolean;
-}) => boolean;
-export declare const shouldHandleTimelineSplitShortcut: ({ shiftKey, }: {
-    readonly shiftKey: boolean;
-}) => boolean;
-export declare const splitSelectedTimelineItems: ({ selections, sequences, overrideIdsToNodePaths, propStatuses, splitFrame, splitSequence, }: {
+export declare const splitTimelineSequencesFromSource: ({ sequences, }: {
+    sequences: {
+        nodePathInfo: SequenceNodePathInfo;
+        splitFrame: number;
+    }[];
+}) => Promise<boolean>;
+export declare const splitSelectedTimelineItems: ({ selections, sequences, overrideIdsToNodePaths, propStatuses, splitFrame, splitSequences, notify, }: {
     selections: readonly import("@remotion/canvas").CanvasSelectionItem[];
     sequences: TSequence[];
     overrideIdsToNodePaths: OverrideIdToNodePaths;
     propStatuses: PropStatuses | undefined;
     splitFrame: number;
-    splitSequence?: ((options: {
-        nodePathInfo: SequenceNodePathInfo;
-        splitFrame: number;
+    splitSequences?: ((options: {
+        sequences: {
+            nodePathInfo: SequenceNodePathInfo;
+            splitFrame: number;
+        }[];
     }) => Promise<boolean>) | undefined;
+    notify?: ((message: string, durationInMs: number) => void) | undefined;
 }) => Promise<boolean> | null;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.splitSelectedTimelineItems = exports.shouldHandleTimelineSplitShortcut = exports.shouldHandleTimelineDuplicateShortcut = exports.splitTimelineSequenceFromSource = exports.getTimelineSequenceSplitEligibility = void 0;
+exports.splitSelectedTimelineItems = exports.splitTimelineSequencesFromSource = exports.splitTimelineSequenceFromSource = exports.getTimelineSequenceSplitEligibility = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const remotion_1 = require("remotion");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
@@ -88,12 +88,22 @@ const getTimelineSequenceSplitEligibility = ({ selection, sequence, splitFrame,
 };
 exports.getTimelineSequenceSplitEligibility = getTimelineSequenceSplitEligibility;
 const splitTimelineSequenceFromSource = ({ nodePathInfo, splitFrame, }) => {
-    const nodePath = nodePathInfo.sequenceSubscriptionKey;
+    return (0, exports.splitTimelineSequencesFromSource)({
+        sequences: [{ nodePathInfo, splitFrame }],
+    });
+};
+exports.splitTimelineSequenceFromSource = splitTimelineSequenceFromSource;
+const splitTimelineSequencesFromSource = ({ sequences, }) => {
     return (0, split_jsx_sequence_api_1.splitJsxSequence)({
-        fileName: nodePath.absolutePath,
-        nodePath: nodePath.nodePath,
-        sequenceKeys: nodePath.sequenceKeys,
-        splitFrame,
+        sequences: sequences.map(({ nodePathInfo, splitFrame }) => {
+            const nodePath = nodePathInfo.sequenceSubscriptionKey;
+            return {
+                fileName: nodePath.absolutePath,
+                nodePath: nodePath.nodePath,
+                sequenceKeys: nodePath.sequenceKeys,
+                splitFrame,
+            };
+        }),
     })
         .then((result) => {
         if (result.success) {
@@ -107,41 +117,54 @@ const splitTimelineSequenceFromSource = ({ nodePathInfo, splitFrame, }) => {
         return false;
     });
 };
-exports.splitTimelineSequenceFromSource = splitTimelineSequenceFromSource;
-const shouldHandleTimelineDuplicateShortcut = ({ shiftKey, }) => !shiftKey;
-exports.shouldHandleTimelineDuplicateShortcut = shouldHandleTimelineDuplicateShortcut;
-const shouldHandleTimelineSplitShortcut = ({ shiftKey, }) => shiftKey;
-exports.shouldHandleTimelineSplitShortcut = shouldHandleTimelineSplitShortcut;
-const splitSelectedTimelineItems = ({ selections, sequences, overrideIdsToNodePaths, propStatuses, splitFrame, splitSequence = exports.splitTimelineSequenceFromSource, }) => {
+exports.splitTimelineSequencesFromSource = splitTimelineSequencesFromSource;
+const splitSelectedTimelineItems = ({ selections, sequences, overrideIdsToNodePaths, propStatuses, splitFrame, splitSequences = exports.splitTimelineSequencesFromSource, notify = NotificationCenter_1.showNotification, }) => {
     var _a;
-    if (selections.length !== 1) {
+    if (selections.length === 0 ||
+        selections.some((selection) => selection.type !== 'sequence')) {
         return null;
     }
-    const [selection] = selections;
-    if (selection.type !== 'sequence') {
-        return null;
+    const eligible = [];
+    const skippedReasons = [];
+    for (const selection of selections) {
+        if (selection.type !== 'sequence') {
+            continue;
+        }
+        const track = (0, find_track_for_node_path_info_1.findTrackForNodePathInfo)({
+            sequences,
+            overrideIdsToNodePaths,
+            nodePathInfo: selection.nodePathInfo,
+        });
+        const sequencePropStatuses = propStatuses
+            ? remotion_1.Internals.getPropStatusesCtx(propStatuses, selection.nodePathInfo.sequenceSubscriptionKey)
+            : undefined;
+        const eligibility = (0, exports.getTimelineSequenceSplitEligibility)({
+            selection,
+            sequence: (_a = track === null || track === void 0 ? void 0 : track.sequence) !== null && _a !== void 0 ? _a : null,
+            splitFrame,
+            propStatuses: sequencePropStatuses,
+        });
+        if (eligibility.canSplit) {
+            eligible.push({
+                nodePathInfo: eligibility.nodePathInfo,
+                splitFrame,
+            });
+        }
+        else {
+            skippedReasons.push(eligibility.reason);
+        }
     }
-    const track = (0, find_track_for_node_path_info_1.findTrackForNodePathInfo)({
-        sequences,
-        overrideIdsToNodePaths,
-        nodePathInfo: selection.nodePathInfo,
-    });
-    const sequencePropStatuses = propStatuses
-        ? remotion_1.Internals.getPropStatusesCtx(propStatuses, selection.nodePathInfo.sequenceSubscriptionKey)
-        : undefined;
-    const eligibility = (0, exports.getTimelineSequenceSplitEligibility)({
-        selection,
-        sequence: (_a = track === null || track === void 0 ? void 0 : track.sequence) !== null && _a !== void 0 ? _a : null,
-        splitFrame,
-        propStatuses: sequencePropStatuses,
-    });
-    if (!eligibility.canSplit) {
-        (0, NotificationCenter_1.showNotification)(eligibility.reason, 4000);
+    if (eligible.length === 0) {
+        notify(selections.length === 1
+            ? skippedReasons[0]
+            : `None of the ${selections.length} selected clips can be split at the playhead`, 4000);
         return Promise.resolve(false);
     }
-    return splitSequence({
-        nodePathInfo: eligibility.nodePathInfo,
-        splitFrame,
+    return splitSequences({ sequences: eligible }).then((success) => {
+        if (success && skippedReasons.length > 0) {
+            notify(`Split ${eligible.length} ${eligible.length === 1 ? 'clip' : 'clips'}. Skipped ${skippedReasons.length} ${skippedReasons.length === 1 ? 'clip' : 'clips'} that could not be split.`, 4000);
+        }
+        return success;
     });
 };
 exports.splitSelectedTimelineItems = splitSelectedTimelineItems;

package/dist/components/TimelineCombobox.js

@@ -20,6 +20,7 @@ const label = {
     textAlign: 'left',
     textOverflow: 'ellipsis',
     userSelect: 'none',
+    WebkitUserSelect: 'none',
     whiteSpace: 'nowrap',
 };
 const TimelineCombobox = ({ values, selectedId, title, tooltipDelay, labelWidth = 32, renderLeftItem, unhoveredIconColor = colors_1.LIGHT_TEXT, }) => {

package/dist/components/Transcription/TranscriptionModal.js

@@ -280,7 +280,7 @@ const AdvancedSettings = ({ chunkLengthInSeconds, doSample, forceFullSequences,
                             title: 'Learn more about No-repeat n-gram size',
                         }, min: 0, name: "No-repeat n-gram size", onValueChanged: setNoRepeatNgramSize, step: 1, value: noRepeatNgramSize })] }), decodingValidationMessage ? (jsx_runtime_1.jsx("div", { id: TRANSCRIPTION_DECODING_MESSAGE_ID, "aria-live": "polite", style: { padding: '0 16px' }, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: decodingValidationMessage, type: "error" }) })) : null] }));
 };
-const TranscriptionModal = ({ audioStreamIndex, displayName, requestInit, src, }) => {
+const TranscriptionModal = ({ audioStreamIndex, displayName, requestInit, src, target, }) => {
     var _a, _b, _c;
     const [tab, setTab] = (0, react_1.useState)('transcribe');
     const isModelCached = (0, react_1.useCallback)((model) => (0, whisper_webgpu_1.isWhisperModelCached)({ model }), []);
@@ -323,11 +323,14 @@ const TranscriptionModal = ({ audioStreamIndex, displayName, requestInit, src, }
         };
     }, []);
     const normalizedOutName = outName.normalize('NFC').toLowerCase();
-    const queuedOutputExists = captionJobs.some((job) => (job.status === 'idle' || job.status === 'running') &&
+    const queuedOutputExists = captionJobs.some((job) => job.target === null &&
+        (job.status === 'idle' || job.status === 'running') &&
         job.outName.normalize('NFC').toLowerCase() === normalizedOutName);
-    const outputValidationMessage = (_a = (0, caption_output_name_1.validateCaptionOutputName)(outName)) !== null && _a !== void 0 ? _a : (queuedOutputExists
-        ? 'Another caption job is already using this output file'
-        : null);
+    const outputValidationMessage = target === null
+        ? ((_a = (0, caption_output_name_1.validateCaptionOutputName)(outName)) !== null && _a !== void 0 ? _a : (queuedOutputExists
+            ? 'Another caption job is already using this output file'
+            : null))
+        : null;
     const exists = staticFiles.some((file) => file.name.normalize('NFC').toLowerCase() === normalizedOutName);
     const chunkValidationMessage = strideLengthInSeconds * 2 >= chunkLengthInSeconds
         ? 'Stride length must be less than half of chunk length'
@@ -371,7 +374,8 @@ const TranscriptionModal = ({ audioStreamIndex, displayName, requestInit, src, }
             displayName,
             audioStreamIndex,
             requestInit,
-            outName,
+            outName: target === null ? outName : 'Basic captions',
+            target,
             model: selectedModel,
             language: modelInfo.multilingual ? selectedLanguage : null,
             task: modelInfo.supportsTranslation ? selectedTask : 'transcribe',
@@ -398,6 +402,7 @@ const TranscriptionModal = ({ audioStreamIndex, displayName, requestInit, src, }
         forceFullSequences,
         noRepeatNgramSize,
         outName,
+        target,
         repetitionPenalty,
         requestInit,
         src,
@@ -410,17 +415,17 @@ const TranscriptionModal = ({ audioStreamIndex, displayName, requestInit, src, }
         temperature,
         topK,
     ]);
-    return (jsx_runtime_1.jsx(DismissableModal_1.DismissableModal, { ariaLabel: `Transcribe ${displayName}`, children: jsx_runtime_1.jsxs("div", { style: transcriptionModalStyle, children: [
-                jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: `Transcribe ${displayName}` }), jsx_runtime_1.jsxs("div", { style: render_modals_1.container, children: [
+    const title = target === null ? `Transcribe ${displayName}` : 'Generate captions';
+    return (jsx_runtime_1.jsx(DismissableModal_1.DismissableModal, { ariaLabel: title, children: jsx_runtime_1.jsxs("div", { style: transcriptionModalStyle, children: [
+                jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: title }), jsx_runtime_1.jsxs("div", { style: render_modals_1.container, children: [
                         jsx_runtime_1.jsx("div", { style: render_modals_1.flexer }), jsx_runtime_1.jsx(Button_1.Button, { onClick: onAddToQueue, disabled: !canTranscribe, title: transcribeDisabledReason, style: {
                                 ...render_modals_1.buttonStyle,
                                 backgroundColor: canTranscribe
                                     ? render_modals_1.buttonStyle.backgroundColor
                                     : colors_1.BLUE_DISABLED,
-                            }, children: "Transcribe" })
+                            }, children: target === null ? 'Transcribe' : 'Generate captions' })
                     ] }), jsx_runtime_1.jsxs("div", { style: transcriptionLayout, children: [
-                        jsx_runtime_1.jsxs("div", { style: render_modals_1.leftSidebar, children: [jsx_runtime_1.jsx(vertical_1.VerticalTab, { autoFocus: true, style: render_modals_1.horizontalTab, selected: tab === 'transcribe', onClick: () => setTab('transcribe'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(transcription_1.TranscriptionIcon, { color: color, style: render_modals_1.icon }) })), children: "Transcribe" }), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'models', onClick: () => setTab('models'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(models_1.ModelsIcon, { color: color, style: render_modals_1.icon }) })), children: "Models" }), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(gear_1.GearIcon, { color: color, style: render_modals_1.icon }) })), children: "Advanced" })] }), jsx_runtime_1.jsxs("div", { style: tab === 'transcribe' ? settingsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [
-                                jsx_runtime_1.jsx(OutputSettings, { exists: exists, onOutNameChange: onOutNameChange, outName: outName, validationMessage: outputValidationMessage }), jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {}), jsx_runtime_1.jsx(ModelSettings, { cachedModels: cachedModels, selectedLanguage: selectedLanguage, selectedModel: selectedModel, selectedTask: selectedTask, setSelectedLanguage: setSelectedLanguage, setSelectedModel: setSelectedModel, setSelectedTask: setSelectedTask, supportState: supportState })
+                        jsx_runtime_1.jsxs("div", { style: render_modals_1.leftSidebar, children: [jsx_runtime_1.jsx(vertical_1.VerticalTab, { autoFocus: true, style: render_modals_1.horizontalTab, selected: tab === 'transcribe', onClick: () => setTab('transcribe'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(transcription_1.TranscriptionIcon, { color: color, style: render_modals_1.icon }) })), children: "Transcribe" }), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'models', onClick: () => setTab('models'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(models_1.ModelsIcon, { color: color, style: render_modals_1.icon }) })), children: "Models" }), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(gear_1.GearIcon, { color: color, style: render_modals_1.icon }) })), children: "Advanced" })] }), jsx_runtime_1.jsxs("div", { style: tab === 'transcribe' ? settingsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [target === null ? (jsx_runtime_1.jsx(OutputSettings, { exists: exists, onOutNameChange: onOutNameChange, outName: outName, validationMessage: outputValidationMessage })) : null, target === null ? jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {}) : null, jsx_runtime_1.jsx(ModelSettings, { cachedModels: cachedModels, selectedLanguage: selectedLanguage, selectedModel: selectedModel, selectedTask: selectedTask, setSelectedLanguage: setSelectedLanguage, setSelectedModel: setSelectedModel, setSelectedTask: setSelectedTask, supportState: supportState })
                             ] }), jsx_runtime_1.jsx("div", { style: tab === 'advanced' ? advancedPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(AdvancedSettings, { chunkLengthInSeconds: chunkLengthInSeconds, decodingValidationMessage: decodingValidationMessage, doSample: doSample, forceFullSequences: forceFullSequences, noRepeatNgramSize: noRepeatNgramSize, repetitionPenalty: repetitionPenalty, setChunkLengthInSeconds: setChunkLengthInSeconds, setDoSample: setDoSample, setForceFullSequences: setForceFullSequences, setNoRepeatNgramSize: setNoRepeatNgramSize, setRepetitionPenalty: setRepetitionPenalty, setStrideLengthInSeconds: setStrideLengthInSeconds, setTemperature: setTemperature, setTopK: setTopK, strideLengthInSeconds: strideLengthInSeconds, temperature: temperature, topK: topK, validationMessage: chunkValidationMessage }) }), jsx_runtime_1.jsx(Models_1.Models, { description: 'Models are downloaded automatically when needed.\nYou can also manage the browser cache here.', indent: true, visible: tab === 'models' })
                     ] })
             ] }) }));

package/dist/components/Transcription/TranscriptionModalWithOptionalWhisper.js

@@ -43,6 +43,6 @@ const LazyTranscriptionModal = react_1.default.lazy(async () => {
     return { default: TranscriptionModal };
 });
 const TranscriptionModalWithOptionalWhisper = ({ state }) => {
-    return (jsx_runtime_1.jsx(OptionalPackageModal_1.OptionalPackageModal, { ariaLabel: "Install transcription package", packageName: whisper_webgpu_capability_1.WHISPER_WEBGPU_PACKAGE, title: "Transcribe", children: jsx_runtime_1.jsx(react_1.Suspense, { fallback: null, children: jsx_runtime_1.jsx(LazyTranscriptionModal, { ...state }) }) }));
+    return (jsx_runtime_1.jsx(OptionalPackageModal_1.OptionalPackageModal, { ariaLabel: "Install transcription package", packageName: whisper_webgpu_capability_1.WHISPER_WEBGPU_PACKAGE, title: state.target === null ? 'Transcribe' : 'Generate captions', children: jsx_runtime_1.jsx(react_1.Suspense, { fallback: null, children: jsx_runtime_1.jsx(LazyTranscriptionModal, { ...state }) }) }));
 };
 exports.TranscriptionModalWithOptionalWhisper = TranscriptionModalWithOptionalWhisper;

package/dist/components/WebMcp.js

@@ -476,6 +476,7 @@ const WebMcp = () => {
                         model: model.name,
                         noRepeatNgramSize,
                         outName: outputPath,
+                        target: null,
                         repetitionPenalty,
                         requestInit: null,
                         src,

package/dist/components/composition-drop-preview.d.ts

@@ -1,5 +1,7 @@
 import type { PreviewSize } from 'remotion';
+import type { Guide } from '../state/editor-guides';
 import { type InsertElementDropPosition } from './import-assets';
+import { type SelectedOutlineSnapPoint } from './selected-outline-snap';
 type Dimensions = {
     readonly width: number;
     readonly height: number;
@@ -11,6 +13,7 @@ type CanvasSize = {
 export type CompositionDropPreview = {
     readonly compositionDimensions: Dimensions;
     readonly dropPosition: InsertElementDropPosition;
+    readonly snapPoints: readonly SelectedOutlineSnapPoint[];
 };
 export type CompositionDropPreviewBox = {
     readonly left: number;
@@ -18,12 +21,16 @@ export type CompositionDropPreviewBox = {
     readonly width: number;
     readonly height: number;
 };
-export declare const snapCompositionDropPosition: ({ compositionDimensions, destinationDimensions, dropPosition, scale, }: {
+export declare const snapCompositionDropPosition: ({ compositionDimensions, destinationDimensions, dropPosition, guides, scale, }: {
     readonly compositionDimensions: Dimensions;
     readonly destinationDimensions: Dimensions;
     readonly dropPosition: InsertElementDropPosition;
+    readonly guides: readonly Guide[];
     readonly scale: number;
-}) => InsertElementDropPosition;
+}) => {
+    readonly dropPosition: InsertElementDropPosition;
+    readonly snapPoints: readonly SelectedOutlineSnapPoint[];
+};
 export declare const getCompositionDropPreviewBox: ({ canvasSize, destinationDimensions, preview, previewSize, }: {
     readonly canvasSize: CanvasSize;
     readonly destinationDimensions: Dimensions;

package/dist/components/composition-drop-preview.js

@@ -4,7 +4,7 @@ exports.getCompositionDropPreviewBox = exports.snapCompositionDropPosition = voi
 const studio_fit_padding_1 = require("../helpers/studio-fit-padding");
 const import_assets_1 = require("./import-assets");
 const selected_outline_snap_1 = require("./selected-outline-snap");
-const snapCompositionDropPosition = ({ compositionDimensions, destinationDimensions, dropPosition, scale, }) => {
+const snapCompositionDropPosition = ({ compositionDimensions, destinationDimensions, dropPosition, guides, scale, }) => {
     var _a, _b;
     const left = dropPosition.centerX - compositionDimensions.width / 2;
     const top = dropPosition.centerY - compositionDimensions.height / 2;
@@ -31,12 +31,15 @@ const snapCompositionDropPosition = ({ compositionDimensions, destinationDimensi
         targets: (0, selected_outline_snap_1.getSelectedOutlineSnapTargets)({
             compositionHeight: destinationDimensions.height,
             compositionWidth: destinationDimensions.width,
-            guides: [],
+            guides,
         }),
     });
     return {
-        centerX: dropPosition.centerX + ((_a = snap.snapOffsetX) !== null && _a !== void 0 ? _a : 0),
-        centerY: dropPosition.centerY + ((_b = snap.snapOffsetY) !== null && _b !== void 0 ? _b : 0),
+        dropPosition: {
+            centerX: dropPosition.centerX + ((_a = snap.snapOffsetX) !== null && _a !== void 0 ? _a : 0),
+            centerY: dropPosition.centerY + ((_b = snap.snapOffsetY) !== null && _b !== void 0 ? _b : 0),
+        },
+        snapPoints: snap.activeSnapPoints,
     };
 };
 exports.snapCompositionDropPosition = snapCompositionDropPosition;

package/dist/components/composition-menu-items.js

@@ -176,7 +176,7 @@ const getCompositionMenuItems = ({ composition, connectionStatus, resolvedLocati
                         (0, get_git_menu_item_1.openGitSource)({ folder: false, location: resolvedLocation });
                     }
                 },
-                quickSwitcherLabel: `Open composition in ${defaultOpenInName}`,
+                quickSwitcherLabel: `Composition: Open in ${defaultOpenInName}`,
                 subMenu: null,
                 type: 'item',
                 value: defaultOpenInTarget === 'editor'
@@ -194,7 +194,7 @@ const getCompositionMenuItems = ({ composition, connectionStatus, resolvedLocati
                 label: 'Open composition in...',
                 leftItem: null,
                 onClick: () => undefined,
-                quickSwitcherLabel: null,
+                quickSwitcherLabel: 'Composition',
                 subMenu: {
                     items: compositionOpenInMenuItems,
                     leaveLeftSpace: true,
@@ -220,7 +220,7 @@ const getCompositionMenuItems = ({ composition, connectionStatus, resolvedLocati
                         openComponentInGitSource().catch(() => undefined);
                     }
                 },
-                quickSwitcherLabel: `Open composition component in ${defaultOpenInName}`,
+                quickSwitcherLabel: `Component: Open in ${defaultOpenInName}`,
                 subMenu: null,
                 type: 'item',
                 value: defaultOpenInTarget === 'editor'
@@ -238,7 +238,7 @@ const getCompositionMenuItems = ({ composition, connectionStatus, resolvedLocati
                 label: 'Open component in...',
                 leftItem: null,
                 onClick: () => undefined,
-                quickSwitcherLabel: null,
+                quickSwitcherLabel: 'Component',
                 subMenu: {
                     items: componentOpenInMenuItems,
                     leaveLeftSpace: true,

package/dist/components/delete-jsx-nodes-api.d.ts

@@ -0,0 +1,2 @@
+import type { DeleteJsxNodesRequest, DeleteJsxNodesResponse } from '@remotion/studio-shared';
+export declare const deleteJsxNodes: (request: DeleteJsxNodesRequest) => Promise<DeleteJsxNodesResponse>;