@remotion/studio 4.0.506 → 4.0.508

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

@@ -1,33 +1,84 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTimelineSequenceHover = exports.TimelineSequenceHoverContext = void 0;
+exports.useTimelineSequenceHover = exports.useIsTimelineSequenceHovered = exports.useSetTimelineSequenceHover = exports.useTimelineSequenceHoverState = exports.TimelineSequenceHoverContext = exports.createTimelineSequenceHoverStore = 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 createTimelineSequenceHoverStore = () => {
+    let hoveredSequence = null;
+    const listeners = new Set();
+    return {
+        getSnapshot: () => hoveredSequence,
+        subscribe: (listener) => {
+            listeners.add(listener);
+            return () => listeners.delete(listener);
+        },
+        setHoveredSequence: (action) => {
+            const nextHoveredSequence = typeof action === 'function' ? action(hoveredSequence) : action;
+            if (nextHoveredSequence === hoveredSequence) {
+                return;
+            }
+            hoveredSequence = nextHoveredSequence;
+            for (const listener of listeners) {
+                listener();
+            }
+        },
+    };
+};
+exports.createTimelineSequenceHoverStore = createTimelineSequenceHoverStore;
+exports.TimelineSequenceHoverContext = (0, react_1.createContext)((0, exports.createTimelineSequenceHoverStore)());
+const useTimelineSequenceHoverState = () => {
+    const store = (0, react_1.useContext)(exports.TimelineSequenceHoverContext);
+    return (0, react_1.useSyncExternalStore)(store.subscribe, store.getSnapshot, store.getSnapshot);
+};
+exports.useTimelineSequenceHoverState = useTimelineSequenceHoverState;
+const useSetTimelineSequenceHover = () => {
+    return (0, react_1.useContext)(exports.TimelineSequenceHoverContext).setHoveredSequence;
+};
+exports.useSetTimelineSequenceHover = useSetTimelineSequenceHover;
+const useIsTimelineSequenceHovered = (nodePathKey) => {
+    const store = (0, react_1.useContext)(exports.TimelineSequenceHoverContext);
+    const getSnapshot = (0, react_1.useCallback)(() => {
+        var _a;
+        return nodePathKey !== null && ((_a = store.getSnapshot()) === null || _a === void 0 ? void 0 : _a.nodePathKey) === nodePathKey;
+    }, [nodePathKey, store]);
+    return (0, react_1.useSyncExternalStore)(store.subscribe, getSnapshot, getSnapshot);
+};
+exports.useIsTimelineSequenceHovered = useIsTimelineSequenceHovered;
 const useTimelineSequenceHover = (nodePathInfo) => {
-    const { hoveredSequence, setHoveredSequence } = (0, react_1.useContext)(exports.TimelineSequenceHoverContext);
+    const store = (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 nodePathKey = (0, react_1.useMemo)(() => nodePathInfo === null
+        ? null
+        : (0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(nodePathInfo.sequenceSubscriptionKey), [nodePathInfo]);
+    const hovered = (0, exports.useIsTimelineSequenceHovered)(nodePathKey);
     const onPointerEnter = (0, react_1.useCallback)(() => {
-        if (sequenceKey === null) {
+        if (sequenceKey === null || nodePathKey === null) {
             return;
         }
-        setHoveredSequence({ key: sequenceKey, source: 'timeline' });
-    }, [sequenceKey, setHoveredSequence]);
+        store.setHoveredSequence((currentHover) => {
+            if ((currentHover === null || currentHover === void 0 ? void 0 : currentHover.key) === sequenceKey &&
+                currentHover.nodePathKey === nodePathKey &&
+                currentHover.source === 'timeline') {
+                return currentHover;
+            }
+            return {
+                key: sequenceKey,
+                nodePathKey,
+                source: 'timeline',
+            };
+        });
+    }, [nodePathKey, sequenceKey, store]);
     const onPointerLeave = (0, react_1.useCallback)(() => {
-        setHoveredSequence((currentHover) => {
+        store.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;
+    }, [sequenceKey, store]);
     return (0, react_1.useMemo)(() => ({ hovered, onPointerEnter, onPointerLeave }), [hovered, onPointerEnter, onPointerLeave]);
 };
 exports.useTimelineSequenceHover = useTimelineSequenceHover;

package/dist/state/transform-3d-mode.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+type Transform3DModeState = {
+    readonly manuallyEnabledSequenceKeys: ReadonlySet<string>;
+    readonly setManuallyEnabled: (sequenceKey: string, enabled: boolean) => void;
+};
+export declare const Transform3DModeStateContext: React.Context<Transform3DModeState>;
+export declare const Transform3DModeStateProvider: React.FC<{
+    readonly children: React.ReactNode;
+}>;
+export {};

package/dist/state/transform-3d-mode.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Transform3DModeStateProvider = exports.Transform3DModeStateContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+exports.Transform3DModeStateContext = (0, react_1.createContext)({
+    manuallyEnabledSequenceKeys: new Set(),
+    setManuallyEnabled: () => undefined,
+});
+const Transform3DModeStateProvider = ({ children }) => {
+    const [manuallyEnabledSequenceKeys, setManuallyEnabledSequenceKeys] = (0, react_1.useState)(() => new Set());
+    const setManuallyEnabled = (0, react_1.useCallback)((sequenceKey, enabled) => {
+        setManuallyEnabledSequenceKeys((previous) => {
+            const next = new Set(previous);
+            if (enabled) {
+                next.add(sequenceKey);
+            }
+            else {
+                next.delete(sequenceKey);
+            }
+            return next;
+        });
+    }, []);
+    const value = (0, react_1.useMemo)(() => ({ manuallyEnabledSequenceKeys, setManuallyEnabled }), [manuallyEnabledSequenceKeys, setManuallyEnabled]);
+    return (jsx_runtime_1.jsx(exports.Transform3DModeStateContext.Provider, { value: value, children: children }));
+};
+exports.Transform3DModeStateProvider = Transform3DModeStateProvider;

package/dist/state/z-index.js

@@ -89,14 +89,11 @@ const HigherZIndex = ({ children, onEscape, onOutsideClick, disabled, outsideCli
                 },
             });
         };
-        // If a menu is opened, then this component will also still receive the pointerdown event.
-        // However we may not interpret it as a outside click, so we need to wait for the next tick
-        requestAnimationFrame(() => {
-            // The third argument `true` registers a capture-phase listener. Some Studio
-            // elements stop pointerdown propagation while still being outside the menu,
-            // so bubbling listeners would miss those clicks and keep the menu open.
-            window.addEventListener('pointerdown', listener, true);
-        });
+        // The capture phase for the pointerdown that opened this layer has already
+        // passed, so installing the listener immediately cannot dismiss the new layer.
+        // Waiting for the next animation frame would leave a window in which a fast
+        // outside click is missed.
+        window.addEventListener('pointerdown', listener, true);
         return () => {
             endPointerSession === null || endPointerSession === void 0 ? void 0 : endPointerSession();
             endPointerSession = null;

package/package.json

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