@adtogether/web-sdk 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,3 @@
+## 0.1.0
+
+* Initial release of the AdTogether Web SDK.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 AdTogether
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/chunk-IDJUJZAL.mjs

@@ -0,0 +1,57 @@
+// src/core/AdTogether.ts
+var AdTogether = class _AdTogether {
+  constructor() {
+    this.baseUrl = "https://adtogether.com";
+  }
+  static get shared() {
+    if (!_AdTogether.instance) {
+      _AdTogether.instance = new _AdTogether();
+    }
+    return _AdTogether.instance;
+  }
+  static initialize(options) {
+    const sdk = _AdTogether.shared;
+    sdk.appId = options.appId;
+    if (options.baseUrl) {
+      sdk.baseUrl = options.baseUrl;
+    }
+    console.log(`AdTogether SDK Initialized with App ID: ${options.appId}`);
+  }
+  assertInitialized() {
+    if (!this.appId) {
+      console.error("AdTogether Error: SDK has not been initialized. Please call AdTogether.initialize() before displaying ads.");
+      return false;
+    }
+    return true;
+  }
+  static async fetchAd(adUnitId) {
+    if (!_AdTogether.shared.assertInitialized()) {
+      throw new Error("AdTogether not initialized");
+    }
+    const response = await fetch(`${_AdTogether.shared.baseUrl}/api/ads/serve?country=global&adUnitId=${adUnitId}`);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch ad. Status: ${response.status}`);
+    }
+    return response.json();
+  }
+  static trackImpression(adId) {
+    this.trackEvent("/api/ads/impression", adId);
+  }
+  static trackClick(adId) {
+    this.trackEvent("/api/ads/click", adId);
+  }
+  static trackEvent(endpoint, adId) {
+    if (!_AdTogether.shared.assertInitialized()) return;
+    fetch(`${_AdTogether.shared.baseUrl}${endpoint}`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({ adId })
+    }).catch(console.error);
+  }
+};
+
+export {
+  AdTogether
+};

package/dist/index.d.mts

@@ -0,0 +1,27 @@
+interface AdModel {
+    id: string;
+    title: string;
+    description: string;
+    clickUrl?: string;
+    imageUrl?: string;
+}
+interface AdTogetherOptions {
+    appId: string;
+    baseUrl?: string;
+}
+
+declare class AdTogether {
+    private static instance;
+    private appId?;
+    baseUrl: string;
+    private constructor();
+    static get shared(): AdTogether;
+    static initialize(options: AdTogetherOptions): void;
+    assertInitialized(): boolean;
+    static fetchAd(adUnitId: string): Promise<AdModel>;
+    static trackImpression(adId: string): void;
+    static trackClick(adId: string): void;
+    private static trackEvent;
+}
+
+export { type AdModel, AdTogether, type AdTogetherOptions };

package/dist/index.d.ts

@@ -0,0 +1,27 @@
+interface AdModel {
+    id: string;
+    title: string;
+    description: string;
+    clickUrl?: string;
+    imageUrl?: string;
+}
+interface AdTogetherOptions {
+    appId: string;
+    baseUrl?: string;
+}
+
+declare class AdTogether {
+    private static instance;
+    private appId?;
+    baseUrl: string;
+    private constructor();
+    static get shared(): AdTogether;
+    static initialize(options: AdTogetherOptions): void;
+    assertInitialized(): boolean;
+    static fetchAd(adUnitId: string): Promise<AdModel>;
+    static trackImpression(adId: string): void;
+    static trackClick(adId: string): void;
+    private static trackEvent;
+}
+
+export { type AdModel, AdTogether, type AdTogetherOptions };

package/dist/index.js

@@ -0,0 +1,83 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AdTogether: () => AdTogether
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/core/AdTogether.ts
+var AdTogether = class _AdTogether {
+  constructor() {
+    this.baseUrl = "https://adtogether.com";
+  }
+  static get shared() {
+    if (!_AdTogether.instance) {
+      _AdTogether.instance = new _AdTogether();
+    }
+    return _AdTogether.instance;
+  }
+  static initialize(options) {
+    const sdk = _AdTogether.shared;
+    sdk.appId = options.appId;
+    if (options.baseUrl) {
+      sdk.baseUrl = options.baseUrl;
+    }
+    console.log(`AdTogether SDK Initialized with App ID: ${options.appId}`);
+  }
+  assertInitialized() {
+    if (!this.appId) {
+      console.error("AdTogether Error: SDK has not been initialized. Please call AdTogether.initialize() before displaying ads.");
+      return false;
+    }
+    return true;
+  }
+  static async fetchAd(adUnitId) {
+    if (!_AdTogether.shared.assertInitialized()) {
+      throw new Error("AdTogether not initialized");
+    }
+    const response = await fetch(`${_AdTogether.shared.baseUrl}/api/ads/serve?country=global&adUnitId=${adUnitId}`);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch ad. Status: ${response.status}`);
+    }
+    return response.json();
+  }
+  static trackImpression(adId) {
+    this.trackEvent("/api/ads/impression", adId);
+  }
+  static trackClick(adId) {
+    this.trackEvent("/api/ads/click", adId);
+  }
+  static trackEvent(endpoint, adId) {
+    if (!_AdTogether.shared.assertInitialized()) return;
+    fetch(`${_AdTogether.shared.baseUrl}${endpoint}`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({ adId })
+    }).catch(console.error);
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AdTogether
+});

package/dist/index.mjs

@@ -0,0 +1,6 @@
+import {
+  AdTogether
+} from "./chunk-IDJUJZAL.mjs";
+export {
+  AdTogether
+};

package/dist/react/index.d.mts

@@ -0,0 +1,18 @@
+import React from 'react';
+
+interface AdTogetherBannerProps {
+    adUnitId: string;
+    className?: string;
+    style?: React.CSSProperties;
+    onAdLoaded?: () => void;
+    onAdFailedToLoad?: (error: Error) => void;
+    /** Width of the ad element. Defaults to '100%' */
+    width?: number | string;
+    /** Height of the ad element. Defaults to 'auto' */
+    height?: number | string;
+    /** Pass 'dark' to use dark mode, 'light' for light mode, or 'auto' (default) to respect system preference */
+    theme?: 'dark' | 'light' | 'auto';
+}
+declare const AdTogetherBanner: React.FC<AdTogetherBannerProps>;
+
+export { AdTogetherBanner, type AdTogetherBannerProps };

package/dist/react/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+
+interface AdTogetherBannerProps {
+    adUnitId: string;
+    className?: string;
+    style?: React.CSSProperties;
+    onAdLoaded?: () => void;
+    onAdFailedToLoad?: (error: Error) => void;
+    /** Width of the ad element. Defaults to '100%' */
+    width?: number | string;
+    /** Height of the ad element. Defaults to 'auto' */
+    height?: number | string;
+    /** Pass 'dark' to use dark mode, 'light' for light mode, or 'auto' (default) to respect system preference */
+    theme?: 'dark' | 'light' | 'auto';
+}
+declare const AdTogetherBanner: React.FC<AdTogetherBannerProps>;
+
+export { AdTogetherBanner, type AdTogetherBannerProps };

package/dist/react/index.js

@@ -0,0 +1,231 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/react/index.ts
+var react_exports = {};
+__export(react_exports, {
+  AdTogetherBanner: () => AdTogetherBanner
+});
+module.exports = __toCommonJS(react_exports);
+
+// src/react/AdTogetherBanner.tsx
+var import_react = require("react");
+
+// src/core/AdTogether.ts
+var AdTogether = class _AdTogether {
+  constructor() {
+    this.baseUrl = "https://adtogether.com";
+  }
+  static get shared() {
+    if (!_AdTogether.instance) {
+      _AdTogether.instance = new _AdTogether();
+    }
+    return _AdTogether.instance;
+  }
+  static initialize(options) {
+    const sdk = _AdTogether.shared;
+    sdk.appId = options.appId;
+    if (options.baseUrl) {
+      sdk.baseUrl = options.baseUrl;
+    }
+    console.log(`AdTogether SDK Initialized with App ID: ${options.appId}`);
+  }
+  assertInitialized() {
+    if (!this.appId) {
+      console.error("AdTogether Error: SDK has not been initialized. Please call AdTogether.initialize() before displaying ads.");
+      return false;
+    }
+    return true;
+  }
+  static async fetchAd(adUnitId) {
+    if (!_AdTogether.shared.assertInitialized()) {
+      throw new Error("AdTogether not initialized");
+    }
+    const response = await fetch(`${_AdTogether.shared.baseUrl}/api/ads/serve?country=global&adUnitId=${adUnitId}`);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch ad. Status: ${response.status}`);
+    }
+    return response.json();
+  }
+  static trackImpression(adId) {
+    this.trackEvent("/api/ads/impression", adId);
+  }
+  static trackClick(adId) {
+    this.trackEvent("/api/ads/click", adId);
+  }
+  static trackEvent(endpoint, adId) {
+    if (!_AdTogether.shared.assertInitialized()) return;
+    fetch(`${_AdTogether.shared.baseUrl}${endpoint}`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({ adId })
+    }).catch(console.error);
+  }
+};
+
+// src/react/AdTogetherBanner.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var AdTogetherBanner = ({
+  adUnitId,
+  className = "",
+  style = {},
+  onAdLoaded,
+  onAdFailedToLoad,
+  width = "100%",
+  height = "auto",
+  theme = "auto"
+}) => {
+  const [adData, setAdData] = (0, import_react.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react.useState)(true);
+  const [hasError, setHasError] = (0, import_react.useState)(false);
+  const [isDarkMode, setIsDarkMode] = (0, import_react.useState)(theme === "dark");
+  const containerRef = (0, import_react.useRef)(null);
+  const impressionTrackedRef = (0, import_react.useRef)(false);
+  (0, import_react.useEffect)(() => {
+    if (theme === "auto") {
+      const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+      setIsDarkMode(mediaQuery.matches);
+      const handler = (e) => setIsDarkMode(e.matches);
+      mediaQuery.addEventListener("change", handler);
+      return () => mediaQuery.removeEventListener("change", handler);
+    } else {
+      setIsDarkMode(theme === "dark");
+    }
+  }, [theme]);
+  (0, import_react.useEffect)(() => {
+    let isMounted = true;
+    AdTogether.fetchAd(adUnitId).then((ad) => {
+      if (isMounted) {
+        setAdData(ad);
+        setIsLoading(false);
+        onAdLoaded?.();
+      }
+    }).catch((err) => {
+      if (isMounted) {
+        console.error("AdTogether Failed to load ad:", err);
+        setHasError(true);
+        setIsLoading(false);
+        onAdFailedToLoad?.(err);
+      }
+    });
+    return () => {
+      isMounted = false;
+    };
+  }, [adUnitId, onAdLoaded, onAdFailedToLoad]);
+  (0, import_react.useEffect)(() => {
+    if (!adData || isLoading || hasError || !containerRef.current) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting && entries[0].intersectionRatio >= 0.5 && !impressionTrackedRef.current) {
+          impressionTrackedRef.current = true;
+          AdTogether.trackImpression(adData.id);
+          observer.disconnect();
+        }
+      },
+      { threshold: 0.5 }
+    );
+    observer.observe(containerRef.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, [adData, isLoading, hasError]);
+  const handleContainerClick = () => {
+    if (!adData) return;
+    AdTogether.trackClick(adData.id);
+    if (adData.clickUrl) {
+      window.open(adData.clickUrl, "_blank", "noopener,noreferrer");
+    }
+  };
+  if (isLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        style: { width, height, ...style },
+        className
+      }
+    );
+  }
+  if (hasError || !adData) {
+    return null;
+  }
+  const bgColor = isDarkMode ? "#1F2937" : "#ffffff";
+  const borderColor = isDarkMode ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.1)";
+  const textColor = isDarkMode ? "#F9FAFB" : "#111827";
+  const descColor = isDarkMode ? "#9CA3AF" : "#6B7280";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ref: containerRef,
+      className: `adtogether-banner ${className}`,
+      onClick: handleContainerClick,
+      style: {
+        display: "flex",
+        flexDirection: "row",
+        width,
+        height,
+        backgroundColor: bgColor,
+        borderRadius: "12px",
+        border: `1px solid ${borderColor}`,
+        boxShadow: "0 4px 10px rgba(0, 0, 0, 0.05)",
+        overflow: "hidden",
+        cursor: "pointer",
+        boxSizing: "border-box",
+        ...style
+      },
+      onMouseOver: (e) => {
+        e.currentTarget.style.transform = "scale(1.02)";
+        e.currentTarget.style.transition = "transform 0.2s";
+      },
+      onMouseOut: (e) => {
+        e.currentTarget.style.transform = "scale(1)";
+      },
+      children: [
+        adData.imageUrl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { flexShrink: 0, width: "120px", height: "100%", minHeight: "80px" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "img",
+          {
+            src: adData.imageUrl,
+            alt: adData.title,
+            style: { width: "100%", height: "100%", objectFit: "cover" }
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { padding: "12px", display: "flex", flexDirection: "column", justifyContent: "center", flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: "4px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontWeight: "bold", fontSize: "14px", color: textColor, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: adData.title }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: {
+              backgroundColor: "#FBBF24",
+              color: "#000",
+              fontSize: "9px",
+              fontWeight: "bold",
+              padding: "2px 4px",
+              borderRadius: "4px",
+              marginLeft: "8px"
+            }, children: "AD" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: "12px", color: descColor, overflow: "hidden", display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical" }, children: adData.description })
+        ] })
+      ]
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AdTogetherBanner
+});

package/dist/react/index.mjs

@@ -0,0 +1,152 @@
+import {
+  AdTogether
+} from "../chunk-IDJUJZAL.mjs";
+
+// src/react/AdTogetherBanner.tsx
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var AdTogetherBanner = ({
+  adUnitId,
+  className = "",
+  style = {},
+  onAdLoaded,
+  onAdFailedToLoad,
+  width = "100%",
+  height = "auto",
+  theme = "auto"
+}) => {
+  const [adData, setAdData] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [hasError, setHasError] = useState(false);
+  const [isDarkMode, setIsDarkMode] = useState(theme === "dark");
+  const containerRef = useRef(null);
+  const impressionTrackedRef = useRef(false);
+  useEffect(() => {
+    if (theme === "auto") {
+      const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+      setIsDarkMode(mediaQuery.matches);
+      const handler = (e) => setIsDarkMode(e.matches);
+      mediaQuery.addEventListener("change", handler);
+      return () => mediaQuery.removeEventListener("change", handler);
+    } else {
+      setIsDarkMode(theme === "dark");
+    }
+  }, [theme]);
+  useEffect(() => {
+    let isMounted = true;
+    AdTogether.fetchAd(adUnitId).then((ad) => {
+      if (isMounted) {
+        setAdData(ad);
+        setIsLoading(false);
+        onAdLoaded?.();
+      }
+    }).catch((err) => {
+      if (isMounted) {
+        console.error("AdTogether Failed to load ad:", err);
+        setHasError(true);
+        setIsLoading(false);
+        onAdFailedToLoad?.(err);
+      }
+    });
+    return () => {
+      isMounted = false;
+    };
+  }, [adUnitId, onAdLoaded, onAdFailedToLoad]);
+  useEffect(() => {
+    if (!adData || isLoading || hasError || !containerRef.current) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting && entries[0].intersectionRatio >= 0.5 && !impressionTrackedRef.current) {
+          impressionTrackedRef.current = true;
+          AdTogether.trackImpression(adData.id);
+          observer.disconnect();
+        }
+      },
+      { threshold: 0.5 }
+    );
+    observer.observe(containerRef.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, [adData, isLoading, hasError]);
+  const handleContainerClick = () => {
+    if (!adData) return;
+    AdTogether.trackClick(adData.id);
+    if (adData.clickUrl) {
+      window.open(adData.clickUrl, "_blank", "noopener,noreferrer");
+    }
+  };
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: { width, height, ...style },
+        className
+      }
+    );
+  }
+  if (hasError || !adData) {
+    return null;
+  }
+  const bgColor = isDarkMode ? "#1F2937" : "#ffffff";
+  const borderColor = isDarkMode ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.1)";
+  const textColor = isDarkMode ? "#F9FAFB" : "#111827";
+  const descColor = isDarkMode ? "#9CA3AF" : "#6B7280";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: `adtogether-banner ${className}`,
+      onClick: handleContainerClick,
+      style: {
+        display: "flex",
+        flexDirection: "row",
+        width,
+        height,
+        backgroundColor: bgColor,
+        borderRadius: "12px",
+        border: `1px solid ${borderColor}`,
+        boxShadow: "0 4px 10px rgba(0, 0, 0, 0.05)",
+        overflow: "hidden",
+        cursor: "pointer",
+        boxSizing: "border-box",
+        ...style
+      },
+      onMouseOver: (e) => {
+        e.currentTarget.style.transform = "scale(1.02)";
+        e.currentTarget.style.transition = "transform 0.2s";
+      },
+      onMouseOut: (e) => {
+        e.currentTarget.style.transform = "scale(1)";
+      },
+      children: [
+        adData.imageUrl && /* @__PURE__ */ jsx("div", { style: { flexShrink: 0, width: "120px", height: "100%", minHeight: "80px" }, children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: adData.imageUrl,
+            alt: adData.title,
+            style: { width: "100%", height: "100%", objectFit: "cover" }
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { style: { padding: "12px", display: "flex", flexDirection: "column", justifyContent: "center", flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: "4px" }, children: [
+            /* @__PURE__ */ jsx("span", { style: { fontWeight: "bold", fontSize: "14px", color: textColor, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: adData.title }),
+            /* @__PURE__ */ jsx("span", { style: {
+              backgroundColor: "#FBBF24",
+              color: "#000",
+              fontSize: "9px",
+              fontWeight: "bold",
+              padding: "2px 4px",
+              borderRadius: "4px",
+              marginLeft: "8px"
+            }, children: "AD" })
+          ] }),
+          /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", color: descColor, overflow: "hidden", display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical" }, children: adData.description })
+        ] })
+      ]
+    }
+  );
+};
+export {
+  AdTogetherBanner
+};

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@adtogether/web-sdk",
+  "version": "0.1.0",
+  "description": "The official AdTogether Web SDK for monetizing applications.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/AdTogether/AdTogether.git",
+    "directory": "sdk/web-sdk"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs"
+    },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "require": "./dist/react/index.js",
+      "import": "./dist/react/index.mjs"
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "commonjs",
+  "peerDependencies": {
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "tsup": "^8.5.1",
+    "typescript": "^5.3.3"
+  }
+}

package/src/core/AdTogether.ts

@@ -0,0 +1,65 @@
+import { AdModel, AdTogetherOptions } from './types';
+
+export class AdTogether {
+  private static instance: AdTogether;
+  private appId?: string;
+  public baseUrl: string = 'https://adtogether.com';
+
+  private constructor() {}
+
+  static get shared(): AdTogether {
+    if (!AdTogether.instance) {
+      AdTogether.instance = new AdTogether();
+    }
+    return AdTogether.instance;
+  }
+
+  static initialize(options: AdTogetherOptions) {
+    const sdk = AdTogether.shared;
+    sdk.appId = options.appId;
+    if (options.baseUrl) {
+      sdk.baseUrl = options.baseUrl;
+    }
+    console.log(`AdTogether SDK Initialized with App ID: ${options.appId}`);
+  }
+
+  assertInitialized() {
+    if (!this.appId) {
+      console.error('AdTogether Error: SDK has not been initialized. Please call AdTogether.initialize() before displaying ads.');
+      return false;
+    }
+    return true;
+  }
+
+  static async fetchAd(adUnitId: string): Promise<AdModel> {
+    if (!AdTogether.shared.assertInitialized()) {
+      throw new Error('AdTogether not initialized');
+    }
+
+    const response = await fetch(`${AdTogether.shared.baseUrl}/api/ads/serve?country=global&adUnitId=${adUnitId}`);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch ad. Status: ${response.status}`);
+    }
+    return response.json();
+  }
+
+  static trackImpression(adId: string) {
+    this.trackEvent('/api/ads/impression', adId);
+  }
+
+  static trackClick(adId: string) {
+    this.trackEvent('/api/ads/click', adId);
+  }
+
+  private static trackEvent(endpoint: string, adId: string) {
+    if (!AdTogether.shared.assertInitialized()) return;
+    
+    fetch(`${AdTogether.shared.baseUrl}${endpoint}`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ adId }),
+    }).catch(console.error);
+  }
+}

package/src/core/types.ts

@@ -0,0 +1,12 @@
+export interface AdModel {
+  id: string;
+  title: string;
+  description: string;
+  clickUrl?: string;
+  imageUrl?: string;
+}
+
+export interface AdTogetherOptions {
+  appId: string;
+  baseUrl?: string;
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './core/AdTogether';
+export * from './core/types';

package/src/react/AdTogetherBanner.tsx

@@ -0,0 +1,184 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { AdTogether } from '../core/AdTogether';
+import { AdModel } from '../core/types';
+
+export interface AdTogetherBannerProps {
+  adUnitId: string;
+  className?: string;
+  style?: React.CSSProperties;
+  onAdLoaded?: () => void;
+  onAdFailedToLoad?: (error: Error) => void;
+  /** Width of the ad element. Defaults to '100%' */
+  width?: number | string;
+  /** Height of the ad element. Defaults to 'auto' */
+  height?: number | string;
+  /** Pass 'dark' to use dark mode, 'light' for light mode, or 'auto' (default) to respect system preference */
+  theme?: 'dark' | 'light' | 'auto';
+}
+
+export const AdTogetherBanner: React.FC<AdTogetherBannerProps> = ({
+  adUnitId,
+  className = '',
+  style = {},
+  onAdLoaded,
+  onAdFailedToLoad,
+  width = '100%',
+  height = 'auto',
+  theme = 'auto',
+}) => {
+  const [adData, setAdData] = useState<AdModel | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [hasError, setHasError] = useState(false);
+  const [isDarkMode, setIsDarkMode] = useState(theme === 'dark');
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const impressionTrackedRef = useRef(false);
+
+  // Handle system theme changes
+  useEffect(() => {
+    if (theme === 'auto') {
+      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+      setIsDarkMode(mediaQuery.matches);
+
+      const handler = (e: MediaQueryListEvent) => setIsDarkMode(e.matches);
+      mediaQuery.addEventListener('change', handler);
+      return () => mediaQuery.removeEventListener('change', handler);
+    } else {
+      setIsDarkMode(theme === 'dark');
+    }
+  }, [theme]);
+
+  // Fetch Ad
+  useEffect(() => {
+    let isMounted = true;
+
+    AdTogether.fetchAd(adUnitId)
+      .then((ad) => {
+        if (isMounted) {
+          setAdData(ad);
+          setIsLoading(false);
+          onAdLoaded?.();
+        }
+      })
+      .catch((err) => {
+        if (isMounted) {
+          console.error('AdTogether Failed to load ad:', err);
+          setHasError(true);
+          setIsLoading(false);
+          onAdFailedToLoad?.(err);
+        }
+      });
+
+    return () => {
+      isMounted = false;
+    };
+  }, [adUnitId, onAdLoaded, onAdFailedToLoad]);
+
+  // Impression tracking
+  useEffect(() => {
+    if (!adData || isLoading || hasError || !containerRef.current) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting && entries[0].intersectionRatio >= 0.5 && !impressionTrackedRef.current) {
+          impressionTrackedRef.current = true;
+          AdTogether.trackImpression(adData.id);
+          observer.disconnect();
+        }
+      },
+      { threshold: 0.5 }
+    );
+
+    observer.observe(containerRef.current);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [adData, isLoading, hasError]);
+
+  const handleContainerClick = () => {
+    if (!adData) return;
+    AdTogether.trackClick(adData.id);
+    if (adData.clickUrl) {
+      window.open(adData.clickUrl, '_blank', 'noopener,noreferrer');
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div 
+        style={{ width, height, ...style }} 
+        className={className} 
+      />
+    );
+  }
+
+  if (hasError || !adData) {
+    return null;
+  }
+
+  const bgColor = isDarkMode ? '#1F2937' : '#ffffff';
+  const borderColor = isDarkMode ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)';
+  const textColor = isDarkMode ? '#F9FAFB' : '#111827';
+  const descColor = isDarkMode ? '#9CA3AF' : '#6B7280';
+
+  return (
+    <div
+      ref={containerRef}
+      className={`adtogether-banner ${className}`}
+      onClick={handleContainerClick}
+      style={{
+        display: 'flex',
+        flexDirection: 'row',
+        width,
+        height,
+        backgroundColor: bgColor,
+        borderRadius: '12px',
+        border: `1px solid ${borderColor}`,
+        boxShadow: '0 4px 10px rgba(0, 0, 0, 0.05)',
+        overflow: 'hidden',
+        cursor: 'pointer',
+        boxSizing: 'border-box',
+        ...style,
+      }}
+      onMouseOver={(e) => {
+        e.currentTarget.style.transform = 'scale(1.02)';
+        e.currentTarget.style.transition = 'transform 0.2s';
+      }}
+      onMouseOut={(e) => {
+        e.currentTarget.style.transform = 'scale(1)';
+      }}
+    >
+      {adData.imageUrl && (
+        <div style={{ flexShrink: 0, width: '120px', height: '100%', minHeight: '80px' }}>
+          <img
+            src={adData.imageUrl}
+            alt={adData.title}
+            style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+          />
+        </div>
+      )}
+      <div style={{ padding: '12px', display: 'flex', flexDirection: 'column', justifyContent: 'center', flex: 1, minWidth: 0 }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '4px' }}>
+          <span style={{ fontWeight: 'bold', fontSize: '14px', color: textColor, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+            {adData.title}
+          </span>
+          <span style={{ 
+            backgroundColor: '#FBBF24', 
+            color: '#000', 
+            fontSize: '9px', 
+            fontWeight: 'bold', 
+            padding: '2px 4px', 
+            borderRadius: '4px',
+            marginLeft: '8px'
+          }}>
+            AD
+          </span>
+        </div>
+        <span style={{ fontSize: '12px', color: descColor, overflow: 'hidden', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical' }}>
+          {adData.description}
+        </span>
+      </div>
+    </div>
+  );
+};

package/src/react/index.ts

@@ -0,0 +1 @@
+export * from './AdTogetherBanner';

package/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es2020",
+    "module": "esnext",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "outDir": "dist",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "bundler"
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}

package/tsup.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  entry: ['src/index.ts', 'src/react/index.ts'],
+  format: ['cjs', 'esm'],
+  dts: true,
+  clean: true,
+  external: ['react', 'react-dom'],
+});