@remotion/studio 4.0.477 → 4.0.479

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

@@ -1,8 +1,11 @@
 import React from 'react';
-import type { _InternalTypes } from 'remotion';
-import type { TypeCanSaveState } from './get-render-modal-warnings';
+import type { _InternalTypes, SerializedJSONWithCustomFields } from 'remotion';
+import type { RenderModalWarning, TypeCanSaveState } from './get-render-modal-warnings';
+import { type SchemaErrorMode } from './SchemaEditor/SchemaErrorMessages';
 import type { ZodSafeParseResult } from './SchemaEditor/zod-schema-type';
 import type { UpdaterFunction } from './SchemaEditor/ZodSwitch';
+export type { RenderModalWarning };
+export type DataEditorMode = 'json' | 'schema';
 export type State = {
     str: string;
     value: Record<string, unknown>;
@@ -14,10 +17,34 @@ export type State = {
     error: string;
 };
 export type PropsEditType = 'input-props' | 'default-props';
+export type DataEditorLayout = 'default' | 'inspector';
+export declare const useDataEditorWarnings: ({ canSaveDefaultProps, defaultProps, mode, propsEditType, showCannotSaveDefaultPropsWarning, }: {
+    readonly canSaveDefaultProps: TypeCanSaveState | null;
+    readonly defaultProps: Record<string, unknown>;
+    readonly mode: DataEditorMode;
+    readonly propsEditType: PropsEditType;
+    readonly showCannotSaveDefaultPropsWarning: boolean;
+}) => {
+    serializedJSON: SerializedJSONWithCustomFields | null;
+    warnings: RenderModalWarning[];
+};
+export declare const useDataEditorWarningVisibility: () => {
+    setShowWarning: React.Dispatch<React.SetStateAction<boolean>>;
+    showWarning: boolean;
+};
 export declare const DataEditor: React.FC<{
     readonly unresolvedComposition: _InternalTypes['AnyComposition'];
     readonly defaultProps: Record<string, unknown>;
     readonly setDefaultProps: UpdaterFunction<Record<string, unknown>>;
     readonly propsEditType: PropsEditType;
     readonly canSaveDefaultProps: TypeCanSaveState | null;
+    readonly schemaErrorMode?: SchemaErrorMode;
+    readonly layout?: DataEditorLayout;
+    readonly mode?: DataEditorMode;
+    readonly onModeChange?: (mode: DataEditorMode) => void;
+    readonly hideModeControls?: boolean;
+    readonly warnings?: RenderModalWarning[];
+    readonly showWarning?: boolean;
+    readonly setShowWarning?: React.Dispatch<React.SetStateAction<boolean>>;
+    readonly hideWarningButton?: boolean;
 }>;

package/dist/components/RenderModal/DataEditor.js

@@ -33,14 +33,16 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataEditor = void 0;
+exports.DataEditor = exports.useDataEditorWarningVisibility = exports.useDataEditorWarnings = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
 const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
+const CompactExplanation_1 = require("../CompactExplanation");
 const get_zod_if_possible_1 = require("../get-zod-if-possible");
+const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
 const layout_1 = require("../layout");
 const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
 const SegmentedControl_1 = require("../SegmentedControl");
@@ -60,10 +62,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',
 };
 const outer = {
     display: 'flex',
@@ -72,12 +73,21 @@ const outer = {
     overflow: 'hidden',
     backgroundColor: colors_1.BACKGROUND,
 };
+const inspectorOuter = {
+    ...outer,
+    flex: 'none',
+    overflow: 'visible',
+};
 const controlContainer = {
     flexDirection: 'column',
     display: 'flex',
     padding: 12,
     borderBottom: `1px solid ${colors_1.BORDER_COLOR}`,
 };
+const inspectorControlContainer = {
+    ...controlContainer,
+    borderBottom: 'none',
+};
 const tabWrapper = {
     display: 'flex',
     marginBottom: '4px',
@@ -91,6 +101,10 @@ const resolveLinkStyle = {
     textDecoration: 'underline',
     whiteSpace: 'nowrap',
 };
+const compactResolveLinkStyle = {
+    ...resolveLinkStyle,
+    fontSize: 12,
+};
 const persistanceKey = 'remotion.show-render-modalwarning';
 const getPersistedShowWarningState = () => {
     const val = localStorage.getItem(persistanceKey);
@@ -102,28 +116,85 @@ const getPersistedShowWarningState = () => {
 const setPersistedShowWarningState = (val) => {
     localStorage.setItem(persistanceKey, String(Boolean(val)));
 };
-const DataEditor = ({ unresolvedComposition, defaultProps, setDefaultProps, propsEditType, canSaveDefaultProps, }) => {
-    const [mode, setMode] = (0, react_1.useState)('schema');
-    const [showWarning, setShowWarningWithoutPersistance] = (0, react_1.useState)(() => getPersistedShowWarningState());
-    const jsonEditorSetValue = (0, react_1.useCallback)((newProps) => {
-        setDefaultProps(typeof newProps === 'function' ? newProps : () => newProps, { shouldSave: false });
-    }, [setDefaultProps]);
-    const onSave = (0, react_1.useCallback)(() => {
-        setDefaultProps((p) => p, { shouldSave: true });
-    }, [setDefaultProps]);
+const useDataEditorWarnings = ({ canSaveDefaultProps, defaultProps, mode, propsEditType, showCannotSaveDefaultPropsWarning, }) => {
     const inJSONEditor = mode === 'json';
     const serializedJSON = (0, react_1.useMemo)(() => {
         if (!inJSONEditor) {
             return null;
         }
-        const value = defaultProps;
         return no_react_1.NoReactInternals.serializeJSONWithSpecialTypes({
-            data: value,
+            data: defaultProps,
             indent: 2,
             staticBase: window.remotion_staticBase,
         });
     }, [inJSONEditor, defaultProps]);
     const cliProps = (0, remotion_1.getInputProps)();
+    const warnings = (0, react_1.useMemo)(() => {
+        return (0, get_render_modal_warnings_1.getRenderModalWarnings)({
+            canSaveDefaultProps,
+            cliProps,
+            isCustomDateUsed: serializedJSON ? serializedJSON.customDateUsed : false,
+            customFileUsed: serializedJSON ? serializedJSON.customFileUsed : false,
+            inJSONEditor,
+            propsEditType,
+            jsMapUsed: serializedJSON ? serializedJSON.mapUsed : false,
+            jsSetUsed: serializedJSON ? serializedJSON.setUsed : false,
+            showCannotSaveDefaultPropsWarning,
+        });
+    }, [
+        cliProps,
+        canSaveDefaultProps,
+        inJSONEditor,
+        propsEditType,
+        serializedJSON,
+        showCannotSaveDefaultPropsWarning,
+    ]);
+    return { serializedJSON, warnings };
+};
+exports.useDataEditorWarnings = useDataEditorWarnings;
+const useDataEditorWarningVisibility = () => {
+    const [showWarning, setShowWarningWithoutPersistance] = (0, react_1.useState)(() => getPersistedShowWarningState());
+    const setShowWarning = (0, react_1.useCallback)((val) => {
+        setShowWarningWithoutPersistance((prevVal) => {
+            if (typeof val === 'boolean') {
+                setPersistedShowWarningState(val);
+                return val;
+            }
+            const nextVal = val(prevVal);
+            setPersistedShowWarningState(nextVal);
+            return nextVal;
+        });
+    }, []);
+    return { setShowWarning, showWarning };
+};
+exports.useDataEditorWarningVisibility = useDataEditorWarningVisibility;
+const DataEditor = ({ unresolvedComposition, defaultProps, setDefaultProps, propsEditType, canSaveDefaultProps, schemaErrorMode = 'full', layout = 'default', mode: controlledMode, onModeChange, hideModeControls = false, warnings: controlledWarnings, showWarning: controlledShowWarning, setShowWarning: controlledSetShowWarning, hideWarningButton = false, }) => {
+    const [internalMode, setInternalMode] = (0, react_1.useState)('schema');
+    const mode = controlledMode !== null && controlledMode !== void 0 ? controlledMode : internalMode;
+    const setMode = (0, react_1.useCallback)((nextMode) => {
+        if (onModeChange) {
+            onModeChange(nextMode);
+            return;
+        }
+        setInternalMode(nextMode);
+    }, [onModeChange]);
+    const { setShowWarning: internalSetShowWarning, showWarning: internalShowWarning, } = (0, exports.useDataEditorWarningVisibility)();
+    const showWarning = controlledShowWarning !== null && controlledShowWarning !== void 0 ? controlledShowWarning : internalShowWarning;
+    const setShowWarning = controlledSetShowWarning !== null && controlledSetShowWarning !== void 0 ? controlledSetShowWarning : internalSetShowWarning;
+    const { serializedJSON, warnings: computedWarnings } = (0, exports.useDataEditorWarnings)({
+        canSaveDefaultProps,
+        defaultProps,
+        mode,
+        propsEditType,
+        showCannotSaveDefaultPropsWarning: true,
+    });
+    const warnings = controlledWarnings !== null && controlledWarnings !== void 0 ? controlledWarnings : computedWarnings;
+    const jsonEditorSetValue = (0, react_1.useCallback)((newProps) => {
+        setDefaultProps(typeof newProps === 'function' ? newProps : () => newProps, { shouldSave: false });
+    }, [setDefaultProps]);
+    const onSave = (0, react_1.useCallback)(() => {
+        setDefaultProps((p) => p, { shouldSave: true });
+    }, [setDefaultProps]);
     const z = (0, get_zod_if_possible_1.useZodIfPossible)();
     const schema = (0, react_1.useMemo)(() => {
         if (!z) {
@@ -147,16 +218,6 @@ const DataEditor = ({ unresolvedComposition, defaultProps, setDefaultProps, prop
         }
         return (0, zod_schema_type_1.zodSafeParse)(schema, defaultProps);
     }, [defaultProps, schema]);
-    const setShowWarning = (0, react_1.useCallback)((val) => {
-        setShowWarningWithoutPersistance((prevVal) => {
-            if (typeof val === 'boolean') {
-                setPersistedShowWarningState(val);
-                return val;
-            }
-            setPersistedShowWarningState(val(prevVal));
-            return val(prevVal);
-        });
-    }, []);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const modeItems = (0, react_1.useMemo)(() => {
         return [
@@ -177,36 +238,22 @@ const DataEditor = ({ unresolvedComposition, defaultProps, setDefaultProps, prop
                 selected: mode === 'json',
             },
         ];
-    }, [mode]);
+    }, [mode, setMode]);
     const connectionStatus = previewServerState.type;
-    const warnings = (0, react_1.useMemo)(() => {
-        return (0, get_render_modal_warnings_1.getRenderModalWarnings)({
-            canSaveDefaultProps,
-            cliProps,
-            isCustomDateUsed: serializedJSON ? serializedJSON.customDateUsed : false,
-            customFileUsed: serializedJSON ? serializedJSON.customFileUsed : false,
-            inJSONEditor,
-            propsEditType,
-            jsMapUsed: serializedJSON ? serializedJSON.mapUsed : false,
-            jsSetUsed: serializedJSON ? serializedJSON.setUsed : false,
-        });
-    }, [
-        cliProps,
-        canSaveDefaultProps,
-        inJSONEditor,
-        propsEditType,
-        serializedJSON,
-    ]);
     if (connectionStatus === 'disconnected') {
+        const message = 'The studio server has disconnected. Reconnect to edit the schema.';
+        if (schemaErrorMode === 'compact') {
+            return jsx_runtime_1.jsx(CompactExplanation_1.CompactExplanation, { children: message });
+        }
         return (jsx_runtime_1.jsxs("div", { style: explainer, children: [
-                jsx_runtime_1.jsx(layout_1.Spacing, { y: 5 }), jsx_runtime_1.jsx("div", { style: errorExplanation, children: "The studio server has disconnected. Reconnect to edit the schema." }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 2, block: true })
+                jsx_runtime_1.jsx(layout_1.Spacing, { y: 5 }), jsx_runtime_1.jsx("div", { style: errorExplanation, children: message }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 2, block: true })
             ] }));
     }
     if (schema === 'no-zod') {
-        return jsx_runtime_1.jsx(SchemaErrorMessages_1.ZodNotInstalled, {});
+        return jsx_runtime_1.jsx(SchemaErrorMessages_1.ZodNotInstalled, { mode: schemaErrorMode });
     }
     if (schema === 'no-schema') {
-        return jsx_runtime_1.jsx(SchemaErrorMessages_1.NoSchemaDefined, {});
+        return jsx_runtime_1.jsx(SchemaErrorMessages_1.NoSchemaDefined, { mode: schemaErrorMode });
     }
     if (!z) {
         throw new Error('expected zod');
@@ -219,17 +266,21 @@ const DataEditor = ({ unresolvedComposition, defaultProps, setDefaultProps, prop
     }
     const typeName = (0, zod_schema_type_1.getZodSchemaType)(schema);
     if (typeName === 'any') {
-        return jsx_runtime_1.jsx(SchemaErrorMessages_1.NoSchemaDefined, {});
+        return jsx_runtime_1.jsx(SchemaErrorMessages_1.NoSchemaDefined, { mode: schemaErrorMode });
     }
     if (!unresolvedComposition.defaultProps) {
-        return jsx_runtime_1.jsx(SchemaErrorMessages_1.NoDefaultProps, {});
+        return jsx_runtime_1.jsx(SchemaErrorMessages_1.NoDefaultProps, { mode: schemaErrorMode });
     }
-    return (jsx_runtime_1.jsxs("div", { style: outer, children: [
-            jsx_runtime_1.jsxs("div", { style: controlContainer, children: [
-                    jsx_runtime_1.jsxs("div", { style: tabWrapper, children: [
-                            jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: modeItems, needsWrapping: false }), jsx_runtime_1.jsx(layout_1.Flex, {}), warnings.length > 0 ? (jsx_runtime_1.jsx(WarningIndicatorButton_1.WarningIndicatorButton, { setShowWarning: setShowWarning, showWarning: showWarning, warningCount: warnings.length })) : null] }), showWarning && warnings.length > 0
+    const shouldRenderControlRow = !hideModeControls || (!hideWarningButton && warnings.length > 0);
+    const shouldRenderWarningMessages = showWarning && warnings.length > 0;
+    const compactLayout = layout === 'inspector';
+    return (jsx_runtime_1.jsxs("div", { style: layout === 'inspector' ? inspectorOuter : outer, children: [shouldRenderControlRow || shouldRenderWarningMessages ? (jsx_runtime_1.jsxs("div", { style: layout === 'inspector'
+                    ? inspectorControlContainer
+                    : controlContainer, children: [shouldRenderControlRow ? (jsx_runtime_1.jsxs("div", { style: tabWrapper, children: [hideModeControls ? null : (jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: modeItems, needsWrapping: false })), jsx_runtime_1.jsx(layout_1.Flex, {}), !hideWarningButton && warnings.length > 0 ? (jsx_runtime_1.jsx(WarningIndicatorButton_1.WarningIndicatorButton, { setShowWarning: setShowWarning, showWarning: showWarning, warningCount: warnings.length })) : null] })) : null, shouldRenderWarningMessages
                         ? warnings.map((warning) => (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [
-                                jsx_runtime_1.jsx(layout_1.Spacing, { y: 1 }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: warning.message, align: "flex-start", type: "warning", action: warning.resolveLink ? (jsx_runtime_1.jsx("a", { href: warning.resolveLink, target: "_blank", rel: "noopener noreferrer", style: resolveLinkStyle, children: "Resolve" })) : null })] }, warning.id)))
-                        : null] }), mode === 'schema' ? (jsx_runtime_1.jsx(SchemaEditor_1.SchemaEditor, { value: defaultProps, setValue: setDefaultProps, schema: schema })) : (jsx_runtime_1.jsx(RenderModalJSONPropsEditor_1.RenderModalJSONPropsEditor, { value: defaultProps !== null && defaultProps !== void 0 ? defaultProps : {}, setValue: jsonEditorSetValue, onSave: onSave, serializedJSON: serializedJSON, defaultProps: unresolvedComposition.defaultProps, schema: schema, compositionId: unresolvedComposition.id }))] }));
+                                jsx_runtime_1.jsx(layout_1.Spacing, { y: 1 }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: warning.message, align: "flex-start", type: "warning", size: compactLayout ? 'compact' : 'default', action: warning.resolveLink ? (jsx_runtime_1.jsx("a", { href: warning.resolveLink, target: "_blank", rel: "noopener noreferrer", style: compactLayout
+                                            ? compactResolveLinkStyle
+                                            : resolveLinkStyle, children: "Resolve" })) : null })] }, warning.id)))
+                        : null] })) : null, mode === 'schema' ? (jsx_runtime_1.jsx(SchemaEditor_1.SchemaEditor, { value: defaultProps, setValue: setDefaultProps, schema: schema, scrollableContainer: !compactLayout, contentInset: compactLayout ? InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING : undefined, errorMode: schemaErrorMode })) : (jsx_runtime_1.jsx(RenderModalJSONPropsEditor_1.RenderModalJSONPropsEditor, { value: defaultProps !== null && defaultProps !== void 0 ? defaultProps : {}, setValue: jsonEditorSetValue, onSave: onSave, serializedJSON: serializedJSON, defaultProps: unresolvedComposition.defaultProps, schema: schema, compositionId: unresolvedComposition.id, layout: layout }))] }));
 };
 exports.DataEditor = DataEditor;

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

@@ -9,4 +9,5 @@ export declare const RenderModalJSONPropsEditor: React.FC<{
     readonly defaultProps: Record<string, unknown>;
     readonly schema: AnyZodSchema;
     readonly compositionId: string;
+    readonly layout?: 'default' | 'inspector';
 }>;

package/dist/components/RenderModal/RenderModalJSONPropsEditor.js

@@ -51,12 +51,28 @@ const style = {
     fontFamily: 'monospace',
     flex: 1,
 };
+const inspectorStyle = {
+    fontFamily: 'monospace',
+    boxSizing: 'border-box',
+    flex: 'none',
+    fontSize: 11,
+    lineHeight: '15px',
+    minHeight: 220,
+    overflowY: 'hidden',
+    ...{
+        fieldSizing: 'content',
+    },
+};
 const scrollable = {
     padding: '8px 12px',
     display: 'flex',
     flexDirection: 'column',
     flex: 1,
 };
+const inspectorScrollable = {
+    ...scrollable,
+    flex: 'none',
+};
 const parseJS = (value, schema) => {
     try {
         const zodValidation = (0, zod_schema_type_1.zodSafeParse)(schema, value);
@@ -85,7 +101,7 @@ const parseJSON = (str, schema) => {
         return { str, validJSON: false, error: e.message };
     }
 };
-const RenderModalJSONPropsEditor = ({ setValue, value, defaultProps, onSave, serializedJSON, schema, compositionId, }) => {
+const RenderModalJSONPropsEditor = ({ setValue, value, defaultProps, onSave, serializedJSON, schema, compositionId, layout = 'default', }) => {
     if (serializedJSON === null) {
         throw new Error('expecting serializedJSON to be defined');
     }
@@ -154,17 +170,19 @@ const RenderModalJSONPropsEditor = ({ setValue, value, defaultProps, onSave, ser
         setLocalValue(parseJSON(JSON.stringify(defaultProps, null, 2), schema));
     }, [defaultProps, schema, setValue]);
     const textAreaStyle = (0, react_1.useMemo)(() => {
+        const baseStyle = layout === 'inspector' ? inspectorStyle : style;
         if (!hasError) {
-            return style;
+            return baseStyle;
         }
         return {
-            ...style,
+            ...baseStyle,
             borderColor: colors_1.FAIL_COLOR,
         };
-    }, [hasError]);
-    return (jsx_runtime_1.jsxs("div", { style: scrollable, children: [
-            jsx_runtime_1.jsx(RemTextarea_1.RemTextarea, { onChange: onChange, onBlur: onQuickSave, value: localValue.str, status: localValue.validJSON ? 'ok' : 'error', style: textAreaStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 1 }), jsx_runtime_1.jsx("div", { "data-testid": "json-props-error", children: localValue.validJSON === false ? (jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: localValue.error, type: "error" })) : localValue.zodValidation.success === false ? (jsx_runtime_1.jsx(ZodErrorMessages_1.ZodErrorMessages, { zodValidationResult: localValue.zodValidation, viewTab: "json" })) : null }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 1 }), jsx_runtime_1.jsxs(layout_1.Row, { children: [
-                    jsx_runtime_1.jsx(Button_1.Button, { disabled: !(hasChanged || !localValue.validJSON), onClick: reset, children: "Reset" }), jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(Button_1.Button, { disabled: !localValue.validJSON, onClick: onPretty, children: "Format" }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 })
+    }, [hasError, layout]);
+    const buttonSize = layout === 'inspector' ? 'condensed' : 'default';
+    return (jsx_runtime_1.jsxs("div", { style: layout === 'inspector' ? inspectorScrollable : scrollable, children: [
+            jsx_runtime_1.jsx(RemTextarea_1.RemTextarea, { onChange: onChange, onBlur: onQuickSave, value: localValue.str, status: localValue.validJSON ? 'ok' : 'error', style: textAreaStyle, small: layout === 'inspector' }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 1 }), jsx_runtime_1.jsx("div", { "data-testid": "json-props-error", children: localValue.validJSON === false ? (jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: localValue.error, type: "error", size: layout === 'inspector' ? 'compact' : 'default' })) : localValue.zodValidation.success === false ? (jsx_runtime_1.jsx(ZodErrorMessages_1.ZodErrorMessages, { zodValidationResult: localValue.zodValidation, viewTab: "json", size: layout === 'inspector' ? 'compact' : 'default' })) : null }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 1 }), jsx_runtime_1.jsxs(layout_1.Row, { children: [
+                    jsx_runtime_1.jsx(Button_1.Button, { disabled: !(hasChanged || !localValue.validJSON), onClick: reset, size: buttonSize, children: "Reset" }), jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(Button_1.Button, { disabled: !localValue.validJSON, onClick: onPretty, size: buttonSize, children: "Format" }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 })
                 ] })
         ] }));
 };

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

@@ -1,5 +1,6 @@
 import React from 'react';
-export declare const SCHEMA_EDITOR_FIELDSET_PADDING = 10;
+export declare const SCHEMA_EDITOR_FIELDSET_PADDING = 6;
+export declare const getSchemaEditorFieldsetPadding: () => number;
 export declare const Fieldset: React.FC<{
     readonly children: React.ReactNode;
     readonly shouldPad: boolean;

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,