brandrail 0.3.1 → 0.4.0

package/dist/brandrail.mjs

@@ -1,8 +1,491 @@
 #!/usr/bin/env node
 
 // src/index.ts
-import { existsSync as existsSync3, mkdirSync, readFileSync as readFileSync2, writeFileSync } from "node:fs";
-import { dirname as dirname2, join as join3, relative as relative2, resolve as resolve3 } from "node:path";
+import { existsSync as existsSync3, mkdirSync, readdirSync as readdirSync2, readFileSync as readFileSync2, statSync as statSync2, writeFileSync } from "node:fs";
+import { basename, dirname as dirname2, join as join3, relative as relative2, resolve as resolve3 } from "node:path";
+
+// ../../node_modules/.pnpm/fflate@0.8.3/node_modules/fflate/esm/index.mjs
+import { createRequire } from "module";
+var require2 = createRequire("/");
+var _a;
+var Worker;
+var isMarkedAsUntransferable;
+try {
+  _a = require2("worker_threads"), Worker = _a.Worker, isMarkedAsUntransferable = _a.isMarkedAsUntransferable;
+} catch (e) {
+}
+var u8 = Uint8Array;
+var u16 = Uint16Array;
+var i32 = Int32Array;
+var fleb = new u8([
+  0,
+  0,
+  0,
+  0,
+  0,
+  0,
+  0,
+  0,
+  1,
+  1,
+  1,
+  1,
+  2,
+  2,
+  2,
+  2,
+  3,
+  3,
+  3,
+  3,
+  4,
+  4,
+  4,
+  4,
+  5,
+  5,
+  5,
+  5,
+  0,
+  /* unused */
+  0,
+  0,
+  /* impossible */
+  0
+]);
+var fdeb = new u8([
+  0,
+  0,
+  0,
+  0,
+  1,
+  1,
+  2,
+  2,
+  3,
+  3,
+  4,
+  4,
+  5,
+  5,
+  6,
+  6,
+  7,
+  7,
+  8,
+  8,
+  9,
+  9,
+  10,
+  10,
+  11,
+  11,
+  12,
+  12,
+  13,
+  13,
+  /* unused */
+  0,
+  0
+]);
+var clim = new u8([16, 17, 18, 0, 8, 7, 9, 6, 10, 5, 11, 4, 12, 3, 13, 2, 14, 1, 15]);
+var freb = function(eb, start) {
+  var b = new u16(31);
+  for (var i2 = 0; i2 < 31; ++i2) {
+    b[i2] = start += 1 << eb[i2 - 1];
+  }
+  var r = new i32(b[30]);
+  for (var i2 = 1; i2 < 30; ++i2) {
+    for (var j = b[i2]; j < b[i2 + 1]; ++j) {
+      r[j] = j - b[i2] << 5 | i2;
+    }
+  }
+  return { b, r };
+};
+var _a = freb(fleb, 2);
+var fl = _a.b;
+var revfl = _a.r;
+fl[28] = 258, revfl[258] = 28;
+var _b = freb(fdeb, 0);
+var fd = _b.b;
+var revfd = _b.r;
+var rev = new u16(32768);
+for (i = 0; i < 32768; ++i) {
+  x = (i & 43690) >> 1 | (i & 21845) << 1;
+  x = (x & 52428) >> 2 | (x & 13107) << 2;
+  x = (x & 61680) >> 4 | (x & 3855) << 4;
+  rev[i] = ((x & 65280) >> 8 | (x & 255) << 8) >> 1;
+}
+var x;
+var i;
+var hMap = (function(cd, mb, r) {
+  var s = cd.length;
+  var i2 = 0;
+  var l = new u16(mb);
+  for (; i2 < s; ++i2) {
+    if (cd[i2])
+      ++l[cd[i2] - 1];
+  }
+  var le = new u16(mb);
+  for (i2 = 1; i2 < mb; ++i2) {
+    le[i2] = le[i2 - 1] + l[i2 - 1] << 1;
+  }
+  var co;
+  if (r) {
+    co = new u16(1 << mb);
+    var rvb = 15 - mb;
+    for (i2 = 0; i2 < s; ++i2) {
+      if (cd[i2]) {
+        var sv = i2 << 4 | cd[i2];
+        var r_1 = mb - cd[i2];
+        var v = le[cd[i2] - 1]++ << r_1;
+        for (var m = v | (1 << r_1) - 1; v <= m; ++v) {
+          co[rev[v] >> rvb] = sv;
+        }
+      }
+    }
+  } else {
+    co = new u16(s);
+    for (i2 = 0; i2 < s; ++i2) {
+      if (cd[i2]) {
+        co[i2] = rev[le[cd[i2] - 1]++] >> 15 - cd[i2];
+      }
+    }
+  }
+  return co;
+});
+var flt = new u8(288);
+for (i = 0; i < 144; ++i)
+  flt[i] = 8;
+var i;
+for (i = 144; i < 256; ++i)
+  flt[i] = 9;
+var i;
+for (i = 256; i < 280; ++i)
+  flt[i] = 7;
+var i;
+for (i = 280; i < 288; ++i)
+  flt[i] = 8;
+var i;
+var fdt = new u8(32);
+for (i = 0; i < 32; ++i)
+  fdt[i] = 5;
+var i;
+var flrm = /* @__PURE__ */ hMap(flt, 9, 1);
+var fdrm = /* @__PURE__ */ hMap(fdt, 5, 1);
+var max = function(a) {
+  var m = a[0];
+  for (var i2 = 1; i2 < a.length; ++i2) {
+    if (a[i2] > m)
+      m = a[i2];
+  }
+  return m;
+};
+var bits = function(d, p, m) {
+  var o = p / 8 | 0;
+  return (d[o] | d[o + 1] << 8) >> (p & 7) & m;
+};
+var bits16 = function(d, p) {
+  var o = p / 8 | 0;
+  return (d[o] | d[o + 1] << 8 | d[o + 2] << 16) >> (p & 7);
+};
+var shft = function(p) {
+  return (p + 7) / 8 | 0;
+};
+var slc = function(v, s, e) {
+  if (s == null || s < 0)
+    s = 0;
+  if (e == null || e > v.length)
+    e = v.length;
+  return new u8(v.subarray(s, e));
+};
+var ec = [
+  "unexpected EOF",
+  "invalid block type",
+  "invalid length/literal",
+  "invalid distance",
+  "stream finished",
+  "no stream handler",
+  ,
+  // determined by compression function
+  "no callback",
+  "invalid UTF-8 data",
+  "extra field too long",
+  "date not in range 1980-2099",
+  "filename too long",
+  "stream finishing",
+  "invalid zip data"
+  // determined by unknown compression method
+];
+var err = function(ind, msg, nt) {
+  var e = new Error(msg || ec[ind]);
+  e.code = ind;
+  if (Error.captureStackTrace)
+    Error.captureStackTrace(e, err);
+  if (!nt)
+    throw e;
+  return e;
+};
+var inflt = function(dat, st, buf, dict) {
+  var sl = dat.length, dl = dict ? dict.length : 0;
+  if (!sl || st.f && !st.l)
+    return buf || new u8(0);
+  var noBuf = !buf;
+  var resize = noBuf || st.i != 2;
+  var noSt = st.i;
+  if (noBuf)
+    buf = new u8(sl * 3);
+  var cbuf = function(l2) {
+    var bl = buf.length;
+    if (l2 > bl) {
+      var nbuf = new u8(Math.max(bl * 2, l2));
+      nbuf.set(buf);
+      buf = nbuf;
+    }
+  };
+  var final = st.f || 0, pos = st.p || 0, bt = st.b || 0, lm = st.l, dm = st.d, lbt = st.m, dbt = st.n;
+  var tbts = sl * 8;
+  do {
+    if (!lm) {
+      final = bits(dat, pos, 1);
+      var type = bits(dat, pos + 1, 3);
+      pos += 3;
+      if (!type) {
+        var s = shft(pos) + 4, l = dat[s - 4] | dat[s - 3] << 8, t = s + l;
+        if (t > sl) {
+          if (noSt)
+            err(0);
+          break;
+        }
+        if (resize)
+          cbuf(bt + l);
+        buf.set(dat.subarray(s, t), bt);
+        st.b = bt += l, st.p = pos = t * 8, st.f = final;
+        continue;
+      } else if (type == 1)
+        lm = flrm, dm = fdrm, lbt = 9, dbt = 5;
+      else if (type == 2) {
+        var hLit = bits(dat, pos, 31) + 257, hcLen = bits(dat, pos + 10, 15) + 4;
+        var tl = hLit + bits(dat, pos + 5, 31) + 1;
+        pos += 14;
+        var ldt = new u8(tl);
+        var clt = new u8(19);
+        for (var i2 = 0; i2 < hcLen; ++i2) {
+          clt[clim[i2]] = bits(dat, pos + i2 * 3, 7);
+        }
+        pos += hcLen * 3;
+        var clb = max(clt), clbmsk = (1 << clb) - 1;
+        var clm = hMap(clt, clb, 1);
+        for (var i2 = 0; i2 < tl; ) {
+          var r = clm[bits(dat, pos, clbmsk)];
+          pos += r & 15;
+          var s = r >> 4;
+          if (s < 16) {
+            ldt[i2++] = s;
+          } else {
+            var c = 0, n = 0;
+            if (s == 16)
+              n = 3 + bits(dat, pos, 3), pos += 2, c = ldt[i2 - 1];
+            else if (s == 17)
+              n = 3 + bits(dat, pos, 7), pos += 3;
+            else if (s == 18)
+              n = 11 + bits(dat, pos, 127), pos += 7;
+            while (n--)
+              ldt[i2++] = c;
+          }
+        }
+        var lt = ldt.subarray(0, hLit), dt = ldt.subarray(hLit);
+        lbt = max(lt);
+        dbt = max(dt);
+        lm = hMap(lt, lbt, 1);
+        dm = hMap(dt, dbt, 1);
+      } else
+        err(1);
+      if (pos > tbts) {
+        if (noSt)
+          err(0);
+        break;
+      }
+    }
+    if (resize)
+      cbuf(bt + 131072);
+    var lms = (1 << lbt) - 1, dms = (1 << dbt) - 1;
+    var lpos = pos;
+    for (; ; lpos = pos) {
+      var c = lm[bits16(dat, pos) & lms], sym = c >> 4;
+      pos += c & 15;
+      if (pos > tbts) {
+        if (noSt)
+          err(0);
+        break;
+      }
+      if (!c)
+        err(2);
+      if (sym < 256)
+        buf[bt++] = sym;
+      else if (sym == 256) {
+        lpos = pos, lm = null;
+        break;
+      } else {
+        var add = sym - 254;
+        if (sym > 264) {
+          var i2 = sym - 257, b = fleb[i2];
+          add = bits(dat, pos, (1 << b) - 1) + fl[i2];
+          pos += b;
+        }
+        var d = dm[bits16(dat, pos) & dms], dsym = d >> 4;
+        if (!d)
+          err(3);
+        pos += d & 15;
+        var dt = fd[dsym];
+        if (dsym > 3) {
+          var b = fdeb[dsym];
+          dt += bits16(dat, pos) & (1 << b) - 1, pos += b;
+        }
+        if (pos > tbts) {
+          if (noSt)
+            err(0);
+          break;
+        }
+        if (resize)
+          cbuf(bt + 131072);
+        var end = bt + add;
+        if (bt < dt) {
+          var shift = dl - dt, dend = Math.min(dt, end);
+          if (shift + bt < 0)
+            err(3);
+          for (; bt < dend; ++bt)
+            buf[bt] = dict[shift + bt];
+        }
+        for (; bt < end; ++bt)
+          buf[bt] = buf[bt - dt];
+      }
+    }
+    st.l = lm, st.p = lpos, st.b = bt, st.f = final;
+    if (lm)
+      final = 1, st.m = lbt, st.d = dm, st.n = dbt;
+  } while (!final);
+  return bt != buf.length && noBuf ? slc(buf, 0, bt) : buf.subarray(0, bt);
+};
+var et = /* @__PURE__ */ new u8(0);
+var b2 = function(d, b) {
+  return d[b] | d[b + 1] << 8;
+};
+var b4 = function(d, b) {
+  return (d[b] | d[b + 1] << 8 | d[b + 2] << 16 | d[b + 3] << 24) >>> 0;
+};
+var b8 = function(d, b) {
+  return b4(d, b) + b4(d, b + 4) * 4294967296;
+};
+function inflateSync(data, opts) {
+  return inflt(data, { i: 2 }, opts && opts.out, opts && opts.dictionary);
+}
+var td = typeof TextDecoder != "undefined" && /* @__PURE__ */ new TextDecoder();
+var tds = 0;
+try {
+  td.decode(et, { stream: true });
+  tds = 1;
+} catch (e) {
+}
+var dutf8 = function(d) {
+  for (var r = "", i2 = 0; ; ) {
+    var c = d[i2++];
+    var eb = (c > 127) + (c > 223) + (c > 239);
+    if (i2 + eb > d.length)
+      return { s: r, r: slc(d, i2 - 1) };
+    if (!eb)
+      r += String.fromCharCode(c);
+    else if (eb == 3) {
+      c = ((c & 15) << 18 | (d[i2++] & 63) << 12 | (d[i2++] & 63) << 6 | d[i2++] & 63) - 65536, r += String.fromCharCode(55296 | c >> 10, 56320 | c & 1023);
+    } else if (eb & 1)
+      r += String.fromCharCode((c & 31) << 6 | d[i2++] & 63);
+    else
+      r += String.fromCharCode((c & 15) << 12 | (d[i2++] & 63) << 6 | d[i2++] & 63);
+  }
+};
+function strFromU8(dat, latin1) {
+  if (latin1) {
+    var r = "";
+    for (var i2 = 0; i2 < dat.length; i2 += 16384)
+      r += String.fromCharCode.apply(null, dat.subarray(i2, i2 + 16384));
+    return r;
+  } else if (td) {
+    return td.decode(dat);
+  } else {
+    var _a2 = dutf8(dat), s = _a2.s, r = _a2.r;
+    if (r.length)
+      err(8);
+    return s;
+  }
+}
+var slzh = function(d, b) {
+  return b + 30 + b2(d, b + 26) + b2(d, b + 28);
+};
+var zh = function(d, b, z) {
+  var fnl = b2(d, b + 28), efl = b2(d, b + 30), fn = strFromU8(d.subarray(b + 46, b + 46 + fnl), !(b2(d, b + 8) & 2048)), es = b + 46 + fnl;
+  var _a2 = z64hs(d, es, efl, z, b4(d, b + 20), b4(d, b + 24), b4(d, b + 42)), sc = _a2[0], su = _a2[1], off = _a2[2];
+  return [b2(d, b + 10), sc, su, fn, es + efl + b2(d, b + 32), off];
+};
+var z64hs = function(d, b, l, z, sc, su, off) {
+  var nsc = sc == 4294967295, nsu = su == 4294967295, noff = off == 4294967295, e = b + l;
+  var nf = nsc + nsu + noff;
+  if (z && nf) {
+    for (; b + 4 < e; b += 4 + b2(d, b + 2)) {
+      if (b2(d, b) == 1) {
+        return [
+          nsc ? b8(d, b + 4 + 8 * nsu) : sc,
+          nsu ? b8(d, b + 4) : su,
+          noff ? b8(d, b + 4 + 8 * (nsu + nsc)) : off,
+          1
+        ];
+      }
+    }
+    if (z < 2)
+      err(13);
+  }
+  return [sc, su, off, 0];
+};
+function unzipSync(data, opts) {
+  var files = {};
+  var e = data.length - 22;
+  for (; b4(data, e) != 101010256; --e) {
+    if (!e || data.length - e > 65558)
+      err(13);
+  }
+  ;
+  var c = b2(data, e + 8);
+  if (!c)
+    return {};
+  var o = b4(data, e + 16);
+  var z = b4(data, e - 20) == 117853008;
+  if (z) {
+    var ze = b4(data, e - 12);
+    z = b4(data, ze) == 101075792;
+    if (z) {
+      c = b4(data, ze + 32);
+      o = b4(data, ze + 48);
+    }
+  }
+  var fltr = opts && opts.filter;
+  for (var i2 = 0; i2 < c; ++i2) {
+    var _a2 = zh(data, o, z), c_2 = _a2[0], sc = _a2[1], su = _a2[2], fn = _a2[3], no = _a2[4], off = _a2[5], b = slzh(data, off);
+    o = no;
+    if (!fltr || fltr({
+      name: fn,
+      size: sc,
+      originalSize: su,
+      compression: c_2
+    })) {
+      if (!c_2)
+        files[fn] = slc(data, b, b + sc);
+      else if (c_2 == 8)
+        files[fn] = inflateSync(data.subarray(b, b + sc), { out: new u8(su) });
+      else
+        err(14, "unknown compression type " + c_2);
+    }
+  }
+  return files;
+}
 
 // ../engine/src/color.ts
 var clamp = (n, lo = 0, hi = 255) => Math.min(hi, Math.max(lo, n));
@@ -11,7 +494,7 @@ function parseHex(hex) {
   if (!/^[0-9a-f]+$/.test(h)) return null;
   if (h.length === 3 || h.length === 4) h = h.split("").map((c) => c + c).join("");
   if (h.length !== 6 && h.length !== 8) return null;
-  const n = (i) => parseInt(h.slice(i, i + 2), 16);
+  const n = (i2) => parseInt(h.slice(i2, i2 + 2), 16);
   return { r: n(0), g: n(2), b: n(4), a: h.length === 8 ? n(6) / 255 : 1 };
 }
 function hslToRgb(h, s, l) {
@@ -30,12 +513,12 @@ function parseColor(input) {
   if (!m) return null;
   const parts = m[2].split(/[\s,/]+/).filter(Boolean);
   if (parts.length < 3) return null;
-  const num = (p, max) => p.endsWith("%") ? parseFloat(p) / 100 * max : parseFloat(p);
+  const num = (p, max2) => p.endsWith("%") ? parseFloat(p) / 100 * max2 : parseFloat(p);
   const alpha = parts[3] !== void 0 ? num(parts[3], 1) : 1;
   if (m[1].startsWith("rgb")) {
-    const [r2, g2, b2] = parts.slice(0, 3).map((p) => num(p, 255));
-    if ([r2, g2, b2].some((v) => Number.isNaN(v))) return null;
-    return { r: clamp(r2), g: clamp(g2), b: clamp(b2), a: alpha };
+    const [r2, g2, b3] = parts.slice(0, 3).map((p) => num(p, 255));
+    if ([r2, g2, b3].some((v) => Number.isNaN(v))) return null;
+    return { r: clamp(r2), g: clamp(g2), b: clamp(b3), a: alpha };
   }
   const [h, sat, l] = [parseFloat(parts[0]), parseFloat(parts[1]), parseFloat(parts[2])];
   if ([h, sat, l].some((v) => Number.isNaN(v))) return null;
@@ -51,11 +534,11 @@ function rgbToLab({ r, g, b }) {
     return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
   };
   const [R, G, B] = [lin(r), lin(g), lin(b)];
-  const x = (R * 0.4124 + G * 0.3576 + B * 0.1805) / 0.95047;
+  const x2 = (R * 0.4124 + G * 0.3576 + B * 0.1805) / 0.95047;
   const y = R * 0.2126 + G * 0.7152 + B * 0.0722;
   const z = (R * 0.0193 + G * 0.1192 + B * 0.9505) / 1.08883;
   const f = (t) => t > 8856e-6 ? Math.cbrt(t) : 7.787 * t + 16 / 116;
-  return { l: 116 * f(y) - 16, a: 500 * (f(x) - f(y)), b: 200 * (f(y) - f(z)) };
+  return { l: 116 * f(y) - 16, a: 500 * (f(x2) - f(y)), b: 200 * (f(y) - f(z)) };
 }
 function deltaE(a, b) {
   return Math.sqrt((a.l - b.l) ** 2 + (a.a - b.a) ** 2 + (a.b - b.b) ** 2);
@@ -68,7 +551,7 @@ function contrastRatio(a, b) {
     });
     return 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
   };
-  const [l1, l2] = [lum(a), lum(b)].sort((x, y) => y - x);
+  const [l1, l2] = [lum(a), lum(b)].sort((x2, y) => y - x2);
   return (l1 + 0.05) / (l2 + 0.05);
 }
 
@@ -165,7 +648,7 @@ function normalizeFontFamily(value) {
 function isGenericFont(family) {
   return GENERIC_FONTS.has(family) || family.startsWith("var(");
 }
-var uniqSorted = (xs) => [...new Set(xs.map((x) => Math.round(x * 100) / 100))].sort((a, b) => a - b);
+var uniqSorted = (xs) => [...new Set(xs.map((x2) => Math.round(x2 * 100) / 100))].sort((a, b) => a - b);
 function resolveConfig(config) {
   const all = leaves(config.tokens);
   const colors = [];
@@ -218,13 +701,100 @@ function resolveConfig(config) {
     rules: config.rules ?? {},
     ignore: [...DEFAULT_IGNORE, ...config.ignore ?? []],
     forbiddenImports: config.forbiddenImports ?? DEFAULT_FORBIDDEN_IMPORTS,
-    colorTolerance: config.colorTolerance ?? 2.5
+    colorTolerance: config.colorTolerance ?? 2.5,
+    framework: config.framework
   };
 }
 
+// ../engine/src/frameworks.ts
+var FRAMEWORKS = ["react", "angular", "vue", "web-components", "html"];
+var FRAMEWORK_LABEL = {
+  react: "React",
+  angular: "Angular",
+  vue: "Vue",
+  "web-components": "Web Components",
+  html: "Plain HTML"
+};
+var LANG = { react: "tsx", angular: "html", vue: "vue", "web-components": "html", html: "html" };
+var isFramework = (x2) => typeof x2 === "string" && FRAMEWORKS.includes(x2);
+var kebab = (s) => s.replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/\./g, "-").toLowerCase();
+var prefixOf = (tag) => tag.includes("-") ? `${tag.split("-")[0]}-` : tag;
+function webComponentSetup(target, u, tag) {
+  const load = u.importPath ? `Load it once with \`import "${u.importPath}";\` at the app entry.` : "";
+  switch (target) {
+    case "angular":
+      return `Web component: add \`CUSTOM_ELEMENTS_SCHEMA\` to the component's \`schemas\`. ${load}`.trim();
+    case "vue":
+      return `Web component: set \`compilerOptions.isCustomElement = (tag) => tag.startsWith("${prefixOf(tag)}")\` in the Vue config. ${load}`.trim();
+    case "html":
+      return u.importPath ? `Web component: load \`${u.importPath}\` once (a bundler import or \`<script type="module">\`).` : void 0;
+    default:
+      return u.setup ?? (load || void 0);
+  }
+}
+function resolveUsage(c, framework) {
+  if (framework === "react") {
+    return {
+      framework,
+      importLine: `import { ${c.name} } from "${c.importPath}";`,
+      tag: c.name,
+      example: c.example,
+      lang: LANG.react,
+      props: c.props
+    };
+  }
+  const own = c.frameworks?.[framework];
+  if (own) return fromUsage(c, framework, framework, own);
+  const wc = c.frameworks?.["web-components"];
+  if (wc) {
+    const r = fromUsage(c, framework, "web-components", wc);
+    return { ...r, via: "web-components", setup: webComponentSetup(framework, wc, r.tag), importLine: framework === "html" ? void 0 : r.importLine };
+  }
+  return null;
+}
+function fromUsage(c, framework, kind, u) {
+  const path = u.importPath?.trim();
+  let tag = u.tag?.trim();
+  let importLine;
+  let setup = u.setup?.trim() || void 0;
+  switch (kind) {
+    case "angular":
+      tag ||= kebab(c.name);
+      if (path && u.importName) {
+        importLine = `import { ${u.importName} } from "${path}";`;
+        setup ??= `Add \`${u.importName}\` to the standalone component's \`imports\` (or the NgModule's).`;
+      }
+      break;
+    case "vue":
+      tag ||= u.importName || c.name;
+      if (path) importLine = `import { ${u.importName || tag} } from "${path}";`;
+      break;
+    case "web-components":
+      tag ||= kebab(c.name);
+      if (path) importLine = `import "${path}";`;
+      break;
+    case "html":
+      tag ||= c.replaces?.[0]?.replace(/\[.*$/, "") || "div";
+      if (path && !setup) setup = /\.css(\?|$)/.test(path) ? `Include \`<link rel="stylesheet" href="${path}">\` once.` : /\.m?js(\?|$)/.test(path) ? `Include \`<script type="module" src="${path}"></script>\` once.` : void 0;
+      break;
+  }
+  return { framework, importLine, tag, setup, example: u.example?.trim() || void 0, lang: LANG[kind], props: u.props?.length ? u.props : void 0 };
+}
+var markup = (u) => `<${u.tag}>`;
+function detectFramework(pkg) {
+  if (!pkg) return "html";
+  const deps = { ...pkg.peerDependencies, ...pkg.devDependencies, ...pkg.dependencies };
+  const has = (name) => name in deps;
+  if (has("@angular/core")) return "angular";
+  if (has("vue") || has("nuxt")) return "vue";
+  if (has("react") || has("next") || has("preact")) return "react";
+  if (has("svelte") || has("lit") || has("@stencil/core") || has("@sveltejs/kit")) return "web-components";
+  return "html";
+}
+
 // ../engine/src/rules.ts
-var MARKUP = ["jsx", "vue", "svelte", "html"];
-var ALL = ["jsx", "vue", "svelte", "html", "css"];
+var MARKUP = ["jsx", "vue", "svelte", "html", "template"];
+var ALL = ["jsx", "vue", "svelte", "html", "template", "css"];
 function* matches(re, text) {
   const g = new RegExp(re.source, re.flags.includes("g") ? re.flags : re.flags + "g");
   let m;
@@ -233,8 +803,8 @@ function* matches(re, text) {
     if (m[0].length === 0) g.lastIndex++;
   }
 }
-var lineBefore = (code, offset, max = 80) => {
-  const start = Math.max(code.lastIndexOf("\n", offset - 1) + 1, offset - max);
+var lineBefore = (code, offset, max2 = 80) => {
+  const start = Math.max(code.lastIndexOf("\n", offset - 1) + 1, offset - max2);
   return code.slice(start, offset);
 };
 var lineOf = (code, offset) => {
@@ -244,9 +814,9 @@ var lineOf = (code, offset) => {
 };
 var fmt = (n) => `${Math.round(n * 100) / 100}px`;
 function neighbours(scale, v) {
-  const lower = [...scale].reverse().find((x) => x <= v);
-  const upper = scale.find((x) => x >= v);
-  const opts = [...new Set([lower, upper].filter((x) => x !== void 0))];
+  const lower = [...scale].reverse().find((x2) => x2 <= v);
+  const upper = scale.find((x2) => x2 >= v);
+  const opts = [...new Set([lower, upper].filter((x2) => x2 !== void 0))];
   return opts.map(fmt).join(" or ");
 }
 function pxValues(value) {
@@ -257,6 +827,38 @@ function pxValues(value) {
   }
   return out;
 }
+var kebab2 = (s) => s.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+function styleBindings(code) {
+  const out = [];
+  const withUnit = (v, unit) => unit && /^-?\d*\.?\d+$/.test(v.trim()) ? `${v.trim()}${unit === "%" ? "%" : unit}` : v;
+  for (const m of matches(/(['"])([a-zA-Z-]+)(?:\.(px|rem|em|%))?\1\s*:\s*(?:(['"`])([^'"`\n]*)\4|(-?\d*\.?\d+)(?![\w.]))/g, code)) {
+    const value = m[5] ?? m[6];
+    const offset = m.index + m[0].length - value.length - (m[5] !== void 0 ? 1 : 0);
+    out.push({ prop: kebab2(m[2]), value: withUnit(value, m[3]), offset });
+  }
+  for (const m of matches(/(?<![\w.'"-])((?:padding|margin)(?:Top|Right|Bottom|Left|Inline|Block)(?:Start|End)?|rowGap|columnGap|border(?:Top|Bottom)?(?:Left|Right)?Radius)\s*:\s*(['"`])([^'"`\n]*\d(?:px|rem)[^'"`\n]*)\2/g, code)) {
+    out.push({ prop: kebab2(m[1]), value: m[3], offset: m.index + m[0].length - m[3].length - 1 });
+  }
+  for (const m of matches(/\[style\.([a-zA-Z-]+)(?:\.(px|rem|em|%))?\]\s*=\s*(["'])([\s\S]*?)\3/g, code)) {
+    const inner = m[4].trim();
+    const lit = /^(['"`])(.*)\1$/.exec(inner)?.[2] ?? (/^-?\d*\.?\d+$/.test(inner) ? inner : null);
+    if (lit === null) continue;
+    out.push({ prop: kebab2(m[1]), value: withUnit(lit, m[2]), offset: m.index + m[0].length - 1 - m[4].length + m[4].indexOf(inner) });
+  }
+  return out;
+}
+function declValue(v, kind) {
+  if (kind === "css") return v;
+  const q = v[0];
+  if (q === '"' || q === "'" || q === "`") {
+    const end = v.indexOf(q, 1);
+    return end === -1 ? v : v.slice(0, end + 1);
+  }
+  const cut = v.search(/["'`>]/);
+  return cut === -1 ? v : v.slice(0, cut);
+}
+var SPACING_PROP = /^(?:(?:padding|margin)(?:-(?:top|right|bottom|left|inline|block)(?:-(?:start|end))?)?|gap|row-gap|column-gap)$/;
+var RADIUS_PROP = /^border(?:-(?:top|bottom|start|end)-(?:left|right|start|end))?-radius$/;
 var noHardcodedColor = {
   id: "no-hardcoded-color",
   title: "Hard-coded colour",
@@ -342,7 +944,7 @@ var spacingScale = {
     const ok = (n) => scale.some((s) => Math.abs(s - n) < 0.01);
     for (const m of matches(/(?<![\w-])(padding|margin|gap|row-gap|column-gap)(?:-(?:top|right|bottom|left|inline|block)(?:-(?:start|end))?)?\s*:\s*([^;{}\n]+)/g, code)) {
       const valueStart = m.index + m[0].length - m[2].length;
-      for (const v of pxValues(m[2])) {
+      for (const v of pxValues(declValue(m[2], kind))) {
         if (!ok(v.n)) out.push({ offset: valueStart + v.index, message: `${m[1]} ${fmt(v.n)} is off the spacing scale`, suggestion: `Use ${neighbours(scale, v.n)}` });
       }
     }
@@ -355,6 +957,12 @@ var spacingScale = {
         const n = Math.abs(parseFloat(m[2])) * (m[3] === "rem" ? 16 : 1);
         if (!ok(n)) out.push({ offset: m.index, message: `${m[0]} is off the spacing scale`, suggestion: `Use ${neighbours(scale, n)}` });
       }
+      for (const b of styleBindings(code)) {
+        if (!SPACING_PROP.test(b.prop)) continue;
+        for (const v of pxValues(b.value)) {
+          if (!ok(v.n)) out.push({ offset: b.offset + Math.min(v.index, b.value.length), message: `${b.prop} ${fmt(v.n)} is off the spacing scale`, suggestion: `Use ${neighbours(scale, v.n)}` });
+        }
+      }
     }
     return out;
   }
@@ -370,7 +978,7 @@ var radiusScale = {
     const ok = (n) => n >= 999 || config.radii.some((r) => Math.abs(r - n) < 0.01);
     for (const m of matches(/(?<![\w-])border(?:-(?:top|bottom|start|end)-(?:left|right|start|end))?-radius\s*:\s*([^;{}\n]+)/g, code)) {
       const valueStart = m.index + m[0].length - m[1].length;
-      for (const v of pxValues(m[1])) {
+      for (const v of pxValues(declValue(m[1], kind))) {
         if (!ok(v.n)) out.push({ offset: valueStart + v.index, message: `border-radius ${fmt(v.n)} is not a radius token`, suggestion: `Use ${neighbours(config.radii.filter((r) => r < 999), v.n)}` });
       }
     }
@@ -383,6 +991,12 @@ var radiusScale = {
         const n = parseFloat(m[1]);
         if (!ok(n)) out.push({ offset: m.index, message: `${m[0]} is not a radius token`, suggestion: `Use ${neighbours(config.radii.filter((r) => r < 999), n)}` });
       }
+      for (const b of styleBindings(code)) {
+        if (!RADIUS_PROP.test(b.prop)) continue;
+        for (const v of pxValues(b.value)) {
+          if (!ok(v.n)) out.push({ offset: b.offset, message: `${b.prop} ${fmt(v.n)} is not a radius token`, suggestion: `Use ${neighbours(config.radii.filter((r) => r < 999), v.n)}` });
+        }
+      }
     }
     return out;
   }
@@ -406,10 +1020,11 @@ var fontFamily = {
         suggestion: `Use var(--font-family-sans) (${allowed[0]})`
       });
     };
-    for (const m of matches(/(?<![\w-])font-family\s*:\s*([^;{}\n]+)/g, code)) test(m[1], m.index);
+    for (const m of matches(/(?<![\w-])font-family\s*:\s*([^;{}\n]+)/g, code)) test(declValue(m[1], kind), m.index);
     if (kind !== "css") {
       for (const m of matches(/(?<![\w-])fontFamily\s*:\s*(['"`])([^'"`]+)\1/g, code)) test(m[2], m.index);
       for (const m of matches(/(?<![\w-])font-\[([^\]]+)\]/g, code)) test(m[1].replace(/_/g, " "), m.index);
+      for (const b of styleBindings(code)) if (b.prop === "font-family") test(b.value, b.offset);
     }
     return out;
   }
@@ -421,7 +1036,7 @@ var preferOfficialComponent = {
   description: "Use the design system component instead of a raw HTML element.",
   defaultSeverity: "error",
   kinds: MARKUP,
-  check({ code, config }) {
+  check({ code, config, framework }) {
     if (config.replaces.size === 0) return [];
     const out = [];
     const baseTags = [...new Set([...config.replaces.keys()].map((k) => k.replace(/\[.*$/, "").replace(/[^a-z0-9-]/g, "")))].filter(Boolean);
@@ -436,16 +1051,28 @@ var preferOfficialComponent = {
         else if (tag === "input" && !TEXT_INPUT_TYPES.has(type)) comp = type === "submit" || type === "button" ? config.replaces.get("button") : void 0;
       }
       if (!comp) continue;
+      const usage = resolveUsage(comp, framework);
+      if (!usage) continue;
       if (new RegExp(`(?:function|const|class)\\s+${comp.name}\\b`).test(code)) continue;
+      if (framework !== "react" && implementsTag(code, usage.tag)) continue;
       out.push({
         offset: m.index,
         message: `Raw <${tag}${tag === "input" && /type=/.test(attrs) ? ` type="${attrs.match(/type\s*=\s*\{?\s*["'`]([\w-]+)/)?.[1]}"` : ""}> re-implements ${comp.name}`,
-        suggestion: `import { ${comp.name} } from "${comp.importPath}"`
+        suggestion: useSuggestion(comp, usage)
       });
     }
     return out;
   }
 };
+var escapeRe = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+var implementsTag = (code, tag) => new RegExp(`selector\\s*:\\s*['"\`]${escapeRe(tag)}['"\`]|customElements\\.define\\(\\s*['"\`]${escapeRe(tag)}['"\`]|@customElement\\(\\s*['"\`]${escapeRe(tag)}['"\`]`).test(code);
+function useSuggestion(comp, u) {
+  if (u.framework === "react") return `import { ${comp.name} } from "${comp.importPath}"`;
+  const parts = [`Use <${u.tag}>`];
+  if (u.importLine) parts.push(`(${u.importLine})`);
+  if (u.setup && u.via) parts.push(`\u2014 ${u.setup}`);
+  return parts.join(" ");
+}
 var forbiddenImport = {
   id: "forbidden-import",
   title: "Other UI library",
@@ -501,15 +1128,15 @@ function importedComponents(code, components) {
   }
   return out;
 }
-function skipBalanced(code, i) {
-  const open = code[i];
+function skipBalanced(code, i2) {
+  const open = code[i2];
   if (open === '"' || open === "'") {
-    const end = code.indexOf(open, i + 1);
+    const end = code.indexOf(open, i2 + 1);
     return end === -1 ? code.length : end + 1;
   }
   let depth = 0;
   let quote = null;
-  for (let j = i; j < code.length; j++) {
+  for (let j = i2; j < code.length; j++) {
     const c = code[j];
     if (quote) {
       if (c === "\\") j++;
@@ -525,38 +1152,121 @@ function skipBalanced(code, i) {
 function parseAttributes(code, start) {
   const attrs = [];
   let spread = false;
-  let i = start;
-  while (i < code.length) {
-    while (/\s/.test(code[i] ?? "")) i++;
-    const c = code[i];
+  let i2 = start;
+  while (i2 < code.length) {
+    while (/\s/.test(code[i2] ?? "")) i2++;
+    const c = code[i2];
     if (c === void 0) return null;
     if (c === ">") return { attrs, spread, selfClosing: false };
-    if (c === "/" && code[i + 1] === ">") return { attrs, spread, selfClosing: true };
+    if (c === "/" && code[i2 + 1] === ">") return { attrs, spread, selfClosing: true };
     if (c === "{") {
       spread = true;
-      i = skipBalanced(code, i);
+      i2 = skipBalanced(code, i2);
+      continue;
+    }
+    const name = /^[A-Za-z_$][\w$:.-]*/.exec(code.slice(i2, i2 + 80))?.[0];
+    if (!name) return null;
+    attrs.push({ name, offset: i2 });
+    i2 += name.length;
+    while (/\s/.test(code[i2] ?? "")) i2++;
+    if (code[i2] === "=") {
+      i2++;
+      while (/\s/.test(code[i2] ?? "")) i2++;
+      i2 = skipBalanced(code, i2);
+    }
+  }
+  return null;
+}
+function parseHtmlAttributes(code, start) {
+  const attrs = [];
+  let i2 = start;
+  while (i2 < code.length) {
+    while (/\s/.test(code[i2] ?? "")) i2++;
+    const c = code[i2];
+    if (c === void 0) return null;
+    if (c === ">" || c === "/" && code[i2 + 1] === ">") return { attrs, end: i2 };
+    if (c === "{" || c === "<" && code[i2 + 1] === "?") {
+      const close = c === "{" ? code[i2 + 1] === "%" ? "%}" : "}}" : "?>";
+      const e = code.indexOf(close, i2 + 2);
+      i2 = e === -1 ? code.length : e + close.length;
       continue;
     }
-    const name = /^[A-Za-z_$][\w$:.-]*/.exec(code.slice(i, i + 80))?.[0];
+    const name = /^[^\s=>/"'{]+/.exec(code.slice(i2, i2 + 120))?.[0];
     if (!name) return null;
-    attrs.push({ name, offset: i });
-    i += name.length;
-    while (/\s/.test(code[i] ?? "")) i++;
-    if (code[i] === "=") {
-      i++;
-      while (/\s/.test(code[i] ?? "")) i++;
-      i = skipBalanced(code, i);
+    attrs.push({ name, offset: i2 });
+    i2 += name.length;
+    while (/\s/.test(code[i2] ?? "")) i2++;
+    if (code[i2] === "=") {
+      i2++;
+      while (/\s/.test(code[i2] ?? "")) i2++;
+      const q = code[i2];
+      if (q === '"' || q === "'") {
+        const e = code.indexOf(q, i2 + 1);
+        i2 = e === -1 ? code.length : e + 1;
+      } else while (i2 < code.length && !/[\s>]/.test(code[i2])) i2++;
     }
   }
   return null;
 }
+var HTML_GLOBAL = /^(?:id|class|style|title|role|hidden|tabindex|lang|dir|slot|part|is|key|ref|name|for|form|aria-.+|data-.+)$/;
+function propName(raw) {
+  let n = raw;
+  if (/^(?:\(|@|on-|v-on:|\*|#|let-|ref-|v-(?!bind:|model:))/.test(n)) return null;
+  n = n.replace(/^v-bind:|^v-model:|^bind-|^:/, "").replace(/^\[\(?|\)?\]$/g, "");
+  if (/^(?:attr|class|style)\./.test(n) || /^ng[A-Z]/.test(n) || /^(?:formControl|formControlName|formGroup|routerLink|routerLinkActive)$/.test(n)) return null;
+  n = n.replace(/\.(?:px|rem|em|%)$/, "").replace(/\..*$/, "");
+  if (HTML_GLOBAL.test(n.toLowerCase())) return null;
+  return n;
+}
+var sameName = (a, b) => a.replace(/-/g, "").toLowerCase() === b.replace(/-/g, "").toLowerCase();
+function templateProps({ code, config, framework }) {
+  const tagged = [];
+  for (const comp of config.components) {
+    const u = resolveUsage(comp, framework);
+    const props = u?.props;
+    if (u && props?.length) tagged.push({ comp, tag: u.tag, props });
+  }
+  if (!tagged.length) return [];
+  const out = [];
+  const forms = /* @__PURE__ */ new Map();
+  for (const t of tagged) {
+    forms.set(t.tag, t);
+    if (framework === "vue") forms.set(t.tag.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), t);
+  }
+  const names = [...forms.keys()].sort((a, b) => b.length - a.length).map(escapeRe).join("|");
+  for (const m of matches(new RegExp(`<(${names})(?=[\\s/>])`, "g"), code)) {
+    const t = forms.get(m[1]);
+    const parsed = parseHtmlAttributes(code, m.index + m[0].length);
+    if (!parsed) continue;
+    const list = t.props.map((p) => p.required ? `${p.name} (required)` : p.name).join(", ");
+    const passed = [];
+    for (const a of parsed.attrs) {
+      const raw = a.name;
+      if (/^v-model$/.test(raw)) passed.push("modelValue", "value");
+      if (/^\[\(ngModel\)\]$/.test(raw)) passed.push("value");
+      const n = propName(raw);
+      if (!n) continue;
+      passed.push(n);
+      if (t.props.some((p) => sameName(p.name, n))) continue;
+      out.push({ offset: a.offset, message: `<${t.tag}> has no "${n}" input`, suggestion: `Remove it. ${t.comp.name} takes: ${list}` });
+    }
+    for (const p of t.props) {
+      if (!p.required || passed.some((n) => sameName(n, p.name))) continue;
+      if (p.name === "children" || p.name === "content") continue;
+      out.push({ offset: m.index, message: `<${t.tag}> is missing the required "${p.name}" input`, suggestion: `Add ${p.name}${p.type ? ` (${p.type})` : ""}` });
+    }
+  }
+  return out;
+}
 var componentProps = {
   id: "component-props",
   title: "Unknown or missing prop",
   description: "Design system components only accept their documented props, and required props must be passed.",
   defaultSeverity: "error",
-  kinds: ["jsx"],
-  check({ code, config }) {
+  kinds: MARKUP,
+  check(ctx) {
+    if (ctx.framework !== "react" || ctx.kind !== "jsx") return templateProps(ctx);
+    const { code, config } = ctx;
     if (!config.components.some((c) => c.props?.length)) return [];
     const imported = importedComponents(code, config.components);
     if (imported.size === 0) return [];
@@ -606,8 +1316,10 @@ var RULES = [
 var RULE_IDS = RULES.map((r) => r.id);
 
 // ../engine/src/source.ts
+var TEMPLATE_EXTENSIONS = ["mustache", "hbs", "handlebars", "php", "phtml", "twig", "njk", "liquid"];
 function fileKind(path) {
   const ext = path.toLowerCase().split(".").pop() ?? "";
+  if (TEMPLATE_EXTENSIONS.includes(ext)) return "template";
   if (["tsx", "jsx", "ts", "js", "mjs", "cjs", "mdx"].includes(ext)) return "jsx";
   if (ext === "vue") return "vue";
   if (ext === "svelte") return "svelte";
@@ -615,47 +1327,75 @@ function fileKind(path) {
   if (["css", "scss", "sass", "less", "pcss"].includes(ext)) return "css";
   return "other";
 }
-var SCANNABLE = /* @__PURE__ */ new Set(["jsx", "vue", "svelte", "html", "css"]);
+var SCANNABLE = /* @__PURE__ */ new Set(["jsx", "vue", "svelte", "html", "template", "css"]);
+var ANGULAR_COMPONENT = /@Component\s*\(\s*\{/;
+var ANGULAR_TEMPLATE = /\s(?:\[[\w.()-]+\]|\([\w.]+\)|\*ng[A-Z]\w*)\s*=|@(?:if|for|switch)\s*\(/;
+function fileFramework(path, kind, code, project) {
+  const p = path.toLowerCase();
+  switch (kind) {
+    case "vue":
+      return "vue";
+    case "svelte":
+      return "web-components";
+    case "template":
+      return "html";
+    case "css":
+      return project ?? "react";
+    case "html":
+      if (p.endsWith(".component.html") || project === "angular" || ANGULAR_TEMPLATE.test(code)) return "angular";
+      return project === "vue" || project === "web-components" ? project : "html";
+    case "jsx":
+      if (ANGULAR_COMPONENT.test(code)) return "angular";
+      if (/\.(tsx|jsx|mdx)$/.test(p)) return "react";
+      return project ?? "react";
+    default:
+      return project ?? "react";
+  }
+}
 var blank = (s) => s.replace(/[^\n]/g, " ");
 function stripComments(code, kind) {
   let out = code;
-  if (kind === "html" || kind === "vue" || kind === "svelte") {
+  if (kind === "html" || kind === "vue" || kind === "svelte" || kind === "template") {
     out = out.replace(/<!--[\s\S]*?-->/g, blank);
   }
+  if (kind === "template") {
+    out = out.replace(/\{\{!--[\s\S]*?--\}\}|\{\{![\s\S]*?\}\}|\{\{--[\s\S]*?--\}\}|\{#[\s\S]*?#\}|\{%-?\s*comment\s*-?%\}[\s\S]*?\{%-?\s*endcomment\s*-?%\}/g, blank).replace(/<\?(?:php|=)?[\s\S]*?(?:\?>|$)/g, (block) => block.replace(/\/\*[\s\S]*?\*\/|(?<![:"'])\/\/[^\n]*?(?=\?>|\n|$)|(?<=\s)#[^\n]*?(?=\?>|\n|$)/g, blank));
+    return out;
+  }
   if (kind === "css") {
     return out.replace(/\/\*[\s\S]*?\*\//g, blank).replace(/(^|[^:])\/\/[^\n]*/g, (m, p1) => p1 + blank(m.slice(p1.length)));
   }
   const chars = out.split("");
-  let i = 0;
+  let i2 = 0;
   let quote = null;
-  while (i < chars.length) {
-    const c = chars[i];
-    const n = chars[i + 1];
+  while (i2 < chars.length) {
+    const c = chars[i2];
+    const n = chars[i2 + 1];
     if (quote) {
-      if (c === "\\") i += 2;
+      if (c === "\\") i2 += 2;
       else {
         if (c === quote) quote = null;
-        i++;
+        i2++;
       }
       continue;
     }
     if (c === '"' || c === "'" || c === "`") {
       quote = c;
-      i++;
+      i2++;
       continue;
     }
     if (c === "/" && n === "*") {
-      const end = out.indexOf("*/", i + 2);
+      const end = out.indexOf("*/", i2 + 2);
       const stop = end === -1 ? chars.length : end + 2;
-      for (let j = i; j < stop; j++) if (chars[j] !== "\n") chars[j] = " ";
-      i = stop;
+      for (let j = i2; j < stop; j++) if (chars[j] !== "\n") chars[j] = " ";
+      i2 = stop;
       continue;
     }
-    if (c === "/" && n === "/" && chars[i - 1] !== ":" && kind === "jsx") {
-      while (i < chars.length && chars[i] !== "\n") chars[i++] = " ";
+    if (c === "/" && n === "/" && chars[i2 - 1] !== ":" && kind === "jsx") {
+      while (i2 < chars.length && chars[i2] !== "\n") chars[i2++] = " ";
       continue;
     }
-    i++;
+    i2++;
   }
   return chars.join("");
 }
@@ -664,7 +1404,7 @@ var LineIndex = class {
   text;
   constructor(text) {
     this.text = text;
-    for (let i = 0; i < text.length; i++) if (text.charCodeAt(i) === 10) this.starts.push(i + 1);
+    for (let i2 = 0; i2 < text.length; i2++) if (text.charCodeAt(i2) === 10) this.starts.push(i2 + 1);
   }
   position(offset) {
     let lo = 0;
@@ -687,19 +1427,19 @@ var LineIndex = class {
 };
 function globToRegExp(glob) {
   let re = "";
-  for (let i = 0; i < glob.length; i++) {
-    const c = glob[i];
+  for (let i2 = 0; i2 < glob.length; i2++) {
+    const c = glob[i2];
     if (c === "*") {
-      if (glob[i + 1] === "*") {
-        const slash = glob[i + 2] === "/";
+      if (glob[i2 + 1] === "*") {
+        const slash = glob[i2 + 2] === "/";
         re += slash ? "(?:.*/)?" : ".*";
-        i += slash ? 2 : 1;
+        i2 += slash ? 2 : 1;
       } else re += "[^/]*";
     } else if (c === "?") re += "[^/]";
     else if (c === "{") {
-      const end = glob.indexOf("}", i);
-      re += `(?:${glob.slice(i + 1, end).split(",").map((s) => s.replace(/[.+^$()|[\]\\]/g, "\\$&")).join("|")})`;
-      i = end;
+      const end = glob.indexOf("}", i2);
+      re += `(?:${glob.slice(i2 + 1, end).split(",").map((s) => s.replace(/[.+^$()|[\]\\]/g, "\\$&")).join("|")})`;
+      i2 = end;
     } else re += c.replace(/[.+^$()|[\]\\]/g, "\\$&");
   }
   return new RegExp(`^${re}$`);
@@ -713,7 +1453,7 @@ function makeIgnore(globs) {
 }
 
 // ../engine/src/check.ts
-var ENGINE_VERSION = "0.3.1";
+var ENGINE_VERSION = "0.4.0";
 var WEIGHT = { error: 4, warning: 1.5, info: 0.25 };
 function computeScore(counts, lines) {
   const penalty = counts.error * WEIGHT.error + counts.warning * WEIGHT.warning + counts.info * WEIGHT.info;
@@ -738,11 +1478,12 @@ function check(files, configInput, opts = {}) {
     const idx = new LineIndex(file.content);
     linesScanned += only ? only.size : file.content.split("\n").filter((l) => l.trim()).length;
     const code = stripComments(file.content, kind);
+    const framework = fileFramework(path, kind, code, config.framework);
     const seen = /* @__PURE__ */ new Set();
     for (const rule of RULES) {
       const setting = config.rules[rule.id];
       if (setting === "off" || !rule.kinds.includes(kind)) continue;
-      for (const f of rule.check({ path, kind, code, config })) {
+      for (const f of rule.check({ path, kind, code, config, framework })) {
         const { line, column } = idx.position(f.offset);
         if (only && !only.has(line)) continue;
         const key = `${rule.id}:${line}:${column}`;
@@ -789,12 +1530,12 @@ var ansi = (on) => {
   return { red: w("31"), yellow: w("33"), cyan: w("36"), green: w("32"), dim: w("2"), bold: w("1") };
 };
 var rendered = (r) => r.violations.length > 0 && r.violations.every((v) => v.line === 0);
-function formatPretty(report, { color = true, max = 200 } = {}) {
+function formatPretty(report, { color = true, max: max2 = 200 } = {}) {
   const c = ansi(color);
   const sev = { error: c.red, warning: c.yellow, info: c.cyan };
   const lines = [];
   let lastFile = "";
-  for (const v of report.violations.slice(0, max)) {
+  for (const v of report.violations.slice(0, max2)) {
     if (v.file !== lastFile) {
       lines.push("", c.bold(v.file));
       lastFile = v.file;
@@ -804,7 +1545,7 @@ function formatPretty(report, { color = true, max = 200 } = {}) {
     if (v.suggestion) lines.push(`  ${" ".repeat(16)} ${c.green("\u2192")} ${v.suggestion}`);
     if (rendered2 && v.snippet) lines.push(`  ${" ".repeat(16)} ${c.dim(`on ${v.snippet}`)}`);
   }
-  if (report.violations.length > max) lines.push("", c.dim(`\u2026 and ${report.violations.length - max} more`));
+  if (report.violations.length > max2) lines.push("", c.dim(`\u2026 and ${report.violations.length - max2} more`));
   const s = report.score;
   const scoreStr = s >= 80 ? c.green(String(s)) : s >= 65 ? c.yellow(String(s)) : c.red(String(s));
   lines.push(
@@ -816,9 +1557,9 @@ function formatPretty(report, { color = true, max = 200 } = {}) {
 }
 var esc = (s) => s.replace(/%/g, "%25").replace(/\r/g, "%0D").replace(/\n/g, "%0A");
 var escProp = (s) => esc(s).replace(/:/g, "%3A").replace(/,/g, "%2C");
-function formatGithubAnnotations(report, max = 50) {
+function formatGithubAnnotations(report, max2 = 50) {
   const level = { error: "error", warning: "warning", info: "notice" };
-  return report.violations.slice(0, max).map(
+  return report.violations.slice(0, max2).map(
     (v) => `::${level[v.severity]} file=${escProp(v.file)},line=${v.line},col=${v.column},title=${escProp(`Brandrail: ${title(v.ruleId)}`)}::${esc(
       v.suggestion ? `${v.message}. ${v.suggestion}` : v.message
     )}`
@@ -931,6 +1672,17 @@ function fontWeight(v) {
   return WEIGHTS[slug(v)] ?? (/^\d{3}$/.test(v.trim()) ? v.trim() : v);
 }
 function colorValue(v) {
+  if (v && typeof v === "object" && ("components" in v || "hex" in v)) {
+    const c = v;
+    const alpha = typeof c.alpha === "number" ? c.alpha : 1;
+    const withAlpha = (hex2) => alpha < 1 ? `${hex2.slice(0, 7)}${Math.round(alpha * 255).toString(16).padStart(2, "0")}` : hex2.slice(0, 7);
+    if (typeof c.hex === "string" && /^#[0-9a-f]{6}/i.test(c.hex)) return withAlpha(c.hex.toLowerCase());
+    const comps = c.components?.map((x2) => typeof x2 === "number" ? x2 : 0);
+    if (comps?.length === 3 && (!c.colorSpace || /srgb|display-p3/i.test(c.colorSpace))) {
+      return withAlpha(toHex({ r: comps[0] * 255, g: comps[1] * 255, b: comps[2] * 255, a: 1 }));
+    }
+    return null;
+  }
   if (v && typeof v === "object" && "r" in v) {
     const c = v;
     const hex2 = toHex({ r: c.r * 255, g: c.g * 255, b: c.b * 255, a: 1 });
@@ -948,7 +1700,14 @@ function colorValue(v) {
   const hex = toHex(rgb);
   return rgb.a < 1 ? `${hex}${Math.round(rgb.a * 255).toString(16).padStart(2, "0")}` : hex;
 }
-var dim = (v) => typeof v === "number" ? `${Math.round(v * 100) / 100}px` : String(v).trim();
+var dim = (v) => {
+  if (v && typeof v === "object" && "value" in v) {
+    const d = v;
+    const n = typeof d.value === "number" ? d.value : parseFloat(d.value);
+    return d.unit === "rem" ? `${Math.round(n * 16 * 100) / 100}px` : `${Math.round(n * 100) / 100}px`;
+  }
+  return typeof v === "number" ? `${Math.round(v * 100) / 100}px` : String(v).trim();
+};
 function classify(name, kind, value, opts = {}) {
   const parts = segs(name);
   const hay = slug(`${opts.context ?? ""} ${name}`);
@@ -980,7 +1739,7 @@ function classify(name, kind, value, opts = {}) {
     return null;
   }
   const v = dim(value);
-  const has = (...scope) => scope.some((x) => scopes.includes(x));
+  const has = (...scope) => scope.some((x2) => scopes.includes(x2));
   const nm = (...prefixes) => stripPrefix(last, ...prefixes) || last;
   if (has("CORNER_RADIUS") || /radius|(^|-)rad(-|$)|corner|rounded/.test(hay)) return { path: `radius.${nm("radius", "rad", "corner", "rounded")}`, type: "dimension", value: v };
   if (has("FONT_SIZE") || /font-size|text-size/.test(hay)) return { path: `font.size.${nm("font-size", "text-size", "size")}`, type: "dimension", value: v };
@@ -990,7 +1749,7 @@ function classify(name, kind, value, opts = {}) {
   if (/icon/.test(last)) return { path: `size.icon.${nm("icon")}`, type: "dimension", value: v };
   if (has("GAP") || /spac|gap|padding|margin|inset|(^|-)space(-|$)/.test(hay)) return { path: `space.${nm("spacing", "space", "gap")}`, type: "dimension", value: v };
   if (has("STROKE_FLOAT") || /stroke|border-width/.test(hay)) return { path: `border.width.${nm("border-width", "stroke")}`, type: "dimension", value: v };
-  if (has("WIDTH_HEIGHT") || /size|width|height/.test(hay)) return { path: ["size", ...rest.filter((x) => x !== "size"), last].join("."), type: "dimension", value: v };
+  if (has("WIDTH_HEIGHT") || /size|width|height/.test(hay)) return { path: ["size", ...rest.filter((x2) => x2 !== "size"), last].join("."), type: "dimension", value: v };
   return { path: ["number", ...parts].join("."), type: "number", value: String(value) };
 }
 function rawLeaves(node, prefix, out, studio, inherited) {
@@ -1051,8 +1810,8 @@ function flattenTokens(doc) {
       if (!v) continue;
       const d = r.dark !== void 0 ? colorValue(r.dark) : null;
       out.push({ path: r.path, type: "color", value: v, ...d ? { dark: d } : {}, ...r.description ? { description: r.description } : {} });
-    } else if (typeof r.value === "string" || typeof r.value === "number") {
-      const type = t === "fontfamily" || t === "fontfamilies" ? "fontFamily" : t === "fontweight" || t === "fontweights" ? "fontWeight" : TYPE_KIND[t] === "number" ? "dimension" : t === "number" ? "number" : /^font\.family\./.test(r.path) ? "fontFamily" : typeof r.value === "number" ? "number" : /px$|rem$/.test(String(r.value)) ? "dimension" : "string";
+    } else if (typeof r.value === "string" || typeof r.value === "number" || r.value && typeof r.value === "object" && "unit" in r.value) {
+      const type = typeof r.value === "object" ? "dimension" : t === "fontfamily" || t === "fontfamilies" ? "fontFamily" : t === "fontweight" || t === "fontweights" ? "fontWeight" : TYPE_KIND[t] === "number" ? "dimension" : t === "number" ? "number" : /^font\.family\./.test(r.path) ? "fontFamily" : typeof r.value === "number" ? "number" : /px$|rem$/.test(String(r.value)) ? "dimension" : "string";
       out.push({ path: r.path, type, value: type === "dimension" ? dim(r.value) : String(r.value), ...r.description ? { description: r.description } : {} });
     }
   }
@@ -1111,8 +1870,8 @@ function buildDtcg(tokens) {
   for (const t of tokens) {
     const parts = t.path.split(".");
     let node = tree;
-    parts.forEach((p, i) => {
-      if (i === parts.length - 1) {
+    parts.forEach((p, i2) => {
+      if (i2 === parts.length - 1) {
         node[p] = {
           $type: t.type,
           $value: t.value,
@@ -1209,7 +1968,7 @@ function fromFigmaVariables(meta, opts = {}) {
     if (!c) continue;
     let darkValue;
     if (c.type === "color") {
-      const hasDarkSomewhere = Object.values(cols).some((x) => x.modes.some((m) => DARK.test(m.name)));
+      const hasDarkSomewhere = Object.values(cols).some((x2) => x2.modes.some((m) => DARK.test(m.name)));
       if (hasDarkSomewhere) {
         const d = colorValue(resolve4(v, "dark"));
         if (d && d !== c.value) darkValue = d;
@@ -1243,7 +2002,7 @@ function fromFigmaStyles(styles, opts = {}) {
     }
   }
   const fams = [...families.entries()].sort((a, b) => b[1] - a[1]);
-  fams.forEach(([f], i) => out.push({ path: `font.family.${i === 0 ? "sans" : /mono|code/i.test(f) ? "mono" : slug(f)}`, type: "fontFamily", value: f }));
+  fams.forEach(([f], i2) => out.push({ path: `font.family.${i2 === 0 ? "sans" : /mono|code/i.test(f) ? "mono" : slug(f)}`, type: "fontFamily", value: f }));
   const notes = skipped ? [`${skipped} fill style${skipped === 1 ? "" : "s"} (gradients or images) were skipped.`] : [];
   return finish("figma-styles", out, notes, opts);
 }
@@ -1261,7 +2020,7 @@ function fromModeObject(obj, opts = {}) {
   const leafSets = modes.map(([name, v]) => {
     const l = [];
     plainLeaves(v, [], l);
-    return { name, leaves: l, keys: new Set(l.map((x) => x.key.join("/"))) };
+    return { name, leaves: l, keys: new Set(l.map((x2) => x2.key.join("/"))) };
   });
   const groups = [];
   for (const m of leafSets) {
@@ -1310,7 +2069,7 @@ function fromModeObject(obj, opts = {}) {
       if (!c) continue;
       let d;
       if (c.type === "color") {
-        const darkLeaf = dark && dark !== def ? dark.leaves.find((x) => x.key.join("/") === l.key.join("/")) : void 0;
+        const darkLeaf = dark && dark !== def ? dark.leaves.find((x2) => x2.key.join("/") === l.key.join("/")) : void 0;
         const dv = colorValue(deref(darkLeaf ? darkLeaf.value : l.value, "dark"));
         if (dv && dv !== c.value) d = dv;
       }
@@ -1320,12 +2079,125 @@ function fromModeObject(obj, opts = {}) {
   for (const p of pending) out.push({ ...p.t, referenced: referenced.has(p.key) });
   return finish("mode-object", out, notes, opts);
 }
+var figmaExt = (node, key) => {
+  const ext = node.$extensions;
+  if (!ext) return void 0;
+  if (`com.figma.${key}` in ext) return ext[`com.figma.${key}`];
+  const nested = ext["com.figma"];
+  return nested?.[key];
+};
+function fileLeaves(node, prefix, out, inherited) {
+  if (!node || typeof node !== "object" || Array.isArray(node)) return;
+  const o = node;
+  const groupType = o.$type ?? inherited;
+  if ("$value" in o) {
+    const alias = figmaExt(o, "aliasData");
+    const scopes = figmaExt(o, "scopes");
+    out.push({
+      path: prefix,
+      type: o.$type ?? groupType,
+      value: o.$value,
+      description: o.$description,
+      scopes: Array.isArray(scopes) ? scopes : void 0,
+      aliasTarget: alias?.targetVariableName?.replace(/\//g, "."),
+      hidden: figmaExt(o, "hiddenFromPublishing") === true || void 0
+    });
+    return;
+  }
+  for (const [k, v] of Object.entries(o)) {
+    if (k.startsWith("$")) continue;
+    fileLeaves(v, prefix ? `${prefix}.${k}` : k, out, groupType);
+  }
+}
+var hasFigmaExt = (node, depth = 0) => {
+  if (!node || typeof node !== "object" || depth > 12) return false;
+  const ext = node.$extensions;
+  if (ext && Object.keys(ext).some((k) => k.startsWith("com.figma"))) return true;
+  return Object.values(node).some((v) => hasFigmaExt(v, depth + 1));
+};
+function modeOf(file) {
+  const root = file.data ?? {};
+  const parts = file.name.replace(/\\/g, "/").split("/").filter(Boolean);
+  const base = (parts.pop() ?? "tokens").replace(/(\.tokens)?\.json$/i, "");
+  const named = figmaExt(root, "modeName");
+  const split = base.match(/^(.+?)[\s._-]+(light|dark|night|day|default|mode[\s_-]*\d+)$/i);
+  return {
+    collection: parts.join("/") || (split ? split[1] : ""),
+    mode: typeof named === "string" ? named : split ? split[2] : base
+  };
+}
+function importTokenFiles(files, opts = {}) {
+  const parsed = files.filter((f) => f.data && typeof f.data === "object");
+  if (!parsed.length) throw new Error("No JSON token files found.");
+  const figma = parsed.some((f) => hasFigmaExt(f.data));
+  if (parsed.length === 1 && !figma) return importTokens(parsed[0].data, opts);
+  const notes = [];
+  const withMode = parsed.map((f) => ({ ...f, ...modeOf(f) }));
+  const byCollection = /* @__PURE__ */ new Map();
+  for (const f of withMode) byCollection.set(f.collection, [...byCollection.get(f.collection) ?? [], f]);
+  const light = /* @__PURE__ */ new Map();
+  const darkOverrides = /* @__PURE__ */ new Map();
+  for (const [collection, list] of byCollection) {
+    const dark = list.find((f) => DARK.test(f.mode));
+    const def = list.find((f) => LIGHT.test(f.mode) && !DARK.test(f.mode)) ?? list.find((f) => !DARK.test(f.mode)) ?? list[0];
+    if (list.length > 1) {
+      const label = collection ? `\u201C${collection}\u201D` : "The files";
+      notes.push(`${label}: modes ${list.map((f) => f.mode).join(", ")}; used \u201C${def.mode}\u201D${dark && dark !== def ? ` (and \u201C${dark.mode}\u201D as dark)` : ""}.`);
+    }
+    const read = (f, into) => {
+      const leaves2 = [];
+      fileLeaves(f.data, "", leaves2);
+      for (const l of leaves2) into.set(l.path, { path: l.path, type: l.type, value: l.value, description: l.description, leaf: l });
+    };
+    read(def, light);
+    if (dark && dark !== def) read(dark, darkOverrides);
+  }
+  const lightRaws = resolveRefs([...light.values()]);
+  const darkRaws = resolveRefs([...light.values()].map((r) => darkOverrides.get(r.path) ?? r));
+  const darkByPath = new Map(darkRaws.map((r) => [r.path, r.value]));
+  const referenced = /* @__PURE__ */ new Set();
+  for (const r of [...light.values(), ...darkOverrides.values()]) {
+    if (r.leaf.aliasTarget) referenced.add(r.leaf.aliasTarget);
+    const m = typeof r.value === "string" ? r.value.trim().match(REF) : null;
+    if (m) referenced.add(m[1]);
+  }
+  const out = [];
+  let hidden = 0;
+  for (const r of lightRaws) {
+    const leaf = light.get(r.path).leaf;
+    if (leaf.hidden) {
+      hidden++;
+      continue;
+    }
+    const t = (r.type ?? "").toLowerCase();
+    const kind = t === "color" ? "color" : t === "boolean" ? "boolean" : t === "string" || t === "fontfamily" || t === "fontweight" ? "string" : typeof r.value === "string" && !/^-?[\d.]+(px|rem)?$/.test(r.value) && !colorValue(r.value) ? "string" : colorValue(r.value) && t !== "number" && t !== "dimension" ? "color" : "number";
+    let tok;
+    if (figma) {
+      const value = kind === "number" && r.value && typeof r.value === "object" ? parseFloat(dim(r.value)) : r.value;
+      tok = classify(r.path.replace(/\./g, "/"), kind, value, { scopes: leaf.scopes?.filter((x2) => x2 !== "ALL_SCOPES") });
+    } else {
+      const flat = flattenTokens({ x: { $type: r.type, $value: r.value } })[0];
+      tok = flat ? { path: flat.type === "color" && !r.path.startsWith("color.") ? `color.${r.path}` : r.path, type: flat.type, value: flat.value } : null;
+    }
+    if (!tok) continue;
+    let darkValue;
+    if (tok.type === "color" && darkOverrides.size) {
+      const d = colorValue(darkByPath.get(r.path));
+      if (d && d !== tok.value) darkValue = d;
+    }
+    out.push({ ...tok, ...darkValue ? { dark: darkValue } : {}, ...r.description ? { description: r.description } : {}, referenced: referenced.has(r.path) });
+  }
+  if (hidden) notes.push(`${hidden} variable${hidden === 1 ? "" : "s"} hidden from publishing were skipped.`);
+  return finish(figma ? "figma-export" : "dtcg", out, notes, opts);
+}
 function importTokens(input, opts = {}) {
   if (!input || typeof input !== "object") throw new Error("Expected a JSON object.");
   const o = input;
+  if (Array.isArray(o.$files)) return importTokenFiles(o.$files, opts);
   const meta = o.meta ?? o;
   if (meta.variables && meta.variableCollections) return fromFigmaVariables(meta, opts);
   if (Array.isArray(o.styles) && o.styles.every((s) => s && "styleType" in s)) return fromFigmaStyles(o.styles, opts);
+  if (hasDollarValue(o) && hasFigmaExt(o)) return importTokenFiles([{ name: "tokens.json", data: o }], opts);
   if (hasDollarValue(o) || hasStudioValue(o)) {
     const studio = !hasDollarValue(o);
     const flat = flattenTokens(o);
@@ -1368,6 +2240,7 @@ var RULES_START = "<!-- brandrail:start -->";
 var RULES_END = "<!-- brandrail:end -->";
 function generateInstructions(config, opts = {}) {
   const r = resolveConfig(config);
+  const fw = opts.framework ?? config.framework ?? "react";
   const lines = [];
   lines.push(`# Design system rules${opts.org ? ` \u2014 ${opts.org}` : ""}`);
   lines.push("");
@@ -1375,7 +2248,7 @@ function generateInstructions(config, opts = {}) {
     `All UI in this repo must follow the Brand Kit${r.tokenVersion ? ` (v${r.tokenVersion})` : ""}. These rules are checked on every pull request by Brandrail.`
   );
   lines.push("");
-  const usesKit = r.components.some((c) => c.importPath === KIT_PACKAGE);
+  const usesKit = fw === "react" && r.components.some((c) => c.importPath === KIT_PACKAGE);
   if (opts.tokensCss || usesKit) {
     lines.push("## Setup");
     if (opts.tokensCss) {
@@ -1387,17 +2260,29 @@ function generateInstructions(config, opts = {}) {
     lines.push("");
   }
   if (r.components.length) {
+    const usable = r.components.map((c) => ({ c, u: resolveUsage(c, fw) }));
+    const here = usable.filter((x2) => x2.u);
+    const missing = usable.filter((x2) => !x2.u).map((x2) => x2.c.name);
     lines.push("## Components");
-    lines.push("Always use these components. Never re-create them with raw HTML elements:");
-    for (const c of r.components) {
+    if (fw !== "react") lines.push(`This is a${fw === "angular" ? "n" : ""} ${FRAMEWORK_LABEL[fw]} project: use the ${FRAMEWORK_LABEL[fw]} form of each component shown here.`);
+    if (here.length) lines.push("Always use these components. Never re-create them with raw HTML elements:");
+    for (const { c, u } of here) {
       const tags = [...r.replaces].filter(([, v]) => v === c).map(([t]) => `<${t}>`);
-      const props = c.props?.length ? ` \u2014 props: ${c.props.map((p) => p.required ? `${p.name}*` : p.name).join(", ")}` : "";
-      lines.push(`- \`${c.name}\` from \`${c.importPath}\`${tags.length ? ` (instead of ${tags.join(", ")})` : ""}${props}`);
-    }
-    if (r.components.some((c) => c.props?.length)) {
+      const props = u.props?.length ? ` \u2014 props: ${u.props.map((p) => p.required ? `${p.name}*` : p.name).join(", ")}` : "";
+      const how = fw === "react" ? `\`${c.name}\` from \`${c.importPath}\`` : `\`${markup(u)}\`${u.importLine ? ` (\`${u.importLine}\`)` : ""}`;
+      lines.push(`- ${how}${fw === "react" ? "" : ` \u2014 ${c.name}`}${tags.length ? ` (instead of ${tags.join(", ")})` : ""}${props}`);
+    }
+    const setups = [...new Set(here.map((x2) => x2.u.setup).filter(Boolean))];
+    if (setups.length && setups.length <= 3) for (const s of setups) lines.push(`- Setup: ${s}`);
+    else if (setups.length) lines.push("- Each component's setup is in its docs (MCP `get_component_docs`).");
+    if (here.some((x2) => x2.u.props?.length)) {
       lines.push("");
       lines.push("Pass only the props listed for each component (* = required). Any other prop is a type error and fails the check: if you need something a component doesn't take, look for a related component (often one with a longer name, like AvatarLabel next to Avatar) or compose it with design tokens.");
     }
+    if (missing.length) {
+      lines.push("");
+      lines.push(`No ${FRAMEWORK_LABEL[fw]} version yet: ${missing.join(", ")}. Build these with semantic HTML and the design tokens below; don't install another UI library.`);
+    }
     lines.push("");
   }
   if (r.colors.length) {
@@ -1416,7 +2301,7 @@ function generateInstructions(config, opts = {}) {
   const radiusVars = named(/^radius\./);
   const sizeVars = named(/^font\.size\./);
   lines.push(`- Spacing (padding, margin, gap) must be one of: ${r.spacing.filter((s) => s > 2).map((s) => `${s}px`).join(", ")}.${spaceVars.length ? ` Prefer the variables: ${spaceVars.join(", ")}.` : ""}`);
-  lines.push(`- Corner radius must be one of: ${r.radii.filter((x) => x > 0 && x < 999).map((x) => `${x}px`).join(", ")} (or fully rounded).${radiusVars.length ? ` Variables: ${radiusVars.join(", ")}.` : ""}`);
+  lines.push(`- Corner radius must be one of: ${r.radii.filter((x2) => x2 > 0 && x2 < 999).map((x2) => `${x2}px`).join(", ")} (or fully rounded).${radiusVars.length ? ` Variables: ${radiusVars.join(", ")}.` : ""}`);
   if (sizeVars.length) lines.push(`- Font sizes come from the type scale: ${sizeVars.join(", ")}. Matching line heights are \`--font-line-height-*\`.`);
   if (r.fonts.length) lines.push(`- Fonts: use ${r.fontVars.map((v) => `\`var(${v})\``).join(" or ")}; never set another font-family.`);
   lines.push("");
@@ -1459,7 +2344,7 @@ function mcpClientConfigs(url) {
       file: ".mcp.json",
       projectFile: true,
       content: json({ mcpServers: { brandrail: { type: "http", url, headers: { Authorization: "Bearer ${BRANDRAIL_KEY}" } } } }),
-      command: `claude mcp add --transport http brandrail ${url} --header "Authorization: Bearer $BRANDRAIL_KEY"`
+      command: `claude mcp add --transport http brandrail "${url}" --header "Authorization: Bearer $BRANDRAIL_KEY"`
     },
     {
       id: "codex",
@@ -1470,7 +2355,7 @@ function mcpClientConfigs(url) {
 url = "${url}"
 bearer_token_env_var = "BRANDRAIL_KEY"
 `,
-      command: `codex mcp add brandrail --url ${url} --bearer-token-env-var BRANDRAIL_KEY`
+      command: `codex mcp add brandrail --url "${url}" --bearer-token-env-var BRANDRAIL_KEY`
     },
     {
       id: "cursor",
@@ -1589,9 +2474,9 @@ function collectRenderedNodes(maxNodes = 3e3) {
 }
 var near = (scale, v, tol = 0.5) => scale.some((s) => Math.abs(s - v) <= tol);
 var neighbours2 = (scale, v) => {
-  const lo = [...scale].reverse().find((x) => x <= v);
-  const hi = scale.find((x) => x >= v);
-  return [...new Set([lo, hi].filter((x) => x !== void 0))].map((x) => `${x}px`).join(" or ");
+  const lo = [...scale].reverse().find((x2) => x2 <= v);
+  const hi = scale.find((x2) => x2 >= v);
+  return [...new Set([lo, hi].filter((x2) => x2 !== void 0))].map((x2) => `${x2}px`).join(" or ");
 };
 function closestToken(config, rgb) {
   const lab = rgbToLab(rgb);
@@ -1657,17 +2542,17 @@ function checkRendered(pages, configInput, opts = {}) {
         const bg = n.effectiveBackground ? parseColor(n.effectiveBackground) : null;
         if (fg && bg && fg.a > 0.05) {
           const blended = fg.a < 1 ? { r: fg.r * fg.a + bg.r * (1 - fg.a), g: fg.g * fg.a + bg.g * (1 - fg.a), b: fg.b * fg.a + bg.b * (1 - fg.a), a: 1 } : fg;
-          const ratio = contrastRatio(blended, bg);
+          const ratio2 = contrastRatio(blended, bg);
           const large = n.fontSize >= 24 || n.fontSize >= 18.66 && n.fontWeight >= 700;
           const min = large ? 3 : 4.5;
-          if (ratio < min) {
+          if (ratio2 < min) {
             const pair = `${colorLabel(fg)} on ${toHex(bg)}`;
             add(
               `contrast:${pair}:${large}`,
               {
                 ruleId: "text-contrast",
                 severity: "error",
-                message: (c) => `${pair} is ${ratio.toFixed(2)}:1, below ${min}:1${large ? " for large text" : ""} (${c} element${c === 1 ? "" : "s"})`,
+                message: (c) => `${pair} is ${ratio2.toFixed(2)}:1, below ${min}:1${large ? " for large text" : ""} (${c} element${c === 1 ? "" : "s"})`,
                 suggestion: "Use the Brand Kit's text colours on its background colours, e.g. fg.default on canvas.default",
                 sample: n.text
               },
@@ -1847,15 +2732,15 @@ var px2 = (v) => {
   const m = v.trim().match(/^(-?\d*\.?\d+)(px|rem)?$/);
   return m ? Number.parseFloat(m[1]) * (m[2] === "rem" ? 16 : 1) : null;
 };
-var nearest2 = (values, v) => values.reduce((best, x) => Math.abs(x - v) < Math.abs(best - v) ? x : best, values[0]);
+var nearest2 = (values, v) => values.reduce((best, x2) => Math.abs(x2 - v) < Math.abs(best - v) ? x2 : best, values[0]);
 function luminance(hex) {
   const n = hex.replace("#", "").slice(0, 6);
-  const [r, g, b] = [0, 2, 4].map((i) => parseInt(n.slice(i, i + 2), 16) / 255).map((c) => c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4);
+  const [r, g, b] = [0, 2, 4].map((i2) => parseInt(n.slice(i2, i2 + 2), 16) / 255).map((c) => c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4);
   return 0.2126 * r + 0.7152 * g + 0.0722 * b;
 }
 var contrast = (a, b) => {
-  const [x, y] = [luminance(a), luminance(b)].sort((p, q) => q - p);
-  return (x + 0.05) / (y + 0.05);
+  const [x2, y] = [luminance(a), luminance(b)].sort((p, q) => q - p);
+  return (x2 + 0.05) / (y + 0.05);
 };
 function onColor(bg, candidates) {
   return candidates.filter((c) => HEX.test(c)).sort((a, b) => contrast(b, bg) - contrast(a, bg))[0] ?? "#ffffff";
@@ -1895,7 +2780,7 @@ function scaleVars(s) {
 function colorVars(colors, dark, font) {
   const r = pickColorRoles(colors, dark);
   const find = (re) => {
-    const c = colors.find((x) => re.test(x.path));
+    const c = colors.find((x2) => re.test(x2.path));
     return c ? dark ? c.dark ?? c.value : c.value : void 0;
   };
   const success = find(/success/);
@@ -1945,8 +2830,126 @@ function kitBridgeCss(tokens, opts = {}) {
   return [block(sel.scale, scales), block(sel.light, colorVars(colors, false, sc.font)), block(sel.dark, colorVars(colors, true, sc.font))].filter(Boolean).join("\n");
 }
 
+// ../engine/src/brand-kit-audit.ts
+var ratio = (a, b) => {
+  const x2 = parseColor(a);
+  const y = parseColor(b);
+  return x2 && y ? Math.round(contrastRatio(x2, y) * 100) / 100 : 21;
+};
+var r1 = (n) => `${Math.round(n * 10) / 10}:1`;
+var STATUS = [
+  { key: "success", re: /success|positive/, label: "success", usedBy: "success notifications, checks and toggles" },
+  { key: "warning", re: /warning|attention|caution/, label: "warning", usedBy: "warning notifications and states" },
+  { key: "danger", re: /danger|error|critical|negative/, label: "danger / error", usedBy: "errors, destructive buttons and invalid fields" }
+];
+function auditBrandKit(tokens) {
+  const colors = flattenTokens(tokens).filter((t) => t.type === "color").map((t) => ({ path: t.path, value: t.value, dark: t.dark }));
+  const issues = [];
+  if (!colors.length) return issues;
+  const modes = colors.some((c) => c.dark) ? ["light", "dark"] : ["light"];
+  const light = pickColorRoles(colors, false);
+  for (const mode of modes) {
+    const dark = mode === "dark";
+    const r = pickColorRoles(colors, dark);
+    const where = modes.length > 1 ? ` (${mode} mode)` : "";
+    const paths = (...xs) => xs.filter((x2) => !!x2);
+    const text = ratio(r.fg.value, r.canvas.value);
+    if (text < 4.5) {
+      issues.push({
+        severity: "error",
+        code: "text-contrast",
+        mode,
+        paths: paths(r.fg.path, r.canvas.path),
+        message: `Body text on the page background is ${r1(text)}${where}. It needs at least 4.5:1 to be readable.`
+      });
+    }
+    const muted = ratio(r.muted.value, r.canvas.value);
+    if (muted < 4.5) {
+      issues.push({
+        severity: muted < 3 ? "error" : "warning",
+        code: "muted-contrast",
+        mode,
+        paths: paths(r.muted.path, r.canvas.path),
+        message: `Secondary text on the page background is ${r1(muted)}${where}. Captions and help text need 4.5:1; darken ${r.muted.path ?? "the muted colour"}.`
+      });
+    }
+    for (const [role, what] of [
+      ["primary", "primary buttons"],
+      ["danger", "destructive buttons"]
+    ]) {
+      if (!r[role].path) continue;
+      const fill = r[role].value;
+      const best = Math.max(ratio(light.canvas.value, fill), ratio(light.fg.value, fill));
+      if (best < 4.5) {
+        issues.push({
+          severity: best < 3 ? "error" : "warning",
+          code: "on-fill-contrast",
+          mode,
+          paths: [r[role].path],
+          message: `Labels on ${what} are at most ${r1(best)}${where}: neither your background nor your text colour reads well on ${fill}. Use a darker or lighter ${r[role].path} (4.5:1 for text).`
+        });
+      }
+    }
+    for (const [role, what] of [
+      ["primary", "ghost buttons, selected items and focus rings"],
+      ["accent", "links and highlights"]
+    ]) {
+      if (!r[role].path) continue;
+      const vs = ratio(r[role].value, r.canvas.value);
+      if (vs < 4.5) {
+        issues.push({
+          severity: vs < 3 ? "error" : "warning",
+          code: "status-contrast",
+          mode,
+          paths: [r[role].path],
+          message: `${r[role].path} (${r[role].value}) is ${r1(vs)} on the page background${where}. Components use it as text and outlines for ${what}, which need 4.5:1 for text and 3:1 for icons and borders. Darken it, or add a darker variant for text.`
+        });
+      }
+    }
+    for (const s of STATUS) {
+      const c = colors.find((x2) => s.re.test(x2.path));
+      if (!c) continue;
+      const value = dark ? c.dark ?? c.value : c.value;
+      const vs = ratio(value, r.canvas.value);
+      if (vs < 3) {
+        issues.push({
+          severity: "warning",
+          code: "status-contrast",
+          mode,
+          paths: [c.path],
+          message: `${c.path} (${value}) is ${r1(vs)} on the page background${where}: too light for text or icons (3:1 for icons, 4.5:1 for text). It's fine as a fill behind dark text; add a darker variant for text.`
+        });
+      }
+    }
+  }
+  if (!light.primary.path) {
+    issues.push({
+      severity: "warning",
+      code: "missing-color",
+      paths: [],
+      message: "No primary colour (e.g. color.action.primary). Buttons and links fall back to the kit's default green."
+    });
+  }
+  for (const s of STATUS) {
+    if (colors.some((x2) => s.re.test(x2.path))) continue;
+    issues.push({
+      severity: "warning",
+      code: "missing-color",
+      paths: [],
+      message: `No ${s.label} colour (e.g. color.status.${s.key}). It's used for ${s.usedBy}, which fall back to the kit's own colour instead of your brand.`
+    });
+  }
+  const seen = /* @__PURE__ */ new Set();
+  return issues.filter((i2) => {
+    const key = `${i2.code}:${i2.paths.join(",")}:${i2.message.replace(/ \((light|dark) mode\)/, "").replace(/[\d.]+:1/g, "")}`;
+    if (seen.has(key)) return false;
+    seen.add(key);
+    return true;
+  }).sort((a, b) => a.severity === b.severity ? 0 : a.severity === "error" ? -1 : 1);
+}
+
 // src/api.ts
-var DEFAULT_API = "https://web-phi-nine-77.vercel.app";
+var DEFAULT_API = "https://www.brandrail.com.au";
 function apiBase() {
   return (process.env.BRANDRAIL_API_URL ?? DEFAULT_API).replace(/\/$/, "");
 }
@@ -2057,7 +3060,7 @@ function parseChangedLines(diff) {
       const start = Number(h[1]);
       const count = h[2] === void 0 ? 1 : Number(h[2]);
       const set = out.get(file);
-      for (let i = 0; i < count; i++) set.add(start + i);
+      for (let i2 = 0; i2 < count; i2++) set.add(start + i2);
     }
   }
   return out;
@@ -2070,13 +3073,13 @@ function changedLines(cwd, base) {
 
 // src/scan.ts
 import { existsSync as existsSync2 } from "node:fs";
-import { createRequire } from "node:module";
+import { createRequire as createRequire2 } from "node:module";
 import { join as join2, resolve as resolve2 } from "node:path";
 function loadPlaywright(cwd) {
   for (const base of [join2(cwd, "package.json"), import.meta.url]) {
     for (const name of ["playwright", "playwright-core"]) {
       try {
-        return createRequire(base)(name);
+        return createRequire2(base)(name);
       } catch {
       }
     }
@@ -2132,7 +3135,7 @@ Usage
   brandrail check [paths...]   Scan files and print violations
   brandrail init               Create brandrail.config.json and AI rule files
   brandrail scan <url>         Check a running page (localhost, staging, behind a login) in a real browser
-  brandrail import <file>      Load tokens (DTCG, Tokens Studio, Figma variables JSON) into the config
+  brandrail import <files\u2026>   Load tokens into the config: DTCG, Tokens Studio, Figma variables JSON, or Figma's Export modes ZIP
   brandrail rules              List the rules
 
 Options for check
@@ -2148,6 +3151,7 @@ Options for init
   --no-rules             Don't write AGENTS.md (Codex), CLAUDE.md, Cursor, Copilot, Windsurf, Gemini rule files
   --mcp                  Also add the Brandrail MCP server to .mcp.json, .cursor/mcp.json, .vscode/mcp.json
                          and print the Codex / Windsurf config
+  --framework <name>     react | angular | vue | web-components | html (default: detected from package.json)
   --tokens-css <file>    Where to write the CSS variables (default src/brandrail.tokens.css); --no-tokens-css to skip
   --force                Overwrite an existing brandrail.config.json
 
@@ -2171,16 +3175,16 @@ function parseArgs(argv) {
   const [cmd = "help", ...rest] = argv;
   const positional = [];
   const flags = {};
-  for (let i = 0; i < rest.length; i++) {
-    const a = rest[i];
+  for (let i2 = 0; i2 < rest.length; i2++) {
+    const a = rest[i2];
     if (a.startsWith("--no-")) flags[a.slice(5)] = false;
     else if (a.startsWith("--")) {
       const [k, v] = a.slice(2).split("=", 2);
-      const next = rest[i + 1];
+      const next = rest[i2 + 1];
       if (v !== void 0) flags[k] = v;
-      else if (next !== void 0 && !next.startsWith("-") && ["config", "format", "fail-below", "changed", "pages", "storage-state", "wait", "width", "tokens-css"].includes(k)) {
+      else if (next !== void 0 && !next.startsWith("-") && ["config", "format", "fail-below", "changed", "pages", "storage-state", "wait", "width", "tokens-css", "framework"].includes(k)) {
         flags[k] = next;
-        i++;
+        i2++;
       } else flags[k] = true;
     } else positional.push(a);
   }
@@ -2280,7 +3284,7 @@ function writeRuleFiles(root, config, org, tokensCss) {
     if (file.endsWith(".mdc")) {
       write(file, () => `---
 description: Design system rules from Brandrail
-globs: ["**/*.{tsx,jsx,vue,svelte,html,css,scss}"]
+globs: ["**/*.{tsx,jsx,ts,vue,svelte,html,css,scss,php,twig,hbs,mustache}"]
 alwaysApply: true
 ---
 
@@ -2300,8 +3304,8 @@ ${md}
   }
   return written;
 }
-function writeMcpConfigs(root) {
-  const url = `${apiBase()}/api/mcp`;
+function writeMcpConfigs(root, framework) {
+  const url = `${apiBase()}/api/mcp${framework === "react" ? "" : `?framework=${framework}`}`;
   for (const c of mcpClientConfigs(url)) {
     if (!c.projectFile) continue;
     const abs = join3(root, c.file);
@@ -2315,7 +3319,7 @@ function writeMcpConfigs(root) {
         for (const [k, v] of Object.entries(ours)) {
           if (Array.isArray(v)) {
             const prev = Array.isArray(existing[k]) ? existing[k] : [];
-            merged[k] = [...prev.filter((x) => !v.some((y) => y.id === x.id)), ...v];
+            merged[k] = [...prev.filter((x2) => !v.some((y) => y.id === x2.id)), ...v];
           } else merged[k] = { ...existing[k] ?? {}, ...v };
         }
       } catch {
@@ -2327,7 +3331,7 @@ function writeMcpConfigs(root) {
 `);
     log(`\u2714 added brandrail to ${c.file}  (${c.name})`);
   }
-  for (const c of mcpClientConfigs(url).filter((x) => !x.projectFile)) {
+  for (const c of mcpClientConfigs(url).filter((x2) => !x2.projectFile)) {
     log(`
 ${c.name}: ${c.command ? `run
   ${c.command}
@@ -2336,6 +3340,21 @@ ${c.content.replace(/^/gm, "  ")}`);
   }
   log("\nSet BRANDRAIL_KEY in your shell (an API key from Dashboard \u2192 Connect) before starting the AI tool.");
 }
+function projectFramework(cwd, config, flags) {
+  const asked = flags.framework;
+  if (typeof asked === "string") {
+    if (!isFramework(asked)) throw new Error(`Unknown --framework "${asked}". Use one of: ${FRAMEWORKS.join(", ")}.`);
+    return asked;
+  }
+  if (config.framework && isFramework(config.framework)) return config.framework;
+  const pkg = join3(cwd, "package.json");
+  if (!existsSync3(pkg)) return detectFramework(null);
+  try {
+    return detectFramework(JSON.parse(readFileSync2(pkg, "utf8")));
+  } catch {
+    return "react";
+  }
+}
 async function cmdInit(cwd, flags) {
   const target = join3(cwd, CONFIG_FILE);
   let config = starterConfig;
@@ -2360,13 +3379,20 @@ async function cmdInit(cwd, flags) {
 `);
     log(`\u2714 wrote ${CONFIG_FILE}${org ? ` from ${org}'s Brand Kit` : " (starter tokens \u2014 edit them or use --from-api)"}`);
   }
+  const framework = projectFramework(cwd, config, flags);
+  if (config.framework !== framework) {
+    config = { ...config, framework };
+    writeFileSync(target, `${JSON.stringify(config, null, 2)}
+`);
+  }
+  log(`\u2714 framework: ${FRAMEWORK_LABEL[framework]}${flags.framework ? "" : " (detected; change with --framework)"}`);
   const css = flags["tokens-css"] === false ? void 0 : tokensCssPath(cwd, config, flags);
   if (css) {
     const kit = writeTokensCss(cwd, css, config, org);
     log(`\u2714 wrote ${css}  (the Brand Kit as CSS variables${kit ? ", and @brandrail/kit themed from it" : ""} \u2014 import it once at your app entry)`);
   }
   if (flags.rules !== false) for (const f of writeRuleFiles(cwd, config, org, css)) log(`\u2714 updated ${f}`);
-  if (flags.mcp) writeMcpConfigs(cwd);
+  if (flags.mcp) writeMcpConfigs(cwd, framework);
   log("\nNext: npx brandrail check");
   return 0;
 }
@@ -2374,7 +3400,7 @@ async function cmdScan(cwd, positional, flags) {
   const url = positional[0];
   if (!url) throw new Error("Usage: brandrail scan <url> [--pages 3] [--storage-state auth.json] [--upload]");
   const { config, source } = await loadConfig(cwd, flags);
-  const num = (k, d, max) => typeof flags[k] === "string" ? Math.min(Math.max(Number(flags[k]) || d, 0), max) : d;
+  const num = (k, d, max2) => typeof flags[k] === "string" ? Math.min(Math.max(Number(flags[k]) || d, 0), max2) : d;
   log(`Scanning ${url} \u2026`);
   const { report, pages } = await scanPages(
     cwd,
@@ -2423,11 +3449,31 @@ Brand score ${report.score} is below ${threshold}.`);
   }
   return 0;
 }
+function readTokenInputs(cwd, inputs) {
+  const files = [];
+  const add = (name, text) => files.push({ name, data: JSON.parse(text) });
+  const walk = (abs, rel) => {
+    if (statSync2(abs).isDirectory()) {
+      for (const e of readdirSync2(abs)) if (!e.startsWith(".")) walk(join3(abs, e), rel ? `${rel}/${e}` : e);
+    } else if (/\.zip$/i.test(abs)) {
+      const entries = unzipSync(new Uint8Array(readFileSync2(abs)), { filter: (e) => /\.json$/i.test(e.name) && !/(^|\/)(__MACOSX|\.)/.test(e.name) });
+      for (const [name, bytes] of Object.entries(entries)) add(name, strFromU8(bytes));
+    } else if (/\.json$/i.test(abs)) {
+      add(rel || basename(abs), readFileSync2(abs, "utf8"));
+    }
+  };
+  for (const input of inputs) {
+    const abs = resolve3(cwd, input);
+    walk(abs, statSync2(abs).isDirectory() ? "" : basename(abs));
+  }
+  return files;
+}
 function cmdImport(cwd, positional, flags) {
-  const file = positional[0];
-  if (!file) throw new Error("Usage: brandrail import <tokens.json> [--replace] [--primitives]");
-  const raw = JSON.parse(readFileSync2(resolve3(cwd, file), "utf8"));
-  const res = importTokens(raw, { includePrimitives: !!flags.primitives });
+  if (!positional.length) throw new Error("Usage: brandrail import <tokens.json | folder | export.zip> [more files\u2026] [--replace] [--primitives]");
+  const files = readTokenInputs(cwd, positional);
+  if (!files.length) throw new Error("No .json token files found.");
+  const res = importTokenFiles(files, { includePrimitives: !!flags.primitives });
+  const file = files.length === 1 ? positional[0] : `${files.length} files`;
   const path = (typeof flags.config === "string" ? resolve3(cwd, flags.config) : findConfig(cwd)) ?? join3(cwd, CONFIG_FILE);
   const config = existsSync3(path) ? readConfig(path) : { ...starterConfig, tokens: {} };
   const next = flags.replace ? res.tokens : mergeTokens(config.tokens, res.tokens);
@@ -2436,6 +3482,7 @@ function cmdImport(cwd, positional, flags) {
 `);
   log(`\u2714 ${res.count} tokens from ${file} (${res.format})${res.primitives ? `, ${res.primitives} palette primitives left out (--primitives to keep)` : ""}`);
   for (const n of res.notes) log(`  \xB7 ${n}`);
+  for (const i2 of auditBrandKit(next)) log(`  ${i2.severity === "error" ? "\u2716" : "!"} ${i2.message}`);
   log(`\u2714 ${relative2(cwd, path) || CONFIG_FILE}: ${d.changed.length} changed, ${d.added.length} added, ${d.removed.length} removed`);
   log("\nNext: npx brandrail init (to refresh AI rule files), then npx brandrail check");
   return 0;
@@ -2471,8 +3518,8 @@ async function main(argv = process.argv.slice(2)) {
 }
 main().then(
   (code) => process.exit(code),
-  (err) => {
-    log(`brandrail: ${err.message}`);
+  (err2) => {
+    log(`brandrail: ${err2.message}`);
     process.exit(2);
   }
 );