Booker

---
name: booker
description: Public booking flow — the state machine, animations, and URL/app-state sync.
---

# Booker

## Stages

1. **pick-date** — month grid shows days with availability
2. **pick-slot** — available slots on the selected day
3. **fill-form** — attendee form (name, email, custom fields)
4. **success** — confirmation with add-to-calendar buttons

Plus **reschedule** mode — prefilled from existing booking uid.

## Animations

Use motion (`motion/react`) `AnimatePresence` with `fadeInLeft` variants. The outer
container animates its width across stages: narrow (calendar only) → wider
(calendar + slots) → widest (form).

## Timezone + 12/24h

- Detect browser timezone at mount; let user override via dropdown.
- Persist choice to localStorage key `scheduling.timezone`.
- 12/24h toggle near slot column; persist to user settings.

## URL + application-state sync

Selected date, slot, timezone, and duration are mirrored to URL query
params AND `application_state.booker-state` so:
- Page refresh preserves selection.
- Agent can read the user's current pick.

## Copy-link affordance

Every event-type row has a "copy link" button. On click, write to clipboard
and toast "Copied!" with Sonner. Works on mobile Safari too.

## Accessibility

- Month grid is ARIA `grid` + `gridcell` with arrow-key nav.
- Slot buttons are keyboard-focusable, with `aria-pressed`.
- Focus returns to trigger on modal close.
- Toast content announced via `aria-live=polite`.

## Mobile

`< 768px`: stack vertically. Calendar full-width, slot list below, form
slides in as full-screen sheet.