@remotion/studio 4.0.438 → 4.0.440

package/dist/esm/renderEntry.mjs

@@ -162,7 +162,7 @@ var renderContent = (Root) => {
         frameState: null,
         audioEnabled: window.remotion_audioEnabled,
         videoEnabled: window.remotion_videoEnabled,
-        logLevel: window.remotion_logLevel,
+        logLevel: window.remotion_logLevel ?? "info",
         numberOfAudioTags: 0,
         audioLatencyHint: window.remotion_audioLatencyHint ?? "interactive",
         visualModeEnabled: false,
@@ -189,7 +189,7 @@ var renderContent = (Root) => {
         frameState: null,
         audioEnabled: window.remotion_audioEnabled,
         videoEnabled: window.remotion_videoEnabled,
-        logLevel: window.remotion_logLevel,
+        logLevel: window.remotion_logLevel ?? "info",
         numberOfAudioTags: 0,
         audioLatencyHint: window.remotion_audioLatencyHint ?? "interactive",
         visualModeEnabled: false,
@@ -208,7 +208,7 @@ var renderContent = (Root) => {
     renderToDOM(/* @__PURE__ */ jsx("div", {
       children: /* @__PURE__ */ jsx(DelayedSpinner, {})
     }));
-    import("./chunk-ba0scebn.js").then(({ StudioInternals }) => {
+    import("./chunk-1x2ychmc.js").then(({ StudioInternals }) => {
       window.remotion_isStudio = true;
       window.remotion_isReadOnlyStudio = true;
       window.remotion_inputProps = "{}";
@@ -252,14 +252,14 @@ if (typeof window !== "undefined") {
     const compositions = Internals.compositionsRef.current.getCompositions();
     const canSerializeDefaultProps = getCanSerializeDefaultProps(compositions);
     if (!canSerializeDefaultProps) {
-      Internals.Log.warn({ logLevel: window.remotion_logLevel, tag: null }, "defaultProps are too big to serialize - trying to find the problematic composition...");
-      Internals.Log.warn({ logLevel: window.remotion_logLevel, tag: null }, "Serialization:", compositions);
+      Internals.Log.warn({ logLevel: window.remotion_logLevel ?? "info", tag: null }, "defaultProps are too big to serialize - trying to find the problematic composition...");
+      Internals.Log.warn({ logLevel: window.remotion_logLevel ?? "info", tag: null }, "Serialization:", compositions);
       for (const comp of compositions) {
         if (!getCanSerializeDefaultProps(comp)) {
           throw new Error(`defaultProps too big - could not serialize - the defaultProps of composition with ID ${comp.id} - the object that was passed to defaultProps was too big. Learn how to mitigate this error by visiting https://remotion.dev/docs/troubleshooting/serialize-defaultprops`);
         }
       }
-      Internals.Log.warn({ logLevel: window.remotion_logLevel, tag: null }, "Could not single out a problematic composition -  The composition list as a whole is too big to serialize.");
+      Internals.Log.warn({ logLevel: window.remotion_logLevel ?? "info", tag: null }, "Could not single out a problematic composition -  The composition list as a whole is too big to serialize.");
       throw new Error("defaultProps too big - Could not serialize - an object that was passed to defaultProps was too big. Learn how to mitigate this error by visiting https://remotion.dev/docs/troubleshooting/serialize-defaultprops");
     }
     return compositions;

package/dist/helpers/client-id.js

@@ -63,7 +63,7 @@ const PreviewServerConnection = ({ children, readOnlyStudio }) => {
     const openEventSource = (0, react_1.useCallback)(() => {
         const source = new EventSource('/events');
         source.addEventListener('message', (event) => {
-            var _a, _b;
+            var _a, _b, _c;
             const newEvent = JSON.parse(event.data);
             if (newEvent.type === 'new-input-props' ||
                 newEvent.type === 'new-env-variables') {
@@ -74,6 +74,15 @@ const PreviewServerConnection = ({ children, readOnlyStudio }) => {
                     type: 'connected',
                     clientId: newEvent.clientId,
                 });
+                listeners.current.forEach((l) => {
+                    if (l.type === 'undo-redo-stack-changed') {
+                        l.listener({
+                            type: 'undo-redo-stack-changed',
+                            undoFile: newEvent.undoFile,
+                            redoFile: newEvent.redoFile,
+                        });
+                    }
+                });
             }
             if (newEvent.type === 'render-queue-updated') {
                 (_a = context_1.renderJobsRef.current) === null || _a === void 0 ? void 0 : _a.updateRenderJobs(newEvent.queue);
@@ -99,6 +108,9 @@ const PreviewServerConnection = ({ children, readOnlyStudio }) => {
                     detail: payload,
                 }));
             }
+            if (newEvent.type === 'hmr') {
+                (_c = window.__remotion_processHmrEvent) === null || _c === void 0 ? void 0 : _c.call(window, newEvent.hmrEvent);
+            }
             listeners.current.forEach((l) => {
                 if (l.type === newEvent.type) {
                     l.listener(newEvent);

package/dist/helpers/document-title.d.ts

@@ -1,4 +1,3 @@
 import type { AnyRenderJob } from '../components/RenderQueue/context';
 export declare const setCurrentCanvasContentId: (id: string | null) => void;
-export declare const setUnsavedProps: (unsaved: boolean) => void;
 export declare const setRenderJobs: (jobs: AnyRenderJob[]) => void;

package/dist/helpers/document-title.js

@@ -1,11 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setRenderJobs = exports.setUnsavedProps = exports.setCurrentCanvasContentId = void 0;
+exports.setRenderJobs = exports.setCurrentCanvasContentId = void 0;
 const no_react_1 = require("remotion/no-react");
 const context_1 = require("../components/RenderQueue/context");
 let currentItemName = null;
-let unsavedProps = false;
-let tabInactive = false;
 let renderJobs = [];
 const setCurrentCanvasContentId = (id) => {
     if (!id) {
@@ -18,20 +16,11 @@ const setCurrentCanvasContentId = (id) => {
     updateTitle();
 };
 exports.setCurrentCanvasContentId = setCurrentCanvasContentId;
-const setUnsavedProps = (unsaved) => {
-    window.remotion_unsavedProps = unsaved;
-    unsavedProps = unsaved;
-};
-exports.setUnsavedProps = setUnsavedProps;
 const setRenderJobs = (jobs) => {
     renderJobs = jobs;
     updateTitle();
 };
 exports.setRenderJobs = setRenderJobs;
-document.addEventListener('visibilitychange', () => {
-    tabInactive = document.visibilityState === 'hidden';
-    updateTitle();
-});
 const productName = 'Remotion Studio';
 const suffix = `- ${productName}`;
 const updateTitle = () => {
@@ -42,7 +31,6 @@ const updateTitle = () => {
     const currentCompTitle = `${currentItemName} / ${window.remotion_projectName}`;
     document.title = [
         getProgressInBrackets(currentItemName, renderJobs),
-        unsavedProps && tabInactive ? '✏️' : null,
         `${currentCompTitle} ${suffix}`,
     ]
         .filter(no_react_1.NoReactInternals.truthy)
@@ -70,7 +58,3 @@ const getProgressInBrackets = (selectedCompositionId, jobs) => {
         : `[${progInPercent}% ${currentRender.compositionId}]`;
     return progressInBrackets;
 };
-document.addEventListener('visibilitychange', () => {
-    tabInactive = document.visibilityState === 'hidden';
-    updateTitle();
-});

package/dist/helpers/render-modal-sections.d.ts

@@ -1,6 +1,6 @@
 import type { RenderType } from '../components/RenderModal/RenderModalAdvanced';
 type Section = 'general' | 'picture' | 'advanced' | 'data' | 'gif' | 'audio';
-export declare const useRenderModalSections: (renderMode: RenderType, codec: "aac" | "gif" | "h264" | "h264-mkv" | "h264-ts" | "h265" | "mp3" | "prores" | "vp8" | "vp9" | "wav") => {
+export declare const useRenderModalSections: (renderMode: RenderType, codec: "aac" | "av1" | "gif" | "h264" | "h264-mkv" | "h264-ts" | "h265" | "mp3" | "prores" | "vp8" | "vp9" | "wav") => {
     tab: Section;
     setTab: import("react").Dispatch<import("react").SetStateAction<Section>>;
     shownTabs: Section[];

package/dist/helpers/timeline-layout.d.ts

@@ -16,4 +16,4 @@ export type SchemaFieldInfo = {
 };
 export declare const getSchemaFields: (controls: SequenceControls | null) => SchemaFieldInfo[] | null;
 export declare const getExpandedTrackHeight: (controls: SequenceControls | null) => number;
-export declare const getTimelineLayerHeight: (type: "other" | "video") => 25 | 50;
+export declare const getTimelineLayerHeight: (type: "audio" | "image" | "other" | "sequence" | "video") => 25 | 50;

package/dist/helpers/timeline-layout.js

@@ -44,7 +44,7 @@ const getExpandedTrackHeight = (controls) => {
 };
 exports.getExpandedTrackHeight = getExpandedTrackHeight;
 const getTimelineLayerHeight = (type) => {
-    if (type === 'video') {
+    if (type === 'video' || type === 'image') {
         return 50;
     }
     return 25;

package/dist/hot-middleware-client/client.d.ts

@@ -4,15 +4,10 @@
  * and rewritten in TypeScript. This file is MIT licensed
  */
 import type { HotMiddlewareMessage } from '@remotion/studio-shared';
-declare function eventSourceWrapper(): {
-    addMessageListener(fn: (msg: MessageEvent<any>) => void): void;
-};
 declare global {
     interface Window {
-        __whmEventSourceWrapper: {
-            [key: string]: ReturnType<typeof eventSourceWrapper>;
-        };
         __webpack_hot_middleware_reporter__: Reporter;
+        __remotion_processHmrEvent?: (hmrEvent: HotMiddlewareMessage) => void;
     }
 }
 type Reporter = ReturnType<typeof createReporter>;

package/dist/hot-middleware-client/client.js

@@ -5,70 +5,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.enableHotMiddleware = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const process_update_1 = require("./process-update");
-function eventSourceWrapper() {
-    let source;
-    let lastActivity = Date.now();
-    const listeners = [];
-    init();
-    const timer = setInterval(() => {
-        if (Date.now() - lastActivity > studio_shared_1.hotMiddlewareOptions.timeout) {
-            handleDisconnect();
-        }
-    }, studio_shared_1.hotMiddlewareOptions.timeout / 2);
-    function init() {
-        source = new window.EventSource(studio_shared_1.hotMiddlewareOptions.path);
-        source.onopen = handleOnline;
-        source.onerror = handleDisconnect;
-        source.onmessage = handleMessage;
-    }
-    function handleOnline() {
-        lastActivity = Date.now();
-    }
-    function handleMessage(event) {
-        lastActivity = Date.now();
-        for (let i = 0; i < listeners.length; i++) {
-            listeners[i](event);
-        }
-    }
-    function handleDisconnect() {
-        clearInterval(timer);
-        source.close();
-        setTimeout(init, 1000);
-    }
-    return {
-        addMessageListener(fn) {
-            listeners.push(fn);
-        },
-    };
-}
-function getEventSourceWrapper() {
-    if (!window.__whmEventSourceWrapper) {
-        window.__whmEventSourceWrapper = {};
-    }
-    if (!window.__whmEventSourceWrapper[studio_shared_1.hotMiddlewareOptions.path]) {
-        // cache the wrapper for other entries loaded on
-        // the same page with the same hotMiddlewareOptions.path
-        window.__whmEventSourceWrapper[studio_shared_1.hotMiddlewareOptions.path] =
-            eventSourceWrapper();
-    }
-    return window.__whmEventSourceWrapper[studio_shared_1.hotMiddlewareOptions.path];
-}
-function connect() {
-    getEventSourceWrapper().addMessageListener(handleMessage);
-    function handleMessage(event) {
-        if (event.data === '\uD83D\uDC93') {
-            return;
-        }
-        try {
-            processMessage(JSON.parse(event.data));
-        }
-        catch (ex) {
-            if (studio_shared_1.hotMiddlewareOptions.warn) {
-                console.warn('Invalid HMR message: ' + event.data + '\n' + ex);
-            }
-        }
-    }
-}
 function createReporter() {
     const styles = {
         errors: 'color: #ff0000;',
@@ -153,20 +89,33 @@ function processMessage(obj) {
 let reporter;
 const singletonKey = '__webpack_hot_middleware_reporter__';
 const enableHotMiddleware = () => {
-    if (typeof window === 'undefined') {
-        // do nothing
-    }
-    else if (typeof window.EventSource === 'undefined') {
-        console.warn('Unsupported browser: You need a browser that supports EventSource ');
-    }
-    else {
-        connect();
-    }
     if (typeof window !== 'undefined') {
         if (!window[singletonKey]) {
             window[singletonKey] = createReporter();
         }
         reporter = window[singletonKey];
     }
+    window.__remotion_processHmrEvent = (hmrEvent) => {
+        processMessage(hmrEvent);
+    };
+    // Create a standalone SSE listener for HMR events immediately.
+    // This is needed because lazy-compiled modules require HMR updates
+    // to deliver compiled code, but the React-managed /events SSE
+    // (in PreviewServerConnection) only connects after React mounts —
+    // which itself depends on lazy modules loading first.
+    if (typeof window !== 'undefined' && typeof EventSource !== 'undefined') {
+        const source = new EventSource('/events');
+        source.addEventListener('message', (event) => {
+            try {
+                const parsed = JSON.parse(event.data);
+                if (parsed.type === 'hmr') {
+                    processMessage(parsed.hmrEvent);
+                }
+            }
+            catch (_a) {
+                // Ignore parse errors
+            }
+        });
+    }
 };
 exports.enableHotMiddleware = enableHotMiddleware;

package/dist/hot-middleware-client/process-update.d.ts

@@ -10,9 +10,7 @@
  */
 import type { ModuleMap } from '@remotion/studio-shared';
 export declare const processUpdate: (hash: string | undefined, moduleMap: ModuleMap, options: {
-    path: string;
     timeout: number;
     reload: boolean;
     warn: boolean;
-    heartbeat: number;
 }) => void;

package/dist/hot-middleware-client/process-update.js

@@ -7,7 +7,6 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.processUpdate = void 0;
-const NotificationCenter_1 = require("../components/Notifications/NotificationCenter");
 const url_state_1 = require("../helpers/url-state");
 if (!__webpack_module__.hot) {
     throw new Error('[Fast refresh] Hot Module Replacement is disabled.');
@@ -50,10 +49,6 @@ function upToDate(hash) {
 }
 const processUpdate = function (hash, moduleMap, options) {
     var _a;
-    const { reload } = options;
-    if (!upToDate(hash) && ((_a = __webpack_module__.hot) === null || _a === void 0 ? void 0 : _a.status()) === 'idle') {
-        check();
-    }
     async function check() {
         var _a;
         const cb = function (err, updatedModules) {
@@ -137,9 +132,7 @@ const processUpdate = function (hash, moduleMap, options) {
         }
         if (options.warn) {
             console.warn('[Fast refresh] Update check failed: ' + (err.stack || err.message));
-            if (!window.remotion_unsavedProps) {
-                (0, url_state_1.reloadUrl)();
-            }
+            (0, url_state_1.reloadUrl)();
         }
     }
     function performReload() {
@@ -148,12 +141,11 @@ const processUpdate = function (hash, moduleMap, options) {
         }
         if (options.warn)
             console.warn('[Fast refresh] Reloading page');
-        if (window.remotion_unsavedProps) {
-            (0, NotificationCenter_1.showNotification)('Fast refresh needs to reload the page, but you have unsaved props. Save then reload the page to apply changes.', 1000);
-        }
-        else {
-            (0, url_state_1.reloadUrl)();
-        }
+        (0, url_state_1.reloadUrl)();
+    }
+    const { reload } = options;
+    if (!upToDate(hash) && ((_a = __webpack_module__.hot) === null || _a === void 0 ? void 0 : _a.status()) === 'idle') {
+        check();
     }
 };
 exports.processUpdate = processUpdate;

package/dist/icons/redo.d.ts

@@ -0,0 +1,3 @@
+import type { SVGProps } from 'react';
+import React from 'react';
+export declare const RedoIcon: React.FC<SVGProps<SVGSVGElement>>;

package/dist/icons/redo.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RedoIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const RedoIcon = (props) => {
+    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 640 640", ...props, children: jsx_runtime_1.jsx("path", { fill: "currentColor", d: "M552 256L408 256C398.3 256 389.5 250.2 385.8 241.2C382.1 232.2 384.1 221.9 391 215L437.7 168.3C362.4 109.7 253.4 115 184.2 184.2C109.2 259.2 109.2 380.7 184.2 455.7C259.2 530.7 380.7 530.7 455.7 455.7C463.9 447.5 471.2 438.8 477.6 429.6C487.7 415.1 507.7 411.6 522.2 421.7C536.7 431.8 540.2 451.8 530.1 466.3C521.6 478.5 511.9 490.1 501 501C401 601 238.9 601 139 501C39.1 401 39 239 139 139C233.3 44.7 382.7 39.4 483.3 122.8L535 71C541.9 64.1 552.2 62.1 561.2 65.8C570.2 69.5 576 78.3 576 88L576 232C576 245.3 565.3 256 552 256z" }) }));
+};
+exports.RedoIcon = RedoIcon;

package/dist/icons/undo.d.ts

@@ -0,0 +1,3 @@
+import type { SVGProps } from 'react';
+import React from 'react';
+export declare const UndoIcon: React.FC<SVGProps<SVGSVGElement>>;

package/dist/icons/undo.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UndoIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const UndoIcon = (props) => {
+    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 640 640", ...props, children: jsx_runtime_1.jsx("path", { fill: "currentColor", d: "M88 256L232 256C241.7 256 250.5 250.2 254.2 241.2C257.9 232.2 255.9 221.9 249 215L202.3 168.3C277.6 109.7 386.6 115 455.8 184.2C530.8 259.2 530.8 380.7 455.8 455.7C380.8 530.7 259.3 530.7 184.3 455.7C174.1 445.5 165.3 434.4 157.9 422.7C148.4 407.8 128.6 403.4 113.7 412.9C98.8 422.4 94.4 442.2 103.9 457.1C113.7 472.7 125.4 487.5 139 501C239 601 401 601 501 501C601 401 601 239 501 139C406.8 44.7 257.3 39.3 156.7 122.8L105 71C98.1 64.2 87.8 62.1 78.8 65.8C69.8 69.5 64 78.3 64 88L64 232C64 245.3 74.7 256 88 256z" }) }));
+};
+exports.UndoIcon = UndoIcon;

package/dist/renderEntry.js

@@ -171,7 +171,7 @@ const renderToDOM = (content) => {
     getRootForElement().render(content);
 };
 const renderContent = (Root) => {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const bundleMode = getBundleMode();
     if (bundleMode.type === 'composition') {
         const markup = (jsx_runtime_1.jsx(remotion_1.Internals.CompositionManagerProvider, { initialCanvasContent: null, onlyRenderComposition: bundleMode.compositionName, currentCompositionMetadata: {
@@ -185,13 +185,13 @@ const renderContent = (Root) => {
                 defaultVideoImageFormat: bundleMode.compositionDefaultVideoImageFormat,
                 defaultPixelFormat: bundleMode.compositionDefaultPixelFormat,
                 defaultProResProfile: bundleMode.compositionDefaultProResProfile,
-            }, initialCompositions: [], children: jsx_runtime_1.jsx(remotion_1.Internals.RemotionRootContexts, { frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: window.remotion_logLevel, numberOfAudioTags: 0, audioLatencyHint: (_a = window.remotion_audioLatencyHint) !== null && _a !== void 0 ? _a : 'interactive', visualModeEnabled: false, children: jsx_runtime_1.jsxs(remotion_1.Internals.RenderAssetManagerProvider, { collectAssets: null, children: [
+            }, initialCompositions: [], children: jsx_runtime_1.jsx(remotion_1.Internals.RemotionRootContexts, { frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: (_a = window.remotion_logLevel) !== null && _a !== void 0 ? _a : 'info', numberOfAudioTags: 0, audioLatencyHint: (_b = window.remotion_audioLatencyHint) !== null && _b !== void 0 ? _b : 'interactive', visualModeEnabled: false, children: jsx_runtime_1.jsxs(remotion_1.Internals.RenderAssetManagerProvider, { collectAssets: null, children: [
                         jsx_runtime_1.jsx(Root, {}), jsx_runtime_1.jsx(GetVideoComposition, { state: bundleMode })
                     ] }) }) }));
         renderToDOM(markup);
     }
     if (bundleMode.type === 'evaluation') {
-        const markup = (jsx_runtime_1.jsx(remotion_1.Internals.CompositionManagerProvider, { initialCanvasContent: null, onlyRenderComposition: null, currentCompositionMetadata: null, initialCompositions: [], children: jsx_runtime_1.jsx(remotion_1.Internals.RemotionRootContexts, { frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: window.remotion_logLevel, numberOfAudioTags: 0, audioLatencyHint: (_b = window.remotion_audioLatencyHint) !== null && _b !== void 0 ? _b : 'interactive', visualModeEnabled: false, children: jsx_runtime_1.jsx(remotion_1.Internals.RenderAssetManagerProvider, { collectAssets: null, children: jsx_runtime_1.jsx(Root, {}) }) }) }));
+        const markup = (jsx_runtime_1.jsx(remotion_1.Internals.CompositionManagerProvider, { initialCanvasContent: null, onlyRenderComposition: null, currentCompositionMetadata: null, initialCompositions: [], children: jsx_runtime_1.jsx(remotion_1.Internals.RemotionRootContexts, { frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: (_c = window.remotion_logLevel) !== null && _c !== void 0 ? _c : 'info', numberOfAudioTags: 0, audioLatencyHint: (_d = window.remotion_audioLatencyHint) !== null && _d !== void 0 ? _d : 'interactive', visualModeEnabled: false, children: jsx_runtime_1.jsx(remotion_1.Internals.RenderAssetManagerProvider, { collectAssets: null, children: jsx_runtime_1.jsx(Root, {}) }) }) }));
         renderToDOM(markup);
     }
     if (bundleMode.type === 'index') {
@@ -227,6 +227,7 @@ const setBundleModeAndUpdate = (state) => {
 exports.setBundleModeAndUpdate = setBundleModeAndUpdate;
 if (typeof window !== 'undefined') {
     const getUnevaluatedComps = () => {
+        var _a, _b, _c;
         if (!remotion_1.Internals.getRoot()) {
             throw new Error('registerRoot() was never called. 1. Make sure you specified the correct entrypoint for your bundle. 2. If your registerRoot() call is deferred, use the delayRender/continueRender pattern to tell Remotion to wait.');
         }
@@ -236,14 +237,14 @@ if (typeof window !== 'undefined') {
         const compositions = remotion_1.Internals.compositionsRef.current.getCompositions();
         const canSerializeDefaultProps = getCanSerializeDefaultProps(compositions);
         if (!canSerializeDefaultProps) {
-            remotion_1.Internals.Log.warn({ logLevel: window.remotion_logLevel, tag: null }, 'defaultProps are too big to serialize - trying to find the problematic composition...');
-            remotion_1.Internals.Log.warn({ logLevel: window.remotion_logLevel, tag: null }, 'Serialization:', compositions);
+            remotion_1.Internals.Log.warn({ logLevel: (_a = window.remotion_logLevel) !== null && _a !== void 0 ? _a : 'info', tag: null }, 'defaultProps are too big to serialize - trying to find the problematic composition...');
+            remotion_1.Internals.Log.warn({ logLevel: (_b = window.remotion_logLevel) !== null && _b !== void 0 ? _b : 'info', tag: null }, 'Serialization:', compositions);
             for (const comp of compositions) {
                 if (!getCanSerializeDefaultProps(comp)) {
                     throw new Error(`defaultProps too big - could not serialize - the defaultProps of composition with ID ${comp.id} - the object that was passed to defaultProps was too big. Learn how to mitigate this error by visiting https://remotion.dev/docs/troubleshooting/serialize-defaultprops`);
                 }
             }
-            remotion_1.Internals.Log.warn({ logLevel: window.remotion_logLevel, tag: null }, 'Could not single out a problematic composition -  The composition list as a whole is too big to serialize.');
+            remotion_1.Internals.Log.warn({ logLevel: (_c = window.remotion_logLevel) !== null && _c !== void 0 ? _c : 'info', tag: null }, 'Could not single out a problematic composition -  The composition list as a whole is too big to serialize.');
             throw new Error('defaultProps too big - Could not serialize - an object that was passed to defaultProps was too big. Learn how to mitigate this error by visiting https://remotion.dev/docs/troubleshooting/serialize-defaultprops');
         }
         return compositions;

package/dist/visual-controls/VisualControls.js

@@ -7,6 +7,7 @@ const remotion_1 = require("remotion");
 const get_zod_schema_from_primitive_1 = require("../api/get-zod-schema-from-primitive");
 const get_zod_if_possible_1 = require("../components/get-zod-if-possible");
 const get_current_edited_value_1 = require("./get-current-edited-value");
+const visual_control_store_1 = require("./visual-control-store");
 exports.VisualControlsTabActivatedContext = (0, react_1.createContext)(false);
 exports.VisualControlsContext = (0, react_1.createContext)({
     handles: {},
@@ -32,16 +33,18 @@ const VisualControlsProvider = ({ children }) => {
         };
     }, [handles]);
     const setControl = (0, react_1.useCallback)((key, value) => {
-        var _a, _b, _c, _d;
-        const currentUnsaved = (_b = (_a = imperativeHandles.current) === null || _a === void 0 ? void 0 : _a[key]) === null || _b === void 0 ? void 0 : _b.unsavedValue;
-        const currentSavedState = (_d = (_c = imperativeHandles.current) === null || _c === void 0 ? void 0 : _c[key]) === null || _d === void 0 ? void 0 : _d.valueInCode;
+        var _a;
+        const existingHandle = (_a = imperativeHandles.current) === null || _a === void 0 ? void 0 : _a[key];
+        const currentSavedState = existingHandle === null || existingHandle === void 0 ? void 0 : existingHandle.valueInCode;
         const changedSavedValue = value.valueInCode !== currentSavedState;
-        const changedUnsavedValue = currentUnsaved === undefined && value.valueInCode !== undefined;
+        const changedUnsavedValue = existingHandle === undefined && value.valueInCode !== undefined;
         imperativeHandles.current = {
             ...imperativeHandles.current,
             [key]: {
                 ...value,
-                unsavedValue: currentUnsaved !== null && currentUnsaved !== void 0 ? currentUnsaved : value.valueInCode,
+                unsavedValue: existingHandle !== undefined && !changedSavedValue
+                    ? existingHandle.unsavedValue
+                    : value.valueInCode,
                 valueInCode: value.valueInCode,
             },
         };
@@ -93,6 +96,7 @@ const VisualControlsProvider = ({ children }) => {
             },
         };
         updateHandles();
+        visual_control_store_1.visualControlStore.emitChange();
     }, [updateHandles]);
     (0, react_1.useImperativeHandle)(exports.visualControlRef, () => {
         return {

package/dist/visual-controls/get-current-edited-value.js

@@ -2,9 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getVisualControlEditedValue = void 0;
 const getVisualControlEditedValue = ({ handles, key, }) => {
-    var _a;
-    var _b;
-    // TODO: What if z.null()
-    return (_b = (_a = handles === null || handles === void 0 ? void 0 : handles[key]) === null || _a === void 0 ? void 0 : _a.unsavedValue) !== null && _b !== void 0 ? _b : null;
+    const handle = handles === null || handles === void 0 ? void 0 : handles[key];
+    if (handle === undefined) {
+        return null;
+    }
+    return handle.unsavedValue;
 };
 exports.getVisualControlEditedValue = getVisualControlEditedValue;

package/dist/visual-controls/visual-control-store.d.ts

@@ -0,0 +1,7 @@
+type Listener = () => void;
+export declare const visualControlStore: {
+    subscribe(listener: Listener): () => void;
+    getSnapshot(): number;
+    emitChange(): void;
+};
+export {};

package/dist/visual-controls/visual-control-store.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.visualControlStore = void 0;
+let version = 0;
+const listeners = new Set();
+exports.visualControlStore = {
+    subscribe(listener) {
+        listeners.add(listener);
+        return () => {
+            listeners.delete(listener);
+        };
+    },
+    getSnapshot() {
+        return version;
+    },
+    emitChange() {
+        version++;
+        for (const listener of listeners) {
+            listener();
+        }
+    },
+};

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.438",
+	"version": "4.0.440",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"sideEffects": false,
@@ -26,13 +26,13 @@
 	},
 	"dependencies": {
 		"semver": "7.5.3",
-		"remotion": "4.0.438",
-		"@remotion/player": "4.0.438",
-		"@remotion/media-utils": "4.0.438",
-		"@remotion/renderer": "4.0.438",
-		"@remotion/web-renderer": "4.0.438",
-		"@remotion/studio-shared": "4.0.438",
-		"@remotion/zod-types": "4.0.438",
+		"remotion": "4.0.440",
+		"@remotion/player": "4.0.440",
+		"@remotion/media-utils": "4.0.440",
+		"@remotion/renderer": "4.0.440",
+		"@remotion/web-renderer": "4.0.440",
+		"@remotion/studio-shared": "4.0.440",
+		"@remotion/zod-types": "4.0.440",
 		"mediabunny": "1.39.2",
 		"memfs": "3.4.3",
 		"source-map": "0.7.3",
@@ -43,7 +43,7 @@
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"@types/semver": "^7.3.4",
-		"@remotion/eslint-config-internal": "4.0.438",
+		"@remotion/eslint-config-internal": "4.0.440",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},

package/dist/components/GlobalPropsEditorUpdateButton.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-export declare const GlobalPropsEditorUpdateButton: React.FC<{
-    readonly compositionId: string;
-    readonly currentDefaultProps: Record<string, unknown>;
-}>;