Document Viewers

# Brok UI: Excel Viewer (`excel-viewer`)

Renders an .xlsx workbook (fetched from `src` or given inline as `data`) as a token-styled table with sheet tabs inside document-frame; `editable` turns every cell into a contenteditable textbox that dispatches `workbook-change` with the in-memory sheets.

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

## Install

```bash
php artisan ui:add pro/excel-viewer
```

## Usage

```blade
<div class="mx-auto h-[32rem] w-full max-w-4xl">
    <x-ui.excel-viewer src="/samples/sample.xlsx" />
</div>
```

## Use when

- Use when users need to upload, inspect, edit, annotate, or sign real documents as part of the workflow.
- Previewing or lightly editing an .xlsx workbook with multiple sheets entirely in the browser.
- Needing an in-memory spreadsheet edit surface that dispatches a change event instead of round-tripping to a server.

## Avoid when

- Do not use a heavy document interface when the same task can be completed more simply in structured product UI.
- The source is a plain CSV with a single table; use csv-viewer for a lighter-weight viewer.
- Full spreadsheet functionality (formulas, charts, formatting) is required; this renders values as a table, not a spreadsheet engine.

## Anti-patterns

- Heavy document UI when structured fields are simpler

## Rules

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