@getcoherent/cli 0.6.49 → 0.6.51

package/README.md

@@ -26,9 +26,14 @@ coherent preview
 | Command | Description |
 |---------|-------------|
 | `coherent init` | Create project: config, app, design-system viewer, docs. Non-interactive (optional provider flag). |
-| `coherent chat "<request>"` | Parse NL, update config, regenerate pages/components/nav (e.g. add page, change tokens). |
+| `coherent chat "<request>"` | Generate or modify pages using natural language. Includes generation-time TypeScript validation. |
 | `coherent preview` | Start Next.js dev server. |
+| `coherent fix` | Auto-fix everything: TypeScript errors (deterministic + AI), missing components, CSS, raw colors, layouts. |
+| `coherent check` | Show all problems: page quality, component integrity, broken links. |
+| `coherent sync` | Sync Design System with code after manual edits. |
 | `coherent export` | Production build; optional Vercel/Netlify config. |
+| `coherent undo` | Restore project to state before the last `coherent chat`. |
+| `coherent update` | Apply platform updates to an existing project. |
 | `coherent status` | Print config summary (pages, components). |
 | `coherent components` | List registered components. |
 

package/dist/{chunk-VLBVBF6V.js → chunk-IFJK5OPI.js}

@@ -2,10 +2,10 @@ import {
   CORE_CONSTRAINTS,
   getDesignQualityForType,
   inferPageTypeFromRoute
-} from "./chunk-E23FJX2I.js";
+} from "./chunk-NLL3SHN3.js";
 import {
   autoFixCode
-} from "./chunk-NOM47EB4.js";
+} from "./chunk-U5SNPHVU.js";
 
 // src/commands/chat/plan-generator.ts
 import { z } from "zod";

package/dist/{chunk-E23FJX2I.js → chunk-NLL3SHN3.js}

@@ -28,10 +28,8 @@ TYPOGRAPHY (most impactful rules):
 - Create hierarchy through font WEIGHT (medium \u2192 semibold \u2192 bold), NOT font SIZE.
 
 COLORS \u2014 ONLY SEMANTIC TOKENS (zero raw colors):
-- Backgrounds: bg-background, bg-muted, bg-muted/50, bg-card, bg-primary, bg-secondary, bg-destructive.
-- Text: text-foreground (default), text-muted-foreground, text-primary-foreground.
-- Borders: border (no color suffix \u2014 uses CSS variable). border-b for headers.
-- BANNED: bg-gray-*, bg-blue-*, bg-slate-*, text-gray-*, ANY raw Tailwind color. The validator REJECTS these.
+- Allowed: bg-background, bg-muted, bg-muted/50, bg-card, bg-primary, bg-secondary, bg-destructive, bg-success, bg-warning. text-foreground, text-muted-foreground, text-primary-foreground, text-destructive, text-success. border (bare), border-border. Opacity modifiers OK (bg-primary/50). ring-*, shadow-*, fill-*, stroke-* with same token names.
+- BANNED: ANY raw Tailwind color (bg-gray-*, text-blue-*, etc.), inline style colors, hex values, bg-white, bg-black. The validator REJECTS all of these.
 
 SPACING (restricted palette \u2014 only multiples of 4px):
 - Page content padding: p-4 lg:p-6. Gap between major sections: gap-6 md:gap-8.
@@ -115,7 +113,7 @@ var DESIGN_QUALITY_COMMON = `
 
 ### Visual Depth & Layers
 - Cards: bg-card border border-border/15 rounded-xl (not rounded-md)
-- Cards on dark pages: bg-zinc-900/50 border-border/10 backdrop-blur-sm
+- Cards on dark pages: bg-card border-border/10 backdrop-blur-sm
 - Cards MUST have hover state: hover:border-border/30 transition-colors
 - Sections alternate between bg-background and bg-muted/5 for rhythm
 - Section dividers: border-t border-border/10 (subtle, not heavy)
@@ -127,18 +125,18 @@ var DESIGN_QUALITY_COMMON = `
 - CTA buttons: use the Button component, NEVER raw <button> or <a> styled as button
 
 ### Accent Color Discipline
-- ONE accent color per page (primary or emerald-400)
-- Use for: CTAs, terminal text, check icons, feature icon backgrounds, active states
-- NEVER mix blue + purple + emerald on same page
+- ONE accent color per page (primary)
+- Use for: CTAs, check icons, feature icon backgrounds, active states
+- NEVER mix multiple accent colors on same page
 - Badge: outline style (border-border/30 bg-transparent) not filled color
-- Status icons: text-emerald-400 for positive, text-red-400 for negative
+- Status icons: text-success for positive, text-destructive for negative
 
 ### Dark Theme Implementation
 - html element: className="dark"
 - Background: use CSS variables from globals.css dark section
 - Text: text-foreground for primary, text-muted-foreground for secondary
 - NEVER hardcode dark colors (bg-gray-900) \u2014 always use semantic tokens
-- Cards and elevated elements: slightly lighter than background (bg-card or bg-zinc-900/50)
+- Cards and elevated elements: slightly lighter than background (bg-card)
 `;
 var DESIGN_QUALITY_MARKETING = `
 ## DESIGN QUALITY \u2014 MARKETING PAGES
@@ -155,15 +153,15 @@ var DESIGN_QUALITY_MARKETING = `
 
 ### Icons in Feature Cards
 - Wrap in colored container: bg-primary/10 rounded-lg p-2.5
-- Icon color: text-primary (or text-emerald-400 for dark themes)
+- Icon color: text-primary
 - Icon size: h-5 w-5 inside the container
 - NEVER bare icons floating in a card without container
 
 ### Terminal / Code Blocks
 - Background: bg-zinc-950 (near-black, not gray)
 - Border: border-border/10 rounded-xl
-- Text: font-mono text-sm text-emerald-400
-- Prompt: text-emerald-500 "$ " prefix (green dollar sign)
+- Text: font-mono text-sm text-emerald-400 (EXCEPTION: terminal blocks use raw green for aesthetics)
+- Prompt: text-emerald-500 "$ " prefix (EXCEPTION: terminal prompt uses raw green)
 - Title bar (optional): flex with 3 dots (bg-zinc-700 rounded-full w-2.5 h-2.5) + title text-zinc-500 text-[11px]
 - Copy button: text-zinc-500 hover:text-zinc-300
 
@@ -177,8 +175,8 @@ var DESIGN_QUALITY_MARKETING = `
 
 ### Comparison Sections (before/after, with/without)
 - Two cards side by side: grid md:grid-cols-2 gap-6
-- Negative card: neutral border, items with X icon text-red-400
-- Positive card: accent border (border-emerald-500/20), items with Check icon text-emerald-400
+- Negative card: neutral border, items with X icon text-destructive
+- Positive card: accent border (border-primary/20), items with Check icon text-success
 - Header of each card: text-sm font-semibold uppercase tracking-wider
 
 ### Step/Process Sections
@@ -493,7 +491,7 @@ var RULES_DATA_DISPLAY = `
 DATA DISPLAY RULES:
 
 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 up: text-success.
 - Trend down: text-destructive.
 - Trend icon: ArrowUp / ArrowDown className="size-3 inline mr-1".
 - No actions on stat cards. Click entire card to drill down (if applicable).
@@ -530,12 +528,12 @@ MOCK DATA IN COMPONENTS:
 - NEVER store display strings ("2 hours ago", "Yesterday") in data \u2014 always compute from ISO date.
 
 STATUS INDICATORS (dot + text):
-- Pattern: <div className="flex items-center gap-2"><div className="size-2 rounded-full bg-emerald-500" /><span className="text-sm">Active</span></div>
-- Colors: bg-emerald-500 (active/online), bg-destructive (error/offline), bg-yellow-500 (warning), bg-muted-foreground (inactive).
+- Pattern: <div className="flex items-center gap-2"><div className="size-2 rounded-full bg-success" /><span className="text-sm">Active</span></div>
+- Colors: bg-success (active/online), bg-destructive (error/offline), bg-warning (warning), bg-muted-foreground (inactive).
 - Alternative: use Badge variants for status in tables/lists (preferred over dots).
 
 TREND INDICATORS:
-- Up (positive): <span className="text-sm text-emerald-600 flex items-center"><ArrowUp className="size-3 mr-1" />12.5%</span>
+- Up (positive): <span className="text-sm text-success flex items-center"><ArrowUp className="size-3 mr-1" />12.5%</span>
 - Down (negative): <span className="text-sm text-destructive flex items-center"><ArrowDown className="size-3 mr-1" />3.2%</span>
 - Neutral: <span className="text-sm text-muted-foreground">0%</span>
 - Always include arrow icon + sign (+ or -) + percentage.

package/dist/{chunk-NOM47EB4.js → chunk-U5SNPHVU.js}

@@ -1,3 +1,7 @@
+// src/utils/quality-validator.ts
+import { readdir, readFile } from "fs/promises";
+import { join } from "path";
+
 // src/utils/component-rules.ts
 function extractJsxElementProps(code, openTagStart) {
   let i = openTagStart;
@@ -155,7 +159,12 @@ function applyComponentRules(code) {
 }
 
 // src/utils/quality-validator.ts
-var RAW_COLOR_RE = /(?:(?:hover|focus|active|group-hover|focus-visible|focus-within):)?(?:bg|text|border|ring|outline|shadow|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 RAW_COLOR_RE = /(?:(?:[a-z][a-z0-9-]*:)*)?(?:bg|text|border|ring|outline|shadow|from|to|via|divide|placeholder|decoration|caret|fill|stroke|accent)-(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 RAW_BW_COLOR_RE = /(?:(?:[a-z][a-z0-9-]*:)*)?(?:bg|text|border|ring|outline|shadow|divide|fill|stroke)-(white|black)\b/g;
+var INLINE_STYLE_COLOR_RE = /style=\{[^}]*(color|background|backgroundColor|borderColor)\s*:\s*['"]?(#[0-9a-fA-F]{3,8}|rgb|hsl|red|blue|orange|green|purple|yellow|pink|white|black|gray|grey)\b/gi;
+var ARBITRARY_COLOR_RE = /\b(?:bg|text|border|ring|shadow|fill|stroke|from|to|via)-\[(?:#[0-9a-fA-F]{3,8}|rgb|hsl|color-mix)/gi;
+var SVG_COLOR_RE = /\b(?:fill|stroke)=["'](?!none|currentColor|url|inherit|transparent)([^"']+)["']/g;
+var COLOR_PROP_RE = /\b(?:color|accentColor|iconColor|fillColor)=["']#[0-9a-fA-F]{3,8}["']/g;
 var HEX_IN_CLASS_RE = /className="[^"]*#[0-9a-fA-F]{3,8}[^"]*"/g;
 var TEXT_BASE_RE = /\btext-base\b/g;
 var HEAVY_SHADOW_RE = /\bshadow-(md|lg|xl|2xl)\b/g;
@@ -251,6 +260,51 @@ function validatePageQuality(code, validRoutes, pageType) {
       "error"
     ).filter((issue) => !isTerminalContext(issue.line))
   );
+  issues.push(
+    ...checkLines(
+      code,
+      RAW_BW_COLOR_RE,
+      "RAW_COLOR",
+      "Use semantic tokens (bg-background, text-foreground) instead of white/black",
+      "error"
+    )
+  );
+  issues.push(
+    ...checkLines(
+      code,
+      INLINE_STYLE_COLOR_RE,
+      "inline-style-color",
+      "Use semantic Tailwind classes instead of inline style colors",
+      "error"
+    )
+  );
+  issues.push(
+    ...checkLines(
+      code,
+      ARBITRARY_COLOR_RE,
+      "arbitrary-color",
+      "Use semantic tokens instead of arbitrary color values like bg-[#hex]",
+      "error"
+    )
+  );
+  issues.push(
+    ...checkLines(
+      code,
+      SVG_COLOR_RE,
+      "svg-raw-color",
+      "Use currentColor or CSS variables for SVG fill/stroke, not raw colors",
+      "error"
+    )
+  );
+  issues.push(
+    ...checkLines(
+      code,
+      COLOR_PROP_RE,
+      "color-prop",
+      "Use semantic color tokens instead of hex values in color props",
+      "error"
+    )
+  );
   issues.push(
     ...checkLines(
       code,
@@ -613,7 +667,7 @@ function resolveHref(linkText, context) {
 function replaceRawColors(classes, colorMap) {
   let changed = false;
   let result = classes;
-  const accentColorRe = /\b((?:(?:hover|focus|active|group-hover|focus-visible|focus-within):)?)(bg|text|border|ring|outline|shadow|from|to|via)-(emerald|blue|violet|indigo|purple|teal|cyan|sky|rose|amber|red|green|yellow|pink|orange|fuchsia|lime)-(\d+)(?:\/\d+)?\b/g;
+  const accentColorRe = /\b((?:(?:[a-z][a-z0-9-]*:)*)?)(bg|text|border|ring|outline|shadow|from|to|via|divide|placeholder|decoration|caret|fill|stroke|accent)-(emerald|blue|violet|indigo|purple|teal|cyan|sky|rose|amber|red|green|yellow|pink|orange|fuchsia|lime)-(\d+)(?:\/\d+)?\b/g;
   result = result.replace(accentColorRe, (m, statePrefix, prefix, color, shade) => {
     const bareNoOpacity = m.replace(statePrefix, "").replace(/\/\d+$/, "");
     if (colorMap[bareNoOpacity]) {
@@ -668,7 +722,7 @@ function replaceRawColors(classes, colorMap) {
     }
     return m;
   });
-  const neutralColorRe = /\b((?:(?:hover|focus|active|group-hover|focus-visible|focus-within):)?)(bg|text|border|ring|outline|shadow)-(zinc|slate|gray|neutral|stone)-(\d+)(?:\/\d+)?\b/g;
+  const neutralColorRe = /\b((?:(?:[a-z][a-z0-9-]*:)*)?)(bg|text|border|ring|outline|shadow|divide|placeholder|decoration|caret|fill|stroke|accent)-(zinc|slate|gray|neutral|stone)-(\d+)(?:\/\d+)?\b/g;
   result = result.replace(neutralColorRe, (m, statePrefix, prefix, _color, shade) => {
     const bareNoOpacity = m.replace(statePrefix, "").replace(/\/\d+$/, "");
     if (colorMap[bareNoOpacity]) {
@@ -1041,6 +1095,15 @@ ${fixed}`;
     return fullMatch;
   });
   if (hadColorFix) fixes.push("raw colors \u2192 semantic tokens");
+  if (hadColorFix) {
+    const postFixIssues = validatePageQuality(fixed);
+    const postFixErrors = postFixIssues.filter(
+      (i) => i.severity === "error" && ["raw-color", "inline-style-color", "arbitrary-color", "svg-raw-color", "color-prop"].includes(i.type)
+    );
+    if (postFixErrors.length > 0) {
+      fixes.push(`post-fix re-validation found ${postFixErrors.length} remaining color issue(s)`);
+    }
+  }
   const selectRe = /<select\b[^>]*>([\s\S]*?)<\/select>/g;
   let hadSelectFix = false;
   fixed = fixed.replace(selectRe, (_match, inner) => {
@@ -1455,11 +1518,34 @@ function verifyIncrementalEdit(before, after) {
   }
   return issues;
 }
+async function validateSharedComponents(projectRoot) {
+  const sharedDir = join(projectRoot, "components", "shared");
+  let files;
+  try {
+    const entries = await readdir(sharedDir);
+    files = entries.filter((f) => f.endsWith(".tsx"));
+  } catch {
+    return [];
+  }
+  const allIssues = [];
+  for (const file of files) {
+    const code = await readFile(join(sharedDir, file), "utf-8");
+    const issues = validatePageQuality(code);
+    for (const issue of issues) {
+      allIssues.push({
+        ...issue,
+        message: `[shared/${file}] ${issue.message}`
+      });
+    }
+  }
+  return allIssues;
+}
 
 export {
   validatePageQuality,
   autoFixCode,
   formatIssues,
   checkDesignConsistency,
-  verifyIncrementalEdit
+  verifyIncrementalEdit,
+  validateSharedComponents
 };

package/dist/{chunk-4I7ATX6G.js → chunk-UZGT5APM.js}

@@ -6,7 +6,7 @@ import {
   getPageGroup,
   installPackages,
   sanitizeMetadataStrings
-} from "./chunk-VLBVBF6V.js";
+} from "./chunk-IFJK5OPI.js";
 import {
   toKebabCase
 } from "./chunk-4TLYDTT3.js";
@@ -2147,7 +2147,7 @@ async function regeneratePage(pageId, config, 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-PIDLFRWZ.js");
+  const { loadPlan: loadPlanForPath } = await import("./plan-generator-D2UBTVCN.js");
   const planForPath = loadPlanForPath(projectRoot);
   const filePath = routeToFsPath(projectRoot, route, planForPath || isAuth);
   await mkdir3(dirname3(filePath), { recursive: true });

package/dist/{code-generator-YSGVHVNN.js → code-generator-IZ6XM6WG.js}

@@ -12,11 +12,11 @@ import {
   regeneratePage,
   scanAndInstallSharedDeps,
   validateAndFixGeneratedCode
-} from "./chunk-4I7ATX6G.js";
-import "./chunk-VLBVBF6V.js";
+} from "./chunk-UZGT5APM.js";
+import "./chunk-IFJK5OPI.js";
 import "./chunk-4TLYDTT3.js";
-import "./chunk-E23FJX2I.js";
-import "./chunk-NOM47EB4.js";
+import "./chunk-NLL3SHN3.js";
+import "./chunk-U5SNPHVU.js";
 import "./chunk-3RG5ZIWI.js";
 export {
   buildAppLayoutCode,

package/dist/{design-constraints-HGNEY3W3.js → design-constraints-PFZDW2XW.js}

@@ -18,7 +18,7 @@ import {
   getDesignQualityForType,
   inferPageTypeFromRoute,
   selectContextualRules
-} from "./chunk-E23FJX2I.js";
+} from "./chunk-NLL3SHN3.js";
 import "./chunk-3RG5ZIWI.js";
 export {
   CORE_CONSTRAINTS,