@fayz-ai/storefront 0.6.0 → 0.8.0

package/dist/index.cjs

@@ -2,10 +2,10 @@
 
 var runtime = require('@fayz-ai/shop/runtime');
 var mock = require('@fayz-ai/shop/mock');
-var auth = require('@fayz-ai/auth');
+var pluginAuth = require('@fayz-ai/plugin-auth');
 var zustand = require('zustand');
 var middleware = require('zustand/middleware');
-var React18 = require('react');
+var React6 = require('react');
 var core = require('@fayz-ai/core');
 var LucideIcons = require('lucide-react');
 var jsxRuntime = require('react/jsx-runtime');
@@ -31,7 +31,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React18__default = /*#__PURE__*/_interopDefault(React18);
+var React6__default = /*#__PURE__*/_interopDefault(React6);
 var LucideIcons__namespace = /*#__PURE__*/_interopNamespace(LucideIcons);
 
 // src/createStorefrontApp.tsx
@@ -50,14 +50,31 @@ var useSessionStore = zustand.create()(
 
 // src/auth.ts
 var _adapter = null;
-function resolveAuthAdapter(configured) {
-  if (configured && configured !== "mock" && configured !== "supabase") return configured;
-  if (configured === "supabase") {
-    console.warn(
-      '@fayz-ai/shop: auth.adapter="supabase" is legacy. Pass an explicit AuthAdapter or use the Fayz SDK broker path.'
-    );
-  }
-  return auth.createMockAuthAdapter();
+function isAuthAdapter(value) {
+  return Boolean(
+    value && typeof value === "object" && "getSession" in value && "signIn" in value && "signOut" in value
+  );
+}
+function normalizeAuthConfig(configured) {
+  if (!configured) return {};
+  if (typeof configured === "string" || isAuthAdapter(configured)) return { adapter: configured };
+  return configured;
+}
+function resolveAuthAdapter(configured, fallback) {
+  const config = normalizeAuthConfig(configured);
+  return pluginAuth.createAuthRuntime({
+    provider: config.provider ?? config.adapter ?? (fallback?.supabaseUrl ? "supabase" : "mock"),
+    adapter: config.adapter,
+    routes: config.routes,
+    requireAuth: false,
+    supabase: {
+      url: config.supabase?.url ?? fallback?.supabaseUrl,
+      anonKey: config.supabase?.anonKey ?? fallback?.supabaseAnonKey,
+      client: config.supabase?.client,
+      callbackUrl: config.supabase?.callbackUrl,
+      resetPasswordUrl: config.supabase?.resetPasswordUrl
+    }
+  }).adapter;
 }
 function initCustomerAuth(adapter2) {
   _adapter = adapter2;
@@ -74,7 +91,7 @@ function initCustomerAuth(adapter2) {
   });
 }
 function getCustomerAuthAdapter() {
-  if (!_adapter) _adapter = auth.createMockAuthAdapter();
+  if (!_adapter) _adapter = pluginAuth.createMockAuthAdapter();
   return _adapter;
 }
 async function resolveShopCustomer(email, name) {
@@ -128,18 +145,37 @@ async function signOutCustomer() {
 }
 function resolveConfig(config) {
   const catalogPath = config.home ? "/catalog" : "/";
+  const commerceMode = config.commerceMode ?? "checkout";
+  const checkoutEnabled = commerceMode === "checkout";
   return {
     ...config,
     currency: config.currency ?? "BRL",
     locale: config.locale ?? "pt-BR",
     shipping: { flatRate: config.shipping?.flatRate ?? 0, freeAbove: config.shipping?.freeAbove },
     payments: { mode: config.payments?.mode ?? "mock" },
+    commerceMode,
+    enquiry: {
+      label: config.enquiry?.label ?? "Contact me",
+      successMessage: config.enquiry?.successMessage ?? "Thanks. We received your enquiry.",
+      subjectPrefix: config.enquiry?.subjectPrefix ?? "Product enquiry",
+      email: config.enquiry?.email,
+      whatsappUrl: config.enquiry?.whatsappUrl,
+      requirePhone: config.enquiry?.requirePhone
+    },
     features: {
       // Auto-enable the coupon UI when the store actually ships discount codes
       // (via config.discounts or a seeded catalog), unless explicitly overridden —
       // otherwise a store can advertise a coupon with no field to enter it.
       discounts: config.features?.discounts ?? Boolean(config.discounts?.length || config.catalog?.discounts?.length),
-      accounts: config.features?.accounts ?? true
+      accounts: config.features?.accounts ?? checkoutEnabled,
+      cart: config.features?.cart ?? checkoutEnabled,
+      checkout: config.features?.checkout ?? checkoutEnabled
+    },
+    imageLoading: {
+      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
     },
     catalogPath,
     nav: config.nav ?? (config.home ? [
@@ -148,20 +184,26 @@ function resolveConfig(config) {
     ] : [{ label: "Loja", to: "/" }])
   };
 }
-var StorefrontConfigContext = React18.createContext(null);
+var StorefrontConfigContext = React6.createContext(null);
 var StorefrontConfigProvider = StorefrontConfigContext.Provider;
 function useStorefrontConfig() {
-  const ctx = React18.useContext(StorefrontConfigContext);
+  const ctx = React6.useContext(StorefrontConfigContext);
   if (!ctx) throw new Error("useStorefrontConfig must be used inside createStorefrontApp");
   return ctx;
 }
+function useStorefrontConfigOptional() {
+  return React6.useContext(StorefrontConfigContext);
+}
+function getStorefrontComponents(config) {
+  return config.components ?? {};
+}
 var adapter = core.hashRouterAdapter();
 function navigateTo(to) {
   adapter.navigate(to);
 }
 function useHashPath() {
-  const [path, setPath] = React18.useState(() => adapter.getCurrentPath() || "/");
-  React18.useEffect(() => {
+  const [path, setPath] = React6.useState(() => adapter.getCurrentPath() || "/");
+  React6.useEffect(() => {
     const unsub = adapter.onPathChange((p) => {
       setPath(p || "/");
       window.scrollTo(0, 0);
@@ -185,93 +227,7 @@ function matchPath(pattern, path) {
   return params;
 }
 function Link({ to, children, ...rest }) {
-  return React18__default.default.createElement("a", { href: `#${to}`, ...rest }, children);
-}
-var RADIUS_MAP = {
-  none: { button: "0px", card: "0px", input: "0px" },
-  soft: { button: "6px", card: "10px", input: "6px" },
-  round: { button: "10px", card: "16px", input: "10px" },
-  pill: { button: "999px", card: "20px", input: "999px" }
-};
-var COLOR_VAR_MAP = {
-  background: "--background",
-  foreground: "--foreground",
-  primary: "--primary",
-  primaryForeground: "--primary-foreground",
-  card: "--card",
-  cardForeground: "--card-foreground",
-  muted: "--muted",
-  mutedForeground: "--muted-foreground",
-  border: "--border",
-  headerBackground: "--sf-header-bg",
-  headerForeground: "--sf-header-fg",
-  announcementBackground: "--sf-announcement-bg",
-  announcementForeground: "--sf-announcement-fg"
-};
-function themeToCss(theme) {
-  const lines = [];
-  for (const [key, cssVar] of Object.entries(COLOR_VAR_MAP)) {
-    const value = theme.colors?.[key];
-    if (value) lines.push(`${cssVar}: ${value};`);
-  }
-  if (!theme.colors?.headerBackground && theme.colors?.background) {
-    lines.push(`--sf-header-bg: ${theme.colors.background};`);
-  }
-  if (!theme.colors?.headerForeground && theme.colors?.foreground) {
-    lines.push(`--sf-header-fg: ${theme.colors.foreground};`);
-  }
-  if (theme.font) {
-    const fallback = theme.font.fallback ?? "sans-serif";
-    lines.push(`--font-family: '${theme.font.body}', ${fallback};`);
-    lines.push(`--sf-font-heading: '${theme.font.heading}', ${fallback};`);
-  }
-  const radius = RADIUS_MAP[theme.radius ?? "soft"];
-  lines.push(`--button-radius: ${radius.button};`);
-  lines.push(`--card-radius: ${radius.card};`);
-  lines.push(`--input-radius: ${radius.input};`);
-  lines.push(`--sf-radius-button: ${radius.button};`);
-  lines.push(`--sf-radius-card: ${radius.card};`);
-  lines.push(`--sf-radius-input: ${radius.input};`);
-  let css = `:root {
-  ${lines.join("\n  ")}
-}
-`;
-  css += `body { font-family: var(--font-family); }
-`;
-  css += `h1, h2, h3, h4, .sf-heading { font-family: var(--sf-font-heading, var(--font-family)); }
-`;
-  if (theme.uppercaseButtons) {
-    css += `.sf-cta { text-transform: uppercase; letter-spacing: 0.08em; }
-`;
-  }
-  if (theme.header?.uppercaseNav) {
-    css += `.sf-nav-link { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8rem; }
-`;
-  }
-  return css;
-}
-function googleFontsHref(theme) {
-  if (!theme.font) return null;
-  const families = theme.font.googleFonts ?? [theme.font.heading, theme.font.body];
-  const unique = [...new Set(families)];
-  const params = unique.map((f) => `family=${encodeURIComponent(f).replace(/%20/g, "+")}:wght@300;400;500;600;700`).join("&");
-  return `https://fonts.googleapis.com/css2?${params}&display=swap`;
-}
-function StorefrontThemeStyle({ theme }) {
-  const fontsHref = googleFontsHref(theme);
-  React18.useEffect(() => {
-    if (!fontsHref) return;
-    const id = "sf-theme-fonts";
-    let link = document.getElementById(id);
-    if (!link) {
-      link = document.createElement("link");
-      link.id = id;
-      link.rel = "stylesheet";
-      document.head.appendChild(link);
-    }
-    link.href = fontsHref;
-  }, [fontsHref]);
-  return React18__default.default.createElement("style", { "data-sf-theme": theme.name }, themeToCss(theme));
+  return React6__default.default.createElement("a", { href: `#${to}`, ...rest }, children);
 }
 
 // src/format.ts
@@ -325,7 +281,7 @@ function productOptionSelectionKey(selection) {
 // src/stores/cart.store.ts
 var useCartStore = zustand.create()(
   middleware.persist(
-    (set) => ({
+    (set, get) => ({
       lines: [],
       discountCode: null,
       discountPercent: 0,
@@ -377,7 +333,16 @@ var useCartStore = zustand.create()(
       clearDiscount: () => set({ discountCode: null, discountPercent: 0 }),
       clear: () => set({ lines: [], discountCode: null, discountPercent: 0 }),
       openDrawer: () => set({ isOpen: true }),
-      closeDrawer: () => set({ isOpen: false, justAddedLineId: null })
+      closeDrawer: () => set({ isOpen: false, justAddedLineId: null }),
+      reconcile: async (resolve) => {
+        const lines = get().lines;
+        if (lines.length === 0) return;
+        const keep = await Promise.all(
+          lines.map((line) => resolve(line).catch(() => true))
+        );
+        const kept = lines.filter((_, i) => keep[i]);
+        if (kept.length !== lines.length) set({ lines: kept });
+      }
     }),
     {
       name: "fayz.storefront.cart.v1",
@@ -399,6 +364,102 @@ var selectShipping = (s, cfg) => {
   return cfg.shipping.flatRate;
 };
 var selectTotal = (s, cfg) => roundCents(selectSubtotal(s) - selectDiscountTotal(s) + selectShipping(s, cfg));
+var RADIUS_MAP = {
+  none: { button: "0px", card: "0px", input: "0px" },
+  soft: { button: "6px", card: "10px", input: "6px" },
+  round: { button: "10px", card: "16px", input: "10px" },
+  pill: { button: "999px", card: "20px", input: "999px" }
+};
+var COLOR_VAR_MAP = {
+  background: "--background",
+  foreground: "--foreground",
+  primary: "--primary",
+  primaryForeground: "--primary-foreground",
+  card: "--card",
+  cardForeground: "--card-foreground",
+  muted: "--muted",
+  mutedForeground: "--muted-foreground",
+  border: "--border",
+  headerBackground: "--sf-header-bg",
+  headerForeground: "--sf-header-fg",
+  announcementBackground: "--sf-announcement-bg",
+  announcementForeground: "--sf-announcement-fg",
+  accent: "--sf-accent",
+  accentForeground: "--sf-accent-foreground"
+};
+function themeToCss(theme) {
+  const lines = [];
+  for (const [key, cssVar] of Object.entries(COLOR_VAR_MAP)) {
+    const value = theme.colors?.[key];
+    if (value) lines.push(`${cssVar}: ${value};`);
+  }
+  if (!theme.colors?.headerBackground && theme.colors?.background) {
+    lines.push(`--sf-header-bg: ${theme.colors.background};`);
+  }
+  if (!theme.colors?.headerForeground && theme.colors?.foreground) {
+    lines.push(`--sf-header-fg: ${theme.colors.foreground};`);
+  }
+  if (theme.font) {
+    const fallback = theme.font.fallback ?? "sans-serif";
+    lines.push(`--font-family: '${theme.font.body}', ${fallback};`);
+    lines.push(`--sf-font-heading: '${theme.font.heading}', ${fallback};`);
+    if (theme.font.display) lines.push(`--sf-font-display: '${theme.font.display}', ${fallback};`);
+    if (theme.font.serif) lines.push(`--sf-font-serif: '${theme.font.serif}', serif;`);
+  }
+  for (const [key, value] of Object.entries(theme.tokens ?? {})) {
+    const name = key.startsWith("--") ? key : `--${key}`;
+    lines.push(`${name}: ${value};`);
+  }
+  const radius = RADIUS_MAP[theme.radius ?? "soft"];
+  lines.push(`--button-radius: ${radius.button};`);
+  lines.push(`--card-radius: ${radius.card};`);
+  lines.push(`--input-radius: ${radius.input};`);
+  lines.push(`--sf-radius-button: ${radius.button};`);
+  lines.push(`--sf-radius-card: ${radius.card};`);
+  lines.push(`--sf-radius-input: ${radius.input};`);
+  let css = `:root {
+  ${lines.join("\n  ")}
+}
+`;
+  css += `body { font-family: var(--font-family); }
+`;
+  css += `h1, h2, h3, h4, .sf-heading { font-family: var(--sf-font-heading, var(--font-family)); }
+`;
+  if (theme.uppercaseButtons) {
+    css += `.sf-cta { text-transform: uppercase; letter-spacing: 0.08em; }
+`;
+  }
+  if (theme.header?.uppercaseNav) {
+    css += `.sf-nav-link { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8rem; }
+`;
+  }
+  return css;
+}
+function googleFontsHref(theme) {
+  if (!theme.font) return null;
+  const families = theme.font.googleFonts ?? [theme.font.heading, theme.font.body, theme.font.display, theme.font.serif].filter(
+    (f) => Boolean(f)
+  );
+  const unique = [...new Set(families)];
+  const params = unique.map((f) => `family=${encodeURIComponent(f).replace(/%20/g, "+")}:wght@300;400;500;600;700`).join("&");
+  return `https://fonts.googleapis.com/css2?${params}&display=swap`;
+}
+function StorefrontThemeStyle({ theme }) {
+  const fontsHref = googleFontsHref(theme);
+  React6.useEffect(() => {
+    if (!fontsHref) return;
+    const id = "sf-theme-fonts";
+    let link = document.getElementById(id);
+    if (!link) {
+      link = document.createElement("link");
+      link.id = id;
+      link.rel = "stylesheet";
+      document.head.appendChild(link);
+    }
+    link.href = fontsHref;
+  }, [fontsHref]);
+  return React6__default.default.createElement("style", { "data-sf-theme": theme.name }, themeToCss(theme));
+}
 var initial = {
   search: "",
   categoryId: null,
@@ -418,9 +479,9 @@ var useCatalogStore = zustand.create()((set) => ({
   reset: () => set(initial)
 }));
 function useCategories() {
-  const [categories, setCategories] = React18.useState([]);
-  const [loading, setLoading] = React18.useState(true);
-  React18.useEffect(() => {
+  const [categories, setCategories] = React6.useState([]);
+  const [loading, setLoading] = React6.useState(true);
+  React6.useEffect(() => {
     let cancelled = false;
     runtime.getShopProvider().listCategories().then((data) => {
       if (!cancelled) setCategories(data);
@@ -439,9 +500,9 @@ function prefersReducedMotion() {
   return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 }
 function useInView(margin = "0px 0px -8% 0px") {
-  const ref = React18.useRef(null);
-  const [inView, setInView] = React18.useState(() => prefersReducedMotion());
-  React18.useEffect(() => {
+  const ref = React6.useRef(null);
+  const [inView, setInView] = React6.useState(() => prefersReducedMotion());
+  React6.useEffect(() => {
     if (inView) return;
     const el = ref.current;
     if (!el || typeof IntersectionObserver === "undefined") {
@@ -476,8 +537,8 @@ function Reveal({ delay = 0, children, className, style, ...rest }) {
   );
 }
 function useScrolled(threshold = 8) {
-  const [scrolled, setScrolled] = React18.useState(false);
-  React18.useEffect(() => {
+  const [scrolled, setScrolled] = React6.useState(false);
+  React6.useEffect(() => {
     const onScroll = () => setScrolled(window.scrollY > threshold);
     onScroll();
     window.addEventListener("scroll", onScroll, { passive: true });
@@ -486,9 +547,9 @@ function useScrolled(threshold = 8) {
   return scrolled;
 }
 function usePopOnChange(value) {
-  const [pop, setPop] = React18.useState(false);
-  const prev = React18.useRef(value);
-  React18.useEffect(() => {
+  const [pop, setPop] = React6.useState(false);
+  const prev = React6.useRef(value);
+  React6.useEffect(() => {
     if (prev.current !== value && value > 0) {
       setPop(true);
       const t = setTimeout(() => setPop(false), 400);
@@ -497,7 +558,7 @@ function usePopOnChange(value) {
     prev.current = value;
     return void 0;
   }, [value]);
-  React18.useEffect(() => {
+  React6.useEffect(() => {
     prev.current = value;
   });
   return pop;
@@ -507,6 +568,7 @@ function usePopOnChange(value) {
 var TID = {
   // header
   headerSearch: "header-search",
+  headerSearchToggle: "header-search-toggle",
   cartButton: "cart-button",
   cartCount: "cart-count",
   accountLink: "account-link",
@@ -519,6 +581,13 @@ var TID = {
   hero: "home-hero",
   heroPrev: "hero-prev",
   heroNext: "hero-next",
+  mediaCarousel: "media-carousel",
+  mediaCarouselPrev: "media-carousel-prev",
+  mediaCarouselNext: "media-carousel-next",
+  productSlider: "product-slider",
+  productSliderViewport: "product-slider-viewport",
+  productSliderPrev: "product-slider-prev",
+  productSliderNext: "product-slider-next",
   categoryShowcase: "category-showcase",
   productRail: "product-rail",
   benefits: "benefits-row",
@@ -553,6 +622,19 @@ var TID = {
   productOptionValue: (id, value) => `product-option-${id.toLowerCase().replace(/\s+/g, "-")}-${value.toLowerCase().replace(/\s+/g, "-")}`,
   pdpQtyInput: "pdp-qty-input",
   pdpAddToCart: "pdp-add-to-cart",
+  pdpRoot: "pdp-root",
+  pdpGallery: "pdp-gallery",
+  pdpActions: "pdp-actions",
+  pdpEnquiryButton: "pdp-enquiry-button",
+  enquiryForm: "enquiry-form",
+  enquiryName: "enquiry-name",
+  enquiryEmail: "enquiry-email",
+  enquiryPhone: "enquiry-phone",
+  enquirySubject: "enquiry-subject",
+  enquiryMessage: "enquiry-message",
+  enquirySubmit: "enquiry-submit",
+  enquirySuccess: "enquiry-success",
+  enquiryError: "enquiry-error",
   // cart
   cartDrawer: "cart-drawer",
   cartLine: "cart-line",
@@ -616,7 +698,7 @@ var headerDivider = {
 var ANNOUNCEMENT_KEY = "fayz.storefront.announcement.dismissed";
 function AnnouncementBar() {
   const config = useStorefrontConfig();
-  const [dismissed, setDismissed] = React18.useState(() => {
+  const [dismissed, setDismissed] = React6.useState(() => {
     try {
       return localStorage.getItem(ANNOUNCEMENT_KEY) === config.announcement;
     } catch {
@@ -675,12 +757,26 @@ function UtilityBar() {
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto flex items-center gap-4", children: social?.map((s) => /* @__PURE__ */ jsxRuntime.jsx("a", { href: s.href, target: "_blank", rel: "noreferrer", className: "hover:underline", children: s.label }, s.href)) })
   ] }) });
 }
-function SearchInput({ className }) {
+function SearchInput({ className, iconOnly = false }) {
   const config = useStorefrontConfig();
   const search = useCatalogStore((s) => s.search);
   const setSearch = useCatalogStore((s) => s.setSearch);
   const path = useHashPath();
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative ${className ?? ""}`, children: [
+  const [open, setOpen] = React6.useState(false);
+  if (iconOnly && !open) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Buscar produtos",
+        "data-testid": TID.headerSearchToggle,
+        onClick: () => setOpen(true),
+        className: "rounded-full p-2.5 transition-opacity hover:opacity-70",
+        children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Search, { className: "h-5 w-5" })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative ${iconOnly ? "w-full max-w-xs" : className ?? ""}`, children: [
     /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Search, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 opacity-60" }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "input",
@@ -689,10 +785,17 @@ function SearchInput({ className }) {
         type: "search",
         placeholder: "Buscar produtos...",
         value: search,
+        autoFocus: iconOnly,
         onChange: (e) => {
           setSearch(e.target.value);
           if (path !== config.catalogPath) navigateTo(config.catalogPath);
         },
+        onKeyDown: (e) => {
+          if (e.key === "Escape" && iconOnly) setOpen(false);
+        },
+        onBlur: () => {
+          if (iconOnly && !search) setOpen(false);
+        },
         className: "w-full border bg-white/10 py-2 pl-9 pr-4 text-sm outline-none transition-colors placeholder:opacity-60 focus:border-primary focus:bg-white focus:text-gray-900",
         style: {
           borderRadius: "var(--sf-radius-input)",
@@ -707,7 +810,7 @@ function HeaderActions() {
   const count = useCartStore(selectCount);
   const openDrawer = useCartStore((s) => s.openDrawer);
   const session = useSessionStore();
-  const [accountOpen, setAccountOpen] = React18.useState(false);
+  const [accountOpen, setAccountOpen] = React6.useState(false);
   const pop = usePopOnChange(count);
   const firstName = session.name?.split(/\s+/)[0];
   const initial2 = (firstName ?? session.email ?? "C").slice(0, 1).toUpperCase();
@@ -780,7 +883,7 @@ function HeaderActions() {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(
+    config.features.cart && /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
         type: "button",
@@ -807,12 +910,13 @@ function NavLinks({ className }) {
   const config = useStorefrontConfig();
   const { categories } = useCategories();
   const setCategoryId = useCatalogStore((s) => s.setCategoryId);
+  const showCategories = config.theme?.header?.showCategories !== false;
   const goCategory = (categoryId) => {
     useCatalogStore.getState().reset();
     setCategoryId(categoryId);
     navigateTo(config.catalogPath);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: `flex items-center gap-6 ${className ?? ""}`, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: `flex min-w-max items-center gap-6 ${className ?? ""}`, children: [
     config.nav.map((link) => /* @__PURE__ */ jsxRuntime.jsx(
       Link,
       {
@@ -823,7 +927,7 @@ function NavLinks({ className }) {
       },
       link.to
     )),
-    categories.slice(0, 6).map((c) => /* @__PURE__ */ jsxRuntime.jsxs(
+    showCategories && categories.slice(0, 6).map((c) => /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
         type: "button",
@@ -843,6 +947,8 @@ function StorefrontHeader() {
   const config = useStorefrontConfig();
   const variant = config.theme?.header?.variant ?? "classic";
   const scrolled = useScrolled();
+  const showSearch = config.theme?.header?.showSearch !== false;
+  const iconSearch = config.theme?.header?.searchStyle === "icon";
   const logo = /* @__PURE__ */ jsxRuntime.jsx(Link, { to: "/", className: "sf-heading shrink-0 text-xl font-bold tracking-tight", children: config.logo ?? config.name });
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "header",
@@ -856,21 +962,21 @@ function StorefrontHeader() {
           // Rio/Flex pattern: centered logo row, nav row below
           /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto grid h-16 max-w-7xl grid-cols-[1fr_auto_1fr] items-center px-4 sm:px-6", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(SearchInput, { className: "hidden w-full max-w-xs sm:block" }),
+              showSearch ? /* @__PURE__ */ jsxRuntime.jsx(SearchInput, { iconOnly: iconSearch, className: "hidden w-full max-w-xs sm:block" }) : /* @__PURE__ */ jsxRuntime.jsx("div", {}),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center", children: logo }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "justify-self-end", children: /* @__PURE__ */ jsxRuntime.jsx(HeaderActions, {}) })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden justify-center border-t py-2.5 sm:flex", style: headerDivider, children: /* @__PURE__ */ jsxRuntime.jsx(NavLinks, {}) })
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex overflow-x-auto border-t py-2.5 sm:justify-center", style: headerDivider, children: /* @__PURE__ */ jsxRuntime.jsx(NavLinks, {}) })
           ] })
         ) : variant === "search" ? (
           // Brasília pattern: prominent search left, logo center, actions right; nav row below
           /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto grid h-16 max-w-7xl grid-cols-[1fr_auto_1fr] items-center gap-6 px-4 sm:px-6", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(SearchInput, { className: "hidden w-full max-w-sm sm:block" }),
+              showSearch ? /* @__PURE__ */ jsxRuntime.jsx(SearchInput, { iconOnly: iconSearch, className: "hidden w-full max-w-sm sm:block" }) : /* @__PURE__ */ jsxRuntime.jsx("div", {}),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center", children: logo }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "justify-self-end", children: /* @__PURE__ */ jsxRuntime.jsx(HeaderActions, {}) })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden border-t sm:block", style: headerDivider, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto max-w-7xl px-4 py-2.5 sm:px-6", children: /* @__PURE__ */ jsxRuntime.jsx(NavLinks, {}) }) })
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto border-t", style: headerDivider, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto max-w-7xl px-4 py-2.5 sm:px-6", children: /* @__PURE__ */ jsxRuntime.jsx(NavLinks, {}) }) })
           ] })
         ) : variant === "minimal" ? (
           // Uyuni pattern: nav left, centered logo, actions right — single compact row
@@ -878,17 +984,19 @@ function StorefrontHeader() {
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-5", children: /* @__PURE__ */ jsxRuntime.jsx(NavLinks, { className: "hidden sm:flex" }) }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center", children: logo }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-3", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(SearchInput, { className: "hidden w-44 lg:block" }),
+              showSearch && /* @__PURE__ */ jsxRuntime.jsx(SearchInput, { iconOnly: iconSearch, className: "hidden w-44 lg:block" }),
               /* @__PURE__ */ jsxRuntime.jsx(HeaderActions, {})
             ] })
           ] })
         ) : (
-          // classic: logo left, search center-right, actions right (original layout)
+          // classic: logo left, nav, then a right-aligned search + actions cluster
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto flex h-16 max-w-7xl items-center gap-6 px-4 sm:px-6", children: [
             logo,
             /* @__PURE__ */ jsxRuntime.jsx(NavLinks, { className: "hidden md:flex" }),
-            /* @__PURE__ */ jsxRuntime.jsx(SearchInput, { className: "ml-auto hidden w-full max-w-sm sm:block" }),
-            /* @__PURE__ */ jsxRuntime.jsx(HeaderActions, {})
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-auto flex items-center gap-2 sm:gap-3", children: [
+              showSearch && /* @__PURE__ */ jsxRuntime.jsx(SearchInput, { iconOnly: iconSearch, className: iconSearch ? "" : "hidden w-full max-w-sm sm:block" }),
+              /* @__PURE__ */ jsxRuntime.jsx(HeaderActions, {})
+            ] })
           ] })
         )
       ]
@@ -900,6 +1008,17 @@ function StorefrontFooter() {
   const { categories } = useCategories();
   const visibleCategories = categories.slice(0, 8);
   const hiddenCategoryCount = Math.max(categories.length - visibleCategories.length, 0);
+  const labels = {
+    categories: "Departamentos",
+    navigation: "Navega\xE7\xE3o",
+    contact: "Contato",
+    viewAll: "Ver todos",
+    purchases: "Minhas compras",
+    privacy: "Privacidade",
+    terms: "Termos",
+    returns: "Trocas e devolu\xE7\xF5es",
+    ...config.footer?.labels
+  };
   const goCategory = (categoryId) => {
     useCatalogStore.getState().reset();
     useCatalogStore.getState().setCategoryId(categoryId);
@@ -912,7 +1031,7 @@ function StorefrontFooter() {
         config.footer?.about && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-3 text-sm leading-relaxed text-muted-foreground", children: config.footer.about })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground", children: "Departamentos" }),
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground", children: labels.categories }),
         /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: "space-y-2 text-sm", children: [
           visibleCategories.map((c) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
             "button",
@@ -924,21 +1043,22 @@ function StorefrontFooter() {
             }
           ) }, c.id)),
           hiddenCategoryCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(Link, { to: config.catalogPath, className: "font-medium underline-offset-2 transition-opacity hover:underline", children: [
-            "Ver todos (",
+            labels.viewAll,
+            " (",
             categories.length,
             ")"
           ] }) })
         ] })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground", children: "Navega\xE7\xE3o" }),
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground", children: labels.navigation }),
         /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: "space-y-2 text-sm", children: [
           config.nav.map((link) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(Link, { to: link.to, className: "transition-opacity hover:opacity-70", children: link.label }) }, link.to)),
-          /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(Link, { to: "/account", className: "transition-opacity hover:opacity-70", children: "Minhas compras" }) })
+          config.features.accounts && /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(Link, { to: "/account", className: "transition-opacity hover:opacity-70", children: labels.purchases }) })
         ] })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground", children: "Contato" }),
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground", children: labels.contact }),
         /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: "space-y-2 text-sm text-muted-foreground", children: [
           config.footer?.contact?.phone && /* @__PURE__ */ jsxRuntime.jsx("li", { children: config.footer.contact.phone }),
           config.footer?.contact?.email && /* @__PURE__ */ jsxRuntime.jsx("li", { children: config.footer.contact.email }),
@@ -949,17 +1069,15 @@ function StorefrontFooter() {
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto flex max-w-7xl flex-col items-center gap-3 px-4 py-5 text-xs text-muted-foreground sm:flex-row sm:justify-between sm:px-6", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: "flex flex-wrap items-center justify-center gap-x-5 gap-y-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Link, { to: "/privacy", className: "transition-colors hover:text-foreground", children: "Privacidade" }),
-        /* @__PURE__ */ jsxRuntime.jsx(Link, { to: "/terms", className: "transition-colors hover:text-foreground", children: "Termos" }),
-        /* @__PURE__ */ jsxRuntime.jsx(Link, { to: "/refunds", className: "transition-colors hover:text-foreground", children: "Trocas e devolu\xE7\xF5es" })
+        /* @__PURE__ */ jsxRuntime.jsx(Link, { to: "/privacy", className: "transition-colors hover:text-foreground", children: labels.privacy }),
+        /* @__PURE__ */ jsxRuntime.jsx(Link, { to: "/terms", className: "transition-colors hover:text-foreground", children: labels.terms }),
+        /* @__PURE__ */ jsxRuntime.jsx(Link, { to: "/refunds", className: "transition-colors hover:text-foreground", children: labels.returns })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center", children: config.footer?.credit ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         "\xA9 ",
         config.name,
-        " \u2014 powered by Fayz \xB7 Fotos:",
-        " ",
-        /* @__PURE__ */ jsxRuntime.jsx("a", { href: "https://unsplash.com", target: "_blank", rel: "noreferrer", className: "underline-offset-2 hover:underline", children: "Unsplash" })
-      ] })
+        " \u2014 powered by Fayz"
+      ] }) })
     ] }) })
   ] });
 }
@@ -971,7 +1089,7 @@ var REASON_MESSAGE = {
 };
 function useDiscountValidator() {
   const config = useStorefrontConfig();
-  return React18.useCallback(async (code) => {
+  return React6.useCallback(async (code) => {
     const normalized = code.trim().toUpperCase();
     if (!normalized) return { valid: false, percent: 0, message: "Informe um cupom." };
     const configDiscount = config.discounts?.find((d) => d.code.trim().toUpperCase() === normalized);
@@ -1052,14 +1170,61 @@ function QuantityInput({ value, onChange, min = 1, max, testId, incTestId, decTe
     )
   ] });
 }
+function SmoothImage({
+  imageLoading,
+  loading = "lazy",
+  decoding = "async",
+  onLoad,
+  style,
+  ...props
+}) {
+  const config = useStorefrontConfigOptional();
+  const resolved = {
+    ...config?.imageLoading,
+    ...imageLoading
+  };
+  const mode = resolved.mode ?? "fade";
+  const durationMs = resolved.durationMs ?? 420;
+  const easing = resolved.easing ?? "cubic-bezier(0.22, 1, 0.36, 1)";
+  const blur = resolved.blur ?? true;
+  const ref = React6__default.default.useRef(null);
+  const [loaded, setLoaded] = React6__default.default.useState(mode === "none");
+  React6__default.default.useEffect(() => {
+    if (mode === "none") {
+      setLoaded(true);
+      return;
+    }
+    if (ref.current?.complete && ref.current.naturalWidth > 0) setLoaded(true);
+  }, [mode, props.src]);
+  const revealStyle = mode === "none" ? {} : {
+    opacity: loaded ? 1 : 0,
+    filter: blur && !loaded ? "blur(10px)" : "blur(0px)",
+    transition: `opacity ${durationMs}ms ${easing}, filter ${durationMs}ms ${easing}, transform ${durationMs}ms ${easing}`
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      ...props,
+      ref,
+      loading,
+      decoding,
+      "data-sf-image-loaded": loaded ? "true" : "false",
+      style: { ...style, ...revealStyle },
+      onLoad: (event) => {
+        setLoaded(true);
+        onLoad?.(event);
+      }
+    }
+  );
+}
 function CartDrawer() {
   const config = useStorefrontConfig();
   const cart = useCartStore();
   const validate = useDiscountValidator();
-  const [code, setCode] = React18.useState("");
-  const [discountError, setDiscountError] = React18.useState(null);
-  const [applying, setApplying] = React18.useState(false);
-  React18.useEffect(() => {
+  const [code, setCode] = React6.useState("");
+  const [discountError, setDiscountError] = React6.useState(null);
+  const [applying, setApplying] = React6.useState(false);
+  React6.useEffect(() => {
     if (!cart.isOpen) return;
     const onKey = (e) => {
       if (e.key === "Escape") cart.closeDrawer();
@@ -1151,7 +1316,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__ */ jsxRuntime.jsx("img", { src: line.imageUrl, alt: line.name, className: "h-20 w-20 shrink-0 rounded-lg border object-cover" }),
+                  line.imageUrl && /* @__PURE__ */ jsxRuntime.jsx(SmoothImage, { src: line.imageUrl, alt: line.name, className: "h-20 w-20 shrink-0 rounded-lg border object-cover" }),
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col", children: [
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-2", children: [
                       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium leading-snug", children: line.name }),
@@ -1282,12 +1447,12 @@ function CartDrawer() {
   ] });
 }
 function useProducts(opts) {
-  const [products, setProducts] = React18.useState([]);
-  const [loading, setLoading] = React18.useState(true);
-  const [error, setError] = React18.useState(null);
-  const [nonce, setNonce] = React18.useState(0);
+  const [products, setProducts] = React6.useState([]);
+  const [loading, setLoading] = React6.useState(true);
+  const [error, setError] = React6.useState(null);
+  const [nonce, setNonce] = React6.useState(0);
   const key = JSON.stringify(opts);
-  React18.useEffect(() => {
+  React6.useEffect(() => {
     let cancelled = false;
     setLoading(true);
     runtime.getShopProvider().listProducts(JSON.parse(key)).then((data) => {
@@ -1321,36 +1486,91 @@ function Price({ value, compareAt, testId, compareTestId, className }) {
   ] });
 }
 
-// src/slot-contracts.ts
-var productCardSlotContract = {
+// src/component-selectors.ts
+var productCardComponentContract = {
   root: { "data-testid": TID.productCard },
   name: { "data-testid": TID.productCardName },
   priceTestId: TID.productCardPrice,
   addButton: { "data-testid": TID.productCardAdd }
 };
-var storefrontSlotContracts = {
-  productCard: productCardSlotContract
+var storefrontComponentContracts = {
+  productCard: productCardComponentContract,
+  productDetail: {
+    root: { "data-testid": TID.pdpRoot },
+    gallery: { "data-testid": TID.pdpGallery },
+    name: { "data-testid": TID.pdpName },
+    description: { "data-testid": TID.pdpDescription },
+    actions: { "data-testid": TID.pdpActions },
+    addButton: { "data-testid": TID.pdpAddToCart },
+    enquiryButton: { "data-testid": TID.pdpEnquiryButton },
+    enquiryForm: { "data-testid": TID.enquiryForm }
+  }
 };
-function ProductCard({ product }) {
+function useStorefront() {
+  return useStorefrontConfig();
+}
+function useCatalog() {
   const config = useStorefrontConfig();
-  const addItem = useCartStore((s) => s.addItem);
+  const catalog = useCatalogStore();
+  return {
+    ...catalog,
+    catalogPath: config.catalogPath,
+    config
+  };
+}
+function useCart() {
+  return useCartStore();
+}
+function useEnquiry() {
+  const config = useStorefrontConfig();
+  const createProductEnquiry = async (input) => {
+    const provider = runtime.getShopProvider();
+    if (!provider.createProductEnquiry) {
+      throw new Error("The active shop provider does not support product enquiries.");
+    }
+    return provider.createProductEnquiry(input);
+  };
+  return {
+    enquiry: config.enquiry,
+    createProductEnquiry
+  };
+}
+function useStorefrontActions() {
+  const addItem = useCartStore((state) => state.addItem);
+  const openDrawer = useCartStore((state) => state.openDrawer);
+  const closeDrawer = useCartStore((state) => state.closeDrawer);
+  const { createProductEnquiry } = useEnquiry();
+  return {
+    navigateTo,
+    addToCart: (product, quantity, options) => addItem(product, quantity, options),
+    openCart: openDrawer,
+    closeCart: closeDrawer,
+    createProductEnquiry
+  };
+}
+function ProductCard({ product, config: providedConfig, actions: providedActions }) {
+  const runtimeConfig = useStorefrontConfig();
+  const runtimeActions = useStorefrontActions();
+  const config = providedConfig ?? runtimeConfig;
+  const actions = providedActions ?? runtimeActions;
   const hasOptions = getProductOptionGroups(product).length > 0;
   const soldOut = product.inventoryCount <= 0;
   const onSale = product.compareAtPrice != null && product.compareAtPrice > product.price;
   const image = product.images.find((i) => i.isPrimary) ?? product.images[0];
   const cardStyle = config.theme?.productCard?.style ?? "card";
   const aspect = config.theme?.productCard?.imageAspect === "portrait" ? "aspect-[3/4]" : "aspect-square";
+  const purchaseMode = config.commerceMode === "checkout";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      ...productCardSlotContract.root,
+      ...productCardComponentContract.root,
       "data-slug": product.slug,
       className: `group flex flex-col overflow-hidden transition-all duration-300 ${cardStyle === "editorial" ? "hover:-translate-y-1" : "border bg-card hover:-translate-y-1 hover:shadow-lg"}`,
       style: { borderRadius: "var(--sf-radius-card)" },
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs(Link, { to: `/product/${product.slug}`, className: `relative block ${aspect} overflow-hidden bg-muted`, style: { borderRadius: cardStyle === "editorial" ? "var(--sf-radius-card)" : void 0 }, children: [
           image && /* @__PURE__ */ jsxRuntime.jsx(
-            "img",
+            SmoothImage,
             {
               src: image.url,
               alt: image.altText ?? product.name,
@@ -1383,33 +1603,37 @@ function ProductCard({ product }) {
             Link,
             {
               to: `/product/${product.slug}`,
-              ...productCardSlotContract.name,
+              ...productCardComponentContract.name,
               className: "font-medium leading-snug hover:underline",
               children: product.name
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-auto flex items-center justify-between pt-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-auto flex items-center justify-between gap-3 pt-2", children: [
+            purchaseMode ? /* @__PURE__ */ jsxRuntime.jsx(
               Price,
               {
                 value: product.price,
                 compareAt: product.compareAtPrice,
-                testId: productCardSlotContract.priceTestId
+                testId: productCardComponentContract.priceTestId
               }
-            ),
+            ) : /* @__PURE__ */ jsxRuntime.jsx("span", { "data-testid": productCardComponentContract.priceTestId, className: "text-sm text-muted-foreground", children: config.commerceMode === "enquiry" ? config.enquiry.label : "Ver detalhes" }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
                 type: "button",
-                ...productCardSlotContract.addButton,
-                disabled: soldOut,
-                "aria-label": hasOptions ? `Escolher op\xE7\xF5es de ${product.name}` : `Adicionar ${product.name} ao carrinho`,
+                ...productCardComponentContract.addButton,
+                disabled: purchaseMode && soldOut,
+                "aria-label": purchaseMode ? hasOptions ? `Escolher op\xE7\xF5es de ${product.name}` : `Adicionar ${product.name} ao carrinho` : `${config.enquiry.label} ${product.name}`,
                 onClick: () => {
+                  if (!purchaseMode) {
+                    navigateTo(`/product/${product.slug}`);
+                    return;
+                  }
                   if (hasOptions) {
                     navigateTo(`/product/${product.slug}`);
                     return;
                   }
-                  addItem(product);
+                  actions.addToCart(product);
                 },
                 className: "rounded-full border bg-background/90 p-2.5 text-foreground shadow-sm transition-all duration-200 hover:scale-110 hover:bg-primary hover:text-primary-foreground hover:shadow disabled:cursor-not-allowed disabled:opacity-40 lg:translate-y-1 lg:opacity-0 lg:group-hover:translate-y-0 lg:group-hover:opacity-100 lg:disabled:opacity-0 lg:group-hover:disabled:opacity-40",
                 children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ShoppingBag, { className: "h-4 w-4" })
@@ -1423,14 +1647,25 @@ function ProductCard({ product }) {
 }
 function ProductGrid({ products, loading }) {
   const config = useStorefrontConfig();
-  const ProductCardComponent = config.slots?.ProductCard ?? ProductCard;
+  const actions = useStorefrontActions();
+  const components = getStorefrontComponents(config);
+  const ProductCardComponent = components.ProductCard ?? ProductCard;
   if (loading) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": TID.productGrid, className: "grid grid-cols-2 gap-5 md:grid-cols-3 xl:grid-cols-4", children: Array.from({ length: 8 }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-[3/4] animate-pulse rounded-xl bg-muted" }, i)) });
   }
   if (products.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": TID.productGrid, className: "py-20 text-center text-muted-foreground", children: "Nenhum produto encontrado." });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": TID.productGrid, className: "grid grid-cols-2 gap-5 md:grid-cols-3 xl:grid-cols-4", children: products.map((p) => /* @__PURE__ */ jsxRuntime.jsx(ProductCardComponent, { product: p }, p.id)) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": TID.productGrid, className: "grid grid-cols-2 gap-5 md:grid-cols-3 xl:grid-cols-4", children: products.map((p) => /* @__PURE__ */ jsxRuntime.jsx(
+    ProductCardComponent,
+    {
+      product: p,
+      config,
+      commerceMode: config.commerceMode,
+      actions
+    },
+    p.id
+  )) });
 }
 function FiltersPanel() {
   const { categories } = useCategories();
@@ -1535,10 +1770,10 @@ function FiltersPanel() {
 }
 function useStorefrontHead(input) {
   const { title, description } = input;
-  React18.useEffect(() => {
+  React6.useEffect(() => {
     if (title) document.title = title;
   }, [title]);
-  React18.useEffect(() => {
+  React6.useEffect(() => {
     if (!description) return;
     let tag = document.head.querySelector('meta[name="description"]');
     if (!tag) {
@@ -1557,9 +1792,9 @@ var SORT_MAP = {
 };
 var SORTS = ["newest", "price-asc", "price-desc", "name"];
 function useCatalogUrlSync() {
-  const hydrated = React18.useRef(false);
+  const hydrated = React6.useRef(false);
   const catalog = useCatalogStore();
-  React18.useEffect(() => {
+  React6.useEffect(() => {
     if (hydrated.current) return;
     hydrated.current = true;
     const q = window.location.hash.split("?")[1];
@@ -1574,7 +1809,7 @@ function useCatalogUrlSync() {
     if (p.has("min")) s.setPriceMin(Number(p.get("min")) || null);
     if (p.has("max")) s.setPriceMax(Number(p.get("max")) || null);
   }, []);
-  React18.useEffect(() => {
+  React6.useEffect(() => {
     const p = new URLSearchParams();
     if (catalog.search) p.set("search", catalog.search);
     if (catalog.categoryId) p.set("category", catalog.categoryId);
@@ -1602,7 +1837,7 @@ function CatalogPage() {
     ...SORT_MAP[catalog.sort]
   };
   const { products, loading, error, reload } = useProducts(providerOpts);
-  const filtered = React18.useMemo(
+  const filtered = React6.useMemo(
     () => products.filter((p) => {
       if (catalog.priceMin != null && p.price < catalog.priceMin) return false;
       if (catalog.priceMax != null && p.price > catalog.priceMax) return false;
@@ -1667,10 +1902,17 @@ function HeroSection({
   slides,
   height = "tall"
 }) {
-  const [index, setIndex] = React18.useState(0);
-  const interacted = React18.useRef(false);
+  const [index, setIndex] = React6.useState(0);
+  const [loadedSlides, setLoadedSlides] = React6.useState({});
+  const config = useStorefrontConfig();
+  const interacted = React6.useRef(false);
   const hClass = height === "tall" ? "h-[72vh] min-h-[440px]" : "h-[48vh] min-h-[340px]";
-  React18.useEffect(() => {
+  const revealImages = config.imageLoading.mode !== "none";
+  const revealStyle = (loaded) => revealImages ? {
+    filter: config.imageLoading.blur && !loaded ? "blur(10px)" : "blur(0px)",
+    transition: `opacity 700ms ease, filter ${config.imageLoading.durationMs}ms ${config.imageLoading.easing}`
+  } : void 0;
+  React6.useEffect(() => {
     if (variant !== "slider" || slides.length < 2 || prefersReducedMotion()) return;
     const timer = setInterval(() => {
       if (!interacted.current) setIndex((i) => (i + 1) % slides.length);
@@ -1690,7 +1932,7 @@ function HeroSection({
         className: "group relative block h-[42vh] min-h-[320px] overflow-hidden",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            "img",
+            SmoothImage,
             {
               src: slideImage(slide, 900, 700),
               alt: slide.title,
@@ -1722,7 +1964,11 @@ function HeroSection({
         src: slideImage(slide),
         alt: slide.title,
         "aria-hidden": i !== index,
-        className: `absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ${i === index ? "animate-kenburns opacity-100" : "opacity-0"}`
+        loading: i === 0 ? "eager" : "lazy",
+        decoding: "async",
+        onLoad: () => setLoadedSlides((current) => ({ ...current, [i]: true })),
+        style: revealStyle(Boolean(loadedSlides[i])),
+        className: `absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ${i === index && (!revealImages || loadedSlides[i]) ? "animate-kenburns opacity-100" : "opacity-0"}`
       },
       i
     )),
@@ -1784,7 +2030,7 @@ function CategoryShowcase({ style, title }) {
       title && /* @__PURE__ */ jsxRuntime.jsx(Reveal, { children: /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "sf-heading mb-8 text-center text-3xl font-bold", children: title }) }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-start justify-center gap-8", children: categories.map((c, i) => /* @__PURE__ */ jsxRuntime.jsx(Reveal, { delay: i * 80, children: /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", onClick: () => go(c.id), className: "group flex w-28 flex-col items-center gap-3", children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block h-24 w-24 overflow-hidden rounded-full border-2 border-transparent shadow-sm transition-all duration-300 group-hover:scale-105 group-hover:border-primary group-hover:shadow-md", children: /* @__PURE__ */ jsxRuntime.jsx(
-          "img",
+          SmoothImage,
           {
             src: c.imageUrl ?? bannerPlaceholder(c.name, 30 + i * 70, 70 + i * 70, 200, 200),
             alt: c.name,
@@ -1799,7 +2045,7 @@ function CategoryShowcase({ style, title }) {
     title && /* @__PURE__ */ jsxRuntime.jsx(Reveal, { children: /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "sf-heading mb-8 text-center text-3xl font-bold", children: title }) }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-4 lg:grid-cols-4", children: categories.map((c, i) => /* @__PURE__ */ jsxRuntime.jsx(Reveal, { delay: i * 90, children: /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", onClick: () => go(c.id), className: "group relative block aspect-[4/5] w-full overflow-hidden", style: { borderRadius: "var(--sf-radius-card)" }, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        "img",
+        SmoothImage,
         {
           src: c.imageUrl ?? bannerPlaceholder(c.name, 30 + i * 70, 70 + i * 70, 480, 600),
           alt: c.name,
@@ -1821,11 +2067,13 @@ function ProductRail({
   limit = 4
 }) {
   const config = useStorefrontConfig();
-  const ProductCardComponent = config.slots?.ProductCard ?? ProductCard;
+  const actions = useStorefrontActions();
+  const components = getStorefrontComponents(config);
+  const ProductCardComponent = components.ProductCard ?? ProductCard;
   const { products, loading } = useProducts(
     filter === "new" ? { status: "active", orderBy: "created_at", order: "desc" } : { status: "active" }
   );
-  const visible = React18.useMemo(() => {
+  const visible = React6.useMemo(() => {
     let list = products;
     if (filter === "sale") list = list.filter((p) => p.compareAtPrice != null && p.compareAtPrice > p.price);
     return list.slice(0, limit);
@@ -1837,7 +2085,15 @@ function ProductRail({
       /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "sf-heading text-3xl font-bold tracking-tight", children: title }),
       subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-muted-foreground", children: subtitle })
     ] }),
-    loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-5 md:grid-cols-4", children: Array.from({ length: limit }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-[3/4] animate-pulse bg-muted", style: { borderRadius: "var(--sf-radius-card)" } }, i)) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-5 md:grid-cols-4", children: visible.map((p, i) => /* @__PURE__ */ jsxRuntime.jsx(Reveal, { delay: i * 90, children: /* @__PURE__ */ jsxRuntime.jsx(ProductCardComponent, { product: p }) }, p.id)) }),
+    loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-5 md:grid-cols-4", children: Array.from({ length: limit }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-[3/4] animate-pulse bg-muted", style: { borderRadius: "var(--sf-radius-card)" } }, i)) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-5 md:grid-cols-4", children: visible.map((p, i) => /* @__PURE__ */ jsxRuntime.jsx(Reveal, { delay: i * 90, children: /* @__PURE__ */ jsxRuntime.jsx(
+      ProductCardComponent,
+      {
+        product: p,
+        config,
+        commerceMode: config.commerceMode,
+        actions
+      }
+    ) }, p.id)) }),
     /* @__PURE__ */ jsxRuntime.jsx(Reveal, { className: "mt-10 text-center", delay: 200, children: /* @__PURE__ */ jsxRuntime.jsx(
       Link,
       {
@@ -1849,6 +2105,201 @@ function ProductRail({
     ) })
   ] });
 }
+var heightClass = {
+  medium: "h-[58vh] min-h-[420px]",
+  tall: "h-[74vh] min-h-[520px]",
+  screen: "min-h-[calc(100vh-64px)]"
+};
+var alignClass = {
+  start: "items-start text-left",
+  center: "items-center text-center",
+  end: "items-end text-right"
+};
+function MediaCarousel({
+  items,
+  height = "tall",
+  autoplayMs = 7e3,
+  overlay = "dark",
+  className = ""
+}) {
+  const [index, setIndex] = React6.useState(0);
+  const [loadedItems, setLoadedItems] = React6.useState({});
+  const config = useStorefrontConfig();
+  const interacted = React6.useRef(false);
+  const revealImages = config.imageLoading.mode !== "none";
+  const revealStyle = (loaded) => revealImages ? {
+    filter: config.imageLoading.blur && !loaded ? "blur(10px)" : "blur(0px)",
+    transition: `opacity 700ms ease, filter ${config.imageLoading.durationMs}ms ${config.imageLoading.easing}`
+  } : void 0;
+  React6.useEffect(() => {
+    if (items.length < 2 || autoplayMs <= 0 || prefersReducedMotion()) return;
+    const timer = setInterval(() => {
+      if (!interacted.current) setIndex((i) => (i + 1) % items.length);
+    }, autoplayMs);
+    return () => clearInterval(timer);
+  }, [autoplayMs, items.length]);
+  if (items.length === 0) return null;
+  const active = items[Math.min(index, items.length - 1)];
+  const goTo = (next) => {
+    interacted.current = true;
+    setIndex((next + items.length) % items.length);
+  };
+  const overlayClass = overlay === "dark" ? "bg-gradient-to-r from-black/70 via-black/25 to-black/25" : overlay === "soft" ? "bg-gradient-to-t from-black/45 via-black/10 to-transparent" : "";
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { "data-testid": TID.mediaCarousel, className: `relative isolate overflow-hidden ${heightClass[height]} ${className}`, children: [
+    items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src: item.image,
+        alt: item.imageAlt ?? item.title,
+        "aria-hidden": i !== index,
+        loading: i === 0 ? "eager" : "lazy",
+        decoding: "async",
+        onLoad: () => setLoadedItems((current) => ({ ...current, [i]: true })),
+        style: revealStyle(Boolean(loadedItems[i])),
+        className: `absolute inset-0 -z-10 h-full w-full object-cover transition-opacity duration-700 ${i === index && (!revealImages || loadedItems[i]) ? "opacity-100" : "opacity-0"}`
+      },
+      `${item.title}-${i}`
+    )),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `absolute inset-0 -z-10 ${overlayClass}` }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex h-full px-5 py-16 sm:px-10 lg:px-16 ${alignClass[active.align ?? "start"]}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-auto max-w-2xl text-white drop-shadow-md", children: [
+      active.eyebrow && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-4 text-xs font-semibold uppercase tracking-[0.24em] text-white/80", children: active.eyebrow }),
+      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "sf-heading text-5xl font-normal leading-[0.95] sm:text-7xl lg:text-8xl", children: active.title }),
+      active.subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-5 max-w-xl text-base leading-8 text-white/88 sm:text-lg", children: active.subtitle }),
+      active.cta && /* @__PURE__ */ jsxRuntime.jsx(
+        Link,
+        {
+          to: active.href ?? "/catalog",
+          className: "mt-8 inline-flex border border-white/75 px-6 py-3 text-xs font-semibold uppercase tracking-[0.18em] text-white transition hover:bg-white hover:text-black",
+          children: active.cta
+        }
+      )
+    ] }) }),
+    items.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Previous slide",
+          "data-testid": TID.mediaCarouselPrev,
+          onClick: () => goTo(index - 1),
+          className: "absolute left-4 top-1/2 inline-flex h-10 w-10 -translate-y-1/2 items-center justify-center border border-white/60 bg-black/20 text-white backdrop-blur transition hover:bg-white hover:text-black",
+          children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronLeft, { className: "h-5 w-5" })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Next slide",
+          "data-testid": TID.mediaCarouselNext,
+          onClick: () => goTo(index + 1),
+          className: "absolute right-4 top-1/2 inline-flex h-10 w-10 -translate-y-1/2 items-center justify-center border border-white/60 bg-black/20 text-white backdrop-blur transition hover:bg-white hover:text-black",
+          children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronRight, { className: "h-5 w-5" })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-5 left-1/2 flex -translate-x-1/2 gap-2", children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": `Go to slide ${i + 1}`,
+          onClick: () => goTo(i),
+          className: `h-2 rounded-full transition-all ${i === index ? "w-8 bg-white" : "w-2 bg-white/55 hover:bg-white"}`
+        },
+        `${item.title}-dot-${i}`
+      )) })
+    ] })
+  ] });
+}
+function ProductSlider({
+  title,
+  subtitle,
+  eyebrow,
+  filter = "all",
+  categoryName,
+  collection,
+  limit = 10,
+  cta = "View all",
+  href,
+  className = ""
+}) {
+  const config = useStorefrontConfig();
+  const actions = useStorefrontActions();
+  const viewportRef = React6.useRef(null);
+  const components = getStorefrontComponents(config);
+  const ProductCardComponent = components.ProductCard ?? ProductCard;
+  const { products, loading } = useProducts(
+    filter === "new" ? { status: "active", orderBy: "created_at", order: "desc" } : { status: "active" }
+  );
+  const visible = React6.useMemo(() => {
+    let list = products;
+    if (filter === "sale") list = list.filter((p) => p.compareAtPrice != null && p.compareAtPrice > p.price);
+    if (categoryName) list = list.filter((p) => p.categoryName === categoryName);
+    if (collection) list = list.filter((p) => p.metadata?.collection === collection);
+    return list.slice(0, limit);
+  }, [categoryName, collection, filter, limit, products]);
+  const scroll = (direction) => {
+    viewportRef.current?.scrollBy({ left: direction * Math.max(320, viewportRef.current.clientWidth * 0.75), behavior: "smooth" });
+  };
+  if (!loading && visible.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { "data-testid": TID.productSlider, className: `mx-auto max-w-7xl px-4 py-14 sm:px-6 ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-8 flex flex-col gap-5 sm:flex-row sm:items-end sm:justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-2xl", children: [
+        eyebrow && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-xs font-semibold uppercase tracking-[0.2em] text-primary", children: eyebrow }),
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "sf-heading text-3xl font-normal leading-tight tracking-normal sm:text-5xl", children: title }),
+        subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-3 leading-7 text-muted-foreground", children: subtitle })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Previous products",
+            "data-testid": TID.productSliderPrev,
+            onClick: () => scroll(-1),
+            className: "inline-flex h-10 w-10 items-center justify-center border border-border bg-background transition hover:bg-foreground hover:text-background",
+            children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronLeft, { className: "h-5 w-5" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Next products",
+            "data-testid": TID.productSliderNext,
+            onClick: () => scroll(1),
+            className: "inline-flex h-10 w-10 items-center justify-center border border-border bg-background transition hover:bg-foreground hover:text-background",
+            children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronRight, { className: "h-5 w-5" })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: viewportRef,
+        "data-testid": TID.productSliderViewport,
+        className: "flex snap-x gap-5 overflow-x-auto pb-5 [scrollbar-width:thin]",
+        children: loading ? Array.from({ length: Math.min(limit, 6) }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[360px] min-w-[260px] snap-start animate-pulse bg-muted" }, i)) : visible.map((product) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-[260px] max-w-[300px] flex-[0_0_72vw] snap-start sm:flex-[0_0_300px]", children: /* @__PURE__ */ jsxRuntime.jsx(
+          ProductCardComponent,
+          {
+            product,
+            config,
+            commerceMode: config.commerceMode,
+            actions
+          }
+        ) }, product.id))
+      }
+    ),
+    cta && /* @__PURE__ */ jsxRuntime.jsx(
+      Link,
+      {
+        to: href ?? config.catalogPath,
+        className: "mt-4 inline-flex border border-foreground/30 px-6 py-3 text-xs font-semibold uppercase tracking-[0.16em] transition hover:bg-foreground hover:text-background",
+        children: cta
+      }
+    )
+  ] });
+}
 function Icon({ name, className }) {
   const C = LucideIcons__namespace[name];
   return C ? /* @__PURE__ */ jsxRuntime.jsx(C, { className }) : null;
@@ -1873,7 +2324,7 @@ function PromoBanner({
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("section", { "data-testid": TID.promoBanner, className: "group relative my-12 overflow-hidden", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      "img",
+      SmoothImage,
       {
         src: image ?? bannerPlaceholder(title, hue, hue + 50, 1600, 420),
         alt: title,
@@ -1927,8 +2378,8 @@ function Testimonials({ title, items }) {
   ] }) });
 }
 function NewsletterBand({ title, subtitle }) {
-  const [email, setEmail] = React18.useState("");
-  const [done, setDone] = React18.useState(false);
+  const [email, setEmail] = React6.useState("");
+  const [done, setDone] = React6.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsx("section", { "data-testid": TID.newsletter, className: "bg-primary py-16 text-primary-foreground", children: /* @__PURE__ */ jsxRuntime.jsxs(Reveal, { className: "mx-auto max-w-xl px-4 text-center sm:px-6", children: [
     /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "sf-heading text-3xl font-bold", children: title ?? "Receba nossas novidades" }),
     subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 opacity-90", children: subtitle }),
@@ -1976,8 +2427,10 @@ function registerStorefrontBlocks() {
   if (registered) return;
   registered = true;
   core.registerBlock("hero", HeroSection, { source: "sdk", label: "Hero" });
+  core.registerBlock("mediaCarousel", MediaCarousel, { source: "sdk", label: "Media carousel" });
   core.registerBlock("categories", CategoryShowcase, { source: "sdk", label: "Categories" });
   core.registerBlock("products", ProductRail, { source: "sdk", label: "Product rail" });
+  core.registerBlock("productSlider", ProductSlider, { source: "sdk", label: "Product slider" });
   core.registerBlock("benefits", BenefitsRow, { source: "sdk", label: "Benefits row" });
   core.registerBlock("banner", PromoBanner, { source: "sdk", label: "Promo banner" });
   core.registerBlock("manifesto", ManifestoBlock, { source: "sdk", label: "Manifesto" });
@@ -1991,14 +2444,17 @@ function sectionsToBlocks(sections) {
     return { type, id: `${type}-${i}`, props };
   });
 }
-function HomePage({ sections }) {
+function StorefrontSections({ sections }) {
   return /* @__PURE__ */ jsxRuntime.jsx("main", { children: core.renderBlocks(sectionsToBlocks(sections)) });
 }
+function HomePage({ sections }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(StorefrontSections, { sections });
+}
 function useProduct(slug2) {
-  const [product, setProduct] = React18.useState(null);
-  const [loading, setLoading] = React18.useState(true);
-  const [error, setError] = React18.useState(null);
-  React18.useEffect(() => {
+  const [product, setProduct] = React6.useState(null);
+  const [loading, setLoading] = React6.useState(true);
+  const [error, setError] = React6.useState(null);
+  React6.useEffect(() => {
     let cancelled = false;
     setLoading(true);
     runtime.getShopProvider().listProducts({ slug: slug2, status: "active", limit: 1 }).then((data) => {
@@ -2105,28 +2561,218 @@ function ProductSpecs({ product }) {
 }
 function RelatedProducts({ product }) {
   const config = useStorefrontConfig();
-  const Card = config.slots?.ProductCard ?? ProductCard;
+  const actions = useStorefrontActions();
+  const components = getStorefrontComponents(config);
+  const Card = components.ProductCard ?? ProductCard;
   const opts = product.categoryId ? { categoryId: product.categoryId, status: "active", limit: 5 } : { status: "active", limit: 5 };
   const { products, loading } = useProducts(opts);
   const related = products.filter((p) => p.id !== product.id).slice(0, 4);
   if (loading || related.length === 0) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "mt-16", children: [
     /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "sf-heading text-xl font-semibold tracking-tight", children: "Voc\xEA tamb\xE9m pode gostar" }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-6 grid grid-cols-2 gap-5 md:grid-cols-4", children: related.map((p) => /* @__PURE__ */ jsxRuntime.jsx(Card, { product: p }, p.id)) })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-6 grid grid-cols-2 gap-5 md:grid-cols-4", children: related.map((p) => /* @__PURE__ */ jsxRuntime.jsx(
+      Card,
+      {
+        product: p,
+        config,
+        commerceMode: config.commerceMode,
+        actions
+      },
+      p.id
+    )) })
   ] });
 }
+function defaultSubject(prefix, product) {
+  return `${prefix}: ${product.name}`;
+}
+function buildWhatsAppHref(url, product) {
+  const text = encodeURIComponent(`Hello, I would like more information about ${product.name}.`);
+  const sep = url.includes("?") ? "&" : "?";
+  return `${url}${sep}text=${text}`;
+}
+function ProductEnquiryForm({ product, onSuccess }) {
+  const config = useStorefrontConfig();
+  const [customerName, setCustomerName] = React6.useState("");
+  const [customerEmail, setCustomerEmail] = React6.useState("");
+  const [customerPhone, setCustomerPhone] = React6.useState("");
+  const [subject, setSubject] = React6.useState(defaultSubject(config.enquiry.subjectPrefix, product));
+  const [message, setMessage] = React6.useState(`I would like more information about ${product.name}.`);
+  const [status, setStatus] = React6.useState("idle");
+  const [error, setError] = React6.useState(null);
+  const submit = async (event) => {
+    event.preventDefault();
+    setStatus("submitting");
+    setError(null);
+    try {
+      const provider = runtime.getShopProvider();
+      if (provider.createProductEnquiry) {
+        await provider.createProductEnquiry({
+          productId: product.id,
+          productName: product.name,
+          productSlug: product.slug,
+          customerName,
+          customerEmail,
+          customerPhone: customerPhone || void 0,
+          subject,
+          message,
+          sourceUrl: typeof window === "undefined" ? void 0 : window.location.href,
+          metadata: { sku: product.sku, categoryName: product.categoryName }
+        });
+      } else if (config.enquiry.email) {
+        window.location.href = `mailto:${config.enquiry.email}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(message)}`;
+      }
+      setStatus("success");
+      onSuccess?.();
+    } catch (e) {
+      setStatus("error");
+      setError(e instanceof Error ? e.message : String(e));
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "form",
+    {
+      ...storefrontComponentContracts.productDetail.enquiryForm,
+      onSubmit: submit,
+      className: "space-y-4",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "space-y-1.5 text-sm font-medium", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Your name" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                "data-testid": TID.enquiryName,
+                required: true,
+                value: customerName,
+                onChange: (e) => setCustomerName(e.target.value),
+                className: "w-full border bg-background px-3 py-2 outline-none focus:border-primary",
+                style: { borderRadius: "var(--sf-radius-input)" }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "space-y-1.5 text-sm font-medium", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Your email" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                "data-testid": TID.enquiryEmail,
+                required: true,
+                type: "email",
+                value: customerEmail,
+                onChange: (e) => setCustomerEmail(e.target.value),
+                className: "w-full border bg-background px-3 py-2 outline-none focus:border-primary",
+                style: { borderRadius: "var(--sf-radius-input)" }
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "block space-y-1.5 text-sm font-medium", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+            "Phone",
+            config.enquiry.requirePhone ? "" : " (optional)"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              "data-testid": TID.enquiryPhone,
+              required: config.enquiry.requirePhone,
+              value: customerPhone,
+              onChange: (e) => setCustomerPhone(e.target.value),
+              className: "w-full border bg-background px-3 py-2 outline-none focus:border-primary",
+              style: { borderRadius: "var(--sf-radius-input)" }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "block space-y-1.5 text-sm font-medium", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Subject" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              "data-testid": TID.enquirySubject,
+              required: true,
+              value: subject,
+              onChange: (e) => setSubject(e.target.value),
+              className: "w-full border bg-background px-3 py-2 outline-none focus:border-primary",
+              style: { borderRadius: "var(--sf-radius-input)" }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "block space-y-1.5 text-sm font-medium", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Message" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "textarea",
+            {
+              "data-testid": TID.enquiryMessage,
+              required: true,
+              rows: 5,
+              value: message,
+              onChange: (e) => setMessage(e.target.value),
+              className: "w-full resize-none border bg-background px-3 py-2 outline-none focus:border-primary",
+              style: { borderRadius: "var(--sf-radius-input)" }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              "data-testid": TID.enquirySubmit,
+              type: "submit",
+              disabled: status === "submitting",
+              className: "sf-cta inline-flex items-center gap-2 bg-primary px-5 py-3 font-semibold text-primary-foreground disabled:cursor-wait disabled:opacity-60",
+              style: { borderRadius: "var(--sf-radius-button)" },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Send, { className: "h-4 w-4" }),
+                status === "submitting" ? "Sending..." : "Send enquiry"
+              ]
+            }
+          ),
+          config.enquiry.whatsappUrl && /* @__PURE__ */ jsxRuntime.jsxs(
+            "a",
+            {
+              href: buildWhatsAppHref(config.enquiry.whatsappUrl, product),
+              target: "_blank",
+              rel: "noreferrer",
+              className: "inline-flex items-center gap-2 border px-5 py-3 text-sm font-semibold transition-colors hover:bg-muted",
+              style: { borderRadius: "var(--sf-radius-button)" },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.MessageCircle, { className: "h-4 w-4" }),
+                "WhatsApp"
+              ]
+            }
+          ),
+          config.enquiry.email && /* @__PURE__ */ jsxRuntime.jsxs(
+            "a",
+            {
+              href: `mailto:${config.enquiry.email}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(message)}`,
+              className: "inline-flex items-center gap-2 border px-5 py-3 text-sm font-semibold transition-colors hover:bg-muted",
+              style: { borderRadius: "var(--sf-radius-button)" },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Mail, { className: "h-4 w-4" }),
+                "Email"
+              ]
+            }
+          )
+        ] }),
+        status === "success" && /* @__PURE__ */ jsxRuntime.jsx("p", { "data-testid": TID.enquirySuccess, className: "text-sm font-medium text-emerald-600", children: config.enquiry.successMessage }),
+        error && /* @__PURE__ */ jsxRuntime.jsx("p", { "data-testid": TID.enquiryError, className: "text-sm font-medium text-red-600", children: error })
+      ]
+    }
+  );
+}
 function ProductDetailPage({ slug: slug2 }) {
   const config = useStorefrontConfig();
+  const actions = useStorefrontActions();
   const { product, loading } = useProduct(slug2);
   const addItem = useCartStore((s) => s.addItem);
-  const [qty, setQty] = React18.useState(1);
-  const [selectedOptions, setSelectedOptions] = React18.useState({});
+  const [qty, setQty] = React6.useState(1);
+  const [selectedOptions, setSelectedOptions] = React6.useState({});
   const optionGroups = product ? getProductOptionGroups(product) : [];
   useStorefrontHead({
     title: product ? `${product.name} \u2014 ${config.name}` : config.name,
     description: product?.description
   });
-  React18.useEffect(() => {
+  React6.useEffect(() => {
     if (!product) return;
     const defaults = Object.fromEntries(
       getProductOptionGroups(product).map((group) => [group.label, group.values[0] ?? ""])
@@ -2152,21 +2798,56 @@ function ProductDetailPage({ slug: slug2 }) {
   const soldOut = product.inventoryCount <= 0;
   const lowStock = !soldOut && product.inventoryCount <= 5;
   const image = product.images.find((i) => i.isPrimary) ?? product.images[0];
+  const components = getStorefrontComponents(config);
+  const ProductDetailComponent = components.ProductDetail;
+  const addToCart = () => addItem(product, qty, selectedOptions);
+  const openEnquiry = () => {
+    document.getElementById("storefront-product-enquiry")?.scrollIntoView({ behavior: "smooth", block: "start" });
+  };
   const discountPct = product.compareAtPrice && product.compareAtPrice > product.price ? Math.round((1 - product.price / product.compareAtPrice) * 100) : 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs("main", { className: "mx-auto max-w-5xl px-4 py-8 sm:px-6", children: [
+  if (ProductDetailComponent) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ProductDetailComponent,
+      {
+        product,
+        config,
+        commerceMode: config.commerceMode,
+        primaryImage: image,
+        optionGroups,
+        selectedOptions,
+        setSelectedOptions,
+        quantity: qty,
+        setQuantity: setQty,
+        soldOut,
+        lowStock,
+        actions,
+        addToCart,
+        openEnquiry
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("main", { ...storefrontComponentContracts.productDetail.root, className: "mx-auto max-w-5xl px-4 py-8 sm:px-6", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Link, { to: "/", className: "mb-6 inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground", children: [
       /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronLeft, { className: "h-4 w-4" }),
       " Continuar comprando"
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid animate-fade-up gap-10 md:grid-cols-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "group overflow-hidden border bg-muted", style: { borderRadius: "var(--sf-radius-card)" }, children: image && /* @__PURE__ */ jsxRuntime.jsx(
-        "img",
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
         {
-          src: image.url,
-          alt: image.altText ?? product.name,
-          className: "aspect-square w-full object-cover transition-transform duration-700 ease-out group-hover:scale-105"
+          ...storefrontComponentContracts.productDetail.gallery,
+          className: "group overflow-hidden border bg-muted",
+          style: { borderRadius: "var(--sf-radius-card)" },
+          children: image && /* @__PURE__ */ jsxRuntime.jsx(
+            SmoothImage,
+            {
+              src: image.url,
+              alt: image.altText ?? product.name,
+              className: "aspect-square w-full object-cover transition-transform duration-700 ease-out group-hover:scale-105"
+            }
+          )
         }
-      ) }),
+      ),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col py-2 lg:sticky lg:top-24 lg:self-start", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: "mb-3 flex flex-wrap items-center gap-1.5 text-xs text-muted-foreground", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Link, { to: "/", className: "transition-colors hover:text-foreground", children: "In\xEDcio" }),
@@ -2178,7 +2859,7 @@ function ProductDetailPage({ slug: slug2 }) {
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground", children: product.name })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("h1", { "data-testid": TID.pdpName, className: "sf-heading text-3xl font-bold tracking-tight", children: product.name }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 flex items-center gap-3", children: [
+        config.commerceMode === "checkout" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 flex items-center gap-3", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xl", children: /* @__PURE__ */ jsxRuntime.jsx(
             Price,
             {
@@ -2195,7 +2876,7 @@ function ProductDetailPage({ slug: slug2 }) {
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("p", { "data-testid": TID.pdpDescription, className: "mt-5 leading-relaxed text-muted-foreground", children: product.description }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex flex-wrap items-center gap-x-3 gap-y-1 text-sm", children: [
+        config.commerceMode === "checkout" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex flex-wrap items-center gap-x-3 gap-y-1 text-sm", children: [
           soldOut ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-2 font-medium text-muted-foreground", children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-2 w-2 rounded-full bg-muted-foreground" }),
             " Sem estoque"
@@ -2221,7 +2902,7 @@ function ProductDetailPage({ slug: slug2 }) {
             onChange: setSelectedOptions
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-8 flex items-center gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { ...storefrontComponentContracts.productDetail.actions, className: "mt-8", children: config.commerceMode === "checkout" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             QuantityInput,
             {
@@ -2237,14 +2918,32 @@ function ProductDetailPage({ slug: slug2 }) {
               type: "button",
               "data-testid": TID.pdpAddToCart,
               disabled: soldOut,
-              onClick: () => addItem(product, qty, selectedOptions),
+              onClick: addToCart,
               className: "sf-cta flex-1 bg-primary py-3.5 font-semibold text-primary-foreground shadow-md transition-all hover:-translate-y-0.5 hover:shadow-lg disabled:cursor-not-allowed disabled:opacity-40 disabled:shadow-none disabled:hover:translate-y-0",
               style: { borderRadius: "var(--sf-radius-button)" },
               children: soldOut ? "Esgotado" : "Adicionar ao carrinho"
             }
           )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-6 grid grid-cols-3 gap-3 border-t pt-6 text-center", children: [
+        ] }) : config.commerceMode === "enquiry" ? /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            ...storefrontComponentContracts.productDetail.enquiryButton,
+            onClick: openEnquiry,
+            className: "sf-cta w-full bg-primary py-3.5 font-semibold text-primary-foreground shadow-md transition-all hover:-translate-y-0.5 hover:shadow-lg",
+            style: { borderRadius: "var(--sf-radius-button)" },
+            children: config.enquiry.label
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          Link,
+          {
+            to: config.catalogPath,
+            className: "inline-flex border px-5 py-3 text-sm font-semibold transition-colors hover:bg-muted",
+            style: { borderRadius: "var(--sf-radius-button)" },
+            children: "Voltar ao cat\xE1logo"
+          }
+        ) }),
+        config.commerceMode === "checkout" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-6 grid grid-cols-3 gap-3 border-t pt-6 text-center", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-1.5 text-[11px] font-medium text-muted-foreground", children: [
             /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Truck, { className: "h-5 w-5 text-primary" }),
             " Envio r\xE1pido"
@@ -2260,6 +2959,11 @@ function ProductDetailPage({ slug: slug2 }) {
         ] })
       ] })
     ] }),
+    config.commerceMode === "enquiry" && /* @__PURE__ */ jsxRuntime.jsx("section", { id: "storefront-product-enquiry", className: "mt-12 border-t pt-10", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-3xl", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "sf-heading text-2xl font-semibold", children: "Need more information?" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-muted-foreground", children: "Send an enquiry about this product." }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-6", children: /* @__PURE__ */ jsxRuntime.jsx(ProductEnquiryForm, { product }) })
+    ] }) }),
     /* @__PURE__ */ jsxRuntime.jsx(ProductSpecs, { product }),
     /* @__PURE__ */ jsxRuntime.jsx(RelatedProducts, { product })
   ] });
@@ -2300,16 +3004,17 @@ async function placeStorefrontOrder({
     }))
   });
   if (markPaid) {
-    await provider.updateOrder(order.id, { financialStatus: "paid" });
+    if (provider.confirmPayment) await provider.confirmPayment(order.id);
+    else await provider.updateOrder(order.id, { financialStatus: "paid" });
   }
   return { order, customerId: customerId ?? order.customerId ?? "" };
 }
 function SignInModal({ defaultEmail = "", onClose, onSignedIn }) {
-  const [email, setEmail] = React18.useState(defaultEmail);
-  const [password, setPassword] = React18.useState("");
-  const [busy, setBusy] = React18.useState(false);
-  const [error, setError] = React18.useState(null);
-  React18.useEffect(() => {
+  const [email, setEmail] = React6.useState(defaultEmail);
+  const [password, setPassword] = React6.useState("");
+  const [busy, setBusy] = React6.useState(false);
+  const [error, setError] = React6.useState(null);
+  React6.useEffect(() => {
     const onKey = (event) => {
       if (event.key === "Escape") onClose();
     };
@@ -2471,13 +3176,13 @@ function CheckoutPage() {
   const session = useSessionStore();
   const validateDiscount2 = useDiscountValidator();
   useStorefrontHead({ title: `Checkout \u2014 ${config.name}` });
-  const [selectedAddressId, setSelectedAddressId] = React18.useState(DEFAULT_ADDRESS.id);
-  const [selectedPaymentId, setSelectedPaymentId] = React18.useState(DEFAULT_PAYMENT.id);
-  const [savedAddresses, setSavedAddresses] = React18.useState(SAVED_ADDRESSES);
-  const [savedPaymentMethods, setSavedPaymentMethods] = React18.useState(SAVED_PAYMENT_METHODS);
-  const [addressMode, setAddressMode] = React18.useState("saved");
-  const [paymentMode, setPaymentMode] = React18.useState("saved");
-  const [form, setForm] = React18.useState({
+  const [selectedAddressId, setSelectedAddressId] = React6.useState(DEFAULT_ADDRESS.id);
+  const [selectedPaymentId, setSelectedPaymentId] = React6.useState(DEFAULT_PAYMENT.id);
+  const [savedAddresses, setSavedAddresses] = React6.useState(SAVED_ADDRESSES);
+  const [savedPaymentMethods, setSavedPaymentMethods] = React6.useState(SAVED_PAYMENT_METHODS);
+  const [addressMode, setAddressMode] = React6.useState("saved");
+  const [paymentMode, setPaymentMode] = React6.useState("saved");
+  const [form, setForm] = React6.useState({
     email: session.email ?? "",
     name: session.name ?? "",
     street: DEFAULT_ADDRESS.street,
@@ -2487,20 +3192,20 @@ function CheckoutPage() {
     expiry: DEFAULT_PAYMENT.expiry,
     cvc: DEFAULT_PAYMENT.cvc
   });
-  const [error, setError] = React18.useState(null);
-  const [discountCode, setDiscountCode] = React18.useState("");
-  const [discountError, setDiscountError] = React18.useState(null);
-  const [discountSuccess, setDiscountSuccess] = React18.useState(null);
-  const [applyingDiscount, setApplyingDiscount] = React18.useState(false);
-  const [placing, setPlacing] = React18.useState(false);
-  const [processingStep, setProcessingStep] = React18.useState(0);
-  const [showSignin, setShowSignin] = React18.useState(false);
+  const [error, setError] = React6.useState(null);
+  const [discountCode, setDiscountCode] = React6.useState("");
+  const [discountError, setDiscountError] = React6.useState(null);
+  const [discountSuccess, setDiscountSuccess] = React6.useState(null);
+  const [applyingDiscount, setApplyingDiscount] = React6.useState(false);
+  const [placing, setPlacing] = React6.useState(false);
+  const [processingStep, setProcessingStep] = React6.useState(0);
+  const [showSignin, setShowSignin] = React6.useState(false);
   const subtotal = selectSubtotal(cart);
   const discountTotal = selectDiscountTotal(cart);
   const shipping = selectShipping(cart, config);
   const total = selectTotal(cart, config);
   const money = (value) => formatMoney(value, config.currency, config.locale);
-  React18.useEffect(() => {
+  React6.useEffect(() => {
     if (cart.lines.length === 0 && !placing) navigateTo(config.catalogPath);
   }, [cart.lines.length, config.catalogPath, placing]);
   const set = (key) => (value) => setForm((current) => ({ ...current, [key]: value }));
@@ -2815,7 +3520,7 @@ function CheckoutPage() {
         /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "sr-only", children: "Resumo do pedido" }),
         /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-4", children: cart.lines.map((line) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex gap-3 text-sm", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-16 w-16 flex-none overflow-hidden rounded-lg border bg-background", children: [
-            line.imageUrl && /* @__PURE__ */ jsxRuntime.jsx("img", { src: line.imageUrl, alt: line.name, className: "h-full w-full object-cover" }),
+            line.imageUrl && /* @__PURE__ */ jsxRuntime.jsx(SmoothImage, { src: line.imageUrl, alt: line.name, className: "h-full w-full object-cover" }),
             /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
@@ -3155,11 +3860,11 @@ function SuccessMark() {
 }
 function OrderConfirmationPage({ orderId }) {
   const config = useStorefrontConfig();
-  const [order, setOrder] = React18.useState(null);
-  const [loading, setLoading] = React18.useState(true);
+  const [order, setOrder] = React6.useState(null);
+  const [loading, setLoading] = React6.useState(true);
   const money = (v) => formatMoney(v, config.currency, config.locale);
   useStorefrontHead({ title: order ? `Pedido #${order.orderNumber} \u2014 ${config.name}` : config.name });
-  React18.useEffect(() => {
+  React6.useEffect(() => {
     let cancelled = false;
     runtime.getShopProvider().getOrder(orderId).then((o) => {
       if (!cancelled) setOrder(o);
@@ -3237,7 +3942,7 @@ function OrderConfirmationPage({ orderId }) {
           /* @__PURE__ */ jsxRuntime.jsx(OrderTrackingTimeline, { order })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "mt-8 space-y-3 text-left", children: order.items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-center gap-3 text-sm", children: [
-          item.imageUrl && /* @__PURE__ */ jsxRuntime.jsx("img", { src: item.imageUrl, alt: item.name, className: "h-12 w-12 rounded-lg border object-cover" }),
+          item.imageUrl && /* @__PURE__ */ jsxRuntime.jsx(SmoothImage, { src: item.imageUrl, alt: item.name, className: "h-12 w-12 rounded-lg border object-cover" }),
           /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex-1", children: [
             item.name,
             " ",
@@ -3291,11 +3996,11 @@ function OrderConfirmationPage({ orderId }) {
 function useMyOrders() {
   const customerId = useSessionStore((s) => s.customerId);
   const email = useSessionStore((s) => s.email);
-  const [orders, setOrders] = React18.useState([]);
-  const [loading, setLoading] = React18.useState(true);
-  const [tick, setTick] = React18.useState(0);
-  const refresh = React18.useCallback(() => setTick((t) => t + 1), []);
-  React18.useEffect(() => {
+  const [orders, setOrders] = React6.useState([]);
+  const [loading, setLoading] = React6.useState(true);
+  const [tick, setTick] = React6.useState(0);
+  const refresh = React6.useCallback(() => setTick((t) => t + 1), []);
+  React6.useEffect(() => {
     let cancelled = false;
     if (!customerId && !email) {
       setOrders([]);
@@ -3317,12 +4022,12 @@ function useMyOrders() {
   return { orders, loading, refresh };
 }
 function AuthForm() {
-  const [mode, setMode] = React18.useState("signin");
-  const [email, setEmail] = React18.useState("");
-  const [password, setPassword] = React18.useState("");
-  const [name, setName] = React18.useState("");
-  const [busy, setBusy] = React18.useState(false);
-  const [error, setError] = React18.useState(null);
+  const [mode, setMode] = React6.useState("signin");
+  const [email, setEmail] = React6.useState("");
+  const [password, setPassword] = React6.useState("");
+  const [name, setName] = React6.useState("");
+  const [busy, setBusy] = React6.useState(false);
+  const [error, setError] = React6.useState(null);
   async function submit(e) {
     e.preventDefault();
     setError(null);
@@ -3445,7 +4150,7 @@ function OrdersPanel() {
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: new Date(order.createdAt).toLocaleDateString(config.locale) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsxRuntime.jsx(OrderTrackingTimeline, { order, compact: true }) }),
         /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "mt-3 flex flex-wrap gap-2", children: order.items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-center gap-2 rounded-lg border px-2 py-1 text-xs", children: [
-          item.imageUrl && /* @__PURE__ */ jsxRuntime.jsx("img", { src: item.imageUrl, alt: item.name, className: "h-6 w-6 rounded object-cover" }),
+          item.imageUrl && /* @__PURE__ */ jsxRuntime.jsx(SmoothImage, { src: item.imageUrl, alt: item.name, className: "h-6 w-6 rounded object-cover" }),
           item.name,
           " \xD7 ",
           item.quantity
@@ -3464,9 +4169,9 @@ function OrdersPanel() {
 }
 function ProfilePanel() {
   const session = useSessionStore();
-  const [name, setName] = React18.useState(session.name ?? "");
-  const [saving, setSaving] = React18.useState(false);
-  const [saved, setSaved] = React18.useState(false);
+  const [name, setName] = React6.useState(session.name ?? "");
+  const [saving, setSaving] = React6.useState(false);
+  const [saved, setSaved] = React6.useState(false);
   async function save(e) {
     e.preventDefault();
     const trimmed = name.trim();
@@ -3562,7 +4267,7 @@ var SECTION_SUBTITLE = {
 function MyPurchasesPage() {
   const config = useStorefrontConfig();
   const session = useSessionStore();
-  const [section, setSection] = React18.useState("orders");
+  const [section, setSection] = React6.useState("orders");
   useStorefrontHead({ title: `Minha conta \u2014 ${config.name}` });
   if (!session.email) {
     return /* @__PURE__ */ jsxRuntime.jsx("main", { className: "mx-auto max-w-3xl px-4 py-12 sm:px-6", children: /* @__PURE__ */ jsxRuntime.jsx(AuthForm, {}) });
@@ -3625,7 +4330,7 @@ function PolicyPage({ kind }) {
     ] }) })
   ] });
 }
-var StorefrontErrorBoundary = class extends React18__default.default.Component {
+var StorefrontErrorBoundary = class extends React6__default.default.Component {
   constructor() {
     super(...arguments);
     this.state = { error: null };
@@ -3669,7 +4374,7 @@ var ACCENT = {
 function ToastCard({ toast: toast2 }) {
   const dismiss = useToastStore((s) => s.dismiss);
   const Icon2 = ICON[toast2.variant];
-  React18.useEffect(() => {
+  React6.useEffect(() => {
     const timer = window.setTimeout(() => dismiss(toast2.id), toast2.durationMs);
     return () => window.clearTimeout(timer);
   }, [toast2.id, toast2.durationMs, dismiss]);
@@ -3726,8 +4431,8 @@ function RouteSwitch({ path }) {
   if (product?.slug) return /* @__PURE__ */ jsxRuntime.jsx(ProductDetailPage, { slug: product.slug });
   const order = matchPath("/order/:id", path);
   if (order?.id) return /* @__PURE__ */ jsxRuntime.jsx(OrderConfirmationPage, { orderId: order.id });
-  if (matchPath("/checkout", path)) return /* @__PURE__ */ jsxRuntime.jsx(CheckoutPage, {});
-  if (matchPath("/account", path)) return /* @__PURE__ */ jsxRuntime.jsx(MyPurchasesPage, {});
+  if (matchPath("/checkout", path) && config.features.checkout) return /* @__PURE__ */ jsxRuntime.jsx(CheckoutPage, {});
+  if (matchPath("/account", path) && config.features.accounts) return /* @__PURE__ */ jsxRuntime.jsx(MyPurchasesPage, {});
   if (matchPath("/catalog", path)) return /* @__PURE__ */ jsxRuntime.jsx(CatalogPage, {});
   if (matchPath("/privacy", path)) return /* @__PURE__ */ jsxRuntime.jsx(PolicyPage, { kind: "privacy" });
   if (matchPath("/terms", path)) return /* @__PURE__ */ jsxRuntime.jsx(PolicyPage, { kind: "terms" });
@@ -3769,12 +4474,26 @@ function buildMockSeed(config) {
   };
 }
 function initStorefrontRuntime(config) {
-  initCustomerAuth(resolveAuthAdapter(config.auth?.adapter));
+  if (resolveConfig(config).features.accounts) {
+    initCustomerAuth(resolveAuthAdapter(config.auth, {
+      supabaseUrl: config.supabaseUrl,
+      supabaseAnonKey: config.supabaseAnonKey
+    }));
+  }
   if (config.provider) {
     runtime.setShopProvider(config.provider);
   } else {
     runtime.setShopProvider(mock.createMockShopProvider(buildMockSeed(config)));
   }
+  const reconcileCart = () => {
+    const provider = runtime.getShopProvider();
+    void useCartStore.getState().reconcile(async (line) => {
+      const product = await provider.getProduct(line.productId);
+      return product != null;
+    });
+  };
+  if (useCartStore.persist.hasHydrated()) reconcileCart();
+  else useCartStore.persist.onFinishHydration(reconcileCart);
   if (config.supabaseUrl || config.supabaseAnonKey) {
     console.warn(
       "@fayz-ai/shop: supabaseUrl/supabaseAnonKey are legacy fields. Pass an explicit provider/adapter or use the Fayz SDK broker path."
@@ -3785,14 +4504,20 @@ function StorefrontShell() {
   const config = useStorefrontConfig();
   const path = useHashPath();
   const focused = isFocusedRoute(config, path);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-screen bg-background text-foreground", children: [
+  const components = getStorefrontComponents(config);
+  const chromeProps = { config, commerceMode: config.commerceMode };
+  const body = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     config.theme && /* @__PURE__ */ jsxRuntime.jsx(StorefrontThemeStyle, { theme: config.theme }),
-    !focused && /* @__PURE__ */ jsxRuntime.jsx(StorefrontHeader, {}),
+    !focused && (components.Header ? /* @__PURE__ */ jsxRuntime.jsx(components.Header, { ...chromeProps }) : /* @__PURE__ */ jsxRuntime.jsx(StorefrontHeader, {})),
     /* @__PURE__ */ jsxRuntime.jsx(StorefrontErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteSwitch, { path }) }, path),
-    !focused && /* @__PURE__ */ jsxRuntime.jsx(CartDrawer, {}),
-    !focused && /* @__PURE__ */ jsxRuntime.jsx(StorefrontFooter, {}),
+    !focused && config.features.cart && /* @__PURE__ */ jsxRuntime.jsx(CartDrawer, {}),
+    !focused && (components.Footer ? /* @__PURE__ */ jsxRuntime.jsx(components.Footer, { ...chromeProps }) : /* @__PURE__ */ jsxRuntime.jsx(StorefrontFooter, {})),
     /* @__PURE__ */ jsxRuntime.jsx(Toaster, {})
   ] });
+  if (components.Shell) {
+    return /* @__PURE__ */ jsxRuntime.jsx(components.Shell, { ...chromeProps, children: body });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-screen bg-background text-foreground", children: body });
 }
 function createStorefrontApp(config) {
   const resolved = resolveConfig(config);
@@ -3803,6 +4528,37 @@ function createStorefrontApp(config) {
   StorefrontApp.displayName = "StorefrontApp";
   return StorefrontApp;
 }
+function createStorefront(options) {
+  const routes = [...options.pages ?? [], ...options.routes ?? []];
+  const config = {
+    ...options.config,
+    provider: options.provider ?? options.config.provider,
+    components: {
+      ...options.config.components,
+      ...options.components
+    },
+    routes: routes.length > 0 ? routes : options.config.routes,
+    home: options.sections ? { ...options.config.home ?? { sections: [] }, sections: options.sections } : options.config.home
+  };
+  return createStorefrontApp(config);
+}
+
+// src/define.ts
+function defineStorefrontConfig(config) {
+  return config;
+}
+function defineStorefrontComponents(components) {
+  return components;
+}
+function defineStorefrontRoutes(routes) {
+  return routes;
+}
+function defineStorefrontSections(sections) {
+  return sections;
+}
+function defineStorefrontApp(options) {
+  return options;
+}
 var runtimeConfigRegistry = /* @__PURE__ */ new Map();
 function slug(name) {
   return name.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "") || "app";
@@ -3861,7 +4617,7 @@ function manifestToStorefrontConfig(manifest, surfaceName) {
       provider: manifest.backend?.provider,
       url: manifest.backend?.url
     },
-    slots: runtimeConfig?.slots,
+    components: runtimeConfig?.components,
     routes: runtimeConfig?.routes,
     provider: runtimeConfig?.provider,
     auth: runtimeConfig?.auth,
@@ -3869,9 +4625,9 @@ function manifestToStorefrontConfig(manifest, surfaceName) {
   };
 }
 function StorefrontScaffold({ manifest, surface }) {
-  const config = React18__default.default.useMemo(() => manifestToStorefrontConfig(manifest, surface), [manifest, surface]);
-  const resolved = React18__default.default.useMemo(() => resolveConfig(config), [config]);
-  const inited = React18__default.default.useRef(false);
+  const config = React6__default.default.useMemo(() => manifestToStorefrontConfig(manifest, surface), [manifest, surface]);
+  const resolved = React6__default.default.useMemo(() => resolveConfig(config), [config]);
+  const inited = React6__default.default.useRef(false);
   if (!inited.current) {
     initStorefrontRuntime(config);
     inited.current = true;
@@ -4097,11 +4853,73 @@ var atelierTemplate = {
     ]
   })
 };
+var foodTemplate = {
+  id: "food",
+  inspiration: "Delivery / restaurant storefront",
+  announcement: "ENTREGA GR\xC1TIS ACIMA DE R$ 150 \xB7 PE\xC7A J\xC1",
+  theme: {
+    name: "food",
+    colors: {
+      background: "30 33% 97%",
+      foreground: "20 14% 15%",
+      primary: "14 84% 50%",
+      primaryForeground: "0 0% 100%",
+      card: "30 33% 99%",
+      cardForeground: "20 14% 15%",
+      muted: "28 20% 92%",
+      mutedForeground: "22 10% 42%",
+      border: "28 18% 85%",
+      headerBackground: "20 14% 11%",
+      headerForeground: "30 24% 96%",
+      announcementBackground: "14 84% 50%",
+      announcementForeground: "0 0% 100%"
+    },
+    font: { heading: "Poppins", body: "Inter" },
+    radius: "round",
+    header: { variant: "classic" },
+    productCard: { style: "card", imageAspect: "square" }
+  },
+  home: (storeName, images) => ({
+    sections: [
+      {
+        type: "hero",
+        variant: "banner",
+        height: "tall",
+        slides: [
+          { title: "Sabor de verdade, na sua porta", subtitle: `${storeName} \u2014 feito na hora, do jeito que voc\xEA ama.`, cta: "Ver card\xE1pio", href: "/catalog", hue: 20, image: images?.hero?.[0] }
+        ]
+      },
+      {
+        type: "benefits",
+        items: [
+          { icon: "Flame", title: "Feito na hora", text: "Preparado com capricho" },
+          { icon: "Truck", title: "Entrega r\xE1pida", text: "Frete gr\xE1tis acima de R$ 150" },
+          { icon: "CreditCard", title: "Pagamento f\xE1cil", text: "Pix, cart\xE3o e mais" }
+        ]
+      },
+      { type: "categories", style: "tiles", title: "Nosso card\xE1pio" },
+      { type: "products", title: "Mais pedidos", eyebrow: "favoritos da casa", filter: "all", limit: 8 },
+      { type: "banner", title: "Combo do dia", eyebrow: "oferta", subtitle: "Sele\xE7\xE3o especial com desconto", cta: "Aproveitar", hue: 14, image: images?.banners?.[0] },
+      { type: "products", title: "Novidades no card\xE1pio", filter: "new", limit: 4 },
+      {
+        type: "testimonials",
+        title: "O que dizem por a\xED",
+        items: [
+          { quote: "Chegou quentinho e absurdo de bom. Virei cliente!", author: "Rafael M." },
+          { quote: "Sabor de restaurante em casa, sem complica\xE7\xE3o.", author: "Beatriz L." },
+          { quote: "Entrega r\xE1pida e por\xE7\xE3o generosa. Recomendo demais.", author: "Diego S." }
+        ]
+      },
+      { type: "newsletter", title: "Receba nossas ofertas", subtitle: "Promo\xE7\xF5es e novidades do card\xE1pio, direto no seu e-mail." }
+    ]
+  })
+};
 var storefrontTemplates = {
   mare: mareTemplate,
   sertao: sertaoTemplate,
   volt: voltTemplate,
-  atelier: atelierTemplate
+  atelier: atelierTemplate,
+  food: foodTemplate
 };
 
 Object.defineProperty(exports, "getSupabaseClientOptional", {
@@ -4122,6 +4940,7 @@ exports.HeroSection = HeroSection;
 exports.HomePage = HomePage;
 exports.Link = Link;
 exports.ManifestoBlock = ManifestoBlock;
+exports.MediaCarousel = MediaCarousel;
 exports.MyPurchasesPage = MyPurchasesPage;
 exports.NewsletterBand = NewsletterBand;
 exports.OrderConfirmationPage = OrderConfirmationPage;
@@ -4129,24 +4948,35 @@ exports.OrderTrackingTimeline = OrderTrackingTimeline;
 exports.Price = Price;
 exports.ProductCard = ProductCard;
 exports.ProductDetailPage = ProductDetailPage;
+exports.ProductEnquiryForm = ProductEnquiryForm;
 exports.ProductGrid = ProductGrid;
 exports.ProductOptionSelector = ProductOptionSelector;
 exports.ProductRail = ProductRail;
+exports.ProductSlider = ProductSlider;
 exports.PromoBanner = PromoBanner;
 exports.QuantityInput = QuantityInput;
 exports.Reveal = Reveal;
+exports.SmoothImage = SmoothImage;
 exports.StorefrontFooter = StorefrontFooter;
 exports.StorefrontHeader = StorefrontHeader;
 exports.StorefrontScaffold = StorefrontScaffold;
+exports.StorefrontSections = StorefrontSections;
 exports.StorefrontShell = StorefrontShell;
 exports.StorefrontThemeStyle = StorefrontThemeStyle;
 exports.TID = TID;
 exports.Testimonials = Testimonials;
 exports.atelierTemplate = atelierTemplate;
 exports.bannerPlaceholder = bannerPlaceholder;
+exports.createStorefront = createStorefront;
 exports.createStorefrontApp = createStorefrontApp;
 exports.defineStorefront = defineStorefront;
+exports.defineStorefrontApp = defineStorefrontApp;
+exports.defineStorefrontComponents = defineStorefrontComponents;
+exports.defineStorefrontConfig = defineStorefrontConfig;
+exports.defineStorefrontRoutes = defineStorefrontRoutes;
+exports.defineStorefrontSections = defineStorefrontSections;
 exports.establishCustomerSession = establishCustomerSession;
+exports.foodTemplate = foodTemplate;
 exports.formatMoney = formatMoney;
 exports.formatProductOptionSelection = formatProductOptionSelection;
 exports.getCustomerAuthAdapter = getCustomerAuthAdapter;
@@ -4158,7 +4988,7 @@ exports.navigateTo = navigateTo;
 exports.normalizeProductOptionSelection = normalizeProductOptionSelection;
 exports.placeStorefrontOrder = placeStorefrontOrder;
 exports.prefersReducedMotion = prefersReducedMotion;
-exports.productCardSlotContract = productCardSlotContract;
+exports.productCardComponentContract = productCardComponentContract;
 exports.productOptionSelectionKey = productOptionSelectionKey;
 exports.registerStorefrontBlocks = registerStorefrontBlocks;
 exports.resolveAuthAdapter = resolveAuthAdapter;
@@ -4173,13 +5003,16 @@ exports.sertaoTemplate = sertaoTemplate;
 exports.signInByEmail = signInByEmail;
 exports.signOutCustomer = signOutCustomer;
 exports.signUpCustomer = signUpCustomer;
-exports.storefrontSlotContracts = storefrontSlotContracts;
+exports.storefrontComponentContracts = storefrontComponentContracts;
 exports.storefrontTemplates = storefrontTemplates;
 exports.themeToCss = themeToCss;
+exports.useCart = useCart;
 exports.useCartStore = useCartStore;
+exports.useCatalog = useCatalog;
 exports.useCatalogStore = useCatalogStore;
 exports.useCategories = useCategories;
 exports.useDiscountValidator = useDiscountValidator;
+exports.useEnquiry = useEnquiry;
 exports.useHashPath = useHashPath;
 exports.useInView = useInView;
 exports.useMyOrders = useMyOrders;
@@ -4188,7 +5021,10 @@ exports.useProduct = useProduct;
 exports.useProducts = useProducts;
 exports.useScrolled = useScrolled;
 exports.useSessionStore = useSessionStore;
+exports.useStorefront = useStorefront;
+exports.useStorefrontActions = useStorefrontActions;
 exports.useStorefrontConfig = useStorefrontConfig;
+exports.useStorefrontConfigOptional = useStorefrontConfigOptional;
 exports.voltTemplate = voltTemplate;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map