@koehler8/cms 1.0.0-beta.5

package/src/themes/themeManager.js

@@ -0,0 +1,257 @@
+import { resolveThemeManifest } from './themeLoader.js';
+
+const toKebab = (value = '') =>
+  value
+    .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+    .replace(/[\s_]+/g, '-')
+    .toLowerCase();
+
+const withPx = (value) => {
+  if (value === undefined || value === null) return undefined;
+  if (typeof value === 'number') return `${value}px`;
+  return value;
+};
+
+const setVar = (vars, name, value) => {
+  if (value === undefined || value === null || value === '') return;
+  vars[name] = String(value);
+};
+
+const assignPrefixed = (vars, entries = {}, prefix) => {
+  Object.entries(entries).forEach(([key, value]) => {
+    setVar(vars, `${prefix}${key}`, value);
+  });
+};
+
+function setSurfaceVars(vars, prefix, surface = {}) {
+  if (!surface) return;
+  setVar(vars, `${prefix}-bg`, surface.background);
+  setVar(vars, `${prefix}-before`, surface.before);
+  setVar(vars, `${prefix}-after`, surface.after);
+}
+
+function coerceSurface(value, defaults = {}) {
+  if (value && typeof value === 'object') return value;
+  if (!value) return defaults;
+  return { ...defaults, background: value };
+}
+
+function coerceArray(value) {
+  if (!value) return undefined;
+  return Array.isArray(value) ? value.filter(Boolean).join(', ') : value;
+}
+
+function buildCssVarMap(manifest) {
+  if (!manifest) return {};
+  const vars = {};
+  const tokens = manifest.tokens || {};
+  const palette = tokens.palette || {};
+  const text = tokens.text || {};
+  const surfaces = tokens.surfaces || {};
+  const helper = surfaces.helper || {};
+  const tabs = surfaces.tabs || {};
+  const field = surfaces.field || {};
+  const strip = surfaces.strip || {};
+  const chrome = surfaces.chrome || {};
+  const heroSurface = surfaces.backdropPrimary || {};
+  const promoSurface = surfaces.backdropSecondary || {};
+  const typography = tokens.typography || {};
+  const ctas = tokens.ctas || {};
+  const chips = tokens.chips || {};
+  const focus = tokens.focus || {};
+  const radii = tokens.radii || {};
+  const elevation = tokens.elevation || {};
+  const utility = tokens.utility || {};
+
+  assignPrefixed(
+    vars,
+    Object.fromEntries(
+      Object.entries(palette).map(([key, value]) => [`--brand-${toKebab(key)}`, value])
+    )
+  );
+
+  setVar(vars, '--brand-accent-electric', palette.primary || palette.accent);
+  setVar(vars, '--brand-accent-electric-soft', palette.accentSoft);
+  setVar(vars, '--brand-accent-warm', palette.accent || palette.warning);
+
+  setVar(vars, '--brand-fg-100', text.primary);
+  setVar(vars, '--brand-fg-200', text.muted);
+  setVar(vars, '--brand-fg-300', text.mutedStrong);
+  setVar(vars, '--brand-fg-050', text.inverse);
+  setVar(vars, '--brand-bg-900', surfaces.base);
+  setVar(vars, '--brand-bg-800', surfaces.baseAlt);
+  setVar(vars, '--brand-bg-700', surfaces.raised);
+  setVar(vars, '--brand-bg-600', surfaces.sunken);
+
+  Object.entries(radii).forEach(([key, value]) => {
+    setVar(vars, `--brand-radius-${toKebab(key)}`, withPx(value));
+  });
+  setVar(vars, '--brand-card-radius', withPx(radii.lg || radii.md));
+  setVar(vars, '--brand-button-radius', withPx(radii.md || radii.sm));
+
+  setVar(vars, '--brand-shadow-glow', elevation.raised);
+  setVar(vars, '--brand-shadow-glow-strong', elevation.overlay);
+  setVar(vars, '--brand-card-shadow', elevation.raised);
+  setVar(vars, '--brand-surface-card-shadow', elevation.raised);
+
+  const cardTextColor = text.card || text.primary;
+  setVar(vars, '--brand-card-soft', surfaces.card);
+  setVar(vars, '--brand-surface-card-bg', surfaces.card);
+  setVar(vars, '--brand-card-border', surfaces.border);
+  setVar(vars, '--brand-surface-card-border', surfaces.border);
+  setVar(vars, '--brand-card-text', cardTextColor);
+  setVar(vars, '--brand-surface-helper-bg', helper.background || surfaces.callout);
+  setVar(vars, '--brand-surface-helper-hover-bg', helper.hover || helper.background);
+  setVar(vars, '--brand-icon-badge-bg', surfaces.chipAccent || surfaces.chip);
+  setVar(vars, '--brand-icon-badge-color', palette.primary || text.primary);
+
+  setVar(vars, '--brand-border-highlight', surfaces.border);
+  setVar(vars, '--brand-border-glow', surfaces.border);
+
+  setVar(vars, '--brand-status-success', palette.success);
+  setVar(vars, '--brand-status-error', palette.critical);
+  setVar(vars, '--brand-status-error-soft', palette.criticalSoft);
+
+  setVar(vars, '--brand-input-bg', field.background || surfaces.input);
+  setVar(vars, '--brand-input-border', field.border || utility.inputBorder);
+  setVar(vars, '--brand-input-border-active', focus.ring);
+  setVar(vars, '--brand-input-text', field.inputColor || utility.inputText || text.primary);
+  setVar(
+    vars,
+    '--brand-input-placeholder',
+    field.inputPlaceholder || utility.inputPlaceholder || text.muted
+  );
+  setVar(vars, '--brand-focus-ring', focus.ring);
+  setVar(vars, '--brand-focus-glow', focus.shadowInset);
+
+  setVar(vars, '--brand-modal-backdrop', surfaces.backdrop);
+  setVar(vars, '--brand-modal-surface', utility.modalSurface);
+  setVar(vars, '--brand-modal-border', utility.modalBorder);
+  setVar(vars, '--brand-modal-shadow', utility.modalShadow);
+  setVar(vars, '--brand-modal-radius', withPx(utility.modalRadius));
+
+  setVar(vars, '--brand-chart-track', utility.chartTrack);
+  setVar(vars, '--brand-chart-center-text', utility.chartCenterText);
+
+  setVar(vars, '--brand-header-bg', chrome.background);
+  setVar(vars, '--brand-header-text', chrome.text);
+  setVar(vars, '--site-header-shadow', chrome.shadow);
+  setVar(vars, '--site-header-shadow-compact', chrome.compactShadow);
+
+  const primaryCta = ctas.primary || {};
+  setVar(vars, '--brand-primary-cta-gradient', primaryCta.bg);
+  setVar(vars, '--brand-primary-cta-text', primaryCta.text);
+  setVar(vars, '--brand-primary-cta-border', primaryCta.border);
+  setVar(vars, '--brand-primary-cta-shadow', primaryCta.shadow);
+  setVar(vars, '--brand-primary-cta-hover-shadow', primaryCta.shadow);
+  setVar(vars, '--brand-primary-cta-hover-translate', 'translateY(-1px)');
+  setVar(vars, '--brand-cta-text', primaryCta.text);
+
+  setVar(vars, '--helper-strip-bg', helper.background || surfaces.callout);
+  setVar(vars, '--helper-strip-border', helper.border || surfaces.border);
+  setVar(vars, '--helper-strip-color', helper.text || text.primary);
+  setVar(vars, '--helper-strip-hover-bg', helper.hover || helper.background);
+  setVar(vars, '--helper-strip-hover-color', helper.hoverColor || helper.text || text.primary);
+  setVar(vars, '--helper-strip-link-hover', helper.linkHover || palette.primary);
+  setVar(vars, '--helper-strip-heading-color', helper.heading || text.primary);
+  setVar(vars, '--helper-strip-body-color', helper.body || text.mutedStrong || text.muted);
+
+  setVar(vars, '--tabs-bg', tabs.background);
+  setVar(vars, '--tabs-border', tabs.border || surfaces.border);
+  setVar(vars, '--tabs-shadow', tabs.shadow || elevation.flat);
+  setVar(vars, '--tab-color', tabs.tabColor || text.muted);
+  setVar(vars, '--tab-active-bg', tabs.activeBackground || palette.primary);
+  setVar(vars, '--tab-active-color', tabs.activeColor || palette.inverse || '#fff');
+  setVar(vars, '--tab-active-shadow', tabs.activeShadow || elevation.raised);
+  setVar(vars, '--tab-step-bg', tabs.stepBackground || helper.background);
+  setVar(vars, '--tab-step-border', tabs.stepBorder || helper.border);
+  setVar(vars, '--tab-step-color', tabs.stepColor || palette.primary);
+  setVar(vars, '--tab-active-step-bg', tabs.activeStepBackground || palette.primary);
+  setVar(vars, '--tab-active-step-border', tabs.activeStepBorder || tabs.stepBorder);
+  setVar(vars, '--tab-active-step-color', tabs.activeStepColor || palette.inverse || '#fff');
+
+  setVar(vars, '--field-bg', field.background);
+  setVar(vars, '--field-border', field.border || utility.inputBorder);
+  setVar(vars, '--field-shadow', field.shadow || elevation.flat);
+  setVar(vars, '--field-addon-bg', field.addonBackground || helper.background);
+  setVar(vars, '--field-addon-border', field.addonBorder || helper.border);
+  setVar(vars, '--field-addon-color', field.addonColor || helper.text || text.primary);
+  setVar(vars, '--field-input-color', field.inputColor || text.primary);
+  setVar(vars, '--field-input-placeholder', field.inputPlaceholder || text.muted);
+
+  setVar(vars, '--community-strip-bg', strip.background || surfaces.card);
+  setVar(vars, '--community-strip-border', strip.border || surfaces.border);
+  setVar(vars, '--community-strip-color', strip.text || text.primary);
+
+  setVar(vars, '--ui-text-primary', text.primary);
+  setVar(vars, '--ui-text-muted', text.muted);
+  setVar(vars, '--ui-field-label', text.muted);
+  setVar(vars, '--ui-field-value', text.primary);
+  setVar(vars, '--ui-status-heading-color', text.accent || palette.primary);
+
+  setVar(vars, '--brand-countdown-digit', palette.primary);
+  setVar(vars, '--brand-countdown-label', text.muted);
+
+  const secondaryCta = ctas.secondary || {};
+  setVar(vars, '--brand-pill-gradient', primaryCta.bg);
+  setVar(vars, '--brand-pill-alt-gradient', secondaryCta.bg || primaryCta.bg);
+  setVar(vars, '--brand-pill-contrast', primaryCta.text);
+
+  setVar(vars, '--brand-chip-neutral-bg', chips.neutral?.bg);
+  setVar(vars, '--brand-chip-neutral-color', chips.neutral?.text);
+  setVar(vars, '--brand-chip-neutral-border', chips.neutral?.border);
+
+  const heroBg = coerceArray(utility.gradientHero || heroSurface.background);
+  const promoBg = coerceArray(utility.gradientPromo || promoSurface.background);
+  if (heroBg) setVar(vars, '--brand-gradient-hero', heroBg);
+  if (promoBg) setVar(vars, '--brand-gradient-promo', promoBg);
+
+  setSurfaceVars(vars, '--hero-surface', heroSurface);
+  setSurfaceVars(vars, '--promo-surface', promoSurface);
+  const bodyBackground = coerceArray(utility.bodyBackground);
+  if (bodyBackground) {
+    setVar(vars, '--theme-body-background', bodyBackground);
+  }
+
+  const statusHeadline = coerceSurface(utility.statusHeadline, {
+    color: palette.primary || text.primary,
+    shadow: elevation.raised,
+  });
+
+  setVar(vars, '--status-headline-bg', statusHeadline.background);
+  setVar(vars, '--status-headline-color', statusHeadline.color);
+  setVar(vars, '--status-headline-shadow', statusHeadline.shadow);
+
+  setVar(vars, '--status-price-value-color', palette.accent || palette.primary || text.primary);
+  setVar(vars, '--status-price-value-shadow', elevation.raised);
+
+  return vars;
+}
+
+export function applyThemeVariables(themeKey) {
+  const manifest = resolveThemeManifest(themeKey);
+  if (typeof document === 'undefined') {
+    return manifest;
+  }
+  const vars = buildCssVarMap(manifest);
+  const root = document.documentElement;
+
+  // Remove inline assignments from previous calls so normal cascade can apply.
+  Object.keys(vars).forEach((name) => root.style.removeProperty(name));
+
+  let styleTag = document.getElementById('theme-vars');
+  if (!styleTag) {
+    styleTag = document.createElement('style');
+    styleTag.id = 'theme-vars';
+    // Insert early so site/theme overrides loaded later can win via cascade.
+    const head = document.head || root;
+    head.insertBefore(styleTag, head.firstChild);
+  }
+
+  const cssBody = Object.entries(vars)
+    .map(([name, value]) => `${name}: ${value};`)
+    .join('\n  ');
+  styleTag.textContent = `:root {\n  ${cssBody}\n}`;
+
+  return manifest;
+}

package/src/themes/themeValidator.js

@@ -0,0 +1,380 @@
+const COLOR_PATTERN =
+  /^(#([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})\b|rgba?\(|hsla?\(|var\(--|linear-gradient\(|radial-gradient\(|conic-gradient\(|color-mix\()/i;
+const CSS_UNIT_PATTERN = /^-?\d*\.?\d+(px|rem|em|vh|vw|%)$/i;
+
+const CTA_KEYS = ['bg', 'text', 'border', 'hoverBg', 'hoverBorder', 'shadow'];
+const CHIP_KEYS = ['bg', 'text', 'border'];
+
+const REQUIRED_BLOCKS = {
+  palette: [
+    'primary',
+    'primaryAccent',
+    'secondary',
+    'accent',
+    'accentSoft',
+    'neutral',
+    'neutralStrong',
+    'inverse',
+    'success',
+    'info',
+    'warning',
+    'critical',
+  ],
+  text: ['primary', 'muted', 'mutedStrong', 'inverse', 'accent', 'onAccent'],
+  surfaces: [
+    'base',
+    'baseAlt',
+    'raised',
+    'sunken',
+    'callout',
+    'card',
+    'cardAlt',
+    'overlay',
+    'backdrop',
+    'border',
+    'divider',
+    'input',
+    'chip',
+    'chipAccent',
+  ],
+  typography: [
+    'bodyFamily',
+    'headingFamily',
+    'monoFamily',
+    'baseSize',
+    'scale',
+    'weightRegular',
+    'weightMedium',
+    'weightBold',
+    'letterSpacingTight',
+    'letterSpacingWide',
+  ],
+  ctas: ['primary', 'secondary', 'ghost', 'link'],
+  chips: ['neutral', 'accent', 'outline'],
+  focus: ['ring', 'ringMuted', 'outline', 'shadowInset'],
+  radii: ['sm', 'md', 'lg', 'pill', 'full'],
+  elevation: ['flat', 'raised', 'overlay'],
+  utility: [
+    'divider',
+    'inputBorder',
+    'inputText',
+    'inputPlaceholder',
+    'selectionBg',
+    'selectionText',
+    'gradientHero',
+    'gradientPromo',
+    'bodyBackground',
+    'modalSurface',
+    'modalBorder',
+    'modalShadow',
+    'modalRadius',
+    'chartTrack',
+    'chartCenterText',
+    'statusHeadline',
+  ],
+};
+
+const NESTED_SURFACES = {
+  helper: ['background', 'hover', 'text', 'border', 'heading', 'body'],
+  tabs: [
+    'background',
+    'border',
+    'shadow',
+    'tabColor',
+    'activeBackground',
+    'activeColor',
+    'activeShadow',
+    'stepBackground',
+    'stepBorder',
+    'stepColor',
+    'activeStepBackground',
+    'activeStepBorder',
+    'activeStepColor',
+  ],
+  field: [
+    'background',
+    'border',
+    'shadow',
+    'addonBackground',
+    'addonBorder',
+    'addonColor',
+    'inputColor',
+    'inputPlaceholder',
+  ],
+  strip: ['background', 'border', 'text'],
+  chrome: ['background', 'text', 'shadow', 'compactShadow'],
+  backdropPrimary: ['background', 'before', 'after'],
+  backdropSecondary: ['background', 'before', 'after'],
+};
+
+const CTA_OVERRIDES = {
+  primary: { border: ensureString, hoverBorder: ensureString, shadow: ensureString },
+  secondary: { border: ensureString, hoverBorder: ensureString, shadow: ensureString },
+  ghost: { border: ensureString, hoverBorder: ensureString, shadow: ensureString },
+  link: { underline: ensureColor },
+};
+
+const CHIP_OVERRIDES = {
+  outline: { border: ensureString },
+};
+
+const SURFACE_NESTED_OVERRIDES = {
+  tabs: {
+    border: ensureString,
+    shadow: ensureString,
+    activeShadow: ensureString,
+    stepBorder: ensureString,
+    activeStepBorder: ensureString,
+  },
+  field: {
+    shadow: ensureString,
+    addonBorder: ensureString,
+  },
+  chrome: {
+    shadow: ensureString,
+    compactShadow: ensureString,
+  },
+};
+
+const UTILITY_VALIDATORS = {
+  divider: ensureColor,
+  inputBorder: ensureColor,
+  inputText: ensureColor,
+  inputPlaceholder: ensureColor,
+  selectionBg: ensureColor,
+  selectionText: ensureColor,
+  gradientHero: ensureColor,
+  gradientPromo: ensureColor,
+  bodyBackground: ensureColor,
+  modalSurface: ensureColor,
+  modalBorder: ensureColor,
+  modalShadow: ensureString,
+  modalRadius: (value, path, errors) => {
+    if (!isCssSize(value)) errors.push(`${path} must be a CSS size`);
+  },
+  chartTrack: ensureColor,
+  chartCenterText: ensureColor,
+  statusHeadline: ensureSurfaceOrColor,
+};
+
+function isString(value) {
+  return typeof value === 'string' && value.trim().length > 0;
+}
+
+function isColor(value) {
+  if (!isString(value)) return false;
+  const normalized = value.trim().toLowerCase();
+  if (normalized === 'transparent' || normalized === 'currentcolor' || normalized === 'none') {
+    return true;
+  }
+  return COLOR_PATTERN.test(normalized);
+}
+
+function isCssSize(value) {
+  if (typeof value === 'number') return true;
+  if (!isString(value)) return false;
+  const normalized = value.trim();
+  if (normalized === '0') return true;
+  return CSS_UNIT_PATTERN.test(normalized);
+}
+
+function ensureColor(value, path, errors) {
+  if (Array.isArray(value)) {
+    value.forEach((entry, index) => ensureColor(entry, `${path}[${index}]`, errors));
+    return;
+  }
+  if (!isColor(value)) {
+    errors.push(`${path} must be a CSS color/gradient value`);
+  }
+}
+
+function ensureSurfaceOrColor(value, path, errors) {
+  if (value && typeof value === 'object') {
+    if (!value.background) {
+      errors.push(`${path}.background is required`);
+    } else {
+      ensureColor(value.background, `${path}.background`, errors);
+    }
+    if (value.color) ensureColor(value.color, `${path}.color`, errors);
+    if (value.shadow) ensureString(value.shadow, `${path}.shadow`, errors);
+    if (value.border) ensureColor(value.border, `${path}.border`, errors);
+    if (value.valueColor) ensureColor(value.valueColor, `${path}.valueColor`, errors);
+    if (value.valueShadow) ensureString(value.valueShadow, `${path}.valueShadow`, errors);
+    return;
+  }
+  ensureColor(value, path, errors);
+}
+
+function ensureString(value, path, errors) {
+  if (!isString(value)) {
+    errors.push(`${path} must be a non-empty string`);
+  }
+}
+
+function ensureObject(value, path, errors) {
+  if (!value || typeof value !== 'object') {
+    errors.push(`${path} must be an object`);
+    return false;
+  }
+  return true;
+}
+
+function ensureKeys(obj, keys, path, errors, validator = ensureColor, overrides = {}) {
+  keys.forEach((key) => {
+    if (!(key in obj)) {
+      errors.push(`${path}.${key} is required`);
+      return;
+    }
+    const fieldValidator = overrides[key] || validator;
+    fieldValidator(obj[key], `${path}.${key}`, errors);
+  });
+}
+
+function validatePaletteBlock(tokens, errors) {
+  if (!ensureObject(tokens.palette, 'tokens.palette', errors)) return;
+  ensureKeys(tokens.palette, REQUIRED_BLOCKS.palette, 'tokens.palette', errors, ensureColor);
+}
+
+function validateTextBlock(tokens, errors) {
+  if (!ensureObject(tokens.text, 'tokens.text', errors)) return;
+  ensureKeys(tokens.text, REQUIRED_BLOCKS.text, 'tokens.text', errors, ensureColor);
+}
+
+function validateSurfaceBlock(tokens, errors) {
+  if (!ensureObject(tokens.surfaces, 'tokens.surfaces', errors)) return;
+  ensureKeys(tokens.surfaces, REQUIRED_BLOCKS.surfaces, 'tokens.surfaces', errors, ensureColor);
+  Object.entries(NESTED_SURFACES).forEach(([key, nestedKeys]) => {
+    const node = tokens.surfaces[key];
+    if (!ensureObject(node, `tokens.surfaces.${key}`, errors)) return;
+    ensureKeys(
+      node,
+      nestedKeys,
+      `tokens.surfaces.${key}`,
+      errors,
+      ensureColor,
+      SURFACE_NESTED_OVERRIDES[key] || {}
+    );
+  });
+}
+
+function validateTypography(tokens, errors) {
+  if (!ensureObject(tokens.typography, 'tokens.typography', errors)) return;
+  ensureKeys(tokens.typography, REQUIRED_BLOCKS.typography, 'tokens.typography', errors, (value, path) => {
+    if (typeof value === 'number') return;
+    if (!isString(value)) {
+      errors.push(`${path} must be a string or number`);
+    }
+  });
+}
+
+function validateCtas(tokens, errors) {
+  if (!ensureObject(tokens.ctas, 'tokens.ctas', errors)) return;
+  REQUIRED_BLOCKS.ctas.forEach((ctaKey) => {
+    const block = tokens.ctas[ctaKey];
+    if (!ensureObject(block, `tokens.ctas.${ctaKey}`, errors)) return;
+    const keys = ctaKey === 'link' ? ['text', 'hoverText', 'underline'] : CTA_KEYS;
+    ensureKeys(
+      block,
+      keys,
+      `tokens.ctas.${ctaKey}`,
+      errors,
+      ensureColor,
+      CTA_OVERRIDES[ctaKey] || {}
+    );
+  });
+}
+
+function validateChips(tokens, errors) {
+  if (!ensureObject(tokens.chips, 'tokens.chips', errors)) return;
+  REQUIRED_BLOCKS.chips.forEach((chipKey) => {
+    const block = tokens.chips[chipKey];
+    if (!ensureObject(block, `tokens.chips.${chipKey}`, errors)) return;
+    ensureKeys(
+      block,
+      CHIP_KEYS,
+      `tokens.chips.${chipKey}`,
+      errors,
+      ensureColor,
+      CHIP_OVERRIDES[chipKey] || {}
+    );
+  });
+}
+
+function validateFocus(tokens, errors) {
+  if (!ensureObject(tokens.focus, 'tokens.focus', errors)) return;
+  ensureKeys(tokens.focus, REQUIRED_BLOCKS.focus, 'tokens.focus', errors, ensureString);
+}
+
+function validateRadii(tokens, errors) {
+  if (!ensureObject(tokens.radii, 'tokens.radii', errors)) return;
+  ensureKeys(tokens.radii, REQUIRED_BLOCKS.radii, 'tokens.radii', errors, (value, path) => {
+    if (!isCssSize(value)) {
+      errors.push(`${path} must be a CSS size (px, rem, etc.)`);
+    }
+  });
+}
+
+function validateElevation(tokens, errors) {
+  if (!ensureObject(tokens.elevation, 'tokens.elevation', errors)) return;
+  ensureKeys(tokens.elevation, REQUIRED_BLOCKS.elevation, 'tokens.elevation', errors, ensureString);
+}
+
+function validateUtility(tokens, errors) {
+  if (!ensureObject(tokens.utility, 'tokens.utility', errors)) return;
+  REQUIRED_BLOCKS.utility.forEach((key) => {
+    const value = tokens.utility[key];
+    if (value === undefined || value === null || value === '') {
+      errors.push(`tokens.utility.${key} is required`);
+      return;
+    }
+    const validator = UTILITY_VALIDATORS[key] || ensureColor;
+    if (Array.isArray(value)) {
+      value.forEach((entry, index) => validator(entry, `tokens.utility.${key}[${index}]`, errors));
+      return;
+    }
+    validator(value, `tokens.utility.${key}`, errors);
+  });
+}
+
+export function validateThemeManifest(manifest, options = {}) {
+  const { throwOnError = true } = options;
+  const errors = [];
+  if (!manifest || typeof manifest !== 'object') {
+    errors.push('Theme manifest must be an object');
+  } else {
+    if (!isString(manifest.slug)) {
+      errors.push('manifest.slug must be a non-empty string');
+    }
+    if (!ensureObject(manifest.meta, 'manifest.meta', errors)) {
+      // no-op
+    } else {
+      if (!isString(manifest.meta.name)) errors.push('manifest.meta.name is required');
+      if (!isString(manifest.meta.version)) errors.push('manifest.meta.version is required');
+    }
+    if (!ensureObject(manifest.tokens, 'manifest.tokens', errors)) {
+      // no-op
+    } else {
+      validatePaletteBlock(manifest.tokens, errors);
+      validateTextBlock(manifest.tokens, errors);
+      validateSurfaceBlock(manifest.tokens, errors);
+      validateTypography(manifest.tokens, errors);
+      validateCtas(manifest.tokens, errors);
+      validateChips(manifest.tokens, errors);
+      validateFocus(manifest.tokens, errors);
+      validateRadii(manifest.tokens, errors);
+      validateElevation(manifest.tokens, errors);
+      validateUtility(manifest.tokens, errors);
+    }
+  }
+
+  if (errors.length && throwOnError) {
+    const slug = manifest?.slug || 'unknown';
+    const error = new Error(
+      `Theme manifest "${slug}" is invalid:\n- ${errors.join('\n- ')}`
+    );
+    error.errors = errors;
+    throw error;
+  }
+
+  return { valid: errors.length === 0, errors };
+}