@nysds/mcp-server 1.16.0-alpha4 → 1.16.0

package/dist/tools/utility-tools.js

@@ -0,0 +1,282 @@
+/**
+ * Utility Tools
+ *
+ * MCP tools for NYSDS utility classes.
+ */
+import { z } from "zod";
+const UTILITY_DOCS = {
+    grid: `## Grid System
+
+NYSDS provides a 12-column responsive grid system.
+
+### Structure
+\`\`\`html
+<div class="nys-grid-container">
+  <div class="nys-grid-row">
+    <div class="nys-grid-col-6">Half width</div>
+    <div class="nys-grid-col-6">Half width</div>
+  </div>
+</div>
+\`\`\`
+
+### Column Classes
+- \`nys-grid-col-[1-12]\` - Fixed column widths (1-12 columns)
+- \`nys-grid-col\` - Equal width columns (auto-distributes)
+- \`nys-grid-col-auto\` - Column sized to content
+- \`nys-grid-col-fill\` - Column fills remaining space
+
+### Gap Classes
+- \`nys-grid-gap\` - Default gap between columns
+- \`nys-grid-gap-sm\` - Small gap
+- \`nys-grid-gap-lg\` - Large gap
+
+### Offset Classes
+- \`nys-grid-offset-[1-12]\` - Offset column by 1-12 columns
+
+### Example: Form with Sidebar
+\`\`\`html
+<div class="nys-grid-container">
+  <div class="nys-grid-row">
+    <div class="nys-grid-col-12 nys-desktop:nys-grid-col-4">
+      <!-- Sidebar content (stepper, navigation) -->
+    </div>
+    <div class="nys-grid-col-12 nys-desktop:nys-grid-col-8">
+      <!-- Main content (form) -->
+    </div>
+  </div>
+</div>
+\`\`\``,
+    flex: `## Flexbox Utilities
+
+### Display
+- \`nys-display-flex\` - Sets display: flex
+
+### Direction
+- \`nys-flex-row\` - Row direction (default)
+- \`nys-flex-column\` - Column direction
+
+### Wrapping
+- \`nys-flex-wrap\` - Allow items to wrap
+- \`nys-flex-no-wrap\` - Prevent wrapping
+
+### Alignment (Cross Axis)
+- \`nys-flex-align-start\` - Align items to start
+- \`nys-flex-align-center\` - Align items to center
+- \`nys-flex-align-end\` - Align items to end
+- \`nys-flex-align-stretch\` - Stretch items to fill
+
+### Justification (Main Axis)
+- \`nys-flex-justify-start\` - Justify to start
+- \`nys-flex-justify-center\` - Justify to center
+- \`nys-flex-justify-end\` - Justify to end
+
+### Flex Sizing
+- \`nys-flex-[1-12]\` - Flex grow/shrink values
+- \`nys-flex-auto\` - flex: auto (grow and shrink)
+- \`nys-flex-fill\` - Fill available space
+
+### Example: Button Group
+\`\`\`html
+<div class="nys-display-flex nys-flex-justify-end nys-flex-gap-200">
+  <nys-button label="Cancel" variant="outline"></nys-button>
+  <nys-button label="Submit"></nys-button>
+</div>
+\`\`\``,
+    spacing: `## Spacing Utilities
+
+Pattern: \`nys-{property}-{direction}-{value}\`
+
+### Properties
+- \`margin\` - External spacing
+- \`padding\` - Internal spacing
+
+### Directions
+- \`t\` - Top
+- \`r\` - Right
+- \`b\` - Bottom
+- \`l\` - Left
+- \`x\` - Horizontal (left + right)
+- \`y\` - Vertical (top + bottom)
+- (none) - All sides
+
+### Values
+- \`0\` - 0
+- \`1px\` - 1px
+- \`2px\` - 2px
+- \`50\` - var(--nys-space-50) = 0.125rem (2px)
+- \`100\` - var(--nys-space-100) = 0.25rem (4px)
+- \`150\` - var(--nys-space-150) = 0.375rem (6px)
+- \`200\` - var(--nys-space-200) = 0.5rem (8px)
+- \`250\` - var(--nys-space-250) = 0.625rem (10px)
+- \`300\` - var(--nys-space-300) = 0.75rem (12px)
+- \`400\` - var(--nys-space-400) = 1rem (16px)
+- \`500\` - var(--nys-space-500) = 1.25rem (20px)
+- \`600\` - var(--nys-space-600) = 1.5rem (24px)
+- \`700\` - var(--nys-space-700) = 2rem (32px)
+- \`800\` - var(--nys-space-800) = 2.5rem (40px)
+- \`1200\` - var(--nys-space-1200) = 4rem (64px)
+
+### Examples
+\`\`\`html
+<!-- Add bottom margin to an alert -->
+<nys-alert class="nys-margin-b-300">...</nys-alert>
+
+<!-- Add padding to a container -->
+<div class="nys-padding-400">...</div>
+
+<!-- Horizontal margin -->
+<div class="nys-margin-x-200">...</div>
+\`\`\``,
+    display: `## Display Utilities
+
+- \`nys-display-none\` - Hide element
+- \`nys-display-block\` - Block display
+- \`nys-display-inline\` - Inline display
+- \`nys-display-inline-block\` - Inline-block display
+- \`nys-display-flex\` - Flex display
+
+### Example: Hide on Mobile
+\`\`\`html
+<div class="nys-display-none nys-tablet:nys-display-block">
+  Only visible on tablet and larger
+</div>
+\`\`\``,
+    opacity: `## Opacity Utilities
+
+- \`nys-opacity-0\` - Fully transparent
+- \`nys-opacity-25\` - 25% opacity
+- \`nys-opacity-50\` - 50% opacity
+- \`nys-opacity-75\` - 75% opacity
+- \`nys-opacity-100\` - Fully opaque`,
+    zindex: `## Z-Index Utilities
+
+- \`nys-z-0\` - z-index: 0
+- \`nys-z-10\` - z-index: 10
+- \`nys-z-20\` - z-index: 20
+- \`nys-z-30\` - z-index: 30
+- \`nys-z-40\` - z-index: 40
+- \`nys-z-50\` - z-index: 50
+- \`nys-z-auto\` - z-index: auto`,
+    typography: `## Typography Utilities
+
+### Text Alignment
+- \`nys-text-left\` - Left align text
+- \`nys-text-center\` - Center align text
+- \`nys-text-right\` - Right align text
+
+### Font Weight
+- \`nys-font-normal\` - Normal weight
+- \`nys-font-medium\` - Medium weight
+- \`nys-font-semibold\` - Semibold weight
+- \`nys-font-bold\` - Bold weight
+
+### Text Transform
+- \`nys-text-uppercase\` - Uppercase text
+- \`nys-text-lowercase\` - Lowercase text
+- \`nys-text-capitalize\` - Capitalize text`,
+    responsive: `## Responsive Breakpoints
+
+NYSDS utility classes support responsive prefixes.
+
+### Breakpoints
+- (no prefix) - All screen sizes (mobile-first)
+- \`nys-mobile-lg:\` - 30em (480px) and up
+- \`nys-tablet:\` - 40em (640px) and up
+- \`nys-desktop:\` - 64em (1024px) and up
+
+### Pattern
+\`nys-{breakpoint}:nys-{class}\`
+
+### Examples
+\`\`\`html
+<!-- Full width on mobile, half on tablet, third on desktop -->
+<div class="nys-grid-col-12 nys-tablet:nys-grid-col-6 nys-desktop:nys-grid-col-4">
+  Responsive column
+</div>
+
+<!-- Stack on mobile, row on tablet -->
+<div class="nys-display-flex nys-flex-column nys-tablet:nys-flex-row">
+  Responsive flex direction
+</div>
+
+<!-- Hide on mobile, show on desktop -->
+<div class="nys-display-none nys-desktop:nys-display-block">
+  Desktop only content
+</div>
+\`\`\``,
+    componentSpacing: `## Component Spacing
+
+When adding spacing around NYSDS components, use utility classes rather than wrapper elements.
+
+### Examples
+\`\`\`html
+<!-- Add bottom margin to an alert -->
+<nys-alert class="nys-margin-b-300" type="info">
+  This alert has bottom margin.
+</nys-alert>
+
+<!-- Add top margin to a button -->
+<nys-button class="nys-margin-t-400" label="Submit"></nys-button>
+
+<!-- Stack form fields with consistent spacing -->
+<nys-textinput class="nys-margin-b-300" label="First Name"></nys-textinput>
+<nys-textinput class="nys-margin-b-300" label="Last Name"></nys-textinput>
+<nys-textinput class="nys-margin-b-400" label="Email"></nys-textinput>
+<nys-button label="Submit"></nys-button>
+\`\`\``,
+};
+export function registerUtilityTools(server) {
+    // get_utility_classes - Comprehensive utility class reference
+    server.tool("get_utility_classes", "Get NYSDS utility class reference for layout, spacing, and styling", {
+        category: z
+            .enum([
+            "grid",
+            "flex",
+            "spacing",
+            "display",
+            "opacity",
+            "zindex",
+            "typography",
+            "responsive",
+            "all",
+        ])
+            .optional()
+            .describe("Category of utility classes to retrieve. Defaults to 'all'."),
+    }, async ({ category = "all" }) => {
+        let content;
+        if (category === "all") {
+            content = `# NYSDS Utility Classes
+
+${UTILITY_DOCS.grid}
+
+${UTILITY_DOCS.flex}
+
+${UTILITY_DOCS.spacing}
+
+${UTILITY_DOCS.display}
+
+${UTILITY_DOCS.opacity}
+
+${UTILITY_DOCS.zindex}
+
+${UTILITY_DOCS.typography}
+
+${UTILITY_DOCS.responsive}
+
+${UTILITY_DOCS.componentSpacing}`;
+        }
+        else {
+            content =
+                UTILITY_DOCS[category] ||
+                    `Unknown category: ${category}`;
+        }
+        return {
+            content: [
+                {
+                    type: "text",
+                    text: content,
+                },
+            ],
+        };
+    });
+}

package/dist/tools/validation-tools.d.ts

@@ -3,9 +3,8 @@
  *
  * MCP tools for validating NYSDS component usage.
  *
- * P1 Tools:
+ * Tools:
  * - validate_component_api: Validate prop/attribute usage
- * - setup_framework: Framework-specific guides
  */
 import type { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
 export declare function registerValidationTools(server: McpServer): void;

package/dist/tools/validation-tools.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"validation-tools.d.ts","sourceRoot":"","sources":["../../src/tools/validation-tools.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAGzE,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,SAAS,GAAG,IAAI,CAyO/D"}
+{"version":3,"file":"validation-tools.d.ts","sourceRoot":"","sources":["../../src/tools/validation-tools.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAGzE,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,SAAS,GAAG,IAAI,CAgE/D"}

package/dist/tools/validation-tools.js

@@ -3,9 +3,8 @@
  *
  * MCP tools for validating NYSDS component usage.
  *
- * P1 Tools:
+ * Tools:
  * - validate_component_api: Validate prop/attribute usage
- * - setup_framework: Framework-specific guides
  */
 import { z } from "zod";
 import { getComponent } from "../lib/cem-parser.js";
@@ -58,165 +57,4 @@ export function registerValidationTools(server) {
             ],
         };
     });
-    // setup_framework - Framework-specific guides
-    server.tool("setup_framework", "Get framework-specific setup guide for using NYSDS components", {
-        framework: z
-            .enum(["angular", "react", "vue", "dotnet", "drupal", "vanilla"])
-            .describe("The framework to get setup instructions for"),
-    }, async ({ framework }) => {
-        // TODO: Load from data/guides/ directory
-        const guides = {
-            vanilla: `# NYSDS with Vanilla JavaScript
-
-## Installation
-
-\`\`\`bash
-npm install @nysds/components
-\`\`\`
-
-## Usage
-
-\`\`\`html
-<script type="module">
-  import '@nysds/components';
-</script>
-
-<nys-button label="Click me"></nys-button>
-\`\`\`
-`,
-            react: `# NYSDS with React
-
-## Installation
-
-\`\`\`bash
-npm install @nysds/components
-\`\`\`
-
-## Usage
-
-\`\`\`jsx
-import '@nysds/components/nys-button';
-
-function App() {
-  return <nys-button label="Click me" />;
-}
-\`\`\`
-
-Note: Web components work in React but require property binding for complex types.
-`,
-            angular: `# NYSDS with Angular
-
-## Installation
-
-\`\`\`bash
-npm install @nysds/components
-\`\`\`
-
-## Configuration
-
-Add CUSTOM_ELEMENTS_SCHEMA to your module:
-
-\`\`\`typescript
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-
-@NgModule({
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class AppModule {}
-\`\`\`
-
-## Usage
-
-\`\`\`typescript
-import '@nysds/components/nys-button';
-\`\`\`
-
-\`\`\`html
-<nys-button label="Click me"></nys-button>
-\`\`\`
-`,
-            vue: `# NYSDS with Vue
-
-## Installation
-
-\`\`\`bash
-npm install @nysds/components
-\`\`\`
-
-## Configuration
-
-Configure Vue to recognize custom elements:
-
-\`\`\`javascript
-// vite.config.js
-export default {
-  plugins: [
-    vue({
-      template: {
-        compilerOptions: {
-          isCustomElement: (tag) => tag.startsWith('nys-')
-        }
-      }
-    })
-  ]
-}
-\`\`\`
-
-## Usage
-
-\`\`\`vue
-<script setup>
-import '@nysds/components/nys-button';
-</script>
-
-<template>
-  <nys-button label="Click me" />
-</template>
-\`\`\`
-`,
-            dotnet: `# NYSDS with .NET / Blazor
-
-## Installation
-
-Add the package via npm or include from CDN:
-
-\`\`\`html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@nysds/components"></script>
-\`\`\`
-
-## Usage in Razor
-
-\`\`\`razor
-<nys-button label="Click me"></nys-button>
-\`\`\`
-`,
-            drupal: `# NYSDS with Drupal
-
-## Installation
-
-Add the library to your theme's libraries.yml:
-
-\`\`\`yaml
-nysds:
-  js:
-    https://cdn.jsdelivr.net/npm/@nysds/components: { type: external, minified: true }
-\`\`\`
-
-## Usage in Twig
-
-\`\`\`twig
-<nys-button label="{{ 'Click me'|t }}"></nys-button>
-\`\`\`
-`,
-        };
-        const guide = guides[framework] || `No guide available for ${framework}`;
-        return {
-            content: [
-                {
-                    type: "text",
-                    text: guide,
-                },
-            ],
-        };
-    });
 }

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@nysds/mcp-server",
-  "version": "1.16.0-alpha4",
+  "version": "1.16.0",
   "description": "MCP server for the New York State Design System. Exposes components, tokens, and documentation to AI assistants.",
   "type": "module",
   "bin": {
-    "nysds-mcp": "./dist/index.js"
+    "nysds-mcp": "dist/index.js"
   },
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -22,10 +22,11 @@
     "build": "tsc",
     "dev": "tsc --watch",
     "start": "node dist/index.js",
-    "inspect": "npx @modelcontextprotocol/inspector node dist/index.js"
+    "inspect": "npx -y @modelcontextprotocol/inspector node dist/index.js"
   },
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.0.0"
+    "@modelcontextprotocol/sdk": "^1.26.0",
+    "zod": "^3.25"
   },
   "devDependencies": {
     "@types/node": "^22.0.0",