@gravity-ui/page-constructor 5.14.4-alpha.0 → 5.14.4-alpha.2

package/build/esm/editor-v2/components/DynamicForm/Fields/Array/Array.js

@@ -0,0 +1,81 @@
+import React, { useCallback } from 'react';
+import { Plus } from '@gravity-ui/icons';
+import { Button, Card, Icon } from '@gravity-ui/uikit';
+import { block } from '../../../../../utils';
+import { removeFromArray, swapArrayItems } from '../../../../utils';
+import DynamicForm from '../../DynamicForm';
+import FieldBase from '../../FieldBase/FieldBase';
+import Text from '../Text/Text';
+import ItemButton from './ItemButton/ItemButton';
+import './Array.css';
+const b = block('array-dynamic-field');
+const ArrayDynamicField = (props) => {
+    const { title, values, onUpdate, className, blockConfig } = props;
+    const haveItems = values && Array.isArray(values) && values.length;
+    const onAddItem = useCallback(() => {
+        if (blockConfig.arrayType === 'text') {
+            onUpdate('', haveItems ? [...values, ''] : ['']);
+        }
+        else if (blockConfig.arrayType === 'object') {
+            onUpdate('', haveItems ? [...values, {}] : [{}]);
+        }
+    }, [blockConfig.arrayType, haveItems, onUpdate, values]);
+    const onDeleteItem = useCallback((index) => {
+        if (Array.isArray(values)) {
+            const newArray = removeFromArray(values, index);
+            onUpdate('', newArray);
+        }
+    }, [onUpdate, values]);
+    const onReorderItem = useCallback((index, placement) => {
+        if (Array.isArray(values)) {
+            const newArray = swapArrayItems(values, index, placement === 'up' ? index - 1 : index + 1);
+            onUpdate('', newArray);
+        }
+    }, [onUpdate, values]);
+    const renderInput = useCallback((value, index) => {
+        const arrayItemButton = (React.createElement(ItemButton, { onRemove: () => onDeleteItem(index), onReorderUp: () => onReorderItem(index, 'up'), onReorderDown: () => onReorderItem(index, 'down'), disableReorderUp: index === 0, disableReorderDown: Boolean(haveItems) && values.length === index + 1 }));
+        switch (blockConfig.arrayType) {
+            case 'text': {
+                return (React.createElement("div", { className: b('row') },
+                    React.createElement(Text, { className: b('row-field'), value: String(value), onUpdate: (updateValue) => onUpdate(`[${index}]`, updateValue), onRefresh: (updatedValue) => onUpdate('', updatedValue) }),
+                    arrayItemButton));
+            }
+            case 'object': {
+                if (!blockConfig.properties) {
+                    return null;
+                }
+                return (React.createElement(Card, { key: index, className: b('card') },
+                    React.createElement("div", { className: `${b('row')} ${b('card-head')}` },
+                        React.createElement("div", { className: b('row-title') },
+                            "#",
+                            index),
+                        arrayItemButton),
+                    React.createElement(DynamicForm, { contentConfig: value, blockConfig: blockConfig.properties, onUpdate: (key, updateValue) => onUpdate(`[${index}].${key}`, updateValue) })));
+            }
+            default: {
+                return null;
+            }
+        }
+    }, [blockConfig, haveItems, onDeleteItem, onReorderItem, onUpdate, values]);
+    const renderInputs = useCallback(() => {
+        if (haveItems) {
+            const renderItems = values
+                .map(renderInput)
+                .filter(Boolean);
+            return (React.createElement(React.Fragment, null,
+                renderItems,
+                React.createElement(Button, { className: b('add-button'), onClick: onAddItem },
+                    React.createElement(Icon, { data: Plus }),
+                    blockConfig.buttonText)));
+        }
+        else {
+            return (React.createElement("div", { className: b('empty') },
+                React.createElement(Button, { className: b('add-button'), onClick: onAddItem },
+                    React.createElement(Icon, { data: Plus }),
+                    "Please, add new item")));
+        }
+    }, [blockConfig.buttonText, haveItems, onAddItem, renderInput, values]);
+    return (React.createElement(FieldBase, { title: title, className: b(null, className), onRefresh: (value) => onUpdate('', value), expandable: true },
+        React.createElement(Card, { className: b('card') }, renderInputs())));
+};
+export default ArrayDynamicField;

package/build/esm/editor-v2/components/DynamicForm/Fields/Array/ItemButton/ItemButton.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ClassNameProps } from '../../../../../../models';
+interface ItemButtonProps extends ClassNameProps {
+    onRemove: () => void;
+    onReorderUp: () => void;
+    disableReorderUp?: boolean;
+    onReorderDown: () => void;
+    disableReorderDown?: boolean;
+}
+declare const ItemButton: React.FC<ItemButtonProps>;
+export default ItemButton;

package/build/esm/editor-v2/components/DynamicForm/Fields/Array/ItemButton/ItemButton.js

@@ -0,0 +1,25 @@
+import React, { Fragment, useCallback, useRef, useState } from 'react';
+import { ArrowDown, ArrowUp, EllipsisVertical, TrashBin } from '@gravity-ui/icons';
+import { Button, Icon, Menu, Popup } from '@gravity-ui/uikit';
+import { block } from '../../../../../../utils';
+const b = block('array-item-button');
+const ItemButton = (props) => {
+    const { className, onRemove, onReorderUp, onReorderDown, disableReorderUp = false, disableReorderDown = false, } = props;
+    const buttonRef = useRef(null);
+    const [isOpen, setIsOpen] = useState(false);
+    const onMenuItemClickWrapper = useCallback((callback) => {
+        return () => {
+            setIsOpen(false);
+            callback();
+        };
+    }, []);
+    return (React.createElement(Fragment, null,
+        React.createElement(Button, { className: b(null, className), ref: buttonRef, onClick: () => setIsOpen(true) },
+            React.createElement(Icon, { data: EllipsisVertical })),
+        React.createElement(Popup, { placement: 'bottom-end', anchorRef: buttonRef, open: isOpen, onOutsideClick: () => setIsOpen(false) },
+            React.createElement(Menu, null,
+                React.createElement(Menu.Item, { theme: 'danger', onClick: onMenuItemClickWrapper(onRemove), iconStart: React.createElement(Icon, { data: TrashBin }) }, "Remove"),
+                React.createElement(Menu.Item, { disabled: disableReorderUp, onClick: onMenuItemClickWrapper(onReorderUp), iconStart: React.createElement(Icon, { data: ArrowUp }) }, "Reorder Up"),
+                React.createElement(Menu.Item, { disabled: disableReorderDown, onClick: onMenuItemClickWrapper(onReorderDown), iconStart: React.createElement(Icon, { data: ArrowDown }) }, "Reorder Down")))));
+};
+export default ItemButton;

package/build/esm/editor-v2/components/DynamicForm/Fields/Boolean/Boolean.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ClassNameProps } from '../../../../../models';
+import { FieldBaseParams } from '../../FieldBase/FieldBase';
+interface BooleanProps extends ClassNameProps, FieldBaseParams {
+    value: string;
+    onUpdate: (value: boolean | undefined) => void;
+}
+declare const BooleanDynamicField: React.FC<BooleanProps>;
+export default BooleanDynamicField;

package/build/esm/editor-v2/components/DynamicForm/Fields/Boolean/Boolean.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Switch } from '@gravity-ui/uikit';
+import { block } from '../../../../../utils';
+import FieldBase from '../../FieldBase/FieldBase';
+const b = block('boolean-dynamic-field');
+const BooleanDynamicField = (props) => {
+    const { title, value, onUpdate, className } = props;
+    return (React.createElement(FieldBase, { title: title, className: b(null, className), onRefresh: onUpdate },
+        React.createElement(Switch, { checked: Boolean(value), onUpdate: onUpdate })));
+};
+export default BooleanDynamicField;

package/build/esm/editor-v2/components/DynamicForm/Fields/Number/Number.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ClassNameProps } from '../../../../../models';
+import { FieldBaseParams } from '../../FieldBase/FieldBase';
+interface NumberDynamicFieldProps extends ClassNameProps, FieldBaseParams {
+    value: string;
+    onUpdate: (value: number | undefined) => void;
+}
+declare const NumberDynamicField: React.FC<NumberDynamicFieldProps>;
+export default NumberDynamicField;

package/build/esm/editor-v2/components/DynamicForm/Fields/Number/Number.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { TextInput } from '@gravity-ui/uikit';
+import { block } from '../../../../../utils';
+import FieldBase from '../../FieldBase/FieldBase';
+const b = block('number-dynamic-field');
+const NumberDynamicField = (props) => {
+    const { title, value, onUpdate, className } = props;
+    const onUpdateFunc = (updateValue) => {
+        onUpdate(Number(updateValue));
+    };
+    return (React.createElement(FieldBase, { title: title, className: b(null, className), onRefresh: onUpdate },
+        React.createElement(TextInput, { value: value || '', onUpdate: onUpdateFunc })));
+};
+export default NumberDynamicField;

package/build/esm/editor-v2/components/DynamicForm/Fields/Object/Object.css

@@ -0,0 +1,5 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-object-dynamic-field__card {
+  padding: 12px;
+}

package/build/esm/editor-v2/components/DynamicForm/Fields/Object/Object.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ConfigInput } from '../../../../../common/types';
+import { ClassNameProps, PageContent } from '../../../../../models';
+import { DynamicFormValue } from '../../DynamicForm';
+import { FieldBaseParams } from '../../FieldBase/FieldBase';
+import './Object.css';
+interface ObjectDynamicFieldProps extends ClassNameProps, FieldBaseParams {
+    value: PageContent;
+    onUpdate: (key: string, value: DynamicFormValue) => void;
+    blockConfig: Array<ConfigInput>;
+}
+declare const ObjectDynamicField: React.FC<ObjectDynamicFieldProps>;
+export default ObjectDynamicField;

package/build/esm/editor-v2/components/DynamicForm/Fields/Object/Object.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Card } from '@gravity-ui/uikit';
+import { block } from '../../../../../utils';
+import DynamicForm from '../../DynamicForm';
+import FieldBase from '../../FieldBase/FieldBase';
+import './Object.css';
+const b = block('object-dynamic-field');
+const ObjectDynamicField = (props) => {
+    const { title, value, onUpdate, className, blockConfig } = props;
+    return (React.createElement(FieldBase, { title: title, className: b(null, className), onRefresh: (updatedValue) => onUpdate('', updatedValue), expandable: true },
+        React.createElement(Card, { className: b('card') },
+            React.createElement(DynamicForm, { contentConfig: value, blockConfig: blockConfig, onUpdate: onUpdate }))));
+};
+export default ObjectDynamicField;

package/build/esm/editor-v2/components/DynamicForm/Fields/OneOf/OneOf.css

@@ -0,0 +1,8 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-oneof-dynamic-field__card {
+  padding: 12px;
+}
+.pc-oneof-dynamic-field__radio {
+  margin-bottom: 12px;
+}

package/build/esm/editor-v2/components/DynamicForm/Fields/OneOf/OneOf.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { OneOfInput } from '../../../../../common/types';
+import { ClassNameProps, PageContent } from '../../../../../models';
+import { DynamicFormValue } from '../../DynamicForm';
+import './OneOf.css';
+interface OneOfDynamicFieldProps extends ClassNameProps {
+    contentConfig: PageContent;
+    onUpdate: (key: string, value: DynamicFormValue) => void;
+    inputConfig: OneOfInput;
+}
+declare const OneOfDynamicField: React.FC<OneOfDynamicFieldProps>;
+export default OneOfDynamicField;

package/build/esm/editor-v2/components/DynamicForm/Fields/OneOf/OneOf.js

@@ -0,0 +1,32 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { Card, RadioButton } from '@gravity-ui/uikit';
+import { block } from '../../../../../utils';
+import DynamicForm from '../../DynamicForm';
+import FieldBase from '../../FieldBase/FieldBase';
+import './OneOf.css';
+const b = block('oneof-dynamic-field');
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const getOneOfContentConfig = (contentConfig, name) => {
+    if (name) {
+        return contentConfig ? contentConfig[name] : {};
+    }
+    return contentConfig;
+};
+const OneOfDynamicField = (props) => {
+    const { contentConfig, onUpdate, className, inputConfig } = props;
+    const defaultValue = inputConfig.options[0].value;
+    const [oneOfMetaValue, setOneOfMetaValue] = useState(defaultValue);
+    const oneOfContentConfig = getOneOfContentConfig(contentConfig, inputConfig.name);
+    const oneOfChosenOption = useMemo(() => inputConfig.options.find(({ value: foundOneOfValue }) => foundOneOfValue === oneOfMetaValue), [inputConfig.options, oneOfMetaValue]);
+    const onUpdateOneOf = useCallback((value) => {
+        setOneOfMetaValue(value);
+    }, []);
+    return (React.createElement(FieldBase, { title: inputConfig.title, className: b(null, className), onRefresh: (value) => onUpdate('', value), expandable: true },
+        React.createElement(Card, { className: b('card') },
+            React.createElement(RadioButton, { className: b('radio'), options: inputConfig.options.map((option) => ({
+                    content: option.title,
+                    value: option.value,
+                })), value: oneOfMetaValue, onUpdate: onUpdateOneOf }),
+            oneOfChosenOption && (React.createElement(DynamicForm, { blockConfig: oneOfChosenOption.properties, contentConfig: oneOfContentConfig, onUpdate: onUpdate })))));
+};
+export default OneOfDynamicField;

package/build/esm/editor-v2/components/DynamicForm/Fields/Select/Select.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { SelectMultipleInput, SelectSingleInput } from '../../../../../common/types';
+import { ClassNameProps } from '../../../../../models';
+import { FieldBaseParams } from '../../FieldBase/FieldBase';
+type SelectInput = SelectSingleInput | SelectMultipleInput;
+interface SelectDynamicFieldProps extends ClassNameProps, FieldBaseParams {
+    input: SelectInput;
+    value: string;
+    onUpdate: (value: string | undefined) => void;
+}
+declare const SelectDynamicField: React.FC<SelectDynamicFieldProps>;
+export default SelectDynamicField;

package/build/esm/editor-v2/components/DynamicForm/Fields/Select/Select.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { RadioButton, Select } from '@gravity-ui/uikit';
+import { block } from '../../../../../utils';
+import FieldBase from '../../FieldBase/FieldBase';
+const b = block('select-field');
+const SelectDynamicField = (props) => {
+    const { input, value, onUpdate, className } = props;
+    const inputView = input.view || 'radiobutton';
+    return (React.createElement(FieldBase, { title: input.title, className: b(null, className), onRefresh: onUpdate },
+        inputView === 'select' && (React.createElement(Select, { placeholder: 'Value', value: value ? [value] : [], onUpdate: ([selectValue]) => onUpdate(selectValue), options: input.enum })),
+        inputView === 'radiobutton' && (React.createElement(RadioButton, { options: input.enum, value: value, onUpdate: onUpdate }))));
+};
+export default SelectDynamicField;

package/build/esm/editor-v2/components/DynamicForm/Fields/Text/Text.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ClassNameProps } from '../../../../../models';
+import { FieldBaseParams } from '../../FieldBase/FieldBase';
+interface TextDynamicFieldProps extends ClassNameProps, FieldBaseParams {
+    value: string;
+    onUpdate: (value: string | undefined) => void;
+}
+declare const TextDynamicField: React.FC<TextDynamicFieldProps>;
+export default TextDynamicField;

package/build/esm/editor-v2/components/DynamicForm/Fields/Text/Text.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { TextInput } from '@gravity-ui/uikit';
+import { block } from '../../../../../utils';
+import FieldBase from '../../FieldBase/FieldBase';
+const b = block('text-dynamic-field');
+const TextDynamicField = (props) => {
+    const { title, value, onUpdate, className } = props;
+    return (React.createElement(FieldBase, { title: title, className: b(null, className), onRefresh: onUpdate },
+        React.createElement(TextInput, { value: value || '', onUpdate: onUpdate })));
+};
+export default TextDynamicField;

package/build/esm/editor-v2/components/DynamicForm/Fields/TextArea/TextArea.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ClassNameProps } from '../../../../../models';
+import { FieldBaseParams } from '../../FieldBase/FieldBase';
+interface TextAreaDynamicFieldProps extends ClassNameProps, FieldBaseParams {
+    value: string;
+    onUpdate: (value: string | undefined) => void;
+}
+declare const TextAreaDynamicField: React.FC<TextAreaDynamicFieldProps>;
+export default TextAreaDynamicField;

package/build/esm/editor-v2/components/DynamicForm/Fields/TextArea/TextArea.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { TextArea } from '@gravity-ui/uikit';
+import { block } from '../../../../../utils';
+import FieldBase from '../../FieldBase/FieldBase';
+const b = block('textarea-dynamic-field');
+const TextAreaDynamicField = (props) => {
+    const { title, value, onUpdate, className } = props;
+    return (React.createElement(FieldBase, { title: title, className: b(null, className), onRefresh: onUpdate },
+        React.createElement(TextArea, { minRows: 5, maxRows: 20, value: value || '', onUpdate: onUpdate })));
+};
+export default TextAreaDynamicField;

package/build/esm/editor-v2/components/DynamicForm/utils.d.ts

@@ -0,0 +1,3 @@
+import { PageContent } from '../../../models';
+export declare const getFullPath: (path: string, name: string) => string;
+export declare const getContent: (contentConfig: PageContent, path: string) => any;

package/build/esm/editor-v2/components/DynamicForm/utils.js

@@ -0,0 +1,16 @@
+import _ from 'lodash';
+export const getFullPath = (path, name) => {
+    if (!path && !name) {
+        return '';
+    }
+    if (!path) {
+        return name;
+    }
+    if (!name) {
+        return path;
+    }
+    return path + '.' + name;
+};
+export const getContent = (contentConfig, path) => {
+    return path ? _.get(contentConfig, path) : contentConfig;
+};

package/build/esm/editor-v2/components/GlobalConfig/GlobalConfig.css

@@ -0,0 +1,22 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+body {
+  --pc-editor-header-height: 48px;
+  --pc-editor-code-header-height: 36px;
+  --pc-editor-divider-width: 12px;
+  --pc-editor-left-column-width: calc(400px + var(--pc-editor-divider-width));
+  --pc-editor-base-color: var(--g-color-base-brand);
+  --pc-editor-control-color: var(--g-color-base-brand);
+  --pc-editor-control-icon-color: var(--g-color-text-dark-primary);
+}
+
+.pc-global-config {
+  padding: 12px;
+}
+.pc-global-config__title {
+  margin-bottom: 16px;
+  margin-top: 8px;
+  font-size: var(--g-text-subheader-3-font-size);
+  line-height: var(--g-text-subheader-3-line-height);
+  font-weight: var(--g-text-subheader-font-weight);
+}

package/build/esm/editor-v2/components/GlobalConfig/GlobalConfig.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ClassNameProps } from '../../../models';
+import './GlobalConfig.css';
+interface GlobalConfigProps extends ClassNameProps {
+}
+declare const GlobalConfig: React.FC<GlobalConfigProps>;
+export default GlobalConfig;

package/build/esm/editor-v2/components/GlobalConfig/GlobalConfig.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { block } from '../../../utils';
+import { useContentConfigStore } from '../../context/contentConfig';
+import DynamicForm from '../DynamicForm/DynamicForm';
+import './GlobalConfig.css';
+const b = block('global-config');
+const GlobalConfig = ({ className }) => {
+    const { global, updateField, config } = useContentConfigStore();
+    const onUpdate = (key, value) => {
+        updateField(key, value);
+    };
+    return (React.createElement("div", { className: b(null, className) },
+        React.createElement("div", { className: b('title') }, "Global Config"),
+        React.createElement(DynamicForm, { contentConfig: config, blockConfig: global, onUpdate: onUpdate })));
+};
+export default GlobalConfig;

package/build/esm/editor-v2/components/MiddleScreen/MiddleScreen.css

@@ -0,0 +1,53 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+body {
+  --pc-editor-header-height: 48px;
+  --pc-editor-code-header-height: 36px;
+  --pc-editor-divider-width: 12px;
+  --pc-editor-left-column-width: calc(400px + var(--pc-editor-divider-width));
+  --pc-editor-base-color: var(--g-color-base-brand);
+  --pc-editor-control-color: var(--g-color-base-brand);
+  --pc-editor-control-icon-color: var(--g-color-text-dark-primary);
+}
+
+.pc-middle-screen {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.pc-middle-screen__topbar {
+  height: 40px;
+}
+.pc-middle-screen__wrapper {
+  height: 100%;
+}
+.pc-middle-screen__canvas {
+  transform-origin: left top;
+  overflow-y: scroll;
+  position: relative;
+}
+.pc-middle-screen__overlay {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+.pc-middle-screen__border {
+  position: absolute;
+  border: 3px var(--g-color-line-brand) solid;
+  border-radius: 10px;
+}
+.pc-middle-screen__loading {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--g-color-base-background);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/build/esm/editor-v2/components/MiddleScreen/MiddleScreen.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ClassNameProps } from '../../../models';
+import './MiddleScreen.css';
+interface MiddleScreenProps extends ClassNameProps {
+}
+declare const MiddleScreen: React.FC<MiddleScreenProps>;
+export default MiddleScreen;

package/build/esm/editor-v2/components/MiddleScreen/MiddleScreen.js

@@ -0,0 +1,32 @@
+import React, { useContext } from 'react';
+import { Loader } from '@gravity-ui/uikit';
+import { block } from '../../../utils';
+import { useEditorStore } from '../../context/editorContext';
+import { IframeContext, useIframeStore } from '../../context/iframeContext';
+import Overlay from '../Overlay/Overlay';
+import TopBar from '../TopBar/TopBar';
+import './MiddleScreen.css';
+const b = block('middle-screen');
+const MiddleScreen = ({ className }) => {
+    const { url, height, zoom, decreaseZoom, increaseZoom, setZoom } = useIframeStore();
+    const { initialized } = useEditorStore();
+    const { setIframeElement } = useContext(IframeContext);
+    return (React.createElement("div", { className: b(null, className) },
+        React.createElement("div", { className: b('topbar') },
+            React.createElement(TopBar, { onZoomUpdate: setZoom, zoom: zoom, onDecreaseZoom: decreaseZoom, onIncreaseZoom: increaseZoom })),
+        React.createElement("div", { className: b('wrapper') },
+            React.createElement("div", { className: b('canvas', { hidden: !initialized }), style: {
+                    transform: `scale(${zoom}%)`,
+                    height: `${(100 / zoom) * 100}%`,
+                    width: `${(100 / zoom) * 100}%`,
+                } },
+                React.createElement("iframe", { ref: (element) => {
+                        if (element) {
+                            setIframeElement(element);
+                        }
+                    }, className: b('iframe'), src: url, height: `${height}px`, width: "100%", frameBorder: "0" }),
+                React.createElement(Overlay, { className: b('overlay') }),
+                !initialized && (React.createElement("div", { className: b('loading') },
+                    React.createElement(Loader, { size: 'l' })))))));
+};
+export default MiddleScreen;

package/build/esm/editor-v2/components/Overlay/Overlay.css

@@ -0,0 +1,56 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+body {
+  --pc-editor-header-height: 48px;
+  --pc-editor-code-header-height: 36px;
+  --pc-editor-divider-width: 12px;
+  --pc-editor-left-column-width: calc(400px + var(--pc-editor-divider-width));
+  --pc-editor-base-color: var(--g-color-base-brand);
+  --pc-editor-control-color: var(--g-color-base-brand);
+  --pc-editor-control-icon-color: var(--g-color-text-dark-primary);
+}
+
+.pc-overlay {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+.pc-overlay__border {
+  position: absolute;
+  border: 3px var(--g-color-line-brand) solid;
+  box-sizing: border-box;
+  box-shadow: 4px 4px 8px 0 var(--g-color-sfx-shadow);
+}
+.pc-overlay__line {
+  position: absolute;
+  border: 3px var(--g-color-base-selection) solid;
+}
+.pc-overlay__line_position_top {
+  border-top: 5px var(--g-color-line-brand) solid;
+}
+.pc-overlay__line_position_bottom {
+  border-bottom: 5px var(--g-color-line-brand) solid;
+}
+.pc-overlay__line_position_left {
+  border-left: 5px var(--g-color-line-brand) solid;
+}
+.pc-overlay__line_position_right {
+  border-right: 5px var(--g-color-line-brand) solid;
+}
+.pc-overlay__actions {
+  pointer-events: auto;
+  position: absolute;
+  bottom: -40px;
+  left: 0;
+  display: flex;
+  align-items: center;
+  background: transparent;
+  box-shadow: 4px 4px 8px 0 var(--g-color-sfx-shadow);
+  border-radius: 20px;
+}
+.pc-overlay__action-button_grip {
+  cursor: grab;
+}

package/build/esm/editor-v2/components/Overlay/Overlay.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ClassNameProps } from '../../../models';
+import './Overlay.css';
+interface OverlayProps extends ClassNameProps {
+}
+declare const Overlay: React.FC<OverlayProps>;
+export default Overlay;

package/build/esm/editor-v2/components/Overlay/Overlay.js

@@ -0,0 +1,69 @@
+import React, { useCallback, useState } from 'react';
+import { Copy, Grip, TrashBin } from '@gravity-ui/icons';
+import { Button, Icon } from '@gravity-ui/uikit';
+import { ActionTypes, } from '../../../common/types';
+import { block } from '../../../utils';
+import { useContentConfigStore } from '../../context/contentConfig';
+import { useEditorStore } from '../../context/editorContext';
+import { useIframeStore } from '../../context/iframeContext';
+import { useMessageObserver, useMessageSender } from '../../context/messagesContext';
+import './Overlay.css';
+const b = block('overlay');
+const Overlay = ({ className }) => {
+    const { selectedBlock } = useEditorStore();
+    const [insertLineBox, setInsertLineBox] = useState(undefined);
+    const { height } = useIframeStore();
+    const { deleteBlock, duplicateBlock } = useContentConfigStore();
+    const sendMessage = useMessageSender();
+    const margin = 0;
+    useMessageObserver(ActionTypes.OverlayModeOnMove, (payload) => {
+        if (payload && payload.block) {
+            const { rect, cursorPosition } = payload.block;
+            setInsertLineBox({
+                left: rect.x,
+                top: rect.y,
+                height: rect.height,
+                width: rect.width,
+                position: cursorPosition,
+            });
+        }
+    });
+    useMessageObserver(ActionTypes.InsertModeDisable, () => {
+        setInsertLineBox(undefined);
+    });
+    useMessageObserver(ActionTypes.ReorderModeDisable, () => {
+        setInsertLineBox(undefined);
+    });
+    const onMouseDown = useCallback(() => {
+        if (selectedBlock) {
+            sendMessage({
+                type: ActionTypes.ReorderModeEnable,
+                payload: { path: selectedBlock.path },
+            });
+        }
+    }, [selectedBlock, sendMessage]);
+    return (React.createElement("div", { className: b(null, className), style: { height: `${height}px` } },
+        selectedBlock ? (React.createElement("div", { className: b('border'), style: {
+                top: selectedBlock.rect.top - margin,
+                left: selectedBlock.rect.left - margin,
+                width: selectedBlock.rect.width + margin * 2,
+                height: selectedBlock.rect.height + margin * 2,
+            } },
+            React.createElement("div", { className: b('actions') },
+                React.createElement("div", { onMouseDown: onMouseDown },
+                    React.createElement(Button, { pin: 'round-clear', className: `${b('action-button', { grip: true })}`, size: 'm', view: 'action' },
+                        React.createElement(Icon, { data: Grip, size: 18 }))),
+                React.createElement(Button, { pin: 'clear-clear', className: b('action-button'), size: 'm', view: 'action', onClick: () => selectedBlock && deleteBlock(selectedBlock.path) },
+                    React.createElement(Icon, { data: TrashBin, size: 18 })),
+                React.createElement(Button, { pin: 'clear-round', className: b('action-button'), size: 'm', view: 'action', onClick: () => selectedBlock && duplicateBlock(selectedBlock.path) },
+                    React.createElement(Icon, { data: Copy, size: 18 }))))) : null,
+        insertLineBox ? (React.createElement("div", { className: b('line', {
+                position: insertLineBox.position,
+            }), style: {
+                top: insertLineBox.top,
+                left: insertLineBox.left,
+                width: insertLineBox.width,
+                height: insertLineBox.height,
+            } })) : null));
+};
+export default Overlay;