@skhema/embed 0.1.6 → 0.1.9

package/dist/index.es.js

@@ -1,115 +1,39 @@
-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;
-}
-
-/* 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;
+import { d as getElementTypeLabel, b as getComponentTypeLabel, i as isValidComponentType, v as validateElementBelongsToComponent, e as getElementTypesForComponent, g as getComponentTypeAcronym, a as COMPONENT_COLORS, S as SHARED_CARD_STYLES, U as USER_ICON_SVG, h as validateAttributes, r as resolveComponentType } from "./validation-MSiRF5Wt.js";
+import { c, f } from "./validation-MSiRF5Wt.js";
+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;
@@ -483,43 +407,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);
@@ -608,42 +495,6 @@ function validateContentSecurity(content) {
     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",
@@ -1029,6 +880,8 @@ class SkhemaComponent extends HTMLElement {
     return [
       "component-type",
       "contributor-id",
+      "author-name",
+      "author-slug",
       "contributor-name",
       "title",
       "theme",
@@ -1169,8 +1022,7 @@ class SkhemaComponent extends HTMLElement {
     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 authorFooterHtml = resolveAuthorFooterHtml(this, contributor_id);
     const themeAttribute = this.getAttribute("theme") || "auto";
     const actualTheme = this.getActualTheme(themeAttribute);
     const redirectUrl = generateComponentRedirectUrl(
@@ -1219,7 +1071,7 @@ class SkhemaComponent extends HTMLElement {
           <div class="skhema-footer-row">
             <span class="skhema-contributor-line">
               ${USER_ICON_SVG}
-              ${displayName}
+              ${authorFooterHtml}
             </span>
             <a href="${redirectUrl}"
                class="skhema-save-btn"
@@ -1283,9 +1135,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"]'
@@ -1728,6 +1577,8 @@ class SkhemaElement extends HTMLElement {
     return [
       "element-type",
       "contributor-id",
+      "author-name",
+      "author-slug",
       "contributor-name",
       "content",
       "source-url",
@@ -1849,8 +1700,7 @@ 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 authorFooterHtml = resolveAuthorFooterHtml(this, contributor_id);
     const componentType = resolveComponentType(element_type);
     const acronym = getComponentTypeAcronym(componentType);
     const colors = COMPONENT_COLORS[componentType];
@@ -1878,7 +1728,7 @@ class SkhemaElement extends HTMLElement {
           <div class="skhema-footer-row">
             <span class="skhema-contributor-line">
               ${USER_ICON_SVG}
-              ${displayName}
+              ${authorFooterHtml}
             </span>
             <a href="${redirectUrl}"
                class="skhema-save-btn"
@@ -1925,9 +1775,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"]'
@@ -2134,10 +1981,10 @@ export {
   generateStructuredData,
   getComponentTypeAcronym,
   getComponentTypeLabel,
-  getElementTypeAcronym,
+  c as getElementTypeAcronym,
   getElementTypeLabel,
   isValidComponentType,
-  isValidElementType,
+  f as isValidElementType,
   registerSkhemaComponent,
   registerSkhemaElement,
   resolveComponentType,