dartmind 17.0.0

package/dist/mcp/servers/flutter-vision/index.js

@@ -0,0 +1,1210 @@
+/**
+ * FlutterAI V16 - Flutter Vision MCP Server
+ * Phase 11: Issues 64.1, 64.2, 65.1, 65.2, 66.1, 66.2, 67.1, 67.2, 68.1, 68.2
+ * Port: 3009
+ *
+ * Computer vision capabilities for Flutter development:
+ * - Screenshot to Flutter code conversion
+ * - UI component detection
+ * - Layout analysis
+ * - Visual comparison
+ * - Accessibility scanning
+ *
+ * @module flutter-vision
+ * @version 16.0.0
+ */
+import Anthropic from '@anthropic-ai/sdk';
+// ============================================================================
+// TOOL DEFINITIONS
+// ============================================================================
+export const VISION_TOOLS = [
+    {
+        name: 'screenshot_to_flutter',
+        description: 'Convert a screenshot/mockup image to Flutter code. Analyzes the UI, detects components, extracts styles, and generates production-ready Flutter widgets.',
+        inputSchema: {
+            type: 'object',
+            properties: {
+                imageBase64: {
+                    type: 'string',
+                    description: 'Base64-encoded image (PNG or JPEG)',
+                },
+                generateCode: {
+                    type: 'boolean',
+                    description: 'Whether to generate Flutter code',
+                    default: true,
+                },
+                analyzeAccessibility: {
+                    type: 'boolean',
+                    description: 'Whether to check accessibility',
+                    default: true,
+                },
+                extractStyles: {
+                    type: 'boolean',
+                    description: 'Whether to extract color/typography styles',
+                    default: true,
+                },
+            },
+            required: ['imageBase64'],
+        },
+    },
+    {
+        name: 'detect_ui_components',
+        description: 'Detect and identify UI components in a screenshot without generating code.',
+        inputSchema: {
+            type: 'object',
+            properties: {
+                imageBase64: {
+                    type: 'string',
+                    description: 'Base64-encoded image',
+                },
+            },
+            required: ['imageBase64'],
+        },
+    },
+    {
+        name: 'extract_design_tokens',
+        description: 'Extract design tokens (colors, typography, spacing) from a screenshot to create a Flutter theme.',
+        inputSchema: {
+            type: 'object',
+            properties: {
+                imageBase64: {
+                    type: 'string',
+                    description: 'Base64-encoded image',
+                },
+            },
+            required: ['imageBase64'],
+        },
+    },
+    {
+        name: 'compare_screenshots',
+        description: 'Compare two screenshots to identify visual differences. Useful for visual regression testing.',
+        inputSchema: {
+            type: 'object',
+            properties: {
+                imageBase64A: {
+                    type: 'string',
+                    description: 'First image (base64)',
+                },
+                imageBase64B: {
+                    type: 'string',
+                    description: 'Second image (base64)',
+                },
+            },
+            required: ['imageBase64A', 'imageBase64B'],
+        },
+    },
+    {
+        name: 'analyze_accessibility',
+        description: 'Analyze a screenshot for accessibility issues (contrast, touch targets, labels).',
+        inputSchema: {
+            type: 'object',
+            properties: {
+                imageBase64: {
+                    type: 'string',
+                    description: 'Base64-encoded image',
+                },
+            },
+            required: ['imageBase64'],
+        },
+    },
+    {
+        name: 'detect_responsive_layout',
+        description: 'Analyze a screenshot and suggest responsive adaptations for different screen sizes.',
+        inputSchema: {
+            type: 'object',
+            properties: {
+                imageBase64: {
+                    type: 'string',
+                    description: 'Base64-encoded image',
+                },
+            },
+            required: ['imageBase64'],
+        },
+    },
+    {
+        name: 'generate_golden_test',
+        description: 'Generate a Flutter golden test for a widget based on a reference screenshot.',
+        inputSchema: {
+            type: 'object',
+            properties: {
+                widgetName: {
+                    type: 'string',
+                    description: 'Name of the widget to test',
+                },
+                imageBase64: {
+                    type: 'string',
+                    description: 'Reference screenshot (base64)',
+                },
+                testName: {
+                    type: 'string',
+                    description: 'Name for the golden test file',
+                },
+            },
+            required: ['widgetName', 'imageBase64'],
+        },
+    },
+];
+// ============================================================================
+// VISION ENGINE
+// ============================================================================
+export class FlutterVisionEngine {
+    anthropic = null;
+    MODEL = 'claude-sonnet-4-20250514';
+    constructor(apiKey) {
+        const key = apiKey || process.env.ANTHROPIC_API_KEY;
+        if (key) {
+            this.anthropic = new Anthropic({ apiKey: key });
+        }
+    }
+    /**
+     * Analyze screenshot and extract UI components
+     */
+    async analyzeScreenshot(imageBase64, options = {}) {
+        const { generateCode = true, analyzeAccessibility = true, extractStyles = true, } = options;
+        const warnings = [];
+        if (!this.anthropic) {
+            return {
+                success: false,
+                components: [],
+                layout: this.getDefaultLayout(),
+                styles: this.getDefaultStyles(),
+                accessibility: { score: 0, issues: [], suggestions: [] },
+                warnings: ['Anthropic API key not configured'],
+            };
+        }
+        try {
+            // Step 1: Detect components using Claude Vision
+            const componentAnalysis = await this.detectComponents(imageBase64);
+            // Step 2: Extract layout structure
+            const layout = this.extractLayoutStructure(componentAnalysis.components);
+            // Step 3: Extract styles
+            const styles = extractStyles
+                ? await this.extractStyles(imageBase64, componentAnalysis.components)
+                : this.getDefaultStyles();
+            // Step 4: Accessibility analysis
+            const accessibility = analyzeAccessibility
+                ? await this.analyzeAccessibility(imageBase64, componentAnalysis.components)
+                : { score: 0, issues: [], suggestions: [] };
+            // Step 5: Generate Flutter code
+            let generatedCode;
+            if (generateCode) {
+                generatedCode = this.generateFlutterCode(componentAnalysis.components, layout, styles);
+            }
+            return {
+                success: true,
+                components: componentAnalysis.components,
+                layout,
+                styles,
+                accessibility,
+                generatedCode,
+                warnings,
+            };
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+            return {
+                success: false,
+                components: [],
+                layout: this.getDefaultLayout(),
+                styles: this.getDefaultStyles(),
+                accessibility: { score: 0, issues: [], suggestions: [] },
+                warnings: [errorMessage],
+            };
+        }
+    }
+    /**
+     * Detect UI components using Claude Vision API
+     */
+    async detectComponents(imageBase64) {
+        if (!this.anthropic) {
+            return { components: [] };
+        }
+        const prompt = `Analyze this mobile app screenshot and identify all UI components.
+
+For each component, provide:
+1. Component type (app_bar, button, text, card, list_tile, text_field, image, icon, container, row, column, fab, bottom_nav, drawer, tab_bar, chip, avatar, checkbox, radio, switch, slider, progress, divider, etc.)
+2. Approximate bounding box as percentages (x, y, width, height from 0-100)
+3. Confidence score (0-1)
+4. Properties (text content, colors, any visible attributes)
+5. Parent-child relationships
+
+Return as JSON array:
+{
+  "components": [
+    {
+      "id": "comp_1",
+      "type": "app_bar",
+      "bounds": {"x": 0, "y": 0, "width": 100, "height": 10},
+      "confidence": 0.95,
+      "properties": {"title": "Home", "backgroundColor": "#2196F3"},
+      "children": []
+    }
+  ]
+}
+
+Be thorough - identify ALL visible UI elements including text, icons, and containers.`;
+        const response = await this.anthropic.messages.create({
+            model: this.MODEL,
+            max_tokens: 4096,
+            messages: [
+                {
+                    role: 'user',
+                    content: [
+                        {
+                            type: 'image',
+                            source: {
+                                type: 'base64',
+                                media_type: 'image/png',
+                                data: imageBase64,
+                            },
+                        },
+                        {
+                            type: 'text',
+                            text: prompt,
+                        },
+                    ],
+                },
+            ],
+        });
+        // Parse response
+        const content = response.content[0];
+        if (content.type !== 'text') {
+            return { components: [] };
+        }
+        try {
+            // Extract JSON from response
+            const jsonMatch = content.text.match(/\{[\s\S]*\}/);
+            if (jsonMatch) {
+                const parsed = JSON.parse(jsonMatch[0]);
+                return { components: parsed.components || [] };
+            }
+        }
+        catch {
+            // Failed to parse, return empty
+        }
+        return { components: [] };
+    }
+    /**
+     * Extract layout structure from detected components
+     */
+    extractLayoutStructure(components) {
+        const hasAppBar = components.some(c => c.type === 'app_bar');
+        const hasBottomNav = components.some(c => c.type === 'bottom_nav');
+        const hasDrawer = components.some(c => c.type === 'drawer');
+        const hasFab = components.some(c => c.type === 'fab');
+        const hierarchy = this.buildLayoutHierarchy(components);
+        return {
+            rootType: 'scaffold',
+            orientation: 'portrait',
+            hasAppBar,
+            hasBottomNav,
+            hasDrawer,
+            hasFab,
+            mainAxisAlignment: 'start',
+            crossAxisAlignment: 'stretch',
+            hierarchy,
+        };
+    }
+    /**
+     * Build layout hierarchy from flat component list
+     */
+    buildLayoutHierarchy(components) {
+        const sortedByY = [...components].sort((a, b) => a.bounds.y - b.bounds.y);
+        const rows = [];
+        let currentRow = [];
+        let currentY = -1;
+        const rowThreshold = 5;
+        for (const comp of sortedByY) {
+            if (currentY === -1 || Math.abs(comp.bounds.y - currentY) <= rowThreshold) {
+                currentRow.push(comp);
+                currentY = comp.bounds.y;
+            }
+            else {
+                if (currentRow.length > 0) {
+                    rows.push(currentRow);
+                }
+                currentRow = [comp];
+                currentY = comp.bounds.y;
+            }
+        }
+        if (currentRow.length > 0) {
+            rows.push(currentRow);
+        }
+        const children = rows.map(row => {
+            if (row.length === 1) {
+                return {
+                    type: this.mapToLayoutType(row[0].type),
+                    componentRef: row[0].id,
+                    children: [],
+                };
+            }
+            return {
+                type: 'Row',
+                flexDirection: 'row',
+                children: row.map(c => ({
+                    type: this.mapToLayoutType(c.type),
+                    componentRef: c.id,
+                    children: [],
+                })),
+            };
+        });
+        return {
+            type: 'Column',
+            flexDirection: 'column',
+            children,
+        };
+    }
+    /**
+     * Map component type to Flutter layout widget
+     */
+    mapToLayoutType(componentType) {
+        const mapping = {
+            app_bar: 'AppBar',
+            bottom_nav: 'BottomNavigationBar',
+            fab: 'FloatingActionButton',
+            card: 'Card',
+            list_tile: 'ListTile',
+            button: 'ElevatedButton',
+            text_field: 'TextField',
+            text: 'Text',
+            image: 'Image',
+            icon: 'Icon',
+            container: 'Container',
+            row: 'Row',
+            column: 'Column',
+            stack: 'Stack',
+            grid: 'GridView',
+            list_view: 'ListView',
+            scaffold: 'Scaffold',
+            drawer: 'Drawer',
+            tab_bar: 'TabBar',
+            chip: 'Chip',
+            avatar: 'CircleAvatar',
+            divider: 'Divider',
+            checkbox: 'Checkbox',
+            radio: 'Radio',
+            switch: 'Switch',
+            slider: 'Slider',
+            progress: 'CircularProgressIndicator',
+            unknown: 'Container',
+        };
+        return mapping[componentType] || 'Container';
+    }
+    /**
+     * Extract style information from screenshot
+     */
+    async extractStyles(imageBase64, _components) {
+        if (!this.anthropic) {
+            return this.getDefaultStyles();
+        }
+        const prompt = `Analyze this mobile app screenshot and extract the design system:
+
+1. Color palette:
+   - Primary color (main brand color)
+   - Secondary color
+   - Background color
+   - Surface color (cards, dialogs)
+   - Text colors (primary, secondary, disabled)
+   - Accent colors
+
+2. Typography:
+   - Headline style (size, weight)
+   - Title style
+   - Body text style
+   - Caption style
+
+3. Spacing values (estimate in pixels):
+   - XS, SM, MD, LG, XL
+
+4. Border radius values used
+
+5. Shadow styles
+
+Return as JSON:
+{
+  "colors": {
+    "primary": "#hex",
+    "secondary": "#hex",
+    "background": "#hex",
+    "surface": "#hex",
+    "text": {"primary": "#hex", "secondary": "#hex", "disabled": "#hex"},
+    "accent": ["#hex"]
+  },
+  "typography": {
+    "headline": {"fontSize": 24, "fontWeight": "bold", "color": "#hex"},
+    "title": {"fontSize": 18, "fontWeight": "600", "color": "#hex"},
+    "body": {"fontSize": 14, "fontWeight": "normal", "color": "#hex"},
+    "caption": {"fontSize": 12, "fontWeight": "normal", "color": "#hex"}
+  },
+  "spacing": {"xs": 4, "sm": 8, "md": 16, "lg": 24, "xl": 32},
+  "borderRadius": [4, 8, 12, 16],
+  "shadows": [{"color": "#00000020", "blur": 4, "offset": {"x": 0, "y": 2}}]
+}`;
+        const response = await this.anthropic.messages.create({
+            model: this.MODEL,
+            max_tokens: 2048,
+            messages: [
+                {
+                    role: 'user',
+                    content: [
+                        {
+                            type: 'image',
+                            source: {
+                                type: 'base64',
+                                media_type: 'image/png',
+                                data: imageBase64,
+                            },
+                        },
+                        {
+                            type: 'text',
+                            text: prompt,
+                        },
+                    ],
+                },
+            ],
+        });
+        const content = response.content[0];
+        if (content.type !== 'text') {
+            return this.getDefaultStyles();
+        }
+        try {
+            const jsonMatch = content.text.match(/\{[\s\S]*\}/);
+            if (jsonMatch) {
+                return JSON.parse(jsonMatch[0]);
+            }
+        }
+        catch {
+            // Failed to parse
+        }
+        return this.getDefaultStyles();
+    }
+    /**
+     * Analyze accessibility issues
+     */
+    async analyzeAccessibility(imageBase64, _components) {
+        if (!this.anthropic) {
+            return { score: 0, issues: [], suggestions: [] };
+        }
+        const prompt = `Analyze this mobile app screenshot for accessibility issues:
+
+Check for:
+1. Color contrast - Is text readable against backgrounds? (WCAG AA requires 4.5:1 for normal text, 3:1 for large text)
+2. Touch target sizes - Are interactive elements at least 44x44 points?
+3. Text size - Is body text at least 14sp?
+4. Visual hierarchy - Is content structure clear?
+5. Color-only information - Are there indicators that rely solely on color?
+
+Return as JSON:
+{
+  "score": 85,
+  "issues": [
+    {
+      "type": "contrast",
+      "severity": "serious",
+      "description": "Light gray text on white background",
+      "recommendation": "Increase text color contrast to at least 4.5:1"
+    }
+  ],
+  "suggestions": [
+    "Add semantic labels to icon buttons",
+    "Consider increasing touch target sizes"
+  ]
+}
+
+Score from 0-100 where 100 is fully accessible.`;
+        const response = await this.anthropic.messages.create({
+            model: this.MODEL,
+            max_tokens: 2048,
+            messages: [
+                {
+                    role: 'user',
+                    content: [
+                        {
+                            type: 'image',
+                            source: {
+                                type: 'base64',
+                                media_type: 'image/png',
+                                data: imageBase64,
+                            },
+                        },
+                        {
+                            type: 'text',
+                            text: prompt,
+                        },
+                    ],
+                },
+            ],
+        });
+        const content = response.content[0];
+        if (content.type !== 'text') {
+            return { score: 0, issues: [], suggestions: [] };
+        }
+        try {
+            const jsonMatch = content.text.match(/\{[\s\S]*\}/);
+            if (jsonMatch) {
+                return JSON.parse(jsonMatch[0]);
+            }
+        }
+        catch {
+            // Failed to parse
+        }
+        return { score: 0, issues: [], suggestions: [] };
+    }
+    /**
+     * Generate Flutter code from analysis
+     */
+    generateFlutterCode(components, layout, styles) {
+        const widgetCode = this.buildWidgetTree(components, layout, styles);
+        const primaryColor = styles.colors.primary.replace('#', '');
+        const secondaryColor = styles.colors.secondary.replace('#', '');
+        const backgroundColor = styles.colors.background.replace('#', '');
+        const surfaceColor = styles.colors.surface.replace('#', '');
+        return `
+import 'package:flutter/material.dart';
+
+class GeneratedPage extends StatelessWidget {
+  const GeneratedPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      ${layout.hasAppBar ? this.generateAppBar(components, styles) : ''}
+      body: SafeArea(
+        child: ${widgetCode}
+      ),
+      ${layout.hasBottomNav ? this.generateBottomNav(components, styles) : ''}
+      ${layout.hasFab ? this.generateFab(components, styles) : ''}
+    );
+  }
+}
+
+// Generated color constants
+class AppColors {
+  static const primary = Color(0xFF${primaryColor});
+  static const secondary = Color(0xFF${secondaryColor});
+  static const background = Color(0xFF${backgroundColor});
+  static const surface = Color(0xFF${surfaceColor});
+}
+
+// Generated text styles
+class AppTextStyles {
+  static const headline = TextStyle(
+    fontSize: ${styles.typography.headline.fontSize},
+    fontWeight: FontWeight.${this.mapFontWeight(styles.typography.headline.fontWeight)},
+  );
+  static const title = TextStyle(
+    fontSize: ${styles.typography.title.fontSize},
+    fontWeight: FontWeight.${this.mapFontWeight(styles.typography.title.fontWeight)},
+  );
+  static const body = TextStyle(
+    fontSize: ${styles.typography.body.fontSize},
+    fontWeight: FontWeight.${this.mapFontWeight(styles.typography.body.fontWeight)},
+  );
+}
+`.trim();
+    }
+    /**
+     * Build widget tree recursively
+     */
+    buildWidgetTree(components, _layout, styles) {
+        const bodyComponents = components.filter(c => !['app_bar', 'bottom_nav', 'fab', 'drawer'].includes(c.type));
+        if (bodyComponents.length === 0) {
+            return 'Center(child: Text("No content detected"))';
+        }
+        const rows = this.groupIntoRows(bodyComponents);
+        if (rows.length === 1 && rows[0].length === 1) {
+            return this.generateWidget(rows[0][0], styles);
+        }
+        const rowWidgets = rows.map(row => {
+            if (row.length === 1) {
+                return this.generateWidget(row[0], styles);
+            }
+            const children = row.map(c => this.generateWidget(c, styles)).join(',\n          ');
+            return `Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          ${children}
+        ],
+      )`;
+        });
+        return `SingleChildScrollView(
+      padding: EdgeInsets.all(${styles.spacing.md}),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        children: [
+          ${rowWidgets.join(',\n          ')}
+        ],
+      ),
+    )`;
+    }
+    /**
+     * Group components into rows based on Y position
+     */
+    groupIntoRows(components) {
+        const sorted = [...components].sort((a, b) => a.bounds.y - b.bounds.y);
+        const rows = [];
+        let currentRow = [];
+        let currentY = -1;
+        const threshold = 5;
+        for (const comp of sorted) {
+            if (currentY === -1 || Math.abs(comp.bounds.y - currentY) <= threshold) {
+                currentRow.push(comp);
+                if (currentY === -1)
+                    currentY = comp.bounds.y;
+            }
+            else {
+                if (currentRow.length > 0)
+                    rows.push(currentRow);
+                currentRow = [comp];
+                currentY = comp.bounds.y;
+            }
+        }
+        if (currentRow.length > 0)
+            rows.push(currentRow);
+        return rows.map(row => row.sort((a, b) => a.bounds.x - b.bounds.x));
+    }
+    /**
+     * Generate Flutter widget code for a component
+     */
+    generateWidget(component, styles) {
+        const props = component.properties || {};
+        switch (component.type) {
+            case 'text':
+                return `Text(
+          '${props.text || 'Text'}',
+          style: TextStyle(
+            fontSize: ${props.fontSize || styles.typography.body.fontSize},
+            color: Color(0xFF${String(props.color || styles.colors.text.primary).replace('#', '')}),
+          ),
+        )`;
+            case 'button':
+                return `ElevatedButton(
+          onPressed: () {},
+          style: ElevatedButton.styleFrom(
+            backgroundColor: AppColors.primary,
+            padding: EdgeInsets.symmetric(
+              horizontal: ${styles.spacing.lg},
+              vertical: ${styles.spacing.md},
+            ),
+          ),
+          child: Text('${props.text || 'Button'}'),
+        )`;
+            case 'text_field':
+                return `TextField(
+          decoration: InputDecoration(
+            labelText: '${props.label || 'Input'}',
+            hintText: '${props.hint || ''}',
+            border: OutlineInputBorder(
+              borderRadius: BorderRadius.circular(${styles.borderRadius[0] || 8}),
+            ),
+          ),
+        )`;
+            case 'card': {
+                const cardChildren = (component.children || [])
+                    .map(c => this.generateWidget(c, styles))
+                    .join(',\n            ');
+                return `Card(
+          elevation: 2,
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(${styles.borderRadius[1] || 12}),
+          ),
+          child: Padding(
+            padding: EdgeInsets.all(${styles.spacing.md}),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                ${cardChildren || "Text('Card content')"}
+              ],
+            ),
+          ),
+        )`;
+            }
+            case 'list_tile':
+                return `ListTile(
+          leading: ${props.leadingIcon ? `Icon(Icons.${props.leadingIcon})` : 'null'},
+          title: Text('${props.title || 'Title'}'),
+          subtitle: ${props.subtitle ? `Text('${props.subtitle}')` : 'null'},
+          trailing: ${props.trailingIcon ? `Icon(Icons.${props.trailingIcon})` : 'null'},
+        )`;
+            case 'image':
+                return `Container(
+          height: ${props.height || 200},
+          decoration: BoxDecoration(
+            borderRadius: BorderRadius.circular(${styles.borderRadius[0] || 8}),
+            color: Colors.grey[200],
+          ),
+          child: Center(
+            child: Icon(Icons.image, size: 48, color: Colors.grey),
+          ),
+        )`;
+            case 'icon':
+                return `Icon(
+          Icons.${props.iconName || 'star'},
+          size: ${props.size || 24},
+          color: Color(0xFF${String(props.color || styles.colors.primary).replace('#', '')}),
+        )`;
+            case 'chip':
+                return `Chip(
+          label: Text('${props.label || 'Chip'}'),
+          backgroundColor: AppColors.surface,
+        )`;
+            case 'avatar':
+                return `CircleAvatar(
+          radius: ${props.radius || 24},
+          backgroundColor: AppColors.primary,
+          child: Text('${props.initials || 'A'}'),
+        )`;
+            case 'divider':
+                return 'Divider()';
+            case 'checkbox':
+                return `Checkbox(
+          value: ${props.checked || false},
+          onChanged: (value) {},
+        )`;
+            case 'switch':
+                return `Switch(
+          value: ${props.checked || false},
+          onChanged: (value) {},
+        )`;
+            case 'slider':
+                return `Slider(
+          value: ${props.value || 0.5},
+          onChanged: (value) {},
+        )`;
+            case 'progress':
+                return 'CircularProgressIndicator()';
+            case 'container':
+            default: {
+                const children = (component.children || [])
+                    .map(c => this.generateWidget(c, styles))
+                    .join(',\n          ');
+                if (children) {
+                    return `Container(
+            padding: EdgeInsets.all(${styles.spacing.sm}),
+            child: Column(
+              children: [
+                ${children}
+              ],
+            ),
+          )`;
+                }
+                return `SizedBox(
+          width: ${component.bounds.width},
+          height: ${component.bounds.height},
+        )`;
+            }
+        }
+    }
+    /**
+     * Generate AppBar code
+     */
+    generateAppBar(components, _styles) {
+        const appBar = components.find(c => c.type === 'app_bar');
+        const props = appBar?.properties || {};
+        return `appBar: AppBar(
+        title: Text('${props.title || 'App'}'),
+        backgroundColor: AppColors.primary,
+        ${props.actions ? `actions: [
+          IconButton(onPressed: () {}, icon: Icon(Icons.search)),
+          IconButton(onPressed: () {}, icon: Icon(Icons.more_vert)),
+        ],` : ''}
+      ),`;
+    }
+    /**
+     * Generate BottomNavigationBar code
+     */
+    generateBottomNav(components, _styles) {
+        const bottomNav = components.find(c => c.type === 'bottom_nav');
+        const items = bottomNav?.properties?.items || [
+            { icon: 'home', label: 'Home' },
+            { icon: 'search', label: 'Search' },
+            { icon: 'person', label: 'Profile' },
+        ];
+        const itemsCode = items
+            .map(item => `
+        BottomNavigationBarItem(
+          icon: Icon(Icons.${item.icon}),
+          label: '${item.label}',
+        )`)
+            .join(',');
+        return `bottomNavigationBar: BottomNavigationBar(
+        currentIndex: 0,
+        onTap: (index) {},
+        items: [${itemsCode}
+        ],
+      ),`;
+    }
+    /**
+     * Generate FAB code
+     */
+    generateFab(components, _styles) {
+        const fab = components.find(c => c.type === 'fab');
+        const props = fab?.properties || {};
+        return `floatingActionButton: FloatingActionButton(
+        onPressed: () {},
+        backgroundColor: AppColors.primary,
+        child: Icon(Icons.${props.icon || 'add'}),
+      ),`;
+    }
+    /**
+     * Map font weight string to Flutter FontWeight
+     */
+    mapFontWeight(weight) {
+        const mapping = {
+            normal: 'w400',
+            regular: 'w400',
+            medium: 'w500',
+            '500': 'w500',
+            '600': 'w600',
+            semibold: 'w600',
+            bold: 'w700',
+            '700': 'w700',
+            extrabold: 'w800',
+            '800': 'w800',
+        };
+        return mapping[weight.toLowerCase()] || 'w400';
+    }
+    /**
+     * Compare two screenshots visually
+     */
+    async compareScreenshots(imageBase64A, imageBase64B) {
+        if (!this.anthropic) {
+            return { match: false, similarity: 0, differences: [] };
+        }
+        const prompt = `Compare these two mobile app screenshots and identify visual differences.
+
+For each difference found, describe:
+1. Region (approximate bounding box as percentages)
+2. Type of difference: missing, extra, color, size, or position
+3. Description of what changed
+
+Return as JSON:
+{
+  "match": false,
+  "similarity": 85,
+  "differences": [
+    {
+      "region": {"x": 10, "y": 50, "width": 30, "height": 10},
+      "type": "color",
+      "description": "Button color changed from blue to green"
+    }
+  ]
+}
+
+If images are identical, return match: true and similarity: 100.`;
+        const response = await this.anthropic.messages.create({
+            model: this.MODEL,
+            max_tokens: 2048,
+            messages: [
+                {
+                    role: 'user',
+                    content: [
+                        {
+                            type: 'image',
+                            source: {
+                                type: 'base64',
+                                media_type: 'image/png',
+                                data: imageBase64A,
+                            },
+                        },
+                        {
+                            type: 'image',
+                            source: {
+                                type: 'base64',
+                                media_type: 'image/png',
+                                data: imageBase64B,
+                            },
+                        },
+                        {
+                            type: 'text',
+                            text: prompt,
+                        },
+                    ],
+                },
+            ],
+        });
+        const content = response.content[0];
+        if (content.type !== 'text') {
+            return { match: false, similarity: 0, differences: [] };
+        }
+        try {
+            const jsonMatch = content.text.match(/\{[\s\S]*\}/);
+            if (jsonMatch) {
+                return JSON.parse(jsonMatch[0]);
+            }
+        }
+        catch {
+            // Failed to parse
+        }
+        return { match: false, similarity: 0, differences: [] };
+    }
+    /**
+     * Detect responsive breakpoints
+     */
+    async detectResponsiveLayout(imageBase64) {
+        if (!this.anthropic) {
+            return {
+                currentBreakpoint: 'mobile',
+                suggestedAdaptations: [],
+                responsiveCode: this.getResponsiveHelperCode(),
+            };
+        }
+        const prompt = `Analyze this app screenshot for responsive design:
+
+1. What device type does this appear to be designed for? (mobile, tablet, desktop)
+2. What adaptations would be needed for other screen sizes?
+3. Are there elements that should reflow or resize?
+
+Return as JSON:
+{
+  "currentBreakpoint": "mobile",
+  "suggestedAdaptations": [
+    "Convert single column to multi-column grid on tablet",
+    "Increase font sizes for desktop",
+    "Add side navigation drawer on larger screens"
+  ]
+}`;
+        const response = await this.anthropic.messages.create({
+            model: this.MODEL,
+            max_tokens: 2048,
+            messages: [
+                {
+                    role: 'user',
+                    content: [
+                        {
+                            type: 'image',
+                            source: {
+                                type: 'base64',
+                                media_type: 'image/png',
+                                data: imageBase64,
+                            },
+                        },
+                        {
+                            type: 'text',
+                            text: prompt,
+                        },
+                    ],
+                },
+            ],
+        });
+        const content = response.content[0];
+        let result = {
+            currentBreakpoint: 'mobile',
+            suggestedAdaptations: [],
+        };
+        if (content.type === 'text') {
+            try {
+                const jsonMatch = content.text.match(/\{[\s\S]*\}/);
+                if (jsonMatch) {
+                    result = JSON.parse(jsonMatch[0]);
+                }
+            }
+            catch {
+                // Failed to parse
+            }
+        }
+        return {
+            ...result,
+            responsiveCode: this.getResponsiveHelperCode(),
+        };
+    }
+    /**
+     * Generate golden test code
+     */
+    generateGoldenTest(widgetName, testName) {
+        const finalTestName = testName || widgetName.toLowerCase();
+        const testCode = `
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:golden_toolkit/golden_toolkit.dart';
+
+import '../lib/widgets/${finalTestName}.dart';
+
+void main() {
+  group('${widgetName} Golden Tests', () {
+    testGoldens('${widgetName} - default state', (tester) async {
+      await loadAppFonts();
+
+      final builder = DeviceBuilder()
+        ..overrideDevicesForAllScenarios(devices: [
+          Device.phone,
+          Device.iphone11,
+          Device.tabletPortrait,
+        ])
+        ..addScenario(
+          widget: const ${widgetName}(),
+          name: 'default',
+        );
+
+      await tester.pumpDeviceBuilder(builder);
+      await screenMatchesGolden(tester, '${finalTestName}_default');
+    });
+
+    testGoldens('${widgetName} - dark mode', (tester) async {
+      await loadAppFonts();
+
+      final builder = DeviceBuilder()
+        ..overrideDevicesForAllScenarios(devices: [Device.phone])
+        ..addScenario(
+          widget: Theme(
+            data: ThemeData.dark(),
+            child: const ${widgetName}(),
+          ),
+          name: 'dark',
+        );
+
+      await tester.pumpDeviceBuilder(builder);
+      await screenMatchesGolden(tester, '${finalTestName}_dark');
+    });
+  });
+}
+`.trim();
+        return {
+            success: true,
+            testCode,
+            testFilePath: `test/goldens/${finalTestName}_test.dart`,
+            goldenFilePath: `test/goldens/goldens/${finalTestName}_default.png`,
+            instructions: [
+                'Add golden_toolkit to dev_dependencies',
+                'Run: flutter test --update-goldens',
+                'Commit golden files to version control',
+            ],
+        };
+    }
+    /**
+     * Generate theme code from styles
+     */
+    generateThemeCode(styles) {
+        return `
+import 'package:flutter/material.dart';
+
+class AppTheme {
+  static ThemeData get lightTheme {
+    return ThemeData(
+      primaryColor: Color(0xFF${styles.colors.primary.replace('#', '')}),
+      colorScheme: ColorScheme.light(
+        primary: Color(0xFF${styles.colors.primary.replace('#', '')}),
+        secondary: Color(0xFF${styles.colors.secondary.replace('#', '')}),
+        surface: Color(0xFF${styles.colors.surface.replace('#', '')}),
+        background: Color(0xFF${styles.colors.background.replace('#', '')}),
+      ),
+      textTheme: TextTheme(
+        headlineMedium: TextStyle(
+          fontSize: ${styles.typography.headline.fontSize},
+          fontWeight: FontWeight.w700,
+        ),
+        titleMedium: TextStyle(
+          fontSize: ${styles.typography.title.fontSize},
+          fontWeight: FontWeight.w600,
+        ),
+        bodyMedium: TextStyle(
+          fontSize: ${styles.typography.body.fontSize},
+          fontWeight: FontWeight.w400,
+        ),
+        bodySmall: TextStyle(
+          fontSize: ${styles.typography.caption.fontSize},
+          fontWeight: FontWeight.w400,
+        ),
+      ),
+    );
+  }
+}
+
+class AppSpacing {
+  static const double xs = ${styles.spacing.xs};
+  static const double sm = ${styles.spacing.sm};
+  static const double md = ${styles.spacing.md};
+  static const double lg = ${styles.spacing.lg};
+  static const double xl = ${styles.spacing.xl};
+}
+
+class AppBorderRadius {
+  ${styles.borderRadius.map((r, i) => `static const double r${i + 1} = ${r};`).join('\n  ')}
+}
+`.trim();
+    }
+    // ============================================================================
+    // HELPER METHODS
+    // ============================================================================
+    getResponsiveHelperCode() {
+        return `
+class ResponsiveLayout extends StatelessWidget {
+  final Widget mobile;
+  final Widget? tablet;
+  final Widget? desktop;
+
+  const ResponsiveLayout({
+    super.key,
+    required this.mobile,
+    this.tablet,
+    this.desktop,
+  });
+
+  static const mobileBreakpoint = 600;
+  static const tabletBreakpoint = 900;
+
+  @override
+  Widget build(BuildContext context) {
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        if (constraints.maxWidth >= tabletBreakpoint && desktop != null) {
+          return desktop!;
+        }
+        if (constraints.maxWidth >= mobileBreakpoint && tablet != null) {
+          return tablet!;
+        }
+        return mobile;
+      },
+    );
+  }
+}
+`.trim();
+    }
+    getDefaultLayout() {
+        return {
+            rootType: 'scaffold',
+            orientation: 'portrait',
+            hasAppBar: false,
+            hasBottomNav: false,
+            hasDrawer: false,
+            hasFab: false,
+            mainAxisAlignment: 'start',
+            crossAxisAlignment: 'stretch',
+            hierarchy: { type: 'Column', children: [] },
+        };
+    }
+    getDefaultStyles() {
+        return {
+            colors: {
+                primary: '#2196F3',
+                secondary: '#FF9800',
+                background: '#FFFFFF',
+                surface: '#F5F5F5',
+                text: {
+                    primary: '#212121',
+                    secondary: '#757575',
+                    disabled: '#BDBDBD',
+                },
+                accent: ['#4CAF50', '#E91E63'],
+            },
+            typography: {
+                headline: { fontSize: 24, fontWeight: 'bold', color: '#212121' },
+                title: { fontSize: 18, fontWeight: '600', color: '#212121' },
+                body: { fontSize: 14, fontWeight: 'normal', color: '#212121' },
+                caption: { fontSize: 12, fontWeight: 'normal', color: '#757575' },
+            },
+            spacing: { xs: 4, sm: 8, md: 16, lg: 24, xl: 32 },
+            borderRadius: [4, 8, 12, 16],
+            shadows: [{ color: '#00000020', blur: 4, offset: { x: 0, y: 2 } }],
+        };
+    }
+}
+// ============================================================================
+// FACTORY FUNCTION
+// ============================================================================
+export function createVisionEngine(apiKey) {
+    return new FlutterVisionEngine(apiKey);
+}
+// Singleton instance
+export const visionEngine = new FlutterVisionEngine();
+//# sourceMappingURL=index.js.map