@getcoherent/cli 0.6.10 → 0.6.11

package/dist/{chunk-O7OA76D3.js → chunk-CLPILU3Z.js}

@@ -194,48 +194,172 @@ NEVER include app-style elements (sidebar widgets, data tables, filters) on mark
 var DESIGN_QUALITY_APP = `
 ## DESIGN QUALITY \u2014 APP PAGES
 
+### Reference Patterns (COPY these exact patterns)
+
+PAGE HEADER:
+\`\`\`
+<div className="flex items-center justify-between">
+  <div className="space-y-1">
+    <h1 className="text-2xl font-bold tracking-tight">Page Title</h1>
+    <p className="text-sm text-muted-foreground">Page description</p>
+  </div>
+  <Button><Plus className="size-4 mr-2 shrink-0" />New Item</Button>
+</div>
+\`\`\`
+
+FILTER TOOLBAR (search + dropdowns + action):
+\`\`\`
+<div className="flex flex-wrap items-center gap-2">
+  <div className="relative flex-1">
+    <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground shrink-0" />
+    <Input placeholder="Search..." className="pl-9" />
+  </div>
+  <Select>
+    <SelectTrigger className="w-[180px]">
+      <SelectValue placeholder="All Status" />
+    </SelectTrigger>
+    <SelectContent>
+      <SelectItem value="all">All Status</SelectItem>
+      <SelectItem value="active">Active</SelectItem>
+    </SelectContent>
+  </Select>
+  <Button><Plus className="size-4 mr-2 shrink-0" />New Item</Button>
+</div>
+\`\`\`
+CRITICAL: NEVER use <Select> with native <option> elements. Always use the shadcn compound pattern above (SelectTrigger + SelectValue + SelectContent + SelectItem).
+Do NOT add standalone filter icon buttons. The Select dropdowns ARE the filters.
+
+STATS GRID:
+\`\`\`
+<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+  <Card>
+    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+      <CardTitle className="text-sm font-medium">Metric Name</CardTitle>
+      <TrendingUp className="size-4 text-muted-foreground shrink-0" />
+    </CardHeader>
+    <CardContent>
+      <div className="text-2xl font-bold">1,234</div>
+      <p className="text-xs text-muted-foreground">+12% from last month</p>
+    </CardContent>
+  </Card>
+</div>
+\`\`\`
+
+DATA TABLE:
+\`\`\`
+<div className="overflow-x-auto">
+  <Table>
+    <TableHeader>
+      <TableRow>
+        <TableHead>Name</TableHead>
+        <TableHead>Status</TableHead>
+        <TableHead className="w-[50px]"></TableHead>
+      </TableRow>
+    </TableHeader>
+    <TableBody>
+      <TableRow className="hover:bg-muted/50">
+        <TableCell className="font-medium">Item name</TableCell>
+        <TableCell><Badge variant="default">Active</Badge></TableCell>
+        <TableCell>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="icon"><MoreHorizontal className="size-4 shrink-0" /></Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem>Edit</DropdownMenuItem>
+              <DropdownMenuItem className="text-destructive">Delete</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </TableCell>
+      </TableRow>
+    </TableBody>
+  </Table>
+</div>
+\`\`\`
+
+EMPTY STATE (when list/table has zero items):
+\`\`\`
+<div className="flex flex-col items-center justify-center py-12 text-center">
+  <Inbox className="size-12 text-muted-foreground mb-4 shrink-0" />
+  <h3 className="text-lg font-semibold">No items yet</h3>
+  <p className="text-sm text-muted-foreground mt-1 max-w-sm">Create your first item to get started.</p>
+  <Button className="mt-4"><Plus className="size-4 mr-2 shrink-0" />Create Item</Button>
+</div>
+\`\`\`
+
+DATA CARD GRID:
+\`\`\`
+<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+  <Card className="hover:border-border/30 transition-colors">
+    <CardHeader className="flex flex-row items-start justify-between space-y-0">
+      <div className="space-y-1">
+        <CardTitle>Item Name</CardTitle>
+        <p className="text-sm text-muted-foreground">Description</p>
+      </div>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" size="icon"><MoreHorizontal className="size-4 shrink-0" /></Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem>Edit</DropdownMenuItem>
+          <DropdownMenuItem className="text-destructive">Delete</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </CardHeader>
+    <CardContent>...</CardContent>
+  </Card>
+</div>
+\`\`\`
+
 ### Spacing
 - gap-4 md:gap-6 between sections
 - p-4 lg:p-6 content padding
-- Within cards: p-4 to p-6 (compact)
-- Between cards in grid: gap-4 (tight)
-
-### Layout
-- Data tables, card grids, filters, stat rows
 - Page wrapper: flex flex-1 flex-col gap-4 p-4 lg:p-6
-- Stats grid: grid gap-4 md:grid-cols-2 lg:grid-cols-4
-- Content: functional, scannable, data-dense
-
-### Toolbars & Filters
-- Filter row: flex flex-wrap items-center gap-2 (plain div, NOT inside a Card)
-- Search input: MUST use flex-1 to fill remaining horizontal space. NEVER fixed-width search.
-- Filters/selects: fixed width (w-[180px] or auto), do NOT flex-grow
-- On mobile (sm:): search full width, filters wrap to next line
-- Do NOT wrap search/filter toolbars in Card components. They are plain flex rows above content.
-
-### Tabs
-- Always use <TabsList variant="line"> for a clean underline style (not the pill/segmented control default)
-- The variant="line" prop removes the bg-muted pill container and uses an underline indicator instead
 
 NEVER include marketing sections (hero, pricing, testimonials) on app pages.
 `;
 var DESIGN_QUALITY_AUTH = `
 ## DESIGN QUALITY \u2014 AUTH PAGES
 
-### Layout
-- The auth layout ALREADY provides centering (flex items-center justify-center min-h-svh). Do NOT add your own centering wrapper or min-h-svh.
-- Just output: <div className="w-full max-w-md"> containing a Card
+### Reference Pattern (COPY this exact pattern)
+
+AUTH CARD:
+\`\`\`
+<div className="w-full max-w-md">
+  <Card>
+    <CardHeader className="space-y-1">
+      <CardTitle className="font-bold text-center">Welcome back</CardTitle>
+      <p className="text-sm text-muted-foreground text-center">Enter your credentials</p>
+    </CardHeader>
+    <CardContent>
+      <form className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="email">Email</Label>
+          <Input id="email" type="email" placeholder="Enter your email" />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="password">Password</Label>
+          <Input id="password" type="password" placeholder="Enter your password" />
+        </div>
+        <Button type="submit" className="w-full">Sign in</Button>
+      </form>
+    </CardContent>
+    <CardFooter className="text-center">
+      <p className="text-sm text-muted-foreground">
+        Don't have an account?{' '}
+        <Link href="/register" className="text-sm text-muted-foreground underline underline-offset-4 hover:text-foreground transition-colors">Sign up</Link>
+      </p>
+    </CardFooter>
+  </Card>
+</div>
+\`\`\`
+
+### Rules
+- The auth layout ALREADY provides centering (flex items-center justify-center min-h-svh). Do NOT add your own centering wrapper.
 - Card width: w-full max-w-md
-- No navigation, no section containers, no sidebar
-- Single focused form with clear CTA
-- Card \u2192 CardHeader (title + description) \u2192 CardContent (form with space-y-4) \u2192 CardFooter (link to other auth page)
-
-### Form Spacing
 - Form fields inside CardContent: space-y-4 between field groups
-- Ensure visible gap between the last input field and the submit button (use space-y-4 or space-y-6)
 - Each field group (Label + Input): space-y-2
-
-NEVER include navigation bars, sidebars, or multi-section layouts on auth pages.
+- No navigation bars, sidebars, or multi-section layouts on auth pages.
 `;
 var DESIGN_QUALITY_CRITICAL = `
 ## CRITICAL CODE RULES (violations will be auto-corrected)
@@ -366,9 +490,7 @@ MULTI-SELECT / TAG INPUT:
 var RULES_DATA_DISPLAY = `
 DATA DISPLAY RULES:
 
-STAT / METRIC CARDS:
-- 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).
-- Grid: grid gap-4 md:grid-cols-2 lg:grid-cols-4.
+STAT / METRIC CARDS: See the Stats Grid reference pattern in DESIGN QUALITY \u2014 APP PAGES. Follow that exact pattern.
 - Trend up: text-emerald-600 (light) / text-emerald-400 (dark) \u2014 exception to semantic-only rule for trend indicators.
 - Trend down: text-destructive.
 - Trend icon: ArrowUp / ArrowDown className="size-3 inline mr-1".
@@ -389,12 +511,7 @@ PAGINATION:
 - Placement: below the list/table, centered. <div className="flex justify-center mt-4">
 - For short lists (<20 items): no pagination. For feeds: "Load more" button (variant="outline" className="w-full").
 
-EMPTY STATES:
-- Pattern: <div className="flex flex-col items-center justify-center py-12 text-center">
-- Icon: size-12 text-muted-foreground mb-4 (larger than normal icons \u2014 exception).
-- Title: <h3 className="text-lg font-semibold">No projects yet</h3>
-- Description: <p className="text-sm text-muted-foreground mt-1 max-w-sm">Create your first project to get started.</p>
-- CTA: <Button className="mt-4">Create project</Button>
+EMPTY STATES: See the Empty State reference pattern in DESIGN QUALITY \u2014 APP PAGES. Follow that exact pattern.
 - Search empty: "No results for 'query'. Try different keywords." + clear search button.
 - Filtered empty: "No items match your filters." + reset filters button.
 
@@ -431,9 +548,7 @@ TRUNCATION:
 - When to truncate: card descriptions (2 lines), table cells (single line), list item subtitles (1-2 lines).
 - Always set title={fullText} for accessibility on truncated text.
 
-SEARCH INPUT:
-- Pattern: <div className="relative"><Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" /><Input placeholder="Search..." className="pl-9" /></div>
-- Placement: top of the list/table it filters, max-w-sm.
+SEARCH INPUT: See the Filter Toolbar reference pattern in DESIGN QUALITY \u2014 APP PAGES. Use the search input + Select layout shown there.
 - Clear button: X icon on right when value is not empty.
 - Debounce: 300ms on keystroke. No search button.
 `;
@@ -1125,6 +1240,8 @@ async function generateSharedComponentsFromPlan(plan, styleContext, projectRoot,
   const componentSpecs = plan.sharedComponents.map(
     (c) => `- ${c.name}: ${c.description}. Props: ${c.props}. Type: ${c.type}. shadcn deps: ${c.shadcnDeps.join(", ") || "none"}`
   ).join("\n");
+  const designRules = `${CORE_CONSTRAINTS}
+${getDesignQualityForType("app")}`;
   const prompt = `Generate React components as separate files. For EACH component below, return an add-page request with name and pageCode fields.
 
 Components to generate:
@@ -1132,6 +1249,8 @@ ${componentSpecs}
 
 Style context: ${styleContext || "default"}
 
+${designRules}
+
 Requirements:
 - Each component MUST have \`export default function ComponentName\`
 - Use shadcn/ui imports from @/components/ui/*
@@ -1183,6 +1302,7 @@ Return JSON with { requests: [{ type: "add-page", changes: { name: "ComponentNam
 export {
   DESIGN_THINKING,
   CORE_CONSTRAINTS,
+  DESIGN_QUALITY_COMMON,
   getDesignQualityForType,
   inferPageTypeFromRoute,
   DESIGN_QUALITY,