design-constraint-validator 1.0.0 → 2.0.1

package/core/cross-axis-config.ts

@@ -1,152 +0,0 @@
-import fs from "node:fs";
-import { CrossAxisPlugin, type CrossAxisRule, type Ctx } from "./constraints/cross-axis.js";
-
-type When = { id: string; op: "<="|">="|"<"|">"|"=="|"!="; value: number };
-type Require = { id: string; op: "<="|">="|"<"|">"|"=="|"!="; ref?: string; fallback?: string|number };
-type Compare = { a: string; op: "<="|">="|"<"|">"|"=="|"!="; b: string; delta?: string|number };
-type RawRule = { id: string; level?: "error"|"warn"; where?: string; bp?: string; when?: When; require?: Require; compare?: Compare; };
-
-export function loadCrossAxisPlugin(
-  path: string,
-  bp?: string,
-  opts?: { debug?: boolean; knownIds?: Set<string> }
-) {
-  const debug = !!opts?.debug;
-  const known = opts?.knownIds ?? new Set<string>();
-  const log = (...args: any[]) => { if (debug) console.log("[cross-axis]", ...args); };
-
-  if (!fs.existsSync(path)) {
-    log(`no rules file at ${path} (bp=${bp ?? "global"})`);
-    return CrossAxisPlugin([], bp);
-  }
-
-  const raw = JSON.parse(fs.readFileSync(path, "utf8")) as { rules: RawRule[] };
-  const rules: CrossAxisRule[] = [];
-  const unknownIds = new Set<string>();
-  const skipped: Array<{ id?: string; reason: string }> = [];
-
-  // Fuzzy suggestion helpers (lightweight Levenshtein)
-  function levenshtein(a: string, b: string) {
-    const dp = Array(b.length + 1).fill(0).map((_, j) => j);
-    for (let i = 1; i <= a.length; i++) {
-      let prev = i - 1, cur = i;
-      for (let j = 1; j <= b.length; j++) {
-        const tmp = cur;
-        const cost = a[i - 1] === b[j - 1] ? 0 : 1;
-        cur = Math.min(dp[j] + 1, cur + 1, prev + cost);
-        dp[j] = tmp;
-        prev = tmp;
-      }
-      dp[b.length] = cur;
-    }
-    return dp[b.length];
-  }
-  function suggest(id: string, k = 3) {
-    return [...known].map(c => ({ id: c, d: levenshtein(id, c) }))
-      .sort((a, b) => a.d - b.d)
-      .slice(0, k);
-  }
-
-  const needId = (id?: string) => {
-    if (!id) return false;
-    if (!known.has(id)) { unknownIds.add(id); }
-    return true;
-  };
-
-  for (const r of raw.rules || []) {
-    if (r.bp && bp && r.bp !== bp) { continue; }
-    if (r.bp && !bp) { // rule targets specific breakpoint; skip in global run
-      continue;
-    }
-    try {
-      if (r.when && r.require) {
-        // Validate IDs
-        needId(r.when.id);
-        needId(r.require.id);
-        if (r.require.ref) needId(r.require.ref);
-
-        rules.push({
-          id: r.id, level: r.level, where: r.where,
-          when: { id: r.when.id, test: makeOp(r.when.op, r.when.value) },
-          require: {
-            id: r.require.id,
-            test: (v: number, ctx: Ctx) => {
-              const rhs = valueOrRef(ctx, r.require!.ref, r.require!.fallback);
-              return cmp(v, rhs, r.require!.op);
-            },
-            msg: (v: number, ctx: Ctx) => {
-              const rhs = valueOrRef(ctx, r.require!.ref, r.require!.fallback);
-              return `${r.require!.id} ${prettyFail(r.require!.op)} ${fmt(rhs)} (was ${fmt(v)})`;
-            }
-          }
-        });
-      } else if (r.compare) {
-        needId(r.compare.a);
-        needId(r.compare.b);
-
-        rules.push({
-          id: r.id, level: r.level, where: r.where,
-          when: { id: r.compare.a, test: () => true },
-          require: {
-            id: r.compare.a,
-            test: (_: number, ctx: Ctx) => {
-              const a = ctx.getPx(r.compare!.a) ?? NaN;
-              const b = ctx.getPx(r.compare!.b) ?? NaN;
-              const delta = px(r.compare!.delta ?? 0);
-              if (Number.isNaN(a) || Number.isNaN(b)) return true; // skip check if missing
-              return cmp(a, b + delta, r.compare!.op);
-            },
-            msg: (_: number, ctx: Ctx) => {
-              const a = ctx.getPx(r.compare!.a);
-              const b = ctx.getPx(r.compare!.b);
-              const delta = px(r.compare!.delta ?? 0);
-              return `${r.compare!.a} ${prettyFail(r.compare!.op)} ${fmt((b ?? 0) + delta)} (was ${fmt(a ?? NaN)})`;
-            }
-          }
-        });
-      } else {
-        skipped.push({ id: r.id, reason: "neither when+require nor compare present" });
-      }
-    } catch (e: any) {
-      skipped.push({ id: r.id, reason: `exception: ${e?.message ?? e}` });
-    }
-  }
-
-  log(`loaded ${rules.length} rule(s) from ${path}${bp ? ` [bp=${bp}]` : ""}`);
-  if (unknownIds.size) {
-    log(`unknown ids referenced:`, [...unknownIds].join(", "));
-    for (const u of unknownIds) {
-      const s = suggest(u, 3);
-      if (s.length) log(`  did you mean: ${s.map(x => `${x.id} (d=${x.d})`).join(', ')}`);
-    }
-  }
-  if (skipped.length) {
-    for (const s of skipped) log(`skipped rule ${s.id ?? "(no id)"} — ${s.reason}`);
-  }
-
-  // Extra hint for common anchor pitfall
-  for (const r of raw.rules || []) {
-    if (r.require?.ref && !known.has(r.require.ref)) {
-      log(`anchor missing: ${r.require.ref} → will use fallback=${JSON.stringify(r.require.fallback)} when evaluating`);
-    }
-  }
-
-  return CrossAxisPlugin(rules, bp);
-}
-
-// helpers
-const px = (v: string|number) => typeof v === "number" ? v : parseFloat(String(v)) * (String(v).trim().endsWith("rem") ? 16 : 1);
-const cmp = (a:number,b:number,op:When["op"]) =>
-  op === ">="? a>=b : op === ">"? a>b : op === "<="? a<=b : op === "<"? a<b : op === "=="? a===b : a!==b;
-const prettyFail = (op: string) => ({">=":"<",">":"≤","<=":">","<": "≥","==":"≠","!=":"="} as any)[op] || "≠";
-const fmt = (v:number|string) => Number.isFinite(Number(v)) ? `${Number(v)}px` : String(v);
-function valueOrRef(ctx: Ctx, ref?: string, fallback?: string|number) {
-  if (ref) {
-    const v = ctx.getPx(ref);
-    if (v != null) return v;
-  }
-  return typeof fallback === "number" ? fallback : px(fallback ?? 0);
-}
-function makeOp(op: When["op"], rhs: number) {
-  return (v: number) => cmp(v, rhs, op);
-}

package/dist/test-overrides-removal.json

@@ -1,4 +0,0 @@
-{
-  "color.palette.brand.600": "#ffffff",
-  "color.palette.brand.700": null
-}

package/dist/tmp.patch.json

@@ -1,35 +0,0 @@
-{
-  "version": 1,
-  "generatedAt": "2025-11-01T06:31:35.033Z",
-  "baseFile": "tokens/tokens.example.json",
-  "changes": [
-    {
-      "id": "color.palette.brand.600",
-      "from": "oklch(0.62 0.18 260)",
-      "to": "#ffffff",
-      "type": "modify"
-    },
-    {
-      "id": "color.palette.brand.700",
-      "from": "oklch(0.56 0.19 260)",
-      "to": null,
-      "type": "remove"
-    },
-    {
-      "id": "color.role.accent.default",
-      "from": "oklch(0.62 0.18 260)",
-      "to": "#ffffff",
-      "type": "modify"
-    }
-  ],
-  "patch": {
-    "color.palette.brand.600": "#ffffff",
-    "color.palette.brand.700": null,
-    "color.role.accent.default": "#ffffff"
-  },
-  "hash": "e925a3d3532d35c4a569788d9b061fda15f0b5b904867094b3cba727091edf3c",
-  "baseTokensHash": "9c75c6bc19e4700ab5393e9118c6ce5596727e0fdbba890aaef1ebb831868c26",
-  "meta": {
-    "changeCount": 3
-  }
-}

package/tokens/overrides/base.json

@@ -1,22 +0,0 @@
-{
-  "overrides": {
-    "color": {
-      "palette": {
-        "brand": {
-          "600": {
-            "$value": "oklch(0.620 0.180 171)"
-          }
-        }
-      }
-    },
-    "typography": {
-      "font": {
-        "body": {
-          "$value": "Lora"
-        }
-      }
-    }
-  },
-  "links": {},
-  "expressions": {}
-}

package/tokens/overrides/lg.json

@@ -1,20 +0,0 @@
-{
-  "type": {
-    "size": {
-      "h1": "oklch(0.15 0.01 0) 3rem/1.1 'Segoe UI', system-ui",
-      "h2": "oklch(0.15 0.01 0) 2.25rem/1.2 'Segoe UI', system-ui",
-      "body": "oklch(0.20 0.01 0) 1.125rem/1.7 'Segoe UI', system-ui"
-    },
-    "weight": {
-      "body": "300"
-    }
-  },
-  "dimension": {
-    "spacing": {
-      "scale": {
-        "section": "4rem",
-        "component": "2rem"
-      }
-    }
-  }
-}

package/tokens/overrides/md.json

@@ -1,16 +0,0 @@
-{
-  "type": {
-    "size": {
-      "h1": "oklch(0.15 0.01 0) 2.25rem/1.2 'Segoe UI', system-ui",
-      "body": "oklch(0.20 0.01 0) 1rem/1.6 'Segoe UI', system-ui"
-    }
-  },
-  "dimension": {
-    "spacing": {
-      "scale": {
-        "section": "2.5rem",
-        "component": "1.25rem"
-      }
-    }
-  }
-}

package/tokens/overrides/sm.json

@@ -1,16 +0,0 @@
-{
-  "type": {
-    "size": {
-      "body": "oklch(0.20 0.01 0) 0.875rem/1.5 'Segoe UI', system-ui",
-      "caption": "oklch(0.20 0.01 0) 0.75rem/1.4 'Segoe UI', system-ui"
-    }
-  },
-  "dimension": {
-    "spacing": {
-      "scale": {
-        "section": "1.5rem",
-        "component": "0.75rem"
-      }
-    }
-  }
-}

package/tokens/overrides/viol.color.json

@@ -1,6 +0,0 @@
-{
-  "overrides": {
-    "color.palette.brand.500": "oklch(62% 0.12 29)",
-    "color.palette.brand.600": "oklch(80% 0.10 29)"
-  }
-}

package/tokens/overrides/viol.typography.json

@@ -1,6 +0,0 @@
-{
-  "overrides": {
-    "typography.size.h1": "1rem",
-    "typography.size.h2": "1.25rem"
-  }
-}

package/tokens/tokens.demo-violations.json

@@ -1,116 +0,0 @@
-{
-  "$schemaVersion": "1.0.0",
-
-  "color": {
-    "palette": {
-      "gray": {
-        "0":   { "$type": "color", "$value": "oklch(0.99 0.001 95)" },
-        "300": { "$type": "color", "$value": "oklch(0.75 0.01 95)" },
-        "400": { "$type": "color", "$value": "oklch(0.65 0.015 95)" },
-        "500": { "$type": "color", "$value": "oklch(0.55 0.02 95)" },
-        "600": { "$type": "color", "$value": "oklch(0.45 0.02 95)" },
-        "900": { "$type": "color", "$value": "oklch(0.20 0.02 95)" }
-      },
-      "brand": {
-        "400": { "$type": "color", "$value": "oklch(0.70 0.15 260)" },
-        "500": { "$type": "color", "$value": "oklch(0.62 0.12 29)" },
-        "600": { "$type": "color", "$value": "oklch(0.80 0.10 29)" },
-        "700": { "$type": "color", "$value": "oklch(0.56 0.19 260)" }
-      },
-      "danger": {
-        "600": { "$type": "color", "$value": "oklch(0.60 0.25 25)" },
-        "700": { "$type": "color", "$value": "oklch(0.55 0.28 25)" }
-      },
-      "white": { "$type": "color", "$value": "oklch(1 0 0)" }
-    },
-
-    "role": {
-      "text": {
-        "default": { "$type": "color", "$value": "{color.palette.gray.900}" },
-        "muted":   { "$type": "color", "$value": "oklch(0.55 0.02 95)" }
-      },
-      "surface": {
-        "default": { "$type": "color", "$value": "{color.palette.gray.0}" },
-        "hover":   { "$type": "color", "$value": "oklch(0.95 0.001 95)" }
-      },
-      "accent": {
-        "default": { "$type": "color", "$value": "{color.palette.brand.500}" }
-      },
-      "danger": {
-        "default": { "$type": "color", "$value": "{color.palette.danger.600}" }
-      }
-    }
-  },
-
-  "spacing": {
-    "0":   { "$type": "dimension", "$value": "0px" },
-    "0.5": { "$type": "dimension", "$value": "2px" },
-    "1":   { "$type": "dimension", "$value": "4px" },
-    "2":   { "$type": "dimension", "$value": "8px" },
-    "2.5": { "$type": "dimension", "$value": "10px" },
-    "3":   { "$type": "dimension", "$value": "12px" },
-    "4":   { "$type": "dimension", "$value": "16px" },
-    "6":   { "$type": "dimension", "$value": "24px" },
-    "8":   { "$type": "dimension", "$value": "32px" },
-    "10":  { "$type": "dimension", "$value": "40px" },
-    "12":  { "$type": "dimension", "$value": "48px" }
-  },
-
-  "typography": {
-    "font": {
-      "body": { "$type": "fontFamily", "$value": "system-ui, 'Inter', sans-serif" }
-    },
-    "size": {
-      "h1": { "$type": "fontSize", "$value": "16px" },
-      "h2": { "$type": "fontSize", "$value": "20px" },
-      "h3": { "$type": "fontSize", "$value": "18px" },
-      "h4": { "$type": "fontSize", "$value": "16px" },
-      "h5": { "$type": "fontSize", "$value": "14px" },
-      "h6": { "$type": "fontSize", "$value": "12px" },
-      "xl": { "$type": "fontSize", "$value": "20px" },
-      "lg": { "$type": "fontSize", "$value": "18px" },
-      "base": { "$type": "fontSize", "$value": "16px" },
-      "sm": { "$type": "fontSize", "$value": "14px" },
-      "xs": { "$type": "fontSize", "$value": "12px" },
-      "body": { "$type": "fontSize", "$value": "clamp(1rem, 0.95rem + 0.5vw, 1.125rem)" }
-    },
-    "lineHeight": {
-      "body": { "$type": "lineHeight", "$value": 1.6 }
-    }
-  },
-
-  "motion": {
-    "duration": {
-      "fast": { "$type": "duration", "$value": "150ms" }
-    },
-    "easing": {
-      "standard": { "$type": "easing", "$value": "cubic-bezier(.2,.9,.1,1)" }
-    }
-  },
-
-  "elevation": {
-    "1": {
-      "$type": "shadow",
-      "$value": "0 1px 2px oklch(0.2 0 0 / 0.1), 0 1px 1px oklch(0.2 0 0 / 0.06)"
-    }
-  },
-
-  "layout": {
-    "container": {
-      "xs": { "$type": "dimension", "$value": "540px" },
-      "sm": { "$type": "dimension", "$value": "640px" },
-      "md": { "$type": "dimension", "$value": "768px" },
-      "lg": { "$type": "dimension", "$value": "1024px" },
-      "xl": { "$type": "dimension", "$value": "1280px" }
-    },
-    "padding": {
-      "page":    { "$type": "dimension", "$value": "48px" },
-      "section": { "$type": "dimension", "$value": "32px" },
-      "card":    { "$type": "dimension", "$value": "24px" },
-      "chip":    { "$type": "dimension", "$value": "8px"  }
-    },
-    "grid": {
-      "gutter":  { "$type": "dimension", "$value": "16px" }
-    }
-  }
-}

package/tokens/tokens.example.json

@@ -1,128 +0,0 @@
-{
-  "$schemaVersion": "1.0.0",
-
-  "color": {
-    "palette": {
-      "gray": {
-        "0":   { "$type": "color", "$value": "oklch(0.99 0.001 95)" },
-        "300": { "$type": "color", "$value": "oklch(0.75 0.01 95)" },
-        "400": { "$type": "color", "$value": "oklch(0.65 0.015 95)" },
-        "500": { "$type": "color", "$value": "oklch(0.55 0.02 95)" },
-        "600": { "$type": "color", "$value": "oklch(0.45 0.02 95)" },
-        "900": { "$type": "color", "$value": "oklch(0.20 0.02 95)" }
-      },
-      "brand": {
-        "400": { "$type": "color", "$value": "oklch(0.70 0.15 260)" },
-        "500": { "$type": "color", "$value": "oklch(0.66 0.16 260)" },
-        "600": { "$type": "color", "$value": "oklch(0.62 0.18 260)" },
-        "700": { "$type": "color", "$value": "oklch(0.56 0.19 260)" }
-      },
-      "danger": {
-        "600": { "$type": "color", "$value": "oklch(0.60 0.25 25)" },
-        "700": { "$type": "color", "$value": "oklch(0.55 0.28 25)" }
-      },
-      "white": { "$type": "color", "$value": "oklch(1 0 0)" }
-    },
-
-    "role": {
-      "text": {
-        "default": { "$type": "color", "$value": "{color.palette.gray.900}" },
-        "muted":   { "$type": "color", "$value": "oklch(0.55 0.02 95)" }
-      },
-      "bg": {
-        "surface": { "$type": "color", "$value": "{color.palette.gray.0}" }
-      },
-      "accent": {
-        "default": { "$type": "color", "$value": "{color.palette.brand.600}" },
-        "hover":   { "$type": "color", "$value": "{color.palette.brand.700}" }
-      },
-      "danger": {
-        "default": { "$type": "color", "$value": "{color.palette.danger.600}" },
-        "hover":   { "$type": "color", "$value": "{color.palette.danger.700}" }
-      },
-      "on": {
-        "accent": { "$type": "color", "$value": "{color.palette.white}" },
-        "danger": { "$type": "color", "$value": "{color.palette.white}" }
-      },
-      "focus": {
-        "ring":   { "$type": "color", "$value": "oklch(0.62 0.18 260 / 0.5)" }
-      }
-    }
-  },
-
-  "size": {
-    "spacing": {
-      "2": { "$type": "dimension", "$value": "0.5rem"  },
-      "3": { "$type": "dimension", "$value": "0.75rem" },
-      "4": { "$type": "dimension", "$value": "1rem"    },
-      "5": { "$type": "dimension", "$value": "1.25rem" },
-      "6": { "$type": "dimension", "$value": "1.5rem"  }
-    },
-    "radius": {
-      "md": { "$type": "borderRadius", "$value": "0.5rem" }
-    },
-    "border": {
-      "1": { "$type": "dimension", "$value": "1px" }
-    }
-  },
-
-  "typography": {
-    "font": {
-      "body": { "$type": "fontFamily", "$value": "system-ui, 'Inter', sans-serif" }
-    },
-    "size": {
-      "body": { "$type": "fontSize", "$value": "clamp(1rem, 0.95rem + 0.5vw, 1.125rem)" },
-      "h2": { "$type": "fontSize", "$value": "22px" },
-      "h3": { "$type": "fontSize", "$value": "18px" }
-    },
-    "lineHeight": {
-      "body": { "$type": "lineHeight", "$value": 1.6 }
-    },
-  "weight": {
-    "body": { "$type": "fontWeight", "$value": 400 },
-    "emphasis": { "$type": "fontWeight", "$value": 600 },
-    "strong": { "$type": "fontWeight", "$value": 700 }
-  }
-  },
-
-  "motion": {
-    "duration": {
-      "fast": { "$type": "duration", "$value": "150ms" }
-    },
-    "easing": {
-      "standard": { "$type": "easing", "$value": "cubic-bezier(.2,.9,.1,1)" }
-    }
-  },
-
-  "elevation": {
-    "1": {
-      "$type": "shadow",
-      "$value": "0 1px 2px oklch(0.2 0 0 / 0.1), 0 1px 1px oklch(0.2 0 0 / 0.06)"
-    }
-  },
-
-  "control": {
-    "size": {
-  "min": { "$type": "dimension", "$value": "30px" }
-    }
-  },
-
-  "layout": {
-    "container": {
-      "xs": { "$type": "dimension", "$value": "540px" },
-      "sm": { "$type": "dimension", "$value": "640px" },
-      "md": { "$type": "dimension", "$value": "768px" },
-      "lg": { "$type": "dimension", "$value": "1024px" },
-      "xl": { "$type": "dimension", "$value": "1280px" }
-    },
-    "padding": {
-      "page":    { "$type": "dimension", "$value": "48px" },
-      "section": { "$type": "dimension", "$value": "32px" },
-      "card":    { "$type": "dimension", "$value": "24px" },
-      "chip":    { "$type": "dimension", "$value": "8px"  }
-    },
-    "grid": {
-      "gutter":  { "$type": "dimension", "$value": "16px" }
-    }
-  }
-}

package/tokens/tokens.json

@@ -1,67 +0,0 @@
-{
-  "color": {
-    "palette": {
-      "brand": {
-        "600": { "$type": "color", "$value": "#7e3ff2" },
-        "700": { "$type": "color", "$value": "#6a29e6" }
-      },
-      "gray": {
-        "0":   { "$type": "color", "$value": "#fafafa" },
-        "50":  { "$type": "color", "$value": "#f4f4f5" },
-        "900": { "$type": "color", "$value": "#1e1e20" }
-      },
-      "white": { "$type": "color", "$value": "#fff" }
-    },
-    "role": {
-      "text": {
-        "default": { "$value": "{color.palette.gray.900}" },
-        "muted":   { "$value": "#555b66" }
-      },
-      "bg": {
-        "surface":  { "$value": "{color.palette.gray.0}" },
-        "elevated": { "$value": "{color.palette.gray.50}" }
-      },
-      "accent": {
-        "default": { "$value": "{color.palette.brand.600}" },
-        "hover":   { "$value": "{color.palette.brand.700}" }
-      },
-      "on": { "accent": { "$value": "{color.palette.white}" } },
-      "focus": { "ring": { "$value": "{color.palette.brand.600}" } }
-    }
-  },
-  "size": {
-    "spacing": {
-      "2":   { "$value": "0.5rem" },
-      "2-5": { "$value": "0.625rem" },
-      "3":   { "$value": "0.75rem" },
-      "4":   { "$value": "1rem" },
-      "6":   { "$value": "1.5rem" }
-    },
-    "radius": { "md": { "$value": "0.5rem" } },
-    "border": { "1":  { "$value": "1px" } },
-    "offset": { "hairline": { "$value": "1px" } }
-  },
-  "motion": {
-    "duration": { "fast": { "$value": "150ms" } },
-    "easing":   { "standard": { "$value": "cubic-bezier(.2,.9,.1,1)" } },
-    "depth":    { "kick": { "$value": "1px" } }
-  },
-  "elevation": { "1": { "$value": "0 1px 2px #0000001a, 0 1px 1px #0000000f" } },
-  "typography": {
-    "font": { "sans": { "$value": "system-ui, -apple-system, segoe ui, roboto, sans-serif" } },
-    "weight": {
-      "regular":  { "$value": 400 },
-      "medium":   { "$value": 500 },
-      "semibold": { "$value": 600 },
-      "body": { "$value": 400 }
-    },
-    "size": {
-      "sm": { "$value": "0.875rem" },
-      "base": { "$value": "1rem" },
-      "body": { "$value": "16px" },
-      "h2": { "$value": "20px" },
-      "h3": { "$value": "18px" }
-    },
-    "lineHeight": { "tight": { "$value": "1.25" }, "base": { "$value": "1.6" } }
-  }
-}

package/tokens/tokens.multi-violations.json

@@ -1,21 +0,0 @@
-{
-  "$schemaVersion": "1.0.0",
-  "control": {
-    "size": {
-      "min": { "$type": "dimension", "$value": "30px" }
-    }
-  },
-  "typography": {
-    "size": {
-      "h1": { "$type": "fontSize", "$value": "16px" },
-      "h2": { "$type": "fontSize", "$value": "20px" },
-      "h3": { "$type": "fontSize", "$value": "18px" }
-    }
-  },
-  "layout": {
-    "padding": {
-      "card": { "$type": "dimension", "$value": "24px" },
-      "chip": { "$type": "dimension", "$value": "32px" }
-    }
-  }
-}