@getcoherent/cli 0.5.8 → 0.5.9

package/dist/index.js

@@ -3613,6 +3613,16 @@ ANTI-PATTERNS (NEVER DO):
 - Mixing link styles on the same page \u2192 pick ONE style
 - Interactive elements without hover/focus states
 
+COMPONENT VARIANT RULES (CRITICAL):
+- NEVER use <Button> with custom bg-*/text-* classes for navigation or tabs without variant="ghost".
+  The default Button variant sets bg-primary, so custom text-muted-foreground or bg-accent classes will conflict.
+  BAD:  <Button className="text-muted-foreground hover:bg-accent">Tab</Button>
+  GOOD: <Button variant="ghost" className="text-muted-foreground">Tab</Button>
+  BEST: Use shadcn <Tabs> / <TabsList> / <TabsTrigger> for tab-style navigation.
+- For sidebar navigation buttons, ALWAYS use variant="ghost" with active-state classes:
+  <Button variant="ghost" className={cn("w-full justify-start", isActive && "bg-accent font-medium")}>
+- For filter toggle buttons, use variant={isActive ? 'default' : 'outline'} \u2014 NOT className toggling.
+
 CONTENT (zero placeholders):
 - NEVER: "Lorem ipsum", "Card content", "Description here"
 - ALWAYS: Real, contextual content. Realistic metric names, values, dates.
@@ -5060,6 +5070,121 @@ function fixGlobalsCss(projectRoot, config2) {
   writeFileSync7(layoutPath, layoutContent, "utf-8");
 }
 
+// src/utils/component-rules.ts
+function extractJsxElementProps(code, openTagStart) {
+  let i = openTagStart;
+  if (code[i] !== "<") return null;
+  i++;
+  let braceDepth = 0;
+  let inSingleQuote = false;
+  let inDoubleQuote = false;
+  let inTemplateLiteral = false;
+  let escaped = false;
+  while (i < code.length) {
+    const ch = code[i];
+    if (escaped) {
+      escaped = false;
+      i++;
+      continue;
+    }
+    if (ch === "\\" && (inSingleQuote || inDoubleQuote || inTemplateLiteral)) {
+      escaped = true;
+      i++;
+      continue;
+    }
+    if (!inDoubleQuote && !inTemplateLiteral && ch === "'" && braceDepth > 0) {
+      inSingleQuote = !inSingleQuote;
+    } else if (!inSingleQuote && !inTemplateLiteral && ch === '"') {
+      inDoubleQuote = !inDoubleQuote;
+    } else if (!inSingleQuote && !inDoubleQuote && ch === "`") {
+      inTemplateLiteral = !inTemplateLiteral;
+    }
+    if (!inSingleQuote && !inDoubleQuote && !inTemplateLiteral) {
+      if (ch === "{") braceDepth++;
+      else if (ch === "}") braceDepth--;
+      else if (ch === ">" && braceDepth === 0) {
+        return code.slice(openTagStart, i + 1);
+      }
+    }
+    i++;
+  }
+  return null;
+}
+var NAV_STYLE_SIGNAL = /text-muted-foreground/;
+var buttonMissingGhostVariant = {
+  id: "button-missing-ghost-variant",
+  component: "Button",
+  detect(code) {
+    const issues = [];
+    const buttonRe = /<Button\s/g;
+    let match;
+    while ((match = buttonRe.exec(code)) !== null) {
+      const props = extractJsxElementProps(code, match.index);
+      if (!props) continue;
+      if (/\bvariant\s*=/.test(props)) continue;
+      if (!NAV_STYLE_SIGNAL.test(props)) continue;
+      const line = code.slice(0, match.index).split("\n").length;
+      issues.push({
+        line,
+        type: "BUTTON_MISSING_VARIANT",
+        message: '<Button> with navigation-style classes (text-muted-foreground) but no variant \u2014 add variant="ghost"',
+        severity: "error"
+      });
+    }
+    return issues;
+  },
+  fix(code) {
+    let result = code;
+    let applied = false;
+    const buttonRe = /<Button\s/g;
+    let match;
+    let offset = 0;
+    while ((match = buttonRe.exec(code)) !== null) {
+      const adjustedIndex = match.index + offset;
+      const props = extractJsxElementProps(result, adjustedIndex);
+      if (!props) continue;
+      if (/\bvariant\s*=/.test(props)) continue;
+      if (!NAV_STYLE_SIGNAL.test(props)) continue;
+      const insertPos = adjustedIndex + "<Button".length;
+      const insertion = "\n" + getIndent(result, adjustedIndex) + '  variant="ghost"';
+      result = result.slice(0, insertPos) + insertion + result.slice(insertPos);
+      offset += insertion.length;
+      applied = true;
+    }
+    return {
+      code: result,
+      applied,
+      description: 'added variant="ghost" to Button with nav-style classes'
+    };
+  }
+};
+function getIndent(code, pos) {
+  const lineStart = code.lastIndexOf("\n", pos);
+  const lineContent = code.slice(lineStart + 1, pos);
+  const indentMatch = lineContent.match(/^(\s*)/);
+  return indentMatch ? indentMatch[1] : "";
+}
+var rules = [buttonMissingGhostVariant];
+function detectComponentIssues(code) {
+  const issues = [];
+  for (const rule of rules) {
+    issues.push(...rule.detect(code));
+  }
+  return issues;
+}
+function applyComponentRules(code) {
+  const fixes = [];
+  let result = code;
+  for (const rule of rules) {
+    const { code: fixed, applied, description } = rule.fix(result);
+    if (applied) {
+      result = fixed;
+      fixes.push(description);
+    }
+  }
+  return { code: result, fixes };
+}
+
 // src/utils/quality-validator.ts
 var RAW_COLOR_RE = /(?:(?:hover|focus|active|group-hover|focus-visible|focus-within):)?(?:bg|text|border|ring|outline|from|to|via)-(gray|blue|red|green|yellow|purple|pink|indigo|orange|slate|zinc|stone|neutral|emerald|teal|cyan|sky|violet|fuchsia|rose|amber|lime)-\d+/g;
 var HEX_IN_CLASS_RE = /className="[^"]*#[0-9a-fA-F]{3,8}[^"]*"/g;
@@ -5482,6 +5607,7 @@ function validatePageQuality(code, validRoutes) {
       severity: "error"
     });
   }
+  issues.push(...detectComponentIssues(code));
   return issues;
 }
 function replaceRawColors(classes, colorMap) {
@@ -5919,6 +6045,11 @@ ${selectImport}`
   if (fixed !== beforeLinkFix) {
     fixes.push("Link>Button \u2192 Button asChild>Link (DOM nesting fix)");
   }
+  const { code: fixedByRules, fixes: ruleFixes } = applyComponentRules(fixed);
+  if (ruleFixes.length > 0) {
+    fixed = fixedByRules;
+    fixes.push(...ruleFixes);
+  }
   fixed = fixed.replace(/className="([^"]*)"/g, (_match, inner) => {
     const cleaned = inner.replace(/\s{2,}/g, " ").trim();
     return `className="${cleaned}"`;
@@ -6944,7 +7075,29 @@ function extractAppNameFromPrompt(prompt) {
     const m = prompt.match(re);
     if (m && m[1] && m[1].length >= 2 && m[1].length <= 30) {
       const name = m[1].replace(/[.,;:!?]$/, "");
-      const skip = /* @__PURE__ */ new Set(["a", "an", "the", "my", "our", "new", "full", "complete", "simple", "modern", "beautiful", "responsive", "fast", "cool", "great", "basic", "quick", "small", "large", "custom", "nice"]);
+      const skip = /* @__PURE__ */ new Set([
+        "a",
+        "an",
+        "the",
+        "my",
+        "our",
+        "new",
+        "full",
+        "complete",
+        "simple",
+        "modern",
+        "beautiful",
+        "responsive",
+        "fast",
+        "cool",
+        "great",
+        "basic",
+        "quick",
+        "small",
+        "large",
+        "custom",
+        "nice"
+      ]);
       if (skip.has(name.toLowerCase())) continue;
       return name.charAt(0).toUpperCase() + name.slice(1);
     }

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.5.8",
+  "version": "0.5.9",
   "description": "CLI interface for Coherent Design Method",
   "type": "module",
   "main": "./dist/index.js",