init commit

remotion/node_modules/@remotion/studio/dist/error-overlay/entry-basic.d.ts

@@ -0,0 +1,95 @@
+declare global {
+    const __webpack_hash__: unknown;
+    interface HotNotifierInfo {
+        type: 'self-declined' | 'declined' | 'unaccepted' | 'accepted' | 'disposed' | 'accept-errored' | 'self-accept-errored' | 'self-accept-error-handler-errored';
+        /**
+         * The module in question.
+         */
+        moduleId: number;
+        /**
+         * For errors: the module id owning the accept handler.
+         */
+        dependencyId?: number | undefined;
+        /**
+         * For declined/accepted/unaccepted: the chain from where the update was propagated.
+         */
+        chain?: number[] | undefined;
+        /**
+         * For declined: the module id of the declining parent
+         */
+        parentId?: number | undefined;
+        /**
+         * For accepted: the modules that are outdated and will be disposed
+         */
+        outdatedModules?: number[] | undefined;
+        /**
+         * For accepted: The location of accept handlers that will handle the update
+         */
+        outdatedDependencies?: {
+            [dependencyId: number]: number[];
+        } | undefined;
+        /**
+         * For errors: the thrown error
+         */
+        error?: Error | undefined;
+        /**
+         * For self-accept-error-handler-errored: the error thrown by the module
+         * before the error handler tried to handle it.
+         */
+        originalError?: Error | undefined;
+    }
+    interface AcceptOptions {
+        /**
+         * If true the update process continues even if some modules are not accepted (and would bubble to the entry point).
+         */
+        ignoreUnaccepted?: boolean | undefined;
+        /**
+         * Ignore changes made to declined modules.
+         */
+        ignoreDeclined?: boolean | undefined;
+        /**
+         *  Ignore errors throw in accept handlers, error handlers and while reevaluating module.
+         */
+        ignoreErrored?: boolean | undefined;
+        /**
+         * Notifier for declined modules.
+         */
+        onDeclined?: ((info: HotNotifierInfo) => void) | undefined;
+        /**
+         * Notifier for unaccepted modules.
+         */
+        onUnaccepted?: ((info: HotNotifierInfo) => void) | undefined;
+        /**
+         * Notifier for accepted modules.
+         */
+        onAccepted?: ((info: HotNotifierInfo) => void) | undefined;
+        /**
+         * Notifier for disposed modules.
+         */
+        onDisposed?: ((info: HotNotifierInfo) => void) | undefined;
+        /**
+         * Notifier for errors.
+         */
+        onErrored?: ((info: HotNotifierInfo) => void) | undefined;
+        /**
+         * Indicates that apply() is automatically called by check function
+         */
+        autoApply?: boolean | undefined;
+    }
+    const __webpack_module__: {
+        id: string;
+        exports: unknown;
+        hot: {
+            accept: () => void;
+            dispose: (onDispose: (data: Record<string, unknown>) => void) => void;
+            invalidate: () => void;
+            data?: Record<string, unknown>;
+            addStatusHandler(callback: (status: string) => void): void;
+            status(): string;
+            apply(options?: AcceptOptions): Promise<ModuleId[]>;
+            check(autoApply?: boolean): Promise<null | ModuleId[]>;
+        };
+    };
+    type ModuleId = string | number;
+}
+export declare const startErrorOverlay: () => void;

remotion/node_modules/@remotion/studio/dist/error-overlay/entry-basic.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.startErrorOverlay = void 0;
+const url_state_1 = require("../helpers/url-state");
+const react_overlay_1 = require("./react-overlay");
+const remotion_overlay_1 = require("./remotion-overlay");
+const Overlay_1 = require("./remotion-overlay/Overlay");
+const startErrorOverlay = () => {
+    (0, react_overlay_1.startReportingRuntimeErrors)(() => {
+        if (__webpack_module__.hot) {
+            __webpack_module__.hot.addStatusHandler((status) => {
+                var _a;
+                if (status === 'apply') {
+                    if ((0, react_overlay_1.didUnmountReactApp)()) {
+                        return (0, url_state_1.reloadUrl)();
+                    }
+                    (_a = Overlay_1.setErrorsRef.current) === null || _a === void 0 ? void 0 : _a.setErrors({
+                        type: 'clear',
+                    });
+                }
+            });
+        }
+    });
+    (0, remotion_overlay_1.mountRemotionOverlay)();
+};
+exports.startErrorOverlay = startErrorOverlay;

remotion/node_modules/@remotion/studio/dist/error-overlay/react-overlay/effects/format-warning.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import type { ReactFrame } from './proxy-console';
+export declare function massageWarning(warning: string, frames: ReactFrame[]): {
+    message: string;
+    stack: string;
+};

remotion/node_modules/@remotion/studio/dist/error-overlay/react-overlay/effects/format-warning.js

@@ -0,0 +1,40 @@
+"use strict";
+/*
+    Source code adapted from https://github.com/facebook/create-react-app/tree/main/packages/react-error-overlay and refactored in Typescript. This file is MIT-licensed.
+*/
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.massageWarning = massageWarning;
+function stripInlineStacktrace(message) {
+    return message
+        .split('\n')
+        .filter((line) => !line.match(/^\s*in/))
+        .join('\n'); // "  in Foo"
+}
+function massageWarning(warning, frames) {
+    const message = stripInlineStacktrace(warning);
+    // Reassemble the stack with full filenames provided by React
+    let stack = '';
+    let lastFilename;
+    let lastLineNumber;
+    for (let index = 0; index < frames.length; ++index) {
+        const { fileName, lineNumber } = frames[index];
+        if (fileName === null ||
+            lineNumber === null ||
+            lineNumber === undefined ||
+            fileName === undefined) {
+            continue;
+        }
+        if (fileName === lastFilename &&
+            typeof lineNumber === 'number' &&
+            typeof lastLineNumber === 'number' &&
+            Math.abs(lineNumber - lastLineNumber) < 3) {
+            continue;
+        }
+        lastFilename = fileName;
+        lastLineNumber = lineNumber;
+        let { name } = frames[index];
+        name = name || '(anonymous function)';
+        stack += `in ${name} (at ${fileName}:${lineNumber})\n`;
+    }
+    return { message, stack };
+}

remotion/node_modules/@remotion/studio/dist/error-overlay/react-overlay/effects/proxy-console.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export type ReactFrame = {
+    fileName: string | null;
+    lineNumber: number | null;
+    name: string | null;
+};
+declare const registerReactStack: () => void;
+declare const unregisterReactStack: () => void;
+type ErrorData = {
+    type: 'webpack-error';
+    message: string;
+    frames: ReactFrame[];
+} | {
+    type: 'build-error';
+    error: Error;
+};
+type ConsoleProxyCallback = (data: ErrorData) => void;
+declare const permanentRegister: (type: "error", callback: ConsoleProxyCallback) => void;
+export { permanentRegister, registerReactStack, unregisterReactStack };

remotion/node_modules/@remotion/studio/dist/error-overlay/react-overlay/effects/proxy-console.js

@@ -0,0 +1,64 @@
+"use strict";
+/* eslint-disable no-console */
+/*
+    Source code adapted from https://github.com/facebook/create-react-app/tree/main/packages/react-error-overlay and refactored in Typescript. This file is MIT-licensed.
+*/
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.unregisterReactStack = exports.registerReactStack = exports.permanentRegister = void 0;
+const reactFrameStack = [];
+// This is a stripped down barebones version of this proposal:
+// https://gist.github.com/sebmarkbage/bdefa100f19345229d526d0fdd22830f
+// We're implementing just enough to get the invalid element type warnings
+// to display the component stack in React 15.6+:
+// https://github.com/facebook/react/pull/9679
+const registerReactStack = () => {
+    if (typeof console !== 'undefined') {
+        // @ts-expect-error
+        console.reactStack = (frames) => reactFrameStack.push(frames);
+        // @ts-expect-error
+        console.reactStackEnd = () => reactFrameStack.pop();
+    }
+};
+exports.registerReactStack = registerReactStack;
+const unregisterReactStack = () => {
+    if (typeof console !== 'undefined') {
+        // @ts-expect-error
+        console.reactStack = undefined;
+        // @ts-expect-error
+        console.reactStackEnd = undefined;
+    }
+};
+exports.unregisterReactStack = unregisterReactStack;
+const permanentRegister = function (type, callback) {
+    if (typeof console !== 'undefined') {
+        const orig = console[type];
+        if (typeof orig === 'function') {
+            console[type] = function (...args) {
+                try {
+                    const message = args[0];
+                    if (typeof message === 'string' && reactFrameStack.length > 0) {
+                        callback({
+                            type: 'webpack-error',
+                            message,
+                            frames: reactFrameStack[reactFrameStack.length - 1],
+                        });
+                    }
+                    if (message instanceof Error) {
+                        callback({
+                            type: 'build-error',
+                            error: message,
+                        });
+                    }
+                }
+                catch (err) {
+                    // Warnings must never crash. Rethrow with a clean stack.
+                    setTimeout(() => {
+                        throw err;
+                    });
+                }
+                return orig.apply(this, args);
+            };
+        }
+    }
+};
+exports.permanentRegister = permanentRegister;

remotion/node_modules/@remotion/studio/dist/error-overlay/react-overlay/effects/resolve-file-source.d.ts

@@ -0,0 +1,2 @@
+import type { ErrorLocation, SymbolicatedStackFrame } from '@remotion/studio-shared';
+export declare const resolveFileSource: (location: ErrorLocation, contextLines: number) => Promise<SymbolicatedStackFrame>;

remotion/node_modules/@remotion/studio/dist/error-overlay/react-overlay/effects/resolve-file-source.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveFileSource = void 0;
+const resolveFileSource = async (location, contextLines) => {
+    const res = await fetch(`/api/file-source?f=${encodeURIComponent(location.fileName)}`);
+    const text = await res.text();
+    const lines = text
+        .split('\n')
+        .map((l, i) => {
+        const oneIndexedLineNumber = i + 1;
+        return [oneIndexedLineNumber, l];
+    })
+        .filter(([oneIndexedLineNumber]) => {
+        return (Math.abs(oneIndexedLineNumber - location.lineNumber) <= contextLines);
+    });
+    const scriptCode = lines.map(([num, line]) => {
+        return {
+            content: line,
+            highlight: location.lineNumber === num,
+            lineNumber: num,
+        };
+    });
+    return {
+        originalColumnNumber: location.columnNumber,
+        originalFunctionName: null,
+        originalFileName: location.fileName,
+        originalLineNumber: location.lineNumber,
+        originalScriptCode: scriptCode,
+    };
+};
+exports.resolveFileSource = resolveFileSource;

remotion/node_modules/@remotion/studio/dist/error-overlay/react-overlay/effects/stack-trace-limit.d.ts

@@ -0,0 +1,3 @@
+declare function registerStackTraceLimit(limit?: number): void;
+declare function unregisterStackTraceLimit(): void;
+export { registerStackTraceLimit as register, unregisterStackTraceLimit as unregister, };

remotion/node_modules/@remotion/studio/dist/error-overlay/react-overlay/effects/stack-trace-limit.js

@@ -0,0 +1,42 @@
+"use strict";
+/*
+    Source code adapted from https://github.com/facebook/create-react-app/tree/main/packages/react-error-overlay and refactored in Typescript. This file is MIT-licensed.
+*/
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.register = registerStackTraceLimit;
+exports.unregister = unregisterStackTraceLimit;
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+let stackTraceRegistered = false;
+// Default: https://docs.microsoft.com/en-us/scripting/javascript/reference/stacktracelimit-property-error-javascript
+let restoreStackTraceValue = 10;
+const MAX_STACK_LENGTH = 50;
+function registerStackTraceLimit(limit = MAX_STACK_LENGTH) {
+    if (stackTraceRegistered) {
+        return;
+    }
+    try {
+        restoreStackTraceValue = Error.stackTraceLimit;
+        Error.stackTraceLimit = limit;
+        stackTraceRegistered = true;
+    }
+    catch (_a) {
+        // Not all browsers support this so we don't care if it errors
+    }
+}
+function unregisterStackTraceLimit() {
+    if (!stackTraceRegistered) {
+        return;
+    }
+    try {
+        Error.stackTraceLimit = restoreStackTraceValue;
+        stackTraceRegistered = false;
+    }
+    catch (_a) {
+        // Not all browsers support this so we don't care if it errors
+    }
+}

remotion/node_modules/@remotion/studio/dist/error-overlay/react-overlay/effects/unhandled-error.d.ts

@@ -0,0 +1,4 @@
+type ErrorCallback = (error: Error) => void;
+declare function registerUnhandledError(target: EventTarget, callback: ErrorCallback): void;
+declare function unregisterUnhandledError(target: EventTarget): void;
+export { registerUnhandledError as register, unregisterUnhandledError as unregister, };

remotion/node_modules/@remotion/studio/dist/error-overlay/react-overlay/effects/unhandled-error.js

@@ -0,0 +1,44 @@
+"use strict";
+/*
+    Source code adapted from https://github.com/facebook/create-react-app/tree/main/packages/react-error-overlay and refactored in Typescript. This file is MIT-licensed.
+*/
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.register = registerUnhandledError;
+exports.unregister = unregisterUnhandledError;
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+let boundErrorHandler = null;
+function errorHandler(callback, e) {
+    // @ts-expect-error
+    if (!e.error) {
+        return;
+    }
+    // @ts-expect-error
+    const { error } = e;
+    if (error instanceof Error) {
+        callback(error);
+    }
+    else {
+        // A non-error was thrown, we don't have a trace. :(
+        // Look in your browser's devtools for more information
+        callback(new Error(error));
+    }
+}
+function registerUnhandledError(target, callback) {
+    if (boundErrorHandler !== null) {
+        return;
+    }
+    boundErrorHandler = errorHandler.bind(undefined, callback);
+    target.addEventListener('error', boundErrorHandler);
+}
+function unregisterUnhandledError(target) {
+    if (boundErrorHandler === null) {
+        return;
+    }
+    target.removeEventListener('error', boundErrorHandler);
+    boundErrorHandler = null;
+}

remotion/node_modules/@remotion/studio/dist/error-overlay/react-overlay/effects/unhandled-rejection.d.ts

@@ -0,0 +1,4 @@
+type ErrorCallback = (error: Error) => void;
+declare function registerUnhandledRejection(target: EventTarget, callback: ErrorCallback): void;
+declare function unregisterUnhandledRejection(target: EventTarget): void;
+export { registerUnhandledRejection as register, unregisterUnhandledRejection as unregister, };

remotion/node_modules/@remotion/studio/dist/error-overlay/react-overlay/effects/unhandled-rejection.js

@@ -0,0 +1,40 @@
+"use strict";
+/*
+    Source code adapted from https://github.com/facebook/create-react-app/tree/main/packages/react-error-overlay and refactored in Typescript. This file is MIT-licensed.
+*/
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.register = registerUnhandledRejection;
+exports.unregister = unregisterUnhandledRejection;
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+let boundRejectionHandler = null;
+function rejectionHandler(callback, e) {
+    if (!(e === null || e === void 0 ? void 0 : e.reason)) {
+        return callback(new Error('Unknown'));
+    }
+    const { reason } = e;
+    if (reason instanceof Error) {
+        return callback(reason);
+    }
+    // A non-error was rejected, we don't have a trace :(
+    // Look in your browser's devtools for more information
+    return callback(new Error(reason));
+}
+function registerUnhandledRejection(target, callback) {
+    if (boundRejectionHandler !== null) {
+        return;
+    }
+    boundRejectionHandler = rejectionHandler.bind(undefined, callback);
+    target.addEventListener('unhandledrejection', boundRejectionHandler);
+}
+function unregisterUnhandledRejection(target) {
+    if (boundRejectionHandler === null) {
+        return;
+    }
+    target.removeEventListener('unhandledrejection', boundRejectionHandler);
+    boundRejectionHandler = null;
+}

remotion/node_modules/@remotion/studio/dist/error-overlay/react-overlay/index.d.ts

@@ -0,0 +1,2 @@
+export declare const didUnmountReactApp: () => boolean;
+export declare function startReportingRuntimeErrors(onError: () => void): void;

remotion/node_modules/@remotion/studio/dist/error-overlay/react-overlay/index.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.didUnmountReactApp = void 0;
+exports.startReportingRuntimeErrors = startReportingRuntimeErrors;
+const remotion_1 = require("remotion");
+const listen_to_runtime_errors_1 = require("./listen-to-runtime-errors");
+let stopListeningToRuntimeErrors = null;
+const didUnmountReactApp = () => {
+    var _a;
+    return !((_a = remotion_1.Internals.getPreviewDomElement()) === null || _a === void 0 ? void 0 : _a.hasChildNodes());
+};
+exports.didUnmountReactApp = didUnmountReactApp;
+function startReportingRuntimeErrors(onError) {
+    if (stopListeningToRuntimeErrors !== null) {
+        throw new Error('Already listening');
+    }
+    const handleRuntimeError = () => {
+        onError();
+    };
+    stopListeningToRuntimeErrors = (0, listen_to_runtime_errors_1.listenToRuntimeErrors)(handleRuntimeError);
+}

remotion/node_modules/@remotion/studio/dist/error-overlay/react-overlay/listen-to-runtime-errors.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import type { SymbolicatedStackFrame } from '@remotion/studio-shared';
+export type ErrorRecord = {
+    error: Error;
+    contextSize: number;
+    stackFrames: SymbolicatedStackFrame[];
+};
+export declare const getErrorRecord: (error: Error) => Promise<ErrorRecord | null>;
+export declare function listenToRuntimeErrors(crash: () => void): () => void;

remotion/node_modules/@remotion/studio/dist/error-overlay/react-overlay/listen-to-runtime-errors.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getErrorRecord = void 0;
+exports.listenToRuntimeErrors = listenToRuntimeErrors;
+const Overlay_1 = require("../remotion-overlay/Overlay");
+const format_warning_1 = require("./effects/format-warning");
+const proxy_console_1 = require("./effects/proxy-console");
+const stack_trace_limit_1 = require("./effects/stack-trace-limit");
+const url_state_1 = require("../../helpers/url-state");
+const unhandled_error_1 = require("./effects/unhandled-error");
+const unhandled_rejection_1 = require("./effects/unhandled-rejection");
+const get_stack_frames_1 = require("./utils/get-stack-frames");
+const CONTEXT_SIZE = 3;
+const getErrorRecord = async (error) => {
+    const stackFrames = await (0, get_stack_frames_1.getStackFrames)(error, CONTEXT_SIZE);
+    if (stackFrames === null || stackFrames === undefined) {
+        return null;
+    }
+    return {
+        error,
+        contextSize: CONTEXT_SIZE,
+        stackFrames,
+    };
+};
+exports.getErrorRecord = getErrorRecord;
+const crashWithFrames = (crash) => (error) => {
+    var _a;
+    const didHookOrderChange = error.message.startsWith('Rendered fewer hooks') ||
+        error.message.startsWith('Rendered more hooks');
+    const key = 'remotion.lastCrashBecauseOfHooks';
+    const previousCrashWasBecauseOfHooks = window.localStorage.getItem(key);
+    // When rendering conditional hooks, refreshing does not help.
+    // So we only refresh once.
+    const justRefreshedBecauseOfHooks = previousCrashWasBecauseOfHooks
+        ? Date.now() - Number(previousCrashWasBecauseOfHooks) < 5000
+        : false;
+    window.localStorage.setItem('remotion.lastCrashBecauseOfHooks', String(Date.now()));
+    if (didHookOrderChange && !justRefreshedBecauseOfHooks) {
+        // eslint-disable-next-line no-console
+        console.log('Hook order changed. Reloading app...');
+        window.remotion_unsavedProps = false;
+        (0, url_state_1.reloadUrl)();
+    }
+    else {
+        (_a = Overlay_1.setErrorsRef.current) === null || _a === void 0 ? void 0 : _a.addError(error);
+        crash();
+    }
+};
+function listenToRuntimeErrors(crash) {
+    const crashWithFramesRunTime = crashWithFrames(crash);
+    (0, unhandled_error_1.register)(window, (error) => {
+        return crashWithFramesRunTime({
+            message: error.message,
+            stack: error.stack,
+            name: error.name,
+        });
+    });
+    (0, unhandled_rejection_1.register)(window, (error) => {
+        return crashWithFramesRunTime(error);
+    });
+    (0, stack_trace_limit_1.register)();
+    (0, proxy_console_1.registerReactStack)();
+    (0, proxy_console_1.permanentRegister)('error', (d) => {
+        if (d.type === 'webpack-error') {
+            const { message, frames } = d;
+            const data = (0, format_warning_1.massageWarning)(message, frames);
+            crashWithFramesRunTime({
+                message: data.message,
+                stack: data.stack,
+                name: '',
+            });
+        }
+        if (d.type === 'build-error') {
+            crashWithFramesRunTime(d.error);
+        }
+    });
+    return function () {
+        (0, stack_trace_limit_1.unregister)();
+        (0, unhandled_rejection_1.unregister)(window);
+        (0, unhandled_error_1.unregister)(window);
+        (0, proxy_console_1.unregisterReactStack)();
+    };
+}

remotion/node_modules/@remotion/studio/dist/error-overlay/react-overlay/utils/get-lines-around.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import type { ScriptLine } from '@remotion/studio-shared';
+/**
+ *
+ * @param {number} line The line number to provide context around.
+ * @param {number} count The number of lines you'd like for context.
+ * @param {string[] | string} lines The source code.
+ */
+export declare function getLinesAround(line: number, count: number, lines: string[]): ScriptLine[];

remotion/node_modules/@remotion/studio/dist/error-overlay/react-overlay/utils/get-lines-around.js

@@ -0,0 +1,23 @@
+"use strict";
+/*
+    Source code adapted from https://github.com/facebook/create-react-app/tree/main/packages/react-error-overlay and refactored in Typescript. This file is MIT-licensed.
+*/
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getLinesAround = getLinesAround;
+/**
+ *
+ * @param {number} line The line number to provide context around.
+ * @param {number} count The number of lines you'd like for context.
+ * @param {string[] | string} lines The source code.
+ */
+function getLinesAround(line, count, lines) {
+    const result = [];
+    for (let index = Math.max(0, line - 1 - count); index <= Math.min(lines.length - 1, line - 1 + count); ++index) {
+        result.push({
+            lineNumber: index + 1,
+            content: lines[index],
+            highlight: index === line - 1,
+        });
+    }
+    return result;
+}

remotion/node_modules/@remotion/studio/dist/error-overlay/react-overlay/utils/get-source-map.d.ts

@@ -0,0 +1,8 @@
+import { SourceMapConsumer } from 'source-map';
+export type OriginalPosition = {
+    line: number | null;
+    column: number | null;
+    source: string | null;
+};
+export declare const getOriginalPosition: (source_map: SourceMapConsumer, line: number, column: number) => OriginalPosition;
+export declare function getSourceMap(fileUri: string, fileContents: string): Promise<SourceMapConsumer | null>;

remotion/node_modules/@remotion/studio/dist/error-overlay/react-overlay/utils/get-source-map.js

@@ -0,0 +1,51 @@
+"use strict";
+/*
+    Source code adapted from https://github.com/facebook/create-react-app/tree/main/packages/react-error-overlay and refactored in Typescript. This file is MIT-licensed.
+*/
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getOriginalPosition = void 0;
+exports.getSourceMap = getSourceMap;
+const source_map_1 = require("source-map");
+const getOriginalPosition = (source_map, line, column) => {
+    const result = source_map.originalPositionFor({
+        line,
+        column,
+    });
+    return { line: result.line, column: result.column, source: result.source };
+};
+exports.getOriginalPosition = getOriginalPosition;
+function extractSourceMapUrl(fileContents) {
+    const regex = /\/\/[#@] ?sourceMappingURL=([^\s'"]+)\s*$/gm;
+    let match = null;
+    for (;;) {
+        const next = regex.exec(fileContents);
+        if (next == null) {
+            break;
+        }
+        match = next;
+    }
+    if (!(match === null || match === void 0 ? void 0 : match[1])) {
+        return null;
+    }
+    return match[1].toString();
+}
+// TODO: Can import this from BrowserSafeApis.getSourceMapRemotely
+async function getSourceMap(fileUri, fileContents) {
+    const sm = extractSourceMapUrl(fileContents);
+    if (sm === null) {
+        return null;
+    }
+    if (sm.indexOf('data:') === 0) {
+        const base64 = /^data:application\/json;([\w=:"-]+;)*base64,/;
+        const match2 = sm.match(base64);
+        if (!match2) {
+            throw new Error('Sorry, non-base64 inline source-map encoding is not supported.');
+        }
+        const converted = window.atob(sm.substring(match2[0].length));
+        return new source_map_1.SourceMapConsumer(JSON.parse(converted));
+    }
+    const index = fileUri.lastIndexOf('/');
+    const url = fileUri.substring(0, index + 1) + sm;
+    const obj = await fetch(url).then((res) => res.json());
+    return new source_map_1.SourceMapConsumer(obj);
+}

remotion/node_modules/@remotion/studio/dist/error-overlay/react-overlay/utils/get-stack-frames.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import type { SymbolicatedStackFrame } from '@remotion/studio-shared';
+export declare const getStackFrames: (error: Error, contextSize: number) => Promise<SymbolicatedStackFrame[] | null>;

remotion/node_modules/@remotion/studio/dist/error-overlay/react-overlay/utils/get-stack-frames.js

@@ -0,0 +1,19 @@
+"use strict";
+/*
+    Source code adapted from https://github.com/facebook/create-react-app/tree/main/packages/react-error-overlay and refactored in Typescript. This file is MIT-licensed.
+*/
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStackFrames = void 0;
+const parser_1 = require("./parser");
+const unmapper_1 = require("./unmapper");
+const getStackFrames = async (error, contextSize) => {
+    const parsedFrames = await (0, parser_1.parseError)(error, contextSize);
+    const enhancedFrames = await (0, unmapper_1.unmap)(parsedFrames, contextSize);
+    if (enhancedFrames
+        .map((f) => f.originalFileName)
+        .filter((f_1) => f_1 !== null && f_1 !== undefined).length === 0) {
+        return null;
+    }
+    return enhancedFrames;
+};
+exports.getStackFrames = getStackFrames;

remotion/node_modules/@remotion/studio/dist/error-overlay/react-overlay/utils/make-stack-frame.d.ts

@@ -0,0 +1,7 @@
+import type { StackFrame } from '@remotion/studio-shared';
+export declare const makeStackFrame: ({ functionName, fileName, lineNumber, columnNumber, }: {
+    functionName: string | null;
+    fileName: string;
+    lineNumber: number;
+    columnNumber: number;
+}) => StackFrame;

remotion/node_modules/@remotion/studio/dist/error-overlay/react-overlay/utils/make-stack-frame.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeStackFrame = void 0;
+const makeStackFrame = ({ functionName, fileName, lineNumber, columnNumber, }) => {
+    if (functionName && functionName.indexOf('Object.') === 0) {
+        functionName = functionName.slice('Object.'.length);
+    }
+    if (
+    // Chrome has a bug with inferring function.name:
+    // https://github.com/facebook/create-react-app/issues/2097
+    // Let's ignore a meaningless name we get for top-level modules.
+    functionName === 'friendlySyntaxErrorLabel' ||
+        functionName === 'exports.__esModule' ||
+        functionName === '<anonymous>' ||
+        !functionName) {
+        functionName = null;
+    }
+    return {
+        columnNumber,
+        fileName,
+        functionName,
+        lineNumber,
+    };
+};
+exports.makeStackFrame = makeStackFrame;

remotion/node_modules/@remotion/studio/dist/error-overlay/react-overlay/utils/parser.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import type { SomeStackFrame, StackFrame } from '@remotion/studio-shared';
+export declare function parseStack(stack: string[]): StackFrame[];
+export declare const parseError: (error: Error | string | string[], contextLines: number) => Promise<SomeStackFrame[]>;

remotion/node_modules/@remotion/studio/dist/error-overlay/react-overlay/utils/parser.js

@@ -0,0 +1,112 @@
+"use strict";
+/*
+    Source code adapted from https://github.com/facebook/create-react-app/tree/main/packages/react-error-overlay and refactored in Typescript. This file is MIT-licensed.
+*/
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseError = void 0;
+exports.parseStack = parseStack;
+const studio_shared_1 = require("@remotion/studio-shared");
+const resolve_file_source_1 = require("../effects/resolve-file-source");
+const make_stack_frame_1 = require("./make-stack-frame");
+const regexExtractLocation = /\(?(.+?)(?::(\d+))?(?::(\d+))?\)?$/;
+function extractLocation(token) {
+    const execed = regexExtractLocation.exec(token);
+    if (!execed) {
+        throw new Error('Could not match in extractLocation');
+    }
+    return execed.slice(1).map((v) => {
+        const p = Number(v);
+        if (!isNaN(p)) {
+            return p;
+        }
+        return v;
+    });
+}
+const regexValidFrame_Chrome = /^\s*(at|in)\s.+(:\d+)/;
+const regexValidFrame_FireFox = /(^|@)\S+:\d+|.+line\s+\d+\s+>\s+(eval|Function).+/;
+function parseStack(stack) {
+    const frames = stack
+        .filter((e) => regexValidFrame_Chrome.test(e) || regexValidFrame_FireFox.test(e))
+        .map((e) => {
+        if (regexValidFrame_FireFox.test(e)) {
+            // Strip eval, we don't care about it
+            let isEval = false;
+            if (/ > (eval|Function)/.test(e)) {
+                e = e.replace(/ line (\d+)(?: > eval line \d+)* > (eval|Function):\d+:\d+/g, ':$1');
+                isEval = true;
+            }
+            const _data = e.split(/[@]/g);
+            const _last = _data.pop();
+            if (!_last) {
+                throw new Error('could not get last');
+            }
+            const [_fileName, _lineNumber, _columnNumber] = extractLocation(_last);
+            return (0, make_stack_frame_1.makeStackFrame)({
+                functionName: _data.join('@') || (isEval ? 'eval' : null),
+                fileName: _fileName,
+                lineNumber: _lineNumber,
+                columnNumber: _columnNumber,
+            });
+        }
+        // Strip eval, we don't care about it
+        if (e.indexOf('(eval ') !== -1) {
+            e = e.replace(/(\(eval at [^()]*)|(\),.*$)/g, '');
+        }
+        if (e.indexOf('(at ') !== -1) {
+            e = e.replace(/\(at /, '(');
+        }
+        const data = e.trim().split(/\s+/g).slice(1);
+        const last = data.pop();
+        if (!last) {
+            throw new Error('could not get last');
+        }
+        const [fileName, lineNumber, columnNumber] = extractLocation(last);
+        return (0, make_stack_frame_1.makeStackFrame)({
+            functionName: data.join(' ') || null,
+            fileName,
+            lineNumber,
+            columnNumber,
+        });
+    });
+    return frames;
+}
+const parseError = async (error, contextLines) => {
+    if (error === null) {
+        throw new Error('You cannot pass a null object.');
+    }
+    if (typeof error === 'string') {
+        return parseStack(error.split('\n')).map((frame) => {
+            return {
+                type: 'transpiled',
+                frame,
+            };
+        });
+    }
+    if (Array.isArray(error)) {
+        return parseStack(error).map((frame) => {
+            return {
+                type: 'transpiled',
+                frame,
+            };
+        });
+    }
+    const errorLocation = (0, studio_shared_1.getLocationFromBuildError)(error);
+    if (errorLocation) {
+        return [
+            {
+                type: 'symbolicated',
+                frame: await (0, resolve_file_source_1.resolveFileSource)(errorLocation, contextLines),
+            },
+        ];
+    }
+    if (typeof error.stack === 'string') {
+        return parseStack(error.stack.split('\n')).map((frame) => {
+            return {
+                type: 'transpiled',
+                frame,
+            };
+        });
+    }
+    return [];
+};
+exports.parseError = parseError;

remotion/node_modules/@remotion/studio/dist/error-overlay/react-overlay/utils/unmapper.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import type { SomeStackFrame, SymbolicatedStackFrame } from '@remotion/studio-shared';
+export declare const getFileContents: (fileName: string) => Promise<string>;
+export declare const unmap: (frames: SomeStackFrame[], contextLines: number) => Promise<SymbolicatedStackFrame[]>;

remotion/node_modules/@remotion/studio/dist/error-overlay/react-overlay/utils/unmapper.js

@@ -0,0 +1,57 @@
+"use strict";
+/*
+    Source code adapted from https://github.com/facebook/create-react-app/tree/main/packages/react-error-overlay and refactored in Typescript. This file is MIT-licensed.
+*/
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.unmap = exports.getFileContents = void 0;
+const remotion_1 = require("remotion");
+const get_lines_around_1 = require("./get-lines-around");
+const get_source_map_1 = require("./get-source-map");
+const getFileContents = async (fileName) => {
+    const res = await fetch(fileName);
+    const fileContents = await res.text();
+    return fileContents;
+};
+exports.getFileContents = getFileContents;
+const unmap = async (frames, contextLines) => {
+    const transpiled = frames
+        .filter((s) => s.type === 'transpiled')
+        .map((s) => s.frame);
+    const uniqueFileNames = [
+        ...new Set(transpiled.map((f) => f.fileName).filter(remotion_1.Internals.truthy)),
+    ];
+    const maps = await Promise.all(uniqueFileNames.map(async (fileName) => {
+        const fileContents = await (0, exports.getFileContents)(fileName);
+        return (0, get_source_map_1.getSourceMap)(fileName, fileContents);
+    }));
+    const mapValues = {};
+    for (let i = 0; i < uniqueFileNames.length; i++) {
+        mapValues[uniqueFileNames[i]] = maps[i];
+    }
+    return frames
+        .map((frame) => {
+        if (frame.type === 'symbolicated') {
+            return frame.frame;
+        }
+        const map = mapValues[frame.frame.fileName];
+        if (!map) {
+            return null;
+        }
+        const pos = (0, get_source_map_1.getOriginalPosition)(map, frame.frame.lineNumber, frame.frame.columnNumber);
+        const { functionName } = frame.frame;
+        let hasSource = null;
+        hasSource = pos.source ? map.sourceContentFor(pos.source, false) : null;
+        const scriptCode = hasSource && pos.line
+            ? (0, get_lines_around_1.getLinesAround)(pos.line, contextLines, hasSource.split('\n'))
+            : null;
+        return {
+            originalColumnNumber: pos.column,
+            originalFileName: pos.source,
+            originalFunctionName: functionName,
+            originalLineNumber: pos.line,
+            originalScriptCode: scriptCode,
+        };
+    })
+        .filter(remotion_1.Internals.truthy);
+};
+exports.unmap = unmap;

remotion/node_modules/@remotion/studio/dist/error-overlay/remotion-overlay/AskOnDiscord.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const AskOnDiscord: React.FC<{
+    readonly canHaveKeyboardShortcuts: boolean;
+}>;

remotion/node_modules/@remotion/studio/dist/error-overlay/remotion-overlay/AskOnDiscord.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AskOnDiscord = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const DISCORD_LINK = 'https://remotion.dev/discord';
+const react_1 = require("react");
+const Button_1 = require("../../components/Button");
+const use_keybinding_1 = require("../../helpers/use-keybinding");
+const ShortcutHint_1 = require("./ShortcutHint");
+const AskOnDiscord = ({ canHaveKeyboardShortcuts }) => {
+    const openInBrowser = (0, react_1.useCallback)(() => {
+        window.open(DISCORD_LINK, '_blank');
+    }, []);
+    const { registerKeybinding } = (0, use_keybinding_1.useKeybinding)();
+    (0, react_1.useEffect)(() => {
+        if (!canHaveKeyboardShortcuts) {
+            return;
+        }
+        const onEditor = () => {
+            openInBrowser();
+        };
+        const { unregister } = registerKeybinding({
+            event: 'keydown',
+            key: 'd',
+            callback: onEditor,
+            commandCtrlKey: true,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
+            keepRegisteredWhenNotHighestContext: false,
+        });
+        return () => unregister();
+    }, [canHaveKeyboardShortcuts, openInBrowser, registerKeybinding]);
+    return ((0, jsx_runtime_1.jsxs)(Button_1.Button, { onClick: openInBrowser, children: ["Ask on Discord", ' ', canHaveKeyboardShortcuts ? ((0, jsx_runtime_1.jsx)(ShortcutHint_1.ShortcutHint, { keyToPress: "d", cmdOrCtrl: true })) : null] }));
+};
+exports.AskOnDiscord = AskOnDiscord;

remotion/node_modules/@remotion/studio/dist/error-overlay/remotion-overlay/CalculateMetadataErrorExplainer.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const CalculateMetadataErrorExplainer: React.FC<{}>;

remotion/node_modules/@remotion/studio/dist/error-overlay/remotion-overlay/CalculateMetadataErrorExplainer.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CalculateMetadataErrorExplainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styles_1 = require("../../components/Menu/styles");
+const colors_1 = require("../../helpers/colors");
+const CalculateMetadataErrorExplainer = () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: style, children: ["This error occured while calling", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "calculateMetadata()" }), "."] }));
+};
+exports.CalculateMetadataErrorExplainer = CalculateMetadataErrorExplainer;
+const style = {
+    borderRadius: 3,
+    color: 'white',
+    padding: 12,
+    backgroundColor: colors_1.BORDER_COLOR,
+    fontSize: 14,
+    fontFamily: 'sans-serif',
+};

remotion/node_modules/@remotion/studio/dist/error-overlay/remotion-overlay/CodeFrame.d.ts

@@ -0,0 +1,6 @@
+import type { ScriptLine } from '@remotion/studio-shared';
+import React from 'react';
+export declare const CodeFrame: React.FC<{
+    readonly source: ScriptLine[];
+    readonly lineNumberWidth: number;
+}>;

remotion/node_modules/@remotion/studio/dist/error-overlay/remotion-overlay/CodeFrame.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodeFrame = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const is_menu_item_1 = require("../../components/Menu/is-menu-item");
+const colors_1 = require("../../helpers/colors");
+const container = {
+    display: 'flex',
+    flexDirection: 'row',
+    width: '100%',
+};
+const frame = {
+    backgroundColor: '#070707',
+    marginBottom: 20,
+    overflowY: 'auto',
+};
+const lineNumber = {
+    whiteSpace: 'pre',
+    paddingRight: 12,
+    color: 'inherit',
+    fontSize: 14,
+    lineHeight: 1.7,
+    width: 60,
+    flexShrink: 0,
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    fontFamily: 'monospace',
+};
+const CodeFrame = ({ source, lineNumberWidth }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { style: frame, className: is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME, children: source.map((s, j) => {
+            return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                            ...lineNumber,
+                            backgroundColor: s.highlight ? 'white' : '#121212',
+                            color: s.highlight ? 'black' : 'rgba(255, 255, 255, 0.6)',
+                        }, children: String(s.lineNumber).padStart(lineNumberWidth, ' ') }), (0, jsx_runtime_1.jsx)("div", { style: {
+                            fontFamily: 'monospace',
+                            whiteSpace: 'pre',
+                            tabSize: 2,
+                            color: s.highlight ? 'white' : 'rgba(255, 255, 255, 0.6)',
+                            backgroundColor: s.highlight ? colors_1.BLUE : 'transparent',
+                            lineHeight: 1.7,
+                            paddingRight: 12,
+                            paddingLeft: 12,
+                        }, children: s.content })] }, j));
+        }) }));
+};
+exports.CodeFrame = CodeFrame;

remotion/node_modules/@remotion/studio/dist/error-overlay/remotion-overlay/CompositionIdListItem.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare const listItemStyle: React.CSSProperties;
+export declare const listItemActiveStyle: React.CSSProperties;
+export declare const listItemHoverStyle: React.CSSProperties;
+export declare const CompositionIdListItem: React.FC<{
+    readonly id: string;
+    readonly isActive?: boolean;
+    readonly onSelect: (id: string) => void;
+}>;

remotion/node_modules/@remotion/studio/dist/error-overlay/remotion-overlay/CompositionIdListItem.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CompositionIdListItem = exports.listItemHoverStyle = exports.listItemActiveStyle = exports.listItemStyle = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const colors_1 = require("../../helpers/colors");
+exports.listItemStyle = {
+    padding: 8,
+    cursor: 'pointer',
+    borderRadius: 4,
+    lineHeight: 1.4,
+    color: colors_1.TEXT_COLOR,
+    fontFamily: 'inherit',
+    fontSize: 14,
+};
+exports.listItemActiveStyle = {
+    backgroundColor: colors_1.SELECTED_BACKGROUND,
+};
+exports.listItemHoverStyle = {
+    backgroundColor: colors_1.CLEAR_HOVER,
+};
+const CompositionIdListItem = ({ id, isActive, onSelect }) => {
+    const [hover, setHover] = react_1.default.useState(false);
+    return ((0, jsx_runtime_1.jsx)("div", { role: "button", onPointerEnter: () => setHover(true), onPointerLeave: () => setHover(false), onClick: () => onSelect(id), style: {
+            ...exports.listItemStyle,
+            ...(hover ? exports.listItemHoverStyle : {}),
+            ...(isActive ? exports.listItemActiveStyle : {}),
+        }, title: id, children: id }));
+};
+exports.CompositionIdListItem = CompositionIdListItem;

remotion/node_modules/@remotion/studio/dist/error-overlay/remotion-overlay/CompositionIdsDropdown.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const CompositionIdsDropdown: React.FC<{
+    readonly compositionIds: readonly string[];
+    readonly currentId?: string | null;
+}>;

remotion/node_modules/@remotion/studio/dist/error-overlay/remotion-overlay/CompositionIdsDropdown.js

@@ -0,0 +1,103 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CompositionIdsDropdown = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Button_1 = require("../../components/Button");
+const colors_1 = require("../../helpers/colors");
+const CompositionIdListItem_1 = require("./CompositionIdListItem");
+const carets_1 = require("./carets");
+const containerStyle = {
+    display: 'inline-block',
+    position: 'relative',
+};
+// Button styling provided by shared Button component
+const dropdownStyle = {
+    position: 'absolute',
+    top: '110%',
+    left: 0,
+    width: 320,
+    maxHeight: 300,
+    overflowY: 'auto',
+    backgroundColor: colors_1.INPUT_BACKGROUND,
+    border: `1px solid ${colors_1.INPUT_BORDER_COLOR_UNHOVERED}`,
+    borderRadius: 8,
+    padding: 8,
+    boxShadow: '0 6px 24px rgba(0,0,0,0.35)',
+    zIndex: 1000,
+    fontFamily: 'inherit',
+    fontSize: 14,
+};
+const searchStyle = {
+    width: '100%',
+    padding: '6px 8px',
+    borderRadius: 6,
+    border: `1px solid ${colors_1.INPUT_BORDER_COLOR_UNHOVERED}`,
+    background: colors_1.INPUT_BACKGROUND,
+    color: colors_1.TEXT_COLOR,
+    marginBottom: 8,
+    outline: 'none',
+    fontFamily: 'inherit',
+    fontSize: 14,
+};
+const CompositionIdsDropdown = ({ compositionIds, currentId }) => {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const [query, setQuery] = (0, react_1.useState)('');
+    const containerRef = (0, react_1.useRef)(null);
+    const filtered = (0, react_1.useMemo)(() => {
+        const q = query.trim().toLowerCase();
+        if (!q) {
+            return compositionIds;
+        }
+        return compositionIds.filter((id) => id.toLowerCase().includes(q));
+    }, [compositionIds, query]);
+    const onSelect = (id) => {
+        const isQuery = window.remotion_isReadOnlyStudio;
+        if (isQuery) {
+            window.location.href = `${window.location.pathname}?/${id}`;
+        }
+        else {
+            window.location.href = `/${id}`;
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        if (!open) {
+            return;
+        }
+        const onClickAway = (e) => {
+            if (!containerRef.current) {
+                return;
+            }
+            if (!containerRef.current.contains(e.target)) {
+                setOpen(false);
+            }
+        };
+        const onKey = (e) => {
+            if (e.key === 'Escape') {
+                setOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', onClickAway);
+        document.addEventListener('touchstart', onClickAway, { passive: true });
+        document.addEventListener('keydown', onKey);
+        return () => {
+            document.removeEventListener('mousedown', onClickAway);
+            document.removeEventListener('touchstart', onClickAway);
+            document.removeEventListener('keydown', onKey);
+        };
+    }, [open, containerRef]);
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, style: containerStyle, children: [(0, jsx_runtime_1.jsxs)(Button_1.Button, { onClick: () => setOpen((p) => !p), buttonContainerStyle: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    gap: 8,
+                    minWidth: 180,
+                }, children: [(0, jsx_runtime_1.jsx)("span", { style: {
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                            fontSize: '14px',
+                            lineHeight: '24px',
+                        }, children: currentId !== null && currentId !== void 0 ? currentId : 'Select composition' }), (0, jsx_runtime_1.jsx)(carets_1.CaretDown, { size: 20, invert: open })] }), open ? ((0, jsx_runtime_1.jsxs)("div", { style: dropdownStyle, children: [(0, jsx_runtime_1.jsx)("input", { value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Search compositions...", style: searchStyle, "aria-label": "Search compositions" }), (0, jsx_runtime_1.jsx)("div", { children: filtered.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { style: { opacity: 0.7, padding: 8, textAlign: 'center' }, children: "No compositions found" })) : (filtered.map((id) => ((0, jsx_runtime_1.jsx)(CompositionIdListItem_1.CompositionIdListItem, { id: id, isActive: id === currentId, onSelect: onSelect }, id)))) })] })) : null] }));
+};
+exports.CompositionIdsDropdown = CompositionIdsDropdown;

remotion/node_modules/@remotion/studio/dist/error-overlay/remotion-overlay/DismissButton.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DismissButton: React.FC;

remotion/node_modules/@remotion/studio/dist/error-overlay/remotion-overlay/DismissButton.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DismissButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const url_state_1 = require("../../helpers/url-state");
+const size = {
+    height: 20,
+    width: 20,
+};
+const style = {
+    appearance: 'none',
+    WebkitAppearance: 'none',
+    backgroundColor: 'transparent',
+    border: 'none',
+    cursor: 'pointer',
+};
+const DismissButton = () => {
+    const dismiss = (0, react_1.useCallback)(() => {
+        (0, url_state_1.clearUrl)();
+    }, []);
+    return ((0, jsx_runtime_1.jsx)("button", { type: "button", style: style, onClick: dismiss, children: (0, jsx_runtime_1.jsx)("svg", { focusable: "false", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 352 512", style: size, children: (0, jsx_runtime_1.jsx)("path", { fill: "white", d: "M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z" }) }) }));
+};
+exports.DismissButton = DismissButton;

remotion/node_modules/@remotion/studio/dist/error-overlay/remotion-overlay/ErrorDisplay.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { ErrorRecord } from '../react-overlay/listen-to-runtime-errors';
+export type OnRetry = null | (() => void);
+export declare const ErrorDisplay: React.FC<{
+    readonly display: ErrorRecord;
+    readonly keyboardShortcuts: boolean;
+    readonly onRetry: OnRetry;
+    readonly canHaveDismissButton: boolean;
+    readonly calculateMetadata: boolean;
+}>;

remotion/node_modules/@remotion/studio/dist/error-overlay/remotion-overlay/ErrorDisplay.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorDisplay = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const studio_shared_1 = require("@remotion/studio-shared");
+const react_1 = require("react");
+const is_menu_item_1 = require("../../components/Menu/is-menu-item");
+const layout_1 = require("../../components/layout");
+const url_state_1 = require("../../helpers/url-state");
+const AskOnDiscord_1 = require("./AskOnDiscord");
+const CalculateMetadataErrorExplainer_1 = require("./CalculateMetadataErrorExplainer");
+const CompositionIdsDropdown_1 = require("./CompositionIdsDropdown");
+const ErrorTitle_1 = require("./ErrorTitle");
+const HelpLink_1 = require("./HelpLink");
+const OpenInEditor_1 = require("./OpenInEditor");
+const Retry_1 = require("./Retry");
+const SearchGitHubIssues_1 = require("./SearchGitHubIssues");
+const StackFrame_1 = require("./StackFrame");
+const get_help_link_1 = require("./get-help-link");
+const stack = {
+    marginTop: 17,
+    overflowX: 'scroll',
+    marginBottom: '10vh',
+};
+const spacer = {
+    width: 5,
+    display: 'inline-block',
+};
+const ErrorDisplay = ({ display, keyboardShortcuts, onRetry, canHaveDismissButton, calculateMetadata, }) => {
+    var _a;
+    const compositionIds = (_a = window === null || window === void 0 ? void 0 : window.remotion_seenCompositionIds) !== null && _a !== void 0 ? _a : [];
+    const highestLineNumber = Math.max(...display.stackFrames
+        .map((s) => s.originalScriptCode)
+        .flat(1)
+        .map((s) => { var _a; return (_a = s === null || s === void 0 ? void 0 : s.lineNumber) !== null && _a !== void 0 ? _a : 0; }));
+    const message = (0, react_1.useMemo)(() => {
+        // Format compilation errors
+        const location = (0, studio_shared_1.getLocationFromBuildError)(display.error);
+        if (!location) {
+            return display.error.message;
+        }
+        return location.message
+            .replace(/\\n/g, '\n')
+            .replace(/\\t/g, '  ')
+            .replace(/^error:/, '')
+            .trim();
+    }, [display.error]);
+    const lineNumberWidth = String(highestLineNumber).length;
+    const helpLink = (0, get_help_link_1.getHelpLink)(message);
+    const getCurrentCompositionId = () => {
+        var _a;
+        const route = (0, url_state_1.getRoute)();
+        const id = route.startsWith('/') ? route.slice(1) : route;
+        return compositionIds.includes(id) ? id : ((_a = compositionIds[0]) !== null && _a !== void 0 ? _a : null);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(ErrorTitle_1.ErrorTitle, { symbolicating: false, name: display.error.name, message: message, canHaveDismissButton: canHaveDismissButton }), helpLink ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(HelpLink_1.HelpLink, { link: helpLink, canHaveKeyboardShortcuts: keyboardShortcuts }), (0, jsx_runtime_1.jsx)("div", { style: spacer })] })) : null, display.stackFrames.length > 0 && window.remotion_editorName ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OpenInEditor_1.OpenInEditor, { canHaveKeyboardShortcuts: keyboardShortcuts, stack: display.stackFrames[0] }), (0, jsx_runtime_1.jsx)("div", { style: spacer })] })) : null, compositionIds.length > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(CompositionIdsDropdown_1.CompositionIdsDropdown, { compositionIds: compositionIds, currentId: getCurrentCompositionId() }), (0, jsx_runtime_1.jsx)("div", { style: spacer })] })) : null, (0, jsx_runtime_1.jsx)(SearchGitHubIssues_1.SearchGithubIssues, { canHaveKeyboardShortcuts: keyboardShortcuts, message: display.error.message }), (0, jsx_runtime_1.jsx)("div", { style: spacer }), (0, jsx_runtime_1.jsx)(AskOnDiscord_1.AskOnDiscord, { canHaveKeyboardShortcuts: keyboardShortcuts }), onRetry ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: spacer }), (0, jsx_runtime_1.jsx)(Retry_1.RetryButton, { onClick: onRetry })] })) : null, calculateMetadata ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 0.5 }), (0, jsx_runtime_1.jsx)(CalculateMetadataErrorExplainer_1.CalculateMetadataErrorExplainer, {})] })) : null, (0, jsx_runtime_1.jsx)("div", { style: stack, className: is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME, children: display.stackFrames.map((s, i) => {
+                    return ((0, 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));
+                }) })] }));
+};
+exports.ErrorDisplay = ErrorDisplay;

remotion/node_modules/@remotion/studio/dist/error-overlay/remotion-overlay/ErrorLoader.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { OnRetry } from './ErrorDisplay';
+export declare const ErrorLoader: React.FC<{
+    readonly error: Error;
+    readonly keyboardShortcuts: boolean;
+    readonly onRetry: OnRetry;
+    readonly canHaveDismissButton: boolean;
+    readonly calculateMetadata: boolean;
+}>;

remotion/node_modules/@remotion/studio/dist/error-overlay/remotion-overlay/ErrorLoader.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorLoader = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const listen_to_runtime_errors_1 = require("../react-overlay/listen-to-runtime-errors");
+const ErrorDisplay_1 = require("./ErrorDisplay");
+const ErrorTitle_1 = require("./ErrorTitle");
+const container = {
+    width: '100%',
+    maxWidth: 1000,
+    paddingLeft: 14,
+    paddingRight: 14,
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    fontFamily: 'SF Pro Text, sans-serif',
+    paddingTop: '5vh',
+};
+const errorWhileErrorStyle = {
+    color: 'white',
+    lineHeight: 1.5,
+    whiteSpace: 'pre',
+};
+const ErrorLoader = ({ error, keyboardShortcuts, onRetry, canHaveDismissButton, calculateMetadata, }) => {
+    const [state, setState] = (0, react_1.useState)({
+        type: 'loading',
+    });
+    (0, react_1.useEffect)(() => {
+        (0, listen_to_runtime_errors_1.getErrorRecord)(error)
+            .then((record) => {
+            if (record) {
+                setState({
+                    type: 'symbolicated',
+                    record,
+                });
+            }
+            else {
+                setState({
+                    type: 'no-record',
+                });
+            }
+        })
+            .catch((err) => {
+            setState({
+                err,
+                type: 'error',
+            });
+        });
+    }, [error]);
+    if (state.type === 'loading') {
+        return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsx)(ErrorTitle_1.ErrorTitle, { symbolicating: true, name: error.name, message: error.message, canHaveDismissButton: canHaveDismissButton }) }));
+    }
+    if (state.type === 'error') {
+        return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(ErrorTitle_1.ErrorTitle, { symbolicating: false, name: error.name, message: error.message, canHaveDismissButton: canHaveDismissButton }), (0, jsx_runtime_1.jsx)("div", { style: errorWhileErrorStyle, children: "Error while getting stack trace:" }), (0, jsx_runtime_1.jsx)("div", { style: errorWhileErrorStyle, children: state.err.stack }), (0, jsx_runtime_1.jsx)("div", { style: errorWhileErrorStyle, children: "Report this in the Remotion repo." })] }));
+    }
+    if (state.type === 'no-record') {
+        return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(ErrorTitle_1.ErrorTitle, { symbolicating: false, name: error.name, message: error.message, canHaveDismissButton: canHaveDismissButton }), (0, jsx_runtime_1.jsx)("div", { style: errorWhileErrorStyle, children: "Check the Terminal and browser console for error messages." })] }));
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsx)(ErrorDisplay_1.ErrorDisplay, { keyboardShortcuts: keyboardShortcuts, display: state.record, onRetry: onRetry, canHaveDismissButton: canHaveDismissButton, calculateMetadata: calculateMetadata }) }));
+};
+exports.ErrorLoader = ErrorLoader;

remotion/node_modules/@remotion/studio/dist/error-overlay/remotion-overlay/ErrorMessage.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const ErrorMessage: React.FC<{
+    readonly message: string;
+}>;

remotion/node_modules/@remotion/studio/dist/error-overlay/remotion-overlay/ErrorMessage.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorMessage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const player_1 = require("@remotion/player");
+const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
+const carets_1 = require("./carets");
+const fontSize = 24;
+const lineHeight = 1.5;
+const maxLines = 2;
+const buttonSize = 32;
+const maskImage = 'linear-gradient(to bottom, white 60%, transparent)';
+const container = {
+    position: 'relative',
+    marginBottom: 15,
+};
+const messageContainer = {
+    overflow: 'hidden',
+};
+const textContainer = {
+    fontSize,
+    lineHeight,
+};
+const moreLine = {
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+    position: 'absolute',
+    border: `1px solid ${colors_1.INPUT_BORDER_COLOR_HOVERED}`,
+    height: 0,
+    marginTop: 4,
+};
+const moreButton = {
+    height: buttonSize,
+    width: buttonSize,
+    borderRadius: buttonSize / 2,
+    backgroundColor: colors_1.INPUT_BACKGROUND,
+    border: `1px solid ${colors_1.INPUT_BORDER_COLOR_UNHOVERED}`,
+    marginTop: -buttonSize / 2,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    cursor: 'pointer',
+    color: 'white',
+};
+const ErrorMessage = ({ message }) => {
+    const [expanded, setExpanded] = (0, react_1.useState)(false);
+    const ref = (0, react_1.useRef)(null);
+    const size = player_1.PlayerInternals.useElementSize(ref, {
+        shouldApplyCssTransforms: false,
+        triggerOnWindowResize: true,
+    });
+    const errorLines = size ? size.height / (lineHeight * fontSize) : null;
+    const style = (0, react_1.useMemo)(() => {
+        const isExpanded = expanded || (errorLines !== null && errorLines <= maxLines);
+        return {
+            ...messageContainer,
+            maxHeight: isExpanded ? undefined : fontSize * lineHeight * maxLines,
+            maskImage: isExpanded ? undefined : maskImage,
+            WebkitMaskImage: isExpanded ? undefined : maskImage,
+        };
+    }, [errorLines, expanded]);
+    const toggle = (0, react_1.useCallback)(() => {
+        setExpanded((e) => !e);
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("div", { style: style, children: (0, jsx_runtime_1.jsx)("div", { ref: ref, style: textContainer, children: message }) }), errorLines !== null && errorLines > maxLines ? ((0, jsx_runtime_1.jsx)("div", { style: moreLine, children: (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: toggle, style: moreButton, children: (0, jsx_runtime_1.jsx)(carets_1.CaretDown, { invert: expanded }) }) })) : null] }));
+};
+exports.ErrorMessage = ErrorMessage;

remotion/node_modules/@remotion/studio/dist/error-overlay/remotion-overlay/ErrorTitle.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const ErrorTitle: React.FC<{
+    readonly name: string;
+    readonly message: string;
+    readonly symbolicating: boolean;
+    readonly canHaveDismissButton: boolean;
+}>;

remotion/node_modules/@remotion/studio/dist/error-overlay/remotion-overlay/ErrorTitle.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorTitle = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../../helpers/colors");
+const react_overlay_1 = require("../react-overlay");
+const DismissButton_1 = require("./DismissButton");
+const ErrorMessage_1 = require("./ErrorMessage");
+const Symbolicating_1 = require("./Symbolicating");
+const title = {
+    marginBottom: 8,
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+};
+const left = {
+    flex: 1,
+    paddingRight: 14,
+    fontWeight: 'bold',
+    maxWidth: '100%',
+};
+const errName = {
+    fontSize: 18,
+    color: colors_1.BLUE,
+    display: 'inline-block',
+};
+const row = {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+};
+const spacer = {
+    width: 5,
+};
+const ErrorTitle = ({ name, message, symbolicating, canHaveDismissButton }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: title, className: "css-reset", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("span", { style: errName, children: name }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)("div", { style: row, children: [symbolicating ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Symbolicating_1.Symbolicating, {}), (0, jsx_runtime_1.jsx)("div", { style: spacer })] })) : null, (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, { message: message })] })] }), (0, react_overlay_1.didUnmountReactApp)() ? null : canHaveDismissButton ? ((0, jsx_runtime_1.jsx)(DismissButton_1.DismissButton, {})) : null] }));
+};
+exports.ErrorTitle = ErrorTitle;

remotion/node_modules/@remotion/studio/dist/error-overlay/remotion-overlay/HelpLink.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { THelpLink } from './get-help-link';
+export declare const HelpLink: React.FC<{
+    readonly canHaveKeyboardShortcuts: boolean;
+    readonly link: THelpLink;
+}>;

remotion/node_modules/@remotion/studio/dist/error-overlay/remotion-overlay/HelpLink.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HelpLink = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Button_1 = require("../../components/Button");
+const colors_1 = require("../../helpers/colors");
+const use_keybinding_1 = require("../../helpers/use-keybinding");
+const ShortcutHint_1 = require("./ShortcutHint");
+const buttonStyle = {
+    backgroundColor: colors_1.BLUE,
+    color: 'white',
+};
+const HelpLink = ({ canHaveKeyboardShortcuts, link }) => {
+    const openLink = (0, react_1.useCallback)(() => {
+        window.open(link.url, '_blank');
+    }, [link]);
+    const { registerKeybinding } = (0, use_keybinding_1.useKeybinding)();
+    (0, react_1.useEffect)(() => {
+        if (!canHaveKeyboardShortcuts) {
+            return;
+        }
+        const onEditor = () => {
+            openLink();
+        };
+        const { unregister } = registerKeybinding({
+            event: 'keydown',
+            key: 'h',
+            callback: onEditor,
+            commandCtrlKey: true,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
+            keepRegisteredWhenNotHighestContext: false,
+        });
+        return () => unregister();
+    }, [canHaveKeyboardShortcuts, openLink, registerKeybinding]);
+    return ((0, jsx_runtime_1.jsxs)(Button_1.Button, { style: buttonStyle, onClick: openLink, children: ["Help: ", '"', link.title, '"', canHaveKeyboardShortcuts ? ((0, jsx_runtime_1.jsx)(ShortcutHint_1.ShortcutHint, { keyToPress: "h", cmdOrCtrl: true })) : null] }));
+};
+exports.HelpLink = HelpLink;

remotion/node_modules/@remotion/studio/dist/error-overlay/remotion-overlay/OpenInEditor.d.ts

@@ -0,0 +1,6 @@
+import type { SymbolicatedStackFrame } from '@remotion/studio-shared';
+import React from 'react';
+export declare const OpenInEditor: React.FC<{
+    readonly stack: SymbolicatedStackFrame;
+    readonly canHaveKeyboardShortcuts: boolean;
+}>;

remotion/node_modules/@remotion/studio/dist/error-overlay/remotion-overlay/OpenInEditor.js

@@ -0,0 +1,104 @@
+"use strict";
+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 open_in_editor_1 = require("../../helpers/open-in-editor");
+const use_keybinding_1 = require("../../helpers/use-keybinding");
+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 OpenInEditor = ({ stack, canHaveKeyboardShortcuts }) => {
+    const isMounted = (0, react_1.useRef)(true);
+    const [state, dispatch] = (0, react_1.useReducer)(reducer, initialState);
+    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)
+            .then((res) => res.json())
+            .then((data) => {
+            if (data.success) {
+                dispatchIfMounted({ type: 'succeed' });
+            }
+            else {
+                dispatchIfMounted({ type: 'fail' });
+            }
+        })
+            .catch((err) => {
+            dispatchIfMounted({ type: 'fail' });
+            console.log('Could not open browser', err);
+        })
+            .finally(() => {
+            setTimeout(() => {
+                dispatchIfMounted({ type: 'reset' });
+            }, 2000);
+        });
+    }, [dispatchIfMounted, stack]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (!canHaveKeyboardShortcuts) {
+            return;
+        }
+        const onEditor = () => {
+            openInBrowser();
+        };
+        const { unregister } = registerKeybinding({
+            event: 'keydown',
+            key: 'o',
+            callback: onEditor,
+            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 ${window.remotion_editorName}`;
+            case 'success':
+                return `Opened in ${window.remotion_editorName}`;
+            case 'load':
+                return `Opening...`;
+            default:
+                throw new Error('invalid state');
+        }
+    }, [state.type]);
+    return ((0, jsx_runtime_1.jsxs)(Button_1.Button, { onClick: openInBrowser, disabled: state.type !== 'idle', children: [label, canHaveKeyboardShortcuts ? ((0, jsx_runtime_1.jsx)(ShortcutHint_1.ShortcutHint, { keyToPress: "o", cmdOrCtrl: true })) : null] }));
+};
+exports.OpenInEditor = OpenInEditor;

remotion/node_modules/@remotion/studio/dist/error-overlay/remotion-overlay/Overlay.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+type SetErrors = {
+    setErrors: (errs: State) => void;
+    addError: (err: Error) => void;
+};
+export declare const setErrorsRef: React.RefObject<SetErrors | null>;
+type State = {
+    type: 'clear';
+} | {
+    type: 'errors';
+    errors: Error[];
+};
+export declare const Overlay: React.FC;
+export {};

remotion/node_modules/@remotion/studio/dist/error-overlay/remotion-overlay/Overlay.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Overlay = exports.setErrorsRef = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const keybindings_1 = require("../../state/keybindings");
+const ErrorLoader_1 = require("./ErrorLoader");
+exports.setErrorsRef = (0, react_1.createRef)();
+const errorsAreTheSame = (first, second) => {
+    return first.stack === second.stack && first.message === second.message;
+};
+const BACKGROUND_COLOR = '#1f2428';
+const Overlay = () => {
+    const [errors, setErrors] = (0, react_1.useState)({ type: 'clear' });
+    const addError = (0, react_1.useCallback)((err) => {
+        setErrors((state) => {
+            if (state.type === 'errors') {
+                if (state.errors.some((e) => errorsAreTheSame(e, err))) {
+                    return state;
+                }
+                return {
+                    ...state,
+                    errors: [...state.errors, err],
+                };
+            }
+            return {
+                type: 'errors',
+                errors: [err],
+            };
+        });
+    }, []);
+    (0, react_1.useImperativeHandle)(exports.setErrorsRef, () => {
+        return { setErrors, addError };
+    }, [addError]);
+    if (errors.type === 'clear') {
+        return null;
+    }
+    if (errors.errors.length === 0) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(keybindings_1.KeybindingContextProvider, { children: (0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: {
+                backgroundColor: BACKGROUND_COLOR,
+                overflow: 'auto',
+                color: 'white',
+            }, children: errors.errors.map((err, i) => {
+                var _a;
+                return ((0, jsx_runtime_1.jsx)(ErrorLoader_1.ErrorLoader
+                // eslint-disable-next-line react/no-array-index-key
+                , { keyboardShortcuts: i === 0, error: err, onRetry: null, canHaveDismissButton: true, calculateMetadata: false }, ((_a = err.stack) !== null && _a !== void 0 ? _a : '') + i));
+            }) }) }));
+};
+exports.Overlay = Overlay;

remotion/node_modules/@remotion/studio/dist/error-overlay/remotion-overlay/Retry.d.ts

@@ -0,0 +1,3 @@
+export declare const RetryButton: React.FC<{
+    onClick: () => void;
+}>;

remotion/node_modules/@remotion/studio/dist/error-overlay/remotion-overlay/Retry.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RetryButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Button_1 = require("../../components/Button");
+const RetryButton = ({ onClick }) => {
+    return (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onClick, children: "Retry calculateMetadata()" });
+};
+exports.RetryButton = RetryButton;

remotion/node_modules/@remotion/studio/dist/error-overlay/remotion-overlay/SearchGitHubIssues.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const SearchGithubIssues: React.FC<{
+    readonly message: string;
+    readonly canHaveKeyboardShortcuts: boolean;
+}>;

remotion/node_modules/@remotion/studio/dist/error-overlay/remotion-overlay/SearchGitHubIssues.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchGithubIssues = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Button_1 = require("../../components/Button");
+const use_keybinding_1 = require("../../helpers/use-keybinding");
+const ShortcutHint_1 = require("./ShortcutHint");
+const SearchGithubIssues = ({ message, canHaveKeyboardShortcuts }) => {
+    const openInBrowser = (0, react_1.useCallback)(() => {
+        window.open(`https://github.com/remotion-dev/remotion/issues?q=${encodeURIComponent(message)}`, '_blank');
+    }, [message]);
+    const { registerKeybinding } = (0, use_keybinding_1.useKeybinding)();
+    (0, react_1.useEffect)(() => {
+        if (!canHaveKeyboardShortcuts) {
+            return;
+        }
+        const onEditor = () => {
+            openInBrowser();
+        };
+        const { unregister } = registerKeybinding({
+            event: 'keydown',
+            key: 'g',
+            callback: onEditor,
+            commandCtrlKey: true,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
+            keepRegisteredWhenNotHighestContext: false,
+        });
+        return () => unregister();
+    }, [canHaveKeyboardShortcuts, openInBrowser, registerKeybinding]);
+    return ((0, jsx_runtime_1.jsxs)(Button_1.Button, { onClick: openInBrowser, children: ["Search GitHub Issues", ' ', canHaveKeyboardShortcuts ? ((0, jsx_runtime_1.jsx)(ShortcutHint_1.ShortcutHint, { keyToPress: "g", cmdOrCtrl: true })) : null] }));
+};
+exports.SearchGithubIssues = SearchGithubIssues;

remotion/node_modules/@remotion/studio/dist/error-overlay/remotion-overlay/ShortcutHint.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const cmdOrCtrlCharacter: string;
+export declare const ShortcutHint: React.FC<{
+    readonly keyToPress: string;
+    readonly cmdOrCtrl: boolean;
+}>;

remotion/node_modules/@remotion/studio/dist/error-overlay/remotion-overlay/ShortcutHint.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShortcutHint = exports.cmdOrCtrlCharacter = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const use_keybinding_1 = require("../../helpers/use-keybinding");
+exports.cmdOrCtrlCharacter = window.navigator.platform.startsWith('Mac')
+    ? '⌘'
+    : 'Ctrl';
+const container = {
+    display: 'inline-block',
+    marginLeft: 6,
+    opacity: 0.6,
+    verticalAlign: 'middle',
+    fontSize: 14,
+};
+const ShortcutHint = ({ keyToPress, cmdOrCtrl }) => {
+    const style = (0, react_1.useMemo)(() => {
+        if (keyToPress === '↵') {
+            return {
+                display: 'inline-block',
+                transform: `translateY(2px)`,
+                fontSize: 14,
+            };
+        }
+        return {};
+    }, [keyToPress]);
+    if ((0, use_keybinding_1.areKeyboardShortcutsDisabled)()) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)("span", { style: container, children: [cmdOrCtrl ? `${exports.cmdOrCtrlCharacter}` : '', (0, jsx_runtime_1.jsx)("span", { style: style, children: keyToPress.toUpperCase() })] }));
+};
+exports.ShortcutHint = ShortcutHint;

remotion/node_modules/@remotion/studio/dist/error-overlay/remotion-overlay/StackFrame.d.ts

@@ -0,0 +1,8 @@
+import type { SymbolicatedStackFrame } from '@remotion/studio-shared';
+import React from 'react';
+export declare const StackElement: React.FC<{
+    readonly s: SymbolicatedStackFrame;
+    readonly lineNumberWidth: number;
+    readonly isFirst: boolean;
+    readonly defaultFunctionName: string;
+}>;

remotion/node_modules/@remotion/studio/dist/error-overlay/remotion-overlay/StackFrame.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StackElement = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Button_1 = require("../../components/Button");
+const CodeFrame_1 = require("./CodeFrame");
+const carets_1 = require("./carets");
+const format_location_1 = require("./format-location");
+const location = {
+    color: 'rgba(255, 255, 255, 0.6)',
+    fontFamily: 'monospace',
+    fontSize: 14,
+};
+const header = {
+    paddingLeft: 14,
+    paddingTop: 10,
+    paddingBottom: 10,
+    paddingRight: 14,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderBottom: '1px solid rgb(66, 144, 245)',
+    backgroundColor: 'black',
+};
+const left = {
+    paddingRight: 14,
+    flex: 1,
+};
+const fnName = {
+    fontSize: 14,
+    lineHeight: 1.5,
+    marginBottom: 3,
+};
+const StackElement = ({ s, lineNumberWidth, isFirst, defaultFunctionName }) => {
+    var _a;
+    const [showCodeFrame, setShowCodeFrame] = (0, react_1.useState)(() => {
+        var _a, _b;
+        return (!((_a = s.originalFileName) === null || _a === void 0 ? void 0 : _a.includes('node_modules')) &&
+            !((_b = s.originalFileName) === null || _b === void 0 ? void 0 : _b.startsWith('webpack/'))) ||
+            isFirst;
+    });
+    const toggleCodeFrame = (0, react_1.useCallback)(() => {
+        setShowCodeFrame((f) => !f);
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "css-reset", children: [(0, jsx_runtime_1.jsxs)("div", { style: header, children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("div", { style: fnName, children: (_a = s.originalFunctionName) !== null && _a !== void 0 ? _a : defaultFunctionName }), s.originalFileName ? ((0, jsx_runtime_1.jsxs)("div", { style: location, children: [(0, format_location_1.formatLocation)(s.originalFileName), ":", s.originalLineNumber] })) : null] }), s.originalScriptCode && s.originalScriptCode.length > 0 ? ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: toggleCodeFrame, children: showCodeFrame ? (0, jsx_runtime_1.jsx)(carets_1.CaretDown, { invert: false }) : (0, jsx_runtime_1.jsx)(carets_1.CaretRight, {}) })) : null] }), (0, jsx_runtime_1.jsx)("div", { children: s.originalScriptCode &&
+                    s.originalScriptCode.length > 0 &&
+                    showCodeFrame ? ((0, jsx_runtime_1.jsx)(CodeFrame_1.CodeFrame, { lineNumberWidth: lineNumberWidth, source: s.originalScriptCode })) : null })] }));
+};
+exports.StackElement = StackElement;

remotion/node_modules/@remotion/studio/dist/error-overlay/remotion-overlay/Symbolicating.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const Symbolicating: React.FC;

remotion/node_modules/@remotion/studio/dist/error-overlay/remotion-overlay/Symbolicating.js

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

remotion/node_modules/@remotion/studio/dist/error-overlay/remotion-overlay/carets.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const CaretRight: ({ size }: {
+    readonly size?: number;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const CaretDown: React.FC<{
+    readonly invert: boolean;
+    readonly size?: number;
+}>;

remotion/node_modules/@remotion/studio/dist/error-overlay/remotion-overlay/carets.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CaretDown = exports.CaretRight = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CaretRight = ({ size }) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { style: { height: size !== null && size !== void 0 ? size : 20 }, "aria-hidden": "true", focusable: "false", role: "img", viewBox: "0 0 192 512", children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z" }) }));
+};
+exports.CaretRight = CaretRight;
+const CaretDown = ({ invert, size }) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", focusable: "false", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", style: { height: size !== null && size !== void 0 ? size : 20, transform: invert ? `rotate(180deg)` : '' }, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z" }) }));
+};
+exports.CaretDown = CaretDown;

remotion/node_modules/@remotion/studio/dist/error-overlay/remotion-overlay/format-location.d.ts

@@ -0,0 +1 @@
+export declare const formatLocation: (location: string) => string;

remotion/node_modules/@remotion/studio/dist/error-overlay/remotion-overlay/format-location.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatLocation = void 0;
+const formatLocation = (location) => {
+    if (location.startsWith('webpack://')) {
+        return location.replace('webpack://', '');
+    }
+    return location;
+};
+exports.formatLocation = formatLocation;

remotion/node_modules/@remotion/studio/dist/error-overlay/remotion-overlay/get-help-link.d.ts

@@ -0,0 +1,5 @@
+export type THelpLink = {
+    url: string;
+    title: string;
+};
+export declare const getHelpLink: (message: string) => THelpLink | null;

remotion/node_modules/@remotion/studio/dist/error-overlay/remotion-overlay/get-help-link.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getHelpLink = void 0;
+const getHelpLink = (message) => {
+    if (message.includes('See https://www.remotion.dev/docs/the-fundamentals#defining-compositions')) {
+        return {
+            title: 'Defining compositions',
+            url: 'See https://www.remotion.dev/docs/the-fundamentals#defining-compositions',
+        };
+    }
+    if (message.includes('https://remotion.dev/docs/wrong-composition-mount')) {
+        return {
+            title: 'Wrongly mounted <Composition>',
+            url: 'https://remotion.dev/docs/wrong-composition-mount',
+        };
+    }
+    if (message.includes('https://remotion.dev/docs/staticfile-relative-paths')) {
+        return {
+            title: 'staticFile() relative paths',
+            url: 'https://remotion.dev/docs/staticfile-relative-paths',
+        };
+    }
+    if (message.includes('https://remotion.dev/docs/staticfile-remote-urls')) {
+        return {
+            title: 'staticFile() remote URLs',
+            url: 'https://remotion.dev/docs/staticfile-remote-urls',
+        };
+    }
+    if (message.includes('https://remotion.dev/docs/non-seekable-media')) {
+        return {
+            title: 'Non-seekable media',
+            url: 'https://remotion.dev/docs/non-seekable-media',
+        };
+    }
+    if (message.includes('https://remotion.dev/docs/media-playback-error')) {
+        return {
+            title: 'Media playback error',
+            url: 'https://remotion.dev/docs/media-playback-error',
+        };
+    }
+    if (message.includes('Div is not part of the THREE')) {
+        return {
+            title: '<Sequence> inside <ThreeCanvas>',
+            url: 'https://remotion.dev/docs/sequence#note-for-remotionthree',
+        };
+    }
+    return null;
+};
+exports.getHelpLink = getHelpLink;

remotion/node_modules/@remotion/studio/dist/error-overlay/remotion-overlay/index.d.ts

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

remotion/node_modules/@remotion/studio/dist/error-overlay/remotion-overlay/index.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mountRemotionOverlay = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// In React 18, you should use createRoot() from "react-dom/client".
+// In React 18, you should use render from "react-dom".
+// We support both, but Webpack chooses both of them and normalizes them to "react-dom/client",
+// hence why we import the right thing all the time but need to differentiate here
+const client_1 = __importDefault(require("react-dom/client"));
+const Overlay_1 = require("./Overlay");
+const mountRemotionOverlay = () => {
+    if (client_1.default.createRoot) {
+        client_1.default.createRoot(document.getElementById('remotion-error-overlay')).render((0, jsx_runtime_1.jsx)(Overlay_1.Overlay, {}));
+    }
+    else {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        client_1.default.render((0, jsx_runtime_1.jsx)(Overlay_1.Overlay, {}), document.getElementById('remotion-error-overlay'));
+    }
+};
+exports.mountRemotionOverlay = mountRemotionOverlay;