@remotion/studio 4.0.517 → 4.0.519

package/dist/components/composition-menu-items.js

@@ -7,10 +7,16 @@ const open_in_editor_1 = require("../helpers/open-in-editor");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const open_in_new_window_1 = require("./open-in-new-window");
 const getCompositionMenuItems = ({ composition, connectionStatus, resolvedLocation, setSelectedModal, closeMenu, readOnlyStudio, includeCompositionManagementItems, editorId, editorName, }) => {
+    var _a;
     const fileLocation = (0, format_file_location_1.formatFileLocation)({
         location: resolvedLocation,
         root: window.remotion_cwd,
     });
+    const contextForAgents = (0, format_file_location_1.formatContextForAgents)({
+        location: resolvedLocation,
+        name: (_a = composition === null || composition === void 0 ? void 0 : composition.id) !== null && _a !== void 0 ? _a : null,
+        root: window.remotion_cwd,
+    });
     const showInEditorDisabled = !editorId ||
         !composition ||
         connectionStatus !== 'connected' ||
@@ -154,6 +160,26 @@ const getCompositionMenuItems = ({ composition, connectionStatus, resolvedLocati
                 id: 'copy-actions-divider',
             }
             : null,
+        {
+            id: 'copy-context-for-agents',
+            keyHint: null,
+            label: `Copy context for agents`,
+            leftItem: null,
+            onClick: () => {
+                closeMenu();
+                if (!contextForAgents) {
+                    return;
+                }
+                navigator.clipboard.writeText(contextForAgents).catch((err) => {
+                    (0, NotificationCenter_1.showNotification)(`Could not copy to clipboard: ${err.message}`, 1000);
+                });
+            },
+            quickSwitcherLabel: null,
+            subMenu: null,
+            type: 'item',
+            value: 'copy-context-for-agents',
+            disabled: !contextForAgents,
+        },
         {
             id: 'copy-file-location',
             keyHint: null,

package/dist/components/get-open-in-menu-items.d.ts

@@ -2,6 +2,10 @@ import type { TerminalId } from '@remotion/studio-shared';
 import type { EditorPickerId, GetDefaultCodingAgentInfoResponse, GetDefaultEditorInfoResponse } from '@remotion/studio-shared';
 import type { OriginalPosition } from '../error-overlay/react-overlay/utils/get-source-map';
 import type { ComboboxValue } from './NewComposition/ComboBox';
+export declare const getConfigureDefaultAppsMenuItems: ({ hasPreviousItems, onConfigureApps, }: {
+    readonly hasPreviousItems: boolean;
+    readonly onConfigureApps: (() => void) | null;
+}) => ComboboxValue[];
 export declare const getOpenInMenuItems: ({ codingAgentInfo, editorDisabled, editorInfo, excludeCodingAgentId, excludeEditorId, fileManagerDisabled, folder, location, onConfigureApps, onOpenInCodingAgent, onOpenInEditor, onOpenInFileExplorer, onOpenInGitClient, onOpenInTerminal, }: {
     readonly codingAgentInfo: GetDefaultCodingAgentInfoResponse | null;
     readonly editorDisabled: boolean;

package/dist/components/get-open-in-menu-items.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getOpenInMenuItems = void 0;
+exports.getOpenInMenuItems = exports.getConfigureDefaultAppsMenuItems = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const no_react_1 = require("remotion/no-react");
 const get_file_manager_name_1 = require("../helpers/get-file-manager-name");
@@ -17,6 +17,28 @@ const menuLabel = {
     fontSize: 13,
     lineHeight: '16px',
 };
+const getConfigureDefaultAppsMenuItems = ({ hasPreviousItems, onConfigureApps, }) => {
+    if (!onConfigureApps) {
+        return [];
+    }
+    return [
+        ...(hasPreviousItems
+            ? [{ type: 'divider', id: 'open-in-settings-divider' }]
+            : []),
+        {
+            id: 'change-default-apps',
+            keyHint: null,
+            label: jsx_runtime_1.jsx("span", { style: menuLabel, children: "Configure default apps..." }),
+            leftItem: null,
+            onClick: onConfigureApps,
+            quickSwitcherLabel: null,
+            subMenu: null,
+            type: 'item',
+            value: 'change-default-apps',
+        },
+    ];
+};
+exports.getConfigureDefaultAppsMenuItems = getConfigureDefaultAppsMenuItems;
 const getOpenInMenuItems = ({ codingAgentInfo, editorDisabled, editorInfo, excludeCodingAgentId, excludeEditorId, fileManagerDisabled, folder, location, onConfigureApps, onOpenInCodingAgent, onOpenInEditor, onOpenInFileExplorer, onOpenInGitClient, onOpenInTerminal, }) => {
     var _a, _b, _c, _d;
     const showFinder = window.remotion_fileSystemPlatform === 'darwin';
@@ -61,13 +83,7 @@ const getOpenInMenuItems = ({ codingAgentInfo, editorDisabled, editorInfo, exclu
             label: jsx_runtime_1.jsx("span", { style: menuLabel, children: "GitHub.com" }),
             leftItem: jsx_runtime_1.jsx(github_1.GitHubIcon, { size: 18 }),
             onClick: () => {
-                const gitSource = window.remotion_gitSource;
-                if (!gitSource) {
-                    return;
-                }
-                window.open(folder || !location
-                    ? (0, get_git_menu_item_1.getGitSourceBranchUrl)(gitSource)
-                    : (0, get_git_menu_item_1.getGitRefUrl)(gitSource, location, window.remotion_cwd), '_blank');
+                (0, get_git_menu_item_1.openGitSource)({ folder, location });
             },
             quickSwitcherLabel: null,
             subMenu: null,
@@ -174,22 +190,10 @@ const getOpenInMenuItems = ({ codingAgentInfo, editorDisabled, editorInfo, exclu
                 ...systemApps,
             ]
             : []),
-        ...(onConfigureApps && (hasCategorizedApps || systemApps.length > 0)
-            ? [{ type: 'divider', id: 'open-in-settings-divider' }]
-            : []),
-        onConfigureApps
-            ? {
-                id: 'change-default-apps',
-                keyHint: null,
-                label: jsx_runtime_1.jsx("span", { style: menuLabel, children: "Change default apps..." }),
-                leftItem: null,
-                onClick: onConfigureApps,
-                quickSwitcherLabel: null,
-                subMenu: null,
-                type: 'item',
-                value: 'change-default-apps',
-            }
-            : null,
+        ...(0, exports.getConfigureDefaultAppsMenuItems)({
+            hasPreviousItems: hasCategorizedApps || systemApps.length > 0,
+            onConfigureApps,
+        }),
     ].filter(no_react_1.NoReactInternals.truthy);
 };
 exports.getOpenInMenuItems = getOpenInMenuItems;

package/dist/components/root-composition-menu-items.d.ts

@@ -1,8 +1,11 @@
 import type { SetStateAction } from 'react';
+import type { CompositionSortOrder } from '../state/folders';
 import type { ModalState } from '../state/modals';
 import type { ComboboxValue } from './NewComposition/ComboBox';
-export declare const getRootCompositionMenuItems: ({ connectionStatus, readOnlyStudio, setSelectedModal, }: {
+export declare const getRootCompositionMenuItems: ({ connectionStatus, readOnlyStudio, setSelectedModal, compositionSortOrder, setCompositionSortOrder, }: {
     connectionStatus: "connected" | "disconnected" | "init";
     readOnlyStudio: boolean;
     setSelectedModal: (value: SetStateAction<ModalState | null>) => void;
+    compositionSortOrder: CompositionSortOrder;
+    setCompositionSortOrder: (sortOrder: CompositionSortOrder) => void;
 }) => ComboboxValue[];

package/dist/components/root-composition-menu-items.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getRootCompositionMenuItems = void 0;
-const getRootCompositionMenuItems = ({ connectionStatus, readOnlyStudio, setSelectedModal, }) => {
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Checkmark_1 = require("../icons/Checkmark");
+const getRootCompositionMenuItems = ({ connectionStatus, readOnlyStudio, setSelectedModal, compositionSortOrder, setCompositionSortOrder, }) => {
     return [
         {
             id: 'new-root-composition',
@@ -41,6 +43,41 @@ const getRootCompositionMenuItems = ({ connectionStatus, readOnlyStudio, setSele
             value: 'new-root-folder',
             disabled: readOnlyStudio || connectionStatus !== 'connected',
         },
+        {
+            id: 'sort-compositions-divider',
+            type: 'divider',
+        },
+        {
+            id: 'sort-compositions-header',
+            label: 'Sort',
+            type: 'section-header',
+        },
+        {
+            id: 'sort-compositions-registration',
+            keyHint: null,
+            label: 'As registered',
+            leftItem: compositionSortOrder === 'registration' ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
+            onClick: () => {
+                setCompositionSortOrder('registration');
+            },
+            quickSwitcherLabel: 'Sort compositions as registered',
+            subMenu: null,
+            type: 'item',
+            value: 'registration',
+        },
+        {
+            id: 'sort-compositions-alphabetical',
+            keyHint: null,
+            label: 'Alphabetically',
+            leftItem: compositionSortOrder === 'alphabetical' ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
+            onClick: () => {
+                setCompositionSortOrder('alphabetical');
+            },
+            quickSwitcherLabel: 'Sort compositions alphabetically',
+            subMenu: null,
+            type: 'item',
+            value: 'alphabetical',
+        },
     ];
 };
 exports.getRootCompositionMenuItems = getRootCompositionMenuItems;

package/dist/components/selected-outline-measurement.d.ts

@@ -80,5 +80,16 @@ export declare const getSequencesWithSelectableOutlines: ({ sequences, overrideI
     readonly timelinePosition: number;
 }) => SequenceWithSelectedOutline[];
 export declare const measureOutlines: (container: SVGSVGElement, targets: readonly SelectedOutlineLayoutTarget[], hoveredTimelineNodePathKey: string | null) => SelectedOutline[];
+export declare const measureOutlineTargets: (container: Element, targets: readonly {
+    readonly crop: {
+        readonly left: number;
+        readonly right: number;
+        readonly top: number;
+        readonly bottom: number;
+    };
+    readonly includeOutsideContainer: boolean;
+    readonly key: string;
+    readonly ref: import("react").RefObject<Element | null>;
+}[]) => SelectedOutline[];
 export declare const outlinesAreEqual: (a: readonly SelectedOutline[], b: readonly SelectedOutline[]) => boolean;
 export {};

package/dist/components/selected-outline-measurement.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.outlinesAreEqual = exports.measureOutlines = exports.getSequencesWithSelectableOutlines = exports.getSelectedRotationInfo = exports.getSelectedTransformOriginInfo = exports.getSelectedCropInfo = exports.getSelectedEffectFieldsBySequenceKey = exports.getOutlineSelectionInteraction = exports.getSequenceKeysContainingSelection = exports.getSelectedSequenceKeys = exports.cropOutlinePoints = exports.getTransformedSvgViewportPoints = exports.getSelectedOutlineRotationPivot = exports.getSelectedOutlineRotationCornerInfo = exports.getRotationCursor = exports.getSelectedOutlineRotationDeltaDegrees = exports.getAngleDegrees = exports.vectorBetween = exports.vectorLength = exports.dot = exports.getOutlineCenter = exports.midpoint = exports.pointToString = void 0;
+exports.outlinesAreEqual = exports.measureOutlineTargets = exports.measureOutlines = exports.getSequencesWithSelectableOutlines = exports.getSelectedRotationInfo = exports.getSelectedTransformOriginInfo = exports.getSelectedCropInfo = exports.getSelectedEffectFieldsBySequenceKey = exports.getOutlineSelectionInteraction = exports.getSequenceKeysContainingSelection = exports.getSelectedSequenceKeys = exports.cropOutlinePoints = exports.getTransformedSvgViewportPoints = exports.getSelectedOutlineRotationPivot = exports.getSelectedOutlineRotationCornerInfo = exports.getRotationCursor = exports.getSelectedOutlineRotationDeltaDegrees = exports.getAngleDegrees = exports.vectorBetween = exports.vectorLength = exports.dot = exports.getOutlineCenter = exports.midpoint = exports.pointToString = void 0;
 const calculate_timeline_1 = require("../helpers/calculate-timeline");
 const colors_1 = require("../helpers/colors");
 const get_box_quads_polyfill_internals_js_1 = require("../helpers/get-box-quads-polyfill-internals.js");
@@ -420,6 +420,16 @@ const getSequencesWithSelectableOutlines = ({ sequences, overrideIdsToNodePaths,
 };
 exports.getSequencesWithSelectableOutlines = getSequencesWithSelectableOutlines;
 const measureOutlines = (container, targets, hoveredTimelineNodePathKey) => {
+    return (0, exports.measureOutlineTargets)(container, targets.map((target) => ({
+        crop: target.crop,
+        includeOutsideContainer: target.showSelectedOutline ||
+            (0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(target.nodePathInfo.sequenceSubscriptionKey) === hoveredTimelineNodePathKey,
+        key: target.key,
+        ref: target.ref,
+    })));
+};
+exports.measureOutlines = measureOutlines;
+const measureOutlineTargets = (container, targets) => {
     // Reuse shared ancestor geometry within this synchronous batch only.
     (0, get_box_quads_polyfill_internals_js_1.useCache)();
     const containerRect = container.getBoundingClientRect();
@@ -429,9 +439,7 @@ const measureOutlines = (container, targets, hoveredTimelineNodePathKey) => {
         if (element === null) {
             continue;
         }
-        const includeOutsideContainer = target.showSelectedOutline ||
-            (0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(target.nodePathInfo.sequenceSubscriptionKey) === hoveredTimelineNodePathKey;
-        const uncroppedPoints = getElementOutlinePoints(element, containerRect, includeOutsideContainer);
+        const uncroppedPoints = getElementOutlinePoints(element, containerRect, target.includeOutsideContainer);
         if (uncroppedPoints === null) {
             continue;
         }
@@ -455,7 +463,7 @@ const measureOutlines = (container, targets, hoveredTimelineNodePathKey) => {
     }
     return outlines;
 };
-exports.measureOutlines = measureOutlines;
+exports.measureOutlineTargets = measureOutlineTargets;
 const outlinesAreEqual = (a, b) => {
     var _a, _b, _c, _d;
     if (a.length !== b.length) {

package/dist/components/use-configure-default-apps.d.ts

@@ -0,0 +1 @@
+export declare const useConfigureDefaultApps: () => (() => void) | null;

package/dist/components/use-configure-default-apps.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useConfigureDefaultApps = void 0;
+const react_1 = require("react");
+const client_id_1 = require("../helpers/client-id");
+const modals_1 = require("../state/modals");
+const use_default_editor_info_1 = require("./use-default-editor-info");
+const useConfigureDefaultApps = () => {
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
+    const configureDefaultApps = (0, react_1.useCallback)(() => {
+        var _a;
+        var _b;
+        setSelectedModal({
+            type: 'settings',
+            initialTab: 'apps',
+            initialPublicLicenseKey: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.publicLicenseKey) !== null && _b !== void 0 ? _b : null,
+        });
+    }, [setSelectedModal]);
+    return (0, use_default_editor_info_1.canUseEditorPicker)(previewServerState.type === 'connected')
+        ? configureDefaultApps
+        : null;
+};
+exports.useConfigureDefaultApps = useConfigureDefaultApps;

package/dist/error-overlay/remotion-overlay/CodeFrame.js

@@ -11,6 +11,7 @@ const container = {
 };
 const frame = {
     backgroundColor: colors_1.ERROR_CODE_FRAME_BACKGROUND,
+    borderRadius: 6,
     marginBottom: 20,
     overflowY: 'auto',
 };
@@ -32,16 +33,14 @@ const CodeFrame = ({ source, lineNumberWidth }) => {
             return (jsx_runtime_1.jsxs("div", { style: container, children: [
                     jsx_runtime_1.jsx("div", { style: {
                             ...lineNumber,
-                            backgroundColor: s.highlight
-                                ? colors_1.WHITE
-                                : colors_1.ERROR_CODE_FRAME_LINE_BACKGROUND,
-                            color: s.highlight ? colors_1.BLACK : colors_1.WHITE_ALPHA_60,
+                            backgroundColor: colors_1.ERROR_CODE_FRAME_LINE_BACKGROUND,
+                            color: s.highlight ? colors_1.WHITE : colors_1.WHITE_ALPHA_40,
                         }, children: String(s.lineNumber).padStart(lineNumberWidth, ' ') }), jsx_runtime_1.jsx("div", { style: {
                             fontFamily: 'monospace',
                             whiteSpace: 'pre',
                             tabSize: 2,
-                            color: s.highlight ? colors_1.WHITE : colors_1.WHITE_ALPHA_60,
-                            backgroundColor: s.highlight ? colors_1.BLUE : colors_1.TRANSPARENT,
+                            color: s.highlight ? colors_1.WHITE : colors_1.WHITE_ALPHA_40,
+                            backgroundColor: colors_1.TRANSPARENT,
                             lineHeight: 1.7,
                             paddingRight: 12,
                             paddingLeft: 12,

package/dist/error-overlay/remotion-overlay/CopyStackTrace.js

@@ -25,7 +25,7 @@ const CopyStackTrace = ({ errorText }) => {
         if (copyState === 'failed') {
             return 'Failed!';
         }
-        return 'Copy Stacktrace';
+        return 'Copy stack';
     }, [copyState]);
     return jsx_runtime_1.jsx(Button_1.Button, { onClick: handleCopyToClipboard, children: label });
 };

package/dist/error-overlay/remotion-overlay/ErrorDisplay.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const CodingAgentButton_1 = require("../../components/CodingAgentButton");
 const layout_1 = require("../../components/layout");
 const is_menu_item_1 = require("../../components/Menu/is-menu-item");
 const use_default_editor_info_1 = require("../../components/use-default-editor-info");
@@ -23,11 +24,12 @@ const SearchGitHubIssues_1 = require("./SearchGitHubIssues");
 const StackFrame_1 = require("./StackFrame");
 const stack = {
     marginTop: 17,
-    overflowX: 'scroll',
-    marginBottom: '10vh',
+    overflowX: 'hidden',
+    marginBottom: 14,
 };
 const rawStack = {
     backgroundColor: colors_1.ERROR_CODE_FRAME_BACKGROUND,
+    borderRadius: 6,
     boxSizing: 'border-box',
     color: colors_1.WHITE,
     fontFamily: 'monospace',
@@ -45,18 +47,44 @@ const symbolicationFailureStyle = {
     fontFamily: 'SF Pro Text, sans-serif',
     fontSize: 14,
     lineHeight: 1.5,
-    marginBottom: '10vh',
+    marginBottom: 14,
     marginTop: 24,
 };
 const spacer = {
     width: 5,
     display: 'inline-block',
 };
+const actionRow = {
+    alignItems: 'center',
+    display: 'flex',
+    flexWrap: 'wrap',
+    marginLeft: 4,
+    marginTop: -10,
+};
+const codingAgentButton = {
+    marginLeft: 1,
+    marginRight: 5,
+};
 const ErrorDisplay = ({ display, keyboardShortcuts, onRetry, canHaveDismissButton, calculateMetadata, symbolicationFailure, }) => {
     var _a;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { canOpenInEditor, defaultEditorId, defaultEditorName } = (0, use_default_editor_info_1.useEditorOpening)(previewServerState.type === 'connected');
-    const highestLineNumber = Math.max(0, ...display.stackFrames
+    const stackFrames = (0, react_1.useMemo)(() => {
+        const withoutReactInternals = display.stackFrames.filter((frame) => {
+            var _a;
+            var _b;
+            const fileName = `/${(_b = (_a = frame.originalFileName) === null || _a === void 0 ? void 0 : _a.replaceAll('\\', '/')) !== null && _b !== void 0 ? _b : ''}`;
+            return ![
+                '/node_modules/react/',
+                '/node_modules/react-dom/',
+                '/node_modules/scheduler/',
+            ].some((packagePath) => fileName.includes(packagePath));
+        });
+        return withoutReactInternals.length > 0
+            ? withoutReactInternals
+            : display.stackFrames.slice(0, 1);
+    }, [display.stackFrames]);
+    const highestLineNumber = Math.max(0, ...stackFrames
         .map((s) => s.originalScriptCode)
         .flat(1)
         .map((s) => {
@@ -79,29 +107,30 @@ const ErrorDisplay = ({ display, keyboardShortcuts, onRetry, canHaveDismissButto
     const helpLink = (0, get_help_link_1.getHelpLink)(message);
     const errorTextForCopy = (0, react_1.useMemo)(() => {
         const header = `${display.error.name}: ${message}`;
-        if (display.stackFrames.length > 0) {
-            const stackLines = display.stackFrames
+        if (stackFrames.length > 0) {
+            const stackLines = stackFrames
                 .map((frame) => `at ${frame.originalFunctionName || '<anonymous>'} (${frame.originalFileName || 'unknown'}:${frame.originalLineNumber || '?'}:${frame.originalColumnNumber || '?'})`)
                 .join('\n');
             return `${header}\n${stackLines}`;
         }
         return display.error.stack || header;
-    }, [display.stackFrames, display.error, message]);
+    }, [display.error, message, stackFrames]);
+    const fixWithAgentPrompt = `Fix this error in my Remotion project:\n\n${errorTextForCopy}`;
     return (jsx_runtime_1.jsxs("div", { children: [
-            jsx_runtime_1.jsx(ErrorTitle_1.ErrorTitle, { symbolicating: false, name: display.error.name, message: message, canHaveDismissButton: canHaveDismissButton }), helpLink ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsx(HelpLink_1.HelpLink, { link: helpLink, canHaveKeyboardShortcuts: keyboardShortcuts }), jsx_runtime_1.jsx("div", { style: spacer })
-                ] })) : null, display.stackFrames.length > 0 &&
-                canOpenInEditor &&
-                defaultEditorId &&
-                defaultEditorName ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsx(OpenInEditor_1.OpenInEditor, { canHaveKeyboardShortcuts: keyboardShortcuts, editorId: defaultEditorId, editorName: defaultEditorName, stack: display.stackFrames[0] }), jsx_runtime_1.jsx("div", { style: spacer })
-                ] })) : null, jsx_runtime_1.jsx(CopyStackTrace_1.CopyStackTrace, { errorText: errorTextForCopy }), jsx_runtime_1.jsx("div", { style: spacer }), jsx_runtime_1.jsx(SearchGitHubIssues_1.SearchGithubIssues, { canHaveKeyboardShortcuts: keyboardShortcuts, message: display.error.message }), jsx_runtime_1.jsx("div", { style: spacer }), jsx_runtime_1.jsx(AskOnDiscord_1.AskOnDiscord, { canHaveKeyboardShortcuts: keyboardShortcuts }), onRetry ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsx("div", { style: spacer }), jsx_runtime_1.jsx(Retry_1.RetryButton, { onClick: onRetry, label: calculateMetadata ? 'Retry calculateMetadata()' : 'Retry' })
-                ] })) : null, calculateMetadata ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx(ErrorTitle_1.ErrorTitle, { symbolicating: false, name: display.error.name, message: message, canHaveDismissButton: canHaveDismissButton }), jsx_runtime_1.jsxs("div", { style: actionRow, children: [helpLink ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                            jsx_runtime_1.jsx(HelpLink_1.HelpLink, { link: helpLink, canHaveKeyboardShortcuts: keyboardShortcuts }), jsx_runtime_1.jsx("div", { style: spacer })
+                        ] })) : null, stackFrames.length > 0 &&
+                        canOpenInEditor &&
+                        defaultEditorId &&
+                        defaultEditorName ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                            jsx_runtime_1.jsx(OpenInEditor_1.OpenInEditor, { canHaveKeyboardShortcuts: keyboardShortcuts, editorId: defaultEditorId, editorName: defaultEditorName, stack: stackFrames[0] }), jsx_runtime_1.jsx("div", { style: spacer })
+                        ] })) : null, jsx_runtime_1.jsx(CodingAgentButton_1.CodingAgentButton, { label: "Fix with", prompt: fixWithAgentPrompt, size: "default", style: codingAgentButton }), jsx_runtime_1.jsx(CopyStackTrace_1.CopyStackTrace, { errorText: errorTextForCopy }), jsx_runtime_1.jsx("div", { style: spacer }), jsx_runtime_1.jsx(SearchGitHubIssues_1.SearchGithubIssues, { canHaveKeyboardShortcuts: keyboardShortcuts, message: display.error.message }), jsx_runtime_1.jsx("div", { style: spacer }), jsx_runtime_1.jsx(AskOnDiscord_1.AskOnDiscord, { canHaveKeyboardShortcuts: keyboardShortcuts }), onRetry ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                            jsx_runtime_1.jsx("div", { style: spacer }), jsx_runtime_1.jsx(Retry_1.RetryButton, { onClick: onRetry, label: calculateMetadata ? 'Retry calculateMetadata()' : 'Retry' })
+                        ] })) : null] }), calculateMetadata ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsx(layout_1.Spacing, { y: 0.5 }), jsx_runtime_1.jsx(CalculateMetadataErrorExplainer_1.CalculateMetadataErrorExplainer, {})
                 ] })) : null, display.error instanceof remotion_1.MediaPlaybackError ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsx(layout_1.Spacing, { y: 0.5 }), jsx_runtime_1.jsx(MediaPlaybackErrorExplainer_1.MediaPlaybackErrorExplainer, { src: display.error.src })
-                ] })) : null, display.stackFrames.length > 0 ? (jsx_runtime_1.jsx("div", { style: stack, className: is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME, children: display.stackFrames.map((s, i) => {
+                ] })) : null, stackFrames.length > 0 ? (jsx_runtime_1.jsx("div", { style: stack, className: is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME, children: stackFrames.map((s, i) => {
                     return (jsx_runtime_1.jsx(StackFrame_1.StackElement
                     // eslint-disable-next-line react/no-array-index-key
                     , { isFirst: i === 0, s: s, lineNumberWidth: lineNumberWidth, defaultFunctionName: '(anonymous function)', editorId: canOpenInEditor ? defaultEditorId : null }, i));

package/dist/error-overlay/remotion-overlay/ErrorLoader.js

@@ -17,7 +17,7 @@ const container = {
     marginLeft: 'auto',
     marginRight: 'auto',
     fontFamily: 'SF Pro Text, sans-serif',
-    paddingTop: '5vh',
+    paddingTop: 14,
     boxSizing: 'border-box',
 };
 const shouldLogError = (error) => {

package/dist/error-overlay/remotion-overlay/ErrorTitle.js

@@ -15,6 +15,7 @@ const title = {
 };
 const left = {
     flex: 1,
+    paddingLeft: 14,
     paddingRight: 14,
     fontWeight: 'bold',
     maxWidth: '100%',
@@ -35,10 +36,10 @@ const spacer = {
 const ErrorTitle = ({ name, message, symbolicating, canHaveDismissButton }) => {
     return (jsx_runtime_1.jsxs("div", { style: title, className: "css-reset", children: [
             jsx_runtime_1.jsxs("div", { style: left, children: [
-                    jsx_runtime_1.jsx("span", { style: errName, children: name }), jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsxs("div", { style: row, children: [symbolicating ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                                    jsx_runtime_1.jsx(Symbolicating_1.Symbolicating, {}), jsx_runtime_1.jsx("div", { style: spacer })
-                                ] })) : null, jsx_runtime_1.jsx(ErrorMessage_1.ErrorMessage, { message: message })
-                        ] })
+                    jsx_runtime_1.jsxs("div", { style: row, children: [
+                            jsx_runtime_1.jsx("span", { style: errName, children: name }), symbolicating ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                                    jsx_runtime_1.jsx("div", { style: spacer }), jsx_runtime_1.jsx(Symbolicating_1.Symbolicating, {})
+                                ] })) : null] }), jsx_runtime_1.jsx("div", { style: row, children: jsx_runtime_1.jsx(ErrorMessage_1.ErrorMessage, { message: message }) })
                 ] }), (0, react_overlay_1.didUnmountReactApp)() ? null : canHaveDismissButton ? (jsx_runtime_1.jsx(DismissButton_1.DismissButton, {})) : null] }));
 };
 exports.ErrorTitle = ErrorTitle;

package/dist/error-overlay/remotion-overlay/OpenInEditor.js

@@ -3,101 +3,73 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.OpenInEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const Button_1 = require("../../components/Button");
+const AppLaunchButton_1 = require("../../components/AppLaunchButton");
+const NotificationCenter_1 = require("../../components/Notifications/NotificationCenter");
+const SettingsContext_1 = require("../../components/SettingsContext");
+const use_configure_default_apps_1 = require("../../components/use-configure-default-apps");
 const open_in_editor_1 = require("../../helpers/open-in-editor");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
+const editor_1 = require("../../icons/editor");
 const ShortcutHint_1 = require("./ShortcutHint");
-const initialState = { type: 'idle' };
-const reducer = (state, action) => {
-    if (action.type === 'start') {
-        return {
-            type: 'load',
-        };
-    }
-    if (action.type === 'fail') {
-        return {
-            type: 'error',
-        };
-    }
-    if (action.type === 'reset') {
-        return {
-            type: 'idle',
-        };
-    }
-    if (action.type === 'succeed') {
-        return {
-            type: 'success',
-        };
-    }
-    return state;
+const menuLabel = {
+    color: 'inherit',
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    lineHeight: '16px',
 };
 const OpenInEditor = ({ stack, canHaveKeyboardShortcuts, editorId, editorName }) => {
-    const isMounted = (0, react_1.useRef)(true);
-    const [state, dispatch] = (0, react_1.useReducer)(reducer, initialState);
+    const { editorInfo } = (0, SettingsContext_1.useSettings)();
+    const configureDefaultApps = (0, use_configure_default_apps_1.useConfigureDefaultApps)();
     const { registerKeybinding } = (0, use_keybinding_1.useKeybinding)();
-    const dispatchIfMounted = (0, react_1.useCallback)((payload) => {
-        if (isMounted.current === false)
-            return;
-        dispatch(payload);
-    }, []);
-    const openInBrowser = (0, react_1.useCallback)(() => {
-        dispatch({ type: 'start' });
-        (0, open_in_editor_1.openInEditor)(stack, editorId)
-            .then((data) => {
-            if (data.success) {
-                dispatchIfMounted({ type: 'succeed' });
-            }
-            else {
-                dispatchIfMounted({ type: 'fail' });
+    const openWithEditor = (0, react_1.useCallback)(async (selectedEditorId, selectedEditorName) => {
+        try {
+            const response = await (0, open_in_editor_1.openInEditor)(stack, selectedEditorId);
+            if (!response.success) {
+                (0, NotificationCenter_1.showNotification)(`Could not open ${selectedEditorName}`, 2000);
             }
-        })
-            .catch((err) => {
-            dispatchIfMounted({ type: 'fail' });
-            console.log('Could not open browser', err);
-        })
-            .finally(() => {
-            setTimeout(() => {
-                dispatchIfMounted({ type: 'reset' });
-            }, 2000);
-        });
-    }, [dispatchIfMounted, editorId, stack]);
-    (0, react_1.useEffect)(() => {
-        return () => {
-            isMounted.current = false;
-        };
-    }, []);
+        }
+        catch (err) {
+            (0, NotificationCenter_1.showNotification)(err.message, 2000);
+        }
+    }, [stack]);
+    const openPreferredEditor = (0, react_1.useCallback)(() => {
+        openWithEditor(editorId, editorName).catch(() => undefined);
+    }, [editorId, editorName, openWithEditor]);
     (0, react_1.useEffect)(() => {
         if (!canHaveKeyboardShortcuts) {
             return;
         }
-        const onEditor = () => {
-            openInBrowser();
-        };
         const { unregister } = registerKeybinding({
             event: 'keydown',
             key: 'o',
-            callback: onEditor,
+            callback: openPreferredEditor,
             commandCtrlKey: true,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
         });
         return () => unregister();
-    }, [canHaveKeyboardShortcuts, openInBrowser, registerKeybinding]);
-    const label = (0, react_1.useMemo)(() => {
-        switch (state.type) {
-            case 'error':
-                return 'Failed to open';
-            case 'idle':
-                return `Open in ${editorName}`;
-            case 'success':
-                return `Opened in ${editorName}`;
-            case 'load':
-                return `Opening...`;
-            default:
-                throw new Error('invalid state');
-        }
-    }, [editorName, state.type]);
-    return (jsx_runtime_1.jsxs(Button_1.Button, { onClick: openInBrowser, disabled: state.type !== 'idle', children: [label, canHaveKeyboardShortcuts ? (jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { keyToPress: "o", cmdOrCtrl: true })) : null] }));
+    }, [canHaveKeyboardShortcuts, openPreferredEditor, registerKeybinding]);
+    const menuItems = (0, react_1.useMemo)(() => {
+        var _a;
+        const alternativeEditors = ((_a = editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors) !== null && _a !== void 0 ? _a : []).filter((editor) => editor.id !== editorId);
+        const editorItems = alternativeEditors.map((editor) => ({
+            id: `open-in-${editor.id}`,
+            keyHint: null,
+            label: jsx_runtime_1.jsx("span", { style: menuLabel, children: editor.nameWithType }),
+            leftItem: jsx_runtime_1.jsx(editor_1.EditorIcon, { editorId: editor.id, size: 18 }),
+            onClick: () => {
+                openWithEditor(editor.id, editor.nameWithType).catch(() => undefined);
+            },
+            quickSwitcherLabel: null,
+            subMenu: null,
+            type: 'item',
+            value: editor.id,
+        }));
+        return editorItems;
+    }, [editorId, editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors, openWithEditor]);
+    return (jsx_runtime_1.jsxs(AppLaunchButton_1.AppLaunchButton, { actionButtonId: "error-overlay-open-in-editor", ariaLabel: `Open in ${editorName}`, disabled: false, menuAriaLabel: "Open in another app", menuButtonId: "error-overlay-open-in-another-app", menuItems: menuItems, onConfigureApps: configureDefaultApps, onClick: openPreferredEditor, size: "default", style: null, title: `Open in ${editorName}`, children: [
+            jsx_runtime_1.jsx(editor_1.EditorIcon, { editorId: editorId, size: 14 }),
+            "Open in ", editorName, canHaveKeyboardShortcuts ? (jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { keyToPress: "o", cmdOrCtrl: true })) : null] }));
 };
 exports.OpenInEditor = OpenInEditor;