@getcoherent/cli 0.5.4 → 0.5.5

package/dist/index.js

@@ -3909,6 +3909,7 @@ DROPDOWN MENU:
 - Item text: text-sm. Icon before text: size-4 mr-2.
 - Group related items with DropdownMenuSeparator.
 - Destructive item: className="text-destructive" at bottom, separated.
+- NON-DESTRUCTIVE items: NEVER apply text color classes. Use default text-foreground. No text-amber, text-orange, text-yellow on menu items.
 - Keyboard shortcut hint: <DropdownMenuShortcut>\u2318K</DropdownMenuShortcut>.
 - Max items without scroll: 8. For more, use Command palette.
 - Trigger: Button variant="ghost" size="icon" for icon-only, variant="outline" for labeled.
@@ -4284,7 +4285,8 @@ async function parseModification(message, context, provider = "auto", options) {
     const prompt2 = buildPlanOnlyPrompt(message, context.config);
     const raw2 = await ai.parseModification(prompt2);
     const requestsArray2 = Array.isArray(raw2) ? raw2 : raw2?.requests ?? [];
-    return { requests: requestsArray2, uxRecommendations: void 0 };
+    const navigation = !Array.isArray(raw2) && raw2?.navigation ? raw2.navigation : void 0;
+    return { requests: requestsArray2, uxRecommendations: void 0, navigation };
   }
   const componentRegistry = buildComponentRegistry(context.componentManager);
   let enhancedMessage = message;
@@ -4341,7 +4343,10 @@ Return ONLY a JSON object with this structure (no pageCode, no sections, no cont
 {
   "requests": [
     { "type": "add-page", "target": "new", "changes": { "id": "page-id", "name": "Page Name", "route": "/page-route" } }
-  ]
+  ],
+  "navigation": {
+    "type": "header"
+  }
 }
 
 Rules:
@@ -4349,6 +4354,10 @@ Rules:
 - Route must start with /
 - Keep response under 500 tokens
 - Do NOT include pageCode, sections, or any other fields
+- Navigation type: Detect from user's request and include in response:
+  * "sidebar" \u2014 if user mentions sidebar, side menu, left panel, admin panel, or app has 6+ main sections
+  * "header" \u2014 if user mentions top navigation, header nav, or app is simple (< 6 sections). This is the default.
+  * "both" \u2014 if complex multi-level app needs both header and sidebar navigation
 - Include ALL pages the user explicitly requested
 - ALSO include logically related pages that a real app would need. For example:
   * If there is a catalog/listing page, add a detail page (e.g. /products \u2192 /products/[id])
@@ -4487,6 +4496,7 @@ LAYOUT CONTRACT (CRITICAL \u2014 prevents duplicate navigation and footer):
 - The app has a root layout (app/layout.tsx) that renders a shared Header and Footer.
 - Pages are rendered INSIDE this layout, between the Header and Footer.
 - NEVER include <header>, <nav>, or <footer> elements in pageCode. Also do NOT add a footer-like section at the bottom (no "\xA9 2024", no site links, no logo + nav links at the bottom).
+- NEVER generate a sidebar panel, navigation column, or left-side navigation inside pageCode. Sidebar navigation is handled by the layout system via shared Sidebar component. If the user mentions "sidebar", it will be rendered by app/(app)/layout.tsx \u2014 do NOT recreate it in page code.
 - If the page needs sub-navigation (tabs, breadcrumbs, sidebar nav), use elements like <div role="tablist"> or <aside> \u2014 NOT <header>, <nav>, or <footer>.
 - Do NOT add any navigation bars, logo headers, site-wide menus, or site footers to pages. The layout provides all of these.
 
@@ -4503,7 +4513,7 @@ PAGE CONTENT (CRITICAL \u2014 prevents empty or duplicate pages):
 - Every page MUST have substantial content. NEVER generate a page with only metadata and an empty <main> element.
 - NEVER create an inline preview/demo of another page (e.g., embedding a "dashboard view" inside the landing page with a toggle). Each page should be its own route.
 - NEVER create a single-page app (SPA) that renders multiple views via useState. Each view must be a separate Next.js page with its own route.
-- The home page (route "/") should be a simple redirect using next/navigation redirect('/dashboard') \u2014 OR a standalone landing page. NEVER a multi-view SPA.
+- The home page (route "/"): When BOTH "/" and "/dashboard" exist, "/" MUST be a full landing page with hero section, features, pricing, and CTA buttons linking to /login and /register \u2014 NOT a redirect. When "/" is the ONLY main page, it can be a redirect to /dashboard. NEVER a multi-view SPA.
 - Landing pages should link to app pages via <Link href="/dashboard">, NOT via useState toggles that render inline content.
 
 pageCode rules (shadcn/ui blocks quality):
@@ -4515,6 +4525,7 @@ pageCode rules (shadcn/ui blocks quality):
 - No placeholders: real contextual copy only. Use the EXACT text, language, and content from the user's request.
 - IMAGES: For avatar/profile photos, use https://i.pravatar.cc/150?u=<unique-seed> (e.g. ?u=sarah.johnson). For hero/product images, use https://picsum.photos/800/400?random=N. Use standard <img> tags with className, NOT Next.js <Image>. Always provide alt text.
 - BUTTON + LINK: The Button component supports asChild prop. To make a button that navigates, use <Button asChild><Link href="/path"><Plus className="size-4" /> Label</Link></Button>. Never nest <button> inside <Link> or vice versa without asChild.
+- DOM NESTING: NEVER nest interactive elements. No <Button> inside <Link>, no <a> inside <a>, no <button> inside <button>. For clickable cards containing internal buttons, use onClick on the card wrapper \u2014 NOT <Link> wrapping the entire card.
 - Hover/focus on every interactive element (hover:bg-muted, focus-visible:ring-2 focus-visible:ring-ring).
 - LANGUAGE: Match the language of the user's request. English request \u2192 English page. Russian request \u2192 Russian page. Never switch languages.
 - NEVER use native HTML <select> or <option>. Always use Select, SelectTrigger, SelectValue, SelectContent, SelectItem from @/components/ui/select.
@@ -4705,7 +4716,7 @@ var AUTH_LAYOUT = `export default function AuthLayout({
   children: React.ReactNode
 }) {
   return (
-    <div className="min-h-svh bg-muted">
+    <div className="min-h-svh bg-muted flex items-center justify-center p-4">
       {children}
     </div>
   )
@@ -5308,13 +5319,14 @@ function validatePageQuality(code, validRoutes) {
     });
   }
   const headingLevels = [...code.matchAll(/<h([1-6])[\s>]/g)].map((m) => parseInt(m[1]));
+  const hasCardContext = /\bCard\b|\bCardTitle\b|\bCardHeader\b/.test(code);
   for (let i = 1; i < headingLevels.length; i++) {
     if (headingLevels[i] > headingLevels[i - 1] + 1) {
       issues.push({
         line: 0,
         type: "SKIPPED_HEADING",
         message: `Heading level skipped: h${headingLevels[i - 1]} \u2192 h${headingLevels[i]} \u2014 don't skip levels`,
-        severity: "warning"
+        severity: hasCardContext ? "info" : "warning"
       });
       break;
     }
@@ -5441,8 +5453,115 @@ function validatePageQuality(code, validRoutes) {
       }
     }
   }
+  const linkBlockRe = /<(?:Link|a)\b[^>]*>[\s\S]*?<\/(?:Link|a)>/g;
+  let linkMatch;
+  while ((linkMatch = linkBlockRe.exec(code)) !== null) {
+    const block = linkMatch[0];
+    if (/<(?:Button|button)\b/.test(block) && !/asChild/.test(block)) {
+      issues.push({
+        line: 0,
+        type: "NESTED_INTERACTIVE",
+        message: "Button inside Link without asChild \u2014 causes DOM nesting error. Use <Button asChild><Link>...</Link></Button> instead",
+        severity: "error"
+      });
+      break;
+    }
+  }
+  const nestedAnchorRe = /<a\b[^>]*>[\s\S]*?<a\b/;
+  if (nestedAnchorRe.test(code)) {
+    issues.push({
+      line: 0,
+      type: "NESTED_INTERACTIVE",
+      message: "Nested <a> tags \u2014 causes DOM nesting error. Remove inner anchor or restructure",
+      severity: "error"
+    });
+  }
   return issues;
 }
+function replaceRawColors(classes, colorMap) {
+  let changed = false;
+  let result = classes;
+  const accentColorRe = /\b(bg|text|border)-(emerald|blue|violet|indigo|purple|teal|cyan|sky|rose|amber|red|green|yellow|pink|orange|fuchsia|lime)-(\d+)\b/g;
+  result = result.replace(accentColorRe, (m, prefix, color, shade) => {
+    if (colorMap[m]) {
+      changed = true;
+      return colorMap[m];
+    }
+    const n = parseInt(shade);
+    const isDestructive = color === "red";
+    if (prefix === "bg") {
+      if (n >= 500 && n <= 700) {
+        changed = true;
+        return isDestructive ? "bg-destructive" : "bg-primary";
+      }
+      if (n >= 100 && n <= 200) {
+        changed = true;
+        return isDestructive ? "bg-destructive/10" : "bg-primary/10";
+      }
+      if (n >= 300 && n <= 400) {
+        changed = true;
+        return isDestructive ? "bg-destructive/20" : "bg-primary/20";
+      }
+      if (n >= 800) {
+        changed = true;
+        return "bg-muted";
+      }
+    }
+    if (prefix === "text") {
+      if (n >= 400 && n <= 600) {
+        changed = true;
+        return isDestructive ? "text-destructive" : "text-primary";
+      }
+      if (n >= 100 && n <= 300) {
+        changed = true;
+        return "text-foreground";
+      }
+      if (n >= 700) {
+        changed = true;
+        return "text-foreground";
+      }
+    }
+    if (prefix === "border") {
+      changed = true;
+      return isDestructive ? "border-destructive" : "border-primary";
+    }
+    return m;
+  });
+  const neutralColorRe = /\b(bg|text|border)-(zinc|slate|gray|neutral|stone)-(\d+)\b/g;
+  result = result.replace(neutralColorRe, (m, prefix, _color, shade) => {
+    if (colorMap[m]) {
+      changed = true;
+      return colorMap[m];
+    }
+    const n = parseInt(shade);
+    if (prefix === "bg") {
+      if (n >= 800) {
+        changed = true;
+        return "bg-background";
+      }
+      if (n >= 100 && n <= 300) {
+        changed = true;
+        return "bg-muted";
+      }
+    }
+    if (prefix === "text") {
+      if (n >= 100 && n <= 300) {
+        changed = true;
+        return "text-foreground";
+      }
+      if (n >= 400 && n <= 600) {
+        changed = true;
+        return "text-muted-foreground";
+      }
+    }
+    if (prefix === "border") {
+      changed = true;
+      return "border-border";
+    }
+    return m;
+  });
+  return { result, changed };
+}
 async function autoFixCode(code) {
   const fixes = [];
   let fixed = code;
@@ -5596,89 +5715,34 @@ ${fixed}`;
   fixed = fixed.replace(/className="([^"]*)"/g, (fullMatch, classes, offset) => {
     if (isCodeContext(classes)) return fullMatch;
     if (isInsideTerminalBlock(offset)) return fullMatch;
-    let result = classes;
-    const accentColorRe = /\b(bg|text|border)-(emerald|blue|violet|indigo|purple|teal|cyan|sky|rose|amber|red|green|yellow|pink|orange|fuchsia|lime)-(\d+)\b/g;
-    result = result.replace(accentColorRe, (m, prefix, color, shade) => {
-      if (colorMap[m]) {
-        hadColorFix = true;
-        return colorMap[m];
-      }
-      const n = parseInt(shade);
-      const isDestructive = color === "red";
-      if (prefix === "bg") {
-        if (n >= 500 && n <= 700) {
-          hadColorFix = true;
-          return isDestructive ? "bg-destructive" : "bg-primary";
-        }
-        if (n >= 100 && n <= 200) {
-          hadColorFix = true;
-          return isDestructive ? "bg-destructive/10" : "bg-primary/10";
-        }
-        if (n >= 300 && n <= 400) {
-          hadColorFix = true;
-          return isDestructive ? "bg-destructive/20" : "bg-primary/20";
-        }
-        if (n >= 800) {
-          hadColorFix = true;
-          return "bg-muted";
-        }
-      }
-      if (prefix === "text") {
-        if (n >= 400 && n <= 600) {
-          hadColorFix = true;
-          return isDestructive ? "text-destructive" : "text-primary";
-        }
-        if (n >= 100 && n <= 300) {
-          hadColorFix = true;
-          return "text-foreground";
-        }
-        if (n >= 700) {
-          hadColorFix = true;
-          return "text-foreground";
-        }
-      }
-      if (prefix === "border") {
-        hadColorFix = true;
-        return isDestructive ? "border-destructive" : "border-primary";
-      }
-      return m;
-    });
-    const neutralColorRe = /\b(bg|text|border)-(zinc|slate|gray|neutral|stone)-(\d+)\b/g;
-    result = result.replace(neutralColorRe, (m, prefix, _color, shade) => {
-      if (colorMap[m]) {
-        hadColorFix = true;
-        return colorMap[m];
-      }
-      const n = parseInt(shade);
-      if (prefix === "bg") {
-        if (n >= 800) {
-          hadColorFix = true;
-          return "bg-background";
-        }
-        if (n >= 100 && n <= 300) {
-          hadColorFix = true;
-          return "bg-muted";
-        }
-      }
-      if (prefix === "text") {
-        if (n >= 100 && n <= 300) {
-          hadColorFix = true;
-          return "text-foreground";
-        }
-        if (n >= 400 && n <= 600) {
-          hadColorFix = true;
-          return "text-muted-foreground";
-        }
-      }
-      if (prefix === "border") {
-        hadColorFix = true;
-        return "border-border";
-      }
-      return m;
-    });
+    const { result, changed } = replaceRawColors(classes, colorMap);
+    if (changed) hadColorFix = true;
     if (result !== classes) return `className="${result}"`;
     return fullMatch;
   });
+  fixed = fixed.replace(/(?:cn|clsx|cva)\(([^()]*(?:\([^()]*\)[^()]*)*)\)/g, (fullMatch, args) => {
+    const replaced = args.replace(/"([^"]*)"/g, (_qm, inner) => {
+      const { result, changed } = replaceRawColors(inner, colorMap);
+      if (changed) hadColorFix = true;
+      return `"${result}"`;
+    });
+    if (replaced !== args) return fullMatch.replace(args, replaced);
+    return fullMatch;
+  });
+  fixed = fixed.replace(/className='([^']*)'/g, (fullMatch, classes, offset) => {
+    if (isCodeContext(classes)) return fullMatch;
+    if (isInsideTerminalBlock(offset)) return fullMatch;
+    const { result, changed } = replaceRawColors(classes, colorMap);
+    if (changed) hadColorFix = true;
+    if (result !== classes) return `className='${result}'`;
+    return fullMatch;
+  });
+  fixed = fixed.replace(/className=\{`([^`]*)`\}/g, (fullMatch, inner) => {
+    const { result, changed } = replaceRawColors(inner, colorMap);
+    if (changed) hadColorFix = true;
+    if (result !== inner) return `className={\`${result}\`}`;
+    return fullMatch;
+  });
   if (hadColorFix) fixes.push("raw colors \u2192 semantic tokens");
   const selectRe = /<select\b[^>]*>([\s\S]*?)<\/select>/g;
   let hadSelectFix = false;
@@ -5812,6 +5876,17 @@ ${selectImport}`
       }
     }
   }
+  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) => {
+    const hrefMatch = linkOpen.match(/href="([^"]*)"/);
+    const href = hrefMatch ? hrefMatch[1] : "/";
+    const buttonWithAsChild = buttonOpen.replace("<Button", "<Button asChild");
+    return `${buttonWithAsChild}<Link href="${href}">${inner.trim()}</Link></Button>`;
+  });
+  if (fixed !== beforeLinkFix) {
+    fixes.push("Link>Button \u2192 Button asChild>Link (DOM nesting fix)");
+  }
   fixed = fixed.replace(/className="([^"]*)"/g, (_match, inner) => {
     const cleaned = inner.replace(/\s{2,}/g, " ").trim();
     return `className="${cleaned}"`;
@@ -6662,6 +6737,14 @@ function extractStyleContext(pageCode) {
   return `STYLE CONTEXT (match these patterns exactly for visual consistency with the Home page):
 ${lines.map((l) => `  - ${l}`).join("\n")}`;
 }
+var VALID_NAV_TYPES = /* @__PURE__ */ new Set(["header", "sidebar", "both"]);
+function parseNavTypeFromPlan(planResult) {
+  const nav = planResult.navigation;
+  if (nav && typeof nav.type === "string" && VALID_NAV_TYPES.has(nav.type)) {
+    return nav.type;
+  }
+  return "header";
+}
 async function splitGeneratePages(spinner, message, modCtx, provider, parseOpts) {
   let pageNames = [];
   spinner.start("Phase 1/4 \u2014 Planning pages...");
@@ -6675,6 +6758,10 @@ async function splitGeneratePages(spinner, message, modCtx, provider, parseOpts)
       const route = c.route || `/${id}`;
       return { name, id, route };
     });
+    const detectedNavType = parseNavTypeFromPlan(planResult);
+    if (detectedNavType !== "header" && modCtx.config.navigation) {
+      modCtx.config.navigation.type = detectedNavType;
+    }
   } catch {
     spinner.text = "AI plan failed \u2014 extracting pages from your request...";
   }
@@ -7796,10 +7883,13 @@ async function applyModification(request, dsm, cm, pm, projectRoot, aiProvider,
           let codeToWrite = fixedCode;
           const { code: autoFixed, fixes: autoFixes } = await autoFixCode(codeToWrite);
           codeToWrite = autoFixed;
-          const { code: spaFixed, fixed: spaWasFixed } = detectAndFixSpaHomePage(codeToWrite, route);
-          if (spaWasFixed) {
-            codeToWrite = spaFixed;
-            autoFixes.push("replaced SPA-style home page with redirect to /dashboard");
+          const hasDashboardPage = dsm.getConfig().pages.some((p) => p.route === "/dashboard");
+          if (!hasDashboardPage) {
+            const { code: spaFixed, fixed: spaWasFixed } = detectAndFixSpaHomePage(codeToWrite, route);
+            if (spaWasFixed) {
+              codeToWrite = spaFixed;
+              autoFixes.push("replaced SPA-style home page with redirect to /dashboard");
+            }
           }
           const { code: layoutStripped, stripped } = stripInlineLayoutElements(codeToWrite);
           codeToWrite = layoutStripped;
@@ -7839,7 +7929,7 @@ async function applyModification(request, dsm, cm, pm, projectRoot, aiProvider,
             layoutShared: manifestForAudit.shared.filter((c) => c.type === "layout"),
             allShared: manifestForAudit.shared
           });
-          const issues = validatePageQuality(codeToWrite);
+          let issues = validatePageQuality(codeToWrite);
           const errors = issues.filter((i) => i.severity === "error");
           if (errors.length >= 2 && aiProvider) {
             console.log(
@@ -7864,8 +7954,15 @@ Rules:
                   const recheckErrors = recheck.filter((i) => i.severity === "error");
                   if (recheckErrors.length < errors.length) {
                     codeToWrite = fixedCode2;
+                    const { code: reFixed, fixes: reFixes } = await autoFixCode(codeToWrite);
+                    if (reFixes.length > 0) {
+                      codeToWrite = reFixed;
+                      postFixes.push(...reFixes);
+                    }
                     await writeFile(filePath, codeToWrite);
-                    console.log(chalk11.green(`   \u2714 Quality fix: ${errors.length} \u2192 ${recheckErrors.length} errors`));
+                    issues = validatePageQuality(codeToWrite);
+                    const finalErrors = issues.filter((i) => i.severity === "error").length;
+                    console.log(chalk11.green(`   \u2714 Quality fix: ${errors.length} \u2192 ${finalErrors} errors`));
                   }
                 }
               }
@@ -7986,10 +8083,13 @@ ${pagesCtx}`
             let codeToWrite = fixedCode;
             const { code: autoFixed, fixes: autoFixes } = await autoFixCode(codeToWrite);
             codeToWrite = autoFixed;
-            const { code: spaFixed, fixed: spaWasFixed } = detectAndFixSpaHomePage(codeToWrite, route);
-            if (spaWasFixed) {
-              codeToWrite = spaFixed;
-              autoFixes.push("replaced SPA-style home page with redirect to /dashboard");
+            const hasDashboardPage = dsm.getConfig().pages.some((p) => p.route === "/dashboard");
+            if (!hasDashboardPage) {
+              const { code: spaFixed, fixed: spaWasFixed } = detectAndFixSpaHomePage(codeToWrite, route);
+              if (spaWasFixed) {
+                codeToWrite = spaFixed;
+                autoFixes.push("replaced SPA-style home page with redirect to /dashboard");
+              }
             }
             const { code: layoutStripped, stripped } = stripInlineLayoutElements(codeToWrite);
             codeToWrite = layoutStripped;

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.5.4",
+  "version": "0.5.5",
   "description": "CLI interface for Coherent Design Method",
   "type": "module",
   "main": "./dist/index.js",
@@ -33,8 +33,15 @@
   ],
   "author": "Coherent Design Method",
   "license": "MIT",
+  "scripts": {
+    "dev": "tsup --watch",
+    "build": "tsup",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest"
+  },
   "dependencies": {
     "@anthropic-ai/sdk": "^0.32.0",
+    "@getcoherent/core": "workspace:*",
     "chalk": "^5.3.0",
     "chokidar": "^4.0.1",
     "commander": "^11.1.0",
@@ -42,19 +49,12 @@
     "open": "^10.1.0",
     "ora": "^7.0.1",
     "prompts": "^2.4.2",
-    "zod": "^3.22.4",
-    "@getcoherent/core": "0.5.4"
+    "zod": "^3.22.4"
   },
   "devDependencies": {
     "@types/node": "^20.11.0",
     "@types/prompts": "^2.4.9",
     "tsup": "^8.0.1",
     "typescript": "^5.3.3"
-  },
-  "scripts": {
-    "dev": "tsup --watch",
-    "build": "tsup",
-    "typecheck": "tsc --noEmit",
-    "test": "vitest"
   }
-}
+}

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2025 Sergei Kovtun
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.