## Image dropzone
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.
Default to the HTML snippet — <aha-image-dropzone> is a standard custom element that renders on open — React/Vue are thin adapters over the same element.
Surfaces: editor, settings.
Props:
- state: empty | loading | filled, default empty. The field's state — drives which affordance shows, at a constant box height
- src: string, default —. The image URL when filled
- fit: contain | cover, default contain. How the filled image sits in the box — contain (whole image, letterboxed) or cover (fill, cropped)
- label: string, default Add image. The empty-state prompt text
- disabled: boolean, default false. Non-interactive; grey fill
- add / change / edit / delete: CustomEvent, default —. Composed intents — the host runs the corresponding modal/flow
Tokens: border, border-hover, border-disabled, color-primary, color-error, bg-container, bg-container-secondary, bg-container-disabled, bg-elevated, bg-overlay, text-default, text-tertiary, icon-muted, radius-default, radius-sm, radius-pill.
Use when: 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).