@gravity-ui/page-constructor 8.5.0-alpha.2 → 8.5.0-alpha.5

package/build/cjs/blocks/ContentLayout/index_deprecated.d.ts

@@ -5,7 +5,7 @@ declare const ContentLayoutBlockConfig: {
         name: string;
         group: string;
         hidden: boolean;
-        inputs: import("../../form-generator-v2/types.js").Fields;
+        inputs: import("../../form-generator-v2/index.js").Fields;
         default: {
             textContent: {
                 title: string;

package/build/cjs/blocks/ExtendedFeatures/index_deprecated.d.ts

@@ -5,7 +5,7 @@ declare const ExtendedFeaturesBlockConfig: {
         name: string;
         group: string;
         hidden: boolean;
-        inputs: import("../../form-generator-v2/types.js").Fields;
+        inputs: import("../../form-generator-v2/index.js").Fields;
         default: {
             type: string;
             title: {

package/build/cjs/blocks/FilterBlock/index.d.ts

@@ -4,7 +4,7 @@ declare const FilterBlockConfig: {
     schema: {
         name: string;
         group: string;
-        inputs: import("../../form-generator-v2/types.js").Fields;
+        inputs: import("../../form-generator-v2/index.js").Fields;
         default: {
             allTag: boolean;
             description: string;

package/build/cjs/blocks/FilterBlock/index_deprecated.d.ts

@@ -5,7 +5,7 @@ declare const FilterBlockConfig: {
         name: string;
         group: string;
         hidden: boolean;
-        inputs: import("../../form-generator-v2/types.js").Fields;
+        inputs: import("../../form-generator-v2/index.js").Fields;
         default: {
             allTag: boolean;
             description: string;

package/build/cjs/blocks/Form/index.d.ts

@@ -4,7 +4,7 @@ declare const FormBlockConfig: {
     schema: {
         name: string;
         group: string;
-        inputs: import("../../form-generator-v2/types.js").Fields;
+        inputs: import("../../form-generator-v2/index.js").Fields;
         default: {
             title: string;
             formData: {};

package/build/cjs/blocks/Form/index_deprecated.d.ts

@@ -5,7 +5,7 @@ declare const FormBlockConfig: {
         name: string;
         group: string;
         hidden: boolean;
-        inputs: import("../../form-generator-v2/types.js").Fields;
+        inputs: import("../../form-generator-v2/index.js").Fields;
         default: {
             title: string;
             formData: {};

package/build/cjs/blocks/HeaderSlider/index.d.ts

@@ -4,7 +4,7 @@ declare const HeaderSliderBlockConfig: {
     schema: {
         name: string;
         group: string;
-        inputs: import("../../form-generator-v2/types.js").Fields;
+        inputs: import("../../form-generator-v2/index.js").Fields;
         default: {
             type: string;
             items: ({

package/build/cjs/blocks/HeaderSlider/index_deprecated.d.ts

@@ -5,7 +5,7 @@ declare const HeaderSliderBlockConfig: {
         name: string;
         group: string;
         hidden: boolean;
-        inputs: import("../../form-generator-v2/types.js").Fields;
+        inputs: import("../../form-generator-v2/index.js").Fields;
         default: {
             type: string;
             items: ({

package/build/cjs/blocks/Icons/index.d.ts

@@ -4,7 +4,7 @@ declare const IconsBlockConfig: {
     schema: {
         name: string;
         group: string;
-        inputs: import("../../form-generator-v2/types.js").Fields;
+        inputs: import("../../form-generator-v2/index.js").Fields;
         default: {
             type: string;
             title: string;

package/build/cjs/blocks/Icons/index_deprecated.d.ts

@@ -5,7 +5,7 @@ declare const IconsBlockConfig: {
         name: string;
         group: string;
         hidden: boolean;
-        inputs: import("../../form-generator-v2/types.js").Fields;
+        inputs: import("../../form-generator-v2/index.js").Fields;
         default: {
             type: string;
             title: string;

package/build/cjs/blocks/Info/index.d.ts

@@ -4,7 +4,7 @@ declare const InfoBlockConfig: {
     schema: {
         name: string;
         group: string;
-        inputs: import("../../form-generator-v2/types.js").Fields;
+        inputs: import("../../form-generator-v2/index.js").Fields;
         default: {
             type: string;
             title: string;

package/build/cjs/blocks/Info/index_deprecated.d.ts

@@ -5,7 +5,7 @@ declare const InfoBlockConfig: {
         name: string;
         group: string;
         hidden: boolean;
-        inputs: import("../../form-generator-v2/types.js").Fields;
+        inputs: import("../../form-generator-v2/index.js").Fields;
         default: {
             type: string;
             title: string;

package/build/cjs/blocks/Map/index.d.ts

@@ -4,7 +4,7 @@ declare const MapBlockConfig: {
     schema: {
         name: string;
         group: string;
-        inputs: import("../../form-generator-v2/types.js").Fields;
+        inputs: import("../../form-generator-v2/index.js").Fields;
         default: {
             title: string;
         };

package/build/cjs/blocks/Map/index_deprecated.d.ts

@@ -5,7 +5,7 @@ declare const MapBlockConfig: {
         name: string;
         group: string;
         hidden: boolean;
-        inputs: import("../../form-generator-v2/types.js").Fields;
+        inputs: import("../../form-generator-v2/index.js").Fields;
         default: {
             title: string;
         };

package/build/cjs/blocks/Media/index_deprecated.d.ts

@@ -5,7 +5,7 @@ declare const MediaBlockConfig: {
         name: string;
         group: string;
         hidden: boolean;
-        inputs: import("../../form-generator-v2/types.js").Fields;
+        inputs: import("../../form-generator-v2/index.js").Fields;
         default: {
             title: string;
             description: string;

package/build/cjs/blocks/PromoFeaturesBlock/index_deprecated.d.ts

@@ -5,7 +5,7 @@ declare const PromoFeaturesBlockConfig: {
         name: string;
         group: string;
         hidden: boolean;
-        inputs: import("../../form-generator-v2/types.js").Fields;
+        inputs: import("../../form-generator-v2/index.js").Fields;
         default: {
             title: string;
             theme: string;

package/build/cjs/blocks/Questions/index_deprecated.d.ts

@@ -5,7 +5,7 @@ declare const QuestionsBlockConfig: {
         name: string;
         group: string;
         hidden: boolean;
-        inputs: import("../../form-generator-v2/types.js").Fields;
+        inputs: import("../../form-generator-v2/index.js").Fields;
         default: {
             type: string;
             title: string;

package/build/cjs/blocks/Share/index.d.ts

@@ -4,7 +4,7 @@ declare const ShareBlockConfig: {
     schema: {
         name: string;
         group: string;
-        inputs: import("../../form-generator-v2/types.js").Fields;
+        inputs: import("../../form-generator-v2/index.js").Fields;
         default: {
             items: string[];
             title: string;

package/build/cjs/blocks/Share/index_deprecated.d.ts

@@ -5,7 +5,7 @@ declare const ShareBlockConfig: {
         name: string;
         group: string;
         hidden: boolean;
-        inputs: import("../../form-generator-v2/types.js").Fields;
+        inputs: import("../../form-generator-v2/index.js").Fields;
         default: {
             items: string[];
             title: string;

package/build/cjs/blocks/Slider/index.d.ts

@@ -4,7 +4,7 @@ declare const SliderBlockConfig: {
     schema: {
         name: string;
         group: string;
-        inputs: import("../../form-generator-v2/types.js").Fields;
+        inputs: import("../../form-generator-v2/index.js").Fields;
         default: {
             dots: boolean;
             type: string;

package/build/cjs/blocks/Slider/index_deprecated.d.ts

@@ -5,7 +5,7 @@ declare const SliderBlockConfig: {
         name: string;
         group: string;
         hidden: boolean;
-        inputs: import("../../form-generator-v2/types.js").Fields;
+        inputs: import("../../form-generator-v2/index.js").Fields;
         default: {
             dots: boolean;
             type: string;

package/build/cjs/blocks/Table/index.d.ts

@@ -4,7 +4,7 @@ declare const TableBlockConfig: {
     schema: {
         name: string;
         group: string;
-        inputs: import("../../form-generator-v2/types.js").Fields;
+        inputs: import("../../form-generator-v2/index.js").Fields;
         default: {
             type: string;
             title: string;

package/build/cjs/blocks/Table/index_deprecated.d.ts

@@ -5,7 +5,7 @@ declare const TableBlockConfig: {
         name: string;
         group: string;
         hidden: boolean;
-        inputs: import("../../form-generator-v2/types.js").Fields;
+        inputs: import("../../form-generator-v2/index.js").Fields;
         default: {
             type: string;
             title: string;

package/build/cjs/blocks/Tabs/index.d.ts

@@ -4,7 +4,7 @@ declare const TabsBlockConfig: {
     schema: {
         name: string;
         group: string;
-        inputs: import("../../form-generator-v2/types.js").Fields;
+        inputs: import("../../form-generator-v2/index.js").Fields;
         default: {
             title: string;
             items: {

package/build/cjs/blocks/Tabs/index_deprecated.d.ts

@@ -5,7 +5,7 @@ declare const TabsBlockConfig: {
         name: string;
         group: string;
         hidden: boolean;
-        inputs: import("../../form-generator-v2/types.js").Fields;
+        inputs: import("../../form-generator-v2/index.js").Fields;
         default: {
             title: string;
             items: {

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":"AAAA,YAAY,CAAC;;;;;;AAEb,qDAA+B;AAI/B,8CAAsC;AACtC,0CAA6D;AAC7D,6CAAoD;AACpD,6CAAoE;AAIpE,oEAA6D;AAC7D,0DAAkD;AAClD,sEAA8D;AAC9D,8FAAsF;AACtF,mEAA2D;AAC3D,6DAA+E;AAC/E,4EAAoE;AACpE,yEAAiE;AACjE,wDAAiE;AAEjE,sCAA2C;AAC3C,kDAA+E;AAC/E,wDAAmE;AACnE,oDAAgD;AAChD,kDAA0C;AAI1C,MAAM,CAAC,GAAG,IAAA,oBAAe,EAAC,MAAM,CAAC,CAAC;AASlC,MAAM,WAAW,GAAG,GAAG,CAAC;AACxB,MAAM,WAAW,GAAG,GAAG,CAAC;AACxB,MAAM,eAAe,GAAG,GAAG,CAAC;AAC5B,MAAM,aAAa,GAAG,GAAG,CAAC;AAC1B,MAAM,aAAa,GAAG,GAAG,CAAC;AAC1B,MAAM,iBAAiB,GAAG,GAAG,CAAC;AAe9B,MAAM,gBAAgB,GAAG,CAAC,EAAC,SAAS,EAAE,OAAO,EAAwB,EAAE,EAAE;IACrE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAO,MAAM,CAAC,CAAC;IACrD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAU,EAAE,CAAC,CAAC;IACtE,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAU,EAAE,CAAC,CAAC;IAC1E,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;IACxE,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAC;IAC9E,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpE,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,CAA2B,IAAI,CAAC,CAAC;IAErE,MAAM,SAAS,GAAG,OAAO,KAAK,SAAS,CAAC;IAExC,MAAM,EACF,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,GACrB,GAAG,IAAA,4BAAc,GAAE,CAAC;IAErB,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,IAAA,mBAAQ,EAAC,UAAU,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEvE,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CACnC,CAAC,KAAmB,EAAE,EAAE;QACpB,IAAI,KAAK,CAAC,QAAQ;YAAE,OAAO;QAC3B,MAAM,EAAC,MAAM,EAAE,MAAM,EAAC,GAAG,KAAK,CAAC,SAAS,CAAC;QACzC,IAAI,CAAC,MAAM;YAAE,OAAO;QAEpB,MAAM,WAAW,GAAG,IAAA,wBAAa,EAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;QACpE,MAAM,aAAa,GACf,WAAW,KAAK,IAAI,IAAI,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,UAAU,CAAC,kCAAwB,CAAC,CAAC;QAEnF,IAAI,aAAa,EAAE,CAAC;YAChB,MAAM,IAAI,GAAG,WAAW,EAAE,IAAI,CAAC;YAC/B,IAAI,CAAC,IAAI;gBAAE,OAAO;YAClB,IAAI,CAAC,MAAM,EAAE,CAAC;gBACV,QAAQ,CAAC,IAAI,CAAC,CAAC;gBACf,OAAO;YACX,CAAC;YAED,IAAI,IAAA,4BAAiB,EAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC;gBACjC,iBAAiB,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;gBAC/C,OAAO;YACX,CAAC;YAED,IAAI,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,KAAK,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC;gBAC1C,QAAQ,CAAC,IAAI,CAAC,CAAC;gBACf,OAAO;YACX,CAAC;YAED,MAAM,SAAS,GAAG,IAAA,sBAAW,EACzB,KAAK,CAAC,SAAS,CAAC,QAAQ,EAAE,OAAO,EAAE,CAAC,EACpC,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,CAC1B,CAAC;YACF,IAAI,SAAS,EAAE,CAAC;gBACZ,gBAAgB,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC;YAC9C,CAAC;iBAAM,CAAC;gBACJ,iBAAiB,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC;YAC/C,CAAC;YACD,OAAO;QACX,CAAC;QAED,IAAI,MAAM,IAAI,IAAA,4BAAiB,EAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC;YAC3C,kBAAkB,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YAC7D,OAAO;QACX,CAAC;QAED,MAAM,MAAM,GAAG,IAAA,4BAAc,EAAC,UAAU,CAAC,CAAC;QAC1C,MAAM,UAAU,GAAG,IAAA,cAAI,EAAC,MAAM,EAAE,KAAK,CAAC,CAAC;QACvC,MAAM,UAAU,GAAG,IAAA,4BAAc,EAAC,UAAU,CAAC,CAAC;QAC9C,YAAY,CAAC,UAAU,CAAC,CAAC;IAC7B,CAAC,EACD;QACI,QAAQ;QACR,iBAAiB;QACjB,UAAU;QACV,iBAAiB;QACjB,gBAAgB;QAChB,kBAAkB;QAClB,YAAY;KACf,CACJ,CAAC;IAEF,MAAM,SAAS,GAAG;QACd,iBAAiB,EAAE,GAAG,YAAY,IAAI;QACtC,mBAAmB,EAAE,GAAG,cAAc,IAAI;KACtB,CAAC;IAEzB,OAAO,CACH,gCAAK,SAAS,EAAE,CAAC,CAAC,EAAC,OAAO,EAAE,OAAO,KAAK,SAAS,EAAC,EAAE,SAAS,CAAC,YAC1D,wBAAC,4CAAqB,IAClB,OAAO,EAAE,aAAa,EACtB,UAAU,EAAE,gBAAgB,EAC5B,eAAe,EAAE,eAAe,EAChC,kBAAkB,EAAE,kBAAkB,aAEtC,iCAAK,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,aACxB,uBAAC,2BAAmB,IAChB,IAAI,EAAC,GAAG,EACR,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,OAAO,EACjB,OAAO,EAAE;gCACL;oCACI,KAAK,EAAE,MAAM;oCACb,OAAO,EAAE,CACL,kCAAM,SAAS,EAAE,CAAC,CAAC,gBAAgB,CAAC,aAChC,uBAAC,YAAI,IAAC,IAAI,EAAE,cAAM,EAAE,IAAI,EAAE,EAAE,GAAI,YAE7B,CACV;iCACJ;gCACD;oCACI,KAAK,EAAE,SAAS;oCAChB,OAAO,EAAE,CACL,kCAAM,SAAS,EAAE,CAAC,CAAC,gBAAgB,CAAC,aAChC,uBAAC,YAAI,IAAC,IAAI,EAAE,WAAG,EAAE,IAAI,EAAE,EAAE,GAAI,eAE1B,CACV;iCACJ;6BACJ,GACH,EACF,wBAAC,cAAM,IACH,GAAG,EAAE,eAAe,EACpB,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,GAAG,EACR,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,aAElD,uBAAC,YAAI,IAAC,IAAI,EAAE,YAAI,EAAE,IAAI,EAAE,EAAE,GAAI,cAEzB,EACT,uBAAC,yBAAW,IACR,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,YAAY,EACrB,IAAI,EAAE,eAAe,EACrB,YAAY,EAAE,kBAAkB,EAChC,aAAa,EAAE,eAAe,CAAC,OAAO,GACxC,IACA,EAEL,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,CACf,wBAAC,wBAAgB,IAAC,SAAS,EAAE,aAAa,aACtC,iCAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,SAAS,aACzC,kCAAO,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,YAC1B,uBAAC,iBAAO,KAAG,GACP,EACP,CAAC,SAAS,IAAI,CACX,uBAAC,2BAAY,IACT,KAAK,EAAE,YAAY,EACnB,GAAG,EAAE,WAAW,EAChB,GAAG,EAAE,WAAW,EAChB,SAAS,EAAC,MAAM,EAChB,QAAQ,EAAE,eAAe,GAC3B,CACL,EACD,iCAAM,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,YACxB,uBAAC,eAAM,KAAG,GACP,EACP,uBAAC,2BAAY,IACT,KAAK,EAAE,cAAc,EACrB,GAAG,EAAE,aAAa,EAClB,GAAG,EAAE,aAAa,EAClB,SAAS,EAAC,OAAO,EACjB,QAAQ,EAAE,iBAAiB,GAC7B,EACF,kCAAO,SAAS,EAAE,CAAC,CAAC,WAAW,CAAC,YAC5B,uBAAC,qBAAS,KAAG,GACT,IACN,EACN,uBAAC,mBAAW,IAAC,aAAa,EAAE,IAAI,YAC3B,CAAC,MAAM,EAAE,EAAE;gCACR,IAAI,CAAC,MAAM;oCAAE,OAAO,IAAI,CAAC;gCACzB,IAAI,IAAA,wBAAa,EAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC;oCAC7B,OAAO,uBAAC,uCAAkB,IAAC,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,IAAI,GAAI,CAAC;gCAC1D,CAAC;gCACD,MAAM,KAAK,GAAG,IAAA,yBAAa,EAAC,UAAU,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC;gCAC3D,IAAI,CAAC,KAAK;oCAAE,OAAO,IAAI,CAAC;gCACxB,OAAO,uBAAC,uCAAkB,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC;4BAClE,CAAC,GACS,IACC,CACtB,CAAC,CAAC,CAAC,CACA,uBAAC,uBAAU,KAAG,CACjB,IACmB,GACtB,CACT,CAAC;AACN,CAAC,CAAC;AAEK,MAAM,aAAa,GAAG,CAAC,EAC1B,SAAS,EACT,UAAU,EACV,QAAQ,EACR,OAAO,GAAG,MAAM,GACC,EAAE,EAAE;IACrB,OAAO,CACH,uBAAC,0BAAY,IAAC,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,YACpD,uBAAC,gBAAgB,IAAC,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,GAAI,GACjD,CAClB,CAAC;AACN,CAAC,CAAC;AAXW,QAAA,aAAa,iBAWxB","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"]}