@remotion/studio 4.0.522 → 4.0.524

package/dist/components/ElementInstallConfirmation.js

@@ -7,7 +7,6 @@ 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");
@@ -18,20 +17,25 @@ const Button_1 = require("./Button");
 const element_install_api_1 = require("./element-install-api");
 const import_assets_1 = require("./import-assets");
 const layout_1 = require("./layout");
+const LazySyntaxHighlightedSource_1 = require("./LazySyntaxHighlightedSource");
+const is_menu_item_1 = require("./Menu/is-menu-item");
 const portals_1 = require("./Menu/portals");
 const ModalButton_1 = require("./ModalButton");
 const ModalContainer_1 = require("./ModalContainer");
 const ModalFooter_1 = require("./ModalFooter");
 const ModalHeader_1 = require("./ModalHeader");
 const NewComposition_1 = require("./NewComposition/NewComposition");
+const RemInput_1 = require("./NewComposition/RemInput");
 const ValidationMessage_1 = require("./NewComposition/ValidationMessage");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const RadioButton_1 = require("./RadioButton");
+const SegmentedControl_1 = require("./SegmentedControl");
 const use_resolved_stack_1 = require("./Timeline/use-resolved-stack");
 const container = {
     display: 'flex',
     flexDirection: 'column',
     gap: 20,
-    color: colors_1.WHITE,
+    color: colors_1.LIGHT_TEXT,
     fontFamily: 'sans-serif',
     fontSize: 13,
     lineHeight: 1.5,
@@ -50,7 +54,7 @@ const sectionStyle = {
 };
 const sectionTitleStyle = {
     margin: 0,
-    color: colors_1.WHITE,
+    color: colors_1.LIGHT_TEXT,
     fontFamily: 'sans-serif',
     fontSize: 13,
     fontWeight: 600,
@@ -78,7 +82,7 @@ const metadataTermStyle = {
 const metadataDescriptionStyle = {
     margin: 0,
     minWidth: 0,
-    color: colors_1.WHITE,
+    color: colors_1.LIGHT_TEXT,
     fontFamily: 'sans-serif',
     fontSize: 13,
     fontWeight: 400,
@@ -121,10 +125,12 @@ const dependencyListStyle = {
     margin: 0,
     padding: 0,
     listStyleType: 'none',
+    textAlign: 'right',
+    minWidth: 0,
 };
 const dependencyNameStyle = {
     minWidth: 0,
-    color: colors_1.WHITE,
+    color: colors_1.LIGHT_TEXT,
     fontFamily: 'sans-serif',
     fontSize: 13,
     lineHeight: 1.5,
@@ -137,9 +143,9 @@ const warningStyle = {
     minWidth: 0,
 };
 const warningIconStyle = {
-    width: 16,
-    height: 16,
-    marginTop: 1,
+    width: 14,
+    height: 14,
+    marginTop: 2,
     flexShrink: 0,
     fill: colors_1.WARNING_COLOR,
 };
@@ -152,10 +158,6 @@ const warningDescriptionStyle = {
     fontWeight: 400,
     lineHeight: 1.5,
 };
-const installWarningDescriptionStyle = {
-    ...warningDescriptionStyle,
-    color: colors_1.WHITE,
-};
 const browseElementsStyle = {
     color: 'inherit',
     fontFamily: 'inherit',
@@ -171,22 +173,32 @@ const sourceDetailsStyle = {
 };
 const sourceSummaryStyle = {
     cursor: 'default',
-    color: colors_1.WHITE,
+    ...(0, hoverable_1.hoverableStyle)({
+        idleBackground: colors_1.TRANSPARENT,
+        hoverBackground: colors_1.TRANSPARENT,
+        idleColor: colors_1.LIGHT_TEXT,
+        hoverColor: colors_1.WHITE,
+    }),
     fontFamily: 'sans-serif',
     fontSize: 13,
     fontWeight: 500,
     lineHeight: 1.5,
 };
-const sourceCodeBlockStyle = {
+const sourceCodeContainerStyle = {
     marginTop: 10,
-    marginBottom: 0,
-    maxHeight: 240,
-    overflow: 'auto',
-    padding: 12,
+    overflow: 'hidden',
     border: `1px solid ${colors_1.WHITE_ALPHA_12}`,
     borderRadius: 6,
+};
+const sourceCodeBlockStyle = {
     backgroundColor: colors_1.INPUT_BACKGROUND,
-    color: colors_1.WHITE,
+    margin: 0,
+    border: 0,
+    borderRadius: 0,
+    maxWidth: 'none',
+    maxHeight: 240,
+    overflow: 'auto',
+    padding: 12,
     fontFamily: 'monospace',
     fontSize: 12,
     lineHeight: 1.5,
@@ -206,36 +218,6 @@ const destinationControlStyle = {
     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: 12,
-    fontWeight: 400,
-    lineHeight: '18px',
-    padding: '4px 8px',
-    whiteSpace: 'nowrap',
-};
-const getDestinationOptionStyle = ({ disabled, selected, }) => ({
-    ...destinationOptionStyle,
-    opacity: disabled ? 0.5 : 1,
-    ...(0, hoverable_1.hoverableStyle)({
-        idleBackground: selected ? colors_1.INPUT_BACKGROUND : colors_1.TRANSPARENT,
-        hoverBackground: selected ? colors_1.INPUT_BACKGROUND : colors_1.TRANSPARENT,
-        idleColor: selected ? colors_1.WHITE : colors_1.LIGHT_TEXT,
-        hoverColor: disabled ? colors_1.LIGHT_TEXT : colors_1.WHITE,
-    }),
-});
 const footerStyle = {
     minWidth: 0,
 };
@@ -267,8 +249,9 @@ const ElementLibraryAddConfirmation = ({ displayName, origin, url }) => {
 };
 exports.ElementLibraryAddConfirmation = ElementLibraryAddConfirmation;
 const ElementInstallConfirmation = ({ state }) => {
-    var _a;
+    var _a, _b, _c, _d, _e, _f;
     const { currentPlan, missingPackages, newPlan, onClose, request, sourceIsUnverified, sourceLabel, } = state;
+    const sourcePreview = (0, react_1.useMemo)(() => makeSourceControlsVisible(request.element.sourceCode), [request.element.sourceCode]);
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const { canvasContent, compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const currentCompositionMetadata = config === null ||
@@ -281,15 +264,12 @@ const ElementInstallConfirmation = ({ state }) => {
             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 || request.source.type === 'browser-studio-link'
         ? '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';
@@ -353,6 +333,7 @@ const ElementInstallConfirmation = ({ state }) => {
             type: 'loading',
         });
         (0, element_install_api_1.prepareElementInstall)({
+            installationName: null,
             destination: {
                 type: 'new-composition',
                 compositionFile: folderCompositionFile,
@@ -388,7 +369,7 @@ const ElementInstallConfirmation = ({ state }) => {
             canceled = true;
         };
     }, [folderCompositionFile, newPlan, request.element, selectedFolderStack]);
-    const { createComposition, heightValidationMessage, nameValidationMessage, valid: newCompositionValuesAreValid, widthValidationMessage, } = (0, use_create_composition_1.useCreateComposition)({
+    const { compositionId: newCompositionId, createComposition, heightValidationMessage, nameValidationMessage, valid: newCompositionValuesAreValid, widthValidationMessage, } = (0, use_create_composition_1.useCreateComposition)({
         canvasCapture: null,
         compositions,
         durationInFrames: newCompositionValues.durationInFrames,
@@ -405,25 +386,151 @@ const ElementInstallConfirmation = ({ state }) => {
         ? activeNewCompositionPlanState.plan
         : null;
     const selectedPlan = mode === 'current-composition' ? currentPlan : selectedNewCompositionPlan;
+    const elementBaseName = (_b = request.element.slug.split('/').at(-1)) !== null && _b !== void 0 ? _b : '';
+    const [refreshPlan, setRefreshPlan] = (0, react_1.useState)(0);
+    const [input, setInput] = (0, react_1.useState)({
+        basePlan: selectedPlan,
+        baseName: elementBaseName,
+        refresh: refreshPlan,
+        name: null,
+        overwritePlan: null,
+    });
+    if (input.basePlan !== selectedPlan ||
+        input.baseName !== elementBaseName ||
+        input.refresh !== refreshPlan) {
+        setInput({
+            basePlan: selectedPlan,
+            baseName: elementBaseName,
+            refresh: refreshPlan,
+            name: null,
+            overwritePlan: null,
+        });
+    }
+    const requestedName = input.name;
+    const [preparation, setPreparation] = (0, react_1.useState)(null);
+    const currentPreparation = (preparation === null || preparation === void 0 ? void 0 : preparation.basePlan) === selectedPlan &&
+        (preparation === null || preparation === void 0 ? void 0 : preparation.refresh) === refreshPlan &&
+        (preparation === null || preparation === void 0 ? void 0 : preparation.requestedName) === requestedName
+        ? preparation
+        : null;
+    const preparedInstallation = (_c = currentPreparation === null || currentPreparation === void 0 ? void 0 : currentPreparation.installation) !== null && _c !== void 0 ? _c : null;
+    const planError = (_d = currentPreparation === null || currentPreparation === void 0 ? void 0 : currentPreparation.error) !== null && _d !== void 0 ? _d : null;
+    const installationName = (_e = requestedName !== null && requestedName !== void 0 ? requestedName : preparedInstallation === null || preparedInstallation === void 0 ? void 0 : preparedInstallation.name) !== null && _e !== void 0 ? _e : elementBaseName;
+    const [existingInstallation, setExistingInstallation] = (0, react_1.useState)(null);
+    const existingDestination = (existingInstallation === null || existingInstallation === void 0 ? void 0 : existingInstallation.basePlan) === selectedPlan &&
+        (existingInstallation === null || existingInstallation === void 0 ? void 0 : existingInstallation.refresh) === refreshPlan
+        ? existingInstallation
+        : null;
+    const overwriteExisting = existingDestination !== null &&
+        input.overwritePlan === existingDestination.plan;
+    const activePlan = overwriteExisting
+        ? existingDestination.plan
+        : ((_f = preparedInstallation === null || preparedInstallation === void 0 ? void 0 : preparedInstallation.plan) !== null && _f !== void 0 ? _f : null);
+    const [createdComposition, setCreatedComposition] = (0, react_1.useState)(null);
+    const creationKey = JSON.stringify(newCompositionValues);
+    const compositionAlreadyCreated = createdComposition === creationKey;
+    (0, react_1.useEffect)(() => {
+        if (selectedPlan === null) {
+            return;
+        }
+        let canceled = false;
+        (async () => {
+            let candidate = requestedName !== null && requestedName !== void 0 ? requestedName : elementBaseName;
+            let copyNumber = 1;
+            while (true) {
+                const result = await (0, element_install_api_1.prepareElementInstall)({
+                    installationName: candidate,
+                    destination: mode === 'current-composition'
+                        ? {
+                            type: 'current-composition',
+                            compositionFile: request.compositionFile,
+                            compositionId: request.compositionId,
+                        }
+                        : {
+                            type: 'new-composition',
+                            compositionFile: selectedPlan.compositionFile,
+                        },
+                    element: request.element,
+                });
+                if (canceled)
+                    return;
+                if (!result.success)
+                    throw new Error(result.reason);
+                const prepared = {
+                    basePlan: selectedPlan,
+                    name: candidate,
+                    refresh: refreshPlan,
+                    plan: result.plan,
+                };
+                if (result.plan.expectedFileState.exists) {
+                    setExistingInstallation((previous) => (previous === null || previous === void 0 ? void 0 : previous.basePlan) === selectedPlan &&
+                        previous.refresh === refreshPlan
+                        ? previous
+                        : prepared);
+                    if (requestedName === null) {
+                        candidate = `${elementBaseName}-copy${copyNumber === 1 ? '' : `-${copyNumber}`}`;
+                        copyNumber++;
+                        continue;
+                    }
+                }
+                setPreparation({
+                    basePlan: selectedPlan,
+                    refresh: refreshPlan,
+                    requestedName,
+                    installation: prepared,
+                    error: null,
+                });
+                return;
+            }
+        })().catch((error) => {
+            if (!canceled) {
+                setPreparation({
+                    basePlan: selectedPlan,
+                    refresh: refreshPlan,
+                    requestedName,
+                    installation: null,
+                    error: error instanceof Error ? error.message : String(error),
+                });
+            }
+        });
+        return () => {
+            canceled = true;
+        };
+    }, [
+        elementBaseName,
+        requestedName,
+        mode,
+        refreshPlan,
+        request,
+        selectedPlan,
+    ]);
+    const installationNameError = installationName.length > 0
+        ? (planError !== null && planError !== void 0 ? planError : (requestedName !== null && (activePlan === null || activePlan === void 0 ? void 0 : activePlan.expectedFileState.exists)
+            ? 'Name already taken.'
+            : null))
+        : null;
     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 &&
+        (overwriteExisting ||
+            (planError === null &&
+                studio_protocol_1.StudioProtocolInternals.makeElementFileNameFromSlug(installationName) === `${installationName}.element.tsx` &&
+                (activePlan !== null
+                    ? !activePlan.expectedFileState.exists
+                    : requestedName !== null))) &&
         (mode === 'current-composition'
             ? currentPlan !== null
-            : newCompositionValuesAreValid &&
+            : (newCompositionValuesAreValid || compositionAlreadyCreated) &&
                 folderTargetIsReady &&
                 selectedNewCompositionPlan !== null);
     const submit = (0, react_1.useCallback)(async () => {
-        if (!canSubmit) {
+        var _a, _b;
+        if (!canSubmit || selectedPlan === null) {
             return;
         }
         setSubmitting(true);
-        if (mode === 'new-composition') {
-            if (selectedNewCompositionPlan === null) {
-                setSubmitting(false);
-                return;
-            }
+        if (mode === 'new-composition' && !compositionAlreadyCreated) {
             const created = await createComposition({
                 signal: new AbortController().signal,
                 symbolicatedStack: selectedFolderStack === null ? null : folderSymbolicatedStack,
@@ -433,115 +540,125 @@ const ElementInstallConfirmation = ({ state }) => {
                 setSubmitting(false);
                 return;
             }
-            await (0, import_assets_1.insertElement)({
-                compositionFile: selectedNewCompositionPlan.compositionFile,
-                compositionId: newCompositionValues.id,
-                element: request.element,
-                expectedFileState: selectedNewCompositionPlan.expectedFileState,
-                from: null,
-                overwriteExisting: selectedNewCompositionPlan.expectedFileState.exists,
-                position: null,
-            });
-            onClose();
-            return;
-        }
-        if (currentPlan === null) {
-            setSubmitting(false);
-            return;
+            setCreatedComposition(creationKey);
         }
-        await (0, import_assets_1.insertElement)({
-            compositionFile: request.compositionFile,
-            compositionId: request.compositionId,
+        const installed = await (0, import_assets_1.insertElement)({
+            installationName: overwriteExisting
+                ? ((_a = existingDestination === null || existingDestination === void 0 ? void 0 : existingDestination.name) !== null && _a !== void 0 ? _a : installationName)
+                : installationName,
+            compositionFile: mode === 'new-composition'
+                ? selectedPlan.compositionFile
+                : request.compositionFile,
+            compositionId: mode === 'new-composition' ? newCompositionId : request.compositionId,
             element: request.element,
-            expectedFileState: currentPlan.expectedFileState,
-            from: request.from,
-            overwriteExisting: currentPlan.expectedFileState.exists,
-            position: request.position,
+            // The insert operation revalidates this even if the name preflight is pending.
+            expectedFileState: (_b = activePlan === null || activePlan === void 0 ? void 0 : activePlan.expectedFileState) !== null && _b !== void 0 ? _b : { exists: false },
+            from: mode === 'new-composition' ? null : request.from,
+            overwriteExisting,
+            position: mode === 'new-composition' ? null : request.position,
         });
-        onClose();
+        if (installed)
+            onClose();
+        else {
+            setSubmitting(false);
+            setRefreshPlan((value) => value + 1);
+        }
     }, [
+        activePlan,
+        existingDestination,
+        compositionAlreadyCreated,
+        creationKey,
+        installationName,
+        overwriteExisting,
         canSubmit,
         createComposition,
-        currentPlan,
         folderSymbolicatedStack,
         mode,
-        newCompositionValues.id,
+        newCompositionId,
         onClose,
         request,
         selectedFolderStack,
-        selectedNewCompositionPlan,
+        selectedPlan,
     ]);
     const cancel = (0, react_1.useCallback)(() => {
         if (!submitting) {
             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 destinationOptions = (0, react_1.useMemo)(() => [
+        {
+            key: 'current-composition',
+            label: 'Current composition',
+            selected: mode === 'current-composition',
+            onClick: currentPlan === null ? null : () => setMode('current-composition'),
+        },
+        {
+            key: 'new-composition',
+            label: 'New composition',
+            selected: mode === 'new-composition',
+            onClick: () => {
+                setMode('new-composition');
+                requestAnimationFrame(() => {
+                    var _a;
+                    return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.select();
+                });
+            },
+        },
+    ], [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, { 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: dialogContent, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [
                             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',
-                                                }), 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();
-                                                    });
-                                                }, role: "radio", style: {
-                                                    ...getDestinationOptionStyle({
-                                                        disabled: false,
-                                                        selected: mode === 'new-composition',
-                                                    }),
-                                                    borderLeft: `1px solid ${colors_1.WHITE_ALPHA_12}`,
-                                                }, tabIndex: mode === 'new-composition' ? 0 : -1, type: "button", children: "New composition" })
-                                        ] })
+                                ] }), activePlan ? (jsx_runtime_1.jsxs("dl", { style: requestSourceStyle, children: [
+                                    jsx_runtime_1.jsx("dt", { style: sectionTitleStyle, children: "Destination" }), jsx_runtime_1.jsx("dd", { style: requestSourceDescriptionStyle, children: activePlan.filePath })
+                                ] })) : null, jsx_runtime_1.jsxs("div", { style: destinationControlStyle, children: [
+                                    jsx_runtime_1.jsx("div", { style: sectionTitleStyle, children: "Add to" }), jsx_runtime_1.jsx("div", { "aria-label": "Add to", role: "group", style: { marginLeft: 'auto' }, children: jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: destinationOptions, needsWrapping: false, size: "medium" }) })
                                 ] }), 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: 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, (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(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."] })
+                                ] })) : null, mode === 'new-composition' ? (jsx_runtime_1.jsxs("section", { style: { ...sectionStyle, marginInline: -16 }, "aria-label": "New composition settings", children: [
+                                    jsx_runtime_1.jsx(NewComposition_1.NewCompositionFields, { compositionId: newCompositionId, heightValidationMessage: heightValidationMessage, inputRef: inputRef, nameValidationMessage: compositionAlreadyCreated ? null : 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.jsx("section", { style: sectionStyle, "aria-label": "Element implementation", children: existingDestination ? (jsx_runtime_1.jsxs("div", { role: "radiogroup", "aria-label": "Existing Element file", style: sectionStyle, children: [
+                                        jsx_runtime_1.jsx(RadioButton_1.RadioButton, { checked: !overwriteExisting, disabled: submitting, onClick: () => setInput((previous) => ({ ...previous, overwritePlan: null })), children: "Create a copy" }), !overwriteExisting ? (jsx_runtime_1.jsxs("div", { style: {
+                                                ...sectionStyle,
+                                                paddingLeft: 28,
+                                                maxWidth: 320,
+                                                minWidth: 0,
+                                            }, children: [
+                                                jsx_runtime_1.jsx(RemInput_1.RemotionInput, { rightAlign: false, status: installationNameError ? 'error' : 'ok', id: "element-install-name", name: "installationName", "aria-label": "Installation name", placeholder: "New name", value: installationName, disabled: submitting, onChange: (event) => {
+                                                        const name = event.target.value;
+                                                        setInput((previous) => ({
+                                                            ...previous,
+                                                            name,
+                                                            overwritePlan: null,
+                                                        }));
+                                                    } }), installationNameError ? (jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: installationNameError, type: "error" })) : null] })) : null, jsx_runtime_1.jsxs("div", { style: sectionStyle, children: [
+                                                jsx_runtime_1.jsx(RadioButton_1.RadioButton, { checked: overwriteExisting, disabled: submitting, onClick: () => setInput((previous) => ({
+                                                        ...previous,
+                                                        overwritePlan: existingDestination.plan,
+                                                    })), children: "Replace existing" }), jsx_runtime_1.jsx("p", { style: {
+                                                        ...warningDescriptionStyle,
+                                                        paddingLeft: 28,
+                                                        overflowWrap: 'anywhere',
+                                                    }, children: existingDestination.plan.filePath }), overwriteExisting ? (jsx_runtime_1.jsx("p", { style: { ...overwriteStyle, paddingLeft: 28 }, children: "Overwrites customizations for all usages." })) : null] })
+                                    ] })) : !activePlan && planError ? (jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: planError, type: "error" })) : null }), missingPackages.length > 0 ? (jsx_runtime_1.jsxs("section", { style: requestSourceStyle, "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: 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.'] })
+                                    jsx_runtime_1.jsx(ValidationMessage_1.WarningTriangle, { style: warningIconStyle }), jsx_runtime_1.jsx("p", { style: warningDescriptionStyle, children: "Installed code can access your files and network." })
                                 ] }), 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) }) })
+                                    jsx_runtime_1.jsx("summary", { className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, style: sourceSummaryStyle, children: "Source code" }), jsx_runtime_1.jsx("div", { style: sourceCodeContainerStyle, children: jsx_runtime_1.jsx("pre", { className: `language-tsx ${is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME} ${is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, style: sourceCodeBlockStyle, children: jsx_runtime_1.jsx("code", { style: sourceCodeStyle, children: jsx_runtime_1.jsx(LazySyntaxHighlightedSource_1.LazySyntaxHighlightedSource, { source: sourcePreview }) }) }) })
                                 ] })
                         ] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { style: footerStyle, children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                                jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(Button_1.Button, { disabled: submitting, onClick: cancel, style: cancelStyle, children: "Cancel" }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsxs(ModalButton_1.ModalButton, { autoFocus: mode === 'current-composition', disabled: !canSubmit, onClick: submit, children: [submitting ? 'Installing…' : 'Install', jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: false })
+                                jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(Button_1.Button, { disabled: submitting, onClick: cancel, style: cancelStyle, children: "Cancel" }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsxs(ModalButton_1.ModalButton, { autoFocus: mode === 'current-composition', disabled: !canSubmit, onClick: submit, children: [submitting
+                                            ? 'Installing…'
+                                            : overwriteExisting
+                                                ? 'Replace and insert'
+                                                : 'Install', jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: false })
                                     ] })
                             ] }) })
                 ] })