@medialane/ui 0.83.0 → 0.84.0

package/dist/components/animated-token-media.cjs

@@ -0,0 +1,100 @@
+"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 animated_token_media_exports = {};
+__export(animated_token_media_exports, {
+  AnimatedTokenMedia: () => AnimatedTokenMedia
+});
+module.exports = __toCommonJS(animated_token_media_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_image = __toESM(require("next/image"), 1);
+var import_use_intersection_active = require("../utils/use-intersection-active.js");
+function AnimatedTokenMedia({
+  image,
+  alt,
+  animationUrl,
+  live = false,
+  mode = "fill",
+  className,
+  sizes,
+  priority,
+  imgError: imgErrorProp,
+  onImageError,
+  fallback
+}) {
+  const [internalError, setInternalError] = (0, import_react.useState)(false);
+  const imgError = imgErrorProp ?? internalError;
+  const handleImageError = () => {
+    setInternalError(true);
+    onImageError?.();
+  };
+  const [ref, isVisible] = (0, import_use_intersection_active.useIntersectionActive)();
+  const showLive = live && !!animationUrl && isVisible;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, className: mode === "fill" ? "absolute inset-0" : "w-full", children: showLive ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "iframe",
+    {
+      src: animationUrl,
+      title: alt,
+      sandbox: "allow-scripts",
+      loading: "lazy",
+      className: mode === "fill" ? "absolute inset-0 w-full h-full border-0" : "w-full aspect-square border-0"
+    }
+  ) : image && !imgError ? mode === "fill" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_image.default,
+    {
+      src: image,
+      alt,
+      fill: true,
+      unoptimized: true,
+      sizes,
+      priority,
+      className,
+      onError: handleImageError
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_image.default,
+    {
+      src: image,
+      alt,
+      width: 0,
+      height: 0,
+      sizes,
+      priority,
+      crossOrigin: "anonymous",
+      className: className ?? "w-full h-auto",
+      onError: handleImageError
+    }
+  ) : fallback ?? null });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AnimatedTokenMedia
+});
+//# sourceMappingURL=animated-token-media.cjs.map

package/dist/components/animated-token-media.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/animated-token-media.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport Image from \"next/image\";\nimport { useIntersectionActive } from \"../utils/use-intersection-active.js\";\n\nexport interface AnimatedTokenMediaProps {\n  /** Resolved (already ipfsToHttp'd, if needed) static image URL. */\n  image: string | null;\n  alt: string;\n  /** Resolved animation_url (data:/http(s)/ipfs-resolved) — the live on-chain renderer. */\n  animationUrl?: string | null;\n  /** Caller-computed eligibility — this component never decides eligibility itself. */\n  live?: boolean;\n  /**\n   * \"fill\" = absolutely-positioned, fills a `position:relative` parent (grid\n   * tiles). \"natural\" = flows at its own width, `w-full h-auto` for the\n   * image / a forced square for the live iframe (asset detail hero).\n   */\n  mode?: \"fill\" | \"natural\";\n  className?: string;\n  sizes?: string;\n  priority?: boolean;\n  /** Controlled error state (AssetMediaColumn's existing external contract). Omit for internal (uncontrolled) tracking. */\n  imgError?: boolean;\n  onImageError?: () => void;\n  /** Rendered instead of the image/iframe when there's no image and nothing live to show, or the image errored. */\n  fallback?: React.ReactNode;\n}\n\nexport function AnimatedTokenMedia({\n  image,\n  alt,\n  animationUrl,\n  live = false,\n  mode = \"fill\",\n  className,\n  sizes,\n  priority,\n  imgError: imgErrorProp,\n  onImageError,\n  fallback,\n}: AnimatedTokenMediaProps) {\n  const [internalError, setInternalError] = useState(false);\n  const imgError = imgErrorProp ?? internalError;\n  const handleImageError = () => {\n    setInternalError(true);\n    onImageError?.();\n  };\n\n  const [ref, isVisible] = useIntersectionActive<HTMLDivElement>();\n  const showLive = live && !!animationUrl && isVisible;\n\n  return (\n    <div ref={ref} className={mode === \"fill\" ? \"absolute inset-0\" : \"w-full\"}>\n      {showLive ? (\n        <iframe\n          src={animationUrl!}\n          title={alt}\n          sandbox=\"allow-scripts\"\n          loading=\"lazy\"\n          className={\n            mode === \"fill\"\n              ? \"absolute inset-0 w-full h-full border-0\"\n              : \"w-full aspect-square border-0\"\n          }\n        />\n      ) : image && !imgError ? (\n        mode === \"fill\" ? (\n          <Image\n            src={image}\n            alt={alt}\n            fill\n            unoptimized\n            sizes={sizes}\n            priority={priority}\n            className={className}\n            onError={handleImageError}\n          />\n        ) : (\n          <Image\n            src={image}\n            alt={alt}\n            width={0}\n            height={0}\n            sizes={sizes}\n            priority={priority}\n            crossOrigin=\"anonymous\"\n            className={className ?? \"w-full h-auto\"}\n            onError={handleImageError}\n          />\n        )\n      ) : (\n        fallback ?? null\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwDQ;AAtDR,mBAAyB;AACzB,mBAAkB;AAClB,qCAAsC;AA0B/B,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AACF,GAA4B;AAC1B,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,KAAK;AACxD,QAAM,WAAW,gBAAgB;AACjC,QAAM,mBAAmB,MAAM;AAC7B,qBAAiB,IAAI;AACrB,mBAAe;AAAA,EACjB;AAEA,QAAM,CAAC,KAAK,SAAS,QAAI,sDAAsC;AAC/D,QAAM,WAAW,QAAQ,CAAC,CAAC,gBAAgB;AAE3C,SACE,4CAAC,SAAI,KAAU,WAAW,SAAS,SAAS,qBAAqB,UAC9D,qBACC;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,OAAO;AAAA,MACP,SAAQ;AAAA,MACR,SAAQ;AAAA,MACR,WACE,SAAS,SACL,4CACA;AAAA;AAAA,EAER,IACE,SAAS,CAAC,WACZ,SAAS,SACP;AAAA,IAAC,aAAAA;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,MAAI;AAAA,MACJ,aAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA;AAAA,EACX,IAEA;AAAA,IAAC,aAAAA;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,OAAO;AAAA,MACP,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA,aAAY;AAAA,MACZ,WAAW,aAAa;AAAA,MACxB,SAAS;AAAA;AAAA,EACX,IAGF,YAAY,MAEhB;AAEJ;","names":["Image"]}

package/dist/components/animated-token-media.d.cts

@@ -0,0 +1,28 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface AnimatedTokenMediaProps {
+    /** Resolved (already ipfsToHttp'd, if needed) static image URL. */
+    image: string | null;
+    alt: string;
+    /** Resolved animation_url (data:/http(s)/ipfs-resolved) — the live on-chain renderer. */
+    animationUrl?: string | null;
+    /** Caller-computed eligibility — this component never decides eligibility itself. */
+    live?: boolean;
+    /**
+     * "fill" = absolutely-positioned, fills a `position:relative` parent (grid
+     * tiles). "natural" = flows at its own width, `w-full h-auto` for the
+     * image / a forced square for the live iframe (asset detail hero).
+     */
+    mode?: "fill" | "natural";
+    className?: string;
+    sizes?: string;
+    priority?: boolean;
+    /** Controlled error state (AssetMediaColumn's existing external contract). Omit for internal (uncontrolled) tracking. */
+    imgError?: boolean;
+    onImageError?: () => void;
+    /** Rendered instead of the image/iframe when there's no image and nothing live to show, or the image errored. */
+    fallback?: React.ReactNode;
+}
+declare function AnimatedTokenMedia({ image, alt, animationUrl, live, mode, className, sizes, priority, imgError: imgErrorProp, onImageError, fallback, }: AnimatedTokenMediaProps): react_jsx_runtime.JSX.Element;
+
+export { AnimatedTokenMedia, type AnimatedTokenMediaProps };

package/dist/components/animated-token-media.d.ts

@@ -0,0 +1,28 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface AnimatedTokenMediaProps {
+    /** Resolved (already ipfsToHttp'd, if needed) static image URL. */
+    image: string | null;
+    alt: string;
+    /** Resolved animation_url (data:/http(s)/ipfs-resolved) — the live on-chain renderer. */
+    animationUrl?: string | null;
+    /** Caller-computed eligibility — this component never decides eligibility itself. */
+    live?: boolean;
+    /**
+     * "fill" = absolutely-positioned, fills a `position:relative` parent (grid
+     * tiles). "natural" = flows at its own width, `w-full h-auto` for the
+     * image / a forced square for the live iframe (asset detail hero).
+     */
+    mode?: "fill" | "natural";
+    className?: string;
+    sizes?: string;
+    priority?: boolean;
+    /** Controlled error state (AssetMediaColumn's existing external contract). Omit for internal (uncontrolled) tracking. */
+    imgError?: boolean;
+    onImageError?: () => void;
+    /** Rendered instead of the image/iframe when there's no image and nothing live to show, or the image errored. */
+    fallback?: React.ReactNode;
+}
+declare function AnimatedTokenMedia({ image, alt, animationUrl, live, mode, className, sizes, priority, imgError: imgErrorProp, onImageError, fallback, }: AnimatedTokenMediaProps): react_jsx_runtime.JSX.Element;
+
+export { AnimatedTokenMedia, type AnimatedTokenMediaProps };

package/dist/components/animated-token-media.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import Image from "next/image";
+import { useIntersectionActive } from "../utils/use-intersection-active.js";
+function AnimatedTokenMedia({
+  image,
+  alt,
+  animationUrl,
+  live = false,
+  mode = "fill",
+  className,
+  sizes,
+  priority,
+  imgError: imgErrorProp,
+  onImageError,
+  fallback
+}) {
+  const [internalError, setInternalError] = useState(false);
+  const imgError = imgErrorProp ?? internalError;
+  const handleImageError = () => {
+    setInternalError(true);
+    onImageError?.();
+  };
+  const [ref, isVisible] = useIntersectionActive();
+  const showLive = live && !!animationUrl && isVisible;
+  return /* @__PURE__ */ jsx("div", { ref, className: mode === "fill" ? "absolute inset-0" : "w-full", children: showLive ? /* @__PURE__ */ jsx(
+    "iframe",
+    {
+      src: animationUrl,
+      title: alt,
+      sandbox: "allow-scripts",
+      loading: "lazy",
+      className: mode === "fill" ? "absolute inset-0 w-full h-full border-0" : "w-full aspect-square border-0"
+    }
+  ) : image && !imgError ? mode === "fill" ? /* @__PURE__ */ jsx(
+    Image,
+    {
+      src: image,
+      alt,
+      fill: true,
+      unoptimized: true,
+      sizes,
+      priority,
+      className,
+      onError: handleImageError
+    }
+  ) : /* @__PURE__ */ jsx(
+    Image,
+    {
+      src: image,
+      alt,
+      width: 0,
+      height: 0,
+      sizes,
+      priority,
+      crossOrigin: "anonymous",
+      className: className ?? "w-full h-auto",
+      onError: handleImageError
+    }
+  ) : fallback ?? null });
+}
+export {
+  AnimatedTokenMedia
+};
+//# sourceMappingURL=animated-token-media.js.map

package/dist/components/animated-token-media.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/animated-token-media.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport Image from \"next/image\";\nimport { useIntersectionActive } from \"../utils/use-intersection-active.js\";\n\nexport interface AnimatedTokenMediaProps {\n  /** Resolved (already ipfsToHttp'd, if needed) static image URL. */\n  image: string | null;\n  alt: string;\n  /** Resolved animation_url (data:/http(s)/ipfs-resolved) — the live on-chain renderer. */\n  animationUrl?: string | null;\n  /** Caller-computed eligibility — this component never decides eligibility itself. */\n  live?: boolean;\n  /**\n   * \"fill\" = absolutely-positioned, fills a `position:relative` parent (grid\n   * tiles). \"natural\" = flows at its own width, `w-full h-auto` for the\n   * image / a forced square for the live iframe (asset detail hero).\n   */\n  mode?: \"fill\" | \"natural\";\n  className?: string;\n  sizes?: string;\n  priority?: boolean;\n  /** Controlled error state (AssetMediaColumn's existing external contract). Omit for internal (uncontrolled) tracking. */\n  imgError?: boolean;\n  onImageError?: () => void;\n  /** Rendered instead of the image/iframe when there's no image and nothing live to show, or the image errored. */\n  fallback?: React.ReactNode;\n}\n\nexport function AnimatedTokenMedia({\n  image,\n  alt,\n  animationUrl,\n  live = false,\n  mode = \"fill\",\n  className,\n  sizes,\n  priority,\n  imgError: imgErrorProp,\n  onImageError,\n  fallback,\n}: AnimatedTokenMediaProps) {\n  const [internalError, setInternalError] = useState(false);\n  const imgError = imgErrorProp ?? internalError;\n  const handleImageError = () => {\n    setInternalError(true);\n    onImageError?.();\n  };\n\n  const [ref, isVisible] = useIntersectionActive<HTMLDivElement>();\n  const showLive = live && !!animationUrl && isVisible;\n\n  return (\n    <div ref={ref} className={mode === \"fill\" ? \"absolute inset-0\" : \"w-full\"}>\n      {showLive ? (\n        <iframe\n          src={animationUrl!}\n          title={alt}\n          sandbox=\"allow-scripts\"\n          loading=\"lazy\"\n          className={\n            mode === \"fill\"\n              ? \"absolute inset-0 w-full h-full border-0\"\n              : \"w-full aspect-square border-0\"\n          }\n        />\n      ) : image && !imgError ? (\n        mode === \"fill\" ? (\n          <Image\n            src={image}\n            alt={alt}\n            fill\n            unoptimized\n            sizes={sizes}\n            priority={priority}\n            className={className}\n            onError={handleImageError}\n          />\n        ) : (\n          <Image\n            src={image}\n            alt={alt}\n            width={0}\n            height={0}\n            sizes={sizes}\n            priority={priority}\n            crossOrigin=\"anonymous\"\n            className={className ?? \"w-full h-auto\"}\n            onError={handleImageError}\n          />\n        )\n      ) : (\n        fallback ?? null\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAwDQ;AAtDR,SAAS,gBAAgB;AACzB,OAAO,WAAW;AAClB,SAAS,6BAA6B;AA0B/B,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AACF,GAA4B;AAC1B,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AACxD,QAAM,WAAW,gBAAgB;AACjC,QAAM,mBAAmB,MAAM;AAC7B,qBAAiB,IAAI;AACrB,mBAAe;AAAA,EACjB;AAEA,QAAM,CAAC,KAAK,SAAS,IAAI,sBAAsC;AAC/D,QAAM,WAAW,QAAQ,CAAC,CAAC,gBAAgB;AAE3C,SACE,oBAAC,SAAI,KAAU,WAAW,SAAS,SAAS,qBAAqB,UAC9D,qBACC;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,OAAO;AAAA,MACP,SAAQ;AAAA,MACR,SAAQ;AAAA,MACR,WACE,SAAS,SACL,4CACA;AAAA;AAAA,EAER,IACE,SAAS,CAAC,WACZ,SAAS,SACP;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,MAAI;AAAA,MACJ,aAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA;AAAA,EACX,IAEA;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,OAAO;AAAA,MACP,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA,aAAY;AAAA,MACZ,WAAW,aAAa;AAAA,MACxB,SAAS;AAAA;AAAA,EACX,IAGF,YAAY,MAEhB;AAEJ;","names":[]}

package/dist/components/asset-card.cjs

@@ -34,19 +34,20 @@ __export(asset_card_exports, {
 });
 module.exports = __toCommonJS(asset_card_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
 var import_link = __toESM(require("next/link"), 1);
-var import_image = __toESM(require("next/image"), 1);
 var import_lucide_react = require("lucide-react");
 var import_cn = require("../utils/cn.js");
 var import_ipfs = require("../utils/ipfs.js");
 var import_format = require("../utils/format.js");
 var import_currency_icon = require("./currency-icon.js");
 var import_ip_type_badge = require("./ip-type-badge.js");
+var import_animated_token_media = require("./animated-token-media.js");
 function AssetCard({
   href,
   name,
   image,
+  animationUrl,
+  live = false,
   subtitle,
   ipType,
   price,
@@ -55,7 +56,6 @@ function AssetCard({
   ipTypeBaseUrl = "",
   className
 }) {
-  const [imgError, setImgError] = (0, import_react.useState)(false);
   const resolved = image ? (0, import_ipfs.ipfsToHttp)(image) : null;
   const hasPrice = !!price?.formatted;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -67,21 +67,22 @@ function AssetCard({
       ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.default, { href, className: "block p-1.5 pb-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative aspect-[4/5] rounded-[12px] bg-muted overflow-hidden ring-1 ring-border/50", children: [
-          resolved && !imgError ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_image.default,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_animated_token_media.AnimatedTokenMedia,
             {
-              src: resolved,
+              image: resolved,
+              animationUrl,
+              live,
               alt: name,
-              fill: true,
-              unoptimized: true,
+              mode: "fill",
               sizes: "(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 22vw",
               className: "object-cover transition-transform duration-500 group-hover:scale-105",
-              onError: () => setImgError(true)
+              fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("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", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-sm font-semibold text-muted-foreground tabular-nums", children: [
+                "#",
+                fallbackId ?? "?"
+              ] }) })
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("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", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-sm font-semibold text-muted-foreground tabular-nums", children: [
-            "#",
-            fallbackId ?? "?"
-          ] }) }),
+          ),
           hasPrice && !indexing && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("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", children: [
             price.currency && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_currency_icon.CurrencyIcon, { symbol: price.currency, size: 12 }),
             (0, import_format.formatDisplayPrice)(price.formatted)

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 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"]}
+{"version":3,"sources":["../../src/components/asset-card.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\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\";\nimport { AnimatedTokenMedia } from \"./animated-token-media.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  /** Resolved animation_url — the live on-chain renderer, if any. */\n  animationUrl?: string | null;\n  /** Caller-computed eligibility for the living-render treatment. */\n  live?: boolean;\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  animationUrl,\n  live = false,\n  subtitle,\n  ipType,\n  price,\n  fallbackId,\n  indexing = false,\n  ipTypeBaseUrl = \"\",\n  className,\n}: AssetCardProps) {\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          <AnimatedTokenMedia\n            image={resolved}\n            animationUrl={animationUrl}\n            live={live}\n            alt={name}\n            mode=\"fill\"\n            sizes=\"(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 22vw\"\n            className=\"object-cover transition-transform duration-500 group-hover:scale-105\"\n            fallback={\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\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;AA2Fc;AAzFd,kBAAiB;AACjB,0BAAwB;AACxB,gBAAmB;AACnB,kBAA2B;AAC3B,oBAAmC;AACnC,2BAA6B;AAC7B,2BAA4B;AAC5B,kCAAmC;AA8C5B,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB;AACF,GAAmB;AACjB,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,uFACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,cACP;AAAA,cACA;AAAA,cACA,KAAK;AAAA,cACL,MAAK;AAAA,cACL,OAAM;AAAA,cACN,WAAU;AAAA,cACV,UACE,4CAAC,SAAI,WAAU,+HACb,uDAAC,UAAK,WAAU,4DAA2D;AAAA;AAAA,gBACvE,cAAc;AAAA,iBAClB,GACF;AAAA;AAAA,UAEJ;AAAA,UAIC,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,YAAAA,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"]}

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

@@ -11,6 +11,10 @@ interface AssetCardProps {
     name: string;
     /** Raw image (ipfs:// or http) — resolved internally. */
     image?: string | null;
+    /** Resolved animation_url — the live on-chain renderer, if any. */
+    animationUrl?: string | null;
+    /** Caller-computed eligibility for the living-render treatment. */
+    live?: boolean;
     /** Secondary line under the title (collection or description). */
     subtitle?: string | null;
     /** IP type (apiValue or label) — renders the icon badge on the footer left. */
@@ -38,7 +42,7 @@ interface AssetCardProps {
  * Floor-pill vocabulary) → one body row: display-face title + optional
  * subtitle, with the optional ipType badge inline on the right.
  */
-declare function AssetCard({ href, name, image, subtitle, ipType, price, fallbackId, indexing, ipTypeBaseUrl, className, }: AssetCardProps): react_jsx_runtime.JSX.Element;
+declare function AssetCard({ href, name, image, animationUrl, live, subtitle, ipType, price, fallbackId, indexing, ipTypeBaseUrl, className, }: AssetCardProps): react_jsx_runtime.JSX.Element;
 declare function AssetCardSkeleton(): react_jsx_runtime.JSX.Element;
 
 export { AssetCard, type AssetCardPrice, type AssetCardProps, AssetCardSkeleton };

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

@@ -11,6 +11,10 @@ interface AssetCardProps {
     name: string;
     /** Raw image (ipfs:// or http) — resolved internally. */
     image?: string | null;
+    /** Resolved animation_url — the live on-chain renderer, if any. */
+    animationUrl?: string | null;
+    /** Caller-computed eligibility for the living-render treatment. */
+    live?: boolean;
     /** Secondary line under the title (collection or description). */
     subtitle?: string | null;
     /** IP type (apiValue or label) — renders the icon badge on the footer left. */
@@ -38,7 +42,7 @@ interface AssetCardProps {
  * Floor-pill vocabulary) → one body row: display-face title + optional
  * subtitle, with the optional ipType badge inline on the right.
  */
-declare function AssetCard({ href, name, image, subtitle, ipType, price, fallbackId, indexing, ipTypeBaseUrl, className, }: AssetCardProps): react_jsx_runtime.JSX.Element;
+declare function AssetCard({ href, name, image, animationUrl, live, subtitle, ipType, price, fallbackId, indexing, ipTypeBaseUrl, className, }: AssetCardProps): react_jsx_runtime.JSX.Element;
 declare function AssetCardSkeleton(): react_jsx_runtime.JSX.Element;
 
 export { AssetCard, type AssetCardPrice, type AssetCardProps, AssetCardSkeleton };

package/dist/components/asset-card.js

@@ -1,18 +1,19 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
 import Link from "next/link";
-import Image from "next/image";
 import { Loader2 } from "lucide-react";
 import { cn } from "../utils/cn.js";
 import { ipfsToHttp } from "../utils/ipfs.js";
 import { formatDisplayPrice } from "../utils/format.js";
 import { CurrencyIcon } from "./currency-icon.js";
 import { IpTypeBadge } from "./ip-type-badge.js";
+import { AnimatedTokenMedia } from "./animated-token-media.js";
 function AssetCard({
   href,
   name,
   image,
+  animationUrl,
+  live = false,
   subtitle,
   ipType,
   price,
@@ -21,7 +22,6 @@ function AssetCard({
   ipTypeBaseUrl = "",
   className
 }) {
-  const [imgError, setImgError] = useState(false);
   const resolved = image ? ipfsToHttp(image) : null;
   const hasPrice = !!price?.formatted;
   return /* @__PURE__ */ jsxs(
@@ -33,21 +33,22 @@ function AssetCard({
       ),
       children: [
         /* @__PURE__ */ jsx(Link, { href, className: "block p-1.5 pb-0", children: /* @__PURE__ */ jsxs("div", { className: "relative aspect-[4/5] rounded-[12px] bg-muted overflow-hidden ring-1 ring-border/50", children: [
-          resolved && !imgError ? /* @__PURE__ */ jsx(
-            Image,
+          /* @__PURE__ */ jsx(
+            AnimatedTokenMedia,
             {
-              src: resolved,
+              image: resolved,
+              animationUrl,
+              live,
               alt: name,
-              fill: true,
-              unoptimized: true,
+              mode: "fill",
               sizes: "(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 22vw",
               className: "object-cover transition-transform duration-500 group-hover:scale-105",
-              onError: () => setImgError(true)
+              fallback: /* @__PURE__ */ jsx("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", children: /* @__PURE__ */ jsxs("span", { className: "text-sm font-semibold text-muted-foreground tabular-nums", children: [
+                "#",
+                fallbackId ?? "?"
+              ] }) })
             }
-          ) : /* @__PURE__ */ jsx("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", children: /* @__PURE__ */ jsxs("span", { className: "text-sm font-semibold text-muted-foreground tabular-nums", children: [
-            "#",
-            fallbackId ?? "?"
-          ] }) }),
+          ),
           hasPrice && !indexing && /* @__PURE__ */ jsxs("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", children: [
             price.currency && /* @__PURE__ */ jsx(CurrencyIcon, { symbol: price.currency, size: 12 }),
             formatDisplayPrice(price.formatted)

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 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":[]}
+{"version":3,"sources":["../../src/components/asset-card.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\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\";\nimport { AnimatedTokenMedia } from \"./animated-token-media.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  /** Resolved animation_url — the live on-chain renderer, if any. */\n  animationUrl?: string | null;\n  /** Caller-computed eligibility for the living-render treatment. */\n  live?: boolean;\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  animationUrl,\n  live = false,\n  subtitle,\n  ipType,\n  price,\n  fallbackId,\n  indexing = false,\n  ipTypeBaseUrl = \"\",\n  className,\n}: AssetCardProps) {\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          <AnimatedTokenMedia\n            image={resolved}\n            animationUrl={animationUrl}\n            live={live}\n            alt={name}\n            mode=\"fill\"\n            sizes=\"(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 22vw\"\n            className=\"object-cover transition-transform duration-500 group-hover:scale-105\"\n            fallback={\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\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":";AA2Fc,cACE,YADF;AAzFd,OAAO,UAAU;AACjB,SAAS,eAAe;AACxB,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAC3B,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAC5B,SAAS,0BAA0B;AA8C5B,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB;AACF,GAAmB;AACjB,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,uFACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,cACP;AAAA,cACA;AAAA,cACA,KAAK;AAAA,cACL,MAAK;AAAA,cACL,OAAM;AAAA,cACN,WAAU;AAAA,cACV,UACE,oBAAC,SAAI,WAAU,+HACb,+BAAC,UAAK,WAAU,4DAA2D;AAAA;AAAA,gBACvE,cAAc;AAAA,iBAClB,GACF;AAAA;AAAA,UAEJ;AAAA,UAIC,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/asset-top-sections.cjs

@@ -36,9 +36,9 @@ __export(asset_top_sections_exports, {
 });
 module.exports = __toCommonJS(asset_top_sections_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_image = __toESM(require("next/image"), 1);
 var import_link = __toESM(require("next/link"), 1);
 var import_framer_motion = require("framer-motion");
+var import_use_intersection_active = require("../utils/use-intersection-active.js");
 var import_address_display = require("./address-display.js");
 var import_parent_attribution_banner = require("./parent-attribution-banner.js");
 var import_ip_type_badge = require("./ip-type-badge.js");
@@ -50,40 +50,71 @@ function AssetMediaColumn({
   imgError,
   onImageError,
   fallback,
+  onZoom,
+  animationUrl,
+  live = false,
   stats
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    import_framer_motion.motion.div,
-    {
-      initial: shouldReduce ? false : { scale: 1, opacity: 0 },
-      animate: { scale: 1.02, opacity: 1 },
-      transition: { duration: 0.6, ease: "easeOut" },
-      className: "overflow-hidden rounded-xl lg:sticky lg:top-16",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "rounded-2xl overflow-hidden border border-border bg-muted", children: image && !imgError ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_image.default,
+  const [ref, isVisible] = (0, import_use_intersection_active.useIntersectionActive)();
+  const showLive = live && !!animationUrl && isVisible;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref, className: "w-full lg:sticky lg:top-16", children: [
+    showLive ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-full overflow-hidden rounded-3xl aspect-square", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "iframe",
+      {
+        src: animationUrl,
+        title: imageAlt,
+        sandbox: "allow-scripts",
+        loading: "lazy",
+        className: "w-full h-full border-0"
+      }
+    ) }) : !image || imgError ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-full overflow-hidden rounded-3xl", children: fallback }) : onZoom ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_framer_motion.motion.button,
+      {
+        type: "button",
+        onClick: onZoom,
+        "aria-label": "View full image",
+        initial: shouldReduce ? false : { opacity: 0, scale: 0.98 },
+        animate: { opacity: 1, scale: 1 },
+        transition: { duration: 0.5 },
+        className: "group block w-full overflow-hidden rounded-3xl cursor-zoom-in focus:outline-none",
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "img",
           {
             src: image,
             alt: imageAlt,
-            width: 0,
-            height: 0,
-            sizes: "(max-width: 1024px) 100vw, 66vw",
-            className: "w-full h-auto",
+            crossOrigin: "anonymous",
             onError: onImageError,
+            className: "w-full h-auto max-h-[80vh] object-contain\n                       transition duration-300 group-hover:opacity-95 group-active:scale-[0.99]"
+          }
+        )
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_framer_motion.motion.div,
+      {
+        initial: shouldReduce ? false : { opacity: 0, scale: 0.98 },
+        animate: { opacity: 1, scale: 1 },
+        transition: { duration: 0.5 },
+        className: "block w-full overflow-hidden rounded-3xl",
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "img",
+          {
+            src: image,
+            alt: imageAlt,
             crossOrigin: "anonymous",
-            priority: true
+            onError: onImageError,
+            className: "w-full h-auto max-h-[80vh] object-contain"
           }
-        ) : fallback }),
-        stats && stats.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `grid gap-3 mt-4 ${stats.length === 2 ? "grid-cols-2" : "grid-cols-1"}`, children: stats.map((stat) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "rounded-xl border border-border bg-muted/20 p-4 text-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-2xl font-black", children: stat.value }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-center gap-1 text-xs text-muted-foreground mt-1", children: [
-            stat.icon,
-            stat.label
-          ] })
-        ] }, stat.label)) }) : null
-      ]
-    }
-  );
+        )
+      }
+    ),
+    stats && stats.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `grid gap-3 mt-4 ${stats.length === 2 ? "grid-cols-2" : "grid-cols-1"}`, children: stats.map((stat) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "rounded-xl border border-border bg-muted/20 p-4 text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-2xl font-black", children: stat.value }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-center gap-1 text-xs text-muted-foreground mt-1", children: [
+        stat.icon,
+        stat.label
+      ] })
+    ] }, stat.label)) }) : null
+  ] });
 }
 function AssetHeaderBlock({
   name,