@remotion/studio 4.0.507 → 4.0.508

package/dist/components/RenderButton.js

@@ -390,17 +390,21 @@ const RenderButtonInner = ({ readOnlyStudio, size: controlSize = 'default', narr
             ];
         }
         return [
-            {
-                type: 'item',
-                id: 'server-render',
-                label: 'Server-side render',
-                value: 'server-render',
-                onClick: () => handleRenderTypeChange('server-render'),
-                keyHint: null,
-                leftItem: null,
-                subMenu: null,
-                quickSwitcherLabel: null,
-            },
+            ...(canServerRender
+                ? [
+                    {
+                        type: 'item',
+                        id: 'server-render',
+                        label: 'Server-side render',
+                        value: 'server-render',
+                        onClick: () => handleRenderTypeChange('server-render'),
+                        keyHint: null,
+                        leftItem: null,
+                        subMenu: null,
+                        quickSwitcherLabel: null,
+                    },
+                ]
+                : []),
             {
                 type: 'item',
                 id: 'client-render',
@@ -413,7 +417,7 @@ const RenderButtonInner = ({ readOnlyStudio, size: controlSize = 'default', narr
                 quickSwitcherLabel: null,
             },
         ];
-    }, [handleRenderTypeChange, readOnlyStudio]);
+    }, [canServerRender, handleRenderTypeChange, readOnlyStudio]);
     const spaceToBottom = (0, react_1.useMemo)(() => {
         const margin = 10;
         if (size && dropdownOpened) {

package/dist/components/RenderModal/GuiRenderStatus.js

@@ -29,12 +29,29 @@ const right = {
 const BundlingProgress = ({ progress, doneIn }) => {
     return (jsx_runtime_1.jsxs("div", { style: progressItem, children: [progress === 1 ? (jsx_runtime_1.jsx(SuccessIcon_1.SuccessIcon, {})) : (jsx_runtime_1.jsx(CircularProgress_1.CircularProgress, { progress: progress })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: progress === 1 ? 'Bundled' : `Bundling ${progress * 100}%` }), doneIn ? jsx_runtime_1.jsxs("div", { style: right, children: [doneIn, "ms"] }) : null] }));
 };
-const BrowserSetupProgress = ({ progress, doneIn, startedBundling, alreadyAvailable }) => {
-    return (jsx_runtime_1.jsxs("div", { style: progressItem, children: [progress === 1 || alreadyAvailable ? (jsx_runtime_1.jsx(SuccessIcon_1.SuccessIcon, {})) : (jsx_runtime_1.jsx(CircularProgress_1.CircularProgress, { progress: progress })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: alreadyAvailable && startedBundling
-                    ? 'Headless browser already available'
-                    : progress === 1
-                        ? 'Downloaded Headless Shell'
-                        : `Downloading Headless Shell ${Math.round(progress * 100)}%` }), doneIn ? jsx_runtime_1.jsxs("div", { style: right, children: [doneIn, "ms"] }) : null] }));
+const failIconStyle = {
+    width: 16,
+    height: 16,
+};
+const FailIcon = () => {
+    return (jsx_runtime_1.jsx("svg", { style: failIconStyle, viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: colors_1.FAIL_COLOR, d: "M0 160V352L160 512H352L512 352V160L352 0H160L0 160zm353.9 32l-17 17-47 47 47 47 17 17L320 353.9l-17-17-47-47-47 47-17 17L158.1 320l17-17 47-47-47-47-17-17L192 158.1l17 17 47 47 47-47 17-17L353.9 192z" }) }));
+};
+const BrowserSetupProgress = ({ progress, doneIn, startedBundling, alreadyAvailable, error }) => {
+    if (error) {
+        return (jsx_runtime_1.jsxs("div", { style: progressItem, children: [
+                jsx_runtime_1.jsx(FailIcon, {}), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: "Failed to download Headless Shell" })
+            ] }));
+    }
+    // Before the first download callback or the bundling phase, we don't know
+    // yet whether the browser is available - don't show a success state.
+    const stillChecking = alreadyAvailable && progress === 0 && !startedBundling;
+    return (jsx_runtime_1.jsxs("div", { style: progressItem, children: [stillChecking ? (jsx_runtime_1.jsx(CircularProgress_1.CircularProgress, { progress: 0 })) : progress === 1 || alreadyAvailable ? (jsx_runtime_1.jsx(SuccessIcon_1.SuccessIcon, {})) : (jsx_runtime_1.jsx(CircularProgress_1.CircularProgress, { progress: progress })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: stillChecking
+                    ? 'Checking for Headless Shell'
+                    : alreadyAvailable && startedBundling
+                        ? 'Headless browser already available'
+                        : progress === 1
+                            ? 'Downloaded Headless Shell'
+                            : `Downloading Headless Shell ${Math.round(progress * 100)}%` }), doneIn ? jsx_runtime_1.jsxs("div", { style: right, children: [doneIn, "ms"] }) : null] }));
 };
 const RenderingProgress = ({ progress }) => {
     return (jsx_runtime_1.jsxs("div", { style: progressItem, children: [progress.frames === progress.totalFrames ? (jsx_runtime_1.jsx(SuccessIcon_1.SuccessIcon, {})) : (jsx_runtime_1.jsx(CircularProgress_1.CircularProgress, { progress: progress.frames / progress.totalFrames })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: progress.doneIn

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

@@ -2,4 +2,5 @@ import React from 'react';
 export declare const InfoBubble: React.FC<{
     readonly title: string;
     readonly children: React.ReactNode;
+    readonly horizontalAlignment?: 'left' | 'right';
 }>;

package/dist/components/RenderModal/InfoBubble.js

@@ -23,7 +23,7 @@ const container = {
     fontSize: 14,
     verticalAlign: 'text-bottom',
 };
-const InfoBubble = ({ title, children }) => {
+const InfoBubble = ({ title, children, horizontalAlignment = 'left' }) => {
     const [hovered, setIsHovered] = (0, react_1.useState)(false);
     const [opened, setOpened] = (0, react_1.useState)(false);
     const ref = (0, react_1.useRef)(null);
@@ -95,9 +95,11 @@ const InfoBubble = ({ title, children }) => {
                     position: 'fixed',
                     bottom: size.windowSize.height - size.top,
                 }),
-            left: size.left,
+            ...(horizontalAlignment === 'left'
+                ? { left: size.left }
+                : { right: size.windowSize.width - (size.left + size.width) }),
         };
-    }, [layout, opened, size]);
+    }, [horizontalAlignment, layout, opened, size]);
     const style = (0, react_1.useMemo)(() => {
         return {
             ...container,
@@ -112,7 +114,7 @@ const InfoBubble = ({ title, children }) => {
     }, []);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx("button", { ref: ref, tabIndex: tabIndex, style: style, title: title, type: "button", children: jsx_runtime_1.jsx("svg", { style: icon, viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: hovered ? colors_1.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(jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: jsx_runtime_1.jsx("div", { style: portalStyle, children: jsx_runtime_1.jsx(InfoTooltip_1.InfoTooltip, { backgroundColor: colors_1.INPUT_BACKGROUND, arrowDirection: layout, children: children }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
+                ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: jsx_runtime_1.jsx("div", { style: portalStyle, children: jsx_runtime_1.jsx(InfoTooltip_1.InfoTooltip, { backgroundColor: colors_1.INPUT_BACKGROUND, arrowDirection: layout, horizontalAlignment: horizontalAlignment, children: children }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));
 };
 exports.InfoBubble = InfoBubble;

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

@@ -3,4 +3,5 @@ export declare const InfoTooltip: React.FC<{
     readonly children: React.ReactNode;
     readonly arrowDirection: 'up' | 'down';
     readonly backgroundColor: string;
+    readonly horizontalAlignment: 'left' | 'right';
 }>;

package/dist/components/RenderModal/InfoTooltip.js

@@ -10,17 +10,8 @@ const arrow = {
     height: 7,
     display: 'block',
     overflow: 'visible',
-    marginLeft: 7,
 };
-const arrowUp = {
-    ...arrow,
-    transform: `translateY(1px)`,
-};
-const arrowDown = {
-    ...arrow,
-    marginTop: -1,
-};
-const InfoTooltip = ({ children, arrowDirection, backgroundColor }) => {
+const InfoTooltip = ({ children, arrowDirection, backgroundColor, horizontalAlignment }) => {
     const container = (0, react_1.useMemo)(() => {
         return {
             boxShadow: arrowDirection === 'down' ? styles_1.SHADOW_TOWARDS_TOP : styles_1.SHADOW_TOWARDS_BOTTOM,
@@ -32,11 +23,20 @@ const InfoTooltip = ({ children, arrowDirection, backgroundColor }) => {
             borderRadius: '4px',
         };
     }, [arrowDirection, backgroundColor]);
+    const arrowStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...arrow,
+            ...(horizontalAlignment === 'left' ? { marginLeft: 7 } : { marginRight: 7 }),
+            ...(arrowDirection === 'up'
+                ? { transform: `translateY(1px)` }
+                : { marginTop: -1 }),
+        };
+    }, [arrowDirection, horizontalAlignment]);
     return (jsx_runtime_1.jsxs("div", { style: {
             display: 'flex',
             flexDirection: arrowDirection === 'up' ? 'column-reverse' : 'column',
-            alignItems: 'flex-start',
+            alignItems: horizontalAlignment === 'left' ? 'flex-start' : 'flex-end',
         }, children: [
-            jsx_runtime_1.jsx("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: children }), arrowDirection === 'down' ? (jsx_runtime_1.jsx("svg", { viewBox: "0 0 14 7", style: arrowDown, children: jsx_runtime_1.jsx("path", { d: `M 14 0 L 7 7 L 0 0`, fill: backgroundColor, strokeLinecap: "butt", stroke: colors_1.BLACK_HEX, strokeWidth: 0.5 }) })) : null, arrowDirection === 'up' ? (jsx_runtime_1.jsx("svg", { viewBox: "0 0 14 7", style: arrowUp, children: jsx_runtime_1.jsx("path", { d: `M 0 7 L 7 0 L 14 7`, fill: backgroundColor, strokeLinecap: "butt", stroke: colors_1.BLACK_HEX, strokeWidth: 0.5 }) })) : null] }));
+            jsx_runtime_1.jsx("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: children }), arrowDirection === 'down' ? (jsx_runtime_1.jsx("svg", { viewBox: "0 0 14 7", style: arrowStyle, children: jsx_runtime_1.jsx("path", { d: `M 14 0 L 7 7 L 0 0`, fill: backgroundColor, strokeLinecap: "butt", stroke: colors_1.BLACK_HEX, strokeWidth: 0.5 }) })) : null, arrowDirection === 'up' ? (jsx_runtime_1.jsx("svg", { viewBox: "0 0 14 7", style: arrowStyle, children: jsx_runtime_1.jsx("path", { d: `M 0 7 L 7 0 L 14 7`, fill: backgroundColor, strokeLinecap: "butt", stroke: colors_1.BLACK_HEX, strokeWidth: 0.5 }) })) : null] }));
 };
 exports.InfoTooltip = InfoTooltip;

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

@@ -1,9 +1,14 @@
 import React from 'react';
 import type { JSONPath } from './zod-types';
+export declare const SchemaDescriptionOverrideContext: React.Context<{
+    readonly jsonPath: JSONPath;
+    readonly description: string;
+} | null>;
 export declare const SchemaLabel: React.FC<{
     readonly jsonPath: JSONPath;
     readonly onRemove: null | (() => void);
     readonly valid: boolean;
     readonly suffix: string | null;
     readonly handleClick: null | (() => void);
+    readonly description: string | null;
 }>;

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

@@ -1,13 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SchemaLabel = void 0;
+exports.SchemaLabel = exports.SchemaDescriptionOverrideContext = 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 InfoBubble_1 = require("../InfoBubble");
 const InlineRemoveButton_1 = require("../InlineRemoveButton");
 const get_schema_label_1 = require("./get-schema-label");
 const scroll_to_default_props_path_1 = require("./scroll-to-default-props-path");
+exports.SchemaDescriptionOverrideContext = (0, react_1.createContext)(null);
 const compactStyles = {
     fontSize: 12,
     color: colors_1.LIGHT_TEXT,
@@ -17,8 +19,19 @@ const compactStyles = {
     alignItems: 'center',
     flex: 1,
 };
-const SchemaLabel = ({ jsonPath, onRemove, valid, suffix, handleClick }) => {
+const descriptionStyle = {
+    fontSize: 12,
+    maxWidth: 360,
+    overflowWrap: 'anywhere',
+    padding: 10,
+};
+const SchemaLabel = ({ jsonPath, onRemove, valid, suffix, handleClick, description }) => {
     const [clickableButtonHovered, setClickableButtonHovered] = (0, react_1.useState)(false);
+    const descriptionOverride = (0, react_1.useContext)(exports.SchemaDescriptionOverrideContext);
+    const displayedDescription = (descriptionOverride === null || descriptionOverride === void 0 ? void 0 : descriptionOverride.jsonPath.length) === jsonPath.length &&
+        descriptionOverride.jsonPath.every((part, index) => part === jsonPath[index])
+        ? descriptionOverride.description
+        : description;
     const labelStyle = (0, react_1.useMemo)(() => {
         return {
             fontFamily: 'monospace',
@@ -36,6 +49,6 @@ const SchemaLabel = ({ jsonPath, onRemove, valid, suffix, handleClick }) => {
     const labelContent = (jsx_runtime_1.jsxs("span", { style: labelStyle, children: [(0, get_schema_label_1.getSchemaLabel)(jsonPath), " ", suffix ? suffix : null] }));
     return (jsx_runtime_1.jsxs("div", { style: compactStyles, className: scroll_to_default_props_path_1.DEFAULT_PROPS_PATH_CLASSNAME, "data-json-path": jsonPath.join('.'), children: [handleClick ? (
             // Minus the padding that a button has (user agent padding-line-start)
-            jsx_runtime_1.jsx("button", { onPointerEnter: onClickablePointerEnter, onPointerLeave: onClickablePointerLeave, type: "button", onClick: handleClick, style: { border: 'none', padding: 0 }, children: labelContent })) : (labelContent), jsx_runtime_1.jsx(layout_1.Flex, {}), onRemove ? jsx_runtime_1.jsx(InlineRemoveButton_1.InlineRemoveButton, { onClick: onRemove }) : null] }));
+            jsx_runtime_1.jsx("button", { onPointerEnter: onClickablePointerEnter, onPointerLeave: onClickablePointerLeave, type: "button", onClick: handleClick, style: { border: 'none', padding: 0 }, children: labelContent })) : (labelContent), displayedDescription ? (jsx_runtime_1.jsx(InfoBubble_1.InfoBubble, { title: "Field description", horizontalAlignment: "right", children: jsx_runtime_1.jsx("div", { style: descriptionStyle, children: displayedDescription }) })) : null, jsx_runtime_1.jsx(layout_1.Flex, {}), onRemove ? jsx_runtime_1.jsx(InlineRemoveButton_1.InlineRemoveButton, { onClick: onRemove }) : null] }));
 };
 exports.SchemaLabel = SchemaLabel;

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

@@ -63,7 +63,7 @@ const ZodArrayEditor = ({ schema, jsonPath, setValue, value, onRemove, mayPad })
             jsx_runtime_1.jsx("div", { style: {
                     display: 'flex',
                     flexDirection: 'row',
-                }, children: jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { jsonPath: jsonPath, onRemove: onRemove, suffix: suffix, valid: zodValidation.success, handleClick: () => setExpanded(!expanded) }) }), expanded ? (jsx_runtime_1.jsxs(SchemaVerticalGuide_1.SchemaVerticalGuide, { isRoot: false, children: [value.map((child, i) => {
+                }, children: jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { jsonPath: jsonPath, onRemove: onRemove, suffix: suffix, description: (0, zod_schema_type_1.getUserFacingDescription)(schema), valid: zodValidation.success, handleClick: () => setExpanded(!expanded) }) }), expanded ? (jsx_runtime_1.jsxs(SchemaVerticalGuide_1.SchemaVerticalGuide, { isRoot: false, children: [value.map((child, i) => {
                         return (
                         // eslint-disable-next-line react/no-array-index-key
                         jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { type AnyZodSchema } from './zod-schema-type';
 import type { JSONPath } from './zod-types';
 import type { UpdaterFunction } from './ZodSwitch';
 export declare const ZodBooleanEditor: React.FC<{
@@ -7,4 +8,5 @@ export declare const ZodBooleanEditor: React.FC<{
     readonly setValue: UpdaterFunction<boolean>;
     readonly onRemove: null | (() => void);
     readonly mayPad: boolean;
+    readonly schema: AnyZodSchema;
 }>;

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

@@ -6,15 +6,16 @@ const react_1 = require("react");
 const Checkbox_1 = require("../../Checkbox");
 const Fieldset_1 = require("./Fieldset");
 const SchemaLabel_1 = require("./SchemaLabel");
+const zod_schema_type_1 = require("./zod-schema-type");
 const fullWidth = {
     width: '100%',
 };
-const ZodBooleanEditor = ({ jsonPath, value, setValue, onRemove, mayPad }) => {
+const ZodBooleanEditor = ({ jsonPath, value, setValue, onRemove, mayPad, schema }) => {
     const onToggle = (0, react_1.useCallback)((e) => {
         setValue(() => e.target.checked, { shouldSave: true });
     }, [setValue]);
     return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: mayPad, children: [
-            jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: jsonPath, onRemove: onRemove, valid: true, suffix: null }), jsx_runtime_1.jsx("div", { style: fullWidth, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { name: jsonPath.join('.'), checked: value, onChange: onToggle, disabled: false }) })
+            jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: jsonPath, onRemove: onRemove, valid: true, suffix: null, description: (0, zod_schema_type_1.getUserFacingDescription)(schema) }), jsx_runtime_1.jsx("div", { style: fullWidth, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { name: jsonPath.join('.'), checked: value, onChange: onToggle, disabled: false }) })
         ] }));
 };
 exports.ZodBooleanEditor = ZodBooleanEditor;

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

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

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

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

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

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

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

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

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

@@ -78,7 +78,7 @@ const ZodMatrixEditor = ({ schema, jsonPath, setValue, value, onRemove, mayPad }
         }, []);
     }, [value, dimensions]);
     return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: mayPad, children: [
-            jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { jsonPath: jsonPath, onRemove: onRemove, suffix: suffix, valid: zodValidation.success, handleClick: () => setExpanded(!expanded) }), expanded ? (jsx_runtime_1.jsxs(SchemaVerticalGuide_1.SchemaVerticalGuide, { isRoot: false, children: [chunkedItems.map((row, rowIndex) => {
+            jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { jsonPath: jsonPath, onRemove: onRemove, suffix: suffix, description: (0, zod_schema_type_1.getUserFacingDescription)(schema), valid: zodValidation.success, handleClick: () => setExpanded(!expanded) }), expanded ? (jsx_runtime_1.jsxs(SchemaVerticalGuide_1.SchemaVerticalGuide, { isRoot: false, children: [chunkedItems.map((row, rowIndex) => {
                         return (jsx_runtime_1.jsx(react_1.default.Fragment
                         // eslint-disable-next-line react/no-array-index-key
                         , { children: jsx_runtime_1.jsx("div", { style: rowStyle, children: row.map((item, _index) => {

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

@@ -21,7 +21,7 @@ const wideEmptyLabel = {
 };
 const ZonNonEditableValue = ({ jsonPath, label, mayPad }) => {
     return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: mayPad, children: [
-            jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: jsonPath, onRemove: null, valid: true, suffix: null }), jsx_runtime_1.jsx("div", { style: fullWidth, children: jsx_runtime_1.jsx("em", { style: wideEmptyLabel, children: label }) })
+            jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: jsonPath, onRemove: null, valid: true, suffix: null, description: null }), jsx_runtime_1.jsx("div", { style: fullWidth, children: jsx_runtime_1.jsx("em", { style: wideEmptyLabel, children: label }) })
         ] }));
 };
 exports.ZonNonEditableValue = ZonNonEditableValue;

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

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

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

@@ -60,7 +60,7 @@ const ZodObjectEditor = ({ schema, jsonPath, setValue, value, onRemove, mayPad,
         return expanded ? ' {' : ' {...}';
     }, [expanded]);
     const zodValidation = (0, react_2.useMemo)(() => (0, zod_schema_type_1.zodSafeParse)(schema, value), [schema, value]);
-    return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: !isRoot && mayPad, children: [isRoot ? null : (jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { jsonPath: jsonPath, onRemove: onRemove, suffix: suffix, valid: zodValidation.success, handleClick: () => setExpanded(!expanded) })), expanded ? (jsx_runtime_1.jsx(SchemaVerticalGuide_1.SchemaVerticalGuide, { isRoot: isRoot, children: keys.map((key) => {
+    return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: !isRoot && mayPad, children: [isRoot ? null : (jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { jsonPath: jsonPath, onRemove: onRemove, suffix: suffix, description: (0, zod_schema_type_1.getUserFacingDescription)(schema), valid: zodValidation.success, handleClick: () => setExpanded(!expanded) })), expanded ? (jsx_runtime_1.jsx(SchemaVerticalGuide_1.SchemaVerticalGuide, { isRoot: isRoot, children: keys.map((key) => {
                     if (discriminatedUnionReplacement &&
                         key === discriminatedUnionReplacement.discriminator) {
                         return discriminatedUnionReplacement.markup;

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

@@ -25,6 +25,7 @@ const checkBoxWrapper = {
     marginTop: '5px',
 };
 const ZodOrNullishEditor = ({ jsonPath, schema, setValue, value, onRemove, nullishValue, mayPad, innerSchema, }) => {
+    var _a;
     const z = (0, get_zod_if_possible_1.useZodIfPossible)();
     if (!z) {
         throw new Error('expected zod');
@@ -32,13 +33,17 @@ const ZodOrNullishEditor = ({ jsonPath, schema, setValue, value, onRemove, nulli
     const zodTypes = (0, get_zod_if_possible_1.useZodTypesIfPossible)();
     const isChecked = value === nullishValue;
     const zodValidation = (0, react_1.useMemo)(() => (0, zod_schema_type_1.zodSafeParse)(schema, value), [schema, value]);
+    const description = (0, zod_schema_type_1.getUserFacingDescription)(schema);
+    const descriptionOverride = (0, react_1.useMemo)(() => {
+        return description ? { jsonPath, description } : null;
+    }, [description, jsonPath]);
     const onCheckBoxChange = (0, react_2.useCallback)((e) => {
         const val = e.target.checked
             ? nullishValue
             : (0, create_zod_values_1.createZodValues)(innerSchema, z, zodTypes);
         setValue(() => val, { shouldSave: true });
     }, [innerSchema, nullishValue, setValue, z, zodTypes]);
-    return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: mayPad, children: [value === nullishValue ? (jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: jsonPath, onRemove: onRemove, valid: zodValidation.success, suffix: null })) : (jsx_runtime_1.jsx(ZodSwitch_1.ZodSwitch, { value: value, setValue: setValue, jsonPath: jsonPath, schema: innerSchema, onRemove: onRemove, mayPad: false })), jsx_runtime_1.jsxs("label", { style: checkBoxWrapper, children: [
+    return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: mayPad, children: [value === nullishValue ? (jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: jsonPath, onRemove: onRemove, valid: zodValidation.success, suffix: null, description: (_a = (0, zod_schema_type_1.getUserFacingDescription)(schema)) !== null && _a !== void 0 ? _a : (0, zod_schema_type_1.getUserFacingDescription)(innerSchema) })) : descriptionOverride ? (jsx_runtime_1.jsx(SchemaLabel_1.SchemaDescriptionOverrideContext.Provider, { value: descriptionOverride, children: jsx_runtime_1.jsx(ZodSwitch_1.ZodSwitch, { value: value, setValue: setValue, jsonPath: jsonPath, schema: innerSchema, onRemove: onRemove, mayPad: false }) })) : (jsx_runtime_1.jsx(ZodSwitch_1.ZodSwitch, { value: value, setValue: setValue, jsonPath: jsonPath, schema: innerSchema, onRemove: onRemove, mayPad: false })), jsx_runtime_1.jsxs("label", { style: checkBoxWrapper, children: [
                     jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: isChecked, onChange: onCheckBoxChange, disabled: false, name: jsonPath.join('.') }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsxs("code", { style: labelStyle, children: ["<", String(nullishValue), ">"] })
                 ] })
         ] }));

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

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

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

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

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

@@ -52,7 +52,7 @@ const ZodSwitch = ({ schema, jsonPath, value, setValue, onRemove, mayPad }) => {
         return (jsx_runtime_1.jsx(ZodNumberEditor_1.ZodNumberEditor, { value: value, setValue: setValue, jsonPath: jsonPath, schema: schema, onRemove: onRemove, mayPad: mayPad }));
     }
     if (typeName === 'boolean') {
-        return (jsx_runtime_1.jsx(ZodBooleanEditor_1.ZodBooleanEditor, { value: value, setValue: setValue, jsonPath: jsonPath, onRemove: onRemove, mayPad: mayPad }));
+        return (jsx_runtime_1.jsx(ZodBooleanEditor_1.ZodBooleanEditor, { value: value, setValue: setValue, jsonPath: jsonPath, onRemove: onRemove, mayPad: mayPad, schema: schema }));
     }
     if (typeName === 'undefined') {
         return (jsx_runtime_1.jsx(ZodNonEditableValue_1.ZonNonEditableValue, { jsonPath: jsonPath, label: 'undefined', mayPad: mayPad }));

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

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

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

@@ -63,7 +63,7 @@ const ZodTupleEditor = ({ schema, jsonPath, setValue, value, onRemove, mayPad })
             jsx_runtime_1.jsx("div", { style: {
                     display: 'flex',
                     flexDirection: 'row',
-                }, children: jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { jsonPath: jsonPath, onRemove: onRemove, suffix: suffix, valid: zodValidation.success, handleClick: () => setExpanded(!expanded) }) }), expanded ? (jsx_runtime_1.jsxs(SchemaVerticalGuide_1.SchemaVerticalGuide, { isRoot: false, children: [value.map((child, i) => {
+                }, children: jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { jsonPath: jsonPath, onRemove: onRemove, suffix: suffix, description: (0, zod_schema_type_1.getUserFacingDescription)(schema), valid: zodValidation.success, handleClick: () => setExpanded(!expanded) }) }), expanded ? (jsx_runtime_1.jsxs(SchemaVerticalGuide_1.SchemaVerticalGuide, { isRoot: false, children: [value.map((child, i) => {
                         return (
                         // eslint-disable-next-line react/no-array-index-key
                         jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [

package/dist/components/RenderModal/SchemaEditor/zod-schema-type.d.ts

@@ -63,6 +63,7 @@ export declare const getZodSchemaType: (schema: AnyZodSchema) => ZodSchemaType;
  * v4: schema.description
  */
 export declare const getZodSchemaDescription: (schema: AnyZodSchema) => string | undefined;
+export declare const getUserFacingDescription: (schema: AnyZodSchema) => string | null;
 /**
  * Get the shape of an object schema.
  * v3: _def.shape() (function)

package/dist/components/RenderModal/SchemaEditor/zod-schema-type.js

@@ -9,7 +9,7 @@
  * and accessor helpers that abstract v3/v4 `_def` property differences.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getBrandedInner = exports.getPipelineInput = exports.getPipelineOutput = exports.getRecordKeyType = exports.getRecordValueType = exports.getTupleItems = exports.getIntersectionSchemas = exports.getDiscriminatedOption = exports.getDiscriminatedOptionKeys = exports.getDiscriminator = exports.getDefaultValue = exports.getUnionOptions = exports.getFirstEnumValue = exports.getEnumValues = exports.getLiteralValue = exports.getEffectsInner = exports.getInnerType = exports.getArrayElement = exports.getObjectShape = exports.getZodSchemaDescription = exports.getZodSchemaType = exports.isZodV3Schema = exports.getZodDef = exports.zodSafeParse = void 0;
+exports.getBrandedInner = exports.getPipelineInput = exports.getPipelineOutput = exports.getRecordKeyType = exports.getRecordValueType = exports.getTupleItems = exports.getIntersectionSchemas = exports.getDiscriminatedOption = exports.getDiscriminatedOptionKeys = exports.getDiscriminator = exports.getDefaultValue = exports.getUnionOptions = exports.getFirstEnumValue = exports.getEnumValues = exports.getLiteralValue = exports.getEffectsInner = exports.getInnerType = exports.getArrayElement = exports.getObjectShape = exports.getUserFacingDescription = exports.getZodSchemaDescription = exports.getZodSchemaType = exports.isZodV3Schema = exports.getZodDef = exports.zodSafeParse = void 0;
 /**
  * Call safeParse on any Zod schema (v3 or v4).
  * All Zod schemas have safeParse at runtime, but some v4 internal types
@@ -106,6 +106,17 @@ const getZodSchemaDescription = (schema) => {
     return schema.description;
 };
 exports.getZodSchemaDescription = getZodSchemaDescription;
+// Branded types (zColor(), zTextarea(), zMatrix()) store their marker in the
+// description, so those must not surface as user-facing text.
+const REMOTION_BRAND_PREFIX = '__remotion-';
+const getUserFacingDescription = (schema) => {
+    const description = (0, exports.getZodSchemaDescription)(schema);
+    if (!description || description.startsWith(REMOTION_BRAND_PREFIX)) {
+        return null;
+    }
+    return description;
+};
+exports.getUserFacingDescription = getUserFacingDescription;
 /**
  * Get the shape of an object schema.
  * v3: _def.shape() (function)

package/dist/components/SelectedOutlineCanvasRotation.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { SelectedOutline } from './selected-outline-geometry';
+import { type SelectedOutlineLayoutTarget, type SelectedOutlineTarget } from './selected-outline-types';
+export declare const SelectedOutlineCanvasRotation: React.FC<{
+    readonly getLatestTargetByKey: (key: string) => SelectedOutlineTarget | undefined;
+    readonly layoutTarget: SelectedOutlineLayoutTarget;
+    readonly onDraggingChange: (dragging: boolean) => void;
+    readonly outline: SelectedOutline;
+}>;