@remotion/studio 4.0.498 → 4.0.500

package/dist/components/Timeline/use-sequence-freeze-frame-menu-item.d.ts

@@ -2,6 +2,10 @@ import type { CanUpdateSequencePropStatus, SequencePropsSubscriptionKey, TSequen
 import type { ComboboxValue } from '../NewComposition/ComboBox';
 import { type SetPropStatuses } from './save-sequence-prop';
 export declare const shouldShowFreezeFrameMenuItem: (sequence: TSequence) => boolean;
+export declare const isSequenceVisibleAtTimelinePosition: ({ sequence, timelinePosition, }: {
+    readonly sequence: TSequence;
+    readonly timelinePosition: number;
+}) => boolean;
 export declare const calculateSequenceFreezeFrame: ({ sequence, sequenceFrameOffset, timelinePosition, }: {
     readonly sequence: TSequence;
     readonly sequenceFrameOffset: number;

package/dist/components/Timeline/use-sequence-freeze-frame-menu-item.js

@@ -1,12 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSequenceFreezeFrameMenuItem = exports.calculateSequenceFreezeFrame = exports.shouldShowFreezeFrameMenuItem = void 0;
+exports.useSequenceFreezeFrameMenuItem = exports.calculateSequenceFreezeFrame = exports.isSequenceVisibleAtTimelinePosition = exports.shouldShowFreezeFrameMenuItem = void 0;
 const react_1 = require("react");
 const save_sequence_prop_1 = require("./save-sequence-prop");
 const shouldShowFreezeFrameMenuItem = (sequence) => {
     return sequence.type !== 'audio';
 };
 exports.shouldShowFreezeFrameMenuItem = shouldShowFreezeFrameMenuItem;
+const isSequenceVisibleAtTimelinePosition = ({ sequence, timelinePosition, }) => {
+    return (timelinePosition >= sequence.from &&
+        timelinePosition < sequence.from + sequence.duration);
+};
+exports.isSequenceVisibleAtTimelinePosition = isSequenceVisibleAtTimelinePosition;
 const calculateSequenceFreezeFrame = ({ sequence, sequenceFrameOffset, timelinePosition, }) => {
     const rawFreezeFrame = Math.round(timelinePosition - sequence.from + sequenceFrameOffset);
     const minFrame = sequenceFrameOffset;
@@ -20,7 +25,8 @@ const useSequenceFreezeFrameMenuItem = ({ clientId, nodePath, propStatusesForOve
     const freezeStatus = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.freeze;
     const isFrozen = (freezeStatus === null || freezeStatus === void 0 ? void 0 : freezeStatus.status) === 'static' &&
         typeof freezeStatus.codeValue === 'number';
-    const canToggleFreeze = clientId !== null &&
+    const canToggleFreeze = (0, exports.isSequenceVisibleAtTimelinePosition)({ sequence, timelinePosition }) &&
+        clientId !== null &&
         Boolean(sequence.controls) &&
         nodePath !== null &&
         validatedSource !== null &&
@@ -49,7 +55,7 @@ const useSequenceFreezeFrameMenuItem = ({ clientId, nodePath, propStatusesForOve
                     fileName: validatedSource,
                     nodePath,
                     fieldKey: 'freeze',
-                    value: remove ? null : freezeFrame,
+                    value: remove ? undefined : freezeFrame,
                     defaultValue: null,
                     schema: sequence.controls.schema,
                 },

package/dist/components/Timeline/use-timeline-height.d.ts

@@ -1,5 +1,5 @@
-import type { TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
+import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
 export declare const useTimelineHeight: ({ shown, hasBeenCut, }: {
-    shown: TrackWithHash[];
+    shown: TimelineTrackData[];
     hasBeenCut: boolean;
 }) => number;

package/dist/components/Timeline/use-timeline-keyframe-drag.js

@@ -366,10 +366,12 @@ const useTimelineKeyframeDrag = ({ frame, nodePathInfo, onSelect, selectable, se
                 clearDraggedKeyframes();
                 return;
             }
-            setDraggedKeyframes(targets.map((target) => ({
-                nodePathInfo: target.nodePathInfo,
-                frame: target.displayFrame + delta,
-            })));
+            setDraggedKeyframes(shouldDragExistingSelection
+                ? targets.map((target) => ({
+                    nodePathInfo: target.nodePathInfo,
+                    frame: target.displayFrame + delta,
+                }))
+                : []);
             applyDragOverrides({
                 delta,
                 setDragOverrides,

package/dist/components/TopPanel.js

@@ -68,6 +68,7 @@ const row = {
     flex: 1,
     minHeight: 0,
 };
+const MAX_SIDEBAR_WIDTH = 350;
 const useResponsiveSidebarStatus = () => {
     const { sidebarCollapsedStateLeft } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     const responsiveLeftStatus = (0, use_breakpoint_1.useBreakpoint)(1200) ? 'collapsed' : 'expanded';
@@ -113,8 +114,8 @@ const TopPanelInner = ({ readOnlyStudio, onMounted, drawRef, bufferStateDelayInM
     return (jsx_runtime_1.jsx(ObserveDefaultPropsContext_1.ObserveDefaultProps, { compositionId: (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition'
             ? canvasContent.compositionId
             : null, readOnlyStudio: readOnlyStudio, children: jsx_runtime_1.jsxs("div", { style: container, children: [
-                jsx_runtime_1.jsx("div", { style: row, children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { minFlex: 0.15, maxFlex: 0.4, defaultFlex: 0.2, id: "sidebar-to-preview", orientation: "vertical", children: [actualStateLeft === 'expanded' ? (isMobileLayout ? (jsx_runtime_1.jsx(MobilePanel_1.default, { onClose: onCollapseLeft, children: jsx_runtime_1.jsx(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) })) : (jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: jsx_runtime_1.jsx(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) }))) : null, actualStateLeft === 'expanded' ? (jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "left", onCollapse: onCollapseLeft })) : null, jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { minFlex: 0.5, maxFlex: 0.8, defaultFlex: 0.7, id: "canvas-to-right-sidebar", orientation: "vertical", children: [
-                                        jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: jsx_runtime_1.jsx("div", { ref: drawRef, style: canvasContainerStyle, children: jsx_runtime_1.jsx(CanvasIfSizeIsAvailable_1.CanvasIfSizeIsAvailable, {}) }) }), actualStateRight === 'expanded' ? (jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "right", onCollapse: onCollapseRight })) : null, actualStateRight === 'expanded' ? (isMobileLayout ? (jsx_runtime_1.jsx(MobilePanel_1.default, { onClose: onCollapseRight, children: jsx_runtime_1.jsx(OptionsPanel_1.OptionsPanel, { readOnlyStudio: readOnlyStudio }) })) : (jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: jsx_runtime_1.jsx(OptionsPanel_1.OptionsPanel, { readOnlyStudio: readOnlyStudio }) }))) : null] }) })
+                jsx_runtime_1.jsx("div", { style: row, children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { minFlex: 0.15, maxFlex: 0.4, defaultFlex: 0.2, maxFlexerSize: MAX_SIDEBAR_WIDTH, maxAntiFlexerSize: null, id: "sidebar-to-preview", orientation: "vertical", children: [actualStateLeft === 'expanded' ? (isMobileLayout ? (jsx_runtime_1.jsx(MobilePanel_1.default, { onClose: onCollapseLeft, side: "left", children: jsx_runtime_1.jsx(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) })) : (jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: jsx_runtime_1.jsx(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) }))) : null, actualStateLeft === 'expanded' && !isMobileLayout ? (jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "left", onCollapse: onCollapseLeft })) : null, jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { minFlex: 0.5, maxFlex: 0.8, defaultFlex: 0.7, maxFlexerSize: null, maxAntiFlexerSize: MAX_SIDEBAR_WIDTH, id: "canvas-to-right-sidebar", orientation: "vertical", children: [
+                                        jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: jsx_runtime_1.jsx("div", { ref: drawRef, style: canvasContainerStyle, children: jsx_runtime_1.jsx(CanvasIfSizeIsAvailable_1.CanvasIfSizeIsAvailable, {}) }) }), actualStateRight === 'expanded' && !isMobileLayout ? (jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "right", onCollapse: onCollapseRight })) : null, actualStateRight === 'expanded' ? (isMobileLayout ? (jsx_runtime_1.jsx(MobilePanel_1.default, { onClose: onCollapseRight, side: "right", children: jsx_runtime_1.jsx(OptionsPanel_1.OptionsPanel, { readOnlyStudio: readOnlyStudio }) })) : (jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: jsx_runtime_1.jsx(OptionsPanel_1.OptionsPanel, { readOnlyStudio: readOnlyStudio }) }))) : null] }) })
                         ] }) }), jsx_runtime_1.jsx(PreviewToolbar_1.PreviewToolbar, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(CurrentCompositionSideEffects_1.TitleUpdater, {})
             ] }) }));
 };

package/dist/components/UndoRedoButtons.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const ShortcutHint_1 = require("../error-overlay/remotion-overlay/ShortcutHint");
 const client_id_1 = require("../helpers/client-id");
+const is_mac_1 = require("../helpers/is-mac");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const redo_1 = require("../icons/redo");
 const undo_1 = require("../icons/undo");
@@ -74,11 +75,14 @@ const UndoRedoButtons = () => {
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
         });
-        const redo = keybindings.registerKeybinding({
+        const redoWithShiftZ = keybindings.registerKeybinding({
             event: 'keydown',
-            key: 'y',
+            key: 'z',
             commandCtrlKey: true,
-            callback: () => {
+            callback: (e) => {
+                if (!e.shiftKey) {
+                    return;
+                }
                 if (redoFile) {
                     onRedo();
                 }
@@ -87,9 +91,25 @@ const UndoRedoButtons = () => {
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
         });
+        const redoWithY = is_mac_1.isMac
+            ? null
+            : keybindings.registerKeybinding({
+                event: 'keydown',
+                key: 'y',
+                commandCtrlKey: true,
+                callback: () => {
+                    if (redoFile) {
+                        onRedo();
+                    }
+                },
+                preventDefault: true,
+                triggerIfInputFieldFocused: false,
+                keepRegisteredWhenNotHighestContext: false,
+            });
         return () => {
             undo.unregister();
-            redo.unregister();
+            redoWithShiftZ.unregister();
+            redoWithY === null || redoWithY === void 0 ? void 0 : redoWithY.unregister();
         };
     }, [keybindings, onRedo, onUndo, redoFile, undoFile]);
     const undoTooltip = (0, use_keybinding_1.areKeyboardShortcutsDisabled)()
@@ -97,7 +117,9 @@ const UndoRedoButtons = () => {
         : `Undo (${ShortcutHint_1.cmdOrCtrlCharacter}+Z)`;
     const redoTooltip = (0, use_keybinding_1.areKeyboardShortcutsDisabled)()
         ? 'Redo'
-        : `Redo (${ShortcutHint_1.cmdOrCtrlCharacter}+Y)`;
+        : is_mac_1.isMac
+            ? `Redo (${ShortcutHint_1.cmdOrCtrlCharacter}+Shift+Z)`
+            : `Redo (${ShortcutHint_1.cmdOrCtrlCharacter}+Y)`;
     const renderUndo = (0, react_1.useCallback)((color) => {
         return (jsx_runtime_1.jsx(undo_1.UndoIcon, { style: { ...iconStyle, color, opacity: undoFile ? 1 : 0.5 } }));
     }, [undoFile]);

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

@@ -0,0 +1,33 @@
+import type { PreviewSize } from 'remotion';
+import { type InsertElementDropPosition } from './import-assets';
+type Dimensions = {
+    readonly width: number;
+    readonly height: number;
+};
+type CanvasSize = {
+    readonly width: number;
+    readonly height: number;
+};
+export type CompositionDropPreview = {
+    readonly compositionDimensions: Dimensions;
+    readonly dropPosition: InsertElementDropPosition;
+};
+export type CompositionDropPreviewBox = {
+    readonly left: number;
+    readonly top: number;
+    readonly width: number;
+    readonly height: number;
+};
+export declare const snapCompositionDropPosition: ({ compositionDimensions, destinationDimensions, dropPosition, scale, }: {
+    readonly compositionDimensions: Dimensions;
+    readonly destinationDimensions: Dimensions;
+    readonly dropPosition: InsertElementDropPosition;
+    readonly scale: number;
+}) => InsertElementDropPosition;
+export declare const getCompositionDropPreviewBox: ({ canvasSize, destinationDimensions, preview, previewSize, }: {
+    readonly canvasSize: CanvasSize;
+    readonly destinationDimensions: Dimensions;
+    readonly preview: CompositionDropPreview;
+    readonly previewSize: PreviewSize;
+}) => CompositionDropPreviewBox;
+export {};

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

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCompositionDropPreviewBox = exports.snapCompositionDropPosition = void 0;
+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, }) => {
+    var _a, _b;
+    const left = dropPosition.centerX - compositionDimensions.width / 2;
+    const top = dropPosition.centerY - compositionDimensions.height / 2;
+    const right = left + compositionDimensions.width;
+    const bottom = top + compositionDimensions.height;
+    const outline = {
+        key: 'composition-drop-preview',
+        dimensions: compositionDimensions,
+        uncroppedPoints: null,
+        points: [
+            { x: left * scale, y: top * scale },
+            { x: right * scale, y: top * scale },
+            { x: right * scale, y: bottom * scale },
+            { x: left * scale, y: bottom * scale },
+        ],
+    };
+    const snap = (0, selected_outline_snap_1.findSelectedOutlineSnap)({
+        allowX: true,
+        allowY: true,
+        deltaX: 0,
+        deltaY: 0,
+        outlines: [outline],
+        scale,
+        targets: (0, selected_outline_snap_1.getSelectedOutlineSnapTargets)({
+            compositionHeight: destinationDimensions.height,
+            compositionWidth: destinationDimensions.width,
+            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),
+    };
+};
+exports.snapCompositionDropPosition = snapCompositionDropPosition;
+const getCompositionDropPreviewBox = ({ canvasSize, destinationDimensions, preview, previewSize, }) => {
+    var _a, _b;
+    const scale = (0, studio_fit_padding_1.calculateStudioScale)({
+        canvasSize,
+        compositionHeight: destinationDimensions.height,
+        compositionWidth: destinationDimensions.width,
+        previewSize: previewSize.size,
+    });
+    const position = (0, import_assets_1.getCompositionPositionForDrop)({
+        compositionDimensions: preview.compositionDimensions,
+        dropPosition: preview.dropPosition,
+    });
+    const contentLeft = canvasSize.width / 2 -
+        (destinationDimensions.width * scale) / 2 -
+        previewSize.translation.x;
+    const contentTop = canvasSize.height / 2 -
+        (destinationDimensions.height * scale) / 2 -
+        previewSize.translation.y;
+    return {
+        left: contentLeft + ((_a = position === null || position === void 0 ? void 0 : position.x) !== null && _a !== void 0 ? _a : 0) * scale,
+        top: contentTop + ((_b = position === null || position === void 0 ? void 0 : position.y) !== null && _b !== void 0 ? _b : 0) * scale,
+        width: preview.compositionDimensions.width * scale,
+        height: preview.compositionDimensions.height * scale,
+    };
+};
+exports.getCompositionDropPreviewBox = getCompositionDropPreviewBox;

package/dist/components/drop-handler-data.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentDragData, type CompositionDragData } from '@remotion/studio-shared';
+import { type ComponentDragData, type CompositionDragData } from '@remotion/drag-and-drop';
 export declare const isFileDragEvent: (event: DragEvent) => boolean;
 export declare const isAssetDragEvent: (event: DragEvent) => boolean;
 export declare const isComponentDragEvent: (event: DragEvent) => boolean;

package/dist/components/drop-handler-data.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getSfxDragUrl = exports.getComponentDragData = exports.getCompositionDragData = exports.getAssetDragPath = exports.isSupportedDropEvent = exports.isRemoteAssetDragEvent = exports.isSfxDragEvent = exports.isElementDragEvent = exports.isCompositionDragEvent = exports.isComponentDragEvent = exports.isAssetDragEvent = exports.isFileDragEvent = void 0;
-const studio_shared_1 = require("@remotion/studio-shared");
+const drag_and_drop_1 = require("@remotion/drag-and-drop");
 const remote_asset_drag_1 = require("../helpers/remote-asset-drag");
 const isFileDragEvent = (event) => {
     var _a;
@@ -9,34 +9,29 @@ const isFileDragEvent = (event) => {
     return Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []).includes('Files');
 };
 exports.isFileDragEvent = isFileDragEvent;
+const isRemotionDragEvent = (event, type) => {
+    var _a, _b;
+    var _c;
+    return (((_b = drag_and_drop_1.DragAndDropInternals.getDragPreviewMetadata((_c = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _c !== void 0 ? _c : [])) === null || _b === void 0 ? void 0 : _b.type) === type);
+};
 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);
+    return isRemotionDragEvent(event, 'asset');
 };
 exports.isAssetDragEvent = isAssetDragEvent;
 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);
+    return isRemotionDragEvent(event, 'component');
 };
 exports.isComponentDragEvent = isComponentDragEvent;
 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);
+    return isRemotionDragEvent(event, 'composition');
 };
 exports.isCompositionDragEvent = isCompositionDragEvent;
 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);
+    return isRemotionDragEvent(event, 'element');
 };
 exports.isElementDragEvent = isElementDragEvent;
 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);
+    return isRemotionDragEvent(event, 'sfx');
 };
 exports.isSfxDragEvent = isSfxDragEvent;
 const isRemoteAssetDragEvent = (event) => {
@@ -60,58 +55,30 @@ const isSupportedDropEvent = (event) => {
 };
 exports.isSupportedDropEvent = isSupportedDropEvent;
 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 parsed = event.dataTransfer
+        ? drag_and_drop_1.DragAndDropInternals.parseDragData(event.dataTransfer)
+        : null;
+    return (parsed === null || parsed === void 0 ? void 0 : parsed.type) === 'asset' ? parsed.data.assetPath : null;
 };
 exports.getAssetDragPath = getAssetDragPath;
 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 parsed = event.dataTransfer
+        ? drag_and_drop_1.DragAndDropInternals.parseDragData(event.dataTransfer)
+        : null;
+    return (parsed === null || parsed === void 0 ? void 0 : parsed.type) === 'composition' ? parsed.data : null;
 };
 exports.getCompositionDragData = getCompositionDragData;
 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 parsed = event.dataTransfer
+        ? drag_and_drop_1.DragAndDropInternals.parseDragData(event.dataTransfer)
+        : null;
+    return (parsed === null || parsed === void 0 ? void 0 : parsed.type) === 'component' ? parsed.data : null;
 };
 exports.getComponentDragData = getComponentDragData;
 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 parsed = event.dataTransfer
+        ? drag_and_drop_1.DragAndDropInternals.parseDragData(event.dataTransfer)
+        : null;
+    return (parsed === null || parsed === void 0 ? void 0 : parsed.type) === 'sfx' ? parsed.data.sfx.url : null;
 };
 exports.getSfxDragUrl = getSfxDragUrl;

package/dist/components/effect-drag-and-drop.d.ts

@@ -1,4 +1,4 @@
-import { type EffectDragData } from '@remotion/studio-shared';
+import { type EffectDragData } from '@remotion/drag-and-drop';
 import type { SequencePropsSubscriptionKey } from 'remotion';
 export declare const hasEffectDragType: (dataTransfer: DataTransfer) => boolean;
 export declare const hasExplicitEffectDragType: (dataTransfer: DataTransfer) => boolean;

package/dist/components/effect-drag-and-drop.js

@@ -1,72 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addEffectToSequence = exports.addEffectFromDragData = exports.getEffectDragData = exports.hasExplicitEffectDragType = exports.hasEffectDragType = void 0;
+const drag_and_drop_1 = require("@remotion/drag-and-drop");
 const studio_shared_1 = require("@remotion/studio-shared");
 const install_required_package_1 = require("../helpers/install-required-package");
 const call_api_1 = require("./call-api");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const hasEffectDragType = (dataTransfer) => {
-    const types = Array.from(dataTransfer.types);
-    const hasExplicitEffectType = types.includes(studio_shared_1.EFFECT_DRAG_MIME_TYPE);
-    if (!hasExplicitEffectType &&
-        (hasNonEffectRemotionDragType(dataTransfer) ||
-            hasNonRemotionImportableAssetDragType(dataTransfer))) {
-        return false;
-    }
-    return types.some((type) => type === studio_shared_1.EFFECT_DRAG_MIME_TYPE || isGenericDragType(type));
+    var _a;
+    return (((_a = drag_and_drop_1.DragAndDropInternals.getDragPreviewMetadata(dataTransfer.types)) === null || _a === void 0 ? void 0 : _a.type) ===
+        'effect');
 };
 exports.hasEffectDragType = hasEffectDragType;
 const hasExplicitEffectDragType = (dataTransfer) => {
-    return Array.from(dataTransfer.types).includes(studio_shared_1.EFFECT_DRAG_MIME_TYPE);
+    return (0, exports.hasEffectDragType)(dataTransfer);
 };
 exports.hasExplicitEffectDragType = hasExplicitEffectDragType;
-const isGenericDragType = (type) => {
-    return type === 'application/json' || type === 'text/plain';
-};
-const isNonEffectRemotionDragType = (mimeType) => {
-    switch (mimeType) {
-        case studio_shared_1.EFFECT_DRAG_MIME_TYPE:
-            return false;
-        case studio_shared_1.ASSET_DRAG_MIME_TYPE:
-        case studio_shared_1.COMPOSITION_DRAG_MIME_TYPE:
-        case studio_shared_1.COMPONENT_DRAG_MIME_TYPE:
-        case studio_shared_1.ELEMENT_DRAG_MIME_TYPE:
-        case studio_shared_1.SFX_DRAG_MIME_TYPE:
-            return true;
-        default:
-            mimeType;
-            throw new Error(`Unhandled Remotion drag MIME type: ${mimeType}`);
-    }
-};
-const hasNonEffectRemotionDragType = (dataTransfer) => {
-    return Array.from(dataTransfer.types).some((type) => {
-        if (!(0, studio_shared_1.isRemotionDragMimeType)(type)) {
-            return false;
-        }
-        return isNonEffectRemotionDragType(type);
-    });
-};
-const hasNonRemotionImportableAssetDragType = (dataTransfer) => {
-    return Array.from(dataTransfer.types).some((type) => {
-        return type === 'Files' || type === 'text/uri-list' || type === 'text/html';
-    });
-};
 const getEffectDragData = (dataTransfer) => {
-    for (const type of [
-        studio_shared_1.EFFECT_DRAG_MIME_TYPE,
-        'application/json',
-        'text/plain',
-    ]) {
-        const value = dataTransfer.getData(type);
-        if (!value) {
-            continue;
-        }
-        const parsed = (0, studio_shared_1.parseEffectDragData)(value);
-        if (parsed) {
-            return parsed;
-        }
-    }
-    return null;
+    const parsed = drag_and_drop_1.DragAndDropInternals.parseDragData(dataTransfer);
+    return (parsed === null || parsed === void 0 ? void 0 : parsed.type) === 'effect' ? parsed.data : null;
 };
 exports.getEffectDragData = getEffectDragData;
 const addEffectFromDragData = ({ clientId, dragData, fileName, nodePath, }) => {

package/dist/components/element-drag-and-drop.d.ts

@@ -1,3 +1,3 @@
-import { type ElementDragData } from '@remotion/studio-shared';
+import { type ElementDragData } from '@remotion/drag-and-drop';
 export declare const hasElementDragType: (dataTransfer: DataTransfer | null) => boolean;
 export declare const getElementDragData: (dataTransfer: DataTransfer | null) => ElementDragData | null;

package/dist/components/element-drag-and-drop.js

@@ -1,30 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getElementDragData = exports.hasElementDragType = void 0;
-const studio_shared_1 = require("@remotion/studio-shared");
+const drag_and_drop_1 = require("@remotion/drag-and-drop");
 const hasElementDragType = (dataTransfer) => {
     var _a;
-    return Array.from((_a = dataTransfer === null || dataTransfer === void 0 ? void 0 : dataTransfer.types) !== null && _a !== void 0 ? _a : []).includes(studio_shared_1.ELEMENT_DRAG_MIME_TYPE);
+    var _b;
+    return (((_a = drag_and_drop_1.DragAndDropInternals.getDragPreviewMetadata((_b = dataTransfer === null || dataTransfer === void 0 ? void 0 : dataTransfer.types) !== null && _b !== void 0 ? _b : [])) === null || _a === void 0 ? void 0 : _a.type) === 'element');
 };
 exports.hasElementDragType = hasElementDragType;
 const getElementDragData = (dataTransfer) => {
     if (!dataTransfer) {
         return null;
     }
-    for (const type of [
-        studio_shared_1.ELEMENT_DRAG_MIME_TYPE,
-        'application/json',
-        'text/plain',
-    ]) {
-        const raw = dataTransfer.getData(type);
-        if (!raw) {
-            continue;
-        }
-        const parsed = (0, studio_shared_1.parseElementDragData)(raw);
-        if (parsed) {
-            return parsed;
-        }
-    }
-    return null;
+    const parsed = drag_and_drop_1.DragAndDropInternals.parseDragData(dataTransfer);
+    return (parsed === null || parsed === void 0 ? void 0 : parsed.type) === 'element' ? parsed.data : null;
 };
 exports.getElementDragData = getElementDragData;

package/dist/components/handle-drop.js

@@ -70,7 +70,6 @@ const handleDrop = async ({ chooseSvgImportMode, compositionFile, compositionId,
             composition,
             compositionFile,
             compositionId,
-            destinationDimensions,
             dropPosition,
             from,
         });

package/dist/components/import-assets.d.ts

@@ -1,4 +1,5 @@
-import { type ComponentProp, type CompositionDragData, type FileType, type InsertableCompositionElementPosition } from '@remotion/studio-shared';
+import { type CompositionDragData, type ComponentProp } from '@remotion/drag-and-drop';
+import { type FileType, type InsertableCompositionElementPosition } from '@remotion/studio-shared';
 import type { Dimensions } from '../helpers/is-current-selected-still';
 export type InsertElementDropPosition = {
     readonly centerX: number;
@@ -51,9 +52,8 @@ export declare const getElementPositionForDrop: ({ dimensions, dropPosition, }:
     dimensions: Dimensions | null;
     dropPosition: InsertElementDropPosition | null;
 }) => InsertableCompositionElementPosition | null;
-export declare const getCompositionPositionForDrop: ({ compositionDimensions, destinationDimensions, dropPosition, }: {
+export declare const getCompositionPositionForDrop: ({ compositionDimensions, dropPosition, }: {
     compositionDimensions: Dimensions;
-    destinationDimensions: Dimensions | null;
     dropPosition: InsertElementDropPosition | null;
 }) => InsertableCompositionElementPosition | null;
 export declare const getAssetPositionForDrop: ({ assetDimensions, destinationDimensions, dropPosition, }: {
@@ -63,7 +63,7 @@ export declare const getAssetPositionForDrop: ({ assetDimensions, destinationDim
 }) => InsertableCompositionElementPosition | null;
 export declare const getComponentDimensions: (component: {
     componentName: string;
-    dimensions?: import("@remotion/studio-shared").ComponentDimensions | undefined;
+    dimensions?: import("@remotion/drag-and-drop").ComponentDimensions | undefined;
     importName: string;
     importPath: string;
     props: ComponentProp[];
@@ -127,7 +127,7 @@ export declare const insertExistingAssets: ({ assetPaths, compositionFile, compo
 export declare const insertComponent: ({ component, compositionFile, compositionId, dropPosition, from, }: {
     component: {
         componentName: string;
-        dimensions?: import("@remotion/studio-shared").ComponentDimensions | undefined;
+        dimensions?: import("@remotion/drag-and-drop").ComponentDimensions | undefined;
         importName: string;
         importPath: string;
         props: ComponentProp[];
@@ -137,11 +137,10 @@ export declare const insertComponent: ({ component, compositionFile, composition
     dropPosition: InsertElementDropPosition | null;
     from: number | null;
 }) => Promise<void>;
-export declare const insertComposition: ({ composition, compositionFile, compositionId, destinationDimensions, dropPosition, from, }: {
+export declare const insertComposition: ({ composition, compositionFile, compositionId, dropPosition, from, }: {
     composition: CompositionDragData;
     compositionFile: string;
     compositionId: string;
-    destinationDimensions: Dimensions | null;
     dropPosition: InsertElementDropPosition | null;
     from: number | null;
 }) => Promise<void>;
@@ -154,7 +153,7 @@ export declare const insertElement: ({ compositionFile, compositionId, dropPosit
         slug: string;
         displayName: string;
         sourceCode: string;
-        dimensions: import("@remotion/studio-shared").ComponentDimensions | null;
+        dimensions: import("@remotion/drag-and-drop").ComponentDimensions | null;
     };
     from: number | null;
 }) => Promise<void>;

package/dist/components/import-assets.js

@@ -217,13 +217,7 @@ const getElementPositionForDrop = ({ dimensions, dropPosition, }) => {
     return getCenteredPosition({ dimensions, dropPosition });
 };
 exports.getElementPositionForDrop = getElementPositionForDrop;
-const getCompositionPositionForDrop = ({ compositionDimensions, destinationDimensions, dropPosition, }) => {
-    // No translation makes an equal-sized composition fill the destination.
-    if (destinationDimensions !== null &&
-        compositionDimensions.width === destinationDimensions.width &&
-        compositionDimensions.height === destinationDimensions.height) {
-        return null;
-    }
+const getCompositionPositionForDrop = ({ compositionDimensions, dropPosition, }) => {
     return getCenteredPosition({
         dimensions: compositionDimensions,
         dropPosition,
@@ -831,7 +825,7 @@ const serializeResolvedPropsForSourceCode = (props) => {
         staticBase: window.remotion_staticBase,
     }).serializedString;
 };
-const insertComposition = async ({ composition, compositionFile, compositionId, destinationDimensions, dropPosition, from, }) => {
+const insertComposition = async ({ composition, compositionFile, compositionId, dropPosition, from, }) => {
     if (composition.compositionId === compositionId) {
         (0, NotificationCenter_1.showNotification)('Cannot add a composition to itself', 3000);
         return;
@@ -864,7 +858,6 @@ const insertComposition = async ({ composition, compositionFile, compositionId,
                 serializedResolvedPropsWithCustomSchema: serializeResolvedPropsForSourceCode(calculated.props),
                 position: (0, exports.getCompositionPositionForDrop)({
                     compositionDimensions: dimensions,
-                    destinationDimensions,
                     dropPosition,
                 }),
             },

package/dist/components/menu-toolbar-height.d.ts

@@ -0,0 +1 @@
+export declare const MENU_TOOLBAR_HEIGHT = 30;

package/dist/components/menu-toolbar-height.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MENU_TOOLBAR_HEIGHT = void 0;
+exports.MENU_TOOLBAR_HEIGHT = 30;