@remotion/cli 4.0.0-alpha6 → 4.0.0-alpha7

package/dist/benchmark.js

@@ -16,6 +16,7 @@ const parse_command_line_1 = require("./parse-command-line");
 const progress_bar_1 = require("./progress-bar");
 const select_composition_1 = require("./select-composition");
 const setup_cache_1 = require("./setup-cache");
+const should_use_non_overlaying_logger_1 = require("./should-use-non-overlaying-logger");
 const truthy_1 = require("./truthy");
 const DEFAULT_RUNS = 3;
 const getValidConcurrency = (cliConcurrency) => {
@@ -104,6 +105,7 @@ const benchmarkCommand = async (remotionRoot, args) => {
         shouldDumpIo: renderer_1.RenderInternals.isEqualOrBelowLogLevel(config_1.ConfigInternals.Logging.getLogLevel(), 'verbose'),
         chromiumOptions,
         forceDeviceScaleFactor: scale,
+        indent: false,
     });
     const { urlOrBundle: bundleLocation, cleanup: cleanupBundle } = await (0, setup_cache_1.bundleOnCliOrTakeServeUrl)({
         fullPath: fullEntryPoint,
@@ -117,6 +119,7 @@ const benchmarkCommand = async (remotionRoot, args) => {
         onDirectoryCreated: (dir) => {
             (0, cleanup_before_quit_1.registerCleanupJob)(() => renderer_1.RenderInternals.deleteDirectory(dir));
         },
+        quietProgress: false,
     });
     (0, cleanup_before_quit_1.registerCleanupJob)(() => cleanupBundle());
     const puppeteerInstance = await browserInstance;
@@ -154,7 +157,7 @@ const benchmarkCommand = async (remotionRoot, args) => {
         uiCodec: null,
     });
     for (const composition of compositions) {
-        const { proResProfile, frameRange: defaultFrameRange, overwrite, jpegQuality, crf: configFileCrf, pixelFormat, scale: configFileScale, numberOfGifLoops, everyNthFrame, muted, enforceAudioTrack, ffmpegOverride, audioBitrate, videoBitrate, height, width, concurrency: unparsedConcurrency, } = await (0, get_cli_options_1.getCliOptions)({
+        const { proResProfile, frameRange: defaultFrameRange, overwrite, jpegQuality, crf: configFileCrf, pixelFormat, scale: configFileScale, numberOfGifLoops, everyNthFrame, muted, enforceAudioTrack, ffmpegOverride, audioBitrate, videoBitrate, height, width, concurrency: unparsedConcurrency, logLevel, } = await (0, get_cli_options_1.getCliOptions)({
             isLambda: false,
             type: 'series',
             remotionRoot,
@@ -165,6 +168,8 @@ const benchmarkCommand = async (remotionRoot, args) => {
             const benchmarkProgress = (0, progress_bar_1.createOverwriteableCliOutput)({
                 quiet: (0, parse_command_line_1.quietFlagProvided)(),
                 cancelSignal: null,
+                updatesDontOverwrite: (0, should_use_non_overlaying_logger_1.shouldUseNonOverlayingLogger)({ logLevel }),
+                indent: false,
             });
             log_1.Log.info();
             log_1.Log.info(`${chalk_1.chalk.bold(`Benchmark #${count++}:`)} ${chalk_1.chalk.gray(`composition=${composition.id} concurrency=${con} codec=${codec} (${codecReason})`)}`);
@@ -211,10 +216,10 @@ const benchmarkCommand = async (remotionRoot, args) => {
                     run,
                     doneIn: null,
                     progress,
-                }));
+                }), false);
             });
-            benchmarkProgress.update('');
-            benchmarkProgress.update(getResults(timeTaken, runs));
+            benchmarkProgress.update('', false);
+            benchmarkProgress.update(getResults(timeTaken, runs), false);
             benchmark[composition.id][`${con}`] = timeTaken;
         }
     }

package/dist/chalk/index.d.ts

@@ -1,58 +1,49 @@
-declare type Style = {
-    codes: [number, number];
-    name: string;
-    wrap?: (input: string, newline: boolean) => string;
-};
-declare type Method = (str: string) => string;
-declare type Colors = {
+export declare const chalk: {
     enabled: boolean;
     visible: boolean;
-    styles: Record<string, Style>;
+    styles: Record<string, {
+        codes: [number, number];
+        name: string;
+        wrap?: ((input: string, newline: boolean) => string) | undefined;
+    }>;
     keys: Record<string, string[]>;
-    alias?: (name: string, col: string) => void;
-};
-declare type ColorsWithMethods = Colors & {
-    reset: Method;
-    bold: Method;
-    dim: Method;
-    italic: Method;
-    underline: Method;
-    inverse: Method;
-    hidden: Method;
-    strikethrough: Method;
-    black: Method;
-    red: Method;
-    green: Method;
-    yellow: Method;
-    blue: Method;
-    magenta: Method;
-    cyan: Method;
-    white: Method;
-    gray: Method;
-    bgBlack: Method;
-    bgRed: Method;
-    bgGreen: Method;
-    bgYellow: Method;
-    bgBlue: Method;
-    bgMagenta: Method;
-    bgCyan: Method;
-    bgWhite: Method;
-    blackBright: Method;
-    redBright: Method;
-    greenBright: Method;
-    yellowBright: Method;
-    blueBright: Method;
-    magentaBright: Method;
-    cyanBright: Method;
-    whiteBright: Method;
-    bgBlackBright: Method;
-    bgRedBright: Method;
-    bgGreenBright: Method;
-    bgYellowBright: Method;
-    bgBlueBright: Method;
-    bgMagentaBright: Method;
-    bgCyanBright: Method;
-    bgWhiteBright: Method;
+    alias?: ((name: string, col: string) => void) | undefined;
+} & {
+    reset: (str: string) => string;
+    bold: (str: string) => string;
+    dim: (str: string) => string;
+    italic: (str: string) => string;
+    underline: (str: string) => string;
+    inverse: (str: string) => string;
+    hidden: (str: string) => string;
+    strikethrough: (str: string) => string;
+    black: (str: string) => string;
+    red: (str: string) => string;
+    green: (str: string) => string;
+    yellow: (str: string) => string;
+    blue: (str: string) => string;
+    magenta: (str: string) => string;
+    white: (str: string) => string;
+    gray: (str: string) => string;
+    bgBlack: (str: string) => string;
+    bgRed: (str: string) => string;
+    bgGreen: (str: string) => string;
+    bgYellow: (str: string) => string;
+    bgBlue: (str: string) => string;
+    bgMagenta: (str: string) => string;
+    bgWhite: (str: string) => string;
+    blackBright: (str: string) => string;
+    redBright: (str: string) => string;
+    greenBright: (str: string) => string;
+    yellowBright: (str: string) => string;
+    blueBright: (str: string) => string;
+    magentaBright: (str: string) => string;
+    whiteBright: (str: string) => string;
+    bgBlackBright: (str: string) => string;
+    bgRedBright: (str: string) => string;
+    bgGreenBright: (str: string) => string;
+    bgYellowBright: (str: string) => string;
+    bgBlueBright: (str: string) => string;
+    bgMagentaBright: (str: string) => string;
+    bgWhiteBright: (str: string) => string;
 };
-export declare const chalk: ColorsWithMethods;
-export {};

package/dist/chalk/index.js

@@ -1,138 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.chalk = void 0;
-const hasColor = () => {
-    if (typeof process !== 'undefined') {
-        return process.env.FORCE_COLOR !== '0';
-    }
-    return false;
-};
-exports.chalk = (() => {
-    const colors = {
-        enabled: hasColor(),
-        visible: true,
-        styles: {},
-        keys: {},
-    };
-    const ansi = (st) => {
-        const open = `\u001b[${st.codes[0]}m`;
-        const close = `\u001b[${st.codes[1]}m`;
-        const regex = new RegExp(`\\u001b\\[${st.codes[1]}m`, 'g');
-        st.wrap = (input, newline) => {
-            if (input.includes(close))
-                input = input.replace(regex, close + open);
-            const output = open + input + close;
-            // see https://github.com/chalk/chalk/pull/92, thanks to the
-            // chalk contributors for this fix. However, we've confirmed that
-            // this issue is also present in Windows terminals
-            return newline ? output.replace(/\r*\n/g, `${close}$&${open}`) : output;
-        };
-        return st;
-    };
-    const wrap = (sty, input, newline) => {
-        var _a;
-        return (_a = sty.wrap) === null || _a === void 0 ? void 0 : _a.call(sty, input, newline);
-    };
-    const style = (input, stack) => {
-        if (input === '' || input === null || input === undefined)
-            return '';
-        if (colors.enabled === false)
-            return input;
-        if (colors.visible === false)
-            return '';
-        let str = String(input);
-        const nl = str.includes('\n');
-        let n = stack.length;
-        while (n-- > 0)
-            str = wrap(colors.styles[stack[n]], str, nl);
-        return str;
-    };
-    const define = (name, codes, type) => {
-        colors.styles[name] = ansi({ name, codes });
-        const keys = colors.keys[type] || (colors.keys[type] = []);
-        keys.push(name);
-        Reflect.defineProperty(colors, name, {
-            configurable: true,
-            enumerable: true,
-            set(value) {
-                var _a;
-                (_a = colors.alias) === null || _a === void 0 ? void 0 : _a.call(colors, name, value);
-            },
-            get() {
-                const color = (input) => style(input, color.stack);
-                Reflect.setPrototypeOf(color, colors);
-                color.stack = this.stack ? this.stack.concat(name) : [name];
-                return color;
-            },
-        });
-    };
-    define('reset', [0, 0], 'modifier');
-    define('bold', [1, 22], 'modifier');
-    define('dim', [2, 22], 'modifier');
-    define('italic', [3, 23], 'modifier');
-    define('underline', [4, 24], 'modifier');
-    define('inverse', [7, 27], 'modifier');
-    define('hidden', [8, 28], 'modifier');
-    define('strikethrough', [9, 29], 'modifier');
-    define('black', [30, 39], 'color');
-    define('red', [31, 39], 'color');
-    define('green', [32, 39], 'color');
-    define('yellow', [33, 39], 'color');
-    define('blue', [34, 39], 'color');
-    define('magenta', [35, 39], 'color');
-    define('cyan', [36, 39], 'color');
-    define('white', [37, 39], 'color');
-    define('gray', [90, 39], 'color');
-    define('grey', [90, 39], 'color');
-    define('bgBlack', [40, 49], 'bg');
-    define('bgRed', [41, 49], 'bg');
-    define('bgGreen', [42, 49], 'bg');
-    define('bgYellow', [43, 49], 'bg');
-    define('bgBlue', [44, 49], 'bg');
-    define('bgMagenta', [45, 49], 'bg');
-    define('bgCyan', [46, 49], 'bg');
-    define('bgWhite', [47, 49], 'bg');
-    define('blackBright', [90, 39], 'bright');
-    define('redBright', [91, 39], 'bright');
-    define('greenBright', [92, 39], 'bright');
-    define('yellowBright', [93, 39], 'bright');
-    define('blueBright', [94, 39], 'bright');
-    define('magentaBright', [95, 39], 'bright');
-    define('cyanBright', [96, 39], 'bright');
-    define('whiteBright', [97, 39], 'bright');
-    define('bgBlackBright', [100, 49], 'bgBright');
-    define('bgRedBright', [101, 49], 'bgBright');
-    define('bgGreenBright', [102, 49], 'bgBright');
-    define('bgYellowBright', [103, 49], 'bgBright');
-    define('bgBlueBright', [104, 49], 'bgBright');
-    define('bgMagentaBright', [105, 49], 'bgBright');
-    define('bgCyanBright', [106, 49], 'bgBright');
-    define('bgWhiteBright', [107, 49], 'bgBright');
-    colors.alias = (name, color) => {
-        // @ts-expect-error
-        const fn = colors[color];
-        if (typeof fn !== 'function') {
-            throw new TypeError('Expected alias to be the name of an existing color (string) or a function');
-        }
-        if (!fn.stack) {
-            Reflect.defineProperty(fn, 'name', { value: name });
-            colors.styles[name] = fn;
-            fn.stack = [name];
-        }
-        Reflect.defineProperty(colors, name, {
-            configurable: true,
-            enumerable: true,
-            set(value) {
-                var _a;
-                (_a = colors.alias) === null || _a === void 0 ? void 0 : _a.call(colors, name, value);
-            },
-            get() {
-                const col = (input) => style(input, col.stack);
-                Reflect.setPrototypeOf(col, colors);
-                col.stack = this.stack ? this.stack.concat(fn.stack) : fn.stack;
-                return col;
-            },
-        });
-    };
-    return colors;
-})();
+const renderer_1 = require("@remotion/renderer");
+exports.chalk = renderer_1.RenderInternals.chalk;

package/dist/codemods/stringify-with-path.d.ts

@@ -0,0 +1,5 @@
+import type { EnumPath } from '../editor/components/RenderModal/SchemaEditor/extract-enum-json-paths';
+export declare const stringifyDefaultProps: ({ props, enumPaths, }: {
+    props: unknown;
+    enumPaths: EnumPath[];
+}) => string;

package/dist/codemods/stringify-with-path.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stringifyDefaultProps = void 0;
+const input_props_serialization_1 = require("../editor/components/RenderModal/SchemaEditor/input-props-serialization");
+const doesMatchPath = (path1, enumPaths) => {
+    return enumPaths.some((p) => path1.every((item, index) => {
+        if (p[index] === '[]' && !Number.isNaN(Number(item))) {
+            return true;
+        }
+        if (p[index] === '{}' && typeof item === 'string') {
+            return true;
+        }
+        return item === p[index];
+    }));
+};
+const stringifyDefaultProps = ({ props, enumPaths, }) => JSON.stringify(props, replacerWithPath(function (key, value, path) {
+    /* Don't replace with arrow function */ const item = this[key];
+    if (item instanceof Date) {
+        return `__REMOVEQUOTE__new Date('${item.toISOString()}')__REMOVEQUOTE__`;
+    }
+    if (typeof item === 'string' && doesMatchPath(path, enumPaths)) {
+        return `${item}__ADD_AS_CONST__`;
+    }
+    if (typeof item === 'string' && item.startsWith(input_props_serialization_1.FILE_TOKEN)) {
+        return `__REMOVEQUOTE____WRAP_IN_STATIC_FILE_START__${decodeURIComponent(item.replace(input_props_serialization_1.FILE_TOKEN, ''))}__WRAP_IN_STATIC_FILE_END____REMOVEQUOTE__`;
+    }
+    return value;
+}))
+    .replace(/"__REMOVEQUOTE__/g, '')
+    .replace(/__REMOVEQUOTE__"/g, '')
+    .replace(/__ADD_AS_CONST__"/g, '" as const')
+    .replace(/__WRAP_IN_STATIC_FILE_START__/g, 'staticFile("')
+    .replace(/__WRAP_IN_STATIC_FILE_END__/g, '")');
+exports.stringifyDefaultProps = stringifyDefaultProps;
+function replacerWithPath(replacer) {
+    const m = new Map();
+    return function (field, value) {
+        const path = [m.get(this), field].flat(1);
+        if (value === Object(value)) {
+            m.set(value, path);
+        }
+        return replacer.call(this, field, value, path.filter((item) => typeof item !== 'undefined' && item !== ''));
+    };
+}

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

@@ -1,5 +1,7 @@
-export declare const updateDefaultProps: ({ input, compositionId, newDefaultProps, }: {
+import type { EnumPath } from '../editor/components/RenderModal/SchemaEditor/extract-enum-json-paths';
+export declare const updateDefaultProps: ({ input, compositionId, newDefaultProps, enumPaths, }: {
     input: string;
     compositionId: string;
     newDefaultProps: unknown;
+    enumPaths: EnumPath[];
 }) => Promise<string>;

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

@@ -24,6 +24,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.updateDefaultProps = void 0;
+const stringify_with_path_1 = require("./stringify-with-path");
 const findStarter = ({ input, compositionId, }) => {
     const format1 = input.indexOf(`id="${compositionId}"`);
     if (format1 > -1) {
@@ -85,23 +86,8 @@ const findTerminators = (input, position) => {
     }
     return Infinity;
 };
-const stringifyDefaultProps = (props) => {
-    // Don't replace with arrow function
-    return JSON.stringify(props, function (key, value) {
-        if (this[key] instanceof Date) {
-            return `__REMOVEQUOTE__new Date('${new Date(this[key]).toISOString()}')__REMOVEQUOTE__`;
-        }
-        if (typeof this[key] === 'string') {
-            return `${this[key]}__ADD_AS_CONST__`;
-        }
-        return value;
-    })
-        .replace(/"__REMOVEQUOTE__/g, '')
-        .replace(/__REMOVEQUOTE__"/g, '')
-        .replace(/__ADD_AS_CONST__"/g, '" as const');
-};
 // TODO: Add more sanity checks
-const updateDefaultProps = async ({ input, compositionId, newDefaultProps, }) => {
+const updateDefaultProps = async ({ input, compositionId, newDefaultProps, enumPaths, }) => {
     const starter = findStarter({ input, compositionId });
     const START_TOKEN = 'defaultProps={';
     const start = input.indexOf(START_TOKEN, starter);
@@ -120,7 +106,7 @@ const updateDefaultProps = async ({ input, compositionId, newDefaultProps, }) =>
     }
     const { format, resolveConfig, resolveConfigFile } = prettier;
     const newFile = input.substring(0, startPos) +
-        stringifyDefaultProps(newDefaultProps) +
+        (0, stringify_with_path_1.stringifyDefaultProps)({ props: newDefaultProps, enumPaths }) +
         input.substring(endPos);
     const configFilePath = await resolveConfigFile();
     if (!configFilePath) {

package/dist/compositions.js

@@ -39,6 +39,7 @@ const listCompositionsCommand = async (remotionRoot, args) => {
         onDirectoryCreated: (dir) => {
             (0, cleanup_before_quit_1.registerCleanupJob)(() => renderer_1.RenderInternals.deleteDirectory(dir));
         },
+        quietProgress: false,
     });
     (0, cleanup_before_quit_1.registerCleanupJob)(() => cleanupBundle());
     const compositions = await (0, renderer_1.getCompositions)(bundled, {

package/dist/config/log.d.ts

@@ -1,3 +1 @@
-import type { LogLevel } from '@remotion/renderer';
-export declare const getLogLevel: () => "verbose" | "info" | "warn" | "error";
-export declare const setLogLevel: (newLogLevel: LogLevel) => void;
+export declare const getLogLevel: () => "verbose" | "info" | "warn" | "error", setLogLevel: (newLogLevel: "verbose" | "info" | "warn" | "error") => void;

package/dist/config/log.js

@@ -1,12 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.setLogLevel = exports.getLogLevel = void 0;
-let logLevel = 'info';
-const getLogLevel = () => {
-    return logLevel;
-};
-exports.getLogLevel = getLogLevel;
-const setLogLevel = (newLogLevel) => {
-    logLevel = newLogLevel;
-};
-exports.setLogLevel = setLogLevel;
+const renderer_1 = require("@remotion/renderer");
+exports.getLogLevel = renderer_1.RenderInternals.getLogLevel, exports.setLogLevel = renderer_1.RenderInternals.setLogLevel;

package/dist/download-progress.d.ts

@@ -1,3 +1,3 @@
 import type { DownloadProgress } from './progress-types';
 export declare const getFileSizeDownloadBar: (downloaded: number) => string;
-export declare const makeMultiDownloadProgress: (progresses: DownloadProgress[], indent: boolean) => string | null;
+export declare const makeMultiDownloadProgress: (progresses: DownloadProgress[]) => string | null;

package/dist/download-progress.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.makeMultiDownloadProgress = exports.getFileSizeDownloadBar = void 0;
 const format_bytes_1 = require("./format-bytes");
-const log_1 = require("./log");
 const make_progress_bar_1 = require("./make-progress-bar");
 const truthy_1 = require("./truthy");
 const getFileSizeDownloadBar = (downloaded) => {
@@ -10,7 +9,7 @@ const getFileSizeDownloadBar = (downloaded) => {
     return `[${(0, format_bytes_1.formatBytes)(downloaded).padEnd(desiredLength - 2, ' ')}]`;
 };
 exports.getFileSizeDownloadBar = getFileSizeDownloadBar;
-const makeMultiDownloadProgress = (progresses, indent) => {
+const makeMultiDownloadProgress = (progresses) => {
     if (progresses.length === 0) {
         return null;
     }
@@ -20,7 +19,6 @@ const makeMultiDownloadProgress = (progresses, indent) => {
             ? progress.name.substring(0, 57) + '...'
             : progress.name;
         return [
-            indent ? log_1.INDENT_TOKEN : null,
             `    +`,
             progress.progress
                 ? (0, make_progress_bar_1.makeProgressBar)(progress.progress)
@@ -32,8 +30,6 @@ const makeMultiDownloadProgress = (progresses, indent) => {
     }
     const everyFileHasContentLength = progresses.every((p) => p.totalBytes !== null);
     return [
-        indent ? log_1.INDENT_TOKEN : null,
-        // TODO: Shifted 1 character to the right in v4
         `    +`,
         everyFileHasContentLength
             ? (0, make_progress_bar_1.makeProgressBar)(progresses.reduce((a, b) => a + b.progress, 0) /

package/dist/editor/components/NewComposition/ComboBox.js

@@ -137,8 +137,8 @@ const Combobox = ({ values, selectedId, style: customStyle, title }) => {
                     : colors_1.INPUT_BORDER_COLOR_UNHOVERED,
         };
     }, [customStyle, hovered, opened]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { ref: ref, title: title, tabIndex: tabIndex, type: "button", style: style, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, children: [(0, jsx_runtime_1.jsx)("div", { title: typeof selected.label === 'string' ? selected.label : undefined, style: label, children: selected === null || selected === void 0 ? void 0 : selected.label }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), " ", (0, jsx_runtime_1.jsx)(caret_1.CaretDown, {})] }), portalStyle
-                ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)("div", { style: styles_1.fullScreenOverlay, children: (0, jsx_runtime_1.jsx)("div", { style: styles_1.outerPortal, className: "css-reset", children: (0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: (0, jsx_runtime_1.jsx)("div", { style: portalStyle, children: (0, jsx_runtime_1.jsx)(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: values, onHide: onHide, leaveLeftSpace: true, preselectIndex: values.findIndex((v) => v.id === selected.id), topItemCanBeUnselected: false }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { ref: ref, title: title, tabIndex: tabIndex, type: "button", style: style, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, children: [selected ? ((0, jsx_runtime_1.jsx)("div", { title: typeof selected.label === 'string' ? selected.label : undefined, style: label, children: selected === null || selected === void 0 ? void 0 : selected.label })) : null, (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), " ", (0, jsx_runtime_1.jsx)(caret_1.CaretDown, {})] }), portalStyle
+                ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)("div", { style: styles_1.fullScreenOverlay, children: (0, jsx_runtime_1.jsx)("div", { style: styles_1.outerPortal, className: "css-reset", children: (0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: (0, jsx_runtime_1.jsx)("div", { style: portalStyle, children: (0, jsx_runtime_1.jsx)(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: values, onHide: onHide, leaveLeftSpace: true, preselectIndex: values.findIndex((v) => selected && v.id === selected.id), topItemCanBeUnselected: false }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));
 };
 exports.Combobox = Combobox;

package/dist/editor/components/NewComposition/MenuContent.js

@@ -28,7 +28,7 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
     if (values[0].type === 'divider') {
         throw new Error('first value cant be divide');
     }
-    const [selectedItem, setSelectedItem] = (0, react_1.useState)(typeof preselectIndex === 'number'
+    const [selectedItem, setSelectedItem] = (0, react_1.useState)(typeof preselectIndex === 'number' && preselectIndex >= 0
         ? values[preselectIndex].id
         : null);
     const onEscape = (0, react_1.useCallback)(() => {

package/dist/editor/components/NewComposition/RemInput.d.ts

@@ -13,5 +13,5 @@ export declare const getInputBorderColor: ({ status, isFocused, isHovered, }: {
     isFocused: boolean;
     isHovered: boolean;
 }) => "hsla(0, 0%, 100%, 0.15)" | "rgba(0, 0, 0, 0.6)" | "rgba(255, 255, 255, 0.05)" | "#ff3232" | "#f1c40f";
-export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, "key" | "status" | "rightAlign" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, "status" | "key" | "rightAlign" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/editor/components/NewComposition/RemInputTypeColor.d.ts

@@ -3,5 +3,5 @@ import type { RemInputStatus } from './RemInput';
 declare type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
     status: RemInputStatus;
 };
-export declare const RemInputTypeColor: React.ForwardRefExoticComponent<Pick<Props, "key" | "status" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+export declare const RemInputTypeColor: React.ForwardRefExoticComponent<Pick<Props, "status" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/editor/components/NewComposition/RemTextarea.d.ts

@@ -3,5 +3,5 @@ declare type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLTextA
     status: 'error' | 'warning' | 'ok';
 };
 export declare const inputBaseStyle: React.CSSProperties;
-export declare const RemTextarea: React.ForwardRefExoticComponent<Pick<Props, "key" | "status" | keyof React.InputHTMLAttributes<HTMLTextAreaElement>> & React.RefAttributes<HTMLTextAreaElement>>;
+export declare const RemTextarea: React.ForwardRefExoticComponent<Pick<Props, "status" | "key" | keyof React.InputHTMLAttributes<HTMLTextAreaElement>> & React.RefAttributes<HTMLTextAreaElement>>;
 export {};

package/dist/editor/components/RenderModal/RenderModalData.js

@@ -37,7 +37,8 @@ const actions_1 = require("../RenderQueue/actions");
 const SegmentedControl_1 = require("../SegmentedControl");
 const get_render_modal_warnings_1 = require("./get-render-modal-warnings");
 const RenderModalJSONPropsEditor_1 = require("./RenderModalJSONPropsEditor");
-const date_serialization_1 = require("./SchemaEditor/date-serialization");
+const extract_enum_json_paths_1 = require("./SchemaEditor/extract-enum-json-paths");
+const input_props_serialization_1 = require("./SchemaEditor/input-props-serialization");
 const SchemaEditor_1 = require("./SchemaEditor/SchemaEditor");
 const SchemaErrorMessages_1 = require("./SchemaEditor/SchemaErrorMessages");
 const WarningIndicatorButton_1 = require("./WarningIndicatorButton");
@@ -77,7 +78,7 @@ const tabWrapper = {
 const persistanceKey = 'remotion.show-render-modalwarning';
 const parseJSON = (str) => {
     try {
-        const value = (0, date_serialization_1.deserializeJSONWithDate)(str);
+        const value = (0, input_props_serialization_1.deserializeJSONWithCustomFields)(str);
         return { str, value, validJSON: true };
     }
     catch (e) {
@@ -105,7 +106,11 @@ const RenderModalData = ({ composition, inputProps, setInputProps, compact, mayS
             return null;
         }
         const value = inputProps !== null && inputProps !== void 0 ? inputProps : {};
-        return (0, date_serialization_1.serializeJSONWithDate)(value, 2);
+        return (0, input_props_serialization_1.serializeJSONWithDate)({
+            data: value,
+            indent: 2,
+            staticBase: window.remotion_staticBase,
+        });
     }, [inJSONEditor, inputProps]);
     const cliProps = (0, remotion_1.getInputProps)();
     const [canSaveDefaultProps, setCanSaveDefaultProps] = (0, react_1.useState)({
@@ -192,25 +197,34 @@ const RenderModalData = ({ composition, inputProps, setInputProps, compact, mayS
         setMode('schema');
     }, []);
     const onUpdate = (0, react_1.useCallback)(() => {
+        if (schema === 'no-zod' || z === null) {
+            (0, NotificationCenter_1.sendErrorNotification)('Cannot update default props: No Zod schema');
+            return;
+        }
         setValBeforeSafe(inputProps);
-        (0, actions_1.updateDefaultProps)(composition.id, inputProps);
-    }, [composition.id, inputProps]);
+        (0, actions_1.updateDefaultProps)(composition.id, inputProps, (0, extract_enum_json_paths_1.extractEnumJsonPaths)(schema, z, []));
+    }, [composition.id, inputProps, schema, z]);
     (0, react_1.useEffect)(() => {
         setSaving(false);
     }, [fastRefreshes]);
     const onSave = (0, react_1.useCallback)((updater) => {
+        if (schema === 'no-zod' || z === null) {
+            (0, NotificationCenter_1.sendErrorNotification)('Cannot update default props: No Zod schema');
+            return;
+        }
         setSaving(true);
-        (0, actions_1.updateDefaultProps)(composition.id, updater(composition.defaultProps)).catch((err) => {
+        (0, actions_1.updateDefaultProps)(composition.id, updater(composition.defaultProps), (0, extract_enum_json_paths_1.extractEnumJsonPaths)(schema, z, [])).catch((err) => {
             (0, NotificationCenter_1.sendErrorNotification)(`Cannot update default props: ${err.message}`);
             setSaving(false);
         });
-    }, [composition.defaultProps, composition.id]);
+    }, [composition.defaultProps, composition.id, schema, z]);
     const connectionStatus = (0, react_1.useContext)(client_id_1.PreviewServerConnectionCtx).type;
     const warnings = (0, react_1.useMemo)(() => {
         return (0, get_render_modal_warnings_1.getRenderModalWarnings)({
             canSaveDefaultProps,
             cliProps,
             isCustomDateUsed: serializedJSON ? serializedJSON.customDateUsed : false,
+            customFileUsed: serializedJSON ? serializedJSON.customFileUsed : false,
             inJSONEditor,
             propsEditType,
         });

package/dist/editor/components/RenderModal/RenderModalJSONPropsEditor.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { State } from './RenderModalData';
-import type { SerializedJSONWithDate } from './SchemaEditor/date-serialization';
+import type { SerializedJSONWithCustomFields } from './SchemaEditor/input-props-serialization';
 export declare type EditType = 'inputProps' | 'defaultProps';
 export declare const RenderModalJSONPropsEditor: React.FC<{
     value: unknown;
@@ -11,5 +11,5 @@ export declare const RenderModalJSONPropsEditor: React.FC<{
     valBeforeSafe: unknown;
     showSaveButton: boolean;
     parseJSON: (str: string) => State;
-    serializedJSON: SerializedJSONWithDate | null;
+    serializedJSON: SerializedJSONWithCustomFields | null;
 }>;

package/dist/editor/components/RenderModal/SchemaEditor/SchemaErrorMessages.js

@@ -54,6 +54,6 @@ const InvalidDefaultProps = ({ zodValidationResult }) => {
 };
 exports.InvalidDefaultProps = InvalidDefaultProps;
 const InvalidSchema = ({ zodValidationResult, reset }) => {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: errorContainer, children: [(0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "The data does not satisfy the schema:" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ZodErrorMessages_1.ZodErrorMessages, { zodValidationResult: zodValidationResult }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "Fix the schema using the JSON editor." }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["Alternatively, reset the data to the ", (0, jsx_runtime_1.jsx)("code", { children: "defaultProps" }), " that you have defined."] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: reset, children: "Reset props" })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: errorContainer, children: [(0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "The data does not satisfy the schema:" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ZodErrorMessages_1.ZodErrorMessages, { zodValidationResult: zodValidationResult }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "Fix the schema using the JSON editor." }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["Alternatively, reset the data to the", ' ', (0, jsx_runtime_1.jsx)("code", { style: codeSnippet, children: "defaultProps" }), " that you have defined."] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: reset, children: "Reset props" })] }));
 };
 exports.InvalidSchema = InvalidSchema;

package/dist/editor/components/RenderModal/SchemaEditor/ZodArrayEditor.d.ts

@@ -1,13 +1,14 @@
 import React from 'react';
 import type { z } from 'zod';
 import type { JSONPath } from './zod-types';
+import type { UpdaterFunction } from './ZodSwitch';
 export declare const ZodArrayEditor: React.FC<{
     schema: z.ZodTypeAny;
     jsonPath: JSONPath;
     value: unknown[];
     defaultValue: unknown[];
-    setValue: React.Dispatch<React.SetStateAction<unknown[]>>;
-    onSave: (updater: (oldState: unknown[]) => unknown[]) => void;
+    setValue: UpdaterFunction<unknown[]>;
+    onSave: UpdaterFunction<unknown[]>;
     compact: boolean;
     showSaveButton: boolean;
     onRemove: null | (() => void);