@skhema/embed 0.1.6 → 0.1.9

package/dist/index.cjs

@@ -1,117 +1,40 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const types = require("@skhema/types");
-const COMPONENT_COLORS = {
-  diagnosis: {
-    bg: "oklch(0.65 0.06 25 / 0.15)",
-    text: "oklch(0.65 0.06 25)",
-    border: "oklch(0.65 0.06 25 / 0.3)"
-  },
-  method: {
-    bg: "oklch(0.6 0.06 250 / 0.15)",
-    text: "oklch(0.6 0.06 250)",
-    border: "oklch(0.6 0.06 250 / 0.3)"
-  },
-  initiatives: {
-    bg: "oklch(0.6 0.06 155 / 0.15)",
-    text: "oklch(0.6 0.06 155)",
-    border: "oklch(0.6 0.06 155 / 0.3)"
-  },
-  measures: {
-    bg: "oklch(0.6 0.06 300 / 0.15)",
-    text: "oklch(0.6 0.06 300)",
-    border: "oklch(0.6 0.06 300 / 0.3)"
-  },
-  support: {
-    bg: "oklch(0.65 0.06 65 / 0.15)",
-    text: "oklch(0.65 0.06 65)",
-    border: "oklch(0.65 0.06 65 / 0.3)"
-  }
-};
-const SHARED_CARD_STYLES = `
-/* Monospace acronym badge */
-.skhema-acronym-badge {
-  display: inline-flex;
-  align-items: center;
-  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
-  font-size: 10px;
-  font-weight: 600;
-  padding: 2px 6px;
-  border-radius: 2px;
-  letter-spacing: 0.02em;
-  flex-shrink: 0;
-}
-
-/* Footer attribution tagline */
-.skhema-footer-attribution {
-  font-size: 11px;
-  color: var(--skhema-text-muted);
-  line-height: 1.4;
-}
-
-.skhema-footer-attribution a {
-  color: var(--skhema-text-muted);
-  text-decoration: underline;
-  text-decoration-color: var(--skhema-border);
-  text-underline-offset: 2px;
-}
-
-.skhema-footer-attribution a:hover {
-  color: var(--skhema-text);
-}
-
-/* Contributor line in footer */
-.skhema-contributor-line {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 12px;
-  color: var(--skhema-text-muted);
-}
-
-.skhema-contributor-line svg {
-  width: 14px;
-  height: 14px;
-  flex-shrink: 0;
-}
-
-/* Save button — primary brand color */
-.skhema-save-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  background: var(--skhema-primary);
-  color: white;
-  border: none;
-  padding: 6px 14px;
-  border-radius: calc(var(--skhema-radius) + 2px);
-  font-size: 12px;
-  font-weight: 500;
-  text-decoration: none;
-  cursor: pointer;
-  transition: background 0.15s ease;
-  white-space: nowrap;
+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
+  };
 }
-
-.skhema-save-btn:hover {
-  background: var(--skhema-primary-hover);
+function escapeHtml(text) {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 }
-
-.skhema-save-btn:active {
-  background: var(--skhema-primary-pressed);
+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>`;
 }
-
-.skhema-save-btn:focus {
-  outline: 2px solid var(--skhema-primary);
-  outline-offset: 2px;
+function formatContributorIdFallback(contributorId) {
+  return contributorId.split(/[_-]/).map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
 }
-
-.skhema-save-btn::after {
-  content: '\\2192';
-  font-size: 13px;
+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 USER_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>`;
 const ANALYTICS_ENDPOINT = "https://analytics.skhema.com/functions/v1/embed-manage";
 const TRACKING_COOKIE_NAME = "_sk";
 const TRACKING_EXPIRY_HOURS = 24;
@@ -485,43 +408,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);
@@ -610,49 +496,13 @@ function validateContentSecurity(content) {
     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: {
@@ -684,7 +534,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}">
@@ -696,7 +546,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",
@@ -713,7 +563,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",
@@ -743,7 +593,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`,
@@ -887,7 +737,7 @@ const styles$1 = `
   gap: 12px;
 }
 
-${SHARED_CARD_STYLES}
+${validation.SHARED_CARD_STYLES}
 
 /* Error state */
 .skhema-error {
@@ -1031,6 +881,8 @@ class SkhemaComponent extends HTMLElement {
     return [
       "component-type",
       "contributor-id",
+      "author-name",
+      "author-slug",
       "contributor-name",
       "title",
       "theme",
@@ -1080,13 +932,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) {
@@ -1125,7 +977,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) {
@@ -1136,7 +988,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
     };
   }
@@ -1148,14 +1000,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);
@@ -1168,11 +1020,10 @@ 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 contributorName = this.getAttribute("contributor-name");
-    const displayName = contributorName || this.formatContributorName(contributor_id);
+    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(
@@ -1186,7 +1037,7 @@ class SkhemaComponent extends HTMLElement {
     const elementSectionsHtml = groupedElements.map(
       (group) => `
         <div class="skhema-element-group">
-          <div class="skhema-element-label">${getElementTypeLabel(group.elementType)}</div>
+          <div class="skhema-element-label">${validation.getElementTypeLabel(group.elementType)}</div>
           ${group.items.map(
         (item) => `<div class="skhema-element-content">${sanitizeContent(item.content)}</div>`
       ).join("")}
@@ -1220,8 +1071,8 @@ class SkhemaComponent extends HTMLElement {
         <div class="skhema-footer">
           <div class="skhema-footer-row">
             <span class="skhema-contributor-line">
-              ${USER_ICON_SVG}
-              ${displayName}
+              ${validation.USER_ICON_SVG}
+              ${authorFooterHtml}
             </span>
             <a href="${redirectUrl}"
                class="skhema-save-btn"
@@ -1285,9 +1136,6 @@ class SkhemaComponent extends HTMLElement {
     }
     return "light";
   }
-  formatContributorName(contributorId) {
-    return contributorId.split(/[_-]/).map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
-  }
   addPreconnectHints() {
     if (document.querySelector(
       'link[rel="preconnect"][href*="analytics.skhema.com"]'
@@ -1559,7 +1407,7 @@ const styles = `
   gap: 12px;
 }
 
-${SHARED_CARD_STYLES}
+${validation.SHARED_CARD_STYLES}
 
 /* Element type label next to badge */
 .skhema-type-label {
@@ -1730,6 +1578,8 @@ class SkhemaElement extends HTMLElement {
     return [
       "element-type",
       "contributor-id",
+      "author-name",
+      "author-slug",
       "contributor-name",
       "content",
       "source-url",
@@ -1742,11 +1592,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;
       }
@@ -1756,8 +1606,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,
@@ -1805,9 +1655,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();
@@ -1826,8 +1676,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,
@@ -1843,7 +1693,7 @@ class SkhemaElement extends HTMLElement {
   renderContent() {
     if (!this.contentData) return;
     const { element_type, contributor_id, content } = this.contentData;
-    const label = getElementTypeLabel(element_type);
+    const label = validation.getElementTypeLabel(element_type);
     const redirectUrl = generateRedirectUrl(
       content,
       element_type,
@@ -1851,11 +1701,10 @@ class SkhemaElement extends HTMLElement {
     );
     const themeAttribute = this.getAttribute("theme") || "auto";
     const actualTheme = this.getActualTheme(themeAttribute);
-    const contributorName = this.getAttribute("contributor-name");
-    const displayName = contributorName || this.formatContributorName(contributor_id);
-    const componentType = resolveComponentType(element_type);
-    const acronym = getComponentTypeAcronym(componentType);
-    const colors = COMPONENT_COLORS[componentType];
+    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);
@@ -1879,8 +1728,8 @@ class SkhemaElement extends HTMLElement {
         <div class="skhema-footer">
           <div class="skhema-footer-row">
             <span class="skhema-contributor-line">
-              ${USER_ICON_SVG}
-              ${displayName}
+              ${validation.USER_ICON_SVG}
+              ${authorFooterHtml}
             </span>
             <a href="${redirectUrl}"
                class="skhema-save-btn"
@@ -1927,9 +1776,6 @@ class SkhemaElement extends HTMLElement {
     }
     return "light";
   }
-  formatContributorName(contributorId) {
-    return contributorId.split(/[_-]/).map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
-  }
   addPreconnectHints() {
     if (document.querySelector(
       'link[rel="preconnect"][href*="analytics.skhema.com"]'
@@ -2125,6 +1971,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;
@@ -2133,18 +1988,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