@remotion/cli 4.0.0-alpha5 → 4.0.0-alpha7

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

@@ -2,21 +2,54 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CliCopyButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
+const svgStyle = {
+    width: 16,
+    height: 16,
+    verticalAlign: 'sub',
+};
+const copiedStyle = {
+    fontSize: '14px',
+    minHeight: '30px',
+    minWidth: '30px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+};
 const CliCopyButton = ({ valueToCopy, }) => {
-    const iconStyle = {
-        width: 16,
-        height: 16,
-        color: '#a6a8aa',
-        verticalAlign: 'sub',
-    };
-    const clipBoardIcon = ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "far", "data-icon": "clipboard", className: "svg-inline--fa fa-clipboard fa-w-12", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 384 512", style: iconStyle, children: (0, jsx_runtime_1.jsx)("path", { fill: "#a6a8aa", d: "M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm144 418c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V118c0-3.3 2.7-6 6-6h42v36c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-36h42c3.3 0 6 2.7 6 6z" }) }));
-    return ((0, jsx_runtime_1.jsx)("button", { type: "button", style: {
+    const [copied, setCopied] = (0, react_1.useState)(false);
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const fillColor = (0, react_1.useMemo)(() => {
+        return hovered ? 'white' : colors_1.LIGHT_TEXT;
+    }, [hovered]);
+    const clipboardIcon = ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "far", "data-icon": "clipboard", className: "svg-inline--fa fa-clipboard fa-w-12", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 384 512", style: svgStyle, children: (0, jsx_runtime_1.jsx)("path", { fill: fillColor, d: "M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm144 418c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V118c0-3.3 2.7-6 6-6h42v36c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-36h42c3.3 0 6 2.7 6 6z" }) }));
+    const checkSvg = ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", style: svgStyle, children: (0, jsx_runtime_1.jsx)("path", { fill: fillColor, d: "M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" }) }));
+    const onPointerEnter = (0, react_1.useCallback)(() => {
+        setHovered(true);
+    }, []);
+    const onPointerLeave = (0, react_1.useCallback)(() => {
+        setHovered(false);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (!copied) {
+            return;
+        }
+        const handleClear = () => {
+            setCopied(false);
+            setHovered(false);
+        };
+        const to = setTimeout(() => handleClear(), 2000);
+        return () => clearTimeout(to);
+    }, [copied]);
+    return copied ? ((0, jsx_runtime_1.jsx)("span", { style: copiedStyle, children: checkSvg })) : ((0, jsx_runtime_1.jsx)("button", { type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: {
             width: '30px',
             height: '30px',
             border: 'none',
             cursor: 'pointer',
         }, onClick: () => {
             navigator.clipboard.writeText(valueToCopy);
-        }, children: clipBoardIcon }));
+            setCopied(true);
+        }, children: clipboardIcon }));
 };
 exports.CliCopyButton = CliCopyButton;

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

@@ -29,12 +29,13 @@ const InfoTooltip = ({ children, arrowDirection }) => {
             border: '0.5px solid ' + colors_1.BORDER_COLOR,
             maxHeight: 200,
             overflow: 'auto',
+            borderRadius: '4px',
         };
     }, [arrowDirection]);
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
             display: 'flex',
             flexDirection: arrowDirection === 'up' ? 'column-reverse' : 'column',
             alignItems: 'flex-start',
-        }, children: [(0, jsx_runtime_1.jsx)("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: children }), arrowDirection === 'down' ? ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 14 7", style: arrowDown, children: (0, jsx_runtime_1.jsx)("path", { d: `M 14 0 L 7 7 L 0 0`, fill: colors_1.BACKGROUND, strokeLinecap: "butt", stroke: colors_1.BORDER_COLOR, strokeWidth: 0.5 }) })) : null, arrowDirection === 'up' ? ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 14 7", style: arrowUp, children: (0, jsx_runtime_1.jsx)("path", { d: `M 0 7 L 7 0 L 14 7`, fill: colors_1.BACKGROUND, strokeLinecap: "butt", stroke: colors_1.BORDER_COLOR, strokeWidth: 0.5 }) })) : null] }));
+        }, children: [(0, jsx_runtime_1.jsx)("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: children }), arrowDirection === 'down' ? ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 14 7", style: arrowDown, children: (0, jsx_runtime_1.jsx)("path", { d: `M 14 0 L 7 7 L 0 0`, fill: colors_1.INPUT_BACKGROUND, strokeLinecap: "butt", stroke: colors_1.BORDER_COLOR, strokeWidth: 0.5 }) })) : null, arrowDirection === 'up' ? ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 14 7", style: arrowUp, children: (0, jsx_runtime_1.jsx)("path", { d: `M 0 7 L 7 0 L 14 7`, fill: colors_1.INPUT_BACKGROUND, strokeLinecap: "butt", stroke: colors_1.BORDER_COLOR, strokeWidth: 0.5 }) })) : null] }));
 };
 exports.InfoTooltip = InfoTooltip;

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OptionExplainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../../helpers/colors");
 const layout_1 = require("../layout");
 const MenuDivider_1 = require("../Menu/MenuDivider");
 const CliCopyButton_1 = require("./CliCopyButton");
@@ -9,10 +10,11 @@ const container = {
     fontSize: 14,
     paddingTop: 10,
     paddingBottom: 10,
+    backgroundColor: colors_1.INPUT_BACKGROUND,
 };
 const padding = {
-    paddingLeft: 12,
-    paddingRight: 12,
+    paddingLeft: 20,
+    paddingRight: 20,
 };
 const title = {
     fontSize: 14,
@@ -39,7 +41,15 @@ const infoRowLabel = {
     fontSize: 14,
     color: 'white',
 };
+const flexSpacer = {
+    display: 'flex',
+    flex: 1,
+};
+const copyWrapper = {
+    display: 'flex',
+    justifyContent: 'flex-end',
+};
 const OptionExplainer = ({ option }) => {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "__remotion-info-button-container", children: [(0, jsx_runtime_1.jsxs)("div", { style: padding, children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("strong", { style: title, children: option.name }) }), (0, jsx_runtime_1.jsx)("div", { style: description, children: option.description })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 0.5, block: true }), (0, jsx_runtime_1.jsx)(MenuDivider_1.MenuDivider, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 0.5, block: true }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { style: infoRow, children: [(0, jsx_runtime_1.jsx)("div", { style: infoRowLabel, children: "CLI flag:" }), (0, jsx_runtime_1.jsx)("code", { children: option.cliFlag }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', justifyContent: 'flex-end', flex: 1 }, children: (0, jsx_runtime_1.jsx)(CliCopyButton_1.CliCopyButton, { valueToCopy: option.cliFlag }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: infoRow, children: [(0, jsx_runtime_1.jsx)("div", { style: infoRowLabel, children: "Node.JS option:" }), (0, jsx_runtime_1.jsx)("code", { children: option.ssrName })] }), (0, jsx_runtime_1.jsx)("div", { style: infoRow, children: (0, jsx_runtime_1.jsx)("a", { style: link, href: option.docLink, target: "_blank", children: "Docs" }) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "__remotion-info-button-container", children: [(0, jsx_runtime_1.jsxs)("div", { style: padding, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { style: title, children: option.name }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("a", { style: link, href: option.docLink, target: "_blank", children: "Docs" })] }), (0, jsx_runtime_1.jsx)("div", { style: description, children: option.description })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 0.5, block: true }), (0, jsx_runtime_1.jsx)(MenuDivider_1.MenuDivider, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 0.5, block: true }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { style: infoRow, children: [(0, jsx_runtime_1.jsx)("div", { style: infoRowLabel, children: "CLI flag" }), (0, jsx_runtime_1.jsx)("div", { style: flexSpacer }), (0, jsx_runtime_1.jsx)("code", { children: option.cliFlag }), (0, jsx_runtime_1.jsx)("div", { style: copyWrapper, children: (0, jsx_runtime_1.jsx)(CliCopyButton_1.CliCopyButton, { valueToCopy: option.cliFlag }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: infoRow, children: [(0, jsx_runtime_1.jsx)("div", { style: infoRowLabel, children: "Node.JS option" }), (0, jsx_runtime_1.jsx)("div", { style: flexSpacer }), (0, jsx_runtime_1.jsx)("code", { children: option.ssrName }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 3.75 })] }), (0, jsx_runtime_1.jsx)("div", { style: infoRow })] })] }));
 };
 exports.OptionExplainer = OptionExplainer;

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

@@ -37,7 +37,8 @@ const actions_1 = require("../RenderQueue/actions");
 const SegmentedControl_1 = require("../SegmentedControl");
 const get_render_modal_warnings_1 = require("./get-render-modal-warnings");
 const RenderModalJSONPropsEditor_1 = require("./RenderModalJSONPropsEditor");
-const date_serialization_1 = require("./SchemaEditor/date-serialization");
+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");
@@ -77,7 +78,7 @@ const tabWrapper = {
 const persistanceKey = 'remotion.show-render-modalwarning';
 const parseJSON = (str) => {
     try {
-        const value = (0, date_serialization_1.deserializeJSONWithDate)(str);
+        const value = (0, input_props_serialization_1.deserializeJSONWithCustomFields)(str);
         return { str, value, validJSON: true };
     }
     catch (e) {
@@ -105,7 +106,11 @@ const RenderModalData = ({ composition, inputProps, setInputProps, compact, mayS
             return null;
         }
         const value = inputProps !== null && inputProps !== void 0 ? inputProps : {};
-        return (0, date_serialization_1.serializeJSONWithDate)(value, 2);
+        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)({
@@ -192,25 +197,34 @@ const RenderModalData = ({ composition, inputProps, setInputProps, compact, mayS
         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)(composition.id, inputProps, (0, extract_enum_json_paths_1.extractEnumJsonPaths)(schema, z, []));
+    }, [composition.id, inputProps, schema, z]);
     (0, react_1.useEffect)(() => {
         setSaving(false);
     }, [fastRefreshes]);
     const onSave = (0, react_1.useCallback)((updater) => {
+        if (schema === 'no-zod' || z === null) {
+            (0, NotificationCenter_1.sendErrorNotification)('Cannot update default props: No Zod schema');
+            return;
+        }
         setSaving(true);
-        (0, actions_1.updateDefaultProps)(composition.id, updater(composition.defaultProps)).catch((err) => {
+        (0, actions_1.updateDefaultProps)(composition.id, updater(composition.defaultProps), (0, extract_enum_json_paths_1.extractEnumJsonPaths)(schema, z, [])).catch((err) => {
             (0, NotificationCenter_1.sendErrorNotification)(`Cannot update default props: ${err.message}`);
             setSaving(false);
         });
-    }, [composition.defaultProps, composition.id]);
+    }, [composition.defaultProps, composition.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,
             isCustomDateUsed: serializedJSON ? serializedJSON.customDateUsed : false,
+            customFileUsed: serializedJSON ? serializedJSON.customFileUsed : false,
             inJSONEditor,
             propsEditType,
         });

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { State } from './RenderModalData';
-import type { SerializedJSONWithDate } from './SchemaEditor/date-serialization';
+import type { SerializedJSONWithCustomFields } from './SchemaEditor/input-props-serialization';
 export declare type EditType = 'inputProps' | 'defaultProps';
 export declare const RenderModalJSONPropsEditor: React.FC<{
     value: unknown;
@@ -11,5 +11,5 @@ export declare const RenderModalJSONPropsEditor: React.FC<{
     valBeforeSafe: unknown;
     showSaveButton: boolean;
     parseJSON: (str: string) => State;
-    serializedJSON: SerializedJSONWithDate | null;
+    serializedJSON: SerializedJSONWithCustomFields | null;
 }>;

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

@@ -49,6 +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' && 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.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/SchemaErrorMessages.js

@@ -54,6 +54,6 @@ const InvalidDefaultProps = ({ zodValidationResult }) => {
 };
 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: 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;

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

@@ -1,13 +1,14 @@
 import React from 'react';
 import type { z } from 'zod';
 import type { JSONPath } from './zod-types';
+import type { UpdaterFunction } from './ZodSwitch';
 export declare const ZodArrayEditor: React.FC<{
     schema: z.ZodTypeAny;
     jsonPath: JSONPath;
     value: unknown[];
     defaultValue: unknown[];
-    setValue: React.Dispatch<React.SetStateAction<unknown[]>>;
-    onSave: (updater: (oldState: unknown[]) => unknown[]) => void;
+    setValue: UpdaterFunction<unknown[]>;
+    onSave: UpdaterFunction<unknown[]>;
     compact: boolean;
     showSaveButton: boolean;
     onRemove: null | (() => void);

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

@@ -73,7 +73,7 @@ const ZodArrayEditor = ({ schema, jsonPath, compact, setValue: updateValue, defa
         onChange((oldV) => {
             return [...oldV, (0, create_zod_values_1.createZodValues)(def.type, z, zodTypes)];
         }, true);
-    }, [def.type, onChange, z]);
+    }, [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) => {
                             var _a;
                             return ((0, jsx_runtime_1.jsx)(ZodArrayItemEditor_1.ZodArrayItemEditor

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

@@ -1,9 +1,10 @@
 import React from 'react';
 import type { JSONPath } from './zod-types';
+import type { UpdaterFunction } from './ZodSwitch';
 export declare const ZodBooleanEditor: React.FC<{
     jsonPath: JSONPath;
     value: boolean;
-    setValue: React.Dispatch<React.SetStateAction<boolean>>;
+    setValue: UpdaterFunction<boolean>;
     compact: boolean;
     defaultValue: boolean;
     onSave: (updater: (oldNum: unknown) => boolean) => void;

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

@@ -11,7 +11,7 @@ const fullWidth = {
 };
 const ZodBooleanEditor = ({ jsonPath, value, setValue, onSave, compact, defaultValue, onRemove, showSaveButton, saving, }) => {
     const onValueChange = (0, react_1.useCallback)((newValue) => {
-        setValue(newValue);
+        setValue(() => newValue);
     }, [setValue]);
     const onChange = (0, react_1.useCallback)((e) => {
         onValueChange(e.target.checked);

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

@@ -1,12 +1,13 @@
 import React from 'react';
 import type { z } from 'zod';
 import type { JSONPath } from './zod-types';
+import type { UpdaterFunction } from './ZodSwitch';
 export declare const ZodColorEditor: React.FC<{
     schema: z.ZodTypeAny;
     jsonPath: JSONPath;
     value: string;
     defaultValue: string;
-    setValue: React.Dispatch<React.SetStateAction<string>>;
+    setValue: UpdaterFunction<string>;
     onSave: (updater: (oldNum: unknown) => string) => void;
     onRemove: null | (() => void);
     compact: boolean;

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

@@ -30,15 +30,15 @@ const ZodColorEditor = ({ jsonPath, value, setValue, showSaveButton, defaultValu
             zodValidation: schema.safeParse(value),
         };
     });
-    const onValueChange = (0, react_1.useCallback)((newValue) => {
+    const onValueChange = (0, react_1.useCallback)((newValue, forceApply) => {
         const safeParse = schema.safeParse(newValue);
         const newLocalState = {
             value: newValue,
             zodValidation: safeParse,
         };
         setLocalValue(newLocalState);
-        if (safeParse.success) {
-            setValue(newValue);
+        if (safeParse.success || forceApply) {
+            setValue(() => newValue);
         }
     }, [schema, setValue]);
     const { a, b, g, r } = localValue.zodValidation.success
@@ -53,7 +53,7 @@ const ZodColorEditor = ({ jsonPath, value, setValue, showSaveButton, defaultValu
         };
         setLocalValue(newLocalState);
         if (safeParse.success) {
-            setValue(newColor);
+            setValue(() => newColor);
         }
     }, [a, schema, setValue, zodTypes]);
     const onTextChange = (0, react_1.useCallback)((e) => {
@@ -65,11 +65,11 @@ const ZodColorEditor = ({ jsonPath, value, setValue, showSaveButton, defaultValu
         };
         setLocalValue(newLocalState);
         if (safeParse.success) {
-            setValue(newValue);
+            setValue(() => newValue);
         }
     }, [schema, setValue]);
     const reset = (0, react_1.useCallback)(() => {
-        onValueChange(defaultValue);
+        onValueChange(defaultValue, true);
     }, [defaultValue, onValueChange]);
     const save = (0, react_1.useCallback)(() => {
         onSave(() => value);
@@ -94,7 +94,7 @@ const ZodColorEditor = ({ jsonPath, value, setValue, showSaveButton, defaultValu
         };
         setLocalValue(newLocalState);
         if (safeParse.success) {
-            setValue(newColor);
+            setValue(() => newColor);
         }
     }, [localValue.value, schema, setValue, zodTypes]);
     const onOpacityValueChange = (0, react_1.useCallback)((newValue) => {
@@ -106,7 +106,7 @@ const ZodColorEditor = ({ jsonPath, value, setValue, showSaveButton, defaultValu
         };
         setLocalValue(newLocalState);
         if (safeParse.success) {
-            setValue(newColor);
+            setValue(() => newColor);
         }
     }, [localValue.value, schema, setValue, zodTypes]);
     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: value === defaultValue, jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving }), (0, jsx_runtime_1.jsxs)("div", { style: fullWidth, children: [(0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: colorPicker, children: (0, jsx_runtime_1.jsx)(RemInputTypeColor_1.RemInputTypeColor, { type: "color", style: {

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

@@ -1,12 +1,13 @@
 import React from 'react';
 import type { z } from 'zod';
 import type { JSONPath } from './zod-types';
+import type { UpdaterFunction } from './ZodSwitch';
 export declare const ZodDateEditor: React.FC<{
     schema: z.ZodTypeAny;
     jsonPath: JSONPath;
     value: Date;
     defaultValue: Date;
-    setValue: React.Dispatch<React.SetStateAction<Date>>;
+    setValue: UpdaterFunction<Date>;
     onSave: (updater: (oldNum: unknown) => Date) => void;
     onRemove: null | (() => void);
     compact: boolean;

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

@@ -50,23 +50,23 @@ const ZodDateEditor = ({ jsonPath, value, setValue, showSaveButton, defaultValue
             zodValidation: schema.safeParse(value),
         };
     });
-    const onValueChange = (0, react_1.useCallback)((newValue) => {
+    const onValueChange = (0, react_1.useCallback)((newValue, forceApply) => {
         const safeParse = schema.safeParse(newValue);
         const newLocalState = {
             value: newValue,
             zodValidation: safeParse,
         };
         setLocalValue(newLocalState);
-        if (safeParse.success) {
-            setValue(newValue);
+        if (safeParse.success || forceApply) {
+            setValue(() => newValue);
         }
     }, [schema, setValue]);
     const onChange = (0, react_1.useCallback)((e) => {
         // React does not support e.target.valueAsDate :(
-        onValueChange(new Date(e.target.value));
+        onValueChange(new Date(e.target.value), false);
     }, [onValueChange]);
     const reset = (0, react_1.useCallback)(() => {
-        onValueChange(defaultValue);
+        onValueChange(defaultValue, true);
     }, [defaultValue, onValueChange]);
     const save = (0, react_1.useCallback)(() => {
         onSave(() => value);

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

@@ -5,7 +5,7 @@ export declare const ZodEffectEditor: React.FC<{
     schema: z.ZodTypeAny;
     jsonPath: JSONPath;
     value: unknown;
-    setValue: (value: unknown) => void;
+    setValue: (updater: (oldState: unknown) => unknown) => void;
     compact: boolean;
     defaultValue: unknown;
     onSave: (updater: (oldState: unknown) => unknown) => void;

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

@@ -26,8 +26,9 @@ const ZodEffectEditor = ({ schema, jsonPath, value, setValue: updateValue, compa
     if (typeName !== z.ZodFirstPartyTypeKind.ZodEffects) {
         throw new Error('expected effect');
     }
-    const onChange = (0, react_1.useCallback)((newValue) => {
-        setLocalValue(() => {
+    const onChange = (0, react_1.useCallback)((updater) => {
+        setLocalValue((oldLocalState) => {
+            const newValue = updater(oldLocalState.value);
             const safeParse = schema.safeParse(newValue);
             if (safeParse.success) {
                 updateValue(() => newValue);

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

@@ -1,13 +1,14 @@
 import React from 'react';
 import type { z } from 'zod';
 import type { JSONPath } from './zod-types';
+import type { UpdaterFunction } from './ZodSwitch';
 export declare const ZodEnumEditor: React.FC<{
     schema: z.ZodTypeAny;
     jsonPath: JSONPath;
     value: string;
     defaultValue: string;
-    setValue: React.Dispatch<React.SetStateAction<string>>;
-    onSave: (updater: (oldState: string) => string) => void;
+    setValue: UpdaterFunction<string>;
+    onSave: UpdaterFunction<string>;
     compact: boolean;
     showSaveButton: boolean;
     onRemove: null | (() => void);

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

@@ -31,11 +31,11 @@ const ZodEnumEditor = ({ schema, jsonPath, compact, setValue: updateValue, defau
         throw new Error('expected enum');
     }
     const isRoot = jsonPath.length === 0;
-    const onChange = (0, react_1.useCallback)((updater) => {
+    const onChange = (0, react_1.useCallback)((updater, forceApply) => {
         setLocalValue((oldLocalState) => {
             const newValue = updater(oldLocalState.value);
             const safeParse = schema.safeParse(newValue);
-            if (safeParse.success) {
+            if (safeParse.success || forceApply) {
                 updateValue(updater);
             }
             return {
@@ -45,7 +45,7 @@ const ZodEnumEditor = ({ schema, jsonPath, compact, setValue: updateValue, defau
         });
     }, [schema, updateValue]);
     const reset = (0, react_1.useCallback)(() => {
-        onChange(() => defaultValue);
+        onChange(() => defaultValue, true);
     }, [defaultValue, onChange]);
     const comboBoxValues = (0, react_1.useMemo)(() => {
         return def.values.map((option) => {
@@ -56,7 +56,7 @@ const ZodEnumEditor = ({ schema, jsonPath, compact, setValue: updateValue, defau
                 keyHint: null,
                 leftItem: option === value ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
                 onClick: (id) => {
-                    onChange(() => id);
+                    onChange(() => id, false);
                 },
                 quickSwitcherLabel: null,
                 subMenu: null,

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

@@ -8,7 +8,7 @@ export declare const ZodNullableEditor: React.FC<{
     value: unknown;
     defaultValue: unknown;
     schema: z.ZodTypeAny;
-    setValue: React.Dispatch<React.SetStateAction<unknown>>;
+    setValue: (updater: (oldNum: unknown) => unknown) => void;
     onSave: (updater: (oldNum: unknown) => unknown) => void;
     onRemove: null | (() => void);
     saving: boolean;

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

@@ -1,11 +1,12 @@
 import React from 'react';
 import type { z } from 'zod';
 import type { JSONPath } from './zod-types';
+import type { UpdaterFunction } from './ZodSwitch';
 export declare const ZodNumberEditor: React.FC<{
     schema: z.ZodTypeAny;
     jsonPath: JSONPath;
     value: number;
-    setValue: React.Dispatch<React.SetStateAction<number>>;
+    setValue: UpdaterFunction<number>;
     compact: boolean;
     defaultValue: number;
     onSave: (updater: (oldNum: unknown) => number) => void;

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

@@ -62,27 +62,30 @@ const ZodNumberEditor = ({ jsonPath, value, schema, setValue, onSave, compact, d
         };
         setLocalValue(newLocalState);
         if (safeParse.success) {
-            setValue(Number(newValue));
+            setValue(() => Number(newValue));
         }
     }, [schema, setValue]);
-    const onValueChange = (0, react_1.useCallback)((newValue) => {
+    const onValueChange = (0, react_1.useCallback)((newValue, forceApply) => {
         const safeParse = schema.safeParse(newValue);
         const newLocalState = {
             value: String(newValue),
             zodValidation: safeParse,
         };
         setLocalValue(newLocalState);
-        if (safeParse.success) {
-            setValue(newValue);
+        if (safeParse.success || forceApply) {
+            setValue(() => newValue);
         }
     }, [schema, setValue]);
+    const onNumberChange = (0, react_1.useCallback)((newValue) => {
+        onValueChange(newValue, false);
+    }, [onValueChange]);
     const isDefault = value === defaultValue;
     const reset = (0, react_1.useCallback)(() => {
-        onValueChange(defaultValue);
+        onValueChange(defaultValue, true);
     }, [defaultValue, onValueChange]);
     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, { isDefaultValue: isDefault, jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, compact: compact, onRemove: onRemove, saving: saving }), (0, jsx_runtime_1.jsxs)("div", { style: fullWidth, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: 'number', value: localValue.value, style: fullWidth, status: localValue.zodValidation.success ? 'ok' : 'error', placeholder: jsonPath.join('.'), onTextChange: onChange, onValueChange: onValueChange, min: getMinValue(schema), max: getMaxValue(schema), step: getStep(schema), rightAlign: false }), !localValue.zodValidation.success && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: localValue.zodValidation.error.format()._errors[0], type: "error" })] }))] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: compact ? layout_2.narrowOption : layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { isDefaultValue: isDefault, jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, compact: compact, onRemove: onRemove, saving: saving }), (0, jsx_runtime_1.jsxs)("div", { style: fullWidth, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: 'number', value: localValue.value, style: fullWidth, status: localValue.zodValidation.success ? 'ok' : 'error', placeholder: jsonPath.join('.'), onTextChange: onChange, onValueChange: onNumberChange, min: getMinValue(schema), max: getMaxValue(schema), step: getStep(schema), rightAlign: false }), !localValue.zodValidation.success && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: localValue.zodValidation.error.format()._errors[0], type: "error" })] }))] })] }));
 };
 exports.ZodNumberEditor = ZodNumberEditor;

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

@@ -6,7 +6,7 @@ export declare const ZodObjectEditor: React.FC<{
     jsonPath: JSONPath;
     value: unknown;
     defaultValue: unknown;
-    setValue: React.Dispatch<React.SetStateAction<unknown>>;
+    setValue: (updater: (oldState: Record<string, unknown>) => Record<string, unknown>) => void;
     compact: boolean;
     onSave: (updater: (oldVal: Record<string, unknown>) => Record<string, unknown>) => void;
     showSaveButton: boolean;

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

@@ -8,7 +8,7 @@ export declare const ZodOptionalEditor: React.FC<{
     value: unknown;
     defaultValue: unknown;
     schema: z.ZodTypeAny;
-    setValue: React.Dispatch<React.SetStateAction<unknown>>;
+    setValue: (updater: (oldNum: unknown) => unknown) => void;
     onSave: (updater: (oldNum: unknown) => unknown) => void;
     onRemove: null | (() => void);
     saving: boolean;

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

@@ -8,7 +8,7 @@ export declare const ZodOrNullishEditor: React.FC<{
     value: unknown;
     defaultValue: unknown;
     schema: z.ZodTypeAny;
-    setValue: React.Dispatch<React.SetStateAction<unknown>>;
+    setValue: (updater: (oldState: unknown) => unknown) => void;
     onSave: (updater: (oldNum: unknown) => unknown) => void;
     onRemove: null | (() => void);
     nullishValue: null | undefined;