@remotion/studio 4.0.505 → 4.0.506

package/dist/esm/renderEntry.mjs

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

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

@@ -1,12 +1,14 @@
-import type { EventSourceEvent } from '@remotion/studio-shared';
+import { type EventSourceEvent } from '@remotion/studio-shared';
 import React from 'react';
 import { type PreviewServerConnectionState } from './preview-server-events';
 type Context = {
     previewServerState: PreviewServerConnectionState;
+    configFileChangeRevision: number;
     subscribeToEvent: (type: EventSourceEvent['type'], listener: (event: EventSourceEvent) => void) => () => void;
 };
 export declare const StudioServerConnectionCtx: React.Context<Context>;
 export declare const PreviewServerConnection: React.FC<{
     readonly children: React.ReactNode;
 }>;
+export declare const useStudioConfigRevision: () => number;
 export {};

package/dist/helpers/client-id.js

@@ -36,8 +36,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PreviewServerConnection = exports.StudioServerConnectionCtx = void 0;
+exports.useStudioConfigRevision = exports.PreviewServerConnection = exports.StudioServerConnectionCtx = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const NotificationCenter_1 = require("../components/Notifications/NotificationCenter");
@@ -49,6 +50,7 @@ exports.StudioServerConnectionCtx = react_1.default.createContext({
     previewServerState: {
         type: 'init',
     },
+    configFileChangeRevision: 0,
     subscribeToEvent: () => {
         throw new Error('Context not initalized');
     },
@@ -68,14 +70,24 @@ const PreviewServerConnection = ({ children }) => {
     const [state, setState] = react_1.default.useState({
         type: 'init',
     });
+    const [configFileChangeRevision, setConfigFileChangeRevision] = react_1.default.useState(0);
     (0, react_1.useEffect)(() => {
         const handleEvent = (newEvent) => {
             var _a, _b;
             if (newEvent.type === 'new-input-props' ||
-                newEvent.type === 'new-env-variables' ||
-                newEvent.type === 'config-file-changed') {
+                newEvent.type === 'new-env-variables') {
                 (0, url_state_1.reloadUrl)();
             }
+            if (newEvent.type === 'config-file-changed') {
+                window.remotion_renderDefaults = newEvent.renderDefaults;
+                window.remotion_studioConfig = newEvent.studioRuntimeConfig;
+                window.remotion_editorName = newEvent.editorName;
+                setConfigFileChangeRevision((revision) => revision + 1);
+                (0, NotificationCenter_1.showNotification)((0, studio_shared_1.getConfigFileChangeMessage)(newEvent.changeType), 4000);
+            }
+            if (newEvent.type === 'config-file-reload-failed') {
+                (0, NotificationCenter_1.showNotification)(newEvent.errorMessage, 4000);
+            }
             if (newEvent.type === 'init') {
                 latestUndoRedoEvent.current = {
                     type: 'undo-redo-stack-changed',
@@ -131,9 +143,14 @@ const PreviewServerConnection = ({ children }) => {
     const context = (0, react_1.useMemo)(() => {
         return {
             previewServerState: state,
+            configFileChangeRevision,
             subscribeToEvent,
         };
-    }, [state, subscribeToEvent]);
+    }, [configFileChangeRevision, state, subscribeToEvent]);
     return (jsx_runtime_1.jsx(exports.StudioServerConnectionCtx.Provider, { value: context, children: children }));
 };
 exports.PreviewServerConnection = PreviewServerConnection;
+const useStudioConfigRevision = () => {
+    return react_1.default.useContext(exports.StudioServerConnectionCtx).configFileChangeRevision;
+};
+exports.useStudioConfigRevision = useStudioConfigRevision;

package/dist/helpers/install-required-package.d.ts

@@ -1,3 +1,3 @@
-import type { ElementDependency } from '@remotion/studio-protocol';
-export declare const getMissingPackages: (dependencies: (string | ElementDependency)[]) => ElementDependency[];
-export declare const installRequiredPackages: (dependencies: (string | ElementDependency)[]) => Promise<void>;
+import type { PackageInstallSpec } from '@remotion/studio-shared';
+export declare const getMissingPackages: (dependencies: readonly PackageInstallSpec[]) => PackageInstallSpec[];
+export declare const installRequiredPackages: (dependencies: readonly PackageInstallSpec[]) => Promise<void>;

package/dist/helpers/install-required-package.js

@@ -4,12 +4,7 @@ exports.installRequiredPackages = exports.getMissingPackages = void 0;
 const install_package_1 = require("../api/install-package");
 const NotificationCenter_1 = require("../components/Notifications/NotificationCenter");
 let installQueue = Promise.resolve();
-const uniqueDependencies = (dependencies) => Array.from(new Map(dependencies.map((dependency) => {
-    const normalized = typeof dependency === 'string'
-        ? { name: dependency, version: null }
-        : dependency;
-    return [normalized.name, normalized];
-})).values());
+const uniqueDependencies = (dependencies) => Array.from(new Map(dependencies.map((dependency) => [dependency.name, dependency])).values());
 const getMissingPackages = (dependencies) => {
     var _a;
     const installedPackages = (_a = window.remotion_installedPackages) !== null && _a !== void 0 ? _a : [];

package/dist/helpers/studio-fit-padding.d.ts

@@ -1,5 +1,5 @@
 import type { Size } from '@remotion/player';
-export declare const STUDIO_FIT_PADDING = 16;
+export declare const STUDIO_FIT_PADDING = 8;
 type CanvasSize = {
     readonly width: number;
     readonly height: number;

package/dist/helpers/studio-fit-padding.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.calculateStudioCanvasTransformation = exports.calculateStudioScale = exports.getStudioCurrentScaleContext = exports.getStudioPaddedCanvasSize = exports.STUDIO_FIT_PADDING = void 0;
 const player_1 = require("@remotion/player");
 const remotion_1 = require("remotion");
-exports.STUDIO_FIT_PADDING = 16;
+exports.STUDIO_FIT_PADDING = 8;
 const getPadding = (length) => {
     return Math.min(exports.STUDIO_FIT_PADDING, Math.max(0, (length - 1) / 2));
 };

package/dist/helpers/timeline-layout.d.ts

@@ -31,7 +31,7 @@ export type TimelineTreeNode = {
     readonly label: string;
     readonly field: AnySchemaFieldInfo | null;
 };
-export declare const buildTimelineTree: ({ sequence, nodePathInfo, getDragOverrides, getEffectDragOverrides, propStatuses, includeTextContent, includeSourceControls, }: {
+export declare const buildTimelineTree: ({ sequence, nodePathInfo, getDragOverrides, getEffectDragOverrides, propStatuses, includeTextContent, includeSourceControls, runtimeValues, }: {
     sequence: TSequence;
     nodePathInfo: SequenceNodePathInfo;
     getDragOverrides: GetDragOverrides;
@@ -39,6 +39,7 @@ export declare const buildTimelineTree: ({ sequence, nodePathInfo, getDragOverri
     propStatuses: PropStatuses;
     includeTextContent: boolean;
     includeSourceControls: boolean;
+    runtimeValues: Readonly<Record<string, unknown>> | null;
 }) => TimelineTreeNode[];
 export type FlatTreeRow = {
     readonly node: TimelineTreeNode;

package/dist/helpers/timeline-layout.js

@@ -14,13 +14,15 @@ exports.TIMELINE_ITEM_BORDER_BOTTOM = 1;
 exports.TIMELINE_TRACK_EXPANDED_HEIGHT = 100;
 exports.TREE_GROUP_ROW_HEIGHT = 22;
 exports.EXPANDED_SECTION_PADDING_RIGHT = 10;
-const buildTimelineTree = ({ sequence, nodePathInfo, getDragOverrides, getEffectDragOverrides, propStatuses, includeTextContent, includeSourceControls, }) => {
+const buildTimelineTree = ({ sequence, nodePathInfo, getDragOverrides, getEffectDragOverrides, propStatuses, includeTextContent, includeSourceControls, runtimeValues, }) => {
     var _a;
     const roots = [];
     const { sequenceSubscriptionKey, index, auxiliaryKeys, supportsEffects } = nodePathInfo;
     const controlFields = (0, studio_shared_1.getFieldsToShow)({
         schema: sequence.controls.schema,
-        currentRuntimeValueDotNotation: sequence.controls.currentRuntimeValueDotNotation,
+        currentRuntimeValueDotNotation: runtimeValues !== null
+            ? runtimeValues
+            : sequence.controls.runtimeValues.getSnapshot(),
         getDragOverrides,
         propStatuses,
         nodePath: sequenceSubscriptionKey,
@@ -140,6 +142,7 @@ const getExpandedTrackHeight = ({ sequence, nodePathInfo, getIsExpanded, propSta
         propStatuses,
         includeTextContent: false,
         includeSourceControls: false,
+        runtimeValues: null,
     });
     const flat = (0, exports.flattenVisibleTreeNodes)({ nodes: tree, getIsExpanded });
     if (flat.length === 0) {

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

@@ -43,7 +43,7 @@ const inheritColor = {
     color: 'inherit',
 };
 const ICON_SIZE = 14;
-const getFileMenu = ({ readOnlyStudio, closeMenu, previewServerState, setSelectedModal, }) => {
+const getFileMenu = ({ readOnlyStudio, closeMenu, editorName, 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;
@@ -144,11 +144,11 @@ const getFileMenu = ({ readOnlyStudio, closeMenu, previewServerState, setSelecte
                 id: 'open-project-divider',
             }
             : null,
-        window.remotion_editorName && !readOnlyStudio
+        editorName && !readOnlyStudio
             ? {
                 id: 'open-in-editor',
                 value: 'open-in-editor',
-                label: `Open in ${window.remotion_editorName}`,
+                label: `Open in ${editorName}`,
                 onClick: async () => {
                     await (0, open_in_editor_1.openInEditor)({
                         originalFileName: `${window.remotion_cwd}`,
@@ -159,13 +159,13 @@ const getFileMenu = ({ readOnlyStudio, closeMenu, previewServerState, setSelecte
                     }, null)
                         .then(({ success }) => {
                         if (!success) {
-                            (0, NotificationCenter_1.showNotification)(`Could not open ${window.remotion_editorName}`, 2000);
+                            (0, NotificationCenter_1.showNotification)(`Could not open ${editorName}`, 2000);
                         }
                     })
                         .catch((err) => {
                         // eslint-disable-next-line no-console
                         console.error(err);
-                        (0, NotificationCenter_1.showNotification)(`Could not open ${window.remotion_editorName}`, 2000);
+                        (0, NotificationCenter_1.showNotification)(`Could not open ${editorName}`, 2000);
                     });
                 },
                 type: 'item',
@@ -254,7 +254,7 @@ const getRenderMenuItems = ({ closeMenu, previewServerState, readOnlyStudio, })
 };
 const useMenuStructure = (closeMenu, readOnlyStudio) => {
     var _a;
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const { checkerboard, setCheckerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
     const { editorZoomGestures, setEditorZoomGestures } = (0, react_1.useContext)(editor_zoom_gestures_1.EditorZoomGesturesContext);
     const { editorShowRulers, setEditorShowRulers } = (0, react_1.useContext)(editor_rulers_1.EditorShowRulersContext);
@@ -263,6 +263,9 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
     const { size, setSize } = (0, react_1.useContext)(remotion_1.Internals.PreviewSizeContext);
     const { canvasContent, compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { type } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).previewServerState;
+    const editorName = window.remotion_editorName;
+    const keyboardShortcutsDisabled = (0, use_keybinding_1.areKeyboardShortcutsDisabled)();
+    const studioAskAIEnabled = (0, studio_runtime_config_1.getStudioAskAIEnabled)();
     const canConfigureDefaultEditor = !readOnlyStudio &&
         type === 'connected' &&
         (0, browser_studio_operations_1.getBrowserStudioOperations)() === null;
@@ -326,34 +329,17 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                         subMenu: null,
                         quickSwitcherLabel: 'Help: Changelog',
                     },
-                    canConfigureDefaultEditor
-                        ? {
-                            id: 'default-editor',
-                            value: 'default-editor',
-                            label: 'Configure default editor...',
-                            onClick: () => {
-                                closeMenu();
-                                setSelectedModal({
-                                    type: 'configure-default-editor',
-                                });
-                            },
-                            type: 'item',
-                            keyHint: null,
-                            leftItem: null,
-                            subMenu: null,
-                            quickSwitcherLabel: 'Configure default editor...',
-                        }
-                        : null,
                     {
-                        id: 'license',
-                        value: 'license',
-                        label: 'Configure License...',
+                        id: 'settings',
+                        value: 'settings',
+                        label: 'Settings...',
                         onClick: () => {
                             var _a;
                             var _b;
                             closeMenu();
                             setSelectedModal({
-                                type: 'configure-license',
+                                type: 'settings',
+                                initialTab: canConfigureDefaultEditor ? 'apps' : 'license',
                                 initialPublicLicenseKey: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.publicLicenseKey) !== null && _b !== void 0 ? _b : null,
                             });
                         },
@@ -361,7 +347,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                         keyHint: null,
                         leftItem: null,
                         subMenu: null,
-                        quickSwitcherLabel: 'Configure License...',
+                        quickSwitcherLabel: 'Settings...',
                         disabled: readOnlyStudio || type !== 'connected',
                     },
                     {
@@ -402,6 +388,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
             getFileMenu({
                 readOnlyStudio,
                 closeMenu,
+                editorName,
                 previewServerState: type,
                 setSelectedModal,
             }),
@@ -489,7 +476,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                     },
                     {
                         id: 'enable-snapping',
-                        keyHint: (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? null : 'Shift+M',
+                        keyHint: keyboardShortcutsDisabled ? null : 'Shift+M',
                         label: 'Enable Snapping',
                         onClick: () => {
                             closeMenu();
@@ -776,7 +763,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                 label: 'Tools',
                 leaveLeftPadding: false,
                 items: [
-                    (0, studio_runtime_config_1.getStudioAskAIEnabled)()
+                    studioAskAIEnabled
                         ? {
                             id: 'ask-ai',
                             value: 'ask-ai',
@@ -839,7 +826,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                     {
                         id: 'shortcuts',
                         value: 'shortcuts',
-                        label: (0, use_keybinding_1.areKeyboardShortcutsDisabled)()
+                        label: keyboardShortcutsDisabled
                             ? 'Shortcuts (disabled)'
                             : 'Shortcuts',
                         onClick: () => {
@@ -856,7 +843,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                         leftItem: null,
                         subMenu: null,
                         type: 'item',
-                        quickSwitcherLabel: (0, use_keybinding_1.areKeyboardShortcutsDisabled)()
+                        quickSwitcherLabel: keyboardShortcutsDisabled
                             ? 'Show all Keyboard Shortcuts (disabled)'
                             : 'Show all Keyboard Shortcuts',
                     },
@@ -1025,6 +1012,9 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
         isFullscreenSupported,
         remotion_packageManager,
         mobileLayout,
+        editorName,
+        keyboardShortcutsDisabled,
+        studioAskAIEnabled,
         size.size,
         setSize,
         setEditorZoomGestures,

package/dist/helpers/use-runtime-values.d.ts

@@ -0,0 +1,11 @@
+import type { SequenceRegistrationControls } from 'remotion';
+type RuntimeValueSelectorResult = string | number | boolean | bigint | symbol | null | undefined;
+export declare const useRuntimeValues: (controls: SequenceRegistrationControls | null) => Readonly<Record<string, unknown>>;
+export declare const useRuntimeValue: (controls: SequenceRegistrationControls | null, key: string) => unknown;
+export declare const useRuntimeValueSelector: <T extends RuntimeValueSelectorResult>({ controls, selector, isEqual, }: {
+    controls: SequenceRegistrationControls | null;
+    selector: (values: Readonly<Record<string, unknown>>) => T;
+    isEqual?: ((first: T, second: T) => boolean) | undefined;
+}) => T;
+export declare const useRuntimeValueSnapshots: (controls: readonly SequenceRegistrationControls[]) => readonly Readonly<Record<string, unknown>>[];
+export {};

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/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.506",
 	"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.506",
 		"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.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",
 		"@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.506",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},