@fayz-ai/storefront 0.12.1 → 0.13.1

package/dist/{chunk-OYKFJ6FG.js → chunk-6DWZAAIW.js}

@@ -6,9 +6,9 @@ import { setShopCarrierQuotesResolver, setShopAccessTokenResolver, setShopShippi
 import { normalizePostalCode, lookupPostalCode, defaultRouterAdapter, defineLoader, staticRouterAdapter, isLoaderParamRef, isLoaderPropRef, resolveLoader, dataNeedKey, getBlockMeta, defaultPropsFromSettings, getBlockErrorVisibility, isBlockEnabledOn, checkBlockConstraints, checkBlockContext, repairBlockTree, renderBlocks, clearExtensionPoints, defineExtensionPoint, runExtensionPoint, runEscapeValve, breadcrumbJsonLd, hasEntityDeclaration, resolveEntityDeclaration, defineBlock, formatPostalCode, defineEntity, listEntityDeclarations, resolveHandle, seoOrigin, RESERVED_ENTITY_FIELDS, ENTITY_FIELD_TYPES, handleNameFor, registerHandle, hasHandle, listHandles, blockRegistry, loaderRegistry, listLoaders } from '@fayz-ai/core';
 import React4, { createContext, useContext, useEffect, useRef, useState, useSyncExternalStore, useMemo, useCallback } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { isStorageImageUrl, imageVariantUrl, imageSrcSet, IMAGE_SRCSET_WIDTHS, validateDiscount, documentDigits, isChargeableProvider, formatDocument, isValidDocument } from '@fayz-ai/shop';
 import { ChevronLeft, ChevronRight, ShoppingBag, X, Minus, Plus, Send, MessageCircle, Mail, Truck, RefreshCcw, ShieldCheck, ChevronDown, Check, Search, Trash2, Lock, CreditCard, Star, MapPin, Phone, User, UserCircle, Package, LogOut, Menu, QrCode, Copy, XCircle, RotateCcw, Clock, PackageCheck, Info, AlertCircle } from 'lucide-react';
 import { getLucideIcon } from '@fayz-ai/ui/icons';
-import { validateDiscount, documentDigits, isChargeableProvider, formatDocument, isValidDocument } from '@fayz-ai/shop';
 import { storefrontDiscountToPromotion, previewCouponPercent, discountToPromotion, PROMOTION_TYPES, PROMOTION_STATUSES, APPLICATION_METHOD_TYPES, APPLICATION_METHOD_TARGET_TYPES, APPLICATION_METHOD_ALLOCATIONS, hasRuleAttribute, listRuleAttributeKeys, RULE_OPERATORS, resolveRuleAttribute } from '@fayz-ai/shop/rules';
 import { createMockShopProvider } from '@fayz-ai/shop/mock';
 
@@ -445,6 +445,17 @@ function toFacetMap(input) {
   }
   return out;
 }
+var TRACKING_PARAM = /^(utm_[a-z0-9_]+|fbclid|gclid|gbraid|wbraid|dclid|msclkid|ttclid|twclid|li_fat_id|igshid|igsh|mc_cid|mc_eid|_ga|_gl|_hs[a-z]+|hsa_[a-z]+|yclid|srsltid|ref|ref_src)$/i;
+function isTrackingParam(key) {
+  return TRACKING_PARAM.test(key);
+}
+function facetsFromQuery(params, reserved) {
+  const out = {};
+  for (const [key, value] of params.entries()) {
+    if (value && !reserved.has(key) && !isTrackingParam(key)) out[key] = value;
+  }
+  return out;
+}
 function withFacet(facets, key, value) {
   if (value == null || value === "") {
     if (!(key in facets)) return facets;
@@ -760,7 +771,8 @@ function resolveConfig(config) {
       mode: config.imageLoading?.mode ?? "fade",
       durationMs: config.imageLoading?.durationMs ?? 420,
       easing: config.imageLoading?.easing ?? "cubic-bezier(0.22, 1, 0.36, 1)",
-      blur: config.imageLoading?.blur ?? true
+      blur: config.imageLoading?.blur ?? true,
+      transform: config.imageLoading?.transform ?? "none"
     },
     catalogPath,
     search: {
@@ -1107,10 +1119,14 @@ var TID = {
 };
 function SmoothImage({
   imageLoading,
+  variant,
   loading = "lazy",
   decoding = "async",
   onLoad,
   style,
+  src,
+  srcSet,
+  sizes,
   ...props
 }) {
   const config = useStorefrontConfigOptional();
@@ -1122,15 +1138,34 @@ function SmoothImage({
   const durationMs = resolved.durationMs ?? 420;
   const easing = resolved.easing ?? "cubic-bezier(0.22, 1, 0.36, 1)";
   const blur = resolved.blur ?? true;
+  const transform = resolved.transform ?? "none";
   const ref = React4.useRef(null);
   const [loaded, setLoaded] = React4.useState(mode === "none");
+  const delivered = React4.useMemo(() => {
+    if (transform !== "supabase" || !src || srcSet || !isStorageImageUrl(src)) return { src, srcSet, sizes };
+    if (variant?.width) {
+      const w = variant.width;
+      const q = variant.quality;
+      return {
+        src: imageVariantUrl(src, { width: w, quality: q }),
+        srcSet: `${imageVariantUrl(src, { width: w, quality: q })} 1x, ${imageVariantUrl(src, { width: w * 2, quality: q })} 2x`,
+        sizes
+      };
+    }
+    return {
+      // A middle rung as the fallback `src`, for a browser without srcset.
+      src: imageVariantUrl(src, { width: 960, quality: variant?.quality }),
+      srcSet: imageSrcSet(src, variant?.widths ?? IMAGE_SRCSET_WIDTHS, { quality: variant?.quality }),
+      sizes: variant?.sizes ?? sizes ?? "100vw"
+    };
+  }, [transform, src, srcSet, sizes, variant?.width, variant?.sizes, variant?.widths, variant?.quality]);
   React4.useEffect(() => {
     if (mode === "none") {
       setLoaded(true);
       return;
     }
     if (ref.current?.complete && ref.current.naturalWidth > 0) setLoaded(true);
-  }, [mode, props.src]);
+  }, [mode, delivered.src]);
   const revealStyle = mode === "none" ? {} : {
     opacity: loaded ? 1 : 0,
     filter: blur && !loaded ? "blur(10px)" : "blur(0px)",
@@ -1140,6 +1175,9 @@ function SmoothImage({
     "img",
     {
       ...props,
+      src: delivered.src,
+      srcSet: delivered.srcSet,
+      sizes: delivered.sizes,
       ref,
       loading,
       decoding,
@@ -1641,7 +1679,8 @@ function CategoryShowcase({
           {
             src: c.imageUrl ?? bannerPlaceholder(c.name, 30 + i * 70, 70 + i * 70, 200, 200),
             alt: c.name,
-            className: "h-full w-full object-cover"
+            className: "h-full w-full object-cover",
+            variant: { width: 96 }
           }
         ) }),
         /* @__PURE__ */ jsx("span", { className: "text-center text-xs font-medium leading-tight", children: c.name })
@@ -1656,7 +1695,8 @@ function CategoryShowcase({
         {
           src: c.imageUrl ?? bannerPlaceholder(c.name, 30 + i * 70, 70 + i * 70, 480, 600),
           alt: c.name,
-          className: "h-full w-full object-cover transition-transform duration-700 ease-out group-hover:scale-110"
+          className: "h-full w-full object-cover transition-transform duration-700 ease-out group-hover:scale-110",
+          variant: { sizes: "(min-width: 1024px) 33vw, 100vw" }
         }
       ),
       /* @__PURE__ */ jsxs("span", { className: "absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent p-5 pt-12 text-left", children: [
@@ -2444,7 +2484,8 @@ function ProductCard({ product, config: providedConfig, actions: providedActions
                     src: image?.url ?? productPlaceholder(product.name),
                     alt: image?.altText ?? product.name,
                     className: "h-full w-full object-cover transition-transform duration-300 group-hover:scale-105",
-                    loading: "lazy"
+                    loading: "lazy",
+                    variant: { sizes: "(min-width: 1024px) 25vw, (min-width: 640px) 33vw, 50vw" }
                   }
                 ),
                 /* @__PURE__ */ jsxs("div", { className: "absolute left-3 top-3 flex gap-2", children: [
@@ -3284,9 +3325,7 @@ function useCatalogUrlSync(searchParam) {
     if (p.has("q")) s2.setSearch(p.get("q") ?? "");
     else if (p.has("search")) s2.setSearch(p.get("search") ?? "");
     if (p.get("category")) s2.setCategoryId(p.get("category"));
-    for (const [key, value] of p.entries()) {
-      if (!RESERVED_PARAMS.has(key) && value) s2.setFacet(key, value);
-    }
+    for (const [key, value] of Object.entries(facetsFromQuery(p, RESERVED_PARAMS))) s2.setFacet(key, value);
     const sort = p.get("sort");
     if (sort && SORTS.includes(sort)) s2.setSort(sort);
     if (p.get("stock") === "1") s2.setInStockOnly(true);
@@ -3294,7 +3333,11 @@ function useCatalogUrlSync(searchParam) {
     if (p.has("max")) s2.setPriceMax(Number(p.get("max")) || null);
   }, []);
   useEffect(() => {
+    const current = adapter.getCurrentPath();
     const p = new URLSearchParams();
+    for (const [key, value] of new URLSearchParams(current.split("?")[1] ?? "").entries()) {
+      if (isTrackingParam(key)) p.set(key, value);
+    }
     if (catalog.search) p.set(searchParam, catalog.search);
     if (catalog.categoryId) p.set("category", catalog.categoryId);
     for (const [key, value] of Object.entries(catalog.facets)) p.set(key, value);
@@ -3302,10 +3345,10 @@ function useCatalogUrlSync(searchParam) {
     if (catalog.inStockOnly) p.set("stock", "1");
     if (catalog.priceMin != null) p.set("min", String(catalog.priceMin));
     if (catalog.priceMax != null) p.set("max", String(catalog.priceMax));
-    const base = adapter.getCurrentPath().split("?")[0] || "/catalog";
+    const base = current.split("?")[0] || "/catalog";
     const qs = p.toString();
     const next = qs ? `${base}?${qs}` : base;
-    if (next !== adapter.getCurrentPath()) adapter.replace(next);
+    if (next !== current) adapter.replace(next);
   }, [
     catalog.search,
     catalog.categoryId,
@@ -3408,9 +3451,14 @@ function absolute(ctx, path = ctx.path) {
 function primaryImageUrl(product) {
   return (product.images?.find((i) => i.isPrimary) ?? product.images?.[0])?.url;
 }
+function shareImageUrl(product, ctx) {
+  const url = primaryImageUrl(product);
+  if (!url) return void 0;
+  return ctx.config.imageLoading.transform === "supabase" ? imageVariantUrl(url, { width: 1200, quality: 82 }) : url;
+}
 function productJsonLd(product, ctx) {
   const url = absolute(ctx);
-  const image = primaryImageUrl(product);
+  const image = shareImageUrl(product, ctx);
   return {
     "@context": "https://schema.org",
     "@type": "Product",
@@ -3435,7 +3483,7 @@ function productSeo(product, ctx) {
     title: `${product.name} \u2014 ${ctx.config.name}`,
     description: product.description?.slice(0, 160),
     canonical: url,
-    image: primaryImageUrl(product),
+    image: shareImageUrl(product, ctx),
     type: "product",
     jsonLd: [
       productJsonLd(product, ctx),
@@ -3926,7 +3974,8 @@ function ProductGallery({ product, images, primaryImage, order = "primary" }) {
                   src: current?.url ?? productPlaceholder(product.name),
                   alt: current?.altText ?? product.name,
                   "data-testid": TID.pdpGalleryImage,
-                  className: "h-full w-full object-cover"
+                  className: "h-full w-full object-cover",
+                  variant: { sizes: "(min-width: 1024px) 50vw, 100vw" }
                 },
                 current?.id ?? "placeholder"
               )
@@ -3957,7 +4006,7 @@ function ProductGallery({ product, images, primaryImage, order = "primary" }) {
           setZoom(null);
         },
         className: `h-16 w-16 shrink-0 overflow-hidden rounded-lg border transition ${position === index ? "border-primary ring-2 ring-primary/20" : "border-border opacity-70 hover:opacity-100"}`,
-        children: /* @__PURE__ */ jsx("img", { src: image.url, alt: "", className: "h-full w-full object-cover", loading: "lazy" })
+        children: /* @__PURE__ */ jsx(SmoothImage, { src: image.url, alt: "", className: "h-full w-full object-cover", loading: "lazy", variant: { width: 64 } })
       }
     ) }, image.id)) })
   ] });
@@ -4216,7 +4265,7 @@ function ProductDetailPage({ slug }) {
     );
   }
   return /* @__PURE__ */ jsxs("div", { ...storefrontComponentContracts.productDetail.root, className: "mx-auto max-w-5xl px-4 py-8 sm:px-6", children: [
-    /* @__PURE__ */ jsxs(Link, { to: "/", className: "mb-6 inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground", children: [
+    /* @__PURE__ */ jsxs(Link, { to: config.catalogPath, className: "mb-6 inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground", children: [
       /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }),
       " Continuar comprando"
     ] }),
@@ -7038,7 +7087,7 @@ function CartDrawer() {
                       "data-line-id": line.lineId ?? line.productId,
                       className: `flex animate-fade-up gap-3 rounded-lg p-1.5 transition-all hover:bg-muted/40 ${(line.lineId ?? line.productId) === cart.justAddedLineId ? "bg-primary/5 ring-1 ring-primary/30" : ""}`,
                       children: [
-                        line.imageUrl && /* @__PURE__ */ jsx(SmoothImage, { src: line.imageUrl, alt: line.name, className: "h-20 w-20 shrink-0 rounded-lg border object-cover" }),
+                        line.imageUrl && /* @__PURE__ */ jsx(SmoothImage, { src: line.imageUrl, alt: line.name, className: "h-20 w-20 shrink-0 rounded-lg border object-cover", variant: { width: 80 } }),
                         /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col", children: [
                           /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
                             /* @__PURE__ */ jsx("span", { className: "text-sm font-medium leading-snug", children: line.name }),
@@ -8524,7 +8573,7 @@ function CheckoutPage() {
         /* @__PURE__ */ jsx("h2", { className: "sr-only", children: "Resumo do pedido" }),
         /* @__PURE__ */ jsx("ul", { className: "space-y-4", children: cart.lines.map((line) => /* @__PURE__ */ jsxs("li", { className: "flex gap-3 text-sm", children: [
           /* @__PURE__ */ jsxs("div", { className: "relative h-16 w-16 flex-none overflow-hidden rounded-lg border bg-background", children: [
-            line.imageUrl && /* @__PURE__ */ jsx(SmoothImage, { src: line.imageUrl, alt: line.name, className: "h-full w-full object-cover" }),
+            line.imageUrl && /* @__PURE__ */ jsx(SmoothImage, { src: line.imageUrl, alt: line.name, className: "h-full w-full object-cover", variant: { width: 96 } }),
             /* @__PURE__ */ jsx("span", { className: "absolute -right-1 -top-1 flex h-5 min-w-5 items-center justify-center rounded-full bg-muted-foreground px-1.5 text-[10px] font-bold text-background", children: line.quantity })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
@@ -9001,7 +9050,7 @@ function OrderConfirmationPage({ orderId }) {
           ))
         ] }),
         /* @__PURE__ */ jsx("ul", { className: "mt-8 space-y-3 text-left", children: order.items.map((item) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-3 text-sm", children: [
-          item.imageUrl && /* @__PURE__ */ jsx(SmoothImage, { src: item.imageUrl, alt: item.name, className: "h-12 w-12 rounded-lg border object-cover" }),
+          item.imageUrl && /* @__PURE__ */ jsx(SmoothImage, { src: item.imageUrl, alt: item.name, className: "h-12 w-12 rounded-lg border object-cover", variant: { width: 48 } }),
           /* @__PURE__ */ jsxs("span", { className: "flex-1", children: [
             item.name,
             " ",
@@ -9046,7 +9095,7 @@ function OrderConfirmationPage({ orderId }) {
               children: "Minhas compras"
             }
           ),
-          /* @__PURE__ */ jsx(Link, { to: "/", className: "rounded-xl border px-5 py-2.5 font-semibold hover:bg-muted", children: "Continuar comprando" })
+          /* @__PURE__ */ jsx(Link, { to: config.catalogPath, className: "rounded-xl border px-5 py-2.5 font-semibold hover:bg-muted", children: "Continuar comprando" })
         ] })
       ] })
     }
@@ -9244,7 +9293,7 @@ function OrdersPanel() {
         /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: new Date(order.createdAt).toLocaleDateString(config.locale) }),
         /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx(OrderTrackingTimeline, { order, compact: true }) }),
         /* @__PURE__ */ jsx("ul", { className: "mt-3 flex flex-wrap gap-2", children: order.items.map((item) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2 rounded-lg border px-2 py-1 text-xs", children: [
-          item.imageUrl && /* @__PURE__ */ jsx(SmoothImage, { src: item.imageUrl, alt: item.name, className: "h-6 w-6 rounded object-cover" }),
+          item.imageUrl && /* @__PURE__ */ jsx(SmoothImage, { src: item.imageUrl, alt: item.name, className: "h-6 w-6 rounded object-cover", variant: { width: 24 } }),
           item.name,
           " \xD7 ",
           item.quantity
@@ -9335,13 +9384,14 @@ function ProfilePanel() {
   ] });
 }
 function AddressesPanel() {
+  const config = useStorefrontConfig();
   return /* @__PURE__ */ jsxs("div", { className: "rounded-2xl border bg-card p-6", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsx(MapPin, { className: "h-5 w-5 text-primary" }),
       /* @__PURE__ */ jsx("h2", { className: "sf-heading text-lg font-semibold", children: "Endere\xE7os" })
     ] }),
     /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: "Voc\xEA informa o endere\xE7o de entrega no checkout. Em breve ser\xE1 poss\xEDvel salvar endere\xE7os para reutilizar nas pr\xF3ximas compras." }),
-    /* @__PURE__ */ jsx(Link, { to: "/", className: "mt-4 inline-block text-sm font-semibold text-primary underline", children: "Continuar comprando" })
+    /* @__PURE__ */ jsx(Link, { to: config.catalogPath, className: "mt-4 inline-block text-sm font-semibold text-primary underline", children: "Continuar comprando" })
   ] });
 }
 function PaymentsPanel() {
@@ -11041,5 +11091,5 @@ ${formatErrors(report.errors)}`;
 }
 
 export { BEFORE_PLACE_ORDER_VALVE, BLOCK_STRUCTURAL_KEYS, BenefitsRow, BlockDataError, CART_LINE_ANNOTATION_POINT, CATALOG_BODY_BLOCK, CHECKOUT_FIELD_POINT, CartDrawer, CatalogPage, CategoryShowcase, CheckoutPage, CollectionCta, CollectionHero, ContentPage, CountdownBand, EmailConfirmationRequiredError, EntityListBlock, FaqSection, FiltersPanel, FormBlock, HeroSection, ImageTiles, Link, ManifestoBlock, MediaCarousel, MotifStrip, MyPurchasesPage, NewsletterBand, ORDER_METADATA_POINT, OrderConfirmationPage, OrderTrackingTimeline, PAGE_DATA_SCRIPT_ID, PLACEHOLDER_ASPECTS, PRODUCT_BODY_BLOCK, PRODUCT_CARD_BADGE_POINT, PageDataScope, PaymentTerms, Price, ProductCard, ProductDetailPage, ProductEnquiryForm, ProductGallery, ProductGrid, ProductOptionSelector, ProductRail, ProductReviews, ProductSlider, ProductSpecs, ProductSpotlight, PromoBanner, QuantityInput, Reveal, STOREFRONT_COMPONENT_KEYS, STOREFRONT_PAGE_KINDS, STOREFRONT_SLOTS, STORE_BACKEND_PROVIDERS, STORE_COMMERCE_MODES, STORE_DOCUMENT_KIND, STORE_PAYMENT_METHOD_KINDS, STORE_PAYMENT_MODES, STORE_ROUTE_CHROMES, STORE_ROUTE_KINDS, STORE_SECTIONS, STORE_SECTION_NAMES, SealsBand, SearchOverlay, Slot, SmoothImage, StepsSection, StorefrontConfigHost, StorefrontConfigProvider, StorefrontFooter, StorefrontHeader, StorefrontPage, StorefrontRouterProvider, StorefrontShell, StorefrontThemeStyle, StoryQuote, THEME_SCALE_FIELDS, THEME_SCALE_VAR_PREFIX, TID, Testimonials, TierCards, applyStoreSettings, bannerPlaceholder, blockInstanceId, buildEnquiryFromForm, checkPageBlocks, collectDataNeeds, collectOrderMetadata, contentPagePath, createStorefront, createStorefrontApp, currentStaticRenderPass, defaultPageBlocks, entityListBlockMeta, establishCustomerSession, exportStore, formatMoney, formatProductOptionSelection, getCartLineAnnotations, getCheckoutFieldContributions, getCustomerAuthAdapter, getProductCardBadges, getProductOptionGroups, hydrateStoreDocument, hydratedEntriesFor, initStorefrontRuntime, isJsonValue, isKnownPath, isNestedBlockRef, isPublicPath, isRecord, listSlots, matchContentPage, matchPath, matchesFacets, mergeCollectionFacet, mergePageTheme, navigateTo, nextMilestone, normalizeProductOptionSelection, orderGalleryImages, overrideComponent, overrideProps, pageSeo, pageThemeSelector, pickProductCardImage, placeStorefrontOrder, prefersReducedMotion, primaryImageUrl, productCardComponentContract, productJsonLd, productOptionSelectionKey, productPlaceholder, productSeo, readHydratedPageData, registerStorefrontBlocks, registerStorefrontEntities, registerStorefrontExtensionPoints, registerStorefrontLoaders, resetPageDiagnostics, resetProductOptionsDeprecationWarnings, resetStorefrontExtensionPoints, resolveAuthAdapter, resolveConfig, resolveDataParams, resolveOverride, resolvePageData, resolvePageDataNeed, resolvePaymentTerms, resolveStorefrontProvider, resolveStorefrontRoute, resolveVariantForSelection, roundCents, routePathParams, runBeforePlaceOrderValve, sectionToJsonSchema, sectionsToBlocks, selectCount, selectDiscountTotal, selectRequiresShipping, selectShipping, selectSubtotal, selectTotal, selectionPrice, serializePageData, shellRouterAdapter, signInByEmail, signOutCustomer, signUpCustomer, slugifyStoreName, storefrontComponentContracts, storefrontPaths, themeToCss, toBlockNodes, toFacetMap, useBlockData, useCartStore, useCatalogStore, useCategories, useDeliveryStore, useDiscountValidator, useEnquiry, useHashPath, useInView, useLoader, useMyOrders, useNavigate, usePopOnChange, useProduct, useProducts, useRoutePath, useRouterAdapter, useScrollToTopOnNavigate, useScrolled, useSessionStore, useSlotContext, useStorefrontActions, useStorefrontConfig, useStorefrontConfigOptional, useStorefrontHead, useStorefrontPage, useStorefrontPageOptional, usedSlots, validateStore, withFacet, withStaticRenderPass };
-//# sourceMappingURL=chunk-OYKFJ6FG.js.map
-//# sourceMappingURL=chunk-OYKFJ6FG.js.map
+//# sourceMappingURL=chunk-6DWZAAIW.js.map
+//# sourceMappingURL=chunk-6DWZAAIW.js.map