@remotion/studio-server 4.0.438 → 4.0.439

package/dist/preview-server/routes/log-update.js

@@ -1,9 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.logUpdate = void 0;
+exports.logUpdate = exports.formatPropChange = exports.normalizeQuotes = exports.warnAboutPrettierOnce = void 0;
 const renderer_1 = require("@remotion/renderer");
 const make_link_1 = require("../../hyperlinks/make-link");
 let warnedAboutPrettier = false;
+const warnAboutPrettierOnce = (logLevel) => {
+    if (warnedAboutPrettier) {
+        return;
+    }
+    warnedAboutPrettier = true;
+    renderer_1.RenderInternals.Log.warn({ indent: false, logLevel }, renderer_1.RenderInternals.chalk.yellow('Could not format with Prettier. File will need to be formatted manually.'));
+};
+exports.warnAboutPrettierOnce = warnAboutPrettierOnce;
 const normalizeQuotes = (str) => {
     if (str.length >= 2 &&
         ((str.startsWith("'") && str.endsWith("'")) ||
@@ -12,45 +20,71 @@ const normalizeQuotes = (str) => {
     }
     return str;
 };
-const formatValueChange = ({ oldValueString, newValueString, defaultValueString, }) => {
-    // Changed to default value (prop gets deleted) → show only old value in red
-    if (defaultValueString !== null && newValueString === defaultValueString) {
-        return renderer_1.RenderInternals.chalk.red(oldValueString);
+exports.normalizeQuotes = normalizeQuotes;
+// 24-bit ANSI helpers
+const fg = (r, g, b, str) => `\u001b[38;2;${r};${g};${b}m${str}\u001b[39m`;
+const bg = (r, g, b, str) => `\u001b[48;2;${r};${g};${b}m${str}\u001b[49m`;
+// Monokai-inspired syntax colors
+const attrName = (str) => fg(166, 226, 46, str);
+const equals = (str) => fg(249, 38, 114, str);
+const punctuation = (str) => fg(248, 248, 242, str);
+const stringValue = (str) => fg(230, 219, 116, str);
+const numberValue = (str) => fg(174, 129, 255, str);
+const colorValue = (str) => {
+    if ((str.startsWith("'") && str.endsWith("'")) ||
+        (str.startsWith('"') && str.endsWith('"'))) {
+        return stringValue(str);
     }
-    // Changed from default value (prop gets added) → show only new value in green
-    if (defaultValueString !== null && oldValueString === defaultValueString) {
-        return renderer_1.RenderInternals.chalk.green(newValueString);
+    if (/^-?\d+(\.\d+)?$/.test(str)) {
+        return numberValue(str);
     }
-    return `${renderer_1.RenderInternals.chalk.red(oldValueString)} \u2192 ${renderer_1.RenderInternals.chalk.green(newValueString)}`;
+    return punctuation(str);
+};
+// Subtle background tints
+const removedBg = (str) => bg(80, 20, 20, str);
+const addedBg = (str) => bg(30, 80, 30, str);
+const colorEnabled = () => renderer_1.RenderInternals.chalk.enabled();
+// Format key={value} with Monokai syntax highlighting
+const formatSimpleProp = (key, value) => {
+    return `${attrName(key)}${equals('=')}${punctuation('{')}${colorValue(value)}${punctuation('}')}`;
+};
+// Format parentKey={{childKey: value}} with Monokai syntax highlighting
+const formatNestedProp = (parentKey, childKey, value) => {
+    return `${attrName(parentKey)}${equals('=')}${punctuation('{{')}${punctuation(childKey)}${punctuation(':')} ${colorValue(value)}${punctuation('}}')}`;
 };
 const formatPropChange = ({ key, oldValueString, newValueString, defaultValueString, }) => {
+    if (!colorEnabled()) {
+        const dotIdx = key.indexOf('.');
+        if (dotIdx === -1) {
+            return `${key}={${oldValueString}} \u2192 ${key}={${newValueString}}`;
+        }
+        const parent = key.slice(0, dotIdx);
+        const child = key.slice(dotIdx + 1);
+        return `${parent}={{${child}: ${oldValueString}}} \u2192 ${parent}={{${child}: ${newValueString}}}`;
+    }
     const isResetToDefault = defaultValueString !== null && newValueString === defaultValueString;
     const isChangeFromDefault = defaultValueString !== null && oldValueString === defaultValueString;
-    const valueChange = formatValueChange({
-        oldValueString,
-        newValueString,
-        defaultValueString,
-    });
     const dotIndex = key.indexOf('.');
     if (dotIndex === -1) {
         if (isResetToDefault) {
-            return renderer_1.RenderInternals.chalk.red(`${key}={${oldValueString}}`);
+            return removedBg(formatSimpleProp(key, oldValueString));
         }
         if (isChangeFromDefault) {
-            return renderer_1.RenderInternals.chalk.green(`${key}={${newValueString}}`);
+            return addedBg(formatSimpleProp(key, newValueString));
         }
-        return `${key}={${valueChange}}`;
+        return `${removedBg(formatSimpleProp(key, oldValueString))} \u2192 ${addedBg(formatSimpleProp(key, newValueString))}`;
     }
     const parentKey = key.slice(0, dotIndex);
     const childKey = key.slice(dotIndex + 1);
     if (isResetToDefault) {
-        return `${parentKey}={{${renderer_1.RenderInternals.chalk.red(`${childKey}: ${oldValueString}`)}}}`;
+        return removedBg(formatNestedProp(parentKey, childKey, oldValueString));
     }
     if (isChangeFromDefault) {
-        return `${parentKey}={{${renderer_1.RenderInternals.chalk.green(`${childKey}: ${newValueString}`)}}}`;
+        return addedBg(formatNestedProp(parentKey, childKey, newValueString));
     }
-    return `${parentKey}={{${childKey}: ${valueChange}}}`;
+    return `${removedBg(formatNestedProp(parentKey, childKey, oldValueString))} \u2192 ${addedBg(formatNestedProp(parentKey, childKey, newValueString))}`;
 };
+exports.formatPropChange = formatPropChange;
 const logUpdate = ({ absolutePath, fileRelativeToRoot, key, oldValueString, newValueString, defaultValueString, formatted, logLevel, }) => {
     const locationLabel = `${fileRelativeToRoot}`;
     const fileLink = (0, make_link_1.makeHyperlink)({
@@ -58,16 +92,15 @@ const logUpdate = ({ absolutePath, fileRelativeToRoot, key, oldValueString, newV
         text: locationLabel,
         fallback: locationLabel,
     });
-    const propChange = formatPropChange({
+    const propChange = (0, exports.formatPropChange)({
         key,
-        oldValueString: normalizeQuotes(oldValueString),
-        newValueString: normalizeQuotes(newValueString),
-        defaultValueString: defaultValueString !== null ? normalizeQuotes(defaultValueString) : null,
+        oldValueString: (0, exports.normalizeQuotes)(oldValueString),
+        newValueString: (0, exports.normalizeQuotes)(newValueString),
+        defaultValueString: defaultValueString !== null ? (0, exports.normalizeQuotes)(defaultValueString) : null,
     });
     renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${fileLink}:`)} ${propChange}`);
-    if (!formatted && !warnedAboutPrettier) {
-        warnedAboutPrettier = true;
-        renderer_1.RenderInternals.Log.warn({ indent: false, logLevel }, renderer_1.RenderInternals.chalk.yellow('Could not format with Prettier. File will need to be formatted manually.'));
+    if (!formatted) {
+        (0, exports.warnAboutPrettierOnce)(logLevel);
     }
 };
 exports.logUpdate = logUpdate;

package/dist/preview-server/routes/save-sequence-props.js

@@ -6,11 +6,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.saveSequencePropsHandler = void 0;
 const node_fs_1 = require("node:fs");
 const node_path_1 = __importDefault(require("node:path"));
+const renderer_1 = require("@remotion/renderer");
 const update_sequence_props_1 = require("../../codemods/update-sequence-props");
-const hmr_suppression_1 = require("../hmr-suppression");
+const file_watcher_1 = require("../../file-watcher");
+const undo_stack_1 = require("../undo-stack");
+const watch_ignore_next_change_1 = require("../watch-ignore-next-change");
+const can_update_sequence_props_1 = require("./can-update-sequence-props");
 const log_update_1 = require("./log-update");
-const saveSequencePropsHandler = async ({ input: { fileName, nodePath, key, value, defaultValue }, remotionRoot, logLevel, }) => {
+const saveSequencePropsHandler = async ({ input: { fileName, nodePath, key, value, defaultValue, observedKeys }, remotionRoot, logLevel, }) => {
     try {
+        renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[save-sequence-props] Received request for fileName="${fileName}" key="${key}"`);
         const absolutePath = node_path_1.default.resolve(remotionRoot, fileName);
         const fileRelativeToRoot = node_path_1.default.relative(remotionRoot, absolutePath);
         if (fileRelativeToRoot.startsWith('..')) {
@@ -24,28 +29,65 @@ const saveSequencePropsHandler = async ({ input: { fileName, nodePath, key, valu
             value: JSON.parse(value),
             defaultValue: defaultValue !== null ? JSON.parse(defaultValue) : null,
         });
-        (0, hmr_suppression_1.suppressHmrForFile)(absolutePath);
-        (0, node_fs_1.writeFileSync)(absolutePath, output);
         const newValueString = JSON.stringify(JSON.parse(value));
         const parsedDefault = defaultValue !== null ? JSON.parse(defaultValue) : null;
+        const defaultValueString = parsedDefault !== null ? JSON.stringify(parsedDefault) : null;
+        const normalizedOld = (0, log_update_1.normalizeQuotes)(oldValueString);
+        const normalizedNew = (0, log_update_1.normalizeQuotes)(newValueString);
+        const normalizedDefault = defaultValueString !== null ? (0, log_update_1.normalizeQuotes)(defaultValueString) : null;
+        const undoPropChange = (0, log_update_1.formatPropChange)({
+            key,
+            oldValueString: normalizedNew,
+            newValueString: normalizedOld,
+            defaultValueString: normalizedDefault,
+        });
+        const redoPropChange = (0, log_update_1.formatPropChange)({
+            key,
+            oldValueString: normalizedOld,
+            newValueString: normalizedNew,
+            defaultValueString: normalizedDefault,
+        });
+        (0, undo_stack_1.pushToUndoStack)({
+            filePath: absolutePath,
+            oldContents: fileContents,
+            logLevel,
+            remotionRoot,
+            description: {
+                undoMessage: `Undid ${undoPropChange}`,
+                redoMessage: `Redid ${redoPropChange}`,
+            },
+            entryType: 'sequence-props',
+        });
+        (0, undo_stack_1.suppressUndoStackInvalidation)(absolutePath);
+        (0, watch_ignore_next_change_1.suppressBundlerUpdateForFile)(absolutePath);
+        (0, file_watcher_1.writeFileAndNotifyFileWatchers)(absolutePath, output);
         (0, log_update_1.logUpdate)({
             absolutePath,
             fileRelativeToRoot,
             key,
             oldValueString,
             newValueString,
-            defaultValueString: parsedDefault !== null ? JSON.stringify(parsedDefault) : null,
+            defaultValueString,
             formatted,
             logLevel,
         });
+        (0, undo_stack_1.printUndoHint)(logLevel);
+        const newStatus = (0, can_update_sequence_props_1.computeSequencePropsStatus)({
+            fileName,
+            keys: observedKeys,
+            nodePath,
+            remotionRoot,
+        });
         return {
             success: true,
+            newStatus,
         };
     }
     catch (err) {
         return {
             success: false,
             reason: err.message,
+            stack: err.stack,
         };
     }
 };

package/dist/preview-server/routes/update-default-props.js

@@ -1,24 +1,61 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.updateDefaultPropsHandler = void 0;
 const node_fs_1 = require("node:fs");
+const node_path_1 = __importDefault(require("node:path"));
+const renderer_1 = require("@remotion/renderer");
 const update_default_props_1 = require("../../codemods/update-default-props");
+const file_watcher_1 = require("../../file-watcher");
+const make_link_1 = require("../../hyperlinks/make-link");
 const project_info_1 = require("../project-info");
+const undo_stack_1 = require("../undo-stack");
+const watch_ignore_next_change_1 = require("../watch-ignore-next-change");
 const can_update_default_props_1 = require("./can-update-default-props");
-const updateDefaultPropsHandler = async ({ input: { compositionId, defaultProps, enumPaths }, remotionRoot, entryPoint, }) => {
+const log_update_1 = require("./log-update");
+const updateDefaultPropsHandler = async ({ input: { compositionId, defaultProps, enumPaths }, remotionRoot, entryPoint, logLevel, }) => {
     try {
+        renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[update-default-props] Received request for compositionId="${compositionId}"`);
         const projectInfo = await (0, project_info_1.getProjectInfo)(remotionRoot, entryPoint);
         if (!projectInfo.rootFile) {
             throw new Error('Cannot find root file in project');
         }
         (0, can_update_default_props_1.checkIfTypeScriptFile)(projectInfo.rootFile);
-        const updated = await (0, update_default_props_1.updateDefaultProps)({
+        const fileContents = (0, node_fs_1.readFileSync)(projectInfo.rootFile, 'utf-8');
+        const { output, formatted } = await (0, update_default_props_1.updateDefaultProps)({
             compositionId,
-            input: (0, node_fs_1.readFileSync)(projectInfo.rootFile, 'utf-8'),
+            input: fileContents,
             newDefaultProps: JSON.parse(defaultProps),
             enumPaths,
         });
-        (0, node_fs_1.writeFileSync)(projectInfo.rootFile, updated);
+        (0, undo_stack_1.pushToUndoStack)({
+            filePath: projectInfo.rootFile,
+            oldContents: fileContents,
+            logLevel,
+            remotionRoot,
+            description: {
+                undoMessage: `Undid default props update for "${compositionId}"`,
+                redoMessage: `Redid default props update for "${compositionId}"`,
+            },
+            entryType: 'default-props',
+        });
+        (0, undo_stack_1.suppressUndoStackInvalidation)(projectInfo.rootFile);
+        (0, watch_ignore_next_change_1.suppressBundlerUpdateForFile)(projectInfo.rootFile);
+        (0, file_watcher_1.writeFileAndNotifyFileWatchers)(projectInfo.rootFile, output);
+        const fileRelativeToRoot = node_path_1.default.relative(remotionRoot, projectInfo.rootFile);
+        const locationLabel = `${fileRelativeToRoot}`;
+        const fileLink = (0, make_link_1.makeHyperlink)({
+            url: `file://${projectInfo.rootFile}`,
+            text: locationLabel,
+            fallback: locationLabel,
+        });
+        renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${fileLink}:`)} Updated default props for "${compositionId}"`);
+        if (!formatted) {
+            (0, log_update_1.warnAboutPrettierOnce)(logLevel);
+        }
+        (0, undo_stack_1.printUndoHint)(logLevel);
         return {
             success: true,
         };

package/dist/preview-server/sequence-props-watchers.js

@@ -33,18 +33,13 @@ const subscribeToSequencePropsWatchers = ({ fileName, line, keys, remotionRoot,
     }
     const { unwatch } = (0, file_watcher_1.installFileWatcher)({
         file: absolutePath,
-        onChange: (type) => {
-            if (type === 'deleted') {
+        onChange: (event) => {
+            if (event.type === 'deleted') {
                 return;
             }
-            const result = (0, can_update_sequence_props_1.computeSequencePropsStatus)({
-                fileName,
-                nodePath,
-                keys,
-                remotionRoot,
-            });
+            const result = (0, can_update_sequence_props_1.computeSequencePropsStatusFromContent)(event.content, nodePath, keys);
             (0, live_events_1.waitForLiveEventsListener)().then((listener) => {
-                listener.sendEventToClient({
+                listener.sendEventToClientId(clientId, {
                     type: 'sequence-props-updated',
                     fileName,
                     nodePath,

package/dist/preview-server/start-server.js

@@ -12,6 +12,8 @@ const routes_1 = require("../routes");
 const dev_middleware_1 = require("./dev-middleware");
 const hot_middleware_1 = require("./hot-middleware");
 const live_events_1 = require("./live-events");
+const undo_stack_1 = require("./undo-stack");
+const watch_ignore_next_change_1 = require("./watch-ignore-next-change");
 const startServer = async (options) => {
     var _a, _b, _c;
     const desiredPort = (_b = (_a = options === null || options === void 0 ? void 0 : options.port) !== null && _a !== void 0 ? _a : (process.env.PORT ? Number(process.env.PORT) : undefined)) !== null && _b !== void 0 ? _b : undefined;
@@ -26,6 +28,9 @@ const startServer = async (options) => {
             });
             return detection.type === 'match' ? 'stop' : 'continue';
         };
+    const watchIgnorePlugin = new bundler_1.WatchIgnoreNextChangePlugin((...args) => {
+        renderer_1.RenderInternals.Log.trace({ indent: false, logLevel: options.logLevel }, ...args);
+    });
     const configArgs = {
         entry: options.entry,
         userDefinedComponent: options.userDefinedComponent,
@@ -40,6 +45,7 @@ const startServer = async (options) => {
         poll: options.poll,
         bufferStateDelayInMilliseconds: options.bufferStateDelayInMilliseconds,
         askAIEnabled: options.askAIEnabled,
+        extraPlugins: [watchIgnorePlugin],
     };
     let compiler;
     if (options.rspack) {
@@ -50,9 +56,17 @@ const startServer = async (options) => {
         const [, webpackConf] = await bundler_1.BundlerInternals.webpackConfig(configArgs);
         compiler = (0, bundler_1.webpack)(webpackConf);
     }
+    (0, watch_ignore_next_change_1.setWatchIgnoreNextChangePlugin)(watchIgnorePlugin);
     const wdmMiddleware = (0, dev_middleware_1.wdm)(compiler, options.logLevel);
     const whm = (0, hot_middleware_1.webpackHotMiddleware)(compiler, options.logLevel);
-    const liveEventsServer = (0, live_events_1.makeLiveEventsRouter)(options.logLevel);
+    const liveEventsServer = (0, live_events_1.makeLiveEventsRouter)(options.logLevel, () => {
+        const undoStack = (0, undo_stack_1.getUndoStack)();
+        const redoStack = (0, undo_stack_1.getRedoStack)();
+        return {
+            undoFile: undoStack.length > 0 ? undoStack[undoStack.length - 1].filePath : null,
+            redoFile: redoStack.length > 0 ? redoStack[redoStack.length - 1].filePath : null,
+        };
+    });
     const server = node_http_1.default.createServer((request, response) => {
         if (options.enableCrossSiteIsolation) {
             response.setHeader('Cross-Origin-Opener-Policy', 'same-origin');

package/dist/preview-server/undo-stack.d.ts

@@ -1,10 +1,30 @@
 import type { LogLevel } from '@remotion/renderer';
-interface UndoEntry {
+export interface UndoEntryDescription {
+    undoMessage: string;
+    redoMessage: string;
+}
+type UndoEntryType = 'visual-control' | 'default-props' | 'sequence-props';
+type UndoEntry = {
     filePath: string;
     oldContents: string;
-}
-export declare function pushToUndoStack(filePath: string, oldContents: string, logLevel: LogLevel): void;
-export declare function pushToRedoStack(filePath: string, oldContents: string): void;
+    description: UndoEntryDescription;
+} & ({
+    entryType: 'visual-control';
+} | {
+    entryType: 'default-props';
+} | {
+    entryType: 'sequence-props';
+});
+export declare function pushToUndoStack({ filePath, oldContents, logLevel, remotionRoot, description, entryType }: {
+    filePath: string;
+    oldContents: string;
+    logLevel: LogLevel;
+    remotionRoot: string;
+    description: UndoEntryDescription;
+    entryType: UndoEntryType;
+}): void;
+export declare function printUndoHint(logLevel: LogLevel): void;
+export declare function pushToRedoStack(filePath: string, oldContents: string, description: UndoEntryDescription, entryType: UndoEntryType): void;
 export declare function suppressUndoStackInvalidation(filePath: string): void;
 export declare function popUndo(): {
     success: true;

package/dist/preview-server/undo-stack.js

@@ -1,6 +1,10 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.pushToUndoStack = pushToUndoStack;
+exports.printUndoHint = printUndoHint;
 exports.pushToRedoStack = pushToRedoStack;
 exports.suppressUndoStackInvalidation = suppressUndoStackInvalidation;
 exports.popUndo = popUndo;
@@ -8,16 +12,22 @@ exports.popRedo = popRedo;
 exports.getUndoStack = getUndoStack;
 exports.getRedoStack = getRedoStack;
 const node_fs_1 = require("node:fs");
+const node_path_1 = __importDefault(require("node:path"));
 const renderer_1 = require("@remotion/renderer");
+const parse_ast_1 = require("../codemods/parse-ast");
+const read_visual_control_values_1 = require("../codemods/read-visual-control-values");
 const file_watcher_1 = require("../file-watcher");
-const hmr_suppression_1 = require("./hmr-suppression");
+const make_link_1 = require("../hyperlinks/make-link");
 const live_events_1 = require("./live-events");
+const watch_ignore_next_change_1 = require("./watch-ignore-next-change");
 const MAX_ENTRIES = 100;
 const undoStack = [];
 const redoStack = [];
 const suppressedWrites = new Map();
 const watchers = new Map();
 let storedLogLevel = 'info';
+let storedRemotionRoot = null;
+let printedUndoHint = false;
 function broadcastState() {
     const undoFile = undoStack.length > 0 ? undoStack[undoStack.length - 1].filePath : null;
     const redoFile = redoStack.length > 0 ? redoStack[redoStack.length - 1].filePath : null;
@@ -29,9 +39,10 @@ function broadcastState() {
         });
     });
 }
-function pushToUndoStack(filePath, oldContents, logLevel) {
+function pushToUndoStack({ filePath, oldContents, logLevel, remotionRoot, description, entryType, }) {
     storedLogLevel = logLevel;
-    undoStack.push({ filePath, oldContents });
+    storedRemotionRoot = remotionRoot;
+    undoStack.push({ filePath, oldContents, description, entryType });
     if (undoStack.length > MAX_ENTRIES) {
         undoStack.shift();
     }
@@ -40,8 +51,15 @@ function pushToUndoStack(filePath, oldContents, logLevel) {
     ensureWatching(filePath);
     broadcastState();
 }
-function pushToRedoStack(filePath, oldContents) {
-    redoStack.push({ filePath, oldContents });
+function printUndoHint(logLevel) {
+    if (!printedUndoHint) {
+        printedUndoHint = true;
+        const shortcut = process.platform === 'darwin' ? 'Cmd+Z' : 'Ctrl+Z';
+        renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, renderer_1.RenderInternals.chalk.gray(`Tip: ${shortcut} in Studio to undo`));
+    }
+}
+function pushToRedoStack(filePath, oldContents, description, entryType) {
+    redoStack.push({ filePath, oldContents, description, entryType });
     if (redoStack.length > MAX_ENTRIES) {
         redoStack.shift();
     }
@@ -121,17 +139,54 @@ function cleanupWatchers() {
         }
     }
 }
+function emitVisualControlChanges(fileContents) {
+    try {
+        const ast = (0, parse_ast_1.parseAst)(fileContents);
+        const values = (0, read_visual_control_values_1.readVisualControlValues)(ast);
+        if (values.length > 0) {
+            (0, live_events_1.waitForLiveEventsListener)().then((listener) => {
+                listener.sendEventToClient({
+                    type: 'visual-control-values-changed',
+                    values,
+                });
+            });
+        }
+    }
+    catch (_a) {
+        // File might not contain visual controls or might not be parseable
+    }
+}
+function logFileAction(action, filePath) {
+    const locationLabel = storedRemotionRoot
+        ? node_path_1.default.relative(storedRemotionRoot, filePath)
+        : filePath;
+    const fileLink = (0, make_link_1.makeHyperlink)({
+        url: `file://${filePath}`,
+        text: locationLabel,
+        fallback: locationLabel,
+    });
+    renderer_1.RenderInternals.Log.info({ indent: false, logLevel: storedLogLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${fileLink}:`)} ${action}`);
+}
 function popUndo() {
     const entry = undoStack.pop();
     if (!entry) {
         return { success: false, reason: 'Nothing to undo' };
     }
     const currentContents = (0, node_fs_1.readFileSync)(entry.filePath, 'utf-8');
-    redoStack.push({ filePath: entry.filePath, oldContents: currentContents });
+    redoStack.push({
+        filePath: entry.filePath,
+        oldContents: currentContents,
+        description: entry.description,
+        entryType: entry.entryType,
+    });
     suppressUndoStackInvalidation(entry.filePath);
-    (0, hmr_suppression_1.suppressHmrForFile)(entry.filePath);
-    (0, node_fs_1.writeFileSync)(entry.filePath, entry.oldContents);
+    (0, watch_ignore_next_change_1.suppressBundlerUpdateForFile)(entry.filePath);
+    (0, file_watcher_1.writeFileAndNotifyFileWatchers)(entry.filePath, entry.oldContents);
     renderer_1.RenderInternals.Log.verbose({ indent: false, logLevel: storedLogLevel }, renderer_1.RenderInternals.chalk.gray(`Undo: restored ${entry.filePath} (undo: ${undoStack.length}, redo: ${redoStack.length})`));
+    logFileAction(entry.description.undoMessage, entry.filePath);
+    if (entry.entryType === 'visual-control') {
+        emitVisualControlChanges(entry.oldContents);
+    }
     ensureWatching(entry.filePath);
     broadcastState();
     return { success: true };
@@ -142,11 +197,20 @@ function popRedo() {
         return { success: false, reason: 'Nothing to redo' };
     }
     const currentContents = (0, node_fs_1.readFileSync)(entry.filePath, 'utf-8');
-    undoStack.push({ filePath: entry.filePath, oldContents: currentContents });
+    undoStack.push({
+        filePath: entry.filePath,
+        oldContents: currentContents,
+        description: entry.description,
+        entryType: entry.entryType,
+    });
     suppressUndoStackInvalidation(entry.filePath);
-    (0, hmr_suppression_1.suppressHmrForFile)(entry.filePath);
-    (0, node_fs_1.writeFileSync)(entry.filePath, entry.oldContents);
+    (0, watch_ignore_next_change_1.suppressBundlerUpdateForFile)(entry.filePath);
+    (0, file_watcher_1.writeFileAndNotifyFileWatchers)(entry.filePath, entry.oldContents);
     renderer_1.RenderInternals.Log.verbose({ indent: false, logLevel: storedLogLevel }, renderer_1.RenderInternals.chalk.gray(`Redo: restored ${entry.filePath} (undo: ${undoStack.length}, redo: ${redoStack.length})`));
+    logFileAction(entry.description.redoMessage, entry.filePath);
+    if (entry.entryType === 'visual-control') {
+        emitVisualControlChanges(entry.oldContents);
+    }
     ensureWatching(entry.filePath);
     broadcastState();
     return { success: true };

package/dist/preview-server/watch-ignore-next-change.d.ts

@@ -0,0 +1,3 @@
+import type { WatchIgnoreNextChangePlugin } from '@remotion/bundler';
+export declare const setWatchIgnoreNextChangePlugin: (plugin: WatchIgnoreNextChangePlugin) => void;
+export declare const suppressBundlerUpdateForFile: (absolutePath: string) => void;

package/dist/preview-server/watch-ignore-next-change.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.suppressBundlerUpdateForFile = exports.setWatchIgnoreNextChangePlugin = void 0;
+let currentPlugin = null;
+const setWatchIgnoreNextChangePlugin = (plugin) => {
+    currentPlugin = plugin;
+};
+exports.setWatchIgnoreNextChangePlugin = setWatchIgnoreNextChangePlugin;
+const suppressBundlerUpdateForFile = (absolutePath) => {
+    currentPlugin === null || currentPlugin === void 0 ? void 0 : currentPlugin.ignoreNextChange(absolutePath);
+};
+exports.suppressBundlerUpdateForFile = suppressBundlerUpdateForFile;

package/dist/start-studio.js

@@ -8,6 +8,7 @@ const node_crypto_1 = __importDefault(require("node:crypto"));
 const node_fs_1 = require("node:fs");
 const node_path_1 = __importDefault(require("node:path"));
 const renderer_1 = require("@remotion/renderer");
+const file_watcher_1 = require("./file-watcher");
 const get_network_address_1 = require("./get-network-address");
 const maybe_open_browser_1 = require("./maybe-open-browser");
 const close_and_restart_1 = require("./preview-server/close-and-restart");
@@ -30,6 +31,8 @@ const startStudio = async ({ browserArgs, browserFlag, shouldOpenBrowser, fullEn
         }
     }
     catch (_a) { }
+    // Validate that the file watcher registry has been initialized
+    (0, file_watcher_1.getFileWatcherRegistry)();
     (0, watch_root_file_1.watchRootFile)(remotionRoot, previewEntry);
     const publicDir = (0, get_absolute_public_dir_1.getAbsolutePublicDir)({
         relativePublicDir,

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio-server"
 	},
 	"name": "@remotion/studio-server",
-	"version": "4.0.438",
+	"version": "4.0.439",
 	"description": "Run a Remotion Studio with a server backend",
 	"main": "dist",
 	"sideEffects": false,
@@ -27,11 +27,11 @@
 		"@babel/parser": "7.24.1",
 		"semver": "7.5.3",
 		"prettier": "3.8.1",
-		"remotion": "4.0.438",
+		"remotion": "4.0.439",
 		"recast": "0.23.11",
-		"@remotion/bundler": "4.0.438",
-		"@remotion/renderer": "4.0.438",
-		"@remotion/studio-shared": "4.0.438",
+		"@remotion/bundler": "4.0.439",
+		"@remotion/renderer": "4.0.439",
+		"@remotion/studio-shared": "4.0.439",
 		"memfs": "3.4.3",
 		"source-map": "0.7.3",
 		"open": "^8.4.2"
@@ -41,7 +41,7 @@
 		"react": "19.2.3",
 		"@babel/types": "7.24.0",
 		"@types/semver": "^7.3.4",
-		"@remotion/eslint-config-internal": "4.0.438",
+		"@remotion/eslint-config-internal": "4.0.439",
 		"eslint": "9.19.0",
 		"@types/node": "20.12.14",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"