@skhema/embed 0.1.0

package/dist/index.cjs

@@ -0,0 +1,2061 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const types = require("@skhema/types");
+const COMPONENT_COLORS = {
+  diagnosis: {
+    bg: "oklch(0.65 0.06 25 / 0.15)",
+    text: "oklch(0.65 0.06 25)",
+    border: "oklch(0.65 0.06 25 / 0.3)"
+  },
+  method: {
+    bg: "oklch(0.6 0.06 250 / 0.15)",
+    text: "oklch(0.6 0.06 250)",
+    border: "oklch(0.6 0.06 250 / 0.3)"
+  },
+  initiatives: {
+    bg: "oklch(0.6 0.06 155 / 0.15)",
+    text: "oklch(0.6 0.06 155)",
+    border: "oklch(0.6 0.06 155 / 0.3)"
+  },
+  measures: {
+    bg: "oklch(0.6 0.06 300 / 0.15)",
+    text: "oklch(0.6 0.06 300)",
+    border: "oklch(0.6 0.06 300 / 0.3)"
+  },
+  support: {
+    bg: "oklch(0.65 0.06 65 / 0.15)",
+    text: "oklch(0.65 0.06 65)",
+    border: "oklch(0.65 0.06 65 / 0.3)"
+  }
+};
+const SHARED_CARD_STYLES = `
+/* Monospace acronym badge */
+.skhema-acronym-badge {
+  display: inline-flex;
+  align-items: center;
+  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+  font-size: 10px;
+  font-weight: 600;
+  padding: 2px 6px;
+  border-radius: 2px;
+  letter-spacing: 0.02em;
+  flex-shrink: 0;
+}
+
+/* Footer attribution tagline */
+.skhema-footer-attribution {
+  font-size: 11px;
+  color: var(--skhema-text-muted);
+  line-height: 1.4;
+}
+
+.skhema-footer-attribution a {
+  color: var(--skhema-text-muted);
+  text-decoration: underline;
+  text-decoration-color: var(--skhema-border);
+  text-underline-offset: 2px;
+}
+
+.skhema-footer-attribution a:hover {
+  color: var(--skhema-text);
+}
+
+/* Contributor line in footer */
+.skhema-contributor-line {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--skhema-text-muted);
+}
+
+.skhema-contributor-line svg {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+}
+
+/* Save button — primary brand color */
+.skhema-save-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: var(--skhema-primary);
+  color: white;
+  border: none;
+  padding: 6px 14px;
+  border-radius: calc(var(--skhema-radius) + 2px);
+  font-size: 12px;
+  font-weight: 500;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background 0.15s ease;
+  white-space: nowrap;
+}
+
+.skhema-save-btn:hover {
+  background: var(--skhema-primary-hover);
+}
+
+.skhema-save-btn:active {
+  background: var(--skhema-primary-pressed);
+}
+
+.skhema-save-btn:focus {
+  outline: 2px solid var(--skhema-primary);
+  outline-offset: 2px;
+}
+
+.skhema-save-btn::after {
+  content: '\\2192';
+  font-size: 13px;
+}
+`;
+const USER_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>`;
+const ANALYTICS_ENDPOINT = "https://analytics.skhema.com/functions/v1/embed-manage";
+const TRACKING_COOKIE_NAME = "_sk";
+const TRACKING_EXPIRY_HOURS = 24;
+const MAX_TRACKED_ITEMS = 50;
+function getTrackedEmbeds() {
+  try {
+    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: [],
+      componentEmbeds: [],
+      componentClicks: []
+    };
+    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();
+  }
+  addComponentEmbedLoad(analytics) {
+    this.batch.componentEmbeds.push(analytics);
+    this.scheduleBatchSend();
+  }
+  addComponentClick(contentData) {
+    this.batch.componentClicks.push(contentData);
+    this.scheduleBatchSend();
+  }
+  scheduleBatchSend() {
+    if (this.batchTimeout) {
+      clearTimeout(this.batchTimeout);
+    }
+    const totalItems = this.batch.embeds.length + this.batch.clicks.length + this.batch.componentEmbeds.length + this.batch.componentClicks.length;
+    if (totalItems >= 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: [],
+      componentEmbeds: [],
+      componentClicks: []
+    };
+    const hasItems = currentBatch.embeds.length > 0 || currentBatch.clicks.length > 0 || currentBatch.componentEmbeds.length > 0 || currentBatch.componentClicks.length > 0;
+    if (!hasItems) return;
+    if (currentBatch.embeds.length > 0) {
+      await this.sendEmbeds(currentBatch.embeds);
+    }
+    if (currentBatch.clicks.length > 0) {
+      await this.sendClicks(currentBatch.clicks);
+    }
+    if (currentBatch.componentEmbeds.length > 0) {
+      await this.sendComponentEmbeds(currentBatch.componentEmbeds);
+    }
+    if (currentBatch.componentClicks.length > 0) {
+      await this.sendComponentClicks(currentBatch.componentClicks);
+    }
+  }
+  async sendEmbeds(embeds) {
+    if (embeds.length === 0) return;
+    try {
+      const payload = {
+        action: "embed",
+        events: embeds.map((embed) => ({
+          contributor_id: embed.contributorId,
+          element_type: embed.elementType,
+          content_hash: embed.contentHash,
+          content: embed.content,
+          page_url: embed.pageUrl,
+          page_title: embed.pageTitle || "",
+          user_agent: embed.userAgent || ""
+        }))
+      };
+      await sendWithRetry(ANALYTICS_ENDPOINT, payload, "json");
+    } catch (error) {
+      console.debug("Embed tracking failed:", error);
+    }
+  }
+  async sendClicks(clicks) {
+    for (const click of clicks) {
+      try {
+        const data = {
+          action: "click",
+          contributor_id: click.contributor_id,
+          content_hash: click.content_hash,
+          source_url: click.source_url,
+          element_type: click.element_type
+        };
+        fetch(ANALYTICS_ENDPOINT, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(data),
+          credentials: "omit",
+          keepalive: true
+        }).catch(() => {
+        });
+      } catch (error) {
+        console.debug("Click tracking failed:", error);
+      }
+    }
+  }
+  async sendComponentEmbeds(embeds) {
+    if (embeds.length === 0) return;
+    try {
+      const payload = {
+        action: "component_embed",
+        events: embeds.map((embed) => ({
+          contributor_id: embed.contributorId,
+          component_type: embed.componentType,
+          component_hash: embed.componentHash,
+          title: embed.title,
+          elements: embed.elements.map((el) => ({
+            element_type: el.elementType,
+            content: el.content,
+            content_hash: el.contentHash
+          })),
+          page_url: embed.pageUrl,
+          page_title: embed.pageTitle || "",
+          user_agent: embed.userAgent || ""
+        }))
+      };
+      await sendWithRetry(ANALYTICS_ENDPOINT, payload, "json");
+    } catch (error) {
+      console.debug("Component embed tracking failed:", error);
+    }
+  }
+  async sendComponentClicks(clicks) {
+    for (const click of clicks) {
+      try {
+        const data = {
+          action: "component_click",
+          contributor_id: click.contributor_id,
+          component_type: click.component_type,
+          component_hash: click.component_hash,
+          title: click.title,
+          source_url: click.source_url
+        };
+        fetch(ANALYTICS_ENDPOINT, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(data),
+          credentials: "omit",
+          keepalive: true
+        }).catch(() => {
+        });
+      } catch (error) {
+        console.debug("Component click tracking failed:", error);
+      }
+    }
+  }
+  // Ensure batch is sent when page unloads
+  flush() {
+    const hasItems = this.batch.embeds.length > 0 || this.batch.clicks.length > 0 || this.batch.componentEmbeds.length > 0 || this.batch.componentClicks.length > 0;
+    if (hasItems) {
+      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",
+        credentials: "omit",
+        keepalive: true
+      };
+      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 {
+    analyticsBatcher.addClick(contentData);
+  } catch (error) {
+    console.debug("Click tracking failed:", error);
+  }
+}
+async function trackComponentEmbedLoad(analytics) {
+  try {
+    if (hasBeenTracked(analytics.componentHash)) {
+      console.debug(
+        "Component embed already tracked, skipping:",
+        analytics.componentHash
+      );
+      return;
+    }
+    markAsTracked(analytics.componentHash);
+    analyticsBatcher.addComponentEmbedLoad(analytics);
+  } catch (error) {
+    console.debug("Component analytics tracking failed:", error);
+  }
+}
+async function trackComponentClick(contentData) {
+  try {
+    analyticsBatcher.addComponentClick(contentData);
+  } catch (error) {
+    console.debug("Component click tracking failed:", error);
+  }
+}
+function shouldTrackAnalytics(element) {
+  const trackAnalytics = element.getAttribute("track-analytics");
+  return trackAnalytics !== "false";
+}
+function isValidComponentType(componentType) {
+  const validTypes = Object.values(types.COMPONENT_TYPES).map((t) => t.value);
+  return validTypes.includes(componentType);
+}
+function validateElementBelongsToComponent(elementType, componentType) {
+  if (!isValidComponentType(componentType)) return false;
+  const validElements = types.SKHEMA_MAPPING.elementFlow[componentType];
+  if (!validElements) return false;
+  return validElements.some((e) => e.value === elementType);
+}
+function getComponentTypeLabel(componentType) {
+  const type = Object.values(types.COMPONENT_TYPES).find(
+    (t) => t.value === componentType
+  );
+  return type?.label || componentType;
+}
+function getComponentTypeAcronym(componentType) {
+  const type = Object.values(types.COMPONENT_TYPES).find(
+    (t) => t.value === componentType
+  );
+  return type?.acronym || componentType.substring(0, 2).toUpperCase();
+}
+function resolveComponentType(elementType) {
+  for (const [componentValue, elements] of Object.entries(
+    types.SKHEMA_MAPPING.elementFlow
+  )) {
+    if (elements.some((e) => e.value === elementType)) {
+      return componentValue;
+    }
+  }
+  return "diagnosis";
+}
+function getElementTypesForComponent(componentType) {
+  if (!isValidComponentType(componentType)) return [];
+  const elements = types.SKHEMA_MAPPING.elementFlow[componentType];
+  return elements?.map((e) => e.value) || [];
+}
+function generateContentHash(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);
+}
+function generateComponentHash(elements) {
+  const sorted = [...elements].sort((a, b) => {
+    const typeCompare = a.elementType.localeCompare(b.elementType);
+    if (typeCompare !== 0) return typeCompare;
+    return a.content.localeCompare(b.content);
+  });
+  const combined = sorted.map((e) => `${e.elementType}:${e.content}`).join("|");
+  return generateContentHash(combined);
+}
+function sanitizeContent(content) {
+  const htmlEncode = (str) => {
+    const div = document.createElement("div");
+    div.textContent = str;
+    return div.innerHTML;
+  };
+  let sanitized = stripUrls(content);
+  sanitized = htmlEncode(sanitized);
+  sanitized = sanitized.replace(/\n/g, "<br>");
+  sanitized = applyTextWrapping(sanitized);
+  return sanitized;
+}
+function stripUrls(text) {
+  const patterns = [
+    // Standard URLs with protocols
+    /https?:\/\/[^\s<>"{}|\\^`[\]]+/gi,
+    // FTP URLs
+    /ftp:\/\/[^\s<>"{}|\\^`[\]]+/gi,
+    // URLs without protocol but with www
+    /www\.[^\s<>"{}|\\^`[\]]+/gi,
+    // Email-like patterns
+    /[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/gi,
+    // Common domain patterns (anything.com, anything.org, etc.)
+    /(?:^|\s)([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}(?:\/[^\s]*)?/gi
+  ];
+  let stripped = text;
+  patterns.forEach((pattern) => {
+    stripped = stripped.replace(pattern, "");
+  });
+  stripped = stripped.replace(/\s+/g, " ").trim();
+  return stripped;
+}
+function applyTextWrapping(text) {
+  const words = text.split(/(\s+)/);
+  return words.map((word) => {
+    if (/^\s+$/.test(word) || word.includes("<")) {
+      return word;
+    }
+    if (word.length > 30) {
+      return word.replace(/(.{10})/g, "$1​");
+    }
+    return word;
+  }).join("");
+}
+function validateContentSecurity(content) {
+  const issues = [];
+  if (/<script[\s>]/i.test(content)) {
+    issues.push("Script tags detected");
+  }
+  if (/on\w+\s*=/i.test(content)) {
+    issues.push("Event handlers detected");
+  }
+  if (/javascript:/i.test(content)) {
+    issues.push("JavaScript protocol detected");
+  }
+  if (/data:[^,]*script/i.test(content)) {
+    issues.push("Data URL with script detected");
+  }
+  if (/<iframe[\s>]/i.test(content)) {
+    issues.push("Iframe tags detected");
+  }
+  if (/https?:\/\//i.test(content) || /www\./i.test(content)) {
+    issues.push("URLs detected in content");
+  }
+  return {
+    isSecure: issues.length === 0,
+    issues
+  };
+}
+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?.label || elementType;
+}
+function getElementTypeAcronym(elementType) {
+  const type = Object.values(types.ELEMENT_TYPES).find((t) => t.value === elementType);
+  return type?.acronym || elementType.substring(0, 2).toUpperCase();
+}
+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://app.skhema.com/save";
+  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}?type=contributor&contributor_id=${contributorId}&element_type=${elementType}&content_hash=${contentHash}&${params.toString()}`;
+}
+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 generateComponentStructuredData(title, componentType, contributorId, elements, sourceUrl) {
+  const componentLabel = getComponentTypeLabel(componentType);
+  return {
+    "@context": "https://schema.org",
+    "@type": "CreativeWork",
+    name: title,
+    description: `${componentLabel} strategy component`,
+    category: componentLabel,
+    contributor: contributorId,
+    url: generateComponentRedirectUrl(
+      generateContentHash(elements.map((e) => e.content).join("|")),
+      componentType,
+      contributorId
+    ),
+    hasPart: elements.map((el) => ({
+      "@type": "AnalysisContent",
+      text: el.content,
+      analysisType: el.elementType,
+      category: getElementTypeLabel(el.elementType)
+    })),
+    provider: {
+      "@type": "Organization",
+      name: "Skhema",
+      url: "https://skhema.com"
+    },
+    isPartOf: {
+      "@type": "WebPage",
+      url: sourceUrl
+    },
+    dateCreated: (/* @__PURE__ */ new Date()).toISOString(),
+    platform: "Skhema"
+  };
+}
+function generateComponentRedirectUrl(componentHash, componentType, contributorId, options = {}) {
+  const baseUrl = options.baseUrl || "https://app.skhema.com/save";
+  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 || componentType,
+    utm_content: contributorId
+  });
+  return `${baseUrl}?type=component&component_type=${componentType}&component_hash=${componentHash}&contributor_id=${contributorId}&${params.toString()}`;
+}
+function createAriaAttributes(elementType) {
+  const label = getElementTypeLabel(elementType);
+  return {
+    role: "article",
+    "aria-label": `${label} - Strategic element`,
+    "aria-describedby": "skhema-description"
+  };
+}
+const styles$1 = `
+:host {
+  --skhema-primary: hsl(344 57% 54%);
+  --skhema-primary-hover: hsl(344 50% 47%);
+  --skhema-secondary: hsl(345 100% 75%);
+
+  /* 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%);
+  --skhema-surface-subtle: hsl(210 40% 97%);
+
+  /* Shadows */
+  --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.1rem;
+
+  display: block;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Inter', sans-serif;
+  line-height: 1.5;
+  color: var(--skhema-text);
+}
+
+/* Dark mode */
+.skhema-component-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%);
+  --skhema-text: hsl(210 40% 98%);
+  --skhema-text-muted: hsl(215 20.2% 65.1%);
+  --skhema-accent: hsl(217.2 32.6% 17.5%);
+  --skhema-surface-subtle: hsl(217.2 32.6% 12%);
+}
+
+/* Main card */
+.skhema-component-card {
+  position: relative;
+  background: var(--skhema-card);
+  border: 1px solid var(--skhema-border);
+  border-radius: calc(var(--skhema-radius) + 2px);
+  padding: 0;
+  box-shadow: var(--skhema-shadow);
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  max-width: 600px;
+  margin: 8px 0;
+  overflow: hidden;
+}
+
+.skhema-component-card:hover {
+  box-shadow: var(--skhema-shadow-lg);
+  transform: translateY(-1px);
+}
+
+/* Colored top border */
+.skhema-top-border {
+  height: 2px;
+  width: 100%;
+}
+
+/* Header */
+.skhema-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--skhema-border);
+}
+
+.skhema-type-label {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--skhema-text-muted);
+}
+
+.skhema-title-separator {
+  color: var(--skhema-text-muted);
+  font-size: 13px;
+}
+
+.skhema-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--skhema-text);
+}
+
+/* Elements section */
+.skhema-elements {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+/* Element group */
+.skhema-element-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.skhema-element-label {
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--skhema-text-muted);
+}
+
+.skhema-element-content {
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--skhema-text);
+  padding-left: 8px;
+  border-left: 2px solid var(--skhema-border);
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+/* Footer */
+.skhema-footer {
+  padding: 12px 16px;
+  border-top: 1px solid var(--skhema-border);
+}
+
+.skhema-footer-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+${SHARED_CARD_STYLES}
+
+/* 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: calc(var(--skhema-radius) + 2px);
+  font-size: 13px;
+}
+
+.skhema-error-title {
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.skhema-error-list {
+  margin: 0;
+  padding-left: 16px;
+}
+
+/* Skeleton loading state */
+.skhema-skeleton {
+  background: var(--skhema-card);
+  border: 1px solid var(--skhema-border);
+  border-radius: calc(var(--skhema-radius) + 2px);
+  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-badge {
+  width: 32px;
+  height: 20px;
+  border-radius: 2px;
+  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: calc(var(--skhema-radius) + 2px);
+  margin: 6px 0;
+}
+
+.skhema-skeleton-line.short { width: 40%; }
+.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 */
+@media (max-width: 640px) {
+  .skhema-component-card {
+    margin: 4px 0;
+  }
+
+  .skhema-header {
+    padding: 10px 12px;
+    flex-wrap: wrap;
+  }
+
+  .skhema-elements {
+    padding: 12px;
+  }
+
+  .skhema-footer {
+    padding: 10px 12px;
+  }
+
+  .skhema-footer-row {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 8px;
+  }
+
+  .skhema-save-btn {
+    justify-content: center;
+  }
+}
+
+/* Accessibility */
+@media (prefers-reduced-motion: reduce) {
+  .skhema-component-card,
+  .skhema-save-btn {
+    transition: none;
+  }
+}
+
+.skhema-structured-data {
+  display: none !important;
+}
+`;
+class SkhemaComponent extends HTMLElement {
+  constructor() {
+    super();
+    this.contentData = null;
+    this.componentConnected = false;
+    this.hasTrackedLoad = false;
+    this.pendingRender = null;
+    this.themeObserver = null;
+    this.mediaQueryListener = null;
+    this.shadow = this.attachShadow({ mode: "closed" });
+    this.renderSkeleton();
+  }
+  static get observedAttributes() {
+    return [
+      "component-type",
+      "contributor-id",
+      "title",
+      "theme",
+      "track-analytics",
+      "source-url"
+    ];
+  }
+  connectedCallback() {
+    if (this.componentConnected) return;
+    this.componentConnected = true;
+    try {
+      this.addPreconnectHints();
+      this.addEventListener("skhema:element-ready", () => {
+        this.scheduleRender();
+      });
+      this.scheduleRender();
+      this.setupThemeListeners();
+    } catch (error) {
+      this.renderError("Failed to initialize component", error);
+    }
+  }
+  disconnectedCallback() {
+    this.cleanupThemeListeners();
+    if (this.pendingRender !== null) {
+      cancelAnimationFrame(this.pendingRender);
+      this.pendingRender = null;
+    }
+  }
+  attributeChangedCallback(_name, oldValue, newValue) {
+    if (oldValue !== newValue && this.componentConnected) {
+      this.scheduleRender();
+    }
+  }
+  scheduleRender() {
+    if (this.pendingRender !== null) {
+      cancelAnimationFrame(this.pendingRender);
+    }
+    this.pendingRender = requestAnimationFrame(() => {
+      this.pendingRender = null;
+      this.render();
+    });
+  }
+  render() {
+    const validation = this.validateComponentAttributes();
+    if (!validation.isValid) {
+      this.renderError("Invalid component attributes", validation.errors);
+      return;
+    }
+    const componentType = validation.componentType;
+    const contributorId = validation.contributorId;
+    const title = this.getAttribute("title") || "";
+    const childElements = this.gatherChildElements(componentType);
+    if (childElements.length === 0) {
+      this.renderError("Component requires child elements", [
+        "Add <skhema-element> children inside this component"
+      ]);
+      return;
+    }
+    const componentHash = generateComponentHash(
+      childElements.map((el) => ({
+        elementType: el.elementType,
+        content: el.content
+      }))
+    );
+    this.contentData = {
+      contributor_id: contributorId,
+      component_type: componentType,
+      component_hash: componentHash,
+      title,
+      elements: childElements.map((el) => ({
+        element_type: el.elementType,
+        content: el.content,
+        content_hash: el.contentHash
+      })),
+      source_url: this.getAttribute("source-url") || window.location.href,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+      page_title: document.title
+    };
+    this.renderContent(childElements);
+    this.addStructuredData();
+    this.trackLoad();
+  }
+  validateComponentAttributes() {
+    const errors = [];
+    const componentType = this.getAttribute("component-type");
+    const contributorId = this.getAttribute("contributor-id");
+    if (!componentType) {
+      errors.push("Missing required attribute: component-type");
+    } else if (!isValidComponentType(componentType)) {
+      errors.push(`Invalid component-type "${componentType}"`);
+    }
+    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,
+      componentType: isValidComponentType(componentType || "") ? componentType : void 0,
+      contributorId: contributorId || void 0
+    };
+  }
+  gatherChildElements(componentType) {
+    const children = Array.from(
+      this.querySelectorAll("skhema-element")
+    );
+    const elements = [];
+    for (const child of children) {
+      const data = child.getElementData?.();
+      if (!data) continue;
+      if (!validateElementBelongsToComponent(data.elementType, componentType)) {
+        console.warn(
+          `skhema-component: element type "${data.elementType}" does not belong to component type "${componentType}"`
+        );
+      }
+      elements.push(data);
+    }
+    const orderedTypes = getElementTypesForComponent(componentType);
+    elements.sort((a, b) => {
+      const aIdx = orderedTypes.indexOf(a.elementType);
+      const bIdx = orderedTypes.indexOf(b.elementType);
+      const aOrder = aIdx === -1 ? orderedTypes.length : aIdx;
+      const bOrder = bIdx === -1 ? orderedTypes.length : bIdx;
+      return aOrder - bOrder;
+    });
+    return elements;
+  }
+  renderContent(elements) {
+    if (!this.contentData) return;
+    const { component_type, contributor_id, title } = this.contentData;
+    const componentLabel = getComponentTypeLabel(component_type);
+    const acronym = getComponentTypeAcronym(component_type);
+    const colors = COMPONENT_COLORS[component_type];
+    const displayName = this.formatContributorName(contributor_id);
+    const themeAttribute = this.getAttribute("theme") || "auto";
+    const actualTheme = this.getActualTheme(themeAttribute);
+    const redirectUrl = generateComponentRedirectUrl(
+      this.contentData.component_hash,
+      component_type,
+      contributor_id
+    );
+    const badgeStyle = colors ? `background: ${colors.bg}; color: ${colors.text}; border: 1px solid ${colors.border};` : "";
+    const topBorderColor = colors ? colors.text : "var(--skhema-primary)";
+    const groupedElements = this.groupElementsByType(elements);
+    const elementSectionsHtml = groupedElements.map(
+      (group) => `
+        <div class="skhema-element-group">
+          <div class="skhema-element-label">${getElementTypeLabel(group.elementType)}</div>
+          ${group.items.map(
+        (item) => `<div class="skhema-element-content">${sanitizeContent(item.content)}</div>`
+      ).join("")}
+        </div>
+      `
+    ).join("");
+    this.setAttribute("role", "article");
+    this.setAttribute(
+      "aria-label",
+      `${componentLabel} component${title ? ` — ${title}` : ""}`
+    );
+    const titleHtml = title ? `<span class="skhema-title-separator">&mdash;</span><span class="skhema-title">${title}</span>` : "";
+    this.shadow.innerHTML = `
+      <style>${styles$1}</style>
+
+      <div class="skhema-component-card" data-theme="${actualTheme}">
+        <div class="skhema-top-border" style="background: ${topBorderColor};"></div>
+
+        <div class="skhema-header">
+          <span class="skhema-acronym-badge" style="${badgeStyle}" title="${componentLabel}">
+            ${acronym}
+          </span>
+          <span class="skhema-type-label">${componentLabel}</span>
+          ${titleHtml}
+        </div>
+
+        <div class="skhema-elements">
+          ${elementSectionsHtml}
+        </div>
+
+        <div class="skhema-footer">
+          <div class="skhema-footer-row">
+            <span class="skhema-contributor-line">
+              ${USER_ICON_SVG}
+              ${displayName}
+            </span>
+            <a href="${redirectUrl}"
+               class="skhema-save-btn"
+               target="_blank"
+               rel="noopener noreferrer"
+               title="Save this component to Skhema">
+              Save to Skhema
+            </a>
+          </div>
+          <div class="skhema-footer-attribution">
+            Strategy powered by <a href="https://skhema.com" target="_blank" rel="noopener noreferrer">Skhema</a>
+          </div>
+        </div>
+      </div>
+
+      <slot style="display:none;"></slot>
+    `;
+    const saveBtn = this.shadow.querySelector(
+      ".skhema-save-btn"
+    );
+    if (saveBtn) {
+      saveBtn.addEventListener("click", (event) => {
+        this.handleSaveClick(event);
+      });
+    }
+  }
+  groupElementsByType(elements) {
+    const groups = /* @__PURE__ */ new Map();
+    for (const el of elements) {
+      const existing = groups.get(el.elementType);
+      if (existing) {
+        existing.push(el);
+      } else {
+        groups.set(el.elementType, [el]);
+      }
+    }
+    return Array.from(groups.entries()).map(([elementType, items]) => ({
+      elementType,
+      items
+    }));
+  }
+  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(" ");
+  }
+  addPreconnectHints() {
+    if (document.querySelector(
+      'link[rel="preconnect"][href*="analytics.skhema.com"]'
+    )) {
+      return;
+    }
+    try {
+      const preconnectApi = document.createElement("link");
+      preconnectApi.rel = "preconnect";
+      preconnectApi.href = "https://analytics.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$1}</style>
+
+      <div class="skhema-skeleton" data-theme="${actualTheme}">
+        <div class="skhema-skeleton-header">
+          <div class="skhema-skeleton-badge"></div>
+          <div class="skhema-skeleton-text">
+            <div class="skhema-skeleton-line medium"></div>
+          </div>
+        </div>
+        <div class="skhema-skeleton-content">
+          <div class="skhema-skeleton-line short"></div>
+          <div class="skhema-skeleton-line"></div>
+          <div class="skhema-skeleton-line short"></div>
+          <div class="skhema-skeleton-line"></div>
+          <div class="skhema-skeleton-line medium"></div>
+        </div>
+      </div>
+
+      <slot style="display:none;"></slot>
+    `;
+  }
+  renderError(title, errors) {
+    const errorList = Array.isArray(errors) ? errors : [String(errors)];
+    this.shadow.innerHTML = `
+      <style>${styles$1}</style>
+
+      <div class="skhema-component-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>
+
+      <slot style="display:none;"></slot>
+    `;
+    this.dispatchEvent(
+      new CustomEvent("skhema:error", {
+        detail: { error: title, details: errors },
+        bubbles: true
+      })
+    );
+  }
+  addStructuredData() {
+    if (!this.contentData) return;
+    const { component_type, contributor_id, title, elements, source_url } = this.contentData;
+    const structuredData = generateComponentStructuredData(
+      title,
+      component_type,
+      contributor_id,
+      elements.map((el) => ({
+        elementType: el.element_type,
+        content: el.content
+      })),
+      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);
+  }
+  async trackLoad() {
+    if (!shouldTrackAnalytics(this) || !this.contentData || this.hasTrackedLoad) {
+      return;
+    }
+    this.hasTrackedLoad = true;
+    const analytics = {
+      contributorId: this.contentData.contributor_id,
+      componentType: this.contentData.component_type,
+      componentHash: this.contentData.component_hash,
+      title: this.contentData.title,
+      elements: this.contentData.elements.map((el) => ({
+        elementType: el.element_type,
+        content: el.content,
+        contentHash: el.content_hash
+      })),
+      pageUrl: window.location.href,
+      pageTitle: document.title,
+      timestamp: Date.now(),
+      userAgent: navigator.userAgent
+    };
+    await trackComponentEmbedLoad(analytics);
+    this.dispatchEvent(
+      new CustomEvent("skhema:component-load", {
+        detail: analytics,
+        bubbles: true
+      })
+    );
+  }
+  async handleSaveClick(_event) {
+    if (!this.contentData) return;
+    if (shouldTrackAnalytics(this)) {
+      await trackComponentClick(this.contentData);
+    }
+    this.dispatchEvent(
+      new CustomEvent("skhema:component-click", {
+        detail: this.contentData,
+        bubbles: true
+      })
+    );
+  }
+  // Public API
+  getContentData() {
+    return this.contentData;
+  }
+  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-component-card");
+      if (card) {
+        const newTheme = this.getActualTheme("auto");
+        card.setAttribute("data-theme", newTheme);
+      }
+    }
+  }
+}
+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 */
+
+  /* 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.1rem;
+
+  display: block;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Inter', sans-serif;
+  line-height: 1.5;
+  color: var(--skhema-text);
+}
+
+/* Dark mode styles - applied via data-theme attribute */
+.skhema-element-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%);
+  --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 */
+.skhema-element-card {
+  position: relative;
+  background: var(--skhema-card);
+  border: 1px solid var(--skhema-border);
+  border-radius: calc(var(--skhema-radius) + 2px);
+  padding: 0;
+  box-shadow: var(--skhema-shadow);
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  max-width: 600px;
+  margin: 8px 0;
+  overflow: hidden;
+}
+
+.skhema-element-card:hover {
+  box-shadow: var(--skhema-shadow-lg);
+  border-color: var(--skhema-primary);
+  transform: translateY(-1px);
+}
+
+/* Header section with acronym badge + element type label */
+.skhema-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--skhema-border);
+}
+
+/* Content section */
+.skhema-content {
+  padding: 16px;
+}
+
+.skhema-content-text {
+  font-size: 15px;
+  line-height: 1.6;
+  color: var(--skhema-text);
+  margin: 0;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  hyphens: auto;
+  max-width: 100%;
+}
+
+/* Footer section */
+.skhema-footer {
+  padding: 12px 16px;
+  border-top: 1px solid var(--skhema-border);
+}
+
+.skhema-footer-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+${SHARED_CARD_STYLES}
+
+/* Element type label next to badge */
+.skhema-type-label {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--skhema-text);
+}
+
+/* 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: calc(var(--skhema-radius) + 2px);
+  font-size: 13px;
+}
+
+.skhema-error-title {
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.skhema-error-list {
+  margin: 0;
+  padding-left: 16px;
+}
+
+/* Skeleton loading state */
+.skhema-skeleton {
+  background: var(--skhema-card);
+  border: 1px solid var(--skhema-border);
+  border-radius: calc(var(--skhema-radius) + 2px);
+  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-badge {
+  width: 32px;
+  height: 20px;
+  border-radius: 2px;
+  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: calc(var(--skhema-radius) + 2px);
+  margin: 6px 0;
+}
+
+.skhema-skeleton-line.short {
+  width: 40%;
+}
+
+.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 */
+@media (max-width: 640px) {
+  .skhema-element-card {
+    margin: 4px 0;
+  }
+
+  .skhema-header {
+    padding: 10px 12px;
+  }
+
+  .skhema-content {
+    padding: 12px;
+  }
+
+  .skhema-footer {
+    padding: 10px 12px;
+  }
+
+  .skhema-footer-row {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 8px;
+  }
+
+  .skhema-save-btn {
+    justify-content: center;
+  }
+}
+
+/* Accessibility */
+@media (prefers-reduced-motion: reduce) {
+  .skhema-element-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.hasTrackedLoad = false;
+    this.nestedMode = false;
+    this.themeObserver = null;
+    this.mediaQueryListener = null;
+    this.shadow = this.attachShadow({ mode: "closed" });
+    this.renderSkeleton();
+  }
+  static get observedAttributes() {
+    return [
+      "element-type",
+      "contributor-id",
+      "content",
+      "source-url",
+      "theme",
+      "track-analytics"
+    ];
+  }
+  connectedCallback() {
+    if (this.componentConnected) return;
+    this.componentConnected = true;
+    if (this.closest("skhema-component")) {
+      this.nestedMode = true;
+      const validation = validateAttributes(this);
+      if (!validation.isValid) {
+        console.warn(
+          "skhema-element: invalid attributes in nested mode",
+          validation.errors
+        );
+        return;
+      }
+      const content = this.getContent();
+      if (!content.trim()) {
+        console.warn("skhema-element: empty content in nested mode");
+        return;
+      }
+      this.contentData = {
+        contributor_id: validation.contributorId,
+        element_type: validation.elementType,
+        content,
+        content_hash: generateContentHash(content),
+        source_url: this.getAttribute("source-url") || window.location.href,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        page_title: document.title
+      };
+      this.shadow.innerHTML = "";
+      this.dispatchEvent(
+        new CustomEvent("skhema:element-ready", {
+          bubbles: true,
+          composed: true,
+          detail: this.getElementData()
+        })
+      );
+      return;
+    }
+    try {
+      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.nestedMode) {
+      this.render();
+    }
+  }
+  /**
+   * Returns element data for parent <skhema-component> consumption.
+   */
+  getElementData() {
+    if (!this.contentData) return null;
+    return {
+      elementType: this.contentData.element_type,
+      content: this.contentData.content,
+      contentHash: this.contentData.content_hash
+    };
+  }
+  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;
+    }
+    const securityValidation = validateContentSecurity(content);
+    if (!securityValidation.isSecure) {
+      this.renderError(
+        "Content security validation failed",
+        securityValidation.issues
+      );
+      return;
+    }
+    this.contentData = {
+      contributor_id: validation.contributorId,
+      element_type: validation.elementType,
+      content,
+      content_hash: generateContentHash(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 themeAttribute = this.getAttribute("theme") || "auto";
+    const actualTheme = this.getActualTheme(themeAttribute);
+    const displayName = this.formatContributorName(contributor_id);
+    const componentType = resolveComponentType(element_type);
+    const acronym = getComponentTypeAcronym(componentType);
+    const colors = COMPONENT_COLORS[componentType];
+    const ariaAttrs = createAriaAttributes(element_type);
+    Object.entries(ariaAttrs).forEach(([key, value]) => {
+      this.setAttribute(key, value);
+    });
+    const badgeStyle = colors ? `background: ${colors.bg}; color: ${colors.text}; border: 1px solid ${colors.border};` : "";
+    this.shadow.innerHTML = `
+      <style>${styles}</style>
+
+      <div class="skhema-element-card" data-theme="${actualTheme}">
+        <div class="skhema-header">
+          <span class="skhema-acronym-badge" style="${badgeStyle}" title="${label}">
+            ${acronym}
+          </span>
+          <span class="skhema-type-label">${label}</span>
+        </div>
+
+        <div class="skhema-content">
+          <div class="skhema-content-text">${sanitizeContent(content)}</div>
+        </div>
+
+        <div class="skhema-footer">
+          <div class="skhema-footer-row">
+            <span class="skhema-contributor-line">
+              ${USER_ICON_SVG}
+              ${displayName}
+            </span>
+            <a href="${redirectUrl}"
+               class="skhema-save-btn"
+               target="_blank"
+               rel="noopener noreferrer"
+               title="Save this element to Skhema">
+              Save to Skhema
+            </a>
+          </div>
+          <div class="skhema-footer-attribution">
+            Strategy powered by <a href="https://skhema.com" target="_blank" rel="noopener noreferrer">Skhema</a>
+          </div>
+        </div>
+      </div>
+    `;
+    const saveBtn = this.shadow.querySelector(
+      ".skhema-save-btn"
+    );
+    if (saveBtn) {
+      saveBtn.addEventListener("click", (event) => {
+        this.handleSaveClick(event);
+      });
+    }
+  }
+  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(" ");
+  }
+  addPreconnectHints() {
+    if (document.querySelector(
+      'link[rel="preconnect"][href*="analytics.skhema.com"]'
+    )) {
+      return;
+    }
+    try {
+      const preconnectApi = document.createElement("link");
+      preconnectApi.rel = "preconnect";
+      preconnectApi.href = "https://analytics.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-badge"></div>
+          <div class="skhema-skeleton-text">
+            <div class="skhema-skeleton-line medium"></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-element-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 || this.hasTrackedLoad) {
+      return;
+    }
+    this.hasTrackedLoad = true;
+    const analytics = {
+      contributorId: this.contentData.contributor_id,
+      elementType: this.contentData.element_type,
+      contentHash: this.contentData.content_hash,
+      content: this.contentData.content,
+      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() {
+    if (!this.nestedMode) {
+      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-element-card");
+      if (card) {
+        const newTheme = this.getActualTheme("auto");
+        card.setAttribute("data-theme", newTheme);
+      }
+    }
+  }
+}
+function registerSkhemaElement() {
+  if (typeof window !== "undefined" && !customElements.get("skhema-element")) {
+    customElements.define(
+      "skhema-element",
+      SkhemaElement
+    );
+  }
+}
+function registerSkhemaComponent() {
+  if (typeof window !== "undefined" && !customElements.get("skhema-component")) {
+    customElements.define(
+      "skhema-component",
+      SkhemaComponent
+    );
+  }
+}
+if (typeof window !== "undefined") {
+  if (!customElements.get("skhema-element")) {
+    customElements.define(
+      "skhema-element",
+      SkhemaElement
+    );
+  }
+  if (!customElements.get("skhema-component")) {
+    customElements.define(
+      "skhema-component",
+      SkhemaComponent
+    );
+  }
+}
+exports.SkhemaComponent = SkhemaComponent;
+exports.SkhemaElement = SkhemaElement;
+exports.default = SkhemaElement;
+exports.generateComponentHash = generateComponentHash;
+exports.generateComponentRedirectUrl = generateComponentRedirectUrl;
+exports.generateComponentStructuredData = generateComponentStructuredData;
+exports.generateRedirectUrl = generateRedirectUrl;
+exports.generateStructuredData = generateStructuredData;
+exports.getComponentTypeAcronym = getComponentTypeAcronym;
+exports.getComponentTypeLabel = getComponentTypeLabel;
+exports.getElementTypeAcronym = getElementTypeAcronym;
+exports.getElementTypeLabel = getElementTypeLabel;
+exports.isValidComponentType = isValidComponentType;
+exports.isValidElementType = isValidElementType;
+exports.registerSkhemaComponent = registerSkhemaComponent;
+exports.registerSkhemaElement = registerSkhemaElement;
+exports.resolveComponentType = resolveComponentType;
+exports.shouldTrackAnalytics = shouldTrackAnalytics;
+exports.trackComponentClick = trackComponentClick;
+exports.trackComponentEmbedLoad = trackComponentEmbedLoad;
+exports.validateAttributes = validateAttributes;
+exports.validateElementBelongsToComponent = validateElementBelongsToComponent;
+//# sourceMappingURL=index.cjs.map