# Image dropzone
> Generated from image-dropzone.contract.json — do not edit by hand.

The full-width settings image field where the image IS the field — a dashed upload card with empty / loading / filled states and a Change/Edit/Delete overlay; it emits intents, the host owns the modals (SETTINGS-44).

Tier: **leaf-lit**. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.

Surfaces: editor, settings.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `state` | empty | loading | filled | `empty` | The field's state — drives which affordance shows, at a constant box height |
| `src` | string | `—` | The image URL when filled |
| `fit` | contain | cover | `contain` | How the filled image sits in the box — contain (whole image, letterboxed) or cover (fill, cropped) |
| `label` | string | `Add image` | The empty-state prompt text |
| `disabled` | boolean | `false` | Non-interactive; grey fill |
| `add / change / edit / delete` | CustomEvent | `—` | Composed intents — the host runs the corresponding modal/flow |

## Visual standard (measured)
- Zone: full-width, min-height 132, radius 8
- Empty: 1px dashed #E3E3E3 card, centred system-image-square + label; click emits `add`
- Loading: spinner at the SAME 132 min-height — the panel does not jump
- Filled: image fitted (fit=contain default | cover) + hover Change/Edit/Delete overlay; solid border
- Intents: add · change · edit · delete — host owns the modals, this owns none
- Hover: #D3B4FF border + #6A1EBB label/icon
- Disabled: #F1F1F1 fill, #EBEBEB border, not-allowed

## When to use
- **Image dropzone** — a standalone MAIN image field — a background/hero image, an interactive-image base, a picture reveal (SETTINGS-44)
- **Image action button** — a per-OPTION image cell in an option row

The MAIN image field is this dropzone — NOT a hand-rolled "Add image"/"Replace image" button plus a separate "Remove image" danger button (SETTINGS-44). The loading state matches the empty card's height so the panel doesn't jump. It emits intents; the host owns the upload/crop modals.