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

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

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+const types_1 = require("../../../common/types");
+const utils_1 = require("../../../utils");
+const contentConfig_1 = require("../../context/contentConfig");
+const editorContext_1 = require("../../context/editorContext");
+const iframeContext_1 = require("../../context/iframeContext");
+const messagesContext_1 = require("../../context/messagesContext");
+const b = (0, utils_1.block)('overlay');
+const Overlay = ({ className }) => {
+    const { selectedBlock } = (0, editorContext_1.useEditorStore)();
+    const [insertLineBox, setInsertLineBox] = (0, react_1.useState)(undefined);
+    const { height } = (0, iframeContext_1.useIframeStore)();
+    const { deleteBlock, duplicateBlock } = (0, contentConfig_1.useContentConfigStore)();
+    const sendMessage = (0, messagesContext_1.useMessageSender)();
+    const margin = 0;
+    (0, messagesContext_1.useMessageObserver)(types_1.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,
+            });
+        }
+    });
+    (0, messagesContext_1.useMessageObserver)(types_1.ActionTypes.InsertModeDisable, () => {
+        setInsertLineBox(undefined);
+    });
+    (0, messagesContext_1.useMessageObserver)(types_1.ActionTypes.ReorderModeDisable, () => {
+        setInsertLineBox(undefined);
+    });
+    const onMouseDown = (0, react_1.useCallback)(() => {
+        if (selectedBlock) {
+            sendMessage({
+                type: types_1.ActionTypes.ReorderModeEnable,
+                payload: { path: selectedBlock.path },
+            });
+        }
+    }, [selectedBlock, sendMessage]);
+    return (react_1.default.createElement("div", { className: b(null, className), style: { height: `${height}px` } },
+        selectedBlock ? (react_1.default.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_1.default.createElement("div", { className: b('actions') },
+                react_1.default.createElement("div", { onMouseDown: onMouseDown },
+                    react_1.default.createElement(uikit_1.Button, { pin: 'round-clear', className: `${b('action-button', { grip: true })}`, size: 'm', view: 'action' },
+                        react_1.default.createElement(uikit_1.Icon, { data: icons_1.Grip, size: 18 }))),
+                react_1.default.createElement(uikit_1.Button, { pin: 'clear-clear', className: b('action-button'), size: 'm', view: 'action', onClick: () => selectedBlock && deleteBlock(selectedBlock.path) },
+                    react_1.default.createElement(uikit_1.Icon, { data: icons_1.TrashBin, size: 18 })),
+                react_1.default.createElement(uikit_1.Button, { pin: 'clear-round', className: b('action-button'), size: 'm', view: 'action', onClick: () => selectedBlock && duplicateBlock(selectedBlock.path) },
+                    react_1.default.createElement(uikit_1.Icon, { data: icons_1.Copy, size: 18 }))))) : null,
+        insertLineBox ? (react_1.default.createElement("div", { className: b('line', {
+                position: insertLineBox.position,
+            }), style: {
+                top: insertLineBox.top,
+                left: insertLineBox.left,
+                width: insertLineBox.width,
+                height: insertLineBox.height,
+            } })) : null));
+};
+exports.default = Overlay;

package/build/cjs/editor-v2/components/Sidebar/Sidebar.css

@@ -0,0 +1,66 @@
+/* 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-sidebar {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  display: flex;
+}
+.pc-sidebar_position_left {
+  flex-direction: row;
+}
+.pc-sidebar_position_right {
+  flex-direction: row-reverse;
+}
+.pc-sidebar__buttons-wrapper {
+  border-right: 1px solid var(--g-color-line-generic);
+}
+.pc-sidebar__buttons {
+  display: inline-flex;
+  flex-direction: column;
+  padding: 8px;
+  gap: 8px;
+}
+.pc-sidebar__buttons:hover .pc-sidebar__label-wrapper {
+  opacity: 1;
+}
+.pc-sidebar__body {
+  flex: 1;
+  border-right: 1px solid var(--g-color-line-generic);
+  overflow-y: auto;
+}
+.pc-sidebar__button-wrapper {
+  position: relative;
+}
+.pc-sidebar_position_right .pc-sidebar__button-wrapper:hover .pc-sidebar__label-wrapper {
+  right: 40px;
+}
+.pc-sidebar_position_right .pc-sidebar__label-wrapper {
+  right: 50px;
+}
+.pc-sidebar_position_left .pc-sidebar__button-wrapper:hover .pc-sidebar__label-wrapper {
+  left: 40px;
+}
+.pc-sidebar_position_left .pc-sidebar__label-wrapper {
+  left: 50px;
+}
+.pc-sidebar__label-wrapper {
+  pointer-events: none;
+  opacity: 0;
+  background-color: var(--g-color-base-background);
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 100;
+  transition: left 0.1s ease, right 0.1s ease, opacity 0.1s ease;
+}

package/build/cjs/editor-v2/components/Sidebar/Sidebar.d.ts

@@ -0,0 +1,7 @@
+import { ClassNameProps } from '../../../models';
+interface SidebarProps extends ClassNameProps {
+    position: 'left' | 'right';
+    startMenu?: string;
+}
+export declare const Sidebar: ({ className, position, startMenu }: SidebarProps) => JSX.Element;
+export {};

package/build/cjs/editor-v2/components/Sidebar/Sidebar.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sidebar = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+const utils_1 = require("../../../utils");
+const BlockConfig_1 = tslib_1.__importDefault(require("../BlockConfig/BlockConfig"));
+const BlocksList_1 = tslib_1.__importDefault(require("../BlocksList/BlocksList"));
+const GlobalConfig_1 = tslib_1.__importDefault(require("../GlobalConfig/GlobalConfig"));
+const SourceCode_1 = tslib_1.__importDefault(require("../SourceCode/SourceCode"));
+const Tree_1 = tslib_1.__importDefault(require("../Tree/Tree"));
+const b = (0, utils_1.block)('sidebar');
+const Sidebar = ({ className, position, startMenu }) => {
+    const [currentTab, setCurrentTab] = (0, react_1.useState)(startMenu || 'blocks-list');
+    const defaultTabs = (0, react_1.useMemo)(() => [
+        {
+            id: 'blocks-list',
+            name: 'Блоки',
+            icon: icons_1.Rectangles4,
+            component: BlocksList_1.default,
+            position: 'left',
+        },
+        {
+            id: 'global-config',
+            name: 'Глобальная конфигурация',
+            icon: icons_1.Gear,
+            component: GlobalConfig_1.default,
+            position: 'left',
+        },
+        {
+            id: 'tree',
+            name: 'Дерево',
+            icon: icons_1.FolderTree,
+            component: Tree_1.default,
+            position: 'left',
+        },
+        {
+            id: 'block-config',
+            name: 'Конфигурация блока',
+            icon: icons_1.Square,
+            component: BlockConfig_1.default,
+            position: 'right',
+        },
+        {
+            id: 'source-code',
+            name: 'Исходный код',
+            icon: icons_1.Code,
+            component: SourceCode_1.default,
+            position: 'both',
+        },
+    ], []);
+    const filteredTabs = defaultTabs.filter(({ position: tabPosition }) => tabPosition === 'both' || tabPosition === position);
+    const TabComponent = (0, react_1.useMemo)(() => {
+        const findTab = defaultTabs.find(({ id }) => id === currentTab);
+        return findTab === null || findTab === void 0 ? void 0 : findTab.component;
+    }, [currentTab, defaultTabs]);
+    return (react_1.default.createElement("div", { className: `${b(null, className)} ${b('', { position })}` },
+        react_1.default.createElement("div", { className: b('buttons-wrapper') },
+            react_1.default.createElement("div", { className: b('buttons') }, filteredTabs.map(({ id, icon, name }) => (react_1.default.createElement("div", { className: b('button-wrapper'), key: id },
+                react_1.default.createElement(uikit_1.Button, { view: currentTab === id ? 'action' : 'flat', size: "m", onClick: () => setCurrentTab(id) },
+                    react_1.default.createElement(uikit_1.Icon, { data: icon, size: 18 })),
+                react_1.default.createElement("div", { className: b('label-wrapper') },
+                    react_1.default.createElement(uikit_1.Label, { theme: 'normal', size: 'm' }, name))))))),
+        react_1.default.createElement("div", { className: b('body') }, TabComponent && react_1.default.createElement(TabComponent, null))));
+};
+exports.Sidebar = Sidebar;

package/build/cjs/editor-v2/components/Source/Source.css

@@ -0,0 +1,21 @@
+/* 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-source {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 8px;
+  gap: 8px;
+}
+.pc-source__text {
+  flex: 1;
+}

package/build/cjs/editor-v2/components/Source/Source.d.ts

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

package/build/cjs/editor-v2/components/Source/Source.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+const utils_1 = require("../../../utils");
+const editorContext_1 = require("../../context/editorContext");
+const iframeContext_1 = require("../../context/iframeContext");
+const b = (0, utils_1.block)('source');
+const Source = ({ className }) => {
+    const { url, setUrl } = (0, iframeContext_1.useIframeStore)();
+    const { resetInitialize } = (0, editorContext_1.useEditorStore)();
+    const { disableUrlField } = (0, react_1.useContext)(iframeContext_1.IframeContext);
+    const onUpdateUrl = (0, react_1.useCallback)((value) => {
+        setUrl(value);
+        resetInitialize();
+    }, [resetInitialize, setUrl]);
+    const reloadIframe = () => {
+        setUrl('');
+        setTimeout(() => {
+            setUrl(url);
+        }, 0);
+    };
+    return (react_1.default.createElement("div", { className: b(null, className) },
+        react_1.default.createElement(uikit_1.Button, { view: "flat", size: "m", onClick: reloadIframe },
+            react_1.default.createElement(uikit_1.Icon, { data: icons_1.ArrowRotateRight, size: 18 })),
+        react_1.default.createElement(uikit_1.TextInput, { disabled: disableUrlField, className: b('text'), size: "s", value: url, onUpdate: onUpdateUrl })));
+};
+exports.default = Source;

package/build/cjs/editor-v2/components/SourceCode/SourceCode.css

@@ -0,0 +1,44 @@
+/* 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-source-code {
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.pc-source-code__code {
+  white-space: pre;
+  font-family: var(--g-font-family-monospace);
+  font-size: var(--g-text-code-inline-1-font-size);
+  line-height: var(--g-text-code-inline-1-line-height);
+  font-weight: var(--g-text-code-font-weight);
+  padding: 0 10px 10px;
+  overflow: auto;
+}
+.pc-source-code__head {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+  padding: 10px 10px 0;
+}
+.pc-source-code__textarea textarea {
+  font-family: var(--g-font-family-monospace);
+  font-size: var(--g-text-code-inline-1-font-size);
+  line-height: var(--g-text-code-inline-1-line-height);
+  font-weight: var(--g-text-code-font-weight);
+}
+.pc-source-code__alert {
+  margin-bottom: 8px;
+}

package/build/cjs/editor-v2/components/SourceCode/SourceCode.d.ts

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

package/build/cjs/editor-v2/components/SourceCode/SourceCode.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+const js_yaml_1 = tslib_1.__importDefault(require("js-yaml"));
+const utils_1 = require("../../../utils");
+const useContentConfigStore_1 = require("../../context/contentConfig/hooks/useContentConfigStore");
+const b = (0, utils_1.block)('source-code');
+const SourceCode = ({ className }) => {
+    const { config, setConfig } = (0, useContentConfigStore_1.useContentConfigStore)();
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const [tempConfig, setTempConfig] = (0, react_1.useState)('');
+    const [format, setFormat] = (0, react_1.useState)('yaml');
+    const onUpdate = () => {
+        let object;
+        try {
+            if (tempConfig.trim().startsWith('{') && tempConfig.trim().endsWith('}')) {
+                object = JSON.parse(tempConfig);
+            }
+            else {
+                object = js_yaml_1.default.load(tempConfig);
+            }
+        }
+        catch (_a) {
+            // eslint-disable-next-line no-console
+            console.error('JSON.parse failed');
+        }
+        if (object) {
+            setConfig(object);
+        }
+        setIsOpen(false);
+    };
+    const text = format === 'yaml' ? js_yaml_1.default.dump(config) : JSON.stringify(config, null, 2);
+    return (react_1.default.createElement("div", { className: b(null, className) },
+        react_1.default.createElement("div", { className: b('head') },
+            react_1.default.createElement(uikit_1.RadioButton, { value: format, onUpdate: setFormat },
+                react_1.default.createElement(uikit_1.RadioButton.Option, { value: 'yaml', content: 'YAML' }),
+                react_1.default.createElement(uikit_1.RadioButton.Option, { value: 'json', content: 'JSON' })),
+            react_1.default.createElement(uikit_1.CopyToClipboard, { text: text, timeout: 1000 }, (status) => (react_1.default.createElement(uikit_1.Button, null,
+                status === 'pending' ? (react_1.default.createElement(uikit_1.Icon, { data: icons_1.Copy })) : (react_1.default.createElement(uikit_1.Icon, { data: icons_1.CopyCheck })),
+                "Copy"))),
+            react_1.default.createElement(uikit_1.Button, { onClick: () => setIsOpen(true) },
+                react_1.default.createElement(uikit_1.Icon, { data: icons_1.ArrowDownToSquare }),
+                "Import")),
+        react_1.default.createElement("div", { className: b('code') }, text),
+        react_1.default.createElement(uikit_1.Dialog, { onClose: () => setIsOpen(false), open: isOpen, size: 'l' },
+            react_1.default.createElement(uikit_1.Dialog.Header, { caption: "New configuration" }),
+            react_1.default.createElement(uikit_1.Dialog.Body, null,
+                react_1.default.createElement(uikit_1.Alert, { className: b('alert'), theme: 'info', title: 'You can use YAML or JSON', message: 'The editor will automatically understand which format is needed.' }),
+                react_1.default.createElement(uikit_1.TextArea, { className: b('textarea'), value: tempConfig, onUpdate: setTempConfig, rows: 25 })),
+            react_1.default.createElement(uikit_1.Dialog.Footer, { showError: false, listenKeyEnter: true, preset: 'default', textButtonApply: 'Apply', textButtonCancel: 'Cancel', onClickButtonApply: onUpdate, onClickButtonCancel: () => setIsOpen(false) }))));
+};
+exports.default = SourceCode;

package/build/cjs/editor-v2/components/TopBar/TopBar.css

@@ -0,0 +1,34 @@
+/* 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-topbar {
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  width: 100%;
+  height: 40px;
+  border-bottom: 1px solid var(--g-color-line-generic);
+}
+.pc-topbar__switches {
+  display: flex;
+  align-items: center;
+  width: auto;
+  height: 100%;
+  padding: 0 12px;
+  gap: 12px;
+  border-right: 1px solid var(--g-color-line-generic);
+}
+.pc-topbar__source {
+  flex: 1;
+  width: 100%;
+  box-sizing: border-box;
+}

package/build/cjs/editor-v2/components/TopBar/TopBar.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ClassNameProps } from '../../../models';
+interface TopBarProps extends ClassNameProps {
+    onZoomUpdate: (zoom: number) => void;
+    onDecreaseZoom: () => void;
+    onIncreaseZoom: () => void;
+    zoom: number;
+}
+declare const TopBar: React.FC<TopBarProps>;
+export default TopBar;

package/build/cjs/editor-v2/components/TopBar/TopBar.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const utils_1 = require("../../../utils");
+const Source_1 = tslib_1.__importDefault(require("../Source/Source"));
+const ViewSwitches_1 = tslib_1.__importDefault(require("../ViewSwitches/ViewSwitches"));
+const b = (0, utils_1.block)('topbar');
+const TopBar = ({ zoom, onDecreaseZoom, onIncreaseZoom, onZoomUpdate, className, }) => {
+    return (react_1.default.createElement("div", { className: b(null, className) },
+        react_1.default.createElement("div", { className: b('switches') },
+            react_1.default.createElement(ViewSwitches_1.default, { onZoomUpdate: onZoomUpdate, onDecreaseZoom: onDecreaseZoom, onIncreaseZoom: onIncreaseZoom, zoom: zoom })),
+        react_1.default.createElement(Source_1.default, { className: b('source') })));
+};
+exports.default = TopBar;

package/build/cjs/editor-v2/components/Tree/Tree.css

@@ -0,0 +1,148 @@
+/* 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-tree {
+  padding: 12px;
+}
+.pc-tree__item {
+  padding: 8px;
+  margin-bottom: 8px;
+}
+.pc-tree__item:last-child {
+  margin-bottom: 0;
+}
+.pc-tree__item_deep_1 {
+  position: relative;
+  margin-left: 16px;
+  width: calc(100% - 16px);
+}
+.pc-tree__item_deep_1:before {
+  content: "";
+  position: absolute;
+  right: calc(100% + 12px);
+  height: 100%;
+  width: 2px;
+  background-color: var(--g-color-line-generic-accent);
+  top: 0;
+}
+.pc-tree__item_deep_2 {
+  position: relative;
+  margin-left: 32px;
+  width: calc(100% - 32px);
+}
+.pc-tree__item_deep_2:before {
+  content: "";
+  position: absolute;
+  right: calc(100% + 12px);
+  height: 100%;
+  width: 2px;
+  background-color: var(--g-color-line-generic-accent);
+  top: 0;
+}
+.pc-tree__item_deep_3 {
+  position: relative;
+  margin-left: 48px;
+  width: calc(100% - 48px);
+}
+.pc-tree__item_deep_3:before {
+  content: "";
+  position: absolute;
+  right: calc(100% + 12px);
+  height: 100%;
+  width: 2px;
+  background-color: var(--g-color-line-generic-accent);
+  top: 0;
+}
+.pc-tree__item_deep_4 {
+  position: relative;
+  margin-left: 64px;
+  width: calc(100% - 64px);
+}
+.pc-tree__item_deep_4:before {
+  content: "";
+  position: absolute;
+  right: calc(100% + 12px);
+  height: 100%;
+  width: 2px;
+  background-color: var(--g-color-line-generic-accent);
+  top: 0;
+}
+.pc-tree__item_deep_5 {
+  position: relative;
+  margin-left: 80px;
+  width: calc(100% - 80px);
+}
+.pc-tree__item_deep_5:before {
+  content: "";
+  position: absolute;
+  right: calc(100% + 12px);
+  height: 100%;
+  width: 2px;
+  background-color: var(--g-color-line-generic-accent);
+  top: 0;
+}
+.pc-tree__item_deep_6 {
+  position: relative;
+  margin-left: 96px;
+  width: calc(100% - 96px);
+}
+.pc-tree__item_deep_6:before {
+  content: "";
+  position: absolute;
+  right: calc(100% + 12px);
+  height: 100%;
+  width: 2px;
+  background-color: var(--g-color-line-generic-accent);
+  top: 0;
+}
+.pc-tree__item_deep_7 {
+  position: relative;
+  margin-left: 112px;
+  width: calc(100% - 112px);
+}
+.pc-tree__item_deep_7:before {
+  content: "";
+  position: absolute;
+  right: calc(100% + 12px);
+  height: 100%;
+  width: 2px;
+  background-color: var(--g-color-line-generic-accent);
+  top: 0;
+}
+.pc-tree__item_deep_8 {
+  position: relative;
+  margin-left: 128px;
+  width: calc(100% - 128px);
+}
+.pc-tree__item_deep_8:before {
+  content: "";
+  position: absolute;
+  right: calc(100% + 12px);
+  height: 100%;
+  width: 2px;
+  background-color: var(--g-color-line-generic-accent);
+  top: 0;
+}
+.pc-tree__item_deep_9 {
+  position: relative;
+  margin-left: 144px;
+  width: calc(100% - 144px);
+}
+.pc-tree__item_deep_9:before {
+  content: "";
+  position: absolute;
+  right: calc(100% + 12px);
+  height: 100%;
+  width: 2px;
+  background-color: var(--g-color-line-generic-accent);
+  top: 0;
+}

package/build/cjs/editor-v2/components/Tree/Tree.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+import { ItemConfig } from '../../../common/types';
+export interface TreeProps {
+    blocks: ItemConfig[];
+}
+declare const Tree: (_p: PropsWithChildren<TreeProps>) => JSX.Element;
+export default Tree;

package/build/cjs/editor-v2/components/Tree/Tree.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const utils_1 = require("../../../utils");
+const contentConfig_1 = require("../../context/contentConfig");
+const b = (0, utils_1.block)('tree');
+const generateTree = (items) => {
+    return items.map((item) => {
+        var _a;
+        let children;
+        if ('children' in item && ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length)) {
+            children = generateTree(item.children);
+        }
+        return {
+            type: item.type,
+            children,
+        };
+    });
+};
+const Tree = (_p) => {
+    const { config } = (0, contentConfig_1.useContentConfigStore)();
+    const blockTree = generateTree(config.blocks);
+    const renderTree = (items, deepLevel = 0) => {
+        return items.map(({ type, children }, index) => (react_1.default.createElement(react_1.default.Fragment, { key: index },
+            react_1.default.createElement(uikit_1.Card, { className: b('item', { deep: deepLevel }) }, type),
+            children && renderTree(children, deepLevel + 1))));
+    };
+    return react_1.default.createElement("div", { className: b() }, renderTree(blockTree));
+};
+exports.default = Tree;

package/build/cjs/editor-v2/components/ViewSwitches/ViewSwitches.css

@@ -0,0 +1,23 @@
+/* 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-view-switches {
+  display: inline-flex;
+  gap: 12px;
+}
+.pc-view-switches__zoom {
+  display: flex;
+  gap: 4px;
+}
+.pc-view-switches__zoom-input {
+  width: 40px;
+}

package/build/cjs/editor-v2/components/ViewSwitches/ViewSwitches.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ClassNameProps } from '../../../models';
+interface ViewSwitchesProps extends ClassNameProps {
+    onZoomUpdate: (zoom: number) => void;
+    onDecreaseZoom: () => void;
+    onIncreaseZoom: () => void;
+    zoom: number;
+}
+declare const ViewSwitches: React.FC<ViewSwitchesProps>;
+export default ViewSwitches;