@remotion/cli 4.0.0-alpha13 → 4.0.0-alpha14

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SchemaSeparationLine = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const line = {
+    borderBottom: '1px solid rgba(255, 255, 255, 0.1)',
+};
+const SchemaSeparationLine = () => {
+    return (0, jsx_runtime_1.jsx)("div", { style: line });
+};
+exports.SchemaSeparationLine = SchemaSeparationLine;

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const SchemaVerticalGuide: React.FC<{
+    isRoot: boolean;
+    children: React.ReactNode;
+}>;

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SchemaVerticalGuide = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const SchemaVerticalGuide = ({ isRoot, children }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { style: isRoot
+            ? undefined
+            : {
+                borderLeft: '1px solid rgba(255, 255, 255, 0.1)',
+                marginLeft: 4,
+            }, children: children }));
+};
+exports.SchemaVerticalGuide = SchemaVerticalGuide;

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

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

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

@@ -1,30 +1,50 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ZodArrayEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const Button_1 = require("../../../../preview-server/error-overlay/remotion-overlay/Button");
-const colors_1 = require("../../../helpers/colors");
+const react_1 = __importStar(require("react"));
 const get_zod_if_possible_1 = require("../../get-zod-if-possible");
-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 deep_equal_1 = require("./deep-equal");
 const local_state_1 = require("./local-state");
-const SchemaLabel_1 = require("./SchemaLabel");
 const ZodArrayItemEditor_1 = require("./ZodArrayItemEditor");
-const container = {
-    width: '100%',
-};
-const fullWidth = {
-    width: '100%',
-};
-const ZodArrayEditor = ({ schema, jsonPath, compact, setValue, defaultValue, value, onSave, showSaveButton, onRemove, saving, saveDisabledByParent, }) => {
-    const { localValue, onChange } = (0, local_state_1.useLocalState)({
+const Fieldset_1 = require("./Fieldset");
+const SchemaVerticalGuide_1 = require("./SchemaVerticalGuide");
+const layout_1 = require("../layout");
+const SchemaSeparationLine_1 = require("./SchemaSeparationLine");
+const InlineAction_1 = require("../../InlineAction");
+const plus_1 = require("../../../icons/plus");
+const ZodFieldValidation_1 = require("./ZodFieldValidation");
+const SchemaLabel_1 = require("./SchemaLabel");
+const ZodArrayEditor = ({ schema, jsonPath, setValue, defaultValue, value, onSave, showSaveButton, onRemove, saving, saveDisabledByParent, mayPad, }) => {
+    const { localValue, onChange, RevisionContextProvider, reset } = (0, local_state_1.useLocalState)({
         value,
         schema,
         setValue,
+        defaultValue,
     });
     const def = schema._def;
     const z = (0, get_zod_if_possible_1.useZodIfPossible)();
@@ -36,39 +56,28 @@ const ZodArrayEditor = ({ schema, jsonPath, compact, setValue, defaultValue, val
     if (typeName !== z.ZodFirstPartyTypeKind.ZodArray) {
         throw new Error('expected object');
     }
-    const isRoot = jsonPath.length === 0;
-    const Element = isRoot ? 'div' : 'fieldset';
-    const { paddingTop } = layout_2.optionRow;
-    const fieldset = (0, react_1.useMemo)(() => {
-        return {
-            borderRadius: 4,
-            borderColor: localValue.zodValidation.success
-                ? colors_1.INPUT_BORDER_COLOR_UNHOVERED
-                : colors_1.FAIL_COLOR,
-        };
-    }, [localValue.zodValidation.success]);
-    const style = (0, react_1.useMemo)(() => {
-        if (isRoot) {
-            return undefined;
-        }
-        return { paddingTop };
-    }, [isRoot, paddingTop]);
     const onAdd = (0, react_1.useCallback)(() => {
         onChange((oldV) => {
             return [...oldV, (0, create_zod_values_1.createZodValues)(def.type, z, zodTypes)];
-        }, false);
+        }, false, true);
     }, [def.type, onChange, z, zodTypes]);
-    const reset = (0, react_1.useCallback)(() => {
-        onChange(() => defaultValue, true);
-    }, [defaultValue, onChange]);
     const isDefaultValue = (0, react_1.useMemo)(() => {
         return (0, deep_equal_1.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, 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" })] }) }) }));
+    const renderAddButton = (0, react_1.useCallback)((color) => {
+        return (0, jsx_runtime_1.jsx)(plus_1.Plus, { color: color, style: { height: 12 } });
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)(Fieldset_1.Fieldset, { shouldPad: mayPad, success: localValue.zodValidation.success, children: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { onReset: reset, isDefaultValue: isDefaultValue, jsonPath: jsonPath, onRemove: onRemove, suffix: ' [', onSave: () => {
+                    onSave(() => localValue.value, false, false);
+                }, saveDisabledByParent: saveDisabledByParent, saving: saving, showSaveButton: showSaveButton, valid: localValue.zodValidation.success }), (0, jsx_runtime_1.jsx)(RevisionContextProvider, { children: (0, jsx_runtime_1.jsx)(SchemaVerticalGuide_1.SchemaVerticalGuide, { isRoot: false, children: localValue.value.map((child, i) => {
+                        var _a;
+                        return (
+                        // eslint-disable-next-line react/no-array-index-key
+                        (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(ZodArrayItemEditor_1.ZodArrayItemEditor, { onChange: onChange, value: child, def: def, index: i, jsonPath: jsonPath, defaultValue: (_a = defaultValue[i]) !== null && _a !== void 0 ? _a : child, onSave: onSave, showSaveButton: showSaveButton, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }), i === localValue.value.length - 1 ? null : ((0, jsx_runtime_1.jsx)(SchemaSeparationLine_1.SchemaSeparationLine, {}))] }, `${i}${localValue.keyStabilityRevision}`));
+                    }) }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                    ...layout_1.fieldsetLabel,
+                    alignItems: 'center',
+                    display: 'flex',
+                }, children: [']', (0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: onAdd, renderAction: renderAddButton })] }), (0, jsx_runtime_1.jsx)(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, localValue: localValue })] }));
 };
 exports.ZodArrayEditor = ZodArrayEditor;

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

@@ -7,10 +7,10 @@ export declare const ZodArrayItemEditor: React.FC<{
     def: any;
     index: number;
     value: unknown;
-    compact: boolean;
     defaultValue: unknown;
     onSave: UpdaterFunction<unknown[]>;
     showSaveButton: boolean;
     saving: boolean;
     saveDisabledByParent: boolean;
+    mayPad: boolean;
 }>;

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

@@ -4,16 +4,16 @@ 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, saveDisabledByParent, }) => {
+const ZodArrayItemEditor = ({ def, onChange, jsonPath, index, value, defaultValue, onSave: onSaveObject, showSaveButton, saving, saveDisabledByParent, mayPad, }) => {
     const onRemove = (0, react_1.useCallback)(() => {
-        onChange((oldV) => [...oldV.slice(0, index), ...oldV.slice(index + 1)], false);
+        onChange((oldV) => [...oldV.slice(0, index), ...oldV.slice(index + 1)], false, true);
     }, [index, onChange]);
     const setValue = (0, react_1.useCallback)((val) => {
         onChange((oldV) => [
             ...oldV.slice(0, index),
             typeof val === 'function' ? val(oldV[index]) : val,
             ...oldV.slice(index + 1),
-        ], false);
+        ], false, false);
     }, [index, onChange]);
     const newJsonPath = (0, react_1.useMemo)(() => [...jsonPath, index], [index, jsonPath]);
     const onSave = (0, react_1.useCallback)((updater) => {
@@ -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);
+        ], false, 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, saveDisabledByParent: saveDisabledByParent }));
+    return ((0, jsx_runtime_1.jsx)(ZodSwitch_1.ZodSwitch, { jsonPath: newJsonPath, schema: def.type, value: value, setValue: setValue, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }));
 };
 exports.ZodArrayItemEditor = ZodArrayItemEditor;

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

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

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

@@ -4,24 +4,25 @@ exports.ZodBooleanEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Checkbox_1 = require("../../Checkbox");
-const layout_1 = require("../layout");
 const SchemaLabel_1 = require("./SchemaLabel");
+const Fieldset_1 = require("./Fieldset");
+const local_state_1 = require("./local-state");
 const fullWidth = {
     width: '100%',
 };
-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, false);
-    }, [onValueChange]);
-    const reset = (0, react_1.useCallback)(() => {
-        onValueChange(defaultValue, true);
-    }, [defaultValue, onValueChange]);
+const ZodBooleanEditor = ({ schema, jsonPath, value, setValue, onSave, defaultValue, onRemove, showSaveButton, saving, saveDisabledByParent, mayPad, }) => {
+    const { localValue, onChange, reset } = (0, local_state_1.useLocalState)({
+        schema,
+        setValue,
+        value,
+        defaultValue,
+    });
+    const onToggle = (0, react_1.useCallback)((e) => {
+        onChange(() => e.target.checked, false, false);
+    }, [onChange]);
     const save = (0, react_1.useCallback)(() => {
-        onSave(() => value, false);
+        onSave(() => value, false, false);
     }, [onSave, value]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: compact ? layout_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 }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(Fieldset_1.Fieldset, { shouldPad: mayPad, success: localValue.zodValidation.success, children: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { isDefaultValue: localValue.value === defaultValue, jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, valid: true, saveDisabledByParent: saveDisabledByParent, suffix: null }), (0, jsx_runtime_1.jsx)("div", { style: fullWidth, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { name: jsonPath.join('.'), checked: localValue.value, onChange: onToggle, disabled: false }) })] }));
 };
 exports.ZodBooleanEditor = ZodBooleanEditor;

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

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

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

@@ -9,14 +9,14 @@ const layout_1 = require("../../layout");
 const InputDragger_1 = require("../../NewComposition/InputDragger");
 const RemInput_1 = require("../../NewComposition/RemInput");
 const RemInputTypeColor_1 = require("../../NewComposition/RemInputTypeColor");
-const ValidationMessage_1 = require("../../NewComposition/ValidationMessage");
-const layout_2 = require("../layout");
 const local_state_1 = require("./local-state");
 const SchemaLabel_1 = require("./SchemaLabel");
+const Fieldset_1 = require("./Fieldset");
+const ZodFieldValidation_1 = require("./ZodFieldValidation");
 const fullWidth = {
     width: '100%',
 };
-const ZodColorEditor = ({ jsonPath, value, setValue, showSaveButton, defaultValue, schema, compact, onSave, onRemove, saving, saveDisabledByParent, }) => {
+const ZodColorEditor = ({ jsonPath, value, setValue, showSaveButton, defaultValue, schema, onSave, onRemove, saving, saveDisabledByParent, mayPad, }) => {
     const z = (0, get_zod_if_possible_1.useZodIfPossible)();
     if (!z) {
         throw new Error('expected zod');
@@ -25,27 +25,25 @@ const ZodColorEditor = ({ jsonPath, value, setValue, showSaveButton, defaultValu
     if (!zodTypes) {
         throw new Error('expected zod color');
     }
-    const { localValue, onChange: onValueChange } = (0, local_state_1.useLocalState)({
+    const { localValue, onChange: onValueChange, reset, } = (0, local_state_1.useLocalState)({
         schema,
         setValue,
         value,
+        defaultValue,
     });
     const { a, b, g, r } = localValue.zodValidation.success
         ? zodTypes.ZodZypesInternals.parseColor(localValue.value)
         : { a: 1, b: 0, g: 0, r: 0 };
     const onChange = (0, react_1.useCallback)((e) => {
         const newColor = (0, color_math_1.colorWithNewOpacity)(e.target.value, Math.round(a), zodTypes);
-        onValueChange(() => newColor, false);
+        onValueChange(() => newColor, false, false);
     }, [a, onValueChange, zodTypes]);
     const onTextChange = (0, react_1.useCallback)((e) => {
         const newValue = e.target.value;
-        onValueChange(() => newValue, false);
+        onValueChange(() => newValue, false, false);
     }, [onValueChange]);
-    const reset = (0, react_1.useCallback)(() => {
-        onValueChange(() => defaultValue, true);
-    }, [defaultValue, onValueChange]);
     const save = (0, react_1.useCallback)(() => {
-        onSave(() => value, false);
+        onSave(() => value, false, false);
     }, [onSave, value]);
     const rgb = `#${r.toString(16).padStart(2, '0')}${g
         .toString(16)
@@ -60,14 +58,14 @@ const ZodColorEditor = ({ jsonPath, value, setValue, showSaveButton, defaultValu
     }, []);
     const onOpacityChange = (0, react_1.useCallback)((newValue) => {
         const newColor = (0, color_math_1.colorWithNewOpacity)(localValue.value, Math.round((Number(newValue) / 100) * 255), zodTypes);
-        onValueChange(() => newColor, false);
+        onValueChange(() => newColor, false, false);
     }, [localValue.value, onValueChange, zodTypes]);
     const onOpacityValueChange = (0, react_1.useCallback)((newValue) => {
         const newColor = (0, color_math_1.colorWithNewOpacity)(localValue.value, Math.round((Number(newValue) / 100) * 255), zodTypes);
-        onValueChange(() => newColor, false);
+        onValueChange(() => newColor, false, false);
     }, [localValue.value, onValueChange, 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, valid: localValue.zodValidation.success, saveDisabledByParent: saveDisabledByParent }), (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: {
+    return ((0, jsx_runtime_1.jsxs)(Fieldset_1.Fieldset, { shouldPad: mayPad, success: localValue.zodValidation.success, children: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { isDefaultValue: localValue.value === defaultValue, jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, valid: localValue.zodValidation.success, saveDisabledByParent: saveDisabledByParent, suffix: null }), (0, jsx_runtime_1.jsxs)("div", { style: fullWidth, children: [(0, jsx_runtime_1.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: {
                                         height: 39,
-                                    }, value: rgb, onChange: onChange, className: "__remotion_color_picker", status: status }) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1, block: true }), (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { value: localValue.value, status: status, placeholder: jsonPath.join('.'), onChange: onTextChange, rightAlign: false }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { onTextChange: onOpacityChange, onValueChange: onOpacityValueChange, status: status, value: (a / 255) * 100, min: 0, max: 100, step: 1, formatter: (v) => `${Math.round(Number(v))}%`, 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" })] }))] })] }));
+                                    }, value: rgb, onChange: onChange, className: "__remotion_color_picker", status: status, name: jsonPath.join('.') }) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1, block: true }), (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { value: localValue.value, status: status, placeholder: jsonPath.join('.'), onChange: onTextChange, rightAlign: false }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { onTextChange: onOpacityChange, onValueChange: onOpacityValueChange, status: status, value: (a / 255) * 100, min: 0, max: 100, step: 1, formatter: (v) => `${Math.round(Number(v))}%`, rightAlign: false })] }), (0, jsx_runtime_1.jsx)(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, localValue: localValue })] })] }));
 };
 exports.ZodColorEditor = ZodColorEditor;

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

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

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

@@ -6,10 +6,10 @@ const react_1 = require("react");
 const colors_1 = require("../../../helpers/colors");
 const layout_1 = require("../../layout");
 const RemInput_1 = require("../../NewComposition/RemInput");
-const ValidationMessage_1 = require("../../NewComposition/ValidationMessage");
-const layout_2 = require("../layout");
 const local_state_1 = require("./local-state");
 const SchemaLabel_1 = require("./SchemaLabel");
+const Fieldset_1 = require("./Fieldset");
+const ZodFieldValidation_1 = require("./ZodFieldValidation");
 const fullWidth = {
     width: '100%',
 };
@@ -17,7 +17,6 @@ const explainer = {
     fontFamily: 'sans-serif',
     fontSize: 12,
     color: colors_1.VERY_LIGHT_TEXT,
-    marginBottom: layout_1.SPACING_UNIT,
 };
 // This will do 2 things:
 // - Make the calendar icon white
@@ -44,25 +43,20 @@ const formatDate = (date) => {
         .padStart(3, '0')}`;
     return formattedDate;
 };
-const ZodDateEditor = ({ jsonPath, value, setValue, showSaveButton, defaultValue, schema, compact, onSave, onRemove, saving, saveDisabledByParent, }) => {
-    const { localValue, onChange: setLocalValue } = (0, local_state_1.useLocalState)({
+const ZodDateEditor = ({ jsonPath, value, setValue, showSaveButton, defaultValue, schema, onSave, onRemove, saving, saveDisabledByParent, mayPad, }) => {
+    const { localValue, onChange: setLocalValue, reset, } = (0, local_state_1.useLocalState)({
         schema,
         setValue,
         value,
+        defaultValue,
     });
-    const onValueChange = (0, react_1.useCallback)((newValue, forceApply) => {
-        setLocalValue(() => newValue, forceApply);
-    }, [setLocalValue]);
     const onChange = (0, react_1.useCallback)((e) => {
         // React does not support e.target.valueAsDate :(
-        onValueChange(new Date(e.target.value), false);
-    }, [onValueChange]);
-    const reset = (0, react_1.useCallback)(() => {
-        onValueChange(defaultValue, true);
-    }, [defaultValue, onValueChange]);
+        setLocalValue(() => new Date(e.target.value), false, false);
+    }, [setLocalValue]);
     const save = (0, react_1.useCallback)(() => {
-        onSave(() => value, false);
+        onSave(() => value, false, false);
     }, [onSave, value]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: compact ? layout_2.narrowOption : layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { compact: compact, isDefaultValue: value.getTime() === defaultValue.getTime(), jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, valid: localValue.zodValidation.success, saveDisabledByParent: saveDisabledByParent }), (0, jsx_runtime_1.jsxs)("div", { style: fullWidth, children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { value: formatDate(localValue.value), type: "datetime-local", status: localValue.zodValidation.success ? 'ok' : 'error', placeholder: jsonPath.join('.'), onChange: onChange, style: inputStyle, rightAlign: false }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)("div", { style: explainer, children: "Date is in local format" }), !localValue.zodValidation.success && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: localValue.zodValidation.error.format()._errors[0], type: "error" })] }))] })] }));
+    return ((0, jsx_runtime_1.jsxs)(Fieldset_1.Fieldset, { shouldPad: mayPad, success: localValue.zodValidation.success, children: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { isDefaultValue: localValue.value.getTime() === defaultValue.getTime(), jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, valid: localValue.zodValidation.success, saveDisabledByParent: saveDisabledByParent, suffix: null }), (0, jsx_runtime_1.jsxs)("div", { style: fullWidth, children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { value: formatDate(localValue.value), type: "datetime-local", status: localValue.zodValidation.success ? 'ok' : 'error', placeholder: jsonPath.join('.'), onChange: onChange, style: inputStyle, rightAlign: false }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)("div", { style: explainer, children: "Date is in local format" }), (0, jsx_runtime_1.jsx)(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, localValue: localValue })] })] }));
 };
 exports.ZodDateEditor = ZodDateEditor;

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

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

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

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ZodDefaultEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ZodSwitch_1 = require("./ZodSwitch");
-const ZodDefaultEditor = ({ jsonPath, compact, schema, setValue, onSave, defaultValue, value, showSaveButton, onRemove, saving, saveDisabledByParent, }) => {
+const ZodDefaultEditor = ({ jsonPath, schema, setValue, onSave, defaultValue, value, showSaveButton, onRemove, saving, saveDisabledByParent, mayPad, }) => {
     const { innerType } = schema._def;
-    return ((0, jsx_runtime_1.jsx)(ZodSwitch_1.ZodSwitch, { compact: compact, defaultValue: defaultValue, jsonPath: jsonPath, onRemove: onRemove, onSave: onSave, schema: innerType, setValue: setValue, showSaveButton: showSaveButton, value: value, saving: saving, saveDisabledByParent: saveDisabledByParent }));
+    return ((0, jsx_runtime_1.jsx)(ZodSwitch_1.ZodSwitch, { defaultValue: defaultValue, jsonPath: jsonPath, onRemove: onRemove, onSave: onSave, schema: innerType, setValue: setValue, showSaveButton: showSaveButton, value: value, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }));
 };
 exports.ZodDefaultEditor = ZodDefaultEditor;

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

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

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

@@ -2,27 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ZodEffectEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-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 InfoBubble_1 = require("../InfoBubble");
 const local_state_1 = require("./local-state");
 const ZodSwitch_1 = require("./ZodSwitch");
+const Fieldset_1 = require("./Fieldset");
+const ZodFieldValidation_1 = require("./ZodFieldValidation");
 const fullWidth = {
     width: '100%',
 };
-const stackTrace = {
-    padding: 10,
-};
-const stackTraceLabel = {
-    fontSize: 14,
-};
-const legend = {
-    display: 'flex',
-};
-const ZodEffectEditor = ({ schema, jsonPath, value, setValue: updateValue, compact, defaultValue, onSave, onRemove, showSaveButton, saving, }) => {
+const ZodEffectEditor = ({ schema, jsonPath, value, setValue: updateValue, defaultValue, onSave, onRemove, showSaveButton, saving, mayPad, }) => {
     const z = (0, get_zod_if_possible_1.useZodIfPossible)();
     if (!z) {
         throw new Error('expected zod');
@@ -31,26 +19,13 @@ const ZodEffectEditor = ({ schema, jsonPath, value, setValue: updateValue, compa
         value,
         schema,
         setValue: updateValue,
+        defaultValue,
     });
     const def = schema._def;
     const typeName = def.typeName;
     if (typeName !== z.ZodFirstPartyTypeKind.ZodEffects) {
         throw new Error('expected effect');
     }
-    const container = (0, react_1.useMemo)(() => {
-        if (!localValue.zodValidation.success) {
-            return {
-                border: `1px solid ${colors_1.FAIL_COLOR}`,
-                borderRadius: 4,
-            };
-        }
-        return {
-            border: 'none',
-            padding: 0,
-        };
-    }, [localValue.zodValidation.success]);
-    return ((0, jsx_runtime_1.jsxs)("fieldset", { style: container, children: [(0, jsx_runtime_1.jsx)("div", { style: fullWidth, children: (0, jsx_runtime_1.jsx)(ZodSwitch_1.ZodSwitch, { value: value, setValue: onChange, jsonPath: jsonPath, schema: def.schema, compact: compact, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: !localValue.zodValidation.success }) }), !localValue.zodValidation.success && ((0, jsx_runtime_1.jsxs)("legend", { style: legend, children: [(0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: localValue.zodValidation.error.format()._errors[0], type: "error" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(InfoBubble_1.InfoBubble, { title: "Zod validation failure", children: (0, jsx_runtime_1.jsxs)("div", { style: stackTrace, children: [(0, jsx_runtime_1.jsx)("div", { style: stackTraceLabel, children: "Zod Validation has failed:" }), localValue.zodValidation.error.errors.map((error, index) => (
-                                // eslint-disable-next-line react/no-array-index-key
-                                (0, jsx_runtime_1.jsxs)("div", { style: stackTraceLabel, children: ["Type: ", error.code, " ", (0, jsx_runtime_1.jsx)("br", {}), "Message: ", error.message] }, index)))] }) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 })] }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Fieldset_1.Fieldset, { shouldPad: mayPad, success: localValue.zodValidation.success, children: [(0, jsx_runtime_1.jsx)("div", { style: fullWidth, children: (0, jsx_runtime_1.jsx)(ZodSwitch_1.ZodSwitch, { value: value, setValue: onChange, jsonPath: jsonPath, schema: def.schema, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: !localValue.zodValidation.success, mayPad: false }) }), (0, jsx_runtime_1.jsx)(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, localValue: localValue })] }));
 };
 exports.ZodEffectEditor = ZodEffectEditor;

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

@@ -9,7 +9,6 @@ export declare const ZodEnumEditor: React.FC<{
     defaultValue: string;
     setValue: UpdaterFunction<string>;
     onSave: UpdaterFunction<string>;
-    compact: boolean;
     showSaveButton: boolean;
     onRemove: null | (() => void);
     saving: boolean;

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

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

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { LocalState } from './local-state';
+import type { JSONPath } from './zod-types';
+export declare const ZodFieldValidation: React.FC<{
+    localValue: LocalState<unknown>;
+    path: JSONPath;
+}>;