@remotion/cli 4.0.0-alpha7 → 4.0.0-alpha9

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

@@ -25,7 +25,7 @@ const checkBoxWrapper = {
     alignItems: 'center',
     marginTop: '5px',
 };
-const ZodOrNullishEditor = ({ jsonPath, compact, schema, setValue, onSave, defaultValue, value, showSaveButton, onRemove, nullishValue, saving, }) => {
+const ZodOrNullishEditor = ({ jsonPath, compact, schema, setValue, onSave, defaultValue, value, showSaveButton, onRemove, nullishValue, saving, saveDisabledByParent, }) => {
     const z = (0, get_zod_if_possible_1.useZodIfPossible)();
     if (!z) {
         throw new Error('expected zod');
@@ -51,7 +51,7 @@ const ZodOrNullishEditor = ({ jsonPath, compact, schema, setValue, onSave, defau
                 zodValidation: schema.safeParse(newValue),
             };
         });
-        setValue(updater);
+        setValue(updater, false);
     }, [nullishValue, schema, setValue]);
     const onCheckBoxChange = (0, react_1.useCallback)((e) => {
         const val = e.target.checked
@@ -65,7 +65,7 @@ const ZodOrNullishEditor = ({ jsonPath, compact, schema, setValue, onSave, defau
                 zodValidation: schema.safeParse(val),
             });
         }
-        onValueChange(() => val);
+        onValueChange(() => val, false);
     }, [
         localNonNullishValueValue,
         nullishValue,
@@ -75,11 +75,11 @@ const ZodOrNullishEditor = ({ jsonPath, compact, schema, setValue, onSave, defau
         zodTypes,
     ]);
     const reset = (0, react_1.useCallback)(() => {
-        onValueChange(() => defaultValue);
+        onValueChange(() => defaultValue, true);
     }, [defaultValue, onValueChange]);
     const save = (0, react_1.useCallback)(() => {
-        onSave(() => value);
+        onSave(() => value, false);
     }, [onSave, value]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [value === nullishValue ? ((0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { isDefaultValue: value === defaultValue, jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, compact: compact, onRemove: onRemove, saving: saving })) : ((0, jsx_runtime_1.jsx)("div", { style: fullWidth, children: (0, jsx_runtime_1.jsx)(ZodSwitch_1.ZodSwitch, { value: value, setValue: onValueChange, jsonPath: jsonPath, schema: schema, compact: compact, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving }) })), (0, jsx_runtime_1.jsxs)("div", { style: checkBoxWrapper, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: isChecked, onChange: onCheckBoxChange, disabled: false }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: labelStyle, children: String(nullishValue) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [value === nullishValue ? ((0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { isDefaultValue: value === defaultValue, jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, compact: compact, onRemove: onRemove, saving: saving, valid: localNonNullishValueValue.zodValidation.success, saveDisabledByParent: saveDisabledByParent })) : ((0, jsx_runtime_1.jsx)("div", { style: fullWidth, children: (0, jsx_runtime_1.jsx)(ZodSwitch_1.ZodSwitch, { value: value, setValue: onValueChange, jsonPath: jsonPath, schema: schema, compact: compact, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent }) })), (0, jsx_runtime_1.jsxs)("div", { style: checkBoxWrapper, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: isChecked, onChange: onCheckBoxChange, disabled: false }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: labelStyle, children: String(nullishValue) })] })] }));
 };
 exports.ZodOrNullishEditor = ZodOrNullishEditor;

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

@@ -13,4 +13,5 @@ export declare const ZodStaticFileEditor: React.FC<{
     showSaveButton: boolean;
     onRemove: null | (() => void);
     saving: boolean;
+    saveDisabledByParent: boolean;
 }>;

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

@@ -10,21 +10,20 @@ const layout_1 = require("../../layout");
 const ComboBox_1 = require("../../NewComposition/ComboBox");
 const ValidationMessage_1 = require("../../NewComposition/ValidationMessage");
 const layout_2 = require("../layout");
+const local_state_1 = require("./local-state");
 const SchemaLabel_1 = require("./SchemaLabel");
 const container = {
     width: '100%',
 };
-const ZodStaticFileEditor = ({ schema, jsonPath, compact, setValue: updateValue, defaultValue, value, onSave, showSaveButton, onRemove, saving, }) => {
+const ZodStaticFileEditor = ({ schema, jsonPath, compact, setValue, defaultValue, value, onSave, showSaveButton, onRemove, saving, saveDisabledByParent, }) => {
     const z = (0, get_zod_if_possible_1.useZodIfPossible)();
     if (!z) {
         throw new Error('expected zod');
     }
-    const [localValue, setLocalValue] = (0, react_1.useState)(() => {
-        return {
-            value,
-            zodValidation: schema.safeParse(value),
-            revision: 0,
-        };
+    const { localValue, onChange: setLocalValue } = (0, local_state_1.useLocalState)({
+        schema,
+        setValue,
+        value,
     });
     const def = schema._def;
     const typeName = def.typeName;
@@ -32,22 +31,9 @@ const ZodStaticFileEditor = ({ schema, jsonPath, compact, setValue: updateValue,
         throw new Error('expected enum');
     }
     const isRoot = jsonPath.length === 0;
-    const onChange = (0, react_1.useCallback)((updater, forceApply) => {
-        setLocalValue((oldLocalState) => {
-            const newValue = updater(oldLocalState.value);
-            const safeParse = schema.safeParse(newValue);
-            if (safeParse.success || forceApply) {
-                updateValue(updater);
-            }
-            return {
-                value: newValue,
-                zodValidation: safeParse,
-            };
-        });
-    }, [schema, updateValue]);
     const reset = (0, react_1.useCallback)(() => {
-        onChange(() => defaultValue, true);
-    }, [defaultValue, onChange]);
+        setLocalValue(() => defaultValue, true);
+    }, [defaultValue, setLocalValue]);
     const comboBoxValues = (0, react_1.useMemo)(() => {
         return (0, remotion_1.getStaticFiles)().map((option) => {
             return {
@@ -57,17 +43,17 @@ const ZodStaticFileEditor = ({ schema, jsonPath, compact, setValue: updateValue,
                 keyHint: null,
                 leftItem: option.src === value ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
                 onClick: (id) => {
-                    onChange(() => id, false);
+                    setLocalValue(() => id, false);
                 },
                 quickSwitcherLabel: null,
                 subMenu: null,
                 type: 'item',
             };
         });
-    }, [onChange, value]);
+    }, [setLocalValue, value]);
     const save = (0, react_1.useCallback)(() => {
         onSave(() => value);
     }, [onSave, value]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: compact ? layout_2.narrowOption : layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { onSave: save, showSaveButton: showSaveButton, isDefaultValue: value === defaultValue, compact: compact, onReset: reset, jsonPath: jsonPath, onRemove: onRemove, saving: saving }), (0, jsx_runtime_1.jsx)("div", { style: isRoot ? undefined : container, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: comboBoxValues, selectedId: localValue.value, title: value }) }), !localValue.zodValidation.success && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: localValue.zodValidation.error.format()._errors[0], type: "error" })] }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: compact ? layout_2.narrowOption : layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { onSave: save, showSaveButton: showSaveButton, isDefaultValue: localValue.value === defaultValue, compact: compact, onReset: reset, jsonPath: jsonPath, onRemove: onRemove, saving: saving, valid: localValue.zodValidation.success, saveDisabledByParent: saveDisabledByParent }), (0, jsx_runtime_1.jsx)("div", { style: isRoot ? undefined : container, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: comboBoxValues, selectedId: localValue.value, title: value }) }), !localValue.zodValidation.success && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: localValue.zodValidation.error.format()._errors[0], type: "error" })] }))] }));
 };
 exports.ZodStaticFileEditor = ZodStaticFileEditor;

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

@@ -8,9 +8,10 @@ export declare const ZodStringEditor: React.FC<{
     value: string;
     defaultValue: string;
     setValue: UpdaterFunction<string>;
-    onSave: (updater: (oldNum: unknown) => string) => void;
+    onSave: UpdaterFunction<string>;
     onRemove: null | (() => void);
     compact: boolean;
     showSaveButton: boolean;
     saving: boolean;
+    saveDisabledByParent: boolean;
 }>;

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

@@ -8,41 +8,30 @@ const layout_1 = require("../../layout");
 const RemInput_1 = require("../../NewComposition/RemInput");
 const ValidationMessage_1 = require("../../NewComposition/ValidationMessage");
 const layout_2 = require("../layout");
+const local_state_1 = require("./local-state");
 const SchemaLabel_1 = require("./SchemaLabel");
 const fullWidth = {
     width: '100%',
 };
-const ZodStringEditor = ({ jsonPath, value, setValue, showSaveButton, defaultValue, schema, compact, onSave, onRemove, saving, }) => {
+const ZodStringEditor = ({ jsonPath, value, setValue, showSaveButton, defaultValue, schema, compact, onSave, onRemove, saving, saveDisabledByParent, }) => {
     const z = (0, get_zod_if_possible_1.useZodIfPossible)();
     if (!z) {
         throw new Error('expected zod');
     }
-    const [localValue, setLocalValue] = (0, react_1.useState)(() => {
-        return {
-            value,
-            zodValidation: schema.safeParse(value),
-        };
+    const { localValue, onChange: setLocalValue } = (0, local_state_1.useLocalState)({
+        schema,
+        setValue,
+        value,
     });
-    const onValueChange = (0, react_1.useCallback)((newValue, forceApply) => {
-        const safeParse = schema.safeParse(newValue);
-        const newLocalState = {
-            value: newValue,
-            zodValidation: safeParse,
-        };
-        setLocalValue(newLocalState);
-        if (safeParse.success || forceApply) {
-            setValue(() => newValue);
-        }
-    }, [schema, setValue]);
     const onChange = (0, react_1.useCallback)((e) => {
-        onValueChange(e.target.value, false);
-    }, [onValueChange]);
+        setLocalValue(() => e.target.value, false);
+    }, [setLocalValue]);
     const reset = (0, react_1.useCallback)(() => {
-        onValueChange(defaultValue, true);
-    }, [defaultValue, onValueChange]);
+        setLocalValue(() => defaultValue, true);
+    }, [defaultValue, setLocalValue]);
     const save = (0, react_1.useCallback)(() => {
-        onSave(() => value);
+        onSave(() => value, false);
     }, [onSave, value]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: compact ? layout_2.narrowOption : layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { compact: compact, isDefaultValue: value === defaultValue, jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving }), (0, jsx_runtime_1.jsxs)("div", { style: fullWidth, children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { value: localValue.value, status: localValue.zodValidation.success ? 'ok' : 'error', placeholder: jsonPath.join('.'), onChange: onChange, rightAlign: false }), !localValue.zodValidation.success && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: localValue.zodValidation.error.format()._errors[0], type: "error" })] }))] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: compact ? layout_2.narrowOption : layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { compact: compact, isDefaultValue: localValue.value === defaultValue, jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, valid: localValue.zodValidation.success, saveDisabledByParent: saveDisabledByParent }), (0, jsx_runtime_1.jsxs)("div", { style: fullWidth, children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { value: localValue.value, status: localValue.zodValidation ? 'ok' : 'error', placeholder: jsonPath.join('.'), onChange: onChange, rightAlign: false }), !localValue.zodValidation.success && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: localValue.zodValidation.error.format()._errors[0], type: "error" })] }))] })] }));
 };
 exports.ZodStringEditor = ZodStringEditor;

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

@@ -1,16 +1,17 @@
 import React from 'react';
 import type { z } from 'zod';
 import type { JSONPath } from './zod-types';
-export declare type UpdaterFunction<T> = (updater: (oldValue: T) => T) => void;
+export declare type UpdaterFunction<T> = (updater: (oldValue: T) => T, forceApply: boolean) => void;
 export declare const ZodSwitch: React.FC<{
     schema: z.ZodTypeAny;
     jsonPath: JSONPath;
     value: unknown;
     defaultValue: unknown;
     setValue: UpdaterFunction<unknown>;
-    onSave: (newValue: (oldVal: unknown) => unknown) => void;
+    onSave: UpdaterFunction<unknown>;
     compact: boolean;
     showSaveButton: boolean;
     onRemove: null | (() => void);
     saving: boolean;
+    saveDisabledByParent: boolean;
 }>;

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

@@ -17,7 +17,7 @@ const ZodOptionalEditor_1 = require("./ZodOptionalEditor");
 const ZodStaticFileEditor_1 = require("./ZodStaticFileEditor");
 const ZodStringEditor_1 = require("./ZodStringEditor");
 const ZodUnionEditor_1 = require("./ZodUnionEditor");
-const ZodSwitch = ({ schema, jsonPath, compact, value, setValue, defaultValue, onSave, showSaveButton, onRemove, saving, }) => {
+const ZodSwitch = ({ schema, jsonPath, compact, value, setValue, defaultValue, onSave, showSaveButton, onRemove, saving, saveDisabledByParent, }) => {
     const def = schema._def;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const typeName = def.typeName;
@@ -28,22 +28,22 @@ const ZodSwitch = ({ schema, jsonPath, compact, value, setValue, defaultValue, o
     const zodTypes = (0, get_zod_if_possible_1.useZodTypesIfPossible)();
     // TODO: (Maybe?) enable saving of inserted input props by cmd+s /ctrl + s (also for JSON view)
     if (typeName === z.ZodFirstPartyTypeKind.ZodObject) {
-        return ((0, jsx_runtime_1.jsx)(ZodObjectEditor_1.ZodObjectEditor, { setValue: setValue, value: value, defaultValue: defaultValue, jsonPath: jsonPath, schema: schema, compact: compact, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving }));
+        return ((0, jsx_runtime_1.jsx)(ZodObjectEditor_1.ZodObjectEditor, { setValue: setValue, value: value, defaultValue: defaultValue, jsonPath: jsonPath, schema: schema, compact: compact, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent }));
     }
     if (typeName === z.ZodFirstPartyTypeKind.ZodString) {
         if (value.startsWith(window.remotion_staticBase)) {
-            return ((0, jsx_runtime_1.jsx)(ZodStaticFileEditor_1.ZodStaticFileEditor, { setValue: setValue, value: value, jsonPath: jsonPath, schema: schema, compact: compact, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving }));
+            return ((0, jsx_runtime_1.jsx)(ZodStaticFileEditor_1.ZodStaticFileEditor, { setValue: setValue, value: value, jsonPath: jsonPath, schema: schema, compact: compact, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent }));
         }
-        return ((0, jsx_runtime_1.jsx)(ZodStringEditor_1.ZodStringEditor, { value: value, setValue: setValue, jsonPath: jsonPath, schema: schema, compact: compact, onSave: onSave, defaultValue: defaultValue, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving }));
+        return ((0, jsx_runtime_1.jsx)(ZodStringEditor_1.ZodStringEditor, { value: value, setValue: setValue, jsonPath: jsonPath, schema: schema, compact: compact, onSave: onSave, defaultValue: defaultValue, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent }));
     }
     if (typeName === z.ZodFirstPartyTypeKind.ZodDate) {
-        return ((0, jsx_runtime_1.jsx)(ZodDateEditor_1.ZodDateEditor, { value: value, setValue: setValue, jsonPath: jsonPath, schema: schema, compact: compact, onSave: onSave, defaultValue: defaultValue, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving }));
+        return ((0, jsx_runtime_1.jsx)(ZodDateEditor_1.ZodDateEditor, { value: value, setValue: setValue, jsonPath: jsonPath, schema: schema, compact: compact, onSave: onSave, defaultValue: defaultValue, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent }));
     }
     if (typeName === z.ZodFirstPartyTypeKind.ZodNumber) {
-        return ((0, jsx_runtime_1.jsx)(ZodNumberEditor_1.ZodNumberEditor, { value: value, setValue: setValue, jsonPath: jsonPath, schema: schema, compact: compact, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving }));
+        return ((0, jsx_runtime_1.jsx)(ZodNumberEditor_1.ZodNumberEditor, { value: value, setValue: setValue, jsonPath: jsonPath, schema: schema, compact: compact, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent }));
     }
     if (typeName === z.ZodFirstPartyTypeKind.ZodBoolean) {
-        return ((0, jsx_runtime_1.jsx)(ZodBooleanEditor_1.ZodBooleanEditor, { value: value, setValue: setValue, jsonPath: jsonPath, compact: compact, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving }));
+        return ((0, jsx_runtime_1.jsx)(ZodBooleanEditor_1.ZodBooleanEditor, { value: value, setValue: setValue, jsonPath: jsonPath, compact: compact, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent }));
     }
     if (typeName === z.ZodFirstPartyTypeKind.ZodUndefined) {
         return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { compact: compact, jsonPath: jsonPath, showSaveButton: showSaveButton, label: 'undefined', saving: saving }));
@@ -61,7 +61,7 @@ const ZodSwitch = ({ schema, jsonPath, compact, value, setValue, defaultValue, o
         return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { compact: compact, jsonPath: jsonPath, showSaveButton: showSaveButton, label: 'unknown (not editable)', saving: saving }));
     }
     if (typeName === z.ZodFirstPartyTypeKind.ZodArray) {
-        return ((0, jsx_runtime_1.jsx)(ZodArrayEditor_1.ZodArrayEditor, { setValue: setValue, value: value, jsonPath: jsonPath, schema: schema, compact: compact, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving }));
+        return ((0, jsx_runtime_1.jsx)(ZodArrayEditor_1.ZodArrayEditor, { setValue: setValue, value: value, jsonPath: jsonPath, schema: schema, compact: compact, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent }));
     }
     if (typeName === z.ZodFirstPartyTypeKind.ZodEnum) {
         return ((0, jsx_runtime_1.jsx)(ZodEnumEditor_1.ZodEnumEditor, { setValue: setValue, value: value, jsonPath: jsonPath, schema: schema, compact: compact, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving }));
@@ -70,18 +70,18 @@ const ZodSwitch = ({ schema, jsonPath, compact, value, setValue, defaultValue, o
         if (zodTypes &&
             schema._def.description ===
                 zodTypes.ZodZypesInternals.REMOTION_COLOR_BRAND) {
-            return ((0, jsx_runtime_1.jsx)(ZodColorEditor_1.ZodColorEditor, { value: value, setValue: setValue, jsonPath: jsonPath, schema: schema, compact: compact, onSave: onSave, defaultValue: defaultValue, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving }));
+            return ((0, jsx_runtime_1.jsx)(ZodColorEditor_1.ZodColorEditor, { value: value, setValue: setValue, jsonPath: jsonPath, schema: schema, compact: compact, onSave: onSave, defaultValue: defaultValue, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent }));
         }
         return ((0, jsx_runtime_1.jsx)(ZodEffectEditor_1.ZodEffectEditor, { value: value, setValue: setValue, jsonPath: jsonPath, schema: schema, compact: compact, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving }));
     }
     if (typeName === z.ZodFirstPartyTypeKind.ZodUnion) {
-        return ((0, jsx_runtime_1.jsx)(ZodUnionEditor_1.ZodUnionEditor, { schema: schema, showSaveButton: showSaveButton, jsonPath: jsonPath, compact: compact, value: value, defaultValue: defaultValue, setValue: setValue, onSave: onSave, onRemove: onRemove, saving: saving }));
+        return ((0, jsx_runtime_1.jsx)(ZodUnionEditor_1.ZodUnionEditor, { schema: schema, showSaveButton: showSaveButton, jsonPath: jsonPath, compact: compact, value: value, defaultValue: defaultValue, setValue: setValue, onSave: onSave, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent }));
     }
     if (typeName === z.ZodFirstPartyTypeKind.ZodOptional) {
-        return ((0, jsx_runtime_1.jsx)(ZodOptionalEditor_1.ZodOptionalEditor, { compact: compact, jsonPath: jsonPath, showSaveButton: showSaveButton, defaultValue: defaultValue, value: value, setValue: setValue, onSave: onSave, onRemove: onRemove, schema: schema, saving: saving }));
+        return ((0, jsx_runtime_1.jsx)(ZodOptionalEditor_1.ZodOptionalEditor, { compact: compact, jsonPath: jsonPath, showSaveButton: showSaveButton, defaultValue: defaultValue, value: value, setValue: setValue, onSave: onSave, onRemove: onRemove, schema: schema, saving: saving, saveDisabledByParent: saveDisabledByParent }));
     }
     if (typeName === z.ZodFirstPartyTypeKind.ZodNullable) {
-        return ((0, jsx_runtime_1.jsx)(ZodNullableEditor_1.ZodNullableEditor, { compact: compact, jsonPath: jsonPath, showSaveButton: showSaveButton, defaultValue: defaultValue, value: value, setValue: setValue, onSave: onSave, onRemove: onRemove, schema: schema, saving: saving }));
+        return ((0, jsx_runtime_1.jsx)(ZodNullableEditor_1.ZodNullableEditor, { compact: compact, jsonPath: jsonPath, showSaveButton: showSaveButton, defaultValue: defaultValue, value: value, setValue: setValue, onSave: onSave, onRemove: onRemove, schema: schema, saving: saving, saveDisabledByParent: saveDisabledByParent }));
     }
     return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { compact: compact, jsonPath: jsonPath, showSaveButton: showSaveButton, label: `${typeName} (not editable)`, saving: saving }));
 };

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import type { z } from 'zod';
 import type { JSONPath } from './zod-types';
+import type { UpdaterFunction } from './ZodSwitch';
 export declare const ZodUnionEditor: React.FC<{
     showSaveButton: boolean;
     jsonPath: JSONPath;
@@ -8,8 +9,9 @@ export declare const ZodUnionEditor: React.FC<{
     value: unknown;
     defaultValue: unknown;
     schema: z.ZodTypeAny;
-    setValue: (updater: (oldState: unknown) => unknown) => void;
-    onSave: (updater: (oldNum: unknown) => unknown) => void;
+    setValue: UpdaterFunction<unknown>;
+    onSave: UpdaterFunction<unknown>;
     onRemove: null | (() => void);
     saving: boolean;
+    saveDisabledByParent: boolean;
 }>;

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

@@ -24,7 +24,7 @@ const findNull = (value, zodType) => {
         otherSchemaIsAlsoNullish,
     };
 };
-const ZodUnionEditor = ({ jsonPath, compact, schema, setValue, onSave, defaultValue, value, showSaveButton, onRemove, saving, }) => {
+const ZodUnionEditor = ({ jsonPath, compact, schema, setValue, onSave, defaultValue, value, showSaveButton, onRemove, saving, saveDisabledByParent, }) => {
     const { options } = schema._def;
     const z = (0, get_zod_if_possible_1.useZodIfPossible)();
     if (!z) {
@@ -44,6 +44,6 @@ const ZodUnionEditor = ({ jsonPath, compact, schema, setValue, onSave, defaultVa
     if (otherSchemaIsAlsoNullish) {
         return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { jsonPath: jsonPath, label: 'Not editable - both union values are nullish', compact: compact, showSaveButton: showSaveButton, saving: saving }));
     }
-    return ((0, jsx_runtime_1.jsx)(ZodOrNullishEditor_1.ZodOrNullishEditor, { compact: compact, defaultValue: defaultValue, jsonPath: jsonPath, onRemove: onRemove, onSave: onSave, schema: otherSchema, setValue: setValue, showSaveButton: showSaveButton, value: value, nullishValue: nullishValue, saving: saving }));
+    return ((0, jsx_runtime_1.jsx)(ZodOrNullishEditor_1.ZodOrNullishEditor, { compact: compact, defaultValue: defaultValue, jsonPath: jsonPath, onRemove: onRemove, onSave: onSave, schema: otherSchema, setValue: setValue, showSaveButton: showSaveButton, value: value, nullishValue: nullishValue, saving: saving, saveDisabledByParent: saveDisabledByParent }));
 };
 exports.ZodUnionEditor = ZodUnionEditor;

package/dist/editor/components/RenderModal/SchemaEditor/input-props-serialization.d.ts

@@ -2,6 +2,8 @@ export declare type SerializedJSONWithCustomFields = {
     serializedString: string;
     customDateUsed: boolean;
     customFileUsed: boolean;
+    mapUsed: boolean;
+    setUsed: boolean;
 };
 export declare const FILE_TOKEN = "remotion-file:";
 export declare const serializeJSONWithDate: ({ data, indent, staticBase, }: {

package/dist/editor/components/RenderModal/SchemaEditor/input-props-serialization.js

@@ -6,19 +6,29 @@ exports.FILE_TOKEN = 'remotion-file:';
 const serializeJSONWithDate = ({ data, indent, staticBase, }) => {
     let customDateUsed = false;
     let customFileUsed = false;
+    let mapUsed = false;
+    let setUsed = false;
     const serializedString = JSON.stringify(data, function (key, value) {
         const item = this[key];
         if (item instanceof Date) {
             customDateUsed = true;
             return `${DATE_TOKEN}${item.toISOString()}`;
         }
+        if (item instanceof Map) {
+            mapUsed = true;
+            return value;
+        }
+        if (item instanceof Set) {
+            setUsed = true;
+            return value;
+        }
         if (typeof item === 'string' && item.startsWith(staticBase)) {
             customFileUsed = true;
             return `${exports.FILE_TOKEN}${item.replace(staticBase + '/', '')}`;
         }
         return value;
     }, indent);
-    return { serializedString, customDateUsed, customFileUsed };
+    return { serializedString, customDateUsed, customFileUsed, mapUsed, setUsed };
 };
 exports.serializeJSONWithDate = serializeJSONWithDate;
 const deserializeJSONWithCustomFields = (data) => {

package/dist/editor/components/RenderModal/SchemaEditor/local-state.d.ts

@@ -0,0 +1,16 @@
+import type { z } from 'zod';
+import type { UpdaterFunction } from './ZodSwitch';
+declare type LocalState<T> = {
+    value: T;
+    zodValidation: z.SafeParseReturnType<unknown, unknown>;
+    revision: number;
+};
+export declare const useLocalState: <T>({ value, schema, setValue, }: {
+    value: T;
+    schema: z.ZodTypeAny;
+    setValue: UpdaterFunction<T>;
+}) => {
+    localValue: LocalState<T>;
+    onChange: (updater: (oldV: T) => T, forceApply: boolean) => void;
+};
+export {};

package/dist/editor/components/RenderModal/SchemaEditor/local-state.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLocalState = void 0;
+const react_1 = require("react");
+const useLocalState = ({ value, schema, setValue, }) => {
+    const [localValue, setLocalValue] = (0, react_1.useState)(() => {
+        return {
+            value,
+            zodValidation: schema.safeParse(value),
+            revision: 0,
+        };
+    });
+    const stateRef = (0, react_1.useRef)(localValue);
+    stateRef.current = localValue;
+    const onChange = (0, react_1.useCallback)((updater, forceApply) => {
+        const newValue = updater(stateRef.current.value);
+        const safeParse = schema.safeParse(newValue);
+        if (safeParse.success || forceApply) {
+            setValue(updater, forceApply);
+            setLocalValue((oldLocalState) => {
+                const newState = {
+                    revision: oldLocalState.revision + 1,
+                    value: newValue,
+                    zodValidation: safeParse,
+                };
+                stateRef.current = newState;
+                return newState;
+            });
+        }
+        else {
+            setLocalValue((oldLocalState) => {
+                const newState = {
+                    revision: oldLocalState.revision + 1,
+                    value: newValue,
+                    zodValidation: safeParse,
+                };
+                stateRef.current = newState;
+                return newState;
+            });
+        }
+    }, [schema, setValue]);
+    return { localValue, onChange };
+};
+exports.useLocalState = useLocalState;

package/dist/editor/components/RenderModal/get-render-modal-warnings.d.ts

@@ -6,11 +6,14 @@ export declare type TypeCanSaveState = {
     reason: string;
     determined: boolean;
 };
-export declare const getRenderModalWarnings: ({ cliProps, canSaveDefaultProps, isCustomDateUsed, customFileUsed, inJSONEditor, propsEditType, }: {
+export declare const defaultTypeCanSaveState: TypeCanSaveState;
+export declare const getRenderModalWarnings: ({ cliProps, canSaveDefaultProps, isCustomDateUsed, customFileUsed, jsMapUsed, jsSetUsed, inJSONEditor, propsEditType, }: {
     cliProps: unknown;
     canSaveDefaultProps: TypeCanSaveState;
     isCustomDateUsed: boolean;
     customFileUsed: boolean;
+    jsMapUsed: boolean;
+    jsSetUsed: boolean;
     inJSONEditor: boolean;
     propsEditType: PropsEditType;
 }) => string[];

package/dist/editor/components/RenderModal/get-render-modal-warnings.js

@@ -1,7 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getRenderModalWarnings = void 0;
+exports.getRenderModalWarnings = exports.defaultTypeCanSaveState = void 0;
 const truthy_1 = require("../../../truthy");
+exports.defaultTypeCanSaveState = {
+    canUpdate: false,
+    reason: 'Loading...',
+    determined: false,
+};
 const getInputPropsWarning = ({ cliProps, propsEditType, }) => {
     if (Object.keys(cliProps).length > 0 &&
         propsEditType === 'default-props') {
@@ -30,12 +35,26 @@ const staticFileUsed = (used, inJSONEditor) => {
     }
     return null;
 };
-const getRenderModalWarnings = ({ cliProps, canSaveDefaultProps, isCustomDateUsed, customFileUsed, inJSONEditor, propsEditType, }) => {
+const mapUsed = (used, inJSONEditor) => {
+    if (used && inJSONEditor) {
+        return 'A `Map` was used in the schema which can not be serialized to JSON.';
+    }
+    return null;
+};
+const setUsed = (used, inJSONEditor) => {
+    if (used && inJSONEditor) {
+        return 'A `Set` was used in the schema which can not be serialized to JSON.';
+    }
+    return null;
+};
+const getRenderModalWarnings = ({ cliProps, canSaveDefaultProps, isCustomDateUsed, customFileUsed, jsMapUsed, jsSetUsed, inJSONEditor, propsEditType, }) => {
     return [
         getInputPropsWarning({ cliProps, propsEditType }),
         getCannotSaveDefaultProps(canSaveDefaultProps),
         customDateUsed(isCustomDateUsed, inJSONEditor),
         staticFileUsed(customFileUsed, inJSONEditor),
+        mapUsed(jsMapUsed, inJSONEditor),
+        setUsed(jsSetUsed, inJSONEditor),
     ].filter(truthy_1.truthy);
 };
 exports.getRenderModalWarnings = getRenderModalWarnings;

package/dist/editor/components/RenderModal/out-name-checker.js

@@ -45,7 +45,7 @@ const isValidOutName = ({ outName, codec, audioCodec, renderMode, stillImageForm
     const hasInvalidChar = () => {
         return prefix.split('').some((char) => invalidCharacters.includes(char));
     };
-    if (renderMode === 'video') {
+    if (renderMode === 'video' || renderMode === 'audio') {
         client_1.BrowserSafeApis.validateOutputFilename({
             codec,
             audioCodec: audioCodec !== null && audioCodec !== void 0 ? audioCodec : null,
@@ -67,14 +67,4 @@ const isValidOutName = ({ outName, codec, audioCodec, renderMode, stillImageForm
         !isValidStillExtension(extension, stillImageFormat)) {
         throw new Error(`The extension ${extension} is not supported for still image format ${stillImageFormat}`);
     }
-    if (renderMode === 'audio') {
-        if (audioCodec === 'pcm-16') {
-            if (extension !== 'wav' && extension !== 'wave') {
-                throw new Error(`The extension ${extension} is not supported for audio codec ${audioCodec}`);
-            }
-        }
-        if (audioCodec !== extension) {
-            throw new Error(`The extension ${extension} is not supported for audio codec ${audioCodec}`);
-        }
-    }
 };

package/dist/editor/components/RenderQueue/actions.d.ts

@@ -13,7 +13,7 @@ export declare const addStillRenderJob: ({ compositionId, outName, imageFormat,
     chromiumOptions: RequiredChromiumOptions;
     delayRenderTimeout: number;
     envVariables: Record<string, string>;
-    inputProps: unknown;
+    inputProps: Record<string, unknown>;
 }) => Promise<undefined>;
 export declare const addVideoRenderJob: ({ compositionId, outName, imageFormat, jpegQuality, scale, verbose, codec, concurrency, crf, startFrame, endFrame, muted, enforceAudioTrack, proResProfile, pixelFormat, audioBitrate, videoBitrate, everyNthFrame, numberOfGifLoops, delayRenderTimeout, audioCodec, disallowParallelEncoding, chromiumOptions, envVariables, inputProps, }: {
     compositionId: string;
@@ -40,7 +40,7 @@ export declare const addVideoRenderJob: ({ compositionId, outName, imageFormat,
     disallowParallelEncoding: boolean;
     chromiumOptions: RequiredChromiumOptions;
     envVariables: Record<string, string>;
-    inputProps: unknown;
+    inputProps: Record<string, unknown>;
 }) => Promise<undefined>;
 export declare const unsubscribeFromFileExistenceWatcher: ({ file, clientId, }: {
     file: string;
@@ -55,5 +55,5 @@ export declare const openInFileExplorer: ({ directory }: {
 }) => Promise<void>;
 export declare const removeRenderJob: (job: RenderJob) => Promise<undefined>;
 export declare const cancelRenderJob: (job: RenderJob) => Promise<import("../../../preview-server/render-queue/job").CancelRenderResponse>;
-export declare const updateDefaultProps: (compositionId: string, defaultProps: unknown, enumPaths: EnumPath[]) => Promise<void>;
+export declare const updateDefaultProps: (compositionId: string, defaultProps: unknown, enumPaths: EnumPath[]) => Promise<import("../../../preview-server/render-queue/job").UpdateDefaultPropsResponse>;
 export declare const canUpdateDefaultProps: (compositionId: string) => Promise<import("../../../preview-server/render-queue/job").CanUpdateDefaultPropsResponse>;

package/dist/editor/components/RightPanel.js

@@ -16,16 +16,16 @@ const container = {
     flexDirection: 'column',
 };
 const PropsEditor = ({ composition }) => {
-    var _a;
     const { props, updateProps } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
     const setInputProps = (0, react_1.useCallback)((newProps) => {
         updateProps({
             id: composition.id,
             defaultProps: composition.defaultProps,
-            newProps: newProps,
+            newProps,
         });
     }, [composition.defaultProps, composition.id, updateProps]);
-    return ((0, jsx_runtime_1.jsx)(RenderModalData_1.RenderModalData, { composition: composition, inputProps: (_a = props[composition.id]) !== null && _a !== void 0 ? _a : composition.defaultProps, setInputProps: setInputProps, compact: true, mayShowSaveButton: true, propsEditType: "default-props" }));
+    const actualProps = (0, react_1.useMemo)(() => { var _a, _b; return (_b = (_a = props[composition.id]) !== null && _a !== void 0 ? _a : composition.defaultProps) !== null && _b !== void 0 ? _b : {}; }, [composition.defaultProps, composition.id, props]);
+    return ((0, jsx_runtime_1.jsx)(RenderModalData_1.RenderModalData, { composition: composition, inputProps: actualProps, setInputProps: setInputProps, compact: true, mayShowSaveButton: true, propsEditType: "default-props" }));
 };
 const localStorageKey = 'remotion.sidebarPanel';
 const getSelectedPanel = () => {

package/dist/editor/components/SidebarRenderButton.js

@@ -72,6 +72,8 @@ const SidebarRenderButton = ({ composition, visible }) => {
             initialHeadless: defaults.headless,
             initialIgnoreCertificateErrors: defaults.ignoreCertificateErrors,
             defaultProps: (_a = props[composition.id]) !== null && _a !== void 0 ? _a : composition.defaultProps,
+            inFrameMark: null,
+            outFrameMark: null,
         });
     }, [composition.defaultProps, composition.id, isVideo, props, setSelectedModal]);
     const renderAction = (0, react_1.useCallback)((color) => {

package/dist/editor/components/Spinner.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const Spinner: React.FC<{
+    size: number;
+}>;

package/dist/editor/components/Spinner.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Spinner = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const viewBox = 100;
+const lines = 6;
+const className = '__remotion_spinner_line';
+const remotionSpinnerAnimation = '__remotion_spinner_animation';
+// Generated from https://github.com/remotion-dev/template-next/commit/9282c93f7c51ada31a42e18a94680fa09a14eee3
+const translated = 'M 44 0 L 50 0 a 6 6 0 0 1 6 6 L 56 26 a 6 6 0 0 1 -6 6 L 50 32 a 6 6 0 0 1 -6 -6 L 44 6 a 6 6 0 0 1 6 -6 Z';
+const totalDuration = 0.5;
+const Spinner = ({ size }) => {
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            width: size,
+            height: size,
+        };
+    }, [size]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("style", { type: "text/css", children: `
+				@keyframes ${remotionSpinnerAnimation} {
+          0% {
+            opacity: 1;
+          }
+          100% {
+            opacity: 0.15;
+          }
+        }
+        
+        .${className} {
+            animation: ${remotionSpinnerAnimation} ${totalDuration}s linear infinite;
+        }        
+			` }), (0, jsx_runtime_1.jsx)("svg", { style: style, viewBox: `0 0 ${viewBox} ${viewBox}`, children: new Array(lines).fill(true).map((_, index) => {
+                    return ((0, jsx_runtime_1.jsx)("path", { className: className, style: {
+                            rotate: `${(index * Math.PI * 2) / lines}rad`,
+                            transformOrigin: 'center center',
+                            animationDelay: `${index * (totalDuration / lines) - totalDuration}s`,
+                        }, d: translated, fill: colors_1.LIGHT_TEXT }, index));
+                }) })] }));
+};
+exports.Spinner = Spinner;