# XWUIRecordMaster

Single-record CRUD master: it binds ONE record to an auto-generated form derived from a form definition (its sections, columns, and field elements), and switches that record between the five canonical CRUD states - `create`, `read`, `update`, `delete`, and `json` - by extending `XWUICRUD` and implementing the per-state render hooks. Each field is dynamically mounted at runtime by `mountFormField`, which picks a hand-tuned renderer (text, email, number, select, checkbox, radio, date, time, datetime, slider, icon picker…) and otherwise auto-discovers any matching `XWUIInput*` component from the field registry, falling back to a native input. Use it as the editor body inside an umbrella like `XWUIEntityMaster`, which drives the active state via `setState()` (this component renders no tab strip of its own).

## Usage

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

const master = new XWUIRecordMaster(
    container,
    {
        // The single record bound to the form (an `id` is auto-generated if absent).
        record: { id: 42, name: 'Ada Lovelace', email: 'ada@example.com', active: true },
        // Form definition: sections + columns + field elements drive the generated form.
        formDefinition: {
            config: { name: 'Person' },
            data: {
                sections: [{ id: 'main', title: 'Details' }],
                // …columns/elements (text, email, checkbox, select, date, …)
            },
        },
        state: 'read',
    },
    {
        initialState: 'read',          // 'create' | 'read' | 'update' | 'delete' | 'json'
        validationMode: 'onSubmit',    // 'onChange' | 'onBlur' | 'onSubmit' | 'mixed'
        readOnly: false,
        size: 1,                       // form scale, clamped to 0.5-2
        onSubmit: async (record, ctx) => ({ ok: true, record }),
        onDelete: async (id) => { /* delete by id, then it returns to 'read' */ },
    }
);

// Umbrella/host switches the active CRUD state (no built-in tab strip):
master.setState('update');
```

## Basic Usage

View a single contact record rendered read-only from its form definition.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: View a single contact record rendered read-only from its form definition.
```

## Create a record

An empty form in create mode with validation on submit and an onSubmit handler.

```example
file: examples/CreateRecord.ts
html: examples/CreateRecord.html
title: Create a record
description: An empty form in create mode with validation on submit and an onSubmit handler.
```

## JSON state

The record shown in its raw JSON state, then switched live via setState().

```example
file: examples/JsonState.ts
html: examples/JsonState.html
title: JSON state
description: The record shown in its raw JSON state, then switched live via setState().
```

```api
```