@remotion/studio 4.0.505 → 4.0.507

package/dist/components/ConfigureLicenseModal.js

@@ -1,24 +1,25 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ConfigureLicenseModal = void 0;
+exports.LicenseSettings = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
-const modals_1 = require("../state/modals");
-const call_api_1 = require("./call-api");
 const Checkbox_1 = require("./Checkbox");
 const layout_1 = require("./layout");
 const LicenseKeyValidation_1 = require("./LicenseKeyValidation");
-const ModalButton_1 = require("./ModalButton");
-const ModalContainer_1 = require("./ModalContainer");
-const ModalFooter_1 = require("./ModalFooter");
-const ModalHeader_1 = require("./ModalHeader");
 const RemInput_1 = require("./NewComposition/RemInput");
 const ValidationMessage_1 = require("./NewComposition/ValidationMessage");
+const SettingsContext_1 = require("./SettingsContext");
+const use_auto_save_config_1 = require("./use-auto-save-config");
+const container = {
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'column',
+    minWidth: 0,
+};
 const content = {
+    flex: 1,
     padding: 16,
-    width: 540,
-    maxWidth: 'calc(100vw - 40px)',
 };
 const description = {
     color: colors_1.LIGHT_TEXT,
@@ -26,7 +27,6 @@ const description = {
     fontSize: 14,
     lineHeight: 1.5,
     margin: 0,
-    marginTop: 10,
 };
 const descriptionLink = {
     color: colors_1.WHITE,
@@ -59,40 +59,44 @@ const inputLabel = {
     marginBottom: 6,
     marginTop: 10,
 };
-const ConfigureLicenseModal = ({ initialPublicLicenseKey }) => {
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
-    const initialLicenseType = initialPublicLicenseKey === 'free-license'
+const LicenseSettings = () => {
+    const { error: settingsError, publicLicenseKey, revision } = (0, SettingsContext_1.useSettings)();
+    const initialLicenseType = publicLicenseKey === 'free-license'
         ? 'free'
-        : initialPublicLicenseKey === null
+        : publicLicenseKey === null
             ? null
             : 'company';
     const [licenseType, setLicenseType] = (0, react_1.useState)(initialLicenseType);
-    const [companyLicenseKey, setCompanyLicenseKey] = (0, react_1.useState)(initialLicenseType === 'company' ? (initialPublicLicenseKey !== null && initialPublicLicenseKey !== void 0 ? initialPublicLicenseKey : '') : '');
-    const [isSubmitting, setIsSubmitting] = (0, react_1.useState)(false);
+    const [companyLicenseKey, setCompanyLicenseKey] = (0, react_1.useState)(initialLicenseType === 'company' ? (publicLicenseKey !== null && publicLicenseKey !== void 0 ? publicLicenseKey : '') : '');
+    const [companyLicenseKeyToSave, setCompanyLicenseKeyToSave] = (0, react_1.useState)(companyLicenseKey);
     const [error, setError] = (0, react_1.useState)(null);
+    const [syncedRevision, setSyncedRevision] = (0, react_1.useState)(revision);
     const [isValidatingLicenseKey, setIsValidatingLicenseKey] = (0, react_1.useState)(false);
     const [remoteValidationMessage, setRemoteValidationMessage] = (0, react_1.useState)(null);
     const [licenseKeyDetails, setLicenseKeyDetails] = (0, react_1.useState)(null);
-    const dismiss = (0, react_1.useCallback)(() => {
-        setSelectedModal(null);
-    }, [setSelectedModal]);
-    const chooseFreeLicense = (0, react_1.useCallback)(() => {
-        setLicenseType('free');
+    (0, react_1.useEffect)(() => {
+        const nextLicenseType = publicLicenseKey === 'free-license'
+            ? 'free'
+            : publicLicenseKey === null
+                ? null
+                : 'company';
+        const nextCompanyLicenseKey = nextLicenseType === 'company' ? (publicLicenseKey !== null && publicLicenseKey !== void 0 ? publicLicenseKey : '') : '';
+        setLicenseType(nextLicenseType);
+        setCompanyLicenseKey(nextCompanyLicenseKey);
+        setCompanyLicenseKeyToSave(nextCompanyLicenseKey);
+        setSyncedRevision(revision);
         setError(null);
-    }, []);
-    const chooseCompanyLicense = (0, react_1.useCallback)(() => {
-        setLicenseType('company');
+    }, [publicLicenseKey, revision]);
+    const toggleLicenseType = (0, react_1.useCallback)((newLicenseType) => {
+        setLicenseType((currentLicenseType) => currentLicenseType === newLicenseType ? null : newLicenseType);
         setError(null);
     }, []);
-    const publicLicenseKey = (0, react_1.useMemo)(() => {
-        if (licenseType === 'free') {
-            return 'free-license';
-        }
-        if (licenseType === 'company') {
-            return companyLicenseKey.trim();
-        }
-        return '';
-    }, [companyLicenseKey, licenseType]);
+    const toggleFreeLicense = (0, react_1.useCallback)(() => {
+        toggleLicenseType('free');
+    }, [toggleLicenseType]);
+    const toggleCompanyLicense = (0, react_1.useCallback)(() => {
+        toggleLicenseType('company');
+    }, [toggleLicenseType]);
     const localLicenseKeyValidation = (0, react_1.useMemo)(() => (0, LicenseKeyValidation_1.validateLicenseKey)(companyLicenseKey.trim()), [companyLicenseKey]);
     (0, react_1.useEffect)(() => {
         let cancelled = false;
@@ -132,63 +136,75 @@ const ConfigureLicenseModal = ({ initialPublicLicenseKey }) => {
     const companyLicenseKeyIsValid = localLicenseKeyValidation.valid &&
         (licenseKeyDetails === null || licenseKeyDetails === void 0 ? void 0 : licenseKeyDetails.isValid) === true &&
         !isValidatingLicenseKey;
-    const submit = (0, react_1.useCallback)(async () => {
-        if (publicLicenseKey.length === 0) {
-            setError(licenseType === null
-                ? 'Select a license type.'
-                : 'Enter your public license key.');
-            return;
-        }
-        if (licenseType === 'company' && !companyLicenseKeyIsValid) {
-            return;
+    const publicLicenseKeyToSave = (0, react_1.useMemo)(() => {
+        if (licenseType === 'free') {
+            return 'free-license';
         }
-        setIsSubmitting(true);
-        setError(null);
-        try {
-            const response = await (0, call_api_1.callApi)('/api/update-public-license', {
-                publicLicenseKey,
-            });
-            if (!response.success) {
-                setError(response.reason);
-                setIsSubmitting(false);
-                return;
-            }
-            dismiss();
+        if (licenseType === 'company') {
+            return companyLicenseKeyToSave;
         }
-        catch (err) {
-            setError(err.message);
-            setIsSubmitting(false);
+        return '';
+    }, [companyLicenseKeyToSave, licenseType]);
+    const updates = (0, react_1.useMemo)(() => {
+        if (licenseType === null) {
+            return [{ setter: 'setPublicLicenseKey', type: 'delete' }];
         }
-    }, [companyLicenseKeyIsValid, dismiss, licenseType, publicLicenseKey]);
-    return (jsx_runtime_1.jsxs(ModalContainer_1.ModalContainer, { onEscape: dismiss, onOutsideClick: dismiss, children: [
-            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "Configure License", onClose: dismiss }), jsx_runtime_1.jsxs("div", { style: content, children: [
-                    jsx_runtime_1.jsxs("p", { style: description, children: ["Remotion is free if you are an individual or company with a headcount of 3 or less. See", ' ', jsx_runtime_1.jsx("a", { style: descriptionLink, href: "https://remotion.dev/license", children: "LICENSE.md" }),
-                            "."] }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 2 }), jsx_runtime_1.jsxs("div", { style: checkboxRow, onClick: chooseFreeLicense, children: [
-                            jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: licenseType === 'free', onChange: chooseFreeLicense, name: "free-license", rounded: true }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: checkboxLabel, children: "I am eligible for the Free License" })
-                        ] }), jsx_runtime_1.jsxs("div", { style: checkboxRow, onClick: chooseCompanyLicense, children: [
-                            jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: licenseType === 'company', onChange: chooseCompanyLicense, name: "company-license", rounded: true }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: checkboxLabel, children: "I need a Company License" })
-                        ] }), licenseType === 'company' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                            jsx_runtime_1.jsxs("p", { style: description, children: ["Visit", ' ', jsx_runtime_1.jsx("a", { style: descriptionLink, href: "https://remotion.pro/license", children: "remotion.pro/license" }), ' ', "to obtain a license key. Enter the public license key from", ' "License Keys".'] }), jsx_runtime_1.jsxs("label", { style: inputLabel, children: ["Public license key",
-                                    jsx_runtime_1.jsx(RemInput_1.RemotionInput, { status: localLicenseKeyValidation.message ||
-                                            remoteValidationMessage ||
-                                            (licenseKeyDetails !== null &&
-                                                !(0, LicenseKeyValidation_1.hasActiveCompanyLicense)(licenseKeyDetails))
-                                            ? 'error'
-                                            : 'ok', rightAlign: false, value: companyLicenseKey, onChange: (event) => {
-                                            setCompanyLicenseKey(event.target.value);
-                                            setError(null);
-                                        }, placeholder: "rm_pub_...", autoFocus: true })
-                                ] }), localLicenseKeyValidation.message ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                                    jsx_runtime_1.jsx(layout_1.Spacing, { y: 1 }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: localLicenseKeyValidation.message, align: "flex-start", type: "error" })
-                                ] })) : null, remoteValidationMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                                    jsx_runtime_1.jsx(layout_1.Spacing, { y: 1 }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: remoteValidationMessage, align: "flex-start", type: "error" })
-                                ] })) : null, isValidatingLicenseKey ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                                    jsx_runtime_1.jsx(layout_1.Spacing, { y: 1 }), jsx_runtime_1.jsx("p", { style: description, children: "Loading license key details..." })
-                                ] })) : null, licenseKeyDetails ? (jsx_runtime_1.jsx(LicenseKeyValidation_1.LicenseKeyDetailsDisplay, { details: licenseKeyDetails })) : null] })) : null, error ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                            jsx_runtime_1.jsx(layout_1.Spacing, { y: 1.5 }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: error, align: "flex-start", type: "error" })
-                        ] })) : null] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(layout_1.Row, { justify: "flex-end", children: jsx_runtime_1.jsx(ModalButton_1.ModalButton, { onClick: submit, disabled: isSubmitting ||
-                            publicLicenseKey.length === 0 ||
-                            (licenseType === 'company' && !companyLicenseKeyIsValid), autoFocus: licenseType !== 'company', children: isSubmitting ? 'Submitting...' : 'Submit and reload' }) }) })
-        ] }));
+        return [
+            {
+                setter: 'setPublicLicenseKey',
+                type: 'set',
+                value: publicLicenseKeyToSave,
+            },
+        ];
+    }, [licenseType, publicLicenseKeyToSave]);
+    (0, use_auto_save_config_1.useAutoSaveConfig)({
+        enabled: licenseType === null ||
+            (publicLicenseKeyToSave.length > 0 &&
+                (licenseType !== 'company' ||
+                    (companyLicenseKeyToSave === companyLicenseKey.trim() &&
+                        companyLicenseKeyIsValid))),
+        onError: setError,
+        ready: syncedRevision === revision,
+        syncRevision: syncedRevision,
+        updates,
+    });
+    const displayedError = error !== null && error !== void 0 ? error : settingsError;
+    return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsxs("div", { style: content, children: [
+                jsx_runtime_1.jsxs("p", { style: description, children: ["Remotion is free to use if you are an individual or company with a headcount of 3 or less.",
+                        jsx_runtime_1.jsx("br", {}),
+                        "If used in an organization with 4 people or more, a", ' ', jsx_runtime_1.jsx("a", { style: descriptionLink, href: "https://remotion.pro/license", children: "Company License" }), ' needs to be obtained.'] }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 2 }), jsx_runtime_1.jsxs("div", { style: checkboxRow, onClick: (event) => {
+                        if (!(event.target instanceof HTMLInputElement)) {
+                            toggleFreeLicense();
+                        }
+                    }, children: [
+                        jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: licenseType === 'free', onChange: toggleFreeLicense, name: "free-license", rounded: true }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: checkboxLabel, children: "I am eligible for the Free License" })
+                    ] }), jsx_runtime_1.jsxs("div", { style: checkboxRow, onClick: (event) => {
+                        if (!(event.target instanceof HTMLInputElement)) {
+                            toggleCompanyLicense();
+                        }
+                    }, children: [
+                        jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: licenseType === 'company', onChange: toggleCompanyLicense, name: "company-license", rounded: true }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: checkboxLabel, children: "I need a Company License" })
+                    ] }), licenseType === 'company' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                        jsx_runtime_1.jsxs("p", { style: description, children: ["Visit", ' ', jsx_runtime_1.jsx("a", { style: descriptionLink, href: "https://remotion.pro/license", children: "remotion.pro/license" }), ' ', "to obtain a license key. Enter the public license key from", ' "License Keys".'] }), jsx_runtime_1.jsxs("label", { style: inputLabel, children: ["Public license key",
+                                jsx_runtime_1.jsx(RemInput_1.RemotionInput, { status: localLicenseKeyValidation.message ||
+                                        remoteValidationMessage ||
+                                        (licenseKeyDetails !== null &&
+                                            !(0, LicenseKeyValidation_1.hasActiveCompanyLicense)(licenseKeyDetails))
+                                        ? 'error'
+                                        : 'ok', rightAlign: false, value: companyLicenseKey, onChange: (event) => {
+                                        setCompanyLicenseKey(event.target.value);
+                                        setError(null);
+                                    }, onBlur: () => {
+                                        setCompanyLicenseKeyToSave(companyLicenseKey.trim());
+                                    }, placeholder: "rm_pub_...", autoFocus: true })
+                            ] }), localLicenseKeyValidation.message ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                                jsx_runtime_1.jsx(layout_1.Spacing, { y: 1 }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: localLicenseKeyValidation.message, align: "flex-start", type: "error" })
+                            ] })) : null, remoteValidationMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                                jsx_runtime_1.jsx(layout_1.Spacing, { y: 1 }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: remoteValidationMessage, align: "flex-start", type: "error" })
+                            ] })) : null, isValidatingLicenseKey ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                                jsx_runtime_1.jsx(layout_1.Spacing, { y: 1 }), jsx_runtime_1.jsx("p", { style: description, children: "Loading license key details..." })
+                            ] })) : null, licenseKeyDetails ? (jsx_runtime_1.jsx(LicenseKeyValidation_1.LicenseKeyDetailsDisplay, { details: licenseKeyDetails })) : null] })) : null, displayedError ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                        jsx_runtime_1.jsx(layout_1.Spacing, { y: 1.5 }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: displayedError, align: "flex-start", type: "error" })
+                    ] })) : null] }) }));
 };
-exports.ConfigureLicenseModal = ConfigureLicenseModal;
+exports.LicenseSettings = LicenseSettings;

package/dist/components/ConfirmationDialog.js

@@ -23,7 +23,7 @@ const footerStyle = {
     minWidth: 0,
 };
 const useConfirmationDialog = () => {
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     return (0, react_1.useCallback)((options) => {
         return new Promise((resolve) => {
             var _a, _b;
@@ -50,7 +50,7 @@ const useConfirmationDialog = () => {
 };
 exports.useConfirmationDialog = useConfirmationDialog;
 const ConfirmationDialog = ({ state }) => {
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const settledRef = (0, react_1.useRef)(false);
     const closeCurrentModal = (0, react_1.useCallback)(() => {
         setSelectedModal((modal) => (modal === null || modal === void 0 ? void 0 : modal.type) === 'confirmation-dialog' && modal.id === state.id

package/dist/components/ContextMenu.js

@@ -44,6 +44,7 @@ const react_dom_1 = __importDefault(require("react-dom"));
 const mobile_layout_1 = require("../helpers/mobile-layout");
 const noop_1 = require("../helpers/noop");
 const z_index_1 = require("../state/z-index");
+const menu_tree_context_1 = require("./Menu/menu-tree-context");
 const portals_1 = require("./Menu/portals");
 const styles_1 = require("./Menu/styles");
 const MenuContent_1 = require("./NewComposition/MenuContent");
@@ -70,8 +71,7 @@ const notifyContextMenuOpened = (id) => {
         detail: id,
     }));
 };
-const ContextMenuPortal = ({ sizeSource, currentZIndex, onHide, opened }) => {
-    const menuRef = (0, react_1.useRef)(null);
+const ContextMenuPortal = ({ menuTreeId, sizeSource, currentZIndex, onHide, opened }) => {
     const size = player_1.PlayerInternals.useElementSize(sizeSource, {
         triggerOnWindowResize: true,
         shouldApplyCssTransforms: true,
@@ -138,11 +138,11 @@ const ContextMenuPortal = ({ sizeSource, currentZIndex, onHide, opened }) => {
     }, []);
     (0, react_1.useEffect)(() => {
         const dismissWithoutClickThrough = (event) => {
-            var _a;
             if (event.button !== 0) {
                 return;
             }
-            if ((_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) {
+            const target = event.target;
+            if ((0, menu_tree_context_1.isNodeInMenuTree)(target, menuTreeId)) {
                 return;
             }
             event.preventDefault();
@@ -154,7 +154,7 @@ const ContextMenuPortal = ({ sizeSource, currentZIndex, onHide, opened }) => {
         return () => {
             window.removeEventListener('pointerdown', dismissWithoutClickThrough, true);
         };
-    }, [onHide]);
+    }, [menuTreeId, onHide]);
     // Prevent deselection of a selected item
     const onMenuPointerDown = (0, react_1.useCallback)((e) => {
         e.stopPropagation();
@@ -162,11 +162,12 @@ const ContextMenuPortal = ({ sizeSource, currentZIndex, onHide, opened }) => {
     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: opened.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", { "data-remotion-menu-tree-id": menuTreeId, style: portalStyle, onPointerDown: onMenuPointerDown, children: jsx_runtime_1.jsx(menu_tree_context_1.MenuTreeContext.Provider, { value: menuTreeId, 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, getItems, style = undefined, className = undefined, onPointerDown = undefined, }, forwardedRef) => {
     const ref = (0, react_1.useRef)(null);
     const idRef = (0, react_1.useRef)(nextContextMenuId++);
+    const menuTreeIdRef = (0, react_1.useRef)((0, menu_tree_context_1.getNextMenuTreeId)());
     const invocationRef = (0, react_1.useRef)(0);
     const getItemsRef = (0, react_1.useRef)(getItems);
     getItemsRef.current = getItems;
@@ -232,11 +233,12 @@ exports.ContextMenu = react_1.default.forwardRef(({ children, getItems, style =
         };
     }, [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 })) : 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, { menuTreeId: menuTreeIdRef.current, sizeSource: ref, currentZIndex: currentZIndex, onHide: onHide, opened: opened })) : null] }));
 });
 exports.ContextMenu.displayName = 'ContextMenu';
 const ContextMenuForTarget = ({ triggerRef, getItems }) => {
     const idRef = (0, react_1.useRef)(nextContextMenuId++);
+    const menuTreeIdRef = (0, react_1.useRef)((0, menu_tree_context_1.getNextMenuTreeId)());
     const invocationRef = (0, react_1.useRef)(0);
     const getItemsRef = (0, react_1.useRef)(getItems);
     getItemsRef.current = getItems;
@@ -297,6 +299,6 @@ const ContextMenuForTarget = ({ triggerRef, getItems }) => {
             window.removeEventListener(contextMenuOpenedEvent, onOtherContextMenuOpened);
         };
     }, [onHide]);
-    return opened.type === 'open' ? (jsx_runtime_1.jsx(ContextMenuPortal, { sizeSource: body, currentZIndex: currentZIndex, onHide: onHide, opened: opened })) : null;
+    return opened.type === 'open' ? (jsx_runtime_1.jsx(ContextMenuPortal, { menuTreeId: menuTreeIdRef.current, 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/EditorContexts.js

@@ -18,6 +18,7 @@ const ModalsProvider_1 = require("./ModalsProvider");
 const ClientRenderQueueProcessor_1 = require("./RenderQueue/ClientRenderQueueProcessor");
 const context_1 = require("./RenderQueue/context");
 const SetTimelineInOutProvider_1 = require("./SetTimelineInOutProvider");
+const SettingsContext_1 = require("./SettingsContext");
 const ShowGuidesProvider_1 = require("./ShowGuidesProvider");
 const ShowOutlinesProvider_1 = require("./ShowOutlinesProvider");
 const ShowRulersProvider_1 = require("./ShowRulersProvider");
@@ -25,10 +26,10 @@ const SnappingProvider_1 = require("./SnappingProvider");
 const VisualControlsUndoSync_1 = require("./VisualControls/VisualControlsUndoSync");
 const ZoomGesturesProvider_1 = require("./ZoomGesturesProvider");
 const EditorContexts = ({ children }) => {
-    return (jsx_runtime_1.jsx(get_zod_if_possible_1.ZodProvider, { children: jsx_runtime_1.jsx(VisualControls_1.VisualControlsProvider, { children: jsx_runtime_1.jsxs(client_id_1.PreviewServerConnection, { children: [
-                    jsx_runtime_1.jsx(VisualControlsUndoSync_1.VisualControlsUndoSync, {}), jsx_runtime_1.jsxs(context_1.RenderQueueContextProvider, { children: [
-                            jsx_runtime_1.jsx(ClientRenderQueueProcessor_1.ClientRenderQueueProcessor, {}), jsx_runtime_1.jsx(keybindings_1.KeybindingContextProvider, { children: jsx_runtime_1.jsx(CheckerboardProvider_1.CheckerboardProvider, { children: jsx_runtime_1.jsx(ZoomGesturesProvider_1.ZoomGesturesProvider, { children: jsx_runtime_1.jsx(ShowRulersProvider_1.ShowRulersProvider, { children: jsx_runtime_1.jsx(ShowGuidesProvider_1.ShowGuidesProvider, { children: jsx_runtime_1.jsx(ShowOutlinesProvider_1.ShowOutlinesProvider, { children: jsx_runtime_1.jsx(SnappingProvider_1.SnappingProvider, { children: jsx_runtime_1.jsx(preview_size_1.PreviewSizeProvider, { children: jsx_runtime_1.jsx(ModalsProvider_1.ModalsProvider, { children: jsx_runtime_1.jsx(MediaVolumeProvider_1.MediaVolumeProvider, { children: jsx_runtime_1.jsx(player_1.PlayerInternals.PlayerEmitterProvider, { currentPlaybackRate: null, children: jsx_runtime_1.jsx(sidebar_1.SidebarContextProvider, { children: jsx_runtime_1.jsx(folders_1.FolderContextProvider, { children: jsx_runtime_1.jsx(highest_z_index_1.HighestZIndexProvider, { children: jsx_runtime_1.jsx(SetTimelineInOutProvider_1.SetTimelineInOutProvider, { children: jsx_runtime_1.jsx(ExpandedTracksProvider_1.ExpandedTracksProvider, { children: children }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) })
-                        ] })
-                ] }) }) }));
+    return (jsx_runtime_1.jsx(get_zod_if_possible_1.ZodProvider, { children: jsx_runtime_1.jsx(VisualControls_1.VisualControlsProvider, { children: jsx_runtime_1.jsx(client_id_1.PreviewServerConnection, { children: jsx_runtime_1.jsxs(SettingsContext_1.SettingsProvider, { children: [
+                        jsx_runtime_1.jsx(VisualControlsUndoSync_1.VisualControlsUndoSync, {}), jsx_runtime_1.jsxs(context_1.RenderQueueContextProvider, { children: [
+                                jsx_runtime_1.jsx(ClientRenderQueueProcessor_1.ClientRenderQueueProcessor, {}), jsx_runtime_1.jsx(keybindings_1.KeybindingContextProvider, { children: jsx_runtime_1.jsx(CheckerboardProvider_1.CheckerboardProvider, { children: jsx_runtime_1.jsx(ZoomGesturesProvider_1.ZoomGesturesProvider, { children: jsx_runtime_1.jsx(ShowRulersProvider_1.ShowRulersProvider, { children: jsx_runtime_1.jsx(ShowGuidesProvider_1.ShowGuidesProvider, { children: jsx_runtime_1.jsx(ShowOutlinesProvider_1.ShowOutlinesProvider, { children: jsx_runtime_1.jsx(SnappingProvider_1.SnappingProvider, { children: jsx_runtime_1.jsx(preview_size_1.PreviewSizeProvider, { children: jsx_runtime_1.jsx(ModalsProvider_1.ModalsProvider, { children: jsx_runtime_1.jsx(MediaVolumeProvider_1.MediaVolumeProvider, { children: jsx_runtime_1.jsx(player_1.PlayerInternals.PlayerEmitterProvider, { currentPlaybackRate: null, children: jsx_runtime_1.jsx(sidebar_1.SidebarContextProvider, { children: jsx_runtime_1.jsx(folders_1.FolderContextProvider, { children: jsx_runtime_1.jsx(highest_z_index_1.HighestZIndexProvider, { children: jsx_runtime_1.jsx(SetTimelineInOutProvider_1.SetTimelineInOutProvider, { children: jsx_runtime_1.jsx(ExpandedTracksProvider_1.ExpandedTracksProvider, { children: children }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) })
+                            ] })
+                    ] }) }) }) }));
 };
 exports.EditorContexts = EditorContexts;

package/dist/components/EffectPickerModal.js

@@ -155,7 +155,7 @@ const EffectPickerResult = ({ item, selected, onSelected }) => {
             ] }) }));
 };
 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/ExpandedTracksProvider.js

@@ -4,46 +4,11 @@ exports.ExpandedTracksProvider = exports.ExpandedTracksSetterContext = exports.E
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const migrate_expanded_tracks_for_subscription_key_1 = require("../helpers/migrate-expanded-tracks-for-subscription-key");
+const persist_boolean_map_1 = require("../helpers/persist-boolean-map");
 const timeline_node_path_key_1 = require("../helpers/timeline-node-path-key");
-const SESSION_STORAGE_KEY = 'remotion.editor.expandedTracks';
-const onlyCollapsedTrackValues = (state) => {
-    const result = {};
-    for (const [key, value] of Object.entries(state)) {
-        if (value === false) {
-            result[key] = false;
-        }
-    }
-    return result;
-};
+const SESSION_STORAGE_KEY = 'remotion.editor.expandedTracks.v2';
 const loadExpandedTracks = () => {
-    if (typeof window === 'undefined') {
-        return {};
-    }
-    try {
-        const raw = window.sessionStorage.getItem(SESSION_STORAGE_KEY);
-        if (raw === null) {
-            return {};
-        }
-        const parsed = JSON.parse(raw);
-        if (!parsed || typeof parsed !== 'object') {
-            return {};
-        }
-        return onlyCollapsedTrackValues(parsed);
-    }
-    catch (_a) {
-        return {};
-    }
-};
-const persistExpandedTracks = (state) => {
-    if (typeof window === 'undefined') {
-        return;
-    }
-    try {
-        window.sessionStorage.setItem(SESSION_STORAGE_KEY, JSON.stringify(onlyCollapsedTrackValues(state)));
-    }
-    catch (_a) {
-        // Ignore quota errors or disabled storage.
-    }
+    return (0, persist_boolean_map_1.loadPersistedBooleanMap)(SESSION_STORAGE_KEY);
 };
 exports.ExpandedTracksGetterContext = (0, react_1.createContext)({
     getIsExpanded: () => {
@@ -78,31 +43,23 @@ const ExpandedTracksProvider = ({ children }) => {
             let changed = false;
             const next = { ...prev };
             for (const key of keysToExpand) {
-                if (next[key] === false) {
-                    delete next[key];
+                if (!next[key]) {
+                    next[key] = true;
                     changed = true;
                 }
             }
             if (!changed) {
                 return prev;
             }
-            persistExpandedTracks(next);
+            (0, persist_boolean_map_1.persistBooleanMap)(SESSION_STORAGE_KEY, next);
             return next;
         });
     }, []);
     const toggleTrack = (0, react_1.useCallback)((nodePathInfo) => {
         setExpandedTracks((prev) => {
-            var _a;
             const key = (0, timeline_node_path_key_1.timelineNodePathInfoToKey)(nodePathInfo);
-            const next = { ...prev };
-            const isExpanded = (_a = next[key]) !== null && _a !== void 0 ? _a : true;
-            if (isExpanded) {
-                next[key] = false;
-            }
-            else {
-                delete next[key];
-            }
-            persistExpandedTracks(next);
+            const next = (0, persist_boolean_map_1.toggleBooleanMapKey)(prev, key);
+            (0, persist_boolean_map_1.persistBooleanMap)(SESSION_STORAGE_KEY, next);
             return next;
         });
     }, []);
@@ -112,14 +69,14 @@ const ExpandedTracksProvider = ({ children }) => {
             if (!next) {
                 return prev;
             }
-            persistExpandedTracks(next);
+            (0, persist_boolean_map_1.persistBooleanMap)(SESSION_STORAGE_KEY, next);
             return next;
         });
     }, []);
     const getterValue = (0, react_1.useMemo)(() => ({
         getIsExpanded: (nodePathInfo) => {
             var _a;
-            return (_a = expandedTracks[(0, timeline_node_path_key_1.timelineNodePathInfoToKey)(nodePathInfo)]) !== null && _a !== void 0 ? _a : true;
+            return (_a = expandedTracks[(0, timeline_node_path_key_1.timelineNodePathInfoToKey)(nodePathInfo)]) !== null && _a !== void 0 ? _a : false;
         },
     }), [expandedTracks]);
     const setterValue = (0, react_1.useMemo)(() => ({

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/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,6 +1,7 @@
 import { type InlineActionProps } from './InlineAction';
 import type { ComboboxValue } from './NewComposition/ComboBox';
-export declare const InlineDropdown: ({ values, getItems, unhoveredColor, ...props }: Omit<InlineActionProps, "onClick"> & {
+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,11 @@ 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, getItems, 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' });
@@ -40,7 +44,8 @@ const InlineDropdown = ({ values, getItems, unhoveredColor, ...props }) => {
             top: e.clientY,
             values: invocationValues,
         });
-    }, [getItems]);
+        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;
@@ -89,9 +94,10 @@ const InlineDropdown = ({ values, getItems, 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 && opened.type === 'open'
+            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] }));
 };

package/dist/components/InspectorLocationCopy.js

@@ -38,8 +38,8 @@ const icon = {
 const InspectorLocationCopy = ({ children, location, name, openInEditorLocation }) => {
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const [focusedWithin, setFocusedWithin] = (0, react_1.useState)(false);
-    const textToCopy = (0, react_1.useMemo)(() => {
-        return (0, format_file_location_1.formatLocationForAgents)({
+    const contextForAgents = (0, react_1.useMemo)(() => {
+        return (0, format_file_location_1.formatContextForAgents)({
             location,
             name,
             root: window.remotion_cwd,
@@ -50,20 +50,20 @@ const InspectorLocationCopy = ({ children, location, name, openInEditorLocation
     }, []);
     const onCopy = (0, react_1.useCallback)((event) => {
         event.stopPropagation();
-        if (!textToCopy) {
+        if (!contextForAgents) {
             return;
         }
-        navigator.clipboard.writeText(textToCopy).catch((err) => {
+        navigator.clipboard.writeText(contextForAgents).catch((err) => {
             (0, NotificationCenter_1.showNotification)(`Could not copy to clipboard: ${err.message}`, 2000);
         });
-    }, [textToCopy]);
+    }, [contextForAgents]);
     const showAction = hovered || focusedWithin;
-    return (jsx_runtime_1.jsxs("div", { style: row, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), onFocus: () => setFocusedWithin(true), onBlur: () => setFocusedWithin(false), children: [
-            jsx_runtime_1.jsx("div", { style: content, children: children }), textToCopy || openInEditorLocation ? (jsx_runtime_1.jsxs("div", { style: {
+    return (jsx_runtime_1.jsxs("div", { "aria-label": "Inspector source location", role: "group", style: row, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), onFocus: () => setFocusedWithin(true), onBlur: () => setFocusedWithin(false), children: [
+            jsx_runtime_1.jsx("div", { style: content, children: children }), contextForAgents || openInEditorLocation ? (jsx_runtime_1.jsxs("div", { style: {
                     ...action,
                     opacity: showAction ? 1 : 0,
                     pointerEvents: showAction ? 'auto' : 'none',
                 }, children: [
-                    jsx_runtime_1.jsx(InspectorOpenInEditor_1.InspectorOpenInEditor, { location: openInEditorLocation }), textToCopy ? (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onCopy, renderAction: renderCopyAction, title: "Copy location for agents" })) : null] })) : null] }));
+                    jsx_runtime_1.jsx(InspectorOpenInEditor_1.InspectorOpenInEditor, { contextForAgents: contextForAgents, location: openInEditorLocation }), contextForAgents ? (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onCopy, renderAction: renderCopyAction, title: "Copy context for agents" })) : null] })) : null] }));
 };
 exports.InspectorLocationCopy = InspectorLocationCopy;