@remotion/studio-server 4.0.460 → 4.0.461

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.logUpdate = exports.formatPropChange = exports.normalizeQuotes = exports.warnAboutPrettierOnce = void 0;
+exports.logUpdate = exports.formatPropChange = exports.strikeThrough = exports.bg = exports.fg = exports.normalizeQuotes = exports.warnAboutPrettierOnce = void 0;
 const renderer_1 = require("@remotion/renderer");
 let warnedAboutPrettier = false;
 const warnAboutPrettierOnce = (logLevel) => {
@@ -22,13 +22,19 @@ const normalizeQuotes = (str) => {
 exports.normalizeQuotes = normalizeQuotes;
 // 24-bit ANSI helpers
 const fg = (r, g, b, str) => `\u001b[38;2;${r};${g};${b}m${str}\u001b[39m`;
+exports.fg = fg;
 const bg = (r, g, b, str) => `\u001b[48;2;${r};${g};${b}m${str}\u001b[49m`;
+exports.bg = bg;
+// eslint-disable-next-line no-control-regex
+const stripAnsi = (str) => str.replace(/\u001b\[[0-9;]*m/g, '');
+const strikeThrough = (str) => `\u001b[9m\u001b[38;2;255;85;85m${stripAnsi(str)}\u001b[39m\u001b[29m`;
+exports.strikeThrough = strikeThrough;
 // 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 attrName = (str) => (0, exports.fg)(166, 226, 46, str);
+const equals = (str) => (0, exports.fg)(249, 38, 114, str);
+const punctuation = (str) => (0, exports.fg)(248, 248, 242, str);
+const stringValue = (str) => (0, exports.fg)(230, 219, 116, str);
+const numberValue = (str) => (0, exports.fg)(174, 129, 255, str);
 const colorValue = (str) => {
     if ((str.startsWith("'") && str.endsWith("'")) ||
         (str.startsWith('"') && str.endsWith('"'))) {
@@ -39,9 +45,6 @@ const colorValue = (str) => {
     }
     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) => {
@@ -51,46 +54,52 @@ const formatSimpleProp = (key, value) => {
 const formatNestedProp = (parentKey, childKey, value) => {
     return `${attrName(parentKey)}${equals('=')}${punctuation('{{')}${punctuation(childKey)}${punctuation(':')} ${colorValue(value)}${punctuation('}}')}`;
 };
-const formatPropChange = ({ key, oldValueString, newValueString, defaultValueString, }) => {
+const formatSideProps = ({ removedProps, addedProps, }) => {
+    const parts = [];
+    for (const { valueString } of removedProps) {
+        parts.push(colorEnabled() ? (0, exports.strikeThrough)(valueString) : valueString);
+    }
+    for (const { valueString } of addedProps) {
+        parts.push(valueString);
+    }
+    if (parts.length === 0) {
+        return '';
+    }
+    return `, ${parts.join(', ')}`;
+};
+const formatPropChange = ({ key, oldValueString, newValueString, defaultValueString, removedProps, addedProps, }) => {
+    const suffix = formatSideProps({ removedProps, addedProps });
     if (!colorEnabled()) {
         const dotIdx = key.indexOf('.');
         if (dotIdx === -1) {
-            return `${key}={${oldValueString}} \u2192 ${key}={${newValueString}}`;
+            return `${key}={${oldValueString}} \u2192 ${key}={${newValueString}}${suffix}`;
         }
         const parent = key.slice(0, dotIdx);
         const child = key.slice(dotIdx + 1);
-        return `${parent}={{${child}: ${oldValueString}}} \u2192 ${parent}={{${child}: ${newValueString}}}`;
+        return `${parent}={{${child}: ${oldValueString}}} \u2192 ${parent}={{${child}: ${newValueString}}}${suffix}`;
     }
-    const isResetToDefault = defaultValueString !== null && newValueString === defaultValueString;
-    const isChangeFromDefault = defaultValueString !== null && oldValueString === defaultValueString;
     const dotIndex = key.indexOf('.');
-    if (dotIndex === -1) {
-        if (isResetToDefault) {
-            return removedBg(formatSimpleProp(key, oldValueString));
-        }
-        if (isChangeFromDefault) {
-            return addedBg(formatSimpleProp(key, newValueString));
-        }
-        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 removedBg(formatNestedProp(parentKey, childKey, oldValueString));
+    const formatProp = (value) => dotIndex === -1
+        ? formatSimpleProp(key, value)
+        : formatNestedProp(key.slice(0, dotIndex), key.slice(dotIndex + 1), value);
+    if (defaultValueString !== null && newValueString === defaultValueString) {
+        return `${(0, exports.strikeThrough)(formatProp(oldValueString))}${suffix}`;
     }
-    if (isChangeFromDefault) {
-        return addedBg(formatNestedProp(parentKey, childKey, newValueString));
+    if (defaultValueString !== null && oldValueString === defaultValueString) {
+        return `${formatProp(newValueString)}${suffix}`;
     }
-    return `${removedBg(formatNestedProp(parentKey, childKey, oldValueString))} \u2192 ${addedBg(formatNestedProp(parentKey, childKey, newValueString))}`;
+    return `${formatProp(oldValueString)} \u2192 ${formatProp(newValueString)}${suffix}`;
 };
 exports.formatPropChange = formatPropChange;
-const logUpdate = ({ fileRelativeToRoot, line, key, oldValueString, newValueString, defaultValueString, formatted, logLevel, }) => {
+const logUpdate = ({ fileRelativeToRoot, line, key, oldValueString, newValueString, defaultValueString, formatted, logLevel, removedProps, addedProps, }) => {
     const locationLabel = `${fileRelativeToRoot}:${line}`;
     const propChange = (0, exports.formatPropChange)({
         key,
         oldValueString: (0, exports.normalizeQuotes)(oldValueString),
         newValueString: (0, exports.normalizeQuotes)(newValueString),
         defaultValueString: defaultValueString !== null ? (0, exports.normalizeQuotes)(defaultValueString) : null,
+        removedProps,
+        addedProps,
     });
     renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}:`)} ${propChange}`);
     if (!formatted) {

package/dist/preview-server/routes/log-updates/format-prop-change.d.ts

@@ -0,0 +1,9 @@
+import { type PropDelta } from './formatting';
+export declare const formatPropChange: ({ key, oldValueString, newValueString, defaultValueString, removedProps, addedProps, }: {
+    key: string;
+    oldValueString: string;
+    newValueString: string;
+    defaultValueString: string | null;
+    removedProps: PropDelta[];
+    addedProps: PropDelta[];
+}) => string;

package/dist/preview-server/routes/log-updates/format-prop-change.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatPropChange = void 0;
+const format_side_props_1 = require("./format-side-props");
+const formatting_1 = require("./formatting");
+const formatInnerPropChange = ({ key, oldValueString, newValueString, defaultValueString, }) => {
+    if (defaultValueString !== null && newValueString === defaultValueString) {
+        return (0, formatting_1.formatDeletion)({ valueString: oldValueString, key });
+    }
+    if (defaultValueString !== null && oldValueString === defaultValueString) {
+        return (0, formatting_1.formatAddition)({ valueString: newValueString, key });
+    }
+    return `${(0, formatting_1.formatPropDelta)({ valueString: oldValueString, key })} \u2192 ${(0, formatting_1.formatPropDelta)({ valueString: newValueString, key })}`;
+};
+const formatPropChange = ({ key, oldValueString, newValueString, defaultValueString, removedProps, addedProps, }) => {
+    const suffix = (0, format_side_props_1.formatSideProps)({ removedProps, addedProps });
+    return [
+        formatInnerPropChange({
+            key,
+            oldValueString,
+            newValueString,
+            defaultValueString,
+        }),
+        suffix,
+    ]
+        .filter(Boolean)
+        .join(', ');
+};
+exports.formatPropChange = formatPropChange;

package/dist/preview-server/routes/log-updates/format-side-props.d.ts

@@ -0,0 +1,5 @@
+import { type PropDelta } from './formatting';
+export declare const formatSideProps: ({ removedProps, addedProps, }: {
+    removedProps: PropDelta[];
+    addedProps: PropDelta[];
+}) => string | null;

package/dist/preview-server/routes/log-updates/format-side-props.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatSideProps = void 0;
+const formatting_1 = require("./formatting");
+const formatSideProps = ({ removedProps, addedProps, }) => {
+    const parts = [];
+    for (const prop of removedProps) {
+        parts.push((0, formatting_1.formatDeletion)(prop));
+    }
+    for (const prop of addedProps) {
+        parts.push((0, formatting_1.formatAddition)(prop));
+    }
+    if (parts.length === 0) {
+        return null;
+    }
+    return parts.join(', ');
+};
+exports.formatSideProps = formatSideProps;

package/dist/preview-server/routes/log-updates/formatting.d.ts

@@ -0,0 +1,19 @@
+export declare const colorEnabled: () => boolean;
+export declare const colorValue: (str: string) => string;
+export declare const fg: (r: number, g: number, b: number, str: string) => string;
+export declare const bg: (r: number, g: number, b: number, str: string) => string;
+export declare const attrName: (str: string) => string;
+export declare const equals: (str: string) => string;
+export declare const punctuation: (str: string) => string;
+export declare const stringValue: (str: string) => string;
+export declare const numberValue: (str: string) => string;
+export declare const strikeThrough: (str: string) => string;
+export declare const strikeThroughOrRemovedPrefix: (str: string) => string;
+export declare const addedPrefixIfNoColor: (str: string) => string;
+export type PropDelta = {
+    key: string;
+    valueString: string;
+};
+export declare const formatPropDelta: ({ key, valueString }: PropDelta) => string;
+export declare const formatDeletion: (prop: PropDelta) => string;
+export declare const formatAddition: (prop: PropDelta) => string;

package/dist/preview-server/routes/log-updates/formatting.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatAddition = exports.formatDeletion = exports.formatPropDelta = exports.addedPrefixIfNoColor = exports.strikeThroughOrRemovedPrefix = exports.strikeThrough = exports.numberValue = exports.stringValue = exports.punctuation = exports.equals = exports.attrName = exports.bg = exports.fg = exports.colorValue = exports.colorEnabled = void 0;
+const renderer_1 = require("@remotion/renderer");
+const colorEnabled = () => renderer_1.RenderInternals.chalk.enabled();
+exports.colorEnabled = colorEnabled;
+const colorValue = (str) => {
+    if ((str.startsWith("'") && str.endsWith("'")) ||
+        (str.startsWith('"') && str.endsWith('"'))) {
+        return (0, exports.stringValue)(str);
+    }
+    if (/^-?\d+(\.\d+)?$/.test(str)) {
+        return (0, exports.numberValue)(str);
+    }
+    return (0, exports.punctuation)(str);
+};
+exports.colorValue = colorValue;
+// eslint-disable-next-line no-control-regex
+const stripAnsi = (str) => str.replace(/\u001b\[[0-9;]*m/g, '');
+// 24-bit ANSI helpers
+const fg = (r, g, b, str) => (0, exports.colorEnabled)() ? `\u001b[38;2;${r};${g};${b}m${str}\u001b[39m` : str;
+exports.fg = fg;
+const bg = (r, g, b, str) => (0, exports.colorEnabled)() ? `\u001b[48;2;${r};${g};${b}m${str}\u001b[49m` : str;
+exports.bg = bg;
+// Monokai-inspired syntax colors
+const attrName = (str) => (0, exports.fg)(166, 226, 46, str);
+exports.attrName = attrName;
+const equals = (str) => (0, exports.fg)(249, 38, 114, str);
+exports.equals = equals;
+const punctuation = (str) => (0, exports.fg)(248, 248, 242, str);
+exports.punctuation = punctuation;
+const stringValue = (str) => (0, exports.fg)(230, 219, 116, str);
+exports.stringValue = stringValue;
+const numberValue = (str) => (0, exports.fg)(174, 129, 255, str);
+exports.numberValue = numberValue;
+const strikeThrough = (str) => `\u001b[9m\u001b[38;2;255;85;85m${stripAnsi(str)}\u001b[39m\u001b[29m`;
+exports.strikeThrough = strikeThrough;
+const strikeThroughOrRemovedPrefix = (str) => (0, exports.colorEnabled)() ? (0, exports.strikeThrough)(str) : 'removed: ' + str;
+exports.strikeThroughOrRemovedPrefix = strikeThroughOrRemovedPrefix;
+const addedPrefixIfNoColor = (str) => (0, exports.colorEnabled)() ? str : 'added: ' + stripAnsi(str);
+exports.addedPrefixIfNoColor = addedPrefixIfNoColor;
+// Format key={value} with Monokai syntax highlighting
+const formatSimpleProp = (key, value) => {
+    return `${(0, exports.attrName)(key)}${(0, exports.equals)('=')}${(0, exports.punctuation)('{')}${(0, exports.colorValue)(value)}${(0, exports.punctuation)('}')}`;
+};
+// Format parentKey={{childKey: value}} with Monokai syntax highlighting
+const formatNestedProp = (parentKey, childKey, value) => {
+    return `${(0, exports.attrName)(parentKey)}${(0, exports.equals)('=')}${(0, exports.punctuation)('{{')}${(0, exports.punctuation)(childKey)}${(0, exports.punctuation)(':')} ${(0, exports.colorValue)(value)}${(0, exports.punctuation)('}}')}`;
+};
+const formatPropDelta = ({ key, valueString }) => {
+    const dotIdx = key.indexOf('.');
+    if (dotIdx === -1) {
+        return formatSimpleProp(key, valueString);
+    }
+    return formatNestedProp(key.slice(0, dotIdx), key.slice(dotIdx + 1), valueString);
+};
+exports.formatPropDelta = formatPropDelta;
+const formatDeletion = (prop) => {
+    const formatted = (0, exports.formatPropDelta)(prop);
+    return (0, exports.strikeThroughOrRemovedPrefix)(formatted);
+};
+exports.formatDeletion = formatDeletion;
+const formatAddition = (prop) => {
+    const formatted = (0, exports.formatPropDelta)(prop);
+    return (0, exports.addedPrefixIfNoColor)(formatted);
+};
+exports.formatAddition = formatAddition;

package/dist/preview-server/routes/log-updates/log-update.d.ts

@@ -0,0 +1,15 @@
+import type { PropDelta } from './formatting';
+export declare const warnAboutPrettierOnce: (logLevel: "error" | "info" | "trace" | "verbose" | "warn") => void;
+export declare const normalizeQuotes: (str: string) => string;
+export declare const logUpdate: ({ fileRelativeToRoot, line, key, oldValueString, newValueString, defaultValueString, formatted, logLevel, removedProps, addedProps, }: {
+    fileRelativeToRoot: string;
+    line: number;
+    key: string;
+    oldValueString: string;
+    newValueString: string;
+    defaultValueString: string | null;
+    formatted: boolean;
+    logLevel: "error" | "info" | "trace" | "verbose" | "warn";
+    removedProps: PropDelta[];
+    addedProps: PropDelta[];
+}) => void;

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

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.logUpdate = exports.normalizeQuotes = exports.warnAboutPrettierOnce = void 0;
+const renderer_1 = require("@remotion/renderer");
+const format_prop_change_1 = require("./format-prop-change");
+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("'")) ||
+            (str.startsWith('"') && str.endsWith('"')))) {
+        return `'${str.slice(1, -1)}'`;
+    }
+    return str;
+};
+exports.normalizeQuotes = normalizeQuotes;
+const logUpdate = ({ fileRelativeToRoot, line, key, oldValueString, newValueString, defaultValueString, formatted, logLevel, removedProps, addedProps, }) => {
+    const locationLabel = `${fileRelativeToRoot}:${line}`;
+    const propChange = (0, format_prop_change_1.formatPropChange)({
+        key,
+        oldValueString: (0, exports.normalizeQuotes)(oldValueString),
+        newValueString: (0, exports.normalizeQuotes)(newValueString),
+        defaultValueString: defaultValueString !== null ? (0, exports.normalizeQuotes)(defaultValueString) : null,
+        removedProps,
+        addedProps,
+    });
+    renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} ${propChange}`);
+    if (!formatted) {
+        (0, exports.warnAboutPrettierOnce)(logLevel);
+    }
+};
+exports.logUpdate = logUpdate;

package/dist/preview-server/routes/save-sequence-props.d.ts

@@ -1,3 +1,4 @@
-import type { SaveSequencePropsRequest, SaveSequencePropsResponse } from '@remotion/studio-shared';
+import type { SaveSequencePropsRequest } from '@remotion/studio-shared';
+import type { CanUpdateSequencePropsResponse } from 'remotion';
 import type { ApiHandler } from '../api-types';
-export declare const saveSequencePropsHandler: ApiHandler<SaveSequencePropsRequest, SaveSequencePropsResponse>;
+export declare const saveSequencePropsHandler: ApiHandler<SaveSequencePropsRequest, CanUpdateSequencePropsResponse>;

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

@@ -9,96 +9,91 @@ const node_path_1 = __importDefault(require("node:path"));
 const renderer_1 = require("@remotion/renderer");
 const remotion_1 = require("remotion");
 const get_all_schema_keys_1 = require("../../codemods/get-all-schema-keys");
-const update_sequence_props_1 = require("../../codemods/update-sequence-props");
+const update_sequence_props_1 = require("../../codemods/update-sequence-props/update-sequence-props");
 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 format_prop_change_1 = require("./log-updates/format-prop-change");
+const log_update_1 = require("./log-updates/log-update");
 const saveSequencePropsHandler = async ({ input: { fileName, nodePath, key, value, defaultValue, schema }, 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('..')) {
-            throw new Error('Cannot modify a file outside the project');
-        }
-        const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
-        const { output, oldValueStrings, formatted, logLine } = await (0, update_sequence_props_1.updateSequenceProps)({
-            input: fileContents,
-            nodePath,
-            updates: [
-                {
-                    key,
-                    value: JSON.parse(value),
-                    defaultValue: defaultValue !== null ? JSON.parse(defaultValue) : null,
-                },
-            ],
-            schema: remotion_1.Internals.sequenceSchema,
-        });
-        const oldValueString = oldValueStrings[0];
-        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,
-            logLine,
-            description: {
-                undoMessage: `Undo: ${undoPropChange}`,
-                redoMessage: `Redo: ${redoPropChange}`,
-            },
-            entryType: 'sequence-props',
-            suppressHmrOnFileRestore: true,
-        });
-        (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)({
-            fileRelativeToRoot,
-            line: logLine,
-            key,
-            oldValueString,
-            newValueString,
-            defaultValueString,
-            formatted,
-            logLevel,
-        });
-        (0, undo_stack_1.printUndoHint)(logLevel);
-        const newStatus = (0, can_update_sequence_props_1.computeSequencePropsStatus)({
-            fileName,
-            keys: (0, get_all_schema_keys_1.getAllSchemaKeys)(schema),
-            nodePath,
-            remotionRoot,
-        });
-        return {
-            success: true,
-            newStatus,
-        };
-    }
-    catch (err) {
-        return {
-            success: false,
-            reason: err.message,
-            stack: err.stack,
-        };
+    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('..')) {
+        throw new Error('Cannot modify a file outside the project');
     }
+    const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
+    const { output, oldValueStrings, formatted, logLine, removedProps } = await (0, update_sequence_props_1.updateSequenceProps)({
+        input: fileContents,
+        nodePath,
+        updates: [
+            {
+                key,
+                value: JSON.parse(value),
+                defaultValue: defaultValue !== null ? JSON.parse(defaultValue) : null,
+            },
+        ],
+        schema: remotion_1.Internals.sequenceSchema,
+    });
+    const oldValueString = oldValueStrings[0];
+    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, format_prop_change_1.formatPropChange)({
+        key,
+        oldValueString: normalizedNew,
+        newValueString: normalizedOld,
+        defaultValueString: normalizedDefault,
+        removedProps: [],
+        addedProps: removedProps,
+    });
+    const redoPropChange = (0, format_prop_change_1.formatPropChange)({
+        key,
+        oldValueString: normalizedOld,
+        newValueString: normalizedNew,
+        defaultValueString: normalizedDefault,
+        removedProps,
+        addedProps: [],
+    });
+    (0, undo_stack_1.pushToUndoStack)({
+        filePath: absolutePath,
+        oldContents: fileContents,
+        logLevel,
+        remotionRoot,
+        logLine,
+        description: {
+            undoMessage: `↩️  ${undoPropChange}`,
+            redoMessage: `↪️  ${redoPropChange}`,
+        },
+        entryType: 'sequence-props',
+        suppressHmrOnFileRestore: true,
+    });
+    (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)({
+        fileRelativeToRoot,
+        line: logLine,
+        key,
+        oldValueString,
+        newValueString,
+        defaultValueString,
+        formatted,
+        logLevel,
+        removedProps,
+        addedProps: [],
+    });
+    (0, undo_stack_1.printUndoHint)(logLevel);
+    const newStatus = (0, can_update_sequence_props_1.computeSequencePropsStatus)({
+        fileName,
+        keys: (0, get_all_schema_keys_1.getAllSchemaKeys)(schema),
+        nodePath,
+        remotionRoot,
+    });
+    return newStatus;
 };
 exports.saveSequencePropsHandler = saveSequencePropsHandler;

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

@@ -10,7 +10,7 @@ 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 log_update_1 = require("./log-update");
+const log_update_1 = require("./log-updates/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}"`);
@@ -37,8 +37,8 @@ const updateDefaultPropsHandler = async ({ input: { compositionId, defaultProps,
             remotionRoot,
             logLine,
             description: {
-                undoMessage: `Undo: default props update for "${compositionId}"`,
-                redoMessage: `Redo: default props update for "${compositionId}"`,
+                undoMessage: `↩️  default props update for "${compositionId}"`,
+                redoMessage: `↪️  default props update for "${compositionId}"`,
             },
             entryType: 'default-props',
             suppressHmrOnFileRestore: true,
@@ -51,7 +51,7 @@ const updateDefaultPropsHandler = async ({ input: { compositionId, defaultProps,
             absolutePath: projectInfo.rootFile,
             line: logLine,
         });
-        renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}:`)} Updated default props for "${compositionId}"`);
+        renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} Updated default props for "${compositionId}"`);
         if (!formatted) {
             (0, log_update_1.warnAboutPrettierOnce)(logLevel);
         }

package/dist/preview-server/sequence-props-watchers.d.ts

@@ -1,4 +1,5 @@
-import type { CanUpdateSequencePropsResponse, SequenceNodePath } from 'remotion';
+import type { SubscribeToSequencePropsResponse } from '@remotion/studio-shared';
+import type { SequenceNodePath } from 'remotion';
 export declare const subscribeToSequencePropsWatchers: ({ fileName, line, column, keys, remotionRoot, clientId, }: {
     fileName: string;
     line: number;
@@ -6,7 +7,7 @@ export declare const subscribeToSequencePropsWatchers: ({ fileName, line, column
     keys: string[];
     remotionRoot: string;
     clientId: string;
-}) => CanUpdateSequencePropsResponse;
+}) => SubscribeToSequencePropsResponse;
 export declare const unsubscribeFromSequencePropsWatchers: ({ fileName, nodePath, remotionRoot, clientId, }: {
     fileName: string;
     nodePath: SequenceNodePath;

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

@@ -24,15 +24,16 @@ const getSequencePropsStatus = ({ fileName, line, column, keys, remotionRoot, })
             remotionRoot,
         });
         if (cachedResult.canUpdate) {
-            return cachedResult;
+            return { status: cachedResult, nodePath: cachedNodePath, success: true };
         }
     }
-    return (0, can_update_sequence_props_1.computeSequencePropsStatusFromFilenameByLine)({
+    const status = (0, can_update_sequence_props_1.computeSequencePropsStatusFromFilenameByLine)({
         fileName,
         line,
         keys,
         remotionRoot,
     });
+    return status;
 };
 const subscribeToSequencePropsWatchers = ({ fileName, line, column, keys, remotionRoot, clientId, }) => {
     var _a;
@@ -43,7 +44,7 @@ const subscribeToSequencePropsWatchers = ({ fileName, line, column, keys, remoti
         keys,
         remotionRoot,
     });
-    if (!initialResult.canUpdate) {
+    if (!initialResult.success) {
         return initialResult;
     }
     const absolutePath = node_path_1.default.resolve(remotionRoot, fileName);

package/dist/preview-server/start-server.d.ts

@@ -23,7 +23,6 @@ export declare const startServer: (options: {
     remotionRoot: string;
     keyboardShortcutsEnabled: boolean;
     experimentalClientSideRenderingEnabled: boolean;
-    experimentalVisualModeEnabled: boolean;
     publicDir: string;
     poll: number | null;
     staticHash: string;

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

@@ -42,7 +42,6 @@ const startServer = async (options) => {
         remotionRoot: options.remotionRoot,
         keyboardShortcutsEnabled: options.keyboardShortcutsEnabled,
         experimentalClientSideRenderingEnabled: options.experimentalClientSideRenderingEnabled,
-        experimentalVisualModeEnabled: options.experimentalVisualModeEnabled,
         poll: options.poll,
         bufferStateDelayInMilliseconds: options.bufferStateDelayInMilliseconds,
         askAIEnabled: options.askAIEnabled,

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

@@ -175,7 +175,7 @@ function logFileAction(action, filePath, logLine) {
             line: logLine,
         })
         : `${filePath}:${logLine}`;
-    renderer_1.RenderInternals.Log.info({ indent: false, logLevel: storedLogLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}:`)} ${action}`);
+    renderer_1.RenderInternals.Log.info({ indent: false, logLevel: storedLogLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} ${action}`);
 }
 function popUndo() {
     const entry = undoStack.pop();

package/dist/routes.js

@@ -317,17 +317,6 @@ const handleBeep = (_, response) => {
     readStream.pipe(response);
     return Promise.resolve();
 };
-const handleWasm = (_, response) => {
-    const filePath = node_path_1.default.resolve(require.resolve('source-map'), '..', 'lib', 'mappings.wasm');
-    const stat = (0, node_fs_1.statSync)(filePath);
-    response.writeHead(200, {
-        'Content-Type': 'application/wasm',
-        'Content-Length': stat.size,
-    });
-    const readStream = (0, node_fs_1.createReadStream)(filePath);
-    readStream.pipe(response);
-    return Promise.resolve();
-};
 const handleRoutes = ({ staticHash, staticHashPrefix, outputHash, outputHashPrefix, request, response, liveEventsServer, getCurrentInputProps, getEnvVariables, remotionRoot, entryPoint, publicDir, logLevel, getRenderQueue, getRenderDefaults, numberOfAudioTags, queueMethods: methods, gitSource, binariesDirectory, audioLatencyHint, enableCrossSiteIsolation, }) => {
     const url = new URL(request.url, 'http://localhost');
     if (url.pathname === '/api/file-source') {
@@ -391,9 +380,6 @@ const handleRoutes = ({ staticHash, staticHashPrefix, outputHash, outputHashPref
     if (url.pathname === '/beep.wav') {
         return handleBeep(request, response);
     }
-    if (url.pathname === studio_shared_1.SOURCE_MAP_ENDPOINT) {
-        return handleWasm(request, response);
-    }
     if (url.pathname === '/__remotion_config') {
         return handleRemotionConfig(response, remotionRoot);
     }