@gravity-ui/page-constructor 4.0.0-beta.0 → 4.0.0

package/build/cjs/containers/PageConstructor/PageConstructor.css

@@ -6,48 +6,68 @@ unpredictable css rules order in build */
   --header-height: 64px;
 }
 
-.yc-root {
-  --yc-text-accent-font-weight: 500;
+.g-root {
+  --pc-color-telegram: #51a4db;
+  --pc-color-facebook: #4968ad;
+  --pc-color-twitter: #4aa0eb;
+  --pc-color-vk: #436eab;
+  --pc-color-youtube: #eb3323;
+  --pc-color-github: #25292e;
+  --pc-color-rss: #f29c39;
+  --pc-color-linkedin: #0a66c2;
+  --g-text-accent-font-weight: 500;
   --pc-transparent: rgba(255, 255, 255, 0);
   --pc-border-radius: 24px;
   --pc-image-padding: 4px;
-  --pc-color-sfx-shadow: var(--yc-color-base-simple-hover);
+  --pc-color-sfx-shadow: var(--g-color-base-simple-hover);
   --pc-color-line-generic-active-solid: #b3b3b3;
-  --pc-color-base-float-hover: var(--yc-color-base-float);
+  --pc-color-base-float-hover: var(--g-color-base-float);
   --pc-monochrome-button-background-color: #262626;
   --pc-monochrome-button-background-color-hover: #393939;
-  --pc-monochrome-button-color: var(--yc-color-text-light-primary);
-  --pc-text-header-color: var(--yc-color-text-primary);
-  --pc-media-card-meta-info-color: var(--yc-color-text-secondary);
-  --pc-tab-item-color: var(--yc-color-text-primary);
-  --pc-tab-item-background-color: var(--yc-color-base-generic);
-  --pc-tab-item-background-color-hover: var(--yc-color-base-generic-hover);
+  --pc-monochrome-button-color: var(--g-color-text-light-primary);
+  --pc-text-header-color: var(--g-color-text-primary);
+  --pc-media-card-meta-info-color: var(--g-color-text-secondary);
+  --pc-tab-item-color: var(--g-color-text-primary);
+  --pc-tab-item-background-color: var(--g-color-base-generic);
+  --pc-tab-item-background-color-hover: var(--g-color-base-generic-hover);
   --pc-selected-tab-item-color: var(--pc-monochrome-button-color);
   --pc-selected-tab-item-background-color: var(--pc-monochrome-button-background-color);
   --pc-selected-tab-item-background-color-hover: var(
       --pc-monochrome-button-background-color-hover
   );
 }
-.yc-root.yc-root_theme_dark {
-  --pc-color-sfx-shadow: var(--yc-color-sfx-shadow);
+.g-root_theme_light {
+  --pc-color-base-silver: #eff2f8;
+  --pc-color-base-gold: #ffdb4d;
+  --pc-color-base-asphalt: #313538;
+  --pc-color-base-copper: #ffe6c4;
+}
+.g-root_theme_dark {
+  --pc-color-base-silver: #bcc0c4;
+  --pc-color-base-gold: #ffde5d;
+  --pc-color-base-asphalt: #474d52;
+  --pc-color-base-copper: #7f7262;
+}
+.g-root.g-root_theme_dark {
+  --pc-color-sfx-shadow: var(--g-color-sfx-shadow);
   --pc-color-line-generic-active-solid: #6c6c70;
-  --pc-color-base-float-hover: var(--yc-color-base-float-hover);
+  --pc-color-base-float-hover: var(--g-color-base-float-hover);
   --pc-monochrome-button-background-color: #ffffff;
   --pc-monochrome-button-background-color-hover: #e9e9e9;
-  --pc-monochrome-button-color: var(--yc-color-text-dark-primary);
+  --pc-monochrome-button-color: var(--g-color-text-dark-primary);
 }
 
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .yfm_constructor {
-  font-family: var(--yc-font-family-sans);
-  color: var(--yc-color-text-primary);
+  font-family: var(--g-font-family-sans);
+  color: var(--g-color-text-primary);
 }
 .yfm_constructor code,
 .yfm_constructor kbd,
 .yfm_constructor pre {
-  font-family: var(--yc-font-family-monospace);
-  color: var(--yc-color-text-primary);
+  font-family: var(--g-font-family-monospace);
+  color: var(--g-color-text-primary);
 }
 .yfm_constructor.yfm_constructor h1,
 .yfm_constructor.yfm_constructor h2,
@@ -58,11 +78,11 @@ unpredictable css rules order in build */
 .yfm_constructor.yfm_constructor span,
 .yfm_constructor.yfm_constructor p,
 .yfm_constructor.yfm_constructor li {
-  color: var(--yc-color-text-primary);
+  color: var(--g-color-text-primary);
 }
 .yfm_constructor.yfm_constructor_notice li,
 .yfm_constructor.yfm_constructor_notice p {
-  color: var(--yc-color-text-secondary);
+  color: var(--g-color-text-secondary);
 }
 .yfm_constructor.yfm_constructor ul,
 .yfm_constructor.yfm_constructor ol,
@@ -81,7 +101,7 @@ unpredictable css rules order in build */
 }
 
 .yfm_constructor_theme_dark p {
-  color: var(--yc-color-text-light-primary);
+  color: var(--g-color-text-light-primary);
 }
 .yfm_constructor_list_style ul {
   padding-left: 20px;
@@ -97,7 +117,7 @@ unpredictable css rules order in build */
 }
 .yfm_constructor a {
   outline: none;
-  color: var(--yc-color-text-link);
+  color: var(--g-color-text-link);
   text-decoration: none;
   cursor: pointer;
 }
@@ -105,17 +125,17 @@ unpredictable css rules order in build */
   outline: 2px solid #ffdb4d;
 }
 .yfm_constructor a:hover, .yfm_constructor a:active {
-  --pc-text-header-color: var(--yc-color-text-link-hover);
-  color: var(--yc-color-text-link-hover);
+  --pc-text-header-color: var(--g-color-text-link-hover);
+  color: var(--g-color-text-link-hover);
 }
 .yfm_constructor table {
-  color: var(--yc-color-text-primary);
-  border: 1px solid var(--yc-color-line-generic);
-  background: var(--yc-color-base-background);
+  color: var(--g-color-text-primary);
+  border: 1px solid var(--g-color-line-generic);
+  background: var(--g-color-base-background);
 }
 .yfm_constructor thead,
 .yfm_constructor table tr:nth-child(2n) {
-  background-color: var(--yc-color-base-generic);
+  background-color: var(--g-color-base-generic);
 }
 
 .yfm_constructor_table {
@@ -131,7 +151,7 @@ unpredictable css rules order in build */
   background-color: transparent !important;
 }
 .yfm_constructor_table tbody tr {
-  border-top: 1px solid var(--yc-color-line-generic);
+  border-top: 1px solid var(--g-color-line-generic);
 }
 .yfm_constructor_table td,
 .yfm_constructor_table th {
@@ -152,7 +172,7 @@ unpredictable css rules order in build */
 .pc-page-constructor {
   font-feature-settings: "liga", "kern", "pnum" on, "lnum" on, "ss03" on;
   margin-top: 0;
-  background-color: var(--yc-color-base-background);
+  background-color: var(--g-color-base-background);
   z-index: 10;
 }
 .pc-page-constructor__wrapper {

package/build/cjs/containers/PageConstructor/PageConstructor.js

@@ -4,11 +4,13 @@ exports.PageConstructor = exports.Constructor = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 require("@doc-tools/transform/dist/js/yfm");
+const bem_cn_lite_1 = tslib_1.__importDefault(require("bem-cn-lite"));
 const BackgroundMedia_1 = tslib_1.__importDefault(require("../../components/BackgroundMedia/BackgroundMedia"));
+const constants_1 = require("../../components/constants");
 const constructor_items_1 = require("../../constructor-items");
 const animateContext_1 = require("../../context/animateContext");
 const innerContext_1 = require("../../context/innerContext");
-const ThemeValueContext_1 = require("../../context/theme/ThemeValueContext");
+const theme_1 = require("../../context/theme");
 const grid_1 = require("../../grid");
 const models_1 = require("../../models");
 const Layout_1 = tslib_1.__importDefault(require("../../navigation/containers/Layout/Layout"));
@@ -17,6 +19,7 @@ const ConstructorBlocks_1 = require("./components/ConstructorBlocks");
 const ConstructorItem_1 = require("./components/ConstructorItem");
 const ConstructorRow_1 = require("./components/ConstructorRow");
 const b = (0, utils_1.block)('page-constructor');
+const ycr = (0, bem_cn_lite_1.default)(constants_1.UIKIT_ROOT_CLASS);
 const Constructor = (props) => {
     const { content: { blocks = [], background = {} } = {}, renderMenu, shouldRenderBlock, navigation, custom, } = props;
     const { context } = (0, react_1.useMemo)(() => ({
@@ -32,12 +35,12 @@ const Constructor = (props) => {
             },
         },
     }), [custom, shouldRenderBlock]);
-    const { themeValue: theme } = (0, react_1.useContext)(ThemeValueContext_1.ThemeValueContext);
+    const theme = (0, theme_1.useTheme)();
     const header = (0, utils_1.getHeaderBlock)(blocks, context.headerBlockTypes);
     const restBlocks = (0, utils_1.getOrderedBlocks)(blocks, context.headerBlockTypes);
     const themedBackground = (0, utils_1.getThemedValue)(background, theme);
     return (react_1.default.createElement(innerContext_1.InnerContext.Provider, { value: context },
-        react_1.default.createElement("div", { className: b() },
+        react_1.default.createElement("div", { className: b(null, ycr({ theme })) },
             react_1.default.createElement("div", { className: b('wrapper') },
                 themedBackground && (react_1.default.createElement(BackgroundMedia_1.default, Object.assign({}, themedBackground, { className: b('background') }))),
                 react_1.default.createElement(Layout_1.default, { navigation: navigation },

package/build/cjs/containers/PageConstructor/Provider.d.ts

@@ -6,15 +6,14 @@ import { MapsContextType } from '../../context/mapsContext/mapsContext';
 import { MetrikaContextProps } from '../../context/metrikaContext';
 import { ProjectSettingsContextProps } from '../../context/projectSettingsContext';
 import { SSRContextProps } from '../../context/ssrContext';
-import { ConstructorTheme } from '../../context/theme/ThemeValueContext';
-import { WithChildren } from '../../models';
+import { Theme, WithChildren } from '../../models';
 export interface PageConstructorProviderProps {
     isMobile?: boolean;
     locale?: LocaleContextProps;
     location?: LocationContextProps;
     metrika?: MetrikaContextProps;
     ssrConfig?: SSRContextProps;
-    theme?: ConstructorTheme;
+    theme?: Theme;
     mapsContext?: MapsContextType;
     projectSettings?: ProjectSettingsContextProps;
     analytics?: AnalyticsContextProps;

package/build/cjs/containers/PageConstructor/Provider.js

@@ -13,12 +13,12 @@ const metrikaContext_1 = require("../../context/metrikaContext");
 const mobileContext_1 = require("../../context/mobileContext");
 const projectSettingsContext_1 = require("../../context/projectSettingsContext");
 const ssrContext_1 = require("../../context/ssrContext");
-const ThemeValueContext_1 = require("../../context/theme/ThemeValueContext");
+const theme_1 = require("../../context/theme");
 const PageConstructorProvider = (props) => {
     const { isMobile, mapsContext = mapsContext_1.initialMapValue, locale = {}, location = {}, metrika = {}, analytics = {}, ssrConfig = {}, projectSettings = {}, theme = constants_1.DEFAULT_THEME, children, image = {}, } = props;
     /* eslint-disable react/jsx-key */
     const context = [
-        react_1.default.createElement(ThemeValueContext_1.ThemeValueContext.Provider, { value: { themeValue: theme } }),
+        react_1.default.createElement(theme_1.ThemeContext.Provider, { value: { theme } }),
         react_1.default.createElement(projectSettingsContext_1.ProjectSettingsContext.Provider, { value: projectSettings }),
         react_1.default.createElement(localeContext_1.LocaleContext.Provider, { value: locale }),
         react_1.default.createElement(imageContext_1.ImageContext.Provider, { value: image }),

package/build/cjs/containers/PageConstructor/components/ConstructorBlock/ConstructorBlock.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Block, WithChildren } from '../../../../models';
-interface ConstructorBlockProps {
+import { Block, BlockDecorationProps, WithChildren } from '../../../../models';
+interface ConstructorBlockProps extends Pick<BlockDecorationProps, 'index'> {
     data: Block;
 }
 export declare const ConstructorBlock: React.FC<WithChildren<ConstructorBlockProps>>;

package/build/cjs/containers/PageConstructor/components/ConstructorBlock/ConstructorBlock.js

@@ -2,12 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConstructorBlock = void 0;
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const react_1 = tslib_1.__importStar(require("react"));
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const BlockBase_1 = tslib_1.__importDefault(require("../../../../components/BlockBase/BlockBase"));
+const BlockDecoration_1 = require("../../../../customization/BlockDecoration");
 const utils_1 = require("../../../../utils");
 const b = (0, utils_1.block)('constructor-block');
-const ConstructorBlock = ({ data, children, }) => {
-    const { anchor, visible, type } = data;
-    return (react_1.default.createElement(BlockBase_1.default, { className: b({ type }), anchor: anchor, visible: visible, resetPaddings: data.resetPaddings }, children));
+const ConstructorBlock = ({ index = 0, data, children, }) => {
+    const { type } = data;
+    const blockBaseProps = (0, react_1.useMemo)(() => lodash_1.default.pick(data, ['anchor', 'visible', 'resetPaddings']), [data]);
+    return (react_1.default.createElement(BlockDecoration_1.BlockDecoration, Object.assign({ type: type, index: index }, blockBaseProps),
+        react_1.default.createElement(BlockBase_1.default, Object.assign({ className: b({ type }) }, blockBaseProps), children)));
 };
 exports.ConstructorBlock = ConstructorBlock;

package/build/cjs/containers/PageConstructor/components/ConstructorBlocks/ConstructorBlocks.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import { ConstructorItem as ConstructorItemType } from '../../../../models';
-interface ConstructorBlocksProps {
+export interface ConstructorBlocksProps {
     items: ConstructorItemType[];
 }
 export declare const ConstructorBlocks: React.FC<ConstructorBlocksProps>;
-export {};

package/build/cjs/containers/PageConstructor/components/ConstructorBlocks/ConstructorBlocks.js

@@ -4,8 +4,8 @@ exports.ConstructorBlocks = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
-const blockIdContext_1 = require("../../../../context/blockIdContext");
 const innerContext_1 = require("../../../../context/innerContext");
+const BlockDecoration_1 = require("../../../../customization/BlockDecoration");
 const utils_1 = require("../../../../utils");
 const ConstructorBlock_1 = require("../ConstructorBlock/ConstructorBlock");
 const ConstructorItem_1 = require("../ConstructorItem");
@@ -14,7 +14,7 @@ const ConstructorBlocks = ({ items }) => {
     const { blockTypes, loadables, itemMap, shouldRenderBlock } = (0, react_1.useContext)(innerContext_1.InnerContext);
     const renderer = (parentId = '', item, index) => {
         if (!itemMap[item.type]) {
-            return null;
+            return parentId ? null : (react_1.default.createElement(BlockDecoration_1.BlockDecoration, { type: item.type, index: index }, null));
         }
         let itemElement;
         const key = (0, utils_1.getBlockKey)(item, index);
@@ -35,9 +35,12 @@ const ConstructorBlocks = ({ items }) => {
             if ('children' in item && item.children) {
                 children = item.children.map(renderer.bind(null, blockId));
             }
-            itemElement = (react_1.default.createElement(ConstructorItem_1.ConstructorItem, { data: item, blockKey: blockId }, children));
+            itemElement = (react_1.default.createElement(ConstructorItem_1.ConstructorItem, { data: item, key: blockId, blockKey: blockId }, children));
         }
-        return (react_1.default.createElement(blockIdContext_1.BlockIdContext.Provider, { value: blockId, key: blockId }, blockTypes.includes(item.type) ? (react_1.default.createElement(ConstructorBlock_1.ConstructorBlock, { data: item }, itemElement)) : (itemElement)));
+        return blockTypes.includes(item.type) ? (
+        //TODO: replace ConstructorBlock (and delete it) with BlockBase when all
+        // components relying on constructor inner structure like Slider or blog-constructor will be refactored
+        react_1.default.createElement(ConstructorBlock_1.ConstructorBlock, { data: item, key: blockId, index: index }, itemElement)) : (itemElement);
     };
     return react_1.default.createElement(react_1.Fragment, null, items.map(renderer.bind(null, '')));
 };

package/build/cjs/containers/PageConstructor/components/ConstructorItem/ConstructorItem.d.ts

@@ -3,5 +3,5 @@ export interface ConstructorItemProps {
     data: ConstructorItemType;
     blockKey: string;
 }
-export declare const ConstructorItem: ({ data, children }: WithChildren<ConstructorItemProps>) => JSX.Element;
+export declare const ConstructorItem: ({ data, blockKey, children }: WithChildren<ConstructorItemProps>) => JSX.Element;
 export declare const ConstructorHeader: ({ data, blockKey, }: Pick<ConstructorItemProps, 'data' | 'blockKey'>) => JSX.Element;

package/build/cjs/containers/PageConstructor/components/ConstructorItem/ConstructorItem.js

@@ -3,15 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConstructorHeader = exports.ConstructorItem = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
+const blockIdContext_1 = require("../../../../context/blockIdContext");
 const innerContext_1 = require("../../../../context/innerContext");
 const BlockDecoration_1 = require("../../../../customization/BlockDecoration");
-const ConstructorItem = ({ data, children }) => {
+const ConstructorItem = ({ data, blockKey, children }) => {
     const { itemMap } = (0, react_1.useContext)(innerContext_1.InnerContext);
     const { type } = data, rest = tslib_1.__rest(data, ["type"]);
     const Component = itemMap[type];
-    return react_1.default.createElement(Component, Object.assign({}, rest), children);
+    return (react_1.default.createElement(blockIdContext_1.BlockIdContext.Provider, { value: blockKey },
+        react_1.default.createElement(Component, Object.assign({}, rest), children)));
 };
 exports.ConstructorItem = ConstructorItem;
-const ConstructorHeader = ({ data, blockKey, }) => (react_1.default.createElement(BlockDecoration_1.BlockDecoration, { id: data.type },
+const ConstructorHeader = ({ data, blockKey, }) => (react_1.default.createElement(BlockDecoration_1.BlockDecoration, { type: data.type },
     react_1.default.createElement(exports.ConstructorItem, { data: data, key: data.type, blockKey: blockKey })));
 exports.ConstructorHeader = ConstructorHeader;

package/build/cjs/containers/PageConstructor/components/index.d.ts

@@ -0,0 +1,2 @@
+export type { ConstructorBlocksProps } from './ConstructorBlocks';
+export { ConstructorBlocks } from './ConstructorBlocks';

package/build/cjs/containers/PageConstructor/components/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConstructorBlocks = void 0;
+var ConstructorBlocks_1 = require("./ConstructorBlocks");
+Object.defineProperty(exports, "ConstructorBlocks", { enumerable: true, get: function () { return ConstructorBlocks_1.ConstructorBlocks; } });

package/build/cjs/containers/PageConstructor/index.d.ts

@@ -2,3 +2,4 @@ export type { PageConstructorProps } from './PageConstructor';
 export { PageConstructor } from './PageConstructor';
 export type { PageConstructorProviderProps } from './Provider';
 export { PageConstructorProvider } from './Provider';
+export * from './components';

package/build/cjs/containers/PageConstructor/index.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageConstructorProvider = exports.PageConstructor = void 0;
+const tslib_1 = require("tslib");
 var PageConstructor_1 = require("./PageConstructor");
 Object.defineProperty(exports, "PageConstructor", { enumerable: true, get: function () { return PageConstructor_1.PageConstructor; } });
 var Provider_1 = require("./Provider");
 Object.defineProperty(exports, "PageConstructorProvider", { enumerable: true, get: function () { return Provider_1.PageConstructorProvider; } });
+tslib_1.__exportStar(require("./components"), exports);

package/build/cjs/context/theme/ThemeContext.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
-import { ConstructorTheme } from './ThemeValueContext';
+import { Theme } from '../../models';
 export interface ThemeContextProps {
-    theme: ConstructorTheme;
-    setTheme: (newTheme: ConstructorTheme) => void;
+    theme: Theme;
 }
 export declare const initialValue: ThemeContextProps;
 export declare const ThemeContext: React.Context<ThemeContextProps>;

package/build/cjs/context/theme/ThemeContext.js

@@ -6,6 +6,5 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const constants_1 = require("../../components/constants");
 exports.initialValue = {
     theme: constants_1.DEFAULT_THEME,
-    setTheme: () => { },
 };
 exports.ThemeContext = react_1.default.createContext(exports.initialValue);

package/build/cjs/context/theme/index.d.ts

@@ -1,4 +1,3 @@
 export * from './ThemeContext';
-export * from './ThemeProvider';
 export * from './useTheme';
 export * from './withTheme';

package/build/cjs/context/theme/index.js

@@ -2,6 +2,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./ThemeContext"), exports);
-tslib_1.__exportStar(require("./ThemeProvider"), exports);
 tslib_1.__exportStar(require("./useTheme"), exports);
 tslib_1.__exportStar(require("./withTheme"), exports);

package/build/cjs/context/theme/useTheme.d.ts

@@ -1,2 +1,2 @@
 import { ThemeContextProps } from './ThemeContext';
-export declare function useTheme(): [ThemeContextProps['theme'], ThemeContextProps['setTheme']];
+export declare function useTheme(): ThemeContextProps['theme'];

package/build/cjs/context/theme/useTheme.js

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const ThemeContext_1 = require("./ThemeContext");
 function useTheme() {
-    const { theme, setTheme } = react_1.default.useContext(ThemeContext_1.ThemeContext);
-    return [theme, setTheme];
+    const { theme } = react_1.default.useContext(ThemeContext_1.ThemeContext);
+    return theme;
 }
 exports.useTheme = useTheme;

package/build/cjs/context/theme/withTheme.js

@@ -9,7 +9,7 @@ function withTheme(WrappedComponent) {
     const componentName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
     return _a = class WithThemeComponent extends react_1.default.Component {
             render() {
-                return (react_1.default.createElement(WrappedComponent, Object.assign({}, this.props, { theme: this.context.theme, setTheme: this.context.setTheme })));
+                return react_1.default.createElement(WrappedComponent, Object.assign({}, this.props, { theme: this.context.theme }));
             }
         },
         _a.displayName = `withTheme(${componentName})`,

package/build/cjs/customization/BlockDecoration.d.ts

@@ -1,3 +1,3 @@
 import { PropsWithChildren } from 'react';
 import { BlockDecorationProps } from '../models';
-export declare const BlockDecoration: (props: PropsWithChildren<BlockDecorationProps>) => JSX.Element;
+export declare const BlockDecoration: ({ children: blockChildren, ...rest }: PropsWithChildren<BlockDecorationProps>) => JSX.Element;

package/build/cjs/customization/BlockDecoration.js

@@ -3,20 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BlockDecoration = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
-const blockIdContext_1 = require("../context/blockIdContext");
 const innerContext_1 = require("../context/innerContext");
-const utils_1 = require("../utils");
-const BlockDecoration = (props) => {
-    var _a, _b;
-    const blockContenxtId = (0, utils_1.getBlockIndexFromId)((0, react_1.useContext)(blockIdContext_1.BlockIdContext));
-    const { headerBlockTypes } = (0, react_1.useContext)(innerContext_1.InnerContext);
-    const blockId = props.id || blockContenxtId;
-    const isHeader = Boolean(props.id && headerBlockTypes.includes(props.id));
-    const block = react_1.default.createElement(react_1.Fragment, null, props.children);
-    const blockDecorators = (_b = (_a = (0, react_1.useContext)(innerContext_1.InnerContext).customization) === null || _a === void 0 ? void 0 : _a.decorators) === null || _b === void 0 ? void 0 : _b.block;
-    if (!blockDecorators) {
-        return block;
-    }
-    return blockDecorators.reduce((children, decorator) => (react_1.default.createElement(react_1.Fragment, null, decorator({ children, id: blockId, isHeader }))), block);
+const BlockDecoration = (_a) => {
+    var _b, _c;
+    var { children: blockChildren } = _a, rest = tslib_1.__rest(_a, ["children"]);
+    const blockDecorators = (_c = (_b = (0, react_1.useContext)(innerContext_1.InnerContext).customization) === null || _b === void 0 ? void 0 : _b.decorators) === null || _c === void 0 ? void 0 : _c.block;
+    const content = blockDecorators
+        ? blockDecorators.reduce((children, decorator) => decorator(Object.assign({ children }, rest)), blockChildren)
+        : blockChildren;
+    return react_1.default.createElement(react_1.Fragment, null, content);
 };
 exports.BlockDecoration = BlockDecoration;

package/build/cjs/editor/{Components → components}/AddBlock/AddBlock.css

@@ -1,9 +1,9 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-add-block {
-  position: fixed;
+  position: absolute;
   bottom: 32px;
-  left: 50%;
+  left: calc(50% + var(--pc-editor-left-column-width) / 2);
   transform: translateX(-50%);
   z-index: 110;
 }
@@ -23,8 +23,8 @@ unpredictable css rules order in build */
   transition: transform 0.2s;
   width: 76px;
   height: 40px;
-  color: var(--yc-color-text-inverted-primary);
-  background-color: var(--yc-color-promo-base-neon);
+  color: var(--g-color-text-primary);
+  background-color: var(--pc-editor-base-color);
   border-radius: 8px;
 }
 .pc-add-block__button:hover {
@@ -71,10 +71,11 @@ unpredictable css rules order in build */
   height: 74px;
   border-radius: var(--pc-border-radius);
   margin-right: 16px;
+  color: var(--pc-editor-base-color);
 }
 .pc-add-block__popup .pc-add-block__title {
-  font-size: var(--yc-text-body-2-font-size);
-  line-height: var(--yc-text-body-2-line-height);
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
 }
 .pc-add-block__popup .pc-add-block__title,
 .pc-add-block__popup .pc-add-block__description {

package/build/cjs/editor/components/AddBlock/AddBlock.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+import { Block, ClassNameProps } from '../../../models';
+export interface AddBlockProps extends ClassNameProps {
+    onAdd: (data: Block) => void;
+}
+declare const AddBlock: ({ onAdd, className }: PropsWithChildren<AddBlockProps>) => JSX.Element;
+export default AddBlock;

package/build/cjs/editor/{Components → components}/AddBlock/AddBlock.js

@@ -9,20 +9,20 @@ const utils_1 = require("../../../utils");
 const data_1 = tslib_1.__importDefault(require("../../data"));
 const b = (0, utils_1.block)('add-block');
 const sortedBlockNames = Object.keys(constructor_items_1.blockMap).sort();
-const AddBlock = ({ onAdd }) => {
+const AddBlock = ({ onAdd, className }) => {
     const [isOpened, setIsOpened] = (0, react_1.useState)(false);
     const [search, setSearch] = (0, react_1.useState)('');
     const ref = (0, react_1.useRef)(null);
     const blocks = (0, react_1.useMemo)(() => sortedBlockNames.filter((blockName) => data_1.default[blockName].meta.title
         .toLocaleLowerCase()
         .startsWith(search.toLocaleLowerCase())), [search]);
-    return (react_1.default.createElement("div", { className: b(), ref: ref },
+    return (react_1.default.createElement("div", { className: b(null, className), ref: ref },
         react_1.default.createElement("button", { className: b('button'), onClick: () => {
                 setIsOpened(!isOpened);
                 setSearch('');
             } },
             react_1.default.createElement(icons_1.Plus, { className: b('icon') })),
-        isOpened && (react_1.default.createElement(uikit_1.Popup, { anchorRef: ref, open: isOpened, className: b('popup'), placement: "top", offset: [0, 24], onOutsideClick: () => setIsOpened(false) },
+        isOpened && (react_1.default.createElement(uikit_1.Popup, { anchorRef: ref, open: isOpened, contentClassName: b('popup'), placement: "top", offset: [0, 24], onOutsideClick: () => setIsOpened(false) },
             react_1.default.createElement("div", { className: b('search') },
                 react_1.default.createElement(uikit_1.TextInput, { placeholder: "search", type: "text", value: search, size: "l", onUpdate: (value) => setSearch(value) })),
             react_1.default.createElement("div", { className: b('blocks') }, blocks.map((blockName) => {

package/build/cjs/editor/components/BlockForm/BlockForm.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Block } from '../../../models';
+import { CustomSpec } from '../../dynamic-forms-custom/parser/types';
+interface BlockFormProps {
+    data: Block;
+    spec: CustomSpec;
+    onChange: (data: Block) => void;
+    onSelect: () => void;
+    active?: boolean;
+}
+export declare const BlockForm: React.MemoExoticComponent<({ data: { type, ...content }, onChange, onSelect, active, spec: specRaw }: BlockFormProps) => JSX.Element>;
+export {};

package/build/cjs/editor/components/BlockForm/BlockForm.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BlockForm = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const dynamic_forms_1 = require("@gravity-ui/dynamic-forms");
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const react_final_form_1 = require("react-final-form");
+const config_1 = require("../../dynamic-forms-custom/config");
+const usePreviousValue_1 = tslib_1.__importDefault(require("../../hooks/usePreviousValue"));
+exports.BlockForm = (0, react_1.memo)((_a) => {
+    var _b = _a.data, { type } = _b, content = tslib_1.__rest(_b, ["type"]), { onChange, onSelect, active, spec: specRaw } = _a;
+    const initialValues = (0, react_1.useMemo)(() => ({ content }), [content]);
+    const prevContent = (0, usePreviousValue_1.default)(content);
+    const spec = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, specRaw), { viewSpec: Object.assign(Object.assign({}, specRaw.viewSpec), { layoutOpen: active }) })), [specRaw, active]);
+    if (!active) {
+        return (react_1.default.createElement(dynamic_forms_1.SimpleVerticalAccordeon, { open: false, name: type, title: spec.viewSpec.layoutTitle || type, onOpenChange: onSelect }, ' '));
+    }
+    return (react_1.default.createElement(react_final_form_1.Form, { initialValues: initialValues, onSubmit: lodash_1.default.noop }, () => (react_1.default.createElement(react_1.Fragment, null,
+        react_1.default.createElement(react_final_form_1.FormSpy, { onChange: ({ values }) => {
+                // fix for FormSpy onChange called twice without content changes
+                if (!lodash_1.default.isEqual(values.content, prevContent)) {
+                    onChange(Object.assign({ type }, values.content));
+                }
+            }, subscription: { values: true } }),
+        react_1.default.createElement(dynamic_forms_1.DynamicField, { name: "content", spec: spec, config: config_1.dynamicConfig, withoutInsertFFDebounce: true })))));
+});
+exports.BlockForm.displayName = 'BlockForm';

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

@@ -0,0 +1,34 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-control-panel {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  width: 100%;
+  height: var(--pc-editor-header-height);
+  padding: 8px 20px;
+  background-color: var(--g-color-base-background);
+  border: 1px var(--g-color-line-generic);
+  border-style: solid none;
+}
+.pc-control-panel__icon {
+  display: flex;
+  align-items: center;
+}
+.pc-control-panel__radio-button {
+  margin-left: 12px;
+}
+.pc-control-panel__radio-button .yc-radio-button__option {
+  display: flex;
+  align-items: center;
+}
+.pc-control-panel__mode-switch {
+  display: flex;
+  align-items: center;
+  place-self: center;
+}
+.pc-control-panel__theme-switch {
+  place-self: center end;
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}

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

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