@remotion/cli 4.0.0-alpha13 → 4.0.0-alpha14

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZodFieldValidation = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ValidationMessage_1 = require("../../NewComposition/ValidationMessage");
+const layout_1 = require("../../layout");
+const InfoBubble_1 = require("../InfoBubble");
+const legend = {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+};
+const stackTrace = {
+    padding: 10,
+};
+const stackTraceLabel = {
+    fontSize: 14,
+};
+const ZodFieldValidation = ({ localValue, path }) => {
+    if (localValue.zodValidation.success) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { style: legend, children: [(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, { x: 0.5 }), (0, jsx_runtime_1.jsx)(InfoBubble_1.InfoBubble, { title: "Zod validation failure", children: (0, jsx_runtime_1.jsxs)("div", { style: stackTrace, children: [(0, jsx_runtime_1.jsx)("div", { style: stackTraceLabel, children: "Zod Validation has failed:" }), localValue.zodValidation.error.errors.map((error, index) => (
+                        // eslint-disable-next-line react/no-array-index-key
+                        (0, jsx_runtime_1.jsxs)("div", { style: stackTraceLabel, children: ["Type: ", error.code, " ", (0, jsx_runtime_1.jsx)("br", {}), "Message: ", error.message, (0, jsx_runtime_1.jsx)("br", {}), "Path: ", path.join('.')] }, index)))] }) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 })] }));
+};
+exports.ZodFieldValidation = ZodFieldValidation;

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

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

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

@@ -4,8 +4,8 @@ exports.ZonNonEditableValue = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../../helpers/colors");
-const layout_1 = require("../layout");
 const SchemaLabel_1 = require("./SchemaLabel");
+const Fieldset_1 = require("./Fieldset");
 const fullWidth = {
     width: '100%',
 };
@@ -19,9 +19,9 @@ const wideEmptyLabel = {
     ...emptyLabel,
     lineHeight: '37px',
 };
-const ZonNonEditableValue = ({ jsonPath, label, compact, showSaveButton, saving }) => {
+const ZonNonEditableValue = ({ jsonPath, label, showSaveButton, saving, mayPad }) => {
     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, 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 }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(Fieldset_1.Fieldset, { shouldPad: mayPad, success: true, children: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { isDefaultValue: true, jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, onRemove: null, saving: saving, valid: true, saveDisabledByParent: true, suffix: null }), (0, jsx_runtime_1.jsx)("div", { style: fullWidth, children: (0, jsx_runtime_1.jsx)("em", { style: wideEmptyLabel, children: label }) })] }));
 };
 exports.ZonNonEditableValue = ZonNonEditableValue;

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

@@ -5,7 +5,6 @@ import type { UpdaterFunction } from './ZodSwitch';
 export declare const ZodNullableEditor: React.FC<{
     showSaveButton: boolean;
     jsonPath: JSONPath;
-    compact: boolean;
     value: unknown;
     defaultValue: unknown;
     schema: z.ZodTypeAny;
@@ -14,4 +13,5 @@ export declare const ZodNullableEditor: React.FC<{
     onRemove: null | (() => void);
     saving: boolean;
     saveDisabledByParent: boolean;
+    mayPad: 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, saveDisabledByParent, }) => {
+const ZodNullableEditor = ({ jsonPath, schema, setValue, onSave, defaultValue, value, showSaveButton, onRemove, saving, saveDisabledByParent, mayPad, }) => {
     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, saveDisabledByParent: saveDisabledByParent }));
+    return ((0, 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 }));
 };
 exports.ZodNullableEditor = ZodNullableEditor;

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

@@ -7,11 +7,11 @@ export declare const ZodNumberEditor: React.FC<{
     jsonPath: JSONPath;
     value: number;
     setValue: UpdaterFunction<number>;
-    compact: boolean;
     defaultValue: number;
     onSave: UpdaterFunction<number>;
     onRemove: null | (() => void);
     showSaveButton: boolean;
     saving: boolean;
     saveDisabledByParent: boolean;
+    mayPad: boolean;
 }>;

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

@@ -3,12 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ZodNumberEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const layout_1 = require("../../layout");
 const InputDragger_1 = require("../../NewComposition/InputDragger");
-const ValidationMessage_1 = require("../../NewComposition/ValidationMessage");
-const layout_2 = require("../layout");
 const local_state_1 = require("./local-state");
 const SchemaLabel_1 = require("./SchemaLabel");
+const Fieldset_1 = require("./Fieldset");
+const ZodFieldValidation_1 = require("./ZodFieldValidation");
 const fullWidth = {
     width: '100%',
 };
@@ -48,25 +47,23 @@ const getStep = (schema) => {
     }
     return multipleStep.value;
 };
-const ZodNumberEditor = ({ jsonPath, value, schema, setValue, onSave, compact, defaultValue, onRemove, showSaveButton, saving, saveDisabledByParent, }) => {
-    const { localValue, onChange: setLocalValue } = (0, local_state_1.useLocalState)({
+const ZodNumberEditor = ({ jsonPath, value, schema, setValue, onSave, defaultValue, onRemove, showSaveButton, saving, saveDisabledByParent, mayPad, }) => {
+    const { localValue, onChange: setLocalValue, reset, } = (0, local_state_1.useLocalState)({
         value,
         schema,
         setValue,
+        defaultValue,
     });
     const onNumberChange = (0, react_1.useCallback)((newValue) => {
-        setLocalValue(() => newValue, false);
+        setLocalValue(() => newValue, false, false);
     }, [setLocalValue]);
-    const isDefault = value === defaultValue;
-    const reset = (0, react_1.useCallback)(() => {
-        setLocalValue(() => defaultValue, true);
-    }, [defaultValue, setLocalValue]);
+    const isDefault = localValue.value === defaultValue;
     const onTextChange = (0, react_1.useCallback)((newValue) => {
-        setLocalValue(() => Number(newValue), false);
+        setLocalValue(() => Number(newValue), false, false);
     }, [setLocalValue]);
     const save = (0, react_1.useCallback)(() => {
-        onSave(() => value, false);
+        onSave(() => value, false, 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, { isDefaultValue: isDefault, jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, compact: compact, onRemove: onRemove, saving: saving, valid: localValue.zodValidation.success, saveDisabledByParent: saveDisabledByParent }), (0, jsx_runtime_1.jsxs)("div", { style: fullWidth, children: [(0, 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: getMinValue(schema), max: getMaxValue(schema), step: getStep(schema), rightAlign: false }), !localValue.zodValidation.success && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: localValue.zodValidation.error.format()._errors[0], type: "error" })] }))] })] }));
+    return ((0, jsx_runtime_1.jsxs)(Fieldset_1.Fieldset, { shouldPad: mayPad, success: localValue.zodValidation.success, children: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { isDefaultValue: isDefault, jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, valid: localValue.zodValidation.success, saveDisabledByParent: saveDisabledByParent, suffix: null }), (0, jsx_runtime_1.jsxs)("div", { style: fullWidth, children: [(0, 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: getMinValue(schema), max: getMaxValue(schema), step: getStep(schema), rightAlign: false }), (0, jsx_runtime_1.jsx)(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, localValue: localValue })] })] }));
 };
 exports.ZodNumberEditor = ZodNumberEditor;

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

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

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

@@ -1,33 +1,31 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ZodObjectEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const colors_1 = require("../../../helpers/colors");
+const react_2 = __importDefault(require("react"));
 const get_zod_if_possible_1 = require("../../get-zod-if-possible");
-const layout_1 = require("../layout");
 const local_state_1 = require("./local-state");
-const SchemaLabel_1 = require("./SchemaLabel");
 const ZodSwitch_1 = require("./ZodSwitch");
-const container = {
-    width: '100%',
-};
-const fullWidth = {
-    width: '100%',
-};
-const fieldset = {
-    borderRadius: 4,
-    borderColor: colors_1.INPUT_BORDER_COLOR_UNHOVERED,
-};
-const ZodObjectEditor = ({ schema, jsonPath, setValue, value, compact, defaultValue, onSave, showSaveButton, onRemove, saving, saveDisabledByParent, }) => {
+const Fieldset_1 = require("./Fieldset");
+const SchemaSeparationLine_1 = require("./SchemaSeparationLine");
+const layout_1 = require("../layout");
+const SchemaVerticalGuide_1 = require("./SchemaVerticalGuide");
+const SchemaLabel_1 = require("./SchemaLabel");
+const deep_equal_1 = require("./deep-equal");
+const ZodObjectEditor = ({ schema, jsonPath, setValue, value, defaultValue, onSave, showSaveButton, onRemove, saving, saveDisabledByParent, mayPad, }) => {
     const z = (0, get_zod_if_possible_1.useZodIfPossible)();
     if (!z) {
         throw new Error('expected zod');
     }
-    const { localValue, onChange } = (0, local_state_1.useLocalState)({
+    const { localValue, onChange, RevisionContextProvider, reset } = (0, local_state_1.useLocalState)({
         schema,
         setValue,
         value,
+        defaultValue,
     });
     const def = schema._def;
     const typeName = def.typeName;
@@ -37,35 +35,31 @@ const ZodObjectEditor = ({ schema, jsonPath, setValue, value, compact, defaultVa
     const shape = def.shape();
     const keys = Object.keys(shape);
     const isRoot = jsonPath.length === 0;
-    const Element = isRoot ? 'div' : 'fieldset';
-    const { paddingTop } = layout_1.optionRow;
-    const style = (0, react_1.useMemo)(() => {
-        if (isRoot) {
-            return {};
-        }
-        return { paddingTop };
-    }, [isRoot, paddingTop]);
-    const onRes = (0, react_1.useCallback)(() => {
-        onChange(() => defaultValue, true);
-    }, [defaultValue, onChange]);
-    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, { isDefaultValue: true, onReset: onRes, jsonPath: jsonPath, onRemove: onRemove })), (0, jsx_runtime_1.jsx)("div", { style: isRoot ? undefined : container, children: keys.map((key) => {
-                            return ((0, jsx_runtime_1.jsx)(ZodSwitch_1.ZodSwitch, { 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: (defaultValue !== null && defaultValue !== void 0 ? defaultValue : value)[key], setValue: (val, forceApply) => {
-                                    onChange((oldVal) => {
-                                        return {
-                                            ...oldVal,
-                                            [key]: typeof val === 'function' ? val(oldVal[key]) : val,
-                                        };
-                                    }, forceApply);
-                                }, onSave: (val, forceApply) => {
-                                    onSave((oldVal) => {
-                                        return {
-                                            ...oldVal,
-                                            [key]: typeof val === 'function' ? val(oldVal[key]) : val,
-                                        };
-                                    }, forceApply);
-                                }, onRemove: null, compact: compact, showSaveButton: showSaveButton, saving: saving, saveDisabledByParent: saveDisabledByParent }, key));
-                        }) })] }) }) }));
+    const isDefaultValue = (0, react_1.useMemo)(() => {
+        return (0, deep_equal_1.deepEqual)(localValue.value, defaultValue);
+    }, [defaultValue, localValue]);
+    return ((0, jsx_runtime_1.jsxs)(Fieldset_1.Fieldset, { shouldPad: !isRoot && mayPad, success: localValue.zodValidation.success, children: [isRoot ? null : ((0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { isDefaultValue: isDefaultValue, onReset: reset, jsonPath: jsonPath, onRemove: onRemove, suffix: ' {', onSave: () => {
+                    onSave(() => {
+                        return localValue.value;
+                    }, false, false);
+                }, saveDisabledByParent: saveDisabledByParent, saving: saving, showSaveButton: showSaveButton, valid: localValue.zodValidation.success })), (0, jsx_runtime_1.jsx)(RevisionContextProvider, { children: (0, jsx_runtime_1.jsx)(SchemaVerticalGuide_1.SchemaVerticalGuide, { isRoot: isRoot, children: keys.map((key, i) => {
+                        return ((0, jsx_runtime_1.jsxs)(react_2.default.Fragment, { children: [(0, 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: (defaultValue !== null && defaultValue !== void 0 ? defaultValue : value)[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 : (0, jsx_runtime_1.jsx)(SchemaSeparationLine_1.SchemaSeparationLine, {})] }, key));
+                    }) }) }), isRoot ? null : (0, jsx_runtime_1.jsx)("div", { style: layout_1.fieldsetLabel, children: '}' })] }));
 };
 exports.ZodObjectEditor = ZodObjectEditor;

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

@@ -5,7 +5,6 @@ import type { UpdaterFunction } from './ZodSwitch';
 export declare const ZodOptionalEditor: React.FC<{
     showSaveButton: boolean;
     jsonPath: JSONPath;
-    compact: boolean;
     value: unknown;
     defaultValue: unknown;
     schema: z.ZodTypeAny;
@@ -14,4 +13,5 @@ export declare const ZodOptionalEditor: React.FC<{
     onRemove: null | (() => void);
     saving: boolean;
     saveDisabledByParent: boolean;
+    mayPad: boolean;
 }>;

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

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ZodOptionalEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ZodOrNullishEditor_1 = require("./ZodOrNullishEditor");
-const ZodOptionalEditor = ({ jsonPath, compact, schema, setValue, onSave, defaultValue, value, showSaveButton, onRemove, saving, saveDisabledByParent, }) => {
+const ZodOptionalEditor = ({ jsonPath, schema, setValue, onSave, defaultValue, value, showSaveButton, onRemove, saving, saveDisabledByParent, mayPad, }) => {
     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: undefined, saving: saving, saveDisabledByParent: saveDisabledByParent }));
+    return ((0, 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 }));
 };
 exports.ZodOptionalEditor = ZodOptionalEditor;

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

@@ -5,14 +5,15 @@ import type { UpdaterFunction } from './ZodSwitch';
 export declare const ZodOrNullishEditor: React.FC<{
     showSaveButton: boolean;
     jsonPath: JSONPath;
-    compact: boolean;
     value: unknown;
     defaultValue: unknown;
     schema: z.ZodTypeAny;
+    innerSchema: z.ZodTypeAny;
     setValue: UpdaterFunction<unknown>;
     onSave: UpdaterFunction<unknown>;
     onRemove: null | (() => void);
     nullishValue: null | undefined;
     saving: boolean;
     saveDisabledByParent: boolean;
+    mayPad: boolean;
 }>;

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

@@ -10,76 +10,41 @@ const layout_1 = require("../../layout");
 const create_zod_values_1 = require("./create-zod-values");
 const SchemaLabel_1 = require("./SchemaLabel");
 const ZodSwitch_1 = require("./ZodSwitch");
-const fullWidth = {
-    width: '100%',
-};
+const Fieldset_1 = require("./Fieldset");
+const local_state_1 = require("./local-state");
 const labelStyle = {
     fontFamily: 'sans-serif',
     fontSize: 14,
     color: colors_1.LIGHT_TEXT,
 };
 const checkBoxWrapper = {
-    margin: '2px',
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
     marginTop: '5px',
 };
-const ZodOrNullishEditor = ({ jsonPath, compact, schema, setValue, onSave, defaultValue, value, showSaveButton, onRemove, nullishValue, saving, saveDisabledByParent, }) => {
+const ZodOrNullishEditor = ({ jsonPath, schema, setValue, onSave, defaultValue, value, showSaveButton, onRemove, nullishValue, saving, saveDisabledByParent, 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 [localNonNullishValueValue, setLocalNonNullishValue] = (0, react_1.useState)(() => {
-        return {
-            value,
-            zodValidation: value === nullishValue
-                ? { success: true, data: value }
-                : schema.safeParse(value),
-        };
+    const { localValue, onChange: setLocalValue, reset, } = (0, local_state_1.useLocalState)({
+        schema,
+        setValue,
+        value,
+        defaultValue,
     });
-    const onValueChange = (0, react_1.useCallback)((updater) => {
-        setLocalNonNullishValue((oldState) => {
-            const newValue = updater(oldState.value);
-            if (newValue === nullishValue) {
-                return oldState;
-            }
-            return {
-                value: newValue,
-                zodValidation: schema.safeParse(newValue),
-            };
-        });
-        setValue(updater, false);
-    }, [nullishValue, schema, setValue]);
     const onCheckBoxChange = (0, react_1.useCallback)((e) => {
         const val = e.target.checked
             ? nullishValue
-            : localNonNullishValueValue.value === nullishValue
-                ? (0, create_zod_values_1.createZodValues)(schema, z, zodTypes)
-                : localNonNullishValueValue.value;
-        if (val !== nullishValue) {
-            setLocalNonNullishValue({
-                value: val,
-                zodValidation: schema.safeParse(val),
-            });
-        }
-        onValueChange(() => val, false);
-    }, [
-        localNonNullishValueValue,
-        nullishValue,
-        onValueChange,
-        schema,
-        z,
-        zodTypes,
-    ]);
-    const reset = (0, react_1.useCallback)(() => {
-        onValueChange(() => defaultValue, true);
-    }, [defaultValue, onValueChange]);
+            : (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);
+        onSave(() => value, false, false);
     }, [onSave, value]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [value === nullishValue ? ((0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { isDefaultValue: value === defaultValue, jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, compact: compact, onRemove: onRemove, saving: saving, valid: localNonNullishValueValue.zodValidation.success, saveDisabledByParent: saveDisabledByParent })) : ((0, jsx_runtime_1.jsx)("div", { style: fullWidth, children: (0, jsx_runtime_1.jsx)(ZodSwitch_1.ZodSwitch, { value: value, setValue: onValueChange, jsonPath: jsonPath, schema: schema, compact: compact, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent }) })), (0, jsx_runtime_1.jsxs)("div", { style: checkBoxWrapper, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: isChecked, onChange: onCheckBoxChange, disabled: false }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: labelStyle, children: String(nullishValue) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(Fieldset_1.Fieldset, { shouldPad: mayPad, success: localValue.zodValidation.success, children: [localValue.value === nullishValue ? ((0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { isDefaultValue: localValue.value === defaultValue, jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, valid: localValue.zodValidation.success, saveDisabledByParent: saveDisabledByParent, suffix: null })) : ((0, jsx_runtime_1.jsx)(ZodSwitch_1.ZodSwitch, { value: localValue.value, setValue: setLocalValue, jsonPath: jsonPath, schema: innerSchema, defaultValue: value, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: false })), (0, jsx_runtime_1.jsxs)("div", { style: checkBoxWrapper, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: isChecked, onChange: onCheckBoxChange, disabled: false, name: jsonPath.join('.') }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: labelStyle, children: String(nullishValue) })] })] }));
 };
 exports.ZodOrNullishEditor = ZodOrNullishEditor;

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

@@ -9,9 +9,9 @@ export declare const ZodStaticFileEditor: React.FC<{
     defaultValue: string;
     setValue: UpdaterFunction<string>;
     onSave: (updater: (oldState: string) => string) => void;
-    compact: boolean;
     showSaveButton: boolean;
     onRemove: null | (() => void);
     saving: boolean;
     saveDisabledByParent: boolean;
+    mayPad: boolean;
 }>;

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

@@ -6,24 +6,24 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const Checkmark_1 = require("../../../icons/Checkmark");
 const get_zod_if_possible_1 = require("../../get-zod-if-possible");
-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 Fieldset_1 = require("./Fieldset");
+const ZodFieldValidation_1 = require("./ZodFieldValidation");
 const container = {
     width: '100%',
 };
-const ZodStaticFileEditor = ({ schema, jsonPath, compact, setValue, defaultValue, value, onSave, showSaveButton, onRemove, saving, saveDisabledByParent, }) => {
+const ZodStaticFileEditor = ({ schema, jsonPath, setValue, defaultValue, value, onSave, showSaveButton, onRemove, saving, saveDisabledByParent, mayPad, }) => {
     const z = (0, get_zod_if_possible_1.useZodIfPossible)();
     if (!z) {
         throw new Error('expected zod');
     }
-    const { localValue, onChange: setLocalValue } = (0, local_state_1.useLocalState)({
+    const { localValue, onChange: setLocalValue, reset, } = (0, local_state_1.useLocalState)({
         schema,
         setValue,
         value,
+        defaultValue,
     });
     const def = schema._def;
     const typeName = def.typeName;
@@ -31,9 +31,6 @@ const ZodStaticFileEditor = ({ schema, jsonPath, compact, setValue, defaultValue
         throw new Error('expected enum');
     }
     const isRoot = jsonPath.length === 0;
-    const reset = (0, react_1.useCallback)(() => {
-        setLocalValue(() => defaultValue, true);
-    }, [defaultValue, setLocalValue]);
     const comboBoxValues = (0, react_1.useMemo)(() => {
         return (0, remotion_1.getStaticFiles)().map((option) => {
             return {
@@ -43,7 +40,7 @@ const ZodStaticFileEditor = ({ schema, jsonPath, compact, setValue, defaultValue
                 keyHint: null,
                 leftItem: option.src === value ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
                 onClick: (id) => {
-                    setLocalValue(() => id, false);
+                    setLocalValue(() => id, false, false);
                 },
                 quickSwitcherLabel: null,
                 subMenu: null,
@@ -54,6 +51,6 @@ const ZodStaticFileEditor = ({ schema, jsonPath, compact, setValue, defaultValue
     const save = (0, react_1.useCallback)(() => {
         onSave(() => value);
     }, [onSave, value]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: compact ? layout_2.narrowOption : layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { onSave: save, showSaveButton: showSaveButton, isDefaultValue: localValue.value === defaultValue, compact: compact, onReset: reset, jsonPath: jsonPath, onRemove: onRemove, saving: saving, valid: localValue.zodValidation.success, saveDisabledByParent: saveDisabledByParent }), (0, jsx_runtime_1.jsx)("div", { style: isRoot ? undefined : container, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: comboBoxValues, selectedId: localValue.value, title: value }) }), !localValue.zodValidation.success && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: localValue.zodValidation.error.format()._errors[0], type: "error" })] }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Fieldset_1.Fieldset, { shouldPad: mayPad, success: localValue.zodValidation.success, children: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { onSave: save, showSaveButton: showSaveButton, isDefaultValue: localValue.value === defaultValue, onReset: reset, jsonPath: jsonPath, onRemove: onRemove, saving: saving, valid: localValue.zodValidation.success, saveDisabledByParent: saveDisabledByParent, suffix: null }), (0, jsx_runtime_1.jsx)("div", { style: isRoot ? undefined : container, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: comboBoxValues, selectedId: localValue.value, title: value }) }), (0, jsx_runtime_1.jsx)(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, localValue: localValue })] }));
 };
 exports.ZodStaticFileEditor = ZodStaticFileEditor;

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

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

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

@@ -4,34 +4,31 @@ exports.ZodStringEditor = void 0;
 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 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 Fieldset_1 = require("./Fieldset");
+const ZodFieldValidation_1 = require("./ZodFieldValidation");
 const fullWidth = {
     width: '100%',
 };
-const ZodStringEditor = ({ jsonPath, value, setValue, showSaveButton, defaultValue, schema, compact, onSave, onRemove, saving, saveDisabledByParent, }) => {
+const ZodStringEditor = ({ jsonPath, value, setValue, showSaveButton, defaultValue, schema, onSave, onRemove, saving, saveDisabledByParent, mayPad, }) => {
     const z = (0, get_zod_if_possible_1.useZodIfPossible)();
     if (!z) {
         throw new Error('expected zod');
     }
-    const { localValue, onChange: setLocalValue } = (0, local_state_1.useLocalState)({
+    const { localValue, onChange: setLocalValue, reset, } = (0, local_state_1.useLocalState)({
         schema,
         setValue,
         value,
+        defaultValue,
     });
     const onChange = (0, react_1.useCallback)((e) => {
-        setLocalValue(() => e.target.value, false);
+        setLocalValue(() => e.target.value, false, false);
     }, [setLocalValue]);
-    const reset = (0, react_1.useCallback)(() => {
-        setLocalValue(() => defaultValue, true);
-    }, [defaultValue, setLocalValue]);
     const save = (0, react_1.useCallback)(() => {
-        onSave(() => value, false);
+        onSave(() => value, false, 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: localValue.value === defaultValue, jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, valid: localValue.zodValidation.success, saveDisabledByParent: saveDisabledByParent }), (0, jsx_runtime_1.jsxs)("div", { style: fullWidth, children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { value: localValue.value, status: localValue.zodValidation ? 'ok' : 'error', placeholder: jsonPath.join('.'), onChange: onChange, rightAlign: false }), !localValue.zodValidation.success && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: localValue.zodValidation.error.format()._errors[0], type: "error" })] }))] })] }));
+    return ((0, jsx_runtime_1.jsxs)(Fieldset_1.Fieldset, { shouldPad: mayPad, success: false, children: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { isDefaultValue: localValue.value === defaultValue, jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, valid: localValue.zodValidation.success, saveDisabledByParent: saveDisabledByParent, suffix: null }), (0, jsx_runtime_1.jsxs)("div", { style: fullWidth, children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { value: localValue.value, status: localValue.zodValidation ? 'ok' : 'error', placeholder: jsonPath.join('.'), onChange: onChange, rightAlign: false, name: jsonPath.join('.') }), (0, jsx_runtime_1.jsx)(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, localValue: localValue })] })] }));
 };
 exports.ZodStringEditor = ZodStringEditor;

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

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