@progress/kendo-react-mcp 1.6.1-beta.8b4a77bb.0 → 1.6.2-beta.a42c596b.0

package/dist/index.js

@@ -492,6 +492,7 @@ function getAccessibilityGuidelines() {
 **1. Form Control Labels** (WCAG 1.3.1, 3.3.2, 4.1.2)
 Every input must have an associated label.
 CORRECT: \`<input type="search" aria-label="Search products" placeholder="Search...">\`
+CORRECT: \`<label for="qty">Quantity</label><input type="number" id="qty">\`
 WRONG: \`<span>Email</span><input type="email">\` (no association)
 WRONG: \`<input type="email" placeholder="Email">\` (placeholder as label)
 
@@ -523,20 +524,43 @@ WRONG: "Click here", "Read more", "Learn more" without context
 Errors must be identified, associated with inputs, and provide suggestions. Use aria-describedby, aria-invalid="true", and role="alert".
 
 **7. Heading Structure** (WCAG 1.3.1, 2.4.6)
-Each page should have an \`<h1>\` that describes its content. Use hierarchical, descriptive headings with no skipped levels (h1\u2192h2\u2192h3).
+Each page must have an \`<h1>\` that describes its content. Use hierarchical, descriptive headings with no skipped levels (h1\u2192h2\u2192h3).
 CORRECT: \`<h1>Dashboard</h1> <h2>Sales</h2> <h3>By Region</h3>\`
 WRONG: No \`<h1>\` on the page, or skipping levels (h1\u2192h3)
 If a heading should look smaller than its semantic level, use CSS: \`<h2 class="text-sm">Subtitle</h2>\`
 
 **8. Page Component Landmark Rules** (WCAG 1.3.1, 4.1.2)
 Page components (route components) may be rendered inside a layout that already provides \`<main>\`, \`<header>\`, or \`<footer>\`. Since the layout configuration is unknown, avoid using these landmarks in page components to prevent potential duplication and nesting violations. Use \`<div>\`, \`<section>\`, or \`<article>\` as the top-level wrapper instead.
+- Avoid adding \`<main>\`, \`role="main"\`, \`<header>\`, or \`<footer>\` in page components \u2014 the layout typically provides them. Duplicating them can cause \`landmark-no-duplicate-main\` and \`landmark-main-is-top-level\` violations.
+- Avoid adding \`role="banner"\` or using a semantic \`<header>\` element in page components \u2014 the layout's \`<header>\` already claims the banner landmark. Adding another causes \`landmark-banner-is-top-level\` violations.
+- Avoid adding \`role="contentinfo"\` to elements inside page components \u2014 the contentinfo landmark should be a top-level landmark, not nested inside \`<main>\` or other landmarks. Nesting it can cause \`landmark-contentinfo-is-top-level\` violations.
+- When multiple \`<section>\` or \`<nav>\` elements exist on a page, give each a unique \`aria-label\` to avoid \`landmark-unique\` violations.
+
+**9. ARIA Role and Attribute Restrictions** (WCAG 4.1.2)
+Only use ARIA roles that are valid for the given HTML element. Avoid adding \`aria-label\` or \`aria-labelledby\` to elements that do not permit naming.
+- \`<article>\` has an implicit \`article\` role. Do NOT override it with \`role="listitem"\`, \`role="button"\`, \`role="link"\`, or any other role \u2014 none are allowed on \`<article>\`. Use \`<li>\` for list items, \`<button>\` for interactive cards, or \`<a>\` for clickable cards instead.
+- \`<button>\` already has an implicit \`button\` role. Do NOT add \`role="listitem"\` or other incompatible roles.
+- \`<span>\` and \`<div>\` without roles are generic elements. Do NOT add \`aria-label\` to them \u2014 it is a prohibited attribute on elements with no accessible role and can cause \`aria-prohibited-attr\` violations. Instead, use \`role="img"\` + \`aria-label\` for visual indicators, or use visually hidden text.
+- Do NOT add \`aria-label\` to non-interactive \`<div>\` wrappers \u2014 it has no effect and triggers violations.
+- \`aria-pressed\` is only valid on elements with \`role="button"\`, \`role="checkbox"\`, \`role="menuitemcheckbox"\`, \`role="option"\`, \`role="radio"\`, or \`role="switch"\`. Do NOT use \`aria-pressed\` on elements with \`role="listitem"\` or other roles.
+CORRECT: \`<ul role="list"><li class="product-card">...</li></ul>\` (listitem inside list)
+CORRECT: \`<span role="img" aria-label="Status: pending" class="status-dot"></span>\` (role added before aria-label)
+CORRECT: \`<span class="status-dot" aria-hidden="true"></span><span class="visually-hidden">Pending</span>\` (hidden text alternative)
+WRONG: \`<article role="listitem">\` (listitem not allowed on article)
+WRONG: \`<article role="button">\` (button not allowed on article \u2014 use \`<button>\` or \`<div role="button">\`)
+WRONG: \`<span aria-label="pending" class="status-dot"></span>\` (aria-label prohibited on generic span)
+WRONG: \`<div aria-label="Product badges" class="badges"></div>\` (aria-label prohibited on generic div)
 
 **Quick Checklist:**
 - **Forms:** Associated labels, aria-required on required fields, autocomplete attributes, aria-describedby for errors, aria-invalid for invalid fields, fieldsets with legends
 - **Buttons/Links:** Accessible names, aria-label for icon buttons, aria-hidden on decorative icons, descriptive link text
 - **Popups/Dialogs:** aria-haspopup, aria-expanded, aria-controls, role="dialog", aria-modal="true", aria-labelledby, focus trap, Escape to close
 - **Images:** alt on all images, descriptive alt for informative, empty alt for decorative, aria-describedby for complex
-- **Structure:** One h1, logical heading hierarchy, avoid \`<main>\`, \`<header>\`, or \`<footer>\` in page/route components (the layout may already provide them), use \`<section>\` or \`<div>\` as page-level wrappers, semantic HTML
+- **Structure:** One h1, logical heading hierarchy, avoid \`<main>\`, \`<header>\`, \`<footer>\`, \`role="main"\`, \`role="contentinfo"\`, \`role="banner"\` in page/route components (the layout may already provide them), use \`<section>\` or \`<div>\` as page-level wrappers, unique aria-labels on duplicate landmark types
+- **ARIA Rules:** Avoid adding \`aria-label\` to generic \`<span>\`/\`<div>\` without a role, avoid using \`role="listitem"\` or \`role="button"\` on \`<article>\` \u2014 use \`<li>\` for list items, add \`role="img"\` before \`aria-label\` on visual indicators, \`aria-pressed\` only on button-like roles
+- **Scrollable Regions:** Any scrollable container must have \`tabindex="0"\` or contain keyboard-interactive children
+- **Nested Interactive:** Do not add interactive role/tabindex to a container that already has focusable children
+- **List Roles:** \`role="list"\` containers must have \`role="listitem"\` children \u2014 prefer \`<ul>/<li>\` natively
 - **Dynamic Content:** role="status"/aria-live="polite" for updates, role="alert"/aria-live="assertive" for critical alerts
 - **Keyboard/Focus:** All interactive elements keyboard accessible, logical focus order, visible focus indicators, no keyboard traps (except modals)
 - **Color/Contrast:** 4.5:1 text contrast (3:1 large text), 3:1 UI component contrast, no color-only information, 3:1 focus indicator contrast`;
@@ -1968,6 +1992,9 @@ IMPORTANT: In order to use the Kendo Theme CSS variables to work in a Tailwind C
 ${tailwindBridgeExample}
 </taiwind_bridge_example>
     `
+          } : LAYOUT_MODE === "vanilla" ? {
+            type: "text",
+            text: "Note: For layout and spacing, use vanilla CSS with custom styles including flexbox, grid, media queries, and relative units. Do NOT use any CSS utility framework classes."
           } : {
             type: "text",
             text: "Note: For layout and spacing, use the Layout Assistant tool to get the appropriate Kendo CSS utility classes."
@@ -3259,7 +3286,7 @@ Also add the Kendo CSS utilities CDN link in your \`index.html\` \`<head>\`:
 `;
   const licenseSection = `## Step ${stepCounter++}: Activate Kendo License
 
-This step is required to use Kendo UI for Angular components without watermarks and with access to all features. Run the following command to activate your license:
+This step is required to use Kendo React components without watermarks and with access to all features. Run the following command to activate your license:
 
 \`\`\`bash
 npx kendo license activate
@@ -3420,7 +3447,119 @@ Add the following styles to \`src/Home.css\`:
 `;
 }
 
+// packages/react/src/lib/instructions/datagrid.ts
+var datagridInstructions = `
+## DataGrid Deprecated Properties Awareness
+For DataGrid component cases, avoid using deprecated properties and always use their modern replacements. The following properties are deprecated and should not be used:
+
+Deprecated properties and their modern replacements:
+- selectedField \u2192 use the select state property
+- editField \u2192 use the edit state property
+- expandedField \u2192 use the detailExpand state property
+- onExpandChange \u2192 use onDetailExpandChange for detail-row expansion or onGroupExpandChange for group expansion
+- cellRender \u2192 use the cells={{ data: CustomCell }} prop
+- rowRender \u2192 use the rows={{ data: CustomRow }} prop
+- filterCellRender \u2192 use the cells={{ filterCell: CustomCell }} prop
+- headerCellRender \u2192 use the cells={{ headerCell: CustomHeaderCell }} prop
+- column.cell \u2192 use the column.cells={{ data: CustomCell }} prop
+- column.headerCell \u2192 use the column.cells={{ headerCell: CustomHeaderCell }} prop
+- column.filterCell \u2192 use the column.cells={{ filterCell: CustomCell }} prop
+- column.footerCell \u2192 use the column.cells={{ footerCell: CustomFooterCell }} prop
+
+Additional modern updates:
+- Input component in Column Menu Filter has been replaced with Textbox
+- scrollable prop now defaults to virtual
+- Virtual scrolling no longer applies height by default
+
+Key points:
+- Never suggest or use these deprecated properties in DataGrid examples
+- Always provide modern alternatives when users ask about these properties
+- Explain that these properties are deprecated and provide the specific modern replacement
+- Focus on current DataGrid API patterns using state properties and cells/rows props
+
+Example:
+Deprecated: selectedField="isSelected" editField="inEdit"
+Modern: Use select and edit state properties with proper configuration
+`;
+
+// packages/react/src/lib/instructions/editor.ts
+var editorInstructions = `
+## Editor Tools Awareness
+For Editor component cases, always use the proper EditorTools import structure and never define tools as strings. Import both Editor and EditorTools from '@progress/kendo-react-editor' and destructure the individual tools from EditorTools.
+
+Required pattern:
+\`\`\`jsx
+import { Editor, EditorTools } from '@progress/kendo-react-editor';
+
+const {
+    Bold, Italic, Underline, Strikethrough,
+    Subscript, Superscript, ForeColor, BackColor,
+    CleanFormatting, AlignLeft, AlignCenter, AlignRight, AlignJustify,
+    Indent, Outdent, OrderedList, UnorderedList,
+    NumberedList, BulletedList, Undo, Redo,
+    FontSize, FontName, FormatBlock, Link, Unlink,
+    InsertImage, ViewHtml, InsertTable, InsertFile,
+    SelectAll, Print, Pdf, TableProperties, TableCellProperties,
+    AddRowBefore, AddRowAfter, AddColumnBefore, AddColumnAfter,
+    DeleteRow, DeleteColumn, DeleteTable, MergeCells, SplitCell
+} = EditorTools;
+\`\`\`
+
+Key points:
+- Always import both Editor and EditorTools from '@progress/kendo-react-editor'
+- Destructure individual tools from EditorTools object
+- Use the destructured tool references directly in the tools array
+- Never define tools as strings (e.g., 'bold', 'italic')
+- Group related tools in sub-arrays for better organization
+
+Example:
+Correct: tools={[[Bold, Italic, Underline], [AlignLeft, AlignCenter]]}
+Incorrect: tools={[['bold', 'italic', 'underline'], ['alignLeft', 'alignCenter']]}
+`;
+
+// packages/react/src/lib/instructions/smart-grid.ts
+var smartGridInstructions = `
+## Smart Grid (AI-Enhanced Grid) Implementation Guidelines
+**CRITICAL: When users ask about ANY of these AI grid terms, ALWAYS provide GridToolbarAIAssistant implementation (not basic Grid):**
+
+**Primary AI Grid Trigger Terms (case-insensitive):**
+- smart grid, smartgrid, smart-grid, smart_grid, SMART GRID, SmArt GrId
+- ai grid, aigrid, ai-grid, ai_grid, AI GRID, aI-griD, AIGrid  
+- ai enhanced grid, ai-enhanced-grid, ai_enhanced_grid, AI Enhanced Grid
+- ai powered grid, ai-powered-grid, ai_powered_grid, AI Powered Grid
+- intelligent grid, intelligent-grid, intelligent_grid, Intelligent Grid
+- grid with ai, grid-with-ai, grid_with_ai, Grid with AI
+- grid ai assistant, gridaiassistant, grid-ai-assistant, Grid AI Assistant
+- grid toolbar ai assistant, gridtoolbaraiassistant, GridToolbarAIAssistant
+- grid assistant, gridassistant, grid-assistant, Grid Assistant
+
+**Additional variations that should trigger AI Grid:**
+- ai enhanced, ai powered, smart, intelligent + grid (any spacing/casing)
+- grid + ai, grid + smart, grid + intelligent (any spacing/casing) 
+- Any mention of GridToolbarAIAssistant component specifically
+
+**Recognition Rule: If query contains ANY combination of AI/Smart/Intelligent + Grid terms, respond with complete GridToolbarAIAssistant setup.**
+
+Example Smart Grid suggestions by domain:
+- Financial: 'Sort by Amount descending', 'Show only failed transactions', 'Filter where currency is USD'
+- Sales: 'Group by region', 'Show top performing products', 'Filter by date range'
+- Inventory: 'Sort by stock level', 'Show out of stock items', 'Group by category'
+- Always include: 'Clear sorting', 'Clear filtering', 'Clear grouping'
+
+Basic Grid: <Grid data={data}><GridColumn field="name" /></Grid>
+Smart Grid: Complete AI-enhanced setup with GridToolbarAIAssistant, proper callbacks, reset functionality, and contextual suggestions
+
+Important Disclaimer:
+Always include this disclaimer when providing Smart Grid examples:
+"The demos in this article use a Telerik-hosted AI service for demonstration purposes only. For production applications, you should implement your own AI service that understands your specific domain, data, and business requirements."
+`;
+
 // packages/react/src/lib/tools/index.ts
+var COMPONENT_INSTRUCTIONS_MAP = {
+  "datagrid": [datagridInstructions, smartGridInstructions].join("\n\n"),
+  "grid": [datagridInstructions, smartGridInstructions].join("\n\n"),
+  "editor": editorInstructions
+};
 var LAYOUT_ASSISTANT_NAME = UIAgent.ToolNames.layoutAssistant(PRODUCT_LINE);
 var CODE_ASSISTANT_NAME3 = UIAgent.ToolNames.codeAssistant(PRODUCT_LINE);
 var STYLE_ASSISTANT_NAME = UIAgent.ToolNames.styleAssistant(PRODUCT_LINE);
@@ -3514,7 +3653,11 @@ function createReactTools(contextApi2, accessType) {
         suiteName: REACT_SUITE_NAME,
         components: ReactComponents,
         componentAliases: { "Grid": "DataGrid" },
-        getPostContent: ({ component }) => getComponentsCommonInstructions({ component }),
+        getPostContent: ({ component }) => {
+          const normComponent = component?.trim().toLowerCase();
+          const componentInstructions = COMPONENT_INSTRUCTIONS_MAP[normComponent];
+          return getComponentsCommonInstructions({ component, componentInstructions });
+        },
         requiredAccess: ["assistant", "agent"]
       },
       contextApi2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-mcp",
-  "version": "1.6.1-beta.8b4a77bb.0",
+  "version": "1.6.2-beta.a42c596b.0",
   "type": "module",
   "bin": "./dist/index.js",
   "license": "See LICENSE.md",
@@ -26,7 +26,7 @@
   "dependencies": {
     "@grpc/grpc-js": "^1.14.3",
     "@grpc/proto-loader": "^0.8.0",
-    "@modelcontextprotocol/sdk": "^1.27.1",
+    "@modelcontextprotocol/sdk": "^1.29.0",
     "@progress/kendo-licensing": "^1.10.1",
     "tslib": "^2.3.0"
   },