@remotion/studio 4.0.423 → 4.0.424

package/dist/components/layout.js

@@ -13,11 +13,11 @@ const Spacing = ({ x = 0, y = 0, block = false }) => {
             flexShrink: 0,
         };
     }, [block, x, y]);
-    return (0, jsx_runtime_1.jsx)("div", { style: style });
+    return jsx_runtime_1.jsx("div", { style: style });
 };
 exports.Spacing = Spacing;
 const flexCss = { flex: 1 };
-const Flex = ({ children }) => (0, jsx_runtime_1.jsx)("div", { style: flexCss, children: children });
+const Flex = ({ children }) => jsx_runtime_1.jsx("div", { style: flexCss, children: children });
 exports.Flex = Flex;
 const Row = ({ children, justify, className, align, flex, style = {}, ...other }) => {
     const finalStyle = (0, react_1.useMemo)(() => {
@@ -30,7 +30,7 @@ const Row = ({ children, justify, className, align, flex, style = {}, ...other }
             flex: flex !== null && flex !== void 0 ? flex : undefined,
         };
     }, [align, flex, justify, style]);
-    return ((0, jsx_runtime_1.jsx)("div", { className: className, style: finalStyle, ...other, children: children }));
+    return (jsx_runtime_1.jsx("div", { className: className, style: finalStyle, ...other, children: children }));
 };
 exports.Row = Row;
 const Column = ({ children, justify, className, align, style = {} }) => {
@@ -43,6 +43,6 @@ const Column = ({ children, justify, className, align, style = {} }) => {
             alignItems: align !== null && align !== void 0 ? align : 'flex-start',
         };
     }, [align, justify, style]);
-    return ((0, jsx_runtime_1.jsx)("div", { className: className, style: finalStyle, children: children }));
+    return (jsx_runtime_1.jsx("div", { className: className, style: finalStyle, children: children }));
 };
 exports.Column = Column;

package/dist/components/use-static-files.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { type StaticFile } from '../api/get-static-files';
+export declare const StaticFilesProvider: React.FC<{
+    readonly children: React.ReactNode;
+}>;
+export declare const useStaticFiles: () => StaticFile[];

package/dist/components/use-static-files.js

@@ -0,0 +1,63 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStaticFiles = exports.StaticFilesProvider = void 0;
+const react_1 = __importStar(require("react"));
+const remotion_1 = require("remotion");
+const get_static_files_1 = require("../api/get-static-files");
+const watch_public_folder_1 = require("../api/watch-public-folder");
+const StaticFilesContext = (0, react_1.createContext)([]);
+const StaticFilesProvider = ({ children }) => {
+    const [files, setFiles] = (0, react_1.useState)(() => (0, get_static_files_1.getStaticFiles)());
+    const env = (0, remotion_1.useRemotionEnvironment)();
+    (0, react_1.useEffect)(() => {
+        if (!env.isStudio) {
+            return;
+        }
+        if (env.isReadOnlyStudio) {
+            return;
+        }
+        const { cancel } = (0, watch_public_folder_1.watchPublicFolder)((newFiles) => {
+            setFiles(newFiles);
+        });
+        return cancel;
+    }, [env.isStudio, env.isReadOnlyStudio]);
+    return react_1.default.createElement(StaticFilesContext.Provider, { value: files }, children);
+};
+exports.StaticFilesProvider = StaticFilesProvider;
+const useStaticFiles = () => {
+    return (0, react_1.useContext)(StaticFilesContext);
+};
+exports.useStaticFiles = useStaticFiles;

package/dist/error-overlay/react-overlay/utils/parser.d.ts

@@ -6,4 +6,4 @@
  */
 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[]>;
+export declare const parseError: (error: string | string[] | Error, contextLines: number) => Promise<SomeStackFrame[]>;

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

@@ -30,6 +30,6 @@ const AskOnDiscord = ({ canHaveKeyboardShortcuts }) => {
         });
         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] }));
+    return (jsx_runtime_1.jsxs(Button_1.Button, { onClick: openInBrowser, children: ["Ask on Discord", ' ', canHaveKeyboardShortcuts ? (jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { keyToPress: "d", cmdOrCtrl: true })) : null] }));
 };
 exports.AskOnDiscord = AskOnDiscord;

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

@@ -5,7 +5,8 @@ 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()" }), "."] }));
+    return (jsx_runtime_1.jsxs("div", { style: style, children: ["This error occured while calling", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: "calculateMetadata()" }),
+            "."] }));
 };
 exports.CalculateMetadataErrorExplainer = CalculateMetadataErrorExplainer;
 const style = {

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

@@ -28,12 +28,13 @@ const lineNumber = {
     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: {
+    return (jsx_runtime_1.jsx("div", { style: frame, className: is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME, children: source.map((s, j) => {
+            return (jsx_runtime_1.jsxs("div", { style: container, children: [
+                    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: {
+                        }, children: String(s.lineNumber).padStart(lineNumberWidth, ' ') }), jsx_runtime_1.jsx("div", { style: {
                             fontFamily: 'monospace',
                             whiteSpace: 'pre',
                             tabSize: 2,
@@ -42,7 +43,8 @@ const CodeFrame = ({ source, lineNumberWidth }) => {
                             lineHeight: 1.7,
                             paddingRight: 12,
                             paddingLeft: 12,
-                        }, children: s.content })] }, j));
+                        }, children: s.content })
+                ] }, j));
         }) }));
 };
 exports.CodeFrame = CodeFrame;

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

@@ -24,7 +24,7 @@ exports.listItemHoverStyle = {
 };
 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: {
+    return (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 : {}),

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

@@ -86,18 +86,23 @@ const CompositionIdsDropdown = ({ compositionIds, currentId }) => {
             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: {
+    return (jsx_runtime_1.jsxs("div", { ref: containerRef, style: containerStyle, children: [
+            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: {
+                }, children: [
+                    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] }));
+                        }, children: currentId !== null && currentId !== void 0 ? currentId : 'Select composition' }), jsx_runtime_1.jsx(carets_1.CaretDown, { size: 20, invert: open })
+                ] }), open ? (jsx_runtime_1.jsxs("div", { style: dropdownStyle, children: [
+                    jsx_runtime_1.jsx("input", { value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Search compositions...", style: searchStyle, "aria-label": "Search compositions" }), jsx_runtime_1.jsx("div", { children: filtered.length === 0 ? (jsx_runtime_1.jsx("div", { style: { opacity: 0.7, padding: 8, textAlign: 'center' }, children: "No compositions found" })) : (filtered.map((id) => (jsx_runtime_1.jsx(CompositionIdListItem_1.CompositionIdListItem, { id: id, isActive: id === currentId, onSelect: onSelect }, id)))) })
+                ] })) : null] }));
 };
 exports.CompositionIdsDropdown = CompositionIdsDropdown;

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

@@ -19,6 +19,6 @@ 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" }) }) }));
+    return (jsx_runtime_1.jsx("button", { type: "button", style: style, onClick: dismiss, children: jsx_runtime_1.jsx("svg", { focusable: "false", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 352 512", style: size, children: 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;

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

@@ -32,7 +32,10 @@ const ErrorDisplay = ({ display, keyboardShortcuts, onRetry, canHaveDismissButto
     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; }));
+        .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);
@@ -53,10 +56,22 @@ const ErrorDisplay = ({ display, keyboardShortcuts, onRetry, canHaveDismissButto
         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
+    return (jsx_runtime_1.jsxs("div", { children: [
+            jsx_runtime_1.jsx(ErrorTitle_1.ErrorTitle, { symbolicating: false, name: display.error.name, message: message, canHaveDismissButton: canHaveDismissButton }), helpLink ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx(HelpLink_1.HelpLink, { link: helpLink, canHaveKeyboardShortcuts: keyboardShortcuts }), jsx_runtime_1.jsx("div", { style: spacer })
+                ] })) : null, display.stackFrames.length > 0 && window.remotion_editorName ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx(OpenInEditor_1.OpenInEditor, { canHaveKeyboardShortcuts: keyboardShortcuts, stack: display.stackFrames[0] }), jsx_runtime_1.jsx("div", { style: spacer })
+                ] })) : null, compositionIds.length > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx(CompositionIdsDropdown_1.CompositionIdsDropdown, { compositionIds: compositionIds, currentId: getCurrentCompositionId() }), jsx_runtime_1.jsx("div", { style: spacer })
+                ] })) : null, jsx_runtime_1.jsx(SearchGitHubIssues_1.SearchGithubIssues, { canHaveKeyboardShortcuts: keyboardShortcuts, message: display.error.message }), jsx_runtime_1.jsx("div", { style: spacer }), jsx_runtime_1.jsx(AskOnDiscord_1.AskOnDiscord, { canHaveKeyboardShortcuts: keyboardShortcuts }), onRetry ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx("div", { style: spacer }), jsx_runtime_1.jsx(Retry_1.RetryButton, { onClick: onRetry })
+                ] })) : null, calculateMetadata ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsx(layout_1.Spacing, { y: 0.5 }), jsx_runtime_1.jsx(CalculateMetadataErrorExplainer_1.CalculateMetadataErrorExplainer, {})
+                ] })) : null, jsx_runtime_1.jsx("div", { style: stack, className: is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME, children: display.stackFrames.map((s, i) => {
+                    return (jsx_runtime_1.jsx(StackFrame_1.StackElement
                     // eslint-disable-next-line react/no-array-index-key
                     , { isFirst: i === 0, s: s, lineNumberWidth: lineNumberWidth, defaultFunctionName: '(anonymous function)' }, i));
-                }) })] }));
+                }) })
+        ] }));
 };
 exports.ErrorDisplay = ErrorDisplay;

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

@@ -48,14 +48,18 @@ const ErrorLoader = ({ error, keyboardShortcuts, onRetry, canHaveDismissButton,
         });
     }, [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 }) }));
+        return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsx(ErrorTitle_1.ErrorTitle, { symbolicating: true, name: error.name, message: error.message, canHaveDismissButton: canHaveDismissButton }) }));
     }
     if (state.type === 'error') {
-        return ((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." })] }));
+        return (jsx_runtime_1.jsxs("div", { style: container, children: [
+                jsx_runtime_1.jsx(ErrorTitle_1.ErrorTitle, { symbolicating: false, name: error.name, message: error.message, canHaveDismissButton: canHaveDismissButton }), jsx_runtime_1.jsx("div", { style: errorWhileErrorStyle, children: "Error while getting stack trace:" }), jsx_runtime_1.jsx("div", { style: errorWhileErrorStyle, children: state.err.stack }), 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 (jsx_runtime_1.jsxs("div", { style: container, children: [
+                jsx_runtime_1.jsx(ErrorTitle_1.ErrorTitle, { symbolicating: false, name: error.name, message: error.message, canHaveDismissButton: canHaveDismissButton }), jsx_runtime_1.jsx("div", { style: errorWhileErrorStyle, children: "Check the Terminal and browser console for error messages." })
+            ] }));
     }
-    return ((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 }) }));
+    return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsx(ErrorDisplay_1.ErrorDisplay, { keyboardShortcuts: keyboardShortcuts, display: state.record, onRetry: onRetry, canHaveDismissButton: canHaveDismissButton, calculateMetadata: calculateMetadata }) }));
 };
 exports.ErrorLoader = ErrorLoader;

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

@@ -64,6 +64,7 @@ const ErrorMessage = ({ message }) => {
     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] }));
+    return (jsx_runtime_1.jsxs("div", { style: container, children: [
+            jsx_runtime_1.jsx("div", { style: style, children: jsx_runtime_1.jsx("div", { ref: ref, style: textContainer, children: message }) }), errorLines !== null && errorLines > maxLines ? (jsx_runtime_1.jsx("div", { style: moreLine, children: jsx_runtime_1.jsx("button", { type: "button", onClick: toggle, style: moreButton, children: jsx_runtime_1.jsx(carets_1.CaretDown, { invert: expanded }) }) })) : null] }));
 };
 exports.ErrorMessage = ErrorMessage;

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

@@ -33,6 +33,12 @@ 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] }));
+    return (jsx_runtime_1.jsxs("div", { style: title, className: "css-reset", children: [
+            jsx_runtime_1.jsxs("div", { style: left, children: [
+                    jsx_runtime_1.jsx("span", { style: errName, children: name }), jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsxs("div", { style: row, children: [symbolicating ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                                    jsx_runtime_1.jsx(Symbolicating_1.Symbolicating, {}), jsx_runtime_1.jsx("div", { style: spacer })
+                                ] })) : null, jsx_runtime_1.jsx(ErrorMessage_1.ErrorMessage, { message: message })
+                        ] })
+                ] }), (0, react_overlay_1.didUnmountReactApp)() ? null : canHaveDismissButton ? (jsx_runtime_1.jsx(DismissButton_1.DismissButton, {})) : null] }));
 };
 exports.ErrorTitle = ErrorTitle;

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

@@ -34,6 +34,6 @@ const HelpLink = ({ canHaveKeyboardShortcuts, link }) => {
         });
         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] }));
+    return (jsx_runtime_1.jsxs(Button_1.Button, { style: buttonStyle, onClick: openLink, children: ["Help: ", '"', link.title, '"', canHaveKeyboardShortcuts ? (jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { keyToPress: "h", cmdOrCtrl: true })) : null] }));
 };
 exports.HelpLink = HelpLink;

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

@@ -99,6 +99,6 @@ const OpenInEditor = ({ stack, canHaveKeyboardShortcuts }) => {
                 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] }));
+    return (jsx_runtime_1.jsxs(Button_1.Button, { onClick: openInBrowser, disabled: state.type !== 'idle', children: [label, canHaveKeyboardShortcuts ? (jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { keyToPress: "o", cmdOrCtrl: true })) : null] }));
 };
 exports.OpenInEditor = OpenInEditor;

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

@@ -39,13 +39,13 @@ const Overlay = () => {
     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: {
+    return (jsx_runtime_1.jsx(keybindings_1.KeybindingContextProvider, { children: 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
+                return (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));
             }) }) }));

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

@@ -4,6 +4,6 @@ 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()" });
+    return jsx_runtime_1.jsx(Button_1.Button, { onClick: onClick, children: "Retry calculateMetadata()" });
 };
 exports.RetryButton = RetryButton;

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

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

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

@@ -28,6 +28,7 @@ const ShortcutHint = ({ keyToPress, cmdOrCtrl }) => {
     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() })] }));
+    return (jsx_runtime_1.jsxs("span", { style: container, children: [cmdOrCtrl ? `${exports.cmdOrCtrlCharacter}` : '', jsx_runtime_1.jsx("span", { style: style, children: keyToPress.toUpperCase() })
+        ] }));
 };
 exports.ShortcutHint = ShortcutHint;

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

@@ -43,8 +43,12 @@ const StackElement = ({ s, lineNumberWidth, isFirst, defaultFunctionName }) => {
     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 &&
+    return (jsx_runtime_1.jsxs("div", { className: "css-reset", children: [
+            jsx_runtime_1.jsxs("div", { style: header, children: [
+                    jsx_runtime_1.jsxs("div", { style: left, children: [
+                            jsx_runtime_1.jsx("div", { style: fnName, children: (_a = s.originalFunctionName) !== null && _a !== void 0 ? _a : defaultFunctionName }), s.originalFileName ? (jsx_runtime_1.jsxs("div", { style: location, children: [(0, format_location_1.formatLocation)(s.originalFileName), ":", s.originalLineNumber] })) : null] }), s.originalScriptCode && s.originalScriptCode.length > 0 ? (jsx_runtime_1.jsx(Button_1.Button, { onClick: toggleCodeFrame, children: showCodeFrame ? jsx_runtime_1.jsx(carets_1.CaretDown, { invert: false }) : jsx_runtime_1.jsx(carets_1.CaretRight, {}) })) : null] }), jsx_runtime_1.jsx("div", { children: s.originalScriptCode &&
                     s.originalScriptCode.length > 0 &&
-                    showCodeFrame ? ((0, jsx_runtime_1.jsx)(CodeFrame_1.CodeFrame, { lineNumberWidth: lineNumberWidth, source: s.originalScriptCode })) : null })] }));
+                    showCodeFrame ? (jsx_runtime_1.jsx(CodeFrame_1.CodeFrame, { lineNumberWidth: lineNumberWidth, source: s.originalScriptCode })) : null })
+        ] }));
 };
 exports.StackElement = StackElement;

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

@@ -3,6 +3,8 @@ 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" }) })] }));
+    return (jsx_runtime_1.jsxs("svg", { id: "loading", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", width: "16", height: "16", fill: "white", ...props, children: [
+            jsx_runtime_1.jsx("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(0 16 16)", children: jsx_runtime_1.jsx("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0" }) }), jsx_runtime_1.jsx("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(45 16 16)", children: jsx_runtime_1.jsx("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.125s" }) }), jsx_runtime_1.jsx("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(90 16 16)", children: jsx_runtime_1.jsx("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.25s" }) }), jsx_runtime_1.jsx("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(135 16 16)", children: jsx_runtime_1.jsx("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.375s" }) }), jsx_runtime_1.jsx("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(180 16 16)", children: jsx_runtime_1.jsx("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.5s" }) }), jsx_runtime_1.jsx("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(225 16 16)", children: jsx_runtime_1.jsx("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.675s" }) }), jsx_runtime_1.jsx("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(270 16 16)", children: jsx_runtime_1.jsx("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.75s" }) }), jsx_runtime_1.jsx("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(315 16 16)", children: jsx_runtime_1.jsx("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.875s" }) })
+        ] }));
 };
 exports.Symbolicating = Symbolicating;

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

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

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

@@ -3,10 +3,10 @@ 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" }) }));
+    return (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: 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" }) }));
+    return (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: 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;

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

@@ -13,11 +13,11 @@ 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, {}));
+        client_1.default.createRoot(document.getElementById('remotion-error-overlay')).render(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'));
+        client_1.default.render(jsx_runtime_1.jsx(Overlay_1.Overlay, {}), document.getElementById('remotion-error-overlay'));
     }
 };
 exports.mountRemotionOverlay = mountRemotionOverlay;