Document Splits

# Brok UI: Document Splits (`document-splits`)

A page-thumbnail grid that groups a PDF's pages into multiple output documents by inserting split points between thumbnails, rendered with pdf.js.

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

## Install

```bash
php artisan ui:add pro/document-splits
```

## Usage

```blade
<div class="mx-auto w-full max-w-4xl">
    <x-ui.document-splits src="/samples/sample.pdf" />
</div>
```

## Use when

- Use when users need to upload, inspect, edit, annotate, or sign real documents as part of the workflow.
- Letting a user split one multi-page PDF into several output documents by choosing where each break falls.
- Needing a page-thumbnail grid with toggleable split points instead of a text-only page range input.

## Avoid when

- Do not use a heavy document interface when the same task can be completed more simply in structured product UI.
- The PDF should just be viewed or paged through, not split; use pdf-viewer instead.
- The workflow only ever needs a fixed, predetermined page range with no interactive choice.

## Anti-patterns

- Heavy document UI when structured fields are simpler

## Rules

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