@remotion/studio 4.0.518 → 4.0.519

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

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getSelectedUvHandles = exports.roundNumericUvEllipseValue = exports.getUvCoordinateForPoint = exports.getUvEllipseInteractiveControls = exports.getUvHandleConnectionEllipses = exports.getUvHandleConnectionLines = exports.getUvHandlePosition = exports.tuplesEqual = void 0;
 exports.constrainUv = constrainUv;
 exports.roundUvCoordinate = roundUvCoordinate;
-const canvas_1 = require("@remotion/canvas");
 const remotion_1 = require("remotion");
 const selected_outline_geometry_1 = require("./selected-outline-geometry");
 const timeline_field_utils_1 = require("./Timeline/timeline-field-utils");
@@ -92,7 +91,55 @@ const tuplesEqual = (left, right) => {
     return left[0] === right[0] && left[1] === right[1];
 };
 exports.tuplesEqual = tuplesEqual;
-const getUvHandlePosition = (points, uv) => (0, canvas_1.getCanvasOutlinePointAtUv)(points, uv);
+const getBilinearUvHandlePosition = (points, uv) => {
+    const [tl, tr, br, bl] = points;
+    const top = (0, selected_outline_geometry_1.mixPoint)(tl, tr, uv[0]);
+    const bottom = (0, selected_outline_geometry_1.mixPoint)(bl, br, uv[0]);
+    return (0, selected_outline_geometry_1.mixPoint)(top, bottom, uv[1]);
+};
+const projectiveEpsilon = 0.000001;
+const getProjectiveTransform = (points) => {
+    const [tl, tr, br, bl] = points;
+    const dx1 = tr.x - br.x;
+    const dx2 = bl.x - br.x;
+    const dx3 = tl.x - tr.x + br.x - bl.x;
+    const dy1 = tr.y - br.y;
+    const dy2 = bl.y - br.y;
+    const dy3 = tl.y - tr.y + br.y - bl.y;
+    let g = 0;
+    let h = 0;
+    if (Math.abs(dx3) > projectiveEpsilon || Math.abs(dy3) > projectiveEpsilon) {
+        const determinant = dx1 * dy2 - dx2 * dy1;
+        if (Math.abs(determinant) < projectiveEpsilon) {
+            return null;
+        }
+        g = (dx3 * dy2 - dx2 * dy3) / determinant;
+        h = (dx1 * dy3 - dx3 * dy1) / determinant;
+    }
+    return {
+        a: tr.x - tl.x + g * tr.x,
+        b: bl.x - tl.x + h * bl.x,
+        c: tl.x,
+        d: tr.y - tl.y + g * tr.y,
+        e: bl.y - tl.y + h * bl.y,
+        f: tl.y,
+        g,
+        h,
+    };
+};
+const applyProjectiveTransform = (transform, uv) => {
+    const denominator = transform.g * uv[0] + transform.h * uv[1] + 1;
+    return {
+        x: (transform.a * uv[0] + transform.b * uv[1] + transform.c) / denominator,
+        y: (transform.d * uv[0] + transform.e * uv[1] + transform.f) / denominator,
+    };
+};
+const getUvHandlePosition = (points, uv) => {
+    const transform = getProjectiveTransform(points);
+    return transform === null
+        ? getBilinearUvHandlePosition(points, uv)
+        : applyProjectiveTransform(transform, uv);
+};
 exports.getUvHandlePosition = getUvHandlePosition;
 const getUvHandleConnectionLines = ({ handles, points, }) => {
     const handlesByField = new Map(handles.map((handle) => [
@@ -290,7 +337,63 @@ const getUvEllipseInteractiveControls = ({ handles, dimensions, points, }) => {
     return controls;
 };
 exports.getUvEllipseInteractiveControls = getUvEllipseInteractiveControls;
-const getUvCoordinateForPoint = (points, point) => (0, canvas_1.getCanvasOutlineUvForPoint)(points, point);
+const vectorBetween = (from, to) => {
+    return { x: to.x - from.x, y: to.y - from.y };
+};
+const getBilinearUvCoordinateForPoint = (points, point) => {
+    const [tl, tr, br, bl] = points;
+    let u = 0.5;
+    let v = 0.5;
+    for (let i = 0; i < 8; i++) {
+        const current = getBilinearUvHandlePosition(points, [u, v]);
+        const errorX = current.x - point.x;
+        const errorY = current.y - point.y;
+        if (Math.abs(errorX) + Math.abs(errorY) < 0.001) {
+            break;
+        }
+        const du = {
+            x: (0, selected_outline_geometry_1.mix)(tr.x - tl.x, br.x - bl.x, v),
+            y: (0, selected_outline_geometry_1.mix)(tr.y - tl.y, br.y - bl.y, v),
+        };
+        const dv = vectorBetween((0, selected_outline_geometry_1.mixPoint)(tl, tr, u), (0, selected_outline_geometry_1.mixPoint)(bl, br, u));
+        const determinant = du.x * dv.y - du.y * dv.x;
+        if (Math.abs(determinant) < 0.000001) {
+            break;
+        }
+        u -= (errorX * dv.y - errorY * dv.x) / determinant;
+        v -= (du.x * errorY - du.y * errorX) / determinant;
+    }
+    return [u, v];
+};
+const getUvCoordinateForPoint = (points, point) => {
+    const transform = getProjectiveTransform(points);
+    if (transform === null) {
+        return getBilinearUvCoordinateForPoint(points, point);
+    }
+    const determinant = transform.a * (transform.e - transform.f * transform.h) -
+        transform.b * (transform.d - transform.f * transform.g) +
+        transform.c * (transform.d * transform.h - transform.e * transform.g);
+    if (Math.abs(determinant) < projectiveEpsilon) {
+        return getBilinearUvCoordinateForPoint(points, point);
+    }
+    const inverseA = transform.e - transform.f * transform.h;
+    const inverseB = transform.c * transform.h - transform.b;
+    const inverseC = transform.b * transform.f - transform.c * transform.e;
+    const inverseD = transform.f * transform.g - transform.d;
+    const inverseE = transform.a - transform.c * transform.g;
+    const inverseF = transform.c * transform.d - transform.a * transform.f;
+    const inverseG = transform.d * transform.h - transform.e * transform.g;
+    const inverseH = transform.b * transform.g - transform.a * transform.h;
+    const inverseI = transform.a * transform.e - transform.b * transform.d;
+    const denominator = inverseG * point.x + inverseH * point.y + inverseI;
+    if (Math.abs(denominator) < projectiveEpsilon) {
+        return getBilinearUvCoordinateForPoint(points, point);
+    }
+    return [
+        (inverseA * point.x + inverseB * point.y + inverseC) / denominator,
+        (inverseD * point.x + inverseE * point.y + inverseF) / denominator,
+    ];
+};
 exports.getUvCoordinateForPoint = getUvCoordinateForPoint;
 function constrainUv(value, schema) {
     var _a, _b;

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;

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

@@ -29,6 +29,6 @@ const SearchGithubIssues = ({ message, canHaveKeyboardShortcuts }) => {
         });
         return () => unregister();
     }, [canHaveKeyboardShortcuts, openInBrowser, registerKeybinding]);
-    return (jsx_runtime_1.jsxs(Button_1.Button, { onClick: openInBrowser, children: ["Search GitHub Issues", ' ', canHaveKeyboardShortcuts ? (jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { keyToPress: "g", cmdOrCtrl: true })) : null] }));
+    return (jsx_runtime_1.jsxs(Button_1.Button, { onClick: openInBrowser, children: ["Search Issues", ' ', canHaveKeyboardShortcuts ? (jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { keyToPress: "g", cmdOrCtrl: true })) : null] }));
 };
 exports.SearchGithubIssues = SearchGithubIssues;

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

@@ -8,7 +8,7 @@ const use_keybinding_1 = require("../../helpers/use-keybinding");
 exports.cmdOrCtrlCharacter = is_mac_1.isMac ? '⌘' : 'Ctrl';
 const container = {
     display: 'inline-block',
-    marginLeft: 6,
+    marginLeft: 3,
     opacity: 0.6,
     verticalAlign: 'middle',
     fontSize: 'inherit',
@@ -29,7 +29,7 @@ const ShortcutHint = ({ keyToPress, cmdOrCtrl }) => {
     if ((0, use_keybinding_1.areKeyboardShortcutsDisabled)()) {
         return null;
     }
-    return (jsx_runtime_1.jsxs("span", { style: container, children: [cmdOrCtrl ? `${exports.cmdOrCtrlCharacter}` : '', jsx_runtime_1.jsx("span", { style: style, children: keyToPress.toUpperCase() })
+    return (jsx_runtime_1.jsxs("span", { style: container, children: [cmdOrCtrl ? `${exports.cmdOrCtrlCharacter}${is_mac_1.isMac ? '' : '+'}` : '', jsx_runtime_1.jsx("span", { style: style, children: keyToPress.toUpperCase() })
         ] }));
 };
 exports.ShortcutHint = ShortcutHint;

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

@@ -6,13 +6,14 @@ const react_1 = require("react");
 const Button_1 = require("../../components/Button");
 const colors_1 = require("../../helpers/colors");
 const open_in_editor_1 = require("../../helpers/open-in-editor");
-const carets_1 = require("./carets");
+const caret_1 = require("../../icons/caret");
 const CodeFrame_1 = require("./CodeFrame");
 const format_location_1 = require("./format-location");
 const location = {
-    color: colors_1.WHITE_ALPHA_60,
+    color: colors_1.LIGHT_TEXT,
     fontFamily: 'monospace',
     fontSize: 14,
+    overflowWrap: 'anywhere',
 };
 const header = {
     paddingLeft: 14,
@@ -22,12 +23,11 @@ const header = {
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
-    borderBottom: colors_1.BORDER_STACK_FRAME_BLUE,
-    backgroundColor: colors_1.BLACK,
 };
 const left = {
     paddingRight: 14,
     flex: 1,
+    minWidth: 0,
 };
 const fnName = {
     fontSize: 14,
@@ -60,7 +60,10 @@ const StackElement = ({ s, lineNumberWidth, isFirst, defaultFunctionName, editor
         setShowCodeFrame((f) => !f);
     }, []);
     return (jsx_runtime_1.jsxs("div", { className: "css-reset", children: [
-            jsx_runtime_1.jsxs("div", { style: header, children: [
+            jsx_runtime_1.jsxs("div", { style: {
+                    ...header,
+                    borderBottom: showCodeFrame ? 'none' : colors_1.BORDER_WHITE_ALPHA_12,
+                }, children: [
                     jsx_runtime_1.jsxs("div", { style: left, children: [
                             jsx_runtime_1.jsx("div", { style: fnName, children: (_a = s.originalFunctionName) !== null && _a !== void 0 ? _a : defaultFunctionName }), s.originalFileName ? (jsx_runtime_1.jsx("div", { style: location, children: canOpenFileLocation ? (jsx_runtime_1.jsxs("span", { onClick: onOpenFileLocation, onPointerEnter: () => {
                                         setLocationHovered(true);
@@ -68,10 +71,12 @@ const StackElement = ({ s, lineNumberWidth, isFirst, defaultFunctionName, editor
                                         setLocationHovered(false);
                                     }, style: {
                                         ...location,
+                                        color: locationHovered ? colors_1.WHITE : colors_1.LIGHT_TEXT,
                                         cursor: 'pointer',
-                                        textDecoration: locationHovered ? 'underline' : 'none',
-                                        textUnderlineOffset: locationHovered ? 4 : undefined,
-                                    }, children: [(0, format_location_1.formatLocation)(s.originalFileName), ":", s.originalLineNumber] })) : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [(0, format_location_1.formatLocation)(s.originalFileName), ":", s.originalLineNumber] })) })) : null] }), s.originalScriptCode && s.originalScriptCode.length > 0 ? (jsx_runtime_1.jsx(Button_1.Button, { onClick: toggleCodeFrame, children: showCodeFrame ? jsx_runtime_1.jsx(carets_1.CaretDown, { invert: false }) : jsx_runtime_1.jsx(carets_1.CaretRight, {}) })) : null] }), jsx_runtime_1.jsx("div", { children: s.originalScriptCode &&
+                                    }, children: [(0, format_location_1.formatLocation)(s.originalFileName), ":", s.originalLineNumber] })) : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [(0, format_location_1.formatLocation)(s.originalFileName), ":", s.originalLineNumber] })) })) : null] }), s.originalScriptCode && s.originalScriptCode.length > 0 ? (jsx_runtime_1.jsx(Button_1.Button, { onClick: toggleCodeFrame, children: jsx_runtime_1.jsx("div", { style: {
+                                display: 'flex',
+                                transform: showCodeFrame ? undefined : 'rotate(-90deg)',
+                            }, children: jsx_runtime_1.jsx(caret_1.CaretDown, {}) }) })) : null] }), jsx_runtime_1.jsx("div", { children: s.originalScriptCode &&
                     s.originalScriptCode.length > 0 &&
                     showCodeFrame ? (jsx_runtime_1.jsx(CodeFrame_1.CodeFrame, { lineNumberWidth: lineNumberWidth, source: s.originalScriptCode })) : null })
         ] }));

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

@@ -4,7 +4,7 @@ exports.Symbolicating = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const colors_1 = require("../../helpers/colors");
 const Symbolicating = (props) => {
-    return (jsx_runtime_1.jsxs("svg", { id: "loading", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", width: "16", height: "16", fill: colors_1.WHITE, ...props, children: [
+    return (jsx_runtime_1.jsxs("svg", { id: "loading", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", width: "14", height: "14", fill: colors_1.WHITE, ...props, children: [
             jsx_runtime_1.jsx("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(0 16 16)", children: jsx_runtime_1.jsx("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0" }) }), jsx_runtime_1.jsx("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(45 16 16)", children: jsx_runtime_1.jsx("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.125s" }) }), jsx_runtime_1.jsx("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(90 16 16)", children: jsx_runtime_1.jsx("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.25s" }) }), jsx_runtime_1.jsx("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(135 16 16)", children: jsx_runtime_1.jsx("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.375s" }) }), jsx_runtime_1.jsx("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(180 16 16)", children: jsx_runtime_1.jsx("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.5s" }) }), jsx_runtime_1.jsx("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(225 16 16)", children: jsx_runtime_1.jsx("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.675s" }) }), jsx_runtime_1.jsx("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(270 16 16)", children: jsx_runtime_1.jsx("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.75s" }) }), jsx_runtime_1.jsx("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(315 16 16)", children: jsx_runtime_1.jsx("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.875s" }) })
         ] }));
 };