@sprintup-cms/sdk 1.8.19 → 1.8.20

package/dist/next/index.cjs

@@ -620,6 +620,184 @@ function CMSBlocks({ blocks, pageType, className = "", custom = {} }) {
     return /* @__PURE__ */ jsxRuntime.jsx(SectionBlock, { block, pageType }, block.id);
   }) });
 }
+function StarIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-3.5 h-3.5 fill-yellow-400 text-yellow-400", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" }) });
+}
+function GridIcon({ active }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      viewBox: "0 0 16 16",
+      className: `w-4 h-4 ${active ? "text-foreground" : "text-muted-foreground"}`,
+      fill: "currentColor",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "1", y: "1", width: "6", height: "6", rx: "1" }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "9", y: "1", width: "6", height: "6", rx: "1" }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "1", y: "9", width: "6", height: "6", rx: "1" }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "9", y: "9", width: "6", height: "6", rx: "1" })
+      ]
+    }
+  );
+}
+function ListIcon({ active }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      viewBox: "0 0 16 16",
+      className: `w-4 h-4 ${active ? "text-foreground" : "text-muted-foreground"}`,
+      fill: "currentColor",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "1", y: "2", width: "14", height: "3", rx: "1" }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "1", y: "7", width: "14", height: "3", rx: "1" }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "1", y: "12", width: "14", height: "3", rx: "1" })
+      ]
+    }
+  );
+}
+function ProductCard({ product, cardStyle, showPrice, showRating, currency, ctaLabel, staticCtaUrl }) {
+  const accentColor = product.color ?? "#6366f1";
+  const href = staticCtaUrl || product.ctaUrl;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `overflow-hidden group transition-shadow flex flex-col ${cardStyle === "minimal" ? "border-0 shadow-none bg-transparent" : "border rounded-xl hover:shadow-lg bg-card"}`,
+      children: [
+        cardStyle === "color-band" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-full flex-shrink-0", style: { backgroundColor: accentColor } }),
+        cardStyle === "filled-header" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-20 w-full flex-shrink-0 flex items-end px-5 pb-3", style: { backgroundColor: accentColor }, children: product.category && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold text-white/80 uppercase tracking-wider", children: product.category }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-5 flex flex-col gap-3 flex-1", children: [
+          cardStyle !== "filled-header" && (product.category || product.badge) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
+            product.category && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs px-2 py-0.5 rounded-full font-medium text-white", style: { backgroundColor: accentColor }, children: product.category }),
+            product.badge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs px-2 py-0.5 rounded-full bg-muted text-muted-foreground", children: product.badge })
+          ] }),
+          cardStyle === "filled-header" && product.badge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs px-2 py-0.5 rounded-full bg-muted text-muted-foreground self-start", children: product.badge }),
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold text-base line-clamp-2", children: product.name }),
+          product.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground line-clamp-2", children: product.description }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-auto pt-3 border-t border-border flex items-center justify-between gap-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+              showPrice && product.price > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-bold text-lg", children: [
+                product.price.toFixed(2),
+                " ",
+                currency
+              ] }),
+              showRating && product.rating && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 text-sm text-muted-foreground", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(StarIcon, {}),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: product.rating })
+              ] })
+            ] }),
+            ctaLabel && /* @__PURE__ */ jsxRuntime.jsx(
+              "a",
+              {
+                href: href || "#",
+                className: "text-xs font-semibold px-3 py-1.5 rounded-lg text-white transition-opacity hover:opacity-90 flex-shrink-0",
+                style: { backgroundColor: accentColor },
+                children: ctaLabel
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function ProductRow({ product, showPrice, showRating, currency, ctaLabel, staticCtaUrl }) {
+  const accentColor = product.color ?? "#6366f1";
+  const href = staticCtaUrl || product.ctaUrl;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4 border rounded-xl bg-card px-5 py-4 hover:shadow-md transition-shadow group", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-1 self-stretch rounded-full flex-shrink-0", style: { backgroundColor: accentColor } }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 flex-wrap mb-1", children: [
+        product.category && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs px-2 py-0.5 rounded-full font-medium text-white", style: { backgroundColor: accentColor }, children: product.category }),
+        product.badge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs px-2 py-0.5 rounded-full bg-muted text-muted-foreground", children: product.badge })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold text-sm truncate", children: product.name }),
+      product.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground truncate mt-0.5", children: product.description })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4 flex-shrink-0", children: [
+      showRating && product.rating && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 text-sm text-muted-foreground", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(StarIcon, {}),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: product.rating })
+      ] }),
+      showPrice && product.price > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-bold text-base", children: [
+        product.price.toFixed(2),
+        " ",
+        currency
+      ] }),
+      ctaLabel && /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          href: href || "#",
+          className: "text-xs font-semibold px-3 py-1.5 rounded-lg text-white transition-opacity hover:opacity-90",
+          style: { backgroundColor: accentColor },
+          children: ctaLabel
+        }
+      )
+    ] })
+  ] });
+}
+function ProductListClient({
+  products,
+  defaultLayout,
+  allowToggle,
+  gridCols,
+  cardStyle,
+  showPrice,
+  showRating,
+  currency,
+  ctaLabel,
+  staticCtaUrl
+}) {
+  const [layout, setLayout] = React.useState(defaultLayout);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    allowToggle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end mb-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 border border-border rounded-lg p-1 bg-muted/30", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setLayout("grid"),
+          className: `p-1.5 rounded-md transition-colors ${layout === "grid" ? "bg-background shadow-sm" : "hover:bg-muted"}`,
+          "aria-label": "Grid view",
+          "aria-pressed": layout === "grid",
+          children: /* @__PURE__ */ jsxRuntime.jsx(GridIcon, { active: layout === "grid" })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setLayout("list"),
+          className: `p-1.5 rounded-md transition-colors ${layout === "list" ? "bg-background shadow-sm" : "hover:bg-muted"}`,
+          "aria-label": "List view",
+          "aria-pressed": layout === "list",
+          children: /* @__PURE__ */ jsxRuntime.jsx(ListIcon, { active: layout === "list" })
+        }
+      )
+    ] }) }),
+    layout === "grid" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `grid gap-6 grid-cols-1 ${gridCols}`, children: products.map((product) => /* @__PURE__ */ jsxRuntime.jsx(
+      ProductCard,
+      {
+        product,
+        cardStyle,
+        showPrice,
+        showRating,
+        currency,
+        ctaLabel,
+        staticCtaUrl
+      },
+      product.id
+    )) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-3", children: products.map((product) => /* @__PURE__ */ jsxRuntime.jsx(
+      ProductRow,
+      {
+        product,
+        showPrice,
+        showRating,
+        currency,
+        ctaLabel,
+        staticCtaUrl
+      },
+      product.id
+    )) })
+  ] });
+}
 function resolvePath(obj, path) {
   if (!path) return void 0;
   return path.split(/[\.\[\]]+/).filter(Boolean).reduce((acc, key) => acc?.[key], obj);
@@ -660,6 +838,8 @@ function ServerProductListBlock({ block }) {
     cardStyle = "color-band",
     ctaLabel = "",
     ctaUrl: staticCtaUrl = "",
+    defaultLayout = "grid",
+    allowToggle = true,
     fieldTitle,
     fieldPrice,
     fieldColor,
@@ -669,13 +849,6 @@ function ServerProductListBlock({ block }) {
     fieldCtaUrl
   } = cfg;
   const fm = { fieldTitle, fieldPrice, fieldColor, fieldCategory, fieldBadge, fieldDescription, fieldCtaUrl };
-  console.log("[v0] ServerProductListBlock cfg keys:", Object.keys(cfg));
-  console.log("[v0] ServerProductListBlock fm:", JSON.stringify(fm));
-  console.log("[v0] ServerProductListBlock rawProducts count:", Array.isArray(block._resolvedProducts) ? block._resolvedProducts.length : "none", "| prefetched:", Array.isArray(cfg.prefetchedProducts) ? cfg.prefetchedProducts.length : "none");
-  if (Array.isArray(cfg.prefetchedProducts) && cfg.prefetchedProducts[0]) {
-    console.log("[v0] first product keys:", Object.keys(cfg.prefetchedProducts[0]));
-    console.log("[v0] first product sample:", JSON.stringify(cfg.prefetchedProducts[0]).slice(0, 300));
-  }
   const cols = parseInt(String(columns), 10);
   const gridCols = cols === 2 ? "sm:grid-cols-2" : cols === 4 ? "sm:grid-cols-2 lg:grid-cols-4" : "sm:grid-cols-2 lg:grid-cols-3";
   const rawProducts = Array.isArray(block._resolvedProducts) ? block._resolvedProducts : Array.isArray(cfg.prefetchedProducts) ? cfg.prefetchedProducts : [];
@@ -688,59 +861,21 @@ function ServerProductListBlock({ block }) {
       title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl md:text-3xl font-semibold tracking-tight text-balance", children: title }),
       subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground mt-2 text-pretty", children: subtitle })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `grid gap-6 grid-cols-1 ${gridCols}`, children: products.map((product) => {
-      const accentColor = product.color ?? "#6366f1";
-      const href = staticCtaUrl || product.ctaUrl;
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: `overflow-hidden group transition-shadow flex flex-col ${cardStyle === "minimal" ? "border-0 shadow-none bg-transparent" : "border rounded-xl hover:shadow-lg bg-card"}`,
-          children: [
-            cardStyle === "color-band" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-full flex-shrink-0", style: { backgroundColor: accentColor } }),
-            cardStyle === "filled-header" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-20 w-full flex-shrink-0 flex items-end px-5 pb-3", style: { backgroundColor: accentColor }, children: product.category && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold text-white/80 uppercase tracking-wider", children: product.category }) }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-5 flex flex-col gap-3 flex-1", children: [
-              cardStyle !== "filled-header" && (product.category || product.badge) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
-                product.category && /* @__PURE__ */ jsxRuntime.jsx(
-                  "span",
-                  {
-                    className: "text-xs px-2 py-0.5 rounded-full font-medium text-white",
-                    style: { backgroundColor: accentColor },
-                    children: product.category
-                  }
-                ),
-                product.badge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs px-2 py-0.5 rounded-full bg-muted text-muted-foreground", children: product.badge })
-              ] }),
-              cardStyle === "filled-header" && product.badge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs px-2 py-0.5 rounded-full bg-muted text-muted-foreground self-start", children: product.badge }),
-              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold text-base line-clamp-2", children: product.name }),
-              product.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground line-clamp-2", children: product.description }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-auto pt-3 border-t border-border flex items-center justify-between gap-3", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-                  showPrice && product.price > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-bold text-lg", children: [
-                    product.price.toFixed(2),
-                    " ",
-                    currency
-                  ] }),
-                  showRating && product.rating && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 text-sm text-muted-foreground", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-3.5 h-3.5 fill-yellow-400 text-yellow-400", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" }) }),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: product.rating })
-                  ] })
-                ] }),
-                ctaLabel && /* @__PURE__ */ jsxRuntime.jsx(
-                  "a",
-                  {
-                    href: href || "#",
-                    className: "text-xs font-semibold px-3 py-1.5 rounded-lg text-white transition-opacity hover:opacity-90 flex-shrink-0",
-                    style: { backgroundColor: accentColor },
-                    children: ctaLabel
-                  }
-                )
-              ] })
-            ] })
-          ]
-        },
-        product.id
-      );
-    }) })
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ProductListClient,
+      {
+        products,
+        defaultLayout,
+        allowToggle,
+        gridCols,
+        cardStyle,
+        showPrice,
+        showRating,
+        currency,
+        ctaLabel,
+        staticCtaUrl
+      }
+    )
   ] }) });
 }
 var client = createCMSClient();