@skhema/embed 0.1.8 → 0.1.10

package/dist/index.cjs

@@ -1,161 +1,7 @@
 "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;
-}
-
-.skhema-author-link {
-  color: inherit;
-  text-decoration: none;
-}
-
-.skhema-author-link:hover {
-  color: var(--skhema-text);
-  text-decoration: underline;
-}
-
-/* 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>`;
-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-DBeyneZT.cjs");
+const validation = require("./validation-DCw9rQeH.cjs");
 const ANALYTICS_ENDPOINT = "https://analytics.skhema.com/functions/v1/embed-manage";
 const TRACKING_COOKIE_NAME = "_sk";
 const TRACKING_EXPIRY_HOURS = 24;
@@ -529,43 +375,6 @@ 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);
@@ -585,118 +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 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),
+    category: validation.getElementTypeLabel(elementType),
     contributor: contributorId,
     url: generateRedirectUrl(content, elementType, contributorId),
     provider: {
@@ -728,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 = getElementTypeLabel(elementType);
+  const label = validation.getElementTypeLabel(elementType);
   return `
     <div itemscope itemtype="https://schema.org/AnalysisContent" style="display:none;">
       <meta itemprop="analysisType" content="${elementType}">
@@ -740,7 +444,7 @@ function createMetaTags(content, elementType, contributorId) {
   `;
 }
 function generateComponentStructuredData(title, componentType, contributorId, elements, sourceUrl) {
-  const componentLabel = getComponentTypeLabel(componentType);
+  const componentLabel = validation.getComponentTypeLabel(componentType);
   return {
     "@context": "https://schema.org",
     "@type": "CreativeWork",
@@ -757,7 +461,7 @@ function generateComponentStructuredData(title, componentType, contributorId, el
       "@type": "AnalysisContent",
       text: el.content,
       analysisType: el.elementType,
-      category: getElementTypeLabel(el.elementType)
+      category: validation.getElementTypeLabel(el.elementType)
     })),
     provider: {
       "@type": "Organization",
@@ -787,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 = getElementTypeLabel(elementType);
+  const label = validation.getElementTypeLabel(elementType);
   return {
     role: "article",
     "aria-label": `${label} - Strategic element`,
@@ -821,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%);
@@ -833,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: ${validation.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: ${validation.PRIMARY_HOVER_HEX} !important;
 }
 
-/* Footer */
-.skhema-footer {
-  padding: 12px 16px;
-  border-top: 1px solid var(--skhema-border);
+.skhema-save-btn:active {
+  background: ${validation.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;
 }
 
-${SHARED_CARD_STYLES}
-
 /* Error state */
 .skhema-error {
   background: hsl(0 93% 94%);
@@ -1017,39 +655,9 @@ ${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;
   }
@@ -1126,13 +734,13 @@ class SkhemaComponent extends HTMLElement {
     });
   }
   render() {
-    const validation = this.validateComponentAttributes();
-    if (!validation.isValid) {
-      this.renderError("Invalid component attributes", validation.errors);
+    const validation2 = this.validateComponentAttributes();
+    if (!validation2.isValid) {
+      this.renderError("Invalid component attributes", validation2.errors);
       return;
     }
-    const componentType = validation.componentType;
-    const contributorId = validation.contributorId;
+    const componentType = validation2.componentType;
+    const contributorId = validation2.contributorId;
     const title = this.getAttribute("title") || "";
     const childElements = this.gatherChildElements(componentType);
     if (childElements.length === 0) {
@@ -1171,7 +779,7 @@ class SkhemaComponent extends HTMLElement {
     const contributorId = this.getAttribute("contributor-id");
     if (!componentType) {
       errors.push("Missing required attribute: component-type");
-    } else if (!isValidComponentType(componentType)) {
+    } else if (!validation.isValidComponentType(componentType)) {
       errors.push(`Invalid component-type "${componentType}"`);
     }
     if (!contributorId) {
@@ -1182,7 +790,7 @@ class SkhemaComponent extends HTMLElement {
     return {
       isValid: errors.length === 0,
       errors,
-      componentType: isValidComponentType(componentType || "") ? componentType : void 0,
+      componentType: validation.isValidComponentType(componentType || "") ? componentType : void 0,
       contributorId: contributorId || void 0
     };
   }
@@ -1194,14 +802,14 @@ class SkhemaComponent extends HTMLElement {
     for (const child of children) {
       const data = child.getElementData?.();
       if (!data) continue;
-      if (!validateElementBelongsToComponent(data.elementType, componentType)) {
+      if (!validation.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);
+    const orderedTypes = validation.getElementTypesForComponent(componentType);
     elements.sort((a, b) => {
       const aIdx = orderedTypes.indexOf(a.elementType);
       const bIdx = orderedTypes.indexOf(b.elementType);
@@ -1214,10 +822,7 @@ class SkhemaComponent extends HTMLElement {
   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 authorFooterHtml = resolveAuthorFooterHtml(this, contributor_id);
+    const componentLabel = validation.getComponentTypeLabel(component_type);
     const themeAttribute = this.getAttribute("theme") || "auto";
     const actualTheme = this.getActualTheme(themeAttribute);
     const redirectUrl = generateComponentRedirectUrl(
@@ -1225,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">${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}
-              ${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"
     );
@@ -1293,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;
@@ -1495,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();
     }
   }
 }
@@ -1532,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%);
@@ -1543,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: ${validation.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: ${validation.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: ${validation.PRIMARY_HOVER_HEX} !important;
 }
 
-.skhema-footer-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
+.skhema-save-btn:active {
+  background: ${validation.PRIMARY_PRESSED_HEX} !important;
 }
 
-${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 */
@@ -1707,49 +1224,12 @@ ${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 {
@@ -1786,11 +1266,11 @@ class SkhemaElement extends HTMLElement {
     this.componentConnected = true;
     if (this.closest("skhema-component")) {
       this.nestedMode = true;
-      const validation = validateAttributes(this);
-      if (!validation.isValid) {
+      const validation$1 = validation.validateAttributes(this);
+      if (!validation$1.isValid) {
         console.warn(
           "skhema-element: invalid attributes in nested mode",
-          validation.errors
+          validation$1.errors
         );
         return;
       }
@@ -1800,8 +1280,8 @@ class SkhemaElement extends HTMLElement {
         return;
       }
       this.contentData = {
-        contributor_id: validation.contributorId,
-        element_type: validation.elementType,
+        contributor_id: validation$1.contributorId,
+        element_type: validation$1.elementType,
         content,
         content_hash: generateContentHash(content),
         source_url: this.getAttribute("source-url") || window.location.href,
@@ -1849,9 +1329,9 @@ class SkhemaElement extends HTMLElement {
     };
   }
   render() {
-    const validation = validateAttributes(this);
-    if (!validation.isValid) {
-      this.renderError("Invalid component attributes", validation.errors);
+    const validation$1 = validation.validateAttributes(this);
+    if (!validation$1.isValid) {
+      this.renderError("Invalid component attributes", validation$1.errors);
       return;
     }
     const content = this.getContent();
@@ -1861,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",
@@ -1870,8 +1350,8 @@ class SkhemaElement extends HTMLElement {
       return;
     }
     this.contentData = {
-      contributor_id: validation.contributorId,
-      element_type: validation.elementType,
+      contributor_id: validation$1.contributorId,
+      element_type: validation$1.elementType,
       content,
       content_hash: generateContentHash(content),
       source_url: this.getAttribute("source-url") || window.location.href,
@@ -1887,7 +1367,6 @@ class SkhemaElement extends HTMLElement {
   renderContent() {
     if (!this.contentData) return;
     const { element_type, contributor_id, content } = this.contentData;
-    const label = getElementTypeLabel(element_type);
     const redirectUrl = generateRedirectUrl(
       content,
       element_type,
@@ -1895,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 = 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}
-              ${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"
     );
@@ -2126,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();
     }
   }
 }
@@ -2165,6 +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.SkhemaComponent = SkhemaComponent;
 exports.SkhemaElement = SkhemaElement;
 exports.default = SkhemaElement;
@@ -2173,18 +1627,9 @@ 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