@ai-ad-network/frontend-sdk 1.0.6 → 1.0.7

package/README.md

@@ -1,6 +1,36 @@
 # AI Ad Network Frontend SDK
 
-> 🚀 **Zero-config** React SDK for AI-powered native ads with automatic client info collection
+> 🚀 **Zero-config** SDK for AI-powered native ads with automatic client info collection
+>
+> 📦 **Dual Support**: React SDK + Universal Framework-Agnostic SDK
+
+## 🎯 Choose Your Integration
+
+### React Projects (Original SDK)
+```bash
+npm install @ai-ad-network/frontend-sdk
+```
+```tsx
+import { AdProvider, useAiAds } from '@ai-ad-network/frontend-sdk';
+```
+
+### Any Other Framework (Universal SDK) ⭐ NEW
+```bash
+npm install @ai-ad-network/frontend-sdk
+```
+```javascript
+import { AdManager, DOMRenderer } from '@ai-ad-network/frontend-sdk/universal';
+```
+
+**Universal SDK Works With:**
+- ✅ Vanilla JavaScript
+- ✅ Vue 2 & 3
+- ✅ Angular
+- ✅ Svelte
+- ✅ SolidJS
+- ✅ Any other framework
+
+📖 **[Universal SDK Guide](./docs/UNIVERSAL_SDK_GUIDE.md)** for non-React frameworks
 
 ## ✨ Key Features
 
@@ -53,6 +83,55 @@ function ChatApp() {
 - 👤 **User Info**: Unique ID (auto-generated & persistent)
 - 🌍 **Geo Info**: Country, language (from timezone/locale)
 
+📖 **See [ClientInfo Documentation](./docs/CLIENT_INFO_COLLECTION.md)**
+
+---
+
+## 🆕 ClientInfo API ⭐ NEW
+
+**Direct access to client information for your own use!**
+
+The SDK now exposes convenient functions to access client info for analytics, personalization, A/B testing, and more.
+
+```typescript
+// React SDK
+import { getUserId, getDeviceInfo, getClientInfo } from '@ai-ad-network/frontend-sdk';
+
+// Universal SDK (Vue, Angular, etc.)
+import { getUserId, getDeviceInfo, getClientInfo } from '@ai-ad-network/frontend-sdk/universal';
+
+// Get user ID for analytics
+const userId = getUserId();
+analytics.identify(userId);
+
+// Get device info for conditional features
+const device = getDeviceInfo();
+if (device.devicetype === 1) {
+  // Mobile - enable mobile optimizations
+} else {
+  // Desktop - enable desktop features
+}
+
+// Get complete info for personalization
+const info = getClientInfo();
+if (info.geo?.country === 'CN') {
+  loadChinesePaymentMethods();
+}
+```
+
+**Available Functions:**
+- `getClientInfo()` - Get complete client information
+- `getUserId()` - Get persistent user ID
+- `getDeviceInfo()` - Get device info only
+- `getUserInfo()` - Get user info only
+- `getAppInfo()` - Get app info only
+- `getGeoInfo()` - Get geo info only
+- `getClientInfoJSON()` - Get as JSON string
+- `getClientInfoSummary()` - Get human-readable summary
+- `clearClientInfoCache()` - Force re-collection
+
+📖 **[Universal SDK Guide - ClientInfo API](./docs/UNIVERSAL_SDK_GUIDE.md#clientinfo-api--new)**
+
 📖 **See [Quick Start Guide](./docs/QUICK_START.md) for complete integration docs.**
 
 ## Installation

package/dist/index.esm.js

@@ -3,7 +3,7 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import React, { useState, useRef, useCallback, useEffect, createContext, useContext, useMemo, Component } from "react";
 import useSWR from "swr";
-const SDK_VERSION = "1.0.6";
+const SDK_VERSION = "1.0.7";
 var IntentType = /* @__PURE__ */ ((IntentType2) => {
   IntentType2["SHOPPING"] = "shopping";
   IntentType2["LEAD_GEN"] = "lead_gen";
@@ -649,6 +649,45 @@ const _ClientInfoCollector = class _ClientInfoCollector {
 __publicField(_ClientInfoCollector, "instance");
 let ClientInfoCollector = _ClientInfoCollector;
 const getClientInfoCollector = () => ClientInfoCollector.getInstance();
+function getClientInfo(options) {
+  const collector = getClientInfoCollector();
+  return collector.collect(options);
+}
+function getDeviceInfo() {
+  return getClientInfo().device;
+}
+function getUserInfo() {
+  return getClientInfo().user;
+}
+function getAppInfo() {
+  return getClientInfo().app;
+}
+function getGeoInfo() {
+  return getClientInfo().geo;
+}
+function getUserId() {
+  return getUserInfo().id;
+}
+function clearClientInfoCache() {
+  const collector = getClientInfoCollector();
+  collector.clearCache();
+}
+function getClientInfoJSON(options) {
+  const info = getClientInfo(options);
+  return JSON.stringify(info, null, 2);
+}
+function getClientInfoSummary() {
+  var _a;
+  const info = getClientInfo();
+  const parts = [
+    info.device.os,
+    info.device.osv,
+    info.app.name,
+    info.user.id.slice(0, 8) + "...",
+    ((_a = info.geo) == null ? void 0 : _a.country) || "Unknown"
+  ];
+  return parts.join(" / ");
+}
 function adaptAdToKoahAd(adaptedAd) {
   var _a, _b;
   return {
@@ -7660,15 +7699,24 @@ export {
   TextWeaver,
   adaptAdToKoahAd,
   checkFrequencyControl,
+  clearClientInfoCache,
   cn,
   createLogger,
   fetchAds,
   getAdById,
   getAdsByCategory,
   getAdsBySource,
+  getAppInfo,
+  getClientInfo,
   getClientInfoCollector,
+  getClientInfoJSON,
+  getClientInfoSummary,
+  getDeviceInfo,
+  getGeoInfo,
   getRandomAds,
   getSessionId,
+  getUserId,
+  getUserInfo,
   hashUserId,
   mockAds,
   mockAnalyticsData,

package/dist/index.js

@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const useSWR = require("swr");
-const SDK_VERSION = "1.0.6";
+const SDK_VERSION = "1.0.7";
 var IntentType = /* @__PURE__ */ ((IntentType2) => {
   IntentType2["SHOPPING"] = "shopping";
   IntentType2["LEAD_GEN"] = "lead_gen";
@@ -651,6 +651,45 @@ const _ClientInfoCollector = class _ClientInfoCollector {
 __publicField(_ClientInfoCollector, "instance");
 let ClientInfoCollector = _ClientInfoCollector;
 const getClientInfoCollector = () => ClientInfoCollector.getInstance();
+function getClientInfo(options) {
+  const collector = getClientInfoCollector();
+  return collector.collect(options);
+}
+function getDeviceInfo() {
+  return getClientInfo().device;
+}
+function getUserInfo() {
+  return getClientInfo().user;
+}
+function getAppInfo() {
+  return getClientInfo().app;
+}
+function getGeoInfo() {
+  return getClientInfo().geo;
+}
+function getUserId() {
+  return getUserInfo().id;
+}
+function clearClientInfoCache() {
+  const collector = getClientInfoCollector();
+  collector.clearCache();
+}
+function getClientInfoJSON(options) {
+  const info = getClientInfo(options);
+  return JSON.stringify(info, null, 2);
+}
+function getClientInfoSummary() {
+  var _a;
+  const info = getClientInfo();
+  const parts = [
+    info.device.os,
+    info.device.osv,
+    info.app.name,
+    info.user.id.slice(0, 8) + "...",
+    ((_a = info.geo) == null ? void 0 : _a.country) || "Unknown"
+  ];
+  return parts.join(" / ");
+}
 function adaptAdToKoahAd(adaptedAd) {
   var _a, _b;
   return {
@@ -7661,15 +7700,24 @@ exports.SuffixAdMinimal = SuffixAdMinimal;
 exports.TextWeaver = TextWeaver;
 exports.adaptAdToKoahAd = adaptAdToKoahAd;
 exports.checkFrequencyControl = checkFrequencyControl;
+exports.clearClientInfoCache = clearClientInfoCache;
 exports.cn = cn;
 exports.createLogger = createLogger;
 exports.fetchAds = fetchAds;
 exports.getAdById = getAdById;
 exports.getAdsByCategory = getAdsByCategory;
 exports.getAdsBySource = getAdsBySource;
+exports.getAppInfo = getAppInfo;
+exports.getClientInfo = getClientInfo;
 exports.getClientInfoCollector = getClientInfoCollector;
+exports.getClientInfoJSON = getClientInfoJSON;
+exports.getClientInfoSummary = getClientInfoSummary;
+exports.getDeviceInfo = getDeviceInfo;
+exports.getGeoInfo = getGeoInfo;
 exports.getRandomAds = getRandomAds;
 exports.getSessionId = getSessionId;
+exports.getUserId = getUserId;
+exports.getUserInfo = getUserInfo;
 exports.hashUserId = hashUserId;
 exports.mockAds = mockAds;
 exports.mockAnalyticsData = mockAnalyticsData;

package/dist/style.css

@@ -675,6 +675,9 @@ video {
 .list-item {
   display: list-item;
 }
+.hidden {
+  display: none;
+}
 .aspect-\[4\/3\] {
   aspect-ratio: 4/3;
 }
@@ -1607,6 +1610,11 @@ video {
 .opacity-\[0\.02\] {
   opacity: 0.02;
 }
+.shadow {
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 .shadow-glass {
   --tw-shadow: 0 4px 24px -1px rgba(0, 0, 0, 0.06), 0 2px 8px -1px rgba(0, 0, 0, 0.04);
   --tw-shadow-colored: 0 4px 24px -1px var(--tw-shadow-color), 0 2px 8px -1px var(--tw-shadow-color);
@@ -1638,6 +1646,11 @@ video {
   --tw-backdrop-blur: blur(4px);
   backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
+.transition {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .transition-all {
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);