@remotion/cli 4.0.0-alpha8 → 4.0.0-alpha9

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

@@ -1,5 +1,5 @@
 import React from 'react';
 export declare const SchemaSaveButton: React.FC<{
     onClick: () => void;
-    isSaving: boolean;
+    disabled: boolean;
 }>;

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

@@ -8,10 +8,10 @@ const icon = {
     height: 14,
     color: 'currentColor',
 };
-const SchemaSaveButton = ({ onClick, isSaving }) => {
+const SchemaSaveButton = ({ onClick, disabled }) => {
     const renderAction = (0, react_1.useCallback)((color) => {
-        return ((0, jsx_runtime_1.jsx)("svg", { style: icon, viewBox: "0 0 448 512", children: (0, jsx_runtime_1.jsx)("path", { fill: isSaving ? 'grey' : color, d: "M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V173.3c0-17-6.7-33.3-18.7-45.3L352 50.7C340 38.7 323.7 32 306.7 32H64zm0 96c0-17.7 14.3-32 32-32H288c17.7 0 32 14.3 32 32v64c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V128zM224 288a64 64 0 1 1 0 128 64 64 0 1 1 0-128z" }) }));
-    }, [isSaving]);
-    return ((0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick, disabled: isSaving }));
+        return ((0, jsx_runtime_1.jsx)("svg", { style: icon, viewBox: "0 0 448 512", children: (0, jsx_runtime_1.jsx)("path", { fill: disabled ? 'grey' : color, d: "M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V173.3c0-17-6.7-33.3-18.7-45.3L352 50.7C340 38.7 323.7 32 306.7 32H64zm0 96c0-17.7 14.3-32 32-32H288c17.7 0 32 14.3 32 32v64c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V128zM224 288a64 64 0 1 1 0 128 64 64 0 1 1 0-128z" }) }));
+    }, [disabled]);
+    return ((0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick, disabled: disabled }));
 };
 exports.SchemaSaveButton = SchemaSaveButton;

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

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

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

@@ -10,6 +10,7 @@ const layout_1 = require("../../layout");
 const ValidationMessage_1 = require("../../NewComposition/ValidationMessage");
 const layout_2 = require("../layout");
 const create_zod_values_1 = require("./create-zod-values");
+const local_state_1 = require("./local-state");
 const SchemaLabel_1 = require("./SchemaLabel");
 const ZodArrayItemEditor_1 = require("./ZodArrayItemEditor");
 const container = {
@@ -18,14 +19,11 @@ const container = {
 const fullWidth = {
     width: '100%',
 };
-// TODO: Ability to revert a change (e.g entry deletion )
-const ZodArrayEditor = ({ schema, jsonPath, compact, setValue: updateValue, defaultValue, value, onSave, showSaveButton, onRemove, saving, }) => {
-    const [localValue, setLocalValue] = (0, react_1.useState)(() => {
-        return {
-            value,
-            zodValidation: schema.safeParse(value),
-            revision: 0,
-        };
+const ZodArrayEditor = ({ schema, jsonPath, compact, setValue, defaultValue, value, onSave, showSaveButton, onRemove, saving, saveDisabledByParent, }) => {
+    const { localValue, onChange } = (0, local_state_1.useLocalState)({
+        value,
+        schema,
+        setValue,
     });
     const def = schema._def;
     const z = (0, get_zod_if_possible_1.useZodIfPossible)();
@@ -48,21 +46,6 @@ const ZodArrayEditor = ({ schema, jsonPath, compact, setValue: updateValue, defa
                 : colors_1.FAIL_COLOR,
         };
     }, [localValue.zodValidation.success]);
-    const onChange = (0, react_1.useCallback)((updater, incrementRevision) => {
-        setLocalValue((oldLocalState) => {
-            const newValue = updater(oldLocalState.value);
-            const safeParse = schema.safeParse(newValue);
-            // TODO: This logs an error to the console
-            if (safeParse.success) {
-                updateValue(updater);
-            }
-            return {
-                revision: oldLocalState.revision + (incrementRevision ? 1 : 0),
-                value: newValue,
-                zodValidation: safeParse,
-            };
-        });
-    }, [schema, updateValue]);
     const style = (0, react_1.useMemo)(() => {
         if (isRoot) {
             return undefined;
@@ -72,13 +55,42 @@ const ZodArrayEditor = ({ schema, jsonPath, compact, setValue: updateValue, defa
     const onAdd = (0, react_1.useCallback)(() => {
         onChange((oldV) => {
             return [...oldV, (0, create_zod_values_1.createZodValues)(def.type, z, zodTypes)];
-        }, true);
+        }, false);
     }, [def.type, onChange, z, zodTypes]);
-    return ((0, jsx_runtime_1.jsx)("div", { style: style, children: (0, jsx_runtime_1.jsx)("div", { style: fullWidth, children: (0, jsx_runtime_1.jsxs)(Element, { style: fieldset, children: [isRoot ? null : ((0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaFieldsetLabel, { jsonPath: jsonPath, onRemove: onRemove })), (0, jsx_runtime_1.jsx)("div", { style: isRoot ? undefined : container, children: localValue.value.map((child, i) => {
+    const reset = (0, react_1.useCallback)(() => {
+        onChange(() => defaultValue, true);
+    }, [defaultValue, onChange]);
+    const isDefaultValue = (0, react_1.useMemo)(() => {
+        return deepEqual(localValue.value, defaultValue);
+    }, [defaultValue, localValue]);
+    return ((0, jsx_runtime_1.jsx)("div", { style: style, children: (0, jsx_runtime_1.jsx)("div", { style: fullWidth, children: (0, jsx_runtime_1.jsxs)(Element, { style: fieldset, children: [isRoot ? null : ((0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaFieldsetLabel, { onReset: reset, isDefaultValue: isDefaultValue, jsonPath: jsonPath, onRemove: onRemove })), (0, jsx_runtime_1.jsx)("div", { style: isRoot ? undefined : container, children: localValue.value.map((child, i) => {
                             var _a;
                             return ((0, jsx_runtime_1.jsx)(ZodArrayItemEditor_1.ZodArrayItemEditor
                             // eslint-disable-next-line react/no-array-index-key
-                            , { onChange: onChange, value: child, def: def, index: i, jsonPath: jsonPath, compact: compact, defaultValue: (_a = defaultValue[i]) !== null && _a !== void 0 ? _a : child, onSave: onSave, showSaveButton: showSaveButton, saving: saving }, `${i}${localValue.revision}`));
+                            , { onChange: onChange, value: child, def: def, index: i, jsonPath: jsonPath, compact: compact, defaultValue: (_a = defaultValue[i]) !== null && _a !== void 0 ? _a : child, onSave: onSave, showSaveButton: showSaveButton, saving: saving, saveDisabledByParent: saveDisabledByParent }, `${i}${localValue.revision}`));
                         }) }), !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" })] })), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onAdd, children: "+ Add item" })] }) }) }));
 };
 exports.ZodArrayEditor = ZodArrayEditor;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function deepEqual(a, b) {
+    if (a === b) {
+        return true;
+    }
+    if (typeof a !== 'object' ||
+        a === null ||
+        typeof b !== 'object' ||
+        b === null) {
+        return false;
+    }
+    const keysA = Object.keys(a);
+    const keysB = Object.keys(b);
+    if (keysA.length !== keysB.length) {
+        return false;
+    }
+    for (const key of keysA) {
+        if (!keysB.includes(key) || !deepEqual(a[key], b[key])) {
+            return false;
+        }
+    }
+    return true;
+}

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

@@ -1,14 +1,16 @@
 /// <reference types="react" />
 import type { JSONPath } from './zod-types';
+import type { UpdaterFunction } from './ZodSwitch';
 export declare const ZodArrayItemEditor: React.FC<{
     jsonPath: JSONPath;
-    onChange: (updater: (oldV: unknown[]) => unknown[], incrementRevision: boolean) => void;
+    onChange: UpdaterFunction<unknown[]>;
     def: any;
     index: number;
     value: unknown;
     compact: boolean;
     defaultValue: unknown;
-    onSave: (updater: (oldState: unknown[]) => unknown[]) => void;
+    onSave: UpdaterFunction<unknown[]>;
     showSaveButton: boolean;
     saving: boolean;
+    saveDisabledByParent: boolean;
 }>;

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

@@ -4,9 +4,9 @@ exports.ZodArrayItemEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const ZodSwitch_1 = require("./ZodSwitch");
-const ZodArrayItemEditor = ({ def, onChange, jsonPath, index, value, compact, defaultValue, onSave: onSaveObject, showSaveButton, saving, }) => {
+const ZodArrayItemEditor = ({ def, onChange, jsonPath, index, value, compact, defaultValue, onSave: onSaveObject, showSaveButton, saving, saveDisabledByParent, }) => {
     const onRemove = (0, react_1.useCallback)(() => {
-        onChange((oldV) => [...oldV.slice(0, index), ...oldV.slice(index + 1)], true);
+        onChange((oldV) => [...oldV.slice(0, index), ...oldV.slice(index + 1)], false);
     }, [index, onChange]);
     const setValue = (0, react_1.useCallback)((val) => {
         onChange((oldV) => [
@@ -21,8 +21,8 @@ const ZodArrayItemEditor = ({ def, onChange, jsonPath, index, value, compact, de
             ...oldV.slice(0, index),
             updater(oldV[index]),
             ...oldV.slice(index + 1),
-        ]);
+        ], false);
     }, [index, onSaveObject]);
-    return ((0, jsx_runtime_1.jsx)(ZodSwitch_1.ZodSwitch, { jsonPath: newJsonPath, schema: def.type, value: value, setValue: setValue, compact: compact, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving }));
+    return ((0, jsx_runtime_1.jsx)(ZodSwitch_1.ZodSwitch, { jsonPath: newJsonPath, schema: def.type, value: value, setValue: setValue, compact: compact, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent }));
 };
 exports.ZodArrayItemEditor = ZodArrayItemEditor;

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

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

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

@@ -9,19 +9,19 @@ const SchemaLabel_1 = require("./SchemaLabel");
 const fullWidth = {
     width: '100%',
 };
-const ZodBooleanEditor = ({ jsonPath, value, setValue, onSave, compact, defaultValue, onRemove, showSaveButton, saving, }) => {
-    const onValueChange = (0, react_1.useCallback)((newValue) => {
-        setValue(() => newValue);
+const ZodBooleanEditor = ({ jsonPath, value, setValue, onSave, compact, defaultValue, onRemove, showSaveButton, saving, saveDisabledByParent, }) => {
+    const onValueChange = (0, react_1.useCallback)((newValue, forceApply) => {
+        setValue(() => newValue, forceApply);
     }, [setValue]);
     const onChange = (0, react_1.useCallback)((e) => {
-        onValueChange(e.target.checked);
+        onValueChange(e.target.checked, false);
     }, [onValueChange]);
     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)("div", { style: compact ? layout_1.narrowOption : layout_1.optionRow, children: [(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)(Checkbox_1.Checkbox, { checked: value, onChange: onChange, disabled: false }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: compact ? layout_1.narrowOption : layout_1.optionRow, children: [(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: true, saveDisabledByParent: saveDisabledByParent }), (0, jsx_runtime_1.jsx)("div", { style: fullWidth, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: value, onChange: onChange, disabled: false }) })] }));
 };
 exports.ZodBooleanEditor = ZodBooleanEditor;

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

@@ -8,9 +8,10 @@ export declare const ZodColorEditor: 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/ZodColorEditor.js

@@ -11,11 +11,12 @@ const RemInput_1 = require("../../NewComposition/RemInput");
 const RemInputTypeColor_1 = require("../../NewComposition/RemInputTypeColor");
 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 ZodColorEditor = ({ jsonPath, value, setValue, showSaveButton, defaultValue, schema, compact, onSave, onRemove, saving, }) => {
+const ZodColorEditor = ({ 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');
@@ -24,55 +25,27 @@ const ZodColorEditor = ({ jsonPath, value, setValue, showSaveButton, defaultValu
     if (!zodTypes) {
         throw new Error('expected zod color');
     }
-    const [localValue, setLocalValue] = (0, react_1.useState)(() => {
-        return {
-            value,
-            zodValidation: schema.safeParse(value),
-        };
+    const { localValue, onChange: onValueChange } = (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 { a, b, g, r } = localValue.zodValidation.success
         ? zodTypes.ZodZypesInternals.parseColor(localValue.value)
         : { a: 1, b: 0, g: 0, r: 0 };
     const onChange = (0, react_1.useCallback)((e) => {
         const newColor = (0, color_math_1.colorWithNewOpacity)(e.target.value, Math.round(a), zodTypes);
-        const safeParse = schema.safeParse(newColor);
-        const newLocalState = {
-            value: newColor,
-            zodValidation: safeParse,
-        };
-        setLocalValue(newLocalState);
-        if (safeParse.success) {
-            setValue(() => newColor);
-        }
-    }, [a, schema, setValue, zodTypes]);
+        onValueChange(() => newColor, false);
+    }, [a, onValueChange, zodTypes]);
     const onTextChange = (0, react_1.useCallback)((e) => {
         const newValue = e.target.value;
-        const safeParse = schema.safeParse(newValue);
-        const newLocalState = {
-            value: newValue,
-            zodValidation: safeParse,
-        };
-        setLocalValue(newLocalState);
-        if (safeParse.success) {
-            setValue(() => newValue);
-        }
-    }, [schema, setValue]);
+        onValueChange(() => newValue, false);
+    }, [onValueChange]);
     const reset = (0, react_1.useCallback)(() => {
-        onValueChange(defaultValue, true);
+        onValueChange(() => defaultValue, true);
     }, [defaultValue, onValueChange]);
     const save = (0, react_1.useCallback)(() => {
-        onSave(() => value);
+        onSave(() => value, false);
     }, [onSave, value]);
     const rgb = `#${r.toString(16).padStart(2, '0')}${g
         .toString(16)
@@ -87,29 +60,13 @@ const ZodColorEditor = ({ jsonPath, value, setValue, showSaveButton, defaultValu
     }, []);
     const onOpacityChange = (0, react_1.useCallback)((newValue) => {
         const newColor = (0, color_math_1.colorWithNewOpacity)(localValue.value, Math.round((Number(newValue) / 100) * 255), zodTypes);
-        const safeParse = schema.safeParse(newColor);
-        const newLocalState = {
-            value: newColor,
-            zodValidation: safeParse,
-        };
-        setLocalValue(newLocalState);
-        if (safeParse.success) {
-            setValue(() => newColor);
-        }
-    }, [localValue.value, schema, setValue, zodTypes]);
+        onValueChange(() => newColor, false);
+    }, [localValue.value, onValueChange, zodTypes]);
     const onOpacityValueChange = (0, react_1.useCallback)((newValue) => {
         const newColor = (0, color_math_1.colorWithNewOpacity)(localValue.value, Math.round((Number(newValue) / 100) * 255), zodTypes);
-        const safeParse = schema.safeParse(newColor);
-        const newLocalState = {
-            value: String(newColor),
-            zodValidation: safeParse,
-        };
-        setLocalValue(newLocalState);
-        if (safeParse.success) {
-            setValue(() => newColor);
-        }
-    }, [localValue.value, schema, setValue, zodTypes]);
-    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.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: colorPicker, children: (0, jsx_runtime_1.jsx)(RemInputTypeColor_1.RemInputTypeColor, { type: "color", style: {
+        onValueChange(() => newColor, false);
+    }, [localValue.value, onValueChange, zodTypes]);
+    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, valid: localValue.zodValidation.success, saveDisabledByParent: saveDisabledByParent }), (0, jsx_runtime_1.jsxs)("div", { style: fullWidth, children: [(0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: colorPicker, children: (0, jsx_runtime_1.jsx)(RemInputTypeColor_1.RemInputTypeColor, { type: "color", style: {
                                         height: 39,
                                     }, value: rgb, onChange: onChange, className: "__remotion_color_picker", status: status }) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1, block: true }), (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { value: localValue.value, status: status, placeholder: jsonPath.join('.'), onChange: onTextChange, rightAlign: false }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { onTextChange: onOpacityChange, onValueChange: onOpacityValueChange, status: status, value: (a / 255) * 100, min: 0, max: 100, step: 1, formatter: (v) => `${Math.round(Number(v))}%`, 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" })] }))] })] }));
 };

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

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

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

@@ -8,6 +8,7 @@ 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%',
@@ -43,24 +44,15 @@ const formatDate = (date) => {
         .padStart(3, '0')}`;
     return formattedDate;
 };
-const ZodDateEditor = ({ jsonPath, value, setValue, showSaveButton, defaultValue, schema, compact, onSave, onRemove, saving, }) => {
-    const [localValue, setLocalValue] = (0, react_1.useState)(() => {
-        return {
-            value,
-            zodValidation: schema.safeParse(value),
-        };
+const ZodDateEditor = ({ jsonPath, value, setValue, showSaveButton, defaultValue, schema, compact, onSave, onRemove, saving, saveDisabledByParent, }) => {
+    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]);
+        setLocalValue(() => newValue, forceApply);
+    }, [setLocalValue]);
     const onChange = (0, react_1.useCallback)((e) => {
         // React does not support e.target.valueAsDate :(
         onValueChange(new Date(e.target.value), false);
@@ -69,8 +61,8 @@ const ZodDateEditor = ({ jsonPath, value, setValue, showSaveButton, 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)("div", { style: compact ? layout_2.narrowOption : layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { compact: compact, isDefaultValue: value.getTime() === defaultValue.getTime(), 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: formatDate(localValue.value), type: "datetime-local", status: localValue.zodValidation.success ? 'ok' : 'error', placeholder: jsonPath.join('.'), onChange: onChange, style: inputStyle, rightAlign: false }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)("div", { style: explainer, children: "Date is in local format" }), !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: value.getTime() === defaultValue.getTime(), 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: formatDate(localValue.value), type: "datetime-local", status: localValue.zodValidation.success ? 'ok' : 'error', placeholder: jsonPath.join('.'), onChange: onChange, style: inputStyle, rightAlign: false }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)("div", { style: explainer, children: "Date is in local format" }), !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.ZodDateEditor = ZodDateEditor;

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

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

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

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const colors_1 = require("../../../helpers/colors");
 const get_zod_if_possible_1 = require("../../get-zod-if-possible");
 const ValidationMessage_1 = require("../../NewComposition/ValidationMessage");
+const local_state_1 = require("./local-state");
 const ZodSwitch_1 = require("./ZodSwitch");
 const fullWidth = {
     width: '100%',
@@ -15,30 +16,16 @@ const ZodEffectEditor = ({ schema, jsonPath, value, setValue: updateValue, compa
     if (!z) {
         throw new Error('expected zod');
     }
-    const [localValue, setLocalValue] = (0, react_1.useState)(() => {
-        return {
-            value,
-            zodValidation: schema.safeParse(value),
-        };
+    const { localValue, onChange } = (0, local_state_1.useLocalState)({
+        value,
+        schema,
+        setValue: updateValue,
     });
     const def = schema._def;
     const typeName = def.typeName;
     if (typeName !== z.ZodFirstPartyTypeKind.ZodEffects) {
         throw new Error('expected effect');
     }
-    const onChange = (0, react_1.useCallback)((updater) => {
-        setLocalValue((oldLocalState) => {
-            const newValue = updater(oldLocalState.value);
-            const safeParse = schema.safeParse(newValue);
-            if (safeParse.success) {
-                updateValue(() => newValue);
-            }
-            return {
-                value: newValue,
-                zodValidation: safeParse,
-            };
-        });
-    }, [schema, updateValue]);
     const container = (0, react_1.useMemo)(() => {
         if (!localValue.zodValidation.success) {
             return {
@@ -51,6 +38,6 @@ const ZodEffectEditor = ({ schema, jsonPath, value, setValue: updateValue, compa
             padding: 0,
         };
     }, [localValue.zodValidation.success]);
-    return ((0, jsx_runtime_1.jsxs)("fieldset", { style: container, children: [(0, jsx_runtime_1.jsx)("div", { style: fullWidth, children: (0, jsx_runtime_1.jsx)(ZodSwitch_1.ZodSwitch, { value: value, setValue: onChange, jsonPath: jsonPath, schema: def.schema, compact: compact, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving }) }), !localValue.zodValidation.success && ((0, jsx_runtime_1.jsx)("legend", { children: (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)("fieldset", { style: container, children: [(0, jsx_runtime_1.jsx)("div", { style: fullWidth, children: (0, jsx_runtime_1.jsx)(ZodSwitch_1.ZodSwitch, { value: value, setValue: onChange, jsonPath: jsonPath, schema: def.schema, compact: compact, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: !localValue.zodValidation.success }) }), !localValue.zodValidation.success && ((0, jsx_runtime_1.jsx)("legend", { children: (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: localValue.zodValidation.error.format()._errors[0], type: "error" }) }))] }));
 };
 exports.ZodEffectEditor = ZodEffectEditor;

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

@@ -9,21 +9,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 ZodEnumEditor = ({ schema, jsonPath, compact, setValue: updateValue, defaultValue, value, onSave, showSaveButton, onRemove, saving, }) => {
+const ZodEnumEditor = ({ schema, jsonPath, compact, setValue, defaultValue, value, onSave, showSaveButton, onRemove, saving, }) => {
     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;
@@ -31,22 +30,9 @@ const ZodEnumEditor = ({ schema, jsonPath, compact, setValue: updateValue, defau
         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 def.values.map((option) => {
             return {
@@ -56,17 +42,17 @@ const ZodEnumEditor = ({ schema, jsonPath, compact, setValue: updateValue, defau
                 keyHint: null,
                 leftItem: option === value ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
                 onClick: (id) => {
-                    onChange(() => id, false);
+                    setLocalValue(() => id, false);
                 },
                 quickSwitcherLabel: null,
                 subMenu: null,
                 type: 'item',
             };
         });
-    }, [def.values, onChange, value]);
+    }, [def.values, setLocalValue, value]);
     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, { 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: 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: value === defaultValue, compact: compact, onReset: reset, jsonPath: jsonPath, onRemove: onRemove, saving: saving, valid: localValue.zodValidation.success, saveDisabledByParent: !localValue.zodValidation.success }), (0, jsx_runtime_1.jsx)("div", { style: isRoot ? undefined : container, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: comboBoxValues, selectedId: 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.ZodEnumEditor = ZodEnumEditor;

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

@@ -22,6 +22,6 @@ const wideEmptyLabel = {
 const ZonNonEditableValue = ({ jsonPath, label, compact, showSaveButton, saving }) => {
     const save = (0, react_1.useCallback)(() => undefined, []);
     const reset = (0, react_1.useCallback)(() => undefined, []);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: compact ? layout_1.narrowOption : layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { isDefaultValue: true, jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, compact: compact, onRemove: null, saving: saving }), (0, jsx_runtime_1.jsx)("div", { style: fullWidth, children: (0, jsx_runtime_1.jsx)("em", { style: compact ? emptyLabel : wideEmptyLabel, children: label }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: compact ? layout_1.narrowOption : layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { isDefaultValue: true, jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, compact: compact, onRemove: null, saving: saving, valid: true, saveDisabledByParent: true }), (0, jsx_runtime_1.jsx)("div", { style: fullWidth, children: (0, jsx_runtime_1.jsx)("em", { style: compact ? emptyLabel : wideEmptyLabel, children: label }) })] }));
 };
 exports.ZonNonEditableValue = ZonNonEditableValue;

package/dist/editor/components/RenderModal/SchemaEditor/ZodNullableEditor.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 ZodNullableEditor: React.FC<{
     showSaveButton: boolean;
     jsonPath: JSONPath;
@@ -8,8 +9,9 @@ export declare const ZodNullableEditor: React.FC<{
     value: unknown;
     defaultValue: unknown;
     schema: z.ZodTypeAny;
-    setValue: (updater: (oldNum: 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/ZodNullableEditor.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ZodNullableEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ZodOrNullishEditor_1 = require("./ZodOrNullishEditor");
-const ZodNullableEditor = ({ jsonPath, compact, schema, setValue, onSave, defaultValue, value, showSaveButton, onRemove, saving, }) => {
+const ZodNullableEditor = ({ jsonPath, compact, schema, setValue, onSave, defaultValue, value, showSaveButton, onRemove, saving, saveDisabledByParent, }) => {
     const { innerType } = schema._def;
-    return ((0, jsx_runtime_1.jsx)(ZodOrNullishEditor_1.ZodOrNullishEditor, { compact: compact, defaultValue: defaultValue, jsonPath: jsonPath, onRemove: onRemove, onSave: onSave, schema: innerType, setValue: setValue, showSaveButton: showSaveButton, value: value, nullishValue: null, saving: saving }));
+    return ((0, jsx_runtime_1.jsx)(ZodOrNullishEditor_1.ZodOrNullishEditor, { compact: compact, defaultValue: defaultValue, jsonPath: jsonPath, onRemove: onRemove, onSave: onSave, schema: innerType, setValue: setValue, showSaveButton: showSaveButton, value: value, nullishValue: null, saving: saving, saveDisabledByParent: saveDisabledByParent }));
 };
 exports.ZodNullableEditor = ZodNullableEditor;

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

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