@remotion/studio 4.0.498 → 4.0.500

package/dist/components/AssetSelector.js

@@ -48,6 +48,7 @@ const z_index_1 = require("../state/z-index");
 const AssetSelectorItem_1 = require("./AssetSelectorItem");
 const styles_1 = require("./Menu/styles");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const ExplorerQuickSwitcherTrigger_1 = require("./QuickSwitcher/ExplorerQuickSwitcherTrigger");
 const use_static_files_1 = require("./use-static-files");
 const container = {
     display: 'flex',
@@ -158,11 +159,12 @@ const AssetSelector = ({ readOnlyStudio }) => {
             setDropLocation(null);
         }
     }, [dropLocation, staticFiles]);
-    return (jsx_runtime_1.jsx("div", { style: container, onDragOver: shouldAllowUpload ? onDragOver : undefined, onDrop: shouldAllowUpload ? onDrop : undefined, children: staticFiles.length === 0 ? (publicFolderExists ? (jsx_runtime_1.jsx("div", { style: emptyState, children: jsx_runtime_1.jsxs("div", { style: label, children: ["To add assets, place a file in the", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: "public" }),
-                    " folder of your project or drag and drop a file here."] }) })) : (jsx_runtime_1.jsx("div", { style: emptyState, children: jsx_runtime_1.jsxs("div", { style: label, children: ["To add assets, create a folder called", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: "public" }),
-                    " in the root of your project and place a file in it."] }) }))) : (jsx_runtime_1.jsx("div", { className: "__remotion-vertical-scrollbar", style: {
-                ...list,
-                backgroundColor: isDropDiv ? colors_1.WHITE_ALPHA_06 : colors_1.BACKGROUND,
-            }, onDragEnter: onDragEnter, onDragLeave: onDragLeave, children: jsx_runtime_1.jsx(AssetSelectorItem_1.AssetFolderTree, { item: assetTree, level: 0, parentFolder: null, name: null, tabIndex: tabIndex, toggleFolder: toggleFolder, dropLocation: dropLocation, setDropLocation: setDropLocation, readOnlyStudio: readOnlyStudio }) })) }));
+    return (jsx_runtime_1.jsxs("div", { style: container, onDragOver: shouldAllowUpload ? onDragOver : undefined, onDrop: shouldAllowUpload ? onDrop : undefined, children: [
+            jsx_runtime_1.jsx(ExplorerQuickSwitcherTrigger_1.ExplorerQuickSwitcherTrigger, { mode: "assets", showShortcut: true, tabIndex: tabIndex }), staticFiles.length === 0 ? (publicFolderExists ? (jsx_runtime_1.jsx("div", { style: emptyState, children: jsx_runtime_1.jsxs("div", { style: label, children: ["To add assets, place a file in the", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: "public" }),
+                        " folder of your project or drag and drop a file here."] }) })) : (jsx_runtime_1.jsx("div", { style: emptyState, children: jsx_runtime_1.jsxs("div", { style: label, children: ["To add assets, create a folder called", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: "public" }),
+                        " in the root of your project and place a file in it."] }) }))) : (jsx_runtime_1.jsx("div", { className: "__remotion-vertical-scrollbar", style: {
+                    ...list,
+                    backgroundColor: isDropDiv ? colors_1.WHITE_ALPHA_06 : colors_1.BACKGROUND,
+                }, onDragEnter: onDragEnter, onDragLeave: onDragLeave, children: jsx_runtime_1.jsx(AssetSelectorItem_1.AssetFolderTree, { item: assetTree, level: 0, parentFolder: null, name: null, tabIndex: tabIndex, toggleFolder: toggleFolder, dropLocation: dropLocation, setDropLocation: setDropLocation, readOnlyStudio: readOnlyStudio }) }))] }));
 };
 exports.AssetSelector = AssetSelector;

package/dist/components/AssetSelectorItem.d.ts

@@ -1,5 +1,29 @@
 import React from 'react';
 import type { AssetStructure } from '../helpers/create-folder-tree';
+import type { ComboboxValue } from './NewComposition/ComboBox';
+export declare const getAssetActionAvailability: ({ readOnlyStudio, connectionStatus, publicFolderExists, }: {
+    readOnlyStudio: boolean;
+    connectionStatus: "connected" | "disconnected" | "init";
+    publicFolderExists: string | null;
+}) => {
+    mutationsDisabled: boolean;
+    fileExplorerDisabled: boolean;
+};
+export declare const getCanDragAsset: ({ readOnlyStudio, relativePath, }: {
+    readOnlyStudio: boolean;
+    relativePath: string;
+}) => boolean;
+export declare const getAssetContextMenuItems: ({ relativePath, fileManagerName, copyFileName, copyStaticFilePath, openAssetInExplorer, renameAsset, deleteAsset, fileExplorerDisabled, mutationsDisabled, }: {
+    relativePath: string;
+    fileManagerName: string;
+    copyFileName: () => void;
+    copyStaticFilePath: () => void;
+    openAssetInExplorer: () => void;
+    renameAsset: () => void;
+    deleteAsset: () => void;
+    fileExplorerDisabled: boolean;
+    mutationsDisabled: boolean;
+}) => ComboboxValue[];
 export declare const AssetFolderTree: React.FC<{
     readonly item: AssetStructure;
     readonly name: string | null;

package/dist/components/AssetSelectorItem.js

@@ -33,9 +33,9 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AssetFolderTree = void 0;
+exports.AssetFolderTree = exports.getAssetContextMenuItems = exports.getCanDragAsset = exports.getAssetActionAvailability = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const studio_shared_1 = require("@remotion/studio-shared");
+const drag_and_drop_1 = require("@remotion/drag-and-drop");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
@@ -49,6 +49,8 @@ const mobile_layout_1 = require("../helpers/mobile-layout");
 const sidebar_scroll_into_view_1 = require("../helpers/sidebar-scroll-into-view");
 const url_state_1 = require("../helpers/url-state");
 const use_asset_drag_events_1 = __importStar(require("../helpers/use-asset-drag-events"));
+const use_image_metadata_1 = require("../helpers/use-image-metadata");
+const use_media_metadata_1 = require("../helpers/use-media-metadata");
 const clipboard_1 = require("../icons/clipboard");
 const folder_1 = require("../icons/folder");
 const modals_1 = require("../state/modals");
@@ -103,6 +105,91 @@ const revealIconStyle = {
     height: 12,
     color: colors_1.CURRENT_COLOR,
 };
+const getAssetActionAvailability = ({ readOnlyStudio, connectionStatus, publicFolderExists, }) => {
+    return {
+        mutationsDisabled: readOnlyStudio || connectionStatus !== 'connected',
+        fileExplorerDisabled: publicFolderExists === null ||
+            readOnlyStudio ||
+            connectionStatus !== 'connected',
+    };
+};
+exports.getAssetActionAvailability = getAssetActionAvailability;
+const getCanDragAsset = ({ readOnlyStudio, relativePath, }) => {
+    return !readOnlyStudio && (0, import_assets_1.getAssetElementFromPath)(relativePath) !== null;
+};
+exports.getCanDragAsset = getCanDragAsset;
+const getAssetContextMenuItems = ({ relativePath, fileManagerName, copyFileName, copyStaticFilePath, openAssetInExplorer, renameAsset, deleteAsset, fileExplorerDisabled, mutationsDisabled, }) => {
+    return [
+        (0, open_in_new_window_1.getOpenInNewWindowMenuItem)(`/assets/${relativePath}`),
+        {
+            type: 'divider',
+            id: 'open-in-new-window-divider',
+        },
+        {
+            id: 'copy-asset-file-name',
+            keyHint: null,
+            label: 'Copy file name',
+            leftItem: null,
+            onClick: copyFileName,
+            quickSwitcherLabel: 'Copy asset file name',
+            subMenu: null,
+            type: 'item',
+            value: 'copy-asset-file-name',
+        },
+        {
+            id: 'copy-asset-static-file-path',
+            keyHint: null,
+            label: 'Copy staticFile() path',
+            leftItem: null,
+            onClick: copyStaticFilePath,
+            quickSwitcherLabel: 'Copy staticFile() path',
+            subMenu: null,
+            type: 'item',
+            value: 'copy-asset-static-file-path',
+        },
+        {
+            type: 'divider',
+            id: 'asset-file-actions-divider',
+        },
+        {
+            id: 'open-asset-in-explorer',
+            keyHint: null,
+            label: `Show in ${fileManagerName}`,
+            leftItem: null,
+            onClick: openAssetInExplorer,
+            quickSwitcherLabel: `Show asset in ${fileManagerName}`,
+            subMenu: null,
+            type: 'item',
+            value: 'open-asset-in-explorer',
+            disabled: fileExplorerDisabled,
+        },
+        {
+            id: 'rename-asset',
+            keyHint: null,
+            label: 'Rename...',
+            leftItem: null,
+            onClick: renameAsset,
+            quickSwitcherLabel: 'Rename asset...',
+            subMenu: null,
+            type: 'item',
+            value: 'rename-asset',
+            disabled: mutationsDisabled,
+        },
+        {
+            id: 'delete-asset',
+            keyHint: null,
+            label: 'Delete...',
+            leftItem: null,
+            onClick: deleteAsset,
+            quickSwitcherLabel: 'Delete asset...',
+            subMenu: null,
+            type: 'item',
+            value: 'delete-asset',
+            disabled: mutationsDisabled,
+        },
+    ];
+};
+exports.getAssetContextMenuItems = getAssetContextMenuItems;
 const AssetFolderItem = ({ tabIndex, item, level, parentFolder, toggleFolder, dropLocation, setDropLocation, readOnlyStudio, }) => {
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const openFolderTimerRef = (0, react_1.useRef)(null);
@@ -197,7 +284,7 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
         return false;
     }, [canvasContent, relativePath]);
     const canDragAsset = (0, react_1.useMemo)(() => {
-        return !readOnlyStudio && (0, import_assets_1.getAssetElementFromPath)(relativePath) !== null;
+        return (0, exports.getCanDragAsset)({ readOnlyStudio, relativePath });
     }, [readOnlyStudio, relativePath]);
     const onPointerLeave = (0, react_1.useCallback)(() => {
         setHovered(false);
@@ -224,14 +311,40 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
         setSidebarCollapsedState,
     ]);
     const onDragStart = (0, react_1.useCallback)((e) => {
+        var _a, _b, _c, _d;
         if (!canDragAsset) {
             e.preventDefault();
             return;
         }
         setIsDragging(true);
         e.dataTransfer.effectAllowed = 'copy';
-        e.dataTransfer.setData(studio_shared_1.ASSET_DRAG_MIME_TYPE, JSON.stringify((0, studio_shared_1.makeAssetDragData)(relativePath)));
-    }, [canDragAsset, relativePath]);
+        const src = (0, remotion_1.staticFile)(relativePath);
+        const imageMetadata = previewFileType === 'image' ? (0, use_image_metadata_1.getCachedImageMetadata)(src) : null;
+        const mediaMetadata = previewFileType === 'audio' || previewFileType === 'video'
+            ? (0, use_media_metadata_1.getCachedMediaMetadata)(src)
+            : null;
+        const width = (_b = (_a = imageMetadata === null || imageMetadata === void 0 ? void 0 : imageMetadata.width) !== null && _a !== void 0 ? _a : mediaMetadata === null || mediaMetadata === void 0 ? void 0 : mediaMetadata.width) !== null && _b !== void 0 ? _b : null;
+        const height = (_d = (_c = imageMetadata === null || imageMetadata === void 0 ? void 0 : imageMetadata.height) !== null && _c !== void 0 ? _c : mediaMetadata === null || mediaMetadata === void 0 ? void 0 : mediaMetadata.height) !== null && _d !== void 0 ? _d : null;
+        const hasDimensions = width !== null &&
+            height !== null &&
+            Number.isInteger(width) &&
+            Number.isInteger(height) &&
+            width > 0 &&
+            height > 0;
+        const durationInSeconds = (mediaMetadata === null || mediaMetadata === void 0 ? void 0 : mediaMetadata.duration) !== undefined &&
+            Number.isFinite(mediaMetadata.duration) &&
+            mediaMetadata.duration > 0
+            ? mediaMetadata.duration
+            : null;
+        const dragData = drag_and_drop_1.DragAndDropInternals.makeDragData({
+            type: 'asset',
+            assetPath: relativePath,
+            width: hasDimensions ? width : null,
+            height: hasDimensions ? height : null,
+            durationInSeconds,
+        });
+        e.dataTransfer.setData(dragData.mimeType, dragData.payload);
+    }, [canDragAsset, previewFileType, relativePath]);
     const onDragEnd = (0, react_1.useCallback)(() => {
         setIsDragging(false);
     }, []);
@@ -285,7 +398,11 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
             (0, NotificationCenter_1.showNotification)(`Could not open file: ${err.message}`, 2000);
         });
     }, [relativePath]);
-    const serverActionDisabled = readOnlyStudio || connectionStatus !== 'connected';
+    const { mutationsDisabled, fileExplorerDisabled } = (0, exports.getAssetActionAvailability)({
+        readOnlyStudio,
+        connectionStatus,
+        publicFolderExists: window.remotion_publicFolderExists,
+    });
     const deleteAsset = (0, react_1.useCallback)(() => {
         confirm({
             title: 'Delete asset',
@@ -310,90 +427,34 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
             (0, NotificationCenter_1.showNotification)(`Could not delete ${relativePath}: ${err.message}`, 3000);
         });
     }, [confirm, relativePath]);
+    const renameAsset = (0, react_1.useCallback)(() => {
+        setSelectedModal({
+            type: 'rename-static-file',
+            relativePath,
+        });
+    }, [relativePath, setSelectedModal]);
     const contextMenu = (0, react_1.useMemo)(() => {
-        return [
-            (0, open_in_new_window_1.getOpenInNewWindowMenuItem)(`/assets/${relativePath}`),
-            {
-                type: 'divider',
-                id: 'open-in-new-window-divider',
-            },
-            {
-                id: 'copy-asset-file-name',
-                keyHint: null,
-                label: 'Copy file name',
-                leftItem: null,
-                onClick: copyFileName,
-                quickSwitcherLabel: 'Copy asset file name',
-                subMenu: null,
-                type: 'item',
-                value: 'copy-asset-file-name',
-            },
-            {
-                id: 'copy-asset-static-file-path',
-                keyHint: null,
-                label: 'Copy staticFile() path',
-                leftItem: null,
-                onClick: copyStaticFilePath,
-                quickSwitcherLabel: 'Copy staticFile() path',
-                subMenu: null,
-                type: 'item',
-                value: 'copy-asset-static-file-path',
-            },
-            {
-                type: 'divider',
-                id: 'asset-file-actions-divider',
-            },
-            {
-                id: 'open-asset-in-explorer',
-                keyHint: null,
-                label: `Show in ${fileManagerName}`,
-                leftItem: null,
-                onClick: openAssetInExplorer,
-                quickSwitcherLabel: `Show asset in ${fileManagerName}`,
-                subMenu: null,
-                type: 'item',
-                value: 'open-asset-in-explorer',
-                disabled: serverActionDisabled || window.remotion_publicFolderExists === null,
-            },
-            {
-                id: 'rename-asset',
-                keyHint: null,
-                label: 'Rename...',
-                leftItem: null,
-                onClick: () => {
-                    setSelectedModal({
-                        type: 'rename-static-file',
-                        relativePath,
-                    });
-                },
-                quickSwitcherLabel: 'Rename asset...',
-                subMenu: null,
-                type: 'item',
-                value: 'rename-asset',
-                disabled: serverActionDisabled,
-            },
-            {
-                id: 'delete-asset',
-                keyHint: null,
-                label: 'Delete...',
-                leftItem: null,
-                onClick: deleteAsset,
-                quickSwitcherLabel: 'Delete asset...',
-                subMenu: null,
-                type: 'item',
-                value: 'delete-asset',
-                disabled: serverActionDisabled,
-            },
-        ];
+        return (0, exports.getAssetContextMenuItems)({
+            relativePath,
+            fileManagerName,
+            copyFileName,
+            copyStaticFilePath,
+            openAssetInExplorer,
+            renameAsset,
+            deleteAsset,
+            fileExplorerDisabled,
+            mutationsDisabled,
+        });
     }, [
         copyFileName,
         copyStaticFilePath,
         deleteAsset,
+        fileExplorerDisabled,
         fileManagerName,
+        mutationsDisabled,
         openAssetInExplorer,
+        renameAsset,
         relativePath,
-        serverActionDisabled,
-        setSelectedModal,
     ]);
     const revealInExplorer = (0, react_1.useCallback)((e) => {
         e.stopPropagation();
@@ -405,7 +466,7 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
     }, [copyStaticFilePath]);
     return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenu, onOpen: null, children: jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("div", { ref: rowRef, style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, draggable: canDragAsset, onDragStart: onDragStart, onDragEnd: onDragEnd, tabIndex: tabIndex, title: item.name, children: [
                     jsx_runtime_1.jsx(AssetFileIcon_1.AssetFileIcon, { fileType: previewFileType, style: iconStyle, color: colors_1.LIGHT_TEXT }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.name }), hovered && !isDragging ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                            jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { title: "Copy staticFile() path", renderAction: renderCopyAction, onClick: copyToClipboard }), serverActionDisabled ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                            jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { title: "Copy staticFile() path", renderAction: renderCopyAction, onClick: copyToClipboard }), fileExplorerDisabled ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                                     jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { title: `Show in ${fileManagerName}`, renderAction: renderFileExplorerAction, onClick: revealInExplorer })
                                 ] }))] })) : null] }) }) }));
 };

package/dist/components/Canvas.js

@@ -5,6 +5,7 @@ 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 drag_and_drop_1 = require("@remotion/drag-and-drop");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const get_static_files_1 = require("../api/get-static-files");
@@ -22,8 +23,10 @@ const studio_fit_padding_1 = require("../helpers/studio-fit-padding");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const canvas_ref_1 = require("../state/canvas-ref");
 const editor_guides_1 = require("../state/editor-guides");
+const editor_snapping_1 = require("../state/editor-snapping");
 const editor_zoom_gestures_1 = require("../state/editor-zoom-gestures");
 const call_api_1 = require("./call-api");
+const composition_drop_preview_1 = require("./composition-drop-preview");
 const ConfirmationDialog_1 = require("./ConfirmationDialog");
 const drop_handler_data_1 = require("./drop-handler-data");
 const EditorGuides_1 = __importDefault(require("./EditorGuides"));
@@ -37,6 +40,7 @@ const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const Preview_1 = require("./Preview");
 const ResetZoomButton_1 = require("./ResetZoomButton");
 const SvgImportDialog_1 = require("./SvgImportDialog");
+const imperative_state_1 = require("./Timeline/imperative-state");
 const use_resolved_stack_1 = require("./Timeline/use-resolved-stack");
 const elementInstallCompositionIdStyle = {
     fontFamily: 'monospace',
@@ -100,7 +104,7 @@ const calculateCanvasScale = ({ addFitPadding, canvasSize, compositionHeight, co
         ? (0, studio_fit_padding_1.calculateStudioScale)(options)
         : remotion_1.Internals.calculateScale(options);
 };
-const getDropPosition = ({ addFitPadding, clientX, clientY, contentDimensions, previewSize, size, }) => {
+const getDropPosition = ({ addFitPadding, clientX, clientY, contentDimensions, unbounded, previewSize, size, }) => {
     if (contentDimensions === null || contentDimensions === 'none') {
         return null;
     }
@@ -111,7 +115,10 @@ const getDropPosition = ({ addFitPadding, clientX, clientY, contentDimensions, p
         compositionWidth: contentDimensions.width,
         previewSize: previewSize.size,
     });
-    const { centerX, centerY } = (0, get_effective_translation_1.getCenterPointWhileScrolling)({
+    const getCenterPoint = unbounded
+        ? get_effective_translation_1.getUnboundedCenterPointWhileScrolling
+        : get_effective_translation_1.getCenterPointWhileScrolling;
+    const { centerX, centerY } = getCenterPoint({
         size,
         clientX,
         clientY,
@@ -155,12 +162,14 @@ const Canvas = ({ canvasContent, size }) => {
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const areRulersVisible = (0, use_is_ruler_visible_1.useIsRulerVisible)();
     const { editorShowGuides } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
+    const { editorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
     const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { previewServerState, subscribeToEvent } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewServerClientId = previewServerState.type === 'connected'
         ? previewServerState.clientId
         : null;
     const [isAddingAsset, setIsAddingAsset] = (0, react_1.useState)(false);
+    const [compositionDropPreview, setCompositionDropPreview] = (0, react_1.useState)(null);
     const [installingElementName, setInstallingElementName] = (0, react_1.useState)(null);
     const [pendingElementInstallRequests, setPendingElementInstallRequests] = (0, react_1.useState)([]);
     const [activeElementInstallRequest, setActiveElementInstallRequest] = (0, react_1.useState)(null);
@@ -696,18 +705,109 @@ const Canvas = ({ canvasContent, size }) => {
         };
     }, [activeElementInstallRequest, confirm]);
     const onDragOver = (0, react_1.useCallback)((event) => {
+        var _a;
+        var _b;
         if (!(0, drop_handler_data_1.isSupportedDropEvent)(event) || !isDragEventInsideCanvas(event)) {
+            setCompositionDropPreview(null);
             return;
         }
         if (!canDropAssets && !cannotAddSequence) {
+            setCompositionDropPreview(null);
             return;
         }
         event.preventDefault();
         if (event.dataTransfer) {
             event.dataTransfer.dropEffect = canDropAssets ? 'copy' : 'none';
         }
-    }, [canDropAssets, cannotAddSequence]);
+        if (!canDropAssets ||
+            contentDimensions === null ||
+            contentDimensions === 'none') {
+            setCompositionDropPreview(null);
+            return;
+        }
+        const metadata = drag_and_drop_1.DragAndDropInternals.getDragPreviewMetadata((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []);
+        if ((metadata === null || metadata === void 0 ? void 0 : metadata.type) !== 'composition' ||
+            metadata.width === undefined ||
+            metadata.height === undefined) {
+            setCompositionDropPreview(null);
+            return;
+        }
+        let dropPosition = getDropPosition({
+            addFitPadding,
+            clientX: event.clientX,
+            clientY: event.clientY,
+            contentDimensions,
+            unbounded: true,
+            previewSize,
+            size,
+        });
+        if (dropPosition === null) {
+            setCompositionDropPreview(null);
+            return;
+        }
+        const compositionDimensions = {
+            width: metadata.width,
+            height: metadata.height,
+        };
+        if (editorSnapping && !event.metaKey && !event.ctrlKey) {
+            dropPosition = (0, composition_drop_preview_1.snapCompositionDropPosition)({
+                compositionDimensions,
+                destinationDimensions: contentDimensions,
+                dropPosition,
+                scale: calculateCanvasScale({
+                    addFitPadding,
+                    canvasSize: size,
+                    compositionHeight: contentDimensions.height,
+                    compositionWidth: contentDimensions.width,
+                    previewSize: previewSize.size,
+                }),
+            });
+        }
+        setCompositionDropPreview((currentPreview) => {
+            if ((currentPreview === null || currentPreview === void 0 ? void 0 : currentPreview.compositionDimensions.width) ===
+                compositionDimensions.width &&
+                currentPreview.compositionDimensions.height ===
+                    compositionDimensions.height &&
+                currentPreview.dropPosition.centerX === dropPosition.centerX &&
+                currentPreview.dropPosition.centerY === dropPosition.centerY) {
+                return currentPreview;
+            }
+            return {
+                compositionDimensions,
+                dropPosition,
+            };
+        });
+    }, [
+        addFitPadding,
+        canDropAssets,
+        cannotAddSequence,
+        contentDimensions,
+        editorSnapping,
+        previewSize,
+        size,
+    ]);
+    const onDragLeave = (0, react_1.useCallback)((event) => {
+        const canvas = canvas_ref_1.canvasRef.current;
+        if (canvas !== null) {
+            const rect = canvas.getBoundingClientRect();
+            if ((event.clientX >= rect.left &&
+                event.clientX <= rect.right &&
+                event.clientY >= rect.top &&
+                event.clientY <= rect.bottom) ||
+                (event.relatedTarget instanceof Node &&
+                    canvas.contains(event.relatedTarget))) {
+                return;
+            }
+        }
+        setCompositionDropPreview(null);
+    }, []);
+    const onDragEnd = (0, react_1.useCallback)(() => {
+        setCompositionDropPreview(null);
+    }, []);
     const onDrop = (0, react_1.useCallback)(async (event) => {
+        var _a;
+        var _b;
+        setCompositionDropPreview(null);
         if (!(0, drop_handler_data_1.isSupportedDropEvent)(event) || !isDragEventInsideCanvas(event)) {
             return;
         }
@@ -732,14 +832,42 @@ const Canvas = ({ canvasContent, size }) => {
         event.stopPropagation();
         setIsAddingAsset(true);
         try {
-            const dropPosition = getDropPosition({
+            const metadata = drag_and_drop_1.DragAndDropInternals.getDragPreviewMetadata((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []);
+            const isComposition = (metadata === null || metadata === void 0 ? void 0 : metadata.type) === 'composition';
+            let dropPosition = getDropPosition({
                 addFitPadding,
                 clientX: event.clientX,
                 clientY: event.clientY,
                 contentDimensions,
+                unbounded: isComposition,
                 previewSize,
                 size,
             });
+            if (dropPosition !== null &&
+                isComposition &&
+                metadata.width !== undefined &&
+                metadata.height !== undefined &&
+                contentDimensions !== null &&
+                contentDimensions !== 'none' &&
+                editorSnapping &&
+                !event.metaKey &&
+                !event.ctrlKey) {
+                dropPosition = (0, composition_drop_preview_1.snapCompositionDropPosition)({
+                    compositionDimensions: {
+                        width: metadata.width,
+                        height: metadata.height,
+                    },
+                    destinationDimensions: contentDimensions,
+                    dropPosition,
+                    scale: calculateCanvasScale({
+                        addFitPadding,
+                        canvasSize: size,
+                        compositionHeight: contentDimensions.height,
+                        compositionWidth: contentDimensions.width,
+                        previewSize: previewSize.size,
+                    }),
+                });
+            }
             await (0, handle_drop_1.handleDrop)({
                 chooseSvgImportMode,
                 compositionFile,
@@ -748,7 +876,7 @@ const Canvas = ({ canvasContent, size }) => {
                 dropPosition,
                 event,
                 fps: config.fps,
-                from: null,
+                from: (0, imperative_state_1.getCurrentFrame)(),
             });
         }
         finally {
@@ -763,6 +891,7 @@ const Canvas = ({ canvasContent, size }) => {
         config,
         contentDimensions,
         currentCompositionId,
+        editorSnapping,
         previewSize,
         size,
     ]);
@@ -861,12 +990,16 @@ const Canvas = ({ canvasContent, size }) => {
     ]);
     (0, react_1.useEffect)(() => {
         document.addEventListener('dragover', onDragOver, { capture: true });
+        document.addEventListener('dragleave', onDragLeave, { capture: true });
+        document.addEventListener('dragend', onDragEnd, { capture: true });
         document.addEventListener('drop', onDrop, { capture: true });
         return () => {
             document.removeEventListener('dragover', onDragOver, { capture: true });
+            document.removeEventListener('dragleave', onDragLeave, { capture: true });
+            document.removeEventListener('dragend', onDragEnd, { capture: true });
             document.removeEventListener('drop', onDrop, { capture: true });
         };
-    }, [onDragOver, onDrop]);
+    }, [onDragEnd, onDragLeave, onDragOver, onDrop]);
     (0, react_1.useEffect)(() => {
         if (!canDropAssets ||
             !keybindings.isHighestContext ||
@@ -876,7 +1009,29 @@ const Canvas = ({ canvasContent, size }) => {
         document.addEventListener('paste', onPaste);
         return () => document.removeEventListener('paste', onPaste);
     }, [canDropAssets, keybindings.isHighestContext, onPaste]);
+    const compositionDropPreviewStyle = (0, react_1.useMemo)(() => {
+        if (compositionDropPreview === null ||
+            contentDimensions === null ||
+            contentDimensions === 'none') {
+            return null;
+        }
+        const box = (0, composition_drop_preview_1.getCompositionDropPreviewBox)({
+            canvasSize: size,
+            destinationDimensions: contentDimensions,
+            preview: compositionDropPreview,
+            previewSize,
+        });
+        return {
+            ...box,
+            position: 'absolute',
+            boxSizing: 'border-box',
+            border: colors_1.BORDER_TIMELINE_DROP_BLUE,
+            backgroundColor: colors_1.TIMELINE_DROP_BLUE_ALPHA_16,
+            pointerEvents: 'none',
+            zIndex: 1,
+        };
+    }, [compositionDropPreview, contentDimensions, previewSize, size]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsxs("div", { ref: canvas_ref_1.canvasRef, style: getContainerStyle(editorZoomGestures), children: [size ? (jsx_runtime_1.jsx(Preview_1.VideoPreview, { canvasContent: canvasContent, contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution, onRetryAssetMetadata: fetchMetadata })) : null, isFit ? null : (jsx_runtime_1.jsx("div", { style: resetZoom, className: "css-reset", children: jsx_runtime_1.jsx(ResetZoomButton_1.ResetZoomButton, { onClick: onReset }) })), editorShowGuides && canvasContent.type === 'composition' && (jsx_runtime_1.jsx(EditorGuides_1.default, { canvasSize: size, contentDimensions: contentDimensions, assetMetadata: assetResolution }))] }), areRulersVisible && (jsx_runtime_1.jsx(EditorRuler_1.EditorRulers, { contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution, containerRef: canvas_ref_1.canvasRef }))] }));
+            jsx_runtime_1.jsxs("div", { ref: canvas_ref_1.canvasRef, style: getContainerStyle(editorZoomGestures), children: [size ? (jsx_runtime_1.jsx(Preview_1.VideoPreview, { canvasContent: canvasContent, contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution, onRetryAssetMetadata: fetchMetadata })) : null, compositionDropPreviewStyle === null ? null : (jsx_runtime_1.jsx("div", { className: "css-reset", "data-testid": "composition-drop-preview", style: compositionDropPreviewStyle })), isFit ? null : (jsx_runtime_1.jsx("div", { style: resetZoom, className: "css-reset", children: jsx_runtime_1.jsx(ResetZoomButton_1.ResetZoomButton, { onClick: onReset }) })), editorShowGuides && canvasContent.type === 'composition' && (jsx_runtime_1.jsx(EditorGuides_1.default, { canvasSize: size, contentDimensions: contentDimensions, assetMetadata: assetResolution }))] }), areRulersVisible && (jsx_runtime_1.jsx(EditorRuler_1.EditorRulers, { contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution, containerRef: canvas_ref_1.canvasRef }))] }));
 };
 exports.Canvas = Canvas;