@remotion/cli 4.0.0-4x.2 → 4.0.0-alpha.115

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

@@ -1,7 +1,11 @@
 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;
 };
 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, ...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, ...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

@@ -22,7 +22,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 +82,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)(() => {
@@ -99,13 +102,62 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
         setSubMenuActivated('without-mouse');
     }, [onNextMenu, selectedItem, values]);
     (0, react_1.useEffect)(() => {
-        const escapeBinding = keybindings.registerKeybinding('keydown', 'Escape', onEscape);
-        const rightBinding = keybindings.registerKeybinding('keydown', 'ArrowRight', onArrowRight);
-        const leftBinding = keybindings.registerKeybinding('keydown', 'ArrowLeft', onPreviousMenu);
-        const downBinding = keybindings.registerKeybinding('keydown', 'ArrowDown', onArrowDown);
-        const upBinding = keybindings.registerKeybinding('keydown', 'ArrowUp', onArrowUp);
-        const enterBinding = keybindings.registerKeybinding('keydown', 'Enter', onEnter);
-        const spaceBinding = keybindings.registerKeybinding('keyup', ' ', onEnter);
+        const escapeBinding = keybindings.registerKeybinding({
+            event: 'keydown',
+            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();
             leftBinding.unregister();

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 }), 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

@@ -84,10 +84,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 +118,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 +147,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 +165,7 @@ const NewComposition = (props) => {
                 subMenu: null,
                 type: 'item',
                 value: 'composition',
+                quickSwitcherLabel: null,
             },
             {
                 id: 'still',
@@ -174,10 +176,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" }), 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 }), 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 }), 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),

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

@@ -1,3 +1,16 @@
+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;
+};
+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" | 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, ...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,13 @@ 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 }),
             ...((_a = props.style) !== null && _a !== void 0 ? _a : {}),
         };
-    }, [isFocused, isHovered, props.style]);
+    }, [isFocused, isHovered, props.style, status]);
     (0, react_1.useImperativeHandle)(ref, () => {
         return inputRef.current;
-    });
+    }, []);
     (0, react_1.useEffect)(() => {
         if (!inputRef.current) {
             return;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+declare type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> & {
+    status: 'error' | 'warning' | 'ok';
+};
+export declare const inputBaseStyle: React.CSSProperties;
+export declare const RemTextarea: React.ForwardRefExoticComponent<Pick<Props, "key" | "status" | keyof React.InputHTMLAttributes<HTMLTextAreaElement>> & React.RefAttributes<HTMLTextAreaElement>>;
+export {};

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

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RemTextarea = exports.inputBaseStyle = 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");
+const is_menu_item_1 = require("../Menu/is-menu-item");
+const RemInput_1 = require("../NewComposition/RemInput");
+exports.inputBaseStyle = {
+    padding: `${RemInput_1.INPUT_HORIZONTAL_PADDING}px 10px`,
+    color: 'white',
+    borderStyle: 'solid',
+    borderWidth: 1,
+    fontSize: 14,
+    resize: 'none',
+    overflowX: 'hidden',
+};
+const RemTextareaFRFunction = ({ status, ...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);
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    (0, react_1.useImperativeHandle)(ref, () => {
+        return inputRef.current;
+    }, []);
+    const style = (0, react_1.useMemo)(() => {
+        var _a;
+        return {
+            backgroundColor: colors_1.INPUT_BACKGROUND,
+            ...exports.inputBaseStyle,
+            width: '100%',
+            borderColor: (0, RemInput_1.getInputBorderColor)({ isFocused, isHovered, status }),
+            ...((_a = props.style) !== null && _a !== void 0 ? _a : {}),
+        };
+    }, [isFocused, isHovered, props.style, status]);
+    (0, react_1.useEffect)(() => {
+        if (!inputRef.current) {
+            return;
+        }
+        const { current } = inputRef;
+        const onFocus = () => setIsFocused(true);
+        const onBlur = () => setIsFocused(false);
+        const onMouseEnter = () => setIsHovered(true);
+        const onMouseLeave = () => setIsHovered(false);
+        const onKeyDown = (e) => {
+            if (!inputRef.current) {
+                return;
+            }
+            if (inputRef.current !== document.activeElement) {
+                return;
+            }
+            if (e.code === 'Tab') {
+                e.preventDefault();
+                // Always match up with value in JSON.stringify(content, null, 2)
+                document.execCommand('insertText', false, ' '.repeat(2));
+            }
+            if (e.code === 'Enter') {
+                e.preventDefault();
+                const { selectionStart, selectionEnd, value } = inputRef.current;
+                if (selectionStart !== selectionEnd) {
+                    return;
+                }
+                let prevNewline = selectionStart;
+                for (let i = selectionStart - 1; i >= 0; i--) {
+                    if (value[i] === '\n') {
+                        break;
+                    }
+                    prevNewline = i;
+                }
+                const currentLine = value.substring(prevNewline, selectionStart);
+                const trimmed = currentLine.trim();
+                const difference = currentLine.length - trimmed.length;
+                document.execCommand('insertText', false, '\n' + ' '.repeat(difference));
+            }
+        };
+        current.addEventListener('focus', onFocus);
+        current.addEventListener('blur', onBlur);
+        current.addEventListener('mouseenter', onMouseEnter);
+        current.addEventListener('mouseleave', onMouseLeave);
+        current.addEventListener('keydown', onKeyDown);
+        return () => {
+            current.removeEventListener('focus', onFocus);
+            current.removeEventListener('blur', onBlur);
+            current.removeEventListener('mouseenter', onMouseEnter);
+            current.removeEventListener('mouseleave', onMouseLeave);
+            current.removeEventListener('keydown', onKeyDown);
+        };
+    }, [inputRef]);
+    return ((0, jsx_runtime_1.jsx)("textarea", { ref: inputRef, tabIndex: tabIndex, ...props, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, style: style }));
+};
+exports.RemTextarea = (0, react_1.forwardRef)(RemTextareaFRFunction);

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

@@ -1,4 +1,6 @@
 import React from 'react';
 export declare const ValidationMessage: React.FC<{
     message: string;
+    align: 'flex-start' | 'flex-end';
+    type: 'warning' | 'error';
 }>;

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

@@ -2,22 +2,32 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ValidationMessage = 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 Triangle = (props) => {
-    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 576 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M248.747 204.705l6.588 112c.373 6.343 5.626 11.295 11.979 11.295h41.37a12 12 0 0 0 11.979-11.295l6.588-112c.405-6.893-5.075-12.705-11.979-12.705h-54.547c-6.903 0-12.383 5.812-11.978 12.705zM330 384c0 23.196-18.804 42-42 42s-42-18.804-42-42 18.804-42 42-42 42 18.804 42 42zm-.423-360.015c-18.433-31.951-64.687-32.009-83.154 0L6.477 440.013C-11.945 471.946 11.118 512 48.054 512H527.94c36.865 0 60.035-39.993 41.577-71.987L329.577 23.985zM53.191 455.002L282.803 57.008c2.309-4.002 8.085-4.002 10.394 0l229.612 397.993c2.308 4-.579 8.998-5.197 8.998H58.388c-4.617.001-7.504-4.997-5.197-8.997z" }) }));
+const WarningTriangle = (props) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 576 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M248.747 204.705l6.588 112c.373 6.343 5.626 11.295 11.979 11.295h41.37a12 12 0 0 0 11.979-11.295l6.588-112c.405-6.893-5.075-12.705-11.979-12.705h-54.547c-6.903 0-12.383 5.812-11.978 12.705zM330 384c0 23.196-18.804 42-42 42s-42-18.804-42-42 18.804-42 42-42 42 18.804 42 42zm-.423-360.015c-18.433-31.951-64.687-32.009-83.154 0L6.477 440.013C-11.945 471.946 11.118 512 48.054 512H527.94c36.865 0 60.035-39.993 41.577-71.987L329.577 23.985zM53.191 455.002L282.803 57.008c2.309-4.002 8.085-4.002 10.394 0l229.612 397.993c2.308 4-.579 8.998-5.197 8.998H58.388c-4.617.001-7.504-4.997-5.197-8.997z" }) }));
 };
 const style = {
     width: 11,
     height: 11,
+    flexShrink: 0,
 };
 const container = {
-    marginTop: 5,
+    maxWidth: 500,
 };
 const label = {
     fontSize: 13,
-    flex: 1,
+    color: 'white',
+    fontFamily: 'sans-serif',
 };
-const ValidationMessage = ({ message }) => {
-    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)(Triangle, { style: style, color: "#f1c40f" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: label, children: message })] }) }));
+const ValidationMessage = ({ message, align, type }) => {
+    const finalStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...style,
+            fill: type === 'warning' ? colors_1.WARNING_COLOR : colors_1.FAIL_COLOR,
+        };
+    }, [type]);
+    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", justify: align, children: [(0, jsx_runtime_1.jsx)(WarningTriangle, { style: finalStyle }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: label, children: message })] }) }));
 };
 exports.ValidationMessage = ValidationMessage;

package/dist/editor/components/Notifications/ColorDot.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const ColorDot: React.FC<{
+    color: string;
+}>;

package/dist/editor/components/Notifications/ColorDot.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorDot = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const container = {
+    height: 16,
+    width: 16,
+    backgroundColor: 'red',
+    border: '1px solid rgba(255, 255, 255, 0.2)',
+    borderRadius: 8,
+};
+const ColorDot = ({ color }) => {
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...container,
+            backgroundColor: color,
+        };
+    }, [color]);
+    return (0, jsx_runtime_1.jsx)("div", { style: style });
+};
+exports.ColorDot = ColorDot;

package/dist/editor/components/Notifications/Notification.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const Notification: React.FC<{
+    children: React.ReactNode;
+    created: number;
+    duration: number;
+    id: string;
+    onRemove: (id: string) => void;
+}>;

package/dist/editor/components/Notifications/Notification.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Notification = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const notification = {
+    backgroundColor: '#111111',
+    color: 'white',
+    fontFamily: 'Arial, Helvetica, sans-serif',
+    display: 'inline-flex',
+    padding: '8px 14px',
+    borderRadius: 4,
+    fontSize: 15,
+    border: '0.25px solid rgba(255, 255, 255, 0.1)',
+    boxShadow: '0 2px 3px rgba(0, 0, 0, 1)',
+    marginTop: 3,
+    marginBottom: 3,
+    alignItems: 'center',
+};
+const Notification = ({ children, id, duration, created, onRemove }) => {
+    (0, react_1.useEffect)(() => {
+        const timeout = setTimeout(() => {
+            onRemove(id);
+        }, duration - (Date.now() - created));
+        return () => {
+            clearTimeout(timeout);
+        };
+    }, [created, duration, id, onRemove]);
+    return ((0, jsx_runtime_1.jsx)("div", { className: "css-reset", style: notification, children: children }));
+};
+exports.Notification = Notification;