@gemini-designer/mcp-server 0.1.2 → 0.1.29

package/src/context/styling-detector.ts

@@ -0,0 +1,460 @@
+/**
+ * Styling Approach Detection
+ *
+ * Auto-detects the styling approach used in a project by scanning for
+ * config files, package.json dependencies, and file patterns.
+ */
+
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+
+export type StylingApproach =
+  | 'tailwind'
+  | 'css-modules'
+  | 'styled-components'
+  | 'emotion'
+  | 'scss'
+  | 'vanilla-extract'
+  | 'panda-css'
+  | 'uno-css'
+  | 'stylex'
+  | 'css-in-js'
+  | 'vanilla-css';
+
+export interface StylingInfo {
+  approach: StylingApproach;
+  confidence: 'high' | 'medium' | 'low';
+  detectedFrom: string;
+  fileExtension: string;
+  importStatement: string;
+  usage: string;
+}
+
+interface PackageJson {
+  dependencies?: Record<string, string>;
+  devDependencies?: Record<string, string>;
+}
+
+/**
+ * Default styling info when nothing is detected
+ */
+const DEFAULT_STYLING: StylingInfo = {
+  approach: 'css-modules',
+  confidence: 'low',
+  detectedFrom: 'default fallback',
+  fileExtension: '.module.css',
+  importStatement: "import styles from './Component.module.css';",
+  usage: 'Use className={styles.className} pattern',
+};
+
+/**
+ * Styling approach configurations
+ */
+const STYLING_CONFIGS: Record<StylingApproach, Omit<StylingInfo, 'detectedFrom' | 'confidence'>> = {
+  tailwind: {
+    approach: 'tailwind',
+    fileExtension: '',
+    importStatement: '',
+    usage: 'Use Tailwind utility classes directly in className',
+  },
+  'css-modules': {
+    approach: 'css-modules',
+    fileExtension: '.module.css',
+    importStatement: "import styles from './Component.module.css';",
+    usage: 'Use className={styles.className} pattern',
+  },
+  'styled-components': {
+    approach: 'styled-components',
+    fileExtension: '.tsx',
+    importStatement: "import styled from 'styled-components';",
+    usage: 'Use const StyledDiv = styled.div`...`; pattern',
+  },
+  emotion: {
+    approach: 'emotion',
+    fileExtension: '.tsx',
+    importStatement: "import { css } from '@emotion/react';\nimport styled from '@emotion/styled';",
+    usage: 'Use css prop or styled.div pattern',
+  },
+  scss: {
+    approach: 'scss',
+    fileExtension: '.module.scss',
+    importStatement: "import styles from './Component.module.scss';",
+    usage: 'Use className={styles.className} with SCSS features',
+  },
+  'vanilla-extract': {
+    approach: 'vanilla-extract',
+    fileExtension: '.css.ts',
+    importStatement: "import { style } from '@vanilla-extract/css';",
+    usage: 'Define styles in .css.ts file, import and use in component',
+  },
+  'panda-css': {
+    approach: 'panda-css',
+    fileExtension: '',
+    importStatement: "import { css } from '../styled-system/css';",
+    usage: 'Use css() function from generated styled-system',
+  },
+  'uno-css': {
+    approach: 'uno-css',
+    fileExtension: '',
+    importStatement: "import 'virtual:uno.css';",
+    usage: 'Use utility classes similar to Tailwind',
+  },
+  stylex: {
+    approach: 'stylex',
+    fileExtension: '.stylex.ts',
+    importStatement: "import * as stylex from '@stylexjs/stylex';",
+    usage: 'Use stylex.create() and stylex.props()',
+  },
+  'css-in-js': {
+    approach: 'css-in-js',
+    fileExtension: '.tsx',
+    importStatement: '',
+    usage: 'Define styles as objects in component file',
+  },
+  'vanilla-css': {
+    approach: 'vanilla-css',
+    fileExtension: '.css',
+    importStatement: "import './Component.css';",
+    usage: 'Use className with plain CSS selectors',
+  },
+};
+
+/**
+ * Check if a file exists in the project root
+ */
+function fileExists(projectRoot: string, ...filenames: string[]): string | null {
+  for (const filename of filenames) {
+    const fullPath = path.join(projectRoot, filename);
+    if (fs.existsSync(fullPath)) {
+      return filename;
+    }
+  }
+  return null;
+}
+
+/**
+ * Read and parse package.json
+ */
+function readPackageJson(projectRoot: string): PackageJson | null {
+  try {
+    const pkgPath = path.join(projectRoot, 'package.json');
+    if (!fs.existsSync(pkgPath)) return null;
+    const content = fs.readFileSync(pkgPath, 'utf-8');
+    return JSON.parse(content) as PackageJson;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Check if a dependency exists in package.json
+ */
+function hasDependency(pkg: PackageJson | null, ...deps: string[]): string | null {
+  if (!pkg) return null;
+  const allDeps = { ...pkg.dependencies, ...pkg.devDependencies };
+  for (const dep of deps) {
+    if (allDeps[dep]) return dep;
+  }
+  return null;
+}
+
+/**
+ * Check for file patterns in the project
+ */
+function hasFilePattern(projectRoot: string, pattern: RegExp, maxDepth = 3): boolean {
+  function scan(dir: string, depth: number): boolean {
+    if (depth > maxDepth) return false;
+    try {
+      const entries = fs.readdirSync(dir, { withFileTypes: true });
+      for (const entry of entries) {
+        if (entry.name.startsWith('.') || entry.name === 'node_modules') continue;
+
+        if (entry.isFile() && pattern.test(entry.name)) {
+          return true;
+        }
+        if (entry.isDirectory()) {
+          if (scan(path.join(dir, entry.name), depth + 1)) return true;
+        }
+      }
+    } catch {
+      // Ignore read errors
+    }
+    return false;
+  }
+  return scan(projectRoot, 0);
+}
+
+/**
+ * Detect styling approach from project files
+ */
+export function detectStylingApproach(projectRoot: string): StylingInfo {
+  const pkg = readPackageJson(projectRoot);
+
+  // 1. Check for Tailwind (highest priority - very popular)
+  const tailwindConfig = fileExists(
+    projectRoot,
+    'tailwind.config.js',
+    'tailwind.config.ts',
+    'tailwind.config.mjs',
+    'tailwind.config.cjs'
+  );
+  if (tailwindConfig) {
+    return {
+      ...STYLING_CONFIGS['tailwind'],
+      confidence: 'high',
+      detectedFrom: tailwindConfig,
+    };
+  }
+  if (hasDependency(pkg, 'tailwindcss')) {
+    return {
+      ...STYLING_CONFIGS['tailwind'],
+      confidence: 'high',
+      detectedFrom: 'package.json: tailwindcss',
+    };
+  }
+
+  // 2. Check for Panda CSS
+  const pandaConfig = fileExists(
+    projectRoot,
+    'panda.config.ts',
+    'panda.config.js',
+    'panda.config.mjs'
+  );
+  if (pandaConfig) {
+    return {
+      ...STYLING_CONFIGS['panda-css'],
+      confidence: 'high',
+      detectedFrom: pandaConfig,
+    };
+  }
+  if (hasDependency(pkg, '@pandacss/dev')) {
+    return {
+      ...STYLING_CONFIGS['panda-css'],
+      confidence: 'high',
+      detectedFrom: 'package.json: @pandacss/dev',
+    };
+  }
+
+  // 3. Check for UnoCSS
+  const unoConfig = fileExists(projectRoot, 'uno.config.ts', 'uno.config.js', 'unocss.config.ts');
+  if (unoConfig) {
+    return {
+      ...STYLING_CONFIGS['uno-css'],
+      confidence: 'high',
+      detectedFrom: unoConfig,
+    };
+  }
+  if (hasDependency(pkg, 'unocss')) {
+    return {
+      ...STYLING_CONFIGS['uno-css'],
+      confidence: 'high',
+      detectedFrom: 'package.json: unocss',
+    };
+  }
+
+  // 4. Check for Vanilla Extract
+  if (hasDependency(pkg, '@vanilla-extract/css')) {
+    return {
+      ...STYLING_CONFIGS['vanilla-extract'],
+      confidence: 'high',
+      detectedFrom: 'package.json: @vanilla-extract/css',
+    };
+  }
+  if (hasFilePattern(projectRoot, /\.css\.ts$/)) {
+    return {
+      ...STYLING_CONFIGS['vanilla-extract'],
+      confidence: 'medium',
+      detectedFrom: 'file pattern: *.css.ts',
+    };
+  }
+
+  // 5. Check for StyleX
+  if (hasDependency(pkg, '@stylexjs/stylex')) {
+    return {
+      ...STYLING_CONFIGS['stylex'],
+      confidence: 'high',
+      detectedFrom: 'package.json: @stylexjs/stylex',
+    };
+  }
+
+  // 6. Check for styled-components
+  if (hasDependency(pkg, 'styled-components')) {
+    return {
+      ...STYLING_CONFIGS['styled-components'],
+      confidence: 'high',
+      detectedFrom: 'package.json: styled-components',
+    };
+  }
+  if (hasFilePattern(projectRoot, /\.styled\.(ts|tsx)$/)) {
+    return {
+      ...STYLING_CONFIGS['styled-components'],
+      confidence: 'medium',
+      detectedFrom: 'file pattern: *.styled.tsx',
+    };
+  }
+
+  // 7. Check for Emotion
+  if (hasDependency(pkg, '@emotion/react', '@emotion/styled')) {
+    return {
+      ...STYLING_CONFIGS['emotion'],
+      confidence: 'high',
+      detectedFrom: 'package.json: @emotion/*',
+    };
+  }
+
+  // 8. Check for SCSS/SASS
+  if (hasDependency(pkg, 'sass', 'node-sass')) {
+    // Check for CSS Modules with SCSS
+    if (hasFilePattern(projectRoot, /\.module\.scss$/)) {
+      return {
+        ...STYLING_CONFIGS['scss'],
+        confidence: 'high',
+        detectedFrom: 'file pattern: *.module.scss',
+      };
+    }
+    return {
+      ...STYLING_CONFIGS['scss'],
+      confidence: 'medium',
+      detectedFrom: 'package.json: sass',
+    };
+  }
+
+  // 9. Check for CSS Modules (file pattern)
+  if (hasFilePattern(projectRoot, /\.module\.css$/)) {
+    return {
+      ...STYLING_CONFIGS['css-modules'],
+      confidence: 'high',
+      detectedFrom: 'file pattern: *.module.css',
+    };
+  }
+
+  // 10. Check for Next.js (often uses CSS Modules by default)
+  const nextConfig = fileExists(projectRoot, 'next.config.js', 'next.config.ts', 'next.config.mjs');
+  if (nextConfig) {
+    return {
+      ...STYLING_CONFIGS['css-modules'],
+      confidence: 'medium',
+      detectedFrom: `${nextConfig} (Next.js default)`,
+    };
+  }
+
+  // 11. Default to CSS Modules (modern safe default)
+  return DEFAULT_STYLING;
+}
+
+/**
+ * Get styling instructions for the prompt
+ */
+export function getStylingInstructions(info: StylingInfo): string {
+  const lines = [
+    `## Detected Styling Approach: ${info.approach.toUpperCase()}`,
+    `Confidence: ${info.confidence}`,
+    `Detected from: ${info.detectedFrom}`,
+    '',
+  ];
+
+  switch (info.approach) {
+    case 'tailwind':
+      lines.push(
+        '### Tailwind CSS Instructions',
+        '- Use Tailwind utility classes directly in className',
+        '- NO separate CSS file needed',
+        '- Use @apply in global.css if needed for complex reusable styles',
+        '- Example: className="flex items-center justify-between p-4 bg-gradient-to-r from-purple-500 to-pink-500"',
+        '- Use tailwind.config variants for animations'
+      );
+      break;
+
+    case 'css-modules':
+      lines.push(
+        '### CSS Modules Instructions',
+        `- Create separate ${info.fileExtension} file`,
+        `- Import: ${info.importStatement}`,
+        '- Use: className={styles.container}',
+        '- CSS classes are locally scoped by default',
+        '- Use :global() for global styles if needed'
+      );
+      break;
+
+    case 'styled-components':
+      lines.push(
+        '### styled-components Instructions',
+        `- Import: ${info.importStatement}`,
+        '- Define styled components: const Button = styled.button`...`;',
+        '- Use props: ${props => props.primary && "background: blue;"}',
+        '- NO separate CSS file needed - styles in component file'
+      );
+      break;
+
+    case 'emotion':
+      lines.push(
+        '### Emotion Instructions',
+        `- Import: ${info.importStatement}`,
+        '- Use css prop: <div css={css`color: hotpink;`}>',
+        '- Or styled API: const Button = styled.button`...`;',
+        '- NO separate CSS file needed'
+      );
+      break;
+
+    case 'scss':
+      lines.push(
+        '### SCSS/SASS Instructions',
+        `- Create separate ${info.fileExtension} file`,
+        `- Import: ${info.importStatement}`,
+        '- Use: className={styles.container}',
+        '- Can use SCSS features: nesting, variables, mixins'
+      );
+      break;
+
+    case 'vanilla-extract':
+      lines.push(
+        '### Vanilla Extract Instructions',
+        `- Create ${info.fileExtension} file for styles`,
+        `- Import: ${info.importStatement}`,
+        '- Define: export const container = style({ display: "flex" });',
+        '- Use: className={container}',
+        '- Type-safe CSS-in-JS with zero runtime'
+      );
+      break;
+
+    case 'panda-css':
+      lines.push(
+        '### Panda CSS Instructions',
+        `- Import: ${info.importStatement}`,
+        '- Use: className={css({ display: "flex", padding: "4" })}',
+        '- Utility-first like Tailwind but with type safety',
+        '- NO separate CSS file needed'
+      );
+      break;
+
+    case 'uno-css':
+      lines.push(
+        '### UnoCSS Instructions',
+        '- Use utility classes similar to Tailwind',
+        '- className="flex items-center p-4"',
+        '- NO separate CSS file needed',
+        '- Supports attributify mode if configured'
+      );
+      break;
+
+    case 'stylex':
+      lines.push(
+        '### StyleX Instructions',
+        `- Import: ${info.importStatement}`,
+        '- Define: const styles = stylex.create({ container: { display: "flex" } });',
+        '- Use: {...stylex.props(styles.container)}',
+        '- Type-safe, optimized by Meta'
+      );
+      break;
+
+    default:
+      lines.push(
+        '### Vanilla CSS Instructions',
+        `- Create separate ${info.fileExtension} file`,
+        `- Import: ${info.importStatement}`,
+        '- Use className="container" with plain CSS selectors'
+      );
+  }
+
+  return lines.join('\n');
+}

package/src/design/principles.ts

@@ -91,24 +91,24 @@ export const DESIGN_PRINCIPLES_COMPACT = `
  * Font blacklist for explicit filtering
  */
 export const BANNED_FONTS = [
-    'Inter',
-    'Roboto',
-    'Arial',
-    'Open Sans',
-    'Lato',
-    'Helvetica',
-    'system-ui',
-    'sans-serif',
-    '-apple-system',
-    'BlinkMacSystemFont',
+  'Inter',
+  'Roboto',
+  'Arial',
+  'Open Sans',
+  'Lato',
+  'Helvetica',
+  'system-ui',
+  'sans-serif',
+  '-apple-system',
+  'BlinkMacSystemFont',
 ];
 
 /**
  * Suggested distinctive fonts by category
  */
 export const SUGGESTED_FONTS = {
-    display: ['Bricolage Grotesque', 'Playfair Display', 'Outfit', 'Space Grotesk'],
-    body: ['Plus Jakarta Sans', 'Source Sans 3', 'IBM Plex Sans', 'Crimson Pro'],
-    code: ['JetBrains Mono', 'Fira Code', 'IBM Plex Mono', 'Cascadia Code'],
-    editorial: ['Newsreader', 'Playfair Display', 'Cormorant Garamond', 'Libre Baskerville'],
+  display: ['Bricolage Grotesque', 'Playfair Display', 'Outfit', 'Space Grotesk'],
+  body: ['Plus Jakarta Sans', 'Source Sans 3', 'IBM Plex Sans', 'Crimson Pro'],
+  code: ['JetBrains Mono', 'Fira Code', 'IBM Plex Mono', 'Cascadia Code'],
+  editorial: ['Newsreader', 'Playfair Display', 'Cormorant Garamond', 'Libre Baskerville'],
 };

package/src/generation/gemini-client.ts

@@ -9,86 +9,83 @@ import { GoogleGenerativeAI } from '@google/generative-ai';
 import { Config } from '../config/index.js';
 
 export type GeminiUserContent =
-    | string
-    | Array<
-          | { text: string }
-          | { inlineData: { mimeType: string; data: string } }
-      >;
+  | string
+  | Array<{ text: string } | { inlineData: { mimeType: string; data: string } }>;
 
 // Cache the client instance
 let genAI: GoogleGenerativeAI | null = null;
 
 export interface GenerateOptions {
-    toolName?: string;
+  toolName?: string;
 }
 
 /**
  * Get or create the Gemini client
  */
 function getClient(config: Config): GoogleGenerativeAI {
-    if (!config.apiKey) {
-        throw new Error('Gemini API key not configured. Set GEMINI_API_KEY environment variable.');
-    }
+  if (!config.apiKey) {
+    throw new Error('Gemini API key not configured. Set GEMINI_API_KEY environment variable.');
+  }
 
-    if (!genAI) {
-        genAI = new GoogleGenerativeAI(config.apiKey);
-    }
+  if (!genAI) {
+    genAI = new GoogleGenerativeAI(config.apiKey);
+  }
 
-    return genAI;
+  return genAI;
 }
 
 /**
  * Generate content using Gemini
  */
 export async function generateWithGemini(
-    config: Config,
-    systemPrompt: string,
-    userPrompt: GeminiUserContent,
-    options?: GenerateOptions
+  config: Config,
+  systemPrompt: string,
+  userPrompt: GeminiUserContent,
+  options?: GenerateOptions
 ): Promise<string> {
-    // If remote mode, delegate to remote client
-    if (config.mode === 'remote') {
-        const { generateWithRemote } = await import('./remote-client.js');
-        return generateWithRemote(config, systemPrompt, userPrompt, options?.toolName);
-    }
-
-    // If local mode is configured to use an OpenAI-compatible proxy (e.g. LiteLLM)
-    if (config.localProvider === 'litellm') {
-        const { generateWithLiteLLM } = await import('./litellm-client.js');
-        return generateWithLiteLLM(config, systemPrompt, userPrompt, options?.toolName);
-    }
-
-    const client = getClient(config);
-
-    // Use model from config (default: gemini-2.5-flash-lite)
-    const model = client.getGenerativeModel({
-        model: config.model,
-        systemInstruction: systemPrompt,
-    });
-
-    const result = await model.generateContent(userPrompt as any);
-    const response = result.response;
-    const text = response.text();
-
-    if (config.debug) {
-        console.error('[gemini] Tool:', options?.toolName || '(unknown)');
-        console.error('[gemini] Response length:', text.length);
-        console.error('[gemini] Usage:', response.usageMetadata);
-    }
-
-    return text;
+  // If remote mode, delegate to remote client
+  if (config.mode === 'remote') {
+    const { generateWithRemote } = await import('./remote-client.js');
+    return generateWithRemote(config, systemPrompt, userPrompt, options?.toolName);
+  }
+
+  // If local mode is configured to use an OpenAI-compatible proxy (e.g. LiteLLM)
+  if (config.localProvider === 'litellm') {
+    const { generateWithLiteLLM } = await import('./litellm-client.js');
+    return generateWithLiteLLM(config, systemPrompt, userPrompt, options?.toolName);
+  }
+
+  const client = getClient(config);
+
+  // Use model from config (default: gemini-2.5-flash-lite)
+  const model = client.getGenerativeModel({
+    model: config.model,
+    systemInstruction: systemPrompt,
+  });
+
+  const result = await model.generateContent(userPrompt);
+  const response = result.response;
+  const text = response.text();
+
+  if (config.debug) {
+    console.error('[gemini] Tool:', options?.toolName || '(unknown)');
+    console.error('[gemini] Response length:', text.length);
+    console.error('[gemini] Usage:', response.usageMetadata);
+  }
+
+  return text;
 }
 
 /**
  * Count tokens for a given text (useful for quota tracking)
  */
 export async function countTokens(config: Config, text: string): Promise<number> {
-    if (config.localProvider === 'litellm') {
-        throw new Error('countTokens is not supported when localProvider=litellm');
-    }
-    const client = getClient(config);
-    const model = client.getGenerativeModel({ model: config.model });
-
-    const result = await model.countTokens(text);
-    return result.totalTokens;
+  if (config.localProvider === 'litellm') {
+    throw new Error('countTokens is not supported when localProvider=litellm');
+  }
+  const client = getClient(config);
+  const model = client.getGenerativeModel({ model: config.model });
+
+  const result = await model.countTokens(text);
+  return result.totalTokens;
 }