@remotion/studio 4.0.505 → 4.0.507

package/dist/esm/renderEntry.mjs

@@ -4,7 +4,7 @@ import {
   WHITE,
   __require,
   __toESM
-} from "./chunk-jefhcs5z.js";
+} from "./chunk-fgedsvhb.js";
 
 // src/renderEntry.tsx
 import { useContext, useEffect, useRef, useState } from "react";
@@ -212,7 +212,7 @@ var renderContent = (Root) => {
     renderToDOM(/* @__PURE__ */ jsx("div", {
       children: /* @__PURE__ */ jsx(DelayedSpinner, {})
     }));
-    import("./chunk-7pgk8h5m.js").then(({ StudioInternals }) => {
+    import("./chunk-ptnd65a9.js").then(({ StudioInternals }) => {
       window.remotion_isStudio = true;
       window.remotion_isReadOnlyStudio = true;
       window.remotion_inputProps = "{}";

package/dist/helpers/are-sequence-node-path-infos-equal.d.ts

@@ -0,0 +1,2 @@
+import type { SequenceNodePathInfo } from './get-timeline-sequence-sort-key';
+export declare const areSequenceNodePathInfosEqual: (first: SequenceNodePathInfo, second: SequenceNodePathInfo) => boolean;

package/dist/helpers/are-sequence-node-path-infos-equal.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.areSequenceNodePathInfosEqual = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
+const areSequenceNodePathInfosEqual = (first, second) => {
+    if (first.index !== second.index ||
+        first.numberOfSequencesWithThisNodePath !==
+            second.numberOfSequencesWithThisNodePath ||
+        first.supportsEffects !== second.supportsEffects ||
+        (0, studio_shared_1.stringifySequenceSubscriptionKey)(first.sequenceSubscriptionKey) !==
+            (0, studio_shared_1.stringifySequenceSubscriptionKey)(second.sequenceSubscriptionKey) ||
+        first.auxiliaryKeys.length !== second.auxiliaryKeys.length ||
+        !first.auxiliaryKeys.every((key, index) => key === second.auxiliaryKeys[index])) {
+        return false;
+    }
+    const firstVideoConfig = first.sequenceSubscriptionKey.videoConfigValues;
+    const secondVideoConfig = second.sequenceSubscriptionKey.videoConfigValues;
+    return (firstVideoConfig === secondVideoConfig ||
+        (firstVideoConfig !== null &&
+            secondVideoConfig !== null &&
+            firstVideoConfig.durationInFrames ===
+                secondVideoConfig.durationInFrames &&
+            firstVideoConfig.fps === secondVideoConfig.fps &&
+            firstVideoConfig.height === secondVideoConfig.height &&
+            firstVideoConfig.width === secondVideoConfig.width));
+};
+exports.areSequenceNodePathInfosEqual = areSequenceNodePathInfosEqual;

package/dist/helpers/calculate-timeline.js

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.calculateTimeline = void 0;
-const studio_shared_1 = require("@remotion/studio-shared");
 const get_connected_compositions_1 = require("./get-connected-compositions");
 const get_sequence_visible_range_1 = require("./get-sequence-visible-range");
 const get_timeline_nestedness_1 = require("./get-timeline-nestedness");
 const get_timeline_sequence_sort_key_1 = require("./get-timeline-sequence-sort-key");
 const sort_by_nonce_history_1 = require("./sort-by-nonce-history");
+const timeline_node_path_key_1 = require("./timeline-node-path-key");
 const getInheritedLoopDisplay = (sequence, sequences) => {
     if (sequence.loopDisplay) {
         return sequence.loopDisplay;
@@ -113,7 +113,7 @@ const calculateTimeline = ({ sequences, overrideIdsToNodePaths, compositions = [
         if (track.nodePathInfo === null) {
             return track;
         }
-        const key = (0, studio_shared_1.stringifySequenceSubscriptionKey)(track.nodePathInfo.sequenceSubscriptionKey);
+        const key = (0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(track.nodePathInfo.sequenceSubscriptionKey);
         const index = (_a = nodePathIndexCounters.get(key)) !== null && _a !== void 0 ? _a : 0;
         nodePathIndexCounters.set(key, index + 1);
         return {
@@ -132,7 +132,7 @@ const calculateTimeline = ({ sequences, overrideIdsToNodePaths, compositions = [
         if (track.nodePathInfo === null) {
             return track;
         }
-        const key = (0, studio_shared_1.stringifySequenceSubscriptionKey)(track.nodePathInfo.sequenceSubscriptionKey);
+        const key = (0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(track.nodePathInfo.sequenceSubscriptionKey);
         return {
             ...track,
             nodePathInfo: {

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,15 +70,32 @@ const PreviewServerConnection = ({ children }) => {
     const [state, setState] = react_1.default.useState({
         type: 'init',
     });
+    const [configFileChangeRevision, setConfigFileChangeRevision] = react_1.default.useState(0);
+    const clientId = (0, react_1.useRef)(null);
     (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);
+                const isOwnRuntimeConfigChange = newEvent.changeType === 'runtime' &&
+                    newEvent.originatorClientId !== null &&
+                    newEvent.originatorClientId === clientId.current;
+                if (!isOwnRuntimeConfigChange) {
+                    (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') {
+                clientId.current = newEvent.clientId;
                 latestUndoRedoEvent.current = {
                     type: 'undo-redo-stack-changed',
                     undoFile: newEvent.undoFile,
@@ -131,9 +150,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/format-file-location.d.ts

@@ -6,7 +6,7 @@ export declare const formatFileLocation: ({ location, root, }: {
     readonly location: FileLocation | null;
     readonly root: string;
 }) => string | null;
-export declare const formatLocationForAgents: ({ name, location, root, }: {
+export declare const formatContextForAgents: ({ name, location, root, }: {
     readonly name: string | null;
     readonly location: FileLocation | null;
     readonly root: string;

package/dist/helpers/format-file-location.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.formatLocationForAgents = exports.formatFileLocation = void 0;
+exports.formatContextForAgents = exports.formatFileLocation = void 0;
 const normalizeSlashes = (path) => path.replace(/\\/g, '/');
 const stripTrailingSlashes = (path) => path.replace(/\/+$/, '');
 const stripLeadingDotSlash = (path) => path.replace(/^\.\/+/, '');
@@ -25,11 +25,11 @@ const formatFileLocation = ({ location, root, }) => {
     return `${stripLeadingDotSlash(relativeSource)}:${location.line}`;
 };
 exports.formatFileLocation = formatFileLocation;
-const formatLocationForAgents = ({ name, location, root, }) => {
+const formatContextForAgents = ({ name, location, root, }) => {
     const fileLocation = (0, exports.formatFileLocation)({ location, root });
     if (!name || !fileLocation) {
         return null;
     }
     return `${name} in ${fileLocation}`;
 };
-exports.formatLocationForAgents = formatLocationForAgents;
+exports.formatContextForAgents = formatContextForAgents;

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/migrate-expanded-tracks-for-subscription-key.js

@@ -11,12 +11,12 @@ const migrateExpandedTracksForSubscriptionKey = (prev, oldKey, newKey) => {
     let changed = false;
     const next = { ...prev };
     for (const [key, value] of Object.entries(prev)) {
-        if (value !== false || !key.startsWith(oldPrefix + '.')) {
+        if (!value || !key.startsWith(oldPrefix + '.')) {
             continue;
         }
         const migratedKey = newPrefix + key.slice(oldPrefix.length);
-        if (next[migratedKey] === undefined) {
-            next[migratedKey] = false;
+        if (!next[migratedKey]) {
+            next[migratedKey] = true;
         }
         delete next[key];
         changed = true;

package/dist/helpers/open-in-editor.d.ts

@@ -1,6 +1,7 @@
 import type { CompositionComponentInfoResponse, EditorPickerId, SymbolicatedStackFrame } from '@remotion/studio-shared';
 import type { CodePosition, OriginalPosition } from '../error-overlay/react-overlay/utils/get-source-map';
 export declare const openInEditor: (stack: SymbolicatedStackFrame, editorId: EditorPickerId | null) => Promise<import("@remotion/studio-shared").OpenInEditorResponse>;
+export declare const openInCodingAgent: (codingAgentId: "claude-code" | "codex" | "copilot" | "cursor", prompt: string | null) => Promise<import("@remotion/studio-shared").OpenInCodingAgentResponse>;
 export declare const openOriginalPositionInEditor: (originalPosition: OriginalPosition, editorId: EditorPickerId | null) => Promise<void>;
 export declare const openOriginalPositionInEditorAtProperty: ({ originalPosition, property, }: {
     originalPosition: CodePosition;

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

@@ -1,6 +1,6 @@
 "use strict";
 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;
+exports.openCompositionComponentInEditor = exports.preloadCompositionComponentInfo = exports.loadCompositionComponentInfo = exports.useCachedCompositionComponentInfo = exports.getCachedCompositionComponentInfo = exports.subscribeToCompositionComponentInfo = exports.openOriginalPositionInEditorAtProperty = exports.openOriginalPositionInEditor = exports.openInCodingAgent = 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");
@@ -18,6 +18,10 @@ const openInEditor = (stack, editorId) => {
     });
 };
 exports.openInEditor = openInEditor;
+const openInCodingAgent = (codingAgentId, prompt) => {
+    return (0, call_api_1.callApi)('/api/open-in-coding-agent', { codingAgentId, prompt });
+};
+exports.openInCodingAgent = openInCodingAgent;
 const openOriginalPositionInEditor = async (originalPosition, editorId) => {
     const response = await (0, exports.openInEditor)({
         originalColumnNumber: originalPosition.column,

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/studio-runtime-config.js

@@ -6,9 +6,12 @@ exports.DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS = 300;
 const defaultStudioRuntimeConfig = {
     askAIEnabled: false,
     bufferStateDelayInMilliseconds: null,
+    defaultCodingAgent: null,
+    defaultEditor: null,
     interactivityEnabled: true,
     keyboardShortcutsEnabled: true,
     maxTimelineTracks: null,
+    publicLicenseKey: null,
 };
 const getStudioRuntimeConfig = () => {
     var _a;

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/timeline-node-path-key.d.ts

@@ -1,2 +1,4 @@
+import type { SequencePropsSubscriptionKey } from 'remotion';
 import type { SequenceNodePathInfo } from './get-timeline-sequence-sort-key';
+export declare const timelineSequenceNodePathToKey: (key: SequencePropsSubscriptionKey) => string;
 export declare const timelineNodePathInfoToKey: (info: SequenceNodePathInfo) => string;

package/dist/helpers/timeline-node-path-key.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.timelineNodePathInfoToKey = void 0;
+exports.timelineNodePathInfoToKey = exports.timelineSequenceNodePathToKey = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
+const timelineSequenceNodePathToKey = (key) => `${key.absolutePath}:${JSON.stringify(key.nodePath)}`;
+exports.timelineSequenceNodePathToKey = timelineSequenceNodePathToKey;
 const timelineNodePathInfoToKey = (info) => [
     (0, studio_shared_1.stringifySequenceExpandedRowKey)(info.sequenceSubscriptionKey),
     info.auxiliaryKeys.join('.'),

package/dist/helpers/use-asset-drag-events.d.ts

@@ -1,6 +1,7 @@
-export declare const isFileDragEvent: (event: {
+export declare const isAssetUploadDragEvent: (event: {
     readonly dataTransfer: DataTransfer;
 }) => boolean;
+export declare const getRenderOutputDragData: (dataTransfer: DataTransfer) => import("@remotion/studio-protocol").RenderOutputDragData | null;
 declare function useAssetDragEvents({ name, parentFolder, dropLocation, setDropLocation }: {
     name: string | null;
     parentFolder: string | null;

package/dist/helpers/use-asset-drag-events.js

@@ -1,12 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isFileDragEvent = void 0;
+exports.getRenderOutputDragData = exports.isAssetUploadDragEvent = void 0;
+const studio_protocol_1 = require("@remotion/studio-protocol");
 const react_1 = require("react");
 const no_react_1 = require("remotion/no-react");
-const isFileDragEvent = (event) => {
-    return Array.from(event.dataTransfer.types).includes('Files');
+const isAssetUploadDragEvent = (event) => {
+    var _a;
+    return (Array.from(event.dataTransfer.types).includes('Files') ||
+        ((_a = studio_protocol_1.StudioProtocolInternals.getDragPreviewMetadata(event.dataTransfer.types)) === null || _a === void 0 ? void 0 : _a.type) === 'render-output');
 };
-exports.isFileDragEvent = isFileDragEvent;
+exports.isAssetUploadDragEvent = isAssetUploadDragEvent;
+const getRenderOutputDragData = (dataTransfer) => {
+    const parsed = studio_protocol_1.StudioProtocolInternals.parseDragData(dataTransfer);
+    return (parsed === null || parsed === void 0 ? void 0 : parsed.type) === 'render-output' ? parsed.data : null;
+};
+exports.getRenderOutputDragData = getRenderOutputDragData;
 function useAssetDragEvents({ name, parentFolder, dropLocation, setDropLocation, }) {
     const dragDepthRef = (0, react_1.useRef)(0);
     const combinedParents = (0, react_1.useMemo)(() => {
@@ -16,7 +24,7 @@ function useAssetDragEvents({ name, parentFolder, dropLocation, setDropLocation,
         return dropLocation === combinedParents;
     }, [combinedParents, dropLocation]);
     const onDragEnter = (0, react_1.useCallback)((event) => {
-        if (!(0, exports.isFileDragEvent)(event)) {
+        if (!(0, exports.isAssetUploadDragEvent)(event)) {
             return;
         }
         if (dragDepthRef.current === 0) {
@@ -27,7 +35,7 @@ function useAssetDragEvents({ name, parentFolder, dropLocation, setDropLocation,
         dragDepthRef.current++;
     }, [combinedParents, dragDepthRef, setDropLocation]);
     const onDragLeave = (0, react_1.useCallback)((event) => {
-        if (!(0, exports.isFileDragEvent)(event)) {
+        if (!(0, exports.isAssetUploadDragEvent)(event)) {
             return;
         }
         dragDepthRef.current--;

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,
@@ -1055,7 +1045,7 @@ const itemToSearchResult = (item, setSelectedModal, prefixes) => {
     if (item.subMenu) {
         return item.subMenu.items
             .map((subItem) => {
-            if (subItem.type === 'divider') {
+            if (subItem.type !== 'item') {
                 return null;
             }
             return itemToSearchResult(subItem, setSelectedModal, [
@@ -1082,7 +1072,7 @@ const makeSearchResults = (actions, setSelectedModal) => {
     const items = actions
         .map((menu) => {
         return menu.items.map((item) => {
-            if (item.type === 'divider') {
+            if (item.type !== 'item') {
                 return null;
             }
             return itemToSearchResult(item, setSelectedModal, []);

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

@@ -0,0 +1,9 @@
+import type { SequenceRegistrationControls } from 'remotion';
+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>({ 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>>[];