brandrail 0.3.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.3.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" } },
@@ -1280,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("");
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "brandrail",
-  "version": "0.3.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",