# XWUIFormEditorMaster

The form-DEFINITION CRUD master: it owns one form definition (sections → rows → columns → elements) and switches it across the five canonical CRUD states by extending `XWUICRUD`. `update` (the default initial state) and `create` render the full visual editor inside an `XWUIShell` - FIRST is a draggable component palette grouped by category, BODY is section-tabbed drop-canvas, LAST is a per-element property panel plus an optional live preview; `read` renders that canvas read-only (body only); `delete` is a confirmation that resets the definition to an empty shell; `json` is a validated textarea editor (Apply/Reset). The palette is sourced from a form-components manifest (`formComponentsManifest`, object or URL, merged with auto-discovered inputs via `autoInputsRegistry`); dropping a palette item builds a new element through `createElementFromSchema()`. The live preview (when `showPreview` is on) mounts an `XWUIRecordMaster` in `read` state against the edited definition. State is driven externally via `setState()` - the umbrella `XWUIEntityMaster` mounts this as its Entity (form-definition) sub-master and fires `onFormDefinitionChange` on every edit.

## Usage

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

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

const editor = new XWUIFormEditorMaster(
  document.getElementById('app')!,
  { formDefinition: def, activeSectionId: 'main', state: 'update' },
  {
    initialState: 'update',
    showPreview: true,
    onFormDefinitionChange: (next) => console.log('definition changed', next),
  }
);

editor.setState('json');
```

## Basic Usage

The visual form-definition editor in update mode with a starter section.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: The visual form-definition editor in update mode with a starter section.
```

## With live preview

The editor showing a side-by-side form preview and reporting definition edits.

```example
file: examples/WithPreview.ts
html: examples/WithPreview.html
title: With live preview
description: The editor showing a side-by-side form preview and reporting definition edits.
```

## JSON state

Open the editor straight into its JSON view of the form definition.

```example
file: examples/JsonState.ts
html: examples/JsonState.html
title: JSON state
description: Open the editor straight into its JSON view of the form definition.
```

```api
```