@getcoherent/cli 0.5.7 → 0.5.9

package/dist/index.js

@@ -657,7 +657,8 @@ ${out}`;
   return out;
 }
 function sanitizeMetadataStrings(code) {
-  let out = code.replace(/(:\s*'.+)\\'(\s*)$/gm, "$1'$2");
+  let out = code.replace(/\\'(\s*[}\],])/g, "'$1");
+  out = out.replace(/(:\s*'.+)\\'(\s*)$/gm, "$1'$2");
   for (const key of ["description", "title"]) {
     const re = new RegExp(`\\b${key}:\\s*'((?:[^'\\\\]|'(?![,}]))*)'`, "gs");
     out = out.replace(re, (_, inner) => `${key}: '${inner.replace(/'/g, "\\'")}'`);
@@ -665,7 +666,9 @@ function sanitizeMetadataStrings(code) {
   return out;
 }
 function fixEscapedClosingQuotes(code) {
-  return code.replace(/(:\s*'.+)\\'(\s*)$/gm, "$1'$2");
+  let out = code.replace(/\\'(\s*[}\],])/g, "'$1");
+  out = out.replace(/(:\s*'.+)\\'(\s*)$/gm, "$1'$2");
+  return out;
 }
 function fixUnescapedLtInJsx(code) {
   let out = code;
@@ -3598,6 +3601,7 @@ LINKS & INTERACTIVE STATES (consistency is critical):
 
 ICONS:
 - Size: ALWAYS size-4 (16px). Color: ALWAYS text-muted-foreground. Import: ALWAYS from lucide-react.
+- ALWAYS add shrink-0 to icon className to prevent flex containers from squishing them.
 
 ANTI-PATTERNS (NEVER DO):
 - text-base as body text \u2192 use text-sm
@@ -3609,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.
@@ -5056,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;
@@ -5478,6 +5607,7 @@ function validatePageQuality(code, validRoutes) {
       severity: "error"
     });
   }
+  issues.push(...detectComponentIssues(code));
   return issues;
 }
 function replaceRawColors(classes, colorMap) {
@@ -5576,6 +5706,7 @@ async function autoFixCode(code) {
   const fixes = [];
   let fixed = code;
   const beforeQuoteFix = fixed;
+  fixed = fixed.replace(/\\'(\s*[}\],])/g, "'$1");
   fixed = fixed.replace(/(:\s*'.+)\\'(\s*)$/gm, "$1'$2");
   if (fixed !== beforeQuoteFix) {
     fixes.push("fixed escaped closing quotes in strings");
@@ -5886,6 +6017,23 @@ ${selectImport}`
       }
     }
   }
+  const lucideNamesMatch = fixed.match(/import\s*\{([^}]+)\}\s*from\s*["']lucide-react["']/);
+  if (lucideNamesMatch) {
+    const lucideNames = new Set(
+      lucideNamesMatch[1].split(",").map((s) => s.trim()).filter(Boolean)
+    );
+    const beforeShrinkFix = fixed;
+    for (const iconName of lucideNames) {
+      const iconRe = new RegExp(`(<${iconName}\\s[^>]*className=")([^"]*)(")`, "g");
+      fixed = fixed.replace(iconRe, (_m, pre, classes, post) => {
+        if (/\bshrink-0\b/.test(classes)) return _m;
+        return `${pre}${classes} shrink-0${post}`;
+      });
+    }
+    if (fixed !== beforeShrinkFix) {
+      fixes.push("added shrink-0 to icons");
+    }
+  }
   const linkWithButtonRe = /(<Link\b[^>]*>)\s*(<Button\b(?![^>]*asChild)[^>]*>)([\s\S]*?)<\/Button>\s*<\/Link>/g;
   const beforeLinkFix = fixed;
   fixed = fixed.replace(linkWithButtonRe, (_match, linkOpen, buttonOpen, inner) => {
@@ -5897,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}"`;
@@ -6779,6 +6932,10 @@ async function splitGeneratePages(spinner, message, modCtx, provider, parseOpts)
   } catch {
     spinner.text = "AI plan failed \u2014 extracting pages from your request...";
   }
+  if (modCtx.config.name === "My App") {
+    const nameFromPrompt = extractAppNameFromPrompt(message);
+    if (nameFromPrompt) modCtx.config.name = nameFromPrompt;
+  }
   if (pageNames.length === 0) {
     pageNames = extractPageNamesFromMessage(message);
   }
@@ -6908,6 +7065,45 @@ async function splitGeneratePages(spinner, message, modCtx, provider, parseOpts)
   spinner.succeed(`Phase 4/4 \u2014 Generated ${allRequests.length} pages (${withCode} with full code)`);
   return allRequests;
 }
+function extractAppNameFromPrompt(prompt) {
+  const patterns = [
+    /(?:called|named|app\s+name)\s+["']([^"']+)["']/i,
+    /(?:called|named|app\s+name)\s+(\S+)/i,
+    /\b(?:build|create|make)\s+(?:a\s+)?(\S+)\s+(?:app|platform|tool|dashboard|website|saas)/i
+  ];
+  for (const re of patterns) {
+    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"
+      ]);
+      if (skip.has(name.toLowerCase())) continue;
+      return name.charAt(0).toUpperCase() + name.slice(1);
+    }
+  }
+  return null;
+}
 
 // src/commands/chat/modification-handler.ts
 import { resolve as resolve7 } from "path";
@@ -7832,19 +8028,24 @@ async function applyModification(request, dsm, cm, pm, projectRoot, aiProvider,
       if (aiPageCode) {
         finalPageCode = aiPageCode;
         if (DEBUG2) console.log(chalk11.dim(`  [pageCode] Using AI-generated pageCode (user content priority)`));
-      } else if (page.pageType && page.structuredContent) {
-        const templateFn = getTemplateForPageType(page.pageType);
-        if (templateFn) {
-          try {
-            const pageName = (page.name || "Page").replace(/\s+/g, "");
-            const opts = {
-              route: page.route || `/${page.id || "page"}`,
-              pageName
-            };
-            finalPageCode = templateFn(page.structuredContent, opts);
-            if (DEBUG2) console.log(chalk11.dim(`  [template] Used "${page.pageType}" template (no pageCode provided)`));
-          } catch {
-            if (DEBUG2) console.log(chalk11.dim(`  [template] Failed for "${page.pageType}"`));
+      } else {
+        const inferredType = page.pageType || inferPageType(page.route || "", page.name || "");
+        if (inferredType) {
+          const templateFn = getTemplateForPageType(inferredType);
+          if (templateFn) {
+            try {
+              const pageName = (page.name || "Page").replace(/\s+/g, "");
+              const opts = {
+                route: page.route || `/${page.id || "page"}`,
+                pageName
+              };
+              const content = page.structuredContent || getDefaultContent(inferredType, page.name || pageName);
+              finalPageCode = templateFn(content, opts);
+              if (DEBUG2)
+                console.log(chalk11.dim(`  [template] Used "${inferredType}" template (inferred from route/name)`));
+            } catch {
+              if (DEBUG2) console.log(chalk11.dim(`  [template] Failed for "${inferredType}"`));
+            }
           }
         }
       }
@@ -8216,6 +8417,65 @@ ${pagesCtx}`
       };
   }
 }
+function inferPageType(route, name) {
+  const key = (route + " " + name).toLowerCase();
+  if (/\blogin\b|\bsign.?in\b/.test(key)) return "login";
+  if (/\bregister\b|\bsign.?up\b/.test(key)) return "register";
+  if (/\bdashboard\b/.test(key)) return "dashboard";
+  if (/\bpric(e|ing)\b/.test(key)) return "pricing";
+  if (/\bfaq\b/.test(key)) return "faq";
+  if (/\bcontact\b/.test(key)) return "contact";
+  if (/\bblog\b/.test(key)) return "blog";
+  if (/\bchangelog\b/.test(key)) return "changelog";
+  if (/\babout\b/.test(key)) return "about";
+  if (/\bsettings?\b/.test(key)) return "settings";
+  return null;
+}
+function getDefaultContent(pageType, pageName) {
+  const defaults = {
+    login: {
+      title: "Welcome back",
+      description: "Sign in to your account to continue"
+    },
+    register: {
+      title: "Create an account",
+      description: "Get started with your free account"
+    },
+    dashboard: {
+      title: "Dashboard",
+      description: `Welcome to your ${pageName} dashboard`
+    },
+    pricing: {
+      title: "Pricing",
+      description: "Choose the plan that works for you"
+    },
+    faq: {
+      title: "Frequently Asked Questions",
+      description: "Find answers to common questions"
+    },
+    contact: {
+      title: "Contact Us",
+      description: "Get in touch with our team"
+    },
+    blog: {
+      title: "Blog",
+      description: "Latest news, updates, and insights"
+    },
+    changelog: {
+      title: "Changelog",
+      description: "What's new and improved"
+    },
+    about: {
+      title: `About ${pageName}`,
+      description: "Learn more about our mission and team"
+    },
+    settings: {
+      title: "Settings",
+      description: "Manage your account and preferences"
+    }
+  };
+  return defaults[pageType] || { title: pageName, description: "" };
+}
 
 // src/utils/nav-snapshot.ts
 function takeNavSnapshot(items) {

package/package.json

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