popeye-cli 1.5.0 → 1.6.0

package/src/generators/all.ts

@@ -10,6 +10,12 @@ import type { GenerationResult } from './python.js';
 import { generateFullstackProject } from './fullstack.js';
 import { generateWebsiteProject } from './website.js';
 import type { WebsiteContentContext } from './website-context.js';
+import { buildWebsiteContext, validateWebsiteContext } from './website-context.js';
+import {
+  generateDesignTokensPackage as generateDesignTokensPackageImpl,
+  generateUiPackage as generateUiPackageImpl,
+} from './shared-packages.js';
+import type { BrandColorOptions } from './shared-packages.js';
 
 /**
  * Options for all project generation
@@ -344,346 +350,25 @@ Generated by [Popeye CLI](https://github.com/popeye-cli/popeye)
 
 /**
  * Generate design tokens package
+ * Delegates to shared-packages.ts with optional brand color passthrough
  */
-export function generateDesignTokensPackage(projectName: string): {
+export function generateDesignTokensPackage(
+  projectName: string,
+  brandColors?: BrandColorOptions
+): {
   files: Array<{ path: string; content: string }>;
 } {
-  return {
-    files: [
-      {
-        path: 'package.json',
-        content: JSON.stringify(
-          {
-            name: `@${projectName}/design-tokens`,
-            version: '1.0.0',
-            type: 'module',
-            main: './dist/index.js',
-            types: './dist/index.d.ts',
-            exports: {
-              '.': './dist/index.js',
-              './tailwind': './dist/tailwind-preset.js',
-            },
-            scripts: {
-              build: 'tsc',
-              dev: 'tsc --watch',
-            },
-            devDependencies: {
-              typescript: '^5.3.3',
-            },
-          },
-          null,
-          2
-        ),
-      },
-      {
-        path: 'tsconfig.json',
-        content: JSON.stringify(
-          {
-            compilerOptions: {
-              target: 'ES2020',
-              module: 'ESNext',
-              moduleResolution: 'bundler',
-              declaration: true,
-              outDir: './dist',
-              strict: true,
-              esModuleInterop: true,
-              skipLibCheck: true,
-            },
-            include: ['src'],
-          },
-          null,
-          2
-        ),
-      },
-      {
-        path: 'src/index.ts',
-        content: `/**
- * Design tokens for ${projectName}
- */
-
-export * from './colors.js';
-export * from './typography.js';
-`,
-      },
-      {
-        path: 'src/colors.ts',
-        content: `/**
- * Color palette
- */
-
-export const colors = {
-  primary: {
-    50: '#f0f9ff',
-    100: '#e0f2fe',
-    200: '#bae6fd',
-    300: '#7dd3fc',
-    400: '#38bdf8',
-    500: '#0ea5e9',
-    600: '#0284c7',
-    700: '#0369a1',
-    800: '#075985',
-    900: '#0c4a6e',
-  },
-  secondary: {
-    50: '#f8fafc',
-    100: '#f1f5f9',
-    200: '#e2e8f0',
-    300: '#cbd5e1',
-    400: '#94a3b8',
-    500: '#64748b',
-    600: '#475569',
-    700: '#334155',
-    800: '#1e293b',
-    900: '#0f172a',
-  },
-} as const;
-
-export type ColorScale = typeof colors.primary;
-export type Colors = typeof colors;
-`,
-      },
-      {
-        path: 'src/typography.ts',
-        content: `/**
- * Typography settings
- */
-
-export const typography = {
-  fontFamily: {
-    sans: ['Inter', 'system-ui', 'sans-serif'],
-    mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
-  },
-  fontSize: {
-    xs: ['0.75rem', { lineHeight: '1rem' }],
-    sm: ['0.875rem', { lineHeight: '1.25rem' }],
-    base: ['1rem', { lineHeight: '1.5rem' }],
-    lg: ['1.125rem', { lineHeight: '1.75rem' }],
-    xl: ['1.25rem', { lineHeight: '1.75rem' }],
-    '2xl': ['1.5rem', { lineHeight: '2rem' }],
-    '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
-    '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
-    '5xl': ['3rem', { lineHeight: '1' }],
-    '6xl': ['3.75rem', { lineHeight: '1' }],
-  },
-} as const;
-
-export type Typography = typeof typography;
-`,
-      },
-      {
-        path: 'src/tailwind-preset.ts',
-        content: `/**
- * Tailwind CSS preset with design tokens
- */
-
-import { colors } from './colors.js';
-import { typography } from './typography.js';
-
-export const preset = {
-  theme: {
-    extend: {
-      colors,
-      fontFamily: typography.fontFamily,
-      fontSize: typography.fontSize,
-    },
-  },
-};
-
-export default preset;
-`,
-      },
-    ],
-  };
+  return generateDesignTokensPackageImpl(projectName, brandColors);
 }
 
 /**
  * Generate UI components package
+ * Delegates to shared-packages.ts
  */
 export function generateUiPackage(projectName: string): {
   files: Array<{ path: string; content: string }>;
 } {
-  return {
-    files: [
-      {
-        path: 'package.json',
-        content: JSON.stringify(
-          {
-            name: `@${projectName}/ui`,
-            version: '1.0.0',
-            type: 'module',
-            main: './dist/index.js',
-            types: './dist/index.d.ts',
-            exports: {
-              '.': './dist/index.js',
-              './button': './dist/button.js',
-              './card': './dist/card.js',
-            },
-            scripts: {
-              build: 'tsc',
-              dev: 'tsc --watch',
-            },
-            dependencies: {
-              clsx: '^2.1.0',
-              'tailwind-merge': '^2.2.0',
-            },
-            peerDependencies: {
-              react: '>=18.0.0',
-              'react-dom': '>=18.0.0',
-            },
-            devDependencies: {
-              '@types/react': '^18.2.0',
-              '@types/react-dom': '^18.2.0',
-              typescript: '^5.3.3',
-            },
-          },
-          null,
-          2
-        ),
-      },
-      {
-        path: 'tsconfig.json',
-        content: JSON.stringify(
-          {
-            compilerOptions: {
-              target: 'ES2020',
-              module: 'ESNext',
-              moduleResolution: 'bundler',
-              declaration: true,
-              outDir: './dist',
-              strict: true,
-              esModuleInterop: true,
-              skipLibCheck: true,
-              jsx: 'react-jsx',
-            },
-            include: ['src'],
-          },
-          null,
-          2
-        ),
-      },
-      {
-        path: 'src/index.ts',
-        content: `/**
- * Shared UI components for ${projectName}
- */
-
-export * from './button.js';
-export * from './card.js';
-export * from './utils.js';
-`,
-      },
-      {
-        path: 'src/utils.ts',
-        content: `import { clsx, type ClassValue } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
-`,
-      },
-      {
-        path: 'src/button.tsx',
-        content: `import * as React from 'react';
-import { cn } from './utils.js';
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
-  size?: 'sm' | 'md' | 'lg';
-}
-
-export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant = 'primary', size = 'md', ...props }, ref) => {
-    return (
-      <button
-        className={cn(
-          'inline-flex items-center justify-center rounded-md font-medium transition-colors',
-          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
-          'disabled:pointer-events-none disabled:opacity-50',
-          {
-            // Variants
-            'bg-primary-600 text-white hover:bg-primary-500': variant === 'primary',
-            'bg-secondary-100 text-secondary-900 hover:bg-secondary-200': variant === 'secondary',
-            'border border-secondary-300 bg-transparent hover:bg-secondary-50': variant === 'outline',
-            'bg-transparent hover:bg-secondary-100': variant === 'ghost',
-            // Sizes
-            'h-8 px-3 text-sm': size === 'sm',
-            'h-10 px-4 text-sm': size === 'md',
-            'h-12 px-6 text-base': size === 'lg',
-          },
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-
-Button.displayName = 'Button';
-`,
-      },
-      {
-        path: 'src/card.tsx',
-        content: `import * as React from 'react';
-import { cn } from './utils.js';
-
-export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {}
-
-export const Card = React.forwardRef<HTMLDivElement, CardProps>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn(
-        'rounded-lg border border-secondary-200 bg-white shadow-sm',
-        className
-      )}
-      {...props}
-    />
-  )
-);
-
-Card.displayName = 'Card';
-
-export const CardHeader = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn('flex flex-col space-y-1.5 p-6', className)}
-    {...props}
-  />
-));
-
-CardHeader.displayName = 'CardHeader';
-
-export const CardTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-  <h3
-    ref={ref}
-    className={cn('text-lg font-semibold leading-none tracking-tight', className)}
-    {...props}
-  />
-));
-
-CardTitle.displayName = 'CardTitle';
-
-export const CardContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
-));
-
-CardContent.displayName = 'CardContent';
-`,
-      },
-    ],
-  };
+  return generateUiPackageImpl(projectName);
 }
 
 /**
@@ -711,6 +396,30 @@ export async function generateAllProject(
     await ensureDir(path.join(projectDir, 'packages', 'contracts'));
     await ensureDir(path.join(projectDir, '.popeye'));
 
+    // Auto-build content context if not provided
+    let contentContext = options.contentContext;
+    let contextWarning: string | undefined;
+    if (!contentContext) {
+      try {
+        contentContext = await buildWebsiteContext(projectDir, projectName);
+      } catch (e) {
+        contextWarning = e instanceof Error ? e.message : 'Unknown error building website context';
+        // Proceed with defaults, but warning is logged below
+      }
+    }
+    if (contextWarning) {
+      // Log warning so user sees it, but don't block generation
+      console.warn(`[website-context] Warning: ${contextWarning}`);
+    }
+
+    // Soft validation: log quality issues without blocking monorepo generation
+    if (contentContext) {
+      const validation = validateWebsiteContext(contentContext, projectName);
+      for (const issue of [...validation.issues, ...validation.warnings]) {
+        console.warn(`[website-context] ${issue}`);
+      }
+    }
+
     // Generate fullstack first (creates apps/frontend and apps/backend)
     const fullstackResult = await generateFullstackProject(spec, outputDir);
     if (!fullstackResult.success) {
@@ -724,7 +433,7 @@ export async function generateAllProject(
       workspaceMode: true,
       skipDocker: false, // Website needs its own Dockerfile
       skipReadme: false,
-      contentContext: options.contentContext,
+      contentContext: contentContext,
     });
     if (!websiteResult.success) {
       return {
@@ -734,8 +443,11 @@ export async function generateAllProject(
     }
     filesCreated.push(...websiteResult.filesCreated);
 
-    // Generate shared packages
-    const designTokens = generateDesignTokensPackage(projectName);
+    // Generate shared packages (pass brand colors if available)
+    const brandColors: BrandColorOptions | undefined = contentContext?.brand?.primaryColor
+      ? { primaryColor: contentContext.brand.primaryColor }
+      : undefined;
+    const designTokens = generateDesignTokensPackage(projectName, brandColors);
     for (const file of designTokens.files) {
       const filePath = path.join(projectDir, 'packages', 'design-tokens', file.path);
       await ensureDir(path.dirname(filePath));

package/src/generators/doc-parser.ts

@@ -24,36 +24,86 @@ export function stripCodeFences(text: string): string {
 
 /**
  * Extract the real product name from docs or specification
- * Finds all "# Name — tagline" headings and picks the shortest (most likely the product name)
+ *
+ * Priority chain (first match wins):
+ * 1. Parsed docs: "# ProductName -- tagline" heading (picks shortest)
+ * 2. Specification: "# ProductName" heading
+ * 3. Specification: "Product:" / "Name:" / "App:" label
+ * 4. package.json "name" field from workspace root (passed via specification context)
+ * 5. undefined (caller falls back to directory name)
  */
-export function extractProductName(docs: string, specification?: string): string | undefined {
-  // Collect all "# Name — tagline" headings, pick the shortest name
+export function extractProductName(
+  docs: string,
+  specification?: string,
+  packageJsonName?: string
+): string | undefined {
+  // 1. Collect all "# Name -- tagline" headings, pick the shortest name
   // Reason: sub-documents like "Gateco UI Color System" are longer than "Gateco"
-  const headingPattern = /^#\s+([A-Z][a-zA-Z0-9]+(?:[ \t]+[A-Z][a-zA-Z0-9]+)*)(?:[ \t]*[—\-–|:][ \t])/gm;
+  const headingPattern = /^#\s+([A-Z][a-zA-Z0-9]+(?:[ \t]+[A-Z][a-zA-Z0-9]+)*)(?:[ \t]*(?:--|[—–|:])[ \t])/gm;
   const candidates: string[] = [];
   let match;
   while ((match = headingPattern.exec(docs)) !== null) {
     candidates.push(match[1].trim());
   }
   if (candidates.length > 0) {
-    // Prefer shortest name (product name is typically 1-2 words)
     candidates.sort((a, b) => a.length - b.length);
     return candidates[0];
   }
 
-  // Pattern: "**Project Name**: ProductName" in specification
+  // 2. "# ProductName" heading in specification (standalone heading, not sub-doc)
+  // Reason: Exclude common section headings like "Overview", "Introduction", "Summary"
+  if (specification) {
+    const commonHeadings = /^(Overview|Introduction|Summary|Features|Architecture|Requirements|Setup|Installation|Configuration|Specification|Appendix|Conclusion|References)$/i;
+    const specHeading = specification.match(/^#\s+([A-Z][a-zA-Z0-9]+(?:\s+[A-Z][a-zA-Z0-9]+)*)\s*$/m);
+    if (specHeading && !commonHeadings.test(specHeading[1].trim())) {
+      return specHeading[1].trim();
+    }
+  }
+
+  // 3. "Product:" / "Name:" / "App:" label in specification
   if (specification) {
     const nameMatch = specification.match(/\*\*Project\s+Name\*\*:\s*(.+)/i);
     if (nameMatch) return nameMatch[1].trim();
+
+    const labelMatch = specification.match(/(?:^|\n)\s*(?:Product|Name|App)\s*:\s*(.+)/i);
+    if (labelMatch) {
+      const value = labelMatch[1].trim().replace(/\*\*/g, '');
+      if (value.length > 0 && value.length < 60) return value;
+    }
   }
 
-  // Pattern: "# ProductName" in spec/product doc sections only
+  // 4. "# ProductName" in spec/product doc sections only
   const sectionHeading = docs.match(/^---\s+\S*(?:spec|product)\S*\s+---\n#\s+([A-Z][a-zA-Z0-9]+)/im);
   if (sectionHeading) return sectionHeading[1].trim();
 
+  // 5. package.json name (strip @scope/ prefix and convert to title case)
+  if (packageJsonName) {
+    const cleaned = packageJsonName
+      .replace(/^@[^/]+\//, '') // Strip scope
+      .replace(/[-_]/g, ' ')
+      .replace(/\b\w/g, (c) => c.toUpperCase())
+      .trim();
+    if (cleaned.length > 0) return cleaned;
+  }
+
   return undefined;
 }
 
+/**
+ * Check if a product name looks like a directory name rather than a real product name
+ * Used by the quality gate to flag suspicious names
+ *
+ * @param name - The product name to check
+ * @returns True if the name looks suspicious (likely a directory name)
+ */
+export function isSuspiciousProductName(name: string): boolean {
+  const suspiciousNames = ['my-app', 'my-project', 'project', 'app', 'website', 'frontend'];
+  if (suspiciousNames.includes(name.toLowerCase())) return true;
+  // Hyphenated lowercase strings like "read-all-files" are likely directory names
+  if (/^[a-z]+-[a-z]+(-[a-z]+)*$/.test(name)) return true;
+  return false;
+}
+
 /**
  * Extract a tagline from docs (text after em-dash in first heading)
  * When productName is provided, prefer tagline from the heading containing that name
@@ -123,16 +173,37 @@ export function extractDescription(docs: string, specification?: string): string
   return undefined;
 }
 
+/** Regex to filter out dev-task items that aren't real product features */
+const DEV_TASK_VERBS = /^(?:implement|fix|refactor|add tests|upgrade|migrate|configure|setup|install|deploy|debug|create|build|write|update|remove|delete)/i;
+
 /**
  * Extract features from docs and specification
- * Looks for bullet/numbered lists in sections about features, principles, capabilities
+ * Docs-first: extracts from docs only; falls back to specification if empty
+ * Filters out dev-task items (implement, fix, refactor, etc.)
  */
 export function extractFeatures(
   docs: string,
   specification?: string
+): Array<{ title: string; description: string }> {
+  // Docs-first: try docs only, then fall back to spec
+  // Reason: specification often contains dev tasks, not user-facing features
+  const docsFeatures = extractFeaturesFromSource(docs);
+  if (docsFeatures.length > 0) return docsFeatures;
+
+  if (specification) {
+    return extractFeaturesFromSource(specification);
+  }
+
+  return [];
+}
+
+/**
+ * Extract features from a single text source
+ */
+function extractFeaturesFromSource(
+  source: string
 ): Array<{ title: string; description: string }> {
   const features: Array<{ title: string; description: string }> = [];
-  const source = docs + '\n' + (specification || '');
 
   // Split into sections by heading
   const sectionPattern = /^#{1,3}\s+(.+)$/gm;
@@ -173,13 +244,17 @@ export function extractFeatures(
       // Try "**bold title** - description" pattern
       const boldWithDesc = text.match(/^\*\*(.+?)\*\*\s*[-–:]\s*(.+)/);
       if (boldWithDesc) {
+        const title = boldWithDesc[1].trim();
+        // Filter out dev-task items
+        if (DEV_TASK_VERBS.test(title)) continue;
         features.push({
-          title: boldWithDesc[1].trim(),
+          title,
           description: boldWithDesc[2].trim().slice(0, 150),
         });
       } else if (/^\*\*.+\*\*/.test(text)) {
         // Bold title with no trailing description: "**Vector DB agnostic**"
         const title = text.replace(/\*\*/g, '').trim();
+        if (DEV_TASK_VERBS.test(title)) continue;
         if (title.length > 3 && title.length < 80) {
           features.push({ title, description: title });
         }
@@ -187,6 +262,8 @@ export function extractFeatures(
         const cleaned = text.replace(/\*\*/g, '');
         // Split on sentence-level delimiters only; keep hyphens in compound words
         const titlePart = cleaned.split(/[.,:;—–]/)[0].trim();
+        // Filter out dev-task items
+        if (DEV_TASK_VERBS.test(titlePart)) continue;
         if (titlePart.length > 3 && titlePart.length < 60) {
           features.push({
             title: titlePart,