@neowhale/storefront 0.2.7 → 0.2.9

package/dist/react/index.d.cts

@@ -366,34 +366,14 @@ declare function useCoupons(): {
 };
 
 interface QRLandingPageProps {
-    /** QR code string (from URL param) */
     code: string;
-    /** Gateway URL — defaults to https://whale-gateway.fly.dev */
     gatewayUrl?: string;
-    /** Custom component for product display */
     renderProduct?: (data: QRLandingData) => React.ReactNode;
-    /** Custom component for COA/lab results */
     renderCOA?: (data: QRLandingData) => React.ReactNode;
-    /** Custom component for the full page (overrides default layout) */
     renderPage?: (data: QRLandingData) => React.ReactNode;
-    /** Called when data is loaded */
     onDataLoaded?: (data: QRLandingData) => void;
-    /** Called on error */
     onError?: (error: Error) => void;
 }
-/**
- * QR Landing Page — drop-in component that renders a branded landing page
- * for any QR code. Fetches data from the gateway's public endpoint.
- *
- * Usage:
- * ```tsx
- * // In app/qr/[code]/page.tsx:
- * import { QRLandingPage } from '@neowhale/storefront/react'
- * export default function Page({ params }: { params: { code: string } }) {
- *   return <QRLandingPage code={params.code} />
- * }
- * ```
- */
 declare function QRLandingPage({ code, gatewayUrl, renderProduct, renderCOA, renderPage, onDataLoaded, onError, }: QRLandingPageProps): react_jsx_runtime.JSX.Element | null;
 
 interface LandingPageProps {

package/dist/react/index.d.ts

@@ -366,34 +366,14 @@ declare function useCoupons(): {
 };
 
 interface QRLandingPageProps {
-    /** QR code string (from URL param) */
     code: string;
-    /** Gateway URL — defaults to https://whale-gateway.fly.dev */
     gatewayUrl?: string;
-    /** Custom component for product display */
     renderProduct?: (data: QRLandingData) => React.ReactNode;
-    /** Custom component for COA/lab results */
     renderCOA?: (data: QRLandingData) => React.ReactNode;
-    /** Custom component for the full page (overrides default layout) */
     renderPage?: (data: QRLandingData) => React.ReactNode;
-    /** Called when data is loaded */
     onDataLoaded?: (data: QRLandingData) => void;
-    /** Called on error */
     onError?: (error: Error) => void;
 }
-/**
- * QR Landing Page — drop-in component that renders a branded landing page
- * for any QR code. Fetches data from the gateway's public endpoint.
- *
- * Usage:
- * ```tsx
- * // In app/qr/[code]/page.tsx:
- * import { QRLandingPage } from '@neowhale/storefront/react'
- * export default function Page({ params }: { params: { code: string } }) {
- *   return <QRLandingPage code={params.code} />
- * }
- * ```
- */
 declare function QRLandingPage({ code, gatewayUrl, renderProduct, renderCOA, renderPage, onDataLoaded, onError, }: QRLandingPageProps): react_jsx_runtime.JSX.Element | null;
 
 interface LandingPageProps {

package/dist/react/index.js

@@ -1262,174 +1262,414 @@ function QRLandingPage({
   if (state === "error") return /* @__PURE__ */ jsx(DefaultError, { message: errorMsg });
   if (!data) return null;
   if (renderPage) return /* @__PURE__ */ jsx(Fragment, { children: renderPage(data) });
-  return /* @__PURE__ */ jsx(DefaultLayout, { data, renderProduct, renderCOA });
+  return /* @__PURE__ */ jsx(ProductLanding, { data, renderProduct, renderCOA });
 }
-function DefaultLayout({
+function extractTheme(data) {
+  const lp = data.qr_code.landing_page;
+  const t = data.store?.theme;
+  return {
+    bg: lp.background_color || t?.background || "#050505",
+    fg: lp.text_color || t?.foreground || "#fafafa",
+    accent: t?.accent || "#E8E2D9",
+    accentDark: t?.accentDark || "#C8BFB2",
+    surface: t?.surface || "#0C0C0C",
+    surfaceLight: t?.surfaceLight || "#141414",
+    muted: t?.muted || "#8A8A8A",
+    border: t?.border || "#1C1C1C",
+    fontDisplay: t?.fontDisplay || "system-ui, -apple-system, sans-serif",
+    fontBody: t?.fontBody || "system-ui, -apple-system, sans-serif",
+    radius: t?.radius || "0px"
+  };
+}
+function ProductLanding({
   data,
   renderProduct,
   renderCOA
 }) {
   const { qr_code: qr, store, product, coa } = data;
   const lp = qr.landing_page;
+  const theme = extractTheme(data);
   const [showCOA, setShowCOA] = useState(false);
-  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 muted = store?.theme?.muted || "#888";
   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 = useCallback(() => {
     if (coa) setShowCOA(true);
   }, [coa]);
-  return /* @__PURE__ */ jsxs("div", { style: { minHeight: "100dvh", background: bg, color: fg, fontFamily: "system-ui, -apple-system, sans-serif" }, children: [
-    /* @__PURE__ */ jsx("div", { style: { padding: "1.5rem", display: "flex", justifyContent: "center" }, children: logoUrl && /* @__PURE__ */ jsx(
-      "img",
-      {
-        src: logoUrl,
-        alt: store?.name || "Store",
-        style: { height: 40, objectFit: "contain" }
-      }
-    ) }),
-    productImage && /* @__PURE__ */ jsx("div", { style: { width: "100%", aspectRatio: "1", overflow: "hidden", background: surface }, children: /* @__PURE__ */ jsx(
-      "img",
-      {
-        src: productImage,
-        alt: productName,
-        style: { width: "100%", height: "100%", objectFit: "cover" }
-      }
-    ) }),
-    /* @__PURE__ */ jsxs("div", { style: { padding: "1.5rem", maxWidth: 480, margin: "0 auto" }, children: [
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "0.5rem", marginBottom: "0.75rem", flexWrap: "wrap" }, children: [
+  const labelStyle = {
+    fontSize: 11,
+    fontWeight: 500,
+    textTransform: "uppercase",
+    letterSpacing: "0.25em",
+    color: `${theme.fg}40`
+    // 40 = 25% opacity
+  };
+  const dividerStyle = {
+    border: "none",
+    borderTop: `1px solid ${theme.fg}0A`,
+    // 0A = 4% opacity
+    margin: 0
+  };
+  return /* @__PURE__ */ jsxs("div", { style: {
+    minHeight: "100dvh",
+    background: theme.bg,
+    color: theme.fg,
+    fontFamily: theme.fontBody
+  }, children: [
+    /* @__PURE__ */ jsxs("nav", { style: {
+      padding: "1.25rem 1.5rem",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      maxWidth: 1280,
+      margin: "0 auto"
+    }, children: [
+      logoUrl ? /* @__PURE__ */ jsx("img", { src: logoUrl, alt: store?.name || "", style: { height: 28, objectFit: "contain" } }) : store?.name ? /* @__PURE__ */ jsx("span", { style: { fontFamily: theme.fontDisplay, fontWeight: 600, fontSize: "1rem", letterSpacing: "-0.02em" }, children: store.name }) : /* @__PURE__ */ jsx("span", {}),
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: ctaUrl,
+          style: {
+            fontSize: 11,
+            fontWeight: 500,
+            textTransform: "uppercase",
+            letterSpacing: "0.15em",
+            color: theme.fg,
+            textDecoration: "none",
+            padding: "0.5rem 1.25rem",
+            border: `1px solid ${theme.fg}10`,
+            transition: "border-color 0.3s"
+          },
+          children: "Shop"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("main", { style: { maxWidth: 560, margin: "0 auto", padding: "0 1.5rem 3rem" }, children: [
+      productImage && /* @__PURE__ */ jsx("div", { style: {
+        width: "100%",
+        aspectRatio: "1",
+        overflow: "hidden",
+        background: theme.surfaceLight,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "2rem"
+      }, children: /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: productImage,
+          alt: productName,
+          style: { maxWidth: "100%", maxHeight: "100%", objectFit: "contain" }
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("div", { style: { marginTop: "1.5rem", display: "flex", gap: "0.75rem", alignItems: "center" }, children: [
+        categoryName && /* @__PURE__ */ jsx("span", { style: {
+          fontSize: 11,
+          fontWeight: 500,
+          color: theme.accent,
+          textTransform: "uppercase",
+          letterSpacing: "0.15em"
+        }, children: categoryName }),
         strainType && /* @__PURE__ */ jsx("span", { style: {
-          padding: "0.25rem 0.75rem",
-          borderRadius: 999,
-          fontSize: "0.75rem",
+          fontSize: 10,
           fontWeight: 600,
           textTransform: "uppercase",
-          letterSpacing: "0.05em",
+          letterSpacing: "0.08em",
+          padding: "0.2rem 0.5rem",
           background: strainBadgeColor(strainType),
           color: "#fff"
-        }, children: strainType }),
-        categoryName && /* @__PURE__ */ jsx("span", { style: {
-          padding: "0.25rem 0.75rem",
-          borderRadius: 999,
-          fontSize: "0.75rem",
-          background: surface,
-          color: muted
-        }, children: categoryName })
+        }, children: strainType })
+      ] }),
+      /* @__PURE__ */ jsx("h1", { style: {
+        fontFamily: theme.fontDisplay,
+        fontSize: "clamp(2rem, 8vw, 3rem)",
+        fontWeight: 300,
+        margin: "0.5rem 0 0",
+        lineHeight: 1.1,
+        letterSpacing: "-0.02em"
+      }, children: productName }),
+      tagline && /* @__PURE__ */ jsx("p", { style: {
+        fontFamily: theme.fontDisplay,
+        fontSize: "1.1rem",
+        fontWeight: 300,
+        color: `${theme.fg}80`,
+        margin: "0.5rem 0 0"
+      }, children: tagline }),
+      lowestPrice != null && /* @__PURE__ */ jsxs("p", { style: {
+        fontFamily: theme.fontDisplay,
+        fontSize: "1.5rem",
+        fontWeight: 300,
+        margin: "0.75rem 0 0"
+      }, children: [
+        "$",
+        lowestPrice.toFixed(2),
+        tiers.length > 1 && /* @__PURE__ */ jsx("span", { style: { fontSize: "0.8rem", color: `${theme.fg}50`, marginLeft: "0.5rem", fontWeight: 400 }, children: "and up" })
       ] }),
-      /* @__PURE__ */ jsx("h1", { style: { fontSize: "1.75rem", fontWeight: 600, margin: "0 0 0.5rem", lineHeight: 1.2 }, children: productName }),
-      description && /* @__PURE__ */ jsx("p", { style: { color: muted, lineHeight: 1.6, margin: "0 0 1.5rem", fontSize: "0.95rem" }, children: description }),
       renderProduct ? renderProduct(data) : null,
-      (thca || thc || cbd) && /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "0.75rem", margin: "1.5rem 0" }, children: [
-        thca != null && /* @__PURE__ */ jsx(StatCard, { label: "THCa", value: `${thca.toFixed(1)}%`, bg: surface, fg, accent }),
-        thc != null && /* @__PURE__ */ jsx(StatCard, { label: "D9 THC", value: `${thc.toFixed(1)}%`, bg: surface, fg, accent }),
-        cbd != null && /* @__PURE__ */ jsx(StatCard, { label: "CBD", value: `${cbd.toFixed(1)}%`, bg: surface, fg, accent })
+      (thca != null || thc != null || cbd != null) && /* @__PURE__ */ jsxs("div", { style: {
+        marginTop: "1.75rem",
+        border: `1px solid ${theme.fg}0F`,
+        display: "grid",
+        gridTemplateColumns: `repeat(${[thca, thc, cbd].filter((v) => v != null).length}, 1fr)`
+      }, children: [
+        thca != null && /* @__PURE__ */ jsx(CannabinoidStat, { label: "THCa", value: thca, theme, showBorder: thc != null || cbd != null }),
+        thc != null && /* @__PURE__ */ jsx(CannabinoidStat, { label: "\u03949 THC", value: thc, theme, showBorder: cbd != null }),
+        cbd != null && /* @__PURE__ */ jsx(CannabinoidStat, { label: "CBD", value: cbd, theme, showBorder: false })
+      ] }),
+      tiers.length > 1 && /* @__PURE__ */ jsxs("div", { style: { marginTop: "1.5rem" }, children: [
+        /* @__PURE__ */ jsx("p", { style: { ...labelStyle, marginBottom: "0.75rem" }, children: "Pricing" }),
+        /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 1 }, children: tiers.map((tier) => /* @__PURE__ */ jsxs("div", { style: {
+          flex: "1 1 0",
+          minWidth: 90,
+          padding: "0.75rem 0.5rem",
+          background: theme.surfaceLight,
+          textAlign: "center"
+        }, children: [
+          /* @__PURE__ */ jsxs("div", { style: { fontSize: "1rem", fontWeight: 300, fontFamily: theme.fontDisplay }, children: [
+            "$",
+            tier.default_price.toFixed(2)
+          ] }),
+          /* @__PURE__ */ jsx("div", { style: { fontSize: 10, color: `${theme.fg}60`, letterSpacing: "0.1em", textTransform: "uppercase", marginTop: 2 }, children: tier.label })
+        ] }, tier.id)) })
       ] }),
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.75rem", marginTop: "1.5rem" }, children: [
-        coa && /* @__PURE__ */ jsx(
+      (genetics || terpenes || effects || batchNumber || dateTested) && /* @__PURE__ */ jsxs("div", { style: { marginTop: "1.75rem" }, children: [
+        /* @__PURE__ */ jsx("p", { style: { ...labelStyle, marginBottom: "0.75rem" }, children: "Details" }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          genetics && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(DetailRow, { label: "Genetics", value: genetics, theme }),
+            /* @__PURE__ */ jsx("hr", { style: dividerStyle })
+          ] }),
+          terpenes && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(DetailRow, { label: "Terpenes", value: terpenes, theme }),
+            /* @__PURE__ */ jsx("hr", { style: dividerStyle })
+          ] }),
+          effects && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(DetailRow, { label: "Effects", value: effects, theme }),
+            /* @__PURE__ */ jsx("hr", { style: dividerStyle })
+          ] }),
+          batchNumber && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(DetailRow, { label: "Batch", value: batchNumber, theme }),
+            /* @__PURE__ */ jsx("hr", { style: dividerStyle })
+          ] }),
+          dateTested && /* @__PURE__ */ jsx(DetailRow, { label: "Tested", value: formatDate(dateTested), theme })
+        ] })
+      ] }),
+      description && /* @__PURE__ */ jsxs("div", { style: { marginTop: "1.75rem" }, children: [
+        /* @__PURE__ */ jsx("p", { style: { ...labelStyle, marginBottom: "0.75rem" }, children: "About" }),
+        /* @__PURE__ */ jsx("p", { style: {
+          fontSize: "0.9rem",
+          fontWeight: 300,
+          color: `${theme.fg}99`,
+          lineHeight: 1.7,
+          margin: 0
+        }, children: description })
+      ] }),
+      coa && /* @__PURE__ */ jsxs("div", { style: { marginTop: "1.75rem" }, children: [
+        /* @__PURE__ */ jsx("p", { style: { ...labelStyle, marginBottom: "0.75rem" }, children: "Lab Results" }),
+        batchNumber && /* @__PURE__ */ jsxs("p", { style: { fontSize: 12, color: `${theme.fg}60`, margin: "0 0 0.5rem", letterSpacing: "0.05em" }, children: [
+          "Batch ",
+          batchNumber,
+          dateTested ? ` \xB7 ${formatDate(dateTested)}` : ""
+        ] }),
+        /* @__PURE__ */ jsxs(
           "button",
           {
             onClick: handleCOAClick,
             style: {
               width: "100%",
-              padding: "0.875rem",
-              background: accent,
-              color: bg,
-              border: "none",
-              fontSize: "0.95rem",
-              fontWeight: 600,
+              position: "relative",
+              height: 180,
+              border: `1px solid ${theme.fg}0F`,
+              background: theme.surface,
               cursor: "pointer",
-              borderRadius: 0
+              overflow: "hidden",
+              padding: 0,
+              display: "block"
             },
-            children: "View Lab Results"
-          }
-        ),
-        renderCOA ? renderCOA(data) : null,
-        /* @__PURE__ */ jsx(
-          "a",
-          {
-            href: ctaUrl,
-            style: {
-              display: "block",
-              width: "100%",
-              padding: "0.875rem",
-              background: "transparent",
-              color: fg,
-              border: `1px solid ${muted}`,
-              fontSize: "0.95rem",
-              fontWeight: 500,
-              textAlign: "center",
-              textDecoration: "none",
-              boxSizing: "border-box",
-              borderRadius: 0
-            },
-            children: ctaText === "View Lab Results" ? "Shop Online" : ctaText
+            children: [
+              /* @__PURE__ */ jsx(
+                "iframe",
+                {
+                  src: coa.url,
+                  style: {
+                    width: "200%",
+                    height: "200%",
+                    border: "none",
+                    transform: "scale(0.5)",
+                    transformOrigin: "top left",
+                    pointerEvents: "none"
+                  },
+                  title: "COA Preview",
+                  tabIndex: -1
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { style: {
+                position: "absolute",
+                inset: 0,
+                background: `linear-gradient(to top, ${theme.bg}E6 0%, transparent 60%)`,
+                display: "flex",
+                alignItems: "flex-end",
+                justifyContent: "center",
+                paddingBottom: "1.25rem"
+              }, children: /* @__PURE__ */ jsx("span", { style: {
+                fontSize: 11,
+                fontWeight: 500,
+                textTransform: "uppercase",
+                letterSpacing: "0.2em",
+                color: theme.accent
+              }, children: "View Certificate of Analysis" }) })
+            ]
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs("div", { style: { marginTop: "2rem", paddingTop: "1.5rem", borderTop: `1px solid ${surface}`, textAlign: "center" }, children: [
-        /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "center", gap: "1.5rem", marginBottom: "0.75rem" }, children: [
-          /* @__PURE__ */ jsx("span", { style: { fontSize: "0.75rem", color: muted, textTransform: "uppercase", letterSpacing: "0.05em" }, children: "Lab Tested" }),
-          /* @__PURE__ */ jsx("span", { style: { fontSize: "0.75rem", color: muted, textTransform: "uppercase", letterSpacing: "0.05em" }, children: "Authentic" })
+      renderCOA ? renderCOA(data) : null,
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: ctaUrl,
+          style: {
+            display: "block",
+            width: "100%",
+            marginTop: "2rem",
+            padding: "1rem",
+            background: theme.fg,
+            color: theme.bg,
+            fontFamily: theme.fontDisplay,
+            fontSize: "0.85rem",
+            fontWeight: 500,
+            textAlign: "center",
+            textDecoration: "none",
+            letterSpacing: "0.08em",
+            textTransform: "uppercase",
+            boxSizing: "border-box"
+          },
+          children: "Shop Online"
+        }
+      ),
+      /* @__PURE__ */ jsxs("footer", { style: {
+        marginTop: "3rem",
+        paddingTop: "1.5rem",
+        borderTop: `1px solid ${theme.fg}0A`,
+        textAlign: "center"
+      }, children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "center", gap: "2rem", marginBottom: "0.75rem" }, children: [
+          coa && /* @__PURE__ */ jsx(FooterLabel, { text: "Lab Verified" }),
+          /* @__PURE__ */ jsx(FooterLabel, { text: "Authentic Product" })
         ] }),
-        store?.name && /* @__PURE__ */ jsxs("p", { style: { fontSize: "0.75rem", color: muted, margin: 0 }, children: [
-          "Verified by ",
-          store.name
+        store?.name && /* @__PURE__ */ jsxs("p", { style: { fontSize: 11, color: `${theme.fg}40`, margin: "0.5rem 0 0", letterSpacing: "0.1em" }, children: [
+          store.name,
+          store?.tagline ? ` \u2014 ${store.tagline}` : ""
         ] })
       ] })
     ] }),
-    showCOA && coa && /* @__PURE__ */ jsxs(
-      "div",
-      {
-        style: {
-          position: "fixed",
-          inset: 0,
-          zIndex: 9999,
-          background: "rgba(0,0,0,0.9)",
-          display: "flex",
-          flexDirection: "column"
-        },
-        children: [
-          /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", padding: "1rem" }, children: [
-            /* @__PURE__ */ jsx("span", { style: { color: "#fff", fontWeight: 600 }, children: coa.document_name || "Lab Results" }),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: () => setShowCOA(false),
-                style: { background: "none", border: "none", color: "#fff", fontSize: "1.5rem", cursor: "pointer", padding: "0.5rem" },
-                children: "\u2715"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(
-            "iframe",
-            {
-              src: coa.url,
-              style: { flex: 1, border: "none", background: "#fff" },
-              title: "Lab Results"
-            }
-          )
-        ]
-      }
-    )
+    showCOA && coa && /* @__PURE__ */ jsx(COAModal, { coa, theme, onClose: () => setShowCOA(false) })
+  ] });
+}
+function CannabinoidStat({ label, value, theme, showBorder }) {
+  return /* @__PURE__ */ jsxs("div", { style: {
+    padding: "1.25rem 0.5rem",
+    textAlign: "center",
+    borderRight: showBorder ? `1px solid ${theme.fg}0F` : void 0
+  }, children: [
+    /* @__PURE__ */ jsxs("div", { style: {
+      fontFamily: theme.fontDisplay,
+      fontSize: "clamp(1.5rem, 5vw, 2rem)",
+      fontWeight: 300,
+      lineHeight: 1,
+      color: theme.fg
+    }, children: [
+      value.toFixed(value >= 1 ? 1 : 2),
+      /* @__PURE__ */ jsx("span", { style: { fontSize: "0.6em", marginLeft: 1 }, children: "%" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: {
+      fontSize: 11,
+      fontWeight: 500,
+      textTransform: "uppercase",
+      letterSpacing: "0.25em",
+      color: theme.accent,
+      marginTop: "0.5rem"
+    }, children: label })
   ] });
 }
-function StatCard({ label, value, bg, fg, accent }) {
-  return /* @__PURE__ */ jsxs("div", { style: { background: bg, padding: "1rem", textAlign: "center" }, children: [
-    /* @__PURE__ */ jsx("div", { style: { fontSize: "1.25rem", fontWeight: 700, color: fg }, children: value }),
-    /* @__PURE__ */ jsx("div", { style: { fontSize: "0.7rem", color: accent, textTransform: "uppercase", letterSpacing: "0.05em", marginTop: "0.25rem" }, children: label })
+function DetailRow({ label, value, theme }) {
+  return /* @__PURE__ */ jsxs("div", { style: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "baseline",
+    padding: "0.625rem 0"
+  }, children: [
+    /* @__PURE__ */ jsx("span", { style: {
+      fontSize: 12,
+      textTransform: "uppercase",
+      letterSpacing: "0.15em",
+      color: `${theme.fg}66`
+    }, children: label }),
+    /* @__PURE__ */ jsx("span", { style: {
+      fontSize: 14,
+      fontWeight: 300,
+      color: `${theme.fg}CC`
+    }, children: value })
+  ] });
+}
+function FooterLabel({ text }) {
+  return /* @__PURE__ */ jsx("span", { style: {
+    fontSize: 10,
+    textTransform: "uppercase",
+    letterSpacing: "0.15em",
+    color: "rgba(255,255,255,0.25)"
+  }, children: text });
+}
+function COAModal({ coa, theme, onClose }) {
+  return /* @__PURE__ */ jsxs("div", { style: { position: "fixed", inset: 0, zIndex: 9999, background: "rgba(0,0,0,0.95)", display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ jsxs("div", { style: {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      padding: "0.75rem 1rem",
+      borderBottom: `1px solid ${theme.fg}10`
+    }, children: [
+      /* @__PURE__ */ jsx("span", { style: {
+        color: "#fff",
+        fontFamily: theme.fontDisplay,
+        fontWeight: 500,
+        fontSize: "0.85rem",
+        letterSpacing: "-0.01em"
+      }, children: coa.document_name || "Lab Results" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onClose,
+          style: {
+            background: `${theme.fg}10`,
+            border: "none",
+            color: "#fff",
+            fontSize: "0.85rem",
+            cursor: "pointer",
+            padding: "0.375rem 0.75rem",
+            letterSpacing: "0.05em"
+          },
+          children: "Close"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("iframe", { src: coa.url, style: { flex: 1, border: "none", background: "#fff" }, title: "Lab Results" })
   ] });
 }
 function strainBadgeColor(strain) {
@@ -1439,6 +1679,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",