@jay-framework/design-system-validator 0.25.4 → 0.26.0

package/dist/design-tokens.d.ts

@@ -0,0 +1,63 @@
+interface TypographyToken {
+    fontFamily?: string;
+    fontSize?: string;
+    fontWeight?: string | number;
+    lineHeight?: string | number;
+    letterSpacing?: string;
+}
+interface ComponentSpec {
+    [property: string]: string;
+}
+interface AnimationPreset {
+    duration?: string;
+    easing?: string;
+}
+interface DesignRules {
+    'max-font-weights'?: number;
+    'max-primary-buttons'?: number;
+    'require-contrast-aa'?: boolean;
+}
+interface DesignTokens {
+    name?: string;
+    colors: Record<string, string>;
+    typography: Record<string, TypographyToken>;
+    spacing: Record<string, string>;
+    rounded: Record<string, string>;
+    breakpoints: Record<string, string>;
+    animations: Record<string, AnimationPreset>;
+    components: Record<string, ComponentSpec>;
+    rawComponents: Record<string, ComponentSpec>;
+    rules: DesignRules;
+}
+declare function parseDesignMd(content: string): DesignTokens | null;
+interface FoundDesignMd {
+    tokens: DesignTokens;
+    designMdPath: string;
+}
+declare function findDesignMd(filePath: string, projectRoot: string): FoundDesignMd | null;
+
+interface MatchResult {
+    matches: boolean;
+    suggestion?: string;
+}
+declare function isColorProperty(property: string): boolean;
+declare function isSpacingProperty(property: string): boolean;
+declare function isRadiusProperty(property: string): boolean;
+declare function isTypographyProperty(property: string): boolean;
+declare function isAnimationDurationProperty(property: string): boolean;
+declare function isAnimationEasingProperty(property: string): boolean;
+declare function matchColor(value: string, colorTokens: Record<string, string>): MatchResult;
+declare function matchSpacing(value: string, spacingTokens: Record<string, string>): MatchResult;
+declare function matchRounded(value: string, roundedTokens: Record<string, string>): MatchResult;
+declare function matchTypographyProperty(property: string, value: string, typographyTokens: Record<string, TypographyToken>): MatchResult;
+declare function matchAnimationDuration(value: string, animationTokens: Record<string, AnimationPreset>): MatchResult;
+declare function matchAnimationEasing(value: string, animationTokens: Record<string, AnimationPreset>): MatchResult;
+interface ComponentMismatch {
+    cssProp: string;
+    expected: string;
+    expectedRaw?: string;
+    actual: string;
+}
+declare function matchComponent(elementStyles: Record<string, string>, componentSpec: ComponentSpec, rawSpec?: ComponentSpec): ComponentMismatch[];
+
+export { type AnimationPreset, type ComponentSpec, type DesignRules, type DesignTokens, type FoundDesignMd, type MatchResult, type TypographyToken, findDesignMd, isAnimationDurationProperty, isAnimationEasingProperty, isColorProperty, isRadiusProperty, isSpacingProperty, isTypographyProperty, matchAnimationDuration, matchAnimationEasing, matchColor, matchComponent, matchRounded, matchSpacing, matchTypographyProperty, parseDesignMd };

package/dist/design-tokens.js

@@ -0,0 +1,18 @@
+import { f, i, a, b, c, d, e, m, g, h, j, k, l, n, p } from "./parse-design-md-C2uZEN8Y.js";
+export {
+  f as findDesignMd,
+  i as isAnimationDurationProperty,
+  a as isAnimationEasingProperty,
+  b as isColorProperty,
+  c as isRadiusProperty,
+  d as isSpacingProperty,
+  e as isTypographyProperty,
+  m as matchAnimationDuration,
+  g as matchAnimationEasing,
+  h as matchColor,
+  j as matchComponent,
+  k as matchRounded,
+  l as matchSpacing,
+  n as matchTypographyProperty,
+  p as parseDesignMd
+};

package/dist/parse-design-md-C2uZEN8Y.js

@@ -0,0 +1,413 @@
+import yaml from "js-yaml";
+import fs__default from "node:fs";
+import path__default from "node:path";
+function normalizeHex(color) {
+  const hex = color.trim().toLowerCase();
+  if (!/^#[0-9a-f]{3,8}$/.test(hex)) return null;
+  if (hex.length === 4) {
+    return `#${hex[1]}${hex[1]}${hex[2]}${hex[2]}${hex[3]}${hex[3]}`;
+  }
+  return hex.length === 7 ? hex : null;
+}
+function parseRgb(value) {
+  const match = value.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
+  if (!match) return null;
+  const r = parseInt(match[1], 10);
+  const g = parseInt(match[2], 10);
+  const b = parseInt(match[3], 10);
+  return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
+}
+function normalizeColor(value) {
+  const trimmed = value.trim().toLowerCase();
+  if (trimmed.startsWith("#")) return normalizeHex(trimmed);
+  if (trimmed.startsWith("rgb")) return parseRgb(trimmed);
+  return null;
+}
+const COLOR_PROPERTIES = /* @__PURE__ */ new Set([
+  "color",
+  "background-color",
+  "border-color",
+  "border-top-color",
+  "border-right-color",
+  "border-bottom-color",
+  "border-left-color",
+  "outline-color",
+  "text-decoration-color",
+  "fill",
+  "stroke"
+]);
+const SPACING_PROPERTIES = /* @__PURE__ */ new Set([
+  "padding",
+  "padding-top",
+  "padding-right",
+  "padding-bottom",
+  "padding-left",
+  "margin",
+  "margin-top",
+  "margin-right",
+  "margin-bottom",
+  "margin-left",
+  "gap",
+  "row-gap",
+  "column-gap",
+  "top",
+  "right",
+  "bottom",
+  "left"
+]);
+const RADIUS_PROPERTIES = /* @__PURE__ */ new Set([
+  "border-radius",
+  "border-top-left-radius",
+  "border-top-right-radius",
+  "border-bottom-left-radius",
+  "border-bottom-right-radius"
+]);
+function isColorProperty(property) {
+  return COLOR_PROPERTIES.has(property);
+}
+function isSpacingProperty(property) {
+  return SPACING_PROPERTIES.has(property);
+}
+function isRadiusProperty(property) {
+  return RADIUS_PROPERTIES.has(property);
+}
+function isTypographyProperty(property) {
+  return property === "font-size" || property === "font-weight" || property === "line-height" || property === "letter-spacing" || property === "font-family";
+}
+function isAnimationDurationProperty(property) {
+  return property === "transition-duration" || property === "animation-duration";
+}
+function isAnimationEasingProperty(property) {
+  return property === "transition-timing-function" || property === "animation-timing-function";
+}
+function matchColor(value, colorTokens) {
+  if (value.startsWith("var(")) return { matches: true };
+  if (value === "transparent" || value === "inherit" || value === "currentColor" || value === "initial" || value === "unset") {
+    return { matches: true };
+  }
+  const normalized = normalizeColor(value);
+  if (!normalized) return { matches: true };
+  const tokenEntries = Object.entries(colorTokens);
+  for (const [name, tokenValue] of tokenEntries) {
+    const normalizedToken = normalizeColor(tokenValue);
+    if (normalizedToken === normalized) return { matches: true };
+  }
+  let closestName = "";
+  let closestDist = Infinity;
+  for (const [name, tokenValue] of tokenEntries) {
+    const nt = normalizeColor(tokenValue);
+    if (!nt) continue;
+    const dist = colorDistance(normalized, nt);
+    if (dist < closestDist) {
+      closestDist = dist;
+      closestName = name;
+    }
+  }
+  const suggestion = closestName ? `Use token {colors.${closestName}} ("${colorTokens[closestName]}")` : "Add this color to DESIGN.md colors section";
+  return { matches: false, suggestion };
+}
+function colorDistance(a, b) {
+  const ar = parseInt(a.slice(1, 3), 16);
+  const ag = parseInt(a.slice(3, 5), 16);
+  const ab = parseInt(a.slice(5, 7), 16);
+  const br = parseInt(b.slice(1, 3), 16);
+  const bg = parseInt(b.slice(3, 5), 16);
+  const bb = parseInt(b.slice(5, 7), 16);
+  return Math.sqrt((ar - br) ** 2 + (ag - bg) ** 2 + (ab - bb) ** 2);
+}
+function matchSpacing(value, spacingTokens) {
+  if (value.startsWith("var(") || value === "auto" || value === "0" || value === "inherit" || value === "initial" || value === "unset") {
+    return { matches: true };
+  }
+  const parts = value.split(/\s+/);
+  const tokenValues = new Set(Object.values(spacingTokens));
+  tokenValues.add("0");
+  for (const part of parts) {
+    if (part === "0" || part === "auto" || part.startsWith("var(")) continue;
+    if (!tokenValues.has(part)) {
+      return {
+        matches: false,
+        suggestion: `Use a DESIGN.md spacing token`
+      };
+    }
+  }
+  return { matches: true };
+}
+function matchRounded(value, roundedTokens) {
+  if (value.startsWith("var(") || value === "0" || value === "inherit" || value === "initial" || value === "unset") {
+    return { matches: true };
+  }
+  const tokenValues = new Set(Object.values(roundedTokens));
+  tokenValues.add("0");
+  if (!tokenValues.has(value)) {
+    return {
+      matches: false,
+      suggestion: `Use a DESIGN.md rounded token`
+    };
+  }
+  return { matches: true };
+}
+function matchTypographyProperty(property, value, typographyTokens) {
+  if (value.startsWith("var(") || value === "inherit" || value === "initial" || value === "unset") {
+    return { matches: true };
+  }
+  const tokenValues = /* @__PURE__ */ new Set();
+  for (const token of Object.values(typographyTokens)) {
+    if (property === "font-size" && token.fontSize) tokenValues.add(token.fontSize);
+    if (property === "font-weight" && token.fontWeight != null)
+      tokenValues.add(String(token.fontWeight));
+    if (property === "line-height" && token.lineHeight != null)
+      tokenValues.add(String(token.lineHeight));
+    if (property === "letter-spacing" && token.letterSpacing)
+      tokenValues.add(token.letterSpacing);
+    if (property === "font-family" && token.fontFamily) tokenValues.add(token.fontFamily);
+  }
+  if (tokenValues.size === 0) return { matches: true };
+  if (tokenValues.has(value)) return { matches: true };
+  if (property === "font-family") {
+    const normalizedValue = value.replace(/['"]/g, "").trim();
+    const primaryFont = normalizedValue.split(",")[0].trim();
+    for (const tv of tokenValues) {
+      if (tv.replace(/['"]/g, "").trim() === primaryFont) return { matches: true };
+    }
+  }
+  return {
+    matches: false,
+    suggestion: `Use a DESIGN.md typography token`
+  };
+}
+function matchAnimationDuration(value, animationTokens) {
+  if (value.startsWith("var(") || value === "0s" || value === "0ms" || value === "inherit" || value === "initial" || value === "unset") {
+    return { matches: true };
+  }
+  const durations = /* @__PURE__ */ new Set();
+  for (const preset of Object.values(animationTokens)) {
+    if (preset.duration) durations.add(preset.duration);
+  }
+  if (durations.size === 0) return { matches: true };
+  if (durations.has(value)) return { matches: true };
+  return {
+    matches: false,
+    suggestion: `Use a DESIGN.md animation preset duration`
+  };
+}
+function matchAnimationEasing(value, animationTokens) {
+  if (value.startsWith("var(") || value === "inherit" || value === "initial" || value === "unset") {
+    return { matches: true };
+  }
+  const easings = /* @__PURE__ */ new Set();
+  for (const preset of Object.values(animationTokens)) {
+    if (preset.easing) easings.add(preset.easing);
+  }
+  if (easings.size === 0) return { matches: true };
+  if (easings.has(value)) return { matches: true };
+  const normalizedValue = value.replace(/\s/g, "");
+  for (const e of easings) {
+    if (e.replace(/\s/g, "") === normalizedValue) return { matches: true };
+  }
+  return {
+    matches: false,
+    suggestion: `Use a DESIGN.md animation preset easing`
+  };
+}
+function matchComponent(elementStyles, componentSpec, rawSpec) {
+  const mismatches = [];
+  const propertyMapping = {
+    backgroundColor: "background-color",
+    textColor: "color",
+    rounded: "border-radius",
+    padding: "padding",
+    height: "height",
+    width: "width"
+  };
+  for (const [specProp, expectedValue] of Object.entries(componentSpec)) {
+    if (specProp === "typography") continue;
+    const cssProp = propertyMapping[specProp] || specProp;
+    const actualValue = elementStyles[cssProp];
+    if (actualValue && actualValue !== expectedValue) {
+      const rawValue = rawSpec?.[specProp];
+      mismatches.push({
+        cssProp,
+        expected: expectedValue,
+        expectedRaw: rawValue !== expectedValue ? rawValue : void 0,
+        actual: actualValue
+      });
+    }
+  }
+  return mismatches;
+}
+function formatComponentMismatches(componentName, mismatches, elementDescription) {
+  const specPath = `DESIGN.md components.${componentName}`;
+  const header = elementDescription ? `${specPath} on ${elementDescription}:` : `${specPath}:`;
+  const lines = [header];
+  for (let i = 0; i < mismatches.length; i++) {
+    const m = mismatches[i];
+    const expectedDisplay = m.expectedRaw ? `${m.expectedRaw} (${m.expected})` : `"${m.expected}"`;
+    lines.push(`  ${i + 1}. ${m.cssProp} should be ${expectedDisplay}, found "${m.actual}"`);
+  }
+  return lines.join("\n");
+}
+function isBackgroundShorthand(property) {
+  return property === "background";
+}
+function splitTopLevelCommas(value) {
+  const parts = [];
+  let depth = 0;
+  let current = "";
+  for (const ch of value) {
+    if (ch === "(" || ch === "[") depth++;
+    else if (ch === ")" || ch === "]") depth--;
+    if (ch === "," && depth === 0) {
+      parts.push(current.trim());
+      current = "";
+    } else {
+      current += ch;
+    }
+  }
+  if (current.trim()) parts.push(current.trim());
+  return parts;
+}
+function extractBackgroundColors(value) {
+  if (value.startsWith("var(") || value === "transparent" || value === "none" || value === "inherit" || value === "initial" || value === "unset") {
+    return [];
+  }
+  const layers = splitTopLevelCommas(value);
+  const colors = [];
+  for (const layer of layers) {
+    if (/^(linear-gradient|radial-gradient|conic-gradient|repeating-|url)\s*\(/i.test(layer)) {
+      continue;
+    }
+    const hexMatch = layer.match(/(^|\s)(#[0-9a-fA-F]{3,8})(\s|$)/);
+    if (hexMatch) {
+      colors.push(hexMatch[2]);
+      continue;
+    }
+    const rgbMatch = layer.match(/(^|\s)(rgba?\s*\([^)]+\))/);
+    if (rgbMatch) {
+      colors.push(rgbMatch[2]);
+    }
+  }
+  return colors;
+}
+function hexToRgbValues(hex) {
+  const normalized = normalizeHex(hex);
+  if (!normalized) return null;
+  return [
+    parseInt(normalized.slice(1, 3), 16),
+    parseInt(normalized.slice(3, 5), 16),
+    parseInt(normalized.slice(5, 7), 16)
+  ];
+}
+function relativeLuminance(r, g, b) {
+  const [rs, gs, bs] = [r / 255, g / 255, b / 255].map(
+    (c) => c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)
+  );
+  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+}
+function contrastRatio(l1, l2) {
+  const lighter = Math.max(l1, l2);
+  const darker = Math.min(l1, l2);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+function extractFrontmatter(content) {
+  const match = content.match(/^---\s*\n([\s\S]*?)\n---/);
+  return match ? match[1] : null;
+}
+function resolveReferences(tokens) {
+  const resolve = (value) => {
+    return value.replace(/\{([^}]+)\}/g, (_, refPath) => {
+      const parts = refPath.split(".");
+      let current = tokens;
+      for (const part of parts) {
+        if (current == null || typeof current !== "object") return `{${refPath}}`;
+        current = current[part];
+      }
+      if (typeof current === "string") return resolve(current);
+      if (typeof current === "number") return String(current);
+      return `{${refPath}}`;
+    });
+  };
+  if (tokens.components) {
+    for (const [name, spec] of Object.entries(tokens.components)) {
+      for (const [prop, value] of Object.entries(spec)) {
+        if (typeof value === "string" && value.includes("{")) {
+          tokens.components[name][prop] = resolve(value);
+        }
+      }
+    }
+  }
+}
+function normalizeStringValues(map) {
+  if (!map) return {};
+  const result = {};
+  for (const [key, value] of Object.entries(map)) {
+    result[key] = String(value);
+  }
+  return result;
+}
+function parseDesignMd(content) {
+  const frontmatter = extractFrontmatter(content);
+  if (!frontmatter) return null;
+  const raw = yaml.load(frontmatter);
+  if (!raw || typeof raw !== "object") return null;
+  const rawComponents = {};
+  if (raw.components) {
+    for (const [name, spec] of Object.entries(raw.components)) {
+      rawComponents[name] = { ...spec };
+    }
+  }
+  resolveReferences(raw);
+  return {
+    name: raw.name,
+    colors: raw.colors || {},
+    typography: raw.typography || {},
+    spacing: normalizeStringValues(raw.spacing),
+    rounded: normalizeStringValues(raw.rounded),
+    breakpoints: normalizeStringValues(raw.breakpoints),
+    animations: raw.animations || {},
+    components: raw.components || {},
+    rawComponents,
+    rules: raw.rules || {}
+  };
+}
+function findDesignMd(filePath, projectRoot) {
+  let dir = path__default.dirname(path__default.resolve(projectRoot, filePath));
+  const root = path__default.resolve(projectRoot);
+  while (dir.startsWith(root)) {
+    const candidate = path__default.join(dir, "DESIGN.md");
+    if (fs__default.existsSync(candidate)) {
+      const content = fs__default.readFileSync(candidate, "utf-8");
+      const tokens = parseDesignMd(content);
+      if (!tokens) return null;
+      const designMdPath = path__default.relative(projectRoot, candidate);
+      return { tokens, designMdPath };
+    }
+    const parent = path__default.dirname(dir);
+    if (parent === dir) break;
+    dir = parent;
+  }
+  return null;
+}
+export {
+  isAnimationEasingProperty as a,
+  isColorProperty as b,
+  isRadiusProperty as c,
+  isSpacingProperty as d,
+  isTypographyProperty as e,
+  findDesignMd as f,
+  matchAnimationEasing as g,
+  matchColor as h,
+  isAnimationDurationProperty as i,
+  matchComponent as j,
+  matchRounded as k,
+  matchSpacing as l,
+  matchAnimationDuration as m,
+  matchTypographyProperty as n,
+  isBackgroundShorthand as o,
+  parseDesignMd as p,
+  extractBackgroundColors as q,
+  formatComponentMismatches as r,
+  hexToRgbValues as s,
+  relativeLuminance as t,
+  contrastRatio as u
+};

package/dist/tools.js

@@ -1,94 +1,16 @@
 import postcss from "postcss";
-import yaml, { load, dump } from "js-yaml";
-import * as fs from "node:fs";
-import fs__default, { promises } from "node:fs";
-import * as path from "node:path";
-import path__default from "node:path";
+import { f as findDesignMd, b as isColorProperty, h as matchColor, d as isSpacingProperty, l as matchSpacing, c as isRadiusProperty, k as matchRounded, e as isTypographyProperty, n as matchTypographyProperty, i as isAnimationDurationProperty, m as matchAnimationDuration, a as isAnimationEasingProperty, g as matchAnimationEasing, o as isBackgroundShorthand, q as extractBackgroundColors, j as matchComponent, r as formatComponentMismatches, s as hexToRgbValues, t as relativeLuminance, u as contrastRatio, p as parseDesignMd } from "./parse-design-md-C2uZEN8Y.js";
 import selectorParser from "postcss-selector-parser";
 import { selectorSpecificity } from "@csstools/selector-specificity";
 import { walkElements, JAY_EXTENSION } from "@jay-framework/compiler-shared";
+import * as fs from "node:fs";
+import { promises } from "node:fs";
+import * as path from "node:path";
+import path__default from "node:path";
+import { load, dump } from "js-yaml";
 import { fileURLToPath } from "node:url";
 import { makeJayQuery, makeJayAction, makeJayStackComponent, phaseOutput } from "@jay-framework/fullstack-component";
 import { parseJayFile, JAY_IMPORT_RESOLVER } from "@jay-framework/compiler-jay-html";
-function extractFrontmatter(content) {
-  const match = content.match(/^---\s*\n([\s\S]*?)\n---/);
-  return match ? match[1] : null;
-}
-function resolveReferences(tokens) {
-  const resolve = (value) => {
-    return value.replace(/\{([^}]+)\}/g, (_, refPath) => {
-      const parts = refPath.split(".");
-      let current = tokens;
-      for (const part of parts) {
-        if (current == null || typeof current !== "object") return `{${refPath}}`;
-        current = current[part];
-      }
-      if (typeof current === "string") return resolve(current);
-      if (typeof current === "number") return String(current);
-      return `{${refPath}}`;
-    });
-  };
-  if (tokens.components) {
-    for (const [name, spec] of Object.entries(tokens.components)) {
-      for (const [prop, value] of Object.entries(spec)) {
-        if (typeof value === "string" && value.includes("{")) {
-          tokens.components[name][prop] = resolve(value);
-        }
-      }
-    }
-  }
-}
-function normalizeStringValues(map) {
-  if (!map) return {};
-  const result = {};
-  for (const [key, value] of Object.entries(map)) {
-    result[key] = String(value);
-  }
-  return result;
-}
-function parseDesignMd(content) {
-  const frontmatter = extractFrontmatter(content);
-  if (!frontmatter) return null;
-  const raw = yaml.load(frontmatter);
-  if (!raw || typeof raw !== "object") return null;
-  const rawComponents = {};
-  if (raw.components) {
-    for (const [name, spec] of Object.entries(raw.components)) {
-      rawComponents[name] = { ...spec };
-    }
-  }
-  resolveReferences(raw);
-  return {
-    name: raw.name,
-    colors: raw.colors || {},
-    typography: raw.typography || {},
-    spacing: normalizeStringValues(raw.spacing),
-    rounded: normalizeStringValues(raw.rounded),
-    breakpoints: normalizeStringValues(raw.breakpoints),
-    animations: raw.animations || {},
-    components: raw.components || {},
-    rawComponents,
-    rules: raw.rules || {}
-  };
-}
-function findDesignMd(filePath, projectRoot) {
-  let dir = path__default.dirname(path__default.resolve(projectRoot, filePath));
-  const root = path__default.resolve(projectRoot);
-  while (dir.startsWith(root)) {
-    const candidate = path__default.join(dir, "DESIGN.md");
-    if (fs__default.existsSync(candidate)) {
-      const content = fs__default.readFileSync(candidate, "utf-8");
-      const tokens = parseDesignMd(content);
-      if (!tokens) return null;
-      const designMdPath = path__default.relative(projectRoot, candidate);
-      return { tokens, designMdPath };
-    }
-    const parent = path__default.dirname(dir);
-    if (parent === dir) break;
-    dir = parent;
-  }
-  return null;
-}
 const ALLOW_COMMENT$1 = "design-system: allow";
 function computeSpecificity(selector) {
   let result = [0, 0, 0];
@@ -333,314 +255,6 @@ function resolveCascadeByBreakpoint(cssSources, root) {
   }
   return result;
 }
-function normalizeHex(color) {
-  const hex = color.trim().toLowerCase();
-  if (!/^#[0-9a-f]{3,8}$/.test(hex)) return null;
-  if (hex.length === 4) {
-    return `#${hex[1]}${hex[1]}${hex[2]}${hex[2]}${hex[3]}${hex[3]}`;
-  }
-  return hex.length === 7 ? hex : null;
-}
-function parseRgb(value) {
-  const match = value.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
-  if (!match) return null;
-  const r = parseInt(match[1], 10);
-  const g = parseInt(match[2], 10);
-  const b = parseInt(match[3], 10);
-  return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
-}
-function normalizeColor(value) {
-  const trimmed = value.trim().toLowerCase();
-  if (trimmed.startsWith("#")) return normalizeHex(trimmed);
-  if (trimmed.startsWith("rgb")) return parseRgb(trimmed);
-  return null;
-}
-const COLOR_PROPERTIES = /* @__PURE__ */ new Set([
-  "color",
-  "background-color",
-  "border-color",
-  "border-top-color",
-  "border-right-color",
-  "border-bottom-color",
-  "border-left-color",
-  "outline-color",
-  "text-decoration-color",
-  "fill",
-  "stroke"
-]);
-const SPACING_PROPERTIES = /* @__PURE__ */ new Set([
-  "padding",
-  "padding-top",
-  "padding-right",
-  "padding-bottom",
-  "padding-left",
-  "margin",
-  "margin-top",
-  "margin-right",
-  "margin-bottom",
-  "margin-left",
-  "gap",
-  "row-gap",
-  "column-gap",
-  "top",
-  "right",
-  "bottom",
-  "left"
-]);
-const RADIUS_PROPERTIES = /* @__PURE__ */ new Set([
-  "border-radius",
-  "border-top-left-radius",
-  "border-top-right-radius",
-  "border-bottom-left-radius",
-  "border-bottom-right-radius"
-]);
-function isColorProperty(property) {
-  return COLOR_PROPERTIES.has(property);
-}
-function isSpacingProperty(property) {
-  return SPACING_PROPERTIES.has(property);
-}
-function isRadiusProperty(property) {
-  return RADIUS_PROPERTIES.has(property);
-}
-function isTypographyProperty(property) {
-  return property === "font-size" || property === "font-weight" || property === "line-height" || property === "letter-spacing" || property === "font-family";
-}
-function isAnimationDurationProperty(property) {
-  return property === "transition-duration" || property === "animation-duration";
-}
-function isAnimationEasingProperty(property) {
-  return property === "transition-timing-function" || property === "animation-timing-function";
-}
-function matchColor(value, colorTokens) {
-  if (value.startsWith("var(")) return { matches: true };
-  if (value === "transparent" || value === "inherit" || value === "currentColor" || value === "initial" || value === "unset") {
-    return { matches: true };
-  }
-  const normalized = normalizeColor(value);
-  if (!normalized) return { matches: true };
-  const tokenEntries = Object.entries(colorTokens);
-  for (const [name, tokenValue] of tokenEntries) {
-    const normalizedToken = normalizeColor(tokenValue);
-    if (normalizedToken === normalized) return { matches: true };
-  }
-  let closestName = "";
-  let closestDist = Infinity;
-  for (const [name, tokenValue] of tokenEntries) {
-    const nt = normalizeColor(tokenValue);
-    if (!nt) continue;
-    const dist = colorDistance(normalized, nt);
-    if (dist < closestDist) {
-      closestDist = dist;
-      closestName = name;
-    }
-  }
-  const suggestion = closestName ? `Use token {colors.${closestName}} ("${colorTokens[closestName]}")` : "Add this color to DESIGN.md colors section";
-  return { matches: false, suggestion };
-}
-function colorDistance(a, b) {
-  const ar = parseInt(a.slice(1, 3), 16);
-  const ag = parseInt(a.slice(3, 5), 16);
-  const ab = parseInt(a.slice(5, 7), 16);
-  const br = parseInt(b.slice(1, 3), 16);
-  const bg = parseInt(b.slice(3, 5), 16);
-  const bb = parseInt(b.slice(5, 7), 16);
-  return Math.sqrt((ar - br) ** 2 + (ag - bg) ** 2 + (ab - bb) ** 2);
-}
-function matchSpacing(value, spacingTokens) {
-  if (value.startsWith("var(") || value === "auto" || value === "0" || value === "inherit" || value === "initial" || value === "unset") {
-    return { matches: true };
-  }
-  const parts = value.split(/\s+/);
-  const tokenValues = new Set(Object.values(spacingTokens));
-  tokenValues.add("0");
-  for (const part of parts) {
-    if (part === "0" || part === "auto" || part.startsWith("var(")) continue;
-    if (!tokenValues.has(part)) {
-      return {
-        matches: false,
-        suggestion: `Use a DESIGN.md spacing token`
-      };
-    }
-  }
-  return { matches: true };
-}
-function matchRounded(value, roundedTokens) {
-  if (value.startsWith("var(") || value === "0" || value === "inherit" || value === "initial" || value === "unset") {
-    return { matches: true };
-  }
-  const tokenValues = new Set(Object.values(roundedTokens));
-  tokenValues.add("0");
-  if (!tokenValues.has(value)) {
-    return {
-      matches: false,
-      suggestion: `Use a DESIGN.md rounded token`
-    };
-  }
-  return { matches: true };
-}
-function matchTypographyProperty(property, value, typographyTokens) {
-  if (value.startsWith("var(") || value === "inherit" || value === "initial" || value === "unset") {
-    return { matches: true };
-  }
-  const tokenValues = /* @__PURE__ */ new Set();
-  for (const token of Object.values(typographyTokens)) {
-    if (property === "font-size" && token.fontSize) tokenValues.add(token.fontSize);
-    if (property === "font-weight" && token.fontWeight != null)
-      tokenValues.add(String(token.fontWeight));
-    if (property === "line-height" && token.lineHeight != null)
-      tokenValues.add(String(token.lineHeight));
-    if (property === "letter-spacing" && token.letterSpacing)
-      tokenValues.add(token.letterSpacing);
-    if (property === "font-family" && token.fontFamily) tokenValues.add(token.fontFamily);
-  }
-  if (tokenValues.size === 0) return { matches: true };
-  if (tokenValues.has(value)) return { matches: true };
-  if (property === "font-family") {
-    const normalizedValue = value.replace(/['"]/g, "").trim();
-    const primaryFont = normalizedValue.split(",")[0].trim();
-    for (const tv of tokenValues) {
-      if (tv.replace(/['"]/g, "").trim() === primaryFont) return { matches: true };
-    }
-  }
-  return {
-    matches: false,
-    suggestion: `Use a DESIGN.md typography token`
-  };
-}
-function matchAnimationDuration(value, animationTokens) {
-  if (value.startsWith("var(") || value === "0s" || value === "0ms" || value === "inherit" || value === "initial" || value === "unset") {
-    return { matches: true };
-  }
-  const durations = /* @__PURE__ */ new Set();
-  for (const preset of Object.values(animationTokens)) {
-    if (preset.duration) durations.add(preset.duration);
-  }
-  if (durations.size === 0) return { matches: true };
-  if (durations.has(value)) return { matches: true };
-  return {
-    matches: false,
-    suggestion: `Use a DESIGN.md animation preset duration`
-  };
-}
-function matchAnimationEasing(value, animationTokens) {
-  if (value.startsWith("var(") || value === "inherit" || value === "initial" || value === "unset") {
-    return { matches: true };
-  }
-  const easings = /* @__PURE__ */ new Set();
-  for (const preset of Object.values(animationTokens)) {
-    if (preset.easing) easings.add(preset.easing);
-  }
-  if (easings.size === 0) return { matches: true };
-  if (easings.has(value)) return { matches: true };
-  const normalizedValue = value.replace(/\s/g, "");
-  for (const e of easings) {
-    if (e.replace(/\s/g, "") === normalizedValue) return { matches: true };
-  }
-  return {
-    matches: false,
-    suggestion: `Use a DESIGN.md animation preset easing`
-  };
-}
-function matchComponent(elementStyles, componentSpec, rawSpec) {
-  const mismatches = [];
-  const propertyMapping = {
-    backgroundColor: "background-color",
-    textColor: "color",
-    rounded: "border-radius",
-    padding: "padding",
-    height: "height",
-    width: "width"
-  };
-  for (const [specProp, expectedValue] of Object.entries(componentSpec)) {
-    if (specProp === "typography") continue;
-    const cssProp = propertyMapping[specProp] || specProp;
-    const actualValue = elementStyles[cssProp];
-    if (actualValue && actualValue !== expectedValue) {
-      const rawValue = rawSpec?.[specProp];
-      mismatches.push({
-        cssProp,
-        expected: expectedValue,
-        expectedRaw: rawValue !== expectedValue ? rawValue : void 0,
-        actual: actualValue
-      });
-    }
-  }
-  return mismatches;
-}
-function formatComponentMismatches(componentName, mismatches, elementDescription) {
-  const specPath = `DESIGN.md components.${componentName}`;
-  const header = elementDescription ? `${specPath} on ${elementDescription}:` : `${specPath}:`;
-  const lines = [header];
-  for (let i = 0; i < mismatches.length; i++) {
-    const m = mismatches[i];
-    const expectedDisplay = m.expectedRaw ? `${m.expectedRaw} (${m.expected})` : `"${m.expected}"`;
-    lines.push(`  ${i + 1}. ${m.cssProp} should be ${expectedDisplay}, found "${m.actual}"`);
-  }
-  return lines.join("\n");
-}
-function isBackgroundShorthand(property) {
-  return property === "background";
-}
-function splitTopLevelCommas(value) {
-  const parts = [];
-  let depth = 0;
-  let current = "";
-  for (const ch of value) {
-    if (ch === "(" || ch === "[") depth++;
-    else if (ch === ")" || ch === "]") depth--;
-    if (ch === "," && depth === 0) {
-      parts.push(current.trim());
-      current = "";
-    } else {
-      current += ch;
-    }
-  }
-  if (current.trim()) parts.push(current.trim());
-  return parts;
-}
-function extractBackgroundColors(value) {
-  if (value.startsWith("var(") || value === "transparent" || value === "none" || value === "inherit" || value === "initial" || value === "unset") {
-    return [];
-  }
-  const layers = splitTopLevelCommas(value);
-  const colors = [];
-  for (const layer of layers) {
-    if (/^(linear-gradient|radial-gradient|conic-gradient|repeating-|url)\s*\(/i.test(layer)) {
-      continue;
-    }
-    const hexMatch = layer.match(/(^|\s)(#[0-9a-fA-F]{3,8})(\s|$)/);
-    if (hexMatch) {
-      colors.push(hexMatch[2]);
-      continue;
-    }
-    const rgbMatch = layer.match(/(^|\s)(rgba?\s*\([^)]+\))/);
-    if (rgbMatch) {
-      colors.push(rgbMatch[2]);
-    }
-  }
-  return colors;
-}
-function hexToRgbValues(hex) {
-  const normalized = normalizeHex(hex);
-  if (!normalized) return null;
-  return [
-    parseInt(normalized.slice(1, 3), 16),
-    parseInt(normalized.slice(3, 5), 16),
-    parseInt(normalized.slice(5, 7), 16)
-  ];
-}
-function relativeLuminance(r, g, b) {
-  const [rs, gs, bs] = [r / 255, g / 255, b / 255].map(
-    (c) => c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)
-  );
-  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
-}
-function contrastRatio(l1, l2) {
-  const lighter = Math.max(l1, l2);
-  const darker = Math.min(l1, l2);
-  return (lighter + 0.05) / (darker + 0.05);
-}
 const GUIDE_SUGGESTION$2 = "See design-system-validator agent-kit/designer/design-system.md for usage guide";
 function elementHint(el) {
   const tag = el.rawTagName?.toLowerCase() || "element";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jay-framework/design-system-validator",
-  "version": "0.25.4",
+  "version": "0.26.0",
   "type": "module",
   "description": "Design system validation plugin for Jay Framework — validates jay-html CSS against DESIGN.md tokens",
   "license": "Apache-2.0",
@@ -10,10 +10,18 @@
     "plugin.yaml",
     "agent-kit"
   ],
+  "typesVersions": {
+    "*": {
+      "design-tokens": [
+        "dist/design-tokens.d.ts"
+      ]
+    }
+  },
   "exports": {
     ".": "./dist/index.js",
     "./client": "./dist/index.client.js",
     "./tools": "./dist/tools.js",
+    "./design-tokens": "./dist/design-tokens.js",
     "./plugin.yaml": "./plugin.yaml",
     "./dist/pages/settings/page.jay-html": "./dist/pages/settings/page.jay-html",
     "./font-fallback.jay-action": "./dist/actions/font-fallback.jay-action"
@@ -26,7 +34,7 @@
     "build:client": "vite build",
     "validate": "jay-stack-cli validate-plugin",
     "build:server": "vite build --ssr",
-    "build:types": "tsup lib/index.ts lib/index.client.ts lib/tools.ts --dts-only --format esm",
+    "build:types": "tsup lib/index.ts lib/index.client.ts lib/tools.ts lib/design-tokens.ts --dts-only --format esm",
     "build:check-types": "tsc",
     "clean": "rimraf dist",
     "confirm": "npm run clean && npm run build && npm run test",
@@ -37,32 +45,32 @@
     "@capsizecss/metrics": "^4.2.0",
     "@capsizecss/unpack": "^4.0.1",
     "@csstools/selector-specificity": "^5.0.0",
-    "@jay-framework/component": "^0.25.4",
-    "@jay-framework/fullstack-component": "^0.25.4",
-    "@jay-framework/plugin-validator": "^0.25.4",
-    "@jay-framework/stack-server-runtime": "^0.25.4",
+    "@jay-framework/component": "^0.26.0",
+    "@jay-framework/fullstack-component": "^0.26.0",
+    "@jay-framework/plugin-validator": "^0.26.0",
+    "@jay-framework/stack-server-runtime": "^0.26.0",
     "js-yaml": "^4.1.0",
     "postcss": "^8.5.6",
     "postcss-selector-parser": "^7.1.0"
   },
   "peerDependencies": {
-    "@jay-framework/compiler-jay-html": "^0.25.4",
-    "@jay-framework/compiler-shared": "^0.25.4"
+    "@jay-framework/compiler-jay-html": "^0.26.0",
+    "@jay-framework/compiler-shared": "^0.26.0"
   },
   "devDependencies": {
-    "@jay-framework/compiler-jay-html": "^0.25.4",
-    "@jay-framework/compiler-jay-stack": "^0.25.4",
-    "@jay-framework/compiler-shared": "^0.25.4",
-    "@jay-framework/dev-environment": "^0.25.4",
-    "@jay-framework/jay-cli": "^0.25.4",
-    "@jay-framework/jay-stack-cli": "^0.25.4",
+    "@jay-framework/compiler-jay-html": "^0.26.0",
+    "@jay-framework/compiler-jay-stack": "^0.26.0",
+    "@jay-framework/compiler-shared": "^0.26.0",
+    "@jay-framework/dev-environment": "^0.26.0",
+    "@jay-framework/jay-cli": "^0.26.0",
+    "@jay-framework/jay-stack-cli": "^0.26.0",
     "@types/js-yaml": "^4.0.9",
     "@types/node": "^22.15.21",
     "node-html-parser": "^6.1.0",
     "rimraf": "^5.0.5",
     "tsup": "^8.0.1",
     "typescript": "^5.3.3",
-    "vite": "^5.0.11",
-    "vitest": "^1.2.1"
+    "vite": "^6.4.4",
+    "vitest": "^4.1.11"
   }
 }