@remotion/studio 4.0.517 → 4.0.519

package/dist/components/Canvas.js

@@ -30,7 +30,6 @@ const modals_1 = require("../state/modals");
 const call_api_1 = require("./call-api");
 const canvas_capture_drop_1 = require("./canvas-capture-drop");
 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");
@@ -127,7 +126,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();
@@ -145,6 +143,7 @@ const Canvas = ({ canvasContent, size }) => {
     const [installingElementName, setInstallingElementName] = (0, react_1.useState)(null);
     const [pendingElementInstallRequests, setPendingElementInstallRequests] = (0, react_1.useState)([]);
     const [activeElementInstallRequest, setActiveElementInstallRequest] = (0, react_1.useState)(null);
+    const [elementInstallReview, setElementInstallReview] = (0, react_1.useState)(null);
     const lastFocusedAtRef = (0, react_1.useRef)(typeof document === 'undefined' || document.hasFocus() ? Date.now() : null);
     const [assetResolution, setAssetResolution] = (0, react_1.useState)(null);
     const metadataRequestRef = (0, react_1.useRef)(0);
@@ -162,12 +161,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 +566,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,
@@ -617,21 +620,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 +667,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) {
@@ -675,73 +688,82 @@ const Canvas = ({ canvasContent, size }) => {
         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);
+                    setInstallingElementName(null);
+                    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(null);
+                setElementInstallReview({
+                    currentPlan,
+                    dependenciesToReview,
+                    missingPackages,
+                    newPlan: newPreflight.plan,
+                    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);
+                setInstallingElementName(null);
+                setActiveElementInstallRequest(null);
             }
-            setInstallingElementName(null);
-            setActiveElementInstallRequest(null);
-        })
-            .catch((err) => {
-            setTimeout(() => {
-                throw err;
-            }, 0);
-        });
+        };
+        handleInstallRequest();
         return () => {
             canceled = true;
         };
-    }, [activeElementInstallRequest, confirm]);
+    }, [activeElementInstallRequest, setSelectedModal]);
+    const closeElementInstallDialog = (0, react_1.useCallback)(() => {
+        setElementInstallReview(null);
+        setInstallingElementName(null);
+        setActiveElementInstallRequest(null);
+    }, []);
     const onDragOver = (0, react_1.useCallback)((event) => {
         var _a;
         var _b;
@@ -1100,6 +1122,15 @@ const Canvas = ({ canvasContent, size }) => {
         };
     }, [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, 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, { canCreateGuides: canvasContent.type === 'composition', 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, { canCreateGuides: canvasContent.type === 'composition', contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution, containerRef: canvas_ref_1.canvasRef })), activeElementInstallRequest === null ||
+                elementInstallReview === null ? null : (jsx_runtime_1.jsx(ElementInstallConfirmation_1.ElementInstallConfirmation, { currentCompositionMetadata: config === null ||
+                    currentCompositionId !== activeElementInstallRequest.compositionId
+                    ? null
+                    : {
+                        durationInFrames: config.durationInFrames,
+                        fps: config.fps,
+                        height: config.height,
+                        width: config.width,
+                    }, currentPlan: elementInstallReview.currentPlan, dependenciesToReview: elementInstallReview.dependenciesToReview, missingPackages: elementInstallReview.missingPackages, newPlan: elementInstallReview.newPlan, onClose: closeElementInstallDialog, request: activeElementInstallRequest, sourceIsUnverified: elementInstallReview.sourceIsUnverified, sourceLabel: elementInstallReview.sourceLabel, usesBrowserDependencyResolution: (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null }))] }));
 };
 exports.Canvas = Canvas;

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/CaptionTextEditor.js

@@ -4,6 +4,9 @@ exports.CaptionTextEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
+const hoverable_1 = require("../helpers/hoverable");
+const enter_1 = require("../icons/enter");
+const InlineAction_1 = require("./InlineAction");
 const RemInput_1 = require("./NewComposition/RemInput");
 const container = {
     alignSelf: 'stretch',
@@ -21,8 +24,8 @@ const row = {
     alignItems: 'center',
     borderBottom: `1px solid ${colors_1.LINE_COLOR}`,
     display: 'grid',
-    gap: 12,
-    gridTemplateColumns: '100px minmax(0, 1fr)',
+    gap: 8,
+    gridTemplateColumns: '100px minmax(0, 1fr) 24px',
     padding: '5px 12px',
 };
 const timing = {
@@ -77,18 +80,33 @@ const CaptionTextEditor = ({ captions, onChange, onSave, onCancel, readOnly }) =
     (0, react_1.useEffect)(() => {
         return commitPending;
     }, [commitPending]);
-    const updateText = (0, react_1.useCallback)((index, text) => {
-        var _a;
-        if (((_a = latestRef.current.captions[index]) === null || _a === void 0 ? void 0 : _a.text) === text) {
+    const updateCaption = (0, react_1.useCallback)((index, changes) => {
+        const currentCaption = latestRef.current.captions[index];
+        if (!currentCaption) {
             return;
         }
         const nextCaptions = latestRef.current.captions.map((caption, captionIndex) => {
-            return captionIndex === index ? { ...caption, text } : caption;
+            return captionIndex === index ? { ...caption, ...changes } : caption;
         });
         latestRef.current.captions = nextCaptions;
         dirtyRef.current = true;
         onChange(nextCaptions);
     }, [onChange]);
+    const updateText = (0, react_1.useCallback)((index, text) => {
+        var _a;
+        if (((_a = latestRef.current.captions[index]) === null || _a === void 0 ? void 0 : _a.text) === text) {
+            return;
+        }
+        updateCaption(index, { text });
+    }, [updateCaption]);
+    const updatePageBreakAfter = (0, react_1.useCallback)((index, pageBreakAfter) => {
+        var _a;
+        if (Boolean((_a = latestRef.current.captions[index]) === null || _a === void 0 ? void 0 : _a.pageBreakAfter) ===
+            pageBreakAfter) {
+            return;
+        }
+        updateCaption(index, { pageBreakAfter });
+    }, [updateCaption]);
     const focusSibling = (0, react_1.useCallback)((index) => {
         var _a;
         const input = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-caption-index="${index}"]`);
@@ -96,6 +114,10 @@ const CaptionTextEditor = ({ captions, onChange, onSave, onCancel, readOnly }) =
         input === null || input === void 0 ? void 0 : input.scrollIntoView({ block: 'nearest' });
     }, []);
     return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsxs("div", { ref: listRef, style: list, children: [captions.length === 0 ? jsx_runtime_1.jsx("div", { style: empty, children: "No captions" }) : null, captionRows.map(({ caption, key }, index) => {
+                    const hasPageBreakAfter = Boolean(caption.pageBreakAfter);
+                    const pageBreakTitle = hasPageBreakAfter
+                        ? `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) => {
                                     if (cancelledBlurIndexes.current.delete(index)) {
@@ -125,8 +147,10 @@ const CaptionTextEditor = ({ captions, onChange, onSave, onCancel, readOnly }) =
                                     fontFamily: 'sans-serif',
                                     fontSize: 12,
                                     lineHeight: '16px',
-                                }, value: caption.text })
-                        ] }, key));
+                                }, value: caption.text }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { "aria-pressed": hasPageBreakAfter, className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME, disabled: readOnly, onClick: () => {
+                                    updatePageBreakAfter(index, !hasPageBreakAfter);
+                                    commitPending();
+                                }, renderAction: (color) => (jsx_runtime_1.jsx(enter_1.EnterIcon, { "aria-hidden": "true", color: hasPageBreakAfter ? colors_1.BLUE : color, focusable: "false", style: { height: 16, width: 16 } })), title: pageBreakTitle, variant: null })] }, key));
                 })] }) }));
 };
 exports.CaptionTextEditor = CaptionTextEditor;

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

@@ -4,9 +4,13 @@ exports.CompositionContextButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 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: {
@@ -19,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 }));
+    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

@@ -10,7 +10,7 @@ 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 CompositionSelectorItem_1 = require("./CompositionSelectorItem");
@@ -87,6 +87,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 +96,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,
@@ -239,7 +244,7 @@ const CompositionSelector = () => {
         }
     }, [compositions, 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 }), 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) => {
+            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));