@skhema/embed 0.1.8 → 0.1.10

package/dist/index.es.js

@@ -1,159 +1,6 @@
-import { SKHEMA_MAPPING, COMPONENT_TYPES, ELEMENT_TYPES } from "@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>`;
-}
+import { r as renderComponentCardHtml, a as renderElementCardHtml, v as validateContentSecurity } from "./index-jwx5CXLB.js";
+import { d as getElementTypeLabel, b as getComponentTypeLabel, i as isValidComponentType, v as validateElementBelongsToComponent, e as getElementTypesForComponent, l as CARD_SHADOW_LG, m as PRIMARY_HOVER_HEX, n as PRIMARY_PRESSED_HEX, o as validateAttributes, P as PRIMARY_HEX } from "./validation-Dt4L_df8.js";
+import { g, c, f, r } from "./validation-Dt4L_df8.js";
 const ANALYTICS_ENDPOINT = "https://analytics.skhema.com/functions/v1/embed-manage";
 const TRACKING_COOKIE_NAME = "_sk";
 const TRACKING_EXPIRY_HOURS = 24;
@@ -527,43 +374,6 @@ function shouldTrackAnalytics(element) {
   const trackAnalytics = element.getAttribute("track-analytics");
   return trackAnalytics !== "false";
 }
-function isValidComponentType(componentType) {
-  const validTypes = Object.values(COMPONENT_TYPES).map((t) => t.value);
-  return validTypes.includes(componentType);
-}
-function validateElementBelongsToComponent(elementType, componentType) {
-  if (!isValidComponentType(componentType)) return false;
-  const validElements = SKHEMA_MAPPING.elementFlow[componentType];
-  if (!validElements) return false;
-  return validElements.some((e) => e.value === elementType);
-}
-function getComponentTypeLabel(componentType) {
-  const type = Object.values(COMPONENT_TYPES).find(
-    (t) => t.value === componentType
-  );
-  return type?.label || componentType;
-}
-function getComponentTypeAcronym(componentType) {
-  const type = Object.values(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(
-    SKHEMA_MAPPING.elementFlow
-  )) {
-    if (elements.some((e) => e.value === elementType)) {
-      return componentValue;
-    }
-  }
-  return "diagnosis";
-}
-function getElementTypesForComponent(componentType) {
-  if (!isValidComponentType(componentType)) return [];
-  const elements = SKHEMA_MAPPING.elementFlow[componentType];
-  return elements?.map((e) => e.value) || [];
-}
 function generateContentHash(content) {
   let hash = 0;
   const cleanContent = content.trim().substring(0, 200);
@@ -583,111 +393,6 @@ 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(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(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(ELEMENT_TYPES).find((t) => t.value === elementType);
-  return type?.label || elementType;
-}
-function getElementTypeAcronym(elementType) {
-  const type = Object.values(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",
@@ -819,7 +524,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%);
@@ -831,106 +536,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: ${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: ${PRIMARY_HOVER_HEX} !important;
 }
 
-/* Footer */
-.skhema-footer {
-  padding: 12px 16px;
-  border-top: 1px solid var(--skhema-border);
+.skhema-save-btn:active {
+  background: ${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%);
@@ -1015,39 +654,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;
   }
@@ -1213,9 +822,6 @@ class SkhemaComponent extends HTMLElement {
     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 themeAttribute = this.getAttribute("theme") || "auto";
     const actualTheme = this.getActualTheme(themeAttribute);
     const redirectUrl = generateComponentRedirectUrl(
@@ -1223,65 +829,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 = 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"
     );
@@ -1291,21 +857,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;
@@ -1493,12 +1044,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();
     }
   }
 }
@@ -1530,7 +1077,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%);
@@ -1541,71 +1088,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: ${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: ${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: ${PRIMARY_HOVER_HEX} !important;
 }
 
-.skhema-footer-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
+.skhema-save-btn:active {
+  background: ${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 */
@@ -1705,49 +1223,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 {
@@ -1885,7 +1366,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,
@@ -1893,50 +1373,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 = 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"
     );
@@ -2124,12 +1574,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();
     }
   }
 }
@@ -2172,15 +1618,15 @@ export {
   generateComponentStructuredData,
   generateRedirectUrl,
   generateStructuredData,
-  getComponentTypeAcronym,
+  g as getComponentTypeAcronym,
   getComponentTypeLabel,
-  getElementTypeAcronym,
+  c as getElementTypeAcronym,
   getElementTypeLabel,
   isValidComponentType,
-  isValidElementType,
+  f as isValidElementType,
   registerSkhemaComponent,
   registerSkhemaElement,
-  resolveComponentType,
+  r as resolveComponentType,
   shouldTrackAnalytics,
   trackComponentClick,
   trackComponentEmbedLoad,