@salesforce/b2c-dx-mcp 0.4.4 → 0.4.5

package/dist/tools/storefrontnext/figma/generate-component/decision.js

@@ -0,0 +1,312 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.
+ * SPDX-License-Identifier: Apache-2
+ * For full license text, see the license.txt file in the repo root or http://www.apache.org/licenses/LICENSE-2.0
+ */
+/**
+ * Analyzes differences between matched component and Figma design.
+ *
+ * @param matchedComponent - The existing component to compare against
+ * @param figmaCode - The Figma-generated React code
+ * @param _figmaMetadata - Reserved for future use (e.g., component hierarchy analysis).
+ *   Currently unused but kept in the signature to avoid a breaking change once metadata
+ *   analysis is implemented.
+ */
+export function analyzeComponentDifferences(matchedComponent, figmaCode, _figmaMetadata) {
+    const differences = {
+        styling: [],
+        structural: [],
+        behavioral: [],
+        props: [],
+    };
+    // Analyze styling differences
+    differences.styling = analyzeStylingDifferences(matchedComponent.code, figmaCode);
+    // Analyze structural differences
+    differences.structural = analyzeStructuralDifferences(matchedComponent.code, figmaCode);
+    // Analyze behavioral differences (hooks, state, effects)
+    differences.behavioral = analyzeBehavioralDifferences(matchedComponent.code, figmaCode);
+    // Analyze prop differences
+    differences.props = analyzePropDifferences(matchedComponent.code, figmaCode);
+    return differences;
+}
+/**
+ * Analyzes styling differences (Tailwind classes, CSS, theme tokens)
+ */
+function analyzeStylingDifferences(existingCode, figmaCode) {
+    const differences = [];
+    // Extract className usage
+    const existingClasses = extractTailwindClasses(existingCode);
+    const figmaClasses = extractTailwindClasses(figmaCode);
+    // Check for new classes in Figma design
+    const newClasses = figmaClasses.filter((c) => !existingClasses.includes(c));
+    if (newClasses.length > 0) {
+        differences.push({
+            description: `New Tailwind classes: ${newClasses.slice(0, 5).join(', ')}${newClasses.length > 5 ? '...' : ''}`,
+            severity: newClasses.length > 10 ? 'major' : newClasses.length > 3 ? 'moderate' : 'minor',
+            isBackwardCompatible: true,
+        });
+    }
+    // Check for inline styles (anti-pattern)
+    if (figmaCode.includes('style={{') || figmaCode.includes('style="')) {
+        differences.push({
+            description: 'Figma code contains inline styles (needs conversion to Tailwind)',
+            severity: 'moderate',
+            isBackwardCompatible: true,
+        });
+    }
+    return differences;
+}
+/**
+ * Analyzes structural differences (JSX hierarchy, elements)
+ */
+function analyzeStructuralDifferences(existingCode, figmaCode) {
+    const differences = [];
+    // Extract JSX elements
+    const existingElements = extractJSXElements(existingCode);
+    const figmaElements = extractJSXElements(figmaCode);
+    // Check for different root elements
+    if (existingElements[0] !== figmaElements[0]) {
+        differences.push({
+            description: `Different root element: ${existingElements[0]} vs ${figmaElements[0]}`,
+            severity: 'moderate',
+            isBackwardCompatible: false,
+        });
+    }
+    // Check for additional nested elements
+    const newElements = figmaElements.filter((e) => !existingElements.includes(e));
+    if (newElements.length > 0) {
+        differences.push({
+            description: `New elements in Figma design: ${newElements.join(', ')}`,
+            severity: newElements.length > 3 ? 'major' : 'minor',
+            isBackwardCompatible: true,
+        });
+    }
+    return differences;
+}
+/**
+ * Analyzes behavioral differences (hooks, state, effects, event handlers)
+ */
+function analyzeBehavioralDifferences(existingCode, figmaCode) {
+    const differences = [];
+    // Check for 'use client' directive
+    const existingIsClient = existingCode.includes("'use client'") || existingCode.includes('"use client"');
+    const figmaIsClient = figmaCode.includes("'use client'") || figmaCode.includes('"use client"');
+    if (existingIsClient !== figmaIsClient) {
+        differences.push({
+            description: figmaIsClient
+                ? 'Figma design requires client-side rendering'
+                : 'Existing component is client-side, Figma design could be RSC',
+            severity: 'major',
+            isBackwardCompatible: false,
+        });
+    }
+    // Check for new hooks
+    const existingHooks = extractHooks(existingCode);
+    const figmaHooks = extractHooks(figmaCode);
+    const newHooks = figmaHooks.filter((h) => !existingHooks.includes(h));
+    if (newHooks.length > 0) {
+        differences.push({
+            description: `New React hooks needed: ${newHooks.join(', ')}`,
+            severity: 'moderate',
+            isBackwardCompatible: newHooks.every((h) => h.startsWith('use')),
+        });
+    }
+    // Check for event handlers
+    const existingHasHandlers = /on[A-Z]\w+=/g.test(existingCode);
+    const figmaHasHandlers = /on[A-Z]\w+=/g.test(figmaCode);
+    if (!existingHasHandlers && figmaHasHandlers) {
+        differences.push({
+            description: 'Figma design includes event handlers (onClick, onChange, etc.)',
+            severity: 'moderate',
+            isBackwardCompatible: true,
+        });
+    }
+    return differences;
+}
+/**
+ * Analyzes prop differences
+ * parses TypeScript interfaces to compare prop definitions
+ */
+function analyzePropDifferences(existingCode, figmaCode) {
+    const differences = [];
+    const existingPropCount = (existingCode.match(/interface\s+\w+Props/g) || []).length;
+    const figmaPropCount = (figmaCode.match(/interface\s+\w+Props/g) || []).length;
+    if (figmaPropCount > existingPropCount) {
+        differences.push({
+            description: 'Figma design may require additional props',
+            severity: 'minor',
+            isBackwardCompatible: true,
+        });
+    }
+    return differences;
+}
+/**
+ * Extracts Tailwind classes from code
+ */
+function extractTailwindClasses(code) {
+    const classRegex = /className=["']([^"']+)["']/g;
+    const classes = new Set();
+    let match;
+    while ((match = classRegex.exec(code)) !== null) {
+        const classList = match[1].split(/\s+/);
+        for (const c of classList)
+            classes.add(c);
+    }
+    return [...classes];
+}
+/**
+ * Extracts JSX elements from code (simplified)
+ */
+function extractJSXElements(code) {
+    // Simple regex to find JSX opening tags
+    const elementRegex = /<([A-Z][a-zA-Z0-9]*|[a-z]+)[\s>]/g;
+    const elements = new Set();
+    let match;
+    while ((match = elementRegex.exec(code)) !== null) {
+        elements.add(match[1]);
+    }
+    return [...elements];
+}
+/**
+ * Extracts React hooks from code
+ */
+function extractHooks(code) {
+    const hookRegex = /\b(use[A-Z]\w+)\(/g;
+    const hooks = new Set();
+    let match;
+    while ((match = hookRegex.exec(code)) !== null) {
+        hooks.add(match[1]);
+    }
+    return [...hooks];
+}
+/**
+ * Determines the appropriate action based on differences
+ * Uses type of difference + impact assessment
+ */
+export function determineAction(matchedComponent, differences) {
+    const allDifferences = [
+        ...differences.styling,
+        ...differences.structural,
+        ...differences.behavioral,
+        ...differences.props,
+    ];
+    const severityScores = { minor: 1, moderate: 3, major: 5 };
+    let differenceScore = 0;
+    for (const diff of allDifferences) {
+        differenceScore += severityScores[diff.severity];
+    }
+    // Count breaking changes
+    const breakingChanges = allDifferences.filter((d) => !d.isBackwardCompatible).length;
+    // Decision thresholds
+    const REUSE_THRESHOLD = 2; // Only minor styling differences
+    const EXTEND_THRESHOLD = 10; // Moderate differences that can be added
+    // REUSE: Minimal differences, mostly styling
+    if (differenceScore <= REUSE_THRESHOLD && breakingChanges === 0) {
+        return {
+            action: 'REUSE',
+            confidence: Math.round(matchedComponent.similarity),
+            matchedComponent: {
+                path: matchedComponent.path,
+                name: matchedComponent.name,
+                similarity: matchedComponent.similarity,
+            },
+            differences: allDifferences.map((d) => d.description),
+            recommendation: `The existing component "${matchedComponent.name}" can be reused with different props or minor styling adjustments.`,
+            suggestedApproach: `Use the existing component at ${matchedComponent.path} and customize it through props.`,
+        };
+    }
+    // CREATE: Major structural or behavioral differences, or many breaking changes
+    if (differenceScore > EXTEND_THRESHOLD || breakingChanges > 2) {
+        return {
+            action: 'CREATE',
+            confidence: 85,
+            matchedComponent: {
+                path: matchedComponent.path,
+                name: matchedComponent.name,
+                similarity: matchedComponent.similarity,
+            },
+            differences: allDifferences.map((d) => d.description),
+            recommendation: `Differences are significant enough to warrant creating a new component.`,
+            suggestedApproach: `Create a new component. You may reference patterns from ${matchedComponent.path} but build a new component.`,
+        };
+    }
+    // EXTEND: Moderate differences that can be added
+    // Determine extend strategy: props / variant / composition
+    const extendStrategy = determineExtendStrategy(differences, allDifferences);
+    return {
+        action: 'EXTEND',
+        confidence: Math.round((matchedComponent.similarity + 100 - differenceScore * 2) / 2),
+        matchedComponent: {
+            path: matchedComponent.path,
+            name: matchedComponent.name,
+            similarity: matchedComponent.similarity,
+        },
+        differences: allDifferences.map((d) => d.description),
+        recommendation: `The existing component "${matchedComponent.name}" can be extended to support the Figma design.`,
+        suggestedApproach: generateExtendApproach(extendStrategy, matchedComponent, differences),
+        extendStrategy,
+    };
+}
+/**
+ * Determines the best extend strategy based on differences
+ * Context-dependent: checks type of difference then validates with impact
+ */
+function determineExtendStrategy(differences, allDifferences) {
+    // Props extension: Only new optional behaviors (1-3 new props, backward compatible)
+    if (differences.props.length <= 3 &&
+        differences.structural.length === 0 &&
+        differences.behavioral.length <= 1 &&
+        allDifferences.every((d) => d.isBackwardCompatible)) {
+        return 'props';
+    }
+    // Composition: Structural changes or new child components
+    if (differences.structural.length > 0 || differences.behavioral.some((d) => !d.isBackwardCompatible)) {
+        return 'composition';
+    }
+    // Variant pattern: Visual variations (styling focused, 4+ new classes)
+    if (differences.styling.some((d) => d.severity !== 'minor')) {
+        return 'variant';
+    }
+    // Default to props for small changes
+    return 'props';
+}
+/**
+ * Generates extend approach description based on strategy
+ */
+function generateExtendApproach(strategy, matchedComponent, differences) {
+    const componentPath = matchedComponent.path;
+    const componentName = matchedComponent.name;
+    switch (strategy) {
+        case 'composition': {
+            return `**Composition Pattern**
+Create a new component that wraps/composes the existing one:
+1. Create new component: ${componentName}Enhanced.tsx
+2. Import and compose: <${componentName}>{/* new elements */}</${componentName}>
+3. Structural changes: ${differences.structural.map((d) => d.description).join(', ')}
+4. This preserves the existing component while adding new behavior
+
+This approach works because there are structural changes that would break existing usage if added directly.`;
+        }
+        case 'props': {
+            return `**Props Extension Pattern**
+Extend the existing component by adding new optional props:
+1. Modify ${componentPath}
+2. Add new props to the interface (${differences.props.map((d) => d.description).join(', ')})
+3. Implement the new prop behavior while maintaining backward compatibility
+4. Ensure existing usage is not affected
+
+This approach works because the changes are small and backward compatible.`;
+        }
+        case 'variant': {
+            return `**Variant Pattern**
+Add new visual variants to the existing component:
+1. Modify ${componentPath}
+2. Add variant definitions using your variant system (e.g., CVA)
+3. New styling: ${differences.styling.map((d) => d.description).join(', ')}
+4. Extend the component's visual options without breaking existing usage
+
+This approach works because the changes are primarily styling-focused.`;
+        }
+    }
+}
+//# sourceMappingURL=decision.js.map

package/dist/tools/storefrontnext/figma/generate-component/formatter.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentAnalysisResult, GenerateComponentInput } from './index.js';
+/**
+ * Formats the component generation recommendation for AI/developer.
+ *
+ * @param analysis - Component analysis result with REUSE/EXTEND/CREATE decision
+ * @param input - Original generate-component input (component name, etc.)
+ * @returns Formatted markdown string with recommendation, key differences, suggested approach, and next steps
+ */
+export declare function formatRecommendation(analysis: ComponentAnalysisResult, input: GenerateComponentInput): string;

package/dist/tools/storefrontnext/figma/generate-component/formatter.js

@@ -0,0 +1,92 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.
+ * SPDX-License-Identifier: Apache-2
+ * For full license text, see the license.txt file in the repo root or http://www.apache.org/licenses/LICENSE-2.0
+ */
+/**
+ * Formats the component generation recommendation for AI/developer.
+ *
+ * @param analysis - Component analysis result with REUSE/EXTEND/CREATE decision
+ * @param input - Original generate-component input (component name, etc.)
+ * @returns Formatted markdown string with recommendation, key differences, suggested approach, and next steps
+ */
+export function formatRecommendation(analysis, input) {
+    let output = '# Component Generation Recommendation\n\n';
+    // Decision and confidence
+    output += `**Decision:** ${analysis.action}\n`;
+    output += `**Confidence:** ${analysis.confidence}%\n\n`;
+    // Matched component (if any)
+    if (analysis.matchedComponent) {
+        output += `**Matched Component:**\n`;
+        output += `- \`${analysis.matchedComponent.name}\` at \`${analysis.matchedComponent.path}\`\n`;
+        output += `- Similarity: ${analysis.matchedComponent.similarity}%\n\n`;
+    }
+    // Recommendation
+    output += `**Recommendation:** ${analysis.recommendation}\n\n`;
+    // Key differences
+    if (analysis.differences && analysis.differences.length > 0) {
+        output += `**Key Differences:**\n`;
+        for (const [i, diff] of analysis.differences.entries()) {
+            output += `${i + 1}. ${diff}\n`;
+        }
+        output += '\n';
+    }
+    // Suggested approach
+    if (analysis.suggestedApproach) {
+        output += `## Suggested Approach\n\n${analysis.suggestedApproach}\n\n`;
+    }
+    // Next steps
+    output += formatNextSteps(analysis, input);
+    return output;
+}
+/**
+ * Formats next steps based on action type
+ */
+function formatNextSteps(analysis, input) {
+    let section = '## Next Steps\n\n';
+    switch (analysis.action) {
+        case 'CREATE': {
+            section += `Create new component: \`${input.componentName}\`\n\n`;
+            section += `**Implementation:**\n`;
+            section += `1. Create component file structure (index.tsx, types.ts if needed)\n`;
+            section += `2. Convert Figma code to StorefrontNext patterns:\n`;
+            section += `   - Use React Server Components by default (add 'use client' if needed)\n`;
+            section += `   - Replace inline styles with Tailwind classes\n`;
+            section += `   - Map colors/spacing to theme tokens\n`;
+            section += `   - Add proper TypeScript types and accessibility attributes\n`;
+            section += `3. Export component from index\n`;
+            if (analysis.matchedComponent) {
+                section += `4. Reference patterns from \`${analysis.matchedComponent.path}\` for consistency\n`;
+            }
+            section += '\n';
+            break;
+        }
+        case 'EXTEND': {
+            const strategy = analysis.extendStrategy || 'props';
+            section += `**Strategy:** ${strategy === 'props' ? 'Add new props' : strategy === 'variant' ? 'Add variant' : 'Composition'}\n\n`;
+            section += `1. Modify \`${analysis.matchedComponent?.path}\`\n`;
+            if (strategy === 'props') {
+                section += `2. Add new optional props to the interface\n`;
+                section += `3. Implement new prop behavior while maintaining backward compatibility\n`;
+            }
+            else if (strategy === 'variant') {
+                section += `2. Add new variant to existing variant definitions\n`;
+                section += `3. Apply variant styling using theme tokens\n`;
+            }
+            else {
+                section += `2. Create wrapper component that composes the base component\n`;
+                section += `3. Add additional elements/functionality in the wrapper\n`;
+            }
+            section += `4. Validate: ensure existing usages still work\n\n`;
+            break;
+        }
+        case 'REUSE': {
+            section += `Import and use \`${analysis.matchedComponent?.name}\` from \`${analysis.matchedComponent?.path}\`.\n`;
+            section += `Customize through props and Tailwind classes to match the Figma design.\n\n`;
+            break;
+        }
+    }
+    section += '**Confirm before proceeding with implementation.**\n';
+    return section;
+}
+//# sourceMappingURL=formatter.js.map

package/dist/tools/storefrontnext/figma/generate-component/index.d.ts

@@ -0,0 +1,114 @@
+/**
+ * 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<z.ZodObject<{
+        path: z.ZodString;
+        name: z.ZodString;
+        similarity: z.ZodNumber;
+        matchType: z.ZodEnum<["name", "structure", "visual"]>;
+        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<z.ZodString>;
+}, "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<typeof generateComponentSchema>;
+/**
+ * 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 storefront_next_generate_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: () => Services): McpTool;

package/dist/tools/storefrontnext/figma/generate-component/index.js

@@ -0,0 +1,98 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.
+ * SPDX-License-Identifier: Apache-2
+ * For full license text, see the license.txt file in the repo root or http://www.apache.org/licenses/LICENSE-2.0
+ */
+/**
+ * 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 { createToolAdapter, textResult } from '../../../adapter.js';
+import { analyzeComponentDifferences, determineAction } from './decision.js';
+import { formatRecommendation } from './formatter.js';
+const discoveredComponentSchema = z.object({
+    path: z.string().describe('Absolute file path to the component'),
+    name: z.string().describe('Component name'),
+    similarity: z.number().min(0).max(100).describe('Similarity score (0-100)'),
+    matchType: z.enum(['name', 'structure', 'visual']).describe('Type of match found'),
+    code: z.string().describe('Full source code of the component'),
+});
+export const generateComponentSchema = z
+    .object({
+    figmaMetadata: z.string().describe('JSON string containing Figma design metadata (from mcp__figma__get_metadata)'),
+    figmaCode: z.string().describe('Generated React code from Figma (from mcp__figma__get_design_context)'),
+    componentName: z.string().describe('Suggested name for the component extracted from Figma design'),
+    discoveredComponents: z
+        .array(discoveredComponentSchema)
+        .describe('Array of similar components discovered using Glob/Grep/Read. Pass empty array if no similar components found.'),
+    workspacePath: z
+        .string()
+        .optional()
+        .describe('Optional workspace root path. Defaults to the MCP server project directory.'),
+})
+    .strict();
+function analyzeComponent(input) {
+    const similarComponents = input.discoveredComponents;
+    if (similarComponents.length === 0) {
+        return {
+            action: 'CREATE',
+            confidence: 95,
+            recommendation: `No similar components found in the codebase. Will create new component: ${input.componentName}`,
+            suggestedApproach: 'Create a new component following StorefrontNext patterns.',
+        };
+    }
+    const topMatch = similarComponents[0];
+    const differences = analyzeComponentDifferences(topMatch, input.figmaCode, input.figmaMetadata);
+    const decision = determineAction(topMatch, differences);
+    return decision;
+}
+/**
+ * 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 function generateComponentRecommendation(input) {
+    try {
+        const analysis = analyzeComponent(input);
+        const recommendation = formatRecommendation(analysis, input);
+        return recommendation;
+    }
+    catch (error) {
+        const errorMessage = error instanceof Error ? error.message : String(error);
+        return `# Error: Component Generation Failed\n\n${errorMessage}\n\nPlease check the input parameters and try again.`;
+    }
+}
+/**
+ * Creates the storefront_next_generate_component MCP tool.
+ *
+ * @param loadServices - Function that loads configuration and returns Services instance
+ * @returns MCP tool for component analysis and recommendation
+ */
+export function createGenerateComponentTool(loadServices) {
+    return createToolAdapter({
+        name: 'storefront_next_generate_component',
+        description: 'Analyzes Figma design and discovered components to recommend component generation strategy. ' +
+            'Workflow: 1) Discover similar components using Glob/Grep/Read tools, ' +
+            '2) Call this tool with the discoveredComponents parameter, ' +
+            '3) Tool analyzes differences and recommends REUSE/EXTEND/CREATE action, ' +
+            '4) Tool provides formatted recommendation with code examples and workflow steps. ' +
+            'Call this tool AFTER retrieving Figma design data and discovering similar components.',
+        toolsets: ['STOREFRONTNEXT'],
+        isGA: false,
+        requiresInstance: false,
+        inputSchema: generateComponentSchema.shape,
+        async execute(args, context) {
+            return generateComponentRecommendation({
+                ...args,
+                workspacePath: args.workspacePath ?? context.services.resolveWithProjectDirectory(),
+            });
+        },
+        formatOutput: (output) => textResult(output),
+    }, loadServices);
+}
+//# sourceMappingURL=index.js.map