@remotion/cli 4.0.0-alpha.4 → 4.0.0-alpha5

package/dist/editor/components/NewComposition/CancelButton.js

@@ -9,6 +9,9 @@ const style = {
     backgroundColor: 'transparent',
     color: 'white',
     cursor: 'pointer',
+    display: 'inline-flex',
+    justifyContent: 'center',
+    alignItems: 'center',
 };
 const CancelButton = ({ onPress, ...props }) => {
     const { tabIndex } = (0, z_index_1.useZIndex)();

package/dist/editor/components/NewComposition/ComboBox.d.ts

@@ -8,7 +8,7 @@ export declare type SubMenu = {
     leaveLeftSpace: boolean;
     items: ComboboxValue[];
 };
-declare type SelectionItem = {
+export declare type SelectionItem = {
     type: 'item';
     id: string;
     label: React.ReactNode;
@@ -17,6 +17,7 @@ declare type SelectionItem = {
     keyHint: string | null;
     leftItem: React.ReactNode;
     subMenu: SubMenu | null;
+    quickSwitcherLabel: string | null;
 };
 export declare type ComboboxValue = DividerItem | SelectionItem;
 export declare const Combobox: React.FC<{

package/dist/editor/components/NewComposition/ComboBox.js

@@ -13,6 +13,7 @@ const noop_1 = require("../../helpers/noop");
 const caret_1 = require("../../icons/caret");
 const z_index_1 = require("../../state/z-index");
 const layout_1 = require("../layout");
+const is_menu_item_1 = require("../Menu/is-menu-item");
 const portals_1 = require("../Menu/portals");
 const styles_1 = require("../Menu/styles");
 const MenuContent_1 = require("./MenuContent");
@@ -20,9 +21,16 @@ const container = {
     padding: '8px 10px',
     display: 'inline-block',
     backgroundColor: colors_1.INPUT_BACKGROUND,
-    fontSize: 14,
     borderWidth: 1,
     borderStyle: 'solid',
+    maxWidth: '100%',
+};
+const label = {
+    flex: 1,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    fontSize: 14,
+    textAlign: 'left',
 };
 const Combobox = ({ values, selectedId, style: customStyle, title }) => {
     const [hovered, setIsHovered] = (0, react_1.useState)(false);
@@ -33,6 +41,7 @@ const Combobox = ({ values, selectedId, style: customStyle, title }) => {
         triggerOnWindowResize: true,
         shouldApplyCssTransforms: true,
     });
+    const refresh = size === null || size === void 0 ? void 0 : size.refresh;
     const onHide = (0, react_1.useCallback)(() => {
         setOpened(false);
     }, []);
@@ -43,28 +52,57 @@ const Combobox = ({ values, selectedId, style: customStyle, title }) => {
         }
         const onMouseEnter = () => setIsHovered(true);
         const onMouseLeave = () => setIsHovered(false);
+        const onPointerDown = () => {
+            return setOpened((o) => {
+                if (!o) {
+                    refresh === null || refresh === void 0 ? void 0 : refresh();
+                }
+                return !o;
+            });
+        };
         const onClick = (e) => {
             e.stopPropagation();
-            return setOpened((o) => !o);
+            const isKeyboardInitiated = e.detail === 0;
+            if (!isKeyboardInitiated) {
+                return;
+            }
+            return setOpened((o) => {
+                if (!o) {
+                    refresh === null || refresh === void 0 ? void 0 : refresh();
+                    window.addEventListener('pointerup', (evt) => {
+                        if (!(0, is_menu_item_1.isMenuItem)(evt.target)) {
+                            setOpened(false);
+                        }
+                    }, {
+                        once: true,
+                    });
+                }
+                return !o;
+            });
         };
         current.addEventListener('mouseenter', onMouseEnter);
         current.addEventListener('mouseleave', onMouseLeave);
+        current.addEventListener('pointerdown', onPointerDown);
         current.addEventListener('click', onClick);
         return () => {
             current.removeEventListener('mouseenter', onMouseEnter);
             current.removeEventListener('mouseleave', onMouseLeave);
+            current.removeEventListener('pointerdown', onPointerDown);
             current.removeEventListener('click', onClick);
         };
-    }, []);
+    }, [refresh]);
     const portalStyle = (0, react_1.useMemo)(() => {
         if (!opened || !size) {
             return null;
         }
         const spaceToBottom = size.windowSize.height - (size.top + size.height);
         const spaceToTop = size.top;
-        const layout = spaceToTop > spaceToBottom ? 'bottom' : 'top';
+        const spaceToRight = size.windowSize.width - (size.left + size.width);
+        const minSpaceToRightRequired = styles_1.MAX_MENU_WIDTH;
+        const verticalLayout = spaceToTop > spaceToBottom ? 'bottom' : 'top';
+        const horizontalLayout = spaceToRight >= minSpaceToRightRequired ? 'left' : 'right';
         return {
-            ...(layout === 'top'
+            ...(verticalLayout === 'top'
                 ? {
                     ...styles_1.menuContainerTowardsBottom,
                     top: size.top + size.height,
@@ -73,7 +111,13 @@ const Combobox = ({ values, selectedId, style: customStyle, title }) => {
                     ...styles_1.menuContainerTowardsTop,
                     bottom: size.windowSize.height - size.top,
                 }),
-            left: size.left,
+            ...(horizontalLayout === 'left'
+                ? {
+                    left: size.left,
+                }
+                : {
+                    right: size.windowSize.width - size.left - size.width,
+                }),
         };
     }, [opened, size]);
     const selected = values.find((v) => v.id === selectedId);
@@ -93,8 +137,8 @@ const Combobox = ({ values, selectedId, style: customStyle, title }) => {
                     : colors_1.INPUT_BORDER_COLOR_UNHOVERED,
         };
     }, [customStyle, hovered, opened]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { ref: ref, title: title, tabIndex: tabIndex, type: "button", style: style, children: [selected.label, " ", (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), " ", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), " ", (0, jsx_runtime_1.jsx)(caret_1.CaretDown, {})] }), 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)(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: values, onHide: onHide, leaveLeftSpace: true, preselectIndex: values.findIndex((v) => v.id === selected.id), topItemCanBeUnselected: false }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { ref: ref, title: title, tabIndex: tabIndex, type: "button", style: style, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, children: [(0, jsx_runtime_1.jsx)("div", { title: typeof selected.label === 'string' ? selected.label : undefined, style: label, children: selected === null || selected === void 0 ? void 0 : selected.label }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), " ", (0, jsx_runtime_1.jsx)(caret_1.CaretDown, {})] }), portalStyle
+                ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)("div", { style: styles_1.fullScreenOverlay, children: (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)(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: values, onHide: onHide, leaveLeftSpace: true, preselectIndex: values.findIndex((v) => v.id === selected.id), topItemCanBeUnselected: false }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));
 };
 exports.Combobox = Combobox;

package/dist/editor/components/NewComposition/InputDragger.d.ts

@@ -1,7 +1,12 @@
 import type { InputHTMLAttributes } from 'react';
 import React from 'react';
+import type { RemInputStatus } from './RemInput';
 declare type Props = InputHTMLAttributes<HTMLInputElement> & {
     onValueChange: (newVal: number) => void;
+    onTextChange: (newVal: string) => void;
+    status: RemInputStatus;
+    formatter?: (str: number | string) => string;
+    rightAlign: boolean;
 };
 export declare const InputDragger: React.FC<Props>;
 export {};

package/dist/editor/components/NewComposition/InputDragger.js

@@ -8,7 +8,7 @@ const noop_1 = require("../../helpers/noop");
 const input_dragger_click_lock_1 = require("../../state/input-dragger-click-lock");
 const z_index_1 = require("../../state/z-index");
 const RemInput_1 = require("./RemInput");
-const InputDragger = ({ onValueChange, min: _min, step: _step, value, ...props }) => {
+const InputDragger = ({ onValueChange, min: _min, max: _max, step: _step, value, onTextChange, formatter = (q) => String(q), status, rightAlign, ...props }) => {
     const [inputFallback, setInputFallback] = (0, react_1.useState)(false);
     const fallbackRef = (0, react_1.useRef)(null);
     const style = (0, react_1.useMemo)(() => {
@@ -25,6 +25,7 @@ const InputDragger = ({ onValueChange, min: _min, step: _step, value, ...props }
         cursor: 'ew-resize',
         userSelect: 'none',
         fontSize: 13,
+        fontVariantNumeric: 'tabular-nums',
     }), []);
     const onClick = (0, react_1.useCallback)((e) => {
         if (!(0, input_dragger_click_lock_1.getClickLock)()) {
@@ -35,14 +36,36 @@ const InputDragger = ({ onValueChange, min: _min, step: _step, value, ...props }
         }
         setInputFallback(true);
     }, []);
-    const onBlur = (0, react_1.useCallback)(() => {
+    const onEscape = (0, react_1.useCallback)(() => {
         setInputFallback(false);
     }, []);
+    const onBlur = (0, react_1.useCallback)(() => {
+        if (!fallbackRef.current) {
+            return;
+        }
+        const newValue = fallbackRef.current.value;
+        if (newValue.trim() === '') {
+            onEscape();
+            return;
+        }
+        if (fallbackRef.current.checkValidity()) {
+            onTextChange === null || onTextChange === void 0 ? void 0 : onTextChange(newValue);
+            setInputFallback(false);
+        }
+        else {
+            fallbackRef.current.reportValidity();
+        }
+    }, [onEscape, onTextChange]);
     const onKeyPress = (0, react_1.useCallback)((e) => {
+        var _a;
         if (e.key === 'Enter') {
-            setInputFallback(false);
+            (_a = fallbackRef.current) === null || _a === void 0 ? void 0 : _a.blur();
         }
     }, []);
+    const roundToStep = (val, stepSize) => {
+        const factor = 1 / stepSize;
+        return Math.ceil(val * factor) / factor;
+    };
     const onPointerDown = (0, react_1.useCallback)((e) => {
         const { pageX, pageY } = e;
         const moveListener = (ev) => {
@@ -50,13 +73,14 @@ const InputDragger = ({ onValueChange, min: _min, step: _step, value, ...props }
             const distanceFromStart = Math.sqrt(xDistance ** 2 + (ev.pageY - pageY) ** 2);
             const step = Number(_step !== null && _step !== void 0 ? _step : 1);
             const min = Number(_min !== null && _min !== void 0 ? _min : 0);
+            const max = Number(_max !== null && _max !== void 0 ? _max : Infinity);
             if (distanceFromStart > 4) {
                 (0, input_dragger_click_lock_1.setClickLock)(true);
             }
             const diff = (0, remotion_1.interpolate)(xDistance, [-5, -4, 0, 4, 5], [-step, 0, 0, 0, step]);
-            const newValue = Math.max(min, Math.floor(Number(value) + diff));
-            const roundToStep = Math.floor(newValue / step) * step;
-            onValueChange(roundToStep);
+            const newValue = Math.min(max, Math.max(min, Number(value) + diff));
+            const roundedToStep = roundToStep(newValue, step);
+            onValueChange(roundedToStep);
         };
         window.addEventListener('mousemove', moveListener);
         window.addEventListener('pointerup', () => {
@@ -67,7 +91,7 @@ const InputDragger = ({ onValueChange, min: _min, step: _step, value, ...props }
         }, {
             once: true,
         });
-    }, [_step, _min, value, onValueChange]);
+    }, [_step, _min, _max, value, onValueChange]);
     (0, react_1.useEffect)(() => {
         var _a;
         if (inputFallback) {
@@ -75,8 +99,8 @@ const InputDragger = ({ onValueChange, min: _min, step: _step, value, ...props }
         }
     }, [inputFallback]);
     if (inputFallback) {
-        return ((0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onEscape: onBlur, onOutsideClick: noop_1.noop, children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { ref: fallbackRef, autoFocus: true, onKeyPress: onKeyPress, onBlur: onBlur, value: value, min: _min, step: _step, ...props }) }));
+        return ((0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onEscape: onEscape, onOutsideClick: noop_1.noop, children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { ref: fallbackRef, autoFocus: true, onKeyPress: onKeyPress, onBlur: onBlur, min: _min, step: _step, defaultValue: value, status: status, pattern: '[0-9]*[.]?[0-9]*', rightAlign: rightAlign, ...props }) }));
     }
-    return ((0, jsx_runtime_1.jsx)("button", { type: "button", style: style, onClick: onClick, onPointerDown: onPointerDown, children: (0, jsx_runtime_1.jsx)("span", { style: span, children: value }) }));
+    return ((0, jsx_runtime_1.jsx)("button", { type: "button", style: style, onClick: onClick, onPointerDown: onPointerDown, children: (0, jsx_runtime_1.jsx)("span", { style: span, children: formatter(value) }) }));
 };
 exports.InputDragger = InputDragger;

package/dist/editor/components/NewComposition/MenuContent.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
+const is_menu_item_1 = require("../Menu/is-menu-item");
 const MenuDivider_1 = require("../Menu/MenuDivider");
 const MenuSubItem_1 = require("../Menu/MenuSubItem");
 const styles_1 = require("../Menu/styles");
@@ -14,6 +15,11 @@ const container = {
     paddingBottom: styles_1.MENU_VERTICAL_PADDING,
     border: `${BORDER_SIZE}px solid ${colors_1.INPUT_BORDER_COLOR_UNHOVERED}`,
     marginLeft: 0 - BORDER_SIZE,
+    overflowY: 'auto',
+    overflowX: 'hidden',
+    minWidth: 200,
+    maxWidth: styles_1.MAX_MENU_WIDTH,
+    maxHeight: 600,
 };
 const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMenu, leaveLeftSpace, topItemCanBeUnselected, }) => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
@@ -22,7 +28,9 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
     if (values[0].type === 'divider') {
         throw new Error('first value cant be divide');
     }
-    const [selectedItem, setSelectedItem] = (0, react_1.useState)(typeof preselectIndex === 'number' ? values[preselectIndex].id : null);
+    const [selectedItem, setSelectedItem] = (0, react_1.useState)(typeof preselectIndex === 'number'
+        ? values[preselectIndex].id
+        : null);
     const onEscape = (0, react_1.useCallback)(() => {
         onHide();
     }, [onHide]);
@@ -80,6 +88,7 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
         if (item.subMenu) {
             return setSubMenuActivated('without-mouse');
         }
+        onHide();
         item.onClick(item.id);
     }, [onHide, selectedItem, values]);
     const onArrowRight = (0, react_1.useCallback)(() => {
@@ -104,42 +113,56 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
             key: 'Escape',
             callback: onEscape,
             commandCtrlKey: false,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         const rightBinding = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'ArrowRight',
             commandCtrlKey: false,
             callback: onArrowRight,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         const leftBinding = keybindings.registerKeybinding({
             event: 'keydown',
             commandCtrlKey: false,
             key: 'ArrowLeft',
             callback: onPreviousMenu,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         const downBinding = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'ArrowDown',
             commandCtrlKey: false,
             callback: onArrowDown,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         const upBinding = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'ArrowUp',
             callback: onArrowUp,
             commandCtrlKey: false,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         const enterBinding = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'Enter',
             callback: onEnter,
             commandCtrlKey: false,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         const spaceBinding = keybindings.registerKeybinding({
             event: 'keyup',
             key: ' ',
             callback: onEnter,
             commandCtrlKey: false,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         return () => {
             escapeBinding.unregister();
@@ -193,7 +216,7 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
         current.addEventListener('pointerleave', onPointerLeave);
         return () => current.removeEventListener('pointerleave', onPointerLeave);
     }, [onHide, subMenuActivated]);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: containerRef, style: container, children: values.map((item) => {
+    return ((0, jsx_runtime_1.jsx)("div", { ref: containerRef, style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: values.map((item) => {
             if (item.type === 'divider') {
                 return (0, jsx_runtime_1.jsx)(MenuDivider_1.MenuDivider, {}, item.id);
             }

package/dist/editor/components/NewComposition/NewCompDuration.js

@@ -9,13 +9,15 @@ const InputDragger_1 = require("./InputDragger");
 const new_comp_layout_1 = require("./new-comp-layout");
 const ValidationMessage_1 = require("./ValidationMessage");
 const NewCompDuration = ({ durationInFrames, setDurationInFrames, fps }) => {
-    const onDurationInFramesChanged = (0, react_1.useCallback)((e) => {
-        setDurationInFrames(String(Number(e.target.value)));
+    const onDurationInFramesChanged = (0, react_1.useCallback)((newValue) => {
+        setDurationInFrames(String(Number(newValue)));
     }, [setDurationInFrames]);
     const onDurationChangedDirectly = (0, react_1.useCallback)((newVal) => {
         setDurationInFrames(String(newVal));
     }, [setDurationInFrames]);
     const compDurationErrMessage = (0, validate_new_comp_data_1.validateCompositionDuration)(durationInFrames);
-    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("label", { children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: " Duration in frames" }), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: durationInFrames, onChange: onDurationInFramesChanged, placeholder: "Duration (frames)", name: "durationInFrames", min: 1, step: 1, max: 100000000, onValueChange: onDurationChangedDirectly }), compDurationErrMessage ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: compDurationErrMessage })) : null] }), (0, jsx_runtime_1.jsxs)("span", { style: new_comp_layout_1.rightLabel, children: [(Number(durationInFrames) / Number(fps)).toFixed(2), "sec"] })] }) }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("label", { children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: " Duration in frames" }), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: durationInFrames, onTextChange: onDurationInFramesChanged, placeholder: "Duration (frames)", name: "durationInFrames", min: 1, step: 1, required: true, status: "ok", 
+                                // Hitting Promise.all() limit in Chrome
+                                max: 300000, onValueChange: onDurationChangedDirectly, rightAlign: false }), compDurationErrMessage ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compDurationErrMessage, type: "error" })] })) : null] }), (0, jsx_runtime_1.jsxs)("span", { style: new_comp_layout_1.rightLabel, children: [(Number(durationInFrames) / Number(fps)).toFixed(2), "sec"] })] }) }) }));
 };
 exports.NewCompDuration = NewCompDuration;

package/dist/editor/components/NewComposition/NewComposition.js

@@ -28,12 +28,12 @@ const left = {
     fontSize: 13,
 };
 const panelRight = {
-    width: 400,
     backgroundColor: 'black',
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
     position: 'relative',
+    width: 400,
 };
 const pre = {
     fontSize: 17,
@@ -67,8 +67,11 @@ const NewComposition = (props) => {
         return {
             flexDirection: 'row',
             display: 'flex',
-            width: 950,
-            height: type === 'composition' ? 450 : 300,
+            width: (0, ModalContainer_1.getMaxModalWidth)(950),
+            height: type === 'composition'
+                ? (0, ModalContainer_1.getMaxModalHeight)(490)
+                : (0, ModalContainer_1.getMaxModalHeight)(340),
+            overflow: 'hidden',
         };
     }, [type]);
     const [lockedAspectRatio, setLockedAspectRatio] = (0, react_1.useState)((0, aspect_ratio_locked_1.loadAspectRatioOption)() ? Number(size.width) / Number(size.height) : null);
@@ -84,10 +87,10 @@ const NewComposition = (props) => {
     const onTypeChanged = (0, react_1.useCallback)((newType) => {
         setType(newType);
     }, []);
-    const onWidthChanged = (0, react_1.useCallback)((e) => {
+    const onWidthChanged = (0, react_1.useCallback)((newValue) => {
         setSize((s) => {
             const { height } = s;
-            const newWidth = Number(e.target.value);
+            const newWidth = Number(newValue);
             return {
                 height: lockedAspectRatio === null
                     ? height
@@ -118,10 +121,10 @@ const NewComposition = (props) => {
             };
         });
     }, [lockedAspectRatio]);
-    const onHeightChanged = (0, react_1.useCallback)((e) => {
+    const onHeightChanged = (0, react_1.useCallback)((newValue) => {
         setSize((s) => {
             const { width } = s;
-            const newHeight = Number(e.target.value);
+            const newHeight = Number(newValue);
             return {
                 width: lockedAspectRatio === null
                     ? width
@@ -147,6 +150,7 @@ const NewComposition = (props) => {
                 keyHint: null,
                 leftItem: String(frameRate) === selectedFrameRate ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
                 subMenu: null,
+                quickSwitcherLabel: null,
             };
         });
     }, [onFpsChange, selectedFrameRate]);
@@ -164,6 +168,7 @@ const NewComposition = (props) => {
                 subMenu: null,
                 type: 'item',
                 value: 'composition',
+                quickSwitcherLabel: null,
             },
             {
                 id: 'still',
@@ -174,10 +179,11 @@ const NewComposition = (props) => {
                 subMenu: null,
                 type: 'item',
                 value: 'still',
+                quickSwitcherLabel: null,
             },
         ];
     }, [onTypeChanged]);
-    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: "New composition" }), (0, jsx_runtime_1.jsxs)("div", { style: panelContent, children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 3 }), (0, jsx_runtime_1.jsxs)("form", { children: [(0, jsx_runtime_1.jsxs)("label", { children: [(0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Type" }), (0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.inputArea, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: "Type of composition", style: comboBoxStyle, values: typeValues, selectedId: type }) })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Name" }), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { value: name, onChange: onNameChange, type: "text", placeholder: "Composition name" }), compNameErrMessage ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: compNameErrMessage })) : null] })] })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("label", { children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Width" }), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: size.width, placeholder: "Width (px)", onChange: onWidthChanged, name: "width", step: 2, min: 2, max: 100000000, onValueChange: onWidthDirectlyChanged }), compWidthErrMessage ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: compWidthErrMessage })) : null] })] }) }) }), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("label", { children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Height" }), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: size.height, onChange: onHeightChanged, placeholder: "Height (px)", name: "height", step: 2, min: 2, max: 100000000, onValueChange: onHeightDirectlyChanged }), compHeightErrMessage ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: compHeightErrMessage })) : null] })] }) })] }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(NewCompAspectRatio_1.NewCompAspectRatio, { width: Number(size.width), height: Number(size.height), aspectRatioLocked: lockedAspectRatio, setAspectRatioLocked: setAspectRatioLocked }) })] }), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), type === 'composition' ? ((0, jsx_runtime_1.jsx)(NewCompDuration_1.NewCompDuration, { durationInFrames: durationInFrames, fps: selectedFrameRate, setDurationInFrames: setDurationInFrames })) : null, (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", {}), type === 'composition' ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)("label", { children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Framerate" }), (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: "Framerate", style: comboBoxStyle, values: items, selectedId: selectedFrameRate })] })] })) : null] })] }), (0, jsx_runtime_1.jsxs)("div", { style: panelRight, children: [(0, jsx_runtime_1.jsx)("pre", { style: pre, children: (0, NewCompCode_1.getNewCompositionCode)({
+    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: "New composition" }), (0, jsx_runtime_1.jsxs)("div", { style: panelContent, children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 3 }), (0, jsx_runtime_1.jsxs)("form", { children: [(0, jsx_runtime_1.jsxs)("label", { children: [(0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Type" }), (0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.inputArea, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: "Type of composition", style: comboBoxStyle, values: typeValues, selectedId: type }) })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Name" }), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { value: name, onChange: onNameChange, type: "text", placeholder: "Composition name", status: "ok", rightAlign: false }), compNameErrMessage ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compNameErrMessage, type: "error" })] })) : null] })] })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("label", { children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Width" }), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: size.width, placeholder: "Width", onTextChange: onWidthChanged, name: "width", step: 2, min: 2, required: true, status: "ok", formatter: (w) => `${w}px`, max: 100000000, onValueChange: onWidthDirectlyChanged, rightAlign: false }), compWidthErrMessage ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compWidthErrMessage, type: "error" })] })) : null] })] }) }) }), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("label", { children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Height" }), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: size.height, onTextChange: onHeightChanged, placeholder: "Height", name: "height", step: 2, required: true, formatter: (h) => `${h}px`, min: 2, status: "ok", max: 100000000, onValueChange: onHeightDirectlyChanged, rightAlign: false }), compHeightErrMessage ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compHeightErrMessage, type: "error" })] })) : null] })] }) })] }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(NewCompAspectRatio_1.NewCompAspectRatio, { width: Number(size.width), height: Number(size.height), aspectRatioLocked: lockedAspectRatio, setAspectRatioLocked: setAspectRatioLocked }) })] }), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), type === 'composition' ? ((0, jsx_runtime_1.jsx)(NewCompDuration_1.NewCompDuration, { durationInFrames: durationInFrames, fps: selectedFrameRate, setDurationInFrames: setDurationInFrames })) : null, (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", {}), type === 'composition' ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)("label", { children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Framerate" }), (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: "Framerate", style: comboBoxStyle, values: items, selectedId: selectedFrameRate })] })] })) : null] })] }), (0, jsx_runtime_1.jsxs)("div", { style: panelRight, children: [(0, jsx_runtime_1.jsx)("pre", { style: pre, children: (0, NewCompCode_1.getNewCompositionCode)({
                                     type,
                                     durationInFrames: Number(durationInFrames),
                                     fps: Number(selectedFrameRate),
@@ -193,6 +199,6 @@ const NewComposition = (props) => {
                                             width: Number(size.width),
                                             name,
                                             raw: true,
-                                        }) })] })] })] })] }));
+                                        }) })] })] }), ' '] })] }));
 };
 exports.default = NewComposition;

package/dist/editor/components/NewComposition/RemInput.d.ts

@@ -1,3 +1,17 @@
+import type { PropsWithChildren } from 'react';
 import React from 'react';
+export declare type RemInputStatus = 'error' | 'warning' | 'ok';
+declare type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
+    status: RemInputStatus;
+    rightAlign: boolean;
+};
+export declare const INPUT_HORIZONTAL_PADDING = 8;
+export declare const RightAlignInput: React.FC<PropsWithChildren>;
 export declare const inputBaseStyle: React.CSSProperties;
-export declare const RemotionInput: (props: React.ClassAttributes<HTMLInputElement> & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement | null>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export declare const getInputBorderColor: ({ status, isFocused, isHovered, }: {
+    status: 'error' | 'warning' | 'ok';
+    isFocused: boolean;
+    isHovered: boolean;
+}) => "hsla(0, 0%, 100%, 0.15)" | "rgba(0, 0, 0, 0.6)" | "rgba(255, 255, 255, 0.05)" | "#ff3232" | "#f1c40f";
+export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, "key" | "status" | "rightAlign" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+export {};

package/dist/editor/components/NewComposition/RemInput.js

@@ -1,18 +1,36 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RemotionInput = exports.inputBaseStyle = void 0;
+exports.RemotionInput = exports.getInputBorderColor = exports.inputBaseStyle = exports.RightAlignInput = exports.INPUT_HORIZONTAL_PADDING = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
 const z_index_1 = require("../../state/z-index");
+exports.INPUT_HORIZONTAL_PADDING = 8;
+const aligner = {
+    marginRight: -exports.INPUT_HORIZONTAL_PADDING,
+};
+const RightAlignInput = ({ children }) => {
+    return (0, jsx_runtime_1.jsx)("div", { style: aligner, children: children });
+};
+exports.RightAlignInput = RightAlignInput;
 exports.inputBaseStyle = {
-    padding: '8px 10px',
+    padding: `${exports.INPUT_HORIZONTAL_PADDING}px 10px`,
     color: 'white',
     borderStyle: 'solid',
     borderWidth: 1,
     fontSize: 14,
 };
-const RemInputForwardRef = (props, ref) => {
+const getInputBorderColor = ({ status, isFocused, isHovered, }) => status === 'warning'
+    ? colors_1.WARNING_COLOR
+    : status === 'error'
+        ? colors_1.FAIL_COLOR
+        : isFocused
+            ? colors_1.SELECTED_BACKGROUND
+            : isHovered
+                ? colors_1.INPUT_BORDER_COLOR_HOVERED
+                : colors_1.INPUT_BORDER_COLOR_UNHOVERED;
+exports.getInputBorderColor = getInputBorderColor;
+const RemInputForwardRef = ({ status, rightAlign, ...props }, ref) => {
     const [isFocused, setIsFocused] = (0, react_1.useState)(false);
     const [isHovered, setIsHovered] = (0, react_1.useState)(false);
     const inputRef = (0, react_1.useRef)(null);
@@ -23,17 +41,14 @@ const RemInputForwardRef = (props, ref) => {
             backgroundColor: colors_1.INPUT_BACKGROUND,
             ...exports.inputBaseStyle,
             width: '100%',
-            borderColor: isFocused
-                ? colors_1.SELECTED_BACKGROUND
-                : isHovered
-                    ? colors_1.INPUT_BORDER_COLOR_HOVERED
-                    : colors_1.INPUT_BORDER_COLOR_UNHOVERED,
+            borderColor: (0, exports.getInputBorderColor)({ isFocused, isHovered, status }),
+            textAlign: rightAlign ? 'right' : 'left',
             ...((_a = props.style) !== null && _a !== void 0 ? _a : {}),
         };
-    }, [isFocused, isHovered, props.style]);
+    }, [isFocused, isHovered, rightAlign, props.style, status]);
     (0, react_1.useImperativeHandle)(ref, () => {
         return inputRef.current;
-    });
+    }, []);
     (0, react_1.useEffect)(() => {
         if (!inputRef.current) {
             return;

package/dist/editor/components/NewComposition/RemInputTypeColor.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { RemInputStatus } from './RemInput';
+declare type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
+    status: RemInputStatus;
+};
+export declare const RemInputTypeColor: React.ForwardRefExoticComponent<Pick<Props, "key" | "status" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+export {};