@skhema/embed 0.1.8 → 0.1.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs CHANGED
@@ -1,127 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
3
- const types = require("@skhema/types");
4
- const COMPONENT_COLORS = {
5
- diagnosis: {
6
- bg: "oklch(0.65 0.06 25 / 0.15)",
7
- text: "oklch(0.65 0.06 25)",
8
- border: "oklch(0.65 0.06 25 / 0.3)"
9
- },
10
- method: {
11
- bg: "oklch(0.6 0.06 250 / 0.15)",
12
- text: "oklch(0.6 0.06 250)",
13
- border: "oklch(0.6 0.06 250 / 0.3)"
14
- },
15
- initiatives: {
16
- bg: "oklch(0.6 0.06 155 / 0.15)",
17
- text: "oklch(0.6 0.06 155)",
18
- border: "oklch(0.6 0.06 155 / 0.3)"
19
- },
20
- measures: {
21
- bg: "oklch(0.6 0.06 300 / 0.15)",
22
- text: "oklch(0.6 0.06 300)",
23
- border: "oklch(0.6 0.06 300 / 0.3)"
24
- },
25
- support: {
26
- bg: "oklch(0.65 0.06 65 / 0.15)",
27
- text: "oklch(0.65 0.06 65)",
28
- border: "oklch(0.65 0.06 65 / 0.3)"
29
- }
30
- };
31
- const SHARED_CARD_STYLES = `
32
- /* Monospace acronym badge */
33
- .skhema-acronym-badge {
34
- display: inline-flex;
35
- align-items: center;
36
- font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
37
- font-size: 10px;
38
- font-weight: 600;
39
- padding: 2px 6px;
40
- border-radius: 2px;
41
- letter-spacing: 0.02em;
42
- flex-shrink: 0;
43
- }
44
-
45
- /* Footer attribution tagline */
46
- .skhema-footer-attribution {
47
- font-size: 11px;
48
- color: var(--skhema-text-muted);
49
- line-height: 1.4;
50
- }
51
-
52
- .skhema-footer-attribution a {
53
- color: var(--skhema-text-muted);
54
- text-decoration: underline;
55
- text-decoration-color: var(--skhema-border);
56
- text-underline-offset: 2px;
57
- }
58
-
59
- .skhema-footer-attribution a:hover {
60
- color: var(--skhema-text);
61
- }
62
-
63
- /* Contributor line in footer */
64
- .skhema-contributor-line {
65
- display: flex;
66
- align-items: center;
67
- gap: 6px;
68
- font-size: 12px;
69
- color: var(--skhema-text-muted);
70
- }
71
-
72
- .skhema-contributor-line svg {
73
- width: 14px;
74
- height: 14px;
75
- flex-shrink: 0;
76
- }
77
-
78
- .skhema-author-link {
79
- color: inherit;
80
- text-decoration: none;
81
- }
82
-
83
- .skhema-author-link:hover {
84
- color: var(--skhema-text);
85
- text-decoration: underline;
86
- }
87
-
88
- /* Save button — primary brand color */
89
- .skhema-save-btn {
90
- display: inline-flex;
91
- align-items: center;
92
- gap: 6px;
93
- background: var(--skhema-primary);
94
- color: white;
95
- border: none;
96
- padding: 6px 14px;
97
- border-radius: calc(var(--skhema-radius) + 2px);
98
- font-size: 12px;
99
- font-weight: 500;
100
- text-decoration: none;
101
- cursor: pointer;
102
- transition: background 0.15s ease;
103
- white-space: nowrap;
104
- }
105
-
106
- .skhema-save-btn:hover {
107
- background: var(--skhema-primary-hover);
108
- }
109
-
110
- .skhema-save-btn:active {
111
- background: var(--skhema-primary-pressed);
112
- }
113
-
114
- .skhema-save-btn:focus {
115
- outline: 2px solid var(--skhema-primary);
116
- outline-offset: 2px;
117
- }
118
-
119
- .skhema-save-btn::after {
120
- content: '\\2192';
121
- font-size: 13px;
122
- }
123
- `;
124
- 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>`;
3
+ const validation = require("./validation-CNWaQfh_.cjs");
125
4
  function readAuthorAttribution(element) {
126
5
  const authorName = element.getAttribute("author-name") || element.getAttribute("contributor-name");
127
6
  if (!authorName?.trim()) {
@@ -529,43 +408,6 @@ function shouldTrackAnalytics(element) {
529
408
  const trackAnalytics = element.getAttribute("track-analytics");
530
409
  return trackAnalytics !== "false";
531
410
  }
532
- function isValidComponentType(componentType) {
533
- const validTypes = Object.values(types.COMPONENT_TYPES).map((t) => t.value);
534
- return validTypes.includes(componentType);
535
- }
536
- function validateElementBelongsToComponent(elementType, componentType) {
537
- if (!isValidComponentType(componentType)) return false;
538
- const validElements = types.SKHEMA_MAPPING.elementFlow[componentType];
539
- if (!validElements) return false;
540
- return validElements.some((e) => e.value === elementType);
541
- }
542
- function getComponentTypeLabel(componentType) {
543
- const type = Object.values(types.COMPONENT_TYPES).find(
544
- (t) => t.value === componentType
545
- );
546
- return type?.label || componentType;
547
- }
548
- function getComponentTypeAcronym(componentType) {
549
- const type = Object.values(types.COMPONENT_TYPES).find(
550
- (t) => t.value === componentType
551
- );
552
- return type?.acronym || componentType.substring(0, 2).toUpperCase();
553
- }
554
- function resolveComponentType(elementType) {
555
- for (const [componentValue, elements] of Object.entries(
556
- types.SKHEMA_MAPPING.elementFlow
557
- )) {
558
- if (elements.some((e) => e.value === elementType)) {
559
- return componentValue;
560
- }
561
- }
562
- return "diagnosis";
563
- }
564
- function getElementTypesForComponent(componentType) {
565
- if (!isValidComponentType(componentType)) return [];
566
- const elements = types.SKHEMA_MAPPING.elementFlow[componentType];
567
- return elements?.map((e) => e.value) || [];
568
- }
569
411
  function generateContentHash(content) {
570
412
  let hash = 0;
571
413
  const cleanContent = content.trim().substring(0, 200);
@@ -654,49 +496,13 @@ function validateContentSecurity(content) {
654
496
  issues
655
497
  };
656
498
  }
657
- function isValidElementType(elementType) {
658
- const validTypes = Object.values(types.ELEMENT_TYPES).map((type) => type.value);
659
- return validTypes.includes(elementType);
660
- }
661
- function validateAttributes(element) {
662
- const errors = [];
663
- const elementType = element.getAttribute("element-type");
664
- const contributorId = element.getAttribute("contributor-id");
665
- if (!elementType) {
666
- errors.push("Missing required attribute: element-type");
667
- } else if (!isValidElementType(elementType)) {
668
- const validTypes = Object.values(types.ELEMENT_TYPES).map((t) => t.value).join(", ");
669
- errors.push(
670
- `Invalid element-type "${elementType}". Valid types: ${validTypes}`
671
- );
672
- }
673
- if (!contributorId) {
674
- errors.push("Missing required attribute: contributor-id");
675
- } else if (contributorId.trim().length === 0) {
676
- errors.push("contributor-id cannot be empty");
677
- }
678
- return {
679
- isValid: errors.length === 0,
680
- errors,
681
- elementType: isValidElementType(elementType || "") ? elementType : void 0,
682
- contributorId: contributorId || void 0
683
- };
684
- }
685
- function getElementTypeLabel(elementType) {
686
- const type = Object.values(types.ELEMENT_TYPES).find((t) => t.value === elementType);
687
- return type?.label || elementType;
688
- }
689
- function getElementTypeAcronym(elementType) {
690
- const type = Object.values(types.ELEMENT_TYPES).find((t) => t.value === elementType);
691
- return type?.acronym || elementType.substring(0, 2).toUpperCase();
692
- }
693
499
  function generateStructuredData(content, elementType, contributorId, sourceUrl) {
694
500
  return {
695
501
  "@context": "https://schema.org",
696
502
  "@type": "AnalysisContent",
697
503
  text: content,
698
504
  analysisType: elementType,
699
- category: getElementTypeLabel(elementType),
505
+ category: validation.getElementTypeLabel(elementType),
700
506
  contributor: contributorId,
701
507
  url: generateRedirectUrl(content, elementType, contributorId),
702
508
  provider: {
@@ -728,7 +534,7 @@ function generateRedirectUrl(content, elementType, contributorId, options = {})
728
534
  return `${baseUrl}?type=contributor&contributor_id=${contributorId}&element_type=${elementType}&content_hash=${contentHash}&${params.toString()}`;
729
535
  }
730
536
  function createMetaTags(content, elementType, contributorId) {
731
- const label = getElementTypeLabel(elementType);
537
+ const label = validation.getElementTypeLabel(elementType);
732
538
  return `
733
539
  <div itemscope itemtype="https://schema.org/AnalysisContent" style="display:none;">
734
540
  <meta itemprop="analysisType" content="${elementType}">
@@ -740,7 +546,7 @@ function createMetaTags(content, elementType, contributorId) {
740
546
  `;
741
547
  }
742
548
  function generateComponentStructuredData(title, componentType, contributorId, elements, sourceUrl) {
743
- const componentLabel = getComponentTypeLabel(componentType);
549
+ const componentLabel = validation.getComponentTypeLabel(componentType);
744
550
  return {
745
551
  "@context": "https://schema.org",
746
552
  "@type": "CreativeWork",
@@ -757,7 +563,7 @@ function generateComponentStructuredData(title, componentType, contributorId, el
757
563
  "@type": "AnalysisContent",
758
564
  text: el.content,
759
565
  analysisType: el.elementType,
760
- category: getElementTypeLabel(el.elementType)
566
+ category: validation.getElementTypeLabel(el.elementType)
761
567
  })),
762
568
  provider: {
763
569
  "@type": "Organization",
@@ -787,7 +593,7 @@ function generateComponentRedirectUrl(componentHash, componentType, contributorI
787
593
  return `${baseUrl}?type=component&component_type=${componentType}&component_hash=${componentHash}&contributor_id=${contributorId}&${params.toString()}`;
788
594
  }
789
595
  function createAriaAttributes(elementType) {
790
- const label = getElementTypeLabel(elementType);
596
+ const label = validation.getElementTypeLabel(elementType);
791
597
  return {
792
598
  role: "article",
793
599
  "aria-label": `${label} - Strategic element`,
@@ -931,7 +737,7 @@ const styles$1 = `
931
737
  gap: 12px;
932
738
  }
933
739
 
934
- ${SHARED_CARD_STYLES}
740
+ ${validation.SHARED_CARD_STYLES}
935
741
 
936
742
  /* Error state */
937
743
  .skhema-error {
@@ -1126,13 +932,13 @@ class SkhemaComponent extends HTMLElement {
1126
932
  });
1127
933
  }
1128
934
  render() {
1129
- const validation = this.validateComponentAttributes();
1130
- if (!validation.isValid) {
1131
- this.renderError("Invalid component attributes", validation.errors);
935
+ const validation2 = this.validateComponentAttributes();
936
+ if (!validation2.isValid) {
937
+ this.renderError("Invalid component attributes", validation2.errors);
1132
938
  return;
1133
939
  }
1134
- const componentType = validation.componentType;
1135
- const contributorId = validation.contributorId;
940
+ const componentType = validation2.componentType;
941
+ const contributorId = validation2.contributorId;
1136
942
  const title = this.getAttribute("title") || "";
1137
943
  const childElements = this.gatherChildElements(componentType);
1138
944
  if (childElements.length === 0) {
@@ -1171,7 +977,7 @@ class SkhemaComponent extends HTMLElement {
1171
977
  const contributorId = this.getAttribute("contributor-id");
1172
978
  if (!componentType) {
1173
979
  errors.push("Missing required attribute: component-type");
1174
- } else if (!isValidComponentType(componentType)) {
980
+ } else if (!validation.isValidComponentType(componentType)) {
1175
981
  errors.push(`Invalid component-type "${componentType}"`);
1176
982
  }
1177
983
  if (!contributorId) {
@@ -1182,7 +988,7 @@ class SkhemaComponent extends HTMLElement {
1182
988
  return {
1183
989
  isValid: errors.length === 0,
1184
990
  errors,
1185
- componentType: isValidComponentType(componentType || "") ? componentType : void 0,
991
+ componentType: validation.isValidComponentType(componentType || "") ? componentType : void 0,
1186
992
  contributorId: contributorId || void 0
1187
993
  };
1188
994
  }
@@ -1194,14 +1000,14 @@ class SkhemaComponent extends HTMLElement {
1194
1000
  for (const child of children) {
1195
1001
  const data = child.getElementData?.();
1196
1002
  if (!data) continue;
1197
- if (!validateElementBelongsToComponent(data.elementType, componentType)) {
1003
+ if (!validation.validateElementBelongsToComponent(data.elementType, componentType)) {
1198
1004
  console.warn(
1199
1005
  `skhema-component: element type "${data.elementType}" does not belong to component type "${componentType}"`
1200
1006
  );
1201
1007
  }
1202
1008
  elements.push(data);
1203
1009
  }
1204
- const orderedTypes = getElementTypesForComponent(componentType);
1010
+ const orderedTypes = validation.getElementTypesForComponent(componentType);
1205
1011
  elements.sort((a, b) => {
1206
1012
  const aIdx = orderedTypes.indexOf(a.elementType);
1207
1013
  const bIdx = orderedTypes.indexOf(b.elementType);
@@ -1214,9 +1020,9 @@ class SkhemaComponent extends HTMLElement {
1214
1020
  renderContent(elements) {
1215
1021
  if (!this.contentData) return;
1216
1022
  const { component_type, contributor_id, title } = this.contentData;
1217
- const componentLabel = getComponentTypeLabel(component_type);
1218
- const acronym = getComponentTypeAcronym(component_type);
1219
- const colors = COMPONENT_COLORS[component_type];
1023
+ const componentLabel = validation.getComponentTypeLabel(component_type);
1024
+ const acronym = validation.getComponentTypeAcronym(component_type);
1025
+ const colors = validation.COMPONENT_COLORS[component_type];
1220
1026
  const authorFooterHtml = resolveAuthorFooterHtml(this, contributor_id);
1221
1027
  const themeAttribute = this.getAttribute("theme") || "auto";
1222
1028
  const actualTheme = this.getActualTheme(themeAttribute);
@@ -1231,7 +1037,7 @@ class SkhemaComponent extends HTMLElement {
1231
1037
  const elementSectionsHtml = groupedElements.map(
1232
1038
  (group) => `
1233
1039
  <div class="skhema-element-group">
1234
- <div class="skhema-element-label">${getElementTypeLabel(group.elementType)}</div>
1040
+ <div class="skhema-element-label">${validation.getElementTypeLabel(group.elementType)}</div>
1235
1041
  ${group.items.map(
1236
1042
  (item) => `<div class="skhema-element-content">${sanitizeContent(item.content)}</div>`
1237
1043
  ).join("")}
@@ -1265,7 +1071,7 @@ class SkhemaComponent extends HTMLElement {
1265
1071
  <div class="skhema-footer">
1266
1072
  <div class="skhema-footer-row">
1267
1073
  <span class="skhema-contributor-line">
1268
- ${USER_ICON_SVG}
1074
+ ${validation.USER_ICON_SVG}
1269
1075
  ${authorFooterHtml}
1270
1076
  </span>
1271
1077
  <a href="${redirectUrl}"
@@ -1601,7 +1407,7 @@ const styles = `
1601
1407
  gap: 12px;
1602
1408
  }
1603
1409
 
1604
- ${SHARED_CARD_STYLES}
1410
+ ${validation.SHARED_CARD_STYLES}
1605
1411
 
1606
1412
  /* Element type label next to badge */
1607
1413
  .skhema-type-label {
@@ -1786,11 +1592,11 @@ class SkhemaElement extends HTMLElement {
1786
1592
  this.componentConnected = true;
1787
1593
  if (this.closest("skhema-component")) {
1788
1594
  this.nestedMode = true;
1789
- const validation = validateAttributes(this);
1790
- if (!validation.isValid) {
1595
+ const validation$1 = validation.validateAttributes(this);
1596
+ if (!validation$1.isValid) {
1791
1597
  console.warn(
1792
1598
  "skhema-element: invalid attributes in nested mode",
1793
- validation.errors
1599
+ validation$1.errors
1794
1600
  );
1795
1601
  return;
1796
1602
  }
@@ -1800,8 +1606,8 @@ class SkhemaElement extends HTMLElement {
1800
1606
  return;
1801
1607
  }
1802
1608
  this.contentData = {
1803
- contributor_id: validation.contributorId,
1804
- element_type: validation.elementType,
1609
+ contributor_id: validation$1.contributorId,
1610
+ element_type: validation$1.elementType,
1805
1611
  content,
1806
1612
  content_hash: generateContentHash(content),
1807
1613
  source_url: this.getAttribute("source-url") || window.location.href,
@@ -1849,9 +1655,9 @@ class SkhemaElement extends HTMLElement {
1849
1655
  };
1850
1656
  }
1851
1657
  render() {
1852
- const validation = validateAttributes(this);
1853
- if (!validation.isValid) {
1854
- this.renderError("Invalid component attributes", validation.errors);
1658
+ const validation$1 = validation.validateAttributes(this);
1659
+ if (!validation$1.isValid) {
1660
+ this.renderError("Invalid component attributes", validation$1.errors);
1855
1661
  return;
1856
1662
  }
1857
1663
  const content = this.getContent();
@@ -1870,8 +1676,8 @@ class SkhemaElement extends HTMLElement {
1870
1676
  return;
1871
1677
  }
1872
1678
  this.contentData = {
1873
- contributor_id: validation.contributorId,
1874
- element_type: validation.elementType,
1679
+ contributor_id: validation$1.contributorId,
1680
+ element_type: validation$1.elementType,
1875
1681
  content,
1876
1682
  content_hash: generateContentHash(content),
1877
1683
  source_url: this.getAttribute("source-url") || window.location.href,
@@ -1887,7 +1693,7 @@ class SkhemaElement extends HTMLElement {
1887
1693
  renderContent() {
1888
1694
  if (!this.contentData) return;
1889
1695
  const { element_type, contributor_id, content } = this.contentData;
1890
- const label = getElementTypeLabel(element_type);
1696
+ const label = validation.getElementTypeLabel(element_type);
1891
1697
  const redirectUrl = generateRedirectUrl(
1892
1698
  content,
1893
1699
  element_type,
@@ -1896,9 +1702,9 @@ class SkhemaElement extends HTMLElement {
1896
1702
  const themeAttribute = this.getAttribute("theme") || "auto";
1897
1703
  const actualTheme = this.getActualTheme(themeAttribute);
1898
1704
  const authorFooterHtml = resolveAuthorFooterHtml(this, contributor_id);
1899
- const componentType = resolveComponentType(element_type);
1900
- const acronym = getComponentTypeAcronym(componentType);
1901
- const colors = COMPONENT_COLORS[componentType];
1705
+ const componentType = validation.resolveComponentType(element_type);
1706
+ const acronym = validation.getComponentTypeAcronym(componentType);
1707
+ const colors = validation.COMPONENT_COLORS[componentType];
1902
1708
  const ariaAttrs = createAriaAttributes(element_type);
1903
1709
  Object.entries(ariaAttrs).forEach(([key, value]) => {
1904
1710
  this.setAttribute(key, value);
@@ -1922,7 +1728,7 @@ class SkhemaElement extends HTMLElement {
1922
1728
  <div class="skhema-footer">
1923
1729
  <div class="skhema-footer-row">
1924
1730
  <span class="skhema-contributor-line">
1925
- ${USER_ICON_SVG}
1731
+ ${validation.USER_ICON_SVG}
1926
1732
  ${authorFooterHtml}
1927
1733
  </span>
1928
1734
  <a href="${redirectUrl}"
@@ -2165,6 +1971,15 @@ if (typeof window !== "undefined") {
2165
1971
  );
2166
1972
  }
2167
1973
  }
1974
+ exports.getComponentTypeAcronym = validation.getComponentTypeAcronym;
1975
+ exports.getComponentTypeLabel = validation.getComponentTypeLabel;
1976
+ exports.getElementTypeAcronym = validation.getElementTypeAcronym;
1977
+ exports.getElementTypeLabel = validation.getElementTypeLabel;
1978
+ exports.isValidComponentType = validation.isValidComponentType;
1979
+ exports.isValidElementType = validation.isValidElementType;
1980
+ exports.resolveComponentType = validation.resolveComponentType;
1981
+ exports.validateAttributes = validation.validateAttributes;
1982
+ exports.validateElementBelongsToComponent = validation.validateElementBelongsToComponent;
2168
1983
  exports.SkhemaComponent = SkhemaComponent;
2169
1984
  exports.SkhemaElement = SkhemaElement;
2170
1985
  exports.default = SkhemaElement;
@@ -2173,18 +1988,9 @@ exports.generateComponentRedirectUrl = generateComponentRedirectUrl;
2173
1988
  exports.generateComponentStructuredData = generateComponentStructuredData;
2174
1989
  exports.generateRedirectUrl = generateRedirectUrl;
2175
1990
  exports.generateStructuredData = generateStructuredData;
2176
- exports.getComponentTypeAcronym = getComponentTypeAcronym;
2177
- exports.getComponentTypeLabel = getComponentTypeLabel;
2178
- exports.getElementTypeAcronym = getElementTypeAcronym;
2179
- exports.getElementTypeLabel = getElementTypeLabel;
2180
- exports.isValidComponentType = isValidComponentType;
2181
- exports.isValidElementType = isValidElementType;
2182
1991
  exports.registerSkhemaComponent = registerSkhemaComponent;
2183
1992
  exports.registerSkhemaElement = registerSkhemaElement;
2184
- exports.resolveComponentType = resolveComponentType;
2185
1993
  exports.shouldTrackAnalytics = shouldTrackAnalytics;
2186
1994
  exports.trackComponentClick = trackComponentClick;
2187
1995
  exports.trackComponentEmbedLoad = trackComponentEmbedLoad;
2188
- exports.validateAttributes = validateAttributes;
2189
- exports.validateElementBelongsToComponent = validateElementBelongsToComponent;
2190
1996
  //# sourceMappingURL=index.cjs.map