@salesforce/b2c-dx-mcp 0.4.4 → 0.4.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (80) hide show
  1. package/README.md +82 -370
  2. package/content/pwav3/components.md +400 -0
  3. package/content/pwav3/config.md +124 -0
  4. package/content/pwav3/data-fetching.md +213 -0
  5. package/content/pwav3/extensibility.md +167 -0
  6. package/content/pwav3/i18n.md +214 -0
  7. package/content/pwav3/quick-reference.md +169 -0
  8. package/content/pwav3/routing.md +107 -0
  9. package/content/pwav3/state-management.md +193 -0
  10. package/content/pwav3/styling.md +248 -0
  11. package/content/pwav3/testing.md +124 -0
  12. package/content/site-theming/theming-accessibility.md +126 -0
  13. package/content/site-theming/theming-questions.md +208 -0
  14. package/content/site-theming/theming-validation.md +174 -0
  15. package/dist/registry.js +1 -1
  16. package/dist/services.d.ts +10 -10
  17. package/dist/services.js +19 -12
  18. package/dist/tools/cartridges/index.js +1 -6
  19. package/dist/tools/index.d.ts +1 -4
  20. package/dist/tools/index.js +1 -4
  21. package/dist/tools/mrt/index.js +1 -6
  22. package/dist/tools/pwav3/index.d.ts +12 -3
  23. package/dist/tools/pwav3/index.js +5 -63
  24. package/dist/tools/pwav3/pwa-kit-development-guidelines.d.ts +9 -0
  25. package/dist/tools/pwav3/pwa-kit-development-guidelines.js +151 -0
  26. package/dist/tools/scapi/index.d.ts +1 -1
  27. package/dist/tools/scapi/index.js +6 -1
  28. package/dist/tools/scapi/scapi-custom-api-scaffold.d.ts +60 -0
  29. package/dist/tools/scapi/scapi-custom-api-scaffold.js +175 -0
  30. package/dist/tools/storefrontnext/figma/figma-to-component/figma-url-parser.d.ts +24 -0
  31. package/dist/tools/storefrontnext/figma/figma-to-component/figma-url-parser.js +53 -0
  32. package/dist/tools/storefrontnext/figma/figma-to-component/index.d.ts +42 -0
  33. package/dist/tools/storefrontnext/figma/figma-to-component/index.js +325 -0
  34. package/dist/tools/storefrontnext/figma/generate-component/decision.d.ts +40 -0
  35. package/dist/tools/storefrontnext/figma/generate-component/decision.js +312 -0
  36. package/dist/tools/storefrontnext/figma/generate-component/formatter.d.ts +9 -0
  37. package/dist/tools/storefrontnext/figma/generate-component/formatter.js +92 -0
  38. package/dist/tools/storefrontnext/figma/generate-component/index.d.ts +114 -0
  39. package/dist/tools/storefrontnext/figma/generate-component/index.js +98 -0
  40. package/dist/tools/storefrontnext/figma/map-tokens/css-parser.d.ts +71 -0
  41. package/dist/tools/storefrontnext/figma/map-tokens/css-parser.js +260 -0
  42. package/dist/tools/storefrontnext/figma/map-tokens/index.d.ts +61 -0
  43. package/dist/tools/storefrontnext/figma/map-tokens/index.js +234 -0
  44. package/dist/tools/storefrontnext/figma/map-tokens/token-matcher.d.ts +65 -0
  45. package/dist/tools/storefrontnext/figma/map-tokens/token-matcher.js +268 -0
  46. package/dist/tools/storefrontnext/index.d.ts +17 -0
  47. package/dist/tools/storefrontnext/index.js +10 -60
  48. package/dist/tools/storefrontnext/page-designer-decorator/analyzer.js +15 -0
  49. package/dist/tools/storefrontnext/page-designer-decorator/index.js +3 -3
  50. package/dist/tools/storefrontnext/{developer-guidelines.js → sfnext-development-guidelines.js} +3 -3
  51. package/dist/tools/storefrontnext/site-theming/color-contrast.d.ts +92 -0
  52. package/dist/tools/storefrontnext/site-theming/color-contrast.js +186 -0
  53. package/dist/tools/storefrontnext/site-theming/color-mapping.d.ts +16 -0
  54. package/dist/tools/storefrontnext/site-theming/color-mapping.js +131 -0
  55. package/dist/tools/storefrontnext/site-theming/guidance-merger.d.ts +11 -0
  56. package/dist/tools/storefrontnext/site-theming/guidance-merger.js +78 -0
  57. package/dist/tools/storefrontnext/site-theming/index.d.ts +14 -0
  58. package/dist/tools/storefrontnext/site-theming/index.js +122 -0
  59. package/dist/tools/storefrontnext/site-theming/response-builder.d.ts +16 -0
  60. package/dist/tools/storefrontnext/site-theming/response-builder.js +316 -0
  61. package/dist/tools/storefrontnext/site-theming/theming-store.d.ts +62 -0
  62. package/dist/tools/storefrontnext/site-theming/theming-store.js +410 -0
  63. package/dist/tools/storefrontnext/site-theming/types.d.ts +35 -0
  64. package/dist/tools/storefrontnext/site-theming/types.js +7 -0
  65. package/oclif.manifest.json +1 -1
  66. package/package.json +8 -5
  67. /package/content/{auth.md → sfnext/auth.md} +0 -0
  68. /package/content/{components.md → sfnext/components.md} +0 -0
  69. /package/content/{config.md → sfnext/config.md} +0 -0
  70. /package/content/{data-fetching.md → sfnext/data-fetching.md} +0 -0
  71. /package/content/{extensions.md → sfnext/extensions.md} +0 -0
  72. /package/content/{i18n.md → sfnext/i18n.md} +0 -0
  73. /package/content/{page-designer.md → sfnext/page-designer.md} +0 -0
  74. /package/content/{performance.md → sfnext/performance.md} +0 -0
  75. /package/content/{pitfalls.md → sfnext/pitfalls.md} +0 -0
  76. /package/content/{quick-reference.md → sfnext/quick-reference.md} +0 -0
  77. /package/content/{state-management.md → sfnext/state-management.md} +0 -0
  78. /package/content/{styling.md → sfnext/styling.md} +0 -0
  79. /package/content/{testing.md → sfnext/testing.md} +0 -0
  80. /package/dist/tools/storefrontnext/{developer-guidelines.d.ts → sfnext-development-guidelines.d.ts} +0 -0
@@ -0,0 +1,124 @@
1
+ # Testing
2
+
3
+ ## Overview
4
+
5
+ PWA Kit applications use Jest and React Testing Library for testing. Tests are co-located with source files using the `.test.js` or `.test.jsx` suffix.
6
+
7
+ ## Testing Stack
8
+
9
+ - **Jest** - Test runner and assertion library
10
+ - **React Testing Library** - Component testing utilities
11
+ - **@testing-library/user-event** - User interaction simulation
12
+ - **MSW (Mock Service Worker)** - API mocking at network layer
13
+ - **jest-fetch-mock** - Fetch API mocking
14
+
15
+ ## Test File Organization
16
+
17
+ Co-locate test files with source code:
18
+
19
+ ```
20
+ app/components/product-tile/
21
+ ├── index.jsx
22
+ └── product-tile.test.jsx
23
+
24
+ app/hooks/
25
+ ├── use-current-basket.js
26
+ └── use-current-basket.test.js
27
+ ```
28
+
29
+ ## Jest Configuration
30
+
31
+ **Reference:** The template uses `@salesforce/pwa-kit-dev/configs/jest`. Extend it and set `moduleNameMapper` for `@salesforce/retail-react-app` if needed.
32
+
33
+ ## Component Testing
34
+
35
+ Use `render`/`screen` from React Testing Library, `userEvent` for interactions. See `app/components/product-tile/index.test.jsx` and other `*.test.js` files in the template for patterns.
36
+
37
+ ### Test Utilities
38
+
39
+ Use `renderWithProviders` from `app/utils/test-utils` for components that need Commerce API, routing, Chakra UI, and React Query. See template tests (e.g. `app/pages/product-detail/index.test.js`) for examples.
40
+
41
+ ## Mocking Commerce SDK Hooks
42
+
43
+ ```jsx
44
+ import {useProduct} from '@salesforce/commerce-sdk-react';
45
+
46
+ jest.mock('@salesforce/commerce-sdk-react', () => ({
47
+ ...jest.requireActual('@salesforce/commerce-sdk-react'),
48
+ useProduct: jest.fn()
49
+ }));
50
+
51
+ test('displays product when loaded', () => {
52
+ useProduct.mockReturnValue({
53
+ data: {id: 'test-123', name: 'Test Product'},
54
+ isLoading: false,
55
+ error: null
56
+ });
57
+
58
+ render(<ProductDetail productId="test-123" />);
59
+ expect(screen.getByText('Test Product')).toBeInTheDocument();
60
+ });
61
+ ```
62
+
63
+ ## MSW for API Mocking
64
+
65
+ ```javascript
66
+ // mocks/handlers.js
67
+ import {rest} from 'msw';
68
+
69
+ export const handlers = [
70
+ rest.get('*/products/:productId', (req, res, ctx) => {
71
+ return res(ctx.json({
72
+ id: req.params.productId,
73
+ name: 'Mock Product',
74
+ price: 29.99
75
+ }));
76
+ })
77
+ ];
78
+ ```
79
+
80
+ ## Testing User Interactions
81
+
82
+ ```jsx
83
+ import userEvent from '@testing-library/user-event';
84
+
85
+ test('adds item to cart when button is clicked', async () => {
86
+ const user = userEvent.setup();
87
+ render(<ProductDetail productId="test-123" />);
88
+
89
+ const addButton = screen.getByRole('button', {name: /add to cart/i});
90
+ await user.click(addButton);
91
+
92
+ await waitFor(() => {
93
+ expect(screen.getByText(/added to cart/i)).toBeInTheDocument();
94
+ });
95
+ });
96
+ ```
97
+
98
+ ## Running Tests
99
+
100
+ ```bash
101
+ # Run all tests
102
+ npm test
103
+
104
+ # Run in watch mode
105
+ npm test -- --watch
106
+
107
+ # Run with coverage
108
+ npm test -- --coverage
109
+
110
+ # Run specific test
111
+ npm test -- product-tile.test.jsx
112
+ ```
113
+
114
+ ## Best Practices
115
+
116
+ 1. Test user behavior, not implementation
117
+ 2. Use semantic queries (getByRole, getByLabelText)
118
+ 3. Co-locate tests with source
119
+ 4. Mock external dependencies
120
+ 5. Write descriptive test names
121
+ 6. Avoid testing library internals
122
+ 7. Use MSW for API mocking
123
+ 8. Keep tests simple and focused
124
+ 9. Maintain high coverage (70%+)
@@ -0,0 +1,126 @@
1
+ ---
2
+ description: Accessibility guidelines and WCAG compliance rules for theming
3
+ alwaysApply: false
4
+ ---
5
+ # Accessibility Guidelines for Theming
6
+
7
+ ## 🎯 Accessibility Requirements
8
+
9
+ **All theming implementations MUST comply with WCAG 2.1 Level AA standards at minimum.**
10
+
11
+ ### Color Contrast Requirements
12
+
13
+ **WCAG 2.1 Contrast Ratios:**
14
+ - **Normal text (16px and below)**: Minimum 4.5:1 contrast ratio
15
+ - **Large text (18pt+ or 14pt+ bold)**: Minimum 3:1 contrast ratio
16
+ - **AAA compliance (recommended)**: 7:1 for normal text, 4.5:1 for large text
17
+
18
+ **Critical Color Combinations to Validate:**
19
+ 1. Primary text on primary background
20
+ 2. Secondary text on secondary background
21
+ 3. Button text on button background
22
+ 4. Link text on page background
23
+ 5. Accent colors on all background variations
24
+ 6. Muted text on muted backgrounds
25
+ 7. Border colors against adjacent backgrounds
26
+
27
+ ### Visual Hierarchy and Readability
28
+
29
+ **Text Readability:**
30
+ - Ensure sufficient contrast for all text sizes
31
+ - Avoid using similar brightness levels for text and background
32
+ - Test color combinations in both light and dark themes
33
+ - Consider users with color vision deficiencies
34
+
35
+ **Interactive Elements:**
36
+ - Buttons must have clear visual distinction from backgrounds
37
+ - Hover states must maintain or improve contrast
38
+ - Focus indicators must be clearly visible (minimum 3:1 contrast)
39
+ - Disabled states should still be readable (minimum 3:1 contrast)
40
+
41
+ ### Font Accessibility
42
+
43
+ **Font Readability Requirements:**
44
+ - Body text should use fonts optimized for screen reading
45
+ - Minimum font size: 16px for body text (recommended)
46
+ - Line height: Minimum 1.5 for body text
47
+ - Letter spacing: Ensure adequate spacing for readability
48
+ - Font weights: Ensure sufficient contrast between weights
49
+
50
+ **Font Loading Performance:**
51
+ - Web fonts should not block rendering
52
+ - Provide appropriate fallback fonts
53
+ - Consider font-display: swap for better performance
54
+ - Test font loading on slow connections
55
+
56
+ ### Color Vision Deficiency Considerations
57
+
58
+ **Design for Color Blindness:**
59
+ - Don't rely solely on color to convey information
60
+ - Use patterns, icons, or text labels in addition to color
61
+ - Test color combinations with color blindness simulators
62
+ - Ensure sufficient contrast even when colors are desaturated
63
+
64
+ **Common Color Blindness Types:**
65
+ - Protanopia (red-blind)
66
+ - Deuteranopia (green-blind)
67
+ - Tritanopia (blue-blind)
68
+ - Monochromacy (total color blindness)
69
+
70
+ ### Focus and Keyboard Navigation
71
+
72
+ **Focus Indicators:**
73
+ - All interactive elements must have visible focus indicators
74
+ - Focus indicators must have minimum 3:1 contrast ratio
75
+ - Focus indicators should be at least 2px thick
76
+ - Use outline or border to indicate focus state
77
+
78
+ **Keyboard Accessibility:**
79
+ - All interactive elements must be keyboard accessible
80
+ - Tab order should be logical and intuitive
81
+ - Skip links should be provided for long pages
82
+ - Focus trap should be implemented in modals
83
+
84
+ ### Screen Reader Considerations
85
+
86
+ **Semantic HTML:**
87
+ - Use proper heading hierarchy (h1-h6)
88
+ - Use semantic HTML elements (nav, main, article, etc.)
89
+ - Provide alt text for images
90
+ - Use ARIA labels when necessary
91
+
92
+ **Color and Screen Readers:**
93
+ - Screen readers don't convey color information
94
+ - Ensure information is accessible without color
95
+ - Use text labels, icons, or patterns in addition to color
96
+
97
+ ### Testing and Validation
98
+
99
+ **Required Testing:**
100
+ 1. Automated contrast checking (WCAG AA/AAA)
101
+ 2. Manual visual inspection
102
+ 3. Color blindness simulator testing
103
+ 4. Screen reader testing
104
+ 5. Keyboard navigation testing
105
+
106
+ **Tools for Validation:**
107
+ - Color contrast analyzers (WebAIM, WAVE)
108
+ - Color blindness simulators
109
+ - Screen reader testing (NVDA, JAWS, VoiceOver)
110
+ - Browser accessibility inspectors
111
+
112
+ ### Implementation Guidelines
113
+
114
+ **When Implementing Themes:**
115
+ 1. Always validate color contrast ratios before implementation
116
+ 2. Test with multiple color combinations
117
+ 3. Provide alternative color suggestions if contrast fails
118
+ 4. Document accessibility decisions
119
+ 5. Test with assistive technologies
120
+
121
+ **If Accessibility Issues Are Found:**
122
+ - Present findings clearly to the user
123
+ - Provide specific contrast ratios and WCAG compliance status
124
+ - Suggest concrete alternatives with improved contrast
125
+ - Explain the accessibility impact
126
+ - Wait for user confirmation before proceeding
@@ -0,0 +1,208 @@
1
+ ---
2
+ description: Theming questions and information gathering guidelines
3
+ alwaysApply: false
4
+ ---
5
+ # Theming Questions and Information Gathering
6
+
7
+ ## ⚠️ CRITICAL: Layout Preservation Rules
8
+
9
+ **NEVER modify positioning, layout, or structural CSS properties when applying theming changes. Only change colors, typography, and visual styling.**
10
+
11
+ ### What NOT to Change:
12
+ - `position` properties (fixed, absolute, relative)
13
+ - `top`, `left`, `right`, `bottom` positioning
14
+ - `margin` and `padding` values
15
+ - `width`, `height`, `min-height`, `max-height`
16
+ - `display` properties (flex, grid, block)
17
+ - `z-index` values (unless specifically requested)
18
+ - `transform` properties
19
+ - Grid/flexbox layout properties
20
+
21
+ ### What TO Change:
22
+ - `color`, `background-color`, `border-color`
23
+ - `text-decoration`, `font-weight`, `font-size`
24
+ - `opacity`, `box-shadow`, `border-radius`
25
+ - CSS custom properties (CSS variables)
26
+ - Hover states and transitions
27
+ - Theme-specific styling
28
+
29
+ ### Example of CORRECT theming:
30
+ ```css
31
+ /* ✅ CORRECT - Only changing colors and visual styling */
32
+ .navigation-item {
33
+ color: var(--foreground);
34
+ background-color: var(--background);
35
+ border-color: var(--border);
36
+ transition: color 0.2s ease;
37
+ }
38
+
39
+ .navigation-item:hover {
40
+ color: var(--accent);
41
+ background-color: var(--accent/10);
42
+ }
43
+ ```
44
+
45
+ ### Example of INCORRECT theming:
46
+ ```css
47
+ /* ❌ INCORRECT - Changing layout/positioning */
48
+ .navigation-item {
49
+ margin-left: 20px; /* DON'T change margins */
50
+ position: relative; /* DON'T change positioning */
51
+ z-index: 100; /* DON'T change z-index */
52
+ width: 200px; /* DON'T change dimensions */
53
+ }
54
+ ```
55
+
56
+ ### When Layout Changes Are Needed:
57
+ If layout modifications are required, they should be:
58
+ 1. Explicitly requested by the user
59
+ 2. Clearly separated from theming changes
60
+ 3. Documented as layout fixes, not theming
61
+ 4. Tested thoroughly for responsive behavior
62
+
63
+ ## 📋 Specification Compliance Rules
64
+
65
+ **ALWAYS follow user specifications exactly. Never make assumptions or interpretations.**
66
+
67
+ ### ⚠️ **CRITICAL: WAIT FOR USER RESPONSE RULE**
68
+
69
+ **NEVER implement changes after asking clarifying questions without waiting for the user's response.**
70
+
71
+ **Required Process:**
72
+ 1. Ask clarifying questions
73
+ 2. **WAIT for user response** ⚠️ **CRITICAL STEP**
74
+ 3. Only implement after receiving explicit guidance
75
+ 4. Never proceed with assumptions
76
+
77
+ **Violations:**
78
+ - ❌ Ask questions then immediately implement
79
+ - ❌ Make assumptions about color/font mapping
80
+ - ❌ Proceed without explicit user guidance
81
+ - ❌ Implement "best guess" solutions
82
+
83
+ ### ✅ **Color Specification Rules:**
84
+ 1. **Use exact hex values** provided by the user
85
+ 2. **Ask for clarification** on color type mapping (e.g., "brand" vs "accent")
86
+ 3. **Propose color combinations** before implementing:
87
+ - Which color should be primary vs secondary?
88
+ - How should "brand" colors be used vs "accent" colors?
89
+ - Should "dark" colors be used for text or backgrounds?
90
+ - What should be the hover state colors?
91
+ 4. **Never assume** color usage without explicit user guidance
92
+
93
+ ### ✅ **Font Specification Rules:**
94
+ 1. **Use exact font names** as provided by the user
95
+ 2. **Ask for clarification** if font names are unclear or unfamiliar
96
+ 3. **Verify font availability** before implementing
97
+ 4. **Never substitute** similar fonts without user permission
98
+
99
+ ### ✅ **General Specification Rules:**
100
+ 1. **Follow exact specifications** without interpretation
101
+ 2. **Ask clarifying questions** when specifications are ambiguous
102
+ 3. **Propose implementation approaches** before making changes
103
+ 4. **Confirm understanding** of requirements before proceeding
104
+
105
+ ### Example of CORRECT specification handling:
106
+ ```
107
+ User: "Use these colors: #635BFF (accent), #0A2540 (dark), #F6F9FC (brand), #FFFFFF (light)"
108
+
109
+ AI Response: "I see you've provided 4 colors. Before implementing, I'd like to clarify:
110
+ - Should #635BFF be used for primary actions and hover states?
111
+ - Should #0A2540 be used for text color or background?
112
+ - Should #F6F9FC be used for secondary elements or primary branding?
113
+ - What should be the light theme vs dark theme color mapping?"
114
+
115
+ [WAITS for user response before implementing]
116
+ ```
117
+
118
+ ### Example of INCORRECT specification handling:
119
+ ```
120
+ ❌ DON'T: Assume "sohne-var" means "Sohne" font
121
+ ❌ DON'T: Guess color usage without asking
122
+ ❌ DON'T: Make assumptions about font weights or styles
123
+ ❌ DON'T: Implement without confirming understanding
124
+ ❌ DON'T: Ask clarifying questions then immediately implement
125
+ ```
126
+
127
+ ## 🔄 WORKFLOW - PHASE 1: INFORMATION GATHERING
128
+
129
+ **YOU MUST FOLLOW THIS WORKFLOW - NO EXCEPTIONS:**
130
+
131
+ 1. **DO NOT implement any changes yet**
132
+ 2. **Ask the questions below ONE AT A TIME**
133
+ 3. **WAIT for the user's response** before asking the next question
134
+ 4. **Only proceed after ALL required questions are answered**
135
+ 5. **Even if the user provided colors/fonts upfront, you MUST still ask ALL these clarifying questions**
136
+ - Colors provided? Still ask about color mapping, usage, hover states, etc.
137
+ - Fonts provided? Still ask about font usage, availability, headings vs body, etc.
138
+ 6. **You MUST ask questions from ALL categories (colors, fonts, general) - do not skip any**
139
+
140
+ **VIOLATION OF THIS WORKFLOW IS A CRITICAL ERROR.**
141
+
142
+ ### 📝 EXTRACTION
143
+
144
+ **BEFORE generating questions, you MUST extract and provide the theming information from the user's input.**
145
+
146
+ 1. **Review the user's input** carefully for any theming information:
147
+ - Colors (hex values like "#635BFF", color types like "accent", "primary", "dark", "light")
148
+ - Fonts (font names like "Sohne Var", font types like "title", "body", "heading")
149
+ - Any other theming preferences (spacing, sizes, etc.)
150
+
151
+ 2. **Extract and structure the information** in the following format:
152
+ - Colors: Array of objects with `hex` (string) and `type` (string, optional) properties
153
+ - Fonts: Array of objects with `name` (string) and `type` (string, optional) properties
154
+ - Other info: Key-value pairs as needed
155
+
156
+ 3. **Call this tool again** with the extracted information in `conversationContext.collectedAnswers`:
157
+ ```
158
+ {
159
+ conversationContext: {
160
+ collectedAnswers: {
161
+ colors: [{ hex: "#635BFF", type: "accent" }, { hex: "#0A2540", type: "dark" }, ...],
162
+ fonts: [{ name: "Sohne Var", type: "title" }, ...],
163
+ // ... other info
164
+ }
165
+ }
166
+ }
167
+ ```
168
+
169
+ 4. **Only after providing this information** will the tool generate the appropriate questions.
170
+
171
+ **IMPORTANT:**
172
+ - If the user did NOT mention colors or fonts, you can still call the tool with empty arrays or skip this step
173
+ - But if the user DID mention colors/fonts, you MUST extract them before proceeding
174
+ - **DO NOT proceed with questions until you have extracted and provided the theming information.**
175
+
176
+ ### 🔄 UPDATING INFORMATION (MANDATORY)
177
+
178
+ **⚠️ CRITICAL: Whenever the user provides NEW or UPDATED theming information, you MUST call the tool again with the updated information.**
179
+
180
+ **This applies to:** New/updated colors, fonts, color mappings, or any theming preferences.
181
+
182
+ **Required Process:**
183
+ 1. Extract the new/updated information from the user's message
184
+ 2. Merge with ALL previously collected information (include everything, not just new data)
185
+ 3. Call the `site_theming` tool IMMEDIATELY with complete updated information
186
+ 4. If `colorMapping` is provided, validation will trigger automatically (see validation phase)
187
+
188
+ **Tool call structure:**
189
+ ```
190
+ {
191
+ conversationContext: {
192
+ currentStep: "updating-information" | "validation",
193
+ collectedAnswers: {
194
+ colors: [...all colors, including previous and new...],
195
+ fonts: [...all fonts, including previous and new...],
196
+ colorMapping: {...all mappings, including previous and updated...},
197
+ // ... all other collected information
198
+ },
199
+ questionsAsked: [...previous questions...]
200
+ }
201
+ }
202
+ ```
203
+
204
+ **⚠️ CRITICAL RULES:**
205
+ - Every update requires a new tool call (not optional)
206
+ - Include ALL previously collected information in each call
207
+ - If user provides `colorMapping`, it triggers automatic validation
208
+ - DO NOT implement without calling the tool with updated information first
@@ -0,0 +1,174 @@
1
+ ---
2
+ description: Theming validation rules and validation gate workflow
3
+ alwaysApply: false
4
+ ---
5
+ # Theming Validation Rules
6
+
7
+ ## 🔄 WORKFLOW - PHASE 2: VALIDATION GATE (MANDATORY - CANNOT SKIP)
8
+
9
+ **⚠️ CRITICAL: YOU CANNOT PROCEED TO IMPLEMENTATION WITHOUT COMPLETING THIS PHASE**
10
+
11
+ **STEP 7: CONSTRUCT COLOR MAPPING (MANDATORY IF COLORS PROVIDED)**
12
+ - **After collecting all user answers, you MUST construct a `colorMapping` object**
13
+ - **Map each color to its specific usage based on user answers:**
14
+ - Text colors (foreground on background)
15
+ - Button colors (button text on button background)
16
+ - Link colors (link text on page background)
17
+ - Accent colors (accent elements on various backgrounds)
18
+ - All other color combinations that will be used
19
+ - **This mapping is REQUIRED - you cannot skip this step**
20
+
21
+ **STEP 8: MANDATORY VALIDATION TOOL CALL**
22
+ - **YOU MUST call the `site_theming` tool AGAIN with `colorMapping` in `conversationContext.collectedAnswers`**
23
+ - **This is a SEPARATE tool call - do NOT implement after collecting answers**
24
+ - **This triggers automatic validation that you CANNOT skip**
25
+ - **See "HOW TO TRIGGER VALIDATION" section below for details**
26
+ - **⚠️ CRITICAL: If you skip this tool call and proceed to implementation, you are making a CRITICAL ERROR**
27
+
28
+ **STEP 9: PRESENT VALIDATION FINDINGS**
29
+ - **After the tool returns validation results, you MUST present ALL validation results to the user**
30
+ - **Show the complete validation output from the tool, including:**
31
+ - All contrast ratios for each color combination
32
+ - WCAG compliance status (AA/AAA/FAIL)
33
+ - Visual assessment (excellent/good/acceptable/poor)
34
+ - Any recommendations provided by the tool
35
+ - **If ANY issues found:**
36
+ - Show contrast ratios and WCAG compliance status
37
+ - Explain accessibility problems clearly
38
+ - Provide concrete alternative suggestions
39
+ - **WAIT for user confirmation before proceeding**
40
+ - **Even if all validations pass, you MUST still present the results to the user**
41
+
42
+ **STEP 10: USER CONFIRMATION**
43
+ - **You MUST wait for explicit user confirmation to proceed**
44
+ - **User must acknowledge validation findings (even if they choose to proceed with issues)**
45
+ - **Do NOT implement until user explicitly confirms they want to proceed**
46
+
47
+ ### PHASE 3: IMPLEMENTATION (ONLY AFTER PHASE 2 COMPLETE)
48
+
49
+ **STEP 11: Implementation**
50
+ - **ONLY after completing ALL steps above may you implement the theme**
51
+ - **Specifically, you MUST have:**
52
+ 1. Collected all user answers
53
+ 2. Constructed colorMapping object
54
+ 3. Called the tool with colorMapping (STEP 8)
55
+ 4. Received validation results from the tool
56
+ 5. Presented validation results to user (STEP 9)
57
+ 6. Received user confirmation (STEP 10)
58
+ - **If you implement before completing Phase 2, you are making a CRITICAL ERROR**
59
+ - **If you implement without calling the tool with colorMapping, you are making a CRITICAL ERROR**
60
+
61
+ **Where to apply theme changes:**
62
+ - **For StorefrontNext/Odyssey projects:** Apply theme changes to `app.css`
63
+ - Standalone project: `src/app.css`
64
+ - Monorepo: `packages/template-retail-rsc-app/src/app.css`
65
+ - Update CSS custom properties in the `:root` block (light theme) and `.dark` / `[data-theme='dark']` blocks (dark theme) as needed
66
+ - **If the project uses a different theme file structure** (e.g., multiple CSS files, custom theme location): Ask the user to specify the destination file before implementing
67
+
68
+ ### ✅ PRE-IMPLEMENTATION CHECKLIST (BLOCKING GATE)
69
+
70
+ **🛑 YOU CANNOT IMPLEMENT UNTIL ALL ITEMS BELOW ARE COMPLETE**
71
+
72
+ **This checklist is a MANDATORY BLOCKING GATE - you MUST verify each item before proceeding:**
73
+
74
+ - [ ] **Item 1:** All required questions answered
75
+ - [ ] **Item 2:** Constructed `colorMapping` object mapping all colors to their usage (text, buttons, links, accents, etc.)
76
+ - [ ] **Item 3:** Called `site_theming` tool AGAIN with `colorMapping` in `conversationContext.collectedAnswers` (this is a separate tool call, not the same call where you collected answers)
77
+ - [ ] **Item 4:** Received validation results from the tool (the tool automatically validates when colorMapping is provided)
78
+ - [ ] **Item 5:** Presented ALL validation findings to user (even if all pass) - show contrast ratios, WCAG status, visual assessment
79
+ - [ ] **Item 6:** If issues found, provided specific contrast ratios, WCAG status, and alternative suggestions
80
+ - [ ] **Item 7:** Received explicit user confirmation to proceed (user acknowledged findings)
81
+ - [ ] **Item 8:** Font validation completed (if fonts provided)
82
+ - [ ] **Item 9:** All validation concerns addressed or user explicitly chose to proceed despite issues
83
+
84
+ **ONLY when ALL items above are checked may you proceed to implementation.**
85
+
86
+ **⚠️ IF YOU IMPLEMENT WITHOUT COMPLETING THIS CHECKLIST, YOU ARE MAKING A CRITICAL ERROR.**
87
+
88
+ ## ✅ VALIDATION
89
+
90
+ **⚠️ MANDATORY: Input Validation** - BEFORE implementing, you MUST validate ALL user-provided inputs:
91
+
92
+ ### A. Color Combination Validation (MANDATORY if colors provided):
93
+
94
+ - Calculate contrast ratios for ALL color combinations (text on background, accent on backgrounds, etc.)
95
+ - Check WCAG AA/AAA compliance (4.5:1 for normal text, 3:1 for large text)
96
+ - Identify ANY accessibility issues or poor contrast combinations
97
+ - Visual/UX impact explanation - whether the combinations look good, are readable, and maintain visual hierarchy
98
+ - If issues are found, present them to the user with:
99
+ * Specific contrast ratios and WCAG compliance status
100
+ * Clear explanation of the accessibility problem
101
+ * Concrete alternative suggestions with improved contrast ratios
102
+
103
+ ### B. Font Validation (MANDATORY if fonts provided):
104
+
105
+ - Verify font availability and accessibility (can it be loaded? Is it a real font?)
106
+ - Check if font is available on Google Fonts, Adobe Fonts, or needs custom hosting
107
+ - Validate font weights availability (does the font support the weights needed?)
108
+ - Assess font readability/legibility (especially for body text)
109
+ - Check font loading performance implications (web fonts vs system fonts)
110
+ - Evaluate font pairing (if multiple fonts provided, do they work well together?)
111
+ - Verify fallback fonts are appropriate
112
+ - If issues are found, present them to the user with:
113
+ * Specific concerns (availability, readability, performance, etc.)
114
+ * Clear explanation of the problem
115
+ * Concrete alternative suggestions (e.g., Google Fonts equivalents, better pairings)
116
+ * Performance/UX impact explanation
117
+
118
+ ### C. General Input Validation:
119
+
120
+ - Validate any other user-provided inputs (spacing, sizes, etc.) if applicable
121
+ - Check for potential conflicts or issues
122
+
123
+ ### IMPORTANT:
124
+
125
+ - **Validation is MANDATORY even if inputs seem fine**
126
+ - **DO NOT skip validation or implement without validating ALL provided inputs**
127
+ - **Call the tool with `colorMapping` to trigger automatic validation (see "HOW TO TRIGGER VALIDATION" above)**
128
+ - **Always respect the user's final decision** - if they insist on their choices after your suggestions, use them as specified
129
+
130
+ ### 🚨 HOW TO TRIGGER VALIDATION:
131
+
132
+ **⚠️ CRITICAL: This is a SEPARATE tool call that you MUST make AFTER collecting all user answers OR when user provides/updates colorMapping.**
133
+
134
+ **Process:**
135
+ 1. Construct `colorMapping` object mapping colors to usage (text, buttons, links, accents, hover states, etc.)
136
+ 2. Call the `site_theming` tool with `colorMapping` (include ALL previously collected information):
137
+
138
+ ```javascript
139
+ {
140
+ conversationContext: {
141
+ currentStep: "validation",
142
+ collectedAnswers: {
143
+ colors: [...all colors...],
144
+ fonts: [...all fonts...],
145
+ colorMapping: {
146
+ textColor: "#635BFF",
147
+ background: "#FFFFFF",
148
+ buttonBackground: "#0A2540",
149
+ buttonText: "#FFFFFF",
150
+ linkColor: "#0A2540",
151
+ accent: "#0A2540",
152
+ // ... all combinations
153
+ },
154
+ // ... all other collected information
155
+ },
156
+ questionsAsked: [...]
157
+ }
158
+ }
159
+ ```
160
+
161
+ **The tool automatically:**
162
+ - Calculates contrast ratios for all color combinations
163
+ - Checks WCAG AA/AAA compliance
164
+ - Provides visual assessment
165
+ - Returns validation results
166
+
167
+ **You MUST then:**
168
+ - Present ALL validation results to the user
169
+ - Wait for user confirmation
170
+ - Only then proceed to implementation
171
+
172
+ **⚠️ IF YOU SKIP THIS TOOL CALL AND PROCEED TO IMPLEMENTATION, YOU ARE MAKING A CRITICAL ERROR.**
173
+
174
+ **Note:** If user provides updated colorMapping at any time, call the tool with updated information (see information gathering phase for update process). Validation will trigger automatically when colorMapping is provided.
package/dist/registry.js CHANGED
@@ -205,7 +205,7 @@ async function registerTools(tools, server, allowNonGaTools) {
205
205
  continue;
206
206
  }
207
207
  // Register the tool
208
- // TODO: Telemetry - Tool registration includes timing/error tracking
208
+ // Register the tool (invocations are tracked by B2CDxMcpServer)
209
209
  server.addTool(tool.name, tool.description, tool.inputSchema, async (args) => tool.handler(args));
210
210
  }
211
211
  }
@@ -184,16 +184,6 @@ export declare class Services {
184
184
  * @returns WebDAV client instance
185
185
  */
186
186
  getWebDavClient(): WebDavClient;
187
- /**
188
- * Get the project project directory.
189
- * Falls back to process.cwd() if not explicitly set.
190
- *
191
- * This is the directory where the project is located, which may differ from process.cwd()
192
- * when MCP clients spawn servers from a different location (e.g., home directory).
193
- *
194
- * @returns Project project directory path
195
- */
196
- getWorkingDirectory(): string;
197
187
  /**
198
188
  * Join path segments.
199
189
  *
@@ -223,6 +213,16 @@ export declare class Services {
223
213
  * @returns Absolute path
224
214
  */
225
215
  resolvePath(...segments: string[]): string;
216
+ /**
217
+ * Resolve a path relative to the project directory.
218
+ * If path is not supplied, returns the project directory.
219
+ * If path is absolute, returns it as-is.
220
+ * If path is relative, resolves it relative to the project directory.
221
+ *
222
+ * @param pathArg - Optional path to resolve
223
+ * @returns Resolved absolute path
224
+ */
225
+ resolveWithProjectDirectory(pathArg?: string): string;
226
226
  /**
227
227
  * Get file or directory stats.
228
228
  *