@gravity-ui/page-constructor 8.5.0-alpha.1 → 8.5.0-alpha.12

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

@@ -3,15 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
-const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
 const cn_1 = require("../../utils/cn.js");
+const defaultIcon_1 = require("./defaultIcon.js");
 const b = (0, cn_1.editorCn)('block-card');
 const BlockCard = ({ className, type, name, previewImg, onMouseDown }) => {
     const handleMouseDown = React.useCallback(() => {
         onMouseDown(type);
     }, [onMouseDown, type]);
-    return ((0, jsx_runtime_1.jsxs)(uikit_1.Card, { className: b(null, className), onMouseDown: handleMouseDown, children: [(0, jsx_runtime_1.jsx)("div", { className: b('image'), children: previewImg ? ((0, jsx_runtime_1.jsx)("img", { className: b('image-img'), src: previewImg, alt: "" })) : ((0, jsx_runtime_1.jsx)(uikit_1.Icon, { className: b('icon'), size: 45, data: icons_1.SquareBars })) }), (0, jsx_runtime_1.jsx)("div", { className: b('name'), children: name })] }));
+    return ((0, jsx_runtime_1.jsxs)(uikit_1.Card, { className: b(null, className), onMouseDown: handleMouseDown, children: [(0, jsx_runtime_1.jsx)("div", { className: b('image'), children: previewImg ? ((0, jsx_runtime_1.jsx)("img", { className: b('image-img'), src: previewImg, alt: "preview of the block" })) : ((0, jsx_runtime_1.jsx)("img", { className: b('image-img'), src: defaultIcon_1.defaultIcon, alt: "preview of the block" })) }), (0, jsx_runtime_1.jsx)("div", { className: b('name'), children: name })] }));
 };
 exports.default = BlockCard;
 //# sourceMappingURL=BlockCard.js.map

package/build/cjs/editor-v2/components/BlockCard/BlockCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"BlockCard.js","sourceRoot":"../../../../../src","sources":["editor-v2/components/BlockCard/BlockCard.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAE/B,6CAA6C;AAC7C,6CAA6C;AAE7C,0CAAwC;AAIxC,MAAM,CAAC,GAAG,IAAA,aAAQ,EAAC,YAAY,CAAC,CAAC;AAUjC,MAAM,SAAS,GAAG,CAAC,EAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,WAAW,EAAiB,EAAE,EAAE;IACnF,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC3C,WAAW,CAAC,IAAI,CAAC,CAAC;IACtB,CAAC,EAAE,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC,CAAC;IAExB,OAAO,CACH,wBAAC,YAAI,IAAC,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,WAAW,EAAE,eAAe,aAC7D,gCAAK,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,YACrB,UAAU,CAAC,CAAC,CAAC,CACV,gCAAK,SAAS,EAAE,CAAC,CAAC,WAAW,CAAC,EAAE,GAAG,EAAE,UAAU,EAAE,GAAG,EAAC,EAAE,GAAG,CAC7D,CAAC,CAAC,CAAC,CACA,uBAAC,YAAI,IAAC,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,kBAAU,GAAI,CAC7D,GACC,EACN,gCAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YAAG,IAAI,GAAO,IACpC,CACV,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {SquareBars} from '@gravity-ui/icons';\nimport {Card, Icon} from '@gravity-ui/uikit';\n\nimport {editorCn} from '../../utils/cn';\n\nimport './BlockCard.scss';\n\nconst b = editorCn('block-card');\n\nexport interface BlockCardProps {\n    className?: string;\n    type: string;\n    name: string;\n    previewImg?: string;\n    onMouseDown: (type: string) => void;\n}\n\nconst BlockCard = ({className, type, name, previewImg, onMouseDown}: BlockCardProps) => {\n    const handleMouseDown = React.useCallback(() => {\n        onMouseDown(type);\n    }, [onMouseDown, type]);\n\n    return (\n        <Card className={b(null, className)} onMouseDown={handleMouseDown}>\n            <div className={b('image')}>\n                {previewImg ? (\n                    <img className={b('image-img')} src={previewImg} alt=\"\" />\n                ) : (\n                    <Icon className={b('icon')} size={45} data={SquareBars} />\n                )}\n            </div>\n            <div className={b('name')}>{name}</div>\n        </Card>\n    );\n};\n\nexport default BlockCard;\n"]}
+{"version":3,"file":"BlockCard.js","sourceRoot":"../../../../../src","sources":["editor-v2/components/BlockCard/BlockCard.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAE/B,6CAAuC;AAEvC,0CAAwC;AAExC,kDAA0C;AAI1C,MAAM,CAAC,GAAG,IAAA,aAAQ,EAAC,YAAY,CAAC,CAAC;AAUjC,MAAM,SAAS,GAAG,CAAC,EAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,WAAW,EAAiB,EAAE,EAAE;IACnF,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC3C,WAAW,CAAC,IAAI,CAAC,CAAC;IACtB,CAAC,EAAE,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC,CAAC;IAExB,OAAO,CACH,wBAAC,YAAI,IAAC,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,WAAW,EAAE,eAAe,aAC7D,gCAAK,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,YACrB,UAAU,CAAC,CAAC,CAAC,CACV,gCAAK,SAAS,EAAE,CAAC,CAAC,WAAW,CAAC,EAAE,GAAG,EAAE,UAAU,EAAE,GAAG,EAAC,sBAAsB,GAAG,CACjF,CAAC,CAAC,CAAC,CACA,gCAAK,SAAS,EAAE,CAAC,CAAC,WAAW,CAAC,EAAE,GAAG,EAAE,yBAAW,EAAE,GAAG,EAAC,sBAAsB,GAAG,CAClF,GACC,EACN,gCAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YAAG,IAAI,GAAO,IACpC,CACV,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {Card} from '@gravity-ui/uikit';\n\nimport {editorCn} from '../../utils/cn';\n\nimport {defaultIcon} from './defaultIcon';\n\nimport './BlockCard.scss';\n\nconst b = editorCn('block-card');\n\nexport interface BlockCardProps {\n    className?: string;\n    type: string;\n    name: string;\n    previewImg?: string;\n    onMouseDown: (type: string) => void;\n}\n\nconst BlockCard = ({className, type, name, previewImg, onMouseDown}: BlockCardProps) => {\n    const handleMouseDown = React.useCallback(() => {\n        onMouseDown(type);\n    }, [onMouseDown, type]);\n\n    return (\n        <Card className={b(null, className)} onMouseDown={handleMouseDown}>\n            <div className={b('image')}>\n                {previewImg ? (\n                    <img className={b('image-img')} src={previewImg} alt=\"preview of the block\" />\n                ) : (\n                    <img className={b('image-img')} src={defaultIcon} alt=\"preview of the block\" />\n                )}\n            </div>\n            <div className={b('name')}>{name}</div>\n        </Card>\n    );\n};\n\nexport default BlockCard;\n"]}

package/build/cjs/editor-v2/components/BlockCard/defaultIcon.d.ts

@@ -0,0 +1 @@
+export declare const defaultIcon: string;

package/build/cjs/editor-v2/components/BlockCard/defaultIcon.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultIcon = void 0;
+const utils_1 = require("../../../utils/index.js");
+exports.defaultIcon = (0, utils_1.svgToDataUri)(`<svg width="100" height="50" viewBox="0 0 100 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="100" height="50" rx="7.81395" fill="white"/>
+<rect x="8.93024" y="7" width="82" height="36" rx="3" fill="#262626"/>
+<path d="M53.7548 21.64C53.7548 22.0667 53.6948 22.4467 53.5748 22.78C53.4681 23.1133 53.3148 23.42 53.1148 23.7C52.9281 23.98 52.7081 24.2333 52.4548 24.46C52.2148 24.6867 51.9548 24.9067 51.6748 25.12C51.3681 25.36 51.0814 25.58 50.8148 25.78C50.5614 25.9667 50.3414 26.16 50.1548 26.36C49.9681 26.5467 49.8214 26.7533 49.7148 26.98C49.6081 27.1933 49.5548 27.44 49.5548 27.72V27.94H47.6948V27.6C47.6948 27.1867 47.7414 26.8267 47.8348 26.52C47.9281 26.2 48.0681 25.9133 48.2548 25.66C48.4548 25.3933 48.6948 25.14 48.9748 24.9C49.2548 24.6467 49.5748 24.3867 49.9348 24.12C50.3614 23.7733 50.6948 23.42 50.9348 23.06C51.1881 22.6867 51.3148 22.24 51.3148 21.72C51.3148 21.4667 51.2748 21.2133 51.1948 20.96C51.1281 20.7067 51.0014 20.4867 50.8148 20.3C50.6281 20.1133 50.3748 19.96 50.0548 19.84C49.7348 19.72 49.3214 19.66 48.8148 19.66C48.4148 19.66 48.0548 19.6933 47.7348 19.76C47.4148 19.8267 47.1414 19.9067 46.9148 20C46.6881 20.08 46.5081 20.16 46.3748 20.24C46.2548 20.3067 46.1814 20.3467 46.1548 20.36V18.64C46.1814 18.6267 46.2681 18.58 46.4148 18.5C46.5748 18.42 46.7881 18.34 47.0548 18.26C47.3214 18.1667 47.6414 18.0867 48.0148 18.02C48.4014 17.9533 48.8348 17.92 49.3148 17.92C50.0748 17.92 50.7281 18.0133 51.2748 18.2C51.8348 18.3867 52.2948 18.6467 52.6548 18.98C53.0281 19.3133 53.3014 19.7067 53.4748 20.16C53.6614 20.6133 53.7548 21.1067 53.7548 21.64ZM48.7148 32.14C48.3148 32.14 47.9748 32 47.6948 31.72C47.4281 31.44 47.2948 31.1067 47.2948 30.72C47.2948 30.32 47.4281 29.98 47.6948 29.7C47.9748 29.42 48.3148 29.28 48.7148 29.28C49.1281 29.28 49.4681 29.42 49.7348 29.7C50.0148 29.98 50.1548 30.32 50.1548 30.72C50.1548 31.1067 50.0148 31.44 49.7348 31.72C49.4681 32 49.1281 32.14 48.7148 32.14Z" fill="#C0C8DB"/>
+</svg>
+`);
+//# sourceMappingURL=defaultIcon.js.map

package/build/cjs/editor-v2/components/BlockCard/defaultIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaultIcon.js","sourceRoot":"../../../../../src","sources":["editor-v2/components/BlockCard/defaultIcon.ts"],"names":[],"mappings":";;;AAAA,mDAA4C;AAE/B,QAAA,WAAW,GAAG,IAAA,oBAAY,EACnC;;;;;CAKH,CACA,CAAC","sourcesContent":["import {svgToDataUri} from '../../../utils';\n\nexport const defaultIcon = svgToDataUri(\n    `<svg width=\"100\" height=\"50\" viewBox=\"0 0 100 50\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<rect width=\"100\" height=\"50\" rx=\"7.81395\" fill=\"white\"/>\n<rect x=\"8.93024\" y=\"7\" width=\"82\" height=\"36\" rx=\"3\" fill=\"#262626\"/>\n<path d=\"M53.7548 21.64C53.7548 22.0667 53.6948 22.4467 53.5748 22.78C53.4681 23.1133 53.3148 23.42 53.1148 23.7C52.9281 23.98 52.7081 24.2333 52.4548 24.46C52.2148 24.6867 51.9548 24.9067 51.6748 25.12C51.3681 25.36 51.0814 25.58 50.8148 25.78C50.5614 25.9667 50.3414 26.16 50.1548 26.36C49.9681 26.5467 49.8214 26.7533 49.7148 26.98C49.6081 27.1933 49.5548 27.44 49.5548 27.72V27.94H47.6948V27.6C47.6948 27.1867 47.7414 26.8267 47.8348 26.52C47.9281 26.2 48.0681 25.9133 48.2548 25.66C48.4548 25.3933 48.6948 25.14 48.9748 24.9C49.2548 24.6467 49.5748 24.3867 49.9348 24.12C50.3614 23.7733 50.6948 23.42 50.9348 23.06C51.1881 22.6867 51.3148 22.24 51.3148 21.72C51.3148 21.4667 51.2748 21.2133 51.1948 20.96C51.1281 20.7067 51.0014 20.4867 50.8148 20.3C50.6281 20.1133 50.3748 19.96 50.0548 19.84C49.7348 19.72 49.3214 19.66 48.8148 19.66C48.4148 19.66 48.0548 19.6933 47.7348 19.76C47.4148 19.8267 47.1414 19.9067 46.9148 20C46.6881 20.08 46.5081 20.16 46.3748 20.24C46.2548 20.3067 46.1814 20.3467 46.1548 20.36V18.64C46.1814 18.6267 46.2681 18.58 46.4148 18.5C46.5748 18.42 46.7881 18.34 47.0548 18.26C47.3214 18.1667 47.6414 18.0867 48.0148 18.02C48.4014 17.9533 48.8348 17.92 49.3148 17.92C50.0748 17.92 50.7281 18.0133 51.2748 18.2C51.8348 18.3867 52.2948 18.6467 52.6548 18.98C53.0281 19.3133 53.3014 19.7067 53.4748 20.16C53.6614 20.6133 53.7548 21.1067 53.7548 21.64ZM48.7148 32.14C48.3148 32.14 47.9748 32 47.6948 31.72C47.4281 31.44 47.2948 31.1067 47.2948 30.72C47.2948 30.32 47.4281 29.98 47.6948 29.7C47.9748 29.42 48.3148 29.28 48.7148 29.28C49.1281 29.28 49.4681 29.42 49.7348 29.7C50.0148 29.98 50.1548 30.32 50.1548 30.72C50.1548 31.1067 50.0148 31.44 49.7348 31.72C49.4681 32 49.1281 32.14 48.7148 32.14Z\" fill=\"#C0C8DB\"/>\n</svg>\n`,\n);\n"]}

package/build/cjs/editor-v2/containers/MiddleScreen/MiddleScreen.css

@@ -99,16 +99,31 @@
   width: 100%;
   height: 100%;
 }
-.pceditor-middle-screen__exit-preview.g-button {
+.pceditor-middle-screen__exit-preview-container {
   position: fixed;
-  opacity: 0.5;
   top: 16px;
-  right: 16px;
+  right: 24px;
   z-index: 1001;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
+  background-color: var(--g-color-base-background);
+}
+.pceditor-middle-screen__exit-preview-container:hover {
+  opacity: 1;
+}
+.pceditor-middle-screen__exit-preview-container:hover .pceditor-middle-screen__exit-preview-text {
+  max-width: 100%;
+}
+.pceditor-middle-screen__exit-preview-text {
+  display: inline-block;
+  width: auto;
+  max-width: 3px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  transition: max-width 0.3s ease-in-out;
 }
 .pceditor-middle-screen__overlay {
   position: absolute;

package/build/cjs/editor-v2/containers/MiddleScreen/MiddleScreen.js

@@ -11,6 +11,8 @@ const useMainEditorStore_1 = require("../../hooks/useMainEditorStore.js");
 const cn_1 = require("../../utils/cn.js");
 const Overlay_1 = tslib_1.__importDefault(require("../Overlay/Overlay.js"));
 const b = (0, cn_1.editorCn)('middle-screen');
+// the maximum height of the iframe
+const IFRAME_MAX_HEIGHT = 50000;
 const MiddleScreen = ({ className, CustomTop }) => {
     const { zoom, initialized, deviceWidth, isPreviewMode, togglePreviewMode } = (0, useMainEditorStore_1.useMainEditorStore)();
     const { url, setIframeElement } = React.useContext(iframeContext_1.IframeContext);
@@ -23,7 +25,8 @@ const MiddleScreen = ({ className, CustomTop }) => {
         maxWidth: isPreviewMode ? '100%' : `${(100 / zoom) * 100}%`,
     }), [isPreviewMode, zoom]);
     const onResize = React.useCallback((newHeight) => {
-        setHeight(newHeight + 100);
+        const settedHeight = newHeight + 100;
+        setHeight(settedHeight > IFRAME_MAX_HEIGHT ? IFRAME_MAX_HEIGHT : settedHeight);
     }, [setHeight]);
     (0, postMessage_1.usePostMessageAPIListener)('ON_RESIZE', ({ height: newHeight }) => {
         onResize(newHeight);
@@ -34,6 +37,14 @@ const MiddleScreen = ({ className, CustomTop }) => {
     const isWithBackground = React.useMemo(() => {
         return deviceWidth !== '100%';
     }, [deviceWidth]);
+    React.useEffect(() => {
+        const handleKeyDown = (e) => {
+            if (isPreviewMode && e.key === 'Escape')
+                togglePreviewMode();
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [isPreviewMode, togglePreviewMode]);
     return ((0, jsx_runtime_1.jsxs)("div", { className: b(null, className), children: [CustomTop && !isPreviewMode ? ((0, jsx_runtime_1.jsx)("div", { className: b('topbar'), children: (0, jsx_runtime_1.jsx)(CustomTop, {}) })) : null, (0, jsx_runtime_1.jsx)("div", { className: b('content', { fullscreen: isPreviewMode }), children: (0, jsx_runtime_1.jsx)("div", { className: b('wrapper'), children: (0, jsx_runtime_1.jsxs)("div", { ref: setCanvasRef, className: b('canvas', {
                             hidden: !initialized,
                             fullscreen: isPreviewMode,
@@ -42,7 +53,7 @@ const MiddleScreen = ({ className, CustomTop }) => {
                                             if (instance) {
                                                 setIframeElement(instance);
                                             }
-                                        }, className: b('iframe', { fullscreen: isPreviewMode }), src: url, height: isPreviewMode ? '100%' : `${height}px`, width: isPreviewMode ? '100%' : deviceWidth, frameBorder: "0", title: "Page Constructor Iframe" }), !isPreviewMode && ((0, jsx_runtime_1.jsx)(Overlay_1.default, { className: b('overlay'), canvasElement: canvasRef }))] }), isPreviewMode && ((0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "normal-contrast", className: b('exit-preview'), onClick: togglePreviewMode, "aria-label": "Exit preview mode", title: "Exit preview mode", size: "l", children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { size: 24, data: icons_1.Xmark }) })), !initialized && ((0, jsx_runtime_1.jsx)("div", { className: b('loading'), children: (0, jsx_runtime_1.jsx)(uikit_1.Loader, { size: 'l' }) }))] }) }) })] }));
+                                        }, className: b('iframe', { fullscreen: isPreviewMode }), src: url, height: isPreviewMode ? '100%' : `${height}px`, width: isPreviewMode ? '100%' : deviceWidth, frameBorder: "0", title: "Page Constructor Iframe" }), !isPreviewMode && ((0, jsx_runtime_1.jsx)(Overlay_1.default, { className: b('overlay'), canvasElement: canvasRef }))] }), isPreviewMode && ((0, jsx_runtime_1.jsx)("div", { className: b('exit-preview-container'), children: (0, jsx_runtime_1.jsx)(uikit_1.ActionTooltip, { title: "Exit preview mode", placement: "left", hotkey: "Escape", children: (0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "action", className: b('exit-preview'), onClick: togglePreviewMode, "aria-label": "Exit preview mode", title: "Exit preview mode", size: "m", children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { size: 20, data: icons_1.Xmark }) }) }) })), !initialized && ((0, jsx_runtime_1.jsx)("div", { className: b('loading'), children: (0, jsx_runtime_1.jsx)(uikit_1.Loader, { size: 'l' }) }))] }) }) })] }));
 };
 exports.default = MiddleScreen;
 //# sourceMappingURL=MiddleScreen.js.map

package/build/cjs/editor-v2/containers/MiddleScreen/MiddleScreen.js.map

@@ -1 +1 @@
-{"version":3,"file":"MiddleScreen.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/MiddleScreen/MiddleScreen.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {Xmark} from '@gravity-ui/icons';\nimport {Button, Icon, Loader} from '@gravity-ui/uikit';\n\nimport {usePostMessageAPIListener} from '../../../common/postMessage';\nimport {IframeContext} from '../../context/iframeContext';\nimport {useMainEditorStore} from '../../hooks/useMainEditorStore';\nimport {editorCn} from '../../utils/cn';\nimport Overlay from '../Overlay/Overlay';\n\nimport './MiddleScreen.scss';\n\nconst b = editorCn('middle-screen');\n\ninterface MiddleScreenProps {\n    className?: string;\n    CustomTop?: React.ElementType;\n}\n\nconst MiddleScreen = ({className, CustomTop}: MiddleScreenProps) => {\n    const {zoom, initialized, deviceWidth, isPreviewMode, togglePreviewMode} = useMainEditorStore();\n    const {url, setIframeElement} = React.useContext(IframeContext);\n    const [canvasRef, setCanvasRef] = React.useState<HTMLDivElement | null>(null);\n    const [height, setHeight] = React.useState(0);\n\n    const canvasStyle = React.useMemo(\n        () => ({\n            transform: isPreviewMode ? 'none' : `scale(${zoom}%)`,\n            height: isPreviewMode ? '100%' : `${(100 / zoom) * 100}%`,\n            width: isPreviewMode ? '100%' : `${(100 / zoom) * 100}%`,\n            maxWidth: isPreviewMode ? '100%' : `${(100 / zoom) * 100}%`,\n        }),\n        [isPreviewMode, zoom],\n    );\n\n    const onResize = React.useCallback(\n        (newHeight: number) => {\n            setHeight(newHeight + 100);\n        },\n        [setHeight],\n    );\n\n    usePostMessageAPIListener('ON_RESIZE', ({height: newHeight}) => {\n        onResize(newHeight);\n    });\n\n    usePostMessageAPIListener('ON_INIT', ({height: newHeight}) => {\n        onResize(newHeight);\n    });\n\n    const isWithBackground = React.useMemo(() => {\n        return deviceWidth !== '100%';\n    }, [deviceWidth]);\n\n    return (\n        <div className={b(null, className)}>\n            {CustomTop && !isPreviewMode ? (\n                <div className={b('topbar')}>\n                    <CustomTop />\n                </div>\n            ) : null}\n            <div className={b('content', {fullscreen: isPreviewMode})}>\n                <div className={b('wrapper')}>\n                    <div\n                        ref={setCanvasRef}\n                        className={b('canvas', {\n                            hidden: !initialized,\n                            fullscreen: isPreviewMode,\n                            withBackground: isWithBackground,\n                        })}\n                        style={canvasStyle}\n                    >\n                        <div\n                            className={b('iframe-container', {fullscreen: isPreviewMode})}\n                            style={{width: isPreviewMode ? '100%' : deviceWidth}}\n                        >\n                            <iframe\n                                ref={(instance) => {\n                                    if (instance) {\n                                        setIframeElement(instance);\n                                    }\n                                }}\n                                className={b('iframe', {fullscreen: isPreviewMode})}\n                                src={url}\n                                height={isPreviewMode ? '100%' : `${height}px`}\n                                width={isPreviewMode ? '100%' : deviceWidth}\n                                frameBorder=\"0\"\n                                title=\"Page Constructor Iframe\"\n                            />\n                            {!isPreviewMode && (\n                                <Overlay className={b('overlay')} canvasElement={canvasRef} />\n                            )}\n                        </div>\n                        {isPreviewMode && (\n                            <Button\n                                view=\"normal-contrast\"\n                                className={b('exit-preview')}\n                                onClick={togglePreviewMode}\n                                aria-label=\"Exit preview mode\"\n                                title=\"Exit preview mode\"\n                                size=\"l\"\n                            >\n                                <Icon size={24} data={Xmark} />\n                            </Button>\n                        )}\n                        {!initialized && (\n                            <div className={b('loading')}>\n                                <Loader size={'l'} />\n                            </div>\n                        )}\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default MiddleScreen;\n"]}
+{"version":3,"file":"MiddleScreen.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/MiddleScreen/MiddleScreen.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {Xmark} from '@gravity-ui/icons';\nimport {ActionTooltip, Button, Icon, Loader} from '@gravity-ui/uikit';\n\nimport {usePostMessageAPIListener} from '../../../common/postMessage';\nimport {IframeContext} from '../../context/iframeContext';\nimport {useMainEditorStore} from '../../hooks/useMainEditorStore';\nimport {editorCn} from '../../utils/cn';\nimport Overlay from '../Overlay/Overlay';\n\nimport './MiddleScreen.scss';\n\nconst b = editorCn('middle-screen');\n\n// the maximum height of the iframe\nconst IFRAME_MAX_HEIGHT = 50000;\n\ninterface MiddleScreenProps {\n    className?: string;\n    CustomTop?: React.ElementType;\n}\n\nconst MiddleScreen = ({className, CustomTop}: MiddleScreenProps) => {\n    const {zoom, initialized, deviceWidth, isPreviewMode, togglePreviewMode} = useMainEditorStore();\n    const {url, setIframeElement} = React.useContext(IframeContext);\n    const [canvasRef, setCanvasRef] = React.useState<HTMLDivElement | null>(null);\n    const [height, setHeight] = React.useState(0);\n\n    const canvasStyle = React.useMemo(\n        () => ({\n            transform: isPreviewMode ? 'none' : `scale(${zoom}%)`,\n            height: isPreviewMode ? '100%' : `${(100 / zoom) * 100}%`,\n            width: isPreviewMode ? '100%' : `${(100 / zoom) * 100}%`,\n            maxWidth: isPreviewMode ? '100%' : `${(100 / zoom) * 100}%`,\n        }),\n        [isPreviewMode, zoom],\n    );\n\n    const onResize = React.useCallback(\n        (newHeight: number) => {\n            const settedHeight = newHeight + 100;\n            setHeight(settedHeight > IFRAME_MAX_HEIGHT ? IFRAME_MAX_HEIGHT : settedHeight);\n        },\n        [setHeight],\n    );\n\n    usePostMessageAPIListener('ON_RESIZE', ({height: newHeight}) => {\n        onResize(newHeight);\n    });\n\n    usePostMessageAPIListener('ON_INIT', ({height: newHeight}) => {\n        onResize(newHeight);\n    });\n\n    const isWithBackground = React.useMemo(() => {\n        return deviceWidth !== '100%';\n    }, [deviceWidth]);\n\n    React.useEffect(() => {\n        const handleKeyDown = (e: KeyboardEvent) => {\n            if (isPreviewMode && e.key === 'Escape') togglePreviewMode();\n        };\n\n        document.addEventListener('keydown', handleKeyDown);\n        return () => document.removeEventListener('keydown', handleKeyDown);\n    }, [isPreviewMode, togglePreviewMode]);\n\n    return (\n        <div className={b(null, className)}>\n            {CustomTop && !isPreviewMode ? (\n                <div className={b('topbar')}>\n                    <CustomTop />\n                </div>\n            ) : null}\n            <div className={b('content', {fullscreen: isPreviewMode})}>\n                <div className={b('wrapper')}>\n                    <div\n                        ref={setCanvasRef}\n                        className={b('canvas', {\n                            hidden: !initialized,\n                            fullscreen: isPreviewMode,\n                            withBackground: isWithBackground,\n                        })}\n                        style={canvasStyle}\n                    >\n                        <div\n                            className={b('iframe-container', {fullscreen: isPreviewMode})}\n                            style={{width: isPreviewMode ? '100%' : deviceWidth}}\n                        >\n                            <iframe\n                                ref={(instance) => {\n                                    if (instance) {\n                                        setIframeElement(instance);\n                                    }\n                                }}\n                                className={b('iframe', {fullscreen: isPreviewMode})}\n                                src={url}\n                                height={isPreviewMode ? '100%' : `${height}px`}\n                                width={isPreviewMode ? '100%' : deviceWidth}\n                                frameBorder=\"0\"\n                                title=\"Page Constructor Iframe\"\n                            />\n                            {!isPreviewMode && (\n                                <Overlay className={b('overlay')} canvasElement={canvasRef} />\n                            )}\n                        </div>\n                        {isPreviewMode && (\n                            <div className={b('exit-preview-container')}>\n                                <ActionTooltip\n                                    title=\"Exit preview mode\"\n                                    placement=\"left\"\n                                    hotkey=\"Escape\"\n                                >\n                                    <Button\n                                        view=\"action\"\n                                        className={b('exit-preview')}\n                                        onClick={togglePreviewMode}\n                                        aria-label=\"Exit preview mode\"\n                                        title=\"Exit preview mode\"\n                                        size=\"m\"\n                                    >\n                                        <Icon size={20} data={Xmark} />\n                                    </Button>\n                                </ActionTooltip>\n                            </div>\n                        )}\n                        {!initialized && (\n                            <div className={b('loading')}>\n                                <Loader size={'l'} />\n                            </div>\n                        )}\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default MiddleScreen;\n"]}

package/build/cjs/editor-v2/context/editorStore/MainEditorStoreProvider.js

@@ -4,6 +4,7 @@ exports.MainEditorStoreProvider = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
+const constants_1 = require("../../../common/constants.js");
 const utils_1 = require("../../../common/utils.js");
 const store_1 = require("../../store.js");
 const iframeContext_1 = require("../iframeContext/index.js");
@@ -14,6 +15,7 @@ const MainEditorStoreProvider = ({ children }) => {
     const sendPostMessage = React.useCallback((data) => {
         const message = {
             state: data,
+            source: constants_1.POST_MESSAGE_SOURCE,
         };
         if (iframeElement && iframeElement.contentWindow) {
             iframeElement.contentWindow.postMessage(message, '*');

package/build/cjs/editor-v2/context/editorStore/MainEditorStoreProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"MainEditorStoreProvider.js","sourceRoot":"../../../../../src","sources":["editor-v2/context/editorStore/MainEditorStoreProvider.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAM/B,oDAA+C;AAC/C,0CAA2D;AAC3D,6DAA+C;AAE/C,wEAAgE;AAIzD,MAAM,uBAAuB,GAAG,CAAC,EAAC,QAAQ,EAA0B,EAAE,EAAE;IAC3E,MAAM,EAAC,aAAa,EAAC,GAAG,KAAK,CAAC,UAAU,CAAC,6BAAa,CAAC,CAAC;IACxD,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,EAAyB,CAAC;IAEvD,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CACrC,CAAC,IAAiB,EAAE,EAAE;QAClB,MAAM,OAAO,GAAqB;YAC9B,KAAK,EAAE,IAAI;SACd,CAAC;QAEF,IAAI,aAAa,IAAI,aAAa,CAAC,aAAa,EAAE,CAAC;YAC/C,aAAa,CAAC,aAAa,CAAC,WAAW,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;QAC1D,CAAC;IACL,CAAC,EACD,CAAC,aAAa,CAAC,CAClB,CAAC;IAEF,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC;QACpB,QAAQ,CAAC,OAAO,GAAG,IAAA,yBAAiB,GAAE,CAAC;IAC3C,CAAC;IAED,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE;YAClC,MAAM,EAAC,WAAW,EAAE,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,GAAG,QAAQ,EAAC,GAAG,KAAK,CAAC;YACtF,eAAe,CAAC,IAAA,gBAAQ,EAAC,EAAC,GAAG,QAAQ,EAAE,WAAW,EAAE,EAAE,EAAE,aAAa,EAAE,EAAE,EAAC,CAAC,CAAC,CAAC;QACjF,CAAC,CAAC,CAAC;IACP,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,OAAO,CACH,uBAAC,+CAAsB,CAAC,QAAQ,IAC5B,KAAK,EAAE;YACH,KAAK,EAAE,QAAQ,CAAC,OAAO;SAC1B,YAEA,QAAQ,GACqB,CACrC,CAAC;AACN,CAAC,CAAC;AArCW,QAAA,uBAAuB,2BAqClC","sourcesContent":["import * as React from 'react';\n\nimport {StoreApi} from 'zustand';\n\nimport {EditorState} from '../../../common/store';\nimport {StoreSyncMessage} from '../../../common/types';\nimport {removeFn} from '../../../common/utils';\nimport {EditorStore, createEditorStore} from '../../store';\nimport {IframeContext} from '../iframeContext';\n\nimport {MainEditorStoreContext} from './MainEditorStoreContext';\n\ninterface MainEditorProviderProps extends React.PropsWithChildren {}\n\nexport const MainEditorStoreProvider = ({children}: MainEditorProviderProps) => {\n    const {iframeElement} = React.useContext(IframeContext);\n    const storeRef = React.useRef<StoreApi<EditorStore>>();\n\n    const sendPostMessage = React.useCallback(\n        (data: EditorState) => {\n            const message: StoreSyncMessage = {\n                state: data,\n            };\n\n            if (iframeElement && iframeElement.contentWindow) {\n                iframeElement.contentWindow.postMessage(message, '*');\n            }\n        },\n        [iframeElement],\n    );\n\n    if (!storeRef.current) {\n        storeRef.current = createEditorStore();\n    }\n\n    React.useEffect(() => {\n        storeRef.current?.subscribe((state) => {\n            const {historyPast: _historyPast, historyFuture: _historyFuture, ...syncable} = state;\n            sendPostMessage(removeFn({...syncable, historyPast: [], historyFuture: []}));\n        });\n    }, [sendPostMessage]);\n\n    return (\n        <MainEditorStoreContext.Provider\n            value={{\n                state: storeRef.current,\n            }}\n        >\n            {children}\n        </MainEditorStoreContext.Provider>\n    );\n};\n"]}
+{"version":3,"file":"MainEditorStoreProvider.js","sourceRoot":"../../../../../src","sources":["editor-v2/context/editorStore/MainEditorStoreProvider.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAI/B,4DAA8D;AAG9D,oDAA+C;AAC/C,0CAA2D;AAC3D,6DAA+C;AAE/C,wEAAgE;AAIzD,MAAM,uBAAuB,GAAG,CAAC,EAAC,QAAQ,EAA0B,EAAE,EAAE;IAC3E,MAAM,EAAC,aAAa,EAAC,GAAG,KAAK,CAAC,UAAU,CAAC,6BAAa,CAAC,CAAC;IACxD,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,EAAyB,CAAC;IAEvD,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CACrC,CAAC,IAAiB,EAAE,EAAE;QAClB,MAAM,OAAO,GAAqB;YAC9B,KAAK,EAAE,IAAI;YACX,MAAM,EAAE,+BAAmB;SAC9B,CAAC;QAEF,IAAI,aAAa,IAAI,aAAa,CAAC,aAAa,EAAE,CAAC;YAC/C,aAAa,CAAC,aAAa,CAAC,WAAW,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;QAC1D,CAAC;IACL,CAAC,EACD,CAAC,aAAa,CAAC,CAClB,CAAC;IAEF,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC;QACpB,QAAQ,CAAC,OAAO,GAAG,IAAA,yBAAiB,GAAE,CAAC;IAC3C,CAAC;IAED,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE;YAClC,MAAM,EAAC,WAAW,EAAE,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,GAAG,QAAQ,EAAC,GAAG,KAAK,CAAC;YACtF,eAAe,CAAC,IAAA,gBAAQ,EAAC,EAAC,GAAG,QAAQ,EAAE,WAAW,EAAE,EAAE,EAAE,aAAa,EAAE,EAAE,EAAC,CAAC,CAAC,CAAC;QACjF,CAAC,CAAC,CAAC;IACP,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,OAAO,CACH,uBAAC,+CAAsB,CAAC,QAAQ,IAC5B,KAAK,EAAE;YACH,KAAK,EAAE,QAAQ,CAAC,OAAO;SAC1B,YAEA,QAAQ,GACqB,CACrC,CAAC;AACN,CAAC,CAAC;AAtCW,QAAA,uBAAuB,2BAsClC","sourcesContent":["import * as React from 'react';\n\nimport {StoreApi} from 'zustand';\n\nimport {POST_MESSAGE_SOURCE} from '../../../common/constants';\nimport {EditorState} from '../../../common/store';\nimport {StoreSyncMessage} from '../../../common/types';\nimport {removeFn} from '../../../common/utils';\nimport {EditorStore, createEditorStore} from '../../store';\nimport {IframeContext} from '../iframeContext';\n\nimport {MainEditorStoreContext} from './MainEditorStoreContext';\n\ninterface MainEditorProviderProps extends React.PropsWithChildren {}\n\nexport const MainEditorStoreProvider = ({children}: MainEditorProviderProps) => {\n    const {iframeElement} = React.useContext(IframeContext);\n    const storeRef = React.useRef<StoreApi<EditorStore>>();\n\n    const sendPostMessage = React.useCallback(\n        (data: EditorState) => {\n            const message: StoreSyncMessage = {\n                state: data,\n                source: POST_MESSAGE_SOURCE,\n            };\n\n            if (iframeElement && iframeElement.contentWindow) {\n                iframeElement.contentWindow.postMessage(message, '*');\n            }\n        },\n        [iframeElement],\n    );\n\n    if (!storeRef.current) {\n        storeRef.current = createEditorStore();\n    }\n\n    React.useEffect(() => {\n        storeRef.current?.subscribe((state) => {\n            const {historyPast: _historyPast, historyFuture: _historyFuture, ...syncable} = state;\n            sendPostMessage(removeFn({...syncable, historyPast: [], historyFuture: []}));\n        });\n    }, [sendPostMessage]);\n\n    return (\n        <MainEditorStoreContext.Provider\n            value={{\n                state: storeRef.current,\n            }}\n        >\n            {children}\n        </MainEditorStoreContext.Provider>\n    );\n};\n"]}

package/build/cjs/form-builder-v2/CanvasContentContext.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { Content } from "../form-generator-v2/types.js";
+interface CanvasContentContextType {
+    content: Content;
+    setContent: React.Dispatch<React.SetStateAction<Content>>;
+    templateContent: Content;
+    setTemplateContent: React.Dispatch<React.SetStateAction<Content>>;
+}
+interface CanvasContentProviderProps {
+    content: Content;
+    setContent: React.Dispatch<React.SetStateAction<Content>>;
+    templateContent: Content;
+    setTemplateContent: React.Dispatch<React.SetStateAction<Content>>;
+    children: React.ReactNode;
+}
+export declare const CanvasContentProvider: ({ content, setContent, templateContent, setTemplateContent, children, }: CanvasContentProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const useCanvasContent: () => CanvasContentContextType;
+export {};

package/build/cjs/form-builder-v2/CanvasContentContext.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCanvasContent = exports.CanvasContentProvider = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
+const CanvasContentContext = React.createContext(null);
+const CanvasContentProvider = ({ content, setContent, templateContent, setTemplateContent, children, }) => {
+    const value = React.useMemo(() => ({ content, setContent, templateContent, setTemplateContent }), [content, setContent, templateContent, setTemplateContent]);
+    return (0, jsx_runtime_1.jsx)(CanvasContentContext.Provider, { value: value, children: children });
+};
+exports.CanvasContentProvider = CanvasContentProvider;
+const useCanvasContent = () => {
+    const context = React.useContext(CanvasContentContext);
+    if (!context) {
+        throw new Error('useCanvasContent must be used within a CanvasContentProvider');
+    }
+    return context;
+};
+exports.useCanvasContent = useCanvasContent;
+//# sourceMappingURL=CanvasContentContext.js.map

package/build/cjs/form-builder-v2/CanvasContentContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CanvasContentContext.js","sourceRoot":"../../../src","sources":["form-builder-v2/CanvasContentContext.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAW/B,MAAM,oBAAoB,GAAG,KAAK,CAAC,aAAa,CAAkC,IAAI,CAAC,CAAC;AAUjF,MAAM,qBAAqB,GAAG,CAAC,EAClC,OAAO,EACP,UAAU,EACV,eAAe,EACf,kBAAkB,EAClB,QAAQ,GACiB,EAAE,EAAE;IAC7B,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CACvB,GAAG,EAAE,CAAC,CAAC,EAAC,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,kBAAkB,EAAC,CAAC,EAClE,CAAC,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,kBAAkB,CAAC,CAC7D,CAAC;IACF,OAAO,uBAAC,oBAAoB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAiC,CAAC;AACnG,CAAC,CAAC;AAZW,QAAA,qBAAqB,yBAYhC;AAEK,MAAM,gBAAgB,GAAG,GAA6B,EAAE;IAC3D,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,oBAAoB,CAAC,CAAC;IACvD,IAAI,CAAC,OAAO,EAAE,CAAC;QACX,MAAM,IAAI,KAAK,CAAC,8DAA8D,CAAC,CAAC;IACpF,CAAC;IACD,OAAO,OAAO,CAAC;AACnB,CAAC,CAAC;AANW,QAAA,gBAAgB,oBAM3B","sourcesContent":["import * as React from 'react';\n\nimport type {Content} from '../form-generator-v2/types';\n\ninterface CanvasContentContextType {\n    content: Content;\n    setContent: React.Dispatch<React.SetStateAction<Content>>;\n    templateContent: Content;\n    setTemplateContent: React.Dispatch<React.SetStateAction<Content>>;\n}\n\nconst CanvasContentContext = React.createContext<CanvasContentContextType | null>(null);\n\ninterface CanvasContentProviderProps {\n    content: Content;\n    setContent: React.Dispatch<React.SetStateAction<Content>>;\n    templateContent: Content;\n    setTemplateContent: React.Dispatch<React.SetStateAction<Content>>;\n    children: React.ReactNode;\n}\n\nexport const CanvasContentProvider = ({\n    content,\n    setContent,\n    templateContent,\n    setTemplateContent,\n    children,\n}: CanvasContentProviderProps) => {\n    const value = React.useMemo<CanvasContentContextType>(\n        () => ({content, setContent, templateContent, setTemplateContent}),\n        [content, setContent, templateContent, setTemplateContent],\n    );\n    return <CanvasContentContext.Provider value={value}>{children}</CanvasContentContext.Provider>;\n};\n\nexport const useCanvasContent = (): CanvasContentContextType => {\n    const context = React.useContext(CanvasContentContext);\n    if (!context) {\n        throw new Error('useCanvasContent must be used within a CanvasContentProvider');\n    }\n    return context;\n};\n"]}

package/build/cjs/form-builder-v2/FormBuilderV2.css

@@ -0,0 +1,93 @@
+.pcformbuilderv2-main {
+  width: 100%;
+  min-width: 640px;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+.pcformbuilderv2-main__toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--g-spacing-2) 0;
+  gap: var(--g-spacing-3);
+}
+.pcformbuilderv2-main__toolbar-option {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.pcformbuilderv2-main__schema-popup {
+  width: min(560px, 90vw);
+  padding: var(--g-spacing-4);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.pcformbuilderv2-main__schema-popup-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-spacing-half);
+}
+.pcformbuilderv2-main__schema-popup-json {
+  margin: 0;
+  padding: var(--g-spacing-3);
+  background: var(--g-color-base-generic);
+  border-radius: var(--g-border-radius-m);
+  font-size: 12px;
+  line-height: 1.4;
+  max-height: min(480px, 60vh);
+  overflow: auto;
+  white-space: pre;
+}
+.pcformbuilderv2-main__schema-popup-actions {
+  display: flex;
+  gap: var(--g-spacing-2);
+  justify-content: flex-end;
+}
+.pcformbuilderv2-main__visual {
+  display: grid;
+  grid-template-columns: var(--fb2-palette-w, 220px) var(--g-spacing-2) minmax(240px, 1fr) var(--g-spacing-2) var(--fb2-inspector-w, 320px);
+  padding: var(--g-spacing-4) 0;
+  align-items: stretch;
+}
+.pcformbuilderv2-main__palette, .pcformbuilderv2-main__canvas, .pcformbuilderv2-main__inspector {
+  min-width: 0;
+}
+.pcformbuilderv2-main__palette, .pcformbuilderv2-main__inspector {
+  position: sticky;
+  top: var(--g-spacing-4);
+  align-self: start;
+  max-height: calc(100vh - 80px);
+  overflow-y: auto;
+}
+.pcformbuilderv2-main_compact .pcformbuilderv2-main__visual {
+  grid-template-columns: 56px minmax(240px, 1fr) var(--g-spacing-2) var(--fb2-inspector-w, 320px);
+}
+.pcformbuilderv2-main_compact .pcformbuilderv2-main__canvas {
+  padding-left: var(--g-spacing-2);
+}
+.pcformbuilderv2-main_compact .pcformbuilderv2-palette {
+  padding: 6px;
+}
+.pcformbuilderv2-main_compact .pcformbuilderv2-palette__header {
+  display: none;
+}
+.pcformbuilderv2-main_compact .pcformbuilderv2-palette__items {
+  grid-template-columns: 1fr;
+}
+.pcformbuilderv2-main_compact .pcformbuilderv2-palette__tile {
+  padding: var(--g-spacing-1);
+  gap: 0;
+}
+.pcformbuilderv2-main_compact .pcformbuilderv2-palette__tile-label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/build/cjs/form-builder-v2/FormBuilderV2.d.ts

@@ -0,0 +1,10 @@
+import { FormField } from "./types.js";
+export type FormBuilderDensity = 'full' | 'compact';
+interface FormBuilderV2Props {
+    className?: string;
+    formFields: FormField[];
+    onChange?: (fields: FormField[]) => void;
+    density?: FormBuilderDensity;
+}
+export declare const FormBuilderV2: ({ className, formFields, onChange, density, }: FormBuilderV2Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/cjs/form-builder-v2/FormBuilderV2.js

@@ -0,0 +1,123 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormBuilderV2 = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
+const helpers_1 = require("@dnd-kit/helpers");
+const react_1 = require("@dnd-kit/react");
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+const CanvasContentContext_1 = require("./CanvasContentContext.js");
+const Canvas_1 = require("./components/Canvas/Canvas.js");
+const ContentTab_1 = require("./components/ContentTab/ContentTab.js");
+const DragOverlayPreview_1 = require("./components/DragOverlayPreview/DragOverlayPreview.js");
+const Inspector_1 = require("./components/Inspector/Inspector.js");
+const Palette_1 = require("./components/Palette/Palette.js");
+const ResizeHandle_1 = require("./components/ResizeHandle/ResizeHandle.js");
+const SchemaPopup_1 = require("./components/SchemaPopup/SchemaPopup.js");
+const FormContext_1 = require("./hooks/FormContext.js");
+const cn_1 = require("./utils/cn.js");
+const dragData_1 = require("./utils/dragData.js");
+const fieldGroups_1 = require("./utils/fieldGroups.js");
+const fieldTree_1 = require("./utils/fieldTree.js");
+const stripIds_1 = require("./utils/stripIds.js");
+const b = (0, cn_1.formBuilderV2Cn)('main');
+const PALETTE_MIN = 160;
+const PALETTE_MAX = 400;
+const PALETTE_DEFAULT = 220;
+const INSPECTOR_MIN = 270;
+const INSPECTOR_MAX = 560;
+const INSPECTOR_DEFAULT = 320;
+const FormBuilderShell = ({ className, density }) => {
+    const [mode, setMode] = React.useState('edit');
+    const [canvasContent, setCanvasContent] = React.useState({});
+    const [templateContent, setTemplateContent] = React.useState({});
+    const [paletteWidth, setPaletteWidth] = React.useState(PALETTE_DEFAULT);
+    const [inspectorWidth, setInspectorWidth] = React.useState(INSPECTOR_DEFAULT);
+    const [schemaPopupOpen, setSchemaPopupOpen] = React.useState(false);
+    const schemaButtonRef = React.useRef(null);
+    const isCompact = density === 'compact';
+    const { formFields, setAllFields, addField, addFieldToSection, insertFieldBefore, insertFieldAfter, moveFieldToSection, } = (0, FormContext_1.useFormContext)();
+    const schema = React.useMemo(() => (0, stripIds_1.stripIds)(formFields), [formFields]);
+    const handleDragEnd = React.useCallback((event) => {
+        if (event.canceled)
+            return;
+        const { source, target } = event.operation;
+        if (!source)
+            return;
+        const paletteData = (0, dragData_1.isPaletteData)(source.data) ? source.data : null;
+        const isPaletteDrag = paletteData !== null || String(source.id).startsWith(Palette_1.PALETTE_DRAGGABLE_PREFIX);
+        if (isPaletteDrag) {
+            const type = paletteData?.type;
+            if (!type)
+                return;
+            if (!target) {
+                addField(type);
+                return;
+            }
+            if ((0, dragData_1.isSectionDropData)(target.data)) {
+                addFieldToSection(target.data.sectionId, type);
+                return;
+            }
+            if (String(target.id) === String(source.id)) {
+                addField(type);
+                return;
+            }
+            const dropAfter = (0, dragData_1.isDropAfter)(event.operation.position?.current?.y, target.shape?.center?.y);
+            if (dropAfter) {
+                insertFieldAfter(String(target.id), type);
+            }
+            else {
+                insertFieldBefore(String(target.id), type);
+            }
+            return;
+        }
+        if (target && (0, dragData_1.isSectionDropData)(target.data)) {
+            moveFieldToSection(String(source.id), target.data.sectionId);
+            return;
+        }
+        const groups = (0, fieldGroups_1.buildGroupsMap)(formFields);
+        const nextGroups = (0, helpers_1.move)(groups, event);
+        const nextFields = (0, fieldGroups_1.applyGroupsMap)(nextGroups);
+        setAllFields(nextFields);
+    }, [
+        addField,
+        addFieldToSection,
+        formFields,
+        insertFieldBefore,
+        insertFieldAfter,
+        moveFieldToSection,
+        setAllFields,
+    ]);
+    const gridStyle = {
+        '--fb2-palette-w': `${paletteWidth}px`,
+        '--fb2-inspector-w': `${inspectorWidth}px`,
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { className: b({ compact: density === 'compact' }, className), children: (0, jsx_runtime_1.jsxs)(CanvasContentContext_1.CanvasContentProvider, { content: canvasContent, setContent: setCanvasContent, templateContent: templateContent, setTemplateContent: setTemplateContent, children: [(0, jsx_runtime_1.jsxs)("div", { className: b('toolbar'), children: [(0, jsx_runtime_1.jsx)(uikit_1.SegmentedRadioGroup, { size: "m", value: mode, onUpdate: setMode, options: [
+                                {
+                                    value: 'edit',
+                                    content: ((0, jsx_runtime_1.jsxs)("span", { className: b('toolbar-option'), children: [(0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Pencil, size: 14 }), "Edit"] })),
+                                },
+                                {
+                                    value: 'preview',
+                                    content: ((0, jsx_runtime_1.jsxs)("span", { className: b('toolbar-option'), children: [(0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Eye, size: 14 }), "Preview"] })),
+                                },
+                            ] }), (0, jsx_runtime_1.jsxs)(uikit_1.Button, { ref: schemaButtonRef, view: "outlined", size: "m", onClick: () => setSchemaPopupOpen((prev) => !prev), children: [(0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Code, size: 14 }), "Schema"] }), (0, jsx_runtime_1.jsx)(SchemaPopup_1.SchemaPopup, { schema: schema, onApply: setAllFields, open: schemaPopupOpen, onOpenChange: setSchemaPopupOpen, anchorElement: schemaButtonRef.current })] }), mode === 'edit' ? ((0, jsx_runtime_1.jsxs)(react_1.DragDropProvider, { onDragEnd: handleDragEnd, children: [(0, jsx_runtime_1.jsxs)("div", { className: b('visual'), style: gridStyle, children: [(0, jsx_runtime_1.jsx)("aside", { className: b('palette'), children: (0, jsx_runtime_1.jsx)(Palette_1.Palette, {}) }), !isCompact && ((0, jsx_runtime_1.jsx)(ResizeHandle_1.ResizeHandle, { value: paletteWidth, min: PALETTE_MIN, max: PALETTE_MAX, direction: "left", onChange: setPaletteWidth })), (0, jsx_runtime_1.jsx)("main", { className: b('canvas'), children: (0, jsx_runtime_1.jsx)(Canvas_1.Canvas, {}) }), (0, jsx_runtime_1.jsx)(ResizeHandle_1.ResizeHandle, { value: inspectorWidth, min: INSPECTOR_MIN, max: INSPECTOR_MAX, direction: "right", onChange: setInspectorWidth }), (0, jsx_runtime_1.jsx)("aside", { className: b('inspector'), children: (0, jsx_runtime_1.jsx)(Inspector_1.Inspector, {}) })] }), (0, jsx_runtime_1.jsx)(react_1.DragOverlay, { dropAnimation: null, children: (source) => {
+                                if (!source)
+                                    return null;
+                                if ((0, dragData_1.isPaletteData)(source.data)) {
+                                    return (0, jsx_runtime_1.jsx)(DragOverlayPreview_1.DragOverlayPreview, { type: source.data.type });
+                                }
+                                const field = (0, fieldTree_1.findFieldById)(formFields, String(source.id));
+                                if (!field)
+                                    return null;
+                                return (0, jsx_runtime_1.jsx)(DragOverlayPreview_1.DragOverlayPreview, { type: field.type, field: field });
+                            } })] })) : ((0, jsx_runtime_1.jsx)(ContentTab_1.ContentTab, {}))] }) }));
+};
+const FormBuilderV2 = ({ className, formFields, onChange, density = 'full', }) => {
+    return ((0, jsx_runtime_1.jsx)(FormContext_1.FormProvider, { formFields: formFields, onChange: onChange, children: (0, jsx_runtime_1.jsx)(FormBuilderShell, { className: className, density: density }) }));
+};
+exports.FormBuilderV2 = FormBuilderV2;
+//# sourceMappingURL=FormBuilderV2.js.map

package/build/cjs/form-builder-v2/FormBuilderV2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormBuilderV2.js","sourceRoot":"../../../src","sources":["form-builder-v2/FormBuilderV2.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport type {DragDropEvents} from '@dnd-kit/abstract';\nimport type {DragDropManager, Draggable, Droppable} from '@dnd-kit/dom';\nimport {move} from '@dnd-kit/helpers';\nimport {DragDropProvider, DragOverlay} from '@dnd-kit/react';\nimport {Code, Eye, Pencil} from '@gravity-ui/icons';\nimport {Button, Icon, SegmentedRadioGroup} from '@gravity-ui/uikit';\n\nimport type {Content} from '../form-generator-v2/types';\n\nimport {CanvasContentProvider} from './CanvasContentContext';\nimport {Canvas} from './components/Canvas/Canvas';\nimport {ContentTab} from './components/ContentTab/ContentTab';\nimport {DragOverlayPreview} from './components/DragOverlayPreview/DragOverlayPreview';\nimport {Inspector} from './components/Inspector/Inspector';\nimport {PALETTE_DRAGGABLE_PREFIX, Palette} from './components/Palette/Palette';\nimport {ResizeHandle} from './components/ResizeHandle/ResizeHandle';\nimport {SchemaPopup} from './components/SchemaPopup/SchemaPopup';\nimport {FormProvider, useFormContext} from './hooks/FormContext';\nimport {FormField} from './types';\nimport {formBuilderV2Cn} from './utils/cn';\nimport {isDropAfter, isPaletteData, isSectionDropData} from './utils/dragData';\nimport {applyGroupsMap, buildGroupsMap} from './utils/fieldGroups';\nimport {findFieldById} from './utils/fieldTree';\nimport {stripIds} from './utils/stripIds';\n\nimport './FormBuilderV2.scss';\n\nconst b = formBuilderV2Cn('main');\n\ntype DndEvents = DragDropEvents<Draggable, Droppable, DragDropManager>;\ntype DragEndEvent = Parameters<DndEvents['dragend']>[0];\n\ntype Mode = 'edit' | 'preview';\n\nexport type FormBuilderDensity = 'full' | 'compact';\n\nconst PALETTE_MIN = 160;\nconst PALETTE_MAX = 400;\nconst PALETTE_DEFAULT = 220;\nconst INSPECTOR_MIN = 270;\nconst INSPECTOR_MAX = 560;\nconst INSPECTOR_DEFAULT = 320;\n\ninterface FormBuilderV2Props {\n    className?: string;\n    formFields: FormField[];\n    onChange?: (fields: FormField[]) => void;\n\n    density?: FormBuilderDensity;\n}\n\ninterface FormBuilderShellProps {\n    className?: string;\n    density: FormBuilderDensity;\n}\n\nconst FormBuilderShell = ({className, density}: FormBuilderShellProps) => {\n    const [mode, setMode] = React.useState<Mode>('edit');\n    const [canvasContent, setCanvasContent] = React.useState<Content>({});\n    const [templateContent, setTemplateContent] = React.useState<Content>({});\n    const [paletteWidth, setPaletteWidth] = React.useState(PALETTE_DEFAULT);\n    const [inspectorWidth, setInspectorWidth] = React.useState(INSPECTOR_DEFAULT);\n    const [schemaPopupOpen, setSchemaPopupOpen] = React.useState(false);\n    const schemaButtonRef = React.useRef<HTMLButtonElement | null>(null);\n\n    const isCompact = density === 'compact';\n\n    const {\n        formFields,\n        setAllFields,\n        addField,\n        addFieldToSection,\n        insertFieldBefore,\n        insertFieldAfter,\n        moveFieldToSection,\n    } = useFormContext();\n\n    const schema = React.useMemo(() => stripIds(formFields), [formFields]);\n\n    const handleDragEnd = React.useCallback(\n        (event: DragEndEvent) => {\n            if (event.canceled) return;\n            const {source, target} = event.operation;\n            if (!source) return;\n\n            const paletteData = isPaletteData(source.data) ? source.data : null;\n            const isPaletteDrag =\n                paletteData !== null || String(source.id).startsWith(PALETTE_DRAGGABLE_PREFIX);\n\n            if (isPaletteDrag) {\n                const type = paletteData?.type;\n                if (!type) return;\n                if (!target) {\n                    addField(type);\n                    return;\n                }\n\n                if (isSectionDropData(target.data)) {\n                    addFieldToSection(target.data.sectionId, type);\n                    return;\n                }\n\n                if (String(target.id) === String(source.id)) {\n                    addField(type);\n                    return;\n                }\n\n                const dropAfter = isDropAfter(\n                    event.operation.position?.current?.y,\n                    target.shape?.center?.y,\n                );\n                if (dropAfter) {\n                    insertFieldAfter(String(target.id), type);\n                } else {\n                    insertFieldBefore(String(target.id), type);\n                }\n                return;\n            }\n\n            if (target && isSectionDropData(target.data)) {\n                moveFieldToSection(String(source.id), target.data.sectionId);\n                return;\n            }\n\n            const groups = buildGroupsMap(formFields);\n            const nextGroups = move(groups, event);\n            const nextFields = applyGroupsMap(nextGroups);\n            setAllFields(nextFields);\n        },\n        [\n            addField,\n            addFieldToSection,\n            formFields,\n            insertFieldBefore,\n            insertFieldAfter,\n            moveFieldToSection,\n            setAllFields,\n        ],\n    );\n\n    const gridStyle = {\n        '--fb2-palette-w': `${paletteWidth}px`,\n        '--fb2-inspector-w': `${inspectorWidth}px`,\n    } as React.CSSProperties;\n\n    return (\n        <div className={b({compact: density === 'compact'}, className)}>\n            <CanvasContentProvider\n                content={canvasContent}\n                setContent={setCanvasContent}\n                templateContent={templateContent}\n                setTemplateContent={setTemplateContent}\n            >\n                <div className={b('toolbar')}>\n                    <SegmentedRadioGroup<Mode>\n                        size=\"m\"\n                        value={mode}\n                        onUpdate={setMode}\n                        options={[\n                            {\n                                value: 'edit',\n                                content: (\n                                    <span className={b('toolbar-option')}>\n                                        <Icon data={Pencil} size={14} />\n                                        Edit\n                                    </span>\n                                ),\n                            },\n                            {\n                                value: 'preview',\n                                content: (\n                                    <span className={b('toolbar-option')}>\n                                        <Icon data={Eye} size={14} />\n                                        Preview\n                                    </span>\n                                ),\n                            },\n                        ]}\n                    />\n                    <Button\n                        ref={schemaButtonRef}\n                        view=\"outlined\"\n                        size=\"m\"\n                        onClick={() => setSchemaPopupOpen((prev) => !prev)}\n                    >\n                        <Icon data={Code} size={14} />\n                        Schema\n                    </Button>\n                    <SchemaPopup\n                        schema={schema}\n                        onApply={setAllFields}\n                        open={schemaPopupOpen}\n                        onOpenChange={setSchemaPopupOpen}\n                        anchorElement={schemaButtonRef.current}\n                    />\n                </div>\n\n                {mode === 'edit' ? (\n                    <DragDropProvider onDragEnd={handleDragEnd}>\n                        <div className={b('visual')} style={gridStyle}>\n                            <aside className={b('palette')}>\n                                <Palette />\n                            </aside>\n                            {!isCompact && (\n                                <ResizeHandle\n                                    value={paletteWidth}\n                                    min={PALETTE_MIN}\n                                    max={PALETTE_MAX}\n                                    direction=\"left\"\n                                    onChange={setPaletteWidth}\n                                />\n                            )}\n                            <main className={b('canvas')}>\n                                <Canvas />\n                            </main>\n                            <ResizeHandle\n                                value={inspectorWidth}\n                                min={INSPECTOR_MIN}\n                                max={INSPECTOR_MAX}\n                                direction=\"right\"\n                                onChange={setInspectorWidth}\n                            />\n                            <aside className={b('inspector')}>\n                                <Inspector />\n                            </aside>\n                        </div>\n                        <DragOverlay dropAnimation={null}>\n                            {(source) => {\n                                if (!source) return null;\n                                if (isPaletteData(source.data)) {\n                                    return <DragOverlayPreview type={source.data.type} />;\n                                }\n                                const field = findFieldById(formFields, String(source.id));\n                                if (!field) return null;\n                                return <DragOverlayPreview type={field.type} field={field} />;\n                            }}\n                        </DragOverlay>\n                    </DragDropProvider>\n                ) : (\n                    <ContentTab />\n                )}\n            </CanvasContentProvider>\n        </div>\n    );\n};\n\nexport const FormBuilderV2 = ({\n    className,\n    formFields,\n    onChange,\n    density = 'full',\n}: FormBuilderV2Props) => {\n    return (\n        <FormProvider formFields={formFields} onChange={onChange}>\n            <FormBuilderShell className={className} density={density} />\n        </FormProvider>\n    );\n};\n"]}

package/build/cjs/form-builder-v2/components/Canvas/Canvas.css

@@ -0,0 +1,15 @@
+.pcformbuilderv2-canvas {
+  padding: var(--g-spacing-5);
+  min-height: 400px;
+}
+.pcformbuilderv2-canvas__list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-spacing-3);
+}
+.pcformbuilderv2-canvas__empty {
+  padding: var(--g-spacing-10) var(--g-spacing-5);
+  text-align: center;
+  border: 1px dashed var(--g-color-line-generic);
+  border-radius: var(--g-border-radius-l);
+}

package/build/cjs/form-builder-v2/components/Canvas/Canvas.d.ts

@@ -0,0 +1,8 @@
+import { FormField } from "../../types.js";
+interface CanvasListProps {
+    fields: FormField[];
+    parentGroup: string;
+}
+declare const CanvasList: ({ fields, parentGroup }: CanvasListProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Canvas: () => import("react/jsx-runtime").JSX.Element;
+export { CanvasList };

package/build/cjs/form-builder-v2/components/Canvas/Canvas.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CanvasList = exports.Canvas = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const uikit_1 = require("@gravity-ui/uikit");
+const FormContext_1 = require("../../hooks/FormContext.js");
+const cn_1 = require("../../utils/cn.js");
+const CanvasCard_1 = require("../CanvasCard/CanvasCard.js");
+const b = (0, cn_1.formBuilderV2Cn)('canvas');
+const CanvasList = ({ fields, parentGroup }) => ((0, jsx_runtime_1.jsx)("div", { className: b('list'), children: fields.map((field, index) => ((0, jsx_runtime_1.jsx)(CanvasCard_1.CanvasCard, { field: field, index: index, group: parentGroup }, field.id))) }));
+exports.CanvasList = CanvasList;
+const Canvas = () => {
+    const { formFields, selectField } = (0, FormContext_1.useFormContext)();
+    return ((0, jsx_runtime_1.jsx)(uikit_1.Card, { className: b(), view: "outlined", onClick: () => selectField(null), children: formFields.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: b('empty'), children: (0, jsx_runtime_1.jsx)(uikit_1.Text, { variant: "body-2", color: "hint", children: "Canvas is empty. Click a field type on the left to add it." }) })) : ((0, jsx_runtime_1.jsx)(CanvasList, { fields: formFields, parentGroup: "root" })) }));
+};
+exports.Canvas = Canvas;
+//# sourceMappingURL=Canvas.js.map

package/build/cjs/form-builder-v2/components/Canvas/Canvas.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Canvas.js","sourceRoot":"../../../../../src","sources":["form-builder-v2/components/Canvas/Canvas.tsx"],"names":[],"mappings":";;;;AAAA,6CAA6C;AAE7C,4DAAuD;AAEvD,0CAA+C;AAC/C,4DAAoD;AAIpD,MAAM,CAAC,GAAG,IAAA,oBAAe,EAAC,QAAQ,CAAC,CAAC;AAOpC,MAAM,UAAU,GAAG,CAAC,EAAC,MAAM,EAAE,WAAW,EAAkB,EAAE,EAAE,CAAC,CAC3D,gCAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YACpB,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC1B,uBAAC,uBAAU,IAAgB,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,IAAxD,KAAK,CAAC,EAAE,CAAoD,CAChF,CAAC,GACA,CACT,CAAC;AAoBM,gCAAU;AAlBX,MAAM,MAAM,GAAG,GAAG,EAAE;IACvB,MAAM,EAAC,UAAU,EAAE,WAAW,EAAC,GAAG,IAAA,4BAAc,GAAE,CAAC;IAEnD,OAAO,CACH,uBAAC,YAAI,IAAC,SAAS,EAAE,CAAC,EAAE,EAAE,IAAI,EAAC,UAAU,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,YACjE,UAAU,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CACvB,gCAAK,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,YACtB,uBAAC,YAAI,IAAC,OAAO,EAAC,QAAQ,EAAC,KAAK,EAAC,MAAM,2EAE5B,GACL,CACT,CAAC,CAAC,CAAC,CACA,uBAAC,UAAU,IAAC,MAAM,EAAE,UAAU,EAAE,WAAW,EAAC,MAAM,GAAG,CACxD,GACE,CACV,CAAC;AACN,CAAC,CAAC;AAhBW,QAAA,MAAM,UAgBjB","sourcesContent":["import {Card, Text} from '@gravity-ui/uikit';\n\nimport {useFormContext} from '../../hooks/FormContext';\nimport {FormField} from '../../types';\nimport {formBuilderV2Cn} from '../../utils/cn';\nimport {CanvasCard} from '../CanvasCard/CanvasCard';\n\nimport './Canvas.scss';\n\nconst b = formBuilderV2Cn('canvas');\n\ninterface CanvasListProps {\n    fields: FormField[];\n    parentGroup: string;\n}\n\nconst CanvasList = ({fields, parentGroup}: CanvasListProps) => (\n    <div className={b('list')}>\n        {fields.map((field, index) => (\n            <CanvasCard key={field.id} field={field} index={index} group={parentGroup} />\n        ))}\n    </div>\n);\n\nexport const Canvas = () => {\n    const {formFields, selectField} = useFormContext();\n\n    return (\n        <Card className={b()} view=\"outlined\" onClick={() => selectField(null)}>\n            {formFields.length === 0 ? (\n                <div className={b('empty')}>\n                    <Text variant=\"body-2\" color=\"hint\">\n                        Canvas is empty. Click a field type on the left to add it.\n                    </Text>\n                </div>\n            ) : (\n                <CanvasList fields={formFields} parentGroup=\"root\" />\n            )}\n        </Card>\n    );\n};\n\nexport {CanvasList};\n"]}