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

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

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

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Card, Text } from '@gravity-ui/uikit';
+import { FieldSettings } from "../FieldSettings/FieldSettings.js";
+import { useFormContext } from "../../hooks/FormContext.js";
+import { formBuilderV2Cn } from "../../utils/cn.js";
+import { TYPE_LABELS } from "../../utils/fieldMeta.js";
+import { findFieldById } from "../../utils/fieldTree.js";
+import './Inspector.css';
+const b = formBuilderV2Cn('inspector');
+export const Inspector = () => {
+    const { formFields, selectedFieldId } = useFormContext();
+    const selected = React.useMemo(() => (selectedFieldId ? findFieldById(formFields, selectedFieldId) : null), [formFields, selectedFieldId]);
+    return (_jsx(Card, { className: b(), view: "outlined", children: selected ? (_jsxs(React.Fragment, { children: [_jsxs("div", { className: b('header'), children: [_jsx(Text, { variant: "subheader-2", children: TYPE_LABELS[selected.type] }), 'name' in selected && selected.name ? (_jsx(Text, { variant: "caption-1", color: "hint", children: selected.name })) : null] }), _jsx("div", { className: b('body'), children: _jsx(FieldSettings, { field: selected }) })] })) : (_jsx("div", { className: b('empty'), children: _jsx(Text, { variant: "body-2", color: "hint", children: "Select a field on the canvas to edit its settings." }) })) }));
+};
+//# sourceMappingURL=Inspector.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Inspector.js","sourceRoot":"../../../../../src","sources":["form-builder-v2/components/Inspector/Inspector.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,IAAI,EAAE,IAAI,EAAC,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAC,aAAa,EAAC,0CAAqD;AAC3E,OAAO,EAAC,cAAc,EAAC,mCAAgC;AACvD,OAAO,EAAC,eAAe,EAAC,0BAAuB;AAC/C,OAAO,EAAC,WAAW,EAAC,iCAA8B;AAClD,OAAO,EAAC,aAAa,EAAC,iCAA8B;AAEpD,OAAO,iBAAiB,CAAC;AAEzB,MAAM,CAAC,GAAG,eAAe,CAAC,WAAW,CAAC,CAAC;AAEvC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE;IAC1B,MAAM,EAAC,UAAU,EAAE,eAAe,EAAC,GAAG,cAAc,EAAE,CAAC;IAEvD,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAC1B,GAAG,EAAE,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,aAAa,CAAC,UAAU,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAC3E,CAAC,UAAU,EAAE,eAAe,CAAC,CAChC,CAAC;IAEF,OAAO,CACH,KAAC,IAAI,IAAC,SAAS,EAAE,CAAC,EAAE,EAAE,IAAI,EAAC,UAAU,YAChC,QAAQ,CAAC,CAAC,CAAC,CACR,MAAC,KAAK,CAAC,QAAQ,eACX,eAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,aACvB,KAAC,IAAI,IAAC,OAAO,EAAC,aAAa,YAAE,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAQ,EAC9D,MAAM,IAAI,QAAQ,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CACnC,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,YACjC,QAAQ,CAAC,IAAI,GACX,CACV,CAAC,CAAC,CAAC,IAAI,IACN,EACN,cAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YACrB,KAAC,aAAa,IAAC,KAAK,EAAE,QAAQ,GAAI,GAChC,IACO,CACpB,CAAC,CAAC,CAAC,CACA,cAAK,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,YACtB,KAAC,IAAI,IAAC,OAAO,EAAC,QAAQ,EAAC,KAAK,EAAC,MAAM,mEAE5B,GACL,CACT,GACE,CACV,CAAC;AACN,CAAC,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {Card, Text} from '@gravity-ui/uikit';\n\nimport {FieldSettings} from '../../components/FieldSettings/FieldSettings';\nimport {useFormContext} from '../../hooks/FormContext';\nimport {formBuilderV2Cn} from '../../utils/cn';\nimport {TYPE_LABELS} from '../../utils/fieldMeta';\nimport {findFieldById} from '../../utils/fieldTree';\n\nimport './Inspector.scss';\n\nconst b = formBuilderV2Cn('inspector');\n\nexport const Inspector = () => {\n    const {formFields, selectedFieldId} = useFormContext();\n\n    const selected = React.useMemo(\n        () => (selectedFieldId ? findFieldById(formFields, selectedFieldId) : null),\n        [formFields, selectedFieldId],\n    );\n\n    return (\n        <Card className={b()} view=\"outlined\">\n            {selected ? (\n                <React.Fragment>\n                    <div className={b('header')}>\n                        <Text variant=\"subheader-2\">{TYPE_LABELS[selected.type]}</Text>\n                        {'name' in selected && selected.name ? (\n                            <Text variant=\"caption-1\" color=\"hint\">\n                                {selected.name}\n                            </Text>\n                        ) : null}\n                    </div>\n                    <div className={b('body')}>\n                        <FieldSettings field={selected} />\n                    </div>\n                </React.Fragment>\n            ) : (\n                <div className={b('empty')}>\n                    <Text variant=\"body-2\" color=\"hint\">\n                        Select a field on the canvas to edit its settings.\n                    </Text>\n                </div>\n            )}\n        </Card>\n    );\n};\n"]}

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

@@ -0,0 +1,56 @@
+.pcformbuilderv2-palette {
+  padding: var(--g-spacing-3);
+}
+.pcformbuilderv2-palette__header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-spacing-half);
+  margin-bottom: 10px;
+}
+.pcformbuilderv2-palette__items {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 6px;
+}
+.pcformbuilderv2-palette__tile {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  aspect-ratio: 1;
+  width: 100%;
+  height: auto;
+  padding: var(--g-spacing-2);
+  border: 1px solid var(--g-color-line-generic);
+  border-radius: var(--g-border-radius-m);
+  background: transparent;
+  color: var(--g-color-text-primary);
+  cursor: grab;
+  transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
+}
+.pcformbuilderv2-palette__tile .g-button__text {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  width: 100%;
+}
+.pcformbuilderv2-palette__tile:hover {
+  background-color: var(--g-color-base-simple-hover);
+  border-color: var(--g-color-line-generic-hover);
+}
+.pcformbuilderv2-palette__tile:active {
+  cursor: grabbing;
+  background-color: var(--g-color-base-simple-hover-solid);
+}
+.pcformbuilderv2-palette__tile_dragging {
+  opacity: 0.5;
+}
+.pcformbuilderv2-palette__tile-label {
+  font-size: var(--g-text-caption-2-font-size);
+  line-height: 1.2;
+  text-align: center;
+  color: var(--g-color-text-secondary);
+}

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

@@ -0,0 +1,5 @@
+import type { PaletteDragData } from "../../utils/dragData.js";
+import './Palette.css';
+export type { PaletteDragData };
+export declare const PALETTE_DRAGGABLE_PREFIX = "palette:";
+export declare const Palette: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { PointerActivationConstraints, PointerSensor } from '@dnd-kit/dom';
+import { useDraggable } from '@dnd-kit/react';
+import { Button, Card, Icon, Text } from '@gravity-ui/uikit';
+import { useFormContext } from "../../hooks/FormContext.js";
+import { formBuilderV2Cn } from "../../utils/cn.js";
+import { FIELD_TYPES, PALETTE_LABELS, TYPE_ICONS } from "../../utils/fieldMeta.js";
+import './Palette.css';
+const b = formBuilderV2Cn('palette');
+export const PALETTE_DRAGGABLE_PREFIX = 'palette:';
+const findContainerId = (fields, selectedId, parentSectionId = null) => {
+    if (!selectedId)
+        return null;
+    for (const field of fields) {
+        if (field.id === selectedId) {
+            return field.type === 'section' ? field.id : parentSectionId;
+        }
+        if (field.type === 'section') {
+            const nested = findContainerId(field.fields, selectedId, field.id);
+            if (nested !== undefined)
+                return nested;
+        }
+    }
+    return undefined;
+};
+const DRAG_DISTANCE = 4;
+const paletteSensors = [
+    PointerSensor.configure({
+        activationConstraints: [new PointerActivationConstraints.Distance({ value: DRAG_DISTANCE })],
+    }),
+];
+const PaletteTile = ({ type, label, icon, onClick }) => {
+    const { ref, handleRef, isDragging } = useDraggable({
+        id: `${PALETTE_DRAGGABLE_PREFIX}${type}`,
+        data: { kind: 'palette', type },
+        sensors: paletteSensors,
+    });
+    const setRefs = React.useCallback((element) => {
+        ref(element);
+        handleRef(element);
+    }, [ref, handleRef]);
+    return (_jsxs(Button, { ref: setRefs, view: "flat", size: "m", className: b('tile', { dragging: isDragging }), onClick: onClick, title: label, children: [_jsx(Icon, { data: icon, size: 18 }), _jsx("span", { className: b('tile-label'), children: label })] }));
+};
+export const Palette = () => {
+    const { addField, addFieldToSection, formFields, selectedFieldId } = useFormContext();
+    const containerId = React.useMemo(() => findContainerId(formFields, selectedFieldId), [formFields, selectedFieldId]);
+    const handleAdd = (type) => {
+        if (containerId) {
+            addFieldToSection(containerId, type);
+        }
+        else {
+            addField(type);
+        }
+    };
+    return (_jsxs(Card, { className: b(), view: "outlined", children: [_jsxs("div", { className: b('header'), children: [_jsx(Text, { variant: "subheader-2", children: "Add field" }), _jsx(Text, { variant: "caption-1", color: "hint", children: "Click to add, or drag onto the canvas to drop at a specific position." })] }), _jsx("div", { className: b('items'), children: FIELD_TYPES.map((type) => (_jsx(PaletteTile, { type: type, label: PALETTE_LABELS[type], icon: TYPE_ICONS[type], onClick: () => handleAdd(type) }, type))) })] }));
+};
+//# sourceMappingURL=Palette.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Palette.js","sourceRoot":"../../../../../src","sources":["form-builder-v2/components/Palette/Palette.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {PointerActivationConstraints, PointerSensor} from '@dnd-kit/dom';\nimport {useDraggable} from '@dnd-kit/react';\nimport {Button, Card, Icon, Text} from '@gravity-ui/uikit';\nimport type {IconData} from '@gravity-ui/uikit';\n\nimport {useFormContext} from '../../hooks/FormContext';\nimport {BuilderFieldType, FormField} from '../../types';\nimport {formBuilderV2Cn} from '../../utils/cn';\nimport type {PaletteDragData} from '../../utils/dragData';\nimport {FIELD_TYPES, PALETTE_LABELS, TYPE_ICONS} from '../../utils/fieldMeta';\n\nimport './Palette.scss';\n\nexport type {PaletteDragData};\n\nconst b = formBuilderV2Cn('palette');\n\nexport const PALETTE_DRAGGABLE_PREFIX = 'palette:';\n\nconst findContainerId = (\n    fields: FormField[],\n    selectedId: string | null,\n    parentSectionId: string | null = null,\n): string | null | undefined => {\n    if (!selectedId) return null;\n    for (const field of fields) {\n        if (field.id === selectedId) {\n            return field.type === 'section' ? field.id : parentSectionId;\n        }\n        if (field.type === 'section') {\n            const nested = findContainerId(field.fields, selectedId, field.id);\n            if (nested !== undefined) return nested;\n        }\n    }\n    return undefined;\n};\n\ninterface PaletteTileProps {\n    type: BuilderFieldType;\n    label: string;\n    icon: IconData;\n    onClick: () => void;\n}\n\nconst DRAG_DISTANCE = 4;\n\nconst paletteSensors = [\n    PointerSensor.configure({\n        activationConstraints: [new PointerActivationConstraints.Distance({value: DRAG_DISTANCE})],\n    }),\n];\n\nconst PaletteTile = ({type, label, icon, onClick}: PaletteTileProps) => {\n    const {ref, handleRef, isDragging} = useDraggable({\n        id: `${PALETTE_DRAGGABLE_PREFIX}${type}`,\n        data: {kind: 'palette', type},\n        sensors: paletteSensors,\n    });\n\n    const setRefs = React.useCallback(\n        (element: HTMLButtonElement | null) => {\n            ref(element);\n            handleRef(element);\n        },\n        [ref, handleRef],\n    );\n\n    return (\n        <Button\n            ref={setRefs}\n            view=\"flat\"\n            size=\"m\"\n            className={b('tile', {dragging: isDragging})}\n            onClick={onClick}\n            title={label}\n        >\n            <Icon data={icon} size={18} />\n            <span className={b('tile-label')}>{label}</span>\n        </Button>\n    );\n};\n\nexport const Palette = () => {\n    const {addField, addFieldToSection, formFields, selectedFieldId} = useFormContext();\n\n    const containerId = React.useMemo(\n        () => findContainerId(formFields, selectedFieldId),\n        [formFields, selectedFieldId],\n    );\n\n    const handleAdd = (type: BuilderFieldType) => {\n        if (containerId) {\n            addFieldToSection(containerId, type);\n        } else {\n            addField(type);\n        }\n    };\n\n    return (\n        <Card className={b()} view=\"outlined\">\n            <div className={b('header')}>\n                <Text variant=\"subheader-2\">Add field</Text>\n                <Text variant=\"caption-1\" color=\"hint\">\n                    Click to add, or drag onto the canvas to drop at a specific position.\n                </Text>\n            </div>\n            <div className={b('items')}>\n                {FIELD_TYPES.map((type) => (\n                    <PaletteTile\n                        key={type}\n                        type={type}\n                        label={PALETTE_LABELS[type]}\n                        icon={TYPE_ICONS[type]}\n                        onClick={() => handleAdd(type)}\n                    />\n                ))}\n            </div>\n        </Card>\n    );\n};\n"]}

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

@@ -0,0 +1,29 @@
+.pcformbuilderv2-resize-handle {
+  width: var(--g-spacing-2);
+  align-self: stretch;
+  cursor: col-resize;
+  position: relative;
+  user-select: none;
+}
+.pcformbuilderv2-resize-handle::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 2px;
+  height: 40%;
+  background: var(--g-color-line-generic);
+  opacity: 0;
+  border-radius: 2px;
+  transition: opacity 0.12s ease, background-color 0.12s ease, height 0.12s ease;
+}
+.pcformbuilderv2-resize-handle:hover::after {
+  opacity: 1;
+  height: 60%;
+}
+.pcformbuilderv2-resize-handle_dragging::after {
+  opacity: 1;
+  height: 100%;
+  background: var(--g-color-line-brand);
+}

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

@@ -0,0 +1,10 @@
+import './ResizeHandle.css';
+interface ResizeHandleProps {
+    value: number;
+    min: number;
+    max: number;
+    direction: 'left' | 'right';
+    onChange: (next: number) => void;
+}
+export declare const ResizeHandle: ({ value, min, max, direction, onChange }: ResizeHandleProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,94 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { formBuilderV2Cn } from "../../utils/cn.js";
+import './ResizeHandle.css';
+const b = formBuilderV2Cn('resize-handle');
+export const ResizeHandle = ({ value, min, max, direction, onChange }) => {
+    const [dragging, setDragging] = React.useState(false);
+    const onChangeRef = React.useRef(onChange);
+    onChangeRef.current = onChange;
+    const cleanupRef = React.useRef(null);
+    const mountedRef = React.useRef(true);
+    React.useEffect(() => {
+        mountedRef.current = true;
+        return () => {
+            mountedRef.current = false;
+            cleanupRef.current?.();
+        };
+    }, []);
+    const onMouseDown = React.useCallback((event) => {
+        event.preventDefault();
+        const startX = event.clientX;
+        const startValue = value;
+        setDragging(true);
+        let rafId = null;
+        let pendingValue = startValue;
+        const controller = new AbortController();
+        const { signal } = controller;
+        const flush = () => {
+            rafId = null;
+            onChangeRef.current(pendingValue);
+        };
+        const cleanup = () => {
+            if (signal.aborted)
+                return;
+            controller.abort();
+            if (rafId !== null) {
+                cancelAnimationFrame(rafId);
+                rafId = null;
+            }
+            document.body.style.cursor = '';
+            document.body.style.userSelect = '';
+            cleanupRef.current = null;
+        };
+        const handleMove = (moveEvent) => {
+            const deltaRaw = moveEvent.clientX - startX;
+            const delta = direction === 'left' ? deltaRaw : -deltaRaw;
+            pendingValue = Math.max(min, Math.min(max, startValue + delta));
+            if (rafId === null) {
+                rafId = requestAnimationFrame(flush);
+            }
+        };
+        const handleUp = () => {
+            if (rafId !== null) {
+                cancelAnimationFrame(rafId);
+                rafId = null;
+                onChangeRef.current(pendingValue);
+            }
+            if (mountedRef.current) {
+                setDragging(false);
+            }
+            cleanup();
+        };
+        document.body.style.cursor = 'col-resize';
+        document.body.style.userSelect = 'none';
+        document.addEventListener('mousemove', handleMove, { signal });
+        document.addEventListener('mouseup', handleUp, { signal });
+        cleanupRef.current = cleanup;
+    }, [direction, max, min, value]);
+    const onKeyDown = React.useCallback((event) => {
+        const STEP = event.shiftKey ? 32 : 8;
+        const sign = direction === 'left' ? 1 : -1;
+        let next = null;
+        switch (event.key) {
+            case 'ArrowLeft':
+                next = value + sign * -STEP;
+                break;
+            case 'ArrowRight':
+                next = value + sign * STEP;
+                break;
+            case 'Home':
+                next = direction === 'left' ? min : max;
+                break;
+            case 'End':
+                next = direction === 'left' ? max : min;
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        onChangeRef.current(Math.max(min, Math.min(max, next)));
+    }, [direction, max, min, value]);
+    return (_jsx("div", { className: b({ dragging }), onMouseDown: onMouseDown, onKeyDown: onKeyDown, role: "slider", "aria-orientation": "vertical", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, "aria-label": direction === 'left' ? 'Resize palette' : 'Resize inspector', tabIndex: 0 }));
+};
+//# sourceMappingURL=ResizeHandle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ResizeHandle.js","sourceRoot":"../../../../../src","sources":["form-builder-v2/components/ResizeHandle/ResizeHandle.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {formBuilderV2Cn} from '../../utils/cn';\n\nimport './ResizeHandle.scss';\n\nconst b = formBuilderV2Cn('resize-handle');\n\ninterface ResizeHandleProps {\n    value: number;\n    min: number;\n    max: number;\n    direction: 'left' | 'right';\n    onChange: (next: number) => void;\n}\n\nexport const ResizeHandle = ({value, min, max, direction, onChange}: ResizeHandleProps) => {\n    const [dragging, setDragging] = React.useState(false);\n    const onChangeRef = React.useRef(onChange);\n    onChangeRef.current = onChange;\n\n    const cleanupRef = React.useRef<(() => void) | null>(null);\n    const mountedRef = React.useRef(true);\n\n    React.useEffect(() => {\n        mountedRef.current = true;\n        return () => {\n            mountedRef.current = false;\n            cleanupRef.current?.();\n        };\n    }, []);\n\n    const onMouseDown = React.useCallback(\n        (event: React.MouseEvent) => {\n            event.preventDefault();\n            const startX = event.clientX;\n            const startValue = value;\n            setDragging(true);\n\n            let rafId: number | null = null;\n            let pendingValue = startValue;\n            const controller = new AbortController();\n            const {signal} = controller;\n\n            const flush = () => {\n                rafId = null;\n                onChangeRef.current(pendingValue);\n            };\n\n            const cleanup = () => {\n                if (signal.aborted) return;\n                controller.abort();\n                if (rafId !== null) {\n                    cancelAnimationFrame(rafId);\n                    rafId = null;\n                }\n                document.body.style.cursor = '';\n                document.body.style.userSelect = '';\n                cleanupRef.current = null;\n            };\n\n            const handleMove = (moveEvent: MouseEvent) => {\n                const deltaRaw = moveEvent.clientX - startX;\n                const delta = direction === 'left' ? deltaRaw : -deltaRaw;\n                pendingValue = Math.max(min, Math.min(max, startValue + delta));\n                if (rafId === null) {\n                    rafId = requestAnimationFrame(flush);\n                }\n            };\n\n            const handleUp = () => {\n                if (rafId !== null) {\n                    cancelAnimationFrame(rafId);\n                    rafId = null;\n                    onChangeRef.current(pendingValue);\n                }\n                if (mountedRef.current) {\n                    setDragging(false);\n                }\n                cleanup();\n            };\n\n            document.body.style.cursor = 'col-resize';\n            document.body.style.userSelect = 'none';\n\n            document.addEventListener('mousemove', handleMove, {signal});\n            document.addEventListener('mouseup', handleUp, {signal});\n\n            cleanupRef.current = cleanup;\n        },\n        [direction, max, min, value],\n    );\n\n    const onKeyDown = React.useCallback(\n        (event: React.KeyboardEvent<HTMLDivElement>) => {\n            const STEP = event.shiftKey ? 32 : 8;\n            const sign = direction === 'left' ? 1 : -1;\n            let next: number | null = null;\n            switch (event.key) {\n                case 'ArrowLeft':\n                    next = value + sign * -STEP;\n                    break;\n                case 'ArrowRight':\n                    next = value + sign * STEP;\n                    break;\n                case 'Home':\n                    next = direction === 'left' ? min : max;\n                    break;\n                case 'End':\n                    next = direction === 'left' ? max : min;\n                    break;\n                default:\n                    return;\n            }\n            event.preventDefault();\n            onChangeRef.current(Math.max(min, Math.min(max, next)));\n        },\n        [direction, max, min, value],\n    );\n\n    return (\n        <div\n            className={b({dragging})}\n            onMouseDown={onMouseDown}\n            onKeyDown={onKeyDown}\n            role=\"slider\"\n            aria-orientation=\"vertical\"\n            aria-valuemin={min}\n            aria-valuemax={max}\n            aria-valuenow={value}\n            aria-label={direction === 'left' ? 'Resize palette' : 'Resize inspector'}\n            tabIndex={0}\n        />\n    );\n};\n"]}

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

@@ -0,0 +1,49 @@
+.pcformbuilderv2-schema-popup {
+  width: min(560px, 90vw);
+  padding: var(--g-spacing-4);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.pcformbuilderv2-schema-popup__header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-spacing-half);
+}
+.pcformbuilderv2-schema-popup__textarea {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  min-height: 400px;
+  max-height: min(70vh, 700px);
+  padding: var(--g-spacing-3);
+  background: var(--g-color-base-generic);
+  border: 1px solid var(--g-color-line-generic);
+  border-radius: var(--g-border-radius-m);
+  font-family: monospace;
+  font-size: 12px;
+  line-height: 1.4;
+  color: var(--g-color-text-primary);
+  white-space: pre;
+  overflow: auto;
+  resize: vertical;
+  outline: none;
+  transition: border-color 0.15s ease;
+  tab-size: 2;
+}
+.pcformbuilderv2-schema-popup__textarea:focus {
+  border-color: var(--g-color-line-brand);
+}
+.pcformbuilderv2-schema-popup__textarea_error {
+  border-color: var(--g-color-line-danger);
+}
+.pcformbuilderv2-schema-popup__error-message {
+  padding: var(--g-spacing-2) var(--g-spacing-3);
+  background: var(--g-color-base-danger-light);
+  border-radius: var(--g-border-radius-m);
+}
+.pcformbuilderv2-schema-popup__actions {
+  display: flex;
+  gap: var(--g-spacing-2);
+  justify-content: flex-end;
+}

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

@@ -0,0 +1,12 @@
+import type { Fields } from "../../../form-generator-v2/types.js";
+import type { FormField } from "../../types.js";
+import './SchemaPopup.css';
+interface SchemaPopupProps {
+    schema: Fields;
+    onApply: (fields: FormField[]) => void;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    anchorElement: HTMLElement | null;
+}
+export declare const SchemaPopup: ({ schema, onApply, open, onOpenChange, anchorElement, }: SchemaPopupProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Button, Card, Popup, Text } from '@gravity-ui/uikit';
+import { formBuilderV2Cn } from "../../utils/cn.js";
+import { parseSchema } from "../../utils/parseSchema.js";
+import './SchemaPopup.css';
+const b = formBuilderV2Cn('schema-popup');
+const stringify = (schema) => JSON.stringify(schema, null, 2);
+export const SchemaPopup = ({ schema, onApply, open, onOpenChange, anchorElement, }) => {
+    const textareaRef = React.useRef(null);
+    const copyTimeoutRef = React.useRef(null);
+    const [draft, setDraft] = React.useState(() => stringify(schema));
+    const [error, setError] = React.useState(null);
+    const [copied, setCopied] = React.useState(false);
+    const [isFocused, setIsFocused] = React.useState(false);
+    React.useEffect(() => {
+        if (!isFocused) {
+            setDraft(stringify(schema));
+            setError(null);
+        }
+    }, [schema, isFocused]);
+    React.useEffect(() => () => {
+        if (copyTimeoutRef.current)
+            clearTimeout(copyTimeoutRef.current);
+    }, []);
+    const applyDraft = (value) => {
+        setDraft(value);
+        const result = parseSchema(value);
+        if (result.ok) {
+            setError(null);
+            onApply(result.fields);
+        }
+        else {
+            setError(result.error);
+        }
+    };
+    const replaceSelection = (insert, caretOffset) => {
+        const t = textareaRef.current;
+        if (!t)
+            return;
+        const { selectionStart, selectionEnd } = t;
+        const next = draft.slice(0, selectionStart) + insert + draft.slice(selectionEnd);
+        const nextCaret = selectionStart + caretOffset;
+        applyDraft(next);
+        requestAnimationFrame(() => {
+            t.selectionStart = nextCaret;
+            t.selectionEnd = nextCaret;
+        });
+    };
+    const handleKeyDown = (event) => {
+        if (event.key === 'Tab') {
+            event.preventDefault();
+            replaceSelection('  ', 2);
+            return;
+        }
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            const t = event.currentTarget;
+            const before = draft.slice(0, t.selectionStart);
+            const lineStart = before.lastIndexOf('\n') + 1;
+            const indent = before.slice(lineStart).match(/^[ \t]*/)?.[0] ?? '';
+            const insert = `\n${indent}`;
+            replaceSelection(insert, insert.length);
+        }
+    };
+    const handleCopy = React.useCallback(async () => {
+        try {
+            await navigator.clipboard.writeText(draft);
+            setCopied(true);
+            if (copyTimeoutRef.current)
+                clearTimeout(copyTimeoutRef.current);
+            copyTimeoutRef.current = setTimeout(() => setCopied(false), 1500);
+        }
+        catch { }
+    }, [draft]);
+    return (_jsx(Popup, { anchorElement: anchorElement, open: open, onOpenChange: onOpenChange, placement: "bottom-end", children: _jsxs(Card, { className: b(), view: "outlined", children: [_jsxs("div", { className: b('header'), children: [_jsx(Text, { variant: "subheader-2", children: "Form schema" }), _jsx(Text, { variant: "caption-1", color: "hint", children: "Edit JSON directly \u2014 the canvas updates live. Paste your own schema to load it. Selection on canvas resets after each edit." })] }), _jsx("textarea", { ref: textareaRef, className: b('textarea', { error: Boolean(error) }), value: draft, onChange: (event) => applyDraft(event.target.value), onKeyDown: handleKeyDown, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), spellCheck: false, wrap: "off" }), error && (_jsx("div", { className: b('error-message'), children: _jsx(Text, { variant: "caption-1", color: "danger", children: error }) })), _jsxs("div", { className: b('actions'), children: [_jsx(Button, { view: "action", size: "m", onClick: handleCopy, children: copied ? '✓ Copied' : 'Copy' }), _jsx(Button, { view: "flat", size: "m", onClick: () => onOpenChange(false), children: "Close" })] })] }) }));
+};
+//# sourceMappingURL=SchemaPopup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SchemaPopup.js","sourceRoot":"../../../../../src","sources":["form-builder-v2/components/SchemaPopup/SchemaPopup.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {Button, Card, Popup, Text} from '@gravity-ui/uikit';\n\nimport type {Fields} from '../../../form-generator-v2/types';\nimport type {FormField} from '../../types';\nimport {formBuilderV2Cn} from '../../utils/cn';\nimport {parseSchema} from '../../utils/parseSchema';\n\nimport './SchemaPopup.scss';\n\nconst b = formBuilderV2Cn('schema-popup');\n\nconst stringify = (schema: Fields): string => JSON.stringify(schema, null, 2);\n\ninterface SchemaPopupProps {\n    schema: Fields;\n    onApply: (fields: FormField[]) => void;\n    open: boolean;\n    onOpenChange: (open: boolean) => void;\n    anchorElement: HTMLElement | null;\n}\n\nexport const SchemaPopup = ({\n    schema,\n    onApply,\n    open,\n    onOpenChange,\n    anchorElement,\n}: SchemaPopupProps) => {\n    const textareaRef = React.useRef<HTMLTextAreaElement>(null);\n    const copyTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n    const [draft, setDraft] = React.useState<string>(() => stringify(schema));\n    const [error, setError] = React.useState<string | null>(null);\n    const [copied, setCopied] = React.useState(false);\n    const [isFocused, setIsFocused] = React.useState(false);\n\n    React.useEffect(() => {\n        if (!isFocused) {\n            setDraft(stringify(schema));\n            setError(null);\n        }\n    }, [schema, isFocused]);\n\n    React.useEffect(\n        () => () => {\n            if (copyTimeoutRef.current) clearTimeout(copyTimeoutRef.current);\n        },\n        [],\n    );\n\n    const applyDraft = (value: string) => {\n        setDraft(value);\n        const result = parseSchema(value);\n        if (result.ok) {\n            setError(null);\n            onApply(result.fields);\n        } else {\n            setError(result.error);\n        }\n    };\n\n    const replaceSelection = (insert: string, caretOffset: number) => {\n        const t = textareaRef.current;\n        if (!t) return;\n        const {selectionStart, selectionEnd} = t;\n        const next = draft.slice(0, selectionStart) + insert + draft.slice(selectionEnd);\n        const nextCaret = selectionStart + caretOffset;\n        applyDraft(next);\n        requestAnimationFrame(() => {\n            t.selectionStart = nextCaret;\n            t.selectionEnd = nextCaret;\n        });\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n        if (event.key === 'Tab') {\n            event.preventDefault();\n            replaceSelection('  ', 2);\n            return;\n        }\n        if (event.key === 'Enter') {\n            event.preventDefault();\n            const t = event.currentTarget;\n            const before = draft.slice(0, t.selectionStart);\n            const lineStart = before.lastIndexOf('\\n') + 1;\n            const indent = before.slice(lineStart).match(/^[ \\t]*/)?.[0] ?? '';\n            const insert = `\\n${indent}`;\n            replaceSelection(insert, insert.length);\n        }\n    };\n\n    const handleCopy = React.useCallback(async () => {\n        try {\n            await navigator.clipboard.writeText(draft);\n            setCopied(true);\n            if (copyTimeoutRef.current) clearTimeout(copyTimeoutRef.current);\n            copyTimeoutRef.current = setTimeout(() => setCopied(false), 1500);\n        } catch {}\n    }, [draft]);\n\n    return (\n        <Popup\n            anchorElement={anchorElement}\n            open={open}\n            onOpenChange={onOpenChange}\n            placement=\"bottom-end\"\n        >\n            <Card className={b()} view=\"outlined\">\n                <div className={b('header')}>\n                    <Text variant=\"subheader-2\">Form schema</Text>\n                    <Text variant=\"caption-1\" color=\"hint\">\n                        Edit JSON directly — the canvas updates live. Paste your own schema to load\n                        it. Selection on canvas resets after each edit.\n                    </Text>\n                </div>\n                <textarea\n                    ref={textareaRef}\n                    className={b('textarea', {error: Boolean(error)})}\n                    value={draft}\n                    onChange={(event) => applyDraft(event.target.value)}\n                    onKeyDown={handleKeyDown}\n                    onFocus={() => setIsFocused(true)}\n                    onBlur={() => setIsFocused(false)}\n                    spellCheck={false}\n                    wrap=\"off\"\n                />\n                {error && (\n                    <div className={b('error-message')}>\n                        <Text variant=\"caption-1\" color=\"danger\">\n                            {error}\n                        </Text>\n                    </div>\n                )}\n                <div className={b('actions')}>\n                    <Button view=\"action\" size=\"m\" onClick={handleCopy}>\n                        {copied ? '✓ Copied' : 'Copy'}\n                    </Button>\n                    <Button view=\"flat\" size=\"m\" onClick={() => onOpenChange(false)}>\n                        Close\n                    </Button>\n                </div>\n            </Card>\n        </Popup>\n    );\n};\n"]}

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

@@ -0,0 +1,24 @@
+.pcformbuilderv2-when-editor {
+  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-when-editor__condition {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 80px minmax(0, 1fr) auto;
+  gap: 6px;
+  align-items: center;
+}
+.pcformbuilderv2-when-editor__combinator {
+  display: flex;
+  align-items: center;
+}
+.pcformbuilderv2-when-editor__actions {
+  display: flex;
+  gap: var(--g-spacing-2);
+  align-items: center;
+  margin-top: var(--g-spacing-1);
+}

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

@@ -0,0 +1,9 @@
+import type { When } from "../../../form-generator-v2/types.js";
+import './WhenEditor.css';
+interface WhenEditorProps {
+    when: When | undefined;
+    availableFields: string[];
+    onChange: (next: When | undefined) => void;
+}
+export declare const WhenEditor: ({ when, availableFields, onChange }: WhenEditorProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { TrashBin } from '@gravity-ui/icons';
+import { Button, Icon, Select, TextInput } from '@gravity-ui/uikit';
+import { formBuilderV2Cn } from "../../utils/cn.js";
+import { COMBINATOR_OPTIONS, OPERATOR_OPTIONS, coerceValue, displayValue, parse, serialize, } from "./utils.js";
+import './WhenEditor.css';
+const b = formBuilderV2Cn('when-editor');
+export const WhenEditor = ({ when, availableFields, onChange }) => {
+    const { conditions, combinators } = parse(when);
+    const fieldOptions = React.useMemo(() => availableFields.map((name) => ({ value: name, content: name })), [availableFields]);
+    const commit = (nextConditions, nextCombinators) => {
+        onChange(serialize(nextConditions, nextCombinators));
+    };
+    const addCondition = () => {
+        const nextConditions = [
+            ...conditions,
+            { field: availableFields[0] ?? '', operator: '===', value: '' },
+        ];
+        const nextCombinators = conditions.length === 0 ? combinators : [...combinators, { operator: '&&' }];
+        commit(nextConditions, nextCombinators);
+    };
+    const removeCondition = (index) => {
+        const nextConditions = conditions.filter((_, i) => i !== index);
+        const nextCombinators = index === 0
+            ? combinators.slice(1)
+            : [...combinators.slice(0, index - 1), ...combinators.slice(index)];
+        commit(nextConditions, nextCombinators);
+    };
+    const updateCondition = (index, patch) => {
+        const nextConditions = conditions.map((c, i) => (i === index ? { ...c, ...patch } : c));
+        commit(nextConditions, combinators);
+    };
+    const updateCombinator = (index, op) => {
+        const nextCombinators = combinators.map((c, i) => (i === index ? { operator: op } : c));
+        commit(conditions, nextCombinators);
+    };
+    const clearAll = () => {
+        onChange(undefined);
+    };
+    if (conditions.length === 0) {
+        return (_jsx("div", { className: b(), children: _jsx(Button, { view: "normal", size: "s", onClick: addCondition, children: "+ Add condition" }) }));
+    }
+    return (_jsxs("div", { className: b(), children: [conditions.map((cond, i) => (_jsxs(React.Fragment, { children: [i > 0 && (_jsx("div", { className: b('combinator'), children: _jsx(Select, { size: "s", value: [combinators[i - 1]?.operator ?? '&&'], options: COMBINATOR_OPTIONS, onUpdate: (next) => updateCombinator(i - 1, next[0]), width: 80 }) })), _jsxs("div", { className: b('condition'), children: [_jsx(Select, { size: "s", value: [cond.field], options: fieldOptions, onUpdate: (next) => updateCondition(i, { field: next[0] ?? '' }), placeholder: "field", filterable: true, width: "max" }), _jsx(Select, { size: "s", value: [cond.operator], options: OPERATOR_OPTIONS, onUpdate: (next) => updateCondition(i, { operator: next[0] }), width: 80 }), _jsx(TextInput, { size: "s", value: displayValue(cond.value), onUpdate: (value) => updateCondition(i, { value: coerceValue(value) }), placeholder: 'value ("true"/"false" \u2192 bool)' }), _jsx(Button, { view: "flat-danger", size: "s", onClick: () => removeCondition(i), title: "Remove condition", children: _jsx(Icon, { data: TrashBin, size: 12 }) })] })] }, i))), _jsxs("div", { className: b('actions'), children: [_jsx(Button, { view: "normal", size: "s", onClick: addCondition, children: "+ Add condition" }), _jsx(Button, { view: "flat", size: "s", onClick: clearAll, children: "Clear" })] })] }));
+};
+//# sourceMappingURL=WhenEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"WhenEditor.js","sourceRoot":"../../../../../src","sources":["form-builder-v2/components/WhenEditor/WhenEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {TrashBin} from '@gravity-ui/icons';\nimport {Button, Icon, Select, TextInput} from '@gravity-ui/uikit';\n\nimport type {When} from '../../../form-generator-v2/types';\nimport {formBuilderV2Cn} from '../../utils/cn';\n\nimport {\n    COMBINATOR_OPTIONS,\n    Combinator,\n    Condition,\n    OPERATOR_OPTIONS,\n    coerceValue,\n    displayValue,\n    parse,\n    serialize,\n} from './utils';\n\nimport './WhenEditor.scss';\n\nconst b = formBuilderV2Cn('when-editor');\n\ninterface WhenEditorProps {\n    when: When | undefined;\n    availableFields: string[];\n    onChange: (next: When | undefined) => void;\n}\n\nexport const WhenEditor = ({when, availableFields, onChange}: WhenEditorProps) => {\n    const {conditions, combinators} = parse(when);\n\n    const fieldOptions = React.useMemo(\n        () => availableFields.map((name) => ({value: name, content: name})),\n        [availableFields],\n    );\n\n    const commit = (nextConditions: Condition[], nextCombinators: Combinator[]) => {\n        onChange(serialize(nextConditions, nextCombinators));\n    };\n\n    const addCondition = () => {\n        const nextConditions: Condition[] = [\n            ...conditions,\n            {field: availableFields[0] ?? '', operator: '===', value: ''},\n        ];\n        const nextCombinators: Combinator[] =\n            conditions.length === 0 ? combinators : [...combinators, {operator: '&&'}];\n        commit(nextConditions, nextCombinators);\n    };\n\n    const removeCondition = (index: number) => {\n        const nextConditions = conditions.filter((_, i) => i !== index);\n        const nextCombinators =\n            index === 0\n                ? combinators.slice(1)\n                : [...combinators.slice(0, index - 1), ...combinators.slice(index)];\n        commit(nextConditions, nextCombinators);\n    };\n\n    const updateCondition = (index: number, patch: Partial<Condition>) => {\n        const nextConditions = conditions.map((c, i) => (i === index ? {...c, ...patch} : c));\n        commit(nextConditions, combinators);\n    };\n\n    const updateCombinator = (index: number, op: '&&' | '||') => {\n        const nextCombinators = combinators.map((c, i) => (i === index ? {operator: op} : c));\n        commit(conditions, nextCombinators);\n    };\n\n    const clearAll = () => {\n        onChange(undefined);\n    };\n\n    if (conditions.length === 0) {\n        return (\n            <div className={b()}>\n                <Button view=\"normal\" size=\"s\" onClick={addCondition}>\n                    + Add condition\n                </Button>\n            </div>\n        );\n    }\n\n    return (\n        <div className={b()}>\n            {conditions.map((cond, i) => (\n                <React.Fragment key={i}>\n                    {i > 0 && (\n                        <div className={b('combinator')}>\n                            <Select\n                                size=\"s\"\n                                value={[combinators[i - 1]?.operator ?? '&&']}\n                                options={COMBINATOR_OPTIONS}\n                                onUpdate={(next) => updateCombinator(i - 1, next[0] as '&&' | '||')}\n                                width={80}\n                            />\n                        </div>\n                    )}\n                    <div className={b('condition')}>\n                        <Select\n                            size=\"s\"\n                            value={[cond.field]}\n                            options={fieldOptions}\n                            onUpdate={(next) => updateCondition(i, {field: next[0] ?? ''})}\n                            placeholder=\"field\"\n                            filterable\n                            width=\"max\"\n                        />\n                        <Select\n                            size=\"s\"\n                            value={[cond.operator]}\n                            options={OPERATOR_OPTIONS}\n                            onUpdate={(next) =>\n                                updateCondition(i, {operator: next[0] as '===' | '!=='})\n                            }\n                            width={80}\n                        />\n                        <TextInput\n                            size=\"s\"\n                            value={displayValue(cond.value)}\n                            onUpdate={(value) => updateCondition(i, {value: coerceValue(value)})}\n                            placeholder='value (\"true\"/\"false\" → bool)'\n                        />\n                        <Button\n                            view=\"flat-danger\"\n                            size=\"s\"\n                            onClick={() => removeCondition(i)}\n                            title=\"Remove condition\"\n                        >\n                            <Icon data={TrashBin} size={12} />\n                        </Button>\n                    </div>\n                </React.Fragment>\n            ))}\n            <div className={b('actions')}>\n                <Button view=\"normal\" size=\"s\" onClick={addCondition}>\n                    + Add condition\n                </Button>\n                <Button view=\"flat\" size=\"s\" onClick={clearAll}>\n                    Clear\n                </Button>\n            </div>\n        </div>\n    );\n};\n"]}

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

@@ -0,0 +1,24 @@
+import type { When } from "../../../form-generator-v2/types.js";
+export type Condition = {
+    field: string;
+    operator: '===' | '!==';
+    value: string | boolean;
+};
+export type Combinator = {
+    operator: '&&' | '||';
+};
+export declare const OPERATOR_OPTIONS: {
+    value: string;
+    content: string;
+}[];
+export declare const COMBINATOR_OPTIONS: {
+    value: string;
+    content: string;
+}[];
+export declare const parse: (when: When | undefined) => {
+    conditions: Condition[];
+    combinators: Combinator[];
+};
+export declare const serialize: (conditions: Condition[], combinators: Combinator[]) => When | undefined;
+export declare const coerceValue: (raw: string) => string | boolean;
+export declare const displayValue: (value: string | boolean | undefined) => string;