@remotion/studio 4.0.504 → 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-43m68z1k.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/hoverable.d.ts

@@ -0,0 +1,11 @@
+import type React from 'react';
+export declare const HOVERABLE_CLASS_NAME = "__remotion-hoverable";
+export declare const HOVER_GROUP_CLASS_NAME = "__remotion-hover-group";
+export declare const HOVER_GROUP_REVEAL_CLASS_NAME = "__remotion-hover-group-reveal";
+export declare const hoverableStyle: ({ idleBackground, hoverBackground, idleColor, hoverColor, }: {
+    idleBackground: string;
+    hoverBackground: string;
+    idleColor: string;
+    hoverColor: string;
+}) => React.CSSProperties;
+export declare const makeHoverableCSS: () => string;

package/dist/helpers/hoverable.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeHoverableCSS = exports.hoverableStyle = exports.HOVER_GROUP_REVEAL_CLASS_NAME = exports.HOVER_GROUP_CLASS_NAME = exports.HOVERABLE_CLASS_NAME = void 0;
+const colors_1 = require("./colors");
+// Purely visual hover styling must be driven by CSS `:hover` rather than
+// React state: When the Studio runs in an <iframe> (like in Browser Studio),
+// browsers can fail to deliver `pointerleave` when the pointer exits the
+// frame, which would leave a state-driven hover background stuck forever.
+// CSS `:hover` is maintained by the browser and self-corrects.
+// https://github.com/remotion-dev/remotion/issues/9886
+exports.HOVERABLE_CLASS_NAME = '__remotion-hoverable';
+exports.HOVER_GROUP_CLASS_NAME = '__remotion-hover-group';
+exports.HOVER_GROUP_REVEAL_CLASS_NAME = '__remotion-hover-group-reveal';
+const BG_VARIABLE = '--remotion-hoverable-bg';
+const HOVER_BG_VARIABLE = '--remotion-hoverable-hover-bg';
+const COLOR_VARIABLE = '--remotion-hoverable-color';
+const HOVER_COLOR_VARIABLE = '--remotion-hoverable-hover-color';
+// To disable the hover effect (e.g. for a disabled control), pass the idle
+// values as the hover values.
+const hoverableStyle = ({ idleBackground, hoverBackground, idleColor, hoverColor, }) => {
+    return {
+        [BG_VARIABLE]: idleBackground,
+        [HOVER_BG_VARIABLE]: hoverBackground,
+        [COLOR_VARIABLE]: idleColor,
+        [HOVER_COLOR_VARIABLE]: hoverColor,
+    };
+};
+exports.hoverableStyle = hoverableStyle;
+// The doubled class names give these rules a higher specificity than the
+// `.css-reset, .css-reset *` rule which sets `color` and `background` on
+// every descendant - the injection order of the two stylesheets is not
+// deterministic.
+// The `*` selectors re-establish color inheritance inside the hoverable
+// element so that text and `currentColor`-based icons follow the hover state.
+const hoverable = `.${exports.HOVERABLE_CLASS_NAME}.${exports.HOVERABLE_CLASS_NAME}`;
+const hoverGroup = `.${exports.HOVER_GROUP_CLASS_NAME}`;
+const reveal = `.${exports.HOVER_GROUP_REVEAL_CLASS_NAME}.${exports.HOVER_GROUP_REVEAL_CLASS_NAME}`;
+const makeHoverableCSS = () => `
+  ${hoverable} {
+    background-color: var(${BG_VARIABLE}, ${colors_1.TRANSPARENT});
+  }
+
+  ${hoverable},
+  ${hoverable} * {
+    color: var(${COLOR_VARIABLE}, inherit);
+  }
+
+  @media (hover: hover) {
+    ${hoverable}:hover,
+    ${hoverGroup}:hover ${hoverable} {
+      background-color: var(${HOVER_BG_VARIABLE}, var(${BG_VARIABLE}, ${colors_1.TRANSPARENT}));
+    }
+
+    ${hoverable}:hover,
+    ${hoverable}:hover *,
+    ${hoverGroup}:hover ${hoverable},
+    ${hoverGroup}:hover ${hoverable} * {
+      color: var(${HOVER_COLOR_VARIABLE}, var(${COLOR_VARIABLE}, inherit));
+    }
+
+    ${hoverGroup} ${reveal} {
+      opacity: 0;
+    }
+
+    ${hoverGroup}:hover ${reveal} {
+      opacity: 1;
+    }
+  }
+`;
+exports.makeHoverableCSS = makeHoverableCSS;

package/dist/helpers/inject-css.js

@@ -4,6 +4,7 @@ exports.injectCSS = void 0;
 const remotion_1 = require("remotion");
 const scroll_to_default_props_path_1 = require("../components/RenderModal/SchemaEditor/scroll-to-default-props-path");
 const colors_1 = require("./colors");
+const hoverable_1 = require("./hoverable");
 const makeDefaultGlobalCSS = () => {
     const dragAreaFactor = 2;
     const fromMiddle = 50 / dragAreaFactor;
@@ -153,6 +154,8 @@ const makeDefaultGlobalCSS = () => {
     color: var(--remotion-cli-internals-blue) !important;
     transition: color 0.2s ease-in-out;
   }
+
+  ${(0, hoverable_1.makeHoverableCSS)()}
   `.trim();
 };
 let injected = false;

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-is-fullscreen.d.ts

@@ -0,0 +1 @@
+export declare const useIsFullscreen: () => boolean;

package/dist/helpers/use-is-fullscreen.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsFullscreen = void 0;
+const react_1 = require("react");
+const getIsFullscreen = () => {
+    var _a;
+    return Boolean((_a = document.fullscreenElement) !== null && _a !== void 0 ? _a : document
+        .webkitFullscreenElement);
+};
+const useIsFullscreen = () => {
+    const [isFullscreen, setIsFullscreen] = (0, react_1.useState)(getIsFullscreen);
+    (0, react_1.useEffect)(() => {
+        const onFullscreenChange = () => {
+            setIsFullscreen(getIsFullscreen());
+        };
+        document.addEventListener('fullscreenchange', onFullscreenChange);
+        document.addEventListener('webkitfullscreenchange', onFullscreenChange);
+        return () => {
+            document.removeEventListener('fullscreenchange', onFullscreenChange);
+            document.removeEventListener('webkitfullscreenchange', onFullscreenChange);
+        };
+    }, []);
+    return isFullscreen;
+};
+exports.useIsFullscreen = useIsFullscreen;

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

@@ -39,18 +39,11 @@ const use_keybinding_1 = require("./use-keybinding");
 const openExternal = (link) => {
     window.open(link, '_blank');
 };
-const rotate = {
-    transform: `rotate(90deg)`,
+const inheritColor = {
     color: 'inherit',
 };
-const iconContainer = {
-    color: 'inherit',
-};
-const iconPath = {
-    color: 'inherit',
-};
-const ICON_SIZE = 16;
-const getFileMenu = ({ readOnlyStudio, closeMenu, previewServerState, setSelectedModal, }) => {
+const ICON_SIZE = 14;
+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;
@@ -151,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}`,
@@ -166,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',
@@ -261,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);
@@ -270,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;
@@ -302,7 +298,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
         let struct = [
             {
                 id: 'remotion',
-                label: (jsx_runtime_1.jsx(layout_1.Row, { align: "center", justify: "center", style: iconContainer, children: jsx_runtime_1.jsx("svg", { width: ICON_SIZE, height: ICON_SIZE, viewBox: "-100 -100 400 400", style: rotate, children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR, stroke: colors_1.CURRENT_COLOR, style: iconPath, strokeWidth: "100", strokeLinejoin: "round", d: "M 2 172 a 196 100 0 0 0 195 5 A 196 240 0 0 0 100 2.259 A 196 240 0 0 0 2 172 z" }) }) })),
+                label: (jsx_runtime_1.jsx(layout_1.Row, { align: "center", justify: "center", style: inheritColor, children: jsx_runtime_1.jsx("svg", { width: ICON_SIZE, height: ICON_SIZE, viewBox: "0 0 415 426", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: inheritColor, children: jsx_runtime_1.jsx("path", { d: "M93.4691 0.0367432C84.4873 0.520935 77.2494 1.93634 69.9553 4.69266C66.3176 6.05219 60.3548 9.0134 57.0734 11.062C43.3476 19.6103 32.8846 32.4606 27.428 47.4154C26.3405 50.3766 23.3966 59.8188 21.5027 66.3185C8.88329 109.768 1.7204 157.277 0.182822 207.561C-0.0609408 215.569 -0.0609408 234.639 0.182822 242.517C1.21413 275.854 4.42055 305.949 10.2334 336.641C12.596 349.063 16.3837 365.75 18.5776 373.33C23.059 388.732 32.2095 401.843 45.2227 411.453C53.9419 417.896 63.8425 422.217 74.8118 424.34C80.0996 425.365 87.075 425.83 92.2127 425.495C99.3194 425.029 113.42 423.148 124.877 421.118C176.517 411.974 224.22 395.604 267.478 372.175C294.874 357.332 318.294 341.26 340.888 321.761C363.408 302.355 382.609 281.478 399.504 258.049C403.423 252.63 405.392 249.464 407.361 245.478C412.424 235.198 414.805 224.974 414.786 213.539C414.786 202.886 412.761 193.425 408.392 183.741C406.292 179.066 404.286 175.714 399.785 169.345C383.21 145.898 364.815 125.467 342.389 105.614C307.624 74.8481 266.335 49.613 220.226 30.9334C210.232 26.8921 200.387 23.335 188.537 19.4799C163.448 11.3413 132.396 4.28293 106.126 0.763062C102.001 0.204346 96.3942 -0.112244 93.4691 0.0367432Z", fill: colors_1.CURRENT_COLOR, style: inheritColor }) }) })),
                 leaveLeftPadding: false,
                 items: [
                     {
@@ -333,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,
                             });
                         },
@@ -368,7 +347,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                         keyHint: null,
                         leftItem: null,
                         subMenu: null,
-                        quickSwitcherLabel: 'Configure License...',
+                        quickSwitcherLabel: 'Settings...',
                         disabled: readOnlyStudio || type !== 'connected',
                     },
                     {
@@ -409,6 +388,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
             getFileMenu({
                 readOnlyStudio,
                 closeMenu,
+                editorName,
                 previewServerState: type,
                 setSelectedModal,
             }),
@@ -496,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();
@@ -783,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',
@@ -846,7 +826,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                     {
                         id: 'shortcuts',
                         value: 'shortcuts',
-                        label: (0, use_keybinding_1.areKeyboardShortcutsDisabled)()
+                        label: keyboardShortcutsDisabled
                             ? 'Shortcuts (disabled)'
                             : 'Shortcuts',
                         onClick: () => {
@@ -863,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',
                     },
@@ -1032,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/icons/canvas-zoom.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export declare const CanvasZoomIcon: React.FC<{
+    readonly color: string;
+}>;
+export declare const CanvasFitIcon: React.FC<{
+    readonly color: string;
+}>;
+export declare const CanvasZoomOutIcon: React.FC<{
+    readonly color: string;
+}>;