@remotion/cli 4.0.0-alpha.217 → 4.0.0-alpha10

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

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RenderModalData = void 0;
+exports.DataEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
@@ -32,10 +32,13 @@ 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");
 const get_render_modal_warnings_1 = require("./get-render-modal-warnings");
-const RenderModalJSONInputPropsEditor_1 = require("./RenderModalJSONInputPropsEditor");
+const RenderModalJSONPropsEditor_1 = require("./RenderModalJSONPropsEditor");
+const extract_enum_json_paths_1 = require("./SchemaEditor/extract-enum-json-paths");
+const input_props_serialization_1 = require("./SchemaEditor/input-props-serialization");
 const SchemaEditor_1 = require("./SchemaEditor/SchemaEditor");
 const SchemaErrorMessages_1 = require("./SchemaEditor/SchemaErrorMessages");
 const WarningIndicatorButton_1 = require("./WarningIndicatorButton");
@@ -59,6 +62,7 @@ const outer = {
     flexDirection: 'column',
     flex: 1,
     overflow: 'hidden',
+    backgroundColor: colors_1.BACKGROUND,
 };
 const controlContainer = {
     flexDirection: 'column',
@@ -83,29 +87,40 @@ const getPersistedShowWarningState = () => {
 const setPersistedShowWarningState = (val) => {
     localStorage.setItem(persistanceKey, String(Boolean(val)));
 };
-const RenderModalData = ({ composition, inputProps, setInputProps, compact, mayShowSaveButton }) => {
+const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, compact, mayShowSaveButton, propsEditType, }) => {
     const [mode, setMode] = (0, react_1.useState)('schema');
     const [valBeforeSafe, setValBeforeSafe] = (0, react_1.useState)(inputProps);
+    const [saving, setSaving] = (0, react_1.useState)(false);
     const [showWarning, setShowWarningWithoutPersistance] = (0, react_1.useState)(() => getPersistedShowWarningState());
+    const inJSONEditor = mode === 'json';
+    const serializedJSON = (0, react_1.useMemo)(() => {
+        if (!inJSONEditor) {
+            return null;
+        }
+        const value = inputProps;
+        return (0, input_props_serialization_1.serializeJSONWithDate)({
+            data: value,
+            indent: 2,
+            staticBase: window.remotion_staticBase,
+        });
+    }, [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)({
+        [unresolvedComposition.id]: get_render_modal_warnings_1.defaultTypeCanSaveState,
     });
     const z = (0, get_zod_if_possible_1.useZodIfPossible)();
     const schema = (0, react_1.useMemo)(() => {
         if (!z) {
             return 'no-zod';
         }
-        if (!composition.schema) {
-            return z.any();
+        if (!unresolvedComposition.schema) {
+            return z.object({});
         }
-        if (!(typeof composition.schema.safeParse === 'function')) {
+        if (!(typeof unresolvedComposition.schema.safeParse === 'function')) {
             throw new Error('A value which is not a Zod schema was passed to `schema`');
         }
-        return composition.schema;
-    }, [composition.schema, z]);
+        return unresolvedComposition.schema;
+    }, [unresolvedComposition.schema, z]);
     const zodValidationResult = (0, react_1.useMemo)(() => {
         if (schema === 'no-zod') {
             return 'no-zod';
@@ -122,30 +137,46 @@ const RenderModalData = ({ composition, inputProps, setInputProps, compact, mayS
             return val(prevVal);
         });
     }, []);
+    const canSaveDefaultProps = (0, react_1.useMemo)(() => {
+        return canSaveDefaultPropsObjectState[unresolvedComposition.id]
+            ? canSaveDefaultPropsObjectState[unresolvedComposition.id]
+            : get_render_modal_warnings_1.defaultTypeCanSaveState;
+    }, [canSaveDefaultPropsObjectState, unresolvedComposition.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)
+        (0, actions_1.canUpdateDefaultProps)(unresolvedComposition.id)
             .then((can) => {
             if (can.canUpdate) {
-                setCanSaveDefaultProps({
-                    canUpdate: true,
-                });
+                setCanSaveDefaultProps((prevState) => ({
+                    ...prevState,
+                    [unresolvedComposition.id]: {
+                        canUpdate: true,
+                    },
+                }));
             }
             else {
-                setCanSaveDefaultProps({
-                    canUpdate: false,
-                    reason: can.reason,
-                    determined: true,
-                });
+                setCanSaveDefaultProps((prevState) => ({
+                    ...prevState,
+                    [unresolvedComposition.id]: {
+                        canUpdate: false,
+                        reason: can.reason,
+                        determined: true,
+                    },
+                }));
             }
         })
             .catch((err) => {
-            setCanSaveDefaultProps({
-                canUpdate: false,
-                reason: err.message,
-                determined: true,
-            });
+            setCanSaveDefaultProps((prevState) => ({
+                ...prevState,
+                [unresolvedComposition.id]: {
+                    canUpdate: false,
+                    reason: err.message,
+                    determined: true,
+                },
+            }));
         });
-    }, [composition.id]);
+    }, [unresolvedComposition.id]);
     const modeItems = (0, react_1.useMemo)(() => {
         return [
             {
@@ -166,26 +197,63 @@ const RenderModalData = ({ composition, inputProps, setInputProps, compact, mayS
             },
         ];
     }, [mode]);
-    const switchToSchema = (0, react_1.useCallback)(() => {
-        setMode('schema');
-    }, []);
     const onUpdate = (0, react_1.useCallback)(() => {
+        if (schema === 'no-zod' || z === null) {
+            (0, NotificationCenter_1.sendErrorNotification)('Cannot update default props: No Zod schema');
+            return;
+        }
         setValBeforeSafe(inputProps);
-        (0, actions_1.updateDefaultProps)(composition.id, inputProps);
-    }, [composition.id, inputProps]);
+        (0, actions_1.updateDefaultProps)(unresolvedComposition.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);
+            }
+        });
+    }, [unresolvedComposition.id, inputProps, schema, z]);
+    (0, react_1.useEffect)(() => {
+        setSaving(false);
+    }, [fastRefreshes]);
     const onSave = (0, react_1.useCallback)((updater) => {
-        (0, actions_1.updateDefaultProps)(composition.id, updater(composition.defaultProps));
-    }, [composition.defaultProps, composition.id]);
+        if (schema === 'no-zod' || z === null) {
+            (0, NotificationCenter_1.sendErrorNotification)('Cannot update default props: No Zod schema');
+            return;
+        }
+        setSaving(true);
+        (0, actions_1.updateDefaultProps)(unresolvedComposition.id, updater(unresolvedComposition.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);
+        });
+    }, [unresolvedComposition.defaultProps, unresolvedComposition.id, schema, z]);
     const connectionStatus = (0, react_1.useContext)(client_id_1.PreviewServerConnectionCtx).type;
     const warnings = (0, react_1.useMemo)(() => {
-        return (0, get_render_modal_warnings_1.getRenderModalWarnings)({ canSaveDefaultProps, cliProps });
-    }, [canSaveDefaultProps, cliProps]);
+        return (0, get_render_modal_warnings_1.getRenderModalWarnings)({
+            canSaveDefaultProps,
+            cliProps,
+            isCustomDateUsed: serializedJSON ? serializedJSON.customDateUsed : false,
+            customFileUsed: serializedJSON ? serializedJSON.customFileUsed : false,
+            inJSONEditor,
+            propsEditType,
+            jsMapUsed: serializedJSON ? serializedJSON.mapUsed : false,
+            jsSetUsed: serializedJSON ? serializedJSON.setUsed : false,
+        });
+    }, [
+        cliProps,
+        canSaveDefaultProps,
+        inJSONEditor,
+        propsEditType,
+        serializedJSON,
+    ]);
     if (connectionStatus === 'disconnected') {
         return ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 5 }), (0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "The preview server has disconnected. Reconnect to edit the schema." }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2, block: true })] }));
     }
     if (schema === 'no-zod') {
-        // TODO: Make nicer modal for Zod
-        return (0, jsx_runtime_1.jsx)("div", { children: "Install zod" });
+        return (0, jsx_runtime_1.jsx)(SchemaErrorMessages_1.ZodNotInstalled, {});
     }
     if (!z) {
         throw new Error('expected zod');
@@ -199,12 +267,11 @@ const RenderModalData = ({ composition, inputProps, setInputProps, compact, mayS
     if (typeName === z.ZodFirstPartyTypeKind.ZodAny) {
         return (0, jsx_runtime_1.jsx)(SchemaErrorMessages_1.NoSchemaDefined, {});
     }
-    if (!composition.defaultProps) {
+    if (!unresolvedComposition.defaultProps) {
         return (0, jsx_runtime_1.jsx)(SchemaErrorMessages_1.NoDefaultProps, {});
     }
-    const showSaveButton = mayShowSaveButton && canSaveDefaultProps.canUpdate;
     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 })) : ((0, jsx_runtime_1.jsx)(RenderModalJSONInputPropsEditor_1.RenderModalJSONInputPropsEditor, { value: inputProps !== null && inputProps !== void 0 ? inputProps : {}, setValue: setInputProps, zodValidationResult: zodValidationResult, switchToSchema: switchToSchema, onSave: onUpdate, valBeforeSafe: valBeforeSafe, showSaveButton: showSaveButton }))] }));
+                        : null] }), mode === 'schema' ? ((0, jsx_runtime_1.jsx)(SchemaEditor_1.SchemaEditor, { value: inputProps, setValue: setInputProps, schema: schema, zodValidationResult: zodValidationResult, compact: compact, defaultProps: unresolvedComposition.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, onSave: onUpdate, valBeforeSafe: valBeforeSafe, showSaveButton: showSaveButton, serializedJSON: serializedJSON, defaultProps: unresolvedComposition.defaultProps, schema: schema }))] }));
 };
-exports.RenderModalData = RenderModalData;
+exports.DataEditor = DataEditor;

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { z } from 'zod';
+import type { SerializedJSONWithCustomFields } from './SchemaEditor/input-props-serialization';
+export declare type EditType = 'inputProps' | 'defaultProps';
+export declare const RenderModalJSONPropsEditor: React.FC<{
+    value: unknown;
+    setValue: React.Dispatch<React.SetStateAction<Record<string, unknown>>>;
+    onSave: () => void;
+    valBeforeSafe: unknown;
+    showSaveButton: boolean;
+    serializedJSON: SerializedJSONWithCustomFields | null;
+    defaultProps: Record<string, unknown>;
+    schema: z.ZodTypeAny;
+}>;

package/dist/editor/components/RenderModal/{RenderModalJSONInputPropsEditor.js → RenderModalJSONPropsEditor.js}

@@ -23,46 +23,44 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RenderModalJSONInputPropsEditor = void 0;
+exports.RenderModalJSONPropsEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const Button_1 = require("../../../preview-server/error-overlay/remotion-overlay/Button");
+const colors_1 = require("../../helpers/colors");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
 const layout_1 = require("../layout");
 const RemTextarea_1 = require("../NewComposition/RemTextarea");
 const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
-const date_serialization_1 = require("./SchemaEditor/date-serialization");
-const parseJSON = (str) => {
-    try {
-        const value = (0, date_serialization_1.deserializeJSONWithDate)(str);
-        return { str, value, validJSON: true };
-    }
-    catch (e) {
-        return { str, validJSON: false, error: e.message };
-    }
-};
+const input_props_serialization_1 = require("./SchemaEditor/input-props-serialization");
+const ZodErrorMessages_1 = require("./SchemaEditor/ZodErrorMessages");
 const style = {
     fontFamily: 'monospace',
     flex: 1,
 };
-const schemaButton = {
-    border: 'none',
-    padding: 0,
-    display: 'inline-block',
-    cursor: 'pointer',
-    backgroundColor: 'transparent',
-};
 const scrollable = {
     padding: '8px 12px',
     display: 'flex',
     flexDirection: 'column',
     flex: 1,
 };
-// TODO: Note if custom 'remotion-date:' pattern has been used
-const RenderModalJSONInputPropsEditor = ({ setValue, value, zodValidationResult, switchToSchema, onSave, valBeforeSafe, showSaveButton, }) => {
+const parseJSON = (str, schema) => {
+    try {
+        const value = (0, input_props_serialization_1.deserializeJSONWithCustomFields)(str);
+        const zodValidation = schema.safeParse(value);
+        return { str, value, validJSON: true, zodValidation };
+    }
+    catch (e) {
+        return { str, validJSON: false, error: e.message };
+    }
+};
+const RenderModalJSONPropsEditor = ({ setValue, value, defaultProps, onSave, valBeforeSafe, showSaveButton, serializedJSON, schema, }) => {
+    if (serializedJSON === null) {
+        throw new Error('expecting serializedJSON to be defined');
+    }
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const [localValue, setLocalValue] = react_1.default.useState(() => {
-        return parseJSON((0, date_serialization_1.serializeJSONWithDate)(value, 2));
+        return parseJSON(serializedJSON.serializedString, schema);
     });
     const onPretty = (0, react_1.useCallback)(() => {
         if (!localValue.validJSON) {
@@ -70,15 +68,20 @@ const RenderModalJSONInputPropsEditor = ({ setValue, value, zodValidationResult,
         }
         const parsed = JSON.parse(localValue.str);
         setLocalValue({ ...localValue, str: JSON.stringify(parsed, null, 2) });
-    }, [localValue]);
+    }, [localValue, setLocalValue]);
     const onChange = (0, react_1.useCallback)((e) => {
-        const parsed = parseJSON(e.target.value);
+        const parsed = parseJSON(e.target.value, schema);
         if (parsed.validJSON) {
+            const validationResult = schema.safeParse(parsed.value);
             setLocalValue({
                 str: e.target.value,
                 value: parsed.value,
                 validJSON: parsed.validJSON,
+                zodValidation: validationResult,
             });
+            if (validationResult.success) {
+                setValue(parsed.value);
+            }
         }
         else {
             setLocalValue({
@@ -87,10 +90,7 @@ const RenderModalJSONInputPropsEditor = ({ setValue, value, zodValidationResult,
                 error: parsed.error,
             });
         }
-        if (parsed.validJSON) {
-            setValue(parsed.value);
-        }
-    }, [setValue]);
+    }, [schema, setValue]);
     const hasChanged = (0, react_1.useMemo)(() => {
         return value && JSON.stringify(value) !== JSON.stringify(valBeforeSafe);
     }, [valBeforeSafe, value]);
@@ -99,6 +99,10 @@ const RenderModalJSONInputPropsEditor = ({ setValue, value, zodValidationResult,
             onSave();
         }
     }, [hasChanged, onSave]);
+    // If schema is changed in code
+    (0, react_1.useEffect)(() => {
+        setLocalValue(parseJSON(localValue.str, schema));
+    }, [localValue.str, schema]);
     (0, react_1.useEffect)(() => {
         const save = keybindings.registerKeybinding({
             event: 'keydown',
@@ -112,7 +116,24 @@ const RenderModalJSONInputPropsEditor = ({ setValue, value, zodValidationResult,
             save.unregister();
         };
     }, [keybindings, onQuickSave, onSave]);
-    // TODO: Indicate saving progress
-    return ((0, jsx_runtime_1.jsxs)("div", { style: scrollable, children: [(0, jsx_runtime_1.jsx)(RemTextarea_1.RemTextarea, { onChange: onChange, value: localValue.str, status: localValue.validJSON ? 'ok' : 'error', style: style }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), localValue.validJSON === false ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: localValue.error, type: "error" })) : zodValidationResult.success === false ? ((0, jsx_runtime_1.jsx)("button", { type: "button", style: schemaButton, onClick: switchToSchema, children: (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: "Does not match schema", type: "warning" }) })) : null, (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { disabled: !localValue.validJSON, onClick: onPretty, children: "Format JSON" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onSave, disabled: !zodValidationResult.success || !hasChanged || !showSaveButton, children: "Save" })] })] }));
+    const reset = (0, react_1.useCallback)(() => {
+        setLocalValue(parseJSON(serializedJSON.serializedString, schema));
+        setValue(defaultProps);
+    }, [defaultProps, schema, serializedJSON.serializedString, setValue]);
+    const textAreaStyle = (0, react_1.useMemo)(() => {
+        const fail = !localValue.validJSON || !localValue.zodValidation.success;
+        if (!fail) {
+            return style;
+        }
+        return {
+            ...style,
+            borderColor: colors_1.FAIL_COLOR,
+        };
+    }, [localValue]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: scrollable, children: [(0, jsx_runtime_1.jsx)(RemTextarea_1.RemTextarea, { onChange: onChange, value: localValue.str, status: localValue.validJSON ? 'ok' : 'error', style: textAreaStyle }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), localValue.validJSON === false ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: localValue.error, type: "error" })) : localValue.zodValidation.success === false ? ((0, jsx_runtime_1.jsx)(ZodErrorMessages_1.ZodErrorMessages, { zodValidationResult: localValue.zodValidation })) : null, (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { disabled: !localValue.validJSON ||
+                            !(localValue.validJSON && !localValue.zodValidation.success), onClick: reset, children: "Reset" }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(Button_1.Button, { disabled: !localValue.validJSON, onClick: onPretty, children: "Format" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onSave, disabled: !(localValue.validJSON && localValue.zodValidation.success) ||
+                            !localValue.validJSON ||
+                            !hasChanged ||
+                            !showSaveButton, children: "Save" })] })] }));
 };
-exports.RenderModalJSONInputPropsEditor = RenderModalJSONInputPropsEditor;
+exports.RenderModalJSONPropsEditor = RenderModalJSONPropsEditor;

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

@@ -12,7 +12,7 @@ export declare const RenderModalPicture: React.FC<{
     setPixelFormat: React.Dispatch<React.SetStateAction<PixelFormat>>;
     imageFormatOptions: SegmentedControlItem[];
     setQualityControl: React.Dispatch<React.SetStateAction<QualityControl>>;
-    qualityControlType: QualityControl;
+    qualityControlType: QualityControl | null;
     videoImageFormat: VideoImageFormat;
     stillImageFormat: StillImageFormat;
     setJpegQuality: React.Dispatch<React.SetStateAction<number>>;
@@ -20,9 +20,9 @@ export declare const RenderModalPicture: React.FC<{
     maxCrf: number;
     minCrf: number;
     setCrf: React.Dispatch<React.SetStateAction<number>>;
-    shouldDisplayCrfOption: boolean;
     setCustomTargetVideoBitrateValue: React.Dispatch<React.SetStateAction<string>>;
     crf: number;
     customTargetVideoBitrate: string;
+    shouldDisplayQualityControlPicker: boolean;
 }>;
 export {};

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

@@ -19,7 +19,7 @@ const qualityControlModes = ['crf', 'bitrate'];
 const container = {
     flex: 1,
 };
-const RenderModalPicture = ({ renderMode, scale, setScale, pixelFormat, setPixelFormat, imageFormatOptions, setQualityControl, qualityControlType, videoImageFormat, setJpegQuality, jpegQuality, maxCrf, minCrf, setCrf, shouldDisplayCrfOption, setCustomTargetVideoBitrateValue, crf, customTargetVideoBitrate, stillImageFormat, }) => {
+const RenderModalPicture = ({ renderMode, scale, setScale, pixelFormat, setPixelFormat, imageFormatOptions, setQualityControl, qualityControlType, videoImageFormat, setJpegQuality, jpegQuality, maxCrf, minCrf, setCrf, shouldDisplayQualityControlPicker, setCustomTargetVideoBitrateValue, crf, customTargetVideoBitrate, stillImageFormat, }) => {
     const pixelFormatOptions = (0, react_1.useMemo)(() => {
         return client_1.BrowserSafeApis.validPixelFormats.map((option) => {
             return {
@@ -49,8 +49,6 @@ const RenderModalPicture = ({ renderMode, scale, setScale, pixelFormat, setPixel
     const onTargetVideoBitrateChanged = (0, react_1.useCallback)((e) => {
         setCustomTargetVideoBitrateValue(e.target.value);
     }, [setCustomTargetVideoBitrateValue]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Image Format" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: imageFormatOptions, needsWrapping: false }) })] })) : null, renderMode === 'video' && videoImageFormat === 'jpeg' && ((0, jsx_runtime_1.jsx)(JpegQualitySetting_1.JpegQualitySetting, { jpegQuality: jpegQuality, setJpegQuality: setJpegQuality })), renderMode === 'still' && stillImageFormat === 'jpeg' && ((0, jsx_runtime_1.jsx)(JpegQualitySetting_1.JpegQualitySetting, { jpegQuality: jpegQuality, setJpegQuality: setJpegQuality })), renderMode === 'video' ? (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}) : null, renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Quality control" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: qualityControlOptions, needsWrapping: true }) })] })) : null, shouldDisplayCrfOption &&
-                qualityControlType === 'crf' &&
-                renderMode !== 'still' ? ((0, jsx_runtime_1.jsx)(CrfSetting_1.CrfSetting, { crf: crf, min: minCrf, max: maxCrf, setCrf: setCrf, option: client_1.BrowserSafeApis.options.crfOption })) : null, qualityControlType === 'bitrate' && renderMode !== 'still' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Target video bitrate" }), (0, jsx_runtime_1.jsx)(InfoBubble_1.InfoBubble, { title: "Learn more about this option", children: (0, jsx_runtime_1.jsx)(OptionExplainer_1.OptionExplainer, { option: client_1.BrowserSafeApis.options.videoBitrate }) }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { style: layout_1.input, value: customTargetVideoBitrate, onChange: onTargetVideoBitrateChanged, status: "ok", rightAlign: true }) }) })] })) : null, renderMode === 'video' ? (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}) : null, (0, jsx_runtime_1.jsx)(ScaleSetting_1.ScaleSetting, { scale: scale, setScale: setScale }), renderMode === 'video' ? (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}) : null, renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Pixel format" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: pixelFormatOptions, selectedId: pixelFormat, title: "Pixel Format" }) })] })) : null] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Image Format" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: imageFormatOptions, needsWrapping: false }) })] })) : null, renderMode === 'video' && videoImageFormat === 'jpeg' && ((0, jsx_runtime_1.jsx)(JpegQualitySetting_1.JpegQualitySetting, { jpegQuality: jpegQuality, setJpegQuality: setJpegQuality })), renderMode === 'still' && stillImageFormat === 'jpeg' && ((0, jsx_runtime_1.jsx)(JpegQualitySetting_1.JpegQualitySetting, { jpegQuality: jpegQuality, setJpegQuality: setJpegQuality })), renderMode === 'video' && qualityControlType !== null ? ((0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {})) : null, shouldDisplayQualityControlPicker && renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Quality control" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: qualityControlOptions, needsWrapping: true }) })] })) : null, qualityControlType === 'crf' && renderMode !== 'still' ? ((0, jsx_runtime_1.jsx)(CrfSetting_1.CrfSetting, { crf: crf, min: minCrf, max: maxCrf, setCrf: setCrf, option: client_1.BrowserSafeApis.options.crfOption })) : null, qualityControlType === 'bitrate' && renderMode !== 'still' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_1.label, children: ["Target video bitrate", (0, jsx_runtime_1.jsx)(InfoBubble_1.InfoBubble, { title: "Learn more about this option", children: (0, jsx_runtime_1.jsx)(OptionExplainer_1.OptionExplainer, { option: client_1.BrowserSafeApis.options.videoBitrate }) })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { style: layout_1.input, value: customTargetVideoBitrate, onChange: onTargetVideoBitrateChanged, status: "ok", rightAlign: true }) }) })] })) : null, renderMode === 'video' ? (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}) : null, (0, jsx_runtime_1.jsx)(ScaleSetting_1.ScaleSetting, { scale: scale, setScale: setScale }), renderMode === 'video' ? (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}) : null, renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Pixel format" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: pixelFormatOptions, selectedId: pixelFormat, title: "Pixel Format" }) })] })) : null] }));
 };
 exports.RenderModalPicture = RenderModalPicture;

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

@@ -1,12 +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, }) => {
+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 }) }));
+    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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import type { z } from 'zod';
+export declare const ZodNotInstalled: () => JSX.Element;
 export declare const NoSchemaDefined: () => JSX.Element;
 export declare const NoDefaultProps: () => JSX.Element;
 export declare const InvalidDefaultProps: React.FC<{
@@ -9,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,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InvalidSchema = exports.InvalidDefaultProps = exports.NoDefaultProps = exports.NoSchemaDefined = 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");
 const layout_1 = require("../../layout");
+const styles_1 = require("../../Menu/styles");
 const SchemaEmptyStateGraphic_1 = require("./SchemaEmptyStateGraphic");
 const ZodErrorMessages_1 = require("./ZodErrorMessages");
 const explainer = {
@@ -24,7 +25,7 @@ const errorExplanation = {
 };
 const codeSnippet = {
     fontSize: 14,
-    color: 'var(--blue)',
+    color: colors_1.BLUE,
     fontFamily: 'monospace',
 };
 const errorContainer = {
@@ -36,20 +37,28 @@ const openDocs = () => {
     // TODO: Make sure to update this link when we release v4
     'https://v4.remotion.dev/docs/parametrized-rendering#define-a-schema-');
 };
+const ZodNotInstalled = () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["Install ", (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "zod" }), " as a dependency to interactively control the props of the composition."] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2, block: true }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: openDocs, children: "Learn how" })] }));
+};
+exports.ZodNotInstalled = ZodNotInstalled;
 const NoSchemaDefined = () => {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsx)(SchemaEmptyStateGraphic_1.SchemaEmptyStateGraphic, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 5 }), (0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["Make the props of this composition interactively editable by adding a", ' ', (0, jsx_runtime_1.jsx)("code", { style: codeSnippet, children: "schema" }), " prop to the", ' ', (0, jsx_runtime_1.jsx)("code", { style: codeSnippet, children: '<Composition>' }), " component."] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2, block: true }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: openDocs, children: "Learn how" })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsx)(SchemaEmptyStateGraphic_1.SchemaEmptyStateGraphic, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 5 }), (0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["Make the props of this composition interactively editable by adding a", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "schema" }), " prop to the", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: '<Composition>' }), " component."] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2, block: true }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: openDocs, children: "Learn how" })] }));
 };
 exports.NoSchemaDefined = NoSchemaDefined;
 const NoDefaultProps = () => {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["The schema can not be edited because the", ' ', (0, jsx_runtime_1.jsx)("code", { style: codeSnippet, children: "defaultProps" }), " prop in the", ' ', (0, jsx_runtime_1.jsx)("code", { style: codeSnippet, children: '<Composition>' }), " does not exist."] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["Fix the schema by adding a ", (0, jsx_runtime_1.jsx)("code", { style: codeSnippet, children: "defaultProps" }), ' ', "prop to your composition."] }), (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" })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["The schema can not be edited because the", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "defaultProps" }), " prop in the", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: '<Composition>' }), " does not exist."] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["Fix the schema by adding a", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "defaultProps" }), " prop to your composition."] }), (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.NoDefaultProps = NoDefaultProps;
 const InvalidDefaultProps = ({ zodValidationResult }) => {
     // TODO: Does not react to when schema is updated
-    return ((0, jsx_runtime_1.jsxs)("div", { style: errorContainer, children: [(0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["The schema can not be edited because the", ' ', (0, jsx_runtime_1.jsx)("code", { style: codeSnippet, children: "defaultProps" }), " prop in the", ' ', (0, jsx_runtime_1.jsx)("code", { style: codeSnippet, children: '<Composition>' }), " is not valid:"] }), (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.jsxs)("div", { style: errorExplanation, children: ["Fix the schema by changing the", ' ', (0, jsx_runtime_1.jsx)("code", { style: codeSnippet, children: "defaultProps" }), " prop in your composition so it does not give a type error."] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: errorContainer, children: [(0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["The schema can not be edited because the", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "defaultProps" }), " prop in the", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: '<Composition>' }), " is not valid:"] }), (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.jsxs)("div", { style: errorExplanation, children: ["Fix the schema by changing the", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "defaultProps" }), " prop in your composition so it does not give a type error."] })] }));
 };
 exports.InvalidDefaultProps = InvalidDefaultProps;
 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", { 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" })] }));
+    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: styles_1.inlineCodeSnippet, 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

@@ -8,8 +8,13 @@ export declare const SchemaLabel: React.FC<{
     onRemove: null | (() => void);
     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, }) => {
-    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 })) : 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/SchemaResetButton.js

@@ -2,11 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SchemaResetButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const InlineAction_1 = require("../../InlineAction");
 const icon = {
     height: 14,
+    color: 'currentColor',
 };
 const SchemaResetButton = ({ onClick }) => {
-    return ((0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: onClick, children: (0, jsx_runtime_1.jsx)("svg", { style: icon, viewBox: "0 0 512 512", children: (0, jsx_runtime_1.jsx)("path", { fill: "currentcolor", d: "M48.5 224H40c-13.3 0-24-10.7-24-24V72c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2L98.6 96.6c87.6-86.5 228.7-86.2 315.8 1c87.5 87.5 87.5 229.3 0 316.8s-229.3 87.5-316.8 0c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0c62.5 62.5 163.8 62.5 226.3 0s62.5-163.8 0-226.3c-62.2-62.2-162.7-62.5-225.3-1L185 183c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8H48.5z" }) }) }));
+    const renderAction = (0, react_1.useCallback)((color) => {
+        return ((0, jsx_runtime_1.jsx)("svg", { style: icon, viewBox: "0 0 512 512", children: (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M48.5 224H40c-13.3 0-24-10.7-24-24V72c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2L98.6 96.6c87.6-86.5 228.7-86.2 315.8 1c87.5 87.5 87.5 229.3 0 316.8s-229.3 87.5-316.8 0c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0c62.5 62.5 163.8 62.5 226.3 0s62.5-163.8 0-226.3c-62.2-62.2-162.7-62.5-225.3-1L185 183c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8H48.5z" }) }));
+    }, []);
+    return (0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick });
 };
 exports.SchemaResetButton = SchemaResetButton;