@remotion/studio 4.0.518 → 4.0.520

package/dist/components/Canvas.js

@@ -29,8 +29,8 @@ const editor_zoom_gestures_1 = require("../state/editor-zoom-gestures");
 const modals_1 = require("../state/modals");
 const call_api_1 = require("./call-api");
 const canvas_capture_drop_1 = require("./canvas-capture-drop");
+const composition_drag_data_1 = require("./composition-drag-data");
 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"));
 const EditorRuler_1 = require("./EditorRuler");
@@ -38,7 +38,6 @@ const use_is_ruler_visible_1 = require("./EditorRuler/use-is-ruler-visible");
 const effect_drag_and_drop_1 = require("./effect-drag-and-drop");
 const element_install_api_1 = require("./element-install-api");
 const element_install_request_1 = require("./element-install-request");
-const ElementInstallConfirmation_1 = require("./ElementInstallConfirmation");
 const handle_drop_1 = require("./handle-drop");
 const import_assets_1 = require("./import-assets");
 const layout_1 = require("./layout");
@@ -49,6 +48,19 @@ 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);
+    if (composition !== null) {
+        return {
+            ...composition,
+            width: (_a = composition.width) !== null && _a !== void 0 ? _a : undefined,
+            height: (_b = composition.height) !== null && _b !== void 0 ? _b : undefined,
+            durationInFrames: (_c = composition.durationInFrames) !== null && _c !== void 0 ? _c : undefined,
+        };
+    }
+    return studio_protocol_1.StudioProtocolInternals.getDragPreviewMetadata(mimeTypes);
+};
 const getContainerStyle = (editorZoomGestures) => ({
     flex: 1,
     display: 'flex',
@@ -127,7 +139,6 @@ const Canvas = ({ canvasContent, size }) => {
     const suppressWheelFromWebKitPinchRef = (0, react_1.useRef)(false);
     const touchPinchRef = (0, react_1.useRef)(null);
     const keybindings = (0, use_keybinding_1.useKeybinding)();
-    const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
     const chooseSvgImportMode = (0, SvgImportDialog_1.useSvgImportDialog)();
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const config = remotion_1.Internals.useUnsafeVideoConfig();
@@ -142,7 +153,6 @@ const Canvas = ({ canvasContent, size }) => {
         : 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);
     const lastFocusedAtRef = (0, react_1.useRef)(typeof document === 'undefined' || document.hasFocus() ? Date.now() : null);
@@ -162,12 +172,13 @@ const Canvas = ({ canvasContent, size }) => {
         compositionFile,
         compositionId: currentCompositionId,
     });
-    const canInstallElements = previewServerClientId !== null &&
+    const canReceiveElementInstallRequest = previewServerClientId !== null &&
         !window.remotion_isReadOnlyStudio &&
-        (compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence) === true &&
         currentCompositionId !== null &&
         compositionFile !== null;
-    const canDropAssets = canInstallElements && !isAddingAsset;
+    const canInsertIntoCurrentComposition = canReceiveElementInstallRequest &&
+        (compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence) === true;
+    const canDropAssets = canInsertIntoCurrentComposition && !isAddingAsset;
     const cannotAddSequence = (compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence) === false;
     const contentDimensions = (0, react_1.useMemo)(() => {
         if ((canvasContent.type === 'asset' ||
@@ -566,15 +577,18 @@ const Canvas = ({ canvasContent, size }) => {
         (0, call_api_1.callApi)('/api/update-element-install-target', {
             requestId,
             clientId: previewServerClientId,
-            compositionFile: canInstallElements ? compositionFile : null,
-            compositionId: canInstallElements ? currentCompositionId : null,
-            canInstall: canInstallElements,
+            compositionFile: canReceiveElementInstallRequest
+                ? compositionFile
+                : null,
+            compositionId: canReceiveElementInstallRequest
+                ? currentCompositionId
+                : null,
             lastFocusedAt: lastFocusedAtRef.current,
             readOnly: window.remotion_isReadOnlyStudio,
             studioUrl: window.location.href,
         }).catch(() => undefined);
     }, [
-        canInstallElements,
+        canReceiveElementInstallRequest,
         compositionFile,
         currentCompositionId,
         previewServerClientId,
@@ -598,16 +612,6 @@ const Canvas = ({ canvasContent, size }) => {
             updateElementInstallTarget(event.requestId);
         });
     }, [subscribeToEvent, updateElementInstallTarget]);
-    (0, react_1.useEffect)(() => {
-        if (installingElementName === null) {
-            return;
-        }
-        const previousTitle = document.title;
-        document.title = `📦 Install ${installingElementName} - Remotion Studio`;
-        return () => {
-            document.title = previousTitle;
-        };
-    }, [installingElementName]);
     (0, react_1.useEffect)(() => {
         if (previewServerClientId === null) {
             return;
@@ -617,21 +621,31 @@ const Canvas = ({ canvasContent, size }) => {
                 event.request.clientId !== previewServerClientId) {
                 return;
             }
-            setPendingElementInstallRequests((requests) => [
-                ...requests,
-                event.request,
-            ]);
+            (0, element_install_request_1.enqueueElementInstallRequest)(event.request);
         });
     }, [previewServerClientId, subscribeToEvent]);
     (0, react_1.useEffect)(() => {
         return (0, element_install_request_1.subscribeToElementInstallRequests)((request) => {
-            setPendingElementInstallRequests((requests) => [...requests, request]);
+            const requestWithFrom = request.source.type === 'drag-and-drop' || request.from !== null
+                ? request
+                : {
+                    ...request,
+                    from: (0, import_assets_1.getFromForDrop)({
+                        durationInFrames: request.element.durationInFrames,
+                        from: (0, imperative_state_1.getCurrentFrame)(),
+                        preferCompositionStart: true,
+                    }),
+                };
+            setPendingElementInstallRequests((requests) => [
+                ...requests,
+                requestWithFrom,
+            ]);
         });
     }, []);
     (0, react_1.useEffect)(() => {
         var _a;
         var _b;
-        if (!canInstallElements ||
+        if (!canReceiveElementInstallRequest ||
             compositionFile === null ||
             currentCompositionId === null) {
             return;
@@ -654,7 +668,7 @@ const Canvas = ({ canvasContent, size }) => {
                 type: 'browser-studio-link',
             },
         });
-    }, [canInstallElements, compositionFile, currentCompositionId]);
+    }, [canReceiveElementInstallRequest, compositionFile, currentCompositionId]);
     (0, react_1.useEffect)(() => {
         if (activeElementInstallRequest !== null ||
             pendingElementInstallRequests.length === 0) {
@@ -667,6 +681,10 @@ const Canvas = ({ canvasContent, size }) => {
         setActiveElementInstallRequest(nextRequest);
         setPendingElementInstallRequests(remainingRequests);
     }, [activeElementInstallRequest, pendingElementInstallRequests]);
+    const closeElementInstallDialog = (0, react_1.useCallback)(() => {
+        setSelectedModal(null);
+        setActiveElementInstallRequest(null);
+    }, [setSelectedModal]);
     (0, react_1.useEffect)(() => {
         if (activeElementInstallRequest === null) {
             return;
@@ -674,74 +692,81 @@ const Canvas = ({ canvasContent, size }) => {
         let canceled = false;
         const handleInstallRequest = async () => {
             var _a;
-            setInstallingElementName(activeElementInstallRequest.element.displayName);
-            const preflight = await (0, element_install_api_1.prepareElementInstall)({
-                compositionFile: activeElementInstallRequest.compositionFile,
-                compositionId: activeElementInstallRequest.compositionId,
-                element: activeElementInstallRequest.element,
-            });
-            if (!preflight.success) {
-                (0, NotificationCenter_1.showNotification)(`Could not review Element installation: ${preflight.reason}`, 4000);
-                return;
-            }
-            if (canceled) {
-                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
-                ? dependency.name
-                : `${dependency.name}@${dependency.version}`);
-            const { source } = activeElementInstallRequest;
-            const sourceLabel = source.type === 'studio-protocol'
-                ? source.origin
-                : source.type === 'browser-studio-link'
-                    ? ((_a = source.origin) !== null && _a !== void 0 ? _a : 'Unverified Browser Studio link')
-                    : 'Unverified drag-and-drop payload';
-            const sourceIsUnverified = source.type === 'drag-and-drop' ||
-                (source.type === 'browser-studio-link' && source.origin === null);
-            const accepted = await confirm({
-                title: 'Install Element',
-                message: (jsx_runtime_1.jsx(ElementInstallConfirmation_1.ElementInstallConfirmation, { displayName: activeElementInstallRequest.element.displayName, sourceLabel: sourceLabel, sourceIsUnverified: sourceIsUnverified, compositionId: activeElementInstallRequest.compositionId, filePath: preflight.plan.filePath, overwritesExistingFile: preflight.plan.expectedFileState.exists, dependenciesToReview: dependenciesToReview, missingPackages: missingPackages, sourceCode: activeElementInstallRequest.element.sourceCode, usesBrowserDependencyResolution: (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null })),
-                confirmLabel: 'Install',
-                cancelLabel: 'Cancel',
-            });
-            if (accepted && !canceled) {
-                await (0, import_assets_1.insertElement)({
-                    element: activeElementInstallRequest.element,
-                    compositionFile: activeElementInstallRequest.compositionFile,
-                    compositionId: activeElementInstallRequest.compositionId,
-                    expectedFileState: preflight.plan.expectedFileState,
-                    from: activeElementInstallRequest.from,
-                    position: activeElementInstallRequest.position,
-                    overwriteExisting: preflight.plan.expectedFileState.exists,
+            try {
+                const [newPreflight, currentPreflight] = await Promise.all([
+                    (0, element_install_api_1.prepareElementInstall)({
+                        destination: {
+                            type: 'new-composition',
+                            compositionFile: null,
+                        },
+                        element: activeElementInstallRequest.element,
+                    }),
+                    (0, element_install_api_1.prepareElementInstall)({
+                        destination: {
+                            type: 'current-composition',
+                            compositionFile: activeElementInstallRequest.compositionFile,
+                            compositionId: activeElementInstallRequest.compositionId,
+                        },
+                        element: activeElementInstallRequest.element,
+                    }),
+                ]);
+                if (canceled) {
+                    return;
+                }
+                if (!newPreflight.success) {
+                    (0, NotificationCenter_1.showNotification)(`Could not review Element installation: ${newPreflight.reason}`, 4000);
+                    setActiveElementInstallRequest(null);
+                    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
+                    ? dependency.name
+                    : `${dependency.name}@${dependency.version}`);
+                const { source } = activeElementInstallRequest;
+                const sourceLabel = source.type === 'studio-protocol'
+                    ? source.origin
+                    : source.type === 'browser-studio-link'
+                        ? ((_a = source.origin) !== null && _a !== void 0 ? _a : 'Unverified Browser Studio link')
+                        : 'Unverified drag-and-drop payload';
+                const sourceIsUnverified = source.type === 'drag-and-drop' ||
+                    (source.type === 'browser-studio-link' && source.origin === null);
+                const currentPlan = currentPreflight.success
+                    ? currentPreflight.plan
+                    : null;
+                setSelectedModal({
+                    type: 'element-install',
+                    currentPlan,
+                    dependenciesToReview,
+                    missingPackages,
+                    newPlan: newPreflight.plan,
+                    onClose: closeElementInstallDialog,
+                    request: activeElementInstallRequest,
+                    sourceIsUnverified,
+                    sourceLabel,
                 });
             }
-        };
-        handleInstallRequest()
-            .finally(() => {
-            if (canceled) {
-                return;
+            catch (error) {
+                if (canceled) {
+                    return;
+                }
+                (0, NotificationCenter_1.showNotification)(`Could not review Element installation: ${error instanceof Error ? error.message : String(error)}`, 4000);
+                setActiveElementInstallRequest(null);
             }
-            setInstallingElementName(null);
-            setActiveElementInstallRequest(null);
-        })
-            .catch((err) => {
-            setTimeout(() => {
-                throw err;
-            }, 0);
-        });
+        };
+        handleInstallRequest();
         return () => {
             canceled = true;
         };
-    }, [activeElementInstallRequest, confirm]);
+    }, [
+        activeElementInstallRequest,
+        closeElementInstallDialog,
+        setSelectedModal,
+    ]);
     const onDragOver = (0, react_1.useCallback)((event) => {
         var _a;
         var _b;
@@ -765,7 +790,7 @@ const Canvas = ({ canvasContent, size }) => {
             setCompositionDropPreview(null);
             return;
         }
-        const metadata = studio_protocol_1.StudioProtocolInternals.getDragPreviewMetadata((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []);
+        const metadata = getCanvasDragPreviewMetadata((_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 === null || metadata === void 0 ? void 0 : metadata.type) !== 'element') ||
             metadata.width === undefined ||
             metadata.height === undefined) {
@@ -896,7 +921,7 @@ const Canvas = ({ canvasContent, size }) => {
         event.stopPropagation();
         setIsAddingAsset(true);
         try {
-            const metadata = studio_protocol_1.StudioProtocolInternals.getDragPreviewMetadata((_d = (_b = event.dataTransfer) === null || _b === void 0 ? void 0 : _b.types) !== null && _d !== void 0 ? _d : []);
+            const metadata = getCanvasDragPreviewMetadata((_d = (_b = event.dataTransfer) === null || _b === void 0 ? void 0 : _b.types) !== null && _d !== void 0 ? _d : []);
             const isComposition = (metadata === null || metadata === void 0 ? void 0 : metadata.type) === 'composition';
             let dropPosition = getDropPosition({
                 addFitPadding,

package/dist/components/CanvasOrLoading.js

@@ -47,7 +47,7 @@ const CanvasOrLoading = ({ size }) => {
         });
     }, [resolved, setZoom]);
     if (renderError) {
-        return (jsx_runtime_1.jsx(ErrorLoading, { error: renderError, calculateMetadataContext: false }));
+        return (jsx_runtime_1.jsx(ErrorLoading, { error: renderError, calculateMetadataContext: false, onRetry: null }));
     }
     if (!canvasContent) {
         if (compositionListState !== 'ready') {
@@ -71,7 +71,10 @@ const CanvasOrLoading = ({ size }) => {
         return (jsx_runtime_1.jsx("div", { style: container, className: "css-reset", children: jsx_runtime_1.jsx(RunningCalculateMetadata_1.RunningCalculateMetadata, {}) }));
     }
     if (resolved.type === 'error') {
-        return jsx_runtime_1.jsx(ErrorLoading, { error: resolved.error, calculateMetadataContext: true });
+        return (jsx_runtime_1.jsx(ErrorLoading, { error: resolved.error, calculateMetadataContext: true, onRetry: () => {
+                var _a;
+                return (_a = remotion_1.Internals.resolveCompositionsRef.current) === null || _a === void 0 ? void 0 : _a.reloadCurrentlySelectedComposition();
+            } }));
     }
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx(FramePersistor_1.FramePersistor, {}),
@@ -86,9 +89,6 @@ const loaderContainer = {
     height: '100%',
     overflowY: 'auto',
 };
-const ErrorLoading = ({ error, calculateMetadataContext }) => {
-    return (jsx_runtime_1.jsx("div", { style: loaderContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ErrorLoader_1.ErrorLoader, { canHaveDismissButton: false, keyboardShortcuts: true, error: error, onRetry: () => {
-                var _a;
-                return (_a = remotion_1.Internals.resolveCompositionsRef.current) === null || _a === void 0 ? void 0 : _a.reloadCurrentlySelectedComposition();
-            }, calculateMetadata: calculateMetadataContext }, error.stack) }));
+const ErrorLoading = ({ error, calculateMetadataContext, onRetry }) => {
+    return (jsx_runtime_1.jsx("div", { style: loaderContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ErrorLoader_1.ErrorLoader, { canHaveDismissButton: false, keyboardShortcuts: true, error: error, onRetry: onRetry, calculateMetadata: calculateMetadataContext }, error.stack) }));
 };

package/dist/components/CodingAgentButton.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const CodingAgentButton: React.FC<{
+    readonly label: 'Fix with' | 'Open in';
+    readonly prompt: string;
+    readonly size: 'compact' | 'default';
+    readonly style: React.CSSProperties | null;
+}>;

package/dist/components/CodingAgentButton.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodingAgentButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const open_in_editor_1 = require("../helpers/open-in-editor");
+const AppLaunchButton_1 = require("./AppLaunchButton");
+const CodingAgentIcon_1 = require("./CodingAgentIcon");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const SettingsContext_1 = require("./SettingsContext");
+const use_configure_default_apps_1 = require("./use-configure-default-apps");
+const menuLabel = {
+    color: 'inherit',
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    lineHeight: '16px',
+};
+const CodingAgentButton = ({ label, prompt, size, style }) => {
+    var _a, _b;
+    const { codingAgentInfo } = (0, SettingsContext_1.useSettings)();
+    const configureDefaultApps = (0, use_configure_default_apps_1.useConfigureDefaultApps)();
+    const installedCodingAgents = (_a = codingAgentInfo === null || codingAgentInfo === void 0 ? void 0 : codingAgentInfo.installedCodingAgents) !== null && _a !== void 0 ? _a : [];
+    const defaultCodingAgent = (_b = installedCodingAgents.find((agent) => agent.id === (codingAgentInfo === null || codingAgentInfo === void 0 ? void 0 : codingAgentInfo.defaultCodingAgent))) !== null && _b !== void 0 ? _b : installedCodingAgents[0];
+    const alternativeCodingAgents = installedCodingAgents.filter((agent) => agent.id !== (defaultCodingAgent === null || defaultCodingAgent === void 0 ? void 0 : defaultCodingAgent.id));
+    const openWithCodingAgent = (0, react_1.useCallback)(async (codingAgentId, codingAgentName) => {
+        try {
+            const response = await (0, open_in_editor_1.openInCodingAgent)(codingAgentId, codingAgentId === 'copilot' ? null : prompt);
+            if (!response.success) {
+                (0, NotificationCenter_1.showNotification)(`Could not open ${codingAgentName}`, 2000);
+            }
+        }
+        catch (err) {
+            (0, NotificationCenter_1.showNotification)(err.message, 2000);
+        }
+    }, [prompt]);
+    const agentMenuItems = (0, react_1.useMemo)(() => {
+        return alternativeCodingAgents.map((codingAgent) => ({
+            id: `open-in-${codingAgent.id}`,
+            keyHint: null,
+            label: jsx_runtime_1.jsx("span", { style: menuLabel, children: codingAgent.name }),
+            leftItem: jsx_runtime_1.jsx(CodingAgentIcon_1.CodingAgentIcon, { codingAgentId: codingAgent.id, size: 18 }),
+            onClick: () => {
+                openWithCodingAgent(codingAgent.id, codingAgent.nameWithType).catch(() => undefined);
+            },
+            quickSwitcherLabel: null,
+            subMenu: null,
+            type: 'item',
+            value: `coding-agent-${codingAgent.id}`,
+        }));
+    }, [alternativeCodingAgents, openWithCodingAgent]);
+    if (!defaultCodingAgent) {
+        return null;
+    }
+    return (jsx_runtime_1.jsxs(AppLaunchButton_1.AppLaunchButton, { actionButtonId: null, ariaLabel: `${label} ${defaultCodingAgent.nameWithType}`, disabled: false, menuAriaLabel: `${label} another coding agent`, menuButtonId: null, menuItems: agentMenuItems, onConfigureApps: configureDefaultApps, onClick: () => {
+            openWithCodingAgent(defaultCodingAgent.id, defaultCodingAgent.nameWithType).catch(() => undefined);
+        }, size: size, style: style, title: `${label} ${defaultCodingAgent.nameWithType}`, children: [
+            jsx_runtime_1.jsx(CodingAgentIcon_1.CodingAgentIcon, { codingAgentId: defaultCodingAgent.id, size: size === 'default' ? 14 : 18 }), label, " ", defaultCodingAgent.name] }));
+};
+exports.CodingAgentButton = CodingAgentButton;

package/dist/components/CompositionContextButton.d.ts

@@ -3,4 +3,5 @@ import type { ComboboxValue } from './NewComposition/ComboBox';
 export declare const CompositionContextButton: React.FC<{
     readonly visible: boolean;
     readonly getItems: () => ComboboxValue[];
+    readonly readOnlyStudio: boolean;
 }>;

package/dist/components/CompositionContextButton.js

@@ -7,7 +7,10 @@ const client_id_1 = require("../helpers/client-id");
 const hoverable_1 = require("../helpers/hoverable");
 const ellipsis_1 = require("../icons/ellipsis");
 const InlineDropdown_1 = require("./InlineDropdown");
-const CompositionContextButton = ({ visible, getItems }) => {
+const revealStyle = {
+    display: 'flex',
+};
+const CompositionContextButton = ({ visible, getItems, readOnlyStudio }) => {
     const iconStyle = (0, react_1.useMemo)(() => {
         return {
             style: {
@@ -20,9 +23,9 @@ const CompositionContextButton = ({ visible, getItems }) => {
     const renderAction = (0, react_1.useCallback)((color) => {
         return jsx_runtime_1.jsx(ellipsis_1.EllipsisIcon, { fill: color, svgProps: iconStyle });
     }, [iconStyle]);
-    if (!visible || connectionStatus !== 'connected') {
+    if (!visible || (connectionStatus !== 'connected' && !readOnlyStudio)) {
         return null;
     }
-    return (jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { renderAction: renderAction, getItems: getItems, variant: null, style: hoverable_1.NO_HOVER_BACKGROUND_STYLE, className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME }));
+    return (jsx_runtime_1.jsx("div", { className: hoverable_1.HOVER_GROUP_REVEAL_CLASS_NAME, style: revealStyle, children: jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { renderAction: renderAction, getItems: getItems, variant: null, style: hoverable_1.NO_HOVER_BACKGROUND_STYLE, className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME }) }));
 };
 exports.CompositionContextButton = CompositionContextButton;

package/dist/components/CompositionSelector.js

@@ -2,17 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CompositionSelector = exports.useCompositionNavigation = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const studio_protocol_1 = require("@remotion/studio-protocol");
-const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const create_folder_tree_1 = require("../helpers/create-folder-tree");
 const persist_open_folders_1 = require("../helpers/persist-open-folders");
-const sort_by_nonce_history_1 = require("../helpers/sort-by-nonce-history");
+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 CompositionSelectorItem_1 = require("./CompositionSelectorItem");
 const ContextMenu_1 = require("./ContextMenu");
 const InitialCompositionLoader_1 = require("./InitialCompositionLoader");
@@ -87,6 +86,7 @@ const getAutoScrollSpeed = ({ clientY, element, }) => {
 const CompositionSelector = () => {
     const { compositions, canvasContent, folders } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { foldersExpanded } = (0, react_1.useContext)(persist_open_folders_1.ExpandedFoldersContext);
+    const { compositionSortOrder, setCompositionSortOrder } = (0, react_1.useContext)(folders_1.FolderContext);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
         .previewServerState.type;
@@ -95,23 +95,27 @@ const CompositionSelector = () => {
             connectionStatus,
             readOnlyStudio: window.remotion_isReadOnlyStudio,
             setSelectedModal,
+            compositionSortOrder,
+            setCompositionSortOrder,
         });
-    }, [connectionStatus, setSelectedModal]);
+    }, [
+        compositionSortOrder,
+        connectionStatus,
+        setCompositionSortOrder,
+        setSelectedModal,
+    ]);
     const [rootDragHovered, setRootDragHovered] = (0, react_1.useState)(false);
     const listRef = (0, react_1.useRef)(null);
     const autoScrollAnimation = (0, react_1.useRef)(null);
     const autoScrollSpeed = (0, react_1.useRef)(0);
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
-    const sortedCompositions = (0, react_1.useMemo)(() => {
-        return (0, sort_by_nonce_history_1.sortItemsByNonceHistory)(compositions);
-    }, [compositions]);
-    const sortedFolders = (0, react_1.useMemo)(() => {
-        return (0, sort_by_nonce_history_1.sortItemsByNonceHistory)(folders);
-    }, [folders]);
     const items = (0, react_1.useMemo)(() => {
-        return (0, create_folder_tree_1.createFolderTree)(sortedCompositions, sortedFolders, foldersExpanded);
-    }, [sortedCompositions, sortedFolders, foldersExpanded]);
+        const tree = (0, create_folder_tree_1.createFolderTree)(compositions, folders, foldersExpanded);
+        return compositionSortOrder === 'alphabetical'
+            ? (0, create_folder_tree_1.sortFolderTreeAlphabetically)(tree)
+            : tree;
+    }, [compositionSortOrder, compositions, folders, foldersExpanded]);
     const list = (0, react_1.useMemo)(() => {
         return {
             flex: 1,
@@ -161,9 +165,8 @@ const CompositionSelector = () => {
         }
     }, [runCompositionListAutoScroll, stopCompositionListAutoScroll]);
     const onCompositionListDragOverCapture = (0, react_1.useCallback)((event) => {
-        var _a;
         if (window.remotion_isReadOnlyStudio ||
-            ((_a = studio_protocol_1.StudioProtocolInternals.getDragPreviewMetadata(event.dataTransfer.types)) === null || _a === void 0 ? void 0 : _a.type) !== 'composition') {
+            (0, composition_drag_data_1.getCompositionDragPreviewMetadata)(event.dataTransfer.types) === null) {
             stopCompositionListAutoScroll();
             return;
         }
@@ -178,9 +181,8 @@ const CompositionSelector = () => {
         return stopCompositionListAutoScroll;
     }, [stopCompositionListAutoScroll]);
     const onRootDragOver = (0, react_1.useCallback)((event) => {
-        var _a;
         if (window.remotion_isReadOnlyStudio ||
-            ((_a = studio_protocol_1.StudioProtocolInternals.getDragPreviewMetadata(event.dataTransfer.types)) === null || _a === void 0 ? void 0 : _a.type) !== 'composition') {
+            (0, composition_drag_data_1.getCompositionDragPreviewMetadata)(event.dataTransfer.types) === null) {
             return;
         }
         event.preventDefault();
@@ -200,11 +202,10 @@ const CompositionSelector = () => {
         if (window.remotion_isReadOnlyStudio) {
             return;
         }
-        const parsed = studio_protocol_1.StudioProtocolInternals.parseDragData(event.dataTransfer);
-        if ((parsed === null || parsed === void 0 ? void 0 : parsed.type) !== 'composition') {
+        const compositionDragData = (0, composition_drag_data_1.parseCompositionDragData)(event.dataTransfer);
+        if (compositionDragData === null) {
             return;
         }
-        const compositionDragData = parsed.data;
         event.preventDefault();
         event.stopPropagation();
         stopCompositionListAutoScroll();
@@ -225,7 +226,7 @@ const CompositionSelector = () => {
                 },
                 dryRun: false,
                 signal: controller.signal,
-                symbolicatedStack: (0, studio_shared_1.compositionDragDataToSymbolicatedStack)(compositionDragData),
+                symbolicatedStack: (0, composition_drag_data_1.compositionDragDataToSymbolicatedStack)(compositionDragData),
             });
             if (result.success) {
                 notification.dismiss();