@remotion/studio 4.0.502 → 4.0.504

package/dist/esm/renderEntry.mjs

@@ -212,7 +212,7 @@ var renderContent = (Root) => {
     renderToDOM(/* @__PURE__ */ jsx("div", {
       children: /* @__PURE__ */ jsx(DelayedSpinner, {})
     }));
-    import("./chunk-fjv75ty4.js").then(({ StudioInternals }) => {
+    import("./chunk-43m68z1k.js").then(({ StudioInternals }) => {
       window.remotion_isStudio = true;
       window.remotion_isReadOnlyStudio = true;
       window.remotion_inputProps = "{}";

package/dist/helpers/inject-css.js

@@ -5,10 +5,8 @@ const remotion_1 = require("remotion");
 const scroll_to_default_props_path_1 = require("../components/RenderModal/SchemaEditor/scroll-to-default-props-path");
 const colors_1 = require("./colors");
 const makeDefaultGlobalCSS = () => {
-    const unhoveredDragAreaFactor = 2;
-    const fromMiddle = 50 / unhoveredDragAreaFactor;
-    const hoveredDragAreaFactor = 6;
-    const fromMiddleHovered = 50 / hoveredDragAreaFactor;
+    const dragAreaFactor = 2;
+    const fromMiddle = 50 / dragAreaFactor;
     return `
 	  html {
 	    --remotion-cli-internals-blue: ${colors_1.BLUE};
@@ -28,51 +26,27 @@ const makeDefaultGlobalCSS = () => {
   }
 
   .remotion-splitter-horizontal {
-	    transform: scaleY(${unhoveredDragAreaFactor});
-	    background: linear-gradient(
-	      to bottom,
-	      ${colors_1.TRANSPARENT} ${50 - fromMiddle}%,
-	      ${colors_1.BLACK} ${50 - fromMiddle}%,
-	      ${colors_1.BLACK} ${50 + fromMiddle}%,
-	      ${colors_1.TRANSPARENT} ${50 + fromMiddle}%
-	    );
-	  }
-
-  .remotion-splitter-horizontal.remotion-splitter-active, .remotion-splitter-horizontal.remotion-splitter-hover {
-	    background: linear-gradient(
-	      to bottom,
-	      ${colors_1.TRANSPARENT} ${50 - fromMiddleHovered}%,
-	      var(--remotion-cli-internals-blue) ${50 - fromMiddleHovered}%,
-	      var(--remotion-cli-internals-blue) ${50 + fromMiddleHovered}%,
-	      ${colors_1.TRANSPARENT} ${50 + fromMiddleHovered}%
-	    );
     cursor: row-resize;
-    transform: scaleY(${hoveredDragAreaFactor});
-    z-index: 1000;
+    transform: scaleY(${dragAreaFactor});
+    background: linear-gradient(
+      to bottom,
+      ${colors_1.TRANSPARENT} ${50 - fromMiddle}%,
+      ${colors_1.BLACK} ${50 - fromMiddle}%,
+      ${colors_1.BLACK} ${50 + fromMiddle}%,
+      ${colors_1.TRANSPARENT} ${50 + fromMiddle}%
+    );
   }
 
   .remotion-splitter-vertical {
-	    transform: scaleX(${unhoveredDragAreaFactor});
-	    background: linear-gradient(
-	      to right,
-	      ${colors_1.TRANSPARENT} ${50 - fromMiddle}%,
-	      ${colors_1.BLACK} ${50 - fromMiddle}%,
-	      ${colors_1.BLACK} ${50 + fromMiddle}%,
-	      ${colors_1.TRANSPARENT} ${50 + fromMiddle}%
-	    );
-	  }
-
-  .remotion-splitter-vertical.remotion-splitter-active, .remotion-splitter-vertical.remotion-splitter-hover {
-	    background: linear-gradient(
-	      to right,
-	      ${colors_1.TRANSPARENT} ${50 - fromMiddleHovered}%,
-	      var(--remotion-cli-internals-blue) ${50 - fromMiddleHovered}%,
-	      var(--remotion-cli-internals-blue) ${50 + fromMiddleHovered}%,
-	      ${colors_1.TRANSPARENT} ${50 + fromMiddleHovered}%
-	    );
-    transform: scaleX(${hoveredDragAreaFactor});
     cursor: col-resize;
-    z-index: 1000;
+    transform: scaleX(${dragAreaFactor});
+    background: linear-gradient(
+      to right,
+      ${colors_1.TRANSPARENT} ${50 - fromMiddle}%,
+      ${colors_1.BLACK} ${50 - fromMiddle}%,
+      ${colors_1.BLACK} ${50 + fromMiddle}%,
+      ${colors_1.TRANSPARENT} ${50 + fromMiddle}%
+    );
   }
 
   input::-webkit-outer-spin-button,
@@ -111,50 +85,67 @@ const makeDefaultGlobalCSS = () => {
 	    box-shadow: ${colors_1.FOCUS_BOX_SHADOW};
 	  }
 
-  .__remotion_thumb,
-  .__remotion_thumb::-webkit-slider-thumb {
+	  .__remotion_thumb,
+	  .__remotion_thumb::-webkit-slider-thumb {
 	    -webkit-appearance: none;
 	    -webkit-tap-highlight-color: ${colors_1.TRANSPARENT};
 	  }
 
-  .__remotion_thumb {
-    pointer-events: none;
-    position: absolute;
-    height: 0;
-    outline: none;
-    top: 15.5px;
-    width: 221px;
-    margin-left: -2px;
-    z-index: 2;
-  }
+	  .__remotion_thumb {
+	    appearance: none;
+	    background: transparent;
+	    border: 0;
+	    height: 100%;
+	    left: 0;
+	    margin: 0;
+	    outline: none;
+	    padding: 0;
+	    pointer-events: none;
+	    position: absolute;
+	    top: 0;
+	    width: 100%;
+	    z-index: 2;
+	  }
+
+	  .__remotion_thumb::-moz-range-track {
+	    background: transparent;
+	    border: 0;
+	    height: 6px;
+	  }
+
+	  .__remotion_thumb::-webkit-slider-runnable-track {
+	    background: transparent;
+	    border: 0;
+	    height: 6px;
+	  }
 
 	  /* For Firefox browsers */
 	  .__remotion_thumb::-moz-range-thumb {
-	    border: ${colors_1.BORDER_BLACK};
-	    border-radius: 2px;
+	    appearance: none;
+	    border: 0;
+	    border-radius: 50%;
 	    cursor: pointer;
-	    height: 37px;
-	    width: 10px;
+	    height: 14px;
+	    width: 14px;
 	    pointer-events: all;
-	    border-color: ${colors_1.BLACK};
 	    background-color: ${colors_1.WHITE};
 	    position: relative;
 	  }
 
 	  /* For Chrome browsers */
 	  .__remotion_thumb::-webkit-slider-thumb {
-	    border: ${colors_1.BORDER_BLACK};
-	    border-radius: 2px;
+	    border: 0;
+	    border-radius: 50%;
 	    cursor: pointer;
-	    height: 39px;
-	    width: 10px;
+	    height: 14px;
+	    margin-top: -4px;
+	    width: 14px;
 	    pointer-events: all;
-	    border-color: ${colors_1.BLACK};
 	    background-color: ${colors_1.WHITE};
 	    position: relative;
 	  }
 
-  .__remotion_input_dragger:hover span {
+	.__remotion_input_dragger:hover > span:first-child {
     color: var(--remotion-cli-internals-blue-hovered) !important;
   }
 

package/dist/helpers/install-required-package.d.ts

@@ -1,2 +1,3 @@
-export declare const getMissingPackages: (packageNames: string[]) => string[];
-export declare const installRequiredPackages: (packageNames: string[]) => Promise<void>;
+import type { ElementDependency } from '@remotion/studio-protocol';
+export declare const getMissingPackages: (dependencies: (string | ElementDependency)[]) => ElementDependency[];
+export declare const installRequiredPackages: (dependencies: (string | ElementDependency)[]) => Promise<void>;

package/dist/helpers/install-required-package.js

@@ -4,30 +4,35 @@ exports.installRequiredPackages = exports.getMissingPackages = void 0;
 const install_package_1 = require("../api/install-package");
 const NotificationCenter_1 = require("../components/Notifications/NotificationCenter");
 let installQueue = Promise.resolve();
-const getMissingPackages = (packageNames) => {
+const uniqueDependencies = (dependencies) => Array.from(new Map(dependencies.map((dependency) => {
+    const normalized = typeof dependency === 'string'
+        ? { name: dependency, version: null }
+        : dependency;
+    return [normalized.name, normalized];
+})).values());
+const getMissingPackages = (dependencies) => {
     var _a;
-    const uniquePackageNames = Array.from(new Set(packageNames));
     const installedPackages = (_a = window.remotion_installedPackages) !== null && _a !== void 0 ? _a : [];
-    return uniquePackageNames.filter((packageName) => !installedPackages.includes(packageName));
+    return uniqueDependencies(dependencies).filter((dependency) => dependency.version !== null ||
+        !installedPackages.includes(dependency.name));
 };
 exports.getMissingPackages = getMissingPackages;
-const addInstalledPackages = (packageNames) => {
+const addInstalledPackages = (dependencies) => {
     var _a;
     const installedPackages = (_a = window.remotion_installedPackages) !== null && _a !== void 0 ? _a : [];
-    window.remotion_installedPackages = Array.from(new Set([...installedPackages, ...packageNames]));
+    window.remotion_installedPackages = Array.from(new Set([
+        ...installedPackages,
+        ...uniqueDependencies(dependencies).map((dependency) => dependency.name),
+    ]));
 };
-const formatPackageList = (packageNames) => {
-    if (packageNames.length === 1) {
-        return packageNames[0];
-    }
-    return `${packageNames.length} packages`;
-};
-const installRequiredPackages = async (packageNames) => {
+const formatPackageList = (dependencies) => dependencies.length === 1
+    ? dependencies[0].name
+    : `${dependencies.length} packages`;
+const installRequiredPackages = async (dependencies) => {
     const runInstall = async () => {
-        const missingPackages = (0, exports.getMissingPackages)(packageNames);
-        if (missingPackages.length === 0) {
+        const missingPackages = (0, exports.getMissingPackages)(dependencies);
+        if (missingPackages.length === 0)
             return;
-        }
         (0, NotificationCenter_1.showNotification)(`Installing ${formatPackageList(missingPackages)}...`, 3000);
         await (0, install_package_1.installPackages)(missingPackages);
         addInstalledPackages(missingPackages);

package/dist/helpers/open-in-editor.d.ts

@@ -1,7 +1,7 @@
-import type { CompositionComponentInfoResponse, SymbolicatedStackFrame } from '@remotion/studio-shared';
+import type { CompositionComponentInfoResponse, EditorPickerId, SymbolicatedStackFrame } from '@remotion/studio-shared';
 import type { CodePosition, OriginalPosition } from '../error-overlay/react-overlay/utils/get-source-map';
-export declare const openInEditor: (stack: SymbolicatedStackFrame) => Promise<import("@remotion/studio-shared").OpenInEditorResponse>;
-export declare const openOriginalPositionInEditor: (originalPosition: OriginalPosition) => Promise<void>;
+export declare const openInEditor: (stack: SymbolicatedStackFrame, editorId: EditorPickerId | null) => Promise<import("@remotion/studio-shared").OpenInEditorResponse>;
+export declare const openOriginalPositionInEditor: (originalPosition: OriginalPosition, editorId: EditorPickerId | null) => Promise<void>;
 export declare const openOriginalPositionInEditorAtProperty: ({ originalPosition, property, }: {
     originalPosition: CodePosition;
     property: string;

package/dist/helpers/open-in-editor.js

@@ -4,9 +4,10 @@ exports.openCompositionComponentInEditor = exports.preloadCompositionComponentIn
 const react_1 = require("react");
 const call_api_1 = require("../components/call-api");
 const browser_studio_operations_1 = require("./browser-studio-operations");
-const openInEditor = (stack) => {
+const openInEditor = (stack, editorId) => {
     const { originalFileName, originalLineNumber, originalColumnNumber, originalFunctionName, originalScriptCode, } = stack;
     return (0, call_api_1.callApi)('/api/open-in-editor', {
+        editorId,
         stack: {
             originalFileName,
             originalLineNumber,
@@ -17,14 +18,17 @@ const openInEditor = (stack) => {
     });
 };
 exports.openInEditor = openInEditor;
-const openOriginalPositionInEditor = async (originalPosition) => {
-    await (0, exports.openInEditor)({
+const openOriginalPositionInEditor = async (originalPosition, editorId) => {
+    const response = await (0, exports.openInEditor)({
         originalColumnNumber: originalPosition.column,
         originalFileName: originalPosition.source,
         originalFunctionName: null,
         originalLineNumber: originalPosition.line,
         originalScriptCode: null,
-    });
+    }, editorId);
+    if (!response.success) {
+        throw new Error('Could not open the file in the editor.');
+    }
 };
 exports.openOriginalPositionInEditor = openOriginalPositionInEditor;
 const openOriginalPositionInEditorAtProperty = async ({ originalPosition, property, }) => {
@@ -42,7 +46,7 @@ const openOriginalPositionInEditorAtProperty = async ({ originalPosition, proper
         source: originalPosition.source,
         line: position.lineNumber,
         column: position.columnNumber,
-    });
+    }, null);
 };
 exports.openOriginalPositionInEditorAtProperty = openOriginalPositionInEditorAtProperty;
 const componentResolutionCache = new Map();
@@ -142,6 +146,6 @@ const openCompositionComponentInEditor = async ({ compositionFile, compositionId
         compositionFile,
         compositionId,
     });
-    await (0, exports.openOriginalPositionInEditor)(info.location);
+    await (0, exports.openOriginalPositionInEditor)(info.location, null);
 };
 exports.openCompositionComponentInEditor = openCompositionComponentInEditor;

package/dist/helpers/pointer-session.d.ts

@@ -0,0 +1,9 @@
+export type PointerSessionEndReason = 'pointerup' | 'pointercancel' | 'lostpointercapture' | 'blur' | 'visibilitychange' | 'buttons-released' | 'manual';
+type PointerSessionEvent = Pick<PointerEvent, 'button' | 'pointerId'>;
+export declare const startPointerSession: ({ event, target, onMove, onEnd, }: {
+    event: PointerSessionEvent;
+    target: Element;
+    onMove?: ((event: PointerEvent) => void) | undefined;
+    onEnd: (reason: PointerSessionEndReason, event: PointerEvent | null) => void;
+}) => () => void;
+export {};

package/dist/helpers/pointer-session.js

@@ -0,0 +1,94 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.startPointerSession = void 0;
+const getButtonMask = (button) => {
+    if (button === 0) {
+        return 1;
+    }
+    if (button === 1) {
+        return 4;
+    }
+    if (button === 2) {
+        return 2;
+    }
+    return 1 << button;
+};
+const startPointerSession = ({ event, target, onMove, onEnd, }) => {
+    var _a;
+    const { pointerId } = event;
+    const buttonMask = getButtonMask(event.button);
+    let ended = false;
+    const cleanup = () => {
+        var _a;
+        window.removeEventListener('pointermove', handleMove);
+        window.removeEventListener('pointerup', handleUp);
+        window.removeEventListener('pointercancel', handleCancel);
+        window.removeEventListener('blur', handleBlur);
+        document.removeEventListener('visibilitychange', handleVisibilityChange);
+        target.removeEventListener('lostpointercapture', handleLostPointerCapture);
+        if ((_a = target.hasPointerCapture) === null || _a === void 0 ? void 0 : _a.call(target, pointerId)) {
+            try {
+                target.releasePointerCapture(pointerId);
+            }
+            catch (_b) {
+                // The browser may already have released capture.
+            }
+        }
+    };
+    const end = (reason, pointerEvent) => {
+        if (ended) {
+            return;
+        }
+        ended = true;
+        cleanup();
+        onEnd(reason, pointerEvent);
+    };
+    function handleMove(moveEvent) {
+        if (moveEvent.pointerId !== pointerId) {
+            return;
+        }
+        if ((moveEvent.buttons & buttonMask) === 0) {
+            end('buttons-released', moveEvent);
+            return;
+        }
+        onMove === null || onMove === void 0 ? void 0 : onMove(moveEvent);
+    }
+    function handleUp(upEvent) {
+        if (upEvent.pointerId === pointerId) {
+            end('pointerup', upEvent);
+        }
+    }
+    function handleCancel(cancelEvent) {
+        if (cancelEvent.pointerId === pointerId) {
+            end('pointercancel', cancelEvent);
+        }
+    }
+    function handleLostPointerCapture(lostEvent) {
+        const pointerEvent = lostEvent;
+        if (pointerEvent.pointerId === pointerId) {
+            end('lostpointercapture', pointerEvent);
+        }
+    }
+    function handleBlur() {
+        end('blur', null);
+    }
+    function handleVisibilityChange() {
+        if (document.visibilityState === 'hidden') {
+            end('visibilitychange', null);
+        }
+    }
+    try {
+        (_a = target.setPointerCapture) === null || _a === void 0 ? void 0 : _a.call(target, pointerId);
+    }
+    catch (_b) {
+        // Capture is best-effort for detached or browser-owned targets.
+    }
+    window.addEventListener('pointermove', handleMove);
+    window.addEventListener('pointerup', handleUp);
+    window.addEventListener('pointercancel', handleCancel);
+    window.addEventListener('blur', handleBlur);
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+    target.addEventListener('lostpointercapture', handleLostPointerCapture);
+    return () => end('manual', null);
+};
+exports.startPointerSession = startPointerSession;

package/dist/helpers/use-menu-structure.js

@@ -55,12 +55,34 @@ const getFileMenu = ({ readOnlyStudio, closeMenu, previewServerState, setSelecte
     const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
     const downloadProject = browserStudioOperations === null || browserStudioOperations === void 0 ? void 0 : browserStudioOperations.downloadProject;
     const items = [
+        readOnlyStudio
+            ? null
+            : {
+                id: 'new-composition',
+                value: 'new-composition',
+                label: 'New composition...',
+                onClick: () => {
+                    closeMenu();
+                    setSelectedModal({
+                        type: 'new-comp',
+                        folderName: null,
+                        parentName: null,
+                        stack: null,
+                    });
+                },
+                type: 'item',
+                keyHint: null,
+                leftItem: null,
+                subMenu: null,
+                quickSwitcherLabel: 'New composition...',
+                disabled: previewServerState !== 'connected',
+            },
         readOnlyStudio
             ? null
             : {
                 id: 'new-folder',
                 value: 'new-folder',
-                label: 'New Folder...',
+                label: 'New folder...',
                 onClick: () => {
                     closeMenu();
                     setSelectedModal({
@@ -80,7 +102,7 @@ const getFileMenu = ({ readOnlyStudio, closeMenu, previewServerState, setSelecte
             ? null
             : {
                 type: 'divider',
-                id: 'new-folder-divider',
+                id: 'new-project-item-divider',
             },
         window.remotion_isReadOnlyStudio
             ? {
@@ -100,42 +122,6 @@ const getFileMenu = ({ readOnlyStudio, closeMenu, previewServerState, setSelecte
                 quickSwitcherLabel: 'Override input props',
             }
             : null,
-        readOnlyStudio
-            ? null
-            : {
-                id: 'render',
-                value: 'render',
-                label: 'Render...',
-                onClick: () => {
-                    closeMenu();
-                    if (previewServerState !== 'connected') {
-                        (0, NotificationCenter_1.showNotification)('Restart the studio to render', 2000);
-                        return;
-                    }
-                    const renderButton = document.getElementById('render-modal-button-server');
-                    renderButton.click();
-                },
-                type: 'item',
-                keyHint: 'R',
-                leftItem: null,
-                subMenu: null,
-                quickSwitcherLabel: 'Render...',
-            },
-        {
-            id: 'render-on-web',
-            value: 'render-on-web',
-            label: 'Render on web...',
-            onClick: () => {
-                closeMenu();
-                const renderButton = document.getElementById('render-modal-button-client');
-                renderButton.click();
-            },
-            type: 'item',
-            keyHint: null,
-            leftItem: null,
-            subMenu: null,
-            quickSwitcherLabel: 'Render on web...',
-        },
         downloadProject
             ? {
                 id: 'download-project',
@@ -159,7 +145,7 @@ const getFileMenu = ({ readOnlyStudio, closeMenu, previewServerState, setSelecte
                 quickSwitcherLabel: 'Download project',
             }
             : null,
-        !readOnlyStudio
+        !readOnlyStudio && downloadProject
             ? {
                 type: 'divider',
                 id: 'open-project-divider',
@@ -177,7 +163,7 @@ const getFileMenu = ({ readOnlyStudio, closeMenu, previewServerState, setSelecte
                         originalColumnNumber: 1,
                         originalFunctionName: null,
                         originalScriptCode: null,
-                    })
+                    }, null)
                         .then(({ success }) => {
                         if (!success) {
                             (0, NotificationCenter_1.showNotification)(`Could not open ${window.remotion_editorName}`, 2000);
@@ -229,6 +215,50 @@ const getFileMenu = ({ readOnlyStudio, closeMenu, previewServerState, setSelecte
         quickSwitcherLabel: null,
     };
 };
+const getRenderMenuItems = ({ closeMenu, previewServerState, readOnlyStudio, }) => {
+    return [
+        readOnlyStudio
+            ? null
+            : {
+                id: 'render',
+                value: 'render',
+                label: 'Render...',
+                onClick: () => {
+                    closeMenu();
+                    if (previewServerState !== 'connected') {
+                        (0, NotificationCenter_1.showNotification)('Restart the studio to render', 2000);
+                        return;
+                    }
+                    const renderButton = document.getElementById('render-modal-button-server');
+                    renderButton.click();
+                },
+                type: 'item',
+                keyHint: 'R',
+                leftItem: null,
+                subMenu: null,
+                quickSwitcherLabel: 'Render...',
+            },
+        {
+            id: 'render-on-web',
+            value: 'render-on-web',
+            label: 'Render on web...',
+            onClick: () => {
+                closeMenu();
+                const renderButton = document.getElementById('render-modal-button-client');
+                renderButton.click();
+            },
+            type: 'item',
+            keyHint: null,
+            leftItem: null,
+            subMenu: null,
+            quickSwitcherLabel: 'Render on web...',
+        },
+        {
+            type: 'divider',
+            id: 'render-divider',
+        },
+    ].filter(no_react_1.NoReactInternals.truthy);
+};
 const useMenuStructure = (closeMenu, readOnlyStudio) => {
     var _a;
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
@@ -240,6 +270,9 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
     const { size, setSize } = (0, react_1.useContext)(remotion_1.Internals.PreviewSizeContext);
     const { canvasContent, compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { type } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).previewServerState;
+    const canConfigureDefaultEditor = !readOnlyStudio &&
+        type === 'connected' &&
+        (0, browser_studio_operations_1.getBrowserStudioOperations)() === null;
     const { setSidebarCollapsedState, sidebarCollapsedStateLeft, sidebarCollapsedStateRight, } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     const sizes = (0, react_1.useMemo)(() => (0, SizeSelector_1.getUniqueSizes)(size), [size]);
     const isFullscreenSupported = (0, check_fullscreen_support_1.checkFullscreenSupport)();
@@ -300,6 +333,24 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                         subMenu: null,
                         quickSwitcherLabel: 'Help: Changelog',
                     },
+                    canConfigureDefaultEditor
+                        ? {
+                            id: 'default-editor',
+                            value: 'default-editor',
+                            label: 'Configure default editor...',
+                            onClick: () => {
+                                closeMenu();
+                                setSelectedModal({
+                                    type: 'configure-default-editor',
+                                });
+                            },
+                            type: 'item',
+                            keyHint: null,
+                            leftItem: null,
+                            subMenu: null,
+                            quickSwitcherLabel: 'Configure default editor...',
+                        }
+                        : null,
                     {
                         id: 'license',
                         value: 'license',
@@ -352,7 +403,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                         subMenu: null,
                         quickSwitcherLabel: 'Restart Studio Server',
                     },
-                ],
+                ].filter(no_react_1.NoReactInternals.truthy),
                 quickSwitcherLabel: null,
             },
             getFileMenu({
@@ -709,16 +760,22 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                 id: 'composition',
                 label: 'Composition',
                 leaveLeftPadding: false,
-                items: (0, composition_menu_items_1.getCompositionMenuItems)({
-                    closeMenu,
-                    composition: currentComposition,
-                    connectionStatus: type,
-                    includeCompositionManagementItems: true,
-                    includeNewCompositionItem: true,
-                    resolvedLocation: resolvedCompositionLocation,
-                    setSelectedModal,
-                    readOnlyStudio,
-                }),
+                items: [
+                    ...getRenderMenuItems({
+                        closeMenu,
+                        previewServerState: type,
+                        readOnlyStudio,
+                    }),
+                    ...(0, composition_menu_items_1.getCompositionMenuItems)({
+                        closeMenu,
+                        composition: currentComposition,
+                        connectionStatus: type,
+                        includeCompositionManagementItems: true,
+                        resolvedLocation: resolvedCompositionLocation,
+                        setSelectedModal,
+                        readOnlyStudio,
+                    }),
+                ],
                 quickSwitcherLabel: null,
             },
             {
@@ -957,6 +1014,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
         }
         return struct;
     }, [
+        canConfigureDefaultEditor,
         readOnlyStudio,
         closeMenu,
         type,

package/dist/icons/audio.d.ts

@@ -1,5 +1,5 @@
 import type { SVGProps } from 'react';
-export declare const AudioIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const AudioIcon: ({ color, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
 export declare const AudioFileIcon: ({ color, ...props }: SVGProps<SVGSVGElement> & {
     readonly color?: string | undefined;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/icons/audio.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AudioFileIcon = exports.AudioIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const colors_1 = require("../helpers/colors");
-const AudioIcon = (props) => (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props, children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR_LOWERCASE, d: "M243 32.32C105.5 39.15 0 157.8 0 295.5v120.4C0 451.3 28.63 480 64 480h32c17.62 0 32-14.38 32-32V288c0-17.62-14.38-32-32-32H64c-10.79 0-20.8 2.9-29.72 7.7 14.2-106.8 100.5-193.9 210.4-199.4 120.5-5.965 221.7 83.92 234 199.9-9.08-5.1-19.48-8.2-30.68-8.2h-32c-17.62 0-32 14.38-32 32v160c0 17.62 14.38 32 32 32h32c35.38 0 64-28.75 64-64.13V287.9c0-145.4-122-262.88-269-255.58zM64 288h32v160H64c-17.62 0-32-14.5-32-32.13v-95.75C32 302.5 46.38 288 64 288zm416 127.9c0 17.6-14.4 32.1-32 32.1h-32V288h32c17.62 0 32 14.5 32 32.13v95.77z" }) }));
+const AudioIcon = ({ color, ...props }) => (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props, children: jsx_runtime_1.jsx("path", { fill: color !== null && color !== void 0 ? color : colors_1.CURRENT_COLOR_LOWERCASE, d: "M243 32.32C105.5 39.15 0 157.8 0 295.5v120.4C0 451.3 28.63 480 64 480h32c17.62 0 32-14.38 32-32V288c0-17.62-14.38-32-32-32H64c-10.79 0-20.8 2.9-29.72 7.7 14.2-106.8 100.5-193.9 210.4-199.4 120.5-5.965 221.7 83.92 234 199.9-9.08-5.1-19.48-8.2-30.68-8.2h-32c-17.62 0-32 14.38-32 32v160c0 17.62 14.38 32 32 32h32c35.38 0 64-28.75 64-64.13V287.9c0-145.4-122-262.88-269-255.58zM64 288h32v160H64c-17.62 0-32-14.5-32-32.13v-95.75C32 302.5 46.38 288 64 288zm416 127.9c0 17.6-14.4 32.1-32 32.1h-32V288h32c17.62 0 32 14.5 32 32.13v95.77z" }) }));
 exports.AudioIcon = AudioIcon;
 const AudioFileIcon = ({ color, ...props }) => (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props, children: jsx_runtime_1.jsx("path", { fill: color !== null && color !== void 0 ? color : colors_1.CURRENT_COLOR_LOWERCASE, d: "M480 16l0-19.9-19.5 4.3-288 64-12.5 2.8 0 273.2c-17-12.7-39.4-20.4-64-20.4-53 0-96 35.8-96 80s43 80 96 80 96-35.8 96-80l0-187.2 256-56.9 0 120.4c-17-12.7-39.4-20.4-64-20.4-53 0-96 35.8-96 80s43 80 96 80 96-35.8 96-80l0-320zM448 336c0 26.5-28.7 48-64 48s-64-21.5-64-48 28.7-48 64-48 64 21.5 64 48zM160 400c0 26.5-28.7 48-64 48s-64-21.5-64-48 28.7-48 64-48 64 21.5 64 48zM448 123.2l-256 56.9 0-87.2 256-56.9 0 87.2z" }) }));
 exports.AudioFileIcon = AudioFileIcon;