@medialane/ui 0.126.1 → 0.126.3

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

@@ -36,6 +36,7 @@ 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");
+var import_cn = require("../utils/cn.js");
 function AnimatedTokenMedia({
   image,
   alt,
@@ -55,9 +56,11 @@ function AnimatedTokenMedia({
     setInternalError(true);
     onImageError?.();
   };
+  const [loaded, setLoaded] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => setLoaded(false), [image]);
   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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, className: mode === "fill" ? "absolute inset-0" : "relative w-full", children: showLive ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "iframe",
     {
       src: animationUrl,
@@ -66,32 +69,49 @@ function AnimatedTokenMedia({
       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 });
+  ) : image && !imgError ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    !loaded && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: (0, import_cn.cn)(
+          "animate-[shimmer_1.6s_ease-in-out_infinite] bg-foreground/[0.06] absolute",
+          mode === "fill" ? "inset-0" : "inset-x-0 top-0 aspect-square"
+        ),
+        style: {
+          backgroundImage: "linear-gradient(90deg, transparent, color-mix(in srgb, var(--foreground) 8%, transparent), transparent)",
+          backgroundSize: "200% 100%"
+        }
+      }
+    ),
+    mode === "fill" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_image.default,
+      {
+        src: image,
+        alt,
+        fill: true,
+        unoptimized: true,
+        sizes,
+        priority,
+        className: (0, import_cn.cn)(className, "transition-opacity duration-300", loaded ? "opacity-100" : "opacity-0"),
+        onLoad: () => setLoaded(true),
+        onError: handleImageError
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_image.default,
+      {
+        src: image,
+        alt,
+        width: 0,
+        height: 0,
+        sizes,
+        priority,
+        crossOrigin: "anonymous",
+        className: (0, import_cn.cn)(className ?? "w-full h-auto", "transition-opacity duration-300", loaded ? "opacity-100" : "opacity-0"),
+        onLoad: () => setLoaded(true),
+        onError: handleImageError
+      }
+    )
+  ] }) : fallback ?? null });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

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

@@ -1 +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\n  image: string | null;\n  alt: string;\n\n  animationUrl?: string | null;\n\n  live?: boolean;\n\n  mode?: \"fill\" | \"natural\";\n  className?: string;\n  sizes?: string;\n  priority?: boolean;\n\n  imgError?: boolean;\n  onImageError?: () => void;\n\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;AAoDQ;AAlDR,mBAAyB;AACzB,mBAAkB;AAClB,qCAAsC;AAsB/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"]}
+{"version":3,"sources":["../../src/components/animated-token-media.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport Image from \"next/image\";\nimport { useIntersectionActive } from \"../utils/use-intersection-active.js\";\nimport { cn } from \"../utils/cn.js\";\n\nexport interface AnimatedTokenMediaProps {\n\n  image: string | null;\n  alt: string;\n\n  animationUrl?: string | null;\n\n  live?: boolean;\n\n  mode?: \"fill\" | \"natural\";\n  className?: string;\n  sizes?: string;\n  priority?: boolean;\n\n  imgError?: boolean;\n  onImageError?: () => void;\n\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 [loaded, setLoaded] = useState(false);\n  useEffect(() => setLoaded(false), [image]);\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\" : \"relative 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        <>\n          {!loaded && (\n            <div\n              className={cn(\n                \"animate-[shimmer_1.6s_ease-in-out_infinite] bg-foreground/[0.06] absolute\",\n                mode === \"fill\" ? \"inset-0\" : \"inset-x-0 top-0 aspect-square\"\n              )}\n              style={{\n                backgroundImage:\n                  \"linear-gradient(90deg, transparent, color-mix(in srgb, var(--foreground) 8%, transparent), transparent)\",\n                backgroundSize: \"200% 100%\",\n              }}\n            />\n          )}\n          {mode === \"fill\" ? (\n            <Image\n              src={image}\n              alt={alt}\n              fill\n              unoptimized\n              sizes={sizes}\n              priority={priority}\n              className={cn(className, \"transition-opacity duration-300\", loaded ? \"opacity-100\" : \"opacity-0\")}\n              onLoad={() => setLoaded(true)}\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={cn(className ?? \"w-full h-auto\", \"transition-opacity duration-300\", loaded ? \"opacity-100\" : \"opacity-0\")}\n              onLoad={() => setLoaded(true)}\n              onError={handleImageError}\n            />\n          )}\n        </>\n      ) : (\n        fallback ?? null\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwDQ;AAtDR,mBAAoC;AACpC,mBAAkB;AAClB,qCAAsC;AACtC,gBAAmB;AAsBZ,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,QAAQ,SAAS,QAAI,uBAAS,KAAK;AAC1C,8BAAU,MAAM,UAAU,KAAK,GAAG,CAAC,KAAK,CAAC;AAEzC,QAAM,CAAC,KAAK,SAAS,QAAI,sDAAsC;AAC/D,QAAM,WAAW,QAAQ,CAAC,CAAC,gBAAgB;AAE3C,SACE,4CAAC,SAAI,KAAU,WAAW,SAAS,SAAS,qBAAqB,mBAC9D,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,4EACG;AAAA,KAAC,UACA;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,UACT;AAAA,UACA,SAAS,SAAS,YAAY;AAAA,QAChC;AAAA,QACA,OAAO;AAAA,UACL,iBACE;AAAA,UACF,gBAAgB;AAAA,QAClB;AAAA;AAAA,IACF;AAAA,IAED,SAAS,SACR;AAAA,MAAC,aAAAA;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA,MAAI;AAAA,QACJ,aAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA,eAAW,cAAG,WAAW,mCAAmC,SAAS,gBAAgB,WAAW;AAAA,QAChG,QAAQ,MAAM,UAAU,IAAI;AAAA,QAC5B,SAAS;AAAA;AAAA,IACX,IAEA;AAAA,MAAC,aAAAA;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA,OAAO;AAAA,QACP,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA,aAAY;AAAA,QACZ,eAAW,cAAG,aAAa,iBAAiB,mCAAmC,SAAS,gBAAgB,WAAW;AAAA,QACnH,QAAQ,MAAM,UAAU,IAAI;AAAA,QAC5B,SAAS;AAAA;AAAA,IACX;AAAA,KAEJ,IAEA,YAAY,MAEhB;AAEJ;","names":["Image"]}

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

@@ -1,8 +1,9 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
-import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
 import Image from "next/image";
 import { useIntersectionActive } from "../utils/use-intersection-active.js";
+import { cn } from "../utils/cn.js";
 function AnimatedTokenMedia({
   image,
   alt,
@@ -22,9 +23,11 @@ function AnimatedTokenMedia({
     setInternalError(true);
     onImageError?.();
   };
+  const [loaded, setLoaded] = useState(false);
+  useEffect(() => setLoaded(false), [image]);
   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(
+  return /* @__PURE__ */ jsx("div", { ref, className: mode === "fill" ? "absolute inset-0" : "relative w-full", children: showLive ? /* @__PURE__ */ jsx(
     "iframe",
     {
       src: animationUrl,
@@ -33,32 +36,49 @@ function AnimatedTokenMedia({
       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 });
+  ) : image && !imgError ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    !loaded && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "animate-[shimmer_1.6s_ease-in-out_infinite] bg-foreground/[0.06] absolute",
+          mode === "fill" ? "inset-0" : "inset-x-0 top-0 aspect-square"
+        ),
+        style: {
+          backgroundImage: "linear-gradient(90deg, transparent, color-mix(in srgb, var(--foreground) 8%, transparent), transparent)",
+          backgroundSize: "200% 100%"
+        }
+      }
+    ),
+    mode === "fill" ? /* @__PURE__ */ jsx(
+      Image,
+      {
+        src: image,
+        alt,
+        fill: true,
+        unoptimized: true,
+        sizes,
+        priority,
+        className: cn(className, "transition-opacity duration-300", loaded ? "opacity-100" : "opacity-0"),
+        onLoad: () => setLoaded(true),
+        onError: handleImageError
+      }
+    ) : /* @__PURE__ */ jsx(
+      Image,
+      {
+        src: image,
+        alt,
+        width: 0,
+        height: 0,
+        sizes,
+        priority,
+        crossOrigin: "anonymous",
+        className: cn(className ?? "w-full h-auto", "transition-opacity duration-300", loaded ? "opacity-100" : "opacity-0"),
+        onLoad: () => setLoaded(true),
+        onError: handleImageError
+      }
+    )
+  ] }) : fallback ?? null });
 }
 export {
   AnimatedTokenMedia

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

@@ -1 +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\n  image: string | null;\n  alt: string;\n\n  animationUrl?: string | null;\n\n  live?: boolean;\n\n  mode?: \"fill\" | \"natural\";\n  className?: string;\n  sizes?: string;\n  priority?: boolean;\n\n  imgError?: boolean;\n  onImageError?: () => void;\n\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":";AAoDQ;AAlDR,SAAS,gBAAgB;AACzB,OAAO,WAAW;AAClB,SAAS,6BAA6B;AAsB/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":[]}
+{"version":3,"sources":["../../src/components/animated-token-media.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport Image from \"next/image\";\nimport { useIntersectionActive } from \"../utils/use-intersection-active.js\";\nimport { cn } from \"../utils/cn.js\";\n\nexport interface AnimatedTokenMediaProps {\n\n  image: string | null;\n  alt: string;\n\n  animationUrl?: string | null;\n\n  live?: boolean;\n\n  mode?: \"fill\" | \"natural\";\n  className?: string;\n  sizes?: string;\n  priority?: boolean;\n\n  imgError?: boolean;\n  onImageError?: () => void;\n\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 [loaded, setLoaded] = useState(false);\n  useEffect(() => setLoaded(false), [image]);\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\" : \"relative 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        <>\n          {!loaded && (\n            <div\n              className={cn(\n                \"animate-[shimmer_1.6s_ease-in-out_infinite] bg-foreground/[0.06] absolute\",\n                mode === \"fill\" ? \"inset-0\" : \"inset-x-0 top-0 aspect-square\"\n              )}\n              style={{\n                backgroundImage:\n                  \"linear-gradient(90deg, transparent, color-mix(in srgb, var(--foreground) 8%, transparent), transparent)\",\n                backgroundSize: \"200% 100%\",\n              }}\n            />\n          )}\n          {mode === \"fill\" ? (\n            <Image\n              src={image}\n              alt={alt}\n              fill\n              unoptimized\n              sizes={sizes}\n              priority={priority}\n              className={cn(className, \"transition-opacity duration-300\", loaded ? \"opacity-100\" : \"opacity-0\")}\n              onLoad={() => setLoaded(true)}\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={cn(className ?? \"w-full h-auto\", \"transition-opacity duration-300\", loaded ? \"opacity-100\" : \"opacity-0\")}\n              onLoad={() => setLoaded(true)}\n              onError={handleImageError}\n            />\n          )}\n        </>\n      ) : (\n        fallback ?? null\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAwDQ,SAYA,UAZA,KAYA,YAZA;AAtDR,SAAS,WAAW,gBAAgB;AACpC,OAAO,WAAW;AAClB,SAAS,6BAA6B;AACtC,SAAS,UAAU;AAsBZ,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,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,YAAU,MAAM,UAAU,KAAK,GAAG,CAAC,KAAK,CAAC;AAEzC,QAAM,CAAC,KAAK,SAAS,IAAI,sBAAsC;AAC/D,QAAM,WAAW,QAAQ,CAAC,CAAC,gBAAgB;AAE3C,SACE,oBAAC,SAAI,KAAU,WAAW,SAAS,SAAS,qBAAqB,mBAC9D,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,iCACG;AAAA,KAAC,UACA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,SAAS,SAAS,YAAY;AAAA,QAChC;AAAA,QACA,OAAO;AAAA,UACL,iBACE;AAAA,UACF,gBAAgB;AAAA,QAClB;AAAA;AAAA,IACF;AAAA,IAED,SAAS,SACR;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA,MAAI;AAAA,QACJ,aAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA,WAAW,GAAG,WAAW,mCAAmC,SAAS,gBAAgB,WAAW;AAAA,QAChG,QAAQ,MAAM,UAAU,IAAI;AAAA,QAC5B,SAAS;AAAA;AAAA,IACX,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA,OAAO;AAAA,QACP,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA,aAAY;AAAA,QACZ,WAAW,GAAG,aAAa,iBAAiB,mCAAmC,SAAS,gBAAgB,WAAW;AAAA,QACnH,QAAQ,MAAM,UAAU,IAAI;AAAA,QAC5B,SAAS;AAAA;AAAA,IACX;AAAA,KAEJ,IAEA,YAAY,MAEhB;AAEJ;","names":[]}

package/dist/components/badge.d.cts

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
+    variant?: "outline" | "default" | "destructive" | "secondary" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
 }

package/dist/components/badge.d.ts

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
+    variant?: "outline" | "default" | "destructive" | "secondary" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
 }

package/dist/components/button.d.cts

@@ -3,8 +3,8 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "destructive" | "outline" | "ghost" | "secondary" | "premium" | "tonal" | null | undefined;
-    size?: "icon" | "default" | "sm" | "lg" | null | undefined;
+    variant?: "link" | "outline" | "default" | "destructive" | "ghost" | "secondary" | "premium" | "tonal" | null | undefined;
+    size?: "default" | "icon" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;

package/dist/components/button.d.ts

@@ -3,8 +3,8 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "destructive" | "outline" | "ghost" | "secondary" | "premium" | "tonal" | null | undefined;
-    size?: "icon" | "default" | "sm" | "lg" | null | undefined;
+    variant?: "link" | "outline" | "default" | "destructive" | "ghost" | "secondary" | "premium" | "tonal" | null | undefined;
+    size?: "default" | "icon" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;

package/dist/utils/ipfs.cjs

@@ -23,6 +23,7 @@ __export(ipfs_exports, {
 module.exports = __toCommonJS(ipfs_exports);
 const DEFAULT_GATEWAY = "/api/ipfs/";
 const ALLOWED_PROTOCOLS = /* @__PURE__ */ new Set(["http:", "https:", "ipfs:"]);
+const KNOWN_IPFS_GATEWAY_HOSTS = /(^|\.)(mypinata\.cloud|pinata\.cloud|ipfs\.io|dweb\.link|cloudflare-ipfs\.com|nftstorage\.link|w3s\.link)$/i;
 function ipfsToHttp(uri, gateway = DEFAULT_GATEWAY) {
   if (!uri) return "";
   if (uri.startsWith("ipfs://")) {
@@ -32,8 +33,12 @@ function ipfsToHttp(uri, gateway = DEFAULT_GATEWAY) {
     return uri;
   }
   try {
-    const { protocol } = new URL(uri);
-    if (!ALLOWED_PROTOCOLS.has(protocol)) return "";
+    const parsed = new URL(uri);
+    if (!ALLOWED_PROTOCOLS.has(parsed.protocol)) return "";
+    if (KNOWN_IPFS_GATEWAY_HOSTS.test(parsed.hostname)) {
+      const match = parsed.pathname.match(/\/ipfs\/(.+)$/);
+      if (match) return `${gateway}${match[1]}`;
+    }
   } catch {
     return "";
   }

package/dist/utils/ipfs.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/ipfs.ts"],"sourcesContent":["const DEFAULT_GATEWAY = \"/api/ipfs/\";\n\nconst ALLOWED_PROTOCOLS = new Set([\"http:\", \"https:\", \"ipfs:\"]);\n\nexport function ipfsToHttp(\n  uri: string | null | undefined,\n  gateway = DEFAULT_GATEWAY\n): string {\n  if (!uri) return \"\";\n  if (uri.startsWith(\"ipfs://\")) {\n    return uri.replace(\"ipfs://\", gateway);\n  }\n  if (uri.startsWith(\"data:image/\")) {\n    return uri;\n  }\n  try {\n    const { protocol } = new URL(uri);\n    if (!ALLOWED_PROTOCOLS.has(protocol)) return \"\";\n  } catch {\n    return \"\";\n  }\n  return uri;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAAM,kBAAkB;AAExB,MAAM,oBAAoB,oBAAI,IAAI,CAAC,SAAS,UAAU,OAAO,CAAC;AAEvD,SAAS,WACd,KACA,UAAU,iBACF;AACR,MAAI,CAAC,IAAK,QAAO;AACjB,MAAI,IAAI,WAAW,SAAS,GAAG;AAC7B,WAAO,IAAI,QAAQ,WAAW,OAAO;AAAA,EACvC;AACA,MAAI,IAAI,WAAW,aAAa,GAAG;AACjC,WAAO;AAAA,EACT;AACA,MAAI;AACF,UAAM,EAAE,SAAS,IAAI,IAAI,IAAI,GAAG;AAChC,QAAI,CAAC,kBAAkB,IAAI,QAAQ,EAAG,QAAO;AAAA,EAC/C,QAAQ;AACN,WAAO;AAAA,EACT;AACA,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../src/utils/ipfs.ts"],"sourcesContent":["const DEFAULT_GATEWAY = \"/api/ipfs/\";\n\nconst ALLOWED_PROTOCOLS = new Set([\"http:\", \"https:\", \"ipfs:\"]);\n\nconst KNOWN_IPFS_GATEWAY_HOSTS = /(^|\\.)(mypinata\\.cloud|pinata\\.cloud|ipfs\\.io|dweb\\.link|cloudflare-ipfs\\.com|nftstorage\\.link|w3s\\.link)$/i;\n\nexport function ipfsToHttp(\n  uri: string | null | undefined,\n  gateway = DEFAULT_GATEWAY\n): string {\n  if (!uri) return \"\";\n  if (uri.startsWith(\"ipfs://\")) {\n    return uri.replace(\"ipfs://\", gateway);\n  }\n  if (uri.startsWith(\"data:image/\")) {\n    return uri;\n  }\n  try {\n    const parsed = new URL(uri);\n    if (!ALLOWED_PROTOCOLS.has(parsed.protocol)) return \"\";\n\n    if (KNOWN_IPFS_GATEWAY_HOSTS.test(parsed.hostname)) {\n      const match = parsed.pathname.match(/\\/ipfs\\/(.+)$/);\n      if (match) return `${gateway}${match[1]}`;\n    }\n  } catch {\n    return \"\";\n  }\n  return uri;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAAM,kBAAkB;AAExB,MAAM,oBAAoB,oBAAI,IAAI,CAAC,SAAS,UAAU,OAAO,CAAC;AAE9D,MAAM,2BAA2B;AAE1B,SAAS,WACd,KACA,UAAU,iBACF;AACR,MAAI,CAAC,IAAK,QAAO;AACjB,MAAI,IAAI,WAAW,SAAS,GAAG;AAC7B,WAAO,IAAI,QAAQ,WAAW,OAAO;AAAA,EACvC;AACA,MAAI,IAAI,WAAW,aAAa,GAAG;AACjC,WAAO;AAAA,EACT;AACA,MAAI;AACF,UAAM,SAAS,IAAI,IAAI,GAAG;AAC1B,QAAI,CAAC,kBAAkB,IAAI,OAAO,QAAQ,EAAG,QAAO;AAEpD,QAAI,yBAAyB,KAAK,OAAO,QAAQ,GAAG;AAClD,YAAM,QAAQ,OAAO,SAAS,MAAM,eAAe;AACnD,UAAI,MAAO,QAAO,GAAG,OAAO,GAAG,MAAM,CAAC,CAAC;AAAA,IACzC;AAAA,EACF,QAAQ;AACN,WAAO;AAAA,EACT;AACA,SAAO;AACT;","names":[]}

package/dist/utils/ipfs.js

@@ -1,5 +1,6 @@
 const DEFAULT_GATEWAY = "/api/ipfs/";
 const ALLOWED_PROTOCOLS = /* @__PURE__ */ new Set(["http:", "https:", "ipfs:"]);
+const KNOWN_IPFS_GATEWAY_HOSTS = /(^|\.)(mypinata\.cloud|pinata\.cloud|ipfs\.io|dweb\.link|cloudflare-ipfs\.com|nftstorage\.link|w3s\.link)$/i;
 function ipfsToHttp(uri, gateway = DEFAULT_GATEWAY) {
   if (!uri) return "";
   if (uri.startsWith("ipfs://")) {
@@ -9,8 +10,12 @@ function ipfsToHttp(uri, gateway = DEFAULT_GATEWAY) {
     return uri;
   }
   try {
-    const { protocol } = new URL(uri);
-    if (!ALLOWED_PROTOCOLS.has(protocol)) return "";
+    const parsed = new URL(uri);
+    if (!ALLOWED_PROTOCOLS.has(parsed.protocol)) return "";
+    if (KNOWN_IPFS_GATEWAY_HOSTS.test(parsed.hostname)) {
+      const match = parsed.pathname.match(/\/ipfs\/(.+)$/);
+      if (match) return `${gateway}${match[1]}`;
+    }
   } catch {
     return "";
   }

package/dist/utils/ipfs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/ipfs.ts"],"sourcesContent":["const DEFAULT_GATEWAY = \"/api/ipfs/\";\n\nconst ALLOWED_PROTOCOLS = new Set([\"http:\", \"https:\", \"ipfs:\"]);\n\nexport function ipfsToHttp(\n  uri: string | null | undefined,\n  gateway = DEFAULT_GATEWAY\n): string {\n  if (!uri) return \"\";\n  if (uri.startsWith(\"ipfs://\")) {\n    return uri.replace(\"ipfs://\", gateway);\n  }\n  if (uri.startsWith(\"data:image/\")) {\n    return uri;\n  }\n  try {\n    const { protocol } = new URL(uri);\n    if (!ALLOWED_PROTOCOLS.has(protocol)) return \"\";\n  } catch {\n    return \"\";\n  }\n  return uri;\n}\n"],"mappings":"AAAA,MAAM,kBAAkB;AAExB,MAAM,oBAAoB,oBAAI,IAAI,CAAC,SAAS,UAAU,OAAO,CAAC;AAEvD,SAAS,WACd,KACA,UAAU,iBACF;AACR,MAAI,CAAC,IAAK,QAAO;AACjB,MAAI,IAAI,WAAW,SAAS,GAAG;AAC7B,WAAO,IAAI,QAAQ,WAAW,OAAO;AAAA,EACvC;AACA,MAAI,IAAI,WAAW,aAAa,GAAG;AACjC,WAAO;AAAA,EACT;AACA,MAAI;AACF,UAAM,EAAE,SAAS,IAAI,IAAI,IAAI,GAAG;AAChC,QAAI,CAAC,kBAAkB,IAAI,QAAQ,EAAG,QAAO;AAAA,EAC/C,QAAQ;AACN,WAAO;AAAA,EACT;AACA,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../src/utils/ipfs.ts"],"sourcesContent":["const DEFAULT_GATEWAY = \"/api/ipfs/\";\n\nconst ALLOWED_PROTOCOLS = new Set([\"http:\", \"https:\", \"ipfs:\"]);\n\nconst KNOWN_IPFS_GATEWAY_HOSTS = /(^|\\.)(mypinata\\.cloud|pinata\\.cloud|ipfs\\.io|dweb\\.link|cloudflare-ipfs\\.com|nftstorage\\.link|w3s\\.link)$/i;\n\nexport function ipfsToHttp(\n  uri: string | null | undefined,\n  gateway = DEFAULT_GATEWAY\n): string {\n  if (!uri) return \"\";\n  if (uri.startsWith(\"ipfs://\")) {\n    return uri.replace(\"ipfs://\", gateway);\n  }\n  if (uri.startsWith(\"data:image/\")) {\n    return uri;\n  }\n  try {\n    const parsed = new URL(uri);\n    if (!ALLOWED_PROTOCOLS.has(parsed.protocol)) return \"\";\n\n    if (KNOWN_IPFS_GATEWAY_HOSTS.test(parsed.hostname)) {\n      const match = parsed.pathname.match(/\\/ipfs\\/(.+)$/);\n      if (match) return `${gateway}${match[1]}`;\n    }\n  } catch {\n    return \"\";\n  }\n  return uri;\n}\n"],"mappings":"AAAA,MAAM,kBAAkB;AAExB,MAAM,oBAAoB,oBAAI,IAAI,CAAC,SAAS,UAAU,OAAO,CAAC;AAE9D,MAAM,2BAA2B;AAE1B,SAAS,WACd,KACA,UAAU,iBACF;AACR,MAAI,CAAC,IAAK,QAAO;AACjB,MAAI,IAAI,WAAW,SAAS,GAAG;AAC7B,WAAO,IAAI,QAAQ,WAAW,OAAO;AAAA,EACvC;AACA,MAAI,IAAI,WAAW,aAAa,GAAG;AACjC,WAAO;AAAA,EACT;AACA,MAAI;AACF,UAAM,SAAS,IAAI,IAAI,GAAG;AAC1B,QAAI,CAAC,kBAAkB,IAAI,OAAO,QAAQ,EAAG,QAAO;AAEpD,QAAI,yBAAyB,KAAK,OAAO,QAAQ,GAAG;AAClD,YAAM,QAAQ,OAAO,SAAS,MAAM,eAAe;AACnD,UAAI,MAAO,QAAO,GAAG,OAAO,GAAG,MAAM,CAAC,CAAC;AAAA,IACzC;AAAA,EACF,QAAQ;AACN,WAAO;AAAA,EACT;AACA,SAAO;AACT;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medialane/ui",
-  "version": "0.126.1",
+  "version": "0.126.3",
   "description": "Shared UI components for Medialane apps",
   "type": "module",
   "sideEffects": false,