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

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

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { TrashBin } from '@gravity-ui/icons';
+import { Button, Checkbox, Icon, Select, TextInput } from '@gravity-ui/uikit';
+import { formBuilderV2Cn } from "../../../utils/cn.js";
+import { Row } from "./Row.js";
+const b = formBuilderV2Cn('field-settings');
+export const OptionsSettings = ({ field, updateField, commonRows, whenEditorSection, }) => {
+    const options = field.options ?? [];
+    const updateOption = (index, key, value) => {
+        const next = options.map((opt, i) => (i === index ? { ...opt, [key]: value } : opt));
+        updateField(field.id, { options: next });
+    };
+    const removeOption = (index) => {
+        const next = options.filter((_, i) => i !== index);
+        updateField(field.id, { options: next });
+    };
+    const addOption = () => {
+        const nextIndex = options.length + 1;
+        updateField(field.id, {
+            options: [...options, { value: `option${nextIndex}`, content: `Option ${nextIndex}` }],
+        });
+    };
+    const defaultValueOptions = [
+        { value: '', content: '— none —' },
+        ...options.map((o) => ({ value: o.value, content: o.content ?? o.value })),
+    ];
+    return (_jsxs(React.Fragment, { children: [commonRows, _jsx(Row, { label: "Default", children: _jsx(Select, { size: "m", value: [field.defaultValue ?? ''], options: defaultValueOptions, onUpdate: (next) => {
+                        const value = next[0];
+                        updateField(field.id, { defaultValue: value || undefined });
+                    } }) }), field.type === 'select' && (_jsx(Row, { label: "Has clear", children: _jsx(Checkbox, { checked: Boolean(field.hasClear), onUpdate: (value) => updateField(field.id, { hasClear: value }), children: "Allow clearing the selection" }) })), _jsx(Row, { label: "Options", children: _jsxs("div", { className: b('options'), children: [options.map((opt, index) => (_jsxs("div", { className: b('option-row'), children: [_jsx(TextInput, { size: "s", value: opt.value, onUpdate: (value) => updateOption(index, 'value', value), placeholder: "value" }), _jsx(TextInput, { size: "s", value: opt.content ?? '', onUpdate: (value) => updateOption(index, 'content', value), placeholder: "label" }), _jsx(Button, { size: "s", view: "flat-danger", disabled: options.length <= 1, onClick: () => removeOption(index), title: "Remove option", children: _jsx(Icon, { data: TrashBin, size: 12 }) })] }, index))), _jsx(Button, { className: b('add-option'), size: "s", view: "normal", onClick: addOption, children: "+ Add option" })] }) }), whenEditorSection] }));
+};
+//# sourceMappingURL=OptionsSettings.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OptionsSettings.js","sourceRoot":"../../../../../../src","sources":["form-builder-v2/components/FieldSettings/fields/OptionsSettings.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {TrashBin} from '@gravity-ui/icons';\nimport {Button, Checkbox, Icon, Select, TextInput} from '@gravity-ui/uikit';\n\nimport type {BuilderLeafField, FieldUpdate} from '../../../types';\nimport {formBuilderV2Cn} from '../../../utils/cn';\n\nimport {Row} from './Row';\n\nconst b = formBuilderV2Cn('field-settings');\n\ninterface OptionsSettingsProps {\n    field: BuilderLeafField & {type: 'select' | 'segmentedRadioGroup'};\n    updateField: (id: string, updates: FieldUpdate) => void;\n    commonRows: React.ReactNode;\n    whenEditorSection: React.ReactNode;\n}\n\nexport const OptionsSettings = ({\n    field,\n    updateField,\n    commonRows,\n    whenEditorSection,\n}: OptionsSettingsProps) => {\n    const options = field.options ?? [];\n\n    const updateOption = (index: number, key: 'value' | 'content', value: string) => {\n        const next = options.map((opt, i) => (i === index ? {...opt, [key]: value} : opt));\n        updateField(field.id, {options: next});\n    };\n\n    const removeOption = (index: number) => {\n        const next = options.filter((_, i) => i !== index);\n        updateField(field.id, {options: next});\n    };\n\n    const addOption = () => {\n        const nextIndex = options.length + 1;\n        updateField(field.id, {\n            options: [...options, {value: `option${nextIndex}`, content: `Option ${nextIndex}`}],\n        });\n    };\n\n    const defaultValueOptions = [\n        {value: '', content: '— none —'},\n        ...options.map((o) => ({value: o.value, content: o.content ?? o.value})),\n    ];\n\n    return (\n        <React.Fragment>\n            {commonRows}\n            <Row label=\"Default\">\n                <Select\n                    size=\"m\"\n                    value={[field.defaultValue ?? '']}\n                    options={defaultValueOptions}\n                    onUpdate={(next) => {\n                        const value = next[0];\n                        updateField(field.id, {defaultValue: value || undefined});\n                    }}\n                />\n            </Row>\n            {field.type === 'select' && (\n                <Row label=\"Has clear\">\n                    <Checkbox\n                        checked={Boolean(field.hasClear)}\n                        onUpdate={(value) => updateField(field.id, {hasClear: value})}\n                    >\n                        Allow clearing the selection\n                    </Checkbox>\n                </Row>\n            )}\n            <Row label=\"Options\">\n                <div className={b('options')}>\n                    {options.map((opt, index) => (\n                        <div key={index} className={b('option-row')}>\n                            <TextInput\n                                size=\"s\"\n                                value={opt.value}\n                                onUpdate={(value) => updateOption(index, 'value', value)}\n                                placeholder=\"value\"\n                            />\n                            <TextInput\n                                size=\"s\"\n                                value={opt.content ?? ''}\n                                onUpdate={(value) => updateOption(index, 'content', value)}\n                                placeholder=\"label\"\n                            />\n                            <Button\n                                size=\"s\"\n                                view=\"flat-danger\"\n                                disabled={options.length <= 1}\n                                onClick={() => removeOption(index)}\n                                title=\"Remove option\"\n                            >\n                                <Icon data={TrashBin} size={12} />\n                            </Button>\n                        </div>\n                    ))}\n                    <Button className={b('add-option')} size=\"s\" view=\"normal\" onClick={addOption}>\n                        + Add option\n                    </Button>\n                </div>\n            </Row>\n            {whenEditorSection}\n        </React.Fragment>\n    );\n};\n"]}

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+interface RowProps {
+    label: string;
+    children: React.ReactNode;
+}
+export declare const Row: ({ label, children }: RowProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formBuilderV2Cn } from "../../../utils/cn.js";
+const b = formBuilderV2Cn('field-settings');
+export const Row = ({ label, children }) => (_jsxs("div", { className: b('row'), children: [_jsx("span", { className: b('row-label'), children: label }), _jsx("div", { children: children })] }));
+//# sourceMappingURL=Row.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Row.js","sourceRoot":"../../../../../../src","sources":["form-builder-v2/components/FieldSettings/fields/Row.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAC,eAAe,EAAC,6BAA0B;AAElD,MAAM,CAAC,GAAG,eAAe,CAAC,gBAAgB,CAAC,CAAC;AAO5C,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC,EAAC,KAAK,EAAE,QAAQ,EAAW,EAAE,EAAE,CAAC,CAChD,eAAK,SAAS,EAAE,CAAC,CAAC,KAAK,CAAC,aACpB,eAAM,SAAS,EAAE,CAAC,CAAC,WAAW,CAAC,YAAG,KAAK,GAAQ,EAC/C,wBAAM,QAAQ,GAAO,IACnB,CACT,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {formBuilderV2Cn} from '../../../utils/cn';\n\nconst b = formBuilderV2Cn('field-settings');\n\ninterface RowProps {\n    label: string;\n    children: React.ReactNode;\n}\n\nexport const Row = ({label, children}: RowProps) => (\n    <div className={b('row')}>\n        <span className={b('row-label')}>{label}</span>\n        <div>{children}</div>\n    </div>\n);\n"]}

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

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

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

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Checkbox, Select, Switch, Text, TextInput } from '@gravity-ui/uikit';
+import { prefixNameForArrayMode, stripArrayModePrefix, transformChildNames, } from "../../../utils/fieldNames.js";
+import { Row } from "./Row.js";
+export const SectionSettings = ({ field, updateField, whenEditorSection }) => {
+    const isArray = Boolean(field.index);
+    const handleArrayModeToggle = (value) => {
+        if (value) {
+            updateField(field.id, {
+                index: 'index',
+                withAddButton: true,
+                itemTitle: 'Item {{index}}',
+                itemView: 'card',
+                fields: transformChildNames(field.fields, prefixNameForArrayMode),
+            });
+        }
+        else {
+            updateField(field.id, {
+                index: undefined,
+                withAddButton: undefined,
+                itemTitle: undefined,
+                itemView: undefined,
+                fields: transformChildNames(field.fields, stripArrayModePrefix),
+            });
+        }
+    };
+    return (_jsxs(React.Fragment, { children: [_jsx(Row, { label: "Title", children: _jsx(TextInput, { value: field.title ?? '', onUpdate: (value) => updateField(field.id, { title: value }), placeholder: "Section heading" }) }), _jsx(Row, { label: "Opened", children: _jsx(Switch, { checked: Boolean(field.opened), onUpdate: (value) => updateField(field.id, { opened: value }), children: "Expanded by default" }) }), _jsx(Row, { label: "Array mode", children: _jsx(Switch, { checked: isArray, onUpdate: handleArrayModeToggle, children: "Repeating group (array of items)" }) }), isArray && (_jsxs(React.Fragment, { children: [_jsx(Row, { label: "Hint", children: _jsxs(Text, { variant: "caption-2", color: "hint", children: ["Child field names must include ", _jsx("code", { children: '{{index}}' }), " so each row gets its own value. New fields get an ", _jsx("code", { children: 'items[{{index}}].' }), ' ', "prefix automatically."] }) }), _jsx(Row, { label: "Index name", children: _jsx(TextInput, { value: field.index ?? '', onUpdate: (value) => updateField(field.id, { index: value || 'index' }), placeholder: "index" }) }), _jsx(Row, { label: "Item title", children: _jsx(TextInput, { value: field.itemTitle ?? '', onUpdate: (value) => updateField(field.id, { itemTitle: value || undefined }), placeholder: "Item {{index}}" }) }), _jsx(Row, { label: "Item view", children: _jsx(Select, { size: "m", value: [field.itemView ?? 'clear'], options: [
+                                { value: 'clear', content: 'Clear (flat)' },
+                                { value: 'card', content: 'Card (bordered)' },
+                            ], onUpdate: (next) => updateField(field.id, {
+                                itemView: next[0],
+                            }) }) }), _jsx(Row, { label: "Add button", children: _jsx(Checkbox, { checked: Boolean(field.withAddButton), onUpdate: (value) => updateField(field.id, { withAddButton: value }), children: "Show \u201CAdd item\u201D button" }) })] })), whenEditorSection] }));
+};
+//# sourceMappingURL=SectionSettings.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SectionSettings.js","sourceRoot":"../../../../../../src","sources":["form-builder-v2/components/FieldSettings/fields/SectionSettings.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {Checkbox, Select, Switch, Text, TextInput} from '@gravity-ui/uikit';\n\nimport type {BuilderSectionField, FieldUpdate} from '../../../types';\nimport {\n    prefixNameForArrayMode,\n    stripArrayModePrefix,\n    transformChildNames,\n} from '../../../utils/fieldNames';\n\nimport {Row} from './Row';\n\ninterface SectionSettingsProps {\n    field: BuilderSectionField;\n    updateField: (id: string, updates: FieldUpdate) => void;\n    whenEditorSection: React.ReactNode;\n}\n\nexport const SectionSettings = ({field, updateField, whenEditorSection}: SectionSettingsProps) => {\n    const isArray = Boolean(field.index);\n\n    const handleArrayModeToggle = (value: boolean) => {\n        if (value) {\n            updateField(field.id, {\n                index: 'index',\n                withAddButton: true,\n                itemTitle: 'Item {{index}}',\n                itemView: 'card',\n                fields: transformChildNames(field.fields, prefixNameForArrayMode),\n            });\n        } else {\n            updateField(field.id, {\n                index: undefined,\n                withAddButton: undefined,\n                itemTitle: undefined,\n                itemView: undefined,\n                fields: transformChildNames(field.fields, stripArrayModePrefix),\n            });\n        }\n    };\n\n    return (\n        <React.Fragment>\n            <Row label=\"Title\">\n                <TextInput\n                    value={field.title ?? ''}\n                    onUpdate={(value) => updateField(field.id, {title: value})}\n                    placeholder=\"Section heading\"\n                />\n            </Row>\n            <Row label=\"Opened\">\n                <Switch\n                    checked={Boolean(field.opened)}\n                    onUpdate={(value) => updateField(field.id, {opened: value})}\n                >\n                    Expanded by default\n                </Switch>\n            </Row>\n            <Row label=\"Array mode\">\n                <Switch checked={isArray} onUpdate={handleArrayModeToggle}>\n                    Repeating group (array of items)\n                </Switch>\n            </Row>\n            {isArray && (\n                <React.Fragment>\n                    <Row label=\"Hint\">\n                        <Text variant=\"caption-2\" color=\"hint\">\n                            Child field names must include <code>{'{{index}}'}</code> so each row\n                            gets its own value. New fields get an <code>{'items[{{index}}].'}</code>{' '}\n                            prefix automatically.\n                        </Text>\n                    </Row>\n                    <Row label=\"Index name\">\n                        <TextInput\n                            value={field.index ?? ''}\n                            onUpdate={(value) => updateField(field.id, {index: value || 'index'})}\n                            placeholder=\"index\"\n                        />\n                    </Row>\n                    <Row label=\"Item title\">\n                        <TextInput\n                            value={field.itemTitle ?? ''}\n                            onUpdate={(value) =>\n                                updateField(field.id, {itemTitle: value || undefined})\n                            }\n                            placeholder=\"Item {{index}}\"\n                        />\n                    </Row>\n                    <Row label=\"Item view\">\n                        <Select\n                            size=\"m\"\n                            value={[field.itemView ?? 'clear']}\n                            options={[\n                                {value: 'clear', content: 'Clear (flat)'},\n                                {value: 'card', content: 'Card (bordered)'},\n                            ]}\n                            onUpdate={(next) =>\n                                updateField(field.id, {\n                                    itemView: next[0] as 'card' | 'clear',\n                                })\n                            }\n                        />\n                    </Row>\n                    <Row label=\"Add button\">\n                        <Checkbox\n                            checked={Boolean(field.withAddButton)}\n                            onUpdate={(value) => updateField(field.id, {withAddButton: value})}\n                        >\n                            Show &ldquo;Add item&rdquo; button\n                        </Checkbox>\n                    </Row>\n                </React.Fragment>\n            )}\n            {whenEditorSection}\n        </React.Fragment>\n    );\n};\n"]}

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchSettings.js","sourceRoot":"../../../../../../src","sources":["form-builder-v2/components/FieldSettings/fields/SwitchSettings.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,MAAM,EAAC,MAAM,mBAAmB,CAAC;AAIzC,OAAO,EAAC,GAAG,EAAC,iBAAc;AAS1B,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC3B,KAAK,EACL,WAAW,EACX,UAAU,EACV,iBAAiB,GACC,EAAE,EAAE,CAAC,CACvB,MAAC,KAAK,CAAC,QAAQ,eACV,UAAU,EACX,KAAC,GAAG,IAAC,KAAK,EAAC,SAAS,YAChB,KAAC,MAAM,IACH,OAAO,EAAE,OAAO,CAAC,KAAK,CAAC,YAAY,CAAC,EACpC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,EAAE,EAAC,YAAY,EAAE,KAAK,EAAC,CAAC,GACnE,GACA,EACL,iBAAiB,IACL,CACpB,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {Switch} from '@gravity-ui/uikit';\n\nimport type {BuilderLeafField, FieldUpdate} from '../../../types';\n\nimport {Row} from './Row';\n\ninterface SwitchSettingsProps {\n    field: BuilderLeafField & {type: 'switch'};\n    updateField: (id: string, updates: FieldUpdate) => void;\n    commonRows: React.ReactNode;\n    whenEditorSection: React.ReactNode;\n}\n\nexport const SwitchSettings = ({\n    field,\n    updateField,\n    commonRows,\n    whenEditorSection,\n}: SwitchSettingsProps) => (\n    <React.Fragment>\n        {commonRows}\n        <Row label=\"Default\">\n            <Switch\n                checked={Boolean(field.defaultValue)}\n                onUpdate={(value) => updateField(field.id, {defaultValue: value})}\n            />\n        </Row>\n        {whenEditorSection}\n    </React.Fragment>\n);\n"]}

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

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

package/build/esm/form-builder-v2/components/FieldSettings/fields/TextFieldSettings.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 TextFieldSettings = ({ 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: "Default value" }) }), whenEditorSection] }));
+//# sourceMappingURL=TextFieldSettings.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextFieldSettings.js","sourceRoot":"../../../../../../src","sources":["form-builder-v2/components/FieldSettings/fields/TextFieldSettings.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,iBAAiB,GAAG,CAAC,EAC9B,KAAK,EACL,WAAW,EACX,UAAU,EACV,iBAAiB,GACI,EAAE,EAAE,CAAC,CAC1B,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,eAAe,GAC7B,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 TextFieldSettingsProps {\n    field: BuilderLeafField & {type: 'textInput' | 'textArea'};\n    updateField: (id: string, updates: FieldUpdate) => void;\n    commonRows: React.ReactNode;\n    whenEditorSection: React.ReactNode;\n}\n\nexport const TextFieldSettings = ({\n    field,\n    updateField,\n    commonRows,\n    whenEditorSection,\n}: TextFieldSettingsProps) => (\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=\"Default value\"\n            />\n        </Row>\n        {whenEditorSection}\n    </React.Fragment>\n);\n"]}

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

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

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

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Select, TextArea } from '@gravity-ui/uikit';
+import { Row } from "./Row.js";
+const TEXT_COLOR_OPTIONS = [
+    { value: '', content: 'Default' },
+    { value: 'primary', content: 'Primary' },
+    { value: 'secondary', content: 'Secondary' },
+    { value: 'hint', content: 'Hint' },
+    { value: 'info', content: 'Info' },
+    { value: 'positive', content: 'Positive' },
+    { value: 'warning', content: 'Warning' },
+    { value: 'danger', content: 'Danger' },
+    { value: 'utility', content: 'Utility' },
+    { value: 'misc', content: 'Misc' },
+];
+const TEXT_LEVEL_OPTIONS = [
+    { value: '', content: 'None' },
+    { value: 'info', content: 'Info banner' },
+    { value: 'danger', content: 'Danger banner' },
+];
+const TEXT_COLORS = [
+    'primary',
+    'secondary',
+    'hint',
+    'info',
+    'positive',
+    'warning',
+    'danger',
+    'utility',
+    'misc',
+];
+const isTextColor = (value) => TEXT_COLORS.includes(value);
+const isTextLevel = (value) => value === 'info' || value === 'danger';
+export const TextSettings = ({ field, updateField, whenEditorSection }) => {
+    const handleLevelUpdate = ([value]) => {
+        updateField(field.id, {
+            level: isTextLevel(value) ? value : undefined,
+        });
+    };
+    const handleColorUpdate = ([value]) => {
+        updateField(field.id, {
+            color: isTextColor(value) ? value : undefined,
+        });
+    };
+    return (_jsxs(React.Fragment, { children: [_jsx(Row, { label: "Text", children: _jsx(TextArea, { value: field.text ?? '', onUpdate: (value) => updateField(field.id, { text: value }), minRows: 2, placeholder: "Static hint text" }) }), _jsx(Row, { label: "Banner", children: _jsx(Select, { size: "m", value: [field.level ?? ''], options: TEXT_LEVEL_OPTIONS, onUpdate: handleLevelUpdate }) }), _jsx(Row, { label: "Color", children: _jsx(Select, { size: "m", value: [field.color ?? ''], options: TEXT_COLOR_OPTIONS, onUpdate: handleColorUpdate }) }), whenEditorSection] }));
+};
+//# sourceMappingURL=TextSettings.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextSettings.js","sourceRoot":"../../../../../../src","sources":["form-builder-v2/components/FieldSettings/fields/TextSettings.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {Select, TextArea} from '@gravity-ui/uikit';\n\nimport type {TextColor} from '../../../../form-generator-v2/types';\nimport type {BuilderLeafField, FieldUpdate} from '../../../types';\n\nimport {Row} from './Row';\n\ntype TextLevel = 'info' | 'danger';\n\nconst TEXT_COLOR_OPTIONS = [\n    {value: '', content: 'Default'},\n    {value: 'primary', content: 'Primary'},\n    {value: 'secondary', content: 'Secondary'},\n    {value: 'hint', content: 'Hint'},\n    {value: 'info', content: 'Info'},\n    {value: 'positive', content: 'Positive'},\n    {value: 'warning', content: 'Warning'},\n    {value: 'danger', content: 'Danger'},\n    {value: 'utility', content: 'Utility'},\n    {value: 'misc', content: 'Misc'},\n];\n\nconst TEXT_LEVEL_OPTIONS = [\n    {value: '', content: 'None'},\n    {value: 'info', content: 'Info banner'},\n    {value: 'danger', content: 'Danger banner'},\n];\n\nconst TEXT_COLORS: readonly TextColor[] = [\n    'primary',\n    'secondary',\n    'hint',\n    'info',\n    'positive',\n    'warning',\n    'danger',\n    'utility',\n    'misc',\n];\n\nconst isTextColor = (value: string): value is TextColor =>\n    (TEXT_COLORS as readonly string[]).includes(value);\n\nconst isTextLevel = (value: string): value is TextLevel => value === 'info' || value === 'danger';\n\ninterface TextSettingsProps {\n    field: BuilderLeafField & {type: 'text'};\n    updateField: (id: string, updates: FieldUpdate) => void;\n    whenEditorSection: React.ReactNode;\n}\n\nexport const TextSettings = ({field, updateField, whenEditorSection}: TextSettingsProps) => {\n    const handleLevelUpdate = ([value]: string[]) => {\n        updateField(field.id, {\n            level: isTextLevel(value) ? value : undefined,\n        });\n    };\n\n    const handleColorUpdate = ([value]: string[]) => {\n        updateField(field.id, {\n            color: isTextColor(value) ? value : undefined,\n        });\n    };\n\n    return (\n        <React.Fragment>\n            <Row label=\"Text\">\n                <TextArea\n                    value={field.text ?? ''}\n                    onUpdate={(value) => updateField(field.id, {text: value})}\n                    minRows={2}\n                    placeholder=\"Static hint text\"\n                />\n            </Row>\n            <Row label=\"Banner\">\n                <Select\n                    size=\"m\"\n                    value={[field.level ?? '']}\n                    options={TEXT_LEVEL_OPTIONS}\n                    onUpdate={handleLevelUpdate}\n                />\n            </Row>\n            <Row label=\"Color\">\n                <Select\n                    size=\"m\"\n                    value={[field.color ?? '']}\n                    options={TEXT_COLOR_OPTIONS}\n                    onUpdate={handleColorUpdate}\n                />\n            </Row>\n            {whenEditorSection}\n        </React.Fragment>\n    );\n};\n"]}

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

@@ -0,0 +1,20 @@
+.pcformbuilderv2-inspector {
+  padding: 14px;
+}
+.pcformbuilderv2-inspector__header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-spacing-half);
+  margin-bottom: var(--g-spacing-3);
+  padding-bottom: 10px;
+  border-bottom: 1px solid var(--g-color-line-generic);
+}
+.pcformbuilderv2-inspector__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-spacing-2);
+}
+.pcformbuilderv2-inspector__empty {
+  padding: var(--g-spacing-4) var(--g-spacing-2);
+  text-align: center;
+}

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