@remotion/cli 4.0.0-alpha.130 → 4.0.0-alpha.185

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

@@ -27,6 +27,7 @@ exports.RenderModalJSONInputPropsEditor = 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 use_keybinding_1 = require("../../helpers/use-keybinding");
 const layout_1 = require("../layout");
 const RemTextarea_1 = require("../NewComposition/RemTextarea");
 const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
@@ -58,7 +59,8 @@ const scrollable = {
     flex: 1,
 };
 // TODO: Note if custom 'remotion-date:' pattern has been used
-const RenderModalJSONInputPropsEditor = ({ setValue, value, zodValidationResult, switchToSchema, onSave }) => {
+const RenderModalJSONInputPropsEditor = ({ setValue, value, zodValidationResult, switchToSchema, onSave, valBeforeSafe, showSaveButton, }) => {
+    const keybindings = (0, use_keybinding_1.useKeybinding)();
     const [localValue, setLocalValue] = react_1.default.useState(() => {
         return parseJSON((0, date_serialization_1.serializeJSONWithDate)(value, 2));
     });
@@ -89,8 +91,28 @@ const RenderModalJSONInputPropsEditor = ({ setValue, value, zodValidationResult,
             setValue(parsed.value);
         }
     }, [setValue]);
-    // TODO: Don't show save button if no changes have been made
+    const hasChanged = (0, react_1.useMemo)(() => {
+        return value && JSON.stringify(value) !== JSON.stringify(valBeforeSafe);
+    }, [valBeforeSafe, value]);
+    const onQuickSave = (0, react_1.useCallback)(() => {
+        if (hasChanged) {
+            onSave();
+        }
+    }, [hasChanged, onSave]);
+    (0, react_1.useEffect)(() => {
+        const save = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 's',
+            commandCtrlKey: true,
+            callback: onQuickSave,
+            preventDefault: true,
+            triggerIfInputFieldFocused: true,
+        });
+        return () => {
+            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, children: "Save" })] })] }));
+    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" })] })] }));
 };
 exports.RenderModalJSONInputPropsEditor = RenderModalJSONInputPropsEditor;

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

@@ -15,8 +15,8 @@ export declare const RenderModalPicture: React.FC<{
     qualityControlType: QualityControl;
     videoImageFormat: VideoImageFormat;
     stillImageFormat: StillImageFormat;
-    setQuality: React.Dispatch<React.SetStateAction<number>>;
-    quality: number;
+    setJpegQuality: React.Dispatch<React.SetStateAction<number>>;
+    jpegQuality: number;
     maxCrf: number;
     minCrf: number;
     setCrf: React.Dispatch<React.SetStateAction<number>>;

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, setQuality, quality, maxCrf, minCrf, setCrf, shouldDisplayCrfOption, setCustomTargetVideoBitrateValue, crf, customTargetVideoBitrate, stillImageFormat, }) => {
+const RenderModalPicture = ({ renderMode, scale, setScale, pixelFormat, setPixelFormat, imageFormatOptions, setQualityControl, qualityControlType, videoImageFormat, setJpegQuality, jpegQuality, maxCrf, minCrf, setCrf, shouldDisplayCrfOption, setCustomTargetVideoBitrateValue, crf, customTargetVideoBitrate, stillImageFormat, }) => {
     const pixelFormatOptions = (0, react_1.useMemo)(() => {
         return client_1.BrowserSafeApis.validPixelFormats.map((option) => {
             return {
@@ -49,7 +49,7 @@ 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, { quality: quality, setQuality: setQuality })), renderMode === 'still' && stillImageFormat === 'jpeg' && ((0, jsx_runtime_1.jsx)(JpegQualitySetting_1.JpegQualitySetting, { quality: quality, setQuality: setQuality })), 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 &&
+    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" }) }) })] })) : 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] }));
 };

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

@@ -58,6 +58,8 @@ const SchemaEditor = ({ schema, value, setValue, zodValidationResult, compact, d
         }
         const defaultPropsValid = schema.safeParse(defaultProps);
         if (!defaultPropsValid.success) {
+            // TODO: Layout is not nice
+            // TODO: Does not react to when schema is updated
             return ((0, jsx_runtime_1.jsxs)("div", { 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", { 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" })] }));

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

@@ -13,7 +13,6 @@ const commonStyles = {
     fontSize: 15,
     color: colors_1.LIGHT_TEXT,
     fontFamily: 'sans-serif',
-    lineHeight: '40px',
 };
 const compactStyles = {
     ...commonStyles,
@@ -24,14 +23,12 @@ const compactStyles = {
 const wideStyles = {
     ...commonStyles,
     width: layout_2.label.width,
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
 };
 const labelStyle = {
     fontFamily: 'monospace',
     fontSize: 14,
     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] }));

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

@@ -4,10 +4,12 @@ exports.ZodArrayEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const Button_1 = require("../../../../preview-server/error-overlay/remotion-overlay/Button");
 const colors_1 = require("../../../helpers/colors");
 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 SchemaLabel_1 = require("./SchemaLabel");
 const ZodArrayItemEditor_1 = require("./ZodArrayItemEditor");
 const container = {
@@ -16,7 +18,7 @@ const container = {
 const fullWidth = {
     width: '100%',
 };
-// TODO: Ability to add another item
+// TODO: Ability to revert a change (e.g entry deletion )
 const ZodArrayEditor = ({ schema, jsonPath, compact, setValue: updateValue, defaultValue, value, onSave, showSaveButton, onRemove, }) => {
     const [localValue, setLocalValue] = (0, react_1.useState)(() => {
         return {
@@ -45,6 +47,7 @@ const ZodArrayEditor = ({ schema, jsonPath, compact, setValue: updateValue, defa
         setLocalValue((oldLocalState) => {
             const newValue = updater(oldLocalState.value);
             const safeParse = schema.safeParse(newValue);
+            // TODO: This logs an error to the console
             if (safeParse.success) {
                 updateValue(updater);
             }
@@ -61,10 +64,16 @@ const ZodArrayEditor = ({ schema, jsonPath, compact, setValue: updateValue, defa
         }
         return { paddingTop };
     }, [isRoot, paddingTop]);
+    const onAdd = (0, react_1.useCallback)(() => {
+        onChange((oldV) => {
+            return [...oldV, (0, create_zod_values_1.createZodValues)(def.type)];
+        }, true);
+    }, [def.type, onChange]);
     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
                             // eslint-disable-next-line react/no-array-index-key
-                            , { onChange: onChange, value: child, def: def, index: i, jsonPath: jsonPath, compact: compact, defaultValue: defaultValue[i], onSave: onSave, showSaveButton: showSaveButton }, `${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-end", message: localValue.zodValidation.error.format()._errors[0], type: "error" })] }))] }) }) }));
+                            , { 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 }, `${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-end", message: localValue.zodValidation.error.format()._errors[0], type: "error" })] })), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onAdd, children: "+ Add item" })] }) }) }));
 };
 exports.ZodArrayEditor = ZodArrayEditor;

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

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

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

@@ -0,0 +1,108 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZodColorEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const color_math_1 = require("../../../../color-math");
+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 SchemaLabel_1 = require("./SchemaLabel");
+const fullWidth = {
+    width: '100%',
+};
+const ZodColorEditor = ({ jsonPath, value, setValue, showSaveButton, defaultValue, schema, compact, onSave, onRemove, }) => {
+    const [localValue, setLocalValue] = (0, react_1.useState)(() => {
+        return {
+            value,
+            zodValidation: schema.safeParse(value),
+        };
+    });
+    const onValueChange = (0, react_1.useCallback)((newValue) => {
+        const safeParse = schema.safeParse(newValue);
+        const newLocalState = {
+            value: newValue,
+            zodValidation: safeParse,
+        };
+        setLocalValue(newLocalState);
+        if (safeParse.success) {
+            setValue(newValue);
+        }
+    }, [schema, setValue]);
+    const { a, b, g, r } = localValue.zodValidation.success
+        ? remotion_1.Internals.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));
+        const safeParse = schema.safeParse(newColor);
+        const newLocalState = {
+            value: newColor,
+            zodValidation: safeParse,
+        };
+        setLocalValue(newLocalState);
+        if (safeParse.success) {
+            setValue(newColor);
+        }
+    }, [a, schema, setValue]);
+    const onTextChange = (0, react_1.useCallback)((e) => {
+        const newValue = e.target.value;
+        const safeParse = schema.safeParse(newValue);
+        const newLocalState = {
+            value: newValue,
+            zodValidation: safeParse,
+        };
+        setLocalValue(newLocalState);
+        if (safeParse.success) {
+            setValue(newValue);
+        }
+    }, [schema, setValue]);
+    const reset = (0, react_1.useCallback)(() => {
+        onValueChange(defaultValue);
+    }, [defaultValue, onValueChange]);
+    const save = (0, react_1.useCallback)(() => {
+        onSave(() => value);
+    }, [onSave, value]);
+    const rgb = `#${r.toString(16).padStart(2, '0')}${g
+        .toString(16)
+        .padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+    const status = localValue.zodValidation.success ? 'ok' : 'error';
+    const colorPicker = (0, react_1.useMemo)(() => {
+        return {
+            height: 39,
+            width: 45,
+            display: 'inline-block',
+        };
+    }, []);
+    const onOpacityChange = (0, react_1.useCallback)((newValue) => {
+        const newColor = (0, color_math_1.colorWithNewOpacity)(localValue.value, Math.round((Number(newValue) / 100) * 255));
+        const safeParse = schema.safeParse(newColor);
+        const newLocalState = {
+            value: newColor,
+            zodValidation: safeParse,
+        };
+        setLocalValue(newLocalState);
+        if (safeParse.success) {
+            setValue(newColor);
+        }
+    }, [localValue.value, schema, setValue]);
+    const onOpacityValueChange = (0, react_1.useCallback)((newValue) => {
+        const newColor = (0, color_math_1.colorWithNewOpacity)(localValue.value, Math.round((Number(newValue) / 100) * 255));
+        const safeParse = schema.safeParse(newColor);
+        const newLocalState = {
+            value: String(newColor),
+            zodValidation: safeParse,
+        };
+        setLocalValue(newLocalState);
+        if (safeParse.success) {
+            setValue(newColor);
+        }
+    }, [localValue.value, schema, setValue]);
+    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 }), (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 }), (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))}%` })] }), !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-end", message: localValue.zodValidation.error.format()._errors[0], type: "error" })] }))] })] }));
+};
+exports.ZodColorEditor = ZodColorEditor;

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

@@ -13,7 +13,6 @@ const SchemaLabel_1 = require("./SchemaLabel");
 const container = {
     width: '100%',
 };
-// TODO: Long values break the layout
 const ZodEnumEditor = ({ schema, jsonPath, compact, setValue: updateValue, defaultValue, value, onSave, showSaveButton, onRemove, }) => {
     const [localValue, setLocalValue] = (0, react_1.useState)(() => {
         return {

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

@@ -15,9 +15,13 @@ const emptyLabel = {
     fontFamily: 'sans-serif',
     fontSize: 14,
 };
+const wideEmptyLabel = {
+    ...emptyLabel,
+    lineHeight: '37px',
+};
 const ZonNonEditableValue = ({ jsonPath, label, compact, showSaveButton }) => {
     const save = (0, react_1.useCallback)(() => undefined, []);
     const reset = (0, react_1.useCallback)(() => undefined, []);
-    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: true, jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, compact: compact, onRemove: null }), (0, jsx_runtime_1.jsx)("div", { style: fullWidth, children: (0, jsx_runtime_1.jsx)("em", { style: emptyLabel, children: label }) })] }));
+    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: true, jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, compact: compact, onRemove: null }), (0, jsx_runtime_1.jsx)("div", { style: fullWidth, children: (0, jsx_runtime_1.jsx)("em", { style: compact ? emptyLabel : wideEmptyLabel, children: label }) })] }));
 };
 exports.ZonNonEditableValue = ZonNonEditableValue;

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

@@ -37,7 +37,10 @@ const ZodObjectEditor = ({ schema, jsonPath, setValue, value, compact, defaultVa
         return { paddingTop };
     }, [isRoot, paddingTop]);
     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: keys.map((key) => {
-                            return ((0, jsx_runtime_1.jsx)(ZodSwitch_1.ZodSwitch, { jsonPath: [...jsonPath, key], schema: shape[key], value: value[key], defaultValue: defaultValue[key], setValue: (val) => {
+                            var _a;
+                            return ((0, jsx_runtime_1.jsx)(ZodSwitch_1.ZodSwitch, { jsonPath: [...jsonPath, key], schema: shape[key], value: value[key], 
+                                // In case of null | {a: string, b: string} type, we need to fallback to the default value
+                                defaultValue: ((_a = defaultValue) !== null && _a !== void 0 ? _a : value)[key], setValue: (val) => {
                                     setValue((oldVal) => {
                                         return {
                                             ...oldVal,

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { z } from 'remotion';
+import type { JSONPath } from './zod-types';
+export declare const ZodOrNullishEditor: React.FC<{
+    showSaveButton: boolean;
+    jsonPath: JSONPath;
+    compact: boolean;
+    value: unknown;
+    defaultValue: unknown;
+    schema: z.ZodTypeAny;
+    setValue: React.Dispatch<React.SetStateAction<unknown>>;
+    onSave: (updater: (oldNum: unknown) => unknown) => void;
+    onRemove: null | (() => void);
+    nullishValue: null | undefined;
+}>;

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

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZodOrNullishEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../../../helpers/colors");
+const Checkbox_1 = require("../../Checkbox");
+const layout_1 = require("../../layout");
+const create_zod_values_1 = require("./create-zod-values");
+const SchemaLabel_1 = require("./SchemaLabel");
+const ZodSwitch_1 = require("./ZodSwitch");
+const fullWidth = {
+    width: '100%',
+};
+const labelStyle = {
+    fontFamily: 'sans-serif',
+    fontSize: 14,
+    color: colors_1.LIGHT_TEXT,
+};
+const checkBoxWrapper = {
+    margin: '2px',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: '5px',
+};
+const ZodOrNullishEditor = ({ jsonPath, compact, schema, setValue, onSave, defaultValue, value, showSaveButton, onRemove, nullishValue, }) => {
+    const isChecked = value === nullishValue;
+    const onValueChange = (0, react_1.useCallback)((newValue) => {
+        setValue(newValue);
+    }, [setValue]);
+    const onCheckBoxChange = (0, react_1.useCallback)((e) => {
+        console.log({ schema, newVal: (0, create_zod_values_1.createZodValues)(schema) });
+        const val = e.target.checked ? nullishValue : (0, create_zod_values_1.createZodValues)(schema);
+        onValueChange(val);
+    }, [nullishValue, onValueChange, schema]);
+    const reset = (0, react_1.useCallback)(() => {
+        onValueChange(defaultValue);
+    }, [defaultValue, onValueChange]);
+    const save = (0, react_1.useCallback)(() => {
+        onSave(() => value);
+    }, [onSave, value]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [value === null ? ((0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { isDefaultValue: value === defaultValue, jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, compact: compact, onRemove: onRemove })) : ((0, jsx_runtime_1.jsx)("div", { style: fullWidth, children: (0, jsx_runtime_1.jsx)(ZodSwitch_1.ZodSwitch, { value: value, setValue: onValueChange, jsonPath: jsonPath, schema: schema, compact: compact, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove }) })), (0, jsx_runtime_1.jsxs)("div", { style: checkBoxWrapper, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: isChecked, onChange: onCheckBoxChange, disabled: false }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: labelStyle, children: String(nullishValue) })] })] }));
+};
+exports.ZodOrNullishEditor = ZodOrNullishEditor;

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

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const remotion_1 = require("remotion");
 const ZodArrayEditor_1 = require("./ZodArrayEditor");
 const ZodBooleanEditor_1 = require("./ZodBooleanEditor");
+const ZodColorEditor_1 = require("./ZodColorEditor");
 const ZodDateEditor_1 = require("./ZodDateEditor");
 const ZodEffectEditor_1 = require("./ZodEffectEditor");
 const ZodEnumEditor_1 = require("./ZodEnumEditor");
@@ -12,6 +13,7 @@ const ZodNonEditableValue_1 = require("./ZodNonEditableValue");
 const ZodNumberEditor_1 = require("./ZodNumberEditor");
 const ZodObjectEditor_1 = require("./ZodObjectEditor");
 const ZodStringEditor_1 = require("./ZodStringEditor");
+const ZodUnionEditor_1 = require("./ZodUnionEditor");
 const ZodSwitch = ({ schema, jsonPath, compact, value, setValue, defaultValue, onSave, showSaveButton, onRemove, }) => {
     const def = schema._def;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -54,8 +56,14 @@ const ZodSwitch = ({ schema, jsonPath, compact, value, setValue, defaultValue, o
         return ((0, jsx_runtime_1.jsx)(ZodEnumEditor_1.ZodEnumEditor, { setValue: setValue, value: value, jsonPath: jsonPath, schema: schema, compact: compact, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove }));
     }
     if (typeName === remotion_1.z.ZodFirstPartyTypeKind.ZodEffects) {
+        if (schema._def.description === remotion_1.Internals.REMOTION_COLOR_BRAND) {
+            return ((0, jsx_runtime_1.jsx)(ZodColorEditor_1.ZodColorEditor, { value: value, setValue: setValue, jsonPath: jsonPath, schema: schema, compact: compact, onSave: onSave, defaultValue: defaultValue, showSaveButton: showSaveButton, onRemove: onRemove }));
+        }
         return ((0, jsx_runtime_1.jsx)(ZodEffectEditor_1.ZodEffectEditor, { value: value, setValue: setValue, jsonPath: jsonPath, schema: schema, compact: compact, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove }));
     }
+    if (typeName === remotion_1.z.ZodFirstPartyTypeKind.ZodUnion) {
+        return ((0, jsx_runtime_1.jsx)(ZodUnionEditor_1.ZodUnionEditor, { schema: schema, showSaveButton: showSaveButton, jsonPath: jsonPath, compact: compact, value: value, defaultValue: defaultValue, setValue: setValue, onSave: onSave, onRemove: onRemove }));
+    }
     return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { compact: compact, jsonPath: jsonPath, showSaveButton: showSaveButton, label: `${typeName} (not editable)` }));
 };
 exports.ZodSwitch = ZodSwitch;

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { z } from 'remotion';
+import type { JSONPath } from './zod-types';
+export declare const ZodUnionEditor: React.FC<{
+    showSaveButton: boolean;
+    jsonPath: JSONPath;
+    compact: boolean;
+    value: unknown;
+    defaultValue: unknown;
+    schema: z.ZodTypeAny;
+    setValue: React.Dispatch<React.SetStateAction<unknown>>;
+    onSave: (updater: (oldNum: unknown) => unknown) => void;
+    onRemove: null | (() => void);
+}>;

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

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZodUnionEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const remotion_1 = require("remotion");
+const ZodNonEditableValue_1 = require("./ZodNonEditableValue");
+const ZodOrNullishEditor_1 = require("./ZodOrNullishEditor");
+const findNull = (value) => {
+    const nullIndex = value.findIndex((v) => v._def.typeName === remotion_1.z.ZodFirstPartyTypeKind.ZodNull ||
+        v._def.typeName === remotion_1.z.ZodFirstPartyTypeKind.ZodUndefined);
+    if (nullIndex === -1) {
+        return null;
+    }
+    const nullishValue = value[nullIndex]._def.typeName === remotion_1.z.ZodFirstPartyTypeKind.ZodNull
+        ? null
+        : undefined;
+    const otherSchema = value[nullIndex === 0 ? 1 : 0];
+    const otherSchemaIsAlsoNullish = otherSchema._def.typeName === remotion_1.z.ZodFirstPartyTypeKind.ZodNull ||
+        otherSchema._def.typeName === remotion_1.z.ZodFirstPartyTypeKind.ZodUndefined;
+    return {
+        nullIndex,
+        nullishValue,
+        otherSchema,
+        otherSchemaIsAlsoNullish,
+    };
+};
+const ZodUnionEditor = ({ jsonPath, compact, schema, setValue, onSave, defaultValue, value, showSaveButton, onRemove, }) => {
+    const { options } = schema._def;
+    if (options.length > 2) {
+        return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { jsonPath: jsonPath, label: 'Union with more than 2 options not editable', compact: compact, showSaveButton: showSaveButton }));
+    }
+    if (options.length < 2) {
+        return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { jsonPath: jsonPath, label: 'Union with less than 2 options not editable', compact: compact, showSaveButton: showSaveButton }));
+    }
+    const nullResult = findNull(options);
+    if (!nullResult) {
+        return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { jsonPath: jsonPath, label: 'Union only editable with 1 value being null', compact: compact, showSaveButton: showSaveButton }));
+    }
+    const { otherSchema, nullishValue, otherSchemaIsAlsoNullish } = nullResult;
+    if (otherSchemaIsAlsoNullish) {
+        return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { jsonPath: jsonPath, label: 'Not editable - both union values are nullish', compact: compact, showSaveButton: showSaveButton }));
+    }
+    return ((0, jsx_runtime_1.jsx)(ZodOrNullishEditor_1.ZodOrNullishEditor, { compact: compact, defaultValue: defaultValue, jsonPath: jsonPath, onRemove: onRemove, onSave: onSave, schema: otherSchema, setValue: setValue, showSaveButton: showSaveButton, value: value, nullishValue: nullishValue }));
+};
+exports.ZodUnionEditor = ZodUnionEditor;

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

@@ -0,0 +1,2 @@
+import { z } from 'remotion';
+export declare const createZodValues: (schema: z.ZodTypeAny) => unknown;