@remotion/studio 4.0.356 → 4.0.358

package/.turbo/turbo-formatting.log

@@ -0,0 +1,4 @@
+
+$ prettier --experimental-cli src --check
+[?25l- Checking formatting...\ Checking formatting...| Checking formatting.../ Checking formatting...- Checking formatting...\ Checking formatting...| Checking formatting.../ Checking formatting...- Checking formatting...\ Checking formatting...| Checking formatting.../ Checking formatting...- Checking formatting...\ Checking formatting...| Checking formatting.../ Checking formatting...- Checking formatting...\ Checking formatting...| Checking formatting.../ Checking formatting...- Checking formatting...\ Checking formatting...| Checking formatting.../ Checking formatting...- Checking formatting...\ Checking formatting...| Checking formatting.../ Checking formatting...- Checking formatting...\ Checking formatting...| Checking formatting.../ Checking formatting...- Checking formatting...\ Checking formatting...| Checking formatting.../ Checking formatting...- Checking formatting...\ Checking formatting...| Checking formatting.../ Checking formatting...- Checking formatting...\ Checking formatting...| Checking formatting.../ src/internals.ts- src/internals.ts\ src/internals.ts| src/internals.ts/ src/internals.ts- src/internals.ts\ src/internals.ts| src/internals.ts/ src/internals.ts- src/api/play.ts\ src/api/play.ts| src/api/delete-static-file.ts/ src/Studio.tsx- src/api/get-zod-schema-from-primitive.ts\ src/api/write-static-file.ts| src/api/write-static-file.ts/ src/api/write-static-file.ts- src/api/write-static-file.ts\ src/api/write-static-file.ts| src/api/watch-static-file.ts/ src/api/watch-static-file.ts- src/api/watch-static-file.ts\ src/api/watch-static-file.ts| src/api/watch-static-file.ts/ src/components/AskAiModal.tsx- src/components/AskAiModal.tsx\ src/components/CheckboardToggle.tsx| src/components/CheckboardToggle.tsx/ src/components/CheckboardToggle.tsx- src/api/seek.ts\ src/api/update-default-props.ts| src/components/Checkbox.tsx/ src/components/Checkbox.tsx- src/components/CanvasIfSizeIsAvailable.tsx\ src/components/CanvasIfSizeIsAvailable.tsx| src/components/CanvasIfSizeIsAvailable.tsx/ src/components/CanvasIfSizeIsAvailable.tsx- src/components/CopyButton.tsx\ src/components/CopyButton.tsx| src/components/AssetSelector.tsx/ src/components/CheckerboardProvider.tsx- src/components/EditorContent.tsx\ src/components/ContextMenu.tsx| src/components/ContextMenu.tsx/ src/components/CompSelectorRef.tsx- src/components/FramePersistor.tsx\ src/components/GlobalKeybindings.tsx| src/components/ExplorerPanel.tsx/ src/components/InitialCompositionLoader.tsx- src/components/InstallablePackage.tsx\ src/components/Editor.tsx| src/components/FullscreenToggle.tsx/ src/api/reevaluate-composition.ts- src/components/ModalFooter.tsx\ src/components/MobilePanel.tsx| src/components/PlayBeepSound.tsx/ src/components/NoRegisterRoot.tsx- src/components/PlaybackRateSelector.tsx\ src/components/ShowRulersProvider.tsx| src/components/RenderPreview.tsx/ src/components/TextViewer.tsx- src/components/PlayPause.tsx\ src/components/PlayPause.tsx| src/components/RenderButton.tsx/ src/error-overlay/entry-basic.ts- src/components/ZoomPersistor.tsx\ src/helpers/calculate-timeline.ts| src/helpers/calculate-timeline.ts/ src/components/load-canvas-content-from-url.ts- src/helpers/create-folder-tree.ts\ src/helpers/copy-text.ts| src/helpers/get-timeline-nestedness.ts/ src/components/TimelineInOutToggle.tsx- src/helpers/editor-ruler.ts\ src/helpers/persist-open-folders.tsx| src/helpers/smooth-zoom.ts/ src/helpers/use-max-media-duration.ts- src/helpers/use-file-existence.ts\ src/helpers/noop.ts| src/icons/audio.tsx/ src/helpers/validate-new-comp-data.ts- src/icons/render.tsx\ src/state/input-dragger-click-lock.ts| src/state/keybindings.tsx/ src/icons/plus.tsx- src/test/format-time.test.ts\ src/test/color-math.test.ts| src/helpers/use-menu-structure.tsx/ src/components/EditorRuler/use-is-ruler-visible.ts- src/components/EditorGuides/index.tsx\ src/components/EditorGuides/index.tsx| src/state/modals.ts/ src/components/Menu/portals.ts- src/components/NewComposition/DismissableModal.tsx\ src/components/NewComposition/DiffPreview.tsx| src/components/NewComposition/DeleteComposition.tsx/ src/components/NewComposition/InputDragger.tsx- src/components/Menu/MenuSubItem.tsx\ src/components/Notifications/ServerDisconnected.tsx| src/components/NewComposition/RemInputTypeColor.tsx/ src/components/NewComposition/RemInputTypeColor.tsx- src/components/NewComposition/render-aspect-ratio.tsx\ src/components/QuickSwitcher/fuzzy-search.ts| src/components/QuickSwitcher/fuzzy-search.ts/ src/components/NewComposition/ComboBox.tsx- src/components/RenderModal/CliCopyButton.tsx\ src/components/RenderModal/EnforceAudioTrackSetting.tsx| src/components/RenderModal/FrameRangeSetting.tsx/ src/components/RenderModal/FrameRangeSetting.tsx- src/components/RenderModal/NumberOfLoopsSetting.tsx\ src/components/RenderModal/RenderModalGif.tsx| src/components/RenderModal/OptionExplainerBubble.tsx/ src/components/RenderModal/OptionExplainer.tsx- src/components/RenderModal/RenderModalAdvanced.tsx\ src/components/RenderModal/WarningIndicatorButton.tsx| src/components/RenderModal/RenderModalBasic.tsx/ src/components/RenderModal/out-name-checker.ts- src/components/RenderModal/GuiRenderStatus.tsx\ src/components/RenderModal/RenderModalJSONPropsEditor.tsx| src/components/RenderQueue/RenderQueueError.tsx/ src/components/RenderQueue/RenderQueueOpenInFolder.tsx- src/components/RenderQueue/item-style.ts\ src/components/Splitter/SplitterContext.tsx| src/components/Splitter/SplitterContext.tsx/ src/components/Splitter/SplitterContext.tsx- src/components/Timeline/LoopedIndicator.tsx\ src/components/Timeline/MaxTimelineTracks.tsx| src/components/Timeline/TimelineList.tsx/ src/components/Tabs/vertical.tsx- src/components/Timeline/TimelineTracks.tsx\ src/components/Timeline/imperative-state.ts| src/components/UpdateModal/OpenIssueButton.tsx/ src/components/Timeline/is-collapsed.ts- src/components/WebRender/TriggerWebRender.tsx\ src/components/VisualControls/get-original-stack-trace.ts| src/components/Timeline/TimelineTimeIndicators.tsx/ src/components/Timeline/TimelineVideoInfo.tsx- src/error-overlay/react-overlay/listen-to-runtime-errors.ts\ src/error-overlay/remotion-overlay/Retry.tsx| src/error-overlay/remotion-overlay/format-location.ts/ src/error-overlay/remotion-overlay/get-help-link.ts- src/components/RenderModal/SchemaEditor/SchemaLabel.tsx\ src/components/RenderModal/SchemaEditor/SchemaErrorMessages.tsx| src/components/Timeline/TimelineDragHandler.tsx/ src/components/RenderModal/SchemaEditor/Fieldset.tsx- src/error-overlay/remotion-overlay/ErrorMessage.tsx\ src/components/VisualControls/VisualControlHandle.tsx| src/components/RenderModal/SchemaEditor/SchemaVerticalGuide.tsx/ src/components/RenderModal/SchemaEditor/ZodFieldValidation.tsx- src/components/RenderModal/SchemaEditor/ZodNonEditableValue.tsx\ src/components/RenderModal/SchemaEditor/ZodNonEditableValue.tsx| src/components/RenderModal/SchemaEditor/ZodTupleItemEditor.tsx/ src/components/RenderModal/SchemaEditor/deep-equal.ts- src/components/RenderModal/SchemaEditor/scroll-to-default-props-path.ts\ src/components/RenderModal/SchemaEditor/ZodStaticFileEditor.tsx| src/components/RenderModal/SchemaEditor/ZodObjectEditor.tsx/ src/components/RenderModal/SchemaEditor/local-state.tsx- src/error-overlay/react-overlay/utils/get-stack-frames.ts\ src/components/RenderModal/SchemaEditor/ZodUnionEditor.tsx| src/components/RenderModal/SchemaEditor/create-zod-values.ts/ src/error-overlay/react-overlay/utils/parser.ts- src/error-overlay/react-overlay/utils/parser.ts\ src/components/RenderModal/SchemaEditor/ZodSwitch.tsx[?25hChecking formatting...
+[?25hAll matched files use Prettier code style!

package/.turbo/turbo-lint.log

@@ -0,0 +1,28 @@
+
+$ eslint src
+=============
+
+WARNING: You are currently running a version of TypeScript which is not officially supported by @typescript-eslint/typescript-estree.
+
+You may find that it works just fine, or you may not.
+
+SUPPORTED TYPESCRIPT VERSIONS: >=4.7.4 <5.7.0
+
+YOUR TYPESCRIPT VERSION: 5.8.2
+
+Please only submit bug reports when using the officially supported version.
+
+=============
+
+/Users/jonathanburger/remotion/packages/studio/src/components/QuickSwitcher/fuzzy-search.ts
+  23:3  warning  Unused eslint-disable directive (no problems were reported from 'no-bitwise')
+
+/Users/jonathanburger/remotion/packages/studio/src/error-overlay/react-overlay/utils/get-source-map.ts
+  54:1  warning  Unexpected 'todo' comment: 'TODO: Can import this from...'  no-warning-comments
+
+/Users/jonathanburger/remotion/packages/studio/src/visual-controls/get-current-edited-value.ts
+  10:2  warning  Unexpected 'todo' comment: 'TODO: What if z.null()'  no-warning-comments
+
+✖ 3 problems (0 errors, 3 warnings)
+  0 errors and 1 warning potentially fixable with the `--fix` option.
+

package/.turbo/turbo-make.log

@@ -1,6 +1,3 @@
 
-
-> @remotion/studio@4.0.356 make /Users/jonathanburger/remotion/packages/studio
-> tsc -d && bun --env-file=../.env.bundle bundle.ts
-
-[172.37ms] Generated.
+$ tsc -d && bun --env-file=../.env.bundle bundle.ts
+[56.80ms] Generated.

package/dist/api/get-static-files.d.ts

@@ -1,7 +1,7 @@
 export declare const getStaticFiles: () => StaticFile[];
 export type StaticFile = {
     /**
-     * A string that you can pass to the `src` attribute of an `<Audio>`, `<Img>` and `<Video>` element.
+     * A string that you can pass to the `src` attribute of an `<Audio>`, `<Img>`, `<Video>`, `<Html5Audio>`, `<Html5Video>` or `<OffthreadVideo>` element.
      */
     src: string;
     /**

package/dist/components/Timeline/LoopedIndicator.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const remotion_1 = require("remotion");
 const colors_1 = require("../../helpers/colors");
 const width = {
-    width: 30,
+    width: 0,
     flexDirection: 'row',
     display: 'flex',
     position: 'relative',

package/dist/components/Timeline/LoopedTimelineIndicators.js

@@ -13,10 +13,11 @@ const row = {
     flexDirection: 'row',
 };
 const LoopedTimelineIndicator = ({ loops }) => {
-    return ((0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: row, children: new Array(loops).fill(true).map((_l, i) => {
-            return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment
-            // eslint-disable-next-line
-            , { children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, {}), i === loops - 1 ? null : (0, jsx_runtime_1.jsx)(LoopedIndicator_1.LoopedIndicator, {})] }, i));
-        }) }));
+    const leftOver = loops % 1;
+    return ((0, jsx_runtime_1.jsxs)(remotion_1.AbsoluteFill, { style: row, children: [new Array(Math.floor(loops)).fill(true).map((_l, i) => {
+                return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment
+                // eslint-disable-next-line
+                , { children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, {}), i === loops - 1 ? null : (0, jsx_runtime_1.jsx)(LoopedIndicator_1.LoopedIndicator, {})] }, i));
+            }), leftOver > 0 ? (0, jsx_runtime_1.jsx)("div", { style: { flex: leftOver } }) : null] }));
 };
 exports.LoopedTimelineIndicator = LoopedTimelineIndicator;

package/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;
+}>;

package/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", onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), onClick: () => onSelect(id), style: {
+            ...exports.listItemStyle,
+            ...(hover ? exports.listItemHoverStyle : {}),
+            ...(isActive ? exports.listItemActiveStyle : {}),
+        }, title: id, children: id }));
+};
+exports.CompositionIdListItem = CompositionIdListItem;

package/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;
+}>;

package/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;

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

@@ -6,8 +6,10 @@ 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");
@@ -25,6 +27,8 @@ const spacer = {
     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)
@@ -43,7 +47,13 @@ const ErrorDisplay = ({ display, keyboardShortcuts, onRetry, canHaveDismissButto
     }, [display.error]);
     const lineNumberWidth = String(highestLineNumber).length;
     const helpLink = (0, get_help_link_1.getHelpLink)(message);
-    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, (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) => {
+    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));

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

@@ -1,5 +1,8 @@
 import React from 'react';
-export declare const CaretRight: () => import("react/jsx-runtime").JSX.Element;
+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;
 }>;

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

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CaretDown = exports.CaretRight = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const CaretRight = () => {
-    return ((0, jsx_runtime_1.jsx)("svg", { style: { height: 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" }) }));
+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 }) => {
-    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: 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" }) }));
+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;