@neowhale/storefront 0.2.7 → 0.2.8

package/dist/react/index.cjs

@@ -1277,69 +1277,171 @@ function DefaultLayout({
   const bg = lp.background_color || store?.theme?.background || "#050505";
   const fg = lp.text_color || store?.theme?.foreground || "#fafafa";
   const accent = store?.theme?.accent || qr.brand_color || "#E8E2D9";
-  const surface = store?.theme?.surface || "#111";
+  const surface = store?.theme?.surface || "#0C0C0C";
+  const surfaceLight = store?.theme?.surfaceLight || "#141414";
   const muted = store?.theme?.muted || "#888";
+  const border = store?.theme?.border || "#1C1C1C";
+  const fontDisplay = store?.theme?.fontDisplay || "system-ui, -apple-system, sans-serif";
+  const fontBody = store?.theme?.fontBody || "system-ui, -apple-system, sans-serif";
   const logoUrl = qr.logo_url || store?.logo_url;
-  const productImage = lp.image_url || product?.featured_image || product?.image_gallery?.[0] || null;
+  const productImage = lp.image_url || product?.featured_image || null;
   const productName = lp.title || product?.name || qr.name;
   const description = lp.description || product?.description || "";
-  const ctaText = lp.cta_text || (coa ? "View Lab Results" : "Learn More");
   const ctaUrl = lp.cta_url || qr.destination_url;
+  const categoryName = product?.category_name ?? null;
   const cf = product?.custom_fields;
   const thca = cf?.thca_percentage ?? null;
   const thc = cf?.d9_percentage ?? null;
   const cbd = cf?.cbd_total ?? null;
   const strainType = cf?.strain_type ?? null;
-  const categoryName = product?.category_name ?? null;
+  const batchNumber = cf?.batch_number ?? null;
+  const dateTested = cf?.date_tested ?? null;
+  const terpenes = cf?.terpenes ?? null;
+  const effects = cf?.effects ?? null;
+  const genetics = cf?.genetics ?? null;
+  const tagline = cf?.tagline ?? null;
+  const pricingData = product?.pricing_data;
+  const tiers = pricingData?.tiers?.sort((a, b) => (a.sort_order ?? 0) - (b.sort_order ?? 0)) ?? [];
+  const lowestPrice = tiers.length > 0 ? Math.min(...tiers.map((t) => t.default_price)) : null;
   const handleCOAClick = react.useCallback(() => {
     if (coa) setShowCOA(true);
   }, [coa]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { minHeight: "100dvh", background: bg, color: fg, fontFamily: "system-ui, -apple-system, sans-serif" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "1.5rem", display: "flex", justifyContent: "center" }, children: logoUrl && /* @__PURE__ */ jsxRuntime.jsx(
-      "img",
-      {
-        src: logoUrl,
-        alt: store?.name || "Store",
-        style: { height: 40, objectFit: "contain" }
-      }
-    ) }),
-    productImage && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "100%", aspectRatio: "1", overflow: "hidden", background: surface }, children: /* @__PURE__ */ jsxRuntime.jsx(
-      "img",
-      {
-        src: productImage,
-        alt: productName,
-        style: { width: "100%", height: "100%", objectFit: "cover" }
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "1.5rem", maxWidth: 480, margin: "0 auto" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "0.5rem", marginBottom: "0.75rem", flexWrap: "wrap" }, children: [
-        strainType && /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
-          padding: "0.25rem 0.75rem",
-          borderRadius: 999,
-          fontSize: "0.75rem",
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { minHeight: "100dvh", background: bg, color: fg, fontFamily: fontBody }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("header", { style: {
+      padding: "1rem 1.5rem",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      borderBottom: `1px solid ${border}`
+    }, children: [
+      logoUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logoUrl, alt: store?.name || "Store", style: { height: 32, objectFit: "contain" } }) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontFamily: fontDisplay, fontWeight: 600, fontSize: "1.1rem" }, children: store?.name || "" }),
+      store?.name && logoUrl && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.75rem", color: muted, fontWeight: 500 }, children: store.name })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+      display: "flex",
+      flexDirection: "column",
+      maxWidth: 640,
+      margin: "0 auto",
+      padding: "0 1.5rem"
+    }, children: [
+      productImage && /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+        marginTop: "1.5rem",
+        borderRadius: 8,
+        overflow: "hidden",
+        background: surface,
+        aspectRatio: "4/3",
+        maxHeight: 320,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }, children: /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          src: productImage,
+          alt: productName,
+          style: { width: "100%", height: "100%", objectFit: "cover" }
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "0.5rem", marginTop: "1.25rem", flexWrap: "wrap", alignItems: "center" }, children: [
+        categoryName && /* @__PURE__ */ jsxRuntime.jsx(Badge, { text: categoryName, bg: surfaceLight, color: accent }),
+        strainType && /* @__PURE__ */ jsxRuntime.jsx(Badge, { text: strainType, bg: strainBadgeColor(strainType), color: "#fff", bold: true }),
+        coa && /* @__PURE__ */ jsxRuntime.jsx(Badge, { text: "Lab Tested", bg: "rgba(34,197,94,0.15)", color: "#22c55e" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: "0.75rem" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h1", { style: {
+          fontFamily: fontDisplay,
+          fontSize: "1.75rem",
           fontWeight: 600,
-          textTransform: "uppercase",
-          letterSpacing: "0.05em",
-          background: strainBadgeColor(strainType),
-          color: "#fff"
-        }, children: strainType }),
-        categoryName && /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
-          padding: "0.25rem 0.75rem",
-          borderRadius: 999,
-          fontSize: "0.75rem",
-          background: surface,
-          color: muted
-        }, children: categoryName })
+          margin: 0,
+          lineHeight: 1.2,
+          letterSpacing: "-0.02em"
+        }, children: productName }),
+        lowestPrice != null && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: {
+          fontSize: "1.25rem",
+          fontWeight: 500,
+          color: accent,
+          margin: "0.375rem 0 0"
+        }, children: [
+          "From $",
+          lowestPrice.toFixed(2)
+        ] }),
+        tagline && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: muted, fontSize: "0.9rem", margin: "0.5rem 0 0", fontStyle: "italic" }, children: tagline })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("h1", { style: { fontSize: "1.75rem", fontWeight: 600, margin: "0 0 0.5rem", lineHeight: 1.2 }, children: productName }),
-      description && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: muted, lineHeight: 1.6, margin: "0 0 1.5rem", fontSize: "0.95rem" }, children: description }),
+      description && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: muted, lineHeight: 1.6, margin: "1rem 0 0", fontSize: "0.9rem" }, children: description }),
       renderProduct ? renderProduct(data) : null,
-      (thca || thc || cbd) && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "0.75rem", margin: "1.5rem 0" }, children: [
-        thca != null && /* @__PURE__ */ jsxRuntime.jsx(StatCard, { label: "THCa", value: `${thca.toFixed(1)}%`, bg: surface, fg, accent }),
-        thc != null && /* @__PURE__ */ jsxRuntime.jsx(StatCard, { label: "D9 THC", value: `${thc.toFixed(1)}%`, bg: surface, fg, accent }),
-        cbd != null && /* @__PURE__ */ jsxRuntime.jsx(StatCard, { label: "CBD", value: `${cbd.toFixed(1)}%`, bg: surface, fg, accent })
+      (thca != null || thc != null || cbd != null) && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+        marginTop: "1.25rem",
+        background: surface,
+        border: `1px solid ${border}`,
+        borderRadius: 8,
+        padding: "1rem"
+      }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+          fontSize: "0.65rem",
+          fontWeight: 600,
+          textTransform: "uppercase",
+          letterSpacing: "0.08em",
+          color: muted,
+          marginBottom: "0.75rem"
+        }, children: "Potency" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "grid", gridTemplateColumns: `repeat(${[thca, thc, cbd].filter((v) => v != null).length}, 1fr)`, gap: "0.5rem" }, children: [
+          thca != null && /* @__PURE__ */ jsxRuntime.jsx(PotencyStat, { label: "THCa", value: thca, accent, fg }),
+          thc != null && /* @__PURE__ */ jsxRuntime.jsx(PotencyStat, { label: "\u03949 THC", value: thc, accent, fg }),
+          cbd != null && /* @__PURE__ */ jsxRuntime.jsx(PotencyStat, { label: "CBD", value: cbd, accent, fg })
+        ] })
+      ] }),
+      (batchNumber || dateTested || genetics || terpenes || effects) && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+        marginTop: "0.75rem",
+        background: surface,
+        border: `1px solid ${border}`,
+        borderRadius: 8,
+        padding: "1rem"
+      }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+          fontSize: "0.65rem",
+          fontWeight: 600,
+          textTransform: "uppercase",
+          letterSpacing: "0.08em",
+          color: muted,
+          marginBottom: "0.75rem"
+        }, children: "Details" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
+          genetics && /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { label: "Genetics", value: genetics, fg, muted }),
+          terpenes && /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { label: "Terpenes", value: terpenes, fg, muted }),
+          effects && /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { label: "Effects", value: effects, fg, muted }),
+          batchNumber && /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { label: "Batch", value: batchNumber, fg, muted }),
+          dateTested && /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { label: "Tested", value: formatDate(dateTested), fg, muted })
+        ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.75rem", marginTop: "1.5rem" }, children: [
+      tiers.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+        marginTop: "0.75rem",
+        background: surface,
+        border: `1px solid ${border}`,
+        borderRadius: 8,
+        padding: "1rem"
+      }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+          fontSize: "0.65rem",
+          fontWeight: 600,
+          textTransform: "uppercase",
+          letterSpacing: "0.08em",
+          color: muted,
+          marginBottom: "0.75rem"
+        }, children: "Pricing" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(100px, 1fr))", gap: "0.5rem" }, children: tiers.map((tier) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+          background: surfaceLight,
+          borderRadius: 6,
+          padding: "0.625rem",
+          textAlign: "center"
+        }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: "1rem", fontWeight: 600, color: fg }, children: [
+            "$",
+            tier.default_price.toFixed(2)
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "0.7rem", color: muted, marginTop: "0.125rem" }, children: tier.label })
+        ] }, tier.id)) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.625rem", marginTop: "1.5rem" }, children: [
         coa && /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
@@ -1350,10 +1452,12 @@ function DefaultLayout({
               background: accent,
               color: bg,
               border: "none",
-              fontSize: "0.95rem",
+              fontSize: "0.9rem",
               fontWeight: 600,
+              fontFamily: fontDisplay,
               cursor: "pointer",
-              borderRadius: 0
+              borderRadius: 6,
+              letterSpacing: "-0.01em"
             },
             children: "View Lab Results"
           }
@@ -1369,26 +1473,33 @@ function DefaultLayout({
               padding: "0.875rem",
               background: "transparent",
               color: fg,
-              border: `1px solid ${muted}`,
-              fontSize: "0.95rem",
+              border: `1px solid ${border}`,
+              fontSize: "0.9rem",
               fontWeight: 500,
+              fontFamily: fontDisplay,
               textAlign: "center",
               textDecoration: "none",
               boxSizing: "border-box",
-              borderRadius: 0
+              borderRadius: 6
             },
-            children: ctaText === "View Lab Results" ? "Shop Online" : ctaText
+            children: "Shop Online"
           }
         )
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: "2rem", paddingTop: "1.5rem", borderTop: `1px solid ${surface}`, textAlign: "center" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "center", gap: "1.5rem", marginBottom: "0.75rem" }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.75rem", color: muted, textTransform: "uppercase", letterSpacing: "0.05em" }, children: "Lab Tested" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.75rem", color: muted, textTransform: "uppercase", letterSpacing: "0.05em" }, children: "Authentic" })
+      /* @__PURE__ */ jsxRuntime.jsxs("footer", { style: {
+        marginTop: "2rem",
+        paddingTop: "1.25rem",
+        paddingBottom: "2rem",
+        borderTop: `1px solid ${border}`,
+        textAlign: "center"
+      }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "center", gap: "1.5rem", marginBottom: "0.5rem" }, children: [
+          coa && /* @__PURE__ */ jsxRuntime.jsx(FooterBadge, { icon: "\u2713", text: "Lab Verified", muted }),
+          /* @__PURE__ */ jsxRuntime.jsx(FooterBadge, { icon: "\u2726", text: "Authentic Product", muted })
         ] }),
-        store?.name && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { fontSize: "0.75rem", color: muted, margin: 0 }, children: [
-          "Verified by ",
-          store.name
+        store?.name && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { fontSize: "0.7rem", color: muted, margin: "0.5rem 0 0" }, children: [
+          store.name,
+          store?.tagline ? ` \u2014 ${store.tagline}` : ""
         ] })
       ] })
     ] }),
@@ -1399,18 +1510,32 @@ function DefaultLayout({
           position: "fixed",
           inset: 0,
           zIndex: 9999,
-          background: "rgba(0,0,0,0.9)",
+          background: "rgba(0,0,0,0.92)",
           display: "flex",
           flexDirection: "column"
         },
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", padding: "1rem" }, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#fff", fontWeight: 600 }, children: coa.document_name || "Lab Results" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            padding: "0.75rem 1rem",
+            borderBottom: "1px solid #222"
+          }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#fff", fontWeight: 600, fontSize: "0.9rem", fontFamily: fontDisplay }, children: coa.document_name || "Lab Results" }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
                 onClick: () => setShowCOA(false),
-                style: { background: "none", border: "none", color: "#fff", fontSize: "1.5rem", cursor: "pointer", padding: "0.5rem" },
+                style: {
+                  background: "rgba(255,255,255,0.1)",
+                  border: "none",
+                  color: "#fff",
+                  fontSize: "1rem",
+                  cursor: "pointer",
+                  padding: "0.375rem 0.75rem",
+                  borderRadius: 4
+                },
                 children: "\u2715"
               }
             )
@@ -1428,10 +1553,45 @@ function DefaultLayout({
     )
   ] });
 }
-function StatCard({ label, value, bg, fg, accent }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { background: bg, padding: "1rem", textAlign: "center" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "1.25rem", fontWeight: 700, color: fg }, children: value }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "0.7rem", color: accent, textTransform: "uppercase", letterSpacing: "0.05em", marginTop: "0.25rem" }, children: label })
+function Badge({ text, bg, color, bold }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
+    padding: "0.25rem 0.625rem",
+    borderRadius: 4,
+    fontSize: "0.7rem",
+    fontWeight: bold ? 700 : 500,
+    textTransform: "uppercase",
+    letterSpacing: "0.04em",
+    background: bg,
+    color
+  }, children: text });
+}
+function PotencyStat({ label, value, accent, fg }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center", padding: "0.25rem 0" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: "1.5rem", fontWeight: 700, color: fg, lineHeight: 1.1 }, children: [
+      value.toFixed(value >= 1 ? 1 : 2),
+      "%"
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+      fontSize: "0.65rem",
+      color: accent,
+      textTransform: "uppercase",
+      letterSpacing: "0.06em",
+      marginTop: "0.25rem",
+      fontWeight: 600
+    }, children: label })
+  ] });
+}
+function DetailRow({ label, value, fg, muted }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "baseline" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.8rem", color: muted }, children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.8rem", color: fg, fontWeight: 500 }, children: value })
+  ] });
+}
+function FooterBadge({ icon, text, muted }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "0.7rem", color: muted, display: "flex", alignItems: "center", gap: "0.25rem" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.6rem" }, children: icon }),
+    " ",
+    text
   ] });
 }
 function strainBadgeColor(strain) {
@@ -1441,6 +1601,14 @@ function strainBadgeColor(strain) {
   if (s === "hybrid") return "#f59e0b";
   return "#6b7280";
 }
+function formatDate(dateStr) {
+  try {
+    const d = /* @__PURE__ */ new Date(dateStr + "T00:00:00");
+    return d.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
+  } catch {
+    return dateStr;
+  }
+}
 var containerStyle = {
   minHeight: "100dvh",
   display: "flex",