# UI Preview Standard

This plugin must keep parity across:

1. Form editor config preview (admin)
2. Frontend output

## Single Source of Truth

- Shared preview canvas class: `kt-unified-preview-canvas` (form editor only)
- Shared preview CSS contract lives in:
  - `assets/css/klicktipp-frontend.css`
- Priority: **Form editor preview must match published frontend output**.
- Gutenberg block editor intentionally has no live form preview to avoid a second visual maintenance path.
- Admin/block CSS may only bridge layout/container behavior, not redefine field-level form styles.

## Guardrail Test

Run after every UI/CSS change:

```bash
npm run test
```

This executes `scripts/test-preview-contract.mjs`, which validates:

- both preview contexts use `kt-unified-preview-canvas`
- shared preview rules exist centrally
- admin-specific divergent preview selectors are not reintroduced