@remotion/studio 4.0.496 → 4.0.497

package/dist/components/AudioWaveform.js

@@ -31,16 +31,6 @@ const getContainerStyle = (height) => {
         height,
     };
 };
-const errorMessage = {
-    fontSize: 13,
-    paddingTop: 6,
-    paddingBottom: 6,
-    paddingLeft: 12,
-    paddingRight: 12,
-    alignSelf: 'flex-start',
-    maxWidth: 450,
-    opacity: 0.75,
-};
 const getWaveformErrorMessage = () => {
     return new Error('No waveform available. The audio could not be decoded or may not support CORS.');
 };
@@ -302,7 +292,7 @@ const AudioWaveform = ({ src, height, startFrom, durationInFrames, visualization
         context.stroke();
     }, [height, parsedVolume, shouldRenderVolumeOverlay, visualizationWidth]);
     if (error) {
-        return (jsx_runtime_1.jsx("div", { style: getContainerStyle(height), children: jsx_runtime_1.jsx("div", { style: errorMessage, children: "No waveform available. The audio could not be decoded or may not support CORS." }) }));
+        return null;
     }
     if (!canUseWorkerPath && !peaks) {
         return null;

package/dist/components/Canvas.js

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Canvas = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const get_static_files_1 = require("../api/get-static-files");
@@ -18,7 +17,6 @@ const get_asset_metadata_1 = require("../helpers/get-asset-metadata");
 const get_effective_translation_1 = require("../helpers/get-effective-translation");
 const install_required_package_1 = require("../helpers/install-required-package");
 const open_in_editor_1 = require("../helpers/open-in-editor");
-const remote_asset_drag_1 = require("../helpers/remote-asset-drag");
 const smooth_zoom_1 = require("../helpers/smooth-zoom");
 const studio_fit_padding_1 = require("../helpers/studio-fit-padding");
 const use_keybinding_1 = require("../helpers/use-keybinding");
@@ -27,11 +25,12 @@ const editor_guides_1 = require("../state/editor-guides");
 const editor_zoom_gestures_1 = require("../state/editor-zoom-gestures");
 const call_api_1 = require("./call-api");
 const ConfirmationDialog_1 = require("./ConfirmationDialog");
+const drop_handler_data_1 = require("./drop-handler-data");
 const EditorGuides_1 = __importDefault(require("./EditorGuides"));
 const EditorRuler_1 = require("./EditorRuler");
 const use_is_ruler_visible_1 = require("./EditorRuler/use-is-ruler-visible");
 const effect_drag_and_drop_1 = require("./effect-drag-and-drop");
-const element_drag_and_drop_1 = require("./element-drag-and-drop");
+const handle_drop_1 = require("./handle-drop");
 const import_assets_1 = require("./import-assets");
 const layout_1 = require("./layout");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
@@ -101,97 +100,6 @@ const calculateCanvasScale = ({ addFitPadding, canvasSize, compositionHeight, co
         ? (0, studio_fit_padding_1.calculateStudioScale)(options)
         : remotion_1.Internals.calculateScale(options);
 };
-const isFileDragEvent = (event) => {
-    var _a;
-    var _b;
-    return Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []).includes('Files');
-};
-const isAssetDragEvent = (event) => {
-    var _a;
-    var _b;
-    return Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []).includes(studio_shared_1.ASSET_DRAG_MIME_TYPE);
-};
-const isComponentDragEvent = (event) => {
-    var _a;
-    var _b;
-    return Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []).includes(studio_shared_1.COMPONENT_DRAG_MIME_TYPE);
-};
-const isCompositionDragEvent = (event) => {
-    var _a;
-    var _b;
-    return Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []).includes(studio_shared_1.COMPOSITION_DRAG_MIME_TYPE);
-};
-const isElementDragEvent = (event) => {
-    var _a;
-    var _b;
-    return Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []).includes(studio_shared_1.ELEMENT_DRAG_MIME_TYPE);
-};
-const isSfxDragEvent = (event) => {
-    var _a;
-    var _b;
-    return Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []).includes(studio_shared_1.SFX_DRAG_MIME_TYPE);
-};
-const isRemoteAssetDragEvent = (event) => {
-    return (!isFileDragEvent(event) &&
-        !isAssetDragEvent(event) &&
-        !isCompositionDragEvent(event) &&
-        !isComponentDragEvent(event) &&
-        !isElementDragEvent(event) &&
-        !isSfxDragEvent(event) &&
-        (0, remote_asset_drag_1.hasRemoteAssetDragData)(event.dataTransfer));
-};
-const getAssetDragPath = (event) => {
-    var _a, _b;
-    var _c;
-    const value = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData(studio_shared_1.ASSET_DRAG_MIME_TYPE);
-    if (!value) {
-        return null;
-    }
-    return (_c = (_b = (0, studio_shared_1.parseAssetDragData)(value)) === null || _b === void 0 ? void 0 : _b.assetPath) !== null && _c !== void 0 ? _c : null;
-};
-const getCompositionDragData = (event) => {
-    var _a;
-    const value = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData(studio_shared_1.COMPOSITION_DRAG_MIME_TYPE);
-    if (!value) {
-        return null;
-    }
-    return (0, studio_shared_1.parseCompositionDragData)(value);
-};
-const getComponentDragData = (event) => {
-    var _a;
-    for (const type of [
-        studio_shared_1.COMPONENT_DRAG_MIME_TYPE,
-        'application/json',
-        'text/plain',
-    ]) {
-        const value = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData(type);
-        if (!value) {
-            continue;
-        }
-        const parsed = (0, studio_shared_1.parseComponentDragData)(value);
-        if (parsed) {
-            return parsed;
-        }
-    }
-    return null;
-};
-const getSfxDragUrl = (event) => {
-    const { dataTransfer } = event;
-    if (!dataTransfer) {
-        return null;
-    }
-    for (const type of [studio_shared_1.SFX_DRAG_MIME_TYPE, 'application/json', 'text/plain']) {
-        const value = dataTransfer.getData(type);
-        if (!value) {
-            continue;
-        }
-        const parsed = (0, studio_shared_1.parseSfxDragData)(value);
-        if (parsed) {
-            return parsed.sfx.url;
-        }
-    }
-    return null;
-};
 const getDropPosition = ({ addFitPadding, clientX, clientY, contentDimensions, previewSize, size, }) => {
     if (contentDimensions === null || contentDimensions === 'none') {
         return null;
@@ -766,6 +674,7 @@ const Canvas = ({ canvasContent, size }) => {
                     compositionFile: activeElementInstallRequest.compositionFile,
                     compositionId: activeElementInstallRequest.compositionId,
                     dropPosition: null,
+                    from: null,
                 });
             }
         };
@@ -787,14 +696,7 @@ const Canvas = ({ canvasContent, size }) => {
         };
     }, [activeElementInstallRequest, confirm]);
     const onDragOver = (0, react_1.useCallback)((event) => {
-        if ((!isFileDragEvent(event) &&
-            !isAssetDragEvent(event) &&
-            !isCompositionDragEvent(event) &&
-            !isComponentDragEvent(event) &&
-            !isElementDragEvent(event) &&
-            !isSfxDragEvent(event) &&
-            !isRemoteAssetDragEvent(event)) ||
-            !isDragEventInsideCanvas(event)) {
+        if (!(0, drop_handler_data_1.isSupportedDropEvent)(event) || !isDragEventInsideCanvas(event)) {
             return;
         }
         if (!canDropAssets && !cannotAddSequence) {
@@ -806,16 +708,7 @@ const Canvas = ({ canvasContent, size }) => {
         }
     }, [canDropAssets, cannotAddSequence]);
     const onDrop = (0, react_1.useCallback)(async (event) => {
-        var _a;
-        var _b;
-        if ((!isFileDragEvent(event) &&
-            !isAssetDragEvent(event) &&
-            !isCompositionDragEvent(event) &&
-            !isComponentDragEvent(event) &&
-            !isElementDragEvent(event) &&
-            !isSfxDragEvent(event) &&
-            !isRemoteAssetDragEvent(event)) ||
-            !isDragEventInsideCanvas(event)) {
+        if (!(0, drop_handler_data_1.isSupportedDropEvent)(event) || !isDragEventInsideCanvas(event)) {
             return;
         }
         if (cannotAddSequence) {
@@ -826,7 +719,8 @@ const Canvas = ({ canvasContent, size }) => {
         }
         if (!canDropAssets ||
             compositionFile === null ||
-            currentCompositionId === null) {
+            currentCompositionId === null ||
+            config === null) {
             return;
         }
         if (event.dataTransfer &&
@@ -846,96 +740,16 @@ const Canvas = ({ canvasContent, size }) => {
                 previewSize,
                 size,
             });
-            if (isFileDragEvent(event)) {
-                const files = Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) !== null && _b !== void 0 ? _b : []);
-                if (files.length === 0) {
-                    return;
-                }
-                const svgImportMode = (0, import_assets_1.hasSvgFile)(files)
-                    ? await chooseSvgImportMode()
-                    : 'image';
-                if (svgImportMode === null) {
-                    return;
-                }
-                await (0, import_assets_1.importAssets)({
-                    files,
-                    compositionFile,
-                    compositionId: currentCompositionId,
-                    destinationDimensions: contentDimensions === 'none' ? null : contentDimensions,
-                    dropPosition,
-                    svgImportMode,
-                });
-            }
-            else if (isAssetDragEvent(event)) {
-                const assetPath = getAssetDragPath(event);
-                if (assetPath === null) {
-                    return;
-                }
-                await (0, import_assets_1.insertExistingAssets)({
-                    assetPaths: [assetPath],
-                    compositionFile,
-                    compositionId: currentCompositionId,
-                    destinationDimensions: contentDimensions === 'none' ? null : contentDimensions,
-                    dropPosition,
-                });
-            }
-            else if (isSfxDragEvent(event)) {
-                const url = getSfxDragUrl(event);
-                if (url === null) {
-                    return;
-                }
-                await (0, import_assets_1.insertRemoteAudio)({
-                    url,
-                    compositionFile,
-                    compositionId: currentCompositionId,
-                });
-            }
-            else if (isCompositionDragEvent(event)) {
-                const compositionDragData = getCompositionDragData(event);
-                if (compositionDragData === null) {
-                    return;
-                }
-                await (0, import_assets_1.insertComposition)({
-                    composition: compositionDragData,
-                    compositionFile,
-                    compositionId: currentCompositionId,
-                    destinationDimensions: contentDimensions === 'none' ? null : contentDimensions,
-                    dropPosition,
-                });
-            }
-            else {
-                const elementDragData = (0, element_drag_and_drop_1.getElementDragData)(event.dataTransfer);
-                if (elementDragData !== null) {
-                    await (0, import_assets_1.insertElement)({
-                        element: elementDragData.element,
-                        compositionFile,
-                        compositionId: currentCompositionId,
-                        dropPosition,
-                    });
-                    return;
-                }
-                const componentDragData = getComponentDragData(event);
-                if (componentDragData !== null) {
-                    await (0, import_assets_1.insertComponent)({
-                        component: componentDragData.component,
-                        compositionFile,
-                        compositionId: currentCompositionId,
-                        dropPosition,
-                    });
-                    return;
-                }
-                const url = (0, remote_asset_drag_1.getRemoteAssetUrlFromDataTransfer)(event.dataTransfer);
-                if (url === null) {
-                    return;
-                }
-                await (0, import_assets_1.importRemoteAsset)({
-                    url,
-                    compositionFile,
-                    compositionId: currentCompositionId,
-                    destinationDimensions: contentDimensions === 'none' ? null : contentDimensions,
-                    dropPosition,
-                });
-            }
+            await (0, handle_drop_1.handleDrop)({
+                chooseSvgImportMode,
+                compositionFile,
+                compositionId: currentCompositionId,
+                destinationDimensions: contentDimensions === 'none' ? null : contentDimensions,
+                dropPosition,
+                event,
+                fps: config.fps,
+                from: null,
+            });
         }
         finally {
             setIsAddingAsset(false);
@@ -946,6 +760,7 @@ const Canvas = ({ canvasContent, size }) => {
         cannotAddSequence,
         chooseSvgImportMode,
         compositionFile,
+        config,
         contentDimensions,
         currentCompositionId,
         previewSize,
@@ -956,6 +771,7 @@ const Canvas = ({ canvasContent, size }) => {
         if (!canDropAssets ||
             compositionFile === null ||
             currentCompositionId === null ||
+            config === null ||
             event.clipboardData === null ||
             activeElement instanceof HTMLInputElement ||
             activeElement instanceof HTMLTextAreaElement ||
@@ -1023,10 +839,12 @@ const Canvas = ({ canvasContent, size }) => {
         try {
             await (0, import_assets_1.importAssets)({
                 files,
+                fps: config.fps,
                 compositionFile,
                 compositionId: currentCompositionId,
                 destinationDimensions: contentDimensions === 'none' ? null : contentDimensions,
                 dropPosition,
+                from: null,
                 svgImportMode,
             });
         }
@@ -1037,6 +855,7 @@ const Canvas = ({ canvasContent, size }) => {
         canDropAssets,
         chooseSvgImportMode,
         compositionFile,
+        config,
         contentDimensions,
         currentCompositionId,
     ]);

package/dist/components/CompositionSelectorItem.js

@@ -18,7 +18,6 @@ const ContextMenu_1 = require("./ContextMenu");
 const folder_menu_items_1 = require("./folder-menu-items");
 const layout_1 = require("./layout");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
-const open_in_new_window_1 = require("./open-in-new-window");
 const actions_1 = require("./RenderQueue/actions");
 const SidebarRenderButton_1 = require("./SidebarRenderButton");
 const use_resolved_stack_1 = require("./Timeline/use-resolved-stack");
@@ -123,22 +122,15 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
     const resolvedLocation = (0, use_resolved_stack_1.useResolvedStack)(item.type === 'composition' ? item.composition.stack : item.folder.stack);
     const contextMenu = (0, react_1.useMemo)(() => {
         if (item.type === 'composition') {
-            const compositionMenuItems = (0, composition_menu_items_1.getCompositionMenuItems)({
+            return (0, composition_menu_items_1.getCompositionContextMenuItems)({
                 closeMenu: noop_1.noop,
                 composition: item.composition,
                 connectionStatus,
+                includeCompositionManagementItems: true,
                 resolvedLocation,
                 setSelectedModal,
                 readOnlyStudio: window.remotion_isReadOnlyStudio,
             });
-            return [
-                (0, open_in_new_window_1.getOpenInNewWindowMenuItem)(`/${item.composition.id}`),
-                {
-                    type: 'divider',
-                    id: 'open-in-new-window-divider',
-                },
-                ...compositionMenuItems,
-            ];
         }
         return (0, folder_menu_items_1.getFolderMenuItems)({
             closeMenu: noop_1.noop,

package/dist/components/InspectorPanel/AlignmentControls.js

@@ -136,6 +136,8 @@ const AlignmentControls = ({ track }) => {
         const label = undoLabels[direction];
         if (!propStatus || propStatus.status === 'static') {
             (0, save_sequence_prop_1.saveSequenceProps)({
+                addedKeyframes: null,
+                movedKeyframes: null,
                 changes: [
                     {
                         fileName: nodePath.absolutePath,

package/dist/components/InspectorPanel/ConnectedCompositionsSection.js

@@ -4,9 +4,15 @@ exports.ConnectedCompositionsSection = exports.useConnectedCompositions = void 0
 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 get_connected_compositions_1 = require("../../helpers/get-connected-compositions");
+const noop_1 = require("../../helpers/noop");
+const modals_1 = require("../../state/modals");
+const composition_menu_items_1 = require("../composition-menu-items");
 const CompositionOrStillIcon_1 = require("../CompositionOrStillIcon");
+const ContextMenu_1 = require("../ContextMenu");
 const InitialCompositionLoader_1 = require("../InitialCompositionLoader");
+const use_resolved_stack_1 = require("../Timeline/use-resolved-stack");
 const common_1 = require("./common");
 const compositionIconStyle = {
     height: 18,
@@ -17,6 +23,9 @@ const compositionListStyle = {
     flexDirection: 'column',
     padding: '6px 0',
 };
+const compositionContextMenuStyle = {
+    width: '100%',
+};
 const useConnectedCompositions = ({ track, }) => {
     const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     return (0, react_1.useMemo)(() => (0, get_connected_compositions_1.getConnectedCompositions)({
@@ -26,7 +35,23 @@ const useConnectedCompositions = ({ track, }) => {
 };
 exports.useConnectedCompositions = useConnectedCompositions;
 const ConnectedCompositionsSection = ({ connectedCompositions }) => {
-    const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
-    return (jsx_runtime_1.jsx("div", { style: compositionListStyle, children: connectedCompositions.map((composition) => (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: false, onClick: () => selectComposition(composition, true), renderIcon: (color) => (jsx_runtime_1.jsx(CompositionOrStillIcon_1.CompositionOrStillIcon, { color: color, composition: composition, style: compositionIconStyle })), children: composition.id }, composition.id))) }));
+    return (jsx_runtime_1.jsx("div", { style: compositionListStyle, children: connectedCompositions.map((composition) => (jsx_runtime_1.jsx(ConnectedCompositionRow, { composition: composition }, composition.id))) }));
 };
 exports.ConnectedCompositionsSection = ConnectedCompositionsSection;
+const ConnectedCompositionRow = ({ composition }) => {
+    const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
+        .previewServerState.type;
+    const resolvedLocation = (0, use_resolved_stack_1.useResolvedStack)(composition.stack);
+    const contextMenuItems = (0, react_1.useMemo)(() => (0, composition_menu_items_1.getCompositionContextMenuItems)({
+        closeMenu: noop_1.noop,
+        composition,
+        connectionStatus,
+        includeCompositionManagementItems: false,
+        readOnlyStudio: window.remotion_isReadOnlyStudio,
+        resolvedLocation,
+        setSelectedModal,
+    }), [composition, connectionStatus, resolvedLocation, setSelectedModal]);
+    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuItems, onOpen: null, style: compositionContextMenuStyle, children: jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: false, onClick: () => selectComposition(composition, true), renderIcon: (color) => (jsx_runtime_1.jsx(CompositionOrStillIcon_1.CompositionOrStillIcon, { color: color, composition: composition, style: compositionIconStyle })), children: composition.id }) }));
+};

package/dist/components/InspectorPanel/SequenceSelectionInspector.js

@@ -5,21 +5,35 @@ 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 interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
+const duplicate_1 = require("../../icons/duplicate");
 const scissors_1 = require("../../icons/scissors");
+const snowflake_1 = require("../../icons/snowflake");
+const trash_1 = require("../../icons/trash");
+const ConfirmationDialog_1 = require("../ConfirmationDialog");
 const InspectorSequenceSection_1 = require("../InspectorSequenceSection");
 const is_menu_item_1 = require("../Menu/is-menu-item");
+const delete_selected_timeline_item_1 = require("../Timeline/delete-selected-timeline-item");
+const duplicate_selected_timeline_item_1 = require("../Timeline/duplicate-selected-timeline-item");
 const split_selected_timeline_item_1 = require("../Timeline/split-selected-timeline-item");
 const TimelineSelection_1 = require("../Timeline/TimelineSelection");
+const use_sequence_freeze_frame_menu_item_1 = require("../Timeline/use-sequence-freeze-frame-menu-item");
 const AlignmentControls_1 = require("./AlignmentControls");
 const common_1 = require("./common");
 const ConnectedCompositionsSection_1 = require("./ConnectedCompositionsSection");
 const SequenceInspectorHeader_1 = require("./SequenceInspectorHeader");
 const styles_1 = require("./styles");
 const use_track_for_selection_1 = require("./use-track-for-selection");
-const splitIconStyle = {
+const actionIconStyle = {
+    display: 'block',
     height: 16,
     width: 16,
 };
+const largeActionIconStyle = {
+    ...actionIconStyle,
+    height: 20,
+    width: 20,
+};
 const SplitSequenceAction = ({ selection, track }) => {
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
@@ -30,19 +44,60 @@ const SplitSequenceAction = ({ selection, track }) => {
         splitFrame: timelinePosition,
         propStatuses: sequencePropStatuses,
     }), [selection, sequencePropStatuses, timelinePosition, track.sequence]);
+    const canSplit = interactivity_enabled_1.studioInteractivityEnabled &&
+        sequencePropStatuses !== undefined &&
+        eligibility.canSplit;
     const onSplit = (0, react_1.useCallback)(() => {
-        if (!eligibility.canSplit) {
+        if (!canSplit || !eligibility.canSplit) {
             return;
         }
         (0, split_selected_timeline_item_1.splitTimelineSequenceFromSource)({
             nodePathInfo: eligibility.nodePathInfo,
             splitFrame: timelinePosition,
         }).catch(() => undefined);
-    }, [eligibility, timelinePosition]);
-    if (!eligibility.canSplit) {
-        return null;
-    }
-    return (jsx_runtime_1.jsx(common_1.InspectorActionSection, { children: jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: false, onClick: onSplit, renderIcon: (color) => (jsx_runtime_1.jsx(scissors_1.ScissorsIcon, { style: splitIconStyle, color: color })), children: "Split clip" }) }));
+    }, [canSplit, eligibility, timelinePosition]);
+    const disabledReason = !interactivity_enabled_1.studioInteractivityEnabled
+        ? 'Studio is read-only'
+        : sequencePropStatuses === undefined
+            ? 'Waiting for sequence prop status'
+            : eligibility.canSplit
+                ? undefined
+                : eligibility.reason;
+    return (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: !canSplit, onClick: onSplit, title: disabledReason, renderIcon: (color) => (jsx_runtime_1.jsx(scissors_1.ScissorsIcon, { style: actionIconStyle, color: color })), children: "Split clip" }));
+};
+const SequenceSourceActions = ({ selection, track, validatedSource }) => {
+    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
+    const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
+    const propStatusesForOverride = (0, react_1.useMemo)(() => remotion_1.Internals.getPropStatusesCtx(propStatuses, selection.nodePathInfo.sequenceSubscriptionKey), [propStatuses, selection.nodePathInfo.sequenceSubscriptionKey]);
+    const freezeFrameMenuItem = (0, use_sequence_freeze_frame_menu_item_1.useSequenceFreezeFrameMenuItem)({
+        clientId: previewServerState.type === 'connected' && interactivity_enabled_1.studioInteractivityEnabled
+            ? previewServerState.clientId
+            : null,
+        nodePath: selection.nodePathInfo.sequenceSubscriptionKey,
+        propStatusesForOverride,
+        sequence: track.sequence,
+        sequenceFrameOffset: track.sequenceFrameOffset,
+        setPropStatuses,
+        timelinePosition,
+        validatedSource,
+    });
+    const sourceActionsDisabled = previewServerState.type !== 'connected' || !interactivity_enabled_1.studioInteractivityEnabled;
+    const onDuplicate = (0, react_1.useCallback)(() => {
+        if (sourceActionsDisabled) {
+            return;
+        }
+        (0, duplicate_selected_timeline_item_1.duplicateSequencesFromSource)([selection.nodePathInfo], confirm).catch(() => undefined);
+    }, [confirm, selection.nodePathInfo, sourceActionsDisabled]);
+    const onDelete = (0, react_1.useCallback)(() => {
+        if (sourceActionsDisabled) {
+            return;
+        }
+        (0, delete_selected_timeline_item_1.deleteSequencesFromSource)([selection.nodePathInfo], confirm).catch(() => undefined);
+    }, [confirm, selection.nodePathInfo, sourceActionsDisabled]);
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [(freezeFrameMenuItem === null || freezeFrameMenuItem === void 0 ? void 0 : freezeFrameMenuItem.type) === 'item' ? (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: Boolean(freezeFrameMenuItem.disabled), onClick: () => freezeFrameMenuItem.onClick(freezeFrameMenuItem.id, null), renderIcon: (color) => (jsx_runtime_1.jsx(snowflake_1.SnowflakeIcon, { style: largeActionIconStyle, color: color })), children: freezeFrameMenuItem.label })) : null, jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: sourceActionsDisabled, onClick: onDuplicate, renderIcon: (color) => (jsx_runtime_1.jsx(duplicate_1.DuplicateIcon, { style: largeActionIconStyle, color: color })), children: "Duplicate" }), jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: sourceActionsDisabled, onClick: onDelete, renderIcon: (color) => (jsx_runtime_1.jsx(trash_1.TrashIcon, { style: actionIconStyle, color: color })), children: "Delete" })] }));
 };
 const SequenceExpandedInspector = ({ track }) => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
@@ -88,7 +143,9 @@ const SequenceExpandedInspector = ({ track }) => {
     return (jsx_runtime_1.jsxs("div", { style: styles_1.selectedContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, onPointerDown: selectSequenceOnInspectorPointerDown, children: [
             jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorHeader, { sourceLocation: sourceLocation, track: track }), connectedCompositions.length > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsx(ConnectedCompositionsSection_1.ConnectedCompositionsSection, { connectedCompositions: connectedCompositions })
-                ] })) : null, jsx_runtime_1.jsx(InspectorSequenceSection_1.InspectorSequenceSection, { sequence: track.sequence, validatedLocation: validatedLocation, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, renderTransformControls: () => jsx_runtime_1.jsx(AlignmentControls_1.AlignmentControls, { track: track }) }), jsx_runtime_1.jsx(SplitSequenceAction, { selection: sequenceSelection, track: track })
+                ] })) : null, jsx_runtime_1.jsx(InspectorSequenceSection_1.InspectorSequenceSection, { sequence: track.sequence, validatedLocation: validatedLocation, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, renderTransformControls: () => jsx_runtime_1.jsx(AlignmentControls_1.AlignmentControls, { track: track }) }), jsx_runtime_1.jsxs(common_1.InspectorActionSection, { children: [
+                    jsx_runtime_1.jsx(SplitSequenceAction, { selection: sequenceSelection, track: track }), jsx_runtime_1.jsx(SequenceSourceActions, { selection: sequenceSelection, track: track, validatedSource: validatedLocation.source })
+                ] })
         ] }));
 };
 const SequenceSelectionInspector = ({ selection }) => {

package/dist/components/InspectorPanel/use-composition-actions.js

@@ -57,6 +57,7 @@ const useCompositionActions = () => {
             const result = await (0, call_api_1.callApi)('/api/insert-jsx-element', {
                 compositionFile,
                 compositionId: currentCompositionId,
+                from: null,
                 element: {
                     type: 'solid',
                     width: videoConfig.width,
@@ -80,7 +81,8 @@ const useCompositionActions = () => {
     const insertAsset = (0, react_1.useCallback)(async () => {
         if (!canInsertAsset ||
             currentCompositionId === null ||
-            compositionFile === null) {
+            compositionFile === null ||
+            videoConfig === null) {
             return;
         }
         const files = await (0, import_assets_1.pickFilesToImport)();
@@ -91,17 +93,19 @@ const useCompositionActions = () => {
         try {
             await (0, import_assets_1.importAssets)({
                 files,
+                fps: videoConfig.fps,
                 compositionFile,
                 compositionId: currentCompositionId,
                 destinationDimensions: null,
                 dropPosition: null,
+                from: null,
                 svgImportMode: 'image',
             });
         }
         finally {
             setIsAddingAsset(false);
         }
-    }, [canInsertAsset, compositionFile, currentCompositionId]);
+    }, [canInsertAsset, compositionFile, currentCompositionId, videoConfig]);
     return {
         canInsertAsset,
         canInsertSolid,

package/dist/components/NewComposition/CodemodFooter.d.ts

@@ -8,7 +8,7 @@ export declare const CodemodFooter: React.FC<{
     readonly valid: boolean;
     readonly codemod: RecastCodemod;
     readonly stack: string | null;
-    readonly loadingNotification: React.ReactNode;
+    readonly loadingNotification: React.ReactNode | null;
     readonly successNotification: React.ReactNode;
     readonly errorNotification: string;
     readonly genericSubmitLabel: string;

package/dist/components/NewComposition/CodemodFooter.js

@@ -34,21 +34,40 @@ const CodemodFooter = ({ codemod, stack, valid, loadingNotification, successNoti
     const trigger = (0, react_1.useCallback)(() => {
         setSubmitting(true);
         setSelectedModal(null);
-        const notification = (0, NotificationCenter_1.showNotification)(loadingNotification, null);
+        const notification = loadingNotification === null
+            ? null
+            : (0, NotificationCenter_1.showNotification)(loadingNotification, null);
         applyCodemod({
             symbolicatedStack,
             signal: new AbortController().signal,
         })
             .then((result) => {
             if (!result.success) {
-                notification.replaceContent(`${errorNotification}: ${result.reason}`, 2000);
+                const message = `${errorNotification}: ${result.reason}`;
+                if (notification) {
+                    notification.replaceContent(message, 2000);
+                }
+                else {
+                    (0, NotificationCenter_1.showNotification)(message, 2000);
+                }
                 return;
             }
-            notification.replaceContent(successNotification, 2000);
+            if (notification) {
+                notification.replaceContent(successNotification, 2000);
+            }
+            else {
+                (0, NotificationCenter_1.showNotification)(successNotification, 2000);
+            }
             onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess();
         })
             .catch((err) => {
-            notification.replaceContent(`${errorNotification}: ${err.message}`, 2000);
+            const message = `${errorNotification}: ${err.message}`;
+            if (notification) {
+                notification.replaceContent(message, 2000);
+            }
+            else {
+                (0, NotificationCenter_1.showNotification)(message, 2000);
+            }
         });
     }, [
         applyCodemod,