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

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":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,iBAAiB,EAAC,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAC,sBAAsB,EAAE,UAAU,EAAC,MAAM,uBAAuB,CAAC;AACzE,OAAO,EAAC,WAAW,EAAC,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAC,MAAM,EAAE,IAAI,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAEtD,OAAO,EAAC,cAAc,EAAC,mCAAgC;AAEvD,OAAO,EAAC,eAAe,EAAC,0BAAuB;AAE/C,OAAO,EAAC,WAAW,EAAE,aAAa,EAAC,gCAA6B;AAEhE,OAAO,EAAC,YAAY,EAAC,qCAAkC;AACvD,OAAO,EAAC,uBAAuB,EAAkB,gDAA6C;AAE9F,OAAO,kBAAkB,CAAC;AAI1B,MAAM,CAAC,GAAG,eAAe,CAAC,aAAa,CAAC,CAAC;AAQzC,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAkB,EAAE,EAAE;IACjE,MAAM,EAAC,eAAe,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,EAAC,GAAG,cAAc,EAAE,CAAC;IAErF,MAAM,UAAU,GAAG,eAAe,KAAK,KAAK,CAAC,EAAE,CAAC;IAChD,MAAM,OAAO,GAAG,MAAM,IAAI,KAAK,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;IAEtF,MAAM,QAAQ,GAAiB,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAErF,MAAM,EAAC,GAAG,EAAE,SAAS,EAAE,YAAY,EAAE,YAAY,EAAE,QAAQ,EAAC,GAAG,WAAW,CAAC;QACvE,EAAE,EAAE,KAAK,CAAC,EAAE;QACZ,KAAK;QACL,KAAK;QACL,IAAI,EAAE,QAAQ;QACd,UAAU,EAAE,IAAI;QAChB,OAAO,EAAE,CAAC,sBAAsB,CAAC;QACjC,iBAAiB,EAAE,KAAK,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS;QAC/E,SAAS,EAAE;YACP,CAAC,EAAE,OAAO;YACV,CAAC,EAAE,QAAQ;SACd;KACJ,CAAC,CAAC;IAEH,MAAM,MAAM,GAAG,QAAQ,CAAC,OAAO,EAAE,aAAa,CAAC;IAC/C,MAAM,MAAM,GAAG,MAAM,EAAE,MAAM,CAAC;IAC9B,MAAM,eAAe,GAAG,aAAa,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACpD,MAAM,WAAW,GAAG,MAAM,IAAI,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;IAC5E,MAAM,QAAQ,GAAG,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,CAAC;IAC9C,MAAM,aAAa,GAAG,QAAQ,CAAC,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC;IAE3D,MAAM,SAAS,GACX,YAAY;QACZ,CAAC,YAAY;QACb,CAAC,eAAe;YACZ,CAAC,CAAC,WAAW,CAAC,QAAQ,EAAE,aAAa,CAAC;YACtC,CAAC,CAAC,WAAW,KAAK,SAAS,IAAI,WAAW,GAAG,KAAK,CAAC,CAAC;IAE5D,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAE,EAAE;QAC5C,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,WAAW,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IAC1B,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,KAA0B,EAAE,EAAE;QACjD,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;YAC7C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,WAAW,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;QAC1B,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACH,eACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,CAAC,CAAC;YACT,QAAQ,EAAE,UAAU;YACpB,QAAQ,EAAE,YAAY;YACtB,aAAa,EAAE,YAAY,IAAI,CAAC,YAAY,IAAI,CAAC,SAAS;YAC1D,mBAAmB,EAAE,SAAS;SACjC,CAAC,EACF,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,kBACG,UAAU,aAEvB,OAAO,IAAI,CACR,cAAK,SAAS,EAAE,CAAC,CAAC,kBAAkB,CAAC,YACjC,KAAC,KAAK,IAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,GAAG,wCAEpB,GACN,CACT,EACD,KAAC,YAAY,IAAC,KAAK,EAAE,KAAK,GAAI,EAE9B,eAAK,SAAS,EAAE,CAAC,CAAC,UAAU,CAAC,aACzB,KAAC,MAAM,IACH,GAAG,EAAE,SAAS,EACd,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,IAAI,EACT,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,gBACZ,iBAAiB,EAC5B,KAAK,EAAC,iBAAiB,EACvB,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,eAAe,EAAE,YAE3C,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,GAAI,GACzB,EACT,KAAC,MAAM,IACH,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;4BACf,KAAK,CAAC,eAAe,EAAE,CAAC;4BACxB,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;wBAC7B,CAAC,EACD,KAAK,EAAC,WAAW,YAEjB,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,GAAI,GACzB,EACT,KAAC,MAAM,IACH,IAAI,EAAC,aAAa,EAClB,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;4BACf,KAAK,CAAC,eAAe,EAAE,CAAC;4BACxB,WAAW,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;wBAC1B,CAAC,EACD,KAAK,EAAC,QAAQ,YAEd,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,GAAI,GAC7B,IACP,EAEL,KAAK,CAAC,IAAI,KAAK,SAAS,IAAI,CACzB,KAAC,uBAAuB,IAAC,SAAS,EAAE,KAAK,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,GAAI,CACzE,IACC,CACT,CAAC;AACN,CAAC,CAAC","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

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

@@ -0,0 +1 @@
+{"version":3,"file":"FieldPreview.js","sourceRoot":"../../../../../../src","sources":["form-builder-v2/components/CanvasCard/components/FieldPreview.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {Label, Text} from '@gravity-ui/uikit';\nimport {cloneDeep, set, unset} from 'lodash';\n\nimport {componentMap} from '../../../../form-generator-v2/components/constants';\nimport type {Content, OnUpdate} from '../../../../form-generator-v2/types';\nimport {useCanvasContent} from '../../../CanvasContentContext';\nimport {FormField} from '../../../types';\nimport {formBuilderV2Cn} from '../../../utils/cn';\n\nconst b = formBuilderV2Cn('canvas-card');\n\nconst isTemplateField = (field: FormField): boolean =>\n    'name' in field && typeof field.name === 'string' && field.name.includes('{{index}}');\n\nconst makeOnUpdate =\n    (setContent: React.Dispatch<React.SetStateAction<Content>>): OnUpdate =>\n    (key, value, options) => {\n        setContent((prev) => {\n            const next = cloneDeep(prev);\n            if (options?.unset) {\n                unset(next, key);\n            } else {\n                set(next, key, value);\n            }\n            return next;\n        });\n    };\n\ninterface FieldPreviewProps {\n    field: FormField;\n}\n\nexport const FieldPreview = ({field}: FieldPreviewProps) => {\n    const {content, setContent, templateContent, setTemplateContent} = useCanvasContent();\n\n    const onUpdateForContent = React.useMemo<OnUpdate>(\n        () => makeOnUpdate(setContent),\n        [setContent],\n    );\n    const onUpdateForTemplate = React.useMemo<OnUpdate>(\n        () => makeOnUpdate(setTemplateContent),\n        [setTemplateContent],\n    );\n\n    if (field.type === 'section') {\n        return (\n            <div className={b('section-header')}>\n                <Text variant=\"subheader-2\">{field.title || 'Section'}</Text>\n                {field.index ? (\n                    <Label theme=\"info\" size=\"s\">\n                        Array · {field.itemTitle ?? 'Item {{index}}'}\n                    </Label>\n                ) : (\n                    <Label theme=\"unknown\" size=\"s\">\n                        Group\n                    </Label>\n                )}\n            </div>\n        );\n    }\n\n    const Component = componentMap[field.type] as\n        | React.ComponentType<Record<string, unknown>>\n        | undefined;\n    if (!Component) {\n        return null;\n    }\n\n    const {when: _when, id: _id, ...fieldProps} = field;\n\n    const useTemplate = isTemplateField(field);\n    const widgetContent = useTemplate ? templateContent : content;\n    const onUpdate = useTemplate ? onUpdateForTemplate : onUpdateForContent;\n\n    return (\n        <Component\n            {...(fieldProps as Record<string, unknown>)}\n            content={widgetContent}\n            onUpdate={onUpdate}\n        />\n    );\n};\n"]}

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

@@ -0,0 +1,9 @@
+import { FormField } from "../../../types.js";
+import type { SectionDropData } from "../../../utils/dragData.js";
+export declare const SECTION_DROP_PREFIX = "section-drop:";
+export type { SectionDropData };
+interface SectionChildrenDropZoneProps {
+    sectionId: string;
+    fields: FormField[];
+}
+export declare const SectionChildrenDropZone: ({ sectionId, fields }: SectionChildrenDropZoneProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDroppable } from '@dnd-kit/react';
+import { Text } from '@gravity-ui/uikit';
+import { formBuilderV2Cn } from "../../../utils/cn.js";
+import { CanvasList } from "../../Canvas/Canvas.js";
+const b = formBuilderV2Cn('canvas-card');
+export const SECTION_DROP_PREFIX = 'section-drop:';
+export const SectionChildrenDropZone = ({ sectionId, fields }) => {
+    const { ref, isDropTarget } = useDroppable({
+        id: `${SECTION_DROP_PREFIX}${sectionId}`,
+        data: { kind: 'section-drop', sectionId },
+    });
+    const className = b('children');
+    return (_jsxs("div", { ref: ref, className: `${className}${isDropTarget ? ` ${className}_drop-target` : ''}`, children: [_jsx(CanvasList, { fields: fields, parentGroup: `section:${sectionId}` }), fields.length === 0 && (_jsx(Text, { variant: "body-2", color: "hint", children: "Empty section. Drag a tile from the palette into this box, or select the section first and click a tile to add it inside." }))] }));
+};
+//# sourceMappingURL=SectionChildrenDropZone.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SectionChildrenDropZone.js","sourceRoot":"../../../../../../src","sources":["form-builder-v2/components/CanvasCard/components/SectionChildrenDropZone.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAC,IAAI,EAAC,MAAM,mBAAmB,CAAC;AAGvC,OAAO,EAAC,eAAe,EAAC,6BAA0B;AAElD,OAAO,EAAC,UAAU,EAAC,+BAA4B;AAE/C,MAAM,CAAC,GAAG,eAAe,CAAC,aAAa,CAAC,CAAC;AAEzC,MAAM,CAAC,MAAM,mBAAmB,GAAG,eAAe,CAAC;AASnD,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,EAAC,SAAS,EAAE,MAAM,EAA+B,EAAE,EAAE;IACzF,MAAM,EAAC,GAAG,EAAE,YAAY,EAAC,GAAG,YAAY,CAAC;QACrC,EAAE,EAAE,GAAG,mBAAmB,GAAG,SAAS,EAAE;QACxC,IAAI,EAAE,EAAC,IAAI,EAAE,cAAc,EAAE,SAAS,EAAC;KAC1C,CAAC,CAAC;IAEH,MAAM,SAAS,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC;IAEhC,OAAO,CACH,eAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,SAAS,GAAG,YAAY,CAAC,CAAC,CAAC,IAAI,SAAS,cAAc,CAAC,CAAC,CAAC,EAAE,EAAE,aACtF,KAAC,UAAU,IAAC,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,WAAW,SAAS,EAAE,GAAI,EAClE,MAAM,CAAC,MAAM,KAAK,CAAC,IAAI,CACpB,KAAC,IAAI,IAAC,OAAO,EAAC,QAAQ,EAAC,KAAK,EAAC,MAAM,0IAG5B,CACV,IACC,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import {useDroppable} from '@dnd-kit/react';\nimport {Text} from '@gravity-ui/uikit';\n\nimport {FormField} from '../../../types';\nimport {formBuilderV2Cn} from '../../../utils/cn';\nimport type {SectionDropData} from '../../../utils/dragData';\nimport {CanvasList} from '../../Canvas/Canvas';\n\nconst b = formBuilderV2Cn('canvas-card');\n\nexport const SECTION_DROP_PREFIX = 'section-drop:';\n\nexport type {SectionDropData};\n\ninterface SectionChildrenDropZoneProps {\n    sectionId: string;\n    fields: FormField[];\n}\n\nexport const SectionChildrenDropZone = ({sectionId, fields}: SectionChildrenDropZoneProps) => {\n    const {ref, isDropTarget} = useDroppable({\n        id: `${SECTION_DROP_PREFIX}${sectionId}`,\n        data: {kind: 'section-drop', sectionId},\n    });\n\n    const className = b('children');\n\n    return (\n        <div ref={ref} className={`${className}${isDropTarget ? ` ${className}_drop-target` : ''}`}>\n            <CanvasList fields={fields} parentGroup={`section:${sectionId}`} />\n            {fields.length === 0 && (\n                <Text variant=\"body-2\" color=\"hint\">\n                    Empty section. Drag a tile from the palette into this box, or select the section\n                    first and click a tile to add it inside.\n                </Text>\n            )}\n        </div>\n    );\n};\n"]}

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

@@ -0,0 +1,22 @@
+.pcformbuilderv2-content-tab {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: var(--g-spacing-4);
+  margin-top: var(--g-spacing-4);
+}
+.pcformbuilderv2-content-tab__column {
+  padding: var(--g-spacing-4);
+}
+.pcformbuilderv2-content-tab__title {
+  display: block;
+  margin-bottom: var(--g-spacing-3);
+}
+.pcformbuilderv2-content-tab__json {
+  margin: 0;
+  padding: var(--g-spacing-3);
+  background: var(--g-color-base-generic);
+  border-radius: var(--g-border-radius-m);
+  font-size: 12px;
+  overflow: auto;
+  max-height: 70vh;
+}

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

@@ -0,0 +1,2 @@
+import './ContentTab.css';
+export declare const ContentTab: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Card, Text } from '@gravity-ui/uikit';
+import FormGenerator from "../../../form-generator-v2/FormGenerator.js";
+import { useCanvasContent } from "../../CanvasContentContext.js";
+import { useFormContext } from "../../hooks/FormContext.js";
+import { formBuilderV2Cn } from "../../utils/cn.js";
+import { stripIds } from "../../utils/stripIds.js";
+import './ContentTab.css';
+const b = formBuilderV2Cn('content-tab');
+export const ContentTab = () => {
+    const { formFields } = useFormContext();
+    const { content, setContent } = useCanvasContent();
+    const schema = React.useMemo(() => stripIds(formFields), [formFields]);
+    return (_jsxs("div", { className: b(), children: [_jsxs(Card, { className: b('column'), view: "outlined", children: [_jsx(Text, { variant: "subheader-2", className: b('title'), children: "Live form" }), schema.length > 0 ? (_jsx(FormGenerator, { blockConfig: schema, contentConfig: content, onUpdate: setContent })) : (_jsx(Text, { variant: "body-2", color: "hint", children: "Add fields on the Visual tab to see the form here." }))] }), _jsxs(Card, { className: b('column'), view: "outlined", children: [_jsx(Text, { variant: "subheader-2", className: b('title'), children: "Content JSON" }), _jsx("pre", { className: b('json'), children: JSON.stringify(content, null, 2) })] })] }));
+};
+//# sourceMappingURL=ContentTab.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContentTab.js","sourceRoot":"../../../../../src","sources":["form-builder-v2/components/ContentTab/ContentTab.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,IAAI,EAAE,IAAI,EAAC,MAAM,mBAAmB,CAAC;AAE7C,OAAO,aAAa,oDAAiD;AACrE,OAAO,EAAC,gBAAgB,EAAC,sCAAmC;AAC5D,OAAO,EAAC,cAAc,EAAC,mCAAgC;AACvD,OAAO,EAAC,eAAe,EAAC,0BAAuB;AAC/C,OAAO,EAAC,QAAQ,EAAC,gCAA6B;AAE9C,OAAO,kBAAkB,CAAC;AAE1B,MAAM,CAAC,GAAG,eAAe,CAAC,aAAa,CAAC,CAAC;AAEzC,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,EAAE;IAC3B,MAAM,EAAC,UAAU,EAAC,GAAG,cAAc,EAAE,CAAC;IACtC,MAAM,EAAC,OAAO,EAAE,UAAU,EAAC,GAAG,gBAAgB,EAAE,CAAC;IAEjD,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEvE,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,EAAE,aACf,MAAC,IAAI,IAAC,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAC,UAAU,aACzC,KAAC,IAAI,IAAC,OAAO,EAAC,aAAa,EAAC,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,0BAE1C,EACN,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACjB,KAAC,aAAa,IACV,WAAW,EAAE,MAAM,EACnB,aAAa,EAAE,OAAO,EACtB,QAAQ,EAAE,UAAU,GACtB,CACL,CAAC,CAAC,CAAC,CACA,KAAC,IAAI,IAAC,OAAO,EAAC,QAAQ,EAAC,KAAK,EAAC,MAAM,mEAE5B,CACV,IACE,EACP,MAAC,IAAI,IAAC,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAC,UAAU,aACzC,KAAC,IAAI,IAAC,OAAO,EAAC,aAAa,EAAC,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,6BAE1C,EACP,cAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YAAG,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,GAAO,IAChE,IACL,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {Card, Text} from '@gravity-ui/uikit';\n\nimport FormGenerator from '../../../form-generator-v2/FormGenerator';\nimport {useCanvasContent} from '../../CanvasContentContext';\nimport {useFormContext} from '../../hooks/FormContext';\nimport {formBuilderV2Cn} from '../../utils/cn';\nimport {stripIds} from '../../utils/stripIds';\n\nimport './ContentTab.scss';\n\nconst b = formBuilderV2Cn('content-tab');\n\nexport const ContentTab = () => {\n    const {formFields} = useFormContext();\n    const {content, setContent} = useCanvasContent();\n\n    const schema = React.useMemo(() => stripIds(formFields), [formFields]);\n\n    return (\n        <div className={b()}>\n            <Card className={b('column')} view=\"outlined\">\n                <Text variant=\"subheader-2\" className={b('title')}>\n                    Live form\n                </Text>\n                {schema.length > 0 ? (\n                    <FormGenerator\n                        blockConfig={schema}\n                        contentConfig={content}\n                        onUpdate={setContent}\n                    />\n                ) : (\n                    <Text variant=\"body-2\" color=\"hint\">\n                        Add fields on the Visual tab to see the form here.\n                    </Text>\n                )}\n            </Card>\n            <Card className={b('column')} view=\"outlined\">\n                <Text variant=\"subheader-2\" className={b('title')}>\n                    Content JSON\n                </Text>\n                <pre className={b('json')}>{JSON.stringify(content, null, 2)}</pre>\n            </Card>\n        </div>\n    );\n};\n"]}

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

@@ -0,0 +1,13 @@
+.pcformbuilderv2-drag-overlay {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--g-spacing-2);
+  padding: var(--g-spacing-2) var(--g-spacing-3);
+  color: var(--g-color-text-primary);
+  cursor: grabbing;
+}
+.pcformbuilderv2-drag-overlay__text {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}

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

@@ -0,0 +1,8 @@
+import type { BuilderFieldType, FormField } from "../../types.js";
+import './DragOverlayPreview.css';
+interface DragOverlayPreviewProps {
+    type: BuilderFieldType;
+    field?: FormField;
+}
+export declare const DragOverlayPreview: ({ type, field }: DragOverlayPreviewProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, Icon, Label, Text } from '@gravity-ui/uikit';
+import { formBuilderV2Cn } from "../../utils/cn.js";
+import { TYPE_ICONS, TYPE_LABELS } from "../../utils/fieldMeta.js";
+import './DragOverlayPreview.css';
+const b = formBuilderV2Cn('drag-overlay');
+const getFieldTitle = (f) => {
+    if (!f)
+        return '';
+    if ('title' in f)
+        return f.title ?? '';
+    if ('text' in f)
+        return f.text ?? '';
+    return '';
+};
+export const DragOverlayPreview = ({ type, field }) => {
+    const name = field && 'name' in field ? field.name : '';
+    const title = getFieldTitle(field);
+    return (_jsxs(Card, { className: b(), view: "raised", children: [_jsx(Icon, { data: TYPE_ICONS[type], size: 14 }), _jsxs("div", { className: b('text'), children: [_jsx(Text, { variant: "body-2", children: TYPE_LABELS[type] }), (name || title) && (_jsx(Label, { theme: "unknown", size: "s", children: name || title }))] })] }));
+};
+//# sourceMappingURL=DragOverlayPreview.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DragOverlayPreview.js","sourceRoot":"../../../../../src","sources":["form-builder-v2/components/DragOverlayPreview/DragOverlayPreview.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAC,MAAM,mBAAmB,CAAC;AAG1D,OAAO,EAAC,eAAe,EAAC,0BAAuB;AAC/C,OAAO,EAAC,UAAU,EAAE,WAAW,EAAC,iCAA8B;AAE9D,OAAO,0BAA0B,CAAC;AAElC,MAAM,CAAC,GAAG,eAAe,CAAC,cAAc,CAAC,CAAC;AAO1C,MAAM,aAAa,GAAG,CAAC,CAAwB,EAAU,EAAE;IACvD,IAAI,CAAC,CAAC;QAAE,OAAO,EAAE,CAAC;IAClB,IAAI,OAAO,IAAI,CAAC;QAAE,OAAO,CAAC,CAAC,KAAK,IAAI,EAAE,CAAC;IACvC,IAAI,MAAM,IAAI,CAAC;QAAE,OAAO,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC;IACrC,OAAO,EAAE,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EAAC,IAAI,EAAE,KAAK,EAA0B,EAAE,EAAE;IACzE,MAAM,IAAI,GAAG,KAAK,IAAI,MAAM,IAAI,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;IACxD,MAAM,KAAK,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;IAEnC,OAAO,CACH,MAAC,IAAI,IAAC,SAAS,EAAE,CAAC,EAAE,EAAE,IAAI,EAAC,QAAQ,aAC/B,KAAC,IAAI,IAAC,IAAI,EAAE,UAAU,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,EAAE,GAAI,EAC1C,eAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,aACrB,KAAC,IAAI,IAAC,OAAO,EAAC,QAAQ,YAAE,WAAW,CAAC,IAAI,CAAC,GAAQ,EAChD,CAAC,IAAI,IAAI,KAAK,CAAC,IAAI,CAChB,KAAC,KAAK,IAAC,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,GAAG,YAC1B,IAAI,IAAI,KAAK,GACV,CACX,IACC,IACH,CACV,CAAC;AACN,CAAC,CAAC","sourcesContent":["import {Card, Icon, Label, Text} from '@gravity-ui/uikit';\n\nimport type {BuilderFieldType, FormField} from '../../types';\nimport {formBuilderV2Cn} from '../../utils/cn';\nimport {TYPE_ICONS, TYPE_LABELS} from '../../utils/fieldMeta';\n\nimport './DragOverlayPreview.scss';\n\nconst b = formBuilderV2Cn('drag-overlay');\n\ninterface DragOverlayPreviewProps {\n    type: BuilderFieldType;\n    field?: FormField;\n}\n\nconst getFieldTitle = (f: FormField | undefined): string => {\n    if (!f) return '';\n    if ('title' in f) return f.title ?? '';\n    if ('text' in f) return f.text ?? '';\n    return '';\n};\n\nexport const DragOverlayPreview = ({type, field}: DragOverlayPreviewProps) => {\n    const name = field && 'name' in field ? field.name : '';\n    const title = getFieldTitle(field);\n\n    return (\n        <Card className={b()} view=\"raised\">\n            <Icon data={TYPE_ICONS[type]} size={14} />\n            <div className={b('text')}>\n                <Text variant=\"body-2\">{TYPE_LABELS[type]}</Text>\n                {(name || title) && (\n                    <Label theme=\"unknown\" size=\"s\">\n                        {name || title}\n                    </Label>\n                )}\n            </div>\n        </Card>\n    );\n};\n"]}

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

@@ -0,0 +1,30 @@
+.pcformbuilderv2-field-settings__row {
+  display: grid;
+  grid-template-columns: 100px 1fr;
+  align-items: start;
+  gap: var(--g-spacing-2);
+}
+.pcformbuilderv2-field-settings__row-label {
+  padding-top: 6px;
+  font-size: var(--g-text-body-1-font-size);
+  line-height: 1.4;
+  color: var(--g-color-text-secondary);
+}
+.pcformbuilderv2-field-settings__options {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: var(--g-spacing-2);
+  border: 1px solid var(--g-color-line-generic);
+  border-radius: var(--g-border-radius-m);
+}
+.pcformbuilderv2-field-settings__option-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
+  gap: 6px;
+  align-items: center;
+}
+.pcformbuilderv2-field-settings__add-option {
+  align-self: flex-start;
+  margin-top: var(--g-spacing-1);
+}

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

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

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

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { TextInput } from '@gravity-ui/uikit';
+import { useFormContext } from "../../hooks/FormContext.js";
+import { collectNames } from "../../utils/fieldNames.js";
+import { WhenEditor } from "../WhenEditor/WhenEditor.js";
+import { ColorInputSettings } from "./fields/ColorInputSettings.js";
+import { OptionsSettings } from "./fields/OptionsSettings.js";
+import { Row } from "./fields/Row.js";
+import { SectionSettings } from "./fields/SectionSettings.js";
+import { SwitchSettings } from "./fields/SwitchSettings.js";
+import { TextFieldSettings } from "./fields/TextFieldSettings.js";
+import { TextSettings } from "./fields/TextSettings.js";
+import './FieldSettings.css';
+export const FieldSettings = ({ field }) => {
+    const { updateField, formFields } = useFormContext();
+    const availableFields = React.useMemo(() => {
+        const all = Array.from(collectNames(formFields));
+        if (field.type === 'section' || field.type === 'text')
+            return all;
+        return all.filter((n) => n !== field.name);
+    }, [formFields, field]);
+    const whenEditorSection = (_jsx(Row, { label: "Visible when", children: _jsx(WhenEditor, { when: field.when, availableFields: availableFields, onChange: (next) => updateField(field.id, { when: next }) }) }));
+    const commonRows = (_jsxs(React.Fragment, { children: [_jsx(Row, { label: "Title", children: _jsx(TextInput, { value: 'title' in field ? (field.title ?? '') : '', onUpdate: (value) => updateField(field.id, { title: value }), placeholder: "Label shown above the field" }) }), _jsx(Row, { label: "Name", children: _jsx(TextInput, { value: 'name' in field ? (field.name ?? '') : '', onUpdate: (value) => updateField(field.id, { name: value }), placeholder: "Path in content object" }) })] }));
+    if (field.type === 'section') {
+        return (_jsx(SectionSettings, { field: field, updateField: updateField, whenEditorSection: whenEditorSection }));
+    }
+    if (field.type === 'text') {
+        return (_jsx(TextSettings, { field: field, updateField: updateField, whenEditorSection: whenEditorSection }));
+    }
+    if (field.type === 'textInput' || field.type === 'textArea') {
+        return (_jsx(TextFieldSettings, { field: field, updateField: updateField, commonRows: commonRows, whenEditorSection: whenEditorSection }));
+    }
+    if (field.type === 'switch') {
+        return (_jsx(SwitchSettings, { field: field, updateField: updateField, commonRows: commonRows, whenEditorSection: whenEditorSection }));
+    }
+    if (field.type === 'colorInput') {
+        return (_jsx(ColorInputSettings, { field: field, updateField: updateField, commonRows: commonRows, whenEditorSection: whenEditorSection }));
+    }
+    if (field.type === 'select' || field.type === 'segmentedRadioGroup') {
+        return (_jsx(OptionsSettings, { field: field, updateField: updateField, commonRows: commonRows, whenEditorSection: whenEditorSection }));
+    }
+    return null;
+};
+//# sourceMappingURL=FieldSettings.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FieldSettings.js","sourceRoot":"../../../../../src","sources":["form-builder-v2/components/FieldSettings/FieldSettings.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {TextInput} from '@gravity-ui/uikit';\n\nimport type {When} from '../../../form-generator-v2/types';\nimport {useFormContext} from '../../hooks/FormContext';\nimport {FormField} from '../../types';\nimport {collectNames} from '../../utils/fieldNames';\nimport {WhenEditor} from '../WhenEditor/WhenEditor';\n\nimport {ColorInputSettings} from './fields/ColorInputSettings';\nimport {OptionsSettings} from './fields/OptionsSettings';\nimport {Row} from './fields/Row';\nimport {SectionSettings} from './fields/SectionSettings';\nimport {SwitchSettings} from './fields/SwitchSettings';\nimport {TextFieldSettings} from './fields/TextFieldSettings';\nimport {TextSettings} from './fields/TextSettings';\n\nimport './FieldSettings.scss';\n\ninterface FieldSettingsProps {\n    field: FormField;\n}\n\nexport const FieldSettings = ({field}: FieldSettingsProps) => {\n    const {updateField, formFields} = useFormContext();\n\n    const availableFields = React.useMemo(() => {\n        const all = Array.from(collectNames(formFields));\n        if (field.type === 'section' || field.type === 'text') return all;\n        return all.filter((n) => n !== field.name);\n    }, [formFields, field]);\n\n    const whenEditorSection = (\n        <Row label=\"Visible when\">\n            <WhenEditor\n                when={field.when}\n                availableFields={availableFields}\n                onChange={(next: When | undefined) => updateField(field.id, {when: next})}\n            />\n        </Row>\n    );\n\n    const commonRows = (\n        <React.Fragment>\n            <Row label=\"Title\">\n                <TextInput\n                    value={'title' in field ? (field.title ?? '') : ''}\n                    onUpdate={(value) => updateField(field.id, {title: value})}\n                    placeholder=\"Label shown above the field\"\n                />\n            </Row>\n            <Row label=\"Name\">\n                <TextInput\n                    value={'name' in field ? (field.name ?? '') : ''}\n                    onUpdate={(value) => updateField(field.id, {name: value})}\n                    placeholder=\"Path in content object\"\n                />\n            </Row>\n        </React.Fragment>\n    );\n\n    if (field.type === 'section') {\n        return (\n            <SectionSettings\n                field={field}\n                updateField={updateField}\n                whenEditorSection={whenEditorSection}\n            />\n        );\n    }\n\n    if (field.type === 'text') {\n        return (\n            <TextSettings\n                field={field}\n                updateField={updateField}\n                whenEditorSection={whenEditorSection}\n            />\n        );\n    }\n\n    if (field.type === 'textInput' || field.type === 'textArea') {\n        return (\n            <TextFieldSettings\n                field={field}\n                updateField={updateField}\n                commonRows={commonRows}\n                whenEditorSection={whenEditorSection}\n            />\n        );\n    }\n\n    if (field.type === 'switch') {\n        return (\n            <SwitchSettings\n                field={field}\n                updateField={updateField}\n                commonRows={commonRows}\n                whenEditorSection={whenEditorSection}\n            />\n        );\n    }\n\n    if (field.type === 'colorInput') {\n        return (\n            <ColorInputSettings\n                field={field}\n                updateField={updateField}\n                commonRows={commonRows}\n                whenEditorSection={whenEditorSection}\n            />\n        );\n    }\n\n    if (field.type === 'select' || field.type === 'segmentedRadioGroup') {\n        return (\n            <OptionsSettings\n                field={field}\n                updateField={updateField}\n                commonRows={commonRows}\n                whenEditorSection={whenEditorSection}\n            />\n        );\n    }\n\n    return null;\n};\n"]}

package/build/esm/form-builder-v2/components/FieldSettings/fields/ColorInputSettings.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { BuilderLeafField, FieldUpdate } from "../../../types.js";
+interface ColorInputSettingsProps {
+    field: BuilderLeafField & {
+        type: 'colorInput';
+    };
+    updateField: (id: string, updates: FieldUpdate) => void;
+    commonRows: React.ReactNode;
+    whenEditorSection: React.ReactNode;
+}
+export declare const ColorInputSettings: ({ field, updateField, commonRows, whenEditorSection, }: ColorInputSettingsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/esm/form-builder-v2/components/FieldSettings/fields/ColorInputSettings.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { TextInput } from '@gravity-ui/uikit';
+import { Row } from "./Row.js";
+export const ColorInputSettings = ({ field, updateField, commonRows, whenEditorSection, }) => (_jsxs(React.Fragment, { children: [commonRows, _jsx(Row, { label: "Default", children: _jsx(TextInput, { value: field.defaultValue ?? '', onUpdate: (value) => updateField(field.id, { defaultValue: value || undefined }), placeholder: "#000000" }) }), whenEditorSection] }));
+//# sourceMappingURL=ColorInputSettings.js.map

package/build/esm/form-builder-v2/components/FieldSettings/fields/ColorInputSettings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorInputSettings.js","sourceRoot":"../../../../../../src","sources":["form-builder-v2/components/FieldSettings/fields/ColorInputSettings.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,SAAS,EAAC,MAAM,mBAAmB,CAAC;AAI5C,OAAO,EAAC,GAAG,EAAC,iBAAc;AAS1B,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EAC/B,KAAK,EACL,WAAW,EACX,UAAU,EACV,iBAAiB,GACK,EAAE,EAAE,CAAC,CAC3B,MAAC,KAAK,CAAC,QAAQ,eACV,UAAU,EACX,KAAC,GAAG,IAAC,KAAK,EAAC,SAAS,YAChB,KAAC,SAAS,IACN,KAAK,EAAE,KAAK,CAAC,YAAY,IAAI,EAAE,EAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,EAAE,EAAC,YAAY,EAAE,KAAK,IAAI,SAAS,EAAC,CAAC,EAC9E,WAAW,EAAC,SAAS,GACvB,GACA,EACL,iBAAiB,IACL,CACpB,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {TextInput} from '@gravity-ui/uikit';\n\nimport type {BuilderLeafField, FieldUpdate} from '../../../types';\n\nimport {Row} from './Row';\n\ninterface ColorInputSettingsProps {\n    field: BuilderLeafField & {type: 'colorInput'};\n    updateField: (id: string, updates: FieldUpdate) => void;\n    commonRows: React.ReactNode;\n    whenEditorSection: React.ReactNode;\n}\n\nexport const ColorInputSettings = ({\n    field,\n    updateField,\n    commonRows,\n    whenEditorSection,\n}: ColorInputSettingsProps) => (\n    <React.Fragment>\n        {commonRows}\n        <Row label=\"Default\">\n            <TextInput\n                value={field.defaultValue ?? ''}\n                onUpdate={(value) => updateField(field.id, {defaultValue: value || undefined})}\n                placeholder=\"#000000\"\n            />\n        </Row>\n        {whenEditorSection}\n    </React.Fragment>\n);\n"]}

package/build/esm/form-builder-v2/components/FieldSettings/fields/OptionsSettings.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { BuilderLeafField, FieldUpdate } from "../../../types.js";
+interface OptionsSettingsProps {
+    field: BuilderLeafField & {
+        type: 'select' | 'segmentedRadioGroup';
+    };
+    updateField: (id: string, updates: FieldUpdate) => void;
+    commonRows: React.ReactNode;
+    whenEditorSection: React.ReactNode;
+}
+export declare const OptionsSettings: ({ field, updateField, commonRows, whenEditorSection, }: OptionsSettingsProps) => import("react/jsx-runtime").JSX.Element;
+export {};