@cloff/sdk 1.0.0

package/src/widget.ts

@@ -0,0 +1,664 @@
+// 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 {
+  private shadow: ShadowRoot;
+  private apiKey: string | null = null;
+  private days: number = 30;
+  private theme: 'light' | 'dark' = 'dark';
+  private accentColor: string = '#8b5cf6'; // Indigo/violet default
+
+  constructor() {
+    super();
+    this.shadow = this.attachShadow({ mode: 'open' });
+  }
+
+  static get observedAttributes() {
+    return ['api-key', 'days', 'theme', 'accent-color'];
+  }
+
+  attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+    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();
+  }
+
+  private async fetchMetrics(): Promise<any> {
+    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;
+  }
+
+  private getStyles(): string {
+    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); }
+      }
+    `;
+  }
+
+  private renderError(message: string) {
+    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>
+    `;
+  }
+
+  private 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>
+    `;
+  }
+
+  private renderWidget(data: any) {
+    const metrics: any[] = data.metrics || [];
+    const devices: any[] = data.devices || [];
+    const locations: any[] = 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>
+    `;
+  }
+
+  private 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: any) {
+      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/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "es2020",
+    "module": "esnext",
+    "lib": ["es2020", "dom"],
+    "declaration": true,
+    "outDir": "./dist",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "moduleResolution": "node"
+  },
+  "include": ["src/**/*"]
+}