@remotion/studio 4.0.500 → 4.0.501

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-n1kj09yv.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/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

@@ -164,6 +164,10 @@ export type ModalState = {
         initialQuery: string;
         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.501",
 	"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/drag-and-drop": "4.0.501",
 		"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.501",
+		"@remotion/canvas-capture": "4.0.501",
+		"@remotion/captions": "4.0.501",
+		"@remotion/player": "4.0.501",
+		"@remotion/media-utils": "4.0.501",
+		"@remotion/renderer": "4.0.501",
+		"@remotion/web-renderer": "4.0.501",
+		"@remotion/studio-shared": "4.0.501",
+		"@remotion/timeline-utils": "4.0.501",
+		"@remotion/zod-types": "4.0.501",
 		"@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.501",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},