@remotion/studio 4.0.506 → 4.0.508

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,17 +233,29 @@ 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 ContextMenuForTarget = ({ triggerRef, getItems, onOpenChange = undefined }) => {
     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 isOpenRef = (0, react_1.useRef)(false);
     const getItemsRef = (0, react_1.useRef)(getItems);
+    const onOpenChangeRef = (0, react_1.useRef)(onOpenChange);
     getItemsRef.current = getItems;
+    onOpenChangeRef.current = onOpenChange;
     const [opened, setOpened] = (0, react_1.useState)({ type: 'not-open' });
     const [body, setBody] = (0, react_1.useState)(null);
     const { currentZIndex } = (0, z_index_1.useZIndex)();
+    const setOpenLifecycleState = (0, react_1.useCallback)((open) => {
+        var _a;
+        if (isOpenRef.current === open) {
+            return;
+        }
+        isOpenRef.current = open;
+        (_a = onOpenChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onOpenChangeRef, open);
+    }, []);
     (0, react_1.useEffect)(() => {
         // Access document.body after mount so importing this component stays safe
         // in DOM-less test environments.
@@ -258,8 +271,21 @@ const ContextMenuForTarget = ({ triggerRef, getItems }) => {
             e.preventDefault();
             e.stopPropagation();
             const currentInvocation = ++invocationRef.current;
-            const values = await (0, exports.resolveContextMenuItems)(getItemsRef.current, e);
+            setOpenLifecycleState(true);
+            let values;
+            try {
+                values = await (0, exports.resolveContextMenuItems)(getItemsRef.current, e);
+            }
+            catch (err) {
+                if (currentInvocation === invocationRef.current) {
+                    setOpenLifecycleState(false);
+                }
+                throw err;
+            }
             if (currentInvocation !== invocationRef.current || values === null) {
+                if (currentInvocation === invocationRef.current) {
+                    setOpenLifecycleState(false);
+                }
                 return false;
             }
             notifyContextMenuOpened(idRef.current);
@@ -275,16 +301,19 @@ const ContextMenuForTarget = ({ triggerRef, getItems }) => {
         return () => {
             current.removeEventListener('contextmenu', onClick);
         };
-    }, [triggerRef]);
+    }, [setOpenLifecycleState, triggerRef]);
     (0, react_1.useEffect)(() => {
         const invocation = invocationRef;
         return () => {
             invocation.current++;
+            setOpenLifecycleState(false);
         };
-    }, []);
+    }, [setOpenLifecycleState]);
     const onHide = (0, react_1.useCallback)(() => {
+        invocationRef.current++;
+        setOpenLifecycleState(false);
         setOpened({ type: 'not-open' });
-    }, []);
+    }, [setOpenLifecycleState]);
     (0, react_1.useEffect)(() => {
         const onOtherContextMenuOpened = (event) => {
             if (event.detail === idRef.current) {
@@ -297,6 +326,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/EditorContent.js

@@ -4,6 +4,7 @@ exports.EditorContent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const transform_3d_mode_1 = require("../state/transform-3d-mode");
 const GlobalKeybindings_1 = require("./GlobalKeybindings");
 const InitialCompositionLoader_1 = require("./InitialCompositionLoader");
 const MenuToolbar_1 = require("./MenuToolbar");
@@ -38,8 +39,8 @@ const EditorContent = ({ readOnlyStudio, children }) => {
     const content = (jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "horizontal", id: "top-to-bottom", maxFlex: 0.9, minFlex: 0.2, defaultFlex: 0.75, maxFlexerSize: null, minFlexerSize: null, maxAntiFlexerSize: null, minAntiFlexerSize: null, children: [
             jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: children }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "none", onCollapse: noop }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: showTimeline ? jsx_runtime_1.jsx(Timeline_1.Timeline, {}) : jsx_runtime_1.jsx(TimelineEmptyState_1.TimelineEmptyState, {}) })
         ] }));
-    return (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionProvider, { children: jsx_runtime_1.jsxs(StudioClearSelectionArea, { children: [
-                jsx_runtime_1.jsx(InitialCompositionLoader_1.InitialCompositionLoader, {}), jsx_runtime_1.jsx(MenuToolbar_1.MenuToolbar, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(GlobalKeybindings_1.GlobalKeybindings, {}), jsx_runtime_1.jsx(TimelineKeyframeDragState_1.TimelineKeyframeDragStateProvider, { children: content })
-            ] }) }));
+    return (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionProvider, { children: jsx_runtime_1.jsx(transform_3d_mode_1.Transform3DModeStateProvider, { children: jsx_runtime_1.jsxs(StudioClearSelectionArea, { children: [
+                    jsx_runtime_1.jsx(InitialCompositionLoader_1.InitialCompositionLoader, {}), jsx_runtime_1.jsx(MenuToolbar_1.MenuToolbar, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(GlobalKeybindings_1.GlobalKeybindings, {}), jsx_runtime_1.jsx(TimelineKeyframeDragState_1.TimelineKeyframeDragStateProvider, { children: content })
+                ] }) }) }));
 };
 exports.EditorContent = EditorContent;

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/InlineAction.d.ts

@@ -3,8 +3,9 @@ export type RenderInlineAction = (color: string) => React.ReactNode;
 export type InlineActionProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onClick' | 'style'> & {
     readonly onClick: React.MouseEventHandler<HTMLButtonElement>;
     readonly renderAction: RenderInlineAction;
+    readonly hoveredColor?: string;
     readonly unhoveredColor?: string;
     readonly variant: 'compact' | null;
     readonly style?: React.CSSProperties;
 };
-export declare const InlineAction: ({ renderAction, onClick, disabled, title, unhoveredColor, variant, style: customStyle, className, ...buttonProps }: InlineActionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InlineAction: ({ renderAction, onClick, disabled, title, hoveredColor, unhoveredColor, variant, style: customStyle, className, ...buttonProps }: InlineActionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/InlineAction.js

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const hoverable_1 = require("../helpers/hoverable");
 const z_index_1 = require("../state/z-index");
-const InlineAction = ({ renderAction, onClick, disabled, title, unhoveredColor = colors_1.LIGHT_TEXT, variant, style: customStyle, className, ...buttonProps }) => {
+const InlineAction = ({ renderAction, onClick, disabled, title, hoveredColor = colors_1.WHITE, unhoveredColor = colors_1.LIGHT_TEXT, variant, style: customStyle, className, ...buttonProps }) => {
     var _a;
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const style = (0, react_1.useMemo)(() => {
@@ -27,11 +27,11 @@ const InlineAction = ({ renderAction, onClick, disabled, title, unhoveredColor =
                     ? colors_1.TRANSPARENT
                     : (0, colors_1.getBackgroundFromHoverState)({ hovered: true, selected: false }),
                 idleColor: unhoveredColor,
-                hoverColor: disabled ? unhoveredColor : colors_1.WHITE,
+                hoverColor: disabled ? unhoveredColor : hoveredColor,
             }),
             ...customStyle,
         };
-    }, [customStyle, disabled, unhoveredColor, variant]);
+    }, [customStyle, disabled, hoveredColor, unhoveredColor, variant]);
     return (jsx_runtime_1.jsx("button", { ...buttonProps, type: "button", className: className
             ? `${hoverable_1.HOVERABLE_CLASS_NAME} ${className}`
             : hoverable_1.HOVERABLE_CLASS_NAME, disabled: disabled, onClick: onClick, style: style, tabIndex: tabIndex, title: title, "aria-label": (_a = buttonProps['aria-label']) !== null && _a !== void 0 ? _a : title, children: renderAction(colors_1.CURRENT_COLOR) }));

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, { locationType: null, 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,8 @@
 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;
+    readonly locationType: 'file' | 'folder' | null;
 }>;

package/dist/components/InspectorOpenInEditor.js

@@ -10,8 +10,10 @@ 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 actions_1 = require("./RenderQueue/actions");
 const use_default_editor_info_1 = require("./use-default-editor-info");
 const splitButton = {
     alignItems: 'center',
@@ -38,23 +40,18 @@ 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, locationType }) => {
     var _a;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const [dropdownOpened, setDropdownOpened] = (0, react_1.useState)(false);
+    const ignorePointerEnter = (0, react_1.useRef)(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,12 +64,30 @@ 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) => {
         event.stopPropagation();
         openWithEditor(null).catch(() => undefined);
     }, [openWithEditor]);
+    const onDropdownOpenChange = (0, react_1.useCallback)((open) => {
+        setDropdownOpened(open);
+        if (!open) {
+            ignorePointerEnter.current = true;
+            setHovered(false);
+        }
+    }, []);
     const mainHovered = hovered && !dropdownOpened;
     const mainButtonStyle = (0, react_1.useMemo)(() => {
         return {
@@ -101,49 +116,58 @@ 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,
+            fileManagerDisabled: !(location === null || location === void 0 ? void 0 : location.source),
+            folder: locationType === 'folder',
+            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);
+            },
+            onOpenInEditor: (editorId) => {
+                openWithEditor(editorId).catch(() => undefined);
+            },
+            onOpenInFileExplorer: () => {
+                if (!(location === null || location === void 0 ? void 0 : location.source)) {
+                    return;
+                }
+                (0, actions_1.openInFileExplorer)({ directory: location.source }).catch((err) => {
+                    (0, NotificationCenter_1.showNotification)(`Could not open file: ${err.message}`, 2000);
+                });
             },
-            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',
+            onOpenInTerminal: (terminalId) => {
+                if (!(location === null || location === void 0 ? void 0 : location.source) || locationType !== 'folder') {
+                    return;
+                }
+                (0, open_in_editor_1.openInTerminal)(terminalId, location.source)
+                    .then((response) => {
+                    if (!response.success) {
+                        (0, NotificationCenter_1.showNotification)('Could not open terminal', 2000);
+                    }
+                })
+                    .catch((err) => {
+                    (0, NotificationCenter_1.showNotification)(`Could not open terminal: ${err.message}`, 2000);
+                });
             },
-        ];
-        return [...alternateEditors, ...settingsItems];
+        });
     }, [
-        editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors,
+        codingAgentInfo,
+        editorInfo,
+        location,
+        locationType,
+        openWithCodingAgent,
         openWithEditor,
         preferredEditorId,
         setSelectedModal,
@@ -151,9 +175,16 @@ const InspectorOpenInEditor = ({ label, location }) => {
     if (!editorPickerAvailable) {
         return null;
     }
-    return (jsx_runtime_1.jsxs("div", { style: splitButton, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), children: [
+    return (jsx_runtime_1.jsxs("div", { style: splitButton, onPointerEnter: () => {
+            if (!ignorePointerEnter.current) {
+                setHovered(true);
+            }
+        }, onPointerLeave: () => {
+            ignorePointerEnter.current = false;
+            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: onDropdownOpenChange, renderAction: renderDropdownAction, style: dropdownStyle, title: "Open in another app", unhoveredColor: dropdownForegroundColor, values: menuItems, variant: "compact" })
         ] }));
 };
 exports.InspectorOpenInEditor = InspectorOpenInEditor;

package/dist/components/InspectorPanel/AlignmentControls.js

@@ -119,7 +119,7 @@ const AlignmentControls = ({ track }) => {
                 shouldResortToDefaultValueIfUndefined: true,
             })) !== null && _c !== void 0 ? _c : fieldSchema.default) !== null && _d !== void 0 ? _d : '0px 0px')
             : String((_e = fieldSchema.default) !== null && _e !== void 0 ? _e : '0px 0px');
-        const [currentX, currentY] = (0, timeline_translate_utils_1.parseTranslate)(currentTranslate);
+        const [currentX, currentY, currentZ] = (0, timeline_translate_utils_1.parseTranslate)(currentTranslate);
         const { x: newX, y: newY } = (0, alignment_controls_1.computeAlignedTranslate)({
             direction,
             elementRect,
@@ -128,7 +128,7 @@ const AlignmentControls = ({ track }) => {
             currentTranslateY: currentY,
             scale,
         });
-        const newValue = (0, timeline_translate_utils_1.serializeTranslate)(newX, newY);
+        const newValue = (0, timeline_translate_utils_1.serializeTranslate)([newX, newY, currentZ]);
         const undoLabels = {
             left: 'Align left',
             'center-h': 'Align center horizontally',

package/dist/components/InspectorPanel/CompositionInspector.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CompositionInspector = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const client_id_1 = require("../../helpers/client-id");
 const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
 const browse_elements_1 = require("../../icons/browse-elements");
 const frame_1 = require("../../icons/frame");
@@ -123,9 +124,10 @@ const CompositionVisualControlsSection = ({ readOnlyStudio }) => {
         ] }));
 };
 const CompositionInspector = ({ composition, currentDefaultProps, readOnlyStudio, setDefaultProps }) => {
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     return (jsx_runtime_1.jsxs("div", { style: styles_1.scrollableContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [
             jsx_runtime_1.jsxs("div", { style: styles_1.inspectorOverviewSection, children: [
-                    jsx_runtime_1.jsx(CompositionInspectorHeader_1.CompositionInspectorHeader, {}), jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsx(CompositionMetadata_1.CompositionMetadata, { compositionId: composition.id, disabled: readOnlyStudio, stack: composition.stack })
+                    jsx_runtime_1.jsx(CompositionInspectorHeader_1.CompositionInspectorHeader, {}), jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsx(CompositionMetadata_1.CompositionMetadata, { compositionId: composition.id, disabled: readOnlyStudio || previewServerState.type !== 'connected', stack: composition.stack })
                 ] }), jsx_runtime_1.jsx(CompositionDefaultPropsSection, { composition: composition, currentDefaultProps: currentDefaultProps, readOnlyStudio: readOnlyStudio, setDefaultProps: setDefaultProps }), jsx_runtime_1.jsx(CompositionVisualControlsSection, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(CompositionActions, { readOnlyStudio: readOnlyStudio })
         ] }));
 };

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;
 }>;