@remotion/studio 4.0.438 → 4.0.439

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

@@ -7,11 +7,6 @@ export declare const ZodArrayItemEditor: React.FC<{
     elementSchema: AnyZodSchema;
     index: number;
     value: unknown;
-    defaultValue: unknown;
-    onSave: UpdaterFunction<unknown[]>;
-    showSaveButton: boolean;
-    saving: boolean;
-    saveDisabledByParent: boolean;
     mayPad: boolean;
     mayRemove: boolean;
 }>;

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

@@ -5,29 +5,24 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const get_zod_if_possible_1 = require("../../get-zod-if-possible");
 const ZodSwitch_1 = require("./ZodSwitch");
-const ZodArrayItemEditor = ({ elementSchema, onChange, jsonPath, index, value, defaultValue, onSave: onSaveObject, showSaveButton, saving, saveDisabledByParent, mayPad, mayRemove, }) => {
+const ZodArrayItemEditor = ({ elementSchema, onChange, jsonPath, index, value, mayPad, mayRemove }) => {
     const z = (0, get_zod_if_possible_1.useZodIfPossible)();
     if (!z) {
         throw new Error('expected zod');
     }
     const onRemove = (0, react_1.useCallback)(() => {
-        onChange((oldV) => [...oldV.slice(0, index), ...oldV.slice(index + 1)], false, true);
+        onChange((oldV) => [...oldV.slice(0, index), ...oldV.slice(index + 1)], {
+            shouldSave: true,
+        });
     }, [index, onChange]);
-    const setValue = (0, react_1.useCallback)((val) => {
+    const setValue = (0, react_1.useCallback)((val, { shouldSave }) => {
         onChange((oldV) => [
             ...oldV.slice(0, index),
             typeof val === 'function' ? val(oldV[index]) : val,
             ...oldV.slice(index + 1),
-        ], false, false);
+        ], { shouldSave });
     }, [index, onChange]);
     const newJsonPath = (0, react_1.useMemo)(() => [...jsonPath, index], [index, jsonPath]);
-    const onSave = (0, react_1.useCallback)((updater) => {
-        onSaveObject((oldV) => [
-            ...oldV.slice(0, index),
-            updater(oldV[index]),
-            ...oldV.slice(index + 1),
-        ], false, false);
-    }, [index, onSaveObject]);
-    return (jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx(ZodSwitch_1.ZodSwitch, { jsonPath: newJsonPath, schema: elementSchema, value: value, setValue: setValue, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: mayRemove ? onRemove : null, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }) }));
+    return (jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx(ZodSwitch_1.ZodSwitch, { jsonPath: newJsonPath, schema: elementSchema, value: value, setValue: setValue, onRemove: mayRemove ? onRemove : null, mayPad: mayPad }) }));
 };
 exports.ZodArrayItemEditor = ZodArrayItemEditor;

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

@@ -1,17 +1,10 @@
 import React from 'react';
-import type { AnyZodSchema } from './zod-schema-type';
 import type { JSONPath } from './zod-types';
 import type { UpdaterFunction } from './ZodSwitch';
 export declare const ZodBooleanEditor: React.FC<{
-    readonly schema: AnyZodSchema;
     readonly jsonPath: JSONPath;
     readonly value: boolean;
     readonly setValue: UpdaterFunction<boolean>;
-    readonly defaultValue: boolean;
-    readonly onSave: UpdaterFunction<boolean>;
     readonly onRemove: null | (() => void);
-    readonly showSaveButton: boolean;
-    readonly saving: boolean;
-    readonly saveDisabledByParent: boolean;
     readonly mayPad: boolean;
 }>;

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

@@ -5,26 +5,16 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Checkbox_1 = require("../../Checkbox");
 const Fieldset_1 = require("./Fieldset");
-const local_state_1 = require("./local-state");
 const SchemaLabel_1 = require("./SchemaLabel");
 const fullWidth = {
     width: '100%',
 };
-const ZodBooleanEditor = ({ schema, jsonPath, value, setValue, onSave, defaultValue, onRemove, showSaveButton, saving, saveDisabledByParent, mayPad, }) => {
-    const { localValue, onChange, reset } = (0, local_state_1.useLocalState)({
-        schema,
-        setValue,
-        unsavedValue: value,
-        savedValue: defaultValue,
-    });
+const ZodBooleanEditor = ({ jsonPath, value, setValue, onRemove, mayPad }) => {
     const onToggle = (0, react_1.useCallback)((e) => {
-        onChange(() => e.target.checked, false, false);
-    }, [onChange]);
-    const save = (0, react_1.useCallback)(() => {
-        onSave(() => value, false, false);
-    }, [onSave, value]);
-    return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: mayPad, success: localValue.zodValidation.success, children: [
-            jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, isDefaultValue: localValue.value === defaultValue, jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, valid: true, saveDisabledByParent: saveDisabledByParent, suffix: null }), jsx_runtime_1.jsx("div", { style: fullWidth, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { name: jsonPath.join('.'), checked: localValue.value, onChange: onToggle, disabled: false }) })
+        setValue(() => e.target.checked, { shouldSave: true });
+    }, [setValue]);
+    return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: mayPad, children: [
+            jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: jsonPath, onRemove: onRemove, valid: true, suffix: null }), jsx_runtime_1.jsx("div", { style: fullWidth, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { name: jsonPath.join('.'), checked: value, onChange: onToggle, disabled: false }) })
         ] }));
 };
 exports.ZodBooleanEditor = ZodBooleanEditor;

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

@@ -1,17 +1,12 @@
 import React from 'react';
-import type { AnyZodSchema } from './zod-schema-type';
+import { type AnyZodSchema } from './zod-schema-type';
 import type { JSONPath } from './zod-types';
 import type { UpdaterFunction } from './ZodSwitch';
 export declare const ZodColorEditor: React.FC<{
     readonly schema: AnyZodSchema;
     readonly jsonPath: JSONPath;
     readonly value: string;
-    readonly defaultValue: string;
     readonly setValue: UpdaterFunction<string>;
-    readonly onSave: UpdaterFunction<string>;
     readonly onRemove: null | (() => void);
-    readonly showSaveButton: boolean;
-    readonly saving: boolean;
-    readonly saveDisabledByParent: boolean;
     readonly mayPad: boolean;
 }>;

package/dist/components/RenderModal/SchemaEditor/ZodColorEditor.js

@@ -10,13 +10,13 @@ const InputDragger_1 = require("../../NewComposition/InputDragger");
 const RemInput_1 = require("../../NewComposition/RemInput");
 const RemInputTypeColor_1 = require("../../NewComposition/RemInputTypeColor");
 const Fieldset_1 = require("./Fieldset");
-const local_state_1 = require("./local-state");
 const SchemaLabel_1 = require("./SchemaLabel");
+const zod_schema_type_1 = require("./zod-schema-type");
 const ZodFieldValidation_1 = require("./ZodFieldValidation");
 const fullWidth = {
     width: '100%',
 };
-const ZodColorEditor = ({ jsonPath, value, setValue, showSaveButton, defaultValue, schema, onSave, onRemove, saving, saveDisabledByParent, mayPad, }) => {
+const ZodColorEditor = ({ jsonPath, value, setValue, schema, onRemove, mayPad }) => {
     const z = (0, get_zod_if_possible_1.useZodIfPossible)();
     if (!z) {
         throw new Error('expected zod');
@@ -25,30 +25,28 @@ const ZodColorEditor = ({ jsonPath, value, setValue, showSaveButton, defaultValu
     if (!zodTypes) {
         throw new Error('expected zod color');
     }
-    const { localValue, onChange: onValueChange, reset, } = (0, local_state_1.useLocalState)({
-        schema,
-        setValue,
-        unsavedValue: value,
-        savedValue: defaultValue,
-    });
-    const { a, b, g, r } = localValue.zodValidation.success
-        ? zodTypes.ZodZypesInternals.parseColor(localValue.value)
+    const localValue = (0, react_1.useMemo)(() => (0, zod_schema_type_1.zodSafeParse)(schema, value), [schema, value]);
+    const { a, b, g, r } = localValue.success
+        ? zodTypes.ZodZypesInternals.parseColor(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);
-        onValueChange(() => newColor, false, false);
-    }, [a, onValueChange, zodTypes]);
+        setValue(() => newColor, { shouldSave: false });
+    }, [a, setValue, zodTypes]);
+    const onColorBlur = (0, react_1.useCallback)(() => {
+        setValue(() => value, { shouldSave: true });
+    }, [setValue, value]);
     const onTextChange = (0, react_1.useCallback)((e) => {
         const newValue = e.target.value;
-        onValueChange(() => newValue, false, false);
-    }, [onValueChange]);
-    const save = (0, react_1.useCallback)(() => {
-        onSave(() => value, false, false);
-    }, [onSave, value]);
+        setValue(() => newValue, { shouldSave: false });
+    }, [setValue]);
+    const onTextBlur = (0, react_1.useCallback)(() => {
+        setValue(() => value, { shouldSave: true });
+    }, [setValue, value]);
     const rgb = `#${r.toString(16).padStart(2, '0')}${g
         .toString(16)
         .padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
-    const status = localValue.zodValidation.success ? 'ok' : 'error';
+    const status = localValue.success ? 'ok' : 'error';
     const colorPicker = (0, react_1.useMemo)(() => {
         return {
             height: 39,
@@ -57,20 +55,24 @@ 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);
-        onValueChange(() => newColor, false, false);
-    }, [localValue.value, onValueChange, zodTypes]);
+        const newColor = (0, color_math_1.colorWithNewOpacity)(value, Math.round((Number(newValue) / 100) * 255), zodTypes);
+        setValue(() => newColor, { shouldSave: true });
+    }, [setValue, value, zodTypes]);
     const onOpacityValueChange = (0, react_1.useCallback)((newValue) => {
-        const newColor = (0, color_math_1.colorWithNewOpacity)(localValue.value, Math.round((Number(newValue) / 100) * 255), zodTypes);
-        onValueChange(() => newColor, false, false);
-    }, [localValue.value, onValueChange, zodTypes]);
-    return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: mayPad, success: localValue.zodValidation.success, children: [
-            jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, isDefaultValue: localValue.value === defaultValue, jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, valid: localValue.zodValidation.success, saveDisabledByParent: saveDisabledByParent, suffix: null }), jsx_runtime_1.jsxs("div", { style: fullWidth, children: [
+        const newColor = (0, color_math_1.colorWithNewOpacity)(value, Math.round((Number(newValue) / 100) * 255), zodTypes);
+        setValue(() => newColor, { shouldSave: false });
+    }, [setValue, value, zodTypes]);
+    const onOpacityValueChangeEnd = (0, react_1.useCallback)((newValue) => {
+        const newColor = (0, color_math_1.colorWithNewOpacity)(value, Math.round((Number(newValue) / 100) * 255), zodTypes);
+        setValue(() => newColor, { shouldSave: true });
+    }, [setValue, value, zodTypes]);
+    return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: mayPad, children: [
+            jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: jsonPath, onRemove: onRemove, valid: localValue.success, suffix: null }), jsx_runtime_1.jsxs("div", { style: fullWidth, children: [
                     jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
                             jsx_runtime_1.jsx("div", { style: colorPicker, children: jsx_runtime_1.jsx(RemInputTypeColor_1.RemInputTypeColor, { type: "color", style: {
                                         height: 39,
-                                    }, value: rgb, onChange: onChange, className: "__remotion_color_picker", status: status, name: jsonPath.join('.') }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1, block: true }), jsx_runtime_1.jsx(RemInput_1.RemotionInput, { value: localValue.value, status: status, placeholder: jsonPath.join('.'), onChange: onTextChange, rightAlign: false }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), 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 })
-                        ] }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, localValue: localValue })
+                                    }, value: rgb, onChange: onChange, onBlur: onColorBlur, className: "__remotion_color_picker", status: status, name: jsonPath.join('.') }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1, block: true }), jsx_runtime_1.jsx(RemInput_1.RemotionInput, { value: value, status: status, placeholder: jsonPath.join('.'), onChange: onTextChange, onBlur: onTextBlur, rightAlign: false }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { onTextChange: onOpacityChange, onValueChange: onOpacityValueChange, onValueChangeEnd: onOpacityValueChangeEnd, status: status, value: (a / 255) * 100, min: 0, max: 100, step: 1, formatter: (v) => `${Math.round(Number(v))}%`, rightAlign: false })
+                        ] }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, zodValidation: localValue })
                 ] })
         ] }));
 };

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

@@ -1,17 +1,12 @@
 import React from 'react';
-import type { AnyZodSchema } from './zod-schema-type';
+import { type AnyZodSchema } from './zod-schema-type';
 import type { JSONPath } from './zod-types';
 import type { UpdaterFunction } from './ZodSwitch';
 export declare const ZodDateEditor: React.FC<{
     readonly schema: AnyZodSchema;
     readonly jsonPath: JSONPath;
     readonly value: Date;
-    readonly defaultValue: Date;
     readonly setValue: UpdaterFunction<Date>;
-    readonly onSave: UpdaterFunction<Date>;
     readonly onRemove: null | (() => void);
-    readonly showSaveButton: boolean;
-    readonly saving: boolean;
-    readonly saveDisabledByParent: boolean;
     readonly mayPad: boolean;
 }>;

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

@@ -3,12 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ZodDateEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const react_2 = require("react");
 const colors_1 = require("../../../helpers/colors");
 const layout_1 = require("../../layout");
 const RemInput_1 = require("../../NewComposition/RemInput");
 const Fieldset_1 = require("./Fieldset");
-const local_state_1 = require("./local-state");
 const SchemaLabel_1 = require("./SchemaLabel");
+const zod_schema_type_1 = require("./zod-schema-type");
 const ZodFieldValidation_1 = require("./ZodFieldValidation");
 const fullWidth = {
     width: '100%',
@@ -43,23 +44,18 @@ const formatDate = (date) => {
         .padStart(3, '0')}`;
     return formattedDate;
 };
-const ZodDateEditor = ({ jsonPath, value, setValue, showSaveButton, defaultValue, schema, onSave, onRemove, saving, saveDisabledByParent, mayPad, }) => {
-    const { localValue, onChange: setLocalValue, reset, } = (0, local_state_1.useLocalState)({
-        schema,
-        setValue,
-        unsavedValue: value,
-        savedValue: defaultValue,
-    });
-    const onChange = (0, react_1.useCallback)((e) => {
+const ZodDateEditor = ({ jsonPath, value, setValue, schema, onRemove, mayPad }) => {
+    const onChange = (0, react_2.useCallback)((e) => {
         // React does not support e.target.valueAsDate :(
-        setLocalValue(() => new Date(e.target.value), false, false);
-    }, [setLocalValue]);
-    const save = (0, react_1.useCallback)(() => {
-        onSave(() => value, false, false);
-    }, [onSave, value]);
-    return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: mayPad, success: localValue.zodValidation.success, children: [
-            jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, isDefaultValue: localValue.value.getTime() === defaultValue.getTime(), jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, valid: localValue.zodValidation.success, saveDisabledByParent: saveDisabledByParent, suffix: null }), jsx_runtime_1.jsxs("div", { style: fullWidth, children: [
-                    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 }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx("div", { style: explainer, children: "Date is in local format" }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, localValue: localValue })
+        setValue(() => new Date(e.target.value), { shouldSave: false });
+    }, [setValue]);
+    const onBlur = (0, react_2.useCallback)(() => {
+        setValue((v) => v, { shouldSave: true });
+    }, [setValue]);
+    const zodValidation = (0, react_1.useMemo)(() => (0, zod_schema_type_1.zodSafeParse)(schema, value), [schema, value]);
+    return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: mayPad, children: [
+            jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: jsonPath, onRemove: onRemove, valid: zodValidation.success, suffix: null }), jsx_runtime_1.jsxs("div", { style: fullWidth, children: [
+                    jsx_runtime_1.jsx(RemInput_1.RemotionInput, { value: formatDate(value), type: "datetime-local", status: zodValidation.success ? 'ok' : 'error', placeholder: jsonPath.join('.'), onChange: onChange, onBlur: onBlur, style: inputStyle, rightAlign: false }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx("div", { style: explainer, children: "Date is in local format" }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, zodValidation: zodValidation })
                 ] })
         ] }));
 };

package/dist/components/RenderModal/SchemaEditor/ZodDefaultEditor.d.ts

@@ -3,15 +3,10 @@ import type { AnyZodSchema } from './zod-schema-type';
 import type { JSONPath } from './zod-types';
 import type { UpdaterFunction } from './ZodSwitch';
 export declare const ZodDefaultEditor: React.FC<{
-    readonly showSaveButton: boolean;
     readonly jsonPath: JSONPath;
     readonly value: unknown;
-    readonly defaultValue: unknown;
     readonly schema: AnyZodSchema;
     readonly setValue: UpdaterFunction<unknown>;
-    readonly onSave: UpdaterFunction<unknown>;
     readonly onRemove: null | (() => void);
-    readonly saving: boolean;
-    readonly saveDisabledByParent: boolean;
     readonly mayPad: boolean;
 }>;

package/dist/components/RenderModal/SchemaEditor/ZodDefaultEditor.js

@@ -4,8 +4,8 @@ exports.ZodDefaultEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const zod_schema_type_1 = require("./zod-schema-type");
 const ZodSwitch_1 = require("./ZodSwitch");
-const ZodDefaultEditor = ({ jsonPath, schema, setValue, onSave, defaultValue, value, showSaveButton, onRemove, saving, saveDisabledByParent, mayPad, }) => {
+const ZodDefaultEditor = ({ jsonPath, schema, setValue, value, onRemove, mayPad }) => {
     const innerType = (0, zod_schema_type_1.getInnerType)(schema);
-    return (jsx_runtime_1.jsx(ZodSwitch_1.ZodSwitch, { defaultValue: defaultValue, jsonPath: jsonPath, onRemove: onRemove, onSave: onSave, schema: innerType, setValue: setValue, showSaveButton: showSaveButton, value: value, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }));
+    return (jsx_runtime_1.jsx(ZodSwitch_1.ZodSwitch, { jsonPath: jsonPath, onRemove: onRemove, schema: innerType, setValue: setValue, value: value, mayPad: mayPad }));
 };
 exports.ZodDefaultEditor = ZodDefaultEditor;

package/dist/components/RenderModal/SchemaEditor/ZodDiscriminatedUnionEditor.d.ts

@@ -1,16 +1,11 @@
-import type { AnyZodSchema } from './zod-schema-type';
+import { type AnyZodSchema } from './zod-schema-type';
 import type { JSONPath } from './zod-types';
 import type { UpdaterFunction } from './ZodSwitch';
 export declare const ZodDiscriminatedUnionEditor: React.FC<{
     schema: AnyZodSchema;
     setValue: UpdaterFunction<Record<string, unknown>>;
     value: Record<string, unknown>;
-    defaultValue: Record<string, unknown>;
     mayPad: boolean;
     jsonPath: JSONPath;
     onRemove: null | (() => void);
-    onSave: UpdaterFunction<unknown>;
-    showSaveButton: boolean;
-    saving: boolean;
-    saveDisabledByParent: boolean;
 }>;

package/dist/components/RenderModal/SchemaEditor/ZodDiscriminatedUnionEditor.js

@@ -8,24 +8,18 @@ const get_zod_if_possible_1 = require("../../get-zod-if-possible");
 const ComboBox_1 = require("../../NewComposition/ComboBox");
 const create_zod_values_1 = require("./create-zod-values");
 const Fieldset_1 = require("./Fieldset");
-const local_state_1 = require("./local-state");
 const SchemaLabel_1 = require("./SchemaLabel");
 const zod_schema_type_1 = require("./zod-schema-type");
+const zod_schema_type_2 = require("./zod-schema-type");
 const ZodObjectEditor_1 = require("./ZodObjectEditor");
-const ZodDiscriminatedUnionEditor = ({ schema, setValue, showSaveButton, saving, value, defaultValue, saveDisabledByParent, onSave, mayPad, jsonPath, onRemove, }) => {
+const ZodDiscriminatedUnionEditor = ({ schema, setValue, value, mayPad, jsonPath, onRemove }) => {
     const z = (0, get_zod_if_possible_1.useZodIfPossible)();
     if (!z) {
         throw new Error('expected zod');
     }
     const zodTypes = (0, get_zod_if_possible_1.useZodTypesIfPossible)();
-    const discriminator = (0, zod_schema_type_1.getDiscriminator)(schema);
-    const options = (0, react_1.useMemo)(() => (0, zod_schema_type_1.getDiscriminatedOptionKeys)(schema), [schema]);
-    const { localValue, onChange: setLocalValue, reset, } = (0, local_state_1.useLocalState)({
-        schema,
-        setValue,
-        unsavedValue: value,
-        savedValue: defaultValue,
-    });
+    const discriminator = (0, zod_schema_type_2.getDiscriminator)(schema);
+    const options = (0, react_1.useMemo)(() => (0, zod_schema_type_2.getDiscriminatedOptionKeys)(schema), [schema]);
     const comboBoxValues = (0, react_1.useMemo)(() => {
         return options.map((option) => {
             return {
@@ -35,51 +29,42 @@ const ZodDiscriminatedUnionEditor = ({ schema, setValue, showSaveButton, saving,
                 keyHint: null,
                 leftItem: option === value[discriminator] ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
                 onClick: () => {
-                    const optionSchema = (0, zod_schema_type_1.getDiscriminatedOption)(schema, option);
+                    const optionSchema = (0, zod_schema_type_2.getDiscriminatedOption)(schema, option);
                     if (!optionSchema) {
                         throw new Error(`No schema found for discriminator value: ${option}`);
                     }
                     const val = (0, create_zod_values_1.createZodValues)(optionSchema, z, zodTypes);
-                    setLocalValue(() => val, false, false);
+                    setValue(() => val, { shouldSave: true });
                 },
                 quickSwitcherLabel: null,
                 subMenu: null,
                 type: 'item',
             };
         });
-    }, [options, setLocalValue, discriminator, schema, value, z, zodTypes]);
-    const save = (0, react_1.useCallback)(() => {
-        onSave(() => value, false, false);
-    }, [onSave, value]);
+    }, [options, setValue, discriminator, schema, value, z, zodTypes]);
+    const zodValidation = (0, react_1.useMemo)(() => (0, zod_schema_type_1.zodSafeParse)(schema, value), [schema, value]);
     const discriminatedUnionReplacement = (0, react_1.useMemo)(() => {
         return {
             discriminator,
-            markup: (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: mayPad, success: true, children: [
-                    jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, isDefaultValue: localValue.value[discriminator] === defaultValue[discriminator], jsonPath: [...jsonPath, discriminator], onRemove: onRemove, onReset: reset, onSave: save, saveDisabledByParent: saveDisabledByParent, saving: saving, showSaveButton: showSaveButton, suffix: null, valid: localValue.zodValidation.success }), jsx_runtime_1.jsx(ComboBox_1.Combobox, { title: "Select type", values: comboBoxValues, selectedId: value[discriminator] })
+            markup: (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: mayPad, children: [
+                    jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: [...jsonPath, discriminator], onRemove: onRemove, suffix: null, valid: zodValidation.success }), jsx_runtime_1.jsx(ComboBox_1.Combobox, { title: "Select type", values: comboBoxValues, selectedId: value[discriminator] })
                 ] }, 'replacement')),
         };
     }, [
         comboBoxValues,
-        defaultValue,
         jsonPath,
-        localValue.value,
-        localValue.zodValidation.success,
         mayPad,
         onRemove,
-        reset,
-        save,
-        saveDisabledByParent,
-        saving,
-        showSaveButton,
         discriminator,
         value,
+        zodValidation.success,
     ]);
-    const currentOptionSchema = (0, zod_schema_type_1.getDiscriminatedOption)(schema, value[discriminator]);
+    const currentOptionSchema = (0, zod_schema_type_2.getDiscriminatedOption)(schema, value[discriminator]);
     if (!currentOptionSchema) {
         throw new Error('No matching option found for discriminated union');
     }
     return (jsx_runtime_1.jsx(ZodObjectEditor_1.ZodObjectEditor
     // Re-render the object editor when the discriminator changes
-    , { jsonPath: jsonPath, mayPad: mayPad, savedValue: defaultValue, onRemove: onRemove, onSave: onSave, saveDisabledByParent: saveDisabledByParent, saving: saving, schema: currentOptionSchema, setValue: setLocalValue, showSaveButton: showSaveButton, unsavedValue: value, discriminatedUnionReplacement: discriminatedUnionReplacement }, value[discriminator]));
+    , { jsonPath: jsonPath, mayPad: mayPad, onRemove: onRemove, schema: currentOptionSchema, setValue: setValue, value: value, discriminatedUnionReplacement: discriminatedUnionReplacement }, value[discriminator]));
 };
 exports.ZodDiscriminatedUnionEditor = ZodDiscriminatedUnionEditor;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { AnyZodSchema } from './zod-schema-type';
+import { type AnyZodSchema } from './zod-schema-type';
 import type { JSONPath } from './zod-types';
 import type { UpdaterFunction } from './ZodSwitch';
 export declare const ZodEffectEditor: React.FC<{
@@ -7,10 +7,6 @@ export declare const ZodEffectEditor: React.FC<{
     readonly jsonPath: JSONPath;
     readonly value: unknown;
     readonly setValue: UpdaterFunction<unknown>;
-    readonly defaultValue: unknown;
-    readonly onSave: UpdaterFunction<unknown>;
-    readonly showSaveButton: boolean;
     readonly onRemove: null | (() => void);
-    readonly saving: boolean;
     readonly mayPad: boolean;
 }>;

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

@@ -2,28 +2,27 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ZodEffectEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const Fieldset_1 = require("./Fieldset");
-const local_state_1 = require("./local-state");
 const zod_schema_type_1 = require("./zod-schema-type");
+const zod_schema_type_2 = require("./zod-schema-type");
 const ZodFieldValidation_1 = require("./ZodFieldValidation");
 const ZodSwitch_1 = require("./ZodSwitch");
 const fullWidth = {
     width: '100%',
 };
-const ZodEffectEditor = ({ schema, jsonPath, value, setValue: updateValue, defaultValue, onSave, onRemove, showSaveButton, saving, mayPad, }) => {
-    const typeName = (0, zod_schema_type_1.getZodSchemaType)(schema);
+const ZodEffectEditor = ({ schema, jsonPath, value, setValue: updateValue, onRemove, mayPad }) => {
+    const typeName = (0, zod_schema_type_2.getZodSchemaType)(schema);
     if (typeName !== 'effects') {
         throw new Error('expected effect');
     }
-    const { localValue, onChange } = (0, local_state_1.useLocalState)({
-        unsavedValue: value,
-        schema,
-        setValue: updateValue,
-        savedValue: defaultValue,
-    });
-    const innerSchema = (0, zod_schema_type_1.getEffectsInner)(schema);
-    return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: mayPad, success: localValue.zodValidation.success, children: [
-            jsx_runtime_1.jsx("div", { style: fullWidth, children: jsx_runtime_1.jsx(ZodSwitch_1.ZodSwitch, { value: value, setValue: onChange, jsonPath: jsonPath, schema: innerSchema, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: !localValue.zodValidation.success, mayPad: false }) }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, localValue: localValue })
+    const onChange = (0, react_1.useCallback)((updater, { shouldSave }) => {
+        updateValue(updater, { shouldSave });
+    }, [updateValue]);
+    const zodValidation = (0, react_1.useMemo)(() => (0, zod_schema_type_1.zodSafeParse)(schema, value), [schema, value]);
+    const innerSchema = (0, zod_schema_type_2.getEffectsInner)(schema);
+    return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: mayPad, children: [
+            jsx_runtime_1.jsx("div", { style: fullWidth, children: jsx_runtime_1.jsx(ZodSwitch_1.ZodSwitch, { value: value, setValue: onChange, jsonPath: jsonPath, schema: innerSchema, onRemove: onRemove, mayPad: false }) }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, zodValidation: zodValidation })
         ] }));
 };
 exports.ZodEffectEditor = ZodEffectEditor;

package/dist/components/RenderModal/SchemaEditor/ZodEnumEditor.d.ts

@@ -1,15 +1,11 @@
 import React from 'react';
-import type { AnyZodSchema } from './zod-schema-type';
+import { type AnyZodSchema } from './zod-schema-type';
 import type { JSONPath } from './zod-types';
 import type { UpdaterFunction } from './ZodSwitch';
 export declare const ZodEnumEditor: React.FC<{
     readonly schema: AnyZodSchema;
     readonly jsonPath: JSONPath;
     readonly value: string;
-    readonly defaultValue: string;
     readonly setValue: UpdaterFunction<string>;
-    readonly onSave: UpdaterFunction<string>;
-    readonly showSaveButton: boolean;
     readonly onRemove: null | (() => void);
-    readonly saving: boolean;
 }>;

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

@@ -3,24 +3,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ZodEnumEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const react_2 = require("react");
 const Checkmark_1 = require("../../../icons/Checkmark");
 const ComboBox_1 = require("../../NewComposition/ComboBox");
 const Fieldset_1 = require("./Fieldset");
-const local_state_1 = require("./local-state");
 const SchemaLabel_1 = require("./SchemaLabel");
 const zod_schema_type_1 = require("./zod-schema-type");
+const zod_schema_type_2 = require("./zod-schema-type");
 const ZodFieldValidation_1 = require("./ZodFieldValidation");
 const container = {
     width: '100%',
 };
-const ZodEnumEditor = ({ schema, jsonPath, setValue, defaultValue, value, onSave, showSaveButton, onRemove, saving, }) => {
-    const { localValue, onChange: setLocalValue, reset, } = (0, local_state_1.useLocalState)({
-        schema,
-        setValue,
-        unsavedValue: value,
-        savedValue: defaultValue,
-    });
-    const enumValues = (0, zod_schema_type_1.getEnumValues)(schema);
+const ZodEnumEditor = ({ schema, jsonPath, setValue, value, onRemove }) => {
+    const onChange = (0, react_2.useCallback)((updater, { shouldSave }) => {
+        setValue(updater, { shouldSave });
+    }, [setValue]);
+    const enumValues = (0, zod_schema_type_2.getEnumValues)(schema);
     const isRoot = jsonPath.length === 0;
     const comboBoxValues = (0, react_1.useMemo)(() => {
         return enumValues.map((option) => {
@@ -31,19 +29,17 @@ const ZodEnumEditor = ({ schema, jsonPath, setValue, defaultValue, value, onSave
                 keyHint: null,
                 leftItem: option === value ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
                 onClick: (id) => {
-                    setLocalValue(() => id, false, false);
+                    onChange(() => id, { shouldSave: true });
                 },
                 quickSwitcherLabel: null,
                 subMenu: null,
                 type: 'item',
             };
         });
-    }, [enumValues, setLocalValue, value]);
-    const save = (0, react_1.useCallback)(() => {
-        onSave(() => value, false, false);
-    }, [onSave, value]);
-    return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: true, success: localValue.zodValidation.success, children: [
-            jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, onSave: save, showSaveButton: showSaveButton, isDefaultValue: localValue.value === defaultValue, onReset: reset, jsonPath: jsonPath, onRemove: onRemove, saving: saving, valid: localValue.zodValidation.success, saveDisabledByParent: !localValue.zodValidation.success, suffix: null }), jsx_runtime_1.jsx("div", { style: isRoot ? undefined : container, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: comboBoxValues, selectedId: value, title: value }) }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, localValue: localValue })
+    }, [enumValues, onChange, value]);
+    const zodValidation = (0, react_1.useMemo)(() => (0, zod_schema_type_1.zodSafeParse)(schema, value), [schema, value]);
+    return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: true, children: [
+            jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: jsonPath, onRemove: onRemove, valid: zodValidation.success, suffix: null }), jsx_runtime_1.jsx("div", { style: isRoot ? undefined : container, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: comboBoxValues, selectedId: value, title: value }) }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, zodValidation: zodValidation })
         ] }));
 };
 exports.ZodEnumEditor = ZodEnumEditor;

package/dist/components/RenderModal/SchemaEditor/ZodFieldValidation.d.ts

@@ -1,6 +1,6 @@
-import type { LocalState } from './local-state';
+import type { ZodSafeParseResult } from './zod-schema-type';
 import type { JSONPath } from './zod-types';
 export declare const ZodFieldValidation: React.FC<{
-    localValue: LocalState<unknown>;
+    zodValidation: ZodSafeParseResult;
     path: JSONPath;
 }>;

package/dist/components/RenderModal/SchemaEditor/ZodFieldValidation.js

@@ -16,8 +16,7 @@ const stackTrace = {
 const stackTraceLabel = {
     fontSize: 14,
 };
-const ZodFieldValidation = ({ localValue, path }) => {
-    const { zodValidation } = localValue;
+const ZodFieldValidation = ({ zodValidation, path }) => {
     if (zodValidation.success) {
         return null;
     }

package/dist/components/RenderModal/SchemaEditor/ZodMatrixEditor.d.ts

@@ -1,17 +1,12 @@
 import React from 'react';
-import type { AnyZodSchema } from './zod-schema-type';
+import { type AnyZodSchema } from './zod-schema-type';
 import type { JSONPath } from './zod-types';
 import type { UpdaterFunction } from './ZodSwitch';
 export declare const ZodMatrixEditor: React.FC<{
     readonly schema: AnyZodSchema;
     readonly jsonPath: JSONPath;
     readonly value: unknown[];
-    readonly defaultValue: unknown[];
     readonly setValue: UpdaterFunction<unknown[]>;
-    readonly onSave: UpdaterFunction<unknown[]>;
-    readonly showSaveButton: boolean;
     readonly onRemove: null | (() => void);
-    readonly saving: boolean;
-    readonly saveDisabledByParent: boolean;
     readonly mayPad: boolean;
 }>;