@zerocost/sdk 0.17.0 → 0.19.0

package/dist/modules/recording.js

@@ -0,0 +1,187 @@
+export class RecordingModule {
+    client;
+    config = null;
+    events = [];
+    observer = null;
+    flushInterval = null;
+    stopTimer = null;
+    handlers = [];
+    sessionId = '';
+    startTime = 0;
+    constructor(client) {
+        this.client = client;
+    }
+    /**
+     * Start a lightweight UX session recording.
+     */
+    start(config) {
+        if (typeof document === 'undefined')
+            return;
+        this.config = config;
+        this.sessionId = this.generateId();
+        this.startTime = Date.now();
+        // Roll dice on sample rate
+        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)`);
+        // Capture initial viewport state
+        this.pushEvent('resize', {
+            width: window.innerWidth,
+            height: window.innerHeight,
+            url: location.href,
+            title: document.title,
+        });
+        // Observe DOM mutations
+        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,
+        });
+        // Click tracking
+        this.on('click', (e) => {
+            const target = e.target;
+            this.pushEvent('click', {
+                x: e.clientX,
+                y: e.clientY,
+                target: this.describeEl(target),
+            });
+        }, true);
+        // Scroll tracking (throttled)
+        let scrollTimeout = null;
+        this.on('scroll', () => {
+            if (scrollTimeout)
+                return;
+            scrollTimeout = setTimeout(() => {
+                scrollTimeout = null;
+                this.pushEvent('scroll', {
+                    x: window.scrollX,
+                    y: window.scrollY,
+                });
+            }, 250);
+        });
+        // Input tracking (blurred)
+        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);
+        }
+        // Navigation tracking
+        this.on('popstate', () => {
+            this.pushEvent('navigation', { url: location.pathname });
+        });
+        // Flush every 15 seconds
+        this.flushInterval = setInterval(() => this.flush(), 15_000);
+        // Stop after max duration
+        this.stopTimer = setTimeout(() => {
+            this.client.log('Recording: max duration reached, stopping');
+            this.stop();
+        }, config.maxDuration * 1000);
+    }
+    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 { /* invalid selector */ }
+        }
+        // Always mask password and sensitive fields
+        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);
+    }
+}

package/dist/modules/trackers.js

@@ -0,0 +1,27 @@
+export class TrackModule {
+    client;
+    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 });
+    }
+}

package/dist/modules/widget.js

@@ -0,0 +1,301 @@
+import { renderWidgetMarkup, SDK_WIDGET_REFRESH_MS } from '../core/widget-render';
+const POSITION_STYLES = {
+    'bottom-right': 'position:fixed;bottom:24px;right:40px;z-index:9999;',
+    'bottom-left': 'position:fixed;bottom:24px;left:80px;z-index:9999;',
+    'top-right': 'position:fixed;top:24px;right:40px;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:40px;transform:translateY(-50%);z-index:9999;',
+};
+const FORMAT_PRIORITY = ['video-widget', 'tooltip-ad', 'sponsored-card', 'sidebar-display', 'inline-text'];
+const AUTO_SLOT_ID = 'zerocost-auto-slot';
+const CHAT_CONTAINER_SELECTORS = [
+    '[data-zerocost-chat]',
+    '[data-zc-chat]',
+    '[data-chat]',
+    '[data-chat-stream]',
+    '[data-conversation]',
+    '[data-ai-chat]',
+    '[role="log"]',
+    '[aria-label*="chat" i]',
+    '[aria-label*="conversation" i]',
+];
+export class WidgetModule {
+    client;
+    mounted = new Map();
+    constructor(client) {
+        this.client = client;
+    }
+    async autoInjectWithConfig(display, widget) {
+        try {
+            const selected = this.resolveSelectedWidgets(display, widget);
+            this.clearAutoInjectedSlots();
+            if (selected.length === 0) {
+                this.client.log('No enabled widget format found. Skipping injection.');
+                return;
+            }
+            for (const config of selected) {
+                this.client.log(`Auto-inject: rendering configured format "${config.format}".`);
+                await this.mountSingleFormat(config);
+            }
+            this.client.log('Auto-inject completed.');
+        }
+        catch (err) {
+            this.client.log(`Widget autoInject error: ${err}`);
+        }
+    }
+    async autoInject() {
+        try {
+            this.client.log('Fetching ad placements from server...');
+            const { display, widget } = await this.client.request('/get-placements');
+            await this.autoInjectWithConfig(display, widget);
+        }
+        catch (err) {
+            this.client.log(`Widget autoInject error: ${err}`);
+        }
+    }
+    resolveSelectedWidgets(display, widget) {
+        const configs = this.normalizeConfigs(display);
+        const selected = [];
+        if (widget?.enabled && widget?.format && widget.format !== 'inline-text') {
+            selected.push({
+                format: widget.format,
+                position: widget.position || 'bottom-right',
+                theme: widget.theme || 'dark',
+                autoplay: widget.autoplay ?? widget.format === 'video-widget',
+                enabled: true,
+            });
+        }
+        else {
+            for (const format of FORMAT_PRIORITY) {
+                if (format === 'inline-text')
+                    continue;
+                const config = configs[format];
+                if (config?.enabled) {
+                    selected.push({
+                        format,
+                        position: config.position,
+                        theme: config.theme,
+                        autoplay: config.autoplay,
+                        enabled: true,
+                    });
+                    break;
+                }
+            }
+        }
+        const inlineConfig = configs['inline-text'];
+        if (widget?.enabled && widget?.format === 'inline-text') {
+            selected.push({
+                format: 'inline-text',
+                position: widget.position || inlineConfig?.position || 'after-paragraph-1',
+                theme: widget.theme || inlineConfig?.theme || 'dark',
+                autoplay: false,
+                enabled: true,
+            });
+        }
+        else if (inlineConfig?.enabled) {
+            selected.push({
+                format: 'inline-text',
+                position: inlineConfig.position,
+                theme: inlineConfig.theme,
+                autoplay: false,
+                enabled: true,
+            });
+        }
+        return selected;
+    }
+    normalizeConfigs(display) {
+        if (display && typeof display === 'object' && ('video-widget' in display || 'floating-video' in display)) {
+            const source = display;
+            const videoConfig = source['video-widget'] || source['floating-video'];
+            const sponsoredCardConfig = source['sponsored-card'] || source['sidebar-display'];
+            return {
+                'video-widget': videoConfig || { position: 'bottom-right', theme: 'dark', autoplay: true, enabled: true },
+                'tooltip-ad': source['tooltip-ad'] || { position: 'bottom-right', theme: 'dark', autoplay: false, enabled: false },
+                'sponsored-card': sponsoredCardConfig || { position: 'bottom-right', theme: 'dark', autoplay: false, enabled: false },
+                'sidebar-display': sponsoredCardConfig || { position: 'bottom-right', theme: 'dark', autoplay: false, enabled: false },
+                'inline-text': source['inline-text'] || { position: 'after-paragraph-1', theme: 'dark', autoplay: false, enabled: false },
+            };
+        }
+        const pos = display?.position || 'bottom-right';
+        const theme = display?.theme || 'dark';
+        return {
+            'video-widget': { position: pos, theme, autoplay: true, enabled: true },
+            'tooltip-ad': { position: pos, theme, autoplay: false, enabled: false },
+            'sponsored-card': { position: pos, theme, autoplay: false, enabled: false },
+            'sidebar-display': { position: pos, theme, autoplay: false, enabled: false },
+            'inline-text': { position: 'after-paragraph-1', theme, autoplay: false, enabled: false },
+        };
+    }
+    async mountSingleFormat(config) {
+        const isInline = config.format === 'inline-text';
+        const targetElementId = isInline ? this.ensureInlineTarget(config.position) : AUTO_SLOT_ID;
+        if (!targetElementId) {
+            this.client.log('Inline target not found. Skipping inline ad render.');
+            return;
+        }
+        if (!isInline) {
+            let element = document.getElementById(AUTO_SLOT_ID);
+            if (!element) {
+                element = document.createElement('div');
+                element.id = AUTO_SLOT_ID;
+                document.body.appendChild(element);
+            }
+            const posStyle = POSITION_STYLES[config.position] || POSITION_STYLES['bottom-right'];
+            const maxW = config.format === 'video-widget' ? 'max-width:200px;' : 'max-width:176px;';
+            element.setAttribute('style', `${posStyle}${maxW}`);
+            element.setAttribute('data-zerocost', '');
+            element.setAttribute('data-format', config.format);
+        }
+        await this.mount(targetElementId, {
+            format: config.format,
+            refreshInterval: SDK_WIDGET_REFRESH_MS / 1000,
+            theme: config.theme,
+            autoplay: config.autoplay,
+            position: config.position,
+        });
+    }
+    ensureInlineTarget(position) {
+        const chatContainer = this.findChatContainer();
+        if (!chatContainer)
+            return null;
+        const paragraphMatch = /after-paragraph-(\d+)/.exec(position || '');
+        const index = paragraphMatch ? Number(paragraphMatch[1]) : 1;
+        const paragraphs = Array.from(chatContainer.querySelectorAll('p'));
+        const anchor = paragraphs[Math.max(0, Math.min(paragraphs.length - 1, index - 1))];
+        if (!anchor)
+            return null;
+        const existing = document.getElementById(AUTO_SLOT_ID);
+        if (existing)
+            existing.remove();
+        const inlineId = `${AUTO_SLOT_ID}-inline`;
+        let target = document.getElementById(inlineId);
+        if (!target) {
+            target = document.createElement('div');
+            target.id = inlineId;
+            target.setAttribute('data-zerocost', '');
+            target.setAttribute('data-format', 'inline-text');
+            target.style.margin = '12px 0';
+            anchor.insertAdjacentElement('afterend', target);
+        }
+        return inlineId;
+    }
+    findChatContainer() {
+        for (const selector of CHAT_CONTAINER_SELECTORS) {
+            const container = document.querySelector(selector);
+            if (container)
+                return container;
+        }
+        const semanticContainers = Array.from(document.querySelectorAll('section, main, div, article'));
+        return semanticContainers.find((node) => {
+            const marker = `${node.id} ${node.className || ''}`.toLowerCase();
+            return /chat|conversation|assistant|messages|thread/.test(marker);
+        }) || null;
+    }
+    async mount(targetElementId, options = {}) {
+        const element = document.getElementById(targetElementId);
+        if (!element)
+            return;
+        if (this.mounted.has(targetElementId))
+            this.unmount(targetElementId);
+        const refreshMs = (options.refreshInterval ?? (SDK_WIDGET_REFRESH_MS / 1000)) * 1000;
+        const theme = options.theme || 'dark';
+        const format = options.format || 'video-widget';
+        const autoplay = options.autoplay ?? format === 'video-widget';
+        const render = async () => {
+            try {
+                const body = {
+                    widget_style: format,
+                    theme,
+                    autoplay,
+                    position: options.position,
+                };
+                const data = await this.client.request('/serve-widget', body);
+                const ad = data.ad;
+                if (!ad) {
+                    this.client.log(`No ad inventory available for configured format "${format}".`);
+                    element.innerHTML = '';
+                    return;
+                }
+                element.innerHTML = renderWidgetMarkup(ad, { format, theme });
+                element.setAttribute('data-zerocost-ad-id', ad.id);
+                this.ensureVideoPlayback(element);
+                // Track Impression (Client-side with Viewport checking)
+                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(); // Track once per render
+                        }
+                    });
+                }, { threshold: 0.2 }); // 20% visible counts as impression
+                observer.observe(element);
+                const ctas = element.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 = element.querySelector('[data-zc-close]');
+                if (closeBtn) {
+                    closeBtn.addEventListener('click', (event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        this.unmount(targetElementId);
+                    });
+                }
+            }
+            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 });
+    }
+    ensureVideoPlayback(root) {
+        const video = root.querySelector('video');
+        if (!video)
+            return;
+        video.muted = true;
+        video.autoplay = true;
+        video.loop = true;
+        video.playsInline = true;
+        video.preload = 'auto';
+        const tryPlay = () => video.play().catch(() => { });
+        if (video.readyState >= 2) {
+            tryPlay();
+            return;
+        }
+        video.addEventListener('loadeddata', tryPlay, { once: true });
+        video.addEventListener('canplay', tryPlay, { once: true });
+    }
+    clearAutoInjectedSlots() {
+        this.unmountAll();
+        const existing = document.querySelectorAll('[data-zerocost], #zerocost-auto-slot, #zerocost-auto-slot-inline');
+        existing.forEach((node) => node.remove());
+    }
+    unmount(targetElementId) {
+        const slot = this.mounted.get(targetElementId);
+        if (slot?.interval)
+            clearInterval(slot.interval);
+        const element = document.getElementById(targetElementId);
+        if (element)
+            element.remove();
+        this.mounted.delete(targetElementId);
+    }
+    unmountAll() {
+        for (const id of Array.from(this.mounted.keys()))
+            this.unmount(id);
+    }
+}

package/dist/types/index.js

@@ -0,0 +1,2 @@
+// ── Consent ──────────────────────────────────────────────────────────
+export {};

package/package.json

@@ -1,13 +1,15 @@
 {
   "name": "@zerocost/sdk",
-  "version": "0.17.0",
+  "version": "0.19.0",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "scripts": {
-    "build": "tsup src/index.ts --format cjs,esm --tsconfig ./tsconfig.json && tsc -p tsconfig.json --emitDeclarationOnly --declaration --outDir dist",
+    "build": "tsup src/index.ts --format cjs,esm --tsconfig ./tsconfig.json && npx tsc -p tsconfig.json --emitDeclarationOnly --declaration --outDir dist",
     "prepublishOnly": "npm run build"
   },
   "devDependencies": {
@@ -18,7 +20,13 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/harshil12345000/zerocost"
+    "url": "git+https://github.com/harshil12345000/zerocost.git"
   },
-  "keywords": ["zerocost", "ai", "monetization", "sdk", "ads"]
+  "keywords": [
+    "zerocost",
+    "ai",
+    "monetization",
+    "sdk",
+    "ads"
+  ]
 }