booker

# 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.