@remotion/studio 4.0.500 → 4.0.502

package/dist/esm/renderEntry.mjs

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

package/dist/helpers/browser-studio-operations.d.ts

@@ -0,0 +1,3 @@
+import type { BrowserStudioOperations } from '@remotion/studio-shared';
+export declare const BROWSER_STUDIO_OPERATIONS_READY_EVENT = "remotion-browser-studio-operations-ready";
+export declare const getBrowserStudioOperations: () => BrowserStudioOperations | null;

package/dist/helpers/browser-studio-operations.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getBrowserStudioOperations = exports.BROWSER_STUDIO_OPERATIONS_READY_EVENT = void 0;
+// Browser Studio may be hosted by a different studio-shared version, so this
+// handshake intentionally has no shared runtime import.
+exports.BROWSER_STUDIO_OPERATIONS_READY_EVENT = 'remotion-browser-studio-operations-ready';
+const getBrowserStudioOperations = () => {
+    var _a;
+    if (typeof window === 'undefined') {
+        return null;
+    }
+    return (_a = window.remotion_browserStudio) !== null && _a !== void 0 ? _a : null;
+};
+exports.getBrowserStudioOperations = getBrowserStudioOperations;

package/dist/helpers/client-id.d.ts

@@ -8,6 +8,5 @@ type Context = {
 export declare const StudioServerConnectionCtx: React.Context<Context>;
 export declare const PreviewServerConnection: React.FC<{
     readonly children: React.ReactNode;
-    readonly readOnlyStudio: boolean;
 }>;
 export {};

package/dist/helpers/client-id.js

@@ -53,10 +53,14 @@ exports.StudioServerConnectionCtx = react_1.default.createContext({
         throw new Error('Context not initalized');
     },
 });
-const PreviewServerConnection = ({ children, readOnlyStudio }) => {
+const PreviewServerConnection = ({ children }) => {
     const listeners = (0, react_1.useRef)([]);
+    const latestUndoRedoEvent = (0, react_1.useRef)(undefined);
     const subscribeToEvent = (0, react_1.useCallback)((type, listener) => {
         listeners.current.push({ type, listener });
+        if (type === 'undo-redo-stack-changed' && latestUndoRedoEvent.current) {
+            listener(latestUndoRedoEvent.current);
+        }
         return () => {
             listeners.current = listeners.current.filter((l) => l.type !== type || l.listener !== listener);
         };
@@ -65,9 +69,6 @@ const PreviewServerConnection = ({ children, readOnlyStudio }) => {
         type: 'init',
     });
     (0, react_1.useEffect)(() => {
-        if (readOnlyStudio) {
-            return;
-        }
         const handleEvent = (newEvent) => {
             var _a, _b;
             if (newEvent.type === 'new-input-props' ||
@@ -76,16 +77,20 @@ const PreviewServerConnection = ({ children, readOnlyStudio }) => {
                 (0, url_state_1.reloadUrl)();
             }
             if (newEvent.type === 'init') {
+                latestUndoRedoEvent.current = {
+                    type: 'undo-redo-stack-changed',
+                    undoFile: newEvent.undoFile,
+                    redoFile: newEvent.redoFile,
+                };
                 listeners.current.forEach((l) => {
                     if (l.type === 'undo-redo-stack-changed') {
-                        l.listener({
-                            type: 'undo-redo-stack-changed',
-                            undoFile: newEvent.undoFile,
-                            redoFile: newEvent.redoFile,
-                        });
+                        l.listener(latestUndoRedoEvent.current);
                     }
                 });
             }
+            if (newEvent.type === 'undo-redo-stack-changed') {
+                latestUndoRedoEvent.current = newEvent;
+            }
             if (newEvent.type === 'render-queue-updated') {
                 (_a = context_1.renderJobsRef.current) === null || _a === void 0 ? void 0 : _a.updateRenderJobs(newEvent.queue);
                 for (const job of newEvent.queue) {
@@ -122,7 +127,7 @@ const PreviewServerConnection = ({ children, readOnlyStudio }) => {
             unsubscribeFromEvents();
             unsubscribeFromConnectionState();
         };
-    }, [readOnlyStudio]);
+    }, []);
     const context = (0, react_1.useMemo)(() => {
         return {
             previewServerState: state,

package/dist/helpers/download-blob.d.ts

@@ -0,0 +1 @@
+export declare const downloadBlob: (blob: Blob, filename: string) => void;

package/dist/helpers/download-blob.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.downloadBlob = void 0;
+const downloadBlob = (blob, filename) => {
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    const cleanFilename = filename.includes('/')
+        ? filename.substring(filename.lastIndexOf('/') + 1)
+        : filename;
+    a.download = cleanFilename;
+    a.click();
+    URL.revokeObjectURL(url);
+};
+exports.downloadBlob = downloadBlob;

package/dist/helpers/inject-css.js

@@ -83,20 +83,22 @@ const makeDefaultGlobalCSS = () => {
 
   input:focus,
   textarea:focus,
-  button:focus:not(.__remotion_input_dragger):not(.__remotion_color_swatch),
+  button:focus:not(.__remotion_input_dragger):not(.__remotion_color_swatch):not(.__remotion-inspector-section-title),
   a:focus {
 	    outline: none;
 	    box-shadow: ${colors_1.FOCUS_BOX_SHADOW};
 	  }
 
   .__remotion-composition-selector-item:focus,
-  .__remotion-inspector-inline-action:focus {
+  .__remotion-inspector-inline-action:focus,
+  .__remotion-inspector-section-title:focus {
     outline: none;
     box-shadow: none;
   }
 
   .__remotion-composition-selector-item:focus-visible,
-  .__remotion-inspector-inline-action:focus-visible {
+  .__remotion-inspector-inline-action:focus-visible,
+  .__remotion-inspector-section-title:focus-visible {
     box-shadow: ${colors_1.FOCUS_BOX_SHADOW};
   }
 

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.openCompositionComponentInEditor = exports.preloadCompositionComponentInfo = exports.loadCompositionComponentInfo = exports.useCachedCompositionComponentInfo = exports.getCachedCompositionComponentInfo = exports.subscribeToCompositionComponentInfo = exports.openOriginalPositionInEditorAtProperty = exports.openOriginalPositionInEditor = exports.openInEditor = void 0;
 const react_1 = require("react");
 const call_api_1 = require("../components/call-api");
+const browser_studio_operations_1 = require("./browser-studio-operations");
 const openInEditor = (stack) => {
     const { originalFileName, originalLineNumber, originalColumnNumber, originalFunctionName, originalScriptCode, } = stack;
     return (0, call_api_1.callApi)('/api/open-in-editor', {
@@ -27,12 +28,16 @@ const openOriginalPositionInEditor = async (originalPosition) => {
 };
 exports.openOriginalPositionInEditor = openOriginalPositionInEditor;
 const openOriginalPositionInEditorAtProperty = async ({ originalPosition, property, }) => {
-    const position = await (0, call_api_1.callApi)('/api/find-in-file', {
+    const request = {
         fileName: originalPosition.source,
         lineNumber: originalPosition.line,
         columnNumber: originalPosition.column,
         search: property,
-    });
+    };
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    const position = browserStudioOperations
+        ? await browserStudioOperations.findInFile(request)
+        : await (0, call_api_1.callApi)('/api/find-in-file', request);
     await (0, exports.openOriginalPositionInEditor)({
         source: originalPosition.source,
         line: position.lineNumber,
@@ -64,7 +69,7 @@ const getCachedCompositionComponentInfo = ({ compositionFile, compositionId, })
 };
 exports.getCachedCompositionComponentInfo = getCachedCompositionComponentInfo;
 const useCachedCompositionComponentInfo = ({ compositionFile, compositionId, }) => {
-    return (0, react_1.useSyncExternalStore)(exports.subscribeToCompositionComponentInfo, () => {
+    const result = (0, react_1.useSyncExternalStore)(exports.subscribeToCompositionComponentInfo, () => {
         if (compositionFile === null || compositionId === null) {
             return null;
         }
@@ -73,6 +78,18 @@ const useCachedCompositionComponentInfo = ({ compositionFile, compositionId, })
             compositionId,
         });
     }, () => null);
+    (0, react_1.useEffect)(() => {
+        if (!(0, browser_studio_operations_1.getBrowserStudioOperations)() ||
+            compositionFile === null ||
+            compositionId === null) {
+            return;
+        }
+        (0, exports.preloadCompositionComponentInfo)({
+            compositionFile,
+            compositionId,
+        });
+    }, [compositionFile, compositionId]);
+    return result;
 };
 exports.useCachedCompositionComponentInfo = useCachedCompositionComponentInfo;
 const loadCompositionComponentInfo = async ({ compositionFile, compositionId, }) => {
@@ -85,10 +102,14 @@ const loadCompositionComponentInfo = async ({ compositionFile, compositionId, })
         return existing;
     }
     const promise = (async () => {
-        const body = await (0, call_api_1.callApi)('/api/composition-component-info', {
+        const request = {
             compositionFile,
             compositionId,
-        });
+        };
+        const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+        const body = browserStudioOperations
+            ? await browserStudioOperations.getCompositionComponentInfo(request)
+            : await (0, call_api_1.callApi)('/api/composition-component-info', request);
         const result = {
             location: body.location,
             canAddSequence: body.canAddSequence,

package/dist/helpers/preview-server-events.js

@@ -3,9 +3,13 @@
 /// <reference lib="dom.iterable" />
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.subscribeToPreviewServerConnectionState = exports.subscribeToPreviewServerEvents = exports.ensurePreviewServerEventSource = void 0;
+const browser_studio_operations_1 = require("./browser-studio-operations");
 let source = null;
+let unsubscribeFromBrowserStudio = null;
+let browserStudioReadyListenerInstalled = false;
 let connectionState = { type: 'init' };
 let lastInitEvent = null;
+let pendingHmrEvent = null;
 const messageListeners = new Set();
 const connectionStateListeners = new Set();
 const notifyConnectionState = () => {
@@ -14,10 +18,37 @@ const notifyConnectionState = () => {
     }
 };
 const dispatch = (event) => {
+    if (event.type === 'init') {
+        lastInitEvent = event;
+        connectionState = {
+            type: 'connected',
+            clientId: event.clientId,
+        };
+        notifyConnectionState();
+    }
+    if (event.type === 'hmr' && messageListeners.size === 0) {
+        pendingHmrEvent = event;
+    }
     for (const listener of messageListeners) {
         listener(event);
     }
 };
+const connectToBrowserStudio = () => {
+    if (unsubscribeFromBrowserStudio) {
+        return true;
+    }
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    if (!browserStudioOperations) {
+        return false;
+    }
+    if (source) {
+        source.close();
+        source = null;
+    }
+    unsubscribeFromBrowserStudio =
+        browserStudioOperations.subscribeToEvent(dispatch);
+    return true;
+};
 const openEventSource = () => {
     if (source) {
         return;
@@ -26,14 +57,6 @@ const openEventSource = () => {
     source.addEventListener('message', (event) => {
         try {
             const newEvent = JSON.parse(event.data);
-            if (newEvent.type === 'init') {
-                lastInitEvent = newEvent;
-                connectionState = {
-                    type: 'connected',
-                    clientId: newEvent.clientId,
-                };
-                notifyConnectionState();
-            }
             dispatch(newEvent);
         }
         catch (_a) {
@@ -53,7 +76,17 @@ const openEventSource = () => {
     });
 };
 const ensurePreviewServerEventSource = () => {
-    if (typeof window === 'undefined' || typeof EventSource === 'undefined') {
+    if (typeof window === 'undefined') {
+        return;
+    }
+    if (!browserStudioReadyListenerInstalled) {
+        browserStudioReadyListenerInstalled = true;
+        window.addEventListener(browser_studio_operations_1.BROWSER_STUDIO_OPERATIONS_READY_EVENT, connectToBrowserStudio);
+    }
+    if (connectToBrowserStudio()) {
+        return;
+    }
+    if (typeof EventSource === 'undefined') {
         return;
     }
     openEventSource();
@@ -65,6 +98,10 @@ const subscribeToPreviewServerEvents = (listener) => {
     if (lastInitEvent && connectionState.type === 'connected') {
         listener(lastInitEvent);
     }
+    if (pendingHmrEvent) {
+        listener(pendingHmrEvent);
+        pendingHmrEvent = null;
+    }
     return () => {
         messageListeners.delete(listener);
     };

package/dist/helpers/use-create-composition.js

@@ -2,9 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCreateComposition = exports.getUniqueCompositionName = void 0;
 const react_1 = require("react");
-const remotion_1 = require("remotion");
+const InitialCompositionLoader_1 = require("../components/InitialCompositionLoader");
 const actions_1 = require("../components/RenderQueue/actions");
-const url_state_1 = require("./url-state");
 const validate_new_comp_data_1 = require("./validate-new-comp-data");
 const toPascalCase = (value) => {
     var _a;
@@ -48,7 +47,7 @@ const getUniqueCompositionName = (compositions) => {
 };
 exports.getUniqueCompositionName = getUniqueCompositionName;
 const useCreateComposition = ({ compositions, durationInFrames, folderName, newId, parentName, selectedFrameRate, size, }) => {
-    const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
+    const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
     const componentName = (0, react_1.useMemo)(() => toPascalCase(newId), [newId]);
     const nameValidationMessage = (0, react_1.useMemo)(() => {
         return (0, validate_new_comp_data_1.validateCompositionName)(newId, compositions);
@@ -94,11 +93,14 @@ const useCreateComposition = ({ compositions, durationInFrames, folderName, newI
         });
         if (result.success) {
             await waitForComposition(newId);
-            setCanvasContent({ type: 'composition', compositionId: newId });
-            (0, url_state_1.pushUrl)(`/${newId}`);
+            selectComposition({
+                id: newId,
+                folderName,
+                parentFolderName: parentName,
+            }, true);
         }
         return result;
-    }, [codemod, newId, setCanvasContent]);
+    }, [codemod, folderName, newId, parentName, selectComposition]);
     return {
         codemod,
         createComposition,

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

@@ -24,9 +24,11 @@ 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 sidebar_1 = require("../state/sidebar");
+const browser_studio_operations_1 = require("./browser-studio-operations");
 const check_fullscreen_support_1 = require("./check-fullscreen-support");
 const client_id_1 = require("./client-id");
 const colors_1 = require("./colors");
+const download_blob_1 = require("./download-blob");
 const get_file_manager_name_1 = require("./get-file-manager-name");
 const get_git_menu_item_1 = require("./get-git-menu-item");
 const mobile_layout_1 = require("./mobile-layout");
@@ -50,6 +52,8 @@ const iconPath = {
 const ICON_SIZE = 16;
 const getFileMenu = ({ readOnlyStudio, closeMenu, previewServerState, setSelectedModal, }) => {
     const fileManagerName = (0, get_file_manager_name_1.getFileManagerName)(window.remotion_fileSystemPlatform);
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    const downloadProject = browserStudioOperations === null || browserStudioOperations === void 0 ? void 0 : browserStudioOperations.downloadProject;
     const items = [
         readOnlyStudio
             ? null
@@ -132,6 +136,29 @@ const getFileMenu = ({ readOnlyStudio, closeMenu, previewServerState, setSelecte
             subMenu: null,
             quickSwitcherLabel: 'Render on web...',
         },
+        downloadProject
+            ? {
+                id: 'download-project',
+                value: 'download-project',
+                label: 'Download project',
+                onClick: async () => {
+                    closeMenu();
+                    try {
+                        const { data, fileName } = await downloadProject();
+                        const arrayBuffer = data.buffer.slice(data.byteOffset, data.byteOffset + data.byteLength);
+                        (0, download_blob_1.downloadBlob)(new Blob([arrayBuffer], { type: 'application/zip' }), fileName);
+                    }
+                    catch (error) {
+                        (0, NotificationCenter_1.showNotification)(`Could not download project: ${error instanceof Error ? error.message : String(error)}`, 2000);
+                    }
+                },
+                type: 'item',
+                keyHint: null,
+                leftItem: null,
+                subMenu: null,
+                quickSwitcherLabel: 'Download project',
+            }
+            : null,
         !readOnlyStudio
             ? {
                 type: 'divider',
@@ -582,6 +609,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                                 mode: 'compositions',
                                 invocationTimestamp: Date.now(),
                                 assetSelection: null,
+                                compositionSelection: null,
                             });
                         },
                         type: 'item',
@@ -771,6 +799,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                                 mode: 'docs',
                                 invocationTimestamp: Date.now(),
                                 assetSelection: null,
+                                compositionSelection: null,
                             });
                         },
                         keyHint: '?',

package/dist/hot-middleware-client/client.js

@@ -107,9 +107,9 @@ const enableHotMiddleware = () => {
     window.__remotion_processHmrEvent = (hmrEvent) => {
         processMessage(hmrEvent);
     };
-    // Connect to /events immediately so HMR works before React mounts.
-    // PreviewServerConnection reuses the same EventSource via preview-server-events.
-    if (typeof window !== 'undefined' && typeof EventSource !== 'undefined') {
+    // Connect immediately so HMR works before React mounts. Browser Studio and
+    // the preview server share the same transport-neutral event subscription.
+    if (typeof window !== 'undefined') {
         if (!unsubscribeFromPreviewServerEvents) {
             unsubscribeFromPreviewServerEvents = (0, preview_server_events_1.subscribeToPreviewServerEvents)((event) => {
                 if (event.type === 'hmr') {

package/dist/icons/border-radius.d.ts

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

package/dist/icons/border-radius.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BorderRadiusIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const BorderRadiusIcon = ({ color, ...props }) => {
+    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 16 16", fill: "none", ...props, children: jsx_runtime_1.jsx("path", { d: "M2.5 3.5H6.5C10.4 3.5 12.5 5.6 12.5 9.5V13.5", stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2" }) }));
+};
+exports.BorderRadiusIcon = BorderRadiusIcon;

package/dist/icons/fullscreen.d.ts

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

package/dist/icons/fullscreen.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FullscreenIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const FullscreenIcon = ({ color, ...props }) => (jsx_runtime_1.jsx("svg", { viewBox: "0 0 448 512", ...props, children: jsx_runtime_1.jsx("path", { fill: color, d: "M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z" }) }));
+exports.FullscreenIcon = FullscreenIcon;

package/dist/icons/upload.d.ts

@@ -0,0 +1,4 @@
+import type { SVGProps } from 'react';
+export declare const UploadIcon: React.FC<SVGProps<SVGSVGElement> & {
+    readonly color: string;
+}>;

package/dist/icons/upload.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UploadIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const UploadIcon = ({ color, ...props }) => {
+    return (jsx_runtime_1.jsx("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 640", children: jsx_runtime_1.jsx("path", { fill: color, d: "M192 96L320 96L320 192C320 227.3 348.7 256 384 256L480 256L480 512C480 529.7 465.7 544 448 544L192 544C174.3 544 160 529.7 160 512L160 128C160 110.3 174.3 96 192 96zM352 109.3L466.7 224L384 224C366.3 224 352 209.7 352 192L352 109.3zM192 64C156.7 64 128 92.7 128 128L128 512C128 547.3 156.7 576 192 576L448 576C483.3 576 512 547.3 512 512L512 250.5C512 233.5 505.3 217.2 493.3 205.2L370.7 82.7C358.7 70.7 342.5 64 325.5 64L192 64zM304 488C304 496.8 311.2 504 320 504C328.8 504 336 496.8 336 488L336 432L392 432C400.8 432 408 424.8 408 416C408 407.2 400.8 400 392 400L336 400L336 344C336 335.2 328.8 328 320 328C311.2 328 304 335.2 304 344L304 400L248 400C239.2 400 232 407.2 232 416C232 424.8 239.2 432 248 432L304 432L304 488z" }) }));
+};
+exports.UploadIcon = UploadIcon;

package/dist/previewEntry.js

@@ -45,5 +45,5 @@ const renderToDOM = (content) => {
 };
 renderToDOM(jsx_runtime_1.jsx(NoRegisterRoot_1.NoRegisterRoot, {}));
 remotion_1.Internals.waitForRoot((NewRoot) => {
-    renderToDOM(jsx_runtime_1.jsx(Studio_1.Studio, { readOnly: false, rootComponent: NewRoot }));
+    renderToDOM(jsx_runtime_1.jsx(Studio_1.Studio, { readOnly: window.remotion_isReadOnlyStudio, rootComponent: NewRoot }));
 });

package/dist/state/modals.d.ts

@@ -162,8 +162,13 @@ export type ModalState = {
     invocationTimestamp: number;
     assetSelection: {
         initialQuery: string;
+        onSelectFile: () => void;
         onSelected: (asset: StaticFile) => void;
     } | null;
+    compositionSelection: {
+        excludeCompositionId: string;
+        onSelected: (composition: _InternalTypes['AnyComposition']) => void;
+    } | null;
 } | AddEffectModalState | ConfirmationDialogState | SvgImportDialogState;
 export type ModalContextType = {
     selectedModal: ModalState | null;

package/dist/state/timeline-sequence-hover.d.ts

@@ -0,0 +1,17 @@
+import type { Dispatch, SetStateAction } from 'react';
+import type { SequenceNodePathInfo } from '../helpers/get-timeline-sequence-sort-key';
+export type TimelineSequenceHover = {
+    readonly key: string;
+    readonly source: 'canvas' | 'timeline';
+};
+type TimelineSequenceHoverState = {
+    readonly hoveredSequence: TimelineSequenceHover | null;
+    readonly setHoveredSequence: Dispatch<SetStateAction<TimelineSequenceHover | null>>;
+};
+export declare const TimelineSequenceHoverContext: import("react").Context<TimelineSequenceHoverState>;
+export declare const useTimelineSequenceHover: (nodePathInfo: SequenceNodePathInfo | null) => {
+    hovered: boolean;
+    onPointerEnter: () => void;
+    onPointerLeave: () => void;
+};
+export {};

package/dist/state/timeline-sequence-hover.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTimelineSequenceHover = exports.TimelineSequenceHoverContext = void 0;
+const react_1 = require("react");
+const timeline_node_path_key_1 = require("../helpers/timeline-node-path-key");
+exports.TimelineSequenceHoverContext = (0, react_1.createContext)({
+    hoveredSequence: null,
+    setHoveredSequence: () => undefined,
+});
+const useTimelineSequenceHover = (nodePathInfo) => {
+    const { hoveredSequence, setHoveredSequence } = (0, react_1.useContext)(exports.TimelineSequenceHoverContext);
+    const sequenceKey = (0, react_1.useMemo)(() => nodePathInfo === null
+        ? null
+        : (0, timeline_node_path_key_1.timelineNodePathInfoToKey)({ ...nodePathInfo, auxiliaryKeys: [] }), [nodePathInfo]);
+    const onPointerEnter = (0, react_1.useCallback)(() => {
+        if (sequenceKey === null) {
+            return;
+        }
+        setHoveredSequence({ key: sequenceKey, source: 'timeline' });
+    }, [sequenceKey, setHoveredSequence]);
+    const onPointerLeave = (0, react_1.useCallback)(() => {
+        setHoveredSequence((currentHover) => {
+            if ((currentHover === null || currentHover === void 0 ? void 0 : currentHover.source) !== 'timeline' ||
+                currentHover.key !== sequenceKey) {
+                return currentHover;
+            }
+            return null;
+        });
+    }, [sequenceKey, setHoveredSequence]);
+    const hovered = sequenceKey !== null && (hoveredSequence === null || hoveredSequence === void 0 ? void 0 : hoveredSequence.key) === sequenceKey;
+    return (0, react_1.useMemo)(() => ({ hovered, onPointerEnter, onPointerLeave }), [hovered, onPointerEnter, onPointerLeave]);
+};
+exports.useTimelineSequenceHover = useTimelineSequenceHover;

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.500",
+	"version": "4.0.502",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"scripts": {
@@ -24,17 +24,18 @@
 		"react-dom": ">=16.8.0"
 	},
 	"dependencies": {
-		"@remotion/drag-and-drop": "4.0.500",
+		"@remotion/studio-protocol": "4.0.502",
 		"semver": "7.5.3",
-		"remotion": "4.0.500",
-		"@remotion/canvas-capture": "4.0.500",
-		"@remotion/player": "4.0.500",
-		"@remotion/media-utils": "4.0.500",
-		"@remotion/renderer": "4.0.500",
-		"@remotion/web-renderer": "4.0.500",
-		"@remotion/studio-shared": "4.0.500",
-		"@remotion/timeline-utils": "4.0.500",
-		"@remotion/zod-types": "4.0.500",
+		"remotion": "4.0.502",
+		"@remotion/canvas-capture": "4.0.502",
+		"@remotion/captions": "4.0.502",
+		"@remotion/player": "4.0.502",
+		"@remotion/media-utils": "4.0.502",
+		"@remotion/renderer": "4.0.502",
+		"@remotion/web-renderer": "4.0.502",
+		"@remotion/studio-shared": "4.0.502",
+		"@remotion/timeline-utils": "4.0.502",
+		"@remotion/zod-types": "4.0.502",
 		"@jridgewell/trace-mapping": "0.3.31",
 		"mediabunny": "1.50.8",
 		"memfs": "3.4.3",
@@ -45,7 +46,7 @@
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"@types/semver": "7.5.3",
-		"@remotion/eslint-config-internal": "4.0.500",
+		"@remotion/eslint-config-internal": "4.0.502",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},