@cimplify/sdk 0.25.0 → 0.26.0

package/dist/react.js

@@ -7876,409 +7876,307 @@ function BookingList({
     booking.order_id
   )) });
 }
-
-// src/react/utils/format-duration.ts
-var UNIT_LABELS3 = {
-  minutes: { singular: "min", plural: "min" },
-  hours: { singular: "hr", plural: "hrs" },
-  days: { singular: "day", plural: "days" },
-  nights: { singular: "night", plural: "nights" },
-  weeks: { singular: "week", plural: "weeks" },
-  months: { singular: "month", plural: "months" },
-  years: { singular: "year", plural: "years" }
-};
-function formatDuration4(value, unit) {
-  const resolved = unit ?? "minutes";
-  const labels = UNIT_LABELS3[resolved];
-  const label = value === 1 ? labels.singular : labels.plural;
-  return `${value} ${label}`;
-}
-var ASPECT_STYLES3 = {
-  square: { aspectRatio: "1/1" },
-  "4/3": { aspectRatio: "4/3" },
-  "16/10": { aspectRatio: "16/10" },
-  "3/4": { aspectRatio: "3/4" }
-};
-function ServiceCard({
-  service,
-  onBook,
-  href,
-  actionLabel = "Book",
+function DefaultCatalogueLayout({
+  products,
+  categories,
+  facets,
+  isLoading,
+  selectedCategory,
+  onCategoryChange,
+  searchQuery,
+  onSearchChange,
+  sortBy,
+  sortOrder,
+  onSortChange,
+  inStockOnly,
+  onInStockChange,
+  selectedTags,
+  availableTags,
+  onTagToggle,
+  minPrice,
+  maxPrice,
+  onPriceRangeChange,
+  page,
+  totalPages,
+  onPageChange,
+  renderCard,
   renderImage,
-  children,
-  aspectRatio = "4/3",
-  className,
-  classNames
+  renderLink,
+  onQuickAdd,
+  title = "Products",
+  className
 }) {
-  const imageUrl = service.image_url;
-  const cardBody = children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    imageUrl && /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        "data-cimplify-service-card-image-container": true,
-        className: cn("overflow-hidden rounded-t-xl", classNames?.imageContainer),
-        style: ASPECT_STYLES3[aspectRatio],
-        children: renderImage ? renderImage({
-          src: imageUrl,
-          alt: service.name,
-          className: classNames?.image
-        }) : /* @__PURE__ */ jsxRuntime.jsx(
-          "img",
+  const hasSidebar = facets && facets.length > 0 || availableTags && availableTags.length > 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-catalogue-layout": "default", className: cn("space-y-6", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-bold tracking-tight", children: title }),
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground mt-0.5", children: [
+          products.length,
+          " items"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full sm:max-w-xs", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
           {
-            src: imageUrl,
-            alt: service.name,
-            className: cn("w-full h-full object-cover transition-transform duration-300 group-hover:scale-105", classNames?.image),
-            "data-cimplify-service-card-image": true
+            type: "search",
+            value: searchQuery,
+            onChange: (e) => onSearchChange(e.target.value),
+            placeholder: "Search...",
+            className: "w-full h-10 pl-10 pr-4 text-sm border border-border rounded-lg bg-background outline-none focus:ring-2 focus:ring-primary/10 focus:border-primary/30 transition-all"
           }
         )
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-service-card-body": true, className: cn("p-4 flex flex-col gap-1.5", classNames?.body), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-service-card-name": true, className: cn("font-semibold text-foreground leading-tight", classNames?.name), children: service.name }),
-      service.description && /* @__PURE__ */ jsxRuntime.jsx(
-        "span",
-        {
-          "data-cimplify-service-card-description": true,
-          className: cn("text-sm text-muted-foreground line-clamp-2", classNames?.description),
-          children: service.description
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-service-card-meta": true, className: cn("flex items-center gap-2 mt-1 text-sm", classNames?.meta), children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-service-card-duration": true, className: cn("text-muted-foreground", classNames?.duration), children: formatDuration4(service.duration_minutes, service.duration_unit) }),
-        service.price && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-service-card-price": true, className: cn("font-medium text-foreground", classNames?.price), children: /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: service.price }) })
       ] })
     ] }),
-    !href && onBook && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-service-card-action": true, className: cn("px-4 pb-4 pt-1 text-sm font-medium text-primary", classNames?.action), children: actionLabel })
-  ] });
-  const cardClasses = cn(
-    "group block w-full rounded-xl border border-border bg-background text-left transition-shadow duration-200 hover:shadow-md",
-    !service.is_available && "opacity-60",
-    className,
-    classNames?.root
-  );
-  if (href) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "a",
-      {
-        href,
-        "data-cimplify-service-card": true,
-        "data-available": service.is_available || void 0,
-        className: cn(cardClasses, "no-underline text-[inherit]"),
-        children: cardBody
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "button",
-    {
-      type: "button",
-      onClick: () => onBook?.(service),
-      disabled: !service.is_available,
-      "data-cimplify-service-card": true,
-      "data-available": service.is_available || void 0,
-      className: cn(cardClasses, "cursor-pointer font-[inherit] p-0 border-border"),
-      children: cardBody
-    }
-  );
-}
-function ServiceGrid({
-  services: servicesProp,
-  columns,
-  onServiceSelect,
-  getServiceHref,
-  renderCard,
-  renderImage,
-  availableOnly = true,
-  actionLabel,
-  emptyMessage = "No services available",
-  className,
-  classNames
-}) {
-  const rawId = React3__default.default.useId();
-  const gridId = `cimplify-service-grid-${rawId.replace(/:/g, "")}`;
-  const { services: fetched, isLoading } = useServices({
-    enabled: servicesProp === void 0
-  });
-  const allServices = servicesProp ?? fetched;
-  const services = availableOnly ? allServices.filter((s) => s.is_available) : allServices;
-  const sm = columns?.sm ?? 1;
-  const md = columns?.md ?? 2;
-  const lg = columns?.lg ?? 3;
-  const xl = columns?.xl ?? 4;
-  if (isLoading && services.length === 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        "data-cimplify-service-grid": true,
-        "aria-busy": "true",
-        className: cn(className, classNames?.root, classNames?.loading)
-      }
-    );
-  }
-  if (services.length === 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        "data-cimplify-service-grid": true,
-        "data-empty": true,
-        className: cn(className, classNames?.root, classNames?.empty),
-        children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: emptyMessage })
-      }
-    );
-  }
-  const css = [
-    `#${gridId}{display:grid;grid-template-columns:repeat(${sm},1fr);gap:1rem}`,
-    `@media(min-width:768px){#${gridId}{grid-template-columns:repeat(${md},1fr)}}`,
-    `@media(min-width:1024px){#${gridId}{grid-template-columns:repeat(${lg},1fr)}}`,
-    `@media(min-width:1280px){#${gridId}{grid-template-columns:repeat(${xl},1fr)}}`
-  ].join("");
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: css } }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        id: gridId,
-        "data-cimplify-service-grid": true,
-        className: cn(className, classNames?.root),
-        children: services.map((service) => /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1.5 overflow-x-auto pb-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
           {
-            "data-cimplify-service-grid-item": true,
-            className: classNames?.item,
-            children: renderCard ? renderCard(service) : /* @__PURE__ */ jsxRuntime.jsx(
-              ServiceCard,
-              {
-                service,
-                onBook: onServiceSelect,
-                href: getServiceHref?.(service),
-                actionLabel,
-                renderImage
-              }
-            )
+            onClick: () => onCategoryChange(null),
+            className: cn(
+              "text-xs font-medium px-3 py-1.5 rounded-full shrink-0 transition-colors",
+              !selectedCategory ? "bg-foreground text-background" : "bg-muted text-muted-foreground hover:bg-muted/80"
+            ),
+            children: "All"
+          }
+        ),
+        categories.map((cat) => /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => onCategoryChange(selectedCategory === cat.id ? null : cat.id),
+            className: cn(
+              "text-xs font-medium px-3 py-1.5 rounded-full shrink-0 transition-colors",
+              selectedCategory === cat.id ? "bg-foreground text-background" : "bg-muted text-muted-foreground hover:bg-muted/80"
+            ),
+            children: cat.name
           },
-          service.id
+          cat.id
         ))
-      }
-    )
-  ] });
-}
-function CataloguePage({
-  title = "Products",
-  products: productsProp,
-  categories: categoriesProp,
-  showFilter = true,
-  showSearch = true,
-  showSort = false,
-  showInStockFilter = false,
-  showPriceRange = false,
-  showTagsFilter = false,
-  availableTags,
-  defaultSort,
-  pageSize,
-  onProductClick,
-  onCategoryClick,
-  renderCard,
-  renderImage,
-  columns,
-  className,
-  classNames
-}) {
-  const [selectedCategoryId, setSelectedCategoryId] = React3.useState(null);
-  const [searchQuery, setSearchQuery] = React3.useState("");
-  const [sortBy, setSortBy] = React3.useState(defaultSort?.by ?? "name");
-  const [sortOrder, setSortOrder] = React3.useState(defaultSort?.order ?? "asc");
-  const [inStockOnly, setInStockOnly] = React3.useState(false);
-  const [selectedTags, setSelectedTags] = React3.useState([]);
-  const [minPrice, setMinPrice] = React3.useState("");
-  const [maxPrice, setMaxPrice] = React3.useState("");
-  const [page, setPage] = React3.useState(1);
-  const debouncedSearch = useDebounce(searchQuery, 300);
-  const { products: fetchedProducts, isLoading: productsLoading, pagination } = useProducts({
-    enabled: productsProp === void 0,
-    category: selectedCategoryId ?? void 0,
-    search: debouncedSearch.length >= 2 ? debouncedSearch : void 0,
-    sort_by: sortBy,
-    sort_order: sortOrder,
-    in_stock: inStockOnly || void 0,
-    tags: selectedTags.length > 0 ? selectedTags : void 0,
-    min_price: minPrice ? parseFloat(minPrice) : void 0,
-    max_price: maxPrice ? parseFloat(maxPrice) : void 0,
-    page,
-    limit: pageSize
-  });
-  const { categories: fetchedCategories } = useCategories({
-    enabled: showFilter && categoriesProp === void 0
-  });
-  const allProducts = productsProp ?? fetchedProducts;
-  const categories = categoriesProp ?? fetchedCategories;
-  const handleCategorySelect = React3.useCallback(
-    (id) => {
-      setSelectedCategoryId(id);
-      setPage(1);
-      if (id) {
-        const cat = categories.find((c) => c.id === id);
-        if (cat) onCategoryClick?.(cat);
-      }
-    },
-    [categories, onCategoryClick]
-  );
-  const handleTagToggle = React3.useCallback((tag) => {
-    setSelectedTags(
-      (prev) => prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag]
-    );
-    setPage(1);
-  }, []);
-  const totalPages = pagination?.total_pages ?? 1;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-catalogue-page": true, className: cn(className, classNames?.root), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-catalogue-header": true, className: classNames?.header, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h1", { "data-cimplify-catalogue-title": true, className: classNames?.title, children: title }),
-      showSearch && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-catalogue-search": true, className: classNames?.searchContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-        SearchInput,
-        {
-          onResultClick: onProductClick,
-          searchOptions: { category: selectedCategoryId ?? void 0 }
-        }
-      ) })
-    ] }),
-    showFilter && categories.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-catalogue-filter": true, className: classNames?.filterContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-      CategoryFilter,
-      {
-        selectedId: selectedCategoryId,
-        onSelect: handleCategorySelect
-      }
-    ) }),
-    (showSort || showInStockFilter || showPriceRange || showTagsFilter) && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-catalogue-toolbar": true, className: cn("flex flex-wrap items-center gap-3", classNames?.toolbar), children: [
-      showSort && /* @__PURE__ */ jsxRuntime.jsxs(
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
         "select",
         {
-          "data-cimplify-sort": true,
           value: `${sortBy}:${sortOrder}`,
           onChange: (e) => {
             const [by, order] = e.target.value.split(":");
-            setSortBy(by);
-            setSortOrder(order);
-            setPage(1);
+            onSortChange(by, order);
           },
-          className: "rounded-md border border-input bg-background px-3 py-1.5 text-sm",
+          className: "text-xs border border-border rounded-lg px-2 py-1.5 bg-background outline-none shrink-0",
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "name:asc", children: "Name A\u2013Z" }),
-            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "name:desc", children: "Name Z\u2013A" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "created_at:desc", children: "Newest" }),
             /* @__PURE__ */ jsxRuntime.jsx("option", { value: "price:asc", children: "Price: Low to High" }),
             /* @__PURE__ */ jsxRuntime.jsx("option", { value: "price:desc", children: "Price: High to Low" }),
-            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "created_at:desc", children: "Newest" }),
-            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "created_at:asc", children: "Oldest" }),
-            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "updated_at:desc", children: "Recently Updated" })
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "name:asc", children: "Name: A-Z" })
           ]
         }
-      ),
-      showInStockFilter && /* @__PURE__ */ jsxRuntime.jsxs("label", { "data-cimplify-stock-filter": true, className: "flex items-center gap-1.5 text-sm cursor-pointer", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            type: "checkbox",
-            checked: inStockOnly,
-            onChange: (e) => {
-              setInStockOnly(e.target.checked);
-              setPage(1);
-            },
-            className: "accent-primary"
-          }
-        ),
-        "In stock only"
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: hasSidebar ? "flex gap-6" : "", children: [
+      hasSidebar && /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: "hidden lg:block w-60 shrink-0 space-y-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "In stock only" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: () => onInStockChange(!inStockOnly),
+              className: cn("w-10 h-6 rounded-full transition-colors relative", inStockOnly ? "bg-foreground" : "bg-border"),
+              children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("absolute top-1 w-4 h-4 rounded-full bg-background transition-transform shadow-sm", inStockOnly ? "left-5" : "left-1") })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold mb-2", children: "Price Range" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "number",
+                placeholder: "Min",
+                value: minPrice,
+                onChange: (e) => onPriceRangeChange(e.target.value, maxPrice),
+                className: "w-full rounded-lg border border-border px-2 py-1.5 text-xs bg-background outline-none focus:ring-1 focus:ring-primary/20"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground text-xs", children: "\u2013" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "number",
+                placeholder: "Max",
+                value: maxPrice,
+                onChange: (e) => onPriceRangeChange(minPrice, e.target.value),
+                className: "w-full rounded-lg border border-border px-2 py-1.5 text-xs bg-background outline-none focus:ring-1 focus:ring-primary/20"
+              }
+            )
+          ] })
+        ] }),
+        facets?.map((facet) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold mb-2", children: facet.name }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1.5", children: facet.values.slice(0, 8).map((fv) => /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2 text-sm cursor-pointer group", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", className: "w-3.5 h-3.5 accent-foreground rounded" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground group-hover:text-foreground transition-colors flex-1", children: fv.value }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground/60", children: fv.count })
+          ] }, fv.value)) })
+        ] }, facet.slug)),
+        availableTags && availableTags.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold mb-2", children: "Tags" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1.5", children: availableTags.map((tag) => /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2 text-sm cursor-pointer group", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "checkbox",
+                checked: selectedTags.includes(tag),
+                onChange: () => onTagToggle(tag),
+                className: "w-3.5 h-3.5 accent-foreground rounded"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground group-hover:text-foreground transition-colors", children: tag })
+          ] }, tag)) })
+        ] })
       ] }),
-      showPriceRange && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-price-range": true, className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+        isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 md:grid-cols-3 gap-4 animate-pulse", children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-square bg-muted rounded-[14px]" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-3/4 bg-muted rounded" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 w-1/2 bg-muted rounded" })
+          ] })
+        ] }, i)) }) : products.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center py-16", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg font-medium", children: "No products found" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground mt-1", children: "Try adjusting your filters" })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 md:grid-cols-3 gap-4", children: products.map(
+          (product) => renderCard ? /* @__PURE__ */ jsxRuntime.jsx(React3__default.default.Fragment, { children: renderCard(product) }, product.id) : /* @__PURE__ */ jsxRuntime.jsx(
+            ProductCard,
+            {
+              product,
+              renderImage,
+              renderLink,
+              onQuickAdd
+            },
+            product.id
+          )
+        ) }),
+        totalPages > 1 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2 pt-8", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              disabled: page <= 1,
+              onClick: () => onPageChange(page - 1),
+              className: "text-sm px-3 py-1.5 border border-border rounded-lg disabled:opacity-40 hover:bg-muted transition-colors",
+              children: "Previous"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-muted-foreground tabular-nums px-2", children: [
+            page,
+            " / ",
+            totalPages
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              disabled: page >= totalPages,
+              onClick: () => onPageChange(page + 1),
+              className: "text-sm px-3 py-1.5 border border-border rounded-lg disabled:opacity-40 hover:bg-muted transition-colors",
+              children: "Next"
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function CompactCatalogueLayout({
+  products,
+  categories,
+  isLoading,
+  selectedCategory,
+  onCategoryChange,
+  searchQuery,
+  onSearchChange,
+  renderCard,
+  renderImage,
+  renderLink,
+  onQuickAdd,
+  title = "Menu",
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-catalogue-layout": "compact", className: cn("space-y-6", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-bold tracking-tight", children: title }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row items-start sm:items-center gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1.5 overflow-x-auto pb-1 flex-1", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
+          "button",
           {
-            type: "number",
-            placeholder: "Min",
-            value: minPrice,
-            onChange: (e) => {
-              setMinPrice(e.target.value);
-              setPage(1);
-            },
-            className: "w-20 rounded-md border border-input bg-background px-2 py-1.5 text-sm",
-            min: 0,
-            step: "0.01"
+            onClick: () => onCategoryChange(null),
+            className: cn(
+              "text-xs font-medium px-3 py-1.5 rounded-full shrink-0 transition-colors",
+              !selectedCategory ? "bg-foreground text-background" : "bg-muted text-muted-foreground hover:bg-muted/80"
+            ),
+            children: "All"
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground text-sm", children: "\u2013" }),
+        categories.map((cat) => /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => onCategoryChange(selectedCategory === cat.id ? null : cat.id),
+            className: cn(
+              "text-xs font-medium px-3 py-1.5 rounded-full shrink-0 transition-colors",
+              selectedCategory === cat.id ? "bg-foreground text-background" : "bg-muted text-muted-foreground hover:bg-muted/80"
+            ),
+            children: cat.name
+          },
+          cat.id
+        ))
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full sm:max-w-[200px]", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
-            type: "number",
-            placeholder: "Max",
-            value: maxPrice,
-            onChange: (e) => {
-              setMaxPrice(e.target.value);
-              setPage(1);
-            },
-            className: "w-20 rounded-md border border-input bg-background px-2 py-1.5 text-sm",
-            min: 0,
-            step: "0.01"
+            type: "search",
+            value: searchQuery,
+            onChange: (e) => onSearchChange(e.target.value),
+            placeholder: "Search...",
+            className: "w-full h-9 pl-10 pr-3 text-sm border border-border rounded-lg bg-background outline-none focus:ring-2 focus:ring-primary/10 transition-all"
           }
         )
-      ] }),
-      showTagsFilter && availableTags && availableTags.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-tags-filter": true, className: "flex flex-wrap gap-1.5", children: availableTags.map((tag) => /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: () => handleTagToggle(tag),
-          className: cn(
-            "rounded-full px-3 py-1 text-xs font-medium border transition-colors",
-            selectedTags.includes(tag) ? "bg-primary text-primary-foreground border-primary" : "bg-background text-foreground border-input hover:bg-muted"
-          ),
-          children: tag
-        },
-        tag
-      )) })
+      ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-catalogue-grid": true, className: classNames?.gridContainer, children: productsLoading && !productsProp ? /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        "data-cimplify-catalogue-loading": true,
-        "aria-busy": "true",
-        className: classNames?.loading
-      }
-    ) : /* @__PURE__ */ jsxRuntime.jsx(
-      ProductGrid,
-      {
-        products: allProducts,
-        renderCard,
-        renderImage,
-        columns,
-        emptyMessage: "No products found"
-      }
-    ) }),
-    totalPages > 1 && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-catalogue-pagination": true, className: cn("flex items-center justify-center gap-2 pt-6", classNames?.pagination), children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          disabled: page <= 1,
-          onClick: () => setPage((p) => Math.max(1, p - 1)),
-          className: "rounded-md border border-input bg-background px-3 py-1.5 text-sm disabled:opacity-40",
-          children: "Previous"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-muted-foreground tabular-nums", children: [
-        page,
-        " / ",
-        totalPages
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
+    isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 lg:grid-cols-3 gap-5 animate-pulse", children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-square bg-muted rounded-[14px]" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-3/4 bg-muted rounded" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 w-1/2 bg-muted rounded" })
+      ] })
+    ] }, i)) }) : products.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center py-16", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg font-medium", children: "No items found" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground mt-1", children: "Try a different category or search" })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 lg:grid-cols-3 gap-5", children: products.map(
+      (product) => renderCard ? /* @__PURE__ */ jsxRuntime.jsx(React3__default.default.Fragment, { children: renderCard(product) }, product.id) : /* @__PURE__ */ jsxRuntime.jsx(
+        ProductCard,
         {
-          type: "button",
-          disabled: page >= totalPages,
-          onClick: () => setPage((p) => p + 1),
-          className: "rounded-md border border-input bg-background px-3 py-1.5 text-sm disabled:opacity-40",
-          children: "Next"
-        }
+          product,
+          renderImage,
+          renderLink,
+          onQuickAdd
+        },
+        product.id
       )
-    ] })
+    ) })
   ] });
 }
+var CatalogueTemplate = /* @__PURE__ */ ((CatalogueTemplate2) => {
+  CatalogueTemplate2["Default"] = "default";
+  CatalogueTemplate2["Compact"] = "compact";
+  return CatalogueTemplate2;
+})(CatalogueTemplate || {});
+var BUILT_IN_LAYOUTS = {
+  ["default" /* Default */]: DefaultCatalogueLayout,
+  ["compact" /* Compact */]: CompactCatalogueLayout
+};
 function useDebounce(value, delay) {
   const [debounced, setDebounced] = React3__default.default.useState(value);
   React3__default.default.useEffect(() => {
@@ -8287,6 +8185,109 @@ function useDebounce(value, delay) {
   }, [value, delay]);
   return debounced;
 }
+function CataloguePage({
+  template,
+  layouts,
+  title,
+  products: productsProp,
+  categories: categoriesProp,
+  facets,
+  availableTags,
+  pageSize,
+  defaultSort,
+  renderCard,
+  renderImage,
+  renderLink,
+  onQuickAdd,
+  onProductClick,
+  className,
+  classNames
+}) {
+  const [selectedCategory, setSelectedCategory] = React3.useState(null);
+  const [searchQuery, setSearchQuery] = React3.useState("");
+  const [sortBy, setSortBy] = React3.useState(defaultSort?.by ?? "created_at");
+  const [sortOrder, setSortOrder] = React3.useState(defaultSort?.order ?? "desc");
+  const [inStockOnly, setInStockOnly] = React3.useState(false);
+  const [selectedTags, setSelectedTags] = React3.useState([]);
+  const [minPrice, setMinPrice] = React3.useState("");
+  const [maxPrice, setMaxPrice] = React3.useState("");
+  const [page, setPage] = React3.useState(1);
+  const debouncedSearch = useDebounce(searchQuery, 300);
+  const { products: fetchedProducts, isLoading, pagination } = useProducts({
+    enabled: productsProp === void 0,
+    category: selectedCategory ?? void 0,
+    search: debouncedSearch.length >= 2 ? debouncedSearch : void 0,
+    sort_by: sortBy,
+    sort_order: sortOrder,
+    in_stock: inStockOnly || void 0,
+    tags: selectedTags.length > 0 ? selectedTags : void 0,
+    min_price: minPrice ? parseFloat(minPrice) : void 0,
+    max_price: maxPrice ? parseFloat(maxPrice) : void 0,
+    page,
+    limit: pageSize
+  });
+  const { categories: fetchedCategories } = useCategories({
+    enabled: categoriesProp === void 0
+  });
+  const products = productsProp ?? fetchedProducts;
+  const categories = categoriesProp ?? fetchedCategories;
+  const totalPages = pagination?.total_pages ?? 1;
+  const handleCategoryChange = React3.useCallback((id) => {
+    setSelectedCategory(id);
+    setPage(1);
+  }, []);
+  const handleSortChange = React3.useCallback((by, order) => {
+    setSortBy(by);
+    setSortOrder(order);
+    setPage(1);
+  }, []);
+  const handleTagToggle = React3.useCallback((tag) => {
+    setSelectedTags(
+      (prev) => prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag]
+    );
+    setPage(1);
+  }, []);
+  const handlePriceRangeChange = React3.useCallback((min, max) => {
+    setMinPrice(min);
+    setMaxPrice(max);
+    setPage(1);
+  }, []);
+  const key = template ?? "default" /* Default */;
+  const Layout = layouts?.[key] ?? BUILT_IN_LAYOUTS[key] ?? DefaultCatalogueLayout;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-catalogue-page": true, className: cn(className, classNames?.root), children: /* @__PURE__ */ jsxRuntime.jsx(
+    Layout,
+    {
+      products,
+      categories,
+      facets,
+      isLoading,
+      selectedCategory,
+      onCategoryChange: handleCategoryChange,
+      searchQuery,
+      onSearchChange: setSearchQuery,
+      sortBy,
+      sortOrder,
+      onSortChange: handleSortChange,
+      inStockOnly,
+      onInStockChange: setInStockOnly,
+      selectedTags,
+      availableTags,
+      onTagToggle: handleTagToggle,
+      minPrice,
+      maxPrice,
+      onPriceRangeChange: handlePriceRangeChange,
+      page,
+      totalPages,
+      onPageChange: setPage,
+      renderCard,
+      renderImage,
+      renderLink,
+      onQuickAdd,
+      onProductClick,
+      title
+    }
+  ) });
+}
 function TwoColumnGrid({
   left,
   right,
@@ -8915,7 +8916,7 @@ var ProductTemplate = /* @__PURE__ */ ((ProductTemplate2) => {
   ProductTemplate2["Physical"] = "physical";
   return ProductTemplate2;
 })(ProductTemplate || {});
-var BUILT_IN_LAYOUTS = {
+var BUILT_IN_LAYOUTS2 = {
   ["food" /* Food */]: FoodProductLayout,
   ["wholesale" /* Wholesale */]: WholesaleProductLayout,
   ["service" /* Service */]: ServiceProductLayout,
@@ -8952,8 +8953,8 @@ function resolveLayout(product, pages, templates) {
   if (templates?.[key]) {
     return templates[key];
   }
-  if (BUILT_IN_LAYOUTS[key]) {
-    return BUILT_IN_LAYOUTS[key];
+  if (BUILT_IN_LAYOUTS2[key]) {
+    return BUILT_IN_LAYOUTS2[key];
   }
   return DefaultProductLayout;
 }
@@ -9011,56 +9012,168 @@ function ProductPage({
     }
   ) });
 }
-function CartPage({
-  title = "Your Cart",
+function DefaultCartLayout({
+  cart,
   onCheckout,
   onContinueShopping,
   onDiscountApply,
   onDiscountClear,
   showDiscount = true,
-  showContinueShopping = true,
   checkoutLabel = "Proceed to Checkout",
-  className,
-  classNames
+  className
 }) {
-  const { isEmpty, subtotal } = useCart();
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-cart-page": true, className: cn(className, classNames?.root), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-cart-page-header": true, className: classNames?.header, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h1", { "data-cimplify-cart-page-title": true, className: classNames?.title, children: title }),
-      showContinueShopping && /* @__PURE__ */ jsxRuntime.jsx(
+  if (cart.isEmpty) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-cart-layout": "default", className: cn("text-center py-20", className), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-16 h-16 mx-auto text-muted-foreground/30", fill: "none", stroke: "currentColor", strokeWidth: "1", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg font-medium mt-4", children: "Your cart is empty" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground mt-1", children: "Add some items to get started" }),
+      onContinueShopping && /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
-          type: "button",
           onClick: onContinueShopping,
-          "data-cimplify-cart-continue": true,
-          className: classNames?.continueButton,
-          children: "Continue Shopping"
+          className: "text-sm font-medium text-primary mt-4 hover:underline",
+          children: "Continue shopping"
         }
       )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-cart-page-content": true, className: classNames?.content, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(CartSummary, {}),
-      showDiscount && !isEmpty && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-cart-page-discount": true, className: classNames?.discount, children: /* @__PURE__ */ jsxRuntime.jsx(
-        DiscountInput,
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-cart-layout": "default", className: cn("space-y-6", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("h1", { className: "text-2xl font-bold tracking-tight", children: [
+        "Your Cart (",
+        cart.itemCount,
+        " ",
+        cart.itemCount === 1 ? "item" : "items",
+        ")"
+      ] }),
+      onContinueShopping && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
         {
-          orderSubtotal: subtotal.toString(),
-          onApply: onDiscountApply,
-          onClear: onDiscountClear
+          onClick: onContinueShopping,
+          className: "text-sm text-muted-foreground hover:text-foreground transition-colors",
+          children: "Continue shopping"
         }
-      ) })
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid lg:grid-cols-[1fr_380px] gap-8", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(CartSummary, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:sticky lg:top-6 h-fit space-y-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border border-border rounded-[14px] p-6 space-y-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "font-semibold", children: "Order Summary" }),
+        showDiscount && /* @__PURE__ */ jsxRuntime.jsx(
+          DiscountInput,
+          {
+            orderSubtotal: cart.subtotal.toString(),
+            onApply: onDiscountApply,
+            onClear: onDiscountClear
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2 text-sm", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Subtotal" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: cart.subtotal })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Tax" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: cart.tax })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between font-semibold text-base pt-2 border-t border-border", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Total" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: cart.total })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: onCheckout,
+            className: "w-full h-12 bg-foreground text-background font-medium text-sm rounded-lg hover:bg-foreground/90 transition-colors",
+            children: checkoutLabel
+          }
+        )
+      ] }) })
+    ] })
+  ] });
+}
+function CompactCartLayout({
+  cart,
+  onCheckout,
+  onContinueShopping,
+  checkoutLabel = "Place Order",
+  className
+}) {
+  if (cart.isEmpty) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-cart-layout": "compact", className: cn("text-center py-16", className), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg font-medium", children: "Your order is empty" }),
+      onContinueShopping && /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: onContinueShopping, className: "text-sm font-medium text-primary mt-3 hover:underline", children: "Browse menu" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-cart-layout": "compact", className: cn("max-w-lg mx-auto space-y-4", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("h1", { className: "text-xl font-bold tracking-tight", children: [
+      "Your Order (",
+      cart.itemCount,
+      ")"
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(CartSummary, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2 text-sm pt-4 border-t border-border", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Subtotal" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: cart.subtotal })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Tax" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: cart.tax })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between font-semibold text-base pt-2 border-t border-border", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Total" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: cart.total })
+      ] })
     ] }),
-    !isEmpty && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-cart-page-footer": true, className: classNames?.footer, children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
-        type: "button",
         onClick: onCheckout,
-        "data-cimplify-cart-checkout-button": true,
-        className: classNames?.checkoutButton,
+        className: "w-full h-12 bg-foreground text-background font-medium text-sm rounded-lg hover:bg-foreground/90 transition-colors",
         children: checkoutLabel
       }
-    ) })
+    )
   ] });
 }
+var CartTemplate = /* @__PURE__ */ ((CartTemplate2) => {
+  CartTemplate2["Default"] = "default";
+  CartTemplate2["Compact"] = "compact";
+  return CartTemplate2;
+})(CartTemplate || {});
+var BUILT_IN_LAYOUTS3 = {
+  ["default" /* Default */]: DefaultCartLayout,
+  ["compact" /* Compact */]: CompactCartLayout
+};
+function CartPage({
+  template,
+  layouts,
+  onCheckout,
+  onContinueShopping,
+  onDiscountApply,
+  onDiscountClear,
+  showDiscount = true,
+  checkoutLabel,
+  className,
+  classNames
+}) {
+  const cart = useCart();
+  const key = template ?? "default" /* Default */;
+  const Layout = layouts?.[key] ?? BUILT_IN_LAYOUTS3[key] ?? DefaultCartLayout;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-cart-page": true, className: cn(className, classNames?.root), children: /* @__PURE__ */ jsxRuntime.jsx(
+    Layout,
+    {
+      cart,
+      onCheckout,
+      onContinueShopping,
+      onDiscountApply,
+      onDiscountClear,
+      showDiscount,
+      checkoutLabel
+    }
+  ) });
+}
 function CheckoutPage({
   title = "Checkout",
   onComplete,
@@ -9084,22 +9197,362 @@ function CheckoutPage({
     )
   ] });
 }
+function DefaultCollectionLayout({
+  collection,
+  products,
+  renderCard,
+  renderImage,
+  renderLink,
+  onQuickAdd,
+  className
+}) {
+  const [searchQuery, setSearchQuery] = React3.useState("");
+  const [activeTag, setActiveTag] = React3.useState(null);
+  const collectionTags = React3.useMemo(() => {
+    const tagSet = /* @__PURE__ */ new Set();
+    for (const p of products) {
+      if (p.tags) {
+        for (const t of p.tags) tagSet.add(t);
+      }
+    }
+    return Array.from(tagSet).slice(0, 6);
+  }, [products]);
+  const filtered = React3.useMemo(() => {
+    let result = products;
+    if (searchQuery.trim().length >= 2) {
+      const q = searchQuery.toLowerCase();
+      result = result.filter(
+        (p) => p.name.toLowerCase().includes(q) || p.description?.toLowerCase().includes(q)
+      );
+    }
+    if (activeTag) {
+      result = result.filter((p) => p.tags?.includes(activeTag));
+    }
+    return result;
+  }, [products, searchQuery, activeTag]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-collection-layout": "default", className: cn("space-y-8", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-collection-hero": true, className: "relative overflow-hidden rounded-2xl bg-muted", children: [
+      collection.image_url && /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          src: collection.image_url,
+          alt: collection.name,
+          className: "w-full h-64 lg:h-80 object-cover"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute bottom-0 left-0 right-0 p-6 lg:p-8", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl lg:text-4xl font-bold text-white tracking-tight", children: collection.name }),
+        collection.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-white/80 mt-2 max-w-lg text-sm lg:text-base", children: collection.description }),
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-white/60 text-sm mt-2", children: [
+          products.length,
+          " ",
+          products.length === 1 ? "item" : "items"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row items-start sm:items-center gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-1 min-w-0 w-full sm:max-w-xs", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "search",
+            value: searchQuery,
+            onChange: (e) => setSearchQuery(e.target.value),
+            placeholder: `Search ${collection.name}...`,
+            className: "w-full h-10 pl-10 pr-4 text-sm border border-border rounded-lg bg-background outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors"
+          }
+        )
+      ] }),
+      collectionTags.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => setActiveTag(null),
+            className: cn(
+              "text-xs font-medium px-3 py-1.5 rounded-full transition-colors",
+              !activeTag ? "bg-foreground text-background" : "bg-muted text-muted-foreground hover:bg-muted/80"
+            ),
+            children: "All"
+          }
+        ),
+        collectionTags.map((tag) => /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => setActiveTag(activeTag === tag ? null : tag),
+            className: cn(
+              "text-xs font-medium px-3 py-1.5 rounded-full transition-colors",
+              activeTag === tag ? "bg-foreground text-background" : "bg-muted text-muted-foreground hover:bg-muted/80"
+            ),
+            children: tag
+          },
+          tag
+        ))
+      ] })
+    ] }),
+    filtered.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4", children: filtered.map(
+      (product) => renderCard ? /* @__PURE__ */ jsxRuntime.jsx(React3__default.default.Fragment, { children: renderCard(product) }, product.id) : /* @__PURE__ */ jsxRuntime.jsx(
+        ProductCard,
+        {
+          product,
+          renderImage,
+          renderLink,
+          onQuickAdd
+        },
+        product.id
+      )
+    ) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center py-16", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "No items match your search." }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: () => {
+            setSearchQuery("");
+            setActiveTag(null);
+          },
+          className: "text-sm font-medium text-primary mt-2 hover:underline",
+          children: "Clear filters"
+        }
+      )
+    ] })
+  ] });
+}
+function FeaturedCollectionLayout({
+  collection,
+  products,
+  renderCard,
+  renderImage,
+  renderLink,
+  onQuickAdd,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-collection-layout": "featured", className: cn("space-y-10", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-collection-hero": true, className: "relative overflow-hidden rounded-2xl bg-muted", children: [
+      collection.image_url && /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          src: collection.image_url,
+          alt: collection.name,
+          className: "w-full h-72 lg:h-96 object-cover"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute bottom-0 left-0 right-0 p-8 lg:p-12", children: [
+        collection.tags && collection.tags.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold text-white/70 uppercase tracking-widest", children: collection.tags[0] }),
+        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl lg:text-5xl font-bold text-white tracking-tight mt-2", children: collection.name }),
+        collection.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-white/80 mt-3 max-w-2xl text-base lg:text-lg leading-relaxed", children: collection.description })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6", children: products.map(
+      (product) => renderCard ? /* @__PURE__ */ jsxRuntime.jsx(React3__default.default.Fragment, { children: renderCard(product) }, product.id) : /* @__PURE__ */ jsxRuntime.jsx(
+        ProductCard,
+        {
+          product,
+          renderImage,
+          renderLink,
+          onQuickAdd
+        },
+        product.id
+      )
+    ) })
+  ] });
+}
+function CatalogueCollectionLayout({
+  collection,
+  products,
+  renderCard,
+  renderImage,
+  renderLink,
+  onQuickAdd,
+  className
+}) {
+  const [searchQuery, setSearchQuery] = React3.useState("");
+  const [activeCategory, setActiveCategory] = React3.useState(null);
+  const [sortBy, setSortBy] = React3.useState("default");
+  const categories = React3.useMemo(() => {
+    const cats = /* @__PURE__ */ new Map();
+    for (const p of products) {
+      if (p.category_id && p.tags) {
+        for (const t of p.tags) {
+          if (!cats.has(t)) cats.set(t, t);
+        }
+      }
+    }
+    return Array.from(cats.values()).slice(0, 8);
+  }, [products]);
+  const filtered = React3.useMemo(() => {
+    let result = products;
+    if (searchQuery.trim().length >= 2) {
+      const q = searchQuery.toLowerCase();
+      result = result.filter(
+        (p) => p.name.toLowerCase().includes(q) || p.description?.toLowerCase().includes(q)
+      );
+    }
+    if (activeCategory) {
+      result = result.filter((p) => p.tags?.includes(activeCategory));
+    }
+    if (sortBy === "price-asc") {
+      result = [...result].sort((a, b) => chunkPEDLCL72_js.parsePrice(a.default_price) - chunkPEDLCL72_js.parsePrice(b.default_price));
+    } else if (sortBy === "price-desc") {
+      result = [...result].sort((a, b) => chunkPEDLCL72_js.parsePrice(b.default_price) - chunkPEDLCL72_js.parsePrice(a.default_price));
+    } else if (sortBy === "name") {
+      result = [...result].sort((a, b) => a.name.localeCompare(b.name));
+    }
+    return result;
+  }, [products, searchQuery, activeCategory, sortBy]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-collection-layout": "catalogue", className: cn("space-y-6", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl lg:text-3xl font-bold tracking-tight", children: collection.name }),
+      collection.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground mt-1 max-w-2xl", children: collection.description })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 pb-4 border-b border-border", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 flex-1 min-w-0 w-full", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-1 max-w-sm", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "search",
+              value: searchQuery,
+              onChange: (e) => setSearchQuery(e.target.value),
+              placeholder: "Search...",
+              className: "w-full h-9 pl-10 pr-4 text-sm border border-border rounded-lg bg-background outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1.5 overflow-x-auto scrollbar-hide", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: () => setActiveCategory(null),
+              className: cn(
+                "text-xs font-medium px-3 py-1.5 rounded-full shrink-0 transition-colors",
+                !activeCategory ? "bg-foreground text-background" : "bg-muted text-muted-foreground hover:bg-muted/80"
+              ),
+              children: "All"
+            }
+          ),
+          categories.map((cat) => /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: () => setActiveCategory(activeCategory === cat ? null : cat),
+              className: cn(
+                "text-xs font-medium px-3 py-1.5 rounded-full shrink-0 transition-colors",
+                activeCategory === cat ? "bg-foreground text-background" : "bg-muted text-muted-foreground hover:bg-muted/80"
+              ),
+              children: cat
+            },
+            cat
+          ))
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 shrink-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground", children: [
+          filtered.length,
+          " items"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "select",
+          {
+            value: sortBy,
+            onChange: (e) => setSortBy(e.target.value),
+            className: "text-xs border border-border rounded-lg px-2 py-1.5 bg-background outline-none focus:ring-2 focus:ring-primary/20",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "default", children: "Sort: Default" }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "price-asc", children: "Price: Low to High" }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "price-desc", children: "Price: High to Low" }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "name", children: "Name: A-Z" })
+            ]
+          }
+        )
+      ] })
+    ] }),
+    filtered.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4", children: filtered.map(
+      (product) => renderCard ? /* @__PURE__ */ jsxRuntime.jsx(React3__default.default.Fragment, { children: renderCard(product) }, product.id) : /* @__PURE__ */ jsxRuntime.jsx(
+        ProductCard,
+        {
+          product,
+          renderImage,
+          renderLink,
+          onQuickAdd
+        },
+        product.id
+      )
+    ) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center py-16", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "No products found." }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: () => {
+            setSearchQuery("");
+            setActiveCategory(null);
+          },
+          className: "text-sm font-medium text-primary mt-2 hover:underline",
+          children: "Clear filters"
+        }
+      )
+    ] })
+  ] });
+}
+var CollectionTemplate = /* @__PURE__ */ ((CollectionTemplate2) => {
+  CollectionTemplate2["Default"] = "default";
+  CollectionTemplate2["Featured"] = "featured";
+  CollectionTemplate2["Catalogue"] = "catalogue";
+  return CollectionTemplate2;
+})(CollectionTemplate || {});
+var BUILT_IN_LAYOUTS4 = {
+  ["default" /* Default */]: DefaultCollectionLayout,
+  ["featured" /* Featured */]: FeaturedCollectionLayout,
+  ["catalogue" /* Catalogue */]: CatalogueCollectionLayout
+};
+var LARGE_COLLECTION_THRESHOLD = 30;
+function resolveTemplateKey2(collection, productCount) {
+  const metaTemplate = collection.metadata?.page_template;
+  if (typeof metaTemplate === "string" && metaTemplate.trim()) {
+    return metaTemplate.trim();
+  }
+  if (collection.tags?.includes("featured") || collection.metadata?.is_featured === true) {
+    return "featured" /* Featured */;
+  }
+  if (productCount > LARGE_COLLECTION_THRESHOLD) {
+    return "catalogue" /* Catalogue */;
+  }
+  return "default" /* Default */;
+}
+function resolveLayout2(collection, productCount, pages, templates) {
+  if (pages?.[collection.slug]) {
+    return pages[collection.slug];
+  }
+  const key = resolveTemplateKey2(collection, productCount);
+  if (templates?.[key]) {
+    return templates[key];
+  }
+  if (BUILT_IN_LAYOUTS4[key]) {
+    return BUILT_IN_LAYOUTS4[key];
+  }
+  return DefaultCollectionLayout;
+}
 function CollectionPage({
   collectionId,
   collection: collectionProp,
   products: productsProp,
+  pages,
+  templates,
   renderCard,
   renderImage,
-  columns,
+  renderLink,
+  onQuickAdd,
   className,
   classNames
 }) {
+  const resolvedId = collectionId || collectionProp?.slug || collectionProp?.id || "";
   const {
     collection: fetchedCollection,
     products: fetchedProducts,
     isLoading
-  } = useCollection(collectionProp ? null : collectionId, {
-    enabled: !collectionProp
+  } = useCollection(collectionProp ? null : resolvedId, {
+    enabled: !collectionProp && resolvedId.length > 0
   });
   const collection = collectionProp ?? fetchedCollection;
   const products = productsProp ?? fetchedProducts;
@@ -9109,37 +9562,35 @@ function CollectionPage({
       {
         "data-cimplify-collection-page": true,
         "aria-busy": "true",
-        className: cn(className, classNames?.root, classNames?.loading)
+        className: cn(className, classNames?.root, classNames?.loading),
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "animate-pulse space-y-6", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-64 lg:h-80 bg-muted rounded-2xl" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4", children: Array.from({ length: 8 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-square bg-muted rounded-[14px]" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 space-y-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-3/4 bg-muted rounded" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 w-1/2 bg-muted rounded" })
+            ] })
+          ] }, i)) })
+        ] })
       }
     );
   }
   if (!collection) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-collection-page": true, className: cn(className, classNames?.root), children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Collection not found." }) });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-collection-page": true, className: cn(className, classNames?.root), children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "Collection not found." }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-collection-page": true, className: cn(className, classNames?.root), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-collection-header": true, className: classNames?.header, children: [
-      collection.image_url && /* @__PURE__ */ jsxRuntime.jsx(
-        "img",
-        {
-          src: collection.image_url,
-          alt: collection.name,
-          "data-cimplify-collection-image": true,
-          className: classNames?.image
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx("h1", { "data-cimplify-collection-title": true, className: classNames?.title, children: collection.name }),
-      collection.description && /* @__PURE__ */ jsxRuntime.jsx("p", { "data-cimplify-collection-description": true, className: classNames?.description, children: collection.description })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-collection-grid": true, className: classNames?.grid, children: /* @__PURE__ */ jsxRuntime.jsx(
-      ProductGrid,
-      {
-        products,
-        renderCard,
-        renderImage,
-        columns
-      }
-    ) })
-  ] });
+  const Layout = resolveLayout2(collection, products.length, pages, templates);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-collection-page": true, className: cn(className, classNames?.root), children: /* @__PURE__ */ jsxRuntime.jsx(
+    Layout,
+    {
+      collection,
+      products,
+      renderCard,
+      renderImage,
+      renderLink,
+      onQuickAdd
+    }
+  ) });
 }
 function OrderDetailPage({
   orderId,
@@ -9258,573 +9709,355 @@ function OrderHistoryPage({
     ) })
   ] });
 }
-function SearchPage({
-  title = "Search",
-  placeholder = "What are you looking for?",
-  onProductClick,
+function DefaultSearchLayout({
+  search,
+  facets,
+  categories,
+  activeCategory,
+  onCategoryChange,
+  inStockOnly,
+  onInStockChange,
+  sortBy,
+  onSortChange,
   renderCard,
   renderImage,
-  columns,
-  className,
-  classNames
+  renderLink,
+  onQuickAdd,
+  placeholder = "Search products...",
+  className
 }) {
-  const { results, isLoading, query, setQuery, clear } = useSearch();
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-search-page": true, className: cn(className, classNames?.root), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-search-page-header": true, className: classNames?.header, children: /* @__PURE__ */ jsxRuntime.jsx("h1", { "data-cimplify-search-page-title": true, className: classNames?.title, children: title }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-search-page-input": true, className: classNames?.inputContainer, children: [
+  const { query, setQuery, results, isLoading, clear } = search;
+  const hasFacets = facets && facets.length > 0 || categories && categories.length > 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-search-layout": "default", className: cn("space-y-6", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        input.Input,
+        "input",
         {
           type: "search",
           value: query,
           onChange: (e) => setQuery(e.target.value),
           placeholder,
-          "data-cimplify-search-page-field": true,
-          className: classNames?.input,
-          "aria-label": "Search products",
+          className: "w-full h-14 pl-12 pr-12 text-base border border-border rounded-xl bg-background outline-none focus:ring-2 focus:ring-primary/10 focus:border-primary/30 transition-all",
           autoFocus: true
         }
       ),
       query.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
-          type: "button",
           onClick: clear,
-          "data-cimplify-search-page-clear": true,
-          className: classNames?.clearButton,
+          className: "absolute right-4 top-1/2 -translate-y-1/2 w-6 h-6 flex items-center justify-center text-muted-foreground hover:text-foreground rounded-full hover:bg-muted transition-colors",
           "aria-label": "Clear search",
-          children: "\xD7"
+          children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", d: "M6 18L18 6M6 6l12 12" }) })
         }
       )
     ] }),
-    query.length >= 2 && !isLoading && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-search-page-count": true, className: classNames?.resultCount, children: [
-      results.length,
-      " ",
-      results.length === 1 ? "result" : "results",
-      " for \u201C",
-      query,
-      "\u201D"
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-search-page-grid": true, className: classNames?.grid, children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-search-page-loading": true, "aria-busy": "true", className: classNames?.loading, children: "Searching..." }) : query.length >= 2 && results.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-search-page-empty": true, className: classNames?.empty, children: /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
-      "No products found for \u201C",
-      query,
-      "\u201D"
-    ] }) }) : results.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-      ProductGrid,
-      {
-        products: results,
-        renderCard,
-        renderImage,
-        columns
-      }
-    ) })
-  ] });
-}
-function DealsPage({
-  title = "Deals & Offers",
-  deals: dealsProp,
-  productsOnSale: productsOnSaleProp,
-  products: productsProp,
-  locationId,
-  renderImage,
-  columns,
-  className,
-  classNames
-}) {
-  const { deals: fetchedDeals, isLoading: dealsLoading } = useDeals({
-    locationId,
-    enabled: dealsProp === void 0
-  });
-  const { products: fetchedOnSale, isLoading: productsLoading } = useProductsOnSale({
-    enabled: productsOnSaleProp === void 0
-  });
-  const deals = dealsProp ?? fetchedDeals;
-  const onSale = productsOnSaleProp ?? fetchedOnSale;
-  const isLoading = dealsLoading || productsLoading;
-  const isEmpty = deals.length === 0 && onSale.length === 0;
-  if (isLoading && isEmpty) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        "data-cimplify-deals-page": true,
-        "aria-busy": "true",
-        className: cn(className, classNames?.root, classNames?.loading)
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-deals-page": true, className: cn(className, classNames?.root), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-deals-header": true, className: classNames?.header, children: /* @__PURE__ */ jsxRuntime.jsx("h1", { "data-cimplify-deals-title": true, className: classNames?.title, children: title }) }),
-    deals.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-deals-banner-section": true, className: classNames?.bannerSection, children: /* @__PURE__ */ jsxRuntime.jsx(DealBanner, { deals }) }),
-    (onSale.length > 0 || productsProp && productsProp.length > 0) && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-deals-products": true, className: classNames?.productsSection, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h2", { "data-cimplify-deals-products-title": true, className: classNames?.productsTitle, children: "On Sale Now" }),
-      productsProp ? /* @__PURE__ */ jsxRuntime.jsx(
-        ProductGrid,
+    query.length >= 2 && !isLoading && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-foreground", children: results.length }),
+        " result",
+        results.length !== 1 ? "s" : "",
+        " for ",
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium text-foreground", children: [
+          "\u201C",
+          query,
+          "\u201D"
+        ] })
+      ] }),
+      onSortChange && /* @__PURE__ */ jsxRuntime.jsxs(
+        "select",
         {
-          products: productsProp,
-          renderImage,
-          columns
+          value: sortBy || "relevance",
+          onChange: (e) => onSortChange(e.target.value),
+          className: "text-xs border border-border rounded-lg px-2 py-1.5 bg-background outline-none focus:ring-2 focus:ring-primary/10",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "relevance", children: "Relevance" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "price-asc", children: "Price: Low to High" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "price-desc", children: "Price: High to Low" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "name", children: "Name: A-Z" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "newest", children: "Newest" })
+          ]
         }
-      ) : /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-deals-sale-list": true, children: onSale.map((dealInfo) => /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-deals-sale-item": true, children: /* @__PURE__ */ jsxRuntime.jsx(
-        SaleBadge,
+      )
+    ] }),
+    categories && categories.length > 0 && onCategoryChange && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1.5 overflow-x-auto pb-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
         {
-          product: { id: dealInfo.product_id, name: dealInfo.deal_name },
-          dealInfo,
-          showOriginalPrice: true
+          onClick: () => onCategoryChange(null),
+          className: cn(
+            "text-xs font-medium px-3 py-1.5 rounded-full shrink-0 transition-colors",
+            !activeCategory ? "bg-foreground text-background" : "bg-muted text-muted-foreground hover:bg-muted/80"
+          ),
+          children: "All"
         }
-      ) }, `${dealInfo.product_id}-${dealInfo.deal_id}`)) })
+      ),
+      categories.map((cat) => /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: () => onCategoryChange(activeCategory === cat.id ? null : cat.id),
+          className: cn(
+            "text-xs font-medium px-3 py-1.5 rounded-full shrink-0 transition-colors",
+            activeCategory === cat.id ? "bg-foreground text-background" : "bg-muted text-muted-foreground hover:bg-muted/80"
+          ),
+          children: cat.name
+        },
+        cat.id
+      ))
     ] }),
-    isEmpty && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-deals-empty": true, className: classNames?.empty, children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "No deals available right now. Check back soon!" }) })
-  ] });
-}
-var ANY_VALUE2 = "__any__";
-function roomToResource(room) {
-  return {
-    id: room.id,
-    name: room.name,
-    capacity: room.capacity,
-    floor: room.floor,
-    is_available: room.status === "available"
-  };
-}
-function ResourcePicker({
-  resources,
-  selectedResourceId,
-  onResourceSelect,
-  showAnyOption = true,
-  anyLabel = "Any available",
-  renderImage,
-  className,
-  classNames
-}) {
-  const groupValue = selectedResourceId === null ? ANY_VALUE2 : selectedResourceId ?? "";
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    radioGroup.RadioGroup,
-    {
-      "data-cimplify-resource-picker": true,
-      className: cn("flex flex-col gap-2", className, classNames?.root),
-      value: groupValue,
-      onValueChange: (value) => {
-        onResourceSelect?.(value === ANY_VALUE2 ? null : value);
-      },
-      children: [
-        showAnyOption && /* @__PURE__ */ jsxRuntime.jsx(
-          radio.Radio.Root,
-          {
-            value: ANY_VALUE2,
-            "data-cimplify-resource-option": true,
-            "data-selected": selectedResourceId === null || void 0,
-            "data-any": true,
-            className: cn(
-              "flex items-center gap-3 rounded-lg border border-border p-3 transition-colors cursor-pointer",
-              "hover:bg-muted data-[checked]:border-primary data-[checked]:bg-primary/5",
-              classNames?.option
-            ),
-            children: /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-resource-name": true, className: cn("font-medium text-foreground", classNames?.name), children: anyLabel })
-          }
-        ),
-        resources.map((resource) => {
-          const unavailable = resource.is_available === false;
-          return /* @__PURE__ */ jsxRuntime.jsxs(
-            radio.Radio.Root,
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: hasFacets ? "flex gap-6" : "", children: [
+      hasFacets && /* @__PURE__ */ jsxRuntime.jsxs("aside", { "data-cimplify-search-facets": true, className: "hidden lg:block w-60 shrink-0 space-y-6", children: [
+        onInStockChange && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "In stock only" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
             {
-              value: resource.id,
-              disabled: unavailable,
-              "data-cimplify-resource-option": true,
-              "data-selected": selectedResourceId === resource.id || void 0,
-              "data-unavailable": unavailable || void 0,
+              onClick: () => onInStockChange(!inStockOnly),
               className: cn(
-                "flex items-center gap-3 rounded-lg border border-border p-3 transition-colors cursor-pointer",
-                "hover:bg-muted data-[checked]:border-primary data-[checked]:bg-primary/5",
-                unavailable && "opacity-50 cursor-not-allowed",
-                classNames?.option,
-                unavailable ? classNames?.unavailable : void 0
+                "w-10 h-6 rounded-full transition-colors relative",
+                inStockOnly ? "bg-foreground" : "bg-border"
               ),
-              children: [
-                resource.image_url && (renderImage ? renderImage({
-                  src: resource.image_url,
-                  alt: resource.name,
-                  className: classNames?.image
-                }) : /* @__PURE__ */ jsxRuntime.jsx(
-                  "img",
-                  {
-                    src: resource.image_url,
-                    alt: resource.name,
-                    "data-cimplify-resource-image": true,
-                    className: cn("w-10 h-10 rounded-lg object-cover", classNames?.image)
-                  }
-                )),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5 flex-1 min-w-0", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-resource-name": true, className: cn("font-medium text-foreground", classNames?.name), children: resource.name }),
-                  resource.description && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-resource-description": true, className: cn("text-sm text-muted-foreground truncate", classNames?.description), children: resource.description }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-resource-meta": true, className: cn("flex items-center gap-2 text-xs text-muted-foreground", classNames?.meta), children: [
-                    resource.capacity !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-cimplify-resource-capacity": true, className: classNames?.capacity, children: [
-                      "Up to ",
-                      resource.capacity
-                    ] }),
-                    resource.floor && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-resource-floor": true, className: classNames?.floor, children: resource.floor })
-                  ] })
-                ] })
-              ]
-            },
-            resource.id
-          );
-        })
-      ]
-    }
-  );
-}
-var STEP = {
-  SELECT_SLOT: "select-slot",
-  SELECT_RESOURCE: "select-resource",
-  SELECT_STAFF: "select-staff",
-  CONFIRM: "confirm"
-};
-function BookingPage({
-  service,
-  product,
-  staff,
-  resources,
-  participantCount,
-  title,
-  onBooked,
-  onBack,
-  existingBooking,
-  onRescheduled,
-  showPrice = true,
-  className,
-  classNames
-}) {
-  const { addItem } = useCart();
-  const { client } = useCimplifyClient();
-  const isReschedule = existingBooking !== void 0;
-  const [step, setStep] = React3.useState(STEP.SELECT_SLOT);
-  const [selectedSlot, setSelectedSlot] = React3.useState(null);
-  const [selectedDate, setSelectedDate] = React3.useState(null);
-  const [selectedStaffId, setSelectedStaffId] = React3.useState(null);
-  const [selectedResourceId, setSelectedResourceId] = React3.useState(null);
-  const [isSubmitting, setIsSubmitting] = React3.useState(false);
-  const [error, setError] = React3.useState(null);
-  const hasResourceStep = resources && resources.length > 0;
-  const hasStaffStep = staff && staff.length > 0;
-  const depositType = product?.deposit_type;
-  const depositAmount = product?.deposit_amount;
-  const hasDeposit = depositType !== void 0 && depositType !== "none" && depositAmount !== void 0 && chunkPEDLCL72_js.parsePrice(depositAmount) !== 0;
-  const cancellationMinutes = product?.cancellation_window_minutes;
-  const noShowFee = product?.no_show_fee;
-  const handleSlotSelect = React3.useCallback(
-    (slot, date) => {
-      setSelectedSlot(slot);
-      setSelectedDate(date);
-      setError(null);
-      if (hasResourceStep) {
-        setStep(STEP.SELECT_RESOURCE);
-      } else if (hasStaffStep) {
-        setStep(STEP.SELECT_STAFF);
-      } else {
-        setStep(STEP.CONFIRM);
-      }
-    },
-    [hasResourceStep, hasStaffStep]
-  );
-  const handleResourceSelect = React3.useCallback(
-    (resourceId) => {
-      setSelectedResourceId(resourceId);
-      if (hasStaffStep) {
-        setStep(STEP.SELECT_STAFF);
-      } else {
-        setStep(STEP.CONFIRM);
-      }
-    },
-    [hasStaffStep]
-  );
-  const handleStaffSelect = React3.useCallback((staffId) => {
-    setSelectedStaffId(staffId);
-    setStep(STEP.CONFIRM);
-  }, []);
-  const handleBack = React3.useCallback(() => {
-    setError(null);
-    if (step === STEP.CONFIRM && hasStaffStep) {
-      setStep(STEP.SELECT_STAFF);
-    } else if (step === STEP.CONFIRM && hasResourceStep) {
-      setStep(STEP.SELECT_RESOURCE);
-    } else if (step === STEP.SELECT_STAFF && hasResourceStep) {
-      setStep(STEP.SELECT_RESOURCE);
-    } else if (step === STEP.CONFIRM || step === STEP.SELECT_STAFF || step === STEP.SELECT_RESOURCE) {
-      setStep(STEP.SELECT_SLOT);
-    } else {
-      onBack?.();
-    }
-  }, [step, hasStaffStep, hasResourceStep, onBack]);
-  const handleConfirm = React3.useCallback(async () => {
-    if (!selectedSlot || !selectedDate) return;
-    setIsSubmitting(true);
-    setError(null);
-    try {
-      if (isReschedule && existingBooking) {
-        const serviceItem = existingBooking.service_items[0];
-        const result = await client.scheduling.rescheduleBooking({
-          order_id: existingBooking.order_id,
-          line_item_id: serviceItem?.service_id ?? existingBooking.order_id,
-          new_start_time: selectedSlot.start_time,
-          new_end_time: selectedSlot.end_time,
-          new_staff_id: selectedStaffId || void 0,
-          reschedule_type: "customer"
-        });
-        if (!result.ok) {
-          throw result.error;
-        }
-        onRescheduled?.(existingBooking, selectedSlot);
-      } else {
-        const serviceProduct = {
-          id: service.product_id || service.id,
-          business_id: service.business_id || "",
-          category_id: service.category_id || void 0,
-          name: service.name,
-          slug: service.id,
-          description: service.description || void 0,
-          image_url: service.image_url || void 0,
-          default_price: service.price || "0",
-          type: "service",
-          inventory_type: "none",
-          variant_strategy: "fetch_all",
-          is_active: service.is_available,
-          created_at: (/* @__PURE__ */ new Date()).toISOString(),
-          updated_at: (/* @__PURE__ */ new Date()).toISOString()
-        };
-        await addItem(serviceProduct, 1, {
-          scheduledStart: selectedSlot.start_time,
-          scheduledEnd: selectedSlot.end_time,
-          staffId: selectedStaffId || void 0,
-          resourceId: selectedResourceId || void 0
-        });
-        onBooked?.(selectedSlot, selectedStaffId);
-      }
-    } catch (err) {
-      const fallbackMessage = isReschedule ? "Failed to reschedule booking" : "Failed to add booking to cart";
-      setError(err instanceof Error ? err.message : fallbackMessage);
-    } finally {
-      setIsSubmitting(false);
-    }
-  }, [selectedSlot, selectedDate, selectedStaffId, service, addItem, onBooked, isReschedule, existingBooking, client, onRescheduled]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-booking-page": true, className: cn(className, classNames?.root), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-booking-page-header": true, className: classNames?.header, children: [
-      onBack && step === STEP.SELECT_SLOT && /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
+              children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
+                "absolute top-1 w-4 h-4 rounded-full bg-background transition-transform shadow-sm",
+                inStockOnly ? "left-5" : "left-1"
+              ) })
+            }
+          )
+        ] }),
+        facets?.map((facet) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold mb-2", children: facet.name }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1.5", children: facet.values.slice(0, 8).map((fv) => /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2 text-sm cursor-pointer group", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", className: "w-3.5 h-3.5 accent-foreground rounded" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground group-hover:text-foreground transition-colors flex-1", children: fv.value }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground/60", children: fv.count })
+          ] }, fv.value)) })
+        ] }, facet.slug))
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 md:grid-cols-3 gap-4 animate-pulse", children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-square bg-muted rounded-[14px]" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 space-y-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-3/4 bg-muted rounded" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 w-1/2 bg-muted rounded" })
+        ] })
+      ] }, i)) }) : query.length >= 2 && results.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center py-20", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-12 h-12 mx-auto text-muted-foreground/30", fill: "none", stroke: "currentColor", strokeWidth: "1", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-lg font-medium mt-4", children: [
+          "No results for \u201C",
+          query,
+          "\u201D"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground mt-1", children: "Try a different search term" }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: clear, className: "text-sm font-medium text-primary mt-4 hover:underline", children: "Clear search" })
+      ] }) : results.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 md:grid-cols-3 gap-4", children: results.map(
+        (product) => renderCard ? /* @__PURE__ */ jsxRuntime.jsx(React3__default.default.Fragment, { children: renderCard(product) }, product.id) : /* @__PURE__ */ jsxRuntime.jsx(
+          ProductCard,
+          {
+            product,
+            renderImage,
+            renderLink,
+            onQuickAdd
+          },
+          product.id
+        )
+      ) }) : null })
+    ] })
+  ] });
+}
+function CompactSearchLayout({
+  search,
+  categories,
+  activeCategory,
+  onCategoryChange,
+  renderCard,
+  renderImage,
+  renderLink,
+  onQuickAdd,
+  placeholder = "Search menu...",
+  className
+}) {
+  const { query, setQuery, results, isLoading, clear } = search;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-search-layout": "compact", className: cn("space-y-6", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
         {
-          type: "button",
-          onClick: onBack,
-          "data-cimplify-booking-page-back": true,
-          className: classNames?.backButton,
-          children: "Back"
+          type: "search",
+          value: query,
+          onChange: (e) => setQuery(e.target.value),
+          placeholder,
+          className: "w-full h-12 pl-12 pr-12 text-base border border-border rounded-xl bg-background outline-none focus:ring-2 focus:ring-primary/10 focus:border-primary/30 transition-all",
+          autoFocus: true
         }
       ),
-      step !== STEP.SELECT_SLOT && /* @__PURE__ */ jsxRuntime.jsx(
+      query.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
-          type: "button",
-          onClick: handleBack,
-          "data-cimplify-booking-page-back": true,
-          className: classNames?.backButton,
-          children: "Back"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx("h1", { "data-cimplify-booking-page-title": true, className: classNames?.title, children: title || (isReschedule ? "Reschedule Booking" : `Book ${service.name}`) })
-    ] }),
-    isReschedule && existingBooking && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-booking-reschedule-info": true, className: classNames?.rescheduleInfo, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-      "Rescheduling booking from ",
-      new Date(existingBooking.service_items[0]?.scheduled_start ?? existingBooking.created_at).toLocaleDateString()
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-booking-service-info": true, className: classNames?.serviceInfo, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-booking-service-name": true, children: service.name }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-booking-service-duration": true, children: formatDuration4(service.duration_minutes, service.duration_unit) }),
-      service.price && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-booking-service-price": true, children: /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: service.price }) }),
-      hasDeposit && /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-cimplify-booking-deposit-info": true, className: classNames?.depositInfo, children: [
-        "Deposit: ",
-        depositType === "percentage" ? `${chunkPEDLCL72_js.parsePrice(depositAmount)}%` : /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: depositAmount })
-      ] }),
-      cancellationMinutes !== void 0 && cancellationMinutes > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-cimplify-booking-cancellation-policy": true, className: classNames?.cancellationPolicy, children: [
-        "Free cancellation up to ",
-        cancellationMinutes >= 60 ? `${Math.floor(cancellationMinutes / 60)} hour${Math.floor(cancellationMinutes / 60) !== 1 ? "s" : ""}` : `${cancellationMinutes} minute${cancellationMinutes !== 1 ? "s" : ""}`,
-        " before"
-      ] }),
-      noShowFee !== void 0 && chunkPEDLCL72_js.parsePrice(noShowFee) !== 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-cimplify-booking-no-show-fee": true, className: classNames?.cancellationPolicy, children: [
-        "No-show fee: ",
-        /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: noShowFee })
-      ] })
-    ] }),
-    error && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-booking-error": true, className: classNames?.error, children: error }),
-    step === STEP.SELECT_SLOT && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-booking-step": "select-slot", className: classNames?.step, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h2", { "data-cimplify-booking-step-title": true, className: classNames?.stepTitle, children: "Select a date & time" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        DateSlotPicker,
-        {
-          serviceId: service.id,
-          participantCount,
-          selectedSlot,
-          onSlotSelect: handleSlotSelect,
-          showPrice
+          onClick: clear,
+          className: "absolute right-4 top-1/2 -translate-y-1/2 w-6 h-6 flex items-center justify-center text-muted-foreground hover:text-foreground rounded-full hover:bg-muted transition-colors",
+          "aria-label": "Clear search",
+          children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", d: "M6 18L18 6M6 6l12 12" }) })
         }
       )
     ] }),
-    step === STEP.SELECT_RESOURCE && resources && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-booking-step": "select-resource", className: cn(classNames?.step, classNames?.resourceStep), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h2", { "data-cimplify-booking-step-title": true, className: classNames?.stepTitle, children: "Choose a room" }),
+    categories && categories.length > 0 && onCategoryChange && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1.5 overflow-x-auto pb-1", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        ResourcePicker,
+        "button",
         {
-          resources,
-          selectedResourceId,
-          onResourceSelect: handleResourceSelect
+          onClick: () => onCategoryChange(null),
+          className: cn(
+            "text-xs font-medium px-3 py-1.5 rounded-full shrink-0 transition-colors",
+            !activeCategory ? "bg-foreground text-background" : "bg-muted text-muted-foreground hover:bg-muted/80"
+          ),
+          children: "All"
         }
-      )
-    ] }),
-    step === STEP.SELECT_STAFF && staff && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-booking-step": "select-staff", className: classNames?.step, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h2", { "data-cimplify-booking-step-title": true, className: classNames?.stepTitle, children: "Choose a provider" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        StaffPicker,
+      ),
+      categories.map((cat) => /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
         {
-          staff,
-          selectedStaffId,
-          onStaffSelect: handleStaffSelect
-        }
-      )
+          onClick: () => onCategoryChange(activeCategory === cat.id ? null : cat.id),
+          className: cn(
+            "text-xs font-medium px-3 py-1.5 rounded-full shrink-0 transition-colors",
+            activeCategory === cat.id ? "bg-foreground text-background" : "bg-muted text-muted-foreground hover:bg-muted/80"
+          ),
+          children: cat.name
+        },
+        cat.id
+      ))
     ] }),
-    step === STEP.CONFIRM && selectedSlot && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-booking-step": "confirm", className: classNames?.step, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h2", { "data-cimplify-booking-step-title": true, className: classNames?.stepTitle, children: "Confirm your booking" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-booking-summary": true, className: classNames?.summary, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-booking-summary-row": true, className: classNames?.summaryRow, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Service" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: service.name })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-booking-summary-row": true, className: classNames?.summaryRow, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Date" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: selectedDate })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-booking-summary-row": true, className: classNames?.summaryRow, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Time" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: new Date(selectedSlot.start_time).toLocaleTimeString(void 0, {
-            hour: "numeric",
-            minute: "2-digit"
-          }) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-booking-summary-row": true, className: classNames?.summaryRow, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Duration" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatDuration4(service.duration_minutes, service.duration_unit) })
-        ] }),
-        selectedResourceId && resources && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-booking-summary-row": true, className: classNames?.summaryRow, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Room" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: resources.find((r) => r.id === selectedResourceId)?.name ?? "Selected" })
-        ] }),
-        selectedStaffId && staff && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-booking-summary-row": true, className: classNames?.summaryRow, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Provider" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: staff.find((s) => s.id === selectedStaffId)?.name ?? "Selected" })
-        ] }),
-        (selectedSlot.price || service.price) && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-booking-summary-row": true, className: classNames?.summaryRow, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Price" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: selectedSlot.price || service.price }) })
-        ] }),
-        hasDeposit && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-booking-summary-row": true, className: cn(classNames?.summaryRow, classNames?.depositInfo), children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Deposit" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: depositType === "percentage" ? `${chunkPEDLCL72_js.parsePrice(depositAmount)}%` : /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: depositAmount }) })
-        ] })
+    query.length >= 2 && !isLoading && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-foreground", children: results.length }),
+      " result",
+      results.length !== 1 ? "s" : "",
+      " for ",
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium text-foreground", children: [
+        "\u201C",
+        query,
+        "\u201D"
+      ] })
+    ] }),
+    isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-5 animate-pulse", children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-square bg-muted rounded-[14px]" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-3/4 bg-muted rounded" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 w-1/2 bg-muted rounded" })
+      ] })
+    ] }, i)) }) : query.length >= 2 && results.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center py-16", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-lg font-medium", children: [
+        "No results for \u201C",
+        query,
+        "\u201D"
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground mt-1", children: "Try a different search term" }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: clear, className: "text-sm font-medium text-primary mt-4 hover:underline", children: "Clear search" })
+    ] }) : results.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 lg:grid-cols-3 gap-5", children: results.map(
+      (product) => renderCard ? /* @__PURE__ */ jsxRuntime.jsx(React3__default.default.Fragment, { children: renderCard(product) }, product.id) : /* @__PURE__ */ jsxRuntime.jsx(
+        ProductCard,
         {
-          type: "button",
-          onClick: handleConfirm,
-          disabled: isSubmitting,
-          "data-cimplify-booking-confirm": true,
-          className: classNames?.confirmButton,
-          children: isSubmitting ? isReschedule ? "Rescheduling\u2026" : "Adding to cart\u2026" : isReschedule ? "Reschedule" : "Confirm Booking"
-        }
+          product,
+          renderImage,
+          renderLink,
+          onQuickAdd
+        },
+        product.id
       )
-    ] })
+    ) }) : null
   ] });
 }
-var BOOKING_FILTERS = [
-  { label: "All", value: "all" },
-  { label: "Upcoming", value: "upcoming" },
-  { label: "Past", value: "past" }
-];
-function BookingsPage({
-  title = "My Bookings",
-  bookings: bookingsProp,
-  onBookingNavigate,
-  onCancel,
-  onReschedule,
-  showFilters = true,
-  renderBooking,
+var SearchTemplate = /* @__PURE__ */ ((SearchTemplate2) => {
+  SearchTemplate2["Default"] = "default";
+  SearchTemplate2["Compact"] = "compact";
+  return SearchTemplate2;
+})(SearchTemplate || {});
+var BUILT_IN_LAYOUTS5 = {
+  ["default" /* Default */]: DefaultSearchLayout,
+  ["compact" /* Compact */]: CompactSearchLayout
+};
+function SearchPage({
+  template,
+  layouts,
+  categories,
+  facets,
+  searchOptions,
+  placeholder,
+  renderCard,
+  renderImage,
+  renderLink,
+  onQuickAdd,
   className,
   classNames
 }) {
-  const [filter, setFilter] = React3.useState("all");
-  const [selectedBooking, setSelectedBooking] = React3.useState(null);
-  const handleBookingClick = React3.useCallback(
-    (booking) => {
-      if (onBookingNavigate) {
-        onBookingNavigate(booking);
-      } else {
-        setSelectedBooking(booking);
+  const search = useSearch(searchOptions);
+  const key = template ?? "default" /* Default */;
+  const Layout = layouts?.[key] ?? BUILT_IN_LAYOUTS5[key] ?? DefaultSearchLayout;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-search-page": true, className: cn(className, classNames?.root), children: /* @__PURE__ */ jsxRuntime.jsx(
+    Layout,
+    {
+      search,
+      facets,
+      categories,
+      renderCard,
+      renderImage,
+      renderLink,
+      onQuickAdd,
+      placeholder
+    }
+  ) });
+}
+function DealsPage({
+  title = "Deals & Offers",
+  deals: dealsProp,
+  productsOnSale: productsOnSaleProp,
+  products: productsProp,
+  locationId,
+  renderImage,
+  columns,
+  className,
+  classNames
+}) {
+  const { deals: fetchedDeals, isLoading: dealsLoading } = useDeals({
+    locationId,
+    enabled: dealsProp === void 0
+  });
+  const { products: fetchedOnSale, isLoading: productsLoading } = useProductsOnSale({
+    enabled: productsOnSaleProp === void 0
+  });
+  const deals = dealsProp ?? fetchedDeals;
+  const onSale = productsOnSaleProp ?? fetchedOnSale;
+  const isLoading = dealsLoading || productsLoading;
+  const isEmpty = deals.length === 0 && onSale.length === 0;
+  if (isLoading && isEmpty) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-cimplify-deals-page": true,
+        "aria-busy": "true",
+        className: cn(className, classNames?.root, classNames?.loading)
       }
-    },
-    [onBookingNavigate]
-  );
-  const handleBack = React3.useCallback(() => {
-    setSelectedBooking(null);
-  }, []);
-  if (selectedBooking && !onBookingNavigate) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-bookings-page": true, className: cn(className, classNames?.root), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-bookings-detail": true, className: classNames?.detail, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-deals-page": true, className: cn(className, classNames?.root), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-deals-header": true, className: classNames?.header, children: /* @__PURE__ */ jsxRuntime.jsx("h1", { "data-cimplify-deals-title": true, className: classNames?.title, children: title }) }),
+    deals.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-deals-banner-section": true, className: classNames?.bannerSection, children: /* @__PURE__ */ jsxRuntime.jsx(DealBanner, { deals }) }),
+    (onSale.length > 0 || productsProp && productsProp.length > 0) && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-deals-products": true, className: classNames?.productsSection, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { "data-cimplify-deals-products-title": true, className: classNames?.productsTitle, children: "On Sale Now" }),
+      productsProp ? /* @__PURE__ */ jsxRuntime.jsx(
+        ProductGrid,
         {
-          type: "button",
-          onClick: handleBack,
-          "data-cimplify-bookings-back": true,
-          className: classNames?.backButton,
-          children: "Back to bookings"
+          products: productsProp,
+          renderImage,
+          columns
         }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        BookingCard,
+      ) : /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-deals-sale-list": true, children: onSale.map((dealInfo) => /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-deals-sale-item": true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        SaleBadge,
         {
-          booking: selectedBooking,
-          onCancel,
-          onReschedule
+          product: { id: dealInfo.product_id, name: dealInfo.deal_name },
+          dealInfo,
+          showOriginalPrice: true
         }
-      )
-    ] }) });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-bookings-page": true, className: cn(className, classNames?.root), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-bookings-header": true, className: classNames?.header, children: /* @__PURE__ */ jsxRuntime.jsx("h1", { "data-cimplify-bookings-title": true, className: classNames?.title, children: title }) }),
-    showFilters && /* @__PURE__ */ jsxRuntime.jsx(
-      tabs.Tabs.Root,
-      {
-        value: filter,
-        onValueChange: (value) => setFilter(value),
-        children: /* @__PURE__ */ jsxRuntime.jsx(tabs.Tabs.List, { "data-cimplify-bookings-filters": true, className: classNames?.filters, children: BOOKING_FILTERS.map((f) => /* @__PURE__ */ jsxRuntime.jsx(
-          tabs.Tabs.Tab,
-          {
-            value: f.value,
-            "data-cimplify-booking-filter": true,
-            "data-selected": filter === f.value || void 0,
-            className: classNames?.filterButton,
-            children: f.label
-          },
-          f.value
-        )) })
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-bookings-list": true, className: classNames?.list, children: /* @__PURE__ */ jsxRuntime.jsx(
-      BookingList,
-      {
-        bookings: bookingsProp,
-        filter,
-        onCancel,
-        onReschedule,
-        onBookingClick: handleBookingClick,
-        renderBooking
-      }
-    ) })
+      ) }, `${dealInfo.product_id}-${dealInfo.deal_id}`)) })
+    ] }),
+    isEmpty && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-deals-empty": true, className: classNames?.empty, children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "No deals available right now. Check back soon!" }) })
   ] });
 }
 function LocationPicker({
@@ -10185,6 +10418,103 @@ function CurrencySelector({
     );
   }) });
 }
+var ANY_VALUE2 = "__any__";
+function roomToResource(room) {
+  return {
+    id: room.id,
+    name: room.name,
+    capacity: room.capacity,
+    floor: room.floor,
+    is_available: room.status === "available"
+  };
+}
+function ResourcePicker({
+  resources,
+  selectedResourceId,
+  onResourceSelect,
+  showAnyOption = true,
+  anyLabel = "Any available",
+  renderImage,
+  className,
+  classNames
+}) {
+  const groupValue = selectedResourceId === null ? ANY_VALUE2 : selectedResourceId ?? "";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    radioGroup.RadioGroup,
+    {
+      "data-cimplify-resource-picker": true,
+      className: cn("flex flex-col gap-2", className, classNames?.root),
+      value: groupValue,
+      onValueChange: (value) => {
+        onResourceSelect?.(value === ANY_VALUE2 ? null : value);
+      },
+      children: [
+        showAnyOption && /* @__PURE__ */ jsxRuntime.jsx(
+          radio.Radio.Root,
+          {
+            value: ANY_VALUE2,
+            "data-cimplify-resource-option": true,
+            "data-selected": selectedResourceId === null || void 0,
+            "data-any": true,
+            className: cn(
+              "flex items-center gap-3 rounded-lg border border-border p-3 transition-colors cursor-pointer",
+              "hover:bg-muted data-[checked]:border-primary data-[checked]:bg-primary/5",
+              classNames?.option
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-resource-name": true, className: cn("font-medium text-foreground", classNames?.name), children: anyLabel })
+          }
+        ),
+        resources.map((resource) => {
+          const unavailable = resource.is_available === false;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            radio.Radio.Root,
+            {
+              value: resource.id,
+              disabled: unavailable,
+              "data-cimplify-resource-option": true,
+              "data-selected": selectedResourceId === resource.id || void 0,
+              "data-unavailable": unavailable || void 0,
+              className: cn(
+                "flex items-center gap-3 rounded-lg border border-border p-3 transition-colors cursor-pointer",
+                "hover:bg-muted data-[checked]:border-primary data-[checked]:bg-primary/5",
+                unavailable && "opacity-50 cursor-not-allowed",
+                classNames?.option,
+                unavailable ? classNames?.unavailable : void 0
+              ),
+              children: [
+                resource.image_url && (renderImage ? renderImage({
+                  src: resource.image_url,
+                  alt: resource.name,
+                  className: classNames?.image
+                }) : /* @__PURE__ */ jsxRuntime.jsx(
+                  "img",
+                  {
+                    src: resource.image_url,
+                    alt: resource.name,
+                    "data-cimplify-resource-image": true,
+                    className: cn("w-10 h-10 rounded-lg object-cover", classNames?.image)
+                  }
+                )),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5 flex-1 min-w-0", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-resource-name": true, className: cn("font-medium text-foreground", classNames?.name), children: resource.name }),
+                  resource.description && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-resource-description": true, className: cn("text-sm text-muted-foreground truncate", classNames?.description), children: resource.description }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-resource-meta": true, className: cn("flex items-center gap-2 text-xs text-muted-foreground", classNames?.meta), children: [
+                    resource.capacity !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-cimplify-resource-capacity": true, className: classNames?.capacity, children: [
+                      "Up to ",
+                      resource.capacity
+                    ] }),
+                    resource.floor && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-resource-floor": true, className: classNames?.floor, children: resource.floor })
+                  ] })
+                ] })
+              ]
+            },
+            resource.id
+          );
+        })
+      ]
+    }
+  );
+}
 
 Object.defineProperty(exports, "getVariantDisplayName", {
   enumerable: true,
@@ -10200,21 +10530,26 @@ exports.AvailabilityBadge = AvailabilityBadge;
 exports.BillingPlanSelector = BillingPlanSelector;
 exports.BookingCard = BookingCard;
 exports.BookingList = BookingList;
-exports.BookingPage = BookingPage;
-exports.BookingsPage = BookingsPage;
 exports.BundleSelector = BundleSelector;
 exports.CardImage = CardImage;
 exports.CardShell = CardShell;
 exports.CardVariant = CardVariant;
 exports.CartPage = CartPage;
 exports.CartSummary = CartSummary;
+exports.CartTemplate = CartTemplate;
+exports.CatalogueCollectionLayout = CatalogueCollectionLayout;
 exports.CataloguePage = CataloguePage;
+exports.CatalogueTemplate = CatalogueTemplate;
 exports.CategoryFilter = CategoryFilter;
 exports.CategoryGrid = CategoryGrid;
 exports.CheckoutPage = CheckoutPage;
 exports.CimplifyCheckout = CimplifyCheckout;
 exports.CimplifyProvider = CimplifyProvider;
 exports.CollectionPage = CollectionPage;
+exports.CollectionTemplate = CollectionTemplate;
+exports.CompactCartLayout = CompactCartLayout;
+exports.CompactCatalogueLayout = CompactCatalogueLayout;
+exports.CompactSearchLayout = CompactSearchLayout;
 exports.CompactServiceCard = CompactServiceCard;
 exports.CompositeSelector = CompositeSelector;
 exports.CurrencySelector = CurrencySelector;
@@ -10222,12 +10557,17 @@ exports.CustomAttributesTable = CustomAttributesTable;
 exports.DateSlotPicker = DateSlotPicker;
 exports.DealBanner = DealBanner;
 exports.DealsPage = DealsPage;
+exports.DefaultCartLayout = DefaultCartLayout;
+exports.DefaultCatalogueLayout = DefaultCatalogueLayout;
+exports.DefaultCollectionLayout = DefaultCollectionLayout;
 exports.DefaultProductLayout = DefaultProductLayout;
+exports.DefaultSearchLayout = DefaultSearchLayout;
 exports.DeliveryEstimate = DeliveryEstimate;
 exports.DigitalProductCard = DigitalProductCard;
 exports.DigitalProductLayout = DigitalProductLayout;
 exports.DiscountInput = DiscountInput;
 exports.ElementsProvider = ElementsProvider;
+exports.FeaturedCollectionLayout = FeaturedCollectionLayout;
 exports.FoodProductCard = FoodProductCard;
 exports.FoodProductLayout = FoodProductLayout;
 exports.InventoryBadge = InventoryBadge;
@@ -10261,8 +10601,7 @@ exports.SaleBadge = SaleBadge;
 exports.ScheduleServiceCard = ScheduleServiceCard;
 exports.SearchInput = SearchInput;
 exports.SearchPage = SearchPage;
-exports.ServiceCard = ServiceCard;
-exports.ServiceGrid = ServiceGrid;
+exports.SearchTemplate = SearchTemplate;
 exports.ServiceProductLayout = ServiceProductLayout;
 exports.SessionMessageBanner = SessionMessageBanner;
 exports.SlotPicker = SlotPicker;