@remotion/studio 4.0.498 → 4.0.499

package/dist/components/AssetSelectorItem.js

@@ -35,7 +35,7 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AssetFolderTree = 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");
@@ -224,14 +226,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);
     }, []);

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;

package/dist/components/CompositionSelector.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CompositionSelector = exports.useCompositionNavigation = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const drag_and_drop_1 = require("@remotion/drag-and-drop");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
@@ -188,8 +189,9 @@ const CompositionSelector = () => {
         }
     }, [runCompositionListAutoScroll, stopCompositionListAutoScroll]);
     const onCompositionListDragOverCapture = (0, react_1.useCallback)((event) => {
+        var _a;
         if (window.remotion_isReadOnlyStudio ||
-            !Array.from(event.dataTransfer.types).includes(studio_shared_1.COMPOSITION_DRAG_MIME_TYPE)) {
+            ((_a = drag_and_drop_1.DragAndDropInternals.getDragPreviewMetadata(event.dataTransfer.types)) === null || _a === void 0 ? void 0 : _a.type) !== 'composition') {
             stopCompositionListAutoScroll();
             return;
         }
@@ -204,8 +206,9 @@ const CompositionSelector = () => {
         return stopCompositionListAutoScroll;
     }, [stopCompositionListAutoScroll]);
     const onRootDragOver = (0, react_1.useCallback)((event) => {
+        var _a;
         if (window.remotion_isReadOnlyStudio ||
-            !Array.from(event.dataTransfer.types).includes(studio_shared_1.COMPOSITION_DRAG_MIME_TYPE)) {
+            ((_a = drag_and_drop_1.DragAndDropInternals.getDragPreviewMetadata(event.dataTransfer.types)) === null || _a === void 0 ? void 0 : _a.type) !== 'composition') {
             return;
         }
         event.preventDefault();
@@ -225,35 +228,35 @@ const CompositionSelector = () => {
         if (window.remotion_isReadOnlyStudio) {
             return;
         }
-        const raw = event.dataTransfer.getData(studio_shared_1.COMPOSITION_DRAG_MIME_TYPE);
-        const parsed = raw ? (0, studio_shared_1.parseCompositionDragData)(raw) : null;
-        if (parsed === null) {
+        const parsed = drag_and_drop_1.DragAndDropInternals.parseDragData(event.dataTransfer);
+        if ((parsed === null || parsed === void 0 ? void 0 : parsed.type) !== 'composition') {
             return;
         }
+        const compositionDragData = parsed.data;
         event.preventDefault();
         event.stopPropagation();
         stopCompositionListAutoScroll();
         setRootDragHovered(false);
-        const composition = compositions.find((c) => c.id === parsed.compositionId);
+        const composition = compositions.find((c) => c.id === compositionDragData.compositionId);
         if (!composition || composition.folderName === null) {
             return;
         }
-        const notification = (0, NotificationCenter_1.showNotification)(`Moving ${parsed.compositionId}...`, null);
+        const notification = (0, NotificationCenter_1.showNotification)(`Moving ${compositionDragData.compositionId}...`, null);
         const controller = new AbortController();
         try {
             const result = await (0, actions_1.applyCodemod)({
                 codemod: {
                     type: 'move-composition-to-folder',
-                    idToMove: parsed.compositionId,
+                    idToMove: compositionDragData.compositionId,
                     folderName: null,
                     parentName: null,
                 },
                 dryRun: false,
                 signal: controller.signal,
-                symbolicatedStack: (0, studio_shared_1.compositionDragDataToSymbolicatedStack)(parsed),
+                symbolicatedStack: (0, studio_shared_1.compositionDragDataToSymbolicatedStack)(compositionDragData),
             });
             notification.replaceContent(result.success
-                ? `Moved ${parsed.compositionId} outside of folder`
+                ? `Moved ${compositionDragData.compositionId} outside of folder`
                 : result.reason, result.success ? 2000 : 4000);
         }
         catch (err) {

package/dist/components/CompositionSelectorItem.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CompositionSelectorItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const drag_and_drop_1 = require("@remotion/drag-and-drop");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const client_id_1 = require("../helpers/client-id");
@@ -142,25 +143,31 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
         });
     }, [connectionStatus, item, resolvedLocation, setSelectedModal]);
     const onCompositionDragStart = (0, react_1.useCallback)((event) => {
-        var _a;
+        var _a, _b, _c, _d;
         if (item.type !== 'composition' || window.remotion_isReadOnlyStudio) {
             event.preventDefault();
             return;
         }
         setIsDragging(true);
         event.dataTransfer.effectAllowed = 'copyMove';
-        event.dataTransfer.setData(studio_shared_1.COMPOSITION_DRAG_MIME_TYPE, JSON.stringify((0, studio_shared_1.makeCompositionDragData)({
+        const dragData = drag_and_drop_1.DragAndDropInternals.makeDragData({
+            type: 'composition',
             compositionFile: (_a = resolvedLocation === null || resolvedLocation === void 0 ? void 0 : resolvedLocation.source) !== null && _a !== void 0 ? _a : null,
             compositionId: item.composition.id,
-        })));
+            width: (_b = item.composition.width) !== null && _b !== void 0 ? _b : null,
+            height: (_c = item.composition.height) !== null && _c !== void 0 ? _c : null,
+            durationInFrames: (_d = item.composition.durationInFrames) !== null && _d !== void 0 ? _d : null,
+        });
+        event.dataTransfer.setData(dragData.mimeType, dragData.payload);
     }, [item, resolvedLocation === null || resolvedLocation === void 0 ? void 0 : resolvedLocation.source]);
     const onCompositionDragEnd = (0, react_1.useCallback)(() => {
         setIsDragging(false);
     }, []);
     const onFolderDragOver = (0, react_1.useCallback)((event) => {
+        var _a;
         if (item.type !== 'folder' ||
             window.remotion_isReadOnlyStudio ||
-            !Array.from(event.dataTransfer.types).includes(studio_shared_1.COMPOSITION_DRAG_MIME_TYPE)) {
+            ((_a = drag_and_drop_1.DragAndDropInternals.getDragPreviewMetadata(event.dataTransfer.types)) === null || _a === void 0 ? void 0 : _a.type) !== 'composition') {
             return;
         }
         event.preventDefault();
@@ -173,9 +180,10 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
         setDragHovered(false);
     }, []);
     const onFolderChildListDragOver = (0, react_1.useCallback)((event) => {
+        var _a;
         if (item.type !== 'folder' ||
             window.remotion_isReadOnlyStudio ||
-            !Array.from(event.dataTransfer.types).includes(studio_shared_1.COMPOSITION_DRAG_MIME_TYPE)) {
+            ((_a = drag_and_drop_1.DragAndDropInternals.getDragPreviewMetadata(event.dataTransfer.types)) === null || _a === void 0 ? void 0 : _a.type) !== 'composition') {
             return;
         }
         event.preventDefault();
@@ -187,18 +195,18 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
         if (item.type !== 'folder' || window.remotion_isReadOnlyStudio) {
             return;
         }
-        const raw = event.dataTransfer.getData(studio_shared_1.COMPOSITION_DRAG_MIME_TYPE);
-        const parsed = raw ? (0, studio_shared_1.parseCompositionDragData)(raw) : null;
-        if (parsed === null) {
+        const parsed = drag_and_drop_1.DragAndDropInternals.parseDragData(event.dataTransfer);
+        if ((parsed === null || parsed === void 0 ? void 0 : parsed.type) !== 'composition') {
             return;
         }
+        const compositionDragData = parsed.data;
         event.preventDefault();
         event.stopPropagation();
         clearRootDragHover();
         setDragHovered(false);
         const isAlreadyDirectChild = item.items.some((child) => {
             return (child.type === 'composition' &&
-                child.composition.id === parsed.compositionId);
+                child.composition.id === compositionDragData.compositionId);
         });
         if (isAlreadyDirectChild) {
             return;
@@ -207,22 +215,22 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
             folderName: item.folderName,
             parentName: item.parentName,
         });
-        const notification = (0, NotificationCenter_1.showNotification)(`Moving ${parsed.compositionId}...`, null);
+        const notification = (0, NotificationCenter_1.showNotification)(`Moving ${compositionDragData.compositionId}...`, null);
         const controller = new AbortController();
         try {
             const result = await (0, actions_1.applyCodemod)({
                 codemod: {
                     type: 'move-composition-to-folder',
-                    idToMove: parsed.compositionId,
+                    idToMove: compositionDragData.compositionId,
                     folderName: item.folderName,
                     parentName: item.parentName,
                 },
                 dryRun: false,
                 signal: controller.signal,
-                symbolicatedStack: (0, studio_shared_1.compositionDragDataToSymbolicatedStack)(parsed),
+                symbolicatedStack: (0, studio_shared_1.compositionDragDataToSymbolicatedStack)(compositionDragData),
             });
             notification.replaceContent(result.success
-                ? `Moved ${parsed.compositionId} to ${folderId}`
+                ? `Moved ${compositionDragData.compositionId} to ${folderId}`
                 : result.reason, result.success ? 2000 : 4000);
             if (result.success && !item.expanded) {
                 toggleFolder(item.folderName, item.parentName);

package/dist/components/EditorContent.js

@@ -35,7 +35,7 @@ const StudioClearSelectionArea = ({ children }) => {
 const EditorContent = ({ readOnlyStudio, children }) => {
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const showTimeline = canvasContent !== null && canvasContent.type === 'composition';
-    const content = (jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "horizontal", id: "top-to-bottom", maxFlex: 0.9, minFlex: 0.2, defaultFlex: 0.75, children: [
+    const content = (jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "horizontal", id: "top-to-bottom", maxFlex: 0.9, minFlex: 0.2, defaultFlex: 0.75, maxFlexerSize: null, maxAntiFlexerSize: null, children: [
             jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: children }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "none", onCollapse: noop }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: showTimeline ? jsx_runtime_1.jsx(Timeline_1.Timeline, {}) : jsx_runtime_1.jsx(TimelineEmptyState_1.TimelineEmptyState, {}) })
         ] }));
     return (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionProvider, { children: jsx_runtime_1.jsxs(StudioClearSelectionArea, { children: [

package/dist/components/EditorRuler/Ruler.js

@@ -6,8 +6,8 @@ const remotion_1 = require("remotion");
 const colors_1 = require("../../helpers/colors");
 const editor_guide_selection_1 = require("../../helpers/editor-guide-selection");
 const editor_ruler_1 = require("../../helpers/editor-ruler");
+const ruler_canvas_size_1 = require("../../helpers/ruler-canvas-size");
 const editor_guides_1 = require("../../state/editor-guides");
-const editor_rulers_1 = require("../../state/editor-rulers");
 const ForceSpecificCursor_1 = require("../ForceSpecificCursor");
 const should_clear_selection_on_pointer_down_1 = require("../Timeline/should-clear-selection-on-pointer-down");
 const TimelineSelection_1 = require("../Timeline/TimelineSelection");
@@ -30,8 +30,10 @@ const Ruler = ({ scale, points, originOffset, startMarking, size, markingGaps, o
         hoveredGuideId,
         draggingGuideId,
     }), [draggingGuideId, guidesList, hoveredGuideId, selectedItems]);
-    const rulerWidth = isVerticalRuler ? editor_rulers_1.RULER_WIDTH : size.width - editor_rulers_1.RULER_WIDTH;
-    const rulerHeight = isVerticalRuler ? size.height - editor_rulers_1.RULER_WIDTH : editor_rulers_1.RULER_WIDTH;
+    const { width: rulerWidth, height: rulerHeight } = (0, ruler_canvas_size_1.getRulerCanvasSize)({
+        orientation,
+        size,
+    });
     (0, react_1.useEffect)(() => {
         (0, editor_ruler_1.drawMarkingOnRulerCanvas)({
             scale,

package/dist/components/ForceSpecificCursor.js

@@ -37,17 +37,29 @@ exports.ForceSpecificCursor = exports.stopForcingSpecificCursor = exports.forceS
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const ref = react_1.default.createRef();
+const removeAutomaticCleanupListeners = () => {
+    window.removeEventListener('pointerup', exports.stopForcingSpecificCursor, true);
+    window.removeEventListener('pointercancel', exports.stopForcingSpecificCursor, true);
+    window.removeEventListener('blur', exports.stopForcingSpecificCursor, true);
+};
 const forceSpecificCursor = (cursor) => {
     if (!ref.current) {
         throw new Error('ForceSpecificCursor is not mounted');
     }
     ref.current.style.cursor = cursor;
     ref.current.style.pointerEvents = 'auto';
+    // The component which initiated the drag may unmount before it gets a chance
+    // to handle the end of the gesture. Keep this fallback independent from the
+    // initiator so the cursor overlay can never remain stuck.
+    window.addEventListener('pointerup', exports.stopForcingSpecificCursor, true);
+    window.addEventListener('pointercancel', exports.stopForcingSpecificCursor, true);
+    window.addEventListener('blur', exports.stopForcingSpecificCursor, true);
 };
 exports.forceSpecificCursor = forceSpecificCursor;
 const stopForcingSpecificCursor = () => {
+    removeAutomaticCleanupListeners();
     if (!ref.current) {
-        throw new Error('ForceSpecificCursor is not mounted');
+        return;
     }
     ref.current.style.cursor = '';
     ref.current.style.pointerEvents = 'none';

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

@@ -1,7 +1,33 @@
 import type { InputHTMLAttributes } from 'react';
 import React from 'react';
 import type { RemInputStatus } from './RemInput';
+type InputDraggerValidationResult = {
+    readonly valid: true;
+    readonly value: number;
+} | {
+    readonly valid: false;
+    readonly message: string;
+};
 export declare const inputDraggerContainerStyle: React.CSSProperties;
+export declare const parseInputDraggerNumber: (value: string) => number | null;
+export declare const isInputDraggerValueAlignedToStep: ({ min, step, value, }: {
+    readonly min: string | number | undefined;
+    readonly step: string | number | undefined;
+    readonly value: number;
+}) => boolean;
+export declare const validateInputDraggerValue: ({ max, min, step, value, }: {
+    readonly max: string | number | undefined;
+    readonly min: string | number | undefined;
+    readonly step: string | number | undefined;
+    readonly value: string;
+}) => InputDraggerValidationResult;
+export declare const deriveInputDraggerArrowValue: ({ direction, max, min, step, value, }: {
+    readonly direction: -1 | 1;
+    readonly max: string | number | undefined;
+    readonly min: string | number | undefined;
+    readonly step: string | number | undefined;
+    readonly value: number;
+}) => number;
 export declare const deriveInputDraggerStep: ({ min, snapToStep, step, }: {
     readonly min: string | number | undefined;
     readonly snapToStep: boolean;
@@ -33,3 +59,4 @@ export declare const InputDragger: React.ForwardRefExoticComponent<InputHTMLAttr
     readonly dragDecimalPlaces?: number | undefined;
     readonly dragSensitivity?: number | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;
+export {};