@asksable/site-connector 0.4.3 → 0.6.1

package/README.md

@@ -82,6 +82,27 @@ import {
 } from '@asksable/site-connector'
 ```
 
+### Preselecting From A Host Estimator
+
+When the host page already knows what the customer is booking, pass an
+`initialSelection`. The widget resolves `serviceSlug` after booking setup loads,
+shows the selected service card, keeps the Change affordance available, and
+sends `intakeResponses` with the final booking.
+
+```tsx
+<BookingWidgetPanel
+  initialSelection={{
+    serviceSlug: 'interior-detailing',
+    customerNotes: 'Estimate shown: $199',
+    intakeResponses: {
+      vehicle_size: 'large',
+      pet_hair: 'minimal',
+      estimate_cents: 19900,
+    },
+  }}
+/>
+```
+
 ## Exports
 
 - `createSablePublicClient`
@@ -95,7 +116,7 @@ import {
 - `BookingWidgetPlaceholder`
 - `getResolvedSiteProfile`
 - `createTranslator`, `pickLocaleField`, `localeToIntl`, `TRANSLATIONS`, `DEFAULT_LOCALE`
-- types: `SableSiteConfig`, `Locale`, `TranslationKey`, `TranslationOverrides`, plus public site / booking payloads
+- types: `SableSiteConfig`, `BookingInitialSelection`, `Locale`, `TranslationKey`, `TranslationOverrides`, plus public site / booking payloads
 
 ## Layout-stable loading
 
@@ -152,7 +173,7 @@ function App() {
 }
 ```
 
-The widget responds instantly to language changes — your toggle component flips both the host site's text and the widget by sharing the same `language` state.
+The widget responds instantly to language changes. Your toggle component flips both the host site's text and the widget by sharing the same `language` state.
 
 ### Override individual strings (rare)
 
@@ -181,8 +202,8 @@ Form labels, button text, mobile step labels, helper text, success/cancelled sta
 
 ### What the widget does NOT translate
 
-- **Service names, descriptions, category names** — these come from the Sable workspace. The widget reads `nameEn` / `nameEs` (or any `${field}En` / `${field}Es`) fields when available, falling back to the base field. If the workspace only entered one locale, that text renders regardless of UI language. (Future workstream: dashboard support for entering both locales.)
-- **Customer-typed input** — names, notes, etc.
+- **Service names, descriptions, category names**: these come from the Sable workspace. The widget reads `nameEn` / `nameEs` (or any `${field}En` / `${field}Es`) fields when available, falling back to the base field. If the workspace only entered one locale, that text renders regardless of UI language. (Future workstream: dashboard support for entering both locales.)
+- **Customer-typed input**: names, notes, etc.
 
 ### Detecting locale in custom components
 
@@ -199,7 +220,7 @@ function MyComponent() {
 
 ### For template builders
 
-Every Sable website template should include the `language` prop wiring as part of the boilerplate. If the template supports a toggle, the toggle component must flip both the host site's text and the widget by sharing the same language state. **Never let the widget and host site drift to different locales** — pass a single reactive `language` value into `SableSiteConfig` and the widget stays in sync automatically.
+Every Sable website template should include the `language` prop wiring as part of the boilerplate. If the template supports a toggle, the toggle component must flip both the host site's text and the widget by sharing the same language state. **Never let the widget and host site drift to different locales**. Pass a single reactive `language` value into `SableSiteConfig` and the widget stays in sync automatically.
 
 ## Public API Contract
 

package/dist/bones/registry.js

@@ -1,5 +1,5 @@
 "use client";
-// Auto-generated by `npx boneyard-js build` — do not edit
+// Auto-generated by `npx boneyard-js build` - do not edit
 import { registerBones } from 'boneyard-js';
 import { configureBoneyard } from 'boneyard-js/react';
 import _booking_widget from './booking-widget.bones.json';

package/dist/booking-widget.d.ts

@@ -13,7 +13,7 @@ export type BookingRescheduleContext = {
      *  giving up. */
     formerStartTime: number;
     formerEndTime: number;
-    /** Locked service for the reschedule — cannot be changed without
+    /** Locked service for the reschedule - cannot be changed without
      *  cancelling and re-booking. */
     serviceId: string;
     /** Optional staff lock. When set, the staff picker is pre-filled
@@ -29,6 +29,21 @@ export type BookingRescheduleContext = {
      *  from the original appointment record (host display name). */
     rescheduledByName?: string;
 };
+export type BookingInitialSelection = {
+    /** Prefer an exact Sable service id when the host already has it. */
+    serviceId?: string;
+    /** Host-friendly fallback, e.g. `interior-detailing`. */
+    serviceSlug?: string;
+    /** Optional staff/provider preselection. The user can still change it. */
+    staffMemberId?: string;
+    /** Optional customer-facing note carried into the booking request. */
+    customerNotes?: string;
+    /**
+     * Service-specific intake answers supplied by a host estimator or product
+     * page before the customer lands in the booking widget.
+     */
+    intakeResponses?: Record<string, unknown>;
+};
 type BookingWidgetProps = {
     title?: string;
     description?: string;
@@ -39,7 +54,7 @@ type BookingWidgetProps = {
      * from `rescheduleContext`, swaps the CTA copy, and routes the
      * submit through `onRescheduleSubmit` instead of the public-create
      * mutation. Adding this as an opt-in prop keeps the npm package
-     * fully backward compatible — every existing consumer that omits
+     * fully backward compatible - every existing consumer that omits
      * `mode` continues to behave exactly as before.
      */
     mode?: 'create' | 'reschedule';
@@ -55,6 +70,11 @@ type BookingWidgetProps = {
         newStartTime: number;
         newEndTime: number;
     }) => Promise<void>;
+    /**
+     * Optional create-mode preselection. Used when a host page already knows the
+     * service and configuration, e.g. an estimator's "Book this detail" CTA.
+     */
+    initialSelection?: BookingInitialSelection;
     /**
      * Destination for the success-state CTA after a new booking is submitted.
      * Defaults to the host site's home page so embedded sites don't trap the
@@ -65,13 +85,13 @@ type BookingWidgetProps = {
      * Dev-only: forces the widget into a terminal state without
      * calling any backend mutation. Used by the dev preview page to
      * iterate on success/cancel visuals without spinning through the
-     * form each time. Strip from prod surfaces — these never call any
+     * form each time. Strip from prod surfaces - these never call any
      * backend.
      *
      * - `'success'`: renders the "You're All Set!" view (or the
      *   reschedule variant when `mode === 'reschedule'`).
      * - `'cancelled'`: renders the "Booking cancelled" view (preview
-     *   only — the customer-side cancel mutation isn't built yet).
+     *   only - the customer-side cancel mutation isn't built yet).
      *
      * The legacy `__devForceSuccess` boolean is still accepted for
      * back-compat with surfaces that use the old prop.
@@ -79,6 +99,6 @@ type BookingWidgetProps = {
     __devForceState?: 'success' | 'cancelled' | 'payment-full' | 'payment-deposit';
     __devForceSuccess?: boolean;
 };
-export declare function BookingWidgetPanel({ title, description, mobileHeader, mode, rescheduleContext, onRescheduleSubmit, successRedirectHref, __devForceState, __devForceSuccess, }: BookingWidgetProps): import("react/jsx-runtime").JSX.Element;
+export declare function BookingWidgetPanel({ title, description, mobileHeader, mode, rescheduleContext, onRescheduleSubmit, initialSelection, successRedirectHref, __devForceState, __devForceSuccess, }: BookingWidgetProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=booking-widget.d.ts.map

package/dist/booking-widget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"booking-widget.d.ts","sourceRoot":"","sources":["../src/booking-widget.tsx"],"names":[],"mappings":"AAaA,OAAO,qBAAqB,CAAA;AAc5B,OAAO,KAAK,EAKV,SAAS,EACV,MAAM,OAAO,CAAA;AAuDd;;;;;GAKG;AACH,MAAM,MAAM,wBAAwB,GAAG;IACrC,aAAa,EAAE,MAAM,CAAA;IACrB;;qBAEiB;IACjB,eAAe,EAAE,MAAM,CAAA;IACvB,aAAa,EAAE,MAAM,CAAA;IACrB;qCACiC;IACjC,SAAS,EAAE,MAAM,CAAA;IACjB;;sBAEkB;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;yCACqC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;oEACgE;IAChE,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,CAAA;AAED,KAAK,kBAAkB,GAAG;IACxB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,YAAY,CAAA;IAC9B,iBAAiB,CAAC,EAAE,wBAAwB,CAAA;IAC5C;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE;QAC1B,YAAY,EAAE,MAAM,CAAA;QACpB,UAAU,EAAE,MAAM,CAAA;KACnB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACnB;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B;;;;;;;;;;;;;;OAcG;IACH,eAAe,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,cAAc,GAAG,iBAAiB,CAAA;IAC9E,iBAAiB,CAAC,EAAE,OAAO,CAAA;CAC5B,CAAA;AAKD,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,WAAW,EACX,YAAY,EACZ,IAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,mBAAyB,EACzB,eAAe,EACf,iBAAiB,GAClB,EAAE,kBAAkB,2CA6tFpB"}
+{"version":3,"file":"booking-widget.d.ts","sourceRoot":"","sources":["../src/booking-widget.tsx"],"names":[],"mappings":"AAaA,OAAO,qBAAqB,CAAA;AAc5B,OAAO,KAAK,EAKV,SAAS,EACV,MAAM,OAAO,CAAA;AAuDd;;;;;GAKG;AACH,MAAM,MAAM,wBAAwB,GAAG;IACrC,aAAa,EAAE,MAAM,CAAA;IACrB;;qBAEiB;IACjB,eAAe,EAAE,MAAM,CAAA;IACvB,aAAa,EAAE,MAAM,CAAA;IACrB;qCACiC;IACjC,SAAS,EAAE,MAAM,CAAA;IACjB;;sBAEkB;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;yCACqC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;oEACgE;IAChE,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,CAAA;AAED,MAAM,MAAM,uBAAuB,GAAG;IACpC,qEAAqE;IACrE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,yDAAyD;IACzD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,0EAA0E;IAC1E,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,sEAAsE;IACtE,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CAC1C,CAAA;AAED,KAAK,kBAAkB,GAAG;IACxB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,YAAY,CAAA;IAC9B,iBAAiB,CAAC,EAAE,wBAAwB,CAAA;IAC5C;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE;QAC1B,YAAY,EAAE,MAAM,CAAA;QACpB,UAAU,EAAE,MAAM,CAAA;KACnB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACnB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,uBAAuB,CAAA;IAC1C;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B;;;;;;;;;;;;;;OAcG;IACH,eAAe,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,cAAc,GAAG,iBAAiB,CAAA;IAC9E,iBAAiB,CAAC,EAAE,OAAO,CAAA;CAC5B,CAAA;AAKD,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,WAAW,EACX,YAAY,EACZ,IAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,gBAAgB,EAChB,mBAAyB,EACzB,eAAe,EACf,iBAAiB,GAClB,EAAE,kBAAkB,2CA0wFpB"}

package/dist/booking-widget.js

@@ -35,7 +35,7 @@ function findCalculatedServiceMissingIntake(setup) {
 }
 const MOBILE_PROGRESS_STEPS_SCHEDULED = [1, 2, 3, 4];
 const MOBILE_PROGRESS_STEPS_ASYNC = [1, 3, 4];
-export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'create', rescheduleContext, onRescheduleSubmit, successRedirectHref = '/', __devForceState, __devForceSuccess, }) {
+export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'create', rescheduleContext, onRescheduleSubmit, initialSelection, successRedirectHref = '/', __devForceState, __devForceSuccess, }) {
     const forcedState = __devForceState ?? (__devForceSuccess ? 'success' : null);
     const isReschedule = mode === 'reschedule';
     // Reschedule summary holds longer values (full former-time
@@ -62,8 +62,10 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
     // appointment's service. We seed selection from rescheduleContext
     // up front so the calendar/slot fetch fires without the user
     // needing to click anything.
-    const [selectedServiceId, setSelectedServiceId] = useState(() => rescheduleContext?.serviceId ?? null);
-    const [selectedStaffId, setSelectedStaffId] = useState(() => rescheduleContext?.staffMemberId ?? null);
+    const [selectedServiceId, setSelectedServiceId] = useState(() => rescheduleContext?.serviceId ?? initialSelection?.serviceId ?? null);
+    const [selectedStaffId, setSelectedStaffId] = useState(() => rescheduleContext?.staffMemberId ??
+        initialSelection?.staffMemberId ??
+        null);
     const [calendarMonth, setCalendarMonth] = useState(() => startOfMonth(new Date()));
     const [availabilityByDate, setAvailabilityByDate] = useState(new Map());
     const [isAvailabilityLoading, setIsAvailabilityLoading] = useState(false);
@@ -82,12 +84,14 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
     // Pre-fill contact fields from the original booking when
     // rescheduling. Editable, since a user might want to fix typos at
     // the same time, but the reschedule flow doesn't actually overwrite
-    // them — the host's mutation only patches the time fields.
+    // them - the host's mutation only patches the time fields.
     const [customerName, setCustomerName] = useState(() => rescheduleContext?.customerName ?? '');
     const [customerEmail, setCustomerEmail] = useState(() => rescheduleContext?.customerEmail ?? '');
     const [customerPhone, setCustomerPhone] = useState(() => rescheduleContext?.customerPhone ?? '');
     const [customerNotes, setCustomerNotes] = useState('');
-    const [intakeResponses, setIntakeResponses] = useState({});
+    const [intakeResponses, setIntakeResponses] = useState(() => initialSelection?.intakeResponses ?? {});
+    const initialSelectionAppliedRef = useRef(false);
+    const previousSelectedServiceIdRef = useRef(selectedServiceId);
     const [quote, setQuote] = useState(null);
     const [isQuoteLoading, setIsQuoteLoading] = useState(false);
     const [payment, setPayment] = useState(null);
@@ -122,6 +126,11 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
     // cleanly. Avoids stale-memo / stale-ref edge cases that otherwise
     // can leave the calendar empty until a hard refresh.
     const [bookingFlowKey, setBookingFlowKey] = useState(0);
+    const initialServiceId = initialSelection?.serviceId;
+    const initialServiceSlug = initialSelection?.serviceSlug;
+    const initialStaffMemberId = initialSelection?.staffMemberId;
+    const initialCustomerNotes = initialSelection?.customerNotes;
+    const initialIntakeResponses = initialSelection?.intakeResponses;
     const availabilityCacheRef = useRef(new Map());
     const holdIdRef = useRef(null);
     // Calendar card lives in the middle column and is the natural
@@ -177,9 +186,22 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
                 throw new Error(`Calculated service "${missingIntake.name}" is missing intakeForm.sections. Shipping services must provide an intakeForm instead of falling back to the generic contact form.`);
             }
             setSetup(result);
-            // Don't auto-select a service in create mode — let the user
-            // actively pick one. Reschedule mode pre-seeds via the
-            // useState initializer above so this preserves that.
+            if (!isReschedule && !initialSelectionAppliedRef.current) {
+                const initialService = (initialServiceId
+                    ? result.services.find((service) => service._id === initialServiceId)
+                    : null) ??
+                    (initialServiceSlug
+                        ? result.services.find((service) => service.slug === initialServiceSlug)
+                        : null) ??
+                    null;
+                if (initialService) {
+                    setSelectedServiceId(initialService._id);
+                    setSelectedStaffId(initialStaffMemberId ?? null);
+                    setCustomerNotes(initialCustomerNotes ?? '');
+                    setIntakeResponses(initialIntakeResponses ?? {});
+                    initialSelectionAppliedRef.current = true;
+                }
+            }
             setError(null);
         })
             .catch((nextError) => {
@@ -197,7 +219,16 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
         return () => {
             cancelled = true;
         };
-    }, [client, siteSlug]);
+    }, [
+        client,
+        initialCustomerNotes,
+        initialIntakeResponses,
+        initialServiceId,
+        initialServiceSlug,
+        initialStaffMemberId,
+        isReschedule,
+        siteSlug,
+    ]);
     const selectedService = useMemo(() => setup?.services.find((service) => service._id === selectedServiceId) ??
         null, [selectedServiceId, setup]);
     const selectedServiceRequiresSlot = selectedService?.publicBookingMode !== 'async';
@@ -213,7 +244,7 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
     const isCustomerEmailValid = trimmedCustomerEmail.length > 0 && isValidEmailAddress(trimmedCustomerEmail);
     const showCustomerEmailError = trimmedCustomerEmail.length > 0 && !isCustomerEmailValid;
     // In reschedule mode we pre-select the original service but keep
-    // the full list visible — the admin may legitimately need to
+    // the full list visible - the admin may legitimately need to
     // switch service when rescheduling (e.g. customer asked for a
     // shorter visit alongside the time change).
     const visibleServices = useMemo(() => {
@@ -266,7 +297,7 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
     // Original service / staff display names (looked up against the
     // loaded setup), used in the reschedule summary's "Former …" rows.
     // These render only when the user changes the corresponding field
-    // away from the original — picking only a new time leaves them
+    // away from the original - picking only a new time leaves them
     // hidden, so the summary stays clean for the common case.
     const formerService = useMemo(() => {
         if (!isReschedule || !rescheduleContext || !setup)
@@ -293,7 +324,7 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
         return setup.staff.filter((staffMember) => selectedService.assignedStaffIds.includes(staffMember._id));
     }, [selectedService, setup]);
     useEffect(() => {
-        // Wait for availableStaff to populate before clearing — otherwise
+        // Wait for availableStaff to populate before clearing - otherwise
         // a pre-seeded staffMemberId (e.g. from rescheduleContext) gets
         // wiped on the first render before the staff list arrives.
         if (availableStaff.length === 0)
@@ -318,8 +349,8 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
         // `availableStaffIds`, and we filter client-side per selected
         // provider. That means switching providers in the dropdown is
         // instant (no refetch) and we always know which staff are
-        // available on a given date — even when a single provider is
-        // selected — so we can disable unavailable rows in the dropdown.
+        // available on a given date - even when a single provider is
+        // selected - so we can disable unavailable rows in the dropdown.
         const requestKey = getAvailabilityCacheKey(siteSlug, selectedServiceId, calendarMonth);
         const cachedAvailability = availabilityCacheRef.current.get(requestKey);
         if (cachedAvailability) {
@@ -431,7 +462,16 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
         selectedStaffId,
     ]);
     useEffect(() => {
-        setIntakeResponses({});
+        if (previousSelectedServiceIdRef.current === selectedServiceId) {
+            return;
+        }
+        previousSelectedServiceIdRef.current = selectedServiceId;
+        if (initialSelectionAppliedRef.current) {
+            initialSelectionAppliedRef.current = false;
+        }
+        else {
+            setIntakeResponses({});
+        }
         setQuote(null);
     }, [selectedServiceId]);
     useEffect(() => {
@@ -549,7 +589,7 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
             });
         }, refreshAt);
         return () => window.clearTimeout(handle);
-        // handleHoldExpired is stable enough — it only reads setters
+        // handleHoldExpired is stable enough - it only reads setters
     }, [client, holdExpiresAt, holdId, sessionToken, siteSlug]);
     // Fires the moment the displayed countdown hits zero. The refresh
     // effect above usually preempts this by extending the hold ~30s
@@ -632,7 +672,7 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
     // Mobile 4-step gates. canAdvanceStepN = "the user can move PAST
     // step N to step N+1". Step 1 (service) requires a pick. Step 2
     // combines calendar + provider + time slots; user must pick date +
-    // slot to advance. Step 3 is the details form — needs contact name,
+    // slot to advance. Step 3 is the details form - needs contact name,
     // valid email, and any required intake fields filled. Step 4 is
     // the review screen (submit, not advance).
     const canAdvanceStep1 = Boolean(selectedService);
@@ -650,10 +690,10 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
     // Re-mount the slots wrapper whenever the inputs that affect the
     // slot list change so the CSS enter animation fires (.bw-slots-fade
     // + per-slot stagger). React diffs keys per parent, so reusing the
-    // same key on both the mobile and desktop render sites is fine —
+    // same key on both the mobile and desktop render sites is fine -
     // each parent independently remounts its child.
     // Provider row is the visible-list replacement for the old
-    // dropdown — same data, same handlers, but always-rendered so the
+    // dropdown - same data, same handlers, but always-rendered so the
     // user sees every option at a glance (Any + each staff). Active
     // selection is the filled state; unavailable staff (no slots on
     // the selected date) render disabled with an inline "Unavailable"
@@ -736,7 +776,7 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
         const intakeFields = renderIntakeFields(idPrefix);
         const contactFields = renderContactFields(idSuffix);
         // Contact first, intake after. Customers expect "tell us who you
-        // are" before "tell us about your shipment" — name and email are
+        // are" before "tell us about your shipment" - name and email are
         // identity, intake fields are service-specific details.
         return (_jsxs(_Fragment, { children: [contactFields, intakeFields] }));
     }
@@ -858,7 +898,7 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
     function handleConfirmAttempt() {
         // The disabled state is purely visual (aria-disabled + class). Real
         // submittability gates here so we can surface validation help only
-        // after the user actually tries to confirm — never on a fresh form.
+        // after the user actually tries to confirm - never on a fresh form.
         if (!canSubmit || isQuoteLoading || isSubmitting) {
             setSubmitAttempted(true);
             return;
@@ -995,7 +1035,7 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
     }
     if (forcedState === 'cancelled') {
         return (_jsx("section", { className: "bw", children: _jsxs("div", { className: "bw-done", children: [_jsx("div", { className: "bw-done-icon bw-done-icon--muted", children: _jsx(XIcon, {}) }), _jsx("h3", { className: "bw-done-title", children: t('cancelledTitle') }), _jsx("p", { className: "bw-done-text", children: t('cancelledBody') }), _jsx("button", { type: "button", className: "bw-btn-primary", onClick: () => {
-                            /* dev preview only — host wires the real handler */
+                            /* dev preview only - host wires the real handler */
                         }, children: t('cancelledCta') })] }) }));
     }
     if (success || forcedState === 'success') {
@@ -1249,7 +1289,7 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
                                                     ? t('btnContinueToPayment')
                                                     : t('btnConfirmBooking') }), !isSubmitting ? _jsx(ArrowRightIcon, {}) : null] }))] }) })] }, bookingFlowKey) }));
 }
-/* Payment panel — design proposal for the pay-before-booking flow.
+/* Payment panel - design proposal for the pay-before-booking flow.
  * Renders inside the desktop details form (and mobile step-4 form
  * once wired) when the selected service has paymentMode === 'full'
  * or 'deposit'. Visuals only today: real implementation will mount
@@ -1264,7 +1304,7 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
  *   1. Move/replace this PaymentPanel into the left summary pane
  *      (.bw-details-summary) so the Stripe Element sits where the
  *      customer reads what they're paying for. The right form pane
- *      stays as-is — name/email/phone/notes only.
+ *      stays as-is - name/email/phone/notes only.
  *   2. Backend gap: getPublicBookingSetup currently strips the
  *      payment fields. Surface paymentMode, depositCents,
  *      requiresPayment, and the workspace's Stripe Connect account
@@ -1276,7 +1316,7 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
  *      to the bookingHoldId so the amount can't be tampered with).
  *   4. Gate createPublicAppointment behind paymentIntent.status
  *      === 'succeeded'. On failure: keep the hold for one retry.
- *   5. Confirm CTA copy already branches on forcedState — wire the
+ *   5. Confirm CTA copy already branches on forcedState - wire the
  *      same branch on the real `service.requiresPayment` field.
  *   6. Visual reference: this PaymentPanel + the dev preview pills
  *      ('Pay full' / 'Pay deposit') in dev/booking-widget-preview
@@ -1505,12 +1545,12 @@ function IntakeSelect({ id, value, onChange, options, placeholder, required, })
      * Decide which side to open the menu on. If the space below the
      * trigger isn't enough to fit the menu, and there's more space
      * above, flip the menu above the trigger. Runs at every open
-     * (desktop AND mobile) — handles both the desktop near-footer
+     * (desktop AND mobile) - handles both the desktop near-footer
      * case and the mobile near-bottom-of-widget case.
      *
      * The menu's CSS max-height is `min(280px, 60svh)`. We compute
      * the same effective max here so the flip decision tracks the
-     * real available space — important on short phones where 60svh
+     * real available space - important on short phones where 60svh
      * is much smaller than 280px.
      */
     function computePlacement() {
@@ -1770,7 +1810,7 @@ function readString(value) {
 // SSR/no-bones space holder and Suspense fallback for host sites.
 function AvailabilitySkeleton() {
     // Reuses .bw-time-slots so the skeleton inherits the same layout
-    // overrides as the real slots — vertical 1-col on desktop (via the
+    // overrides as the real slots - vertical 1-col on desktop (via the
     // .bw-slots-desktop scope), 4-col grid on mobile (default). Pill
     // dimensions match the rendered .bw-slot.
     return (_jsx("div", { className: "bw-time-slots bw-time-slots--skeleton", children: Array.from({ length: 8 }).map((_, index) => (_jsx("div", { className: "bw-skel bw-skel--slot" }, index))) }));
@@ -1867,7 +1907,7 @@ function formatDateKey(date) {
 function formatMonthLabel(date, locale = 'en-US') {
     // Use a simple "Month YYYY" shape across locales. Default Spanish
     // formatting yields "mayo de 2026" (lowercased, with "de"), which
-    // we don't want — strip both for a tighter calendar header.
+    // we don't want - strip both for a tighter calendar header.
     const month = new Intl.DateTimeFormat(locale, { month: 'long' }).format(date);
     const capitalizedMonth = month.charAt(0).toUpperCase() + month.slice(1);
     return `${capitalizedMonth} ${date.getFullYear()}`;