@reformer/core 10.2.0 → 11.0.0-beta.2

package/docs/llms/11-async-watchfield.md

@@ -0,0 +1,53 @@
+## 10. ASYNC REACTION — onChange (CRITICALLY IMPORTANT)
+
+Для async-реакции на изменение поля (загрузка зависимых опций, справочников) используй
+`onChange` из `@reformer/core/behaviors`. Колбэк выполняется ВНЕ effect-контекста (можно
+безопасно писать сигналы/ноды), а 2-й аргумент — `{ signal }` (AbortSignal): при следующей
+смене значения предыдущий вызов аннулируется — передавай `signal` в `fetch`.
+
+```typescript
+import { defineFormBehavior, onChange } from '@reformer/core/behaviors';
+
+const behavior = defineFormBehavior<MyForm>(({ model, form }) => {
+  // CORRECT — async onChange со всеми safeguards
+  onChange(
+    model.$.parentField,
+    async (value, { signal }) => {
+      if (!value) {
+        form.dependentField.updateComponentProps({ options: [] });
+        return;
+      }
+      try {
+        const data = await fetchData(value, { signal }); // отмена устаревших запросов
+        form.dependentField.updateComponentProps({ options: data });
+      } catch (error) {
+        if ((error as Error).name === 'AbortError') return;
+        form.dependentField.updateComponentProps({ options: [] });
+      }
+    },
+    { debounce: 300 } // не fetch на каждое нажатие
+  );
+});
+```
+
+### Опции onChange
+
+- `debounce: 300` — не дёргать сеть на каждый keystroke (300–500 мс рекомендуется).
+- `immediate: true` — вызвать колбэк сразу при регистрации (по умолчанию `false`).
+- Guard-clause — пропустить пустое значение.
+- try/catch + проверка `AbortError` — обработка отмены и ошибок.
+
+### Низкоуровневый примитив watchField
+
+`watchField` из `@reformer/core` — базовая подписка на изменение сигнала (без debounce и
+AbortSignal). `onChange` построен поверх него. Для простых синхронных реакций:
+
+```typescript
+import { watchField } from '@reformer/core';
+
+// вызывается при каждом изменении (по умолчанию НЕ на инициализации)
+const stop = watchField(model.$.country, (country) => {
+  model.city = ''; // сброс зависимого поля
+});
+// stop() — отписаться
+```

package/docs/llms/12-array-cleanup.md

@@ -0,0 +1,31 @@
+## 11. ARRAY CLEANUP PATTERN
+
+Очистка массива при выключении флага — через `onChange` на сигнале флага + `clear()` на
+модели-массиве. Колбит выполняется вне effect-контекста, поэтому мутировать массив безопасно.
+
+```typescript
+import { defineFormBehavior, onChange } from '@reformer/core/behaviors';
+
+const behavior = defineFormBehavior<MyForm>(({ model }) => {
+  // при снятии флага — очистить массив
+  onChange(model.$.hasItems, (hasItems) => {
+    if (!hasItems) model.items.clear();
+  });
+});
+```
+
+Переиспользуемый оператор (как в монорепо):
+
+```typescript
+import { onChange } from '@reformer/core/behaviors';
+import type { ReadonlySignal } from '@reformer/core/behaviors';
+
+function clearWhenOff(flag: ReadonlySignal<boolean>, array: { clear(): void }): void {
+  onChange(flag, (on) => {
+    if (!on) array.clear();
+  });
+}
+
+// в схеме поведения:
+clearWhenOff(model.$.hasProperty, model.properties);
+```

package/docs/llms/13-multi-step.md

@@ -0,0 +1,91 @@
+## 12. MULTI-STEP FORM VALIDATION
+
+Каждый шаг — своя `ValidationSchema<Form>` (обычная функция `({ model }) => void`, обёрнутая
+`defineValidationSchema`). Переход к следующему шагу проверяется `validateModel(model, stepSchema)`;
+полный submit — по общей схеме (композиция шагов через `apply(...)`). `validateModel` сам разносит
+ошибки по нодам формы (`getNodeForSignal(sig).setErrors(...)`), поэтому UI подсветит проблемные поля
+текущего шага автоматически. Валидация живёт ОТДЕЛЬНО от layout: сам `RenderNode`/JSON-узел валидаторов
+не несёт — схема инъектируется в рантайме и роутит ошибки по тем же нодам.
+
+```typescript
+import { type FormModel } from '@reformer/core';
+import {
+  validate,
+  apply,
+  defineValidationSchema,
+  validateModel,
+  type ValidationSchema,
+} from '@reformer/core/validation';
+import { required, min } from '@reformer/core/validators';
+
+// Под-схема шага — обычная функция ({ model }) => void. Значения проверяет оператор validate(sig, [rules]).
+const step1Schema = defineValidationSchema<Form>(({ model }) => {
+  validate(model.$.loanType, [required()]);
+  validate(model.$.loanAmount, [required(), min(50000)]);
+});
+
+const step2Schema = defineValidationSchema<Form>(({ model }) => {
+  validate(model.$.personalData.firstName, [required()]);
+  validate(model.$.personalData.lastName, [required()]);
+});
+
+// Карта шагов + полная схема (композиция под-схем через apply — заменяет пошаговую группировку деревом)
+const STEP_SCHEMAS: readonly ValidationSchema<Form>[] = [step1Schema, step2Schema];
+const fullSchema = defineValidationSchema<Form>(() => apply(...STEP_SCHEMAS));
+```
+
+```typescript
+// Переход к следующему шагу. validateModel возвращает Promise<boolean> (true = нет блокирующих ошибок;
+// severity:'warning' не блокирует). Устаревшие прогоны той же (model, schema) отменяются автоматически.
+const goToNextStep = async () => {
+  const ok = await validateModel(model, STEP_SCHEMAS[currentStep - 1]);
+  if (!ok) return; // ошибки уже проставлены в ноды текущего шага
+  setCurrentStep(currentStep + 1);
+};
+
+// Полный submit — по общей схеме
+const handleSubmit = async () => {
+  const ok = await validateModel(model, fullSchema);
+  if (ok) {
+    await onSubmit(model.get());
+  }
+};
+```
+
+Слой-потребитель (`FormWizard`) обычно оборачивает это в конфиг с per-step и полной валидацией:
+
+```typescript
+function makeValidationConfig(model: FormModel<Form>) {
+  return {
+    validateStep: (n: number): Promise<boolean> => validateModel(model, STEP_SCHEMAS[n - 1]),
+    validateAll: (): Promise<boolean> => validateModel(model, fullSchema),
+  };
+}
+```
+
+### Multi-Step Component Example
+
+```tsx
+function MultiStepForm() {
+  const [step, setStep] = useState(1);
+
+  const nextStep = async () => {
+    const ok = await validateModel(model, STEP_SCHEMAS[step - 1]);
+    if (ok) setStep(step + 1);
+  };
+
+  return (
+    <div>
+      {step === 1 && <Step1Fields form={form} />}
+      {step === 2 && <Step2Fields form={form} />}
+
+      <button onClick={() => setStep(step - 1)} disabled={step === 1}>
+        Back
+      </button>
+      <button onClick={step === 2 ? handleSubmit : nextStep}>
+        {step === 2 ? 'Submit' : 'Next'}
+      </button>
+    </div>
+  );
+}
+```

package/docs/llms/14-extended-mistakes.md

@@ -0,0 +1,98 @@
+## 13. EXTENDED COMMON MISTAKES
+
+### Reuse via apply / applyEach — не дублируй код
+
+```typescript
+import { defineFormBehavior, apply, applyEach, compute } from '@reformer/core/behaviors';
+
+// ✅ apply — одна под-схема на несколько групп
+const addressBehavior = defineFormBehavior<Address>(({ model }) => {
+  compute(model.$.full, () => `${model.city}, ${model.street}`);
+});
+
+const behavior = defineFormBehavior<Form>(({ model }) => {
+  apply([model.$.homeAddress, model.$.workAddress], addressBehavior);
+
+  // ✅ applyEach — под-схема на КАЖДЫЙ элемент массива (реагирует на add/remove)
+  applyEach(
+    model.$.items,
+    defineFormBehavior<Item>(({ model: row }) => {
+      compute(row.$.lineTotal, () => row.qty * row.price);
+    })
+  );
+});
+```
+
+### Идемпотентность transformValue
+
+```typescript
+// ❌ неидемпотентный transformer — бесконечный цикл setValue → callback → setValue
+transformValue(model.$.field, (v) => `prefix-${v}`); // f(f(x)) ≠ f(x)
+
+// ✅ guard «уже преобразовано»
+transformValue(model.$.field, (v) => (v?.startsWith('prefix-') ? v : `prefix-${v}`));
+```
+
+### compute для производных полей вместо ручной синхронизации
+
+```typescript
+// ❌ ручной onChange + запись — легко зациклить/забыть кейс
+onChange(model.$.firstName, () => { model.fullName = `${model.firstName} ${model.lastName}`; });
+
+// ✅ compute: цель не входит в источники → цикла нет, запись идемпотентна (peek-guard)
+compute(model.$.fullName, () => [model.firstName, model.lastName].filter(Boolean).join(' '));
+```
+
+### Расходящийся цикл compute (Cycle detected)
+
+Взаимные `compute`/`computeFrom` без стабилизации preact обрывает как «Cycle detected».
+DSL перехватывает это и бросает понятную ошибку с именем поля. Решение — разорвать цикл
+условием `when` или читать одну сторону через `peek()`:
+
+```typescript
+// ❌ взаимный пересчёт без стабилизации
+compute(model.$.a, () => model.b + 1);
+compute(model.$.b, () => model.a + 1); // расходится → Cycle detected
+
+// ✅ добавь стабилизирующее условие или однонаправленную зависимость
+compute(model.$.total, () => model.price * model.qty); // одно направление
+```
+
+### Cross-field валидация — через `cross(sig, fn)`
+
+Cross-field живёт в схеме валидации (`@reformer/core/validation`), а не в layout: правило вешается на
+ПОЛЕ-НОСИТЕЛЬ ошибки оператором `cross(sig, fn)`, а `fn` читает снапшот текущего scope (`model.get()`).
+
+```typescript
+import { defineValidationSchema, validate, cross, validateModel } from '@reformer/core/validation';
+import { required } from '@reformer/core/validators';
+import { revalidateWhen, type ValidationError } from '@reformer/core';
+
+// ❌ старое (УДАЛЕНО): дерево { value, validators }, ModelValidator (value, scope, root), validateFormModel
+const legacyRule: ModelValidator<number, unknown, Form> = (_value, _scope, root) =>
+  root.field1 > root.field2 ? { code: 'error', message: 'Invalid' } : null;
+const legacySchema = { field1: { value: model.$.field1, component: Input, validators: [legacyRule] } };
+validateFormModel(model, legacySchema);
+
+// ✅ новое: cross-правило — обычная функция над снапшотом (model.get()), не читает scope/root
+const field1LessThanField2 = (f: Form): ValidationError | null =>
+  f.field1 > f.field2 ? { code: 'error', message: 'Invalid' } : null;
+
+const schema = defineValidationSchema<Form>(({ model }) => {
+  validate(model.$.field1, [required()]);
+  cross(model.$.field1, field1LessThanField2); // правило на поле-носителе ошибки
+});
+
+// Прогон — ТОЛЬКО внешним раннером; ошибки сами доезжают до нод формы.
+// ⚠️ form.validate()/submit() схему валидации больше НЕ прогоняют.
+await validateModel(model, schema);
+
+// Перезапуск правила при изменении соседнего поля — мост «поведение → валидация»:
+revalidateWhen([model.$.field2], () => void validateModel(model, schema));
+```
+
+> **Актуальный vs удалённый API.** Операторы валидации `validate`/`validateAsync`/`validateWhen`/`cross`/`each`/`apply`
+> ТЕПЕРЬ существуют — в `@reformer/core/validation` с новыми сигнатурами (ambient, активны только внутри прогона
+> `validateModel`). УДАЛЕНЫ: `applyWhen`, `validateGroup`/`validateTree`/`validateForm`/`validateFormModel`,
+> типы `FieldPath`/`ValidationSchemaFn`/`BehaviorSchemaFn` и `ctx.form.*`/`ctx.setFieldValue` (наследие
+> path-based архитектуры). См. `17-nonexistent-api.md`.

package/docs/llms/15-project-structure.md

@@ -0,0 +1,125 @@
+## 14. PROJECT STRUCTURE (COLOCATION)
+
+One form is one module folder. **Default layout — flat minimalist:** every concern is a single
+file at the module root, and the whole form (entry + all wizard steps inline) lives in one
+`index.tsx`. Filenames are flat with no prefix — **the dot-prefix (`form.` / `renderer.`) is
+carried only by `schema` and `behavior`**, the two concerns that have both a model-layer and a
+render-layer version (`form.schema.ts` / `form.behavior.ts` here; renderer slices add
+`renderer.schema.*` / `renderer.behavior.ts`). No `lib/` / `schema/` / `components/steps/`
+nesting until the form grows (see "Scaling up" below). Arrays are declared in `form.schema.ts`
+and rendered with `FormArraySection` — no per-step component files.
+
+```
+src/
+├── components/ui/                # App-wide reusable UI (FormField, FormArraySection, ...)
+│
+├── forms/
+│   └── [form-name]/              # Form module — flat, one file per concern
+│       ├── index.tsx             # entry + whole form: createModel→createForm→<FormWizard> with all steps inline; arrays via FormArraySection
+│       ├── types.ts              # form type + enums + { value, label } option type + constant dictionaries
+│       ├── model.ts              # createModel + initial values + empty-array-element factories
+│       ├── form.schema.ts        # FormSchema: { value: model.$.x, component, componentProps }
+│       ├── form.behavior.ts      # defineFormBehavior: compute / enableWhen / hideWhen / copyFrom / onChange
+│       ├── validation.ts         # ALL validation → { validateStep, validateAll }
+│       ├── data-sources.ts       # options + async loaders (dataSources)
+│       └── api.ts                # submit + prefill/load
+```
+
+Rule of thumb: **one concern → one file at the module root; the whole component tree (all steps) →
+`index.tsx`; validation is a single `validation.ts`.** This is the working default for
+almost every form — reach for folders only when a file stops fitting on a screen.
+
+### Key Files
+
+```typescript
+// forms/credit-application/types.ts
+export type CreditApplicationForm = {
+  loanType: LoanType;
+  loanAmount: number | null;
+  // ...
+};
+
+// forms/credit-application/model.ts
+import { createModel, type FormModel } from '@reformer/core';
+export const createCreditApplicationModel = (): FormModel<CreditApplicationForm> =>
+  createModel<CreditApplicationForm>(createInitialCreditApplication());
+
+// forms/credit-application/form.schema.ts
+import type { FormModel } from '@reformer/core';
+export const creditApplicationSchema = (model: FormModel<CreditApplicationForm>) => ({
+  loanType: { value: model.$.loanType, component: Select, componentProps: { /* ... */ } },
+  personalData: personalDataNodes(model.$.personalData),
+  properties: { array: model.properties, item: propertyItem },
+});
+
+// forms/credit-application/form.behavior.ts
+import { defineFormBehavior, compute, enableWhen } from '@reformer/core/behaviors';
+export const creditApplicationBehavior = defineFormBehavior<CreditApplicationForm>(({ model }) => {
+  compute(model.$.monthlyPayment, () => computeMonthlyPayment(model));
+  enableWhen([model.$.propertyValue], () => model.loanType === 'mortgage', { resetOnDisable: true });
+});
+
+// forms/credit-application/index.tsx — entry: assembles the form, renders <FormWizard> with all steps inline
+import { createForm } from '@reformer/core';
+export const createCreditApplicationForm = () => {
+  const model = createCreditApplicationModel();
+  return createForm({ model, schema: creditApplicationSchema(model), behavior: creditApplicationBehavior });
+};
+```
+
+### Scaling up: folders (large forms)
+
+When the flat module gets unwieldy — steps you want in their own files, sub-forms reused across
+steps, calc/validators that outgrow one file — promote it to a three-folder module: `lib/`
+(domain raw material), `schema/` (the form definition), `components/` (React layout), plus the
+entry component and `index.ts`. Keep the module root to just the entry + `index.ts`; everything
+else lives in a folder.
+
+```
+forms/
+└── [form-name]/                  # Form module — folders (scale-up)
+    ├── [FormName]Form.tsx        # Entry: builds model+form, renders FormWizard + step components
+    ├── index.ts                  # Public re-exports of the module
+    │
+    ├── lib/                      # Domain helpers (target-agnostic)
+    │   ├── types.ts             # Form interface + field enums + { value, label } option type
+    │   ├── constants.ts         # Option dictionaries (LOAN_TYPES, GENDERS, ...)
+    │   ├── calc.ts              # Pure fns for derived fields (age, monthlyPayment, ...)
+    │   ├── custom-validators.ts # Reusable validator factories
+    │   └── api.ts               # Data sources + submit
+    │
+    ├── schema/                   # The form definition
+    │   ├── model.ts             # createModel factory + initial values + array-element factories
+    │   ├── schema.ts            # createForm schema tree ({ value: model.$.x, component })
+    │   ├── validation.ts        # defineValidationSchema + validateModel config ({ validateStep, validateAll })
+    │   ├── behavior.ts          # defineFormBehavior(...)
+    │   └── create-form.ts       # Assembly: createForm({ model, schema, behavior })
+    │
+    └── components/
+        ├── steps/               # One component per wizard step
+        ├── nested-forms/        # Reusable sub-forms (Address, PersonalData, ...)
+        └── ui/                  # Form-specific helper blocks (summary, warnings, sections)
+```
+
+Rule of thumb for this layout: **domain raw material → `lib/`; anything describing the form →
+`schema/`; React layout → `components/`; root = entry + `index.ts`.** In very large forms you
+may co-locate each step's `schema.ts` / `validation.ts` / `behavior.ts` inside its
+`steps/[Step]/` folder, keeping only the shared `model` and cross-step rules in `schema/` — see
+the guide below.
+
+### Scaling
+
+| Complexity | Structure |
+| ---------- | --------------------------------------------------------------------------------------- |
+| Simple | Single file: `index.tsx` (model + schema + behavior + component) |
+| **Minimalist (flat)** | **Default.** One file per concern at the module root (`types` / `model` / `form.schema` / `form.behavior` / `validation` / `data-sources` / `api`) + `index.tsx` with all steps inline |
+| Folders (`lib/` + `schema/` + `components/`) | Large forms: split concerns into folders, one component per step, reusable `nested-forms/` |
+
+> The leading layout is configurable: set `REFORMER_FORM_LAYOUT` (`minimalist` | `folders`)
+> when registering the MCP server to choose which structure the generators lead with. Default
+> is `minimalist`.
+
+> Cross-target variants (renderer-react `renderer.schema.ts` + `renderer.behavior.ts` /
+> renderer-json `renderer.schema.json` + `renderer.behavior.ts` + `registry.ts`), the
+> centralized-vs-co-located choice, and the full reuse map live in the
+> **form-directory-layout** guide (`@reformer/mcp`).

package/docs/llms/16-ui-components.md

@@ -0,0 +1,189 @@
+## 14.5 UI COMPONENT PATTERNS
+
+> **Default rule (read first)**: для UI используй `FormField` из
+> [`@reformer/ui-kit`](../../reformer-ui-kit/) — он покрывает 95% случаев одной
+> строкой `<FormField control={form.x} />`. Свои field-обёртки пиши ТОЛЬКО если
+> ui-kit не подходит (другая design system, особый low-level input).
+>
+> Канонический schema-driven подход:
+>
+> - **компонент** объявляется в схеме как `component: Input` (или `Select`, `Checkbox`, etc.)
+> - **пропсы** компонента — в `componentProps: { label, placeholder, options, type, ... }`
+> - **JSX рендерит**: `<FormField control={form.x} />` БЕЗ дополнительных props
+>
+> См. `find_recipe(package="@reformer/ui-kit", topic="form-field-integration")`
+> для полного руководства.
+
+### Default — FormField из ui-kit (canonical)
+
+```tsx
+import { useMemo } from 'react';
+import { createModel, createForm } from '@reformer/core';
+import { FormField, Input, Select, Checkbox, Button } from '@reformer/ui-kit';
+
+type RegistrationForm = {
+  email: string;
+  country: string;
+  agree: boolean;
+};
+
+function RegistrationPage() {
+  const form = useMemo(() => {
+    const model = createModel<RegistrationForm>({ email: '', country: 'ru', agree: false });
+    const schema = {
+      email: {
+        value: model.$.email,
+        component: Input,
+        componentProps: { label: 'Email', type: 'email', placeholder: 'you@example.com' },
+      },
+      country: {
+        value: model.$.country,
+        component: Select,
+        componentProps: {
+          label: 'Country',
+          options: [
+            { value: 'ru', label: 'Россия' },
+            { value: 'by', label: 'Беларусь' },
+          ],
+        },
+      },
+      agree: {
+        value: model.$.agree,
+        component: Checkbox,
+        componentProps: { label: 'I agree to terms' },
+      },
+    };
+    return createForm<RegistrationForm>({ model, schema });
+  }, []);
+
+  return (
+    <form>
+      <FormField control={form.email} testId="email" />
+      <FormField control={form.country} testId="country" />
+      <FormField control={form.agree} testId="agree" />
+      <Button type="submit">Register</Button>
+    </form>
+  );
+}
+```
+
+`FormField` сам читает `componentProps.label`, `componentProps.placeholder`,
+`componentProps.options` через `useFormControl(...).componentProps` и применяет
+их к нужному `<input>`/`<select>`/etc. Error rendering, `pending` для async-валидаций,
+`data-testid` для e2e — всё из коробки.
+
+### Anti-patterns (не делай так)
+
+❌ **Свои field-компоненты с label-prop'ами в JSX**:
+
+```tsx
+// WRONG — дублирует логику FormField, ломает schema-driven архитектуру
+<Input control={form.email} label="Email" placeholder="..." />
+<Select control={form.country} options={[...]} />
+```
+
+❌ **Передача компонент-пропсов через JSX вместо схемы**:
+
+```tsx
+// WRONG — нарушает single source of truth (схема)
+<FormField control={form.email} label="Email" />
+```
+
+✅ Всё это в схеме:
+
+```ts
+{ email: { component: Input, componentProps: { label: 'Email' } } }
+```
+
+```tsx
+<FormField control={form.email} />
+```
+
+### Advanced — кастомный input через `children` slot
+
+Когда нужен низкоуровневый input, которого нет в ui-kit (маска, особый combobox):
+
+```tsx
+import { FormField } from '@reformer/ui-kit';
+import { InputMask } from 'react-input-mask';
+
+<FormField control={form.phone} testId="phone">
+  <InputMask mask="+7 (999) 999-99-99" />
+</FormField>;
+```
+
+`children` оборачивается в `CdkFormField.Control asChild` и получает все нужные
+props (`value`, `onChange`, `onBlur`, `aria-invalid`).
+
+### Advanced — write your own from scratch (rare)
+
+Если ты не хочешь подключать `@reformer/ui-kit`, пиши свои компоненты на основе
+`useFormControl` — но **сохраняй schema-driven подход**: читай label/placeholder
+из `componentProps`, не из JSX-props.
+
+```tsx
+import type { FieldNode } from '@reformer/core';
+import { useFormControl } from '@reformer/core';
+
+type MyFormFieldProps<T> = { control: FieldNode<T> }; // ← ОДИН prop
+
+function MyFormField<T>({ control }: MyFormFieldProps<T>) {
+  const { value, errors, disabled, shouldShowError, componentProps } = useFormControl(control);
+  // componentProps = { label, placeholder, type, options, ... } — из СХЕМЫ
+  const cp = (componentProps ?? {}) as Record<string, unknown>;
+
+  return (
+    <label>
+      {cp.label && <span>{cp.label as string}</span>}
+      <input
+        type={(cp.type as string) ?? 'text'}
+        value={(value ?? '') as string}
+        placeholder={cp.placeholder as string | undefined}
+        disabled={disabled}
+        onChange={(e) => (control.setValue as (v: unknown) => void)(e.target.value)}
+        onBlur={() => control.markAsTouched()}
+      />
+      {shouldShowError && errors[0] && <span>{errors[0].message}</span>}
+    </label>
+  );
+}
+```
+
+Использование — как у `FormField`:
+
+```tsx
+<MyFormField control={form.email} /> // ← без label-prop
+```
+
+### Integration with UI libraries (shadcn etc.)
+
+> **Через рендерер — без обёртки.** Если ты рендеришь форму через `@reformer/renderer-react` /
+> `@reformer/renderer-json`, вместо ручной обёртки на каждый контрол можно зарегистрировать сырой
+> компонент и передать `settings.resolveFieldAdapter` — рендерер сам сведёт value-seam к диалекту
+> контрола. Ручная обёртка на `useFormControl` (ниже) нужна для прямого JSX без рендерера.
+
+Если есть существующая design system — оборачивай её компоненты в один
+`MyFormField` (как выше) и используй один прop `control`. Не множь обёртки на
+тип input'а — пусть `componentProps.type` диспатчит внутри.
+
+```tsx
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+
+function ShadcnFormField({ control }: { control: FieldNode<string> }) {
+  const { value, errors, disabled, componentProps } = useFormControl(control);
+  const cp = (componentProps ?? {}) as Record<string, unknown>;
+
+  return (
+    <div className="space-y-2">
+      {cp.label && <Label>{cp.label as string}</Label>}
+      <Input
+        value={(value ?? '') as string}
+        onChange={(e) => control.setValue(e.target.value)}
+        disabled={disabled}
+      />
+      {errors[0] && <p className="text-red-500">{errors[0].message}</p>}
+    </div>
+  );
+}
+```