brandrail 0.2.0 → 0.3.1

package/dist/brandrail.mjs

@@ -484,6 +484,114 @@ var imgAlt = {
     return out;
   }
 };
+var NATIVE_ATTRS = new Set(
+  "id className style title role tabIndex hidden lang dir name value defaultValue defaultChecked checked disabled required readOnly autoFocus autoComplete placeholder type min max step maxLength minLength pattern form accept multiple href target rel download children".split(" ")
+);
+var ALWAYS_OK = /* @__PURE__ */ new Set(["key", "ref"]);
+function importedComponents(code, components) {
+  const out = /* @__PURE__ */ new Map();
+  for (const m of matches(/\bimport\s+(?:type\s+)?\{([^}]*)\}\s*from\s*(['"])([^'"]+)\2/g, code)) {
+    const from = m[3];
+    for (const part of m[1].split(",")) {
+      const [orig, alias] = part.trim().replace(/^type\s+/, "").split(/\s+as\s+/).map((s) => s.trim());
+      if (!orig) continue;
+      const comp = components.find((c) => c.name === orig && c.importPath === from && c.props?.length);
+      if (comp) out.set(alias || orig, comp);
+    }
+  }
+  return out;
+}
+function skipBalanced(code, i) {
+  const open = code[i];
+  if (open === '"' || open === "'") {
+    const end = code.indexOf(open, i + 1);
+    return end === -1 ? code.length : end + 1;
+  }
+  let depth = 0;
+  let quote = null;
+  for (let j = i; j < code.length; j++) {
+    const c = code[j];
+    if (quote) {
+      if (c === "\\") j++;
+      else if (c === quote) quote = null;
+      continue;
+    }
+    if (c === '"' || c === "'" || c === "`") quote = c;
+    else if (c === "{") depth++;
+    else if (c === "}" && --depth === 0) return j + 1;
+  }
+  return code.length;
+}
+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];
+    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 === "{") {
+      spread = true;
+      i = skipBalanced(code, i);
+      continue;
+    }
+    const name = /^[A-Za-z_$][\w$:.-]*/.exec(code.slice(i, i + 80))?.[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);
+    }
+  }
+  return null;
+}
+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 }) {
+    if (!config.components.some((c) => c.props?.length)) return [];
+    const imported = importedComponents(code, config.components);
+    if (imported.size === 0) return [];
+    const out = [];
+    const names = [...imported.keys()].map((n) => n.replace(/[$]/g, "\\$")).join("|");
+    for (const m of matches(new RegExp(`<(${names})(?=[\\s/>])`, "g"), code)) {
+      if (/[\w)\]]\s*$/.test(code.slice(Math.max(0, m.index - 20), m.index))) continue;
+      const comp = imported.get(m[1]);
+      const parsed = parseAttributes(code, m.index + m[0].length);
+      if (!parsed) continue;
+      const own = new Map(comp.props.map((p) => [p.name, p]));
+      const list = comp.props.map((p) => p.required ? `${p.name} (required)` : p.name).join(", ");
+      for (const a of parsed.attrs) {
+        if (own.has(a.name) || ALWAYS_OK.has(a.name) || a.name.includes("-")) continue;
+        if (comp.htmlAttributes && (NATIVE_ATTRS.has(a.name) || /^on[A-Z]/.test(a.name) || /^aria/.test(a.name))) continue;
+        const sibling = config.components.find(
+          (c) => c !== comp && c.importPath === comp.importPath && (c.name.startsWith(comp.name) || comp.name.startsWith(c.name)) && c.props?.some((p) => p.name === a.name)
+        );
+        out.push({
+          offset: a.offset,
+          message: `<${comp.name}> has no "${a.name}" prop`,
+          suggestion: sibling ? `Use <${sibling.name}>, which has "${a.name}", or remove it. ${comp.name} props: ${list}` : `Remove it. ${comp.name} props: ${list}`
+        });
+      }
+      if (!parsed.spread) {
+        const passed = new Set(parsed.attrs.map((a) => a.name));
+        for (const p of comp.props) {
+          if (!p.required || passed.has(p.name) || p.name === "children" && !parsed.selfClosing) continue;
+          out.push({ offset: m.index, message: `<${comp.name}> is missing the required "${p.name}" prop`, suggestion: `Add ${p.name}${p.type ? ` (${p.type})` : ""}` });
+        }
+      }
+    }
+    return out;
+  }
+};
 var RULES = [
   noHardcodedColor,
   noRawPaletteClass,
@@ -492,7 +600,8 @@ var RULES = [
   spacingScale,
   fontFamily,
   radiusScale,
-  imgAlt
+  imgAlt,
+  componentProps
 ];
 var RULE_IDS = RULES.map((r) => r.id);
 
@@ -604,7 +713,7 @@ function makeIgnore(globs) {
 }
 
 // ../engine/src/check.ts
-var ENGINE_VERSION = "0.2.0";
+var ENGINE_VERSION = "0.3.1";
 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;
@@ -765,7 +874,9 @@ var starterConfig = {
         subtle: { $type: "color", $value: "#f6f8fa", $description: "Headers, wells" }
       },
       border: { default: { $type: "color", $value: "#d1d9e0", $description: "Borders and dividers" } },
-      danger: { default: { $type: "color", $value: "#cf222e", $description: "Destructive actions, errors" } }
+      danger: { default: { $type: "color", $value: "#cf222e", $description: "Destructive actions, errors" } },
+      success: { default: { $type: "color", $value: "#1a7f37", $description: "Success messages, completed states" } },
+      attention: { default: { $type: "color", $value: "#9a6700", $description: "Warnings, needs attention" } }
     },
     font: {
       family: { sans: { $type: "fontFamily", $value: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif" } },
@@ -1252,6 +1363,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 +1375,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) {
@@ -1273,7 +1391,12 @@ function generateInstructions(config, opts = {}) {
     lines.push("Always use these components. Never re-create them with raw HTML elements:");
     for (const c of r.components) {
       const tags = [...r.replaces].filter(([, v]) => v === c).map(([t]) => `<${t}>`);
-      lines.push(`- \`${c.name}\` from \`${c.importPath}\`${tags.length ? ` (instead of ${tags.join(", ")})` : ""}`);
+      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)) {
+      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.");
     }
     lines.push("");
   }
@@ -1387,7 +1510,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 +1558,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 +1569,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 +1790,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 +2257,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 +2362,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.1",
   "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"
   }
-}
+}