@salesforce/b2c-dx-mcp 0.4.3 → 0.4.5

package/dist/tools/storefrontnext/site-theming/theming-store.js

@@ -0,0 +1,410 @@
+/*
+ * 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
+ */
+import { readFileSync, existsSync } from 'node:fs';
+import { join, dirname, basename } from 'node:path';
+import { createRequire } from 'node:module';
+import { getLogger } from '@salesforce/b2c-tooling-sdk/logging';
+// Resolve the site-theming content directory from the package root
+const require = createRequire(import.meta.url);
+const packageRoot = dirname(require.resolve('@salesforce/b2c-dx-mcp/package.json'));
+const SITE_THEMING_CONTENT_DIR = join(packageRoot, 'content', 'site-theming');
+const logger = getLogger();
+function parseWorkflowSection(content) {
+    const workflowMatch = content.match(/##\s*🔄\s*WORKFLOW[^#]*(?=##|$)/is);
+    if (!workflowMatch)
+        return undefined;
+    const workflowContent = workflowMatch[0].replace(/##\s*🔄\s*WORKFLOW[^\n]*\n?/i, '').trim();
+    const stepMatches = workflowContent.match(/^\d+\.\s+(.+)$/gm);
+    const steps = stepMatches ? stepMatches.map((step) => step.replace(/^\d+\.\s+/, '').trim()) : [];
+    const extractionMatch = workflowContent.match(/###\s*📝\s*EXTRACTION[^#]*(?=###|$)/is);
+    const extractionInstructions = extractionMatch
+        ? extractionMatch[0].replace(/###\s*📝\s*EXTRACTION[^\n]*\n?/i, '').trim()
+        : undefined;
+    const checklistMatch = workflowContent.match(/###\s*✅\s*PRE-IMPLEMENTATION[^#]*(?=###|$)/is);
+    const preImplementationChecklist = checklistMatch
+        ? checklistMatch[0].replace(/###\s*✅\s*PRE-IMPLEMENTATION[^\n]*\n?/i, '').trim()
+        : undefined;
+    if (steps.length > 0 || extractionInstructions || preImplementationChecklist) {
+        return { steps, extractionInstructions, preImplementationChecklist };
+    }
+    return undefined;
+}
+function parseValidationSection(content) {
+    const validationMatch = content.match(/##\s*✅\s*VALIDATION[^#]*(?=##|$)/is);
+    if (!validationMatch)
+        return undefined;
+    const validationContent = validationMatch[0].replace(/##\s*✅\s*VALIDATION[^\n]*\n?/i, '').trim();
+    const colorValidationMatch = validationContent.match(/###\s*A\.\s*Color[^#]*(?=###|$)/is);
+    const colorValidation = colorValidationMatch
+        ? colorValidationMatch[0].replace(/###\s*A\.\s*Color[^\n]*\n?/i, '').trim()
+        : undefined;
+    const fontValidationMatch = validationContent.match(/###\s*B\.\s*Font[^#]*(?=###|$)/is);
+    const fontValidation = fontValidationMatch
+        ? fontValidationMatch[0].replace(/###\s*B\.\s*Font[^\n]*\n?/i, '').trim()
+        : undefined;
+    const generalValidationMatch = validationContent.match(/###\s*C\.\s*General[^#]*(?=###|$)/is);
+    const generalValidation = generalValidationMatch
+        ? generalValidationMatch[0].replace(/###\s*C\.\s*General[^\n]*\n?/i, '').trim()
+        : undefined;
+    const requirementsMatch = validationContent.match(/###\s*IMPORTANT[^#]*(?=###|$)/is);
+    const requirements = requirementsMatch
+        ? requirementsMatch[0].replace(/###\s*IMPORTANT[^\n]*\n?/i, '').trim()
+        : undefined;
+    if (colorValidation || fontValidation || generalValidation || requirements) {
+        return { colorValidation, fontValidation, generalValidation, requirements };
+    }
+    return undefined;
+}
+function extractRuleItems(content, pattern, type) {
+    const rules = [];
+    let match;
+    while ((match = pattern.exec(content)) !== null) {
+        const items = match[1]
+            .split('\n')
+            .filter((line) => line.trim().startsWith('-'))
+            .map((line) => line.replace(/^-\s*/, '').trim());
+        for (const item of items) {
+            rules.push({ type, description: item });
+        }
+    }
+    return rules;
+}
+function generateColorQuestions(guidance, content, generateId) {
+    const allGuidelines = guidance.guidelines;
+    const allRules = guidance.rules;
+    const colorGuidelines = allGuidelines.filter((g) => g.content.toLowerCase().includes('color') ||
+        g.content.toLowerCase().includes('hex') ||
+        g.title.toLowerCase().includes('color'));
+    const colorRules = allRules.filter((r) => r.description.toLowerCase().includes('color') ||
+        r.description.toLowerCase().includes('background-color') ||
+        r.description.toLowerCase().includes('border-color'));
+    if (colorGuidelines.length === 0 && colorRules.length === 0)
+        return [];
+    const questions = [];
+    if (allGuidelines.some((g) => g.content.toLowerCase().includes('exact hex') || g.content.toLowerCase().includes('hex code'))) {
+        questions.push({
+            id: generateId('color'),
+            question: 'What are the exact hex color values you want to use? (Please provide hex codes, e.g., #635BFF)',
+            category: 'colors',
+            required: true,
+        });
+    }
+    if (allGuidelines.some((g) => g.content.toLowerCase().includes('color type mapping') ||
+        g.content.toLowerCase().includes('color mapping') ||
+        g.content.toLowerCase().includes('primary vs secondary') ||
+        g.content.toLowerCase().includes('brand vs accent'))) {
+        questions.push({
+            id: generateId('color'),
+            question: 'How should these colors be mapped? (e.g., which color should be primary vs secondary, brand vs accent)',
+            category: 'colors',
+            required: true,
+        });
+    }
+    if (allGuidelines.some((g) => g.content.toLowerCase().includes('color combinations') || g.content.toLowerCase().includes('propose color'))) {
+        questions.push({
+            id: generateId('color'),
+            question: 'Which color should be used for primary actions vs secondary actions?',
+            category: 'colors',
+            required: false,
+        }, {
+            id: generateId('color'),
+            question: 'What should be the hover state colors?',
+            category: 'colors',
+            required: false,
+        });
+    }
+    if (content.toLowerCase().includes('dark') && content.toLowerCase().includes('light')) {
+        questions.push({
+            id: generateId('color'),
+            question: 'Do you want to support both light and dark themes? If yes, what colors should be used for each?',
+            category: 'colors',
+            required: false,
+        });
+    }
+    return questions;
+}
+function generateFontQuestions(guidance, generateId) {
+    const allGuidelines = guidance.guidelines;
+    const fontGuidelines = allGuidelines.filter((g) => g.content.toLowerCase().includes('font') ||
+        g.content.toLowerCase().includes('typography') ||
+        g.title.toLowerCase().includes('font'));
+    const fontRules = guidance.rules.filter((r) => r.description.toLowerCase().includes('font') ||
+        r.description.toLowerCase().includes('font-weight') ||
+        r.description.toLowerCase().includes('font-size'));
+    if (fontGuidelines.length === 0 && fontRules.length === 0)
+        return [];
+    const questions = [];
+    if (allGuidelines.some((g) => g.content.toLowerCase().includes('exact font') || g.content.toLowerCase().includes('font name'))) {
+        questions.push({
+            id: generateId('font'),
+            question: 'What is the exact font family name you want to use? (e.g., "sohne-var")',
+            category: 'typography',
+            required: true,
+        });
+    }
+    if (allGuidelines.some((g) => g.content.toLowerCase().includes('font availability') ||
+        g.content.toLowerCase().includes('custom font') ||
+        g.content.toLowerCase().includes('google fonts'))) {
+        questions.push({
+            id: generateId('font'),
+            question: 'Is this a custom font that needs to be loaded, or should I use a Google Fonts equivalent?',
+            category: 'typography',
+            required: true,
+        });
+    }
+    if (allGuidelines.some((g) => g.content.toLowerCase().includes('headings and body') ||
+        g.content.toLowerCase().includes('font apply') ||
+        g.content.toLowerCase().includes('font usage'))) {
+        questions.push({
+            id: generateId('font'),
+            question: 'Should this font apply to both headings and body text, or just one?',
+            category: 'typography',
+            required: false,
+        });
+    }
+    return questions;
+}
+function generateLayoutQuestions(guidance, content, generateId) {
+    const layoutGuidelines = guidance.guidelines.filter((g) => g.content.toLowerCase().includes('layout') ||
+        g.content.toLowerCase().includes('positioning') ||
+        g.title.toLowerCase().includes('layout'));
+    if (layoutGuidelines.length === 0)
+        return [];
+    const allowsLayout = content.toLowerCase().includes('layout changes') && content.toLowerCase().includes('explicitly requested');
+    if (!allowsLayout)
+        return [];
+    return [
+        {
+            id: generateId('general'),
+            question: 'Do you need any layout changes, or only visual styling (colors, fonts, etc.)?',
+            category: 'general',
+            required: false,
+        },
+    ];
+}
+function generateQuestionsFromGuidelines(guidance, content) {
+    let counter = 0;
+    const generateId = (cat) => `${cat}-${++counter}`;
+    return [
+        ...generateColorQuestions(guidance, content, generateId),
+        ...generateFontQuestions(guidance, generateId),
+        ...generateLayoutQuestions(guidance, content, generateId),
+    ];
+}
+function extractQuestionLines(content) {
+    const lines = content.split('\n').filter((line) => {
+        const t = line.trim();
+        return t.endsWith('?') && t.length > 10;
+    });
+    return lines
+        .map((line) => line
+        .replace(/^[-*•]\s*/, '')
+        .replace(/^\d+\.\s*/, '')
+        .trim())
+        .filter((c) => c.length > 10 && c.endsWith('?'));
+}
+function mergeQuestionsIntoGuidance(guidance, content, generated, extracted) {
+    const colorQs = extracted.filter((q) => q.toLowerCase().includes('color') ||
+        q.toLowerCase().includes('primary') ||
+        q.toLowerCase().includes('accent') ||
+        q.toLowerCase().includes('brand') ||
+        q.toLowerCase().includes('theme'));
+    const fontQs = extracted.filter((q) => q.toLowerCase().includes('font') || q.toLowerCase().includes('typography'));
+    const generalQs = extracted.filter((q) => !q.toLowerCase().includes('color') &&
+        !q.toLowerCase().includes('primary') &&
+        !q.toLowerCase().includes('accent') &&
+        !q.toLowerCase().includes('brand') &&
+        !q.toLowerCase().includes('theme') &&
+        !q.toLowerCase().includes('font') &&
+        !q.toLowerCase().includes('typography'));
+    let counter = generated.length;
+    const genId = (cat) => `${cat}-${++counter}`;
+    guidance.questions.push(...generated);
+    for (const [i, q] of colorQs.entries()) {
+        guidance.questions.push({
+            id: genId('color'),
+            question: q,
+            category: 'colors',
+            required: i === 0 && generated.filter((x) => x.category === 'colors').length === 0,
+        });
+    }
+    for (const [i, q] of fontQs.entries()) {
+        guidance.questions.push({
+            id: genId('font'),
+            question: q,
+            category: 'typography',
+            required: i === 0 && generated.filter((x) => x.category === 'typography').length === 0,
+        });
+    }
+    for (const q of generalQs) {
+        guidance.questions.push({ id: genId('general'), question: q, category: 'general', required: false });
+    }
+    if (guidance.questions.length === 0) {
+        const lower = content.toLowerCase();
+        if (lower.includes('color')) {
+            guidance.questions.push({
+                id: 'color-primary',
+                question: 'What colors should be used for theming? (Please provide hex codes)',
+                category: 'colors',
+                required: true,
+            });
+        }
+        if (lower.includes('font') || lower.includes('typography')) {
+            guidance.questions.push({
+                id: 'font-family',
+                question: 'What font family should be used? (Please provide exact font name)',
+                category: 'typography',
+                required: true,
+            });
+        }
+    }
+}
+/**
+ * Parses an .md/.mdc file and extracts theming questions and guidelines
+ */
+function parseThemingMDC(content, filePath) {
+    const guidance = {
+        questions: [],
+        guidelines: [],
+        rules: [],
+        metadata: {
+            filePath,
+            fileName: basename(filePath),
+            loadedAt: new Date(),
+        },
+    };
+    const workflow = parseWorkflowSection(content);
+    if (workflow)
+        guidance.workflow = workflow;
+    const validation = parseValidationSection(content);
+    if (validation)
+        guidance.validation = validation;
+    const criticalSections = content.match(/##\s*⚠️\s*CRITICAL[^#]*/gi) || [];
+    const specificationSections = content.match(/##\s*📋[^#]*/gi) || [];
+    for (const section of criticalSections) {
+        const titleMatch = section.match(/##\s*⚠️\s*CRITICAL:\s*(.+?)\n/);
+        const title = titleMatch ? titleMatch[1].trim() : 'Critical Rule';
+        guidance.guidelines.push({
+            category: 'critical',
+            title,
+            content: section.replace(/##\s*⚠️\s*CRITICAL[^\n]*\n/, '').trim(),
+            critical: true,
+        });
+    }
+    for (const section of specificationSections) {
+        const titleMatch = section.match(/##\s*📋\s*(.+?)\n/);
+        const title = titleMatch ? titleMatch[1].trim() : 'Specification Rule';
+        guidance.guidelines.push({
+            category: 'specification',
+            title,
+            content: section.replace(/##\s*📋[^\n]*\n/, '').trim(),
+            critical: false,
+        });
+    }
+    const doRules = extractRuleItems(content, /###\s*What\s+TO\s+Change:([^#]*)/gi, 'do');
+    const dontRules = extractRuleItems(content, /###\s*What\s+NOT\s+to\s+Change:([^#]*)/gi, 'dont');
+    guidance.rules.push(...doRules, ...dontRules);
+    const generatedQuestions = generateQuestionsFromGuidelines(guidance, content);
+    const extractedQuestions = extractQuestionLines(content);
+    mergeQuestionsIntoGuidance(guidance, content, generatedQuestions, extractedQuestions);
+    return guidance;
+}
+class ThemingStore {
+    initializedForRoot = null;
+    store = new Map();
+    get(fileKey) {
+        return this.store.get(fileKey);
+    }
+    getKeys() {
+        return [...this.store.keys()];
+    }
+    has(fileKey) {
+        return this.store.has(fileKey);
+    }
+    /**
+     * Initialize store with default files from content/site-theming.
+     * Uses workspaceRoot for THEMING_FILES env paths (relative to project).
+     * Skips re-loading when already initialized for the same root.
+     */
+    initialize(workspaceRoot, options) {
+        const root = workspaceRoot ?? process.cwd();
+        if (this.initializedForRoot === root) {
+            return;
+        }
+        if (this.initializedForRoot !== null) {
+            this.store.clear();
+        }
+        this.initializedForRoot = root;
+        const contentDir = options?.contentDirOverride ?? SITE_THEMING_CONTENT_DIR;
+        const defaultFileKeys = ['theming-questions', 'theming-validation', 'theming-accessibility'];
+        const extensions = ['.md', '.mdc'];
+        for (const key of defaultFileKeys) {
+            let filePath = null;
+            for (const ext of extensions) {
+                const candidate = join(contentDir, `${key}${ext}`);
+                if (existsSync(candidate)) {
+                    filePath = candidate;
+                    break;
+                }
+            }
+            if (filePath) {
+                try {
+                    this.loadFile(key, filePath);
+                }
+                catch (error) {
+                    const errorMessage = error instanceof Error ? error.message : String(error);
+                    logger.warn(`Could not load theming file ${filePath}: ${errorMessage}`);
+                }
+            }
+        }
+        const themingFilesEnv = process.env.THEMING_FILES;
+        if (themingFilesEnv) {
+            try {
+                this.loadThemingFilesFromEnv(themingFilesEnv, root);
+            }
+            catch (error) {
+                const errorMessage = error instanceof Error ? error.message : String(error);
+                logger.warn(`Could not parse THEMING_FILES environment variable: ${errorMessage}`);
+            }
+        }
+    }
+    loadFile(fileKey, filePath) {
+        try {
+            if (!existsSync(filePath)) {
+                throw new Error(`File not found: ${filePath}`);
+            }
+            const content = readFileSync(filePath, 'utf8');
+            const guidance = parseThemingMDC(content, filePath);
+            this.store.set(fileKey, guidance);
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : String(error);
+            throw new Error(`Failed to load theming file ${filePath}: ${errorMessage}`);
+        }
+    }
+    loadThemingFilesFromEnv(envValue, root) {
+        const files = JSON.parse(envValue);
+        for (const { key, path: filePath } of files) {
+            const fullPath = filePath.startsWith('/') ? filePath : join(root, filePath);
+            this.tryLoadEnvFile(key, fullPath);
+        }
+    }
+    tryLoadEnvFile(key, fullPath) {
+        if (!existsSync(fullPath)) {
+            logger.warn(`Theming file not found: ${fullPath} (key: ${key})`);
+            return;
+        }
+        try {
+            this.loadFile(key, fullPath);
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : String(error);
+            logger.warn(`Could not load theming file ${fullPath} (key: ${key}): ${errorMessage}`);
+        }
+    }
+}
+export const siteThemingStore = new ThemingStore();
+//# sourceMappingURL=theming-store.js.map

package/dist/tools/storefrontnext/site-theming/types.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Shared types for the site theming tool.
+ *
+ * @module tools/storefrontnext/site-theming/types
+ */
+/** Mapping of semantic color roles (e.g. lightText, buttonBackground) to hex values */
+export type ColorMapping = Record<string, string>;
+/** User-provided color with optional type label */
+export interface ColorEntry {
+    hex?: string;
+    type?: string;
+}
+/** User-provided font with optional type label */
+export interface FontEntry {
+    name?: string;
+    type?: string;
+}
+/** Collected answers from the theming conversation */
+export interface CollectedAnswers {
+    colors?: ColorEntry[];
+    fonts?: FontEntry[];
+    colorMapping?: ColorMapping;
+    [questionId: string]: unknown;
+}
+/** Conversation context passed to the theming tool */
+export interface ConversationContext {
+    currentStep?: string;
+    collectedAnswers?: CollectedAnswers;
+    questionsAsked?: string[];
+}
+/** Input schema for the site theming tool */
+export interface SiteThemingInput {
+    fileKeys?: string[];
+    conversationContext?: ConversationContext;
+}

package/dist/tools/storefrontnext/site-theming/types.js

@@ -0,0 +1,7 @@
+/*
+ * 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
+ */
+export {};
+//# sourceMappingURL=types.js.map

package/oclif.manifest.json

@@ -387,5 +387,5 @@
       "enableJsonFlag": false
     }
   },
-  "version": "0.4.3"
+  "version": "0.4.5"
 }

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@salesforce/b2c-dx-mcp",
   "description": "MCP server for B2C Commerce developer experience tools",
-  "version": "0.4.3",
+  "version": "0.4.5",
   "author": "Salesforce",
-  "license": "MIT",
+  "license": "Apache-2.0",
   "repository": "SalesforceCommerceCloud/b2c-developer-tooling",
   "keywords": [
     "salesforce",
@@ -78,8 +78,9 @@
     "glob": "13.0.0",
     "ts-morph": "^27.0.0",
     "yaml": "2.8.1",
+    "postcss": "8.5.6",
     "zod": "3.25.76",
-    "@salesforce/b2c-tooling-sdk": "0.5.3"
+    "@salesforce/b2c-tooling-sdk": "0.5.4"
   },
   "devDependencies": {
     "@eslint/compat": "^1",
@@ -122,9 +123,11 @@
     "inspect": "mcp-inspector node bin/run.js --toolsets all --allow-non-ga-tools",
     "inspect:dev": "mcp-inspector node --conditions development bin/dev.js --toolsets all --allow-non-ga-tools",
     "pretest": "tsc --noEmit -p test",
-    "test": "c8 mocha --forbid-only \"test/**/*.test.ts\"",
-    "test:ci": "c8 mocha --forbid-only --reporter json --reporter-option output=test-results.json \"test/**/*.test.ts\"",
-    "test:agent": "mocha --forbid-only --reporter min \"test/**/*.test.ts\"",
+    "test": "c8 mocha --forbid-only --ignore 'test/e2e/**' \"test/**/*.test.ts\"",
+    "test:ci": "c8 mocha --forbid-only --reporter json --reporter-option output=test-results.json --ignore 'test/e2e/**' \"test/**/*.test.ts\"",
+    "test:agent": "mocha --forbid-only --reporter min --ignore 'test/e2e/**' \"test/**/*.test.ts\"",
+    "test:e2e": "mocha --forbid-only \"test/e2e/**/*.test.ts\"",
+    "test:e2e:ci": "mocha --forbid-only --reporter json --reporter-option output=test-results-e2e.json \"test/e2e/**/*.test.ts\"",
     "coverage": "c8 report",
     "posttest": "pnpm run lint"
   }