@medialane/ui 0.60.0 → 0.61.0

package/dist/components/asset-card.cjs

@@ -93,14 +93,7 @@ function AssetCard({
         ] }) }),
         /* @__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",
-              {
-                className: "text-[15px] font-bold line-clamp-1 leading-snug",
-                style: { fontFamily: "var(--font-display, inherit)" },
-                children: name
-              }
-            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-[15px] font-bold line-clamp-1 leading-snug", children: name }),
             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: "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) → 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"]}
+{"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 className=\"text-[15px] font-bold line-clamp-1 leading-snug\">\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,wDAAC,OAAE,WAAU,mDACV,gBACH;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.js

@@ -59,14 +59,7 @@ function AssetCard({
         ] }) }),
         /* @__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",
-              {
-                className: "text-[15px] font-bold line-clamp-1 leading-snug",
-                style: { fontFamily: "var(--font-display, inherit)" },
-                children: name
-              }
-            ),
+            /* @__PURE__ */ jsx("p", { className: "text-[15px] font-bold line-clamp-1 leading-snug", children: name }),
             subtitle && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground line-clamp-1 leading-snug", children: subtitle })
           ] }),
           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) → 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":[]}
+{"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 className=\"text-[15px] font-bold line-clamp-1 leading-snug\">\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,gCAAC,OAAE,WAAU,mDACV,gBACH;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/coin-launch-preview.cjs

@@ -48,14 +48,7 @@ function CoinLaunchPreview({ data, className }) {
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-3", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "shrink-0 rounded-full p-[2px]", style: { background: COIN_GRADIENT }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "relative h-14 w-14 rounded-full overflow-hidden bg-card flex items-center justify-center", children: imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_image.default, { src: imageUrl, alt: "", fill: true, sizes: "56px", className: "object-cover", unoptimized: true }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.TrendingUp, { className: "h-6 w-6 text-brand-rose/70" }) }) }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "p",
-            {
-              className: (0, import_cn.cn)("font-bold text-lg leading-snug truncate", !name && "text-muted-foreground/50"),
-              style: { fontFamily: "var(--font-display, inherit)" },
-              children: name || "Your coin"
-            }
-          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: (0, import_cn.cn)("font-bold text-lg leading-snug truncate", !name && "text-muted-foreground/50"), children: name || "Your coin" }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm text-muted-foreground tabular-nums", children: symbol ? `$${symbol}` : "$SYMBOL" })
         ] })
       ] }),

package/dist/components/coin-launch-preview.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/coin-launch-preview.tsx"],"sourcesContent":["\"use client\";\n\nimport Image from \"next/image\";\nimport { TrendingUp } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\n\nexport interface CoinPreviewData {\n  name: string;\n  symbol: string;\n  description: string;\n  /** Local object URL or resolved IPFS URL for the feature image */\n  imageUrl: string | null;\n  /** Human supply (already validated) or null while typing */\n  supplyHuman: number | null;\n  quoteSymbol: string;\n  teamPct: number;\n}\n\nconst LAUNCH_PRICE = 0.01; // fixed, quote per coin\n\n/** Warm coin gradient — rose → orange, the brand's coin palette. */\nconst COIN_GRADIENT = \"linear-gradient(135deg, #f6608f, #fb8b46)\";\n\n/** Live preview for the Creator Coin launch studio — builds the coin in front\n *  of the creator as they type. Mirrors the coin's eventual discovery card so\n *  what they design is what their fans will see. Quiet borderless panel in the\n *  launchpad-rail language; the warm coin gradient appears only as the avatar\n *  ring and the allocation bar. */\nexport function CoinLaunchPreview({ data, className }: { data: CoinPreviewData; className?: string }) {\n  const { name, symbol, description, imageUrl, supplyHuman, quoteSymbol, teamPct } = data;\n  const marketCap = supplyHuman != null ? supplyHuman * LAUNCH_PRICE : null;\n  const yourCoins = supplyHuman != null ? supplyHuman * (teamPct / 100) : null;\n\n  return (\n    <div className={cn(\"rounded-2xl bg-muted/50 dark:bg-card overflow-hidden\", className)}>\n      <div className=\"px-5 pt-4\">\n        <p className=\"section-label\">Live preview</p>\n      </div>\n\n      <div className=\"p-5 space-y-4\">\n        {/* Identity — avatar in the warm coin ring */}\n        <div className=\"flex items-center gap-3\">\n          <div className=\"shrink-0 rounded-full p-[2px]\" style={{ background: COIN_GRADIENT }}>\n            <div className=\"relative h-14 w-14 rounded-full overflow-hidden bg-card flex items-center justify-center\">\n              {imageUrl ? (\n                <Image src={imageUrl} alt=\"\" fill sizes=\"56px\" className=\"object-cover\" unoptimized />\n              ) : (\n                <TrendingUp className=\"h-6 w-6 text-brand-rose/70\" />\n              )}\n            </div>\n          </div>\n          <div className=\"min-w-0 flex-1\">\n            <p\n              className={cn(\"font-bold text-lg leading-snug truncate\", !name && \"text-muted-foreground/50\")}\n              style={{ fontFamily: \"var(--font-display, inherit)\" }}\n            >\n              {name || \"Your coin\"}\n            </p>\n            <p className=\"text-sm text-muted-foreground tabular-nums\">{symbol ? `$${symbol}` : \"$SYMBOL\"}</p>\n          </div>\n        </div>\n\n        {description ? (\n          <p className=\"text-sm text-muted-foreground leading-relaxed line-clamp-3\">{description}</p>\n        ) : null}\n\n        {/* Economics */}\n        <div className=\"grid grid-cols-3 gap-2 rounded-xl bg-muted/50 dark:bg-muted/30 p-3 text-sm\">\n          <div>\n            <p className=\"text-[10px] uppercase tracking-wide text-muted-foreground\">Launch price</p>\n            <p className=\"font-semibold tabular-nums\">{LAUNCH_PRICE} {quoteSymbol}</p>\n          </div>\n          <div>\n            <p className=\"text-[10px] uppercase tracking-wide text-muted-foreground\">Market cap</p>\n            <p className=\"font-semibold tabular-nums text-brand-price\">\n              {marketCap != null ? `${marketCap.toLocaleString()} ${quoteSymbol}` : \"—\"}\n            </p>\n          </div>\n          <div>\n            <p className=\"text-[10px] uppercase tracking-wide text-muted-foreground\">Your share</p>\n            <p className=\"font-semibold tabular-nums\">\n              {yourCoins != null ? `${teamPct}% · ${yourCoins.toLocaleString()}` : `${teamPct}%`}\n            </p>\n          </div>\n        </div>\n\n        {/* Allocation split bar */}\n        <div className=\"space-y-1.5\">\n          <div className=\"flex h-2.5 rounded-full overflow-hidden bg-muted-foreground/15\">\n            {teamPct > 0 && <div style={{ width: `${teamPct}%`, background: COIN_GRADIENT }} />}\n            <div className=\"flex-1\" />\n          </div>\n          <div className=\"flex justify-between text-[11px] text-muted-foreground\">\n            <span className=\"font-medium text-brand-rose\">You {teamPct}%</span>\n            <span>Community {100 - teamPct}%</span>\n          </div>\n        </div>\n\n        <p className=\"text-[11px] text-muted-foreground/70\">\n          Liquidity is locked forever — nobody can pull it, including us.\n        </p>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAoCQ;AAlCR,mBAAkB;AAClB,0BAA2B;AAC3B,gBAAmB;AAcnB,MAAM,eAAe;AAGrB,MAAM,gBAAgB;AAOf,SAAS,kBAAkB,EAAE,MAAM,UAAU,GAAkD;AACpG,QAAM,EAAE,MAAM,QAAQ,aAAa,UAAU,aAAa,aAAa,QAAQ,IAAI;AACnF,QAAM,YAAY,eAAe,OAAO,cAAc,eAAe;AACrE,QAAM,YAAY,eAAe,OAAO,eAAe,UAAU,OAAO;AAExE,SACE,6CAAC,SAAI,eAAW,cAAG,wDAAwD,SAAS,GAClF;AAAA,gDAAC,SAAI,WAAU,aACb,sDAAC,OAAE,WAAU,iBAAgB,0BAAY,GAC3C;AAAA,IAEA,6CAAC,SAAI,WAAU,iBAEb;AAAA,mDAAC,SAAI,WAAU,2BACb;AAAA,oDAAC,SAAI,WAAU,iCAAgC,OAAO,EAAE,YAAY,cAAc,GAChF,sDAAC,SAAI,WAAU,4FACZ,qBACC,4CAAC,aAAAA,SAAA,EAAM,KAAK,UAAU,KAAI,IAAG,MAAI,MAAC,OAAM,QAAO,WAAU,gBAAe,aAAW,MAAC,IAEpF,4CAAC,kCAAW,WAAU,8BAA6B,GAEvD,GACF;AAAA,QACA,6CAAC,SAAI,WAAU,kBACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,eAAW,cAAG,2CAA2C,CAAC,QAAQ,0BAA0B;AAAA,cAC5F,OAAO,EAAE,YAAY,+BAA+B;AAAA,cAEnD,kBAAQ;AAAA;AAAA,UACX;AAAA,UACA,4CAAC,OAAE,WAAU,8CAA8C,mBAAS,IAAI,MAAM,KAAK,WAAU;AAAA,WAC/F;AAAA,SACF;AAAA,MAEC,cACC,4CAAC,OAAE,WAAU,8DAA8D,uBAAY,IACrF;AAAA,MAGJ,6CAAC,SAAI,WAAU,8EACb;AAAA,qDAAC,SACC;AAAA,sDAAC,OAAE,WAAU,6DAA4D,0BAAY;AAAA,UACrF,6CAAC,OAAE,WAAU,8BAA8B;AAAA;AAAA,YAAa;AAAA,YAAE;AAAA,aAAY;AAAA,WACxE;AAAA,QACA,6CAAC,SACC;AAAA,sDAAC,OAAE,WAAU,6DAA4D,wBAAU;AAAA,UACnF,4CAAC,OAAE,WAAU,+CACV,uBAAa,OAAO,GAAG,UAAU,eAAe,CAAC,IAAI,WAAW,KAAK,UACxE;AAAA,WACF;AAAA,QACA,6CAAC,SACC;AAAA,sDAAC,OAAE,WAAU,6DAA4D,wBAAU;AAAA,UACnF,4CAAC,OAAE,WAAU,8BACV,uBAAa,OAAO,GAAG,OAAO,UAAO,UAAU,eAAe,CAAC,KAAK,GAAG,OAAO,KACjF;AAAA,WACF;AAAA,SACF;AAAA,MAGA,6CAAC,SAAI,WAAU,eACb;AAAA,qDAAC,SAAI,WAAU,kEACZ;AAAA,oBAAU,KAAK,4CAAC,SAAI,OAAO,EAAE,OAAO,GAAG,OAAO,KAAK,YAAY,cAAc,GAAG;AAAA,UACjF,4CAAC,SAAI,WAAU,UAAS;AAAA,WAC1B;AAAA,QACA,6CAAC,SAAI,WAAU,0DACb;AAAA,uDAAC,UAAK,WAAU,+BAA8B;AAAA;AAAA,YAAK;AAAA,YAAQ;AAAA,aAAC;AAAA,UAC5D,6CAAC,UAAK;AAAA;AAAA,YAAW,MAAM;AAAA,YAAQ;AAAA,aAAC;AAAA,WAClC;AAAA,SACF;AAAA,MAEA,4CAAC,OAAE,WAAU,wCAAuC,kFAEpD;AAAA,OACF;AAAA,KACF;AAEJ;","names":["Image"]}
+{"version":3,"sources":["../../src/components/coin-launch-preview.tsx"],"sourcesContent":["\"use client\";\n\nimport Image from \"next/image\";\nimport { TrendingUp } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\n\nexport interface CoinPreviewData {\n  name: string;\n  symbol: string;\n  description: string;\n  /** Local object URL or resolved IPFS URL for the feature image */\n  imageUrl: string | null;\n  /** Human supply (already validated) or null while typing */\n  supplyHuman: number | null;\n  quoteSymbol: string;\n  teamPct: number;\n}\n\nconst LAUNCH_PRICE = 0.01; // fixed, quote per coin\n\n/** Warm coin gradient — rose → orange, the brand's coin palette. */\nconst COIN_GRADIENT = \"linear-gradient(135deg, #f6608f, #fb8b46)\";\n\n/** Live preview for the Creator Coin launch studio — builds the coin in front\n *  of the creator as they type. Mirrors the coin's eventual discovery card so\n *  what they design is what their fans will see. Quiet borderless panel in the\n *  launchpad-rail language; the warm coin gradient appears only as the avatar\n *  ring and the allocation bar. */\nexport function CoinLaunchPreview({ data, className }: { data: CoinPreviewData; className?: string }) {\n  const { name, symbol, description, imageUrl, supplyHuman, quoteSymbol, teamPct } = data;\n  const marketCap = supplyHuman != null ? supplyHuman * LAUNCH_PRICE : null;\n  const yourCoins = supplyHuman != null ? supplyHuman * (teamPct / 100) : null;\n\n  return (\n    <div className={cn(\"rounded-2xl bg-muted/50 dark:bg-card overflow-hidden\", className)}>\n      <div className=\"px-5 pt-4\">\n        <p className=\"section-label\">Live preview</p>\n      </div>\n\n      <div className=\"p-5 space-y-4\">\n        {/* Identity — avatar in the warm coin ring */}\n        <div className=\"flex items-center gap-3\">\n          <div className=\"shrink-0 rounded-full p-[2px]\" style={{ background: COIN_GRADIENT }}>\n            <div className=\"relative h-14 w-14 rounded-full overflow-hidden bg-card flex items-center justify-center\">\n              {imageUrl ? (\n                <Image src={imageUrl} alt=\"\" fill sizes=\"56px\" className=\"object-cover\" unoptimized />\n              ) : (\n                <TrendingUp className=\"h-6 w-6 text-brand-rose/70\" />\n              )}\n            </div>\n          </div>\n          <div className=\"min-w-0 flex-1\">\n            <p className={cn(\"font-bold text-lg leading-snug truncate\", !name && \"text-muted-foreground/50\")}>\n              {name || \"Your coin\"}\n            </p>\n            <p className=\"text-sm text-muted-foreground tabular-nums\">{symbol ? `$${symbol}` : \"$SYMBOL\"}</p>\n          </div>\n        </div>\n\n        {description ? (\n          <p className=\"text-sm text-muted-foreground leading-relaxed line-clamp-3\">{description}</p>\n        ) : null}\n\n        {/* Economics */}\n        <div className=\"grid grid-cols-3 gap-2 rounded-xl bg-muted/50 dark:bg-muted/30 p-3 text-sm\">\n          <div>\n            <p className=\"text-[10px] uppercase tracking-wide text-muted-foreground\">Launch price</p>\n            <p className=\"font-semibold tabular-nums\">{LAUNCH_PRICE} {quoteSymbol}</p>\n          </div>\n          <div>\n            <p className=\"text-[10px] uppercase tracking-wide text-muted-foreground\">Market cap</p>\n            <p className=\"font-semibold tabular-nums text-brand-price\">\n              {marketCap != null ? `${marketCap.toLocaleString()} ${quoteSymbol}` : \"—\"}\n            </p>\n          </div>\n          <div>\n            <p className=\"text-[10px] uppercase tracking-wide text-muted-foreground\">Your share</p>\n            <p className=\"font-semibold tabular-nums\">\n              {yourCoins != null ? `${teamPct}% · ${yourCoins.toLocaleString()}` : `${teamPct}%`}\n            </p>\n          </div>\n        </div>\n\n        {/* Allocation split bar */}\n        <div className=\"space-y-1.5\">\n          <div className=\"flex h-2.5 rounded-full overflow-hidden bg-muted-foreground/15\">\n            {teamPct > 0 && <div style={{ width: `${teamPct}%`, background: COIN_GRADIENT }} />}\n            <div className=\"flex-1\" />\n          </div>\n          <div className=\"flex justify-between text-[11px] text-muted-foreground\">\n            <span className=\"font-medium text-brand-rose\">You {teamPct}%</span>\n            <span>Community {100 - teamPct}%</span>\n          </div>\n        </div>\n\n        <p className=\"text-[11px] text-muted-foreground/70\">\n          Liquidity is locked forever — nobody can pull it, including us.\n        </p>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAoCQ;AAlCR,mBAAkB;AAClB,0BAA2B;AAC3B,gBAAmB;AAcnB,MAAM,eAAe;AAGrB,MAAM,gBAAgB;AAOf,SAAS,kBAAkB,EAAE,MAAM,UAAU,GAAkD;AACpG,QAAM,EAAE,MAAM,QAAQ,aAAa,UAAU,aAAa,aAAa,QAAQ,IAAI;AACnF,QAAM,YAAY,eAAe,OAAO,cAAc,eAAe;AACrE,QAAM,YAAY,eAAe,OAAO,eAAe,UAAU,OAAO;AAExE,SACE,6CAAC,SAAI,eAAW,cAAG,wDAAwD,SAAS,GAClF;AAAA,gDAAC,SAAI,WAAU,aACb,sDAAC,OAAE,WAAU,iBAAgB,0BAAY,GAC3C;AAAA,IAEA,6CAAC,SAAI,WAAU,iBAEb;AAAA,mDAAC,SAAI,WAAU,2BACb;AAAA,oDAAC,SAAI,WAAU,iCAAgC,OAAO,EAAE,YAAY,cAAc,GAChF,sDAAC,SAAI,WAAU,4FACZ,qBACC,4CAAC,aAAAA,SAAA,EAAM,KAAK,UAAU,KAAI,IAAG,MAAI,MAAC,OAAM,QAAO,WAAU,gBAAe,aAAW,MAAC,IAEpF,4CAAC,kCAAW,WAAU,8BAA6B,GAEvD,GACF;AAAA,QACA,6CAAC,SAAI,WAAU,kBACb;AAAA,sDAAC,OAAE,eAAW,cAAG,2CAA2C,CAAC,QAAQ,0BAA0B,GAC5F,kBAAQ,aACX;AAAA,UACA,4CAAC,OAAE,WAAU,8CAA8C,mBAAS,IAAI,MAAM,KAAK,WAAU;AAAA,WAC/F;AAAA,SACF;AAAA,MAEC,cACC,4CAAC,OAAE,WAAU,8DAA8D,uBAAY,IACrF;AAAA,MAGJ,6CAAC,SAAI,WAAU,8EACb;AAAA,qDAAC,SACC;AAAA,sDAAC,OAAE,WAAU,6DAA4D,0BAAY;AAAA,UACrF,6CAAC,OAAE,WAAU,8BAA8B;AAAA;AAAA,YAAa;AAAA,YAAE;AAAA,aAAY;AAAA,WACxE;AAAA,QACA,6CAAC,SACC;AAAA,sDAAC,OAAE,WAAU,6DAA4D,wBAAU;AAAA,UACnF,4CAAC,OAAE,WAAU,+CACV,uBAAa,OAAO,GAAG,UAAU,eAAe,CAAC,IAAI,WAAW,KAAK,UACxE;AAAA,WACF;AAAA,QACA,6CAAC,SACC;AAAA,sDAAC,OAAE,WAAU,6DAA4D,wBAAU;AAAA,UACnF,4CAAC,OAAE,WAAU,8BACV,uBAAa,OAAO,GAAG,OAAO,UAAO,UAAU,eAAe,CAAC,KAAK,GAAG,OAAO,KACjF;AAAA,WACF;AAAA,SACF;AAAA,MAGA,6CAAC,SAAI,WAAU,eACb;AAAA,qDAAC,SAAI,WAAU,kEACZ;AAAA,oBAAU,KAAK,4CAAC,SAAI,OAAO,EAAE,OAAO,GAAG,OAAO,KAAK,YAAY,cAAc,GAAG;AAAA,UACjF,4CAAC,SAAI,WAAU,UAAS;AAAA,WAC1B;AAAA,QACA,6CAAC,SAAI,WAAU,0DACb;AAAA,uDAAC,UAAK,WAAU,+BAA8B;AAAA;AAAA,YAAK;AAAA,YAAQ;AAAA,aAAC;AAAA,UAC5D,6CAAC,UAAK;AAAA;AAAA,YAAW,MAAM;AAAA,YAAQ;AAAA,aAAC;AAAA,WAClC;AAAA,SACF;AAAA,MAEA,4CAAC,OAAE,WAAU,wCAAuC,kFAEpD;AAAA,OACF;AAAA,KACF;AAEJ;","names":["Image"]}

package/dist/components/coin-launch-preview.js

@@ -15,14 +15,7 @@ function CoinLaunchPreview({ data, className }) {
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
         /* @__PURE__ */ jsx("div", { className: "shrink-0 rounded-full p-[2px]", style: { background: COIN_GRADIENT }, children: /* @__PURE__ */ jsx("div", { className: "relative h-14 w-14 rounded-full overflow-hidden bg-card flex items-center justify-center", children: imageUrl ? /* @__PURE__ */ jsx(Image, { src: imageUrl, alt: "", fill: true, sizes: "56px", className: "object-cover", unoptimized: true }) : /* @__PURE__ */ jsx(TrendingUp, { className: "h-6 w-6 text-brand-rose/70" }) }) }),
         /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx(
-            "p",
-            {
-              className: cn("font-bold text-lg leading-snug truncate", !name && "text-muted-foreground/50"),
-              style: { fontFamily: "var(--font-display, inherit)" },
-              children: name || "Your coin"
-            }
-          ),
+          /* @__PURE__ */ jsx("p", { className: cn("font-bold text-lg leading-snug truncate", !name && "text-muted-foreground/50"), children: name || "Your coin" }),
           /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground tabular-nums", children: symbol ? `$${symbol}` : "$SYMBOL" })
         ] })
       ] }),

package/dist/components/coin-launch-preview.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/coin-launch-preview.tsx"],"sourcesContent":["\"use client\";\n\nimport Image from \"next/image\";\nimport { TrendingUp } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\n\nexport interface CoinPreviewData {\n  name: string;\n  symbol: string;\n  description: string;\n  /** Local object URL or resolved IPFS URL for the feature image */\n  imageUrl: string | null;\n  /** Human supply (already validated) or null while typing */\n  supplyHuman: number | null;\n  quoteSymbol: string;\n  teamPct: number;\n}\n\nconst LAUNCH_PRICE = 0.01; // fixed, quote per coin\n\n/** Warm coin gradient — rose → orange, the brand's coin palette. */\nconst COIN_GRADIENT = \"linear-gradient(135deg, #f6608f, #fb8b46)\";\n\n/** Live preview for the Creator Coin launch studio — builds the coin in front\n *  of the creator as they type. Mirrors the coin's eventual discovery card so\n *  what they design is what their fans will see. Quiet borderless panel in the\n *  launchpad-rail language; the warm coin gradient appears only as the avatar\n *  ring and the allocation bar. */\nexport function CoinLaunchPreview({ data, className }: { data: CoinPreviewData; className?: string }) {\n  const { name, symbol, description, imageUrl, supplyHuman, quoteSymbol, teamPct } = data;\n  const marketCap = supplyHuman != null ? supplyHuman * LAUNCH_PRICE : null;\n  const yourCoins = supplyHuman != null ? supplyHuman * (teamPct / 100) : null;\n\n  return (\n    <div className={cn(\"rounded-2xl bg-muted/50 dark:bg-card overflow-hidden\", className)}>\n      <div className=\"px-5 pt-4\">\n        <p className=\"section-label\">Live preview</p>\n      </div>\n\n      <div className=\"p-5 space-y-4\">\n        {/* Identity — avatar in the warm coin ring */}\n        <div className=\"flex items-center gap-3\">\n          <div className=\"shrink-0 rounded-full p-[2px]\" style={{ background: COIN_GRADIENT }}>\n            <div className=\"relative h-14 w-14 rounded-full overflow-hidden bg-card flex items-center justify-center\">\n              {imageUrl ? (\n                <Image src={imageUrl} alt=\"\" fill sizes=\"56px\" className=\"object-cover\" unoptimized />\n              ) : (\n                <TrendingUp className=\"h-6 w-6 text-brand-rose/70\" />\n              )}\n            </div>\n          </div>\n          <div className=\"min-w-0 flex-1\">\n            <p\n              className={cn(\"font-bold text-lg leading-snug truncate\", !name && \"text-muted-foreground/50\")}\n              style={{ fontFamily: \"var(--font-display, inherit)\" }}\n            >\n              {name || \"Your coin\"}\n            </p>\n            <p className=\"text-sm text-muted-foreground tabular-nums\">{symbol ? `$${symbol}` : \"$SYMBOL\"}</p>\n          </div>\n        </div>\n\n        {description ? (\n          <p className=\"text-sm text-muted-foreground leading-relaxed line-clamp-3\">{description}</p>\n        ) : null}\n\n        {/* Economics */}\n        <div className=\"grid grid-cols-3 gap-2 rounded-xl bg-muted/50 dark:bg-muted/30 p-3 text-sm\">\n          <div>\n            <p className=\"text-[10px] uppercase tracking-wide text-muted-foreground\">Launch price</p>\n            <p className=\"font-semibold tabular-nums\">{LAUNCH_PRICE} {quoteSymbol}</p>\n          </div>\n          <div>\n            <p className=\"text-[10px] uppercase tracking-wide text-muted-foreground\">Market cap</p>\n            <p className=\"font-semibold tabular-nums text-brand-price\">\n              {marketCap != null ? `${marketCap.toLocaleString()} ${quoteSymbol}` : \"—\"}\n            </p>\n          </div>\n          <div>\n            <p className=\"text-[10px] uppercase tracking-wide text-muted-foreground\">Your share</p>\n            <p className=\"font-semibold tabular-nums\">\n              {yourCoins != null ? `${teamPct}% · ${yourCoins.toLocaleString()}` : `${teamPct}%`}\n            </p>\n          </div>\n        </div>\n\n        {/* Allocation split bar */}\n        <div className=\"space-y-1.5\">\n          <div className=\"flex h-2.5 rounded-full overflow-hidden bg-muted-foreground/15\">\n            {teamPct > 0 && <div style={{ width: `${teamPct}%`, background: COIN_GRADIENT }} />}\n            <div className=\"flex-1\" />\n          </div>\n          <div className=\"flex justify-between text-[11px] text-muted-foreground\">\n            <span className=\"font-medium text-brand-rose\">You {teamPct}%</span>\n            <span>Community {100 - teamPct}%</span>\n          </div>\n        </div>\n\n        <p className=\"text-[11px] text-muted-foreground/70\">\n          Liquidity is locked forever — nobody can pull it, including us.\n        </p>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AAoCQ,cAeE,YAfF;AAlCR,OAAO,WAAW;AAClB,SAAS,kBAAkB;AAC3B,SAAS,UAAU;AAcnB,MAAM,eAAe;AAGrB,MAAM,gBAAgB;AAOf,SAAS,kBAAkB,EAAE,MAAM,UAAU,GAAkD;AACpG,QAAM,EAAE,MAAM,QAAQ,aAAa,UAAU,aAAa,aAAa,QAAQ,IAAI;AACnF,QAAM,YAAY,eAAe,OAAO,cAAc,eAAe;AACrE,QAAM,YAAY,eAAe,OAAO,eAAe,UAAU,OAAO;AAExE,SACE,qBAAC,SAAI,WAAW,GAAG,wDAAwD,SAAS,GAClF;AAAA,wBAAC,SAAI,WAAU,aACb,8BAAC,OAAE,WAAU,iBAAgB,0BAAY,GAC3C;AAAA,IAEA,qBAAC,SAAI,WAAU,iBAEb;AAAA,2BAAC,SAAI,WAAU,2BACb;AAAA,4BAAC,SAAI,WAAU,iCAAgC,OAAO,EAAE,YAAY,cAAc,GAChF,8BAAC,SAAI,WAAU,4FACZ,qBACC,oBAAC,SAAM,KAAK,UAAU,KAAI,IAAG,MAAI,MAAC,OAAM,QAAO,WAAU,gBAAe,aAAW,MAAC,IAEpF,oBAAC,cAAW,WAAU,8BAA6B,GAEvD,GACF;AAAA,QACA,qBAAC,SAAI,WAAU,kBACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,GAAG,2CAA2C,CAAC,QAAQ,0BAA0B;AAAA,cAC5F,OAAO,EAAE,YAAY,+BAA+B;AAAA,cAEnD,kBAAQ;AAAA;AAAA,UACX;AAAA,UACA,oBAAC,OAAE,WAAU,8CAA8C,mBAAS,IAAI,MAAM,KAAK,WAAU;AAAA,WAC/F;AAAA,SACF;AAAA,MAEC,cACC,oBAAC,OAAE,WAAU,8DAA8D,uBAAY,IACrF;AAAA,MAGJ,qBAAC,SAAI,WAAU,8EACb;AAAA,6BAAC,SACC;AAAA,8BAAC,OAAE,WAAU,6DAA4D,0BAAY;AAAA,UACrF,qBAAC,OAAE,WAAU,8BAA8B;AAAA;AAAA,YAAa;AAAA,YAAE;AAAA,aAAY;AAAA,WACxE;AAAA,QACA,qBAAC,SACC;AAAA,8BAAC,OAAE,WAAU,6DAA4D,wBAAU;AAAA,UACnF,oBAAC,OAAE,WAAU,+CACV,uBAAa,OAAO,GAAG,UAAU,eAAe,CAAC,IAAI,WAAW,KAAK,UACxE;AAAA,WACF;AAAA,QACA,qBAAC,SACC;AAAA,8BAAC,OAAE,WAAU,6DAA4D,wBAAU;AAAA,UACnF,oBAAC,OAAE,WAAU,8BACV,uBAAa,OAAO,GAAG,OAAO,UAAO,UAAU,eAAe,CAAC,KAAK,GAAG,OAAO,KACjF;AAAA,WACF;AAAA,SACF;AAAA,MAGA,qBAAC,SAAI,WAAU,eACb;AAAA,6BAAC,SAAI,WAAU,kEACZ;AAAA,oBAAU,KAAK,oBAAC,SAAI,OAAO,EAAE,OAAO,GAAG,OAAO,KAAK,YAAY,cAAc,GAAG;AAAA,UACjF,oBAAC,SAAI,WAAU,UAAS;AAAA,WAC1B;AAAA,QACA,qBAAC,SAAI,WAAU,0DACb;AAAA,+BAAC,UAAK,WAAU,+BAA8B;AAAA;AAAA,YAAK;AAAA,YAAQ;AAAA,aAAC;AAAA,UAC5D,qBAAC,UAAK;AAAA;AAAA,YAAW,MAAM;AAAA,YAAQ;AAAA,aAAC;AAAA,WAClC;AAAA,SACF;AAAA,MAEA,oBAAC,OAAE,WAAU,wCAAuC,kFAEpD;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/coin-launch-preview.tsx"],"sourcesContent":["\"use client\";\n\nimport Image from \"next/image\";\nimport { TrendingUp } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\n\nexport interface CoinPreviewData {\n  name: string;\n  symbol: string;\n  description: string;\n  /** Local object URL or resolved IPFS URL for the feature image */\n  imageUrl: string | null;\n  /** Human supply (already validated) or null while typing */\n  supplyHuman: number | null;\n  quoteSymbol: string;\n  teamPct: number;\n}\n\nconst LAUNCH_PRICE = 0.01; // fixed, quote per coin\n\n/** Warm coin gradient — rose → orange, the brand's coin palette. */\nconst COIN_GRADIENT = \"linear-gradient(135deg, #f6608f, #fb8b46)\";\n\n/** Live preview for the Creator Coin launch studio — builds the coin in front\n *  of the creator as they type. Mirrors the coin's eventual discovery card so\n *  what they design is what their fans will see. Quiet borderless panel in the\n *  launchpad-rail language; the warm coin gradient appears only as the avatar\n *  ring and the allocation bar. */\nexport function CoinLaunchPreview({ data, className }: { data: CoinPreviewData; className?: string }) {\n  const { name, symbol, description, imageUrl, supplyHuman, quoteSymbol, teamPct } = data;\n  const marketCap = supplyHuman != null ? supplyHuman * LAUNCH_PRICE : null;\n  const yourCoins = supplyHuman != null ? supplyHuman * (teamPct / 100) : null;\n\n  return (\n    <div className={cn(\"rounded-2xl bg-muted/50 dark:bg-card overflow-hidden\", className)}>\n      <div className=\"px-5 pt-4\">\n        <p className=\"section-label\">Live preview</p>\n      </div>\n\n      <div className=\"p-5 space-y-4\">\n        {/* Identity — avatar in the warm coin ring */}\n        <div className=\"flex items-center gap-3\">\n          <div className=\"shrink-0 rounded-full p-[2px]\" style={{ background: COIN_GRADIENT }}>\n            <div className=\"relative h-14 w-14 rounded-full overflow-hidden bg-card flex items-center justify-center\">\n              {imageUrl ? (\n                <Image src={imageUrl} alt=\"\" fill sizes=\"56px\" className=\"object-cover\" unoptimized />\n              ) : (\n                <TrendingUp className=\"h-6 w-6 text-brand-rose/70\" />\n              )}\n            </div>\n          </div>\n          <div className=\"min-w-0 flex-1\">\n            <p className={cn(\"font-bold text-lg leading-snug truncate\", !name && \"text-muted-foreground/50\")}>\n              {name || \"Your coin\"}\n            </p>\n            <p className=\"text-sm text-muted-foreground tabular-nums\">{symbol ? `$${symbol}` : \"$SYMBOL\"}</p>\n          </div>\n        </div>\n\n        {description ? (\n          <p className=\"text-sm text-muted-foreground leading-relaxed line-clamp-3\">{description}</p>\n        ) : null}\n\n        {/* Economics */}\n        <div className=\"grid grid-cols-3 gap-2 rounded-xl bg-muted/50 dark:bg-muted/30 p-3 text-sm\">\n          <div>\n            <p className=\"text-[10px] uppercase tracking-wide text-muted-foreground\">Launch price</p>\n            <p className=\"font-semibold tabular-nums\">{LAUNCH_PRICE} {quoteSymbol}</p>\n          </div>\n          <div>\n            <p className=\"text-[10px] uppercase tracking-wide text-muted-foreground\">Market cap</p>\n            <p className=\"font-semibold tabular-nums text-brand-price\">\n              {marketCap != null ? `${marketCap.toLocaleString()} ${quoteSymbol}` : \"—\"}\n            </p>\n          </div>\n          <div>\n            <p className=\"text-[10px] uppercase tracking-wide text-muted-foreground\">Your share</p>\n            <p className=\"font-semibold tabular-nums\">\n              {yourCoins != null ? `${teamPct}% · ${yourCoins.toLocaleString()}` : `${teamPct}%`}\n            </p>\n          </div>\n        </div>\n\n        {/* Allocation split bar */}\n        <div className=\"space-y-1.5\">\n          <div className=\"flex h-2.5 rounded-full overflow-hidden bg-muted-foreground/15\">\n            {teamPct > 0 && <div style={{ width: `${teamPct}%`, background: COIN_GRADIENT }} />}\n            <div className=\"flex-1\" />\n          </div>\n          <div className=\"flex justify-between text-[11px] text-muted-foreground\">\n            <span className=\"font-medium text-brand-rose\">You {teamPct}%</span>\n            <span>Community {100 - teamPct}%</span>\n          </div>\n        </div>\n\n        <p className=\"text-[11px] text-muted-foreground/70\">\n          Liquidity is locked forever — nobody can pull it, including us.\n        </p>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AAoCQ,cAeE,YAfF;AAlCR,OAAO,WAAW;AAClB,SAAS,kBAAkB;AAC3B,SAAS,UAAU;AAcnB,MAAM,eAAe;AAGrB,MAAM,gBAAgB;AAOf,SAAS,kBAAkB,EAAE,MAAM,UAAU,GAAkD;AACpG,QAAM,EAAE,MAAM,QAAQ,aAAa,UAAU,aAAa,aAAa,QAAQ,IAAI;AACnF,QAAM,YAAY,eAAe,OAAO,cAAc,eAAe;AACrE,QAAM,YAAY,eAAe,OAAO,eAAe,UAAU,OAAO;AAExE,SACE,qBAAC,SAAI,WAAW,GAAG,wDAAwD,SAAS,GAClF;AAAA,wBAAC,SAAI,WAAU,aACb,8BAAC,OAAE,WAAU,iBAAgB,0BAAY,GAC3C;AAAA,IAEA,qBAAC,SAAI,WAAU,iBAEb;AAAA,2BAAC,SAAI,WAAU,2BACb;AAAA,4BAAC,SAAI,WAAU,iCAAgC,OAAO,EAAE,YAAY,cAAc,GAChF,8BAAC,SAAI,WAAU,4FACZ,qBACC,oBAAC,SAAM,KAAK,UAAU,KAAI,IAAG,MAAI,MAAC,OAAM,QAAO,WAAU,gBAAe,aAAW,MAAC,IAEpF,oBAAC,cAAW,WAAU,8BAA6B,GAEvD,GACF;AAAA,QACA,qBAAC,SAAI,WAAU,kBACb;AAAA,8BAAC,OAAE,WAAW,GAAG,2CAA2C,CAAC,QAAQ,0BAA0B,GAC5F,kBAAQ,aACX;AAAA,UACA,oBAAC,OAAE,WAAU,8CAA8C,mBAAS,IAAI,MAAM,KAAK,WAAU;AAAA,WAC/F;AAAA,SACF;AAAA,MAEC,cACC,oBAAC,OAAE,WAAU,8DAA8D,uBAAY,IACrF;AAAA,MAGJ,qBAAC,SAAI,WAAU,8EACb;AAAA,6BAAC,SACC;AAAA,8BAAC,OAAE,WAAU,6DAA4D,0BAAY;AAAA,UACrF,qBAAC,OAAE,WAAU,8BAA8B;AAAA;AAAA,YAAa;AAAA,YAAE;AAAA,aAAY;AAAA,WACxE;AAAA,QACA,qBAAC,SACC;AAAA,8BAAC,OAAE,WAAU,6DAA4D,wBAAU;AAAA,UACnF,oBAAC,OAAE,WAAU,+CACV,uBAAa,OAAO,GAAG,UAAU,eAAe,CAAC,IAAI,WAAW,KAAK,UACxE;AAAA,WACF;AAAA,QACA,qBAAC,SACC;AAAA,8BAAC,OAAE,WAAU,6DAA4D,wBAAU;AAAA,UACnF,oBAAC,OAAE,WAAU,8BACV,uBAAa,OAAO,GAAG,OAAO,UAAO,UAAU,eAAe,CAAC,KAAK,GAAG,OAAO,KACjF;AAAA,WACF;AAAA,SACF;AAAA,MAGA,qBAAC,SAAI,WAAU,eACb;AAAA,6BAAC,SAAI,WAAU,kEACZ;AAAA,oBAAU,KAAK,oBAAC,SAAI,OAAO,EAAE,OAAO,GAAG,OAAO,KAAK,YAAY,cAAc,GAAG;AAAA,UACjF,oBAAC,SAAI,WAAU,UAAS;AAAA,WAC1B;AAAA,QACA,qBAAC,SAAI,WAAU,0DACb;AAAA,+BAAC,UAAK,WAAU,+BAA8B;AAAA;AAAA,YAAK;AAAA,YAAQ;AAAA,aAAC;AAAA,UAC5D,qBAAC,UAAK;AAAA;AAAA,YAAW,MAAM;AAAA,YAAQ;AAAA,aAAC;AAAA,WAClC;AAAA,SACF;AAAA,MAEA,oBAAC,OAAE,WAAU,wCAAuC,kFAEpD;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

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

@@ -111,14 +111,7 @@ function MedialaneCollectionCard({
             ),
             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative px-4 pt-3 pb-4", children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-start gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  "p",
-                  {
-                    className: "min-w-0 flex-1 text-[18px] font-bold leading-snug truncate",
-                    style: { fontFamily: "var(--font-display, inherit)" },
-                    children: displayName
-                  }
-                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "min-w-0 flex-1 text-[18px] font-bold leading-snug truncate", children: displayName }),
                 serial && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "mt-0.5 shrink-0 rounded-full bg-white/10 px-2 py-0.5 text-[11px] font-semibold text-white/80 tabular-nums", children: serial })
               ] }),
               collection && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "mt-0.5 text-[12.5px] text-white/55 truncate", children: collection }),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/medialane-collection-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { useRef } from \"react\";\nimport { cn } from \"../utils/cn.js\";\n\nexport interface MedialaneCollectionCardProps {\n  /** Resolved, browser-loadable image URL. Empty → brand-gradient placeholder. */\n  image?: string | null;\n  /** Asset or collection name. */\n  name?: string;\n  /** Secondary line under the name (collection name, symbol, ticker…). */\n  collection?: string;\n  /** Edition or serial shown as a pill, e.g. \"#42\" or \"1 / 300\". */\n  serial?: string;\n  /** Creator display name or shortened address. */\n  creator?: string;\n  className?: string;\n}\n\nconst FRAME_GRADIENT =\n  \"linear-gradient(135deg, #3b7bff, #8a5cf6 38%, #f6608f 70%, #fb8b46)\";\n\n/** Foil tints on the card material — faint brand radials, like printed foil. */\nconst MATERIAL =\n  `radial-gradient(120% 90% at 0% 0%, rgba(59,123,255,0.14), transparent 55%),\n   radial-gradient(120% 90% at 100% 100%, rgba(251,139,70,0.10), transparent 55%),\n   #0a0e1f`;\n\n/** The Medialane Collection Card — a branded collectors-card preview of an\n *  asset or collection. A self-contained dark collectible object (identical in\n *  both themes): brand-spectrum frame, inset artwork on foil-tinted material,\n *  pointer-tracked 3D tilt + holographic sheen, display-face name, serial\n *  pill, Medialane maker's mark. Fluid width — size it with the parent\n *  container. Pure presentation. */\nexport function MedialaneCollectionCard({\n  image,\n  name,\n  collection,\n  serial,\n  creator,\n  className,\n}: MedialaneCollectionCardProps) {\n  const frameRef = useRef<HTMLDivElement>(null);\n\n  const handleMove = (e: React.PointerEvent<HTMLDivElement>) => {\n    const el = frameRef.current;\n    if (!el || e.pointerType !== \"mouse\") return;\n    if (window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) return;\n    const rect = el.getBoundingClientRect();\n    const x = (e.clientX - rect.left) / rect.width;\n    const y = (e.clientY - rect.top) / rect.height;\n    el.style.setProperty(\"--rx\", `${(0.5 - y) * 9}deg`);\n    el.style.setProperty(\"--ry\", `${(x - 0.5) * 9}deg`);\n    el.style.setProperty(\"--mx\", `${x * 100}%`);\n    el.style.setProperty(\"--my\", `${y * 100}%`);\n    el.style.setProperty(\"--pop\", \"1.015\");\n  };\n\n  const handleLeave = () => {\n    const el = frameRef.current;\n    if (!el) return;\n    el.style.setProperty(\"--rx\", \"0deg\");\n    el.style.setProperty(\"--ry\", \"0deg\");\n    el.style.setProperty(\"--pop\", \"1\");\n  };\n\n  const displayName = name?.trim() || \"Untitled\";\n\n  return (\n    <div className={cn(\"group\", className)} style={{ perspective: \"1000px\" }}>\n      <div\n        ref={frameRef}\n        onPointerMove={handleMove}\n        onPointerLeave={handleLeave}\n        className=\"rounded-[24px] p-[1.5px] transition-transform duration-200 ease-out will-change-transform shadow-[0_16px_40px_-16px_rgba(91,76,230,0.45)]\"\n        style={{\n          background: FRAME_GRADIENT,\n          transform:\n            \"rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--pop, 1))\",\n          transformStyle: \"preserve-3d\",\n        }}\n      >\n        <div\n          className=\"relative rounded-[22.5px] overflow-hidden text-white ring-1 ring-inset ring-white/[0.06]\"\n          style={{ background: MATERIAL }}\n        >\n          {/* Artwork — inset like a printed trading card */}\n          <div className=\"p-2.5 pb-0\">\n            <div className=\"relative aspect-[4/5] w-full overflow-hidden rounded-[16px] ring-1 ring-white/10\">\n              {image ? (\n                // eslint-disable-next-line @next/next/no-img-element\n                <img src={image} alt={displayName} className=\"h-full w-full object-cover\" />\n              ) : (\n                <div\n                  className=\"h-full w-full\"\n                  style={{ background: FRAME_GRADIENT, opacity: 0.9 }}\n                />\n              )}\n              {/* Bottom scrim for depth against the meta block */}\n              <div\n                aria-hidden\n                className=\"pointer-events-none absolute inset-x-0 bottom-0 h-16\"\n                style={{ background: \"linear-gradient(to top, rgba(10,14,31,0.45), transparent)\" }}\n              />\n            </div>\n          </div>\n\n          {/* Holographic sheen — visible at rest, blooms and tracks on hover */}\n          <div\n            aria-hidden\n            className=\"pointer-events-none absolute inset-0 opacity-40 group-hover:opacity-100 transition-opacity duration-300\"\n            style={{\n              background: `radial-gradient(420px circle at var(--mx, 70%) var(--my, 20%), rgba(255,255,255,0.20), transparent 45%),\n                linear-gradient(115deg, rgba(59,123,255,0.14), rgba(138,92,246,0.14) 35%, rgba(246,96,143,0.14) 65%, rgba(251,139,70,0.14))`,\n              mixBlendMode: \"screen\",\n            }}\n          />\n\n          {/* Meta */}\n          <div className=\"relative px-4 pt-3 pb-4\">\n            <div className=\"flex items-start gap-2\">\n              <p\n                className=\"min-w-0 flex-1 text-[18px] font-bold leading-snug truncate\"\n                style={{ fontFamily: \"var(--font-display, inherit)\" }}\n              >\n                {displayName}\n              </p>\n              {serial && (\n                <span className=\"mt-0.5 shrink-0 rounded-full bg-white/10 px-2 py-0.5 text-[11px] font-semibold text-white/80 tabular-nums\">\n                  {serial}\n                </span>\n              )}\n            </div>\n            {collection && (\n              <p className=\"mt-0.5 text-[12.5px] text-white/55 truncate\">{collection}</p>\n            )}\n            <div className=\"my-3 h-px bg-white/10\" />\n            <div className=\"flex items-center gap-2\">\n              <span\n                aria-hidden\n                className=\"h-3.5 w-3.5 rounded-full shrink-0\"\n                style={{ background: FRAME_GRADIENT }}\n              />\n              <span className=\"text-[9px] font-bold tracking-[0.18em] text-white/50\">\n                MEDIALANE\n              </span>\n              {creator && (\n                <span className=\"ml-auto min-w-0 truncate text-[11px] text-white/55 tabular-nums\">\n                  {creator}\n                </span>\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/medialane-collection-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { useRef } from \"react\";\nimport { cn } from \"../utils/cn.js\";\n\nexport interface MedialaneCollectionCardProps {\n  /** Resolved, browser-loadable image URL. Empty → brand-gradient placeholder. */\n  image?: string | null;\n  /** Asset or collection name. */\n  name?: string;\n  /** Secondary line under the name (collection name, symbol, ticker…). */\n  collection?: string;\n  /** Edition or serial shown as a pill, e.g. \"#42\" or \"1 / 300\". */\n  serial?: string;\n  /** Creator display name or shortened address. */\n  creator?: string;\n  className?: string;\n}\n\nconst FRAME_GRADIENT =\n  \"linear-gradient(135deg, #3b7bff, #8a5cf6 38%, #f6608f 70%, #fb8b46)\";\n\n/** Foil tints on the card material — faint brand radials, like printed foil. */\nconst MATERIAL =\n  `radial-gradient(120% 90% at 0% 0%, rgba(59,123,255,0.14), transparent 55%),\n   radial-gradient(120% 90% at 100% 100%, rgba(251,139,70,0.10), transparent 55%),\n   #0a0e1f`;\n\n/** The Medialane Collection Card — a branded collectors-card preview of an\n *  asset or collection. A self-contained dark collectible object (identical in\n *  both themes): brand-spectrum frame, inset artwork on foil-tinted material,\n *  pointer-tracked 3D tilt + holographic sheen, display-face name, serial\n *  pill, Medialane maker's mark. Fluid width — size it with the parent\n *  container. Pure presentation. */\nexport function MedialaneCollectionCard({\n  image,\n  name,\n  collection,\n  serial,\n  creator,\n  className,\n}: MedialaneCollectionCardProps) {\n  const frameRef = useRef<HTMLDivElement>(null);\n\n  const handleMove = (e: React.PointerEvent<HTMLDivElement>) => {\n    const el = frameRef.current;\n    if (!el || e.pointerType !== \"mouse\") return;\n    if (window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) return;\n    const rect = el.getBoundingClientRect();\n    const x = (e.clientX - rect.left) / rect.width;\n    const y = (e.clientY - rect.top) / rect.height;\n    el.style.setProperty(\"--rx\", `${(0.5 - y) * 9}deg`);\n    el.style.setProperty(\"--ry\", `${(x - 0.5) * 9}deg`);\n    el.style.setProperty(\"--mx\", `${x * 100}%`);\n    el.style.setProperty(\"--my\", `${y * 100}%`);\n    el.style.setProperty(\"--pop\", \"1.015\");\n  };\n\n  const handleLeave = () => {\n    const el = frameRef.current;\n    if (!el) return;\n    el.style.setProperty(\"--rx\", \"0deg\");\n    el.style.setProperty(\"--ry\", \"0deg\");\n    el.style.setProperty(\"--pop\", \"1\");\n  };\n\n  const displayName = name?.trim() || \"Untitled\";\n\n  return (\n    <div className={cn(\"group\", className)} style={{ perspective: \"1000px\" }}>\n      <div\n        ref={frameRef}\n        onPointerMove={handleMove}\n        onPointerLeave={handleLeave}\n        className=\"rounded-[24px] p-[1.5px] transition-transform duration-200 ease-out will-change-transform shadow-[0_16px_40px_-16px_rgba(91,76,230,0.45)]\"\n        style={{\n          background: FRAME_GRADIENT,\n          transform:\n            \"rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--pop, 1))\",\n          transformStyle: \"preserve-3d\",\n        }}\n      >\n        <div\n          className=\"relative rounded-[22.5px] overflow-hidden text-white ring-1 ring-inset ring-white/[0.06]\"\n          style={{ background: MATERIAL }}\n        >\n          {/* Artwork — inset like a printed trading card */}\n          <div className=\"p-2.5 pb-0\">\n            <div className=\"relative aspect-[4/5] w-full overflow-hidden rounded-[16px] ring-1 ring-white/10\">\n              {image ? (\n                // eslint-disable-next-line @next/next/no-img-element\n                <img src={image} alt={displayName} className=\"h-full w-full object-cover\" />\n              ) : (\n                <div\n                  className=\"h-full w-full\"\n                  style={{ background: FRAME_GRADIENT, opacity: 0.9 }}\n                />\n              )}\n              {/* Bottom scrim for depth against the meta block */}\n              <div\n                aria-hidden\n                className=\"pointer-events-none absolute inset-x-0 bottom-0 h-16\"\n                style={{ background: \"linear-gradient(to top, rgba(10,14,31,0.45), transparent)\" }}\n              />\n            </div>\n          </div>\n\n          {/* Holographic sheen — visible at rest, blooms and tracks on hover */}\n          <div\n            aria-hidden\n            className=\"pointer-events-none absolute inset-0 opacity-40 group-hover:opacity-100 transition-opacity duration-300\"\n            style={{\n              background: `radial-gradient(420px circle at var(--mx, 70%) var(--my, 20%), rgba(255,255,255,0.20), transparent 45%),\n                linear-gradient(115deg, rgba(59,123,255,0.14), rgba(138,92,246,0.14) 35%, rgba(246,96,143,0.14) 65%, rgba(251,139,70,0.14))`,\n              mixBlendMode: \"screen\",\n            }}\n          />\n\n          {/* Meta */}\n          <div className=\"relative px-4 pt-3 pb-4\">\n            <div className=\"flex items-start gap-2\">\n              <p className=\"min-w-0 flex-1 text-[18px] font-bold leading-snug truncate\">\n                {displayName}\n              </p>\n              {serial && (\n                <span className=\"mt-0.5 shrink-0 rounded-full bg-white/10 px-2 py-0.5 text-[11px] font-semibold text-white/80 tabular-nums\">\n                  {serial}\n                </span>\n              )}\n            </div>\n            {collection && (\n              <p className=\"mt-0.5 text-[12.5px] text-white/55 truncate\">{collection}</p>\n            )}\n            <div className=\"my-3 h-px bg-white/10\" />\n            <div className=\"flex items-center gap-2\">\n              <span\n                aria-hidden\n                className=\"h-3.5 w-3.5 rounded-full shrink-0\"\n                style={{ background: FRAME_GRADIENT }}\n              />\n              <span className=\"text-[9px] font-bold tracking-[0.18em] text-white/50\">\n                MEDIALANE\n              </span>\n              {creator && (\n                <span className=\"ml-auto min-w-0 truncate text-[11px] text-white/55 tabular-nums\">\n                  {creator}\n                </span>\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -88,14 +88,7 @@ function MedialaneCollectionCard({
             ),
             /* @__PURE__ */ jsxs("div", { className: "relative px-4 pt-3 pb-4", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
-                /* @__PURE__ */ jsx(
-                  "p",
-                  {
-                    className: "min-w-0 flex-1 text-[18px] font-bold leading-snug truncate",
-                    style: { fontFamily: "var(--font-display, inherit)" },
-                    children: displayName
-                  }
-                ),
+                /* @__PURE__ */ jsx("p", { className: "min-w-0 flex-1 text-[18px] font-bold leading-snug truncate", children: displayName }),
                 serial && /* @__PURE__ */ jsx("span", { className: "mt-0.5 shrink-0 rounded-full bg-white/10 px-2 py-0.5 text-[11px] font-semibold text-white/80 tabular-nums", children: serial })
               ] }),
               collection && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-[12.5px] text-white/55 truncate", children: collection }),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/medialane-collection-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { useRef } from \"react\";\nimport { cn } from \"../utils/cn.js\";\n\nexport interface MedialaneCollectionCardProps {\n  /** Resolved, browser-loadable image URL. Empty → brand-gradient placeholder. */\n  image?: string | null;\n  /** Asset or collection name. */\n  name?: string;\n  /** Secondary line under the name (collection name, symbol, ticker…). */\n  collection?: string;\n  /** Edition or serial shown as a pill, e.g. \"#42\" or \"1 / 300\". */\n  serial?: string;\n  /** Creator display name or shortened address. */\n  creator?: string;\n  className?: string;\n}\n\nconst FRAME_GRADIENT =\n  \"linear-gradient(135deg, #3b7bff, #8a5cf6 38%, #f6608f 70%, #fb8b46)\";\n\n/** Foil tints on the card material — faint brand radials, like printed foil. */\nconst MATERIAL =\n  `radial-gradient(120% 90% at 0% 0%, rgba(59,123,255,0.14), transparent 55%),\n   radial-gradient(120% 90% at 100% 100%, rgba(251,139,70,0.10), transparent 55%),\n   #0a0e1f`;\n\n/** The Medialane Collection Card — a branded collectors-card preview of an\n *  asset or collection. A self-contained dark collectible object (identical in\n *  both themes): brand-spectrum frame, inset artwork on foil-tinted material,\n *  pointer-tracked 3D tilt + holographic sheen, display-face name, serial\n *  pill, Medialane maker's mark. Fluid width — size it with the parent\n *  container. Pure presentation. */\nexport function MedialaneCollectionCard({\n  image,\n  name,\n  collection,\n  serial,\n  creator,\n  className,\n}: MedialaneCollectionCardProps) {\n  const frameRef = useRef<HTMLDivElement>(null);\n\n  const handleMove = (e: React.PointerEvent<HTMLDivElement>) => {\n    const el = frameRef.current;\n    if (!el || e.pointerType !== \"mouse\") return;\n    if (window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) return;\n    const rect = el.getBoundingClientRect();\n    const x = (e.clientX - rect.left) / rect.width;\n    const y = (e.clientY - rect.top) / rect.height;\n    el.style.setProperty(\"--rx\", `${(0.5 - y) * 9}deg`);\n    el.style.setProperty(\"--ry\", `${(x - 0.5) * 9}deg`);\n    el.style.setProperty(\"--mx\", `${x * 100}%`);\n    el.style.setProperty(\"--my\", `${y * 100}%`);\n    el.style.setProperty(\"--pop\", \"1.015\");\n  };\n\n  const handleLeave = () => {\n    const el = frameRef.current;\n    if (!el) return;\n    el.style.setProperty(\"--rx\", \"0deg\");\n    el.style.setProperty(\"--ry\", \"0deg\");\n    el.style.setProperty(\"--pop\", \"1\");\n  };\n\n  const displayName = name?.trim() || \"Untitled\";\n\n  return (\n    <div className={cn(\"group\", className)} style={{ perspective: \"1000px\" }}>\n      <div\n        ref={frameRef}\n        onPointerMove={handleMove}\n        onPointerLeave={handleLeave}\n        className=\"rounded-[24px] p-[1.5px] transition-transform duration-200 ease-out will-change-transform shadow-[0_16px_40px_-16px_rgba(91,76,230,0.45)]\"\n        style={{\n          background: FRAME_GRADIENT,\n          transform:\n            \"rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--pop, 1))\",\n          transformStyle: \"preserve-3d\",\n        }}\n      >\n        <div\n          className=\"relative rounded-[22.5px] overflow-hidden text-white ring-1 ring-inset ring-white/[0.06]\"\n          style={{ background: MATERIAL }}\n        >\n          {/* Artwork — inset like a printed trading card */}\n          <div className=\"p-2.5 pb-0\">\n            <div className=\"relative aspect-[4/5] w-full overflow-hidden rounded-[16px] ring-1 ring-white/10\">\n              {image ? (\n                // eslint-disable-next-line @next/next/no-img-element\n                <img src={image} alt={displayName} className=\"h-full w-full object-cover\" />\n              ) : (\n                <div\n                  className=\"h-full w-full\"\n                  style={{ background: FRAME_GRADIENT, opacity: 0.9 }}\n                />\n              )}\n              {/* Bottom scrim for depth against the meta block */}\n              <div\n                aria-hidden\n                className=\"pointer-events-none absolute inset-x-0 bottom-0 h-16\"\n                style={{ background: \"linear-gradient(to top, rgba(10,14,31,0.45), transparent)\" }}\n              />\n            </div>\n          </div>\n\n          {/* Holographic sheen — visible at rest, blooms and tracks on hover */}\n          <div\n            aria-hidden\n            className=\"pointer-events-none absolute inset-0 opacity-40 group-hover:opacity-100 transition-opacity duration-300\"\n            style={{\n              background: `radial-gradient(420px circle at var(--mx, 70%) var(--my, 20%), rgba(255,255,255,0.20), transparent 45%),\n                linear-gradient(115deg, rgba(59,123,255,0.14), rgba(138,92,246,0.14) 35%, rgba(246,96,143,0.14) 65%, rgba(251,139,70,0.14))`,\n              mixBlendMode: \"screen\",\n            }}\n          />\n\n          {/* Meta */}\n          <div className=\"relative px-4 pt-3 pb-4\">\n            <div className=\"flex items-start gap-2\">\n              <p\n                className=\"min-w-0 flex-1 text-[18px] font-bold leading-snug truncate\"\n                style={{ fontFamily: \"var(--font-display, inherit)\" }}\n              >\n                {displayName}\n              </p>\n              {serial && (\n                <span className=\"mt-0.5 shrink-0 rounded-full bg-white/10 px-2 py-0.5 text-[11px] font-semibold text-white/80 tabular-nums\">\n                  {serial}\n                </span>\n              )}\n            </div>\n            {collection && (\n              <p className=\"mt-0.5 text-[12.5px] text-white/55 truncate\">{collection}</p>\n            )}\n            <div className=\"my-3 h-px bg-white/10\" />\n            <div className=\"flex items-center gap-2\">\n              <span\n                aria-hidden\n                className=\"h-3.5 w-3.5 rounded-full shrink-0\"\n                style={{ background: FRAME_GRADIENT }}\n              />\n              <span className=\"text-[9px] font-bold tracking-[0.18em] text-white/50\">\n                MEDIALANE\n              </span>\n              {creator && (\n                <span className=\"ml-auto min-w-0 truncate text-[11px] text-white/55 tabular-nums\">\n                  {creator}\n                </span>\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/medialane-collection-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { useRef } from \"react\";\nimport { cn } from \"../utils/cn.js\";\n\nexport interface MedialaneCollectionCardProps {\n  /** Resolved, browser-loadable image URL. Empty → brand-gradient placeholder. */\n  image?: string | null;\n  /** Asset or collection name. */\n  name?: string;\n  /** Secondary line under the name (collection name, symbol, ticker…). */\n  collection?: string;\n  /** Edition or serial shown as a pill, e.g. \"#42\" or \"1 / 300\". */\n  serial?: string;\n  /** Creator display name or shortened address. */\n  creator?: string;\n  className?: string;\n}\n\nconst FRAME_GRADIENT =\n  \"linear-gradient(135deg, #3b7bff, #8a5cf6 38%, #f6608f 70%, #fb8b46)\";\n\n/** Foil tints on the card material — faint brand radials, like printed foil. */\nconst MATERIAL =\n  `radial-gradient(120% 90% at 0% 0%, rgba(59,123,255,0.14), transparent 55%),\n   radial-gradient(120% 90% at 100% 100%, rgba(251,139,70,0.10), transparent 55%),\n   #0a0e1f`;\n\n/** The Medialane Collection Card — a branded collectors-card preview of an\n *  asset or collection. A self-contained dark collectible object (identical in\n *  both themes): brand-spectrum frame, inset artwork on foil-tinted material,\n *  pointer-tracked 3D tilt + holographic sheen, display-face name, serial\n *  pill, Medialane maker's mark. Fluid width — size it with the parent\n *  container. Pure presentation. */\nexport function MedialaneCollectionCard({\n  image,\n  name,\n  collection,\n  serial,\n  creator,\n  className,\n}: MedialaneCollectionCardProps) {\n  const frameRef = useRef<HTMLDivElement>(null);\n\n  const handleMove = (e: React.PointerEvent<HTMLDivElement>) => {\n    const el = frameRef.current;\n    if (!el || e.pointerType !== \"mouse\") return;\n    if (window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) return;\n    const rect = el.getBoundingClientRect();\n    const x = (e.clientX - rect.left) / rect.width;\n    const y = (e.clientY - rect.top) / rect.height;\n    el.style.setProperty(\"--rx\", `${(0.5 - y) * 9}deg`);\n    el.style.setProperty(\"--ry\", `${(x - 0.5) * 9}deg`);\n    el.style.setProperty(\"--mx\", `${x * 100}%`);\n    el.style.setProperty(\"--my\", `${y * 100}%`);\n    el.style.setProperty(\"--pop\", \"1.015\");\n  };\n\n  const handleLeave = () => {\n    const el = frameRef.current;\n    if (!el) return;\n    el.style.setProperty(\"--rx\", \"0deg\");\n    el.style.setProperty(\"--ry\", \"0deg\");\n    el.style.setProperty(\"--pop\", \"1\");\n  };\n\n  const displayName = name?.trim() || \"Untitled\";\n\n  return (\n    <div className={cn(\"group\", className)} style={{ perspective: \"1000px\" }}>\n      <div\n        ref={frameRef}\n        onPointerMove={handleMove}\n        onPointerLeave={handleLeave}\n        className=\"rounded-[24px] p-[1.5px] transition-transform duration-200 ease-out will-change-transform shadow-[0_16px_40px_-16px_rgba(91,76,230,0.45)]\"\n        style={{\n          background: FRAME_GRADIENT,\n          transform:\n            \"rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--pop, 1))\",\n          transformStyle: \"preserve-3d\",\n        }}\n      >\n        <div\n          className=\"relative rounded-[22.5px] overflow-hidden text-white ring-1 ring-inset ring-white/[0.06]\"\n          style={{ background: MATERIAL }}\n        >\n          {/* Artwork — inset like a printed trading card */}\n          <div className=\"p-2.5 pb-0\">\n            <div className=\"relative aspect-[4/5] w-full overflow-hidden rounded-[16px] ring-1 ring-white/10\">\n              {image ? (\n                // eslint-disable-next-line @next/next/no-img-element\n                <img src={image} alt={displayName} className=\"h-full w-full object-cover\" />\n              ) : (\n                <div\n                  className=\"h-full w-full\"\n                  style={{ background: FRAME_GRADIENT, opacity: 0.9 }}\n                />\n              )}\n              {/* Bottom scrim for depth against the meta block */}\n              <div\n                aria-hidden\n                className=\"pointer-events-none absolute inset-x-0 bottom-0 h-16\"\n                style={{ background: \"linear-gradient(to top, rgba(10,14,31,0.45), transparent)\" }}\n              />\n            </div>\n          </div>\n\n          {/* Holographic sheen — visible at rest, blooms and tracks on hover */}\n          <div\n            aria-hidden\n            className=\"pointer-events-none absolute inset-0 opacity-40 group-hover:opacity-100 transition-opacity duration-300\"\n            style={{\n              background: `radial-gradient(420px circle at var(--mx, 70%) var(--my, 20%), rgba(255,255,255,0.20), transparent 45%),\n                linear-gradient(115deg, rgba(59,123,255,0.14), rgba(138,92,246,0.14) 35%, rgba(246,96,143,0.14) 65%, rgba(251,139,70,0.14))`,\n              mixBlendMode: \"screen\",\n            }}\n          />\n\n          {/* Meta */}\n          <div className=\"relative px-4 pt-3 pb-4\">\n            <div className=\"flex items-start gap-2\">\n              <p className=\"min-w-0 flex-1 text-[18px] font-bold leading-snug truncate\">\n                {displayName}\n              </p>\n              {serial && (\n                <span className=\"mt-0.5 shrink-0 rounded-full bg-white/10 px-2 py-0.5 text-[11px] font-semibold text-white/80 tabular-nums\">\n                  {serial}\n                </span>\n              )}\n            </div>\n            {collection && (\n              <p className=\"mt-0.5 text-[12.5px] text-white/55 truncate\">{collection}</p>\n            )}\n            <div className=\"my-3 h-px bg-white/10\" />\n            <div className=\"flex items-center gap-2\">\n              <span\n                aria-hidden\n                className=\"h-3.5 w-3.5 rounded-full shrink-0\"\n                style={{ background: FRAME_GRADIENT }}\n              />\n              <span className=\"text-[9px] font-bold tracking-[0.18em] text-white/50\">\n                MEDIALANE\n              </span>\n              {creator && (\n                <span className=\"ml-auto min-w-0 truncate text-[11px] text-white/55 tabular-nums\">\n                  {creator}\n                </span>\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AAwFY,SAGI,KAHJ;AAtFZ,SAAS,cAAc;AACvB,SAAS,UAAU;AAgBnB,MAAM,iBACJ;AAGF,MAAM,WACJ;AAAA;AAAA;AAUK,SAAS,wBAAwB;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAiC;AAC/B,QAAM,WAAW,OAAuB,IAAI;AAE5C,QAAM,aAAa,CAAC,MAA0C;AAC5D,UAAM,KAAK,SAAS;AACpB,QAAI,CAAC,MAAM,EAAE,gBAAgB,QAAS;AACtC,QAAI,OAAO,WAAW,kCAAkC,EAAE,QAAS;AACnE,UAAM,OAAO,GAAG,sBAAsB;AACtC,UAAM,KAAK,EAAE,UAAU,KAAK,QAAQ,KAAK;AACzC,UAAM,KAAK,EAAE,UAAU,KAAK,OAAO,KAAK;AACxC,OAAG,MAAM,YAAY,QAAQ,IAAI,MAAM,KAAK,CAAC,KAAK;AAClD,OAAG,MAAM,YAAY,QAAQ,IAAI,IAAI,OAAO,CAAC,KAAK;AAClD,OAAG,MAAM,YAAY,QAAQ,GAAG,IAAI,GAAG,GAAG;AAC1C,OAAG,MAAM,YAAY,QAAQ,GAAG,IAAI,GAAG,GAAG;AAC1C,OAAG,MAAM,YAAY,SAAS,OAAO;AAAA,EACvC;AAEA,QAAM,cAAc,MAAM;AACxB,UAAM,KAAK,SAAS;AACpB,QAAI,CAAC,GAAI;AACT,OAAG,MAAM,YAAY,QAAQ,MAAM;AACnC,OAAG,MAAM,YAAY,QAAQ,MAAM;AACnC,OAAG,MAAM,YAAY,SAAS,GAAG;AAAA,EACnC;AAEA,QAAM,cAAc,MAAM,KAAK,KAAK;AAEpC,SACE,oBAAC,SAAI,WAAW,GAAG,SAAS,SAAS,GAAG,OAAO,EAAE,aAAa,SAAS,GACrE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,eAAe;AAAA,MACf,gBAAgB;AAAA,MAChB,WAAU;AAAA,MACV,OAAO;AAAA,QACL,YAAY;AAAA,QACZ,WACE;AAAA,QACF,gBAAgB;AAAA,MAClB;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO,EAAE,YAAY,SAAS;AAAA,UAG9B;AAAA,gCAAC,SAAI,WAAU,cACb,+BAAC,SAAI,WAAU,oFACZ;AAAA;AAAA;AAAA,gBAEC,oBAAC,SAAI,KAAK,OAAO,KAAK,aAAa,WAAU,8BAA6B;AAAA,kBAE1E;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,OAAO,EAAE,YAAY,gBAAgB,SAAS,IAAI;AAAA;AAAA,cACpD;AAAA,cAGF;AAAA,gBAAC;AAAA;AAAA,kBACC,eAAW;AAAA,kBACX,WAAU;AAAA,kBACV,OAAO,EAAE,YAAY,4DAA4D;AAAA;AAAA,cACnF;AAAA,eACF,GACF;AAAA,YAGA;AAAA,cAAC;AAAA;AAAA,gBACC,eAAW;AAAA,gBACX,WAAU;AAAA,gBACV,OAAO;AAAA,kBACL,YAAY;AAAA;AAAA,kBAEZ,cAAc;AAAA,gBAChB;AAAA;AAAA,YACF;AAAA,YAGA,qBAAC,SAAI,WAAU,2BACb;AAAA,mCAAC,SAAI,WAAU,0BACb;AAAA,oCAAC,OAAE,WAAU,8DACV,uBACH;AAAA,gBACC,UACC,oBAAC,UAAK,WAAU,6GACb,kBACH;AAAA,iBAEJ;AAAA,cACC,cACC,oBAAC,OAAE,WAAU,+CAA+C,sBAAW;AAAA,cAEzE,oBAAC,SAAI,WAAU,yBAAwB;AAAA,cACvC,qBAAC,SAAI,WAAU,2BACb;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,eAAW;AAAA,oBACX,WAAU;AAAA,oBACV,OAAO,EAAE,YAAY,eAAe;AAAA;AAAA,gBACtC;AAAA,gBACA,oBAAC,UAAK,WAAU,wDAAuD,uBAEvE;AAAA,gBACC,WACC,oBAAC,UAAK,WAAU,mEACb,mBACH;AAAA,iBAEJ;AAAA,eACF;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF,GACF;AAEJ;","names":[]}

package/dist/components/portfolio-header.cjs

@@ -42,14 +42,11 @@ function PortfolioHeader({
   score,
   className
 }) {
-  const scoreChip = score && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "btn-border-animated p-[1.5px] rounded-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "rounded-[14px] bg-card px-4 py-2.5 flex items-center gap-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-8 w-8 rounded-full shrink-0 flex items-center justify-center bg-gradient-to-br from-brand-blue via-brand-purple to-brand-rose", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Sparkles, { className: "h-4 w-4 text-white" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0 leading-tight", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm font-bold gradient-text-full truncate", children: score.levelName }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "text-[11px] text-muted-foreground tabular-nums", children: [
-        score.totalXp.toLocaleString(),
-        " XP"
-      ] })
+  const scoreChip = score && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "btn-border-animated p-[1.5px] rounded-full", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "rounded-full bg-card px-3.5 py-1.5 flex items-baseline gap-2 whitespace-nowrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm font-semibold text-foreground", children: score.levelName }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-xs text-muted-foreground tabular-nums", children: [
+      score.totalXp.toLocaleString(),
+      " XP"
     ] })
   ] }) });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(

package/dist/components/portfolio-header.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/portfolio-header.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\nimport { Briefcase, Sparkles } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\nimport { AddressDisplay } from \"./address-display.js\";\n\nexport interface PortfolioHeaderScore {\n  /** Journey level name (\"Starter\", \"Explorer\", …) — no numeric level shown. */\n  levelName: string;\n  totalXp: number;\n  /** Where the score chip links (\"/rewards\"). */\n  href?: string;\n}\n\nexport interface PortfolioHeaderProps {\n  address: string;\n  score?: PortfolioHeaderScore | null;\n  className?: string;\n}\n\n/**\n * Compact portfolio header: eyebrow + address on the left, the rewards\n * journey chip on the right — level name + XP inside the animated\n * full-spectrum brand border (`.btn-border-animated`). Counts live in the\n * Overview stat tiles, not here.\n */\nexport function PortfolioHeader({\n  address,\n  score,\n  className,\n}: PortfolioHeaderProps) {\n  const scoreChip = score && (\n    <div className=\"btn-border-animated p-[1.5px] rounded-2xl\">\n      <div className=\"rounded-[14px] bg-card px-4 py-2.5 flex items-center gap-3\">\n        <div className=\"h-8 w-8 rounded-full shrink-0 flex items-center justify-center bg-gradient-to-br from-brand-blue via-brand-purple to-brand-rose\">\n          <Sparkles className=\"h-4 w-4 text-white\" />\n        </div>\n        <div className=\"min-w-0 leading-tight\">\n          <p className=\"text-sm font-bold gradient-text-full truncate\">\n            {score.levelName}\n          </p>\n          <p className=\"text-[11px] text-muted-foreground tabular-nums\">\n            {score.totalXp.toLocaleString()} XP\n          </p>\n        </div>\n      </div>\n    </div>\n  );\n\n  return (\n    <div\n      className={cn(\"flex items-start justify-between gap-4\", className)}\n    >\n      <div className=\"space-y-1.5 min-w-0\">\n        <div className=\"flex items-center gap-2 text-primary\">\n          <Briefcase className=\"h-4 w-4\" />\n          <span className=\"text-xs font-semibold uppercase tracking-wider\">\n            Portfolio\n          </span>\n        </div>\n        <AddressDisplay address={address} chars={6} className=\"text-sm\" />\n      </div>\n      {score?.href ? (\n        <Link href={score.href} className=\"shrink-0 active:opacity-80\">\n          {scoreChip}\n        </Link>\n      ) : (\n        <div className=\"shrink-0\">{scoreChip}</div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAoCU;AAlCV,kBAAiB;AACjB,0BAAoC;AACpC,gBAAmB;AACnB,6BAA+B;AAsBxB,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AACF,GAAyB;AACvB,QAAM,YAAY,SAChB,4CAAC,SAAI,WAAU,6CACb,uDAAC,SAAI,WAAU,8DACb;AAAA,gDAAC,SAAI,WAAU,mIACb,sDAAC,gCAAS,WAAU,sBAAqB,GAC3C;AAAA,IACA,6CAAC,SAAI,WAAU,yBACb;AAAA,kDAAC,OAAE,WAAU,iDACV,gBAAM,WACT;AAAA,MACA,6CAAC,OAAE,WAAU,kDACV;AAAA,cAAM,QAAQ,eAAe;AAAA,QAAE;AAAA,SAClC;AAAA,OACF;AAAA,KACF,GACF;AAGF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,cAAG,0CAA0C,SAAS;AAAA,MAEjE;AAAA,qDAAC,SAAI,WAAU,uBACb;AAAA,uDAAC,SAAI,WAAU,wCACb;AAAA,wDAAC,iCAAU,WAAU,WAAU;AAAA,YAC/B,4CAAC,UAAK,WAAU,kDAAiD,uBAEjE;AAAA,aACF;AAAA,UACA,4CAAC,yCAAe,SAAkB,OAAO,GAAG,WAAU,WAAU;AAAA,WAClE;AAAA,QACC,OAAO,OACN,4CAAC,YAAAA,SAAA,EAAK,MAAM,MAAM,MAAM,WAAU,8BAC/B,qBACH,IAEA,4CAAC,SAAI,WAAU,YAAY,qBAAU;AAAA;AAAA;AAAA,EAEzC;AAEJ;","names":["Link"]}
+{"version":3,"sources":["../../src/components/portfolio-header.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\nimport { Briefcase } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\nimport { AddressDisplay } from \"./address-display.js\";\n\nexport interface PortfolioHeaderScore {\n  /** Journey level name (\"Starter\", \"Explorer\", …) — no numeric level shown. */\n  levelName: string;\n  totalXp: number;\n  /** Where the score chip links (\"/rewards\"). */\n  href?: string;\n}\n\nexport interface PortfolioHeaderProps {\n  address: string;\n  score?: PortfolioHeaderScore | null;\n  className?: string;\n}\n\n/**\n * Compact portfolio header: eyebrow + address on the left, the rewards\n * journey chip on the right — level name + XP inside the animated\n * full-spectrum brand border (`.btn-border-animated`). Counts live in the\n * Overview stat tiles, not here.\n */\nexport function PortfolioHeader({\n  address,\n  score,\n  className,\n}: PortfolioHeaderProps) {\n  const scoreChip = score && (\n    <div className=\"btn-border-animated p-[1.5px] rounded-full\">\n      <div className=\"rounded-full bg-card px-3.5 py-1.5 flex items-baseline gap-2 whitespace-nowrap\">\n        <span className=\"text-sm font-semibold text-foreground\">\n          {score.levelName}\n        </span>\n        <span className=\"text-xs text-muted-foreground tabular-nums\">\n          {score.totalXp.toLocaleString()} XP\n        </span>\n      </div>\n    </div>\n  );\n\n  return (\n    <div\n      className={cn(\"flex items-start justify-between gap-4\", className)}\n    >\n      <div className=\"space-y-1.5 min-w-0\">\n        <div className=\"flex items-center gap-2 text-primary\">\n          <Briefcase className=\"h-4 w-4\" />\n          <span className=\"text-xs font-semibold uppercase tracking-wider\">\n            Portfolio\n          </span>\n        </div>\n        <AddressDisplay address={address} chars={6} className=\"text-sm\" />\n      </div>\n      {score?.href ? (\n        <Link href={score.href} className=\"shrink-0 active:opacity-80\">\n          {scoreChip}\n        </Link>\n      ) : (\n        <div className=\"shrink-0\">{scoreChip}</div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmCQ;AAjCR,kBAAiB;AACjB,0BAA0B;AAC1B,gBAAmB;AACnB,6BAA+B;AAsBxB,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AACF,GAAyB;AACvB,QAAM,YAAY,SAChB,4CAAC,SAAI,WAAU,8CACb,uDAAC,SAAI,WAAU,kFACb;AAAA,gDAAC,UAAK,WAAU,yCACb,gBAAM,WACT;AAAA,IACA,6CAAC,UAAK,WAAU,8CACb;AAAA,YAAM,QAAQ,eAAe;AAAA,MAAE;AAAA,OAClC;AAAA,KACF,GACF;AAGF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,cAAG,0CAA0C,SAAS;AAAA,MAEjE;AAAA,qDAAC,SAAI,WAAU,uBACb;AAAA,uDAAC,SAAI,WAAU,wCACb;AAAA,wDAAC,iCAAU,WAAU,WAAU;AAAA,YAC/B,4CAAC,UAAK,WAAU,kDAAiD,uBAEjE;AAAA,aACF;AAAA,UACA,4CAAC,yCAAe,SAAkB,OAAO,GAAG,WAAU,WAAU;AAAA,WAClE;AAAA,QACC,OAAO,OACN,4CAAC,YAAAA,SAAA,EAAK,MAAM,MAAM,MAAM,WAAU,8BAC/B,qBACH,IAEA,4CAAC,SAAI,WAAU,YAAY,qBAAU;AAAA;AAAA;AAAA,EAEzC;AAEJ;","names":["Link"]}

package/dist/components/portfolio-header.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import Link from "next/link";
-import { Briefcase, Sparkles } from "lucide-react";
+import { Briefcase } from "lucide-react";
 import { cn } from "../utils/cn.js";
 import { AddressDisplay } from "./address-display.js";
 function PortfolioHeader({
@@ -9,14 +9,11 @@ function PortfolioHeader({
   score,
   className
 }) {
-  const scoreChip = score && /* @__PURE__ */ jsx("div", { className: "btn-border-animated p-[1.5px] rounded-2xl", children: /* @__PURE__ */ jsxs("div", { className: "rounded-[14px] bg-card px-4 py-2.5 flex items-center gap-3", children: [
-    /* @__PURE__ */ jsx("div", { className: "h-8 w-8 rounded-full shrink-0 flex items-center justify-center bg-gradient-to-br from-brand-blue via-brand-purple to-brand-rose", children: /* @__PURE__ */ jsx(Sparkles, { className: "h-4 w-4 text-white" }) }),
-    /* @__PURE__ */ jsxs("div", { className: "min-w-0 leading-tight", children: [
-      /* @__PURE__ */ jsx("p", { className: "text-sm font-bold gradient-text-full truncate", children: score.levelName }),
-      /* @__PURE__ */ jsxs("p", { className: "text-[11px] text-muted-foreground tabular-nums", children: [
-        score.totalXp.toLocaleString(),
-        " XP"
-      ] })
+  const scoreChip = score && /* @__PURE__ */ jsx("div", { className: "btn-border-animated p-[1.5px] rounded-full", children: /* @__PURE__ */ jsxs("div", { className: "rounded-full bg-card px-3.5 py-1.5 flex items-baseline gap-2 whitespace-nowrap", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-foreground", children: score.levelName }),
+    /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground tabular-nums", children: [
+      score.totalXp.toLocaleString(),
+      " XP"
     ] })
   ] }) });
   return /* @__PURE__ */ jsxs(

package/dist/components/portfolio-header.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/portfolio-header.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\nimport { Briefcase, Sparkles } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\nimport { AddressDisplay } from \"./address-display.js\";\n\nexport interface PortfolioHeaderScore {\n  /** Journey level name (\"Starter\", \"Explorer\", …) — no numeric level shown. */\n  levelName: string;\n  totalXp: number;\n  /** Where the score chip links (\"/rewards\"). */\n  href?: string;\n}\n\nexport interface PortfolioHeaderProps {\n  address: string;\n  score?: PortfolioHeaderScore | null;\n  className?: string;\n}\n\n/**\n * Compact portfolio header: eyebrow + address on the left, the rewards\n * journey chip on the right — level name + XP inside the animated\n * full-spectrum brand border (`.btn-border-animated`). Counts live in the\n * Overview stat tiles, not here.\n */\nexport function PortfolioHeader({\n  address,\n  score,\n  className,\n}: PortfolioHeaderProps) {\n  const scoreChip = score && (\n    <div className=\"btn-border-animated p-[1.5px] rounded-2xl\">\n      <div className=\"rounded-[14px] bg-card px-4 py-2.5 flex items-center gap-3\">\n        <div className=\"h-8 w-8 rounded-full shrink-0 flex items-center justify-center bg-gradient-to-br from-brand-blue via-brand-purple to-brand-rose\">\n          <Sparkles className=\"h-4 w-4 text-white\" />\n        </div>\n        <div className=\"min-w-0 leading-tight\">\n          <p className=\"text-sm font-bold gradient-text-full truncate\">\n            {score.levelName}\n          </p>\n          <p className=\"text-[11px] text-muted-foreground tabular-nums\">\n            {score.totalXp.toLocaleString()} XP\n          </p>\n        </div>\n      </div>\n    </div>\n  );\n\n  return (\n    <div\n      className={cn(\"flex items-start justify-between gap-4\", className)}\n    >\n      <div className=\"space-y-1.5 min-w-0\">\n        <div className=\"flex items-center gap-2 text-primary\">\n          <Briefcase className=\"h-4 w-4\" />\n          <span className=\"text-xs font-semibold uppercase tracking-wider\">\n            Portfolio\n          </span>\n        </div>\n        <AddressDisplay address={address} chars={6} className=\"text-sm\" />\n      </div>\n      {score?.href ? (\n        <Link href={score.href} className=\"shrink-0 active:opacity-80\">\n          {scoreChip}\n        </Link>\n      ) : (\n        <div className=\"shrink-0\">{scoreChip}</div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAoCU,cAMA,YANA;AAlCV,OAAO,UAAU;AACjB,SAAS,WAAW,gBAAgB;AACpC,SAAS,UAAU;AACnB,SAAS,sBAAsB;AAsBxB,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AACF,GAAyB;AACvB,QAAM,YAAY,SAChB,oBAAC,SAAI,WAAU,6CACb,+BAAC,SAAI,WAAU,8DACb;AAAA,wBAAC,SAAI,WAAU,mIACb,8BAAC,YAAS,WAAU,sBAAqB,GAC3C;AAAA,IACA,qBAAC,SAAI,WAAU,yBACb;AAAA,0BAAC,OAAE,WAAU,iDACV,gBAAM,WACT;AAAA,MACA,qBAAC,OAAE,WAAU,kDACV;AAAA,cAAM,QAAQ,eAAe;AAAA,QAAE;AAAA,SAClC;AAAA,OACF;AAAA,KACF,GACF;AAGF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,0CAA0C,SAAS;AAAA,MAEjE;AAAA,6BAAC,SAAI,WAAU,uBACb;AAAA,+BAAC,SAAI,WAAU,wCACb;AAAA,gCAAC,aAAU,WAAU,WAAU;AAAA,YAC/B,oBAAC,UAAK,WAAU,kDAAiD,uBAEjE;AAAA,aACF;AAAA,UACA,oBAAC,kBAAe,SAAkB,OAAO,GAAG,WAAU,WAAU;AAAA,WAClE;AAAA,QACC,OAAO,OACN,oBAAC,QAAK,MAAM,MAAM,MAAM,WAAU,8BAC/B,qBACH,IAEA,oBAAC,SAAI,WAAU,YAAY,qBAAU;AAAA;AAAA;AAAA,EAEzC;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/portfolio-header.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\nimport { Briefcase } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\nimport { AddressDisplay } from \"./address-display.js\";\n\nexport interface PortfolioHeaderScore {\n  /** Journey level name (\"Starter\", \"Explorer\", …) — no numeric level shown. */\n  levelName: string;\n  totalXp: number;\n  /** Where the score chip links (\"/rewards\"). */\n  href?: string;\n}\n\nexport interface PortfolioHeaderProps {\n  address: string;\n  score?: PortfolioHeaderScore | null;\n  className?: string;\n}\n\n/**\n * Compact portfolio header: eyebrow + address on the left, the rewards\n * journey chip on the right — level name + XP inside the animated\n * full-spectrum brand border (`.btn-border-animated`). Counts live in the\n * Overview stat tiles, not here.\n */\nexport function PortfolioHeader({\n  address,\n  score,\n  className,\n}: PortfolioHeaderProps) {\n  const scoreChip = score && (\n    <div className=\"btn-border-animated p-[1.5px] rounded-full\">\n      <div className=\"rounded-full bg-card px-3.5 py-1.5 flex items-baseline gap-2 whitespace-nowrap\">\n        <span className=\"text-sm font-semibold text-foreground\">\n          {score.levelName}\n        </span>\n        <span className=\"text-xs text-muted-foreground tabular-nums\">\n          {score.totalXp.toLocaleString()} XP\n        </span>\n      </div>\n    </div>\n  );\n\n  return (\n    <div\n      className={cn(\"flex items-start justify-between gap-4\", className)}\n    >\n      <div className=\"space-y-1.5 min-w-0\">\n        <div className=\"flex items-center gap-2 text-primary\">\n          <Briefcase className=\"h-4 w-4\" />\n          <span className=\"text-xs font-semibold uppercase tracking-wider\">\n            Portfolio\n          </span>\n        </div>\n        <AddressDisplay address={address} chars={6} className=\"text-sm\" />\n      </div>\n      {score?.href ? (\n        <Link href={score.href} className=\"shrink-0 active:opacity-80\">\n          {scoreChip}\n        </Link>\n      ) : (\n        <div className=\"shrink-0\">{scoreChip}</div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAmCQ,cAGA,YAHA;AAjCR,OAAO,UAAU;AACjB,SAAS,iBAAiB;AAC1B,SAAS,UAAU;AACnB,SAAS,sBAAsB;AAsBxB,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AACF,GAAyB;AACvB,QAAM,YAAY,SAChB,oBAAC,SAAI,WAAU,8CACb,+BAAC,SAAI,WAAU,kFACb;AAAA,wBAAC,UAAK,WAAU,yCACb,gBAAM,WACT;AAAA,IACA,qBAAC,UAAK,WAAU,8CACb;AAAA,YAAM,QAAQ,eAAe;AAAA,MAAE;AAAA,OAClC;AAAA,KACF,GACF;AAGF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,0CAA0C,SAAS;AAAA,MAEjE;AAAA,6BAAC,SAAI,WAAU,uBACb;AAAA,+BAAC,SAAI,WAAU,wCACb;AAAA,gCAAC,aAAU,WAAU,WAAU;AAAA,YAC/B,oBAAC,UAAK,WAAU,kDAAiD,uBAEjE;AAAA,aACF;AAAA,UACA,oBAAC,kBAAe,SAAkB,OAAO,GAAG,WAAU,WAAU;AAAA,WAClE;AAAA,QACC,OAAO,OACN,oBAAC,QAAK,MAAM,MAAM,MAAM,WAAU,8BAC/B,qBACH,IAEA,oBAAC,SAAI,WAAU,YAAY,qBAAU;AAAA;AAAA;AAAA,EAEzC;AAEJ;","names":[]}

package/dist/components/portfolio-overview.cjs

@@ -36,7 +36,6 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_link = __toESM(require("next/link"), 1);
 var import_lucide_react = require("lucide-react");
 var import_cn = require("../utils/cn.js");
-var import_stat_tile = require("./stat-tile.js");
 const ATTENTION_DOT = {
   destructive: "bg-destructive",
   warning: "bg-amber-500",
@@ -107,40 +106,37 @@ function PortfolioOverview({
         item.href + item.label
       )) })
     ] }),
-    stats && stats.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid grid-cols-2 sm:grid-cols-4 gap-3", children: stats.map(
-      (stat) => stat.href ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.default, { href: stat.href, className: "active:opacity-80", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_stat_tile.StatTile,
-        {
-          label: stat.label,
-          value: stat.value ?? "\u2014",
-          sub: stat.sub,
-          big: true,
-          className: "h-full"
+    (stats && stats.length > 0 || quickActions && quickActions.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-3", children: [
+      stats && stats.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center gap-2 flex-wrap", children: stats.map((stat) => {
+        if (stat.value == null) {
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "span",
+            {
+              className: "bg-muted rounded-full px-3 py-1.5 w-20 h-7 animate-pulse inline-block"
+            },
+            stat.label
+          );
         }
-      ) }, stat.label) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_stat_tile.StatTile,
+        const pill = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "inline-flex items-baseline gap-1.5 rounded-full bg-muted px-3 py-1.5 text-[13px] whitespace-nowrap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-semibold text-foreground tabular-nums", children: stat.value }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-muted-foreground", children: stat.label }),
+          stat.sub && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-muted-foreground/70", children: [
+            "\xB7 ",
+            stat.sub
+          ] })
+        ] });
+        return stat.href ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.default, { href: stat.href, className: "active:opacity-80", children: pill }, stat.label) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: pill }, stat.label);
+      }) }),
+      quickActions && quickActions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center gap-2 flex-wrap", children: quickActions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_link.default,
         {
-          label: stat.label,
-          value: stat.value ?? "\u2014",
-          sub: stat.sub,
-          big: true,
-          className: "h-full"
+          href: action.href,
+          className: "inline-flex items-center rounded-full border border-border bg-card px-4 py-1.5 text-[13px] font-medium text-foreground active:opacity-80 hover:border-primary/40 transition-colors",
+          children: action.label
         },
-        stat.label
-      )
-    ) }),
-    quickActions && quickActions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center gap-2 flex-wrap", children: quickActions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      import_link.default,
-      {
-        href: action.href,
-        className: "inline-flex items-center gap-1.5 rounded-full border border-border bg-card px-4 py-2 text-[13px] font-medium text-foreground active:opacity-80 hover:border-primary/40 transition-colors",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Plus, { className: "h-3.5 w-3.5 text-primary" }),
-          action.label
-        ]
-      },
-      action.href
-    )) }),
+        action.href
+      )) })
+    ] }),
     isEmpty ? emptyState : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid gap-6 lg:grid-cols-5", children: [
       assetsSlot && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "lg:col-span-3 space-y-3", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SectionHeading, { title: "Your assets", href: assetsHref }),

package/dist/components/portfolio-overview.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/portfolio-overview.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\nimport { ArrowRight, BellRing, Plus } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\nimport { StatTile } from \"./stat-tile.js\";\n\nexport interface PortfolioAttentionItem {\n  /** e.g. \"2 offers received\" — caller composes count + label. */\n  label: string;\n  /** Short helper line, e.g. \"Accept, counter, or decline\". */\n  description?: string;\n  href: string;\n  count: number;\n  tone?: \"destructive\" | \"warning\" | \"primary\";\n}\n\nexport interface PortfolioOverviewStat {\n  label: string;\n  /** Pass null while loading. */\n  value: string | number | null;\n  sub?: string;\n  href?: string;\n}\n\nexport interface PortfolioQuickAction {\n  label: string;\n  href: string;\n}\n\nexport interface PortfolioOverviewProps {\n  /** Pending items needing action. The panel renders only when a count > 0. */\n  attention?: PortfolioAttentionItem[];\n  stats?: PortfolioOverviewStat[];\n  /** Shortcut row under the stat tiles (\"Create asset\", …). */\n  quickActions?: PortfolioQuickAction[];\n  /** Recent-assets cards, rendered by the app. */\n  assetsSlot?: React.ReactNode;\n  assetsHref?: string;\n  /** Recent-activity rows, rendered by the app. */\n  activitySlot?: React.ReactNode;\n  activityHref?: string;\n  /** First-run state; rendered instead of the columns when `isEmpty`. */\n  isEmpty?: boolean;\n  emptyState?: React.ReactNode;\n  className?: string;\n}\n\nconst ATTENTION_DOT: Record<\n  NonNullable<PortfolioAttentionItem[\"tone\"]>,\n  string\n> = {\n  destructive: \"bg-destructive\",\n  warning: \"bg-amber-500\",\n  primary: \"bg-primary\",\n};\n\nfunction SectionHeading({\n  title,\n  href,\n}: {\n  title: string;\n  href?: string;\n}) {\n  return (\n    <div className=\"flex items-center justify-between gap-3\">\n      <h2 className=\"text-sm font-semibold text-foreground\">{title}</h2>\n      {href && (\n        <Link\n          href={href}\n          className=\"inline-flex items-center gap-1 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors\"\n        >\n          View all\n          <ArrowRight className=\"h-3 w-3\" />\n        </Link>\n      )}\n    </div>\n  );\n}\n\n/**\n * Portfolio landing page layout: needs-attention panel, clickable stat tiles,\n * and recent assets/activity columns. Pure presentation — the app injects\n * counts, stats, and rendered cards.\n */\nexport function PortfolioOverview({\n  attention,\n  stats,\n  quickActions,\n  assetsSlot,\n  assetsHref,\n  activitySlot,\n  activityHref,\n  isEmpty,\n  emptyState,\n  className,\n}: PortfolioOverviewProps) {\n  const pending = (attention ?? []).filter((item) => item.count > 0);\n\n  return (\n    <div className={cn(\"space-y-6\", className)}>\n      {pending.length > 0 && (\n        <section className=\"rounded-xl border border-primary/25 bg-primary/[0.04] p-4 sm:p-5 space-y-3\">\n          <div className=\"flex items-center gap-2 text-primary\">\n            <BellRing className=\"h-4 w-4\" />\n            <h2 className=\"text-sm font-semibold\">Needs your attention</h2>\n          </div>\n          <div className=\"grid gap-2 sm:grid-cols-2\">\n            {pending.map((item) => (\n              <Link\n                key={item.href + item.label}\n                href={item.href}\n                className=\"flex items-center justify-between gap-3 rounded-lg bg-card border border-border/60 px-3.5 py-2.5 active:opacity-80 hover:border-border transition-colors\"\n              >\n                <span className=\"flex items-center gap-2.5 min-w-0\">\n                  <span\n                    className={cn(\n                      \"h-2 w-2 rounded-full shrink-0\",\n                      ATTENTION_DOT[item.tone ?? \"primary\"],\n                    )}\n                  />\n                  <span className=\"min-w-0\">\n                    <span className=\"block text-sm font-medium text-foreground truncate\">\n                      {item.label}\n                    </span>\n                    {item.description && (\n                      <span className=\"block text-xs text-muted-foreground truncate\">\n                        {item.description}\n                      </span>\n                    )}\n                  </span>\n                </span>\n                <ArrowRight className=\"h-4 w-4 text-muted-foreground shrink-0\" />\n              </Link>\n            ))}\n          </div>\n        </section>\n      )}\n\n      {stats && stats.length > 0 && (\n        <div className=\"grid grid-cols-2 sm:grid-cols-4 gap-3\">\n          {stats.map((stat) =>\n            stat.href ? (\n              <Link key={stat.label} href={stat.href} className=\"active:opacity-80\">\n                <StatTile\n                  label={stat.label}\n                  value={stat.value ?? \"—\"}\n                  sub={stat.sub}\n                  big\n                  className=\"h-full\"\n                />\n              </Link>\n            ) : (\n              <StatTile\n                key={stat.label}\n                label={stat.label}\n                value={stat.value ?? \"—\"}\n                sub={stat.sub}\n                big\n                className=\"h-full\"\n              />\n            ),\n          )}\n        </div>\n      )}\n\n      {quickActions && quickActions.length > 0 && (\n        <div className=\"flex items-center gap-2 flex-wrap\">\n          {quickActions.map((action) => (\n            <Link\n              key={action.href}\n              href={action.href}\n              className=\"inline-flex items-center gap-1.5 rounded-full border border-border bg-card px-4 py-2 text-[13px] font-medium text-foreground active:opacity-80 hover:border-primary/40 transition-colors\"\n            >\n              <Plus className=\"h-3.5 w-3.5 text-primary\" />\n              {action.label}\n            </Link>\n          ))}\n        </div>\n      )}\n\n      {isEmpty ? (\n        emptyState\n      ) : (\n        <div className=\"grid gap-6 lg:grid-cols-5\">\n          {assetsSlot && (\n            <section className=\"lg:col-span-3 space-y-3\">\n              <SectionHeading title=\"Your assets\" href={assetsHref} />\n              {assetsSlot}\n            </section>\n          )}\n          {activitySlot && (\n            <section className=\"lg:col-span-2 space-y-3\">\n              <SectionHeading title=\"Recent activity\" href={activityHref} />\n              {activitySlot}\n            </section>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":["Link"]}
+{"version":3,"sources":["../../src/components/portfolio-overview.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\nimport { ArrowRight, BellRing } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\n\nexport interface PortfolioAttentionItem {\n  /** e.g. \"2 offers received\" — caller composes count + label. */\n  label: string;\n  /** Short helper line, e.g. \"Accept, counter, or decline\". */\n  description?: string;\n  href: string;\n  count: number;\n  tone?: \"destructive\" | \"warning\" | \"primary\";\n}\n\nexport interface PortfolioOverviewStat {\n  label: string;\n  /** Pass null while loading. */\n  value: string | number | null;\n  sub?: string;\n  href?: string;\n}\n\nexport interface PortfolioQuickAction {\n  label: string;\n  href: string;\n}\n\nexport interface PortfolioOverviewProps {\n  /** Pending items needing action. The panel renders only when a count > 0. */\n  attention?: PortfolioAttentionItem[];\n  stats?: PortfolioOverviewStat[];\n  /** Shortcut row under the stat tiles (\"Create asset\", …). */\n  quickActions?: PortfolioQuickAction[];\n  /** Recent-assets cards, rendered by the app. */\n  assetsSlot?: React.ReactNode;\n  assetsHref?: string;\n  /** Recent-activity rows, rendered by the app. */\n  activitySlot?: React.ReactNode;\n  activityHref?: string;\n  /** First-run state; rendered instead of the columns when `isEmpty`. */\n  isEmpty?: boolean;\n  emptyState?: React.ReactNode;\n  className?: string;\n}\n\nconst ATTENTION_DOT: Record<\n  NonNullable<PortfolioAttentionItem[\"tone\"]>,\n  string\n> = {\n  destructive: \"bg-destructive\",\n  warning: \"bg-amber-500\",\n  primary: \"bg-primary\",\n};\n\nfunction SectionHeading({\n  title,\n  href,\n}: {\n  title: string;\n  href?: string;\n}) {\n  return (\n    <div className=\"flex items-center justify-between gap-3\">\n      <h2 className=\"text-sm font-semibold text-foreground\">{title}</h2>\n      {href && (\n        <Link\n          href={href}\n          className=\"inline-flex items-center gap-1 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors\"\n        >\n          View all\n          <ArrowRight className=\"h-3 w-3\" />\n        </Link>\n      )}\n    </div>\n  );\n}\n\n/**\n * Portfolio landing page layout: needs-attention panel, clickable stat tiles,\n * and recent assets/activity columns. Pure presentation — the app injects\n * counts, stats, and rendered cards.\n */\nexport function PortfolioOverview({\n  attention,\n  stats,\n  quickActions,\n  assetsSlot,\n  assetsHref,\n  activitySlot,\n  activityHref,\n  isEmpty,\n  emptyState,\n  className,\n}: PortfolioOverviewProps) {\n  const pending = (attention ?? []).filter((item) => item.count > 0);\n\n  return (\n    <div className={cn(\"space-y-6\", className)}>\n      {pending.length > 0 && (\n        <section className=\"rounded-xl border border-primary/25 bg-primary/[0.04] p-4 sm:p-5 space-y-3\">\n          <div className=\"flex items-center gap-2 text-primary\">\n            <BellRing className=\"h-4 w-4\" />\n            <h2 className=\"text-sm font-semibold\">Needs your attention</h2>\n          </div>\n          <div className=\"grid gap-2 sm:grid-cols-2\">\n            {pending.map((item) => (\n              <Link\n                key={item.href + item.label}\n                href={item.href}\n                className=\"flex items-center justify-between gap-3 rounded-lg bg-card border border-border/60 px-3.5 py-2.5 active:opacity-80 hover:border-border transition-colors\"\n              >\n                <span className=\"flex items-center gap-2.5 min-w-0\">\n                  <span\n                    className={cn(\n                      \"h-2 w-2 rounded-full shrink-0\",\n                      ATTENTION_DOT[item.tone ?? \"primary\"],\n                    )}\n                  />\n                  <span className=\"min-w-0\">\n                    <span className=\"block text-sm font-medium text-foreground truncate\">\n                      {item.label}\n                    </span>\n                    {item.description && (\n                      <span className=\"block text-xs text-muted-foreground truncate\">\n                        {item.description}\n                      </span>\n                    )}\n                  </span>\n                </span>\n                <ArrowRight className=\"h-4 w-4 text-muted-foreground shrink-0\" />\n              </Link>\n            ))}\n          </div>\n        </section>\n      )}\n\n      {((stats && stats.length > 0) || (quickActions && quickActions.length > 0)) && (\n        <div className=\"space-y-3\">\n          {stats && stats.length > 0 && (\n            <div className=\"flex items-center gap-2 flex-wrap\">\n              {stats.map((stat) => {\n                if (stat.value == null) {\n                  return (\n                    <span\n                      key={stat.label}\n                      className=\"bg-muted rounded-full px-3 py-1.5 w-20 h-7 animate-pulse inline-block\"\n                    />\n                  );\n                }\n                const pill = (\n                  <span className=\"inline-flex items-baseline gap-1.5 rounded-full bg-muted px-3 py-1.5 text-[13px] whitespace-nowrap\">\n                    <span className=\"font-semibold text-foreground tabular-nums\">\n                      {stat.value}\n                    </span>\n                    <span className=\"text-muted-foreground\">{stat.label}</span>\n                    {stat.sub && (\n                      <span className=\"text-muted-foreground/70\">\n                        · {stat.sub}\n                      </span>\n                    )}\n                  </span>\n                );\n                return stat.href ? (\n                  <Link key={stat.label} href={stat.href} className=\"active:opacity-80\">\n                    {pill}\n                  </Link>\n                ) : (\n                  <span key={stat.label}>{pill}</span>\n                );\n              })}\n            </div>\n          )}\n\n          {quickActions && quickActions.length > 0 && (\n            <div className=\"flex items-center gap-2 flex-wrap\">\n              {quickActions.map((action) => (\n                <Link\n                  key={action.href}\n                  href={action.href}\n                  className=\"inline-flex items-center rounded-full border border-border bg-card px-4 py-1.5 text-[13px] font-medium text-foreground active:opacity-80 hover:border-primary/40 transition-colors\"\n                >\n                  {action.label}\n                </Link>\n              ))}\n            </div>\n          )}\n        </div>\n      )}\n\n      {isEmpty ? (\n        emptyState\n      ) : (\n        <div className=\"grid gap-6 lg:grid-cols-5\">\n          {assetsSlot && (\n            <section className=\"lg:col-span-3 space-y-3\">\n              <SectionHeading title=\"Your assets\" href={assetsHref} />\n              {assetsSlot}\n            </section>\n          )}\n          {activitySlot && (\n            <section className=\"lg:col-span-2 space-y-3\">\n              <SectionHeading title=\"Recent activity\" href={activityHref} />\n              {activitySlot}\n            </section>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiEM;AA/DN,kBAAiB;AACjB,0BAAqC;AACrC,gBAAmB;AA2CnB,MAAM,gBAGF;AAAA,EACF,aAAa;AAAA,EACb,SAAS;AAAA,EACT,SAAS;AACX;AAEA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AACF,GAGG;AACD,SACE,6CAAC,SAAI,WAAU,2CACb;AAAA,gDAAC,QAAG,WAAU,yCAAyC,iBAAM;AAAA,IAC5D,QACC;AAAA,MAAC,YAAAA;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAU;AAAA,QACX;AAAA;AAAA,UAEC,4CAAC,kCAAW,WAAU,WAAU;AAAA;AAAA;AAAA,IAClC;AAAA,KAEJ;AAEJ;AAOO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA2B;AACzB,QAAM,WAAW,aAAa,CAAC,GAAG,OAAO,CAAC,SAAS,KAAK,QAAQ,CAAC;AAEjE,SACE,6CAAC,SAAI,eAAW,cAAG,aAAa,SAAS,GACtC;AAAA,YAAQ,SAAS,KAChB,6CAAC,aAAQ,WAAU,8EACjB;AAAA,mDAAC,SAAI,WAAU,wCACb;AAAA,oDAAC,gCAAS,WAAU,WAAU;AAAA,QAC9B,4CAAC,QAAG,WAAU,yBAAwB,kCAAoB;AAAA,SAC5D;AAAA,MACA,4CAAC,SAAI,WAAU,6BACZ,kBAAQ,IAAI,CAAC,SACZ;AAAA,QAAC,YAAAA;AAAA,QAAA;AAAA,UAEC,MAAM,KAAK;AAAA,UACX,WAAU;AAAA,UAEV;AAAA,yDAAC,UAAK,WAAU,qCACd;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,eAAW;AAAA,oBACT;AAAA,oBACA,cAAc,KAAK,QAAQ,SAAS;AAAA,kBACtC;AAAA;AAAA,cACF;AAAA,cACA,6CAAC,UAAK,WAAU,WACd;AAAA,4DAAC,UAAK,WAAU,sDACb,eAAK,OACR;AAAA,gBACC,KAAK,eACJ,4CAAC,UAAK,WAAU,gDACb,eAAK,aACR;AAAA,iBAEJ;AAAA,eACF;AAAA,YACA,4CAAC,kCAAW,WAAU,0CAAyC;AAAA;AAAA;AAAA,QAtB1D,KAAK,OAAO,KAAK;AAAA,MAuBxB,CACD,GACH;AAAA,OACF;AAAA,KAGC,SAAS,MAAM,SAAS,KAAO,gBAAgB,aAAa,SAAS,MACtE,6CAAC,SAAI,WAAU,aACZ;AAAA,eAAS,MAAM,SAAS,KACvB,4CAAC,SAAI,WAAU,qCACZ,gBAAM,IAAI,CAAC,SAAS;AACnB,YAAI,KAAK,SAAS,MAAM;AACtB,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,WAAU;AAAA;AAAA,YADL,KAAK;AAAA,UAEZ;AAAA,QAEJ;AACA,cAAM,OACJ,6CAAC,UAAK,WAAU,sGACd;AAAA,sDAAC,UAAK,WAAU,8CACb,eAAK,OACR;AAAA,UACA,4CAAC,UAAK,WAAU,yBAAyB,eAAK,OAAM;AAAA,UACnD,KAAK,OACJ,6CAAC,UAAK,WAAU,4BAA2B;AAAA;AAAA,YACtC,KAAK;AAAA,aACV;AAAA,WAEJ;AAEF,eAAO,KAAK,OACV,4CAAC,YAAAA,SAAA,EAAsB,MAAM,KAAK,MAAM,WAAU,qBAC/C,kBADQ,KAAK,KAEhB,IAEA,4CAAC,UAAuB,kBAAb,KAAK,KAAa;AAAA,MAEjC,CAAC,GACH;AAAA,MAGD,gBAAgB,aAAa,SAAS,KACrC,4CAAC,SAAI,WAAU,qCACZ,uBAAa,IAAI,CAAC,WACjB;AAAA,QAAC,YAAAA;AAAA,QAAA;AAAA,UAEC,MAAM,OAAO;AAAA,UACb,WAAU;AAAA,UAET,iBAAO;AAAA;AAAA,QAJH,OAAO;AAAA,MAKd,CACD,GACH;AAAA,OAEJ;AAAA,IAGD,UACC,aAEA,6CAAC,SAAI,WAAU,6BACZ;AAAA,oBACC,6CAAC,aAAQ,WAAU,2BACjB;AAAA,oDAAC,kBAAe,OAAM,eAAc,MAAM,YAAY;AAAA,QACrD;AAAA,SACH;AAAA,MAED,gBACC,6CAAC,aAAQ,WAAU,2BACjB;AAAA,oDAAC,kBAAe,OAAM,mBAAkB,MAAM,cAAc;AAAA,QAC3D;AAAA,SACH;AAAA,OAEJ;AAAA,KAEJ;AAEJ;","names":["Link"]}

package/dist/components/portfolio-overview.js

@@ -1,9 +1,8 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import Link from "next/link";
-import { ArrowRight, BellRing, Plus } from "lucide-react";
+import { ArrowRight, BellRing } from "lucide-react";
 import { cn } from "../utils/cn.js";
-import { StatTile } from "./stat-tile.js";
 const ATTENTION_DOT = {
   destructive: "bg-destructive",
   warning: "bg-amber-500",
@@ -74,40 +73,37 @@ function PortfolioOverview({
         item.href + item.label
       )) })
     ] }),
-    stats && stats.length > 0 && /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 sm:grid-cols-4 gap-3", children: stats.map(
-      (stat) => stat.href ? /* @__PURE__ */ jsx(Link, { href: stat.href, className: "active:opacity-80", children: /* @__PURE__ */ jsx(
-        StatTile,
-        {
-          label: stat.label,
-          value: stat.value ?? "\u2014",
-          sub: stat.sub,
-          big: true,
-          className: "h-full"
+    (stats && stats.length > 0 || quickActions && quickActions.length > 0) && /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+      stats && stats.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 flex-wrap", children: stats.map((stat) => {
+        if (stat.value == null) {
+          return /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "bg-muted rounded-full px-3 py-1.5 w-20 h-7 animate-pulse inline-block"
+            },
+            stat.label
+          );
         }
-      ) }, stat.label) : /* @__PURE__ */ jsx(
-        StatTile,
+        const pill = /* @__PURE__ */ jsxs("span", { className: "inline-flex items-baseline gap-1.5 rounded-full bg-muted px-3 py-1.5 text-[13px] whitespace-nowrap", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground tabular-nums", children: stat.value }),
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: stat.label }),
+          stat.sub && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground/70", children: [
+            "\xB7 ",
+            stat.sub
+          ] })
+        ] });
+        return stat.href ? /* @__PURE__ */ jsx(Link, { href: stat.href, className: "active:opacity-80", children: pill }, stat.label) : /* @__PURE__ */ jsx("span", { children: pill }, stat.label);
+      }) }),
+      quickActions && quickActions.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 flex-wrap", children: quickActions.map((action) => /* @__PURE__ */ jsx(
+        Link,
         {
-          label: stat.label,
-          value: stat.value ?? "\u2014",
-          sub: stat.sub,
-          big: true,
-          className: "h-full"
+          href: action.href,
+          className: "inline-flex items-center rounded-full border border-border bg-card px-4 py-1.5 text-[13px] font-medium text-foreground active:opacity-80 hover:border-primary/40 transition-colors",
+          children: action.label
         },
-        stat.label
-      )
-    ) }),
-    quickActions && quickActions.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 flex-wrap", children: quickActions.map((action) => /* @__PURE__ */ jsxs(
-      Link,
-      {
-        href: action.href,
-        className: "inline-flex items-center gap-1.5 rounded-full border border-border bg-card px-4 py-2 text-[13px] font-medium text-foreground active:opacity-80 hover:border-primary/40 transition-colors",
-        children: [
-          /* @__PURE__ */ jsx(Plus, { className: "h-3.5 w-3.5 text-primary" }),
-          action.label
-        ]
-      },
-      action.href
-    )) }),
+        action.href
+      )) })
+    ] }),
     isEmpty ? emptyState : /* @__PURE__ */ jsxs("div", { className: "grid gap-6 lg:grid-cols-5", children: [
       assetsSlot && /* @__PURE__ */ jsxs("section", { className: "lg:col-span-3 space-y-3", children: [
         /* @__PURE__ */ jsx(SectionHeading, { title: "Your assets", href: assetsHref }),

package/dist/components/portfolio-overview.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/portfolio-overview.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\nimport { ArrowRight, BellRing, Plus } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\nimport { StatTile } from \"./stat-tile.js\";\n\nexport interface PortfolioAttentionItem {\n  /** e.g. \"2 offers received\" — caller composes count + label. */\n  label: string;\n  /** Short helper line, e.g. \"Accept, counter, or decline\". */\n  description?: string;\n  href: string;\n  count: number;\n  tone?: \"destructive\" | \"warning\" | \"primary\";\n}\n\nexport interface PortfolioOverviewStat {\n  label: string;\n  /** Pass null while loading. */\n  value: string | number | null;\n  sub?: string;\n  href?: string;\n}\n\nexport interface PortfolioQuickAction {\n  label: string;\n  href: string;\n}\n\nexport interface PortfolioOverviewProps {\n  /** Pending items needing action. The panel renders only when a count > 0. */\n  attention?: PortfolioAttentionItem[];\n  stats?: PortfolioOverviewStat[];\n  /** Shortcut row under the stat tiles (\"Create asset\", …). */\n  quickActions?: PortfolioQuickAction[];\n  /** Recent-assets cards, rendered by the app. */\n  assetsSlot?: React.ReactNode;\n  assetsHref?: string;\n  /** Recent-activity rows, rendered by the app. */\n  activitySlot?: React.ReactNode;\n  activityHref?: string;\n  /** First-run state; rendered instead of the columns when `isEmpty`. */\n  isEmpty?: boolean;\n  emptyState?: React.ReactNode;\n  className?: string;\n}\n\nconst ATTENTION_DOT: Record<\n  NonNullable<PortfolioAttentionItem[\"tone\"]>,\n  string\n> = {\n  destructive: \"bg-destructive\",\n  warning: \"bg-amber-500\",\n  primary: \"bg-primary\",\n};\n\nfunction SectionHeading({\n  title,\n  href,\n}: {\n  title: string;\n  href?: string;\n}) {\n  return (\n    <div className=\"flex items-center justify-between gap-3\">\n      <h2 className=\"text-sm font-semibold text-foreground\">{title}</h2>\n      {href && (\n        <Link\n          href={href}\n          className=\"inline-flex items-center gap-1 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors\"\n        >\n          View all\n          <ArrowRight className=\"h-3 w-3\" />\n        </Link>\n      )}\n    </div>\n  );\n}\n\n/**\n * Portfolio landing page layout: needs-attention panel, clickable stat tiles,\n * and recent assets/activity columns. Pure presentation — the app injects\n * counts, stats, and rendered cards.\n */\nexport function PortfolioOverview({\n  attention,\n  stats,\n  quickActions,\n  assetsSlot,\n  assetsHref,\n  activitySlot,\n  activityHref,\n  isEmpty,\n  emptyState,\n  className,\n}: PortfolioOverviewProps) {\n  const pending = (attention ?? []).filter((item) => item.count > 0);\n\n  return (\n    <div className={cn(\"space-y-6\", className)}>\n      {pending.length > 0 && (\n        <section className=\"rounded-xl border border-primary/25 bg-primary/[0.04] p-4 sm:p-5 space-y-3\">\n          <div className=\"flex items-center gap-2 text-primary\">\n            <BellRing className=\"h-4 w-4\" />\n            <h2 className=\"text-sm font-semibold\">Needs your attention</h2>\n          </div>\n          <div className=\"grid gap-2 sm:grid-cols-2\">\n            {pending.map((item) => (\n              <Link\n                key={item.href + item.label}\n                href={item.href}\n                className=\"flex items-center justify-between gap-3 rounded-lg bg-card border border-border/60 px-3.5 py-2.5 active:opacity-80 hover:border-border transition-colors\"\n              >\n                <span className=\"flex items-center gap-2.5 min-w-0\">\n                  <span\n                    className={cn(\n                      \"h-2 w-2 rounded-full shrink-0\",\n                      ATTENTION_DOT[item.tone ?? \"primary\"],\n                    )}\n                  />\n                  <span className=\"min-w-0\">\n                    <span className=\"block text-sm font-medium text-foreground truncate\">\n                      {item.label}\n                    </span>\n                    {item.description && (\n                      <span className=\"block text-xs text-muted-foreground truncate\">\n                        {item.description}\n                      </span>\n                    )}\n                  </span>\n                </span>\n                <ArrowRight className=\"h-4 w-4 text-muted-foreground shrink-0\" />\n              </Link>\n            ))}\n          </div>\n        </section>\n      )}\n\n      {stats && stats.length > 0 && (\n        <div className=\"grid grid-cols-2 sm:grid-cols-4 gap-3\">\n          {stats.map((stat) =>\n            stat.href ? (\n              <Link key={stat.label} href={stat.href} className=\"active:opacity-80\">\n                <StatTile\n                  label={stat.label}\n                  value={stat.value ?? \"—\"}\n                  sub={stat.sub}\n                  big\n                  className=\"h-full\"\n                />\n              </Link>\n            ) : (\n              <StatTile\n                key={stat.label}\n                label={stat.label}\n                value={stat.value ?? \"—\"}\n                sub={stat.sub}\n                big\n                className=\"h-full\"\n              />\n            ),\n          )}\n        </div>\n      )}\n\n      {quickActions && quickActions.length > 0 && (\n        <div className=\"flex items-center gap-2 flex-wrap\">\n          {quickActions.map((action) => (\n            <Link\n              key={action.href}\n              href={action.href}\n              className=\"inline-flex items-center gap-1.5 rounded-full border border-border bg-card px-4 py-2 text-[13px] font-medium text-foreground active:opacity-80 hover:border-primary/40 transition-colors\"\n            >\n              <Plus className=\"h-3.5 w-3.5 text-primary\" />\n              {action.label}\n            </Link>\n          ))}\n        </div>\n      )}\n\n      {isEmpty ? (\n        emptyState\n      ) : (\n        <div className=\"grid gap-6 lg:grid-cols-5\">\n          {assetsSlot && (\n            <section className=\"lg:col-span-3 space-y-3\">\n              <SectionHeading title=\"Your assets\" href={assetsHref} />\n              {assetsSlot}\n            </section>\n          )}\n          {activitySlot && (\n            <section className=\"lg:col-span-2 space-y-3\">\n              <SectionHeading title=\"Recent activity\" href={activityHref} />\n              {activitySlot}\n            </section>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/portfolio-overview.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\nimport { ArrowRight, BellRing } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\n\nexport interface PortfolioAttentionItem {\n  /** e.g. \"2 offers received\" — caller composes count + label. */\n  label: string;\n  /** Short helper line, e.g. \"Accept, counter, or decline\". */\n  description?: string;\n  href: string;\n  count: number;\n  tone?: \"destructive\" | \"warning\" | \"primary\";\n}\n\nexport interface PortfolioOverviewStat {\n  label: string;\n  /** Pass null while loading. */\n  value: string | number | null;\n  sub?: string;\n  href?: string;\n}\n\nexport interface PortfolioQuickAction {\n  label: string;\n  href: string;\n}\n\nexport interface PortfolioOverviewProps {\n  /** Pending items needing action. The panel renders only when a count > 0. */\n  attention?: PortfolioAttentionItem[];\n  stats?: PortfolioOverviewStat[];\n  /** Shortcut row under the stat tiles (\"Create asset\", …). */\n  quickActions?: PortfolioQuickAction[];\n  /** Recent-assets cards, rendered by the app. */\n  assetsSlot?: React.ReactNode;\n  assetsHref?: string;\n  /** Recent-activity rows, rendered by the app. */\n  activitySlot?: React.ReactNode;\n  activityHref?: string;\n  /** First-run state; rendered instead of the columns when `isEmpty`. */\n  isEmpty?: boolean;\n  emptyState?: React.ReactNode;\n  className?: string;\n}\n\nconst ATTENTION_DOT: Record<\n  NonNullable<PortfolioAttentionItem[\"tone\"]>,\n  string\n> = {\n  destructive: \"bg-destructive\",\n  warning: \"bg-amber-500\",\n  primary: \"bg-primary\",\n};\n\nfunction SectionHeading({\n  title,\n  href,\n}: {\n  title: string;\n  href?: string;\n}) {\n  return (\n    <div className=\"flex items-center justify-between gap-3\">\n      <h2 className=\"text-sm font-semibold text-foreground\">{title}</h2>\n      {href && (\n        <Link\n          href={href}\n          className=\"inline-flex items-center gap-1 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors\"\n        >\n          View all\n          <ArrowRight className=\"h-3 w-3\" />\n        </Link>\n      )}\n    </div>\n  );\n}\n\n/**\n * Portfolio landing page layout: needs-attention panel, clickable stat tiles,\n * and recent assets/activity columns. Pure presentation — the app injects\n * counts, stats, and rendered cards.\n */\nexport function PortfolioOverview({\n  attention,\n  stats,\n  quickActions,\n  assetsSlot,\n  assetsHref,\n  activitySlot,\n  activityHref,\n  isEmpty,\n  emptyState,\n  className,\n}: PortfolioOverviewProps) {\n  const pending = (attention ?? []).filter((item) => item.count > 0);\n\n  return (\n    <div className={cn(\"space-y-6\", className)}>\n      {pending.length > 0 && (\n        <section className=\"rounded-xl border border-primary/25 bg-primary/[0.04] p-4 sm:p-5 space-y-3\">\n          <div className=\"flex items-center gap-2 text-primary\">\n            <BellRing className=\"h-4 w-4\" />\n            <h2 className=\"text-sm font-semibold\">Needs your attention</h2>\n          </div>\n          <div className=\"grid gap-2 sm:grid-cols-2\">\n            {pending.map((item) => (\n              <Link\n                key={item.href + item.label}\n                href={item.href}\n                className=\"flex items-center justify-between gap-3 rounded-lg bg-card border border-border/60 px-3.5 py-2.5 active:opacity-80 hover:border-border transition-colors\"\n              >\n                <span className=\"flex items-center gap-2.5 min-w-0\">\n                  <span\n                    className={cn(\n                      \"h-2 w-2 rounded-full shrink-0\",\n                      ATTENTION_DOT[item.tone ?? \"primary\"],\n                    )}\n                  />\n                  <span className=\"min-w-0\">\n                    <span className=\"block text-sm font-medium text-foreground truncate\">\n                      {item.label}\n                    </span>\n                    {item.description && (\n                      <span className=\"block text-xs text-muted-foreground truncate\">\n                        {item.description}\n                      </span>\n                    )}\n                  </span>\n                </span>\n                <ArrowRight className=\"h-4 w-4 text-muted-foreground shrink-0\" />\n              </Link>\n            ))}\n          </div>\n        </section>\n      )}\n\n      {((stats && stats.length > 0) || (quickActions && quickActions.length > 0)) && (\n        <div className=\"space-y-3\">\n          {stats && stats.length > 0 && (\n            <div className=\"flex items-center gap-2 flex-wrap\">\n              {stats.map((stat) => {\n                if (stat.value == null) {\n                  return (\n                    <span\n                      key={stat.label}\n                      className=\"bg-muted rounded-full px-3 py-1.5 w-20 h-7 animate-pulse inline-block\"\n                    />\n                  );\n                }\n                const pill = (\n                  <span className=\"inline-flex items-baseline gap-1.5 rounded-full bg-muted px-3 py-1.5 text-[13px] whitespace-nowrap\">\n                    <span className=\"font-semibold text-foreground tabular-nums\">\n                      {stat.value}\n                    </span>\n                    <span className=\"text-muted-foreground\">{stat.label}</span>\n                    {stat.sub && (\n                      <span className=\"text-muted-foreground/70\">\n                        · {stat.sub}\n                      </span>\n                    )}\n                  </span>\n                );\n                return stat.href ? (\n                  <Link key={stat.label} href={stat.href} className=\"active:opacity-80\">\n                    {pill}\n                  </Link>\n                ) : (\n                  <span key={stat.label}>{pill}</span>\n                );\n              })}\n            </div>\n          )}\n\n          {quickActions && quickActions.length > 0 && (\n            <div className=\"flex items-center gap-2 flex-wrap\">\n              {quickActions.map((action) => (\n                <Link\n                  key={action.href}\n                  href={action.href}\n                  className=\"inline-flex items-center rounded-full border border-border bg-card px-4 py-1.5 text-[13px] font-medium text-foreground active:opacity-80 hover:border-primary/40 transition-colors\"\n                >\n                  {action.label}\n                </Link>\n              ))}\n            </div>\n          )}\n        </div>\n      )}\n\n      {isEmpty ? (\n        emptyState\n      ) : (\n        <div className=\"grid gap-6 lg:grid-cols-5\">\n          {assetsSlot && (\n            <section className=\"lg:col-span-3 space-y-3\">\n              <SectionHeading title=\"Your assets\" href={assetsHref} />\n              {assetsSlot}\n            </section>\n          )}\n          {activitySlot && (\n            <section className=\"lg:col-span-2 space-y-3\">\n              <SectionHeading title=\"Recent activity\" href={activityHref} />\n              {activitySlot}\n            </section>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/medialane.css

@@ -27,9 +27,10 @@
 }
 
 /* ── Display face ─────────────────────────────────────────────────────── */
-/* Headings render in the brand display face (Urbanist). Apps set
-   --font-display via next/font; unset, headings inherit the body face. */
-h1, h2, h3 {
+/* Only the page main header renders in the brand display face (Urbanist);
+   everything else stays on the body face. Apps set --font-display via
+   next/font; unset, h1 inherits the body face. */
+h1 {
   font-family: var(--font-display, inherit);
 }
 

package/package.json

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