@nysds/mcp-server 1.16.0-alpha4 → 1.16.0-alpha5

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 (39) hide show
  1. package/README.md +40 -44
  2. package/data/guides/fonts.md +77 -0
  3. package/data/guides/form-validation.md +169 -0
  4. package/data/guides/frameworks/angular.md +71 -0
  5. package/data/guides/frameworks/dotnet.md +42 -0
  6. package/data/guides/frameworks/drupal.md +39 -0
  7. package/data/guides/frameworks/react.md +45 -0
  8. package/data/guides/frameworks/vanilla.md +45 -0
  9. package/data/guides/installation.md +73 -0
  10. package/data/guides/page-structure.md +160 -0
  11. package/data/guides/styles.md +48 -0
  12. package/dist/lib/cem-parser.d.ts +6 -0
  13. package/dist/lib/cem-parser.d.ts.map +1 -1
  14. package/dist/lib/cem-parser.js +18 -9
  15. package/dist/lib/format.d.ts +22 -0
  16. package/dist/lib/format.d.ts.map +1 -0
  17. package/dist/lib/format.js +33 -0
  18. package/dist/prompts/nysds-mode.d.ts.map +1 -1
  19. package/dist/prompts/nysds-mode.js +17 -8
  20. package/dist/resources/guides.d.ts.map +1 -1
  21. package/dist/resources/guides.js +22 -26
  22. package/dist/tools/component-tools.d.ts +3 -5
  23. package/dist/tools/component-tools.d.ts.map +1 -1
  24. package/dist/tools/component-tools.js +51 -85
  25. package/dist/tools/guide-tools.d.ts +9 -0
  26. package/dist/tools/guide-tools.d.ts.map +1 -0
  27. package/dist/tools/guide-tools.js +78 -0
  28. package/dist/tools/index.d.ts.map +1 -1
  29. package/dist/tools/index.js +4 -0
  30. package/dist/tools/token-tools.d.ts +2 -5
  31. package/dist/tools/token-tools.d.ts.map +1 -1
  32. package/dist/tools/token-tools.js +88 -108
  33. package/dist/tools/utility-tools.d.ts +8 -0
  34. package/dist/tools/utility-tools.d.ts.map +1 -0
  35. package/dist/tools/utility-tools.js +282 -0
  36. package/dist/tools/validation-tools.d.ts +1 -2
  37. package/dist/tools/validation-tools.d.ts.map +1 -1
  38. package/dist/tools/validation-tools.js +1 -163
  39. package/package.json +3 -2
@@ -0,0 +1,73 @@
1
+ # NYSDS Installation Guide
2
+
3
+ ## 1. Install the component package
4
+
5
+ ```bash
6
+ npm install @nysds/components
7
+ ```
8
+
9
+ ## 2. Load the styles
10
+
11
+ NYSDS components require CSS variables to render correctly. Choose the right stylesheet based on your project:
12
+
13
+ ### New project (recommended)
14
+
15
+ Use `nysds-full.min.css` — includes a CSS reset, typography styles, and utility/layout classes:
16
+
17
+ ```html
18
+ <link rel="stylesheet" href="/path/to/nysds-full.min.css" />
19
+ ```
20
+
21
+ ### Existing project
22
+
23
+ If you already have a CSS reset and typography, use `nysds.min.css` — loads only the CSS variables that style the components:
24
+
25
+ ```html
26
+ <link rel="stylesheet" href="/path/to/nysds.min.css" />
27
+ ```
28
+
29
+ ### Via npm
30
+
31
+ ```bash
32
+ npm install @nysds/styles
33
+ ```
34
+
35
+ ```css
36
+ /* New project — full bundle with reset, typography, and utilities */
37
+ @import '@nysds/styles/full';
38
+
39
+ /* Existing project — CSS variables only */
40
+ @import '@nysds/styles';
41
+ ```
42
+
43
+ ## 3. Import and use components
44
+
45
+ Import components individually:
46
+
47
+ ```javascript
48
+ import '@nysds/nys-button';
49
+ import '@nysds/nys-alert';
50
+ ```
51
+
52
+ Or import all components:
53
+
54
+ ```javascript
55
+ import '@nysds/components';
56
+ ```
57
+
58
+ Then use them in HTML:
59
+
60
+ ```html
61
+ <nys-button label="Click me" variant="filled"></nys-button>
62
+ <nys-alert type="info">This is an informational message.</nys-alert>
63
+ ```
64
+
65
+ ## Style bundles reference
66
+
67
+ | File | Reset | Typography | Utilities | CSS Variables |
68
+ |------|-------|------------|-----------|---------------|
69
+ | `nysds-full.min.css` | Yes | Yes | Yes | Yes |
70
+ | `nysds-typography.min.css` | No | Yes | No | Yes |
71
+ | `nysds.min.css` | No | No | No | Yes |
72
+
73
+ Use the `get_tokens` tool to explore available design tokens, or `get_utility_classes` for layout and spacing utilities.
@@ -0,0 +1,160 @@
1
+ # NYSDS Page Structure Guide
2
+
3
+ ## Overview
4
+
5
+ All NYS web pages should follow a consistent structure using NYSDS components for headers, footers, and navigation. This ensures accessibility compliance and brand consistency.
6
+
7
+ ## Required Page Structure
8
+
9
+ ```
10
+ ┌─────────────────────────────────────┐
11
+ │ nys-skipnav (hidden until focused) │
12
+ ├─────────────────────────────────────┤
13
+ │ nys-unavheader (Universal header) │
14
+ ├─────────────────────────────────────┤
15
+ │ nys-globalheader (Agency header) │
16
+ ├─────────────────────────────────────┤
17
+ │ │
18
+ │ <main id="main-content"> │
19
+ │ Page content goes here │
20
+ │ </main> │
21
+ │ │
22
+ ├─────────────────────────────────────┤
23
+ │ nys-backtotop │
24
+ ├─────────────────────────────────────┤
25
+ │ <footer> │
26
+ │ nys-globalfooter (Agency footer) │
27
+ │ nys-unavfooter (Universal footer) │
28
+ │ </footer> │
29
+ └─────────────────────────────────────┘
30
+ ```
31
+
32
+ ## Component Order (Top to Bottom)
33
+
34
+ ### Header Section
35
+ 1. **`<nys-skipnav>`** - Skip navigation link (first focusable element)
36
+ 2. **`<nys-unavheader>`** - NYS Universal header (NY.gov branding)
37
+ 3. **`<nys-globalheader>`** - Agency-specific header with navigation
38
+
39
+ ### Main Content
40
+ 4. **`<main id="main-content">`** - Semantic landmark containing page content
41
+ - The `id="main-content"` is the default target for `nys-skipnav`
42
+ - All primary page content belongs inside this element
43
+
44
+ ### Footer Section
45
+ 5. **`<nys-backtotop>`** - Back to top button (before footer)
46
+ 6. **`<footer>`** - Semantic footer landmark containing:
47
+ - **`<nys-globalfooter>`** - Agency-specific footer with links
48
+ - **`<nys-unavfooter>`** - NYS Universal footer
49
+
50
+ ## Complete Page Template
51
+
52
+ ```html
53
+ <!DOCTYPE html>
54
+ <html lang="en">
55
+ <head>
56
+ <meta charset="UTF-8">
57
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
58
+ <title>Page Title | Agency Name</title>
59
+
60
+ <!-- NYSDS Styles -->
61
+ <link rel="stylesheet" href="path/to/@nysds/styles/dist/nysds-full.min.css">
62
+ <!-- Agency Theme (optional) -->
63
+ <link rel="stylesheet" href="path/to/@nysds/styles/dist/nysds-theme-[agency].min.css">
64
+ <!-- Fonts -->
65
+ <link rel="stylesheet" href="path/to/nysds-fonts.css">
66
+ <link rel="preload" href="path/to/fonts/proximanova-regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">
67
+ </head>
68
+ <body>
69
+ <!-- Skip Navigation (must be first focusable element) -->
70
+ <nys-skipnav></nys-skipnav>
71
+
72
+ <!-- NYS Universal Header -->
73
+ <nys-unavheader></nys-unavheader>
74
+
75
+ <!-- Agency Global Header -->
76
+ <nys-globalheader
77
+ appName="Agency Name"
78
+ homepageLink="https://agency.ny.gov/">
79
+ <ul>
80
+ <li><a href="/about">About</a></li>
81
+ <li><a href="/services">Services</a></li>
82
+ <li><a href="/contact">Contact</a></li>
83
+ </ul>
84
+ </nys-globalheader>
85
+
86
+ <!-- Main Content Area -->
87
+ <main id="main-content">
88
+ <div class="nys-grid-container">
89
+ <!-- Page content here -->
90
+ <h1>Page Title</h1>
91
+ <p>Content...</p>
92
+ </div>
93
+ </main>
94
+
95
+ <!-- Back to Top Button -->
96
+ <nys-backtotop></nys-backtotop>
97
+
98
+ <!-- Footer Section -->
99
+ <footer>
100
+ <nys-globalfooter
101
+ agencyName="Agency Name"
102
+ homepageLink="https://agency.ny.gov/">
103
+ <ul>
104
+ <li><a href="/accessibility">Accessibility</a></li>
105
+ <li><a href="/privacy">Privacy Policy</a></li>
106
+ <li><a href="/contact">Contact Us</a></li>
107
+ </ul>
108
+ </nys-globalfooter>
109
+
110
+ <nys-unavfooter></nys-unavfooter>
111
+ </footer>
112
+
113
+ <!-- NYSDS Components JavaScript -->
114
+ <script type="module" src="path/to/@nysds/components/dist/nysds.js"></script>
115
+ </body>
116
+ </html>
117
+ ```
118
+
119
+ ## Page with Sidebar (e.g., Multi-Step Form)
120
+
121
+ For pages with a sidebar (like a stepper), use the grid system within `<main>`:
122
+
123
+ ```html
124
+ <main id="main-content">
125
+ <div class="nys-grid-container">
126
+ <div class="nys-grid-row">
127
+ <!-- Sidebar (stepper, navigation) -->
128
+ <nys-stepper
129
+ label="Application"
130
+ class="nys-grid-col-12 nys-desktop:nys-grid-col-3">
131
+ <nys-step label="Step 1" current></nys-step>
132
+ <nys-step label="Step 2"></nys-step>
133
+ <nys-step label="Step 3"></nys-step>
134
+ </nys-stepper>
135
+
136
+ <!-- Main content area -->
137
+ <div class="nys-grid-col-12 nys-desktop:nys-grid-col-9">
138
+ <h1>Step 1: Personal Information</h1>
139
+ <!-- Form content -->
140
+ </div>
141
+ </div>
142
+ </div>
143
+ </main>
144
+ ```
145
+
146
+ ## Accessibility Requirements
147
+
148
+ 1. **Skip Navigation**: `nys-skipnav` must be the first focusable element
149
+ 2. **Main Landmark**: Use `<main id="main-content">` for primary content
150
+ 3. **Footer Landmark**: Wrap footer components in `<footer>` element
151
+ 4. **Language**: Set `lang` attribute on `<html>` element
152
+ 5. **Page Title**: Include descriptive `<title>` with page name and agency
153
+
154
+ ## Common Mistakes to Avoid
155
+
156
+ - Do not place `nys-skipnav` after other focusable elements
157
+ - Do not use `href="#app"` or wrapper div as skipnav target (use `#main-content`)
158
+ - Do not omit the `<main>` landmark element
159
+ - Do not place `nys-backtotop` inside the `<footer>` element
160
+ - Do not omit `<footer>` wrapper around footer components
@@ -0,0 +1,48 @@
1
+ # NYSDS Styles Guide
2
+
3
+ ## Choosing a stylesheet
4
+
5
+ NYSDS provides three CSS bundles. Choose based on your project:
6
+
7
+ | File | Reset | Typography | Utilities | CSS Variables |
8
+ |------|-------|------------|-----------|---------------|
9
+ | `nysds-full.min.css` | Yes | Yes | Yes | Yes |
10
+ | `nysds-typography.min.css` | No | Yes | No | Yes |
11
+ | `nysds.min.css` | No | No | No | Yes |
12
+
13
+ **New project?** Use `nysds-full.min.css` — it includes a CSS reset, typography, and utility/layout classes so you can start building immediately.
14
+
15
+ **Existing project?** Use `nysds.min.css` — it loads only the CSS variables that style NYSDS components, without overriding your existing reset or typography.
16
+
17
+ ## Installation via npm
18
+
19
+ ```bash
20
+ npm install @nysds/styles
21
+ ```
22
+
23
+ ```css
24
+ /* New project — full bundle */
25
+ @import '@nysds/styles/full';
26
+
27
+ /* Existing project — variables only */
28
+ @import '@nysds/styles';
29
+
30
+ /* Typography only */
31
+ @import '@nysds/styles/typography';
32
+ ```
33
+
34
+ ## Agency theming
35
+
36
+ Apply an agency theme with a `data-theme` attribute:
37
+
38
+ ```html
39
+ <html data-theme="health">
40
+ ```
41
+
42
+ Or with a CSS class:
43
+
44
+ ```html
45
+ <body class="nys-theme-health">
46
+ ```
47
+
48
+ Use the `get_tokens` tool with `output: "themes"` to see all available agency themes.
@@ -43,6 +43,11 @@ export interface CEMCssPart {
43
43
  name: string;
44
44
  description?: string;
45
45
  }
46
+ export interface CEMExample {
47
+ title: string;
48
+ code: string;
49
+ lang?: string;
50
+ }
46
51
  export interface CEMDeclaration {
47
52
  kind: "class";
48
53
  name: string;
@@ -59,6 +64,7 @@ export interface CEMDeclaration {
59
64
  name: string;
60
65
  package?: string;
61
66
  };
67
+ examples?: CEMExample[];
62
68
  }
63
69
  export interface CEMModule {
64
70
  kind: "javascript-module";
@@ -1 +1 @@
1
- {"version":3,"file":"cem-parser.d.ts","sourceRoot":"","sources":["../../src/lib/cem-parser.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AASH,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAC;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,WAAW,CAAC;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,OAAO;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,YAAY,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,SAAS,EAAE,CAAC;IACtB,MAAM,CAAC,EAAE,QAAQ,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC;IAClB,aAAa,CAAC,EAAE,cAAc,EAAE,CAAC;IACjC,QAAQ,CAAC,EAAE,UAAU,EAAE,CAAC;IACxB,UAAU,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACjD;AAED,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,mBAAmB,CAAC;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,CAAC,EAAE,cAAc,EAAE,CAAC;IAChC,OAAO,CAAC,EAAE,KAAK,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;QACb,WAAW,EAAE;YAAE,IAAI,EAAE,MAAM,CAAA;SAAE,CAAC;KAC/B,CAAC,CAAC;CACJ;AAED,MAAM,WAAW,sBAAsB;IACrC,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,SAAS,EAAE,CAAC;CACtB;AAgCD;;GAEG;AACH,wBAAgB,MAAM,IAAI,sBAAsB,CAkB/C;AAED;;GAEG;AACH,wBAAgB,gBAAgB,IAAI,cAAc,EAAE,CAiBnD;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,MAAM,GAAG,cAAc,GAAG,SAAS,CAKxE;AAED;;GAEG;AACH,wBAAgB,UAAU,IAAI,IAAI,CAEjC"}
1
+ {"version":3,"file":"cem-parser.d.ts","sourceRoot":"","sources":["../../src/lib/cem-parser.ts"],"names":[],"mappings":"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"}
@@ -8,6 +8,8 @@ import { resolve, dirname } from "node:path";
8
8
  import { fileURLToPath } from "node:url";
9
9
  const __dirname = dirname(fileURLToPath(import.meta.url));
10
10
  let cachedCEM = null;
11
+ let cachedComponents = null;
12
+ let cachedComponentMap = null;
11
13
  /**
12
14
  * Get the path to the custom-elements.json file
13
15
  */
@@ -16,9 +18,12 @@ function getCEMPath() {
16
18
  const possiblePaths = [
17
19
  // Relative to the package (when installed as dependency)
18
20
  resolve(__dirname, "../../../node_modules/@nysds/components/dist/custom-elements.json"),
19
- // Relative to monorepo root (during development)
21
+ // Root of monorepo (during development) - WHERE CEM ACTUALLY OUTPUTS
22
+ resolve(__dirname, "../../../../custom-elements.json"),
23
+ // Legacy dist location
20
24
  resolve(__dirname, "../../../../dist/custom-elements.json"),
21
25
  // Direct path for testing
26
+ resolve(process.cwd(), "custom-elements.json"),
22
27
  resolve(process.cwd(), "dist/custom-elements.json"),
23
28
  ];
24
29
  for (const path of possiblePaths) {
@@ -42,18 +47,17 @@ export function getCEM() {
42
47
  return cachedCEM;
43
48
  }
44
49
  catch (error) {
45
- // Return empty manifest if file not found (for development/testing)
46
50
  console.error("Warning: Could not load custom-elements.json:", error);
47
- return {
48
- schemaVersion: "1.0.0",
49
- modules: [],
50
- };
51
+ cachedCEM = { schemaVersion: "1.0.0", modules: [] };
52
+ return cachedCEM;
51
53
  }
52
54
  }
53
55
  /**
54
56
  * Get all component declarations from the manifest
55
57
  */
56
58
  export function getAllComponents() {
59
+ if (cachedComponents)
60
+ return cachedComponents;
57
61
  const cem = getCEM();
58
62
  const components = [];
59
63
  for (const module of cem.modules) {
@@ -65,18 +69,23 @@ export function getAllComponents() {
65
69
  }
66
70
  }
67
71
  }
68
- return components.sort((a, b) => (a.tagName || "").localeCompare(b.tagName || ""));
72
+ cachedComponents = components.sort((a, b) => (a.tagName || "").localeCompare(b.tagName || ""));
73
+ return cachedComponents;
69
74
  }
70
75
  /**
71
76
  * Get a specific component by tag name
72
77
  */
73
78
  export function getComponent(tagName) {
74
- const components = getAllComponents();
75
- return components.find((c) => c.tagName?.toLowerCase() === tagName.toLowerCase());
79
+ if (!cachedComponentMap) {
80
+ cachedComponentMap = new Map(getAllComponents().map((c) => [c.tagName.toLowerCase(), c]));
81
+ }
82
+ return cachedComponentMap.get(tagName.toLowerCase());
76
83
  }
77
84
  /**
78
85
  * Clear the cached CEM (useful for testing)
79
86
  */
80
87
  export function clearCache() {
81
88
  cachedCEM = null;
89
+ cachedComponents = null;
90
+ cachedComponentMap = null;
82
91
  }
@@ -0,0 +1,22 @@
1
+ /**
2
+ * Format Utilities
3
+ *
4
+ * Helpers for formatting MCP tool responses.
5
+ */
6
+ /**
7
+ * JSON replacer that strips null and undefined values from objects.
8
+ * Use with JSON.stringify(obj, stripNulls, 2) for cleaner output.
9
+ */
10
+ export declare function stripNulls(_key: string, value: unknown): unknown;
11
+ /**
12
+ * Format an object as JSON, stripping null/undefined values and empty arrays.
13
+ */
14
+ export declare function formatResponse(data: unknown): string;
15
+ /**
16
+ * Create a text content response for MCP tools.
17
+ */
18
+ export declare function textContent(data: unknown): {
19
+ type: "text";
20
+ text: string;
21
+ };
22
+ //# sourceMappingURL=format.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"format.d.ts","sourceRoot":"","sources":["../../src/lib/format.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;GAGG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,OAAO,CAQhE;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,CAEpD;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,OAAO,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAKzE"}
@@ -0,0 +1,33 @@
1
+ /**
2
+ * Format Utilities
3
+ *
4
+ * Helpers for formatting MCP tool responses.
5
+ */
6
+ /**
7
+ * JSON replacer that strips null and undefined values from objects.
8
+ * Use with JSON.stringify(obj, stripNulls, 2) for cleaner output.
9
+ */
10
+ export function stripNulls(_key, value) {
11
+ if (value === null || value === undefined) {
12
+ return undefined; // Omit from output
13
+ }
14
+ if (Array.isArray(value) && value.length === 0) {
15
+ return undefined; // Omit empty arrays
16
+ }
17
+ return value;
18
+ }
19
+ /**
20
+ * Format an object as JSON, stripping null/undefined values and empty arrays.
21
+ */
22
+ export function formatResponse(data) {
23
+ return JSON.stringify(data, stripNulls, 2);
24
+ }
25
+ /**
26
+ * Create a text content response for MCP tools.
27
+ */
28
+ export function textContent(data) {
29
+ return {
30
+ type: "text",
31
+ text: formatResponse(data),
32
+ };
33
+ }
@@ -1 +1 @@
1
- {"version":3,"file":"nysds-mode.d.ts","sourceRoot":"","sources":["../../src/prompts/nysds-mode.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAEzE,wBAAgB,eAAe,CAAC,MAAM,EAAE,SAAS,GAAG,IAAI,CAkDvD"}
1
+ {"version":3,"file":"nysds-mode.d.ts","sourceRoot":"","sources":["../../src/prompts/nysds-mode.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAEzE,wBAAgB,eAAe,CAAC,MAAM,EAAE,SAAS,GAAG,IAAI,CA2DvD"}
@@ -23,7 +23,7 @@ export function registerPrompts(server) {
23
23
 
24
24
  4. **Validation**: You can validate component usage to ensure correct attribute and property usage.
25
25
 
26
- 5. **Framework Integration**: You can provide setup guides for various frameworks (React, Angular, Vue, .NET, Drupal).
26
+ 5. **Framework Integration**: You can provide setup guides for various frameworks (React, Angular, .NET, Drupal, Vanilla JS).
27
27
 
28
28
  ## Best Practices
29
29
 
@@ -34,13 +34,22 @@ export function registerPrompts(server) {
34
34
 
35
35
  ## Available Tools
36
36
 
37
- - \`list_components\`: See all available components
38
- - \`get_component_docs\`: Get detailed docs for a specific component
39
- - \`find_components\`: Search for components by functionality
40
- - \`get_design_tokens\`: Access design token values
41
- - \`validate_component_api\`: Validate component usage
42
- - \`setup_framework\`: Get framework-specific setup guides
43
- - \`get_usage_guide\`: General installation and usage guide
37
+ ### Components
38
+ - \`find_components\`: Search for components or list all (omit query to list all)
39
+ - \`get_component\`: Get detailed docs for a specific component
40
+ - \`validate_component_api\`: Validate component attribute/property usage
41
+
42
+ ### Design Tokens
43
+ - \`get_tokens\`: Get tokens, categories, or themes (use output parameter)
44
+ - \`find_tokens\`: Search for tokens by name, value, or description
45
+ - \`get_token_info\`: Get details about a specific token with optional context validation
46
+ - \`get_token_graph\`: Explore token dependencies
47
+
48
+ ### Styles & Utilities
49
+ - \`get_utility_classes\`: Grid, flexbox, spacing, and other utility classes
50
+
51
+ ### Guides
52
+ - \`get_guide\`: Get guides for installation, forms, styles, fonts, page structure, or framework setup
44
53
 
45
54
  When helping with UI development for New York State projects, prioritize NYSDS components and patterns.`,
46
55
  },
@@ -1 +1 @@
1
- {"version":3,"file":"guides.d.ts","sourceRoot":"","sources":["../../src/resources/guides.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAEzE,wBAAgB,sBAAsB,CAAC,MAAM,EAAE,SAAS,GAAG,IAAI,CA6E9D"}
1
+ {"version":3,"file":"guides.d.ts","sourceRoot":"","sources":["../../src/resources/guides.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAEzE,wBAAgB,sBAAsB,CAAC,MAAM,EAAE,SAAS,GAAG,IAAI,CAyE9D"}
@@ -14,53 +14,49 @@ export function registerGuideResources(server) {
14
14
  }, async () => {
15
15
  const guide = `# NYSDS Installation Guide
16
16
 
17
- ## Quick Start
18
-
19
- Install the NYSDS components package:
17
+ ## 1. Install packages
20
18
 
21
19
  \`\`\`bash
22
- npm install @nysds/components
20
+ npm install @nysds/components @nysds/styles
23
21
  \`\`\`
24
22
 
25
- ## Import Components
23
+ ## 2. Load styles
26
24
 
27
- ### Option 1: Import All Components
25
+ NYSDS components require CSS variables to render correctly. Choose the right stylesheet:
28
26
 
29
- \`\`\`javascript
30
- import '@nysds/components';
27
+ **New project** — includes a CSS reset, typography, and utility/layout classes:
28
+ \`\`\`css
29
+ @import '@nysds/styles/full';
30
+ \`\`\`
31
+
32
+ **Existing project** — loads only the CSS variables that style the components:
33
+ \`\`\`css
34
+ @import '@nysds/styles';
31
35
  \`\`\`
32
36
 
33
- ### Option 2: Import Individual Components
37
+ ## 3. Import and use components
34
38
 
35
39
  \`\`\`javascript
36
- import '@nysds/components/nys-button';
37
- import '@nysds/components/nys-alert';
40
+ import '@nysds/nys-button';
41
+ import '@nysds/nys-alert';
38
42
  \`\`\`
39
43
 
40
- ## Include Styles
44
+ Or import all components:
41
45
 
42
- Import the base CSS for design tokens:
43
-
44
- \`\`\`css
45
- @import '@nysds/components/dist/styles.css';
46
+ \`\`\`javascript
47
+ import '@nysds/components';
46
48
  \`\`\`
47
49
 
48
- ## Usage
49
-
50
- Once imported, use components as HTML elements:
50
+ Then use them in HTML:
51
51
 
52
52
  \`\`\`html
53
- <nys-button label="Submit" variant="primary"></nys-button>
54
- <nys-alert type="success">Operation completed successfully!</nys-alert>
53
+ <nys-button label="Submit" variant="filled"></nys-button>
54
+ <nys-alert type="info">This is an informational message.</nys-alert>
55
55
  \`\`\`
56
56
 
57
57
  ## Framework Integration
58
58
 
59
- For framework-specific setup (React, Angular, Vue, etc.), use the \`setup_framework\` tool.
60
-
61
- ## Browser Support
62
-
63
- NYSDS components support all modern browsers (Chrome, Firefox, Safari, Edge).
59
+ For framework-specific setup, use the \`get_guide\` tool with \`topic: "framework"\` and a \`framework\` parameter (angular, react, dotnet, drupal, or vanilla).
64
60
 
65
61
  ## Resources
66
62
 
@@ -3,11 +3,9 @@
3
3
  *
4
4
  * MCP tools for working with NYSDS components.
5
5
  *
6
- * P0 Tools:
7
- * - list_components: List all NYSDS components with summaries
8
- * - get_component_docs: Full documentation for a specific component
9
- * - find_components: Search by name/description (fuzzy)
10
- * - get_usage_guide: Installation and usage patterns
6
+ * Tools:
7
+ * - find_components: Search or list all components
8
+ * - get_component: Full documentation for a specific component
11
9
  */
12
10
  import type { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
13
11
  export declare function registerComponentTools(server: McpServer): void;
@@ -1 +1 @@
1
- {"version":3,"file":"component-tools.d.ts","sourceRoot":"","sources":["../../src/tools/component-tools.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAGH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAIzE,wBAAgB,sBAAsB,CAAC,MAAM,EAAE,SAAS,GAAG,IAAI,CA8I9D"}
1
+ {"version":3,"file":"component-tools.d.ts","sourceRoot":"","sources":["../../src/tools/component-tools.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAIzE,wBAAgB,sBAAsB,CAAC,MAAM,EAAE,SAAS,GAAG,IAAI,CA+G9D"}