UNPKG

admesh-ui-sdk

Version:

Beautiful, modern React components for displaying AI-powered product recommendations with citation-based conversation ads, auto-triggered widgets, floating chat, conversational interfaces, persistent sidebar, and built-in tracking. Includes zero-code SDK

973 lines (840 loc) 95 kB
"use strict";var Te=Object.defineProperty;var Ee=(t,e,o)=>e in t?Te(t,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[e]=o;var L=(t,e,o)=>Ee(t,typeof e!="symbol"?e+"":e,o);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),je=require("react-dom/client"),h=require("react");function Ie(t,e,o){const d=t*e>242500;return{...{visibilityThreshold:d?.3:.5,minimumDuration:1e3,isLargeAd:d},...o}}function Le(t){return t<768?"mobile":t<1024?"tablet":"desktop"}function Re(t){const e=t.getBoundingClientRect(),o=window.innerHeight||document.documentElement.clientHeight,n=window.innerWidth||document.documentElement.clientWidth,d=e.height,r=e.width;if(d===0||r===0)return 0;const a=Math.max(0,e.top),i=Math.min(o,e.bottom),l=Math.max(0,e.left),g=Math.min(n,e.right),c=Math.max(0,i-a),u=Math.max(0,g-l),p=c*u,b=d*r;return b>0?p/b:0}function de(){const t=window.innerHeight,e=document.documentElement.scrollHeight,o=window.pageYOffset||document.documentElement.scrollTop,n=e-t;return n<=0?100:Math.min(100,o/n*100)}function Ne(t){const e=t.getBoundingClientRect(),o=window.pageYOffset||document.documentElement.scrollTop,n=window.pageXOffset||document.documentElement.scrollLeft;return{top:e.top+o,left:e.left+n}}function Pe(t){const e=t.getBoundingClientRect(),o=Ne(t),n=window.innerWidth||document.documentElement.clientWidth,d=window.innerHeight||document.documentElement.clientHeight,r=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches;return{pageUrl:window.location.href,pageTitle:document.title,referrer:document.referrer,deviceType:Le(n),viewportWidth:n,viewportHeight:d,adWidth:e.width,adHeight:e.height,adPositionTop:o.top,adPositionLeft:o.left,isDarkMode:r,language:navigator.language,timezone:Intl.DateTimeFormat().resolvedOptions().timeZone}}function De(){return`session_${Date.now()}_${Math.random().toString(36).substring(2,11)}`}function Fe(t,e,o){return t>=o.visibilityThreshold&&e>=o.minimumDuration}function ce(t=new Date){return t.toISOString()}function ze(t){return t.length===0?0:t.reduce((o,n)=>o+n,0)/t.length}function le(t,e){let o;return function(...d){o||(t(...d),o=!0,setTimeout(()=>o=!1,e))}}const Be={enabled:!0,apiEndpoint:"",enableBatching:!1,batchSize:10,batchTimeout:5e3,debug:!1,enableRetry:!1,maxRetries:3,retryDelay:1e3};let Ve=Be;function pe({adId:t,productId:e,offerId:o,agentId:n,recommendationId:d,elementRef:r,config:a}){const i={...Ve,...a},l=h.useRef(De()),[g,c]=h.useState({isVisible:!1,isViewable:!1,visibilityPercentage:0,timeMetrics:{loadedAt:ce(),totalVisibleDuration:0,totalViewableDuration:0,totalHoverDuration:0,totalFocusDuration:0},engagementMetrics:{currentScrollDepth:0,viewportEnterCount:0,viewportExitCount:0,hoverCount:0,wasClicked:!1,maxVisibilityPercentage:0,averageVisibilityPercentage:0},isTracking:i.enabled}),u=h.useRef(null),p=h.useRef(null),b=h.useRef(null),f=h.useRef(null),x=h.useRef(null),y=h.useRef([]),m=h.useRef([]),_=h.useRef(null),M=h.useCallback(v=>{i.debug&&console.log(`[AdMesh Viewability] ${v}`)},[i.debug]),w=h.useCallback(async(v,A)=>{if(!(!i.enabled||!r.current||!u.current)&&(M(`Analytics disabled - skipping event: ${v}`),i.onEvent)){const T=Pe(r.current),C={eventType:v,timestamp:ce(),sessionId:l.current,adId:t,productId:e,offerId:o,agentId:n,recommendationId:d,timeMetrics:g.timeMetrics,engagementMetrics:g.engagementMetrics,contextMetrics:T,mrcStandards:u.current,isViewable:g.isViewable,metadata:A};i.onEvent(C)}},[i,t,e,o,n,r,g,M]),k=h.useCallback(async()=>{m.current.length!==0&&(M("Analytics disabled - clearing batch without sending"),m.current=[],_.current&&(clearTimeout(_.current),_.current=null))},[M]),E=h.useCallback(le(()=>{if(!r.current)return;const v=Re(r.current),A=Date.now(),T=new Date(g.timeMetrics.loadedAt).getTime();c(C=>{const S={...C};v>0&&y.current.push(v);const I=C.isVisible,R=v>0;if(R&&!I)p.current=A,S.engagementMetrics.viewportEnterCount++,S.timeMetrics.timeToFirstVisible||(S.timeMetrics.timeToFirstVisible=A-T,S.engagementMetrics.scrollDepthAtFirstVisible=de(),w("ad_visible"));else if(!R&&I){if(p.current){const N=A-p.current;S.timeMetrics.totalVisibleDuration+=N,p.current=null}S.engagementMetrics.viewportExitCount++,w("ad_hidden")}else if(R&&I&&p.current){const N=A-p.current;S.timeMetrics.totalVisibleDuration+=N,p.current=A}if(S.isVisible=R,S.visibilityPercentage=v,v>S.engagementMetrics.maxVisibilityPercentage&&(S.engagementMetrics.maxVisibilityPercentage=v),y.current.length>0&&(S.engagementMetrics.averageVisibilityPercentage=ze(y.current)),u.current){const N=C.isViewable,D=Fe(v,S.timeMetrics.totalVisibleDuration,u.current);if(D&&!N)S.isViewable=!0,S.timeMetrics.timeToViewable=A-T,b.current=A,w("ad_viewable");else if(D&&N&&b.current){const F=A-b.current;S.timeMetrics.totalViewableDuration+=F,b.current=A}}return S.engagementMetrics.currentScrollDepth=de(),S})},100),[r,g.timeMetrics.loadedAt,w]);return h.useEffect(()=>{if(!r.current)return;const v=r.current.getBoundingClientRect();u.current=Ie(v.width,v.height,i.mrcStandards),M("Initialized MRC standards"),w("ad_loaded")},[r,i.mrcStandards,M,w]),h.useEffect(()=>{if(!i.enabled||!r.current)return;const v=new IntersectionObserver(A=>{A.forEach(()=>{E()})},{threshold:[0,.1,.2,.3,.4,.5,.6,.7,.8,.9,1],rootMargin:"0px"});return v.observe(r.current),()=>{v.disconnect()}},[i.enabled,r,E]),h.useEffect(()=>{if(!i.enabled)return;const v=le(()=>{E()},100);return window.addEventListener("scroll",v,{passive:!0}),()=>window.removeEventListener("scroll",v)},[i.enabled,E]),h.useEffect(()=>{if(!i.enabled||!r.current)return;const v=r.current,A=()=>{f.current=Date.now(),c(C=>({...C,engagementMetrics:{...C.engagementMetrics,hoverCount:C.engagementMetrics.hoverCount+1}})),w("ad_hover_start")},T=()=>{if(f.current){const C=Date.now()-f.current;c(S=>({...S,timeMetrics:{...S.timeMetrics,totalHoverDuration:S.timeMetrics.totalHoverDuration+C}})),f.current=null,w("ad_hover_end",{hoverDuration:C})}};return v.addEventListener("mouseenter",A),v.addEventListener("mouseleave",T),()=>{v.removeEventListener("mouseenter",A),v.removeEventListener("mouseleave",T)}},[i.enabled,r,w]),h.useEffect(()=>{if(!i.enabled||!r.current)return;const v=r.current,A=()=>{x.current=Date.now(),w("ad_focus")},T=()=>{if(x.current){const C=Date.now()-x.current;c(S=>({...S,timeMetrics:{...S.timeMetrics,totalFocusDuration:S.timeMetrics.totalFocusDuration+C}})),x.current=null,w("ad_blur",{focusDuration:C})}};return v.addEventListener("focus",A),v.addEventListener("blur",T),()=>{v.removeEventListener("focus",A),v.removeEventListener("blur",T)}},[i.enabled,r,w]),h.useEffect(()=>{if(!i.enabled||!r.current)return;const v=r.current,A=()=>{c(T=>({...T,engagementMetrics:{...T.engagementMetrics,wasClicked:!0}})),w("ad_click")};return v.addEventListener("click",A),()=>{v.removeEventListener("click",A)}},[i.enabled,r,w]),h.useEffect(()=>()=>{const v=Date.now(),A=new Date(g.timeMetrics.loadedAt).getTime(),T=v-A;c(C=>({...C,timeMetrics:{...C.timeMetrics,sessionDuration:T}})),w("ad_unloaded",{sessionDuration:T}),k()},[]),g}const B=({adId:t,productId:e,offerId:o,agentId:n,recommendationId:d,exposureUrl:r,sessionId:a,children:i,config:l,className:g,style:c,onViewabilityChange:u,onVisible:p,onViewable:b,onClick:f})=>{const x=h.useRef(null),y=h.useRef(!1),m=pe({adId:t,productId:e,offerId:o,agentId:n,recommendationId:d,elementRef:x,config:l}),_=h.useRef(m.isViewable);h.useEffect(()=>{m.isViewable!==_.current&&(_.current=m.isViewable,u&&u(m.isViewable),m.isViewable&&b&&b(),m.isViewable&&!y.current&&(console.log("[AdMeshViewabilityTracker] 🎯 Ad is viewable, checking exposure pixel requirements:",{exposureUrl:r?"present":"MISSING",sessionId:a?"present":"MISSING",adId:t,recommendationId:d}),r&&a?(y.current=!0,console.log("[AdMeshViewabilityTracker] 🔥 Firing exposure pixel:",r),fetch(r,{method:"GET",keepalive:!0}).then(()=>{console.log("[AdMesh] ✅ Exposure pixel fired successfully")}).catch(k=>{console.warn("[AdMesh] ⚠️ Failed to fire exposure pixel:",k),y.current=!1})):console.warn("[AdMeshViewabilityTracker] ⚠️ Cannot fire exposure pixel - missing required data:",{hasExposureUrl:!!r,hasSessionId:!!a})))},[m.isViewable,u,b,r,a,t,d]);const M=h.useRef(m.isVisible);h.useEffect(()=>{m.isVisible!==M.current&&(M.current=m.isVisible,m.isVisible&&p&&p())},[m.isVisible,p]);const w=()=>{f&&f()};return s.jsx("div",{ref:x,className:g,style:c,onClick:w,"data-admesh-viewability-tracker":!0,"data-ad-id":t,"data-is-viewable":m.isViewable,"data-is-visible":m.isVisible,"data-visibility-percentage":m.visibilityPercentage.toFixed(2),children:i})};B.displayName="AdMeshViewabilityTracker";const We=t=>t&&t.trim()?t.trim():"",ne=({recommendations:t,theme:e,className:o="",style:n={},sessionId:d})=>{if(!t||t.length===0)return console.log("[AdMesh Tail Ad] No recommendations provided - not rendering"),null;const r=t[0],a=(r==null?void 0:r.ad_id)||"",i=r==null?void 0:r.product_id,l=r==null?void 0:r.exposure_url,g=r==null?void 0:r.recommendation_id,c=(r==null?void 0:r.creative_input)||{},u=c.short_description||"",p=c.brand_name||(r==null?void 0:r.title)||"",b=c.product_name||"",f=(r==null?void 0:r.click_url)||(r==null?void 0:r.admesh_link)||c.cta_url||(r==null?void 0:r.url),x=We(c.cta_label);if(!p&&!b)return console.log("[AdMesh Tail Ad] No valid recommendation data provided - not rendering"),null;const y=b?`${p} — ${b}`:p;console.log("[AdMeshTailAd] 📊 Rendering with tracking data:",{adId:a,productId:i,recommendationId:g,exposureUrl:l?"present":"MISSING",sessionId:d?"present":"MISSING",recommendationsCount:t.length,clickUrl:f||"MISSING",clickUrlSource:r!=null&&r.click_url?"click_url":r!=null&&r.admesh_link?"admesh_link":c.cta_url?"cta_url":r!=null&&r.url?"url":"none",shortDescription:u?"present":"MISSING",brandName:p});const m=(w,k)=>{console.log(`AdMesh tail ad ${w} clicked`),typeof window<"u"&&window.admeshTracker&&window.admeshTracker.trackClick({adId:r.ad_id,productId:r.product_id,clickUrl:f,source:w}).catch(()=>{console.error(`[AdMesh] Failed to track ${w} click`)})},_=w=>{w.stopPropagation(),m("tail_ad_brand_name")},M=w=>{w.stopPropagation(),m("tail_ad_cta")};return s.jsx(B,{adId:a,productId:i,recommendationId:g,exposureUrl:l,sessionId:d,className:`admesh-tail-ad ${o}`,style:{fontFamily:(e==null?void 0:e.fontFamily)||'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',...n},children:s.jsxs("div",{className:"tail-ad-container",children:[y&&s.jsx("div",{className:"mb-2",children:s.jsx("h3",{className:"text-black dark:text-white font-semibold text-base",children:f&&p?s.jsxs(s.Fragment,{children:[s.jsx("a",{href:f,target:"_blank",rel:"noopener noreferrer",className:"text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 underline decoration-blue-600 dark:decoration-blue-400 hover:decoration-blue-800 dark:hover:decoration-blue-300 transition-colors duration-200 font-semibold",style:{color:"#2563eb",textDecoration:"underline",textDecorationColor:"#2563eb",textUnderlineOffset:"2px"},onClick:_,children:p}),b&&` — ${b}`]}):y})}),u&&s.jsx("p",{className:"text-gray-700 dark:text-gray-300 text-sm mb-3 leading-relaxed",children:u}),s.jsxs("div",{className:"flex items-center justify-between mt-2",children:[x&&f&&s.jsx("a",{href:f,target:"_blank",rel:"noopener noreferrer",className:"text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 underline decoration-blue-600 dark:decoration-blue-400 hover:decoration-blue-800 dark:hover:decoration-blue-300 transition-colors duration-200 font-medium text-sm",style:{color:"#2563eb",textDecoration:"underline",textDecorationColor:"#2563eb",textUnderlineOffset:"2px"},onClick:M,children:x}),s.jsx("p",{className:"text-xs text-gray-500 dark:text-gray-400",children:"Sponsored"})]})]})})};function $e(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}var te={exports:{}};/*! Copyright (c) 2018 Jed Watson. Licensed under the MIT License (MIT), see http://jedwatson.github.io/classnames */var me;function Oe(){return me||(me=1,(function(t){(function(){var e={}.hasOwnProperty;function o(){for(var r="",a=0;a<arguments.length;a++){var i=arguments[a];i&&(r=d(r,n(i)))}return r}function n(r){if(typeof r=="string"||typeof r=="number")return r;if(typeof r!="object")return"";if(Array.isArray(r))return o.apply(null,r);if(r.toString!==Object.prototype.toString&&!r.toString.toString().includes("[native code]"))return r.toString();var a="";for(var i in r)e.call(r,i)&&r[i]&&(a=d(a,i));return a}function d(r,a){return a?r?r+" "+a:r+a:r}t.exports?(o.default=o,t.exports=o):window.classNames=o})()})(te)),te.exports}var Ue=Oe();const V=$e(Ue),He="https://api.useadmesh.com/track";let Ke={enabled:!0,retryAttempts:3,retryDelay:1e3};const ge=t=>{const[e,o]=h.useState(!1),[n,d]=h.useState(null),r=h.useMemo(()=>({...Ke,...t}),[t]),a=h.useCallback(async(c,u)=>{if(!r.enabled)return;if(!u.adId||!u.admeshLink){d("Missing required tracking data: adId and admeshLink are required");return}o(!0),d(null);const p={event_type:c,ad_id:u.adId,admesh_link:u.admeshLink,product_id:u.productId,user_id:u.userId,session_id:u.sessionId,revenue:u.revenue,conversion_type:u.conversionType,metadata:u.metadata,timestamp:new Date().toISOString(),user_agent:navigator.userAgent,referrer:document.referrer,page_url:window.location.href};let b=null;for(let x=1;x<=(r.retryAttempts||3);x++)try{const y=await fetch(`${He}`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(p)});if(!y.ok)throw new Error(`HTTP ${y.status}: ${y.statusText}`);await y.json(),o(!1);return}catch(y){b=y,x<(r.retryAttempts||3)&&await new Promise(m=>setTimeout(m,(r.retryDelay||1e3)*x))}const f=`Failed to track ${c} event after ${r.retryAttempts} attempts: ${b==null?void 0:b.message}`;d(f),o(!1)},[r]),i=h.useCallback(async c=>a("click",c),[a]),l=h.useCallback(async c=>a("view",c),[a]),g=h.useCallback(async c=>a("conversion",c),[a]);return{trackClick:i,trackView:l,trackConversion:g,isTracking:e,error:n}},G=({adId:t,admeshLink:e,productId:o,children:n,trackingData:d,className:r,style:a})=>{const{trackClick:i,trackView:l}=ge(),g=h.useRef(null),c=h.useRef(!1);h.useEffect(()=>{if(!g.current||c.current)return;const p=new IntersectionObserver(b=>{b.forEach(f=>{f.isIntersecting&&!c.current&&(c.current=!0,l({adId:t,admeshLink:e,productId:o,...d}).catch(console.error))})},{threshold:.5,rootMargin:"0px"});return p.observe(g.current),()=>{p.disconnect()}},[t,e,o,d,l]);const u=h.useCallback(p=>{i({adId:t,admeshLink:e,productId:o,...d}).catch(()=>{console.error("[AdMesh] Failed to track click")}),p.target.closest("a")||window.open(e,"_blank","noopener,noreferrer")},[t,e,o,d,i]);return s.jsx("div",{ref:g,className:r,onClick:u,style:{cursor:"pointer",...a},children:n})};G.displayName="AdMeshLinkTracker";const re="admesh-ui-sdk-styles",oe="admesh-ui-sdk-reset",qe=` /* AdMesh UI SDK - CSS Reset & Normalization */ .admesh-component, .admesh-component * { box-sizing: border-box; margin: 0; padding: 0; border: 0; font-size: 100%; font-weight: normal; font-style: normal; line-height: 1.5; text-decoration: none; background: transparent; color: inherit; } .admesh-component { all: revert; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } .admesh-component button, .admesh-component a { cursor: pointer; border: none; background: none; padding: 0; margin: 0; font-family: inherit; font-size: inherit; color: inherit; } .admesh-component a { text-decoration: none; color: inherit; } .admesh-component button:focus, .admesh-component a:focus { outline: none; } .admesh-component img { max-width: 100%; height: auto; display: block; } .admesh-component ul, .admesh-component ol { list-style: none; } .admesh-component table { border-collapse: collapse; border-spacing: 0; } .admesh-component input, .admesh-component textarea, .admesh-component select { font-family: inherit; font-size: inherit; color: inherit; } /* Prevent Tailwind and other frameworks from affecting AdMesh */ .admesh-component .prose, .admesh-component .container, .admesh-component .grid, .admesh-component .flex { all: revert; } /* Ensure AdMesh components are not affected by dark mode utilities */ .admesh-component.dark, .admesh-component[data-admesh-theme="dark"] { color-scheme: dark; } .admesh-component.light, .admesh-component[data-admesh-theme="light"] { color-scheme: light; } `,Ge=` /* AdMesh Core Component Styles */ .admesh-component { position: relative; display: block; } /* Product Card Styles */ .admesh-product-card { position: relative; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); height: 100%; border-radius: 0.75rem; background: rgb(255, 255, 255); border: 1px solid rgb(229, 231, 235); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); overflow: hidden; } .admesh-product-card[data-admesh-theme="dark"] { background: rgb(17, 24, 39); border-color: rgb(31, 41, 55); } .admesh-product-card:hover { transform: translateY(-4px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); border-color: rgba(99, 102, 241, 0.2); } .admesh-product-card__container { position: relative; padding: 1rem; height: 100%; display: flex; flex-direction: column; gap: 0.75rem; z-index: 2; } .admesh-product-card__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.25rem; } .admesh-product-card__title { margin: 0; font-size: 1.5rem; font-weight: 700; line-height: 1.2; color: rgb(17, 24, 39); letter-spacing: -0.025em; transition: all 0.3s ease; } .admesh-product-card[data-admesh-theme="dark"] .admesh-product-card__title { color: rgb(243, 244, 246); } .admesh-product-card:hover .admesh-product-card__title { transform: translateX(4px); } .admesh-product-card__cta { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; white-space: nowrap; border-radius: 0.5rem; font-size: 1rem; font-weight: 600; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); padding: 0.75rem 1.5rem; background: rgb(0, 0, 0); color: rgb(255, 255, 255); border: none; cursor: pointer; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); overflow: hidden; } .admesh-product-card[data-admesh-theme="dark"] .admesh-product-card__cta { background: rgb(255, 255, 255); color: rgb(0, 0, 0); } .admesh-product-card__cta:hover { transform: translateY(-2px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); } .admesh-product-card__cta:active { transform: translateY(0); } /* Summary Unit Styles */ .admesh-summary-unit { font-size: 1rem; line-height: 1.6; color: rgb(17, 24, 39); } .admesh-summary-unit[data-admesh-theme="dark"] { color: rgb(243, 244, 246); } .admesh-summary-unit a { color: rgb(37, 99, 235); text-decoration: underline; text-decoration-color: rgb(37, 99, 235); text-underline-offset: 2px; transition: all 0.2s ease; font-weight: 500; } .admesh-summary-unit[data-admesh-theme="dark"] a { color: rgb(96, 165, 250); text-decoration-color: rgb(96, 165, 250); } .admesh-summary-unit a:hover { color: rgb(29, 78, 216); text-decoration-color: rgb(29, 78, 216); } .admesh-summary-unit[data-admesh-theme="dark"] a:hover { color: rgb(147, 197, 253); text-decoration-color: rgb(147, 197, 253); } /* Ecommerce Cards Styles */ .admesh-ecommerce-container { position: relative; width: 100%; } .admesh-ecommerce-card { flex-shrink: 0; background: white; border: 1px solid rgb(229, 231, 235); border-radius: 0.5rem; overflow: hidden; transition: all 0.2s ease-in-out; cursor: pointer; position: relative; } .admesh-ecommerce-card[data-admesh-theme="dark"] { background: rgb(31, 41, 55); border-color: rgb(55, 65, 81); color: white; } .admesh-ecommerce-card:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); } /* Badge Styles */ .admesh-badge { display: inline-flex; align-items: center; gap: 0.375rem; border-radius: 0.5rem; padding: 0.375rem 0.75rem; font-size: 0.875rem; font-weight: 600; transition: all 0.3s ease; position: relative; overflow: hidden; } .admesh-badge--primary { background: linear-gradient(135deg, rgb(99, 102, 241), rgb(79, 70, 229)); color: white; box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.3); } .admesh-badge--secondary { background: rgb(243, 244, 246); color: rgb(55, 65, 81); } .admesh-badge[data-admesh-theme="dark"].admesh-badge--secondary { background: rgb(31, 41, 55); color: rgb(209, 213, 219); } /* Responsive */ @media (max-width: 640px) { .admesh-product-card__container { padding: 0.75rem; gap: 0.5rem; } .admesh-product-card__title { font-size: 1.25rem; } .admesh-product-card__cta { padding: 0.5rem 1rem; font-size: 0.875rem; } } `,Ye=()=>{if(!(typeof document>"u")&&!(document.getElementById(oe)&&document.getElementById(re))){if(!document.getElementById(oe)){const t=document.createElement("style");t.id=oe,t.textContent=qe,document.head.appendChild(t)}if(!document.getElementById(re)){const t=document.createElement("style");t.id=re,t.textContent=Ge,document.head.appendChild(t)}}},Ze=` /* AdMesh UI SDK - Complete Self-Contained Styles */ /* CSS Reset for AdMesh components */ .admesh-component, .admesh-component * { box-sizing: border-box; } /* CSS Variables - Black/White Color Scheme */ .admesh-component { --admesh-primary: #000000; --admesh-primary-hover: #333333; --admesh-secondary: #666666; --admesh-accent: #000000; --admesh-background: #ffffff; --admesh-surface: #ffffff; --admesh-border: #e5e7eb; --admesh-text: #000000; --admesh-text-muted: #666666; --admesh-text-light: #999999; --admesh-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --admesh-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --admesh-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --admesh-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --admesh-radius: 0.5rem; --admesh-radius-sm: 0.25rem; --admesh-radius-lg: 0.75rem; --admesh-radius-xl: 1rem; } .admesh-component[data-admesh-theme="dark"] { --admesh-primary: #ffffff; --admesh-primary-hover: #e5e7eb; --admesh-secondary: #9ca3af; --admesh-accent: #ffffff; --admesh-background: #000000; --admesh-surface: #111111; --admesh-border: #333333; --admesh-text: #ffffff; --admesh-text-muted: #9ca3af; --admesh-text-light: #666666; --admesh-shadow: 0 1px 3px 0 rgb(255 255 255 / 0.1), 0 1px 2px -1px rgb(255 255 255 / 0.1); --admesh-shadow-md: 0 4px 6px -1px rgb(255 255 255 / 0.1), 0 2px 4px -2px rgb(255 255 255 / 0.1); --admesh-shadow-lg: 0 10px 15px -3px rgb(255 255 255 / 0.1), 0 4px 6px -4px rgb(255 255 255 / 0.1); --admesh-shadow-xl: 0 20px 25px -5px rgb(255 255 255 / 0.1), 0 8px 10px -6px rgb(255 255 255 / 0.1); } /* Layout Styles */ .admesh-layout { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--admesh-text); background-color: var(--admesh-background); border-radius: var(--admesh-radius); padding: 1.5rem; box-shadow: var(--admesh-shadow); border: 1px solid var(--admesh-border); /* Consistent width: 100% for all layouts except ecommerce */ width: 100%; } /* Ecommerce layout exception */ .admesh-layout--ecommerce { width: auto; } /* Citation Unit Styles */ .admesh-citation-unit { width: 100%; } /* Inline Recommendation Styles */ .admesh-inline-recommendation { width: 100%; } /* Simple Ad Styles */ .admesh-simple-ad { width: 100%; } .admesh-layout__header { margin-bottom: 1.5rem; text-align: center; } .admesh-layout__title { font-size: 1.25rem; font-weight: 600; color: var(--admesh-text); margin-bottom: 0.5rem; } .admesh-layout__subtitle { font-size: 0.875rem; color: var(--admesh-text-muted); } .admesh-layout__cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .admesh-layout__more-indicator { text-align: center; padding: 1rem; color: var(--admesh-text-muted); font-size: 0.875rem; } .admesh-layout__empty { text-align: center; padding: 3rem 1rem; } .admesh-layout__empty-content h3 { font-size: 1.125rem; font-weight: 600; color: var(--admesh-text-muted); margin-bottom: 0.5rem; } .admesh-layout__empty-content p { font-size: 0.875rem; color: var(--admesh-text-muted); } /* Product Card Styles */ .admesh-product-card { background-color: var(--admesh-surface); border: 1px solid var(--admesh-border); border-radius: var(--admesh-radius); padding: 1.5rem; transition: all 0.2s ease-in-out; position: relative; overflow: hidden; /* Consistent width: 100% for product cards */ width: 100%; } .admesh-product-card:hover { box-shadow: var(--admesh-shadow-lg); transform: translateY(-2px); border-color: var(--admesh-primary); } .admesh-product-card__header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; } .admesh-product-card__title { font-size: 1.125rem; font-weight: 600; color: var(--admesh-text); margin-bottom: 0.5rem; line-height: 1.4; } .admesh-product-card__reason { font-size: 0.875rem; color: var(--admesh-text-muted); line-height: 1.5; margin-bottom: 1rem; } .admesh-product-card__match-score { margin-bottom: 1rem; } .admesh-product-card__match-score-label { display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; color: var(--admesh-text-muted); margin-bottom: 0.25rem; } .admesh-product-card__match-score-bar { width: 100%; height: 0.375rem; background-color: var(--admesh-border); border-radius: var(--admesh-radius-sm); overflow: hidden; } .admesh-product-card__match-score-fill { height: 100%; background: var(--admesh-primary); border-radius: var(--admesh-radius-sm); transition: width 0.3s ease-in-out; } .admesh-product-card__badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; } .admesh-product-card__badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.5rem; background-color: var(--admesh-primary); color: white; font-size: 0.75rem; font-weight: 500; border-radius: var(--admesh-radius-sm); } .admesh-product-card__badge--secondary { background-color: var(--admesh-secondary); } .admesh-product-card__keywords { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 1rem; } .admesh-product-card__keyword { padding: 0.125rem 0.375rem; background-color: var(--admesh-border); color: var(--admesh-text-muted); font-size: 0.75rem; border-radius: var(--admesh-radius-sm); } /* Dark mode specific enhancements */ .admesh-component[data-admesh-theme="dark"] .admesh-product-card__keyword { background-color: #4b5563; color: #d1d5db; } .admesh-component[data-admesh-theme="dark"] .admesh-product-card:hover { border-color: var(--admesh-primary); background-color: #374151; } .admesh-component[data-admesh-theme="dark"] .admesh-product-card__button:hover { background: var(--admesh-primary-hover); } .admesh-product-card__footer { display: flex; justify-content: flex-end; margin-top: 1.5rem; } /* Mobile-specific sidebar improvements */ @media (max-width: 640px) { .admesh-sidebar { /* Ensure proper mobile viewport handling */ height: 100vh !important; height: 100dvh !important; /* Dynamic viewport height for mobile browsers */ max-height: 100vh !important; max-height: 100dvh !important; width: 100vw !important; max-width: 90vw !important; overflow: hidden !important; } .admesh-sidebar.relative { height: 100% !important; width: 100% !important; max-width: 100% !important; } /* Improve touch scrolling */ .admesh-sidebar .overflow-y-auto { -webkit-overflow-scrolling: touch !important; overscroll-behavior: contain !important; scroll-behavior: smooth !important; } /* Prevent body scroll when sidebar is open */ body:has(.admesh-sidebar[data-mobile-open="true"]) { overflow: hidden !important; position: fixed !important; width: 100% !important; } } /* Tablet improvements */ @media (min-width: 641px) and (max-width: 1024px) { .admesh-sidebar { max-width: 400px !important; } } /* Mobile responsiveness improvements for all components */ @media (max-width: 640px) { /* Product cards mobile optimization */ .admesh-card { padding: 0.75rem !important; margin-bottom: 0.75rem !important; } /* Inline recommendations mobile optimization */ .admesh-inline-recommendation { padding: 0.5rem !important; margin-bottom: 0.5rem !important; } /* Conversation summary mobile optimization */ .admesh-conversation-summary { padding: 1rem !important; } /* Percentage text mobile improvements */ .admesh-component .text-xs { font-size: 0.75rem !important; line-height: 1rem !important; } .admesh-component .text-sm { font-size: 0.875rem !important; line-height: 1.25rem !important; } /* Button mobile improvements */ .admesh-component button { padding: 0.375rem 0.75rem !important; font-size: 0.75rem !important; min-height: 2rem !important; touch-action: manipulation !important; } /* Badge mobile improvements */ .admesh-component .rounded-full { padding: 0.25rem 0.5rem !important; font-size: 0.625rem !important; line-height: 1rem !important; } /* Progress bar mobile improvements */ .admesh-component .bg-gray-200, .admesh-component .bg-slate-600 { height: 0.25rem !important; } /* Flex layout mobile improvements */ .admesh-component .flex { flex-wrap: wrap !important; } .admesh-component .gap-2 { gap: 0.375rem !important; } .admesh-component .gap-3 { gap: 0.5rem !important; } } .admesh-product-card__button { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; background: var(--admesh-primary); color: var(--admesh-background); font-size: 0.875rem; font-weight: 500; border: none; border-radius: var(--admesh-radius); cursor: pointer; transition: all 0.2s ease-in-out; text-decoration: none; } .admesh-product-card__button:hover { transform: translateY(-1px); box-shadow: var(--admesh-shadow-lg); } /* Utility Classes */ .admesh-text-xs { font-size: 0.75rem; } .admesh-text-sm { font-size: 0.875rem; } .admesh-text-base { font-size: 1rem; } .admesh-text-lg { font-size: 1.125rem; } .admesh-text-xl { font-size: 1.25rem; } .admesh-font-medium { font-weight: 500; } .admesh-font-semibold { font-weight: 600; } .admesh-font-bold { font-weight: 700; } .admesh-text-muted { color: var(--admesh-text-muted); } /* Comparison Table Styles */ .admesh-compare-table { width: 100%; border-collapse: collapse; background-color: var(--admesh-surface); border: 1px solid var(--admesh-border); border-radius: var(--admesh-radius); overflow: hidden; } .admesh-compare-table th, .admesh-compare-table td { padding: 0.75rem; text-align: left; border-bottom: 1px solid var(--admesh-border); } .admesh-compare-table th { background-color: var(--admesh-background); font-weight: 600; color: var(--admesh-text); font-size: 0.875rem; } .admesh-compare-table td { color: var(--admesh-text); font-size: 0.875rem; } .admesh-compare-table tr:hover { background-color: var(--admesh-border); } /* Dark mode table enhancements */ .admesh-component[data-admesh-theme="dark"] .admesh-compare-table th { background-color: #374151; } .admesh-component[data-admesh-theme="dark"] .admesh-compare-table tr:hover { background-color: #4b5563; } /* Responsive Design */ @media (max-width: 768px) { .admesh-layout { padding: 1rem; } .admesh-layout__cards-grid { grid-template-columns: 1fr; gap: 0.75rem; } .admesh-product-card { padding: 1rem; } .admesh-compare-table { font-size: 0.75rem; } .admesh-compare-table th, .admesh-compare-table td { padding: 0.5rem; } } /* Essential Utility Classes for Self-Contained SDK - High Specificity */ .admesh-component .relative { position: relative !important; } .admesh-component .absolute { position: absolute !important; } .admesh-component .flex { display: flex !important; } .admesh-component .inline-flex { display: inline-flex !important; } .admesh-component .grid { display: grid !important; } .admesh-component .hidden { display: none !important; } .admesh-component .block { display: block !important; } .admesh-component .inline-block { display: inline-block !important; } /* Flexbox utilities */ .admesh-component .flex-col { flex-direction: column !important; } .admesh-component .flex-row { flex-direction: row !important; } .admesh-component .flex-wrap { flex-wrap: wrap !important; } .admesh-component .items-center { align-items: center !important; } .admesh-component .items-start { align-items: flex-start !important; } .admesh-component .items-end { align-items: flex-end !important; } .admesh-component .justify-center { justify-content: center !important; } .admesh-component .justify-between { justify-content: space-between !important; } .admesh-component .justify-end { justify-content: flex-end !important; } .admesh-component .flex-1 { flex: 1 1 0% !important; } .admesh-component .flex-shrink-0 { flex-shrink: 0 !important; } /* Grid utilities */ .admesh-component .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .admesh-component .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admesh-component .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Spacing utilities */ .admesh-component .gap-1 { gap: 0.25rem; } .admesh-component .gap-2 { gap: 0.5rem; } .admesh-component .gap-3 { gap: 0.75rem; } .admesh-component .gap-4 { gap: 1rem; } .admesh-component .gap-6 { gap: 1.5rem; } .admesh-component .gap-8 { gap: 2rem; } /* Padding utilities */ .admesh-component .p-1 { padding: 0.25rem; } .admesh-component .p-2 { padding: 0.5rem; } .admesh-component .p-3 { padding: 0.75rem; } .admesh-component .p-4 { padding: 1rem; } .admesh-component .p-5 { padding: 1.25rem; } .admesh-component .p-6 { padding: 1.5rem; } .admesh-component .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; } .admesh-component .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; } .admesh-component .px-4 { padding-left: 1rem; padding-right: 1rem; } .admesh-component .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; } .admesh-component .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .admesh-component .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; } .admesh-component .pt-2 { padding-top: 0.5rem; } .admesh-component .pt-3 { padding-top: 0.75rem; } .admesh-component .pb-2 { padding-bottom: 0.5rem; } .admesh-component .pb-3 { padding-bottom: 0.75rem; } /* Margin utilities */ .admesh-component .m-0 { margin: 0; } .admesh-component .mb-1 { margin-bottom: 0.25rem; } .admesh-component .mb-2 { margin-bottom: 0.5rem; } .admesh-component .mb-3 { margin-bottom: 0.75rem; } .admesh-component .mb-4 { margin-bottom: 1rem; } .admesh-component .mb-6 { margin-bottom: 1.5rem; } .admesh-component .mt-1 { margin-top: 0.25rem; } .admesh-component .mt-2 { margin-top: 0.5rem; } .admesh-component .mt-4 { margin-top: 1rem; } .admesh-component .mt-6 { margin-top: 1.5rem; } .admesh-component .mt-auto { margin-top: auto; } .admesh-component .ml-1 { margin-left: 0.25rem; } .admesh-component .mr-1 { margin-right: 0.25rem; } .admesh-component .mr-2 { margin-right: 0.5rem; } /* Width and height utilities */ .admesh-component .w-2 { width: 0.5rem; } .admesh-component .w-3 { width: 0.75rem; } .admesh-component .w-4 { width: 1rem; } .admesh-component .w-5 { width: 1.25rem; } .admesh-component .w-6 { width: 1.5rem; } .admesh-component .w-full { width: 100%; } .admesh-component .w-fit { width: fit-content; } .admesh-component .h-2 { height: 0.5rem; } .admesh-component .h-3 { height: 0.75rem; } .admesh-component .h-4 { height: 1rem; } .admesh-component .h-5 { height: 1.25rem; } .admesh-component .h-6 { height: 1.5rem; } .admesh-component .h-full { height: 100%; } .admesh-component .min-w-0 { min-width: 0px; } /* Border utilities */ .admesh-component .border { border-width: 1px; } .admesh-component .border-t { border-top-width: 1px; } .admesh-component .border-gray-100 { border-color: #f3f4f6; } .admesh-component .border-gray-200 { border-color: #e5e7eb; } .admesh-component .border-gray-300 { border-color: #d1d5db; } .admesh-component .border-blue-200 { border-color: #bfdbfe; } .admesh-component .border-green-200 { border-color: #bbf7d0; } /* Border radius utilities */ .admesh-component .rounded { border-radius: 0.25rem !important; } .admesh-component .rounded-md { border-radius: 0.375rem !important; } .admesh-component .rounded-lg { border-radius: 0.5rem !important; } .admesh-component .rounded-xl { border-radius: 0.75rem !important; } .admesh-component .rounded-full { border-radius: 9999px !important; } /* Background utilities */ .admesh-component .bg-white { background-color: #ffffff; } .admesh-component .bg-gray-50 { background-color: #f9fafb; } .admesh-component .bg-gray-100 { background-color: #f3f4f6; } .admesh-component .bg-blue-50 { background-color: #eff6ff; } .admesh-component .bg-blue-100 { background-color: #dbeafe; } .admesh-component .bg-green-100 { background-color: #dcfce7; } .admesh-component .bg-green-500 { background-color: #22c55e; } .admesh-component .bg-blue-500 { background-color: #3b82f6; } /* Solid backgrounds - no gradients for minimal design */ .admesh-component .bg-primary { background-color: var(--admesh-primary); } .admesh-component .bg-secondary { background-color: var(--admesh-secondary); } .admesh-component .bg-surface { background-color: var(--admesh-surface); } .admesh-component .bg-background { background-color: var(--admesh-background); } /* Text utilities */ .admesh-component .text-xs { font-size: 0.75rem; line-height: 1rem; } .admesh-component .text-sm { font-size: 0.875rem; line-height: 1.25rem; } .admesh-component .text-base { font-size: 1rem; line-height: 1.5rem; } .admesh-component .text-lg { font-size: 1.125rem; line-height: 1.75rem; } .admesh-component .text-xl { font-size: 1.25rem; line-height: 1.75rem; } .admesh-component .font-medium { font-weight: 500; } .admesh-component .font-semibold { font-weight: 600; } .admesh-component .font-bold { font-weight: 700; } .admesh-component .leading-relaxed { line-height: 1.625; } /* Text colors */ .admesh-component .text-white { color: #ffffff; } .admesh-component .text-gray-400 { color: #9ca3af; } .admesh-component .text-gray-500 { color: #6b7280; } .admesh-component .text-gray-600 { color: #4b5563; } .admesh-component .text-gray-700 { color: #374151; } .admesh-component .text-gray-800 { color: #1f2937; } .admesh-component .text-blue-600 { color: #2563eb; } .admesh-component .text-blue-700 { color: #1d4ed8; } .admesh-component .text-green-700 { color: #15803d; } /* Shadow utilities */ .admesh-component .shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); } .admesh-component .shadow { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); } .admesh-component .shadow-md { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); } .admesh-component .shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); } .admesh-component .shadow-xl { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); } /* Transition utilities */ .admesh-component .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .admesh-component .transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .admesh-component .duration-200 { transition-duration: 200ms; } .admesh-component .duration-300 { transition-duration: 300ms; } /* Transform utilities */ .admesh-component .hover\\:-translate-y-1:hover { transform: translateY(-0.25rem); } .admesh-component .hover\\:scale-105:hover { transform: scale(1.05); } /* Hover utilities */ .admesh-component .hover\\:shadow-xl:hover { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); } .admesh-component .hover\\:bg-gray-100:hover { background-color: #f3f4f6; } .admesh-component .hover\\:text-blue-800:hover { color: #1e40af; } /* Cursor utilities */ .admesh-component .cursor-pointer { cursor: pointer; } /* Overflow utilities */ .admesh-component .overflow-hidden { overflow: hidden; } .admesh-component .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Text decoration */ .admesh-component .underline { text-decoration-line: underline; } /* Whitespace */ .admesh-component .whitespace-nowrap { white-space: nowrap; } /* Dark mode utilities */ @media (prefers-color-scheme: dark) { .admesh-component .dark\\:bg-slate-800 { background-color: #1e293b; } .admesh-component .dark\\:bg-slate-900 { background-color: #0f172a; } .admesh-component .dark\\:border-slate-700 { border-color: #334155; } .admesh-component .dark\\:text-white { color: #ffffff; } .admesh-component .dark\\:text-gray-200 { color: #e5e7eb; } .admesh-component .dark\\:text-gray-300 { color: #d1d5db; } .admesh-component .dark\\:text-gray-400 { color: #9ca3af; } .admesh-component .dark\\:text-blue-400 { color: #60a5fa; } } /* Responsive utilities */ @media (min-width: 640px) { .admesh-component .sm\\:p-5 { padding: 1.25rem; } .admesh-component .sm\\:text-base { font-size: 1rem; line-height: 1.5rem; } .admesh-component .sm\\:text-lg { font-size: 1.125rem; line-height: 1.75rem; } .admesh-component .sm\\:flex-row { flex-direction: row; } .admesh-component .sm\\:items-center { align-items: center; } .admesh-component .sm\\:justify-between { justify-content: space-between; } } @media (min-width: 768px) { .admesh-component .md\\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .admesh-component .lg\\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .admesh-component .lg\\:col-span-1 { grid-column: span 1 / span 1; } } `;let ue=!1;const fe=()=>{h.useEffect(()=>{if(!ue){try{Ye();const t=document.createElement("style");t.id="admesh-ui-sdk-styles-legacy",t.textContent=Ze,document.getElementById("admesh-ui-sdk-styles-legacy")||document.head.appendChild(t),ue=!0}catch{console.error("[AdMesh] Failed to inject styles")}return()=>{}}},[])},Y=(t,e={})=>{const o=t.intent_match_score||0,n=e.customLabels||{};return o>=.8?n.partnerRecommendation||"Smart Pick":o>=.6?n.partnerMatch||"Partner Recommendation":o>=.3?n.promotedOption||"Promoted Match":n.relatedOption||"Related"},he=(t,e)=>{const o=t.intent_match_score||0;return o>=.8?"This recommendation is from a partner who compensates us when you engage. We've matched it to your needs based on your query.":o>=.6?"Top-rated partner solution matched to your specific requirements. Partner compensates us for qualified referrals.":o>=.3?"This partner solution may be relevant to your needs. The partner compensates us when you take qualifying actions.":"This solution is somewhat related to your query. While not a perfect match, it might still be helpful. This partner compensates us for qualified referrals."},ae=({recommendation:t,theme:e,variation:o="default",className:n,style:d,sessionId:r})=>{var p,b,f,x,y,m,_,M,w,k,E,v,A,T,C,S,I,R,N,D,F,$,O,U,H;if(!t||typeof t!="object")return console.log("[AdMesh Product Card] No recommendation provided - not rendering"),null;if(!t.ad_id&&!t.recommendation_id&&!t.title)return console.log("[AdMesh Product Card] Invalid recommendation object (missing required fields) - not rendering"),null;fe();const i=(()=>{const j=t.creative_input||{},P=j.product_name||t.title||t.product_title||"";let z="";o==="simple"?z=j.short_description||j.context_snippet||t.product_summary||t.weave_summary||t.reason||"":z=j.long_description||j.short_description||t.product_summary||t.weave_summary||t.reason||"";const K=j.cta_label||P;return o==="simple"?{title:P,description:z,ctaText:K,isSimple:!0}:{title:P,description:z,ctaText:K}})(),l=V("admesh-component","admesh-card","relative p-3 sm:p-4 rounded-xl bg-gradient-to-br from-white to-gray-50 dark:from-slate-800 dark:to-slate-900 border border-gray-200/50 dark:border-slate-700/50 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1",n),g=e?{"--admesh-primary":e.primaryColor||e.accentColor||"#3b82f6","--admesh-secondary":e.secondaryColor||"#10b981","--admesh-accent":e.accentColor||"#3b82f6","--admesh-background":e.backgroundColor,"--admesh-surface":e.surfaceColor,"--admesh-border":e.borderColor,"--admesh-text":e.textColor,"--admesh-text-secondary":e.textSecondaryColor,"--admesh-radius":e.borderRadius||"12px","--admesh-shadow-sm":(p=e.shadows)==null?void 0:p.small,"--admesh-shadow-md":(b=e.shadows)==null?void 0:b.medium,"--admesh-shadow-lg":(f=e.shadows)==null?void 0:f.large,"--admesh-spacing-sm":(x=e.spacing)==null?void 0:x.small,"--admesh-spacing-md":(y=e.spacing)==null?void 0:y.medium,"--admesh-spacing-lg":(m=e.spacing)==null?void 0:m.large,"--admesh-font-size-sm":(_=e.fontSize)==null?void 0:_.small,"--admesh-font-size-base":(M=e.fontSize)==null?void 0:M.base,"--admesh-font-size-lg":(w=e.fontSize)==null?void 0:w.large,"--admesh-font-size-title":(k=e.fontSize)==null?void 0:k.title,fontFamily:e.fontFamily,width:((v=(E=e.components)==null?void 0:E.productCard)==null?void 0:v.width)||"100%"}:{width:"100%"};if(o==="simple"){const j=t.ad_id||"",P=t.product_id||"";return s.jsx(B,{adId:j,productId:P,recommendationId:t.recommendation_id,exposureUrl:t.exposure_url,sessionId:r,className:V("admesh-component admesh-simple-ad","inline-block text-sm leading-relaxed",n),style:{fontFamily:(e==null?void 0:e.fontFamily)||'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',...(A=e==null?void 0:e.components)==null?void 0:A.productCard,...d},children:s.jsxs("div",{"data-admesh-theme":e==null?void 0:e.mode,children:[s.jsx("span",{style:{fontSize:"11px",fontWeight:"600",color:(e==null?void 0:e.mode)==="dark"?"#000000":"#ffffff",backgroundColor:(e==null?void 0:e.mode)==="dark"?"#ffffff":"#000000",padding:"2px 6px",borderRadius:"4px",marginRight:"8px"},title:he(t,Y(t)),children:Y(t)}),s.jsxs("span",{style:{color:(e==null?void 0:e.mode)==="dark"?"#f3f4f6":"#374151",marginRight:"4px"},children:[i.description," "]}),s.jsx(G,{adId:t.ad_id||"",admeshLink:t.click_url||t.admesh_link||((T=t.creative_input)==null?void 0:T.cta_url)||t.url,productId:t.product_id,trackingData:{title:i.title,matchScore:t.contextual_relevance_score,component:"simple_ad_cta"},children:s.jsx("span",{style:{color:(e==null?void 0:e.mode)==="dark"?"#ffffff":"#000000",textDecoration:"underline",cursor:"pointer",fontSize:"inherit",fontFamily:"inherit"},children:i.ctaText})})]})})}const c=t.ad_id||"",u=t.product_id||"";return console.log("[AdMeshProductCard] 📊 Rendering with tracking data:",{adId:c,productId:u,recommendationId:t.recommendation_id,exposureUrl:t.exposure_url?"present":"MISSING",sessionId:r?"present":"MISSING"}),s.jsx(B,{adId:c,productId:u,recommendationId:t.recommendation_id,exposureUrl:t.exposure_url,sessionId:r,className:l,style:{fontFamily:(e==null?void 0:e.fontFamily)||'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',...(C=e==null?void 0:e.components)==null?void 0:C.productCard,...d},children:s.jsx("div",{style:{fontFamily:(e==null?void 0:e.fontFamily)||'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',...(S=e==null?void 0:e.components)==null?void 0:S.productCard,...d},"data-admesh-theme":e==null?void 0:e.mode,children:s.jsxs("div",{className:"h-full flex flex-col",style:g,children:[s.jsx("div",{className:"mb-1.5",children:s.jsx("span",{style:{fontSize:"11px",fontWeight:"600",color:(e==null?void 0:e.mode)==="dark"?"#000000":"#ffffff",backgroundColor:(e==null?void 0:e.mode)==="dark"?"#ffffff":"#000000",padding:"2px 6px",borderRadius:"4px"},title:he(t,Y(t)),children:Y(t)})}),s.jsxs("div",{className:"flex justify-between items-center gap-3 mb-2",children:[s.jsxs("div",{className:"flex items-center gap-2 flex-1 min-w-0",children:[(((R=(I=t.creative_input)==null?void 0:I.assets)==null?void 0:R.logo_url)||((N=t.product_logo)==null?void 0:N.url))&&s.jsx("img",{src:((F=(D=t.creative_input)==null?void 0:D.assets)==null?void 0:F.logo_url)||(($=t.product_logo)==null?void 0:$.url),alt:`${i.title} logo`,className:"w-6 h-6 rounded flex-shrink-0",onError:j=>{j.target.style.display="none"}}),s.jsx("h4",{className:"font-semibold text-gray-800 dark:text-gray-200 text-sm sm:text-base truncate",children:i.title})]}),s.jsx("div",{className:"flex-shrink-0",children:s.jsx(G,{adId:t.ad_id||"",admeshLink:t.click_url||t.admesh_link||((O=t.creative_input)==null?void 0:O.cta_url)||t.url,productId:t.product_id,trackingData:{title:i.title,matchScore:t.contextual_relevance_score,component:"product_card_cta"},children:s.jsxs("button",{className:"text-xs px-2 py-1 sm:px-3 sm:py-2 rounded-full flex items-center transition-all duration-200 transform hover:scale-105 shadow-md hover:shadow-lg whitespace-nowrap",style:{backgroundColor:(e==null?void 0:e.accentColor)||"#000000",color:(e==null?void 0:e.mode)==="dark"?"#000000":"#ffffff"},children