Schema Builder

# Brok UI: Schema Builder (`schema-builder`)

Visually build a JSON Schema for document extraction with nested fields, types, and a live preview.

Brok UI is a Laravel Blade component registry. Installed components are plain Blade files the app owns.

## Install

```bash
php artisan ui:add pro/schema-builder
```

## Usage

```blade
@php
    $fields = [
        ['name' => 'invoice_number', 'type' => 'string', 'required' => true, 'description' => 'The invoice identifier'],
        ['name' => 'total', 'type' => 'number', 'required' => true, 'description' => 'Grand total amount'],
        [
            'name' => 'vendor',
            'type' => 'object',
            'required' => true,
            'description' => 'Vendor details',
            'children' => [
                ['name' => 'name', 'type' => 'string', 'required' => true, 'description' => 'Vendor name'],
                ['name' => 'address', 'type' => 'string', 'required' => false, 'description' => 'Billing address'],
            ],
        ],
        [
            'name' => 'line_items',
            'type' => 'array',
            'required' => false,
            'description' => 'Itemized charges',
            'children' => [
                ['name' => 'description', 'type' => 'string', 'required' => true],
                ['name' => 'amount', 'type' => 'number', 'required' => true],
                ['name' => 'quantity', 'type' => 'integer', 'required' => false],
            ],
        ],
    ];
@endphp

<div class="mx-auto w-full max-w-2xl">
    <x-ui.schema-builder :fields="$fields" title="Invoice" />
</div>
```

## Use when

- Use when users need to upload, inspect, edit, annotate, or sign real documents as part of the workflow.
- Letting a non-technical user define the fields a document-extraction or data-import pipeline should pull out, without writing raw JSON Schema.
- Needing nested object and array fields with a live schema preview as the user edits.

## Avoid when

- Do not use a heavy document interface when the same task can be completed more simply in structured product UI.
- The schema is fixed and defined by developers; hand-write the JSON Schema instead of adding a visual editor.
- Only a flat list of simple fields is ever needed; a plain repeated form row may be simpler than the full tree editor.

## Anti-patterns

- Heavy document UI when structured fields are simpler

## Rules

- Use the `<brok:schema-builder>` tag (or `<x-ui.schema-builder>`) in Blade; do not rewrite the component.
- Prefer the documented props and variants over utility-class overrides; when a utility must win, use the `!` important modifier.
- Use semantic design tokens (`bg-primary`, `text-muted-foreground`), never raw colour utilities.
- Keep the `data-slot` attributes; they are the styling and test hooks.

## Links

- Docs: https://brokui.dev/docs/components/schema-builder