@remotion/studio 4.0.438 → 4.0.440

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

@@ -36,15 +36,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ZodMatrixEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
+const react_2 = require("react");
 const get_zod_if_possible_1 = require("../../get-zod-if-possible");
-const create_zod_values_1 = require("./create-zod-values");
-const deep_equal_1 = require("./deep-equal");
 const Fieldset_1 = require("./Fieldset");
-const local_state_1 = require("./local-state");
 const SchemaLabel_1 = require("./SchemaLabel");
 const SchemaSeparationLine_1 = require("./SchemaSeparationLine");
 const SchemaVerticalGuide_1 = require("./SchemaVerticalGuide");
 const zod_schema_type_1 = require("./zod-schema-type");
+const zod_schema_type_2 = require("./zod-schema-type");
 const ZodArrayItemEditor_1 = require("./ZodArrayItemEditor");
 const ZodFieldValidation_1 = require("./ZodFieldValidation");
 const rowStyle = {
@@ -52,15 +51,13 @@ const rowStyle = {
     flexDirection: 'row',
     width: '100%',
 };
-const ZodMatrixEditor = ({ schema, jsonPath, setValue, defaultValue, value, onSave, showSaveButton, onRemove, saving, saveDisabledByParent, mayPad, }) => {
-    const { localValue, onChange, RevisionContextProvider, reset } = (0, local_state_1.useLocalState)({
-        unsavedValue: value,
-        schema,
-        setValue,
-        savedValue: defaultValue,
-    });
+const ZodMatrixEditor = ({ schema, jsonPath, setValue, value, onRemove, mayPad }) => {
+    const onChange = (0, react_2.useCallback)((updater, { shouldSave }) => {
+        setValue(updater, { shouldSave });
+    }, [setValue]);
+    const zodValidation = (0, react_1.useMemo)(() => (0, zod_schema_type_1.zodSafeParse)(schema, value), [schema, value]);
     const [expanded, setExpanded] = (0, react_1.useState)(true);
-    const arrayElement = (0, zod_schema_type_1.getArrayElement)(schema);
+    const arrayElement = (0, zod_schema_type_2.getArrayElement)(schema);
     const suffix = (0, react_1.useMemo)(() => {
         return expanded ? ' [' : ' [...] ';
     }, [expanded]);
@@ -68,34 +65,27 @@ const ZodMatrixEditor = ({ schema, jsonPath, setValue, defaultValue, value, onSa
     if (!z) {
         throw new Error('expected zod');
     }
-    const zodTypes = (0, get_zod_if_possible_1.useZodTypesIfPossible)();
-    const isDefaultValue = (0, react_1.useMemo)(() => {
-        return (0, deep_equal_1.deepEqual)(localValue.value, defaultValue);
-    }, [defaultValue, localValue]);
-    const dimensions = Math.sqrt(localValue.value.length);
+    const dimensions = Math.sqrt(value.length);
     if (!Number.isInteger(dimensions)) {
         throw new Error('Invalid matrix');
     }
     const chunkedItems = (0, react_1.useMemo)(() => {
-        return localValue.value.reduce((acc, item, index) => {
+        return value.reduce((acc, item, index) => {
             const chunkIndex = Math.floor(index / dimensions);
             acc[chunkIndex] = acc[chunkIndex] || [];
             acc[chunkIndex].push(item);
             return acc;
         }, []);
-    }, [localValue.value, dimensions]);
-    return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: mayPad, success: localValue.zodValidation.success, children: [
-            jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { onReset: reset, isDefaultValue: isDefaultValue, jsonPath: jsonPath, onRemove: onRemove, suffix: suffix, onSave: () => {
-                    onSave(() => localValue.value, false, false);
-                }, saveDisabledByParent: saveDisabledByParent, saving: saving, showSaveButton: showSaveButton, valid: localValue.zodValidation.success, handleClick: () => setExpanded(!expanded) }), expanded ? (jsx_runtime_1.jsx(RevisionContextProvider, { children: jsx_runtime_1.jsxs(SchemaVerticalGuide_1.SchemaVerticalGuide, { isRoot: false, children: [chunkedItems.map((row, rowIndex) => {
-                            return (jsx_runtime_1.jsx(react_1.default.Fragment
-                            // eslint-disable-next-line react/no-array-index-key
-                            , { children: jsx_runtime_1.jsx("div", { style: rowStyle, children: row.map((item, _index) => {
-                                        var _a;
-                                        const actualIndex = rowIndex * dimensions + _index;
-                                        return (jsx_runtime_1.jsx("div", { style: { flex: 1 }, children: jsx_runtime_1.jsx(ZodArrayItemEditor_1.ZodArrayItemEditor, { onChange: onChange, value: item, elementSchema: arrayElement, index: actualIndex, jsonPath: jsonPath, defaultValue: (_a = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue[actualIndex]) !== null && _a !== void 0 ? _a : (0, create_zod_values_1.createZodValues)(arrayElement, z, zodTypes), onSave: onSave, showSaveButton: showSaveButton, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad, mayRemove: false }) }, `${_index}${localValue.keyStabilityRevision}`));
-                                    }) }) }, `${rowIndex}${localValue.keyStabilityRevision}`));
-                        }), value.length === 0 ? (jsx_runtime_1.jsx(SchemaSeparationLine_1.SchemaArrayItemSeparationLine, { schema: schema, index: 0, onChange: onChange, isLast: true, showAddButton: true })) : null] }) })) : null, jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, localValue: localValue })
+    }, [value, dimensions]);
+    return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: mayPad, children: [
+            jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { jsonPath: jsonPath, onRemove: onRemove, suffix: suffix, valid: zodValidation.success, handleClick: () => setExpanded(!expanded) }), expanded ? (jsx_runtime_1.jsxs(SchemaVerticalGuide_1.SchemaVerticalGuide, { isRoot: false, children: [chunkedItems.map((row, rowIndex) => {
+                        return (jsx_runtime_1.jsx(react_1.default.Fragment
+                        // eslint-disable-next-line react/no-array-index-key
+                        , { children: jsx_runtime_1.jsx("div", { style: rowStyle, children: row.map((item, _index) => {
+                                    const actualIndex = rowIndex * dimensions + _index;
+                                    return (jsx_runtime_1.jsx("div", { style: { flex: 1 }, children: jsx_runtime_1.jsx(ZodArrayItemEditor_1.ZodArrayItemEditor, { onChange: onChange, value: item, elementSchema: arrayElement, index: actualIndex, jsonPath: jsonPath, mayPad: mayPad, mayRemove: false }) }, _index));
+                                }) }) }, rowIndex));
+                    }), value.length === 0 ? (jsx_runtime_1.jsx(SchemaSeparationLine_1.SchemaArrayItemSeparationLine, { schema: schema, index: 0, onChange: onChange, isLast: true, showAddButton: true })) : null] })) : null, jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, zodValidation: zodValidation })
         ] }));
 };
 exports.ZodMatrixEditor = ZodMatrixEditor;

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

@@ -3,7 +3,5 @@ import type { JSONPath } from './zod-types';
 export declare const ZonNonEditableValue: React.FC<{
     readonly jsonPath: JSONPath;
     readonly label: string;
-    readonly showSaveButton: boolean;
-    readonly saving: boolean;
     readonly mayPad: boolean;
 }>;

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

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ZonNonEditableValue = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
 const colors_1 = require("../../../helpers/colors");
 const Fieldset_1 = require("./Fieldset");
 const SchemaLabel_1 = require("./SchemaLabel");
@@ -19,11 +18,9 @@ const wideEmptyLabel = {
     ...emptyLabel,
     lineHeight: '37px',
 };
-const ZonNonEditableValue = ({ jsonPath, label, showSaveButton, saving, mayPad }) => {
-    const save = (0, react_1.useCallback)(() => undefined, []);
-    const reset = (0, react_1.useCallback)(() => undefined, []);
-    return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: mayPad, success: true, children: [
-            jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, isDefaultValue: true, jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, onRemove: null, saving: saving, valid: true, saveDisabledByParent: true, suffix: null }), jsx_runtime_1.jsx("div", { style: fullWidth, children: jsx_runtime_1.jsx("em", { style: wideEmptyLabel, children: label }) })
+const ZonNonEditableValue = ({ jsonPath, label, mayPad }) => {
+    return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: mayPad, children: [
+            jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: jsonPath, onRemove: null, valid: true, suffix: null }), jsx_runtime_1.jsx("div", { style: fullWidth, children: jsx_runtime_1.jsx("em", { style: wideEmptyLabel, children: label }) })
         ] }));
 };
 exports.ZonNonEditableValue = ZonNonEditableValue;

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

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

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

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

package/dist/components/RenderModal/SchemaEditor/ZodNumberEditor.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 ZodNumberEditor: React.FC<{
@@ -7,11 +7,6 @@ export declare const ZodNumberEditor: React.FC<{
     readonly jsonPath: JSONPath;
     readonly value: number;
     readonly setValue: UpdaterFunction<number>;
-    readonly defaultValue: number;
-    readonly onSave: UpdaterFunction<number>;
     readonly onRemove: null | (() => void);
-    readonly showSaveButton: boolean;
-    readonly saving: boolean;
-    readonly saveDisabledByParent: boolean;
     readonly mayPad: boolean;
 }>;

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

@@ -3,35 +3,30 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ZodNumberEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const react_2 = require("react");
 const InputDragger_1 = require("../../NewComposition/InputDragger");
 const Fieldset_1 = require("./Fieldset");
-const local_state_1 = require("./local-state");
 const SchemaLabel_1 = require("./SchemaLabel");
 const zod_number_constraints_1 = require("./zod-number-constraints");
+const zod_schema_type_1 = require("./zod-schema-type");
 const ZodFieldValidation_1 = require("./ZodFieldValidation");
 const fullWidth = {
     width: '100%',
 };
-const ZodNumberEditor = ({ jsonPath, value, schema, setValue, onSave, defaultValue, onRemove, showSaveButton, saving, saveDisabledByParent, mayPad, }) => {
-    const { localValue, onChange: setLocalValue, reset, } = (0, local_state_1.useLocalState)({
-        unsavedValue: value,
-        schema,
-        setValue,
-        savedValue: defaultValue,
-    });
-    const onNumberChange = (0, react_1.useCallback)((newValue) => {
-        setLocalValue(() => newValue, false, false);
-    }, [setLocalValue]);
-    const isDefault = localValue.value === defaultValue;
-    const onTextChange = (0, react_1.useCallback)((newValue) => {
-        setLocalValue(() => Number(newValue), 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: isDefault, 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(InputDragger_1.InputDragger, { type: 'number', value: localValue.value, style: fullWidth, status: localValue.zodValidation.success ? 'ok' : 'error', placeholder: jsonPath.join('.'), onTextChange: onTextChange, onValueChange: onNumberChange, min: (0, zod_number_constraints_1.getZodNumberMinimum)(schema), max: (0, zod_number_constraints_1.getZodNumberMaximum)(schema), step: (0, zod_number_constraints_1.getZodNumberStep)(schema), rightAlign: false }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, localValue: localValue })
+const ZodNumberEditor = ({ jsonPath, value, schema, setValue, onRemove, mayPad }) => {
+    const onNumberChange = (0, react_2.useCallback)((newValue) => {
+        setValue(() => newValue, { shouldSave: false });
+    }, [setValue]);
+    const onNumberChangeEnd = (0, react_2.useCallback)((newValue) => {
+        setValue(() => newValue, { shouldSave: true });
+    }, [setValue]);
+    const onTextChange = (0, react_2.useCallback)((newValue) => {
+        setValue(() => Number(newValue), { 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(InputDragger_1.InputDragger, { type: 'number', value: value, style: fullWidth, status: zodValidation.success ? 'ok' : 'error', placeholder: jsonPath.join('.'), onTextChange: onTextChange, onValueChange: onNumberChange, onValueChangeEnd: onNumberChangeEnd, min: (0, zod_number_constraints_1.getZodNumberMinimum)(schema), max: (0, zod_number_constraints_1.getZodNumberMaximum)(schema), step: (0, zod_number_constraints_1.getZodNumberStep)(schema), rightAlign: false }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, zodValidation: zodValidation })
                 ] })
         ] }));
 };

package/dist/components/RenderModal/SchemaEditor/ZodObjectEditor.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 type ObjectDiscrimatedUnionReplacement = {
@@ -9,14 +9,9 @@ export type ObjectDiscrimatedUnionReplacement = {
 export declare const ZodObjectEditor: React.FC<{
     readonly schema: AnyZodSchema;
     readonly jsonPath: JSONPath;
-    readonly unsavedValue: Record<string, unknown>;
-    readonly savedValue: Record<string, unknown>;
+    readonly value: Record<string, unknown>;
     readonly setValue: UpdaterFunction<Record<string, unknown>>;
-    readonly onSave: UpdaterFunction<Record<string, unknown>>;
-    readonly showSaveButton: boolean;
     readonly onRemove: null | (() => void);
-    readonly saving: boolean;
-    readonly saveDisabledByParent: boolean;
     readonly mayPad: boolean;
     readonly discriminatedUnionReplacement: ObjectDiscrimatedUnionReplacement | null;
 }>;

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

@@ -35,68 +35,46 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ZodObjectEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
+const react_1 = require("react");
+const react_2 = __importStar(require("react"));
 const layout_1 = require("../layout");
-const deep_equal_1 = require("./deep-equal");
 const Fieldset_1 = require("./Fieldset");
-const local_state_1 = require("./local-state");
 const SchemaLabel_1 = require("./SchemaLabel");
 const SchemaSeparationLine_1 = require("./SchemaSeparationLine");
 const SchemaVerticalGuide_1 = require("./SchemaVerticalGuide");
 const zod_schema_type_1 = require("./zod-schema-type");
+const zod_schema_type_2 = require("./zod-schema-type");
 const ZodSwitch_1 = require("./ZodSwitch");
-const ZodObjectEditor = ({ schema, jsonPath, setValue, unsavedValue, savedValue, onSave, showSaveButton, onRemove, saving, saveDisabledByParent, mayPad, discriminatedUnionReplacement, }) => {
-    const [expanded, setExpanded] = (0, react_1.useState)(true);
-    const { localValue, onChange, RevisionContextProvider, reset } = (0, local_state_1.useLocalState)({
-        schema,
-        setValue,
-        unsavedValue,
-        savedValue,
-    });
-    const typeName = (0, zod_schema_type_1.getZodSchemaType)(schema);
+const ZodObjectEditor = ({ schema, jsonPath, setValue, value, onRemove, mayPad, discriminatedUnionReplacement, }) => {
+    const [expanded, setExpanded] = (0, react_2.useState)(true);
+    const onChange = (0, react_1.useCallback)((updater, { shouldSave }) => {
+        setValue(updater, { shouldSave });
+    }, [setValue]);
+    const typeName = (0, zod_schema_type_2.getZodSchemaType)(schema);
     if (typeName !== 'object') {
         throw new Error('expected object');
     }
-    const shape = (0, zod_schema_type_1.getObjectShape)(schema);
+    const shape = (0, zod_schema_type_2.getObjectShape)(schema);
     const keys = Object.keys(shape);
     const isRoot = jsonPath.length === 0;
-    const isDefaultValue = (0, react_1.useMemo)(() => {
-        return (0, deep_equal_1.deepEqual)(localValue.value, savedValue);
-    }, [savedValue, localValue]);
-    const suffix = (0, react_1.useMemo)(() => {
+    const suffix = (0, react_2.useMemo)(() => {
         return expanded ? ' {' : ' {...}';
     }, [expanded]);
-    return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: !isRoot && mayPad, success: localValue.zodValidation.success, children: [isRoot ? null : (jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { isDefaultValue: isDefaultValue, onReset: reset, jsonPath: jsonPath, onRemove: onRemove, suffix: suffix, onSave: () => {
-                    onSave(() => {
-                        return localValue.value;
-                    }, false, false);
-                }, saveDisabledByParent: saveDisabledByParent, saving: saving, showSaveButton: showSaveButton, valid: localValue.zodValidation.success, handleClick: () => setExpanded(!expanded) })), expanded ? (jsx_runtime_1.jsx(RevisionContextProvider, { children: jsx_runtime_1.jsx(SchemaVerticalGuide_1.SchemaVerticalGuide, { isRoot: isRoot, children: keys.map((key, i) => {
-                        if (discriminatedUnionReplacement &&
-                            key === discriminatedUnionReplacement.discriminator) {
-                            return discriminatedUnionReplacement.markup;
-                        }
-                        return (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [
-                                jsx_runtime_1.jsx(ZodSwitch_1.ZodSwitch, { mayPad: true, jsonPath: [...jsonPath, key], schema: shape[key], value: localValue.value[key], 
-                                    // In case of null | {a: string, b: string} type, we need to fallback to the default value
-                                    defaultValue: (savedValue !== null && savedValue !== void 0 ? savedValue : unsavedValue)[key], setValue: (val, forceApply) => {
-                                        onChange((oldVal) => {
-                                            return {
-                                                ...oldVal,
-                                                [key]: typeof val === 'function'
-                                                    ? val(oldVal[key])
-                                                    : val,
-                                            };
-                                        }, forceApply, false);
-                                    }, onSave: (val, forceApply) => {
-                                        onSave((oldVal) => {
-                                            return {
-                                                ...oldVal,
-                                                [key]: typeof val === 'function'
-                                                    ? val(oldVal[key])
-                                                    : val,
-                                            };
-                                        }, forceApply, false);
-                                    }, onRemove: null, showSaveButton: showSaveButton, saving: saving, saveDisabledByParent: saveDisabledByParent }), i === keys.length - 1 ? null : jsx_runtime_1.jsx(SchemaSeparationLine_1.SchemaSeparationLine, {})] }, key));
-                    }) }) })) : null, isRoot || !expanded ? null : jsx_runtime_1.jsx("div", { style: layout_1.fieldsetLabel, children: '}' })] }));
+    const zodValidation = (0, react_2.useMemo)(() => (0, zod_schema_type_1.zodSafeParse)(schema, value), [schema, value]);
+    return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: !isRoot && mayPad, children: [isRoot ? null : (jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { jsonPath: jsonPath, onRemove: onRemove, suffix: suffix, valid: zodValidation.success, handleClick: () => setExpanded(!expanded) })), expanded ? (jsx_runtime_1.jsx(SchemaVerticalGuide_1.SchemaVerticalGuide, { isRoot: isRoot, children: keys.map((key, i) => {
+                    if (discriminatedUnionReplacement &&
+                        key === discriminatedUnionReplacement.discriminator) {
+                        return discriminatedUnionReplacement.markup;
+                    }
+                    return (jsx_runtime_1.jsxs(react_2.default.Fragment, { children: [
+                            jsx_runtime_1.jsx(ZodSwitch_1.ZodSwitch, { mayPad: true, jsonPath: [...jsonPath, key], schema: shape[key], value: value[key], setValue: (val, { shouldSave }) => {
+                                    onChange((oldVal) => {
+                                        return {
+                                            ...oldVal,
+                                            [key]: typeof val === 'function' ? val(oldVal[key]) : val,
+                                        };
+                                    }, { shouldSave });
+                                }, onRemove: null }), i === keys.length - 1 ? null : jsx_runtime_1.jsx(SchemaSeparationLine_1.SchemaSeparationLine, {})] }, key));
+                }) })) : null, isRoot || !expanded ? null : jsx_runtime_1.jsx("div", { style: layout_1.fieldsetLabel, children: '}' })] }));
 };
 exports.ZodObjectEditor = ZodObjectEditor;

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

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

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

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

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

@@ -1,18 +1,13 @@
-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 ZodOrNullishEditor: React.FC<{
-    showSaveButton: boolean;
     jsonPath: JSONPath;
     value: unknown;
-    defaultValue: unknown;
     schema: AnyZodSchema;
     innerSchema: AnyZodSchema;
     setValue: UpdaterFunction<unknown>;
-    onSave: UpdaterFunction<unknown>;
     onRemove: null | (() => void);
     nullishValue: null | undefined;
-    saving: boolean;
-    saveDisabledByParent: boolean;
     mayPad: boolean;
 }>;

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

@@ -3,14 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ZodOrNullishEditor = 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 Checkbox_1 = require("../../Checkbox");
 const get_zod_if_possible_1 = require("../../get-zod-if-possible");
 const layout_1 = require("../../layout");
 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 ZodSwitch_1 = require("./ZodSwitch");
 const labelStyle = {
     fontFamily: 'sans-serif',
@@ -23,29 +24,21 @@ const checkBoxWrapper = {
     alignItems: 'center',
     marginTop: '5px',
 };
-const ZodOrNullishEditor = ({ jsonPath, schema, setValue, onSave, defaultValue, value, showSaveButton, onRemove, nullishValue, saving, saveDisabledByParent, mayPad, innerSchema, }) => {
+const ZodOrNullishEditor = ({ jsonPath, schema, setValue, value, onRemove, nullishValue, mayPad, innerSchema, }) => {
     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 isChecked = value === nullishValue;
-    const { localValue, onChange: setLocalValue, reset, } = (0, local_state_1.useLocalState)({
-        schema,
-        setValue,
-        unsavedValue: value,
-        savedValue: defaultValue,
-    });
-    const onCheckBoxChange = (0, react_1.useCallback)((e) => {
+    const zodValidation = (0, react_1.useMemo)(() => (0, zod_schema_type_1.zodSafeParse)(schema, value), [schema, value]);
+    const onCheckBoxChange = (0, react_2.useCallback)((e) => {
         const val = e.target.checked
             ? nullishValue
             : (0, create_zod_values_1.createZodValues)(innerSchema, z, zodTypes);
-        setLocalValue(() => val, false, false);
-    }, [innerSchema, nullishValue, setLocalValue, z, zodTypes]);
-    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: [localValue.value === nullishValue ? (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.jsx(ZodSwitch_1.ZodSwitch, { value: localValue.value, setValue: setLocalValue, jsonPath: jsonPath, schema: innerSchema, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: false })), jsx_runtime_1.jsxs("div", { style: checkBoxWrapper, children: [
+        setValue(() => val, { shouldSave: true });
+    }, [innerSchema, nullishValue, setValue, z, zodTypes]);
+    return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: mayPad, children: [value === nullishValue ? (jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: jsonPath, onRemove: onRemove, valid: zodValidation.success, suffix: null })) : (jsx_runtime_1.jsx(ZodSwitch_1.ZodSwitch, { value: value, setValue: setValue, jsonPath: jsonPath, schema: innerSchema, onRemove: onRemove, mayPad: false })), jsx_runtime_1.jsxs("div", { style: checkBoxWrapper, children: [
                     jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: isChecked, onChange: onCheckBoxChange, disabled: false, name: jsonPath.join('.') }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: labelStyle, children: String(nullishValue) })
                 ] })
         ] }));

package/dist/components/RenderModal/SchemaEditor/ZodStaticFileEditor.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 ZodStaticFileEditor: React.FC<{
     readonly schema: AnyZodSchema;
     readonly jsonPath: JSONPath;
     readonly value: string;
-    readonly defaultValue: string;
     readonly setValue: UpdaterFunction<string>;
-    readonly onSave: (updater: (oldState: string) => string) => void;
-    readonly showSaveButton: boolean;
     readonly onRemove: null | (() => void);
-    readonly saving: boolean;
-    readonly saveDisabledByParent: boolean;
     readonly mayPad: boolean;
 }>;

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

@@ -7,19 +7,17 @@ const Checkmark_1 = require("../../../icons/Checkmark");
 const ComboBox_1 = require("../../NewComposition/ComboBox");
 const use_static_files_1 = require("../../use-static-files");
 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 container = {
     width: '100%',
 };
-const ZodStaticFileEditor = ({ schema, jsonPath, setValue, defaultValue, value, onSave, showSaveButton, onRemove, saving, saveDisabledByParent, mayPad, }) => {
-    const { localValue, onChange: setLocalValue, reset, } = (0, local_state_1.useLocalState)({
-        schema,
-        setValue,
-        unsavedValue: value,
-        savedValue: defaultValue,
-    });
+const ZodStaticFileEditor = ({ schema, jsonPath, setValue, value, onRemove, mayPad }) => {
+    const onChange = (0, react_1.useCallback)((updater, { shouldSave }) => {
+        setValue(updater, { shouldSave });
+    }, [setValue]);
+    const zodValidation = (0, react_1.useMemo)(() => (0, zod_schema_type_1.zodSafeParse)(schema, value), [schema, value]);
     const isRoot = jsonPath.length === 0;
     const staticFiles = (0, use_static_files_1.useStaticFiles)();
     const comboBoxValues = (0, react_1.useMemo)(() => {
@@ -31,19 +29,16 @@ const ZodStaticFileEditor = ({ schema, jsonPath, setValue, defaultValue, value,
                 keyHint: null,
                 leftItem: option.src === 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',
             };
         });
-    }, [setLocalValue, staticFiles, value]);
-    const save = (0, react_1.useCallback)(() => {
-        onSave(() => value);
-    }, [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, onSave: save, showSaveButton: showSaveButton, isDefaultValue: localValue.value === defaultValue, onReset: reset, jsonPath: jsonPath, onRemove: onRemove, saving: saving, valid: localValue.zodValidation.success, saveDisabledByParent: saveDisabledByParent, suffix: null }), jsx_runtime_1.jsx("div", { style: isRoot ? undefined : container, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: comboBoxValues, selectedId: localValue.value, title: value }) }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, localValue: localValue })
+    }, [onChange, staticFiles, 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.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.ZodStaticFileEditor = ZodStaticFileEditor;

package/dist/components/RenderModal/SchemaEditor/ZodStringEditor.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 ZodStringEditor: 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/ZodStringEditor.js

@@ -3,35 +3,31 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ZodStringEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const react_2 = require("react");
 const get_zod_if_possible_1 = require("../../get-zod-if-possible");
 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%',
 };
-const ZodStringEditor = ({ jsonPath, value, setValue, showSaveButton, defaultValue, schema, onSave, onRemove, saving, saveDisabledByParent, mayPad, }) => {
+const ZodStringEditor = ({ jsonPath, value, setValue, schema, onRemove, mayPad }) => {
     const z = (0, get_zod_if_possible_1.useZodIfPossible)();
     if (!z) {
         throw new Error('expected zod');
     }
-    const { localValue, onChange: setLocalValue, reset, } = (0, local_state_1.useLocalState)({
-        schema,
-        setValue,
-        unsavedValue: value,
-        savedValue: defaultValue,
-    });
-    const onChange = (0, react_1.useCallback)((e) => {
-        setLocalValue(() => 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: false, 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: [
-                    jsx_runtime_1.jsx(RemInput_1.RemotionInput, { value: localValue.value, status: localValue.zodValidation ? 'ok' : 'error', placeholder: jsonPath.join('.'), onChange: onChange, rightAlign: false, name: jsonPath.join('.') }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, localValue: localValue })
+    const zodValidation = (0, react_1.useMemo)(() => (0, zod_schema_type_1.zodSafeParse)(schema, value), [schema, value]);
+    const onChange = (0, react_2.useCallback)((e) => {
+        setValue(() => e.target.value, { shouldSave: false });
+    }, [setValue]);
+    const onBlur = (0, react_2.useCallback)(() => {
+        setValue(() => value, { shouldSave: true });
+    }, [setValue, 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: value, status: zodValidation.success ? 'ok' : 'error', placeholder: jsonPath.join('.'), onChange: onChange, onBlur: onBlur, rightAlign: false, name: jsonPath.join('.') }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, zodValidation: zodValidation })
                 ] })
         ] }));
 };