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
1 lines • 312 kB
Source Map (JSON)
{"version":3,"file":"index.mjs","sources":["../../node_modules/react/cjs/react-jsx-runtime.production.js","../../node_modules/react/cjs/react-jsx-runtime.development.js","../../node_modules/react/jsx-runtime.js","../../node_modules/classnames/index.js","../src/hooks/useAdMeshTracker.ts","../src/components/AdMeshLinkTracker.tsx","../src/hooks/useAdMeshStyles.ts","../src/utils/disclosureUtils.ts","../src/components/AdMeshProductCard.tsx","../src/components/AdMeshCompareTable.tsx","../src/components/AdMeshBadge.tsx","../src/components/AdMeshExpandableUnit.tsx","../src/components/AdMeshInlineRecommendation.tsx","../src/components/AdMeshConversationSummary.tsx","../src/components/AdMeshCitationReference.tsx","../src/components/AdMeshCitationUnit.tsx","../src/components/AdMeshConversationalUnit.tsx","../src/components/AdMeshChatMessage.tsx","../src/components/AdMeshChatInput.tsx","../src/components/AdMeshChatInterface.tsx","../src/components/AdMeshFloatingChat.tsx","../src/components/AdMeshSidebarHeader.tsx","../src/components/AdMeshSidebarContent.tsx","../src/components/AdMeshSidebar.tsx","../src/components/AdMeshAutoRecommendationWidget.tsx","../src/utils/themeUtils.ts","../src/index.ts"],"sourcesContent":["/**\n * @license React\n * react-jsx-runtime.production.js\n *\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n\"use strict\";\nvar REACT_ELEMENT_TYPE = Symbol.for(\"react.transitional.element\"),\n REACT_FRAGMENT_TYPE = Symbol.for(\"react.fragment\");\nfunction jsxProd(type, config, maybeKey) {\n var key = null;\n void 0 !== maybeKey && (key = \"\" + maybeKey);\n void 0 !== config.key && (key = \"\" + config.key);\n if (\"key\" in config) {\n maybeKey = {};\n for (var propName in config)\n \"key\" !== propName && (maybeKey[propName] = config[propName]);\n } else maybeKey = config;\n config = maybeKey.ref;\n return {\n $$typeof: REACT_ELEMENT_TYPE,\n type: type,\n key: key,\n ref: void 0 !== config ? config : null,\n props: maybeKey\n };\n}\nexports.Fragment = REACT_FRAGMENT_TYPE;\nexports.jsx = jsxProd;\nexports.jsxs = jsxProd;\n","/**\n * @license React\n * react-jsx-runtime.development.js\n *\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n\"use strict\";\n\"production\" !== process.env.NODE_ENV &&\n (function () {\n function getComponentNameFromType(type) {\n if (null == type) return null;\n if (\"function\" === typeof type)\n return type.$$typeof === REACT_CLIENT_REFERENCE\n ? null\n : type.displayName || type.name || null;\n if (\"string\" === typeof type) return type;\n switch (type) {\n case REACT_FRAGMENT_TYPE:\n return \"Fragment\";\n case REACT_PROFILER_TYPE:\n return \"Profiler\";\n case REACT_STRICT_MODE_TYPE:\n return \"StrictMode\";\n case REACT_SUSPENSE_TYPE:\n return \"Suspense\";\n case REACT_SUSPENSE_LIST_TYPE:\n return \"SuspenseList\";\n case REACT_ACTIVITY_TYPE:\n return \"Activity\";\n }\n if (\"object\" === typeof type)\n switch (\n (\"number\" === typeof type.tag &&\n console.error(\n \"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue.\"\n ),\n type.$$typeof)\n ) {\n case REACT_PORTAL_TYPE:\n return \"Portal\";\n case REACT_CONTEXT_TYPE:\n return (type.displayName || \"Context\") + \".Provider\";\n case REACT_CONSUMER_TYPE:\n return (type._context.displayName || \"Context\") + \".Consumer\";\n case REACT_FORWARD_REF_TYPE:\n var innerType = type.render;\n type = type.displayName;\n type ||\n ((type = innerType.displayName || innerType.name || \"\"),\n (type = \"\" !== type ? \"ForwardRef(\" + type + \")\" : \"ForwardRef\"));\n return type;\n case REACT_MEMO_TYPE:\n return (\n (innerType = type.displayName || null),\n null !== innerType\n ? innerType\n : getComponentNameFromType(type.type) || \"Memo\"\n );\n case REACT_LAZY_TYPE:\n innerType = type._payload;\n type = type._init;\n try {\n return getComponentNameFromType(type(innerType));\n } catch (x) {}\n }\n return null;\n }\n function testStringCoercion(value) {\n return \"\" + value;\n }\n function checkKeyStringCoercion(value) {\n try {\n testStringCoercion(value);\n var JSCompiler_inline_result = !1;\n } catch (e) {\n JSCompiler_inline_result = !0;\n }\n if (JSCompiler_inline_result) {\n JSCompiler_inline_result = console;\n var JSCompiler_temp_const = JSCompiler_inline_result.error;\n var JSCompiler_inline_result$jscomp$0 =\n (\"function\" === typeof Symbol &&\n Symbol.toStringTag &&\n value[Symbol.toStringTag]) ||\n value.constructor.name ||\n \"Object\";\n JSCompiler_temp_const.call(\n JSCompiler_inline_result,\n \"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.\",\n JSCompiler_inline_result$jscomp$0\n );\n return testStringCoercion(value);\n }\n }\n function getTaskName(type) {\n if (type === REACT_FRAGMENT_TYPE) return \"<>\";\n if (\n \"object\" === typeof type &&\n null !== type &&\n type.$$typeof === REACT_LAZY_TYPE\n )\n return \"<...>\";\n try {\n var name = getComponentNameFromType(type);\n return name ? \"<\" + name + \">\" : \"<...>\";\n } catch (x) {\n return \"<...>\";\n }\n }\n function getOwner() {\n var dispatcher = ReactSharedInternals.A;\n return null === dispatcher ? null : dispatcher.getOwner();\n }\n function UnknownOwner() {\n return Error(\"react-stack-top-frame\");\n }\n function hasValidKey(config) {\n if (hasOwnProperty.call(config, \"key\")) {\n var getter = Object.getOwnPropertyDescriptor(config, \"key\").get;\n if (getter && getter.isReactWarning) return !1;\n }\n return void 0 !== config.key;\n }\n function defineKeyPropWarningGetter(props, displayName) {\n function warnAboutAccessingKey() {\n specialPropKeyWarningShown ||\n ((specialPropKeyWarningShown = !0),\n console.error(\n \"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)\",\n displayName\n ));\n }\n warnAboutAccessingKey.isReactWarning = !0;\n Object.defineProperty(props, \"key\", {\n get: warnAboutAccessingKey,\n configurable: !0\n });\n }\n function elementRefGetterWithDeprecationWarning() {\n var componentName = getComponentNameFromType(this.type);\n didWarnAboutElementRef[componentName] ||\n ((didWarnAboutElementRef[componentName] = !0),\n console.error(\n \"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.\"\n ));\n componentName = this.props.ref;\n return void 0 !== componentName ? componentName : null;\n }\n function ReactElement(\n type,\n key,\n self,\n source,\n owner,\n props,\n debugStack,\n debugTask\n ) {\n self = props.ref;\n type = {\n $$typeof: REACT_ELEMENT_TYPE,\n type: type,\n key: key,\n props: props,\n _owner: owner\n };\n null !== (void 0 !== self ? self : null)\n ? Object.defineProperty(type, \"ref\", {\n enumerable: !1,\n get: elementRefGetterWithDeprecationWarning\n })\n : Object.defineProperty(type, \"ref\", { enumerable: !1, value: null });\n type._store = {};\n Object.defineProperty(type._store, \"validated\", {\n configurable: !1,\n enumerable: !1,\n writable: !0,\n value: 0\n });\n Object.defineProperty(type, \"_debugInfo\", {\n configurable: !1,\n enumerable: !1,\n writable: !0,\n value: null\n });\n Object.defineProperty(type, \"_debugStack\", {\n configurable: !1,\n enumerable: !1,\n writable: !0,\n value: debugStack\n });\n Object.defineProperty(type, \"_debugTask\", {\n configurable: !1,\n enumerable: !1,\n writable: !0,\n value: debugTask\n });\n Object.freeze && (Object.freeze(type.props), Object.freeze(type));\n return type;\n }\n function jsxDEVImpl(\n type,\n config,\n maybeKey,\n isStaticChildren,\n source,\n self,\n debugStack,\n debugTask\n ) {\n var children = config.children;\n if (void 0 !== children)\n if (isStaticChildren)\n if (isArrayImpl(children)) {\n for (\n isStaticChildren = 0;\n isStaticChildren < children.length;\n isStaticChildren++\n )\n validateChildKeys(children[isStaticChildren]);\n Object.freeze && Object.freeze(children);\n } else\n console.error(\n \"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.\"\n );\n else validateChildKeys(children);\n if (hasOwnProperty.call(config, \"key\")) {\n children = getComponentNameFromType(type);\n var keys = Object.keys(config).filter(function (k) {\n return \"key\" !== k;\n });\n isStaticChildren =\n 0 < keys.length\n ? \"{key: someKey, \" + keys.join(\": ..., \") + \": ...}\"\n : \"{key: someKey}\";\n didWarnAboutKeySpread[children + isStaticChildren] ||\n ((keys =\n 0 < keys.length ? \"{\" + keys.join(\": ..., \") + \": ...}\" : \"{}\"),\n console.error(\n 'A props object containing a \"key\" prop is being spread into JSX:\\n let props = %s;\\n <%s {...props} />\\nReact keys must be passed directly to JSX without using spread:\\n let props = %s;\\n <%s key={someKey} {...props} />',\n isStaticChildren,\n children,\n keys,\n children\n ),\n (didWarnAboutKeySpread[children + isStaticChildren] = !0));\n }\n children = null;\n void 0 !== maybeKey &&\n (checkKeyStringCoercion(maybeKey), (children = \"\" + maybeKey));\n hasValidKey(config) &&\n (checkKeyStringCoercion(config.key), (children = \"\" + config.key));\n if (\"key\" in config) {\n maybeKey = {};\n for (var propName in config)\n \"key\" !== propName && (maybeKey[propName] = config[propName]);\n } else maybeKey = config;\n children &&\n defineKeyPropWarningGetter(\n maybeKey,\n \"function\" === typeof type\n ? type.displayName || type.name || \"Unknown\"\n : type\n );\n return ReactElement(\n type,\n children,\n self,\n source,\n getOwner(),\n maybeKey,\n debugStack,\n debugTask\n );\n }\n function validateChildKeys(node) {\n \"object\" === typeof node &&\n null !== node &&\n node.$$typeof === REACT_ELEMENT_TYPE &&\n node._store &&\n (node._store.validated = 1);\n }\n var React = require(\"react\"),\n REACT_ELEMENT_TYPE = Symbol.for(\"react.transitional.element\"),\n REACT_PORTAL_TYPE = Symbol.for(\"react.portal\"),\n REACT_FRAGMENT_TYPE = Symbol.for(\"react.fragment\"),\n REACT_STRICT_MODE_TYPE = Symbol.for(\"react.strict_mode\"),\n REACT_PROFILER_TYPE = Symbol.for(\"react.profiler\");\n Symbol.for(\"react.provider\");\n var REACT_CONSUMER_TYPE = Symbol.for(\"react.consumer\"),\n REACT_CONTEXT_TYPE = Symbol.for(\"react.context\"),\n REACT_FORWARD_REF_TYPE = Symbol.for(\"react.forward_ref\"),\n REACT_SUSPENSE_TYPE = Symbol.for(\"react.suspense\"),\n REACT_SUSPENSE_LIST_TYPE = Symbol.for(\"react.suspense_list\"),\n REACT_MEMO_TYPE = Symbol.for(\"react.memo\"),\n REACT_LAZY_TYPE = Symbol.for(\"react.lazy\"),\n REACT_ACTIVITY_TYPE = Symbol.for(\"react.activity\"),\n REACT_CLIENT_REFERENCE = Symbol.for(\"react.client.reference\"),\n ReactSharedInternals =\n React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,\n hasOwnProperty = Object.prototype.hasOwnProperty,\n isArrayImpl = Array.isArray,\n createTask = console.createTask\n ? console.createTask\n : function () {\n return null;\n };\n React = {\n \"react-stack-bottom-frame\": function (callStackForError) {\n return callStackForError();\n }\n };\n var specialPropKeyWarningShown;\n var didWarnAboutElementRef = {};\n var unknownOwnerDebugStack = React[\"react-stack-bottom-frame\"].bind(\n React,\n UnknownOwner\n )();\n var unknownOwnerDebugTask = createTask(getTaskName(UnknownOwner));\n var didWarnAboutKeySpread = {};\n exports.Fragment = REACT_FRAGMENT_TYPE;\n exports.jsx = function (type, config, maybeKey, source, self) {\n var trackActualOwner =\n 1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;\n return jsxDEVImpl(\n type,\n config,\n maybeKey,\n !1,\n source,\n self,\n trackActualOwner\n ? Error(\"react-stack-top-frame\")\n : unknownOwnerDebugStack,\n trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask\n );\n };\n exports.jsxs = function (type, config, maybeKey, source, self) {\n var trackActualOwner =\n 1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;\n return jsxDEVImpl(\n type,\n config,\n maybeKey,\n !0,\n source,\n self,\n trackActualOwner\n ? Error(\"react-stack-top-frame\")\n : unknownOwnerDebugStack,\n trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask\n );\n };\n })();\n","'use strict';\n\nif (process.env.NODE_ENV === 'production') {\n module.exports = require('./cjs/react-jsx-runtime.production.js');\n} else {\n module.exports = require('./cjs/react-jsx-runtime.development.js');\n}\n","/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = '';\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (arg) {\n\t\t\t\tclasses = appendClass(classes, parseValue(arg));\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction parseValue (arg) {\n\t\tif (typeof arg === 'string' || typeof arg === 'number') {\n\t\t\treturn arg;\n\t\t}\n\n\t\tif (typeof arg !== 'object') {\n\t\t\treturn '';\n\t\t}\n\n\t\tif (Array.isArray(arg)) {\n\t\t\treturn classNames.apply(null, arg);\n\t\t}\n\n\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\treturn arg.toString();\n\t\t}\n\n\t\tvar classes = '';\n\n\t\tfor (var key in arg) {\n\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\tclasses = appendClass(classes, key);\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction appendClass (value, newClass) {\n\t\tif (!newClass) {\n\t\t\treturn value;\n\t\t}\n\t\n\t\tif (value) {\n\t\t\treturn value + ' ' + newClass;\n\t\t}\n\t\n\t\treturn value + newClass;\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import { useState, useCallback, useMemo } from 'react';\nimport type { TrackingData, UseAdMeshTrackerReturn } from '../types/index';\n\n// Default tracking endpoint - can be overridden via config\nconst DEFAULT_TRACKING_URL = 'https://api.useadmesh.com/track';\n\ninterface TrackingConfig {\n apiBaseUrl?: string;\n enabled?: boolean;\n debug?: boolean;\n retryAttempts?: number;\n retryDelay?: number;\n}\n\n// Global config that can be set by the consuming application\nlet globalConfig: TrackingConfig = {\n apiBaseUrl: DEFAULT_TRACKING_URL,\n enabled: true,\n debug: false,\n retryAttempts: 3,\n retryDelay: 1000\n};\n\nexport const setAdMeshTrackerConfig = (config: Partial<TrackingConfig>) => {\n globalConfig = { ...globalConfig, ...config };\n};\n\nexport const useAdMeshTracker = (config?: Partial<TrackingConfig>): UseAdMeshTrackerReturn => {\n const [isTracking, setIsTracking] = useState(false);\n const [error, setError] = useState<string | null>(null);\n\n const mergedConfig = useMemo(() => ({ ...globalConfig, ...config }), [config]);\n\n const log = useCallback((message: string, data?: unknown) => {\n if (mergedConfig.debug) {\n console.log(`[AdMesh Tracker] ${message}`, data);\n }\n }, [mergedConfig.debug]);\n\n const sendTrackingEvent = useCallback(async (\n eventType: 'click' | 'view' | 'conversion',\n data: TrackingData\n ): Promise<void> => {\n if (!mergedConfig.enabled) {\n log('Tracking disabled, skipping event', { eventType, data });\n return;\n }\n\n if (!data.adId || !data.admeshLink) {\n const errorMsg = 'Missing required tracking data: adId and admeshLink are required';\n log(errorMsg, data);\n setError(errorMsg);\n return;\n }\n\n setIsTracking(true);\n setError(null);\n\n const payload = {\n event_type: eventType,\n ad_id: data.adId,\n admesh_link: data.admeshLink,\n product_id: data.productId,\n user_id: data.userId,\n session_id: data.sessionId,\n revenue: data.revenue,\n conversion_type: data.conversionType,\n metadata: data.metadata,\n timestamp: new Date().toISOString(),\n user_agent: navigator.userAgent,\n referrer: document.referrer,\n page_url: window.location.href\n };\n\n log(`Sending ${eventType} event`, payload);\n\n let lastError: Error | null = null;\n \n for (let attempt = 1; attempt <= (mergedConfig.retryAttempts || 3); attempt++) {\n try {\n const response = await fetch(`${mergedConfig.apiBaseUrl}/events`, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify(payload),\n });\n\n if (!response.ok) {\n throw new Error(`HTTP ${response.status}: ${response.statusText}`);\n }\n\n const result = await response.json();\n log(`${eventType} event tracked successfully`, result);\n setIsTracking(false);\n return;\n\n } catch (err) {\n lastError = err as Error;\n log(`Attempt ${attempt} failed for ${eventType} event`, err);\n \n if (attempt < (mergedConfig.retryAttempts || 3)) {\n await new Promise(resolve => \n setTimeout(resolve, (mergedConfig.retryDelay || 1000) * attempt)\n );\n }\n }\n }\n\n // All attempts failed\n const errorMsg = `Failed to track ${eventType} event after ${mergedConfig.retryAttempts} attempts: ${lastError?.message}`;\n log(errorMsg, lastError);\n setError(errorMsg);\n setIsTracking(false);\n }, [mergedConfig, log]);\n\n const trackClick = useCallback(async (data: TrackingData): Promise<void> => {\n return sendTrackingEvent('click', data);\n }, [sendTrackingEvent]);\n\n const trackView = useCallback(async (data: TrackingData): Promise<void> => {\n return sendTrackingEvent('view', data);\n }, [sendTrackingEvent]);\n\n const trackConversion = useCallback(async (data: TrackingData): Promise<void> => {\n if (!data.revenue && !data.conversionType) {\n log('Warning: Conversion tracking without revenue or conversion type', data);\n }\n return sendTrackingEvent('conversion', data);\n }, [sendTrackingEvent, log]);\n\n return {\n trackClick,\n trackView,\n trackConversion,\n isTracking,\n error\n };\n};\n\n// Utility function to build admesh_link with tracking parameters\nexport const buildAdMeshLink = (\n baseLink: string, \n adId: string, \n additionalParams?: Record<string, string>\n): string => {\n try {\n const url = new URL(baseLink);\n url.searchParams.set('ad_id', adId);\n url.searchParams.set('utm_source', 'admesh');\n url.searchParams.set('utm_medium', 'recommendation');\n \n if (additionalParams) {\n Object.entries(additionalParams).forEach(([key, value]) => {\n url.searchParams.set(key, value);\n });\n }\n \n return url.toString();\n } catch (err) {\n console.warn('[AdMesh] Invalid URL provided to buildAdMeshLink:', baseLink, err);\n return baseLink;\n }\n};\n\n// Helper function to extract tracking data from recommendation\nexport const extractTrackingData = (\n recommendation: { ad_id: string; admesh_link: string; product_id: string },\n additionalData?: Partial<TrackingData>\n): TrackingData => {\n return {\n adId: recommendation.ad_id,\n admeshLink: recommendation.admesh_link,\n productId: recommendation.product_id,\n ...additionalData\n };\n};\n","import React, { useCallback, useEffect, useRef } from 'react';\nimport type { AdMeshLinkTrackerProps } from '../types/index';\nimport { useAdMeshTracker } from '../hooks/useAdMeshTracker';\n\nexport const AdMeshLinkTracker: React.FC<AdMeshLinkTrackerProps> = ({\n adId,\n admeshLink,\n productId,\n children,\n trackingData,\n className,\n style\n}) => {\n const { trackClick, trackView } = useAdMeshTracker();\n const elementRef = useRef<HTMLDivElement>(null);\n const hasTrackedView = useRef(false);\n\n // Track view when component becomes visible\n useEffect(() => {\n if (!elementRef.current || hasTrackedView.current) return;\n\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach((entry) => {\n if (entry.isIntersecting && !hasTrackedView.current) {\n hasTrackedView.current = true;\n trackView({\n adId,\n admeshLink,\n productId,\n ...trackingData\n }).catch(console.error);\n }\n });\n },\n {\n threshold: 0.5, // Track when 50% of the element is visible\n rootMargin: '0px'\n }\n );\n\n observer.observe(elementRef.current);\n\n return () => {\n observer.disconnect();\n };\n }, [adId, admeshLink, productId, trackingData, trackView]);\n\n const handleClick = useCallback(async (event: React.MouseEvent) => {\n // Track the click\n try {\n await trackClick({\n adId,\n admeshLink,\n productId,\n ...trackingData\n });\n } catch (error) {\n console.error('Failed to track click:', error);\n }\n\n\n\n // If the children contain a link, let the browser handle navigation\n // Otherwise, navigate programmatically\n const target = event.target as HTMLElement;\n const link = target.closest('a');\n \n if (!link) {\n // No link found, navigate programmatically\n window.open(admeshLink, '_blank', 'noopener,noreferrer');\n }\n // If there's a link, let the browser handle it naturally\n }, [adId, admeshLink, productId, trackingData, trackClick]);\n\n return (\n <div\n ref={elementRef}\n className={className}\n onClick={handleClick}\n style={{\n cursor: 'pointer',\n ...style\n }}\n >\n {children}\n </div>\n );\n};\n\nAdMeshLinkTracker.displayName = 'AdMeshLinkTracker';\n","import { useEffect } from 'react';\n\n// Complete CSS content as a string - this will be injected automatically\nconst ADMESH_STYLES = `\n/* AdMesh UI SDK - Complete Self-Contained Styles */\n\n/* CSS Reset for AdMesh components */\n.admesh-component, .admesh-component * {\n box-sizing: border-box;\n}\n\n/* CSS Variables */\n.admesh-component {\n --admesh-primary: #6366f1;\n --admesh-primary-hover: #4f46e5;\n --admesh-secondary: #8b5cf6;\n --admesh-accent: #06b6d4;\n --admesh-background: #ffffff;\n --admesh-surface: #ffffff;\n --admesh-border: #e2e8f0;\n --admesh-text: #0f172a;\n --admesh-text-muted: #64748b;\n --admesh-text-light: #94a3b8;\n --admesh-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --admesh-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --admesh-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --admesh-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n --admesh-radius: 0.75rem;\n --admesh-radius-sm: 0.375rem;\n --admesh-radius-lg: 1rem;\n --admesh-radius-xl: 1.5rem;\n}\n\n.admesh-component[data-admesh-theme=\"dark\"] {\n --admesh-background: #111827;\n --admesh-surface: #1f2937;\n --admesh-border: #374151;\n --admesh-text: #f9fafb;\n --admesh-text-muted: #9ca3af;\n --admesh-text-light: #6b7280;\n --admesh-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3);\n --admesh-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);\n --admesh-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3);\n --admesh-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.3), 0 8px 10px -6px rgb(0 0 0 / 0.3);\n}\n\n/* Layout Styles */\n.admesh-layout {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n color: var(--admesh-text);\n background-color: var(--admesh-background);\n border-radius: var(--admesh-radius);\n padding: 1.5rem;\n box-shadow: var(--admesh-shadow);\n border: 1px solid var(--admesh-border);\n}\n\n.admesh-layout__header {\n margin-bottom: 1.5rem;\n text-align: center;\n}\n\n.admesh-layout__title {\n font-size: 1.25rem;\n font-weight: 600;\n color: var(--admesh-text);\n margin-bottom: 0.5rem;\n}\n\n.admesh-layout__subtitle {\n font-size: 0.875rem;\n color: var(--admesh-text-muted);\n}\n\n.admesh-layout__cards-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 1rem;\n margin-bottom: 1.5rem;\n}\n\n.admesh-layout__more-indicator {\n text-align: center;\n padding: 1rem;\n color: var(--admesh-text-muted);\n font-size: 0.875rem;\n}\n\n.admesh-layout__empty {\n text-align: center;\n padding: 3rem 1rem;\n}\n\n.admesh-layout__empty-content h3 {\n font-size: 1.125rem;\n font-weight: 600;\n color: var(--admesh-text-muted);\n margin-bottom: 0.5rem;\n}\n\n.admesh-layout__empty-content p {\n font-size: 0.875rem;\n color: var(--admesh-text-muted);\n}\n\n/* Product Card Styles */\n.admesh-product-card {\n background-color: var(--admesh-surface);\n border: 1px solid var(--admesh-border);\n border-radius: var(--admesh-radius);\n padding: 1.5rem;\n transition: all 0.2s ease-in-out;\n position: relative;\n overflow: hidden;\n}\n\n.admesh-product-card:hover {\n box-shadow: var(--admesh-shadow-lg);\n transform: translateY(-2px);\n border-color: var(--admesh-primary);\n}\n\n.admesh-product-card__header {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 1rem;\n}\n\n.admesh-product-card__title {\n font-size: 1.125rem;\n font-weight: 600;\n color: var(--admesh-text);\n margin-bottom: 0.5rem;\n line-height: 1.4;\n}\n\n.admesh-product-card__reason {\n font-size: 0.875rem;\n color: var(--admesh-text-muted);\n line-height: 1.5;\n margin-bottom: 1rem;\n}\n\n.admesh-product-card__match-score {\n margin-bottom: 1rem;\n}\n\n.admesh-product-card__match-score-label {\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-size: 0.75rem;\n color: var(--admesh-text-muted);\n margin-bottom: 0.25rem;\n}\n\n.admesh-product-card__match-score-bar {\n width: 100%;\n height: 0.375rem;\n background-color: var(--admesh-border);\n border-radius: var(--admesh-radius-sm);\n overflow: hidden;\n}\n\n.admesh-product-card__match-score-fill {\n height: 100%;\n background: linear-gradient(90deg, var(--admesh-primary), #8b5cf6);\n border-radius: var(--admesh-radius-sm);\n transition: width 0.3s ease-in-out;\n}\n\n.admesh-product-card__badges {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n margin-bottom: 1rem;\n}\n\n.admesh-product-card__badge {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n padding: 0.25rem 0.5rem;\n background-color: var(--admesh-primary);\n color: white;\n font-size: 0.75rem;\n font-weight: 500;\n border-radius: var(--admesh-radius-sm);\n}\n\n.admesh-product-card__badge--secondary {\n background-color: var(--admesh-secondary);\n}\n\n.admesh-product-card__keywords {\n display: flex;\n flex-wrap: wrap;\n gap: 0.25rem;\n margin-bottom: 1rem;\n}\n\n.admesh-product-card__keyword {\n padding: 0.125rem 0.375rem;\n background-color: var(--admesh-border);\n color: var(--admesh-text-muted);\n font-size: 0.75rem;\n border-radius: var(--admesh-radius-sm);\n}\n\n/* Dark mode specific enhancements */\n.admesh-component[data-admesh-theme=\"dark\"] .admesh-product-card__keyword {\n background-color: #4b5563;\n color: #d1d5db;\n}\n\n.admesh-component[data-admesh-theme=\"dark\"] .admesh-product-card:hover {\n border-color: var(--admesh-primary);\n background-color: #374151;\n}\n\n.admesh-component[data-admesh-theme=\"dark\"] .admesh-product-card__button:hover {\n background: linear-gradient(90deg, var(--admesh-primary-hover), var(--admesh-primary));\n}\n\n.admesh-product-card__footer {\n display: flex;\n justify-content: flex-end;\n margin-top: 1.5rem;\n}\n\n/* Mobile-specific sidebar improvements */\n@media (max-width: 640px) {\n .admesh-sidebar {\n /* Ensure proper mobile viewport handling */\n height: 100vh !important;\n height: 100dvh !important; /* Dynamic viewport height for mobile browsers */\n max-height: 100vh !important;\n max-height: 100dvh !important;\n width: 100vw !important;\n max-width: 90vw !important;\n overflow: hidden !important;\n }\n\n .admesh-sidebar.relative {\n height: 100% !important;\n width: 100% !important;\n max-width: 100% !important;\n }\n\n /* Improve touch scrolling */\n .admesh-sidebar .overflow-y-auto {\n -webkit-overflow-scrolling: touch !important;\n overscroll-behavior: contain !important;\n scroll-behavior: smooth !important;\n }\n\n /* Prevent body scroll when sidebar is open */\n body:has(.admesh-sidebar[data-mobile-open=\"true\"]) {\n overflow: hidden !important;\n position: fixed !important;\n width: 100% !important;\n }\n}\n\n/* Tablet improvements */\n@media (min-width: 641px) and (max-width: 1024px) {\n .admesh-sidebar {\n max-width: 400px !important;\n }\n}\n\n/* Mobile responsiveness improvements for all components */\n@media (max-width: 640px) {\n /* Product cards mobile optimization */\n .admesh-card {\n padding: 0.75rem !important;\n margin-bottom: 0.75rem !important;\n }\n\n /* Inline recommendations mobile optimization */\n .admesh-inline-recommendation {\n padding: 0.5rem !important;\n margin-bottom: 0.5rem !important;\n }\n\n /* Conversation summary mobile optimization */\n .admesh-conversation-summary {\n padding: 1rem !important;\n }\n\n /* Percentage text mobile improvements */\n .admesh-component .text-xs {\n font-size: 0.75rem !important;\n line-height: 1rem !important;\n }\n\n .admesh-component .text-sm {\n font-size: 0.875rem !important;\n line-height: 1.25rem !important;\n }\n\n /* Button mobile improvements */\n .admesh-component button {\n padding: 0.375rem 0.75rem !important;\n font-size: 0.75rem !important;\n min-height: 2rem !important;\n touch-action: manipulation !important;\n }\n\n /* Badge mobile improvements */\n .admesh-component .rounded-full {\n padding: 0.25rem 0.5rem !important;\n font-size: 0.625rem !important;\n line-height: 1rem !important;\n }\n\n /* Progress bar mobile improvements */\n .admesh-component .bg-gray-200,\n .admesh-component .bg-slate-600 {\n height: 0.25rem !important;\n }\n\n /* Flex layout mobile improvements */\n .admesh-component .flex {\n flex-wrap: wrap !important;\n }\n\n .admesh-component .gap-2 {\n gap: 0.375rem !important;\n }\n\n .admesh-component .gap-3 {\n gap: 0.5rem !important;\n }\n}\n\n.admesh-product-card__button {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.75rem 1.5rem;\n background: linear-gradient(90deg, var(--admesh-primary), var(--admesh-primary-hover));\n color: white;\n font-size: 0.875rem;\n font-weight: 500;\n border: none;\n border-radius: var(--admesh-radius);\n cursor: pointer;\n transition: all 0.2s ease-in-out;\n text-decoration: none;\n}\n\n.admesh-product-card__button:hover {\n transform: translateY(-1px);\n box-shadow: var(--admesh-shadow-lg);\n}\n\n/* Utility Classes */\n.admesh-text-xs { font-size: 0.75rem; }\n.admesh-text-sm { font-size: 0.875rem; }\n.admesh-text-base { font-size: 1rem; }\n.admesh-text-lg { font-size: 1.125rem; }\n.admesh-text-xl { font-size: 1.25rem; }\n\n.admesh-font-medium { font-weight: 500; }\n.admesh-font-semibold { font-weight: 600; }\n.admesh-font-bold { font-weight: 700; }\n\n.admesh-text-muted { color: var(--admesh-text-muted); }\n\n/* Comparison Table Styles */\n.admesh-compare-table {\n width: 100%;\n border-collapse: collapse;\n background-color: var(--admesh-surface);\n border: 1px solid var(--admesh-border);\n border-radius: var(--admesh-radius);\n overflow: hidden;\n}\n\n.admesh-compare-table th,\n.admesh-compare-table td {\n padding: 0.75rem;\n text-align: left;\n border-bottom: 1px solid var(--admesh-border);\n}\n\n.admesh-compare-table th {\n background-color: var(--admesh-background);\n font-weight: 600;\n color: var(--admesh-text);\n font-size: 0.875rem;\n}\n\n.admesh-compare-table td {\n color: var(--admesh-text);\n font-size: 0.875rem;\n}\n\n.admesh-compare-table tr:hover {\n background-color: var(--admesh-border);\n}\n\n/* Dark mode table enhancements */\n.admesh-component[data-admesh-theme=\"dark\"] .admesh-compare-table th {\n background-color: #374151;\n}\n\n.admesh-component[data-admesh-theme=\"dark\"] .admesh-compare-table tr:hover {\n background-color: #4b5563;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n .admesh-layout {\n padding: 1rem;\n }\n\n .admesh-layout__cards-grid {\n grid-template-columns: 1fr;\n gap: 0.75rem;\n }\n\n .admesh-product-card {\n padding: 1rem;\n }\n\n .admesh-compare-table {\n font-size: 0.75rem;\n }\n\n .admesh-compare-table th,\n .admesh-compare-table td {\n padding: 0.5rem;\n }\n}\n\n/* Essential Utility Classes for Self-Contained SDK - High Specificity */\n.admesh-component .relative { position: relative !important; }\n.admesh-component .absolute { position: absolute !important; }\n.admesh-component .flex { display: flex !important; }\n.admesh-component .inline-flex { display: inline-flex !important; }\n.admesh-component .grid { display: grid !important; }\n.admesh-component .hidden { display: none !important; }\n.admesh-component .block { display: block !important; }\n.admesh-component .inline-block { display: inline-block !important; }\n\n/* Flexbox utilities */\n.admesh-component .flex-col { flex-direction: column !important; }\n.admesh-component .flex-row { flex-direction: row !important; }\n.admesh-component .flex-wrap { flex-wrap: wrap !important; }\n.admesh-component .items-center { align-items: center !important; }\n.admesh-component .items-start { align-items: flex-start !important; }\n.admesh-component .items-end { align-items: flex-end !important; }\n.admesh-component .justify-center { justify-content: center !important; }\n.admesh-component .justify-between { justify-content: space-between !important; }\n.admesh-component .justify-end { justify-content: flex-end !important; }\n.admesh-component .flex-1 { flex: 1 1 0% !important; }\n.admesh-component .flex-shrink-0 { flex-shrink: 0 !important; }\n\n/* Grid utilities */\n.admesh-component .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }\n.admesh-component .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n.admesh-component .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }\n\n/* Spacing utilities */\n.admesh-component .gap-1 { gap: 0.25rem; }\n.admesh-component .gap-2 { gap: 0.5rem; }\n.admesh-component .gap-3 { gap: 0.75rem; }\n.admesh-component .gap-4 { gap: 1rem; }\n.admesh-component .gap-6 { gap: 1.5rem; }\n.admesh-component .gap-8 { gap: 2rem; }\n\n/* Padding utilities */\n.admesh-component .p-1 { padding: 0.25rem; }\n.admesh-component .p-2 { padding: 0.5rem; }\n.admesh-component .p-3 { padding: 0.75rem; }\n.admesh-component .p-4 { padding: 1rem; }\n.admesh-component .p-5 { padding: 1.25rem; }\n.admesh-component .p-6 { padding: 1.5rem; }\n.admesh-component .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }\n.admesh-component .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }\n.admesh-component .px-4 { padding-left: 1rem; padding-right: 1rem; }\n.admesh-component .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }\n.admesh-component .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }\n.admesh-component .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }\n.admesh-component .pt-2 { padding-top: 0.5rem; }\n.admesh-component .pt-3 { padding-top: 0.75rem; }\n.admesh-component .pb-2 { padding-bottom: 0.5rem; }\n.admesh-component .pb-3 { padding-bottom: 0.75rem; }\n\n/* Margin utilities */\n.admesh-component .m-0 { margin: 0; }\n.admesh-component .mb-1 { margin-bottom: 0.25rem; }\n.admesh-component .mb-2 { margin-bottom: 0.5rem; }\n.admesh-component .mb-3 { margin-bottom: 0.75rem; }\n.admesh-component .mb-4 { margin-bottom: 1rem; }\n.admesh-component .mb-6 { margin-bottom: 1.5rem; }\n.admesh-component .mt-1 { margin-top: 0.25rem; }\n.admesh-component .mt-2 { margin-top: 0.5rem; }\n.admesh-component .mt-4 { margin-top: 1rem; }\n.admesh-component .mt-6 { margin-top: 1.5rem; }\n.admesh-component .mt-auto { margin-top: auto; }\n.admesh-component .ml-1 { margin-left: 0.25rem; }\n.admesh-component .mr-1 { margin-right: 0.25rem; }\n.admesh-component .mr-2 { margin-right: 0.5rem; }\n\n/* Width and height utilities */\n.admesh-component .w-2 { width: 0.5rem; }\n.admesh-component .w-3 { width: 0.75rem; }\n.admesh-component .w-4 { width: 1rem; }\n.admesh-component .w-5 { width: 1.25rem; }\n.admesh-component .w-6 { width: 1.5rem; }\n.admesh-component .w-full { width: 100%; }\n.admesh-component .w-fit { width: fit-content; }\n.admesh-component .h-2 { height: 0.5rem; }\n.admesh-component .h-3 { height: 0.75rem; }\n.admesh-component .h-4 { height: 1rem; }\n.admesh-component .h-5 { height: 1.25rem; }\n.admesh-component .h-6 { height: 1.5rem; }\n.admesh-component .h-full { height: 100%; }\n.admesh-component .min-w-0 { min-width: 0px; }\n\n/* Border utilities */\n.admesh-component .border { border-width: 1px; }\n.admesh-component .border-t { border-top-width: 1px; }\n.admesh-component .border-gray-100 { border-color: #f3f4f6; }\n.admesh-component .border-gray-200 { border-color: #e5e7eb; }\n.admesh-component .border-gray-300 { border-color: #d1d5db; }\n.admesh-component .border-blue-200 { border-color: #bfdbfe; }\n.admesh-component .border-green-200 { border-color: #bbf7d0; }\n\n/* Border radius utilities */\n.admesh-component .rounded { border-radius: 0.25rem !important; }\n.admesh-component .rounded-md { border-radius: 0.375rem !important; }\n.admesh-component .rounded-lg { border-radius: 0.5rem !important; }\n.admesh-component .rounded-xl { border-radius: 0.75rem !important; }\n.admesh-component .rounded-full { border-radius: 9999px !important; }\n\n/* Background utilities */\n.admesh-component .bg-white { background-color: #ffffff; }\n.admesh-component .bg-gray-50 { background-color: #f9fafb; }\n.admesh-component .bg-gray-100 { background-color: #f3f4f6; }\n.admesh-component .bg-blue-50 { background-color: #eff6ff; }\n.admesh-component .bg-blue-100 { background-color: #dbeafe; }\n.admesh-component .bg-green-100 { background-color: #dcfce7; }\n.admesh-component .bg-green-500 { background-color: #22c55e; }\n.admesh-component .bg-blue-500 { background-color: #3b82f6; }\n\n/* Gradients */\n.admesh-component .bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); }\n.admesh-component .bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }\n.admesh-component .from-white { --tw-gradient-from: #ffffff; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0)); }\n.admesh-component .to-gray-50 { --tw-gradient-to: #f9fafb; }\n.admesh-component .from-purple-500 { --tw-gradient-from: #a855f7; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(168, 85, 247, 0)); }\n.admesh-component .to-pink-500 { --tw-gradient-to: #ec4899; }\n.admesh-component .from-green-400 { --tw-gradient-from: #4ade80; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(74, 222, 128, 0)); }\n.admesh-component .to-blue-500 { --tw-gradient-to: #3b82f6; }\n\n/* Text utilities */\n.admesh-component .text-xs { font-size: 0.75rem; line-height: 1rem; }\n.admesh-component .text-sm { font-size: 0.875rem; line-height: 1.25rem; }\n.admesh-component .text-base { font-size: 1rem; line-height: 1.5rem; }\n.admesh-component .text-lg { font-size: 1.125rem; line-height: 1.75rem; }\n.admesh-component .text-xl { font-size: 1.25rem; line-height: 1.75rem; }\n.admesh-component .font-medium { font-weight: 500; }\n.admesh-component .font-semibold { font-weight: 600; }\n.admesh-component .font-bold { font-weight: 700; }\n.admesh-component .leading-relaxed { line-height: 1.625; }\n\n/* Text colors */\n.admesh-component .text-white { color: #ffffff; }\n.admesh-component .text-gray-400 { color: #9ca3af; }\n.admesh-component .text-gray-500 { color: #6b7280; }\n.admesh-component .text-gray-600 { color: #4b5563; }\n.admesh-component .text-gray-700 { color: #374151; }\n.admesh-component .text-gray-800 { color: #1f2937; }\n.admesh-component .text-blue-600 { color: #2563eb; }\n.admesh-component .text-blue-700 { color: #1d4ed8; }\n.admesh-component .text-green-700 { color: #15803d; }\n\n/* Shadow utilities */\n.admesh-component .shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }\n.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); }\n.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); }\n.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); }\n.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); }\n\n/* Transition utilities */\n.admesh-component .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }\n.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; }\n.admesh-component .duration-200 { transition-duration: 200ms; }\n.admesh-component .duration-300 { transition-duration: 300ms; }\n\n/* Transform utilities */\n.admesh-component .hover\\\\:-translate-y-1:hover { transform: translateY(-0.25rem); }\n.admesh-component .hover\\\\:scale-105:hover { transform: scale(1.05); }\n\n/* Hover utilities */\n.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); }\n.admesh-component .hover\\\\:bg-gray-100:hover { background-color: #f3f4f6; }\n.admesh-component .hover\\\\:text-blue-800:hover { color: #1e40af; }\n\n/* Cursor utilities */\n.admesh-component .cursor-pointer { cursor: pointer; }\n\n/* Overflow utilities */\n.admesh-component .overflow-hidden { overflow: hidden; }\n.admesh-component .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n\n/* Text decoration */\n.admesh-component .underline { text-decoration-line: underline; }\n\n/* Whitespace */\n.admesh-component .whitespace-nowrap { white-space: nowrap; }\n\n/* Dark mode utilities */\n@media (prefers-color-scheme: dark) {\n .admesh-component .dark\\\\:bg-slate-800 { background-color: #1e293b; }\n .admesh-component .dark\\\\:bg-slate-900 { background-color: #0f172a; }\n .admesh-component .dark\\\\:border-slate-700 { border-color: #334155; }\n .admesh-component .dark\\\\:text-white { color: #ffffff; }\n .admesh-component .dark\\\\:text-gray-200 { color: #e5e7eb; }\n .admesh-component .dark\\\\:text-gray-300 { color: #d1d5db; }\n .admesh-component .dark\\\\:text-gray-400 { color: #9ca3af; }\n .admesh-component .dark\\\\:text-blue-400 { color: #60a5fa; }\n}\n\n/* Responsive utilities */\n@media (min-width: 640px) {\n .admesh-component .sm\\\\:p-5 { padding: 1.25rem; }\n .admesh-component .sm\\\\:text-base { font-size: 1rem; line-height: 1.5rem; }\n .admesh-component .sm\\\\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }\n .admesh-component .sm\\\\:flex-row { flex-direction: row; }\n .admesh-component .sm\\\\:items-center { align-items: center; }\n .admesh-component .sm\\\\:justify-between { justify-content: space-between; }\n}\n\n@media (min-width: 768px) {\n .admesh-component .md\\\\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n}\n\n@media (min-width: 1024px) {\n .admesh-component .lg\\\\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }\n .admesh-component .lg\\\\:col-span-1 { grid-column: span 1 / span 1; }\n}\n`;\n\nlet stylesInjected = false;\n\nexport const useAdMeshStyles = () => {\n useEffect(() => {\n if (stylesInjected) return;\n\n // Create and inject styles\n const styleElement = document.createElement('style');\n styleElement.id = 'admesh-ui-sdk-styles';\n styleElement.textContent = ADMESH_STYLES;\n \n // Check if styles are already injected\n if (!document.getElementById('admesh-ui-sdk-styles')) {\n document.head.appendChild(styleElement);\n stylesInjected = true;\n }\n\n // Cleanup function\n return () => {\n const existingStyle = document.getElementById('admesh-ui-sdk-styles');\n if (existingStyle && document.head.contains(existingStyle)) {\n document.head.removeChild(existingStyle);\n stylesInjected = false;\n }\n };\n }, []);\n};\n","import type { AdMeshRecommendation } from '../types/index';\n\n/**\n * Utility functions for generating compliant disclosure labels and tooltips\n */\n\nexport interface DisclosureConfig {\n showTooltips?: boolean;\n compactMode?: boolean;\n customLabels?: {\n smartPick?: string;\n partnerMatch?: string;\n promotedOption?: string;\n relatedOption?: string;\n };\n}\n\n/**\n * Generate appropriate label based on match score and recommendation quality\n */\nexport const getRecommendationLabel = (\n recommendation: AdMeshRecommendation,\n config: DisclosureConfig = {}\n): string => {\n const matchScore = recommendation.intent_match_score || 0;\n const customLabels = config.customLabels || {};\n\n // High match score (>0.8)\n if (matchScore >= 0.8) {\n return customLabels.smartPick || 'Smart Pick';\n }\n \n // Medium match score (0.6-0.8)\n if (matchScore >= 0.6) {\n return customLabels.partnerMatch || 'Partner Match';\n }\n \n // Lower match score (<0.6)\n if (matchScore >= 0.3) {\n return customLabels.promotedOption || 'Promoted Option';\n }\n \n // Very low match - related option\n return customLabels.relatedOption || 'Related Option';\n};\n\n/**\n * Generate tooltip text for recommendation labels\n */\nexport const getLabelTooltip = (\n recommendation: AdMeshRecommendation,\n _label: string\n): string => {\n const matchScore = recommendation.intent_match_score || 0;\n\n if (matchScore >= 0.8) {\n return \"This recommendation is from a partner who compensates us when you engage. We've matched it to your needs based on your query.\";\n }\n \n if (matchScore >= 0.6) {\n return \"Top-rated partner solution matched to your specific requirements. Partner compensates us for qualified referrals.\";\n }\n \n if (matchScore >= 0.3) {\n return \"This partner solution may be relevant to your needs. The partner compensates us when you take qualifying actions.\";\n }\n \n return \"This solution is somewhat related to