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

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

@@ -51,6 +51,6 @@ const RenderModalPicture = ({ renderMode, scale, setScale, pixelFormat, setPixel
     }, [setCustomTargetVideoBitrateValue]);
     return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Image Format" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: imageFormatOptions, needsWrapping: false }) })] })) : null, renderMode === 'video' && videoImageFormat === 'jpeg' && ((0, jsx_runtime_1.jsx)(JpegQualitySetting_1.JpegQualitySetting, { jpegQuality: jpegQuality, setJpegQuality: setJpegQuality })), renderMode === 'still' && stillImageFormat === 'jpeg' && ((0, jsx_runtime_1.jsx)(JpegQualitySetting_1.JpegQualitySetting, { jpegQuality: jpegQuality, setJpegQuality: setJpegQuality })), renderMode === 'video' ? (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}) : null, renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Quality control" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: qualityControlOptions, needsWrapping: true }) })] })) : null, shouldDisplayCrfOption &&
                 qualityControlType === 'crf' &&
-                renderMode !== 'still' ? ((0, jsx_runtime_1.jsx)(CrfSetting_1.CrfSetting, { crf: crf, min: minCrf, max: maxCrf, setCrf: setCrf, option: client_1.BrowserSafeApis.options.crfOption })) : null, qualityControlType === 'bitrate' && renderMode !== 'still' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Target video bitrate" }), (0, jsx_runtime_1.jsx)(InfoBubble_1.InfoBubble, { title: "Learn more about this option", children: (0, jsx_runtime_1.jsx)(OptionExplainer_1.OptionExplainer, { option: client_1.BrowserSafeApis.options.videoBitrate }) }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { style: layout_1.input, value: customTargetVideoBitrate, onChange: onTargetVideoBitrateChanged, status: "ok" }) }) })] })) : 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] }));
+                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] }));
 };
 exports.RenderModalPicture = RenderModalPicture;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { z } from 'remotion';
+import type { z } from 'zod';
 export declare const SchemaEditor: React.FC<{
     schema: z.ZodTypeAny;
     value: unknown;

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

@@ -3,68 +3,35 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SchemaEditor = 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 get_zod_if_possible_1 = require("../../get-zod-if-possible");
 const is_menu_item_1 = require("../../Menu/is-menu-item");
-const SchemaEmptyStateGraphic_1 = require("./SchemaEmptyStateGraphic");
-const ZodErrorMessages_1 = require("./ZodErrorMessages");
+const SchemaErrorMessages_1 = require("./SchemaErrorMessages");
 const ZodObjectEditor_1 = require("./ZodObjectEditor");
-const errorExplanation = {
-    fontSize: 14,
-    color: colors_1.LIGHT_TEXT,
-    fontFamily: 'sans-serif',
-    lineHeight: 1.5,
-};
-const codeSnippet = {
-    fontSize: 14,
-    color: 'var(--blue)',
-    fontFamily: 'monospace',
-};
 const scrollable = {
     padding: '8px 12px',
     display: 'flex',
     flexDirection: 'column',
     overflowY: 'auto',
 };
-const explainer = {
-    display: 'flex',
-    flex: 1,
-    flexDirection: 'column',
-    padding: '0 12px',
-    justifyContent: 'center',
-    alignItems: 'center',
-    textAlign: 'center',
-};
 const SchemaEditor = ({ schema, value, setValue, zodValidationResult, compact, defaultProps, onSave, showSaveButton, }) => {
+    const z = (0, get_zod_if_possible_1.useZodIfPossible)();
+    if (!z) {
+        throw new Error('expected zod');
+    }
     const def = schema._def;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const typeName = def.typeName;
     const reset = (0, react_1.useCallback)(() => {
         setValue(defaultProps);
     }, [defaultProps, setValue]);
-    const openDocs = (0, react_1.useCallback)(() => {
-        window.open(
-        // TODO: Make sure to update this link when we release v4
-        'https://v4.remotion.dev/docs/parametrized-rendering#define-a-schema-');
-    }, []);
-    if (typeName === remotion_1.z.ZodFirstPartyTypeKind.ZodAny) {
-        return ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsx)(SchemaEmptyStateGraphic_1.SchemaEmptyStateGraphic, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 5 }), (0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["Make the props of this composition interactively editable by adding a", ' ', (0, jsx_runtime_1.jsx)("code", { style: codeSnippet, children: "schema" }), " prop to the", ' ', (0, jsx_runtime_1.jsx)("code", { style: codeSnippet, children: '<Composition>' }), " component."] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2, block: true }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: openDocs, children: "Learn how" })] }));
-    }
     if (!zodValidationResult.success) {
-        if (defaultProps === undefined) {
-            return ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["The schema can not be edited because the", ' ', (0, jsx_runtime_1.jsx)("code", { style: codeSnippet, children: "defaultProps" }), " prop in the", ' ', (0, jsx_runtime_1.jsx)("code", { style: codeSnippet, children: '<Composition>' }), " does not exist."] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["Fix the schema by adding a", ' ', (0, jsx_runtime_1.jsx)("code", { style: codeSnippet, children: "defaultProps" }), " prop to your composition."] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2, block: true }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: openDocs, children: "Learn more" })] }));
-        }
         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.jsx)(SchemaErrorMessages_1.InvalidDefaultProps, { zodValidationResult: zodValidationResult });
         }
-        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" })] }));
+        return ((0, jsx_runtime_1.jsx)(SchemaErrorMessages_1.InvalidSchema, { reset: reset, zodValidationResult: zodValidationResult }));
     }
-    if (typeName === remotion_1.z.ZodFirstPartyTypeKind.ZodObject) {
+    if (typeName === z.ZodFirstPartyTypeKind.ZodObject) {
         return ((0, jsx_runtime_1.jsx)("div", { style: scrollable, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: (0, jsx_runtime_1.jsx)(ZodObjectEditor_1.ZodObjectEditor, { value: value, setValue: setValue, jsonPath: [], schema: schema, compact: compact, defaultValue: defaultProps, onSave: onSave, showSaveButton: showSaveButton, onRemove: null }) }));
     }
     return null;

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { z } from 'zod';
+export declare const NoSchemaDefined: () => JSX.Element;
+export declare const NoDefaultProps: () => JSX.Element;
+export declare const InvalidDefaultProps: React.FC<{
+    zodValidationResult: z.SafeParseReturnType<unknown, unknown>;
+}>;
+export declare const InvalidSchema: React.FC<{
+    zodValidationResult: z.SafeParseReturnType<unknown, unknown>;
+    reset: () => void;
+}>;

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

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InvalidSchema = exports.InvalidDefaultProps = exports.NoDefaultProps = exports.NoSchemaDefined = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Button_1 = require("../../../../preview-server/error-overlay/remotion-overlay/Button");
+const colors_1 = require("../../../helpers/colors");
+const layout_1 = require("../../layout");
+const SchemaEmptyStateGraphic_1 = require("./SchemaEmptyStateGraphic");
+const ZodErrorMessages_1 = require("./ZodErrorMessages");
+const explainer = {
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'column',
+    padding: '0 12px',
+    justifyContent: 'center',
+    alignItems: 'center',
+    textAlign: 'center',
+};
+const errorExplanation = {
+    fontSize: 14,
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+    lineHeight: 1.5,
+};
+const codeSnippet = {
+    fontSize: 14,
+    color: 'var(--blue)',
+    fontFamily: 'monospace',
+};
+const errorContainer = {
+    padding: '8px 12px',
+    overflowY: 'auto',
+};
+const openDocs = () => {
+    window.open(
+    // TODO: Make sure to update this link when we release v4
+    'https://v4.remotion.dev/docs/parametrized-rendering#define-a-schema-');
+};
+const NoSchemaDefined = () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsx)(SchemaEmptyStateGraphic_1.SchemaEmptyStateGraphic, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 5 }), (0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["Make the props of this composition interactively editable by adding a", ' ', (0, jsx_runtime_1.jsx)("code", { style: codeSnippet, children: "schema" }), " prop to the", ' ', (0, jsx_runtime_1.jsx)("code", { style: codeSnippet, children: '<Composition>' }), " component."] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2, block: true }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: openDocs, children: "Learn how" })] }));
+};
+exports.NoSchemaDefined = NoSchemaDefined;
+const NoDefaultProps = () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["The schema can not be edited because the", ' ', (0, jsx_runtime_1.jsx)("code", { style: codeSnippet, children: "defaultProps" }), " prop in the", ' ', (0, jsx_runtime_1.jsx)("code", { style: codeSnippet, children: '<Composition>' }), " does not exist."] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["Fix the schema by adding a ", (0, jsx_runtime_1.jsx)("code", { style: codeSnippet, children: "defaultProps" }), ' ', "prop to your composition."] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2, block: true }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: openDocs, children: "Learn more" })] }));
+};
+exports.NoDefaultProps = NoDefaultProps;
+const InvalidDefaultProps = ({ zodValidationResult }) => {
+    // TODO: Does not react to when schema is updated
+    return ((0, jsx_runtime_1.jsxs)("div", { style: errorContainer, children: [(0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["The schema can not be edited because the", ' ', (0, jsx_runtime_1.jsx)("code", { style: codeSnippet, children: "defaultProps" }), " prop in the", ' ', (0, jsx_runtime_1.jsx)("code", { style: codeSnippet, children: '<Composition>' }), " is not valid:"] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ZodErrorMessages_1.ZodErrorMessages, { zodValidationResult: zodValidationResult }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["Fix the schema by changing the", ' ', (0, jsx_runtime_1.jsx)("code", { style: codeSnippet, children: "defaultProps" }), " prop in your composition so it does not give a type error."] })] }));
+};
+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" })] }));
+};
+exports.InvalidSchema = InvalidSchema;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { z } from 'remotion';
+import type { z } from 'zod';
 import type { JSONPath } from './zod-types';
 export declare const ZodArrayEditor: React.FC<{
     schema: z.ZodTypeAny;

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

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 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 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");
@@ -28,8 +28,13 @@ const ZodArrayEditor = ({ schema, jsonPath, compact, setValue: updateValue, defa
         };
     });
     const def = schema._def;
+    const z = (0, get_zod_if_possible_1.useZodIfPossible)();
+    if (!z) {
+        throw new Error('expected zod');
+    }
+    const zColor = (0, get_zod_if_possible_1.useZodColorIfPossible)();
     const typeName = def.typeName;
-    if (typeName !== remotion_1.z.ZodFirstPartyTypeKind.ZodArray) {
+    if (typeName !== z.ZodFirstPartyTypeKind.ZodArray) {
         throw new Error('expected object');
     }
     const isRoot = jsonPath.length === 0;
@@ -66,14 +71,14 @@ const ZodArrayEditor = ({ schema, jsonPath, compact, setValue: updateValue, defa
     }, [isRoot, paddingTop]);
     const onAdd = (0, react_1.useCallback)(() => {
         onChange((oldV) => {
-            return [...oldV, (0, create_zod_values_1.createZodValues)(def.type)];
+            return [...oldV, (0, create_zod_values_1.createZodValues)(def.type, z, zColor)];
         }, true);
-    }, [def.type, onChange]);
+    }, [def.type, onChange, z]);
     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: (_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" })] }) }) }));
+                        }) }), !localValue.zodValidation.success && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: localValue.zodValidation.error.format()._errors[0], type: "error" })] })), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onAdd, children: "+ Add item" })] }) }) }));
 };
 exports.ZodArrayEditor = ZodArrayEditor;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { z } from 'remotion';
+import type { z } from 'zod';
 import type { JSONPath } from './zod-types';
 export declare const ZodColorEditor: React.FC<{
     schema: z.ZodTypeAny;

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

@@ -3,8 +3,8 @@ 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 get_zod_if_possible_1 = require("../../get-zod-if-possible");
 const layout_1 = require("../../layout");
 const InputDragger_1 = require("../../NewComposition/InputDragger");
 const RemInput_1 = require("../../NewComposition/RemInput");
@@ -16,6 +16,14 @@ const fullWidth = {
     width: '100%',
 };
 const ZodColorEditor = ({ jsonPath, value, setValue, showSaveButton, defaultValue, schema, compact, onSave, onRemove, }) => {
+    const z = (0, get_zod_if_possible_1.useZodIfPossible)();
+    if (!z) {
+        throw new Error('expected zod');
+    }
+    const zodColor = (0, get_zod_if_possible_1.useZodColorIfPossible)();
+    if (!zodColor) {
+        throw new Error('expected zod color');
+    }
     const [localValue, setLocalValue] = (0, react_1.useState)(() => {
         return {
             value,
@@ -34,10 +42,10 @@ const ZodColorEditor = ({ jsonPath, value, setValue, showSaveButton, defaultValu
         }
     }, [schema, setValue]);
     const { a, b, g, r } = localValue.zodValidation.success
-        ? remotion_1.Internals.parseColor(localValue.value)
+        ? zodColor.ZColorInternals.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 newColor = (0, color_math_1.colorWithNewOpacity)(e.target.value, Math.round(a), zodColor);
         const safeParse = schema.safeParse(newColor);
         const newLocalState = {
             value: newColor,
@@ -47,7 +55,7 @@ const ZodColorEditor = ({ jsonPath, value, setValue, showSaveButton, defaultValu
         if (safeParse.success) {
             setValue(newColor);
         }
-    }, [a, schema, setValue]);
+    }, [a, schema, setValue, zodColor]);
     const onTextChange = (0, react_1.useCallback)((e) => {
         const newValue = e.target.value;
         const safeParse = schema.safeParse(newValue);
@@ -78,7 +86,7 @@ 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));
+        const newColor = (0, color_math_1.colorWithNewOpacity)(localValue.value, Math.round((Number(newValue) / 100) * 255), zodColor);
         const safeParse = schema.safeParse(newColor);
         const newLocalState = {
             value: newColor,
@@ -88,9 +96,9 @@ const ZodColorEditor = ({ jsonPath, value, setValue, showSaveButton, defaultValu
         if (safeParse.success) {
             setValue(newColor);
         }
-    }, [localValue.value, schema, setValue]);
+    }, [localValue.value, schema, setValue, zodColor]);
     const onOpacityValueChange = (0, react_1.useCallback)((newValue) => {
-        const newColor = (0, color_math_1.colorWithNewOpacity)(localValue.value, Math.round((Number(newValue) / 100) * 255));
+        const newColor = (0, color_math_1.colorWithNewOpacity)(localValue.value, Math.round((Number(newValue) / 100) * 255), zodColor);
         const safeParse = schema.safeParse(newColor);
         const newLocalState = {
             value: String(newColor),
@@ -100,9 +108,9 @@ const ZodColorEditor = ({ jsonPath, value, setValue, showSaveButton, defaultValu
         if (safeParse.success) {
             setValue(newColor);
         }
-    }, [localValue.value, schema, setValue]);
+    }, [localValue.value, schema, setValue, zodColor]);
     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" })] }))] })] }));
+                                    }, 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" })] }))] })] }));
 };
 exports.ZodColorEditor = ZodColorEditor;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { z } from 'remotion';
+import type { z } from 'zod';
 import type { JSONPath } from './zod-types';
 export declare const ZodDateEditor: React.FC<{
     schema: z.ZodTypeAny;

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

@@ -71,6 +71,6 @@ const ZodDateEditor = ({ jsonPath, value, setValue, showSaveButton, defaultValue
     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, { compact: compact, isDefaultValue: value.getTime() === defaultValue.getTime(), jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, onRemove: onRemove }), (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 }), (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-end", 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, { compact: compact, isDefaultValue: value.getTime() === defaultValue.getTime(), jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, onRemove: onRemove }), (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" })] }))] })] }));
 };
 exports.ZodDateEditor = ZodDateEditor;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { z } from 'remotion';
+import type { z } from 'zod';
 import type { JSONPath } from './zod-types';
 export declare const ZodEffectEditor: React.FC<{
     schema: z.ZodTypeAny;

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

@@ -3,14 +3,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ZodEffectEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const remotion_1 = require("remotion");
 const colors_1 = require("../../../helpers/colors");
+const get_zod_if_possible_1 = require("../../get-zod-if-possible");
 const ValidationMessage_1 = require("../../NewComposition/ValidationMessage");
 const ZodSwitch_1 = require("./ZodSwitch");
 const fullWidth = {
     width: '100%',
 };
 const ZodEffectEditor = ({ schema, jsonPath, value, setValue: updateValue, compact, defaultValue, onSave, onRemove, showSaveButton, }) => {
+    const z = (0, get_zod_if_possible_1.useZodIfPossible)();
+    if (!z) {
+        throw new Error('expected zod');
+    }
     const [localValue, setLocalValue] = (0, react_1.useState)(() => {
         return {
             value,
@@ -19,7 +23,7 @@ const ZodEffectEditor = ({ schema, jsonPath, value, setValue: updateValue, compa
     });
     const def = schema._def;
     const typeName = def.typeName;
-    if (typeName !== remotion_1.z.ZodFirstPartyTypeKind.ZodEffects) {
+    if (typeName !== z.ZodFirstPartyTypeKind.ZodEffects) {
         throw new Error('expected effect');
     }
     const onChange = (0, react_1.useCallback)((newValue) => {
@@ -46,6 +50,6 @@ const ZodEffectEditor = ({ schema, jsonPath, value, setValue: updateValue, compa
             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 }) }), !localValue.zodValidation.success && ((0, jsx_runtime_1.jsx)("legend", { children: (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: localValue.zodValidation.error.format()._errors[0], type: "error" }) }))] }));
+    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 }) }), !localValue.zodValidation.success && ((0, jsx_runtime_1.jsx)("legend", { children: (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: localValue.zodValidation.error.format()._errors[0], type: "error" }) }))] }));
 };
 exports.ZodEffectEditor = ZodEffectEditor;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { z } from 'remotion';
+import type { z } from 'zod';
 import type { JSONPath } from './zod-types';
 export declare const ZodEnumEditor: React.FC<{
     schema: z.ZodTypeAny;

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

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ZodEnumEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const remotion_1 = require("remotion");
 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");
@@ -14,6 +14,10 @@ const container = {
     width: '100%',
 };
 const ZodEnumEditor = ({ schema, jsonPath, compact, setValue: updateValue, defaultValue, value, onSave, showSaveButton, onRemove, }) => {
+    const z = (0, get_zod_if_possible_1.useZodIfPossible)();
+    if (!z) {
+        throw new Error('expected zod');
+    }
     const [localValue, setLocalValue] = (0, react_1.useState)(() => {
         return {
             value,
@@ -23,7 +27,7 @@ const ZodEnumEditor = ({ schema, jsonPath, compact, setValue: updateValue, defau
     });
     const def = schema._def;
     const typeName = def.typeName;
-    if (typeName !== remotion_1.z.ZodFirstPartyTypeKind.ZodEnum) {
+    if (typeName !== z.ZodFirstPartyTypeKind.ZodEnum) {
         throw new Error('expected enum');
     }
     const isRoot = jsonPath.length === 0;
@@ -63,6 +67,6 @@ const ZodEnumEditor = ({ schema, jsonPath, compact, setValue: updateValue, defau
     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, { onSave: save, showSaveButton: showSaveButton, isDefaultValue: value === defaultValue, compact: compact, onReset: reset, jsonPath: jsonPath, onRemove: onRemove }), (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-end", 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, { onSave: save, showSaveButton: showSaveButton, isDefaultValue: value === defaultValue, compact: compact, onReset: reset, jsonPath: jsonPath, onRemove: onRemove }), (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" })] }))] }));
 };
 exports.ZodEnumEditor = ZodEnumEditor;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { z } from 'remotion';
+import type { z } from 'zod';
 export declare const ZodErrorMessages: React.FC<{
     zodValidationResult: z.SafeParseReturnType<unknown, unknown>;
 }>;

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type { z } from 'zod';
+import type { JSONPath } from './zod-types';
+export declare const ZodNullableEditor: 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/ZodNullableEditor.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZodNullableEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ZodOrNullishEditor_1 = require("./ZodOrNullishEditor");
+const ZodNullableEditor = ({ jsonPath, compact, schema, setValue, onSave, defaultValue, value, showSaveButton, onRemove, }) => {
+    const { innerType } = schema._def;
+    return ((0, jsx_runtime_1.jsx)(ZodOrNullishEditor_1.ZodOrNullishEditor, { compact: compact, defaultValue: defaultValue, jsonPath: jsonPath, onRemove: onRemove, onSave: onSave, schema: innerType, setValue: setValue, showSaveButton: showSaveButton, value: value, nullishValue: null }));
+};
+exports.ZodNullableEditor = ZodNullableEditor;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { z } from 'remotion';
+import type { z } from 'zod';
 import type { JSONPath } from './zod-types';
 export declare const ZodNumberEditor: React.FC<{
     schema: z.ZodTypeAny;

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

@@ -76,7 +76,6 @@ const ZodNumberEditor = ({ jsonPath, value, schema, setValue, onSave, compact, d
             setValue(newValue);
         }
     }, [schema, setValue]);
-    // TODO: Error message does not align well
     const isDefault = value === defaultValue;
     const reset = (0, react_1.useCallback)(() => {
         onValueChange(defaultValue);
@@ -84,6 +83,6 @@ const ZodNumberEditor = ({ jsonPath, value, schema, setValue, onSave, compact, d
     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 }), (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) }), !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" })] }))] })] }));
+    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 }), (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" })] }))] })] }));
 };
 exports.ZodNumberEditor = ZodNumberEditor;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { z } from 'remotion';
+import type { z } from 'zod';
 import type { JSONPath } from './zod-types';
 export declare const ZodObjectEditor: React.FC<{
     schema: z.ZodTypeAny;

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

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ZodObjectEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const remotion_1 = require("remotion");
 const colors_1 = require("../../../helpers/colors");
+const get_zod_if_possible_1 = require("../../get-zod-if-possible");
 const layout_1 = require("../layout");
 const SchemaLabel_1 = require("./SchemaLabel");
 const ZodSwitch_1 = require("./ZodSwitch");
@@ -20,9 +20,13 @@ const fieldset = {
 };
 // TODO: First validate locally
 const ZodObjectEditor = ({ schema, jsonPath, setValue, value, compact, defaultValue, onSave, showSaveButton, onRemove, }) => {
+    const z = (0, get_zod_if_possible_1.useZodIfPossible)();
+    if (!z) {
+        throw new Error('expected zod');
+    }
     const def = schema._def;
     const typeName = def.typeName;
-    if (typeName !== remotion_1.z.ZodFirstPartyTypeKind.ZodObject) {
+    if (typeName !== z.ZodFirstPartyTypeKind.ZodObject) {
         throw new Error('expected object');
     }
     const shape = def.shape();

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type { z } from 'zod';
+import type { JSONPath } from './zod-types';
+export declare const ZodOptionalEditor: 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/ZodOptionalEditor.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZodOptionalEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ZodOrNullishEditor_1 = require("./ZodOrNullishEditor");
+const ZodOptionalEditor = ({ jsonPath, compact, schema, setValue, onSave, defaultValue, value, showSaveButton, onRemove, }) => {
+    const { innerType } = schema._def;
+    return ((0, jsx_runtime_1.jsx)(ZodOrNullishEditor_1.ZodOrNullishEditor, { compact: compact, defaultValue: defaultValue, jsonPath: jsonPath, onRemove: onRemove, onSave: onSave, schema: innerType, setValue: setValue, showSaveButton: showSaveButton, value: value, nullishValue: undefined }));
+};
+exports.ZodOptionalEditor = ZodOptionalEditor;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { z } from 'remotion';
+import type { z } from 'zod';
 import type { JSONPath } from './zod-types';
 export declare const ZodOrNullishEditor: React.FC<{
     showSaveButton: boolean;

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

@@ -5,6 +5,7 @@ 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 get_zod_if_possible_1 = require("../../get-zod-if-possible");
 const layout_1 = require("../../layout");
 const create_zod_values_1 = require("./create-zod-values");
 const SchemaLabel_1 = require("./SchemaLabel");
@@ -25,21 +26,27 @@ const checkBoxWrapper = {
     marginTop: '5px',
 };
 const ZodOrNullishEditor = ({ jsonPath, compact, schema, setValue, onSave, defaultValue, value, showSaveButton, onRemove, nullishValue, }) => {
+    const z = (0, get_zod_if_possible_1.useZodIfPossible)();
+    if (!z) {
+        throw new Error('expected zod');
+    }
+    const zColor = (0, get_zod_if_possible_1.useZodColorIfPossible)();
     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);
+        const val = e.target.checked
+            ? nullishValue
+            : (0, create_zod_values_1.createZodValues)(schema, z, zColor);
         onValueChange(val);
-    }, [nullishValue, onValueChange, schema]);
+    }, [nullishValue, onValueChange, schema, z, zColor]);
     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) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [value === nullishValue ? ((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;