# @arqel-dev/fields-advanced

[![License](https://img.shields.io/badge/license-MIT-blue.svg)](../../LICENSE)
[![React](https://img.shields.io/badge/react-%5E19-61dafb.svg)](https://react.dev)
[![Status](https://img.shields.io/badge/status-pre--alpha-orange.svg)](#)

Advanced React input components for [Arqel](https://arqel.dev) — RichText, Markdown, Code, Repeater, Builder, KeyValue, Tags, Wizard. Sibling do pacote PHP `arqel-dev/fields-advanced`: o PHP define os types/setters; este pacote JS provê o render layer.

## Status

🚧 **Pre-alpha** — FIELDS-ADV-010..018 entregues: skeleton do pacote + lazy registry para 8 component slots, com os 8 inputs (RichText, Markdown, Code, Repeater, Builder, KeyValue, Tags, Wizard) totalmente implementados.

## Install

```bash
pnpm add @arqel-dev/fields-advanced @arqel-dev/ui @arqel-dev/types
```

## Usage

```tsx
// resources/js/app.tsx
import '@arqel-dev/ui/styles.css';
import '@arqel-dev/fields/register';            // built-ins (text, number, ...)
import '@arqel-dev/fields-advanced/register';   // side effect: lazy register dos 8 slots

import { createArqelApp } from '@arqel-dev/react/inertia';

createArqelApp({ appName: 'Acme', pages: import.meta.glob('./Pages/**/*.tsx') });
```

Cada `registerField()` envolve um `import()` dinâmico em `React.lazy`, então o chunk só é carregado quando o field correspondente renderizar pela primeira vez (Suspense boundary required no app shell — ver `@arqel-dev/ui`).

## Subpath imports

```ts
import { RichTextInput } from '@arqel-dev/fields-advanced/rich-text';
import { MarkdownInput } from '@arqel-dev/fields-advanced/markdown';
import { CodeInput }     from '@arqel-dev/fields-advanced/code';
import { RepeaterInput } from '@arqel-dev/fields-advanced/repeater';
import { BuilderInput }  from '@arqel-dev/fields-advanced/builder';
import { KeyValueInput } from '@arqel-dev/fields-advanced/key-value';
import { TagsInput }     from '@arqel-dev/fields-advanced/tags';
import { WizardInput }   from '@arqel-dev/fields-advanced/wizard';
```

## Links

- [Documentação](https://arqel.dev/docs/fields-advanced) — em construção
- [PLANNING](../../PLANNING/09-fase-2-essenciais.md) — tickets `FIELDS-ADV-*`