@skhema/web-component 0.0.17 → 0.0.19

package/dist/components/SkhemaElement.d.ts

@@ -4,21 +4,30 @@ export declare class SkhemaElement extends HTMLElement {
     private contentData;
     private componentConnected;
     private hasTrackedLoad;
+    private themeObserver;
+    private mediaQueryListener;
     constructor();
     static get observedAttributes(): (keyof SkhemaElementAttributes)[];
     connectedCallback(): void;
+    disconnectedCallback(): void;
     attributeChangedCallback(_name: keyof SkhemaElementAttributes, oldValue: string | null, newValue: string | null): void;
     private render;
     private getContent;
     private renderContent;
+    private getActualTheme;
     private formatContributorName;
     private getInitials;
+    private addPreconnectHints;
+    private renderSkeleton;
     private renderError;
     private addStructuredData;
     private trackLoad;
     private handleSaveClick;
     getContentData(): ContentData | null;
     refresh(): void;
+    private setupThemeListeners;
+    private cleanupThemeListeners;
+    private updateTheme;
 }
 declare global {
     interface HTMLElementEventMap extends SkhemaElementEventMap {

package/dist/components/SkhemaElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SkhemaElement.d.ts","sourceRoot":"","sources":["../../src/components/SkhemaElement.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EACV,WAAW,EAEX,uBAAuB,EACvB,qBAAqB,EACtB,MAAM,YAAY,CAAA;AA+TnB,qBAAa,aAAc,SAAQ,WAAW;IAC5C,OAAO,CAAC,MAAM,CAAY;IAC1B,OAAO,CAAC,WAAW,CAA2B;IAC9C,OAAO,CAAC,kBAAkB,CAAQ;IAClC,OAAO,CAAC,cAAc,CAAQ;;IAO9B,MAAM,KAAK,kBAAkB,IAAI,CAAC,MAAM,uBAAuB,CAAC,EAAE,CASjE;IAED,iBAAiB;IAYjB,wBAAwB,CACtB,KAAK,EAAE,MAAM,uBAAuB,EACpC,QAAQ,EAAE,MAAM,GAAG,IAAI,EACvB,QAAQ,EAAE,MAAM,GAAG,IAAI;IAOzB,OAAO,CAAC,MAAM;IAwCd,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,aAAa;IAuErB,OAAO,CAAC,qBAAqB;IAQ7B,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,WAAW;IAyBnB,OAAO,CAAC,iBAAiB;YA0BX,SAAS;YAiCT,eAAe;IAkBtB,cAAc,IAAI,WAAW,GAAG,IAAI;IAIpC,OAAO,IAAI,IAAI;CAGvB;AAGD,OAAO,CAAC,MAAM,CAAC;IAEb,UAAU,mBAAoB,SAAQ,qBAAqB;KAAG;IAE9D,UAAU,gBAAiB,SAAQ,OAAO,CAAC,uBAAuB,CAAC;QACjE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;KACvB;IAGD,UAAU,oBAAoB;QAC5B,gBAAgB,EAAE,gBAAgB,CAAA;KACnC;CACF"}
+{"version":3,"file":"SkhemaElement.d.ts","sourceRoot":"","sources":["../../src/components/SkhemaElement.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EACV,WAAW,EAEX,uBAAuB,EACvB,qBAAqB,EACtB,MAAM,YAAY,CAAA;AAuXnB,qBAAa,aAAc,SAAQ,WAAW;IAC5C,OAAO,CAAC,MAAM,CAAY;IAC1B,OAAO,CAAC,WAAW,CAA2B;IAC9C,OAAO,CAAC,kBAAkB,CAAQ;IAClC,OAAO,CAAC,cAAc,CAAQ;IAC9B,OAAO,CAAC,aAAa,CAAgC;IACrD,OAAO,CAAC,kBAAkB,CAA8B;;IASxD,MAAM,KAAK,kBAAkB,IAAI,CAAC,MAAM,uBAAuB,CAAC,EAAE,CASjE;IAED,iBAAiB;IAmBjB,oBAAoB;IAIpB,wBAAwB,CACtB,KAAK,EAAE,MAAM,uBAAuB,EACpC,QAAQ,EAAE,MAAM,GAAG,IAAI,EACvB,QAAQ,EAAE,MAAM,GAAG,IAAI;IAOzB,OAAO,CAAC,MAAM;IAwCd,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,aAAa;IA0ErB,OAAO,CAAC,cAAc;IAmDtB,OAAO,CAAC,qBAAqB;IAQ7B,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,kBAAkB;IAyB1B,OAAO,CAAC,cAAc;IAyBtB,OAAO,CAAC,WAAW;IAyBnB,OAAO,CAAC,iBAAiB;YA0BX,SAAS;YAiCT,eAAe;IAkBtB,cAAc,IAAI,WAAW,GAAG,IAAI;IAIpC,OAAO,IAAI,IAAI;IAItB,OAAO,CAAC,mBAAmB;IA6B3B,OAAO,CAAC,qBAAqB;IAa7B,OAAO,CAAC,WAAW;CAYpB;AAGD,OAAO,CAAC,MAAM,CAAC;IAEb,UAAU,mBAAoB,SAAQ,qBAAqB;KAAG;IAE9D,UAAU,gBAAiB,SAAQ,OAAO,CAAC,uBAAuB,CAAC;QACjE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;KACvB;IAGD,UAAU,oBAAoB;QAC5B,gBAAgB,EAAE,gBAAgB,CAAA;KACnC;CACF"}

package/dist/index.cjs

@@ -94,9 +94,10 @@ class AnalyticsBatcher {
     }
   }
   async sendEmbeds(embeds) {
-    for (const embed of embeds) {
-      try {
-        const data = new URLSearchParams({
+    if (embeds.length === 0) return;
+    try {
+      const payload = {
+        embeds: embeds.map((embed) => ({
           contributor_id: embed.contributorId,
           element_type: embed.elementType,
           content_hash: embed.contentHash,
@@ -105,22 +106,24 @@ class AnalyticsBatcher {
           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);
+        })),
+        batch_size: embeds.length,
+        batch_timestamp: Date.now()
+      };
+      if (navigator.sendBeacon) {
+        navigator.sendBeacon(
+          "https://api.skhema.com/api:XGdoUqHx/component/embed",
+          new Blob([JSON.stringify(payload)], { type: "application/json" })
+        );
+      } else {
+        await sendWithRetry(
+          "https://api.skhema.com/api:XGdoUqHx/component/embed",
+          payload,
+          "json"
+        );
       }
+    } catch (error) {
+      console.debug("Embed tracking failed:", error);
     }
   }
   async sendClicks(clicks) {
@@ -133,11 +136,18 @@ class AnalyticsBatcher {
           source_url: click.source_url,
           timestamp: click.timestamp
         };
-        await sendWithRetry(
-          "https://api.skhema.com/api:XGdoUqHx/component/click",
-          data,
-          "json"
-        );
+        if (navigator.sendBeacon) {
+          navigator.sendBeacon(
+            "https://api.skhema.com/api:XGdoUqHx/component/click",
+            new Blob([JSON.stringify(data)], { type: "application/json" })
+          );
+        } else {
+          await sendWithRetry(
+            "https://api.skhema.com/api:XGdoUqHx/component/click",
+            data,
+            "json"
+          );
+        }
       } catch (error) {
         console.debug("Click tracking failed:", error);
       }
@@ -415,8 +425,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%);
@@ -635,26 +646,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-loading::after {
-  content: '...';
-  animation: loading 1.5s infinite;
+.skhema-skeleton-line.short {
+  width: 40%;
 }
 
-@keyframes loading {
-  0%, 33% { content: '...'; }
-  66% { content: '..'; }
-  100% { content: '.'; }
+.skhema-skeleton-line.medium {
+  width: 70%;
+}
+
+.skhema-skeleton-content {
+  margin: 16px 0;
+}
+
+@keyframes skeletonPulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.8;
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
 }
 
 /* Responsive design */
@@ -707,7 +773,10 @@ class SkhemaElement extends HTMLElement {
     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 [
@@ -723,12 +792,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();
@@ -779,7 +855,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);
@@ -788,8 +865,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}">
@@ -832,17 +909,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>
@@ -920,6 +1058,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")) {