@remotion/studio 4.0.478 → 4.0.481

package/dist/components/NewComposition/RemInput.js

@@ -20,6 +20,11 @@ exports.inputBaseStyle = {
     borderWidth: 1,
     fontSize: 14,
 };
+const compactInputStyle = {
+    fontSize: 12,
+    lineHeight: '16px',
+    padding: '4px 6px',
+};
 const getInputBorderColor = ({ status, isFocused, isHovered, }) => status === 'warning'
     ? colors_1.WARNING_COLOR
     : status === 'error'
@@ -30,7 +35,7 @@ const getInputBorderColor = ({ status, isFocused, isHovered, }) => status === 'w
                 ? colors_1.INPUT_BORDER_COLOR_HOVERED
                 : colors_1.INPUT_BORDER_COLOR_UNHOVERED;
 exports.getInputBorderColor = getInputBorderColor;
-const RemInputForwardRef = ({ status, rightAlign, ...props }, ref) => {
+const RemInputForwardRef = ({ status, rightAlign, small = false, ...props }, ref) => {
     const [isFocused, setIsFocused] = (0, react_1.useState)(false);
     const [isHovered, setIsHovered] = (0, react_1.useState)(false);
     const inputRef = (0, react_1.useRef)(null);
@@ -40,12 +45,13 @@ const RemInputForwardRef = ({ status, rightAlign, ...props }, ref) => {
         return {
             backgroundColor: colors_1.INPUT_BACKGROUND,
             ...exports.inputBaseStyle,
+            ...(small ? compactInputStyle : null),
             width: '100%',
             borderColor: (0, exports.getInputBorderColor)({ isFocused, isHovered, status }),
             textAlign: rightAlign ? 'right' : 'left',
             ...((_a = props.style) !== null && _a !== void 0 ? _a : {}),
         };
-    }, [isFocused, isHovered, rightAlign, props.style, status]);
+    }, [isFocused, isHovered, rightAlign, props.style, small, status]);
     (0, react_1.useImperativeHandle)(ref, () => {
         return inputRef.current;
     }, []);

package/dist/components/NewComposition/RemTextarea.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> & {
     readonly status: 'error' | 'warning' | 'ok';
+    readonly small?: boolean;
 };
 export declare const RemTextarea: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
 export {};

package/dist/components/NewComposition/RemTextarea.js

@@ -16,7 +16,12 @@ const inputBaseStyle = {
     resize: 'none',
     overflowX: 'hidden',
 };
-const RemTextareaFRFunction = ({ status, ...props }, ref) => {
+const compactInputStyle = {
+    fontSize: 12,
+    lineHeight: '16px',
+    padding: '4px 6px',
+};
+const RemTextareaFRFunction = ({ status, small = false, ...props }, ref) => {
     const [isFocused, setIsFocused] = (0, react_1.useState)(false);
     const [isHovered, setIsHovered] = (0, react_1.useState)(false);
     const inputRef = (0, react_1.useRef)(null);
@@ -29,11 +34,12 @@ const RemTextareaFRFunction = ({ status, ...props }, ref) => {
         return {
             backgroundColor: colors_1.INPUT_BACKGROUND,
             ...inputBaseStyle,
+            ...(small ? compactInputStyle : null),
             width: '100%',
             borderColor: (0, RemInput_1.getInputBorderColor)({ isFocused, isHovered, status }),
             ...((_a = props.style) !== null && _a !== void 0 ? _a : {}),
         };
-    }, [isFocused, isHovered, props.style, status]);
+    }, [isFocused, isHovered, props.style, small, status]);
     (0, react_1.useEffect)(() => {
         if (!inputRef.current) {
             return;

package/dist/components/NewComposition/ValidationMessage.d.ts

@@ -1,9 +1,12 @@
 import type { SVGProps } from 'react';
 import React from 'react';
 export declare const WarningTriangle: React.FC<SVGProps<SVGSVGElement>>;
+type ValidationMessageSize = 'default' | 'compact';
 export declare const ValidationMessage: React.FC<{
     readonly message: string;
     readonly align: 'flex-start' | 'flex-end';
     readonly type: 'warning' | 'error';
     readonly action?: React.ReactNode;
+    readonly size?: ValidationMessageSize;
 }>;
+export {};

package/dist/components/NewComposition/ValidationMessage.js

@@ -14,6 +14,11 @@ const style = {
     height: 12,
     flexShrink: 0,
 };
+const compactStyle = {
+    ...style,
+    width: 10,
+    height: 10,
+};
 const container = {
     maxWidth: 500,
 };
@@ -22,15 +27,21 @@ const label = {
     color: 'white',
     fontFamily: 'sans-serif',
 };
-const ValidationMessage = ({ message, align, type, action }) => {
+const compactLabel = {
+    ...label,
+    fontSize: 12,
+};
+const ValidationMessage = ({ message, align, type, action, size = 'default' }) => {
+    const iconStyle = size === 'compact' ? compactStyle : style;
+    const labelStyle = size === 'compact' ? compactLabel : label;
     const finalStyle = (0, react_1.useMemo)(() => {
         return {
-            ...style,
+            ...iconStyle,
             fill: type === 'warning' ? colors_1.WARNING_COLOR : colors_1.FAIL_COLOR,
         };
-    }, [type]);
+    }, [iconStyle, type]);
     return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", justify: align, children: [
-                jsx_runtime_1.jsx(exports.WarningTriangle, { style: finalStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: message }), action ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                        jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), action] })) : null] }) }));
+                jsx_runtime_1.jsx(exports.WarningTriangle, { style: finalStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: size === 'compact' ? 0.75 : 1 }), jsx_runtime_1.jsx("div", { style: labelStyle, children: message }), action ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                        jsx_runtime_1.jsx(layout_1.Spacing, { x: size === 'compact' ? 0.75 : 1 }), action] })) : null] }) }));
 };
 exports.ValidationMessage = ValidationMessage;

package/dist/components/OptionsPanel.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-type OptionsSidebarPanel = 'input-props' | 'renders' | 'visual-controls';
+type OptionsSidebarPanel = 'inspector' | 'renders';
 export declare const persistSelectedOptionsSidebarPanel: (panel: OptionsSidebarPanel) => void;
 export declare const optionsSidebarTabs: React.RefObject<{
     selectRendersPanel: () => void;

package/dist/components/OptionsPanel.js

@@ -7,9 +7,8 @@ const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
 const mobile_layout_1 = require("../helpers/mobile-layout");
 const show_browser_rendering_1 = require("../helpers/show-browser-rendering");
-const VisualControls_1 = require("../visual-controls/VisualControls");
-const DefaultPropsEditor_1 = require("./DefaultPropsEditor");
 const get_zod_if_possible_1 = require("./get-zod-if-possible");
+const InspectorPanel_1 = require("./InspectorPanel");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const deep_equal_1 = require("./RenderModal/SchemaEditor/deep-equal");
 const extract_enum_json_paths_1 = require("./RenderModal/SchemaEditor/extract-enum-json-paths");
@@ -18,20 +17,16 @@ const RenderQueue_1 = require("./RenderQueue");
 const actions_1 = require("./RenderQueue/actions");
 const RendersTab_1 = require("./RendersTab");
 const Tabs_1 = require("./Tabs");
-const VisualControlsContent_1 = require("./VisualControls/VisualControlsContent");
 const localStorageKey = 'remotion.sidebarPanel';
 const getSelectedPanel = (renderingAvailable) => {
     if (!renderingAvailable) {
-        return 'input-props';
+        return 'inspector';
     }
     const panel = localStorage.getItem(localStorageKey);
     if (panel === 'renders') {
         return 'renders';
     }
-    if (panel === 'visual-controls') {
-        return 'visual-controls';
-    }
-    return 'input-props';
+    return 'inspector';
 };
 const tabsContainer = {
     backgroundColor: colors_1.BACKGROUND,
@@ -45,7 +40,6 @@ const OptionsPanel = ({ readOnlyStudio }) => {
     const { props, updateProps } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
     const renderingAvailable = !readOnlyStudio || show_browser_rendering_1.SHOW_BROWSER_RENDERING;
     const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
-    const visualControlsTabActivated = (0, react_1.useContext)(VisualControls_1.VisualControlsTabActivatedContext);
     const container = (0, react_1.useMemo)(() => ({
         height: '100%',
         width: '100%',
@@ -55,18 +49,14 @@ const OptionsPanel = ({ readOnlyStudio }) => {
         flex: 1,
     }), [isMobileLayout]);
     const [panel, setPanel] = (0, react_1.useState)(() => getSelectedPanel(renderingAvailable));
-    const onPropsSelected = (0, react_1.useCallback)(() => {
-        setPanel('input-props');
-        (0, exports.persistSelectedOptionsSidebarPanel)('input-props');
+    const onInspectorSelected = (0, react_1.useCallback)(() => {
+        setPanel('inspector');
+        (0, exports.persistSelectedOptionsSidebarPanel)('inspector');
     }, []);
     const onRendersSelected = (0, react_1.useCallback)(() => {
         setPanel('renders');
         (0, exports.persistSelectedOptionsSidebarPanel)('renders');
     }, []);
-    const onVisualControlsSelected = (0, react_1.useCallback)(() => {
-        setPanel('visual-controls');
-        (0, exports.persistSelectedOptionsSidebarPanel)('visual-controls');
-    }, []);
     (0, react_1.useImperativeHandle)(exports.optionsSidebarTabs, () => {
         return {
             selectRendersPanel: () => {
@@ -186,6 +176,7 @@ const OptionsPanel = ({ readOnlyStudio }) => {
         e.stopPropagation();
     }, []);
     return (jsx_runtime_1.jsxs("div", { style: container, className: "css-reset", onPointerDown: onPointerDown, children: [
-            jsx_runtime_1.jsx("div", { style: tabsContainer, children: jsx_runtime_1.jsxs(Tabs_1.Tabs, { children: [visualControlsTabActivated ? (jsx_runtime_1.jsx(Tabs_1.Tab, { selected: panel === 'visual-controls', onClick: onVisualControlsSelected, children: "Controls" })) : null, jsx_runtime_1.jsxs(Tabs_1.Tab, { selected: panel === 'input-props', onClick: onPropsSelected, style: { justifyContent: 'space-between' }, children: ["Props", hasLocalModifications ? (jsx_runtime_1.jsx(SchemaResetButton_1.SchemaResetButton, { onClick: resetToOriginal })) : null] }), renderingAvailable ? (jsx_runtime_1.jsx(RendersTab_1.RendersTab, { onClick: onRendersSelected, selected: panel === 'renders' })) : null] }) }), panel === 'input-props' ? (composition ? (jsx_runtime_1.jsx(DefaultPropsEditor_1.DefaultPropsEditor, { unresolvedComposition: composition, defaultProps: currentDefaultProps, setDefaultProps: setDefaultProps, propsEditType: "default-props" }, composition.id)) : null) : panel === 'visual-controls' && visualControlsTabActivated ? (jsx_runtime_1.jsx(VisualControlsContent_1.VisualControlsContent, {})) : !renderingAvailable ? null : (jsx_runtime_1.jsx(RenderQueue_1.RenderQueue, {}))] }));
+            jsx_runtime_1.jsx("div", { style: tabsContainer, children: jsx_runtime_1.jsxs(Tabs_1.Tabs, { children: [
+                        jsx_runtime_1.jsxs(Tabs_1.Tab, { selected: panel === 'inspector', onClick: onInspectorSelected, style: { justifyContent: 'space-between' }, children: ["Inspector", hasLocalModifications ? (jsx_runtime_1.jsx(SchemaResetButton_1.SchemaResetButton, { onClick: resetToOriginal })) : null] }), renderingAvailable ? (jsx_runtime_1.jsx(RendersTab_1.RendersTab, { onClick: onRendersSelected, selected: panel === 'renders' })) : null] }) }), panel === 'inspector' ? (jsx_runtime_1.jsx(InspectorPanel_1.InspectorPanel, { composition: composition, currentDefaultProps: currentDefaultProps, setDefaultProps: setDefaultProps })) : !renderingAvailable ? null : (jsx_runtime_1.jsx(RenderQueue_1.RenderQueue, {}))] }));
 };
 exports.OptionsPanel = OptionsPanel;

package/dist/components/QuickSwitcher/QuickSwitcherContent.js

@@ -19,6 +19,7 @@ const AlgoliaCredit_1 = require("./AlgoliaCredit");
 const fuzzy_search_1 = require("./fuzzy-search");
 const NoResults_1 = require("./NoResults");
 const QuickSwitcherResult_1 = require("./QuickSwitcherResult");
+const shared_1 = require("./shared");
 const input = {
     width: '100%',
 };
@@ -56,12 +57,6 @@ const content = {
     flexDirection: 'row',
     alignItems: 'center',
 };
-const loopIndex = (index, length) => {
-    if (index < 0) {
-        index += length;
-    }
-    return index % length;
-};
 const stripQuery = (query) => {
     if (query.startsWith('>') || query.startsWith('?')) {
         return query.substring(1).trim();
@@ -232,7 +227,7 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio
     const onTextChange = (0, react_1.useCallback)((e) => {
         setState({ query: e.target.value, selectedIndex: 0 });
     }, []);
-    const selectedIndexRounded = loopIndex(state.selectedIndex, resultsArray.length);
+    const selectedIndexRounded = (0, shared_1.loopIndex)(state.selectedIndex, resultsArray.length);
     const onActionsSelected = (0, react_1.useCallback)(() => {
         var _a;
         setState((s) => ({

package/dist/components/QuickSwitcher/QuickSwitcherResult.js

@@ -8,6 +8,7 @@ const use_keybinding_1 = require("../../helpers/use-keybinding");
 const still_1 = require("../../icons/still");
 const video_1 = require("../../icons/video");
 const layout_1 = require("../layout");
+const shared_1 = require("./shared");
 const container = {
     paddingLeft: 16,
     paddingRight: 16,
@@ -70,15 +71,7 @@ const QuickSwitcherResult = ({ result, selected }) => {
             binding.unregister();
         };
     }, [keybindings, result.onSelected, selected]);
-    (0, react_1.useEffect)(() => {
-        var _a;
-        if (selected) {
-            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
-                block: 'nearest',
-                inline: 'center',
-            });
-        }
-    }, [selected]);
+    (0, shared_1.useScrollIntoViewOnSelected)(ref, selected);
     const style = (0, react_1.useMemo)(() => {
         return {
             ...container,
@@ -96,7 +89,7 @@ const QuickSwitcherResult = ({ result, selected }) => {
                 : selected || hovered
                     ? 'white'
                     : colors_1.LIGHT_TEXT,
-            fontSize: 15,
+            fontSize: shared_1.QUICK_SWITCHER_RESULT_LABEL_FONT_SIZE,
         };
     }, [hovered, result.type, selected]);
     return (jsx_runtime_1.jsxs("div", { ref: ref, style: style, onClick: result.onSelected, children: [result.type === 'composition' ? (result.compositionType === 'still' ? (jsx_runtime_1.jsx(still_1.StillIcon, { color: selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })) : (jsx_runtime_1.jsx(video_1.FilmIcon, { color: selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle }))) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: labelContainer, children: result.type === 'search-result' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [

package/dist/components/QuickSwitcher/shared.d.ts

@@ -0,0 +1,4 @@
+import { type RefObject } from 'react';
+export declare const QUICK_SWITCHER_RESULT_LABEL_FONT_SIZE = 15;
+export declare const loopIndex: (index: number, length: number) => number;
+export declare const useScrollIntoViewOnSelected: <T extends HTMLElement>(ref: RefObject<T | null>, selected: boolean) => void;

package/dist/components/QuickSwitcher/shared.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useScrollIntoViewOnSelected = exports.loopIndex = exports.QUICK_SWITCHER_RESULT_LABEL_FONT_SIZE = void 0;
+const react_1 = require("react");
+exports.QUICK_SWITCHER_RESULT_LABEL_FONT_SIZE = 15;
+const loopIndex = (index, length) => {
+    if (index < 0) {
+        index += length;
+    }
+    return index % length;
+};
+exports.loopIndex = loopIndex;
+const useScrollIntoViewOnSelected = (ref, selected) => {
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (selected) {
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+                block: 'nearest',
+                inline: 'center',
+            });
+        }
+    }, [ref, selected]);
+};
+exports.useScrollIntoViewOnSelected = useScrollIntoViewOnSelected;

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';
 }>;