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

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

@@ -0,0 +1,8 @@
+import { svgToDataUri } from "../../../utils/index.js";
+export const defaultIcon = 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/esm/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,OAAO,EAAC,YAAY,EAAC,gCAAuB;AAE5C,MAAM,CAAC,MAAM,WAAW,GAAG,YAAY,CACnC;;;;;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/esm/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/esm/editor-v2/containers/MiddleScreen/MiddleScreen.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { Xmark } from '@gravity-ui/icons';
-import { Button, Icon, Loader } from '@gravity-ui/uikit';
+import { ActionTooltip, Button, Icon, Loader } from '@gravity-ui/uikit';
 import { usePostMessageAPIListener } from "../../../common/postMessage.js";
 import { IframeContext } from "../../context/iframeContext/index.js";
 import { useMainEditorStore } from "../../hooks/useMainEditorStore.js";
@@ -9,6 +9,8 @@ import { editorCn } from "../../utils/cn.js";
 import Overlay from "../Overlay/Overlay.js";
 import './MiddleScreen.css';
 const b = editorCn('middle-screen');
+// the maximum height of the iframe
+const IFRAME_MAX_HEIGHT = 50000;
 const MiddleScreen = ({ className, CustomTop }) => {
     const { zoom, initialized, deviceWidth, isPreviewMode, togglePreviewMode } = useMainEditorStore();
     const { url, setIframeElement } = React.useContext(IframeContext);
@@ -21,7 +23,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]);
     usePostMessageAPIListener('ON_RESIZE', ({ height: newHeight }) => {
         onResize(newHeight);
@@ -32,6 +35,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 (_jsxs("div", { className: b(null, className), children: [CustomTop && !isPreviewMode ? (_jsx("div", { className: b('topbar'), children: _jsx(CustomTop, {}) })) : null, _jsx("div", { className: b('content', { fullscreen: isPreviewMode }), children: _jsx("div", { className: b('wrapper'), children: _jsxs("div", { ref: setCanvasRef, className: b('canvas', {
                             hidden: !initialized,
                             fullscreen: isPreviewMode,
@@ -40,7 +51,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 && (_jsx(Overlay, { className: b('overlay'), canvasElement: canvasRef }))] }), isPreviewMode && (_jsx(Button, { view: "normal-contrast", className: b('exit-preview'), onClick: togglePreviewMode, "aria-label": "Exit preview mode", title: "Exit preview mode", size: "l", children: _jsx(Icon, { size: 24, data: Xmark }) })), !initialized && (_jsx("div", { className: b('loading'), children: _jsx(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 && (_jsx(Overlay, { className: b('overlay'), canvasElement: canvasRef }))] }), isPreviewMode && (_jsx("div", { className: b('exit-preview-container'), children: _jsx(ActionTooltip, { title: "Exit preview mode", placement: "left", hotkey: "Escape", children: _jsx(Button, { view: "action", className: b('exit-preview'), onClick: togglePreviewMode, "aria-label": "Exit preview mode", title: "Exit preview mode", size: "m", children: _jsx(Icon, { size: 20, data: Xmark }) }) }) })), !initialized && (_jsx("div", { className: b('loading'), children: _jsx(Loader, { size: 'l' }) }))] }) }) })] }));
 };
 export default MiddleScreen;
 //# sourceMappingURL=MiddleScreen.js.map

package/build/esm/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/esm/editor-v2/context/editorStore/MainEditorStoreProvider.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
+import { POST_MESSAGE_SOURCE } from "../../../common/constants.js";
 import { removeFn } from "../../../common/utils.js";
 import { createEditorStore } from "../../store.js";
 import { IframeContext } from "../iframeContext/index.js";
@@ -10,6 +11,7 @@ export const MainEditorStoreProvider = ({ children }) => {
     const sendPostMessage = React.useCallback((data) => {
         const message = {
             state: data,
+            source: POST_MESSAGE_SOURCE,
         };
         if (iframeElement && iframeElement.contentWindow) {
             iframeElement.contentWindow.postMessage(message, '*');

package/build/esm/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,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAC,QAAQ,EAAC,iCAA8B;AAC/C,OAAO,EAAc,iBAAiB,EAAC,uBAAoB;AAC3D,OAAO,EAAC,aAAa,EAAC,kCAAyB;AAE/C,OAAO,EAAC,sBAAsB,EAAC,oCAAiC;AAIhE,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,EAAC,QAAQ,EAA0B,EAAE,EAAE;IAC3E,MAAM,EAAC,aAAa,EAAC,GAAG,KAAK,CAAC,UAAU,CAAC,aAAa,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,iBAAiB,EAAE,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,QAAQ,CAAC,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,KAAC,sBAAsB,CAAC,QAAQ,IAC5B,KAAK,EAAE;YACH,KAAK,EAAE,QAAQ,CAAC,OAAO;SAC1B,YAEA,QAAQ,GACqB,CACrC,CAAC;AACN,CAAC,CAAC","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,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAC,mBAAmB,EAAC,qCAAkC;AAG9D,OAAO,EAAC,QAAQ,EAAC,iCAA8B;AAC/C,OAAO,EAAc,iBAAiB,EAAC,uBAAoB;AAC3D,OAAO,EAAC,aAAa,EAAC,kCAAyB;AAE/C,OAAO,EAAC,sBAAsB,EAAC,oCAAiC;AAIhE,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,EAAC,QAAQ,EAA0B,EAAE,EAAE;IAC3E,MAAM,EAAC,aAAa,EAAC,GAAG,KAAK,CAAC,UAAU,CAAC,aAAa,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,mBAAmB;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,iBAAiB,EAAE,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,QAAQ,CAAC,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,KAAC,sBAAsB,CAAC,QAAQ,IAC5B,KAAK,EAAE;YACH,KAAK,EAAE,QAAQ,CAAC,OAAO;SAC1B,YAEA,QAAQ,GACqB,CACrC,CAAC;AACN,CAAC,CAAC","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/esm/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/esm/form-builder-v2/CanvasContentContext.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+const CanvasContentContext = React.createContext(null);
+export const CanvasContentProvider = ({ content, setContent, templateContent, setTemplateContent, children, }) => {
+    const value = React.useMemo(() => ({ content, setContent, templateContent, setTemplateContent }), [content, setContent, templateContent, setTemplateContent]);
+    return _jsx(CanvasContentContext.Provider, { value: value, children: children });
+};
+export const useCanvasContent = () => {
+    const context = React.useContext(CanvasContentContext);
+    if (!context) {
+        throw new Error('useCanvasContent must be used within a CanvasContentProvider');
+    }
+    return context;
+};
+//# sourceMappingURL=CanvasContentContext.js.map

package/build/esm/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,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,MAAM,oBAAoB,GAAG,KAAK,CAAC,aAAa,CAAkC,IAAI,CAAC,CAAC;AAUxF,MAAM,CAAC,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,KAAC,oBAAoB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAiC,CAAC;AACnG,CAAC,CAAC;AAEF,MAAM,CAAC,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","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/esm/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/esm/form-builder-v2/FormBuilderV2.d.ts

@@ -0,0 +1,11 @@
+import { FormField } from "./types.js";
+import './FormBuilderV2.css';
+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/esm/form-builder-v2/FormBuilderV2.js

@@ -0,0 +1,119 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { move } from '@dnd-kit/helpers';
+import { DragDropProvider, DragOverlay } from '@dnd-kit/react';
+import { Code, Eye, Pencil } from '@gravity-ui/icons';
+import { Button, Icon, SegmentedRadioGroup } from '@gravity-ui/uikit';
+import { CanvasContentProvider } from "./CanvasContentContext.js";
+import { Canvas } from "./components/Canvas/Canvas.js";
+import { ContentTab } from "./components/ContentTab/ContentTab.js";
+import { DragOverlayPreview } from "./components/DragOverlayPreview/DragOverlayPreview.js";
+import { Inspector } from "./components/Inspector/Inspector.js";
+import { PALETTE_DRAGGABLE_PREFIX, Palette } from "./components/Palette/Palette.js";
+import { ResizeHandle } from "./components/ResizeHandle/ResizeHandle.js";
+import { SchemaPopup } from "./components/SchemaPopup/SchemaPopup.js";
+import { FormProvider, useFormContext } from "./hooks/FormContext.js";
+import { formBuilderV2Cn } from "./utils/cn.js";
+import { isDropAfter, isPaletteData, isSectionDropData } from "./utils/dragData.js";
+import { applyGroupsMap, buildGroupsMap } from "./utils/fieldGroups.js";
+import { findFieldById } from "./utils/fieldTree.js";
+import { stripIds } from "./utils/stripIds.js";
+import './FormBuilderV2.css';
+const b = 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, } = useFormContext();
+    const schema = React.useMemo(() => stripIds(formFields), [formFields]);
+    const handleDragEnd = React.useCallback((event) => {
+        if (event.canceled)
+            return;
+        const { source, target } = event.operation;
+        if (!source)
+            return;
+        const paletteData = isPaletteData(source.data) ? source.data : null;
+        const isPaletteDrag = paletteData !== null || String(source.id).startsWith(PALETTE_DRAGGABLE_PREFIX);
+        if (isPaletteDrag) {
+            const type = paletteData?.type;
+            if (!type)
+                return;
+            if (!target) {
+                addField(type);
+                return;
+            }
+            if (isSectionDropData(target.data)) {
+                addFieldToSection(target.data.sectionId, type);
+                return;
+            }
+            if (String(target.id) === String(source.id)) {
+                addField(type);
+                return;
+            }
+            const dropAfter = 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 && isSectionDropData(target.data)) {
+            moveFieldToSection(String(source.id), target.data.sectionId);
+            return;
+        }
+        const groups = buildGroupsMap(formFields);
+        const nextGroups = move(groups, event);
+        const nextFields = applyGroupsMap(nextGroups);
+        setAllFields(nextFields);
+    }, [
+        addField,
+        addFieldToSection,
+        formFields,
+        insertFieldBefore,
+        insertFieldAfter,
+        moveFieldToSection,
+        setAllFields,
+    ]);
+    const gridStyle = {
+        '--fb2-palette-w': `${paletteWidth}px`,
+        '--fb2-inspector-w': `${inspectorWidth}px`,
+    };
+    return (_jsx("div", { className: b({ compact: density === 'compact' }, className), children: _jsxs(CanvasContentProvider, { content: canvasContent, setContent: setCanvasContent, templateContent: templateContent, setTemplateContent: setTemplateContent, children: [_jsxs("div", { className: b('toolbar'), children: [_jsx(SegmentedRadioGroup, { size: "m", value: mode, onUpdate: setMode, options: [
+                                {
+                                    value: 'edit',
+                                    content: (_jsxs("span", { className: b('toolbar-option'), children: [_jsx(Icon, { data: Pencil, size: 14 }), "Edit"] })),
+                                },
+                                {
+                                    value: 'preview',
+                                    content: (_jsxs("span", { className: b('toolbar-option'), children: [_jsx(Icon, { data: Eye, size: 14 }), "Preview"] })),
+                                },
+                            ] }), _jsxs(Button, { ref: schemaButtonRef, view: "outlined", size: "m", onClick: () => setSchemaPopupOpen((prev) => !prev), children: [_jsx(Icon, { data: Code, size: 14 }), "Schema"] }), _jsx(SchemaPopup, { schema: schema, onApply: setAllFields, open: schemaPopupOpen, onOpenChange: setSchemaPopupOpen, anchorElement: schemaButtonRef.current })] }), mode === 'edit' ? (_jsxs(DragDropProvider, { onDragEnd: handleDragEnd, children: [_jsxs("div", { className: b('visual'), style: gridStyle, children: [_jsx("aside", { className: b('palette'), children: _jsx(Palette, {}) }), !isCompact && (_jsx(ResizeHandle, { value: paletteWidth, min: PALETTE_MIN, max: PALETTE_MAX, direction: "left", onChange: setPaletteWidth })), _jsx("main", { className: b('canvas'), children: _jsx(Canvas, {}) }), _jsx(ResizeHandle, { value: inspectorWidth, min: INSPECTOR_MIN, max: INSPECTOR_MAX, direction: "right", onChange: setInspectorWidth }), _jsx("aside", { className: b('inspector'), children: _jsx(Inspector, {}) })] }), _jsx(DragOverlay, { dropAnimation: null, children: (source) => {
+                                if (!source)
+                                    return null;
+                                if (isPaletteData(source.data)) {
+                                    return _jsx(DragOverlayPreview, { type: source.data.type });
+                                }
+                                const field = findFieldById(formFields, String(source.id));
+                                if (!field)
+                                    return null;
+                                return _jsx(DragOverlayPreview, { type: field.type, field: field });
+                            } })] })) : (_jsx(ContentTab, {}))] }) }));
+};
+export const FormBuilderV2 = ({ className, formFields, onChange, density = 'full', }) => {
+    return (_jsx(FormProvider, { formFields: formFields, onChange: onChange, children: _jsx(FormBuilderShell, { className: className, density: density }) }));
+};
+//# sourceMappingURL=FormBuilderV2.js.map

package/build/esm/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/esm/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/esm/form-builder-v2/components/Canvas/Canvas.d.ts

@@ -0,0 +1,9 @@
+import { FormField } from "../../types.js";
+import './Canvas.css';
+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/esm/form-builder-v2/components/Canvas/Canvas.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Card, Text } from '@gravity-ui/uikit';
+import { useFormContext } from "../../hooks/FormContext.js";
+import { formBuilderV2Cn } from "../../utils/cn.js";
+import { CanvasCard } from "../CanvasCard/CanvasCard.js";
+import './Canvas.css';
+const b = formBuilderV2Cn('canvas');
+const CanvasList = ({ fields, parentGroup }) => (_jsx("div", { className: b('list'), children: fields.map((field, index) => (_jsx(CanvasCard, { field: field, index: index, group: parentGroup }, field.id))) }));
+export const Canvas = () => {
+    const { formFields, selectField } = useFormContext();
+    return (_jsx(Card, { className: b(), view: "outlined", onClick: () => selectField(null), children: formFields.length === 0 ? (_jsx("div", { className: b('empty'), children: _jsx(Text, { variant: "body-2", color: "hint", children: "Canvas is empty. Click a field type on the left to add it." }) })) : (_jsx(CanvasList, { fields: formFields, parentGroup: "root" })) }));
+};
+export { CanvasList };
+//# sourceMappingURL=Canvas.js.map

package/build/esm/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,OAAO,EAAC,IAAI,EAAE,IAAI,EAAC,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAC,cAAc,EAAC,mCAAgC;AAEvD,OAAO,EAAC,eAAe,EAAC,0BAAuB;AAC/C,OAAO,EAAC,UAAU,EAAC,oCAAiC;AAEpD,OAAO,cAAc,CAAC;AAEtB,MAAM,CAAC,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;AAOpC,MAAM,UAAU,GAAG,CAAC,EAAC,MAAM,EAAE,WAAW,EAAkB,EAAE,EAAE,CAAC,CAC3D,cAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YACpB,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC1B,KAAC,UAAU,IAAgB,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,IAAxD,KAAK,CAAC,EAAE,CAAoD,CAChF,CAAC,GACA,CACT,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,EAAE;IACvB,MAAM,EAAC,UAAU,EAAE,WAAW,EAAC,GAAG,cAAc,EAAE,CAAC;IAEnD,OAAO,CACH,KAAC,IAAI,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,cAAK,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,YACtB,KAAC,IAAI,IAAC,OAAO,EAAC,QAAQ,EAAC,KAAK,EAAC,MAAM,2EAE5B,GACL,CACT,CAAC,CAAC,CAAC,CACA,KAAC,UAAU,IAAC,MAAM,EAAE,UAAU,EAAE,WAAW,EAAC,MAAM,GAAG,CACxD,GACE,CACV,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAC,UAAU,EAAC,CAAC","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"]}