# dropzone

Drop-in drag-and-drop file capture for gf.cx portfolio surfaces. Pure client-side; persists to `localStorage`; exports JSON for a CLI helper to write captured files to disk.

## Embed

```html
<link rel="stylesheet" href="https://assets.gf.cx/dropzone/dropzone.css">
<script src="https://assets.gf.cx/dropzone/dropzone.js" defer></script>

<div data-dropzone
     data-field="40-payouts"
     data-context="claim-046414618"
     data-accept="image/*,application/pdf"
     data-multiple="true"
     data-max-mb="5"></div>
```

## Attributes

| Attribute | Default | Purpose |
|---|---|---|
| `data-field` | `untitled` | Form-field name; written into export payload + becomes localStorage key suffix |
| `data-context` | `default` | Namespace (e.g. claim ID, contractor slug) so two pages can have a `replacement_receipt` field without colliding |
| `data-accept` | (any) | Comma-separated MIME patterns: `image/*,application/pdf,.csv` |
| `data-multiple` | `false` | Accept multiple files |
| `data-max-mb` | `5` | Per-file size cap; over → reject |

## Storage shape

`localStorage[dropzone:<context>:<field>]` = JSON array of:

```json
[{ "name": "...", "type": "...", "size": 1234, "dataUrl": "data:...;base64,...", "ts": "2026-05-21T..." }]
```

## Export payload

The “📋 Copy JSON for sync” button copies:

```json
{
  "schema": "dropzone-export.v1",
  "context": "claim-046414618",
  "field": "40-payouts",
  "captured_at": "2026-05-21T...",
  "files": [...]
}
```

Companion CLI: `~/bin/pa_dropzone_apply.py` reads this JSON (clipboard or file) and writes files to canonical paths.

## Events

`dropzone:change` (bubbles) — `{ field, context, files: [...without dataUrl...] }`. Host pages can listen to react to drops.

## Styling tokens

Inherits via CSS vars; host can override `--accent`, `--accent-alert`, `--line-strong`, `--ink-soft` to match its palette.

## Depth

This is Depth 1 (pure client-side, base64 data URLs). Upgrade paths (R2 direct upload via Worker, GitHub-API direct commit) are sketched in `devreports-content/parked_sketch_drag_drop_file_field_pattern_2026-05-21.md`. Lift those when MVP outgrows localStorage’s ~5MB practical per-file cap.