@primer/mcp 0.3.2 → 0.3.3-rc.5b1595e6f

package/dist/index.js

@@ -1,4 +1,4 @@
-export { s as server } from './server-DRag4xtw.js';
+export { s as server } from './server-B7Ip8Z4Y.js';
 import '@modelcontextprotocol/sdk/server/mcp.js';
 import 'cheerio';
 import 'zod';

package/dist/{server-DRag4xtw.js → server-B7Ip8Z4Y.js}

@@ -420,7 +420,7 @@ function getDesignTokenSpecsText(groups) {
 * **Shorthand**: MUST use \`font: var(...)\`. NEVER split size/weight. 
 * **Shorthand Fallback**: If no shorthand exists (e.g. Monospace), use individual tokens for font-size, family, and line-height. NEVER raw 1.5.
 * **States**: Define 5: Rest, Hover, Focus-visible, Active, Disabled.
-* **Focus**: \`:focus-visible\` MUST use \`outline: var(--focus-outline)\` AND \`outline-offset: var(--outline-focus-offset)\`.
+* **Focus**: \`:focus-visible\` MUST use \`outline: var(--focus-outline)\` AND \`outline-offset: var(--focus-outline-offset, var(--outline-focus-offset))\`.
 * **Validation**: CALL \`lint_css\` after any CSS change. Task is incomplete without a success message.
 * **Self-Correction**: Adopt autofixes immediately. Report unfixable errors to the user.
 
@@ -491,7 +491,7 @@ function getTokenUsagePatternsText() {
 
 .btn-primary:focus-visible {
   outline: var(--focus-outline);
-  outline-offset: var(--outline-focus-offset);
+  outline-offset: var(--focus-outline-offset, var(--outline-focus-offset));
 }
 
 .btn-primary:active {
@@ -736,7 +736,7 @@ function runStylelint(css) {
   });
 }
 
-var version = "0.3.2";
+var version = "0.3.3";
 var packageJson = {
 	version: version};
 
@@ -753,7 +753,10 @@ const allTokensWithGuidelines = loadAllTokensWithGuidelines();
 // Project setup
 // -----------------------------------------------------------------------------
 server.registerTool('init', {
-  description: 'Setup or create a project that includes Primer React'
+  description: 'Setup or create a project that includes Primer React',
+  annotations: {
+    readOnlyHint: true
+  }
 }, async () => {
   const url = new URL(`/product/getting-started/react`, 'https://primer.style');
   const response = await fetch(url);
@@ -798,7 +801,10 @@ ${text}
 // Components
 // -----------------------------------------------------------------------------
 server.registerTool('list_components', {
-  description: 'List all of the components available from Primer React'
+  description: 'List all of the components available from Primer React',
+  annotations: {
+    readOnlyHint: true
+  }
 }, async () => {
   const components = listComponents().map(component => {
     return `- ${component.name}`;
@@ -818,6 +824,9 @@ server.registerTool('get_component', {
   description: 'Retrieve documentation and usage details for a specific React component from the @primer/react package by its name. This tool provides the official Primer documentation for any listed component, making it easy to inspect, reuse, or integrate components in your project.',
   inputSchema: {
     name: z.string().describe('The name of the component to retrieve')
+  },
+  annotations: {
+    readOnlyHint: true
   }
 }, async ({
   name
@@ -858,6 +867,9 @@ server.registerTool('get_component_examples', {
   description: 'Get examples for how to use a component from Primer React',
   inputSchema: {
     name: z.string().describe('The name of the component to retrieve')
+  },
+  annotations: {
+    readOnlyHint: true
   }
 }, async ({
   name
@@ -906,6 +918,9 @@ server.registerTool('get_component_usage_guidelines', {
   description: 'Get usage information for how to use a component from Primer',
   inputSchema: {
     name: z.string().describe('The name of the component to retrieve')
+  },
+  annotations: {
+    readOnlyHint: true
   }
 }, async ({
   name
@@ -962,6 +977,9 @@ server.registerTool('get_component_accessibility_guidelines', {
   description: 'Retrieve accessibility guidelines and best practices for a specific component from the @primer/react package by its name. Use this tool to get official accessibility recommendations, usage tips, and requirements to ensure your UI components are inclusive and meet accessibility standards.',
   inputSchema: {
     name: z.string().describe('The name of the component to retrieve')
+  },
+  annotations: {
+    readOnlyHint: true
   }
 }, async ({
   name
@@ -1019,7 +1037,10 @@ ${text}`
 // Patterns
 // -----------------------------------------------------------------------------
 server.registerTool('list_patterns', {
-  description: 'List all of the patterns available from Primer React'
+  description: 'List all of the patterns available from Primer React',
+  annotations: {
+    readOnlyHint: true
+  }
 }, async () => {
   const patterns = listPatterns().map(pattern => {
     return `- ${pattern.name}`;
@@ -1037,6 +1058,9 @@ server.registerTool('get_pattern', {
   description: 'Get a specific pattern by name',
   inputSchema: {
     name: z.string().describe('The name of the pattern to retrieve')
+  },
+  annotations: {
+    readOnlyHint: true
   }
 }, async ({
   name
@@ -1091,6 +1115,9 @@ server.registerTool('find_tokens', {
     query: z.string().optional().default('').describe('Search keywords (e.g., "danger border", "success background")'),
     group: z.string().optional().describe('Filter by group (e.g., "fgColor", "border")'),
     limit: z.number().int().min(1).max(100).optional().default(15).describe('Maximum results to return to stay within context limits')
+  },
+  annotations: {
+    readOnlyHint: true
   }
 }, async ({
   query,
@@ -1172,6 +1199,9 @@ server.registerTool('get_token_group_bundle', {
   description: "PREFERRED FOR COMPONENTS. Fetch all tokens for complex UI (e.g., Dialogs, Cards) in one call by providing an array of groups like ['overlay', 'shadow']. Use this instead of multiple find_tokens calls to save context.",
   inputSchema: {
     groups: z.array(z.string()).describe('Array of group names (e.g., ["overlay", "shadow", "focus"])')
+  },
+  annotations: {
+    readOnlyHint: true
   }
 }, async ({
   groups
@@ -1206,7 +1236,10 @@ server.registerTool('get_token_group_bundle', {
   };
 });
 server.registerTool('get_design_token_specs', {
-  description: 'CRITICAL: CALL THIS FIRST. Provides the logic matrix and the list of valid group names. You cannot search accurately without this map.'
+  description: 'CRITICAL: CALL THIS FIRST. Provides the logic matrix and the list of valid group names. You cannot search accurately without this map.',
+  annotations: {
+    readOnlyHint: true
+  }
 }, async () => {
   const groups = listTokenGroups();
   const customRules = getDesignTokenSpecsText(groups);
@@ -1225,7 +1258,10 @@ server.registerTool('get_design_token_specs', {
   };
 });
 server.registerTool('get_token_usage_patterns', {
-  description: 'Provides "Golden Example" CSS for core patterns: Button (Interactions) and Stack (Layout). Use this to understand how to apply the Logic Matrix, Motion, and Spacing scales.'
+  description: 'Provides "Golden Example" CSS for core patterns: Button (Interactions) and Stack (Layout). Use this to understand how to apply the Logic Matrix, Motion, and Spacing scales.',
+  annotations: {
+    readOnlyHint: true
+  }
 }, async () => {
   const customPatterns = getTokenUsagePatternsText();
   let text;
@@ -1251,6 +1287,9 @@ server.registerTool('lint_css', {
   description: 'REQUIRED FINAL STEP. Use this to validate your CSS. You cannot complete a task involving CSS without a successful run of this tool.',
   inputSchema: {
     css: z.string()
+  },
+  annotations: {
+    readOnlyHint: true
   }
 }, async ({
   css
@@ -1282,7 +1321,10 @@ server.registerTool('lint_css', {
 // Foundations
 // -----------------------------------------------------------------------------
 server.registerTool('get_color_usage', {
-  description: 'Get the guidelines for how to apply color to a user interface'
+  description: 'Get the guidelines for how to apply color to a user interface',
+  annotations: {
+    readOnlyHint: true
+  }
 }, async () => {
   const url = new URL(`/product/getting-started/foundations/color-usage`, 'https://primer.style');
   const response = await fetch(url);
@@ -1311,7 +1353,10 @@ server.registerTool('get_color_usage', {
   };
 });
 server.registerTool('get_typography_usage', {
-  description: 'Get the guidelines for how to apply typography to a user interface'
+  description: 'Get the guidelines for how to apply typography to a user interface',
+  annotations: {
+    readOnlyHint: true
+  }
 }, async () => {
   const url = new URL(`/product/getting-started/foundations/typography`, 'https://primer.style');
   const response = await fetch(url);
@@ -1344,7 +1389,10 @@ server.registerTool('get_typography_usage', {
 // Icons
 // -----------------------------------------------------------------------------
 server.registerTool('list_icons', {
-  description: 'List all of the icons (octicons) available from Primer Octicons React'
+  description: 'List all of the icons (octicons) available from Primer Octicons React',
+  annotations: {
+    readOnlyHint: true
+  }
 }, async () => {
   const icons = listIcons().map(icon => {
     const keywords = icon.keywords.map(keyword => {
@@ -1371,6 +1419,9 @@ server.registerTool('get_icon', {
   inputSchema: {
     name: z.string().describe('The name of the icon to retrieve'),
     size: z.string().optional().describe('The size of the icon to retrieve, e.g. "16"').default('16')
+  },
+  annotations: {
+    readOnlyHint: true
   }
 }, async ({
   name,
@@ -1420,7 +1471,10 @@ ${text}`
 // Coding guidelines
 // -----------------------------------------------------------------------------
 server.registerTool('primer_coding_guidelines', {
-  description: 'Get the guidelines when writing code that uses Primer or for UI code that you are creating'
+  description: 'Get the guidelines when writing code that uses Primer or for UI code that you are creating',
+  annotations: {
+    readOnlyHint: true
+  }
 }, async () => {
   return {
     content: [{
@@ -1471,6 +1525,9 @@ server.registerTool('review_alt_text', {
     surroundingText: z.string().describe('Text surrounding the image, relevant to the image.'),
     alt: z.string().describe('The alt text of the image being evaluated'),
     image: z.string().describe('The image URL or file path being evaluated')
+  },
+  annotations: {
+    readOnlyHint: true
   }
 }, async ({
   surroundingText,

package/dist/stdio.js

@@ -1,5 +1,5 @@
 import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
-import { s as server } from './server-DRag4xtw.js';
+import { s as server } from './server-B7Ip8Z4Y.js';
 import '@modelcontextprotocol/sdk/server/mcp.js';
 import 'cheerio';
 import 'zod';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/mcp",
   "description": "An MCP server that connects AI tools to the Primer Design System",
-  "version": "0.3.2",
+  "version": "0.3.3-rc.5b1595e6f",
   "type": "module",
   "bin": {
     "mcp": "./bin/mcp.js"
@@ -37,7 +37,7 @@
     "@modelcontextprotocol/sdk": "^1.24.0",
     "@primer/octicons": "^19.15.5",
     "@primer/primitives": "10.x || 11.x",
-    "@primer/react": "^38.20.0",
+    "@primer/react": "^38.28.0",
     "cheerio": "^1.0.0",
     "turndown": "^7.2.0",
     "zod": "^4.3.5"
@@ -56,6 +56,6 @@
     "rimraf": "^6.0.1",
     "rollup": "^4.59.0",
     "rollup-plugin-typescript2": "^0.36.0",
-    "typescript": "^5.9.2"
+    "typescript": "^6.0.3"
   }
 }

package/src/primitives.ts

@@ -437,7 +437,7 @@ function getDesignTokenSpecsText(groups: TokenGroups): string {
 * **Shorthand**: MUST use \`font: var(...)\`. NEVER split size/weight. 
 * **Shorthand Fallback**: If no shorthand exists (e.g. Monospace), use individual tokens for font-size, family, and line-height. NEVER raw 1.5.
 * **States**: Define 5: Rest, Hover, Focus-visible, Active, Disabled.
-* **Focus**: \`:focus-visible\` MUST use \`outline: var(--focus-outline)\` AND \`outline-offset: var(--outline-focus-offset)\`.
+* **Focus**: \`:focus-visible\` MUST use \`outline: var(--focus-outline)\` AND \`outline-offset: var(--focus-outline-offset, var(--outline-focus-offset))\`.
 * **Validation**: CALL \`lint_css\` after any CSS change. Task is incomplete without a success message.
 * **Self-Correction**: Adopt autofixes immediately. Report unfixable errors to the user.
 
@@ -508,7 +508,7 @@ function getTokenUsagePatternsText(): string {
 
 .btn-primary:focus-visible {
   outline: var(--focus-outline);
-  outline-offset: var(--outline-focus-offset);
+  outline-offset: var(--focus-outline-offset, var(--outline-focus-offset));
 }
 
 .btn-primary:active {

package/src/server.ts

@@ -39,6 +39,7 @@ server.registerTool(
   'init',
   {
     description: 'Setup or create a project that includes Primer React',
+    annotations: {readOnlyHint: true},
   },
   async () => {
     const url = new URL(`/product/getting-started/react`, 'https://primer.style')
@@ -92,7 +93,7 @@ ${text}
 // -----------------------------------------------------------------------------
 server.registerTool(
   'list_components',
-  {description: 'List all of the components available from Primer React'},
+  {description: 'List all of the components available from Primer React', annotations: {readOnlyHint: true}},
   async () => {
     const components = listComponents().map(component => {
       return `- ${component.name}`
@@ -120,6 +121,7 @@ server.registerTool(
     inputSchema: {
       name: z.string().describe('The name of the component to retrieve'),
     },
+    annotations: {readOnlyHint: true},
   },
   async ({name}) => {
     const components = listComponents()
@@ -166,6 +168,7 @@ server.registerTool(
     inputSchema: {
       name: z.string().describe('The name of the component to retrieve'),
     },
+    annotations: {readOnlyHint: true},
   },
   async ({name}) => {
     const components = listComponents()
@@ -226,6 +229,7 @@ server.registerTool(
     inputSchema: {
       name: z.string().describe('The name of the component to retrieve'),
     },
+    annotations: {readOnlyHint: true},
   },
   async ({name}) => {
     const components = listComponents()
@@ -298,6 +302,7 @@ server.registerTool(
     inputSchema: {
       name: z.string().describe('The name of the component to retrieve'),
     },
+    annotations: {readOnlyHint: true},
   },
   async ({name}) => {
     const components = listComponents()
@@ -367,7 +372,7 @@ ${text}`,
 // -----------------------------------------------------------------------------
 server.registerTool(
   'list_patterns',
-  {description: 'List all of the patterns available from Primer React'},
+  {description: 'List all of the patterns available from Primer React', annotations: {readOnlyHint: true}},
   async () => {
     const patterns = listPatterns().map(pattern => {
       return `- ${pattern.name}`
@@ -392,6 +397,7 @@ server.registerTool(
     inputSchema: {
       name: z.string().describe('The name of the pattern to retrieve'),
     },
+    annotations: {readOnlyHint: true},
   },
   async ({name}) => {
     const patterns = listPatterns()
@@ -469,6 +475,7 @@ server.registerTool(
         .default(15)
         .describe('Maximum results to return to stay within context limits'),
     },
+    annotations: {readOnlyHint: true},
   },
   async ({query, group, limit}) => {
     // Resolve group via aliases
@@ -566,6 +573,7 @@ server.registerTool(
     inputSchema: {
       groups: z.array(z.string()).describe('Array of group names (e.g., ["overlay", "shadow", "focus"])'),
     },
+    annotations: {readOnlyHint: true},
   },
   async ({groups}) => {
     // Normalize and resolve aliases
@@ -608,6 +616,7 @@ server.registerTool(
   {
     description:
       'CRITICAL: CALL THIS FIRST. Provides the logic matrix and the list of valid group names. You cannot search accurately without this map.',
+    annotations: {readOnlyHint: true},
   },
   async () => {
     const groups = listTokenGroups()
@@ -631,6 +640,7 @@ server.registerTool(
   {
     description:
       'Provides "Golden Example" CSS for core patterns: Button (Interactions) and Stack (Layout). Use this to understand how to apply the Logic Matrix, Motion, and Spacing scales.',
+    annotations: {readOnlyHint: true},
   },
   async () => {
     const customPatterns = getTokenUsagePatternsText()
@@ -659,6 +669,7 @@ server.registerTool(
     description:
       'REQUIRED FINAL STEP. Use this to validate your CSS. You cannot complete a task involving CSS without a successful run of this tool.',
     inputSchema: {css: z.string()},
+    annotations: {readOnlyHint: true},
   },
   async ({css}) => {
     try {
@@ -694,7 +705,7 @@ server.registerTool(
 // -----------------------------------------------------------------------------
 server.registerTool(
   'get_color_usage',
-  {description: 'Get the guidelines for how to apply color to a user interface'},
+  {description: 'Get the guidelines for how to apply color to a user interface', annotations: {readOnlyHint: true}},
   async () => {
     const url = new URL(`/product/getting-started/foundations/color-usage`, 'https://primer.style')
     const response = await fetch(url)
@@ -732,7 +743,10 @@ server.registerTool(
 
 server.registerTool(
   'get_typography_usage',
-  {description: 'Get the guidelines for how to apply typography to a user interface'},
+  {
+    description: 'Get the guidelines for how to apply typography to a user interface',
+    annotations: {readOnlyHint: true},
+  },
   async () => {
     const url = new URL(`/product/getting-started/foundations/typography`, 'https://primer.style')
     const response = await fetch(url)
@@ -773,7 +787,10 @@ server.registerTool(
 // -----------------------------------------------------------------------------
 server.registerTool(
   'list_icons',
-  {description: 'List all of the icons (octicons) available from Primer Octicons React'},
+  {
+    description: 'List all of the icons (octicons) available from Primer Octicons React',
+    annotations: {readOnlyHint: true},
+  },
   async () => {
     const icons = listIcons().map(icon => {
       const keywords = icon.keywords.map(keyword => {
@@ -808,6 +825,7 @@ server.registerTool(
       name: z.string().describe('The name of the icon to retrieve'),
       size: z.string().optional().describe('The size of the icon to retrieve, e.g. "16"').default('16'),
     },
+    annotations: {readOnlyHint: true},
   },
   async ({name, size}) => {
     const icons = listIcons()
@@ -865,7 +883,10 @@ ${text}`,
 // -----------------------------------------------------------------------------
 server.registerTool(
   'primer_coding_guidelines',
-  {description: 'Get the guidelines when writing code that uses Primer or for UI code that you are creating'},
+  {
+    description: 'Get the guidelines when writing code that uses Primer or for UI code that you are creating',
+    annotations: {readOnlyHint: true},
+  },
   async () => {
     return {
       content: [
@@ -922,6 +943,7 @@ server.registerTool(
       alt: z.string().describe('The alt text of the image being evaluated'),
       image: z.string().describe('The image URL or file path being evaluated'),
     },
+    annotations: {readOnlyHint: true},
   },
   async ({surroundingText, alt, image}) => {
     // Call the LLM through MCP sampling