@zerocost/sdk 0.2.0 → 0.4.0

package/dist/index.cjs

@@ -20,23 +20,37 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  LLMDataModule: () => LLMDataModule,
+  RecordingModule: () => RecordingModule,
+  ZerocostClient: () => ZerocostClient,
   ZerocostSDK: () => ZerocostSDK
 });
 module.exports = __toCommonJS(index_exports);
 
+// src/core/config.ts
+var EDGE_FUNCTION_BASE = "https://mwbgzpbuoojqsuxduieo.supabase.co/functions/v1";
+function getBaseUrl(custom) {
+  return custom || EDGE_FUNCTION_BASE;
+}
+
 // src/core/client.ts
 var ZerocostClient = class {
   config;
+  baseUrl;
   isInitialized = false;
   constructor(config) {
     if (!config.appId) {
       throw new Error("ZerocostSDK: appId is required");
     }
+    if (!config.apiKey) {
+      throw new Error("ZerocostSDK: apiKey is required");
+    }
     this.config = {
       environment: "production",
       debug: false,
       ...config
     };
+    this.baseUrl = getBaseUrl(config.baseUrl);
   }
   init() {
     if (this.isInitialized) {
@@ -44,41 +58,754 @@ var ZerocostClient = class {
       return;
     }
     this.isInitialized = true;
-    this.log(`ZerocostSDK Initialized for ${this.config.appId} in ${this.config.environment} mode.`);
+    this.log(`ZerocostSDK initialized for ${this.config.appId} in ${this.config.environment} mode.`);
   }
   getConfig() {
     return this.config;
   }
+  async request(path, body) {
+    const url = `${this.baseUrl}${path}`;
+    this.log(`\u2192 ${url}`, body);
+    const res = await fetch(url, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "x-api-key": this.config.apiKey
+      },
+      body: body ? JSON.stringify(body) : void 0
+    });
+    const data = await res.json();
+    if (!res.ok) {
+      this.log(`\u2717 ${res.status}`, data);
+      throw new Error(data.error || `Request failed with status ${res.status}`);
+    }
+    this.log(`\u2713 ${res.status}`, data);
+    return data;
+  }
   log(message, data) {
     if (this.config.debug) {
-      console.log(`[Zerocost] ${message}`, data || "");
+      console.log(`[Zerocost] ${message}`, data ?? "");
+    }
+  }
+};
+
+// src/modules/ads.ts
+var AdsModule = class {
+  constructor(client) {
+    this.client = client;
+  }
+  /**
+   * Request an ad for a given placement.
+   * Returns ad content including headline, body, CTA, and tracking pixel.
+   */
+  async requestAd(placementId) {
+    const data = await this.client.request("/serve-ad", {
+      placement_id: placementId
+    });
+    return data.ad;
+  }
+};
+
+// src/modules/trackers.ts
+var TrackModule = class {
+  constructor(client) {
+    this.client = client;
+  }
+  /**
+   * Track a custom event with optional properties.
+   */
+  async event(eventName, properties) {
+    await this.client.request("/track-event", {
+      event_name: eventName,
+      properties: properties || {}
+    });
+  }
+  /**
+   * Track an ad impression.
+   */
+  async impression(adId, placementId) {
+    await this.event("ad_impression", { ad_id: adId, placement_id: placementId });
+  }
+  /**
+   * Track an ad click.
+   */
+  async click(adId, placementId) {
+    await this.event("ad_click", { ad_id: adId, placement_id: placementId });
+  }
+};
+
+// src/modules/widget.ts
+var POSITION_STYLES = {
+  "bottom-right": "position:fixed;bottom:24px;right:24px;z-index:9999;",
+  "bottom-left": "position:fixed;bottom:24px;left:80px;z-index:9999;",
+  "top-right": "position:fixed;top:24px;right:24px;z-index:9999;",
+  "top-left": "position:fixed;top:24px;left:24px;z-index:9999;",
+  "bottom-center": "position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:9999;",
+  "top-center": "position:fixed;top:24px;left:50%;transform:translateX(-50%);z-index:9999;",
+  "center": "position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9999;",
+  "sidebar-left": "position:fixed;top:50%;left:24px;transform:translateY(-50%);z-index:9999;",
+  "sidebar-right": "position:fixed;top:50%;right:24px;transform:translateY(-50%);z-index:9999;"
+};
+var WidgetModule = class {
+  constructor(client) {
+    this.client = client;
+  }
+  mounted = /* @__PURE__ */ new Map();
+  async autoInjectWithConfig(display) {
+    try {
+      const configs = this.normalizeConfigs(display);
+      const enabledCount = Object.values(configs).filter((c) => c.enabled).length;
+      this.client.log(`Auto-inject: ${enabledCount} ad format(s) enabled. No custom component needed \u2014 ads render automatically.`);
+      await this.mountFormats(configs);
+      this.client.log("\u2713 Ad slots injected successfully. Ads will appear once inventory is available.");
+    } catch (err) {
+      this.client.log(`Widget autoInject error: ${err}`);
+    }
+  }
+  async autoInject() {
+    try {
+      this.client.log("Fetching ad placements from server...");
+      const { display } = await this.client.request("/get-placements");
+      const configs = this.normalizeConfigs(display);
+      const enabledCount = Object.values(configs).filter((c) => c.enabled).length;
+      this.client.log(`Auto-inject: ${enabledCount} ad format(s) enabled. No custom component needed \u2014 ads render automatically.`);
+      await this.mountFormats(configs);
+      this.client.log("\u2713 Ad slots injected successfully. Ads will appear once inventory is available.");
+    } catch (err) {
+      this.client.log(`Widget autoInject error: ${err}`);
+    }
+  }
+  normalizeConfigs(display) {
+    if (display && "video-widget" in display) {
+      return display;
+    }
+    const pos = display?.position || "bottom-right";
+    const theme = display?.theme || "dark";
+    return {
+      "video-widget": { position: pos, theme, autoplay: false, enabled: true },
+      "tooltip-ad": { position: pos, theme, autoplay: false, enabled: true },
+      "sponsored-card": { position: pos, theme, autoplay: false, enabled: true },
+      "inline-text": { position: "after-paragraph-1", theme, autoplay: false, enabled: true }
+    };
+  }
+  async mountFormats(configs) {
+    for (const [format, cfg] of Object.entries(configs)) {
+      if (!cfg.enabled) continue;
+      const elId = `zerocost-${format}`;
+      if (document.getElementById(elId)) continue;
+      const el = document.createElement("div");
+      el.id = elId;
+      el.setAttribute("data-zerocost", "");
+      el.setAttribute("data-format", format);
+      if (format === "inline-text") {
+        continue;
+      }
+      const posStyle = POSITION_STYLES[cfg.position] || POSITION_STYLES["bottom-right"];
+      const maxW = format === "video-widget" ? "max-width:200px;" : format === "sponsored-card" || format === "sidebar-display" ? "max-width:176px;" : "max-width:320px;";
+      el.setAttribute("style", posStyle + maxW);
+      document.body.appendChild(el);
+      await this.mount(elId, { format, refreshInterval: 30, theme: cfg.theme, autoplay: cfg.autoplay });
+    }
+  }
+  async mount(targetElementId, options = {}) {
+    const el = document.getElementById(targetElementId);
+    if (!el) return;
+    if (this.mounted.has(targetElementId)) this.unmount(targetElementId);
+    const refreshMs = (options.refreshInterval ?? 30) * 1e3;
+    const theme = options.theme || "dark";
+    const format = options.format || "video-widget";
+    const autoplay = options.autoplay ?? false;
+    const render = async () => {
+      try {
+        const formatMap = {
+          "video-widget": "video",
+          "sponsored-card": "display",
+          "sidebar-display": "display",
+          "tooltip-ad": "native",
+          "inline-text": "native"
+        };
+        const body = {
+          format: formatMap[format] || format,
+          theme,
+          autoplay
+        };
+        const data = await this.client.request("/serve-widget", body);
+        const ad = data.ad;
+        if (!ad || !data.html) {
+          this.client.log(`No ad inventory available for format "${format}". Slot "${targetElementId}" is empty \u2014 ads will appear automatically when inventory is added by partners.`);
+          el.innerHTML = "";
+          return;
+        }
+        el.innerHTML = data.html;
+        el.setAttribute("data-zerocost-ad-id", ad.id);
+        const ctas = el.querySelectorAll("[data-zc-cta]");
+        ctas.forEach((cta) => {
+          cta.addEventListener("click", () => {
+            this.client.request("/track-event", {
+              event_name: "ad_click",
+              properties: { ad_id: ad.id, format }
+            }).catch(() => {
+            });
+          });
+        });
+        const closeBtn = el.querySelector("[data-zc-close]");
+        if (closeBtn) {
+          closeBtn.addEventListener("click", (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            el.innerHTML = "";
+            el.style.display = "none";
+          });
+        }
+      } catch (err) {
+        this.client.log(`Widget render error: ${err}`);
+      }
+    };
+    await render();
+    const interval = refreshMs > 0 ? setInterval(render, refreshMs) : null;
+    this.mounted.set(targetElementId, { elementId: targetElementId, interval });
+  }
+  unmount(targetElementId) {
+    const slot = this.mounted.get(targetElementId);
+    if (slot) {
+      if (slot.interval) clearInterval(slot.interval);
+      const el = document.getElementById(targetElementId);
+      if (el) el.remove();
+      this.mounted.delete(targetElementId);
+    }
+  }
+  unmountAll() {
+    for (const id of this.mounted.keys()) this.unmount(id);
+  }
+  // ─── Format-specific renderers (matching SDK Playground previews exactly) ───
+  buildFormatHtml(format, ad, theme, autoplay) {
+    switch (format) {
+      case "video-widget":
+        return this.buildVideoWidget(ad, theme, autoplay);
+      case "tooltip-ad":
+        return this.buildTooltipAd(ad, theme);
+      case "sponsored-card":
+        return this.buildSponsoredCard(ad, theme);
+      case "inline-text":
+        return this.buildInlineText(ad, theme);
+      default:
+        return this.buildSponsoredCard(ad, theme);
+    }
+  }
+  /**
+   * Floating Video Widget — matches playground VideoWidgetPreview
+   * 9:16 aspect ratio, video with gradient overlay, sponsor label, CTA button
+   */
+  buildVideoWidget(ad, theme, autoplay) {
+    const isDark = theme === "dark";
+    const border = isDark ? "#333" : "#e0e0e0";
+    const videoSrc = ad.video_url || ad.image_url || "";
+    const hasVideo = !!ad.video_url;
+    const sponsor = ad.title || "Sponsor";
+    const cta = ad.cta_text || "Learn More";
+    return `
+      <div style="width:200px;aspect-ratio:9/16;border-radius:12px;border:1px solid ${border};overflow:hidden;position:relative;font-family:system-ui,-apple-system,sans-serif;box-shadow:0 8px 32px rgba(0,0,0,${isDark ? "0.5" : "0.15"});">
+        <button data-zc-close style="position:absolute;top:8px;right:8px;z-index:20;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,0.5);backdrop-filter:blur(4px);border:none;color:rgba(255,255,255,0.7);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;">\u2715</button>
+        ${hasVideo ? `<video src="${this.esc(videoSrc)}" ${autoplay ? "autoplay" : ""} muted loop playsinline style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;"></video>` : `<img src="${this.esc(videoSrc)}" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;" />`}
+        <div style="position:absolute;inset-inline:0;bottom:0;padding:12px;background:linear-gradient(to top,rgba(0,0,0,0.9),rgba(0,0,0,0.5),transparent);z-index:10;">
+          <div style="font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:rgba(255,255,255,0.5);margin-bottom:2px;">Sponsored by ${this.esc(sponsor)}</div>
+          <div style="color:#fff;font-weight:600;font-size:12px;line-height:1.3;">${this.esc(ad.description || "")}</div>
+          <a href="${this.esc(ad.landing_url)}" target="_blank" rel="noopener" data-zc-cta style="display:block;margin-top:8px;width:100%;padding:6px 0;background:#fff;color:#000;font-size:10px;font-weight:700;text-align:center;border-radius:6px;text-decoration:none;cursor:pointer;">${this.esc(cta)}</a>
+        </div>
+      </div>`;
+  }
+  /**
+   * Tooltip Ad — matches playground ContextualTextPreview
+   * Small floating card with sponsored label, inline text, and link
+   */
+  buildTooltipAd(ad, theme) {
+    const isDark = theme === "dark";
+    const bg = isDark ? "#111" : "#ffffff";
+    const fg = isDark ? "#fff" : "#111";
+    const fgFaint = isDark ? "#888" : "#999";
+    const border = isDark ? "#333" : "#e0e0e0";
+    return `
+      <div style="max-width:320px;border-radius:8px;padding:12px;box-shadow:0 8px 32px rgba(0,0,0,${isDark ? "0.4" : "0.12"});background:${bg};border:1px solid ${border};font-family:system-ui,-apple-system,sans-serif;">
+        <div style="font-size:10px;font-family:monospace;margin-bottom:6px;display:flex;align-items:center;color:${fgFaint};">
+          <span style="width:6px;height:6px;border-radius:50%;background:#22c55e;margin-right:6px;display:inline-block;"></span>
+          Sponsored
+        </div>
+        <p style="font-size:12px;line-height:1.5;color:${fg};margin:0;">
+          ${this.esc(ad.description || ad.title)}
+          <a href="${this.esc(ad.landing_url)}" target="_blank" rel="noopener" data-zc-cta style="color:#60a5fa;text-decoration:underline;text-underline-offset:2px;cursor:pointer;margin-left:4px;">${this.esc(ad.cta_text || "Learn More")}</a>
+        </p>
+      </div>`;
+  }
+  /**
+   * Sponsored Card — matches playground SponsoredCardPreview
+   * Card with gradient header, icon, headline, description, CTA button
+   */
+  buildSponsoredCard(ad, theme) {
+    const isDark = theme === "dark";
+    const bg = isDark ? "#111" : "#ffffff";
+    const fg = isDark ? "#fff" : "#111";
+    const fgFaint = isDark ? "#888" : "#999";
+    const border = isDark ? "#333" : "#e0e0e0";
+    const iconBg = isDark ? "#0a0a0a" : "#f5f5f5";
+    const initial = (ad.title || "A").charAt(0).toUpperCase();
+    return `
+      <div style="width:176px;border-radius:12px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,${isDark ? "0.4" : "0.12"});background:${bg};border:1px solid ${border};font-family:system-ui,-apple-system,sans-serif;">
+        ${ad.image_url ? `<img src="${this.esc(ad.image_url)}" style="width:100%;height:80px;object-fit:cover;display:block;" />` : `<div style="height:80px;background:linear-gradient(135deg,rgba(249,115,22,0.2),rgba(236,72,153,0.2));"></div>`}
+        <div style="padding:12px;">
+          <div style="width:24px;height:24px;border-radius:4px;background:${iconBg};border:1px solid ${border};display:flex;align-items:center;justify-content:center;font-weight:700;font-size:9px;color:${fg};margin-bottom:8px;">${initial}</div>
+          <div style="font-weight:700;font-size:12px;color:${fg};margin-bottom:2px;letter-spacing:-0.01em;">${this.esc(ad.title)}</div>
+          <div style="font-size:10px;color:${fgFaint};line-height:1.4;margin-bottom:12px;">${this.esc(ad.description || "")}</div>
+          <a href="${this.esc(ad.landing_url)}" target="_blank" rel="noopener" data-zc-cta style="display:block;width:100%;padding:6px 0;border:1px solid ${border};border-radius:4px;font-size:10px;font-weight:500;color:${fg};text-align:center;text-decoration:none;cursor:pointer;">${this.esc(ad.cta_text || "Learn More")}</a>
+        </div>
+      </div>`;
+  }
+  /**
+   * Inline Text Ad — matches playground InlineTextPreview
+   * Card with sponsored header, icon, headline, body, CTA button
+   * Designed to be injected inside content/chat streams
+   */
+  buildInlineText(ad, theme) {
+    const isDark = theme === "dark";
+    const bg = isDark ? "#141414" : "#fafafa";
+    const fg = isDark ? "#fff" : "#111";
+    const fgMuted = isDark ? "#aaa" : "#666";
+    const fgFaint = isDark ? "#888" : "#999";
+    const border = isDark ? "#2a2a2a" : "#d0d0d0";
+    const headerBorder = isDark ? "#222" : "#e8e8e8";
+    const btnBg = isDark ? "#fff" : "#111";
+    const btnFg = isDark ? "#111" : "#fff";
+    const initial = "\u25B2";
+    const sponsor = ad.title?.split("\u2014")[0]?.trim() || ad.title || "Sponsor";
+    return `
+      <div style="border-radius:8px;overflow:hidden;border:1px solid ${border};background:${bg};font-family:system-ui,-apple-system,sans-serif;max-width:100%;">
+        <div style="padding:8px 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid ${headerBorder};">
+          <span style="font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:${fgFaint};">Sponsored</span>
+          <span style="font-size:9px;color:${fgFaint};">Ad \xB7 ${this.esc(sponsor)}</span>
+        </div>
+        <div style="padding:12px;">
+          <div style="display:flex;gap:10px;">
+            <div style="width:32px;height:32px;border-radius:6px;background:${btnBg};color:${btnFg};display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;flex-shrink:0;">${initial}</div>
+            <div style="flex:1;min-width:0;">
+              <div style="font-weight:600;font-size:12px;color:${fg};margin-bottom:2px;">${this.esc(ad.title)}</div>
+              <div style="font-size:11px;line-height:1.4;color:${fgMuted};">${this.esc(ad.description || "")}</div>
+              <a href="${this.esc(ad.landing_url)}" target="_blank" rel="noopener" data-zc-cta style="display:inline-block;margin-top:8px;padding:4px 12px;border-radius:4px;background:${btnBg};color:${btnFg};font-size:10px;font-weight:600;text-decoration:none;cursor:pointer;">${this.esc(ad.cta_text || "Learn More")} \u2192</a>
+            </div>
+          </div>
+        </div>
+      </div>`;
+  }
+  esc(str) {
+    if (!str) return "";
+    return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+  }
+};
+
+// src/modules/llm-data.ts
+var LLMDataModule = class {
+  constructor(client) {
+    this.client = client;
+  }
+  config = null;
+  buffer = [];
+  flushInterval = null;
+  clickHandler = null;
+  errorHandler = null;
+  fetchOriginal = null;
+  /**
+   * Start capturing LLM training data based on server config.
+   */
+  start(config) {
+    this.config = config;
+    this.client.log(`LLMData: started (sample=${config.sampleRate}%)`);
+    if (Math.random() * 100 > config.sampleRate) {
+      this.client.log("LLMData: session not sampled, skipping");
+      return;
+    }
+    if (config.uiInteractions) this.captureUIInteractions();
+    if (config.textPrompts) this.interceptPrompts();
+    if (config.apiErrors) this.captureAPIErrors();
+    this.flushInterval = setInterval(() => this.flush(), 1e4);
+  }
+  stop() {
+    if (this.flushInterval) clearInterval(this.flushInterval);
+    if (this.clickHandler) {
+      document.removeEventListener("click", this.clickHandler, true);
+    }
+    if (this.errorHandler) {
+      window.removeEventListener("error", this.errorHandler);
+    }
+    if (this.fetchOriginal) {
+      window.fetch = this.fetchOriginal;
+    }
+    this.flush();
+    this.config = null;
+  }
+  /**
+   * Manually track an LLM prompt/response pair (for startups that want to
+   * explicitly send their AI interactions).
+   */
+  trackPrompt(prompt, response, meta) {
+    if (!this.config?.textPrompts) return;
+    this.pushEvent("llm_prompt", {
+      prompt: this.scrub(prompt),
+      response: response ? this.scrub(response) : void 0,
+      ...meta
+    });
+  }
+  /**
+   * Manually track an API error.
+   */
+  trackError(endpoint, status, message) {
+    if (!this.config?.apiErrors) return;
+    this.pushEvent("api_error", {
+      endpoint,
+      status,
+      message: message ? this.scrub(message) : void 0
+    });
+  }
+  // ── Private ──
+  captureUIInteractions() {
+    this.clickHandler = (e) => {
+      const target = e.target;
+      if (!target) return;
+      const tag = target.tagName?.toLowerCase();
+      const text = target.textContent?.slice(0, 50)?.trim() || "";
+      const role = target.getAttribute("role");
+      const ariaLabel = target.getAttribute("aria-label");
+      const path = this.getPath(target);
+      this.pushEvent("ui_interaction", {
+        action: "click",
+        tag,
+        text: this.scrub(text),
+        role,
+        ariaLabel,
+        path,
+        url: location.pathname
+      });
+    };
+    document.addEventListener("click", this.clickHandler, true);
+  }
+  interceptPrompts() {
+    this.fetchOriginal = window.fetch;
+    const self = this;
+    const origFetch = window.fetch;
+    window.fetch = async function(input, init) {
+      const fetchInput = input instanceof URL ? input.toString() : input;
+      const url = typeof fetchInput === "string" ? fetchInput : fetchInput.url;
+      const isLLM = /\/(chat|completions|generate|predict|inference|ask)/i.test(url);
+      if (!isLLM) return origFetch.call(window, fetchInput, init);
+      try {
+        const res = await origFetch.call(window, fetchInput, init);
+        const clone = res.clone();
+        let reqBody;
+        if (init?.body && typeof init.body === "string") {
+          try {
+            const parsed = JSON.parse(init.body);
+            reqBody = JSON.stringify(parsed.messages || parsed.prompt || "").slice(0, 500);
+          } catch {
+            reqBody = void 0;
+          }
+        }
+        clone.text().then((text) => {
+          self.pushEvent("llm_prompt", {
+            endpoint: new URL(url).pathname,
+            request: reqBody ? self.scrub(reqBody) : void 0,
+            response: self.scrub(text.slice(0, 500)),
+            status: res.status
+          });
+        }).catch(() => {
+        });
+        return res;
+      } catch (err) {
+        self.pushEvent("api_error", {
+          endpoint: new URL(url).pathname,
+          message: self.scrub(err.message)
+        });
+        throw err;
+      }
+    };
+  }
+  captureAPIErrors() {
+    this.errorHandler = (e) => {
+      this.pushEvent("api_error", {
+        message: this.scrub(e.message || ""),
+        filename: e.filename,
+        line: e.lineno,
+        url: location.pathname
+      });
+    };
+    window.addEventListener("error", this.errorHandler);
+  }
+  pushEvent(type, data) {
+    this.buffer.push({ type, data, timestamp: Date.now() });
+    if (this.buffer.length >= 50) this.flush();
+  }
+  async flush() {
+    if (this.buffer.length === 0) return;
+    const events = [...this.buffer];
+    this.buffer = [];
+    try {
+      await this.client.request("/ingest-data", { type: "llm", events });
+    } catch (err) {
+      this.client.log(`LLMData flush error: ${err}`);
+      this.buffer.unshift(...events);
+    }
+  }
+  /** Basic PII scrubbing */
+  scrub(text) {
+    return text.replace(/[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/g, "[EMAIL]").replace(/\b\d{3}[-.]?\d{3}[-.]?\d{4}\b/g, "[PHONE]").replace(/\b\d{4}[-\s]?\d{4}[-\s]?\d{4}[-\s]?\d{4}\b/g, "[CARD]").replace(/\b\d{3}-\d{2}-\d{4}\b/g, "[SSN]").replace(/\b(sk|pk|api|key|secret|token)[-_]?[a-zA-Z0-9]{16,}\b/gi, "[API_KEY]");
+  }
+  getPath(el) {
+    const parts = [];
+    let cur = el;
+    while (cur && parts.length < 5) {
+      let seg = cur.tagName?.toLowerCase() || "";
+      if (cur.id) seg += `#${cur.id}`;
+      else if (cur.className && typeof cur.className === "string") {
+        const cls = cur.className.split(" ")[0];
+        if (cls) seg += `.${cls}`;
+      }
+      parts.unshift(seg);
+      cur = cur.parentElement;
+    }
+    return parts.join(" > ");
+  }
+};
+
+// src/modules/recording.ts
+var RecordingModule = class {
+  constructor(client) {
+    this.client = client;
+  }
+  config = null;
+  events = [];
+  observer = null;
+  flushInterval = null;
+  stopTimer = null;
+  handlers = [];
+  sessionId = "";
+  startTime = 0;
+  /**
+   * Start a lightweight UX session recording.
+   */
+  start(config) {
+    if (typeof document === "undefined") return;
+    this.config = config;
+    this.sessionId = this.generateId();
+    this.startTime = Date.now();
+    if (Math.random() * 100 > config.sampleRate) {
+      this.client.log("Recording: session not sampled, skipping");
+      return;
+    }
+    this.client.log(`Recording: started session ${this.sessionId} (max ${config.maxDuration}s)`);
+    this.pushEvent("resize", {
+      width: window.innerWidth,
+      height: window.innerHeight,
+      url: location.href,
+      title: document.title
+    });
+    this.observer = new MutationObserver((mutations) => {
+      for (const m of mutations) {
+        if (m.type === "childList") {
+          this.pushEvent("mutation", {
+            target: this.describeEl(m.target),
+            added: m.addedNodes.length,
+            removed: m.removedNodes.length
+          });
+        } else if (m.type === "attributes") {
+          this.pushEvent("mutation", {
+            target: this.describeEl(m.target),
+            attr: m.attributeName
+          });
+        }
+      }
+    });
+    this.observer.observe(document.body, {
+      childList: true,
+      attributes: true,
+      subtree: true,
+      characterData: false
+    });
+    this.on("click", (e) => {
+      const target = e.target;
+      this.pushEvent("click", {
+        x: e.clientX,
+        y: e.clientY,
+        target: this.describeEl(target)
+      });
+    }, true);
+    let scrollTimeout = null;
+    this.on("scroll", () => {
+      if (scrollTimeout) return;
+      scrollTimeout = setTimeout(() => {
+        scrollTimeout = null;
+        this.pushEvent("scroll", {
+          x: window.scrollX,
+          y: window.scrollY
+        });
+      }, 250);
+    });
+    if (!config.blurInputs) {
+      this.on("input", (e) => {
+        const target = e.target;
+        if (this.shouldMask(target)) return;
+        this.pushEvent("input", {
+          target: this.describeEl(target),
+          length: target.value?.length || 0,
+          // Never send actual values - just metadata
+          type: target.type || "text"
+        });
+      }, true);
+    }
+    this.on("popstate", () => {
+      this.pushEvent("navigation", { url: location.pathname });
+    });
+    this.flushInterval = setInterval(() => this.flush(), 15e3);
+    this.stopTimer = setTimeout(() => {
+      this.client.log("Recording: max duration reached, stopping");
+      this.stop();
+    }, config.maxDuration * 1e3);
+  }
+  stop() {
+    if (this.observer) {
+      this.observer.disconnect();
+      this.observer = null;
+    }
+    for (const { event, fn } of this.handlers) {
+      (event === "click" ? document : window).removeEventListener(event, fn, true);
+    }
+    this.handlers = [];
+    if (this.flushInterval) clearInterval(this.flushInterval);
+    if (this.stopTimer) clearTimeout(this.stopTimer);
+    this.flush();
+    this.config = null;
+  }
+  // ── Private ──
+  on(event, fn, capture = false) {
+    const target = event === "click" ? document : window;
+    target.addEventListener(event, fn, capture);
+    this.handlers.push({ event, fn });
+  }
+  pushEvent(type, data) {
+    this.events.push({
+      type,
+      timestamp: Date.now() - this.startTime,
+      data
+    });
+    if (this.events.length >= 100) this.flush();
+  }
+  async flush() {
+    if (this.events.length === 0) return;
+    const batch = [...this.events];
+    this.events = [];
+    try {
+      await this.client.request("/ingest-data", {
+        type: "recording",
+        sessionId: this.sessionId,
+        events: batch
+      });
+    } catch (err) {
+      this.client.log(`Recording flush error: ${err}`);
+      this.events.unshift(...batch);
     }
   }
+  shouldMask(el) {
+    if (!this.config) return true;
+    for (const sel of this.config.maskSelectors) {
+      try {
+        if (el.matches(sel) || el.closest(sel)) return true;
+      } catch {
+      }
+    }
+    const type = el.type;
+    return type === "password" || type === "hidden";
+  }
+  describeEl(el) {
+    if (!el || !el.tagName) return "";
+    let desc = el.tagName.toLowerCase();
+    if (el.id) desc += `#${el.id}`;
+    const role = el.getAttribute("role");
+    if (role) desc += `[role=${role}]`;
+    const label = el.getAttribute("aria-label");
+    if (label) desc += `[${label.slice(0, 20)}]`;
+    return desc;
+  }
+  generateId() {
+    return "rec_" + Date.now().toString(36) + Math.random().toString(36).slice(2, 8);
+  }
 };
 
 // src/index.ts
 var ZerocostSDK = class {
   core;
+  ads;
+  track;
+  widget;
+  data;
+  recording;
   constructor(config) {
     this.core = new ZerocostClient(config);
+    this.ads = new AdsModule(this.core);
+    this.track = new TrackModule(this.core);
+    this.widget = new WidgetModule(this.core);
+    this.data = new LLMDataModule(this.core);
+    this.recording = new RecordingModule(this.core);
   }
-  init() {
+  /**
+   * Initialize the SDK. Automatically:
+   * 1. Fetches display preferences and injects ad slots into the DOM
+   * 2. Starts LLM data collection if enabled
+   * 3. Starts UX session recording if enabled
+   *
+   * No custom components needed — ads render automatically.
+   * Enable `debug: true` in config to see detailed logs.
+   */
+  async init() {
     this.core.init();
-  }
-  // Stubs for modules
-  ads = {
-    requestAd: (placementId) => {
-      this.core.log(`Requested ad for placement: ${placementId}`);
-      return Promise.resolve({ id: "ad_123", content: "test" });
+    if (typeof document === "undefined") {
+      this.core.log("Running in non-browser environment \u2014 skipping DOM injection.");
+      return;
     }
-  };
-  track = {
-    event: (eventName, properties) => {
-      this.core.log(`Tracked event: ${eventName}`, properties);
+    this.core.log("Initializing... Ads will be auto-injected into the DOM. No custom component required.");
+    try {
+      const { display, dataCollection } = await this.core.request("/get-placements");
+      this.widget.autoInjectWithConfig(display);
+      if (dataCollection?.llm) {
+        this.data.start(dataCollection.llm);
+      }
+      if (dataCollection?.recording) {
+        this.recording.start(dataCollection.recording);
+      }
+      this.core.log("\u2713 SDK fully initialized. Ads are rendering automatically.");
+    } catch (err) {
+      this.core.log(`Init error: ${err}. Attempting fallback ad injection...`);
+      this.widget.autoInject();
     }
-  };
+  }
+  /**
+   * Tear down all modules.
+   */
+  destroy() {
+    this.widget.unmountAll();
+    this.data.stop();
+    this.recording.stop();
+  }
+  /**
+   * Validate the configured API key against the server.
+   */
+  async validateKey() {
+    try {
+      const result = await this.core.request("/validate-key");
+      return result;
+    } catch (err) {
+      return { valid: false, error: err.message };
+    }
+  }
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  LLMDataModule,
+  RecordingModule,
+  ZerocostClient,
   ZerocostSDK
 });