@dryui/mcp 0.1.0

package/dist/theme-checker.js

@@ -0,0 +1,823 @@
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+function __accessProp(key) {
+  return this[key];
+}
+var __toESMCache_node;
+var __toESMCache_esm;
+var __toESM = (mod, isNodeMode, target) => {
+  var canCache = mod != null && typeof mod === "object";
+  if (canCache) {
+    var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
+    var cached = cache.get(mod);
+    if (cached)
+      return cached;
+  }
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: __accessProp.bind(mod, key),
+        enumerable: true
+      });
+  if (canCache)
+    cache.set(mod, to);
+  return to;
+};
+var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
+var __returnValue = (v) => v;
+function __exportSetter(name, newValue) {
+  this[name] = __returnValue.bind(null, newValue);
+}
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: __exportSetter.bind(all, name)
+    });
+};
+
+// src/utils.ts
+function buildLineOffsets(text) {
+  const offsets = [0];
+  for (let i = 0;i < text.length; i++) {
+    if (text[i] === `
+`)
+      offsets.push(i + 1);
+  }
+  return offsets;
+}
+function lineAtOffset(lineOffsets, offset) {
+  let lo = 0;
+  let hi = lineOffsets.length - 1;
+  while (lo < hi) {
+    const mid = lo + hi + 1 >> 1;
+    const midVal = lineOffsets[mid];
+    if (midVal !== undefined && midVal <= offset)
+      lo = mid;
+    else
+      hi = mid - 1;
+  }
+  return lo + 1;
+}
+
+// src/theme-checker.ts
+function capture(match, index) {
+  const value = match[index];
+  if (value === undefined)
+    throw new Error(`Missing capture group ${index}`);
+  return value;
+}
+var REQUIRED_TOKENS = [
+  "--dry-color-text-strong",
+  "--dry-color-text-weak",
+  "--dry-color-icon",
+  "--dry-color-stroke-strong",
+  "--dry-color-stroke-weak",
+  "--dry-color-fill",
+  "--dry-color-fill-hover",
+  "--dry-color-fill-active",
+  "--dry-color-brand",
+  "--dry-color-text-brand",
+  "--dry-color-fill-brand",
+  "--dry-color-fill-brand-hover",
+  "--dry-color-fill-brand-active",
+  "--dry-color-fill-brand-weak",
+  "--dry-color-stroke-brand",
+  "--dry-color-on-brand",
+  "--dry-color-focus-ring",
+  "--dry-color-bg-base",
+  "--dry-color-bg-raised",
+  "--dry-color-bg-overlay",
+  "--dry-color-text-error",
+  "--dry-color-fill-error",
+  "--dry-color-fill-error-hover",
+  "--dry-color-fill-error-weak",
+  "--dry-color-stroke-error",
+  "--dry-color-on-error",
+  "--dry-color-text-warning",
+  "--dry-color-fill-warning",
+  "--dry-color-fill-warning-hover",
+  "--dry-color-fill-warning-weak",
+  "--dry-color-stroke-warning",
+  "--dry-color-on-warning",
+  "--dry-color-text-success",
+  "--dry-color-fill-success",
+  "--dry-color-fill-success-hover",
+  "--dry-color-fill-success-weak",
+  "--dry-color-stroke-success",
+  "--dry-color-on-success",
+  "--dry-color-text-info",
+  "--dry-color-fill-info",
+  "--dry-color-fill-info-hover",
+  "--dry-color-fill-info-weak",
+  "--dry-color-stroke-info",
+  "--dry-color-on-info",
+  "--dry-shadow-raised",
+  "--dry-shadow-overlay",
+  "--dry-color-overlay-backdrop",
+  "--dry-color-overlay-backdrop-strong"
+];
+var FULL_THEME_THRESHOLD = 4;
+var NAMED_COLORS = new Set([
+  "aliceblue",
+  "antiquewhite",
+  "aqua",
+  "aquamarine",
+  "azure",
+  "beige",
+  "bisque",
+  "black",
+  "blanchedalmond",
+  "blue",
+  "blueviolet",
+  "brown",
+  "burlywood",
+  "cadetblue",
+  "chartreuse",
+  "chocolate",
+  "coral",
+  "cornflowerblue",
+  "cornsilk",
+  "crimson",
+  "cyan",
+  "darkblue",
+  "darkcyan",
+  "darkgoldenrod",
+  "darkgray",
+  "darkgreen",
+  "darkgrey",
+  "darkkhaki",
+  "darkmagenta",
+  "darkolivegreen",
+  "darkorange",
+  "darkorchid",
+  "darkred",
+  "darksalmon",
+  "darkseagreen",
+  "darkslateblue",
+  "darkslategray",
+  "darkslategrey",
+  "darkturquoise",
+  "darkviolet",
+  "deeppink",
+  "deepskyblue",
+  "dimgray",
+  "dimgrey",
+  "dodgerblue",
+  "firebrick",
+  "floralwhite",
+  "forestgreen",
+  "fuchsia",
+  "gainsboro",
+  "ghostwhite",
+  "gold",
+  "goldenrod",
+  "gray",
+  "green",
+  "greenyellow",
+  "grey",
+  "honeydew",
+  "hotpink",
+  "indianred",
+  "indigo",
+  "ivory",
+  "khaki",
+  "lavender",
+  "lavenderblush",
+  "lawngreen",
+  "lemonchiffon",
+  "lightblue",
+  "lightcoral",
+  "lightcyan",
+  "lightgoldenrodyellow",
+  "lightgray",
+  "lightgreen",
+  "lightgrey",
+  "lightpink",
+  "lightsalmon",
+  "lightseagreen",
+  "lightskyblue",
+  "lightslategray",
+  "lightslategrey",
+  "lightsteelblue",
+  "lightyellow",
+  "lime",
+  "limegreen",
+  "linen",
+  "magenta",
+  "maroon",
+  "mediumaquamarine",
+  "mediumblue",
+  "mediumorchid",
+  "mediumpurple",
+  "mediumseagreen",
+  "mediumslateblue",
+  "mediumspringgreen",
+  "mediumturquoise",
+  "mediumvioletred",
+  "midnightblue",
+  "mintcream",
+  "mistyrose",
+  "moccasin",
+  "navajowhite",
+  "navy",
+  "oldlace",
+  "olive",
+  "olivedrab",
+  "orange",
+  "orangered",
+  "orchid",
+  "palegoldenrod",
+  "palegreen",
+  "paleturquoise",
+  "palevioletred",
+  "papayawhip",
+  "peachpuff",
+  "peru",
+  "pink",
+  "plum",
+  "powderblue",
+  "purple",
+  "rebeccapurple",
+  "red",
+  "rosybrown",
+  "royalblue",
+  "saddlebrown",
+  "salmon",
+  "sandybrown",
+  "seagreen",
+  "seashell",
+  "sienna",
+  "silver",
+  "skyblue",
+  "slateblue",
+  "slategray",
+  "slategrey",
+  "snow",
+  "springgreen",
+  "steelblue",
+  "tan",
+  "teal",
+  "thistle",
+  "tomato",
+  "turquoise",
+  "violet",
+  "wheat",
+  "white",
+  "whitesmoke",
+  "yellow",
+  "yellowgreen",
+  "transparent",
+  "currentcolor",
+  "inherit"
+]);
+var SURFACE_TOKENS = new Set([
+  "--dry-color-bg-base",
+  "--dry-color-bg-raised",
+  "--dry-color-bg-overlay"
+]);
+function stripComments(css) {
+  return css.replace(/\/\*[\s\S]*?\*\//g, "");
+}
+function extractDryVariables(css) {
+  const cleaned = stripComments(css);
+  const vars = new Map;
+  const regex = /(--dry-[a-zA-Z0-9-]+)\s*:\s*([^;]*);/g;
+  let match;
+  const lineOffsets = buildLineOffsets(cleaned);
+  while ((match = regex.exec(cleaned)) !== null) {
+    const name = capture(match, 1);
+    const value = (match[2] ?? "").trim();
+    const line = lineAtOffset(lineOffsets, match.index);
+    vars.set(name, { value, line });
+  }
+  return vars;
+}
+function extractAllVariables(css) {
+  const cleaned = stripComments(css);
+  const vars = new Map;
+  const regex = /(--[a-zA-Z0-9-]+)\s*:\s*([^;]*);/g;
+  let match;
+  while ((match = regex.exec(cleaned)) !== null) {
+    const name = capture(match, 1);
+    const value = (match[2] ?? "").trim();
+    vars.set(name, value);
+  }
+  return vars;
+}
+function parseVarFunc(value) {
+  const prefix = /^var\(\s*/.exec(value);
+  if (!prefix)
+    return null;
+  let pos = prefix[0].length;
+  const nameMatch = /^(--[a-zA-Z0-9-]+)/.exec(value.slice(pos));
+  if (!nameMatch)
+    return null;
+  const refName = capture(nameMatch, 1);
+  pos += refName.length;
+  while (pos < value.length && /\s/.test(value[pos]))
+    pos++;
+  if (value[pos] === ")")
+    return { refName, fallback: null };
+  if (value[pos] !== ",")
+    return { refName, fallback: null };
+  pos++;
+  while (pos < value.length && /\s/.test(value[pos]))
+    pos++;
+  let depth = 1;
+  const fallbackStart = pos;
+  while (pos < value.length && depth > 0) {
+    if (value[pos] === "(")
+      depth++;
+    else if (value[pos] === ")")
+      depth--;
+    if (depth > 0)
+      pos++;
+  }
+  const fallback = value.slice(fallbackStart, pos).trim();
+  return { refName, fallback: fallback || null };
+}
+function resolveVarReferences(dryVars, allVars) {
+  const resolved = new Map;
+  for (const [name, entry] of dryVars) {
+    const parsed = parseVarFunc(entry.value);
+    if (!parsed) {
+      resolved.set(name, { original: entry.value, resolved: entry.value, line: entry.line });
+      continue;
+    }
+    const { refName, fallback } = parsed;
+    const refValue = allVars.get(refName);
+    if (refValue !== undefined) {
+      resolved.set(name, { original: entry.value, resolved: refValue, line: entry.line });
+    } else if (fallback !== null) {
+      resolved.set(name, { original: entry.value, resolved: fallback, line: entry.line });
+    } else {
+      resolved.set(name, { original: entry.value, resolved: entry.value, line: entry.line });
+    }
+  }
+  return resolved;
+}
+function classifyValue(value) {
+  const v = value.trim();
+  if (!v)
+    return "other";
+  if (/^#([0-9a-fA-F]{3,8})$/.test(v))
+    return "color";
+  if (/^rgba?\s*\(/.test(v))
+    return "color";
+  if (/^hsla?\s*\(/.test(v))
+    return "color";
+  if (/^color-mix\s*\(/.test(v))
+    return "color";
+  if (NAMED_COLORS.has(v.toLowerCase()))
+    return "color";
+  if (/^(?:oklch|lch|lab|oklab|color)\s*\(/.test(v))
+    return "color";
+  if (/^-?[\d.]+(?:px|rem|em|%|vw|vh)$/.test(v))
+    return "length";
+  if (/^-?[\d.]+(?:ms|s)$/.test(v))
+    return "time";
+  if (/^-?[\d.]+(?:px|rem|em)\s+-?[\d.]+(?:px|rem|em)/.test(v))
+    return "shadow";
+  if (/^["']/.test(v))
+    return "font";
+  if (/,\s*["']?[a-zA-Z]/.test(v) && !/^(rgb|hsl)/.test(v))
+    return "font";
+  return "other";
+}
+function parseColor(value) {
+  const v = value.trim();
+  const hexMatch = v.match(/^#([0-9a-fA-F]{3,8})$/);
+  if (hexMatch) {
+    const hex = capture(hexMatch, 1);
+    if (hex.length === 3) {
+      return {
+        r: parseInt(hex.charAt(0) + hex.charAt(0), 16),
+        g: parseInt(hex.charAt(1) + hex.charAt(1), 16),
+        b: parseInt(hex.charAt(2) + hex.charAt(2), 16)
+      };
+    }
+    if (hex.length === 6 || hex.length === 8) {
+      return {
+        r: parseInt(hex.slice(0, 2), 16),
+        g: parseInt(hex.slice(2, 4), 16),
+        b: parseInt(hex.slice(4, 6), 16)
+      };
+    }
+    return null;
+  }
+  const rgbMatch = v.match(/^rgba?\(\s*(\d+)\s*[,/]\s*(\d+)\s*[,/]\s*(\d+)/);
+  if (rgbMatch) {
+    return {
+      r: parseInt(capture(rgbMatch, 1), 10),
+      g: parseInt(capture(rgbMatch, 2), 10),
+      b: parseInt(capture(rgbMatch, 3), 10)
+    };
+  }
+  const hslMatch = v.match(/^hsla?\(\s*(\d+)\s*[,/]\s*([\d.]+)%?\s*[,/]\s*([\d.]+)%?/);
+  if (hslMatch) {
+    const h = parseInt(capture(hslMatch, 1), 10);
+    const s = parseFloat(capture(hslMatch, 2)) / 100;
+    const l = parseFloat(capture(hslMatch, 3)) / 100;
+    return hslToRgb(h, s, l);
+  }
+  const modernRgbMatch = v.match(/^rgba?\(\s*(\d+)\s+(\d+)\s+(\d+)/);
+  if (modernRgbMatch) {
+    return {
+      r: parseInt(capture(modernRgbMatch, 1), 10),
+      g: parseInt(capture(modernRgbMatch, 2), 10),
+      b: parseInt(capture(modernRgbMatch, 3), 10)
+    };
+  }
+  const modernHslMatch = v.match(/^hsla?\(\s*(\d+)\s+([\d.]+)%?\s+([\d.]+)%?/);
+  if (modernHslMatch) {
+    const h = parseInt(capture(modernHslMatch, 1), 10);
+    const s = parseFloat(capture(modernHslMatch, 2)) / 100;
+    const l = parseFloat(capture(modernHslMatch, 3)) / 100;
+    return hslToRgb(h, s, l);
+  }
+  return null;
+}
+function hslToRgb(h, s, l) {
+  const hue = (h % 360 + 360) % 360;
+  if (s === 0) {
+    const val = Math.round(l * 255);
+    return { r: val, g: val, b: val };
+  }
+  const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+  const p = 2 * l - q;
+  function hueToChannel(t) {
+    let tc = t;
+    if (tc < 0)
+      tc += 1;
+    if (tc > 1)
+      tc -= 1;
+    if (tc < 1 / 6)
+      return p + (q - p) * 6 * tc;
+    if (tc < 1 / 2)
+      return q;
+    if (tc < 2 / 3)
+      return p + (q - p) * (2 / 3 - tc) * 6;
+    return p;
+  }
+  return {
+    r: Math.round(hueToChannel(hue / 360 + 1 / 3) * 255),
+    g: Math.round(hueToChannel(hue / 360) * 255),
+    b: Math.round(hueToChannel(hue / 360 - 1 / 3) * 255)
+  };
+}
+function brightness(r, g, b) {
+  return (r * 299 + g * 587 + b * 114) / 1000;
+}
+function extractAlpha(value) {
+  const v = value.trim();
+  const modernRgbMatch = v.match(/^rgba?\(\s*[\d.]+\s+[\d.]+\s+[\d.]+\s*\/\s*([\d.]+%?)\s*\)/);
+  if (modernRgbMatch) {
+    const val = capture(modernRgbMatch, 1);
+    return val.endsWith("%") ? parseFloat(val) / 100 : parseFloat(val);
+  }
+  const modernHslMatch = v.match(/^hsla?\(\s*[\d.]+\s+[\d.]+%?\s+[\d.]+%?\s*\/\s*([\d.]+%?)\s*\)/);
+  if (modernHslMatch) {
+    const val = capture(modernHslMatch, 1);
+    return val.endsWith("%") ? parseFloat(val) / 100 : parseFloat(val);
+  }
+  const rgbaMatch = v.match(/^rgba\(\s*\d+\s*[,/]\s*\d+\s*[,/]\s*\d+\s*[,/]\s*([\d.]+)\s*\)/);
+  if (rgbaMatch) {
+    return parseFloat(capture(rgbaMatch, 1));
+  }
+  const hslaMatch = v.match(/^hsla\(\s*\d+\s*[,/]\s*[\d.]+%?\s*[,/]\s*[\d.]+%?\s*[,/]\s*([\d.]+)\s*\)/);
+  if (hslaMatch) {
+    return parseFloat(capture(hslaMatch, 1));
+  }
+  const hex8Match = v.match(/^#[0-9a-fA-F]{8}$/);
+  if (hex8Match) {
+    const alphaHex = v.slice(7, 9);
+    return parseInt(alphaHex, 16) / 255;
+  }
+  return 1;
+}
+function checkMissingTokens(vars) {
+  const semanticCount = REQUIRED_TOKENS.filter((t) => vars.has(t)).length;
+  if (semanticCount < FULL_THEME_THRESHOLD)
+    return [];
+  const issues = [];
+  for (const token of REQUIRED_TOKENS) {
+    if (!vars.has(token)) {
+      issues.push({
+        severity: "error",
+        code: "missing-token",
+        variable: token,
+        message: `Required semantic token ${token} is not defined`,
+        fix: `Add ${token} with a color that fits your theme`
+      });
+    }
+  }
+  return issues;
+}
+function checkValueTypes(vars) {
+  const issues = [];
+  for (const [name, entry] of vars) {
+    const val = entry.resolved;
+    if (/^var\(\s*--/.test(val))
+      continue;
+    const classified = classifyValue(val);
+    if (/^--dry-color-/.test(name) && classified !== "color" && classified !== "other") {
+      issues.push({
+        severity: "error",
+        code: "wrong-type",
+        variable: name,
+        value: entry.original,
+        message: `${name} expects a color value but got "${val}" (classified as ${classified})`,
+        fix: `Replace with a color value (e.g., #2563eb, rgb(37,99,235), hsl(217,91%,60%))`
+      });
+    }
+    if (/^--dry-space-/.test(name) && classified !== "length" && classified !== "other") {
+      issues.push({
+        severity: "error",
+        code: "wrong-type",
+        variable: name,
+        value: entry.original,
+        message: `${name} expects a length value but got "${val}" (classified as ${classified})`,
+        fix: `Replace with a length value (e.g., 0.5rem, 4px, 1em)`
+      });
+    }
+    if (/^--dry-radius-/.test(name) && classified !== "length" && classified !== "other") {
+      issues.push({
+        severity: "error",
+        code: "wrong-type",
+        variable: name,
+        value: entry.original,
+        message: `${name} expects a length value but got "${val}" (classified as ${classified})`,
+        fix: `Replace with a length value (e.g., 4px, 0.375rem)`
+      });
+    }
+    if (/^--dry-duration-/.test(name) && classified !== "time" && classified !== "other") {
+      issues.push({
+        severity: "error",
+        code: "wrong-type",
+        variable: name,
+        value: entry.original,
+        message: `${name} expects a time value but got "${val}" (classified as ${classified})`,
+        fix: `Replace with a time value (e.g., 100ms, 0.2s)`
+      });
+    }
+  }
+  return issues;
+}
+function checkContrastHeuristics(vars) {
+  const issues = [];
+  for (const token of SURFACE_TOKENS) {
+    const entry = vars.get(token);
+    if (!entry)
+      continue;
+    const alpha = extractAlpha(entry.resolved);
+    if (alpha < 0.3) {
+      issues.push({
+        severity: "warning",
+        code: "transparent-surface",
+        variable: token,
+        value: entry.original,
+        message: `Surface color has very low opacity (${alpha}) — cards and elevated elements will be nearly invisible`,
+        fix: `Use a solid color (e.g., #1e293b for dark themes, #f8fafc for light themes)`
+      });
+    }
+  }
+  const textStrongEntry = vars.get("--dry-color-text-strong");
+  const textWeakEntry = vars.get("--dry-color-text-weak");
+  const textBrandEntry = vars.get("--dry-color-text-brand");
+  const bgBaseEntry = vars.get("--dry-color-bg-base");
+  if (bgBaseEntry) {
+    const bgRgb = parseColor(bgBaseEntry.resolved);
+    if (bgRgb) {
+      const bgBrightness = brightness(bgRgb.r, bgRgb.g, bgRgb.b);
+      const textPairs = [
+        ["--dry-color-text-strong", textStrongEntry],
+        ["--dry-color-text-weak", textWeakEntry],
+        ["--dry-color-text-brand", textBrandEntry]
+      ];
+      for (const [tokenName, textEntry] of textPairs) {
+        if (!textEntry)
+          continue;
+        const textRgb = parseColor(textEntry.resolved);
+        if (!textRgb)
+          continue;
+        const textBrightness = brightness(textRgb.r, textRgb.g, textRgb.b);
+        if (Math.abs(textBrightness - bgBrightness) < 125) {
+          issues.push({
+            severity: "warning",
+            code: "low-contrast-text",
+            variable: tokenName,
+            value: textEntry.original,
+            message: `Low contrast between ${tokenName} and --dry-color-bg-base (brightness difference: ${Math.round(Math.abs(textBrightness - bgBrightness))})`,
+            fix: `Increase brightness difference between text and background to at least 125`
+          });
+        }
+      }
+    }
+  }
+  const bgRaisedEntry = vars.get("--dry-color-bg-raised");
+  const bgOverlayEntry = vars.get("--dry-color-bg-overlay");
+  if (bgBaseEntry && bgRaisedEntry) {
+    const baseRgb = parseColor(bgBaseEntry.resolved);
+    const raisedRgb = parseColor(bgRaisedEntry.resolved);
+    if (baseRgb && raisedRgb) {
+      const baseBr = brightness(baseRgb.r, baseRgb.g, baseRgb.b);
+      const raisedBr = brightness(raisedRgb.r, raisedRgb.g, raisedRgb.b);
+      if (Math.abs(baseBr - raisedBr) < 3) {
+        issues.push({
+          severity: "warning",
+          code: "no-elevation",
+          variable: "--dry-color-bg-raised",
+          value: bgRaisedEntry.original,
+          message: `--dry-color-bg-base and --dry-color-bg-raised have near-identical brightness (difference: ${Math.round(Math.abs(baseBr - raisedBr))}) — raised surfaces won't have visual separation`,
+          fix: `Make --dry-color-bg-raised 1-2 steps lighter/darker than --dry-color-bg-base`
+        });
+      }
+    }
+  }
+  if (bgRaisedEntry && bgOverlayEntry) {
+    const raisedRgb = parseColor(bgRaisedEntry.resolved);
+    const overlayRgb = parseColor(bgOverlayEntry.resolved);
+    if (raisedRgb && overlayRgb) {
+      const raisedBr = brightness(raisedRgb.r, raisedRgb.g, raisedRgb.b);
+      const overlayBr = brightness(overlayRgb.r, overlayRgb.g, overlayRgb.b);
+      if (Math.abs(raisedBr - overlayBr) < 3) {
+        issues.push({
+          severity: "warning",
+          code: "no-elevation",
+          variable: "--dry-color-bg-overlay",
+          value: bgOverlayEntry.original,
+          message: `--dry-color-bg-raised and --dry-color-bg-overlay have near-identical brightness (difference: ${Math.round(Math.abs(raisedBr - overlayBr))}) — overlay surfaces won't have visual separation`,
+          fix: `Make --dry-color-bg-overlay 1-2 steps lighter/darker than --dry-color-bg-raised`
+        });
+      }
+    }
+  }
+  const pairings = [
+    ["--dry-color-fill-brand", "--dry-color-on-brand"],
+    ["--dry-color-fill-error", "--dry-color-on-error"],
+    ["--dry-color-fill-warning", "--dry-color-on-warning"],
+    ["--dry-color-fill-success", "--dry-color-on-success"],
+    ["--dry-color-fill-info", "--dry-color-on-info"]
+  ];
+  for (const [a, b] of pairings) {
+    if (vars.has(a) && !vars.has(b)) {
+      issues.push({
+        severity: "warning",
+        code: "missing-pairing",
+        variable: b,
+        message: `${a} is defined but its pair ${b} is missing`,
+        fix: `Add ${b} to complete the color pairing`
+      });
+    }
+    if (vars.has(b) && !vars.has(a)) {
+      issues.push({
+        severity: "warning",
+        code: "missing-pairing",
+        variable: a,
+        message: `${b} is defined but its pair ${a} is missing`,
+        fix: `Add ${a} to complete the color pairing`
+      });
+    }
+  }
+  return issues;
+}
+function checkComponentTokens(vars, spec) {
+  const issues = [];
+  const validComponentVars = new Set;
+  for (const comp of Object.values(spec.components)) {
+    for (const varName of Object.keys(comp.cssVars)) {
+      validComponentVars.add(varName);
+    }
+  }
+  for (const [name, entry] of vars) {
+    if (/^--dry-(?:color|space|radius|duration|shadow|text|font)-/.test(name))
+      continue;
+    if (!validComponentVars.has(name)) {
+      issues.push({
+        severity: "warning",
+        code: "unknown-component-token",
+        variable: name,
+        value: entry.original,
+        message: `${name} is not a recognized component token in the spec`,
+        fix: `Check spelling against the component's cssVars in the spec`
+      });
+      continue;
+    }
+    if (/-bg$/.test(name)) {
+      const lower = entry.resolved.toLowerCase();
+      if (lower === "transparent") {
+        issues.push({
+          severity: "warning",
+          code: "transparent-component-bg",
+          variable: name,
+          value: entry.original,
+          message: `${name} is set to transparent — the component background will be invisible`,
+          fix: `Use a solid color or reference a background token (e.g., var(--dry-color-bg-raised))`
+        });
+      } else {
+        const alpha = extractAlpha(entry.resolved);
+        if (alpha < 0.3) {
+          issues.push({
+            severity: "warning",
+            code: "transparent-component-bg",
+            variable: name,
+            value: entry.original,
+            message: `${name} has very low opacity (${alpha}) — the component background will be nearly invisible`,
+            fix: `Use a solid color or reference a background token (e.g., var(--dry-color-bg-raised))`
+          });
+        }
+      }
+    }
+  }
+  return issues;
+}
+function detectDarkScheme(css, allVars) {
+  const issues = [];
+  const signals = [];
+  if (/color-scheme\s*:\s*dark/i.test(css)) {
+    signals.push("color-scheme: dark");
+  }
+  const bgVarNames = ["--bg", "--background", "--bg-color", "--background-color", "--bg-base"];
+  for (const name of bgVarNames) {
+    const value = allVars.get(name);
+    if (value) {
+      const rgb = parseColor(value);
+      if (rgb && brightness(rgb.r, rgb.g, rgb.b) < 50) {
+        signals.push(`${name}: ${value} (dark)`);
+      }
+    }
+  }
+  const bgPropMatch = css.match(/(?:html|body|\*|:root)\s*\{[^}]*background(?:-color)?\s*:\s*([^;]+)/i);
+  if (bgPropMatch) {
+    const val = (bgPropMatch[1] ?? "").trim();
+    const varRef = val.match(/var\(\s*(--[a-zA-Z0-9-]+)/);
+    const resolvedVal = varRef?.[1] ? allVars.get(varRef[1]) : undefined;
+    const colorStr = resolvedVal ?? val;
+    const rgb = parseColor(colorStr);
+    if (rgb && brightness(rgb.r, rgb.g, rgb.b) < 50) {
+      signals.push(`background: ${val} (dark)`);
+    }
+  }
+  if (signals.length > 0) {
+    issues.push({
+      severity: "warning",
+      code: "dark-scheme-no-overrides",
+      variable: "--dry-color-*",
+      message: `Project uses a dark color scheme (${signals.join(", ")}) but has no --dry-color-* overrides. DryUI's default theme is light — components will have poor contrast on dark backgrounds. Either use theme: "dark" in the generate tool, or add --dry-color-* overrides to map DryUI tokens to your dark palette.`,
+      fix: 'Use theme: "dark" in dryui.page(), or override --dry-color-bg-base, --dry-color-bg-raised, --dry-color-text-strong, --dry-color-text-weak, and other semantic tokens with dark-appropriate values'
+    });
+  }
+  return issues;
+}
+function diagnoseTheme(css, spec) {
+  const dryVars = extractDryVariables(css);
+  const allVars = extractAllVariables(css);
+  const resolved = resolveVarReferences(dryVars, allVars);
+  const infoIssues = [];
+  for (const [name, entry] of resolved) {
+    if (/^var\(\s*--/.test(entry.resolved) && entry.resolved === entry.original) {
+      const varRefMatch = entry.original.match(/var\(\s*(--[a-zA-Z0-9-]+)/);
+      const refName = varRefMatch ? varRefMatch[1] : "unknown";
+      infoIssues.push({
+        severity: "info",
+        code: "unresolvable-var",
+        variable: name,
+        value: entry.original,
+        message: `${name} references ${refName} which is not defined in this CSS — type and contrast checks skipped`,
+        fix: null
+      });
+    }
+  }
+  const tier1 = checkMissingTokens(resolved);
+  const tier2 = checkValueTypes(resolved);
+  const tier3 = checkContrastHeuristics(resolved);
+  const tier4 = checkComponentTokens(resolved, spec);
+  const darkSchemeIssues = dryVars.size === 0 ? detectDarkScheme(css, allVars) : [];
+  const allIssues = [...tier1, ...tier2, ...tier3, ...tier4, ...darkSchemeIssues, ...infoIssues];
+  const severityOrder = { error: 0, warning: 1, info: 2 };
+  allIssues.sort((a, b) => (severityOrder[a.severity] ?? 2) - (severityOrder[b.severity] ?? 2));
+  const errors = allIssues.filter((i) => i.severity === "error").length;
+  const warnings = allIssues.filter((i) => i.severity === "warning").length;
+  const infos = allIssues.filter((i) => i.severity === "info").length;
+  const summary = allIssues.length === 0 ? "No issues found" : `${errors} error${errors !== 1 ? "s" : ""}, ${warnings} warning${warnings !== 1 ? "s" : ""}, ${infos} info`;
+  const found = dryVars.size;
+  const requiredSet = new Set(REQUIRED_TOKENS);
+  const requiredFound = [...dryVars.keys()].filter((k) => requiredSet.has(k)).length;
+  const extra = found - requiredFound;
+  return {
+    variables: { found, required: requiredFound, extra },
+    issues: allIssues,
+    summary
+  };
+}
+export {
+  diagnoseTheme
+};