@remotion/studio 4.0.506 → 4.0.507

package/dist/components/ContextMenu.js

@@ -44,6 +44,7 @@ const react_dom_1 = __importDefault(require("react-dom"));
 const mobile_layout_1 = require("../helpers/mobile-layout");
 const noop_1 = require("../helpers/noop");
 const z_index_1 = require("../state/z-index");
+const menu_tree_context_1 = require("./Menu/menu-tree-context");
 const portals_1 = require("./Menu/portals");
 const styles_1 = require("./Menu/styles");
 const MenuContent_1 = require("./NewComposition/MenuContent");
@@ -70,8 +71,7 @@ const notifyContextMenuOpened = (id) => {
         detail: id,
     }));
 };
-const ContextMenuPortal = ({ sizeSource, currentZIndex, onHide, opened }) => {
-    const menuRef = (0, react_1.useRef)(null);
+const ContextMenuPortal = ({ menuTreeId, sizeSource, currentZIndex, onHide, opened }) => {
     const size = player_1.PlayerInternals.useElementSize(sizeSource, {
         triggerOnWindowResize: true,
         shouldApplyCssTransforms: true,
@@ -138,11 +138,11 @@ const ContextMenuPortal = ({ sizeSource, currentZIndex, onHide, opened }) => {
     }, []);
     (0, react_1.useEffect)(() => {
         const dismissWithoutClickThrough = (event) => {
-            var _a;
             if (event.button !== 0) {
                 return;
             }
-            if ((_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) {
+            const target = event.target;
+            if ((0, menu_tree_context_1.isNodeInMenuTree)(target, menuTreeId)) {
                 return;
             }
             event.preventDefault();
@@ -154,7 +154,7 @@ const ContextMenuPortal = ({ sizeSource, currentZIndex, onHide, opened }) => {
         return () => {
             window.removeEventListener('pointerdown', dismissWithoutClickThrough, true);
         };
-    }, [onHide]);
+    }, [menuTreeId, onHide]);
     // Prevent deselection of a selected item
     const onMenuPointerDown = (0, react_1.useCallback)((e) => {
         e.stopPropagation();
@@ -162,11 +162,12 @@ const ContextMenuPortal = ({ sizeSource, currentZIndex, onHide, opened }) => {
     if (!portalStyle) {
         return null;
     }
-    return react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: contextMenuFullScreenOverlay, children: jsx_runtime_1.jsx("div", { style: contextMenuOuterPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, outsideClickButton: "primary", children: jsx_runtime_1.jsx("div", { ref: menuRef, style: portalStyle, onPointerDown: onMenuPointerDown, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: opened.values, onHide: onHide, leaveLeftSpace: true, preselectIndex: false, topItemCanBeUnselected: false, fixedHeight: null }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex));
+    return react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: contextMenuFullScreenOverlay, children: jsx_runtime_1.jsx("div", { style: contextMenuOuterPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, outsideClickButton: "primary", children: jsx_runtime_1.jsx("div", { "data-remotion-menu-tree-id": menuTreeId, style: portalStyle, onPointerDown: onMenuPointerDown, children: jsx_runtime_1.jsx(menu_tree_context_1.MenuTreeContext.Provider, { value: menuTreeId, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: opened.values, onHide: onHide, leaveLeftSpace: true, preselectIndex: false, topItemCanBeUnselected: false, fixedHeight: null }) }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex));
 };
 exports.ContextMenu = react_1.default.forwardRef(({ children, getItems, style = undefined, className = undefined, onPointerDown = undefined, }, forwardedRef) => {
     const ref = (0, react_1.useRef)(null);
     const idRef = (0, react_1.useRef)(nextContextMenuId++);
+    const menuTreeIdRef = (0, react_1.useRef)((0, menu_tree_context_1.getNextMenuTreeId)());
     const invocationRef = (0, react_1.useRef)(0);
     const getItemsRef = (0, react_1.useRef)(getItems);
     getItemsRef.current = getItems;
@@ -232,11 +233,12 @@ exports.ContextMenu = react_1.default.forwardRef(({ children, getItems, style =
         };
     }, [onHide]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("div", { ref: setRef, onContextMenu: () => false, style: style, className: className, onPointerDown: onPointerDown, children: children }), opened.type === 'open' ? (jsx_runtime_1.jsx(ContextMenuPortal, { sizeSource: ref, currentZIndex: currentZIndex, onHide: onHide, opened: opened })) : null] }));
+            jsx_runtime_1.jsx("div", { ref: setRef, onContextMenu: () => false, style: style, className: className, onPointerDown: onPointerDown, children: children }), opened.type === 'open' ? (jsx_runtime_1.jsx(ContextMenuPortal, { menuTreeId: menuTreeIdRef.current, sizeSource: ref, currentZIndex: currentZIndex, onHide: onHide, opened: opened })) : null] }));
 });
 exports.ContextMenu.displayName = 'ContextMenu';
 const ContextMenuForTarget = ({ triggerRef, getItems }) => {
     const idRef = (0, react_1.useRef)(nextContextMenuId++);
+    const menuTreeIdRef = (0, react_1.useRef)((0, menu_tree_context_1.getNextMenuTreeId)());
     const invocationRef = (0, react_1.useRef)(0);
     const getItemsRef = (0, react_1.useRef)(getItems);
     getItemsRef.current = getItems;
@@ -297,6 +299,6 @@ const ContextMenuForTarget = ({ triggerRef, getItems }) => {
             window.removeEventListener(contextMenuOpenedEvent, onOtherContextMenuOpened);
         };
     }, [onHide]);
-    return opened.type === 'open' ? (jsx_runtime_1.jsx(ContextMenuPortal, { sizeSource: body, currentZIndex: currentZIndex, onHide: onHide, opened: opened })) : null;
+    return opened.type === 'open' ? (jsx_runtime_1.jsx(ContextMenuPortal, { menuTreeId: menuTreeIdRef.current, sizeSource: body, currentZIndex: currentZIndex, onHide: onHide, opened: opened })) : null;
 };
 exports.ContextMenuForTarget = ContextMenuForTarget;

package/dist/components/EditorContexts.js

@@ -18,6 +18,7 @@ const ModalsProvider_1 = require("./ModalsProvider");
 const ClientRenderQueueProcessor_1 = require("./RenderQueue/ClientRenderQueueProcessor");
 const context_1 = require("./RenderQueue/context");
 const SetTimelineInOutProvider_1 = require("./SetTimelineInOutProvider");
+const SettingsContext_1 = require("./SettingsContext");
 const ShowGuidesProvider_1 = require("./ShowGuidesProvider");
 const ShowOutlinesProvider_1 = require("./ShowOutlinesProvider");
 const ShowRulersProvider_1 = require("./ShowRulersProvider");
@@ -25,10 +26,10 @@ const SnappingProvider_1 = require("./SnappingProvider");
 const VisualControlsUndoSync_1 = require("./VisualControls/VisualControlsUndoSync");
 const ZoomGesturesProvider_1 = require("./ZoomGesturesProvider");
 const EditorContexts = ({ children }) => {
-    return (jsx_runtime_1.jsx(get_zod_if_possible_1.ZodProvider, { children: jsx_runtime_1.jsx(VisualControls_1.VisualControlsProvider, { children: jsx_runtime_1.jsxs(client_id_1.PreviewServerConnection, { children: [
-                    jsx_runtime_1.jsx(VisualControlsUndoSync_1.VisualControlsUndoSync, {}), jsx_runtime_1.jsxs(context_1.RenderQueueContextProvider, { children: [
-                            jsx_runtime_1.jsx(ClientRenderQueueProcessor_1.ClientRenderQueueProcessor, {}), jsx_runtime_1.jsx(keybindings_1.KeybindingContextProvider, { children: jsx_runtime_1.jsx(CheckerboardProvider_1.CheckerboardProvider, { children: jsx_runtime_1.jsx(ZoomGesturesProvider_1.ZoomGesturesProvider, { children: jsx_runtime_1.jsx(ShowRulersProvider_1.ShowRulersProvider, { children: jsx_runtime_1.jsx(ShowGuidesProvider_1.ShowGuidesProvider, { children: jsx_runtime_1.jsx(ShowOutlinesProvider_1.ShowOutlinesProvider, { children: jsx_runtime_1.jsx(SnappingProvider_1.SnappingProvider, { children: jsx_runtime_1.jsx(preview_size_1.PreviewSizeProvider, { children: jsx_runtime_1.jsx(ModalsProvider_1.ModalsProvider, { children: jsx_runtime_1.jsx(MediaVolumeProvider_1.MediaVolumeProvider, { children: jsx_runtime_1.jsx(player_1.PlayerInternals.PlayerEmitterProvider, { currentPlaybackRate: null, children: jsx_runtime_1.jsx(sidebar_1.SidebarContextProvider, { children: jsx_runtime_1.jsx(folders_1.FolderContextProvider, { children: jsx_runtime_1.jsx(highest_z_index_1.HighestZIndexProvider, { children: jsx_runtime_1.jsx(SetTimelineInOutProvider_1.SetTimelineInOutProvider, { children: jsx_runtime_1.jsx(ExpandedTracksProvider_1.ExpandedTracksProvider, { children: children }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) })
-                        ] })
-                ] }) }) }));
+    return (jsx_runtime_1.jsx(get_zod_if_possible_1.ZodProvider, { children: jsx_runtime_1.jsx(VisualControls_1.VisualControlsProvider, { children: jsx_runtime_1.jsx(client_id_1.PreviewServerConnection, { children: jsx_runtime_1.jsxs(SettingsContext_1.SettingsProvider, { children: [
+                        jsx_runtime_1.jsx(VisualControlsUndoSync_1.VisualControlsUndoSync, {}), jsx_runtime_1.jsxs(context_1.RenderQueueContextProvider, { children: [
+                                jsx_runtime_1.jsx(ClientRenderQueueProcessor_1.ClientRenderQueueProcessor, {}), jsx_runtime_1.jsx(keybindings_1.KeybindingContextProvider, { children: jsx_runtime_1.jsx(CheckerboardProvider_1.CheckerboardProvider, { children: jsx_runtime_1.jsx(ZoomGesturesProvider_1.ZoomGesturesProvider, { children: jsx_runtime_1.jsx(ShowRulersProvider_1.ShowRulersProvider, { children: jsx_runtime_1.jsx(ShowGuidesProvider_1.ShowGuidesProvider, { children: jsx_runtime_1.jsx(ShowOutlinesProvider_1.ShowOutlinesProvider, { children: jsx_runtime_1.jsx(SnappingProvider_1.SnappingProvider, { children: jsx_runtime_1.jsx(preview_size_1.PreviewSizeProvider, { children: jsx_runtime_1.jsx(ModalsProvider_1.ModalsProvider, { children: jsx_runtime_1.jsx(MediaVolumeProvider_1.MediaVolumeProvider, { children: jsx_runtime_1.jsx(player_1.PlayerInternals.PlayerEmitterProvider, { currentPlaybackRate: null, children: jsx_runtime_1.jsx(sidebar_1.SidebarContextProvider, { children: jsx_runtime_1.jsx(folders_1.FolderContextProvider, { children: jsx_runtime_1.jsx(highest_z_index_1.HighestZIndexProvider, { children: jsx_runtime_1.jsx(SetTimelineInOutProvider_1.SetTimelineInOutProvider, { children: jsx_runtime_1.jsx(ExpandedTracksProvider_1.ExpandedTracksProvider, { children: children }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) })
+                            ] })
+                    ] }) }) }) }));
 };
 exports.EditorContexts = EditorContexts;

package/dist/components/ExpandedTracksProvider.js

@@ -4,46 +4,11 @@ exports.ExpandedTracksProvider = exports.ExpandedTracksSetterContext = exports.E
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const migrate_expanded_tracks_for_subscription_key_1 = require("../helpers/migrate-expanded-tracks-for-subscription-key");
+const persist_boolean_map_1 = require("../helpers/persist-boolean-map");
 const timeline_node_path_key_1 = require("../helpers/timeline-node-path-key");
-const SESSION_STORAGE_KEY = 'remotion.editor.expandedTracks';
-const onlyCollapsedTrackValues = (state) => {
-    const result = {};
-    for (const [key, value] of Object.entries(state)) {
-        if (value === false) {
-            result[key] = false;
-        }
-    }
-    return result;
-};
+const SESSION_STORAGE_KEY = 'remotion.editor.expandedTracks.v2';
 const loadExpandedTracks = () => {
-    if (typeof window === 'undefined') {
-        return {};
-    }
-    try {
-        const raw = window.sessionStorage.getItem(SESSION_STORAGE_KEY);
-        if (raw === null) {
-            return {};
-        }
-        const parsed = JSON.parse(raw);
-        if (!parsed || typeof parsed !== 'object') {
-            return {};
-        }
-        return onlyCollapsedTrackValues(parsed);
-    }
-    catch (_a) {
-        return {};
-    }
-};
-const persistExpandedTracks = (state) => {
-    if (typeof window === 'undefined') {
-        return;
-    }
-    try {
-        window.sessionStorage.setItem(SESSION_STORAGE_KEY, JSON.stringify(onlyCollapsedTrackValues(state)));
-    }
-    catch (_a) {
-        // Ignore quota errors or disabled storage.
-    }
+    return (0, persist_boolean_map_1.loadPersistedBooleanMap)(SESSION_STORAGE_KEY);
 };
 exports.ExpandedTracksGetterContext = (0, react_1.createContext)({
     getIsExpanded: () => {
@@ -78,31 +43,23 @@ const ExpandedTracksProvider = ({ children }) => {
             let changed = false;
             const next = { ...prev };
             for (const key of keysToExpand) {
-                if (next[key] === false) {
-                    delete next[key];
+                if (!next[key]) {
+                    next[key] = true;
                     changed = true;
                 }
             }
             if (!changed) {
                 return prev;
             }
-            persistExpandedTracks(next);
+            (0, persist_boolean_map_1.persistBooleanMap)(SESSION_STORAGE_KEY, next);
             return next;
         });
     }, []);
     const toggleTrack = (0, react_1.useCallback)((nodePathInfo) => {
         setExpandedTracks((prev) => {
-            var _a;
             const key = (0, timeline_node_path_key_1.timelineNodePathInfoToKey)(nodePathInfo);
-            const next = { ...prev };
-            const isExpanded = (_a = next[key]) !== null && _a !== void 0 ? _a : true;
-            if (isExpanded) {
-                next[key] = false;
-            }
-            else {
-                delete next[key];
-            }
-            persistExpandedTracks(next);
+            const next = (0, persist_boolean_map_1.toggleBooleanMapKey)(prev, key);
+            (0, persist_boolean_map_1.persistBooleanMap)(SESSION_STORAGE_KEY, next);
             return next;
         });
     }, []);
@@ -112,14 +69,14 @@ const ExpandedTracksProvider = ({ children }) => {
             if (!next) {
                 return prev;
             }
-            persistExpandedTracks(next);
+            (0, persist_boolean_map_1.persistBooleanMap)(SESSION_STORAGE_KEY, next);
             return next;
         });
     }, []);
     const getterValue = (0, react_1.useMemo)(() => ({
         getIsExpanded: (nodePathInfo) => {
             var _a;
-            return (_a = expandedTracks[(0, timeline_node_path_key_1.timelineNodePathInfoToKey)(nodePathInfo)]) !== null && _a !== void 0 ? _a : true;
+            return (_a = expandedTracks[(0, timeline_node_path_key_1.timelineNodePathInfoToKey)(nodePathInfo)]) !== null && _a !== void 0 ? _a : false;
         },
     }), [expandedTracks]);
     const setterValue = (0, react_1.useMemo)(() => ({

package/dist/components/InspectorLocationCopy.js

@@ -38,8 +38,8 @@ 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 textToCopy = (0, react_1.useMemo)(() => {
-        return (0, format_file_location_1.formatLocationForAgents)({
+    const contextForAgents = (0, react_1.useMemo)(() => {
+        return (0, format_file_location_1.formatContextForAgents)({
             location,
             name,
             root: window.remotion_cwd,
@@ -50,20 +50,20 @@ const InspectorLocationCopy = ({ children, location, name, openInEditorLocation
     }, []);
     const onCopy = (0, react_1.useCallback)((event) => {
         event.stopPropagation();
-        if (!textToCopy) {
+        if (!contextForAgents) {
             return;
         }
-        navigator.clipboard.writeText(textToCopy).catch((err) => {
+        navigator.clipboard.writeText(contextForAgents).catch((err) => {
             (0, NotificationCenter_1.showNotification)(`Could not copy to clipboard: ${err.message}`, 2000);
         });
-    }, [textToCopy]);
+    }, [contextForAgents]);
     const showAction = hovered || focusedWithin;
-    return (jsx_runtime_1.jsxs("div", { style: row, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), onFocus: () => setFocusedWithin(true), onBlur: () => setFocusedWithin(false), children: [
-            jsx_runtime_1.jsx("div", { style: content, children: children }), textToCopy || openInEditorLocation ? (jsx_runtime_1.jsxs("div", { style: {
+    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: {
                     ...action,
                     opacity: showAction ? 1 : 0,
                     pointerEvents: showAction ? 'auto' : 'none',
                 }, children: [
-                    jsx_runtime_1.jsx(InspectorOpenInEditor_1.InspectorOpenInEditor, { location: openInEditorLocation }), textToCopy ? (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onCopy, renderAction: renderCopyAction, title: "Copy location for agents" })) : null] })) : null] }));
+                    jsx_runtime_1.jsx(InspectorOpenInEditor_1.InspectorOpenInEditor, { contextForAgents: contextForAgents, location: openInEditorLocation }), contextForAgents ? (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onCopy, renderAction: renderCopyAction, title: "Copy context for agents" })) : null] })) : null] }));
 };
 exports.InspectorLocationCopy = InspectorLocationCopy;

package/dist/components/InspectorOpenInEditor.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { OriginalPosition } from '../error-overlay/react-overlay/utils/get-source-map';
 export declare const InspectorOpenInEditor: React.FC<{
+    readonly contextForAgents?: string | null;
     readonly location: OriginalPosition | null;
     readonly label?: React.ReactNode;
 }>;

package/dist/components/InspectorOpenInEditor.js

@@ -10,6 +10,7 @@ const caret_1 = require("../icons/caret");
 const editor_1 = require("../icons/editor");
 const modals_1 = require("../state/modals");
 const z_index_1 = require("../state/z-index");
+const get_open_in_menu_items_1 = require("./get-open-in-menu-items");
 const InlineDropdown_1 = require("./InlineDropdown");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const use_default_editor_info_1 = require("./use-default-editor-info");
@@ -38,15 +39,8 @@ const mainButtonBase = {
     padding: '0 6px',
     whiteSpace: 'nowrap',
 };
-const menuLabel = {
-    color: 'inherit',
-    fontFamily: 'sans-serif',
-    fontSize: 13,
-    lineHeight: '16px',
-};
 const editorButtonIconSize = 18;
-const editorMenuIconSize = 18;
-const InspectorOpenInEditor = ({ label, location }) => {
+const InspectorOpenInEditor = ({ contextForAgents = null, label, location }) => {
     var _a;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
@@ -55,6 +49,7 @@ const InspectorOpenInEditor = ({ label, location }) => {
     const [dropdownOpened, setDropdownOpened] = (0, react_1.useState)(false);
     const editorPickerAvailable = (0, use_default_editor_info_1.canUseEditorPicker)(previewServerState.type === 'connected');
     const editorInfo = (0, use_default_editor_info_1.useDefaultEditorInfo)(editorPickerAvailable);
+    const codingAgentInfo = (0, use_default_editor_info_1.useDefaultCodingAgentInfo)(editorPickerAvailable);
     const openWithEditor = (0, react_1.useCallback)(async (editorId) => {
         if (!location) {
             return;
@@ -67,6 +62,17 @@ const InspectorOpenInEditor = ({ label, location }) => {
         }
     }, [location]);
     const preferredEditorId = (0, use_default_editor_info_1.getPreferredEditorId)(editorInfo);
+    const openWithCodingAgent = (0, react_1.useCallback)(async (codingAgentId, codingAgentName) => {
+        try {
+            const response = await (0, open_in_editor_1.openInCodingAgent)(codingAgentId, codingAgentId === 'copilot' ? null : contextForAgents);
+            if (!response.success) {
+                (0, NotificationCenter_1.showNotification)(`Could not open ${codingAgentName}`, 2000);
+            }
+        }
+        catch (err) {
+            (0, NotificationCenter_1.showNotification)(err.message, 2000);
+        }
+    }, [contextForAgents]);
     const editorName = (_a = window.remotion_editorName) !== null && _a !== void 0 ? _a : 'default editor';
     const canOpenDefault = location !== null && window.remotion_editorName !== null;
     const onOpenDefault = (0, react_1.useCallback)((event) => {
@@ -101,49 +107,33 @@ const InspectorOpenInEditor = ({ label, location }) => {
         return jsx_runtime_1.jsx(caret_1.CaretDown, { color: color, small: true });
     }, []);
     const menuItems = (0, react_1.useMemo)(() => {
-        var _a;
-        const alternateEditors = ((_a = editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors) !== null && _a !== void 0 ? _a : [])
-            .filter((editor) => editor.id !== preferredEditorId)
-            .map((editor) => ({
-            id: `open-in-${editor.id}`,
-            keyHint: null,
-            label: jsx_runtime_1.jsx("span", { style: menuLabel, children: editor.name }),
-            leftItem: jsx_runtime_1.jsx(editor_1.EditorIcon, { editorId: editor.id, size: editorMenuIconSize }),
-            onClick: () => {
-                openWithEditor(editor.id).catch(() => undefined);
+        return (0, get_open_in_menu_items_1.getOpenInMenuItems)({
+            codingAgentInfo,
+            editorDisabled: location === null,
+            editorInfo,
+            excludeCodingAgentId: null,
+            excludeEditorId: preferredEditorId,
+            onConfigureApps: () => {
+                var _a;
+                var _b;
+                setSelectedModal({
+                    type: 'settings',
+                    initialTab: 'apps',
+                    initialPublicLicenseKey: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.publicLicenseKey) !== null && _b !== void 0 ? _b : null,
+                });
+            },
+            onOpenInCodingAgent: (codingAgentId, codingAgentName) => {
+                openWithCodingAgent(codingAgentId, codingAgentName).catch(() => undefined);
             },
-            quickSwitcherLabel: null,
-            subMenu: null,
-            type: 'item',
-            value: editor.id,
-        }));
-        const settingsItems = [
-            ...(alternateEditors.length > 0
-                ? [{ type: 'divider', id: 'editor-settings-divider' }]
-                : []),
-            {
-                id: 'set-default-editor',
-                keyHint: null,
-                label: jsx_runtime_1.jsx("span", { style: menuLabel, children: "Set default editor..." }),
-                leftItem: null,
-                onClick: () => {
-                    var _a;
-                    var _b;
-                    setSelectedModal({
-                        type: 'settings',
-                        initialTab: 'apps',
-                        initialPublicLicenseKey: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.publicLicenseKey) !== null && _b !== void 0 ? _b : null,
-                    });
-                },
-                quickSwitcherLabel: null,
-                subMenu: null,
-                type: 'item',
-                value: 'set-default-editor',
+            onOpenInEditor: (editorId) => {
+                openWithEditor(editorId).catch(() => undefined);
             },
-        ];
-        return [...alternateEditors, ...settingsItems];
+        });
     }, [
-        editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors,
+        codingAgentInfo,
+        editorInfo,
+        location,
+        openWithCodingAgent,
         openWithEditor,
         preferredEditorId,
         setSelectedModal,
@@ -153,7 +143,7 @@ const InspectorOpenInEditor = ({ label, location }) => {
     }
     return (jsx_runtime_1.jsxs("div", { style: splitButton, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), children: [
             jsx_runtime_1.jsxs("button", { "aria-label": `Open in ${editorName}`, disabled: !canOpenDefault, onClick: onOpenDefault, style: mainButtonStyle, tabIndex: tabIndex, title: `Open in ${editorName}`, type: "button", children: [label, jsx_runtime_1.jsx(editor_1.EditorIcon, { editorId: preferredEditorId, size: editorButtonIconSize })
-                ] }), jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { onOpenChange: setDropdownOpened, renderAction: renderDropdownAction, style: dropdownStyle, title: "Open in another editor", unhoveredColor: dropdownForegroundColor, values: menuItems, variant: "compact" })
+                ] }), jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { onOpenChange: setDropdownOpened, renderAction: renderDropdownAction, style: dropdownStyle, title: "Open in another app", unhoveredColor: dropdownForegroundColor, values: menuItems, variant: "compact" })
         ] }));
 };
 exports.InspectorOpenInEditor = InspectorOpenInEditor;

package/dist/components/InspectorPanel/SequenceInspectorHeader.d.ts

@@ -11,6 +11,9 @@ export declare const SequenceInspectorHeader: React.FC<{
     readonly sourceLocation: SequenceInspectorSourceLocation;
     readonly track: TimelineTrackData;
 }>;
+export declare const SequenceInspectorDuplicationSection: React.FC<{
+    readonly track: TimelineTrackData;
+}>;
 export declare const SequenceInspectorSections: React.FC<{
     readonly track: TimelineTrackData;
 }>;

package/dist/components/InspectorPanel/SequenceInspectorHeader.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SequenceInspectorSections = exports.SequenceInspectorHeader = exports.useSequenceInspectorSourceLocation = void 0;
+exports.SequenceInspectorSections = exports.SequenceInspectorDuplicationSection = exports.SequenceInspectorHeader = exports.useSequenceInspectorSourceLocation = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const client_id_1 = require("../../helpers/client-id");
@@ -10,7 +10,7 @@ const InspectorInfoHeader_1 = require("../InspectorInfoHeader");
 const InspectorLocationCopy_1 = require("../InspectorLocationCopy");
 const InspectorSourceLocation_1 = require("../InspectorSourceLocation");
 const layout_1 = require("../layout");
-const use_open_sequence_in_editor_1 = require("../Timeline/use-open-sequence-in-editor");
+const use_open_sequence_in_apps_1 = require("../Timeline/use-open-sequence-in-apps");
 const use_rename_sequence_1 = require("../Timeline/use-rename-sequence");
 const common_1 = require("./common");
 const ConnectedCompositionsSection_1 = require("./ConnectedCompositionsSection");
@@ -38,7 +38,7 @@ const defaultCursor = {
     cursor: 'default',
 };
 const useSequenceInspectorSourceLocation = (sequence) => {
-    const { canOpenInEditor, openInEditor, originalLocation } = (0, use_open_sequence_in_editor_1.useOpenSequenceInEditor)(sequence);
+    const { canOpenInEditor, openInEditor, originalLocation } = (0, use_open_sequence_in_apps_1.useOpenSequenceInApps)(sequence);
     const validatedLocation = (0, react_1.useMemo)(() => {
         var _a;
         if (!originalLocation ||
@@ -99,11 +99,29 @@ const SequenceInspectorHeader = ({ sourceLocation, track }) => {
             ] }) }));
 };
 exports.SequenceInspectorHeader = SequenceInspectorHeader;
+const SequenceInspectorDuplicationSection = ({ track }) => {
+    var _a;
+    var _b;
+    const numberOfInstances = (_b = (_a = track.nodePathInfo) === null || _a === void 0 ? void 0 : _a.numberOfSequencesWithThisNodePath) !== null && _b !== void 0 ? _b : 0;
+    if (numberOfInstances <= 1) {
+        return null;
+    }
+    return (jsx_runtime_1.jsx(common_1.InspectorSection, { header: jsx_runtime_1.jsxs("span", { style: {
+                color: 'inherit',
+                display: 'block',
+                fontFamily: 'inherit',
+                fontSize: 'inherit',
+                fontWeight: 'normal',
+                lineHeight: 'inherit',
+                margin: '2px 0',
+            }, children: [numberOfInstances, " instances"] }), children: null }));
+};
+exports.SequenceInspectorDuplicationSection = SequenceInspectorDuplicationSection;
 const SequenceInspectorSections = ({ track }) => {
     const sourceLocation = (0, exports.useSequenceInspectorSourceLocation)(track.sequence);
     const connectedCompositions = (0, ConnectedCompositionsSection_1.useConnectedCompositions)({ track });
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(exports.SequenceInspectorHeader, { sourceLocation: sourceLocation, track: track }), connectedCompositions.length > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx(exports.SequenceInspectorHeader, { sourceLocation: sourceLocation, track: track }), jsx_runtime_1.jsx(exports.SequenceInspectorDuplicationSection, { track: track }), connectedCompositions.length > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsx(ConnectedCompositionsSection_1.ConnectedCompositionsSection, { connectedCompositions: connectedCompositions })
                 ] })) : null] }));
 };

package/dist/components/InspectorPanel/SequenceSelectionInspector.js

@@ -141,7 +141,7 @@ const SequenceExpandedInspector = ({ track, readOnlyStudio }) => {
         return jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Sequence inspector unavailable" });
     }
     return (jsx_runtime_1.jsxs("div", { style: styles_1.selectedContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, onPointerDown: selectSequenceOnInspectorPointerDown, children: [
-            jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorHeader, { sourceLocation: sourceLocation, track: track }), connectedCompositions.length > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorHeader, { sourceLocation: sourceLocation, track: track }), jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorDuplicationSection, { track: track }), connectedCompositions.length > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsx(ConnectedCompositionsSection_1.ConnectedCompositionsSection, { connectedCompositions: connectedCompositions })
                 ] })) : null, validatedLocation ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [jsx_runtime_1.jsx(InspectorSequenceSection_1.InspectorSequenceSection, { sequence: track.sequence, readOnlyStudio: readOnlyStudio, validatedLocation: validatedLocation, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, renderTransformControls: () => jsx_runtime_1.jsx(AlignmentControls_1.AlignmentControls, { track: track }) }), jsx_runtime_1.jsxs(common_1.InspectorActionSection, { children: [
                             jsx_runtime_1.jsx(SplitSequenceAction, { selection: sequenceSelection, track: track }), jsx_runtime_1.jsx(SequenceSourceActions, { selection: sequenceSelection, track: track, validatedSource: validatedLocation.source })

package/dist/components/Menu/MenuSectionHeader.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const MenuSectionHeader: React.FC<{
+    readonly children: string;
+}>;

package/dist/components/Menu/MenuSectionHeader.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuSectionHeader = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../../helpers/colors");
+const sectionHeader = {
+    color: colors_1.WHITE_ALPHA_50,
+    fontSize: 10,
+    lineHeight: '12px',
+    paddingBottom: 2,
+    paddingLeft: 8,
+    paddingRight: 8,
+    paddingTop: 6,
+    userSelect: 'none',
+    WebkitUserSelect: 'none',
+};
+const MenuSectionHeader = ({ children }) => {
+    return jsx_runtime_1.jsx("div", { style: sectionHeader, children: children });
+};
+exports.MenuSectionHeader = MenuSectionHeader;

package/dist/components/Menu/SubMenu.js

@@ -7,22 +7,33 @@ const mobile_layout_1 = require("../../helpers/mobile-layout");
 const noop_1 = require("../../helpers/noop");
 const z_index_1 = require("../../state/z-index");
 const MenuContent_1 = require("../NewComposition/MenuContent");
+const menu_tree_context_1 = require("./menu-tree-context");
 const portals_1 = require("./portals");
 const SubMenuComponent = ({ portalStyle, subMenuActivated, subMenu, onQuitFullMenu, onQuitSubMenu, }) => {
     const mobileLayout = (0, mobile_layout_1.useMobileLayout)();
+    const menuTreeId = (0, react_1.useContext)(menu_tree_context_1.MenuTreeContext);
     const onOutsideClick = (0, react_1.useCallback)((e) => {
+        if (menuTreeId !== null) {
+            if ((0, menu_tree_context_1.isNodeInMenuTree)(e, menuTreeId)) {
+                onQuitSubMenu();
+            }
+            else {
+                onQuitFullMenu();
+            }
+            return;
+        }
         if (portals_1.portals.find((p) => p.contains(e)) || mobileLayout) {
             onQuitSubMenu();
         }
         else {
             onQuitFullMenu();
         }
-    }, [mobileLayout, onQuitFullMenu, onQuitSubMenu]);
+    }, [menuTreeId, mobileLayout, onQuitFullMenu, onQuitSubMenu]);
     const onPointerDown = (0, react_1.useCallback)((e) => {
         // Prevent deselection of currently selected items
         e.stopPropagation();
     }, []);
-    return (jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: onQuitFullMenu, onOutsideClick: onOutsideClick, children: jsx_runtime_1.jsx("div", { style: portalStyle, className: "css-reset", onPointerDown: onPointerDown, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: onQuitSubMenu, values: subMenu.items, onHide: onQuitFullMenu, leaveLeftSpace: subMenu.leaveLeftSpace, preselectIndex: subMenuActivated === 'without-mouse' &&
+    return (jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: onQuitFullMenu, onOutsideClick: onOutsideClick, children: jsx_runtime_1.jsx("div", { "data-remotion-menu-tree-id": menuTreeId !== null && menuTreeId !== void 0 ? menuTreeId : undefined, style: portalStyle, className: "css-reset", onPointerDown: onPointerDown, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: onQuitSubMenu, values: subMenu.items, onHide: onQuitFullMenu, leaveLeftSpace: subMenu.leaveLeftSpace, preselectIndex: subMenuActivated === 'without-mouse' &&
                     typeof subMenu.preselectIndex === 'number'
                     ? subMenu.preselectIndex
                     : false, topItemCanBeUnselected: false, fixedHeight: null }) }) }));

package/dist/components/Menu/menu-tree-context.d.ts

@@ -0,0 +1,3 @@
+export declare const getNextMenuTreeId: () => number;
+export declare const MenuTreeContext: import("react").Context<number | null>;
+export declare const isNodeInMenuTree: (node: Node, menuTreeId: number) => boolean;

package/dist/components/Menu/menu-tree-context.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isNodeInMenuTree = exports.MenuTreeContext = exports.getNextMenuTreeId = void 0;
+const react_1 = require("react");
+let nextMenuTreeId = 0;
+const getNextMenuTreeId = () => nextMenuTreeId++;
+exports.getNextMenuTreeId = getNextMenuTreeId;
+exports.MenuTreeContext = (0, react_1.createContext)(null);
+const isNodeInMenuTree = (node, menuTreeId) => {
+    const element = node instanceof Element ? node : node.parentElement;
+    return ((element === null || element === void 0 ? void 0 : element.closest(`[data-remotion-menu-tree-id="${menuTreeId}"]`)) !== null);
+};
+exports.isNodeInMenuTree = isNodeInMenuTree;

package/dist/components/NewComposition/ComboBox.d.ts

@@ -4,6 +4,11 @@ type DividerItem = {
     type: 'divider';
     id: string;
 };
+type SectionHeaderItem = {
+    type: 'section-header';
+    id: string;
+    label: string;
+};
 export type SubMenu = {
     preselectIndex: number | false;
     leaveLeftSpace: boolean;
@@ -21,7 +26,7 @@ export type SelectionItem = {
     quickSwitcherLabel: string | null;
     disabled?: boolean;
 };
-export type ComboboxValue = DividerItem | SelectionItem;
+export type ComboboxValue = DividerItem | SectionHeaderItem | SelectionItem;
 export declare const Combobox: React.FC<{
     readonly values: ComboboxValue[];
     readonly selectedId: string | number;