@remotion/studio 4.0.520 → 4.0.522

package/dist/components/ElementInstallConfirmation.js

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

package/dist/components/ElementLibraryModal.js

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

package/dist/components/FixComputedValueModal.js

@@ -5,7 +5,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const copy_text_1 = require("../helpers/copy-text");
-const clipboard_1 = require("../icons/clipboard");
+const use_copy_feedback_1 = require("../helpers/use-copy-feedback");
+const copy_1 = require("../icons/copy");
 const CodingAgentButton_1 = require("./CodingAgentButton");
 const InlineAction_1 = require("./InlineAction");
 const ModalFooter_1 = require("./ModalFooter");
@@ -63,23 +64,32 @@ const FixComputedValueModal = ({ state }) => {
     const prompt = `/remotion-interactivity ${state.context} make "${state.prop}" interactive`;
     const installCommand = 'npx remotion skills add';
     const hasCodingAgent = ((_a = codingAgentInfo === null || codingAgentInfo === void 0 ? void 0 : codingAgentInfo.installedCodingAgents.length) !== null && _a !== void 0 ? _a : 0) > 0;
+    const { copied: promptCopied, markCopied: markPromptCopied } = (0, use_copy_feedback_1.useCopyFeedback)();
+    const { copied: installCommandCopied, markCopied: markInstallCommandCopied } = (0, use_copy_feedback_1.useCopyFeedback)();
     const onCopyPrompt = (0, react_1.useCallback)(() => {
-        (0, copy_text_1.copyText)(prompt).catch((err) => {
+        (0, copy_text_1.copyText)(prompt)
+            .then(markPromptCopied)
+            .catch((err) => {
             (0, NotificationCenter_1.showNotification)(`Could not copy: ${err.message}`, 2000);
         });
-    }, [prompt]);
+    }, [markPromptCopied, prompt]);
     const onCopyInstallCommand = (0, react_1.useCallback)(() => {
-        (0, copy_text_1.copyText)(installCommand).catch((err) => {
+        (0, copy_text_1.copyText)(installCommand)
+            .then(markInstallCommandCopied)
+            .catch((err) => {
             (0, NotificationCenter_1.showNotification)(`Could not copy: ${err.message}`, 2000);
         });
-    }, [installCommand]);
-    const renderCopyAction = (0, react_1.useCallback)((color) => {
-        return jsx_runtime_1.jsx(clipboard_1.ClipboardIcon, { color: color, style: copyIcon });
-    }, []);
+    }, [installCommand, markInstallCommandCopied]);
+    const renderPromptCopyAction = (0, react_1.useCallback)((color) => {
+        return jsx_runtime_1.jsx(copy_1.CopyIcon, { copied: promptCopied, color: color, style: copyIcon });
+    }, [promptCopied]);
+    const renderInstallCommandCopyAction = (0, react_1.useCallback)((color) => {
+        return (jsx_runtime_1.jsx(copy_1.CopyIcon, { copied: installCommandCopied, color: color, style: copyIcon }));
+    }, [installCommandCopied]);
     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: [
-                                    jsx_runtime_1.jsx("pre", { style: code, children: installCommand }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onCopyInstallCommand, renderAction: renderCopyAction, title: "Copy command" })
+                                    jsx_runtime_1.jsx("pre", { style: code, children: installCommand }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onCopyInstallCommand, renderAction: renderInstallCommandCopyAction, title: "Copy command" })
                                 ] })
                         ] })), jsx_runtime_1.jsx("div", { style: {
                             ...text,
@@ -87,7 +97,7 @@ const FixComputedValueModal = ({ state }) => {
                         }, children: state.remotionInteractivitySkillAvailable
                             ? 'Paste this prompt into your coding agent to make this value editable in Studio:'
                             : '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" })
+                            jsx_runtime_1.jsx("pre", { style: code, children: prompt }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onCopyPrompt, renderAction: renderPromptCopyAction, title: "Copy prompt" })
                         ] })
                 ] }), 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] }));
 };

package/dist/components/InlineCaptionInspector.js

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

package/dist/components/InspectorLocationCopy.js

@@ -4,7 +4,8 @@ exports.InspectorLocationCopy = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const format_file_location_1 = require("../helpers/format-file-location");
-const clipboard_1 = require("../icons/clipboard");
+const use_copy_feedback_1 = require("../helpers/use-copy-feedback");
+const copy_1 = require("../icons/copy");
 const InlineAction_1 = require("./InlineAction");
 const InspectorOpenInEditor_1 = require("./InspectorOpenInEditor");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
@@ -38,6 +39,7 @@ const icon = {
 const InspectorLocationCopy = ({ children, location, name, openInEditorLocation }) => {
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const [focusedWithin, setFocusedWithin] = (0, react_1.useState)(false);
+    const { copied, markCopied } = (0, use_copy_feedback_1.useCopyFeedback)();
     const contextForAgents = (0, react_1.useMemo)(() => {
         return (0, format_file_location_1.formatContextForAgents)({
             location,
@@ -46,17 +48,20 @@ const InspectorLocationCopy = ({ children, location, name, openInEditorLocation
         });
     }, [location, name]);
     const renderCopyAction = (0, react_1.useCallback)((color) => {
-        return jsx_runtime_1.jsx(clipboard_1.ClipboardIcon, { style: icon, color: color });
-    }, []);
+        return jsx_runtime_1.jsx(copy_1.CopyIcon, { copied: copied, style: icon, color: color });
+    }, [copied]);
     const onCopy = (0, react_1.useCallback)((event) => {
         event.stopPropagation();
         if (!contextForAgents) {
             return;
         }
-        navigator.clipboard.writeText(contextForAgents).catch((err) => {
+        navigator.clipboard
+            .writeText(contextForAgents)
+            .then(markCopied)
+            .catch((err) => {
             (0, NotificationCenter_1.showNotification)(`Could not copy to clipboard: ${err.message}`, 2000);
         });
-    }, [contextForAgents]);
+    }, [contextForAgents, markCopied]);
     const showAction = hovered || focusedWithin;
     return (jsx_runtime_1.jsxs("div", { "aria-label": "Inspector source location", role: "group", style: row, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), onFocus: () => setFocusedWithin(true), onBlur: () => setFocusedWithin(false), children: [
             jsx_runtime_1.jsx("div", { style: content, children: children }), contextForAgents || openInEditorLocation ? (jsx_runtime_1.jsxs("div", { style: {

package/dist/components/InspectorPanel/ElementLibraryButton.js

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

package/dist/components/InspectorSequenceSection.js

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

package/dist/components/Menu/MenuSubItem.js

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

package/dist/components/MenuBuildIndicator.js

@@ -10,7 +10,7 @@ const MenuCompositionName_1 = require("./MenuCompositionName");
 const Spinner_1 = require("./Spinner");
 const cwd = {
     fontSize: 13,
-    opacity: 0.8,
+    color: colors_1.WHITE_ALPHA_80,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
@@ -19,9 +19,14 @@ const cwd = {
 };
 const spinnerSize = 14;
 const spinner = {
+    opacity: 0.8,
     position: 'relative',
     width: spinnerSize,
 };
+const openInEditor = {
+    display: 'flex',
+    opacity: 0.8,
+};
 const noSpinner = {
     position: 'relative',
     width: spinnerSize,
@@ -48,7 +53,7 @@ const MenuBuildIndicator = ({ mobileLayout }) => {
         };
     }, []);
     return (jsx_runtime_1.jsxs("div", { style: cwd, title: window.remotion_cwd, children: [
-            jsx_runtime_1.jsx(layout_1.Spacing, { x: mobileLayout ? 0.5 : 2 }), window.remotion_projectName, jsx_runtime_1.jsx(MenuCompositionName_1.MenuCompositionName, {}), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx(InspectorOpenInEditor_1.InspectorOpenInEditor, { location: folderLocation, locationType: "folder" }), mobileLayout ? null : jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), mobileLayout ? (isBuilding ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx(layout_1.Spacing, { x: mobileLayout ? 0.5 : 2 }), window.remotion_projectName, jsx_runtime_1.jsx(MenuCompositionName_1.MenuCompositionName, {}), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: openInEditor, children: jsx_runtime_1.jsx(InspectorOpenInEditor_1.InspectorOpenInEditor, { location: folderLocation, locationType: "folder" }) }), mobileLayout ? null : jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), mobileLayout ? (isBuilding ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx("div", { style: spinner, children: jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: spinnerSize, color: colors_1.WHITE_ALPHA_80 }) })
                 ] })) : null) : isBuilding ? (jsx_runtime_1.jsx("div", { style: spinner, children: jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: spinnerSize, color: colors_1.WHITE_ALPHA_80 }) })) : (jsx_runtime_1.jsx("div", { style: noSpinner }))] }));
 };