@medialane/ui 0.57.1 → 0.58.0

package/dist/components/asset-card.cjs

@@ -91,8 +91,8 @@ function AssetCard({
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[10px] text-white/70", children: "Indexing\u2026" })
           ] })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-1.5 px-3 py-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_link.default, { href, className: "block min-w-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-start justify-between gap-2 px-3 py-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_link.default, { href, className: "block min-w-0 flex-1", children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               "p",
               {
@@ -103,7 +103,7 @@ function AssetCard({
             ),
             subtitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xs text-muted-foreground line-clamp-1 leading-snug", children: subtitle })
           ] }),
-          ipType && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ip_type_badge.IpTypeBadge, { ipType, size: "sm", baseUrl: ipTypeBaseUrl }) })
+          ipType && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "shrink-0 mt-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ip_type_badge.IpTypeBadge, { ipType, size: "sm", baseUrl: ipTypeBaseUrl }) })
         ] })
       ]
     }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/asset-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport Link from \"next/link\";\nimport Image from \"next/image\";\nimport { Loader2 } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\nimport { ipfsToHttp } from \"../utils/ipfs.js\";\nimport { formatDisplayPrice } from \"../utils/format.js\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport { IpTypeBadge } from \"./ip-type-badge.js\";\n\nexport interface AssetCardPrice {\n  formatted?: string | null;\n  currency?: string | null;\n}\n\nexport interface AssetCardProps {\n  /** Asset detail link. */\n  href: string;\n  /** Asset title. */\n  name: string;\n  /** Raw image (ipfs:// or http) — resolved internally. */\n  image?: string | null;\n  /** Secondary line under the title (collection or description). */\n  subtitle?: string | null;\n  /** IP type (apiValue or label) — renders the icon badge on the footer left. */\n  ipType?: string | null;\n  /** Listing price; omit/null shows no price. */\n  price?: AssetCardPrice | null;\n  /** Shown when the image is missing/errors (e.g. token id). */\n  fallbackId?: string | null;\n  /** Show the \"Indexing…\" overlay. */\n  indexing?: boolean;\n  /** Base URL for the ipType badge link. Default \"\" (relative). */\n  ipTypeBaseUrl?: string;\n  className?: string;\n}\n\n/**\n * The platform's shared asset card — lean and presentational.\n *\n * Intentionally has no action buttons, dropdowns or dialogs: the image and\n * text are the only interactive surface (a single asset link), which keeps\n * browse grids and carousels fast even when many cards render. Surfaces that\n * need owner/marketplace actions use the richer `TokenCard` / `ListingCard`.\n *\n * Layout: inset 4:5 artwork (gallery ratio, echoing the Medialane Collection\n * Card) with the price as a glass pill on the artwork (the collection cards'\n * Floor-pill vocabulary) → display-face title → optional subtitle → optional\n * ipType badge.\n */\nexport function AssetCard({\n  href,\n  name,\n  image,\n  subtitle,\n  ipType,\n  price,\n  fallbackId,\n  indexing = false,\n  ipTypeBaseUrl = \"\",\n  className,\n}: AssetCardProps) {\n  const [imgError, setImgError] = useState(false);\n  const resolved = image ? ipfsToHttp(image) : null;\n  const hasPrice = !!price?.formatted;\n\n  return (\n    <div\n      className={cn(\n        \"card-base group relative flex flex-col w-full transition-colors hover:border-foreground/20\",\n        className\n      )}\n    >\n      {/* Artwork — inset with a gallery 4:5 ratio, like the Collection Card */}\n      <Link href={href} className=\"block p-1.5 pb-0\">\n        <div className=\"relative aspect-[4/5] rounded-[12px] bg-muted overflow-hidden ring-1 ring-border/50\">\n          {resolved && !imgError ? (\n            <Image\n              src={resolved}\n              alt={name}\n              fill\n              unoptimized\n              sizes=\"(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 22vw\"\n              className=\"object-cover transition-transform duration-500 group-hover:scale-105\"\n              onError={() => setImgError(true)}\n            />\n          ) : (\n            <div className=\"absolute inset-0 flex items-center justify-center bg-gradient-to-br from-brand-blue/25 via-brand-purple/25 to-brand-rose/25\">\n              <span className=\"text-sm font-semibold text-muted-foreground tabular-nums\">\n                #{fallbackId ?? \"?\"}\n              </span>\n            </div>\n          )}\n\n          {/* Price pill — anchored on the artwork, same glass chip as the\n              collection cards' Floor pill */}\n          {hasPrice && !indexing && (\n            <span className=\"absolute bottom-2 right-2 inline-flex items-center gap-1 text-xs font-bold text-white/95 backdrop-blur-md bg-black/40 rounded-full px-2.5 py-1 tabular-nums\">\n              {price!.currency && <CurrencyIcon symbol={price!.currency} size={12} />}\n              {formatDisplayPrice(price!.formatted!)}\n            </span>\n          )}\n\n          {indexing && (\n            <div className=\"absolute bottom-0 inset-x-0 flex items-center justify-center gap-1.5 bg-black/50 backdrop-blur-sm py-1.5\">\n              <Loader2 className=\"h-3 w-3 animate-spin text-white/70\" />\n              <span className=\"text-[10px] text-white/70\">Indexing…</span>\n            </div>\n          )}\n        </div>\n      </Link>\n\n      {/* Body */}\n      <div className=\"flex flex-col gap-1.5 px-3 py-3\">\n        <Link href={href} className=\"block min-w-0\">\n          <p\n            className=\"text-[15px] font-bold line-clamp-1 leading-snug\"\n            style={{ fontFamily: \"var(--font-display, inherit)\" }}\n          >\n            {name}\n          </p>\n          {subtitle && (\n            <p className=\"text-xs text-muted-foreground line-clamp-1 leading-snug\">\n              {subtitle}\n            </p>\n          )}\n        </Link>\n\n        {ipType && (\n          <div className=\"flex items-center\">\n            <IpTypeBadge ipType={ipType} size=\"sm\" baseUrl={ipTypeBaseUrl} />\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\nexport function AssetCardSkeleton() {\n  return (\n    <div className=\"card-base flex flex-col w-full\">\n      <div className=\"p-1.5 pb-0\">\n        <div className=\"aspect-[4/5] w-full animate-pulse bg-muted rounded-[12px]\" />\n      </div>\n      <div className=\"px-3 py-3 space-y-1.5\">\n        <div className=\"h-4 w-3/4 rounded-md animate-pulse bg-muted\" />\n        <div className=\"h-3.5 w-2/5 rounded-md animate-pulse bg-muted\" />\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+EY;AA7EZ,mBAAyB;AACzB,kBAAiB;AACjB,mBAAkB;AAClB,0BAAwB;AACxB,gBAAmB;AACnB,kBAA2B;AAC3B,oBAAmC;AACnC,2BAA6B;AAC7B,2BAA4B;AA0CrB,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB;AACF,GAAmB;AACjB,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,KAAK;AAC9C,QAAM,WAAW,YAAQ,wBAAW,KAAK,IAAI;AAC7C,QAAM,WAAW,CAAC,CAAC,OAAO;AAE1B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MAGA;AAAA,oDAAC,YAAAA,SAAA,EAAK,MAAY,WAAU,oBAC1B,uDAAC,SAAI,WAAU,uFACZ;AAAA,sBAAY,CAAC,WACZ;AAAA,YAAC,aAAAC;AAAA,YAAA;AAAA,cACC,KAAK;AAAA,cACL,KAAK;AAAA,cACL,MAAI;AAAA,cACJ,aAAW;AAAA,cACX,OAAM;AAAA,cACN,WAAU;AAAA,cACV,SAAS,MAAM,YAAY,IAAI;AAAA;AAAA,UACjC,IAEA,4CAAC,SAAI,WAAU,+HACb,uDAAC,UAAK,WAAU,4DAA2D;AAAA;AAAA,YACvE,cAAc;AAAA,aAClB,GACF;AAAA,UAKD,YAAY,CAAC,YACZ,6CAAC,UAAK,WAAU,+JACb;AAAA,kBAAO,YAAY,4CAAC,qCAAa,QAAQ,MAAO,UAAU,MAAM,IAAI;AAAA,gBACpE,kCAAmB,MAAO,SAAU;AAAA,aACvC;AAAA,UAGD,YACC,6CAAC,SAAI,WAAU,4GACb;AAAA,wDAAC,+BAAQ,WAAU,sCAAqC;AAAA,YACxD,4CAAC,UAAK,WAAU,6BAA4B,4BAAS;AAAA,aACvD;AAAA,WAEJ,GACF;AAAA,QAGA,6CAAC,SAAI,WAAU,mCACb;AAAA,uDAAC,YAAAD,SAAA,EAAK,MAAY,WAAU,iBAC1B;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO,EAAE,YAAY,+BAA+B;AAAA,gBAEnD;AAAA;AAAA,YACH;AAAA,YACC,YACC,4CAAC,OAAE,WAAU,2DACV,oBACH;AAAA,aAEJ;AAAA,UAEC,UACC,4CAAC,SAAI,WAAU,qBACb,sDAAC,oCAAY,QAAgB,MAAK,MAAK,SAAS,eAAe,GACjE;AAAA,WAEJ;AAAA;AAAA;AAAA,EACF;AAEJ;AAEO,SAAS,oBAAoB;AAClC,SACE,6CAAC,SAAI,WAAU,kCACb;AAAA,gDAAC,SAAI,WAAU,cACb,sDAAC,SAAI,WAAU,6DAA4D,GAC7E;AAAA,IACA,6CAAC,SAAI,WAAU,yBACb;AAAA,kDAAC,SAAI,WAAU,+CAA8C;AAAA,MAC7D,4CAAC,SAAI,WAAU,iDAAgD;AAAA,OACjE;AAAA,KACF;AAEJ;","names":["Link","Image"]}
+{"version":3,"sources":["../../src/components/asset-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport Link from \"next/link\";\nimport Image from \"next/image\";\nimport { Loader2 } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\nimport { ipfsToHttp } from \"../utils/ipfs.js\";\nimport { formatDisplayPrice } from \"../utils/format.js\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport { IpTypeBadge } from \"./ip-type-badge.js\";\n\nexport interface AssetCardPrice {\n  formatted?: string | null;\n  currency?: string | null;\n}\n\nexport interface AssetCardProps {\n  /** Asset detail link. */\n  href: string;\n  /** Asset title. */\n  name: string;\n  /** Raw image (ipfs:// or http) — resolved internally. */\n  image?: string | null;\n  /** Secondary line under the title (collection or description). */\n  subtitle?: string | null;\n  /** IP type (apiValue or label) — renders the icon badge on the footer left. */\n  ipType?: string | null;\n  /** Listing price; omit/null shows no price. */\n  price?: AssetCardPrice | null;\n  /** Shown when the image is missing/errors (e.g. token id). */\n  fallbackId?: string | null;\n  /** Show the \"Indexing…\" overlay. */\n  indexing?: boolean;\n  /** Base URL for the ipType badge link. Default \"\" (relative). */\n  ipTypeBaseUrl?: string;\n  className?: string;\n}\n\n/**\n * The platform's shared asset card — lean and presentational.\n *\n * Intentionally has no action buttons, dropdowns or dialogs: the image and\n * text are the only interactive surface (a single asset link), which keeps\n * browse grids and carousels fast even when many cards render. Surfaces that\n * need owner/marketplace actions use the richer `TokenCard` / `ListingCard`.\n *\n * Layout: inset 4:5 artwork (gallery ratio, echoing the Medialane Collection\n * Card) with the price as a glass pill on the artwork (the collection cards'\n * Floor-pill vocabulary) → one body row: display-face title + optional\n * subtitle, with the optional ipType badge inline on the right.\n */\nexport function AssetCard({\n  href,\n  name,\n  image,\n  subtitle,\n  ipType,\n  price,\n  fallbackId,\n  indexing = false,\n  ipTypeBaseUrl = \"\",\n  className,\n}: AssetCardProps) {\n  const [imgError, setImgError] = useState(false);\n  const resolved = image ? ipfsToHttp(image) : null;\n  const hasPrice = !!price?.formatted;\n\n  return (\n    <div\n      className={cn(\n        \"card-base group relative flex flex-col w-full transition-colors hover:border-foreground/20\",\n        className\n      )}\n    >\n      {/* Artwork — inset with a gallery 4:5 ratio, like the Collection Card */}\n      <Link href={href} className=\"block p-1.5 pb-0\">\n        <div className=\"relative aspect-[4/5] rounded-[12px] bg-muted overflow-hidden ring-1 ring-border/50\">\n          {resolved && !imgError ? (\n            <Image\n              src={resolved}\n              alt={name}\n              fill\n              unoptimized\n              sizes=\"(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 22vw\"\n              className=\"object-cover transition-transform duration-500 group-hover:scale-105\"\n              onError={() => setImgError(true)}\n            />\n          ) : (\n            <div className=\"absolute inset-0 flex items-center justify-center bg-gradient-to-br from-brand-blue/25 via-brand-purple/25 to-brand-rose/25\">\n              <span className=\"text-sm font-semibold text-muted-foreground tabular-nums\">\n                #{fallbackId ?? \"?\"}\n              </span>\n            </div>\n          )}\n\n          {/* Price pill — anchored on the artwork, same glass chip as the\n              collection cards' Floor pill */}\n          {hasPrice && !indexing && (\n            <span className=\"absolute bottom-2 right-2 inline-flex items-center gap-1 text-xs font-bold text-white/95 backdrop-blur-md bg-black/40 rounded-full px-2.5 py-1 tabular-nums\">\n              {price!.currency && <CurrencyIcon symbol={price!.currency} size={12} />}\n              {formatDisplayPrice(price!.formatted!)}\n            </span>\n          )}\n\n          {indexing && (\n            <div className=\"absolute bottom-0 inset-x-0 flex items-center justify-center gap-1.5 bg-black/50 backdrop-blur-sm py-1.5\">\n              <Loader2 className=\"h-3 w-3 animate-spin text-white/70\" />\n              <span className=\"text-[10px] text-white/70\">Indexing…</span>\n            </div>\n          )}\n        </div>\n      </Link>\n\n      {/* Body — one tight block: title (+ optional ipType badge inline) and subtitle */}\n      <div className=\"flex items-start justify-between gap-2 px-3 py-3\">\n        <Link href={href} className=\"block min-w-0 flex-1\">\n          <p\n            className=\"text-[15px] font-bold line-clamp-1 leading-snug\"\n            style={{ fontFamily: \"var(--font-display, inherit)\" }}\n          >\n            {name}\n          </p>\n          {subtitle && (\n            <p className=\"text-xs text-muted-foreground line-clamp-1 leading-snug\">\n              {subtitle}\n            </p>\n          )}\n        </Link>\n\n        {ipType && (\n          <div className=\"shrink-0 mt-0.5\">\n            <IpTypeBadge ipType={ipType} size=\"sm\" baseUrl={ipTypeBaseUrl} />\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\nexport function AssetCardSkeleton() {\n  return (\n    <div className=\"card-base flex flex-col w-full\">\n      <div className=\"p-1.5 pb-0\">\n        <div className=\"aspect-[4/5] w-full animate-pulse bg-muted rounded-[12px]\" />\n      </div>\n      <div className=\"px-3 py-3 space-y-1.5\">\n        <div className=\"h-4 w-3/4 rounded-md animate-pulse bg-muted\" />\n        <div className=\"h-3.5 w-2/5 rounded-md animate-pulse bg-muted\" />\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+EY;AA7EZ,mBAAyB;AACzB,kBAAiB;AACjB,mBAAkB;AAClB,0BAAwB;AACxB,gBAAmB;AACnB,kBAA2B;AAC3B,oBAAmC;AACnC,2BAA6B;AAC7B,2BAA4B;AA0CrB,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB;AACF,GAAmB;AACjB,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,KAAK;AAC9C,QAAM,WAAW,YAAQ,wBAAW,KAAK,IAAI;AAC7C,QAAM,WAAW,CAAC,CAAC,OAAO;AAE1B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MAGA;AAAA,oDAAC,YAAAA,SAAA,EAAK,MAAY,WAAU,oBAC1B,uDAAC,SAAI,WAAU,uFACZ;AAAA,sBAAY,CAAC,WACZ;AAAA,YAAC,aAAAC;AAAA,YAAA;AAAA,cACC,KAAK;AAAA,cACL,KAAK;AAAA,cACL,MAAI;AAAA,cACJ,aAAW;AAAA,cACX,OAAM;AAAA,cACN,WAAU;AAAA,cACV,SAAS,MAAM,YAAY,IAAI;AAAA;AAAA,UACjC,IAEA,4CAAC,SAAI,WAAU,+HACb,uDAAC,UAAK,WAAU,4DAA2D;AAAA;AAAA,YACvE,cAAc;AAAA,aAClB,GACF;AAAA,UAKD,YAAY,CAAC,YACZ,6CAAC,UAAK,WAAU,+JACb;AAAA,kBAAO,YAAY,4CAAC,qCAAa,QAAQ,MAAO,UAAU,MAAM,IAAI;AAAA,gBACpE,kCAAmB,MAAO,SAAU;AAAA,aACvC;AAAA,UAGD,YACC,6CAAC,SAAI,WAAU,4GACb;AAAA,wDAAC,+BAAQ,WAAU,sCAAqC;AAAA,YACxD,4CAAC,UAAK,WAAU,6BAA4B,4BAAS;AAAA,aACvD;AAAA,WAEJ,GACF;AAAA,QAGA,6CAAC,SAAI,WAAU,oDACb;AAAA,uDAAC,YAAAD,SAAA,EAAK,MAAY,WAAU,wBAC1B;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO,EAAE,YAAY,+BAA+B;AAAA,gBAEnD;AAAA;AAAA,YACH;AAAA,YACC,YACC,4CAAC,OAAE,WAAU,2DACV,oBACH;AAAA,aAEJ;AAAA,UAEC,UACC,4CAAC,SAAI,WAAU,mBACb,sDAAC,oCAAY,QAAgB,MAAK,MAAK,SAAS,eAAe,GACjE;AAAA,WAEJ;AAAA;AAAA;AAAA,EACF;AAEJ;AAEO,SAAS,oBAAoB;AAClC,SACE,6CAAC,SAAI,WAAU,kCACb;AAAA,gDAAC,SAAI,WAAU,cACb,sDAAC,SAAI,WAAU,6DAA4D,GAC7E;AAAA,IACA,6CAAC,SAAI,WAAU,yBACb;AAAA,kDAAC,SAAI,WAAU,+CAA8C;AAAA,MAC7D,4CAAC,SAAI,WAAU,iDAAgD;AAAA,OACjE;AAAA,KACF;AAEJ;","names":["Link","Image"]}

package/dist/components/asset-card.d.cts

@@ -35,8 +35,8 @@ interface AssetCardProps {
  *
  * Layout: inset 4:5 artwork (gallery ratio, echoing the Medialane Collection
  * Card) with the price as a glass pill on the artwork (the collection cards'
- * Floor-pill vocabulary) → display-face title → optional subtitle → optional
- * ipType badge.
+ * Floor-pill vocabulary) → one body row: display-face title + optional
+ * subtitle, with the optional ipType badge inline on the right.
  */
 declare function AssetCard({ href, name, image, subtitle, ipType, price, fallbackId, indexing, ipTypeBaseUrl, className, }: AssetCardProps): react_jsx_runtime.JSX.Element;
 declare function AssetCardSkeleton(): react_jsx_runtime.JSX.Element;

package/dist/components/asset-card.d.ts

@@ -35,8 +35,8 @@ interface AssetCardProps {
  *
  * Layout: inset 4:5 artwork (gallery ratio, echoing the Medialane Collection
  * Card) with the price as a glass pill on the artwork (the collection cards'
- * Floor-pill vocabulary) → display-face title → optional subtitle → optional
- * ipType badge.
+ * Floor-pill vocabulary) → one body row: display-face title + optional
+ * subtitle, with the optional ipType badge inline on the right.
  */
 declare function AssetCard({ href, name, image, subtitle, ipType, price, fallbackId, indexing, ipTypeBaseUrl, className, }: AssetCardProps): react_jsx_runtime.JSX.Element;
 declare function AssetCardSkeleton(): react_jsx_runtime.JSX.Element;

package/dist/components/asset-card.js

@@ -57,8 +57,8 @@ function AssetCard({
             /* @__PURE__ */ jsx("span", { className: "text-[10px] text-white/70", children: "Indexing\u2026" })
           ] })
         ] }) }),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5 px-3 py-3", children: [
-          /* @__PURE__ */ jsxs(Link, { href, className: "block min-w-0", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2 px-3 py-3", children: [
+          /* @__PURE__ */ jsxs(Link, { href, className: "block min-w-0 flex-1", children: [
             /* @__PURE__ */ jsx(
               "p",
               {
@@ -69,7 +69,7 @@ function AssetCard({
             ),
             subtitle && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground line-clamp-1 leading-snug", children: subtitle })
           ] }),
-          ipType && /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsx(IpTypeBadge, { ipType, size: "sm", baseUrl: ipTypeBaseUrl }) })
+          ipType && /* @__PURE__ */ jsx("div", { className: "shrink-0 mt-0.5", children: /* @__PURE__ */ jsx(IpTypeBadge, { ipType, size: "sm", baseUrl: ipTypeBaseUrl }) })
         ] })
       ]
     }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/asset-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport Link from \"next/link\";\nimport Image from \"next/image\";\nimport { Loader2 } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\nimport { ipfsToHttp } from \"../utils/ipfs.js\";\nimport { formatDisplayPrice } from \"../utils/format.js\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport { IpTypeBadge } from \"./ip-type-badge.js\";\n\nexport interface AssetCardPrice {\n  formatted?: string | null;\n  currency?: string | null;\n}\n\nexport interface AssetCardProps {\n  /** Asset detail link. */\n  href: string;\n  /** Asset title. */\n  name: string;\n  /** Raw image (ipfs:// or http) — resolved internally. */\n  image?: string | null;\n  /** Secondary line under the title (collection or description). */\n  subtitle?: string | null;\n  /** IP type (apiValue or label) — renders the icon badge on the footer left. */\n  ipType?: string | null;\n  /** Listing price; omit/null shows no price. */\n  price?: AssetCardPrice | null;\n  /** Shown when the image is missing/errors (e.g. token id). */\n  fallbackId?: string | null;\n  /** Show the \"Indexing…\" overlay. */\n  indexing?: boolean;\n  /** Base URL for the ipType badge link. Default \"\" (relative). */\n  ipTypeBaseUrl?: string;\n  className?: string;\n}\n\n/**\n * The platform's shared asset card — lean and presentational.\n *\n * Intentionally has no action buttons, dropdowns or dialogs: the image and\n * text are the only interactive surface (a single asset link), which keeps\n * browse grids and carousels fast even when many cards render. Surfaces that\n * need owner/marketplace actions use the richer `TokenCard` / `ListingCard`.\n *\n * Layout: inset 4:5 artwork (gallery ratio, echoing the Medialane Collection\n * Card) with the price as a glass pill on the artwork (the collection cards'\n * Floor-pill vocabulary) → display-face title → optional subtitle → optional\n * ipType badge.\n */\nexport function AssetCard({\n  href,\n  name,\n  image,\n  subtitle,\n  ipType,\n  price,\n  fallbackId,\n  indexing = false,\n  ipTypeBaseUrl = \"\",\n  className,\n}: AssetCardProps) {\n  const [imgError, setImgError] = useState(false);\n  const resolved = image ? ipfsToHttp(image) : null;\n  const hasPrice = !!price?.formatted;\n\n  return (\n    <div\n      className={cn(\n        \"card-base group relative flex flex-col w-full transition-colors hover:border-foreground/20\",\n        className\n      )}\n    >\n      {/* Artwork — inset with a gallery 4:5 ratio, like the Collection Card */}\n      <Link href={href} className=\"block p-1.5 pb-0\">\n        <div className=\"relative aspect-[4/5] rounded-[12px] bg-muted overflow-hidden ring-1 ring-border/50\">\n          {resolved && !imgError ? (\n            <Image\n              src={resolved}\n              alt={name}\n              fill\n              unoptimized\n              sizes=\"(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 22vw\"\n              className=\"object-cover transition-transform duration-500 group-hover:scale-105\"\n              onError={() => setImgError(true)}\n            />\n          ) : (\n            <div className=\"absolute inset-0 flex items-center justify-center bg-gradient-to-br from-brand-blue/25 via-brand-purple/25 to-brand-rose/25\">\n              <span className=\"text-sm font-semibold text-muted-foreground tabular-nums\">\n                #{fallbackId ?? \"?\"}\n              </span>\n            </div>\n          )}\n\n          {/* Price pill — anchored on the artwork, same glass chip as the\n              collection cards' Floor pill */}\n          {hasPrice && !indexing && (\n            <span className=\"absolute bottom-2 right-2 inline-flex items-center gap-1 text-xs font-bold text-white/95 backdrop-blur-md bg-black/40 rounded-full px-2.5 py-1 tabular-nums\">\n              {price!.currency && <CurrencyIcon symbol={price!.currency} size={12} />}\n              {formatDisplayPrice(price!.formatted!)}\n            </span>\n          )}\n\n          {indexing && (\n            <div className=\"absolute bottom-0 inset-x-0 flex items-center justify-center gap-1.5 bg-black/50 backdrop-blur-sm py-1.5\">\n              <Loader2 className=\"h-3 w-3 animate-spin text-white/70\" />\n              <span className=\"text-[10px] text-white/70\">Indexing…</span>\n            </div>\n          )}\n        </div>\n      </Link>\n\n      {/* Body */}\n      <div className=\"flex flex-col gap-1.5 px-3 py-3\">\n        <Link href={href} className=\"block min-w-0\">\n          <p\n            className=\"text-[15px] font-bold line-clamp-1 leading-snug\"\n            style={{ fontFamily: \"var(--font-display, inherit)\" }}\n          >\n            {name}\n          </p>\n          {subtitle && (\n            <p className=\"text-xs text-muted-foreground line-clamp-1 leading-snug\">\n              {subtitle}\n            </p>\n          )}\n        </Link>\n\n        {ipType && (\n          <div className=\"flex items-center\">\n            <IpTypeBadge ipType={ipType} size=\"sm\" baseUrl={ipTypeBaseUrl} />\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\nexport function AssetCardSkeleton() {\n  return (\n    <div className=\"card-base flex flex-col w-full\">\n      <div className=\"p-1.5 pb-0\">\n        <div className=\"aspect-[4/5] w-full animate-pulse bg-muted rounded-[12px]\" />\n      </div>\n      <div className=\"px-3 py-3 space-y-1.5\">\n        <div className=\"h-4 w-3/4 rounded-md animate-pulse bg-muted\" />\n        <div className=\"h-3.5 w-2/5 rounded-md animate-pulse bg-muted\" />\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AA+EY,cAWE,YAXF;AA7EZ,SAAS,gBAAgB;AACzB,OAAO,UAAU;AACjB,OAAO,WAAW;AAClB,SAAS,eAAe;AACxB,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAC3B,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AA0CrB,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB;AACF,GAAmB;AACjB,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,WAAW,QAAQ,WAAW,KAAK,IAAI;AAC7C,QAAM,WAAW,CAAC,CAAC,OAAO;AAE1B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MAGA;AAAA,4BAAC,QAAK,MAAY,WAAU,oBAC1B,+BAAC,SAAI,WAAU,uFACZ;AAAA,sBAAY,CAAC,WACZ;AAAA,YAAC;AAAA;AAAA,cACC,KAAK;AAAA,cACL,KAAK;AAAA,cACL,MAAI;AAAA,cACJ,aAAW;AAAA,cACX,OAAM;AAAA,cACN,WAAU;AAAA,cACV,SAAS,MAAM,YAAY,IAAI;AAAA;AAAA,UACjC,IAEA,oBAAC,SAAI,WAAU,+HACb,+BAAC,UAAK,WAAU,4DAA2D;AAAA;AAAA,YACvE,cAAc;AAAA,aAClB,GACF;AAAA,UAKD,YAAY,CAAC,YACZ,qBAAC,UAAK,WAAU,+JACb;AAAA,kBAAO,YAAY,oBAAC,gBAAa,QAAQ,MAAO,UAAU,MAAM,IAAI;AAAA,YACpE,mBAAmB,MAAO,SAAU;AAAA,aACvC;AAAA,UAGD,YACC,qBAAC,SAAI,WAAU,4GACb;AAAA,gCAAC,WAAQ,WAAU,sCAAqC;AAAA,YACxD,oBAAC,UAAK,WAAU,6BAA4B,4BAAS;AAAA,aACvD;AAAA,WAEJ,GACF;AAAA,QAGA,qBAAC,SAAI,WAAU,mCACb;AAAA,+BAAC,QAAK,MAAY,WAAU,iBAC1B;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO,EAAE,YAAY,+BAA+B;AAAA,gBAEnD;AAAA;AAAA,YACH;AAAA,YACC,YACC,oBAAC,OAAE,WAAU,2DACV,oBACH;AAAA,aAEJ;AAAA,UAEC,UACC,oBAAC,SAAI,WAAU,qBACb,8BAAC,eAAY,QAAgB,MAAK,MAAK,SAAS,eAAe,GACjE;AAAA,WAEJ;AAAA;AAAA;AAAA,EACF;AAEJ;AAEO,SAAS,oBAAoB;AAClC,SACE,qBAAC,SAAI,WAAU,kCACb;AAAA,wBAAC,SAAI,WAAU,cACb,8BAAC,SAAI,WAAU,6DAA4D,GAC7E;AAAA,IACA,qBAAC,SAAI,WAAU,yBACb;AAAA,0BAAC,SAAI,WAAU,+CAA8C;AAAA,MAC7D,oBAAC,SAAI,WAAU,iDAAgD;AAAA,OACjE;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/asset-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport Link from \"next/link\";\nimport Image from \"next/image\";\nimport { Loader2 } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\nimport { ipfsToHttp } from \"../utils/ipfs.js\";\nimport { formatDisplayPrice } from \"../utils/format.js\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport { IpTypeBadge } from \"./ip-type-badge.js\";\n\nexport interface AssetCardPrice {\n  formatted?: string | null;\n  currency?: string | null;\n}\n\nexport interface AssetCardProps {\n  /** Asset detail link. */\n  href: string;\n  /** Asset title. */\n  name: string;\n  /** Raw image (ipfs:// or http) — resolved internally. */\n  image?: string | null;\n  /** Secondary line under the title (collection or description). */\n  subtitle?: string | null;\n  /** IP type (apiValue or label) — renders the icon badge on the footer left. */\n  ipType?: string | null;\n  /** Listing price; omit/null shows no price. */\n  price?: AssetCardPrice | null;\n  /** Shown when the image is missing/errors (e.g. token id). */\n  fallbackId?: string | null;\n  /** Show the \"Indexing…\" overlay. */\n  indexing?: boolean;\n  /** Base URL for the ipType badge link. Default \"\" (relative). */\n  ipTypeBaseUrl?: string;\n  className?: string;\n}\n\n/**\n * The platform's shared asset card — lean and presentational.\n *\n * Intentionally has no action buttons, dropdowns or dialogs: the image and\n * text are the only interactive surface (a single asset link), which keeps\n * browse grids and carousels fast even when many cards render. Surfaces that\n * need owner/marketplace actions use the richer `TokenCard` / `ListingCard`.\n *\n * Layout: inset 4:5 artwork (gallery ratio, echoing the Medialane Collection\n * Card) with the price as a glass pill on the artwork (the collection cards'\n * Floor-pill vocabulary) → one body row: display-face title + optional\n * subtitle, with the optional ipType badge inline on the right.\n */\nexport function AssetCard({\n  href,\n  name,\n  image,\n  subtitle,\n  ipType,\n  price,\n  fallbackId,\n  indexing = false,\n  ipTypeBaseUrl = \"\",\n  className,\n}: AssetCardProps) {\n  const [imgError, setImgError] = useState(false);\n  const resolved = image ? ipfsToHttp(image) : null;\n  const hasPrice = !!price?.formatted;\n\n  return (\n    <div\n      className={cn(\n        \"card-base group relative flex flex-col w-full transition-colors hover:border-foreground/20\",\n        className\n      )}\n    >\n      {/* Artwork — inset with a gallery 4:5 ratio, like the Collection Card */}\n      <Link href={href} className=\"block p-1.5 pb-0\">\n        <div className=\"relative aspect-[4/5] rounded-[12px] bg-muted overflow-hidden ring-1 ring-border/50\">\n          {resolved && !imgError ? (\n            <Image\n              src={resolved}\n              alt={name}\n              fill\n              unoptimized\n              sizes=\"(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 22vw\"\n              className=\"object-cover transition-transform duration-500 group-hover:scale-105\"\n              onError={() => setImgError(true)}\n            />\n          ) : (\n            <div className=\"absolute inset-0 flex items-center justify-center bg-gradient-to-br from-brand-blue/25 via-brand-purple/25 to-brand-rose/25\">\n              <span className=\"text-sm font-semibold text-muted-foreground tabular-nums\">\n                #{fallbackId ?? \"?\"}\n              </span>\n            </div>\n          )}\n\n          {/* Price pill — anchored on the artwork, same glass chip as the\n              collection cards' Floor pill */}\n          {hasPrice && !indexing && (\n            <span className=\"absolute bottom-2 right-2 inline-flex items-center gap-1 text-xs font-bold text-white/95 backdrop-blur-md bg-black/40 rounded-full px-2.5 py-1 tabular-nums\">\n              {price!.currency && <CurrencyIcon symbol={price!.currency} size={12} />}\n              {formatDisplayPrice(price!.formatted!)}\n            </span>\n          )}\n\n          {indexing && (\n            <div className=\"absolute bottom-0 inset-x-0 flex items-center justify-center gap-1.5 bg-black/50 backdrop-blur-sm py-1.5\">\n              <Loader2 className=\"h-3 w-3 animate-spin text-white/70\" />\n              <span className=\"text-[10px] text-white/70\">Indexing…</span>\n            </div>\n          )}\n        </div>\n      </Link>\n\n      {/* Body — one tight block: title (+ optional ipType badge inline) and subtitle */}\n      <div className=\"flex items-start justify-between gap-2 px-3 py-3\">\n        <Link href={href} className=\"block min-w-0 flex-1\">\n          <p\n            className=\"text-[15px] font-bold line-clamp-1 leading-snug\"\n            style={{ fontFamily: \"var(--font-display, inherit)\" }}\n          >\n            {name}\n          </p>\n          {subtitle && (\n            <p className=\"text-xs text-muted-foreground line-clamp-1 leading-snug\">\n              {subtitle}\n            </p>\n          )}\n        </Link>\n\n        {ipType && (\n          <div className=\"shrink-0 mt-0.5\">\n            <IpTypeBadge ipType={ipType} size=\"sm\" baseUrl={ipTypeBaseUrl} />\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\nexport function AssetCardSkeleton() {\n  return (\n    <div className=\"card-base flex flex-col w-full\">\n      <div className=\"p-1.5 pb-0\">\n        <div className=\"aspect-[4/5] w-full animate-pulse bg-muted rounded-[12px]\" />\n      </div>\n      <div className=\"px-3 py-3 space-y-1.5\">\n        <div className=\"h-4 w-3/4 rounded-md animate-pulse bg-muted\" />\n        <div className=\"h-3.5 w-2/5 rounded-md animate-pulse bg-muted\" />\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AA+EY,cAWE,YAXF;AA7EZ,SAAS,gBAAgB;AACzB,OAAO,UAAU;AACjB,OAAO,WAAW;AAClB,SAAS,eAAe;AACxB,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAC3B,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AA0CrB,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB;AACF,GAAmB;AACjB,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,WAAW,QAAQ,WAAW,KAAK,IAAI;AAC7C,QAAM,WAAW,CAAC,CAAC,OAAO;AAE1B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MAGA;AAAA,4BAAC,QAAK,MAAY,WAAU,oBAC1B,+BAAC,SAAI,WAAU,uFACZ;AAAA,sBAAY,CAAC,WACZ;AAAA,YAAC;AAAA;AAAA,cACC,KAAK;AAAA,cACL,KAAK;AAAA,cACL,MAAI;AAAA,cACJ,aAAW;AAAA,cACX,OAAM;AAAA,cACN,WAAU;AAAA,cACV,SAAS,MAAM,YAAY,IAAI;AAAA;AAAA,UACjC,IAEA,oBAAC,SAAI,WAAU,+HACb,+BAAC,UAAK,WAAU,4DAA2D;AAAA;AAAA,YACvE,cAAc;AAAA,aAClB,GACF;AAAA,UAKD,YAAY,CAAC,YACZ,qBAAC,UAAK,WAAU,+JACb;AAAA,kBAAO,YAAY,oBAAC,gBAAa,QAAQ,MAAO,UAAU,MAAM,IAAI;AAAA,YACpE,mBAAmB,MAAO,SAAU;AAAA,aACvC;AAAA,UAGD,YACC,qBAAC,SAAI,WAAU,4GACb;AAAA,gCAAC,WAAQ,WAAU,sCAAqC;AAAA,YACxD,oBAAC,UAAK,WAAU,6BAA4B,4BAAS;AAAA,aACvD;AAAA,WAEJ,GACF;AAAA,QAGA,qBAAC,SAAI,WAAU,oDACb;AAAA,+BAAC,QAAK,MAAY,WAAU,wBAC1B;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO,EAAE,YAAY,+BAA+B;AAAA,gBAEnD;AAAA;AAAA,YACH;AAAA,YACC,YACC,oBAAC,OAAE,WAAU,2DACV,oBACH;AAAA,aAEJ;AAAA,UAEC,UACC,oBAAC,SAAI,WAAU,mBACb,8BAAC,eAAY,QAAgB,MAAK,MAAK,SAAS,eAAe,GACjE;AAAA,WAEJ;AAAA;AAAA;AAAA,EACF;AAEJ;AAEO,SAAS,oBAAoB;AAClC,SACE,qBAAC,SAAI,WAAU,kCACb;AAAA,wBAAC,SAAI,WAAU,cACb,8BAAC,SAAI,WAAU,6DAA4D,GAC7E;AAAA,IACA,qBAAC,SAAI,WAAU,yBACb;AAAA,0BAAC,SAAI,WAAU,+CAA8C;AAAA,MAC7D,oBAAC,SAAI,WAAU,iDAAgD;AAAA,OACjE;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/listing-card.cjs

@@ -44,11 +44,11 @@ var import_cn = require("../utils/cn.js");
 var import_ipfs = require("../utils/ipfs.js");
 var import_format = require("../utils/format.js");
 var import_time = require("../utils/time.js");
-function ListingCard({ order, inCart = false, onBuy, onCart, overflowMenu, primaryAction, compact = false }) {
+function ListingCard({ order, inCart = false, onBuy, onCart, overflowMenu, primaryAction, compact = false, imageUrl }) {
   const [imgError, setImgError] = (0, import_react.useState)(false);
   const isListing = order.offer.itemType === "ERC721" || order.offer.itemType === "ERC1155";
   const name = order.token?.name ?? `Token #${order.nftTokenId}`;
-  const image = order.token?.image ? (0, import_ipfs.ipfsToHttp)(order.token.image) : null;
+  const image = imageUrl !== void 0 ? imageUrl : order.token?.image ? (0, import_ipfs.ipfsToHttp)(order.token.image) : null;
   const assetHref = `/asset/${order.nftContract}/${order.nftTokenId}`;
   const showActionBar = !!(onBuy || onCart || overflowMenu || primaryAction);
   if (compact) {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/listing-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport Link from \"next/link\";\nimport Image from \"next/image\";\nimport { ShoppingCart, Check, Zap, ArrowUpRight } from \"lucide-react\";\nimport { MotionCard } from \"./motion-primitives.js\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport { cn } from \"../utils/cn.js\";\nimport { ipfsToHttp } from \"../utils/ipfs.js\";\nimport { formatDisplayPrice } from \"../utils/format.js\";\nimport { timeAgo } from \"../utils/time.js\";\nimport type { ApiOrder } from \"@medialane/sdk\";\n\nexport interface ListingCardProps {\n  order: ApiOrder;\n  inCart?: boolean;\n  onBuy?: (order: ApiOrder) => void;\n  onCart?: (order: ApiOrder) => void;\n  /** App passes a fully constructed <DropdownMenu> here */\n  overflowMenu?: React.ReactNode;\n  /**\n   * Optional flex-1 primary control for listings, replacing the default\n   * Buy/View button — lets a host inject its own action (e.g. an owner\n   * \"Cancel\" with an app-specific, auth-coupled handler) while keeping this\n   * card's layout. Ignored for offers (which always render \"View asset\").\n   */\n  primaryAction?: React.ReactNode;\n  compact?: boolean;\n}\n\nexport function ListingCard({ order, inCart = false, onBuy, onCart, overflowMenu, primaryAction, compact = false }: ListingCardProps) {\n  const [imgError, setImgError] = useState(false);\n  const isListing = order.offer.itemType === \"ERC721\" || order.offer.itemType === \"ERC1155\";\n  const name = order.token?.name ?? `Token #${order.nftTokenId}`;\n  const image = order.token?.image ? ipfsToHttp(order.token.image) : null;\n  const assetHref = `/asset/${order.nftContract}/${order.nftTokenId}`;\n\n  // Show the action bar for listings (Buy/View) and for offers (View asset),\n  // whenever the host wired any action or an overflow menu.\n  const showActionBar = !!(onBuy || onCart || overflowMenu || primaryAction);\n\n  // ─── Compact variant ──────────────────────────────────────────────────────\n  if (compact) {\n    return (\n      <MotionCard className=\"card-base\">\n        <Link href={assetHref} className=\"block\">\n          <div className=\"relative aspect-square bg-muted overflow-hidden\">\n            {image && !imgError ? (\n              <Image src={image} alt={name} fill unoptimized sizes=\"(max-width: 640px) 33vw, 20vw\" className=\"object-cover group-hover:scale-105 transition-transform duration-500\" onError={() => setImgError(true)} />\n            ) : (\n              <div className=\"absolute inset-0 flex items-center justify-center bg-gradient-to-br from-brand-purple/15 to-brand-blue/15\">\n                <span className=\"text-xl font-mono text-muted-foreground\">#{order.nftTokenId}</span>\n              </div>\n            )}\n          </div>\n          <div className=\"p-2.5 space-y-0.5\">\n            <p className=\"text-xs font-semibold truncate\">{name}</p>\n            {order.price?.formatted && (\n              <p className=\"text-[11px] font-bold price-value inline-flex items-center gap-1\">\n                {order.price.currency && <CurrencyIcon symbol={order.price.currency} size={11} />}\n                {formatDisplayPrice(order.price.formatted)}\n              </p>\n            )}\n            <p className=\"text-[10px] text-muted-foreground\">{timeAgo(order.createdAt)}</p>\n          </div>\n        </Link>\n      </MotionCard>\n    );\n  }\n\n  // ─── Full variant ─────────────────────────────────────────────────────────\n  return (\n    <MotionCard className=\"card-base\">\n      <Link href={assetHref} className=\"block\">\n        <div className=\"relative aspect-square bg-muted overflow-hidden\">\n          {image && !imgError ? (\n            <Image src={image} alt={name} fill unoptimized sizes=\"(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 25vw\" className=\"object-cover group-hover:scale-105 transition-transform duration-500\" onError={() => setImgError(true)} />\n          ) : (\n            <div className=\"absolute inset-0 flex items-center justify-center bg-gradient-to-br from-brand-purple/15 to-brand-blue/15\">\n              <span className=\"text-2xl font-mono text-muted-foreground\">#{order.nftTokenId}</span>\n            </div>\n          )}\n        </div>\n\n        <div className=\"p-3.5 space-y-3\">\n          <div className=\"min-w-0\">\n            <p className=\"font-semibold text-[15px] truncate leading-snug\">{name}</p>\n            <p className=\"text-[11px] text-muted-foreground truncate leading-snug mt-0.5\">\n              {order.token?.description ? order.token.description : `#${order.nftTokenId}`}\n            </p>\n          </div>\n\n          {/* Price / Offer + age */}\n          {order.price?.formatted && (\n            <div className=\"flex items-end justify-between gap-2\">\n              <div className=\"min-w-0\">\n                <p className=\"text-[10px] uppercase tracking-widest text-muted-foreground/55 leading-none\">\n                  {isListing ? \"Price\" : \"Offer\"}\n                </p>\n                <p className=\"text-lg font-bold price-value leading-none inline-flex items-center gap-1.5 mt-1.5\">\n                  {order.price.currency && <CurrencyIcon symbol={order.price.currency} size={18} />}\n                  {formatDisplayPrice(order.price.formatted)}\n                  <span className=\"sr-only\">{order.price.currency}</span>\n                </p>\n              </div>\n              <p className=\"text-[10px] text-muted-foreground/60 whitespace-nowrap shrink-0\">\n                {timeAgo(order.createdAt)}\n              </p>\n            </div>\n          )}\n\n          {showActionBar && (\n            <div className=\"flex items-center gap-1.5\">\n              {isListing ? (\n                primaryAction ? (\n                  primaryAction\n                ) : onBuy ? (\n                  <div className=\"btn-border-animated p-[1.5px] rounded-[10px] flex-1 h-9\">\n                    <button\n                      className=\"w-full h-full rounded-[9px] bg-background flex items-center justify-center gap-1.5 text-xs font-semibold text-foreground hover:bg-muted/60 transition-all active:scale-[0.98]\"\n                      onClick={(e) => { e.preventDefault(); onBuy(order); }}\n                    >\n                      <Zap className=\"h-3.5 w-3.5 shrink-0\" /> Buy\n                    </button>\n                  </div>\n                ) : (\n                  <Link\n                    href={assetHref}\n                    className=\"flex-1 h-9 inline-flex items-center justify-center gap-1.5 rounded-[9px] border border-border bg-background text-xs font-semibold text-foreground hover:bg-muted/60 transition-all active:scale-[0.98]\"\n                  >\n                    <ArrowUpRight className=\"h-3.5 w-3.5 shrink-0\" /> View\n                  </Link>\n                )\n              ) : (\n                <Link\n                  href={assetHref}\n                  className=\"flex-1 h-9 inline-flex items-center justify-center gap-1.5 rounded-[9px] border border-border bg-background text-xs font-semibold text-foreground hover:bg-muted/60 transition-all active:scale-[0.98]\"\n                >\n                  <ArrowUpRight className=\"h-3.5 w-3.5 shrink-0\" /> View asset\n                </Link>\n              )}\n              {onCart && (\n                <button\n                  className={cn(\n                    \"h-9 w-9 shrink-0 rounded-[9px] border flex items-center justify-center transition-colors\",\n                    inCart\n                      ? \"border-brand-orange/50 bg-brand-orange/10 text-brand-orange\"\n                      : \"border-border bg-background hover:bg-muted text-foreground\"\n                  )}\n                  onClick={(e) => { e.preventDefault(); if (!inCart) onCart(order); }}\n                  disabled={inCart}\n                  aria-label={inCart ? \"Added to cart\" : \"Add to cart\"}\n                >\n                  {inCart ? <Check className=\"h-3.5 w-3.5\" /> : <ShoppingCart className=\"h-3.5 w-3.5\" />}\n                </button>\n              )}\n              {overflowMenu}\n            </div>\n          )}\n        </div>\n      </Link>\n    </MotionCard>\n  );\n}\n\nexport function ListingCardSkeleton() {\n  return (\n    <div className=\"card-base\">\n      <div className=\"aspect-square w-full bg-muted animate-pulse\" />\n      <div className=\"p-3 space-y-2.5\">\n        <div className=\"space-y-1\">\n          <div className=\"h-4 w-3/4 bg-muted animate-pulse rounded\" />\n          <div className=\"h-3 w-1/2 bg-muted animate-pulse rounded\" />\n        </div>\n        <div className=\"h-6 w-1/2 bg-muted animate-pulse rounded\" />\n        <div className=\"h-3 w-2/3 bg-muted animate-pulse rounded\" />\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":["Link","Image"]}
+{"version":3,"sources":["../../src/components/listing-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport Link from \"next/link\";\nimport Image from \"next/image\";\nimport { ShoppingCart, Check, Zap, ArrowUpRight } from \"lucide-react\";\nimport { MotionCard } from \"./motion-primitives.js\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport { cn } from \"../utils/cn.js\";\nimport { ipfsToHttp } from \"../utils/ipfs.js\";\nimport { formatDisplayPrice } from \"../utils/format.js\";\nimport { timeAgo } from \"../utils/time.js\";\nimport type { ApiOrder } from \"@medialane/sdk\";\n\nexport interface ListingCardProps {\n  order: ApiOrder;\n  inCart?: boolean;\n  onBuy?: (order: ApiOrder) => void;\n  onCart?: (order: ApiOrder) => void;\n  /** App passes a fully constructed <DropdownMenu> here */\n  overflowMenu?: React.ReactNode;\n  /**\n   * Optional flex-1 primary control for listings, replacing the default\n   * Buy/View button — lets a host inject its own action (e.g. an owner\n   * \"Cancel\" with an app-specific, auth-coupled handler) while keeping this\n   * card's layout. Ignored for offers (which always render \"View asset\").\n   */\n  primaryAction?: React.ReactNode;\n  compact?: boolean;\n  /**\n   * Pre-resolved, browser-loadable image URL. When provided (including null),\n   * overrides the card's internal ipfsToHttp resolution — apps that proxy or\n   * resize images (e.g. a same-origin /api/ipfs?w= proxy) pass it here.\n   * Omit for the default gateway resolution; null renders the no-image fallback.\n   */\n  imageUrl?: string | null;\n}\n\nexport function ListingCard({ order, inCart = false, onBuy, onCart, overflowMenu, primaryAction, compact = false, imageUrl }: ListingCardProps) {\n  const [imgError, setImgError] = useState(false);\n  const isListing = order.offer.itemType === \"ERC721\" || order.offer.itemType === \"ERC1155\";\n  const name = order.token?.name ?? `Token #${order.nftTokenId}`;\n  const image = imageUrl !== undefined ? imageUrl : (order.token?.image ? ipfsToHttp(order.token.image) : null);\n  const assetHref = `/asset/${order.nftContract}/${order.nftTokenId}`;\n\n  // Show the action bar for listings (Buy/View) and for offers (View asset),\n  // whenever the host wired any action or an overflow menu.\n  const showActionBar = !!(onBuy || onCart || overflowMenu || primaryAction);\n\n  // ─── Compact variant ──────────────────────────────────────────────────────\n  if (compact) {\n    return (\n      <MotionCard className=\"card-base\">\n        <Link href={assetHref} className=\"block\">\n          <div className=\"relative aspect-square bg-muted overflow-hidden\">\n            {image && !imgError ? (\n              <Image src={image} alt={name} fill unoptimized sizes=\"(max-width: 640px) 33vw, 20vw\" className=\"object-cover group-hover:scale-105 transition-transform duration-500\" onError={() => setImgError(true)} />\n            ) : (\n              <div className=\"absolute inset-0 flex items-center justify-center bg-gradient-to-br from-brand-purple/15 to-brand-blue/15\">\n                <span className=\"text-xl font-mono text-muted-foreground\">#{order.nftTokenId}</span>\n              </div>\n            )}\n          </div>\n          <div className=\"p-2.5 space-y-0.5\">\n            <p className=\"text-xs font-semibold truncate\">{name}</p>\n            {order.price?.formatted && (\n              <p className=\"text-[11px] font-bold price-value inline-flex items-center gap-1\">\n                {order.price.currency && <CurrencyIcon symbol={order.price.currency} size={11} />}\n                {formatDisplayPrice(order.price.formatted)}\n              </p>\n            )}\n            <p className=\"text-[10px] text-muted-foreground\">{timeAgo(order.createdAt)}</p>\n          </div>\n        </Link>\n      </MotionCard>\n    );\n  }\n\n  // ─── Full variant ─────────────────────────────────────────────────────────\n  return (\n    <MotionCard className=\"card-base\">\n      <Link href={assetHref} className=\"block\">\n        <div className=\"relative aspect-square bg-muted overflow-hidden\">\n          {image && !imgError ? (\n            <Image src={image} alt={name} fill unoptimized sizes=\"(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 25vw\" className=\"object-cover group-hover:scale-105 transition-transform duration-500\" onError={() => setImgError(true)} />\n          ) : (\n            <div className=\"absolute inset-0 flex items-center justify-center bg-gradient-to-br from-brand-purple/15 to-brand-blue/15\">\n              <span className=\"text-2xl font-mono text-muted-foreground\">#{order.nftTokenId}</span>\n            </div>\n          )}\n        </div>\n\n        <div className=\"p-3.5 space-y-3\">\n          <div className=\"min-w-0\">\n            <p className=\"font-semibold text-[15px] truncate leading-snug\">{name}</p>\n            <p className=\"text-[11px] text-muted-foreground truncate leading-snug mt-0.5\">\n              {order.token?.description ? order.token.description : `#${order.nftTokenId}`}\n            </p>\n          </div>\n\n          {/* Price / Offer + age */}\n          {order.price?.formatted && (\n            <div className=\"flex items-end justify-between gap-2\">\n              <div className=\"min-w-0\">\n                <p className=\"text-[10px] uppercase tracking-widest text-muted-foreground/55 leading-none\">\n                  {isListing ? \"Price\" : \"Offer\"}\n                </p>\n                <p className=\"text-lg font-bold price-value leading-none inline-flex items-center gap-1.5 mt-1.5\">\n                  {order.price.currency && <CurrencyIcon symbol={order.price.currency} size={18} />}\n                  {formatDisplayPrice(order.price.formatted)}\n                  <span className=\"sr-only\">{order.price.currency}</span>\n                </p>\n              </div>\n              <p className=\"text-[10px] text-muted-foreground/60 whitespace-nowrap shrink-0\">\n                {timeAgo(order.createdAt)}\n              </p>\n            </div>\n          )}\n\n          {showActionBar && (\n            <div className=\"flex items-center gap-1.5\">\n              {isListing ? (\n                primaryAction ? (\n                  primaryAction\n                ) : onBuy ? (\n                  <div className=\"btn-border-animated p-[1.5px] rounded-[10px] flex-1 h-9\">\n                    <button\n                      className=\"w-full h-full rounded-[9px] bg-background flex items-center justify-center gap-1.5 text-xs font-semibold text-foreground hover:bg-muted/60 transition-all active:scale-[0.98]\"\n                      onClick={(e) => { e.preventDefault(); onBuy(order); }}\n                    >\n                      <Zap className=\"h-3.5 w-3.5 shrink-0\" /> Buy\n                    </button>\n                  </div>\n                ) : (\n                  <Link\n                    href={assetHref}\n                    className=\"flex-1 h-9 inline-flex items-center justify-center gap-1.5 rounded-[9px] border border-border bg-background text-xs font-semibold text-foreground hover:bg-muted/60 transition-all active:scale-[0.98]\"\n                  >\n                    <ArrowUpRight className=\"h-3.5 w-3.5 shrink-0\" /> View\n                  </Link>\n                )\n              ) : (\n                <Link\n                  href={assetHref}\n                  className=\"flex-1 h-9 inline-flex items-center justify-center gap-1.5 rounded-[9px] border border-border bg-background text-xs font-semibold text-foreground hover:bg-muted/60 transition-all active:scale-[0.98]\"\n                >\n                  <ArrowUpRight className=\"h-3.5 w-3.5 shrink-0\" /> View asset\n                </Link>\n              )}\n              {onCart && (\n                <button\n                  className={cn(\n                    \"h-9 w-9 shrink-0 rounded-[9px] border flex items-center justify-center transition-colors\",\n                    inCart\n                      ? \"border-brand-orange/50 bg-brand-orange/10 text-brand-orange\"\n                      : \"border-border bg-background hover:bg-muted text-foreground\"\n                  )}\n                  onClick={(e) => { e.preventDefault(); if (!inCart) onCart(order); }}\n                  disabled={inCart}\n                  aria-label={inCart ? \"Added to cart\" : \"Add to cart\"}\n                >\n                  {inCart ? <Check className=\"h-3.5 w-3.5\" /> : <ShoppingCart className=\"h-3.5 w-3.5\" />}\n                </button>\n              )}\n              {overflowMenu}\n            </div>\n          )}\n        </div>\n      </Link>\n    </MotionCard>\n  );\n}\n\nexport function ListingCardSkeleton() {\n  return (\n    <div className=\"card-base\">\n      <div className=\"aspect-square w-full bg-muted animate-pulse\" />\n      <div className=\"p-3 space-y-2.5\">\n        <div className=\"space-y-1\">\n          <div className=\"h-4 w-3/4 bg-muted animate-pulse rounded\" />\n          <div className=\"h-3 w-1/2 bg-muted animate-pulse rounded\" />\n        </div>\n        <div className=\"h-6 w-1/2 bg-muted animate-pulse rounded\" />\n        <div className=\"h-3 w-2/3 bg-muted animate-pulse rounded\" />\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":["Link","Image"]}

package/dist/components/listing-card.d.cts

@@ -16,8 +16,15 @@ interface ListingCardProps {
      */
     primaryAction?: React.ReactNode;
     compact?: boolean;
+    /**
+     * Pre-resolved, browser-loadable image URL. When provided (including null),
+     * overrides the card's internal ipfsToHttp resolution — apps that proxy or
+     * resize images (e.g. a same-origin /api/ipfs?w= proxy) pass it here.
+     * Omit for the default gateway resolution; null renders the no-image fallback.
+     */
+    imageUrl?: string | null;
 }
-declare function ListingCard({ order, inCart, onBuy, onCart, overflowMenu, primaryAction, compact }: ListingCardProps): react_jsx_runtime.JSX.Element;
+declare function ListingCard({ order, inCart, onBuy, onCart, overflowMenu, primaryAction, compact, imageUrl }: ListingCardProps): react_jsx_runtime.JSX.Element;
 declare function ListingCardSkeleton(): react_jsx_runtime.JSX.Element;
 
 export { ListingCard, type ListingCardProps, ListingCardSkeleton };

package/dist/components/listing-card.d.ts

@@ -16,8 +16,15 @@ interface ListingCardProps {
      */
     primaryAction?: React.ReactNode;
     compact?: boolean;
+    /**
+     * Pre-resolved, browser-loadable image URL. When provided (including null),
+     * overrides the card's internal ipfsToHttp resolution — apps that proxy or
+     * resize images (e.g. a same-origin /api/ipfs?w= proxy) pass it here.
+     * Omit for the default gateway resolution; null renders the no-image fallback.
+     */
+    imageUrl?: string | null;
 }
-declare function ListingCard({ order, inCart, onBuy, onCart, overflowMenu, primaryAction, compact }: ListingCardProps): react_jsx_runtime.JSX.Element;
+declare function ListingCard({ order, inCart, onBuy, onCart, overflowMenu, primaryAction, compact, imageUrl }: ListingCardProps): react_jsx_runtime.JSX.Element;
 declare function ListingCardSkeleton(): react_jsx_runtime.JSX.Element;
 
 export { ListingCard, type ListingCardProps, ListingCardSkeleton };

package/dist/components/listing-card.js

@@ -10,11 +10,11 @@ import { cn } from "../utils/cn.js";
 import { ipfsToHttp } from "../utils/ipfs.js";
 import { formatDisplayPrice } from "../utils/format.js";
 import { timeAgo } from "../utils/time.js";
-function ListingCard({ order, inCart = false, onBuy, onCart, overflowMenu, primaryAction, compact = false }) {
+function ListingCard({ order, inCart = false, onBuy, onCart, overflowMenu, primaryAction, compact = false, imageUrl }) {
   const [imgError, setImgError] = useState(false);
   const isListing = order.offer.itemType === "ERC721" || order.offer.itemType === "ERC1155";
   const name = order.token?.name ?? `Token #${order.nftTokenId}`;
-  const image = order.token?.image ? ipfsToHttp(order.token.image) : null;
+  const image = imageUrl !== void 0 ? imageUrl : order.token?.image ? ipfsToHttp(order.token.image) : null;
   const assetHref = `/asset/${order.nftContract}/${order.nftTokenId}`;
   const showActionBar = !!(onBuy || onCart || overflowMenu || primaryAction);
   if (compact) {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/listing-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport Link from \"next/link\";\nimport Image from \"next/image\";\nimport { ShoppingCart, Check, Zap, ArrowUpRight } from \"lucide-react\";\nimport { MotionCard } from \"./motion-primitives.js\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport { cn } from \"../utils/cn.js\";\nimport { ipfsToHttp } from \"../utils/ipfs.js\";\nimport { formatDisplayPrice } from \"../utils/format.js\";\nimport { timeAgo } from \"../utils/time.js\";\nimport type { ApiOrder } from \"@medialane/sdk\";\n\nexport interface ListingCardProps {\n  order: ApiOrder;\n  inCart?: boolean;\n  onBuy?: (order: ApiOrder) => void;\n  onCart?: (order: ApiOrder) => void;\n  /** App passes a fully constructed <DropdownMenu> here */\n  overflowMenu?: React.ReactNode;\n  /**\n   * Optional flex-1 primary control for listings, replacing the default\n   * Buy/View button — lets a host inject its own action (e.g. an owner\n   * \"Cancel\" with an app-specific, auth-coupled handler) while keeping this\n   * card's layout. Ignored for offers (which always render \"View asset\").\n   */\n  primaryAction?: React.ReactNode;\n  compact?: boolean;\n}\n\nexport function ListingCard({ order, inCart = false, onBuy, onCart, overflowMenu, primaryAction, compact = false }: ListingCardProps) {\n  const [imgError, setImgError] = useState(false);\n  const isListing = order.offer.itemType === \"ERC721\" || order.offer.itemType === \"ERC1155\";\n  const name = order.token?.name ?? `Token #${order.nftTokenId}`;\n  const image = order.token?.image ? ipfsToHttp(order.token.image) : null;\n  const assetHref = `/asset/${order.nftContract}/${order.nftTokenId}`;\n\n  // Show the action bar for listings (Buy/View) and for offers (View asset),\n  // whenever the host wired any action or an overflow menu.\n  const showActionBar = !!(onBuy || onCart || overflowMenu || primaryAction);\n\n  // ─── Compact variant ──────────────────────────────────────────────────────\n  if (compact) {\n    return (\n      <MotionCard className=\"card-base\">\n        <Link href={assetHref} className=\"block\">\n          <div className=\"relative aspect-square bg-muted overflow-hidden\">\n            {image && !imgError ? (\n              <Image src={image} alt={name} fill unoptimized sizes=\"(max-width: 640px) 33vw, 20vw\" className=\"object-cover group-hover:scale-105 transition-transform duration-500\" onError={() => setImgError(true)} />\n            ) : (\n              <div className=\"absolute inset-0 flex items-center justify-center bg-gradient-to-br from-brand-purple/15 to-brand-blue/15\">\n                <span className=\"text-xl font-mono text-muted-foreground\">#{order.nftTokenId}</span>\n              </div>\n            )}\n          </div>\n          <div className=\"p-2.5 space-y-0.5\">\n            <p className=\"text-xs font-semibold truncate\">{name}</p>\n            {order.price?.formatted && (\n              <p className=\"text-[11px] font-bold price-value inline-flex items-center gap-1\">\n                {order.price.currency && <CurrencyIcon symbol={order.price.currency} size={11} />}\n                {formatDisplayPrice(order.price.formatted)}\n              </p>\n            )}\n            <p className=\"text-[10px] text-muted-foreground\">{timeAgo(order.createdAt)}</p>\n          </div>\n        </Link>\n      </MotionCard>\n    );\n  }\n\n  // ─── Full variant ─────────────────────────────────────────────────────────\n  return (\n    <MotionCard className=\"card-base\">\n      <Link href={assetHref} className=\"block\">\n        <div className=\"relative aspect-square bg-muted overflow-hidden\">\n          {image && !imgError ? (\n            <Image src={image} alt={name} fill unoptimized sizes=\"(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 25vw\" className=\"object-cover group-hover:scale-105 transition-transform duration-500\" onError={() => setImgError(true)} />\n          ) : (\n            <div className=\"absolute inset-0 flex items-center justify-center bg-gradient-to-br from-brand-purple/15 to-brand-blue/15\">\n              <span className=\"text-2xl font-mono text-muted-foreground\">#{order.nftTokenId}</span>\n            </div>\n          )}\n        </div>\n\n        <div className=\"p-3.5 space-y-3\">\n          <div className=\"min-w-0\">\n            <p className=\"font-semibold text-[15px] truncate leading-snug\">{name}</p>\n            <p className=\"text-[11px] text-muted-foreground truncate leading-snug mt-0.5\">\n              {order.token?.description ? order.token.description : `#${order.nftTokenId}`}\n            </p>\n          </div>\n\n          {/* Price / Offer + age */}\n          {order.price?.formatted && (\n            <div className=\"flex items-end justify-between gap-2\">\n              <div className=\"min-w-0\">\n                <p className=\"text-[10px] uppercase tracking-widest text-muted-foreground/55 leading-none\">\n                  {isListing ? \"Price\" : \"Offer\"}\n                </p>\n                <p className=\"text-lg font-bold price-value leading-none inline-flex items-center gap-1.5 mt-1.5\">\n                  {order.price.currency && <CurrencyIcon symbol={order.price.currency} size={18} />}\n                  {formatDisplayPrice(order.price.formatted)}\n                  <span className=\"sr-only\">{order.price.currency}</span>\n                </p>\n              </div>\n              <p className=\"text-[10px] text-muted-foreground/60 whitespace-nowrap shrink-0\">\n                {timeAgo(order.createdAt)}\n              </p>\n            </div>\n          )}\n\n          {showActionBar && (\n            <div className=\"flex items-center gap-1.5\">\n              {isListing ? (\n                primaryAction ? (\n                  primaryAction\n                ) : onBuy ? (\n                  <div className=\"btn-border-animated p-[1.5px] rounded-[10px] flex-1 h-9\">\n                    <button\n                      className=\"w-full h-full rounded-[9px] bg-background flex items-center justify-center gap-1.5 text-xs font-semibold text-foreground hover:bg-muted/60 transition-all active:scale-[0.98]\"\n                      onClick={(e) => { e.preventDefault(); onBuy(order); }}\n                    >\n                      <Zap className=\"h-3.5 w-3.5 shrink-0\" /> Buy\n                    </button>\n                  </div>\n                ) : (\n                  <Link\n                    href={assetHref}\n                    className=\"flex-1 h-9 inline-flex items-center justify-center gap-1.5 rounded-[9px] border border-border bg-background text-xs font-semibold text-foreground hover:bg-muted/60 transition-all active:scale-[0.98]\"\n                  >\n                    <ArrowUpRight className=\"h-3.5 w-3.5 shrink-0\" /> View\n                  </Link>\n                )\n              ) : (\n                <Link\n                  href={assetHref}\n                  className=\"flex-1 h-9 inline-flex items-center justify-center gap-1.5 rounded-[9px] border border-border bg-background text-xs font-semibold text-foreground hover:bg-muted/60 transition-all active:scale-[0.98]\"\n                >\n                  <ArrowUpRight className=\"h-3.5 w-3.5 shrink-0\" /> View asset\n                </Link>\n              )}\n              {onCart && (\n                <button\n                  className={cn(\n                    \"h-9 w-9 shrink-0 rounded-[9px] border flex items-center justify-center transition-colors\",\n                    inCart\n                      ? \"border-brand-orange/50 bg-brand-orange/10 text-brand-orange\"\n                      : \"border-border bg-background hover:bg-muted text-foreground\"\n                  )}\n                  onClick={(e) => { e.preventDefault(); if (!inCart) onCart(order); }}\n                  disabled={inCart}\n                  aria-label={inCart ? \"Added to cart\" : \"Add to cart\"}\n                >\n                  {inCart ? <Check className=\"h-3.5 w-3.5\" /> : <ShoppingCart className=\"h-3.5 w-3.5\" />}\n                </button>\n              )}\n              {overflowMenu}\n            </div>\n          )}\n        </div>\n      </Link>\n    </MotionCard>\n  );\n}\n\nexport function ListingCardSkeleton() {\n  return (\n    <div className=\"card-base\">\n      <div className=\"aspect-square w-full bg-muted animate-pulse\" />\n      <div className=\"p-3 space-y-2.5\">\n        <div className=\"space-y-1\">\n          <div className=\"h-4 w-3/4 bg-muted animate-pulse rounded\" />\n          <div className=\"h-3 w-1/2 bg-muted animate-pulse rounded\" />\n        </div>\n        <div className=\"h-6 w-1/2 bg-muted animate-pulse rounded\" />\n        <div className=\"h-3 w-2/3 bg-muted animate-pulse rounded\" />\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/listing-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport Link from \"next/link\";\nimport Image from \"next/image\";\nimport { ShoppingCart, Check, Zap, ArrowUpRight } from \"lucide-react\";\nimport { MotionCard } from \"./motion-primitives.js\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport { cn } from \"../utils/cn.js\";\nimport { ipfsToHttp } from \"../utils/ipfs.js\";\nimport { formatDisplayPrice } from \"../utils/format.js\";\nimport { timeAgo } from \"../utils/time.js\";\nimport type { ApiOrder } from \"@medialane/sdk\";\n\nexport interface ListingCardProps {\n  order: ApiOrder;\n  inCart?: boolean;\n  onBuy?: (order: ApiOrder) => void;\n  onCart?: (order: ApiOrder) => void;\n  /** App passes a fully constructed <DropdownMenu> here */\n  overflowMenu?: React.ReactNode;\n  /**\n   * Optional flex-1 primary control for listings, replacing the default\n   * Buy/View button — lets a host inject its own action (e.g. an owner\n   * \"Cancel\" with an app-specific, auth-coupled handler) while keeping this\n   * card's layout. Ignored for offers (which always render \"View asset\").\n   */\n  primaryAction?: React.ReactNode;\n  compact?: boolean;\n  /**\n   * Pre-resolved, browser-loadable image URL. When provided (including null),\n   * overrides the card's internal ipfsToHttp resolution — apps that proxy or\n   * resize images (e.g. a same-origin /api/ipfs?w= proxy) pass it here.\n   * Omit for the default gateway resolution; null renders the no-image fallback.\n   */\n  imageUrl?: string | null;\n}\n\nexport function ListingCard({ order, inCart = false, onBuy, onCart, overflowMenu, primaryAction, compact = false, imageUrl }: ListingCardProps) {\n  const [imgError, setImgError] = useState(false);\n  const isListing = order.offer.itemType === \"ERC721\" || order.offer.itemType === \"ERC1155\";\n  const name = order.token?.name ?? `Token #${order.nftTokenId}`;\n  const image = imageUrl !== undefined ? imageUrl : (order.token?.image ? ipfsToHttp(order.token.image) : null);\n  const assetHref = `/asset/${order.nftContract}/${order.nftTokenId}`;\n\n  // Show the action bar for listings (Buy/View) and for offers (View asset),\n  // whenever the host wired any action or an overflow menu.\n  const showActionBar = !!(onBuy || onCart || overflowMenu || primaryAction);\n\n  // ─── Compact variant ──────────────────────────────────────────────────────\n  if (compact) {\n    return (\n      <MotionCard className=\"card-base\">\n        <Link href={assetHref} className=\"block\">\n          <div className=\"relative aspect-square bg-muted overflow-hidden\">\n            {image && !imgError ? (\n              <Image src={image} alt={name} fill unoptimized sizes=\"(max-width: 640px) 33vw, 20vw\" className=\"object-cover group-hover:scale-105 transition-transform duration-500\" onError={() => setImgError(true)} />\n            ) : (\n              <div className=\"absolute inset-0 flex items-center justify-center bg-gradient-to-br from-brand-purple/15 to-brand-blue/15\">\n                <span className=\"text-xl font-mono text-muted-foreground\">#{order.nftTokenId}</span>\n              </div>\n            )}\n          </div>\n          <div className=\"p-2.5 space-y-0.5\">\n            <p className=\"text-xs font-semibold truncate\">{name}</p>\n            {order.price?.formatted && (\n              <p className=\"text-[11px] font-bold price-value inline-flex items-center gap-1\">\n                {order.price.currency && <CurrencyIcon symbol={order.price.currency} size={11} />}\n                {formatDisplayPrice(order.price.formatted)}\n              </p>\n            )}\n            <p className=\"text-[10px] text-muted-foreground\">{timeAgo(order.createdAt)}</p>\n          </div>\n        </Link>\n      </MotionCard>\n    );\n  }\n\n  // ─── Full variant ─────────────────────────────────────────────────────────\n  return (\n    <MotionCard className=\"card-base\">\n      <Link href={assetHref} className=\"block\">\n        <div className=\"relative aspect-square bg-muted overflow-hidden\">\n          {image && !imgError ? (\n            <Image src={image} alt={name} fill unoptimized sizes=\"(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 25vw\" className=\"object-cover group-hover:scale-105 transition-transform duration-500\" onError={() => setImgError(true)} />\n          ) : (\n            <div className=\"absolute inset-0 flex items-center justify-center bg-gradient-to-br from-brand-purple/15 to-brand-blue/15\">\n              <span className=\"text-2xl font-mono text-muted-foreground\">#{order.nftTokenId}</span>\n            </div>\n          )}\n        </div>\n\n        <div className=\"p-3.5 space-y-3\">\n          <div className=\"min-w-0\">\n            <p className=\"font-semibold text-[15px] truncate leading-snug\">{name}</p>\n            <p className=\"text-[11px] text-muted-foreground truncate leading-snug mt-0.5\">\n              {order.token?.description ? order.token.description : `#${order.nftTokenId}`}\n            </p>\n          </div>\n\n          {/* Price / Offer + age */}\n          {order.price?.formatted && (\n            <div className=\"flex items-end justify-between gap-2\">\n              <div className=\"min-w-0\">\n                <p className=\"text-[10px] uppercase tracking-widest text-muted-foreground/55 leading-none\">\n                  {isListing ? \"Price\" : \"Offer\"}\n                </p>\n                <p className=\"text-lg font-bold price-value leading-none inline-flex items-center gap-1.5 mt-1.5\">\n                  {order.price.currency && <CurrencyIcon symbol={order.price.currency} size={18} />}\n                  {formatDisplayPrice(order.price.formatted)}\n                  <span className=\"sr-only\">{order.price.currency}</span>\n                </p>\n              </div>\n              <p className=\"text-[10px] text-muted-foreground/60 whitespace-nowrap shrink-0\">\n                {timeAgo(order.createdAt)}\n              </p>\n            </div>\n          )}\n\n          {showActionBar && (\n            <div className=\"flex items-center gap-1.5\">\n              {isListing ? (\n                primaryAction ? (\n                  primaryAction\n                ) : onBuy ? (\n                  <div className=\"btn-border-animated p-[1.5px] rounded-[10px] flex-1 h-9\">\n                    <button\n                      className=\"w-full h-full rounded-[9px] bg-background flex items-center justify-center gap-1.5 text-xs font-semibold text-foreground hover:bg-muted/60 transition-all active:scale-[0.98]\"\n                      onClick={(e) => { e.preventDefault(); onBuy(order); }}\n                    >\n                      <Zap className=\"h-3.5 w-3.5 shrink-0\" /> Buy\n                    </button>\n                  </div>\n                ) : (\n                  <Link\n                    href={assetHref}\n                    className=\"flex-1 h-9 inline-flex items-center justify-center gap-1.5 rounded-[9px] border border-border bg-background text-xs font-semibold text-foreground hover:bg-muted/60 transition-all active:scale-[0.98]\"\n                  >\n                    <ArrowUpRight className=\"h-3.5 w-3.5 shrink-0\" /> View\n                  </Link>\n                )\n              ) : (\n                <Link\n                  href={assetHref}\n                  className=\"flex-1 h-9 inline-flex items-center justify-center gap-1.5 rounded-[9px] border border-border bg-background text-xs font-semibold text-foreground hover:bg-muted/60 transition-all active:scale-[0.98]\"\n                >\n                  <ArrowUpRight className=\"h-3.5 w-3.5 shrink-0\" /> View asset\n                </Link>\n              )}\n              {onCart && (\n                <button\n                  className={cn(\n                    \"h-9 w-9 shrink-0 rounded-[9px] border flex items-center justify-center transition-colors\",\n                    inCart\n                      ? \"border-brand-orange/50 bg-brand-orange/10 text-brand-orange\"\n                      : \"border-border bg-background hover:bg-muted text-foreground\"\n                  )}\n                  onClick={(e) => { e.preventDefault(); if (!inCart) onCart(order); }}\n                  disabled={inCart}\n                  aria-label={inCart ? \"Added to cart\" : \"Add to cart\"}\n                >\n                  {inCart ? <Check className=\"h-3.5 w-3.5\" /> : <ShoppingCart className=\"h-3.5 w-3.5\" />}\n                </button>\n              )}\n              {overflowMenu}\n            </div>\n          )}\n        </div>\n      </Link>\n    </MotionCard>\n  );\n}\n\nexport function ListingCardSkeleton() {\n  return (\n    <div className=\"card-base\">\n      <div className=\"aspect-square w-full bg-muted animate-pulse\" />\n      <div className=\"p-3 space-y-2.5\">\n        <div className=\"space-y-1\">\n          <div className=\"h-4 w-3/4 bg-muted animate-pulse rounded\" />\n          <div className=\"h-3 w-1/2 bg-muted animate-pulse rounded\" />\n        </div>\n        <div className=\"h-6 w-1/2 bg-muted animate-pulse rounded\" />\n        <div className=\"h-3 w-2/3 bg-muted animate-pulse rounded\" />\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/package.json

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