@remotion/cli 4.0.0-webhook.27 → 4.1.0-alpha2

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

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderStatusModal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Button_1 = require("../../../preview-server/error-overlay/remotion-overlay/Button");
+const make_retry_payload_1 = require("../../../preview-server/render-queue/make-retry-payload");
+const modals_1 = require("../../state/modals");
+const layout_1 = require("../layout");
+const is_menu_item_1 = require("../Menu/is-menu-item");
+const ModalContainer_1 = require("../ModalContainer");
+const ModalHeader_1 = require("../ModalHeader");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const actions_1 = require("../RenderQueue/actions");
+const context_1 = require("../RenderQueue/context");
+const GuiRenderStatus_1 = require("./GuiRenderStatus");
+const container = {
+    padding: 20,
+    maxWidth: 900,
+    paddingTop: 0,
+};
+const codeBlock = {
+    backgroundColor: '#222',
+    whiteSpace: 'pre',
+    padding: 12,
+    borderRadius: 4,
+    fontFamily: 'monospace',
+    overflow: 'auto',
+    maxHeight: 300,
+};
+const spacer = {
+    height: layout_1.SPACING_UNIT,
+    width: layout_1.SPACING_UNIT,
+};
+const buttonRow = {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+};
+const RenderStatusModal = ({ jobId }) => {
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { jobs } = (0, react_1.useContext)(context_1.RenderQueueContext);
+    const job = jobs.find((j) => j.id === jobId);
+    if (!job) {
+        throw new Error('job not found');
+    }
+    const onQuit = (0, react_1.useCallback)(() => {
+        setSelectedModal(null);
+    }, [setSelectedModal]);
+    const onRetry = (0, react_1.useCallback)(() => {
+        const retryPayload = (0, make_retry_payload_1.makeRetryPayload)(job);
+        setSelectedModal(retryPayload);
+    }, [job, setSelectedModal]);
+    const onClickOnRemove = (0, react_1.useCallback)(() => {
+        setSelectedModal(null);
+        (0, actions_1.removeRenderJob)(job).catch((err) => {
+            (0, NotificationCenter_1.sendErrorNotification)(`Could not remove job: ${err.message}`);
+            console.log(err);
+        });
+    }, [job, setSelectedModal]);
+    const onClickOnCancel = (0, react_1.useCallback)(() => {
+        (0, actions_1.cancelRenderJob)(job).catch((err) => {
+            (0, NotificationCenter_1.sendErrorNotification)(`Could not cancel job: ${err.message}`);
+            console.log(err);
+        });
+    }, [job]);
+    if (!job || job.status === 'idle') {
+        throw new Error('should not have rendered this modal');
+    }
+    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: `Render ${job.compositionId}` }), (0, jsx_runtime_1.jsxs)("div", { style: container, children: [job.status === 'failed' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("p", { children: "The render failed because of the following error:" }), (0, jsx_runtime_1.jsx)("div", { className: is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME, style: codeBlock, children: job.error.stack })] })) : null, job.status === 'done' || job.status === 'running' ? ((0, jsx_runtime_1.jsx)(GuiRenderStatus_1.GuiRenderStatus, { job: job })) : null, (0, jsx_runtime_1.jsx)("div", { style: spacer }), (0, jsx_runtime_1.jsxs)("div", { style: buttonRow, children: [job.status === 'running' ? ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onClickOnCancel, children: "Cancel render" })) : ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onClickOnRemove, children: "Remove render" })), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), job.status === 'failed' ? ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onRetry, children: "Retry" })) : null, (0, jsx_runtime_1.jsx)("div", { style: spacer }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onQuit, children: "Close" })] })] })] }));
+};
+exports.RenderStatusModal = RenderStatusModal;

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const ScaleSetting: React.FC<{
+    scale: number;
+    setScale: (value: React.SetStateAction<number>) => void;
+}>;

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScaleSetting = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const client_1 = require("@remotion/renderer/client");
+const NumberSetting_1 = require("./NumberSetting");
+const MIN_SCALE = 0.1;
+const MAX_SCALE = 10;
+const ScaleSetting = ({ scale, setScale }) => {
+    return ((0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting, { min: MIN_SCALE, max: MAX_SCALE, step: 0.1, name: "Scale", formatter: (w) => {
+            if (typeof w === 'number') {
+                return `${w.toFixed(1)}x`;
+            }
+            return `${w}x`;
+        }, onValueChanged: setScale, value: scale, hint: client_1.BrowserSafeApis.options.scaleOption }));
+};
+exports.ScaleSetting = ScaleSetting;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const SCHEMA_EDITOR_FIELDSET_PADDING = 10;
+export declare const Fieldset: React.FC<{
+    children: React.ReactNode;
+    success: boolean;
+    shouldPad: boolean;
+}>;

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Fieldset = 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;
+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) {
+            return {
+                padding: exports.SCHEMA_EDITOR_FIELDSET_PADDING,
+                paddingTop: exports.SCHEMA_EDITOR_FIELDSET_PADDING / 2,
+                paddingRight: alreadyPadded ? 0 : exports.SCHEMA_EDITOR_FIELDSET_PADDING,
+            };
+        }
+        return {};
+    }, [alreadyPadded, shouldPad]);
+    const content = (0, jsx_runtime_1.jsx)("div", { style: style, children: children });
+    if (shouldPad) {
+        return ((0, jsx_runtime_1.jsx)(AlreadyPaddedRightContext.Provider, { value: true, children: content }));
+    }
+    return content;
+};
+exports.Fieldset = Fieldset;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { AnyZodObject, z } from 'zod';
+export declare const SchemaEditor: React.FC<{
+    schema: AnyZodObject;
+    value: unknown;
+    setValue: React.Dispatch<React.SetStateAction<Record<string, unknown>>>;
+    zodValidationResult: z.SafeParseReturnType<unknown, unknown>;
+    defaultProps: Record<string, unknown>;
+    onSave: (updater: (oldState: unknown) => unknown) => void;
+    showSaveButton: boolean;
+    saving: boolean;
+    saveDisabledByParent: boolean;
+}>;

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

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SchemaEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const get_zod_if_possible_1 = require("../../get-zod-if-possible");
+const is_menu_item_1 = require("../../Menu/is-menu-item");
+const SchemaErrorMessages_1 = require("./SchemaErrorMessages");
+const ZodObjectEditor_1 = require("./ZodObjectEditor");
+const scrollable = {
+    display: 'flex',
+    flexDirection: 'column',
+    overflowY: 'auto',
+};
+const SchemaEditor = ({ schema, value, setValue, zodValidationResult, defaultProps, onSave, showSaveButton, saving, saveDisabledByParent, }) => {
+    const z = (0, get_zod_if_possible_1.useZodIfPossible)();
+    if (!z) {
+        throw new Error('expected zod');
+    }
+    const def = schema._def;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const typeName = def.typeName;
+    const reset = (0, react_1.useCallback)(() => {
+        setValue(defaultProps);
+    }, [defaultProps, setValue]);
+    if (!zodValidationResult.success) {
+        const defaultPropsValid = schema.safeParse(defaultProps);
+        if (!defaultPropsValid.success) {
+            return (0, jsx_runtime_1.jsx)(SchemaErrorMessages_1.InvalidDefaultProps, { zodValidationResult: zodValidationResult });
+        }
+        return ((0, jsx_runtime_1.jsx)(SchemaErrorMessages_1.InvalidSchema, { reset: reset, zodValidationResult: zodValidationResult }));
+    }
+    if (typeName !== z.ZodFirstPartyTypeKind.ZodObject) {
+        return (0, jsx_runtime_1.jsx)(SchemaErrorMessages_1.TopLevelZodValue, { typeReceived: typeName });
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { style: scrollable, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: (0, jsx_runtime_1.jsx)(ZodObjectEditor_1.ZodObjectEditor, { value: value, setValue: setValue, jsonPath: [], schema: schema, defaultValue: defaultProps, onSave: onSave, showSaveButton: showSaveButton, onRemove: null, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: true }) }));
+};
+exports.SchemaEditor = SchemaEditor;

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { z } from 'zod';
+export declare const ZodNotInstalled: () => JSX.Element;
+export declare const NoSchemaDefined: () => JSX.Element;
+export declare const NoDefaultProps: () => JSX.Element;
+export declare const InvalidDefaultProps: React.FC<{
+    zodValidationResult: z.SafeParseReturnType<unknown, unknown>;
+}>;
+export declare const InvalidSchema: React.FC<{
+    zodValidationResult: z.SafeParseReturnType<unknown, unknown>;
+    reset: () => void;
+}>;
+export declare const TopLevelZodValue: React.FC<{
+    typeReceived: string;
+}>;

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

@@ -0,0 +1,62 @@
+"use strict";
+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");
+const Button_1 = require("../../../../preview-server/error-overlay/remotion-overlay/Button");
+const colors_1 = require("../../../helpers/colors");
+const layout_1 = require("../../layout");
+const styles_1 = require("../../Menu/styles");
+const ZodErrorMessages_1 = require("./ZodErrorMessages");
+const explainer = {
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'column',
+    padding: '0 12px',
+    justifyContent: 'center',
+    alignItems: 'center',
+    textAlign: 'center',
+};
+const errorExplanation = {
+    fontSize: 14,
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+    lineHeight: 1.5,
+};
+const codeSnippet = {
+    fontSize: 14,
+    color: colors_1.BLUE,
+    fontFamily: 'monospace',
+};
+const errorContainer = {
+    padding: '8px 12px',
+    overflowY: 'auto',
+};
+const openDocs = () => {
+    window.open(
+    // TODO: Make sure to update this link when we release v4
+    'https://v4.remotion.dev/docs/parametrized-rendering#define-a-schema-');
+};
+const ZodNotInstalled = () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["Install ", (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "zod" }), " as a dependency to interactively control the props of the composition."] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2, block: true }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: openDocs, children: "Learn how" })] }));
+};
+exports.ZodNotInstalled = ZodNotInstalled;
+const NoSchemaDefined = () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["Make the props of this composition interactively editable by adding a", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "schema" }), " prop to the", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: '<Composition>' }), " component."] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2, block: true }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: openDocs, children: "Learn how" })] }));
+};
+exports.NoSchemaDefined = NoSchemaDefined;
+const NoDefaultProps = () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["The schema can not be edited because the", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "defaultProps" }), " prop in the", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: '<Composition>' }), " does not exist."] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["Fix the schema by adding a", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "defaultProps" }), " prop to your composition."] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2, block: true }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: openDocs, children: "Learn more" })] }));
+};
+exports.NoDefaultProps = NoDefaultProps;
+const InvalidDefaultProps = ({ zodValidationResult }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: errorContainer, children: [(0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["The schema can not be edited because the", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "defaultProps" }), " prop in the", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: '<Composition>' }), " is not valid:"] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ZodErrorMessages_1.ZodErrorMessages, { zodValidationResult: zodValidationResult, viewTab: "schema" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["Fix the schema by changing the", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "defaultProps" }), " prop in your composition so it does not give a type error."] })] }));
+};
+exports.InvalidDefaultProps = InvalidDefaultProps;
+const InvalidSchema = ({ zodValidationResult, reset }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: errorContainer, children: [(0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "The data does not satisfy the schema:" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ZodErrorMessages_1.ZodErrorMessages, { zodValidationResult: zodValidationResult, viewTab: "schema" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "Fix the schema using the JSON editor." }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["Alternatively, reset the data to the", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "defaultProps" }), " that you have defined."] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: reset, children: "Reset props" })] }));
+};
+exports.InvalidSchema = InvalidSchema;
+const TopLevelZodValue = ({ typeReceived }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["The top-level type of the schema must be a pure", ' ', (0, jsx_runtime_1.jsx)("code", { style: codeSnippet, children: "z.object" }), ". Instead got a schema of type", ' ', (0, jsx_runtime_1.jsx)("code", { style: codeSnippet, children: typeReceived })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "Fix the schema by changing the top-level Zod type to an object." }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2, block: true }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: openDocs, children: "Learn more" })] }));
+};
+exports.TopLevelZodValue = TopLevelZodValue;

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { JSONPath } from './zod-types';
+export declare const SchemaLabel: React.FC<{
+    jsonPath: JSONPath;
+    isDefaultValue: boolean;
+    onReset: () => void;
+    onSave: () => void;
+    onRemove: null | (() => void);
+    showSaveButton: boolean;
+    saving: boolean;
+    valid: boolean;
+    saveDisabledByParent: boolean;
+    suffix: string | null;
+}>;

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

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SchemaLabel = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../../../helpers/colors");
+const layout_1 = require("../../layout");
+const InlineRemoveButton_1 = require("../InlineRemoveButton");
+const get_schema_label_1 = require("./get-schema-label");
+const SchemaResetButton_1 = require("./SchemaResetButton");
+const SchemaSaveButton_1 = require("./SchemaSaveButton");
+const colors_2 = require("../../../helpers/colors");
+const compactStyles = {
+    fontSize: 15,
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+};
+const SchemaLabel = ({ jsonPath, isDefaultValue, onReset, onSave, showSaveButton, onRemove, saving, valid, saveDisabledByParent, suffix, }) => {
+    const disableSave = saving || !valid || saveDisabledByParent;
+    const labelStyle = (0, react_1.useMemo)(() => {
+        return {
+            fontFamily: 'monospace',
+            fontSize: 14,
+            color: valid ? colors_1.LIGHT_TEXT : colors_2.FAIL_COLOR,
+            lineHeight: '24px',
+        };
+    }, [valid]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: compactStyles, children: [(0, jsx_runtime_1.jsxs)("span", { style: labelStyle, children: [(0, get_schema_label_1.getSchemaLabel)(jsonPath), " ", suffix ? suffix : null] }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), isDefaultValue ? null : (0, jsx_runtime_1.jsx)(SchemaResetButton_1.SchemaResetButton, { onClick: onReset }), isDefaultValue ? null : showSaveButton ? ((0, jsx_runtime_1.jsx)(SchemaSaveButton_1.SchemaSaveButton, { onClick: onSave, disabled: disableSave })) : null, onRemove ? (0, jsx_runtime_1.jsx)(InlineRemoveButton_1.InlineRemoveButton, { onClick: onRemove }) : null] }));
+};
+exports.SchemaLabel = SchemaLabel;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const SchemaResetButton: React.FC<{
+    onClick: () => void;
+}>;

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SchemaResetButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const InlineAction_1 = require("../../InlineAction");
+const icon = {
+    height: 14,
+    color: 'currentColor',
+};
+const SchemaResetButton = ({ onClick }) => {
+    const renderAction = (0, react_1.useCallback)((color) => {
+        return ((0, jsx_runtime_1.jsx)("svg", { style: icon, viewBox: "0 0 512 512", children: (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M48.5 224H40c-13.3 0-24-10.7-24-24V72c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2L98.6 96.6c87.6-86.5 228.7-86.2 315.8 1c87.5 87.5 87.5 229.3 0 316.8s-229.3 87.5-316.8 0c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0c62.5 62.5 163.8 62.5 226.3 0s62.5-163.8 0-226.3c-62.2-62.2-162.7-62.5-225.3-1L185 183c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8H48.5z" }) }));
+    }, []);
+    return (0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick });
+};
+exports.SchemaResetButton = SchemaResetButton;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const SchemaSaveButton: React.FC<{
+    onClick: () => void;
+    disabled: boolean;
+}>;

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SchemaSaveButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const InlineAction_1 = require("../../InlineAction");
+const icon = {
+    height: 14,
+    color: 'currentColor',
+};
+const SchemaSaveButton = ({ onClick, disabled }) => {
+    const renderAction = (0, react_1.useCallback)((color) => {
+        return ((0, jsx_runtime_1.jsx)("svg", { style: icon, viewBox: "0 0 448 512", children: (0, jsx_runtime_1.jsx)("path", { fill: disabled ? 'grey' : color, d: "M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V173.3c0-17-6.7-33.3-18.7-45.3L352 50.7C340 38.7 323.7 32 306.7 32H64zm0 96c0-17.7 14.3-32 32-32H288c17.7 0 32 14.3 32 32v64c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V128zM224 288a64 64 0 1 1 0 128 64 64 0 1 1 0-128z" }) }));
+    }, [disabled]);
+    return ((0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick, disabled: disabled }));
+};
+exports.SchemaSaveButton = SchemaSaveButton;

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const SchemaSeparationLine: React.FC;

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SchemaSeparationLine = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const line = {
+    borderBottom: '1px solid rgba(255, 255, 255, 0.1)',
+};
+const SchemaSeparationLine = () => {
+    return (0, jsx_runtime_1.jsx)("div", { style: line });
+};
+exports.SchemaSeparationLine = SchemaSeparationLine;

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const SchemaVerticalGuide: React.FC<{
+    isRoot: boolean;
+    children: React.ReactNode;
+}>;

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SchemaVerticalGuide = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const SchemaVerticalGuide = ({ isRoot, children }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { style: isRoot
+            ? undefined
+            : {
+                borderLeft: '1px solid rgba(255, 255, 255, 0.1)',
+                marginLeft: 4,
+            }, children: children }));
+};
+exports.SchemaVerticalGuide = SchemaVerticalGuide;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { z } from 'zod';
+import type { JSONPath } from './zod-types';
+import type { UpdaterFunction } from './ZodSwitch';
+export declare const ZodArrayEditor: React.FC<{
+    schema: z.ZodTypeAny;
+    jsonPath: JSONPath;
+    value: unknown[];
+    defaultValue: unknown[];
+    setValue: UpdaterFunction<unknown[]>;
+    onSave: UpdaterFunction<unknown[]>;
+    showSaveButton: boolean;
+    onRemove: null | (() => void);
+    saving: boolean;
+    saveDisabledByParent: boolean;
+    mayPad: boolean;
+}>;

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

@@ -0,0 +1,83 @@
+"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.ZodArrayEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const get_zod_if_possible_1 = require("../../get-zod-if-possible");
+const create_zod_values_1 = require("./create-zod-values");
+const deep_equal_1 = require("./deep-equal");
+const local_state_1 = require("./local-state");
+const ZodArrayItemEditor_1 = require("./ZodArrayItemEditor");
+const Fieldset_1 = require("./Fieldset");
+const SchemaVerticalGuide_1 = require("./SchemaVerticalGuide");
+const layout_1 = require("../layout");
+const SchemaSeparationLine_1 = require("./SchemaSeparationLine");
+const InlineAction_1 = require("../../InlineAction");
+const plus_1 = require("../../../icons/plus");
+const ZodFieldValidation_1 = require("./ZodFieldValidation");
+const SchemaLabel_1 = require("./SchemaLabel");
+const ZodArrayEditor = ({ schema, jsonPath, setValue, defaultValue, value, onSave, showSaveButton, onRemove, saving, saveDisabledByParent, mayPad, }) => {
+    const { localValue, onChange, RevisionContextProvider, reset } = (0, local_state_1.useLocalState)({
+        value,
+        schema,
+        setValue,
+        defaultValue,
+    });
+    const def = schema._def;
+    const z = (0, get_zod_if_possible_1.useZodIfPossible)();
+    if (!z) {
+        throw new Error('expected zod');
+    }
+    const zodTypes = (0, get_zod_if_possible_1.useZodTypesIfPossible)();
+    const typeName = def.typeName;
+    if (typeName !== z.ZodFirstPartyTypeKind.ZodArray) {
+        throw new Error('expected object');
+    }
+    const onAdd = (0, react_1.useCallback)(() => {
+        onChange((oldV) => {
+            return [...oldV, (0, create_zod_values_1.createZodValues)(def.type, z, zodTypes)];
+        }, false, true);
+    }, [def.type, onChange, z, zodTypes]);
+    const isDefaultValue = (0, react_1.useMemo)(() => {
+        return (0, deep_equal_1.deepEqual)(localValue.value, defaultValue);
+    }, [defaultValue, localValue]);
+    const renderAddButton = (0, react_1.useCallback)((color) => {
+        return (0, jsx_runtime_1.jsx)(plus_1.Plus, { color: color, style: { height: 12 } });
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)(Fieldset_1.Fieldset, { shouldPad: mayPad, success: localValue.zodValidation.success, children: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { onReset: reset, isDefaultValue: isDefaultValue, jsonPath: jsonPath, onRemove: onRemove, suffix: ' [', onSave: () => {
+                    onSave(() => localValue.value, false, false);
+                }, saveDisabledByParent: saveDisabledByParent, saving: saving, showSaveButton: showSaveButton, valid: localValue.zodValidation.success }), (0, jsx_runtime_1.jsx)(RevisionContextProvider, { children: (0, jsx_runtime_1.jsx)(SchemaVerticalGuide_1.SchemaVerticalGuide, { isRoot: false, children: localValue.value.map((child, i) => {
+                        var _a;
+                        return (
+                        // eslint-disable-next-line react/no-array-index-key
+                        (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(ZodArrayItemEditor_1.ZodArrayItemEditor, { onChange: onChange, value: child, def: def, index: i, jsonPath: jsonPath, defaultValue: (_a = defaultValue[i]) !== null && _a !== void 0 ? _a : child, onSave: onSave, showSaveButton: showSaveButton, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }), i === localValue.value.length - 1 ? null : ((0, jsx_runtime_1.jsx)(SchemaSeparationLine_1.SchemaSeparationLine, {}))] }, `${i}${localValue.keyStabilityRevision}`));
+                    }) }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                    ...layout_1.fieldsetLabel,
+                    alignItems: 'center',
+                    display: 'flex',
+                }, children: [']', (0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: onAdd, renderAction: renderAddButton })] }), (0, jsx_runtime_1.jsx)(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, localValue: localValue })] }));
+};
+exports.ZodArrayEditor = ZodArrayEditor;

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import type { JSONPath } from './zod-types';
+import type { UpdaterFunction } from './ZodSwitch';
+export declare const ZodArrayItemEditor: React.FC<{
+    jsonPath: JSONPath;
+    onChange: UpdaterFunction<unknown[]>;
+    def: any;
+    index: number;
+    value: unknown;
+    defaultValue: unknown;
+    onSave: UpdaterFunction<unknown[]>;
+    showSaveButton: boolean;
+    saving: boolean;
+    saveDisabledByParent: boolean;
+    mayPad: boolean;
+}>;

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

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZodArrayItemEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ZodSwitch_1 = require("./ZodSwitch");
+const ZodArrayItemEditor = ({ def, onChange, jsonPath, index, value, defaultValue, onSave: onSaveObject, showSaveButton, saving, saveDisabledByParent, mayPad, }) => {
+    const onRemove = (0, react_1.useCallback)(() => {
+        onChange((oldV) => [...oldV.slice(0, index), ...oldV.slice(index + 1)], false, true);
+    }, [index, onChange]);
+    const setValue = (0, react_1.useCallback)((val) => {
+        onChange((oldV) => [
+            ...oldV.slice(0, index),
+            typeof val === 'function' ? val(oldV[index]) : val,
+            ...oldV.slice(index + 1),
+        ], false, false);
+    }, [index, onChange]);
+    const newJsonPath = (0, react_1.useMemo)(() => [...jsonPath, index], [index, jsonPath]);
+    const onSave = (0, react_1.useCallback)((updater) => {
+        onSaveObject((oldV) => [
+            ...oldV.slice(0, index),
+            updater(oldV[index]),
+            ...oldV.slice(index + 1),
+        ], false, false);
+    }, [index, onSaveObject]);
+    return ((0, jsx_runtime_1.jsx)(ZodSwitch_1.ZodSwitch, { jsonPath: newJsonPath, schema: def.type, value: value, setValue: setValue, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }));
+};
+exports.ZodArrayItemEditor = ZodArrayItemEditor;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { JSONPath } from './zod-types';
+import type { UpdaterFunction } from './ZodSwitch';
+import type { z } from 'zod';
+export declare const ZodBooleanEditor: React.FC<{
+    schema: z.ZodTypeAny;
+    jsonPath: JSONPath;
+    value: boolean;
+    setValue: UpdaterFunction<boolean>;
+    defaultValue: boolean;
+    onSave: UpdaterFunction<boolean>;
+    onRemove: null | (() => void);
+    showSaveButton: boolean;
+    saving: boolean;
+    saveDisabledByParent: boolean;
+    mayPad: boolean;
+}>;

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

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZodBooleanEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Checkbox_1 = require("../../Checkbox");
+const SchemaLabel_1 = require("./SchemaLabel");
+const Fieldset_1 = require("./Fieldset");
+const local_state_1 = require("./local-state");
+const fullWidth = {
+    width: '100%',
+};
+const ZodBooleanEditor = ({ schema, jsonPath, value, setValue, onSave, defaultValue, onRemove, showSaveButton, saving, saveDisabledByParent, mayPad, }) => {
+    const { localValue, onChange, reset } = (0, local_state_1.useLocalState)({
+        schema,
+        setValue,
+        value,
+        defaultValue,
+    });
+    const onToggle = (0, react_1.useCallback)((e) => {
+        onChange(() => e.target.checked, false, false);
+    }, [onChange]);
+    const save = (0, react_1.useCallback)(() => {
+        onSave(() => value, false, false);
+    }, [onSave, value]);
+    return ((0, jsx_runtime_1.jsxs)(Fieldset_1.Fieldset, { shouldPad: mayPad, success: localValue.zodValidation.success, children: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { isDefaultValue: localValue.value === defaultValue, jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, valid: true, saveDisabledByParent: saveDisabledByParent, suffix: null }), (0, jsx_runtime_1.jsx)("div", { style: fullWidth, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { name: jsonPath.join('.'), checked: localValue.value, onChange: onToggle, disabled: false }) })] }));
+};
+exports.ZodBooleanEditor = ZodBooleanEditor;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { z } from 'zod';
+import type { JSONPath } from './zod-types';
+import type { UpdaterFunction } from './ZodSwitch';
+export declare const ZodColorEditor: React.FC<{
+    schema: z.ZodTypeAny;
+    jsonPath: JSONPath;
+    value: string;
+    defaultValue: string;
+    setValue: UpdaterFunction<string>;
+    onSave: UpdaterFunction<string>;
+    onRemove: null | (() => void);
+    showSaveButton: boolean;
+    saving: boolean;
+    saveDisabledByParent: boolean;
+    mayPad: boolean;
+}>;