brandrail 0.2.0 → 0.3.0

package/dist/brandrail.mjs

@@ -604,7 +604,7 @@ function makeIgnore(globs) {
 }
 
 // ../engine/src/check.ts
-var ENGINE_VERSION = "0.2.0";
+var ENGINE_VERSION = "0.3.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;
@@ -1252,6 +1252,7 @@ function mergeTokens(base, incoming) {
 }
 
 // ../engine/src/instructions.ts
+var KIT_PACKAGE = "@brandrail/kit";
 var RULES_START = "<!-- brandrail:start -->";
 var RULES_END = "<!-- brandrail:end -->";
 function generateInstructions(config, opts = {}) {
@@ -1263,9 +1264,15 @@ 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("");
-  if (opts.tokensCss) {
+  const usesKit = r.components.some((c) => c.importPath === KIT_PACKAGE);
+  if (opts.tokensCss || usesKit) {
     lines.push("## Setup");
-    lines.push(`- \`${opts.tokensCss}\` defines every CSS variable below (light and dark). Import it once at the app entry, before other styles. Don't edit it: it's generated from the Brand Kit.`);
+    if (opts.tokensCss) {
+      lines.push(`- \`${opts.tokensCss}\` defines every CSS variable below (light and dark). Import it once at the app entry, before other styles. Don't edit it: it's generated from the Brand Kit.`);
+    }
+    if (usesKit) {
+      lines.push(`- Import \`${KIT_PACKAGE}/styles.css\` once at the app entry. Pass \`theme="brandrail"\` to kit components, and \`colorMode={ColorMode.DARK}\` (from \`${KIT_PACKAGE}\`) for dark mode. The Brand Kit styles them through the CSS variables; don't override their colours, spacing or fonts with your own CSS.`);
+    }
     lines.push("");
   }
   if (r.components.length) {
@@ -1387,7 +1394,7 @@ var RULE_FILES = [
 // ../engine/src/rendered.ts
 function collectRenderedNodes(maxNodes = 3e3) {
   const SKIP = /* @__PURE__ */ new Set(["SCRIPT", "STYLE", "NOSCRIPT", "TEMPLATE", "IFRAME", "HEAD", "META", "LINK", "BR", "WBR", "SOURCE", "TRACK"]);
-  const px2 = (v) => {
+  const px3 = (v) => {
     const n = parseFloat(v);
     return Number.isFinite(n) ? Math.round(n * 100) / 100 : 0;
   };
@@ -1435,8 +1442,8 @@ function collectRenderedNodes(maxNodes = 3e3) {
     const r = el.getBoundingClientRect();
     if (r.width < 1 || r.height < 1) continue;
     const text = Array.from(el.childNodes).filter((n) => n.nodeType === 3).map((n) => n.textContent ?? "").join(" ").replace(/\s+/g, " ").trim();
-    const borderW = Math.max(px2(cs.borderTopWidth), px2(cs.borderRightWidth), px2(cs.borderBottomWidth), px2(cs.borderLeftWidth));
-    const borderSide = px2(cs.borderTopWidth) > 0 ? cs.borderTopColor : px2(cs.borderBottomWidth) > 0 ? cs.borderBottomColor : px2(cs.borderLeftWidth) > 0 ? cs.borderLeftColor : cs.borderRightColor;
+    const borderW = Math.max(px3(cs.borderTopWidth), px3(cs.borderRightWidth), px3(cs.borderBottomWidth), px3(cs.borderLeftWidth));
+    const borderSide = px3(cs.borderTopWidth) > 0 ? cs.borderTopColor : px3(cs.borderBottomWidth) > 0 ? cs.borderBottomColor : px3(cs.borderLeftWidth) > 0 ? cs.borderLeftColor : cs.borderRightColor;
     nodes.push({
       selector: selectorOf(el),
       tag: el.tagName.toLowerCase(),
@@ -1446,12 +1453,12 @@ function collectRenderedNodes(maxNodes = 3e3) {
       borderColor: borderW > 0 && cs.borderTopStyle !== "none" ? borderSide : void 0,
       effectiveBackground: effectiveBg(el),
       fontFamily: cs.fontFamily,
-      fontSize: px2(cs.fontSize),
+      fontSize: px3(cs.fontSize),
       fontWeight: parseInt(cs.fontWeight, 10) || 400,
-      radius: Math.max(px2(cs.borderTopLeftRadius), px2(cs.borderTopRightRadius), px2(cs.borderBottomLeftRadius), px2(cs.borderBottomRightRadius)),
+      radius: Math.max(px3(cs.borderTopLeftRadius), px3(cs.borderTopRightRadius), px3(cs.borderBottomLeftRadius), px3(cs.borderBottomRightRadius)),
       minSide: Math.round(Math.min(r.width, r.height)),
-      padding: [px2(cs.paddingTop), px2(cs.paddingRight), px2(cs.paddingBottom), px2(cs.paddingLeft)],
-      gap: cs.display.includes("flex") || cs.display.includes("grid") ? [px2(cs.rowGap), px2(cs.columnGap)] : []
+      padding: [px3(cs.paddingTop), px3(cs.paddingRight), px3(cs.paddingBottom), px3(cs.paddingLeft)],
+      gap: cs.display.includes("flex") || cs.display.includes("grid") ? [px3(cs.rowGap), px3(cs.columnGap)] : []
     });
   }
   const links = Array.from(document.querySelectorAll("a[href]")).map((a) => a.href).filter((h) => {
@@ -1667,6 +1674,161 @@ function generateTokensCss(tokens, opts = {}) {
 `;
 }
 
+// ../engine/src/kit-bridge.ts
+var ROLE_PATTERNS = {
+  canvas: [/canvas\.default$/, /^color\.(bg|background)(\.default)?$/, /surface(\.1|\.default)?$/, /canvas$/, /(bg|background)/],
+  subtle: [/canvas\.subtle$/, /(bg|background)\.subtle$/, /surface\.2$/, /fill\.1$/, /subtle$/],
+  fg: [/fg\.default$/, /text\.(default|primary|dark-primary)$/, /^color\.(fg|text|foreground)$/, /fg|text/],
+  muted: [/fg\.muted$/, /text\.(muted|secondary|dark-secondary)$/, /muted|secondary/],
+  border: [/border\.default$/, /^color\.(base\.)?border$/, /border/],
+  primary: [/action\.primary$/, /^color\.(brand\.)?primary$/, /brand(-active)?$/, /primary/, /brand/],
+  accent: [/accent(\.default)?$/, /link/, /info/, /accent/],
+  danger: [/danger(\.default|-active)?$/, /error/, /danger/]
+};
+var ROLE_FALLBACK = {
+  canvas: ["#ffffff", "#0d1117"],
+  subtle: ["#f6f8fa", "#151b23"],
+  fg: ["#1f2328", "#f0f6fc"],
+  muted: ["#59636e", "#9198a1"],
+  border: ["#d1d9e0", "#3d444d"],
+  primary: ["#1f883d", "#238636"],
+  accent: ["#0969da", "#4493f8"],
+  danger: ["#cf222e", "#f85149"]
+};
+var HEX = /^#(?:[0-9a-f]{6}|[0-9a-f]{8})$/i;
+function pickColorRoles(colors, dark = false) {
+  const out = {};
+  for (const role of Object.keys(ROLE_PATTERNS)) {
+    let hit;
+    for (const re of ROLE_PATTERNS[role]) {
+      hit = colors.find((c) => re.test(c.path) && HEX.test(c.value));
+      if (hit) break;
+    }
+    const fb = ROLE_FALLBACK[role][dark ? 1 : 0];
+    if (!hit) out[role] = { value: fb };
+    else if (!dark) out[role] = { value: hit.value, path: hit.path };
+    else if (hit.dark) out[role] = { value: hit.dark, path: hit.path };
+    else out[role] = role === "primary" || role === "accent" || role === "danger" ? { value: hit.value, path: hit.path } : { value: fb, path: hit.path };
+  }
+  return out;
+}
+var KIT_SPACING = { 3: 4, 4: 6, 5: 8, 6: 10, 7: 12, 8: 16, 9: 20, 10: 24, 11: 28, 12: 32, 13: 36, 14: 40, 15: 44, 16: 48, 17: 56, 18: 64 };
+var KIT_RADIUS = { 1: 2, 2: 4, 3: 6, 4: 8, 5: 10, 6: 12, 7: 16, 8: 22, 9: 28 };
+var KIT_RADIUS_NAME = { 2: "sm", 3: "md", 6: "lg" };
+var KIT_TYPE = [
+  ["Xs", 12, 18],
+  ["Sm", 14, 22],
+  ["Base", 16, 24],
+  ["Md", 16, 24],
+  ["Lg", 18, 28],
+  ["Xl", 20, 32],
+  ["2xl", 24, 38],
+  ["3xl", 30, 42],
+  ["4xl", 36, 52]
+];
+var KIT_THEMES = ["brandrail", "themeA", "themeB"];
+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]);
+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);
+  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);
+};
+function onColor(bg, candidates) {
+  return candidates.filter((c) => HEX.test(c)).sort((a, b) => contrast(b, bg) - contrast(a, bg))[0] ?? "#ffffff";
+}
+function scalesOf(flat) {
+  const leaf = (p) => p.split(".").pop();
+  const spacing = flat.filter((t) => /^(space|spacing)\./.test(t.path) && !/\.unit$/.test(t.path)).map((t) => px2(t.value)).filter((v) => v !== null && v > 0 && v < 999);
+  const unit = flat.find((t) => /^space\.unit$/.test(t.path));
+  if (!spacing.length && unit && px2(unit.value)) for (const m of [0.5, 1, 1.5, 2, 3, 4, 5, 6]) spacing.push(px2(unit.value) * m);
+  const radii = flat.filter((t) => /^radius\./.test(t.path)).map((t) => ({ name: leaf(t.path), value: px2(t.value) ?? -1 })).filter((r) => r.value > 0 && r.value < 999);
+  const lineHeights = new Map(flat.filter((t) => /^font\.line-height\./.test(t.path)).map((t) => [leaf(t.path), px2(t.value) ?? void 0]));
+  const type = flat.filter((t) => /^font\.size\./.test(t.path)).map((t) => ({ name: leaf(t.path), size: px2(t.value) ?? 0, lineHeight: lineHeights.get(leaf(t.path)) })).filter((t) => t.size > 0);
+  const font = flat.find((t) => t.type === "fontFamily" || /^font\.family\./.test(t.path))?.value;
+  return { spacing, radii, type, font };
+}
+function scaleVars(s) {
+  const out = [];
+  if (s.spacing.length) for (const [n, v] of Object.entries(KIT_SPACING)) out.push(`--spacing${n}: ${nearest2(s.spacing, v)}px;`);
+  if (s.radii.length) {
+    const values = s.radii.map((r) => r.value);
+    for (const [n, v] of Object.entries(KIT_RADIUS)) {
+      const named = s.radii.find((r) => r.name === KIT_RADIUS_NAME[Number(n)]);
+      out.push(`--defaultRadius-rad${n}: ${named ? named.value : nearest2(values, v)}px;`);
+    }
+  }
+  if (s.type.length) {
+    const sizes = s.type.map((t) => t.size);
+    for (const [name, size, lh] of KIT_TYPE) {
+      const step = s.type.find((t) => t.name.toLowerCase() === name.toLowerCase()) ?? s.type.find((t) => t.size === nearest2(sizes, size));
+      out.push(`--fontA-fontSize${name}: ${step.size}px;`, `--fontA-lineHeight${name}: ${step.lineHeight ?? Math.round(step.size * lh / size)}px;`);
+    }
+    const base = s.type.find((t) => t.name === "base") ?? s.type.find((t) => t.size === nearest2(sizes, 14));
+    out.push(`--fontSizeBase: ${base.size}px;`);
+  }
+  return out;
+}
+function colorVars(colors, dark, font) {
+  const r = pickColorRoles(colors, dark);
+  const find = (re) => {
+    const c = colors.find((x) => re.test(x.path));
+    return c ? dark ? c.dark ?? c.value : c.value : void 0;
+  };
+  const success = find(/success/);
+  const warning = find(/warning|attention/);
+  const mix = (a, b, pct) => `color-mix(in srgb, ${a} ${pct}%, ${b})`;
+  const v = {
+    baseSurface1: r.canvas.value,
+    baseSurface2: r.subtle.value,
+    baseSurface3: mix(r.subtle.value, r.border.value, 70),
+    baseFill1: r.subtle.value,
+    baseFill2: mix(r.subtle.value, r.border.value, 50),
+    baseFill3: r.border.value,
+    baseFill4: mix(r.muted.value, r.border.value, 60),
+    baseFill5: r.muted.value,
+    baseBorder: r.border.value,
+    baseDisabled: mix(r.fg.value, "transparent", 28),
+    textDarkPrimary: r.fg.value,
+    textDarkSecondary: r.muted.value,
+    textDarkTertiary: mix(r.muted.value, r.canvas.value, 75),
+    textLightPrimary: onColor(r.primary.value, [pickColorRoles(colors, false).canvas.value, pickColorRoles(colors, false).fg.value]),
+    stateBrandActive: r.primary.value,
+    stateBrandHover: mix(r.primary.value, "black", 88),
+    stateBrandSelected: mix(r.primary.value, "black", 75),
+    stateDangerActive: r.danger.value,
+    stateDangerHover: mix(r.danger.value, "black", 85),
+    stateDangerSelected: mix(r.danger.value, r.canvas.value, 14),
+    stateHighlightActive: r.accent.value,
+    stateHighlightHover: mix(r.accent.value, r.canvas.value, 85),
+    stateHighlightSelected: mix(r.accent.value, r.canvas.value, 14)
+  };
+  if (success) Object.assign(v, { stateSuccessActive: success, stateSuccessHover: mix(success, "black", 88), stateSuccessSelected: mix(success, r.canvas.value, 14) });
+  if (warning) Object.assign(v, { stateWarningActive: warning, stateWarningHover: mix(warning, "black", 88), stateWarningSelected: mix(warning, r.canvas.value, 14) });
+  if (font) Object.assign(v, { "fontA-fontFamily": font, "fontB-fontFamily": font });
+  return Object.entries(v).map(([k, val]) => `--${k}: ${val};`);
+}
+function kitBridgeCss(tokens, opts = {}) {
+  const flat = flattenTokens(tokens);
+  const colors = flat.filter((t) => t.type === "color").map((t) => ({ path: t.path, value: t.value, dark: t.dark }));
+  const sc = scalesOf(flat);
+  const scales = scaleVars(sc);
+  const block = (sel2, lines) => lines.length ? `${sel2} {
+  ${lines.join("\n  ")}
+}` : "";
+  const themes = `:is(${KIT_THEMES.map((t) => `.${t}`).join(", ")})`;
+  const s = opts.scope;
+  const sel = s ? { scale: s, light: `${s}, ${s} .light`, dark: `${s} .dark, ${s}.dark` } : { scale: "html:root", light: `html:root, html:root ${themes}.light`, dark: `html:root ${themes}.dark` };
+  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");
+}
+
 // src/api.ts
 var DEFAULT_API = "https://web-phi-nine-77.vercel.app";
 function apiBase() {
@@ -1979,7 +2141,14 @@ function tokensCssPath(root, config, flags) {
 function writeTokensCss(root, rel, config, org) {
   const abs = join3(root, rel);
   mkdirSync(dirname2(abs), { recursive: true });
-  writeFileSync(abs, generateTokensCss(config.tokens, { version: config.tokenVersion, org }));
+  let css = generateTokensCss(config.tokens, { version: config.tokenVersion, org });
+  const usesKit = (config.components ?? []).some((c) => c.importPath === "@brandrail/kit");
+  if (usesKit) css += `
+/* @brandrail/kit follows the Brand Kit: colours, font, spacing, radius and type scale. */
+${kitBridgeCss(config.tokens)}
+`;
+  writeFileSync(abs, css);
+  return usesKit;
 }
 function writeRuleFiles(root, config, org, tokensCss) {
   const md = generateInstructions(config, { org, tokensCss });
@@ -2077,8 +2246,8 @@ async function cmdInit(cwd, flags) {
   }
   const css = flags["tokens-css"] === false ? void 0 : tokensCssPath(cwd, config, flags);
   if (css) {
-    writeTokensCss(cwd, css, config, org);
-    log(`\u2714 wrote ${css}  (the Brand Kit as CSS variables \u2014 import it once at your app entry)`);
+    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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "brandrail",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Keep AI-generated UI on-brand: checks code and live pages against your design system, and wires your Brand Kit into Claude Code, Cursor, Copilot and Codex.",
   "keywords": [
     "design-system",
@@ -35,16 +35,15 @@
   "publishConfig": {
     "access": "public"
   },
-  "scripts": {
-    "build": "esbuild src/index.ts --bundle --platform=node --target=node18 --format=esm --outfile=dist/brandrail.mjs --external:playwright --external:playwright-core --banner:js='#!/usr/bin/env node' && chmod +x dist/brandrail.mjs",
-    "typecheck": "tsc --noEmit",
-    "prepublishOnly": "pnpm run build"
-  },
   "devDependencies": {
-    "@brandrail/engine": "workspace:*",
     "@types/node": "^22",
     "esbuild": "^0.28.2",
     "playwright-core": "1.63.0",
-    "typescript": "5.9.3"
+    "typescript": "5.9.3",
+    "@brandrail/engine": "0.1.0"
+  },
+  "scripts": {
+    "build": "esbuild src/index.ts --bundle --platform=node --target=node18 --format=esm --outfile=dist/brandrail.mjs --external:playwright --external:playwright-core --banner:js='#!/usr/bin/env node' && chmod +x dist/brandrail.mjs",
+    "typecheck": "tsc --noEmit"
   }
-}
+}