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
JavaScript
"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