/** * Generate component tool for Figma-to-component workflow. * * Analyzes Figma design and discovered components to recommend REUSE, EXTEND, or CREATE strategy. * * @module tools/storefrontnext/figma/generate-component */ import { z } from 'zod'; import type { McpTool } from '../../../../utils/index.js'; import type { Services } from '../../../../services.js'; /** * A component discovered in the codebase that may match the Figma design. * * @property {string} path - Absolute file path to the component * @property {string} name - Component name * @property {number} similarity - Similarity score (0-100) * @property {'name'|'structure'|'visual'} matchType - Type of match: 'name', 'structure', or 'visual' * @property {string} code - Full source code of the component */ export interface SimilarComponent { path: string; name: string; similarity: number; matchType: 'name' | 'structure' | 'visual'; code: string; } export declare const generateComponentSchema: z.ZodObject<{ figmaMetadata: z.ZodString; figmaCode: z.ZodString; componentName: z.ZodString; discoveredComponents: z.ZodArray; code: z.ZodString; }, "strip", z.ZodTypeAny, { name: string; code: string; path: string; similarity: number; matchType: "name" | "structure" | "visual"; }, { name: string; code: string; path: string; similarity: number; matchType: "name" | "structure" | "visual"; }>, "many">; workspacePath: z.ZodOptional; }, "strict", z.ZodTypeAny, { figmaMetadata: string; figmaCode: string; componentName: string; discoveredComponents: { name: string; code: string; path: string; similarity: number; matchType: "name" | "structure" | "visual"; }[]; workspacePath?: string | undefined; }, { figmaMetadata: string; figmaCode: string; componentName: string; discoveredComponents: { name: string; code: string; path: string; similarity: number; matchType: "name" | "structure" | "visual"; }[]; workspacePath?: string | undefined; }>; export type GenerateComponentInput = z.infer; /** * Result of component analysis recommending REUSE, EXTEND, or CREATE. * * @property {'CREATE'|'EXTEND'|'REUSE'} action - Recommended action: 'CREATE', 'EXTEND', or 'REUSE' * @property {number} confidence - Confidence score (0-100) * @property {{path: string, name: string, similarity: number}} [matchedComponent] - Best-matching component (if action is REUSE or EXTEND) * @property {string[]} [differences] - Key differences between Figma design and matched component * @property {string} recommendation - Human-readable recommendation text * @property {string} [suggestedApproach] - Implementation guidance * @property {'composition'|'props'|'variant'} [extendStrategy] - Strategy for EXTEND: 'props', 'variant', or 'composition' */ export interface ComponentAnalysisResult { action: 'CREATE' | 'EXTEND' | 'REUSE'; confidence: number; matchedComponent?: { path: string; name: string; similarity: number; }; differences?: string[]; recommendation: string; suggestedApproach?: string; extendStrategy?: 'composition' | 'props' | 'variant'; } /** * Generates a component recommendation from Figma design and discovered components. * * @param input - Figma design data (metadata, code), component name, and discovered components * @returns Formatted recommendation with REUSE/EXTEND/CREATE decision and implementation guidance, or error message on failure */ export declare function generateComponentRecommendation(input: GenerateComponentInput): string; /** * Creates the sfnext_analyze_component MCP tool. * * @param loadServices - Function that loads configuration and returns Services instance * @returns MCP tool for component analysis and recommendation */ export declare function createGenerateComponentTool(loadServices: () => Promise | Services): McpTool;