Atom Components

Small, reusable UI primitives. Used internally by layout and editor components, but exported for custom UI composition.

`FormItemLabel`

A form field label with an optional "Required" badge.

<FormItemLabel label="Email" required={true} />

Prop	Type	Description
`label`	`string`	Label text
`required`	`boolean`	Show the Required badge

A layout wrapper that stacks a label above a form control.

<FormItemDisplay>
  <FormItemLabel label="Email" required />
  <input type="text" name="email" />
</FormItemDisplay>

Purely a <div> layout wrapper — applies flex column styling.

A small badge. Used for the "Required" indicator.

<Tag>Required</Tag>

Renders an inline pill-shaped badge with warning colors.

A single option row — two text inputs (value + title) and a delete button. Used by EditorOptions.

<Option
  id="opt-1"
  value="admin"
  title="Administrator"
  onChange={({ id, event, name }) => {}}
  onDelete={({ id }) => {}}
/>

Prop	Type	Description
`id`	`string`	Option ID
`value`	`string`	Option value (submitted)
`title`	`string`	Option display title
`onChange`	`(payload: OnChangePayload) => void`	Called when value or title changes
`onDelete`	`(payload: { id: string }) => void`	Called when delete is clicked

A single card in the toolbox palette. Shows an icon and label.

<ToolboxItem icon={FaFont} name="Text input" style={{ width: 'initial' }} />

Edit and delete action buttons that appear on hover over a form item on the canvas.

<ComponentEditActions id={item.id} onEdit={handleEdit} onDelete={handleDelete} />

Prop	Type	Description
`id`	`string`	Form item ID (required, used for callbacks)
`onEdit`	`(payload: { id: string }) => void`	Edit callback
`onDelete`	`(payload: { id: string }) => void`	Delete callback