@getcoherent/cli 0.6.22 → 0.6.24

package/dist/{chunk-VKGZRKWD.js → chunk-2ZL4X4QD.js}

@@ -703,17 +703,9 @@ async function autoFixCode(code, context) {
   };
   fixed = fixed.split("\n").map((line) => {
     let l = line;
-    l = l.replace(/&lt;=/g, (m, offset) => isInsideAttrValue(line, offset) ? m : "<=");
-    l = l.replace(/&gt;=/g, (m, offset) => isInsideAttrValue(line, offset) ? m : ">=");
-    l = l.replace(/&amp;&amp;/g, (m, offset) => isInsideAttrValue(line, offset) ? m : "&&");
-    l = l.replace(
-      /([\w)\]])\s*&lt;\s*([\w(])/g,
-      (m, p1, p2, offset) => isInsideAttrValue(line, offset) ? m : `${p1} < ${p2}`
-    );
-    l = l.replace(
-      /([\w)\]])\s*&gt;\s*([\w(])/g,
-      (m, p1, p2, offset) => isInsideAttrValue(line, offset) ? m : `${p1} > ${p2}`
-    );
+    l = l.replace(/&lt;/g, (m, offset) => isInsideAttrValue(line, offset) ? m : "<");
+    l = l.replace(/&gt;/g, (m, offset) => isInsideAttrValue(line, offset) ? m : ">");
+    l = l.replace(/&amp;/g, (m, offset) => isInsideAttrValue(line, offset) ? m : "&");
     return l;
   }).join("\n");
   if (fixed !== beforeEntityFix) {
@@ -807,6 +799,97 @@ ${fixed}`;
     }
     fixes.push("<button> \u2192 <Button> (with import)");
   }
+  const compositeComponents = {
+    select: [
+      "Select",
+      "SelectContent",
+      "SelectItem",
+      "SelectTrigger",
+      "SelectValue",
+      "SelectGroup",
+      "SelectLabel",
+      "SelectSeparator",
+      "SelectScrollUpButton",
+      "SelectScrollDownButton"
+    ],
+    dialog: [
+      "Dialog",
+      "DialogContent",
+      "DialogDescription",
+      "DialogFooter",
+      "DialogHeader",
+      "DialogTitle",
+      "DialogTrigger",
+      "DialogClose",
+      "DialogOverlay",
+      "DialogPortal"
+    ],
+    dropdown_menu: [
+      "DropdownMenu",
+      "DropdownMenuContent",
+      "DropdownMenuItem",
+      "DropdownMenuLabel",
+      "DropdownMenuSeparator",
+      "DropdownMenuTrigger",
+      "DropdownMenuCheckboxItem",
+      "DropdownMenuGroup",
+      "DropdownMenuRadioGroup",
+      "DropdownMenuRadioItem",
+      "DropdownMenuShortcut",
+      "DropdownMenuSub",
+      "DropdownMenuSubContent",
+      "DropdownMenuSubTrigger"
+    ],
+    table: ["Table", "TableBody", "TableCaption", "TableCell", "TableFooter", "TableHead", "TableHeader", "TableRow"],
+    tabs: ["Tabs", "TabsContent", "TabsList", "TabsTrigger"],
+    card: ["Card", "CardContent", "CardDescription", "CardFooter", "CardHeader", "CardTitle"],
+    alert_dialog: [
+      "AlertDialog",
+      "AlertDialogAction",
+      "AlertDialogCancel",
+      "AlertDialogContent",
+      "AlertDialogDescription",
+      "AlertDialogFooter",
+      "AlertDialogHeader",
+      "AlertDialogTitle",
+      "AlertDialogTrigger"
+    ],
+    popover: ["Popover", "PopoverContent", "PopoverTrigger"],
+    command: [
+      "Command",
+      "CommandDialog",
+      "CommandEmpty",
+      "CommandGroup",
+      "CommandInput",
+      "CommandItem",
+      "CommandList",
+      "CommandSeparator",
+      "CommandShortcut"
+    ],
+    form: ["Form", "FormControl", "FormDescription", "FormField", "FormItem", "FormLabel", "FormMessage"]
+  };
+  const beforeSubImportFix = fixed;
+  for (const [uiName, allExports] of Object.entries(compositeComponents)) {
+    const importPath = `@/components/ui/${uiName.replace(/_/g, "-")}`;
+    const importRe = new RegExp(`import\\s*\\{([^}]+)\\}\\s*from\\s*['"]${importPath.replace(/[-/]/g, "\\$&")}['"]`);
+    const importMatch = fixed.match(importRe);
+    if (!importMatch) continue;
+    const imported = new Set(
+      importMatch[1].split(",").map((s) => s.trim()).filter(Boolean)
+    );
+    const usedInCode = allExports.filter((e) => {
+      if (imported.has(e)) return false;
+      return new RegExp(`<${e}[\\s/>]`).test(fixed) || new RegExp(`</${e}>`).test(fixed);
+    });
+    if (usedInCode.length > 0) {
+      const merged = [...imported, ...usedInCode];
+      const newImport = `import { ${merged.join(", ")} } from '${importPath}'`;
+      fixed = fixed.replace(importRe, newImport);
+    }
+  }
+  if (fixed !== beforeSubImportFix) {
+    fixes.push("added missing sub-imports for composite components");
+  }
   const colorMap = {
     "bg-zinc-950": "bg-background",
     "bg-zinc-900": "bg-background",
@@ -1186,6 +1269,11 @@ ${selectImport}`
   if (fixed !== beforePlaceholder) {
     fixes.push("placeholder content \u2192 contextual content");
   }
+  const beforeIconProp = fixed;
+  fixed = fixed.replace(/(\bicon\s*:\s*)React\.ReactNode\b/g, "$1React.ElementType");
+  if (fixed !== beforeIconProp) {
+    fixes.push("icon prop: ReactNode \u2192 ElementType (forwardRef compat)");
+  }
   return { code: fixed, fixes };
 }
 function formatIssues(issues) {

package/dist/{chunk-PVJJ2YXP.js → chunk-IYLHC4RC.js}

@@ -236,6 +236,29 @@ function loadPlan(projectRoot) {
 function toKebabCase(name) {
   return name.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
 }
+function extractPropsInterface(code, componentName) {
+  const interfaceRe = new RegExp(`interface\\s+${componentName}Props\\s*\\{([^}]+)\\}`, "s");
+  const match = code.match(interfaceRe);
+  if (match) {
+    return match[1].split("\n").map((l) => l.trim()).filter((l) => l && !l.startsWith("//")).join("; ");
+  }
+  const typeRe = new RegExp(`type\\s+${componentName}Props\\s*=\\s*\\{([^}]+)\\}`, "s");
+  const typeMatch = code.match(typeRe);
+  if (typeMatch) {
+    return typeMatch[1].split("\n").map((l) => l.trim()).filter((l) => l && !l.startsWith("//")).join("; ");
+  }
+  return void 0;
+}
+function extractUsageExample(code, componentName) {
+  const funcMatch = code.match(new RegExp(`export function ${componentName}\\s*\\(\\{([^}]+)\\}`, "s"));
+  if (!funcMatch) return void 0;
+  const props = funcMatch[1].split(",").map((p) => p.split(":")[0].trim()).filter(Boolean);
+  const example = props.map((p) => {
+    if (p.startsWith("...")) return `${p.slice(3)}={{}}`;
+    return `${p}={...}`;
+  }).join(" ");
+  return `<${componentName} ${example} />`;
+}
 async function generateSharedComponentsFromPlan(plan, styleContext, projectRoot, aiProvider) {
   if (plan.sharedComponents.length === 0) return [];
   const componentSpecs = plan.sharedComponents.map(
@@ -258,6 +281,7 @@ Requirements:
 - Use Tailwind CSS classes matching the style context
 - TypeScript with proper props interface
 - Each component is a standalone file
+- Icon props MUST use \`icon: React.ElementType\` (NOT React.ReactNode) and render as \`<Icon className="size-4" />\` where \`const Icon = icon\`. Lucide icons are forwardRef components, not elements.
 
 Return JSON with { requests: [{ type: "add-page", changes: { name: "ComponentName", pageCode: "..." } }, ...] }`;
   const results = [];
@@ -296,6 +320,8 @@ Return JSON with { requests: [{ type: "add-page", changes: { name: "ComponentNam
   }
   for (const comp of results) {
     const planned = plan.sharedComponents.find((c) => c.name === comp.name);
+    const propsInterface = extractPropsInterface(comp.code, comp.name);
+    const usageExample = extractUsageExample(comp.code, comp.name);
     await generateSharedComponent(projectRoot, {
       name: comp.name,
       type: planned?.type ?? "section",
@@ -303,7 +329,9 @@ Return JSON with { requests: [{ type: "add-page", changes: { name: "ComponentNam
       description: planned?.description,
       usedIn: planned?.usedBy ?? [],
       source: "generated",
-      overwrite: true
+      overwrite: true,
+      propsInterface,
+      usageExample
     });
   }
   return results;

package/dist/index.js

@@ -7,7 +7,7 @@ import {
   formatIssues,
   validatePageQuality,
   verifyIncrementalEdit
-} from "./chunk-VKGZRKWD.js";
+} from "./chunk-2ZL4X4QD.js";
 import {
   generateArchitecturePlan,
   getPageGroup,
@@ -16,7 +16,7 @@ import {
   routeToKey,
   savePlan,
   updateArchitecturePlan
-} from "./chunk-PVJJ2YXP.js";
+} from "./chunk-IYLHC4RC.js";
 import {
   CORE_CONSTRAINTS,
   DESIGN_QUALITY,
@@ -4393,6 +4393,12 @@ PAGE WRAPPER (CRITICAL \u2014 the layout provides width/padding automatically):
 - ALL app pages must follow this exact same structure so content aligns consistently across pages
 - 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.
 
+ICON PROPS (CRITICAL \u2014 prevents runtime crash):
+- When passing lucide-react icons as props, the component prop MUST be typed as \`React.ElementType\` (NOT React.ReactNode).
+- Render icon props as: \`const Icon = props.icon; <Icon className="size-4" />\`
+- Pass icons as: \`icon={FolderOpen}\` (component reference, not JSX element)
+- Lucide icons are forwardRef components \u2014 passing them as ReactNode causes "Objects are not valid as a React child" error.
+
 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.
@@ -5096,7 +5102,7 @@ async function warnInlineDuplicates(projectRoot, pageName, route, pageCode, mani
         if (pageTokens.includes(t)) overlap++;
       }
       const overlapRatio = sharedTokens.size > 0 ? overlap / sharedTokens.size : 0;
-      if (overlap >= 20 && overlapRatio >= 0.6) {
+      if (overlap >= 25 && overlapRatio >= 0.7) {
         console.log(
           chalk7.yellow(
             `
@@ -6309,7 +6315,7 @@ async function splitGeneratePages(spinner, message, modCtx, provider, parseOpts)
     if (plan && plan.sharedComponents.length > 0) {
       spinner.start(`Phase 4.5/6 \u2014 Generating ${plan.sharedComponents.length} shared components from plan...`);
       try {
-        const { generateSharedComponentsFromPlan } = await import("./plan-generator-ITHYNYJI.js");
+        const { generateSharedComponentsFromPlan } = await import("./plan-generator-BHDEJGMY.js");
         const generated = await generateSharedComponentsFromPlan(
           plan,
           styleContext,
@@ -6769,7 +6775,7 @@ async function regeneratePage(pageId, config2, projectRoot) {
   const code = await generator.generate(page, appType);
   const route = page.route || "/";
   const isAuth = isAuthRoute(route) || isAuthRoute(page.name || page.id || "");
-  const { loadPlan: loadPlanForPath } = await import("./plan-generator-ITHYNYJI.js");
+  const { loadPlan: loadPlanForPath } = await import("./plan-generator-BHDEJGMY.js");
   const planForPath = loadPlanForPath(projectRoot);
   const filePath = routeToFsPath(projectRoot, route, planForPath || isAuth);
   await mkdir3(dirname5(filePath), { recursive: true });
@@ -7085,7 +7091,17 @@ function extractImportsFrom(code, fromPath) {
   return [...new Set(results)];
 }
 function printPostGenerationReport(opts) {
-  const { action, pageTitle, filePath, code, route, postFixes = [], layoutShared = [], allShared = [] } = opts;
+  const {
+    action,
+    pageTitle,
+    filePath,
+    code,
+    route,
+    postFixes = [],
+    layoutShared = [],
+    allShared = [],
+    groupLayout
+  } = opts;
   const uiComponents = extractImportsFrom(code, "@/components/ui");
   const sharedImportNames = extractImportsFrom(code, "@/components/shared/");
   const inCodeShared = allShared.filter((s) => sharedImportNames.some((n) => n === s.name));
@@ -7102,8 +7118,10 @@ function printPostGenerationReport(opts) {
     console.log(chalk10.dim(`  Shared:      ${inCodeShared.map((s) => `${s.id} (${s.name})`).join(", ")}`));
   }
   const isAuthPage = route && (/^\/(login|signin|signup|register|forgot-password|reset-password)\b/.test(route) || filePath.includes("(auth)"));
-  if (layoutShared.length > 0 && !isAuthPage) {
-    console.log(chalk10.dim(`  Layout:      ${layoutShared.map((l) => `${l.id} (${l.name})`).join(", ")} via layout.tsx`));
+  const isSidebarPage = groupLayout === "sidebar" || filePath.includes("(app)");
+  const filteredLayout = isAuthPage ? [] : isSidebarPage ? layoutShared.filter((l) => /sidebar/i.test(l.name)) : layoutShared;
+  if (filteredLayout.length > 0) {
+    console.log(chalk10.dim(`  Layout:      ${filteredLayout.map((l) => `${l.id} (${l.name})`).join(", ")} via layout.tsx`));
   }
   if (iconCount > 0) {
     console.log(chalk10.dim(`  Icons:       ${iconCount} from lucide-react`));
@@ -7512,7 +7530,7 @@ async function applyModification(request, dsm, cm, pm, projectRoot, aiProvider,
         sharedId: resolved.id,
         sharedName: resolved.name,
         pageTarget,
-        route: route ?? `/${routePath}`,
+        route,
         postFixes: fixes
       });
       try {
@@ -8528,7 +8546,7 @@ async function chatCommand(message, options) {
       spinner.start(`Creating shared component: ${componentName}...`);
       const { createAIProvider: createAIProvider2 } = await import("./ai-provider-CGSIYFZT.js");
       const { generateSharedComponent: generateSharedComponent7 } = await import("@getcoherent/core");
-      const { autoFixCode: autoFixCode2 } = await import("./quality-validator-P572ZUW5.js");
+      const { autoFixCode: autoFixCode2 } = await import("./quality-validator-G5AE4337.js");
       const { extractPropsInterface, extractDependencies } = await import("./component-extractor-VYJLT5NR.js");
       const aiProvider = await createAIProvider2(provider ?? "auto");
       const prompt = `Generate a React component called "${componentName}". Description: ${message}.

package/dist/{plan-generator-ITHYNYJI.js → plan-generator-BHDEJGMY.js}

@@ -11,7 +11,7 @@ import {
   routeToKey,
   savePlan,
   updateArchitecturePlan
-} from "./chunk-PVJJ2YXP.js";
+} from "./chunk-IYLHC4RC.js";
 import "./chunk-5AHG4NNX.js";
 import "./chunk-3RG5ZIWI.js";
 export {

package/dist/{quality-validator-P572ZUW5.js → quality-validator-G5AE4337.js}

@@ -4,7 +4,7 @@ import {
   formatIssues,
   validatePageQuality,
   verifyIncrementalEdit
-} from "./chunk-VKGZRKWD.js";
+} from "./chunk-2ZL4X4QD.js";
 import "./chunk-3RG5ZIWI.js";
 export {
   autoFixCode,

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.6.22",
+  "version": "0.6.24",
   "description": "CLI interface for Coherent Design Method",
   "type": "module",
   "main": "./dist/index.js",
@@ -43,7 +43,7 @@
     "ora": "^7.0.1",
     "prompts": "^2.4.2",
     "zod": "^3.22.4",
-    "@getcoherent/core": "0.6.22"
+    "@getcoherent/core": "0.6.24"
   },
   "devDependencies": {
     "@types/node": "^20.11.0",