@remotion/studio 4.0.437 → 4.0.439

package/dist/Studio.js

@@ -16,8 +16,8 @@ const getServerDisconnectedDomElement = () => {
     return document.getElementById('server-disconnected-overlay');
 };
 const StudioInner = ({ rootComponent, readOnly, visualModeEnabled }) => {
-    var _a;
-    return (jsx_runtime_1.jsx(remotion_1.Internals.CompositionManagerProvider, { onlyRenderComposition: null, currentCompositionMetadata: null, initialCompositions: [], initialCanvasContent: null, children: jsx_runtime_1.jsx(remotion_1.Internals.RemotionRootContexts, { visualModeEnabled: visualModeEnabled, frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: window.remotion_logLevel, numberOfAudioTags: window.remotion_numberOfAudioTags, audioLatencyHint: (_a = window.remotion_audioLatencyHint) !== null && _a !== void 0 ? _a : 'interactive', children: jsx_runtime_1.jsx(use_static_files_1.StaticFilesProvider, { children: jsx_runtime_1.jsx(ResolveCompositionConfigInStudio_1.ResolveCompositionConfigInStudio, { children: jsx_runtime_1.jsxs(EditorContexts_1.EditorContexts, { readOnlyStudio: readOnly, children: [
+    var _a, _b;
+    return (jsx_runtime_1.jsx(remotion_1.Internals.CompositionManagerProvider, { onlyRenderComposition: null, currentCompositionMetadata: null, initialCompositions: [], initialCanvasContent: null, children: jsx_runtime_1.jsx(remotion_1.Internals.RemotionRootContexts, { visualModeEnabled: visualModeEnabled, frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: (_a = window.remotion_logLevel) !== null && _a !== void 0 ? _a : 'info', numberOfAudioTags: window.remotion_numberOfAudioTags, audioLatencyHint: (_b = window.remotion_audioLatencyHint) !== null && _b !== void 0 ? _b : 'interactive', children: jsx_runtime_1.jsx(use_static_files_1.StaticFilesProvider, { children: jsx_runtime_1.jsx(ResolveCompositionConfigInStudio_1.ResolveCompositionConfigInStudio, { children: jsx_runtime_1.jsxs(EditorContexts_1.EditorContexts, { readOnlyStudio: readOnly, children: [
                             jsx_runtime_1.jsx(Editor_1.Editor, { readOnlyStudio: readOnly, Root: rootComponent }), readOnly
                                 ? null
                                 : (0, react_dom_1.createPortal)(jsx_runtime_1.jsx(ServerDisconnected_1.ServerDisconnected, {}), getServerDisconnectedDomElement())] }) }) }) }) }));

package/dist/api/helpers/calc-new-props.js

@@ -3,11 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.calcNewProps = void 0;
 const remotion_1 = require("remotion");
 const calcNewProps = (compositionId, defaultProps) => {
-    var _a, _b;
+    var _a;
     if (!(0, remotion_1.getRemotionEnvironment)().isStudio) {
         throw new Error('saveDefaultProps can only be called in the Remotion Studio.');
     }
-    const { compositionsRef, editorPropsProviderRef } = remotion_1.Internals;
+    const { compositionsRef } = remotion_1.Internals;
     const compositionsStore = compositionsRef.current;
     if (!compositionsStore) {
         throw new Error('No compositions ref found. Are you in the Remotion Studio and are the Remotion versions aligned?');
@@ -17,16 +17,13 @@ const calcNewProps = (compositionId, defaultProps) => {
     if (!composition) {
         throw new Error(`No composition with the ID ${compositionId} found. Available compositions: ${compositions.map((c) => c.id).join(', ')}`);
     }
-    const propsStore = editorPropsProviderRef.current;
-    if (!propsStore) {
-        throw new Error('No props store found. Are you in the Remotion Studio and are the Remotion versions aligned?');
-    }
     const savedDefaultProps = (_a = composition.defaultProps) !== null && _a !== void 0 ? _a : {};
-    const unsavedDefaultProps = (_b = propsStore.getProps()[compositionId]) !== null && _b !== void 0 ? _b : savedDefaultProps;
     const generatedDefaultProps = defaultProps({
         schema: composition.schema,
         savedDefaultProps,
-        unsavedDefaultProps,
+        // Kept for backwards compatibility - since all props are now
+        // immediately saved, this is the same as savedDefaultProps.
+        unsavedDefaultProps: savedDefaultProps,
     });
     return {
         composition,

package/dist/api/update-default-props.d.ts

@@ -1,5 +1,9 @@
-import type { UpdateDefaultPropsFunction } from './helpers/calc-new-props';
+/**
+ * @deprecated Use `saveDefaultProps()` instead. This function is now an alias for `saveDefaultProps()`.
+ * @description Updates and saves the defaultProps for a composition back to the root file.
+ * @see [Documentation](https://www.remotion.dev/docs/studio/update-default-props)
+ */
 export declare const updateDefaultProps: ({ compositionId, defaultProps, }: {
     compositionId: string;
-    defaultProps: UpdateDefaultPropsFunction;
-}) => void;
+    defaultProps: import("..").UpdateDefaultPropsFunction;
+}) => Promise<void>;

package/dist/api/update-default-props.js

@@ -1,24 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.updateDefaultProps = void 0;
-const remotion_1 = require("remotion");
-const calc_new_props_1 = require("./helpers/calc-new-props");
-const updateDefaultProps = ({ compositionId, defaultProps, }) => {
-    const { generatedDefaultProps, composition } = (0, calc_new_props_1.calcNewProps)(compositionId, defaultProps);
-    const propsStore = remotion_1.Internals.editorPropsProviderRef.current;
-    if (!propsStore) {
-        throw new Error('No props store found. Are you in the Remotion Studio and are the Remotion versions aligned?');
-    }
-    propsStore.setProps((prev) => {
-        return {
-            ...prev,
-            [composition.id]: generatedDefaultProps,
-        };
-    });
-    window.dispatchEvent(new CustomEvent(remotion_1.Internals.PROPS_UPDATED_EXTERNALLY, {
-        detail: {
-            resetUnsaved: null,
-        },
-    }));
-};
-exports.updateDefaultProps = updateDefaultProps;
+const save_default_props_1 = require("./save-default-props");
+/**
+ * @deprecated Use `saveDefaultProps()` instead. This function is now an alias for `saveDefaultProps()`.
+ * @description Updates and saves the defaultProps for a composition back to the root file.
+ * @see [Documentation](https://www.remotion.dev/docs/studio/update-default-props)
+ */
+exports.updateDefaultProps = save_default_props_1.saveDefaultProps;

package/dist/api/visual-control.js

@@ -1,9 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.visualControl = void 0;
+const react_1 = require("react");
 const remotion_1 = require("remotion");
+const visual_control_store_1 = require("../visual-controls/visual-control-store");
 const VisualControls_1 = require("../visual-controls/VisualControls");
 const visualControl = (key, value, schema) => {
+    // Subscribe to store changes so the calling component
+    // re-renders when a visual control value is edited in the sidebar.
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    (0, react_1.useSyncExternalStore)(visual_control_store_1.visualControlStore.subscribe, visual_control_store_1.visualControlStore.getSnapshot, visual_control_store_1.visualControlStore.getSnapshot);
     if ((0, remotion_1.getRemotionEnvironment)().isRendering) {
         return value;
     }

package/dist/components/DefaultPropsEditor.d.ts

@@ -0,0 +1,8 @@
+import type { PropsEditType } from './RenderModal/DataEditor';
+import type { UpdaterFunction } from './RenderModal/SchemaEditor/ZodSwitch';
+export declare const DefaultPropsEditor: ({ unresolvedComposition, defaultProps, setDefaultProps, propsEditType, }: {
+    readonly unresolvedComposition: import("remotion").AnyComposition;
+    readonly defaultProps: Record<string, unknown>;
+    readonly setDefaultProps: UpdaterFunction<Record<string, unknown>>;
+    readonly propsEditType: PropsEditType;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/DefaultPropsEditor.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultPropsEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ObserveDefaultPropsContext_1 = require("./ObserveDefaultPropsContext");
+const DataEditor_1 = require("./RenderModal/DataEditor");
+const DefaultPropsEditor = ({ unresolvedComposition, defaultProps, setDefaultProps, propsEditType, }) => {
+    const canSaveDefaultProps = (0, react_1.useContext)(ObserveDefaultPropsContext_1.ObserveDefaultPropsContext);
+    if (canSaveDefaultProps === null) {
+        throw new Error('ObserveDefaultPropsContext is not set');
+    }
+    return (jsx_runtime_1.jsx(DataEditor_1.DataEditor, { unresolvedComposition: unresolvedComposition, defaultProps: defaultProps, setDefaultProps: setDefaultProps, propsEditType: propsEditType, canSaveDefaultProps: canSaveDefaultProps.canSaveDefaultProps }));
+};
+exports.DefaultPropsEditor = DefaultPropsEditor;

package/dist/components/Editor.js

@@ -66,20 +66,6 @@ const Editor = ({ Root, readOnlyStudio }) => {
         triggerOnWindowResize: false,
         shouldApplyCssTransforms: true,
     });
-    (0, react_1.useEffect)(() => {
-        if (readOnlyStudio) {
-            return;
-        }
-        const listenToChanges = (e) => {
-            if (window.remotion_unsavedProps) {
-                e.returnValue = 'Are you sure you want to leave?';
-            }
-        };
-        window.addEventListener('beforeunload', listenToChanges);
-        return () => {
-            window.removeEventListener('beforeunload', listenToChanges);
-        };
-    }, [readOnlyStudio]);
     const [canvasMounted, setCanvasMounted] = react_1.default.useState(false);
     const onMounted = (0, react_1.useCallback)(() => {
         setCanvasMounted(true);

package/dist/components/EditorContexts.js

@@ -20,10 +20,13 @@ const context_1 = require("./RenderQueue/context");
 const SetTimelineInOutProvider_1 = require("./SetTimelineInOutProvider");
 const ShowGuidesProvider_1 = require("./ShowGuidesProvider");
 const ShowRulersProvider_1 = require("./ShowRulersProvider");
+const VisualControlsUndoSync_1 = require("./VisualControls/VisualControlsUndoSync");
 const ZoomGesturesProvider_1 = require("./ZoomGesturesProvider");
 const EditorContexts = ({ children, readOnlyStudio }) => {
-    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, { readOnlyStudio: readOnlyStudio, children: 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(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.jsxs(client_id_1.PreviewServerConnection, { readOnlyStudio: readOnlyStudio, 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(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/KeyboardShortcutsExplainer.js

@@ -132,8 +132,12 @@ const KeyboardShortcutsExplainer = () => {
                                     jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "0" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Reset zoom" })
                                 ] }), ' ', jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsx("div", { style: title, children: "Props Editor" }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
                                     jsx_runtime_1.jsxs("div", { style: left, children: [
-                                            jsx_runtime_1.jsx("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), jsx_runtime_1.jsx("kbd", { style: key, children: "S" })
-                                        ] }), jsx_runtime_1.jsx("div", { style: right, children: "Save" })
+                                            jsx_runtime_1.jsx("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), jsx_runtime_1.jsx("kbd", { style: key, children: "Z" })
+                                        ] }), jsx_runtime_1.jsx("div", { style: right, children: "Undo" })
+                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
+                                    jsx_runtime_1.jsxs("div", { style: left, children: [
+                                            jsx_runtime_1.jsx("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), jsx_runtime_1.jsx("kbd", { style: key, children: "Y" })
+                                        ] }), jsx_runtime_1.jsx("div", { style: right, children: "Redo" })
                                 ] }), process.env.ASK_AI_ENABLED && (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                                     jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsx("div", { style: title, children: "AI" }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
                                             jsx_runtime_1.jsxs("div", { style: left, children: [

package/dist/components/MenuBuildIndicator.js

@@ -13,6 +13,7 @@ const cwd = {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
+    userSelect: 'none',
 };
 const spinnerSize = 14;
 const spinner = {

package/dist/components/MenuToolbar.js

@@ -10,6 +10,7 @@ const layout_1 = require("./layout");
 const MenuItem_1 = require("./Menu/MenuItem");
 const MenuBuildIndicator_1 = require("./MenuBuildIndicator");
 const SidebarCollapserControls_1 = require("./SidebarCollapserControls");
+const UndoRedoButtons_1 = require("./UndoRedoButtons");
 const UpdateCheck_1 = require("./UpdateCheck");
 const row = {
     alignItems: 'center',
@@ -92,7 +93,8 @@ const MenuToolbar = ({ readOnlyStudio }) => {
     return (jsx_runtime_1.jsxs(layout_1.Row, { align: "center", className: "css-reset", style: row, children: [
             jsx_runtime_1.jsxs("div", { style: fixedWidthLeft, children: [structure.map((s) => {
                         return (jsx_runtime_1.jsx(MenuItem_1.MenuItem, { selected: selected === s.id, onItemSelected: itemClicked, onItemHovered: itemHovered, id: s.id, label: s.label, onItemQuit: onItemQuit, menu: s, onPreviousMenu: onPreviousMenu, onNextMenu: onNextMenu, leaveLeftPadding: s.leaveLeftPadding }, s.id));
-                    }), readOnlyStudio ? null : jsx_runtime_1.jsx(UpdateCheck_1.UpdateCheck, {})] }), jsx_runtime_1.jsx("div", { style: flex }), jsx_runtime_1.jsx(MenuBuildIndicator_1.MenuBuildIndicator, {}), jsx_runtime_1.jsx("div", { style: flex }), jsx_runtime_1.jsx("div", { style: fixedWidthRight, children: jsx_runtime_1.jsx(SidebarCollapserControls_1.SidebarCollapserControls, {}) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 })
+                    }), readOnlyStudio ? null : jsx_runtime_1.jsx(UpdateCheck_1.UpdateCheck, {})] }), jsx_runtime_1.jsx("div", { style: flex }), jsx_runtime_1.jsx(MenuBuildIndicator_1.MenuBuildIndicator, {}), jsx_runtime_1.jsx("div", { style: flex }), jsx_runtime_1.jsxs("div", { style: fixedWidthRight, children: [readOnlyStudio ? null : jsx_runtime_1.jsx(UndoRedoButtons_1.UndoRedoButtons, {}), jsx_runtime_1.jsx(SidebarCollapserControls_1.SidebarCollapserControls, {})
+                ] }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 })
         ] }));
 };
 exports.MenuToolbar = MenuToolbar;

package/dist/components/NewComposition/InputDragger.js

@@ -101,13 +101,13 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
             return;
         }
         if (fallbackRef.current.checkValidity()) {
-            onTextChange === null || onTextChange === void 0 ? void 0 : onTextChange(newValue);
+            onValueChangeEnd === null || onValueChangeEnd === void 0 ? void 0 : onValueChangeEnd(Number(newValue));
             setInputFallback(false);
         }
         else {
             fallbackRef.current.reportValidity();
         }
-    }, [onEscape, onTextChange]);
+    }, [onEscape, onValueChangeEnd]);
     const onKeyPress = (0, react_1.useCallback)((e) => {
         var _a;
         if (e.key === 'Enter') {

package/dist/components/NewComposition/RemTextarea.js

@@ -50,6 +50,10 @@ const RemTextareaFRFunction = ({ status, ...props }, ref) => {
             if (inputRef.current !== document.activeElement) {
                 return;
             }
+            if (e.code === 'Escape') {
+                inputRef.current.blur();
+                return;
+            }
             if (e.code === 'Tab') {
                 e.preventDefault();
                 // Always match up with value in JSON.stringify(content, null, 2)

package/dist/components/ObserveDefaultPropsContext.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { TypeCanSaveState } from './RenderModal/get-render-modal-warnings';
+export type TObserveDefaultPropsContext = {
+    canSaveDefaultProps: TypeCanSaveState | null;
+};
+export declare const ObserveDefaultPropsContext: React.Context<TObserveDefaultPropsContext | null>;
+export declare const ObserveDefaultProps: React.FC<{
+    readonly compositionId: string | null;
+    readonly readOnlyStudio: boolean;
+    readonly children: React.ReactNode;
+}>;

package/dist/components/ObserveDefaultPropsContext.js

@@ -0,0 +1,120 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ObserveDefaultProps = exports.ObserveDefaultPropsContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const remotion_1 = require("remotion");
+const client_id_1 = require("../helpers/client-id");
+const call_api_1 = require("./call-api");
+exports.ObserveDefaultPropsContext = react_1.default.createContext(null);
+const ObserveDefaultProps = ({ compositionId, readOnlyStudio, children }) => {
+    const { previewServerState, subscribeToEvent } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { updateProps } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
+    const [canSaveDefaultPropsObjectState, setCanSaveDefaultProps] = (0, react_1.useState)({});
+    const canSaveDefaultProps = (0, react_1.useMemo)(() => {
+        var _a;
+        if (compositionId === null) {
+            return null;
+        }
+        return (_a = canSaveDefaultPropsObjectState[compositionId]) !== null && _a !== void 0 ? _a : null;
+    }, [canSaveDefaultPropsObjectState, compositionId]);
+    const clientId = previewServerState.type === 'connected'
+        ? previewServerState.clientId
+        : null;
+    const applyResult = (0, react_1.useCallback)((compId, result) => {
+        if (result.canUpdate) {
+            setCanSaveDefaultProps((prevState) => ({
+                ...prevState,
+                [compId]: { canUpdate: true },
+            }));
+            updateProps({
+                id: compId,
+                defaultProps: result.currentDefaultProps,
+                newProps: result.currentDefaultProps,
+            });
+        }
+        else {
+            setCanSaveDefaultProps((prevState) => ({
+                ...prevState,
+                [compId]: {
+                    canUpdate: false,
+                    reason: result.reason,
+                    determined: true,
+                },
+            }));
+        }
+    }, [updateProps]);
+    (0, react_1.useEffect)(() => {
+        if (readOnlyStudio || !clientId || compositionId === null) {
+            return;
+        }
+        (0, call_api_1.callApi)('/api/subscribe-to-default-props', { compositionId, clientId })
+            .then((can) => {
+            applyResult(compositionId, can);
+        })
+            .catch((err) => {
+            applyResult(compositionId, {
+                canUpdate: false,
+                reason: err.message,
+            });
+        });
+        return () => {
+            (0, call_api_1.callApi)('/api/unsubscribe-from-default-props', {
+                compositionId,
+                clientId,
+            }).catch(() => {
+                // Ignore errors during cleanup
+            });
+        };
+    }, [readOnlyStudio, clientId, compositionId, applyResult]);
+    (0, react_1.useEffect)(() => {
+        const unsub = subscribeToEvent('default-props-updatable-changed', (e) => {
+            if (e.type !== 'default-props-updatable-changed') {
+                return;
+            }
+            if (e.compositionId !== compositionId) {
+                return;
+            }
+            applyResult(e.compositionId, e.result);
+        });
+        return () => {
+            unsub();
+        };
+    }, [subscribeToEvent, compositionId, applyResult]);
+    const value = (0, react_1.useMemo)(() => ({ canSaveDefaultProps }), [canSaveDefaultProps]);
+    return (jsx_runtime_1.jsx(exports.ObserveDefaultPropsContext.Provider, { value: value, children: children }));
+};
+exports.ObserveDefaultProps = ObserveDefaultProps;

package/dist/components/OptionsPanel.js

@@ -8,10 +8,14 @@ const colors_1 = require("../helpers/colors");
 const mobile_layout_1 = require("../helpers/mobile-layout");
 const show_browser_rendering_1 = require("../helpers/show-browser-rendering");
 const VisualControls_1 = require("../visual-controls/VisualControls");
-const GlobalPropsEditorUpdateButton_1 = require("./GlobalPropsEditorUpdateButton");
-const DataEditor_1 = require("./RenderModal/DataEditor");
+const DefaultPropsEditor_1 = require("./DefaultPropsEditor");
+const get_zod_if_possible_1 = require("./get-zod-if-possible");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const deep_equal_1 = require("./RenderModal/SchemaEditor/deep-equal");
+const extract_enum_json_paths_1 = require("./RenderModal/SchemaEditor/extract-enum-json-paths");
+const SchemaResetButton_1 = require("./RenderModal/SchemaEditor/SchemaResetButton");
 const RenderQueue_1 = require("./RenderQueue");
+const actions_1 = require("./RenderQueue/actions");
 const RendersTab_1 = require("./RendersTab");
 const Tabs_1 = require("./Tabs");
 const VisualControlsContent_1 = require("./VisualControls/VisualControlsContent");
@@ -38,8 +42,7 @@ const persistSelectedOptionsSidebarPanel = (panel) => {
 exports.persistSelectedOptionsSidebarPanel = persistSelectedOptionsSidebarPanel;
 exports.optionsSidebarTabs = (0, react_1.createRef)();
 const OptionsPanel = ({ readOnlyStudio }) => {
-    const { props, updateProps, resetUnsaved } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
-    const [saving, setSaving] = (0, react_1.useState)(false);
+    const { props, updateProps } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
     const renderingAvailable = !readOnlyStudio || show_browser_rendering_1.SHOW_BROWSER_RENDERING;
     const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
     const visualControlsTabActivated = (0, react_1.useContext)(VisualControls_1.VisualControlsTabActivatedContext);
@@ -84,17 +87,25 @@ const OptionsPanel = ({ readOnlyStudio }) => {
         }
         return null;
     }, [canvasContent, compositions]);
-    const setDefaultProps = (0, react_1.useCallback)((newProps) => {
-        if (composition === null) {
-            return;
+    const z = (0, get_zod_if_possible_1.useZodIfPossible)();
+    const zodTypes = (0, get_zod_if_possible_1.useZodTypesIfPossible)();
+    const noComposition = !composition;
+    const schema = (0, react_1.useMemo)(() => {
+        if (!z) {
+            return 'no-zod';
         }
-        window.remotion_ignoreFastRefreshUpdate = null;
-        updateProps({
-            id: composition.id,
-            defaultProps: composition.defaultProps,
-            newProps,
-        });
-    }, [composition, updateProps]);
+        if (noComposition) {
+            return 'no-composition';
+        }
+        if (!composition.schema) {
+            return 'no-schema';
+        }
+        if (!(typeof composition.schema.safeParse ===
+            'function')) {
+            throw new Error('A value which is not a Zod schema was passed to `schema`');
+        }
+        return composition.schema;
+    }, [composition === null || composition === void 0 ? void 0 : composition.schema, noComposition, z]);
     const currentDefaultProps = (0, react_1.useMemo)(() => {
         var _a, _b;
         if (composition === null) {
@@ -102,24 +113,75 @@ const OptionsPanel = ({ readOnlyStudio }) => {
         }
         return (_b = (_a = props[composition.id]) !== null && _a !== void 0 ? _a : composition.defaultProps) !== null && _b !== void 0 ? _b : {};
     }, [composition, props]);
-    const unsavedChangesExist = (0, react_1.useMemo)(() => {
-        if (composition === null || composition.defaultProps === undefined) {
+    const saveToFile = (0, react_1.useCallback)((updater) => {
+        if (readOnlyStudio) {
+            return;
+        }
+        if (schema === 'no-zod' ||
+            schema === 'no-schema' ||
+            schema === 'no-composition' ||
+            z === null) {
+            (0, NotificationCenter_1.showNotification)('Cannot update default props: No Zod schema', 2000);
+            return;
+        }
+        if (!composition) {
+            throw new Error('Composition is not found');
+        }
+        const oldDefaultProps = currentDefaultProps;
+        const newDefaultProps = updater(oldDefaultProps);
+        (0, actions_1.callUpdateDefaultPropsApi)(composition.id, newDefaultProps, (0, extract_enum_json_paths_1.extractEnumJsonPaths)({
+            schema,
+            zodRuntime: z,
+            currentPath: [],
+            zodTypes,
+        }))
+            .then((response) => {
+            if (!response.success) {
+                // eslint-disable-next-line no-console
+                console.log(response.stack);
+                (0, NotificationCenter_1.showNotification)(`Cannot update default props: ${response.reason}. See console for more information.`, 2000);
+            }
+        })
+            .catch((err) => {
+            (0, NotificationCenter_1.showNotification)(`Cannot update default props: ${err.message}`, 2000);
+        });
+    }, [composition, currentDefaultProps, readOnlyStudio, schema, z, zodTypes]);
+    const compositionId = (0, react_1.useMemo)(() => {
+        var _a;
+        return (_a = composition === null || composition === void 0 ? void 0 : composition.id) !== null && _a !== void 0 ? _a : '';
+    }, [composition === null || composition === void 0 ? void 0 : composition.id]);
+    const compositionDefaultProps = (0, react_1.useMemo)(() => {
+        var _a;
+        return (_a = composition === null || composition === void 0 ? void 0 : composition.defaultProps) !== null && _a !== void 0 ? _a : {};
+    }, [composition === null || composition === void 0 ? void 0 : composition.defaultProps]);
+    const hasLocalModifications = (0, react_1.useMemo)(() => {
+        if (!readOnlyStudio || !composition || !composition.defaultProps) {
             return false;
         }
         return !(0, deep_equal_1.deepEqual)(composition.defaultProps, currentDefaultProps);
-    }, [currentDefaultProps, composition]);
-    const reset = (0, react_1.useCallback)((e) => {
-        if (e.detail.resetUnsaved) {
-            resetUnsaved(e.detail.resetUnsaved);
+    }, [readOnlyStudio, composition, currentDefaultProps]);
+    const resetToOriginal = (0, react_1.useCallback)(() => {
+        var _a, _b;
+        if (!composition) {
+            return;
         }
-    }, [resetUnsaved]);
-    (0, react_1.useEffect)(() => {
-        window.addEventListener(remotion_1.Internals.PROPS_UPDATED_EXTERNALLY, reset);
-        return () => {
-            window.removeEventListener(remotion_1.Internals.PROPS_UPDATED_EXTERNALLY, reset);
-        };
-    }, [reset]);
+        updateProps({
+            id: composition.id,
+            defaultProps: ((_a = composition.defaultProps) !== null && _a !== void 0 ? _a : {}),
+            newProps: ((_b = composition.defaultProps) !== null && _b !== void 0 ? _b : {}),
+        });
+    }, [composition, updateProps]);
+    const setDefaultProps = (0, react_1.useCallback)((updater, { shouldSave }) => {
+        updateProps({
+            id: compositionId,
+            defaultProps: compositionDefaultProps,
+            newProps: updater,
+        });
+        if (shouldSave) {
+            saveToFile(updater);
+        }
+    }, [compositionId, compositionDefaultProps, saveToFile, updateProps]);
     return (jsx_runtime_1.jsxs("div", { style: container, className: "css-reset", children: [
-            jsx_runtime_1.jsx("div", { style: tabsContainer, children: jsx_runtime_1.jsxs(Tabs_1.Tabs, { children: [visualControlsTabActivated ? (jsx_runtime_1.jsx(Tabs_1.Tab, { selected: panel === 'visual-controls', onClick: onVisualControlsSelected, children: "Controls" })) : null, jsx_runtime_1.jsxs(Tabs_1.Tab, { selected: panel === 'input-props', onClick: onPropsSelected, style: { justifyContent: 'space-between' }, children: ["Props", unsavedChangesExist && composition ? (jsx_runtime_1.jsx(GlobalPropsEditorUpdateButton_1.GlobalPropsEditorUpdateButton, { compositionId: composition.id, currentDefaultProps: currentDefaultProps })) : null] }), renderingAvailable ? (jsx_runtime_1.jsx(RendersTab_1.RendersTab, { onClick: onRendersSelected, selected: panel === 'renders' })) : null] }) }), panel === 'input-props' ? (composition ? (jsx_runtime_1.jsx(DataEditor_1.DataEditor, { unresolvedComposition: composition, defaultProps: currentDefaultProps, setDefaultProps: setDefaultProps, mayShowSaveButton: true, propsEditType: "default-props", saving: saving, setSaving: setSaving, readOnlyStudio: readOnlyStudio }, composition.id)) : null) : panel === 'visual-controls' && visualControlsTabActivated ? (jsx_runtime_1.jsx(VisualControlsContent_1.VisualControlsContent, {})) : !renderingAvailable ? null : (jsx_runtime_1.jsx(RenderQueue_1.RenderQueue, {}))] }));
+            jsx_runtime_1.jsx("div", { style: tabsContainer, children: jsx_runtime_1.jsxs(Tabs_1.Tabs, { children: [visualControlsTabActivated ? (jsx_runtime_1.jsx(Tabs_1.Tab, { selected: panel === 'visual-controls', onClick: onVisualControlsSelected, children: "Controls" })) : null, jsx_runtime_1.jsxs(Tabs_1.Tab, { selected: panel === 'input-props', onClick: onPropsSelected, style: { justifyContent: 'space-between' }, children: ["Props", hasLocalModifications ? (jsx_runtime_1.jsx(SchemaResetButton_1.SchemaResetButton, { onClick: resetToOriginal })) : null] }), renderingAvailable ? (jsx_runtime_1.jsx(RendersTab_1.RendersTab, { onClick: onRendersSelected, selected: panel === 'renders' })) : null] }) }), panel === 'input-props' ? (composition ? (jsx_runtime_1.jsx(DefaultPropsEditor_1.DefaultPropsEditor, { unresolvedComposition: composition, defaultProps: currentDefaultProps, setDefaultProps: setDefaultProps, propsEditType: "default-props" }, composition.id)) : null) : panel === 'visual-controls' && visualControlsTabActivated ? (jsx_runtime_1.jsx(VisualControlsContent_1.VisualControlsContent, {})) : !renderingAvailable ? null : (jsx_runtime_1.jsx(RenderQueue_1.RenderQueue, {}))] }));
 };
 exports.OptionsPanel = OptionsPanel;

package/dist/components/RenderModal/DataEditor.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 import type { _InternalTypes } from 'remotion';
+import type { TypeCanSaveState } from './get-render-modal-warnings';
 import type { ZodSafeParseResult } from './SchemaEditor/zod-schema-type';
+import type { UpdaterFunction } from './SchemaEditor/ZodSwitch';
 export type State = {
     str: string;
     value: Record<string, unknown>;
@@ -15,10 +17,7 @@ export type PropsEditType = 'input-props' | 'default-props';
 export declare const DataEditor: React.FC<{
     readonly unresolvedComposition: _InternalTypes['AnyComposition'];
     readonly defaultProps: Record<string, unknown>;
-    readonly setDefaultProps: React.Dispatch<React.SetStateAction<Record<string, unknown>>>;
-    readonly mayShowSaveButton: boolean;
+    readonly setDefaultProps: UpdaterFunction<Record<string, unknown>>;
     readonly propsEditType: PropsEditType;
-    readonly saving: boolean;
-    readonly setSaving: React.Dispatch<React.SetStateAction<boolean>>;
-    readonly readOnlyStudio: boolean;
+    readonly canSaveDefaultProps: TypeCanSaveState | null;
 }>;