@salesforce/b2c-dx-mcp 0.4.4 → 0.4.5

package/dist/tools/storefrontnext/figma/map-tokens/css-parser.d.ts

@@ -0,0 +1,71 @@
+/**
+ * Design token extracted from theme CSS (app.css).
+ *
+ * @property {string} name - CSS custom property name (e.g., "--color-primary")
+ * @property {string} value - Raw value (may be var() reference)
+ * @property {'dark'|'light'|'shared'} theme - Theme context: 'dark', 'light', or 'shared'
+ * @property {'color'|'fontFamily'|'fontSize'|'opacity'|'other'|'radius'|'spacing'} type - Token type for matching: color, spacing, radius, etc.
+ * @property {string} [resolvedValue] - Resolved value for var() references (actual hex/value)
+ */
+export interface ThemeToken {
+    name: string;
+    value: string;
+    theme: 'dark' | 'light' | 'shared';
+    type: 'color' | 'fontFamily' | 'fontSize' | 'opacity' | 'other' | 'radius' | 'spacing';
+    resolvedValue?: string;
+}
+/**
+ * Parsed theme file with tokens organized by theme context.
+ *
+ * @property {ThemeToken[]} tokens - All resolved tokens (excludes unresolved var() references)
+ * @property {Map<string,ThemeToken>} lightTokens - Map of token name to ThemeToken for light theme
+ * @property {Map<string,ThemeToken>} darkTokens - Map of token name to ThemeToken for dark theme
+ * @property {Map<string,ThemeToken>} sharedTokens - Map of token name to ThemeToken for shared tokens
+ * @property {string[]} warnings - Warnings (e.g., unresolved var() references)
+ */
+export interface ParsedTheme {
+    tokens: ThemeToken[];
+    lightTokens: Map<string, ThemeToken>;
+    darkTokens: Map<string, ThemeToken>;
+    sharedTokens: Map<string, ThemeToken>;
+    warnings: string[];
+}
+/**
+ * Finds the theme file path (app.css) in the workspace.
+ *
+ * @param workspaceRoot - Workspace root directory to search
+ * @returns Absolute path to app.css if found, or null
+ */
+export declare function findThemeFilePath(workspaceRoot?: string): null | string;
+/**
+ * Parses theme file and extracts all CSS custom properties.
+ *
+ * When themeFilePath is not provided, searches for app.css in src/app.css or app.css relative to workspaceRoot.
+ *
+ * @param themeFilePath - Optional absolute path to theme CSS file
+ * @param workspaceRoot - Optional workspace root for theme file discovery when themeFilePath is omitted
+ * @returns Parsed theme with tokens organized by light/dark/shared
+ * @throws {Error} When theme file is not found
+ */
+export declare function parseThemeFile(themeFilePath?: string, workspaceRoot?: string): ParsedTheme;
+/**
+ * Gets all color tokens from parsed theme.
+ *
+ * @param parsedTheme - Parsed theme from parseThemeFile
+ * @returns Array of color-type tokens
+ */
+export declare function getColorTokens(parsedTheme: ParsedTheme): ThemeToken[];
+/**
+ * Gets all spacing tokens from parsed theme.
+ *
+ * @param parsedTheme - Parsed theme from parseThemeFile
+ * @returns Array of spacing-type tokens
+ */
+export declare function getSpacingTokens(parsedTheme: ParsedTheme): ThemeToken[];
+/**
+ * Gets all radius tokens from parsed theme.
+ *
+ * @param parsedTheme - Parsed theme from parseThemeFile
+ * @returns Array of radius-type tokens
+ */
+export declare function getRadiusTokens(parsedTheme: ParsedTheme): ThemeToken[];

package/dist/tools/storefrontnext/figma/map-tokens/css-parser.js

@@ -0,0 +1,260 @@
+/*
+ * 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
+ */
+/**
+ * PostCSS dependency: Used to parse theme CSS (app.css) into an AST for reliable extraction of
+ * design tokens. Required for: (1) walking @theme at-rules and inline blocks, (2) distinguishing
+ * light/dark/shared tokens via selectors (e.g. [data-theme="light"], :root), (3) handling nested
+ * rules and var() references. Regex-based parsing would be brittle for real-world theme files.
+ */
+import { readFileSync, existsSync } from 'node:fs';
+import { join } from 'node:path';
+import postcss, {} from 'postcss';
+/**
+ * Determines the type of a CSS custom property based on its name and value
+ */
+function determineTokenType(name, value) {
+    const nameLower = name.toLowerCase();
+    if (nameLower.includes('color') || value.startsWith('#') || value.startsWith('rgb')) {
+        return 'color';
+    }
+    if (nameLower.includes('radius')) {
+        return 'radius';
+    }
+    if (nameLower.includes('opacity')) {
+        return 'opacity';
+    }
+    if (nameLower.includes('font-size') || nameLower.includes('text-size')) {
+        return 'fontSize';
+    }
+    if (nameLower.includes('font-family') || nameLower.includes('font-face')) {
+        return 'fontFamily';
+    }
+    if (nameLower.includes('spacing') ||
+        nameLower.includes('gap') ||
+        nameLower.includes('padding') ||
+        nameLower.includes('margin')) {
+        return 'spacing';
+    }
+    return 'other';
+}
+/**
+ * Extracts CSS custom property name from var() reference
+ * Example: "var(--primary)" -> "--primary"
+ */
+function extractVarName(value) {
+    const match = value.match(/var\(([^)]+)\)/);
+    return match ? match[1].trim() : null;
+}
+/**
+ * Resolves var() references to actual values
+ * Returns warnings for any unresolved references
+ */
+function resolveVarReferences(tokens) {
+    const warnings = [];
+    const tokenMap = new Map();
+    for (const token of tokens)
+        tokenMap.set(token.name, token);
+    for (const token of tokens) {
+        if (token.value.includes('var(')) {
+            const varName = extractVarName(token.value);
+            if (varName) {
+                const referencedToken = tokenMap.get(varName);
+                if (referencedToken) {
+                    // Recursively resolve if the referenced token also has a var()
+                    token.resolvedValue = referencedToken.resolvedValue || referencedToken.value;
+                }
+                else {
+                    // Unresolved reference - log warning and skip this token
+                    warnings.push(`Warning: Token "${token.name}" references undefined variable "${varName}". This token will be excluded from matching.`);
+                    // Don't set resolvedValue - this token will be filtered out
+                }
+            }
+        }
+        else {
+            token.resolvedValue = token.value;
+        }
+    }
+    return warnings;
+}
+/**
+ * Extracts custom properties from a PostCSS rule node
+ */
+function extractCustomPropertiesFromRule(rule, theme) {
+    const tokens = [];
+    rule.walkDecls((decl) => {
+        if (decl.prop.startsWith('--')) {
+            tokens.push({
+                name: decl.prop,
+                value: decl.value,
+                theme,
+                type: determineTokenType(decl.prop, decl.value),
+            });
+        }
+    });
+    return tokens;
+}
+/**
+ * Determines if a selector represents a dark theme context
+ */
+function isDarkThemeSelector(selector) {
+    return (selector.includes('.dark') ||
+        selector.includes('[data-theme="dark"]') ||
+        selector.includes("[data-theme='dark']") ||
+        (selector.includes('html:not(.dark)') && selector.includes('inverse')));
+}
+/**
+ * Determines if a selector represents a light theme context
+ */
+function isLightThemeSelector(selector) {
+    return (selector === ':root' ||
+        selector.includes('[data-theme="light"]') ||
+        selector.includes("[data-theme='light']") ||
+        (selector.includes('html.dark') && selector.includes('inverse')));
+}
+/**
+ * Parses CSS content to extract theme tokens from different sections using PostCSS
+ */
+function parseCSSContent(cssContent) {
+    const allTokens = [];
+    // Parse CSS with PostCSS
+    const root = postcss.parse(cssContent);
+    // Walk through all rules and at-rules
+    root.walkAtRules('theme', (atRule) => {
+        // Extract @theme inline block (shared tokens)
+        if (atRule.params.includes('inline')) {
+            atRule.walkDecls((decl) => {
+                if (decl.prop.startsWith('--')) {
+                    allTokens.push({
+                        name: decl.prop,
+                        value: decl.value,
+                        theme: 'shared',
+                        type: determineTokenType(decl.prop, decl.value),
+                    });
+                }
+            });
+        }
+    });
+    // Walk through all rules to find theme-specific tokens
+    root.walkRules((rule) => {
+        const selector = rule.selector;
+        // Determine theme based on selector
+        let theme = null;
+        if (isDarkThemeSelector(selector)) {
+            theme = 'dark';
+        }
+        else if (isLightThemeSelector(selector)) {
+            theme = 'light';
+        }
+        // Extract tokens if we identified a theme
+        if (theme) {
+            const tokens = extractCustomPropertiesFromRule(rule, theme);
+            allTokens.push(...tokens);
+        }
+    });
+    // Resolve var() references and collect warnings
+    const warnings = resolveVarReferences(allTokens);
+    // Filter out tokens with unresolved references
+    const resolvedTokens = allTokens.filter((token) => token.resolvedValue !== undefined);
+    // Log warnings about skipped tokens
+    if (warnings.length > 0 && resolvedTokens.length < allTokens.length) {
+        const skippedCount = allTokens.length - resolvedTokens.length;
+        warnings.push(`Skipped ${skippedCount} token(s) with unresolved var() references. These will not be available for matching.`);
+    }
+    // Organize tokens by theme
+    const lightTokens = new Map();
+    const darkTokens = new Map();
+    const sharedTokens = new Map();
+    for (const token of resolvedTokens) {
+        switch (token.theme) {
+            case 'dark': {
+                darkTokens.set(token.name, token);
+                break;
+            }
+            case 'light': {
+                lightTokens.set(token.name, token);
+                break;
+            }
+            case 'shared': {
+                sharedTokens.set(token.name, token);
+                break;
+            }
+        }
+    }
+    return {
+        tokens: resolvedTokens,
+        lightTokens,
+        darkTokens,
+        sharedTokens,
+        warnings,
+    };
+}
+/**
+ * Finds the theme file path (app.css) in the workspace.
+ *
+ * @param workspaceRoot - Workspace root directory to search
+ * @returns Absolute path to app.css if found, or null
+ */
+export function findThemeFilePath(workspaceRoot) {
+    if (!workspaceRoot) {
+        return null;
+    }
+    const possiblePaths = [join(workspaceRoot, 'src/app.css'), join(workspaceRoot, 'app.css')];
+    for (const path of possiblePaths) {
+        if (existsSync(path)) {
+            return path;
+        }
+    }
+    return null;
+}
+/**
+ * Parses theme file and extracts all CSS custom properties.
+ *
+ * When themeFilePath is not provided, searches for app.css in src/app.css or app.css relative to workspaceRoot.
+ *
+ * @param themeFilePath - Optional absolute path to theme CSS file
+ * @param workspaceRoot - Optional workspace root for theme file discovery when themeFilePath is omitted
+ * @returns Parsed theme with tokens organized by light/dark/shared
+ * @throws {Error} When theme file is not found
+ */
+export function parseThemeFile(themeFilePath, workspaceRoot) {
+    const filePath = themeFilePath ?? findThemeFilePath(workspaceRoot);
+    if (!filePath) {
+        throw new Error('Theme file (app.css) not found. Please provide the themeFilePath parameter.');
+    }
+    if (!existsSync(filePath)) {
+        throw new Error(`Theme file not found at: ${filePath}`);
+    }
+    const cssContent = readFileSync(filePath, 'utf8');
+    return parseCSSContent(cssContent);
+}
+/**
+ * Gets all color tokens from parsed theme.
+ *
+ * @param parsedTheme - Parsed theme from parseThemeFile
+ * @returns Array of color-type tokens
+ */
+export function getColorTokens(parsedTheme) {
+    return parsedTheme.tokens.filter((token) => token.type === 'color');
+}
+/**
+ * Gets all spacing tokens from parsed theme.
+ *
+ * @param parsedTheme - Parsed theme from parseThemeFile
+ * @returns Array of spacing-type tokens
+ */
+export function getSpacingTokens(parsedTheme) {
+    return parsedTheme.tokens.filter((token) => token.type === 'spacing');
+}
+/**
+ * Gets all radius tokens from parsed theme.
+ *
+ * @param parsedTheme - Parsed theme from parseThemeFile
+ * @returns Array of radius-type tokens
+ */
+export function getRadiusTokens(parsedTheme) {
+    return parsedTheme.tokens.filter((token) => token.type === 'radius');
+}
+//# sourceMappingURL=css-parser.js.map

package/dist/tools/storefrontnext/figma/map-tokens/index.d.ts

@@ -0,0 +1,61 @@
+/**
+ * Map tokens tool for Figma-to-component workflow.
+ *
+ * Maps Figma design tokens to Storefront Next theme tokens in app.css with exact/fuzzy matching.
+ *
+ * @module tools/storefrontnext/figma/map-tokens
+ */
+import { z } from 'zod';
+import type { McpTool } from '../../../../utils/index.js';
+import type { Services } from '../../../../services.js';
+export declare const mapTokensToThemeSchema: z.ZodObject<{
+    figmaTokens: z.ZodArray<z.ZodObject<{
+        name: z.ZodString;
+        value: z.ZodString;
+        type: z.ZodEnum<["color", "spacing", "radius", "opacity", "fontSize", "fontFamily", "other"]>;
+        description: z.ZodOptional<z.ZodString>;
+    }, "strip", z.ZodTypeAny, {
+        type: "color" | "fontFamily" | "fontSize" | "opacity" | "other" | "radius" | "spacing";
+        name: string;
+        value: string;
+        description?: string | undefined;
+    }, {
+        type: "color" | "fontFamily" | "fontSize" | "opacity" | "other" | "radius" | "spacing";
+        name: string;
+        value: string;
+        description?: string | undefined;
+    }>, "many">;
+    themeFilePath: z.ZodOptional<z.ZodString>;
+}, "strict", z.ZodTypeAny, {
+    figmaTokens: {
+        type: "color" | "fontFamily" | "fontSize" | "opacity" | "other" | "radius" | "spacing";
+        name: string;
+        value: string;
+        description?: string | undefined;
+    }[];
+    themeFilePath?: string | undefined;
+}, {
+    figmaTokens: {
+        type: "color" | "fontFamily" | "fontSize" | "opacity" | "other" | "radius" | "spacing";
+        name: string;
+        value: string;
+        description?: string | undefined;
+    }[];
+    themeFilePath?: string | undefined;
+}>;
+export type MapTokensToThemeInput = z.infer<typeof mapTokensToThemeSchema>;
+/**
+ * Maps Figma design tokens to existing theme tokens in app.css.
+ *
+ * @param args - Figma tokens array and optional theme file path
+ * @param workspaceRoot - Optional workspace root for theme file discovery; used when themeFilePath is not provided
+ * @returns Formatted mapping report with exact/fuzzy matches, confidence scores, and usage instructions, or error message on failure
+ */
+export declare function mapFigmaTokensToTheme(args: MapTokensToThemeInput, workspaceRoot?: string): string;
+/**
+ * Creates the storefront_next_map_tokens_to_theme MCP tool.
+ *
+ * @param loadServices - Function that loads configuration and returns Services instance
+ * @returns MCP tool for token mapping
+ */
+export declare function createMapTokensToThemeTool(loadServices: () => Services): McpTool;

package/dist/tools/storefrontnext/figma/map-tokens/index.js

@@ -0,0 +1,234 @@
+/*
+ * 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
+ */
+/**
+ * Map tokens tool for Figma-to-component workflow.
+ *
+ * Maps Figma design tokens to Storefront Next theme tokens in app.css with exact/fuzzy matching.
+ *
+ * @module tools/storefrontnext/figma/map-tokens
+ */
+import { z } from 'zod';
+import { createToolAdapter, textResult } from '../../../adapter.js';
+import { parseThemeFile } from './css-parser.js';
+import { matchTokens } from './token-matcher.js';
+export const mapTokensToThemeSchema = z
+    .object({
+    figmaTokens: z
+        .array(z.object({
+        name: z.string().describe('Token name from Figma (e.g., "Primary/Blue", "Spacing/Large")'),
+        value: z.string().describe('Token value (e.g., "#2563eb", "16px", "0.5rem")'),
+        type: z
+            .enum(['color', 'spacing', 'radius', 'opacity', 'fontSize', 'fontFamily', 'other'])
+            .describe('Type of the token'),
+        description: z.string().optional().describe('Optional description from Figma'),
+    }))
+        .describe('Array of design tokens extracted from Figma'),
+    themeFilePath: z
+        .string()
+        .optional()
+        .describe('Optional absolute path to theme CSS file. If not provided, will search for app.css in common locations.'),
+})
+    .strict();
+function formatTokenMatch(match) {
+    let output = `### ${match.figmaToken.name}\n\n`;
+    output += `- **Figma Value**: \`${match.figmaToken.value}\`\n`;
+    output += `- **Type**: ${match.figmaToken.type}\n`;
+    if (match.figmaToken.description) {
+        output += `- **Description**: ${match.figmaToken.description}\n`;
+    }
+    output += `\n#### Match Result\n\n`;
+    output += `- **Match Type**: ${match.matchType}\n`;
+    output += `- **Confidence**: ${match.confidence}%\n`;
+    if (match.matchedToken) {
+        output += `- **Matched Token**: \`${match.matchedToken.name}\`\n`;
+        output += `- **Token Value**: \`${match.matchedToken.value}\`\n`;
+        output += `- **Resolved Value**: \`${match.matchedToken.resolvedValue || match.matchedToken.value}\`\n`;
+        output += `- **Theme**: ${match.matchedToken.theme}\n`;
+    }
+    output += `- **Reason**: ${match.reason}\n\n`;
+    if (match.suggestions && match.suggestions.length > 0) {
+        output += `#### Suggestions\n\n`;
+        for (const [index, suggestion] of match.suggestions.entries()) {
+            output += `${index + 1}. **${suggestion.tokenName}**\n`;
+            output += `   - Value: \`${suggestion.value}\`\n`;
+            output += `   - Theme: ${suggestion.theme}\n`;
+            output += `   - Reason: ${suggestion.reason}\n`;
+            if (suggestion.insertAfter) {
+                output += `   - Insert after: \`${suggestion.insertAfter}\`\n`;
+            }
+            output += `\n`;
+        }
+    }
+    return output;
+}
+function generateSummary(matches) {
+    const exactMatches = matches.filter((m) => m.matchType === 'exact');
+    const fuzzyMatches = matches.filter((m) => m.matchType === 'fuzzy');
+    const noMatches = matches.filter((m) => m.matchType === 'none');
+    const highConfidence = matches.filter((m) => m.confidence >= 70 && m.matchedToken);
+    const lowConfidence = matches.filter((m) => m.confidence < 70 && m.confidence > 0);
+    let summary = `## Summary\n\n`;
+    summary += `- **Total Tokens**: ${matches.length}\n`;
+    summary += `- **Exact Matches**: ${exactMatches.length}\n`;
+    summary += `- **Fuzzy Matches**: ${fuzzyMatches.length}\n`;
+    summary += `- **No Matches**: ${noMatches.length}\n`;
+    summary += `- **High Confidence (≥70%)**: ${highConfidence.length}\n`;
+    summary += `- **Low Confidence (<70%)**: ${lowConfidence.length}\n\n`;
+    if (exactMatches.length > 0) {
+        summary += `### ✅ Exact Matches (Use these tokens directly)\n\n`;
+        for (const match of exactMatches) {
+            if (match.matchedToken) {
+                summary += `- \`${match.figmaToken.name}\` → \`${match.matchedToken.name}\`\n`;
+            }
+        }
+        summary += `\n`;
+    }
+    if (highConfidence.length > 0) {
+        summary += `### ⚠️ High Confidence Fuzzy Matches (Review and confirm)\n\n`;
+        for (const match of highConfidence) {
+            if (match.matchedToken) {
+                summary += `- \`${match.figmaToken.name}\` → \`${match.matchedToken.name}\` (${match.confidence}%)\n`;
+            }
+        }
+        summary += `\n`;
+    }
+    if (lowConfidence.length > 0) {
+        summary += `### ⚠️ Low Confidence Matches (Verify before using)\n\n`;
+        for (const match of lowConfidence) {
+            if (match.matchedToken) {
+                summary += `- \`${match.figmaToken.name}\` → \`${match.matchedToken.name}\` (${match.confidence}%)\n`;
+            }
+        }
+        summary += `\n`;
+    }
+    if (noMatches.length > 0) {
+        summary += `### ❌ No Matches (New tokens needed)\n\n`;
+        for (const match of noMatches) {
+            summary += `- \`${match.figmaToken.name}\`: ${match.figmaToken.value}\n`;
+            if (match.suggestions && match.suggestions.length > 0) {
+                summary += `  - Suggested: \`${match.suggestions[0].tokenName}\`\n`;
+            }
+        }
+        summary += `\n`;
+    }
+    return summary;
+}
+function generateRecommendations(matches) {
+    const needsNewTokens = matches.filter((m) => m.matchType === 'none');
+    const needsReview = matches.filter((m) => m.matchType === 'fuzzy' && m.confidence < 70);
+    if (needsNewTokens.length === 0 && needsReview.length === 0) {
+        return `## ✅ Recommendations\n\nAll tokens have been matched with high confidence. You can proceed with using the matched tokens in your component.\n\n`;
+    }
+    let recommendations = `## 📝 Recommendations\n\n`;
+    if (needsNewTokens.length > 0) {
+        recommendations += `### Create New Tokens\n\n`;
+        recommendations += `The following tokens from Figma don't have matches in your theme. Consider adding them to your \`app.css\` file:\n\n`;
+        for (const match of needsNewTokens) {
+            if (match.suggestions && match.suggestions.length > 0) {
+                const suggestion = match.suggestions[0];
+                recommendations += `\`\`\`css\n`;
+                recommendations += `/* Add to ${suggestion.theme === 'both' ? ':root and .dark' : suggestion.theme === 'light' ? ':root' : '.dark'} section */\n`;
+                recommendations += `${suggestion.tokenName}: ${suggestion.value};\n`;
+                recommendations += `\`\`\`\n\n`;
+            }
+        }
+    }
+    if (needsReview.length > 0) {
+        recommendations += `### Review Low Confidence Matches\n\n`;
+        recommendations += `The following matches have confidence below 70%. Please review and confirm they are correct before using:\n\n`;
+        for (const match of needsReview) {
+            if (match.matchedToken) {
+                recommendations += `- **${match.figmaToken.name}** (${match.figmaToken.value})\n`;
+                recommendations += `  - Matched: \`${match.matchedToken.name}\` (${match.matchedToken.resolvedValue})\n`;
+                recommendations += `  - Confidence: ${match.confidence}%\n`;
+                recommendations += `  - Reason: ${match.reason}\n\n`;
+            }
+        }
+    }
+    return recommendations;
+}
+/**
+ * Maps Figma design tokens to existing theme tokens in app.css.
+ *
+ * @param args - Figma tokens array and optional theme file path
+ * @param workspaceRoot - Optional workspace root for theme file discovery; used when themeFilePath is not provided
+ * @returns Formatted mapping report with exact/fuzzy matches, confidence scores, and usage instructions, or error message on failure
+ */
+export function mapFigmaTokensToTheme(args, workspaceRoot) {
+    try {
+        const parsedTheme = parseThemeFile(args.themeFilePath, workspaceRoot);
+        const figmaTokens = args.figmaTokens.map((token) => ({
+            name: token.name,
+            value: token.value,
+            type: token.type,
+            description: token.description,
+        }));
+        const matches = matchTokens(figmaTokens, parsedTheme);
+        let response = `# Figma Design Tokens → StorefrontNext Theme Mapping\n\n`;
+        if (parsedTheme.warnings.length > 0) {
+            response += `## ⚠️ Warnings\n\n`;
+            for (const warning of parsedTheme.warnings) {
+                response += `- ${warning}\n`;
+            }
+            response += `\n`;
+        }
+        response += generateSummary(matches);
+        response += `## Detailed Mapping Results\n\n`;
+        for (const match of matches) {
+            response += formatTokenMatch(match);
+        }
+        response += generateRecommendations(matches);
+        response += `## 💡 Usage Instructions\n\n`;
+        response += `### Using Matched Tokens in Components\n\n`;
+        response += `For exact and high-confidence matches, use the token directly in your Tailwind classes:\n\n`;
+        response += `\`\`\`tsx\n`;
+        response += `// Instead of hardcoded colors\n`;
+        response += `<div className="bg-[#2563eb]">\n\n`;
+        response += `// Use theme tokens\n`;
+        response += `<div className="bg-primary">\n`;
+        response += `\`\`\`\n\n`;
+        response += `### Creating New Tokens\n\n`;
+        response += `If you need to add new tokens, add them to your \`app.css\` file in both light and dark theme sections:\n\n`;
+        response += `\`\`\`css\n`;
+        response += `:root {\n`;
+        response += `  --your-new-token: #value;\n`;
+        response += `}\n\n`;
+        response += `.dark {\n`;
+        response += `  --your-new-token: #dark-value;\n`;
+        response += `}\n`;
+        response += `\`\`\`\n\n`;
+        return response;
+    }
+    catch (error) {
+        const errorMessage = error instanceof Error ? error.message : String(error);
+        return `# Error: Token Mapping Failed\n\n${errorMessage}\n\nPlease ensure the theme file path is correct and accessible.`;
+    }
+}
+/**
+ * Creates the storefront_next_map_tokens_to_theme MCP tool.
+ *
+ * @param loadServices - Function that loads configuration and returns Services instance
+ * @returns MCP tool for token mapping
+ */
+export function createMapTokensToThemeTool(loadServices) {
+    return createToolAdapter({
+        name: 'storefront_next_map_tokens_to_theme',
+        description: 'Maps Figma design tokens to existing StorefrontNext theme tokens in app.css. ' +
+            'Analyzes Figma design tokens (colors, spacing, radius, etc.) and finds exact matches, ' +
+            'provides fuzzy matches with confidence scores, suggests new token names for unmatched values, ' +
+            'and recommends where to add new tokens in the CSS file. ' +
+            'Use this tool after retrieving design variables from Figma MCP to ensure components use theme tokens instead of hardcoded values.',
+        toolsets: ['STOREFRONTNEXT'],
+        isGA: false,
+        requiresInstance: false,
+        inputSchema: mapTokensToThemeSchema.shape,
+        async execute(args, context) {
+            return mapFigmaTokensToTheme(args, context.services.resolveWithProjectDirectory());
+        },
+        formatOutput: (output) => textResult(output),
+    }, loadServices);
+}
+//# sourceMappingURL=index.js.map