@zerocost/sdk 0.18.0 → 0.19.0

package/dist/core/client.js

@@ -0,0 +1,63 @@
+import { getBaseUrl } from './config';
+export class ZerocostClient {
+    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) {
+            this.log('ZerocostSDK is already initialized.');
+            return;
+        }
+        this.isInitialized = true;
+        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}`;
+        const payload = {
+            ...(body || {}),
+            app_id: this.config.appId,
+        };
+        this.log(`→ ${path}`, payload);
+        const res = await fetch(url, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'x-api-key': this.config.apiKey,
+            },
+            body: JSON.stringify(payload),
+        });
+        const data = await res.json();
+        if (!res.ok) {
+            this.log(`✗ ${res.status}`, data);
+            throw new Error(data.error || `Request failed with status ${res.status}`);
+        }
+        this.log(`✓ ${res.status}`, data);
+        return data;
+    }
+    log(message, data) {
+        if (this.config.debug) {
+            // Sanitize message to hide internal URLs/infra
+            const sanitizedMessage = typeof message === 'string'
+                ? message.replace(/https:\/\/[a-z0-9.-]+\.supabase\.co/gi, '[INFRA]')
+                : message;
+            console.log(`[Zerocost] ${sanitizedMessage}`, data ?? '');
+        }
+    }
+}

package/dist/core/config.js

@@ -0,0 +1,5 @@
+export const EDGE_FUNCTION_BASE = 'https://mwbgzpbuoojqsuxduieo.supabase.co/functions/v1';
+export { ZEROCOST_BASE_URL } from './constants';
+export function getBaseUrl(custom) {
+    return custom || EDGE_FUNCTION_BASE;
+}

package/dist/core/consent-ui.js

@@ -0,0 +1,490 @@
+/**
+ * consent-ui.ts — Pure DOM consent popup for the Zerocost SDK.
+ *
+ * - Desktop: centered card modal (max 480px)
+ * - Mobile (≤640px): bottom-sheet modal
+ * - Themes: light / dark / auto
+ * - Non-dismissable (no Escape, no backdrop click)
+ * - Returns a Promise that resolves with the user's toggle selections
+ */
+import { ZEROCOST_BASE_URL } from './config';
+// ── CSS ──────────────────────────────────────────────────────────────
+const STYLE_ID = 'zerocost-consent-styles';
+export 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, .zc-settings-btn { ${darkVars} }`;
+    }
+    else if (theme === 'light') {
+        themeRule = `.zc-consent-root, .zc-settings-btn { ${lightVars} }`;
+    }
+    else {
+        themeRule = `
+      .zc-consent-root, .zc-settings-btn { ${lightVars} }
+      @media (prefers-color-scheme: dark) {
+        .zc-consent-root, .zc-settings-btn { ${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;
+    }
+
+    /* Floating settings button */
+    .zc-settings-btn {
+      position: fixed;
+      width: 44px;
+      height: 44px;
+      border-radius: 50%;
+      background: var(--zc-bg);
+      border: 1px solid var(--zc-border);
+      color: var(--zc-text);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      z-index: 999998;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+      transition: transform 200ms, border-color 200ms;
+    }
+
+    .zc-settings-btn:hover {
+      transform: scale(1.05);
+      border-color: var(--zc-text-secondary);
+    }
+
+    .zc-settings-btn svg {
+      width: 20px;
+      height: 20px;
+    }
+
+    .zc-settings-bottom-left { bottom: 20px; left: 20px; }
+    .zc-settings-bottom-right { bottom: 20px; right: 20px; }
+    .zc-settings-top-left { top: 20px; left: 20px; }
+    .zc-settings-top-right { top: 20px; right: 20px; }
+
+    @media (max-width: 640px) {
+      .zc-settings-btn { width: 40px; height: 40px; }
+      .zc-settings-bottom-left, .zc-settings-bottom-right { bottom: 16px; }
+    }
+  `;
+    const style = document.createElement('style');
+    style.id = STYLE_ID;
+    style.textContent = css;
+    document.head.appendChild(style);
+}
+// ── Toggle helper ────────────────────────────────────────────────────
+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;
+}
+// ── Toggle card helper ───────────────────────────────────────────────
+function createToggleCard(toggleId, title, description, learnMoreUrl, defaultOn) {
+    const card = document.createElement('div');
+    card.className = 'zc-consent-toggle-card';
+    // Row: label + toggle
+    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);
+    // Description
+    const desc = document.createElement('div');
+    desc.className = 'zc-consent-toggle-desc';
+    desc.textContent = description;
+    card.appendChild(desc);
+    // Learn more
+    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 ↗';
+    card.appendChild(link);
+    return card;
+}
+// ── Public: show consent popup ───────────────────────────────────────
+export function showConsentUI(options) {
+    return new Promise((resolve) => {
+        const { appName, theme, privacyPolicyUrl } = options;
+        const defaults = options.defaults ?? { ads: true, usageData: false, aiInteractions: false };
+        injectStyles(theme);
+        // Root wrapper
+        const root = document.createElement('div');
+        root.className = 'zc-consent-root';
+        // Backdrop (non-dismissable)
+        const backdrop = document.createElement('div');
+        backdrop.className = 'zc-consent-backdrop';
+        // Block Escape key
+        const blockEscape = (e) => {
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        };
+        document.addEventListener('keydown', blockEscape, true);
+        // Card
+        const card = document.createElement('div');
+        card.className = 'zc-consent-card';
+        // Header
+        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);
+        // Subtitle
+        const subtitle = document.createElement('div');
+        subtitle.className = 'zc-consent-subtitle';
+        subtitle.textContent = 'Manage your preferences below. You can update these anytime.';
+        card.appendChild(subtitle);
+        // Toggles
+        const toggles = document.createElement('div');
+        toggles.className = 'zc-consent-toggles';
+        // Base URL for Zerocost documentation/legal links
+        const zerocostBaseUrl = ZEROCOST_BASE_URL;
+        toggles.appendChild(createToggleCard('zc-toggle-ads', 'Ads', 'Contextual, non-intrusive ads. No cookies or browsing history used.', `${zerocostBaseUrl}/docs/ads`, defaults.ads));
+        toggles.appendChild(createToggleCard('zc-toggle-usage', 'Usage data', 'Anonymized usage patterns. No personal information is shared.', `${zerocostBaseUrl}/docs/usage-data`, defaults.usageData));
+        toggles.appendChild(createToggleCard('zc-toggle-ai', 'AI interactions', 'Anonymized conversation data used for AI research.', `${zerocostBaseUrl}/docs/ai-interactions`, defaults.aiInteractions));
+        card.appendChild(toggles);
+        // Footer links
+        const footer = document.createElement('div');
+        footer.className = 'zc-consent-footer';
+        const ppLink = document.createElement('a');
+        ppLink.href = privacyPolicyUrl || `${zerocostBaseUrl}/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 = '·';
+        footer.appendChild(sep1);
+        const termsLink = document.createElement('a');
+        termsLink.href = `${zerocostBaseUrl}/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 = '·';
+        footer.appendChild(sep2);
+        const dnsLink = document.createElement('a');
+        dnsLink.href = `${zerocostBaseUrl}/docs/do-not-sell`;
+        dnsLink.target = '_blank';
+        dnsLink.rel = 'noopener noreferrer';
+        dnsLink.textContent = 'Do Not Sell My Data';
+        footer.appendChild(dnsLink);
+        card.appendChild(footer);
+        // Confirm button
+        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;
+            // Cleanup
+            document.removeEventListener('keydown', blockEscape, true);
+            root.remove();
+            resolve({ ads, usageData, aiInteractions });
+        });
+        card.appendChild(confirmBtn);
+        backdrop.appendChild(card);
+        root.appendChild(backdrop);
+        document.body.appendChild(root);
+    });
+}
+/** Remove any existing consent popup from the DOM */
+export function removeConsentUI() {
+    document.querySelector('.zc-consent-root')?.remove();
+}