@remotion/studio 4.0.478 → 4.0.479

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

@@ -1,18 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Fieldset = exports.SCHEMA_EDITOR_FIELDSET_PADDING = void 0;
+exports.Fieldset = exports.getSchemaEditorFieldsetPadding = exports.SCHEMA_EDITOR_FIELDSET_PADDING = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-exports.SCHEMA_EDITOR_FIELDSET_PADDING = 10;
+exports.SCHEMA_EDITOR_FIELDSET_PADDING = 6;
+const getSchemaEditorFieldsetPadding = () => {
+    return exports.SCHEMA_EDITOR_FIELDSET_PADDING;
+};
+exports.getSchemaEditorFieldsetPadding = getSchemaEditorFieldsetPadding;
 const AlreadyPaddedRightContext = (0, react_1.createContext)(false);
 const Fieldset = ({ children, shouldPad }) => {
     const alreadyPadded = (0, react_1.useContext)(AlreadyPaddedRightContext);
     const style = (0, react_1.useMemo)(() => {
         if (shouldPad) {
+            const padding = (0, exports.getSchemaEditorFieldsetPadding)();
             return {
-                padding: exports.SCHEMA_EDITOR_FIELDSET_PADDING,
-                paddingTop: exports.SCHEMA_EDITOR_FIELDSET_PADDING / 2,
-                paddingRight: alreadyPadded ? 0 : exports.SCHEMA_EDITOR_FIELDSET_PADDING,
+                padding,
+                paddingTop: padding / 2,
+                paddingRight: alreadyPadded ? 0 : padding,
             };
         }
         return {};

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

@@ -1,8 +1,12 @@
 import React from 'react';
+import { type SchemaErrorMode } from './SchemaErrorMessages';
 import type { AnyZodSchema } from './zod-schema-type';
 import type { UpdaterFunction } from './ZodSwitch';
 export declare const SchemaEditor: React.FC<{
     readonly schema: AnyZodSchema;
     readonly value: Record<string, unknown>;
     readonly setValue: UpdaterFunction<Record<string, unknown>>;
+    readonly scrollableContainer?: boolean;
+    readonly contentInset?: number;
+    readonly errorMode?: SchemaErrorMode;
 }>;

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

@@ -4,6 +4,7 @@ exports.SchemaEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const get_zod_if_possible_1 = require("../../get-zod-if-possible");
 const is_menu_item_1 = require("../../Menu/is-menu-item");
+const Fieldset_1 = require("./Fieldset");
 const SchemaErrorMessages_1 = require("./SchemaErrorMessages");
 const scroll_to_default_props_path_1 = require("./scroll-to-default-props-path");
 const zod_schema_type_1 = require("./zod-schema-type");
@@ -14,18 +15,40 @@ const scrollable = {
     flexDirection: 'column',
     overflowY: 'auto',
 };
-const SchemaEditor = ({ schema, value, setValue }) => {
+const notScrollable = {
+    display: 'flex',
+    flexDirection: 'column',
+};
+const getContainerStyle = ({ contentInset, scrollableContainer, }) => {
+    const base = scrollableContainer ? scrollable : notScrollable;
+    if (contentInset === undefined) {
+        return base;
+    }
+    const fieldsetPadding = (0, Fieldset_1.getSchemaEditorFieldsetPadding)();
+    const rootInset = Math.max(0, contentInset - fieldsetPadding);
+    return {
+        ...base,
+        boxSizing: 'border-box',
+        paddingLeft: rootInset,
+        paddingRight: rootInset,
+    };
+};
+const SchemaEditor = ({ schema, value, setValue, scrollableContainer = true, contentInset, errorMode = 'full', }) => {
     const z = (0, get_zod_if_possible_1.useZodIfPossible)();
     if (!z) {
         throw new Error('expected zod');
     }
     const typeName = (0, zod_schema_type_1.getZodSchemaType)(schema);
     if (typeName !== 'object' && typeName !== 'discriminatedUnion') {
-        return jsx_runtime_1.jsx(SchemaErrorMessages_1.TopLevelZodValue, { typeReceived: typeName });
+        return jsx_runtime_1.jsx(SchemaErrorMessages_1.TopLevelZodValue, { typeReceived: typeName, mode: errorMode });
     }
+    const containerStyle = getContainerStyle({
+        contentInset,
+        scrollableContainer,
+    });
     if (typeName === 'discriminatedUnion') {
-        return (jsx_runtime_1.jsx("div", { ref: scroll_to_default_props_path_1.defaultPropsEditorScrollableAreaRef, style: scrollable, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ZodDiscriminatedUnionEditor_1.ZodDiscriminatedUnionEditor, { schema: schema, setValue: setValue, value: value, mayPad: true, jsonPath: [], onRemove: null }) }));
+        return (jsx_runtime_1.jsx("div", { ref: scroll_to_default_props_path_1.defaultPropsEditorScrollableAreaRef, style: containerStyle, className: scrollableContainer ? is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME : undefined, children: jsx_runtime_1.jsx(ZodDiscriminatedUnionEditor_1.ZodDiscriminatedUnionEditor, { schema: schema, setValue: setValue, value: value, mayPad: true, jsonPath: [], onRemove: null }) }));
     }
-    return (jsx_runtime_1.jsx("div", { ref: scroll_to_default_props_path_1.defaultPropsEditorScrollableAreaRef, style: scrollable, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ZodObjectEditor_1.ZodObjectEditor, { discriminatedUnionReplacement: null, value: value, setValue: setValue, jsonPath: [], schema: schema, onRemove: null, mayPad: true }) }));
+    return (jsx_runtime_1.jsx("div", { ref: scroll_to_default_props_path_1.defaultPropsEditorScrollableAreaRef, style: containerStyle, className: scrollableContainer ? is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME : undefined, children: jsx_runtime_1.jsx(ZodObjectEditor_1.ZodObjectEditor, { discriminatedUnionReplacement: null, value: value, setValue: setValue, jsonPath: [], schema: schema, onRemove: null, mayPad: true }) }));
 };
 exports.SchemaEditor = SchemaEditor;

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

@@ -1,7 +1,14 @@
 import type { ZodSafeParseResult } from './zod-schema-type';
-export declare const ZodNotInstalled: () => import("react/jsx-runtime").JSX.Element;
-export declare const NoSchemaDefined: () => import("react/jsx-runtime").JSX.Element;
-export declare const NoDefaultProps: () => import("react/jsx-runtime").JSX.Element;
+export type SchemaErrorMode = 'full' | 'compact';
+export declare const ZodNotInstalled: React.FC<{
+    readonly mode?: SchemaErrorMode;
+}>;
+export declare const NoSchemaDefined: React.FC<{
+    readonly mode?: SchemaErrorMode;
+}>;
+export declare const NoDefaultProps: React.FC<{
+    readonly mode?: SchemaErrorMode;
+}>;
 export declare const InvalidDefaultProps: React.FC<{
     zodValidationResult: ZodSafeParseResult;
 }>;
@@ -9,5 +16,6 @@ export declare const InvalidSchema: React.FC<{
     zodValidationResult: ZodSafeParseResult;
 }>;
 export declare const TopLevelZodValue: React.FC<{
-    typeReceived: string;
+    readonly typeReceived: string;
+    readonly mode?: SchemaErrorMode;
 }>;

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

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TopLevelZodValue = exports.InvalidSchema = exports.InvalidDefaultProps = exports.NoDefaultProps = exports.NoSchemaDefined = exports.ZodNotInstalled = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-// Schema error messages for studio editor
 const colors_1 = require("../../../helpers/colors");
 const Button_1 = require("../../Button");
+const CompactExplanation_1 = require("../../CompactExplanation");
 const layout_1 = require("../../layout");
 const styles_1 = require("../../Menu/styles");
 const ZodErrorMessages_1 = require("./ZodErrorMessages");
@@ -12,10 +12,9 @@ const explainer = {
     display: 'flex',
     flex: 1,
     flexDirection: 'column',
-    padding: '0 12px',
-    justifyContent: 'center',
-    alignItems: 'center',
-    textAlign: 'center',
+    padding: 12,
+    alignItems: 'flex-start',
+    textAlign: 'left',
     background: colors_1.BACKGROUND,
 };
 const errorExplanation = {
@@ -36,7 +35,13 @@ const errorContainer = {
 const openDocs = () => {
     window.open('https://www.remotion.dev/docs/schemas');
 };
-const ZodNotInstalled = () => {
+const CompactSchemaError = ({ children }) => {
+    return (jsx_runtime_1.jsx(CompactExplanation_1.CompactExplanation, { learnMoreHref: "https://www.remotion.dev/docs/schemas", learnMoreAriaLabel: "Learn more about schemas", children: children }));
+};
+const ZodNotInstalled = ({ mode = 'full' }) => {
+    if (mode === 'compact') {
+        return jsx_runtime_1.jsx(CompactSchemaError, { children: "Install zod to edit props." });
+    }
     return (jsx_runtime_1.jsxs("div", { style: explainer, children: [
             jsx_runtime_1.jsxs("div", { style: errorExplanation, children: ["Install ",
                     jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: "zod" }),
@@ -44,7 +49,10 @@ const ZodNotInstalled = () => {
         ] }));
 };
 exports.ZodNotInstalled = ZodNotInstalled;
-const NoSchemaDefined = () => {
+const NoSchemaDefined = ({ mode = 'full' }) => {
+    if (mode === 'compact') {
+        return (jsx_runtime_1.jsx(CompactSchemaError, { children: "Add a schema prop to edit props." }));
+    }
     return (jsx_runtime_1.jsxs("div", { style: explainer, children: [
             jsx_runtime_1.jsxs("div", { style: errorExplanation, children: ["Make the props of this composition interactively editable by adding a", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: "schema" }),
                     " prop to the", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: '<Composition>' }),
@@ -52,7 +60,10 @@ const NoSchemaDefined = () => {
         ] }));
 };
 exports.NoSchemaDefined = NoSchemaDefined;
-const NoDefaultProps = () => {
+const NoDefaultProps = ({ mode = 'full' }) => {
+    if (mode === 'compact') {
+        return (jsx_runtime_1.jsx(CompactSchemaError, { children: "Add defaultProps to edit the schema." }));
+    }
     return (jsx_runtime_1.jsxs("div", { style: explainer, children: [
             jsx_runtime_1.jsxs("div", { style: errorExplanation, children: ["The schema can not be edited because the", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: "defaultProps" }),
                     " prop in the", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: '<Composition>' }),
@@ -76,7 +87,10 @@ const InvalidSchema = ({ zodValidationResult }) => {
         ] }));
 };
 exports.InvalidSchema = InvalidSchema;
-const TopLevelZodValue = ({ typeReceived }) => {
+const TopLevelZodValue = ({ typeReceived, mode = 'full' }) => {
+    if (mode === 'compact') {
+        return (jsx_runtime_1.jsx(CompactSchemaError, { children: "Use z.object() or z.discriminatedUnion() for the top-level schema." }));
+    }
     return (jsx_runtime_1.jsxs("div", { style: explainer, children: [
             jsx_runtime_1.jsxs("div", { style: errorExplanation, children: ["The top-level type of the schema must be", ' ', jsx_runtime_1.jsx("code", { style: codeSnippet, children: "z.object()" }),
                     " or", ' ', jsx_runtime_1.jsx("code", { style: codeSnippet, children: "z.discriminatedUnion()" }),

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

@@ -9,7 +9,7 @@ const InlineRemoveButton_1 = require("../InlineRemoveButton");
 const get_schema_label_1 = require("./get-schema-label");
 const scroll_to_default_props_path_1 = require("./scroll-to-default-props-path");
 const compactStyles = {
-    fontSize: 15,
+    fontSize: 12,
     color: colors_1.LIGHT_TEXT,
     fontFamily: 'sans-serif',
     display: 'flex',
@@ -22,13 +22,13 @@ const SchemaLabel = ({ jsonPath, onRemove, valid, suffix, handleClick }) => {
     const labelStyle = (0, react_1.useMemo)(() => {
         return {
             fontFamily: 'monospace',
-            fontSize: 14,
+            fontSize: 12,
             color: valid
                 ? clickableButtonHovered
                     ? 'white'
                     : colors_1.LIGHT_TEXT
                 : colors_1.FAIL_COLOR,
-            lineHeight: '24px',
+            lineHeight: '20px',
         };
     }, [clickableButtonHovered, valid]);
     const onClickablePointerEnter = (0, react_1.useCallback)(() => {

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

@@ -57,7 +57,11 @@ const SchemaArrayItemSeparationLine = ({ onChange, index, schema, isLast, showAd
     }, [isLast, outerHovered]);
     const inner = (0, react_1.useMemo)(() => {
         return {
+            alignItems: 'center',
             background: colors_1.BACKGROUND,
+            display: 'flex',
+            height: exports.VERTICAL_GUIDE_HEIGHT,
+            justifyContent: 'center',
             paddingLeft: 10,
             paddingRight: 10,
         };
@@ -85,7 +89,10 @@ const SchemaArrayItemSeparationLine = ({ onChange, index, schema, isLast, showAd
                     display: 'flex',
                     flexDirection: 'column',
                     alignItems: 'flex-end',
-                }, children: [showAddButton && (jsx_runtime_1.jsx("div", { style: dynamicAddButtonStyle, onPointerEnter: onOuterMouseEnter, onPointerLeave: onOuterMouseLeave, children: jsx_runtime_1.jsx("div", { onClick: onAdd, style: inner, onPointerEnter: onInnerMouseEnter, onPointerLeave: onInnerMouseLeave, children: jsx_runtime_1.jsx(plus_1.Plus, { color: innerHovered ? 'white' : colors_1.LIGHT_TEXT, style: { height: exports.VERTICAL_GUIDE_HEIGHT / 2 } }) }) })), jsx_runtime_1.jsx("div", { style: arraySeparationLine })
+                }, children: [showAddButton && (jsx_runtime_1.jsx("div", { style: dynamicAddButtonStyle, onPointerEnter: onOuterMouseEnter, onPointerLeave: onOuterMouseLeave, children: jsx_runtime_1.jsx("div", { onClick: onAdd, style: inner, onPointerEnter: onInnerMouseEnter, onPointerLeave: onInnerMouseLeave, children: jsx_runtime_1.jsx(plus_1.Plus, { color: innerHovered ? 'white' : colors_1.LIGHT_TEXT, style: {
+                                    display: 'block',
+                                    height: exports.VERTICAL_GUIDE_HEIGHT / 2,
+                                } }) }) })), jsx_runtime_1.jsx("div", { style: arraySeparationLine })
                 ] }), isLast ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: {
                             ...layout_2.fieldSetText,

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

@@ -32,7 +32,7 @@ const ZodColorEditor = ({ jsonPath, value, setValue, schema, onRemove, mayPad })
     return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: mayPad, children: [
             jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: jsonPath, onRemove: onRemove, valid: localValue.success, suffix: null }), jsx_runtime_1.jsxs("div", { style: fullWidth, children: [
                     jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                            jsx_runtime_1.jsx(ColorPicker_1.ColorPicker, { value: value, status: status, onChange: onPickerChange, onChangeComplete: onPickerComplete, width: 45, height: 39, name: jsonPath.join('.') }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1, block: true }), jsx_runtime_1.jsx(RemInput_1.RemotionInput, { value: value, status: status, placeholder: jsonPath.join('.'), onChange: onTextChange, onBlur: onTextBlur, rightAlign: false })
+                            jsx_runtime_1.jsx(ColorPicker_1.ColorPicker, { value: value, status: status, onChange: onPickerChange, onChangeComplete: onPickerComplete, width: 45, height: 39, name: jsonPath.join('.') }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1, block: true }), jsx_runtime_1.jsx(RemInput_1.RemotionInput, { value: value, status: status, placeholder: jsonPath.join('.'), onChange: onTextChange, onBlur: onTextBlur, rightAlign: false, small: true })
                         ] }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, zodValidation: localValue })
                 ] })
         ] }));

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

@@ -55,7 +55,7 @@ const ZodDateEditor = ({ jsonPath, value, setValue, schema, onRemove, mayPad })
     const zodValidation = (0, react_1.useMemo)(() => (0, zod_schema_type_1.zodSafeParse)(schema, value), [schema, value]);
     return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: mayPad, children: [
             jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: jsonPath, onRemove: onRemove, valid: zodValidation.success, suffix: null }), jsx_runtime_1.jsxs("div", { style: fullWidth, children: [
-                    jsx_runtime_1.jsx(RemInput_1.RemotionInput, { value: formatDate(value), type: "datetime-local", status: zodValidation.success ? 'ok' : 'error', placeholder: jsonPath.join('.'), onChange: onChange, onBlur: onBlur, style: inputStyle, rightAlign: false }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx("div", { style: explainer, children: "Date is in local format" }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, zodValidation: zodValidation })
+                    jsx_runtime_1.jsx(RemInput_1.RemotionInput, { value: formatDate(value), type: "datetime-local", status: zodValidation.success ? 'ok' : 'error', placeholder: jsonPath.join('.'), onChange: onChange, onBlur: onBlur, style: inputStyle, rightAlign: false, small: true }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx("div", { style: explainer, children: "Date is in local format" }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, zodValidation: zodValidation })
                 ] })
         ] }));
 };

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

@@ -47,7 +47,7 @@ const ZodDiscriminatedUnionEditor = ({ schema, setValue, value, mayPad, jsonPath
         return {
             discriminator,
             markup: (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: mayPad, children: [
-                    jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: [...jsonPath, discriminator], onRemove: onRemove, suffix: null, valid: zodValidation.success }), jsx_runtime_1.jsx(ComboBox_1.Combobox, { title: "Select type", values: comboBoxValues, selectedId: value[discriminator] })
+                    jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: [...jsonPath, discriminator], onRemove: onRemove, suffix: null, valid: zodValidation.success }), jsx_runtime_1.jsx(ComboBox_1.Combobox, { title: "Select type", values: comboBoxValues, selectedId: value[discriminator], small: true })
                 ] }, 'replacement')),
         };
     }, [

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

@@ -39,7 +39,7 @@ const ZodEnumEditor = ({ schema, jsonPath, setValue, value, onRemove }) => {
     }, [enumValues, onChange, value]);
     const zodValidation = (0, react_1.useMemo)(() => (0, zod_schema_type_1.zodSafeParse)(schema, value), [schema, value]);
     return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: true, children: [
-            jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: jsonPath, onRemove: onRemove, valid: zodValidation.success, suffix: null }), jsx_runtime_1.jsx("div", { style: isRoot ? undefined : container, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: comboBoxValues, selectedId: value, title: value }) }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, zodValidation: zodValidation })
+            jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: jsonPath, onRemove: onRemove, valid: zodValidation.success, suffix: null }), jsx_runtime_1.jsx("div", { style: isRoot ? undefined : container, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: comboBoxValues, selectedId: value, title: value, small: true }) }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, zodValidation: zodValidation })
         ] }));
 };
 exports.ZodEnumEditor = ZodEnumEditor;

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

@@ -3,4 +3,5 @@ import type { ZodSafeParseResult } from './zod-schema-type';
 export declare const ZodErrorMessages: React.FC<{
     readonly zodValidationResult: ZodSafeParseResult;
     readonly viewTab: 'schema' | 'json';
+    readonly size?: 'default' | 'compact';
 }>;

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

@@ -10,6 +10,10 @@ const schemaLabel = {
     fontSize: 14,
     color: colors_1.LIGHT_TEXT,
 };
+const compactSchemaLabel = {
+    ...schemaLabel,
+    fontSize: 12,
+};
 const jsonLabel = {
     color: 'white',
     fontSize: 13,
@@ -17,29 +21,42 @@ const jsonLabel = {
     display: 'flex',
     alignItems: 'center',
 };
+const compactJsonLabel = {
+    ...jsonLabel,
+    fontSize: 12,
+};
 const triangleStyle = {
     width: 12,
     height: 12,
     flexShrink: 0,
     fill: colors_1.FAIL_COLOR,
 };
-const ZodErrorMessages = ({ zodValidationResult, viewTab }) => {
+const compactTriangleStyle = {
+    ...triangleStyle,
+    width: 10,
+    height: 10,
+};
+const ZodErrorMessages = ({ zodValidationResult, viewTab, size = 'default' }) => {
     if (zodValidationResult.success) {
         throw new Error('Expected error');
     }
     const style = (0, react_1.useMemo)(() => {
-        return viewTab === 'json' ? jsonLabel : schemaLabel;
-    }, [viewTab]);
+        if (viewTab === 'json') {
+            return size === 'compact' ? compactJsonLabel : jsonLabel;
+        }
+        return size === 'compact' ? compactSchemaLabel : schemaLabel;
+    }, [size, viewTab]);
     const code = (0, react_1.useMemo)(() => {
         return {
-            ...schemaLabel,
+            ...(size === 'compact' ? compactSchemaLabel : schemaLabel),
             fontFamily: 'monospace',
         };
-    }, []);
+    }, [size]);
+    const finalTriangleStyle = size === 'compact' ? compactTriangleStyle : triangleStyle;
     if (viewTab === 'json') {
         return (jsx_runtime_1.jsx("div", { children: zodValidationResult.error.issues.map((error) => {
                 return (jsx_runtime_1.jsxs("div", { style: style, children: [
-                        jsx_runtime_1.jsx(ValidationMessage_1.WarningTriangle, { style: triangleStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), error.path.length === 0 ? 'Root' : error.path.join('.'), ":", ' ', error.message] }, error.path.join('.')));
+                        jsx_runtime_1.jsx(ValidationMessage_1.WarningTriangle, { style: finalTriangleStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: size === 'compact' ? 0.75 : 1 }), error.path.length === 0 ? 'Root' : error.path.join('.'), ":", ' ', error.message] }, error.path.join('.')));
             }) }));
     }
     return (jsx_runtime_1.jsx("div", { children: zodValidationResult.error.issues.map((error) => {

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

@@ -14,14 +14,14 @@ const stackTrace = {
     padding: 10,
 };
 const stackTraceLabel = {
-    fontSize: 14,
+    fontSize: 12,
 };
 const ZodFieldValidation = ({ zodValidation, path }) => {
     if (zodValidation.success) {
         return null;
     }
     return (jsx_runtime_1.jsxs("div", { style: legend, children: [
-            jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: zodValidation.error.format()._errors[0], type: "error" }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InfoBubble_1.InfoBubble, { title: "Zod validation failure", children: jsx_runtime_1.jsxs("div", { style: stackTrace, children: [
+            jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: zodValidation.error.format()._errors[0], type: "error", size: "compact" }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InfoBubble_1.InfoBubble, { title: "Zod validation failure", children: jsx_runtime_1.jsxs("div", { style: stackTrace, children: [
                         jsx_runtime_1.jsx("div", { style: stackTraceLabel, children: "Zod Validation has failed:" }), zodValidation.error.issues.map((error, index) => (
                         // eslint-disable-next-line react/no-array-index-key
                         jsx_runtime_1.jsxs("div", { style: stackTraceLabel, children: ["Type: ", error.code, " ",

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

@@ -16,7 +16,8 @@ const emptyLabel = {
 };
 const wideEmptyLabel = {
     ...emptyLabel,
-    lineHeight: '37px',
+    fontSize: 12,
+    lineHeight: '28px',
 };
 const ZonNonEditableValue = ({ jsonPath, label, mayPad }) => {
     return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: mayPad, children: [

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

@@ -26,7 +26,7 @@ const ZodNumberEditor = ({ jsonPath, value, schema, setValue, onRemove, mayPad }
     const zodValidation = (0, react_1.useMemo)(() => (0, zod_schema_type_1.zodSafeParse)(schema, value), [schema, value]);
     return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: mayPad, children: [
             jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: jsonPath, onRemove: onRemove, valid: zodValidation.success, suffix: null }), jsx_runtime_1.jsxs("div", { style: fullWidth, children: [
-                    jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: 'number', value: value, style: fullWidth, status: zodValidation.success ? 'ok' : 'error', placeholder: jsonPath.join('.'), onTextChange: onTextChange, onValueChange: onNumberChange, onValueChangeEnd: onNumberChangeEnd, min: (0, zod_number_constraints_1.getZodNumberMinimum)(schema), max: (0, zod_number_constraints_1.getZodNumberMaximum)(schema), step: (0, zod_number_constraints_1.getZodNumberStep)(schema), rightAlign: false }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, zodValidation: zodValidation })
+                    jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: 'number', value: value, style: fullWidth, status: zodValidation.success ? 'ok' : 'error', placeholder: jsonPath.join('.'), onTextChange: onTextChange, onValueChange: onNumberChange, onValueChangeEnd: onNumberChangeEnd, min: (0, zod_number_constraints_1.getZodNumberMinimum)(schema), max: (0, zod_number_constraints_1.getZodNumberMaximum)(schema), step: (0, zod_number_constraints_1.getZodNumberStep)(schema), rightAlign: false, small: true }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, zodValidation: zodValidation })
                 ] })
         ] }));
 };

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

@@ -40,7 +40,6 @@ const react_2 = __importStar(require("react"));
 const layout_1 = require("../layout");
 const Fieldset_1 = require("./Fieldset");
 const SchemaLabel_1 = require("./SchemaLabel");
-const SchemaSeparationLine_1 = require("./SchemaSeparationLine");
 const SchemaVerticalGuide_1 = require("./SchemaVerticalGuide");
 const zod_schema_type_1 = require("./zod-schema-type");
 const zod_schema_type_2 = require("./zod-schema-type");
@@ -61,20 +60,19 @@ const ZodObjectEditor = ({ schema, jsonPath, setValue, value, onRemove, mayPad,
         return expanded ? ' {' : ' {...}';
     }, [expanded]);
     const zodValidation = (0, react_2.useMemo)(() => (0, zod_schema_type_1.zodSafeParse)(schema, value), [schema, value]);
-    return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: !isRoot && mayPad, children: [isRoot ? null : (jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { jsonPath: jsonPath, onRemove: onRemove, suffix: suffix, valid: zodValidation.success, handleClick: () => setExpanded(!expanded) })), expanded ? (jsx_runtime_1.jsx(SchemaVerticalGuide_1.SchemaVerticalGuide, { isRoot: isRoot, children: keys.map((key, i) => {
+    return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: !isRoot && mayPad, children: [isRoot ? null : (jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { jsonPath: jsonPath, onRemove: onRemove, suffix: suffix, valid: zodValidation.success, handleClick: () => setExpanded(!expanded) })), expanded ? (jsx_runtime_1.jsx(SchemaVerticalGuide_1.SchemaVerticalGuide, { isRoot: isRoot, children: keys.map((key) => {
                     if (discriminatedUnionReplacement &&
                         key === discriminatedUnionReplacement.discriminator) {
                         return discriminatedUnionReplacement.markup;
                     }
-                    return (jsx_runtime_1.jsxs(react_2.default.Fragment, { children: [
-                            jsx_runtime_1.jsx(ZodSwitch_1.ZodSwitch, { mayPad: true, jsonPath: [...jsonPath, key], schema: shape[key], value: value[key], setValue: (val, { shouldSave }) => {
-                                    onChange((oldVal) => {
-                                        return {
-                                            ...oldVal,
-                                            [key]: typeof val === 'function' ? val(oldVal[key]) : val,
-                                        };
-                                    }, { shouldSave });
-                                }, onRemove: null }), i === keys.length - 1 ? null : jsx_runtime_1.jsx(SchemaSeparationLine_1.SchemaSeparationLine, {})] }, key));
+                    return (jsx_runtime_1.jsx(react_2.default.Fragment, { children: jsx_runtime_1.jsx(ZodSwitch_1.ZodSwitch, { mayPad: true, jsonPath: [...jsonPath, key], schema: shape[key], value: value[key], setValue: (val, { shouldSave }) => {
+                                onChange((oldVal) => {
+                                    return {
+                                        ...oldVal,
+                                        [key]: typeof val === 'function' ? val(oldVal[key]) : val,
+                                    };
+                                }, { shouldSave });
+                            }, onRemove: null }) }, key));
                 }) })) : null, isRoot || !expanded ? null : jsx_runtime_1.jsx("div", { style: layout_1.fieldsetLabel, children: '}' })] }));
 };
 exports.ZodObjectEditor = ZodObjectEditor;

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

@@ -15,7 +15,7 @@ const zod_schema_type_1 = require("./zod-schema-type");
 const ZodSwitch_1 = require("./ZodSwitch");
 const labelStyle = {
     fontFamily: 'sans-serif',
-    fontSize: 14,
+    fontSize: 12,
     color: colors_1.LIGHT_TEXT,
 };
 const checkBoxWrapper = {

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

@@ -38,7 +38,7 @@ const ZodStaticFileEditor = ({ schema, jsonPath, setValue, value, onRemove, mayP
         });
     }, [onChange, staticFiles, value]);
     return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: mayPad, children: [
-            jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: jsonPath, onRemove: onRemove, valid: zodValidation.success, suffix: null }), jsx_runtime_1.jsx("div", { style: isRoot ? undefined : container, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: comboBoxValues, selectedId: value, title: value }) }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, zodValidation: zodValidation })
+            jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: jsonPath, onRemove: onRemove, valid: zodValidation.success, suffix: null }), jsx_runtime_1.jsx("div", { style: isRoot ? undefined : container, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: comboBoxValues, selectedId: value, title: value, small: true }) }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, zodValidation: zodValidation })
         ] }));
 };
 exports.ZodStaticFileEditor = ZodStaticFileEditor;

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

@@ -27,7 +27,7 @@ const ZodStringEditor = ({ jsonPath, value, setValue, schema, onRemove, mayPad }
     }, [setValue, value]);
     return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: mayPad, children: [
             jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: jsonPath, onRemove: onRemove, valid: zodValidation.success, suffix: null }), jsx_runtime_1.jsxs("div", { style: fullWidth, children: [
-                    jsx_runtime_1.jsx(RemInput_1.RemotionInput, { value: value, status: zodValidation.success ? 'ok' : 'error', placeholder: jsonPath.join('.'), onChange: onChange, onBlur: onBlur, rightAlign: false, name: jsonPath.join('.') }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, zodValidation: zodValidation })
+                    jsx_runtime_1.jsx(RemInput_1.RemotionInput, { value: value, status: zodValidation.success ? 'ok' : 'error', placeholder: jsonPath.join('.'), onChange: onChange, onBlur: onBlur, rightAlign: false, name: jsonPath.join('.'), small: true }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, zodValidation: zodValidation })
                 ] })
         ] }));
 };

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

@@ -67,7 +67,7 @@ const ZodTextareaEditor = ({ jsonPath, value, setValue, schema, onRemove, mayPad
     const zodValidation = react_1.default.useMemo(() => (0, zod_schema_type_1.zodSafeParse)(schema, value), [schema, value]);
     return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: mayPad, children: [
             jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: jsonPath, onRemove: onRemove, valid: zodValidation.success, suffix: null }), jsx_runtime_1.jsxs("div", { style: fullWidth, children: [
-                    jsx_runtime_1.jsx(RemTextarea_1.RemTextarea, { onChange: onChange, onBlur: onBlur, value: value, status: zodValidation ? 'ok' : 'error', placeholder: jsonPath.join('.'), name: jsonPath.join('.'), style: textareaStyle }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, zodValidation: zodValidation })
+                    jsx_runtime_1.jsx(RemTextarea_1.RemTextarea, { onChange: onChange, onBlur: onBlur, value: value, status: zodValidation ? 'ok' : 'error', placeholder: jsonPath.join('.'), name: jsonPath.join('.'), style: textareaStyle, small: true }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, zodValidation: zodValidation })
                 ] })
         ] }));
 };

package/dist/components/RenderModal/WarningIndicatorButton.d.ts

@@ -3,4 +3,5 @@ export declare const WarningIndicatorButton: React.FC<{
     readonly setShowWarning: React.Dispatch<React.SetStateAction<boolean>>;
     readonly showWarning: boolean;
     readonly warningCount: number;
+    readonly size?: 'default' | 'compact';
 }>;

package/dist/components/RenderModal/WarningIndicatorButton.js

@@ -21,31 +21,44 @@ const style = {
     paddingTop: 4,
     paddingBottom: 4,
 };
+const compactStyle = {
+    ...style,
+    fontSize: 11,
+    paddingBottom: 2,
+    paddingLeft: 6,
+    paddingRight: 6,
+    paddingTop: 2,
+};
 const triangleStyle = {
     width: 12,
     height: 12,
     flexShrink: 0,
     fill: colors_1.WARNING_COLOR,
 };
+const compactTriangleStyle = {
+    ...triangleStyle,
+    height: 10,
+    width: 10,
+};
 const WarningTriangle = (props) => {
     return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 576 512", ...props, children: jsx_runtime_1.jsx("path", { d: "M248.747 204.705l6.588 112c.373 6.343 5.626 11.295 11.979 11.295h41.37a12 12 0 0 0 11.979-11.295l6.588-112c.405-6.893-5.075-12.705-11.979-12.705h-54.547c-6.903 0-12.383 5.812-11.978 12.705zM330 384c0 23.196-18.804 42-42 42s-42-18.804-42-42 18.804-42 42-42 42 18.804 42 42zm-.423-360.015c-18.433-31.951-64.687-32.009-83.154 0L6.477 440.013C-11.945 471.946 11.118 512 48.054 512H527.94c36.865 0 60.035-39.993 41.577-71.987L329.577 23.985zM53.191 455.002L282.803 57.008c2.309-4.002 8.085-4.002 10.394 0l229.612 397.993c2.308 4-.579 8.998-5.197 8.998H58.388c-4.617.001-7.504-4.997-5.197-8.997z" }) }));
 };
-const WarningIndicatorButton = ({ setShowWarning, showWarning, warningCount }) => {
+const WarningIndicatorButton = ({ setShowWarning, showWarning, warningCount, size = 'default' }) => {
     const onClick = (0, react_1.useCallback)(() => {
         setShowWarning((s) => !s);
     }, [setShowWarning]);
     const buttonStyle = (0, react_1.useMemo)(() => {
         return {
-            ...style,
+            ...(size === 'compact' ? compactStyle : style),
             backgroundColor: showWarning ? colors_1.INPUT_BACKGROUND : 'transparent',
             borderColor: showWarning
                 ? colors_1.INPUT_BORDER_COLOR_HOVERED
                 : colors_1.INPUT_BORDER_COLOR_UNHOVERED,
             color: showWarning ? 'white' : colors_1.LIGHT_TEXT,
         };
-    }, [showWarning]);
+    }, [showWarning, size]);
     return (jsx_runtime_1.jsxs("button", { type: "button", style: buttonStyle, onClick: onClick, children: [
-            jsx_runtime_1.jsx(WarningTriangle, { style: triangleStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), warningCount, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx(caret_1.AngleDown, { down: showWarning })
+            jsx_runtime_1.jsx(WarningTriangle, { style: size === 'compact' ? compactTriangleStyle : triangleStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), warningCount, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx(caret_1.AngleDown, { down: showWarning })
         ] }));
 };
 exports.WarningIndicatorButton = WarningIndicatorButton;

package/dist/components/RenderModal/get-render-modal-warnings.d.ts

@@ -12,7 +12,7 @@ export type TypeCanSaveState = {
     reason: string;
     determined: boolean;
 };
-export declare const getRenderModalWarnings: ({ cliProps, canSaveDefaultProps, isCustomDateUsed, customFileUsed, jsMapUsed, jsSetUsed, inJSONEditor, propsEditType, }: {
+export declare const getRenderModalWarnings: ({ cliProps, canSaveDefaultProps, isCustomDateUsed, customFileUsed, jsMapUsed, jsSetUsed, inJSONEditor, propsEditType, showCannotSaveDefaultPropsWarning, }: {
     cliProps: unknown;
     canSaveDefaultProps: TypeCanSaveState | null;
     isCustomDateUsed: boolean;
@@ -21,4 +21,5 @@ export declare const getRenderModalWarnings: ({ cliProps, canSaveDefaultProps, i
     jsSetUsed: boolean;
     inJSONEditor: boolean;
     propsEditType: PropsEditType;
+    showCannotSaveDefaultPropsWarning: boolean;
 }) => RenderModalWarning[];

package/dist/components/RenderModal/get-render-modal-warnings.js

@@ -19,7 +19,10 @@ const getInputPropsWarning = ({ cliProps, propsEditType, }) => {
     }
     return null;
 };
-const getCannotSaveDefaultProps = (canSaveDefaultProps) => {
+const getCannotSaveDefaultProps = (canSaveDefaultProps, showCannotSaveDefaultPropsWarning) => {
+    if (!showCannotSaveDefaultPropsWarning) {
+        return null;
+    }
     if (canSaveDefaultProps === null) {
         return null;
     }
@@ -59,10 +62,10 @@ const setUsed = (used, inJSONEditor) => {
     }
     return null;
 };
-const getRenderModalWarnings = ({ cliProps, canSaveDefaultProps, isCustomDateUsed, customFileUsed, jsMapUsed, jsSetUsed, inJSONEditor, propsEditType, }) => {
+const getRenderModalWarnings = ({ cliProps, canSaveDefaultProps, isCustomDateUsed, customFileUsed, jsMapUsed, jsSetUsed, inJSONEditor, propsEditType, showCannotSaveDefaultPropsWarning, }) => {
     return [
         warningOrNull('input-props-override', getInputPropsWarning({ cliProps, propsEditType })),
-        getCannotSaveDefaultProps(canSaveDefaultProps),
+        getCannotSaveDefaultProps(canSaveDefaultProps, showCannotSaveDefaultPropsWarning),
         warningOrNull('custom-date-used', customDateUsed(isCustomDateUsed, inJSONEditor)),
         warningOrNull('static-file-used', staticFileUsed(customFileUsed, inJSONEditor)),
         warningOrNull('map-used', mapUsed(jsMapUsed, inJSONEditor)),

package/dist/components/RendersTab.js

@@ -10,7 +10,7 @@ const Tabs_1 = require("./Tabs");
 const row = {
     display: 'flex',
     flexDirection: 'row',
-    fontSize: 14,
+    fontSize: 'inherit',
     color: 'inherit',
     alignItems: 'center',
     flex: 1,

package/dist/components/SegmentedControl.d.ts

@@ -5,7 +5,10 @@ export type SegmentedControlItem = {
     key: string;
     selected: boolean;
 };
+type SegmentedControlSize = 'default' | 'compact';
 export declare const SegmentedControl: React.FC<{
     readonly items: SegmentedControlItem[];
     readonly needsWrapping: boolean;
+    readonly size?: SegmentedControlSize;
 }>;
+export {};