@remotion/studio 4.0.507 → 4.0.509

package/dist/FastRefreshProvider.js

@@ -2,7 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FastRefreshProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
+const react_dom_1 = require("react-dom");
 const fast_refresh_context_1 = require("./fast-refresh-context");
 const FastRefreshProvider = ({ children }) => {
     const [fastRefreshes, setFastRefreshes] = (0, react_1.useState)(0);
@@ -11,15 +13,17 @@ const FastRefreshProvider = ({ children }) => {
         setManualRefreshes((i) => i + 1);
     }, []);
     (0, react_1.useEffect)(() => {
-        if (typeof __webpack_module__ !== 'undefined') {
-            if (__webpack_module__.hot) {
-                __webpack_module__.hot.addStatusHandler((status) => {
-                    if (status === 'idle') {
-                        setFastRefreshes((i) => i + 1);
-                    }
-                });
-            }
-        }
+        const onReactRefreshFinished = () => {
+            // Commit consumers and their layout effects before the browser paints
+            // the refreshed composition with stale node-path statuses.
+            (0, react_dom_1.flushSync)(() => {
+                setFastRefreshes((i) => i + 1);
+            });
+        };
+        window.addEventListener(studio_shared_1.REACT_REFRESH_FINISHED_EVENT, onReactRefreshFinished);
+        return () => {
+            window.removeEventListener(studio_shared_1.REACT_REFRESH_FINISHED_EVENT, onReactRefreshFinished);
+        };
     }, []);
     const value = (0, react_1.useMemo)(() => ({ fastRefreshes, manualRefreshes, increaseManualRefreshes }), [fastRefreshes, manualRefreshes, increaseManualRefreshes]);
     return (jsx_runtime_1.jsx(fast_refresh_context_1.FastRefreshContext.Provider, { value: value, children: children }));

package/dist/Studio.d.ts

@@ -1,4 +1,9 @@
 import React from 'react';
+declare global {
+    interface Window {
+        remotion_experimentalKeepAudioContextAlive: boolean | undefined;
+    }
+}
 export declare const Studio: React.FC<{
     readonly rootComponent: React.FC;
     readonly readOnly: boolean;

package/dist/Studio.js

@@ -16,8 +16,8 @@ const getServerDisconnectedDomElement = () => {
     return document.getElementById('server-disconnected-overlay');
 };
 const StudioInner = ({ rootComponent, readOnly }) => {
-    var _a, _b;
-    return (jsx_runtime_1.jsx(remotion_1.Internals.CompositionManagerProvider, { onlyRenderComposition: null, currentCompositionMetadata: null, initialCompositions: [], initialCanvasContent: null, children: jsx_runtime_1.jsx(remotion_1.Internals.RemotionRootContexts, { frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: (_a = window.remotion_logLevel) !== null && _a !== void 0 ? _a : 'info', numberOfAudioTags: window.remotion_numberOfAudioTags, audioLatencyHint: (_b = window.remotion_audioLatencyHint) !== null && _b !== void 0 ? _b : 'playback', previewSampleRate: window.remotion_previewSampleRate, children: jsx_runtime_1.jsx(use_static_files_1.StaticFilesProvider, { children: jsx_runtime_1.jsx(ResolveCompositionConfigInStudio_1.ResolveCompositionConfigInStudio, { children: jsx_runtime_1.jsxs(EditorContexts_1.EditorContexts, { children: [
+    var _a, _b, _c;
+    return (jsx_runtime_1.jsx(remotion_1.Internals.CompositionManagerProvider, { onlyRenderComposition: null, currentCompositionMetadata: null, initialCompositions: [], initialCanvasContent: null, children: jsx_runtime_1.jsx(remotion_1.Internals.RemotionRootContexts, { frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: (_a = window.remotion_logLevel) !== null && _a !== void 0 ? _a : 'info', numberOfAudioTags: window.remotion_numberOfAudioTags, audioLatencyHint: (_b = window.remotion_audioLatencyHint) !== null && _b !== void 0 ? _b : 'playback', previewSampleRate: window.remotion_previewSampleRate, _experimentalKeepAudioContextAlive: (_c = window.remotion_experimentalKeepAudioContextAlive) !== null && _c !== void 0 ? _c : false, children: jsx_runtime_1.jsx(use_static_files_1.StaticFilesProvider, { children: jsx_runtime_1.jsx(ResolveCompositionConfigInStudio_1.ResolveCompositionConfigInStudio, { children: jsx_runtime_1.jsxs(EditorContexts_1.EditorContexts, { children: [
                             jsx_runtime_1.jsx(Editor_1.Editor, { readOnlyStudio: readOnly, Root: rootComponent }), readOnly
                                 ? null
                                 : (0, react_dom_1.createPortal)(jsx_runtime_1.jsx(ServerDisconnected_1.ServerDisconnected, {}), getServerDisconnectedDomElement())] }) }) }) }) }));

package/dist/components/Canvas.js

@@ -15,6 +15,7 @@ const clipboard_images_1 = require("../helpers/clipboard-images");
 const clipboard_svg_1 = require("../helpers/clipboard-svg");
 const colors_1 = require("../helpers/colors");
 const get_asset_metadata_1 = require("../helpers/get-asset-metadata");
+const get_canvas_capture_import_1 = require("../helpers/get-canvas-capture-import");
 const get_effective_translation_1 = require("../helpers/get-effective-translation");
 const install_required_package_1 = require("../helpers/install-required-package");
 const open_in_editor_1 = require("../helpers/open-in-editor");
@@ -25,6 +26,7 @@ const canvas_ref_1 = require("../state/canvas-ref");
 const editor_guides_1 = require("../state/editor-guides");
 const editor_snapping_1 = require("../state/editor-snapping");
 const editor_zoom_gestures_1 = require("../state/editor-zoom-gestures");
+const modals_1 = require("../state/modals");
 const call_api_1 = require("./call-api");
 const composition_drop_preview_1 = require("./composition-drop-preview");
 const ConfirmationDialog_1 = require("./ConfirmationDialog");
@@ -125,6 +127,7 @@ const Canvas = ({ canvasContent, size }) => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
     const chooseSvgImportMode = (0, SvgImportDialog_1.useSvgImportDialog)();
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const areRulersVisible = (0, use_is_ruler_visible_1.useIsRulerVisible)();
     const { editorShowGuides } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
@@ -703,13 +706,15 @@ const Canvas = ({ canvasContent, size }) => {
             setCompositionDropPreview(null);
             return;
         }
-        if (!canDropAssets && !cannotAddSequence) {
+        const mayBeCanvasCapture = (0, drop_handler_data_1.isFileDragEvent)(event) && !window.remotion_isReadOnlyStudio;
+        if (!canDropAssets && !cannotAddSequence && !mayBeCanvasCapture) {
             setCompositionDropPreview(null);
             return;
         }
         event.preventDefault();
         if (event.dataTransfer) {
-            event.dataTransfer.dropEffect = canDropAssets ? 'copy' : 'none';
+            event.dataTransfer.dropEffect =
+                canDropAssets || mayBeCanvasCapture ? 'copy' : 'none';
         }
         if (!canDropAssets ||
             contentDimensions === null ||
@@ -797,12 +802,36 @@ const Canvas = ({ canvasContent, size }) => {
         setCompositionDropPreview(null);
     }, []);
     const onDrop = (0, react_1.useCallback)(async (event) => {
-        var _a;
-        var _b;
+        var _a, _b;
+        var _c, _d;
         setCompositionDropPreview(null);
         if (!(0, drop_handler_data_1.isSupportedDropEvent)(event) || !isDragEventInsideCanvas(event)) {
             return;
         }
+        if ((0, drop_handler_data_1.isFileDragEvent)(event) && !window.remotion_isReadOnlyStudio) {
+            event.preventDefault();
+            event.stopPropagation();
+            const files = Array.from((_c = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) !== null && _c !== void 0 ? _c : []);
+            if (files.length === 1) {
+                setIsAddingAsset(true);
+                try {
+                    const canvasCapture = await (0, get_canvas_capture_import_1.getCanvasCaptureImport)(files[0]);
+                    if (canvasCapture !== null) {
+                        setSelectedModal({
+                            type: 'new-comp',
+                            canvasCapture,
+                            folderName: null,
+                            parentName: null,
+                            stack: null,
+                        });
+                        return;
+                    }
+                }
+                finally {
+                    setIsAddingAsset(false);
+                }
+            }
+        }
         if (cannotAddSequence) {
             event.preventDefault();
             event.stopPropagation();
@@ -824,7 +853,7 @@ const Canvas = ({ canvasContent, size }) => {
         event.stopPropagation();
         setIsAddingAsset(true);
         try {
-            const metadata = studio_protocol_1.StudioProtocolInternals.getDragPreviewMetadata((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []);
+            const metadata = studio_protocol_1.StudioProtocolInternals.getDragPreviewMetadata((_d = (_b = event.dataTransfer) === null || _b === void 0 ? void 0 : _b.types) !== null && _d !== void 0 ? _d : []);
             const isComposition = (metadata === null || metadata === void 0 ? void 0 : metadata.type) === 'composition';
             let dropPosition = getDropPosition({
                 addFitPadding,
@@ -887,6 +916,7 @@ const Canvas = ({ canvasContent, size }) => {
         editorSnapping,
         previewSize,
         size,
+        setSelectedModal,
     ]);
     const onPaste = (0, react_1.useCallback)(async (event) => {
         const { activeElement } = document;

package/dist/components/CodingAgentIcon.d.ts

@@ -1,4 +1,6 @@
+import type { DefaultCodingAgent } from '@remotion/renderer';
 import React from 'react';
 export declare const CodingAgentIcon: React.FC<{
-    readonly iconDataUrl: string | null;
+    readonly codingAgentId: DefaultCodingAgent | null;
+    readonly size: number;
 }>;

package/dist/components/CodingAgentIcon.js

@@ -3,15 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CodingAgentIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const apps_1 = require("../icons/apps");
-const iconStyle = {
-    flexShrink: 0,
-    height: 18,
-    width: 18,
-};
-const CodingAgentIcon = ({ iconDataUrl }) => {
-    if (iconDataUrl === null) {
-        return jsx_runtime_1.jsx(apps_1.AppsIcon, { height: 18, width: 18 });
+const CodingAgentIcon = ({ codingAgentId, size }) => {
+    if (codingAgentId === null) {
+        return jsx_runtime_1.jsx(apps_1.AppsIcon, { height: size, width: size });
     }
-    return (jsx_runtime_1.jsx("img", { alt: "", "aria-hidden": true, draggable: false, src: iconDataUrl, style: iconStyle }));
+    return (jsx_runtime_1.jsx("img", { alt: "", "aria-hidden": true, "data-coding-agent-icon": codingAgentId, draggable: false, src: `/api/app-icon/coding-agent/${codingAgentId}.png`, style: { flexShrink: 0, height: size, width: size } }));
 };
 exports.CodingAgentIcon = CodingAgentIcon;

package/dist/components/ColorPicker/AlphaSlider.js

@@ -59,9 +59,9 @@ const AlphaSlider = ({ hue, saturation, value, alpha, onChange, onChangeComplete
         e.preventDefault();
         updateFromEvent(e.clientX, false);
         let lastClientX = e.clientX;
-        (0, pointer_session_1.startPointerSession)({
+        (0, pointer_session_1.startCapturedPointerSession)({
             event: e.nativeEvent,
-            target: e.currentTarget,
+            captureTarget: e.currentTarget,
             onMove: (ev) => {
                 lastClientX = ev.clientX;
                 updateFromEvent(ev.clientX, false);

package/dist/components/ColorPicker/HueSlider.js

@@ -41,9 +41,9 @@ const HueSlider = ({ hue, onChange, onChangeComplete }) => {
         e.preventDefault();
         updateFromEvent(e.clientX, false);
         let lastClientX = e.clientX;
-        (0, pointer_session_1.startPointerSession)({
+        (0, pointer_session_1.startCapturedPointerSession)({
             event: e.nativeEvent,
-            target: e.currentTarget,
+            captureTarget: e.currentTarget,
             onMove: (ev) => {
                 lastClientX = ev.clientX;
                 updateFromEvent(ev.clientX, false);

package/dist/components/ColorPicker/SaturationValueArea.js

@@ -55,9 +55,9 @@ const SaturationValueArea = ({ hue, saturation, value, onChange, onChangeComplet
         e.preventDefault();
         updateFromEvent(e.clientX, e.clientY, false);
         let lastPosition = { clientX: e.clientX, clientY: e.clientY };
-        (0, pointer_session_1.startPointerSession)({
+        (0, pointer_session_1.startCapturedPointerSession)({
             event: e.nativeEvent,
-            target: e.currentTarget,
+            captureTarget: e.currentTarget,
             onMove: (ev) => {
                 lastPosition = { clientX: ev.clientX, clientY: ev.clientY };
                 updateFromEvent(ev.clientX, ev.clientY, false);

package/dist/components/ConfigureDefaultEditorModal.js

@@ -125,7 +125,7 @@ const DefaultEditorSettings = () => {
                 id: codingAgent.id,
                 keyHint: null,
                 label: (jsx_runtime_1.jsxs("span", { style: appLabel, children: [
-                        jsx_runtime_1.jsx(CodingAgentIcon_1.CodingAgentIcon, { iconDataUrl: codingAgent.iconDataUrl }), jsx_runtime_1.jsx("span", { style: appName, children: codingAgent.name })
+                        jsx_runtime_1.jsx(CodingAgentIcon_1.CodingAgentIcon, { codingAgentId: codingAgent.id, size: 18 }), jsx_runtime_1.jsx("span", { style: appName, children: codingAgent.name })
                     ] })),
                 leftItem: selectedCodingAgent === codingAgent.id ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
                 onClick: () => {

package/dist/components/ContextMenu.d.ts

@@ -14,5 +14,6 @@ export declare const ContextMenu: React.ForwardRefExoticComponent<ContextMenuPro
 export declare const ContextMenuForTarget: React.FC<{
     readonly triggerRef: React.RefObject<HTMLElement | SVGElement | null>;
     readonly getItems: ContextMenuItemsFactory;
+    readonly onOpenChange?: (open: boolean) => void;
 }>;
 export {};

package/dist/components/ContextMenu.js

@@ -236,15 +236,26 @@ exports.ContextMenu = react_1.default.forwardRef(({ children, getItems, style =
             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.
@@ -260,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);
@@ -277,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) {

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/EditorGuides/Guide.js

@@ -115,9 +115,9 @@ const GuideComp = ({ guide, canvasDimensions, scale }) => {
         };
         shouldCreateGuideRef.current = false;
         setDraggingGuideId(() => guide.id);
-        (0, pointer_session_1.startPointerSession)({
+        (0, pointer_session_1.startCapturedPointerSession)({
             event: e.nativeEvent,
-            target: e.currentTarget,
+            captureTarget: e.currentTarget,
             onMove: (moveEvent) => {
                 var _a;
                 updateHasMovedGuide(moveEvent.clientX, moveEvent.clientY);

package/dist/components/EditorRuler/index.js

@@ -168,9 +168,9 @@ const EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerR
         };
     }, [draggingGuideId, moveGuidePointerRef, onMouseMove]);
     const onPointerSessionStart = (0, react_1.useCallback)((event, guideId) => {
-        (0, pointer_session_1.startPointerSession)({
+        (0, pointer_session_1.startCapturedPointerSession)({
             event: event.nativeEvent,
-            target: event.currentTarget,
+            captureTarget: event.currentTarget,
             onMove: (moveEvent) => onMouseMove(moveEvent, guideId),
             onEnd: () => finishGuideInteraction(guideId),
         });

package/dist/components/ExplorerPanel.js

@@ -4,6 +4,7 @@ exports.ExplorerPanel = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
+const use_asset_drag_events_1 = require("../helpers/use-asset-drag-events");
 const AssetSelector_1 = require("./AssetSelector");
 const CompositionSelector_1 = require("./CompositionSelector");
 const CompSelectorRef_1 = require("./CompSelectorRef");
@@ -33,6 +34,7 @@ const persistSelectedOptionsSidebarPanel = (panel) => {
 };
 const ExplorerPanel = ({ readOnlyStudio }) => {
     const [panel, setPanel] = (0, react_1.useState)(() => getSelectedPanel());
+    const assetTabFocusTimer = (0, react_1.useRef)(null);
     const onCompositionsSelected = (0, react_1.useCallback)(() => {
         setPanel('compositions');
         persistSelectedOptionsSidebarPanel('compositions');
@@ -41,6 +43,22 @@ const ExplorerPanel = ({ readOnlyStudio }) => {
         setPanel('assets');
         persistSelectedOptionsSidebarPanel('assets');
     }, []);
+    const onAssetDragEnter = (0, react_1.useCallback)((event) => {
+        if ((0, use_asset_drag_events_1.isAssetUploadDragEvent)(event) &&
+            assetTabFocusTimer.current === null) {
+            assetTabFocusTimer.current = window.setTimeout(() => {
+                onAssetsSelected();
+                assetTabFocusTimer.current = null;
+            }, 500);
+        }
+    }, [onAssetsSelected]);
+    const onAssetDragLeave = (0, react_1.useCallback)((event) => {
+        if ((0, use_asset_drag_events_1.isAssetUploadDragEvent)(event) &&
+            assetTabFocusTimer.current !== null) {
+            window.clearTimeout(assetTabFocusTimer.current);
+            assetTabFocusTimer.current = null;
+        }
+    }, []);
     (0, react_1.useImperativeHandle)(ExplorerPanelRef_1.explorerSidebarTabs, () => {
         return {
             getSelectedPanel: () => panel,
@@ -60,7 +78,7 @@ const ExplorerPanel = ({ readOnlyStudio }) => {
     }, []);
     return (jsx_runtime_1.jsx(CompSelectorRef_1.CompSelectorRef, { children: jsx_runtime_1.jsxs("div", { style: container, className: "css-reset", onPointerDown: onPointerDown, children: [
                 jsx_runtime_1.jsx("div", { style: tabsContainer, children: jsx_runtime_1.jsxs(Tabs_1.Tabs, { children: [
-                            jsx_runtime_1.jsx(Tabs_1.Tab, { selected: panel === 'compositions', onClick: onCompositionsSelected, children: "Compositions" }), jsx_runtime_1.jsx(Tabs_1.Tab, { selected: panel === 'assets', onClick: onAssetsSelected, children: "Assets" })
+                            jsx_runtime_1.jsx(Tabs_1.Tab, { selected: panel === 'compositions', onClick: onCompositionsSelected, children: "Compositions" }), jsx_runtime_1.jsx(Tabs_1.Tab, { selected: panel === 'assets', onClick: onAssetsSelected, onDragEnter: onAssetDragEnter, onDragLeave: onAssetDragLeave, children: "Assets" })
                         ] }) }), panel === 'compositions' ? (jsx_runtime_1.jsx(CompositionSelector_1.CompositionSelector, {})) : (jsx_runtime_1.jsx(AssetSelector_1.AssetSelector, { readOnlyStudio: readOnlyStudio }))] }) }));
 };
 exports.ExplorerPanel = ExplorerPanel;

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

@@ -64,6 +64,6 @@ const InspectorLocationCopy = ({ children, location, name, openInEditorLocation
                     opacity: showAction ? 1 : 0,
                     pointerEvents: showAction ? 'auto' : 'none',
                 }, children: [
-                    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] }));
+                    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

@@ -4,4 +4,5 @@ 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

@@ -13,6 +13,7 @@ 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',
@@ -40,13 +41,14 @@ const mainButtonBase = {
     whiteSpace: 'nowrap',
 };
 const editorButtonIconSize = 18;
-const InspectorOpenInEditor = ({ contextForAgents = null, label, location }) => {
-    var _a;
+const InspectorOpenInEditor = ({ contextForAgents = null, label, location, locationType }) => {
+    var _a, _b;
     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);
@@ -62,6 +64,7 @@ const InspectorOpenInEditor = ({ contextForAgents = null, label, location }) =>
         }
     }, [location]);
     const preferredEditorId = (0, use_default_editor_info_1.getPreferredEditorId)(editorInfo);
+    const preferredEditor = editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors.find((editor) => editor.id === preferredEditorId);
     const openWithCodingAgent = (0, react_1.useCallback)(async (codingAgentId, codingAgentName) => {
         try {
             const response = await (0, open_in_editor_1.openInCodingAgent)(codingAgentId, codingAgentId === 'copilot' ? null : contextForAgents);
@@ -73,12 +76,20 @@ const InspectorOpenInEditor = ({ contextForAgents = null, label, location }) =>
             (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 editorName = (_b = (_a = window.remotion_editorName) !== null && _a !== void 0 ? _a : preferredEditor === null || preferredEditor === void 0 ? void 0 : preferredEditor.nameWithType) !== null && _b !== void 0 ? _b : 'default editor';
+    const canOpenDefault = location !== null &&
+        (window.remotion_editorName !== null || preferredEditorId !== null);
     const onOpenDefault = (0, react_1.useCallback)((event) => {
         event.stopPropagation();
-        openWithEditor(null).catch(() => undefined);
-    }, [openWithEditor]);
+        openWithEditor(window.remotion_editorName === null ? preferredEditorId : null).catch(() => undefined);
+    }, [openWithEditor, preferredEditorId]);
+    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 {
@@ -113,6 +124,9 @@ const InspectorOpenInEditor = ({ contextForAgents = null, label, location }) =>
             editorInfo,
             excludeCodingAgentId: null,
             excludeEditorId: preferredEditorId,
+            fileManagerDisabled: !(location === null || location === void 0 ? void 0 : location.source),
+            folder: locationType === 'folder',
+            location,
             onConfigureApps: () => {
                 var _a;
                 var _b;
@@ -128,11 +142,34 @@ const InspectorOpenInEditor = ({ contextForAgents = null, label, location }) =>
             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);
+                });
+            },
+            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);
+                });
+            },
         });
     }, [
         codingAgentInfo,
         editorInfo,
         location,
+        locationType,
         openWithCodingAgent,
         openWithEditor,
         preferredEditorId,
@@ -141,9 +178,16 @@ const InspectorOpenInEditor = ({ contextForAgents = null, 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 app", 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',