@medialane/ui 0.57.2 → 0.59.0

package/dist/components/listing-card.cjs

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

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

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

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

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

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

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

package/dist/components/listing-card.js

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

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

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

package/dist/components/portfolio-header.cjs

@@ -0,0 +1,101 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var portfolio_header_exports = {};
+__export(portfolio_header_exports, {
+  PortfolioHeader: () => PortfolioHeader
+});
+module.exports = __toCommonJS(portfolio_header_exports);
+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_address_display = require("./address-display.js");
+function StatChip({ stat }) {
+  if (stat.value == null) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "bg-muted rounded-full px-3 py-1 w-20 h-6 animate-pulse inline-block" });
+  }
+  const body = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "span",
+    {
+      className: (0, import_cn.cn)(
+        "inline-flex items-baseline gap-1.5 rounded-full px-3 py-1 text-sm font-medium",
+        stat.highlight ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tabular-nums font-semibold text-foreground/90", children: stat.value }),
+        stat.label
+      ]
+    }
+  );
+  if (!stat.href) return body;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.default, { href: stat.href, className: "active:opacity-80", children: body });
+}
+function PortfolioHeader({
+  address,
+  stats,
+  score,
+  className
+}) {
+  const scoreChip = score && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2.5 rounded-xl border border-border bg-card px-3 py-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: "h-8 w-8 rounded-lg shrink-0 flex items-center justify-center text-sm font-black text-white",
+        style: { backgroundColor: score.badgeColor },
+        children: score.level
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0 leading-tight", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xs font-bold text-foreground truncate", children: score.levelName }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "text-[11px] text-muted-foreground tabular-nums", children: [
+        score.totalXp.toLocaleString(),
+        " XP"
+      ] })
+    ] })
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_cn.cn)("space-y-3", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-start justify-between gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-1.5 min-w-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2 text-primary", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Briefcase, { className: "h-4 w-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-xs font-semibold uppercase tracking-wider", children: "Portfolio" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_address_display.AddressDisplay, { address, chars: 6, className: "text-sm" })
+      ] }),
+      score?.href ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.default, { href: score.href, className: "shrink-0 active:opacity-80", children: scoreChip }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "shrink-0", children: scoreChip })
+    ] }),
+    stats && stats.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center gap-2 flex-wrap", children: stats.map((stat, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatChip, { stat }, i)) })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PortfolioHeader
+});
+//# sourceMappingURL=portfolio-header.cjs.map

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

@@ -0,0 +1 @@
+{"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 PortfolioHeaderStat {\n  label: string;\n  /** Pass null while loading — renders a pulse placeholder. */\n  value: string | number | null;\n  href?: string;\n  /** Primary-tinted chip for counts that need action (e.g. offers received). */\n  highlight?: boolean;\n}\n\nexport interface PortfolioHeaderScore {\n  level: number;\n  levelName: string;\n  badgeColor: string;\n  totalXp: number;\n  /** Where the score chip links (\"/rewards\"). */\n  href?: string;\n}\n\nexport interface PortfolioHeaderProps {\n  address: string;\n  stats?: PortfolioHeaderStat[];\n  score?: PortfolioHeaderScore | null;\n  className?: string;\n}\n\nfunction StatChip({ stat }: { stat: PortfolioHeaderStat }) {\n  if (stat.value == null) {\n    return (\n      <span className=\"bg-muted rounded-full px-3 py-1 w-20 h-6 animate-pulse inline-block\" />\n    );\n  }\n  const body = (\n    <span\n      className={cn(\n        \"inline-flex items-baseline gap-1.5 rounded-full px-3 py-1 text-sm font-medium\",\n        stat.highlight\n          ? \"bg-primary/10 text-primary\"\n          : \"bg-muted text-muted-foreground\",\n      )}\n    >\n      <span className=\"tabular-nums font-semibold text-foreground/90\">\n        {stat.value}\n      </span>\n      {stat.label}\n    </span>\n  );\n  if (!stat.href) return body;\n  return (\n    <Link href={stat.href} className=\"active:opacity-80\">\n      {body}\n    </Link>\n  );\n}\n\n/**\n * Compact single-block portfolio header: eyebrow + address on the left, a\n * level/XP score chip on the right, and a row of stat chips beneath. Replaces\n * the stacked identity / stat-pills / ScoreSummaryCard blocks.\n */\nexport function PortfolioHeader({\n  address,\n  stats,\n  score,\n  className,\n}: PortfolioHeaderProps) {\n  const scoreChip = score && (\n    <div className=\"flex items-center gap-2.5 rounded-xl border border-border bg-card px-3 py-2\">\n      <div\n        className=\"h-8 w-8 rounded-lg shrink-0 flex items-center justify-center text-sm font-black text-white\"\n        style={{ backgroundColor: score.badgeColor }}\n      >\n        {score.level}\n      </div>\n      <div className=\"min-w-0 leading-tight\">\n        <p className=\"text-xs font-bold text-foreground 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  );\n\n  return (\n    <div className={cn(\"space-y-3\", className)}>\n      <div className=\"flex items-start justify-between gap-4\">\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      {stats && stats.length > 0 && (\n        <div className=\"flex items-center gap-2 flex-wrap\">\n          {stats.map((stat, i) => (\n            <StatChip key={i} stat={stat} />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmCM;AAjCN,kBAAiB;AACjB,0BAA0B;AAC1B,gBAAmB;AACnB,6BAA+B;AA2B/B,SAAS,SAAS,EAAE,KAAK,GAAkC;AACzD,MAAI,KAAK,SAAS,MAAM;AACtB,WACE,4CAAC,UAAK,WAAU,uEAAsE;AAAA,EAE1F;AACA,QAAM,OACJ;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,QACT;AAAA,QACA,KAAK,YACD,+BACA;AAAA,MACN;AAAA,MAEA;AAAA,oDAAC,UAAK,WAAU,iDACb,eAAK,OACR;AAAA,QACC,KAAK;AAAA;AAAA;AAAA,EACR;AAEF,MAAI,CAAC,KAAK,KAAM,QAAO;AACvB,SACE,4CAAC,YAAAA,SAAA,EAAK,MAAM,KAAK,MAAM,WAAU,qBAC9B,gBACH;AAEJ;AAOO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAyB;AACvB,QAAM,YAAY,SAChB,6CAAC,SAAI,WAAU,+EACb;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO,EAAE,iBAAiB,MAAM,WAAW;AAAA,QAE1C,gBAAM;AAAA;AAAA,IACT;AAAA,IACA,6CAAC,SAAI,WAAU,yBACb;AAAA,kDAAC,OAAE,WAAU,8CACV,gBAAM,WACT;AAAA,MACA,6CAAC,OAAE,WAAU,kDACV;AAAA,cAAM,QAAQ,eAAe;AAAA,QAAE;AAAA,SAClC;AAAA,OACF;AAAA,KACF;AAGF,SACE,6CAAC,SAAI,eAAW,cAAG,aAAa,SAAS,GACvC;AAAA,iDAAC,SAAI,WAAU,0CACb;AAAA,mDAAC,SAAI,WAAU,uBACb;AAAA,qDAAC,SAAI,WAAU,wCACb;AAAA,sDAAC,iCAAU,WAAU,WAAU;AAAA,UAC/B,4CAAC,UAAK,WAAU,kDAAiD,uBAEjE;AAAA,WACF;AAAA,QACA,4CAAC,yCAAe,SAAkB,OAAO,GAAG,WAAU,WAAU;AAAA,SAClE;AAAA,MACC,OAAO,OACN,4CAAC,YAAAA,SAAA,EAAK,MAAM,MAAM,MAAM,WAAU,8BAC/B,qBACH,IAEA,4CAAC,SAAI,WAAU,YAAY,qBAAU;AAAA,OAEzC;AAAA,IACC,SAAS,MAAM,SAAS,KACvB,4CAAC,SAAI,WAAU,qCACZ,gBAAM,IAAI,CAAC,MAAM,MAChB,4CAAC,YAAiB,QAAH,CAAe,CAC/B,GACH;AAAA,KAEJ;AAEJ;","names":["Link"]}

package/dist/components/portfolio-header.d.cts

@@ -0,0 +1,32 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface PortfolioHeaderStat {
+    label: string;
+    /** Pass null while loading — renders a pulse placeholder. */
+    value: string | number | null;
+    href?: string;
+    /** Primary-tinted chip for counts that need action (e.g. offers received). */
+    highlight?: boolean;
+}
+interface PortfolioHeaderScore {
+    level: number;
+    levelName: string;
+    badgeColor: string;
+    totalXp: number;
+    /** Where the score chip links ("/rewards"). */
+    href?: string;
+}
+interface PortfolioHeaderProps {
+    address: string;
+    stats?: PortfolioHeaderStat[];
+    score?: PortfolioHeaderScore | null;
+    className?: string;
+}
+/**
+ * Compact single-block portfolio header: eyebrow + address on the left, a
+ * level/XP score chip on the right, and a row of stat chips beneath. Replaces
+ * the stacked identity / stat-pills / ScoreSummaryCard blocks.
+ */
+declare function PortfolioHeader({ address, stats, score, className, }: PortfolioHeaderProps): react_jsx_runtime.JSX.Element;
+
+export { PortfolioHeader, type PortfolioHeaderProps, type PortfolioHeaderScore, type PortfolioHeaderStat };

package/dist/components/portfolio-header.d.ts

@@ -0,0 +1,32 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface PortfolioHeaderStat {
+    label: string;
+    /** Pass null while loading — renders a pulse placeholder. */
+    value: string | number | null;
+    href?: string;
+    /** Primary-tinted chip for counts that need action (e.g. offers received). */
+    highlight?: boolean;
+}
+interface PortfolioHeaderScore {
+    level: number;
+    levelName: string;
+    badgeColor: string;
+    totalXp: number;
+    /** Where the score chip links ("/rewards"). */
+    href?: string;
+}
+interface PortfolioHeaderProps {
+    address: string;
+    stats?: PortfolioHeaderStat[];
+    score?: PortfolioHeaderScore | null;
+    className?: string;
+}
+/**
+ * Compact single-block portfolio header: eyebrow + address on the left, a
+ * level/XP score chip on the right, and a row of stat chips beneath. Replaces
+ * the stacked identity / stat-pills / ScoreSummaryCard blocks.
+ */
+declare function PortfolioHeader({ address, stats, score, className, }: PortfolioHeaderProps): react_jsx_runtime.JSX.Element;
+
+export { PortfolioHeader, type PortfolioHeaderProps, type PortfolioHeaderScore, type PortfolioHeaderStat };

package/dist/components/portfolio-header.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import { Briefcase } from "lucide-react";
+import { cn } from "../utils/cn.js";
+import { AddressDisplay } from "./address-display.js";
+function StatChip({ stat }) {
+  if (stat.value == null) {
+    return /* @__PURE__ */ jsx("span", { className: "bg-muted rounded-full px-3 py-1 w-20 h-6 animate-pulse inline-block" });
+  }
+  const body = /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-baseline gap-1.5 rounded-full px-3 py-1 text-sm font-medium",
+        stat.highlight ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "tabular-nums font-semibold text-foreground/90", children: stat.value }),
+        stat.label
+      ]
+    }
+  );
+  if (!stat.href) return body;
+  return /* @__PURE__ */ jsx(Link, { href: stat.href, className: "active:opacity-80", children: body });
+}
+function PortfolioHeader({
+  address,
+  stats,
+  score,
+  className
+}) {
+  const scoreChip = score && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 rounded-xl border border-border bg-card px-3 py-2", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "h-8 w-8 rounded-lg shrink-0 flex items-center justify-center text-sm font-black text-white",
+        style: { backgroundColor: score.badgeColor },
+        children: score.level
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 leading-tight", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-xs font-bold text-foreground truncate", children: score.levelName }),
+      /* @__PURE__ */ jsxs("p", { className: "text-[11px] text-muted-foreground tabular-nums", children: [
+        score.totalXp.toLocaleString(),
+        " XP"
+      ] })
+    ] })
+  ] });
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-3", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1.5 min-w-0", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-primary", children: [
+          /* @__PURE__ */ jsx(Briefcase, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold uppercase tracking-wider", children: "Portfolio" })
+        ] }),
+        /* @__PURE__ */ jsx(AddressDisplay, { address, chars: 6, className: "text-sm" })
+      ] }),
+      score?.href ? /* @__PURE__ */ jsx(Link, { href: score.href, className: "shrink-0 active:opacity-80", children: scoreChip }) : /* @__PURE__ */ jsx("div", { className: "shrink-0", children: scoreChip })
+    ] }),
+    stats && stats.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 flex-wrap", children: stats.map((stat, i) => /* @__PURE__ */ jsx(StatChip, { stat }, i)) })
+  ] });
+}
+export {
+  PortfolioHeader
+};
+//# sourceMappingURL=portfolio-header.js.map

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

@@ -0,0 +1 @@
+{"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 PortfolioHeaderStat {\n  label: string;\n  /** Pass null while loading — renders a pulse placeholder. */\n  value: string | number | null;\n  href?: string;\n  /** Primary-tinted chip for counts that need action (e.g. offers received). */\n  highlight?: boolean;\n}\n\nexport interface PortfolioHeaderScore {\n  level: number;\n  levelName: string;\n  badgeColor: string;\n  totalXp: number;\n  /** Where the score chip links (\"/rewards\"). */\n  href?: string;\n}\n\nexport interface PortfolioHeaderProps {\n  address: string;\n  stats?: PortfolioHeaderStat[];\n  score?: PortfolioHeaderScore | null;\n  className?: string;\n}\n\nfunction StatChip({ stat }: { stat: PortfolioHeaderStat }) {\n  if (stat.value == null) {\n    return (\n      <span className=\"bg-muted rounded-full px-3 py-1 w-20 h-6 animate-pulse inline-block\" />\n    );\n  }\n  const body = (\n    <span\n      className={cn(\n        \"inline-flex items-baseline gap-1.5 rounded-full px-3 py-1 text-sm font-medium\",\n        stat.highlight\n          ? \"bg-primary/10 text-primary\"\n          : \"bg-muted text-muted-foreground\",\n      )}\n    >\n      <span className=\"tabular-nums font-semibold text-foreground/90\">\n        {stat.value}\n      </span>\n      {stat.label}\n    </span>\n  );\n  if (!stat.href) return body;\n  return (\n    <Link href={stat.href} className=\"active:opacity-80\">\n      {body}\n    </Link>\n  );\n}\n\n/**\n * Compact single-block portfolio header: eyebrow + address on the left, a\n * level/XP score chip on the right, and a row of stat chips beneath. Replaces\n * the stacked identity / stat-pills / ScoreSummaryCard blocks.\n */\nexport function PortfolioHeader({\n  address,\n  stats,\n  score,\n  className,\n}: PortfolioHeaderProps) {\n  const scoreChip = score && (\n    <div className=\"flex items-center gap-2.5 rounded-xl border border-border bg-card px-3 py-2\">\n      <div\n        className=\"h-8 w-8 rounded-lg shrink-0 flex items-center justify-center text-sm font-black text-white\"\n        style={{ backgroundColor: score.badgeColor }}\n      >\n        {score.level}\n      </div>\n      <div className=\"min-w-0 leading-tight\">\n        <p className=\"text-xs font-bold text-foreground 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  );\n\n  return (\n    <div className={cn(\"space-y-3\", className)}>\n      <div className=\"flex items-start justify-between gap-4\">\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      {stats && stats.length > 0 && (\n        <div className=\"flex items-center gap-2 flex-wrap\">\n          {stats.map((stat, i) => (\n            <StatChip key={i} stat={stat} />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAmCM,cAIF,YAJE;AAjCN,OAAO,UAAU;AACjB,SAAS,iBAAiB;AAC1B,SAAS,UAAU;AACnB,SAAS,sBAAsB;AA2B/B,SAAS,SAAS,EAAE,KAAK,GAAkC;AACzD,MAAI,KAAK,SAAS,MAAM;AACtB,WACE,oBAAC,UAAK,WAAU,uEAAsE;AAAA,EAE1F;AACA,QAAM,OACJ;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,KAAK,YACD,+BACA;AAAA,MACN;AAAA,MAEA;AAAA,4BAAC,UAAK,WAAU,iDACb,eAAK,OACR;AAAA,QACC,KAAK;AAAA;AAAA;AAAA,EACR;AAEF,MAAI,CAAC,KAAK,KAAM,QAAO;AACvB,SACE,oBAAC,QAAK,MAAM,KAAK,MAAM,WAAU,qBAC9B,gBACH;AAEJ;AAOO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAyB;AACvB,QAAM,YAAY,SAChB,qBAAC,SAAI,WAAU,+EACb;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO,EAAE,iBAAiB,MAAM,WAAW;AAAA,QAE1C,gBAAM;AAAA;AAAA,IACT;AAAA,IACA,qBAAC,SAAI,WAAU,yBACb;AAAA,0BAAC,OAAE,WAAU,8CACV,gBAAM,WACT;AAAA,MACA,qBAAC,OAAE,WAAU,kDACV;AAAA,cAAM,QAAQ,eAAe;AAAA,QAAE;AAAA,SAClC;AAAA,OACF;AAAA,KACF;AAGF,SACE,qBAAC,SAAI,WAAW,GAAG,aAAa,SAAS,GACvC;AAAA,yBAAC,SAAI,WAAU,0CACb;AAAA,2BAAC,SAAI,WAAU,uBACb;AAAA,6BAAC,SAAI,WAAU,wCACb;AAAA,8BAAC,aAAU,WAAU,WAAU;AAAA,UAC/B,oBAAC,UAAK,WAAU,kDAAiD,uBAEjE;AAAA,WACF;AAAA,QACA,oBAAC,kBAAe,SAAkB,OAAO,GAAG,WAAU,WAAU;AAAA,SAClE;AAAA,MACC,OAAO,OACN,oBAAC,QAAK,MAAM,MAAM,MAAM,WAAU,8BAC/B,qBACH,IAEA,oBAAC,SAAI,WAAU,YAAY,qBAAU;AAAA,OAEzC;AAAA,IACC,SAAS,MAAM,SAAS,KACvB,oBAAC,SAAI,WAAU,qCACZ,gBAAM,IAAI,CAAC,MAAM,MAChB,oBAAC,YAAiB,QAAH,CAAe,CAC/B,GACH;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/components/portfolio-nav.cjs

@@ -0,0 +1,128 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var portfolio_nav_exports = {};
+__export(portfolio_nav_exports, {
+  PortfolioNav: () => PortfolioNav
+});
+module.exports = __toCommonJS(portfolio_nav_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_link = __toESM(require("next/link"), 1);
+var import_cn = require("../utils/cn.js");
+const BADGE_VARIANT_CLASS = {
+  destructive: "bg-destructive text-destructive-foreground",
+  primary: "bg-primary text-primary-foreground",
+  warning: "bg-amber-500 text-white"
+};
+function CountBadge({
+  count,
+  variant
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      className: (0, import_cn.cn)(
+        "h-4 min-w-4 rounded-full text-[10px] font-bold flex items-center justify-center px-1",
+        BADGE_VARIANT_CLASS[variant ?? "primary"]
+      ),
+      children: count
+    }
+  );
+}
+function matches(pathname, href) {
+  return pathname === href || pathname.startsWith(href + "/");
+}
+function PortfolioNav({
+  sections,
+  pathname,
+  badgeCounts = {},
+  className
+}) {
+  const count = (badge) => badge ? badgeCounts[badge.key] ?? 0 : 0;
+  let activeSection = null;
+  let bestLen = -1;
+  for (const section of sections) {
+    const hrefs = [section.href, ...(section.children ?? []).map((c) => c.href)];
+    for (const href of hrefs) {
+      if (matches(pathname, href) && href.length > bestLen) {
+        bestLen = href.length;
+        activeSection = section;
+      }
+    }
+  }
+  const edgeBleed = "overflow-x-auto scrollbar-hide -mx-4 px-4 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", { className: (0, import_cn.cn)(edgeBleed, "border-b border-border/60"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center min-w-max", children: sections.map((section) => {
+      const active = section === activeSection;
+      const rollup = (section.children ?? []).reduce(
+        (sum, child) => sum + count(child.badge),
+        0
+      );
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_link.default,
+        {
+          href: section.href,
+          className: (0, import_cn.cn)(
+            "relative flex items-center gap-1.5 px-3 py-2.5 text-sm whitespace-nowrap transition-colors shrink-0 border-b-2 min-h-10",
+            active ? "border-primary text-foreground font-medium" : "border-transparent text-muted-foreground hover:text-foreground"
+          ),
+          children: [
+            section.label,
+            rollup > 0 && !active && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CountBadge, { count: rollup, variant: "destructive" })
+          ]
+        },
+        section.href
+      );
+    }) }) }),
+    activeSection?.children && activeSection.children.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", { className: (0, import_cn.cn)(edgeBleed, "pt-3"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center min-w-max gap-1.5", children: activeSection.children.map((child) => {
+      const active = matches(pathname, child.href);
+      const childCount = count(child.badge);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_link.default,
+        {
+          href: child.href,
+          className: (0, import_cn.cn)(
+            "flex items-center gap-1.5 rounded-full px-3.5 py-1.5 text-[13px] whitespace-nowrap transition-colors shrink-0",
+            active ? "bg-primary text-primary-foreground font-medium" : "bg-muted text-muted-foreground hover:text-foreground"
+          ),
+          children: [
+            child.label,
+            child.badge && childCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CountBadge, { count: childCount, variant: child.badge.variant })
+          ]
+        },
+        child.href
+      );
+    }) }) })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PortfolioNav
+});
+//# sourceMappingURL=portfolio-nav.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/portfolio-nav.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\nimport { cn } from \"../utils/cn.js\";\n\nexport type PortfolioBadgeVariant = \"destructive\" | \"primary\" | \"warning\";\n\nexport interface PortfolioNavChild {\n  label: string;\n  href: string;\n  /** Optional count badge. `key` indexes `badgeCounts`; `variant` sets color. */\n  badge?: { key: string; variant?: PortfolioBadgeVariant };\n}\n\nexport interface PortfolioNavSection {\n  label: string;\n  /** Where the top-level tab links. For sections with children this is the first child. */\n  href: string;\n  /** Inner segments rendered as a pill row when the section is active. */\n  children?: PortfolioNavChild[];\n}\n\nexport interface PortfolioNavProps {\n  sections: PortfolioNavSection[];\n  /** Current pathname — caller passes `usePathname()`. */\n  pathname: string;\n  /** Badge counts keyed by `child.badge.key`. A badge renders only when > 0. */\n  badgeCounts?: Record<string, number>;\n  className?: string;\n}\n\nconst BADGE_VARIANT_CLASS: Record<PortfolioBadgeVariant, string> = {\n  destructive: \"bg-destructive text-destructive-foreground\",\n  primary: \"bg-primary text-primary-foreground\",\n  warning: \"bg-amber-500 text-white\",\n};\n\nfunction CountBadge({\n  count,\n  variant,\n}: {\n  count: number;\n  variant?: PortfolioBadgeVariant;\n}) {\n  return (\n    <span\n      className={cn(\n        \"h-4 min-w-4 rounded-full text-[10px] font-bold flex items-center justify-center px-1\",\n        BADGE_VARIANT_CLASS[variant ?? \"primary\"],\n      )}\n    >\n      {count}\n    </span>\n  );\n}\n\nfunction matches(pathname: string, href: string): boolean {\n  return pathname === href || pathname.startsWith(href + \"/\");\n}\n\n/**\n * Two-level portfolio navigation: top-level underline tabs + a segmented pill\n * row when the active section has children. The active section is resolved by\n * the longest href match across section hrefs and child hrefs, so a root\n * \"Overview\" section (`/portfolio`) doesn't swallow every route.\n */\nexport function PortfolioNav({\n  sections,\n  pathname,\n  badgeCounts = {},\n  className,\n}: PortfolioNavProps) {\n  const count = (badge?: { key: string }) =>\n    badge ? (badgeCounts[badge.key] ?? 0) : 0;\n\n  // Longest-match resolution of the active section.\n  let activeSection: PortfolioNavSection | null = null;\n  let bestLen = -1;\n  for (const section of sections) {\n    const hrefs = [section.href, ...(section.children ?? []).map((c) => c.href)];\n    for (const href of hrefs) {\n      if (matches(pathname, href) && href.length > bestLen) {\n        bestLen = href.length;\n        activeSection = section;\n      }\n    }\n  }\n\n  const edgeBleed =\n    \"overflow-x-auto scrollbar-hide -mx-4 px-4 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8\";\n\n  return (\n    <div className={className}>\n      <nav className={cn(edgeBleed, \"border-b border-border/60\")}>\n        <div className=\"flex items-center min-w-max\">\n          {sections.map((section) => {\n            const active = section === activeSection;\n            // Rolled-up pending count across the section's children.\n            const rollup = (section.children ?? []).reduce(\n              (sum, child) => sum + count(child.badge),\n              0,\n            );\n            return (\n              <Link\n                key={section.href}\n                href={section.href}\n                className={cn(\n                  \"relative flex items-center gap-1.5 px-3 py-2.5 text-sm whitespace-nowrap transition-colors shrink-0 border-b-2 min-h-10\",\n                  active\n                    ? \"border-primary text-foreground font-medium\"\n                    : \"border-transparent text-muted-foreground hover:text-foreground\",\n                )}\n              >\n                {section.label}\n                {rollup > 0 && !active && (\n                  <CountBadge count={rollup} variant=\"destructive\" />\n                )}\n              </Link>\n            );\n          })}\n        </div>\n      </nav>\n      {activeSection?.children && activeSection.children.length > 0 && (\n        <nav className={cn(edgeBleed, \"pt-3\")}>\n          <div className=\"flex items-center min-w-max gap-1.5\">\n            {activeSection.children.map((child) => {\n              const active = matches(pathname, child.href);\n              const childCount = count(child.badge);\n              return (\n                <Link\n                  key={child.href}\n                  href={child.href}\n                  className={cn(\n                    \"flex items-center gap-1.5 rounded-full px-3.5 py-1.5 text-[13px] whitespace-nowrap transition-colors shrink-0\",\n                    active\n                      ? \"bg-primary text-primary-foreground font-medium\"\n                      : \"bg-muted text-muted-foreground hover:text-foreground\",\n                  )}\n                >\n                  {child.label}\n                  {child.badge && childCount > 0 && (\n                    <CountBadge count={childCount} variant={child.badge.variant} />\n                  )}\n                </Link>\n              );\n            })}\n          </div>\n        </nav>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA6CI;AA3CJ,kBAAiB;AACjB,gBAAmB;AA4BnB,MAAM,sBAA6D;AAAA,EACjE,aAAa;AAAA,EACb,SAAS;AAAA,EACT,SAAS;AACX;AAEA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AACF,GAGG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,QACT;AAAA,QACA,oBAAoB,WAAW,SAAS;AAAA,MAC1C;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEA,SAAS,QAAQ,UAAkB,MAAuB;AACxD,SAAO,aAAa,QAAQ,SAAS,WAAW,OAAO,GAAG;AAC5D;AAQO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,cAAc,CAAC;AAAA,EACf;AACF,GAAsB;AACpB,QAAM,QAAQ,CAAC,UACb,QAAS,YAAY,MAAM,GAAG,KAAK,IAAK;AAG1C,MAAI,gBAA4C;AAChD,MAAI,UAAU;AACd,aAAW,WAAW,UAAU;AAC9B,UAAM,QAAQ,CAAC,QAAQ,MAAM,IAAI,QAAQ,YAAY,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC;AAC3E,eAAW,QAAQ,OAAO;AACxB,UAAI,QAAQ,UAAU,IAAI,KAAK,KAAK,SAAS,SAAS;AACpD,kBAAU,KAAK;AACf,wBAAgB;AAAA,MAClB;AAAA,IACF;AAAA,EACF;AAEA,QAAM,YACJ;AAEF,SACE,6CAAC,SAAI,WACH;AAAA,gDAAC,SAAI,eAAW,cAAG,WAAW,2BAA2B,GACvD,sDAAC,SAAI,WAAU,+BACZ,mBAAS,IAAI,CAAC,YAAY;AACzB,YAAM,SAAS,YAAY;AAE3B,YAAM,UAAU,QAAQ,YAAY,CAAC,GAAG;AAAA,QACtC,CAAC,KAAK,UAAU,MAAM,MAAM,MAAM,KAAK;AAAA,QACvC;AAAA,MACF;AACA,aACE;AAAA,QAAC,YAAAA;AAAA,QAAA;AAAA,UAEC,MAAM,QAAQ;AAAA,UACd,eAAW;AAAA,YACT;AAAA,YACA,SACI,+CACA;AAAA,UACN;AAAA,UAEC;AAAA,oBAAQ;AAAA,YACR,SAAS,KAAK,CAAC,UACd,4CAAC,cAAW,OAAO,QAAQ,SAAQ,eAAc;AAAA;AAAA;AAAA,QAX9C,QAAQ;AAAA,MAaf;AAAA,IAEJ,CAAC,GACH,GACF;AAAA,IACC,eAAe,YAAY,cAAc,SAAS,SAAS,KAC1D,4CAAC,SAAI,eAAW,cAAG,WAAW,MAAM,GAClC,sDAAC,SAAI,WAAU,uCACZ,wBAAc,SAAS,IAAI,CAAC,UAAU;AACrC,YAAM,SAAS,QAAQ,UAAU,MAAM,IAAI;AAC3C,YAAM,aAAa,MAAM,MAAM,KAAK;AACpC,aACE;AAAA,QAAC,YAAAA;AAAA,QAAA;AAAA,UAEC,MAAM,MAAM;AAAA,UACZ,eAAW;AAAA,YACT;AAAA,YACA,SACI,mDACA;AAAA,UACN;AAAA,UAEC;AAAA,kBAAM;AAAA,YACN,MAAM,SAAS,aAAa,KAC3B,4CAAC,cAAW,OAAO,YAAY,SAAS,MAAM,MAAM,SAAS;AAAA;AAAA;AAAA,QAX1D,MAAM;AAAA,MAab;AAAA,IAEJ,CAAC,GACH,GACF;AAAA,KAEJ;AAEJ;","names":["Link"]}