@remotion/studio 4.0.501 → 4.0.503

package/dist/components/drop-handler-data.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getSfxDragUrl = exports.getComponentDragData = exports.getCompositionDragData = exports.getAssetDragPath = exports.isSupportedDropEvent = exports.isRemoteAssetDragEvent = exports.isSfxDragEvent = exports.isElementDragEvent = exports.isCompositionDragEvent = exports.isComponentDragEvent = exports.isAssetDragEvent = exports.isFileDragEvent = void 0;
-const drag_and_drop_1 = require("@remotion/drag-and-drop");
+const studio_protocol_1 = require("@remotion/studio-protocol");
 const remote_asset_drag_1 = require("../helpers/remote-asset-drag");
 const isFileDragEvent = (event) => {
     var _a;
@@ -12,7 +12,7 @@ exports.isFileDragEvent = isFileDragEvent;
 const isRemotionDragEvent = (event, type) => {
     var _a, _b;
     var _c;
-    return (((_b = drag_and_drop_1.DragAndDropInternals.getDragPreviewMetadata((_c = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _c !== void 0 ? _c : [])) === null || _b === void 0 ? void 0 : _b.type) === type);
+    return (((_b = studio_protocol_1.StudioProtocolInternals.getDragPreviewMetadata((_c = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _c !== void 0 ? _c : [])) === null || _b === void 0 ? void 0 : _b.type) === type);
 };
 const isAssetDragEvent = (event) => {
     return isRemotionDragEvent(event, 'asset');
@@ -56,28 +56,28 @@ const isSupportedDropEvent = (event) => {
 exports.isSupportedDropEvent = isSupportedDropEvent;
 const getAssetDragPath = (event) => {
     const parsed = event.dataTransfer
-        ? drag_and_drop_1.DragAndDropInternals.parseDragData(event.dataTransfer)
+        ? studio_protocol_1.StudioProtocolInternals.parseDragData(event.dataTransfer)
         : null;
     return (parsed === null || parsed === void 0 ? void 0 : parsed.type) === 'asset' ? parsed.data.assetPath : null;
 };
 exports.getAssetDragPath = getAssetDragPath;
 const getCompositionDragData = (event) => {
     const parsed = event.dataTransfer
-        ? drag_and_drop_1.DragAndDropInternals.parseDragData(event.dataTransfer)
+        ? studio_protocol_1.StudioProtocolInternals.parseDragData(event.dataTransfer)
         : null;
     return (parsed === null || parsed === void 0 ? void 0 : parsed.type) === 'composition' ? parsed.data : null;
 };
 exports.getCompositionDragData = getCompositionDragData;
 const getComponentDragData = (event) => {
     const parsed = event.dataTransfer
-        ? drag_and_drop_1.DragAndDropInternals.parseDragData(event.dataTransfer)
+        ? studio_protocol_1.StudioProtocolInternals.parseDragData(event.dataTransfer)
         : null;
     return (parsed === null || parsed === void 0 ? void 0 : parsed.type) === 'component' ? parsed.data : null;
 };
 exports.getComponentDragData = getComponentDragData;
 const getSfxDragUrl = (event) => {
     const parsed = event.dataTransfer
-        ? drag_and_drop_1.DragAndDropInternals.parseDragData(event.dataTransfer)
+        ? studio_protocol_1.StudioProtocolInternals.parseDragData(event.dataTransfer)
         : null;
     return (parsed === null || parsed === void 0 ? void 0 : parsed.type) === 'sfx' ? parsed.data.sfx.url : null;
 };

package/dist/components/effect-drag-and-drop.d.ts

@@ -1,4 +1,4 @@
-import { type EffectDragData } from '@remotion/drag-and-drop';
+import { type EffectDragData } from '@remotion/studio-protocol';
 import type { SequencePropsSubscriptionKey } from 'remotion';
 export declare const hasEffectDragType: (dataTransfer: DataTransfer) => boolean;
 export declare const hasExplicitEffectDragType: (dataTransfer: DataTransfer) => boolean;

package/dist/components/effect-drag-and-drop.js

@@ -1,14 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addEffectToSequence = exports.addEffectFromDragData = exports.getEffectDragData = exports.hasExplicitEffectDragType = exports.hasEffectDragType = void 0;
-const drag_and_drop_1 = require("@remotion/drag-and-drop");
+const studio_protocol_1 = require("@remotion/studio-protocol");
 const studio_shared_1 = require("@remotion/studio-shared");
 const install_required_package_1 = require("../helpers/install-required-package");
 const call_api_1 = require("./call-api");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const hasEffectDragType = (dataTransfer) => {
     var _a;
-    return (((_a = drag_and_drop_1.DragAndDropInternals.getDragPreviewMetadata(dataTransfer.types)) === null || _a === void 0 ? void 0 : _a.type) ===
+    return (((_a = studio_protocol_1.StudioProtocolInternals.getDragPreviewMetadata(dataTransfer.types)) === null || _a === void 0 ? void 0 : _a.type) ===
         'effect');
 };
 exports.hasEffectDragType = hasEffectDragType;
@@ -17,7 +17,7 @@ const hasExplicitEffectDragType = (dataTransfer) => {
 };
 exports.hasExplicitEffectDragType = hasExplicitEffectDragType;
 const getEffectDragData = (dataTransfer) => {
-    const parsed = drag_and_drop_1.DragAndDropInternals.parseDragData(dataTransfer);
+    const parsed = studio_protocol_1.StudioProtocolInternals.parseDragData(dataTransfer);
     return (parsed === null || parsed === void 0 ? void 0 : parsed.type) === 'effect' ? parsed.data : null;
 };
 exports.getEffectDragData = getEffectDragData;

package/dist/components/element-drag-and-drop.d.ts

@@ -1,3 +1,3 @@
-import { type ElementDragData } from '@remotion/drag-and-drop';
+import { type ElementDragData } from '@remotion/studio-protocol';
 export declare const hasElementDragType: (dataTransfer: DataTransfer | null) => boolean;
 export declare const getElementDragData: (dataTransfer: DataTransfer | null) => ElementDragData | null;

package/dist/components/element-drag-and-drop.js

@@ -1,18 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getElementDragData = exports.hasElementDragType = void 0;
-const drag_and_drop_1 = require("@remotion/drag-and-drop");
+const studio_protocol_1 = require("@remotion/studio-protocol");
 const hasElementDragType = (dataTransfer) => {
     var _a;
     var _b;
-    return (((_a = drag_and_drop_1.DragAndDropInternals.getDragPreviewMetadata((_b = dataTransfer === null || dataTransfer === void 0 ? void 0 : dataTransfer.types) !== null && _b !== void 0 ? _b : [])) === null || _a === void 0 ? void 0 : _a.type) === 'element');
+    return (((_a = studio_protocol_1.StudioProtocolInternals.getDragPreviewMetadata((_b = dataTransfer === null || dataTransfer === void 0 ? void 0 : dataTransfer.types) !== null && _b !== void 0 ? _b : [])) === null || _a === void 0 ? void 0 : _a.type) === 'element');
 };
 exports.hasElementDragType = hasElementDragType;
 const getElementDragData = (dataTransfer) => {
     if (!dataTransfer) {
         return null;
     }
-    const parsed = drag_and_drop_1.DragAndDropInternals.parseDragData(dataTransfer);
+    const parsed = studio_protocol_1.StudioProtocolInternals.parseDragData(dataTransfer);
     return (parsed === null || parsed === void 0 ? void 0 : parsed.type) === 'element' ? parsed.data : null;
 };
 exports.getElementDragData = getElementDragData;

package/dist/components/element-install-request.d.ts

@@ -0,0 +1,3 @@
+import type { ElementInstallRequest } from '@remotion/studio-shared';
+export declare const enqueueElementInstallRequest: (request: ElementInstallRequest) => void;
+export declare const subscribeToElementInstallRequests: (listener: (request: ElementInstallRequest) => void) => () => void;

package/dist/components/element-install-request.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.subscribeToElementInstallRequests = exports.enqueueElementInstallRequest = void 0;
+const listeners = new Set();
+const enqueueElementInstallRequest = (request) => {
+    for (const listener of listeners) {
+        listener(request);
+    }
+};
+exports.enqueueElementInstallRequest = enqueueElementInstallRequest;
+const subscribeToElementInstallRequests = (listener) => {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+};
+exports.subscribeToElementInstallRequests = subscribeToElementInstallRequests;

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

@@ -32,7 +32,7 @@ const getFolderMenuItems = ({ closeMenu, connectionStatus, folder, readOnlyStudi
                         return;
                     }
                     try {
-                        await (0, open_in_editor_1.openOriginalPositionInEditor)(resolvedLocation);
+                        await (0, open_in_editor_1.openOriginalPositionInEditor)(resolvedLocation, null);
                     }
                     catch (err) {
                         (0, NotificationCenter_1.showNotification)(err.message, 2000);

package/dist/components/handle-drop.d.ts

@@ -1,10 +1,9 @@
 import type { Dimensions } from '../helpers/is-current-selected-still';
-import { type ConfirmElementOverwrite, type InsertElementDropPosition } from './import-assets';
+import { type InsertElementDropPosition } from './import-assets';
 import type { SvgImportMode } from './SvgImportDialog';
-export declare const handleDrop: ({ chooseSvgImportMode, compositionFile, confirmElementOverwrite, compositionId, destinationDimensions, dropPosition, event, fps, from, }: {
+export declare const handleDrop: ({ chooseSvgImportMode, compositionFile, compositionId, destinationDimensions, dropPosition, event, fps, from, }: {
     chooseSvgImportMode: () => Promise<SvgImportMode | null>;
     compositionFile: string;
-    confirmElementOverwrite: ConfirmElementOverwrite;
     compositionId: string;
     destinationDimensions: Dimensions | null;
     dropPosition: InsertElementDropPosition | null;

package/dist/components/handle-drop.js

@@ -4,8 +4,9 @@ exports.handleDrop = void 0;
 const remote_asset_drag_1 = require("../helpers/remote-asset-drag");
 const drop_handler_data_1 = require("./drop-handler-data");
 const element_drag_and_drop_1 = require("./element-drag-and-drop");
+const element_install_request_1 = require("./element-install-request");
 const import_assets_1 = require("./import-assets");
-const handleDrop = async ({ chooseSvgImportMode, compositionFile, confirmElementOverwrite, compositionId, destinationDimensions, dropPosition, event, fps, from, }) => {
+const handleDrop = async ({ chooseSvgImportMode, compositionFile, compositionId, destinationDimensions, dropPosition, event, fps, from, }) => {
     var _a;
     var _b;
     if ((0, drop_handler_data_1.isFileDragEvent)(event)) {
@@ -77,13 +78,19 @@ const handleDrop = async ({ chooseSvgImportMode, compositionFile, confirmElement
     }
     const element = (0, element_drag_and_drop_1.getElementDragData)(event.dataTransfer);
     if (element !== null) {
-        await (0, import_assets_1.insertElement)({
+        (0, element_install_request_1.enqueueElementInstallRequest)({
+            id: crypto.randomUUID(),
+            clientId: 'drag-and-drop',
+            createdAt: Date.now(),
             compositionFile,
             compositionId,
-            confirmOverwrite: confirmElementOverwrite,
-            dropPosition,
             element: element.element,
             from,
+            position: (0, import_assets_1.getElementPositionForDrop)({
+                dimensions: element.element.dimensions,
+                dropPosition,
+            }),
+            source: { type: 'drag-and-drop' },
         });
         return;
     }

package/dist/components/import-assets.d.ts

@@ -1,11 +1,10 @@
-import { type CompositionDragData, type ComponentProp } from '@remotion/drag-and-drop';
-import { type FileType, type InsertElementFileConflict, type InsertableCompositionElementPosition } from '@remotion/studio-shared';
+import { type CompositionDragData, type ComponentProp } from '@remotion/studio-protocol';
+import { type ElementInstallExpectedFileState, type FileType, type InsertableCompositionElementPosition } from '@remotion/studio-shared';
 import type { Dimensions } from '../helpers/is-current-selected-still';
 export type InsertElementDropPosition = {
     readonly centerX: number;
     readonly centerY: number;
 };
-export type ConfirmElementOverwrite = (conflict: InsertElementFileConflict) => Promise<boolean>;
 export declare const getAssetElement: ({ fileType, src, }: {
     fileType: FileType;
     src: string;
@@ -64,7 +63,7 @@ export declare const getAssetPositionForDrop: ({ assetDimensions, destinationDim
 }) => InsertableCompositionElementPosition | null;
 export declare const getComponentDimensions: (component: {
     componentName: string;
-    dimensions?: import("@remotion/drag-and-drop").ComponentDimensions | undefined;
+    dimensions?: import("@remotion/studio-protocol").ComponentDimensions | undefined;
     importName: string;
     importPath: string;
     props: ComponentProp[];
@@ -128,7 +127,7 @@ export declare const insertExistingAssets: ({ assetPaths, compositionFile, compo
 export declare const insertComponent: ({ component, compositionFile, compositionId, dropPosition, from, }: {
     component: {
         componentName: string;
-        dimensions?: import("@remotion/drag-and-drop").ComponentDimensions | undefined;
+        dimensions?: import("@remotion/studio-protocol").ComponentDimensions | undefined;
         importName: string;
         importPath: string;
         props: ComponentProp[];
@@ -145,17 +144,18 @@ export declare const insertComposition: ({ composition, compositionFile, composi
     dropPosition: InsertElementDropPosition | null;
     from: number | null;
 }) => Promise<void>;
-export declare const insertElement: ({ compositionFile, compositionId, confirmOverwrite, dropPosition, element, from, }: {
+export declare const insertElement: ({ compositionFile, compositionId, element, expectedFileState, position, from, overwriteExisting, }: {
     compositionFile: string;
     compositionId: string;
-    confirmOverwrite: ConfirmElementOverwrite;
-    dropPosition: InsertElementDropPosition | null;
     element: {
         dependencies: string[];
         slug: string;
         displayName: string;
         sourceCode: string;
-        dimensions: import("@remotion/drag-and-drop").ComponentDimensions | null;
+        dimensions: import("@remotion/studio-protocol").ComponentDimensions | null;
     };
+    expectedFileState: ElementInstallExpectedFileState;
+    position: InsertableCompositionElementPosition | null;
     from: number | null;
+    overwriteExisting: boolean;
 }) => Promise<void>;

package/dist/components/import-assets.js

@@ -872,33 +872,22 @@ const insertComposition = async ({ composition, compositionFile, compositionId,
     }
 };
 exports.insertComposition = insertComposition;
-const insertElement = async ({ compositionFile, compositionId, confirmOverwrite, dropPosition, element, from, }) => {
+const insertElement = async ({ compositionFile, compositionId, element, expectedFileState, position, from, overwriteExisting, }) => {
     try {
         await (0, install_required_package_1.installRequiredPackages)(element.dependencies);
-        const position = (0, exports.getElementPositionForDrop)({
-            dimensions: element.dimensions,
-            dropPosition,
-        });
-        const callInsertElementApi = (overwriteExisting) => (0, call_api_1.callApi)('/api/insert-element', {
+        const response = await (0, call_api_1.callApi)('/api/insert-element', {
             compositionFile,
             compositionId,
             element,
+            expectedFileState,
             from,
             overwriteExisting,
             position,
         });
-        let response = await callInsertElementApi(false);
-        if (!response.success && response.type === 'file-conflict') {
-            const shouldOverwrite = await confirmOverwrite(response.conflict);
-            if (!shouldOverwrite) {
-                return;
-            }
-            response = await callInsertElementApi(true);
-        }
         if (!response.success) {
             const reason = response.type === 'error'
                 ? response.reason
-                : `Element file still conflicts: ${response.conflict.filePath}`;
+                : `Element file changed: ${response.conflict.filePath}`;
             (0, NotificationCenter_1.showNotification)(`Could not add Element: ${reason}`, 4000);
             return;
         }

package/dist/components/sequence-props-api.d.ts

@@ -0,0 +1,4 @@
+import type { SaveSequencePropsRequest, SaveSequencePropsResponse, SubscribeToSequencePropsRequest, SubscribeToSequencePropsResponse, UnsubscribeFromSequencePropsRequest } from '@remotion/studio-shared';
+export declare const saveSequenceProps: (request: SaveSequencePropsRequest) => Promise<SaveSequencePropsResponse>;
+export declare const subscribeToSequenceProps: (request: SubscribeToSequencePropsRequest) => Promise<SubscribeToSequencePropsResponse>;
+export declare const unsubscribeFromSequenceProps: (request: UnsubscribeFromSequencePropsRequest) => Promise<undefined>;

package/dist/components/sequence-props-api.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.unsubscribeFromSequenceProps = exports.subscribeToSequenceProps = exports.saveSequenceProps = void 0;
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
+const call_api_1 = require("./call-api");
+const saveSequenceProps = (request) => {
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    return browserStudioOperations
+        ? browserStudioOperations.saveSequenceProps(request)
+        : (0, call_api_1.callApi)('/api/save-sequence-props', request);
+};
+exports.saveSequenceProps = saveSequenceProps;
+const subscribeToSequenceProps = (request) => {
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    return browserStudioOperations
+        ? browserStudioOperations.subscribeToSequenceProps(request)
+        : (0, call_api_1.callApi)('/api/subscribe-to-sequence-props', request);
+};
+exports.subscribeToSequenceProps = subscribeToSequenceProps;
+const unsubscribeFromSequenceProps = (request) => {
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    return browserStudioOperations
+        ? browserStudioOperations.unsubscribeFromSequenceProps(request)
+        : (0, call_api_1.callApi)('/api/unsubscribe-from-sequence-props', request);
+};
+exports.unsubscribeFromSequenceProps = unsubscribeFromSequenceProps;

package/dist/components/use-default-editor-info.d.ts

@@ -0,0 +1,4 @@
+import type { EditorPickerId, GetDefaultEditorInfoResponse } from '@remotion/studio-shared';
+export declare const canUseEditorPicker: (previewServerConnected: boolean) => boolean;
+export declare const getPreferredEditorId: (editorInfo: GetDefaultEditorInfoResponse | null) => EditorPickerId | null;
+export declare const useDefaultEditorInfo: (enabled: boolean) => GetDefaultEditorInfoResponse | null;

package/dist/components/use-default-editor-info.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDefaultEditorInfo = exports.getPreferredEditorId = exports.canUseEditorPicker = void 0;
+const react_1 = require("react");
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
+const call_api_1 = require("./call-api");
+let editorInfoPromise = null;
+const loadDefaultEditorInfo = () => {
+    editorInfoPromise !== null && editorInfoPromise !== void 0 ? editorInfoPromise : (editorInfoPromise = (0, call_api_1.callApi)('/api/default-editor-info', {}).catch((err) => {
+        editorInfoPromise = null;
+        throw err;
+    }));
+    return editorInfoPromise;
+};
+const canUseEditorPicker = (previewServerConnected) => {
+    return (previewServerConnected &&
+        !window.remotion_isReadOnlyStudio &&
+        (0, browser_studio_operations_1.getBrowserStudioOperations)() === null);
+};
+exports.canUseEditorPicker = canUseEditorPicker;
+const getPreferredEditorId = (editorInfo) => {
+    var _a;
+    var _b;
+    return ((_b = (_a = editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors.find((editor) => editor.name === window.remotion_editorName)) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : null);
+};
+exports.getPreferredEditorId = getPreferredEditorId;
+const useDefaultEditorInfo = (enabled) => {
+    const [editorInfo, setEditorInfo] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        if (!enabled) {
+            return;
+        }
+        let cancelled = false;
+        loadDefaultEditorInfo()
+            .then((response) => {
+            if (!cancelled) {
+                setEditorInfo(response);
+            }
+        })
+            .catch(() => undefined);
+        return () => {
+            cancelled = true;
+        };
+    }, [enabled]);
+    return editorInfo;
+};
+exports.useDefaultEditorInfo = useDefaultEditorInfo;

package/dist/error-overlay/remotion-overlay/ErrorDisplay.d.ts

@@ -7,4 +7,5 @@ export declare const ErrorDisplay: React.FC<{
     readonly onRetry: OnRetry;
     readonly canHaveDismissButton: boolean;
     readonly calculateMetadata: boolean;
+    readonly symbolicationFailure: string | null;
 }>;

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

@@ -7,6 +7,7 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const layout_1 = require("../../components/layout");
 const is_menu_item_1 = require("../../components/Menu/is-menu-item");
+const colors_1 = require("../../helpers/colors");
 const AskOnDiscord_1 = require("./AskOnDiscord");
 const CalculateMetadataErrorExplainer_1 = require("./CalculateMetadataErrorExplainer");
 const CopyStackTrace_1 = require("./CopyStackTrace");
@@ -23,12 +24,35 @@ const stack = {
     overflowX: 'scroll',
     marginBottom: '10vh',
 };
+const rawStack = {
+    backgroundColor: colors_1.ERROR_CODE_FRAME_BACKGROUND,
+    boxSizing: 'border-box',
+    color: colors_1.WHITE,
+    fontFamily: 'monospace',
+    fontSize: 14,
+    lineHeight: 1.7,
+    marginBottom: 0,
+    marginTop: 17,
+    maxWidth: '100%',
+    overflowX: 'auto',
+    padding: 12,
+    whiteSpace: 'pre',
+};
+const symbolicationFailureStyle = {
+    color: colors_1.WHITE_ALPHA_60,
+    fontFamily: 'SF Pro Text, sans-serif',
+    fontSize: 14,
+    lineHeight: 1.5,
+    marginBottom: '10vh',
+    marginTop: 24,
+};
 const spacer = {
     width: 5,
     display: 'inline-block',
 };
-const ErrorDisplay = ({ display, keyboardShortcuts, onRetry, canHaveDismissButton, calculateMetadata, }) => {
-    const highestLineNumber = Math.max(...display.stackFrames
+const ErrorDisplay = ({ display, keyboardShortcuts, onRetry, canHaveDismissButton, calculateMetadata, symbolicationFailure, }) => {
+    var _a;
+    const highestLineNumber = Math.max(0, ...display.stackFrames
         .map((s) => s.originalScriptCode)
         .flat(1)
         .map((s) => {
@@ -70,11 +94,11 @@ const ErrorDisplay = ({ display, keyboardShortcuts, onRetry, canHaveDismissButto
                     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, jsx_runtime_1.jsx("div", { style: stack, className: is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME, children: display.stackFrames.map((s, i) => {
+                ] })) : 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) => {
                     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)' }, i));
-                }) })
-        ] }));
+                }) })) : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx("pre", { "aria-label": "Unsymbolicated stack trace", className: is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME, style: rawStack, children: (_a = display.error.stack) !== null && _a !== void 0 ? _a : 'Check the Terminal and browser console for error messages.' }), symbolicationFailure ? (jsx_runtime_1.jsx("div", { style: symbolicationFailureStyle, children: symbolicationFailure })) : null] }))] }));
 };
 exports.ErrorDisplay = ErrorDisplay;

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

@@ -4,7 +4,6 @@ exports.ErrorLoader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
-const colors_1 = require("../../helpers/colors");
 const error_origin_1 = require("../error-origin");
 const listen_to_runtime_errors_1 = require("../react-overlay/listen-to-runtime-errors");
 const ErrorDisplay_1 = require("./ErrorDisplay");
@@ -19,17 +18,7 @@ const container = {
     marginRight: 'auto',
     fontFamily: 'SF Pro Text, sans-serif',
     paddingTop: '5vh',
-};
-const errorWhileErrorStyle = {
-    color: colors_1.WHITE,
-    lineHeight: 1.5,
-    whiteSpace: 'pre',
-};
-const errorWhileSymbolicatingStyle = {
-    color: colors_1.WHITE,
-    lineHeight: 1.5,
-    marginTop: 24,
-    opacity: 0.7,
+    boxSizing: 'border-box',
 };
 const shouldLogError = (error) => {
     return (!(0, error_origin_1.wasErrorLoggedByServer)(error) && (0, studio_shared_1.getLocationFromBuildError)(error) === null);
@@ -58,7 +47,6 @@ const logSymbolicatedStudioError = (record) => {
     });
 };
 const ErrorLoader = ({ error, keyboardShortcuts, onRetry, canHaveDismissButton, calculateMetadata, }) => {
-    var _a;
     const [state, setState] = (0, react_1.useState)({
         type: 'loading',
     });
@@ -97,15 +85,11 @@ const ErrorLoader = ({ error, keyboardShortcuts, onRetry, canHaveDismissButton,
         return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsx(ErrorTitle_1.ErrorTitle, { symbolicating: true, name: error.name, message: error.message, canHaveDismissButton: canHaveDismissButton }) }));
     }
     if (state.type === 'error') {
-        return (jsx_runtime_1.jsxs("div", { style: container, children: [
-                jsx_runtime_1.jsx(ErrorTitle_1.ErrorTitle, { symbolicating: false, name: error.name, message: error.message, canHaveDismissButton: canHaveDismissButton }), jsx_runtime_1.jsx("div", { style: errorWhileErrorStyle, children: (_a = error.stack) !== null && _a !== void 0 ? _a : 'Check the Terminal and browser console for error messages.' }), jsx_runtime_1.jsxs("div", { style: errorWhileSymbolicatingStyle, children: ["Could not symbolicate the stack trace: ", state.err.message] })
-            ] }));
+        return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsx(ErrorDisplay_1.ErrorDisplay, { keyboardShortcuts: keyboardShortcuts, display: { error, contextSize: 0, stackFrames: [] }, onRetry: onRetry, canHaveDismissButton: canHaveDismissButton, calculateMetadata: calculateMetadata, symbolicationFailure: `Could not symbolicate the stack trace: ${state.err.message}` }) }));
     }
     if (state.type === 'no-record') {
-        return (jsx_runtime_1.jsxs("div", { style: container, children: [
-                jsx_runtime_1.jsx(ErrorTitle_1.ErrorTitle, { symbolicating: false, name: error.name, message: error.message, canHaveDismissButton: canHaveDismissButton }), jsx_runtime_1.jsx("div", { style: errorWhileErrorStyle, children: "Check the Terminal and browser console for error messages." })
-            ] }));
+        return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsx(ErrorDisplay_1.ErrorDisplay, { keyboardShortcuts: keyboardShortcuts, display: { error, contextSize: 0, stackFrames: [] }, onRetry: onRetry, canHaveDismissButton: canHaveDismissButton, calculateMetadata: calculateMetadata, symbolicationFailure: "Could not symbolicate the stack trace." }) }));
     }
-    return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsx(ErrorDisplay_1.ErrorDisplay, { keyboardShortcuts: keyboardShortcuts, display: state.record, onRetry: onRetry, canHaveDismissButton: canHaveDismissButton, calculateMetadata: calculateMetadata }) }));
+    return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsx(ErrorDisplay_1.ErrorDisplay, { keyboardShortcuts: keyboardShortcuts, display: state.record, onRetry: onRetry, canHaveDismissButton: canHaveDismissButton, calculateMetadata: calculateMetadata, symbolicationFailure: null }) }));
 };
 exports.ErrorLoader = ErrorLoader;

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

@@ -42,7 +42,7 @@ const OpenInEditor = ({ stack, canHaveKeyboardShortcuts }) => {
     }, []);
     const openInBrowser = (0, react_1.useCallback)(() => {
         dispatch({ type: 'start' });
-        (0, open_in_editor_1.openInEditor)(stack)
+        (0, open_in_editor_1.openInEditor)(stack, null)
             .then((data) => {
             if (data.success) {
                 dispatchIfMounted({ type: 'succeed' });

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

@@ -48,7 +48,7 @@ const StackElement = ({ s, lineNumberWidth, isFirst, defaultFunctionName }) => {
         if (!canOpenFileLocation) {
             return;
         }
-        (0, open_in_editor_1.openInEditor)(s).catch((err) => {
+        (0, open_in_editor_1.openInEditor)(s, null).catch((err) => {
             // eslint-disable-next-line no-console
             console.log('Could not open in editor', err);
         });