# XWUIFormMaster

A self-contained super form-management component that consumes Config + Schema + Data (the "FORM JSON") and exposes a single tab strip across fourteen states spanning three concerns: the form DEFINITION (`form_add`, `form_edit`, `form_view`, `form_json`), the records LIST (`form_list_view`/`_edit`/`_json` and the `form_record_list_*` equivalents), and a single RECORD's runtime (`form_record_add`, `form_record_edit`, `form_record_view`, `form_record_json`). It owns its own tab bar (built from `enabledStates` over `STATE_TAB_SPEC`) and delegates each panel to a sub-master - `XWUIFormEditorMaster` (visual/JSON definition editor), `XWUIFormRecordMaster` (record add/view/update), and `XWUIFormRecordListMaster` (record list) - managing validation (`validationMode`, plus the static `validateRecordFromDef`), the submit lifecycle through `onRecordSubmit`/`onRecordDelete`, and UX flags (`isDirty`, `isSubmitting`, `submitError`). Unlike the newer `XWUIEntityMaster` umbrella (which splits group vs. CRUD action into a 2-level strip and is multi-entity), `XWUIFormMaster` is a single-form, flat-state component; legacy state names are remapped via `FORM_MASTER_STATE_ALIASES`. Set the starting panel with `data.activeState` or `conf_comp.initialState`.

## Usage

```ts
import { XWUIFormMaster } from './XWUIFormMaster';

const def = {
  config: { uid: 'f-contact', version: '1.0.0', name: 'Contact' },
  schema: {},
  data: { sections: [{ id: 's1', title: 'Main', rows: [
    { id: 'r1', columns: [{ id: 'c1', width: 'full', element: { id: 'email', type: 'email', label: 'Email', required: true } }] },
  ] }] },
};

const master = new XWUIFormMaster(
  document.getElementById('app')!,
  { formDefinition: def, records: [], activeState: 'form_edit' },
  {
    initialState: 'form_edit',
    validationMode: 'onSubmit',
    onRecordSubmit: async (record, ctx) => ({ ok: true, record }),
    onStateChange: (state) => console.log('state', state),
  }
);
```

## Basic Usage

The form umbrella opened on the records list, with a definition and seed rows.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: The form umbrella opened on the records list, with a definition and seed rows.
```

## Add a record

Opens on the record-add panel with onRecordSubmit handling the save.

```example
file: examples/AddRecord.ts
html: examples/AddRecord.html
title: Add a record
description: Opens on the record-add panel with onRecordSubmit handling the save.
```

## Edit the form definition

Opens on the form-edit panel so the schema itself can be reshaped.

```example
file: examples/EditDefinition.ts
html: examples/EditDefinition.html
title: Edit the form definition
description: Opens on the form-edit panel so the schema itself can be reshaped.
```

```api
```