@remotion/studio 4.0.519 → 4.0.521

package/dist/components/ElementInstallConfirmation.js

@@ -7,6 +7,7 @@ const react_1 = require("react");
 const react_dom_1 = require("react-dom");
 const remotion_1 = require("remotion");
 const ShortcutHint_1 = require("../error-overlay/remotion-overlay/ShortcutHint");
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 const colors_1 = require("../helpers/colors");
 const hoverable_1 = require("../helpers/hoverable");
 const resolved_stack_to_symbolicated_1 = require("../helpers/resolved-stack-to-symbolicated");
@@ -38,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',
 };
@@ -84,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 = {
@@ -110,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',
@@ -159,6 +152,10 @@ const warningDescriptionStyle = {
     fontWeight: 400,
     lineHeight: 1.5,
 };
+const installWarningDescriptionStyle = {
+    ...warningDescriptionStyle,
+    color: colors_1.WHITE,
+};
 const browseElementsStyle = {
     color: 'inherit',
     fontFamily: 'inherit',
@@ -173,7 +170,7 @@ const sourceDetailsStyle = {
     lineHeight: 1.5,
 };
 const sourceSummaryStyle = {
-    cursor: 'pointer',
+    cursor: 'default',
     color: colors_1.WHITE,
     fontFamily: 'sans-serif',
     fontSize: 13,
@@ -205,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,
@@ -239,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;
@@ -262,13 +266,28 @@ const ElementLibraryAddConfirmation = ({ displayName, origin, url }) => {
         ] }));
 };
 exports.ElementLibraryAddConfirmation = ElementLibraryAddConfirmation;
-const ElementInstallConfirmation = ({ currentCompositionMetadata, currentPlan, dependenciesToReview, missingPackages, newPlan, onClose, request, sourceIsUnverified, sourceLabel, usesBrowserDependencyResolution, }) => {
-    var _a, _b;
-    const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+const ElementInstallConfirmation = ({ 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 ||
+        (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) !== 'composition' ||
+        canvasContent.compositionId !== request.compositionId
+        ? null
+        : {
+            durationInFrames: config.durationInFrames,
+            fps: config.fps,
+            height: config.height,
+            width: config.width,
+        };
+    const usesBrowserDependencyResolution = (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null;
     const { currentZIndex } = (0, z_index_1.useZIndex)();
     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';
@@ -386,6 +405,7 @@ const ElementInstallConfirmation = ({ currentCompositionMetadata, currentPlan, d
     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
@@ -454,63 +474,67 @@ const ElementInstallConfirmation = ({ currentCompositionMetadata, currentPlan, d
             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/FpsCounter.js

@@ -17,7 +17,7 @@ const pushWithMaxSize = (arr, value, maxSize) => {
 };
 const FpsCounter = ({ playbackSpeed }) => {
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
-    const [playing] = remotion_1.Internals.Timeline.usePlayingState();
+    const playing = remotion_1.Internals.usePlaying();
     const frame = remotion_1.Internals.Timeline.useTimelinePosition();
     const [marker, rerender] = (0, react_1.useState)({});
     const [fps, setFps] = (0, react_1.useState)(0);

package/dist/components/FramePersistor.js

@@ -4,7 +4,7 @@ exports.FramePersistor = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const FramePersistor = () => {
-    const [playing] = remotion_1.Internals.Timeline.usePlayingState();
+    const playing = remotion_1.Internals.usePlaying();
     const config = (0, remotion_1.useVideoConfig)();
     const frame = remotion_1.Internals.Timeline.useTimelinePosition();
     const setFrame = remotion_1.Internals.useTimelineSetFrame();

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/InspectorPanel/SequenceSelectionInspector.js

@@ -16,10 +16,10 @@ const InspectorSequenceSection_1 = require("../InspectorSequenceSection");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const split_video_from_audio_api_1 = require("../split-video-from-audio-api");
-const delete_selected_timeline_item_1 = require("../Timeline/delete-selected-timeline-item");
 const duplicate_selected_timeline_item_1 = require("../Timeline/duplicate-selected-timeline-item");
 const split_selected_timeline_item_1 = require("../Timeline/split-selected-timeline-item");
 const TimelineSelection_1 = require("../Timeline/TimelineSelection");
+const use_delete_timeline_items_1 = require("../Timeline/use-delete-timeline-items");
 const use_sequence_freeze_frame_menu_item_1 = require("../Timeline/use-sequence-freeze-frame-menu-item");
 const AlignmentControls_1 = require("./AlignmentControls");
 const common_1 = require("./common");
@@ -74,6 +74,7 @@ const SequenceSourceQuickActions = ({ selection, track, validatedSource }) => {
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
+    const deleteTimelineItems = (0, use_delete_timeline_items_1.useDeleteTimelineItems)();
     const propStatusesForOverride = (0, react_1.useMemo)(() => remotion_1.Internals.getPropStatusesCtx(propStatuses, selection.nodePathInfo.sequenceSubscriptionKey), [propStatuses, selection.nodePathInfo.sequenceSubscriptionKey]);
     const freezeFrameMenuItem = (0, use_sequence_freeze_frame_menu_item_1.getSequenceFreezeFrameMenuItem)({
         clientId: previewServerState.type === 'connected' && (0, interactivity_enabled_1.isStudioInteractivityEnabled)()
@@ -98,8 +99,8 @@ const SequenceSourceQuickActions = ({ selection, track, validatedSource }) => {
         if (sourceActionsDisabled) {
             return;
         }
-        (0, delete_selected_timeline_item_1.deleteSequencesFromSource)([selection.nodePathInfo], confirm).catch(() => undefined);
-    }, [confirm, selection.nodePathInfo, sourceActionsDisabled]);
+        deleteTimelineItems([selection]);
+    }, [deleteTimelineItems, selection, sourceActionsDisabled]);
     const splitVideoFromAudioDisabledReason = sourceActionsDisabled
         ? 'Studio is read-only'
         : selection.nodePathInfo.numberOfSequencesWithThisNodePath > 1

package/dist/components/InspectorPanel/use-composition-actions.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCompositionActions = void 0;
-const studio_protocol_1 = require("@remotion/studio-protocol");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
@@ -173,7 +172,7 @@ const useCompositionActions = () => {
         });
     }, [canInsertAsset, onAssetSelected, onFilesSelected, setSelectedModal]);
     const onCompositionSelected = (0, react_1.useCallback)(async (composition) => {
-        var _a, _b, _c, _d, _e;
+        var _a, _b;
         if (!canInsertComposition ||
             currentCompositionId === null ||
             compositionFile === null) {
@@ -185,14 +184,12 @@ const useCompositionActions = () => {
                 ? await (0, get_stack_1.getOriginalLocationFromStack)(composition.stack, 'sequence')
                 : null;
             const selectedCompositionFile = (_b = (_a = resolvedLocation === null || resolvedLocation === void 0 ? void 0 : resolvedLocation.source) !== null && _a !== void 0 ? _a : browserStudioOperations === null || browserStudioOperations === void 0 ? void 0 : browserStudioOperations.getCompositionFile(composition.id)) !== null && _b !== void 0 ? _b : null;
-            const compositionDragData = studio_protocol_1.StudioProtocolInternals.makeDragData({
-                type: 'composition',
+            const compositionDragData = {
+                type: 'remotion-composition',
+                version: 1,
                 compositionFile: selectedCompositionFile,
                 compositionId: composition.id,
-                width: (_c = composition.width) !== null && _c !== void 0 ? _c : null,
-                height: (_d = composition.height) !== null && _d !== void 0 ? _d : null,
-                durationInFrames: (_e = composition.durationInFrames) !== null && _e !== void 0 ? _e : null,
-            }).data;
+            };
             await (0, import_assets_1.insertComposition)({
                 composition: compositionDragData,
                 compositionFile,

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/Modals.js

@@ -107,6 +107,6 @@ const Modals = ({ readOnlyStudio }) => {
                     modalContextType.initialTab === 'packages' ||
                     modalContextType.initialTab === 'shortcuts') ? (jsx_runtime_1.jsx(SettingsModal_1.SettingsModal, { initialTab: modalContextType.initialTab, initialPublicLicenseKey: modalContextType.initialPublicLicenseKey }, `${modalContextType.initialTab}-${modalContextType.initialPublicLicenseKey}`)) : null, modalContextType && modalContextType.type === 'web-render' && (jsx_runtime_1.jsx(WebRenderModal_1.WebRenderModalWithLoader, { ...modalContextType })), modalContextType &&
                 modalContextType.type === 'server-render' &&
-                (canRender || modalContextType.readOnlyStudio) ? (jsx_runtime_1.jsx(ServerRenderModal_1.RenderModalWithLoader, { readOnlyStudio: (_a = modalContextType.readOnlyStudio) !== null && _a !== void 0 ? _a : false, initialFrame: modalContextType.initialFrame, initialDarkMode: modalContextType.initialDarkMode, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialGopSize: modalContextType.initialGopSize, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialSampleRate: modalContextType.initialSampleRate, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })) : null, modalContextType && modalContextType.type === 'render-progress' && (jsx_runtime_1.jsx(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'fix-computed-value' && (jsx_runtime_1.jsx(FixComputedValueModal_1.FixComputedValueModal, { state: modalContextType })), modalContextType && modalContextType.type === 'quick-switcher' && (jsx_runtime_1.jsx(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode, assetSelection: modalContextType.assetSelection, compositionSelection: modalContextType.compositionSelection })), modalContextType && modalContextType.type === 'element-library' && (jsx_runtime_1.jsx(ElementLibraryModal_1.ElementLibraryModal, { name: modalContextType.name, url: modalContextType.url })), modalContextType && modalContextType.type === 'add-effect' && (jsx_runtime_1.jsx(EffectPickerModal_1.EffectPickerModal, { state: modalContextType })), modalContextType && modalContextType.type === 'confirmation-dialog' && (jsx_runtime_1.jsx(ConfirmationDialog_1.ConfirmationDialog, { state: modalContextType })), modalContextType && modalContextType.type === 'svg-import-dialog' && (jsx_runtime_1.jsx(SvgImportDialog_1.SvgImportDialog, { state: modalContextType })), (0, studio_runtime_config_1.getStudioAskAIEnabled)() && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }));
+                (canRender || modalContextType.readOnlyStudio) ? (jsx_runtime_1.jsx(ServerRenderModal_1.RenderModalWithLoader, { readOnlyStudio: (_a = modalContextType.readOnlyStudio) !== null && _a !== void 0 ? _a : false, initialFrame: modalContextType.initialFrame, initialDarkMode: modalContextType.initialDarkMode, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialGopSize: modalContextType.initialGopSize, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialSampleRate: modalContextType.initialSampleRate, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })) : null, modalContextType && modalContextType.type === 'render-progress' && (jsx_runtime_1.jsx(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'fix-computed-value' && (jsx_runtime_1.jsx(FixComputedValueModal_1.FixComputedValueModal, { state: modalContextType })), modalContextType && modalContextType.type === 'quick-switcher' && (jsx_runtime_1.jsx(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode, assetSelection: modalContextType.assetSelection, compositionSelection: modalContextType.compositionSelection })), modalContextType && modalContextType.type === 'element-library' && (jsx_runtime_1.jsx(ElementLibraryModal_1.ElementLibraryModal, { name: modalContextType.name, url: modalContextType.url })), modalContextType && modalContextType.type === 'element-install' && (jsx_runtime_1.jsx(ElementInstallConfirmation_1.ElementInstallConfirmation, { state: modalContextType })), modalContextType && modalContextType.type === 'add-effect' && (jsx_runtime_1.jsx(EffectPickerModal_1.EffectPickerModal, { state: modalContextType })), modalContextType && modalContextType.type === 'confirmation-dialog' && (jsx_runtime_1.jsx(ConfirmationDialog_1.ConfirmationDialog, { state: modalContextType })), modalContextType && modalContextType.type === 'svg-import-dialog' && (jsx_runtime_1.jsx(SvgImportDialog_1.SvgImportDialog, { state: modalContextType })), (0, studio_runtime_config_1.getStudioAskAIEnabled)() && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }));
 };
 exports.Modals = Modals;