@remotion/cli 4.0.0-alpha4 → 4.0.0-alpha6

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)();
@@ -108,6 +114,7 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
             callback: onEscape,
             commandCtrlKey: false,
             preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         const rightBinding = keybindings.registerKeybinding({
             event: 'keydown',
@@ -115,6 +122,7 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
             commandCtrlKey: false,
             callback: onArrowRight,
             preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         const leftBinding = keybindings.registerKeybinding({
             event: 'keydown',
@@ -122,6 +130,7 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
             key: 'ArrowLeft',
             callback: onPreviousMenu,
             preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         const downBinding = keybindings.registerKeybinding({
             event: 'keydown',
@@ -129,6 +138,7 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
             commandCtrlKey: false,
             callback: onArrowDown,
             preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         const upBinding = keybindings.registerKeybinding({
             event: 'keydown',
@@ -136,6 +146,7 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
             callback: onArrowUp,
             commandCtrlKey: false,
             preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         const enterBinding = keybindings.registerKeybinding({
             event: 'keydown',
@@ -143,6 +154,7 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
             callback: onEnter,
             commandCtrlKey: false,
             preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         const spaceBinding = keybindings.registerKeybinding({
             event: 'keyup',
@@ -150,6 +162,7 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
             callback: onEnter,
             commandCtrlKey: false,
             preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         return () => {
             escapeBinding.unregister();
@@ -203,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

@@ -16,8 +16,8 @@ const NewCompDuration = ({ durationInFrames, setDurationInFrames, fps }) => {
         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, onTextChange: onDurationInFramesChanged, placeholder: "Duration (frames)", name: "durationInFrames", min: 1, step: 1, required: true, 
+    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.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"] })] }) }) }));
+                                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);
@@ -180,7 +183,7 @@ const NewComposition = (props) => {
             },
         ];
     }, [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)", onTextChange: onWidthChanged, name: "width", step: 2, min: 2, required: true, 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, onTextChange: onHeightChanged, placeholder: "Height (px)", name: "height", step: 2, required: true, 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),
@@ -196,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,5 +1,17 @@
+import type { PropsWithChildren } from 'react';
 import React from 'react';
-declare type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+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: React.ForwardRefExoticComponent<Pick<Props, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+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,14 +41,11 @@ 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;
     }, []);

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 {};

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

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RemInputTypeColor = 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 RemInput_1 = require("./RemInput");
+const inputBaseStyle = {
+    padding: 0,
+    borderStyle: 'solid',
+    borderWidth: 1,
+};
+const RemInputTypeColorForwardRef = ({ 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)();
+    const style = (0, react_1.useMemo)(() => {
+        var _a;
+        return {
+            backgroundColor: colors_1.INPUT_BACKGROUND,
+            ...inputBaseStyle,
+            borderColor: (0, RemInput_1.getInputBorderColor)({ isFocused, isHovered, status }),
+            ...((_a = props.style) !== null && _a !== void 0 ? _a : {}),
+        };
+    }, [isFocused, isHovered, props.style, status]);
+    (0, react_1.useImperativeHandle)(ref, () => {
+        return inputRef.current;
+    }, []);
+    (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);
+        current.addEventListener('focus', onFocus);
+        current.addEventListener('blur', onBlur);
+        current.addEventListener('mouseenter', onMouseEnter);
+        current.addEventListener('mouseleave', onMouseLeave);
+        return () => {
+            current.removeEventListener('focus', onFocus);
+            current.removeEventListener('blur', onBlur);
+            current.removeEventListener('mouseenter', onMouseEnter);
+            current.removeEventListener('mouseleave', onMouseLeave);
+        };
+    }, [inputRef]);
+    return ((0, jsx_runtime_1.jsx)("input", { ref: inputRef, type: "color", tabIndex: tabIndex, ...props, style: style }));
+};
+exports.RemInputTypeColor = (0, react_1.forwardRef)(RemInputTypeColorForwardRef);

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,
+    width: 12,
+    height: 12,
+    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/NotificationCenter.d.ts

@@ -9,5 +9,6 @@ declare type TNotificationCenter = {
     addNotification: (notification: TNotification) => void;
 };
 export declare const notificationCenter: React.RefObject<TNotificationCenter>;
+export declare const sendErrorNotification: (content: React.ReactNode) => void;
 export declare const NotificationCenter: React.FC;
 export {};

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NotificationCenter = exports.notificationCenter = void 0;
+exports.NotificationCenter = exports.sendErrorNotification = exports.notificationCenter = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Notification_1 = require("./Notification");
@@ -16,6 +16,16 @@ const container = {
     backgroundColor: 'transparent',
 };
 exports.notificationCenter = (0, react_1.createRef)();
+const sendErrorNotification = (content) => {
+    var _a;
+    (_a = exports.notificationCenter.current) === null || _a === void 0 ? void 0 : _a.addNotification({
+        content,
+        duration: 2000,
+        created: Date.now(),
+        id: String(Math.random()).replace('0.', ''),
+    });
+};
+exports.sendErrorNotification = sendErrorNotification;
 const NotificationCenter = () => {
     const [notifications, setNotifications] = (0, react_1.useState)([]);
     const onRemove = (0, react_1.useCallback)((id) => {

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

@@ -1,6 +1,2 @@
 import React from 'react';
-export declare const serverDisconnectedRef: React.RefObject<{
-    setServerDisconnected: () => void;
-    setServerConnected: () => void;
-}>;
 export declare const ServerDisconnected: React.FC;

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

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ServerDisconnected = exports.serverDisconnectedRef = void 0;
+exports.ServerDisconnected = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const client_id_1 = require("../../helpers/client-id");
 const container = {
     position: 'fixed',
     justifyContent: 'flex-end',
@@ -31,24 +32,13 @@ const inlineCode = {
     fontSize: 16,
     fontFamily: 'monospace',
 };
-exports.serverDisconnectedRef = (0, react_1.createRef)();
 let pageIsGoingToReload = false;
 window.addEventListener('beforeunload', () => {
     pageIsGoingToReload = true;
 });
 const ServerDisconnected = () => {
-    const [serverDisconnected, setServerDisconnected] = (0, react_1.useState)(false);
-    (0, react_1.useImperativeHandle)(exports.serverDisconnectedRef, () => {
-        return {
-            setServerDisconnected: () => {
-                setServerDisconnected(true);
-            },
-            setServerConnected: () => {
-                setServerDisconnected(false);
-            },
-        };
-    }, []);
-    if (!serverDisconnected) {
+    const ctx = (0, react_1.useContext)(client_id_1.PreviewServerConnectionCtx);
+    if (ctx.type !== 'disconnected') {
         return null;
     }
     if (pageIsGoingToReload) {

package/dist/editor/components/PlayPause.js

@@ -125,6 +125,7 @@ const PlayPause = ({ playbackRate, loop }) => {
             callback: onArrowLeft,
             commandCtrlKey: false,
             preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         const arrowRight = keybindings.registerKeybinding({
             event: 'keydown',
@@ -132,6 +133,7 @@ const PlayPause = ({ playbackRate, loop }) => {
             callback: onArrowRight,
             commandCtrlKey: false,
             preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         const space = keybindings.registerKeybinding({
             event: 'keydown',
@@ -139,6 +141,7 @@ const PlayPause = ({ playbackRate, loop }) => {
             callback: onSpace,
             commandCtrlKey: false,
             preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         const enter = keybindings.registerKeybinding({
             event: 'keydown',
@@ -146,6 +149,7 @@ const PlayPause = ({ playbackRate, loop }) => {
             callback: onEnter,
             commandCtrlKey: false,
             preventDefault: false,
+            triggerIfInputFieldFocused: false,
         });
         const a = keybindings.registerKeybinding({
             event: 'keydown',
@@ -153,6 +157,7 @@ const PlayPause = ({ playbackRate, loop }) => {
             callback: jumpToStart,
             commandCtrlKey: false,
             preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         const e = keybindings.registerKeybinding({
             event: 'keydown',
@@ -160,6 +165,7 @@ const PlayPause = ({ playbackRate, loop }) => {
             callback: jumpToEnd,
             commandCtrlKey: false,
             preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         return () => {
             arrowLeft.unregister();

package/dist/editor/components/PlaybackKeyboardShortcutsManager.js

@@ -48,6 +48,7 @@ const PlaybackKeyboardShortcutsManager = ({ setPlaybackRate }) => {
             callback: onJKey,
             commandCtrlKey: false,
             preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         const kKey = keybindings.registerKeybinding({
             event: 'keydown',
@@ -55,6 +56,7 @@ const PlaybackKeyboardShortcutsManager = ({ setPlaybackRate }) => {
             callback: onKKey,
             commandCtrlKey: false,
             preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         const lKey = keybindings.registerKeybinding({
             event: 'keydown',
@@ -62,6 +64,7 @@ const PlaybackKeyboardShortcutsManager = ({ setPlaybackRate }) => {
             callback: onLKey,
             commandCtrlKey: false,
             preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         return () => {
             jKey.unregister();

package/dist/editor/components/PlaybackRateSelector.d.ts

@@ -1,6 +1,4 @@
 import React from 'react';
-export declare const commonPlaybackRates: number[];
-export declare const getPlaybackRateLabel: (playbackRate: number) => string;
 export declare const PlaybackRateSelector: React.FC<{
     playbackRate: number;
     setPlaybackRate: React.Dispatch<React.SetStateAction<number>>;