@remotion/studio 4.0.355 → 4.0.357

package/.turbo/turbo-make.log

@@ -1,6 +1,6 @@
 
 
-> @remotion/studio@4.0.355 make /Users/jonathanburger/remotion/packages/studio
+> @remotion/studio@4.0.357 make /Users/jonathanburger/remotion/packages/studio
 > tsc -d && bun --env-file=../.env.bundle bundle.ts
 
-[344.69ms] Generated.
+[55.83ms] Generated.

package/dist/components/RenderModal/layout.js

@@ -12,7 +12,7 @@ exports.optionRow = {
     paddingBottom: 8,
 };
 exports.label = {
-    width: 220,
+    width: 260,
     fontSize: 15,
     lineHeight: '40px',
     color: colors_1.LIGHT_TEXT,

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;