{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"booking","type":"registry:block","title":"Booking","description":"Book a call on one card: the time you pick prints onto the host’s ticket, then the times turn into your details and the confirmation.","author":"Hairline UI","dependencies":["lucide-react"],"registryDependencies":["https://hairlineui.com/r/input.json?as=dependency","https://hairlineui.com/r/number-roll.json?as=dependency","https://hairlineui.com/r/status-button.json?as=dependency","https://hairlineui.com/r/text-morph.json?as=dependency","https://hairlineui.com/r/textarea.json?as=dependency"],"files":[{"path":"registry/booking.tsx","type":"registry:component","content":"// Hairline UI · booking · MIT License\n// Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components\n\n\"use client\";\n\nimport * as React from \"react\";\nimport { ArrowUpRight, CalendarPlus, ChevronLeft, ChevronRight, Clock, Video } from \"lucide-react\";\nimport { Faces, FACES_MORPH } from \"./faces\";\nimport { Input } from \"./input\";\nimport { NumberRoll } from \"./number-roll\";\nimport { StatusButton, type ActionStatus } from \"./status-button\";\nimport { Textarea } from \"./textarea\";\nimport { TextMorph } from \"./text-morph\";\nimport { EASE_THROW, INTERACTION_FOCUS, INTERACTION_PRESS, useInteractionReducedMotion } from \"./ui-interaction-motion\";\n\n/* ─────────────────────────────────────────────────────────\n * BOOKING: a time you pick prints onto your ticket\n *\n * pick the host's ticket is the lit surface, a stub punched\n * off with two notches and a perforation. A week of\n * days and its free times sit beside it; the time you\n * pick prints onto the stub, its digits rolling the\n * way the time moved, the date morphing\n * details the times turn into your name, email and a note on\n * the same surface; Book goes Booking → Booked\n * booked a check stamps itself onto the stub, the stub reads\n * Confirmed, and the surface offers the calendar file,\n * the meeting link and Cancel\n *\n * The calendar is yours: getSlots gives the free start times of\n * the week on screen (once per week, aborted when you move on),\n * onBook makes the booking and onCancel undoes it. Throw and the\n * block says why where it happened.\n * ───────────────────────────────────────────────────────── */\n\nexport interface BookingHost {\n name: string;\n /** A line under the name, e.g. \"Founder, Relay\". */\n role?: string;\n /** Photo URL; initials when missing. */\n src?: string;\n}\n\nexport interface BookingRequest {\n start: Date;\n end: Date;\n /** The IANA zone the times were shown in. */\n timeZone: string;\n name: string;\n email: string;\n note: string;\n}\n\nexport interface BookingConfirmation {\n /** Your booking's id, passed back to onCancel. */\n id?: string;\n /** A video call link, shown once booked. */\n meetingUrl?: string;\n}\n\nexport type BookedCall = BookingRequest & BookingConfirmation;\n\nexport interface BookingProps {\n host: BookingHost;\n /** What's being booked, e.g. \"Intro call\". */\n title: string;\n description?: string;\n /** Minutes. */\n duration: number;\n /** Where it happens, e.g. \"Google Meet\". */\n location?: string;\n /** Free start times from `from` up to `to` (one week). Called once per week shown; abort when signal fires. */\n getSlots: (range: { from: Date; to: Date; timeZone: string }, signal: AbortSignal) => Promise>;\n /** Make the booking; resolve with its id and meeting link, throw an Error to show its message. */\n onBook: (request: BookingRequest) => Promise;\n /** Cancel a booking made here; shows Cancel booking once booked. */\n onCancel?: (booking: BookedCall) => Promise;\n /** IANA zone to show times in; defaults to the visitor's. */\n timeZone?: string;\n locale?: string;\n /** 12-hour clock; defaults to the locale's. */\n hour12?: boolean;\n /** 0 is Sunday, 1 is Monday. */\n weekStartsOn?: 0 | 1;\n /** A day in the first week shown; defaults to today. */\n defaultDate?: Date | string | number;\n className?: string;\n}\n\ntype Day = { y: number; m: number; d: number };\ntype Step = \"pick\" | \"details\" | \"done\";\ntype Week = { status: \"ready\" | \"error\"; slots: number[] };\n\nconst EASE = \"cubic-bezier(0.16,1,0.3,1)\";\nconst NOTCH = 10;\n\n/* ── Calendar days in a zone, without a date library ── */\nconst pad = (n: number) => String(n).padStart(2, \"0\");\nconst keyOf = (d: Day) => `${d.y}-${pad(d.m)}-${pad(d.d)}`;\nconst noon = (d: Day) => new Date(Date.UTC(d.y, d.m - 1, d.d, 12));\nconst addDays = (d: Day, n: number): Day => {\n const t = new Date(Date.UTC(d.y, d.m - 1, d.d + n));\n return { y: t.getUTCFullYear(), m: t.getUTCMonth() + 1, d: t.getUTCDate() };\n};\nconst startOfWeek = (d: Day, first: number) => addDays(d, -((noon(d).getUTCDay() - first + 7) % 7));\n\nconst clocks = new Map();\nfunction wallClock(at: number, timeZone: string) {\n let f = clocks.get(timeZone);\n if (!f) {\n f = new Intl.DateTimeFormat(\"en-US\", { timeZone, hourCycle: \"h23\", year: \"numeric\", month: \"numeric\", day: \"numeric\", hour: \"numeric\", minute: \"numeric\" });\n clocks.set(timeZone, f);\n }\n const p = Object.fromEntries(f.formatToParts(at).map((x) => [x.type, Number(x.value)]));\n return { y: p.year, m: p.month, d: p.day, h: p.hour % 24, min: p.minute };\n}\nconst dayIn = (at: number, timeZone: string): Day => {\n const { y, m, d } = wallClock(at, timeZone);\n return { y, m, d };\n};\n/** The instant the clock in `timeZone` reads midnight on `day` (two passes settle a clock change). */\nfunction midnight(day: Day, timeZone: string) {\n const target = Date.UTC(day.y, day.m - 1, day.d);\n let t = target;\n for (let i = 0; i < 2; i++) {\n const w = wallClock(t, timeZone);\n t = target - (Date.UTC(w.y, w.m - 1, w.d, w.h, w.min) - t);\n }\n return new Date(t);\n}\n\n/* ── The calendar file and link, from the booking itself ── */\nconst stamp = (d: Date) => d.toISOString().replace(/[-:]/g, \"\").replace(/\\.\\d{3}/, \"\");\nconst icsText = (s: string) => s.replace(/[\\\\;,]/g, (c) => `\\\\${c}`).replace(/\\n/g, \"\\\\n\");\nfunction calendarFile(b: BookedCall, title: string, host: string, location: string | undefined, made: Date) {\n const lines = [\n \"BEGIN:VCALENDAR\",\n \"VERSION:2.0\",\n \"PRODID:-//Booking//EN\",\n \"BEGIN:VEVENT\",\n `UID:${b.id ?? stamp(b.start)}-${b.email}`,\n `DTSTAMP:${stamp(made)}`,\n `DTSTART:${stamp(b.start)}`,\n `DTEND:${stamp(b.end)}`,\n `SUMMARY:${icsText(`${title} with ${host}`)}`,\n ...(b.meetingUrl || location ? [`LOCATION:${icsText(b.meetingUrl ?? location ?? \"\")}`] : []),\n ...(b.note ? [`DESCRIPTION:${icsText(b.note)}`] : []),\n \"END:VEVENT\",\n \"END:VCALENDAR\",\n ];\n return `data:text/calendar;charset=utf-8,${encodeURIComponent(lines.join(\"\\r\\n\"))}`;\n}\nfunction googleLink(b: BookedCall, title: string, host: string, location: string | undefined) {\n const q = new URLSearchParams({ action: \"TEMPLATE\", text: `${title} with ${host}`, dates: `${stamp(b.start)}/${stamp(b.end)}` });\n if (b.meetingUrl || location) q.set(\"location\", b.meetingUrl ?? location ?? \"\");\n if (b.note) q.set(\"details\", b.note);\n return `https://calendar.google.com/calendar/render?${q}`;\n}\n\n/* ── The lit ticket: --primary lit from its top corner by --primary-foreground, a deeper lower edge, 1px light edges ── */\nconst mix = (color: string, amount: number, into = \"transparent\") => `color-mix(in oklab, ${color} ${amount}%, ${into})`;\nconst NOTCHES = `radial-gradient(circle at 0 var(--cut, 60%), transparent ${NOTCH - 1}px, #000 ${NOTCH - 0.5}px), radial-gradient(circle at 100% var(--cut, 60%), transparent ${NOTCH - 1}px, #000 ${NOTCH - 0.5}px)`;\nconst TICKET: React.CSSProperties = {\n backgroundColor: \"var(--primary)\",\n backgroundImage: `radial-gradient(130% 80% at 0% 0%, ${mix(\"var(--primary-foreground)\", 24)} 0%, transparent 55%), linear-gradient(170deg, transparent 40%, ${mix(\"black\", 24)} 100%)`,\n boxShadow: `inset 0 1px 0 ${mix(\"var(--primary-foreground)\", 38)}, inset 0 0 0 1px ${mix(\"var(--primary-foreground)\", 12)}`,\n // Two notches punched from the edges at the perforation (--cut is measured), one half of the mask each.\n maskImage: NOTCHES,\n WebkitMaskImage: NOTCHES,\n maskSize: \"51% 100%\",\n WebkitMaskSize: \"51% 100%\",\n maskPosition: \"left, right\",\n WebkitMaskPosition: \"left, right\",\n maskRepeat: \"no-repeat\",\n WebkitMaskRepeat: \"no-repeat\",\n};\nconst PERFORATION: React.CSSProperties = { backgroundImage: `repeating-linear-gradient(90deg, ${mix(\"var(--primary-foreground)\", 30)} 0 5px, transparent 5px 10px)` };\nconst NOTCH_EDGE: React.CSSProperties = { width: NOTCH * 2, height: NOTCH * 2, top: 0, boxShadow: `inset 0 0 0 1px ${mix(\"var(--primary-foreground)\", 22)}` };\nconst CARD: React.CSSProperties = {\n backgroundImage: `linear-gradient(180deg, var(--card), ${mix(\"var(--card)\", 95, \"var(--foreground)\")})`,\n boxShadow: `0 0 0 1px var(--border), inset 0 1px 0 ${mix(\"var(--background)\", 85)}`,\n};\nconst LIT: React.CSSProperties = {\n backgroundImage: `linear-gradient(180deg, ${mix(\"var(--primary-foreground)\", 16)}, transparent 60%)`,\n boxShadow: `inset 0 1px 0 ${mix(\"var(--primary-foreground)\", 32)}, inset 0 0 0 1px ${mix(\"black\", 10)}`,\n};\n\nconst initials = (name: string) =>\n name\n .split(/\\s+/)\n .filter(Boolean)\n .slice(0, 2)\n .map((w) => w[0]?.toUpperCase())\n .join(\"\");\n\n/** The time on the stub: hours and minutes are odometers that roll the way the time moved. */\nfunction PrintedTime({ at, format, locale }: { at: number; format: Intl.DateTimeFormat; locale?: string }) {\n return (\n <>\n {format.formatToParts(at).map((p, i) => {\n const n = Number(p.value);\n if ((p.type === \"hour\" || p.type === \"minute\") && !Number.isNaN(n)) {\n return ;\n }\n if (p.type === \"dayPeriod\") {\n return (\n \n {p.value}\n \n );\n }\n return {p.value};\n })}\n \n );\n}\n\n/** A check drawn onto the stub once the time is booked. */\nfunction Stamp({ on, reduced }: { on: boolean; reduced: boolean }) {\n return (\n \n \n \n \n \n );\n}\n\nconst ENTER = (dir: number): Keyframe[] => [\n { opacity: 0, transform: `translateX(${dir * 22}px)`, filter: \"blur(4px)\" },\n { opacity: 1, transform: \"none\", filter: \"blur(0px)\" },\n];\n\nexport function Booking({\n host,\n title,\n description,\n duration,\n location,\n getSlots,\n onBook,\n onCancel,\n timeZone: zoneProp,\n locale,\n hour12,\n weekStartsOn = 1,\n defaultDate,\n className = \"\",\n}: BookingProps) {\n const reduced = useInteractionReducedMotion();\n const baseId = React.useId();\n\n // Today and the visitor's zone exist only in the browser, so the calendar starts once mounted.\n const [ready, setReady] = React.useState(false);\n const [localZone, setLocalZone] = React.useState(null);\n const [today, setToday] = React.useState(null);\n const [week, setWeek] = React.useState(null);\n const zone = zoneProp ?? localZone;\n\n const [weeks, setWeeks] = React.useState>({});\n const [dayPick, setDayPick] = React.useState(null);\n const [slot, setSlot] = React.useState(null);\n const [step, setStep] = React.useState(\"pick\");\n const [name, setName] = React.useState(\"\");\n const [email, setEmail] = React.useState(\"\");\n const [note, setNote] = React.useState(\"\");\n const [invalid, setInvalid] = React.useState<{ name?: string; email?: string }>({});\n const [status, setStatus] = React.useState(\"idle\");\n const [error, setError] = React.useState(null);\n const [booked, setBooked] = React.useState<{ call: BookedCall; made: Date } | null>(null);\n const [cancel, setCancel] = React.useState<{ status: ActionStatus; confirm: boolean; error?: string }>({ status: \"idle\", confirm: false });\n const [said, setSaid] = React.useState(\"\");\n\n const getSlotsRef = React.useRef(getSlots);\n React.useLayoutEffect(() => {\n getSlotsRef.current = getSlots;\n });\n\n React.useEffect(() => {\n const frame = requestAnimationFrame(() => {\n const z = zoneProp ?? Intl.DateTimeFormat().resolvedOptions().timeZone;\n const now = dayIn(Date.now(), z);\n setLocalZone(Intl.DateTimeFormat().resolvedOptions().timeZone);\n setToday(now);\n setWeek(startOfWeek(defaultDate !== undefined ? dayIn(new Date(defaultDate).getTime(), z) : now, weekStartsOn));\n setReady(true);\n });\n return () => cancelAnimationFrame(frame);\n // The first week is chosen once; after that the visitor moves it.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const weekKey = week && zone ? `${zone}|${keyOf(week)}` : null;\n const entry = weekKey ? weeks[weekKey] : undefined;\n const loading = Boolean(weekKey) && !entry;\n\n // One request per week shown, aborted when you move on before it answers.\n React.useEffect(() => {\n if (!weekKey || !week || !zone || !loading) return;\n const controller = new AbortController();\n const from = midnight(week, zone);\n const to = midnight(addDays(week, 7), zone);\n getSlotsRef\n .current({ from, to, timeZone: zone }, controller.signal)\n .then((list) => {\n if (controller.signal.aborted) return;\n const slots = [...new Set(list.map((s) => new Date(s).getTime()))].filter((t) => t >= from.getTime() && t < to.getTime()).sort((a, b) => a - b);\n setWeeks((p) => ({ ...p, [weekKey]: { status: \"ready\", slots } }));\n })\n .catch(() => {\n if (controller.signal.aborted) return;\n setWeeks((p) => ({ ...p, [weekKey]: { status: \"error\", slots: [] } }));\n });\n return () => controller.abort();\n }, [weekKey, week, zone, loading]);\n\n const fmt = React.useMemo(() => {\n const tz = zone ?? undefined;\n const time = new Intl.DateTimeFormat(locale, { timeZone: tz, hour: \"numeric\", minute: \"2-digit\", hour12 });\n const date = new Intl.DateTimeFormat(locale, { timeZone: \"UTC\", weekday: \"long\", day: \"numeric\", month: \"long\" });\n const short = new Intl.DateTimeFormat(locale, { timeZone: \"UTC\", weekday: \"short\", day: \"numeric\", month: \"short\" });\n const weekday = new Intl.DateTimeFormat(locale, { timeZone: \"UTC\", weekday: \"short\" });\n const month = new Intl.DateTimeFormat(locale, { timeZone: \"UTC\", month: \"long\", year: \"numeric\" });\n const offset = tz ? new Intl.DateTimeFormat(locale, { timeZone: tz, timeZoneName: \"shortOffset\" }) : null;\n return { time, date, short, weekday, month, offset };\n }, [locale, zone, hour12]);\n\n const days = React.useMemo(() => (week ? Array.from({ length: 7 }, (_, i) => addDays(week, i)) : []), [week]);\n const byDay = React.useMemo(() => {\n const map = new Map();\n if (!zone || !entry) return map;\n for (const t of entry.slots) {\n const k = keyOf(dayIn(t, zone));\n map.set(k, [...(map.get(k) ?? []), t]);\n }\n return map;\n }, [entry, zone]);\n\n const todayKey = today ? keyOf(today) : \"\";\n const dayKey = (dayPick && byDay.has(dayPick) && days.some((d) => keyOf(d) === dayPick) ? dayPick : days.map(keyOf).find((k) => byDay.has(k))) ?? null;\n const day = days.find((d) => keyOf(d) === dayKey) ?? null;\n const daySlots = dayKey ? (byDay.get(dayKey) ?? []) : [];\n const picked = slot !== null && daySlots.includes(slot) ? slot : null;\n const shownAt = step === \"done\" && booked ? booked.call.start.getTime() : picked;\n const canPrev = Boolean(week && today && keyOf(week) > keyOf(startOfWeek(today, weekStartsOn)));\n const busy = status === \"pending\" || status === \"success\";\n\n // The stub keeps the last time it printed while it fades, so the next pick rolls from it.\n const [printed, setPrinted] = React.useState(null);\n if (shownAt !== null && shownAt !== printed) setPrinted(shownAt);\n\n const offsetAt = shownAt ?? (week && zone ? midnight(week, zone).getTime() : 0);\n const zoneName = zone ? `${zone.split(\"/\").pop()?.replace(/_/g, \" \")} time` : \"\";\n const zoneOffset = fmt.offset?.formatToParts(offsetAt).find((p) => p.type === \"timeZoneName\")?.value;\n const zoneLabel = zoneOffset ? `${zoneName} · ${zoneOffset}` : zoneName;\n const shownDay = shownAt !== null && zone ? dayIn(shownAt, zone) : day;\n const dateLabel = shownDay ? fmt.date.format(noon(shownDay)) : \"Choose a day\";\n\n /* ── Motion that marks a change: the week and the day's times come in from the side you moved to ── */\n const stripRef = React.useRef(null);\n const gridRef = React.useRef(null);\n const ringRef = React.useRef(null);\n const ringShown = React.useRef(false);\n const lastWeek = React.useRef(null);\n const lastDay = React.useRef(null);\n const ticketRef = React.useRef(null);\n const perfRef = React.useRef(null);\n const faceRefs = React.useRef<(HTMLDivElement | null)[]>([]);\n\n React.useLayoutEffect(() => {\n const prev = lastWeek.current;\n lastWeek.current = weekKey;\n if (!prev || !weekKey || prev === weekKey || reduced) return;\n stripRef.current?.animate(ENTER(weekKey > prev ? 1 : -1), { duration: 420, easing: EASE });\n }, [weekKey, reduced]);\n\n React.useLayoutEffect(() => {\n const prev = lastDay.current;\n lastDay.current = dayKey;\n if (!prev || !dayKey || prev === dayKey || reduced) return;\n gridRef.current?.animate(ENTER(dayKey > prev ? 1 : -1), { duration: 380, easing: EASE });\n }, [dayKey, reduced]);\n\n // The ring on the picked time is thrown between times; it's written to the element, not to state.\n React.useLayoutEffect(() => {\n const ring = ringRef.current;\n const grid = gridRef.current;\n if (!ring) return;\n const place = () => {\n const btn = picked !== null ? grid?.querySelector(`[data-slot=\"${picked}\"]`) : null;\n if (!btn) {\n ring.style.opacity = \"0\";\n ringShown.current = false;\n return;\n }\n const glide = ringShown.current && !reduced;\n ring.style.transition = glide ? `transform 440ms ${EASE_THROW}, width 380ms ${EASE}, opacity 200ms` : \"opacity 200ms\";\n ring.style.width = `${btn.offsetWidth}px`;\n ring.style.height = `${btn.offsetHeight}px`;\n ring.style.transform = `translate(${btn.offsetLeft}px, ${btn.offsetTop}px)`;\n ring.style.opacity = \"1\";\n ringShown.current = true;\n };\n place();\n if (!grid) return;\n const observer = new ResizeObserver(place);\n observer.observe(grid);\n return () => observer.disconnect();\n }, [picked, dayKey, reduced, loading]);\n\n // The notches sit wherever the perforation is, in either layout.\n React.useLayoutEffect(() => {\n const ticket = ticketRef.current;\n const perf = perfRef.current;\n if (!ticket || !perf) return;\n const place = () => ticket.style.setProperty(\"--cut\", `${perf.offsetTop + perf.offsetHeight / 2}px`);\n place();\n const observer = new ResizeObserver(place);\n observer.observe(ticket);\n return () => observer.disconnect();\n }, []);\n\n // Focus follows the surface to its next face.\n const faceIndex = step === \"pick\" ? 0 : step === \"details\" ? 1 : 2;\n const moved = React.useRef(false);\n React.useEffect(() => {\n if (!ready) return;\n if (!moved.current) {\n moved.current = true;\n return;\n }\n faceRefs.current[faceIndex]?.focus({ preventScroll: true });\n }, [faceIndex, ready]);\n\n const goWeek = (dir: number) => {\n if (!week || (dir < 0 && !canPrev)) return;\n setWeek(addDays(week, dir * 7));\n setSlot(null);\n };\n\n const pickDay = (k: string) => {\n if (k === dayKey) return;\n setDayPick(k);\n setSlot(null);\n };\n\n const timeShort = (t: number) => fmt.time.format(t);\n const refetch = (key: string | null) => {\n if (!key) return;\n setWeeks((p) => {\n const next = { ...p };\n delete next[key];\n return next;\n });\n };\n\n const book = async () => {\n if (picked === null || !zone || busy) return;\n const problems = {\n name: name.trim() ? undefined : \"Add your name\",\n email: /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(email.trim()) ? undefined : email.trim() ? \"That email doesn’t look right\" : \"Add your email\",\n };\n setInvalid(problems);\n if (problems.name || problems.email) return;\n const request: BookingRequest = { start: new Date(picked), end: new Date(picked + duration * 60_000), timeZone: zone, name: name.trim(), email: email.trim(), note: note.trim() };\n setStatus(\"pending\");\n setError(null);\n try {\n const confirmation = (await onBook(request)) ?? {};\n setStatus(\"success\");\n setBooked({ call: { ...request, ...confirmation }, made: new Date() });\n setSaid(`Booked ${fmt.date.format(noon(dayIn(picked, zone)))} at ${timeShort(picked)}`);\n window.setTimeout(() => setStep(\"done\"), reduced ? 500 : 700);\n } catch (e) {\n setStatus(\"error\");\n setError(e instanceof Error && e.message ? e.message : \"Couldn’t book that time. Try again.\");\n // The week may have changed under you (someone took the time): ask for it again.\n refetch(weekKey);\n }\n };\n\n const back = () => {\n if (busy) return;\n setStep(\"pick\");\n setStatus(\"idle\");\n setError(null);\n setInvalid({});\n };\n\n const cancelBooking = async () => {\n if (!booked || !onCancel || cancel.status === \"pending\" || cancel.status === \"success\") return;\n if (!cancel.confirm) {\n setCancel({ status: \"idle\", confirm: true });\n return;\n }\n setCancel({ status: \"pending\", confirm: true });\n try {\n await onCancel(booked.call);\n setCancel({ status: \"success\", confirm: true });\n setSaid(\"Booking cancelled\");\n window.setTimeout(\n () => {\n setStep(\"pick\");\n setStatus(\"idle\");\n setSlot(null);\n setCancel({ status: \"idle\", confirm: false });\n refetch(weekKey);\n window.setTimeout(() => setBooked(null), FACES_MORPH);\n },\n reduced ? 500 : 800,\n );\n } catch (e) {\n setCancel({ status: \"error\", confirm: true, error: e instanceof Error && e.message ? e.message : \"Couldn’t cancel. Try again.\" });\n }\n };\n\n // Asked to confirm a cancel, then left alone: the button goes back to how it was.\n React.useEffect(() => {\n if (!cancel.confirm || cancel.status !== \"idle\") return;\n const timer = window.setTimeout(() => setCancel({ status: \"idle\", confirm: false }), 4000);\n return () => window.clearTimeout(timer);\n }, [cancel]);\n\n const roving = (e: React.KeyboardEvent, keys: string[], current: string | null, select: (k: string) => void, cols = 1) => {\n const i = Math.max(0, current ? keys.indexOf(current) : 0);\n const moves: Record = { ArrowRight: 1, ArrowLeft: -1, ArrowDown: cols, ArrowUp: -cols };\n let next = -1;\n if (e.key in moves) next = Math.min(keys.length - 1, Math.max(0, i + moves[e.key]));\n else if (e.key === \"Home\") next = 0;\n else if (e.key === \"End\") next = keys.length - 1;\n if (next < 0) return;\n e.preventDefault();\n select(keys[next]);\n e.currentTarget.querySelector(`[data-key=\"${keys[next]}\"]`)?.focus();\n };\n\n const icon = `flex size-8 cursor-pointer items-center justify-center rounded-full text-muted-foreground hover:bg-accent hover:text-foreground disabled:cursor-default disabled:opacity-35 disabled:hover:bg-transparent ${INTERACTION_PRESS} ${INTERACTION_FOCUS}`;\n const big = `inline-flex h-12 w-full cursor-pointer items-center justify-center gap-2 rounded-full text-[15px] font-medium ${INTERACTION_PRESS} ${INTERACTION_FOCUS}`;\n const quiet = `cursor-pointer rounded-full text-[13.5px] font-medium text-foreground shadow-[inset_0_0_0_1px_var(--border)] hover:bg-accent ${INTERACTION_PRESS} ${INTERACTION_FOCUS}`;\n const done = step === \"done\";\n const call = booked?.call;\n const availableKeys = days.map(keyOf).filter((k) => byDay.has(k));\n const dayIndex = days.findIndex((d) => keyOf(d) === dayKey);\n\n return (\n {\n if (e.key === \"Escape\" && step === \"details\") {\n e.preventDefault();\n back();\n }\n }}\n className={`w-full max-w-[820px] rounded-[32px] p-2.5 text-card-foreground ${className}`}\n style={CARD}\n >\n {/* Its natural width where the parent sizes to its content, without forcing it on narrow screens. */}\n
\n
\n
\n {/* The one lit surface: the host's ticket, with a stub the time prints onto. */}\n
\n
\n
\n \n {initials(host.name)}\n {host.src && (\n // eslint-disable-next-line @next/next/no-img-element\n \"\"\n )}\n \n \n {host.name}\n {host.role && {host.role}}\n \n
\n

{title}

\n {description && }\n

\n \n \n {duration} min\n \n {location && (\n \n \n )}\n

\n
\n\n {/* The perforation, with the edges of the notches the mask punches at either end. */}\n
\n \n \n \n
\n\n
\n
\n

\n {done ? \"Confirmed\" : picked !== null ? \"Your time\" : \"Pick a time\"}\n

\n

\n {dateLabel}\n

\n

\n {shownAt !== null ? `${dateLabel}, ${timeShort(shownAt)}` : \"No time picked yet\"}\n \n {printed !== null ? : null}\n \n \n ––:––\n \n

\n

\n {shownAt !== null ? `Until ${timeShort(shownAt + duration * 60_000)} · ` : \"\"}\n {zoneLabel}\n

\n
\n \n \n \n
\n
\n\n {/* The flat surface that turns from times to details to the confirmation. */}\n \n {\n faceRefs.current[0] = el;\n }}\n tabIndex={-1}\n role=\"group\"\n aria-label=\"Pick a time\"\n className=\"flex flex-col px-2 pb-1.5 pt-2 outline-none @[660px]:px-3 @[660px]:pt-3\"\n >\n
\n

\n {day ? fmt.month.format(noon(day)) : week ? fmt.month.format(noon(week)) : \"Times\"}\n

\n
\n \n \n
\n
\n\n
\n \n
roving(e, availableKeys, dayKey, pickDay)}>\n {(days.length ? days : Array.from({ length: 7 }, () => null)).map((d, i) => {\n if (!d) return ;\n const k = keyOf(d);\n const count = byDay.get(k)?.length ?? 0;\n const on = k === dayKey;\n const off = !loading && count === 0;\n return (\n pickDay(k)}\n className={`relative flex h-[62px] cursor-pointer flex-col items-center justify-center gap-1 rounded-[16px] disabled:cursor-default ${INTERACTION_PRESS} ${INTERACTION_FOCUS} ${on ? \"text-primary\" : off ? \"text-muted-foreground/45\" : \"text-foreground hover:bg-accent\"}`}\n >\n {fmt.weekday.format(noon(d))}\n {d.d}\n \n \n );\n })}\n
\n
\n\n
\n

\n {day ? fmt.short.format(noon(day)) : loading ? \"Finding times\" : \"Times\"}\n

\n {day && (\n

\n free\n

\n )}\n
\n\n
\n \n {loading ? (\n
\n {Array.from({ length: 9 }, (_, i) => (\n \n ))}\n
\n ) : entry?.status === \"error\" ? (\n
\n

\n Couldn’t load the times.\n

\n \n
\n ) : !day ? (\n
\n

No free times this week.

\n \n
\n ) : (\n {\n const cols = getComputedStyle(e.currentTarget).gridTemplateColumns.split(\" \").length;\n roving(e, daySlots.map(String), picked !== null ? String(picked) : null, (k) => setSlot(Number(k)), cols);\n }}\n >\n {daySlots.map((t, i) => {\n const on = t === picked;\n return (\n setSlot(t)}\n className={`h-10 cursor-pointer rounded-full text-[14px] tabular-nums shadow-[inset_0_0_0_1px_var(--border)] ${INTERACTION_PRESS} ${INTERACTION_FOCUS} ${on ? \"bg-primary/[0.07] font-medium text-primary\" : \"text-foreground hover:bg-accent\"}`}\n >\n {timeShort(t)}\n \n );\n })}\n
\n )}\n
\n\n \n
\n\n {\n faceRefs.current[1] = el;\n }}\n tabIndex={-1}\n role=\"group\"\n aria-labelledby={`${baseId}-details`}\n className=\"flex flex-col px-2 pb-1.5 pt-2 outline-none @[660px]:px-3 @[660px]:pt-3\"\n >\n
\n \n

\n Your details\n

\n
\n {\n e.preventDefault();\n void book();\n }}\n >\n {\n setName(v);\n if (invalid.name) setInvalid((p) => ({ ...p, name: undefined }));\n }}\n />\n {\n setEmail(v);\n if (invalid.email) setInvalid((p) => ({ ...p, email: undefined }));\n }}\n />\n