@skhema/web-component 0.0.16 → 0.0.18

package/dist/index.es.js

@@ -8,53 +8,202 @@ function toUrlSafeBase64(str) {
   );
   return base64.replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
 }
-async function trackEmbedLoad(analytics) {
+const TRACKING_COOKIE_NAME = "_sk";
+const TRACKING_EXPIRY_HOURS = 24;
+const MAX_TRACKED_ITEMS = 50;
+function getTrackedEmbeds() {
   try {
-    const data = new URLSearchParams({
-      contributor_id: analytics.contributorId,
-      element_type: analytics.elementType,
-      content_hash: analytics.contentHash,
-      content: toUrlSafeBase64(analytics.content),
-      page_url: analytics.pageUrl,
-      page_title: analytics.pageTitle || "",
-      timestamp: analytics.timestamp.toString(),
-      user_agent: analytics.userAgent || ""
-    });
-    if (navigator.sendBeacon) {
-      navigator.sendBeacon(
-        "https://api.skhema.com/api:XGdoUqHx/component/embed",
-        data
-      );
-    } else {
-      fetch("https://api.skhema.com/api:XGdoUqHx/component/embed", {
+    const cookie = document.cookie.split("; ").find((row) => row.startsWith(`${TRACKING_COOKIE_NAME}=`));
+    if (!cookie) return [];
+    const data = JSON.parse(decodeURIComponent(cookie.split("=")[1]));
+    const now = Date.now();
+    const cutoff = now - TRACKING_EXPIRY_HOURS * 60 * 60 * 1e3;
+    return data.filter((item) => item.timestamp > cutoff);
+  } catch {
+    return [];
+  }
+}
+function setTrackedEmbeds(tracked) {
+  try {
+    const limited = tracked.slice(-MAX_TRACKED_ITEMS);
+    const expires = new Date(
+      Date.now() + TRACKING_EXPIRY_HOURS * 60 * 60 * 1e3
+    );
+    document.cookie = `${TRACKING_COOKIE_NAME}=${encodeURIComponent(
+      JSON.stringify(limited)
+    )}; expires=${expires.toUTCString()}; path=/; SameSite=Lax`;
+  } catch {
+  }
+}
+function hasBeenTracked(contentHash) {
+  const tracked = getTrackedEmbeds();
+  return tracked.some((item) => item.contentHash === contentHash);
+}
+function markAsTracked(contentHash) {
+  const tracked = getTrackedEmbeds();
+  tracked.push({
+    contentHash,
+    timestamp: Date.now()
+  });
+  setTrackedEmbeds(tracked);
+}
+class AnalyticsBatcher {
+  constructor() {
+    this.batch = { embeds: [], clicks: [] };
+    this.batchTimeout = null;
+    this.BATCH_DELAY = 2e3;
+    this.MAX_BATCH_SIZE = 10;
+  }
+  addEmbedLoad(analytics) {
+    this.batch.embeds.push(analytics);
+    this.scheduleBatchSend();
+  }
+  addClick(contentData) {
+    this.batch.clicks.push(contentData);
+    this.scheduleBatchSend();
+  }
+  scheduleBatchSend() {
+    if (this.batchTimeout) {
+      clearTimeout(this.batchTimeout);
+    }
+    if (this.batch.embeds.length >= this.MAX_BATCH_SIZE || this.batch.clicks.length >= this.MAX_BATCH_SIZE) {
+      this.sendBatch();
+      return;
+    }
+    this.batchTimeout = window.setTimeout(() => {
+      this.sendBatch();
+    }, this.BATCH_DELAY);
+  }
+  async sendBatch() {
+    if (this.batchTimeout) {
+      clearTimeout(this.batchTimeout);
+      this.batchTimeout = null;
+    }
+    const currentBatch = { ...this.batch };
+    this.batch = { embeds: [], clicks: [] };
+    if (currentBatch.embeds.length === 0 && currentBatch.clicks.length === 0) {
+      return;
+    }
+    if (currentBatch.embeds.length > 0) {
+      await this.sendEmbeds(currentBatch.embeds);
+    }
+    if (currentBatch.clicks.length > 0) {
+      await this.sendClicks(currentBatch.clicks);
+    }
+  }
+  async sendEmbeds(embeds) {
+    for (const embed of embeds) {
+      try {
+        const data = new URLSearchParams({
+          contributor_id: embed.contributorId,
+          element_type: embed.elementType,
+          content_hash: embed.contentHash,
+          content: toUrlSafeBase64(embed.content),
+          page_url: embed.pageUrl,
+          page_title: embed.pageTitle || "",
+          timestamp: embed.timestamp.toString(),
+          user_agent: embed.userAgent || ""
+        });
+        if (navigator.sendBeacon) {
+          navigator.sendBeacon(
+            "https://api.skhema.com/api:XGdoUqHx/component/embed",
+            data
+          );
+        } else {
+          await sendWithRetry(
+            "https://api.skhema.com/api:XGdoUqHx/component/embed",
+            data,
+            "urlencoded"
+          );
+        }
+      } catch (error) {
+        console.debug("Embed tracking failed:", error);
+      }
+    }
+  }
+  async sendClicks(clicks) {
+    for (const click of clicks) {
+      try {
+        const data = {
+          contributor_id: click.contributor_id,
+          element_type: click.element_type,
+          content_hash: click.content_hash,
+          source_url: click.source_url,
+          timestamp: click.timestamp
+        };
+        await sendWithRetry(
+          "https://api.skhema.com/api:XGdoUqHx/component/click",
+          data,
+          "json"
+        );
+      } catch (error) {
+        console.debug("Click tracking failed:", error);
+      }
+    }
+  }
+  // Ensure batch is sent when page unloads
+  flush() {
+    if (this.batch.embeds.length > 0 || this.batch.clicks.length > 0) {
+      this.sendBatch();
+    }
+  }
+}
+const analyticsBatcher = new AnalyticsBatcher();
+if (typeof window !== "undefined") {
+  window.addEventListener("beforeunload", () => {
+    analyticsBatcher.flush();
+  });
+  document.addEventListener("visibilitychange", () => {
+    if (document.visibilityState === "hidden") {
+      analyticsBatcher.flush();
+    }
+  });
+}
+async function sendWithRetry(url, data, contentType = "json", maxRetries = 3) {
+  for (let attempt = 0; attempt < maxRetries; attempt++) {
+    try {
+      const options = {
         method: "POST",
-        body: data,
         credentials: "omit",
         keepalive: true
-      }).catch(() => {
-      });
+      };
+      if (contentType === "json") {
+        options.headers = { "Content-Type": "application/json" };
+        options.body = JSON.stringify(data);
+      } else {
+        options.body = data;
+      }
+      const response = await fetch(url, options);
+      if (response.ok) return;
+      if (response.status >= 400 && response.status < 500) {
+        break;
+      }
+    } catch (error) {
+      if (attempt === maxRetries - 1) {
+        console.debug("Analytics failed after retries:", error);
+        return;
+      }
+    }
+    await new Promise(
+      (resolve) => setTimeout(resolve, Math.pow(2, attempt) * 1e3)
+    );
+  }
+}
+async function trackEmbedLoad(analytics) {
+  try {
+    if (hasBeenTracked(analytics.contentHash)) {
+      console.debug("Embed already tracked, skipping:", analytics.contentHash);
+      return;
     }
+    markAsTracked(analytics.contentHash);
+    analyticsBatcher.addEmbedLoad(analytics);
   } catch (error) {
     console.debug("Analytics tracking failed:", error);
   }
 }
 async function trackClick(contentData) {
   try {
-    const data = {
-      contributor_id: contentData.contributor_id,
-      element_type: contentData.element_type,
-      content_hash: contentData.content_hash,
-      source_url: contentData.source_url,
-      timestamp: contentData.timestamp
-    };
-    fetch("https://api.skhema.com/api:XGdoUqHx/component/click", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(data),
-      credentials: "omit",
-      keepalive: true
-    }).catch(() => {
-    });
+    analyticsBatcher.addClick(contentData);
   } catch (error) {
     console.debug("Click tracking failed:", error);
   }
@@ -264,8 +413,9 @@ const styles = `
   color: var(--skhema-text);
 }
 
-:host([theme="dark"]) {
-  /* Dark mode colors */
+/* Dark mode styles - applied via data-theme attribute */
+.skhema-insight-card[data-theme="dark"],
+.skhema-skeleton[data-theme="dark"] {
   --skhema-bg: hsl(222.2 84% 4.9%);
   --skhema-card: hsl(222.2 84% 4.9%);
   --skhema-border: hsl(217.2 32.6% 17.5%);
@@ -484,26 +634,81 @@ const styles = `
   padding-left: 16px;
 }
 
-/* Loading state */
-.skhema-loading {
-  background: var(--skhema-accent);
+/* Skeleton loading state */
+.skhema-skeleton {
+  background: var(--skhema-card);
   border: 1px solid var(--skhema-border);
-  padding: 12px;
+  border-radius: calc(var(--skhema-radius) * 2);
+  padding: 16px;
+  box-shadow: var(--skhema-shadow);
+  max-width: 600px;
+  margin: 8px 0;
+  animation: skeletonPulse 1.5s ease-in-out infinite;
+}
+
+.skhema-skeleton-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.skhema-skeleton-avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: linear-gradient(90deg,
+    var(--skhema-border) 25%,
+    var(--skhema-accent) 50%,
+    var(--skhema-border) 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+}
+
+.skhema-skeleton-text {
+  flex: 1;
+}
+
+.skhema-skeleton-line {
+  height: 12px;
+  background: linear-gradient(90deg,
+    var(--skhema-border) 25%,
+    var(--skhema-accent) 50%,
+    var(--skhema-border) 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
   border-radius: var(--skhema-radius);
-  color: var(--skhema-text-muted);
-  font-size: 13px;
-  text-align: center;
+  margin: 6px 0;
+}
+
+.skhema-skeleton-line.short {
+  width: 40%;
+}
+
+.skhema-skeleton-line.medium {
+  width: 70%;
 }
 
-.skhema-loading::after {
-  content: '...';
-  animation: loading 1.5s infinite;
+.skhema-skeleton-content {
+  margin: 16px 0;
 }
 
-@keyframes loading {
-  0%, 33% { content: '...'; }
-  66% { content: '..'; }
-  100% { content: '.'; }
+@keyframes skeletonPulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.8;
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
 }
 
 /* Responsive design */
@@ -555,7 +760,11 @@ class SkhemaElement extends HTMLElement {
     super();
     this.contentData = null;
     this.componentConnected = false;
+    this.hasTrackedLoad = false;
+    this.themeObserver = null;
+    this.mediaQueryListener = null;
     this.shadow = this.attachShadow({ mode: "closed" });
+    this.renderSkeleton();
   }
   static get observedAttributes() {
     return [
@@ -571,12 +780,19 @@ class SkhemaElement extends HTMLElement {
     if (this.componentConnected) return;
     this.componentConnected = true;
     try {
-      this.render();
-      this.trackLoad();
+      this.addPreconnectHints();
+      requestAnimationFrame(() => {
+        this.render();
+        this.trackLoad();
+        this.setupThemeListeners();
+      });
     } catch (error) {
       this.renderError("Failed to initialize component", error);
     }
   }
+  disconnectedCallback() {
+    this.cleanupThemeListeners();
+  }
   attributeChangedCallback(_name, oldValue, newValue) {
     if (oldValue !== newValue && this.componentConnected) {
       this.render();
@@ -627,7 +843,8 @@ class SkhemaElement extends HTMLElement {
       element_type,
       contributor_id
     );
-    const theme = this.getAttribute("theme") || "auto";
+    const themeAttribute = this.getAttribute("theme") || "auto";
+    const actualTheme = this.getActualTheme(themeAttribute);
     const displayName = this.formatContributorName(contributor_id);
     const initials = this.getInitials(displayName);
     const ariaAttrs = createAriaAttributes(element_type);
@@ -636,8 +853,8 @@ class SkhemaElement extends HTMLElement {
     });
     this.shadow.innerHTML = `
       <style>${styles}</style>
-      
-      <div class="skhema-insight-card" data-theme="${theme}">
+
+      <div class="skhema-insight-card" data-theme="${actualTheme}">
         <div class="skhema-header">
           <div class="skhema-contributor">
             <div class="skhema-avatar" title="${displayName}">
@@ -680,17 +897,78 @@ class SkhemaElement extends HTMLElement {
       });
     }
   }
+  getActualTheme(themeAttribute) {
+    if (themeAttribute === "light" || themeAttribute === "dark") {
+      return themeAttribute;
+    }
+    const htmlElement = document.documentElement;
+    const bodyElement = document.body;
+    const htmlTheme = htmlElement.getAttribute("data-theme") || htmlElement.getAttribute("theme") || htmlElement.className.match(/theme-(\w+)/)?.[1];
+    const bodyTheme = bodyElement.getAttribute("data-theme") || bodyElement.getAttribute("theme") || bodyElement.className.match(/theme-(\w+)/)?.[1];
+    const hasDarkClass = htmlElement.classList.contains("dark") || bodyElement.classList.contains("dark") || htmlElement.classList.contains("dark-mode") || bodyElement.classList.contains("dark-mode");
+    if (hasDarkClass || htmlTheme === "dark" || bodyTheme === "dark") {
+      return "dark";
+    }
+    const computedStyles = window.getComputedStyle(htmlElement);
+    const colorScheme = computedStyles.getPropertyValue("color-scheme");
+    if (colorScheme && colorScheme.includes("dark")) {
+      return "dark";
+    }
+    if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+      return "dark";
+    }
+    return "light";
+  }
   formatContributorName(contributorId) {
     return contributorId.split(/[_-]/).map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
   }
   getInitials(name) {
     return name.split(" ").map((word) => word.charAt(0)).join("").toUpperCase().substring(0, 2);
   }
+  addPreconnectHints() {
+    if (document.querySelector('link[rel="preconnect"][href*="api.skhema.com"]')) {
+      return;
+    }
+    try {
+      const preconnectApi = document.createElement("link");
+      preconnectApi.rel = "preconnect";
+      preconnectApi.href = "https://api.skhema.com";
+      document.head.appendChild(preconnectApi);
+      const dnsPrefetch = document.createElement("link");
+      dnsPrefetch.rel = "dns-prefetch";
+      dnsPrefetch.href = "https://skhema.com";
+      document.head.appendChild(dnsPrefetch);
+    } catch (error) {
+      console.debug("Failed to add preconnect hints:", error);
+    }
+  }
+  renderSkeleton() {
+    const themeAttribute = this.getAttribute("theme") || "auto";
+    const actualTheme = this.getActualTheme(themeAttribute);
+    this.shadow.innerHTML = `
+      <style>${styles}</style>
+
+      <div class="skhema-skeleton" data-theme="${actualTheme}">
+        <div class="skhema-skeleton-header">
+          <div class="skhema-skeleton-avatar"></div>
+          <div class="skhema-skeleton-text">
+            <div class="skhema-skeleton-line medium"></div>
+            <div class="skhema-skeleton-line short"></div>
+          </div>
+        </div>
+        <div class="skhema-skeleton-content">
+          <div class="skhema-skeleton-line"></div>
+          <div class="skhema-skeleton-line"></div>
+          <div class="skhema-skeleton-line medium"></div>
+        </div>
+      </div>
+    `;
+  }
   renderError(title, errors) {
     const errorList = Array.isArray(errors) ? errors : [String(errors)];
     this.shadow.innerHTML = `
       <style>${styles}</style>
-      
+
       <div class="skhema-insight-card">
         <div class="skhema-error">
           <div class="skhema-error-title">Skhema Component Error: ${title}</div>
@@ -727,7 +1005,10 @@ class SkhemaElement extends HTMLElement {
     document.body.appendChild(metaDiv);
   }
   async trackLoad() {
-    if (!shouldTrackAnalytics(this) || !this.contentData) return;
+    if (!shouldTrackAnalytics(this) || !this.contentData || this.hasTrackedLoad) {
+      return;
+    }
+    this.hasTrackedLoad = true;
     const analytics = {
       contributorId: this.contentData.contributor_id,
       elementType: this.contentData.element_type,
@@ -765,6 +1046,46 @@ class SkhemaElement extends HTMLElement {
   refresh() {
     this.render();
   }
+  setupThemeListeners() {
+    const themeAttribute = this.getAttribute("theme");
+    if (themeAttribute === "auto" || !themeAttribute) {
+      if (window.matchMedia) {
+        this.mediaQueryListener = window.matchMedia(
+          "(prefers-color-scheme: dark)"
+        );
+        const handleThemeChange = () => this.updateTheme();
+        this.mediaQueryListener.addEventListener("change", handleThemeChange);
+      }
+      this.themeObserver = new MutationObserver(() => this.updateTheme());
+      this.themeObserver.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ["class", "data-theme", "theme"]
+      });
+      this.themeObserver.observe(document.body, {
+        attributes: true,
+        attributeFilter: ["class", "data-theme", "theme"]
+      });
+    }
+  }
+  cleanupThemeListeners() {
+    if (this.themeObserver) {
+      this.themeObserver.disconnect();
+      this.themeObserver = null;
+    }
+    if (this.mediaQueryListener) {
+      this.mediaQueryListener = null;
+    }
+  }
+  updateTheme() {
+    const themeAttribute = this.getAttribute("theme") || "auto";
+    if (themeAttribute === "auto") {
+      const card = this.shadow.querySelector(".skhema-insight-card");
+      if (card) {
+        const newTheme = this.getActualTheme("auto");
+        card.setAttribute("data-theme", newTheme);
+      }
+    }
+  }
 }
 function registerSkhemaElement() {
   if (typeof window !== "undefined" && !customElements.get("skhema-element")) {