@remotion/cli 4.0.76 → 4.0.79

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

@@ -5,22 +5,24 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const client_1 = require("@remotion/renderer/client");
 const react_1 = require("react");
 const Checkmark_1 = require("../../icons/Checkmark");
+const Checkbox_1 = require("../Checkbox");
 const layout_1 = require("../layout");
+const is_menu_item_1 = require("../Menu/is-menu-item");
 const ComboBox_1 = require("../NewComposition/ComboBox");
 const RemInput_1 = require("../NewComposition/RemInput");
 const SegmentedControl_1 = require("../SegmentedControl");
 const CrfSetting_1 = require("./CrfSetting");
-const InfoBubble_1 = require("./InfoBubble");
 const JpegQualitySetting_1 = require("./JpegQualitySetting");
 const layout_2 = require("./layout");
-const OptionExplainer_1 = require("./OptionExplainer");
+const OptionExplainerBubble_1 = require("./OptionExplainerBubble");
 const RenderModalHr_1 = require("./RenderModalHr");
 const ScaleSetting_1 = require("./ScaleSetting");
 const qualityControlModes = ['crf', 'bitrate'];
 const container = {
     flex: 1,
+    overflowY: 'auto',
 };
-const RenderModalPicture = ({ renderMode, scale, setScale, pixelFormat, imageFormatOptions, setQualityControl, qualityControlType, videoImageFormat, setJpegQuality, jpegQuality, maxCrf, minCrf, setCrf, shouldDisplayQualityControlPicker, setCustomTargetVideoBitrateValue, crf, customTargetVideoBitrate, stillImageFormat, colorSpace, setColorSpace, pixelFormatOptions, }) => {
+const RenderModalPicture = ({ renderMode, scale, setScale, pixelFormat, imageFormatOptions, setQualityControl, qualityControlType, videoImageFormat, setJpegQuality, jpegQuality, maxCrf, minCrf, setCrf, shouldDisplayQualityControlPicker, setCustomTargetVideoBitrateValue, crf, customTargetVideoBitrate, stillImageFormat, colorSpace, setColorSpace, pixelFormatOptions, encodingBufferSize, encodingMaxRate, setEncodingBufferSize, setEncodingMaxRate, }) => {
     const colorSpaceOptions = (0, react_1.useMemo)(() => {
         return client_1.BrowserSafeApis.validColorSpaces.map((option) => {
             return {
@@ -50,8 +52,20 @@ const RenderModalPicture = ({ renderMode, scale, setScale, pixelFormat, imageFor
     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_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Image Format" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: imageFormatOptions, needsWrapping: false }) })] })) : null, renderMode === 'video' && videoImageFormat === 'jpeg' && ((0, jsx_runtime_1.jsx)(JpegQualitySetting_1.JpegQualitySetting, { jpegQuality: jpegQuality, setJpegQuality: setJpegQuality })), renderMode === 'still' && stillImageFormat === 'jpeg' && ((0, jsx_runtime_1.jsx)(JpegQualitySetting_1.JpegQualitySetting, { jpegQuality: jpegQuality, setJpegQuality: setJpegQuality })), renderMode === 'video' && qualityControlType !== null ? ((0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {})) : null, shouldDisplayQualityControlPicker && renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Quality control" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: qualityControlOptions, needsWrapping: true }) })] })) : null, qualityControlType === 'crf' &&
+    const onEncodingBufferSizeToggled = (0, react_1.useCallback)((e) => {
+        setEncodingBufferSize(e.target.checked ? '10000k' : null);
+    }, [setEncodingBufferSize]);
+    const onEncodingMaxRateToggled = (0, react_1.useCallback)((e) => {
+        setEncodingMaxRate(e.target.checked ? '5000k' : null);
+    }, [setEncodingMaxRate]);
+    const onEncodingBufferSizeChanged = (0, react_1.useCallback)((e) => {
+        setEncodingBufferSize(e.target.value);
+    }, [setEncodingBufferSize]);
+    const onEncodingMaxRateChanged = (0, react_1.useCallback)((e) => {
+        setEncodingMaxRate(e.target.value);
+    }, [setEncodingMaxRate]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Image Format" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: imageFormatOptions, needsWrapping: false }) })] })) : null, renderMode === 'video' && videoImageFormat === 'jpeg' && ((0, jsx_runtime_1.jsx)(JpegQualitySetting_1.JpegQualitySetting, { jpegQuality: jpegQuality, setJpegQuality: setJpegQuality })), renderMode === 'still' && stillImageFormat === 'jpeg' && ((0, jsx_runtime_1.jsx)(JpegQualitySetting_1.JpegQualitySetting, { jpegQuality: jpegQuality, setJpegQuality: setJpegQuality })), renderMode === 'video' && qualityControlType !== null ? ((0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {})) : null, shouldDisplayQualityControlPicker && renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Quality control" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: qualityControlOptions, needsWrapping: true }) })] })) : null, qualityControlType === 'crf' &&
                 renderMode !== 'still' &&
-                renderMode !== 'sequence' ? ((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_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.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_2.rightRow, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { style: layout_2.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_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Pixel format" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: pixelFormatOptions, selectedId: pixelFormat, title: "Pixel Format" }) })] })) : null, renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Color space", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.25 }), ' ', (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.colorSpaceOption }) })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: colorSpaceOptions, selectedId: colorSpace, title: "Color Space" }) })] })) : null] }));
+                renderMode !== 'sequence' ? ((0, jsx_runtime_1.jsx)(CrfSetting_1.CrfSetting, { crf: crf, min: minCrf, max: maxCrf, setCrf: setCrf, option: "crfOption" })) : null, qualityControlType === 'bitrate' && renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Target video bitrate", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "videoBitrate" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { style: layout_2.input, value: customTargetVideoBitrate, onChange: onTargetVideoBitrateChanged, status: "ok", rightAlign: true }) }) })] })) : null, renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Custom FFmpeg -bufsize", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "encodingBufferSizeOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: encodingBufferSize !== null, onChange: onEncodingBufferSizeToggled, name: "encoding-buffer-size" }) })] }), encodingBufferSize === null ? null : ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "-bufsize value" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { style: layout_2.input, value: encodingBufferSize, onChange: onEncodingBufferSizeChanged, status: "ok", rightAlign: true }) }) })] })), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Custom FFmpeg -maxrate", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "encodingMaxRateOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: encodingMaxRate !== null, onChange: onEncodingMaxRateToggled, name: "encoding-max-rate" }) })] }), encodingMaxRate === null ? null : ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "-maxrate value" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { style: layout_2.input, value: encodingMaxRate, onChange: onEncodingMaxRateChanged, 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_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Pixel format" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: pixelFormatOptions, selectedId: pixelFormat, title: "Pixel Format" }) })] })) : null, renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Color space", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "colorSpaceOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: colorSpaceOptions, selectedId: colorSpace, title: "Color Space" }) })] })) : null] }));
 };
 exports.RenderModalPicture = RenderModalPicture;

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

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ScaleSetting = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const client_1 = require("@remotion/renderer/client");
 const NumberSetting_1 = require("./NumberSetting");
 const MIN_SCALE = 0.1;
 const MAX_SCALE = 10;
@@ -12,6 +11,6 @@ const ScaleSetting = ({ scale, setScale }) => {
                 return `${w.toFixed(1)}x`;
             }
             return `${w}x`;
-        }, onValueChanged: setScale, value: scale, hint: client_1.BrowserSafeApis.options.scaleOption }));
+        }, onValueChanged: setScale, value: scale, hint: 'scaleOption' }));
 };
 exports.ScaleSetting = ScaleSetting;

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

@@ -11,4 +11,5 @@ export declare const SchemaLabel: React.FC<{
     valid: boolean;
     saveDisabledByParent: boolean;
     suffix: string | null;
+    handleClick: null | (() => void);
 }>;

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

@@ -16,17 +16,32 @@ const compactStyles = {
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
+    flex: 1,
 };
-const SchemaLabel = ({ jsonPath, isDefaultValue, onReset, onSave, showSaveButton, onRemove, saving, valid, saveDisabledByParent, suffix, }) => {
+const SchemaLabel = ({ jsonPath, isDefaultValue, onReset, onSave, showSaveButton, onRemove, saving, valid, saveDisabledByParent, suffix, handleClick, }) => {
+    const [clickableButtonHovered, setClickableButtonHovered] = (0, react_1.useState)(false);
     const disableSave = saving || !valid || saveDisabledByParent;
     const labelStyle = (0, react_1.useMemo)(() => {
         return {
             fontFamily: 'monospace',
             fontSize: 14,
-            color: valid ? colors_1.LIGHT_TEXT : colors_1.FAIL_COLOR,
+            color: valid
+                ? clickableButtonHovered
+                    ? 'white'
+                    : colors_1.LIGHT_TEXT
+                : colors_1.FAIL_COLOR,
             lineHeight: '24px',
         };
-    }, [valid]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: compactStyles, children: [(0, jsx_runtime_1.jsxs)("span", { style: labelStyle, children: [(0, get_schema_label_1.getSchemaLabel)(jsonPath), " ", suffix ? suffix : null] }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), isDefaultValue ? null : (0, jsx_runtime_1.jsx)(SchemaResetButton_1.SchemaResetButton, { onClick: onReset }), isDefaultValue ? null : showSaveButton ? ((0, jsx_runtime_1.jsx)(SchemaSaveButton_1.SchemaSaveButton, { onClick: onSave, disabled: disableSave })) : null, onRemove ? (0, jsx_runtime_1.jsx)(InlineRemoveButton_1.InlineRemoveButton, { onClick: onRemove }) : null] }));
+    }, [clickableButtonHovered, valid]);
+    const onClickablePointerEnter = (0, react_1.useCallback)(() => {
+        setClickableButtonHovered(true);
+    }, []);
+    const onClickablePointerLeave = (0, react_1.useCallback)(() => {
+        setClickableButtonHovered(false);
+    }, []);
+    const labelContent = ((0, jsx_runtime_1.jsxs)("span", { style: labelStyle, children: [(0, get_schema_label_1.getSchemaLabel)(jsonPath), " ", suffix ? suffix : null] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: compactStyles, children: [handleClick ? (
+            // Minus the padding that a button has (user agent padding-line-start)
+            (0, jsx_runtime_1.jsx)("button", { onPointerEnter: onClickablePointerEnter, onPointerLeave: onClickablePointerLeave, type: "button", onClick: handleClick, style: { border: 'none', marginLeft: -6 }, children: labelContent })) : (labelContent), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), isDefaultValue ? null : (0, jsx_runtime_1.jsx)(SchemaResetButton_1.SchemaResetButton, { onClick: onReset }), isDefaultValue ? null : showSaveButton ? ((0, jsx_runtime_1.jsx)(SchemaSaveButton_1.SchemaSaveButton, { onClick: onSave, disabled: disableSave })) : null, onRemove ? (0, jsx_runtime_1.jsx)(InlineRemoveButton_1.InlineRemoveButton, { onClick: onRemove }) : null] }));
 };
 exports.SchemaLabel = SchemaLabel;

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

@@ -1,2 +1,10 @@
 import React from 'react';
+import type { z } from 'zod';
+export declare const VERTICAL_GUIDE_HEIGHT = 24;
 export declare const SchemaSeparationLine: React.FC;
+export declare const SchemaArrayItemSeparationLine: React.FC<{
+    onChange: (updater: (oldV: unknown[]) => unknown[], forceApply: boolean, increment: boolean) => void;
+    index: number;
+    schema: z.ZodTypeAny;
+    isLast: boolean;
+}>;

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

@@ -1,11 +1,79 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SchemaSeparationLine = void 0;
+exports.SchemaArrayItemSeparationLine = exports.SchemaSeparationLine = exports.VERTICAL_GUIDE_HEIGHT = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../../../helpers/colors");
+const plus_1 = require("../../../icons/plus");
+const get_zod_if_possible_1 = require("../../get-zod-if-possible");
+const layout_1 = require("../../layout");
+const layout_2 = require("../layout");
+const create_zod_values_1 = require("./create-zod-values");
+exports.VERTICAL_GUIDE_HEIGHT = 24;
 const line = {
-    borderBottom: '1px solid rgba(255, 255, 255, 0.1)',
+    borderBottom: '1px solid ' + colors_1.LINE_COLOR,
 };
 const SchemaSeparationLine = () => {
     return (0, jsx_runtime_1.jsx)("div", { style: line });
 };
 exports.SchemaSeparationLine = SchemaSeparationLine;
+const arraySeparationLine = {
+    borderBottom: '1px solid ' + colors_1.LINE_COLOR,
+    marginTop: -exports.VERTICAL_GUIDE_HEIGHT / 2,
+    pointerEvents: 'none',
+    width: '100%',
+};
+const SchemaArrayItemSeparationLine = ({ onChange, index, schema, isLast }) => {
+    const [outerHovered, setOuterHovered] = (0, react_1.useState)(false);
+    const [innerHovered, setInnerHovered] = (0, react_1.useState)(false);
+    const zodTypes = (0, get_zod_if_possible_1.useZodTypesIfPossible)();
+    const z = (0, get_zod_if_possible_1.useZodIfPossible)();
+    if (!z) {
+        throw new Error('expected zod');
+    }
+    const def = schema._def;
+    const onAdd = (0, react_1.useCallback)(() => {
+        onChange((oldV) => {
+            return [
+                ...oldV.slice(0, index + 1),
+                (0, create_zod_values_1.createZodValues)(def.type, z, zodTypes),
+                ...oldV.slice(index + 1),
+            ];
+        }, false, true);
+    }, [def.type, index, onChange, z, zodTypes]);
+    const dynamicAddButtonStyle = (0, react_1.useMemo)(() => {
+        return {
+            display: 'flex',
+            justifyContent: 'center',
+            height: exports.VERTICAL_GUIDE_HEIGHT,
+            opacity: outerHovered ? 1 : 0,
+            position: 'relative',
+            marginTop: -4,
+        };
+    }, [outerHovered]);
+    const inner = (0, react_1.useMemo)(() => {
+        return {
+            background: colors_1.BACKGROUND,
+            paddingLeft: 10,
+            paddingRight: 10,
+        };
+    }, []);
+    const onOuterMouseEnter = (0, react_1.useCallback)(() => {
+        setOuterHovered(true);
+    }, []);
+    const onOuterMouseLeave = (0, react_1.useCallback)(() => {
+        setOuterHovered(false);
+    }, []);
+    const onInnerMouseEnter = (0, react_1.useCallback)(() => {
+        setInnerHovered(true);
+    }, []);
+    const onInnerMouseLeave = (0, react_1.useCallback)(() => {
+        setInnerHovered(false);
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'row' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { flex: 1 }, children: [(0, jsx_runtime_1.jsx)("div", { style: dynamicAddButtonStyle, onMouseEnter: onOuterMouseEnter, onMouseLeave: onOuterMouseLeave, children: (0, jsx_runtime_1.jsx)("div", { onClick: onAdd, style: inner, onMouseEnter: onInnerMouseEnter, onMouseLeave: onInnerMouseLeave, children: (0, jsx_runtime_1.jsx)(plus_1.Plus, { color: innerHovered ? 'white' : colors_1.LIGHT_TEXT, style: { height: exports.VERTICAL_GUIDE_HEIGHT / 2 } }) }) }), (0, jsx_runtime_1.jsx)("div", { style: arraySeparationLine })] }), isLast ? ((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)("div", { style: {
+                            ...layout_2.fieldSetText,
+                            alignItems: 'center',
+                            display: 'flex',
+                        }, children: ']' })] })) : null] }));
+};
+exports.SchemaArrayItemSeparationLine = SchemaArrayItemSeparationLine;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 export declare const SchemaVerticalGuide: React.FC<{
     isRoot: boolean;
     children: React.ReactNode;

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

@@ -2,12 +2,30 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SchemaVerticalGuide = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const SchemaSeparationLine_1 = require("./SchemaSeparationLine");
+const flex = {
+    flex: 1,
+};
 const SchemaVerticalGuide = ({ isRoot, children }) => {
-    return ((0, jsx_runtime_1.jsx)("div", { style: isRoot
-            ? undefined
+    const outer = (0, react_1.useMemo)(() => {
+        return {
+            display: 'flex',
+            flexDirection: 'row',
+            position: 'relative',
+            marginLeft: isRoot ? 0 : 4,
+        };
+    }, [isRoot]);
+    const inner = (0, react_1.useMemo)(() => {
+        return isRoot
+            ? {}
             : {
-                borderLeft: '1px solid rgba(255, 255, 255, 0.1)',
-                marginLeft: 4,
-            }, children: children }));
+                height: `calc(100% - ${SchemaSeparationLine_1.VERTICAL_GUIDE_HEIGHT / 2}px)`,
+                width: 1,
+                background: '#363A3E',
+                position: 'absolute',
+            };
+    }, [isRoot]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: outer, children: [(0, jsx_runtime_1.jsx)("div", { style: inner }), (0, jsx_runtime_1.jsx)("div", { style: flex, children: children })] }));
 };
 exports.SchemaVerticalGuide = SchemaVerticalGuide;

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

@@ -26,11 +26,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ZodArrayEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
-const plus_1 = require("../../../icons/plus");
 const get_zod_if_possible_1 = require("../../get-zod-if-possible");
-const InlineAction_1 = require("../../InlineAction");
-const layout_1 = require("../layout");
-const create_zod_values_1 = require("./create-zod-values");
 const deep_equal_1 = require("./deep-equal");
 const Fieldset_1 = require("./Fieldset");
 const local_state_1 = require("./local-state");
@@ -46,38 +42,31 @@ const ZodArrayEditor = ({ schema, jsonPath, setValue, defaultValue, value, onSav
         setValue,
         defaultValue,
     });
+    const [expanded, setExpanded] = (0, react_1.useState)(true);
     const def = schema._def;
+    const suffix = (0, react_1.useMemo)(() => {
+        return expanded ? ' [' : ' [...] ';
+    }, [expanded]);
     const z = (0, get_zod_if_possible_1.useZodIfPossible)();
     if (!z) {
         throw new Error('expected zod');
     }
-    const zodTypes = (0, get_zod_if_possible_1.useZodTypesIfPossible)();
     const typeName = def.typeName;
     if (typeName !== z.ZodFirstPartyTypeKind.ZodArray) {
         throw new Error('expected object');
     }
-    const onAdd = (0, react_1.useCallback)(() => {
-        onChange((oldV) => {
-            return [...oldV, (0, create_zod_values_1.createZodValues)(def.type, z, zodTypes)];
-        }, false, true);
-    }, [def.type, onChange, z, zodTypes]);
     const isDefaultValue = (0, react_1.useMemo)(() => {
         return (0, deep_equal_1.deepEqual)(localValue.value, defaultValue);
     }, [defaultValue, localValue]);
-    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 ((0, jsx_runtime_1.jsxs)(Fieldset_1.Fieldset, { shouldPad: mayPad, success: localValue.zodValidation.success, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                }, children: (0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { onReset: reset, isDefaultValue: isDefaultValue, jsonPath: jsonPath, onRemove: onRemove, suffix: suffix, onSave: () => {
+                        onSave(() => localValue.value, false, false);
+                    }, saveDisabledByParent: saveDisabledByParent, saving: saving, showSaveButton: showSaveButton, valid: localValue.zodValidation.success, handleClick: () => setExpanded(!expanded) }) }), expanded ? ((0, jsx_runtime_1.jsx)(RevisionContextProvider, { children: (0, jsx_runtime_1.jsx)(SchemaVerticalGuide_1.SchemaVerticalGuide, { isRoot: false, children: localValue.value.map((child, i) => {
                         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 })] }));
+                        (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: defaultValue[i], onSave: onSave, showSaveButton: showSaveButton, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }), (0, jsx_runtime_1.jsx)(SchemaSeparationLine_1.SchemaArrayItemSeparationLine, { schema: schema, index: i, onChange: onChange, isLast: i === localValue.value.length - 1 })] }, `${i}${localValue.keyStabilityRevision}`));
+                    }) }) })) : null, (0, jsx_runtime_1.jsx)(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, localValue: localValue })] }));
 };
 exports.ZodArrayEditor = ZodArrayEditor;

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

@@ -3,8 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ZodArrayItemEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const get_zod_if_possible_1 = require("../../get-zod-if-possible");
 const ZodSwitch_1 = require("./ZodSwitch");
 const ZodArrayItemEditor = ({ def, onChange, jsonPath, index, value, defaultValue, onSave: onSaveObject, showSaveButton, saving, saveDisabledByParent, mayPad, }) => {
+    const z = (0, get_zod_if_possible_1.useZodIfPossible)();
+    if (!z) {
+        throw new Error('expected zod');
+    }
     const onRemove = (0, react_1.useCallback)(() => {
         onChange((oldV) => [...oldV.slice(0, index), ...oldV.slice(index + 1)], false, true);
     }, [index, onChange]);
@@ -23,6 +28,6 @@ const ZodArrayItemEditor = ({ def, onChange, jsonPath, index, value, defaultValu
             ...oldV.slice(index + 1),
         ], false, false);
     }, [index, onSaveObject]);
-    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 }));
+    return ((0, jsx_runtime_1.jsx)("div", { children: (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.js

@@ -23,6 +23,6 @@ const ZodBooleanEditor = ({ schema, jsonPath, value, setValue, onSave, defaultVa
     const save = (0, react_1.useCallback)(() => {
         onSave(() => value, false, false);
     }, [onSave, value]);
-    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 }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(Fieldset_1.Fieldset, { shouldPad: mayPad, success: localValue.zodValidation.success, children: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { handleClick: null, 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.js

@@ -64,7 +64,7 @@ const ZodColorEditor = ({ jsonPath, value, setValue, showSaveButton, defaultValu
         const newColor = (0, color_math_1.colorWithNewOpacity)(localValue.value, Math.round((Number(newValue) / 100) * 255), zodTypes);
         onValueChange(() => newColor, false, false);
     }, [localValue.value, onValueChange, zodTypes]);
-    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: {
+    return ((0, jsx_runtime_1.jsxs)(Fieldset_1.Fieldset, { shouldPad: mayPad, success: localValue.zodValidation.success, children: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { handleClick: null, 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, 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 })] })] }));
 };

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

@@ -57,6 +57,6 @@ const ZodDateEditor = ({ jsonPath, value, setValue, showSaveButton, defaultValue
     const save = (0, react_1.useCallback)(() => {
         onSave(() => value, false, false);
     }, [onSave, value]);
-    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 })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(Fieldset_1.Fieldset, { shouldPad: mayPad, success: localValue.zodValidation.success, children: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { handleClick: null, 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/ZodDiscriminatedUnionEditor.js

@@ -57,7 +57,7 @@ const ZodDiscriminatedUnionEditor = ({ schema, setValue, showSaveButton, saving,
     const discriminatedUnionReplacement = (0, react_1.useMemo)(() => {
         return {
             discriminator: typedSchema.discriminator,
-            markup: ((0, jsx_runtime_1.jsxs)(Fieldset_1.Fieldset, { shouldPad: mayPad, success: true, children: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { isDefaultValue: localValue.value[typedSchema.discriminator] ===
+            markup: ((0, jsx_runtime_1.jsxs)(Fieldset_1.Fieldset, { shouldPad: mayPad, success: true, children: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { handleClick: null, isDefaultValue: localValue.value[typedSchema.discriminator] ===
                             defaultValue[typedSchema.discriminator], jsonPath: [...jsonPath, typedSchema.discriminator], onRemove: onRemove, onReset: reset, onSave: save, saveDisabledByParent: saveDisabledByParent, saving: saving, showSaveButton: showSaveButton, suffix: null, valid: localValue.zodValidation.success }), (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: "Select type", values: comboBoxValues, selectedId: value[typedSchema.discriminator] })] }, 'replacement')),
         };
     }, [

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

@@ -50,6 +50,6 @@ const ZodEnumEditor = ({ schema, jsonPath, setValue, defaultValue, value, onSave
     const save = (0, react_1.useCallback)(() => {
         onSave(() => value, false, false);
     }, [onSave, value]);
-    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 })] }));
+    return ((0, jsx_runtime_1.jsxs)(Fieldset_1.Fieldset, { shouldPad: true, success: localValue.zodValidation.success, children: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { handleClick: null, 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/ZodNonEditableValue.js

@@ -22,6 +22,6 @@ const wideEmptyLabel = {
 const ZonNonEditableValue = ({ jsonPath, label, showSaveButton, saving, mayPad }) => {
     const save = (0, react_1.useCallback)(() => undefined, []);
     const reset = (0, react_1.useCallback)(() => undefined, []);
-    return ((0, jsx_runtime_1.jsxs)(Fieldset_1.Fieldset, { shouldPad: mayPad, success: true, children: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { isDefaultValue: true, jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, onRemove: null, saving: saving, valid: true, saveDisabledByParent: true, suffix: null }), (0, jsx_runtime_1.jsx)("div", { style: fullWidth, children: (0, jsx_runtime_1.jsx)("em", { style: wideEmptyLabel, children: label }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(Fieldset_1.Fieldset, { shouldPad: mayPad, success: true, children: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { handleClick: null, isDefaultValue: true, jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, onRemove: null, saving: saving, valid: true, saveDisabledByParent: true, suffix: null }), (0, jsx_runtime_1.jsx)("div", { style: fullWidth, children: (0, jsx_runtime_1.jsx)("em", { style: wideEmptyLabel, children: label }) })] }));
 };
 exports.ZonNonEditableValue = ZonNonEditableValue;

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

@@ -64,6 +64,6 @@ const ZodNumberEditor = ({ jsonPath, value, schema, setValue, onSave, defaultVal
     const save = (0, react_1.useCallback)(() => {
         onSave(() => value, false, false);
     }, [onSave, value]);
-    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: isDefault, 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)(InputDragger_1.InputDragger, { type: 'number', value: localValue.value, style: fullWidth, status: localValue.zodValidation.success ? 'ok' : 'error', placeholder: jsonPath.join('.'), onTextChange: onTextChange, onValueChange: onNumberChange, min: getMinValue(schema), max: getMaxValue(schema), step: getStep(schema), rightAlign: false }), (0, jsx_runtime_1.jsx)(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, localValue: localValue })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(Fieldset_1.Fieldset, { shouldPad: mayPad, success: localValue.zodValidation.success, children: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { handleClick: null, isDefaultValue: isDefault, 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)(InputDragger_1.InputDragger, { type: 'number', value: localValue.value, style: fullWidth, status: localValue.zodValidation.success ? 'ok' : 'error', placeholder: jsonPath.join('.'), onTextChange: onTextChange, onValueChange: onNumberChange, min: getMinValue(schema), max: getMaxValue(schema), step: getStep(schema), rightAlign: false }), (0, jsx_runtime_1.jsx)(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, localValue: localValue })] })] }));
 };
 exports.ZodNumberEditor = ZodNumberEditor;

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

@@ -40,6 +40,7 @@ const ZodObjectEditor = ({ schema, jsonPath, setValue, value, defaultValue, onSa
     if (!z) {
         throw new Error('expected zod');
     }
+    const [expanded, setExpanded] = (0, react_1.useState)(true);
     const { localValue, onChange, RevisionContextProvider, reset } = (0, local_state_1.useLocalState)({
         schema,
         setValue,
@@ -57,11 +58,14 @@ const ZodObjectEditor = ({ schema, jsonPath, setValue, value, defaultValue, onSa
     const isDefaultValue = (0, react_1.useMemo)(() => {
         return (0, deep_equal_1.deepEqual)(localValue.value, defaultValue);
     }, [defaultValue, localValue]);
-    return ((0, jsx_runtime_1.jsxs)(Fieldset_1.Fieldset, { shouldPad: !isRoot && mayPad, success: localValue.zodValidation.success, children: [isRoot ? null : ((0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { isDefaultValue: isDefaultValue, onReset: reset, jsonPath: jsonPath, onRemove: onRemove, suffix: ' {', onSave: () => {
+    const suffix = (0, react_1.useMemo)(() => {
+        return expanded ? ' {' : ' {...}';
+    }, [expanded]);
+    return ((0, jsx_runtime_1.jsxs)(Fieldset_1.Fieldset, { shouldPad: !isRoot && mayPad, success: localValue.zodValidation.success, children: [isRoot ? null : ((0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { isDefaultValue: isDefaultValue, onReset: reset, jsonPath: jsonPath, onRemove: onRemove, suffix: suffix, onSave: () => {
                     onSave(() => {
                         return 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: isRoot, children: keys.map((key, i) => {
+                }, saveDisabledByParent: saveDisabledByParent, saving: saving, showSaveButton: showSaveButton, valid: localValue.zodValidation.success, handleClick: () => setExpanded(!expanded) })), expanded ? ((0, jsx_runtime_1.jsx)(RevisionContextProvider, { children: (0, jsx_runtime_1.jsx)(SchemaVerticalGuide_1.SchemaVerticalGuide, { isRoot: isRoot, children: keys.map((key, i) => {
                         if (discriminatedUnionReplacement &&
                             key === discriminatedUnionReplacement.discriminator) {
                             return discriminatedUnionReplacement.markup;
@@ -72,17 +76,21 @@ const ZodObjectEditor = ({ schema, jsonPath, setValue, value, defaultValue, onSa
                                         onChange((oldVal) => {
                                             return {
                                                 ...oldVal,
-                                                [key]: typeof val === 'function' ? val(oldVal[key]) : val,
+                                                [key]: typeof val === 'function'
+                                                    ? val(oldVal[key])
+                                                    : val,
                                             };
                                         }, forceApply, false);
                                     }, onSave: (val, forceApply) => {
                                         onSave((oldVal) => {
                                             return {
                                                 ...oldVal,
-                                                [key]: typeof val === 'function' ? val(oldVal[key]) : val,
+                                                [key]: typeof val === 'function'
+                                                    ? val(oldVal[key])
+                                                    : val,
                                             };
                                         }, forceApply, false);
                                     }, onRemove: null, showSaveButton: showSaveButton, saving: saving, saveDisabledByParent: saveDisabledByParent }), i === keys.length - 1 ? null : (0, jsx_runtime_1.jsx)(SchemaSeparationLine_1.SchemaSeparationLine, {})] }, key));
-                    }) }) }), isRoot ? null : (0, jsx_runtime_1.jsx)("div", { style: layout_1.fieldsetLabel, children: '}' })] }));
+                    }) }) })) : null, isRoot || !expanded ? null : (0, jsx_runtime_1.jsx)("div", { style: layout_1.fieldsetLabel, children: '}' })] }));
 };
 exports.ZodObjectEditor = ZodObjectEditor;

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

@@ -45,6 +45,6 @@ const ZodOrNullishEditor = ({ jsonPath, schema, setValue, onSave, defaultValue,
     const save = (0, react_1.useCallback)(() => {
         onSave(() => value, false, false);
     }, [onSave, value]);
-    return ((0, jsx_runtime_1.jsxs)(Fieldset_1.Fieldset, { shouldPad: mayPad, success: localValue.zodValidation.success, children: [localValue.value === nullishValue ? ((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.jsx)(ZodSwitch_1.ZodSwitch, { value: localValue.value, setValue: setLocalValue, jsonPath: jsonPath, schema: innerSchema, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: false })), (0, jsx_runtime_1.jsxs)("div", { style: checkBoxWrapper, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: isChecked, onChange: onCheckBoxChange, disabled: false, name: jsonPath.join('.') }), (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)(Fieldset_1.Fieldset, { shouldPad: mayPad, success: localValue.zodValidation.success, children: [localValue.value === nullishValue ? ((0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { handleClick: null, 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.jsx)(ZodSwitch_1.ZodSwitch, { value: localValue.value, setValue: setLocalValue, jsonPath: jsonPath, schema: innerSchema, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: false })), (0, jsx_runtime_1.jsxs)("div", { style: checkBoxWrapper, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: isChecked, onChange: onCheckBoxChange, disabled: false, name: jsonPath.join('.') }), (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/ZodStaticFileEditor.js

@@ -51,6 +51,6 @@ const ZodStaticFileEditor = ({ schema, jsonPath, setValue, defaultValue, value,
     const save = (0, react_1.useCallback)(() => {
         onSave(() => value);
     }, [onSave, value]);
-    return ((0, jsx_runtime_1.jsxs)(Fieldset_1.Fieldset, { shouldPad: mayPad, 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: saveDisabledByParent, suffix: null }), (0, jsx_runtime_1.jsx)("div", { style: isRoot ? undefined : container, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: comboBoxValues, selectedId: localValue.value, title: value }) }), (0, jsx_runtime_1.jsx)(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, localValue: localValue })] }));
+    return ((0, jsx_runtime_1.jsxs)(Fieldset_1.Fieldset, { shouldPad: mayPad, success: localValue.zodValidation.success, children: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { handleClick: null, onSave: save, showSaveButton: showSaveButton, isDefaultValue: localValue.value === defaultValue, onReset: reset, jsonPath: jsonPath, onRemove: onRemove, saving: saving, valid: localValue.zodValidation.success, saveDisabledByParent: saveDisabledByParent, suffix: null }), (0, jsx_runtime_1.jsx)("div", { style: isRoot ? undefined : container, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: comboBoxValues, selectedId: localValue.value, title: value }) }), (0, jsx_runtime_1.jsx)(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, localValue: localValue })] }));
 };
 exports.ZodStaticFileEditor = ZodStaticFileEditor;

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

@@ -29,6 +29,6 @@ const ZodStringEditor = ({ jsonPath, value, setValue, showSaveButton, defaultVal
     const save = (0, react_1.useCallback)(() => {
         onSave(() => value, false, false);
     }, [onSave, value]);
-    return ((0, jsx_runtime_1.jsxs)(Fieldset_1.Fieldset, { shouldPad: mayPad, success: false, 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.jsx)(RemInput_1.RemotionInput, { value: localValue.value, status: localValue.zodValidation ? 'ok' : 'error', placeholder: jsonPath.join('.'), onChange: onChange, rightAlign: false, name: jsonPath.join('.') }), (0, jsx_runtime_1.jsx)(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, localValue: localValue })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(Fieldset_1.Fieldset, { shouldPad: mayPad, success: false, children: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { handleClick: null, 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.jsx)(RemInput_1.RemotionInput, { value: localValue.value, status: localValue.zodValidation ? 'ok' : 'error', placeholder: jsonPath.join('.'), onChange: onChange, rightAlign: false, name: jsonPath.join('.') }), (0, jsx_runtime_1.jsx)(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, localValue: localValue })] })] }));
 };
 exports.ZodStringEditor = ZodStringEditor;

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

@@ -37,6 +37,6 @@ const ZodTextareaEditor = ({ jsonPath, value, setValue, showSaveButton, defaultV
     const save = (0, react_1.useCallback)(() => {
         onSave(() => value, false, false);
     }, [onSave, value]);
-    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.jsx)(RemTextarea_1.RemTextarea, { onChange: onChange, value: localValue.value, status: localValue.zodValidation ? 'ok' : 'error', placeholder: jsonPath.join('.'), name: jsonPath.join('.'), style: textareaStyle }), (0, jsx_runtime_1.jsx)(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, localValue: localValue })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(Fieldset_1.Fieldset, { shouldPad: mayPad, success: localValue.zodValidation.success, children: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { handleClick: null, 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.jsx)(RemTextarea_1.RemTextarea, { onChange: onChange, value: localValue.value, status: localValue.zodValidation ? 'ok' : 'error', placeholder: jsonPath.join('.'), name: jsonPath.join('.'), style: textareaStyle }), (0, jsx_runtime_1.jsx)(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, localValue: localValue })] })] }));
 };
 exports.ZodTextareaEditor = ZodTextareaEditor;

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

@@ -3,4 +3,5 @@ export declare const optionRow: React.CSSProperties;
 export declare const label: React.CSSProperties;
 export declare const rightRow: React.CSSProperties;
 export declare const input: React.CSSProperties;
+export declare const fieldSetText: React.CSSProperties;
 export declare const fieldsetLabel: React.CSSProperties;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.fieldsetLabel = exports.input = exports.rightRow = exports.label = exports.optionRow = void 0;
+exports.fieldsetLabel = exports.fieldSetText = exports.input = exports.rightRow = exports.label = exports.optionRow = void 0;
 const colors_1 = require("../../helpers/colors");
 exports.optionRow = {
     display: 'flex',
@@ -31,12 +31,15 @@ exports.rightRow = {
 exports.input = {
     minWidth: 250,
 };
-exports.fieldsetLabel = {
+exports.fieldSetText = {
     color: colors_1.LIGHT_TEXT,
     fontSize: 14,
+    fontFamily: 'monospace',
+};
+exports.fieldsetLabel = {
+    ...exports.fieldSetText,
     display: 'flex',
     flexDirection: 'row',
-    fontFamily: 'monospace',
     alignItems: 'center',
     width: '100%',
 };

package/dist/editor/components/RenderQueue/actions.d.ts

@@ -35,7 +35,7 @@ export declare const addSequenceRenderJob: ({ compositionId, outName, imageForma
     disallowParallelEncoding: boolean;
     multiProcessOnLinux: boolean;
 }) => Promise<undefined>;
-export declare const addVideoRenderJob: ({ compositionId, outName, imageFormat, jpegQuality, scale, logLevel, codec, concurrency, crf, startFrame, endFrame, muted, enforceAudioTrack, proResProfile, x264Preset, pixelFormat, audioBitrate, videoBitrate, everyNthFrame, numberOfGifLoops, delayRenderTimeout, audioCodec, disallowParallelEncoding, chromiumOptions, envVariables, inputProps, offthreadVideoCacheSizeInBytes, colorSpace, multiProcessOnLinux, }: {
+export declare const addVideoRenderJob: ({ compositionId, outName, imageFormat, jpegQuality, scale, logLevel, codec, concurrency, crf, startFrame, endFrame, muted, enforceAudioTrack, proResProfile, x264Preset, pixelFormat, audioBitrate, videoBitrate, everyNthFrame, numberOfGifLoops, delayRenderTimeout, audioCodec, disallowParallelEncoding, chromiumOptions, envVariables, inputProps, offthreadVideoCacheSizeInBytes, colorSpace, multiProcessOnLinux, encodingMaxRate, encodingBufferSize, }: {
     compositionId: string;
     outName: string;
     imageFormat: VideoImageFormat;
@@ -65,6 +65,8 @@ export declare const addVideoRenderJob: ({ compositionId, outName, imageFormat,
     offthreadVideoCacheSizeInBytes: number | null;
     colorSpace: ColorSpace;
     multiProcessOnLinux: boolean;
+    encodingMaxRate: string | null;
+    encodingBufferSize: string | null;
 }) => Promise<undefined>;
 export declare const unsubscribeFromFileExistenceWatcher: ({ file, clientId, }: {
     file: string;