@cloff/sdk 1.0.0

package/dist/widget.d.ts

@@ -0,0 +1,18 @@
+export declare class ClofWidget extends HTMLElement {
+    private shadow;
+    private apiKey;
+    private days;
+    private theme;
+    private accentColor;
+    constructor();
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    connectedCallback(): void;
+    private fetchMetrics;
+    private getStyles;
+    private renderError;
+    private renderLoading;
+    private renderWidget;
+    private render;
+}
+export { ClofWidget as SocioDauWidget };

package/dist/widget.js

@@ -0,0 +1,623 @@
+// Default database connection credentials
+const DEFAULT_SUPABASE_URL = 'https://edhkrzyiiznotsmblbrt.supabase.co';
+const DEFAULT_SUPABASE_ANON_KEY = 'sb_publishable_EzjTe8cJu-8gZmdccQr4aA_iZY8WIxL';
+export class ClofWidget extends HTMLElement {
+    constructor() {
+        super();
+        this.apiKey = null;
+        this.days = 30;
+        this.theme = 'dark';
+        this.accentColor = '#8b5cf6'; // Indigo/violet default
+        this.shadow = this.attachShadow({ mode: 'open' });
+    }
+    static get observedAttributes() {
+        return ['api-key', 'days', 'theme', 'accent-color'];
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue)
+            return;
+        if (name === 'api-key')
+            this.apiKey = newValue;
+        if (name === 'days')
+            this.days = parseInt(newValue, 10) || 30;
+        if (name === 'theme')
+            this.theme = newValue === 'light' ? 'light' : 'dark';
+        if (name === 'accent-color')
+            this.accentColor = newValue || '#8b5cf6';
+        if (this.isConnected && this.apiKey) {
+            this.render();
+        }
+    }
+    connectedCallback() {
+        this.apiKey = this.getAttribute('api-key');
+        this.days = parseInt(this.getAttribute('days') || '30', 10);
+        this.accentColor = this.getAttribute('accent-color') || '#8b5cf6';
+        const themeAttr = this.getAttribute('theme');
+        if (themeAttr === 'light' || themeAttr === 'dark') {
+            this.theme = themeAttr;
+        }
+        else {
+            // Auto-detect dark mode from page classes or system preferences
+            const hasDarkClass = document.documentElement.classList.contains('dark') || document.body.classList.contains('dark');
+            const hasLightClass = document.documentElement.classList.contains('light') || document.body.classList.contains('light');
+            if (hasDarkClass) {
+                this.theme = 'dark';
+            }
+            else if (hasLightClass) {
+                this.theme = 'light';
+            }
+            else {
+                this.theme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+            }
+        }
+        this.render();
+    }
+    async fetchMetrics() {
+        if (!this.apiKey) {
+            throw new Error('API Key is missing');
+        }
+        // Intercept Demo/Mock keys for local sandboxes or developer previews
+        if (this.apiKey.startsWith('socio_dau_live_demo_key_')) {
+            const seed = this.apiKey.includes('socionetwork') ? 1.5 : 0.8;
+            const metrics = [];
+            const today = new Date();
+            for (let i = this.days - 1; i >= 0; i--) {
+                const date = new Date(today);
+                date.setDate(today.getDate() - i);
+                const dateStr = date.toISOString().split('T')[0];
+                const base = 50 + (this.days - 1 - i) * 8 * seed;
+                const dayOfWeek = date.getDay();
+                const weekendDip = (dayOfWeek === 0 || dayOfWeek === 6) ? 0.7 : 1.0;
+                const randomNoise = 0.9 + Math.random() * 0.2;
+                metrics.push({
+                    activity_date: dateStr,
+                    active_users: Math.round(base * weekendDip * randomNoise)
+                });
+            }
+            const devices = [
+                { device_type: 'Mobile', count: Math.round(1482 * seed) },
+                { device_type: 'Desktop', count: Math.round(853 * seed) },
+                { device_type: 'Tablet', count: Math.round(124 * seed) }
+            ];
+            const locations = [
+                { location: 'America/New_York', count: Math.round(980 * seed) },
+                { location: 'Europe/London', count: Math.round(642 * seed) },
+                { location: 'Asia/Tokyo', count: Math.round(412 * seed) },
+                { location: 'Europe/Paris', count: Math.round(280 * seed) },
+                { location: 'Australia/Sydney', count: Math.round(144 * seed) }
+            ];
+            // Simulate a small network delay
+            await new Promise(resolve => setTimeout(resolve, 600));
+            return {
+                ok: true,
+                metrics,
+                devices,
+                locations
+            };
+        }
+        const response = await fetch(`${DEFAULT_SUPABASE_URL}/rest/v1/rpc/get_public_dau_metrics`, {
+            method: 'POST',
+            headers: {
+                'apikey': DEFAULT_SUPABASE_ANON_KEY,
+                'Authorization': `Bearer ${DEFAULT_SUPABASE_ANON_KEY}`,
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                p_api_key: this.apiKey,
+                p_days: this.days
+            })
+        });
+        if (!response.ok) {
+            const errText = await response.text();
+            throw new Error(errText || 'Failed to fetch public metrics');
+        }
+        const data = await response.json();
+        if (data && data.ok === false) {
+            throw new Error(data.error || 'Server rejected metrics request');
+        }
+        return data;
+    }
+    getStyles() {
+        const isDark = this.theme === 'dark';
+        const bg = isDark ? '#0f172a' : '#ffffff';
+        const text = isDark ? '#f8fafc' : '#0f172a';
+        const border = isDark ? '#1e293b' : '#e2e8f0';
+        const subtext = isDark ? '#94a3b8' : '#64748b';
+        const cardBg = isDark ? '#1e293b' : '#f8fafc';
+        const gridLine = isDark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.04)';
+        return `
+      :host {
+        display: block;
+        width: 100%;
+        max-width: 600px;
+        font-family: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
+        box-sizing: border-box;
+      }
+      .widget-container {
+        background: ${bg};
+        color: ${text};
+        border: 1px solid ${border};
+        border-radius: 16px;
+        padding: 20px;
+        box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.08);
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+        overflow: hidden;
+        transition: all 0.3s ease;
+      }
+      .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        border-bottom: 1px solid ${border};
+        padding-bottom: 15px;
+      }
+      .title-section {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+      .title {
+        font-size: 11px;
+        text-transform: uppercase;
+        font-weight: 700;
+        letter-spacing: 1.5px;
+        color: ${subtext};
+      }
+      .dau-count-container {
+        display: flex;
+        align-items: baseline;
+        gap: 8px;
+      }
+      .dau-count {
+        font-size: 32px;
+        font-weight: 800;
+        letter-spacing: -1px;
+        background: linear-gradient(to right, ${this.accentColor}, #6366f1);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+      .dau-label {
+        font-size: 12px;
+        color: ${subtext};
+        font-weight: 600;
+      }
+      .badge {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        background: ${cardBg};
+        border: 1px solid ${border};
+        padding: 6px 12px;
+        border-radius: 10px;
+        font-size: 11px;
+        font-weight: 700;
+        color: ${this.accentColor};
+      }
+      .badge-dot {
+        width: 6px;
+        height: 6px;
+        background: ${this.accentColor};
+        border-radius: 50%;
+        animation: pulse 2s infinite;
+      }
+      .chart-container {
+        position: relative;
+        width: 100%;
+        height: 180px;
+      }
+      svg {
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+      }
+      .grid-line {
+        stroke: ${gridLine};
+        stroke-dasharray: 4;
+      }
+      .chart-line {
+        stroke: ${this.accentColor};
+        stroke-width: 3;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        fill: none;
+      }
+      .chart-area {
+        fill: url(#areaGradient);
+      }
+      .chart-dot {
+        fill: ${this.accentColor};
+        stroke: ${bg};
+        stroke-width: 2;
+      }
+      .stats-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 16px;
+      }
+      @media (max-width: 480px) {
+        .stats-grid {
+          grid-template-columns: 1fr;
+        }
+      }
+      .card {
+        background: ${cardBg};
+        border: 1px solid ${border};
+        border-radius: 12px;
+        padding: 14px;
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      }
+      .card-title {
+        font-size: 12px;
+        font-weight: 700;
+        color: ${subtext};
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+      }
+      .device-bar {
+        display: flex;
+        height: 8px;
+        border-radius: 4px;
+        overflow: hidden;
+        background: ${border};
+      }
+      .device-segment {
+        height: 100%;
+        transition: width 0.3s;
+      }
+      .legend-list {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+      }
+      .legend-item {
+        display: flex;
+        justify-content: space-between;
+        font-size: 11px;
+        font-weight: 600;
+      }
+      .legend-label {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        color: ${subtext};
+      }
+      .legend-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+      }
+      .location-list {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+      .location-row {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+      .location-meta {
+        display: flex;
+        justify-content: space-between;
+        font-size: 11px;
+        font-weight: 600;
+      }
+      .location-name {
+        color: ${text};
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 140px;
+      }
+      .location-bar-bg {
+        height: 4px;
+        background: ${border};
+        border-radius: 2px;
+        overflow: hidden;
+      }
+      .location-bar-fill {
+        height: 100%;
+        background: ${this.accentColor};
+        border-radius: 2px;
+      }
+      .footer {
+        display: flex;
+        justify-content: space-between;
+        font-size: 10px;
+        color: ${subtext};
+        border-top: 1px solid ${border};
+        padding-top: 12px;
+        margin-top: 5px;
+      }
+      .footer a {
+        color: ${this.accentColor};
+        text-decoration: none;
+        font-weight: 700;
+      }
+      .footer-badge {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        font-weight: 600;
+      }
+      .check-icon {
+        color: #10b981;
+      }
+      .loader-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 300px;
+        gap: 12px;
+      }
+      .spinner {
+        width: 32px;
+        height: 32px;
+        border: 3px solid ${border};
+        border-top-color: ${this.accentColor};
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+      }
+      .loader-text {
+        font-size: 13px;
+        color: ${subtext};
+        font-weight: 600;
+      }
+      .error-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 250px;
+        color: #ef4444;
+        text-align: center;
+        padding: 20px;
+        gap: 8px;
+      }
+      .error-title {
+        font-weight: 700;
+        font-size: 16px;
+      }
+      .error-desc {
+        font-size: 12px;
+        color: ${subtext};
+      }
+      @keyframes pulse {
+        0%, 100% { opacity: 1; transform: scale(1); }
+        50% { opacity: 0.4; transform: scale(1.3); }
+      }
+      @keyframes spin {
+        to { transform: rotate(360deg); }
+      }
+    `;
+    }
+    renderError(message) {
+        const isDark = this.theme === 'dark';
+        const bg = isDark ? '#0f172a' : '#ffffff';
+        const border = isDark ? '#1e293b' : '#e2e8f0';
+        const subtext = isDark ? '#94a3b8' : '#64748b';
+        this.shadow.innerHTML = `
+      <style>
+        ${this.getStyles()}
+      </style>
+      <div class="widget-container" style="background: ${bg}; border-color: ${border};">
+        <div class="error-container">
+          <div class="error-title">Unable to Load Metrics</div>
+          <div class="error-desc">${message}</div>
+        </div>
+      </div>
+    `;
+    }
+    renderLoading() {
+        const isDark = this.theme === 'dark';
+        const bg = isDark ? '#0f172a' : '#ffffff';
+        const border = isDark ? '#1e293b' : '#e2e8f0';
+        this.shadow.innerHTML = `
+      <style>
+        ${this.getStyles()}
+      </style>
+      <div class="widget-container" style="background: ${bg}; border-color: ${border};">
+        <div class="loader-container">
+          <div class="spinner"></div>
+          <div class="loader-text">Fetching verified metrics...</div>
+        </div>
+      </div>
+    `;
+    }
+    renderWidget(data) {
+        const metrics = data.metrics || [];
+        const devices = data.devices || [];
+        const locations = data.locations || [];
+        // Chronological order for chart
+        const sortedMetrics = [...metrics].sort((a, b) => new Date(a.activity_date).getTime() - new Date(b.activity_date).getTime());
+        const latestDau = sortedMetrics.length > 0 ? sortedMetrics[sortedMetrics.length - 1].active_users : 0;
+        // SVG coordinates setup
+        const width = 500;
+        const height = 150;
+        const paddingLeft = 30;
+        const paddingRight = 10;
+        const paddingTop = 15;
+        const paddingBottom = 15;
+        const chartWidth = width - paddingLeft - paddingRight;
+        const chartHeight = height - paddingTop - paddingBottom;
+        const maxVal = Math.max(...sortedMetrics.map(m => m.active_users), 0);
+        const scaleMax = maxVal === 0 ? 10 : Math.ceil(maxVal * 1.25);
+        const coordPoints = sortedMetrics.map((p, i) => {
+            const x = paddingLeft + (i / Math.max(sortedMetrics.length - 1, 1)) * chartWidth;
+            const y = paddingTop + chartHeight - (p.active_users / scaleMax) * chartHeight;
+            return { x, y };
+        });
+        // Generate path strings
+        let linePath = '';
+        let areaPath = '';
+        if (coordPoints.length > 0) {
+            linePath = coordPoints.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x} ${p.y}`).join(' ');
+            const lastX = coordPoints[coordPoints.length - 1].x;
+            const firstX = coordPoints[0].x;
+            const bottomY = paddingTop + chartHeight;
+            areaPath = `${linePath} L ${lastX} ${bottomY} L ${firstX} ${bottomY} Z`;
+        }
+        // Grid lines calculation
+        const gridLinesY = [0.25, 0.5, 0.75, 1.0].map(pct => {
+            return paddingTop + chartHeight - pct * chartHeight;
+        });
+        // Devices Calculations
+        const totalDevices = devices.reduce((sum, item) => sum + Number(item.count), 0);
+        const deviceColors = ['#8b5cf6', '#6366f1', '#10b981', '#f59e0b'];
+        // Locations Calculations
+        const totalLocations = locations.reduce((sum, item) => sum + Number(item.count), 0);
+        const isDark = this.theme === 'dark';
+        const subtext = isDark ? '#94a3b8' : '#64748b';
+        this.shadow.innerHTML = `
+      <style>
+        ${this.getStyles()}
+      </style>
+      <div class="widget-container">
+        <div class="header">
+          <div class="title-section">
+            <div class="title">Active Users History</div>
+            <div class="dau-count-container">
+              <span class="dau-count">${latestDau.toLocaleString()}</span>
+              <span class="dau-label">DAU today</span>
+            </div>
+          </div>
+          <div class="badge">
+            <div class="badge-dot"></div>
+            <span>Verified Metrics</span>
+          </div>
+        </div>
+
+        <!-- SVG Interactive Area Chart -->
+        <div class="chart-container">
+          <svg viewBox="0 0 ${width} ${height}" preserveAspectRatio="none">
+            <defs>
+              <linearGradient id="areaGradient" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="0%" stop-color="${this.accentColor}" stop-opacity="0.3"/>
+                <stop offset="100%" stop-color="${this.accentColor}" stop-opacity="0.0"/>
+              </linearGradient>
+            </defs>
+
+            <!-- Grid Lines -->
+            ${gridLinesY.map((y) => `
+              <line class="grid-line" x1="${paddingLeft}" y1="${y}" x2="${width - paddingRight}" y2="${y}" />
+            `).join('')}
+
+            <!-- Y Axis bounds text -->
+            <text x="${paddingLeft - 5}" y="${paddingTop + 4}" text-anchor="end" font-size="8" fill="${subtext}" font-weight="600">${Math.round(scaleMax)}</text>
+            <text x="${paddingLeft - 5}" y="${paddingTop + chartHeight + 4}" text-anchor="end" font-size="8" fill="${subtext}" font-weight="600">0</text>
+
+            ${coordPoints.length > 0 ? `
+              <!-- Area Path -->
+              <path class="chart-area" d="${areaPath}" />
+              <!-- Line Path -->
+              <path class="chart-line" d="${linePath}" />
+              <!-- Endpoint Dot -->
+              <circle class="chart-dot" cx="${coordPoints[coordPoints.length - 1].x}" cy="${coordPoints[coordPoints.length - 1].y}" r="5" />
+            ` : ''}
+          </svg>
+        </div>
+
+        <!-- Breakdown Grid -->
+        <div class="stats-grid">
+          
+          <!-- Devices Breakdown -->
+          <div class="card">
+            <div class="card-title">Environments</div>
+            ${totalDevices === 0 ? `
+              <div style="font-size: 11px; color: ${subtext}; text-align: center; margin: auto;">No device data</div>
+            ` : `
+              <div class="device-bar">
+                ${devices.map((dev, idx) => {
+            const pct = (dev.count / totalDevices) * 100;
+            return `<div class="device-segment" style="width: ${pct}%; background: ${deviceColors[idx % deviceColors.length]}"></div>`;
+        }).join('')}
+              </div>
+              <div class="legend-list">
+                ${devices.map((dev, idx) => {
+            const pct = Math.round((dev.count / totalDevices) * 100);
+            return `
+                    <div class="legend-item">
+                      <div class="legend-label">
+                        <div class="legend-dot" style="background: ${deviceColors[idx % deviceColors.length]}"></div>
+                        <span>${dev.device_type}</span>
+                      </div>
+                      <div>${pct}%</div>
+                    </div>
+                  `;
+        }).join('')}
+              </div>
+            `}
+          </div>
+
+          <!-- Locations Breakdown -->
+          <div class="card">
+            <div class="card-title">Top Locations</div>
+            ${totalLocations === 0 ? `
+              <div style="font-size: 11px; color: ${subtext}; text-align: center; margin: auto;">No location data</div>
+            ` : `
+              <div class="location-list">
+                ${locations.slice(0, 3).map((loc) => {
+            const pct = Math.round((loc.count / totalLocations) * 100);
+            const locVal = loc.location || loc.country || 'Unknown';
+            const shortName = locVal.split('/').pop()?.replace('_', ' ') || locVal;
+            return `
+                    <div class="location-row">
+                      <div class="location-meta">
+                        <span class="location-name">${shortName}</span>
+                        <span>${pct}%</span>
+                      </div>
+                      <div class="location-bar-bg">
+                        <div class="location-bar-fill" style="width: ${pct}%; background: ${this.accentColor}"></div>
+                      </div>
+                    </div>
+                  `;
+        }).join('')}
+              </div>
+            `}
+          </div>
+
+        </div>
+
+        <!-- Verified Footer -->
+        <div class="footer">
+          <div class="footer-badge">
+            <span class="check-icon">✓</span> Verified by <strong>Analytics</strong>
+          </div>
+          <div>
+            Powered by <a href="https://socio.kim" target="_blank" rel="noopener">Socio.kim</a>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    async render() {
+        if (!this.apiKey) {
+            this.renderError('API key attribute "api-key" is required.');
+            return;
+        }
+        this.renderLoading();
+        try {
+            const data = await this.fetchMetrics();
+            this.renderWidget(data);
+        }
+        catch (error) {
+            console.error('ClofWidget error:', error);
+            this.renderError(error.message || 'Network error fetching data.');
+        }
+    }
+}
+// Register the custom elements globally if in browser environment
+if (typeof window !== 'undefined') {
+    if (!window.customElements.get('clof-widget')) {
+        window.customElements.define('clof-widget', ClofWidget);
+    }
+    if (!window.customElements.get('socio-dau-widget')) {
+        window.customElements.define('socio-dau-widget', ClofWidget);
+    }
+}
+export { ClofWidget as SocioDauWidget };

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@cloff/sdk",
+  "version": "1.0.0",
+  "description": "Real-time analytics and Session Replay SDK for Clof",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./widget": {
+      "import": "./dist/widget.js",
+      "types": "./dist/widget.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@supabase/supabase-js": "^2.39.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}