@gravity-ui/page-constructor 5.12.0 → 5.14.0

package/build/cjs/sub-blocks/BasicCard/BasicCard.js

@@ -13,12 +13,9 @@ const BasicCard = (props) => {
     const titleId = (0, uikit_1.useUniqId)();
     const descriptionId = (0, uikit_1.useUniqId)();
     const areControlsInFooter = controlPosition === 'footer';
-    return (react_1.default.createElement(components_1.CardBase, Object.assign({ className: b() }, cardParams, { extraProps: { 'aria-describedby': descriptionId, 'aria-labelledby': titleId } }),
+    return (react_1.default.createElement(components_1.CardBase, Object.assign({ className: b(), contentClassName: b('content') }, cardParams, { extraProps: { 'aria-describedby': descriptionId, 'aria-labelledby': titleId } }),
         react_1.default.createElement(components_1.CardBase.Content, null,
-            react_1.default.createElement(components_1.IconWrapper, { icon: icon ? { value: icon, position: iconPosition } : undefined },
-                react_1.default.createElement(Content_1.default, { title: title, titleId: titleId, text: text, textId: descriptionId, additionalInfo: additionalInfo, links: areControlsInFooter ? undefined : links, list: list, buttons: areControlsInFooter ? undefined : buttons, size: "s", colSizes: { all: 12, md: 12 } }))),
-        areControlsInFooter && (buttons || links) && (react_1.default.createElement(components_1.CardBase.Footer, { className: b('footer') },
-            react_1.default.createElement(components_1.Links, { className: b('links'), size: "s", links: links, titleId: titleId }),
-            react_1.default.createElement(components_1.Buttons, { className: b('buttons'), size: "s", buttons: buttons, titleId: titleId })))));
+            react_1.default.createElement(components_1.IconWrapper, { icon: icon ? { value: icon, position: iconPosition } : undefined, className: b('wrapper') },
+                react_1.default.createElement(Content_1.default, { title: title, titleId: titleId, text: text, textId: descriptionId, additionalInfo: additionalInfo, links: links, list: list, buttons: buttons, size: "s", colSizes: { all: 12, md: 12 }, controlPosition: areControlsInFooter ? 'bottom' : 'default' })))));
 };
 exports.default = BasicCard;

package/build/cjs/sub-blocks/BasicCard/schema.js

@@ -6,12 +6,12 @@ const omit_1 = tslib_1.__importDefault(require("lodash/omit"));
 const schema_1 = require("../../components/Image/schema");
 const common_1 = require("../../schema/validators/common");
 const schema_2 = require("../Content/schema");
-const BasicCardContentProps = (0, omit_1.default)(schema_2.ContentBase, ['size', 'theme']);
+const BasicCardContentProps = (0, omit_1.default)(schema_2.ContentBase, ['size', 'theme', 'controlPosition']);
 exports.BasicCard = {
     'basic-card': {
         additionalProperties: false,
         required: [],
-        properties: Object.assign(Object.assign(Object.assign(Object.assign({}, common_1.BaseProps), common_1.CardBase), BasicCardContentProps), { url: {
+        properties: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, common_1.BaseProps), common_1.CardBase), common_1.CardLayoutProps), BasicCardContentProps), { url: {
                 type: 'string',
             }, urlTitle: {
                 type: 'string',

package/build/cjs/sub-blocks/Content/Content.css

@@ -9,6 +9,8 @@ unpredictable css rules order in build */
   --pc-monochrome-button-background-color: #262626;
   --pc-monochrome-button-background-color-hover: #393939;
   --pc-monochrome-button-color: var(--g-color-text-light-primary);
+  display: flex;
+  flex-direction: column;
 }
 .pc-content__notice .yfm ol,
 .pc-content__notice .yfm ul, .pc-content__text .yfm ol,
@@ -145,4 +147,13 @@ unpredictable css rules order in build */
 }
 .pc-content_theme_light .pc-content__title a:hover {
   color: var(--g-color-text-dark-secondary);
+}
+.pc-content_control-position_bottom .pc-content__notice:has(+ .pc-content__buttons), .pc-content_control-position_bottom .pc-content__notice:has(+ .pc-content__link),
+.pc-content_control-position_bottom .pc-content__list:has(+ .pc-content__buttons),
+.pc-content_control-position_bottom .pc-content__list:has(+ .pc-content__link),
+.pc-content_control-position_bottom .pc-content__text:has(+ .pc-content__buttons),
+.pc-content_control-position_bottom .pc-content__text:has(+ .pc-content__link),
+.pc-content_control-position_bottom .pc-content__title:has(+ .pc-content__buttons),
+.pc-content_control-position_bottom .pc-content__title:has(+ .pc-content__link) {
+  margin-bottom: auto;
 }

package/build/cjs/sub-blocks/Content/Content.js

@@ -18,7 +18,7 @@ function getTextSize(size) {
     }
 }
 const Content = (props) => {
-    const { title, titleId: titleIdFromProps, text, textId, additionalInfo, size = 'l', links, buttons, colSizes = { all: 12, sm: 8 }, centered, theme, className, list, qa, } = props;
+    const { title, titleId: titleIdFromProps, text, textId, additionalInfo, size = 'l', links, buttons, colSizes = { all: 12, sm: 8 }, centered, theme, className, list, qa, controlPosition, } = props;
     const qaAttributes = (0, blocks_1.getQaAttrubutes)(qa, ['links', 'link', 'buttons', 'button', 'list']);
     const titleProps = !title || typeof title === 'string'
         ? { text: title, textSize: getTextSize(size) }
@@ -26,7 +26,7 @@ const Content = (props) => {
     const hasTitle = Boolean(title);
     const defaultTitleId = (0, uikit_1.useUniqId)();
     const titleId = titleIdFromProps || defaultTitleId;
-    return (react_1.default.createElement(grid_1.Col, { className: b({ size, centered, theme }, className), reset: true, sizes: colSizes, qa: qaAttributes.container },
+    return (react_1.default.createElement(grid_1.Col, { className: b({ size, centered, theme, 'control-position': controlPosition }, className), reset: true, sizes: colSizes, qa: qaAttributes.container },
         title && (react_1.default.createElement(components_1.Title, { className: b('title'), title: titleProps, colSizes: { all: 12 }, id: titleId })),
         text && (react_1.default.createElement("div", { className: b('text', { ['without-title']: !hasTitle }) },
             react_1.default.createElement(components_1.YFMWrapper, { content: text, modifiers: { constructor: true, [`constructor-size-${size}`]: true }, id: textId }))),

package/build/cjs/sub-blocks/Content/schema.d.ts

@@ -119,6 +119,10 @@ export declare const ContentBase: {
             };
         };
     };
+    controlPosition: {
+        type: string;
+        enum: string[];
+    };
 };
 export declare const ContentBlock: {
     content: {
@@ -210,6 +214,10 @@ export declare const ContentBlock: {
                     };
                 };
             };
+            controlPosition: {
+                type: string;
+                enum: string[];
+            };
         };
     };
 };

package/build/cjs/sub-blocks/Content/schema.js

@@ -50,6 +50,10 @@ exports.ContentBase = {
         enum: common_1.contentThemes,
     },
     list: (0, utils_1.filteredArray)(exports.ContentItem),
+    controlPosition: {
+        type: 'string',
+        enum: ['default', 'bottom'],
+    },
 };
 exports.ContentBlock = {
     content: {

package/build/cjs/sub-blocks/ImageCard/ImageCard.css

@@ -17,7 +17,9 @@ unpredictable css rules order in build */
   border: 1px solid var(--g-color-line-generic);
 }
 .pc-image-card .pc-image-card__content {
+  display: flex;
   padding: 32px;
+  flex: auto;
 }
 .pc-image-card .pc-image-card__image_inner {
   width: 100%;

package/build/cjs/sub-blocks/ImageCard/ImageCard.js

@@ -9,8 +9,10 @@ const models_1 = require("../../models");
 const utils_2 = require("../../utils");
 const Content_1 = tslib_1.__importDefault(require("../Content/Content"));
 const b = (0, utils_2.block)('image-card');
+const CONTENT_COL_SIZES = { all: 12, md: 12 };
 const ImageCard = (props) => {
-    const { border = 'shadow', title, text, image, enableImageBorderRadius = false, direction = models_1.ImageCardDirection.Direct, margins, backgroundColor, url, target, urlTitle, additionalInfo, links, buttons, list, theme: cardTheme = 'default', size = 's', } = props;
+    const { border = 'shadow', title, text, image, enableImageBorderRadius = false, direction = models_1.ImageCardDirection.Direct, margins, backgroundColor, url, target, urlTitle, additionalInfo, links, buttons, list, theme: cardTheme = 'default', size = 's', controlPosition = 'content', } = props;
+    const areControlsInFooter = controlPosition === 'footer';
     const hasContent = Boolean(text || title || buttons || links || list);
     const imageProps = (0, utils_1.getMediaImage)(image);
     const titleId = (0, uikit_1.useUniqId)();
@@ -18,7 +20,7 @@ const ImageCard = (props) => {
         react_1.default.createElement("div", { className: b('image', { margins }) },
             react_1.default.createElement(components_1.Image, Object.assign({ className: b('image_inner', { radius: enableImageBorderRadius }) }, imageProps))),
         hasContent && (react_1.default.createElement("div", { className: b('content') },
-            react_1.default.createElement(Content_1.default, { titleId: titleId, title: title, text: text, links: links, buttons: buttons, list: list, theme: cardTheme, additionalInfo: additionalInfo, size: size, colSizes: { all: 12, md: 12 } })))));
+            react_1.default.createElement(Content_1.default, { titleId: titleId, title: title, text: text, links: links, buttons: buttons, list: list, theme: cardTheme, additionalInfo: additionalInfo, size: size, colSizes: CONTENT_COL_SIZES, controlPosition: areControlsInFooter ? 'bottom' : 'default' })))));
     return url ? (react_1.default.createElement(uikit_1.Link, { href: url, target: target, rel: target === '_blank' ? 'noopener noreferrer' : undefined, className: b({ border, 'with-content': hasContent, direction }), title: urlTitle, extraProps: {
             draggable: false,
             onDragStart: (e) => e.preventDefault(),

package/build/cjs/sub-blocks/ImageCard/schema.d.ts

@@ -116,6 +116,10 @@ export declare const ImageCard: {
                     };
                 };
             } | undefined;
+            controlPosition: {
+                type: string;
+                enum: string[];
+            };
             border: {
                 type: string;
                 enum: string[];

package/build/cjs/sub-blocks/ImageCard/schema.js

@@ -6,12 +6,12 @@ const omit_1 = tslib_1.__importDefault(require("lodash/omit"));
 const common_1 = require("../../schema/validators/common");
 const components_1 = require("../../schema/validators/components");
 const schema_1 = require("../Content/schema");
-const ImageCardBlockContentProps = (0, omit_1.default)(schema_1.ContentBase, ['centered', 'colSizes']);
+const ImageCardBlockContentProps = (0, omit_1.default)(schema_1.ContentBase, ['centered', 'colSizes', 'controlPosition']);
 exports.ImageCard = {
     'image-card': {
         additionalProperties: false,
         required: ['image'],
-        properties: Object.assign(Object.assign(Object.assign(Object.assign({}, common_1.BaseProps), common_1.CardBase), ImageCardBlockContentProps), { image: components_1.ImageProps, direction: {
+        properties: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, common_1.BaseProps), common_1.CardBase), common_1.CardLayoutProps), ImageCardBlockContentProps), { image: components_1.ImageProps, direction: {
                 type: 'string',
                 enum: ['direct', 'reverse'],
             }, margins: {

package/build/cjs/sub-blocks/LayoutItem/LayoutItem.css

@@ -17,12 +17,13 @@ unpredictable css rules order in build */
   margin: 16px 0 -8px 0;
 }
 .pc-layout-item__content {
+  display: flex;
   flex: auto;
   margin: 16px 16px 0 0;
 }
 .pc-layout-item__content_no-media {
   margin: 0;
 }
-.pc-layout-item__links, .pc-layout-item__buttons {
-  margin-top: 16px;
+.pc-layout-item__wrapper {
+  flex: auto;
 }

package/build/cjs/sub-blocks/LayoutItem/LayoutItem.d.ts

@@ -1,3 +1,3 @@
 import { LayoutItemProps } from '../../models';
-declare const LayoutItem: ({ content: { links, buttons, ...content }, metaInfo, media, border, fullscreen, icon, className, analyticsEvents, controlPosition, }: LayoutItemProps) => JSX.Element;
+declare const LayoutItem: ({ content: { links, ...content }, metaInfo, media, border, fullscreen, icon, className, analyticsEvents, controlPosition, }: LayoutItemProps) => JSX.Element;
 export default LayoutItem;

package/build/cjs/sub-blocks/LayoutItem/LayoutItem.js

@@ -10,11 +10,11 @@ const Content_1 = tslib_1.__importDefault(require("../Content/Content"));
 const utils_2 = require("./utils");
 const b = (0, utils_1.block)('layout-item');
 const LayoutItem = (_a) => {
-    var _b = _a.content, { links, buttons } = _b, content = tslib_1.__rest(_b, ["links", "buttons"]), { metaInfo, media, border, fullscreen, icon, className, analyticsEvents, controlPosition = 'content' } = _a;
+    var _b = _a.content, { links } = _b, content = tslib_1.__rest(_b, ["links"]), { metaInfo, media, border, fullscreen, icon, className, analyticsEvents, controlPosition = 'content' } = _a;
     const normalizedLinks = (0, react_1.useMemo)(() => (0, utils_2.getLayoutItemLinks)(links), [links]);
     const areControlsInFooter = controlPosition === 'footer';
     const theme = (0, theme_1.useTheme)();
-    const contentProps = Object.assign(Object.assign(Object.assign({}, content), (areControlsInFooter ? {} : { links: normalizedLinks, buttons })), { size: 's', colSizes: { all: 12, md: 12 } });
+    const contentProps = Object.assign(Object.assign({ controlPosition: areControlsInFooter ? 'bottom' : 'default' }, content), { links: normalizedLinks, size: 's', colSizes: { all: 12, md: 12 } });
     const titleId = (0, uikit_1.useUniqId)();
     const renderMedia = () => {
         if (!media) {
@@ -30,9 +30,7 @@ const LayoutItem = (_a) => {
         renderMedia(),
         metaInfo && react_1.default.createElement(components_1.MetaInfo, { items: metaInfo, className: b('meta-info') }),
         react_1.default.createElement("div", { className: b('content', { 'no-media': !media }) },
-            react_1.default.createElement(components_1.IconWrapper, { icon: icon },
-                react_1.default.createElement(Content_1.default, Object.assign({}, contentProps, { titleId: titleId })))),
-        areControlsInFooter && links && (react_1.default.createElement(components_1.Links, { className: b('links'), size: "s", links: links, titleId: titleId })),
-        areControlsInFooter && buttons && (react_1.default.createElement(components_1.Buttons, { className: b('buttons'), size: "s", buttons: buttons, titleId: titleId }))));
+            react_1.default.createElement(components_1.IconWrapper, { icon: icon, className: b('wrapper') },
+                react_1.default.createElement(Content_1.default, Object.assign({}, contentProps, { titleId: titleId }))))));
 };
 exports.default = LayoutItem;

package/build/cjs/sub-blocks/LayoutItem/schema.d.ts

@@ -358,6 +358,10 @@ export declare const LayoutItem: {
                     };
                 };
             };
+            controlPosition: {
+                type: string;
+                enum: string[];
+            };
         }>;
         metaInfo: {
             type: string;

package/build/cjs/sub-blocks/LayoutItem/schema.js

@@ -11,7 +11,7 @@ exports.LayoutItem = {
     type: 'object',
     additionalProperties: false,
     required: ['content', 'media'],
-    properties: Object.assign(Object.assign({}, common_1.BaseProps), { media: common_1.MediaProps, content: (0, omit_1.default)(schema_2.ContentBase, ['colSize', 'size', 'centered']), metaInfo: schema_1.default, border: {
+    properties: Object.assign(Object.assign(Object.assign({}, common_1.BaseProps), common_1.CardLayoutProps), { media: common_1.MediaProps, content: (0, omit_1.default)(schema_2.ContentBase, ['colSize', 'size', 'centered']), metaInfo: schema_1.default, border: {
             type: 'boolean',
         }, fullscreen: {
             type: 'boolean',
@@ -24,8 +24,5 @@ exports.LayoutItem = {
                     optionName: 'list',
                 },
             ],
-        }, controlPosition: {
-            type: 'string',
-            enum: ['content', 'footer'],
         } }),
 };

package/build/esm/blocks/ContentLayout/schema.d.ts

@@ -173,6 +173,10 @@ export declare const ContentLayoutBlock: {
                             };
                         };
                     };
+                    controlPosition: {
+                        type: string;
+                        enum: string[];
+                    };
                 };
             };
             fileContent: {

package/build/esm/blocks/Form/schema.d.ts

@@ -164,6 +164,10 @@ export declare const FormBlock: {
                             };
                         };
                     };
+                    controlPosition: {
+                        type: string;
+                        enum: string[];
+                    };
                 }>;
             };
             direction: {

package/build/esm/blocks/Info/schema.d.ts

@@ -135,6 +135,10 @@ export declare const InfoBlock: {
                             };
                         };
                     };
+                    controlPosition: {
+                        type: string;
+                        enum: string[];
+                    };
                 }>;
             };
             rightContent: {
@@ -222,6 +226,10 @@ export declare const InfoBlock: {
                             };
                         };
                     };
+                    controlPosition: {
+                        type: string;
+                        enum: string[];
+                    };
                 }>;
             };
             type: {};

package/build/esm/blocks/Map/schema.d.ts

@@ -368,6 +368,10 @@ export declare const MapBlock: {
                     };
                 };
             };
+            controlPosition: {
+                type: string;
+                enum: string[];
+            };
             animated: {
                 type: string;
             };

package/build/esm/blocks/Media/schema.d.ts

@@ -538,6 +538,10 @@ export declare const MediaBlockBaseProps: {
             };
         };
     };
+    controlPosition: {
+        type: string;
+        enum: string[];
+    };
     animated: {
         type: string;
     };
@@ -1139,6 +1143,10 @@ export declare const MediaBlock: {
                     };
                 };
             };
+            controlPosition: {
+                type: string;
+                enum: string[];
+            };
             animated: {
                 type: string;
             };

package/build/esm/blocks/Questions/schema.d.ts

@@ -88,6 +88,10 @@ export declare const QuestionsBlock: {
                     };
                 };
             };
+            controlPosition: {
+                type: string;
+                enum: string[];
+            };
             anchor: {
                 type: string;
                 additionalProperties: boolean;

package/build/esm/blocks/Tabs/schema.d.ts

@@ -522,6 +522,10 @@ export declare const tabsItem: {
                 };
             };
         } | undefined;
+        controlPosition?: {
+            type: string;
+            enum: string[];
+        } | undefined;
     };
 };
 export declare const TabsBlock: {

package/build/esm/components/IconWrapper/IconWrapper.css

@@ -22,6 +22,8 @@ unpredictable css rules order in build */
   width: 22px;
   margin: 1px 12px 1px 0px;
 }
-.pc-icon-wrapper_content_left.pc-icon-wrapper_content_left {
-  flex: 1 0 0;
+.pc-icon-wrapper__content {
+  display: flex;
+  flex-direction: column;
+  flex: 1 0 auto;
 }

package/build/esm/components/IconWrapper/IconWrapper.d.ts

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
-import { IconWrapperProps } from '../../models';
+import type { ClassNameProps, IconWrapperProps } from '../../models';
 import './IconWrapper.css';
-declare const IconWrapper: (props: PropsWithChildren<IconWrapperProps>) => JSX.Element;
+declare const IconWrapper: (props: PropsWithChildren<IconWrapperProps> & ClassNameProps) => JSX.Element;
 export default IconWrapper;

package/build/esm/components/IconWrapper/IconWrapper.js

@@ -5,14 +5,14 @@ import { getMediaImage } from '../Media/Image/utils';
 import './IconWrapper.css';
 const b = block('icon-wrapper');
 const IconWrapper = (props) => {
-    const { icon, children } = props;
+    const { icon, children, className } = props;
     if (!icon) {
         return React.createElement(Fragment, null, children);
     }
     const iconProps = getMediaImage(icon.value);
     const iconPosition = icon === null || icon === void 0 ? void 0 : icon.position;
-    return (React.createElement("div", { className: b({ ['icon-position']: iconPosition }) },
+    return (React.createElement("div", { className: b({ ['icon-position']: iconPosition }, className) },
         iconProps && (React.createElement(Image, Object.assign({}, iconProps, { containerClassName: b('icon-container'), className: b('icon', { ['icon-position']: iconPosition }) }))),
-        React.createElement("div", { className: b({ ['content']: iconPosition }) }, children)));
+        React.createElement("div", { className: b('content') }, children)));
 };
 export default IconWrapper;

package/build/esm/constructor-items.d.ts

@@ -24,7 +24,7 @@ export declare const subBlockMap: {
     "price-detailed": (props: import("./models").PriceDetailedProps) => JSX.Element;
     "media-card": ({ border, analyticsEvents, ...mediaProps }: import("./models").MediaCardProps) => JSX.Element;
     "banner-card": (props: import("./models").BannerCardProps) => JSX.Element;
-    "layout-item": ({ content: { links, buttons, ...content }, metaInfo, media, border, fullscreen, icon, className, analyticsEvents, controlPosition, }: import("./models").LayoutItemProps) => JSX.Element;
+    "layout-item": ({ content: { links, ...content }, metaInfo, media, border, fullscreen, icon, className, analyticsEvents, controlPosition, }: import("./models").LayoutItemProps) => JSX.Element;
     "background-card": (props: import("./models").BackgroundCardProps) => JSX.Element;
     "basic-card": (props: import("./models").BasicCardProps) => JSX.Element;
     content: (props: import("./sub-blocks/Content/Content").ContentProps) => JSX.Element;

package/build/esm/editor/components/AddBlock/AddBlock.css

@@ -2,8 +2,7 @@
 unpredictable css rules order in build */
 .pc-add-block {
   position: absolute;
-  bottom: 32px;
-  left: calc(50% + var(--pc-editor-left-column-width) / 2);
+  left: 50%;
   transform: translateX(-50%);
   z-index: 110;
 }

package/build/esm/editor/components/CodeEditor/CodeEditor.css

@@ -1,7 +1,9 @@
 .pc-code-editor {
-  height: 100%;
+  z-index: 2;
+  height: 60vh;
   position: relative;
   overflow: hidden;
+  box-shadow: 0 4px 24px var(--pc-color-sfx-shadow), 0 2px 8px var(--pc-color-sfx-shadow);
 }
 .pc-code-editor_fullscreen {
   position: absolute;

package/build/esm/editor/components/ControlPanel/ControlPanel.css

@@ -14,17 +14,15 @@ unpredictable css rules order in build */
   display: flex;
   align-items: center;
 }
-.pc-control-panel__radio-button {
-  margin-left: 12px;
-}
 .pc-control-panel__radio-button .g-radio-button__option {
   display: flex;
   align-items: center;
 }
-.pc-control-panel__mode-switch {
+.pc-control-panel__switch-container {
   display: flex;
   align-items: center;
   place-self: center;
+  gap: 12px;
 }
 .pc-control-panel__theme-switch {
   place-self: center end;

package/build/esm/editor/components/ControlPanel/ControlPanel.d.ts

@@ -1,11 +1,13 @@
 import { ClassNameProps, Theme } from '../../../models';
-import { ViewModeItem } from '../../types';
+import { EditModeItem, ViewModeItem } from '../../types';
 import './ControlPanel.css';
 export interface ControlPanelProps extends ClassNameProps {
     viewMode?: ViewModeItem;
+    editMode?: EditModeItem;
     onViewModeChange: (viewMode: ViewModeItem) => void;
+    onEditModeChange: (editMode: EditModeItem) => void;
     theme: Theme;
     onThemeChange: (theme: Theme) => void;
 }
-declare const ControlPanel: ({ viewMode, onViewModeChange, className, theme, onThemeChange, }: ControlPanelProps) => JSX.Element;
+declare const ControlPanel: ({ viewMode, editMode, onViewModeChange, onEditModeChange, className, theme, onThemeChange, }: ControlPanelProps) => JSX.Element;
 export default ControlPanel;

package/build/esm/editor/components/ControlPanel/ControlPanel.js

@@ -1,33 +1,42 @@
 import React from 'react';
-import { Display, Pencil, Smartphone } from '@gravity-ui/icons';
+import { Code, Display, Eye, Smartphone, SquareDashedText } from '@gravity-ui/icons';
 import { RadioButton, Select } from '@gravity-ui/uikit';
 import { Theme, themeNames } from '../../../models';
 import { block } from '../../../utils';
 import { Tablet } from '../../icons/Tablet';
-import { ViewModeItem } from '../../types';
+import { EditModeItem, ViewModeItem } from '../../types';
 import { i18n } from './i18n';
 import './ControlPanel.css';
 const ICON_SIZE = 14;
 const b = block('control-panel');
 const ControlPanelViewModeIcons = {
-    [ViewModeItem.Edititng]: Pencil,
     [ViewModeItem.Desktop]: Display,
     [ViewModeItem.Tablet]: Tablet,
     [ViewModeItem.Mobile]: Smartphone,
 };
-const ControlPanel = ({ viewMode = ViewModeItem.Edititng, onViewModeChange, className, theme, onThemeChange, }) => {
-    return (React.createElement("div", { className: b(null, className) },
-        React.createElement("div", null),
-        React.createElement("div", { className: b('mode-switch') },
-            React.createElement("span", null, i18n('mode')),
-            React.createElement(RadioButton, { className: b('radio-button'), value: viewMode, onUpdate: (value) => onViewModeChange(value) }, Object.values(ViewModeItem).map((item) => {
-                const Icon = ControlPanelViewModeIcons[item];
-                return (React.createElement(RadioButton.Option, { key: item, value: item },
-                    React.createElement("span", { className: b('icon') },
-                        React.createElement(Icon, { width: ICON_SIZE, height: ICON_SIZE }))));
-            }))),
-        React.createElement("div", { className: b('theme-switch') },
-            React.createElement("span", null, i18n('theme')),
-            React.createElement(Select, { value: [theme], onUpdate: (value) => onThemeChange(value[0]) }, Object.values(Theme).map((item) => (React.createElement(Select.Option, { key: item, value: item }, themeNames[item])))))));
+const ControlPanelEditModeIcons = {
+    [EditModeItem.View]: Eye,
+    [EditModeItem.Form]: SquareDashedText,
+    [EditModeItem.Code]: Code,
 };
+const ControlPanel = ({ viewMode = ViewModeItem.Desktop, editMode = EditModeItem.Form, onViewModeChange, onEditModeChange, className, theme, onThemeChange, }) => (React.createElement("div", { className: b(null, className) },
+    React.createElement("div", { className: b('switch-container') },
+        React.createElement("span", null, i18n('edit_mode')),
+        React.createElement(RadioButton, { className: b('radio-button'), value: editMode, onUpdate: (value) => onEditModeChange(value) }, Object.values(EditModeItem).map((item) => {
+            const Icon = ControlPanelEditModeIcons[item];
+            return (React.createElement(RadioButton.Option, { key: item, value: item },
+                React.createElement("span", { className: b('icon') },
+                    React.createElement(Icon, { width: ICON_SIZE, height: ICON_SIZE }))));
+        }))),
+    React.createElement("div", { className: b('switch-container') },
+        React.createElement("span", null, i18n('view_mode')),
+        React.createElement(RadioButton, { className: b('radio-button'), value: viewMode, onUpdate: (value) => onViewModeChange(value) }, Object.values(ViewModeItem).map((item) => {
+            const Icon = ControlPanelViewModeIcons[item];
+            return (React.createElement(RadioButton.Option, { key: item, value: item },
+                React.createElement("span", { className: b('icon') },
+                    React.createElement(Icon, { width: ICON_SIZE, height: ICON_SIZE }))));
+        }))),
+    React.createElement("div", { className: b('switch-container') },
+        React.createElement("span", null, i18n('theme')),
+        React.createElement(Select, { value: [theme], onUpdate: (value) => onThemeChange(value[0]) }, Object.values(Theme).map((item) => (React.createElement(Select.Option, { key: item, value: item }, themeNames[item])))))));
 export default ControlPanel;

package/build/esm/editor/components/ControlPanel/i18n/en.json

@@ -1,4 +1,5 @@
 {
-  "mode": "Mode",
+  "view_mode": "View mode",
+  "edit_mode": "Edit mode",
   "theme": "Theme"
 }

package/build/esm/editor/components/ControlPanel/i18n/index.d.ts

@@ -1 +1 @@
-export declare const i18n: (key: "theme" | "mode", params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export declare const i18n: (key: "theme" | "view_mode" | "edit_mode", params?: import("@gravity-ui/i18n").Params | undefined) => string;

package/build/esm/editor/components/ControlPanel/i18n/ru.json

@@ -1,4 +1,5 @@
 {
-  "mode": "Режим",
+  "view_mode": "Режим просмотра",
+  "edit_mode": "Режим редактирования",
   "theme": "Тема"
 }

package/build/esm/editor/components/Layout/Layout.css

@@ -20,11 +20,6 @@ body {
 .pc-editor-layout {
   position: relative;
 }
-.pc-editor-layout__panel {
-  top: 0;
-  position: sticky;
-  z-index: 2;
-}
 .pc-editor-layout__container {
   position: relative;
   display: flex;
@@ -33,14 +28,23 @@ body {
 }
 .pc-editor-layout__left {
   flex: 0 0 auto;
-  padding: 24px 16px;
+  padding: 24px;
   width: var(--pc-editor-left-column-width);
   border-right: var(--pc-editor-divider-width) solid var(--g-color-line-generic);
   overflow-x: auto;
 }
+.pc-editor-layout__left_closed {
+  display: none;
+}
 .pc-editor-layout__right {
+  position: relative;
   width: 100%;
 }
 .pc-editor-layout__right_editing {
   padding-bottom: 200px;
+}
+.pc-editor-layout__arrow-toggle {
+  padding: 12px;
+  cursor: pointer;
+  border-right: 1px solid var(--g-color-line-generic);
 }

package/build/esm/editor/components/Layout/Layout.d.ts

@@ -1,15 +1,12 @@
 import React, { PropsWithChildren } from 'react';
-import { Theme } from '../../../models';
-import { ViewModeItem } from '../../types';
+import { EditModeItem, ViewModeItem } from '../../types';
 import './Layout.css';
 export interface LayoutProps {
-    mode: ViewModeItem;
-    onModeChange: (mode: ViewModeItem) => void;
-    theme: Theme;
-    onThemeChange: (theme: Theme) => void;
+    editMode: EditModeItem;
+    viewMode: ViewModeItem;
 }
 declare const Layout: {
-    ({ children, mode, onModeChange, theme, onThemeChange, }: PropsWithChildren<LayoutProps>): JSX.Element;
+    ({ children, editMode, viewMode }: PropsWithChildren<LayoutProps>): JSX.Element;
     Left: React.FC<{
         children?: React.ReactNode;
     }>;