@remotion/studio 4.0.520 → 4.0.521

package/dist/components/ElementInstallConfirmation.js

@@ -39,7 +39,7 @@ const container = {
 const dialogContent = {
     ...container,
     padding: 16,
-    width: 'min(640px, calc(100vw - 40px))',
+    width: 'min(520px, calc(100vw - 40px))',
     maxHeight: 'min(720px, calc(100vh - 140px))',
     overflowY: 'auto',
 };
@@ -85,8 +85,19 @@ const metadataDescriptionStyle = {
     lineHeight: 1.5,
     overflowWrap: 'anywhere',
 };
-const unverifiedSourceStyle = {
+const requestSourceStyle = {
+    display: 'flex',
+    justifyContent: 'space-between',
+    gap: 16,
+    margin: 0,
+};
+const requestSourceDescriptionStyle = {
     ...metadataDescriptionStyle,
+    color: colors_1.LIGHT_TEXT,
+    textAlign: 'right',
+};
+const unverifiedRequestSourceStyle = {
+    ...requestSourceDescriptionStyle,
     color: colors_1.WARNING_COLOR,
 };
 const codeStyle = {
@@ -111,32 +122,13 @@ const dependencyListStyle = {
     padding: 0,
     listStyleType: 'none',
 };
-const dependencyRowStyle = {
-    display: 'flex',
-    alignItems: 'baseline',
-    justifyContent: 'space-between',
-    gap: 16,
-    minWidth: 0,
-};
 const dependencyNameStyle = {
     minWidth: 0,
     color: colors_1.WHITE,
-    fontFamily: 'monospace',
-    fontSize: 13,
-    lineHeight: 1.5,
-    overflowWrap: 'anywhere',
-};
-const dependencyInstallStatusStyle = {
-    flexShrink: 0,
-    color: colors_1.WARNING_COLOR,
     fontFamily: 'sans-serif',
     fontSize: 13,
-    fontWeight: 500,
     lineHeight: 1.5,
-};
-const dependencyInstalledStatusStyle = {
-    ...dependencyInstallStatusStyle,
-    color: colors_1.LIGHT_TEXT,
+    overflowWrap: 'anywhere',
 };
 const warningStyle = {
     display: 'flex',
@@ -160,6 +152,10 @@ const warningDescriptionStyle = {
     fontWeight: 400,
     lineHeight: 1.5,
 };
+const installWarningDescriptionStyle = {
+    ...warningDescriptionStyle,
+    color: colors_1.WHITE,
+};
 const browseElementsStyle = {
     color: 'inherit',
     fontFamily: 'inherit',
@@ -174,7 +170,7 @@ const sourceDetailsStyle = {
     lineHeight: 1.5,
 };
 const sourceSummaryStyle = {
-    cursor: 'pointer',
+    cursor: 'default',
     color: colors_1.WHITE,
     fontFamily: 'sans-serif',
     fontSize: 13,
@@ -206,23 +202,29 @@ const destinationControlStyle = {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'space-between',
-    gap: 16,
+    columnGap: 16,
+    rowGap: 10,
+    flexWrap: 'wrap',
 };
 const destinationOptionsStyle = {
     display: 'flex',
     overflow: 'hidden',
+    maxWidth: '100%',
+    marginLeft: 'auto',
     border: `1px solid ${colors_1.WHITE_ALPHA_12}`,
     borderRadius: 4,
 };
 const destinationOptionStyle = {
     appearance: 'none',
+    minHeight: 26,
     border: 0,
     cursor: 'default',
     fontFamily: 'sans-serif',
-    fontSize: 11,
+    fontSize: 12,
     fontWeight: 400,
-    lineHeight: 1.5,
-    padding: '2px 7px',
+    lineHeight: '18px',
+    padding: '4px 8px',
+    whiteSpace: 'nowrap',
 };
 const getDestinationOptionStyle = ({ disabled, selected, }) => ({
     ...destinationOptionStyle,
@@ -240,6 +242,7 @@ const footerStyle = {
 const cancelStyle = {
     minWidth: 90,
 };
+const elementInstallTitleId = 'remotion-element-install-title';
 const makeSourceControlsVisible = (sourceCode) => {
     return sourceCode.replace(/[\u200b-\u200f\u202a-\u202e\u2066-\u2069\ufeff]/g, (character) => {
         var _a;
@@ -264,8 +267,8 @@ const ElementLibraryAddConfirmation = ({ displayName, origin, url }) => {
 };
 exports.ElementLibraryAddConfirmation = ElementLibraryAddConfirmation;
 const ElementInstallConfirmation = ({ state }) => {
-    var _a, _b;
-    const { currentPlan, dependenciesToReview, missingPackages, newPlan, onClose, request, sourceIsUnverified, sourceLabel, } = state;
+    var _a;
+    const { currentPlan, missingPackages, newPlan, onClose, request, sourceIsUnverified, sourceLabel, } = state;
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const { canvasContent, compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const currentCompositionMetadata = config === null ||
@@ -283,6 +286,8 @@ const ElementInstallConfirmation = ({ state }) => {
     const [mode, setMode] = (0, react_1.useState)(currentPlan === null ? 'new-composition' : 'current-composition');
     const [submitting, setSubmitting] = (0, react_1.useState)(false);
     const inputRef = (0, react_1.useRef)(null);
+    const currentDestinationRef = (0, react_1.useRef)(null);
+    const newDestinationRef = (0, react_1.useRef)(null);
     const [newCompositionValues, setNewCompositionValues] = (0, react_1.useState)(() => {
         var _a, _b, _c, _d, _e;
         const elementComponentName = (_a = studio_protocol_1.StudioProtocolInternals.getElementComponentNameFromSourceCode(request.element.sourceCode)) !== null && _a !== void 0 ? _a : 'Element';
@@ -400,6 +405,7 @@ const ElementInstallConfirmation = ({ state }) => {
     const selectedPlan = mode === 'current-composition' ? currentPlan : selectedNewCompositionPlan;
     const folderTargetIsReady = selectedFolderStack === null ||
         ((0, use_resolved_stack_1.hasResolvedStack)(selectedFolderStack) && folderCompositionFile !== null);
+    const title = `Install ${request.element.displayName}${request.element.displayName.endsWith(' Element') ? '' : ' Element'}`;
     const canSubmit = !submitting &&
         (mode === 'current-composition'
             ? currentPlan !== null
@@ -468,63 +474,67 @@ const ElementInstallConfirmation = ({ state }) => {
             onClose();
         }
     }, [onClose, submitting]);
+    const onDestinationKeyDown = (0, react_1.useCallback)((event) => {
+        if (!['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.key)) {
+            return;
+        }
+        event.preventDefault();
+        if (currentPlan === null) {
+            return;
+        }
+        const nextMode = mode === 'current-composition'
+            ? 'new-composition'
+            : 'current-composition';
+        setMode(nextMode);
+        requestAnimationFrame(() => {
+            var _a, _b;
+            if (nextMode === 'current-composition') {
+                (_a = currentDestinationRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            else {
+                (_b = newDestinationRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+            }
+        });
+    }, [currentPlan, mode]);
     const onSubmit = (0, react_1.useCallback)((event) => {
         event.preventDefault();
         submit();
     }, [submit]);
-    return (0, react_dom_1.createPortal)(jsx_runtime_1.jsxs(ModalContainer_1.ModalContainer, { onOutsideClick: cancel, onEscape: cancel, children: [
-            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "Install Element", onClose: cancel }), jsx_runtime_1.jsxs("form", { onSubmit: onSubmit, children: [
+    return (0, react_dom_1.createPortal)(jsx_runtime_1.jsxs(ModalContainer_1.ModalContainer, { ariaLabelledBy: elementInstallTitleId, onOutsideClick: cancel, onEscape: cancel, children: [
+            jsx_runtime_1.jsx("div", { id: elementInstallTitleId, children: jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: title, onClose: cancel }) }), jsx_runtime_1.jsxs("form", { onSubmit: onSubmit, children: [
                     jsx_runtime_1.jsxs("div", { style: dialogContent, children: [
-                            jsx_runtime_1.jsxs("div", { style: destinationControlStyle, children: [
-                                    jsx_runtime_1.jsx("div", { style: sectionTitleStyle, children: "Add to" }), jsx_runtime_1.jsxs("div", { "aria-label": "Installation destination", role: "group", style: destinationOptionsStyle, children: [
-                                            jsx_runtime_1.jsx("button", { "aria-pressed": mode === 'current-composition', className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, disabled: currentPlan === null, onClick: () => setMode('current-composition'), style: getDestinationOptionStyle({
+                            jsx_runtime_1.jsxs("dl", { style: requestSourceStyle, "aria-label": "Request source", children: [
+                                    jsx_runtime_1.jsx("dt", { style: sectionTitleStyle, children: "From" }), jsx_runtime_1.jsx("dd", { style: sourceIsUnverified
+                                            ? unverifiedRequestSourceStyle
+                                            : requestSourceDescriptionStyle, children: sourceLabel })
+                                ] }), jsx_runtime_1.jsxs("div", { style: destinationControlStyle, children: [
+                                    jsx_runtime_1.jsx("div", { style: sectionTitleStyle, children: "Destination" }), jsx_runtime_1.jsxs("div", { "aria-label": "Installation destination", onKeyDown: onDestinationKeyDown, role: "radiogroup", style: destinationOptionsStyle, children: [
+                                            jsx_runtime_1.jsx("button", { ref: currentDestinationRef, "aria-checked": mode === 'current-composition', className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, disabled: currentPlan === null, onClick: () => setMode('current-composition'), role: "radio", style: getDestinationOptionStyle({
                                                     disabled: currentPlan === null,
                                                     selected: mode === 'current-composition',
-                                                }), type: "button", children: "Current composition" }), jsx_runtime_1.jsx("button", { "aria-pressed": mode === 'new-composition', className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, onClick: () => {
+                                                }), tabIndex: mode === 'current-composition' ? 0 : -1, type: "button", children: "Current composition" }), jsx_runtime_1.jsx("button", { ref: newDestinationRef, "aria-checked": mode === 'new-composition', className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, onClick: () => {
                                                     setMode('new-composition');
                                                     requestAnimationFrame(() => {
                                                         var _a;
                                                         return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.select();
                                                     });
-                                                }, style: {
+                                                }, role: "radio", style: {
                                                     ...getDestinationOptionStyle({
                                                         disabled: false,
                                                         selected: mode === 'new-composition',
                                                     }),
                                                     borderLeft: `1px solid ${colors_1.WHITE_ALPHA_12}`,
-                                                }, type: "button", children: "New composition" })
+                                                }, tabIndex: mode === 'new-composition' ? 0 : -1, type: "button", children: "New composition" })
                                         ] })
                                 ] }), currentPlan === null ? (jsx_runtime_1.jsxs("div", { style: warningStyle, role: "status", children: [
-                                    jsx_runtime_1.jsx(ValidationMessage_1.WarningTriangle, { style: warningIconStyle }), jsx_runtime_1.jsxs("p", { style: warningDescriptionStyle, children: ["Studio could not find a safe place in \u201C", request.compositionId, "\u201D to insert the Element. Install it into a new composition instead."] })
+                                    jsx_runtime_1.jsx(ValidationMessage_1.WarningTriangle, { style: warningIconStyle }), jsx_runtime_1.jsxs("p", { style: installWarningDescriptionStyle, children: ["Studio could not find a safe place in \u201C", request.compositionId, "\u201D to insert the Element. Install it into a new composition instead."] })
                                 ] })) : null, mode === 'new-composition' ? (jsx_runtime_1.jsxs("section", { style: sectionStyle, "aria-label": "New composition settings", children: [
-                                    jsx_runtime_1.jsx(NewComposition_1.NewCompositionFields, { heightValidationMessage: heightValidationMessage, inputRef: inputRef, nameValidationMessage: nameValidationMessage, setValues: setNewCompositionValues, values: newCompositionValues, widthValidationMessage: widthValidationMessage }), (activeNewCompositionPlanState === null || activeNewCompositionPlanState === void 0 ? void 0 : activeNewCompositionPlanState.type) === 'error' ? (jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: activeNewCompositionPlanState.reason, type: "error" })) : null] })) : null, jsx_runtime_1.jsxs("dl", { style: metadataStyle, "aria-label": "Installation details", children: [
-                                    jsx_runtime_1.jsxs("div", { style: metadataRowStyle, children: [
-                                            jsx_runtime_1.jsx("dt", { style: metadataTermStyle, children: "Element" }), jsx_runtime_1.jsx("dd", { style: metadataDescriptionStyle, children: request.element.displayName })
-                                        ] }), jsx_runtime_1.jsxs("div", { style: metadataRowStyle, children: [
-                                            jsx_runtime_1.jsx("dt", { style: metadataTermStyle, children: "Request source" }), jsx_runtime_1.jsx("dd", { style: sourceIsUnverified
-                                                    ? unverifiedSourceStyle
-                                                    : metadataDescriptionStyle, children: sourceLabel })
-                                        ] }), jsx_runtime_1.jsxs("div", { style: metadataRowStyle, children: [
-                                            jsx_runtime_1.jsx("dt", { style: metadataTermStyle, children: "Composition" }), jsx_runtime_1.jsx("dd", { style: metadataDescriptionStyle, children: jsx_runtime_1.jsx("code", { style: codeStyle, children: mode === 'current-composition'
-                                                        ? request.compositionId
-                                                        : newCompositionValues.id }) })
-                                        ] }), jsx_runtime_1.jsxs("div", { style: metadataRowStyle, children: [
-                                            jsx_runtime_1.jsx("dt", { style: metadataTermStyle, children: "Destination" }), jsx_runtime_1.jsx("dd", { style: metadataDescriptionStyle, children: jsx_runtime_1.jsx("code", { style: codeStyle, children: (_b = selectedPlan === null || selectedPlan === void 0 ? void 0 : selectedPlan.filePath) !== null && _b !== void 0 ? _b : 'Reviewing destination…' }) })
-                                        ] }), (selectedPlan === null || selectedPlan === void 0 ? void 0 : selectedPlan.expectedFileState.exists) ? (jsx_runtime_1.jsxs("div", { style: metadataRowStyle, children: [
-                                            jsx_runtime_1.jsx("dt", { style: metadataTermStyle, children: "File change" }), jsx_runtime_1.jsx("dd", { style: overwriteStyle, children: "Replace existing source file" })
-                                        ] })) : null] }), dependenciesToReview.length > 0 ? (jsx_runtime_1.jsxs("section", { style: sectionStyle, "aria-labelledby": "element-install-dependencies", children: [
-                                    jsx_runtime_1.jsx("h3", { id: "element-install-dependencies", style: sectionTitleStyle, children: "Dependencies" }), jsx_runtime_1.jsx("ul", { style: dependencyListStyle, role: "list", children: dependenciesToReview.map((packageName) => {
-                                            const willInstall = missingPackages.includes(packageName);
-                                            return (jsx_runtime_1.jsxs("li", { style: dependencyRowStyle, children: [
-                                                    jsx_runtime_1.jsx("div", { style: dependencyNameStyle, children: packageName }), jsx_runtime_1.jsx("div", { style: willInstall
-                                                            ? dependencyInstallStatusStyle
-                                                            : dependencyInstalledStatusStyle, children: willInstall ? 'Will be installed' : 'Installed' })
-                                                ] }, packageName));
-                                        }) })
+                                    jsx_runtime_1.jsx(NewComposition_1.NewCompositionFields, { heightValidationMessage: heightValidationMessage, inputRef: inputRef, nameValidationMessage: nameValidationMessage, setValues: setNewCompositionValues, values: newCompositionValues, widthValidationMessage: widthValidationMessage }), (activeNewCompositionPlanState === null || activeNewCompositionPlanState === void 0 ? void 0 : activeNewCompositionPlanState.type) === 'error' ? (jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: activeNewCompositionPlanState.reason, type: "error" })) : null] })) : null, (selectedPlan === null || selectedPlan === void 0 ? void 0 : selectedPlan.expectedFileState.exists) ? (jsx_runtime_1.jsx("p", { style: overwriteStyle, role: "status", children: "This will replace the existing Element source file." })) : null, missingPackages.length > 0 ? (jsx_runtime_1.jsxs("section", { style: sectionStyle, "aria-labelledby": "element-install-dependencies", children: [
+                                    jsx_runtime_1.jsx("h3", { id: "element-install-dependencies", style: sectionTitleStyle, children: "Packages to install" }), jsx_runtime_1.jsx("ul", { style: dependencyListStyle, role: "list", children: missingPackages.map((packageName) => (jsx_runtime_1.jsx("li", { style: dependencyNameStyle, children: packageName }, packageName))) })
                                 ] })) : null, jsx_runtime_1.jsxs("div", { style: warningStyle, children: [
-                                    jsx_runtime_1.jsx(ValidationMessage_1.WarningTriangle, { style: warningIconStyle }), jsx_runtime_1.jsxs("p", { style: warningDescriptionStyle, children: ["This adds executable source code to your project.", usesBrowserDependencyResolution
+                                    jsx_runtime_1.jsx(ValidationMessage_1.WarningTriangle, { style: warningIconStyle }), jsx_runtime_1.jsxs("p", { style: installWarningDescriptionStyle, children: ["This adds executable source code to your project, with access to your files and the network.", usesBrowserDependencyResolution || missingPackages.length === 0
                                                 ? null
-                                                : ' Package lifecycle scripts may also run during installation, with access to your files and the network.'] })
+                                                : ' Package lifecycle scripts may also run during installation.'] })
                                 ] }), jsx_runtime_1.jsxs("details", { style: sourceDetailsStyle, children: [
                                     jsx_runtime_1.jsx("summary", { style: sourceSummaryStyle, children: "Source code" }), jsx_runtime_1.jsx("pre", { style: sourceCodeBlockStyle, children: jsx_runtime_1.jsx("code", { style: sourceCodeStyle, children: makeSourceControlsVisible(request.element.sourceCode) }) })
                                 ] })

package/dist/components/ElementLibraryModal.js

@@ -15,6 +15,7 @@ const panelStyle = {
 };
 const iframeStyle = {
     border: 0,
+    colorScheme: 'dark',
     flex: 1,
     minHeight: 0,
     width: '100%',
@@ -31,10 +32,11 @@ const ElementLibraryModal = ({ name, url }) => {
         iframe.setAttribute('credentialless', '');
         const iframeUrl = new URL(url);
         iframeUrl.searchParams.set('remotion-studio', 'true');
+        iframeUrl.searchParams.set('docusaurus-theme', 'dark');
         iframe.src = iframeUrl.toString();
     }, [url]);
     return (jsx_runtime_1.jsxs(DismissableModal_1.DismissableModal, { panelStyle: panelStyle, children: [
-            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: name }), jsx_runtime_1.jsx("iframe", { ref: iframeRef, allow: "local-network-access; loopback-network", style: iframeStyle, title: `${name} library` })
+            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: name }), jsx_runtime_1.jsx("iframe", { ref: iframeRef, allow: "local-network-access; loopback-network", "data-remotion-element-library": "", style: iframeStyle, title: `${name} library` })
         ] }));
 };
 exports.ElementLibraryModal = ElementLibraryModal;

package/dist/components/InlineCaptionInspector.js

@@ -107,6 +107,42 @@ const InlineCaptionInspector = ({ captions, controls, expanded, nodePath, onTogg
         setPropStatuses,
         validatedLocation.source,
     ]);
+    const replaceCaptions = (0, react_1.useCallback)((nextCaptions) => {
+        if (!canSave || clientId === null) {
+            return;
+        }
+        setDraftCaptions(nextCaptions);
+        setDragOverrides(nodePath, 'captions', remotion_1.Internals.makeStaticDragOverride(nextCaptions));
+        savedCaptions.current = nextCaptions;
+        (0, save_sequence_prop_1.saveSequenceProps)({
+            changes: [
+                {
+                    fileName: validatedLocation.source,
+                    nodePath,
+                    fieldKey: 'captions',
+                    value: nextCaptions,
+                    defaultValue: null,
+                    schema: controls.schema,
+                },
+            ],
+            addedKeyframes: null,
+            movedKeyframes: null,
+            setPropStatuses,
+            clientId,
+            undoLabel: 'Import captions',
+            redoLabel: 'Import captions again',
+        });
+        clearDragOverrides(nodePath);
+    }, [
+        canSave,
+        clearDragOverrides,
+        clientId,
+        controls.schema,
+        nodePath,
+        setDragOverrides,
+        setPropStatuses,
+        validatedLocation.source,
+    ]);
     const readOnlyTitle = readOnlyStudio
         ? 'Caption editing is unavailable in read-only Studio'
         : clientId === null
@@ -114,6 +150,6 @@ const InlineCaptionInspector = ({ captions, controls, expanded, nodePath, onTogg
             : (captionStatus === null || captionStatus === void 0 ? void 0 : captionStatus.status) === 'computed'
                 ? 'Captions must be a direct inline JSX array to edit them'
                 : 'Captions are not ready for editing';
-    return (jsx_runtime_1.jsx(CaptionInspector_1.CaptionInspector, { captions: draftCaptions, expanded: expanded, onTextChange: updateCaptions, onTextSave: saveCaptions, onTextCancel: cancelCaptions, onToggle: onToggle, readOnly: !canSave, readOnlyTitle: canSave ? null : readOnlyTitle }));
+    return (jsx_runtime_1.jsx(CaptionInspector_1.CaptionInspector, { captions: draftCaptions, expanded: expanded, onTextChange: updateCaptions, onTextSave: saveCaptions, onTextCancel: cancelCaptions, onToggle: onToggle, readOnly: !canSave, readOnlyTitle: canSave ? null : readOnlyTitle, onReplaceCaptions: canSave ? replaceCaptions : null }));
 };
 exports.InlineCaptionInspector = InlineCaptionInspector;

package/dist/components/InspectorPanel/ElementLibraryButton.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ElementLibraryButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const colors_1 = require("../../helpers/colors");
 const browse_elements_1 = require("../../icons/browse-elements");
 const caret_1 = require("../../icons/caret");
@@ -23,13 +22,6 @@ const browseElementsIconContainerStyle = {
     marginRight: -2,
     width: 22,
 };
-const browseElementsArrowStyle = {
-    display: 'inline-block',
-    height: 12,
-    marginLeft: 4,
-    verticalAlign: -2,
-    width: 12,
-};
 const elementLibraryDropdownStyle = {
     borderRadius: 4,
     height: 28,
@@ -63,19 +55,14 @@ const ElementLibraryButton = () => {
     var _a;
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const { studioRuntimeConfig } = (0, SettingsContext_1.useSettings)();
-    const isBrowserStudio = (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null;
     const elementLibraries = (_a = studioRuntimeConfig === null || studioRuntimeConfig === void 0 ? void 0 : studioRuntimeConfig.elementLibraries) !== null && _a !== void 0 ? _a : noElementLibraries;
     const openElementLibrary = (0, react_1.useCallback)((name, url) => {
-        if (isBrowserStudio) {
-            window.open(url, '_blank', 'noopener,noreferrer');
-            return;
-        }
         setSelectedModal({
             type: 'element-library',
             name,
             url,
         });
-    }, [isBrowserStudio, setSelectedModal]);
+    }, [setSelectedModal]);
     const openElementsLibrary = (0, react_1.useCallback)(() => {
         openElementLibrary('Remotion Elements', 'https://www.remotion.dev/elements');
     }, [openElementLibrary]);
@@ -129,11 +116,9 @@ const ElementLibraryButton = () => {
             ],
         },
     ], [elementLibraries, openElementLibrary, openElementsLibrary]);
-    if (elementLibraries.length > 0 && !isBrowserStudio) {
+    if (elementLibraries.length > 0) {
         return (jsx_runtime_1.jsx(SegmentedButton_1.SegmentedButton, { segments: elementLibraryDropdownSegments, style: elementLibraryDropdownStyle, title: null }));
     }
-    return (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: false, iconContainerStyle: browseElementsIconContainerStyle, onClick: openElementsLibrary, renderIcon: (color) => (jsx_runtime_1.jsx(browse_elements_1.BrowseElementsIcon, { color: color, style: browseElementsIconStyle })), title: isBrowserStudio
-            ? 'Open the Remotion Elements library in a new tab. Install an Element there to send it to this composition.'
-            : 'Browse the Remotion Elements library inside Studio.', children: ["Browse Elements", isBrowserStudio ? (jsx_runtime_1.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", style: browseElementsArrowStyle, children: jsx_runtime_1.jsx("path", { d: "M4 12 12 4M6 4h6v6", fill: "none", stroke: colors_1.CURRENT_COLOR, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) })) : null] }));
+    return (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: false, iconContainerStyle: browseElementsIconContainerStyle, onClick: openElementsLibrary, renderIcon: (color) => (jsx_runtime_1.jsx(browse_elements_1.BrowseElementsIcon, { color: color, style: browseElementsIconStyle })), title: "Browse the Remotion Elements library inside Studio.", children: "Browse Elements" }));
 };
 exports.ElementLibraryButton = ElementLibraryButton;

package/dist/components/InspectorSequenceSection.js

@@ -22,7 +22,6 @@ const CollapsibleInspectorSectionHeader_1 = require("./InspectorPanel/Collapsibl
 const common_1 = require("./InspectorPanel/common");
 const inspector_section_collapse_1 = require("./InspectorPanel/inspector-section-collapse");
 const styles_1 = require("./InspectorPanel/styles");
-const asset_search_1 = require("./QuickSwitcher/asset-search");
 const border_radius_representation_1 = require("./Timeline/border-radius-representation");
 const save_sequence_prop_1 = require("./Timeline/save-sequence-prop");
 const timeline_asset_link_1 = require("./Timeline/timeline-asset-link");
@@ -226,7 +225,6 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const selectAsset = (0, use_select_asset_1.useSelectAsset)();
     const mediaSrc = (0, timeline_asset_link_1.getTimelineAssetSrcFromSchema)(sequence.controls, runtimeValues);
-    const assetSelectionInitialQuery = (0, asset_search_1.getAssetSearchQueryForComponent)(sequence.controls.componentIdentity);
     const getSourceAction = (0, react_1.useCallback)((src) => {
         var _a;
         const linkInfo = (0, timeline_asset_link_1.getTimelineAssetLinkInfo)(src);
@@ -258,9 +256,8 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
     }, [getSourceAction, mediaSrc]);
     const assetSelectionContextValue = (0, react_1.useMemo)(() => ({
         getSourceAction,
-        initialQuery: assetSelectionInitialQuery,
         sourceAction,
-    }), [assetSelectionInitialQuery, getSourceAction, sourceAction]);
+    }), [getSourceAction, sourceAction]);
     const getIsExpanded = (0, react_1.useCallback)((candidate) => {
         return !collapsedKeys.has(getInspectorExpansionKey(candidate));
     }, [collapsedKeys]);

package/dist/components/Menu/MenuSubItem.js

@@ -62,7 +62,7 @@ const MenuSubItem = ({ label, leaveLeftSpace, leftItem, onActionChosen, id, sele
         };
     }, [selected, disabled]);
     const onPointerUp = (0, react_1.useCallback)((e) => {
-        if (disabled) {
+        if (disabled || e.button !== 0) {
             return;
         }
         if (subMenu) {

package/dist/components/ModalContainer.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 export declare const getMaxModalWidth: (width: number) => string;
 export declare const getMaxModalHeight: (height: number) => string;
 export declare const ModalContainer: React.FC<{
+    readonly ariaLabelledBy?: string;
     readonly onEscape: () => void;
     readonly onOutsideClick: () => void;
     readonly children: React.ReactNode;

package/dist/components/ModalContainer.js

@@ -29,11 +29,11 @@ const panel = {
     color: colors_1.WHITE,
     margin: 'auto',
 };
-const ModalContainer = ({ children, onEscape, onOutsideClick, noZIndex, panelStyle }) => {
+const ModalContainer = ({ ariaLabelledBy, children, onEscape, onOutsideClick, noZIndex, panelStyle, }) => {
     const onPointerDown = (0, react_1.useCallback)((e) => {
         // Prevent deselection of currently selected items
         e.stopPropagation();
     }, []);
-    return (jsx_runtime_1.jsx("div", { className: "css-reset", style: backgroundOverlay, role: "dialog", "aria-modal": "true", onPointerDown: onPointerDown, children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { disabled: noZIndex, onOutsideClick: onOutsideClick, onEscape: onEscape, children: jsx_runtime_1.jsx("div", { style: { ...panel, ...panelStyle }, children: children }) }) }));
+    return (jsx_runtime_1.jsx("div", { "aria-labelledby": ariaLabelledBy !== null && ariaLabelledBy !== void 0 ? ariaLabelledBy : undefined, "aria-modal": "true", className: "css-reset", role: "dialog", style: backgroundOverlay, onPointerDown: onPointerDown, children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { disabled: noZIndex, onOutsideClick: onOutsideClick, onEscape: onEscape, children: jsx_runtime_1.jsx("div", { style: { ...panel, ...panelStyle }, children: children }) }) }));
 };
 exports.ModalContainer = ModalContainer;

package/dist/components/ModalHeader.js

@@ -16,8 +16,12 @@ const container = {
     borderBottom: colors_1.BORDER_BLACK,
 };
 const titleStyle = {
-    fontSize: 14,
     color: colors_1.WHITE,
+    fontSize: 14,
+    minWidth: 0,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
 };
 const icon = {
     height: 20,

package/dist/components/QuickSwitcher/asset-search.d.ts

@@ -6,4 +6,3 @@ export declare const filterAssetsByType: ({ assets, query, }: {
     readonly assets: StaticFile[];
     readonly query: string;
 };
-export declare const getAssetSearchQueryForComponent: (componentIdentity: string | null) => string;

package/dist/components/QuickSwitcher/asset-search.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getAssetSearchQueryForComponent = exports.filterAssetsByType = void 0;
+exports.filterAssetsByType = void 0;
 const get_preview_file_type_1 = require("../../helpers/get-preview-file-type");
 const typeFilterRegex = /(^|\s)type:([^\s]+)/gi;
 const filterAssetsByType = ({ assets, query, }) => {
@@ -26,18 +26,3 @@ const filterAssetsByType = ({ assets, query, }) => {
     };
 };
 exports.filterAssetsByType = filterAssetsByType;
-const componentAssetTypes = {
-    'dev.remotion.media.Audio': 'audio',
-    'dev.remotion.media.Video': 'video',
-    'dev.remotion.remotion.AnimatedImage': 'image',
-    'dev.remotion.remotion.CanvasImage': 'image',
-    'dev.remotion.remotion.Img': 'image',
-};
-const getAssetSearchQueryForComponent = (componentIdentity) => {
-    if (componentIdentity === null) {
-        return '';
-    }
-    const assetType = componentAssetTypes[componentIdentity];
-    return assetType ? `type:${assetType} ` : '';
-};
-exports.getAssetSearchQueryForComponent = getAssetSearchQueryForComponent;

package/dist/components/RenderButton.js

@@ -282,7 +282,7 @@ const RenderButtonInner = ({ readOnlyStudio, size: controlSize = 'default', narr
                 {
                     type: 'item',
                     id: 'client-render',
-                    label: 'Render on web',
+                    label: 'Render in browser',
                     value: 'client-render',
                     onClick: () => handleRenderTypeChange('client-render'),
                     keyHint: null,
@@ -336,7 +336,7 @@ const RenderButtonInner = ({ readOnlyStudio, size: controlSize = 'default', narr
         ? 'Render'
         : renderType === 'render-command'
             ? 'Render via CLI'
-            : 'Render on web';
+            : 'Render in browser';
     const showRenderLabel = !narrow || renderType !== 'server-render';
     const segments = (0, react_1.useMemo)(() => {
         return [

package/dist/components/RenderModal/RenderStatusModal.js

@@ -41,6 +41,7 @@ const buttonRow = {
     justifyContent: 'flex-end',
 };
 const RenderStatusModal = ({ jobId, }) => {
+    var _a;
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const { jobs, removeClientJob, cancelClientJob } = (0, react_1.useContext)(context_1.RenderQueueContext);
     const job = jobs.find((j) => j.id === jobId);
@@ -88,9 +89,14 @@ const RenderStatusModal = ({ jobId, }) => {
     if (job.status === 'idle') {
         throw new Error('should not have rendered this modal');
     }
+    const errorDetails = job.status === 'failed'
+        ? ((_a = job.error.stack) === null || _a === void 0 ? void 0 : _a.split('\n')[0].includes(job.error.message))
+            ? job.error.stack
+            : [job.error.message, job.error.stack].filter(Boolean).join('\n')
+        : null;
     return (jsx_runtime_1.jsxs(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [
             jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: `Render ${job.compositionId}` }), jsx_runtime_1.jsxs("div", { style: container, children: [job.status === 'failed' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                            jsx_runtime_1.jsx("p", { children: "The render failed because of the following error:" }), jsx_runtime_1.jsx("div", { className: is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME, style: codeBlock, children: job.error.stack })
+                            jsx_runtime_1.jsx("p", { children: "The render failed because of the following error:" }), jsx_runtime_1.jsx("div", { className: is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME, style: codeBlock, children: errorDetails })
                         ] })) : null, (job.status === 'done' || job.status === 'running') &&
                         (isClientJob ? (jsx_runtime_1.jsx(ClientRenderProgress_1.ClientRenderProgress, { job: job })) : (jsx_runtime_1.jsx(GuiRenderStatus_1.GuiRenderStatus, { job: job }))), jsx_runtime_1.jsx("div", { style: spacer }), jsx_runtime_1.jsxs("div", { style: buttonRow, children: [job.status === 'running' ? (jsx_runtime_1.jsx(Button_1.Button, { onClick: onClickOnCancel, children: "Cancel render" })) : (jsx_runtime_1.jsx(Button_1.Button, { onClick: onClickOnRemove, children: "Remove render" })), jsx_runtime_1.jsx(layout_1.Flex, {}), job.status === 'failed' ? (jsx_runtime_1.jsx(Button_1.Button, { onClick: onRetry, children: "Retry" })) : null, jsx_runtime_1.jsx("div", { style: spacer }), jsx_runtime_1.jsx(Button_1.Button, { onClick: onQuit, children: "Close" })
                         ] })

package/dist/components/RenderModal/ServerRenderModal.js

@@ -981,7 +981,7 @@ const RenderModal = ({ readOnlyStudio, initialFrame, initialVideoImageFormat, in
         });
     }, [availablePixelFormats, pixelFormat]);
     return (jsx_runtime_1.jsxs("div", { style: render_modals_1.outerModalStyle, children: [
-            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: `Render ${resolvedComposition.id}` }), jsx_runtime_1.jsxs("div", { style: render_modals_1.container, children: [
+            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: `Render ${resolvedComposition.id} ${readOnlyStudio ? 'via CLI' : 'on the server'}` }), jsx_runtime_1.jsxs("div", { style: render_modals_1.container, children: [
                     jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: renderTabOptions, needsWrapping: false }), jsx_runtime_1.jsx("div", { style: render_modals_1.flexer }), jsx_runtime_1.jsxs(Button_1.Button, { autoFocus: true, onClick: trigger, disabled: renderDisabled, style: {
                             ...render_modals_1.buttonStyle,
                             backgroundColor: outnameValidation.valid ? colors_1.BLUE : colors_1.BLUE_DISABLED,

package/dist/components/RenderModal/WebRenderModal.js

@@ -416,7 +416,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
         pageResponsiveness,
     ]);
     return (jsx_runtime_1.jsxs("div", { style: render_modals_1.outerModalStyle, children: [
-            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: `Render ${resolvedComposition.id}` }), jsx_runtime_1.jsxs("div", { style: render_modals_1.container, children: [
+            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: `Render ${resolvedComposition.id} in the browser` }), jsx_runtime_1.jsxs("div", { style: render_modals_1.container, children: [
                     jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: renderTabOptions, needsWrapping: false }), jsx_runtime_1.jsx("div", { style: render_modals_1.flexer }), jsx_runtime_1.jsxs(Button_1.Button, { autoFocus: true, onClick: onAddToQueue, style: render_modals_1.buttonStyle, disabled: !outnameValidation.valid, children: ["Render ", renderMode, jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })
                         ] })
                 ] }), jsx_runtime_1.jsxs("div", { style: render_modals_1.horizontalLayout, children: [

package/dist/components/RenderQueue/ClientRenderQueueProcessor.js

@@ -85,7 +85,7 @@ const ClientRenderQueueProcessor = () => {
                     progress: progress.progress,
                 });
             },
-            outputTarget: 'web-fs',
+            outputTarget: null,
             licenseKey: (_c = job.licenseKey) !== null && _c !== void 0 ? _c : undefined,
             pageResponsiveness: job.pageResponsiveness,
             allowHtmlInCanvas: job.allowHtmlInCanvas,

package/dist/components/SettingsModal.js

@@ -30,6 +30,7 @@ const SkillsSettings_1 = require("./SkillsSettings");
 const StudioSettings_1 = require("./StudioSettings");
 const vertical_1 = require("./Tabs/vertical");
 const UpdatesSettings_1 = require("./UpdatesSettings");
+const UpdateStatusContext_1 = require("./UpdateStatusContext");
 const hiddenPanel = {
     display: 'none',
 };
@@ -64,11 +65,13 @@ const SettingsModal = ({ initialPublicLicenseKey, initialTab }) => {
     const { setPublicLicenseKey } = (0, SettingsContext_1.useSettings)();
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const isBrowserStudio = (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null;
-    const showUpdates = (0, can_show_updates_1.canShowUpdates)({
-        connectionStatus: previewServerState.type,
-        isBrowserStudio,
-        readOnlyStudio: window.remotion_isReadOnlyStudio,
-    });
+    const { upgradeState } = (0, UpdateStatusContext_1.useUpdateStatus)();
+    const showUpdates = upgradeState !== 'idle' ||
+        (0, can_show_updates_1.canShowUpdates)({
+            connectionStatus: previewServerState.type,
+            isBrowserStudio,
+            readOnlyStudio: window.remotion_isReadOnlyStudio,
+        });
     const packageManager = window.remotion_packageManager === 'unknown'
         ? null
         : window.remotion_packageManager;