@medialane/ui 0.11.2 → 0.12.0

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-3 w-max pb-1", 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-3 w-max pb-1\">\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,yBACZ,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-3 w-max pb-1", 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-3 w-max pb-1\">\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,yBACZ,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":[]}

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

@@ -34,13 +34,9 @@ function CreatorChip({
   creator,
   href
 }) {
-  const [avatarError, setAvatarError] = (0, import_react.useState)(false);
   const [bannerError, setBannerError] = (0, import_react.useState)(false);
-  const bannerSrc = creator.bannerImage ?? null;
-  const avatarSrc = creator.avatarImage ?? creator.bannerImage ?? null;
-  const bannerUrl = bannerSrc && !bannerError ? (0, import_ipfs.ipfsToHttp)(bannerSrc) : null;
-  const avatarUrl = avatarSrc && !avatarError ? (0, import_ipfs.ipfsToHttp)(avatarSrc) : null;
-  const displayName = creator.displayName || `@${creator.username}`;
+  const rawSrc = creator.bannerImage || creator.collectionImage || null;
+  const bannerUrl = rawSrc && !bannerError ? (0, import_ipfs.ipfsToHttp)(rawSrc) : null;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "a",
     {
@@ -58,26 +54,7 @@ function CreatorChip({
             onError: () => setBannerError(true)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 bg-gradient-to-t from-black/80 via-black/10 to-transparent" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "absolute bottom-0 inset-x-0 p-2.5 space-y-1.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-8 w-8 rounded-full ring-2 ring-white/20 overflow-hidden bg-muted flex items-center justify-center", children: avatarUrl ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "img",
-            {
-              src: avatarUrl,
-              alt: displayName ?? "",
-              loading: "lazy",
-              className: "h-full w-full object-cover",
-              onError: () => setAvatarError(true)
-            }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-xs font-black text-white/60", children: (displayName ?? "?").charAt(0).toUpperCase() }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "font-bold text-white text-xs truncate", children: displayName }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "text-[10px] text-white/55 flex items-center gap-0.5", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.AtSign, { className: "h-2 w-2 shrink-0" }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "truncate", children: creator.username })
-            ] })
-          ] })
-        ] })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute bottom-0 inset-x-0 px-3 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "font-bold text-2xl text-white truncate", children: creator.username }) })
       ] })
     }
   );
@@ -87,7 +64,7 @@ function DiscoverCreatorsStrip({
   isLoading,
   getHref,
   allCreatorsHref = "/creators",
-  sectionLabel = "Creator network",
+  sectionLabel = "Explore",
   title = "Creators"
 }) {
   if (!isLoading && creators.length === 0) return null;
@@ -112,7 +89,7 @@ function DiscoverCreatorsStrip({
         }
       )
     ] }),
-    /* @__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-3 w-max pb-1", children: isLoading ? Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CreatorChipSkeleton, {}, i)) : creators.map((c) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CreatorChip, { creator: c, href: getHref(c) }, c.walletAddress)) }) })
+    /* @__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)(CreatorChipSkeleton, {}, i)) : creators.map((c) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CreatorChip, { creator: c, href: getHref(c) }, c.walletAddress)) }) })
   ] }) });
 }
 // Annotate the CommonJS export names for ESM import in node:

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/discover-creators-strip.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { Users, ArrowRight, AtSign } from \"lucide-react\";\nimport { FadeIn } from \"./motion-primitives.js\";\nimport { ipfsToHttp } from \"../utils/ipfs.js\";\nimport type { ApiCreatorProfile } from \"@medialane/sdk\";\n\nexport interface DiscoverCreatorsStripProps {\n  creators: ApiCreatorProfile[];\n  isLoading: boolean;\n  getHref: (creator: ApiCreatorProfile) => string;\n  allCreatorsHref?: string;\n  sectionLabel?: string;\n  title?: string;\n}\n\nfunction CreatorChipSkeleton() {\n  return (\n    <div className=\"shrink-0 w-64 aspect-[3/4] rounded-xl bg-muted animate-pulse\" />\n  );\n}\n\nfunction CreatorChip({\n  creator,\n  href,\n}: {\n  creator: ApiCreatorProfile;\n  href: string;\n}) {\n  const [avatarError, setAvatarError] = useState(false);\n  const [bannerError, setBannerError] = useState(false);\n\n  const bannerSrc = creator.bannerImage ?? null;\n  const avatarSrc = creator.avatarImage ?? creator.bannerImage ?? null;\n\n  const bannerUrl = bannerSrc && !bannerError ? ipfsToHttp(bannerSrc) : null;\n  const avatarUrl = avatarSrc && !avatarError ? ipfsToHttp(avatarSrc) : null;\n\n  const displayName = creator.displayName || `@${creator.username}`;\n\n  return (\n    <a\n      href={href}\n      className=\"block shrink-0 w-64 snap-start active:scale-[0.97] transition-transform duration-150 select-none\"\n    >\n      <div className=\"relative aspect-[3/4] rounded-xl overflow-hidden bg-muted\">\n        {bannerUrl && (\n          <img\n            src={bannerUrl}\n            alt=\"\"\n            aria-hidden\n            loading=\"lazy\"\n            className=\"absolute inset-0 w-full h-full object-cover\"\n            onError={() => setBannerError(true)}\n          />\n        )}\n        <div className=\"absolute inset-0 bg-gradient-to-t from-black/80 via-black/10 to-transparent\" />\n        <div className=\"absolute bottom-0 inset-x-0 p-2.5 space-y-1.5\">\n          <div className=\"h-8 w-8 rounded-full ring-2 ring-white/20 overflow-hidden bg-muted flex items-center justify-center\">\n            {avatarUrl ? (\n              <img\n                src={avatarUrl}\n                alt={displayName ?? \"\"}\n                loading=\"lazy\"\n                className=\"h-full w-full object-cover\"\n                onError={() => setAvatarError(true)}\n              />\n            ) : (\n              <span className=\"text-xs font-black text-white/60\">\n                {(displayName ?? \"?\").charAt(0).toUpperCase()}\n              </span>\n            )}\n          </div>\n          <div>\n            <p className=\"font-bold text-white text-xs truncate\">{displayName}</p>\n            <p className=\"text-[10px] text-white/55 flex items-center gap-0.5\">\n              <AtSign className=\"h-2 w-2 shrink-0\" />\n              <span className=\"truncate\">{creator.username}</span>\n            </p>\n          </div>\n        </div>\n      </div>\n    </a>\n  );\n}\n\nexport function DiscoverCreatorsStrip({\n  creators,\n  isLoading,\n  getHref,\n  allCreatorsHref = \"/creators\",\n  sectionLabel = \"Creator network\",\n  title = \"Creators\",\n}: DiscoverCreatorsStripProps) {\n  if (!isLoading && creators.length === 0) return null;\n\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              <Users className=\"h-4 w-4 text-brand-purple\" />\n              <h2 className=\"text-lg font-bold\">{title}</h2>\n            </div>\n          </div>\n          <a\n            href={allCreatorsHref}\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-3 w-max pb-1\">\n            {isLoading\n              ? Array.from({ length: 6 }).map((_, i) => <CreatorChipSkeleton key={i} />)\n              : creators.map((c) => (\n                  <CreatorChip key={c.walletAddress} creator={c} href={getHref(c)} />\n                ))}\n          </div>\n        </div>\n      </div>\n    </FadeIn>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/discover-creators-strip.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { Users, ArrowRight } from \"lucide-react\";\nimport { FadeIn } from \"./motion-primitives.js\";\nimport { ipfsToHttp } from \"../utils/ipfs.js\";\nimport type { ApiCreatorProfile } from \"@medialane/sdk\";\n\nexport interface DiscoverCreatorsStripProps {\n  creators: ApiCreatorProfile[];\n  isLoading: boolean;\n  getHref: (creator: ApiCreatorProfile) => string;\n  allCreatorsHref?: string;\n  sectionLabel?: string;\n  title?: string;\n}\n\nfunction CreatorChipSkeleton() {\n  return (\n    <div className=\"shrink-0 w-64 aspect-[3/4] rounded-xl bg-muted animate-pulse\" />\n  );\n}\n\nfunction CreatorChip({\n  creator,\n  href,\n}: {\n  creator: ApiCreatorProfile;\n  href: string;\n}) {\n  const [bannerError, setBannerError] = useState(false);\n\n  // bannerImage with collectionImage fallback — io-approved big-username design\n  const rawSrc =\n    creator.bannerImage ||\n    (creator as ApiCreatorProfile & { collectionImage?: string | null }).collectionImage ||\n    null;\n  const bannerUrl = rawSrc && !bannerError ? ipfsToHttp(rawSrc) : null;\n\n  return (\n    <a\n      href={href}\n      className=\"block shrink-0 w-64 snap-start active:scale-[0.97] transition-transform duration-150 select-none\"\n    >\n      <div className=\"relative aspect-[3/4] rounded-xl overflow-hidden bg-muted\">\n        {bannerUrl && (\n          <img\n            src={bannerUrl}\n            alt=\"\"\n            aria-hidden\n            loading=\"lazy\"\n            className=\"absolute inset-0 w-full h-full object-cover\"\n            onError={() => setBannerError(true)}\n          />\n        )}\n        <div className=\"absolute bottom-0 inset-x-0 px-3 py-3\">\n          <p className=\"font-bold text-2xl text-white truncate\">{creator.username}</p>\n        </div>\n      </div>\n    </a>\n  );\n}\n\nexport function DiscoverCreatorsStrip({\n  creators,\n  isLoading,\n  getHref,\n  allCreatorsHref = \"/creators\",\n  sectionLabel = \"Explore\",\n  title = \"Creators\",\n}: DiscoverCreatorsStripProps) {\n  if (!isLoading && creators.length === 0) return null;\n\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              <Users className=\"h-4 w-4 text-brand-purple\" />\n              <h2 className=\"text-lg font-bold\">{title}</h2>\n            </div>\n          </div>\n          <a\n            href={allCreatorsHref}\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) => <CreatorChipSkeleton key={i} />)\n              : creators.map((c) => (\n                  <CreatorChip key={c.walletAddress} creator={c} href={getHref(c)} />\n                ))}\n          </div>\n        </div>\n      </div>\n    </FadeIn>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBI;AAjBJ,mBAAyB;AACzB,0BAAkC;AAClC,+BAAuB;AACvB,kBAA2B;AAY3B,SAAS,sBAAsB;AAC7B,SACE,4CAAC,SAAI,WAAU,gEAA+D;AAElF;AAEA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AACF,GAGG;AACD,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,KAAK;AAGpD,QAAM,SACJ,QAAQ,eACP,QAAoE,mBACrE;AACF,QAAM,YAAY,UAAU,CAAC,kBAAc,wBAAW,MAAM,IAAI;AAEhE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAU;AAAA,MAEV,uDAAC,SAAI,WAAU,6DACZ;AAAA,qBACC;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,KAAI;AAAA,YACJ,eAAW;AAAA,YACX,SAAQ;AAAA,YACR,WAAU;AAAA,YACV,SAAS,MAAM,eAAe,IAAI;AAAA;AAAA,QACpC;AAAA,QAEF,4CAAC,SAAI,WAAU,yCACb,sDAAC,OAAE,WAAU,0CAA0C,kBAAQ,UAAS,GAC1E;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;AAEO,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf,QAAQ;AACV,GAA+B;AAC7B,MAAI,CAAC,aAAa,SAAS,WAAW,EAAG,QAAO;AAEhD,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,6BAAM,WAAU,6BAA4B;AAAA,UAC7C,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,yBAAyB,CAAG,CAAE,IACvE,SAAS,IAAI,CAAC,MACZ,4CAAC,eAAkC,SAAS,GAAG,MAAM,QAAQ,CAAC,KAA5C,EAAE,aAA6C,CAClE,GACP,GACF;AAAA,KACF,GACF;AAEJ;","names":[]}

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { Users, ArrowRight, AtSign } from "lucide-react";
+import { Users, ArrowRight } from "lucide-react";
 import { FadeIn } from "./motion-primitives.js";
 import { ipfsToHttp } from "../utils/ipfs.js";
 function CreatorChipSkeleton() {
@@ -11,13 +11,9 @@ function CreatorChip({
   creator,
   href
 }) {
-  const [avatarError, setAvatarError] = useState(false);
   const [bannerError, setBannerError] = useState(false);
-  const bannerSrc = creator.bannerImage ?? null;
-  const avatarSrc = creator.avatarImage ?? creator.bannerImage ?? null;
-  const bannerUrl = bannerSrc && !bannerError ? ipfsToHttp(bannerSrc) : null;
-  const avatarUrl = avatarSrc && !avatarError ? ipfsToHttp(avatarSrc) : null;
-  const displayName = creator.displayName || `@${creator.username}`;
+  const rawSrc = creator.bannerImage || creator.collectionImage || null;
+  const bannerUrl = rawSrc && !bannerError ? ipfsToHttp(rawSrc) : null;
   return /* @__PURE__ */ jsx(
     "a",
     {
@@ -35,26 +31,7 @@ function CreatorChip({
             onError: () => setBannerError(true)
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/80 via-black/10 to-transparent" }),
-        /* @__PURE__ */ jsxs("div", { className: "absolute bottom-0 inset-x-0 p-2.5 space-y-1.5", children: [
-          /* @__PURE__ */ jsx("div", { className: "h-8 w-8 rounded-full ring-2 ring-white/20 overflow-hidden bg-muted flex items-center justify-center", children: avatarUrl ? /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: avatarUrl,
-              alt: displayName ?? "",
-              loading: "lazy",
-              className: "h-full w-full object-cover",
-              onError: () => setAvatarError(true)
-            }
-          ) : /* @__PURE__ */ jsx("span", { className: "text-xs font-black text-white/60", children: (displayName ?? "?").charAt(0).toUpperCase() }) }),
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("p", { className: "font-bold text-white text-xs truncate", children: displayName }),
-            /* @__PURE__ */ jsxs("p", { className: "text-[10px] text-white/55 flex items-center gap-0.5", children: [
-              /* @__PURE__ */ jsx(AtSign, { className: "h-2 w-2 shrink-0" }),
-              /* @__PURE__ */ jsx("span", { className: "truncate", children: creator.username })
-            ] })
-          ] })
-        ] })
+        /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 inset-x-0 px-3 py-3", children: /* @__PURE__ */ jsx("p", { className: "font-bold text-2xl text-white truncate", children: creator.username }) })
       ] })
     }
   );
@@ -64,7 +41,7 @@ function DiscoverCreatorsStrip({
   isLoading,
   getHref,
   allCreatorsHref = "/creators",
-  sectionLabel = "Creator network",
+  sectionLabel = "Explore",
   title = "Creators"
 }) {
   if (!isLoading && creators.length === 0) return null;
@@ -89,7 +66,7 @@ function DiscoverCreatorsStrip({
         }
       )
     ] }),
-    /* @__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-3 w-max pb-1", children: isLoading ? Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsx(CreatorChipSkeleton, {}, i)) : creators.map((c) => /* @__PURE__ */ jsx(CreatorChip, { creator: c, href: getHref(c) }, c.walletAddress)) }) })
+    /* @__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(CreatorChipSkeleton, {}, i)) : creators.map((c) => /* @__PURE__ */ jsx(CreatorChip, { creator: c, href: getHref(c) }, c.walletAddress)) }) })
   ] }) });
 }
 export {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/discover-creators-strip.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { Users, ArrowRight, AtSign } from \"lucide-react\";\nimport { FadeIn } from \"./motion-primitives.js\";\nimport { ipfsToHttp } from \"../utils/ipfs.js\";\nimport type { ApiCreatorProfile } from \"@medialane/sdk\";\n\nexport interface DiscoverCreatorsStripProps {\n  creators: ApiCreatorProfile[];\n  isLoading: boolean;\n  getHref: (creator: ApiCreatorProfile) => string;\n  allCreatorsHref?: string;\n  sectionLabel?: string;\n  title?: string;\n}\n\nfunction CreatorChipSkeleton() {\n  return (\n    <div className=\"shrink-0 w-64 aspect-[3/4] rounded-xl bg-muted animate-pulse\" />\n  );\n}\n\nfunction CreatorChip({\n  creator,\n  href,\n}: {\n  creator: ApiCreatorProfile;\n  href: string;\n}) {\n  const [avatarError, setAvatarError] = useState(false);\n  const [bannerError, setBannerError] = useState(false);\n\n  const bannerSrc = creator.bannerImage ?? null;\n  const avatarSrc = creator.avatarImage ?? creator.bannerImage ?? null;\n\n  const bannerUrl = bannerSrc && !bannerError ? ipfsToHttp(bannerSrc) : null;\n  const avatarUrl = avatarSrc && !avatarError ? ipfsToHttp(avatarSrc) : null;\n\n  const displayName = creator.displayName || `@${creator.username}`;\n\n  return (\n    <a\n      href={href}\n      className=\"block shrink-0 w-64 snap-start active:scale-[0.97] transition-transform duration-150 select-none\"\n    >\n      <div className=\"relative aspect-[3/4] rounded-xl overflow-hidden bg-muted\">\n        {bannerUrl && (\n          <img\n            src={bannerUrl}\n            alt=\"\"\n            aria-hidden\n            loading=\"lazy\"\n            className=\"absolute inset-0 w-full h-full object-cover\"\n            onError={() => setBannerError(true)}\n          />\n        )}\n        <div className=\"absolute inset-0 bg-gradient-to-t from-black/80 via-black/10 to-transparent\" />\n        <div className=\"absolute bottom-0 inset-x-0 p-2.5 space-y-1.5\">\n          <div className=\"h-8 w-8 rounded-full ring-2 ring-white/20 overflow-hidden bg-muted flex items-center justify-center\">\n            {avatarUrl ? (\n              <img\n                src={avatarUrl}\n                alt={displayName ?? \"\"}\n                loading=\"lazy\"\n                className=\"h-full w-full object-cover\"\n                onError={() => setAvatarError(true)}\n              />\n            ) : (\n              <span className=\"text-xs font-black text-white/60\">\n                {(displayName ?? \"?\").charAt(0).toUpperCase()}\n              </span>\n            )}\n          </div>\n          <div>\n            <p className=\"font-bold text-white text-xs truncate\">{displayName}</p>\n            <p className=\"text-[10px] text-white/55 flex items-center gap-0.5\">\n              <AtSign className=\"h-2 w-2 shrink-0\" />\n              <span className=\"truncate\">{creator.username}</span>\n            </p>\n          </div>\n        </div>\n      </div>\n    </a>\n  );\n}\n\nexport function DiscoverCreatorsStrip({\n  creators,\n  isLoading,\n  getHref,\n  allCreatorsHref = \"/creators\",\n  sectionLabel = \"Creator network\",\n  title = \"Creators\",\n}: DiscoverCreatorsStripProps) {\n  if (!isLoading && creators.length === 0) return null;\n\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              <Users className=\"h-4 w-4 text-brand-purple\" />\n              <h2 className=\"text-lg font-bold\">{title}</h2>\n            </div>\n          </div>\n          <a\n            href={allCreatorsHref}\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-3 w-max pb-1\">\n            {isLoading\n              ? Array.from({ length: 6 }).map((_, i) => <CreatorChipSkeleton key={i} />)\n              : creators.map((c) => (\n                  <CreatorChip key={c.walletAddress} creator={c} href={getHref(c)} />\n                ))}\n          </div>\n        </div>\n      </div>\n    </FadeIn>\n  );\n}\n"],"mappings":";AAmBI,cAyDQ,YAzDR;AAjBJ,SAAS,gBAAgB;AACzB,SAAS,OAAO,YAAY,cAAc;AAC1C,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAY3B,SAAS,sBAAsB;AAC7B,SACE,oBAAC,SAAI,WAAU,gEAA+D;AAElF;AAEA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AACF,GAGG;AACD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AACpD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AAEpD,QAAM,YAAY,QAAQ,eAAe;AACzC,QAAM,YAAY,QAAQ,eAAe,QAAQ,eAAe;AAEhE,QAAM,YAAY,aAAa,CAAC,cAAc,WAAW,SAAS,IAAI;AACtE,QAAM,YAAY,aAAa,CAAC,cAAc,WAAW,SAAS,IAAI;AAEtE,QAAM,cAAc,QAAQ,eAAe,IAAI,QAAQ,QAAQ;AAE/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAU;AAAA,MAEV,+BAAC,SAAI,WAAU,6DACZ;AAAA,qBACC;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,KAAI;AAAA,YACJ,eAAW;AAAA,YACX,SAAQ;AAAA,YACR,WAAU;AAAA,YACV,SAAS,MAAM,eAAe,IAAI;AAAA;AAAA,QACpC;AAAA,QAEF,oBAAC,SAAI,WAAU,+EAA8E;AAAA,QAC7F,qBAAC,SAAI,WAAU,iDACb;AAAA,8BAAC,SAAI,WAAU,uGACZ,sBACC;AAAA,YAAC;AAAA;AAAA,cACC,KAAK;AAAA,cACL,KAAK,eAAe;AAAA,cACpB,SAAQ;AAAA,cACR,WAAU;AAAA,cACV,SAAS,MAAM,eAAe,IAAI;AAAA;AAAA,UACpC,IAEA,oBAAC,UAAK,WAAU,oCACZ,0BAAe,KAAK,OAAO,CAAC,EAAE,YAAY,GAC9C,GAEJ;AAAA,UACA,qBAAC,SACC;AAAA,gCAAC,OAAE,WAAU,yCAAyC,uBAAY;AAAA,YAClE,qBAAC,OAAE,WAAU,uDACX;AAAA,kCAAC,UAAO,WAAU,oBAAmB;AAAA,cACrC,oBAAC,UAAK,WAAU,YAAY,kBAAQ,UAAS;AAAA,eAC/C;AAAA,aACF;AAAA,WACF;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;AAEO,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf,QAAQ;AACV,GAA+B;AAC7B,MAAI,CAAC,aAAa,SAAS,WAAW,EAAG,QAAO;AAEhD,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,SAAM,WAAU,6BAA4B;AAAA,UAC7C,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,yBACZ,sBACG,MAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,MAAM,oBAAC,yBAAyB,CAAG,CAAE,IACvE,SAAS,IAAI,CAAC,MACZ,oBAAC,eAAkC,SAAS,GAAG,MAAM,QAAQ,CAAC,KAA5C,EAAE,aAA6C,CAClE,GACP,GACF;AAAA,KACF,GACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/discover-creators-strip.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { Users, ArrowRight } from \"lucide-react\";\nimport { FadeIn } from \"./motion-primitives.js\";\nimport { ipfsToHttp } from \"../utils/ipfs.js\";\nimport type { ApiCreatorProfile } from \"@medialane/sdk\";\n\nexport interface DiscoverCreatorsStripProps {\n  creators: ApiCreatorProfile[];\n  isLoading: boolean;\n  getHref: (creator: ApiCreatorProfile) => string;\n  allCreatorsHref?: string;\n  sectionLabel?: string;\n  title?: string;\n}\n\nfunction CreatorChipSkeleton() {\n  return (\n    <div className=\"shrink-0 w-64 aspect-[3/4] rounded-xl bg-muted animate-pulse\" />\n  );\n}\n\nfunction CreatorChip({\n  creator,\n  href,\n}: {\n  creator: ApiCreatorProfile;\n  href: string;\n}) {\n  const [bannerError, setBannerError] = useState(false);\n\n  // bannerImage with collectionImage fallback — io-approved big-username design\n  const rawSrc =\n    creator.bannerImage ||\n    (creator as ApiCreatorProfile & { collectionImage?: string | null }).collectionImage ||\n    null;\n  const bannerUrl = rawSrc && !bannerError ? ipfsToHttp(rawSrc) : null;\n\n  return (\n    <a\n      href={href}\n      className=\"block shrink-0 w-64 snap-start active:scale-[0.97] transition-transform duration-150 select-none\"\n    >\n      <div className=\"relative aspect-[3/4] rounded-xl overflow-hidden bg-muted\">\n        {bannerUrl && (\n          <img\n            src={bannerUrl}\n            alt=\"\"\n            aria-hidden\n            loading=\"lazy\"\n            className=\"absolute inset-0 w-full h-full object-cover\"\n            onError={() => setBannerError(true)}\n          />\n        )}\n        <div className=\"absolute bottom-0 inset-x-0 px-3 py-3\">\n          <p className=\"font-bold text-2xl text-white truncate\">{creator.username}</p>\n        </div>\n      </div>\n    </a>\n  );\n}\n\nexport function DiscoverCreatorsStrip({\n  creators,\n  isLoading,\n  getHref,\n  allCreatorsHref = \"/creators\",\n  sectionLabel = \"Explore\",\n  title = \"Creators\",\n}: DiscoverCreatorsStripProps) {\n  if (!isLoading && creators.length === 0) return null;\n\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              <Users className=\"h-4 w-4 text-brand-purple\" />\n              <h2 className=\"text-lg font-bold\">{title}</h2>\n            </div>\n          </div>\n          <a\n            href={allCreatorsHref}\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) => <CreatorChipSkeleton key={i} />)\n              : creators.map((c) => (\n                  <CreatorChip key={c.walletAddress} creator={c} href={getHref(c)} />\n                ))}\n          </div>\n        </div>\n      </div>\n    </FadeIn>\n  );\n}\n"],"mappings":";AAmBI,cAyBE,YAzBF;AAjBJ,SAAS,gBAAgB;AACzB,SAAS,OAAO,kBAAkB;AAClC,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAY3B,SAAS,sBAAsB;AAC7B,SACE,oBAAC,SAAI,WAAU,gEAA+D;AAElF;AAEA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AACF,GAGG;AACD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AAGpD,QAAM,SACJ,QAAQ,eACP,QAAoE,mBACrE;AACF,QAAM,YAAY,UAAU,CAAC,cAAc,WAAW,MAAM,IAAI;AAEhE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAU;AAAA,MAEV,+BAAC,SAAI,WAAU,6DACZ;AAAA,qBACC;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,KAAI;AAAA,YACJ,eAAW;AAAA,YACX,SAAQ;AAAA,YACR,WAAU;AAAA,YACV,SAAS,MAAM,eAAe,IAAI;AAAA;AAAA,QACpC;AAAA,QAEF,oBAAC,SAAI,WAAU,yCACb,8BAAC,OAAE,WAAU,0CAA0C,kBAAQ,UAAS,GAC1E;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;AAEO,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf,QAAQ;AACV,GAA+B;AAC7B,MAAI,CAAC,aAAa,SAAS,WAAW,EAAG,QAAO;AAEhD,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,SAAM,WAAU,6BAA4B;AAAA,UAC7C,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,yBAAyB,CAAG,CAAE,IACvE,SAAS,IAAI,CAAC,MACZ,oBAAC,eAAkC,SAAS,GAAG,MAAM,QAAQ,CAAC,KAA5C,EAAE,aAA6C,CAClE,GACP,GACF;AAAA,KACF,GACF;AAEJ;","names":[]}

package/dist/components/scroll-section.cjs

@@ -39,6 +39,7 @@ function ScrollSection({
   icon,
   iconBg,
   title,
+  subtitle,
   href,
   linkLabel = "See all",
   children
@@ -47,7 +48,10 @@ function ScrollSection({
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2.5", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `h-7 w-7 rounded-lg flex items-center justify-center ${iconBg}`, children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "text-lg sm:text-xl font-semibold", children: title })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "text-lg sm:text-xl font-semibold leading-none", children: title }),
+          subtitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-[10px] text-muted-foreground mt-1", children: subtitle })
+        ] })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
         import_link.default,
@@ -62,7 +66,7 @@ function ScrollSection({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-full overflow-x-auto scrollbar-hide", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex gap-4 snap-x snap-mandatory pb-2", style: { width: "max-content" }, children }) })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-full overflow-x-auto scrollbar-hide", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex gap-5 sm:gap-6 snap-x snap-mandatory pb-2", style: { width: "max-content" }, children }) })
   ] });
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/components/scroll-section.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/scroll-section.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\nimport { ArrowRight } from \"lucide-react\";\n\nexport interface ScrollSectionProps {\n  /** Icon element rendered inside the colored badge */\n  icon: React.ReactNode;\n  /** Tailwind classes for the icon badge (background + shadow) */\n  iconBg: string;\n  title: string;\n  /** \"See all\" link destination */\n  href: string;\n  /** Button label — defaults to \"See all\" */\n  linkLabel?: string;\n  /** Scroll items: wrap each in a sized snap-start div */\n  children: React.ReactNode;\n}\n\nexport function ScrollSection({\n  icon,\n  iconBg,\n  title,\n  href,\n  linkLabel = \"See all\",\n  children,\n}: ScrollSectionProps) {\n  return (\n    <section className=\"space-y-4\">\n      <div className=\"flex items-center justify-between\">\n        <div className=\"flex items-center gap-2.5\">\n          <div className={`h-7 w-7 rounded-lg flex items-center justify-center ${iconBg}`}>\n            {icon}\n          </div>\n          <h2 className=\"text-lg sm:text-xl font-semibold\">{title}</h2>\n        </div>\n        <Link\n          href={href}\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          {linkLabel} <ArrowRight className=\"h-3.5 w-3.5\" />\n        </Link>\n      </div>\n\n      <div className=\"w-full overflow-x-auto scrollbar-hide\">\n        <div className=\"flex gap-4 snap-x snap-mandatory pb-2\" style={{ width: \"max-content\" }}>\n          {children}\n        </div>\n      </div>\n    </section>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8BQ;AA5BR,kBAAiB;AACjB,0BAA2B;AAgBpB,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AACF,GAAuB;AACrB,SACE,6CAAC,aAAQ,WAAU,aACjB;AAAA,iDAAC,SAAI,WAAU,qCACb;AAAA,mDAAC,SAAI,WAAU,6BACb;AAAA,oDAAC,SAAI,WAAW,uDAAuD,MAAM,IAC1E,gBACH;AAAA,QACA,4CAAC,QAAG,WAAU,oCAAoC,iBAAM;AAAA,SAC1D;AAAA,MACA;AAAA,QAAC,YAAAA;AAAA,QAAA;AAAA,UACC;AAAA,UACA,WAAU;AAAA,UAET;AAAA;AAAA,YAAU;AAAA,YAAC,4CAAC,kCAAW,WAAU,eAAc;AAAA;AAAA;AAAA,MAClD;AAAA,OACF;AAAA,IAEA,4CAAC,SAAI,WAAU,yCACb,sDAAC,SAAI,WAAU,yCAAwC,OAAO,EAAE,OAAO,cAAc,GAClF,UACH,GACF;AAAA,KACF;AAEJ;","names":["Link"]}
+{"version":3,"sources":["../../src/components/scroll-section.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\nimport { ArrowRight } from \"lucide-react\";\n\nexport interface ScrollSectionProps {\n  /** Icon element rendered inside the colored badge */\n  icon: React.ReactNode;\n  /** Tailwind classes for the icon badge (background + shadow) */\n  iconBg: string;\n  title: string;\n  /** Optional small line under the title (e.g. \"Updated 1m ago\") */\n  subtitle?: React.ReactNode;\n  /** \"See all\" link destination */\n  href: string;\n  /** Button label — defaults to \"See all\" */\n  linkLabel?: string;\n  /** Scroll items: wrap each in a sized snap-start div */\n  children: React.ReactNode;\n}\n\nexport function ScrollSection({\n  icon,\n  iconBg,\n  title,\n  subtitle,\n  href,\n  linkLabel = \"See all\",\n  children,\n}: ScrollSectionProps) {\n  return (\n    <section className=\"space-y-4\">\n      <div className=\"flex items-center justify-between\">\n        <div className=\"flex items-center gap-2.5\">\n          <div className={`h-7 w-7 rounded-lg flex items-center justify-center ${iconBg}`}>\n            {icon}\n          </div>\n          <div>\n            <h2 className=\"text-lg sm:text-xl font-semibold leading-none\">{title}</h2>\n            {subtitle && <p className=\"text-[10px] text-muted-foreground mt-1\">{subtitle}</p>}\n          </div>\n        </div>\n        <Link\n          href={href}\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          {linkLabel} <ArrowRight className=\"h-3.5 w-3.5\" />\n        </Link>\n      </div>\n\n      <div className=\"w-full overflow-x-auto scrollbar-hide\">\n        <div className=\"flex gap-5 sm:gap-6 snap-x snap-mandatory pb-2\" style={{ width: \"max-content\" }}>\n          {children}\n        </div>\n      </div>\n    </section>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkCU;AAhCV,kBAAiB;AACjB,0BAA2B;AAkBpB,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AACF,GAAuB;AACrB,SACE,6CAAC,aAAQ,WAAU,aACjB;AAAA,iDAAC,SAAI,WAAU,qCACb;AAAA,mDAAC,SAAI,WAAU,6BACb;AAAA,oDAAC,SAAI,WAAW,uDAAuD,MAAM,IAC1E,gBACH;AAAA,QACA,6CAAC,SACC;AAAA,sDAAC,QAAG,WAAU,iDAAiD,iBAAM;AAAA,UACpE,YAAY,4CAAC,OAAE,WAAU,0CAA0C,oBAAS;AAAA,WAC/E;AAAA,SACF;AAAA,MACA;AAAA,QAAC,YAAAA;AAAA,QAAA;AAAA,UACC;AAAA,UACA,WAAU;AAAA,UAET;AAAA;AAAA,YAAU;AAAA,YAAC,4CAAC,kCAAW,WAAU,eAAc;AAAA;AAAA;AAAA,MAClD;AAAA,OACF;AAAA,IAEA,4CAAC,SAAI,WAAU,yCACb,sDAAC,SAAI,WAAU,kDAAiD,OAAO,EAAE,OAAO,cAAc,GAC3F,UACH,GACF;AAAA,KACF;AAEJ;","names":["Link"]}

package/dist/components/scroll-section.d.cts

@@ -6,6 +6,8 @@ interface ScrollSectionProps {
     /** Tailwind classes for the icon badge (background + shadow) */
     iconBg: string;
     title: string;
+    /** Optional small line under the title (e.g. "Updated 1m ago") */
+    subtitle?: React.ReactNode;
     /** "See all" link destination */
     href: string;
     /** Button label — defaults to "See all" */
@@ -13,6 +15,6 @@ interface ScrollSectionProps {
     /** Scroll items: wrap each in a sized snap-start div */
     children: React.ReactNode;
 }
-declare function ScrollSection({ icon, iconBg, title, href, linkLabel, children, }: ScrollSectionProps): react_jsx_runtime.JSX.Element;
+declare function ScrollSection({ icon, iconBg, title, subtitle, href, linkLabel, children, }: ScrollSectionProps): react_jsx_runtime.JSX.Element;
 
 export { ScrollSection, type ScrollSectionProps };

package/dist/components/scroll-section.d.ts

@@ -6,6 +6,8 @@ interface ScrollSectionProps {
     /** Tailwind classes for the icon badge (background + shadow) */
     iconBg: string;
     title: string;
+    /** Optional small line under the title (e.g. "Updated 1m ago") */
+    subtitle?: React.ReactNode;
     /** "See all" link destination */
     href: string;
     /** Button label — defaults to "See all" */
@@ -13,6 +15,6 @@ interface ScrollSectionProps {
     /** Scroll items: wrap each in a sized snap-start div */
     children: React.ReactNode;
 }
-declare function ScrollSection({ icon, iconBg, title, href, linkLabel, children, }: ScrollSectionProps): react_jsx_runtime.JSX.Element;
+declare function ScrollSection({ icon, iconBg, title, subtitle, href, linkLabel, children, }: ScrollSectionProps): react_jsx_runtime.JSX.Element;
 
 export { ScrollSection, type ScrollSectionProps };

package/dist/components/scroll-section.js

@@ -6,6 +6,7 @@ function ScrollSection({
   icon,
   iconBg,
   title,
+  subtitle,
   href,
   linkLabel = "See all",
   children
@@ -14,7 +15,10 @@ function ScrollSection({
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
         /* @__PURE__ */ jsx("div", { className: `h-7 w-7 rounded-lg flex items-center justify-center ${iconBg}`, children: icon }),
-        /* @__PURE__ */ jsx("h2", { className: "text-lg sm:text-xl font-semibold", children: title })
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-lg sm:text-xl font-semibold leading-none", children: title }),
+          subtitle && /* @__PURE__ */ jsx("p", { className: "text-[10px] text-muted-foreground mt-1", children: subtitle })
+        ] })
       ] }),
       /* @__PURE__ */ jsxs(
         Link,
@@ -29,7 +33,7 @@ function ScrollSection({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "w-full overflow-x-auto scrollbar-hide", children: /* @__PURE__ */ jsx("div", { className: "flex gap-4 snap-x snap-mandatory pb-2", style: { width: "max-content" }, children }) })
+    /* @__PURE__ */ jsx("div", { className: "w-full overflow-x-auto scrollbar-hide", children: /* @__PURE__ */ jsx("div", { className: "flex gap-5 sm:gap-6 snap-x snap-mandatory pb-2", style: { width: "max-content" }, children }) })
   ] });
 }
 export {

package/dist/components/scroll-section.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/scroll-section.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\nimport { ArrowRight } from \"lucide-react\";\n\nexport interface ScrollSectionProps {\n  /** Icon element rendered inside the colored badge */\n  icon: React.ReactNode;\n  /** Tailwind classes for the icon badge (background + shadow) */\n  iconBg: string;\n  title: string;\n  /** \"See all\" link destination */\n  href: string;\n  /** Button label — defaults to \"See all\" */\n  linkLabel?: string;\n  /** Scroll items: wrap each in a sized snap-start div */\n  children: React.ReactNode;\n}\n\nexport function ScrollSection({\n  icon,\n  iconBg,\n  title,\n  href,\n  linkLabel = \"See all\",\n  children,\n}: ScrollSectionProps) {\n  return (\n    <section className=\"space-y-4\">\n      <div className=\"flex items-center justify-between\">\n        <div className=\"flex items-center gap-2.5\">\n          <div className={`h-7 w-7 rounded-lg flex items-center justify-center ${iconBg}`}>\n            {icon}\n          </div>\n          <h2 className=\"text-lg sm:text-xl font-semibold\">{title}</h2>\n        </div>\n        <Link\n          href={href}\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          {linkLabel} <ArrowRight className=\"h-3.5 w-3.5\" />\n        </Link>\n      </div>\n\n      <div className=\"w-full overflow-x-auto scrollbar-hide\">\n        <div className=\"flex gap-4 snap-x snap-mandatory pb-2\" style={{ width: \"max-content\" }}>\n          {children}\n        </div>\n      </div>\n    </section>\n  );\n}\n"],"mappings":";AA8BQ,SACE,KADF;AA5BR,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAgBpB,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AACF,GAAuB;AACrB,SACE,qBAAC,aAAQ,WAAU,aACjB;AAAA,yBAAC,SAAI,WAAU,qCACb;AAAA,2BAAC,SAAI,WAAU,6BACb;AAAA,4BAAC,SAAI,WAAW,uDAAuD,MAAM,IAC1E,gBACH;AAAA,QACA,oBAAC,QAAG,WAAU,oCAAoC,iBAAM;AAAA,SAC1D;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,WAAU;AAAA,UAET;AAAA;AAAA,YAAU;AAAA,YAAC,oBAAC,cAAW,WAAU,eAAc;AAAA;AAAA;AAAA,MAClD;AAAA,OACF;AAAA,IAEA,oBAAC,SAAI,WAAU,yCACb,8BAAC,SAAI,WAAU,yCAAwC,OAAO,EAAE,OAAO,cAAc,GAClF,UACH,GACF;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/scroll-section.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\nimport { ArrowRight } from \"lucide-react\";\n\nexport interface ScrollSectionProps {\n  /** Icon element rendered inside the colored badge */\n  icon: React.ReactNode;\n  /** Tailwind classes for the icon badge (background + shadow) */\n  iconBg: string;\n  title: string;\n  /** Optional small line under the title (e.g. \"Updated 1m ago\") */\n  subtitle?: React.ReactNode;\n  /** \"See all\" link destination */\n  href: string;\n  /** Button label — defaults to \"See all\" */\n  linkLabel?: string;\n  /** Scroll items: wrap each in a sized snap-start div */\n  children: React.ReactNode;\n}\n\nexport function ScrollSection({\n  icon,\n  iconBg,\n  title,\n  subtitle,\n  href,\n  linkLabel = \"See all\",\n  children,\n}: ScrollSectionProps) {\n  return (\n    <section className=\"space-y-4\">\n      <div className=\"flex items-center justify-between\">\n        <div className=\"flex items-center gap-2.5\">\n          <div className={`h-7 w-7 rounded-lg flex items-center justify-center ${iconBg}`}>\n            {icon}\n          </div>\n          <div>\n            <h2 className=\"text-lg sm:text-xl font-semibold leading-none\">{title}</h2>\n            {subtitle && <p className=\"text-[10px] text-muted-foreground mt-1\">{subtitle}</p>}\n          </div>\n        </div>\n        <Link\n          href={href}\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          {linkLabel} <ArrowRight className=\"h-3.5 w-3.5\" />\n        </Link>\n      </div>\n\n      <div className=\"w-full overflow-x-auto scrollbar-hide\">\n        <div className=\"flex gap-5 sm:gap-6 snap-x snap-mandatory pb-2\" style={{ width: \"max-content\" }}>\n          {children}\n        </div>\n      </div>\n    </section>\n  );\n}\n"],"mappings":";AAkCU,cAGA,YAHA;AAhCV,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAkBpB,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AACF,GAAuB;AACrB,SACE,qBAAC,aAAQ,WAAU,aACjB;AAAA,yBAAC,SAAI,WAAU,qCACb;AAAA,2BAAC,SAAI,WAAU,6BACb;AAAA,4BAAC,SAAI,WAAW,uDAAuD,MAAM,IAC1E,gBACH;AAAA,QACA,qBAAC,SACC;AAAA,8BAAC,QAAG,WAAU,iDAAiD,iBAAM;AAAA,UACpE,YAAY,oBAAC,OAAE,WAAU,0CAA0C,oBAAS;AAAA,WAC/E;AAAA,SACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,WAAU;AAAA,UAET;AAAA;AAAA,YAAU;AAAA,YAAC,oBAAC,cAAW,WAAU,eAAc;AAAA;AAAA;AAAA,MAClD;AAAA,OACF;AAAA,IAEA,oBAAC,SAAI,WAAU,yCACb,8BAAC,SAAI,WAAU,kDAAiD,OAAO,EAAE,OAAO,cAAc,GAC3F,UACH,GACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/medialane.css

@@ -192,6 +192,12 @@ input[type="number"]::-webkit-outer-spin-button,
 input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
 input[type="number"] { -moz-appearance: textfield; }
 
+/* ── Wrapper that adds a 2px animated gradient border around a .card-base card ── */
+.card-exclusive-wrapper {
+  padding: 2px;
+  border-radius: calc(var(--radius) * 1.25 + 2px);
+}
+
 /* ── Animated gradient border (marketplace buy button) ────────────────── */
 .btn-border-animated {
   background: linear-gradient(270deg, #2563eb, #9333ea, #f43f5e, #ea580c, #2563eb);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medialane/ui",
-  "version": "0.11.2",
+  "version": "0.12.0",
   "description": "Shared UI components for Medialane apps",
   "type": "module",
   "main": "./dist/index.cjs",