@remotion/studio 4.0.518 → 4.0.519

package/dist/components/ConfigureLicenseModal.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const layout_1 = require("./layout");
+const LicenseExplanation_1 = require("./LicenseExplanation");
 const LicenseKeyValidation_1 = require("./LicenseKeyValidation");
 const RemInput_1 = require("./NewComposition/RemInput");
 const ValidationMessage_1 = require("./NewComposition/ValidationMessage");
@@ -28,16 +29,12 @@ const description = {
     lineHeight: 1.5,
     margin: 0,
 };
-const descriptionLink = {
-    color: colors_1.WHITE,
+const externalDescriptionLink = {
+    color: colors_1.BLUE,
     fontFamily: 'sans-serif',
     fontSize: 14,
     lineHeight: '21px',
 };
-const externalDescriptionLink = {
-    ...descriptionLink,
-    color: colors_1.BLUE,
-};
 const externalLinkIndicator = {
     display: 'inline-block',
     height: 12,
@@ -45,32 +42,6 @@ const externalLinkIndicator = {
     verticalAlign: -2,
     width: 12,
 };
-const licenseExplanation = {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: 12,
-};
-const licenseExplanationRow = {
-    display: 'flex',
-    alignItems: 'center',
-    gap: 12,
-};
-const people = {
-    display: 'grid',
-    gridTemplateColumns: 'repeat(4, 9px)',
-    gap: 3,
-    flexShrink: 0,
-};
-const person = {
-    display: 'block',
-    height: 24,
-    overflow: 'visible',
-    width: 9,
-};
-const PersonIcon = ({ handsUp, opacity }) => {
-    return (jsx_runtime_1.jsxs("svg", { "aria-hidden": "true", opacity: opacity, style: person, viewBox: "0 0 192 512", xmlns: "http://www.w3.org/2000/svg", children: [
-            jsx_runtime_1.jsx("path", { fill: colors_1.LIGHT_TEXT, d: "M128 64a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM32 64A64 64 0 1 1 160 64 64 64 0 1 1 32 64zm0 128l0 128 128 0 0-128-128 0zM0 160l192 0 0 192-32 0 0 160-32 0 0-160-64 0 0 160-32 0 0-160-32 0 0-192z" }), handsUp ? (jsx_runtime_1.jsx("path", { d: "M10.667 192 0 -32 M181.333 192 192 -32", fill: "none", stroke: colors_1.LIGHT_TEXT, strokeWidth: "32" })) : null] }));
-};
 const freeLicenseMessage = {
     ...description,
     marginBottom: 5,
@@ -199,22 +170,7 @@ const LicenseSettings = () => {
     });
     const displayedError = error !== null && error !== void 0 ? error : settingsError;
     return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsxs("div", { style: content, children: [
-                jsx_runtime_1.jsxs("div", { style: licenseExplanation, children: [
-                        jsx_runtime_1.jsxs("div", { style: licenseExplanationRow, children: [
-                                jsx_runtime_1.jsxs("div", { style: people, children: [
-                                        jsx_runtime_1.jsx(PersonIcon, { handsUp: true, opacity: 1 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: true, opacity: 1 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: true, opacity: 1 })
-                                    ] }), jsx_runtime_1.jsx("p", { style: description, children: "Remotion is free to use if you are an individual or company of 3 or less." })
-                            ] }), jsx_runtime_1.jsxs("div", { style: licenseExplanationRow, children: [
-                                jsx_runtime_1.jsxs("div", { style: people, children: [
-                                        jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 1 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 1 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 1 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 1 })
-                                    ] }), jsx_runtime_1.jsxs("p", { style: description, children: ["If used in an organization with 4+ people, you need a", ' ', jsx_runtime_1.jsx("a", { style: descriptionLink, href: "https://remotion.pro/license", children: "Company License" }),
-                                        "."] })
-                            ] }), jsx_runtime_1.jsxs("div", { style: licenseExplanationRow, children: [
-                                jsx_runtime_1.jsxs("div", { style: people, children: [
-                                        jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 1 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 0.3 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 0.3 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 0.3 })
-                                    ] }), jsx_runtime_1.jsx("p", { style: description, children: "The total headcount matters, not the amount of people using Remotion." })
-                            ] })
-                    ] }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 2 }), jsx_runtime_1.jsxs("div", { "aria-label": "License type", role: "radiogroup", children: [
+                jsx_runtime_1.jsx(LicenseExplanation_1.LicenseExplanation, {}), jsx_runtime_1.jsx(layout_1.Spacing, { y: 2 }), jsx_runtime_1.jsxs("div", { "aria-label": "License type", role: "radiogroup", children: [
                         jsx_runtime_1.jsx(RadioButton_1.RadioButton, { checked: licenseType === 'free', onClick: toggleFreeLicense, children: "I am eligible for the Free License" }), licenseType === 'free' ? (jsx_runtime_1.jsx("p", { style: freeLicenseMessage, children: "That's it! Enjoy Remotion." })) : null, jsx_runtime_1.jsx(RadioButton_1.RadioButton, { checked: licenseType === 'company', onClick: toggleCompanyLicense, children: "I need a Company License" }), licenseType === 'company' ? (jsx_runtime_1.jsxs("div", { style: companyLicenseContent, children: [
                                 jsx_runtime_1.jsxs("p", { style: description, children: ["Visit", ' ', jsx_runtime_1.jsxs("a", { style: externalDescriptionLink, href: "https://remotion.pro/license", target: "_blank", rel: "noopener noreferrer", children: ["remotion.pro/license",
                                                 jsx_runtime_1.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", style: externalLinkIndicator, children: jsx_runtime_1.jsx("path", { d: "M4 12 12 4M6 4h6v6", fill: "none", stroke: colors_1.BLUE, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) })

package/dist/components/CurrentAsset.js

@@ -215,7 +215,7 @@ const AssetInfo = ({ assetName, contentSized = false, onAssetClick, readOnlyStud
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoHeader, { contentSized: contentSized, minHeight: exports.CURRENT_ASSET_HEIGHT, padding: contentSized
                     ? `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px 6px`
-                    : '4px 0', children: jsx_runtime_1.jsx(InlineEditableTitle_1.InlineEditableTitle, { value: fileName, canRename: canRename, getInitialSelection: use_rename_static_file_1.getStaticFileRenameSelection, onClick: onAssetClick, onCommit: onRename, size: contentSized ? 'default' : 'inspector', title: assetName }) }), fileDetails.length > 0 ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: "File", children: jsx_runtime_1.jsx("div", { style: assetMetadataStyle, children: fileDetails.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))) }) })) : null, mediaSections && mediaSections.video ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: "Video", children: jsx_runtime_1.jsx("div", { style: assetMetadataStyle, children: mediaSections.video.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))) }) })) : null, mediaSections && mediaSections.audio !== null ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: "Audio", children: mediaSections.audio.length === 0 ? (jsx_runtime_1.jsx("div", { style: assetEmptyStateStyle, children: "None" })) : (jsx_runtime_1.jsx("div", { style: assetMetadataStyle, children: mediaSections.audio.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))) })) })) : null, jsx_runtime_1.jsxs(common_1.InspectorQuickActionsSection, { children: [src ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: false, onClick: onOpenConvert, renderIcon: (color) => (jsx_runtime_1.jsx(remotion_convert_1.RemotionConvertIcon, { color: color, style: quickActionIconStyle })), children: ["Convert",
+                    : '4px 0', children: jsx_runtime_1.jsx(InlineEditableTitle_1.InlineEditableTitle, { value: fileName, canRename: canRename, getInitialSelection: use_rename_static_file_1.getStaticFileRenameSelection, onClick: onAssetClick, onCommit: onRename, size: contentSized ? 'default' : 'inspector', title: assetName }) }), fileDetails.length > 0 ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: "File", children: jsx_runtime_1.jsx("div", { style: assetMetadataStyle, children: fileDetails.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))) }) })) : null, mediaSections && mediaSections.video ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: "Video", children: jsx_runtime_1.jsx("div", { style: assetMetadataStyle, children: mediaSections.video.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))) }) })) : null, mediaSections && mediaSections.audio !== null ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: "Audio", children: mediaSections.audio.length === 0 ? (jsx_runtime_1.jsx("div", { style: assetEmptyStateStyle, children: "None" })) : (jsx_runtime_1.jsx("div", { style: assetMetadataStyle, children: mediaSections.audio.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))) })) })) : null, jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: "Actions" }), jsx_runtime_1.jsxs(common_1.InspectorQuickActionsSection, { children: [src ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: false, onClick: onOpenConvert, renderIcon: (color) => (jsx_runtime_1.jsx(remotion_convert_1.RemotionConvertIcon, { color: color, style: quickActionIconStyle })), children: ["Convert",
                             jsx_runtime_1.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", style: convertArrowStyle, 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, fileManagerAvailable ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: fileManagerDisabled, onClick: onShowInFileManager, renderIcon: (color) => (jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { color: color, style: quickActionIconStyle })), children: ["Show in ", fileManagerName] })) : null, jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: mutationsDisabled, onClick: onDelete, renderIcon: (color) => (jsx_runtime_1.jsx(trash_1.TrashIcon, { color: color, style: quickActionIconStyle })), children: "Delete" })] })
         ] }));

package/dist/components/ElementInstallConfirmation.d.ts

@@ -1,18 +1,31 @@
+import type { ElementInstallExpectedFileState, ElementInstallRequest } from '@remotion/studio-shared';
 import React from 'react';
 export declare const ElementLibraryAddConfirmation: React.FC<{
     readonly displayName: string | null;
     readonly origin: string;
     readonly url: string;
 }>;
-export declare const ElementInstallConfirmation: React.FC<{
-    readonly displayName: string;
-    readonly sourceLabel: string;
-    readonly sourceIsUnverified: boolean;
-    readonly compositionId: string;
+type ElementInstallPlan = {
+    readonly compositionFile: string;
     readonly filePath: string;
-    readonly overwritesExistingFile: boolean;
+    readonly expectedFileState: ElementInstallExpectedFileState;
+};
+type CurrentCompositionMetadata = {
+    readonly durationInFrames: number;
+    readonly fps: number;
+    readonly height: number;
+    readonly width: number;
+};
+export declare const ElementInstallConfirmation: React.FC<{
+    readonly currentCompositionMetadata: CurrentCompositionMetadata | null;
+    readonly currentPlan: ElementInstallPlan | null;
     readonly dependenciesToReview: string[];
     readonly missingPackages: string[];
-    readonly sourceCode: string;
+    readonly newPlan: ElementInstallPlan;
+    readonly onClose: () => void;
+    readonly request: ElementInstallRequest;
+    readonly sourceIsUnverified: boolean;
+    readonly sourceLabel: string;
     readonly usesBrowserDependencyResolution: boolean;
 }>;
+export {};

package/dist/components/ElementInstallConfirmation.js

@@ -2,8 +2,30 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ElementInstallConfirmation = exports.ElementLibraryAddConfirmation = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const studio_protocol_1 = require("@remotion/studio-protocol");
+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 colors_1 = require("../helpers/colors");
+const hoverable_1 = require("../helpers/hoverable");
+const resolved_stack_to_symbolicated_1 = require("../helpers/resolved-stack-to-symbolicated");
+const use_create_composition_1 = require("../helpers/use-create-composition");
+const validate_new_comp_data_1 = require("../helpers/validate-new-comp-data");
+const z_index_1 = require("../state/z-index");
+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 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 ValidationMessage_1 = require("./NewComposition/ValidationMessage");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const use_resolved_stack_1 = require("./Timeline/use-resolved-stack");
 const container = {
     display: 'flex',
     flexDirection: 'column',
@@ -13,6 +35,13 @@ const container = {
     fontSize: 13,
     lineHeight: 1.5,
 };
+const dialogContent = {
+    ...container,
+    padding: 16,
+    width: 'min(640px, calc(100vw - 40px))',
+    maxHeight: 'min(720px, calc(100vh - 140px))',
+    overflowY: 'auto',
+};
 const sectionStyle = {
     display: 'flex',
     flexDirection: 'column',
@@ -34,7 +63,7 @@ const metadataStyle = {
 };
 const metadataRowStyle = {
     display: 'grid',
-    gridTemplateColumns: '100px minmax(0, 1fr)',
+    gridTemplateColumns: '120px minmax(0, 1fr)',
     alignItems: 'baseline',
     gap: 12,
 };
@@ -172,6 +201,44 @@ const sourceCodeStyle = {
     fontSize: 'inherit',
     lineHeight: 'inherit',
 };
+const destinationControlStyle = {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 16,
+};
+const destinationOptionsStyle = {
+    display: 'flex',
+    overflow: 'hidden',
+    border: `1px solid ${colors_1.WHITE_ALPHA_12}`,
+    borderRadius: 4,
+};
+const destinationOptionStyle = {
+    appearance: 'none',
+    border: 0,
+    cursor: 'default',
+    fontFamily: 'sans-serif',
+    fontSize: 11,
+    fontWeight: 400,
+    lineHeight: 1.5,
+    padding: '2px 7px',
+};
+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,
+};
+const cancelStyle = {
+    minWidth: 90,
+};
 const makeSourceControlsVisible = (sourceCode) => {
     return sourceCode.replace(/[\u200b-\u200f\u202a-\u202e\u2066-\u2069\ufeff]/g, (character) => {
         var _a;
@@ -195,37 +262,263 @@ const ElementLibraryAddConfirmation = ({ displayName, origin, url }) => {
         ] }));
 };
 exports.ElementLibraryAddConfirmation = ElementLibraryAddConfirmation;
-const ElementInstallConfirmation = ({ displayName, sourceLabel, sourceIsUnverified, compositionId, filePath, overwritesExistingFile, dependenciesToReview, missingPackages, sourceCode, usesBrowserDependencyResolution, }) => {
-    return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            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: 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: compositionId }) })
-                        ] }), 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: filePath }) })
-                        ] }), overwritesExistingFile ? (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));
-                        }) })
-                ] })) : 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
-                                ? null
-                                : ' Package lifecycle scripts may also run during installation, with access to your files and the 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(sourceCode) }) })
+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 { 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 [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';
+        const baseName = `${elementComponentName}Composition`;
+        let candidate = baseName;
+        let suffix = 2;
+        while ((0, validate_new_comp_data_1.validateCompositionName)(candidate, compositions) !== null) {
+            candidate = `${baseName}${suffix}`;
+            suffix++;
+        }
+        const size = (_b = request.element.dimensions) !== null && _b !== void 0 ? _b : (currentCompositionMetadata === null
+            ? { width: 1920, height: 1080 }
+            : {
+                width: currentCompositionMetadata.width,
+                height: currentCompositionMetadata.height,
+            });
+        return {
+            durationInFrames: (_d = (_c = request.element.durationInFrames) !== null && _c !== void 0 ? _c : currentCompositionMetadata === null || currentCompositionMetadata === void 0 ? void 0 : currentCompositionMetadata.durationInFrames) !== null && _d !== void 0 ? _d : 150,
+            folder: { folderName: null, parentName: null, stack: null },
+            fps: (_e = currentCompositionMetadata === null || currentCompositionMetadata === void 0 ? void 0 : currentCompositionMetadata.fps) !== null && _e !== void 0 ? _e : 30,
+            id: candidate,
+            size,
+        };
+    });
+    const selectedFolderStack = newCompositionValues.folder.stack;
+    const resolvedFolderLocation = (0, use_resolved_stack_1.useResolvedStack)(selectedFolderStack);
+    const folderSymbolicatedStack = (0, react_1.useMemo)(() => (0, resolved_stack_to_symbolicated_1.resolvedStackToSymbolicated)(resolvedFolderLocation), [resolvedFolderLocation]);
+    const folderCompositionFile = (_a = folderSymbolicatedStack === null || folderSymbolicatedStack === void 0 ? void 0 : folderSymbolicatedStack.originalFileName) !== null && _a !== void 0 ? _a : null;
+    const [newCompositionPlanState, setNewCompositionPlanState] = (0, react_1.useState)({
+        folderStack: null,
+        type: 'ready',
+        plan: newPlan,
+    });
+    (0, react_1.useEffect)(() => {
+        if (selectedFolderStack === null) {
+            setNewCompositionPlanState({
+                folderStack: null,
+                type: 'ready',
+                plan: newPlan,
+            });
+            return;
+        }
+        if (!(0, use_resolved_stack_1.hasResolvedStack)(selectedFolderStack)) {
+            setNewCompositionPlanState({
+                folderStack: selectedFolderStack,
+                type: 'loading',
+            });
+            return;
+        }
+        if (folderCompositionFile === null) {
+            setNewCompositionPlanState({
+                folderStack: selectedFolderStack,
+                type: 'error',
+                reason: 'Could not determine where the new composition should be created.',
+            });
+            return;
+        }
+        let canceled = false;
+        setNewCompositionPlanState({
+            folderStack: selectedFolderStack,
+            type: 'loading',
+        });
+        (0, element_install_api_1.prepareElementInstall)({
+            destination: {
+                type: 'new-composition',
+                compositionFile: folderCompositionFile,
+            },
+            element: request.element,
+        })
+            .then((result) => {
+            if (canceled) {
+                return;
+            }
+            setNewCompositionPlanState(result.success
+                ? {
+                    folderStack: selectedFolderStack,
+                    type: 'ready',
+                    plan: result.plan,
+                }
+                : {
+                    folderStack: selectedFolderStack,
+                    type: 'error',
+                    reason: result.reason,
+                });
+        })
+            .catch((error) => {
+            if (!canceled) {
+                setNewCompositionPlanState({
+                    folderStack: selectedFolderStack,
+                    type: 'error',
+                    reason: error instanceof Error ? error.message : String(error),
+                });
+            }
+        });
+        return () => {
+            canceled = true;
+        };
+    }, [folderCompositionFile, newPlan, request.element, selectedFolderStack]);
+    const { createComposition, heightValidationMessage, nameValidationMessage, valid: newCompositionValuesAreValid, widthValidationMessage, } = (0, use_create_composition_1.useCreateComposition)({
+        canvasCapture: null,
+        compositions,
+        durationInFrames: newCompositionValues.durationInFrames,
+        folderName: newCompositionValues.folder.folderName,
+        newId: newCompositionValues.id,
+        parentName: newCompositionValues.folder.parentName,
+        selectedFrameRate: newCompositionValues.fps,
+        size: newCompositionValues.size,
+    });
+    const activeNewCompositionPlanState = newCompositionPlanState.folderStack === selectedFolderStack
+        ? newCompositionPlanState
+        : null;
+    const selectedNewCompositionPlan = (activeNewCompositionPlanState === null || activeNewCompositionPlanState === void 0 ? void 0 : activeNewCompositionPlanState.type) === 'ready'
+        ? activeNewCompositionPlanState.plan
+        : null;
+    const selectedPlan = mode === 'current-composition' ? currentPlan : selectedNewCompositionPlan;
+    const folderTargetIsReady = selectedFolderStack === null ||
+        ((0, use_resolved_stack_1.hasResolvedStack)(selectedFolderStack) && folderCompositionFile !== null);
+    const canSubmit = !submitting &&
+        (mode === 'current-composition'
+            ? currentPlan !== null
+            : newCompositionValuesAreValid &&
+                folderTargetIsReady &&
+                selectedNewCompositionPlan !== null);
+    const submit = (0, react_1.useCallback)(async () => {
+        if (!canSubmit) {
+            return;
+        }
+        setSubmitting(true);
+        if (mode === 'new-composition') {
+            if (selectedNewCompositionPlan === null) {
+                setSubmitting(false);
+                return;
+            }
+            const created = await createComposition({
+                signal: new AbortController().signal,
+                symbolicatedStack: selectedFolderStack === null ? null : folderSymbolicatedStack,
+            });
+            if (!created.success) {
+                (0, NotificationCenter_1.showNotification)(`Could not create composition: ${created.reason}`, 4000);
+                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;
+        }
+        await (0, import_assets_1.insertElement)({
+            compositionFile: request.compositionFile,
+            compositionId: request.compositionId,
+            element: request.element,
+            expectedFileState: currentPlan.expectedFileState,
+            from: request.from,
+            overwriteExisting: currentPlan.expectedFileState.exists,
+            position: request.position,
+        });
+        onClose();
+    }, [
+        canSubmit,
+        createComposition,
+        currentPlan,
+        folderSymbolicatedStack,
+        mode,
+        newCompositionValues.id,
+        onClose,
+        request,
+        selectedFolderStack,
+        selectedNewCompositionPlan,
+    ]);
+    const cancel = (0, react_1.useCallback)(() => {
+        if (!submitting) {
+            onClose();
+        }
+    }, [onClose, submitting]);
+    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: [
+                    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({
+                                                    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: () => {
+                                                    setMode('new-composition');
+                                                    requestAnimationFrame(() => {
+                                                        var _a;
+                                                        return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.select();
+                                                    });
+                                                }, style: {
+                                                    ...getDestinationOptionStyle({
+                                                        disabled: false,
+                                                        selected: mode === 'new-composition',
+                                                    }),
+                                                    borderLeft: `1px solid ${colors_1.WHITE_ALPHA_12}`,
+                                                }, 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."] })
+                                ] })) : 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));
+                                        }) })
+                                ] })) : 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
+                                                ? null
+                                                : ' Package lifecycle scripts may also run during installation, with access to your files and the 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(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 })
+                                    ] })
+                            ] }) })
                 ] })
-        ] }));
+        ] }), (0, portals_1.getPortal)(currentZIndex));
 };
 exports.ElementInstallConfirmation = ElementInstallConfirmation;