@gemini-designer/mcp-server 0.1.2 → 0.1.29

package/src/tokens/sync.ts

@@ -10,203 +10,237 @@
 
 import * as path from 'node:path';
 
-export type TokenType = 'color' | 'dimension' | 'fontFamily' | 'fontWeight' | 'number' | 'string' | 'shadow' | 'duration' | 'easing';
+export type TokenType =
+  | 'color'
+  | 'dimension'
+  | 'fontFamily'
+  | 'fontWeight'
+  | 'number'
+  | 'string'
+  | 'shadow'
+  | 'duration'
+  | 'easing';
 
 export interface Token {
-    name: string; // normalized token name, e.g. color.primary
-    value: string;
-    type: TokenType;
-    description?: string;
-    source?: {
-        file?: string;
-        originalName?: string;
-    };
+  name: string; // normalized token name, e.g. color.primary
+  value: string;
+  type: TokenType;
+  description?: string;
+  source?: {
+    file?: string;
+    originalName?: string;
+  };
 }
 
 export interface TokenParseResult {
-    tokens: Token[];
-    warnings: string[];
+  tokens: Token[];
+  warnings: string[];
 }
 
 function isColorValue(v: string): boolean {
-    const s = v.trim().toLowerCase();
-    return (
-        /^#([0-9a-f]{3,8})$/.test(s) ||
-        /^rgb\(/.test(s) ||
-        /^rgba\(/.test(s) ||
-        /^hsl\(/.test(s) ||
-        /^hsla\(/.test(s) ||
-        /^oklch\(/.test(s) ||
-        /^oklab\(/.test(s)
-    );
+  const s = v.trim().toLowerCase();
+  return (
+    /^#([0-9a-f]{3,8})$/.test(s) ||
+    /^rgb\(/.test(s) ||
+    /^rgba\(/.test(s) ||
+    /^hsl\(/.test(s) ||
+    /^hsla\(/.test(s) ||
+    /^oklch\(/.test(s) ||
+    /^oklab\(/.test(s)
+  );
 }
 
 function isDimensionValue(v: string): boolean {
-    const s = v.trim().toLowerCase();
-    return /^-?\d+(\.\d+)?(px|rem|em|vh|vw|%|ch|ex)$/.test(s);
+  const s = v.trim().toLowerCase();
+  return /^-?\d+(\.\d+)?(px|rem|em|vh|vw|%|ch|ex)$/.test(s);
 }
 
 function isDurationValue(v: string): boolean {
-    const s = v.trim().toLowerCase();
-    return /^\d+(\.\d+)?(ms|s)$/.test(s);
+  const s = v.trim().toLowerCase();
+  return /^\d+(\.\d+)?(ms|s)$/.test(s);
 }
 
 function inferTokenType(name: string, value: string): TokenType {
-    const n = name.toLowerCase();
-    const v = value.trim();
-    if (isColorValue(v) || n.includes('color') || n.includes('bg') || n.includes('foreground') || n.includes('surface')) return 'color';
-    if (isDurationValue(v) || n.includes('duration') || n.includes('transition')) return 'duration';
-    if (n.includes('easing') || n.includes('ease')) return 'easing';
-    if (n.includes('shadow') || v.includes('rgba') && v.includes('px')) return 'shadow';
-    if (n.includes('font') && n.includes('family')) return 'fontFamily';
-    if (n.includes('weight')) return 'fontWeight';
-    if (isDimensionValue(v) || n.includes('space') || n.includes('radius') || n.includes('size') || n.includes('gap')) return 'dimension';
-    if (/^-?\d+(\.\d+)?$/.test(v)) return 'number';
-    return 'string';
+  const n = name.toLowerCase();
+  const v = value.trim();
+  if (
+    isColorValue(v) ||
+    n.includes('color') ||
+    n.includes('bg') ||
+    n.includes('foreground') ||
+    n.includes('surface')
+  )
+    return 'color';
+  if (isDurationValue(v) || n.includes('duration') || n.includes('transition')) return 'duration';
+  if (n.includes('easing') || n.includes('ease')) return 'easing';
+  if (n.includes('shadow') || (v.includes('rgba') && v.includes('px'))) return 'shadow';
+  if (n.includes('font') && n.includes('family')) return 'fontFamily';
+  if (n.includes('weight')) return 'fontWeight';
+  if (
+    isDimensionValue(v) ||
+    n.includes('space') ||
+    n.includes('radius') ||
+    n.includes('size') ||
+    n.includes('gap')
+  )
+    return 'dimension';
+  if (/^-?\d+(\.\d+)?$/.test(v)) return 'number';
+  return 'string';
 }
 
 function normalizeCssVarNameToTokenName(cssVar: string): string {
-    // '--color-primary' -> 'color.primary'
-    // '--radius-md' -> 'radius.md'
-    let n = cssVar.trim();
-    if (n.startsWith('--')) n = n.slice(2);
-    n = n.replace(/\s+/g, '-');
-    // Convert separators to dots for nesting
-    return n
-        .replace(/__/g, '.')
-        .replace(/--/g, '.')
-        .replace(/-/g, '.')
-        .replace(/\.+/g, '.')
-        .replace(/^\./, '')
-        .replace(/\.$/, '');
+  // '--color-primary' -> 'color.primary'
+  // '--radius-md' -> 'radius.md'
+  let n = cssVar.trim();
+  if (n.startsWith('--')) n = n.slice(2);
+  n = n.replace(/\s+/g, '-');
+  // Convert separators to dots for nesting
+  return n
+    .replace(/__/g, '.')
+    .replace(/--/g, '.')
+    .replace(/-/g, '.')
+    .replace(/\.+/g, '.')
+    .replace(/^\./, '')
+    .replace(/\.$/, '');
 }
 
 export function parseCssVars(content: string, sourceFile?: string): TokenParseResult {
-    const warnings: string[] = [];
-    const tokens: Token[] = [];
-
-    // Very simple parse: extract any --var: value; pairs
-    const re = /(--[A-Za-z0-9_-]+)\s*:\s*([^;\n\r]+)\s*;/g;
-    let match: RegExpExecArray | null;
-    const seen = new Set<string>();
-
-    while ((match = re.exec(content))) {
-        const originalName = match[1];
-        const value = match[2].trim();
-        const name = normalizeCssVarNameToTokenName(originalName);
-        if (!name) continue;
-        if (seen.has(name)) continue;
-        seen.add(name);
-
-        tokens.push({
-            name,
-            value,
-            type: inferTokenType(name, value),
-            source: {
-                file: sourceFile ? path.basename(sourceFile) : undefined,
-                originalName,
-            },
-        });
-    }
+  const warnings: string[] = [];
+  const tokens: Token[] = [];
+
+  // Very simple parse: extract any --var: value; pairs
+  const re = /(--[A-Za-z0-9_-]+)\s*:\s*([^;\n\r]+)\s*;/g;
+  let match: RegExpExecArray | null;
+  const seen = new Set<string>();
+
+  while ((match = re.exec(content))) {
+    const originalName = match[1];
+    const value = match[2].trim();
+    const name = normalizeCssVarNameToTokenName(originalName);
+    if (!name) continue;
+    if (seen.has(name)) continue;
+    seen.add(name);
+
+    tokens.push({
+      name,
+      value,
+      type: inferTokenType(name, value),
+      source: {
+        file: sourceFile ? path.basename(sourceFile) : undefined,
+        originalName,
+      },
+    });
+  }
+
+  if (tokens.length === 0) {
+    warnings.push('No CSS custom properties found (expected patterns like --token-name: value;)');
+  }
+
+  return { tokens, warnings };
+}
+
+function setNested(obj: Record<string, unknown>, pathParts: string[], value: unknown): void {
+  // Protect against prototype pollution
+  const dangerousKeys = new Set(['__proto__', 'constructor', 'prototype']);
+
+  let cur: Record<string, unknown> = obj;
+  for (let i = 0; i < pathParts.length; i++) {
+    const key = pathParts[i];
 
-    if (tokens.length === 0) {
-        warnings.push('No CSS custom properties found (expected patterns like --token-name: value;)');
+    // Block dangerous keys
+    if (dangerousKeys.has(key)) {
+      return;
     }
 
-    return { tokens, warnings };
-}
+    if (i === pathParts.length - 1) {
+      cur[key] = value;
+      return;
+    }
 
-function setNested(obj: Record<string, unknown>, pathParts: string[], value: unknown): void {
-    // Protect against prototype pollution
-    const dangerousKeys = new Set(['__proto__', 'constructor', 'prototype']);
-
-    let cur: Record<string, unknown> = obj;
-    for (let i = 0; i < pathParts.length; i++) {
-        const key = pathParts[i];
-
-        // Block dangerous keys
-        if (dangerousKeys.has(key)) {
-            return;
-        }
-
-        if (i === pathParts.length - 1) {
-            cur[key] = value;
-            return;
-        }
-
-        if (!Object.hasOwn(cur, key) || typeof cur[key] !== 'object' || cur[key] === null) {
-            cur[key] = Object.create(null) as Record<string, unknown>;
-        }
-        cur = cur[key] as Record<string, unknown>;
+    if (!Object.hasOwn(cur, key) || typeof cur[key] !== 'object' || cur[key] === null) {
+      cur[key] = Object.create(null) as Record<string, unknown>;
     }
+    cur = cur[key] as Record<string, unknown>;
+  }
 }
 
 export function tokensToCssVars(tokens: Token[], options?: { selector?: string }): string {
-    const selector = options?.selector || ':root';
-    const lines = [`${selector} {`];
-    for (const t of tokens) {
-        const cssName = `--${t.name.replace(/\./g, '-')}`;
-        lines.push(`  ${cssName}: ${t.value};`);
-    }
-    lines.push('}');
-    return lines.join('\n');
+  const selector = options?.selector || ':root';
+  const lines = [`${selector} {`];
+  for (const t of tokens) {
+    const cssName = `--${t.name.replace(/\./g, '-')}`;
+    lines.push(`  ${cssName}: ${t.value};`);
+  }
+  lines.push('}');
+  return lines.join('\n');
 }
 
 export function tokensToTailwindTheme(tokens: Token[]): string {
-    const extend: any = { colors: {}, spacing: {}, borderRadius: {}, boxShadow: {}, fontFamily: {}, fontWeight: {}, transitionDuration: {} };
-
-    for (const t of tokens) {
-        const parts = t.name.split('.').filter(Boolean);
-        if (parts.length === 0) continue;
-        const root = parts[0];
-        const rest = parts.slice(1);
-
-        if (t.type === 'color' && (root === 'color' || root === 'colors')) {
-            setNested(extend.colors, rest.length ? rest : ['DEFAULT'], t.value);
-        } else if (t.type === 'dimension' && (root === 'space' || root === 'spacing')) {
-            setNested(extend.spacing, rest.length ? rest : ['DEFAULT'], t.value);
-        } else if (t.type === 'dimension' && (root === 'radius' || root === 'radii' || root === 'borderRadius')) {
-            setNested(extend.borderRadius, rest.length ? rest : ['DEFAULT'], t.value);
-        } else if (t.type === 'shadow' && (root === 'shadow' || root === 'shadows')) {
-            setNested(extend.boxShadow, rest.length ? rest : ['DEFAULT'], t.value);
-        } else if (t.type === 'fontFamily') {
-            setNested(extend.fontFamily, rest.length ? rest : ['sans'], t.value);
-        } else if (t.type === 'fontWeight') {
-            setNested(extend.fontWeight, rest.length ? rest : ['normal'], t.value);
-        } else if (t.type === 'duration') {
-            setNested(extend.transitionDuration, rest.length ? rest : ['DEFAULT'], t.value);
-        }
+  const extend: Record<string, Record<string, unknown>> = {
+    colors: {},
+    spacing: {},
+    borderRadius: {},
+    boxShadow: {},
+    fontFamily: {},
+    fontWeight: {},
+    transitionDuration: {},
+  };
+
+  for (const t of tokens) {
+    const parts = t.name.split('.').filter(Boolean);
+    if (parts.length === 0) continue;
+    const root = parts[0];
+    const rest = parts.slice(1);
+
+    if (t.type === 'color' && (root === 'color' || root === 'colors')) {
+      setNested(extend.colors, rest.length ? rest : ['DEFAULT'], t.value);
+    } else if (t.type === 'dimension' && (root === 'space' || root === 'spacing')) {
+      setNested(extend.spacing, rest.length ? rest : ['DEFAULT'], t.value);
+    } else if (
+      t.type === 'dimension' &&
+      (root === 'radius' || root === 'radii' || root === 'borderRadius')
+    ) {
+      setNested(extend.borderRadius, rest.length ? rest : ['DEFAULT'], t.value);
+    } else if (t.type === 'shadow' && (root === 'shadow' || root === 'shadows')) {
+      setNested(extend.boxShadow, rest.length ? rest : ['DEFAULT'], t.value);
+    } else if (t.type === 'fontFamily') {
+      setNested(extend.fontFamily, rest.length ? rest : ['sans'], t.value);
+    } else if (t.type === 'fontWeight') {
+      setNested(extend.fontWeight, rest.length ? rest : ['normal'], t.value);
+    } else if (t.type === 'duration') {
+      setNested(extend.transitionDuration, rest.length ? rest : ['DEFAULT'], t.value);
     }
+  }
 
-    // Prune empty sections
-    for (const k of Object.keys(extend)) {
-        if (extend[k] && typeof extend[k] === 'object' && Object.keys(extend[k]).length === 0) {
-            delete extend[k];
-        }
+  // Prune empty sections
+  for (const k of Object.keys(extend)) {
+    if (extend[k] && typeof extend[k] === 'object' && Object.keys(extend[k]).length === 0) {
+      delete extend[k];
     }
+  }
 
-    return `/** Auto-generated by sync_design_tokens */\nexport default {\n  theme: {\n    extend: ${JSON.stringify(extend, null, 2)}\n  }\n}`;
+  return `/** Auto-generated by sync_design_tokens */\nexport default {\n  theme: {\n    extend: ${JSON.stringify(extend, null, 2)}\n  }\n}`;
 }
 
 export function tokensToTokensStudio(tokens: Token[]): string {
-    // Tokens Studio expects {"token": {"value": ..., "type": ...}}
-    const out: any = {};
-    for (const t of tokens) {
-        const parts = t.name.split('.').filter(Boolean);
-        if (parts.length === 0) continue;
-        setNested(out, parts, { value: t.value, type: t.type, description: t.description });
-    }
-    return JSON.stringify(out, null, 2);
+  // Tokens Studio expects {"token": {"value": ..., "type": ...}}
+  const out: Record<string, unknown> = {};
+  for (const t of tokens) {
+    const parts = t.name.split('.').filter(Boolean);
+    if (parts.length === 0) continue;
+    setNested(out, parts, { value: t.value, type: t.type, description: t.description });
+  }
+  return JSON.stringify(out, null, 2);
 }
 
 export function tokensToStyleDictionary(tokens: Token[]): string {
-    // Style Dictionary commonly uses nested objects with { value, type }
-    // We'll output a format compatible with SD v3+ token JSON.
-    const out: any = {};
-    for (const t of tokens) {
-        const parts = t.name.split('.').filter(Boolean);
-        if (parts.length === 0) continue;
-        setNested(out, parts, { value: t.value, type: t.type });
-    }
-    return JSON.stringify(out, null, 2);
+  // Style Dictionary commonly uses nested objects with { value, type }
+  // We'll output a format compatible with SD v3+ token JSON.
+  const out: Record<string, unknown> = {};
+  for (const t of tokens) {
+    const parts = t.name.split('.').filter(Boolean);
+    if (parts.length === 0) continue;
+    setNested(out, parts, { value: t.value, type: t.type });
+  }
+  return JSON.stringify(out, null, 2);
 }

package/src/tools/analyze-screenshot-ui.ts

@@ -24,19 +24,22 @@ import { buildContext } from '../context/builder.js';
 import { generateWithGemini } from '../generation/gemini-client.js';
 
 const inputSchema = {
-    imagePath: z.string().optional().describe('Path to an image file (png/jpg/webp).'),
-    imageBase64: z.string().optional().describe('Base64 image data (if not using imagePath).'),
-    mimeType: z.string().optional().describe('Image mime type, e.g. image/png. Required when using imageBase64.'),
-    instruction: z
-        .string()
-        .optional()
-        .describe('What to extract from the screenshot. Defaults to a full UI breakdown.'),
-    outputFormat: z.enum(['json', 'markdown']).default('json').describe('Response format.'),
-    framework: z
-        .enum(['react', 'nextjs', 'vue', 'svelte', 'vanilla'])
-        .optional()
-        .describe('Target framework hint.'),
-    context: z.array(z.string()).optional().describe('Related design/token files for grounding.'),
+  imagePath: z.string().optional().describe('Path to an image file (png/jpg/webp).'),
+  imageBase64: z.string().optional().describe('Base64 image data (if not using imagePath).'),
+  mimeType: z
+    .string()
+    .optional()
+    .describe('Image mime type, e.g. image/png. Required when using imageBase64.'),
+  instruction: z
+    .string()
+    .optional()
+    .describe('What to extract from the screenshot. Defaults to a full UI breakdown.'),
+  outputFormat: z.enum(['json', 'markdown']).default('json').describe('Response format.'),
+  framework: z
+    .enum(['react', 'nextjs', 'vue', 'svelte', 'vanilla'])
+    .optional()
+    .describe('Target framework hint.'),
+  context: z.array(z.string()).optional().describe('Related design/token files for grounding.'),
 };
 
 const SYSTEM_PROMPT = `You are a senior UI engineer and design system expert.
@@ -60,63 +63,64 @@ Be practical: prefer reusable primitives (Button, Input, Card, Table) and sugges
 Do not invent backend logic.`;
 
 function mimeFromPath(p: string): string {
-    const ext = path.extname(p).toLowerCase();
-    if (ext === '.png') return 'image/png';
-    if (ext === '.jpg' || ext === '.jpeg') return 'image/jpeg';
-    if (ext === '.webp') return 'image/webp';
-    return 'application/octet-stream';
+  const ext = path.extname(p).toLowerCase();
+  if (ext === '.png') return 'image/png';
+  if (ext === '.jpg' || ext === '.jpeg') return 'image/jpeg';
+  if (ext === '.webp') return 'image/webp';
+  return 'application/octet-stream';
 }
 
 export function registerAnalyzeScreenshotUI(server: McpServer, config: Config): void {
-    server.registerTool(
-        'analyze_screenshot_ui',
-        {
-            title: 'Analyze UI Screenshot',
-            description:
-                'Analyze a UI screenshot (layout/components/tokens/a11y). Supports multimodal prompts in local or remote mode.',
-            inputSchema,
-        },
-        async (args) => {
-            const imagePath = args.imagePath as string | undefined;
-            const imageBase64 = args.imageBase64 as string | undefined;
-            const mimeType = args.mimeType as string | undefined;
-            const instruction = (args.instruction as string | undefined) || '';
-            const outputFormat = (args.outputFormat as 'json' | 'markdown') || 'json';
-            const framework = (args.framework as Config['defaultFramework'] | undefined) || config.defaultFramework;
-            const contextPaths = args.context as string[] | undefined;
-
-            if (!imagePath && !imageBase64) {
-                return {
-                    content: [{ type: 'text' as const, text: 'Error: Provide imagePath or imageBase64.' }],
-                    isError: true,
-                };
-            }
-
-            let data: string;
-            let mime: string;
-
-            try {
-                if (imagePath) {
-                    const safe = assertReadablePath(imagePath, config);
-                    const buf = fs.readFileSync(safe);
-                    data = buf.toString('base64');
-                    mime = mimeFromPath(safe);
-                } else {
-                    data = imageBase64 as string;
-                    mime = mimeType || 'application/octet-stream';
-                }
-            } catch (error) {
-                const message = error instanceof Error ? error.message : 'Could not read image';
-                return { content: [{ type: 'text' as const, text: `Error: ${message}` }], isError: true };
-            }
-
-            let contextContent = '';
-            if (contextPaths && contextPaths.length > 0) {
-                contextContent = await buildContext(contextPaths, config);
-                contextContent = sanitizeContent(contextContent);
-            }
-
-            const userText = `Analyze this screenshot.
+  server.registerTool(
+    'analyze_screenshot_ui',
+    {
+      title: 'Analyze UI Screenshot',
+      description:
+        'Analyze a UI screenshot (layout/components/tokens/a11y). Supports multimodal prompts in local or remote mode.',
+      inputSchema,
+    },
+    async (args) => {
+      const imagePath = args.imagePath as string | undefined;
+      const imageBase64 = args.imageBase64 as string | undefined;
+      const mimeType = args.mimeType as string | undefined;
+      const instruction = (args.instruction as string | undefined) || '';
+      const outputFormat = (args.outputFormat as 'json' | 'markdown') || 'json';
+      const framework =
+        (args.framework as Config['defaultFramework'] | undefined) || config.defaultFramework;
+      const contextPaths = args.context as string[] | undefined;
+
+      if (!imagePath && !imageBase64) {
+        return {
+          content: [{ type: 'text' as const, text: 'Error: Provide imagePath or imageBase64.' }],
+          isError: true,
+        };
+      }
+
+      let data: string;
+      let mime: string;
+
+      try {
+        if (imagePath) {
+          const safe = assertReadablePath(imagePath, config);
+          const buf = fs.readFileSync(safe);
+          data = buf.toString('base64');
+          mime = mimeFromPath(safe);
+        } else {
+          data = imageBase64 as string;
+          mime = mimeType || 'application/octet-stream';
+        }
+      } catch (error) {
+        const message = error instanceof Error ? error.message : 'Could not read image';
+        return { content: [{ type: 'text' as const, text: `Error: ${message}` }], isError: true };
+      }
+
+      let contextContent = '';
+      if (contextPaths && contextPaths.length > 0) {
+        contextContent = await buildContext(contextPaths, config);
+        contextContent = sanitizeContent(contextContent);
+      }
+
+      const userText = `Analyze this screenshot.
 
 outputFormat: ${outputFormat}
 frameworkHint: ${framework}
@@ -126,25 +130,22 @@ ${contextContent ? `RELATED FILES (sanitized):\n${contextContent}` : ''}
 
 Return in the requested format.`;
 
-            try {
-                const resp = await generateWithGemini(
-                    config,
-                    SYSTEM_PROMPT,
-                    [
-                        { text: userText },
-                        { inlineData: { mimeType: mime, data } },
-                    ],
-                    { toolName: 'analyze_screenshot_ui' }
-                );
-
-                return { content: [{ type: 'text' as const, text: resp.trim() }] };
-            } catch (error) {
-                const message = error instanceof Error ? error.message : 'Unknown error';
-                return {
-                    content: [{ type: 'text' as const, text: `Error analyzing screenshot: ${message}` }],
-                    isError: true,
-                };
-            }
-        }
-    );
+      try {
+        const resp = await generateWithGemini(
+          config,
+          SYSTEM_PROMPT,
+          [{ text: userText }, { inlineData: { mimeType: mime, data } }],
+          { toolName: 'analyze_screenshot_ui' }
+        );
+
+        return { content: [{ type: 'text' as const, text: resp.trim() }] };
+      } catch (error) {
+        const message = error instanceof Error ? error.message : 'Unknown error';
+        return {
+          content: [{ type: 'text' as const, text: `Error analyzing screenshot: ${message}` }],
+          isError: true,
+        };
+      }
+    }
+  );
 }