@skhema/embed 0.1.9 → 0.1.11

package/dist/index.cjs

@@ -1,40 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const validation = require("./validation-CNWaQfh_.cjs");
-function readAuthorAttribution(element) {
-  const authorName = element.getAttribute("author-name") || element.getAttribute("contributor-name");
-  if (!authorName?.trim()) {
-    return null;
-  }
-  const authorSlug = element.getAttribute("author-slug")?.trim();
-  return {
-    authorName: authorName.trim(),
-    authorSlug: authorSlug || void 0
-  };
-}
-function escapeHtml(text) {
-  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
-}
-function formatAuthorAttributionHtml(authorName, authorSlug) {
-  const label = `By ${escapeHtml(authorName)}`;
-  if (authorSlug) {
-    return `<a href="https://skhema.com/contributors/${encodeURIComponent(authorSlug)}" class="skhema-author-link" target="_blank" rel="noopener noreferrer">${label}</a>`;
-  }
-  return `<span class="skhema-author-text">${label}</span>`;
-}
-function formatContributorIdFallback(contributorId) {
-  return contributorId.split(/[_-]/).map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
-}
-function resolveAuthorFooterHtml(element, contributorId) {
-  const attribution = readAuthorAttribution(element);
-  if (attribution) {
-    return formatAuthorAttributionHtml(
-      attribution.authorName,
-      attribution.authorSlug
-    );
-  }
-  return `<span class="skhema-author-text">By ${escapeHtml(formatContributorIdFallback(contributorId))}</span>`;
-}
+const render = require("./index-B8ZF3snD.cjs");
+const tokens = require("./tokens-BxpYMhDq.cjs");
 const ANALYTICS_ENDPOINT = "https://analytics.skhema.com/functions/v1/embed-manage";
 const TRACKING_COOKIE_NAME = "_sk";
 const TRACKING_EXPIRY_HOURS = 24;
@@ -427,82 +394,13 @@ function generateComponentHash(elements) {
   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 generateStructuredData(content, elementType, contributorId, sourceUrl) {
   return {
     "@context": "https://schema.org",
     "@type": "AnalysisContent",
     text: content,
     analysisType: elementType,
-    category: validation.getElementTypeLabel(elementType),
+    category: tokens.getElementTypeLabel(elementType),
     contributor: contributorId,
     url: generateRedirectUrl(content, elementType, contributorId),
     provider: {
@@ -534,7 +432,7 @@ function generateRedirectUrl(content, elementType, contributorId, options = {})
   return `${baseUrl}?type=contributor&contributor_id=${contributorId}&element_type=${elementType}&content_hash=${contentHash}&${params.toString()}`;
 }
 function createMetaTags(content, elementType, contributorId) {
-  const label = validation.getElementTypeLabel(elementType);
+  const label = tokens.getElementTypeLabel(elementType);
   return `
     <div itemscope itemtype="https://schema.org/AnalysisContent" style="display:none;">
       <meta itemprop="analysisType" content="${elementType}">
@@ -546,7 +444,7 @@ function createMetaTags(content, elementType, contributorId) {
   `;
 }
 function generateComponentStructuredData(title, componentType, contributorId, elements, sourceUrl) {
-  const componentLabel = validation.getComponentTypeLabel(componentType);
+  const componentLabel = tokens.getComponentTypeLabel(componentType);
   return {
     "@context": "https://schema.org",
     "@type": "CreativeWork",
@@ -563,7 +461,7 @@ function generateComponentStructuredData(title, componentType, contributorId, el
       "@type": "AnalysisContent",
       text: el.content,
       analysisType: el.elementType,
-      category: validation.getElementTypeLabel(el.elementType)
+      category: tokens.getElementTypeLabel(el.elementType)
     })),
     provider: {
       "@type": "Organization",
@@ -593,7 +491,7 @@ function generateComponentRedirectUrl(componentHash, componentType, contributorI
   return `${baseUrl}?type=component&component_type=${componentType}&component_hash=${componentHash}&contributor_id=${contributorId}&${params.toString()}`;
 }
 function createAriaAttributes(elementType) {
-  const label = validation.getElementTypeLabel(elementType);
+  const label = tokens.getElementTypeLabel(elementType);
   return {
     role: "article",
     "aria-label": `${label} - Strategic element`,
@@ -627,7 +525,7 @@ const styles$1 = `
   color: var(--skhema-text);
 }
 
-/* Dark mode */
+/* Dark mode (skeleton/error only) */
 .skhema-component-card[data-theme="dark"],
 .skhema-skeleton[data-theme="dark"] {
   --skhema-bg: hsl(222.2 84% 4.9%);
@@ -639,106 +537,40 @@ const styles$1 = `
   --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;
+/* Progressive enhancement over the inline-styled, rendered card. Inline styles
+   win on specificity, so the changed properties use !important to layer on. */
+.skhema-card {
+  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.skhema-component-card:hover {
-  box-shadow: var(--skhema-shadow-lg);
+.skhema-card:hover {
+  box-shadow: ${tokens.CARD_SHADOW_LG} !important;
   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-save-btn {
+  transition: background 0.15s ease;
 }
 
-.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;
+.skhema-save-btn:hover {
+  background: ${tokens.PRIMARY_HOVER_HEX} !important;
 }
 
-/* Footer */
-.skhema-footer {
-  padding: 12px 16px;
-  border-top: 1px solid var(--skhema-border);
+.skhema-save-btn:active {
+  background: ${tokens.PRIMARY_PRESSED_HEX} !important;
 }
 
-.skhema-footer-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
+/* Error card wrapper (browser-only state) */
+.skhema-component-card {
+  background: var(--skhema-card);
+  border: 1px solid var(--skhema-border);
+  border-radius: calc(var(--skhema-radius) + 2px);
+  box-shadow: var(--skhema-shadow);
+  max-width: 600px;
+  margin: 8px 0;
+  overflow: hidden;
 }
 
-${validation.SHARED_CARD_STYLES}
-
 /* Error state */
 .skhema-error {
   background: hsl(0 93% 94%);
@@ -823,39 +655,9 @@ ${validation.SHARED_CARD_STYLES}
   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-card,
   .skhema-save-btn {
     transition: none;
   }
@@ -932,13 +734,13 @@ class SkhemaComponent extends HTMLElement {
     });
   }
   render() {
-    const validation2 = this.validateComponentAttributes();
-    if (!validation2.isValid) {
-      this.renderError("Invalid component attributes", validation2.errors);
+    const validation = this.validateComponentAttributes();
+    if (!validation.isValid) {
+      this.renderError("Invalid component attributes", validation.errors);
       return;
     }
-    const componentType = validation2.componentType;
-    const contributorId = validation2.contributorId;
+    const componentType = validation.componentType;
+    const contributorId = validation.contributorId;
     const title = this.getAttribute("title") || "";
     const childElements = this.gatherChildElements(componentType);
     if (childElements.length === 0) {
@@ -977,7 +779,7 @@ class SkhemaComponent extends HTMLElement {
     const contributorId = this.getAttribute("contributor-id");
     if (!componentType) {
       errors.push("Missing required attribute: component-type");
-    } else if (!validation.isValidComponentType(componentType)) {
+    } else if (!tokens.isValidComponentType(componentType)) {
       errors.push(`Invalid component-type "${componentType}"`);
     }
     if (!contributorId) {
@@ -988,7 +790,7 @@ class SkhemaComponent extends HTMLElement {
     return {
       isValid: errors.length === 0,
       errors,
-      componentType: validation.isValidComponentType(componentType || "") ? componentType : void 0,
+      componentType: tokens.isValidComponentType(componentType || "") ? componentType : void 0,
       contributorId: contributorId || void 0
     };
   }
@@ -1000,14 +802,14 @@ class SkhemaComponent extends HTMLElement {
     for (const child of children) {
       const data = child.getElementData?.();
       if (!data) continue;
-      if (!validation.validateElementBelongsToComponent(data.elementType, componentType)) {
+      if (!tokens.validateElementBelongsToComponent(data.elementType, componentType)) {
         console.warn(
           `skhema-component: element type "${data.elementType}" does not belong to component type "${componentType}"`
         );
       }
       elements.push(data);
     }
-    const orderedTypes = validation.getElementTypesForComponent(componentType);
+    const orderedTypes = tokens.getElementTypesForComponent(componentType);
     elements.sort((a, b) => {
       const aIdx = orderedTypes.indexOf(a.elementType);
       const bIdx = orderedTypes.indexOf(b.elementType);
@@ -1020,10 +822,7 @@ class SkhemaComponent extends HTMLElement {
   renderContent(elements) {
     if (!this.contentData) return;
     const { component_type, contributor_id, title } = this.contentData;
-    const componentLabel = validation.getComponentTypeLabel(component_type);
-    const acronym = validation.getComponentTypeAcronym(component_type);
-    const colors = validation.COMPONENT_COLORS[component_type];
-    const authorFooterHtml = resolveAuthorFooterHtml(this, contributor_id);
+    const componentLabel = tokens.getComponentTypeLabel(component_type);
     const themeAttribute = this.getAttribute("theme") || "auto";
     const actualTheme = this.getActualTheme(themeAttribute);
     const redirectUrl = generateComponentRedirectUrl(
@@ -1031,65 +830,25 @@ class SkhemaComponent extends HTMLElement {
       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">${validation.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">
-              ${validation.USER_ICON_SVG}
-              ${authorFooterHtml}
-            </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 cardHtml = render.renderComponentCardHtml({
+      componentType: component_type,
+      title,
+      elements: elements.map((el) => ({
+        elementType: el.elementType,
+        content: el.content
+      })),
+      saveUrl: redirectUrl,
+      authorName: this.getAttribute("author-name") || this.getAttribute("contributor-name"),
+      authorSlug: this.getAttribute("author-slug"),
+      contributorId: contributor_id,
+      theme: actualTheme
+    });
+    this.shadow.innerHTML = `<style>${styles$1}</style>${cardHtml}<slot style="display:none;"></slot>`;
     const saveBtn = this.shadow.querySelector(
       ".skhema-save-btn"
     );
@@ -1099,21 +858,6 @@ class SkhemaComponent extends HTMLElement {
       });
     }
   }
-  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;
@@ -1301,12 +1045,8 @@ class SkhemaComponent extends HTMLElement {
   }
   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);
-      }
+    if (themeAttribute === "auto" && this.contentData) {
+      this.scheduleRender();
     }
   }
 }
@@ -1338,7 +1078,7 @@ const styles = `
   color: var(--skhema-text);
 }
 
-/* Dark mode styles - applied via data-theme attribute */
+/* Dark mode styles - applied via data-theme attribute (skeleton/error only) */
 .skhema-element-card[data-theme="dark"],
 .skhema-skeleton[data-theme="dark"] {
   --skhema-bg: hsl(222.2 84% 4.9%);
@@ -1349,71 +1089,42 @@ const styles = `
   --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;
+/* Progressive enhancement over the inline-styled, rendered card. Inline styles
+   win on specificity, so the changed properties use !important to layer on. */
+.skhema-card {
+  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.skhema-element-card:hover {
-  box-shadow: var(--skhema-shadow-lg);
-  border-color: var(--skhema-primary);
+.skhema-card:hover {
+  box-shadow: ${tokens.CARD_SHADOW_LG} !important;
   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-card[data-skhema-kind="element"]:hover {
+  border-color: ${tokens.PRIMARY_HEX} !important;
 }
 
-.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%;
+.skhema-save-btn {
+  transition: background 0.15s ease;
 }
 
-/* Footer section */
-.skhema-footer {
-  padding: 12px 16px;
-  border-top: 1px solid var(--skhema-border);
+.skhema-save-btn:hover {
+  background: ${tokens.PRIMARY_HOVER_HEX} !important;
 }
 
-.skhema-footer-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
+.skhema-save-btn:active {
+  background: ${tokens.PRIMARY_PRESSED_HEX} !important;
 }
 
-${validation.SHARED_CARD_STYLES}
-
-/* Element type label next to badge */
-.skhema-type-label {
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--skhema-text);
+/* Error card wrapper (browser-only state) */
+.skhema-element-card {
+  background: var(--skhema-card);
+  border: 1px solid var(--skhema-border);
+  border-radius: calc(var(--skhema-radius) + 2px);
+  box-shadow: var(--skhema-shadow);
+  max-width: 600px;
+  margin: 8px 0;
+  overflow: hidden;
 }
 
 /* Error state */
@@ -1513,49 +1224,12 @@ ${validation.SHARED_CARD_STYLES}
   }
 }
 
-/* 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-card,
   .skhema-save-btn {
     transition: none;
   }
-
-  .skhema-save-btn::after {
-    transition: none;
-  }
-
-  .skhema-save-btn:hover::after {
-    transform: none;
-  }
 }
 
 .skhema-structured-data {
@@ -1592,11 +1266,11 @@ class SkhemaElement extends HTMLElement {
     this.componentConnected = true;
     if (this.closest("skhema-component")) {
       this.nestedMode = true;
-      const validation$1 = validation.validateAttributes(this);
-      if (!validation$1.isValid) {
+      const validation = tokens.validateAttributes(this);
+      if (!validation.isValid) {
         console.warn(
           "skhema-element: invalid attributes in nested mode",
-          validation$1.errors
+          validation.errors
         );
         return;
       }
@@ -1606,8 +1280,8 @@ class SkhemaElement extends HTMLElement {
         return;
       }
       this.contentData = {
-        contributor_id: validation$1.contributorId,
-        element_type: validation$1.elementType,
+        contributor_id: validation.contributorId,
+        element_type: validation.elementType,
         content,
         content_hash: generateContentHash(content),
         source_url: this.getAttribute("source-url") || window.location.href,
@@ -1655,9 +1329,9 @@ class SkhemaElement extends HTMLElement {
     };
   }
   render() {
-    const validation$1 = validation.validateAttributes(this);
-    if (!validation$1.isValid) {
-      this.renderError("Invalid component attributes", validation$1.errors);
+    const validation = tokens.validateAttributes(this);
+    if (!validation.isValid) {
+      this.renderError("Invalid component attributes", validation.errors);
       return;
     }
     const content = this.getContent();
@@ -1667,7 +1341,7 @@ class SkhemaElement extends HTMLElement {
       ]);
       return;
     }
-    const securityValidation = validateContentSecurity(content);
+    const securityValidation = render.validateContentSecurity(content);
     if (!securityValidation.isSecure) {
       this.renderError(
         "Content security validation failed",
@@ -1676,8 +1350,8 @@ class SkhemaElement extends HTMLElement {
       return;
     }
     this.contentData = {
-      contributor_id: validation$1.contributorId,
-      element_type: validation$1.elementType,
+      contributor_id: validation.contributorId,
+      element_type: validation.elementType,
       content,
       content_hash: generateContentHash(content),
       source_url: this.getAttribute("source-url") || window.location.href,
@@ -1693,7 +1367,6 @@ class SkhemaElement extends HTMLElement {
   renderContent() {
     if (!this.contentData) return;
     const { element_type, contributor_id, content } = this.contentData;
-    const label = validation.getElementTypeLabel(element_type);
     const redirectUrl = generateRedirectUrl(
       content,
       element_type,
@@ -1701,50 +1374,20 @@ class SkhemaElement extends HTMLElement {
     );
     const themeAttribute = this.getAttribute("theme") || "auto";
     const actualTheme = this.getActualTheme(themeAttribute);
-    const authorFooterHtml = resolveAuthorFooterHtml(this, contributor_id);
-    const componentType = validation.resolveComponentType(element_type);
-    const acronym = validation.getComponentTypeAcronym(componentType);
-    const colors = validation.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">
-              ${validation.USER_ICON_SVG}
-              ${authorFooterHtml}
-            </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 cardHtml = render.renderElementCardHtml({
+      elementType: element_type,
+      content,
+      saveUrl: redirectUrl,
+      authorName: this.getAttribute("author-name") || this.getAttribute("contributor-name"),
+      authorSlug: this.getAttribute("author-slug"),
+      contributorId: contributor_id,
+      theme: actualTheme
+    });
+    this.shadow.innerHTML = `<style>${styles}</style>${cardHtml}`;
     const saveBtn = this.shadow.querySelector(
       ".skhema-save-btn"
     );
@@ -1932,12 +1575,8 @@ class SkhemaElement extends HTMLElement {
   }
   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);
-      }
+    if (themeAttribute === "auto" && this.contentData && !this.nestedMode) {
+      this.renderContent();
     }
   }
 }
@@ -1971,15 +1610,15 @@ if (typeof window !== "undefined") {
     );
   }
 }
-exports.getComponentTypeAcronym = validation.getComponentTypeAcronym;
-exports.getComponentTypeLabel = validation.getComponentTypeLabel;
-exports.getElementTypeAcronym = validation.getElementTypeAcronym;
-exports.getElementTypeLabel = validation.getElementTypeLabel;
-exports.isValidComponentType = validation.isValidComponentType;
-exports.isValidElementType = validation.isValidElementType;
-exports.resolveComponentType = validation.resolveComponentType;
-exports.validateAttributes = validation.validateAttributes;
-exports.validateElementBelongsToComponent = validation.validateElementBelongsToComponent;
+exports.getComponentTypeAcronym = tokens.getComponentTypeAcronym;
+exports.getComponentTypeLabel = tokens.getComponentTypeLabel;
+exports.getElementTypeAcronym = tokens.getElementTypeAcronym;
+exports.getElementTypeLabel = tokens.getElementTypeLabel;
+exports.isValidComponentType = tokens.isValidComponentType;
+exports.isValidElementType = tokens.isValidElementType;
+exports.resolveComponentType = tokens.resolveComponentType;
+exports.validateAttributes = tokens.validateAttributes;
+exports.validateElementBelongsToComponent = tokens.validateElementBelongsToComponent;
 exports.SkhemaComponent = SkhemaComponent;
 exports.SkhemaElement = SkhemaElement;
 exports.default = SkhemaElement;