@remotion/studio 4.0.505 → 4.0.507

package/dist/helpers/use-runtime-values.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRuntimeValueSnapshots = exports.useRuntimeValueSelector = exports.useRuntimeValue = exports.useRuntimeValues = void 0;
+const react_1 = require("react");
+const EMPTY_RUNTIME_VALUES = {};
+const EMPTY_RUNTIME_VALUE_STORE = {
+    getSnapshot: () => EMPTY_RUNTIME_VALUES,
+    subscribe: () => () => undefined,
+};
+const useRuntimeValues = (controls) => {
+    var _a;
+    const store = (_a = controls === null || controls === void 0 ? void 0 : controls.runtimeValues) !== null && _a !== void 0 ? _a : EMPTY_RUNTIME_VALUE_STORE;
+    return (0, react_1.useSyncExternalStore)(store.subscribe, store.getSnapshot, store.getSnapshot);
+};
+exports.useRuntimeValues = useRuntimeValues;
+const useRuntimeValue = (controls, key) => {
+    var _a;
+    const store = (_a = controls === null || controls === void 0 ? void 0 : controls.runtimeValues) !== null && _a !== void 0 ? _a : EMPTY_RUNTIME_VALUE_STORE;
+    const getSnapshot = (0, react_1.useCallback)(() => store.getSnapshot()[key], [key, store]);
+    return (0, react_1.useSyncExternalStore)(store.subscribe, getSnapshot, getSnapshot);
+};
+exports.useRuntimeValue = useRuntimeValue;
+const useRuntimeValueSelector = ({ controls, selector, isEqual = Object.is, }) => {
+    var _a;
+    const store = (_a = controls === null || controls === void 0 ? void 0 : controls.runtimeValues) !== null && _a !== void 0 ? _a : EMPTY_RUNTIME_VALUE_STORE;
+    const selectedStore = (0, react_1.useMemo)(() => {
+        let lastSource = store.getSnapshot();
+        let lastSelection = selector(lastSource);
+        const getSnapshot = () => {
+            const nextSource = store.getSnapshot();
+            if (nextSource === lastSource) {
+                return lastSelection;
+            }
+            lastSource = nextSource;
+            const nextSelection = selector(nextSource);
+            if (!isEqual(lastSelection, nextSelection)) {
+                lastSelection = nextSelection;
+            }
+            return lastSelection;
+        };
+        return {
+            getSnapshot,
+            subscribe: store.subscribe,
+        };
+    }, [isEqual, selector, store]);
+    return (0, react_1.useSyncExternalStore)(selectedStore.subscribe, selectedStore.getSnapshot, selectedStore.getSnapshot);
+};
+exports.useRuntimeValueSelector = useRuntimeValueSelector;
+const useRuntimeValueSnapshots = (controls) => {
+    const stores = (0, react_1.useMemo)(() => controls.map((control) => control.runtimeValues), [controls]);
+    const aggregateStore = (0, react_1.useMemo)(() => {
+        let lastSnapshots = stores.map((store) => store.getSnapshot());
+        const getSnapshot = () => {
+            const nextSnapshots = stores.map((store) => store.getSnapshot());
+            if (nextSnapshots.length === lastSnapshots.length &&
+                nextSnapshots.every((snapshot, index) => snapshot === lastSnapshots[index])) {
+                return lastSnapshots;
+            }
+            lastSnapshots = nextSnapshots;
+            return lastSnapshots;
+        };
+        return {
+            getSnapshot,
+            subscribe: (listener) => {
+                const unsubscribers = stores.map((store) => store.subscribe(listener));
+                return () => {
+                    for (const unsubscribe of unsubscribers) {
+                        unsubscribe();
+                    }
+                };
+            },
+        };
+    }, [stores]);
+    return (0, react_1.useSyncExternalStore)(aggregateStore.subscribe, aggregateStore.getSnapshot, aggregateStore.getSnapshot);
+};
+exports.useRuntimeValueSnapshots = useRuntimeValueSnapshots;

package/dist/icons/apps.d.ts

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

package/dist/icons/apps.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppsIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
+const AppsIcon = ({ color, ...props }) => (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 640", ...props, children: jsx_runtime_1.jsx("path", { fill: color !== null && color !== void 0 ? color : colors_1.CURRENT_COLOR_LOWERCASE, d: "M144 128C135.2 128 128 135.2 128 144L128 240C128 248.8 135.2 256 144 256L240 256C248.8 256 256 248.8 256 240L256 144C256 135.2 248.8 128 240 128L144 128zM96 144C96 117.5 117.5 96 144 96L240 96C266.5 96 288 117.5 288 144L288 240C288 266.5 266.5 288 240 288L144 288C117.5 288 96 266.5 96 240L96 144zM144 384C135.2 384 128 391.2 128 400L128 496C128 504.8 135.2 512 144 512L240 512C248.8 512 256 504.8 256 496L256 400C256 391.2 248.8 384 240 384L144 384zM96 400C96 373.5 117.5 352 144 352L240 352C266.5 352 288 373.5 288 400L288 496C288 522.5 266.5 544 240 544L144 544C117.5 544 96 522.5 96 496L96 400zM496 128L400 128C391.2 128 384 135.2 384 144L384 240C384 248.8 391.2 256 400 256L496 256C504.8 256 512 248.8 512 240L512 144C512 135.2 504.8 128 496 128zM400 96L496 96C522.5 96 544 117.5 544 144L544 240C544 266.5 522.5 288 496 288L400 288C373.5 288 352 266.5 352 240L352 144C352 117.5 373.5 96 400 96zM400 384C391.2 384 384 391.2 384 400L384 496C384 504.8 391.2 512 400 512L496 512C504.8 512 512 504.8 512 496L512 400C512 391.2 504.8 384 496 384L400 384zM352 400C352 373.5 373.5 352 400 352L496 352C522.5 352 544 373.5 544 400L544 496C544 522.5 522.5 544 496 544L400 544C373.5 544 352 522.5 352 496L352 400z" }) }));
+exports.AppsIcon = AppsIcon;

package/dist/icons/browse-elements.d.ts

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

package/dist/icons/browse-elements.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BrowseElementsIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Font Awesome Pro v7.3.1, Copyright 2026 Fonticons, Inc.
+// https://fontawesome.com/license (Commercial License)
+const BrowseElementsIcon = ({ 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: "M320 96L224 256L416 256L320 96zM320 64C331.2 64 341.7 69.9 347.4 79.5L443.4 239.5C449.3 249.4 449.5 261.7 443.8 271.7C438.1 281.7 427.5 288 416 288L224 288C212.5 288 201.8 281.8 196.2 271.8C190.6 261.8 190.7 249.5 196.6 239.6L292.6 79.6C298.3 69.9 308.8 64 320 64zM192 528C236.2 528 272 492.2 272 448C272 403.8 236.2 368 192 368C147.8 368 112 403.8 112 448C112 492.2 147.8 528 192 528zM192 336C253.9 336 304 386.1 304 448C304 509.9 253.9 560 192 560C130.1 560 80 509.9 80 448C80 386.1 130.1 336 192 336zM504 384L392 384C387.6 384 384 387.6 384 392L384 504C384 508.4 387.6 512 392 512L504 512C508.4 512 512 508.4 512 504L512 392C512 387.6 508.4 384 504 384zM392 352L504 352C526.1 352 544 369.9 544 392L544 504C544 526.1 526.1 544 504 544L392 544C369.9 544 352 526.1 352 504L352 392C352 369.9 369.9 352 392 352z" }) }));
+};
+exports.BrowseElementsIcon = BrowseElementsIcon;

package/dist/state/modals.d.ts

@@ -144,10 +144,9 @@ export type ModalState = {
 } | {
     type: 'input-props-override';
 } | {
-    type: 'configure-license';
+    type: 'settings';
+    initialTab: 'apps' | 'license';
     initialPublicLicenseKey: string | null;
-} | {
-    type: 'configure-default-editor';
 } | RenderModalState | WebRenderModalState | {
     type: 'render-progress';
     jobId: string;
@@ -172,8 +171,8 @@ export type ModalState = {
         onSelected: (composition: _InternalTypes['AnyComposition']) => void;
     } | null;
 } | AddEffectModalState | ConfirmationDialogState | SvgImportDialogState;
-export type ModalContextType = {
-    selectedModal: ModalState | null;
+export type SetSelectedModalContextType = {
     setSelectedModal: React.Dispatch<React.SetStateAction<ModalState | null>>;
 };
-export declare const ModalsContext: React.Context<ModalContextType>;
+export declare const SelectedModalContext: React.Context<ModalState | null>;
+export declare const SetSelectedModalContext: React.Context<SetSelectedModalContextType>;

package/dist/state/modals.js

@@ -1,8 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModalsContext = void 0;
+exports.SetSelectedModalContext = exports.SelectedModalContext = void 0;
 const react_1 = require("react");
-exports.ModalsContext = (0, react_1.createContext)({
-    selectedModal: null,
+// Keep modal state separate from its stable setter so opening a modal only
+// updates consumers that need to render the selected modal.
+exports.SelectedModalContext = (0, react_1.createContext)(null);
+exports.SetSelectedModalContext = (0, react_1.createContext)({
     setSelectedModal: () => undefined,
 });

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

@@ -2,13 +2,19 @@ import type { Dispatch, SetStateAction } from 'react';
 import type { SequenceNodePathInfo } from '../helpers/get-timeline-sequence-sort-key';
 export type TimelineSequenceHover = {
     readonly key: string;
+    readonly nodePathKey: string;
     readonly source: 'canvas' | 'timeline';
 };
-type TimelineSequenceHoverState = {
-    readonly hoveredSequence: TimelineSequenceHover | null;
+type TimelineSequenceHoverStore = {
+    readonly getSnapshot: () => TimelineSequenceHover | null;
+    readonly subscribe: (listener: () => void) => () => void;
     readonly setHoveredSequence: Dispatch<SetStateAction<TimelineSequenceHover | null>>;
 };
-export declare const TimelineSequenceHoverContext: import("react").Context<TimelineSequenceHoverState>;
+export declare const createTimelineSequenceHoverStore: () => TimelineSequenceHoverStore;
+export declare const TimelineSequenceHoverContext: import("react").Context<TimelineSequenceHoverStore>;
+export declare const useTimelineSequenceHoverState: () => TimelineSequenceHover | null;
+export declare const useSetTimelineSequenceHover: () => Dispatch<SetStateAction<TimelineSequenceHover | null>>;
+export declare const useIsTimelineSequenceHovered: (nodePathKey: string | null) => boolean;
 export declare const useTimelineSequenceHover: (nodePathInfo: SequenceNodePathInfo | null) => {
     hovered: boolean;
     onPointerEnter: () => void;

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/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.505",
+	"version": "4.0.507",
 	"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.505",
+		"@remotion/studio-protocol": "4.0.507",
 		"semver": "7.5.3",
-		"remotion": "4.0.505",
-		"@remotion/captions": "4.0.505",
-		"@remotion/player": "4.0.505",
-		"@remotion/media-utils": "4.0.505",
-		"@remotion/renderer": "4.0.505",
-		"@remotion/web-renderer": "4.0.505",
-		"@remotion/studio-shared": "4.0.505",
-		"@remotion/timeline-utils": "4.0.505",
-		"@remotion/zod-types": "4.0.505",
+		"remotion": "4.0.507",
+		"@remotion/captions": "4.0.507",
+		"@remotion/player": "4.0.507",
+		"@remotion/media-utils": "4.0.507",
+		"@remotion/renderer": "4.0.507",
+		"@remotion/web-renderer": "4.0.507",
+		"@remotion/studio-shared": "4.0.507",
+		"@remotion/timeline-utils": "4.0.507",
+		"@remotion/zod-types": "4.0.507",
 		"@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.505",
+		"@remotion/eslint-config-internal": "4.0.507",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},