# WizardHeader

Sticky per-step header for multi-step flows inside a native host (`?host=…`), where the web hides its own AppHeader/AppFooter. Back control at the start, centered title, optional action at the end, plus a slim segmented progress bar. Back navigation is delegated via `onBack`; top safe-area padding clears the iOS notch. RTL-aware.

[View examples](https://marsam.rahhal.app/components/wizard-header) · [Agent index](https://marsam.rahhal.app/llms.txt)

**Import:** `@rahhal/ui/wizard-header`

**Category:** `nav`

## Behavior

- iOS-style nav bar: `onBack` control (start) · centered `title` · `action` (end). Omit `onBack` on the first step and the start cell stays empty so the title stays centered.
- `step` + `totalSteps` render a segmented progress bar and set an `aria-label` of "Step X of Y".
- Sticks to the top by default and adds `env(safe-area-inset-top)` padding so it clears the notch inside an iOS WebView.
- The back chevron flips under RTL; the whole bar mirrors via logical layout.

## Props

| prop | type | purpose |
| --- | --- | --- |
| title | ReactNode | centered step title (required) |
| subtitle | ReactNode | smaller line under the title |
| onBack | () => void | back handler · omit to hide the control (first step) |
| backLabel | string | label for the back control · default "Back" |
| step | number | 1-based index of the current step |
| totalSteps | number | renders the segmented progress bar |
| action | ReactNode | trailing slot — e.g. close / skip |
| sticky | boolean | stick to top of the scroll container · default true |

## Pairs with

- `BackButton` — the control it renders internally.
- `Stepper` — when you want labeled steps instead of a slim bar.
- The `embedded` skill — gate it with `useIsEmbedded()` so it only shows inside a host.