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

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"]}

package/build/esm/form-builder-v2/components/CanvasCard/CanvasCard.css

@@ -0,0 +1,133 @@
+.pcformbuilderv2-canvas-card {
+  position: relative;
+  padding: var(--g-spacing-3) var(--g-spacing-3);
+  border: 1px solid transparent;
+  border-radius: var(--g-border-radius-l);
+  cursor: pointer;
+  transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
+}
+.pcformbuilderv2-canvas-card:hover {
+  background-color: var(--g-color-base-simple-hover);
+}
+.pcformbuilderv2-canvas-card:hover > .pcformbuilderv2-canvas-card__controls {
+  opacity: 1;
+}
+.pcformbuilderv2-canvas-card_selected {
+  border-color: var(--g-color-line-brand);
+  background-color: var(--g-color-base-selection);
+}
+.pcformbuilderv2-canvas-card_selected .pcformbuilderv2-canvas-card__controls {
+  opacity: 1;
+}
+.pcformbuilderv2-canvas-card_dragging {
+  opacity: 0.4;
+}
+.pcformbuilderv2-canvas-card_drop-target, .pcformbuilderv2-canvas-card_drop-target-after {
+  position: relative;
+}
+.pcformbuilderv2-canvas-card_drop-target::before, .pcformbuilderv2-canvas-card_drop-target-after::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: var(--g-color-line-brand);
+  border-radius: 2px;
+  opacity: 0.45;
+  pointer-events: none;
+}
+.pcformbuilderv2-canvas-card_drop-target::before {
+  top: calc((var(--g-spacing-3) + 3px) / -2 - 1px);
+}
+.pcformbuilderv2-canvas-card_drop-target-after::before {
+  bottom: calc((var(--g-spacing-3) + 3px) / -2 - 1px);
+}
+.pcformbuilderv2-canvas-card__visibility-badge {
+  margin-bottom: var(--g-spacing-1);
+}
+.pcformbuilderv2-canvas-card__controls {
+  position: absolute;
+  top: var(--g-spacing-1);
+  right: var(--g-spacing-2);
+  display: flex;
+  align-items: center;
+  gap: var(--g-spacing-half);
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+.pcformbuilderv2-canvas-card__control {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--g-spacing-5);
+  height: var(--g-spacing-5);
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--g-color-text-secondary);
+  cursor: grab;
+  border-radius: var(--g-border-radius-s);
+}
+.pcformbuilderv2-canvas-card__control:hover {
+  background-color: var(--g-color-base-simple-hover-solid);
+  color: var(--g-color-text-primary);
+}
+.pcformbuilderv2-canvas-card__control:active {
+  cursor: grabbing;
+}
+.pcformbuilderv2-canvas-card__labeled {
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-spacing-1);
+}
+.pcformbuilderv2-canvas-card__labeled-title {
+  display: flex;
+  align-items: baseline;
+  gap: var(--g-spacing-2);
+}
+.pcformbuilderv2-canvas-card__section-header {
+  display: flex;
+  align-items: center;
+  gap: var(--g-spacing-2);
+  padding-bottom: var(--g-spacing-1);
+  border-bottom: 1px solid var(--g-color-line-generic);
+}
+.pcformbuilderv2-canvas-card__children {
+  margin-top: var(--g-spacing-2);
+  padding-left: var(--g-spacing-3);
+  border-left: 2px solid var(--g-color-line-generic);
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-spacing-2);
+  border-radius: 0 var(--g-border-radius-m) var(--g-border-radius-m) 0;
+  transition: border-color 0.12s ease, background-color 0.12s ease;
+}
+.pcformbuilderv2-canvas-card__children_drop-target {
+  border-left-color: var(--g-color-line-brand);
+  background-color: var(--g-color-base-selection);
+}
+.pcformbuilderv2-canvas-card__children .pcformbuilderv2-canvas-card_drop-target::before {
+  top: calc((var(--g-spacing-2) + 3px) / -2 - 1px);
+}
+.pcformbuilderv2-canvas-card__children .pcformbuilderv2-canvas-card_drop-target-after::before {
+  bottom: calc((var(--g-spacing-2) + 3px) / -2 - 1px);
+}
+.pcformbuilderv2-canvas-card__static-text {
+  padding: var(--g-spacing-2) 10px;
+  border-radius: var(--g-border-radius-s);
+}
+.pcformbuilderv2-canvas-card__color-swatch {
+  display: flex;
+  align-items: center;
+  gap: var(--g-spacing-2);
+}
+.pcformbuilderv2-canvas-card__color-swatch-chip {
+  width: var(--g-spacing-6);
+  height: var(--g-spacing-6);
+  border: 1px solid var(--g-color-line-generic);
+  border-radius: var(--g-border-radius-s);
+}
+.pcformbuilderv2-canvas-card__color-swatch-value {
+  font-size: var(--g-text-body-1-font-size);
+  color: var(--g-color-text-secondary);
+}

package/build/esm/form-builder-v2/components/CanvasCard/CanvasCard.d.ts

@@ -0,0 +1,10 @@
+import { FormField } from "../../types.js";
+import { SectionDropData } from "./components/SectionChildrenDropZone.js";
+import './CanvasCard.css';
+export type { SectionDropData };
+interface CanvasCardProps {
+    field: FormField;
+    index: number;
+    group: string;
+}
+export declare const CanvasCard: ({ field, index, group }: CanvasCardProps) => import("react/jsx-runtime").JSX.Element;

package/build/esm/form-builder-v2/components/CanvasCard/CanvasCard.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { CollisionPriority } from '@dnd-kit/abstract';
+import { SortableKeyboardPlugin, isSortable } from '@dnd-kit/dom/sortable';
+import { useSortable } from '@dnd-kit/react/sortable';
+import { Copy, Grip, TrashBin } from '@gravity-ui/icons';
+import { Button, Icon, Label } from '@gravity-ui/uikit';
+import { useFormContext } from "../../hooks/FormContext.js";
+import { formBuilderV2Cn } from "../../utils/cn.js";
+import { isDropAfter, isPaletteData } from "../../utils/dragData.js";
+import { FieldPreview } from "./components/FieldPreview.js";
+import { SectionChildrenDropZone } from "./components/SectionChildrenDropZone.js";
+import './CanvasCard.css';
+const b = formBuilderV2Cn('canvas-card');
+export const CanvasCard = ({ field, index, group }) => {
+    const { selectedFieldId, selectField, removeField, duplicateField } = useFormContext();
+    const isSelected = selectedFieldId === field.id;
+    const hasWhen = 'when' in field && Array.isArray(field.when) && field.when.length > 0;
+    const cardData = React.useMemo(() => ({ kind: 'card', group }), [group]);
+    const { ref, handleRef, isDragSource, isDropTarget, sortable } = useSortable({
+        id: field.id,
+        index,
+        group,
+        data: cardData,
+        transition: null,
+        plugins: [SortableKeyboardPlugin],
+        collisionPriority: field.type === 'section' ? CollisionPriority.Low : undefined,
+        alignment: {
+            x: 'start',
+            y: 'center',
+        },
+    });
+    const dragOp = sortable.manager?.dragOperation;
+    const source = dragOp?.source;
+    const isPaletteSource = isPaletteData(source?.data);
+    const sourceIndex = source && isSortable(source) ? source.index : undefined;
+    const pointerY = dragOp?.position?.current?.y;
+    const targetCenterY = sortable.droppable?.shape?.center?.y;
+    const dropAfter = isDropTarget &&
+        !isDragSource &&
+        (isPaletteSource
+            ? isDropAfter(pointerY, targetCenterY)
+            : sourceIndex !== undefined && sourceIndex < index);
+    const handleClick = (event) => {
+        event.stopPropagation();
+        selectField(field.id);
+    };
+    const handleKeyDown = (event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            event.stopPropagation();
+            selectField(field.id);
+        }
+    };
+    return (_jsxs("div", { ref: ref, className: b({
+            selected: isSelected,
+            dragging: isDragSource,
+            'drop-target': isDropTarget && !isDragSource && !dropAfter,
+            'drop-target-after': dropAfter,
+        }), onClick: handleClick, onKeyDown: handleKeyDown, role: "button", tabIndex: 0, "aria-pressed": isSelected, children: [hasWhen && (_jsx("div", { className: b('visibility-badge'), children: _jsx(Label, { theme: "info", size: "s", children: "Visibility by condition" }) })), _jsx(FieldPreview, { field: field }), _jsxs("div", { className: b('controls'), children: [_jsx(Button, { ref: handleRef, view: "flat", size: "xs", className: b('control'), "aria-label": "Drag to reorder", title: "Drag to reorder", onClick: (event) => event.stopPropagation(), children: _jsx(Icon, { data: Grip, size: 12 }) }), _jsx(Button, { view: "flat", size: "xs", onClick: (event) => {
+                            event.stopPropagation();
+                            duplicateField(field.id);
+                        }, title: "Duplicate", children: _jsx(Icon, { data: Copy, size: 12 }) }), _jsx(Button, { view: "flat-danger", size: "xs", onClick: (event) => {
+                            event.stopPropagation();
+                            removeField(field.id);
+                        }, title: "Remove", children: _jsx(Icon, { data: TrashBin, size: 12 }) })] }), field.type === 'section' && (_jsx(SectionChildrenDropZone, { sectionId: field.id, fields: field.fields }))] }));
+};
+//# sourceMappingURL=CanvasCard.js.map

package/build/esm/form-builder-v2/components/CanvasCard/CanvasCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CanvasCard.js","sourceRoot":"../../../../../src","sources":["form-builder-v2/components/CanvasCard/CanvasCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {CollisionPriority} from '@dnd-kit/abstract';\nimport {SortableKeyboardPlugin, isSortable} from '@dnd-kit/dom/sortable';\nimport {useSortable} from '@dnd-kit/react/sortable';\nimport {Copy, Grip, TrashBin} from '@gravity-ui/icons';\nimport {Button, Icon, Label} from '@gravity-ui/uikit';\n\nimport {useFormContext} from '../../hooks/FormContext';\nimport {FormField} from '../../types';\nimport {formBuilderV2Cn} from '../../utils/cn';\nimport type {CardDragData} from '../../utils/dragData';\nimport {isDropAfter, isPaletteData} from '../../utils/dragData';\n\nimport {FieldPreview} from './components/FieldPreview';\nimport {SectionChildrenDropZone, SectionDropData} from './components/SectionChildrenDropZone';\n\nimport './CanvasCard.scss';\n\nexport type {SectionDropData};\n\nconst b = formBuilderV2Cn('canvas-card');\n\ninterface CanvasCardProps {\n    field: FormField;\n    index: number;\n    group: string;\n}\n\nexport const CanvasCard = ({field, index, group}: CanvasCardProps) => {\n    const {selectedFieldId, selectField, removeField, duplicateField} = useFormContext();\n\n    const isSelected = selectedFieldId === field.id;\n    const hasWhen = 'when' in field && Array.isArray(field.when) && field.when.length > 0;\n\n    const cardData: CardDragData = React.useMemo(() => ({kind: 'card', group}), [group]);\n\n    const {ref, handleRef, isDragSource, isDropTarget, sortable} = useSortable({\n        id: field.id,\n        index,\n        group,\n        data: cardData,\n        transition: null,\n        plugins: [SortableKeyboardPlugin],\n        collisionPriority: field.type === 'section' ? CollisionPriority.Low : undefined,\n        alignment: {\n            x: 'start',\n            y: 'center',\n        },\n    });\n\n    const dragOp = sortable.manager?.dragOperation;\n    const source = dragOp?.source;\n    const isPaletteSource = isPaletteData(source?.data);\n    const sourceIndex = source && isSortable(source) ? source.index : undefined;\n    const pointerY = dragOp?.position?.current?.y;\n    const targetCenterY = sortable.droppable?.shape?.center?.y;\n\n    const dropAfter =\n        isDropTarget &&\n        !isDragSource &&\n        (isPaletteSource\n            ? isDropAfter(pointerY, targetCenterY)\n            : sourceIndex !== undefined && sourceIndex < index);\n\n    const handleClick = (event: React.MouseEvent) => {\n        event.stopPropagation();\n        selectField(field.id);\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        if (event.key === 'Enter' || event.key === ' ') {\n            event.preventDefault();\n            event.stopPropagation();\n            selectField(field.id);\n        }\n    };\n\n    return (\n        <div\n            ref={ref}\n            className={b({\n                selected: isSelected,\n                dragging: isDragSource,\n                'drop-target': isDropTarget && !isDragSource && !dropAfter,\n                'drop-target-after': dropAfter,\n            })}\n            onClick={handleClick}\n            onKeyDown={handleKeyDown}\n            role=\"button\"\n            tabIndex={0}\n            aria-pressed={isSelected}\n        >\n            {hasWhen && (\n                <div className={b('visibility-badge')}>\n                    <Label theme=\"info\" size=\"s\">\n                        Visibility by condition\n                    </Label>\n                </div>\n            )}\n            <FieldPreview field={field} />\n\n            <div className={b('controls')}>\n                <Button\n                    ref={handleRef}\n                    view=\"flat\"\n                    size=\"xs\"\n                    className={b('control')}\n                    aria-label=\"Drag to reorder\"\n                    title=\"Drag to reorder\"\n                    onClick={(event) => event.stopPropagation()}\n                >\n                    <Icon data={Grip} size={12} />\n                </Button>\n                <Button\n                    view=\"flat\"\n                    size=\"xs\"\n                    onClick={(event) => {\n                        event.stopPropagation();\n                        duplicateField(field.id);\n                    }}\n                    title=\"Duplicate\"\n                >\n                    <Icon data={Copy} size={12} />\n                </Button>\n                <Button\n                    view=\"flat-danger\"\n                    size=\"xs\"\n                    onClick={(event) => {\n                        event.stopPropagation();\n                        removeField(field.id);\n                    }}\n                    title=\"Remove\"\n                >\n                    <Icon data={TrashBin} size={12} />\n                </Button>\n            </div>\n\n            {field.type === 'section' && (\n                <SectionChildrenDropZone sectionId={field.id} fields={field.fields} />\n            )}\n        </div>\n    );\n};\n"]}

package/build/esm/form-builder-v2/components/CanvasCard/components/FieldPreview.d.ts

@@ -0,0 +1,6 @@
+import { FormField } from "../../../types.js";
+interface FieldPreviewProps {
+    field: FormField;
+}
+export declare const FieldPreview: ({ field }: FieldPreviewProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/build/esm/form-builder-v2/components/CanvasCard/components/FieldPreview.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Label, Text } from '@gravity-ui/uikit';
+import { cloneDeep, set, unset } from 'lodash';
+import { componentMap } from "../../../../form-generator-v2/components/constants.js";
+import { useCanvasContent } from "../../../CanvasContentContext.js";
+import { formBuilderV2Cn } from "../../../utils/cn.js";
+const b = formBuilderV2Cn('canvas-card');
+const isTemplateField = (field) => 'name' in field && typeof field.name === 'string' && field.name.includes('{{index}}');
+const makeOnUpdate = (setContent) => (key, value, options) => {
+    setContent((prev) => {
+        const next = cloneDeep(prev);
+        if (options?.unset) {
+            unset(next, key);
+        }
+        else {
+            set(next, key, value);
+        }
+        return next;
+    });
+};
+export const FieldPreview = ({ field }) => {
+    const { content, setContent, templateContent, setTemplateContent } = useCanvasContent();
+    const onUpdateForContent = React.useMemo(() => makeOnUpdate(setContent), [setContent]);
+    const onUpdateForTemplate = React.useMemo(() => makeOnUpdate(setTemplateContent), [setTemplateContent]);
+    if (field.type === 'section') {
+        return (_jsxs("div", { className: b('section-header'), children: [_jsx(Text, { variant: "subheader-2", children: field.title || 'Section' }), field.index ? (_jsxs(Label, { theme: "info", size: "s", children: ["Array \u00B7 ", field.itemTitle ?? 'Item {{index}}'] })) : (_jsx(Label, { theme: "unknown", size: "s", children: "Group" }))] }));
+    }
+    const Component = componentMap[field.type];
+    if (!Component) {
+        return null;
+    }
+    const { when: _when, id: _id, ...fieldProps } = field;
+    const useTemplate = isTemplateField(field);
+    const widgetContent = useTemplate ? templateContent : content;
+    const onUpdate = useTemplate ? onUpdateForTemplate : onUpdateForContent;
+    return (_jsx(Component, { ...fieldProps, content: widgetContent, onUpdate: onUpdate }));
+};
+//# sourceMappingURL=FieldPreview.js.map