@remotion/studio 4.0.504 → 4.0.506

package/dist/components/ContextMenu.js

@@ -36,7 +36,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ContextMenuForTarget = exports.ContextMenu = void 0;
+exports.ContextMenuForTarget = exports.ContextMenu = exports.resolveContextMenuItems = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = __importStar(require("react"));
@@ -47,6 +47,14 @@ const z_index_1 = require("../state/z-index");
 const portals_1 = require("./Menu/portals");
 const styles_1 = require("./Menu/styles");
 const MenuContent_1 = require("./NewComposition/MenuContent");
+const resolveContextMenuItems = async (getItems, event) => {
+    const result = await getItems(event);
+    if (result === false || result.length === 0) {
+        return null;
+    }
+    return [...result];
+};
+exports.resolveContextMenuItems = resolveContextMenuItems;
 const contextMenuFullScreenOverlay = {
     ...styles_1.fullScreenOverlay,
     pointerEvents: 'none',
@@ -62,7 +70,7 @@ const notifyContextMenuOpened = (id) => {
         detail: id,
     }));
 };
-const ContextMenuPortal = ({ sizeSource, currentZIndex, onHide, opened, values }) => {
+const ContextMenuPortal = ({ sizeSource, currentZIndex, onHide, opened }) => {
     const menuRef = (0, react_1.useRef)(null);
     const size = player_1.PlayerInternals.useElementSize(sizeSource, {
         triggerOnWindowResize: true,
@@ -154,11 +162,14 @@ const ContextMenuPortal = ({ sizeSource, currentZIndex, onHide, opened, values }
     if (!portalStyle) {
         return null;
     }
-    return react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: contextMenuFullScreenOverlay, children: jsx_runtime_1.jsx("div", { style: contextMenuOuterPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, outsideClickButton: "primary", children: jsx_runtime_1.jsx("div", { ref: menuRef, style: portalStyle, onPointerDown: onMenuPointerDown, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: values, onHide: onHide, leaveLeftSpace: true, preselectIndex: false, topItemCanBeUnselected: false, fixedHeight: null }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex));
+    return react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: contextMenuFullScreenOverlay, children: jsx_runtime_1.jsx("div", { style: contextMenuOuterPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, outsideClickButton: "primary", children: jsx_runtime_1.jsx("div", { ref: menuRef, style: portalStyle, onPointerDown: onMenuPointerDown, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: opened.values, onHide: onHide, leaveLeftSpace: true, preselectIndex: false, topItemCanBeUnselected: false, fixedHeight: null }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex));
 };
-exports.ContextMenu = react_1.default.forwardRef(({ children, values, onOpen, style = undefined, className = undefined, onPointerDown = undefined, }, forwardedRef) => {
+exports.ContextMenu = react_1.default.forwardRef(({ children, getItems, style = undefined, className = undefined, onPointerDown = undefined, }, forwardedRef) => {
     const ref = (0, react_1.useRef)(null);
     const idRef = (0, react_1.useRef)(nextContextMenuId++);
+    const invocationRef = (0, react_1.useRef)(0);
+    const getItemsRef = (0, react_1.useRef)(getItems);
+    getItemsRef.current = getItems;
     const [opened, setOpened] = (0, react_1.useState)({ type: 'not-open' });
     const { currentZIndex } = (0, z_index_1.useZIndex)();
     const setRef = (0, react_1.useCallback)((node) => {
@@ -177,21 +188,34 @@ exports.ContextMenu = react_1.default.forwardRef(({ children, values, onOpen, st
         if (!current) {
             return;
         }
-        const onClick = (e) => {
+        const onClick = async (e) => {
             e.preventDefault();
             e.stopPropagation();
-            if ((onOpen === null || onOpen === void 0 ? void 0 : onOpen()) === false) {
+            const currentInvocation = ++invocationRef.current;
+            const values = await (0, exports.resolveContextMenuItems)(getItemsRef.current, e);
+            if (currentInvocation !== invocationRef.current || values === null) {
                 return false;
             }
             notifyContextMenuOpened(idRef.current);
-            setOpened({ type: 'open', left: e.clientX, top: e.clientY });
+            setOpened({
+                type: 'open',
+                left: e.clientX,
+                top: e.clientY,
+                values,
+            });
             return false;
         };
         current.addEventListener('contextmenu', onClick);
         return () => {
             current.removeEventListener('contextmenu', onClick);
         };
-    }, [onOpen]);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        const invocation = invocationRef;
+        return () => {
+            invocation.current++;
+        };
+    }, []);
     const onHide = (0, react_1.useCallback)(() => {
         setOpened({ type: 'not-open' });
     }, []);
@@ -208,13 +232,15 @@ exports.ContextMenu = react_1.default.forwardRef(({ children, values, onOpen, st
         };
     }, [onHide]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("div", { ref: setRef, onContextMenu: () => false, style: style, className: className, onPointerDown: onPointerDown, children: children }), opened.type === 'open' ? (jsx_runtime_1.jsx(ContextMenuPortal, { sizeSource: ref, currentZIndex: currentZIndex, onHide: onHide, opened: opened, values: values })) : null] }));
+            jsx_runtime_1.jsx("div", { ref: setRef, onContextMenu: () => false, style: style, className: className, onPointerDown: onPointerDown, children: children }), opened.type === 'open' ? (jsx_runtime_1.jsx(ContextMenuPortal, { sizeSource: ref, currentZIndex: currentZIndex, onHide: onHide, opened: opened })) : null] }));
 });
 exports.ContextMenu.displayName = 'ContextMenu';
-const ContextMenuForTarget = ({ triggerRef, values, onOpen }) => {
+const ContextMenuForTarget = ({ triggerRef, getItems }) => {
     const idRef = (0, react_1.useRef)(nextContextMenuId++);
+    const invocationRef = (0, react_1.useRef)(0);
+    const getItemsRef = (0, react_1.useRef)(getItems);
+    getItemsRef.current = getItems;
     const [opened, setOpened] = (0, react_1.useState)({ type: 'not-open' });
-    const [openedValues, setOpenedValues] = (0, react_1.useState)(values);
     const [body, setBody] = (0, react_1.useState)(null);
     const { currentZIndex } = (0, z_index_1.useZIndex)();
     (0, react_1.useEffect)(() => {
@@ -231,24 +257,31 @@ const ContextMenuForTarget = ({ triggerRef, values, onOpen }) => {
             const e = event;
             e.preventDefault();
             e.stopPropagation();
-            const result = await (onOpen === null || onOpen === void 0 ? void 0 : onOpen(e));
-            if (result === false) {
-                return false;
-            }
-            const nextValues = Array.isArray(result) ? result : values;
-            if (nextValues.length === 0) {
+            const currentInvocation = ++invocationRef.current;
+            const values = await (0, exports.resolveContextMenuItems)(getItemsRef.current, e);
+            if (currentInvocation !== invocationRef.current || values === null) {
                 return false;
             }
             notifyContextMenuOpened(idRef.current);
-            setOpenedValues(nextValues);
-            setOpened({ type: 'open', left: e.clientX, top: e.clientY });
+            setOpened({
+                type: 'open',
+                left: e.clientX,
+                top: e.clientY,
+                values,
+            });
             return false;
         };
         current.addEventListener('contextmenu', onClick);
         return () => {
             current.removeEventListener('contextmenu', onClick);
         };
-    }, [onOpen, triggerRef, values]);
+    }, [triggerRef]);
+    (0, react_1.useEffect)(() => {
+        const invocation = invocationRef;
+        return () => {
+            invocation.current++;
+        };
+    }, []);
     const onHide = (0, react_1.useCallback)(() => {
         setOpened({ type: 'not-open' });
     }, []);
@@ -264,6 +297,6 @@ const ContextMenuForTarget = ({ triggerRef, values, onOpen }) => {
             window.removeEventListener(contextMenuOpenedEvent, onOtherContextMenuOpened);
         };
     }, [onHide]);
-    return opened.type === 'open' ? (jsx_runtime_1.jsx(ContextMenuPortal, { sizeSource: body, currentZIndex: currentZIndex, onHide: onHide, opened: opened, values: [...openedValues] })) : null;
+    return opened.type === 'open' ? (jsx_runtime_1.jsx(ContextMenuPortal, { sizeSource: body, currentZIndex: currentZIndex, onHide: onHide, opened: opened })) : null;
 };
 exports.ContextMenuForTarget = ContextMenuForTarget;

package/dist/components/Editor.js

@@ -38,6 +38,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
+const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const noop_1 = require("../helpers/noop");
 const studio_fit_padding_1 = require("../helpers/studio-fit-padding");
@@ -62,6 +63,7 @@ const background = {
     position: 'absolute',
 };
 const Editor = ({ Root, readOnlyStudio }) => {
+    (0, client_id_1.useStudioConfigRevision)();
     const [drawElement, setDrawElement] = (0, react_1.useState)(null);
     const size = player_1.PlayerInternals.useElementSize(drawElement, {
         triggerOnWindowResize: false,

package/dist/components/EditorGuides/Guide.js

@@ -165,7 +165,7 @@ const GuideComp = ({ guide, canvasDimensions, scale }) => {
             .filter(no_react_1.NoReactInternals.truthy)
             .join(' ');
     }, [activeClassName]);
-    const values = (0, react_1.useMemo)(() => {
+    const getContextMenuItems = (0, react_1.useCallback)(() => {
         return [
             {
                 id: '1',
@@ -191,6 +191,6 @@ const GuideComp = ({ guide, canvasDimensions, scale }) => {
             },
         ];
     }, [clearSelection, guide.id, selected, setGuidesList]);
-    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: values, onOpen: null, children: jsx_runtime_1.jsx("div", { style: guideStyle, onPointerDown: onPointerDown, onClick: onClick, className: "__remotion_editor_guide", [should_clear_selection_on_pointer_down_1.PREVENT_CLEAR_SELECTION_ON_POINTER_DOWN_ATTR]: 'true', onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsx("div", { style: guideContentStyle, className: guideClassName }) }) }));
+    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: jsx_runtime_1.jsx("div", { style: guideStyle, onPointerDown: onPointerDown, onClick: onClick, className: "__remotion_editor_guide", [should_clear_selection_on_pointer_down_1.PREVENT_CLEAR_SELECTION_ON_POINTER_DOWN_ATTR]: 'true', onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsx("div", { style: guideContentStyle, className: guideClassName }) }) }));
 };
 exports.default = (0, react_1.memo)(GuideComp);

package/dist/components/EffectPickerModal.js

@@ -131,7 +131,7 @@ const EffectPickerResult = ({ item, selected, onSelected }) => {
     const onClick = (0, react_1.useCallback)(() => {
         onSelected(item);
     }, [item, onSelected]);
-    const contextMenuValues = (0, react_1.useMemo)(() => {
+    const getContextMenuItems = (0, react_1.useCallback)(() => {
         const documentationLink = (0, studio_shared_1.getEffectDocumentationLink)(item);
         return [
             {
@@ -150,12 +150,12 @@ const EffectPickerResult = ({ item, selected, onSelected }) => {
             },
         ];
     }, [item]);
-    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: null, children: jsx_runtime_1.jsxs("div", { ref: ref, style: style, onClick: onClick, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), children: [
+    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: jsx_runtime_1.jsxs("div", { ref: ref, style: style, onClick: onClick, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), children: [
                 jsx_runtime_1.jsx(effects_1.EffectsIcon, { color: selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: labelContainer, children: jsx_runtime_1.jsx("div", { style: labelStyle, children: item.label }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: category, children: item.category })
             ] }) }));
 };
 const EffectPickerContent = ({ state }) => {
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const [aboutEffectsHovered, setAboutEffectsHovered] = (0, react_1.useState)(false);
     const [query, setQuery] = (0, react_1.useState)('');
     const [selectedIndex, setSelectedIndex] = (0, react_1.useState)(0);

package/dist/components/GlobalKeybindings.js

@@ -24,7 +24,7 @@ const sequencePropShortcuts = {
 const hasOwnProperty = (obj, key) => Object.prototype.hasOwnProperty.call(obj, key);
 const GlobalKeybindings = () => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const { setCheckerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
     const { setEditorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
     const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
@@ -58,7 +58,8 @@ const GlobalKeybindings = () => {
         if (!(track === null || track === void 0 ? void 0 : track.sequence.controls)) {
             return false;
         }
-        const { schema, currentRuntimeValueDotNotation } = track.sequence.controls;
+        const { schema, runtimeValues } = track.sequence.controls;
+        const currentRuntimeValueDotNotation = runtimeValues.getSnapshot();
         if (!hasOwnProperty(schema, fieldKey) &&
             !hasOwnProperty(currentRuntimeValueDotNotation, fieldKey)) {
             return false;

package/dist/components/InlineAction.d.ts

@@ -7,4 +7,4 @@ export type InlineActionProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElemen
     readonly variant: 'compact' | null;
     readonly style?: React.CSSProperties;
 };
-export declare const InlineAction: ({ renderAction, onClick, disabled, title, unhoveredColor, variant, style: customStyle, ...buttonProps }: InlineActionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InlineAction: ({ renderAction, onClick, disabled, title, unhoveredColor, variant, style: customStyle, className, ...buttonProps }: InlineActionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/InlineAction.js

@@ -4,23 +4,14 @@ exports.InlineAction = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
+const hoverable_1 = require("../helpers/hoverable");
 const z_index_1 = require("../state/z-index");
-const InlineAction = ({ renderAction, onClick, disabled, title, unhoveredColor = colors_1.LIGHT_TEXT, variant, style: customStyle, ...buttonProps }) => {
+const InlineAction = ({ renderAction, onClick, disabled, title, unhoveredColor = colors_1.LIGHT_TEXT, variant, style: customStyle, className, ...buttonProps }) => {
     var _a;
     const { tabIndex } = (0, z_index_1.useZIndex)();
-    const [hovered, setHovered] = (0, react_1.useState)(false);
-    const onPointerEnter = (0, react_1.useCallback)(() => {
-        setHovered(true);
-    }, []);
-    const onPointerLeave = (0, react_1.useCallback)(() => {
-        setHovered(false);
-    }, []);
     const style = (0, react_1.useMemo)(() => {
         return {
             border: 'none',
-            background: disabled
-                ? colors_1.TRANSPARENT
-                : (0, colors_1.getBackgroundFromHoverState)({ hovered, selected: false }),
             height: 24,
             width: variant === 'compact' ? 14 : 24,
             padding: 0,
@@ -30,9 +21,19 @@ const InlineAction = ({ renderAction, onClick, disabled, title, unhoveredColor =
             borderRadius: 3,
             opacity: disabled ? 0.5 : 1,
             pointerEvents: disabled ? 'none' : 'auto',
+            ...(0, hoverable_1.hoverableStyle)({
+                idleBackground: colors_1.TRANSPARENT,
+                hoverBackground: disabled
+                    ? colors_1.TRANSPARENT
+                    : (0, colors_1.getBackgroundFromHoverState)({ hovered: true, selected: false }),
+                idleColor: unhoveredColor,
+                hoverColor: disabled ? unhoveredColor : colors_1.WHITE,
+            }),
             ...customStyle,
         };
-    }, [customStyle, disabled, hovered, variant]);
-    return (jsx_runtime_1.jsx("button", { ...buttonProps, type: "button", disabled: disabled, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, style: style, tabIndex: tabIndex, title: title, "aria-label": (_a = buttonProps['aria-label']) !== null && _a !== void 0 ? _a : title, children: renderAction(hovered ? colors_1.WHITE : unhoveredColor) }));
+    }, [customStyle, disabled, unhoveredColor, variant]);
+    return (jsx_runtime_1.jsx("button", { ...buttonProps, type: "button", className: className
+            ? `${hoverable_1.HOVERABLE_CLASS_NAME} ${className}`
+            : hoverable_1.HOVERABLE_CLASS_NAME, disabled: disabled, onClick: onClick, style: style, tabIndex: tabIndex, title: title, "aria-label": (_a = buttonProps['aria-label']) !== null && _a !== void 0 ? _a : title, children: renderAction(colors_1.CURRENT_COLOR) }));
 };
 exports.InlineAction = InlineAction;

package/dist/components/InlineCaptionInspector.d.ts

@@ -1,10 +1,10 @@
 import type { Caption } from '@remotion/captions';
 import React from 'react';
-import type { SequenceControls, SequencePropsSubscriptionKey } from 'remotion';
+import type { SequencePropsSubscriptionKey, SequenceRegistrationControls } from 'remotion';
 import type { CodePosition } from '../error-overlay/react-overlay/utils/get-source-map';
 export declare const InlineCaptionInspector: React.FC<{
     readonly captions: Caption[];
-    readonly controls: SequenceControls;
+    readonly controls: SequenceRegistrationControls;
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly readOnlyStudio: boolean;
     readonly validatedLocation: CodePosition;

package/dist/components/InlineDropdown.d.ts

@@ -1,5 +1,7 @@
 import { type InlineActionProps } from './InlineAction';
 import type { ComboboxValue } from './NewComposition/ComboBox';
-export declare const InlineDropdown: ({ values, unhoveredColor, ...props }: Omit<InlineActionProps, "onClick"> & {
-    readonly values: ComboboxValue[];
+export declare const InlineDropdown: ({ values, getItems, onOpenChange, unhoveredColor, ...props }: Omit<InlineActionProps, "onClick"> & {
+    readonly values?: ComboboxValue[] | undefined;
+    readonly getItems?: (() => ComboboxValue[]) | undefined;
+    readonly onOpenChange?: ((open: boolean) => void) | undefined;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/components/InlineDropdown.js

@@ -16,7 +16,12 @@ const InlineAction_1 = require("./InlineAction");
 const portals_1 = require("./Menu/portals");
 const styles_1 = require("./Menu/styles");
 const MenuContent_1 = require("./NewComposition/MenuContent");
-const InlineDropdown = ({ values, unhoveredColor, ...props }) => {
+const container = {
+    display: 'flex',
+    height: 24,
+};
+const InlineDropdown = ({ values, getItems, onOpenChange, unhoveredColor, ...props }) => {
+    var _a, _b;
     const ref = (0, react_1.useRef)(null);
     const [opened, setOpened] = (0, react_1.useState)({ type: 'not-open' });
     const { currentZIndex } = (0, z_index_1.useZIndex)();
@@ -26,10 +31,21 @@ const InlineDropdown = ({ values, unhoveredColor, ...props }) => {
     });
     const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
     const onClick = (0, react_1.useCallback)((e) => {
+        var _a;
         e.preventDefault();
         e.stopPropagation();
-        setOpened({ type: 'open', left: e.clientX, top: e.clientY });
-    }, []);
+        const invocationValues = (_a = getItems === null || getItems === void 0 ? void 0 : getItems()) !== null && _a !== void 0 ? _a : null;
+        if ((invocationValues === null || invocationValues === void 0 ? void 0 : invocationValues.length) === 0) {
+            return;
+        }
+        setOpened({
+            type: 'open',
+            left: e.clientX,
+            top: e.clientY,
+            values: invocationValues,
+        });
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(true);
+    }, [getItems, onOpenChange]);
     const spaceToBottom = (0, react_1.useMemo)(() => {
         if (size && opened.type === 'open') {
             return size.windowSize.height - opened.top;
@@ -78,10 +94,11 @@ const InlineDropdown = ({ values, unhoveredColor, ...props }) => {
     }, [opened, size, isMobileLayout, spaceToTop, spaceToBottom]);
     const onHide = (0, react_1.useCallback)(() => {
         setOpened({ type: 'not-open' });
-    }, []);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(false);
+    }, [onOpenChange]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("div", { ref: ref, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: onClick, unhoveredColor: opened.type === 'open' ? colors_1.WHITE : unhoveredColor, ...props }) }), portalStyle
-                ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: jsx_runtime_1.jsx("div", { style: portalStyle, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: values, onHide: onHide, leaveLeftSpace: true, preselectIndex: false, topItemCanBeUnselected: false, fixedHeight: null }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
+            jsx_runtime_1.jsx("div", { ref: ref, style: container, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: onClick, unhoveredColor: opened.type === 'open' ? colors_1.WHITE : unhoveredColor, ...props }) }), portalStyle && opened.type === 'open'
+                ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: jsx_runtime_1.jsx("div", { style: portalStyle, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: (_b = (_a = opened.values) !== null && _a !== void 0 ? _a : values) !== null && _b !== void 0 ? _b : [], onHide: onHide, leaveLeftSpace: true, preselectIndex: false, topItemCanBeUnselected: false, fixedHeight: null }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));
 };
 exports.InlineDropdown = InlineDropdown;

package/dist/components/InspectorOpenInEditor.d.ts

@@ -2,4 +2,5 @@ import React from 'react';
 import type { OriginalPosition } from '../error-overlay/react-overlay/utils/get-source-map';
 export declare const InspectorOpenInEditor: React.FC<{
     readonly location: OriginalPosition | null;
+    readonly label?: React.ReactNode;
 }>;

package/dist/components/InspectorOpenInEditor.js

@@ -15,17 +15,21 @@ const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const use_default_editor_info_1 = require("./use-default-editor-info");
 const splitButton = {
     alignItems: 'center',
+    borderRadius: 3,
     display: 'inline-flex',
     flexDirection: 'row',
     flexShrink: 0,
+    gap: 1,
     height: 24,
+    overflow: 'hidden',
 };
 const mainButtonBase = {
     alignItems: 'center',
     background: colors_1.TRANSPARENT,
     border: 'none',
-    borderRadius: 3,
+    borderRadius: '3px 0 0 3px',
     color: colors_1.LIGHT_TEXT,
+    columnGap: 4,
     display: 'inline-flex',
     fontFamily: 'sans-serif',
     fontSize: 11,
@@ -42,12 +46,13 @@ const menuLabel = {
 };
 const editorButtonIconSize = 18;
 const editorMenuIconSize = 18;
-const InspectorOpenInEditor = ({ location }) => {
+const InspectorOpenInEditor = ({ label, location }) => {
     var _a;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const [hovered, setHovered] = (0, react_1.useState)(false);
+    const [dropdownOpened, setDropdownOpened] = (0, react_1.useState)(false);
     const editorPickerAvailable = (0, use_default_editor_info_1.canUseEditorPicker)(previewServerState.type === 'connected');
     const editorInfo = (0, use_default_editor_info_1.useDefaultEditorInfo)(editorPickerAvailable);
     const openWithEditor = (0, react_1.useCallback)(async (editorId) => {
@@ -68,18 +73,30 @@ const InspectorOpenInEditor = ({ location }) => {
         event.stopPropagation();
         openWithEditor(null).catch(() => undefined);
     }, [openWithEditor]);
+    const mainHovered = hovered && !dropdownOpened;
     const mainButtonStyle = (0, react_1.useMemo)(() => {
         return {
             ...mainButtonBase,
             background: (0, colors_1.getBackgroundFromHoverState)({
-                hovered,
+                hovered: mainHovered,
                 selected: false,
             }),
-            color: hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT,
+            color: mainHovered ? colors_1.WHITE : colors_1.LIGHT_TEXT,
             opacity: canOpenDefault ? 1 : 0.5,
             pointerEvents: canOpenDefault ? 'auto' : 'none',
         };
-    }, [canOpenDefault, hovered]);
+    }, [canOpenDefault, mainHovered]);
+    const dropdownForegroundColor = hovered || dropdownOpened ? colors_1.WHITE : colors_1.LIGHT_TEXT;
+    const dropdownStyle = (0, react_1.useMemo)(() => {
+        return {
+            background: (0, colors_1.getBackgroundFromHoverState)({
+                hovered,
+                selected: dropdownOpened,
+            }),
+            borderRadius: '0 3px 3px 0',
+            color: dropdownForegroundColor,
+        };
+    }, [dropdownForegroundColor, dropdownOpened, hovered]);
     const renderDropdownAction = (0, react_1.useCallback)((color) => {
         return jsx_runtime_1.jsx(caret_1.CaretDown, { color: color, small: true });
     }, []);
@@ -110,7 +127,13 @@ const InspectorOpenInEditor = ({ location }) => {
                 label: jsx_runtime_1.jsx("span", { style: menuLabel, children: "Set default editor..." }),
                 leftItem: null,
                 onClick: () => {
-                    setSelectedModal({ type: 'configure-default-editor' });
+                    var _a;
+                    var _b;
+                    setSelectedModal({
+                        type: 'settings',
+                        initialTab: 'apps',
+                        initialPublicLicenseKey: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.publicLicenseKey) !== null && _b !== void 0 ? _b : null,
+                    });
                 },
                 quickSwitcherLabel: null,
                 subMenu: null,
@@ -128,8 +151,9 @@ const InspectorOpenInEditor = ({ location }) => {
     if (!editorPickerAvailable) {
         return null;
     }
-    return (jsx_runtime_1.jsxs("div", { style: splitButton, children: [
-            jsx_runtime_1.jsx("button", { "aria-label": `Open in ${editorName}`, disabled: !canOpenDefault, onClick: onOpenDefault, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), style: mainButtonStyle, tabIndex: tabIndex, title: `Open in ${editorName}`, type: "button", children: jsx_runtime_1.jsx(editor_1.EditorIcon, { editorId: preferredEditorId, size: editorButtonIconSize }) }), jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { renderAction: renderDropdownAction, title: "Open in another editor", values: menuItems, variant: "compact" })
+    return (jsx_runtime_1.jsxs("div", { style: splitButton, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), children: [
+            jsx_runtime_1.jsxs("button", { "aria-label": `Open in ${editorName}`, disabled: !canOpenDefault, onClick: onOpenDefault, style: mainButtonStyle, tabIndex: tabIndex, title: `Open in ${editorName}`, type: "button", children: [label, jsx_runtime_1.jsx(editor_1.EditorIcon, { editorId: preferredEditorId, size: editorButtonIconSize })
+                ] }), jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { onOpenChange: setDropdownOpened, renderAction: renderDropdownAction, style: dropdownStyle, title: "Open in another editor", unhoveredColor: dropdownForegroundColor, values: menuItems, variant: "compact" })
         ] }));
 };
 exports.InspectorOpenInEditor = InspectorOpenInEditor;

package/dist/components/InspectorPanel/AlignmentControls.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
+const use_runtime_values_1 = require("../../helpers/use-runtime-values");
 const align_bottom_1 = require("../../icons/align-bottom");
 const align_center_horizontal_1 = require("../../icons/align-center-horizontal");
 const align_center_vertical_1 = require("../../icons/align-center-vertical");
@@ -48,6 +49,7 @@ const AlignmentButton = ({ onClick, title, Icon, disabled }) => {
 };
 const AlignmentControls = ({ track }) => {
     var _a;
+    const runtimeValues = (0, use_runtime_values_1.useRuntimeValues)(track.sequence.controls);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
@@ -79,7 +81,7 @@ const AlignmentControls = ({ track }) => {
         const dragOverrides = (_b = getDragOverrides(nodePath)) !== null && _b !== void 0 ? _b : {};
         const activeSchema = (0, selected_outline_drag_1.getSelectedOutlineActiveSchema)({
             schema: track.sequence.controls.schema,
-            currentRuntimeValueDotNotation: track.sequence.controls.currentRuntimeValueDotNotation,
+            currentRuntimeValueDotNotation: runtimeValues,
             dragOverrides,
             propStatus: nodePropStatuses,
             frame: sourceFrame,
@@ -176,6 +178,7 @@ const AlignmentControls = ({ track }) => {
         currentCompositionMetadata,
         timelinePosition,
         propStatuses,
+        runtimeValues,
         getDragOverrides,
         setPropStatuses,
     ]);
@@ -192,7 +195,7 @@ const AlignmentControls = ({ track }) => {
     const renderDragOverrides = (_a = getDragOverrides(renderNodePath)) !== null && _a !== void 0 ? _a : {};
     const renderActiveSchema = (0, selected_outline_drag_1.getSelectedOutlineActiveSchema)({
         schema: track.sequence.controls.schema,
-        currentRuntimeValueDotNotation: track.sequence.controls.currentRuntimeValueDotNotation,
+        currentRuntimeValueDotNotation: runtimeValues,
         dragOverrides: renderDragOverrides,
         propStatus: renderNodePropStatuses,
         frame: renderSourceFrame,

package/dist/components/InspectorPanel/CompositionInspector.js

@@ -4,6 +4,7 @@ exports.CompositionInspector = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
+const browse_elements_1 = require("../../icons/browse-elements");
 const frame_1 = require("../../icons/frame");
 const solid_1 = require("../../icons/solid");
 const video_1 = require("../../icons/video");
@@ -26,13 +27,26 @@ const actionIconStyle = {
     height: 18,
     width: 18,
 };
+const browseElementsIconStyle = {
+    height: 22,
+    width: 22,
+};
+const browseElementsIconContainerStyle = {
+    height: 22,
+    marginLeft: -2,
+    marginRight: -2,
+    width: 22,
+};
 const CompositionActions = ({ readOnlyStudio }) => {
     const { canInsertAsset, canInsertComposition, canInsertSolid, canShowInsertAsset, canShowInsertComposition, canShowInsertSolid, insertAsset, insertComposition, insertSolid, } = (0, use_composition_actions_1.useCompositionActions)();
+    const openElementsLibrary = (0, react_1.useCallback)(() => {
+        window.open('https://www.remotion.dev/elements', '_blank', 'noopener,noreferrer');
+    }, []);
     if ((readOnlyStudio && !canShowInsertSolid) ||
         (!canShowInsertAsset && !canShowInsertComposition && !canShowInsertSolid)) {
         return null;
     }
-    return (jsx_runtime_1.jsxs(common_1.InspectorActionSection, { children: [canShowInsertSolid ? (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: !canInsertSolid, onClick: insertSolid, renderIcon: (color) => (jsx_runtime_1.jsx(solid_1.SolidIcon, { color: color, style: actionIconStyle })), children: "Add Solid" })) : null, canShowInsertAsset ? (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: !canInsertAsset, onClick: insertAsset, renderIcon: (color) => (jsx_runtime_1.jsx(frame_1.PicIcon, { color: color, style: actionIconStyle })), children: "Add asset..." })) : null, canShowInsertComposition ? (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: !canInsertComposition, onClick: insertComposition, renderIcon: (color) => (jsx_runtime_1.jsx(video_1.FilmIcon, { color: color, style: actionIconStyle })), children: "Add composition..." })) : null] }));
+    return (jsx_runtime_1.jsxs(common_1.InspectorActionSection, { children: [canShowInsertSolid ? (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: !canInsertSolid, onClick: insertSolid, renderIcon: (color) => (jsx_runtime_1.jsx(solid_1.SolidIcon, { color: color, style: actionIconStyle })), children: "Add Solid" })) : null, canShowInsertAsset ? (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: !canInsertAsset, onClick: insertAsset, renderIcon: (color) => (jsx_runtime_1.jsx(frame_1.PicIcon, { color: color, style: actionIconStyle })), children: "Add asset..." })) : null, canShowInsertComposition ? (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: !canInsertComposition, onClick: insertComposition, renderIcon: (color) => (jsx_runtime_1.jsx(video_1.FilmIcon, { color: color, style: actionIconStyle })), children: "Add composition..." })) : null, canShowInsertAsset ? (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: false, iconContainerStyle: browseElementsIconContainerStyle, onClick: openElementsLibrary, renderIcon: (color) => (jsx_runtime_1.jsx(browse_elements_1.BrowseElementsIcon, { color: color, style: browseElementsIconStyle })), title: "Open the Remotion Elements library in a new tab. Install an Element there to send it to this composition.", children: "Browse Elements..." })) : null] }));
 };
 const CompositionDefaultPropsSection = ({ composition, currentDefaultProps, readOnlyStudio, setDefaultProps }) => {
     var _a;

package/dist/components/InspectorPanel/ConnectedCompositionsSection.js

@@ -40,11 +40,11 @@ const ConnectedCompositionsSection = ({ connectedCompositions }) => {
 exports.ConnectedCompositionsSection = ConnectedCompositionsSection;
 const ConnectedCompositionRow = ({ composition }) => {
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
         .previewServerState.type;
     const resolvedLocation = (0, use_resolved_stack_1.useResolvedStack)(composition.stack);
-    const contextMenuItems = (0, react_1.useMemo)(() => (0, composition_menu_items_1.getCompositionContextMenuItems)({
+    const getContextMenuItems = (0, react_1.useCallback)(() => (0, composition_menu_items_1.getCompositionContextMenuItems)({
         closeMenu: noop_1.noop,
         composition,
         connectionStatus,
@@ -53,5 +53,5 @@ const ConnectedCompositionRow = ({ composition }) => {
         resolvedLocation,
         setSelectedModal,
     }), [composition, connectionStatus, resolvedLocation, setSelectedModal]);
-    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuItems, onOpen: null, style: compositionContextMenuStyle, children: jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: false, onClick: () => selectComposition(composition, true), renderIcon: (color) => (jsx_runtime_1.jsx(CompositionOrStillIcon_1.CompositionOrStillIcon, { color: color, composition: composition, style: compositionIconStyle })), children: composition.id }) }));
+    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, style: compositionContextMenuStyle, children: jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: false, onClick: () => selectComposition(composition, true), renderIcon: (color) => (jsx_runtime_1.jsx(CompositionOrStillIcon_1.CompositionOrStillIcon, { color: color, composition: composition, style: compositionIconStyle })), children: composition.id }) }));
 };

package/dist/components/InspectorPanel/EasingInspector.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
+const use_runtime_values_1 = require("../../helpers/use-runtime-values");
 const plus_1 = require("../../icons/plus");
 const render_frame_1 = require("../../state/render-frame");
 const is_menu_item_1 = require("../Menu/is-menu-item");
@@ -26,8 +27,9 @@ const addKeyframeIcon = {
     width: 18,
 };
 const EasingInspector = ({ selection }) => {
-    var _a, _b;
+    var _a, _b, _c;
     const track = (0, use_track_for_selection_1.useTrackForSelection)(selection);
+    const runtimeValues = (0, use_runtime_values_1.useRuntimeValues)((_a = track === null || track === void 0 ? void 0 : track.sequence.controls) !== null && _a !== void 0 ? _a : null);
     const videoConfig = (0, remotion_1.useVideoConfig)();
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
@@ -44,7 +46,7 @@ const EasingInspector = ({ selection }) => {
         overrideIdsToNodePaths: overrideIdToNodePathMappings,
         propStatuses,
     }), [overrideIdToNodePathMappings, propStatuses, selection, sequences]);
-    const initialEasing = (_a = easingUpdate === null || easingUpdate === void 0 ? void 0 : easingUpdate.currentEasing) !== null && _a !== void 0 ? _a : null;
+    const initialEasing = (_b = easingUpdate === null || easingUpdate === void 0 ? void 0 : easingUpdate.currentEasing) !== null && _b !== void 0 ? _b : null;
     const easingDetails = (0, react_1.useMemo)(() => {
         var _a, _b, _c, _d, _e, _f, _g;
         if (easingUpdate === null || track === null) {
@@ -61,7 +63,7 @@ const EasingInspector = ({ selection }) => {
             }
             const sequenceFields = (0, timeline_layout_1.getFieldsToShow)({
                 schema: track.sequence.controls.schema,
-                currentRuntimeValueDotNotation: track.sequence.controls.currentRuntimeValueDotNotation,
+                currentRuntimeValueDotNotation: runtimeValues,
                 getDragOverrides,
                 propStatuses,
                 nodePath: easingUpdate.nodePath,
@@ -100,9 +102,10 @@ const EasingInspector = ({ selection }) => {
         getDragOverrides,
         getEffectDragOverrides,
         propStatuses,
+        runtimeValues,
         track,
     ]);
-    const fieldLabel = (_b = easingDetails === null || easingDetails === void 0 ? void 0 : easingDetails.fieldLabel) !== null && _b !== void 0 ? _b : null;
+    const fieldLabel = (_c = easingDetails === null || easingDetails === void 0 ? void 0 : easingDetails.fieldLabel) !== null && _c !== void 0 ? _c : null;
     const currentEasingSelection = (0, react_1.useMemo)(() => {
         if (easingUpdate === null || track === null) {
             return null;