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

package/dist/editor/components/RenderButton.js

@@ -6,48 +6,73 @@ const client_1 = require("@remotion/renderer/client");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const get_default_out_name_1 = require("../../get-default-out-name");
+const Button_1 = require("../../preview-server/error-overlay/remotion-overlay/Button");
 const get_default_video_contexts_1 = require("../../preview-server/render-queue/get-default-video-contexts");
+const client_id_1 = require("../helpers/client-id");
+const use_keybinding_1 = require("../helpers/use-keybinding");
 const render_1 = require("../icons/render");
+const in_out_1 = require("../state/in-out");
 const modals_1 = require("../state/modals");
-const InlineAction_1 = require("./InlineAction");
-const RenderButton = ({ composition, visible }) => {
+const layout_1 = require("./layout");
+const button = {
+    paddingLeft: 7,
+    paddingRight: 7,
+    paddingTop: 7,
+    paddingBottom: 7,
+};
+const label = {
+    fontSize: 14,
+};
+const RenderButton = () => {
+    const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { type } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).type;
+    const shortcut = (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? '' : '(R)';
+    const tooltip = type === 'connected'
+        ? 'Export the current composition ' + shortcut
+        : 'Connect to the preview server to render';
     const iconStyle = (0, react_1.useMemo)(() => {
         return {
             style: {
-                height: 12,
+                height: 16,
+                color: 'currentColor',
             },
         };
     }, []);
+    const video = remotion_1.Internals.useVideo();
+    const frame = (0, remotion_1.useCurrentFrame)();
     const { props } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
-    const isVideo = composition.durationInFrames > 1;
-    const onClick = (0, react_1.useCallback)((e) => {
-        var _a;
+    const onClick = (0, react_1.useCallback)(() => {
+        var _a, _b, _c;
+        if (!video) {
+            return null;
+        }
+        const isVideo = video.durationInFrames > 1;
         const defaults = window.remotion_renderDefaults;
         if (!defaults) {
-            throw new Error('expected defaults');
+            throw new TypeError('Expected defaults');
         }
-        e.stopPropagation();
         const { initialAudioCodec, initialRenderType, initialVideoCodec } = (0, get_default_video_contexts_1.getDefaultCodecs)({
             defaultCodec: defaults.codec,
             isStill: !isVideo,
         });
         setSelectedModal({
             type: 'render',
-            compositionId: composition.id,
-            initialFrame: 0,
-            initialVideoImageFormat: defaults.videoImageFormat,
+            compositionId: video.id,
+            initialFrame: frame,
             initialStillImageFormat: defaults.stillImageFormat,
-            initialJpegQuality: defaults.jpegQuality,
-            initialScale: defaults.scale,
-            initialVerbose: defaults.logLevel === 'verbose',
+            initialVideoImageFormat: defaults.videoImageFormat,
             initialOutName: (0, get_default_out_name_1.getDefaultOutLocation)({
-                compositionName: composition.id,
+                compositionName: video.id,
                 defaultExtension: isVideo
-                    ? defaults.stillImageFormat
-                    : client_1.BrowserSafeApis.getFileExtensionFromCodec(initialVideoCodec, defaults.audioCodec),
+                    ? client_1.BrowserSafeApis.getFileExtensionFromCodec(initialVideoCodec, defaults.audioCodec)
+                    : defaults.stillImageFormat,
                 type: 'asset',
             }),
+            initialJpegQuality: defaults.jpegQuality,
+            initialScale: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.scale) !== null && _b !== void 0 ? _b : 1,
+            initialVerbose: defaults.logLevel === 'verbose',
             initialVideoCodecForAudioTab: initialAudioCodec,
             initialRenderType,
             initialVideoCodecForVideoTab: initialVideoCodec,
@@ -69,12 +94,14 @@ const RenderButton = ({ composition, visible }) => {
             initialOpenGlRenderer: defaults.openGlRenderer,
             initialHeadless: defaults.headless,
             initialIgnoreCertificateErrors: defaults.ignoreCertificateErrors,
-            defaultProps: (_a = props[composition.id]) !== null && _a !== void 0 ? _a : composition.defaultProps,
+            defaultProps: (_c = props[video.id]) !== null && _c !== void 0 ? _c : video.defaultProps,
+            inFrameMark: inFrame,
+            outFrameMark: outFrame,
         });
-    }, [composition.defaultProps, composition.id, isVideo, props, setSelectedModal]);
-    if (!visible) {
+    }, [video, setSelectedModal, frame, props, inFrame, outFrame]);
+    if (!video) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: onClick, children: (0, jsx_runtime_1.jsx)(render_1.ThinRenderIcon, { svgProps: iconStyle }) }));
+    return ((0, jsx_runtime_1.jsx)(Button_1.Button, { id: "render-modal-button", title: tooltip, onClick: onClick, buttonContainerStyle: button, disabled: connectionStatus !== 'connected', children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)(render_1.RenderIcon, { svgProps: iconStyle }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("span", { style: label, children: "Render" })] }) }));
 };
 exports.RenderButton = RenderButton;

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

@@ -2,21 +2,58 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CliCopyButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
+const svgStyle = {
+    width: 16,
+    height: 16,
+    verticalAlign: 'sub',
+};
+const copiedStyle = {
+    fontSize: '14px',
+    minHeight: '30px',
+    minWidth: '30px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+};
+const buttonStyle = {
+    width: '30px',
+    height: '30px',
+    border: 'none',
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+};
 const CliCopyButton = ({ valueToCopy, }) => {
-    const iconStyle = {
-        width: 16,
-        height: 16,
-        color: '#a6a8aa',
-        verticalAlign: 'sub',
-    };
-    const clipBoardIcon = ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "far", "data-icon": "clipboard", className: "svg-inline--fa fa-clipboard fa-w-12", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 384 512", style: iconStyle, children: (0, jsx_runtime_1.jsx)("path", { fill: "#a6a8aa", d: "M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm144 418c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V118c0-3.3 2.7-6 6-6h42v36c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-36h42c3.3 0 6 2.7 6 6z" }) }));
-    return ((0, jsx_runtime_1.jsx)("button", { type: "button", style: {
-            width: '30px',
-            height: '30px',
-            border: 'none',
-            cursor: 'pointer',
-        }, onClick: () => {
+    const [copied, setCopied] = (0, react_1.useState)(false);
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const fillColor = (0, react_1.useMemo)(() => {
+        return hovered ? 'white' : colors_1.LIGHT_TEXT;
+    }, [hovered]);
+    const clipboardIcon = ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "far", "data-icon": "clipboard", className: "svg-inline--fa fa-clipboard fa-w-12", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 384 512", style: svgStyle, children: (0, jsx_runtime_1.jsx)("path", { fill: fillColor, d: "M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm144 418c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V118c0-3.3 2.7-6 6-6h42v36c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-36h42c3.3 0 6 2.7 6 6z" }) }));
+    const checkSvg = ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", style: svgStyle, children: (0, jsx_runtime_1.jsx)("path", { fill: fillColor, d: "M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" }) }));
+    const onPointerEnter = (0, react_1.useCallback)(() => {
+        setHovered(true);
+    }, []);
+    const onPointerLeave = (0, react_1.useCallback)(() => {
+        setHovered(false);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (!copied) {
+            return;
+        }
+        const handleClear = () => {
+            setCopied(false);
+            setHovered(false);
+        };
+        const to = setTimeout(() => handleClear(), 2000);
+        return () => clearTimeout(to);
+    }, [copied]);
+    return copied ? ((0, jsx_runtime_1.jsx)("span", { style: copiedStyle, children: checkSvg })) : ((0, jsx_runtime_1.jsx)("button", { type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: buttonStyle, onClick: () => {
             navigator.clipboard.writeText(valueToCopy);
-        }, children: clipBoardIcon }));
+            setCopied(true);
+        }, children: clipboardIcon }));
 };
 exports.CliCopyButton = CliCopyButton;

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

@@ -5,7 +5,6 @@ export declare const useCrfState: (codec: Codec) => {
     setCrf: import("react").Dispatch<import("react").SetStateAction<number>>;
     minCrf: number;
     maxCrf: number;
-    shouldDisplayOption: boolean;
 };
 export declare const CrfSetting: React.FC<{
     crf: number;

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

@@ -33,7 +33,6 @@ const useCrfState = (codec) => {
         setCrf,
         minCrf: range[0],
         maxCrf: range[1],
-        shouldDisplayOption: range[0] !== range[1] && client_1.BrowserSafeApis.codecSupportsCrf(codec),
     };
 };
 exports.useCrfState = useCrfState;

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { AnyComposition } from 'remotion';
+export declare type State = {
+    str: string;
+    value: Record<string, unknown>;
+    validJSON: true;
+    zodValidation: Zod.SafeParseReturnType<unknown, unknown>;
+} | {
+    str: string;
+    validJSON: false;
+    error: string;
+};
+export declare type PropsEditType = 'input-props' | 'default-props';
+export declare const DataEditor: React.FC<{
+    unresolvedComposition: AnyComposition;
+    inputProps: Record<string, unknown>;
+    setInputProps: React.Dispatch<React.SetStateAction<Record<string, unknown>>>;
+    compact: boolean;
+    mayShowSaveButton: boolean;
+    propsEditType: PropsEditType;
+}>;

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

@@ -0,0 +1,287 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const remotion_1 = require("remotion");
+const event_source_1 = require("../../../event-source");
+const client_id_1 = require("../../helpers/client-id");
+const colors_1 = require("../../helpers/colors");
+const get_zod_if_possible_1 = require("../get-zod-if-possible");
+const layout_1 = require("../layout");
+const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const actions_1 = require("../RenderQueue/actions");
+const SegmentedControl_1 = require("../SegmentedControl");
+const get_render_modal_warnings_1 = require("./get-render-modal-warnings");
+const RenderModalJSONPropsEditor_1 = require("./RenderModalJSONPropsEditor");
+const extract_enum_json_paths_1 = require("./SchemaEditor/extract-enum-json-paths");
+const input_props_serialization_1 = require("./SchemaEditor/input-props-serialization");
+const SchemaEditor_1 = require("./SchemaEditor/SchemaEditor");
+const SchemaErrorMessages_1 = require("./SchemaEditor/SchemaErrorMessages");
+const WarningIndicatorButton_1 = require("./WarningIndicatorButton");
+const errorExplanation = {
+    fontSize: 14,
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+    lineHeight: 1.5,
+};
+const explainer = {
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'column',
+    padding: '0 12px',
+    justifyContent: 'center',
+    alignItems: 'center',
+    textAlign: 'center',
+};
+const outer = {
+    display: 'flex',
+    flexDirection: 'column',
+    flex: 1,
+    overflow: 'hidden',
+    backgroundColor: colors_1.BACKGROUND,
+};
+const controlContainer = {
+    flexDirection: 'column',
+    display: 'flex',
+    padding: 12,
+    borderBottom: `1px solid ${colors_1.BORDER_COLOR}`,
+};
+const tabWrapper = {
+    display: 'flex',
+    marginBottom: '4px',
+    flexDirection: 'row',
+    alignItems: 'center',
+};
+const persistanceKey = 'remotion.show-render-modalwarning';
+const getPersistedShowWarningState = () => {
+    const val = localStorage.getItem(persistanceKey);
+    if (!val) {
+        return true;
+    }
+    return val === 'true';
+};
+const setPersistedShowWarningState = (val) => {
+    localStorage.setItem(persistanceKey, String(Boolean(val)));
+};
+const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, compact, mayShowSaveButton, propsEditType, }) => {
+    const [mode, setMode] = (0, react_1.useState)('schema');
+    const [valBeforeSafe, setValBeforeSafe] = (0, react_1.useState)(inputProps);
+    const [saving, setSaving] = (0, react_1.useState)(false);
+    const [showWarning, setShowWarningWithoutPersistance] = (0, react_1.useState)(() => getPersistedShowWarningState());
+    const inJSONEditor = mode === 'json';
+    const serializedJSON = (0, react_1.useMemo)(() => {
+        if (!inJSONEditor) {
+            return null;
+        }
+        const value = inputProps;
+        return (0, input_props_serialization_1.serializeJSONWithDate)({
+            data: value,
+            indent: 2,
+            staticBase: window.remotion_staticBase,
+        });
+    }, [inJSONEditor, inputProps]);
+    const cliProps = (0, remotion_1.getInputProps)();
+    const [canSaveDefaultPropsObjectState, setCanSaveDefaultProps] = (0, react_1.useState)({
+        [unresolvedComposition.id]: get_render_modal_warnings_1.defaultTypeCanSaveState,
+    });
+    const z = (0, get_zod_if_possible_1.useZodIfPossible)();
+    const schema = (0, react_1.useMemo)(() => {
+        if (!z) {
+            return 'no-zod';
+        }
+        if (!unresolvedComposition.schema) {
+            return z.object({});
+        }
+        if (!(typeof unresolvedComposition.schema.safeParse === 'function')) {
+            throw new Error('A value which is not a Zod schema was passed to `schema`');
+        }
+        return unresolvedComposition.schema;
+    }, [unresolvedComposition.schema, z]);
+    const zodValidationResult = (0, react_1.useMemo)(() => {
+        if (schema === 'no-zod') {
+            return 'no-zod';
+        }
+        return schema.safeParse(inputProps);
+    }, [inputProps, 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 canSaveDefaultProps = (0, react_1.useMemo)(() => {
+        return canSaveDefaultPropsObjectState[unresolvedComposition.id]
+            ? canSaveDefaultPropsObjectState[unresolvedComposition.id]
+            : get_render_modal_warnings_1.defaultTypeCanSaveState;
+    }, [canSaveDefaultPropsObjectState, unresolvedComposition.id]);
+    const showSaveButton = mayShowSaveButton && canSaveDefaultProps.canUpdate;
+    const { fastRefreshes } = (0, react_1.useContext)(remotion_1.Internals.NonceContext);
+    const checkIfCanSaveDefaultProps = (0, react_1.useCallback)(async () => {
+        try {
+            const can = await (0, actions_1.canUpdateDefaultProps)(unresolvedComposition.id);
+            if (can.canUpdate) {
+                setCanSaveDefaultProps((prevState) => ({
+                    ...prevState,
+                    [unresolvedComposition.id]: {
+                        canUpdate: true,
+                    },
+                }));
+            }
+            else {
+                setCanSaveDefaultProps((prevState) => ({
+                    ...prevState,
+                    [unresolvedComposition.id]: {
+                        canUpdate: false,
+                        reason: can.reason,
+                        determined: true,
+                    },
+                }));
+            }
+        }
+        catch (err) {
+            setCanSaveDefaultProps((prevState) => ({
+                ...prevState,
+                [unresolvedComposition.id]: {
+                    canUpdate: false,
+                    reason: err.message,
+                    determined: true,
+                },
+            }));
+        }
+    }, [unresolvedComposition.id]);
+    (0, react_1.useEffect)(() => {
+        checkIfCanSaveDefaultProps();
+    }, [checkIfCanSaveDefaultProps]);
+    (0, react_1.useEffect)(() => {
+        const unsub = (0, event_source_1.subscribeToEvent)('root-file-changed', checkIfCanSaveDefaultProps);
+        return () => {
+            unsub();
+        };
+    }, [checkIfCanSaveDefaultProps]);
+    const modeItems = (0, react_1.useMemo)(() => {
+        return [
+            {
+                key: 'schema',
+                label: 'Schema',
+                onClick: () => {
+                    setMode('schema');
+                },
+                selected: mode === 'schema',
+            },
+            {
+                key: 'json',
+                label: 'JSON',
+                onClick: () => {
+                    setMode('json');
+                },
+                selected: mode === 'json',
+            },
+        ];
+    }, [mode]);
+    const onUpdate = (0, react_1.useCallback)(() => {
+        if (schema === 'no-zod' || z === null) {
+            (0, NotificationCenter_1.sendErrorNotification)('Cannot update default props: No Zod schema');
+            return;
+        }
+        setValBeforeSafe(inputProps);
+        (0, actions_1.updateDefaultProps)(unresolvedComposition.id, inputProps, (0, extract_enum_json_paths_1.extractEnumJsonPaths)(schema, z, [])).then((response) => {
+            if (!response.success) {
+                (0, NotificationCenter_1.sendErrorNotification)('Cannot update default props: ' + response.reason);
+            }
+        });
+    }, [unresolvedComposition.id, inputProps, schema, z]);
+    (0, react_1.useEffect)(() => {
+        setSaving(false);
+    }, [fastRefreshes]);
+    const onSave = (0, react_1.useCallback)((updater) => {
+        if (schema === 'no-zod' || z === null) {
+            (0, NotificationCenter_1.sendErrorNotification)('Cannot update default props: No Zod schema');
+            return;
+        }
+        setSaving(true);
+        (0, actions_1.updateDefaultProps)(unresolvedComposition.id, updater(unresolvedComposition.defaultProps), (0, extract_enum_json_paths_1.extractEnumJsonPaths)(schema, z, []))
+            .then((response) => {
+            if (!response.success) {
+                console.log(response.stack);
+                (0, NotificationCenter_1.sendErrorNotification)(`Cannot update default props: ${response.reason}. See console for more information.`);
+            }
+        })
+            .catch((err) => {
+            (0, NotificationCenter_1.sendErrorNotification)(`Cannot update default props: ${err.message}`);
+            setSaving(false);
+        });
+    }, [unresolvedComposition.defaultProps, unresolvedComposition.id, schema, z]);
+    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).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') {
+        return ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 5 }), (0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "The preview server has disconnected. Reconnect to edit the schema." }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2, block: true })] }));
+    }
+    if (schema === 'no-zod') {
+        return (0, jsx_runtime_1.jsx)(SchemaErrorMessages_1.ZodNotInstalled, {});
+    }
+    if (!z) {
+        throw new Error('expected zod');
+    }
+    if (zodValidationResult === 'no-zod') {
+        throw new Error('expected zod');
+    }
+    const def = schema._def;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const typeName = def.typeName;
+    if (typeName === z.ZodFirstPartyTypeKind.ZodAny) {
+        return (0, jsx_runtime_1.jsx)(SchemaErrorMessages_1.NoSchemaDefined, {});
+    }
+    if (!unresolvedComposition.defaultProps) {
+        return (0, jsx_runtime_1.jsx)(SchemaErrorMessages_1.NoDefaultProps, {});
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { style: outer, children: [(0, jsx_runtime_1.jsxs)("div", { style: controlContainer, children: [(0, jsx_runtime_1.jsxs)("div", { style: tabWrapper, children: [(0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: modeItems, needsWrapping: false }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), warnings.length > 0 ? ((0, jsx_runtime_1.jsx)(WarningIndicatorButton_1.WarningIndicatorButton, { setShowWarning: setShowWarning, showWarning: showWarning, warningCount: warnings.length })) : null] }), showWarning && warnings.length > 0
+                        ? warnings.map((warning) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: warning, align: "flex-start", type: "warning" })] }, warning)))
+                        : null] }), mode === 'schema' ? ((0, jsx_runtime_1.jsx)(SchemaEditor_1.SchemaEditor, { value: inputProps, setValue: setInputProps, schema: schema, zodValidationResult: zodValidationResult, compact: compact, defaultProps: unresolvedComposition.defaultProps, onSave: onSave, showSaveButton: showSaveButton, saving: saving, saveDisabledByParent: !zodValidationResult.success })) : ((0, jsx_runtime_1.jsx)(RenderModalJSONPropsEditor_1.RenderModalJSONPropsEditor, { value: inputProps !== null && inputProps !== void 0 ? inputProps : {}, setValue: setInputProps, onSave: onUpdate, valBeforeSafe: valBeforeSafe, showSaveButton: showSaveButton, serializedJSON: serializedJSON, defaultProps: unresolvedComposition.defaultProps, schema: schema }))] }));
+};
+exports.DataEditor = DataEditor;

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

@@ -4,13 +4,14 @@ exports.EnforceAudioTrackSetting = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Checkbox_1 = require("../Checkbox");
+const layout_1 = require("../layout");
 const InfoBubble_1 = require("./InfoBubble");
-const layout_1 = require("./layout");
+const layout_2 = require("./layout");
 const OptionExplainer_1 = require("./OptionExplainer");
 const EnforceAudioTrackSetting = ({ enforceAudioTrack, muted, setEnforceAudioTrack, option }) => {
     const onEnforceAudioTrackChanged = (0, react_1.useCallback)((e) => {
         setEnforceAudioTrack(e.target.checked);
     }, [setEnforceAudioTrack]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_1.label, children: ["Enforce Audio Track", (0, jsx_runtime_1.jsx)(InfoBubble_1.InfoBubble, { title: "Learn more about this option", children: (0, jsx_runtime_1.jsx)(OptionExplainer_1.OptionExplainer, { option: option }) })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { disabled: muted && !enforceAudioTrack, checked: enforceAudioTrack, onChange: onEnforceAudioTrackChanged }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Enforce Audio Track", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(InfoBubble_1.InfoBubble, { title: "Learn more about this option", children: (0, jsx_runtime_1.jsx)(OptionExplainer_1.OptionExplainer, { option: option }) })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { disabled: muted && !enforceAudioTrack, checked: enforceAudioTrack, onChange: onEnforceAudioTrackChanged }) })] }));
 };
 exports.EnforceAudioTrackSetting = EnforceAudioTrackSetting;

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

@@ -106,10 +106,11 @@ const InfoBubble = ({ title, children }) => {
             display: 'inline-flex',
             flexDirection: 'row',
             alignItems: 'center',
+            padding: 6,
         };
     }, []);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { ref: ref, tabIndex: tabIndex, style: style, title: title, type: "button", children: (0, jsx_runtime_1.jsx)("svg", { style: icon, viewBox: "0 0 512 512", children: (0, jsx_runtime_1.jsx)("path", { fill: hovered ? 'white' : colors_1.LIGHT_TEXT, d: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24h80c13.3 0 24-10.7 24-24s-10.7-24-24-24h-8V248c0-13.3-10.7-24-24-24H216c-13.3 0-24 10.7-24 24s10.7 24 24 24h24v64H216zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" }) }) }), portalStyle
-                ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)("div", { style: styles_1.outerPortal, className: "css-reset", children: (0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: (0, jsx_runtime_1.jsx)("div", { style: portalStyle, children: (0, jsx_runtime_1.jsx)(InfoTooltip_1.InfoTooltip, { arrowDirection: layout, children: children }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
+                ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)("div", { style: styles_1.outerPortal, className: "css-reset", children: (0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: (0, jsx_runtime_1.jsx)("div", { style: portalStyle, children: (0, jsx_runtime_1.jsx)(InfoTooltip_1.InfoTooltip, { backgroundColor: colors_1.INPUT_BACKGROUND, arrowDirection: layout, children: children }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));
 };
 exports.InfoBubble = InfoBubble;

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

@@ -2,4 +2,5 @@ import React from 'react';
 export declare const InfoTooltip: React.FC<{
     children: React.ReactNode;
     arrowDirection: 'up' | 'down';
+    backgroundColor: string;
 }>;

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

@@ -18,23 +18,24 @@ const arrowUp = {
 };
 const arrowDown = {
     ...arrow,
-    marginTop: -0.5,
+    marginTop: -1,
 };
-const InfoTooltip = ({ children, arrowDirection }) => {
+const InfoTooltip = ({ children, arrowDirection, backgroundColor }) => {
     const container = (0, react_1.useMemo)(() => {
         return {
             boxShadow: arrowDirection === 'down' ? styles_1.SHADOW_TOWARDS_TOP : styles_1.SHADOW_TOWARDS_BOTTOM,
-            background: colors_1.BACKGROUND,
+            background: backgroundColor,
             color: 'white',
             border: '0.5px solid ' + colors_1.BORDER_COLOR,
             maxHeight: 200,
             overflow: 'auto',
+            borderRadius: '4px',
         };
-    }, [arrowDirection]);
+    }, [arrowDirection, backgroundColor]);
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
             display: 'flex',
             flexDirection: arrowDirection === 'up' ? 'column-reverse' : 'column',
             alignItems: 'flex-start',
-        }, children: [(0, jsx_runtime_1.jsx)("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: children }), arrowDirection === 'down' ? ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 14 7", style: arrowDown, children: (0, jsx_runtime_1.jsx)("path", { d: `M 14 0 L 7 7 L 0 0`, fill: colors_1.BACKGROUND, strokeLinecap: "butt", stroke: colors_1.BORDER_COLOR, strokeWidth: 0.5 }) })) : null, arrowDirection === 'up' ? ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 14 7", style: arrowUp, children: (0, jsx_runtime_1.jsx)("path", { d: `M 0 7 L 7 0 L 14 7`, fill: colors_1.BACKGROUND, strokeLinecap: "butt", stroke: colors_1.BORDER_COLOR, strokeWidth: 0.5 }) })) : null] }));
+        }, children: [(0, jsx_runtime_1.jsx)("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: children }), arrowDirection === 'down' ? ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 14 7", style: arrowDown, children: (0, jsx_runtime_1.jsx)("path", { d: `M 14 0 L 7 7 L 0 0`, fill: backgroundColor, strokeLinecap: "butt", stroke: colors_1.BORDER_COLOR, strokeWidth: 0.5 }) })) : null, arrowDirection === 'up' ? ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 14 7", style: arrowUp, children: (0, jsx_runtime_1.jsx)("path", { d: `M 0 7 L 7 0 L 14 7`, fill: backgroundColor, strokeLinecap: "butt", stroke: colors_1.BORDER_COLOR, strokeWidth: 0.5 }) })) : null] }));
 };
 exports.InfoTooltip = InfoTooltip;

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

@@ -2,13 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InlineEyeButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const colors_1 = require("../../helpers/colors");
+const react_1 = require("react");
 const InlineAction_1 = require("../InlineAction");
 const clearIcon = {
     height: 14,
-    color: colors_1.LIGHT_TEXT,
+    color: 'currentColor',
 };
 const InlineEyeButton = ({ onClick, enabled }) => {
-    return ((0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: onClick, children: enabled ? ((0, jsx_runtime_1.jsx)("svg", { style: clearIcon, viewBox: "0 0 640 512", children: (0, jsx_runtime_1.jsx)("path", { fill: 'currentColor', d: "M25.9 3.4C19-2 8.9-.8 3.4 6.1S-.8 23.1 6.1 28.6l608 480c6.9 5.5 17 4.3 22.5-2.6s4.3-17-2.6-22.5L25.9 3.4zM605.5 268.3c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-51.2 0-96 14.8-133.9 36.8l27.3 21.5C244.6 74.2 280.2 64 320 64c70.4 0 127.7 32 170.8 72c43.1 40 71.9 88 85.2 120c-9.2 22.1-25.9 52-49.5 81.5l25.1 19.8c25.6-32 43.7-64.4 53.9-89zM88.4 154.7c-25.6 32-43.7 64.4-53.9 89c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c51.2 0 96-14.8 133.9-36.8l-27.3-21.5C395.4 437.8 359.8 448 320 448c-70.4 0-127.7-32-170.8-72C106.1 336 77.3 288 64 256c9.2-22.1 25.9-52 49.5-81.5L88.4 154.7zM320 384c16.7 0 32.7-3.2 47.4-9.1l-30.9-24.4c-5.4 .9-10.9 1.4-16.5 1.4c-51 0-92.8-39.8-95.8-90.1l-30.9-24.4c-.9 6-1.3 12.2-1.3 18.5c0 70.7 57.3 128 128 128zM448 256c0-70.7-57.3-128-128-128c-16.7 0-32.7 3.2-47.4 9.1l30.9 24.4c5.4-.9 10.9-1.4 16.5-1.4c51 0 92.8 39.8 95.8 90.1l30.9 24.4c.9-6 1.3-12.2 1.3-18.5z" }) })) : ((0, jsx_runtime_1.jsx)("svg", { style: clearIcon, viewBox: "0 0 576 512", children: (0, jsx_runtime_1.jsx)("path", { fill: 'currentColor', d: "M117.2 136C160.3 96 217.6 64 288 64s127.7 32 170.8 72c43.1 40 71.9 88 85.2 120c-13.3 32-42.1 80-85.2 120c-43.1 40-100.4 72-170.8 72s-127.7-32-170.8-72C74.1 336 45.3 288 32 256c13.3-32 42.1-80 85.2-120zM288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM192 256a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zm224 0a128 128 0 1 0 -256 0 128 128 0 1 0 256 0z" }) })) }));
+    const renderAction = (0, react_1.useCallback)((color) => {
+        return enabled ? ((0, jsx_runtime_1.jsx)("svg", { style: clearIcon, viewBox: "0 0 640 512", children: (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M25.9 3.4C19-2 8.9-.8 3.4 6.1S-.8 23.1 6.1 28.6l608 480c6.9 5.5 17 4.3 22.5-2.6s4.3-17-2.6-22.5L25.9 3.4zM605.5 268.3c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-51.2 0-96 14.8-133.9 36.8l27.3 21.5C244.6 74.2 280.2 64 320 64c70.4 0 127.7 32 170.8 72c43.1 40 71.9 88 85.2 120c-9.2 22.1-25.9 52-49.5 81.5l25.1 19.8c25.6-32 43.7-64.4 53.9-89zM88.4 154.7c-25.6 32-43.7 64.4-53.9 89c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c51.2 0 96-14.8 133.9-36.8l-27.3-21.5C395.4 437.8 359.8 448 320 448c-70.4 0-127.7-32-170.8-72C106.1 336 77.3 288 64 256c9.2-22.1 25.9-52 49.5-81.5L88.4 154.7zM320 384c16.7 0 32.7-3.2 47.4-9.1l-30.9-24.4c-5.4 .9-10.9 1.4-16.5 1.4c-51 0-92.8-39.8-95.8-90.1l-30.9-24.4c-.9 6-1.3 12.2-1.3 18.5c0 70.7 57.3 128 128 128zM448 256c0-70.7-57.3-128-128-128c-16.7 0-32.7 3.2-47.4 9.1l30.9 24.4c5.4-.9 10.9-1.4 16.5-1.4c51 0 92.8 39.8 95.8 90.1l30.9 24.4c.9-6 1.3-12.2 1.3-18.5z" }) })) : ((0, jsx_runtime_1.jsx)("svg", { style: clearIcon, viewBox: "0 0 576 512", children: (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M117.2 136C160.3 96 217.6 64 288 64s127.7 32 170.8 72c43.1 40 71.9 88 85.2 120c-13.3 32-42.1 80-85.2 120c-43.1 40-100.4 72-170.8 72s-127.7-32-170.8-72C74.1 336 45.3 288 32 256c13.3-32 42.1-80 85.2-120zM288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM192 256a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zm224 0a128 128 0 1 0 -256 0 128 128 0 1 0 256 0z" }) }));
+    }, [enabled]);
+    return (0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick });
 };
 exports.InlineEyeButton = InlineEyeButton;

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

@@ -2,11 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InlineRemoveButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const InlineAction_1 = require("../InlineAction");
 const clearIcon = {
     height: 14,
+    color: 'currentColor',
 };
 const InlineRemoveButton = ({ onClick }) => {
-    return ((0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: onClick, children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", style: clearIcon, children: (0, jsx_runtime_1.jsx)("path", { d: "M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z", fill: "currentcolor" }) }) }));
+    const renderAction = (0, react_1.useCallback)((color) => {
+        return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", style: clearIcon, children: (0, jsx_runtime_1.jsx)("path", { d: "M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z", fill: color }) }));
+    }, []);
+    return (0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick });
 };
 exports.InlineRemoveButton = InlineRemoveButton;