@progress/kendo-react-mcp 1.6.2-beta.a42c596b.0 → 1.6.2-beta.cd97a7ec.0

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 (2) hide show
  1. package/dist/index.js +261 -225
  2. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -1354,214 +1354,245 @@ var getSharedValidationSteps = (uiLibrary, designSystem) => ({
1354
1354
  });
1355
1355
 
1356
1356
  // packages/kendo-ui-agent/src/lib/templates/tailwind-bridge.ts
1357
- var tailwindBridgeExample = `
1358
- @import "tailwindcss/theme.css";
1359
- @import "tailwindcss/preflight.css";
1360
- @import "tailwindcss/utilities.css";
1361
-
1362
- :root {
1363
- /* The generated Kendo Theme CSS variables */
1364
- }
1365
-
1366
-
1367
- @theme inline { /* The Tailwind bridge mapping */
1368
- /* Misc */
1369
- --color-app-surface: var( --kendo-color-app-surface );
1370
- --color-on-app-surface: var( --kendo-color-on-app-surface );
1371
- --color-subtle: var( --kendo-color-subtle );
1372
- --color-surface: var( --kendo-color-surface );
1373
- --color-surface-alt: var( --kendo-color-surface-alt );
1374
- --color-border: var( --kendo-color-border );
1375
- --color-border-alt: var( --kendo-color-border-alt );
1376
- /* Base */
1377
- --color-base-subtle: var( --kendo-color-base-subtle );
1378
- --color-base-subtle-hover: var( --kendo-color-base-subtle-hover );
1379
- --color-base-subtle-active: var( --kendo-color-base-subtle-active );
1380
- --color-base: var( --kendo-color-base );
1381
- --color-base-hover: var( --kendo-color-base-hover );
1382
- --color-base-active: var( --kendo-color-base-active );
1383
- --color-base-emphasis: var( --kendo-color-base-emphasis );
1384
- --color-base-on-subtle: var( --kendo-color-base-on-subtle );
1385
- --color-on-base: var( --kendo-color-on-base );
1386
- --color-base-on-surface: var( --kendo-color-base-on-surface );
1387
- /* Primary */
1388
- --color-primary-subtle: var( --kendo-color-primary-subtle );
1389
- --color-primary-subtle-hover: var( --kendo-color-primary-subtle-hover );
1390
- --color-primary-subtle-active: var( --kendo-color-primary-subtle-active );
1391
- --color-primary: var( --kendo-color-primary );
1392
- --color-primary-hover: var( --kendo-color-primary-hover );
1393
- --color-primary-active: var( --kendo-color-primary-active );
1394
- --color-primary-emphasis: var( --kendo-color-primary-emphasis );
1395
- --color-primary-on-subtle: var( --kendo-color-primary-on-subtle );
1396
- --color-on-primary: var( --kendo-color-on-primary );
1397
- --color-primary-on-surface: var( --kendo-color-primary-on-surface );
1398
- /* Secondary */
1399
- --color-secondary-subtle: var( --kendo-color-secondary-subtle );
1400
- --color-secondary-subtle-hover: var( --kendo-color-secondary-subtle-hover );
1401
- --color-secondary-subtle-active: var( --kendo-color-secondary-subtle-active );
1402
- --color-secondary: var( --kendo-color-secondary );
1403
- --color-secondary-hover: var( --kendo-color-secondary-hover );
1404
- --color-secondary-active: var( --kendo-color-secondary-active );
1405
- --color-secondary-emphasis: var( --kendo-color-secondary-emphasis );
1406
- --color-secondary-on-subtle: var( --kendo-color-secondary-on-subtle );
1407
- --color-on-secondary: var( --kendo-color-on-secondary );
1408
- --color-secondary-on-surface: var( --kendo-color-secondary-on-surface );
1409
- /* Tertiary */
1410
- --color-tertiary-subtle: var( --kendo-color-tertiary-subtle );
1411
- --color-tertiary-subtle-hover: var( --kendo-color-tertiary-subtle-hover );
1412
- --color-tertiary-subtle-active: var( --kendo-color-tertiary-subtle-active );
1413
- --color-tertiary: var( --kendo-color-tertiary );
1414
- --color-tertiary-hover: var( --kendo-color-tertiary-hover );
1415
- --color-tertiary-active: var( --kendo-color-tertiary-active );
1416
- --color-tertiary-emphasis: var( --kendo-color-tertiary-emphasis );
1417
- --color-tertiary-on-subtle: var( --kendo-color-tertiary-on-subtle );
1418
- --color-on-tertiary: var( --kendo-color-on-tertiary );
1419
- --color-tertiary-on-surface: var( --kendo-color-tertiary-on-surface );
1420
- /* Info */
1421
- --color-info-subtle: var( --kendo-color-info-subtle );
1422
- --color-info-subtle-hover: var( --kendo-color-info-subtle-hover );
1423
- --color-info-subtle-active: var( --kendo-color-info-subtle-active );
1424
- --color-info: var( --kendo-color-info );
1425
- --color-info-hover: var( --kendo-color-info-hover );
1426
- --color-info-active: var( --kendo-color-info-active );
1427
- --color-info-emphasis: var( --kendo-color-info-emphasis );
1428
- --color-info-on-subtle: var( --kendo-color-info-on-subtle );
1429
- --color-on-info: var( --kendo-color-on-info );
1430
- --color-info-on-surface: var( --kendo-color-info-on-surface );
1431
- /* Success */
1432
- --color-success-subtle: var( --kendo-color-success-subtle );
1433
- --color-success-subtle-hover: var( --kendo-color-success-subtle-hover );
1434
- --color-success-subtle-active: var( --kendo-color-success-subtle-active );
1435
- --color-success: var( --kendo-color-success );
1436
- --color-success-hover: var( --kendo-color-success-hover );
1437
- --color-success-active: var( --kendo-color-success-active );
1438
- --color-success-emphasis: var( --kendo-color-success-emphasis );
1439
- --color-success-on-subtle: var( --kendo-color-success-on-subtle );
1440
- --color-on-success: var( --kendo-color-on-success );
1441
- --color-success-on-surface: var( --kendo-color-success-on-surface );
1442
- /* Warning */
1443
- --color-warning-subtle: var( --kendo-color-warning-subtle );
1444
- --color-warning-subtle-hover: var( --kendo-color-warning-subtle-hover );
1445
- --color-warning-subtle-active: var( --kendo-color-warning-subtle-active );
1446
- --color-warning: var( --kendo-color-warning );
1447
- --color-warning-hover: var( --kendo-color-warning-hover );
1448
- --color-warning-active: var( --kendo-color-warning-active );
1449
- --color-warning-emphasis: var( --kendo-color-warning-emphasis );
1450
- --color-warning-on-subtle: var( --kendo-color-warning-on-subtle );
1451
- --color-on-warning: var( --kendo-color-on-warning );
1452
- --color-warning-on-surface: var( --kendo-color-warning-on-surface );
1453
- /* Error */
1454
- --color-error-subtle: var( --kendo-color-error-subtle );
1455
- --color-error-subtle-hover: var( --kendo-color-error-subtle-hover );
1456
- --color-error-subtle-active: var( --kendo-color-error-subtle-active );
1457
- --color-error: var( --kendo-color-error );
1458
- --color-error-hover: var( --kendo-color-error-hover );
1459
- --color-error-active: var( --kendo-color-error-active );
1460
- --color-error-emphasis: var( --kendo-color-error-emphasis );
1461
- --color-error-on-subtle: var( --kendo-color-error-on-subtle );
1462
- --color-on-error: var( --kendo-color-on-error );
1463
- --color-error-on-surface: var( --kendo-color-error-on-surface );
1464
- /* Light */
1465
- --color-light-subtle: var( --kendo-color-light-subtle );
1466
- --color-light-subtle-hover: var( --kendo-color-light-subtle-hover );
1467
- --color-light-subtle-active: var( --kendo-color-light-subtle-active );
1468
- --color-light: var( --kendo-color-light );
1469
- --color-light-hover: var( --kendo-color-light-hover );
1470
- --color-light-active: var( --kendo-color-light-active );
1471
- --color-light-emphasis: var( --kendo-color-light-emphasis );
1472
- --color-light-on-subtle: var( --kendo-color-light-on-subtle );
1473
- --color-on-light: var( --kendo-color-on-light );
1474
- --color-light-on-surface: var( --kendo-color-light-on-surface );
1475
- /* Dark */
1476
- --color-dark-subtle: var( --kendo-color-dark-subtle );
1477
- --color-dark-subtle-hover: var( --kendo-color-dark-subtle-hover );
1478
- --color-dark-subtle-active: var( --kendo-color-dark-subtle-active );
1479
- --color-dark: var( --kendo-color-dark );
1480
- --color-dark-hover: var( --kendo-color-dark-hover );
1481
- --color-dark-active: var( --kendo-color-dark-active );
1482
- --color-dark-emphasis: var( --kendo-color-dark-emphasis );
1483
- --color-dark-on-subtle: var( --kendo-color-dark-on-subtle );
1484
- --color-on-dark: var( --kendo-color-on-dark );
1485
- --color-dark-on-surface: var( --kendo-color-dark-on-surface );
1486
- /* Inverse */
1487
- --color-inverse-subtle: var( --kendo-color-inverse-subtle );
1488
- --color-inverse-subtle-hover: var( --kendo-color-inverse-subtle-hover );
1489
- --color-inverse-subtle-active: var( --kendo-color-inverse-subtle-active );
1490
- --color-inverse: var( --kendo-color-inverse );
1491
- --color-inverse-hover: var( --kendo-color-inverse-hover );
1492
- --color-inverse-active: var( --kendo-color-inverse-active );
1493
- --color-inverse-emphasis: var( --kendo-color-inverse-emphasis );
1494
- --color-inverse-on-subtle: var( --kendo-color-inverse-on-subtle );
1495
- --color-on-inverse: var( --kendo-color-on-inverse );
1496
- --color-inverse-on-surface: var( --kendo-color-inverse-on-surface );
1497
- /* Series A */
1498
- --color-series-a: var( --kendo-color-series-a );
1499
- --color-series-a-bold: var( --kendo-color-series-a-bold );
1500
- --color-series-a-bolder: var( --kendo-color-series-a-bolder );
1501
- --color-series-a-subtle: var( --kendo-color-series-a-subtle );
1502
- --color-series-a-subtler: var( --kendo-color-series-a-subtler );
1503
- /* Series B */
1504
- --color-series-b: var( --kendo-color-series-b );
1505
- --color-series-b-bold: var( --kendo-color-series-b-bold );
1506
- --color-series-b-bolder: var( --kendo-color-series-b-bolder );
1507
- --color-series-b-subtle: var( --kendo-color-series-b-subtle );
1508
- --color-series-b-subtler: var( --kendo-color-series-b-subtler );
1509
- /* Series C */
1510
- --color-series-c: var( --kendo-color-series-c );
1511
- --color-series-c-bold: var( --kendo-color-series-c-bold );
1512
- --color-series-c-bolder: var( --kendo-color-series-c-bolder );
1513
- --color-series-c-subtle: var( --kendo-color-series-c-subtle );
1514
- --color-series-c-subtler: var( --kendo-color-series-c-subtler );
1515
- /* Series D */
1516
- --color-series-d: var( --kendo-color-series-d );
1517
- --color-series-d-bold: var( --kendo-color-series-d-bold );
1518
- --color-series-d-bolder: var( --kendo-color-series-d-bolder );
1519
- --color-series-d-subtle: var( --kendo-color-series-d-subtle );
1520
- --color-series-d-subtler: var( --kendo-color-series-d-subtler );
1521
- /* Series E */
1522
- --color-series-e: var( --kendo-color-series-e );
1523
- --color-series-e-bold: var( --kendo-color-series-e-bold );
1524
- --color-series-e-bolder: var( --kendo-color-series-e-bolder );
1525
- --color-series-e-subtle: var( --kendo-color-series-e-subtle );
1526
- --color-series-e-subtler: var( --kendo-color-series-e-subtler );
1527
- /* Series F */
1528
- --color-series-f: var( --kendo-color-series-f );
1529
- --color-series-f-bold: var( --kendo-color-series-f-bold );
1530
- --color-series-f-bolder: var( --kendo-color-series-f-bolder );
1531
- --color-series-f-subtle: var( --kendo-color-series-f-subtle );
1532
- --color-series-f-subtler: var( --kendo-color-series-f-subtler );
1533
-
1534
- /* Typography */
1535
- --font-sans: var( --kendo-font-family-sans );
1536
- --font-serif: var( --kendo-font-family-sans-serif );
1537
- --font-mono: var( --kendo-font-family-monospace );
1538
- --text-xs: var( --kendo-font-size-xs );
1539
- --text-xs--line-height: var( --kendo-line-height-xs );
1540
- --text-sm: var( --kendo-font-size-sm );
1541
- --text-sm--line-height: var( --kendo-line-height-sm );
1542
- --text-base: var( --kendo-font-size );
1543
- --text-base--line-height: var( --kendo-line-height );
1544
- --text-lg: var( --kendo-font-size-lg );
1545
- --text-lg--line-height: var( --kendo-line-height-lg );
1546
-
1547
- --radius-none: var( --kendo-border-radius-none );
1548
- --radius-xs: var( --kendo-border-radius-xs );
1549
- --radius-sm: var( --kendo-border-radius-sm );
1550
- --radius-md: var( --kendo-border-radius-md );
1551
- --radius-lg: var( --kendo-border-radius-lg );
1552
- --radius-xl: var( --kendo-border-radius-xl );
1553
- --radius-2xl: var( --kendo-border-radius-xxl );
1554
- --radius-3xl: var( --kendo-border-radius-xxxl );
1555
- --radius-4xl: 1.5rem;
1556
- --radius-full: var( --kendo-border-radius-full );
1557
-
1558
- /* Breakpoints */
1559
- --breakpoint-sm: 576px;
1560
- --breakpoint-md: 768px;
1561
- --breakpoint-lg: 992px;
1562
- --breakpoint-xl: 1200px;
1563
- --breakpoint-2xl: 1400px;
1564
- }`;
1357
+ var kendoTokenList = `--kendo-color-app-surface
1358
+ --kendo-color-on-app-surface
1359
+ --kendo-color-subtle
1360
+ --kendo-color-surface
1361
+ --kendo-color-surface-alt
1362
+ --kendo-color-border
1363
+ --kendo-color-border-alt
1364
+ /* Base */
1365
+ --kendo-color-base-subtle
1366
+ --kendo-color-base-subtle-hover
1367
+ --kendo-color-base-subtle-active
1368
+ --kendo-color-base
1369
+ --kendo-color-base-hover
1370
+ --kendo-color-base-active
1371
+ --kendo-color-base-emphasis
1372
+ --kendo-color-base-on-subtle
1373
+ --kendo-color-on-base
1374
+ --kendo-color-base-on-surface
1375
+ /* Primary */
1376
+ --kendo-color-primary-subtle
1377
+ --kendo-color-primary-subtle-hover
1378
+ --kendo-color-primary-subtle-active
1379
+ --kendo-color-primary
1380
+ --kendo-color-primary-hover
1381
+ --kendo-color-primary-active
1382
+ --kendo-color-primary-emphasis
1383
+ --kendo-color-primary-on-subtle
1384
+ --kendo-color-on-primary
1385
+ --kendo-color-primary-on-surface
1386
+ /* Secondary */
1387
+ --kendo-color-secondary-subtle
1388
+ --kendo-color-secondary-subtle-hover
1389
+ --kendo-color-secondary-subtle-active
1390
+ --kendo-color-secondary
1391
+ --kendo-color-secondary-hover
1392
+ --kendo-color-secondary-active
1393
+ --kendo-color-secondary-emphasis
1394
+ --kendo-color-secondary-on-subtle
1395
+ --kendo-color-on-secondary
1396
+ --kendo-color-secondary-on-surface
1397
+ /* Tertiary */
1398
+ --kendo-color-tertiary-subtle
1399
+ --kendo-color-tertiary-subtle-hover
1400
+ --kendo-color-tertiary-subtle-active
1401
+ --kendo-color-tertiary
1402
+ --kendo-color-tertiary-hover
1403
+ --kendo-color-tertiary-active
1404
+ --kendo-color-tertiary-emphasis
1405
+ --kendo-color-tertiary-on-subtle
1406
+ --kendo-color-on-tertiary
1407
+ --kendo-color-tertiary-on-surface
1408
+ /* Info */
1409
+ --kendo-color-info-subtle
1410
+ --kendo-color-info-subtle-hover
1411
+ --kendo-color-info-subtle-active
1412
+ --kendo-color-info
1413
+ --kendo-color-info-hover
1414
+ --kendo-color-info-active
1415
+ --kendo-color-info-emphasis
1416
+ --kendo-color-info-on-subtle
1417
+ --kendo-color-on-info
1418
+ --kendo-color-info-on-surface
1419
+ /* Success */
1420
+ --kendo-color-success-subtle
1421
+ --kendo-color-success-subtle-hover
1422
+ --kendo-color-success-subtle-active
1423
+ --kendo-color-success
1424
+ --kendo-color-success-hover
1425
+ --kendo-color-success-active
1426
+ --kendo-color-success-emphasis
1427
+ --kendo-color-success-on-subtle
1428
+ --kendo-color-on-success
1429
+ --kendo-color-success-on-surface
1430
+ /* Warning */
1431
+ --kendo-color-warning-subtle
1432
+ --kendo-color-warning-subtle-hover
1433
+ --kendo-color-warning-subtle-active
1434
+ --kendo-color-warning
1435
+ --kendo-color-warning-hover
1436
+ --kendo-color-warning-active
1437
+ --kendo-color-warning-emphasis
1438
+ --kendo-color-warning-on-subtle
1439
+ --kendo-color-on-warning
1440
+ --kendo-color-warning-on-surface
1441
+ /* Error */
1442
+ --kendo-color-error-subtle
1443
+ --kendo-color-error-subtle-hover
1444
+ --kendo-color-error-subtle-active
1445
+ --kendo-color-error
1446
+ --kendo-color-error-hover
1447
+ --kendo-color-error-active
1448
+ --kendo-color-error-emphasis
1449
+ --kendo-color-error-on-subtle
1450
+ --kendo-color-on-error
1451
+ --kendo-color-error-on-surface
1452
+ /* Light */
1453
+ --kendo-color-light-subtle
1454
+ --kendo-color-light-subtle-hover
1455
+ --kendo-color-light-subtle-active
1456
+ --kendo-color-light
1457
+ --kendo-color-light-hover
1458
+ --kendo-color-light-active
1459
+ --kendo-color-light-emphasis
1460
+ --kendo-color-light-on-subtle
1461
+ --kendo-color-on-light
1462
+ --kendo-color-light-on-surface
1463
+ /* Dark */
1464
+ --kendo-color-dark-subtle
1465
+ --kendo-color-dark-subtle-hover
1466
+ --kendo-color-dark-subtle-active
1467
+ --kendo-color-dark
1468
+ --kendo-color-dark-hover
1469
+ --kendo-color-dark-active
1470
+ --kendo-color-dark-emphasis
1471
+ --kendo-color-dark-on-subtle
1472
+ --kendo-color-on-dark
1473
+ --kendo-color-dark-on-surface
1474
+ /* Inverse */
1475
+ --kendo-color-inverse-subtle
1476
+ --kendo-color-inverse-subtle-hover
1477
+ --kendo-color-inverse-subtle-active
1478
+ --kendo-color-inverse
1479
+ --kendo-color-inverse-hover
1480
+ --kendo-color-inverse-active
1481
+ --kendo-color-inverse-emphasis
1482
+ --kendo-color-inverse-on-subtle
1483
+ --kendo-color-on-inverse
1484
+ --kendo-color-inverse-on-surface
1485
+ /* Series A */
1486
+ --kendo-color-series-a
1487
+ --kendo-color-series-a-bold
1488
+ --kendo-color-series-a-bolder
1489
+ --kendo-color-series-a-subtle
1490
+ --kendo-color-series-a-subtler
1491
+ /* Series B */
1492
+ --kendo-color-series-b
1493
+ --kendo-color-series-b-bold
1494
+ --kendo-color-series-b-bolder
1495
+ --kendo-color-series-b-subtle
1496
+ --kendo-color-series-b-subtler
1497
+ /* Series C */
1498
+ --kendo-color-series-c
1499
+ --kendo-color-series-c-bold
1500
+ --kendo-color-series-c-bolder
1501
+ --kendo-color-series-c-subtle
1502
+ --kendo-color-series-c-subtler
1503
+ /* Series D */
1504
+ --kendo-color-series-d
1505
+ --kendo-color-series-d-bold
1506
+ --kendo-color-series-d-bolder
1507
+ --kendo-color-series-d-subtle
1508
+ --kendo-color-series-d-subtler
1509
+ /* Series E */
1510
+ --kendo-color-series-e
1511
+ --kendo-color-series-e-bold
1512
+ --kendo-color-series-e-bolder
1513
+ --kendo-color-series-e-subtle
1514
+ --kendo-color-series-e-subtler
1515
+ /* Series F */
1516
+ --kendo-color-series-f
1517
+ --kendo-color-series-f-bold
1518
+ --kendo-color-series-f-bolder
1519
+ --kendo-color-series-f-subtle
1520
+ --kendo-color-series-f-subtler
1521
+ /* Typography */
1522
+ --kendo-font-family-sans
1523
+ --kendo-font-family-sans-serif
1524
+ --kendo-font-family-monospace
1525
+ --kendo-font-size-xs
1526
+ --kendo-line-height-xs
1527
+ --kendo-font-size-sm
1528
+ --kendo-line-height-sm
1529
+ --kendo-font-size
1530
+ --kendo-line-height
1531
+ --kendo-font-size-lg
1532
+ --kendo-line-height-lg
1533
+ /* Border Radius */
1534
+ --kendo-border-radius-none
1535
+ --kendo-border-radius-xs
1536
+ --kendo-border-radius-sm
1537
+ --kendo-border-radius-md
1538
+ --kendo-border-radius-lg
1539
+ --kendo-border-radius-xl
1540
+ --kendo-border-radius-xxl
1541
+ --kendo-border-radius-xxxl
1542
+ --radius-4xl: 1.5rem
1543
+ --kendo-border-radius-full`;
1544
+ var tailwindV3SetupPrompt = `I need you to set up a system where Tailwind CSS is the single source of truth for all design tokens, and those tokens are automatically reflected as CSS custom properties so I can use them in regular CSS too.
1545
+ Requirements:
1546
+
1547
+ All design tokens (colors, spacing, font families, border radius, shadows) are defined once in tailwind.config.js
1548
+ A Tailwind plugin emits every token as a --token-name CSS custom property on :root
1549
+ Colors support Tailwind's opacity modifier syntax (bg-primary/50) using the rgb(var(--color-x-rgb) / <alpha-value>) pattern
1550
+ Dark mode tokens are emitted under .dark so that both dark: utility variants and var(--color-x) in custom CSS update together
1551
+ var(--color-primary) in hand-written CSS and bg-primary in HTML resolve to the same value
1552
+
1553
+ Use the Kendo theme tokens listed above as the design tokens.
1554
+
1555
+ Output I need:
1556
+
1557
+ The full tailwind.config.js with the plugin included
1558
+ The base CSS file importing Tailwind
1559
+ A short example showing a component using both bg-primary and var(--color-primary) side by side`;
1560
+ var tailwindV4SetupPrompt = `I need you to set up a system where Tailwind CSS v4 is the single source of truth for all design tokens, and those tokens are automatically available as CSS custom properties so I can use them in regular CSS too.
1561
+ Requirements:
1562
+
1563
+ All design tokens (colors, spacing, font families, border radius, shadows) are defined once in the @theme block \u2014 no tailwind.config.js
1564
+ Every @theme variable is natively available as a var(--token-name) CSS custom property with no plugin needed
1565
+ Colors use oklch and support opacity modifier syntax (bg-primary/50) natively
1566
+ Dark mode tokens are re-declared under .dark so that both dark: utility variants and var(--color-x) in custom CSS update together
1567
+ var(--color-primary) in hand-written CSS and bg-primary in HTML resolve to the same value
1568
+
1569
+ Use the Kendo theme tokens listed above as the design tokens.
1570
+
1571
+ Output I need:
1572
+
1573
+ The single CSS file with @import "tailwindcss", the @theme block, and the .dark overrides
1574
+ A short example showing a component using both bg-primary and var(--color-primary) side by side`;
1575
+ var tailwindBridgeExample = `## Tailwind CSS Setup Instructions
1576
+
1577
+ Detect which version of Tailwind CSS the project uses, then follow the appropriate setup guide below.
1578
+
1579
+ ### Kendo Theme Tokens
1580
+ These are the design tokens to map into Tailwind:
1581
+ ${kendoTokenList}
1582
+
1583
+ ### For Tailwind CSS v3 (uses tailwind.config.js)
1584
+
1585
+ <tailwind_v3_setup>
1586
+ ${tailwindV3SetupPrompt}
1587
+ </tailwind_v3_setup>
1588
+
1589
+ ### For Tailwind CSS v4 (uses @theme block, no config file)
1590
+
1591
+ <tailwind_v4_setup>
1592
+ ${tailwindV4SetupPrompt}
1593
+ </tailwind_v4_setup>
1594
+
1595
+ IMPORTANT: Detect which version of Tailwind CSS the project uses, then follow the matching setup guide.`;
1565
1596
 
1566
1597
  // packages/kendo-ui-agent/src/lib/tools-factory.ts
1567
1598
  function formatApiRefItemFromJson(rawValue, component) {
@@ -1946,6 +1977,22 @@ function createStyleAssistantTool(config, contextApi2) {
1946
1977
  },
1947
1978
  async ({ prompt }, { _meta }) => {
1948
1979
  log("Style Assistant called with:", { prompt });
1980
+ if (LAYOUT_MODE === "tailwind") {
1981
+ return {
1982
+ content: [
1983
+ {
1984
+ type: "text",
1985
+ text: `Note: For layout and spacing, use Tailwind CSS utility classes to structure your layout and apply spacing between elements.
1986
+ IMPORTANT: You need to set up Tailwind CSS so it becomes the single source of truth for all design tokens. Detect which Tailwind version the project uses and follow the appropriate setup instructions below.
1987
+
1988
+ <tailwind_setup_instructions>
1989
+ ${tailwindBridgeExample}
1990
+ </tailwind_setup_instructions>
1991
+ `
1992
+ }
1993
+ ]
1994
+ };
1995
+ }
1949
1996
  let formattedCSS = "";
1950
1997
  try {
1951
1998
  const result = await contextApi2.queryThemeGenerate({ prompt }, { _meta });
@@ -1983,19 +2030,7 @@ ${formattedCSS}
1983
2030
  type: "text",
1984
2031
  text: response
1985
2032
  },
1986
- LAYOUT_MODE === "tailwind" ? {
1987
- type: "text",
1988
- text: `Note: For layout and spacing, use Tailwind CSS utility classes to structure your layout and apply spacing between elements.
1989
- IMPORTANT: In order to use the Kendo Theme CSS variables to work in a Tailwind CSS project, make sure to configure Tailwind to allow custom CSS properties and use the generated CSS variables in your Tailwind configuration for colors, spacing, etc. This way you can leverage the design tokens generated by the Style Assistant while using Tailwind for layout and utility classes. Follow the tailwind_bridge_example provided as insperation for how to bridge Kendo Theme CSS variables with Tailwind CSS.
1990
-
1991
- <taiwind_bridge_example>
1992
- ${tailwindBridgeExample}
1993
- </taiwind_bridge_example>
1994
- `
1995
- } : LAYOUT_MODE === "vanilla" ? {
1996
- type: "text",
1997
- 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."
1998
- } : {
2033
+ {
1999
2034
  type: "text",
2000
2035
  text: "Note: For layout and spacing, use the Layout Assistant tool to get the appropriate Kendo CSS utility classes."
2001
2036
  }
@@ -3560,6 +3595,7 @@ var COMPONENT_INSTRUCTIONS_MAP = {
3560
3595
  "grid": [datagridInstructions, smartGridInstructions].join("\n\n"),
3561
3596
  "editor": editorInstructions
3562
3597
  };
3598
+ var STOP_STATIC_CONTEXT = !!process.env.KENDO_UIA_STOP_STATIC_CONTEXT;
3563
3599
  var LAYOUT_ASSISTANT_NAME = UIAgent.ToolNames.layoutAssistant(PRODUCT_LINE);
3564
3600
  var CODE_ASSISTANT_NAME3 = UIAgent.ToolNames.codeAssistant(PRODUCT_LINE);
3565
3601
  var STYLE_ASSISTANT_NAME = UIAgent.ToolNames.styleAssistant(PRODUCT_LINE);
@@ -3614,7 +3650,7 @@ function createReactTools(contextApi2, accessType) {
3614
3650
  description: UIAgent.ToolDescriptions.layoutAssistant,
3615
3651
  suiteName: REACT_SUITE_NAME,
3616
3652
  libKey: Suite,
3617
- getPreContent: getLayoutInstructions,
3653
+ getPreContent: STOP_STATIC_CONTEXT ? void 0 : getLayoutInstructions,
3618
3654
  requiredAccess: ["agent"]
3619
3655
  },
3620
3656
  contextApi2
@@ -3626,7 +3662,7 @@ function createReactTools(contextApi2, accessType) {
3626
3662
  title: "KendoReact Style Assistant",
3627
3663
  description: UIAgent.ToolDescriptions.styleAssistant,
3628
3664
  libKey: Suite,
3629
- getPreContent: getStyleInstructions,
3665
+ getPreContent: STOP_STATIC_CONTEXT ? void 0 : getStyleInstructions,
3630
3666
  requiredAccess: ["agent"]
3631
3667
  },
3632
3668
  contextApi2
@@ -3638,7 +3674,7 @@ function createReactTools(contextApi2, accessType) {
3638
3674
  title: "KendoReact Icon Assistant",
3639
3675
  description: UIAgent.ToolDescriptions.iconAssistant,
3640
3676
  libKey: Suite,
3641
- getPostContent: getIconsInstructions,
3677
+ getPostContent: STOP_STATIC_CONTEXT ? void 0 : getIconsInstructions,
3642
3678
  requiredAccess: ["assistant", "agent"]
3643
3679
  },
3644
3680
  contextApi2
@@ -3653,7 +3689,7 @@ function createReactTools(contextApi2, accessType) {
3653
3689
  suiteName: REACT_SUITE_NAME,
3654
3690
  components: ReactComponents,
3655
3691
  componentAliases: { "Grid": "DataGrid" },
3656
- getPostContent: ({ component }) => {
3692
+ getPostContent: STOP_STATIC_CONTEXT ? void 0 : ({ component }) => {
3657
3693
  const normComponent = component?.trim().toLowerCase();
3658
3694
  const componentInstructions = COMPONENT_INSTRUCTIONS_MAP[normComponent];
3659
3695
  return getComponentsCommonInstructions({ component, componentInstructions });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@progress/kendo-react-mcp",
3
- "version": "1.6.2-beta.a42c596b.0",
3
+ "version": "1.6.2-beta.cd97a7ec.0",
4
4
  "type": "module",
5
5
  "bin": "./dist/index.js",
6
6
  "license": "See LICENSE.md",