@remotion/studio 4.0.518 → 4.0.520

package/dist/components/ElementInstallConfirmation.js

@@ -2,8 +2,31 @@
 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 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");
+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 +36,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 +64,7 @@ const metadataStyle = {
 };
 const metadataRowStyle = {
     display: 'grid',
-    gridTemplateColumns: '100px minmax(0, 1fr)',
+    gridTemplateColumns: '120px minmax(0, 1fr)',
     alignItems: 'baseline',
     gap: 12,
 };
@@ -172,6 +202,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 +263,276 @@ 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 = ({ state }) => {
+    var _a, _b;
+    const { currentPlan, dependenciesToReview, 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 [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;

package/dist/components/FixComputedValueModal.js

@@ -1,53 +1,17 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FixComputedValueModal = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
+const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const copy_text_1 = require("../helpers/copy-text");
-const open_in_editor_1 = require("../helpers/open-in-editor");
-const caret_1 = require("../icons/caret");
 const clipboard_1 = require("../icons/clipboard");
-const CodingAgentIcon_1 = require("./CodingAgentIcon");
+const CodingAgentButton_1 = require("./CodingAgentButton");
 const InlineAction_1 = require("./InlineAction");
 const ModalFooter_1 = require("./ModalFooter");
 const ModalHeader_1 = require("./ModalHeader");
 const DismissableModal_1 = require("./NewComposition/DismissableModal");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
-const SegmentedButton_1 = require("./SegmentedButton");
 const SettingsContext_1 = require("./SettingsContext");
 const panelStyle = {
     borderRadius: 6,
@@ -93,28 +57,12 @@ const footer = {
     flex: 'none',
     justifyContent: 'flex-end',
 };
-const mainSegmentStyle = {
-    gap: 6,
-    padding: '0 9px',
-};
-const dropdownSegmentStyle = {
-    padding: 0,
-    width: 20,
-};
-const menuLabel = {
-    color: 'inherit',
-    fontFamily: 'sans-serif',
-    fontSize: 13,
-    lineHeight: '16px',
-};
 const FixComputedValueModal = ({ state }) => {
-    var _a, _b;
+    var _a;
     const { codingAgentInfo } = (0, SettingsContext_1.useSettings)();
     const prompt = `/remotion-interactivity ${state.context} make "${state.prop}" interactive`;
     const installCommand = 'npx remotion skills add';
-    const installedCodingAgents = (_a = codingAgentInfo === null || codingAgentInfo === void 0 ? void 0 : codingAgentInfo.installedCodingAgents) !== null && _a !== void 0 ? _a : [];
-    const defaultCodingAgent = (_b = installedCodingAgents.find((agent) => agent.id === (codingAgentInfo === null || codingAgentInfo === void 0 ? void 0 : codingAgentInfo.defaultCodingAgent))) !== null && _b !== void 0 ? _b : installedCodingAgents[0];
-    const alternativeCodingAgents = installedCodingAgents.filter((agent) => agent.id !== (defaultCodingAgent === null || defaultCodingAgent === void 0 ? void 0 : defaultCodingAgent.id));
+    const hasCodingAgent = ((_a = codingAgentInfo === null || codingAgentInfo === void 0 ? void 0 : codingAgentInfo.installedCodingAgents.length) !== null && _a !== void 0 ? _a : 0) > 0;
     const onCopyPrompt = (0, react_1.useCallback)(() => {
         (0, copy_text_1.copyText)(prompt).catch((err) => {
             (0, NotificationCenter_1.showNotification)(`Could not copy: ${err.message}`, 2000);
@@ -128,80 +76,6 @@ const FixComputedValueModal = ({ state }) => {
     const renderCopyAction = (0, react_1.useCallback)((color) => {
         return jsx_runtime_1.jsx(clipboard_1.ClipboardIcon, { color: color, style: copyIcon });
     }, []);
-    const openWithCodingAgent = (0, react_1.useCallback)(async (codingAgentId, codingAgentName) => {
-        try {
-            const response = await (0, open_in_editor_1.openInCodingAgent)(codingAgentId, codingAgentId === 'copilot' ? null : prompt);
-            if (!response.success) {
-                (0, NotificationCenter_1.showNotification)(`Could not open ${codingAgentName}`, 2000);
-            }
-        }
-        catch (err) {
-            (0, NotificationCenter_1.showNotification)(err.message, 2000);
-        }
-    }, [prompt]);
-    const agentMenuItems = react_1.default.useMemo(() => {
-        return alternativeCodingAgents.map((codingAgent) => ({
-            id: `fix-computed-value-in-${codingAgent.id}`,
-            keyHint: null,
-            label: jsx_runtime_1.jsx("span", { style: menuLabel, children: codingAgent.name }),
-            leftItem: jsx_runtime_1.jsx(CodingAgentIcon_1.CodingAgentIcon, { codingAgentId: codingAgent.id, size: 18 }),
-            onClick: () => {
-                openWithCodingAgent(codingAgent.id, codingAgent.nameWithType).catch(() => undefined);
-            },
-            quickSwitcherLabel: null,
-            subMenu: null,
-            type: 'item',
-            value: `coding-agent-${codingAgent.id}`,
-        }));
-    }, [alternativeCodingAgents, openWithCodingAgent]);
-    const segments = react_1.default.useMemo(() => {
-        if (!defaultCodingAgent) {
-            return [];
-        }
-        return [
-            {
-                ariaLabel: `Open in ${defaultCodingAgent.nameWithType}`,
-                buttonId: null,
-                disabled: false,
-                idleColor: colors_1.LIGHT_TEXT,
-                onClick: () => {
-                    openWithCodingAgent(defaultCodingAgent.id, defaultCodingAgent.nameWithType).catch(() => undefined);
-                },
-                onPointerDown: null,
-                renderContent: () => (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                        jsx_runtime_1.jsx(CodingAgentIcon_1.CodingAgentIcon, { codingAgentId: defaultCodingAgent.id, size: 18 }),
-                        "Open in ", defaultCodingAgent.name] })),
-                segmentId: 'default-coding-agent',
-                style: mainSegmentStyle,
-                title: `Open in ${defaultCodingAgent.nameWithType}`,
-                type: 'action',
-            },
-            ...(alternativeCodingAgents.length > 0
-                ? [
-                    {
-                        ariaLabel: 'Open in another coding agent',
-                        buttonId: null,
-                        disabled: false,
-                        idleColor: colors_1.LIGHT_TEXT,
-                        leaveLeftSpace: true,
-                        onOpenChange: null,
-                        renderContent: (color) => jsx_runtime_1.jsx(caret_1.CaretDown, { color: color }),
-                        segmentId: 'another-coding-agent',
-                        selectedId: null,
-                        style: dropdownSegmentStyle,
-                        title: 'Open in another coding agent',
-                        type: 'menu',
-                        values: agentMenuItems,
-                    },
-                ]
-                : []),
-        ];
-    }, [
-        agentMenuItems,
-        alternativeCodingAgents.length,
-        defaultCodingAgent,
-        openWithCodingAgent,
-    ]);
     return (jsx_runtime_1.jsxs(DismissableModal_1.DismissableModal, { panelStyle: panelStyle, children: [
             jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "Fix computed value" }), jsx_runtime_1.jsxs("div", { style: container, children: [state.remotionInteractivitySkillAvailable ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                             jsx_runtime_1.jsx("div", { style: text, children: "First, install the Remotion Agent Skills:" }), jsx_runtime_1.jsxs("div", { style: commandField, children: [
@@ -215,6 +89,6 @@ const FixComputedValueModal = ({ state }) => {
                             : 'Then, paste this prompt into your coding agent:' }), jsx_runtime_1.jsxs("div", { style: commandField, children: [
                             jsx_runtime_1.jsx("pre", { style: code, children: prompt }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onCopyPrompt, renderAction: renderCopyAction, title: "Copy prompt" })
                         ] })
-                ] }), defaultCodingAgent ? (jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { style: footer, children: jsx_runtime_1.jsx(SegmentedButton_1.SegmentedButton, { segments: segments, style: null, title: null }) })) : null] }));
+                ] }), hasCodingAgent ? (jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { style: footer, children: jsx_runtime_1.jsx(CodingAgentButton_1.CodingAgentButton, { label: "Open in", prompt: prompt, size: "compact", style: null }) })) : null] }));
 };
 exports.FixComputedValueModal = FixComputedValueModal;

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

@@ -131,8 +131,9 @@ const InitialCompositionLoader = () => {
             }
             setCanvasContent(newCanvas);
         };
-        window.addEventListener('popstate', onchange);
-        return () => window.removeEventListener('popstate', onchange);
+        const navigationWindow = (0, url_state_1.getNavigationWindow)();
+        navigationWindow.addEventListener('popstate', onchange);
+        return () => navigationWindow.removeEventListener('popstate', onchange);
     }, [
         compositions,
         selectAsset,