@remotion/studio 4.0.520 → 4.0.521

package/dist/api/shut-down-studio.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @description Shuts down the Remotion Studio.
+ * @see [Documentation](https://www.remotion.dev/docs/studio/shut-down-studio)
+ */
+import type { ShutdownStudioResponse } from '@remotion/studio-shared';
+export declare const shutDownStudio: () => Promise<ShutdownStudioResponse>;

package/dist/api/shut-down-studio.js

@@ -0,0 +1,23 @@
+"use strict";
+/**
+ * @description Shuts down the Remotion Studio.
+ * @see [Documentation](https://www.remotion.dev/docs/studio/shut-down-studio)
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.shutDownStudio = void 0;
+const remotion_1 = require("remotion");
+const call_api_1 = require("../components/call-api");
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
+const shutDownStudio = () => {
+    if (!(0, remotion_1.getRemotionEnvironment)().isStudio) {
+        throw new Error('shutDownStudio() is only available in the Studio');
+    }
+    if ((0, browser_studio_operations_1.getBrowserStudioOperations)() !== null) {
+        throw new Error('shutDownStudio() is not supported in Browser Studio');
+    }
+    if (window.remotion_isReadOnlyStudio) {
+        throw new Error('shutDownStudio() is not available in read-only Studio');
+    }
+    return (0, call_api_1.callApi)('/api/shutdown-studio', {});
+};
+exports.shutDownStudio = shutDownStudio;

package/dist/components/AudioWaveform.js

@@ -50,17 +50,15 @@ const getContainerStyle = (height) => {
         position: 'relative',
         width: '100%',
         height,
+        overflow: 'hidden',
     };
 };
 const waveformCanvasStyle = {
     pointerEvents: 'none',
-    width: '100%',
-    height: '100%',
+    flexShrink: 0,
 };
 const volumeCanvasStyle = {
     position: 'absolute',
-    width: '100%',
-    height: '100%',
 };
 const parseVolume = (volume) => {
     if (typeof volume === 'number') {
@@ -146,14 +144,17 @@ const AudioWaveformInner = ({ src, height, startFrom, durationInFrames, displayO
         const pixelRatio = window.devicePixelRatio;
         const h = Math.ceil(height * pixelRatio);
         const w = Math.ceil(visualizationWidth * pixelRatio);
+        const drawingWidth = visualizationWidth * pixelRatio;
         canvasElement.width = w;
         canvasElement.height = h;
+        canvasElement.style.width = w / pixelRatio + 'px';
+        canvasElement.style.height = h / pixelRatio + 'px';
         (0, timeline_utils_1.drawBars)({
             canvas: canvasElement,
             peaks: portionPeaks !== null && portionPeaks !== void 0 ? portionPeaks : EMPTY_PEAKS,
             color: colors_1.WHITE_ALPHA_60,
             volume: visibleVolume,
-            width: w,
+            width: drawingWidth,
         });
     }, [height, portionPeaks, visibleVolume, visualizationWidth]);
     (0, react_1.useLayoutEffect)(() => {
@@ -167,12 +168,15 @@ const AudioWaveformInner = ({ src, height, startFrom, durationInFrames, displayO
         const pixelRatio = window.devicePixelRatio;
         const h = Math.ceil(height * pixelRatio);
         const w = Math.ceil(visualizationWidth * pixelRatio);
+        const drawingWidth = visualizationWidth * pixelRatio;
         const context = volumeCanvasElement.getContext('2d');
         if (!context) {
             return;
         }
         volumeCanvasElement.width = w;
         volumeCanvasElement.height = h;
+        volumeCanvasElement.style.width = w / pixelRatio + 'px';
+        volumeCanvasElement.style.height = h / pixelRatio + 'px';
         context.clearRect(0, 0, w, h);
         if (!Array.isArray(visibleVolume)) {
             return;
@@ -182,7 +186,7 @@ const AudioWaveformInner = ({ src, height, startFrom, durationInFrames, displayO
         visibleVolume.forEach((v, index) => {
             const x = visibleVolume.length <= 1
                 ? 0
-                : (index / (visibleVolume.length - 1)) * w;
+                : (index / (visibleVolume.length - 1)) * drawingWidth;
             const y = (1 - v) * (h - timeline_layout_1.TIMELINE_BORDER * 2 * pixelRatio) + pixelRatio;
             if (index === 0) {
                 context.moveTo(x, y);

package/dist/components/Canvas.js

@@ -47,7 +47,6 @@ 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 elementInstallDependencyIgnoreList = ['react', 'react-dom', 'remotion'];
 const getCanvasDragPreviewMetadata = (mimeTypes) => {
     var _a, _b, _c;
     const composition = (0, composition_drag_data_1.getCompositionDragPreviewMetadata)(mimeTypes);
@@ -624,24 +623,103 @@ const Canvas = ({ canvasContent, size }) => {
             (0, element_install_request_1.enqueueElementInstallRequest)(event.request);
         });
     }, [previewServerClientId, subscribeToEvent]);
+    (0, react_1.useEffect)(() => {
+        const onMessage = (event) => {
+            var _a, _b;
+            const elementLibrary = document.querySelector('iframe[data-remotion-element-library]');
+            if (event.source !== (elementLibrary === null || elementLibrary === void 0 ? void 0 : elementLibrary.contentWindow) ||
+                !studio_protocol_1.StudioProtocolInternals.isAllowedStudioProtocolPageOrigin(event.origin)) {
+                return;
+            }
+            const payload = studio_protocol_1.StudioProtocolInternals.parseStudioProtocolIframeInstallRequest(event.data);
+            const responsePort = event.ports[0];
+            if (payload === null || responsePort === undefined) {
+                return;
+            }
+            const canInstall = canReceiveElementInstallRequest &&
+                compositionFile !== null &&
+                currentCompositionId !== null &&
+                previewServerClientId !== null;
+            const request = canInstall
+                ? {
+                    clientId: previewServerClientId,
+                    compositionFile,
+                    compositionId: currentCompositionId,
+                    createdAt: Date.now(),
+                    element: {
+                        ...payload.element,
+                        durationInFrames: (_a = payload.element.durationInFrames) !== null && _a !== void 0 ? _a : null,
+                        installationMode: (_b = payload.element.installationMode) !== null && _b !== void 0 ? _b : null,
+                    },
+                    from: null,
+                    id: crypto.randomUUID(),
+                    position: null,
+                    source: { origin: event.origin, type: 'studio-protocol' },
+                }
+                : null;
+            const result = canInstall
+                ? {
+                    success: true,
+                    status: 'awaiting-confirmation',
+                    target: {
+                        compositionId: currentCompositionId,
+                        projectName: window.remotion_projectName,
+                        studioOrigin: window.location.origin,
+                        studioVersion: window.remotion_version,
+                    },
+                }
+                : {
+                    success: false,
+                    code: 'no-installable-target',
+                    message: 'Focus a composition in a Remotion Studio that is not read-only, then try again.',
+                };
+            const timeout = window.setTimeout(() => responsePort.close(), 1000);
+            responsePort.onmessage = () => {
+                window.clearTimeout(timeout);
+                responsePort.close();
+                if (request !== null) {
+                    (0, element_install_request_1.enqueueElementInstallRequest)(request);
+                }
+            };
+            responsePort.postMessage(result);
+        };
+        window.addEventListener('message', onMessage);
+        return () => window.removeEventListener('message', onMessage);
+    }, [
+        canReceiveElementInstallRequest,
+        compositionFile,
+        currentCompositionId,
+        previewServerClientId,
+    ]);
     (0, react_1.useEffect)(() => {
         return (0, element_install_request_1.subscribeToElementInstallRequests)((request) => {
-            const requestWithFrom = request.source.type === 'drag-and-drop' || request.from !== null
+            var _a, _b;
+            const isDragAndDrop = request.source.type === 'drag-and-drop';
+            const requestWithDefaults = isDragAndDrop
                 ? request
                 : {
                     ...request,
-                    from: (0, import_assets_1.getFromForDrop)({
+                    from: (_a = request.from) !== null && _a !== void 0 ? _a : (0, import_assets_1.getFromForDrop)({
                         durationInFrames: request.element.durationInFrames,
                         from: (0, imperative_state_1.getCurrentFrame)(),
                         preferCompositionStart: true,
                     }),
+                    position: (_b = request.position) !== null && _b !== void 0 ? _b : (0, import_assets_1.getElementPositionForDrop)({
+                        dimensions: request.element.dimensions,
+                        dropPosition: contentDimensions === null || contentDimensions === 'none'
+                            ? null
+                            : {
+                                centerX: contentDimensions.width / 2,
+                                centerY: contentDimensions.height / 2,
+                            },
+                    }),
                 };
             setPendingElementInstallRequests((requests) => [
                 ...requests,
-                requestWithFrom,
+                requestWithDefaults,
             ]);
         });
-    }, []);
+    }, [contentDimensions]);
     (0, react_1.useEffect)(() => {
         var _a;
         var _b;
@@ -719,12 +797,7 @@ const Canvas = ({ canvasContent, size }) => {
                     return;
                 }
                 const declaredDependencies = Array.from(new Map(activeElementInstallRequest.element.dependencies.map((dependency) => [dependency.name, dependency])).values());
-                const missingPackages = (0, install_required_package_1.getMissingPackages)(declaredDependencies).map((dependency) => dependency.name);
-                const ignoredDependencies = declaredDependencies.filter((dependency) => elementInstallDependencyIgnoreList.includes(dependency.name) &&
-                    !missingPackages.includes(dependency.name));
-                const dependenciesToReview = declaredDependencies
-                    .filter((dependency) => !ignoredDependencies.includes(dependency))
-                    .map((dependency) => dependency.version === null
+                const missingPackages = (0, install_required_package_1.getMissingPackages)(declaredDependencies).map((dependency) => dependency.version === null
                     ? dependency.name
                     : `${dependency.name}@${dependency.version}`);
                 const { source } = activeElementInstallRequest;
@@ -741,7 +814,6 @@ const Canvas = ({ canvasContent, size }) => {
                 setSelectedModal({
                     type: 'element-install',
                     currentPlan,
-                    dependenciesToReview,
                     missingPackages,
                     newPlan: newPreflight.plan,
                     onClose: closeElementInstallDialog,

package/dist/components/CaptionInspector.d.ts

@@ -6,6 +6,7 @@ export declare const CaptionInspector: React.FC<{
     readonly onTextChange: (captions: Caption[]) => void;
     readonly onTextSave: ((captions: Caption[]) => void) | null;
     readonly onTextCancel: (() => void) | null;
+    readonly onReplaceCaptions: ((captions: Caption[]) => void) | null;
     readonly onToggle: () => void;
     readonly readOnly: boolean;
     readonly readOnlyTitle: string | null;

package/dist/components/CaptionInspector.js

@@ -2,11 +2,19 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CaptionInspector = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
+const upload_1 = require("../icons/upload");
+const Button_1 = require("./Button");
 const CaptionTextEditor_1 = require("./CaptionTextEditor");
 const CollapsibleInspectorSectionHeader_1 = require("./InspectorPanel/CollapsibleInspectorSectionHeader");
 const common_1 = require("./InspectorPanel/common");
 const styles_1 = require("./InspectorPanel/styles");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const parse_caption_file_1 = require("./parse-caption-file");
+const importTooltip = `Import captions
+
+Supports Remotion Caption[] JSON. Files are processed locally.`;
 const readOnlyStatus = {
     color: colors_1.LIGHT_TEXT,
     fontFamily: 'sans-serif',
@@ -15,8 +23,41 @@ const readOnlyStatus = {
     lineHeight: '16px',
     marginLeft: 12,
 };
-const CaptionInspector = ({ captions, expanded, onTextChange, onTextSave, onTextCancel, onToggle, readOnly, readOnlyTitle, }) => {
+const CaptionInspector = ({ captions, expanded, onTextChange, onTextSave, onTextCancel, onReplaceCaptions, onToggle, readOnly, readOnlyTitle, }) => {
+    const fileInput = (0, react_1.useRef)(null);
+    const [isImporting, setIsImporting] = (0, react_1.useState)(false);
+    const importCaptions = (0, react_1.useCallback)(async (event) => {
+        var _a;
+        const file = (_a = event.currentTarget.files) === null || _a === void 0 ? void 0 : _a[0];
+        event.currentTarget.value = '';
+        if (!file || onReplaceCaptions === null) {
+            return;
+        }
+        setIsImporting(true);
+        try {
+            onReplaceCaptions((0, parse_caption_file_1.parseCaptionFile)({
+                fileName: file.name,
+                contents: await file.text(),
+            }));
+        }
+        catch (error) {
+            (0, NotificationCenter_1.showNotification)(`Could not import ${file.name}: ${error instanceof Error ? error.message : String(error)}`, 5000);
+        }
+        finally {
+            setIsImporting(false);
+        }
+    }, [onReplaceCaptions]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: jsx_runtime_1.jsx(CollapsibleInspectorSectionHeader_1.CollapsibleInspectorSectionHeader, { action: jsx_runtime_1.jsx("div", { style: styles_1.sectionHeaderEnd, children: readOnly ? (jsx_runtime_1.jsx("div", { style: readOnlyStatus, title: readOnlyTitle !== null && readOnlyTitle !== void 0 ? readOnlyTitle : undefined, children: "Read only" })) : null }), expanded: expanded, label: "Captions", onToggle: onToggle }) }), expanded ? (jsx_runtime_1.jsx(CaptionTextEditor_1.CaptionTextEditor, { captions: captions, onChange: onTextChange, onSave: onTextSave, onCancel: onTextCancel, readOnly: readOnly })) : null] }));
+            jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: jsx_runtime_1.jsx(CollapsibleInspectorSectionHeader_1.CollapsibleInspectorSectionHeader, { action: jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderEnd, children: [onReplaceCaptions === null ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                                    jsx_runtime_1.jsx("input", { ref: fileInput, accept: ".json", "aria-label": "Import captions file", hidden: true, onChange: importCaptions, type: "file" }), jsx_runtime_1.jsxs(Button_1.Button, { buttonContainerStyle: {
+                                            alignItems: 'center',
+                                            display: 'flex',
+                                            gap: 4,
+                                        }, disabled: isImporting, onClick: () => {
+                                            var _a;
+                                            return (_a = fileInput.current) === null || _a === void 0 ? void 0 : _a.click();
+                                        }, size: "condensed", title: importTooltip, children: [
+                                            jsx_runtime_1.jsx(upload_1.UploadIcon, { "aria-hidden": "true", color: colors_1.CURRENT_COLOR, focusable: "false", style: { height: 12, width: 12 } }), isImporting ? 'Importing…' : 'Import'] })
+                                ] })), readOnly ? (jsx_runtime_1.jsx("div", { style: readOnlyStatus, title: readOnlyTitle !== null && readOnlyTitle !== void 0 ? readOnlyTitle : undefined, children: "Read only" })) : null] }), expanded: expanded, label: "Captions", onToggle: onToggle }) }), expanded ? (jsx_runtime_1.jsx(CaptionTextEditor_1.CaptionTextEditor, { captions: captions, onChange: onTextChange, onSave: onTextSave, onCancel: onTextCancel, readOnly: readOnly })) : null] }));
 };
 exports.CaptionInspector = CaptionInspector;

package/dist/components/CaptionTextEditor.js

@@ -119,7 +119,7 @@ const CaptionTextEditor = ({ captions, onChange, onSave, onCancel, readOnly }) =
                         ? `Remove page break after caption ${index + 1}`
                         : `Add page break after caption ${index + 1}`;
                     return (jsx_runtime_1.jsxs("div", { style: row, children: [
-                            jsx_runtime_1.jsxs("div", { style: timing, children: [formatMilliseconds(caption.startMs), " \u2192", ' ', formatMilliseconds(caption.endMs), " ms"] }), jsx_runtime_1.jsx(RemInput_1.RemotionInput, { "data-caption-index": index, disabled: readOnly, onBlur: (event) => {
+                            jsx_runtime_1.jsxs("div", { style: timing, children: [formatMilliseconds(caption.startMs), " \u2192", ' ', formatMilliseconds(caption.endMs), " ms"] }), jsx_runtime_1.jsx(RemInput_1.RemotionInput, { "aria-label": `Caption ${index + 1}`, "data-caption-index": index, disabled: readOnly, onBlur: (event) => {
                                     if (cancelledBlurIndexes.current.delete(index)) {
                                         return;
                                     }

package/dist/components/CompositionSelector.js

@@ -11,7 +11,7 @@ const persist_open_folders_1 = require("../helpers/persist-open-folders");
 const folders_1 = require("../state/folders");
 const modals_1 = require("../state/modals");
 const z_index_1 = require("../state/z-index");
-const composition_drag_data_1 = require("./composition-drag-data");
+const composition_selector_drag_data_1 = require("./composition-selector-drag-data");
 const CompositionSelectorItem_1 = require("./CompositionSelectorItem");
 const ContextMenu_1 = require("./ContextMenu");
 const InitialCompositionLoader_1 = require("./InitialCompositionLoader");
@@ -63,6 +63,19 @@ const container = {
     overflow: 'hidden',
     backgroundColor: colors_1.BACKGROUND,
 };
+const list = {
+    flex: 1,
+    overflowY: 'auto',
+    paddingTop: 4,
+    paddingBottom: 4,
+    backgroundColor: colors_1.BACKGROUND,
+};
+const rootReorderLine = {
+    backgroundColor: colors_1.TIMELINE_BLUE,
+    height: 2,
+    pointerEvents: 'none',
+    width: '100%',
+};
 const autoScrollThreshold = 70;
 const maxAutoScrollSpeed = 18;
 const getAutoScrollSpeed = ({ clientY, element, }) => {
@@ -105,6 +118,7 @@ const CompositionSelector = () => {
         setSelectedModal,
     ]);
     const [rootDragHovered, setRootDragHovered] = (0, react_1.useState)(false);
+    const activeDragRef = (0, react_1.useRef)(null);
     const listRef = (0, react_1.useRef)(null);
     const autoScrollAnimation = (0, react_1.useRef)(null);
     const autoScrollSpeed = (0, react_1.useRef)(0);
@@ -116,15 +130,6 @@ const CompositionSelector = () => {
             ? (0, create_folder_tree_1.sortFolderTreeAlphabetically)(tree)
             : tree;
     }, [compositionSortOrder, compositions, folders, foldersExpanded]);
-    const list = (0, react_1.useMemo)(() => {
-        return {
-            flex: 1,
-            overflowY: 'auto',
-            paddingTop: 4,
-            paddingBottom: 4,
-            backgroundColor: rootDragHovered ? colors_1.WHITE_ALPHA_12 : colors_1.BACKGROUND,
-        };
-    }, [rootDragHovered]);
     const toggleFolder = (0, react_1.useCallback)((folderName, parentName) => {
         var _a;
         (_a = remotion_1.Internals.compositionSelectorRef.current) === null || _a === void 0 ? void 0 : _a.toggleFolder(folderName, parentName);
@@ -166,7 +171,7 @@ const CompositionSelector = () => {
     }, [runCompositionListAutoScroll, stopCompositionListAutoScroll]);
     const onCompositionListDragOverCapture = (0, react_1.useCallback)((event) => {
         if (window.remotion_isReadOnlyStudio ||
-            (0, composition_drag_data_1.getCompositionDragPreviewMetadata)(event.dataTransfer.types) === null) {
+            !(0, composition_selector_drag_data_1.hasCompositionSelectorDragData)(event.dataTransfer.types)) {
             stopCompositionListAutoScroll();
             return;
         }
@@ -182,7 +187,12 @@ const CompositionSelector = () => {
     }, [stopCompositionListAutoScroll]);
     const onRootDragOver = (0, react_1.useCallback)((event) => {
         if (window.remotion_isReadOnlyStudio ||
-            (0, composition_drag_data_1.getCompositionDragPreviewMetadata)(event.dataTransfer.types) === null) {
+            !(0, composition_selector_drag_data_1.hasCompositionSelectorDragData)(event.dataTransfer.types)) {
+            return;
+        }
+        if (activeDragRef.current === null ||
+            activeDragRef.current.parentFolderPath === null) {
+            setRootDragHovered(false);
             return;
         }
         event.preventDefault();
@@ -202,31 +212,32 @@ const CompositionSelector = () => {
         if (window.remotion_isReadOnlyStudio) {
             return;
         }
-        const compositionDragData = (0, composition_drag_data_1.parseCompositionDragData)(event.dataTransfer);
-        if (compositionDragData === null) {
+        const dragData = (0, composition_selector_drag_data_1.parseCompositionSelectorDragData)(event.dataTransfer);
+        if (dragData === null) {
+            return;
+        }
+        if (activeDragRef.current === null ||
+            activeDragRef.current.parentFolderPath === null) {
+            event.stopPropagation();
+            setRootDragHovered(false);
             return;
         }
         event.preventDefault();
         event.stopPropagation();
         stopCompositionListAutoScroll();
         setRootDragHovered(false);
-        const composition = compositions.find((c) => c.id === compositionDragData.compositionId);
-        if (!composition || composition.folderName === null) {
-            return;
-        }
-        const notification = (0, NotificationCenter_1.showNotification)(`Moving ${compositionDragData.compositionId}...`, null);
+        const notification = (0, NotificationCenter_1.showNotification)(`Moving ${dragData.item.type === 'composition' ? dragData.item.compositionId : dragData.item.folderName}...`, null);
         const controller = new AbortController();
         try {
             const result = await (0, actions_1.applyCodemod)({
                 codemod: {
-                    type: 'move-composition-to-folder',
-                    idToMove: compositionDragData.compositionId,
-                    folderName: null,
-                    parentName: null,
+                    type: 'move-composition-or-folder',
+                    source: dragData.item,
+                    destination: { type: 'root' },
                 },
                 dryRun: false,
                 signal: controller.signal,
-                symbolicatedStack: (0, composition_drag_data_1.compositionDragDataToSymbolicatedStack)(compositionDragData),
+                symbolicatedStack: (0, composition_selector_drag_data_1.compositionSelectorDragDataToSymbolicatedStack)(dragData),
             });
             if (result.success) {
                 notification.dismiss();
@@ -238,13 +249,13 @@ const CompositionSelector = () => {
         catch (err) {
             notification.replaceContent(err instanceof Error ? err.message : String(err), 4000);
         }
-    }, [compositions, stopCompositionListAutoScroll]);
+    }, [stopCompositionListAutoScroll]);
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: listRef, getItems: getRootContextMenuItems }), jsx_runtime_1.jsx(ExplorerQuickSwitcherTrigger_1.ExplorerQuickSwitcherTrigger, { mode: "compositions", showShortcut: true, tabIndex: tabIndex, getActions: getRootContextMenuItems }), jsx_runtime_1.jsx("div", { ref: listRef, className: "__remotion-vertical-scrollbar", style: list, onDragOverCapture: onCompositionListDragOverCapture, onDragEndCapture: stopCompositionListAutoScroll, onDragOver: onRootDragOver, onDragLeave: onRootDragLeave, onDropCapture: stopCompositionListAutoScroll, onDrop: onRootDrop, children: items.map((c) => {
-                    return (jsx_runtime_1.jsx(CompositionSelectorItem_1.CompositionSelectorItem, { level: 0, currentComposition: canvasContent && canvasContent.type === 'composition'
-                            ? canvasContent.compositionId
-                            : null, selectComposition: selectComposition, toggleFolder: toggleFolder, clearRootDragHover: clearRootDragHover, tabIndex: tabIndex, item: c }, c.key + c.type));
-                }) })
+            jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: listRef, getItems: getRootContextMenuItems }), jsx_runtime_1.jsx(ExplorerQuickSwitcherTrigger_1.ExplorerQuickSwitcherTrigger, { mode: "compositions", showShortcut: true, tabIndex: tabIndex, getActions: getRootContextMenuItems }), jsx_runtime_1.jsxs("div", { ref: listRef, className: "__remotion-vertical-scrollbar", style: list, onDragOverCapture: onCompositionListDragOverCapture, onDragEndCapture: stopCompositionListAutoScroll, onDragOver: onRootDragOver, onDragLeave: onRootDragLeave, onDropCapture: stopCompositionListAutoScroll, onDrop: onRootDrop, children: [items.map((c, index) => {
+                        return (jsx_runtime_1.jsx(CompositionSelectorItem_1.CompositionSelectorItem, { level: 0, currentComposition: canvasContent && canvasContent.type === 'composition'
+                                ? canvasContent.compositionId
+                                : null, selectComposition: selectComposition, toggleFolder: toggleFolder, clearRootDragHover: clearRootDragHover, canReorder: compositionSortOrder === 'registration', tabIndex: tabIndex, item: c, activeDragRef: activeDragRef, parentFolderPath: null, previousSibling: index === 0 ? null : items[index - 1], nextSibling: index === items.length - 1 ? null : items[index + 1] }, c.key + c.type));
+                    }), rootDragHovered ? (jsx_runtime_1.jsx("div", { "data-composition-root-reorder-line": true, style: rootReorderLine })) : null] })
         ] }));
 };
 exports.CompositionSelector = CompositionSelector;

package/dist/components/CompositionSelectorItem.d.ts

@@ -1,5 +1,7 @@
+import type { MutableRefObject } from 'react';
 import React from 'react';
 import { type _InternalTypes } from 'remotion';
+import { type CompositionSelectorActiveDrag } from './composition-selector-drag-data';
 export type CompositionSelectorItemType = {
     key: string;
     type: 'composition';
@@ -20,5 +22,10 @@ export declare const CompositionSelectorItem: React.FC<{
     readonly selectComposition: (c: _InternalTypes['AnyComposition'], push: boolean) => void;
     readonly toggleFolder: (folderName: string, parentName: string | null) => void;
     readonly clearRootDragHover: () => void;
+    readonly canReorder: boolean;
     readonly level: number;
+    readonly activeDragRef: MutableRefObject<CompositionSelectorActiveDrag | null>;
+    readonly parentFolderPath: string | null;
+    readonly previousSibling: CompositionSelectorItemType | null;
+    readonly nextSibling: CompositionSelectorItemType | null;
 }>;