@nysds/mcp-server 1.16.0-alpha4 → 1.16.0

package/data/guides/frameworks/react.md

@@ -0,0 +1,45 @@
+# NYSDS with React
+
+> **Note:** React integration is currently untested. The guidance below is based on standard web component usage patterns and may require adjustments.
+
+## Installation
+
+```bash
+npm install @nysds/components @nysds/styles
+```
+
+## Load styles
+
+Import the NYSDS stylesheet in your app entry point (e.g., `index.tsx` or `App.tsx`):
+
+```tsx
+// New project: includes reset, typography, and utility classes
+import '@nysds/styles/dist/nysds-full.min.css';
+
+// Existing project: CSS variables only (styles components, nothing else)
+// import '@nysds/styles/dist/nysds.min.css';
+```
+
+## Usage
+
+Import components and use them in JSX:
+
+```tsx
+import '@nysds/nys-button';
+import '@nysds/nys-alert';
+
+function App() {
+  return (
+    <div>
+      <nys-button label="Click me"></nys-button>
+      <nys-alert type="info">This is an alert.</nys-alert>
+    </div>
+  );
+}
+```
+
+## Notes on web components in React
+
+- String attributes work normally: `<nys-button label="Click me" />`
+- For event listeners, use `ref` and `addEventListener` — React's synthetic event system doesn't forward to custom elements
+- Boolean attributes should be set explicitly: `<nys-button disabled={true} />`

package/data/guides/frameworks/vanilla.md

@@ -0,0 +1,45 @@
+# NYSDS with Vanilla JavaScript
+
+## Installation
+
+```bash
+npm install @nysds/components @nysds/styles
+```
+
+## Load styles
+
+Choose the right stylesheet for your project:
+
+```html
+<!-- New project: includes reset, typography, and utility classes -->
+<link rel="stylesheet" href="node_modules/@nysds/styles/dist/nysds-full.min.css" />
+
+<!-- Existing project: CSS variables only (styles components, nothing else) -->
+<link rel="stylesheet" href="node_modules/@nysds/styles/dist/nysds.min.css" />
+```
+
+## Usage
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <link rel="stylesheet" href="node_modules/@nysds/styles/dist/nysds-full.min.css" />
+  <script type="module">
+    import '@nysds/components';
+  </script>
+</head>
+<body>
+  <nys-button label="Click me"></nys-button>
+</body>
+</html>
+```
+
+You can also import individual components to reduce bundle size:
+
+```html
+<script type="module">
+  import '@nysds/nys-button';
+  import '@nysds/nys-alert';
+</script>
+```

package/data/guides/installation.md

@@ -0,0 +1,73 @@
+# NYSDS Installation Guide
+
+## 1. Install the component package
+
+```bash
+npm install @nysds/components
+```
+
+## 2. Load the styles
+
+NYSDS components require CSS variables to render correctly. Choose the right stylesheet based on your project:
+
+### New project (recommended)
+
+Use `nysds-full.min.css` — includes a CSS reset, typography styles, and utility/layout classes:
+
+```html
+<link rel="stylesheet" href="/path/to/nysds-full.min.css" />
+```
+
+### Existing project
+
+If you already have a CSS reset and typography, use `nysds.min.css` — loads only the CSS variables that style the components:
+
+```html
+<link rel="stylesheet" href="/path/to/nysds.min.css" />
+```
+
+### Via npm
+
+```bash
+npm install @nysds/styles
+```
+
+```css
+/* New project — full bundle with reset, typography, and utilities */
+@import '@nysds/styles/full';
+
+/* Existing project — CSS variables only */
+@import '@nysds/styles';
+```
+
+## 3. Import and use components
+
+Import components individually:
+
+```javascript
+import '@nysds/nys-button';
+import '@nysds/nys-alert';
+```
+
+Or import all components:
+
+```javascript
+import '@nysds/components';
+```
+
+Then use them in HTML:
+
+```html
+<nys-button label="Click me" variant="filled"></nys-button>
+<nys-alert type="info">This is an informational message.</nys-alert>
+```
+
+## Style bundles reference
+
+| File | Reset | Typography | Utilities | CSS Variables |
+|------|-------|------------|-----------|---------------|
+| `nysds-full.min.css` | Yes | Yes | Yes | Yes |
+| `nysds-typography.min.css` | No | Yes | No | Yes |
+| `nysds.min.css` | No | No | No | Yes |
+
+Use the `get_tokens` tool to explore available design tokens, or `get_utility_classes` for layout and spacing utilities.

package/data/guides/page-structure.md

@@ -0,0 +1,160 @@
+# NYSDS Page Structure Guide
+
+## Overview
+
+All NYS web pages should follow a consistent structure using NYSDS components for headers, footers, and navigation. This ensures accessibility compliance and brand consistency.
+
+## Required Page Structure
+
+```
+┌─────────────────────────────────────┐
+│ nys-skipnav (hidden until focused)  │
+├─────────────────────────────────────┤
+│ nys-unavheader (Universal header)   │
+├─────────────────────────────────────┤
+│ nys-globalheader (Agency header)    │
+├─────────────────────────────────────┤
+│                                     │
+│ <main id="main-content">            │
+│   Page content goes here            │
+│ </main>                             │
+│                                     │
+├─────────────────────────────────────┤
+│ nys-backtotop                       │
+├─────────────────────────────────────┤
+│ <footer>                            │
+│   nys-globalfooter (Agency footer)  │
+│   nys-unavfooter (Universal footer) │
+│ </footer>                           │
+└─────────────────────────────────────┘
+```
+
+## Component Order (Top to Bottom)
+
+### Header Section
+1. **`<nys-skipnav>`** - Skip navigation link (first focusable element)
+2. **`<nys-unavheader>`** - NYS Universal header (NY.gov branding)
+3. **`<nys-globalheader>`** - Agency-specific header with navigation
+
+### Main Content
+4. **`<main id="main-content">`** - Semantic landmark containing page content
+   - The `id="main-content"` is the default target for `nys-skipnav`
+   - All primary page content belongs inside this element
+
+### Footer Section
+5. **`<nys-backtotop>`** - Back to top button (before footer)
+6. **`<footer>`** - Semantic footer landmark containing:
+   - **`<nys-globalfooter>`** - Agency-specific footer with links
+   - **`<nys-unavfooter>`** - NYS Universal footer
+
+## Complete Page Template
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Page Title | Agency Name</title>
+
+  <!-- NYSDS Styles -->
+  <link rel="stylesheet" href="path/to/@nysds/styles/dist/nysds-full.min.css">
+  <!-- Agency Theme (optional) -->
+  <link rel="stylesheet" href="path/to/@nysds/styles/dist/nysds-theme-[agency].min.css">
+  <!-- Fonts -->
+  <link rel="stylesheet" href="path/to/nysds-fonts.css">
+  <link rel="preload" href="path/to/fonts/proximanova-regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">
+</head>
+<body>
+  <!-- Skip Navigation (must be first focusable element) -->
+  <nys-skipnav></nys-skipnav>
+
+  <!-- NYS Universal Header -->
+  <nys-unavheader></nys-unavheader>
+
+  <!-- Agency Global Header -->
+  <nys-globalheader
+    appName="Agency Name"
+    homepageLink="https://agency.ny.gov/">
+    <ul>
+      <li><a href="/about">About</a></li>
+      <li><a href="/services">Services</a></li>
+      <li><a href="/contact">Contact</a></li>
+    </ul>
+  </nys-globalheader>
+
+  <!-- Main Content Area -->
+  <main id="main-content">
+    <div class="nys-grid-container">
+      <!-- Page content here -->
+      <h1>Page Title</h1>
+      <p>Content...</p>
+    </div>
+  </main>
+
+  <!-- Back to Top Button -->
+  <nys-backtotop></nys-backtotop>
+
+  <!-- Footer Section -->
+  <footer>
+    <nys-globalfooter
+      agencyName="Agency Name"
+      homepageLink="https://agency.ny.gov/">
+      <ul>
+        <li><a href="/accessibility">Accessibility</a></li>
+        <li><a href="/privacy">Privacy Policy</a></li>
+        <li><a href="/contact">Contact Us</a></li>
+      </ul>
+    </nys-globalfooter>
+
+    <nys-unavfooter></nys-unavfooter>
+  </footer>
+
+  <!-- NYSDS Components JavaScript -->
+  <script type="module" src="path/to/@nysds/components/dist/nysds.js"></script>
+</body>
+</html>
+```
+
+## Page with Sidebar (e.g., Multi-Step Form)
+
+For pages with a sidebar (like a stepper), use the grid system within `<main>`:
+
+```html
+<main id="main-content">
+  <div class="nys-grid-container">
+    <div class="nys-grid-row">
+      <!-- Sidebar (stepper, navigation) -->
+      <nys-stepper
+        label="Application"
+        class="nys-grid-col-12 nys-desktop:nys-grid-col-3">
+        <nys-step label="Step 1" current></nys-step>
+        <nys-step label="Step 2"></nys-step>
+        <nys-step label="Step 3"></nys-step>
+      </nys-stepper>
+
+      <!-- Main content area -->
+      <div class="nys-grid-col-12 nys-desktop:nys-grid-col-9">
+        <h1>Step 1: Personal Information</h1>
+        <!-- Form content -->
+      </div>
+    </div>
+  </div>
+</main>
+```
+
+## Accessibility Requirements
+
+1. **Skip Navigation**: `nys-skipnav` must be the first focusable element
+2. **Main Landmark**: Use `<main id="main-content">` for primary content
+3. **Footer Landmark**: Wrap footer components in `<footer>` element
+4. **Language**: Set `lang` attribute on `<html>` element
+5. **Page Title**: Include descriptive `<title>` with page name and agency
+
+## Common Mistakes to Avoid
+
+- Do not place `nys-skipnav` after other focusable elements
+- Do not use `href="#app"` or wrapper div as skipnav target (use `#main-content`)
+- Do not omit the `<main>` landmark element
+- Do not place `nys-backtotop` inside the `<footer>` element
+- Do not omit `<footer>` wrapper around footer components

package/data/guides/styles.md

@@ -0,0 +1,48 @@
+# NYSDS Styles Guide
+
+## Choosing a stylesheet
+
+NYSDS provides three CSS bundles. Choose based on your project:
+
+| File | Reset | Typography | Utilities | CSS Variables |
+|------|-------|------------|-----------|---------------|
+| `nysds-full.min.css` | Yes | Yes | Yes | Yes |
+| `nysds-typography.min.css` | No | Yes | No | Yes |
+| `nysds.min.css` | No | No | No | Yes |
+
+**New project?** Use `nysds-full.min.css` — it includes a CSS reset, typography, and utility/layout classes so you can start building immediately.
+
+**Existing project?** Use `nysds.min.css` — it loads only the CSS variables that style NYSDS components, without overriding your existing reset or typography.
+
+## Installation via npm
+
+```bash
+npm install @nysds/styles
+```
+
+```css
+/* New project — full bundle */
+@import '@nysds/styles/full';
+
+/* Existing project — variables only */
+@import '@nysds/styles';
+
+/* Typography only */
+@import '@nysds/styles/typography';
+```
+
+## Agency theming
+
+Apply an agency theme with a `data-theme` attribute:
+
+```html
+<html data-theme="health">
+```
+
+Or with a CSS class:
+
+```html
+<body class="nys-theme-health">
+```
+
+Use the `get_tokens` tool with `output: "themes"` to see all available agency themes.

package/dist/lib/cem-parser.d.ts

@@ -43,6 +43,11 @@ export interface CEMCssPart {
     name: string;
     description?: string;
 }
+export interface CEMExample {
+    title: string;
+    code: string;
+    lang?: string;
+}
 export interface CEMDeclaration {
     kind: "class";
     name: string;
@@ -59,6 +64,7 @@ export interface CEMDeclaration {
         name: string;
         package?: string;
     };
+    examples?: CEMExample[];
 }
 export interface CEMModule {
     kind: "javascript-module";

package/dist/lib/cem-parser.d.ts.map

@@ -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"}
+{"version":3,"file":"cem-parser.d.ts","sourceRoot":"","sources":["../../src/lib/cem-parser.ts"],"names":[],"mappings":"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"}

package/dist/lib/cem-parser.js

@@ -8,6 +8,8 @@ import { resolve, dirname } from "node:path";
 import { fileURLToPath } from "node:url";
 const __dirname = dirname(fileURLToPath(import.meta.url));
 let cachedCEM = null;
+let cachedComponents = null;
+let cachedComponentMap = null;
 /**
  * Get the path to the custom-elements.json file
  */
@@ -16,9 +18,12 @@ function getCEMPath() {
     const possiblePaths = [
         // Relative to the package (when installed as dependency)
         resolve(__dirname, "../../../node_modules/@nysds/components/dist/custom-elements.json"),
-        // Relative to monorepo root (during development)
+        // Root of monorepo (during development) - WHERE CEM ACTUALLY OUTPUTS
+        resolve(__dirname, "../../../../custom-elements.json"),
+        // Legacy dist location
         resolve(__dirname, "../../../../dist/custom-elements.json"),
         // Direct path for testing
+        resolve(process.cwd(), "custom-elements.json"),
         resolve(process.cwd(), "dist/custom-elements.json"),
     ];
     for (const path of possiblePaths) {
@@ -42,18 +47,17 @@ export function getCEM() {
         return cachedCEM;
     }
     catch (error) {
-        // Return empty manifest if file not found (for development/testing)
         console.error("Warning: Could not load custom-elements.json:", error);
-        return {
-            schemaVersion: "1.0.0",
-            modules: [],
-        };
+        cachedCEM = { schemaVersion: "1.0.0", modules: [] };
+        return cachedCEM;
     }
 }
 /**
  * Get all component declarations from the manifest
  */
 export function getAllComponents() {
+    if (cachedComponents)
+        return cachedComponents;
     const cem = getCEM();
     const components = [];
     for (const module of cem.modules) {
@@ -65,18 +69,23 @@ export function getAllComponents() {
             }
         }
     }
-    return components.sort((a, b) => (a.tagName || "").localeCompare(b.tagName || ""));
+    cachedComponents = components.sort((a, b) => (a.tagName || "").localeCompare(b.tagName || ""));
+    return cachedComponents;
 }
 /**
  * Get a specific component by tag name
  */
 export function getComponent(tagName) {
-    const components = getAllComponents();
-    return components.find((c) => c.tagName?.toLowerCase() === tagName.toLowerCase());
+    if (!cachedComponentMap) {
+        cachedComponentMap = new Map(getAllComponents().map((c) => [c.tagName.toLowerCase(), c]));
+    }
+    return cachedComponentMap.get(tagName.toLowerCase());
 }
 /**
  * Clear the cached CEM (useful for testing)
  */
 export function clearCache() {
     cachedCEM = null;
+    cachedComponents = null;
+    cachedComponentMap = null;
 }

package/dist/lib/format.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Format Utilities
+ *
+ * Helpers for formatting MCP tool responses.
+ */
+/**
+ * JSON replacer that strips null and undefined values from objects.
+ * Use with JSON.stringify(obj, stripNulls, 2) for cleaner output.
+ */
+export declare function stripNulls(_key: string, value: unknown): unknown;
+/**
+ * Format an object as JSON, stripping null/undefined values and empty arrays.
+ */
+export declare function formatResponse(data: unknown): string;
+/**
+ * Create a text content response for MCP tools.
+ */
+export declare function textContent(data: unknown): {
+    type: "text";
+    text: string;
+};
+//# sourceMappingURL=format.d.ts.map

package/dist/lib/format.d.ts.map

@@ -0,0 +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"}

package/dist/lib/format.js

@@ -0,0 +1,33 @@
+/**
+ * Format Utilities
+ *
+ * Helpers for formatting MCP tool responses.
+ */
+/**
+ * JSON replacer that strips null and undefined values from objects.
+ * Use with JSON.stringify(obj, stripNulls, 2) for cleaner output.
+ */
+export function stripNulls(_key, value) {
+    if (value === null || value === undefined) {
+        return undefined; // Omit from output
+    }
+    if (Array.isArray(value) && value.length === 0) {
+        return undefined; // Omit empty arrays
+    }
+    return value;
+}
+/**
+ * Format an object as JSON, stripping null/undefined values and empty arrays.
+ */
+export function formatResponse(data) {
+    return JSON.stringify(data, stripNulls, 2);
+}
+/**
+ * Create a text content response for MCP tools.
+ */
+export function textContent(data) {
+    return {
+        type: "text",
+        text: formatResponse(data),
+    };
+}

package/dist/prompts/nysds-mode.d.ts.map

@@ -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"}
+{"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"}

package/dist/prompts/nysds-mode.js

@@ -23,7 +23,7 @@ export function registerPrompts(server) {
 
 4. **Validation**: You can validate component usage to ensure correct attribute and property usage.
 
-5. **Framework Integration**: You can provide setup guides for various frameworks (React, Angular, Vue, .NET, Drupal).
+5. **Framework Integration**: You can provide setup guides for various frameworks (React, Angular, .NET, Drupal, Vanilla JS).
 
 ## Best Practices
 
@@ -34,13 +34,22 @@ export function registerPrompts(server) {
 
 ## Available Tools
 
-- \`list_components\`: See all available components
-- \`get_component_docs\`: Get detailed docs for a specific component
-- \`find_components\`: Search for components by functionality
-- \`get_design_tokens\`: Access design token values
-- \`validate_component_api\`: Validate component usage
-- \`setup_framework\`: Get framework-specific setup guides
-- \`get_usage_guide\`: General installation and usage guide
+### Components
+- \`find_components\`: Search for components or list all (omit query to list all)
+- \`get_component\`: Get detailed docs for a specific component
+- \`validate_component_api\`: Validate component attribute/property usage
+
+### Design Tokens
+- \`get_tokens\`: Get tokens, categories, or themes (use output parameter)
+- \`find_tokens\`: Search for tokens by name, value, or description
+- \`get_token_info\`: Get details about a specific token with optional context validation
+- \`get_token_graph\`: Explore token dependencies
+
+### Styles & Utilities
+- \`get_utility_classes\`: Grid, flexbox, spacing, and other utility classes
+
+### Guides
+- \`get_guide\`: Get guides for installation, forms, styles, fonts, page structure, or framework setup
 
 When helping with UI development for New York State projects, prioritize NYSDS components and patterns.`,
                     },

package/dist/resources/guides.d.ts.map

@@ -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"}
+{"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"}

package/dist/resources/guides.js

@@ -14,53 +14,49 @@ export function registerGuideResources(server) {
     }, async () => {
         const guide = `# NYSDS Installation Guide
 
-## Quick Start
-
-Install the NYSDS components package:
+## 1. Install packages
 
 \`\`\`bash
-npm install @nysds/components
+npm install @nysds/components @nysds/styles
 \`\`\`
 
-## Import Components
+## 2. Load styles
 
-### Option 1: Import All Components
+NYSDS components require CSS variables to render correctly. Choose the right stylesheet:
 
-\`\`\`javascript
-import '@nysds/components';
+**New project** — includes a CSS reset, typography, and utility/layout classes:
+\`\`\`css
+@import '@nysds/styles/full';
+\`\`\`
+
+**Existing project** — loads only the CSS variables that style the components:
+\`\`\`css
+@import '@nysds/styles';
 \`\`\`
 
-### Option 2: Import Individual Components
+## 3. Import and use components
 
 \`\`\`javascript
-import '@nysds/components/nys-button';
-import '@nysds/components/nys-alert';
+import '@nysds/nys-button';
+import '@nysds/nys-alert';
 \`\`\`
 
-## Include Styles
+Or import all components:
 
-Import the base CSS for design tokens:
-
-\`\`\`css
-@import '@nysds/components/dist/styles.css';
+\`\`\`javascript
+import '@nysds/components';
 \`\`\`
 
-## Usage
-
-Once imported, use components as HTML elements:
+Then use them in HTML:
 
 \`\`\`html
-<nys-button label="Submit" variant="primary"></nys-button>
-<nys-alert type="success">Operation completed successfully!</nys-alert>
+<nys-button label="Submit" variant="filled"></nys-button>
+<nys-alert type="info">This is an informational message.</nys-alert>
 \`\`\`
 
 ## Framework Integration
 
-For framework-specific setup (React, Angular, Vue, etc.), use the \`setup_framework\` tool.
-
-## Browser Support
-
-NYSDS components support all modern browsers (Chrome, Firefox, Safari, Edge).
+For framework-specific setup, use the \`get_guide\` tool with \`topic: "framework"\` and a \`framework\` parameter (angular, react, dotnet, drupal, or vanilla).
 
 ## Resources