@zerocost/sdk 0.18.0 → 0.19.0

package/dist/core/consent.js

@@ -0,0 +1,222 @@
+import { showConsentUI, removeConsentUI, injectStyles } from './consent-ui';
+const CONSENT_VERSION = '1.1';
+const CONSENT_STORAGE_PREFIX = 'zerocost-consent:';
+const TWELVE_MONTHS_MS = 365 * 24 * 60 * 60 * 1000;
+export class ConsentManager {
+    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';
+        // Try to hydrate from localStorage on construction
+        this.hydrateFromStorage();
+        if (this.consentConfig.showSettingsButton) {
+            injectStyles(this.theme);
+            this.injectSettingsButton();
+        }
+    }
+    // ── 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 }
+                : undefined,
+        });
+        const userId = this.getOrCreateUserId();
+        const record = {
+            userId,
+            appId: this.client.getConfig().appId,
+            ads: result.ads,
+            usageData: result.usageData,
+            aiInteractions: result.aiInteractions,
+            timestamp: new Date().toISOString(),
+            version: CONSENT_VERSION,
+            method: 'confirmed',
+            ipRegion: 'OTHER', // server can enrich via IP
+        };
+        this.record = record;
+        this.writeStorage(record);
+        // If settings button is enabled, ensure it's shown/updated
+        if (this.consentConfig.showSettingsButton) {
+            this.injectSettingsButton();
+        }
+        // Notify developer callback
+        if (this.consentConfig.onConsentChange) {
+            try {
+                this.consentConfig.onConsentChange(record);
+            }
+            catch (err) {
+                this.client.log(`onConsentChange callback error: ${err}`);
+            }
+        }
+        // POST to Zerocost server (fire-and-forget)
+        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 {
+            // corrupt — ignore
+        }
+    }
+    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 {
+            // ignore
+        }
+    }
+    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 { /* ignore */ }
+        }
+        return id;
+    }
+    generateUUID() {
+        if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+            return crypto.randomUUID();
+        }
+        // Fallback
+        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+            const r = (Math.random() * 16) | 0;
+            const v = c === 'x' ? r : (r & 0x3) | 0x8;
+            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}`);
+        }
+    }
+    injectSettingsButton() {
+        if (typeof document === 'undefined')
+            return;
+        const mount = () => {
+            if (!document.body)
+                return;
+            const existing = document.getElementById('zerocost-privacy-settings-btn');
+            if (existing)
+                return;
+            const btn = document.createElement('button');
+            btn.id = 'zerocost-privacy-settings-btn';
+            btn.setAttribute('aria-label', 'Privacy Settings');
+            btn.title = 'Privacy Settings';
+            const pos = this.consentConfig.buttonPosition || 'bottom-left';
+            btn.className = `zc-settings-btn zc-settings-${pos}`;
+            btn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>`;
+            btn.addEventListener('click', () => this.open());
+            document.body.appendChild(btn);
+        };
+        if (document.body) {
+            mount();
+        }
+        else {
+            window.addEventListener('DOMContentLoaded', mount);
+        }
+    }
+    removeSettingsButton() {
+        document.getElementById('zerocost-privacy-settings-btn')?.remove();
+    }
+}

package/dist/core/constants.js

@@ -0,0 +1,6 @@
+export const ZEROCOST_DOMAINS = {
+    MAIN: 'https://zerocost.lovable.app',
+    //APP: 'https://app.zerocost.com',
+    //DOCS: 'https://docs.zerocost.com',
+};
+export const ZEROCOST_BASE_URL = ZEROCOST_DOMAINS.MAIN;

package/dist/core/widget-render.js

@@ -0,0 +1,155 @@
+export const SDK_WIDGET_REFRESH_MS = 20_000;
+const CLOSE_ICON_SVG = `
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:100%;height:100%;">
+    <line x1="18" y1="6" x2="6" y2="18"></line>
+    <line x1="6" y1="6" x2="18" y2="18"></line>
+  </svg>
+`;
+function escapeHtml(value) {
+    return value
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+function resolveTheme(theme) {
+    if (theme === 'light' || theme === 'dark') {
+        return theme;
+    }
+    if (typeof window !== 'undefined' && window.matchMedia) {
+        return window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
+    }
+    return 'dark';
+}
+function getPalette(theme) {
+    const mode = resolveTheme(theme);
+    if (mode === 'light') {
+        return {
+            bg: '#ffffff',
+            surface: '#f8f8f8',
+            surfaceStrong: '#efefef',
+            border: '#dddddd',
+            text: '#111111',
+            textMuted: '#666666',
+            textFaint: '#8a8a8a',
+            accentBg: '#111111',
+            accentText: '#ffffff',
+            badgeBg: '#f1f1f1',
+        };
+    }
+    return {
+        bg: '#0a0a0a',
+        surface: '#111111',
+        surfaceStrong: '#181818',
+        border: '#2b2b2b',
+        text: '#ffffff',
+        textMuted: '#a3a3a3',
+        textFaint: '#737373',
+        accentBg: '#ffffff',
+        accentText: '#111111',
+        badgeBg: '#171717',
+    };
+}
+function normalizeFormat(format) {
+    if (format === 'floating-video')
+        return 'video-widget';
+    if (format === 'sidebar-display')
+        return 'sponsored-card';
+    return format;
+}
+function renderVideoWidget(ad, theme) {
+    const palette = getPalette(theme);
+    const media = ad.video_url
+        ? `<video src="${escapeHtml(ad.video_url)}" autoplay muted loop playsinline preload="auto" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;"></video>`
+        : ad.image_url
+            ? `<img src="${escapeHtml(ad.image_url)}" alt="${escapeHtml(ad.title)}" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;" />`
+            : `<div style="position:absolute;inset:0;background:linear-gradient(135deg,#1f2937 0%,#111827 40%,#030712 100%);"></div>`;
+    return `
+    <div style="position:relative;width:200px;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:${palette.bg};border:1px solid rgba(255,255,255,0.12);box-shadow:0 20px 60px rgba(0,0,0,0.45);font-family:Space Grotesk,system-ui,sans-serif;">
+      ${media}
+      <div style="position:absolute;top:10px;right:10px;display:flex;gap:8px;z-index:3;">
+        <button type="button" data-zc-close style="width:24px;height:24px;padding:5px;border:none;border-radius:999px;background:rgba(0,0,0,0.52);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;">${CLOSE_ICON_SVG}</button>
+      </div>
+      <div style="position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.04) 0%,rgba(0,0,0,0.12) 35%,rgba(0,0,0,0.85) 100%);"></div>
+      <div style="position:absolute;left:0;right:0;bottom:0;padding:14px;z-index:2;">
+        <div style="display:inline-flex;align-items:center;padding:4px 7px;border-radius:999px;background:rgba(17,17,17,0.72);border:1px solid rgba(255,255,255,0.08);color:#d4d4d4;font-size:9px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;">Sponsored</div>
+        <div style="margin-top:10px;color:#fff;font-size:14px;font-weight:700;line-height:1.2;">${escapeHtml(ad.title)}</div>
+        ${ad.description ? `<div style="margin-top:6px;color:rgba(255,255,255,0.78);font-size:11px;line-height:1.35;">${escapeHtml(ad.description)}</div>` : ''}
+        <a href="${escapeHtml(ad.landing_url)}" target="_blank" rel="noreferrer noopener" data-zc-cta style="margin-top:12px;display:block;width:100%;padding:9px 10px;border-radius:10px;background:#ffffff;color:#111111;text-align:center;text-decoration:none;font-size:11px;font-weight:700;">${escapeHtml(ad.cta_text || 'Learn More')}</a>
+      </div>
+    </div>
+  `;
+}
+function renderTooltipWidget(ad, theme) {
+    const palette = getPalette(theme);
+    return `
+    <div style="width:320px;max-width:100%;padding:14px 15px;border-radius:14px;background:${palette.surface};border:1px solid ${palette.border};box-shadow:0 18px 48px rgba(0,0,0,0.28);font-family:Space Grotesk,system-ui,sans-serif;">
+      <div style="display:flex;align-items:center;justify-content:space-between;gap:12px;">
+        <div style="display:inline-flex;align-items:center;gap:6px;color:${palette.textFaint};font-size:10px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;">
+          <span style="width:6px;height:6px;border-radius:999px;background:${palette.text};display:inline-block;"></span>
+          Sponsored
+        </div>
+        <button type="button" data-zc-close style="background:none;border:none;color:${palette.textFaint};width:16px;height:16px;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;">${CLOSE_ICON_SVG}</button>
+      </div>
+      <div style="margin-top:10px;color:${palette.text};font-size:13px;line-height:1.55;">
+        ${escapeHtml(ad.description || ad.title)} <a href="${escapeHtml(ad.landing_url)}" target="_blank" rel="noreferrer noopener" data-zc-cta style="color:${palette.text};font-weight:700;text-decoration:underline;text-underline-offset:2px;">${escapeHtml(ad.cta_text || 'Learn More')}</a>
+      </div>
+    </div>
+  `;
+}
+function renderSponsoredCard(ad, theme) {
+    const palette = getPalette(theme);
+    const media = ad.image_url
+        ? `<img src="${escapeHtml(ad.image_url)}" alt="${escapeHtml(ad.title)}" style="display:block;width:100%;height:92px;object-fit:cover;" />`
+        : `<div style="width:100%;height:92px;background:linear-gradient(135deg,#1f2937 0%,#111827 40%,#030712 100%);"></div>`;
+    return `
+    <div style="width:176px;border-radius:16px;overflow:hidden;background:${palette.surface};border:1px solid ${palette.border};box-shadow:0 18px 52px rgba(0,0,0,0.32);font-family:Space Grotesk,system-ui,sans-serif;">
+      ${media}
+      <div style="padding:12px;">
+        <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;">
+          <div style="display:inline-flex;align-items:center;padding:4px 6px;border-radius:999px;background:${palette.badgeBg};color:${palette.textFaint};font-size:9px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;">Sponsored</div>
+          <button type="button" data-zc-close style="background:none;border:none;color:${palette.textFaint};width:16px;height:16px;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;">${CLOSE_ICON_SVG}</button>
+        </div>
+        <div style="margin-top:10px;color:${palette.text};font-size:13px;font-weight:700;line-height:1.2;">${escapeHtml(ad.title)}</div>
+        ${ad.description ? `<div style="margin-top:6px;color:${palette.textMuted};font-size:11px;line-height:1.35;">${escapeHtml(ad.description)}</div>` : ''}
+        <a href="${escapeHtml(ad.landing_url)}" target="_blank" rel="noreferrer noopener" data-zc-cta style="margin-top:12px;display:block;width:100%;padding:8px 10px;border-radius:10px;border:1px solid ${palette.border};background:${palette.surfaceStrong};color:${palette.text};text-align:center;text-decoration:none;font-size:11px;font-weight:700;">${escapeHtml(ad.cta_text || 'Learn More')}</a>
+      </div>
+    </div>
+  `;
+}
+function renderInlineText(ad, theme) {
+    const palette = getPalette(theme);
+    const media = ad.image_url
+        ? `<img src="${escapeHtml(ad.image_url)}" alt="${escapeHtml(ad.title)}" style="width:34px;height:34px;border-radius:10px;object-fit:cover;flex-shrink:0;" />`
+        : `<div style="width:34px;height:34px;border-radius:10px;background:${palette.accentBg};color:${palette.accentText};display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;">Ad</div>`;
+    return `
+    <div style="margin:10px 0;border-radius:14px;overflow:hidden;background:${palette.surface};border:1px solid ${palette.border};font-family:Space Grotesk,system-ui,sans-serif;">
+      <div style="display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-bottom:1px solid ${palette.border};background:${palette.surfaceStrong};">
+        <span style="color:${palette.textFaint};font-size:9px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;">Sponsored</span>
+        <button type="button" data-zc-close style="background:none;border:none;color:${palette.textFaint};width:16px;height:16px;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;">${CLOSE_ICON_SVG}</button>
+      </div>
+      <div style="padding:12px;display:flex;gap:10px;align-items:flex-start;">
+        ${media}
+        <div style="min-width:0;flex:1;">
+          <div style="color:${palette.text};font-size:13px;font-weight:700;line-height:1.2;">${escapeHtml(ad.title)}</div>
+          ${ad.description ? `<div style="margin-top:5px;color:${palette.textMuted};font-size:11px;line-height:1.45;">${escapeHtml(ad.description)}</div>` : ''}
+          <a href="${escapeHtml(ad.landing_url)}" target="_blank" rel="noreferrer noopener" data-zc-cta style="margin-top:9px;display:inline-block;padding:7px 10px;border-radius:9px;background:${palette.accentBg};color:${palette.accentText};text-decoration:none;font-size:10px;font-weight:700;">${escapeHtml(ad.cta_text || 'Learn More')}</a>
+        </div>
+      </div>
+    </div>
+  `;
+}
+export function renderWidgetMarkup(ad, options) {
+    const format = normalizeFormat(options.format);
+    if (format === 'tooltip-ad') {
+        return renderTooltipWidget(ad, options.theme);
+    }
+    if (format === 'sponsored-card') {
+        return renderSponsoredCard(ad, options.theme);
+    }
+    if (format === 'inline-text') {
+        return renderInlineText(ad, options.theme);
+    }
+    return renderVideoWidget(ad, options.theme);
+}

package/dist/index.cjs

@@ -503,6 +503,20 @@ var WidgetModule = class {
         element.innerHTML = renderWidgetMarkup(ad, { format, theme });
         element.setAttribute("data-zerocost-ad-id", ad.id);
         this.ensureVideoPlayback(element);
+        const observer = new IntersectionObserver((entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+              this.client.log(`Ad visible: tracking impression for ${ad.id}`);
+              this.client.request("/track-event", {
+                event_name: "ad_impression",
+                properties: { ad_id: ad.id, placement_id: options.position || "auto" }
+              }).catch(() => {
+              });
+              observer.disconnect();
+            }
+          });
+        }, { threshold: 0.2 });
+        observer.observe(element);
         const ctas = element.querySelectorAll("[data-zc-cta]");
         ctas.forEach((cta) => {
           cta.addEventListener("click", () => {

package/dist/index.js

@@ -473,6 +473,20 @@ var WidgetModule = class {
         element.innerHTML = renderWidgetMarkup(ad, { format, theme });
         element.setAttribute("data-zerocost-ad-id", ad.id);
         this.ensureVideoPlayback(element);
+        const observer = new IntersectionObserver((entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+              this.client.log(`Ad visible: tracking impression for ${ad.id}`);
+              this.client.request("/track-event", {
+                event_name: "ad_impression",
+                properties: { ad_id: ad.id, placement_id: options.position || "auto" }
+              }).catch(() => {
+              });
+              observer.disconnect();
+            }
+          });
+        }, { threshold: 0.2 });
+        observer.observe(element);
         const ctas = element.querySelectorAll("[data-zc-cta]");
         ctas.forEach((cta) => {
           cta.addEventListener("click", () => {

package/dist/modules/ads.js

@@ -0,0 +1,16 @@
+export class AdsModule {
+    client;
+    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;
+    }
+}