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

package/build/esm/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/esm/containers/PageConstructor/PageConstructor.js

@@ -1,11 +1,13 @@
 import { __rest } from "tslib";
-import React, { useContext, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import '@doc-tools/transform/dist/js/yfm';
+import blockOrigin from 'bem-cn-lite';
 import BackgroundMedia from '../../components/BackgroundMedia/BackgroundMedia';
+import { UIKIT_ROOT_CLASS } from '../../components/constants';
 import { blockMap, subBlockMap } from '../../constructor-items';
 import { AnimateContext } from '../../context/animateContext';
 import { InnerContext } from '../../context/innerContext';
-import { ThemeValueContext } from '../../context/theme/ThemeValueContext';
+import { useTheme } from '../../context/theme';
 import { Grid } from '../../grid';
 import { BlockType, BlockTypes, HeaderBlockTypes, SubBlockTypes, } from '../../models';
 import Layout from '../../navigation/containers/Layout/Layout';
@@ -15,6 +17,7 @@ import { ConstructorHeader } from './components/ConstructorItem';
 import { ConstructorRow } from './components/ConstructorRow';
 import './PageConstructor.css';
 const b = cnBlock('page-constructor');
+const ycr = blockOrigin(UIKIT_ROOT_CLASS);
 export const Constructor = (props) => {
     const { content: { blocks = [], background = {} } = {}, renderMenu, shouldRenderBlock, navigation, custom, } = props;
     const { context } = useMemo(() => ({
@@ -30,12 +33,12 @@ export const Constructor = (props) => {
             },
         },
     }), [custom, shouldRenderBlock]);
-    const { themeValue: theme } = useContext(ThemeValueContext);
+    const theme = useTheme();
     const header = getHeaderBlock(blocks, context.headerBlockTypes);
     const restBlocks = getOrderedBlocks(blocks, context.headerBlockTypes);
     const themedBackground = getThemedValue(background, theme);
     return (React.createElement(InnerContext.Provider, { value: context },
-        React.createElement("div", { className: b() },
+        React.createElement("div", { className: b(null, ycr({ theme })) },
             React.createElement("div", { className: b('wrapper') },
                 themedBackground && (React.createElement(BackgroundMedia, Object.assign({}, themedBackground, { className: b('background') }))),
                 React.createElement(Layout, { navigation: navigation },

package/build/esm/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/esm/containers/PageConstructor/Provider.js

@@ -9,12 +9,12 @@ import { MetrikaContext } from '../../context/metrikaContext';
 import { MobileContext } from '../../context/mobileContext';
 import { ProjectSettingsContext, } from '../../context/projectSettingsContext';
 import { SSRContext } from '../../context/ssrContext';
-import { ThemeValueContext } from '../../context/theme/ThemeValueContext';
+import { ThemeContext } from '../../context/theme';
 export const PageConstructorProvider = (props) => {
     const { isMobile, mapsContext = initialMapValue, locale = {}, location = {}, metrika = {}, analytics = {}, ssrConfig = {}, projectSettings = {}, theme = DEFAULT_THEME, children, image = {}, } = props;
     /* eslint-disable react/jsx-key */
     const context = [
-        React.createElement(ThemeValueContext.Provider, { value: { themeValue: theme } }),
+        React.createElement(ThemeContext.Provider, { value: { theme } }),
         React.createElement(ProjectSettingsContext.Provider, { value: projectSettings }),
         React.createElement(LocaleContext.Provider, { value: locale }),
         React.createElement(ImageContext.Provider, { value: image }),

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

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

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

@@ -1,8 +1,12 @@
-import React from 'react';
+import React, { useMemo } from 'react';
+import _ from 'lodash';
 import BlockBase from '../../../../components/BlockBase/BlockBase';
+import { BlockDecoration } from '../../../../customization/BlockDecoration';
 import { block } from '../../../../utils';
 const b = block('constructor-block');
-export const ConstructorBlock = ({ data, children, }) => {
-    const { anchor, visible, type } = data;
-    return (React.createElement(BlockBase, { className: b({ type }), anchor: anchor, visible: visible, resetPaddings: data.resetPaddings }, children));
+export const ConstructorBlock = ({ index = 0, data, children, }) => {
+    const { type } = data;
+    const blockBaseProps = useMemo(() => _.pick(data, ['anchor', 'visible', 'resetPaddings']), [data]);
+    return (React.createElement(BlockDecoration, Object.assign({ type: type, index: index }, blockBaseProps),
+        React.createElement(BlockBase, Object.assign({ className: b({ type }) }, blockBaseProps), children)));
 };

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

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

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

@@ -1,7 +1,7 @@
 import React, { Fragment, useContext } from 'react';
 import _ from 'lodash';
-import { BlockIdContext } from '../../../../context/blockIdContext';
 import { InnerContext } from '../../../../context/innerContext';
+import { BlockDecoration } from '../../../../customization/BlockDecoration';
 import { getBlockKey } from '../../../../utils';
 import { ConstructorBlock } from '../ConstructorBlock/ConstructorBlock';
 import { ConstructorItem } from '../ConstructorItem';
@@ -10,7 +10,7 @@ export const ConstructorBlocks = ({ items }) => {
     const { blockTypes, loadables, itemMap, shouldRenderBlock } = useContext(InnerContext);
     const renderer = (parentId = '', item, index) => {
         if (!itemMap[item.type]) {
-            return null;
+            return parentId ? null : (React.createElement(BlockDecoration, { type: item.type, index: index }, null));
         }
         let itemElement;
         const key = getBlockKey(item, index);
@@ -31,9 +31,12 @@ export const ConstructorBlocks = ({ items }) => {
             if ('children' in item && item.children) {
                 children = item.children.map(renderer.bind(null, blockId));
             }
-            itemElement = (React.createElement(ConstructorItem, { data: item, blockKey: blockId }, children));
+            itemElement = (React.createElement(ConstructorItem, { data: item, key: blockId, blockKey: blockId }, children));
         }
-        return (React.createElement(BlockIdContext.Provider, { value: blockId, key: blockId }, blockTypes.includes(item.type) ? (React.createElement(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.createElement(ConstructorBlock, { data: item, key: blockId, index: index }, itemElement)) : (itemElement);
     };
     return React.createElement(Fragment, null, items.map(renderer.bind(null, '')));
 };

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

@@ -1,7 +1,7 @@
-import { ConstructorItem as ConstructorItemType, WithChildren } from '../../../../models';
+import { ConstructorBlock, WithChildren } from '../../../../models';
 export interface ConstructorItemProps {
-    data: ConstructorItemType;
+    data: ConstructorBlock;
     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/esm/containers/PageConstructor/components/ConstructorItem/ConstructorItem.js

@@ -1,12 +1,14 @@
 import { __rest } from "tslib";
 import React, { useContext } from 'react';
+import { BlockIdContext } from '../../../../context/blockIdContext';
 import { InnerContext } from '../../../../context/innerContext';
 import { BlockDecoration } from '../../../../customization/BlockDecoration';
-export const ConstructorItem = ({ data, children }) => {
+export const ConstructorItem = ({ data, blockKey, children }) => {
     const { itemMap } = useContext(InnerContext);
     const { type } = data, rest = __rest(data, ["type"]);
     const Component = itemMap[type];
-    return React.createElement(Component, Object.assign({}, rest), children);
+    return (React.createElement(BlockIdContext.Provider, { value: blockKey },
+        React.createElement(Component, Object.assign({}, rest), children)));
 };
-export const ConstructorHeader = ({ data, blockKey, }) => (React.createElement(BlockDecoration, { id: data.type },
+export const ConstructorHeader = ({ data, blockKey, }) => (React.createElement(BlockDecoration, { type: data.type },
     React.createElement(ConstructorItem, { data: data, key: data.type, blockKey: blockKey })));

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

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

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

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

package/build/esm/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/esm/containers/PageConstructor/index.js

@@ -1,2 +1,3 @@
 export { PageConstructor } from './PageConstructor';
 export { PageConstructorProvider } from './Provider';
+export * from './components';

package/build/esm/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/esm/context/theme/ThemeContext.js

@@ -2,6 +2,5 @@ import React from 'react';
 import { DEFAULT_THEME } from '../../components/constants';
 export const initialValue = {
     theme: DEFAULT_THEME,
-    setTheme: () => { },
 };
 export const ThemeContext = React.createContext(initialValue);

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

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

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

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

package/build/esm/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/esm/context/theme/useTheme.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ThemeContext } from './ThemeContext';
 export function useTheme() {
-    const { theme, setTheme } = React.useContext(ThemeContext);
-    return [theme, setTheme];
+    const { theme } = React.useContext(ThemeContext);
+    return theme;
 }

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

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

package/build/esm/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/esm/customization/BlockDecoration.js

@@ -1,17 +1,12 @@
+import { __rest } from "tslib";
 import React, { Fragment, useContext } from 'react';
-import { BlockIdContext } from '../context/blockIdContext';
 import { InnerContext } from '../context/innerContext';
-import { getBlockIndexFromId } from '../utils';
-export const BlockDecoration = (props) => {
-    var _a, _b;
-    const blockContenxtId = getBlockIndexFromId(useContext(BlockIdContext));
-    const { headerBlockTypes } = useContext(InnerContext);
-    const blockId = props.id || blockContenxtId;
-    const isHeader = Boolean(props.id && headerBlockTypes.includes(props.id));
-    const block = React.createElement(Fragment, null, props.children);
-    const blockDecorators = (_b = (_a = useContext(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.createElement(Fragment, null, decorator({ children, id: blockId, isHeader }))), block);
+export const BlockDecoration = (_a) => {
+    var _b, _c;
+    var { children: blockChildren } = _a, rest = __rest(_a, ["children"]);
+    const blockDecorators = (_c = (_b = useContext(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.createElement(Fragment, null, content);
 };

package/build/esm/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/esm/editor/components/AddBlock/AddBlock.d.ts

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

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

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

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Block, ConstructorBlock } from '../../../models';
+import { CustomSpec } from '../../dynamic-forms-custom/parser/types';
+interface BlockFormProps {
+    data: ConstructorBlock;
+    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/esm/editor/components/BlockForm/BlockForm.js

@@ -0,0 +1,25 @@
+import { __rest } from "tslib";
+import React, { Fragment, memo, useMemo } from 'react';
+import { DynamicField, SimpleVerticalAccordeon } from '@gravity-ui/dynamic-forms';
+import _ from 'lodash';
+import { Form as FinalForm, FormSpy } from 'react-final-form';
+import { dynamicConfig } from '../../dynamic-forms-custom/config';
+import usePreviousValue from '../../hooks/usePreviousValue';
+export const BlockForm = memo((_a) => {
+    var _b = _a.data, { type } = _b, content = __rest(_b, ["type"]), { onChange, onSelect, active, spec: specRaw } = _a;
+    const initialValues = useMemo(() => ({ content }), [content]);
+    const prevContent = usePreviousValue(content);
+    const spec = useMemo(() => (Object.assign(Object.assign({}, specRaw), { viewSpec: Object.assign(Object.assign({}, specRaw.viewSpec), { layoutOpen: active }) })), [specRaw, active]);
+    if (!active) {
+        return (React.createElement(SimpleVerticalAccordeon, { open: false, name: type, title: spec.viewSpec.layoutTitle || type, onOpenChange: onSelect }, ' '));
+    }
+    return (React.createElement(FinalForm, { initialValues: initialValues, onSubmit: _.noop }, () => (React.createElement(Fragment, null,
+        React.createElement(FormSpy, { onChange: ({ values }) => {
+                // fix for FormSpy onChange called twice without content changes
+                if (!_.isEqual(values.content, prevContent)) {
+                    onChange(Object.assign({ type }, values.content));
+                }
+            }, subscription: { values: true } }),
+        React.createElement(DynamicField, { name: "content", spec: spec, config: dynamicConfig, withoutInsertFFDebounce: true })))));
+});
+BlockForm.displayName = 'BlockForm';

package/build/esm/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/esm/editor/components/ControlPanel/ControlPanel.d.ts

@@ -0,0 +1,11 @@
+import { ClassNameProps, Theme } from '../../../models';
+import { ViewModeItem } from '../../types';
+import './ControlPanel.css';
+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;