@skhema/embed 0.1.8 → 0.1.10

package/dist/render.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"render.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/render.d.ts

@@ -0,0 +1,2 @@
+export * from './render/index'
+export {}

package/dist/render.es.js

@@ -0,0 +1,7 @@
+import "./validation-Dt4L_df8.js";
+import { r, a } from "./index-jwx5CXLB.js";
+export {
+  r as renderComponentCardHtml,
+  a as renderElementCardHtml
+};
+//# sourceMappingURL=render.es.js.map

package/dist/render.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"render.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/styles/design-tokens.d.ts

@@ -31,6 +31,38 @@ export declare const COMPONENT_COLORS: {
     };
 };
 export type ComponentColorKey = keyof typeof COMPONENT_COLORS;
+/**
+ * Email-safe flat hex palette for the card surface, per theme. These mirror the
+ * Tailwind slate values behind the `CARD_VARS` HSL tokens, pre-resolved to hex
+ * because email clients ignore `<style>` / CSS vars. The card renderer
+ * (`@skhema/embed/render`) inlines these so the live browser embed and email
+ * share one colour system (see the "converge on hex" decision).
+ */
+export declare const CARD_PALETTE: {
+    readonly light: {
+        readonly cardBg: "#ffffff";
+        readonly border: "#e2e8f0";
+        readonly text: "#020817";
+        readonly textMuted: "#64748b";
+    };
+    readonly dark: {
+        readonly cardBg: "#020817";
+        readonly border: "#1e293b";
+        readonly text: "#f8fafc";
+        readonly textMuted: "#94a3b8";
+    };
+};
+export type CardTheme = keyof typeof CARD_PALETTE;
+/** Save-button brand colours (hex) — match the `--skhema-primary*` HSL tokens. */
+export declare const PRIMARY_HEX = "#cd476a";
+export declare const PRIMARY_HOVER_HEX = "#b53d5e";
+export declare const PRIMARY_PRESSED_HEX = "#9d3552";
+/** Card geometry / typography shared by the renderer and the browser embed. */
+export declare const CARD_RADIUS = "4px";
+export declare const CARD_SHADOW = "0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1)";
+export declare const CARD_SHADOW_LG = "0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)";
+export declare const FONT_STACK = "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Inter', sans-serif";
+export declare const MONO_STACK = "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace";
 /**
  * Shared base card CSS variables for light and dark modes.
  */
@@ -54,10 +86,6 @@ export declare const CARD_VARS: {
         readonly '--skhema-surface-subtle': "hsl(217.2 32.6% 12%)";
     };
 };
-/**
- * Shared card structure styles (used by both SkhemaElement and SkhemaComponent).
- */
-export declare const SHARED_CARD_STYLES = "\n/* Monospace acronym badge */\n.skhema-acronym-badge {\n  display: inline-flex;\n  align-items: center;\n  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;\n  font-size: 10px;\n  font-weight: 600;\n  padding: 2px 6px;\n  border-radius: 2px;\n  letter-spacing: 0.02em;\n  flex-shrink: 0;\n}\n\n/* Footer attribution tagline */\n.skhema-footer-attribution {\n  font-size: 11px;\n  color: var(--skhema-text-muted);\n  line-height: 1.4;\n}\n\n.skhema-footer-attribution a {\n  color: var(--skhema-text-muted);\n  text-decoration: underline;\n  text-decoration-color: var(--skhema-border);\n  text-underline-offset: 2px;\n}\n\n.skhema-footer-attribution a:hover {\n  color: var(--skhema-text);\n}\n\n/* Contributor line in footer */\n.skhema-contributor-line {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  color: var(--skhema-text-muted);\n}\n\n.skhema-contributor-line svg {\n  width: 14px;\n  height: 14px;\n  flex-shrink: 0;\n}\n\n.skhema-author-link {\n  color: inherit;\n  text-decoration: none;\n}\n\n.skhema-author-link:hover {\n  color: var(--skhema-text);\n  text-decoration: underline;\n}\n\n/* Save button \u2014 primary brand color */\n.skhema-save-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  background: var(--skhema-primary);\n  color: white;\n  border: none;\n  padding: 6px 14px;\n  border-radius: calc(var(--skhema-radius) + 2px);\n  font-size: 12px;\n  font-weight: 500;\n  text-decoration: none;\n  cursor: pointer;\n  transition: background 0.15s ease;\n  white-space: nowrap;\n}\n\n.skhema-save-btn:hover {\n  background: var(--skhema-primary-hover);\n}\n\n.skhema-save-btn:active {\n  background: var(--skhema-primary-pressed);\n}\n\n.skhema-save-btn:focus {\n  outline: 2px solid var(--skhema-primary);\n  outline-offset: 2px;\n}\n\n.skhema-save-btn::after {\n  content: '\\2192';\n  font-size: 13px;\n}\n";
 /**
  * User SVG icon (inline, no external deps).
  */

package/dist/styles/design-tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"design-tokens.d.ts","sourceRoot":"","sources":["../../src/styles/design-tokens.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BnB,CAAA;AAEV,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,gBAAgB,CAAA;AAE7D;;GAEG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;CAmBZ,CAAA;AAEV;;GAEG;AACH,eAAO,MAAM,kBAAkB,m4DA4F9B,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,kRAA4P,CAAA"}
+{"version":3,"file":"design-tokens.d.ts","sourceRoot":"","sources":["../../src/styles/design-tokens.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BnB,CAAA;AAEV,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,gBAAgB,CAAA;AAE7D;;;;;;GAMG;AACH,eAAO,MAAM,YAAY;;;;;;;;;;;;;CAaf,CAAA;AAEV,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,YAAY,CAAA;AAEjD,kFAAkF;AAClF,eAAO,MAAM,WAAW,YAAY,CAAA;AACpC,eAAO,MAAM,iBAAiB,YAAY,CAAA;AAC1C,eAAO,MAAM,mBAAmB,YAAY,CAAA;AAE5C,+EAA+E;AAC/E,eAAO,MAAM,WAAW,QAAQ,CAAA;AAChC,eAAO,MAAM,WAAW,gEACuC,CAAA;AAC/D,eAAO,MAAM,cAAc,qEACyC,CAAA;AACpE,eAAO,MAAM,UAAU,iFACyD,CAAA;AAChF,eAAO,MAAM,UAAU,wEACgD,CAAA;AAEvE;;GAEG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;CAmBZ,CAAA;AAEV;;GAEG;AACH,eAAO,MAAM,aAAa,kRAA4P,CAAA"}

package/dist/tokens.cjs

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const validation = require("./validation-DCw9rQeH.cjs");
+exports.CARD_VARS = validation.CARD_VARS;
+exports.COMPONENT_COLORS = validation.COMPONENT_COLORS;
+exports.USER_ICON_SVG = validation.USER_ICON_SVG;
+exports.getComponentTypeAcronym = validation.getComponentTypeAcronym;
+exports.getComponentTypeLabel = validation.getComponentTypeLabel;
+exports.getElementTypeAcronym = validation.getElementTypeAcronym;
+exports.getElementTypeLabel = validation.getElementTypeLabel;
+exports.getElementTypesForComponent = validation.getElementTypesForComponent;
+exports.isValidComponentType = validation.isValidComponentType;
+exports.isValidElementType = validation.isValidElementType;
+exports.resolveComponentType = validation.resolveComponentType;
+exports.validateElementBelongsToComponent = validation.validateElementBelongsToComponent;
+//# sourceMappingURL=tokens.cjs.map

package/dist/tokens.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}

package/dist/tokens.d.ts

@@ -0,0 +1,17 @@
+/**
+ * DOM-free entry point for `@skhema/embed`.
+ *
+ * The package's main barrel (`@skhema/embed`) imports the `SkhemaElement` /
+ * `SkhemaComponent` web-component classes, which `extends HTMLElement` at
+ * module-evaluation time — that throws in a non-DOM runtime (Node). Server /
+ * CLI consumers (e.g. `sk comms curated`) that only need the design tokens and
+ * the pure component-type helpers must import them from here instead, so they
+ * never load the web components.
+ *
+ * Everything re-exported below is pure (no DOM, no side effects).
+ */
+export { CARD_VARS, COMPONENT_COLORS, USER_ICON_SVG, } from './styles/design-tokens.js';
+export type { ComponentColorKey } from './styles/design-tokens.js';
+export { getComponentTypeAcronym, getComponentTypeLabel, getElementTypesForComponent, isValidComponentType, resolveComponentType, validateElementBelongsToComponent, } from './utils/component-validation.js';
+export { getElementTypeAcronym, getElementTypeLabel, isValidElementType, } from './utils/validation.js';
+//# sourceMappingURL=tokens.d.ts.map

package/dist/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,EACL,SAAS,EACT,gBAAgB,EAChB,aAAa,GACd,MAAM,2BAA2B,CAAA;AAClC,YAAY,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAElE,OAAO,EACL,uBAAuB,EACvB,qBAAqB,EACrB,2BAA2B,EAC3B,oBAAoB,EACpB,oBAAoB,EACpB,iCAAiC,GAClC,MAAM,iCAAiC,CAAA;AAExC,OAAO,EACL,qBAAqB,EACrB,mBAAmB,EACnB,kBAAkB,GACnB,MAAM,uBAAuB,CAAA"}

package/dist/tokens.es.js

@@ -0,0 +1,16 @@
+import { C, a, U, g, b, c, d, e, i, f, r, v } from "./validation-Dt4L_df8.js";
+export {
+  C as CARD_VARS,
+  a as COMPONENT_COLORS,
+  U as USER_ICON_SVG,
+  g as getComponentTypeAcronym,
+  b as getComponentTypeLabel,
+  c as getElementTypeAcronym,
+  d as getElementTypeLabel,
+  e as getElementTypesForComponent,
+  i as isValidComponentType,
+  f as isValidElementType,
+  r as resolveComponentType,
+  v as validateElementBelongsToComponent
+};
+//# sourceMappingURL=tokens.es.js.map

package/dist/tokens.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/utils/color.d.ts

@@ -0,0 +1,25 @@
+/**
+ * DOM-free colour utilities for the email-safe card renderer.
+ *
+ * The card palette (`COMPONENT_COLORS`) is authored in `oklch()` for the live
+ * browser embed, but email clients can't parse `oklch()` and `<style>` is
+ * stripped, so every colour must be a pre-computed sRGB hex with all styles
+ * inlined. This converts a single `oklch(...)` token to hex, compositing any
+ * alpha over a flat background (white for light cards, the dark card surface
+ * for dark cards) so the result is opaque and email-safe.
+ *
+ * This is the single source of the conversion that `sk comms curated` and the
+ * `CuratedElements` email template previously duplicated.
+ */
+/** Brand pink (hsl(344 57% 54%)) — fallback when a component palette is missing. */
+export declare const BRAND_PINK = "#cd476a";
+/**
+ * Convert a single `oklch(...)` token to an email-safe sRGB hex. When the token
+ * carries an alpha (e.g. the badge `bg` @ 0.15 / `border` @ 0.3), the colour is
+ * composited over `overHex` so the result is a flat opaque hex.
+ *
+ * @param token  An `oklch(L C H)` or `oklch(L C H / A)` string.
+ * @param overHex The flat background to composite alpha over (default white).
+ */
+export declare function oklchToHex(token: string, overHex?: string): string;
+//# sourceMappingURL=color.d.ts.map

package/dist/utils/color.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../src/utils/color.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,oFAAoF;AACpF,eAAO,MAAM,UAAU,YAAY,CAAA;AAWnC;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,SAAY,GAAG,MAAM,CAqCrE"}

package/dist/utils/sanitization.d.ts

@@ -1,5 +1,11 @@
 /**
- * Content sanitization utilities for Skhema web component
+ * Content sanitization utilities for Skhema cards.
+ *
+ * DOM-free by design: `sanitizeContent` is imported by the email-safe card
+ * renderer (`@skhema/embed/render`), which must run in Node / email / CLI
+ * runtimes with no `document`. Keep every export here free of DOM access at
+ * call time (the legacy `stripHtml` below is the one exception and is not used
+ * by the renderer).
  */
 /**
  * Sanitizes content to prevent XSS attacks and removes URLs

package/dist/utils/sanitization.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sanitization.d.ts","sourceRoot":"","sources":["../../src/utils/sanitization.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAqBvD;AA4DD;;;;GAIG;AACH,wBAAgB,uBAAuB,CAAC,OAAO,EAAE,MAAM,GAAG;IACxD,QAAQ,EAAE,OAAO,CAAA;IACjB,MAAM,EAAE,MAAM,EAAE,CAAA;CACjB,CAqCA;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAIjD;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAUrD"}
+{"version":3,"file":"sanitization.d.ts","sourceRoot":"","sources":["../../src/utils/sanitization.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAcH;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAcvD;AA4DD;;;;GAIG;AACH,wBAAgB,uBAAuB,CAAC,OAAO,EAAE,MAAM,GAAG;IACxD,QAAQ,EAAE,OAAO,CAAA;IACjB,MAAM,EAAE,MAAM,EAAE,CAAA;CACjB,CAqCA;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAIjD;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAUrD"}

package/dist/validation-DCw9rQeH.cjs

@@ -0,0 +1,176 @@
+"use strict";
+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 CARD_PALETTE = {
+  light: {
+    cardBg: "#ffffff",
+    // hsl(0 0% 100%)
+    border: "#e2e8f0",
+    // hsl(214.3 31.8% 91.4%) — slate-200
+    text: "#020817",
+    // hsl(222.2 84% 4.9%)  — slate-950
+    textMuted: "#64748b"
+    // hsl(215.4 16.3% 46.9%) — slate-500
+  },
+  dark: {
+    cardBg: "#020817",
+    // hsl(222.2 84% 4.9%)  — slate-950
+    border: "#1e293b",
+    // hsl(217.2 32.6% 17.5%) — slate-800
+    text: "#f8fafc",
+    // hsl(210 40% 98%)     — slate-50
+    textMuted: "#94a3b8"
+    // hsl(215 20.2% 65.1%)  — slate-400
+  }
+};
+const PRIMARY_HEX = "#cd476a";
+const PRIMARY_HOVER_HEX = "#b53d5e";
+const PRIMARY_PRESSED_HEX = "#9d3552";
+const CARD_RADIUS = "4px";
+const CARD_SHADOW = "0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1)";
+const CARD_SHADOW_LG = "0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)";
+const FONT_STACK = "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Inter', sans-serif";
+const MONO_STACK = "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace";
+const CARD_VARS = {
+  light: {
+    "--skhema-bg": "hsl(0 0% 100%)",
+    "--skhema-card": "hsl(0 0% 100%)",
+    "--skhema-border": "hsl(214.3 31.8% 91.4%)",
+    "--skhema-text": "hsl(222.2 84% 4.9%)",
+    "--skhema-text-muted": "hsl(215.4 16.3% 46.9%)",
+    "--skhema-accent": "hsl(210 40% 96%)",
+    "--skhema-surface-subtle": "hsl(210 40% 97%)"
+  },
+  dark: {
+    "--skhema-bg": "hsl(222.2 84% 4.9%)",
+    "--skhema-card": "hsl(222.2 84% 4.9%)",
+    "--skhema-border": "hsl(217.2 32.6% 17.5%)",
+    "--skhema-text": "hsl(210 40% 98%)",
+    "--skhema-text-muted": "hsl(215 20.2% 65.1%)",
+    "--skhema-accent": "hsl(217.2 32.6% 17.5%)",
+    "--skhema-surface-subtle": "hsl(217.2 32.6% 12%)"
+  }
+};
+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 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 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();
+}
+exports.CARD_PALETTE = CARD_PALETTE;
+exports.CARD_RADIUS = CARD_RADIUS;
+exports.CARD_SHADOW = CARD_SHADOW;
+exports.CARD_SHADOW_LG = CARD_SHADOW_LG;
+exports.CARD_VARS = CARD_VARS;
+exports.COMPONENT_COLORS = COMPONENT_COLORS;
+exports.FONT_STACK = FONT_STACK;
+exports.MONO_STACK = MONO_STACK;
+exports.PRIMARY_HEX = PRIMARY_HEX;
+exports.PRIMARY_HOVER_HEX = PRIMARY_HOVER_HEX;
+exports.PRIMARY_PRESSED_HEX = PRIMARY_PRESSED_HEX;
+exports.USER_ICON_SVG = USER_ICON_SVG;
+exports.getComponentTypeAcronym = getComponentTypeAcronym;
+exports.getComponentTypeLabel = getComponentTypeLabel;
+exports.getElementTypeAcronym = getElementTypeAcronym;
+exports.getElementTypeLabel = getElementTypeLabel;
+exports.getElementTypesForComponent = getElementTypesForComponent;
+exports.isValidComponentType = isValidComponentType;
+exports.isValidElementType = isValidElementType;
+exports.resolveComponentType = resolveComponentType;
+exports.validateAttributes = validateAttributes;
+exports.validateElementBelongsToComponent = validateElementBelongsToComponent;
+//# sourceMappingURL=validation-DCw9rQeH.cjs.map

package/dist/validation-DCw9rQeH.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation-DCw9rQeH.cjs","sources":["../src/styles/design-tokens.ts","../src/utils/component-validation.ts","../src/utils/validation.ts"],"sourcesContent":["/**\n * Hardcoded color tokens for component-type badge colors.\n * Embeds can't rely on host page CSS vars, so we use inline values.\n * Source: skhema-web/src/app/globals.css oklch tokens converted to HSL-ish for browser compat.\n */\n\nexport const COMPONENT_COLORS = {\n  diagnosis: {\n    bg: 'oklch(0.65 0.06 25 / 0.15)',\n    text: 'oklch(0.65 0.06 25)',\n    border: 'oklch(0.65 0.06 25 / 0.3)',\n  },\n  method: {\n    bg: 'oklch(0.6 0.06 250 / 0.15)',\n    text: 'oklch(0.6 0.06 250)',\n    border: 'oklch(0.6 0.06 250 / 0.3)',\n  },\n  initiatives: {\n    bg: 'oklch(0.6 0.06 155 / 0.15)',\n    text: 'oklch(0.6 0.06 155)',\n    border: 'oklch(0.6 0.06 155 / 0.3)',\n  },\n  measures: {\n    bg: 'oklch(0.6 0.06 300 / 0.15)',\n    text: 'oklch(0.6 0.06 300)',\n    border: 'oklch(0.6 0.06 300 / 0.3)',\n  },\n  support: {\n    bg: 'oklch(0.65 0.06 65 / 0.15)',\n    text: 'oklch(0.65 0.06 65)',\n    border: 'oklch(0.65 0.06 65 / 0.3)',\n  },\n} as const\n\nexport type ComponentColorKey = keyof typeof COMPONENT_COLORS\n\n/**\n * Email-safe flat hex palette for the card surface, per theme. These mirror the\n * Tailwind slate values behind the `CARD_VARS` HSL tokens, pre-resolved to hex\n * because email clients ignore `<style>` / CSS vars. The card renderer\n * (`@skhema/embed/render`) inlines these so the live browser embed and email\n * share one colour system (see the \"converge on hex\" decision).\n */\nexport const CARD_PALETTE = {\n  light: {\n    cardBg: '#ffffff', // hsl(0 0% 100%)\n    border: '#e2e8f0', // hsl(214.3 31.8% 91.4%) — slate-200\n    text: '#020817', // hsl(222.2 84% 4.9%)  — slate-950\n    textMuted: '#64748b', // hsl(215.4 16.3% 46.9%) — slate-500\n  },\n  dark: {\n    cardBg: '#020817', // hsl(222.2 84% 4.9%)  — slate-950\n    border: '#1e293b', // hsl(217.2 32.6% 17.5%) — slate-800\n    text: '#f8fafc', // hsl(210 40% 98%)     — slate-50\n    textMuted: '#94a3b8', // hsl(215 20.2% 65.1%)  — slate-400\n  },\n} as const\n\nexport type CardTheme = keyof typeof CARD_PALETTE\n\n/** Save-button brand colours (hex) — match the `--skhema-primary*` HSL tokens. */\nexport const PRIMARY_HEX = '#cd476a' // hsl(344 57% 54%)\nexport const PRIMARY_HOVER_HEX = '#b53d5e' // hsl(344 50% 47%)\nexport const PRIMARY_PRESSED_HEX = '#9d3552' // hsl(343 50% 41%)\n\n/** Card geometry / typography shared by the renderer and the browser embed. */\nexport const CARD_RADIUS = '4px' // calc(0.1rem + 2px) ≈ 3.6px\nexport const CARD_SHADOW =\n  '0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1)'\nexport const CARD_SHADOW_LG =\n  '0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)'\nexport const FONT_STACK =\n  \"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Inter', sans-serif\"\nexport const MONO_STACK =\n  \"ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace\"\n\n/**\n * Shared base card CSS variables for light and dark modes.\n */\nexport const CARD_VARS = {\n  light: {\n    '--skhema-bg': 'hsl(0 0% 100%)',\n    '--skhema-card': 'hsl(0 0% 100%)',\n    '--skhema-border': 'hsl(214.3 31.8% 91.4%)',\n    '--skhema-text': 'hsl(222.2 84% 4.9%)',\n    '--skhema-text-muted': 'hsl(215.4 16.3% 46.9%)',\n    '--skhema-accent': 'hsl(210 40% 96%)',\n    '--skhema-surface-subtle': 'hsl(210 40% 97%)',\n  },\n  dark: {\n    '--skhema-bg': 'hsl(222.2 84% 4.9%)',\n    '--skhema-card': 'hsl(222.2 84% 4.9%)',\n    '--skhema-border': 'hsl(217.2 32.6% 17.5%)',\n    '--skhema-text': 'hsl(210 40% 98%)',\n    '--skhema-text-muted': 'hsl(215 20.2% 65.1%)',\n    '--skhema-accent': 'hsl(217.2 32.6% 17.5%)',\n    '--skhema-surface-subtle': 'hsl(217.2 32.6% 12%)',\n  },\n} as const\n\n/**\n * User SVG icon (inline, no external deps).\n */\nexport 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>`\n","import type { ComponentValue, ElementValue } from '@skhema/types'\nimport { COMPONENT_TYPES, SKHEMA_MAPPING } from '@skhema/types'\n\n/**\n * Validate that a string is a valid component type.\n */\nexport function isValidComponentType(\n  componentType: string\n): componentType is ComponentValue {\n  const validTypes = Object.values(COMPONENT_TYPES).map((t) => t.value)\n  return validTypes.includes(componentType as ComponentValue)\n}\n\n/**\n * Validate that an element type belongs to the given component type.\n */\nexport function validateElementBelongsToComponent(\n  elementType: string,\n  componentType: string\n): boolean {\n  if (!isValidComponentType(componentType)) return false\n\n  const validElements =\n    SKHEMA_MAPPING.elementFlow[\n      componentType as keyof typeof SKHEMA_MAPPING.elementFlow\n    ]\n  if (!validElements) return false\n\n  return validElements.some((e) => e.value === elementType)\n}\n\n/**\n * Get the human-readable label for a component type.\n */\nexport function getComponentTypeLabel(componentType: string): string {\n  const type = Object.values(COMPONENT_TYPES).find(\n    (t) => t.value === componentType\n  )\n  return type?.label || componentType\n}\n\n/**\n * Get the acronym for a component type (e.g., 'BD' for diagnosis).\n */\nexport function getComponentTypeAcronym(componentType: string): string {\n  const type = Object.values(COMPONENT_TYPES).find(\n    (t) => t.value === componentType\n  )\n  return type?.acronym || componentType.substring(0, 2).toUpperCase()\n}\n\n/**\n * Resolve which component type an element belongs to.\n * Returns the component value, or 'diagnosis' as fallback.\n */\nexport function resolveComponentType(elementType: string): ComponentValue {\n  for (const [componentValue, elements] of Object.entries(\n    SKHEMA_MAPPING.elementFlow\n  )) {\n    if (elements.some((e) => e.value === elementType)) {\n      return componentValue as ComponentValue\n    }\n  }\n  return 'diagnosis'\n}\n\n/**\n * Get all valid element types for a given component, ordered per the mapping.\n */\nexport function getElementTypesForComponent(\n  componentType: string\n): ElementValue[] {\n  if (!isValidComponentType(componentType)) return []\n  const elements =\n    SKHEMA_MAPPING.elementFlow[\n      componentType as keyof typeof SKHEMA_MAPPING.elementFlow\n    ]\n  return elements?.map((e) => e.value) || []\n}\n","import type { ElementValue } from '@skhema/types'\nimport { ELEMENT_TYPES } from '@skhema/types'\n\nexport function isValidElementType(\n  elementType: string\n): elementType is ElementValue {\n  const validTypes = Object.values(ELEMENT_TYPES).map((type) => type.value)\n  return validTypes.includes(elementType as ElementValue)\n}\n\nexport function validateAttributes(element: HTMLElement): {\n  isValid: boolean\n  errors: string[]\n  elementType?: ElementValue\n  contributorId?: string\n} {\n  const errors: string[] = []\n\n  const elementType = element.getAttribute('element-type')\n  const contributorId = element.getAttribute('contributor-id')\n\n  if (!elementType) {\n    errors.push('Missing required attribute: element-type')\n  } else if (!isValidElementType(elementType)) {\n    const validTypes = Object.values(ELEMENT_TYPES)\n      .map((t) => t.value)\n      .join(', ')\n    errors.push(\n      `Invalid element-type \"${elementType}\". Valid types: ${validTypes}`\n    )\n  }\n\n  if (!contributorId) {\n    errors.push('Missing required attribute: contributor-id')\n  } else if (contributorId.trim().length === 0) {\n    errors.push('contributor-id cannot be empty')\n  }\n\n  return {\n    isValid: errors.length === 0,\n    errors,\n    elementType: isValidElementType(elementType || '')\n      ? (elementType as ElementValue)\n      : undefined,\n    contributorId: contributorId || undefined,\n  }\n}\n\nexport function getElementTypeLabel(elementType: ElementValue): string {\n  const type = Object.values(ELEMENT_TYPES).find((t) => t.value === elementType)\n  return type?.label || elementType\n}\n\nexport function getElementTypeAcronym(elementType: ElementValue): string {\n  const type = Object.values(ELEMENT_TYPES).find((t) => t.value === elementType)\n  return type?.acronym || elementType.substring(0, 2).toUpperCase()\n}\n"],"names":["COMPONENT_TYPES","SKHEMA_MAPPING","ELEMENT_TYPES"],"mappings":"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"}

package/dist/validation-Dt4L_df8.js

@@ -0,0 +1,177 @@
+import { COMPONENT_TYPES, SKHEMA_MAPPING, 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 CARD_PALETTE = {
+  light: {
+    cardBg: "#ffffff",
+    // hsl(0 0% 100%)
+    border: "#e2e8f0",
+    // hsl(214.3 31.8% 91.4%) — slate-200
+    text: "#020817",
+    // hsl(222.2 84% 4.9%)  — slate-950
+    textMuted: "#64748b"
+    // hsl(215.4 16.3% 46.9%) — slate-500
+  },
+  dark: {
+    cardBg: "#020817",
+    // hsl(222.2 84% 4.9%)  — slate-950
+    border: "#1e293b",
+    // hsl(217.2 32.6% 17.5%) — slate-800
+    text: "#f8fafc",
+    // hsl(210 40% 98%)     — slate-50
+    textMuted: "#94a3b8"
+    // hsl(215 20.2% 65.1%)  — slate-400
+  }
+};
+const PRIMARY_HEX = "#cd476a";
+const PRIMARY_HOVER_HEX = "#b53d5e";
+const PRIMARY_PRESSED_HEX = "#9d3552";
+const CARD_RADIUS = "4px";
+const CARD_SHADOW = "0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1)";
+const CARD_SHADOW_LG = "0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)";
+const FONT_STACK = "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Inter', sans-serif";
+const MONO_STACK = "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace";
+const CARD_VARS = {
+  light: {
+    "--skhema-bg": "hsl(0 0% 100%)",
+    "--skhema-card": "hsl(0 0% 100%)",
+    "--skhema-border": "hsl(214.3 31.8% 91.4%)",
+    "--skhema-text": "hsl(222.2 84% 4.9%)",
+    "--skhema-text-muted": "hsl(215.4 16.3% 46.9%)",
+    "--skhema-accent": "hsl(210 40% 96%)",
+    "--skhema-surface-subtle": "hsl(210 40% 97%)"
+  },
+  dark: {
+    "--skhema-bg": "hsl(222.2 84% 4.9%)",
+    "--skhema-card": "hsl(222.2 84% 4.9%)",
+    "--skhema-border": "hsl(217.2 32.6% 17.5%)",
+    "--skhema-text": "hsl(210 40% 98%)",
+    "--skhema-text-muted": "hsl(215 20.2% 65.1%)",
+    "--skhema-accent": "hsl(217.2 32.6% 17.5%)",
+    "--skhema-surface-subtle": "hsl(217.2 32.6% 12%)"
+  }
+};
+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 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 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();
+}
+export {
+  CARD_VARS as C,
+  FONT_STACK as F,
+  MONO_STACK as M,
+  PRIMARY_HEX as P,
+  USER_ICON_SVG as U,
+  COMPONENT_COLORS as a,
+  getComponentTypeLabel as b,
+  getElementTypeAcronym as c,
+  getElementTypeLabel as d,
+  getElementTypesForComponent as e,
+  isValidElementType as f,
+  getComponentTypeAcronym as g,
+  CARD_PALETTE as h,
+  isValidComponentType as i,
+  CARD_RADIUS as j,
+  CARD_SHADOW as k,
+  CARD_SHADOW_LG as l,
+  PRIMARY_HOVER_HEX as m,
+  PRIMARY_PRESSED_HEX as n,
+  validateAttributes as o,
+  resolveComponentType as r,
+  validateElementBelongsToComponent as v
+};
+//# sourceMappingURL=validation-Dt4L_df8.js.map

package/dist/validation-Dt4L_df8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation-Dt4L_df8.js","sources":["../src/styles/design-tokens.ts","../src/utils/component-validation.ts","../src/utils/validation.ts"],"sourcesContent":["/**\n * Hardcoded color tokens for component-type badge colors.\n * Embeds can't rely on host page CSS vars, so we use inline values.\n * Source: skhema-web/src/app/globals.css oklch tokens converted to HSL-ish for browser compat.\n */\n\nexport const COMPONENT_COLORS = {\n  diagnosis: {\n    bg: 'oklch(0.65 0.06 25 / 0.15)',\n    text: 'oklch(0.65 0.06 25)',\n    border: 'oklch(0.65 0.06 25 / 0.3)',\n  },\n  method: {\n    bg: 'oklch(0.6 0.06 250 / 0.15)',\n    text: 'oklch(0.6 0.06 250)',\n    border: 'oklch(0.6 0.06 250 / 0.3)',\n  },\n  initiatives: {\n    bg: 'oklch(0.6 0.06 155 / 0.15)',\n    text: 'oklch(0.6 0.06 155)',\n    border: 'oklch(0.6 0.06 155 / 0.3)',\n  },\n  measures: {\n    bg: 'oklch(0.6 0.06 300 / 0.15)',\n    text: 'oklch(0.6 0.06 300)',\n    border: 'oklch(0.6 0.06 300 / 0.3)',\n  },\n  support: {\n    bg: 'oklch(0.65 0.06 65 / 0.15)',\n    text: 'oklch(0.65 0.06 65)',\n    border: 'oklch(0.65 0.06 65 / 0.3)',\n  },\n} as const\n\nexport type ComponentColorKey = keyof typeof COMPONENT_COLORS\n\n/**\n * Email-safe flat hex palette for the card surface, per theme. These mirror the\n * Tailwind slate values behind the `CARD_VARS` HSL tokens, pre-resolved to hex\n * because email clients ignore `<style>` / CSS vars. The card renderer\n * (`@skhema/embed/render`) inlines these so the live browser embed and email\n * share one colour system (see the \"converge on hex\" decision).\n */\nexport const CARD_PALETTE = {\n  light: {\n    cardBg: '#ffffff', // hsl(0 0% 100%)\n    border: '#e2e8f0', // hsl(214.3 31.8% 91.4%) — slate-200\n    text: '#020817', // hsl(222.2 84% 4.9%)  — slate-950\n    textMuted: '#64748b', // hsl(215.4 16.3% 46.9%) — slate-500\n  },\n  dark: {\n    cardBg: '#020817', // hsl(222.2 84% 4.9%)  — slate-950\n    border: '#1e293b', // hsl(217.2 32.6% 17.5%) — slate-800\n    text: '#f8fafc', // hsl(210 40% 98%)     — slate-50\n    textMuted: '#94a3b8', // hsl(215 20.2% 65.1%)  — slate-400\n  },\n} as const\n\nexport type CardTheme = keyof typeof CARD_PALETTE\n\n/** Save-button brand colours (hex) — match the `--skhema-primary*` HSL tokens. */\nexport const PRIMARY_HEX = '#cd476a' // hsl(344 57% 54%)\nexport const PRIMARY_HOVER_HEX = '#b53d5e' // hsl(344 50% 47%)\nexport const PRIMARY_PRESSED_HEX = '#9d3552' // hsl(343 50% 41%)\n\n/** Card geometry / typography shared by the renderer and the browser embed. */\nexport const CARD_RADIUS = '4px' // calc(0.1rem + 2px) ≈ 3.6px\nexport const CARD_SHADOW =\n  '0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1)'\nexport const CARD_SHADOW_LG =\n  '0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)'\nexport const FONT_STACK =\n  \"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Inter', sans-serif\"\nexport const MONO_STACK =\n  \"ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace\"\n\n/**\n * Shared base card CSS variables for light and dark modes.\n */\nexport const CARD_VARS = {\n  light: {\n    '--skhema-bg': 'hsl(0 0% 100%)',\n    '--skhema-card': 'hsl(0 0% 100%)',\n    '--skhema-border': 'hsl(214.3 31.8% 91.4%)',\n    '--skhema-text': 'hsl(222.2 84% 4.9%)',\n    '--skhema-text-muted': 'hsl(215.4 16.3% 46.9%)',\n    '--skhema-accent': 'hsl(210 40% 96%)',\n    '--skhema-surface-subtle': 'hsl(210 40% 97%)',\n  },\n  dark: {\n    '--skhema-bg': 'hsl(222.2 84% 4.9%)',\n    '--skhema-card': 'hsl(222.2 84% 4.9%)',\n    '--skhema-border': 'hsl(217.2 32.6% 17.5%)',\n    '--skhema-text': 'hsl(210 40% 98%)',\n    '--skhema-text-muted': 'hsl(215 20.2% 65.1%)',\n    '--skhema-accent': 'hsl(217.2 32.6% 17.5%)',\n    '--skhema-surface-subtle': 'hsl(217.2 32.6% 12%)',\n  },\n} as const\n\n/**\n * User SVG icon (inline, no external deps).\n */\nexport 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>`\n","import type { ComponentValue, ElementValue } from '@skhema/types'\nimport { COMPONENT_TYPES, SKHEMA_MAPPING } from '@skhema/types'\n\n/**\n * Validate that a string is a valid component type.\n */\nexport function isValidComponentType(\n  componentType: string\n): componentType is ComponentValue {\n  const validTypes = Object.values(COMPONENT_TYPES).map((t) => t.value)\n  return validTypes.includes(componentType as ComponentValue)\n}\n\n/**\n * Validate that an element type belongs to the given component type.\n */\nexport function validateElementBelongsToComponent(\n  elementType: string,\n  componentType: string\n): boolean {\n  if (!isValidComponentType(componentType)) return false\n\n  const validElements =\n    SKHEMA_MAPPING.elementFlow[\n      componentType as keyof typeof SKHEMA_MAPPING.elementFlow\n    ]\n  if (!validElements) return false\n\n  return validElements.some((e) => e.value === elementType)\n}\n\n/**\n * Get the human-readable label for a component type.\n */\nexport function getComponentTypeLabel(componentType: string): string {\n  const type = Object.values(COMPONENT_TYPES).find(\n    (t) => t.value === componentType\n  )\n  return type?.label || componentType\n}\n\n/**\n * Get the acronym for a component type (e.g., 'BD' for diagnosis).\n */\nexport function getComponentTypeAcronym(componentType: string): string {\n  const type = Object.values(COMPONENT_TYPES).find(\n    (t) => t.value === componentType\n  )\n  return type?.acronym || componentType.substring(0, 2).toUpperCase()\n}\n\n/**\n * Resolve which component type an element belongs to.\n * Returns the component value, or 'diagnosis' as fallback.\n */\nexport function resolveComponentType(elementType: string): ComponentValue {\n  for (const [componentValue, elements] of Object.entries(\n    SKHEMA_MAPPING.elementFlow\n  )) {\n    if (elements.some((e) => e.value === elementType)) {\n      return componentValue as ComponentValue\n    }\n  }\n  return 'diagnosis'\n}\n\n/**\n * Get all valid element types for a given component, ordered per the mapping.\n */\nexport function getElementTypesForComponent(\n  componentType: string\n): ElementValue[] {\n  if (!isValidComponentType(componentType)) return []\n  const elements =\n    SKHEMA_MAPPING.elementFlow[\n      componentType as keyof typeof SKHEMA_MAPPING.elementFlow\n    ]\n  return elements?.map((e) => e.value) || []\n}\n","import type { ElementValue } from '@skhema/types'\nimport { ELEMENT_TYPES } from '@skhema/types'\n\nexport function isValidElementType(\n  elementType: string\n): elementType is ElementValue {\n  const validTypes = Object.values(ELEMENT_TYPES).map((type) => type.value)\n  return validTypes.includes(elementType as ElementValue)\n}\n\nexport function validateAttributes(element: HTMLElement): {\n  isValid: boolean\n  errors: string[]\n  elementType?: ElementValue\n  contributorId?: string\n} {\n  const errors: string[] = []\n\n  const elementType = element.getAttribute('element-type')\n  const contributorId = element.getAttribute('contributor-id')\n\n  if (!elementType) {\n    errors.push('Missing required attribute: element-type')\n  } else if (!isValidElementType(elementType)) {\n    const validTypes = Object.values(ELEMENT_TYPES)\n      .map((t) => t.value)\n      .join(', ')\n    errors.push(\n      `Invalid element-type \"${elementType}\". Valid types: ${validTypes}`\n    )\n  }\n\n  if (!contributorId) {\n    errors.push('Missing required attribute: contributor-id')\n  } else if (contributorId.trim().length === 0) {\n    errors.push('contributor-id cannot be empty')\n  }\n\n  return {\n    isValid: errors.length === 0,\n    errors,\n    elementType: isValidElementType(elementType || '')\n      ? (elementType as ElementValue)\n      : undefined,\n    contributorId: contributorId || undefined,\n  }\n}\n\nexport function getElementTypeLabel(elementType: ElementValue): string {\n  const type = Object.values(ELEMENT_TYPES).find((t) => t.value === elementType)\n  return type?.label || elementType\n}\n\nexport function getElementTypeAcronym(elementType: ElementValue): string {\n  const type = Object.values(ELEMENT_TYPES).find((t) => t.value === elementType)\n  return type?.acronym || elementType.substring(0, 2).toUpperCase()\n}\n"],"names":[],"mappings":"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"}