@zevcommerce/theme-starter 1.0.0 → 1.0.1

package/dist/index.mjs

@@ -0,0 +1,1431 @@
+// src/index.ts
+import { defineTheme } from "@zevcommerce/theme-sdk";
+
+// src/settings.ts
+import { defineSettings } from "@zevcommerce/theme-sdk";
+var settingsSchema = defineSettings([
+  // ============================================================
+  // BRAND
+  // ============================================================
+  {
+    name: "Brand",
+    icon: "palette",
+    settings: [
+      { type: "color", id: "brand.primary", label: "Primary Color", default: "#2563EB" },
+      { type: "color", id: "brand.background", label: "Background Color", default: "#ffffff" },
+      { type: "color", id: "brand.text", label: "Text Color", default: "#374151" },
+      { type: "color", id: "brand.accent", label: "Accent Color", default: "#F59E0B" },
+      {
+        type: "select",
+        id: "brand.font",
+        label: "Body Font",
+        default: "Inter",
+        options: [
+          { value: "Inter", label: "Inter" },
+          { value: "Roboto", label: "Roboto" },
+          { value: "Open Sans", label: "Open Sans" },
+          { value: "Poppins", label: "Poppins" },
+          { value: "Lato", label: "Lato" }
+        ]
+      }
+    ]
+  },
+  // ============================================================
+  // HEADER
+  // ============================================================
+  {
+    name: "Header",
+    icon: "layout",
+    settings: [
+      { type: "image", id: "header.logo", label: "Logo Image" },
+      { type: "range", id: "header.logoHeight", label: "Logo Height (px)", min: 20, max: 80, step: 4, default: 36 },
+      { type: "checkbox", id: "header.sticky", label: "Sticky Header", default: true },
+      { type: "checkbox", id: "header.showSearch", label: "Show Search Icon", default: true },
+      { type: "text", id: "header.menuHandle", label: "Menu Handle", default: "main-menu" }
+    ]
+  },
+  // ============================================================
+  // HERO BANNER
+  // ============================================================
+  {
+    name: "Hero Banner",
+    icon: "image",
+    settings: [
+      { type: "checkbox", id: "hero.enabled", label: "Show Hero", default: true },
+      { type: "image", id: "hero.backgroundImage", label: "Background Image" },
+      { type: "text", id: "hero.heading", label: "Heading", default: "Welcome to our store" },
+      { type: "textarea", id: "hero.subheading", label: "Subheading", default: "Discover amazing products at great prices." },
+      { type: "text", id: "hero.buttonText", label: "Button Text", default: "Shop Now" },
+      { type: "text", id: "hero.buttonLink", label: "Button Link", default: "/collections/all" },
+      { type: "range", id: "hero.overlayOpacity", label: "Overlay Opacity", min: 0, max: 100, step: 5, default: 50 },
+      { type: "color", id: "hero.overlayColor", label: "Overlay Color", default: "#000000" },
+      { type: "color", id: "hero.textColor", label: "Text Color", default: "#ffffff" }
+    ]
+  },
+  // ============================================================
+  // PRODUCTS
+  // ============================================================
+  {
+    name: "Products",
+    icon: "shopping-bag",
+    settings: [
+      { type: "checkbox", id: "products.enabled", label: "Show Featured Products", default: true },
+      { type: "text", id: "products.heading", label: "Section Heading", default: "Featured Products" },
+      { type: "collection_picker", id: "products.collection", label: "Collection", default: "all" },
+      { type: "range", id: "products.limit", label: "Number of Products", min: 4, max: 24, step: 4, default: 8 },
+      {
+        type: "select",
+        id: "products.columns",
+        label: "Grid Columns (Desktop)",
+        default: "4",
+        options: [
+          { value: "2", label: "2 Columns" },
+          { value: "3", label: "3 Columns" },
+          { value: "4", label: "4 Columns" }
+        ]
+      }
+    ]
+  },
+  // ============================================================
+  // CONTACT
+  // ============================================================
+  {
+    name: "Contact",
+    icon: "phone",
+    settings: [
+      { type: "checkbox", id: "contact.enabled", label: "Show Contact Section", default: false },
+      { type: "text", id: "contact.heading", label: "Section Heading", default: "Get in Touch" },
+      { type: "checkbox", id: "contact.showPhone", label: "Show Phone", default: true },
+      { type: "text", id: "contact.phone", label: "Phone Number", default: "" },
+      { type: "checkbox", id: "contact.showEmail", label: "Show Email", default: true },
+      { type: "text", id: "contact.email", label: "Email Address", default: "" },
+      { type: "checkbox", id: "contact.showWhatsApp", label: "Show WhatsApp", default: false },
+      { type: "text", id: "contact.whatsapp", label: "WhatsApp Number", default: "" },
+      { type: "checkbox", id: "contact.showAddress", label: "Show Address", default: false },
+      { type: "textarea", id: "contact.address", label: "Address", default: "" }
+    ]
+  },
+  // ============================================================
+  // FOOTER
+  // ============================================================
+  {
+    name: "Footer",
+    icon: "align-bottom",
+    settings: [
+      { type: "textarea", id: "footer.description", label: "Store Description", default: "" },
+      { type: "text", id: "footer.menuHandle", label: "Footer Menu Handle", default: "footer" },
+      { type: "text", id: "footer.copyright", label: "Copyright Text", default: "" },
+      { type: "text", id: "footer.instagram", label: "Instagram URL", default: "" },
+      { type: "text", id: "footer.facebook", label: "Facebook URL", default: "" },
+      { type: "text", id: "footer.twitter", label: "Twitter / X URL", default: "" },
+      { type: "text", id: "footer.tiktok", label: "TikTok URL", default: "" }
+    ]
+  },
+  // ============================================================
+  // ANNOUNCEMENT
+  // ============================================================
+  {
+    name: "Announcement",
+    icon: "megaphone",
+    settings: [
+      { type: "checkbox", id: "announcement.enabled", label: "Show Announcement Bar", default: false },
+      { type: "text", id: "announcement.text", label: "Announcement Text", default: "Free shipping on orders over $50!" },
+      { type: "color", id: "announcement.backgroundColor", label: "Background Color", default: "#2563EB" },
+      { type: "color", id: "announcement.textColor", label: "Text Color", default: "#ffffff" }
+    ]
+  }
+]);
+
+// src/sections/Header.tsx
+import { useState, useEffect, useRef } from "react";
+import Link from "next/link";
+import { useTheme, useCartStore, resolveMenuUrl, getStorePermalink, getProducts } from "@zevcommerce/storefront-api";
+import { useRouter, useParams } from "next/navigation";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function Header() {
+  const { theme: theme2, storeConfig, menus } = useTheme();
+  const { openCart, items } = useCartStore();
+  const router = useRouter();
+  const params = useParams();
+  const header = theme2?.settings?.header;
+  const logoSrc = header?.logo || storeConfig?.storeLogo;
+  const logoHeight = header?.logoHeight || 36;
+  const sticky = header?.sticky !== false;
+  const showSearch = header?.showSearch !== false;
+  const menuHandle = header?.menuHandle || "main-menu";
+  const domain = params?.domain || storeConfig?.handle || "";
+  const storeName = storeConfig?.name || "Store";
+  const availableMenus = Object.values(menus || {});
+  const defaultMenu = availableMenus.find((m) => m.isDefault);
+  const activeMenu = menuHandle && menus?.[menuHandle] || defaultMenu || availableMenus[0];
+  const menuItems = activeMenu?.items || [];
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const [searchOpen, setSearchOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [suggestions, setSuggestions] = useState([]);
+  const searchRef = useRef(null);
+  const cartCount = items.reduce((sum, item) => sum + item.quantity, 0);
+  useEffect(() => {
+    document.body.style.overflow = mobileOpen || searchOpen ? "hidden" : "";
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [mobileOpen, searchOpen]);
+  useEffect(() => {
+    if (searchOpen) searchRef.current?.focus();
+  }, [searchOpen]);
+  useEffect(() => {
+    const handler = (e) => {
+      if (e.key === "Escape") {
+        setSearchOpen(false);
+        setMobileOpen(false);
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, []);
+  useEffect(() => {
+    const timer = setTimeout(async () => {
+      if (searchQuery.length > 2) {
+        try {
+          const { data } = await getProducts(domain, 1, 5, searchQuery);
+          setSuggestions(data);
+        } catch {
+          setSuggestions([]);
+        }
+      } else {
+        setSuggestions([]);
+      }
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [searchQuery, domain]);
+  const handleSearch = (e) => {
+    e.preventDefault();
+    if (!searchQuery.trim()) return;
+    router.push(getStorePermalink(domain, `/search?q=${encodeURIComponent(searchQuery)}`));
+    setSearchOpen(false);
+    setSearchQuery("");
+    setSuggestions([]);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "header",
+      {
+        style: {
+          backgroundColor: "var(--color-background)",
+          borderBottom: "1px solid #e5e7eb",
+          position: sticky ? "sticky" : "relative",
+          top: 0,
+          zIndex: 50
+        },
+        children: /* @__PURE__ */ jsx("div", { className: "container mx-auto px-4 sm:px-6", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between h-16", children: [
+          /* @__PURE__ */ jsx(Link, { href: getStorePermalink(domain, "/"), className: "flex-shrink-0", children: logoSrc ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: logoSrc,
+              alt: storeName,
+              style: { height: `${logoHeight}px`, width: "auto", objectFit: "contain" }
+            }
+          ) : /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "text-xl font-bold",
+              style: { color: "var(--color-text)" },
+              children: storeName
+            }
+          ) }),
+          /* @__PURE__ */ jsx("nav", { className: "hidden md:flex items-center gap-6", children: menuItems.map((item) => /* @__PURE__ */ jsx(
+            Link,
+            {
+              href: resolveMenuUrl(item, domain),
+              className: "text-sm font-medium transition-colors hover:opacity-70",
+              style: { color: "var(--color-text)" },
+              children: item.title
+            },
+            item.id
+          )) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            showSearch && /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => setSearchOpen(true),
+                "aria-label": "Search",
+                className: "p-2 transition-opacity hover:opacity-70",
+                style: { color: "var(--color-text)" },
+                children: /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                  /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
+                  /* @__PURE__ */ jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
+                ] })
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: openCart,
+                "aria-label": "Cart",
+                className: "relative p-2 transition-opacity hover:opacity-70",
+                style: { color: "var(--color-text)" },
+                children: [
+                  /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                    /* @__PURE__ */ jsx("path", { d: "M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z" }),
+                    /* @__PURE__ */ jsx("line", { x1: "3", y1: "6", x2: "21", y2: "6" }),
+                    /* @__PURE__ */ jsx("path", { d: "M16 10a4 4 0 01-8 0" })
+                  ] }),
+                  cartCount > 0 && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "absolute -top-0.5 -right-0.5 text-[10px] font-bold min-w-[18px] h-[18px] flex items-center justify-center rounded-full px-1",
+                      style: { backgroundColor: "var(--color-primary)", color: "#fff" },
+                      children: cartCount
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => setMobileOpen(true),
+                "aria-label": "Open menu",
+                className: "md:hidden p-2 transition-opacity hover:opacity-70",
+                style: { color: "var(--color-text)" },
+                children: /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                  /* @__PURE__ */ jsx("line", { x1: "3", y1: "6", x2: "21", y2: "6" }),
+                  /* @__PURE__ */ jsx("line", { x1: "3", y1: "12", x2: "21", y2: "12" }),
+                  /* @__PURE__ */ jsx("line", { x1: "3", y1: "18", x2: "21", y2: "18" })
+                ] })
+              }
+            )
+          ] })
+        ] }) })
+      }
+    ),
+    searchOpen && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "fixed inset-0 z-[200] flex items-start justify-center pt-24",
+        style: { backgroundColor: "rgba(0,0,0,0.6)" },
+        onClick: (e) => {
+          if (e.target === e.currentTarget) {
+            setSearchOpen(false);
+            setSuggestions([]);
+          }
+        },
+        children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-lg mx-4 rounded-lg overflow-hidden", style: { backgroundColor: "var(--color-background)" }, children: [
+          /* @__PURE__ */ jsxs("form", { onSubmit: handleSearch, className: "flex items-center px-4 py-3 border-b", style: { borderColor: "#e5e7eb" }, children: [
+            /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", className: "mr-3 flex-shrink-0", style: { color: "var(--color-text)", opacity: 0.4 }, children: [
+              /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
+              /* @__PURE__ */ jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: searchRef,
+                type: "text",
+                value: searchQuery,
+                onChange: (e) => setSearchQuery(e.target.value),
+                placeholder: "Search products...",
+                className: "flex-1 text-sm outline-none bg-transparent",
+                style: { color: "var(--color-text)" }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  setSearchOpen(false);
+                  setSuggestions([]);
+                  setSearchQuery("");
+                },
+                className: "p-1 ml-2",
+                style: { color: "var(--color-text)", opacity: 0.4 },
+                children: /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [
+                  /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                  /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                ] })
+              }
+            )
+          ] }),
+          suggestions.length > 0 && /* @__PURE__ */ jsx("div", { className: "max-h-80 overflow-y-auto", children: suggestions.map((product) => /* @__PURE__ */ jsxs(
+            Link,
+            {
+              href: getStorePermalink(domain, `/products/${product.slug}`),
+              onClick: () => {
+                setSearchOpen(false);
+                setSuggestions([]);
+                setSearchQuery("");
+              },
+              className: "flex items-center gap-3 px-4 py-3 transition-colors hover:bg-gray-50",
+              children: [
+                product.media?.[0]?.url && /* @__PURE__ */ jsx("img", { src: product.media[0].url, alt: product.title, className: "w-10 h-10 object-cover rounded" }),
+                /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx("p", { className: "text-sm font-medium truncate", style: { color: "var(--color-text)" }, children: product.title }) })
+              ]
+            },
+            product.id
+          )) })
+        ] })
+      }
+    ),
+    mobileOpen && /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-[200] md:hidden", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "absolute inset-0",
+          style: { backgroundColor: "rgba(0,0,0,0.5)" },
+          onClick: () => setMobileOpen(false)
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "absolute left-0 top-0 bottom-0 w-[80%] max-w-[320px] flex flex-col",
+          style: { backgroundColor: "var(--color-background)" },
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-4 border-b", style: { borderColor: "#e5e7eb" }, children: [
+              /* @__PURE__ */ jsx(Link, { href: getStorePermalink(domain, "/"), onClick: () => setMobileOpen(false), children: logoSrc ? /* @__PURE__ */ jsx("img", { src: logoSrc, alt: storeName, style: { height: "28px", width: "auto" } }) : /* @__PURE__ */ jsx("span", { className: "text-lg font-bold", style: { color: "var(--color-text)" }, children: storeName }) }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => setMobileOpen(false),
+                  "aria-label": "Close menu",
+                  className: "p-1",
+                  style: { color: "var(--color-text)" },
+                  children: /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [
+                    /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                    /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                  ] })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("nav", { className: "flex-1 overflow-y-auto px-4 py-4", children: menuItems.map((item) => /* @__PURE__ */ jsx(
+              Link,
+              {
+                href: resolveMenuUrl(item, domain),
+                onClick: () => setMobileOpen(false),
+                className: "block py-3 text-sm font-medium border-b transition-opacity hover:opacity-70",
+                style: { color: "var(--color-text)", borderColor: "#f3f4f6" },
+                children: item.title
+              },
+              item.id
+            )) })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+var schema = {
+  type: "header",
+  name: "Header",
+  limit: 1,
+  settings: []
+};
+
+// src/sections/Announcement.tsx
+import { useTheme as useTheme2 } from "@zevcommerce/storefront-api";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Announcement() {
+  const { theme: theme2 } = useTheme2();
+  const announcement = theme2?.settings?.announcement;
+  if (!announcement?.enabled) return null;
+  const text = announcement.text || "Free shipping on orders over $50!";
+  const backgroundColor = announcement.backgroundColor || "#2563EB";
+  const textColor = announcement.textColor || "#ffffff";
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: "py-2.5 text-center",
+      style: { backgroundColor, color: textColor, fontFamily: "var(--font-body)" },
+      children: /* @__PURE__ */ jsx2("p", { className: "text-xs sm:text-sm font-medium px-4", children: text })
+    }
+  );
+}
+var schema2 = {
+  type: "announcement",
+  name: "Announcement Bar",
+  limit: 1,
+  settings: []
+};
+
+// src/sections/Hero.tsx
+import Link2 from "next/link";
+import { useTheme as useTheme3, getStorePermalink as getStorePermalink2 } from "@zevcommerce/storefront-api";
+import { useParams as useParams2 } from "next/navigation";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function Hero() {
+  const { theme: theme2, storeConfig } = useTheme3();
+  const params = useParams2();
+  const domain = params?.domain || storeConfig?.handle || "";
+  const hero = theme2?.settings?.hero;
+  if (!hero?.enabled) return null;
+  const heading = hero.heading || "Welcome to our store";
+  const subheading = hero.subheading || "";
+  const buttonText = hero.buttonText || "Shop Now";
+  const buttonLink = hero.buttonLink || "/collections/all";
+  const overlayOpacity = (hero.overlayOpacity ?? 50) / 100;
+  const overlayColor = hero.overlayColor || "#000000";
+  const textColor = hero.textColor || "#ffffff";
+  const resolveImage = (img) => {
+    if (!img) return void 0;
+    if (typeof img === "string") return img;
+    if (typeof img === "object" && img.url) return img.url;
+    return void 0;
+  };
+  const bgImage = resolveImage(hero.backgroundImage);
+  return /* @__PURE__ */ jsxs2(
+    "section",
+    {
+      className: "relative flex items-center justify-center min-h-[60vh] md:min-h-[75vh]",
+      style: {
+        backgroundImage: bgImage ? `url("${bgImage}")` : void 0,
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+        backgroundColor: !bgImage ? "#1f2937" : void 0
+      },
+      children: [
+        /* @__PURE__ */ jsx3(
+          "div",
+          {
+            className: "absolute inset-0",
+            style: { backgroundColor: overlayColor, opacity: overlayOpacity }
+          }
+        ),
+        /* @__PURE__ */ jsxs2("div", { className: "relative z-10 container mx-auto px-4 sm:px-6 py-16 text-center", children: [
+          /* @__PURE__ */ jsx3(
+            "h1",
+            {
+              className: "text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold mb-4 leading-tight",
+              style: { color: textColor },
+              children: heading
+            }
+          ),
+          subheading && /* @__PURE__ */ jsx3(
+            "p",
+            {
+              className: "text-base sm:text-lg md:text-xl max-w-2xl mx-auto mb-8 opacity-90",
+              style: { color: textColor },
+              children: subheading
+            }
+          ),
+          buttonText && /* @__PURE__ */ jsx3(
+            Link2,
+            {
+              href: getStorePermalink2(domain, buttonLink),
+              className: "btn-primary inline-flex items-center px-6 py-3 sm:px-8 sm:py-3.5 text-sm sm:text-base font-semibold rounded-lg transition-opacity hover:opacity-90",
+              style: { backgroundColor: "var(--color-primary)", color: "#ffffff" },
+              children: buttonText
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+var schema3 = {
+  type: "hero",
+  name: "Hero Banner",
+  limit: 1,
+  settings: []
+};
+
+// src/sections/FeaturedProducts.tsx
+import { useState as useState2, useEffect as useEffect2 } from "react";
+import Link3 from "next/link";
+import { useTheme as useTheme4, getCollection, ProductCard, getStorePermalink as getStorePermalink3 } from "@zevcommerce/storefront-api";
+import { useParams as useParams3 } from "next/navigation";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function FeaturedProducts() {
+  const { theme: theme2, storeConfig } = useTheme4();
+  const params = useParams3();
+  const domain = params?.domain || storeConfig?.handle || "";
+  const products_settings = theme2?.settings?.products;
+  if (!products_settings?.enabled) return null;
+  const heading = products_settings.heading || "Featured Products";
+  const collectionHandle = products_settings.collection || "all";
+  const limit = parseInt(products_settings.limit || "8");
+  const columns = parseInt(products_settings.columns || "4");
+  const [products, setProducts] = useState2([]);
+  const [loading, setLoading] = useState2(true);
+  useEffect2(() => {
+    async function fetchData() {
+      if (!domain || !collectionHandle) {
+        setLoading(false);
+        return;
+      }
+      setLoading(true);
+      try {
+        const collection = await getCollection(domain, collectionHandle);
+        if (collection) {
+          const productList = collection.products?.map((p) => p.product || p) || [];
+          setProducts(productList.slice(0, limit));
+        }
+      } catch (error) {
+        if (error?.response?.status !== 404) {
+          console.error("Error fetching products:", error);
+        }
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchData();
+  }, [domain, collectionHandle, limit]);
+  const gridColsMap = {
+    2: "sm:grid-cols-2",
+    3: "sm:grid-cols-2 lg:grid-cols-3",
+    4: "sm:grid-cols-2 lg:grid-cols-4"
+  };
+  const gridColsClass = gridColsMap[columns] || "sm:grid-cols-2 lg:grid-cols-4";
+  if (loading) {
+    return /* @__PURE__ */ jsx4("section", { className: "py-12 md:py-16", style: { backgroundColor: "var(--color-background)" }, children: /* @__PURE__ */ jsx4("div", { className: "container mx-auto px-4 sm:px-6", children: /* @__PURE__ */ jsxs3("div", { className: "animate-pulse", children: [
+      /* @__PURE__ */ jsx4("div", { className: "h-8 w-48 mb-8 rounded", style: { backgroundColor: "#e5e7eb" } }),
+      /* @__PURE__ */ jsx4("div", { className: `grid grid-cols-2 ${gridColsClass} gap-4 sm:gap-6`, children: [...Array(columns)].map((_, i) => /* @__PURE__ */ jsx4("div", { className: "aspect-[3/4] rounded-lg", style: { backgroundColor: "#e5e7eb" } }, i)) })
+    ] }) }) });
+  }
+  if (products.length === 0) return null;
+  return /* @__PURE__ */ jsx4("section", { className: "py-12 md:py-16", style: { backgroundColor: "var(--color-background)" }, children: /* @__PURE__ */ jsxs3("div", { className: "container mx-auto px-4 sm:px-6", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between mb-8", children: [
+      /* @__PURE__ */ jsx4(
+        "h2",
+        {
+          className: "text-2xl md:text-3xl font-bold",
+          style: { color: "var(--color-text)" },
+          children: heading
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        Link3,
+        {
+          href: getStorePermalink3(domain, `/collections/${collectionHandle}`),
+          className: "text-sm font-medium transition-opacity hover:opacity-70",
+          style: { color: "var(--color-primary)" },
+          children: "View All"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx4("div", { className: `grid grid-cols-2 ${gridColsClass} gap-4 sm:gap-6`, children: products.map((product) => /* @__PURE__ */ jsx4(
+      ProductCard,
+      {
+        product,
+        domain
+      },
+      product.id
+    )) })
+  ] }) });
+}
+var schema4 = {
+  type: "featured-products",
+  name: "Featured Products",
+  limit: 1,
+  settings: []
+};
+
+// src/sections/ContactInfo.tsx
+import { useTheme as useTheme5 } from "@zevcommerce/storefront-api";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function ContactInfo() {
+  const { theme: theme2 } = useTheme5();
+  const contact = theme2?.settings?.contact;
+  if (!contact?.enabled) return null;
+  const heading = contact.heading || "Get in Touch";
+  const showPhone = contact.showPhone && contact.phone;
+  const showEmail = contact.showEmail && contact.email;
+  const showWhatsApp = contact.showWhatsApp && contact.whatsapp;
+  const showAddress = contact.showAddress && contact.address;
+  const hasItems = showPhone || showEmail || showWhatsApp || showAddress;
+  if (!hasItems) return null;
+  const cards = [];
+  if (showPhone) {
+    cards.push({
+      icon: /* @__PURE__ */ jsx5("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx5("path", { d: "M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z" }) }),
+      label: "Phone",
+      value: contact.phone,
+      href: `tel:${contact.phone}`
+    });
+  }
+  if (showEmail) {
+    cards.push({
+      icon: /* @__PURE__ */ jsxs4("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ jsx5("path", { d: "M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" }),
+        /* @__PURE__ */ jsx5("polyline", { points: "22,6 12,13 2,6" })
+      ] }),
+      label: "Email",
+      value: contact.email,
+      href: `mailto:${contact.email}`
+    });
+  }
+  if (showWhatsApp) {
+    const waNumber = contact.whatsapp.replace(/[^0-9]/g, "");
+    cards.push({
+      icon: /* @__PURE__ */ jsx5("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx5("path", { d: "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" }) }),
+      label: "WhatsApp",
+      value: contact.whatsapp,
+      href: `https://wa.me/${waNumber}`
+    });
+  }
+  if (showAddress) {
+    cards.push({
+      icon: /* @__PURE__ */ jsxs4("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ jsx5("path", { d: "M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" }),
+        /* @__PURE__ */ jsx5("circle", { cx: "12", cy: "10", r: "3" })
+      ] }),
+      label: "Address",
+      value: contact.address
+    });
+  }
+  return /* @__PURE__ */ jsx5("section", { className: "py-12 md:py-16", style: { backgroundColor: "var(--color-background)" }, children: /* @__PURE__ */ jsxs4("div", { className: "container mx-auto px-4 sm:px-6", children: [
+    /* @__PURE__ */ jsx5(
+      "h2",
+      {
+        className: "text-2xl md:text-3xl font-bold text-center mb-10",
+        style: { color: "var(--color-text)" },
+        children: heading
+      }
+    ),
+    /* @__PURE__ */ jsx5("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 max-w-4xl mx-auto", children: cards.map((card, i) => {
+      const content = /* @__PURE__ */ jsxs4(
+        "div",
+        {
+          className: "flex flex-col items-center text-center p-6 rounded-lg border transition-shadow hover:shadow-md",
+          style: { borderColor: "#e5e7eb" },
+          children: [
+            /* @__PURE__ */ jsx5(
+              "div",
+              {
+                className: "mb-3",
+                style: { color: "var(--color-primary)" },
+                children: card.icon
+              }
+            ),
+            /* @__PURE__ */ jsx5("h3", { className: "text-xs font-semibold uppercase tracking-wider mb-1", style: { color: "var(--color-text)", opacity: 0.5 }, children: card.label }),
+            /* @__PURE__ */ jsx5("p", { className: "text-sm font-medium", style: { color: "var(--color-text)" }, children: card.value })
+          ]
+        },
+        i
+      );
+      if (card.href) {
+        return /* @__PURE__ */ jsx5("a", { href: card.href, target: card.label === "WhatsApp" ? "_blank" : void 0, rel: "noopener noreferrer", children: content }, i);
+      }
+      return content;
+    }) })
+  ] }) });
+}
+var schema5 = {
+  type: "contact-info",
+  name: "Contact Info",
+  limit: 1,
+  settings: []
+};
+
+// src/sections/Footer.tsx
+import Link4 from "next/link";
+import { useTheme as useTheme6, resolveMenuUrl as resolveMenuUrl2, getStorePermalink as getStorePermalink4 } from "@zevcommerce/storefront-api";
+import { useParams as useParams4 } from "next/navigation";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function Footer() {
+  const { theme: theme2, storeConfig, menus } = useTheme6();
+  const params = useParams4();
+  const domain = params?.domain || storeConfig?.handle || "";
+  const footer = theme2?.settings?.footer;
+  const storeName = storeConfig?.name || "Store";
+  const logoSrc = storeConfig?.storeLogo;
+  const description = footer?.description || "";
+  const menuHandle = footer?.menuHandle || "footer";
+  const copyright = footer?.copyright || `${(/* @__PURE__ */ new Date()).getFullYear()} ${storeName}. All rights reserved.`;
+  const socialLinks = [];
+  if (footer?.instagram) {
+    socialLinks.push({
+      platform: "Instagram",
+      url: footer.instagram,
+      icon: /* @__PURE__ */ jsxs5("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ jsx6("rect", { x: "2", y: "2", width: "20", height: "20", rx: "5", ry: "5" }),
+        /* @__PURE__ */ jsx6("circle", { cx: "12", cy: "12", r: "4" }),
+        /* @__PURE__ */ jsx6("circle", { cx: "17.5", cy: "6.5", r: "0.5", fill: "currentColor" })
+      ] })
+    });
+  }
+  if (footer?.facebook) {
+    socialLinks.push({
+      platform: "Facebook",
+      url: footer.facebook,
+      icon: /* @__PURE__ */ jsx6("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx6("path", { d: "M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" }) })
+    });
+  }
+  if (footer?.twitter) {
+    socialLinks.push({
+      platform: "Twitter",
+      url: footer.twitter,
+      icon: /* @__PURE__ */ jsx6("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx6("path", { d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" }) })
+    });
+  }
+  if (footer?.tiktok) {
+    socialLinks.push({
+      platform: "TikTok",
+      url: footer.tiktok,
+      icon: /* @__PURE__ */ jsx6("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx6("path", { d: "M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-2.88 2.5 2.89 2.89 0 01-2.89-2.89 2.89 2.89 0 012.89-2.89c.28 0 .54.04.79.1V9.01a6.33 6.33 0 00-.79-.05 6.34 6.34 0 00-6.34 6.34 6.34 6.34 0 006.34 6.34 6.34 6.34 0 006.33-6.34V9.04a8.28 8.28 0 004.84 1.55V7.14a4.85 4.85 0 01-1.07-.45z" }) })
+    });
+  }
+  const footerMenu = menus?.[menuHandle];
+  const menuItems = footerMenu?.items || [];
+  return /* @__PURE__ */ jsx6(
+    "footer",
+    {
+      className: "py-12 md:py-16 border-t",
+      style: { backgroundColor: "var(--color-background)", borderColor: "#e5e7eb" },
+      children: /* @__PURE__ */ jsxs5("div", { className: "container mx-auto px-4 sm:px-6", children: [
+        /* @__PURE__ */ jsxs5("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-10 md:gap-12", children: [
+          /* @__PURE__ */ jsxs5("div", { children: [
+            /* @__PURE__ */ jsx6(Link4, { href: getStorePermalink4(domain, "/"), className: "inline-block mb-4", children: logoSrc ? /* @__PURE__ */ jsx6("img", { src: logoSrc, alt: storeName, className: "h-8 w-auto object-contain" }) : /* @__PURE__ */ jsx6("span", { className: "text-lg font-bold", style: { color: "var(--color-text)" }, children: storeName }) }),
+            description && /* @__PURE__ */ jsx6("p", { className: "text-sm leading-relaxed max-w-xs", style: { color: "var(--color-text)", opacity: 0.6 }, children: description }),
+            socialLinks.length > 0 && /* @__PURE__ */ jsx6("div", { className: "flex items-center gap-4 mt-5", children: socialLinks.map((link, i) => /* @__PURE__ */ jsx6(
+              "a",
+              {
+                href: link.url,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                "aria-label": link.platform,
+                className: "transition-opacity hover:opacity-70",
+                style: { color: "var(--color-text)", opacity: 0.5 },
+                children: link.icon
+              },
+              i
+            )) })
+          ] }),
+          menuItems.length > 0 && /* @__PURE__ */ jsxs5("div", { children: [
+            /* @__PURE__ */ jsx6("h3", { className: "text-sm font-semibold uppercase tracking-wider mb-4", style: { color: "var(--color-text)" }, children: "Quick Links" }),
+            /* @__PURE__ */ jsx6("nav", { className: "flex flex-col gap-2.5", children: menuItems.map((item) => /* @__PURE__ */ jsx6(
+              Link4,
+              {
+                href: resolveMenuUrl2(item, domain),
+                className: "text-sm transition-opacity hover:opacity-70",
+                style: { color: "var(--color-text)", opacity: 0.6 },
+                children: item.title
+              },
+              item.id
+            )) })
+          ] }),
+          /* @__PURE__ */ jsxs5("div", { children: [
+            /* @__PURE__ */ jsx6("h3", { className: "text-sm font-semibold uppercase tracking-wider mb-4", style: { color: "var(--color-text)" }, children: "Store" }),
+            /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-2.5 text-sm", style: { color: "var(--color-text)", opacity: 0.6 }, children: [
+              storeConfig?.email && /* @__PURE__ */ jsx6("p", { children: storeConfig.email }),
+              storeConfig?.phone && /* @__PURE__ */ jsx6("p", { children: storeConfig.phone })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx6("div", { className: "mt-12 pt-8 border-t text-center", style: { borderColor: "#e5e7eb" }, children: /* @__PURE__ */ jsxs5("p", { className: "text-xs", style: { color: "var(--color-text)", opacity: 0.4 }, children: [
+          "\xA9 ",
+          copyright
+        ] }) })
+      ] })
+    }
+  );
+}
+var schema6 = {
+  type: "footer",
+  name: "Footer",
+  limit: 1,
+  settings: []
+};
+
+// src/sections/ProductDetail.tsx
+import { useState as useState3, useEffect as useEffect3 } from "react";
+import Link5 from "next/link";
+import { useTheme as useTheme7, useProduct, useCartStore as useCartStore2, getStorePermalink as getStorePermalink5 } from "@zevcommerce/storefront-api";
+import { useParams as useParams5 } from "next/navigation";
+
+// src/helpers/format-price.ts
+var CURRENCY_LOCALES = {
+  USD: "en-US",
+  EUR: "de-DE",
+  GBP: "en-GB",
+  NGN: "en-NG",
+  GHS: "en-GH",
+  KES: "en-KE",
+  ZAR: "en-ZA",
+  CAD: "en-CA",
+  AUD: "en-AU",
+  JPY: "ja-JP",
+  INR: "en-IN",
+  BRL: "pt-BR",
+  MXN: "es-MX",
+  AED: "ar-AE",
+  SAR: "ar-SA",
+  XOF: "fr-SN",
+  XAF: "fr-CM",
+  TZS: "en-TZ",
+  UGX: "en-UG",
+  RWF: "en-RW"
+};
+function formatPrice(amount, currency = "NGN") {
+  const value = typeof amount === "string" ? parseFloat(amount) : amount;
+  if (isNaN(value)) return `${currency} 0.00`;
+  const locale = CURRENCY_LOCALES[currency] || "en-US";
+  try {
+    return new Intl.NumberFormat(locale, {
+      style: "currency",
+      currency,
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2
+    }).format(value);
+  } catch {
+    return `${currency} ${value.toFixed(2)}`;
+  }
+}
+
+// src/sections/ProductDetail.tsx
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function ProductDetail() {
+  const { theme: theme2, storeConfig } = useTheme7();
+  const { product, selectedVariant, quantity, setQuantity, setSelectedVariant } = useProduct();
+  const { addItem, openCart } = useCartStore2();
+  const params = useParams5();
+  const domain = params?.domain || storeConfig?.handle || "";
+  const currency = storeConfig?.currency || "NGN";
+  const [activeImageIndex, setActiveImageIndex] = useState3(0);
+  const [addedToCart, setAddedToCart] = useState3(false);
+  useEffect3(() => {
+    setActiveImageIndex(0);
+    setAddedToCart(false);
+  }, [product?.id]);
+  if (!product) {
+    return /* @__PURE__ */ jsx7("div", { className: "py-24 text-center", style: { backgroundColor: "var(--color-background)" }, children: /* @__PURE__ */ jsx7("p", { className: "text-sm", style: { color: "var(--color-text)", opacity: 0.5 }, children: "Product not found" }) });
+  }
+  const images = product.media || [];
+  const variants = product.variants || [];
+  const hasVariants = variants.length > 1;
+  const currentVariant = selectedVariant || variants[0];
+  const price = parseFloat(currentVariant?.price || product.price || "0");
+  const compareAtPrice = parseFloat(currentVariant?.compareAtPrice || product.compareAtPrice || "0");
+  const isOnSale = compareAtPrice > 0 && compareAtPrice > price;
+  const optionGroups = {};
+  variants.forEach((v) => {
+    (v.options || []).forEach((opt) => {
+      if (!optionGroups[opt.name]) optionGroups[opt.name] = [];
+      if (!optionGroups[opt.name].includes(opt.value)) {
+        optionGroups[opt.name].push(opt.value);
+      }
+    });
+  });
+  const handleAddToCart = () => {
+    if (!currentVariant) return;
+    addItem({
+      variantId: currentVariant.id,
+      productId: product.id,
+      title: product.title,
+      variantTitle: currentVariant.title || "",
+      price: currentVariant.price,
+      quantity,
+      image: images[0]?.url || "",
+      slug: product.slug
+    });
+    setAddedToCart(true);
+    openCart();
+    setTimeout(() => setAddedToCart(false), 2e3);
+  };
+  return /* @__PURE__ */ jsx7("section", { className: "py-8 md:py-16", style: { backgroundColor: "var(--color-background)" }, children: /* @__PURE__ */ jsxs6("div", { className: "container mx-auto px-4 sm:px-6 max-w-6xl", children: [
+    /* @__PURE__ */ jsxs6("nav", { className: "flex items-center gap-2 text-xs mb-8", style: { color: "var(--color-text)", opacity: 0.5 }, children: [
+      /* @__PURE__ */ jsx7(Link5, { href: getStorePermalink5(domain, "/"), className: "hover:opacity-70 transition-opacity", children: "Home" }),
+      /* @__PURE__ */ jsx7("span", { children: "/" }),
+      /* @__PURE__ */ jsx7(Link5, { href: getStorePermalink5(domain, "/collections/all"), className: "hover:opacity-70 transition-opacity", children: "Products" }),
+      /* @__PURE__ */ jsx7("span", { children: "/" }),
+      /* @__PURE__ */ jsx7("span", { style: { opacity: 1, color: "var(--color-text)" }, children: product.title })
+    ] }),
+    /* @__PURE__ */ jsxs6("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12", children: [
+      /* @__PURE__ */ jsxs6("div", { children: [
+        images.length > 0 && /* @__PURE__ */ jsxs6("div", { className: "relative aspect-square mb-3 rounded-lg overflow-hidden", style: { backgroundColor: "#f3f4f6" }, children: [
+          /* @__PURE__ */ jsx7(
+            "img",
+            {
+              src: images[activeImageIndex]?.url,
+              alt: product.title,
+              className: "w-full h-full object-cover"
+            }
+          ),
+          isOnSale && /* @__PURE__ */ jsx7(
+            "span",
+            {
+              className: "absolute top-3 left-3 text-xs font-semibold px-2.5 py-1 rounded",
+              style: { backgroundColor: "#ef4444", color: "#fff" },
+              children: "Sale"
+            }
+          )
+        ] }),
+        images.length > 1 && /* @__PURE__ */ jsx7("div", { className: "flex gap-2 overflow-x-auto", children: images.map((img, i) => /* @__PURE__ */ jsx7(
+          "button",
+          {
+            onClick: () => setActiveImageIndex(i),
+            className: "flex-shrink-0 w-16 h-16 rounded overflow-hidden border-2 transition-colors",
+            style: {
+              borderColor: i === activeImageIndex ? "var(--color-primary)" : "transparent"
+            },
+            children: /* @__PURE__ */ jsx7("img", { src: img.url, alt: "", className: "w-full h-full object-cover" })
+          },
+          i
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxs6("div", { className: "lg:sticky lg:top-24 lg:self-start", children: [
+        product.vendor && /* @__PURE__ */ jsx7("p", { className: "text-xs font-medium uppercase tracking-wider mb-2", style: { color: "var(--color-primary)" }, children: product.vendor }),
+        /* @__PURE__ */ jsx7(
+          "h1",
+          {
+            className: "text-2xl md:text-3xl font-bold mb-3",
+            style: { color: "var(--color-text)" },
+            children: product.title
+          }
+        ),
+        /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-3 mb-6", children: [
+          /* @__PURE__ */ jsx7("span", { className: "text-xl font-bold", style: { color: "var(--color-text)" }, children: formatPrice(price, currency) }),
+          isOnSale && /* @__PURE__ */ jsx7("span", { className: "text-base line-through", style: { color: "var(--color-text)", opacity: 0.4 }, children: formatPrice(compareAtPrice, currency) })
+        ] }),
+        hasVariants && Object.entries(optionGroups).map(([optionName, values]) => {
+          const currentValue = currentVariant?.options?.find((o) => o.name === optionName)?.value;
+          return /* @__PURE__ */ jsxs6("div", { className: "mb-5", children: [
+            /* @__PURE__ */ jsxs6("label", { className: "block text-sm font-medium mb-2", style: { color: "var(--color-text)" }, children: [
+              optionName,
+              ": ",
+              /* @__PURE__ */ jsx7("span", { className: "font-normal", children: currentValue })
+            ] }),
+            /* @__PURE__ */ jsx7("div", { className: "flex flex-wrap gap-2", children: values.map((val) => {
+              const isSelected = currentValue === val;
+              return /* @__PURE__ */ jsx7(
+                "button",
+                {
+                  onClick: () => {
+                    const match = variants.find(
+                      (v) => v.options?.some((o) => o.name === optionName && o.value === val)
+                    );
+                    if (match) setSelectedVariant(match);
+                  },
+                  className: "px-4 py-2 text-sm border rounded transition-colors",
+                  style: {
+                    backgroundColor: isSelected ? "var(--color-primary)" : "transparent",
+                    color: isSelected ? "#fff" : "var(--color-text)",
+                    borderColor: isSelected ? "var(--color-primary)" : "#d1d5db"
+                  },
+                  children: val
+                },
+                val
+              );
+            }) })
+          ] }, optionName);
+        }),
+        /* @__PURE__ */ jsxs6("div", { className: "mb-6", children: [
+          /* @__PURE__ */ jsx7("label", { className: "block text-sm font-medium mb-2", style: { color: "var(--color-text)" }, children: "Quantity" }),
+          /* @__PURE__ */ jsxs6("div", { className: "inline-flex items-center border rounded", style: { borderColor: "#d1d5db" }, children: [
+            /* @__PURE__ */ jsx7(
+              "button",
+              {
+                onClick: () => setQuantity(Math.max(1, quantity - 1)),
+                className: "px-3 py-2 text-sm hover:bg-gray-50 transition-colors",
+                style: { color: "var(--color-text)" },
+                children: "-"
+              }
+            ),
+            /* @__PURE__ */ jsx7("span", { className: "px-4 py-2 text-sm font-medium", style: { color: "var(--color-text)" }, children: quantity }),
+            /* @__PURE__ */ jsx7(
+              "button",
+              {
+                onClick: () => setQuantity(quantity + 1),
+                className: "px-3 py-2 text-sm hover:bg-gray-50 transition-colors",
+                style: { color: "var(--color-text)" },
+                children: "+"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx7(
+          "button",
+          {
+            onClick: handleAddToCart,
+            className: "w-full py-3.5 text-sm font-semibold rounded-lg transition-opacity hover:opacity-90",
+            style: { backgroundColor: "var(--color-primary)", color: "#fff" },
+            children: addedToCart ? "Added!" : "Add to Cart"
+          }
+        ),
+        product.description && /* @__PURE__ */ jsxs6("div", { className: "mt-8 pt-8 border-t", style: { borderColor: "#e5e7eb" }, children: [
+          /* @__PURE__ */ jsx7("h3", { className: "text-sm font-semibold mb-3", style: { color: "var(--color-text)" }, children: "Description" }),
+          /* @__PURE__ */ jsx7(
+            "div",
+            {
+              className: "text-sm leading-relaxed prose prose-sm max-w-none",
+              style: { color: "var(--color-text)", opacity: 0.7 },
+              dangerouslySetInnerHTML: { __html: product.description }
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] }) });
+}
+var schema7 = {
+  type: "product-detail",
+  name: "Product Detail",
+  settings: [],
+  disabled_on: { templates: ["*"] },
+  enabled_on: { templates: ["product_detail"] }
+};
+
+// src/sections/ProductList.tsx
+import { useTheme as useTheme8, useCollection, ProductCard as ProductCard2 } from "@zevcommerce/storefront-api";
+import { useParams as useParams6 } from "next/navigation";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+function ProductList() {
+  const { storeConfig } = useTheme8();
+  const { collection } = useCollection();
+  const params = useParams6();
+  const domain = params?.domain || storeConfig?.handle || "";
+  if (!collection) {
+    return /* @__PURE__ */ jsx8("div", { className: "py-24 text-center", style: { backgroundColor: "var(--color-background)" }, children: /* @__PURE__ */ jsxs7("div", { className: "animate-pulse flex flex-col items-center", children: [
+      /* @__PURE__ */ jsx8("div", { className: "h-8 w-48 rounded mb-4", style: { backgroundColor: "#e5e7eb" } }),
+      /* @__PURE__ */ jsx8("div", { className: "grid grid-cols-2 lg:grid-cols-4 gap-4 w-full max-w-6xl mx-auto px-4", children: [1, 2, 3, 4].map((i) => /* @__PURE__ */ jsx8("div", { className: "aspect-[3/4] rounded-lg", style: { backgroundColor: "#e5e7eb" } }, i)) })
+    ] }) });
+  }
+  const products = collection.products?.map((p) => p.product || p) || [];
+  return /* @__PURE__ */ jsx8("section", { className: "py-8 md:py-16", style: { backgroundColor: "var(--color-background)" }, children: /* @__PURE__ */ jsxs7("div", { className: "container mx-auto px-4 sm:px-6 max-w-6xl", children: [
+    /* @__PURE__ */ jsxs7("div", { className: "mb-8 md:mb-10", children: [
+      /* @__PURE__ */ jsx8(
+        "h1",
+        {
+          className: "text-2xl md:text-3xl font-bold mb-2",
+          style: { color: "var(--color-text)" },
+          children: collection.title
+        }
+      ),
+      collection.description && /* @__PURE__ */ jsx8("p", { className: "text-sm max-w-2xl", style: { color: "var(--color-text)", opacity: 0.6 }, children: collection.description })
+    ] }),
+    products.length > 0 ? /* @__PURE__ */ jsx8("div", { className: "grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6", children: products.map((product) => /* @__PURE__ */ jsx8(
+      ProductCard2,
+      {
+        product,
+        domain
+      },
+      product.id
+    )) }) : /* @__PURE__ */ jsx8("div", { className: "py-16 text-center", children: /* @__PURE__ */ jsx8("p", { className: "text-sm", style: { color: "var(--color-text)", opacity: 0.5 }, children: "No products found in this collection." }) })
+  ] }) });
+}
+var schema8 = {
+  type: "product-list",
+  name: "Product List",
+  settings: [],
+  disabled_on: { templates: ["*"] },
+  enabled_on: { templates: ["collection"] }
+};
+
+// src/sections/CartSection.tsx
+import Link6 from "next/link";
+import { useTheme as useTheme9, useCartStore as useCartStore3, getStorePermalink as getStorePermalink6 } from "@zevcommerce/storefront-api";
+import { useParams as useParams7 } from "next/navigation";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+function CartSection() {
+  const { storeConfig } = useTheme9();
+  const { items, totalPrice, removeItem, updateQuantity } = useCartStore3();
+  const params = useParams7();
+  const domain = params?.domain || storeConfig?.handle || "";
+  const currency = storeConfig?.currency || "NGN";
+  const total = typeof totalPrice === "function" ? totalPrice() : totalPrice;
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsx9("div", { className: "py-24 text-center", style: { backgroundColor: "var(--color-background)" }, children: /* @__PURE__ */ jsxs8("div", { className: "container mx-auto px-4 sm:px-6", children: [
+      /* @__PURE__ */ jsx9(
+        "div",
+        {
+          className: "w-16 h-16 mx-auto mb-6 rounded-full flex items-center justify-center",
+          style: { backgroundColor: "#f3f4f6" },
+          children: /* @__PURE__ */ jsxs8("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", style: { color: "var(--color-text)", opacity: 0.4 }, children: [
+            /* @__PURE__ */ jsx9("path", { d: "M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z" }),
+            /* @__PURE__ */ jsx9("line", { x1: "3", y1: "6", x2: "21", y2: "6" }),
+            /* @__PURE__ */ jsx9("path", { d: "M16 10a4 4 0 01-8 0" })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx9("h1", { className: "text-xl font-bold mb-2", style: { color: "var(--color-text)" }, children: "Your cart is empty" }),
+      /* @__PURE__ */ jsx9("p", { className: "text-sm mb-6", style: { color: "var(--color-text)", opacity: 0.5 }, children: "Start browsing to add items to your cart." }),
+      /* @__PURE__ */ jsx9(
+        Link6,
+        {
+          href: getStorePermalink6(domain, "/collections/all"),
+          className: "btn-primary",
+          children: "Browse Products"
+        }
+      )
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx9("section", { className: "py-8 md:py-16", style: { backgroundColor: "var(--color-background)" }, children: /* @__PURE__ */ jsxs8("div", { className: "container mx-auto px-4 sm:px-6 max-w-4xl", children: [
+    /* @__PURE__ */ jsxs8("h1", { className: "text-2xl md:text-3xl font-bold mb-8", style: { color: "var(--color-text)" }, children: [
+      "Your Cart",
+      /* @__PURE__ */ jsxs8("span", { className: "text-base font-normal ml-2", style: { opacity: 0.5 }, children: [
+        "(",
+        items.length,
+        " ",
+        items.length === 1 ? "item" : "items",
+        ")"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx9("div", { className: "divide-y", style: { borderColor: "#e5e7eb" }, children: items.map((item) => /* @__PURE__ */ jsxs8("div", { className: "flex gap-4 py-6", children: [
+      item.image && /* @__PURE__ */ jsx9(
+        Link6,
+        {
+          href: getStorePermalink6(domain, `/products/${item.slug}`),
+          className: "flex-shrink-0",
+          children: /* @__PURE__ */ jsx9(
+            "img",
+            {
+              src: item.image,
+              alt: item.title,
+              className: "w-20 h-20 sm:w-24 sm:h-24 object-cover rounded-lg"
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxs8("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ jsx9(
+          Link6,
+          {
+            href: getStorePermalink6(domain, `/products/${item.slug}`),
+            className: "text-sm font-medium hover:opacity-70 transition-opacity",
+            style: { color: "var(--color-text)" },
+            children: item.title
+          }
+        ),
+        item.variantTitle && /* @__PURE__ */ jsx9("p", { className: "text-xs mt-1", style: { color: "var(--color-text)", opacity: 0.5 }, children: item.variantTitle }),
+        /* @__PURE__ */ jsx9("p", { className: "text-sm font-semibold mt-2", style: { color: "var(--color-text)" }, children: formatPrice(parseFloat(item.price) * item.quantity, currency) }),
+        /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-3 mt-3", children: [
+          /* @__PURE__ */ jsxs8("div", { className: "inline-flex items-center border rounded text-sm", style: { borderColor: "#d1d5db" }, children: [
+            /* @__PURE__ */ jsx9(
+              "button",
+              {
+                onClick: () => updateQuantity(item.variantId, -1),
+                className: "px-2.5 py-1 hover:bg-gray-50 transition-colors",
+                style: { color: "var(--color-text)" },
+                children: "-"
+              }
+            ),
+            /* @__PURE__ */ jsx9("span", { className: "px-3 py-1", style: { color: "var(--color-text)" }, children: item.quantity }),
+            /* @__PURE__ */ jsx9(
+              "button",
+              {
+                onClick: () => updateQuantity(item.variantId, 1),
+                className: "px-2.5 py-1 hover:bg-gray-50 transition-colors",
+                style: { color: "var(--color-text)" },
+                children: "+"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx9(
+            "button",
+            {
+              onClick: () => removeItem(item.variantId),
+              className: "text-xs font-medium transition-opacity hover:opacity-70",
+              style: { color: "#ef4444" },
+              children: "Remove"
+            }
+          )
+        ] })
+      ] })
+    ] }, item.variantId)) }),
+    /* @__PURE__ */ jsxs8("div", { className: "mt-8 pt-6 border-t", style: { borderColor: "#e5e7eb" }, children: [
+      /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between mb-6", children: [
+        /* @__PURE__ */ jsx9("span", { className: "text-base font-semibold", style: { color: "var(--color-text)" }, children: "Total" }),
+        /* @__PURE__ */ jsx9("span", { className: "text-lg font-bold", style: { color: "var(--color-text)" }, children: formatPrice(total, currency) })
+      ] }),
+      /* @__PURE__ */ jsx9(
+        Link6,
+        {
+          href: getStorePermalink6(domain, "/checkout"),
+          className: "btn-primary w-full text-center block py-3.5",
+          children: "Proceed to Checkout"
+        }
+      )
+    ] })
+  ] }) });
+}
+var schema9 = {
+  type: "cart-page",
+  name: "Cart Page",
+  settings: [],
+  disabled_on: { templates: ["*"] },
+  enabled_on: { templates: ["cart"] }
+};
+
+// src/sections/CheckoutSection.tsx
+import { CheckoutForm } from "@zevcommerce/storefront-api";
+import { jsx as jsx10 } from "react/jsx-runtime";
+function CheckoutSection() {
+  return /* @__PURE__ */ jsx10("div", { className: "min-h-screen", style: { backgroundColor: "var(--color-background)" }, children: /* @__PURE__ */ jsx10("div", { className: "container mx-auto px-4 sm:px-6 py-8 md:py-16 max-w-4xl", children: /* @__PURE__ */ jsx10(CheckoutForm, {}) }) });
+}
+var schema10 = {
+  type: "checkout-page",
+  name: "Checkout Page",
+  settings: [],
+  disabled_on: { templates: ["*"] },
+  enabled_on: { templates: ["checkout"] }
+};
+
+// src/registry.ts
+var starterSectionRegistry = {
+  "header": { component: Header, schema },
+  "announcement": { component: Announcement, schema: schema2 },
+  "hero": { component: Hero, schema: schema3 },
+  "featured-products": { component: FeaturedProducts, schema: schema4 },
+  "contact-info": { component: ContactInfo, schema: schema5 },
+  "footer": { component: Footer, schema: schema6 },
+  "product-detail": { component: ProductDetail, schema: schema7 },
+  "product-list": { component: ProductList, schema: schema8 },
+  "cart-page": { component: CartSection, schema: schema9 },
+  "checkout-page": { component: CheckoutSection, schema: schema10 }
+};
+var starterBlockRegistry = {};
+
+// src/preset.json
+var preset_default = {
+  name: "Starter",
+  settings: {
+    brand: {
+      primary: "#2563EB",
+      background: "#ffffff",
+      text: "#374151",
+      accent: "#F59E0B",
+      font: "Inter"
+    },
+    header: {
+      logo: null,
+      logoHeight: 36,
+      sticky: true,
+      showSearch: true,
+      menuHandle: "main-menu"
+    },
+    hero: {
+      enabled: true,
+      backgroundImage: null,
+      heading: "Welcome to our store",
+      subheading: "Discover amazing products at great prices.",
+      buttonText: "Shop Now",
+      buttonLink: "/collections/all",
+      overlayOpacity: 50,
+      overlayColor: "#000000",
+      textColor: "#ffffff"
+    },
+    products: {
+      enabled: true,
+      heading: "Featured Products",
+      collection: "all",
+      limit: 8,
+      columns: "4"
+    },
+    contact: {
+      enabled: false,
+      heading: "Get in Touch",
+      showPhone: true,
+      phone: "",
+      showEmail: true,
+      email: "",
+      showWhatsApp: false,
+      whatsapp: "",
+      showAddress: false,
+      address: ""
+    },
+    footer: {
+      description: "",
+      menuHandle: "footer",
+      copyright: "",
+      instagram: "",
+      facebook: "",
+      twitter: "",
+      tiktok: ""
+    },
+    announcement: {
+      enabled: false,
+      text: "Free shipping on orders over $50!",
+      backgroundColor: "#2563EB",
+      textColor: "#ffffff"
+    }
+  },
+  sections: {
+    announcement_1: {
+      type: "announcement",
+      settings: {}
+    },
+    header_1: {
+      type: "header",
+      settings: {}
+    },
+    hero_1: {
+      type: "hero",
+      settings: {}
+    },
+    featured_products_1: {
+      type: "featured-products",
+      settings: {}
+    },
+    contact_info_1: {
+      type: "contact-info",
+      settings: {}
+    },
+    footer_1: {
+      type: "footer",
+      settings: {}
+    },
+    "main-product": {
+      type: "product-detail",
+      settings: {}
+    },
+    "main-collection": {
+      type: "product-list",
+      settings: {}
+    },
+    "main-cart": {
+      type: "cart-page",
+      settings: {}
+    },
+    "main-checkout": {
+      type: "checkout-page",
+      settings: {}
+    }
+  },
+  layout: {
+    header: [
+      "announcement_1",
+      "header_1"
+    ],
+    content: [
+      "hero_1",
+      "featured_products_1",
+      "contact_info_1"
+    ],
+    footer: [
+      "footer_1"
+    ]
+  },
+  templates: {
+    product_detail: { order: ["main-product"] },
+    collection: { order: ["main-collection"] },
+    cart: { order: ["main-cart"] },
+    checkout: { order: ["main-checkout"] }
+  }
+};
+
+// src/index.ts
+var theme = defineTheme({
+  handle: "starter",
+  name: "Starter",
+  version: "1.0.0",
+  author: {
+    name: "ZevCommerce",
+    url: "https://zevcommerce.com"
+  },
+  description: "A simple, mobile-first theme for ZevCommerce \u2014 perfect for getting started quickly.",
+  tags: ["simple", "mobile-first", "starter", "minimal", "responsive"],
+  settingsSchema,
+  defaultPreset: preset_default,
+  registry: {
+    sections: starterSectionRegistry,
+    blocks: starterBlockRegistry
+  }
+});
+var index_default = theme;
+export {
+  index_default as default,
+  settingsSchema,
+  starterBlockRegistry,
+  starterSectionRegistry
+};
+//# sourceMappingURL=index.mjs.map