@skhema/web-component 0.0.9

package/dist/index.cjs

@@ -0,0 +1,675 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const types = require("@skhema/types");
+function isValidElementType(elementType) {
+  const validTypes = Object.values(types.ELEMENT_TYPES).map((type) => type.value);
+  return validTypes.includes(elementType);
+}
+function validateAttributes(element) {
+  const errors = [];
+  const elementType = element.getAttribute("element-type");
+  const contributorId = element.getAttribute("contributor-id");
+  if (!elementType) {
+    errors.push("Missing required attribute: element-type");
+  } else if (!isValidElementType(elementType)) {
+    const validTypes = Object.values(types.ELEMENT_TYPES).map((t) => t.value).join(", ");
+    errors.push(`Invalid element-type "${elementType}". Valid types: ${validTypes}`);
+  }
+  if (!contributorId) {
+    errors.push("Missing required attribute: contributor-id");
+  } else if (contributorId.trim().length === 0) {
+    errors.push("contributor-id cannot be empty");
+  }
+  return {
+    isValid: errors.length === 0,
+    errors,
+    elementType: isValidElementType(elementType || "") ? elementType : void 0,
+    contributorId: contributorId || void 0
+  };
+}
+function getElementTypeLabel(elementType) {
+  const type = Object.values(types.ELEMENT_TYPES).find((t) => t.value === elementType);
+  return (type == null ? void 0 : type.label) || elementType;
+}
+function getElementTypeAcronym(elementType) {
+  const type = Object.values(types.ELEMENT_TYPES).find((t) => t.value === elementType);
+  return (type == null ? void 0 : type.acronym) || elementType.substring(0, 2).toUpperCase();
+}
+function generateContentHash$1(content) {
+  let hash = 0;
+  const cleanContent = content.trim().substring(0, 200);
+  for (let i = 0; i < cleanContent.length; i++) {
+    const char = cleanContent.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash = hash & hash;
+  }
+  return Math.abs(hash).toString(36).substring(0, 12);
+}
+async function trackEmbedLoad(analytics) {
+  try {
+    const data = new URLSearchParams({
+      contributor_id: analytics.contributorId,
+      element_type: analytics.elementType,
+      content_hash: analytics.contentHash,
+      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", {
+        method: "POST",
+        body: data,
+        keepalive: true
+      }).catch(() => {
+      });
+    }
+  } 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
+    };
+    if (navigator.sendBeacon) {
+      navigator.sendBeacon(
+        "https://api.skhema.com/api:XGdoUqHx/component/click",
+        JSON.stringify(data)
+      );
+    } else {
+      fetch("https://api.skhema.com/api:XGdoUqHx/component/click", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(data),
+        keepalive: true
+      }).catch(() => {
+      });
+    }
+  } catch (error) {
+    console.debug("Click tracking failed:", error);
+  }
+}
+function shouldTrackAnalytics(element) {
+  const trackAnalytics = element.getAttribute("track-analytics");
+  return trackAnalytics !== "false";
+}
+function generateStructuredData(content, elementType, contributorId, sourceUrl) {
+  return {
+    "@context": "https://schema.org",
+    "@type": "AnalysisContent",
+    "text": content,
+    "analysisType": elementType,
+    "category": getElementTypeLabel(elementType),
+    "contributor": contributorId,
+    "url": generateRedirectUrl(content, elementType, contributorId),
+    "provider": {
+      "@type": "Organization",
+      "name": "Skhema",
+      "url": "https://skhema.com"
+    },
+    "isPartOf": {
+      "@type": "WebPage",
+      "url": sourceUrl
+    },
+    "dateCreated": (/* @__PURE__ */ new Date()).toISOString(),
+    "platform": "Skhema"
+  };
+}
+function generateRedirectUrl(content, elementType, contributorId, options = {}) {
+  const baseUrl = options.baseUrl || "https://api.skhema.com/api:XGdoUqHx/component/redirect";
+  const contentHash = generateContentHash(content);
+  const sourceUrl = encodeURIComponent(window.location.href);
+  const timestamp = Date.now();
+  const params = new URLSearchParams({
+    source: sourceUrl,
+    t: timestamp.toString(),
+    utm_source: options.utmSource || "web_component",
+    utm_medium: options.utmMedium || "embedded",
+    utm_campaign: options.utmCampaign || elementType,
+    utm_content: contributorId
+  });
+  return `${baseUrl}?contributor_id=${contributorId}&element_type=${elementType}&content_hash=${contentHash}&${params.toString()}`;
+}
+function generateContentHash(content) {
+  return btoa(content.substring(0, 50)).replace(/[^a-zA-Z0-9]/g, "").substring(0, 12);
+}
+function createMetaTags(content, elementType, contributorId) {
+  const label = getElementTypeLabel(elementType);
+  return `
+    <div itemscope itemtype="https://schema.org/AnalysisContent" style="display:none;">
+      <meta itemprop="analysisType" content="${elementType}">
+      <meta itemprop="text" content="${content}">
+      <meta itemprop="contributor" content="${contributorId}">
+      <meta itemprop="category" content="${label}">
+      <meta itemprop="platform" content="Skhema">
+    </div>
+  `;
+}
+function createAriaAttributes(elementType) {
+  const label = getElementTypeLabel(elementType);
+  return {
+    "role": "article",
+    "aria-label": `${label} - Strategic insight`,
+    "aria-describedby": "skhema-description"
+  };
+}
+const styles = `
+:host {
+  /* Skhema Brand Colors - matching UI library */
+  --skhema-primary: hsl(344 57% 54%);  /* #cd476a */
+  --skhema-primary-hover: hsl(344 50% 47%);  /* #b53d5e */
+  --skhema-primary-pressed: hsl(343 50% 41%);  /* #9d3552 */
+  --skhema-secondary: hsl(345 100% 75%);  /* #ff82a2 */
+  --skhema-gradient: linear-gradient(135deg, hsl(344 57% 54%) 0%, hsl(345 100% 75%) 100%);
+  
+  /* Light mode colors */
+  --skhema-bg: hsl(0 0% 100%);
+  --skhema-card: hsl(0 0% 100%);
+  --skhema-border: hsl(214.3 31.8% 91.4%);
+  --skhema-text: hsl(222.2 84% 4.9%);
+  --skhema-text-muted: hsl(215.4 16.3% 46.9%);
+  --skhema-accent: hsl(210 40% 96%);
+  
+  /* Shadows matching UI library */
+  --skhema-shadow: 0 1px 3px 0 hsl(0 0 0 / 0.1), 0 1px 2px -1px hsl(0 0 0 / 0.1);
+  --skhema-shadow-md: 0 4px 6px -1px hsl(0 0 0 / 0.1), 0 2px 4px -2px hsl(0 0 0 / 0.1);
+  --skhema-shadow-lg: 0 10px 15px -3px hsl(0 0 0 / 0.1), 0 4px 6px -4px hsl(0 0 0 / 0.1);
+  --skhema-radius: 0.375rem;
+  
+  display: block;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Inter', sans-serif;
+  line-height: 1.5;
+  color: var(--skhema-text);
+}
+
+:host([theme="dark"]) {
+  /* Dark mode colors */
+  --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%);
+  --skhema-text: hsl(210 40% 98%);
+  --skhema-text-muted: hsl(215 20.2% 65.1%);
+  --skhema-accent: hsl(217.2 32.6% 17.5%);
+}
+
+/* Main component card - inspired by your design */
+.skhema-insight-card {
+  position: relative;
+  background: var(--skhema-card);
+  border: 1px solid var(--skhema-border);
+  border-radius: calc(var(--skhema-radius) * 2);
+  padding: 16px;
+  box-shadow: var(--skhema-shadow);
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  max-width: 600px;
+  margin: 8px 0;
+}
+
+.skhema-insight-card:hover {
+  box-shadow: var(--skhema-shadow-lg);
+  border-color: var(--skhema-primary);
+  transform: translateY(-1px);
+}
+
+/* Header section with contributor info */
+.skhema-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+  gap: 12px;
+}
+
+.skhema-contributor {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+}
+
+.skhema-avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: var(--skhema-gradient);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  font-size: 14px;
+  color: white;
+  flex-shrink: 0;
+}
+
+.skhema-contributor-info {
+  min-width: 0;
+  flex: 1;
+}
+
+.skhema-contributor-name {
+  font-weight: 500;
+  font-size: 14px;
+  color: var(--skhema-text);
+  margin: 0;
+  line-height: 1.2;
+}
+
+.skhema-contributor-role {
+  font-size: 12px;
+  color: var(--skhema-text-muted);
+  margin: 0;
+  line-height: 1.2;
+}
+
+/* Element type badge */
+.skhema-element-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 8px;
+  background: var(--skhema-accent);
+  border: 1px solid var(--skhema-border);
+  border-radius: var(--skhema-radius);
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--skhema-text-muted);
+  text-transform: capitalize;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+/* Content section */
+.skhema-content {
+  margin: 12px 0 16px 0;
+  padding: 0;
+}
+
+.skhema-content-text {
+  font-size: 15px;
+  line-height: 1.6;
+  color: var(--skhema-text);
+  margin: 0;
+  font-style: italic;
+  position: relative;
+}
+
+.skhema-content-text::before {
+  content: '"';
+  color: var(--skhema-primary);
+  font-size: 20px;
+  font-weight: 600;
+  margin-right: 4px;
+}
+
+.skhema-content-text::after {
+  content: '"';
+  color: var(--skhema-primary);
+  font-size: 20px;
+  font-weight: 600;
+  margin-left: 4px;
+}
+
+/* Footer section */
+.skhema-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding-top: 12px;
+  border-top: 1px solid var(--skhema-border);
+}
+
+.skhema-attribution {
+  font-size: 11px;
+  color: var(--skhema-text-muted);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.skhema-attribution a {
+  color: var(--skhema-primary);
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.skhema-attribution a:hover {
+  text-decoration: underline;
+}
+
+/* Save button with gradient and arrow */
+.skhema-save-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: var(--skhema-gradient);
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: var(--skhema-radius);
+  font-size: 13px;
+  font-weight: 500;
+  text-decoration: none;
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: var(--skhema-shadow);
+  white-space: nowrap;
+}
+
+.skhema-save-btn:hover {
+  transform: translateY(-1px);
+  box-shadow: var(--skhema-shadow-md);
+}
+
+.skhema-save-btn:active {
+  transform: translateY(0);
+}
+
+.skhema-save-btn:focus {
+  outline: 2px solid var(--skhema-primary);
+  outline-offset: 2px;
+}
+
+.skhema-save-btn::after {
+  content: '→';
+  transition: transform 0.2s ease;
+}
+
+.skhema-save-btn:hover::after {
+  transform: translateX(2px);
+}
+
+/* Error state */
+.skhema-error {
+  background: hsl(0 93% 94%);
+  border: 1px solid hsl(0 84% 60%);
+  color: hsl(0 74% 42%);
+  padding: 12px;
+  border-radius: var(--skhema-radius);
+  font-size: 13px;
+}
+
+.skhema-error-title {
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.skhema-error-list {
+  margin: 0;
+  padding-left: 16px;
+}
+
+/* Loading state */
+.skhema-loading {
+  background: var(--skhema-accent);
+  border: 1px solid var(--skhema-border);
+  padding: 12px;
+  border-radius: var(--skhema-radius);
+  color: var(--skhema-text-muted);
+  font-size: 13px;
+  text-align: center;
+}
+
+.skhema-loading::after {
+  content: '...';
+  animation: loading 1.5s infinite;
+}
+
+@keyframes loading {
+  0%, 33% { content: '...'; }
+  66% { content: '..'; }
+  100% { content: '.'; }
+}
+
+/* Responsive design */
+@media (max-width: 640px) {
+  .skhema-insight-card {
+    margin: 4px 0;
+    padding: 12px;
+  }
+  
+  .skhema-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+  
+  .skhema-footer {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 8px;
+  }
+  
+  .skhema-save-btn {
+    justify-content: center;
+  }
+}
+
+/* Accessibility */
+@media (prefers-reduced-motion: reduce) {
+  .skhema-insight-card,
+  .skhema-save-btn {
+    transition: none;
+  }
+  
+  .skhema-save-btn::after {
+    transition: none;
+  }
+  
+  .skhema-save-btn:hover::after {
+    transform: none;
+  }
+}
+
+.skhema-structured-data {
+  display: none !important;
+}
+`;
+class SkhemaElement extends HTMLElement {
+  constructor() {
+    super();
+    this.contentData = null;
+    this.componentConnected = false;
+    this.shadow = this.attachShadow({ mode: "closed" });
+  }
+  static get observedAttributes() {
+    return ["element-type", "contributor-id", "content", "source-url", "theme", "track-analytics"];
+  }
+  connectedCallback() {
+    if (this.componentConnected) return;
+    this.componentConnected = true;
+    try {
+      this.render();
+      this.trackLoad();
+    } catch (error) {
+      this.renderError("Failed to initialize component", error);
+    }
+  }
+  attributeChangedCallback(_name, oldValue, newValue) {
+    if (oldValue !== newValue && this.componentConnected) {
+      this.render();
+    }
+  }
+  render() {
+    const validation = validateAttributes(this);
+    if (!validation.isValid) {
+      this.renderError("Invalid component attributes", validation.errors);
+      return;
+    }
+    const content = this.getContent();
+    if (!content.trim()) {
+      this.renderError("Component requires content", ["Add content between the opening and closing tags, or use the content attribute"]);
+      return;
+    }
+    this.contentData = {
+      contributor_id: validation.contributorId,
+      element_type: validation.elementType,
+      content,
+      content_hash: generateContentHash$1(content),
+      source_url: this.getAttribute("source-url") || window.location.href,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+      page_title: document.title
+    };
+    this.renderContent();
+    this.addStructuredData();
+  }
+  getContent() {
+    return this.getAttribute("content") || this.textContent || "";
+  }
+  renderContent() {
+    if (!this.contentData) return;
+    const { element_type, contributor_id, content } = this.contentData;
+    const label = getElementTypeLabel(element_type);
+    const redirectUrl = generateRedirectUrl(content, element_type, contributor_id);
+    const theme = this.getAttribute("theme") || "auto";
+    const displayName = this.formatContributorName(contributor_id);
+    const initials = this.getInitials(displayName);
+    const ariaAttrs = createAriaAttributes(element_type);
+    Object.entries(ariaAttrs).forEach(([key, value]) => {
+      this.setAttribute(key, value);
+    });
+    this.shadow.innerHTML = `
+      <style>${styles}</style>
+      
+      <div class="skhema-insight-card" data-theme="${theme}">
+        <div class="skhema-header">
+          <div class="skhema-contributor">
+            <div class="skhema-avatar" title="${displayName}">
+              ${initials}
+            </div>
+            <div class="skhema-contributor-info">
+              <div class="skhema-contributor-name">${displayName}</div>
+              <div class="skhema-contributor-role">Strategy Insight</div>
+            </div>
+          </div>
+          <div class="skhema-element-badge" title="${label}">
+            ${label}
+          </div>
+        </div>
+        
+        <div class="skhema-content">
+          <div class="skhema-content-text">${content}</div>
+        </div>
+        
+        <div class="skhema-footer">
+          <div class="skhema-attribution">
+            Powered by <a href="https://skhema.com" target="_blank" rel="noopener noreferrer">Skhema</a>
+          </div>
+          <a href="${redirectUrl}" 
+             class="skhema-save-btn" 
+             target="_blank"
+             rel="noopener noreferrer"
+             title="Save this insight to Skhema">
+            Save to Skhema
+          </a>
+        </div>
+      </div>
+    `;
+    const saveBtn = this.shadow.querySelector(".skhema-save-btn");
+    if (saveBtn) {
+      saveBtn.addEventListener("click", (event) => {
+        this.handleSaveClick(event);
+      });
+    }
+  }
+  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);
+  }
+  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>
+          <ul class="skhema-error-list">
+            ${errorList.map((error) => `<li>${error}</li>`).join("")}
+          </ul>
+        </div>
+      </div>
+    `;
+    this.dispatchEvent(new CustomEvent("skhema:error", {
+      detail: { error: title, details: errors },
+      bubbles: true
+    }));
+  }
+  addStructuredData() {
+    if (!this.contentData) return;
+    const { content, element_type, contributor_id, source_url } = this.contentData;
+    const structuredData = generateStructuredData(content, element_type, contributor_id, source_url);
+    const script = document.createElement("script");
+    script.type = "application/ld+json";
+    script.textContent = JSON.stringify(structuredData);
+    script.className = "skhema-structured-data";
+    document.head.appendChild(script);
+    const metaDiv = document.createElement("div");
+    metaDiv.innerHTML = createMetaTags(content, element_type, contributor_id);
+    metaDiv.className = "skhema-structured-data";
+    document.body.appendChild(metaDiv);
+  }
+  async trackLoad() {
+    if (!shouldTrackAnalytics(this) || !this.contentData) return;
+    const analytics = {
+      contributorId: this.contentData.contributor_id,
+      elementType: this.contentData.element_type,
+      contentHash: this.contentData.content_hash,
+      pageUrl: window.location.href,
+      pageTitle: document.title,
+      timestamp: Date.now(),
+      userAgent: navigator.userAgent
+    };
+    await trackEmbedLoad(analytics);
+    this.dispatchEvent(new CustomEvent("skhema:load", {
+      detail: analytics,
+      bubbles: true
+    }));
+  }
+  async handleSaveClick(_event) {
+    if (!this.contentData) return;
+    if (shouldTrackAnalytics(this)) {
+      await trackClick(this.contentData);
+    }
+    this.dispatchEvent(new CustomEvent("skhema:click", {
+      detail: this.contentData,
+      bubbles: true
+    }));
+  }
+  // Public API methods
+  getContentData() {
+    return this.contentData;
+  }
+  refresh() {
+    this.render();
+  }
+}
+function registerSkhemaElement() {
+  if (typeof window !== "undefined" && !customElements.get("skhema-element")) {
+    customElements.define("skhema-element", SkhemaElement);
+  }
+}
+if (typeof window !== "undefined" && !customElements.get("skhema-element")) {
+  customElements.define("skhema-element", SkhemaElement);
+}
+exports.SkhemaElement = SkhemaElement;
+exports.default = SkhemaElement;
+exports.generateContentHash = generateContentHash$1;
+exports.generateRedirectUrl = generateRedirectUrl;
+exports.generateStructuredData = generateStructuredData;
+exports.getElementTypeAcronym = getElementTypeAcronym;
+exports.getElementTypeLabel = getElementTypeLabel;
+exports.isValidElementType = isValidElementType;
+exports.registerSkhemaElement = registerSkhemaElement;
+exports.shouldTrackAnalytics = shouldTrackAnalytics;
+exports.validateAttributes = validateAttributes;
+//# sourceMappingURL=index.cjs.map