@skhema/embed 0.1.9 → 0.1.10

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-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;
@@ -427,75 +394,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 generateStructuredData(content, elementType, contributorId, sourceUrl) {
   return {
     "@context": "https://schema.org",
@@ -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: ${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;
 }
 
-${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;
   }
@@ -1021,9 +823,6 @@ class SkhemaComponent extends HTMLElement {
     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 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: ${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;
 }
 
-${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 {
@@ -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",
@@ -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();
     }
   }
 }