@remotion/cli 4.0.0-alpha13 → 4.0.0-alpha16

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;
 }>;

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

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

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

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

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

@@ -24,26 +24,26 @@ const findNull = (value, zodType) => {
         otherSchemaIsAlsoNullish,
     };
 };
-const ZodUnionEditor = ({ jsonPath, compact, schema, setValue, onSave, defaultValue, value, showSaveButton, onRemove, saving, saveDisabledByParent, }) => {
+const ZodUnionEditor = ({ jsonPath, schema, setValue, onSave, defaultValue, value, showSaveButton, onRemove, saving, saveDisabledByParent, mayPad, }) => {
     const { options } = schema._def;
     const z = (0, get_zod_if_possible_1.useZodIfPossible)();
     if (!z) {
         throw new Error('expected zod');
     }
     if (options.length > 2) {
-        return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { jsonPath: jsonPath, label: 'Union with more than 2 options not editable', compact: compact, showSaveButton: showSaveButton, saving: saving }));
+        return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { jsonPath: jsonPath, label: 'Union with more than 2 options not editable', showSaveButton: showSaveButton, saving: saving, mayPad: mayPad }));
     }
     if (options.length < 2) {
-        return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { jsonPath: jsonPath, label: 'Union with less than 2 options not editable', compact: compact, showSaveButton: showSaveButton, saving: saving }));
+        return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { jsonPath: jsonPath, label: 'Union with less than 2 options not editable', showSaveButton: showSaveButton, saving: saving, mayPad: mayPad }));
     }
     const nullResult = findNull(options, z);
     if (!nullResult) {
-        return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { jsonPath: jsonPath, label: 'Union only editable with 1 value being null', compact: compact, showSaveButton: showSaveButton, saving: saving }));
+        return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { jsonPath: jsonPath, label: 'Union only editable with 1 value being null', showSaveButton: showSaveButton, saving: saving, mayPad: mayPad }));
     }
     const { otherSchema, nullishValue, otherSchemaIsAlsoNullish } = nullResult;
     if (otherSchemaIsAlsoNullish) {
-        return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { jsonPath: jsonPath, label: 'Not editable - both union values are nullish', compact: compact, showSaveButton: showSaveButton, saving: saving }));
+        return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { jsonPath: jsonPath, label: 'Not editable - both union values are nullish', showSaveButton: showSaveButton, saving: saving, mayPad: mayPad }));
     }
-    return ((0, jsx_runtime_1.jsx)(ZodOrNullishEditor_1.ZodOrNullishEditor, { compact: compact, defaultValue: defaultValue, jsonPath: jsonPath, onRemove: onRemove, onSave: onSave, schema: otherSchema, setValue: setValue, showSaveButton: showSaveButton, value: value, nullishValue: nullishValue, saving: saving, saveDisabledByParent: saveDisabledByParent }));
+    return ((0, jsx_runtime_1.jsx)(ZodOrNullishEditor_1.ZodOrNullishEditor, { defaultValue: defaultValue, jsonPath: jsonPath, onRemove: onRemove, onSave: onSave, schema: schema, innerSchema: otherSchema, setValue: setValue, showSaveButton: showSaveButton, value: value, nullishValue: nullishValue, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }));
 };
 exports.ZodUnionEditor = ZodUnionEditor;

package/dist/editor/components/RenderModal/SchemaEditor/deep-equal.js

@@ -6,6 +6,9 @@ function deepEqual(a, b) {
     if (a === b) {
         return true;
     }
+    if (a instanceof Date && b instanceof Date) {
+        return a.getTime() === b.getTime();
+    }
     if (typeof a !== 'object' ||
         a === null ||
         typeof b !== 'object' ||

package/dist/editor/components/RenderModal/SchemaEditor/extract-enum-json-paths.d.ts

@@ -1,3 +1,3 @@
 import type { ZodType } from '../../get-zod-if-possible';
-export declare type EnumPath = (string | number)[];
+export type EnumPath = (string | number)[];
 export declare const extractEnumJsonPaths: (schema: Zod.ZodTypeAny, zodRuntime: ZodType, currentPath: (string | number)[]) => (string | number)[][];

package/dist/editor/components/RenderModal/SchemaEditor/get-schema-label.js

@@ -6,10 +6,10 @@ const getSchemaLabel = (jsonPath) => {
     if (typeof lastKey === 'number') {
         const secondLastKey = jsonPath[jsonPath.length - 2];
         if (typeof secondLastKey === 'undefined') {
-            return `[${lastKey}]`;
+            return `[${lastKey}]:`;
         }
-        return `${(0, exports.getSchemaLabel)(jsonPath.slice(0, jsonPath.length - 1))}[${lastKey}]`;
+        return `${lastKey}:`;
     }
-    return lastKey;
+    return `${lastKey}:`;
 };
 exports.getSchemaLabel = getSchemaLabel;

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

@@ -1,4 +1,4 @@
-export declare type SerializedJSONWithCustomFields = {
+export type SerializedJSONWithCustomFields = {
     serializedString: string;
     customDateUsed: boolean;
     customFileUsed: boolean;

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

@@ -1,16 +1,21 @@
+import React from 'react';
 import type { z } from 'zod';
 import type { UpdaterFunction } from './ZodSwitch';
-declare type LocalState<T> = {
+export type LocalState<T> = {
     value: T;
     zodValidation: z.SafeParseReturnType<unknown, unknown>;
-    revision: number;
+    keyStabilityRevision: number;
 };
-export declare const useLocalState: <T>({ value, schema, setValue, }: {
+export declare const useLocalState: <T>({ value, schema, setValue, defaultValue, }: {
     value: T;
     schema: z.ZodTypeAny;
     setValue: UpdaterFunction<T>;
+    defaultValue: T;
 }) => {
     localValue: LocalState<T>;
-    onChange: (updater: (oldV: T) => T, forceApply: boolean) => void;
+    onChange: (updater: (oldV: T) => T, forceApply: boolean, increment: boolean) => void;
+    reset: () => void;
+    RevisionContextProvider: ({ children }: {
+        children: React.ReactNode;
+    }) => JSX.Element;
 };
-export {};

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

@@ -1,19 +1,32 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLocalState = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const deep_equal_1 = require("./deep-equal");
-const useLocalState = ({ value, schema, setValue, }) => {
+const RevisionContext = (0, react_1.createContext)({
+    childResetRevision: 0,
+});
+const useLocalState = ({ value, schema, setValue, defaultValue, }) => {
+    const parentRevision = (0, react_1.useContext)(RevisionContext).childResetRevision;
+    const [resetRevision, setResetRevision] = (0, react_1.useState)(0);
     const [localValue, setLocalValue] = (0, react_1.useState)(() => {
-        return {
-            value,
-            zodValidation: schema.safeParse(value),
-            revision: 0,
-        };
+        return {};
     });
-    const stateRef = (0, react_1.useRef)(localValue);
-    stateRef.current = localValue;
-    const onChange = (0, react_1.useCallback)((updater, forceApply) => {
+    const currentLocalValue = (0, react_1.useMemo)(() => {
+        var _a;
+        return ((_a = localValue[parentRevision]) !== null && _a !== void 0 ? _a : {
+            value: defaultValue,
+            keyStabilityRevision: 0,
+            zodValidation: schema.safeParse(value),
+        });
+    }, [defaultValue, localValue, parentRevision, schema, value]);
+    const stateRef = (0, react_1.useRef)(currentLocalValue);
+    stateRef.current = currentLocalValue;
+    const onChange = (0, react_1.useCallback)(
+    // Increment is to regenerate `key` attributes in array items,
+    // so should increment when changing array items
+    (updater, forceApply, increment) => {
         const newValue = updater(stateRef.current.value);
         const isSame = (0, deep_equal_1.deepEqual)(newValue, stateRef.current.value);
         if (isSame) {
@@ -21,18 +34,46 @@ const useLocalState = ({ value, schema, setValue, }) => {
         }
         const safeParse = schema.safeParse(newValue);
         if (safeParse.success || forceApply) {
-            setValue(updater, forceApply);
+            setValue(updater, forceApply, increment);
         }
-        setLocalValue((oldLocalState) => {
+        setLocalValue(() => {
             const newState = {
-                revision: oldLocalState.revision + 1,
+                keyStabilityRevision: currentLocalValue.keyStabilityRevision + (increment ? 1 : 0),
                 value: newValue,
                 zodValidation: safeParse,
             };
             stateRef.current = newState;
-            return newState;
+            return {
+                ...localValue,
+                [parentRevision]: newState,
+            };
         });
-    }, [schema, setValue]);
-    return { localValue, onChange };
+    }, [
+        currentLocalValue.keyStabilityRevision,
+        localValue,
+        parentRevision,
+        schema,
+        setValue,
+    ]);
+    const contextValue = (0, react_1.useMemo)(() => {
+        return {
+            childResetRevision: resetRevision,
+        };
+    }, [resetRevision]);
+    const reset = (0, react_1.useCallback)(() => {
+        // Only need to do key stability for arrays, but
+        // since user is not editing right now, should be fine
+        onChange(() => defaultValue, true, true);
+        setResetRevision((old) => old + 1);
+    }, [defaultValue, onChange]);
+    const RevisionContextProvider = (0, react_1.useCallback)(({ children }) => {
+        return ((0, jsx_runtime_1.jsx)(RevisionContext.Provider, { value: contextValue, children: children }));
+    }, [contextValue]);
+    return {
+        localValue: currentLocalValue,
+        onChange,
+        reset,
+        RevisionContextProvider,
+    };
 };
 exports.useLocalState = useLocalState;

package/dist/editor/components/RenderModal/SchemaEditor/zod-types.d.ts

@@ -1 +1 @@
-export declare type JSONPath = (string | number)[];
+export type JSONPath = (string | number)[];

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

@@ -1,5 +1,5 @@
 import type { PropsEditType } from './DataEditor';
-export declare type TypeCanSaveState = {
+export type TypeCanSaveState = {
     canUpdate: true;
 } | {
     canUpdate: false;

package/dist/editor/components/RenderModal/layout.d.ts

@@ -1,6 +1,5 @@
 import type React from 'react';
 export declare const optionRow: React.CSSProperties;
-export declare const narrowOption: React.CSSProperties;
 export declare const label: React.CSSProperties;
 export declare const rightRow: React.CSSProperties;
 export declare const input: React.CSSProperties;