@remotion/studio 4.0.437 → 4.0.439

package/dist/components/Timeline/Timeline.js

@@ -38,8 +38,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const calculate_timeline_1 = require("../../helpers/calculate-timeline");
+const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
+const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const SplitterContainer_1 = require("../Splitter/SplitterContainer");
 const SplitterElement_1 = require("../Splitter/SplitterElement");
@@ -68,6 +70,10 @@ const noop = () => undefined;
 const TimelineInner = () => {
     var _a;
     const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
+    const { expandedTracks } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksContext);
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const visualModeEnabled = Boolean(process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED) &&
+        previewServerState.type === 'connected';
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const timeline = (0, react_1.useMemo)(() => {
         if (!videoConfig) {
@@ -91,9 +97,15 @@ const TimelineInner = () => {
     const inner = (0, react_1.useMemo)(() => {
         return {
             height: shown.reduce((acc, track) => {
+                var _a;
+                const isExpanded = visualModeEnabled && ((_a = expandedTracks[track.sequence.id]) !== null && _a !== void 0 ? _a : false);
                 return (acc +
                     (0, timeline_layout_1.getTimelineLayerHeight)(track.sequence.type === 'video' ? 'video' : 'other') +
-                    Number(timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM));
+                    Number(timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM) +
+                    (isExpanded
+                        ? (0, timeline_layout_1.getExpandedTrackHeight)(track.sequence.controls) +
+                            timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM
+                        : 0));
             }, 0) +
                 timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM +
                 (hasBeenCut ? MaxTimelineTracks_1.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT : 0) +
@@ -103,7 +115,7 @@ const TimelineInner = () => {
             minHeight: '100%',
             overflowX: 'hidden',
         };
-    }, [hasBeenCut, shown]);
+    }, [hasBeenCut, shown, expandedTracks, visualModeEnabled]);
     return (jsx_runtime_1.jsx("div", { ref: timeline_refs_1.timelineVerticalScroll, style: container, className: 'css-reset ' + is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(TimelineWidthProvider_1.TimelineWidthProvider, { children: jsx_runtime_1.jsx("div", { style: inner, children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, children: [
                         jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "flexer", sticky: jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePlaceholders, {}), children: jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown }) }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { onCollapse: noop, allowToCollapse: "none" }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "anti-flexer", sticky: null, children: jsx_runtime_1.jsxs(TimelineScrollable_1.TimelineScrollable, { children: [
                                     jsx_runtime_1.jsx(TimelineTracks_1.TimelineTracks, { timeline: shown, hasBeenCut: hasBeenCut }), jsx_runtime_1.jsx(TimelineInOutPointer_1.TimelineInOutPointer, {}), jsx_runtime_1.jsx(TimelinePlayCursorSyncer_1.TimelinePlayCursorSyncer, {}), jsx_runtime_1.jsx(TimelineDragHandler_1.TimelineDragHandler, {}), jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimeIndicators, {}), jsx_runtime_1.jsx(TimelineSlider_1.TimelineSlider, {})

package/dist/components/Timeline/TimelineExpandedSection.js

@@ -78,9 +78,15 @@ const TimelineExpandedSection = ({ sequence, originalLocation, nestedDepth, node
             height: expandedHeight,
         };
     }, [expandedHeight]);
+    const keysToObserve = (0, react_1.useMemo)(() => {
+        if (!schemaFields) {
+            return [];
+        }
+        return schemaFields.map((f) => f.key);
+    }, [schemaFields]);
     return (jsx_runtime_1.jsx("div", { style: style, children: schemaFields
             ? schemaFields.map((field, i) => {
-                return (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [i > 0 ? jsx_runtime_1.jsx("div", { style: separator }) : null, jsx_runtime_1.jsx(TimelineFieldRow_1.TimelineFieldRow, { field: field, overrideId: overrideId, validatedLocation: validatedLocation, nestedDepth: nestedDepth, nodePath: nodePath })
+                return (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [i > 0 ? jsx_runtime_1.jsx("div", { style: separator }) : null, jsx_runtime_1.jsx(TimelineFieldRow_1.TimelineFieldRow, { field: field, overrideId: overrideId, validatedLocation: validatedLocation, nestedDepth: nestedDepth, nodePath: nodePath, keysToObserve: keysToObserve })
                     ] }, field.key));
             })
             : 'No schema' }));

package/dist/components/Timeline/TimelineFieldRow.d.ts

@@ -8,4 +8,5 @@ export declare const TimelineFieldRow: React.FC<{
     readonly validatedLocation: CodePosition | null;
     readonly nestedDepth: number;
     readonly nodePath: SequenceNodePath | null;
+    readonly keysToObserve: string[];
 }>;

package/dist/components/Timeline/TimelineFieldRow.js

@@ -18,6 +18,7 @@ const fieldRowBase = {
 const fieldName = {
     fontSize: 12,
     color: 'rgba(255, 255, 255, 0.8)',
+    userSelect: 'none',
 };
 const fieldLabelRow = {
     flex: '0 0 50%',
@@ -26,7 +27,7 @@ const fieldLabelRow = {
     alignItems: 'center',
     gap: 6,
 };
-const TimelineFieldRow = ({ field, overrideId, validatedLocation, nestedDepth, nodePath }) => {
+const TimelineFieldRow = ({ field, overrideId, validatedLocation, nestedDepth, nodePath, keysToObserve, }) => {
     var _a, _b, _c, _d;
     const { setDragOverrides, clearDragOverrides, dragOverrides, codeValues: allPropStatuses, } = (0, react_1.useContext)(remotion_1.Internals.VisualModeOverridesContext);
     const propStatuses = ((_a = allPropStatuses[overrideId]) !== null && _a !== void 0 ? _a : null);
@@ -42,6 +43,7 @@ const TimelineFieldRow = ({ field, overrideId, validatedLocation, nestedDepth, n
         defaultValue: field.fieldSchema.default,
         shouldResortToDefaultValueIfUndefined: true,
     });
+    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeOverridesContext);
     const onSave = (0, react_1.useCallback)((key, value) => {
         if (!propStatuses || !validatedLocation || !nodePath) {
             return Promise.reject(new Error('Cannot save'));
@@ -59,8 +61,28 @@ const TimelineFieldRow = ({ field, overrideId, validatedLocation, nestedDepth, n
             key,
             value: JSON.stringify(value),
             defaultValue,
-        }).then(() => undefined);
-    }, [propStatuses, validatedLocation, nodePath, field.fieldSchema.default]);
+            observedKeys: keysToObserve,
+        }).then((data) => {
+            if (data.success) {
+                if (data.newStatus.canUpdate) {
+                    setCodeValues(overrideId, data.newStatus.props);
+                }
+                else {
+                    setCodeValues(overrideId, null);
+                }
+                return;
+            }
+            return Promise.reject(new Error(data.reason));
+        });
+    }, [
+        field.fieldSchema.default,
+        keysToObserve,
+        nodePath,
+        overrideId,
+        propStatuses,
+        setCodeValues,
+        validatedLocation,
+    ]);
     const onDragValueChange = (0, react_1.useCallback)((key, value) => {
         setDragOverrides(overrideId, key, value);
     }, [setDragOverrides, overrideId]);

package/dist/components/Timeline/TimelineNumberField.js

@@ -12,20 +12,18 @@ const TimelineNumberField = ({ field, effectiveValue, canUpdate, onSave, onDragV
         setDragValue(newVal);
         onDragValueChange(field.key, newVal);
     }, [onDragValueChange, field.key]);
-    (0, react_1.useEffect)(() => {
-        setDragValue(null);
-        onDragEnd();
-    }, [field.currentValue, onDragEnd]);
     const onValueChangeEnd = (0, react_1.useCallback)((newVal) => {
         if (canUpdate && newVal !== codeValue) {
-            onSave(field.key, newVal).catch(() => {
+            onSave(field.key, newVal).finally(() => {
                 setDragValue(null);
+                onDragEnd();
             });
         }
         else {
             setDragValue(null);
+            onDragEnd();
         }
-    }, [canUpdate, onSave, field.key, codeValue]);
+    }, [canUpdate, onSave, field.key, codeValue, onDragEnd]);
     const onTextChange = (0, react_1.useCallback)((newVal) => {
         if (canUpdate) {
             const parsed = Number(newVal);

package/dist/components/Timeline/TimelineRotationField.js

@@ -22,21 +22,19 @@ const TimelineRotationField = ({ field, effectiveValue, codeValue, canUpdate, on
         setDragValue(newVal);
         onDragValueChange(field.key, `${newVal}deg`);
     }, [onDragValueChange, field.key]);
-    (0, react_1.useEffect)(() => {
-        setDragValue(null);
-        onDragEnd();
-    }, [field.currentValue, onDragEnd]);
     const onValueChangeEnd = (0, react_1.useCallback)((newVal) => {
         const newStr = `${newVal}deg`;
         if (canUpdate && newStr !== codeValue) {
-            onSave(field.key, newStr).catch(() => {
+            onSave(field.key, newStr).finally(() => {
                 setDragValue(null);
+                onDragEnd();
             });
         }
         else {
             setDragValue(null);
+            onDragEnd();
         }
-    }, [canUpdate, onSave, field.key, codeValue]);
+    }, [canUpdate, onSave, field.key, codeValue, onDragEnd]);
     const onTextChange = (0, react_1.useCallback)((newVal) => {
         if (canUpdate) {
             const parsed = Number(newVal);

package/dist/components/Timeline/TimelineTranslateField.js

@@ -29,11 +29,6 @@ const TimelineTranslateField = ({ field, codeValue, effectiveValue, canUpdate, o
     const [dragY, setDragY] = (0, react_1.useState)(null);
     const [codeX, codeY] = (0, react_1.useMemo)(() => parseTranslate(String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : '0px 0px')), [effectiveValue]);
     const makeString = (0, react_1.useCallback)((x, y) => `${x}px ${y}px`, []);
-    (0, react_1.useEffect)(() => {
-        setDragX(null);
-        setDragY(null);
-        onDragEnd();
-    }, [field.currentValue, onDragEnd]);
     const step = field.fieldSchema.type === 'translate' ? ((_a = field.fieldSchema.step) !== null && _a !== void 0 ? _a : 1) : 1;
     const stepDecimals = (0, react_1.useMemo)(() => (0, timeline_field_utils_1.getDecimalPlaces)(step), [step]);
     const formatter = (0, react_1.useCallback)((v) => {
@@ -52,14 +47,25 @@ const TimelineTranslateField = ({ field, codeValue, effectiveValue, canUpdate, o
         const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;
         const newStr = makeString(newVal, currentY);
         if (canUpdate && newStr !== codeValue) {
-            onSave(field.key, newStr).catch(() => {
+            onSave(field.key, newStr).finally(() => {
                 setDragX(null);
+                onDragEnd();
             });
         }
         else {
             setDragX(null);
+            onDragEnd();
         }
-    }, [canUpdate, onSave, field.key, codeValue, dragY, codeY, makeString]);
+    }, [
+        dragY,
+        codeY,
+        makeString,
+        canUpdate,
+        codeValue,
+        onSave,
+        field.key,
+        onDragEnd,
+    ]);
     const onXTextChange = (0, react_1.useCallback)((newVal) => {
         if (canUpdate) {
             const parsed = Number(newVal);
@@ -68,13 +74,11 @@ const TimelineTranslateField = ({ field, codeValue, effectiveValue, canUpdate, o
                 const newStr = makeString(parsed, currentY);
                 if (newStr !== codeValue) {
                     setDragX(parsed);
-                    onSave(field.key, newStr).catch(() => {
-                        setDragX(null);
-                    });
+                    onSave(field.key, newStr);
                 }
             }
         }
-    }, [canUpdate, onSave, field.key, codeValue, dragY, codeY, makeString]);
+    }, [canUpdate, dragY, codeY, makeString, codeValue, onSave, field.key]);
     // --- Y callbacks ---
     const onYChange = (0, react_1.useCallback)((newVal) => {
         setDragY(newVal);
@@ -85,14 +89,25 @@ const TimelineTranslateField = ({ field, codeValue, effectiveValue, canUpdate, o
         const currentX = dragX !== null && dragX !== void 0 ? dragX : codeX;
         const newStr = makeString(currentX, newVal);
         if (canUpdate && newStr !== codeValue) {
-            onSave(field.key, newStr).catch(() => {
+            onSave(field.key, newStr).finally(() => {
                 setDragY(null);
+                onDragEnd();
             });
         }
         else {
             setDragY(null);
+            onDragEnd();
         }
-    }, [canUpdate, onSave, field.key, codeValue, dragX, codeX, makeString]);
+    }, [
+        dragX,
+        codeX,
+        makeString,
+        canUpdate,
+        codeValue,
+        onSave,
+        field.key,
+        onDragEnd,
+    ]);
     const onYTextChange = (0, react_1.useCallback)((newVal) => {
         if (canUpdate) {
             const parsed = Number(newVal);

package/dist/components/TopPanel.js

@@ -39,6 +39,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TopPanel = exports.useResponsiveSidebarStatus = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
+const remotion_1 = require("remotion");
 const mobile_layout_1 = require("../helpers/mobile-layout");
 const use_breakpoint_1 = require("../helpers/use-breakpoint");
 const editor_rulers_1 = require("../state/editor-rulers");
@@ -48,6 +49,7 @@ const CurrentCompositionSideEffects_1 = require("./CurrentCompositionSideEffects
 const use_is_ruler_visible_1 = require("./EditorRuler/use-is-ruler-visible");
 const ExplorerPanel_1 = require("./ExplorerPanel");
 const MobilePanel_1 = __importDefault(require("./MobilePanel"));
+const ObserveDefaultPropsContext_1 = require("./ObserveDefaultPropsContext");
 const OptionsPanel_1 = require("./OptionsPanel");
 const PreviewToolbar_1 = require("./PreviewToolbar");
 const SplitterContainer_1 = require("./Splitter/SplitterContainer");
@@ -84,6 +86,7 @@ exports.useResponsiveSidebarStatus = useResponsiveSidebarStatus;
 const TopPanelInner = ({ readOnlyStudio, onMounted, drawRef, bufferStateDelayInMilliseconds }) => {
     const { setSidebarCollapsedState, sidebarCollapsedStateRight } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     const rulersAreVisible = (0, use_is_ruler_visible_1.useIsRulerVisible)();
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const actualStateLeft = (0, exports.useResponsiveSidebarStatus)();
     const actualStateRight = (0, react_1.useMemo)(() => {
         if (sidebarCollapsedStateRight === 'collapsed') {
@@ -107,10 +110,12 @@ const TopPanelInner = ({ readOnlyStudio, onMounted, drawRef, bufferStateDelayInM
         setSidebarCollapsedState({ left: null, right: 'collapsed' });
     }, [setSidebarCollapsedState]);
     const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
-    return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx("div", { style: row, children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { minFlex: 0.15, maxFlex: 0.4, defaultFlex: 0.2, id: "sidebar-to-preview", orientation: "vertical", children: [actualStateLeft === 'expanded' ? (isMobileLayout ? (jsx_runtime_1.jsx(MobilePanel_1.default, { onClose: onCollapseLeft, children: jsx_runtime_1.jsx(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) })) : (jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: jsx_runtime_1.jsx(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) }))) : null, actualStateLeft === 'expanded' ? (jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "left", onCollapse: onCollapseLeft })) : null, jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { minFlex: 0.5, maxFlex: 0.8, defaultFlex: 0.7, id: "canvas-to-right-sidebar", orientation: "vertical", children: [
-                                    jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: jsx_runtime_1.jsx("div", { ref: drawRef, style: canvasContainerStyle, children: jsx_runtime_1.jsx(CanvasIfSizeIsAvailable_1.CanvasIfSizeIsAvailable, {}) }) }), actualStateRight === 'expanded' ? (jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "right", onCollapse: onCollapseRight })) : null, actualStateRight === 'expanded' ? (isMobileLayout ? (jsx_runtime_1.jsx(MobilePanel_1.default, { onClose: onCollapseRight, children: jsx_runtime_1.jsx(OptionsPanel_1.OptionsPanel, { readOnlyStudio: readOnlyStudio }) })) : (jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: jsx_runtime_1.jsx(OptionsPanel_1.OptionsPanel, { readOnlyStudio: readOnlyStudio }) }))) : null] }) })
-                    ] }) }), jsx_runtime_1.jsx(PreviewToolbar_1.PreviewToolbar, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(CurrentCompositionSideEffects_1.CurrentCompositionKeybindings, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(CurrentCompositionSideEffects_1.TitleUpdater, {})
-        ] }));
+    return (jsx_runtime_1.jsx(ObserveDefaultPropsContext_1.ObserveDefaultProps, { compositionId: (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition'
+            ? canvasContent.compositionId
+            : null, readOnlyStudio: readOnlyStudio, children: jsx_runtime_1.jsxs("div", { style: container, children: [
+                jsx_runtime_1.jsx("div", { style: row, children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { minFlex: 0.15, maxFlex: 0.4, defaultFlex: 0.2, id: "sidebar-to-preview", orientation: "vertical", children: [actualStateLeft === 'expanded' ? (isMobileLayout ? (jsx_runtime_1.jsx(MobilePanel_1.default, { onClose: onCollapseLeft, children: jsx_runtime_1.jsx(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) })) : (jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: jsx_runtime_1.jsx(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) }))) : null, actualStateLeft === 'expanded' ? (jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "left", onCollapse: onCollapseLeft })) : null, jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { minFlex: 0.5, maxFlex: 0.8, defaultFlex: 0.7, id: "canvas-to-right-sidebar", orientation: "vertical", children: [
+                                        jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: jsx_runtime_1.jsx("div", { ref: drawRef, style: canvasContainerStyle, children: jsx_runtime_1.jsx(CanvasIfSizeIsAvailable_1.CanvasIfSizeIsAvailable, {}) }) }), actualStateRight === 'expanded' ? (jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "right", onCollapse: onCollapseRight })) : null, actualStateRight === 'expanded' ? (isMobileLayout ? (jsx_runtime_1.jsx(MobilePanel_1.default, { onClose: onCollapseRight, children: jsx_runtime_1.jsx(OptionsPanel_1.OptionsPanel, { readOnlyStudio: readOnlyStudio }) })) : (jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: jsx_runtime_1.jsx(OptionsPanel_1.OptionsPanel, { readOnlyStudio: readOnlyStudio }) }))) : null] }) })
+                        ] }) }), jsx_runtime_1.jsx(PreviewToolbar_1.PreviewToolbar, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(CurrentCompositionSideEffects_1.CurrentCompositionKeybindings, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(CurrentCompositionSideEffects_1.TitleUpdater, {})
+            ] }) }));
 };
 exports.TopPanel = react_1.default.memo(TopPanelInner);

package/dist/components/UndoRedoButtons.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const UndoRedoButtons: React.FC;

package/dist/components/UndoRedoButtons.js

@@ -0,0 +1,116 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UndoRedoButtons = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ShortcutHint_1 = require("../error-overlay/remotion-overlay/ShortcutHint");
+const client_id_1 = require("../helpers/client-id");
+const use_keybinding_1 = require("../helpers/use-keybinding");
+const redo_1 = require("../icons/redo");
+const undo_1 = require("../icons/undo");
+const call_api_1 = require("./call-api");
+const InlineAction_1 = require("./InlineAction");
+const iconStyle = {
+    width: 16,
+    height: 16,
+};
+const UndoRedoButtons = () => {
+    const [undoFile, setUndoFile] = (0, react_1.useState)(null);
+    const [redoFile, setRedoFile] = (0, react_1.useState)(null);
+    const { subscribeToEvent } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const keybindings = (0, use_keybinding_1.useKeybinding)();
+    const undoInFlight = (0, react_1.useRef)(false);
+    const redoInFlight = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        const unsub = subscribeToEvent('undo-redo-stack-changed', (event) => {
+            if (event.type !== 'undo-redo-stack-changed') {
+                return;
+            }
+            setUndoFile(event.undoFile);
+            setRedoFile(event.redoFile);
+        });
+        return () => unsub();
+    }, [subscribeToEvent]);
+    const onUndo = (0, react_1.useCallback)(() => {
+        if (undoInFlight.current) {
+            return;
+        }
+        undoInFlight.current = true;
+        (0, call_api_1.callApi)('/api/undo', {})
+            .catch(() => {
+            // Ignore errors
+        })
+            .finally(() => {
+            undoInFlight.current = false;
+        });
+    }, []);
+    const onRedo = (0, react_1.useCallback)(() => {
+        if (redoInFlight.current) {
+            return;
+        }
+        redoInFlight.current = true;
+        (0, call_api_1.callApi)('/api/redo', {})
+            .catch(() => {
+            // Ignore errors
+        })
+            .finally(() => {
+            redoInFlight.current = false;
+        });
+    }, []);
+    (0, react_1.useEffect)(() => {
+        const undo = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'z',
+            commandCtrlKey: true,
+            callback: (e) => {
+                if (e.shiftKey) {
+                    return;
+                }
+                if (undoFile) {
+                    onUndo();
+                }
+            },
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
+            keepRegisteredWhenNotHighestContext: false,
+        });
+        const redo = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'y',
+            commandCtrlKey: true,
+            callback: () => {
+                if (redoFile) {
+                    onRedo();
+                }
+            },
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
+            keepRegisteredWhenNotHighestContext: false,
+        });
+        return () => {
+            undo.unregister();
+            redo.unregister();
+        };
+    }, [keybindings, onRedo, onUndo, redoFile, undoFile]);
+    const undoTooltip = (0, use_keybinding_1.areKeyboardShortcutsDisabled)()
+        ? 'Undo'
+        : `Undo (${ShortcutHint_1.cmdOrCtrlCharacter}+Z)`;
+    const redoTooltip = (0, use_keybinding_1.areKeyboardShortcutsDisabled)()
+        ? 'Redo'
+        : `Redo (${ShortcutHint_1.cmdOrCtrlCharacter}+Y)`;
+    const renderUndo = (0, react_1.useCallback)((color) => {
+        return (jsx_runtime_1.jsx(undo_1.UndoIcon, { style: { ...iconStyle, color, opacity: undoFile ? 1 : 0.5 } }));
+    }, [undoFile]);
+    const renderRedo = (0, react_1.useCallback)((color) => {
+        return (jsx_runtime_1.jsx(redo_1.RedoIcon, { style: { ...iconStyle, color, opacity: redoFile ? 1 : 0.5 } }));
+    }, [redoFile]);
+    const canUndo = undoFile !== null;
+    const canRedo = redoFile !== null;
+    if (!canUndo && !canRedo) {
+        return null;
+    }
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: onUndo, renderAction: renderUndo, title: undoTooltip, disabled: !canUndo }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: onRedo, renderAction: renderRedo, title: redoTooltip, disabled: !canRedo })
+        ] }));
+};
+exports.UndoRedoButtons = UndoRedoButtons;

package/dist/components/VisualControls/VisualControlHandle.js

@@ -11,7 +11,6 @@ const get_zod_if_possible_1 = require("../get-zod-if-possible");
 const layout_1 = require("../layout");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const extract_enum_json_paths_1 = require("../RenderModal/SchemaEditor/extract-enum-json-paths");
-const local_state_1 = require("../RenderModal/SchemaEditor/local-state");
 const ZodSwitch_1 = require("../RenderModal/SchemaEditor/ZodSwitch");
 const actions_1 = require("../RenderQueue/actions");
 const get_original_stack_trace_1 = require("./get-original-stack-trace");
@@ -25,23 +24,14 @@ const VisualControlHandle = ({ value, keyName }) => {
     const state = (0, react_1.useContext)(VisualControls_1.VisualControlsContext);
     const { updateValue } = (0, react_1.useContext)(VisualControls_1.SetVisualControlsContext);
     const { fastRefreshes, increaseManualRefreshes } = (0, react_1.useContext)(fast_refresh_context_1.FastRefreshContext);
-    const [saving, setSaving] = (0, react_1.useState)(false);
+    const [_saving, setSaving] = (0, react_1.useState)(false);
     const currentValue = (0, get_current_edited_value_1.getVisualControlEditedValue)({
         handles: state.handles,
         key: keyName,
     });
     const originalFileName = (0, get_original_stack_trace_1.useOriginalFileName)(value.stack);
-    const { localValue, RevisionContextProvider, onChange } = (0, local_state_1.useLocalState)({
-        schema: value.schema,
-        setValue: (updater) => {
-            updateValue(keyName, updater(currentValue));
-            increaseManualRefreshes();
-        },
-        unsavedValue: currentValue,
-        savedValue: value.valueInCode,
-    });
     const disableSave = window.remotion_isReadOnlyStudio || originalFileName.type !== 'loaded';
-    const onSave = (0, react_1.useCallback)((updater) => {
+    const saveToFile = (0, react_1.useCallback)((updater) => {
         if (disableSave) {
             return;
         }
@@ -64,11 +54,14 @@ const VisualControlHandle = ({ value, keyName }) => {
                 changes: [
                     {
                         id: keyName,
-                        newValueSerialized: no_react_1.NoReactInternals.serializeJSONWithSpecialTypes({
-                            data: val,
-                            indent: 2,
-                            staticBase: window.remotion_staticBase,
-                        }).serializedString,
+                        newValueSerialized: val === undefined
+                            ? ''
+                            : no_react_1.NoReactInternals.serializeJSONWithSpecialTypes({
+                                data: val,
+                                indent: 2,
+                                staticBase: window.remotion_staticBase,
+                            }).serializedString,
+                        newValueIsUndefined: val === undefined,
                         enumPaths,
                     },
                 ],
@@ -90,8 +83,15 @@ const VisualControlHandle = ({ value, keyName }) => {
     (0, react_1.useEffect)(() => {
         setSaving(false);
     }, [fastRefreshes]);
+    const setValue = (0, react_1.useCallback)((updater, { shouldSave }) => {
+        updateValue(keyName, updater(currentValue));
+        increaseManualRefreshes();
+        if (shouldSave) {
+            saveToFile(updater);
+        }
+    }, [currentValue, increaseManualRefreshes, keyName, saveToFile, updateValue]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(VisualControlHandleHeader_1.VisualControlHandleHeader, { originalFileName: originalFileName }), jsx_runtime_1.jsx(layout_1.Spacing, { block: true, y: 0.5 }), jsx_runtime_1.jsx(RevisionContextProvider, { children: jsx_runtime_1.jsx(ZodSwitch_1.ZodSwitch, { mayPad: true, schema: value.schema, showSaveButton: !disableSave, saving: saving, saveDisabledByParent: false, onSave: onSave, jsonPath: [keyName], value: localValue.value, defaultValue: value.valueInCode, setValue: onChange, onRemove: null }) })
+            jsx_runtime_1.jsx(VisualControlHandleHeader_1.VisualControlHandleHeader, { originalFileName: originalFileName }), jsx_runtime_1.jsx(layout_1.Spacing, { block: true, y: 0.5 }), jsx_runtime_1.jsx(ZodSwitch_1.ZodSwitch, { mayPad: true, schema: value.schema, jsonPath: [keyName], value: currentValue, setValue: setValue, onRemove: null })
         ] }));
 };
 exports.VisualControlHandle = VisualControlHandle;

package/dist/components/VisualControls/VisualControlsUndoSync.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const VisualControlsUndoSync: React.FC;

package/dist/components/VisualControls/VisualControlsUndoSync.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VisualControlsUndoSync = void 0;
+const react_1 = require("react");
+const client_id_1 = require("../../helpers/client-id");
+const VisualControls_1 = require("../../visual-controls/VisualControls");
+const VisualControlsUndoSync = () => {
+    const { subscribeToEvent } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { updateValue } = (0, react_1.useContext)(VisualControls_1.SetVisualControlsContext);
+    (0, react_1.useEffect)(() => {
+        const unsub = subscribeToEvent('visual-control-values-changed', (event) => {
+            if (event.type !== 'visual-control-values-changed') {
+                return;
+            }
+            for (const entry of event.values) {
+                updateValue(entry.id, entry.isUndefined ? undefined : entry.value);
+            }
+        });
+        return () => unsub();
+    }, [subscribeToEvent, updateValue]);
+    return null;
+};
+exports.VisualControlsUndoSync = VisualControlsUndoSync;

package/dist/error-overlay/react-overlay/listen-to-runtime-errors.js

@@ -38,7 +38,6 @@ const crashWithFrames = (crash) => (error) => {
     if (didHookOrderChange && !justRefreshedBecauseOfHooks) {
         // eslint-disable-next-line no-console
         console.log('Hook order changed. Reloading app...');
-        window.remotion_unsavedProps = false;
         (0, url_state_1.reloadUrl)();
     }
     else {