@thead-vantage/react 2.23.0 → 2.25.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thead-vantage/react",
-  "version": "2.23.0",
+  "version": "2.25.0",
   "description": "React components and utilities for TheAd Vantage ad platform integration",
   "main": "./src/index.ts",
   "module": "./src/index.ts",

package/src/components/AdBanner.tsx

@@ -238,75 +238,79 @@ export function AdBanner({
 
   return (
     <div className={`relative ${className}`}>
+      <div className="relative">
+        <a
+          href={ad.targetUrl}
+          onClick={handleClick}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="block"
+        >
+          {(ad.type === 'image' || ad.type === 'standard') && ad.contentUrl ? (
+            <Image
+              src={ad.contentUrl}
+              alt={ad.name}
+              width={ad.width || 300}
+              height={ad.height || 250}
+              className="rounded-t"
+              unoptimized
+            />
+          ) : (
+            <div className="flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded-t" style={{ width: ad.width || 300, height: ad.height || 250 }}>
+              <span className="text-sm text-gray-500">Ad content</span>
+            </div>
+          )}
+        </a>
+        {showImpressionFinished && impressionStatus !== 'pending' && (
+          <div className="absolute top-2 right-2">
+            {impressionStatus === 'counting' ? (
+              <svg
+                className="w-5 h-5 text-gray-400 animate-spin"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+              >
+                <circle
+                  className="opacity-25"
+                  cx="12"
+                  cy="12"
+                  r="10"
+                  stroke="currentColor"
+                  strokeWidth="4"
+                />
+                <path
+                  className="opacity-75"
+                  fill="currentColor"
+                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                />
+              </svg>
+            ) : impressionStatus === 'completed' ? (
+              <svg
+                className="w-5 h-5 text-green-500"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                  clipRule="evenodd"
+                />
+              </svg>
+            ) : null}
+          </div>
+        )}
+      </div>
+      {/* TheAd Vantage branding bar */}
       <a
-        href={ad.targetUrl}
-        onClick={handleClick}
+        href="https://www.thead-vantage.com"
         target="_blank"
         rel="noopener noreferrer"
-        className="block"
+        className="block bg-black text-yellow-400 hover:text-yellow-300 text-xs font-medium py-1.5 px-2 text-center rounded-b transition-colors"
+        style={{ width: ad.width || 300 }}
       >
-        {(ad.type === 'image' || ad.type === 'standard') && ad.contentUrl ? (
-          <Image
-            src={ad.contentUrl}
-            alt={ad.name}
-            width={ad.width || 300}
-            height={ad.height || 250}
-            className="rounded"
-            unoptimized
-            onError={(e) => {
-              // If the logo fails to load (e.g., not in public folder when installed from npm),
-              // try loading from CDN
-              if (ad.id === 'thead-vantage-fallback' && ad.contentUrl === '/TheAd-Vantage-Logo.png') {
-                const target = e.target as HTMLImageElement;
-                target.src = 'https://www.thead-vantage.com/assets/TheAd-Vantage-Logo.png';
-              }
-            }}
-          />
-        ) : (
-          <div className="flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded" style={{ width: ad.width || 300, height: ad.height || 250 }}>
-            <span className="text-sm text-gray-500">Ad content</span>
-          </div>
-        )}
+        Advertise with thead-vantage.com
       </a>
-      {showImpressionFinished && impressionStatus !== 'pending' && (
-        <div className="absolute top-2 right-2">
-          {impressionStatus === 'counting' ? (
-            <svg
-              className="w-5 h-5 text-gray-400 animate-spin"
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-            >
-              <circle
-                className="opacity-25"
-                cx="12"
-                cy="12"
-                r="10"
-                stroke="currentColor"
-                strokeWidth="4"
-              />
-              <path
-                className="opacity-75"
-                fill="currentColor"
-                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-              />
-            </svg>
-          ) : impressionStatus === 'completed' ? (
-            <svg
-              className="w-5 h-5 text-green-500"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 20 20"
-              fill="currentColor"
-            >
-              <path
-                fillRule="evenodd"
-                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
-                clipRule="evenodd"
-              />
-            </svg>
-          ) : null}
-        </div>
-      )}
       {devMode && (
         <p className="text-xs text-gray-500 mt-1">[DEV] No tracking active</p>
       )}

package/src/lib/thead-vantage-assets.ts

@@ -3,28 +3,50 @@
  * 
  * Provides fallback assets that work both in the library and when installed from npm.
  * 
- * Note: When the library is installed from npm, the public folder isn't available.
- * The logo is loaded from a CDN URL that works in all environments.
+ * The logo is imported as a module so it gets bundled with the library.
+ * Next.js will process this import and create a URL that works in consuming applications.
  */
 
+// Import the logo image - Next.js will process this and bundle it
+// When the library is used in other Next.js apps, the image will be available
+import theadVantageLogoSrc from '../assets/TheAd-Vantage-Logo.png';
+
 /**
  * Get the URL for the TheAd Vantage logo fallback ad
  * 
- * Uses a CDN URL that works when the library is installed from npm.
- * For local development of the library itself, it will try the public folder first.
+ * Uses the imported image module. Next.js processes image imports and creates
+ * a URL that points to the bundled asset. This works when the library is installed
+ * from npm because the image is included in the library bundle.
  */
 export function getTheadVantageLogoUrl(): string {
-  // Check if we're in the library's own development environment
-  // (where the public folder exists)
-  if (typeof window !== 'undefined') {
-    // Try public folder first (works in library's own dev environment)
-    // This will 404 when installed from npm, but that's okay - the Image component will handle it
-    // and we can add error handling if needed
-    return '/TheAd-Vantage-Logo.png';
+  // Next.js processes image imports and returns either:
+  // - A string URL (in some configurations)
+  // - An object with src, width, height properties (typical Next.js behavior)
+  
+  if (typeof theadVantageLogoSrc === 'string') {
+    return theadVantageLogoSrc;
+  }
+  
+  // Next.js Image import typically returns an object with src property
+  if (typeof theadVantageLogoSrc === 'object' && theadVantageLogoSrc !== null) {
+    // Check for src property (Next.js ImageStaticImport type)
+    if ('src' in theadVantageLogoSrc) {
+      return (theadVantageLogoSrc as { src: string }).src;
+    }
+    // Some bundlers might return the object directly with a default export
+    if ('default' in theadVantageLogoSrc) {
+      const defaultExport = (theadVantageLogoSrc as { default: string | { src: string } }).default;
+      if (typeof defaultExport === 'string') {
+        return defaultExport;
+      }
+      if (typeof defaultExport === 'object' && defaultExport !== null && 'src' in defaultExport) {
+        return (defaultExport as { src: string }).src;
+      }
+    }
   }
   
-  // Server-side: return public folder path
-  return '/TheAd-Vantage-Logo.png';
+  // Fallback to CDN if import doesn't work as expected
+  return 'https://www.thead-vantage.com/assets/TheAd-Vantage-Logo.png';
 }
 
 /**