@remotion/studio 4.0.521 → 4.0.522

package/dist/components/CanvasIfSizeIsAvailable.js

@@ -5,9 +5,16 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const ruler_canvas_size_1 = require("../helpers/ruler-canvas-size");
+const canvas_ref_1 = require("../state/canvas-ref");
 const CanvasOrLoading_1 = require("./CanvasOrLoading");
 const use_is_ruler_visible_1 = require("./EditorRuler/use-is-ruler-visible");
+const SplitterContext_1 = require("./Splitter/SplitterContext");
 const CanvasIfSizeIsAvailable = () => {
+    const layout = (0, react_1.useContext)(SplitterContext_1.SplitterLayoutContext);
+    const refreshCanvas = (0, react_1.useContext)(canvas_ref_1.RefreshCanvasSizeContext);
+    (0, react_1.useLayoutEffect)(() => {
+        refreshCanvas === null || refreshCanvas === void 0 ? void 0 : refreshCanvas();
+    }, [layout, refreshCanvas]);
     const rulersAreVisible = (0, use_is_ruler_visible_1.useIsRulerVisible)();
     const context = (0, react_1.useContext)(remotion_1.Internals.CurrentScaleContext);
     const sizeWithRulersApplied = (0, react_1.useMemo)(() => {

package/dist/components/CopyButton.js

@@ -5,6 +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 use_copy_feedback_1 = require("../helpers/use-copy-feedback");
+const copy_1 = require("../icons/copy");
 const Button_1 = require("./Button");
 const layout_1 = require("./layout");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
@@ -17,29 +19,20 @@ const buttonContainerStyle = {
     display: 'flex',
     minWidth: '114px',
 };
-const copyIcon = (jsx_runtime_1.jsx("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "far", "data-icon": "clipboard", className: "svg-inline--fa fa-clipboard fa-w-12", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 384 512", style: iconStyle, children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR, d: "M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm144 418c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V118c0-3.3 2.7-6 6-6h42v36c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-36h42c3.3 0 6 2.7 6 6z" }) }));
 const labelStyle = {
     fontSize: 14,
 };
 const CopyButton = ({ textToCopy, label, labelWhenCopied }) => {
-    const [copied, setCopied] = (0, react_1.useState)(false);
+    const { copied, markCopied } = (0, use_copy_feedback_1.useCopyFeedback)();
     const onClick = (0, react_1.useCallback)(() => {
         (0, copy_text_1.copyText)(textToCopy)
-            .then(() => {
-            setCopied(Date.now());
-        })
+            .then(markCopied)
             .catch((err) => {
             (0, NotificationCenter_1.showNotification)(`Could not copy: ${err.message}`, 2000);
         });
-    }, [textToCopy]);
-    (0, react_1.useEffect)(() => {
-        if (!copied) {
-            return;
-        }
-        const to = setTimeout(() => setCopied(false), 2000);
-        return () => clearTimeout(to);
-    }, [copied]);
-    return (jsx_runtime_1.jsxs(Button_1.Button, { onClick: onClick, buttonContainerStyle: buttonContainerStyle, children: [copyIcon, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 }), ' ', jsx_runtime_1.jsx("span", { style: labelStyle, children: copied ? labelWhenCopied : label })
+    }, [markCopied, textToCopy]);
+    return (jsx_runtime_1.jsxs(Button_1.Button, { onClick: onClick, buttonContainerStyle: buttonContainerStyle, children: [
+            jsx_runtime_1.jsx(copy_1.CopyIcon, { copied: copied, color: colors_1.CURRENT_COLOR, style: iconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 }), ' ', jsx_runtime_1.jsx("span", { style: labelStyle, children: copied ? labelWhenCopied : label })
         ] }));
 };
 exports.CopyButton = CopyButton;

package/dist/components/Editor.js

@@ -79,6 +79,7 @@ const CompositionListRenderMarker = () => {
     return null;
 };
 const Editor = ({ Root, readOnlyStudio }) => {
+    var _a;
     (0, client_id_1.useStudioConfigRevision)();
     const [drawElement, setDrawElement] = (0, react_1.useState)(null);
     const size = player_1.PlayerInternals.useElementSize(drawElement, {
@@ -111,11 +112,11 @@ const Editor = ({ Root, readOnlyStudio }) => {
     const compositionRenderErrorContextValue = (0, react_1.useMemo)(() => ({ setError: setRenderError, clearError }), [clearError]);
     const renderErrorContextValue = (0, react_1.useMemo)(() => ({ error: renderError }), [renderError]);
     return (jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: noop_1.noop, onOutsideClick: noop_1.noop, children: jsx_runtime_1.jsx(timeline_zoom_1.TimelineZoomContext, { children: jsx_runtime_1.jsxs(SequencePropsSubscriptionProvider_1.SequencePropsSubscriptionProvider, { children: [
-                    jsx_runtime_1.jsxs(remotion_1.Internals.CurrentScaleContext.Provider, { value: value, children: [
-                            jsx_runtime_1.jsx(ForceSpecificCursor_1.ForceSpecificCursor, {}), jsx_runtime_1.jsx(CanvasCaptureDropHandler_1.CanvasCaptureDropHandler, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(scale_lock_1.ScaleLockProvider, { children: jsx_runtime_1.jsxs("div", { style: background, children: [
-                                        jsx_runtime_1.jsx(remotion_1.Internals.CompositionRenderErrorContext.Provider, { value: compositionRenderErrorContextValue, children: canvasMounted ? (jsx_runtime_1.jsx(RootCompositionLoader, { Root: MemoRoot })) : null }), jsx_runtime_1.jsx(remotion_1.Internals.CanUseRemotionHooksProvider, { children: jsx_runtime_1.jsx(RenderErrorContext_1.RenderErrorContext.Provider, { value: renderErrorContextValue, children: jsx_runtime_1.jsx(EditorContent_1.EditorContent, { readOnlyStudio: readOnlyStudio, children: jsx_runtime_1.jsx(TopPanel_1.TopPanel, { drawRef: setDrawRef, bufferStateDelayInMilliseconds: (0, studio_runtime_config_1.getStudioBufferStateDelayInMilliseconds)(), onMounted: onMounted, readOnlyStudio: readOnlyStudio }) }) }) })
-                                    ] }) })
-                        ] }), jsx_runtime_1.jsx(Modals_1.Modals, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(NotificationCenter_1.NotificationCenter, {})
+                    jsx_runtime_1.jsx(canvas_ref_1.RefreshCanvasSizeContext.Provider, { value: (_a = size === null || size === void 0 ? void 0 : size.refresh) !== null && _a !== void 0 ? _a : null, children: jsx_runtime_1.jsxs(remotion_1.Internals.CurrentScaleContext.Provider, { value: value, children: [
+                                jsx_runtime_1.jsx(ForceSpecificCursor_1.ForceSpecificCursor, {}), jsx_runtime_1.jsx(CanvasCaptureDropHandler_1.CanvasCaptureDropHandler, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(scale_lock_1.ScaleLockProvider, { children: jsx_runtime_1.jsxs("div", { style: background, children: [
+                                            jsx_runtime_1.jsx(remotion_1.Internals.CompositionRenderErrorContext.Provider, { value: compositionRenderErrorContextValue, children: canvasMounted ? (jsx_runtime_1.jsx(RootCompositionLoader, { Root: MemoRoot })) : null }), jsx_runtime_1.jsx(remotion_1.Internals.CanUseRemotionHooksProvider, { children: jsx_runtime_1.jsx(RenderErrorContext_1.RenderErrorContext.Provider, { value: renderErrorContextValue, children: jsx_runtime_1.jsx(EditorContent_1.EditorContent, { readOnlyStudio: readOnlyStudio, children: jsx_runtime_1.jsx(TopPanel_1.TopPanel, { drawRef: setDrawRef, bufferStateDelayInMilliseconds: (0, studio_runtime_config_1.getStudioBufferStateDelayInMilliseconds)(), onMounted: onMounted, readOnlyStudio: readOnlyStudio }) }) }) })
+                                        ] }) })
+                            ] }) }), jsx_runtime_1.jsx(Modals_1.Modals, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(NotificationCenter_1.NotificationCenter, {})
                 ] }) }) }));
 };
 exports.Editor = Editor;

package/dist/components/EditorContent.js

@@ -41,7 +41,7 @@ const EditorContent = ({ readOnlyStudio, children }) => {
             (canvasContent.type === 'asset' &&
                 (currentAssetMetadata === null || currentAssetMetadata === void 0 ? void 0 : currentAssetMetadata.asset) === canvasContent.asset));
     const content = (jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "horizontal", id: "top-to-bottom", maxFlex: 0.9, minFlex: 0.2, defaultFlex: 0.75, maxFlexerSize: null, minFlexerSize: null, maxAntiFlexerSize: null, minAntiFlexerSize: null, children: [
-            jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: children }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "none", onCollapse: noop }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: showTimeline ? jsx_runtime_1.jsx(Timeline_1.Timeline, {}) : jsx_runtime_1.jsx(TimelineEmptyState_1.TimelineEmptyState, {}) })
+            jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: children }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "none", onCollapse: noop, onCollapseDuringDrag: null }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: showTimeline ? jsx_runtime_1.jsx(Timeline_1.Timeline, {}) : jsx_runtime_1.jsx(TimelineEmptyState_1.TimelineEmptyState, {}) })
         ] }));
     return (jsx_runtime_1.jsxs(TimelineSelection_1.TimelineSelectionProvider, { children: [
             jsx_runtime_1.jsx(WebMcp_1.WebMcp, {}), jsx_runtime_1.jsx(transform_3d_mode_1.Transform3DModeStateProvider, { children: jsx_runtime_1.jsxs(StudioClearSelectionArea, { children: [

package/dist/components/ElementInstallConfirmation.js

@@ -283,7 +283,9 @@ 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);

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/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/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 }))] }));
 };

package/dist/components/MenuCompositionName.js

@@ -4,26 +4,58 @@ exports.MenuCompositionName = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
+const hoverable_1 = require("../helpers/hoverable");
+const noop_1 = require("../helpers/noop");
+const modals_1 = require("../state/modals");
+const composition_menu_items_1 = require("./composition-menu-items");
+const ContextMenu_1 = require("./ContextMenu");
+const InlineDropdown_1 = require("./InlineDropdown");
+const use_resolved_stack_1 = require("./Timeline/use-resolved-stack");
+const use_default_editor_info_1 = require("./use-default-editor-info");
 const baseStyle = {
-    color: 'inherit',
+    cursor: 'default',
     textDecoration: 'none',
     fontSize: 'inherit',
     textUnderlineOffset: 2,
     whiteSpace: 'nowrap',
 };
+const assetNameStyle = {
+    ...baseStyle,
+    color: colors_1.WHITE_ALPHA_80,
+};
+const contextMenuStyle = {
+    alignItems: 'center',
+    color: 'inherit',
+    display: 'flex',
+    fontFamily: 'inherit',
+    fontSize: 'inherit',
+    lineHeight: 'inherit',
+};
 const compositionNameStyle = {
     ...baseStyle,
-    cursor: 'default',
+    appearance: 'none',
+    border: 'none',
+    backgroundColor: colors_1.TRANSPARENT,
+    fontFamily: 'inherit',
+    fontSize: 13,
+    height: 'auto',
+    lineHeight: 1.5,
+    margin: 0,
+    padding: 0,
+    width: 'auto',
+    ...hoverable_1.NO_HOVER_BACKGROUND_STYLE,
 };
 const slashStyle = {
     color: colors_1.LIGHT_TEXT,
     marginInline: 4,
+    opacity: 0.8,
     position: 'relative',
     top: 1,
 };
 const MenuCompositionName = () => {
-    var _a;
+    var _a, _b;
     const { canvasContent, compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const composition = (0, react_1.useMemo)(() => {
         var _a;
@@ -33,12 +65,36 @@ const MenuCompositionName = () => {
         return ((_a = compositions.find((c) => c.id === canvasContent.compositionId)) !== null && _a !== void 0 ? _a : null);
     }, [canvasContent, compositions]);
     const asset = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'asset' ? canvasContent.asset : null;
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
+    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
+        .previewServerState.type;
+    const { defaultEditorId, defaultEditorName } = (0, use_default_editor_info_1.useEditorOpening)(connectionStatus === 'connected');
+    const resolvedLocation = (0, use_resolved_stack_1.useResolvedStack)((_a = composition === null || composition === void 0 ? void 0 : composition.stack) !== null && _a !== void 0 ? _a : null);
+    const getContextMenuItems = (0, react_1.useCallback)(() => {
+        return (0, composition_menu_items_1.getCompositionContextMenuItems)({
+            closeMenu: noop_1.noop,
+            composition,
+            connectionStatus,
+            editorId: defaultEditorId,
+            editorName: defaultEditorName,
+            includeCompositionManagementItems: true,
+            resolvedLocation,
+            setSelectedModal,
+            readOnlyStudio: window.remotion_isReadOnlyStudio,
+        });
+    }, [
+        composition,
+        connectionStatus,
+        defaultEditorId,
+        defaultEditorName,
+        resolvedLocation,
+        setSelectedModal,
+    ]);
     if (!composition && asset === null) {
         return null;
     }
-    const name = (_a = composition === null || composition === void 0 ? void 0 : composition.id) !== null && _a !== void 0 ? _a : asset;
+    const name = (_b = composition === null || composition === void 0 ? void 0 : composition.id) !== null && _b !== void 0 ? _b : asset;
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("span", { style: slashStyle, children: "/" }), jsx_runtime_1.jsx("span", { style: compositionNameStyle, children: name })
-        ] }));
+            jsx_runtime_1.jsx("span", { style: slashStyle, children: "/" }), composition ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, style: contextMenuStyle, children: jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { "aria-label": "Open composition menu", className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME, getItems: getContextMenuItems, hoveredColor: colors_1.WHITE, renderAction: () => composition.id, style: compositionNameStyle, title: "Open composition menu", unhoveredColor: colors_1.WHITE_ALPHA_80, variant: null }) })) : (jsx_runtime_1.jsx("span", { style: assetNameStyle, children: name }))] }));
 };
 exports.MenuCompositionName = MenuCompositionName;

package/dist/components/RenderModal/CliCopyButton.js

@@ -4,20 +4,15 @@ exports.CliCopyButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
-const clipboard_1 = require("../../icons/clipboard");
+const copy_text_1 = require("../../helpers/copy-text");
+const use_copy_feedback_1 = require("../../helpers/use-copy-feedback");
+const copy_1 = require("../../icons/copy");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const svgStyle = {
     width: 16,
     height: 16,
     verticalAlign: 'sub',
 };
-const copiedStyle = {
-    fontSize: '14px',
-    minHeight: '30px',
-    minWidth: '30px',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-};
 const buttonStyle = {
     width: '30px',
     height: '30px',
@@ -28,33 +23,24 @@ const buttonStyle = {
     justifyContent: 'center',
 };
 const CliCopyButton = ({ valueToCopy, }) => {
-    const [copied, setCopied] = (0, react_1.useState)(false);
+    const { copied, markCopied } = (0, use_copy_feedback_1.useCopyFeedback)();
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const fillColor = (0, react_1.useMemo)(() => {
         return hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT;
     }, [hovered]);
-    const clipboardIcon = jsx_runtime_1.jsx(clipboard_1.ClipboardIcon, { color: fillColor, style: svgStyle });
-    const checkSvg = (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", style: svgStyle, children: jsx_runtime_1.jsx("path", { fill: fillColor, d: "M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" }) }));
+    const copyIcon = (jsx_runtime_1.jsx(copy_1.CopyIcon, { copied: copied, color: fillColor, style: svgStyle }));
     const onPointerEnter = (0, react_1.useCallback)(() => {
         setHovered(true);
     }, []);
     const onPointerLeave = (0, react_1.useCallback)(() => {
         setHovered(false);
     }, []);
-    (0, react_1.useEffect)(() => {
-        if (!copied) {
-            return;
-        }
-        const handleClear = () => {
-            setCopied(false);
-            setHovered(false);
-        };
-        const to = setTimeout(() => handleClear(), 2000);
-        return () => clearTimeout(to);
-    }, [copied]);
-    return copied ? (jsx_runtime_1.jsx("span", { style: copiedStyle, children: checkSvg })) : (jsx_runtime_1.jsx("button", { type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: buttonStyle, onClick: () => {
-            navigator.clipboard.writeText(valueToCopy);
-            setCopied(true);
-        }, children: clipboardIcon }));
+    return (jsx_runtime_1.jsx("button", { type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: buttonStyle, onClick: () => {
+            (0, copy_text_1.copyText)(valueToCopy)
+                .then(markCopied)
+                .catch((err) => {
+                (0, NotificationCenter_1.showNotification)(`Could not copy: ${err.message}`, 2000);
+            });
+        }, children: copyIcon }));
 };
 exports.CliCopyButton = CliCopyButton;

package/dist/components/RenderQueue/RenderQueueCopyToClipboard.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 get_asset_metadata_1 = require("../../helpers/get-asset-metadata");
-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 NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const revealIconStyle = {
@@ -29,9 +30,10 @@ const supportsCopyingToClipboard = (job) => {
 };
 exports.supportsCopyingToClipboard = supportsCopyingToClipboard;
 const RenderQueueCopyToClipboard = ({ job }) => {
+    const { copied, markCopied } = (0, use_copy_feedback_1.useCopyFeedback)();
     const renderCopyAction = (0, react_1.useCallback)((color) => {
-        return jsx_runtime_1.jsx(clipboard_1.ClipboardIcon, { style: revealIconStyle, color: color });
-    }, []);
+        return jsx_runtime_1.jsx(copy_1.CopyIcon, { copied: copied, style: revealIconStyle, color: color });
+    }, [copied]);
     const onClick = (0, react_1.useCallback)(async (e) => {
         e.stopPropagation();
         try {
@@ -47,12 +49,13 @@ const RenderQueueCopyToClipboard = ({ job }) => {
                     [contentType]: blob,
                 }),
             ]);
+            markCopied();
             (0, NotificationCenter_1.showNotification)('Copied to clipboard!', 1000);
         }
         catch (err) {
             (0, NotificationCenter_1.showNotification)(`Could not copy to clipboard: ${err.message}`, 2000);
         }
-    }, [job.outName]);
+    }, [job.outName, markCopied]);
     return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, title: "Copy to clipboard", renderAction: renderCopyAction, onClick: onClick }));
 };
 exports.RenderQueueCopyToClipboard = RenderQueueCopyToClipboard;

package/dist/components/SidebarCollapserControls.js

@@ -19,7 +19,7 @@ const style = {
     position: 'relative',
 };
 const SidebarCollapserControl = ({ side }) => {
-    const { setSidebarCollapsedState, sidebarCollapsedStateRight } = (0, react_1.useContext)(sidebar_1.SidebarContext);
+    const { setSidebarCollapsedState, sidebarCollapsedStateRight, sidebarCollapsedDuringDrag, } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const leftSidebarStatus = (0, TopPanel_1.useResponsiveSidebarStatus)();
     const leftIcon = (0, react_1.useCallback)((color) => {
@@ -27,9 +27,12 @@ const SidebarCollapserControl = ({ side }) => {
             width: '35%',
             height: '100%',
             borderRight: '1px solid ' + color,
-            background: leftSidebarStatus === 'expanded' ? color : colors_1.TRANSPARENT,
+            background: leftSidebarStatus === 'expanded' &&
+                sidebarCollapsedDuringDrag !== 'left'
+                ? color
+                : colors_1.TRANSPARENT,
         };
-    }, [leftSidebarStatus]);
+    }, [leftSidebarStatus, sidebarCollapsedDuringDrag]);
     const rightIcon = (0, react_1.useCallback)((color) => {
         return {
             width: '35%',
@@ -37,9 +40,12 @@ const SidebarCollapserControl = ({ side }) => {
             right: 0,
             position: 'absolute',
             borderLeft: '1px solid ' + color,
-            background: sidebarCollapsedStateRight === 'expanded' ? color : colors_1.TRANSPARENT,
+            background: sidebarCollapsedStateRight === 'expanded' &&
+                sidebarCollapsedDuringDrag !== 'right'
+                ? color
+                : colors_1.TRANSPARENT,
         };
-    }, [sidebarCollapsedStateRight]);
+    }, [sidebarCollapsedStateRight, sidebarCollapsedDuringDrag]);
     const toggleLeft = (0, react_1.useCallback)(() => {
         setSidebarCollapsedState({
             left: (s) => {

package/dist/components/SkillsSettings.js

@@ -5,8 +5,9 @@ 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 use_copy_feedback_1 = require("../helpers/use-copy-feedback");
 const check_circle_filled_1 = require("../icons/check-circle-filled");
-const clipboard_1 = require("../icons/clipboard");
+const copy_1 = require("../icons/copy");
 const minus_1 = require("../icons/minus");
 const InlineAction_1 = require("./InlineAction");
 const ValidationMessage_1 = require("./NewComposition/ValidationMessage");
@@ -94,19 +95,22 @@ const loading = {
 const SkillsSettings = () => {
     var _a;
     const { error, remotionSkillsInfo } = (0, SettingsContext_1.useSettings)();
+    const { copied, markCopied } = (0, use_copy_feedback_1.useCopyFeedback)();
     const installedSkills = (0, react_1.useMemo)(() => {
         var _a;
         return ((_a = remotionSkillsInfo === null || remotionSkillsInfo === void 0 ? void 0 : remotionSkillsInfo.skills.filter(({ installedGlobally, installedInProject }) => installedGlobally || installedInProject).length) !== null && _a !== void 0 ? _a : 0);
     }, [remotionSkillsInfo]);
     const missingSkills = ((_a = remotionSkillsInfo === null || remotionSkillsInfo === void 0 ? void 0 : remotionSkillsInfo.skills.length) !== null && _a !== void 0 ? _a : 0) - installedSkills;
     const onCopy = (0, react_1.useCallback)(() => {
-        (0, copy_text_1.copyText)(INSTALL_COMMAND).catch((err) => {
+        (0, copy_text_1.copyText)(INSTALL_COMMAND)
+            .then(markCopied)
+            .catch((err) => {
             (0, NotificationCenter_1.showNotification)(`Could not copy: ${err.message}`, 2000);
         });
-    }, []);
+    }, [markCopied]);
     const renderCopyAction = (0, react_1.useCallback)((color) => {
-        return jsx_runtime_1.jsx(clipboard_1.ClipboardIcon, { color: color, style: copyIcon });
-    }, []);
+        return jsx_runtime_1.jsx(copy_1.CopyIcon, { copied: copied, color: color, style: copyIcon });
+    }, [copied]);
     return (jsx_runtime_1.jsxs("div", { style: container, children: [remotionSkillsInfo === null && error === null ? (jsx_runtime_1.jsx("p", { style: loading, children: "Checking installed skills..." })) : null, remotionSkillsInfo === null && error ? (jsx_runtime_1.jsx("div", { style: { marginTop: 14 }, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: error, align: "flex-start", type: "error" }) })) : null, missingSkills > 0 ? (jsx_runtime_1.jsxs("div", { children: [
                     jsx_runtime_1.jsx("p", { style: description, children: "Not all skills are installed. Run this command in the project directory, then reload Studio and restart your coding agent." }), jsx_runtime_1.jsxs("div", { style: commandField, children: [
                             jsx_runtime_1.jsx("pre", { style: command, children: INSTALL_COMMAND }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onCopy, renderAction: renderCopyAction, title: "Copy install command" })