@getcoherent/cli 0.3.11 → 0.4.0

package/dist/index.js

@@ -2370,6 +2370,7 @@ export default config
       }
       await scaffolder.generateRootLayout();
       await configureNextImages(projectPath);
+      await createAppRouteGroupLayout(projectPath);
       const welcomeMarkdown = getWelcomeMarkdown();
       const homePageContent = generateWelcomeComponent(welcomeMarkdown);
       await writeFile(join5(projectPath, "app", "page.tsx"), homePageContent);
@@ -2397,6 +2398,7 @@ export default config
         console.log(chalk4.yellow(`  Run manually: npm install ${COHERENT_REQUIRED_PACKAGES.join(" ")}`));
       }
       await ensureRegistryComponents(config2, projectPath);
+      await createAppRouteGroupLayout(projectPath);
       const designSystemSpinner = ora("Creating design system pages...").start();
       await scaffolder.generateDesignSystemPages();
       designSystemSpinner.succeed("Design system pages created");
@@ -2448,6 +2450,23 @@ export default nextConfig;
 `;
   await writeFile(configPath, content);
 }
+async function createAppRouteGroupLayout(projectPath) {
+  const dir = join5(projectPath, "app", "(app)");
+  mkdirSync3(dir, { recursive: true });
+  const layoutCode = `export default function AppLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <main className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-6">
+      {children}
+    </main>
+  )
+}
+`;
+  await writeFile(join5(dir, "layout.tsx"), layoutCode);
+}
 
 // src/commands/chat.ts
 import chalk13 from "chalk";
@@ -4511,17 +4530,15 @@ 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).
-- Start page content with <main> or a wrapper <div>. The first visible element should be the page title or hero section.
 - 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.
 
-WIDTH CONSISTENCY (CRITICAL \u2014 prevents visual mismatch between header and content):
-- The shared Header and Footer use "mx-auto max-w-7xl px-4 sm:px-6 lg:px-8" for inner content.
-- ALL page content MUST use the same width constraint: wrap the outermost element in <main className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-6">.
-- Landing/marketing pages: each <section> is full-width for backgrounds, but inner content uses "mx-auto max-w-6xl" or similar.
-- NEVER use max-w-4xl or smaller for the page wrapper \u2014 it makes the page look narrower than the header.
-- For form-heavy pages (Settings, Create, Edit): the outer wrapper MUST still be max-w-7xl, but the form content inside can use max-w-4xl mx-auto for comfortable form width. The page title and description MUST remain at full max-w-7xl width.
-- NEVER have page content at full width while header/footer are constrained \u2014 this looks broken.
+PAGE WRAPPER (CRITICAL \u2014 the layout provides width/padding automatically):
+- App pages (dashboard, projects, team, settings, etc.) are rendered inside a route group layout that already provides <main className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-6">.
+- Do NOT include any <main> wrapper, max-w-*, mx-auto, or px-* padding classes on the outermost element. The layout handles this.
+- Start page content directly with a <div className="space-y-6"> or similar spacing wrapper. The first visible element should be the page title.
+- Do NOT add inner centering wrappers like <div className="max-w-4xl mx-auto">. All content flows within the layout's max-w-7xl container.
+- Landing/marketing pages are an exception: they render outside the app layout and should use full-width <section> elements with inner "mx-auto max-w-6xl" for content.
 
 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.
@@ -4533,7 +4550,7 @@ pageCode rules (shadcn/ui blocks quality):
 - Follow ALL design constraints above: text-sm base, semantic colors only, restricted spacing, weight-based hierarchy.
 - Stat card pattern: Card > CardHeader(flex flex-row items-center justify-between space-y-0 pb-2) > CardTitle(text-sm font-medium) + Icon(size-4 text-muted-foreground) ; CardContent > metric(text-2xl font-bold) + change(text-xs text-muted-foreground).
 - Login/form pattern: outer div(flex min-h-svh flex-col items-center justify-center p-6 md:p-10) > inner div(w-full max-w-sm) > Card with form.
-- Dashboard pattern: main(mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-6 flex flex-1 flex-col gap-4) > page header(h1 text-2xl font-bold tracking-tight + p text-sm text-muted-foreground) > stats grid(grid gap-4 md:grid-cols-2 lg:grid-cols-4) > content cards.
+- Dashboard pattern: div(space-y-6) > page header(h1 text-2xl font-bold tracking-tight + p text-sm text-muted-foreground) > stats grid(grid gap-4 md:grid-cols-2 lg:grid-cols-4) > content cards. No <main> wrapper \u2014 the layout provides it.
 - 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.
@@ -5049,6 +5066,11 @@ import { resolve as resolve5 } from "path";
 import { existsSync as existsSync13, readFileSync as readFileSync8 } from "fs";
 import { DesignSystemManager as DesignSystemManager3, loadManifest as loadManifest4 } from "@getcoherent/core";
 import chalk8 from "chalk";
+var MARKETING_ROUTES = /* @__PURE__ */ new Set(["", "landing", "pricing", "about", "contact", "blog", "features"]);
+function isMarketingRoute(route) {
+  const slug = route.replace(/^\//, "").split("/")[0] || "";
+  return MARKETING_ROUTES.has(slug);
+}
 function routeToFsPath(projectRoot, route, isAuth) {
   const slug = route.replace(/^\//, "");
   if (isAuth) {
@@ -5057,7 +5079,10 @@ function routeToFsPath(projectRoot, route, isAuth) {
   if (!slug) {
     return resolve5(projectRoot, "app", "page.tsx");
   }
-  return resolve5(projectRoot, "app", slug, "page.tsx");
+  if (isMarketingRoute(route)) {
+    return resolve5(projectRoot, "app", slug, "page.tsx");
+  }
+  return resolve5(projectRoot, "app", "(app)", slug, "page.tsx");
 }
 function routeToRelPath(route, isAuth) {
   const slug = route.replace(/^\//, "");
@@ -5067,7 +5092,10 @@ function routeToRelPath(route, isAuth) {
   if (!slug) {
     return "app/page.tsx";
   }
-  return `app/${slug}/page.tsx`;
+  if (isMarketingRoute(route)) {
+    return `app/${slug}/page.tsx`;
+  }
+  return `app/(app)/${slug}/page.tsx`;
 }
 function deduplicatePages(pages) {
   const normalize = (route) => route.replace(/\/$/, "").replace(/s$/, "").replace(/ue$/, "");
@@ -6802,12 +6830,32 @@ async function regenerateLayout(config2, projectRoot) {
   try {
     await integrateSharedLayoutIntoRootLayout2(projectRoot);
     await ensureAuthRouteGroup(projectRoot);
+    await ensureAppRouteGroupLayout(projectRoot);
   } catch (err) {
     if (process.env.COHERENT_DEBUG === "1") {
       console.log(chalk9.dim("Layout integration warning:", err));
     }
   }
 }
+async function ensureAppRouteGroupLayout(projectRoot) {
+  const layoutPath = resolve6(projectRoot, "app", "(app)", "layout.tsx");
+  if (existsSync14(layoutPath)) return;
+  const { mkdir: mkdirAsync } = await import("fs/promises");
+  await mkdirAsync(resolve6(projectRoot, "app", "(app)"), { recursive: true });
+  const code = `export default function AppLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <main className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-6">
+      {children}
+    </main>
+  )
+}
+`;
+  await writeFile(layoutPath, code);
+}
 async function regenerateFiles(modified, config2, projectRoot) {
   const componentIds = /* @__PURE__ */ new Set();
   const pageIds = /* @__PURE__ */ new Set();
@@ -7141,53 +7189,26 @@ function stripInlineLayoutElements(code) {
   }
   return { code: result, stripped };
 }
-function enforceWidthWrapper(code, route) {
-  if (route === "/" || route === "/home") return { code, fixed: false };
-  if (/<section[\s>]/i.test(code) && (/<section[\s>]/gi.exec(code) || []).length >= 2) {
-    return { code, fixed: false };
+function stripOuterMainWrapper(code) {
+  const mainWrapperRe = /(return\s*\(\s*\n?\s*)<main\s+className="[^"]*">\s*\n([\s\S]*?)\n\s*<\/main>(\s*\n?\s*\))/;
+  const match = code.match(mainWrapperRe);
+  if (match) {
+    const [, before, children, after] = match;
+    const dedented = children.replace(/^    /gm, "  ");
+    return {
+      code: code.replace(match[0], `${before}<>${dedented}
+    </${">"}${after}`),
+      stripped: true
+    };
   }
   let result = code;
-  let didFix = false;
-  const mainMatch = result.match(/<main\s+className="([^"]*)"/);
-  if (mainMatch) {
-    const cls = mainMatch[1];
-    const needsMaxW = !cls.includes("max-w-7xl");
-    const needsMxAuto = !cls.includes("mx-auto");
-    const needsPadding = !cls.includes("px-");
-    if (needsMaxW || needsMxAuto || needsPadding) {
-      let fixed = cls;
-      fixed = fixed.replace(/\bmax-w-\S+/g, "");
-      fixed = `${needsMxAuto ? "mx-auto " : ""}max-w-7xl ${needsPadding ? "px-4 sm:px-6 lg:px-8 " : ""}${fixed}`.replace(/\s+/g, " ").trim();
-      result = result.replace(mainMatch[0], `<main className="${fixed}"`);
-      didFix = true;
-    }
-  } else {
-    const returnMatch = result.match(/return\s*\(\s*\n?\s*<(div|main)\s+className="([^"]*)"/);
-    if (returnMatch) {
-      const [fullMatch, tag, cls] = returnMatch;
-      const needsMaxW = !cls.includes("max-w-7xl");
-      const needsMxAuto = !cls.includes("mx-auto");
-      const needsPadding = !cls.includes("px-");
-      if (needsMaxW || needsMxAuto || needsPadding) {
-        let fixed = cls;
-        fixed = fixed.replace(/\bmax-w-\S+/g, "");
-        fixed = `${needsMxAuto ? "mx-auto " : ""}max-w-7xl ${needsPadding ? "px-4 sm:px-6 lg:px-8 " : ""}${fixed}`.replace(/\s+/g, " ").trim();
-        result = result.replace(fullMatch, `return (
-    <${tag} className="${fixed}"`);
-        didFix = true;
-      }
-    }
-  }
-  const isAuthPage = /\/(login|signin|sign-in|signup|sign-up|register|auth)\b/i.test(route);
-  if (!isAuthPage) {
-    const before = result;
-    result = result.replace(
-      /(<div\s+className="[^"]*\bmx-auto\b[^"]*)\bmax-w-(xs|sm|md|lg|xl|2xl|3xl)\b/g,
-      "$1max-w-4xl"
-    );
-    if (result !== before) didFix = true;
+  let stripped = false;
+  if (/<main\s+className="[^"]*">/.test(result)) {
+    result = result.replace(/<main\s+className="[^"]*">\s*/g, '<div className="space-y-6">');
+    result = result.replace(/<\/main>/g, "</div>");
+    stripped = true;
   }
-  return { code: result, fixed: didFix };
+  return { code: result, stripped };
 }
 async function applyModification(request, dsm, cm, pm, projectRoot, aiProvider, originalMessage) {
   switch (request.type) {
@@ -7563,11 +7584,12 @@ async function applyModification(request, dsm, cm, pm, projectRoot, aiProvider,
           codeToWrite = autoFixed;
           const { code: layoutStripped, stripped } = stripInlineLayoutElements(codeToWrite);
           codeToWrite = layoutStripped;
-          const { code: widthFixed, fixed: widthWasFixed } = enforceWidthWrapper(codeToWrite, route);
-          codeToWrite = widthFixed;
+          if (!isMarketingRoute(route)) {
+            const { code: noMain, stripped: mainStripped } = stripOuterMainWrapper(codeToWrite);
+            if (mainStripped) codeToWrite = noMain;
+          }
           const allFixes = [...postFixes, ...autoFixes];
           if (stripped.length > 0) allFixes.push(`stripped inline ${stripped.join(", ")} (layout owns these)`);
-          if (widthWasFixed) allFixes.push("enforced max-w-7xl width consistency");
           if (allFixes.length > 0) {
             console.log(chalk11.dim("  \u{1F527} Post-generation fixes:"));
             allFixes.forEach((f) => console.log(chalk11.dim(`     ${f}`)));
@@ -7733,11 +7755,12 @@ ${pagesCtx}`
             codeToWrite = autoFixed;
             const { code: layoutStripped, stripped } = stripInlineLayoutElements(codeToWrite);
             codeToWrite = layoutStripped;
-            const { code: widthFixed2, fixed: widthWasFixed2 } = enforceWidthWrapper(codeToWrite, route);
-            codeToWrite = widthFixed2;
+            if (!isMarketingRoute(route)) {
+              const { code: noMain, stripped: mainStripped } = stripOuterMainWrapper(codeToWrite);
+              if (mainStripped) codeToWrite = noMain;
+            }
             const allFixes = [...postFixes, ...autoFixes];
             if (stripped.length > 0) allFixes.push(`stripped inline ${stripped.join(", ")} (layout owns these)`);
-            if (widthWasFixed2) allFixes.push("enforced max-w-7xl width consistency");
             if (allFixes.length > 0) {
               console.log(chalk11.dim("  \u{1F527} Post-generation fixes:"));
               allFixes.forEach((f) => console.log(chalk11.dim(`     ${f}`)));

package/package.json

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