@nickkupriyanov/slotline-react 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,85 +1,41 @@
 "use client";
-import { createContext, useRef, useState, useCallback, useEffect, useContext, useMemo, useReducer, useId } from 'react';
-import { cx, SLOT_CLASS, format, FLOW_STEPS, stepIndex, detectLocale, resolveTimeZone, resolveMessages, normalizeDateInput, todayKey, monthKeyOf, clampDayKey, flowReducer, createFlowState, firstDayOfMonth, lastDayOfMonth, validateDetails, hasErrors, endOf, buildMonthGrid, rotateToWeekStart, shortWeekdayNames, weekdayNames, compareDayKeys, countSlots, formatFullDay, formatTime, addMonths, visibleErrors, formatMonthYear, formatTimeZoneName, weekdayIndex, addDays } from '@nickkupriyanov/slotline-core';
-export { FLOW_STEPS, SLOT_CLASS, addDays, addMonths, buildMonthGrid, compareDayKeys, countSlots, createFlowState, createMockAdapter, cx, dayKeyOf, dayKeyOfInstant, defaultMessages, flowReducer, format, formatFullDay, formatMonthYear, formatTime, formatTimeZoneName, isDayKey, monthKeyOf, resolveMessages, stepIndex, todayKey, validateDetails } from '@nickkupriyanov/slotline-core';
+import { createContext, useRef, useState, useEffect, useContext, useCallback, useSyncExternalStore, useMemo, useId } from 'react';
+import { observeAnimatedHeight, observeMediaQuery, REDUCED_MOTION_QUERY, trapFocus, observeVisibilityChange, DARK_SCHEME_QUERY, canMatchMedia, matchesMediaQuery } from '@nickkupriyanov/slotline-core/dom';
+import { defaultMessages, cx, SLOT_CLASS, format, createBookingController, resolveMessages, monthKeyOf, weekdayIndex, addDays, resolveTimeZone, detectLocale } from '@nickkupriyanov/slotline-core';
+export { BOOKING_ERROR_CODES, BookingError, DEFAULT_BOOKING_CONTEXT, DEFAULT_BOOKING_FIELDS, DEFAULT_CONTEXT_KEY, DEFAULT_DURATION_OPTIONS, DEFAULT_TIME_FORMAT, FALLBACK_LOCALE, FALLBACK_TIME_ZONE, FLOW_STEP_ORDER, SLOT_CLASS, addDays, addMonths, bookingReducer, buildMonthGrid, clampDayKey, compareDayKeys, contextKeyOf, countSlots, createBookingController, createBookingState, createEmptyValues, createIdempotencyKey, createMockAdapter, createTimeAnchor, cx, dayKeyOf, dayKeyOfInstant, defaultMessages, deriveBookingView, detectLocale, endOf, format, formatFullDay, formatMonthYear, formatTime, formatTimeZoneName, formatUtcOffset, guaranteesNotCreated, instantOf, instantOfZonedTime, isAbortError, isBookingError, isBookingErrorCode, isDayKey, isRepeatedLocalTime, isRetrySafe, midnightAfter, monthKeyOf, resolveBookingConfig, resolveBookingFields, resolveMessages, resolveTimeZone, retryWindowClosesAt, soonestBoundary, systemClock, timeAnchorKey, toBookingError, todayKey, unmappedFieldNames, userSteps, validateBookingValues, visibleFieldErrors, wallKeyOf, zoneOffsetMs } from '@nickkupriyanov/slotline-core';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-function subscribe(query, listener) {
-  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return () => {
-  };
-  const list = window.matchMedia(query);
-  const handler = (event) => listener(event.matches);
-  listener(list.matches);
-  list.addEventListener("change", handler);
-  return () => list.removeEventListener("change", handler);
-}
 function useMediaQuery(query) {
   const [matches, setMatches] = useState(false);
-  useEffect(() => {
-    let active = true;
-    const unsubscribe = subscribe(query, (next) => {
-      if (active) setMatches(next);
-    });
-    return () => {
-      active = false;
-      unsubscribe();
-    };
-  }, [query]);
+  useEffect(() => observeMediaQuery(query, setMatches), [query]);
   return matches;
 }
 function useReducedMotion() {
-  return useMediaQuery("(prefers-reduced-motion: reduce)");
+  return useMediaQuery(REDUCED_MOTION_QUERY);
 }
 
 // src/hooks/useAnimatedHeight.ts
 function useAnimatedHeight(durationMs = 320) {
   const contentRef = useRef(null);
-  const heightRef = useRef(void 0);
-  const timerRef = useRef(null);
-  const [height, setHeight] = useState();
-  const [animating, setAnimating] = useState(false);
+  const [state, setState] = useState({
+    height: void 0,
+    animating: false
+  });
   const reducedMotion = useReducedMotion();
-  const measure = useCallback(() => {
-    const element = contentRef.current;
-    if (!element) return;
-    const next = element.getBoundingClientRect().height;
-    if (!(next > 0)) return;
-    const previous = heightRef.current;
-    if (previous !== void 0 && Math.abs(previous - next) >= 1) {
-      setAnimating(true);
-      if (timerRef.current) clearTimeout(timerRef.current);
-      timerRef.current = setTimeout(() => setAnimating(false), durationMs);
-    }
-    heightRef.current = next;
-    setHeight((current) => current === next ? current : next);
-  }, [durationMs]);
   useEffect(() => {
-    if (reducedMotion) return;
-    measure();
     const element = contentRef.current;
-    if (!element || typeof ResizeObserver === "undefined") {
-      window.addEventListener("resize", measure);
-      return () => window.removeEventListener("resize", measure);
-    }
-    const observer = new ResizeObserver(() => measure());
-    observer.observe(element);
-    return () => observer.disconnect();
-  }, [measure, reducedMotion]);
-  useEffect(
-    () => () => {
-      if (timerRef.current) clearTimeout(timerRef.current);
-    },
-    []
-  );
+    if (!element || reducedMotion) return;
+    return observeAnimatedHeight(element, { durationMs, onChange: setState });
+  }, [durationMs, reducedMotion]);
   if (reducedMotion) {
     return { contentRef, style: void 0, animating: false };
   }
-  const style = height === void 0 ? void 0 : {
-    height,
-    overflow: animating ? "hidden" : "visible",
+  const style = state.height === void 0 ? void 0 : {
+    height: state.height,
+    overflow: state.animating ? "hidden" : "visible",
     transition: `height ${durationMs}ms var(--sl-ease-soft)`
   };
-  return { contentRef, style, animating };
+  return { contentRef, style, animating: state.animating };
 }
 function StepHost({ stepKey, direction, className, children }) {
   return /* @__PURE__ */ jsx(
@@ -126,7 +82,11 @@ var useFlow = useSlotlineContext;
 var UIContext = createContext({
   animations: cssAnimations,
   autoFocus: false,
-  trapFocus: false
+  trapFocus: false,
+  canDismiss: false,
+  messages: defaultMessages.en,
+  locale: "en",
+  theme: "dark"
 });
 function useUI() {
   return useContext(UIContext);
@@ -141,57 +101,37 @@ function useClassNames() {
     [classNames]
   );
 }
-var FOCUSABLE = [
-  "a[href]",
-  "button:not([disabled])",
-  'input:not([disabled]):not([type="hidden"])',
-  "select:not([disabled])",
-  "textarea:not([disabled])",
-  '[tabindex]:not([tabindex="-1"])'
-].join(",");
-function focusableWithin(container) {
-  return Array.from(container.querySelectorAll(FOCUSABLE)).filter(
-    (element) => element.offsetParent !== null || element === document.activeElement || element.tabIndex >= 0
-  );
-}
 function useFocusTrap(containerRef, { active, onEscape }) {
   useEffect(() => {
-    if (!active) return;
     const container = containerRef.current;
-    if (!container) return;
-    const onKeyDown = (event) => {
-      if (event.key === "Escape" && onEscape) {
-        event.stopPropagation();
-        onEscape();
-        return;
-      }
-      if (event.key !== "Tab") return;
-      const focusable = focusableWithin(container);
-      if (focusable.length === 0) {
-        event.preventDefault();
-        container.focus();
-        return;
-      }
-      const first = focusable[0];
-      const last = focusable[focusable.length - 1];
-      const activeElement = document.activeElement;
-      if (!activeElement || !container.contains(activeElement)) {
-        event.preventDefault();
-        (event.shiftKey ? last : first).focus();
-        return;
-      }
-      if (!event.shiftKey && activeElement === last) {
-        event.preventDefault();
-        first.focus();
-      } else if (event.shiftKey && activeElement === first) {
-        event.preventDefault();
-        last.focus();
-      }
-    };
-    container.addEventListener("keydown", onKeyDown);
-    return () => container.removeEventListener("keydown", onKeyDown);
+    if (!active || !container) return;
+    return trapFocus(container, onEscape ? { onEscape } : {});
   }, [active, containerRef, onEscape]);
 }
+function AttemptStep() {
+  const { snapshot, actions } = useFlow();
+  const { messages, onCheckStatus } = useUI();
+  const cls = useClassNames();
+  const attempt = snapshot.view.attempt;
+  if (!attempt) return null;
+  return /* @__PURE__ */ jsxs("div", { className: cls("empty"), "data-attempt": attempt.status, children: [
+    /* @__PURE__ */ jsx("p", { className: "sl-empty-title", children: attempt.title }),
+    /* @__PURE__ */ jsx("p", { className: "sl-empty-body", children: attempt.description }),
+    attempt.instructions ? /* @__PURE__ */ jsx("p", { className: "sl-empty-body", children: attempt.instructions }) : null,
+    /* @__PURE__ */ jsx("div", { className: cls("summary"), "aria-label": attempt.summaryLabel, children: /* @__PURE__ */ jsxs("div", { className: "sl-summary-body", children: [
+      /* @__PURE__ */ jsx("p", { className: "sl-summary-date", children: attempt.summary.dateLabel }),
+      /* @__PURE__ */ jsx("p", { className: "sl-summary-meta", children: /* @__PURE__ */ jsxs("span", { children: [
+        attempt.summary.timeLabel,
+        " \xB7 ",
+        attempt.summary.durationLabel
+      ] }) })
+    ] }) }),
+    /* @__PURE__ */ jsx("p", { className: "sl-empty-body", children: attempt.retryDescription }),
+    attempt.retryAllowed ? /* @__PURE__ */ jsx("button", { type: "button", className: cls("submit"), onClick: actions.retry, children: attempt.retryLabel }) : null,
+    attempt.canCheckStatus && onCheckStatus ? /* @__PURE__ */ jsx("button", { type: "button", className: cls("secondaryButton"), onClick: () => onCheckStatus(), children: attempt.checkStatusLabel }) : null,
+    /* @__PURE__ */ jsx("span", { className: "sl-visually-hidden", children: messages.attemptSummaryLabel })
+  ] });
+}
 function ChevronLeftIcon(props) {
   return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "18", height: "18", "aria-hidden": "true", focusable: "false", ...props, children: /* @__PURE__ */ jsx(
     "path",
@@ -310,55 +250,44 @@ function chunk(values, size) {
   return rows;
 }
 function CalendarStep() {
-  const {
-    state,
-    messages,
-    locale,
-    timeZone,
-    timeZoneName,
-    monthLabel,
-    monthGrid,
-    weekdayHeaders,
-    weekdayLongNames,
-    weekStartsOn,
-    actions,
-    availabilityOf,
-    isDayBookable
-  } = useFlow();
+  const { snapshot, actions } = useFlow();
+  const { messages } = useUI();
   const cls = useClassNames();
+  const view = snapshot.view;
+  const { month, days } = view;
+  const selectedDate = view.selection.date;
   const gridRef = useRef(null);
   const pendingFocusRef = useRef(false);
   const pendingMonthFocusRef = useRef(null);
   const [focusKey, setFocusKey] = useState(null);
-  const today = todayKey(timeZone);
-  const rows = useMemo(() => chunk(monthGrid, 7), [monthGrid]);
+  const rows = useMemo(() => chunk(month.grid, 7), [month.grid]);
   const firstBookable = useMemo(
-    () => monthGrid.find((day) => monthKeyOf(day) === state.month && isDayBookable(day)),
-    [monthGrid, state.month, isDayBookable]
+    () => month.grid.find((day) => monthKeyOf(day) === month.key && days[day]?.bookable),
+    [month.grid, month.key, days]
   );
   const focusTarget = useMemo(() => {
-    if (focusKey && monthGrid.includes(focusKey)) return focusKey;
-    if (state.selectedDate && monthGrid.includes(state.selectedDate)) return state.selectedDate;
-    return firstBookable ?? monthGrid[0] ?? `${state.month}-01`;
-  }, [focusKey, monthGrid, state.selectedDate, firstBookable, state.month]);
+    if (focusKey && month.grid.includes(focusKey)) return focusKey;
+    if (selectedDate && month.grid.includes(selectedDate)) return selectedDate;
+    return firstBookable ?? month.grid[0] ?? `${month.key}-01`;
+  }, [focusKey, month.grid, selectedDate, firstBookable, month.key]);
   useEffect(() => {
     if (!pendingFocusRef.current || !focusKey) return;
     pendingFocusRef.current = false;
     const node = gridRef.current?.querySelector(`[data-day="${focusKey}"]`);
     node?.focus();
-  }, [focusKey, monthGrid]);
+  }, [focusKey, month.grid]);
   useEffect(() => {
     const dayOfMonth = pendingMonthFocusRef.current;
     if (!dayOfMonth) return;
     pendingMonthFocusRef.current = null;
-    const sameDay = monthGrid.find(
-      (candidate) => monthKeyOf(candidate) === state.month && candidate.slice(8, 10) === dayOfMonth
+    const sameDay = month.grid.find(
+      (candidate) => monthKeyOf(candidate) === month.key && candidate.slice(8, 10) === dayOfMonth
     );
-    const target = sameDay ?? monthGrid.find((candidate) => monthKeyOf(candidate) === state.month);
+    const target = sameDay ?? month.grid.find((candidate) => monthKeyOf(candidate) === month.key);
     if (!target) return;
     pendingFocusRef.current = true;
     setFocusKey(target);
-  }, [state.month, monthGrid]);
+  }, [month.key, month.grid]);
   const moveFocus = useCallback((nextKey) => {
     pendingFocusRef.current = true;
     setFocusKey(nextKey);
@@ -367,7 +296,7 @@ function CalendarStep() {
     (event) => {
       const current = event.target.dataset?.day;
       if (!current) return;
-      const offsetFromWeekStart = (weekdayIndex(current) - weekStartsOn + 7) % 7;
+      const offsetFromWeekStart = (weekdayIndex(current) - month.weekStartsOn + 7) % 7;
       let next;
       switch (event.key) {
         case "ArrowLeft":
@@ -402,18 +331,18 @@ function CalendarStep() {
           return;
       }
       event.preventDefault();
-      const last = monthGrid[monthGrid.length - 1];
-      const first = monthGrid[0];
+      const last = month.grid[month.grid.length - 1];
+      const first = month.grid[0];
       if (last && first && (next < first || next > last)) {
         actions.goToMonth(monthKeyOf(next));
       }
       moveFocus(next);
     },
-    [actions, monthGrid, moveFocus, weekStartsOn]
+    [actions, month.grid, month.key, month.weekStartsOn]
   );
-  return /* @__PURE__ */ jsxs("div", { className: cls("calendar"), "data-status": state.daysStatus, children: [
+  return /* @__PURE__ */ jsxs("div", { className: cls("calendar"), "data-status": month.status, children: [
     /* @__PURE__ */ jsxs("div", { className: cls("calendarHeader"), children: [
-      /* @__PURE__ */ jsx("h3", { className: cls("monthLabel"), children: monthLabel }),
+      /* @__PURE__ */ jsx("h3", { className: cls("monthLabel"), children: month.label }),
       /* @__PURE__ */ jsxs("div", { className: "sl-calendar-nav", children: [
         /* @__PURE__ */ jsx(
           "button",
@@ -437,14 +366,14 @@ function CalendarStep() {
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: cls("weekdays"), children: weekdayHeaders.map((label, index) => /* @__PURE__ */ jsxs("span", { className: cls("weekday"), children: [
+    /* @__PURE__ */ jsx("div", { className: cls("weekdays"), children: month.weekdayHeaders.map((label, index) => /* @__PURE__ */ jsxs("span", { className: cls("weekday"), children: [
       /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: label }),
-      /* @__PURE__ */ jsx("span", { className: "sl-visually-hidden", children: weekdayLongNames[index] })
-    ] }, weekdayLongNames[index] ?? index)) }),
-    state.daysStatus === "error" ? /* @__PURE__ */ jsxs("div", { className: cls("error"), role: "alert", children: [
-      /* @__PURE__ */ jsx("span", { children: state.daysError }),
+      /* @__PURE__ */ jsx("span", { className: "sl-visually-hidden", children: month.weekdayLongNames[index] })
+    ] }, month.weekdayLongNames[index] ?? index)) }),
+    /* @__PURE__ */ jsxs("div", { className: cls("error"), role: "alert", children: [
+      /* @__PURE__ */ jsx("span", { children: month.error }),
       /* @__PURE__ */ jsx("button", { type: "button", className: "sl-link-button", onClick: actions.reloadAvailability, children: messages.retry })
-    ] }) : null,
+    ] }),
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -452,17 +381,11 @@ function CalendarStep() {
         className: cls("grid"),
         role: "grid",
         "aria-label": messages.calendarLabel,
-        "aria-busy": state.daysStatus === "loading",
+        "aria-busy": month.status === "loading",
         onKeyDown,
         children: rows.map((row, rowIndex) => /* @__PURE__ */ jsx("div", { className: "sl-grid-row", role: "row", children: row.map((day, cellIndex) => {
-          const outside = monthKeyOf(day) !== state.month;
-          const bookable = isDayBookable(day);
-          const count = countSlots(availabilityOf(day));
-          const selected = state.selectedDate === day;
-          const label = [
-            formatFullDay(day, locale),
-            count !== void 0 && count > 0 ? format(messages.slotsCount, { count }) : messages.dayUnavailable
-          ].join(", ");
+          const cell = days[day];
+          const bookable = cell?.bookable ?? false;
           return /* @__PURE__ */ jsxs(
             "button",
             {
@@ -470,14 +393,14 @@ function CalendarStep() {
               role: "gridcell",
               "data-day": day,
               tabIndex: day === focusTarget ? 0 : -1,
-              "aria-selected": selected || void 0,
+              "aria-selected": cell?.isSelected || void 0,
               "aria-disabled": !bookable || void 0,
-              "aria-current": day === today ? "date" : void 0,
-              "aria-label": label,
+              "aria-current": cell?.isToday ? "date" : void 0,
+              "aria-label": cell?.label,
               className: cls(
                 "day",
-                outside && "is-outside",
-                selected && "is-selected",
+                cell?.isOutside && "is-outside",
+                cell?.isSelected && "is-selected",
                 bookable && "is-bookable"
               ),
               style: { "--sl-index": rowIndex * 7 + cellIndex },
@@ -501,90 +424,127 @@ function CalendarStep() {
           );
         }) }, row[0]))
       },
-      state.month
+      month.key
     ),
-    /* @__PURE__ */ jsx("p", { className: "sl-timezone", children: format(messages.timeZoneHint, { zone: timeZoneName ?? timeZone, timeZone }) })
+    /* @__PURE__ */ jsx("p", { className: "sl-timezone", children: view.time.zoneHint })
   ] });
 }
 function ConfirmedStep() {
-  const { state, messages, selectedDateLabel, selectedTimeLabel, durationLabel, actions } = useFlow();
+  const { snapshot, actions } = useFlow();
   const cls = useClassNames();
-  const inviteeEmail = (typeof state.result?.inviteeEmail === "string" ? state.result.inviteeEmail : void 0) ?? state.details.email;
+  const confirmation = snapshot.view.confirmation;
+  if (!confirmation) return null;
   return /* @__PURE__ */ jsxs("div", { className: cls("confirmation"), children: [
     /* @__PURE__ */ jsx("span", { className: cls("confirmationIcon"), "aria-hidden": "true", children: /* @__PURE__ */ jsx(CheckIcon, {}) }),
-    /* @__PURE__ */ jsx("h3", { className: cls("confirmationTitle"), children: messages.bookedTitle }),
+    /* @__PURE__ */ jsx("h3", { className: cls("confirmationTitle"), children: confirmation.title }),
     /* @__PURE__ */ jsxs("div", { className: cls("confirmationText"), children: [
-      /* @__PURE__ */ jsx("p", { children: format(messages.bookedSummary, {
-        date: selectedDateLabel,
-        time: selectedTimeLabel,
-        duration: durationLabel
-      }) }),
-      /* @__PURE__ */ jsx("p", { children: format(messages.inviteSent, { email: inviteeEmail }) })
+      /* @__PURE__ */ jsx("p", { children: confirmation.summary }),
+      confirmation.invitation ? /* @__PURE__ */ jsx("p", { children: confirmation.invitation }) : null
     ] }),
-    /* @__PURE__ */ jsx("button", { type: "button", className: cls("secondaryButton"), onClick: actions.reset, children: messages.bookAnother })
+    /* @__PURE__ */ jsx("button", { type: "button", className: cls("secondaryButton"), onClick: actions.reset, children: confirmation.bookAnotherLabel })
   ] });
 }
-function Field({
-  name,
-  label,
-  value,
-  type = "text",
-  error,
-  disabled,
-  autoFocus,
-  onChange,
-  onBlur
-}) {
+function autoCompleteOf(name) {
+  if (name === "name") return "name";
+  if (name === "email") return "email";
+  if (name === "tel" || name === "phone") return "tel";
+  return void 0;
+}
+function inputTypeOf(field) {
+  if (field.type === "email") return "email";
+  if (field.type === "tel") return "tel";
+  if (field.type === "number") return "number";
+  return "text";
+}
+function textOf(value) {
+  if (value === void 0 || value === null || typeof value === "boolean") return "";
+  return String(value);
+}
+function Field({ field, value, error, disabled, autoFocus, onChange, onBlur }) {
   const cls = useClassNames();
-  const errorId = useId();
+  const generatedId = useId();
+  const errorId = `${generatedId}-error`;
+  const hintId = `${generatedId}-hint`;
+  const shared = {
+    id: generatedId,
+    name: field.name,
+    "aria-label": field.label,
+    "aria-invalid": error ? true : void 0,
+    "aria-describedby": error ? errorId : field.hint ? hintId : void 0,
+    disabled
+  };
   return /* @__PURE__ */ jsxs("div", { className: cls("field"), "data-invalid": error ? "true" : void 0, children: [
-    /* @__PURE__ */ jsx(
+    field.type === "textarea" ? /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ...shared,
+        className: cls("input"),
+        placeholder: field.placeholder ?? field.label,
+        value: textOf(value),
+        onChange: (event) => onChange(event.target.value),
+        onBlur
+      }
+    ) : field.type === "select" ? /* @__PURE__ */ jsxs(
+      "select",
+      {
+        ...shared,
+        className: cls("input"),
+        value: textOf(value),
+        onChange: (event) => onChange(event.target.value),
+        onBlur,
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "", children: field.placeholder ?? "" }),
+          (field.options ?? []).map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
+        ]
+      }
+    ) : field.type === "checkbox" ? /* @__PURE__ */ jsxs("label", { className: "sl-checkbox", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ...shared,
+          type: "checkbox",
+          checked: value === true,
+          onChange: (event) => onChange(event.target.checked),
+          onBlur
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { children: field.label })
+    ] }) : /* @__PURE__ */ jsx(
       "input",
       {
-        id: name,
-        name,
-        type,
-        inputMode: type === "email" ? "email" : void 0,
-        autoComplete: name === "email" ? "email" : "name",
+        ...shared,
+        type: inputTypeOf(field),
+        inputMode: field.type === "number" ? "numeric" : field.type === "email" ? "email" : void 0,
+        autoComplete: autoCompleteOf(field.name),
         className: cls("input"),
-        "aria-label": label,
-        "aria-invalid": error ? true : void 0,
-        "aria-describedby": error ? errorId : void 0,
-        placeholder: label,
-        value,
-        disabled,
+        placeholder: field.placeholder ?? field.label,
+        value: textOf(value),
         autoFocus,
         onChange: (event) => onChange(event.target.value),
         onBlur
       }
     ),
+    field.hint && !error ? /* @__PURE__ */ jsx("p", { className: "sl-field-hint", id: hintId, children: field.hint }) : null,
     error ? /* @__PURE__ */ jsx("p", { className: "sl-field-error", id: errorId, role: "alert", children: error }) : null
   ] });
 }
 function DetailsStep() {
-  const {
-    state,
-    messages,
-    selectedDateLabel,
-    selectedTimeLabel,
-    durationLabel,
-    actions,
-    shownFieldErrors,
-    detailsValid
-  } = useFlow();
+  const { snapshot, actions } = useFlow();
+  const { messages } = useUI();
   const cls = useClassNames();
-  const submitting = state.submitStatus === "submitting";
+  const view = snapshot.view;
+  const form = view.form;
   return /* @__PURE__ */ jsxs("div", { className: "sl-details-step", children: [
     /* @__PURE__ */ jsxs("div", { className: cls("summary"), children: [
       /* @__PURE__ */ jsx("span", { className: "sl-summary-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(CalendarIcon, {}) }),
       /* @__PURE__ */ jsxs("div", { className: "sl-summary-body", children: [
-        /* @__PURE__ */ jsx("p", { className: "sl-summary-date", children: selectedDateLabel }),
+        /* @__PURE__ */ jsx("p", { className: "sl-summary-date", children: view.time.dateLabel }),
         /* @__PURE__ */ jsxs("p", { className: "sl-summary-meta", children: [
           /* @__PURE__ */ jsx(ClockIcon, {}),
           /* @__PURE__ */ jsxs("span", { children: [
-            selectedTimeLabel,
+            view.time.label,
             " \xB7 ",
-            durationLabel
+            view.duration.label
           ] })
         ] })
       ] })
@@ -599,54 +559,34 @@ function DetailsStep() {
           void actions.submit();
         },
         children: [
-          /* @__PURE__ */ jsx(
+          form.fields.map((field, index) => /* @__PURE__ */ jsx(
             Field,
             {
-              name: "name",
-              label: messages.nameLabel,
-              value: state.details.name,
-              error: shownFieldErrors.name,
-              disabled: submitting,
-              autoFocus: true,
-              onChange: (value) => actions.setDetails({ name: value }),
-              onBlur: () => actions.touchField("name")
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Field,
-            {
-              name: "email",
-              label: messages.emailLabel,
-              type: "email",
-              value: state.details.email,
-              error: shownFieldErrors.email,
-              disabled: submitting,
-              onChange: (value) => actions.setDetails({ email: value }),
-              onBlur: () => actions.touchField("email")
-            }
-          ),
-          state.submitError ? /* @__PURE__ */ jsxs("div", { className: cls("error"), role: "alert", children: [
-            /* @__PURE__ */ jsx("span", { children: state.submitError }),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                className: "sl-link-button",
-                onClick: () => void actions.submit(),
-                children: messages.retry
-              }
-            )
+              field,
+              value: form.values[field.name],
+              error: form.visibleErrors[field.name],
+              disabled: form.submitting,
+              autoFocus: index === 0,
+              onChange: (value) => actions.setValues({ [field.name]: value }),
+              onBlur: () => actions.touchField(field.name)
+            },
+            field.name
+          )),
+          form.formError ? /* @__PURE__ */ jsx("div", { className: cls("error"), role: "alert", children: /* @__PURE__ */ jsx("span", { children: form.formError }) }) : null,
+          form.submitError ? /* @__PURE__ */ jsxs("div", { className: cls("error"), role: "alert", children: [
+            /* @__PURE__ */ jsx("span", { children: form.submitError }),
+            /* @__PURE__ */ jsx("button", { type: "button", className: "sl-link-button", onClick: () => void actions.submit(), children: messages.retry })
           ] }) : null,
           /* @__PURE__ */ jsxs(
             "button",
             {
               type: "submit",
               className: cls("submit"),
-              disabled: submitting || !detailsValid,
-              "data-loading": submitting ? "true" : void 0,
+              disabled: form.submitting,
+              "data-loading": form.submitting ? "true" : void 0,
               children: [
-                /* @__PURE__ */ jsx("span", { children: submitting ? messages.confirming : messages.confirm }),
-                submitting ? /* @__PURE__ */ jsx(SpinnerIcon, { className: "sl-spinner" }) : /* @__PURE__ */ jsx(ArrowRightIcon, { className: "sl-submit-arrow" })
+                /* @__PURE__ */ jsx("span", { children: form.submitLabel }),
+                form.submitting ? /* @__PURE__ */ jsx(SpinnerIcon, { className: "sl-spinner" }) : /* @__PURE__ */ jsx(ArrowRightIcon, { className: "sl-submit-arrow" })
               ]
             }
           )
@@ -656,12 +596,15 @@ function DetailsStep() {
   ] });
 }
 function DurationFooter() {
-  const { state, messages, durations, actions } = useFlow();
+  const { snapshot, actions } = useFlow();
+  const { messages } = useUI();
   const cls = useClassNames();
+  const duration = snapshot.view.duration;
+  if (!duration.showSelector) return null;
   return /* @__PURE__ */ jsxs("footer", { className: cls("footer"), children: [
     /* @__PURE__ */ jsx("span", { className: "sl-duration-label", "aria-hidden": "true", children: messages.durationLabel }),
-    /* @__PURE__ */ jsx("div", { className: "sl-duration-group", role: "radiogroup", "aria-label": messages.durationGroupLabel, children: durations.map((minutes) => {
-      const active = minutes === state.duration;
+    /* @__PURE__ */ jsx("div", { className: "sl-duration-group", role: "radiogroup", "aria-label": messages.durationGroupLabel, children: duration.options.map((minutes) => {
+      const active = minutes === duration.current;
       const label = format(messages.duration, { count: minutes });
       return /* @__PURE__ */ jsx(
         "button",
@@ -681,26 +624,23 @@ function DurationFooter() {
   ] });
 }
 function Progress() {
-  const { state, messages } = useFlow();
+  const { snapshot } = useFlow();
   const cls = useClassNames();
-  const index = stepIndex(state.step);
+  const { progress } = snapshot.view;
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: cls("progress"),
       role: "progressbar",
       "aria-valuemin": 1,
-      "aria-valuemax": FLOW_STEPS.length,
-      "aria-valuenow": index + 1,
-      "aria-valuetext": format(messages.progressLabel, {
-        step: index + 1,
-        total: FLOW_STEPS.length
-      }),
-      children: FLOW_STEPS.map((step, position) => /* @__PURE__ */ jsx(
+      "aria-valuemax": progress.total,
+      "aria-valuenow": progress.current,
+      "aria-valuetext": progress.label,
+      children: progress.steps.map((step, position) => /* @__PURE__ */ jsx(
         "span",
         {
           className: "sl-progress-pill",
-          "data-state": position <= index ? "done" : "todo",
+          "data-state": position < progress.current ? "done" : "todo",
           "aria-hidden": "true"
         },
         step
@@ -710,17 +650,19 @@ function Progress() {
 }
 var SKELETON_COUNT = 9;
 function SlotsStep() {
-  const { state, messages, locale, timeZone, selectedDateLabel, actions } = useFlow();
+  const { snapshot, actions } = useFlow();
+  const { messages } = useUI();
   const cls = useClassNames();
-  const { Item: Item2 } = useAnimations();
-  const loading = state.slotsStatus === "loading" || state.slotsStatus === "idle";
+  const Animations = useUI().animations;
+  const view = snapshot.view;
+  const { slots, time } = view;
   return /* @__PURE__ */ jsxs("div", { className: "sl-slots-step", children: [
     /* @__PURE__ */ jsxs("div", { className: cls("slotsHeader"), children: [
       /* @__PURE__ */ jsx("span", { className: "sl-slots-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(CalendarIcon, {}) }),
-      /* @__PURE__ */ jsx("h3", { className: "sl-slots-title", children: selectedDateLabel }),
-      state.slotsStatus === "ready" ? /* @__PURE__ */ jsx("span", { className: cls("slotsCount"), children: format(messages.slotsCount, { count: state.slots.length }) }) : null
+      /* @__PURE__ */ jsx("h3", { className: "sl-slots-title", children: time.dateLabel }),
+      slots.countLabel ? /* @__PURE__ */ jsx("span", { className: cls("slotsCount"), children: slots.countLabel }) : null
     ] }),
-    loading ? /* @__PURE__ */ jsx("div", { className: cls("slots"), "aria-hidden": "true", children: Array.from({ length: SKELETON_COUNT }, (_, index) => /* @__PURE__ */ jsx(
+    slots.loading ? /* @__PURE__ */ jsx("div", { className: cls("slots"), "aria-hidden": "true", children: Array.from({ length: SKELETON_COUNT }, (_, index) => /* @__PURE__ */ jsx(
       "div",
       {
         className: cls("skeleton"),
@@ -728,38 +670,38 @@ function SlotsStep() {
       },
       index
     )) }) : null,
-    state.slotsStatus === "error" ? /* @__PURE__ */ jsxs("div", { className: cls("error"), role: "alert", children: [
-      /* @__PURE__ */ jsx("span", { children: state.slotsError }),
+    slots.status === "error" ? /* @__PURE__ */ jsxs("div", { className: cls("error"), role: "alert", children: [
+      /* @__PURE__ */ jsx("span", { children: slots.error }),
       /* @__PURE__ */ jsx("button", { type: "button", className: "sl-link-button", onClick: actions.reloadSlots, children: messages.retry })
     ] }) : null,
-    state.slotsStatus === "ready" && state.slots.length === 0 ? /* @__PURE__ */ jsxs("div", { className: cls("empty"), children: [
+    slots.empty ? /* @__PURE__ */ jsxs("div", { className: cls("empty"), children: [
       /* @__PURE__ */ jsx("p", { className: "sl-empty-title", children: messages.noSlotsTitle }),
       /* @__PURE__ */ jsx("p", { className: "sl-empty-body", children: messages.noSlotsBody }),
       /* @__PURE__ */ jsx("button", { type: "button", className: cls("secondaryButton"), onClick: actions.back, children: messages.pickAnotherDay })
     ] }) : null,
-    state.slotsStatus === "ready" && state.slots.length > 0 ? /* @__PURE__ */ jsx("div", { className: cls("slots"), role: "group", "aria-label": messages.slotsLabel, children: state.slots.map((slot, index) => {
-      const selected = state.selectedSlot?.start === slot.start;
-      return /* @__PURE__ */ jsx(
-        Item2,
-        {
-          index,
-          className: cls("slot", selected && "is-selected"),
-          "aria-current": selected ? "true" : void 0,
-          onClick: () => actions.selectSlot(slot),
-          children: formatTime(slot.start, timeZone, locale)
-        },
-        slot.start
-      );
-    }) }) : null
+    slots.status === "ready" && slots.count > 0 ? /* @__PURE__ */ jsx("div", { className: cls("slots"), role: "group", "aria-label": slots.label, children: slots.items.map((slot, index) => /* @__PURE__ */ jsx(
+      Animations.Item,
+      {
+        index,
+        className: cls("slot", slot.selected && "is-selected"),
+        "aria-current": slot.selected ? "true" : void 0,
+        "aria-label": slot.utcOffsetLabel ? `${slot.label} ${slot.utcOffsetLabel}` : void 0,
+        onClick: () => actions.selectSlot(slot),
+        children: slot.label
+      },
+      slot.id
+    )) }) : null
   ] });
 }
 function StepBody() {
-  const { state } = useFlow();
-  switch (state.step) {
+  const { snapshot } = useFlow();
+  switch (snapshot.view.step) {
     case "time":
       return /* @__PURE__ */ jsx(SlotsStep, {});
     case "details":
       return /* @__PURE__ */ jsx(DetailsStep, {});
+    case "attempt":
+      return /* @__PURE__ */ jsx(AttemptStep, {});
     case "confirmed":
       return /* @__PURE__ */ jsx(ConfirmedStep, {});
     case "date":
@@ -768,15 +710,15 @@ function StepBody() {
   }
 }
 function SlotlineView() {
-  const flow = useFlow();
-  const { state, messages, title, durationLabel, actions, canGoBack } = flow;
-  const submitting = state.submitStatus === "submitting";
+  const { snapshot, actions } = useFlow();
   const ui = useUI();
   const cls = useClassNames();
   const Animations = ui.animations;
+  const view = snapshot.view;
   const cardRef = useRef(null);
   const panelRef = useRef(null);
   const mountedRef = useRef(false);
+  const canGoBack = view.actions.canGoBack || (view.step === "date" || view.step === "confirmed") && ui.canDismiss;
   useFocusTrap(cardRef, {
     active: ui.trapFocus,
     ...canGoBack ? { onEscape: actions.back } : {}
@@ -789,22 +731,14 @@ function SlotlineView() {
     }
     const active = typeof document === "undefined" ? null : document.activeElement;
     if (!active || active === document.body) panelRef.current?.focus();
-  }, [state.step, ui.autoFocus]);
-  const announcement = state.step === "confirmed" ? `${messages.bookedTitle}. ${format(messages.bookedSummary, {
-    date: flow.selectedDateLabel,
-    time: flow.selectedTimeLabel,
-    duration: durationLabel
-  })}` : format(messages.progressLabel, {
-    step: stepIndex(state.step) + 1,
-    total: FLOW_STEPS.length
-  });
+  }, [view.step, ui.autoFocus]);
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: cls("root", ui.className),
-      "data-sl-theme": flow.theme,
-      "data-sl-step": state.step,
-      lang: flow.locale,
+      "data-sl-theme": ui.theme,
+      "data-sl-step": view.step,
+      lang: ui.locale,
       children: /* @__PURE__ */ jsxs("div", { className: cls("card"), ref: cardRef, children: [
         /* @__PURE__ */ jsxs("header", { className: cls("header"), children: [
           canGoBack ? /* @__PURE__ */ jsx(
@@ -813,373 +747,183 @@ function SlotlineView() {
               type: "button",
               className: "sl-icon-button",
               onClick: actions.back,
-              "aria-label": messages.back,
-              disabled: submitting,
+              "aria-label": ui.messages.back,
+              disabled: view.form.submitting,
               children: /* @__PURE__ */ jsx(ChevronLeftIcon, {})
             }
           ) : null,
           /* @__PURE__ */ jsxs("div", { className: "sl-header-main", children: [
-            /* @__PURE__ */ jsx("h2", { className: cls("title"), children: title }),
-            /* @__PURE__ */ jsx("span", { className: cls("badge"), children: durationLabel })
+            /* @__PURE__ */ jsx("h2", { className: cls("title"), children: view.title }),
+            /* @__PURE__ */ jsx("span", { className: cls("badge"), children: view.duration.label })
           ] }),
           /* @__PURE__ */ jsx(Progress, {})
         ] }),
-        /* @__PURE__ */ jsx("div", { className: cls("panel"), ref: panelRef, tabIndex: -1, children: /* @__PURE__ */ jsx(Animations.Height, { children: /* @__PURE__ */ jsx(Animations.StepHost, { stepKey: state.step, direction: state.direction, children: /* @__PURE__ */ jsx(StepBody, {}) }) }) }),
-        state.step === "date" ? /* @__PURE__ */ jsx(DurationFooter, {}) : null,
-        /* @__PURE__ */ jsx("div", { className: "sl-visually-hidden", role: "status", "aria-live": "polite", children: announcement })
+        /* @__PURE__ */ jsx("div", { className: cls("panel"), ref: panelRef, tabIndex: -1, children: /* @__PURE__ */ jsx(Animations.Height, { children: /* @__PURE__ */ jsx(Animations.StepHost, { stepKey: view.step, direction: view.direction, children: /* @__PURE__ */ jsx(StepBody, {}) }) }) }),
+        view.step === "date" ? /* @__PURE__ */ jsx(DurationFooter, {}) : null,
+        /* @__PURE__ */ jsx("div", { className: "sl-visually-hidden", role: "status", "aria-live": "polite", children: view.live.message })
       ] })
     }
   );
 }
-function useControllableState({
-  value,
-  defaultValue,
-  onChange
-}) {
-  const [internal, setInternal] = useState(defaultValue);
-  const isControlled = value !== void 0;
-  const current = isControlled ? value : internal;
-  const onChangeRef = useRef(onChange);
-  onChangeRef.current = onChange;
-  const setValue = useCallback(
-    (next) => {
-      if (!isControlled) setInternal(next);
-      onChangeRef.current?.(next);
-    },
-    [isControlled]
-  );
-  return [current, setValue];
+function hostTheme() {
+  if (!canMatchMedia()) return "dark";
+  return matchesMediaQuery(DARK_SCHEME_QUERY) ? "dark" : "light";
 }
 function useResolvedTheme(theme) {
-  const [systemTheme, setSystemTheme] = useState(() => {
-    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return "dark";
-    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-  });
+  const [resolved, setResolved] = useState(hostTheme);
   useEffect(() => {
     if (theme !== "system") return;
-    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
-    const list = window.matchMedia("(prefers-color-scheme: dark)");
-    const handler = (event) => setSystemTheme(event.matches ? "dark" : "light");
-    list.addEventListener("change", handler);
-    return () => list.removeEventListener("change", handler);
+    return observeMediaQuery(
+      DARK_SCHEME_QUERY,
+      (matches) => setResolved(matches ? "dark" : "light")
+    );
   }, [theme]);
-  if (theme === "system") return systemTheme;
-  return theme;
+  return theme === "system" ? resolved : theme;
 }
 
 // src/useBookingFlow.ts
-function toError(value) {
-  return value instanceof Error ? value : new Error(String(value));
-}
-function messageOf(value, fallback) {
-  const error = toError(value);
-  return error.message && error.message !== "undefined" ? error.message : fallback;
+var cachedBrowserDefaults = null;
+function readBrowserDefaults() {
+  cachedBrowserDefaults ??= { locale: detectLocale(), timeZone: resolveTimeZone() };
+  return cachedBrowserDefaults;
 }
-function useBookingFlow(props) {
-  const {
-    adapter,
-    durations = [15, 30, 60],
-    duration: durationProp,
-    defaultDuration,
-    onDurationChange,
-    timeZone: timeZoneProp,
-    locale: localeProp,
-    messages: messagesProp,
-    theme = "dark",
-    minDate: minDateProp,
-    maxDate: maxDateProp,
-    weekStartsOn = 0,
-    onBooked,
-    onError,
-    onDismiss
-  } = props;
-  const locale = localeProp ?? detectLocale();
-  const timeZone = timeZoneProp ?? resolveTimeZone();
-  const resolvedTheme = useResolvedTheme(theme);
-  const messages = useMemo(() => resolveMessages(locale, messagesProp), [locale, messagesProp]);
-  const durationOptions = useMemo(
-    () => durations.length > 0 ? durations : [15, 30, 60],
-    [durations]
-  );
-  const [duration, setDurationValue] = useControllableState({
-    value: durationProp,
-    defaultValue: defaultDuration ?? durationOptions[0] ?? 15,
-    onChange: onDurationChange
-  });
-  const minDate = useMemo(() => normalizeDateInput(minDateProp, timeZone), [minDateProp, timeZone]);
-  const maxDate = useMemo(() => normalizeDateInput(maxDateProp, timeZone), [maxDateProp, timeZone]);
-  const today = todayKey(timeZone);
-  const earliestDate = minDate ?? today;
-  const initialMonth = monthKeyOf(clampDayKey(earliestDate, minDate, maxDate));
-  const [state, dispatch] = useReducer(
-    flowReducer,
-    void 0,
-    () => createFlowState({ duration, month: initialMonth })
-  );
-  const adapterRef = useRef(adapter);
-  adapterRef.current = adapter;
-  const stateRef = useRef(state);
-  stateRef.current = state;
-  const messagesRef = useRef(messages);
-  messagesRef.current = messages;
-  const onErrorRef = useRef(onError);
-  onErrorRef.current = onError;
-  const onBookedRef = useRef(onBooked);
-  onBookedRef.current = onBooked;
-  const submitLockRef = useRef(false);
-  const daysTokenRef = useRef(0);
-  const slotsTokenRef = useRef(0);
-  const [availabilityNonce, setAvailabilityNonce] = useReducer((n) => n + 1, 0);
-  const [slotsNonce, setSlotsNonce] = useReducer((n) => n + 1, 0);
-  useEffect(() => {
-    dispatch({ type: "setDuration", duration });
-  }, [duration]);
-  useEffect(() => {
-    const controller = new AbortController();
-    const token = daysTokenRef.current += 1;
-    const from = firstDayOfMonth(state.month);
-    const to = lastDayOfMonth(state.month);
-    dispatch({ type: "daysLoading", token });
-    void (async () => {
-      try {
-        const days = await adapterRef.current.getAvailability({
-          from,
-          to,
-          duration,
-          timeZone,
-          signal: controller.signal
-        });
-        if (controller.signal.aborted) return;
-        dispatch({ type: "daysLoaded", token, days: Array.isArray(days) ? days : [] });
-      } catch (error) {
-        if (controller.signal.aborted) return;
-        dispatch({
-          type: "daysFailed",
-          token,
-          error: messageOf(error, messagesRef.current.genericError)
-        });
-        onErrorRef.current?.(toError(error));
-      }
-    })();
-    return () => controller.abort();
-  }, [state.month, duration, timeZone, availabilityNonce]);
-  const daysRef = useRef(state.days);
-  daysRef.current = state.days;
+function useBrowserDefaults() {
+  const [defaults, setDefaults] = useState(null);
   useEffect(() => {
-    const date = state.selectedDate;
-    if (!date) return;
-    const token = slotsTokenRef.current += 1;
-    dispatch({ type: "slotsLoading", token });
-    const inline = daysRef.current[date]?.slots;
-    if (inline && inline.length > 0) {
-      dispatch({ type: "slotsLoaded", token, slots: inline });
-      return;
-    }
-    const controller = new AbortController();
-    void (async () => {
-      try {
-        const slots = await adapterRef.current.getSlots({
-          date,
-          duration,
-          timeZone,
-          signal: controller.signal
-        });
-        if (controller.signal.aborted) return;
-        dispatch({ type: "slotsLoaded", token, slots: Array.isArray(slots) ? slots : [] });
-      } catch (error) {
-        if (controller.signal.aborted) return;
-        dispatch({
-          type: "slotsFailed",
-          token,
-          error: messageOf(error, messagesRef.current.genericError)
-        });
-        onErrorRef.current?.(toError(error));
-      }
-    })();
-    return () => controller.abort();
-  }, [state.selectedDate, state.selectionNonce, duration, timeZone, slotsNonce]);
-  const selectDate = useCallback((dayKey) => {
-    dispatch({ type: "selectDate", date: dayKey });
-  }, []);
-  const selectSlot = useCallback((slot) => {
-    dispatch({ type: "selectSlot", slot });
-  }, []);
-  const setDuration = useCallback(
-    (minutes) => {
-      setDurationValue(minutes);
-    },
-    [setDurationValue]
-  );
-  const setDetails = useCallback(
-    (details) => {
-      dispatch({ type: "setDetails", details });
-    },
-    []
-  );
-  const goToMonth = useCallback((monthKey) => {
-    dispatch({ type: "setMonth", month: monthKey });
-  }, []);
-  const touchField = useCallback((field) => {
-    dispatch({ type: "touch", field });
-  }, []);
-  const reset = useCallback(() => {
-    dispatch({ type: "reset" });
-  }, []);
-  const back = useCallback(() => {
-    const current = stateRef.current;
-    if (current.submitStatus === "submitting") return;
-    if (current.step === "date" || current.step === "confirmed") {
-      onDismiss?.();
-      return;
-    }
-    dispatch({ type: "back" });
-  }, [onDismiss]);
-  const reloadAvailability = useCallback(() => {
-    setAvailabilityNonce();
+    setDefaults(readBrowserDefaults());
   }, []);
-  const reloadSlots = useCallback(() => {
-    setSlotsNonce();
-  }, []);
-  const submit = useCallback(async () => {
-    if (submitLockRef.current) return;
-    const snapshot = stateRef.current;
-    const currentMessages = messagesRef.current;
-    dispatch({ type: "touch", field: "name" });
-    dispatch({ type: "touch", field: "email" });
-    const errors = validateDetails(snapshot.details, currentMessages);
-    if (hasErrors(errors) || !snapshot.selectedSlot || !snapshot.selectedDate) return;
-    const request = {
-      slot: { ...snapshot.selectedSlot, end: endOf(snapshot.selectedSlot, snapshot.duration) },
-      date: snapshot.selectedDate,
-      duration: snapshot.duration,
-      timeZone,
-      details: {
-        name: snapshot.details.name.trim(),
-        email: snapshot.details.email.trim(),
-        ...snapshot.details.notes ? { notes: snapshot.details.notes } : {}
-      }
-    };
-    const scenario = snapshot.scenarioId;
-    const stillCurrent = () => {
-      const current = stateRef.current;
-      return (
-        // `scenarioId` also covers "reset, then book the very same slot again":
-        // the date and the slot can match a second time, the scenario cannot.
-        current.scenarioId === scenario && current.selectedDate === request.date && current.selectedSlot?.start === request.slot.start
-      );
-    };
-    submitLockRef.current = true;
-    dispatch({ type: "submitStart" });
-    try {
-      const result = await adapterRef.current.createBooking(request);
-      onBookedRef.current?.(result ?? {}, request);
-      if (stillCurrent()) dispatch({ type: "submitSucceeded", scenario, result: result ?? {} });
-    } catch (error) {
-      onErrorRef.current?.(toError(error));
-      if (stillCurrent()) {
-        dispatch({
-          type: "submitFailed",
-          scenario,
-          error: messageOf(error, currentMessages.genericError)
-        });
-      }
-    } finally {
-      submitLockRef.current = false;
-    }
-  }, [timeZone]);
-  const monthGrid = useMemo(
-    () => buildMonthGrid(state.month, weekStartsOn),
-    [state.month, weekStartsOn]
-  );
-  const weekdayHeaders = useMemo(
-    () => rotateToWeekStart(shortWeekdayNames(locale, messages.weekdays), weekStartsOn),
-    [locale, messages.weekdays, weekStartsOn]
-  );
-  const weekdayLong = useMemo(
-    () => rotateToWeekStart(weekdayNames(locale), weekStartsOn),
-    [locale, weekStartsOn]
-  );
-  const fieldErrors = useMemo(
-    () => validateDetails(state.details, messages),
-    [state.details, messages]
-  );
-  const availabilityOf = useCallback((dayKey) => state.days[dayKey], [state.days]);
-  const isDayBookable = useCallback(
-    (dayKey) => {
-      if (compareDayKeys(dayKey, earliestDate) < 0) return false;
-      if (maxDate && compareDayKeys(dayKey, maxDate) > 0) return false;
-      const availability = state.days[dayKey];
-      if (!availability) return false;
-      const count = countSlots(availability);
-      return count === void 0 ? true : count > 0;
-    },
-    [state.days, earliestDate, maxDate]
-  );
-  const selectedDateLabel = state.selectedDate ? formatFullDay(state.selectedDate, locale) : "";
-  const selectedTimeLabel = state.selectedSlot ? formatTime(state.selectedSlot.start, timeZone, locale) : "";
+  return defaults;
+}
+function optionsOf(props, browser) {
   return {
-    state,
-    messages,
-    locale,
-    timeZone,
-    timeZoneName: state.step === "date" ? formatTimeZoneName(timeZone, locale) : void 0,
-    theme: resolvedTheme,
-    title: state.step === "confirmed" ? messages.bookedHeader : props.title ?? messages.title,
-    durations: durationOptions,
-    weekStartsOn,
-    ...minDate ? { minDate } : {},
-    ...maxDate ? { maxDate } : {},
-    monthGrid,
-    weekdayHeaders,
-    weekdayLongNames: weekdayLong,
-    monthLabel: formatMonthYear(state.month, locale),
-    selectedDateLabel,
-    selectedTimeLabel,
-    durationLabel: format(messages.duration, { count: duration }),
-    availabilityOf,
-    isDayBookable,
-    // The confirmation is terminal: there is nothing to go back to, so the back
-    // affordance only appears there when the consumer supplied `onDismiss`.
-    canGoBack: state.step !== "date" && state.step !== "confirmed" || Boolean(onDismiss),
-    fieldErrors,
-    shownFieldErrors: visibleErrors(fieldErrors, state.touched),
-    detailsValid: !hasErrors(fieldErrors),
-    actions: {
-      selectDate,
-      selectSlot,
-      setDuration,
-      setDetails,
-      touchField,
-      back,
-      submit,
-      reset,
-      goToMonth,
-      previousMonth: () => goToMonth(addMonths(stateRef.current.month, -1)),
-      nextMonth: () => goToMonth(addMonths(stateRef.current.month, 1)),
-      reloadAvailability,
-      reloadSlots
-    }
+    adapter: adapterOf(props),
+    config: configOf(props, browser),
+    inputs: inputsOf(props, browser),
+    ...props.attempt == null ? {} : { initialAttempt: props.attempt }
   };
 }
-function SlotlineProvider(props) {
-  const { children } = props;
-  const flow = useBookingFlow(props);
-  const ui = useMemo(
+function adapterOf(props) {
+  return props.adapter;
+}
+function configOf(props, browser) {
+  const locale = props.locale ?? browser?.locale;
+  return {
+    ...locale === void 0 ? {} : { locale },
+    ...props.messages === void 0 ? {} : { messages: props.messages },
+    ...props.weekStartsOn === void 0 ? {} : { weekStartsOn: props.weekStartsOn },
+    ...props.durations === void 0 ? {} : { durationOptions: props.durations },
+    ...props.minDate === void 0 ? {} : { minDate: props.minDate },
+    ...props.maxDate === void 0 ? {} : { maxDate: props.maxDate },
+    ...props.title === void 0 ? {} : { title: props.title },
+    ...props.context === void 0 ? {} : { context: props.context }
+  };
+}
+function inputsOf(props, browser) {
+  const inputs = {};
+  if (props.timeZone !== void 0) inputs.timeZone = props.timeZone;
+  else {
+    const timeZone = props.defaultTimeZone ?? browser?.timeZone;
+    if (timeZone !== void 0) inputs.defaultTimeZone = timeZone;
+  }
+  if (props.duration !== void 0) inputs.duration = props.duration;
+  if (props.defaultDuration !== void 0) inputs.defaultDuration = props.defaultDuration;
+  if (props.timeFormat !== void 0) inputs.timeFormat = props.timeFormat;
+  else if (props.defaultTimeFormat !== void 0)
+    inputs.defaultTimeFormat = props.defaultTimeFormat;
+  return inputs;
+}
+function useBookingController(props) {
+  const browser = useBrowserDefaults();
+  const propsRef = useRef(props);
+  propsRef.current = props;
+  const browserRef = useRef(browser);
+  browserRef.current = browser;
+  const controllerRef = useRef(null);
+  if (controllerRef.current === null) {
+    controllerRef.current = createBookingController({
+      ...optionsOf(props, browser),
+      handlers: {
+        // Every handler reads the latest props, so a re-render never leaves a
+        // stale callback behind.
+        onBooked: (result, request) => (
+          // The flow carries the payload as plain values; the adapter's own type is
+          // what the application declared for its form.
+          propsRef.current.onBooked?.(result, request)
+        ),
+        onError: (error, context) => propsRef.current.onError?.(error, context),
+        onDismiss: () => propsRef.current.onDismiss?.(),
+        onDurationChange: (duration, metadata) => propsRef.current.onDurationChange?.(duration, metadata),
+        onTimeFormatChange: (timeFormat, metadata) => propsRef.current.onTimeFormatChange?.(timeFormat, metadata),
+        onContextChange: (context, metadata) => propsRef.current.onContextChange?.(context, metadata)
+      }
+    });
+  }
+  const controller = controllerRef.current;
+  useEffect(() => {
+    controller.updateAdapter(adapterOf(propsRef.current));
+    controller.updateConfig(configOf(propsRef.current, browserRef.current));
+    controller.updateInputs(inputsOf(propsRef.current, browserRef.current));
+  });
+  useEffect(() => {
+    controller.start();
+    return () => controller.stop();
+  }, [controller]);
+  useEffect(() => observeVisibilityChange(() => controller.refreshTime()), [controller]);
+  return controller;
+}
+function useSubscribedFlow(controller) {
+  const snapshot = useSyncExternalStore(
+    controller.subscribe,
+    controller.getSnapshot,
+    controller.getSnapshot
+  );
+  return useMemo(() => ({ snapshot, actions: controller.actions }), [snapshot, controller]);
+}
+function useBookingFlow(props) {
+  return useSubscribedFlow(useBookingController(props));
+}
+function useSlotlineUI(props) {
+  const browser = useBrowserDefaults();
+  const locale = props.locale ?? browser?.locale ?? "en";
+  const messages = useMemo(() => resolveMessages(locale, props.messages), [locale, props.messages]);
+  const theme = useResolvedTheme(props.theme ?? "dark");
+  return useMemo(
     () => ({
       animations: props.animations ?? cssAnimations,
       classNames: props.classNames,
+      className: props.className,
       autoFocus: props.autoFocus ?? false,
       trapFocus: props.trapFocus ?? false,
-      className: props.className
+      canDismiss: Boolean(props.onDismiss),
+      onCheckStatus: props.onCheckStatus,
+      messages,
+      locale,
+      theme
     }),
     [
       props.animations,
       props.classNames,
+      props.className,
       props.autoFocus,
       props.trapFocus,
-      props.className
+      props.onDismiss,
+      props.onCheckStatus,
+      messages,
+      locale,
+      theme
     ]
   );
+}
+function SlotlineProvider(props) {
+  const { children } = props;
+  const controller = useBookingController(props);
+  const ui = useSlotlineUI(props);
+  const snapshot = useSyncExternalStore(
+    controller.subscribe,
+    controller.getSnapshot,
+    controller.getSnapshot
+  );
+  const flow = useMemo(() => ({ snapshot, actions: controller.actions }), [snapshot, controller]);
   return /* @__PURE__ */ jsx(FlowContext.Provider, { value: flow, children: /* @__PURE__ */ jsx(UIContext.Provider, { value: ui, children }) });
 }
 function createSlotline(animations) {
@@ -1191,6 +935,6 @@ function createSlotline(animations) {
 }
 var Slotline = createSlotline(cssAnimations);
 
-export { FlowContext, Slotline, SlotlineProvider, SlotlineView, UIContext, createSlotline, cssAnimations, useAnimations, useBookingFlow, useClassNames, useSlotlineContext, useUI };
+export { Slotline, SlotlineProvider, SlotlineView, createSlotline, cssAnimations, useAnimations, useBookingFlow, useClassNames, useSlotlineContext, useUI };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map