@resira/ui 0.3.1 → 0.4.0

package/README.md

@@ -1,11 +1,11 @@
-# @resira/ui v0.3.1
+# @resira/ui v0.3.2
 
 React booking UI for Resira. It includes a ready-to-embed widget, modal flow, provider, hooks, and lower-level components for custom booking experiences.
 
 ## Installation
 
 ```bash
-npm install @resira/ui@0.3.1 @resira/sdk@0.3.0
+npm install @resira/ui@0.3.2 @resira/sdk@0.3.1
 ```
 
 Peer dependencies:
@@ -103,7 +103,7 @@ import "@resira/ui/styles.css";
 | `groupServicesByCategory` | `boolean` | Group services by linked equipment type |
 | `renderServiceCard` | `(product, selected) => ReactNode` | Custom service card rendering |
 | `baseUrl` | `string` | Optional API origin override |
-| `baseUrls` | `Array<string \| WeightedBaseUrl>` | Optional explicit origin list |
+| `baseUrls` | `Array<string \| WeightedBaseUrl>` | Optional ordered fallback origin list |
 | `stripePublishableKey` | `string` | Stripe publishable key override |
 | `termsText` | `string` | Terms text override |
 | `waiverText` | `string` | Waiver text override |
@@ -233,4 +233,6 @@ import { DishShowcase } from "@resira/ui";
 
 - The widget supports catalog mode when `resourceId` is omitted.
 - Service and watersport flows group services by linked equipment category by default.
+- Loading and error states now announce themselves to assistive technologies on the main widget surfaces.
+- Client-side API origin stickiness/load-balancing has been removed; routing is deterministic unless you pass explicit fallback origins.
 - The package is intended for browser usage and ships CSS separately via `@resira/ui/styles.css`.

package/dist/index.cjs

@@ -224,6 +224,12 @@ function ResiraProvider({
   const visibleServiceCount = config?.visibleServiceCount ?? 4;
   const groupServicesByCategory = config?.groupServicesByCategory ?? true;
   const renderServiceCard = config?.renderServiceCard;
+  const showStepIndicator = config?.showStepIndicator ?? true;
+  const deeplink = config?.deeplink;
+  const deeplinkGuest = config?.deeplinkGuest;
+  const onStepChange = config?.onStepChange;
+  const onBookingComplete = config?.onBookingComplete;
+  const onError = config?.onError;
   const cssVars = react.useMemo(() => themeToCSS(theme), [theme]);
   const value = react.useMemo(
     () => ({
@@ -250,9 +256,15 @@ function ResiraProvider({
       serviceLayout,
       visibleServiceCount,
       groupServicesByCategory,
-      renderServiceCard
+      renderServiceCard,
+      showStepIndicator,
+      deeplink,
+      deeplinkGuest,
+      onStepChange,
+      onBookingComplete,
+      onError
     }),
-    [client, resourceId, activeResourceId, setActiveResourceId, catalogMode, allowMultiSelect, domain, theme, locale, domainConfig, stripePublishableKey, termsText, waiverText, showWaiver, showTerms, showRemainingSpots, depositPercent, refundPolicy, onClose, classNames, serviceLayout, visibleServiceCount, groupServicesByCategory, renderServiceCard]
+    [client, resourceId, activeResourceId, setActiveResourceId, catalogMode, allowMultiSelect, domain, theme, locale, domainConfig, stripePublishableKey, termsText, waiverText, showWaiver, showTerms, showRemainingSpots, depositPercent, refundPolicy, onClose, classNames, serviceLayout, visibleServiceCount, groupServicesByCategory, renderServiceCard, showStepIndicator, deeplink, deeplinkGuest, onStepChange, onBookingComplete, onError]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(ResiraContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "resira-root", style: cssVars, children }) });
 }
@@ -547,12 +559,17 @@ function useDish(dishId) {
   }, [client, dishId]);
   return { dish, loading, error };
 }
-function useDishes() {
+function useDishes(enabled = true) {
   const { client } = useResira();
   const [dishes, setDishes] = react.useState([]);
-  const [loading, setLoading] = react.useState(true);
+  const [loading, setLoading] = react.useState(enabled);
   const [error, setError] = react.useState(null);
   react.useEffect(() => {
+    if (!enabled) {
+      setLoading(false);
+      setError(null);
+      return;
+    }
     let cancelled = false;
     async function fetchDishes() {
       try {
@@ -576,7 +593,7 @@ function useDishes() {
     return () => {
       cancelled = true;
     };
-  }, [client]);
+  }, [client, enabled]);
   return { dishes, loading, error };
 }
 var defaultSize = 20;
@@ -1542,13 +1559,13 @@ function ResourcePicker({
   error = null
 }) {
   if (loading) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-loading", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "resira-spinner" }),
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-loading", role: "status", "aria-live": "polite", "aria-busy": "true", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "resira-spinner", "aria-hidden": "true" }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "resira-loading-text", children: "Loading resources\u2026" })
     ] });
   }
   if (error) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "resira-error", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "resira-error-message", children: error }) });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "resira-error", role: "alert", "aria-live": "assertive", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "resira-error-message", children: error }) });
   }
   if (resources.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "resira-empty", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "No resources available at the moment." }) });
@@ -1627,39 +1644,90 @@ function formatCategoryLabel(resourceType) {
   return resourceType.trim().split(/[_\-\s]+/).filter(Boolean).map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1).toLowerCase()).join(" ");
 }
 function groupProductsByCategory(products, resources) {
-  const resourceTypeById = new Map(
-    resources.map((resource) => [resource.id, resource.resourceType])
+  const resourceById = new Map(
+    resources.map((resource) => [resource.id, resource])
   );
   const groups = /* @__PURE__ */ new Map();
   products.forEach((product) => {
-    const categoryType = product.equipmentIds.map((equipmentId) => resourceTypeById.get(equipmentId)?.trim()).find((resourceType) => Boolean(resourceType));
+    let categoryResource;
+    const categoryType = product.equipmentIds.map((equipmentId) => {
+      const res = resourceById.get(equipmentId);
+      if (res?.resourceType?.trim() && !categoryResource) {
+        categoryResource = res;
+      }
+      return res?.resourceType?.trim();
+    }).find((resourceType) => Boolean(resourceType));
     const groupId = categoryType?.toLowerCase() ?? UNCATEGORIZED_CATEGORY_KEY;
     const label = categoryType ? formatCategoryLabel(categoryType) : UNCATEGORIZED_CATEGORY_LABEL;
     if (!groups.has(groupId)) {
       groups.set(groupId, {
         id: groupId,
         label,
+        imageUrl: categoryResource?.imageUrl ?? void 0,
         products: []
       });
     }
-    groups.get(groupId)?.products.push(product);
+    const group = groups.get(groupId);
+    group.products.push(product);
+    if (!group.imageUrl && categoryResource?.imageUrl) {
+      group.imageUrl = categoryResource.imageUrl;
+    }
   });
   return Array.from(groups.values());
 }
-function DefaultServiceCard({
+function BackArrow() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 12H5" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 19l-7-7 7-7" })
+  ] });
+}
+function CategoryTile({
+  group,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      className: "resira-category-tile",
+      onClick,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-category-tile-image", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src: group.imageUrl || PLACEHOLDER_IMG2,
+              alt: group.label,
+              loading: "lazy"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "resira-category-tile-overlay" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-category-tile-content", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "resira-category-tile-name", children: group.label }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "resira-category-tile-count", children: [
+            group.products.length,
+            " ",
+            group.products.length === 1 ? "service" : "services"
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function ServiceOverlayCard({
   product,
   isSelected,
-  layout,
   locale,
   cardClassName
 }) {
   const currency = product.currency ?? "EUR";
   const priceLabel = product.pricingModel === "per_rider" ? "per rider" : product.pricingModel === "per_person" ? locale.perPerson : locale.perSession;
-  let className = `resira-service-card resira-service-card--${layout}`;
-  if (isSelected) className += " resira-service-card--selected";
+  let className = "resira-service-overlay-card";
+  if (isSelected) className += " resira-service-overlay-card--selected";
   if (cardClassName) className += ` ${cardClassName}`;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "resira-service-card-image", children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "resira-service-overlay-card-bg", children: /* @__PURE__ */ jsxRuntime.jsx(
       "img",
       {
         src: product.imageUrl ?? PLACEHOLDER_IMG2,
@@ -1667,30 +1735,27 @@ function DefaultServiceCard({
         loading: "lazy"
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-service-card-body", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-service-card-top", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "resira-service-card-name", children: product.name }),
-        product.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "resira-service-card-desc", children: product.description })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "resira-service-overlay-card-gradient" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-service-overlay-card-content", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-service-overlay-card-top", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "resira-service-overlay-card-name", children: product.name }),
+        product.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "resira-service-overlay-card-desc", children: product.description })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-service-card-bottom", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "resira-service-card-price", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-service-overlay-card-bottom", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "resira-service-overlay-card-price", children: [
           formatPrice2(product.priceCents, currency),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "resira-service-card-price-unit", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "resira-service-overlay-card-price-unit", children: [
             "/",
             priceLabel
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-service-card-pills", children: [
-          product.durationMinutes > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "resira-service-card-pill", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ClockIcon, { size: 12 }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-service-overlay-card-pills", children: [
+          product.durationMinutes > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "resira-service-overlay-card-pill", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ClockIcon, { size: 11 }),
             formatDuration2(product.durationMinutes)
           ] }),
-          product.pricingModel === "per_person" && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "resira-service-card-pill", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(UsersIcon, { size: 12 }),
-            product.maxPartySize ? `1\u2013${product.maxPartySize}` : locale.perPerson
-          ] }),
-          product.maxPartySize && product.pricingModel !== "per_person" && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "resira-service-card-pill", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(UsersIcon, { size: 12 }),
+          product.maxPartySize && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "resira-service-overlay-card-pill", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(UsersIcon, { size: 11 }),
             "max ",
             product.maxPartySize
           ] })
@@ -1718,7 +1783,8 @@ function ProductSelector({
   error = null,
   layout: layoutProp,
   visibleCount: visibleCountProp,
-  groupByCategory: groupByCategoryProp
+  groupByCategory: groupByCategoryProp,
+  initialCategory
 }) {
   const {
     locale,
@@ -1732,81 +1798,107 @@ function ProductSelector({
   const visibleCount = visibleCountProp ?? providerCount;
   const groupByCategory = groupByCategoryProp ?? providerGroupByCategory;
   const containerRef = react.useRef(null);
+  const [activeCategory, setActiveCategory] = react.useState(initialCategory ?? null);
   const productGroups = react.useMemo(
-    () => groupByCategory ? groupProductsByCategory(products, resources) : [{ id: "all", label: "", products }],
+    () => groupByCategory ? groupProductsByCategory(products, resources) : [{ id: "all", label: "", imageUrl: void 0, products }],
     [groupByCategory, products, resources]
   );
-  const containerStyle = react.useMemo(() => {
-    if (layout === "horizontal") {
-      return {};
+  const skipCategoryView = productGroups.length <= 1;
+  react.useEffect(() => {
+    if (initialCategory && productGroups.some((g) => g.id === initialCategory)) {
+      setActiveCategory(initialCategory);
+    }
+  }, [initialCategory, productGroups]);
+  react.useEffect(() => {
+    if (activeCategory && !productGroups.some((g) => g.id === activeCategory)) {
+      setActiveCategory(null);
     }
-    const cardHeight = 88;
-    const gap = 10;
-    const sectionHeaderHeight = groupByCategory ? productGroups.length * 30 : 0;
-    const sectionGap = groupByCategory ? Math.max(productGroups.length - 1, 0) * 12 : 0;
-    const maxHeight = visibleCount * cardHeight + (visibleCount - 1) * gap + sectionHeaderHeight + sectionGap;
+  }, [activeCategory, productGroups]);
+  const activeCategoryGroup = react.useMemo(
+    () => productGroups.find((g) => g.id === activeCategory) ?? null,
+    [productGroups, activeCategory]
+  );
+  const displayProducts = react.useMemo(() => {
+    if (skipCategoryView) return products;
+    return activeCategoryGroup?.products ?? [];
+  }, [skipCategoryView, products, activeCategoryGroup]);
+  const containerStyle = react.useMemo(() => {
+    if (layout === "horizontal") return {};
+    const cardHeight = 180;
+    const gap = 12;
+    const maxHeight = visibleCount * cardHeight + (visibleCount - 1) * gap;
     return { maxHeight, overflowY: "auto" };
-  }, [groupByCategory, layout, productGroups.length, visibleCount]);
+  }, [layout, visibleCount]);
   if (loading) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-loading", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "resira-spinner" }),
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-loading", role: "status", "aria-live": "polite", "aria-busy": "true", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "resira-spinner", "aria-hidden": "true" }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "resira-loading-text", children: locale.loading })
     ] });
   }
   if (error) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "resira-error", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "resira-error-message", children: error }) });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "resira-error", role: "alert", "aria-live": "assertive", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "resira-error-message", children: error }) });
   }
   if (products.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "resira-empty", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "No services available at the moment." }) });
   }
+  if (groupByCategory && !skipCategoryView && !activeCategory) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "resira-service-picker", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "resira-category-grid", children: productGroups.map((group) => /* @__PURE__ */ jsxRuntime.jsx(
+      CategoryTile,
+      {
+        group,
+        onClick: () => setActiveCategory(group.id)
+      },
+      group.id
+    )) }) });
+  }
   const listClassName = [
-    "resira-service-list",
-    `resira-service-list--${layout}`,
+    "resira-service-overlay-list",
     classNames.serviceList
   ].filter(Boolean).join(" ");
-  const groupedListClassName = [
-    listClassName,
-    groupByCategory ? "resira-service-list--grouped" : ""
-  ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-service-picker", children: [
+    groupByCategory && !skipCategoryView && activeCategory && /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        className: "resira-category-back",
+        onClick: () => setActiveCategory(null),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(BackArrow, {}),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: activeCategoryGroup?.label ?? "All categories" })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref: containerRef,
-        className: groupByCategory ? "resira-service-group-list" : listClassName,
+        className: listClassName,
         style: containerStyle,
-        children: productGroups.map((group) => /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "resira-service-group", "aria-label": group.label || locale.chooseService, children: [
-          groupByCategory && group.label && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-service-group-header", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "resira-service-group-title", children: group.label }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "resira-service-group-count", children: group.products.length })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: groupByCategory ? groupedListClassName : listClassName, children: group.products.map((product) => {
-            const isSelected = selectedId === product.id;
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                className: "resira-service-card-btn",
-                onClick: () => onSelect(product),
-                "aria-pressed": isSelected,
-                children: renderServiceCard ? renderServiceCard(product, isSelected) : /* @__PURE__ */ jsxRuntime.jsx(
-                  DefaultServiceCard,
-                  {
-                    product,
-                    isSelected,
-                    layout,
-                    locale,
-                    cardClassName: isSelected ? classNames.serviceCardSelected : classNames.serviceCard
-                  }
-                )
-              },
-              product.id
-            );
-          }) })
-        ] }, group.id))
+        children: displayProducts.map((product) => {
+          const isSelected = selectedId === product.id;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: "resira-service-card-btn",
+              onClick: () => onSelect(product),
+              "aria-pressed": isSelected,
+              children: renderServiceCard ? renderServiceCard(product, isSelected) : /* @__PURE__ */ jsxRuntime.jsx(
+                ServiceOverlayCard,
+                {
+                  product,
+                  isSelected,
+                  locale,
+                  cardClassName: isSelected ? classNames.serviceCardSelected : classNames.serviceCard
+                }
+              )
+            },
+            product.id
+          );
+        })
       }
     ),
-    layout === "vertical" && products.length > visibleCount && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-service-scroll-hint", children: [
+    displayProducts.length > visibleCount && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-service-scroll-hint", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Scroll for more" }),
       /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 6l4 4 4-4" }) })
     ] })
@@ -2330,8 +2422,8 @@ function PaymentForm({
       ] })
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-payment-element-container", children: [
-      !ready && !error && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-loading", style: { padding: "24px 0" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "resira-spinner" }),
+      !ready && !error && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-loading", style: { padding: "24px 0" }, role: "status", "aria-live": "polite", "aria-busy": "true", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "resira-spinner", "aria-hidden": "true" }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "resira-loading-text", children: locale.loading })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -2343,7 +2435,7 @@ function PaymentForm({
         }
       )
     ] }),
-    error && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-payment-error", children: [
+    error && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-payment-error", role: "alert", "aria-live": "assertive", children: [
       /* @__PURE__ */ jsxRuntime.jsx(AlertCircleIcon, { size: 16 }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { children: error })
     ] }),
@@ -2601,7 +2693,13 @@ function ResiraBookingWidget() {
     showWaiver,
     showRemainingSpots,
     depositPercent,
-    onClose
+    onClose,
+    showStepIndicator,
+    deeplink,
+    deeplinkGuest,
+    onStepChange,
+    onBookingComplete,
+    onError
   } = useResira();
   const isDateBased = domain === "rental";
   const isTimeBased = domain === "restaurant" || domain === "watersport" || domain === "service";
@@ -2959,8 +3057,9 @@ function ResiraBookingWidget() {
       setStep("confirmation");
     }
   }, [createPayment, paymentPayload, confirmPayment]);
-  const handlePaymentError = react.useCallback((_msg) => {
-  }, []);
+  const handlePaymentError = react.useCallback((msg) => {
+    onError?.("payment_error", msg);
+  }, [onError]);
   const handleSubmitNoPayment = react.useCallback(async () => {
     if (showTerms && !termsAccepted) {
       setTermsError(locale.termsRequired);
@@ -2990,9 +3089,63 @@ function ResiraBookingWidget() {
   }, [guest, selection, locale, submit, termsAccepted, waiverAccepted, showTerms, showWaiver, activeResourceId, selectedProduct]);
   const footerBusy = submitting || creatingPayment || confirmingPayment || paymentFormSubmitting;
   const paymentActionDisabled = !paymentIntent || !paymentFormReady || paymentFormSubmitting || confirmingPayment;
+  const [deeplinkApplied, setDeeplinkApplied] = react.useState(false);
+  react.useEffect(() => {
+    if (deeplinkApplied || !deeplink) return;
+    if (deeplink.productId && products.length > 0 && !selectedProduct) {
+      const target = products.find((p) => p.id === deeplink.productId);
+      if (target) {
+        handleProductSelect(target);
+      }
+    }
+    if (deeplink.partySize || deeplink.duration || deeplink.date) {
+      setSelection((prev) => ({
+        ...prev,
+        ...deeplink.partySize ? { partySize: deeplink.partySize } : {},
+        ...deeplink.duration ? { duration: deeplink.duration } : {},
+        ...deeplink.date ? { startDate: deeplink.date } : {}
+      }));
+      if (deeplink.date) setSlotDate(deeplink.date);
+    }
+    if (deeplinkGuest) {
+      setGuest((prev) => ({
+        guestName: deeplinkGuest.name ?? prev.guestName,
+        guestEmail: deeplinkGuest.email ?? prev.guestEmail,
+        guestPhone: deeplinkGuest.phone ?? prev.guestPhone,
+        notes: deeplinkGuest.notes ?? prev.notes
+      }));
+    }
+    if (deeplink.productId && step === "resource" && isServiceBased) {
+      const target = products.find((p) => p.id === deeplink.productId);
+      if (target) {
+        setStep(STEPS[stepIndex("resource", STEPS) + 1]);
+      }
+    }
+    setDeeplinkApplied(true);
+  }, [deeplink, deeplinkGuest, products, selectedProduct, step, isServiceBased, STEPS, handleProductSelect]);
+  react.useEffect(() => {
+    onStepChange?.(step);
+  }, [step, onStepChange]);
+  react.useEffect(() => {
+    if (step === "confirmation") {
+      const bookingId = reservation?.id ?? paymentIntent?.reservationId;
+      onBookingComplete?.({
+        reservationId: bookingId,
+        product: selectedProduct ?? void 0,
+        selection,
+        guest
+      });
+    }
+  }, [step]);
+  react.useEffect(() => {
+    if (submitError) onError?.("submit_error", submitError);
+  }, [submitError, onError]);
+  react.useEffect(() => {
+    if (paymentError) onError?.("payment_error", paymentError);
+  }, [paymentError, onError]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-widget", children: [
     step !== "confirmation" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-widget-topbar", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "resira-steps", "aria-label": "Booking steps", children: STEPS.filter((s) => s !== "confirmation").map((s, i) => {
+      showStepIndicator && /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "resira-steps", "aria-label": "Booking steps", children: STEPS.filter((s) => s !== "confirmation").map((s, i) => {
         const isCompleted = stepIndex(step, STEPS) > i;
         const isActive = s === step;
         return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -3014,7 +3167,7 @@ function ResiraBookingWidget() {
         stepSubtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "resira-widget-subtitle", children: stepSubtitle })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-widget-body", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-widget-body", "aria-busy": loading || calendarLoading || resourcesLoading || productsLoading || footerBusy, children: [
       step === "resource" && isServiceBased && /* @__PURE__ */ jsxRuntime.jsx(
         ProductSelector,
         {
@@ -3037,10 +3190,10 @@ function ResiraBookingWidget() {
           error: resourcesError
         }
       ),
-      step === "availability" && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: (loading || calendarLoading) && !availability && !calendarData ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-loading", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "resira-spinner" }),
+      step === "availability" && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: (loading || calendarLoading) && !availability && !calendarData ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-loading", role: "status", "aria-live": "polite", "aria-busy": "true", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "resira-spinner", "aria-hidden": "true" }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "resira-loading-text", children: locale.loading })
-      ] }) : error ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-error", children: [
+      ] }) : error ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-error", role: "alert", "aria-live": "assertive", children: [
         /* @__PURE__ */ jsxRuntime.jsx(AlertCircleIcon, { size: 24 }),
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "resira-error-message", children: error }),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -3511,12 +3664,17 @@ function supportsArQuickLook() {
   const a = document.createElement("a");
   return a.relList?.supports?.("ar") ?? false;
 }
+function supportsModelViewer() {
+  if (typeof window === "undefined") return false;
+  return typeof customElements !== "undefined" && customElements.get("model-viewer") !== void 0;
+}
 function ModelViewer3D({
   dish,
   onClose
 }) {
   const model = dish.model;
   const arSupported = supportsArQuickLook();
+  const modelViewerSupported = supportsModelViewer();
   const arLinkRef = react.useRef(null);
   const handleArClick = react.useCallback(() => {
     arLinkRef.current?.click();
@@ -3538,7 +3696,7 @@ function ModelViewer3D({
       ),
       /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "resira-dish-viewer-title", children: dish.name })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "resira-dish-viewer-canvas", children: model?.glbUrl ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "resira-dish-viewer-canvas", children: model?.glbUrl && modelViewerSupported ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "model-viewer",
         {
@@ -3580,7 +3738,7 @@ function ModelViewer3D({
           className: "resira-dish-viewer-fallback-img"
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "resira-dish-viewer-no3d", children: "No 3D model available" })
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "resira-dish-viewer-no3d", children: model?.glbUrl ? "3D preview is unavailable here. Showing image instead." : "No 3D model available" })
     ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-dish-viewer-fallback", children: [
       /* @__PURE__ */ jsxRuntime.jsx(CubeIcon, { size: 48 }),
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "resira-dish-viewer-no3d", children: "No preview available" })
@@ -3594,7 +3752,7 @@ function ModelViewer3D({
       dish.allergens && dish.allergens.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "resira-dish-viewer-allergens", children: dish.allergens.map((a) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "resira-dish-viewer-allergen", children: a }, a)) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-dish-viewer-actions", children: [
-      model?.glbUrl && /* @__PURE__ */ jsxRuntime.jsxs(
+      model?.glbUrl && modelViewerSupported && /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
         {
           type: "button",
@@ -3673,7 +3831,8 @@ function DishShowcase({
   const { dish: singleDish, loading: singleLoading, error: singleError } = useDish(
     open && dishId ? dishId : void 0
   );
-  const { dishes: allDishes, loading: allLoading, error: allError } = useDishes();
+  const shouldLoadAllDishes = open && (!dishId || showAll);
+  const { dishes: allDishes, loading: allLoading, error: allError } = useDishes(shouldLoadAllDishes);
   const isSingleMode = !!dishId;
   const loading = isSingleMode ? singleLoading : allLoading;
   const error = isSingleMode ? singleError : allError;
@@ -3760,6 +3919,8 @@ function DishShowcase({
         className: className || "resira-dish-showcase-btn",
         style,
         onClick: handleOpen,
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
         children
       }
     ),
@@ -3777,7 +3938,7 @@ function DishShowcase({
             onClick: (e) => e.stopPropagation(),
             role: "dialog",
             "aria-modal": "true",
-            "aria-label": "Dish showcase",
+            "aria-label": selectedDish ? `${selectedDish.name} dish preview` : "Dish showcase",
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
@@ -3789,11 +3950,11 @@ function DishShowcase({
                   children: /* @__PURE__ */ jsxRuntime.jsx(XIcon, { size: 18 })
                 }
               ),
-              loading && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-dish-loading", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "resira-dish-spinner" }),
+              loading && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-dish-loading", role: "status", "aria-live": "polite", "aria-busy": "true", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "resira-dish-spinner", "aria-hidden": "true" }),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Loading dishes\u2026" })
               ] }),
-              error && !loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "resira-dish-error", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: error }) }),
+              error && !loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "resira-dish-error", role: "alert", "aria-live": "assertive", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: error }) }),
               !loading && !error && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: selectedDish ? /* @__PURE__ */ jsxRuntime.jsx(
                 ModelViewer3D,
                 {