@remotion/cli 2.3.3 → 2.3.4

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

@@ -3,16 +3,26 @@ declare type DividerItem = {
     type: 'divider';
     id: string;
 };
+export declare type SubMenu = {
+    preselectIndex: number | false;
+    leaveLeftSpace: boolean;
+    items: ComboboxValue[];
+};
 declare type SelectionItem = {
     type: 'item';
     id: string;
     label: React.ReactNode;
     value: string | number;
     onClick: (id: string) => void;
+    keyHint: string | null;
+    leftItem: React.ReactNode;
+    subMenu: SubMenu | null;
 };
 export declare type ComboboxValue = DividerItem | SelectionItem;
 export declare const Combobox: React.FC<{
     values: ComboboxValue[];
+    selectedId: string | number;
+    style?: React.CSSProperties;
 }>;
 export {};
 //# sourceMappingURL=ComboBox.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/ComboBox.tsx"],"names":[],"mappings":"AACA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAoClE,aAAK,WAAW,GAAG;IAClB,IAAI,EAAE,SAAS,CAAC;IAChB,EAAE,EAAE,MAAM,CAAC;CACX,CAAC;AAEF,aAAK,aAAa,GAAG;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9B,CAAC;AAEF,oBAAY,aAAa,GAAG,WAAW,GAAG,aAAa,CAAC;AAIxD,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC;IAAC,MAAM,EAAE,aAAa,EAAE,CAAA;CAAC,CA+FxD,CAAC"}
+{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/ComboBox.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAyB/E,aAAK,WAAW,GAAG;IAClB,IAAI,EAAE,SAAS,CAAC;IAChB,EAAE,EAAE,MAAM,CAAC;CACX,CAAC;AAEF,oBAAY,OAAO,GAAG;IACrB,cAAc,EAAE,MAAM,GAAG,KAAK,CAAC;IAC/B,cAAc,EAAE,OAAO,CAAC;IACxB,KAAK,EAAE,aAAa,EAAE,CAAC;CACvB,CAAC;AAEF,aAAK,aAAa,GAAG;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;CACxB,CAAC;AAEF,oBAAY,aAAa,GAAG,WAAW,GAAG,aAAa,CAAC;AAExD,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC;IAC/B,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,UAAU,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC5B,CAiGA,CAAC"}

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

@@ -9,54 +9,32 @@ const use_element_size_1 = require("@remotion/player/src/utils/use-element-size"
 const react_1 = require("react");
 const react_dom_1 = __importDefault(require("react-dom"));
 const colors_1 = require("../../helpers/colors");
-const font_1 = require("../../helpers/font");
-const is_menu_click_1 = require("../Menu/is-menu-click");
-const MenuDivider_1 = require("../Menu/MenuDivider");
-const MenuSubItem_1 = require("../Menu/MenuSubItem");
+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 portals_1 = require("../Menu/portals");
+const styles_1 = require("../Menu/styles");
+const MenuContent_1 = require("./MenuContent");
 const container = {
-    padding: '10px 16px',
+    padding: '8px 10px',
     display: 'inline-block',
-    backgroundColor: 'rgba(255, 255, 255, 0.06)',
-    borderRadius: 5,
-    fontSize: 15,
-    borderWidth: 2,
+    backgroundColor: colors_1.INPUT_BACKGROUND,
+    fontSize: 14,
+    borderWidth: 1,
     borderStyle: 'solid',
 };
-const menuContainer = {
-    backgroundColor: colors_1.BACKGROUND,
-    position: 'fixed',
-    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.5)',
-    color: 'white',
-    fontFamily: font_1.FONT_FAMILY,
-    paddingTop: 4,
-    paddingBottom: 4,
-    userSelect: 'none',
-    minWidth: 200,
-};
-const outerPortal = {
-    position: 'fixed',
-    height: '100%',
-    width: '100%',
-};
-const portal = document.getElementById('menuportal');
-const Combobox = ({ values }) => {
-    const selected = values[0];
+const Combobox = ({ values, selectedId, style: customStyle }) => {
     const [hovered, setIsHovered] = (0, react_1.useState)(false);
     const [opened, setOpened] = (0, react_1.useState)(false);
     const ref = (0, react_1.useRef)(null);
+    const { tabIndex, currentZIndex } = (0, z_index_1.useZIndex)();
     const size = (0, use_element_size_1.useElementSize)(ref, {
         triggerOnWindowResize: true,
     });
-    const style = (0, react_1.useMemo)(() => {
-        return {
-            ...container,
-            userSelect: 'none',
-            borderColor: (0, colors_1.getBackgroundFromHoverState)({
-                hovered,
-                selected: false,
-            }),
-        };
-    }, [hovered]);
+    const onHide = (0, react_1.useCallback)(() => {
+        setOpened(false);
+    }, []);
     (0, react_1.useEffect)(() => {
         const { current } = ref;
         if (!current) {
@@ -64,13 +42,17 @@ const Combobox = ({ values }) => {
         }
         const onMouseEnter = () => setIsHovered(true);
         const onMouseLeave = () => setIsHovered(false);
-        const onClick = () => setOpened((o) => !o);
+        const onClick = (e) => {
+            e.stopPropagation();
+            return setOpened((o) => !o);
+        };
         current.addEventListener('mouseenter', onMouseEnter);
         current.addEventListener('mouseleave', onMouseLeave);
         current.addEventListener('click', onClick);
         return () => {
             current.removeEventListener('mouseenter', onMouseEnter);
             current.removeEventListener('mouseleave', onMouseLeave);
+            current.removeEventListener('click', onClick);
         };
     }, []);
     const portalStyle = (0, react_1.useMemo)(() => {
@@ -78,26 +60,30 @@ const Combobox = ({ values }) => {
             return null;
         }
         return {
-            ...menuContainer,
+            ...styles_1.menuContainer,
             left: size.left,
             top: size.top + size.height,
         };
     }, [opened, size]);
-    const menuContent = ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: values.map((item) => {
-            if (item.type === 'divider') {
-                return (0, jsx_runtime_1.jsx)(MenuDivider_1.MenuDivider, {}, item.id);
-            }
-            return ((0, jsx_runtime_1.jsx)(MenuSubItem_1.MenuSubItem, { onActionSelected: item.onClick, label: item.label, id: item.id }, item.id));
-        }) }, void 0));
-    const outerStyle = (0, react_1.useMemo)(() => {
-        var _a, _b;
+    const selected = values.find((v) => v.id === selectedId);
+    const style = (0, react_1.useMemo)(() => {
         return {
-            ...outerPortal,
-            top: ((_a = size === null || size === void 0 ? void 0 : size.top) !== null && _a !== void 0 ? _a : 0) + ((_b = size === null || size === void 0 ? void 0 : size.height) !== null && _b !== void 0 ? _b : 0),
+            ...container,
+            ...(customStyle !== null && customStyle !== void 0 ? customStyle : {}),
+            userSelect: 'none',
+            color: 'white',
+            display: 'inline-flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            borderColor: opened
+                ? colors_1.SELECTED_BACKGROUND
+                : hovered
+                    ? colors_1.INPUT_BORDER_COLOR_HOVERED
+                    : colors_1.INPUT_BORDER_COLOR_UNHOVERED,
         };
-    }, [size]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref, style: style }, { children: selected.label }), void 0), portalStyle
-                ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)("div", Object.assign({ style: outerStyle }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: is_menu_click_1.SUBMENU_CONTAINER_CLASS_NAME, style: portalStyle }, { children: menuContent }), void 0) }), void 0), portal)
+    }, [customStyle, hovered, opened]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", Object.assign({ ref: ref, tabIndex: tabIndex, type: "button", style: style }, { children: [selected.label, " ", (0, jsx_runtime_1.jsx)(layout_1.Flex, {}, void 0), " ", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }, void 0), " ", (0, jsx_runtime_1.jsx)(caret_1.CaretDown, {}, void 0)] }), void 0), portalStyle
+                ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)("div", Object.assign({ style: styles_1.outerPortal }, { children: (0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, Object.assign({ onOutsideClick: onHide, onEscape: onHide }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ 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 }, void 0) }), void 0) }), void 0) }), void 0), (0, portals_1.getPortal)(currentZIndex))
                 : null] }, void 0));
 };
 exports.Combobox = Combobox;

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

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.js","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/ComboBox.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ComboBox.js","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/ComboBox.tsx"],"names":[],"mappings":"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"}

package/dist/editor/components/NewComposition/CompositionType.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CompositionType.d.ts","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/CompositionType.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAsB/E,oBAAY,QAAQ,GAAG,aAAa,GAAG,OAAO,CAAC;AAqD/C,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC;IACtC,IAAI,EAAE,QAAQ,CAAC;IACf,UAAU,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;CACrC,CAWA,CAAC"}
+{"version":3,"file":"CompositionType.d.ts","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/CompositionType.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAkB/E,oBAAY,QAAQ,GAAG,aAAa,GAAG,OAAO,CAAC;AAgE/C,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC;IACtC,IAAI,EAAE,QAAQ,CAAC;IACf,UAAU,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;CACrC,CAWA,CAAC"}

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

@@ -6,11 +6,8 @@ const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
 const film_1 = require("../../icons/film");
 const still_1 = require("../../icons/still");
-const Spacing_1 = require("../Spacing");
-const row = {
-    display: 'flex',
-    flexDirection: 'row',
-};
+const z_index_1 = require("../../state/z-index");
+const layout_1 = require("../layout");
 const panel = {
     flex: 1,
     borderRadius: 8,
@@ -23,6 +20,7 @@ const panel = {
 };
 const Panel = ({ selected, type, onSelected }) => {
     const ref = (0, react_1.useRef)(null);
+    const { tabIndex } = (0, z_index_1.useZIndex)();
     const [hovered, setHovered] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => {
         const { current } = ref;
@@ -41,15 +39,19 @@ const Panel = ({ selected, type, onSelected }) => {
                 hovered,
                 selected,
             }),
+            color: 'white',
+            appearance: 'none',
+            border: 'none',
+            textAlign: 'left',
         };
     }, [hovered, selected]);
     const onClick = (0, react_1.useCallback)(() => {
         onSelected(type);
     }, [onSelected, type]);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: ref, style: style, onClick: onClick }, { children: [type === 'composition' ? ((0, jsx_runtime_1.jsx)(film_1.FilmIcon, { style: { height: 18, width: 18 } }, void 0)) : ((0, jsx_runtime_1.jsx)(still_1.StillIcon, { style: { height: 18, width: 18 } }, void 0)), (0, jsx_runtime_1.jsx)(Spacing_1.Spacing, { x: 1 }, void 0), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: type === 'composition' ? '<Composition>' : '<Still>' }, void 0), (0, jsx_runtime_1.jsx)("div", { children: type === 'composition' ? 'For videos' : 'For still images' }, void 0)] }, void 0)] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)("button", Object.assign({ ref: ref, tabIndex: tabIndex, type: "button", style: style, onClick: onClick }, { children: [type === 'composition' ? ((0, jsx_runtime_1.jsx)(film_1.FilmIcon, { style: { height: 18, width: 18 } }, void 0)) : ((0, jsx_runtime_1.jsx)(still_1.StillIcon, { style: { height: 18, width: 18 } }, void 0)), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }, void 0), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: type === 'composition' ? '<Composition>' : '<Still>' }, void 0), (0, jsx_runtime_1.jsx)("div", { children: type === 'composition' ? 'For videos' : 'For still images' }, void 0)] }, void 0)] }), void 0));
 };
 const CompositionType = ({ onSelected, type }) => {
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ style: row }, { children: [(0, jsx_runtime_1.jsx)(Panel, { onSelected: onSelected, type: "composition", selected: type === 'composition' }, void 0), (0, jsx_runtime_1.jsx)(Panel, { onSelected: onSelected, type: "still", selected: type === 'still' }, void 0)] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)(layout_1.Row, { children: [(0, jsx_runtime_1.jsx)(Panel, { onSelected: onSelected, type: "composition", selected: type === 'composition' }, void 0), (0, jsx_runtime_1.jsx)(Panel, { onSelected: onSelected, type: "still", selected: type === 'still' }, void 0)] }, void 0));
 };
 exports.CompositionType = CompositionType;
 //# sourceMappingURL=CompositionType.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CompositionType.js","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/CompositionType.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"CompositionType.js","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/CompositionType.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,7 @@
+import React, { InputHTMLAttributes } from 'react';
+declare type Props = InputHTMLAttributes<HTMLInputElement> & {
+    onValueChange: (newVal: number) => void;
+};
+export declare const InputDragger: React.FC<Props>;
+export {};
+//# sourceMappingURL=InputDragger.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputDragger.d.ts","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/InputDragger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACb,mBAAmB,EAMnB,MAAM,OAAO,CAAC;AAKf,aAAK,KAAK,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,GAAG;IACpD,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA6GxC,CAAC"}

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

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputDragger = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const input_dragger_click_lock_1 = require("../../state/input-dragger-click-lock");
+const RemInput_1 = require("./RemInput");
+const InputDragger = ({ onValueChange, ...props }) => {
+    const [inputFallback, setInputFallback] = (0, react_1.useState)(false);
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...RemInput_1.inputBaseStyle,
+            backgroundColor: 'transparent',
+            borderColor: 'transparent',
+        };
+    }, []);
+    const span = (0, react_1.useMemo)(() => ({
+        borderBottom: '1px dotted var(--blue)',
+        paddingBottom: 1,
+        color: 'var(--blue)',
+        cursor: 'ew-resize',
+        userSelect: 'none',
+    }), []);
+    const onClick = (0, react_1.useCallback)((e) => {
+        if (!(0, input_dragger_click_lock_1.getClickLock)()) {
+            e.stopPropagation();
+        }
+        if ((0, input_dragger_click_lock_1.getClickLock)()) {
+            return;
+        }
+        setInputFallback(true);
+    }, []);
+    const onBlur = (0, react_1.useCallback)(() => {
+        setInputFallback(false);
+    }, []);
+    const onKeyPress = (0, react_1.useCallback)((e) => {
+        if (e.key === 'Enter') {
+            setInputFallback(false);
+        }
+    }, []);
+    const onPointerDown = (0, react_1.useCallback)((e) => {
+        const { pageX, pageY } = e;
+        const moveListener = (ev) => {
+            var _a, _b;
+            const xDistance = ev.pageX - pageX;
+            const distanceFromStart = Math.sqrt(xDistance ** 2 + (ev.pageY - pageY) ** 2);
+            const step = Number((_a = props.step) !== null && _a !== void 0 ? _a : 1);
+            const min = Number((_b = props.min) !== null && _b !== void 0 ? _b : 0);
+            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(props.value) + diff));
+            const roundToStep = Math.floor(newValue / step) * step;
+            onValueChange(roundToStep);
+        };
+        window.addEventListener('mousemove', moveListener);
+        window.addEventListener('pointerup', () => {
+            window.removeEventListener('mousemove', moveListener);
+            setTimeout(() => {
+                (0, input_dragger_click_lock_1.setClickLock)(false);
+            }, 2);
+        }, {
+            once: true,
+        });
+    }, [onValueChange, props.min, props.step, props.value]);
+    if (inputFallback) {
+        return ((0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, Object.assign({ autoFocus: true, onKeyPress: onKeyPress, onBlur: onBlur }, props), void 0));
+    }
+    return ((0, jsx_runtime_1.jsx)("button", Object.assign({ type: "button", style: style, onClick: onClick, onPointerDown: onPointerDown }, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ style: span }, { children: props.value }), void 0) }), void 0));
+};
+exports.InputDragger = InputDragger;
+//# sourceMappingURL=InputDragger.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputDragger.js","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/InputDragger.tsx"],"names":[],"mappings":";;;;AAAA,iCAOe;AACf,uCAAqC;AACrC,mFAAgF;AAChF,yCAAyD;AAMlD,MAAM,YAAY,GAAoB,CAAC,EAAC,aAAa,EAAE,GAAG,KAAK,EAAC,EAAE,EAAE;IAC1E,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE1D,MAAM,KAAK,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAC1B,OAAO;YACN,GAAG,yBAAc;YACjB,eAAe,EAAE,aAAa;YAC9B,WAAW,EAAE,aAAa;SAC1B,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,IAAI,GAAwB,IAAA,eAAO,EACxC,GAAG,EAAE,CAAC,CAAC;QACN,YAAY,EAAE,wBAAwB;QACtC,aAAa,EAAE,CAAC;QAChB,KAAK,EAAE,aAAa;QACpB,MAAM,EAAE,WAAW;QACnB,UAAU,EAAE,MAAM;KAClB,CAAC,EACF,EAAE,CACF,CAAC;IAEF,MAAM,OAAO,GAAyC,IAAA,mBAAW,EAAC,CAAC,CAAC,EAAE,EAAE;QACvE,IAAI,CAAC,IAAA,uCAAY,GAAE,EAAE;YACpB,CAAC,CAAC,eAAe,EAAE,CAAC;SACpB;QAED,IAAI,IAAA,uCAAY,GAAE,EAAE;YACnB,OAAO;SACP;QAED,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACxB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,MAAM,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QAC/B,gBAAgB,CAAC,KAAK,CAAC,CAAC;IACzB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,UAAU,GAAiD,IAAA,mBAAW,EAC3E,CAAC,CAAC,EAAE,EAAE;QACL,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;YACtB,gBAAgB,CAAC,KAAK,CAAC,CAAC;SACxB;IACF,CAAC,EACD,EAAE,CACF,CAAC;IAEF,MAAM,aAAa,GAAwB,IAAA,mBAAW,EACrD,CAAC,CAAC,EAAE,EAAE;QACL,MAAM,EAAC,KAAK,EAAE,KAAK,EAAC,GAAG,CAAC,CAAC;QACzB,MAAM,YAAY,GAAG,CAAC,EAAc,EAAE,EAAE;;YACvC,MAAM,SAAS,GAAG,EAAE,CAAC,KAAK,GAAG,KAAK,CAAC;YACnC,MAAM,iBAAiB,GAAG,IAAI,CAAC,IAAI,CAClC,SAAS,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,CACxC,CAAC;YACF,MAAM,IAAI,GAAG,MAAM,CAAC,MAAA,KAAK,CAAC,IAAI,mCAAI,CAAC,CAAC,CAAC;YACrC,MAAM,GAAG,GAAG,MAAM,CAAC,MAAA,KAAK,CAAC,GAAG,mCAAI,CAAC,CAAC,CAAC;YACnC,IAAI,iBAAiB,GAAG,CAAC,EAAE;gBAC1B,IAAA,uCAAY,EAAC,IAAI,CAAC,CAAC;aACnB;YAED,MAAM,IAAI,GAAG,IAAA,sBAAW,EACvB,SAAS,EACT,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EACjB,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,CACtB,CAAC;YACF,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC;YACvE,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;YACvD,aAAa,CAAC,WAAW,CAAC,CAAC;QAC5B,CAAC,CAAC;QAEF,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;QACnD,MAAM,CAAC,gBAAgB,CACtB,WAAW,EACX,GAAG,EAAE;YACJ,MAAM,CAAC,mBAAmB,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;YACtD,UAAU,CAAC,GAAG,EAAE;gBACf,IAAA,uCAAY,EAAC,KAAK,CAAC,CAAC;YACrB,CAAC,EAAE,CAAC,CAAC,CAAC;QACP,CAAC,EACD;YACC,IAAI,EAAE,IAAI;SACV,CACD,CAAC;IACH,CAAC,EACD,CAAC,aAAa,EAAE,KAAK,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,CACnD,CAAC;IAEF,IAAI,aAAa,EAAE;QAClB,OAAO,CACN,uBAAC,wBAAa,kBACb,SAAS,QACT,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,IACV,KAAK,UACR,CACF,CAAC;KACF;IAED,OAAO,CACN,iDACC,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,aAAa,EAAE,aAAa,gBAE5B,+CAAM,KAAK,EAAE,IAAI,gBAAG,KAAK,CAAC,KAAK,YAAQ,YAC/B,CACT,CAAC;AACH,CAAC,CAAC;AA7GW,QAAA,YAAY,gBA6GvB"}

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ComboboxValue } from './ComboBox';
+export declare const MenuContent: React.FC<{
+    values: ComboboxValue[];
+    onHide: () => void;
+    onNextMenu: () => void;
+    onPreviousMenu: () => void;
+    leaveLeftSpace: boolean;
+    preselectIndex: false | number;
+    topItemCanBeUnselected: boolean;
+}>;
+//# sourceMappingURL=MenuContent.d.ts.map

package/dist/editor/components/NewComposition/MenuContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuContent.d.ts","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/MenuContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAMtE,OAAO,EAAC,aAAa,EAAC,MAAM,YAAY,CAAC;AAUzC,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IAClC,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,cAAc,EAAE,OAAO,CAAC;IACxB,cAAc,EAAE,KAAK,GAAG,MAAM,CAAC;IAC/B,sBAAsB,EAAE,OAAO,CAAC;CAChC,CAyPA,CAAC"}

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

@@ -0,0 +1,173 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuContent = void 0;
+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 MenuDivider_1 = require("../Menu/MenuDivider");
+const MenuSubItem_1 = require("../Menu/MenuSubItem");
+const styles_1 = require("../Menu/styles");
+const BORDER_SIZE = 1;
+const container = {
+    paddingTop: styles_1.MENU_VERTICAL_PADDING,
+    paddingBottom: styles_1.MENU_VERTICAL_PADDING,
+    border: `${BORDER_SIZE}px solid ${colors_1.INPUT_BORDER_COLOR_UNHOVERED}`,
+    marginLeft: 0 - BORDER_SIZE,
+};
+const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMenu, leaveLeftSpace, topItemCanBeUnselected, }) => {
+    const keybindings = (0, use_keybinding_1.useKeybinding)();
+    const containerRef = (0, react_1.useRef)(null);
+    const [subMenuActivated, setSubMenuActivated] = (0, react_1.useState)(false);
+    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 onEscape = (0, react_1.useCallback)(() => {
+        onHide();
+    }, [onHide]);
+    const onItemSelected = (0, react_1.useCallback)((id) => {
+        setSelectedItem(id);
+    }, []);
+    const onArrowUp = (0, react_1.useCallback)(() => {
+        setSelectedItem((prevItem) => {
+            if (prevItem === null) {
+                return null;
+            }
+            const index = values.findIndex((val) => val.id === prevItem);
+            if ((topItemCanBeUnselected && index === 0) || prevItem === null) {
+                return null;
+            }
+            const previousItems = values.filter((v, i) => i < index && v.type !== 'divider');
+            if (previousItems.length > 0) {
+                return previousItems[previousItems.length - 1].id;
+            }
+            const firstNonDivider = values.find((v) => v.type !== 'divider');
+            if (firstNonDivider) {
+                return firstNonDivider.id;
+            }
+            throw new Error('could not find previous item');
+        });
+    }, [topItemCanBeUnselected, values]);
+    const onArrowDown = (0, react_1.useCallback)(() => {
+        setSelectedItem((prevItem) => {
+            const index = values.findIndex((val) => val.id === prevItem);
+            const nextItem = values.find((v, i) => i > index && v.type !== 'divider');
+            if (nextItem) {
+                return nextItem.id;
+            }
+            const lastNonDivider = values
+                .slice()
+                .reverse()
+                .find((v) => v.type !== 'divider');
+            if (lastNonDivider) {
+                return lastNonDivider.id;
+            }
+            throw new Error('could not find next item');
+        });
+    }, [values]);
+    const onEnter = (0, react_1.useCallback)(() => {
+        if (selectedItem === null) {
+            return onHide();
+        }
+        const item = values.find((i) => i.id === selectedItem);
+        if (!item) {
+            throw new Error('cannot find item');
+        }
+        if (item.type === 'divider') {
+            throw new Error('cannot find divider');
+        }
+        if (item.subMenu) {
+            return setSubMenuActivated('without-mouse');
+        }
+        item.onClick(item.id);
+    }, [onHide, selectedItem, values]);
+    const onArrowRight = (0, react_1.useCallback)(() => {
+        if (selectedItem === null) {
+            return onNextMenu();
+        }
+        const item = values.find((i) => i.id === selectedItem);
+        if (!item) {
+            throw new Error('cannot find item');
+        }
+        if (item.type === 'divider') {
+            throw new Error('cannot find divider');
+        }
+        if (!item.subMenu) {
+            return onNextMenu();
+        }
+        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);
+        return () => {
+            escapeBinding.unregister();
+            leftBinding.unregister();
+            rightBinding.unregister();
+            downBinding.unregister();
+            upBinding.unregister();
+            enterBinding.unregister();
+            spaceBinding.unregister();
+        };
+    }, [
+        keybindings,
+        onEscape,
+        onNextMenu,
+        onPreviousMenu,
+        onArrowDown,
+        onArrowUp,
+        onEnter,
+        onArrowRight,
+    ]);
+    // Disable submenu if not selected
+    (0, react_1.useEffect)(() => {
+        if (!subMenuActivated) {
+            return;
+        }
+        if (selectedItem === null) {
+            return setSubMenuActivated(false);
+        }
+        const item = values.find((i) => i.id === selectedItem);
+        if (!item) {
+            throw new Error('cannot find item');
+        }
+        if (item.type === 'divider') {
+            throw new Error('should not select divider');
+        }
+        if (!item.subMenu && subMenuActivated) {
+            setSubMenuActivated(false);
+        }
+    }, [selectedItem, subMenuActivated, values]);
+    (0, react_1.useEffect)(() => {
+        const { current } = containerRef;
+        if (!current) {
+            return;
+        }
+        const onPointerLeave = () => {
+            if (subMenuActivated) {
+                return;
+            }
+            setSelectedItem(null);
+        };
+        current.addEventListener('pointerleave', onPointerLeave);
+        return () => current.removeEventListener('pointerleave', onPointerLeave);
+    }, [onHide, subMenuActivated]);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: containerRef, style: container }, { children: values.map((item) => {
+            if (item.type === 'divider') {
+                return (0, jsx_runtime_1.jsx)(MenuDivider_1.MenuDivider, {}, item.id);
+            }
+            const onClick = () => {
+                onHide();
+                item.onClick(item.id);
+            };
+            return ((0, jsx_runtime_1.jsx)(MenuSubItem_1.MenuSubItem, { selected: item.id === selectedItem, onActionChosen: onClick, onItemSelected: onItemSelected, label: item.label, id: item.id, keyHint: item.keyHint, leaveLeftSpace: leaveLeftSpace, leftItem: item.leftItem, subMenu: item.subMenu, onQuitMenu: onHide, onNextMenu: onNextMenu, subMenuActivated: subMenuActivated, setSubMenuActivated: setSubMenuActivated }, item.id));
+        }) }), void 0));
+};
+exports.MenuContent = MenuContent;
+//# sourceMappingURL=MenuContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuContent.js","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/MenuContent.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const NewCompHeader: React.FC;
+//# sourceMappingURL=ModalHeader.d.ts.map

package/dist/editor/components/NewComposition/ModalHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalHeader.d.ts","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/ModalHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAmBrD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAYjC,CAAC"}

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

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NewCompHeader = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const modals_1 = require("../../state/modals");
+const layout_1 = require("../layout");
+const CancelButton_1 = require("./CancelButton");
+const container = {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 12,
+    width: '100%',
+    borderBottom: '1px solid black',
+};
+const icon = {
+    height: 20,
+    width: 20,
+};
+const NewCompHeader = () => {
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const onPress = (0, react_1.useCallback)(() => {
+        setSelectedModal(null);
+    }, [setSelectedModal]);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ style: container }, { children: [(0, jsx_runtime_1.jsx)("div", { children: "New composition" }, void 0), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}, void 0), (0, jsx_runtime_1.jsx)(CancelButton_1.CancelButton, { style: icon, onPress: onPress }, void 0)] }), void 0));
+};
+exports.NewCompHeader = NewCompHeader;
+//# sourceMappingURL=ModalHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalHeader.js","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/ModalHeader.tsx"],"names":[],"mappings":";;;;AAAA,iCAAqD;AACrD,+CAAiD;AACjD,sCAA+B;AAC/B,iDAA4C;AAE5C,MAAM,SAAS,GAAwB;IACtC,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,KAAK;IACpB,UAAU,EAAE,QAAQ;IACpB,OAAO,EAAE,EAAE;IACX,KAAK,EAAE,MAAM;IACb,YAAY,EAAE,iBAAiB;CAC/B,CAAC;AAEF,MAAM,IAAI,GAAwB;IACjC,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,EAAE;CACT,CAAC;AAEK,MAAM,aAAa,GAAa,GAAG,EAAE;IAC3C,MAAM,EAAC,gBAAgB,EAAC,GAAG,IAAA,kBAAU,EAAC,sBAAa,CAAC,CAAC;IACrD,MAAM,OAAO,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QAChC,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACxB,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IACvB,OAAO,CACN,+CAAK,KAAK,EAAE,SAAS,iBACpB,sEAA0B,EAC1B,uBAAC,aAAI,aAAG,EACR,uBAAC,2BAAY,IAAC,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,WAAI,aAC1C,CACN,CAAC;AACH,CAAC,CAAC;AAZW,QAAA,aAAa,iBAYxB"}

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

@@ -2,5 +2,7 @@ import React from 'react';
 export declare const NewCompAspectRatio: React.FC<{
     width: number;
     height: number;
+    aspectRatioLocked: boolean;
+    setAspectRatioLocked: React.Dispatch<React.SetStateAction<boolean>>;
 }>;
 //# sourceMappingURL=NewCompAspectRatio.d.ts.map

package/dist/editor/components/NewComposition/NewCompAspectRatio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NewCompAspectRatio.d.ts","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/NewCompAspectRatio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CACf,CAyBA,CAAC"}
+{"version":3,"file":"NewCompAspectRatio.d.ts","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/NewCompAspectRatio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB,EAAE,OAAO,CAAC;IAC3B,oBAAoB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;CACpE,CA6BA,CAAC"}