@remotion/studio 4.0.503 → 4.0.505

package/dist/components/TopPanel.js

@@ -32,9 +32,6 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TopPanel = exports.useResponsiveSidebarStatus = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -48,7 +45,6 @@ const CanvasIfSizeIsAvailable_1 = require("./CanvasIfSizeIsAvailable");
 const CurrentCompositionSideEffects_1 = require("./CurrentCompositionSideEffects");
 const use_is_ruler_visible_1 = require("./EditorRuler/use-is-ruler-visible");
 const ExplorerPanel_1 = require("./ExplorerPanel");
-const MobilePanel_1 = __importDefault(require("./MobilePanel"));
 const ObserveDefaultPropsContext_1 = require("./ObserveDefaultPropsContext");
 const OptionsPanel_1 = require("./OptionsPanel");
 const PreviewToolbar_1 = require("./PreviewToolbar");
@@ -69,10 +65,15 @@ const row = {
     minHeight: 0,
 };
 const MAX_SIDEBAR_WIDTH = 350;
+const MIN_SIDEBAR_WIDTH = 250;
 const useResponsiveSidebarStatus = () => {
     const { sidebarCollapsedStateLeft } = (0, react_1.useContext)(sidebar_1.SidebarContext);
+    const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
     const responsiveLeftStatus = (0, use_breakpoint_1.useBreakpoint)(1200) ? 'collapsed' : 'expanded';
     const actualStateLeft = (0, react_1.useMemo)(() => {
+        if (isMobileLayout) {
+            return 'collapsed';
+        }
         if (sidebarCollapsedStateLeft === 'collapsed') {
             return 'collapsed';
         }
@@ -80,7 +81,7 @@ const useResponsiveSidebarStatus = () => {
             return 'expanded';
         }
         return responsiveLeftStatus;
-    }, [sidebarCollapsedStateLeft, responsiveLeftStatus]);
+    }, [isMobileLayout, sidebarCollapsedStateLeft, responsiveLeftStatus]);
     return actualStateLeft;
 };
 exports.useResponsiveSidebarStatus = useResponsiveSidebarStatus;
@@ -110,12 +111,11 @@ const TopPanelInner = ({ readOnlyStudio, onMounted, drawRef, bufferStateDelayInM
     const onCollapseRight = (0, react_1.useCallback)(() => {
         setSidebarCollapsedState({ left: null, right: 'collapsed' });
     }, [setSidebarCollapsedState]);
-    const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
     return (jsx_runtime_1.jsx(ObserveDefaultPropsContext_1.ObserveDefaultProps, { compositionId: (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition'
             ? canvasContent.compositionId
             : null, readOnlyStudio: readOnlyStudio, children: jsx_runtime_1.jsxs("div", { style: container, children: [
-                jsx_runtime_1.jsx("div", { style: row, children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { minFlex: 0.15, maxFlex: 0.4, defaultFlex: 0.2, maxFlexerSize: MAX_SIDEBAR_WIDTH, minFlexerSize: null, maxAntiFlexerSize: null, id: "sidebar-to-preview", orientation: "vertical", children: [actualStateLeft === 'expanded' ? (isMobileLayout ? (jsx_runtime_1.jsx(MobilePanel_1.default, { onClose: onCollapseLeft, side: "left", children: jsx_runtime_1.jsx(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) })) : (jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: jsx_runtime_1.jsx(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) }))) : null, actualStateLeft === 'expanded' && !isMobileLayout ? (jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "left", onCollapse: onCollapseLeft })) : null, jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { minFlex: 0.5, maxFlex: 0.8, defaultFlex: 0.7, maxFlexerSize: null, minFlexerSize: null, maxAntiFlexerSize: MAX_SIDEBAR_WIDTH, id: "canvas-to-right-sidebar", orientation: "vertical", children: [
-                                        jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: jsx_runtime_1.jsx("div", { ref: drawRef, style: canvasContainerStyle, children: jsx_runtime_1.jsx(CanvasIfSizeIsAvailable_1.CanvasIfSizeIsAvailable, {}) }) }), actualStateRight === 'expanded' && !isMobileLayout ? (jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "right", onCollapse: onCollapseRight })) : null, actualStateRight === 'expanded' ? (isMobileLayout ? (jsx_runtime_1.jsx(MobilePanel_1.default, { onClose: onCollapseRight, side: "right", children: jsx_runtime_1.jsx(OptionsPanel_1.OptionsPanel, { readOnlyStudio: readOnlyStudio }) })) : (jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: jsx_runtime_1.jsx(OptionsPanel_1.OptionsPanel, { readOnlyStudio: readOnlyStudio }) }))) : null] }) })
+                jsx_runtime_1.jsx("div", { style: row, children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { minFlex: 0.15, maxFlex: 0.4, defaultFlex: 0.2, maxFlexerSize: MAX_SIDEBAR_WIDTH, minFlexerSize: null, maxAntiFlexerSize: null, minAntiFlexerSize: null, id: "sidebar-to-preview", orientation: "vertical", children: [actualStateLeft === 'expanded' ? (jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: jsx_runtime_1.jsx(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) })) : null, actualStateLeft === 'expanded' ? (jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "left", onCollapse: onCollapseLeft })) : null, jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { minFlex: 0.5, maxFlex: 0.8, defaultFlex: 0.7, maxFlexerSize: null, minFlexerSize: null, maxAntiFlexerSize: MAX_SIDEBAR_WIDTH, minAntiFlexerSize: MIN_SIDEBAR_WIDTH, id: "canvas-to-right-sidebar", orientation: "vertical", children: [
+                                        jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: jsx_runtime_1.jsx("div", { ref: drawRef, style: canvasContainerStyle, children: jsx_runtime_1.jsx(CanvasIfSizeIsAvailable_1.CanvasIfSizeIsAvailable, {}) }) }), actualStateRight === 'expanded' ? (jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "right", onCollapse: onCollapseRight })) : null, actualStateRight === 'expanded' ? (jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: jsx_runtime_1.jsx(OptionsPanel_1.OptionsPanel, { readOnlyStudio: readOnlyStudio }) })) : null] }) })
                         ] }) }), jsx_runtime_1.jsx(PreviewToolbar_1.PreviewToolbar, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(CurrentCompositionSideEffects_1.TitleUpdater, {})
             ] }) }));
 };

package/dist/components/UndoRedoButtons.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const ShortcutHint_1 = require("../error-overlay/remotion-overlay/ShortcutHint");
 const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 const client_id_1 = require("../helpers/client-id");
+const colors_1 = require("../helpers/colors");
 const is_mac_1 = require("../helpers/is-mac");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const redo_1 = require("../icons/redo");
@@ -13,8 +14,8 @@ const undo_1 = require("../icons/undo");
 const call_api_1 = require("./call-api");
 const InlineAction_1 = require("./InlineAction");
 const iconStyle = {
-    width: 16,
-    height: 16,
+    width: 14,
+    height: 14,
 };
 const UndoRedoButtons = () => {
     const [undoFile, setUndoFile] = (0, react_1.useState)(null);
@@ -130,10 +131,10 @@ const UndoRedoButtons = () => {
             ? `Redo (${ShortcutHint_1.cmdOrCtrlCharacter}+Shift+Z)`
             : `Redo (${ShortcutHint_1.cmdOrCtrlCharacter}+Y)`;
     const renderUndo = (0, react_1.useCallback)((color) => {
-        return jsx_runtime_1.jsx(undo_1.UndoIcon, { style: { ...iconStyle, color } });
+        return jsx_runtime_1.jsx(undo_1.UndoIcon, { style: iconStyle, color: color });
     }, []);
     const renderRedo = (0, react_1.useCallback)((color) => {
-        return jsx_runtime_1.jsx(redo_1.RedoIcon, { style: { ...iconStyle, color } });
+        return jsx_runtime_1.jsx(redo_1.RedoIcon, { style: iconStyle, color: color });
     }, []);
     const canUndo = undoFile !== null;
     const canRedo = redoFile !== null;
@@ -141,7 +142,7 @@ const UndoRedoButtons = () => {
         return null;
     }
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onUndo, renderAction: renderUndo, title: undoTooltip, disabled: !canUndo }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onRedo, renderAction: renderRedo, title: redoTooltip, disabled: !canRedo })
+            jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onUndo, renderAction: renderUndo, title: undoTooltip, disabled: !canUndo, unhoveredColor: colors_1.WHITE_ALPHA_80 }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onRedo, renderAction: renderRedo, title: redoTooltip, disabled: !canRedo, unhoveredColor: colors_1.WHITE_ALPHA_80 })
         ] }));
 };
 exports.UndoRedoButtons = UndoRedoButtons;

package/dist/components/UpdateCheck.js

@@ -7,6 +7,7 @@ const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
 const modals_1 = require("../state/modals");
 const z_index_1 = require("../state/z-index");
+const InlineAction_1 = require("./InlineAction");
 const actions_1 = require("./RenderQueue/actions");
 const buttonStyle = {
     appearance: 'none',
@@ -19,6 +20,11 @@ const buttonStyle = {
     justifyContent: 'center',
     marginLeft: 8,
 };
+const updateIconContainer = {
+    alignItems: 'center',
+    display: 'flex',
+    flexShrink: 0,
+};
 const UpdateCheck = () => {
     const [info, setInfo] = (0, react_1.useState)(null);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
@@ -92,16 +98,23 @@ const UpdateCheck = () => {
     const onPointerLeave = (0, react_1.useCallback)(() => {
         setHovered(false);
     }, []);
+    const renderUpdateIcon = (0, react_1.useCallback)((color) => {
+        return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
+                height: 16,
+                width: 16,
+                color,
+                flexShrink: 0,
+            }, viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM135.1 217.4c-4.5 4.2-7.1 10.1-7.1 16.3c0 12.3 10 22.3 22.3 22.3H208v96c0 17.7 14.3 32 32 32h32c17.7 0 32-14.3 32-32V256h57.7c12.3 0 22.3-10 22.3-22.3c0-6.2-2.6-12.1-7.1-16.3L269.8 117.5c-3.8-3.5-8.7-5.5-13.8-5.5s-10.1 2-13.8 5.5L135.1 217.4z" }) }));
+    }, []);
     if (!info) {
         return null;
     }
     if (!info.updateAvailable && !info.skillsUpdateAvailable) {
         return null;
     }
-    return (jsx_runtime_1.jsx("button", { tabIndex: tabIndex, style: dynButtonStyle, onClick: openModal, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, type: "button", title: hasBugfixesAvailable ? 'Bugfixes available' : 'Update available', children: hasBugfixesAvailable ? ('Bugfixes available') : (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
-                height: 16,
-                width: 16,
-                color: 'inherit',
-            }, viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR_LOWERCASE, d: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM135.1 217.4c-4.5 4.2-7.1 10.1-7.1 16.3c0 12.3 10 22.3 22.3 22.3H208v96c0 17.7 14.3 32 32 32h32c17.7 0 32-14.3 32-32V256h57.7c12.3 0 22.3-10 22.3-22.3c0-6.2-2.6-12.1-7.1-16.3L269.8 117.5c-3.8-3.5-8.7-5.5-13.8-5.5s-10.1 2-13.8 5.5L135.1 217.4z" }) })) }));
+    if (!hasBugfixesAvailable) {
+        return (jsx_runtime_1.jsx("div", { style: updateIconContainer, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: openModal, renderAction: renderUpdateIcon, unhoveredColor: colors_1.WHITE_ALPHA_80, title: "Update available" }) }));
+    }
+    return (jsx_runtime_1.jsx("button", { tabIndex: tabIndex, style: dynButtonStyle, onClick: openModal, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, type: "button", title: "Bugfixes available", children: "Bugfixes available" }));
 };
 exports.UpdateCheck = UpdateCheck;

package/dist/components/UpdateModal/UpdateModal.js

@@ -5,15 +5,18 @@ 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 CopyButton_1 = require("../CopyButton");
+const clipboard_1 = require("../../icons/clipboard");
+const InlineAction_1 = require("../InlineAction");
 const KnownBugs_1 = require("../KnownBugs");
-const layout_1 = require("../layout");
 const ModalHeader_1 = require("../ModalHeader");
 const DismissableModal_1 = require("../NewComposition/DismissableModal");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const container = {
-    padding: 20,
-    paddingTop: 0,
+    padding: '0 16px 8px',
+};
+const panelStyle = {
+    borderRadius: 6,
+    overflow: 'hidden',
 };
 const text = {
     color: colors_1.LIGHT_TEXT,
@@ -26,15 +29,32 @@ const title = {
     paddingBottom: 8,
     ...text,
 };
-const code = {
+const commandField = {
+    alignItems: 'center',
     background: colors_1.SELECTED_BACKGROUND,
-    color: colors_1.LIGHT_TEXT,
+    borderRadius: 6,
+    boxSizing: 'border-box',
+    display: 'flex',
+    marginBottom: 10,
+    marginTop: 10,
+    padding: '8px 8px 8px 10px',
+    width: '100%',
+};
+const code = {
+    color: colors_1.WHITE,
+    flex: 1,
     fontFamily: 'monospace',
-    padding: '12px 10px',
     fontSize: 14,
     lineHeight: 1.5,
-    marginTop: 10,
-    marginBottom: 10,
+    margin: 0,
+    minWidth: 0,
+    overflowX: 'auto',
+    whiteSpace: 'pre',
+};
+const copyIcon = {
+    flexShrink: 0,
+    height: 12,
+    width: 12,
 };
 const link = {
     ...text,
@@ -68,11 +88,14 @@ const UpdateModal = ({ info, knownBugs }) => {
             (0, NotificationCenter_1.showNotification)(`Could not copy: ${err.message}`, 2000);
         });
     }, [updateAction]);
-    return (jsx_runtime_1.jsxs(DismissableModal_1.DismissableModal, { children: [
+    const renderCopyAction = (0, react_1.useCallback)((color) => {
+        return jsx_runtime_1.jsx(clipboard_1.ClipboardIcon, { color: color, style: copyIcon });
+    }, []);
+    return (jsx_runtime_1.jsxs(DismissableModal_1.DismissableModal, { panelStyle: panelStyle, children: [
             jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "Update available" }), jsx_runtime_1.jsxs("div", { style: container, children: [hasKnownBugs && info.updateAvailable ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                             jsx_runtime_1.jsxs("div", { style: title, children: ["The currently installed version ", info.currentVersion, " has the following known bugs:"] }), jsx_runtime_1.jsx(KnownBugs_1.KnownBugs, { bugs: knownBugs }), jsx_runtime_1.jsx("div", { style: { height: '20px' } }), jsx_runtime_1.jsxs("div", { style: text, children: ["To upgrade, run the following ", updateActionType, ":"] })
-                        ] })) : info.updateAvailable ? (jsx_runtime_1.jsxs("div", { style: title, children: ["A new update for Remotion is available! Run the following", ' ', updateActionType, ":"] })) : (jsx_runtime_1.jsxs("div", { style: title, children: ["Your Remotion Agent Skills are out of date. Run the following", ' ', updateActionType, ":"] })), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                            jsx_runtime_1.jsx(layout_1.Flex, { children: jsx_runtime_1.jsx("pre", { onClick: onClick, style: code, children: updateAction }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx(CopyButton_1.CopyButton, { textToCopy: updateAction, label: "Copy", labelWhenCopied: "Copied!" })
+                        ] })) : info.updateAvailable ? (jsx_runtime_1.jsxs("div", { style: title, children: ["A new update for Remotion is available! Run the following", ' ', updateActionType, ":"] })) : (jsx_runtime_1.jsxs("div", { style: title, children: ["Your Remotion Agent Skills are out of date. Run the following", ' ', updateActionType, ":"] })), jsx_runtime_1.jsxs("div", { style: commandField, children: [
+                            jsx_runtime_1.jsx("pre", { style: code, children: updateAction }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onClick, renderAction: renderCopyAction, title: "Copy command" })
                         ] }), info.updateAvailable ? (jsx_runtime_1.jsxs("div", { style: text, children: ["This will upgrade Remotion from ", info.currentVersion, " to", ' ', info.latestVersion, info.skillsUpdateAvailable
                                 ? ' and update your project Remotion Agent Skills.'
                                 : '.'] })) : null, info.updateAvailable ? (jsx_runtime_1.jsxs("div", { style: text, children: ["Read the", ' ', jsx_runtime_1.jsx("a", { style: link, target: "_blank", href: "https://github.com/remotion-dev/remotion/releases", children: "Release notes" }), ' ', "to know what", "'s", " new in Remotion."] })) : null] })

package/dist/components/composition-menu-items.d.ts

@@ -2,14 +2,13 @@ import type { SetStateAction } from 'react';
 import type { ResolvedStackLocation } from 'remotion';
 import type { ModalState } from '../state/modals';
 import type { ComboboxValue } from './NewComposition/ComboBox';
-export declare const getCompositionMenuItems: ({ composition, connectionStatus, resolvedLocation, setSelectedModal, closeMenu, readOnlyStudio, includeNewCompositionItem, includeCompositionManagementItems, }: {
+export declare const getCompositionMenuItems: ({ composition, connectionStatus, resolvedLocation, setSelectedModal, closeMenu, readOnlyStudio, includeCompositionManagementItems, }: {
     composition: import("remotion").AnyComposition | null;
     connectionStatus: "connected" | "disconnected" | "init";
     resolvedLocation: ResolvedStackLocation | null;
     setSelectedModal: (value: SetStateAction<ModalState | null>) => void;
     closeMenu: () => void;
     readOnlyStudio: boolean;
-    includeNewCompositionItem: boolean;
     includeCompositionManagementItems: boolean;
 }) => ComboboxValue[];
 export declare const getCompositionContextMenuItems: (args: Omit<{
@@ -19,8 +18,7 @@ export declare const getCompositionContextMenuItems: (args: Omit<{
     setSelectedModal: (value: SetStateAction<ModalState | null>) => void;
     closeMenu: () => void;
     readOnlyStudio: boolean;
-    includeNewCompositionItem: boolean;
     includeCompositionManagementItems: boolean;
-}, "includeCompositionManagementItems" | "includeNewCompositionItem"> & {
+}, "includeCompositionManagementItems"> & {
     readonly includeCompositionManagementItems: boolean;
 }) => ComboboxValue[];

package/dist/components/composition-menu-items.js

@@ -6,7 +6,7 @@ const format_file_location_1 = require("../helpers/format-file-location");
 const open_in_editor_1 = require("../helpers/open-in-editor");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const open_in_new_window_1 = require("./open-in-new-window");
-const getCompositionMenuItems = ({ composition, connectionStatus, resolvedLocation, setSelectedModal, closeMenu, readOnlyStudio, includeNewCompositionItem, includeCompositionManagementItems, }) => {
+const getCompositionMenuItems = ({ composition, connectionStatus, resolvedLocation, setSelectedModal, closeMenu, readOnlyStudio, includeCompositionManagementItems, }) => {
     const editorName = window.remotion_editorName;
     const fileLocation = (0, format_file_location_1.formatFileLocation)({
         location: resolvedLocation,
@@ -69,60 +69,12 @@ const getCompositionMenuItems = ({ composition, connectionStatus, resolvedLocati
                 disabled: openComponentInEditorDisabled,
             }
             : null,
-        {
-            id: 'copy-file-location',
-            keyHint: null,
-            label: `Copy file location`,
-            leftItem: null,
-            onClick: () => {
-                closeMenu();
-                if (!fileLocation) {
-                    return;
-                }
-                navigator.clipboard
-                    .writeText(fileLocation)
-                    .then(() => {
-                    (0, NotificationCenter_1.showNotification)('Copied file location to clipboard', 1000);
-                })
-                    .catch((err) => {
-                    (0, NotificationCenter_1.showNotification)(`Could not copy to clipboard: ${err.message}`, 1000);
-                });
-            },
-            quickSwitcherLabel: 'Copy composition file location',
-            subMenu: null,
-            type: 'item',
-            value: 'copy-file-location',
-            disabled: copyFileLocationDisabled,
-        },
-        (editorName || fileLocation) &&
-            (includeNewCompositionItem || includeCompositionManagementItems)
+        editorName && includeCompositionManagementItems
             ? {
                 type: 'divider',
                 id: 'show-in-editor-divider',
             }
             : null,
-        includeNewCompositionItem
-            ? {
-                id: 'new',
-                keyHint: null,
-                label: `New...`,
-                leftItem: null,
-                onClick: () => {
-                    closeMenu();
-                    setSelectedModal({
-                        type: 'new-comp',
-                        folderName: null,
-                        parentName: null,
-                        stack: null,
-                    });
-                },
-                quickSwitcherLabel: 'New composition...',
-                subMenu: null,
-                type: 'item',
-                value: 'new',
-                disabled: readOnlyStudio,
-            }
-            : null,
         includeCompositionManagementItems
             ? {
                 id: 'rename',
@@ -193,9 +145,36 @@ const getCompositionMenuItems = ({ composition, connectionStatus, resolvedLocati
                 disabled: !composition || readOnlyStudio,
             }
             : null,
+        editorName || includeCompositionManagementItems
+            ? {
+                type: 'divider',
+                id: 'copy-actions-divider',
+            }
+            : null,
         {
-            type: 'divider',
-            id: 'copy-id-divider',
+            id: 'copy-file-location',
+            keyHint: null,
+            label: `Copy file location`,
+            leftItem: null,
+            onClick: () => {
+                closeMenu();
+                if (!fileLocation) {
+                    return;
+                }
+                navigator.clipboard
+                    .writeText(fileLocation)
+                    .then(() => {
+                    (0, NotificationCenter_1.showNotification)('Copied file location to clipboard', 1000);
+                })
+                    .catch((err) => {
+                    (0, NotificationCenter_1.showNotification)(`Could not copy to clipboard: ${err.message}`, 1000);
+                });
+            },
+            quickSwitcherLabel: 'Copy composition file location',
+            subMenu: null,
+            type: 'item',
+            value: 'copy-file-location',
+            disabled: copyFileLocationDisabled,
         },
         {
             id: 'copy-id',
@@ -229,7 +208,6 @@ const getCompositionContextMenuItems = (args) => {
     if (args.composition === null) {
         return (0, exports.getCompositionMenuItems)({
             ...args,
-            includeNewCompositionItem: false,
         });
     }
     return [
@@ -240,7 +218,6 @@ const getCompositionContextMenuItems = (args) => {
         },
         ...(0, exports.getCompositionMenuItems)({
             ...args,
-            includeNewCompositionItem: false,
         }),
     ];
 };

package/dist/components/import-assets.d.ts

@@ -148,7 +148,8 @@ export declare const insertElement: ({ compositionFile, compositionId, element,
     compositionFile: string;
     compositionId: string;
     element: {
-        dependencies: string[];
+        dependencies: import("@remotion/studio-protocol").ElementDependency[];
+        durationInFrames?: number | undefined;
         slug: string;
         displayName: string;
         sourceCode: string;

package/dist/components/import-assets.js

@@ -480,7 +480,7 @@ const notifyUnsupportedFiles = (unsupportedFiles) => {
 };
 const insertCompositionElement = async ({ compositionFile, compositionId, element, from, }) => {
     const requiredPackage = (0, studio_shared_1.getRequiredPackageForInsertableElement)(element);
-    await (0, install_required_package_1.installRequiredPackages)(requiredPackage ? [requiredPackage] : []);
+    await (0, install_required_package_1.installRequiredPackages)(requiredPackage ? [{ name: requiredPackage, version: null }] : []);
     const result = await (0, call_api_1.callApi)('/api/insert-jsx-element', {
         compositionFile,
         compositionId,

package/dist/components/selected-outline-types.d.ts

@@ -3,7 +3,7 @@ import type { SequenceNodePathInfo } from '../helpers/get-timeline-sequence-sort
 import type { ComboboxValue } from './NewComposition/ComboBox';
 import type { SelectedOutlineUvHandle } from './selected-outline-uv';
 import type { TimelineSelection } from './Timeline/TimelineSelection';
-export type SelectedOutlineContextMenuOpenResult = false | void | readonly ComboboxValue[];
+export type SelectedOutlineContextMenuOpenResult = false | readonly ComboboxValue[];
 export type SelectedOutlineContextMenuOpenHandler = () => SelectedOutlineContextMenuOpenResult | Promise<SelectedOutlineContextMenuOpenResult>;
 export type SelectedOutlineTarget = {
     readonly key: string;