@zerocost/sdk 0.12.0 → 0.14.0

package/dist/index.js

@@ -1274,6 +1274,608 @@ var RecordingModule = class {
   }
 };
 
+// src/core/consent-ui.ts
+var STYLE_ID = "zerocost-consent-styles";
+function injectStyles(theme) {
+  if (document.getElementById(STYLE_ID)) return;
+  const darkVars = `
+    --zc-bg: #111111;
+    --zc-surface: #1a1a1a;
+    --zc-border: #2a2a2a;
+    --zc-text: #ffffff;
+    --zc-text-secondary: #999999;
+    --zc-accent: #ffffff;
+    --zc-accent-bg: #ffffff;
+    --zc-accent-fg: #000000;
+    --zc-toggle-off-bg: #333333;
+    --zc-toggle-on-bg: #00e599;
+    --zc-toggle-knob: #ffffff;
+    --zc-backdrop: rgba(0,0,0,0.65);
+    --zc-link: #888888;
+    --zc-link-hover: #cccccc;
+  `;
+  const lightVars = `
+    --zc-bg: #ffffff;
+    --zc-surface: #f5f5f5;
+    --zc-border: #e0e0e0;
+    --zc-text: #111111;
+    --zc-text-secondary: #666666;
+    --zc-accent: #111111;
+    --zc-accent-bg: #111111;
+    --zc-accent-fg: #ffffff;
+    --zc-toggle-off-bg: #cccccc;
+    --zc-toggle-on-bg: #00c77d;
+    --zc-toggle-knob: #ffffff;
+    --zc-backdrop: rgba(0,0,0,0.45);
+    --zc-link: #666666;
+    --zc-link-hover: #111111;
+  `;
+  let themeRule;
+  if (theme === "dark") {
+    themeRule = `.zc-consent-root { ${darkVars} }`;
+  } else if (theme === "light") {
+    themeRule = `.zc-consent-root { ${lightVars} }`;
+  } else {
+    themeRule = `
+      .zc-consent-root { ${lightVars} }
+      @media (prefers-color-scheme: dark) {
+        .zc-consent-root { ${darkVars} }
+      }
+    `;
+  }
+  const css = `
+    @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
+    ${themeRule}
+
+    .zc-consent-root * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+      font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, sans-serif;
+    }
+
+    .zc-consent-backdrop {
+      position: fixed;
+      inset: 0;
+      z-index: 999999;
+      background: var(--zc-backdrop);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      animation: zc-fade-in 200ms ease;
+    }
+
+    @keyframes zc-fade-in {
+      from { opacity: 0; }
+      to { opacity: 1; }
+    }
+
+    @keyframes zc-slide-up {
+      from { transform: translateY(100%); }
+      to { transform: translateY(0); }
+    }
+
+    .zc-consent-card {
+      background: var(--zc-bg);
+      border: 1px solid var(--zc-border);
+      border-radius: 16px;
+      width: 100%;
+      max-width: 440px;
+      max-height: 90vh;
+      overflow-y: auto;
+      padding: 24px 20px 20px;
+      animation: zc-fade-in 200ms ease;
+    }
+
+    /* Mobile: bottom-sheet style */
+    @media (max-width: 640px) {
+      .zc-consent-backdrop {
+        align-items: flex-end;
+      }
+      .zc-consent-card {
+        border-radius: 20px 20px 0 0;
+        max-width: 100%;
+        animation: zc-slide-up 200ms ease;
+      }
+    }
+
+    /* Scrollbar */
+    .zc-consent-card::-webkit-scrollbar { width: 4px; }
+    .zc-consent-card::-webkit-scrollbar-thumb { background: var(--zc-border); border-radius: 4px; }
+
+    .zc-consent-header {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-bottom: 4px;
+    }
+
+    .zc-consent-logo {
+      width: 28px;
+      height: 28px;
+      border-radius: 6px;
+      background: var(--zc-accent-bg);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+
+    .zc-consent-logo svg {
+      width: 16px;
+      height: 16px;
+    }
+
+    .zc-consent-title {
+      font-size: 16px;
+      font-weight: 700;
+      color: var(--zc-text);
+      letter-spacing: -0.02em;
+    }
+
+    .zc-consent-subtitle {
+      font-size: 13px;
+      color: var(--zc-text-secondary);
+      line-height: 1.5;
+      margin-bottom: 16px;
+    }
+
+    .zc-consent-toggles {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      margin-bottom: 16px;
+    }
+
+    .zc-consent-toggle-card {
+      background: var(--zc-surface);
+      border: 1px solid var(--zc-border);
+      border-radius: 12px;
+      padding: 12px 14px;
+    }
+
+    .zc-consent-toggle-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 6px;
+    }
+
+    .zc-consent-toggle-label {
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--zc-text);
+    }
+
+    .zc-consent-toggle-desc {
+      font-size: 12px;
+      color: var(--zc-text-secondary);
+      line-height: 1.5;
+      margin-bottom: 4px;
+    }
+
+    .zc-consent-learn-more {
+      font-size: 11px;
+      color: var(--zc-link);
+      text-decoration: none;
+      cursor: pointer;
+      transition: color 150ms;
+    }
+
+    .zc-consent-learn-more:hover {
+      color: var(--zc-link-hover);
+    }
+
+    /* Toggle switch */
+    .zc-toggle {
+      position: relative;
+      width: 40px;
+      height: 22px;
+      flex-shrink: 0;
+      cursor: pointer;
+    }
+
+    .zc-toggle input {
+      opacity: 0;
+      width: 0;
+      height: 0;
+      position: absolute;
+    }
+
+    .zc-toggle-track {
+      position: absolute;
+      inset: 0;
+      background: var(--zc-toggle-off-bg);
+      border-radius: 11px;
+      transition: background 200ms ease;
+    }
+
+    .zc-toggle input:checked + .zc-toggle-track {
+      background: var(--zc-toggle-on-bg);
+    }
+
+    .zc-toggle-knob {
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      width: 18px;
+      height: 18px;
+      background: var(--zc-toggle-knob);
+      border-radius: 50%;
+      transition: transform 200ms ease;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+    }
+
+    .zc-toggle input:checked ~ .zc-toggle-knob {
+      transform: translateX(18px);
+    }
+
+    /* Footer */
+    .zc-consent-footer {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4px 12px;
+      justify-content: center;
+      margin-bottom: 14px;
+    }
+
+    .zc-consent-footer a {
+      font-size: 11px;
+      color: var(--zc-link);
+      text-decoration: none;
+      transition: color 150ms;
+    }
+
+    .zc-consent-footer a:hover {
+      color: var(--zc-link-hover);
+    }
+
+    .zc-consent-footer-sep {
+      font-size: 11px;
+      color: var(--zc-link);
+      opacity: 0.5;
+    }
+
+    /* Confirm button */
+    .zc-consent-confirm {
+      display: block;
+      width: 100%;
+      padding: 12px;
+      font-size: 14px;
+      font-weight: 600;
+      border: none;
+      border-radius: 10px;
+      cursor: pointer;
+      background: var(--zc-accent-bg);
+      color: var(--zc-accent-fg);
+      letter-spacing: -0.01em;
+      transition: opacity 150ms;
+    }
+
+    .zc-consent-confirm:hover {
+      opacity: 0.88;
+    }
+
+    .zc-consent-confirm:active {
+      opacity: 0.75;
+    }
+  `;
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = css;
+  document.head.appendChild(style);
+}
+function createToggle(id, checked) {
+  const label = document.createElement("label");
+  label.className = "zc-toggle";
+  const input = document.createElement("input");
+  input.type = "checkbox";
+  input.checked = checked;
+  input.id = id;
+  const track = document.createElement("span");
+  track.className = "zc-toggle-track";
+  const knob = document.createElement("span");
+  knob.className = "zc-toggle-knob";
+  label.appendChild(input);
+  label.appendChild(track);
+  label.appendChild(knob);
+  return label;
+}
+function createToggleCard(toggleId, title, description, learnMoreUrl, defaultOn) {
+  const card = document.createElement("div");
+  card.className = "zc-consent-toggle-card";
+  const row = document.createElement("div");
+  row.className = "zc-consent-toggle-row";
+  const labelSpan = document.createElement("span");
+  labelSpan.className = "zc-consent-toggle-label";
+  labelSpan.textContent = title;
+  const toggle = createToggle(toggleId, defaultOn);
+  row.appendChild(labelSpan);
+  row.appendChild(toggle);
+  card.appendChild(row);
+  const desc = document.createElement("div");
+  desc.className = "zc-consent-toggle-desc";
+  desc.textContent = description;
+  card.appendChild(desc);
+  const link = document.createElement("a");
+  link.className = "zc-consent-learn-more";
+  link.href = learnMoreUrl;
+  link.target = "_blank";
+  link.rel = "noopener noreferrer";
+  link.textContent = "Learn more \u2197";
+  card.appendChild(link);
+  return card;
+}
+function showConsentUI(options) {
+  return new Promise((resolve) => {
+    const { appName, theme, privacyPolicyUrl } = options;
+    const defaults = options.defaults ?? { ads: true, usageData: false, aiInteractions: false };
+    injectStyles(theme);
+    const root = document.createElement("div");
+    root.className = "zc-consent-root";
+    const backdrop = document.createElement("div");
+    backdrop.className = "zc-consent-backdrop";
+    const blockEscape = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    };
+    document.addEventListener("keydown", blockEscape, true);
+    const card = document.createElement("div");
+    card.className = "zc-consent-card";
+    const header = document.createElement("div");
+    header.className = "zc-consent-header";
+    const logo = document.createElement("div");
+    logo.className = "zc-consent-logo";
+    logo.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="color:var(--zc-accent-fg)"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>`;
+    const title = document.createElement("div");
+    title.className = "zc-consent-title";
+    title.textContent = `${appName || "This app"} uses Zerocost`;
+    header.appendChild(logo);
+    header.appendChild(title);
+    card.appendChild(header);
+    const subtitle = document.createElement("div");
+    subtitle.className = "zc-consent-subtitle";
+    subtitle.textContent = "Manage your preferences below. You can update these anytime.";
+    card.appendChild(subtitle);
+    const toggles = document.createElement("div");
+    toggles.className = "zc-consent-toggles";
+    const baseUrl = typeof window !== "undefined" ? window.location.origin : "";
+    toggles.appendChild(createToggleCard(
+      "zc-toggle-ads",
+      "Ads",
+      "Contextual, non-intrusive ads. No cookies or browsing history used.",
+      `${baseUrl}/consent/ads`,
+      defaults.ads
+    ));
+    toggles.appendChild(createToggleCard(
+      "zc-toggle-usage",
+      "Usage data",
+      "Anonymized usage patterns. No personal information is shared.",
+      `${baseUrl}/consent/usage-data`,
+      defaults.usageData
+    ));
+    toggles.appendChild(createToggleCard(
+      "zc-toggle-ai",
+      "AI interactions",
+      "Anonymized conversation data used for AI research.",
+      `${baseUrl}/consent/ai-interactions`,
+      defaults.aiInteractions
+    ));
+    card.appendChild(toggles);
+    const footer = document.createElement("div");
+    footer.className = "zc-consent-footer";
+    const ppLink = document.createElement("a");
+    ppLink.href = privacyPolicyUrl || `${baseUrl}/privacy`;
+    ppLink.target = "_blank";
+    ppLink.rel = "noopener noreferrer";
+    ppLink.textContent = "Privacy Policy";
+    footer.appendChild(ppLink);
+    const sep1 = document.createElement("span");
+    sep1.className = "zc-consent-footer-sep";
+    sep1.textContent = "\xB7";
+    footer.appendChild(sep1);
+    const termsLink = document.createElement("a");
+    termsLink.href = `${baseUrl}/terms`;
+    termsLink.target = "_blank";
+    termsLink.rel = "noopener noreferrer";
+    termsLink.textContent = "Terms";
+    footer.appendChild(termsLink);
+    const sep2 = document.createElement("span");
+    sep2.className = "zc-consent-footer-sep";
+    sep2.textContent = "\xB7";
+    footer.appendChild(sep2);
+    const dnsLink = document.createElement("a");
+    dnsLink.href = `${baseUrl}/do-not-sell`;
+    dnsLink.target = "_blank";
+    dnsLink.rel = "noopener noreferrer";
+    dnsLink.textContent = "Do Not Sell My Data";
+    footer.appendChild(dnsLink);
+    card.appendChild(footer);
+    const confirmBtn = document.createElement("button");
+    confirmBtn.className = "zc-consent-confirm";
+    confirmBtn.textContent = "Confirm";
+    confirmBtn.addEventListener("click", () => {
+      const ads = document.getElementById("zc-toggle-ads")?.checked ?? defaults.ads;
+      const usageData = document.getElementById("zc-toggle-usage")?.checked ?? defaults.usageData;
+      const aiInteractions = document.getElementById("zc-toggle-ai")?.checked ?? defaults.aiInteractions;
+      document.removeEventListener("keydown", blockEscape, true);
+      root.remove();
+      resolve({ ads, usageData, aiInteractions });
+    });
+    card.appendChild(confirmBtn);
+    backdrop.appendChild(card);
+    root.appendChild(backdrop);
+    document.body.appendChild(root);
+  });
+}
+function removeConsentUI() {
+  document.querySelector(".zc-consent-root")?.remove();
+}
+
+// src/core/consent.ts
+var CONSENT_VERSION = "1.1";
+var CONSENT_STORAGE_PREFIX = "zerocost-consent:";
+var TWELVE_MONTHS_MS = 365 * 24 * 60 * 60 * 1e3;
+var ConsentManager = class {
+  record = null;
+  needsReset = false;
+  client;
+  consentConfig;
+  appName;
+  theme;
+  constructor(client, opts) {
+    this.client = client;
+    this.consentConfig = opts.consent ?? {};
+    this.appName = opts.appName ?? "";
+    this.theme = opts.theme ?? "dark";
+    this.hydrateFromStorage();
+  }
+  // ── Public API (per spec §6.3) ───────────────────────────────────
+  /** Returns the current consent record, or null if none exists. */
+  get() {
+    return this.record;
+  }
+  /** Programmatically open the consent popup (e.g. from app settings). */
+  async open() {
+    removeConsentUI();
+    await this.promptAndWait();
+  }
+  /** Clear consent — prompt will re-fire on next init(). */
+  reset() {
+    this.record = null;
+    this.needsReset = true;
+    this.clearStorage();
+    this.client.log("Consent reset. Prompt will re-fire on next init().");
+  }
+  /** Restore a previously saved record (skip re-prompting if valid). */
+  restore(record) {
+    if (this.isValid(record)) {
+      this.record = record;
+      this.writeStorage(record);
+      this.client.log("Consent restored from saved record.");
+    } else {
+      this.client.log("Restored record invalid (version/expiry). Will re-prompt.");
+    }
+  }
+  /** Check whether a specific feature is consented. */
+  has(feature) {
+    if (!this.record) return false;
+    return !!this.record[feature];
+  }
+  // ── Internal (used by ZerocostSDK.init) ──────────────────────────
+  /** Should the consent prompt be shown? */
+  shouldPrompt() {
+    if (this.needsReset) return true;
+    if (!this.record) return true;
+    if (!this.isValid(this.record)) return true;
+    return false;
+  }
+  /** Show the consent popup, wait for confirmation, store record. */
+  async promptAndWait() {
+    this.needsReset = false;
+    const result = await showConsentUI({
+      appName: this.appName,
+      theme: this.theme,
+      privacyPolicyUrl: this.consentConfig.privacyPolicyUrl,
+      defaults: this.record ? { ads: this.record.ads, usageData: this.record.usageData, aiInteractions: this.record.aiInteractions } : void 0
+    });
+    const userId = this.getOrCreateUserId();
+    const record = {
+      userId,
+      appId: this.client.getConfig().appId,
+      ads: result.ads,
+      usageData: result.usageData,
+      aiInteractions: result.aiInteractions,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+      version: CONSENT_VERSION,
+      method: "confirmed",
+      ipRegion: "OTHER"
+      // server can enrich via IP
+    };
+    this.record = record;
+    this.writeStorage(record);
+    if (this.consentConfig.onConsentChange) {
+      try {
+        this.consentConfig.onConsentChange(record);
+      } catch (err) {
+        this.client.log(`onConsentChange callback error: ${err}`);
+      }
+    }
+    this.submitToServer(record);
+    this.client.log("Consent confirmed.", record);
+  }
+  // ── Helpers ──────────────────────────────────────────────────────
+  isValid(record) {
+    if (record.version !== CONSENT_VERSION) return false;
+    const age = Date.now() - new Date(record.timestamp).getTime();
+    if (age > TWELVE_MONTHS_MS) return false;
+    return true;
+  }
+  storageKey() {
+    return `${CONSENT_STORAGE_PREFIX}${this.client.getConfig().appId}`;
+  }
+  hydrateFromStorage() {
+    if (typeof window === "undefined") return;
+    try {
+      const raw = localStorage.getItem(this.storageKey());
+      if (!raw) return;
+      const parsed = JSON.parse(raw);
+      if (this.isValid(parsed)) {
+        this.record = parsed;
+      }
+    } catch {
+    }
+  }
+  writeStorage(record) {
+    if (typeof window === "undefined") return;
+    try {
+      localStorage.setItem(this.storageKey(), JSON.stringify(record));
+    } catch {
+      this.client.log("Failed to write consent to localStorage.");
+    }
+  }
+  clearStorage() {
+    if (typeof window === "undefined") return;
+    try {
+      localStorage.removeItem(this.storageKey());
+    } catch {
+    }
+  }
+  getOrCreateUserId() {
+    const key = "zerocost-user-id";
+    if (typeof window === "undefined") return this.generateUUID();
+    let id = localStorage.getItem(key);
+    if (!id) {
+      id = this.generateUUID();
+      try {
+        localStorage.setItem(key, id);
+      } catch {
+      }
+    }
+    return id;
+  }
+  generateUUID() {
+    if (typeof crypto !== "undefined" && crypto.randomUUID) {
+      return crypto.randomUUID();
+    }
+    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+      const r = Math.random() * 16 | 0;
+      const v = c === "x" ? r : r & 3 | 8;
+      return v.toString(16);
+    });
+  }
+  async submitToServer(record) {
+    try {
+      await this.client.request("/consent/submit", record);
+      this.client.log("Consent record submitted to server.");
+    } catch (err) {
+      this.client.log(`Failed to submit consent to server: ${err}`);
+    }
+  }
+};
+
 // src/index.ts
 var CONFIG_CACHE_PREFIX = "zerocost-sdk-config:";
 var CONFIG_SYNC_DEBOUNCE_MS = 750;
@@ -1285,6 +1887,7 @@ var ZerocostSDK = class {
   widget;
   data;
   recording;
+  consent;
   lastConfigHash = "";
   lastDataCollectionHash = "";
   configSyncInFlight = null;
@@ -1297,6 +1900,11 @@ var ZerocostSDK = class {
     this.widget = new WidgetModule(this.core);
     this.data = new LLMDataModule(this.core);
     this.recording = new RecordingModule(this.core);
+    this.consent = new ConsentManager(this.core, {
+      appName: config.appName,
+      theme: config.theme,
+      consent: config.consent
+    });
   }
   async init() {
     this.core.init();
@@ -1308,6 +1916,14 @@ var ZerocostSDK = class {
       this.core.log("Running inside an iframe. Ads render if permissions allow.");
     }
     this.core.log("Initializing Zerocost SDK.");
+    if (this.consent.shouldPrompt()) {
+      this.core.log("Consent required \u2014 showing prompt.");
+      await this.consent.promptAndWait();
+    }
+    if (!this.consent.has("ads")) {
+      this.core.log("Ads consent not granted \u2014 skipping ad injection.");
+      return;
+    }
     const cachedConfig = this.readCachedConfig();
     if (cachedConfig) {
       this.lastConfigHash = this.configToHash(cachedConfig);
@@ -1376,10 +1992,10 @@ var ZerocostSDK = class {
     if (nextHash === this.lastDataCollectionHash) return;
     this.data.stop();
     this.recording.stop();
-    if (dataCollection?.llm) {
+    if (dataCollection?.llm && this.consent.has("usageData")) {
       this.data.start(dataCollection.llm);
     }
-    if (dataCollection?.recording) {
+    if (dataCollection?.recording && this.consent.has("aiInteractions")) {
       this.recording.start(dataCollection.recording);
     }
     this.lastDataCollectionHash = nextHash;
@@ -1494,6 +2110,7 @@ var ZerocostSDK = class {
   }
 };
 export {
+  ConsentManager,
   LLMDataModule,
   RecordingModule,
   ZerocostClient,

package/dist/types/index.d.ts

@@ -1,9 +1,28 @@
+export interface ZerocostConsentRecord {
+    userId: string;
+    appId: string;
+    ads: boolean;
+    usageData: boolean;
+    aiInteractions: boolean;
+    timestamp: string;
+    version: string;
+    method: 'confirmed';
+    ipRegion: string;
+}
+export interface ConsentConfig {
+    privacyPolicyUrl?: string;
+    onConsentChange?: (preferences: ZerocostConsentRecord) => void;
+}
+export type ConsentFeature = 'ads' | 'usageData' | 'aiInteractions';
 export interface ZerocostConfig {
     appId: string;
     apiKey: string;
+    appName?: string;
+    theme?: 'light' | 'dark' | 'auto';
     environment?: 'production' | 'development';
     debug?: boolean;
     baseUrl?: string;
+    consent?: ConsentConfig;
 }
 export interface UserConsent {
     analytics: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zerocost/sdk",
-  "version": "0.12.0",
+  "version": "0.14.0",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",