@remotion/cli 4.0.0-alpha7 → 4.0.0-alpha9

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

@@ -2,7 +2,7 @@ import React from 'react';
 import type { AnyComposition } from 'remotion';
 export declare type State = {
     str: string;
-    value: unknown;
+    value: Record<string, unknown>;
     validJSON: true;
 } | {
     str: string;
@@ -12,8 +12,8 @@ export declare type State = {
 export declare type PropsEditType = 'input-props' | 'default-props';
 export declare const RenderModalData: React.FC<{
     composition: AnyComposition;
-    inputProps: unknown;
-    setInputProps: React.Dispatch<React.SetStateAction<unknown>>;
+    inputProps: Record<string, unknown>;
+    setInputProps: React.Dispatch<React.SetStateAction<Record<string, unknown>>>;
     compact: boolean;
     mayShowSaveButton: boolean;
     propsEditType: PropsEditType;

package/dist/editor/components/RenderModal/RenderModalData.js

@@ -27,11 +27,11 @@ exports.RenderModalData = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
-const colors_1 = require("../../helpers/colors");
-const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
 const client_id_1 = require("../../helpers/client-id");
+const colors_1 = require("../../helpers/colors");
 const get_zod_if_possible_1 = require("../get-zod-if-possible");
 const layout_1 = require("../layout");
+const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const actions_1 = require("../RenderQueue/actions");
 const SegmentedControl_1 = require("../SegmentedControl");
@@ -105,7 +105,7 @@ const RenderModalData = ({ composition, inputProps, setInputProps, compact, mayS
         if (!inJSONEditor) {
             return null;
         }
-        const value = inputProps !== null && inputProps !== void 0 ? inputProps : {};
+        const value = inputProps;
         return (0, input_props_serialization_1.serializeJSONWithDate)({
             data: value,
             indent: 2,
@@ -113,10 +113,8 @@ const RenderModalData = ({ composition, inputProps, setInputProps, compact, mayS
         });
     }, [inJSONEditor, inputProps]);
     const cliProps = (0, remotion_1.getInputProps)();
-    const [canSaveDefaultProps, setCanSaveDefaultProps] = (0, react_1.useState)({
-        canUpdate: false,
-        reason: 'Loading...',
-        determined: false,
+    const [canSaveDefaultPropsObjectState, setCanSaveDefaultProps] = (0, react_1.useState)({
+        [composition.id]: get_render_modal_warnings_1.defaultTypeCanSaveState,
     });
     const z = (0, get_zod_if_possible_1.useZodIfPossible)();
     const schema = (0, react_1.useMemo)(() => {
@@ -124,7 +122,7 @@ const RenderModalData = ({ composition, inputProps, setInputProps, compact, mayS
             return 'no-zod';
         }
         if (!composition.schema) {
-            return z.any();
+            return z.object({});
         }
         if (!(typeof composition.schema.safeParse === 'function')) {
             throw new Error('A value which is not a Zod schema was passed to `schema`');
@@ -147,30 +145,44 @@ const RenderModalData = ({ composition, inputProps, setInputProps, compact, mayS
             return val(prevVal);
         });
     }, []);
+    const canSaveDefaultProps = (0, react_1.useMemo)(() => {
+        return canSaveDefaultPropsObjectState[composition.id]
+            ? canSaveDefaultPropsObjectState[composition.id]
+            : get_render_modal_warnings_1.defaultTypeCanSaveState;
+    }, [canSaveDefaultPropsObjectState, composition.id]);
     const showSaveButton = mayShowSaveButton && canSaveDefaultProps.canUpdate;
     const { fastRefreshes } = (0, react_1.useContext)(remotion_1.Internals.NonceContext);
     (0, react_1.useEffect)(() => {
         (0, actions_1.canUpdateDefaultProps)(composition.id)
             .then((can) => {
             if (can.canUpdate) {
-                setCanSaveDefaultProps({
-                    canUpdate: true,
-                });
+                setCanSaveDefaultProps((prevState) => ({
+                    ...prevState,
+                    [composition.id]: {
+                        canUpdate: true,
+                    },
+                }));
             }
             else {
-                setCanSaveDefaultProps({
-                    canUpdate: false,
-                    reason: can.reason,
-                    determined: true,
-                });
+                setCanSaveDefaultProps((prevState) => ({
+                    ...prevState,
+                    [composition.id]: {
+                        canUpdate: false,
+                        reason: can.reason,
+                        determined: true,
+                    },
+                }));
             }
         })
             .catch((err) => {
-            setCanSaveDefaultProps({
-                canUpdate: false,
-                reason: err.message,
-                determined: true,
-            });
+            setCanSaveDefaultProps((prevState) => ({
+                ...prevState,
+                [composition.id]: {
+                    canUpdate: false,
+                    reason: err.message,
+                    determined: true,
+                },
+            }));
         });
     }, [composition.id]);
     const modeItems = (0, react_1.useMemo)(() => {
@@ -202,7 +214,11 @@ const RenderModalData = ({ composition, inputProps, setInputProps, compact, mayS
             return;
         }
         setValBeforeSafe(inputProps);
-        (0, actions_1.updateDefaultProps)(composition.id, inputProps, (0, extract_enum_json_paths_1.extractEnumJsonPaths)(schema, z, []));
+        (0, actions_1.updateDefaultProps)(composition.id, inputProps, (0, extract_enum_json_paths_1.extractEnumJsonPaths)(schema, z, [])).then((response) => {
+            if (!response.success) {
+                (0, NotificationCenter_1.sendErrorNotification)('Cannot update default props: ' + response.reason);
+            }
+        });
     }, [composition.id, inputProps, schema, z]);
     (0, react_1.useEffect)(() => {
         setSaving(false);
@@ -213,7 +229,14 @@ const RenderModalData = ({ composition, inputProps, setInputProps, compact, mayS
             return;
         }
         setSaving(true);
-        (0, actions_1.updateDefaultProps)(composition.id, updater(composition.defaultProps), (0, extract_enum_json_paths_1.extractEnumJsonPaths)(schema, z, [])).catch((err) => {
+        (0, actions_1.updateDefaultProps)(composition.id, updater(composition.defaultProps), (0, extract_enum_json_paths_1.extractEnumJsonPaths)(schema, z, []))
+            .then((response) => {
+            if (!response.success) {
+                console.log(response.stack);
+                (0, NotificationCenter_1.sendErrorNotification)(`Cannot update default props: ${response.reason}. See console for more information.`);
+            }
+        })
+            .catch((err) => {
             (0, NotificationCenter_1.sendErrorNotification)(`Cannot update default props: ${err.message}`);
             setSaving(false);
         });
@@ -227,10 +250,12 @@ const RenderModalData = ({ composition, inputProps, setInputProps, compact, mayS
             customFileUsed: serializedJSON ? serializedJSON.customFileUsed : false,
             inJSONEditor,
             propsEditType,
+            jsMapUsed: serializedJSON ? serializedJSON.mapUsed : false,
+            jsSetUsed: serializedJSON ? serializedJSON.setUsed : false,
         });
     }, [
-        canSaveDefaultProps,
         cliProps,
+        canSaveDefaultProps,
         inJSONEditor,
         propsEditType,
         serializedJSON,
@@ -258,6 +283,6 @@ const RenderModalData = ({ composition, inputProps, setInputProps, compact, mayS
     }
     return ((0, jsx_runtime_1.jsxs)("div", { style: outer, children: [(0, jsx_runtime_1.jsxs)("div", { style: controlContainer, children: [(0, jsx_runtime_1.jsxs)("div", { style: tabWrapper, children: [(0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: modeItems, needsWrapping: false }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), warnings.length > 0 ? ((0, jsx_runtime_1.jsx)(WarningIndicatorButton_1.WarningIndicatorButton, { setShowWarning: setShowWarning, showWarning: showWarning, warningCount: warnings.length })) : null] }), showWarning && warnings.length > 0
                         ? warnings.map((warning) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: warning, align: "flex-start", type: "warning" })] }, warning)))
-                        : null] }), mode === 'schema' ? ((0, jsx_runtime_1.jsx)(SchemaEditor_1.SchemaEditor, { value: inputProps, setValue: setInputProps, schema: schema, zodValidationResult: zodValidationResult, compact: compact, defaultProps: composition.defaultProps, onSave: onSave, showSaveButton: showSaveButton, saving: saving })) : ((0, jsx_runtime_1.jsx)(RenderModalJSONPropsEditor_1.RenderModalJSONPropsEditor, { value: inputProps !== null && inputProps !== void 0 ? inputProps : {}, setValue: setInputProps, zodValidationResult: zodValidationResult, switchToSchema: switchToSchema, onSave: onUpdate, valBeforeSafe: valBeforeSafe, showSaveButton: showSaveButton, serializedJSON: serializedJSON, parseJSON: parseJSON }))] }));
+                        : null] }), mode === 'schema' ? ((0, jsx_runtime_1.jsx)(SchemaEditor_1.SchemaEditor, { value: inputProps, setValue: setInputProps, schema: schema, zodValidationResult: zodValidationResult, compact: compact, defaultProps: composition.defaultProps, onSave: onSave, showSaveButton: showSaveButton, saving: saving, saveDisabledByParent: !zodValidationResult.success })) : ((0, jsx_runtime_1.jsx)(RenderModalJSONPropsEditor_1.RenderModalJSONPropsEditor, { value: inputProps !== null && inputProps !== void 0 ? inputProps : {}, setValue: setInputProps, zodValidationResult: zodValidationResult, switchToSchema: switchToSchema, onSave: onUpdate, valBeforeSafe: valBeforeSafe, showSaveButton: showSaveButton, serializedJSON: serializedJSON, parseJSON: parseJSON }))] }));
 };
 exports.RenderModalData = RenderModalData;

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

@@ -4,7 +4,7 @@ import type { SerializedJSONWithCustomFields } from './SchemaEditor/input-props-
 export declare type EditType = 'inputProps' | 'defaultProps';
 export declare const RenderModalJSONPropsEditor: React.FC<{
     value: unknown;
-    setValue: React.Dispatch<React.SetStateAction<unknown>>;
+    setValue: React.Dispatch<React.SetStateAction<Record<string, unknown>>>;
     zodValidationResult: Zod.SafeParseReturnType<unknown, unknown>;
     switchToSchema: () => void;
     onSave: () => void;

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

@@ -1,13 +1,14 @@
 import React from 'react';
-import type { z } from 'zod';
+import type { AnyZodObject, z } from 'zod';
 export declare const SchemaEditor: React.FC<{
-    schema: z.ZodTypeAny;
+    schema: AnyZodObject;
     value: unknown;
-    setValue: React.Dispatch<React.SetStateAction<unknown>>;
+    setValue: React.Dispatch<React.SetStateAction<Record<string, unknown>>>;
     zodValidationResult: z.SafeParseReturnType<unknown, unknown>;
     compact: boolean;
-    defaultProps: unknown;
+    defaultProps: Record<string, unknown>;
     onSave: (updater: (oldState: unknown) => unknown) => void;
     showSaveButton: boolean;
     saving: boolean;
+    saveDisabledByParent: boolean;
 }>;

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

@@ -13,7 +13,7 @@ const scrollable = {
     flexDirection: 'column',
     overflowY: 'auto',
 };
-const SchemaEditor = ({ schema, value, setValue, zodValidationResult, compact, defaultProps, onSave, showSaveButton, saving, }) => {
+const SchemaEditor = ({ schema, value, setValue, zodValidationResult, compact, defaultProps, onSave, showSaveButton, saving, saveDisabledByParent, }) => {
     const z = (0, get_zod_if_possible_1.useZodIfPossible)();
     if (!z) {
         throw new Error('expected zod');
@@ -31,9 +31,9 @@ const SchemaEditor = ({ schema, value, setValue, zodValidationResult, compact, d
         }
         return ((0, jsx_runtime_1.jsx)(SchemaErrorMessages_1.InvalidSchema, { reset: reset, zodValidationResult: zodValidationResult }));
     }
-    if (typeName === z.ZodFirstPartyTypeKind.ZodObject) {
-        return ((0, jsx_runtime_1.jsx)("div", { style: scrollable, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: (0, jsx_runtime_1.jsx)(ZodObjectEditor_1.ZodObjectEditor, { value: value, setValue: setValue, jsonPath: [], schema: schema, compact: compact, defaultValue: defaultProps, onSave: onSave, showSaveButton: showSaveButton, onRemove: null, saving: saving }) }));
+    if (typeName !== z.ZodFirstPartyTypeKind.ZodObject) {
+        return (0, jsx_runtime_1.jsx)(SchemaErrorMessages_1.TopLevelZodValue, { typeReceived: typeName });
     }
-    return null;
+    return ((0, jsx_runtime_1.jsx)("div", { style: scrollable, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: (0, jsx_runtime_1.jsx)(ZodObjectEditor_1.ZodObjectEditor, { value: value, setValue: setValue, jsonPath: [], schema: schema, compact: compact, defaultValue: defaultProps, onSave: onSave, showSaveButton: showSaveButton, onRemove: null, saving: saving, saveDisabledByParent: saveDisabledByParent }) }));
 };
 exports.SchemaEditor = SchemaEditor;

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

@@ -10,3 +10,6 @@ export declare const InvalidSchema: React.FC<{
     zodValidationResult: z.SafeParseReturnType<unknown, unknown>;
     reset: () => void;
 }>;
+export declare const TopLevelZodValue: React.FC<{
+    typeReceived: string;
+}>;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InvalidSchema = exports.InvalidDefaultProps = exports.NoDefaultProps = exports.NoSchemaDefined = exports.ZodNotInstalled = void 0;
+exports.TopLevelZodValue = exports.InvalidSchema = exports.InvalidDefaultProps = exports.NoDefaultProps = exports.NoSchemaDefined = exports.ZodNotInstalled = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Button_1 = require("../../../../preview-server/error-overlay/remotion-overlay/Button");
 const colors_1 = require("../../../helpers/colors");
@@ -24,7 +24,7 @@ const errorExplanation = {
 };
 const codeSnippet = {
     fontSize: 14,
-    color: 'var(--blue)',
+    color: colors_1.BLUE,
     fontFamily: 'monospace',
 };
 const errorContainer = {
@@ -57,3 +57,7 @@ const InvalidSchema = ({ zodValidationResult, reset }) => {
     return ((0, jsx_runtime_1.jsxs)("div", { style: errorContainer, children: [(0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "The data does not satisfy the schema:" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ZodErrorMessages_1.ZodErrorMessages, { zodValidationResult: zodValidationResult }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "Fix the schema using the JSON editor." }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["Alternatively, reset the data to the", ' ', (0, jsx_runtime_1.jsx)("code", { style: codeSnippet, children: "defaultProps" }), " that you have defined."] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: reset, children: "Reset props" })] }));
 };
 exports.InvalidSchema = InvalidSchema;
+const TopLevelZodValue = ({ typeReceived }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["The top-level type of the schema must be a pure", ' ', (0, jsx_runtime_1.jsx)("code", { style: codeSnippet, children: "z.object" }), ". Instead got a schema of type", ' ', (0, jsx_runtime_1.jsx)("code", { style: codeSnippet, children: typeReceived })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "Fix the schema by changing the top-level Zod type to an object." }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2, block: true }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: openDocs, children: "Learn more" })] }));
+};
+exports.TopLevelZodValue = TopLevelZodValue;

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

@@ -9,8 +9,12 @@ export declare const SchemaLabel: React.FC<{
     showSaveButton: boolean;
     compact: boolean;
     saving: boolean;
+    valid: boolean;
+    saveDisabledByParent: boolean;
 }>;
 export declare const SchemaFieldsetLabel: React.FC<{
     jsonPath: JSONPath;
     onRemove: null | (() => void);
+    isDefaultValue: boolean;
+    onReset: () => void;
 }>;

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

@@ -30,11 +30,12 @@ const labelStyle = {
     color: colors_1.LIGHT_TEXT,
     lineHeight: '40px',
 };
-const SchemaLabel = ({ jsonPath, isDefaultValue, onReset, onSave, showSaveButton, compact, onRemove, saving, }) => {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: compact ? compactStyles : wideStyles, children: [(0, jsx_runtime_1.jsx)("span", { style: labelStyle, children: (0, get_schema_label_1.getSchemaLabel)(jsonPath) }), compact ? (0, jsx_runtime_1.jsx)(layout_1.Flex, {}) : (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), isDefaultValue ? null : (0, jsx_runtime_1.jsx)(SchemaResetButton_1.SchemaResetButton, { onClick: onReset }), isDefaultValue ? null : showSaveButton ? ((0, jsx_runtime_1.jsx)(SchemaSaveButton_1.SchemaSaveButton, { onClick: onSave, isSaving: saving })) : null, onRemove ? (0, jsx_runtime_1.jsx)(InlineRemoveButton_1.InlineRemoveButton, { onClick: onRemove }) : null] }));
+const SchemaLabel = ({ jsonPath, isDefaultValue, onReset, onSave, showSaveButton, compact, onRemove, saving, valid, saveDisabledByParent, }) => {
+    const disableSave = saving || !valid || saveDisabledByParent;
+    return ((0, jsx_runtime_1.jsxs)("div", { style: compact ? compactStyles : wideStyles, children: [(0, jsx_runtime_1.jsx)("span", { style: labelStyle, children: (0, get_schema_label_1.getSchemaLabel)(jsonPath) }), compact ? (0, jsx_runtime_1.jsx)(layout_1.Flex, {}) : (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), isDefaultValue ? null : (0, jsx_runtime_1.jsx)(SchemaResetButton_1.SchemaResetButton, { onClick: onReset }), isDefaultValue ? null : showSaveButton ? ((0, jsx_runtime_1.jsx)(SchemaSaveButton_1.SchemaSaveButton, { onClick: onSave, disabled: disableSave })) : null, onRemove ? (0, jsx_runtime_1.jsx)(InlineRemoveButton_1.InlineRemoveButton, { onClick: onRemove }) : null] }));
 };
 exports.SchemaLabel = SchemaLabel;
-const SchemaFieldsetLabel = ({ jsonPath, onRemove }) => {
-    return ((0, jsx_runtime_1.jsxs)("legend", { style: layout_2.fieldsetLabel, children: [(0, get_schema_label_1.getSchemaLabel)(jsonPath), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), onRemove ? ((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)(InlineRemoveButton_1.InlineRemoveButton, { onClick: onRemove })] })) : null] }));
+const SchemaFieldsetLabel = ({ jsonPath, onRemove, isDefaultValue, onReset }) => {
+    return ((0, jsx_runtime_1.jsxs)("legend", { style: layout_2.fieldsetLabel, children: [(0, get_schema_label_1.getSchemaLabel)(jsonPath), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), isDefaultValue ? null : (0, jsx_runtime_1.jsx)(SchemaResetButton_1.SchemaResetButton, { onClick: onReset }), onRemove ? ((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)(InlineRemoveButton_1.InlineRemoveButton, { onClick: onRemove })] })) : null] }));
 };
 exports.SchemaFieldsetLabel = SchemaFieldsetLabel;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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