@fayz-ai/storefront 0.7.0 → 0.8.0

package/README.md

@@ -5,9 +5,11 @@
 [![npm](https://img.shields.io/npm/v/@fayz-ai/storefront.svg)](https://www.npmjs.com/package/@fayz-ai/storefront)
 [![license](https://img.shields.io/npm/l/@fayz-ai/storefront.svg)](https://github.com/FayaLabs/fayz-sdk/blob/main/LICENSE)
 
+**Status:** beta — published to npm and used across Fayz dogfood apps. Pre-1.0: minor APIs may change before 1.0.
+
 `@fayz-ai/storefront` is the customer-facing surface of the Fayz SDK: a storefront scaffold that renders a page as a tree of **blocks** (hero, products, manifesto, cart, …) defined in the app manifest. Two completely different brands come out of the same template with zero custom components — the storefront is *data*, not a fork.
 
-It reads commerce from `@fayz-ai/shop`, so the same engine powering an admin also powers the public store. Customize from labels to a fully bespoke section via the [customization ladder](../../docs/customization-ladder.md) — never by editing this package.
+It reads commerce from `@fayz-ai/shop`, so the same engine powering an admin also powers the public store. Customize from labels to a fully bespoke section via the [customization ladder](../../docs/CUSTOMIZATION.md) — never by editing this package.
 
 ## What's inside
 - **Scaffold** — `defineStorefront(config)` + `StorefrontScaffold` rendered by `renderApp`

package/dist/components/StorefrontHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StorefrontHeader.d.ts","sourceRoot":"","sources":["../../src/components/StorefrontHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAkRvC,wBAAgB,gBAAgB,sBAwE/B"}
+{"version":3,"file":"StorefrontHeader.d.ts","sourceRoot":"","sources":["../../src/components/StorefrontHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AA0SvC,wBAAgB,gBAAgB,sBA2E/B"}

package/dist/createStorefrontApp.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createStorefrontApp.d.ts","sourceRoot":"","sources":["../src/createStorefrontApp.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AAG1D,OAAO,KAAK,EAAE,gBAAgB,EAA4B,MAAM,UAAU,CAAA;AAC1E,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAA;AACjE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AA0GnD,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,gBAAgB,GAAG,IAAI,CAmBpE;AAED;gFACgF;AAChF,wBAAgB,eAAe,sBAkC9B;AAED;;;;;;;GAOG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,gBAAgB,GAAG,KAAK,CAAC,aAAa,CAajF;AAED,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,gBAAgB,CAAA;IACxB,QAAQ,CAAC,EAAE,YAAY,CAAA;IACvB,UAAU,CAAC,EAAE,oBAAoB,CAAA;IACjC,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAA;IACnC,KAAK,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAA;IAClC,QAAQ,CAAC,EAAE,SAAS,iBAAiB,EAAE,CAAA;CACxC;AAED,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,uBAAuB,GAAG,KAAK,CAAC,aAAa,CAgBtF"}
+{"version":3,"file":"createStorefrontApp.d.ts","sourceRoot":"","sources":["../src/createStorefrontApp.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AAG1D,OAAO,KAAK,EAAE,gBAAgB,EAA4B,MAAM,UAAU,CAAA;AAC1E,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAA;AACjE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AA2GnD,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,gBAAgB,GAAG,IAAI,CAmCpE;AAED;gFACgF;AAChF,wBAAgB,eAAe,sBAkC9B;AAED;;;;;;;GAOG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,gBAAgB,GAAG,KAAK,CAAC,aAAa,CAajF;AAED,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,gBAAgB,CAAA;IACxB,QAAQ,CAAC,EAAE,YAAY,CAAA;IACvB,UAAU,CAAC,EAAE,oBAAoB,CAAA;IACjC,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAA;IACnC,KAAK,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAA;IAClC,QAAQ,CAAC,EAAE,SAAS,iBAAiB,EAAE,CAAA;CACxC;AAED,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,uBAAuB,GAAG,KAAK,CAAC,aAAa,CAgBtF"}

package/dist/index.cjs

@@ -229,92 +229,6 @@ function matchPath(pattern, path) {
 function Link({ to, children, ...rest }) {
   return React6__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);
-  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));
-}
 
 // src/format.ts
 function formatMoney(value, currency = "BRL", locale = "pt-BR") {
@@ -367,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,
@@ -419,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",
@@ -441,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,
@@ -549,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",
@@ -737,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",
@@ -751,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)",
@@ -907,6 +948,7 @@ function StorefrontHeader() {
   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",
@@ -920,7 +962,7 @@ 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: [
-              showSearch ? /* @__PURE__ */ jsxRuntime.jsx(SearchInput, { className: "hidden w-full max-w-xs sm:block" }) : /* @__PURE__ */ jsxRuntime.jsx("div", {}),
+              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, {}) })
             ] }),
@@ -930,7 +972,7 @@ function StorefrontHeader() {
           // 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: [
-              showSearch ? /* @__PURE__ */ jsxRuntime.jsx(SearchInput, { className: "hidden w-full max-w-sm sm:block" }) : /* @__PURE__ */ jsxRuntime.jsx("div", {}),
+              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, {}) })
             ] }),
@@ -942,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: [
-              showSearch && /* @__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" }),
-            showSearch && /* @__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, {})
+            ] })
           ] })
         )
       ]
@@ -2960,7 +3004,8 @@ 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 ?? "" };
 }
@@ -4440,6 +4485,15 @@ function initStorefrontRuntime(config) {
   } 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."
@@ -4799,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", {
@@ -4860,6 +4976,7 @@ exports.defineStorefrontConfig = defineStorefrontConfig;
 exports.defineStorefrontRoutes = defineStorefrontRoutes;
 exports.defineStorefrontSections = defineStorefrontSections;
 exports.establishCustomerSession = establishCustomerSession;
+exports.foodTemplate = foodTemplate;
 exports.formatMoney = formatMoney;
 exports.formatProductOptionSelection = formatProductOptionSelection;
 exports.getCustomerAuthAdapter = getCustomerAuthAdapter;