@medialane/ui 0.11.3 → 0.12.1

package/dist/components/collection-card.cjs

@@ -42,20 +42,24 @@ var import_cn = require("../utils/cn.js");
 var import_ipfs = require("../utils/ipfs.js");
 var import_format = require("../utils/format.js");
 var import_motion_primitives = require("./motion-primitives.js");
-function FloorTooltip({ children, label }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "relative inline-flex items-center gap-0.5 group/tip cursor-default", children: [
-    children,
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.HelpCircle, { className: "h-2.5 w-2.5 text-white/50 group-hover/tip:text-white/80 transition-colors shrink-0" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "pointer-events-none absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 px-2 py-1 text-[10px] font-normal bg-popover text-popover-foreground border border-border rounded-md shadow-md whitespace-nowrap opacity-0 group-hover/tip:opacity-100 transition-opacity z-50", children: label })
-  ] });
+var import_currency_icon = require("./currency-icon.js");
+function parseFloorPrice(floor) {
+  if (!floor) return null;
+  const formatted = (0, import_format.formatDisplayPrice)(floor);
+  const parts = formatted.trim().split(/\s+/);
+  if (parts.length < 2) return null;
+  const symbol = parts[parts.length - 1];
+  const amount = parts.slice(0, -1).join(" ");
+  return { amount, symbol };
 }
 function CollectionCard({ collection, settingsHref, className }) {
   const [imgError, setImgError] = (0, import_react.useState)(false);
   const imageUrl = collection.image ? (0, import_ipfs.ipfsToHttp)(collection.image) : null;
   const showImage = imageUrl && !imgError;
   const initial = (collection.name ?? collection.contractAddress).charAt(0).toUpperCase();
-  const hasFloor = !!collection.floorPrice;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_motion_primitives.MotionCard, { className: (0, import_cn.cn)("card-base group relative", className), children: [
+  const floor = parseFloorPrice(collection.floorPrice);
+  const hasExclusiveContent = !!collection.profile?.hasGatedContent;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_cn.cn)(hasExclusiveContent && "card-exclusive-wrapper btn-border-animated"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_motion_primitives.MotionCard, { className: (0, import_cn.cn)("card-base group relative", className), children: [
     settingsHref && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_link.default,
       {
@@ -78,7 +82,7 @@ function CollectionCard({ collection, settingsHref, className }) {
           unoptimized: true
         }
       ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 bg-gradient-to-br from-brand-purple/30 via-brand-blue/20 to-brand-navy/40 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-8xl font-black text-white/10 select-none tracking-tighter", children: initial }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "absolute bottom-0 left-0 right-0 px-2.5 pb-2.5 flex flex-col gap-1.5 items-start", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "absolute bottom-0 left-0 right-0 px-3 pb-3 flex flex-col gap-1.5 items-start", children: [
         !collection.name && collection.metadataStatus === "PENDING" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "flex items-center gap-1 text-[10px] text-white/60 backdrop-blur-md bg-black/30 rounded-full px-2 py-0.5", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Loader2, { className: "h-2.5 w-2.5 animate-spin" }),
           "Indexing\u2026"
@@ -95,14 +99,16 @@ function CollectionCard({ collection, settingsHref, className }) {
             collection.totalSupply.toLocaleString(),
             " items"
           ] }),
-          hasFloor && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[10px] font-bold text-white/90 backdrop-blur-md bg-black/30 rounded-full px-2 py-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(FloorTooltip, { label: "Lowest active listing price in this collection", children: [
-            "Floor ",
-            (0, import_format.formatDisplayPrice)(collection.floorPrice)
-          ] }) })
+          floor && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "inline-flex items-center gap-1 text-[10px] font-bold text-white/90 backdrop-blur-md bg-black/30 rounded-full px-2 py-0.5", children: [
+            "Floor",
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_currency_icon.CurrencyIcon, { symbol: floor.symbol, size: 10 }),
+            floor.amount
+          ] }),
+          hasExclusiveContent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "inline-flex items-center gap-1 text-[10px] font-bold text-white backdrop-blur-md bg-black/50 rounded-full px-2 py-0.5", children: "\u2726 Exclusive" })
         ] })
       ] })
     ] }) })
-  ] });
+  ] }) });
 }
 function CollectionCardSkeleton() {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "card-base overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative aspect-[3/4] w-full overflow-hidden bg-muted", children: [

package/dist/components/collection-card.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/collection-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport Link from \"next/link\";\nimport Image from \"next/image\";\nimport { Loader2, Settings2, HelpCircle } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\nimport { ipfsToHttp } from \"../utils/ipfs.js\";\nimport { formatDisplayPrice } from \"../utils/format.js\";\nimport { MotionCard } from \"./motion-primitives.js\";\nimport type { ApiCollection } from \"@medialane/sdk\";\n\n// Pure CSS tooltip — no Radix/shadcn dependency\nfunction FloorTooltip({ children, label }: { children: React.ReactNode; label: string }) {\n  return (\n    <span className=\"relative inline-flex items-center gap-0.5 group/tip cursor-default\">\n      {children}\n      <HelpCircle className=\"h-2.5 w-2.5 text-white/50 group-hover/tip:text-white/80 transition-colors shrink-0\" />\n      <span className=\"pointer-events-none absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 px-2 py-1 text-[10px] font-normal bg-popover text-popover-foreground border border-border rounded-md shadow-md whitespace-nowrap opacity-0 group-hover/tip:opacity-100 transition-opacity z-50\">\n        {label}\n      </span>\n    </span>\n  );\n}\n\nexport interface CollectionCardProps {\n  collection: ApiCollection;\n  /** Shows settings gear icon linking to this path — used in portfolio pages */\n  settingsHref?: string;\n  className?: string;\n}\n\nexport function CollectionCard({ collection, settingsHref, className }: CollectionCardProps) {\n  const [imgError, setImgError] = useState(false);\n  const imageUrl = collection.image ? ipfsToHttp(collection.image) : null;\n  const showImage = imageUrl && !imgError;\n  const initial = (collection.name ?? collection.contractAddress).charAt(0).toUpperCase();\n  const hasFloor = !!collection.floorPrice;\n\n  return (\n    <MotionCard className={cn(\"card-base group relative\", className)}>\n      {settingsHref && (\n        <Link\n          href={settingsHref}\n          onClick={(e) => e.stopPropagation()}\n          className=\"absolute top-2 right-2 z-10 h-7 w-7 rounded-full bg-black/40 backdrop-blur-sm flex items-center justify-center text-white/70 hover:text-white hover:bg-black/60 transition-colors\"\n          aria-label=\"Collection settings\"\n        >\n          <Settings2 className=\"h-3.5 w-3.5\" />\n        </Link>\n      )}\n\n      <Link href={`/collections/${collection.contractAddress}`} className=\"block relative h-full\">\n        <div className=\"relative aspect-[3/4] w-full overflow-hidden bg-muted\">\n          {showImage ? (\n            <Image\n              src={imageUrl}\n              alt={collection.name ?? \"Collection\"}\n              fill\n              className=\"object-cover transition-transform duration-500 group-hover:scale-105\"\n              onError={() => setImgError(true)}\n              unoptimized\n            />\n          ) : (\n            <div className=\"absolute inset-0 bg-gradient-to-br from-brand-purple/30 via-brand-blue/20 to-brand-navy/40 flex items-center justify-center\">\n              <span className=\"text-8xl font-black text-white/10 select-none tracking-tighter\">\n                {initial}\n              </span>\n            </div>\n          )}\n\n          <div className=\"absolute bottom-0 left-0 right-0 px-2.5 pb-2.5 flex flex-col gap-1.5 items-start\">\n            {!collection.name && collection.metadataStatus === \"PENDING\" ? (\n              <span className=\"flex items-center gap-1 text-[10px] text-white/60 backdrop-blur-md bg-black/30 rounded-full px-2 py-0.5\">\n                <Loader2 className=\"h-2.5 w-2.5 animate-spin\" />\n                Indexing…\n              </span>\n            ) : (\n              <p\n                className=\"font-bold text-sm text-white leading-tight backdrop-blur-md bg-black/30 rounded-lg px-2.5 py-1 max-w-full truncate\"\n                style={{ textShadow: \"0 1px 6px rgba(0,0,0,0.5)\" }}\n              >\n                {collection.name ?? \"Unnamed Collection\"}\n              </p>\n            )}\n\n            <div className=\"flex items-center gap-1.5 flex-wrap\">\n              {collection.totalSupply != null && (\n                <span className=\"text-[10px] font-medium text-white/80 backdrop-blur-md bg-black/30 rounded-full px-2 py-0.5\">\n                  {collection.totalSupply.toLocaleString()} items\n                </span>\n              )}\n              {hasFloor && (\n                <span className=\"text-[10px] font-bold text-white/90 backdrop-blur-md bg-black/30 rounded-full px-2 py-0.5\">\n                  <FloorTooltip label=\"Lowest active listing price in this collection\">\n                    Floor {formatDisplayPrice(collection.floorPrice)}\n                  </FloorTooltip>\n                </span>\n              )}\n            </div>\n          </div>\n        </div>\n      </Link>\n    </MotionCard>\n  );\n}\n\nexport function CollectionCardSkeleton() {\n  return (\n    <div className=\"card-base overflow-hidden\">\n      <div className=\"relative aspect-[3/4] w-full overflow-hidden bg-muted\">\n        <div className=\"absolute inset-0 animate-pulse bg-muted\" />\n        <div className=\"absolute bottom-3 left-3 right-3 space-y-1.5\">\n          <div className=\"h-4 w-2/3 rounded-md bg-muted-foreground/20 animate-pulse\" />\n          <div className=\"h-3 w-1/3 rounded-md bg-muted-foreground/20 animate-pulse\" />\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAeI;AAbJ,mBAAyB;AACzB,kBAAiB;AACjB,mBAAkB;AAClB,0BAA+C;AAC/C,gBAAmB;AACnB,kBAA2B;AAC3B,oBAAmC;AACnC,+BAA2B;AAI3B,SAAS,aAAa,EAAE,UAAU,MAAM,GAAiD;AACvF,SACE,6CAAC,UAAK,WAAU,sEACb;AAAA;AAAA,IACD,4CAAC,kCAAW,WAAU,sFAAqF;AAAA,IAC3G,4CAAC,UAAK,WAAU,4QACb,iBACH;AAAA,KACF;AAEJ;AASO,SAAS,eAAe,EAAE,YAAY,cAAc,UAAU,GAAwB;AAC3F,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,KAAK;AAC9C,QAAM,WAAW,WAAW,YAAQ,wBAAW,WAAW,KAAK,IAAI;AACnE,QAAM,YAAY,YAAY,CAAC;AAC/B,QAAM,WAAW,WAAW,QAAQ,WAAW,iBAAiB,OAAO,CAAC,EAAE,YAAY;AACtF,QAAM,WAAW,CAAC,CAAC,WAAW;AAE9B,SACE,6CAAC,uCAAW,eAAW,cAAG,4BAA4B,SAAS,GAC5D;AAAA,oBACC;AAAA,MAAC,YAAAA;AAAA,MAAA;AAAA,QACC,MAAM;AAAA,QACN,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,QAClC,WAAU;AAAA,QACV,cAAW;AAAA,QAEX,sDAAC,iCAAU,WAAU,eAAc;AAAA;AAAA,IACrC;AAAA,IAGF,4CAAC,YAAAA,SAAA,EAAK,MAAM,gBAAgB,WAAW,eAAe,IAAI,WAAU,yBAClE,uDAAC,SAAI,WAAU,yDACZ;AAAA,kBACC;AAAA,QAAC,aAAAC;AAAA,QAAA;AAAA,UACC,KAAK;AAAA,UACL,KAAK,WAAW,QAAQ;AAAA,UACxB,MAAI;AAAA,UACJ,WAAU;AAAA,UACV,SAAS,MAAM,YAAY,IAAI;AAAA,UAC/B,aAAW;AAAA;AAAA,MACb,IAEA,4CAAC,SAAI,WAAU,+HACb,sDAAC,UAAK,WAAU,kEACb,mBACH,GACF;AAAA,MAGF,6CAAC,SAAI,WAAU,oFACZ;AAAA,SAAC,WAAW,QAAQ,WAAW,mBAAmB,YACjD,6CAAC,UAAK,WAAU,2GACd;AAAA,sDAAC,+BAAQ,WAAU,4BAA2B;AAAA,UAAE;AAAA,WAElD,IAEA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,YAAY,4BAA4B;AAAA,YAEhD,qBAAW,QAAQ;AAAA;AAAA,QACtB;AAAA,QAGF,6CAAC,SAAI,WAAU,uCACZ;AAAA,qBAAW,eAAe,QACzB,6CAAC,UAAK,WAAU,+FACb;AAAA,uBAAW,YAAY,eAAe;AAAA,YAAE;AAAA,aAC3C;AAAA,UAED,YACC,4CAAC,UAAK,WAAU,6FACd,uDAAC,gBAAa,OAAM,kDAAiD;AAAA;AAAA,gBAC5D,kCAAmB,WAAW,UAAU;AAAA,aACjD,GACF;AAAA,WAEJ;AAAA,SACF;AAAA,OACF,GACF;AAAA,KACF;AAEJ;AAEO,SAAS,yBAAyB;AACvC,SACE,4CAAC,SAAI,WAAU,6BACb,uDAAC,SAAI,WAAU,yDACb;AAAA,gDAAC,SAAI,WAAU,2CAA0C;AAAA,IACzD,6CAAC,SAAI,WAAU,gDACb;AAAA,kDAAC,SAAI,WAAU,6DAA4D;AAAA,MAC3E,4CAAC,SAAI,WAAU,6DAA4D;AAAA,OAC7E;AAAA,KACF,GACF;AAEJ;","names":["Link","Image"]}
+{"version":3,"sources":["../../src/components/collection-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport Link from \"next/link\";\nimport Image from \"next/image\";\nimport { Loader2, Settings2 } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\nimport { ipfsToHttp } from \"../utils/ipfs.js\";\nimport { formatDisplayPrice } from \"../utils/format.js\";\nimport { MotionCard } from \"./motion-primitives.js\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport type { ApiCollection } from \"@medialane/sdk\";\n\n/** \"0.990000 USDC\" → { amount: \"0.99\", symbol: \"USDC\" } */\nfunction parseFloorPrice(floor: string | null | undefined): { amount: string; symbol: string } | null {\n  if (!floor) return null;\n  const formatted = formatDisplayPrice(floor);\n  const parts = formatted.trim().split(/\\s+/);\n  if (parts.length < 2) return null;\n  const symbol = parts[parts.length - 1];\n  const amount = parts.slice(0, -1).join(\" \");\n  return { amount, symbol };\n}\n\n/** ui's pinned SDK lags the apps — extend structurally for newer fields. */\ntype CollectionWithProfile = ApiCollection & {\n  profile?: { hasGatedContent?: boolean } | null;\n};\n\nexport interface CollectionCardProps {\n  collection: ApiCollection;\n  /** Shows settings gear icon linking to this path — used in portfolio pages */\n  settingsHref?: string;\n  className?: string;\n}\n\nexport function CollectionCard({ collection, settingsHref, className }: CollectionCardProps) {\n  const [imgError, setImgError] = useState(false);\n  const imageUrl = collection.image ? ipfsToHttp(collection.image) : null;\n  const showImage = imageUrl && !imgError;\n  const initial = (collection.name ?? collection.contractAddress).charAt(0).toUpperCase();\n  const floor = parseFloorPrice(collection.floorPrice);\n  const hasExclusiveContent = !!(collection as CollectionWithProfile).profile?.hasGatedContent;\n\n  return (\n    <div className={cn(hasExclusiveContent && \"card-exclusive-wrapper btn-border-animated\")}>\n      <MotionCard className={cn(\"card-base group relative\", className)}>\n        {settingsHref && (\n          <Link\n            href={settingsHref}\n            onClick={(e) => e.stopPropagation()}\n            className=\"absolute top-2 right-2 z-10 h-7 w-7 rounded-full bg-black/40 backdrop-blur-sm flex items-center justify-center text-white/70 hover:text-white hover:bg-black/60 transition-colors\"\n            aria-label=\"Collection settings\"\n          >\n            <Settings2 className=\"h-3.5 w-3.5\" />\n          </Link>\n        )}\n\n        <Link href={`/collections/${collection.contractAddress}`} className=\"block relative h-full\">\n          <div className=\"relative aspect-[3/4] w-full overflow-hidden bg-muted\">\n            {showImage ? (\n              <Image\n                src={imageUrl}\n                alt={collection.name ?? \"Collection\"}\n                fill\n                className=\"object-cover transition-transform duration-500 group-hover:scale-105\"\n                onError={() => setImgError(true)}\n                unoptimized\n              />\n            ) : (\n              <div className=\"absolute inset-0 bg-gradient-to-br from-brand-purple/30 via-brand-blue/20 to-brand-navy/40 flex items-center justify-center\">\n                <span className=\"text-8xl font-black text-white/10 select-none tracking-tighter\">\n                  {initial}\n                </span>\n              </div>\n            )}\n\n            <div className=\"absolute bottom-0 left-0 right-0 px-3 pb-3 flex flex-col gap-1.5 items-start\">\n              {!collection.name && collection.metadataStatus === \"PENDING\" ? (\n                <span className=\"flex items-center gap-1 text-[10px] text-white/60 backdrop-blur-md bg-black/30 rounded-full px-2 py-0.5\">\n                  <Loader2 className=\"h-2.5 w-2.5 animate-spin\" />\n                  Indexing…\n                </span>\n              ) : (\n                <p\n                  className=\"font-bold text-sm text-white leading-tight backdrop-blur-md bg-black/30 rounded-lg px-2.5 py-1 max-w-full truncate\"\n                  style={{ textShadow: \"0 1px 6px rgba(0,0,0,0.5)\" }}\n                >\n                  {collection.name ?? \"Unnamed Collection\"}\n                </p>\n              )}\n\n              <div className=\"flex items-center gap-1.5 flex-wrap\">\n                {collection.totalSupply != null && (\n                  <span className=\"text-[10px] font-medium text-white/80 backdrop-blur-md bg-black/30 rounded-full px-2 py-0.5\">\n                    {collection.totalSupply.toLocaleString()} items\n                  </span>\n                )}\n                {floor && (\n                  <span className=\"inline-flex items-center gap-1 text-[10px] font-bold text-white/90 backdrop-blur-md bg-black/30 rounded-full px-2 py-0.5\">\n                    Floor\n                    <CurrencyIcon symbol={floor.symbol} size={10} />\n                    {floor.amount}\n                  </span>\n                )}\n                {hasExclusiveContent && (\n                  <span className=\"inline-flex items-center gap-1 text-[10px] font-bold text-white backdrop-blur-md bg-black/50 rounded-full px-2 py-0.5\">\n                    ✦ Exclusive\n                  </span>\n                )}\n              </div>\n            </div>\n          </div>\n        </Link>\n      </MotionCard>\n    </div>\n  );\n}\n\nexport function CollectionCardSkeleton() {\n  return (\n    <div className=\"card-base overflow-hidden\">\n      <div className=\"relative aspect-[3/4] w-full overflow-hidden bg-muted\">\n        <div className=\"absolute inset-0 animate-pulse bg-muted\" />\n        <div className=\"absolute bottom-3 left-3 right-3 space-y-1.5\">\n          <div className=\"h-4 w-2/3 rounded-md bg-muted-foreground/20 animate-pulse\" />\n          <div className=\"h-3 w-1/3 rounded-md bg-muted-foreground/20 animate-pulse\" />\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":["Link","Image"]}

package/dist/components/collection-card.js

@@ -3,25 +3,29 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import Link from "next/link";
 import Image from "next/image";
-import { Loader2, Settings2, HelpCircle } from "lucide-react";
+import { Loader2, Settings2 } from "lucide-react";
 import { cn } from "../utils/cn.js";
 import { ipfsToHttp } from "../utils/ipfs.js";
 import { formatDisplayPrice } from "../utils/format.js";
 import { MotionCard } from "./motion-primitives.js";
-function FloorTooltip({ children, label }) {
-  return /* @__PURE__ */ jsxs("span", { className: "relative inline-flex items-center gap-0.5 group/tip cursor-default", children: [
-    children,
-    /* @__PURE__ */ jsx(HelpCircle, { className: "h-2.5 w-2.5 text-white/50 group-hover/tip:text-white/80 transition-colors shrink-0" }),
-    /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 px-2 py-1 text-[10px] font-normal bg-popover text-popover-foreground border border-border rounded-md shadow-md whitespace-nowrap opacity-0 group-hover/tip:opacity-100 transition-opacity z-50", children: label })
-  ] });
+import { CurrencyIcon } from "./currency-icon.js";
+function parseFloorPrice(floor) {
+  if (!floor) return null;
+  const formatted = formatDisplayPrice(floor);
+  const parts = formatted.trim().split(/\s+/);
+  if (parts.length < 2) return null;
+  const symbol = parts[parts.length - 1];
+  const amount = parts.slice(0, -1).join(" ");
+  return { amount, symbol };
 }
 function CollectionCard({ collection, settingsHref, className }) {
   const [imgError, setImgError] = useState(false);
   const imageUrl = collection.image ? ipfsToHttp(collection.image) : null;
   const showImage = imageUrl && !imgError;
   const initial = (collection.name ?? collection.contractAddress).charAt(0).toUpperCase();
-  const hasFloor = !!collection.floorPrice;
-  return /* @__PURE__ */ jsxs(MotionCard, { className: cn("card-base group relative", className), children: [
+  const floor = parseFloorPrice(collection.floorPrice);
+  const hasExclusiveContent = !!collection.profile?.hasGatedContent;
+  return /* @__PURE__ */ jsx("div", { className: cn(hasExclusiveContent && "card-exclusive-wrapper btn-border-animated"), children: /* @__PURE__ */ jsxs(MotionCard, { className: cn("card-base group relative", className), children: [
     settingsHref && /* @__PURE__ */ jsx(
       Link,
       {
@@ -44,7 +48,7 @@ function CollectionCard({ collection, settingsHref, className }) {
           unoptimized: true
         }
       ) : /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-brand-purple/30 via-brand-blue/20 to-brand-navy/40 flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "text-8xl font-black text-white/10 select-none tracking-tighter", children: initial }) }),
-      /* @__PURE__ */ jsxs("div", { className: "absolute bottom-0 left-0 right-0 px-2.5 pb-2.5 flex flex-col gap-1.5 items-start", children: [
+      /* @__PURE__ */ jsxs("div", { className: "absolute bottom-0 left-0 right-0 px-3 pb-3 flex flex-col gap-1.5 items-start", children: [
         !collection.name && collection.metadataStatus === "PENDING" ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-[10px] text-white/60 backdrop-blur-md bg-black/30 rounded-full px-2 py-0.5", children: [
           /* @__PURE__ */ jsx(Loader2, { className: "h-2.5 w-2.5 animate-spin" }),
           "Indexing\u2026"
@@ -61,14 +65,16 @@ function CollectionCard({ collection, settingsHref, className }) {
             collection.totalSupply.toLocaleString(),
             " items"
           ] }),
-          hasFloor && /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold text-white/90 backdrop-blur-md bg-black/30 rounded-full px-2 py-0.5", children: /* @__PURE__ */ jsxs(FloorTooltip, { label: "Lowest active listing price in this collection", children: [
-            "Floor ",
-            formatDisplayPrice(collection.floorPrice)
-          ] }) })
+          floor && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 text-[10px] font-bold text-white/90 backdrop-blur-md bg-black/30 rounded-full px-2 py-0.5", children: [
+            "Floor",
+            /* @__PURE__ */ jsx(CurrencyIcon, { symbol: floor.symbol, size: 10 }),
+            floor.amount
+          ] }),
+          hasExclusiveContent && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center gap-1 text-[10px] font-bold text-white backdrop-blur-md bg-black/50 rounded-full px-2 py-0.5", children: "\u2726 Exclusive" })
         ] })
       ] })
     ] }) })
-  ] });
+  ] }) });
 }
 function CollectionCardSkeleton() {
   return /* @__PURE__ */ jsx("div", { className: "card-base overflow-hidden", children: /* @__PURE__ */ jsxs("div", { className: "relative aspect-[3/4] w-full overflow-hidden bg-muted", children: [

package/dist/components/collection-card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/collection-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport Link from \"next/link\";\nimport Image from \"next/image\";\nimport { Loader2, Settings2, HelpCircle } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\nimport { ipfsToHttp } from \"../utils/ipfs.js\";\nimport { formatDisplayPrice } from \"../utils/format.js\";\nimport { MotionCard } from \"./motion-primitives.js\";\nimport type { ApiCollection } from \"@medialane/sdk\";\n\n// Pure CSS tooltip — no Radix/shadcn dependency\nfunction FloorTooltip({ children, label }: { children: React.ReactNode; label: string }) {\n  return (\n    <span className=\"relative inline-flex items-center gap-0.5 group/tip cursor-default\">\n      {children}\n      <HelpCircle className=\"h-2.5 w-2.5 text-white/50 group-hover/tip:text-white/80 transition-colors shrink-0\" />\n      <span className=\"pointer-events-none absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 px-2 py-1 text-[10px] font-normal bg-popover text-popover-foreground border border-border rounded-md shadow-md whitespace-nowrap opacity-0 group-hover/tip:opacity-100 transition-opacity z-50\">\n        {label}\n      </span>\n    </span>\n  );\n}\n\nexport interface CollectionCardProps {\n  collection: ApiCollection;\n  /** Shows settings gear icon linking to this path — used in portfolio pages */\n  settingsHref?: string;\n  className?: string;\n}\n\nexport function CollectionCard({ collection, settingsHref, className }: CollectionCardProps) {\n  const [imgError, setImgError] = useState(false);\n  const imageUrl = collection.image ? ipfsToHttp(collection.image) : null;\n  const showImage = imageUrl && !imgError;\n  const initial = (collection.name ?? collection.contractAddress).charAt(0).toUpperCase();\n  const hasFloor = !!collection.floorPrice;\n\n  return (\n    <MotionCard className={cn(\"card-base group relative\", className)}>\n      {settingsHref && (\n        <Link\n          href={settingsHref}\n          onClick={(e) => e.stopPropagation()}\n          className=\"absolute top-2 right-2 z-10 h-7 w-7 rounded-full bg-black/40 backdrop-blur-sm flex items-center justify-center text-white/70 hover:text-white hover:bg-black/60 transition-colors\"\n          aria-label=\"Collection settings\"\n        >\n          <Settings2 className=\"h-3.5 w-3.5\" />\n        </Link>\n      )}\n\n      <Link href={`/collections/${collection.contractAddress}`} className=\"block relative h-full\">\n        <div className=\"relative aspect-[3/4] w-full overflow-hidden bg-muted\">\n          {showImage ? (\n            <Image\n              src={imageUrl}\n              alt={collection.name ?? \"Collection\"}\n              fill\n              className=\"object-cover transition-transform duration-500 group-hover:scale-105\"\n              onError={() => setImgError(true)}\n              unoptimized\n            />\n          ) : (\n            <div className=\"absolute inset-0 bg-gradient-to-br from-brand-purple/30 via-brand-blue/20 to-brand-navy/40 flex items-center justify-center\">\n              <span className=\"text-8xl font-black text-white/10 select-none tracking-tighter\">\n                {initial}\n              </span>\n            </div>\n          )}\n\n          <div className=\"absolute bottom-0 left-0 right-0 px-2.5 pb-2.5 flex flex-col gap-1.5 items-start\">\n            {!collection.name && collection.metadataStatus === \"PENDING\" ? (\n              <span className=\"flex items-center gap-1 text-[10px] text-white/60 backdrop-blur-md bg-black/30 rounded-full px-2 py-0.5\">\n                <Loader2 className=\"h-2.5 w-2.5 animate-spin\" />\n                Indexing…\n              </span>\n            ) : (\n              <p\n                className=\"font-bold text-sm text-white leading-tight backdrop-blur-md bg-black/30 rounded-lg px-2.5 py-1 max-w-full truncate\"\n                style={{ textShadow: \"0 1px 6px rgba(0,0,0,0.5)\" }}\n              >\n                {collection.name ?? \"Unnamed Collection\"}\n              </p>\n            )}\n\n            <div className=\"flex items-center gap-1.5 flex-wrap\">\n              {collection.totalSupply != null && (\n                <span className=\"text-[10px] font-medium text-white/80 backdrop-blur-md bg-black/30 rounded-full px-2 py-0.5\">\n                  {collection.totalSupply.toLocaleString()} items\n                </span>\n              )}\n              {hasFloor && (\n                <span className=\"text-[10px] font-bold text-white/90 backdrop-blur-md bg-black/30 rounded-full px-2 py-0.5\">\n                  <FloorTooltip label=\"Lowest active listing price in this collection\">\n                    Floor {formatDisplayPrice(collection.floorPrice)}\n                  </FloorTooltip>\n                </span>\n              )}\n            </div>\n          </div>\n        </div>\n      </Link>\n    </MotionCard>\n  );\n}\n\nexport function CollectionCardSkeleton() {\n  return (\n    <div className=\"card-base overflow-hidden\">\n      <div className=\"relative aspect-[3/4] w-full overflow-hidden bg-muted\">\n        <div className=\"absolute inset-0 animate-pulse bg-muted\" />\n        <div className=\"absolute bottom-3 left-3 right-3 space-y-1.5\">\n          <div className=\"h-4 w-2/3 rounded-md bg-muted-foreground/20 animate-pulse\" />\n          <div className=\"h-3 w-1/3 rounded-md bg-muted-foreground/20 animate-pulse\" />\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AAeI,SAEE,KAFF;AAbJ,SAAS,gBAAgB;AACzB,OAAO,UAAU;AACjB,OAAO,WAAW;AAClB,SAAS,SAAS,WAAW,kBAAkB;AAC/C,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAC3B,SAAS,0BAA0B;AACnC,SAAS,kBAAkB;AAI3B,SAAS,aAAa,EAAE,UAAU,MAAM,GAAiD;AACvF,SACE,qBAAC,UAAK,WAAU,sEACb;AAAA;AAAA,IACD,oBAAC,cAAW,WAAU,sFAAqF;AAAA,IAC3G,oBAAC,UAAK,WAAU,4QACb,iBACH;AAAA,KACF;AAEJ;AASO,SAAS,eAAe,EAAE,YAAY,cAAc,UAAU,GAAwB;AAC3F,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,WAAW,WAAW,QAAQ,WAAW,WAAW,KAAK,IAAI;AACnE,QAAM,YAAY,YAAY,CAAC;AAC/B,QAAM,WAAW,WAAW,QAAQ,WAAW,iBAAiB,OAAO,CAAC,EAAE,YAAY;AACtF,QAAM,WAAW,CAAC,CAAC,WAAW;AAE9B,SACE,qBAAC,cAAW,WAAW,GAAG,4BAA4B,SAAS,GAC5D;AAAA,oBACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,QAClC,WAAU;AAAA,QACV,cAAW;AAAA,QAEX,8BAAC,aAAU,WAAU,eAAc;AAAA;AAAA,IACrC;AAAA,IAGF,oBAAC,QAAK,MAAM,gBAAgB,WAAW,eAAe,IAAI,WAAU,yBAClE,+BAAC,SAAI,WAAU,yDACZ;AAAA,kBACC;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,KAAK,WAAW,QAAQ;AAAA,UACxB,MAAI;AAAA,UACJ,WAAU;AAAA,UACV,SAAS,MAAM,YAAY,IAAI;AAAA,UAC/B,aAAW;AAAA;AAAA,MACb,IAEA,oBAAC,SAAI,WAAU,+HACb,8BAAC,UAAK,WAAU,kEACb,mBACH,GACF;AAAA,MAGF,qBAAC,SAAI,WAAU,oFACZ;AAAA,SAAC,WAAW,QAAQ,WAAW,mBAAmB,YACjD,qBAAC,UAAK,WAAU,2GACd;AAAA,8BAAC,WAAQ,WAAU,4BAA2B;AAAA,UAAE;AAAA,WAElD,IAEA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,YAAY,4BAA4B;AAAA,YAEhD,qBAAW,QAAQ;AAAA;AAAA,QACtB;AAAA,QAGF,qBAAC,SAAI,WAAU,uCACZ;AAAA,qBAAW,eAAe,QACzB,qBAAC,UAAK,WAAU,+FACb;AAAA,uBAAW,YAAY,eAAe;AAAA,YAAE;AAAA,aAC3C;AAAA,UAED,YACC,oBAAC,UAAK,WAAU,6FACd,+BAAC,gBAAa,OAAM,kDAAiD;AAAA;AAAA,YAC5D,mBAAmB,WAAW,UAAU;AAAA,aACjD,GACF;AAAA,WAEJ;AAAA,SACF;AAAA,OACF,GACF;AAAA,KACF;AAEJ;AAEO,SAAS,yBAAyB;AACvC,SACE,oBAAC,SAAI,WAAU,6BACb,+BAAC,SAAI,WAAU,yDACb;AAAA,wBAAC,SAAI,WAAU,2CAA0C;AAAA,IACzD,qBAAC,SAAI,WAAU,gDACb;AAAA,0BAAC,SAAI,WAAU,6DAA4D;AAAA,MAC3E,oBAAC,SAAI,WAAU,6DAA4D;AAAA,OAC7E;AAAA,KACF,GACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/collection-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport Link from \"next/link\";\nimport Image from \"next/image\";\nimport { Loader2, Settings2 } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\nimport { ipfsToHttp } from \"../utils/ipfs.js\";\nimport { formatDisplayPrice } from \"../utils/format.js\";\nimport { MotionCard } from \"./motion-primitives.js\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport type { ApiCollection } from \"@medialane/sdk\";\n\n/** \"0.990000 USDC\" → { amount: \"0.99\", symbol: \"USDC\" } */\nfunction parseFloorPrice(floor: string | null | undefined): { amount: string; symbol: string } | null {\n  if (!floor) return null;\n  const formatted = formatDisplayPrice(floor);\n  const parts = formatted.trim().split(/\\s+/);\n  if (parts.length < 2) return null;\n  const symbol = parts[parts.length - 1];\n  const amount = parts.slice(0, -1).join(\" \");\n  return { amount, symbol };\n}\n\n/** ui's pinned SDK lags the apps — extend structurally for newer fields. */\ntype CollectionWithProfile = ApiCollection & {\n  profile?: { hasGatedContent?: boolean } | null;\n};\n\nexport interface CollectionCardProps {\n  collection: ApiCollection;\n  /** Shows settings gear icon linking to this path — used in portfolio pages */\n  settingsHref?: string;\n  className?: string;\n}\n\nexport function CollectionCard({ collection, settingsHref, className }: CollectionCardProps) {\n  const [imgError, setImgError] = useState(false);\n  const imageUrl = collection.image ? ipfsToHttp(collection.image) : null;\n  const showImage = imageUrl && !imgError;\n  const initial = (collection.name ?? collection.contractAddress).charAt(0).toUpperCase();\n  const floor = parseFloorPrice(collection.floorPrice);\n  const hasExclusiveContent = !!(collection as CollectionWithProfile).profile?.hasGatedContent;\n\n  return (\n    <div className={cn(hasExclusiveContent && \"card-exclusive-wrapper btn-border-animated\")}>\n      <MotionCard className={cn(\"card-base group relative\", className)}>\n        {settingsHref && (\n          <Link\n            href={settingsHref}\n            onClick={(e) => e.stopPropagation()}\n            className=\"absolute top-2 right-2 z-10 h-7 w-7 rounded-full bg-black/40 backdrop-blur-sm flex items-center justify-center text-white/70 hover:text-white hover:bg-black/60 transition-colors\"\n            aria-label=\"Collection settings\"\n          >\n            <Settings2 className=\"h-3.5 w-3.5\" />\n          </Link>\n        )}\n\n        <Link href={`/collections/${collection.contractAddress}`} className=\"block relative h-full\">\n          <div className=\"relative aspect-[3/4] w-full overflow-hidden bg-muted\">\n            {showImage ? (\n              <Image\n                src={imageUrl}\n                alt={collection.name ?? \"Collection\"}\n                fill\n                className=\"object-cover transition-transform duration-500 group-hover:scale-105\"\n                onError={() => setImgError(true)}\n                unoptimized\n              />\n            ) : (\n              <div className=\"absolute inset-0 bg-gradient-to-br from-brand-purple/30 via-brand-blue/20 to-brand-navy/40 flex items-center justify-center\">\n                <span className=\"text-8xl font-black text-white/10 select-none tracking-tighter\">\n                  {initial}\n                </span>\n              </div>\n            )}\n\n            <div className=\"absolute bottom-0 left-0 right-0 px-3 pb-3 flex flex-col gap-1.5 items-start\">\n              {!collection.name && collection.metadataStatus === \"PENDING\" ? (\n                <span className=\"flex items-center gap-1 text-[10px] text-white/60 backdrop-blur-md bg-black/30 rounded-full px-2 py-0.5\">\n                  <Loader2 className=\"h-2.5 w-2.5 animate-spin\" />\n                  Indexing…\n                </span>\n              ) : (\n                <p\n                  className=\"font-bold text-sm text-white leading-tight backdrop-blur-md bg-black/30 rounded-lg px-2.5 py-1 max-w-full truncate\"\n                  style={{ textShadow: \"0 1px 6px rgba(0,0,0,0.5)\" }}\n                >\n                  {collection.name ?? \"Unnamed Collection\"}\n                </p>\n              )}\n\n              <div className=\"flex items-center gap-1.5 flex-wrap\">\n                {collection.totalSupply != null && (\n                  <span className=\"text-[10px] font-medium text-white/80 backdrop-blur-md bg-black/30 rounded-full px-2 py-0.5\">\n                    {collection.totalSupply.toLocaleString()} items\n                  </span>\n                )}\n                {floor && (\n                  <span className=\"inline-flex items-center gap-1 text-[10px] font-bold text-white/90 backdrop-blur-md bg-black/30 rounded-full px-2 py-0.5\">\n                    Floor\n                    <CurrencyIcon symbol={floor.symbol} size={10} />\n                    {floor.amount}\n                  </span>\n                )}\n                {hasExclusiveContent && (\n                  <span className=\"inline-flex items-center gap-1 text-[10px] font-bold text-white backdrop-blur-md bg-black/50 rounded-full px-2 py-0.5\">\n                    ✦ Exclusive\n                  </span>\n                )}\n              </div>\n            </div>\n          </div>\n        </Link>\n      </MotionCard>\n    </div>\n  );\n}\n\nexport function CollectionCardSkeleton() {\n  return (\n    <div className=\"card-base overflow-hidden\">\n      <div className=\"relative aspect-[3/4] w-full overflow-hidden bg-muted\">\n        <div className=\"absolute inset-0 animate-pulse bg-muted\" />\n        <div className=\"absolute bottom-3 left-3 right-3 space-y-1.5\">\n          <div className=\"h-4 w-2/3 rounded-md bg-muted-foreground/20 animate-pulse\" />\n          <div className=\"h-3 w-1/3 rounded-md bg-muted-foreground/20 animate-pulse\" />\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/discover-collections-strip.cjs

@@ -23,88 +23,26 @@ __export(discover_collections_strip_exports, {
 });
 module.exports = __toCommonJS(discover_collections_strip_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
 var import_lucide_react = require("lucide-react");
-var import_motion_primitives = require("./motion-primitives.js");
-var import_ipfs = require("../utils/ipfs.js");
-var import_format = require("../utils/format.js");
-function CollectionChipSkeleton() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "shrink-0 w-80 rounded-xl border border-border overflow-hidden", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "aspect-square w-full bg-muted animate-pulse" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "p-3 space-y-1.5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-3.5 w-28 bg-muted animate-pulse rounded" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-3 w-16 bg-muted animate-pulse rounded" })
-    ] })
-  ] });
-}
-function CollectionChip({
-  collection,
-  href
-}) {
-  const [imgError, setImgError] = (0, import_react.useState)(false);
-  const image = collection.image && !imgError ? (0, import_ipfs.ipfsToHttp)(collection.image) : null;
-  const initial = (collection.name ?? "?").charAt(0).toUpperCase();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "a",
-    {
-      href,
-      className: "block shrink-0 w-80 snap-start active:scale-[0.97] transition-transform duration-150",
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "rounded-xl border border-border overflow-hidden group bg-card hover:border-border/80 transition-colors", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "aspect-square bg-muted relative overflow-hidden", children: image ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "img",
-          {
-            src: image,
-            alt: collection.name ?? "",
-            loading: "lazy",
-            className: "w-full h-full object-cover group-hover:scale-105 transition-transform duration-500",
-            onError: () => setImgError(true)
-          }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 bg-gradient-to-br from-brand-purple/30 via-brand-blue/20 to-brand-navy/40 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-5xl font-black text-white/10 select-none", children: initial }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "p-3 space-y-0.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm font-semibold truncate", children: collection.name ?? "Unnamed" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between text-xs text-muted-foreground", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
-              collection.totalSupply ?? 0,
-              " items"
-            ] }),
-            collection.floorPrice && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-semibold text-brand-orange", children: (0, import_format.formatDisplayPrice)(collection.floorPrice) })
-          ] })
-        ] })
-      ] })
-    }
-  );
-}
+var import_scroll_section = require("./scroll-section.js");
+var import_collection_card = require("./collection-card.js");
 function DiscoverCollectionsStrip({
   collections,
   isLoading,
-  getHref,
   allCollectionsHref = "/collections",
-  sectionLabel = "NFT",
   title = "Collections"
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_motion_primitives.FadeIn, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "section-label", children: sectionLabel }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2 mt-0.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Layers, { className: "h-4 w-4 text-brand-blue" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "text-lg font-bold", children: title })
-        ] })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-        "a",
-        {
-          href: allCollectionsHref,
-          className: "inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground px-3 py-1.5 rounded-md hover:bg-accent transition-colors",
-          children: [
-            "View all ",
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ArrowRight, { className: "h-3.5 w-3.5" })
-          ]
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "overflow-x-auto scrollbar-hide snap-x snap-mandatory -mx-4 px-4 md:mx-0 md:px-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex gap-5 sm:gap-6 w-max pb-2", children: isLoading ? Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CollectionChipSkeleton, {}, i)) : collections.map((col) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CollectionChip, { collection: col, href: getHref(col) }, col.contractAddress)) }) })
-  ] }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_scroll_section.ScrollSection,
+    {
+      icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Layers, { className: "h-3.5 w-3.5 text-white" }),
+      iconBg: "bg-gradient-to-br from-brand-blue to-indigo-600 shadow-md shadow-brand-blue/20",
+      title,
+      href: allCollectionsHref,
+      linkLabel: "View all",
+      children: isLoading ? Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-56 sm:w-64 snap-start shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_collection_card.CollectionCardSkeleton, {}) }, i)) : collections.map((col) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-56 sm:w-64 snap-start shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_collection_card.CollectionCard, { collection: col }) }, col.contractAddress))
+    }
+  );
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/components/discover-collections-strip.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/discover-collections-strip.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { Layers, ArrowRight } from \"lucide-react\";\nimport { FadeIn } from \"./motion-primitives.js\";\nimport { ipfsToHttp } from \"../utils/ipfs.js\";\nimport { formatDisplayPrice } from \"../utils/format.js\";\nimport type { ApiCollection } from \"@medialane/sdk\";\n\nexport interface DiscoverCollectionsStripProps {\n  collections: ApiCollection[];\n  isLoading: boolean;\n  getHref: (collection: ApiCollection) => string;\n  allCollectionsHref?: string;\n  sectionLabel?: string;\n  title?: string;\n}\n\nfunction CollectionChipSkeleton() {\n  return (\n    <div className=\"shrink-0 w-80 rounded-xl border border-border overflow-hidden\">\n      <div className=\"aspect-square w-full bg-muted animate-pulse\" />\n      <div className=\"p-3 space-y-1.5\">\n        <div className=\"h-3.5 w-28 bg-muted animate-pulse rounded\" />\n        <div className=\"h-3 w-16 bg-muted animate-pulse rounded\" />\n      </div>\n    </div>\n  );\n}\n\nfunction CollectionChip({\n  collection,\n  href,\n}: {\n  collection: ApiCollection;\n  href: string;\n}) {\n  const [imgError, setImgError] = useState(false);\n  const image = collection.image && !imgError ? ipfsToHttp(collection.image) : null;\n  const initial = (collection.name ?? \"?\").charAt(0).toUpperCase();\n\n  return (\n    <a\n      href={href}\n      className=\"block shrink-0 w-80 snap-start active:scale-[0.97] transition-transform duration-150\"\n    >\n      <div className=\"rounded-xl border border-border overflow-hidden group bg-card hover:border-border/80 transition-colors\">\n        <div className=\"aspect-square bg-muted relative overflow-hidden\">\n          {image ? (\n            <img\n              src={image}\n              alt={collection.name ?? \"\"}\n              loading=\"lazy\"\n              className=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-500\"\n              onError={() => setImgError(true)}\n            />\n          ) : (\n            <div className=\"absolute inset-0 bg-gradient-to-br from-brand-purple/30 via-brand-blue/20 to-brand-navy/40 flex items-center justify-center\">\n              <span className=\"text-5xl font-black text-white/10 select-none\">{initial}</span>\n            </div>\n          )}\n        </div>\n        <div className=\"p-3 space-y-0.5\">\n          <p className=\"text-sm font-semibold truncate\">{collection.name ?? \"Unnamed\"}</p>\n          <div className=\"flex items-center justify-between text-xs text-muted-foreground\">\n            <span>{collection.totalSupply ?? 0} items</span>\n            {collection.floorPrice && (\n              <span className=\"font-semibold text-brand-orange\">\n                {formatDisplayPrice(collection.floorPrice)}\n              </span>\n            )}\n          </div>\n        </div>\n      </div>\n    </a>\n  );\n}\n\nexport function DiscoverCollectionsStrip({\n  collections,\n  isLoading,\n  getHref,\n  allCollectionsHref = \"/collections\",\n  sectionLabel = \"NFT\",\n  title = \"Collections\",\n}: DiscoverCollectionsStripProps) {\n  return (\n    <FadeIn>\n      <div className=\"space-y-3\">\n        <div className=\"flex items-center justify-between\">\n          <div>\n            <p className=\"section-label\">{sectionLabel}</p>\n            <div className=\"flex items-center gap-2 mt-0.5\">\n              <Layers className=\"h-4 w-4 text-brand-blue\" />\n              <h2 className=\"text-lg font-bold\">{title}</h2>\n            </div>\n          </div>\n          <a\n            href={allCollectionsHref}\n            className=\"inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground px-3 py-1.5 rounded-md hover:bg-accent transition-colors\"\n          >\n            View all <ArrowRight className=\"h-3.5 w-3.5\" />\n          </a>\n        </div>\n        <div className=\"overflow-x-auto scrollbar-hide snap-x snap-mandatory -mx-4 px-4 md:mx-0 md:px-0\">\n          <div className=\"flex gap-5 sm:gap-6 w-max pb-2\">\n            {isLoading\n              ? Array.from({ length: 6 }).map((_, i) => <CollectionChipSkeleton key={i} />)\n              : collections.map((col) => (\n                  <CollectionChip key={col.contractAddress} collection={col} href={getHref(col)} />\n                ))}\n          </div>\n        </div>\n      </div>\n    </FadeIn>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBM;AAnBN,mBAAyB;AACzB,0BAAmC;AACnC,+BAAuB;AACvB,kBAA2B;AAC3B,oBAAmC;AAYnC,SAAS,yBAAyB;AAChC,SACE,6CAAC,SAAI,WAAU,iEACb;AAAA,gDAAC,SAAI,WAAU,+CAA8C;AAAA,IAC7D,6CAAC,SAAI,WAAU,mBACb;AAAA,kDAAC,SAAI,WAAU,6CAA4C;AAAA,MAC3D,4CAAC,SAAI,WAAU,2CAA0C;AAAA,OAC3D;AAAA,KACF;AAEJ;AAEA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AACF,GAGG;AACD,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,KAAK;AAC9C,QAAM,QAAQ,WAAW,SAAS,CAAC,eAAW,wBAAW,WAAW,KAAK,IAAI;AAC7E,QAAM,WAAW,WAAW,QAAQ,KAAK,OAAO,CAAC,EAAE,YAAY;AAE/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAU;AAAA,MAEV,uDAAC,SAAI,WAAU,0GACb;AAAA,oDAAC,SAAI,WAAU,mDACZ,kBACC;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,KAAK,WAAW,QAAQ;AAAA,YACxB,SAAQ;AAAA,YACR,WAAU;AAAA,YACV,SAAS,MAAM,YAAY,IAAI;AAAA;AAAA,QACjC,IAEA,4CAAC,SAAI,WAAU,+HACb,sDAAC,UAAK,WAAU,iDAAiD,mBAAQ,GAC3E,GAEJ;AAAA,QACA,6CAAC,SAAI,WAAU,mBACb;AAAA,sDAAC,OAAE,WAAU,kCAAkC,qBAAW,QAAQ,WAAU;AAAA,UAC5E,6CAAC,SAAI,WAAU,mEACb;AAAA,yDAAC,UAAM;AAAA,yBAAW,eAAe;AAAA,cAAE;AAAA,eAAM;AAAA,YACxC,WAAW,cACV,4CAAC,UAAK,WAAU,mCACb,gDAAmB,WAAW,UAAU,GAC3C;AAAA,aAEJ;AAAA,WACF;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;AAEO,SAAS,yBAAyB;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA,qBAAqB;AAAA,EACrB,eAAe;AAAA,EACf,QAAQ;AACV,GAAkC;AAChC,SACE,4CAAC,mCACC,uDAAC,SAAI,WAAU,aACb;AAAA,iDAAC,SAAI,WAAU,qCACb;AAAA,mDAAC,SACC;AAAA,oDAAC,OAAE,WAAU,iBAAiB,wBAAa;AAAA,QAC3C,6CAAC,SAAI,WAAU,kCACb;AAAA,sDAAC,8BAAO,WAAU,2BAA0B;AAAA,UAC5C,4CAAC,QAAG,WAAU,qBAAqB,iBAAM;AAAA,WAC3C;AAAA,SACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,WAAU;AAAA,UACX;AAAA;AAAA,YACU,4CAAC,kCAAW,WAAU,eAAc;AAAA;AAAA;AAAA,MAC/C;AAAA,OACF;AAAA,IACA,4CAAC,SAAI,WAAU,mFACb,sDAAC,SAAI,WAAU,kCACZ,sBACG,MAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,MAAM,4CAAC,4BAA4B,CAAG,CAAE,IAC1E,YAAY,IAAI,CAAC,QACf,4CAAC,kBAAyC,YAAY,KAAK,MAAM,QAAQ,GAAG,KAAvD,IAAI,eAAsD,CAChF,GACP,GACF;AAAA,KACF,GACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/discover-collections-strip.tsx"],"sourcesContent":["\"use client\";\n\nimport { Layers } from \"lucide-react\";\nimport { ScrollSection } from \"./scroll-section.js\";\nimport { CollectionCard, CollectionCardSkeleton } from \"./collection-card.js\";\nimport type { ApiCollection } from \"@medialane/sdk\";\n\nexport interface DiscoverCollectionsStripProps {\n  collections: ApiCollection[];\n  isLoading: boolean;\n  /** Kept for API compat — CollectionCard links to /collections/:contract internally */\n  getHref?: (collection: ApiCollection) => string;\n  allCollectionsHref?: string;\n  /** Kept for API compat — the io-style header has no eyebrow label */\n  sectionLabel?: string;\n  title?: string;\n}\n\n/** Discover Collections carousel — CollectionCard tiles under the shared\n *  icon-badge ScrollSection header (io-approved design). */\nexport function DiscoverCollectionsStrip({\n  collections,\n  isLoading,\n  allCollectionsHref = \"/collections\",\n  title = \"Collections\",\n}: DiscoverCollectionsStripProps) {\n  return (\n    <ScrollSection\n      icon={<Layers className=\"h-3.5 w-3.5 text-white\" />}\n      iconBg=\"bg-gradient-to-br from-brand-blue to-indigo-600 shadow-md shadow-brand-blue/20\"\n      title={title}\n      href={allCollectionsHref}\n      linkLabel=\"View all\"\n    >\n      {isLoading\n        ? Array.from({ length: 5 }).map((_, i) => (\n            <div key={i} className=\"w-56 sm:w-64 snap-start shrink-0\">\n              <CollectionCardSkeleton />\n            </div>\n          ))\n        : collections.map((col) => (\n            <div key={col.contractAddress} className=\"w-56 sm:w-64 snap-start shrink-0\">\n              <CollectionCard collection={col} />\n            </div>\n          ))}\n    </ScrollSection>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA4BY;AA1BZ,0BAAuB;AACvB,4BAA8B;AAC9B,6BAAuD;AAgBhD,SAAS,yBAAyB;AAAA,EACvC;AAAA,EACA;AAAA,EACA,qBAAqB;AAAA,EACrB,QAAQ;AACV,GAAkC;AAChC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,4CAAC,8BAAO,WAAU,0BAAyB;AAAA,MACjD,QAAO;AAAA,MACP;AAAA,MACA,MAAM;AAAA,MACN,WAAU;AAAA,MAET,sBACG,MAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,MAChC,4CAAC,SAAY,WAAU,oCACrB,sDAAC,iDAAuB,KADhB,CAEV,CACD,IACD,YAAY,IAAI,CAAC,QACf,4CAAC,SAA8B,WAAU,oCACvC,sDAAC,yCAAe,YAAY,KAAK,KADzB,IAAI,eAEd,CACD;AAAA;AAAA,EACP;AAEJ;","names":[]}

package/dist/components/discover-collections-strip.d.cts

@@ -4,11 +4,15 @@ import { ApiCollection } from '@medialane/sdk';
 interface DiscoverCollectionsStripProps {
     collections: ApiCollection[];
     isLoading: boolean;
-    getHref: (collection: ApiCollection) => string;
+    /** Kept for API compat — CollectionCard links to /collections/:contract internally */
+    getHref?: (collection: ApiCollection) => string;
     allCollectionsHref?: string;
+    /** Kept for API compat — the io-style header has no eyebrow label */
     sectionLabel?: string;
     title?: string;
 }
-declare function DiscoverCollectionsStrip({ collections, isLoading, getHref, allCollectionsHref, sectionLabel, title, }: DiscoverCollectionsStripProps): react_jsx_runtime.JSX.Element;
+/** Discover Collections carousel — CollectionCard tiles under the shared
+ *  icon-badge ScrollSection header (io-approved design). */
+declare function DiscoverCollectionsStrip({ collections, isLoading, allCollectionsHref, title, }: DiscoverCollectionsStripProps): react_jsx_runtime.JSX.Element;
 
 export { DiscoverCollectionsStrip, type DiscoverCollectionsStripProps };

package/dist/components/discover-collections-strip.d.ts

@@ -4,11 +4,15 @@ import { ApiCollection } from '@medialane/sdk';
 interface DiscoverCollectionsStripProps {
     collections: ApiCollection[];
     isLoading: boolean;
-    getHref: (collection: ApiCollection) => string;
+    /** Kept for API compat — CollectionCard links to /collections/:contract internally */
+    getHref?: (collection: ApiCollection) => string;
     allCollectionsHref?: string;
+    /** Kept for API compat — the io-style header has no eyebrow label */
     sectionLabel?: string;
     title?: string;
 }
-declare function DiscoverCollectionsStrip({ collections, isLoading, getHref, allCollectionsHref, sectionLabel, title, }: DiscoverCollectionsStripProps): react_jsx_runtime.JSX.Element;
+/** Discover Collections carousel — CollectionCard tiles under the shared
+ *  icon-badge ScrollSection header (io-approved design). */
+declare function DiscoverCollectionsStrip({ collections, isLoading, allCollectionsHref, title, }: DiscoverCollectionsStripProps): react_jsx_runtime.JSX.Element;
 
 export { DiscoverCollectionsStrip, type DiscoverCollectionsStripProps };

package/dist/components/discover-collections-strip.js

@@ -1,87 +1,25 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { Layers, ArrowRight } from "lucide-react";
-import { FadeIn } from "./motion-primitives.js";
-import { ipfsToHttp } from "../utils/ipfs.js";
-import { formatDisplayPrice } from "../utils/format.js";
-function CollectionChipSkeleton() {
-  return /* @__PURE__ */ jsxs("div", { className: "shrink-0 w-80 rounded-xl border border-border overflow-hidden", children: [
-    /* @__PURE__ */ jsx("div", { className: "aspect-square w-full bg-muted animate-pulse" }),
-    /* @__PURE__ */ jsxs("div", { className: "p-3 space-y-1.5", children: [
-      /* @__PURE__ */ jsx("div", { className: "h-3.5 w-28 bg-muted animate-pulse rounded" }),
-      /* @__PURE__ */ jsx("div", { className: "h-3 w-16 bg-muted animate-pulse rounded" })
-    ] })
-  ] });
-}
-function CollectionChip({
-  collection,
-  href
-}) {
-  const [imgError, setImgError] = useState(false);
-  const image = collection.image && !imgError ? ipfsToHttp(collection.image) : null;
-  const initial = (collection.name ?? "?").charAt(0).toUpperCase();
-  return /* @__PURE__ */ jsx(
-    "a",
-    {
-      href,
-      className: "block shrink-0 w-80 snap-start active:scale-[0.97] transition-transform duration-150",
-      children: /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-border overflow-hidden group bg-card hover:border-border/80 transition-colors", children: [
-        /* @__PURE__ */ jsx("div", { className: "aspect-square bg-muted relative overflow-hidden", children: image ? /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: image,
-            alt: collection.name ?? "",
-            loading: "lazy",
-            className: "w-full h-full object-cover group-hover:scale-105 transition-transform duration-500",
-            onError: () => setImgError(true)
-          }
-        ) : /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-brand-purple/30 via-brand-blue/20 to-brand-navy/40 flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "text-5xl font-black text-white/10 select-none", children: initial }) }) }),
-        /* @__PURE__ */ jsxs("div", { className: "p-3 space-y-0.5", children: [
-          /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold truncate", children: collection.name ?? "Unnamed" }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs text-muted-foreground", children: [
-            /* @__PURE__ */ jsxs("span", { children: [
-              collection.totalSupply ?? 0,
-              " items"
-            ] }),
-            collection.floorPrice && /* @__PURE__ */ jsx("span", { className: "font-semibold text-brand-orange", children: formatDisplayPrice(collection.floorPrice) })
-          ] })
-        ] })
-      ] })
-    }
-  );
-}
+import { jsx } from "react/jsx-runtime";
+import { Layers } from "lucide-react";
+import { ScrollSection } from "./scroll-section.js";
+import { CollectionCard, CollectionCardSkeleton } from "./collection-card.js";
 function DiscoverCollectionsStrip({
   collections,
   isLoading,
-  getHref,
   allCollectionsHref = "/collections",
-  sectionLabel = "NFT",
   title = "Collections"
 }) {
-  return /* @__PURE__ */ jsx(FadeIn, { children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("p", { className: "section-label", children: sectionLabel }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-0.5", children: [
-          /* @__PURE__ */ jsx(Layers, { className: "h-4 w-4 text-brand-blue" }),
-          /* @__PURE__ */ jsx("h2", { className: "text-lg font-bold", children: title })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs(
-        "a",
-        {
-          href: allCollectionsHref,
-          className: "inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground px-3 py-1.5 rounded-md hover:bg-accent transition-colors",
-          children: [
-            "View all ",
-            /* @__PURE__ */ jsx(ArrowRight, { className: "h-3.5 w-3.5" })
-          ]
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "overflow-x-auto scrollbar-hide snap-x snap-mandatory -mx-4 px-4 md:mx-0 md:px-0", children: /* @__PURE__ */ jsx("div", { className: "flex gap-5 sm:gap-6 w-max pb-2", children: isLoading ? Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsx(CollectionChipSkeleton, {}, i)) : collections.map((col) => /* @__PURE__ */ jsx(CollectionChip, { collection: col, href: getHref(col) }, col.contractAddress)) }) })
-  ] }) });
+  return /* @__PURE__ */ jsx(
+    ScrollSection,
+    {
+      icon: /* @__PURE__ */ jsx(Layers, { className: "h-3.5 w-3.5 text-white" }),
+      iconBg: "bg-gradient-to-br from-brand-blue to-indigo-600 shadow-md shadow-brand-blue/20",
+      title,
+      href: allCollectionsHref,
+      linkLabel: "View all",
+      children: isLoading ? Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsx("div", { className: "w-56 sm:w-64 snap-start shrink-0", children: /* @__PURE__ */ jsx(CollectionCardSkeleton, {}) }, i)) : collections.map((col) => /* @__PURE__ */ jsx("div", { className: "w-56 sm:w-64 snap-start shrink-0", children: /* @__PURE__ */ jsx(CollectionCard, { collection: col }) }, col.contractAddress))
+    }
+  );
 }
 export {
   DiscoverCollectionsStrip

package/dist/components/discover-collections-strip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/discover-collections-strip.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { Layers, ArrowRight } from \"lucide-react\";\nimport { FadeIn } from \"./motion-primitives.js\";\nimport { ipfsToHttp } from \"../utils/ipfs.js\";\nimport { formatDisplayPrice } from \"../utils/format.js\";\nimport type { ApiCollection } from \"@medialane/sdk\";\n\nexport interface DiscoverCollectionsStripProps {\n  collections: ApiCollection[];\n  isLoading: boolean;\n  getHref: (collection: ApiCollection) => string;\n  allCollectionsHref?: string;\n  sectionLabel?: string;\n  title?: string;\n}\n\nfunction CollectionChipSkeleton() {\n  return (\n    <div className=\"shrink-0 w-80 rounded-xl border border-border overflow-hidden\">\n      <div className=\"aspect-square w-full bg-muted animate-pulse\" />\n      <div className=\"p-3 space-y-1.5\">\n        <div className=\"h-3.5 w-28 bg-muted animate-pulse rounded\" />\n        <div className=\"h-3 w-16 bg-muted animate-pulse rounded\" />\n      </div>\n    </div>\n  );\n}\n\nfunction CollectionChip({\n  collection,\n  href,\n}: {\n  collection: ApiCollection;\n  href: string;\n}) {\n  const [imgError, setImgError] = useState(false);\n  const image = collection.image && !imgError ? ipfsToHttp(collection.image) : null;\n  const initial = (collection.name ?? \"?\").charAt(0).toUpperCase();\n\n  return (\n    <a\n      href={href}\n      className=\"block shrink-0 w-80 snap-start active:scale-[0.97] transition-transform duration-150\"\n    >\n      <div className=\"rounded-xl border border-border overflow-hidden group bg-card hover:border-border/80 transition-colors\">\n        <div className=\"aspect-square bg-muted relative overflow-hidden\">\n          {image ? (\n            <img\n              src={image}\n              alt={collection.name ?? \"\"}\n              loading=\"lazy\"\n              className=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-500\"\n              onError={() => setImgError(true)}\n            />\n          ) : (\n            <div className=\"absolute inset-0 bg-gradient-to-br from-brand-purple/30 via-brand-blue/20 to-brand-navy/40 flex items-center justify-center\">\n              <span className=\"text-5xl font-black text-white/10 select-none\">{initial}</span>\n            </div>\n          )}\n        </div>\n        <div className=\"p-3 space-y-0.5\">\n          <p className=\"text-sm font-semibold truncate\">{collection.name ?? \"Unnamed\"}</p>\n          <div className=\"flex items-center justify-between text-xs text-muted-foreground\">\n            <span>{collection.totalSupply ?? 0} items</span>\n            {collection.floorPrice && (\n              <span className=\"font-semibold text-brand-orange\">\n                {formatDisplayPrice(collection.floorPrice)}\n              </span>\n            )}\n          </div>\n        </div>\n      </div>\n    </a>\n  );\n}\n\nexport function DiscoverCollectionsStrip({\n  collections,\n  isLoading,\n  getHref,\n  allCollectionsHref = \"/collections\",\n  sectionLabel = \"NFT\",\n  title = \"Collections\",\n}: DiscoverCollectionsStripProps) {\n  return (\n    <FadeIn>\n      <div className=\"space-y-3\">\n        <div className=\"flex items-center justify-between\">\n          <div>\n            <p className=\"section-label\">{sectionLabel}</p>\n            <div className=\"flex items-center gap-2 mt-0.5\">\n              <Layers className=\"h-4 w-4 text-brand-blue\" />\n              <h2 className=\"text-lg font-bold\">{title}</h2>\n            </div>\n          </div>\n          <a\n            href={allCollectionsHref}\n            className=\"inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground px-3 py-1.5 rounded-md hover:bg-accent transition-colors\"\n          >\n            View all <ArrowRight className=\"h-3.5 w-3.5\" />\n          </a>\n        </div>\n        <div className=\"overflow-x-auto scrollbar-hide snap-x snap-mandatory -mx-4 px-4 md:mx-0 md:px-0\">\n          <div className=\"flex gap-5 sm:gap-6 w-max pb-2\">\n            {isLoading\n              ? Array.from({ length: 6 }).map((_, i) => <CollectionChipSkeleton key={i} />)\n              : collections.map((col) => (\n                  <CollectionChip key={col.contractAddress} collection={col} href={getHref(col)} />\n                ))}\n          </div>\n        </div>\n      </div>\n    </FadeIn>\n  );\n}\n"],"mappings":";AAqBM,cACA,YADA;AAnBN,SAAS,gBAAgB;AACzB,SAAS,QAAQ,kBAAkB;AACnC,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,0BAA0B;AAYnC,SAAS,yBAAyB;AAChC,SACE,qBAAC,SAAI,WAAU,iEACb;AAAA,wBAAC,SAAI,WAAU,+CAA8C;AAAA,IAC7D,qBAAC,SAAI,WAAU,mBACb;AAAA,0BAAC,SAAI,WAAU,6CAA4C;AAAA,MAC3D,oBAAC,SAAI,WAAU,2CAA0C;AAAA,OAC3D;AAAA,KACF;AAEJ;AAEA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AACF,GAGG;AACD,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,QAAQ,WAAW,SAAS,CAAC,WAAW,WAAW,WAAW,KAAK,IAAI;AAC7E,QAAM,WAAW,WAAW,QAAQ,KAAK,OAAO,CAAC,EAAE,YAAY;AAE/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAU;AAAA,MAEV,+BAAC,SAAI,WAAU,0GACb;AAAA,4BAAC,SAAI,WAAU,mDACZ,kBACC;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,KAAK,WAAW,QAAQ;AAAA,YACxB,SAAQ;AAAA,YACR,WAAU;AAAA,YACV,SAAS,MAAM,YAAY,IAAI;AAAA;AAAA,QACjC,IAEA,oBAAC,SAAI,WAAU,+HACb,8BAAC,UAAK,WAAU,iDAAiD,mBAAQ,GAC3E,GAEJ;AAAA,QACA,qBAAC,SAAI,WAAU,mBACb;AAAA,8BAAC,OAAE,WAAU,kCAAkC,qBAAW,QAAQ,WAAU;AAAA,UAC5E,qBAAC,SAAI,WAAU,mEACb;AAAA,iCAAC,UAAM;AAAA,yBAAW,eAAe;AAAA,cAAE;AAAA,eAAM;AAAA,YACxC,WAAW,cACV,oBAAC,UAAK,WAAU,mCACb,6BAAmB,WAAW,UAAU,GAC3C;AAAA,aAEJ;AAAA,WACF;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;AAEO,SAAS,yBAAyB;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA,qBAAqB;AAAA,EACrB,eAAe;AAAA,EACf,QAAQ;AACV,GAAkC;AAChC,SACE,oBAAC,UACC,+BAAC,SAAI,WAAU,aACb;AAAA,yBAAC,SAAI,WAAU,qCACb;AAAA,2BAAC,SACC;AAAA,4BAAC,OAAE,WAAU,iBAAiB,wBAAa;AAAA,QAC3C,qBAAC,SAAI,WAAU,kCACb;AAAA,8BAAC,UAAO,WAAU,2BAA0B;AAAA,UAC5C,oBAAC,QAAG,WAAU,qBAAqB,iBAAM;AAAA,WAC3C;AAAA,SACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,WAAU;AAAA,UACX;AAAA;AAAA,YACU,oBAAC,cAAW,WAAU,eAAc;AAAA;AAAA;AAAA,MAC/C;AAAA,OACF;AAAA,IACA,oBAAC,SAAI,WAAU,mFACb,8BAAC,SAAI,WAAU,kCACZ,sBACG,MAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,MAAM,oBAAC,4BAA4B,CAAG,CAAE,IAC1E,YAAY,IAAI,CAAC,QACf,oBAAC,kBAAyC,YAAY,KAAK,MAAM,QAAQ,GAAG,KAAvD,IAAI,eAAsD,CAChF,GACP,GACF;AAAA,KACF,GACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/discover-collections-strip.tsx"],"sourcesContent":["\"use client\";\n\nimport { Layers } from \"lucide-react\";\nimport { ScrollSection } from \"./scroll-section.js\";\nimport { CollectionCard, CollectionCardSkeleton } from \"./collection-card.js\";\nimport type { ApiCollection } from \"@medialane/sdk\";\n\nexport interface DiscoverCollectionsStripProps {\n  collections: ApiCollection[];\n  isLoading: boolean;\n  /** Kept for API compat — CollectionCard links to /collections/:contract internally */\n  getHref?: (collection: ApiCollection) => string;\n  allCollectionsHref?: string;\n  /** Kept for API compat — the io-style header has no eyebrow label */\n  sectionLabel?: string;\n  title?: string;\n}\n\n/** Discover Collections carousel — CollectionCard tiles under the shared\n *  icon-badge ScrollSection header (io-approved design). */\nexport function DiscoverCollectionsStrip({\n  collections,\n  isLoading,\n  allCollectionsHref = \"/collections\",\n  title = \"Collections\",\n}: DiscoverCollectionsStripProps) {\n  return (\n    <ScrollSection\n      icon={<Layers className=\"h-3.5 w-3.5 text-white\" />}\n      iconBg=\"bg-gradient-to-br from-brand-blue to-indigo-600 shadow-md shadow-brand-blue/20\"\n      title={title}\n      href={allCollectionsHref}\n      linkLabel=\"View all\"\n    >\n      {isLoading\n        ? Array.from({ length: 5 }).map((_, i) => (\n            <div key={i} className=\"w-56 sm:w-64 snap-start shrink-0\">\n              <CollectionCardSkeleton />\n            </div>\n          ))\n        : collections.map((col) => (\n            <div key={col.contractAddress} className=\"w-56 sm:w-64 snap-start shrink-0\">\n              <CollectionCard collection={col} />\n            </div>\n          ))}\n    </ScrollSection>\n  );\n}\n"],"mappings":";AA4BY;AA1BZ,SAAS,cAAc;AACvB,SAAS,qBAAqB;AAC9B,SAAS,gBAAgB,8BAA8B;AAgBhD,SAAS,yBAAyB;AAAA,EACvC;AAAA,EACA;AAAA,EACA,qBAAqB;AAAA,EACrB,QAAQ;AACV,GAAkC;AAChC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,oBAAC,UAAO,WAAU,0BAAyB;AAAA,MACjD,QAAO;AAAA,MACP;AAAA,MACA,MAAM;AAAA,MACN,WAAU;AAAA,MAET,sBACG,MAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,MAChC,oBAAC,SAAY,WAAU,oCACrB,8BAAC,0BAAuB,KADhB,CAEV,CACD,IACD,YAAY,IAAI,CAAC,QACf,oBAAC,SAA8B,WAAU,oCACvC,8BAAC,kBAAe,YAAY,KAAK,KADzB,IAAI,eAEd,CACD;AAAA;AAAA,EACP;AAEJ;","names":[]}