E-Signature

# Brok UI: E-Signature (`e-signature`)

A token-styled signature capture with a draw mode (signature_pad canvas with clear/undo) and a type mode (script-rendered typed name), writing a PNG data URL or typed value to a hidden input for form submit.

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

## Install

```bash
php artisan ui:add pro/e-signature
```

## Usage

```blade
<div class="mx-auto w-full max-w-lg">
    <x-ui.e-signature name="signature" />
</div>
```

## Use when

- Use when users need to upload, inspect, edit, annotate, or sign real documents as part of the workflow.
- Capturing a signature for a document or agreement directly in the browser, either drawn or typed.
- Needing the captured signature to submit as part of a plain HTML form.

## Avoid when

- Do not use a heavy document interface when the same task can be completed more simply in structured product UI.
- Use only for a real signing task with clear consent, document context, completion state, and a recoverable review path.
- A legally binding, auditable e-signature workflow with identity verification is required; integrate a dedicated e-signature provider instead.
- Only a checkbox-style agreement is needed, with no visual signature; use checkbox.

## Anti-patterns

- Heavy document UI when structured fields are simpler

## Rules

- Use the `<brok:e-signature>` tag (or `<x-ui.e-signature>`) 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/e-signature