# Image block — recipe

**Locked 2026-08-04 as part of a452 Phase 5.**
**Tier:** 3 (generic MIT)

## A. Product Description

Image with optional caption and link.

### UI structure

Single `<img>` element with optional caption (below) and link (wraps the img).

### Layout

Block-level. Full width of containing region. Renders inline with surrounding content.

### Geometry

Default sizes: see the CSS file `.fvcms-image`. Font sizes, padding, and margins follow the freshvibe-cms design tokens (defined in `runtime/skin.js`).

### States

Default, hover, active/selected, disabled. The block uses standard CSS pseudo-classes; no JavaScript state changes for the visual states.

## B. Structural Contract

### Inputs (props)

- `props` — an object containing block-specific configuration. See the block's source for the full schema.
- `slots` — an object containing child blocks (for blocks that accept nested content).

### Outputs (events)

- The block may emit custom events via `element.dispatchEvent(new CustomEvent(...))`. See the block's source for the events it emits.
- Common events: `fvcms:block-click`, `fvcms:block-change`, `fvcms:block-submit`.

### Module boundaries

This block does not depend on other blocks. It renders a raw DOM structure that fits into any region in the host page.

### Swap-test

To swap this block for a custom one: replace `modules/image.js` with a file that exports the same `render(props, slots)` function. The function must return a DOM element (or a DocumentFragment).

## C. Reconstruction Notes

### Evidence

The block's source is at `modules/image.js`. The pre-alignment snapshot is at `app-pact/shadow/v0.8.0-pre-fwv-v8-alignment/modules/image.js` for diffing.

### Visual anchors

CSS class: `.fvcms-image` (the block's root element). All block-specific styles use this class as the prefix.

### Behavioural anchors

The block exports: `render(props, slots)` returning a DOM element. The render function is pure (no side effects on import) — see G-11 in `app-pact/anti-drift.md`.

## D. Source-line citations

- Original implementation: `modules/image.js`
- Pre-alignment snapshot: `app-pact/shadow/v0.8.0-pre-fwv-v8-alignment/modules/image.js`
- Module metadata: `modules/image/module-meta.json` (declares Tier 3, dependencies on freshvibe-cms runtime)