@czi-sds/mcp 0.15.0 → 0.17.0

package/dist/stdio.js

@@ -1,242 +1,189 @@
 #!/usr/bin/env node
-import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
-import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
-import { z } from 'zod';
-import fs, { readFileSync, existsSync } from 'fs';
-import path, { dirname as dirname$1, join } from 'path';
-import { fileURLToPath } from 'url';
-
-var server = new McpServer({
-  name: "sds-mcp",
-  version: "0.1.0",
-  capabilities: {
-    prompts: {},
-    resources: {
-      subscribe: true,
-      listChanged: true
-    },
-    tools: {}
-  }
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+import { z } from "zod";
+import fs, { existsSync, readFileSync } from "fs";
+import path, { dirname, join } from "path";
+import { fileURLToPath } from "url";
+//#region src/server.ts
+const server = new McpServer({
+	name: "sds-mcp",
+	version: "0.1.0",
+	capabilities: {
+		prompts: {},
+		resources: {
+			subscribe: true,
+			listChanged: true
+		},
+		tools: {}
+	}
 });
-var filename = fileURLToPath(import.meta.url);
-var dirname = path.dirname(filename);
+//#endregion
+//#region src/lib/fetch.ts
+const filename = fileURLToPath(import.meta.url);
+const dirname$1 = path.dirname(filename);
+/**
+* Locates a file under `data/`. The server runs both from source via tsx and
+* from the bundle in `dist/`, which sit at different depths, and may also be
+* started from the package root.
+*/
+function resolveDataPath(relativePath) {
+	return [
+		path.join(dirname$1, "../../data", relativePath),
+		path.join(dirname$1, "../data", relativePath),
+		path.join(process.cwd(), "data", relativePath)
+	].find((candidate) => fs.existsSync(candidate)) ?? null;
+}
+function readDataFile(relativePath, missingHint) {
+	const dataPath = resolveDataPath(relativePath);
+	if (!dataPath) throw new Error(`${relativePath} not found in any expected location. ${missingHint}`);
+	return fs.readFileSync(dataPath, "utf-8");
+}
+/**
+* Gets all component names from both packages
+*/
 async function getAllComponentNames() {
-  try {
-    const possiblePaths = [
-      path.join(dirname, "../../data/component-list.json"),
-      // From src/lib in dev
-      path.join(dirname, "../data/component-list.json"),
-      // From dist in prod
-      path.join(process.cwd(), "data/component-list.json")
-      // From current working directory
-    ];
-    let dataPath = "";
-    for (const p of possiblePaths) {
-      if (fs.existsSync(p)) {
-        dataPath = p;
-        break;
-      }
-    }
-    if (!dataPath) {
-      throw new Error(
-        "Component list not found in any expected location. Please run 'yarn generate:components-list' first."
-      );
-    }
-    const fileContent = fs.readFileSync(dataPath, "utf-8");
-    const componentList = JSON.parse(fileContent);
-    return componentList;
-  } catch (error) {
-    throw new Error(
-      `Failed to load component list: ${error instanceof Error ? error.message : `Unknown error ${error}`}`
-    );
-  }
+	try {
+		return JSON.parse(readDataFile("component-list.json", "Please run 'yarn generate:components-list' first."));
+	} catch (error) {
+		throw new Error(`Failed to load component list: ${error instanceof Error ? error.message : `Unknown error ${error}`}`);
+	}
 }
 async function fetchComponentProps(component) {
-  try {
-    const propsPaths = [
-      path.join(dirname, `../../data/component-props/${component}.json`),
-      // From src/lib in dev
-      path.join(dirname, `../data/component-props/${component}.json`),
-      // From dist in prod
-      path.join(process.cwd(), `data/component-props/${component}.json`)
-      // From current working directory
-    ];
-    let propsPath = "";
-    for (const p of propsPaths) {
-      if (fs.existsSync(p)) {
-        propsPath = p;
-        break;
-      }
-    }
-    if (!propsPath) {
-      return {
-        [component]: {
-          message: "Props information not available for this component. Run 'yarn generate:component-props' to generate props data.",
-          props: {}
-        }
-      };
-    }
-    const fileContent = fs.readFileSync(propsPath, "utf-8");
-    return JSON.parse(fileContent);
-  } catch (error) {
-    throw new Error(
-      `Failed to load props for ${component}: ${error instanceof Error ? error.message : "Unknown error"}`
-    );
-  }
+	try {
+		const propsPath = resolveDataPath(`component-props/${component}.json`);
+		if (!propsPath) return { [component]: {
+			message: "Props information not available for this component. Run 'yarn generate:component-props' to generate props data.",
+			props: {}
+		} };
+		return JSON.parse(fs.readFileSync(propsPath, "utf-8"));
+	} catch (error) {
+		throw new Error(`Failed to load props for ${component}: ${error instanceof Error ? error.message : "Unknown error"}`);
+	}
 }
+/**
+* Gets the index of components that have generated documentation
+*/
+async function getComponentDocsIndex() {
+	try {
+		return JSON.parse(readDataFile("component-docs/index.json", "Please run 'yarn generate:component-docs' first."));
+	} catch (error) {
+		throw new Error(`Failed to load component docs index: ${error instanceof Error ? error.message : `Unknown error ${error}`}`);
+	}
+}
+/**
+* Fetches the generated documentation markdown for a specific component
+*/
+async function fetchComponentDocs(file) {
+	try {
+		return readDataFile(`component-docs/${file}`, "Please run 'yarn generate:component-docs' first.");
+	} catch (error) {
+		throw new Error(`Failed to load documentation from ${file}: ${error instanceof Error ? error.message : "Unknown error"}`);
+	}
+}
+/**
+* Gets all component names from both packages
+*/
 async function fetchTailwindTokens() {
-  try {
-    const possiblePaths = [
-      path.join(dirname, "../../data/tailwind.json"),
-      // From src/lib in dev
-      path.join(dirname, "../data/tailwind.json"),
-      // From dist in prod
-      path.join(process.cwd(), "data/tailwind.json")
-      // From current working directory
-    ];
-    let dataPath = "";
-    for (const p of possiblePaths) {
-      if (fs.existsSync(p)) {
-        dataPath = p;
-        break;
-      }
-    }
-    if (!dataPath) {
-      throw new Error(
-        "Component list not found in any expected location. Please run 'yarn generate:tailwind-tokens' first."
-      );
-    }
-    const fileContent = fs.readFileSync(dataPath, "utf-8");
-    const tailwindTokens = JSON.parse(fileContent);
-    return tailwindTokens;
-  } catch (error) {
-    throw new Error(
-      `Failed to load tailwind tokens: ${error instanceof Error ? error.message : `Unknown error ${error}`}`
-    );
-  }
+	try {
+		return JSON.parse(readDataFile("tailwind.json", "Please run 'yarn generate:tailwind-tokens' first."));
+	} catch (error) {
+		throw new Error(`Failed to load tailwind tokens: ${error instanceof Error ? error.message : `Unknown error ${error}`}`);
+	}
 }
-
-// src/tools/get-component-props.ts
-var getComponentPropsTool = {
-  name: "get_component_props",
-  description: "Get detailed properties of a specific SDS component. This tool retrieves the properties, attributes, design related props for a component, like sdsStyle, sdsType, sdsSize, etc. and configuration options available for a given SDS component.",
-  async ctx() {
-    try {
-      const componentList = await getAllComponentNames();
-      return {
-        componentList: [
-          ...componentList.components,
-          ...componentList["data-viz"]
-        ]
-      };
-    } catch (error) {
-      throw new Error(
-        `Failed to initialize component props tool: ${error instanceof Error ? error.message : "Unknown error"}`
-      );
-    }
-  },
-  exec(server2, { ctx, name, description }) {
-    server2.tool(
-      name,
-      description,
-      {
-        component: z.enum(ctx.componentList).describe("The name of the SDS component to get properties for")
-      },
-      async ({ component }) => {
-        try {
-          const json = await fetchComponentProps(component);
-          return {
-            content: [
-              {
-                type: "text",
-                text: JSON.stringify(json)
-              }
-            ]
-          };
-        } catch (error) {
-          return {
-            content: [
-              {
-                type: "text",
-                text: `Failed to get component props for ${component}: ${error instanceof Error ? error.message : "Unknown error"}`
-              }
-            ]
-          };
-        }
-      }
-    );
-  }
+//#endregion
+//#region src/tools/get-component-props.ts
+const getComponentPropsTool = {
+	name: "get_component_props",
+	description: "Get detailed properties of a specific SDS component. This tool retrieves the properties, attributes, design related props for a component, like sdsStyle, sdsType, sdsSize, etc. and configuration options available for a given SDS component.",
+	async ctx() {
+		try {
+			const componentList = await getAllComponentNames();
+			return { componentList: [...componentList.components, ...componentList["data-viz"]] };
+		} catch (error) {
+			throw new Error(`Failed to initialize component props tool: ${error instanceof Error ? error.message : "Unknown error"}`);
+		}
+	},
+	exec(server, { ctx, name, description }) {
+		server.tool(name, description, { component: z.enum(ctx.componentList).describe("The name of the SDS component to get properties for") }, async ({ component }) => {
+			try {
+				const json = await fetchComponentProps(component);
+				return { content: [{
+					type: "text",
+					text: JSON.stringify(json)
+				}] };
+			} catch (error) {
+				return { content: [{
+					type: "text",
+					text: `Failed to get component props for ${component}: ${error instanceof Error ? error.message : "Unknown error"}`
+				}] };
+			}
+		});
+	}
 };
-
-// src/tools/list-components.ts
-var listComponentsTool = {
-  name: "list_components",
-  description: "List all available components in SDS. This tool retrieves the names of all SDS components from both the @czi-sds/components package and the @czi-sds/data-viz package.",
-  async ctx() {
-    try {
-      const componentList = await getAllComponentNames();
-      return { componentList };
-    } catch (error) {
-      throw new Error(
-        `Failed to initialize list components tool: ${error instanceof Error ? error.message : "Unknown error"}`
-      );
-    }
-  },
-  exec(server2, { ctx, name, description }) {
-    server2.tool(name, description, {}, async () => {
-      return {
-        content: [
-          {
-            type: "text",
-            text: JSON.stringify(ctx.componentList, null, 2)
-          }
-        ]
-      };
-    });
-  }
+//#endregion
+//#region src/tools/list-components.ts
+const listComponentsTool = {
+	name: "list_components",
+	description: "List all available components in SDS. This tool retrieves the names of all SDS components from both the @czi-sds/components package and the @czi-sds/data-viz package.",
+	async ctx() {
+		try {
+			return { componentList: await getAllComponentNames() };
+		} catch (error) {
+			throw new Error(`Failed to initialize list components tool: ${error instanceof Error ? error.message : "Unknown error"}`);
+		}
+	},
+	exec(server, { ctx, name, description }) {
+		server.tool(name, description, {}, async () => {
+			return { content: [{
+				type: "text",
+				text: JSON.stringify(ctx.componentList, null, 2)
+			}] };
+		});
+	}
 };
-
-// src/lib/tailwind-guidance.ts
-var TAILWIND_TOKEN_GUIDANCE = {
-  colors: {
-    category: "Colors",
-    description: "Theme-aware color tokens support both light and dark modes. Both modes follow the same token name structure: use light-token-name for light mode colors and dark:dark-token-name for dark mode colors.",
-    prefixes: [
-      "bg-",
-      "border-",
-      "divide-",
-      "outline-",
-      "ring-",
-      "ring-offset-",
-      "text-",
-      "placeholder-",
-      "caret-",
-      "decoration-",
-      "accent-",
-      "shadow-",
-      "fill-",
-      "stroke-",
-      "from-",
-      "via-",
-      "to-"
-    ],
-    examples: [
-      {
-        description: "Basic text and background colors",
-        code: `<div className="bg-light-sds-color-semantic-base-background-primary dark:bg-dark-sds-color-semantic-base-background-primary text-light-sds-color-semantic-base-text-primary dark:text-dark-sds-color-semantic-base-text-primary">
+//#endregion
+//#region src/lib/tailwind-guidance.ts
+const TAILWIND_TOKEN_GUIDANCE = {
+	colors: {
+		category: "Colors",
+		description: "Theme-aware color tokens support both light and dark modes. Both modes follow the same token name structure: use light-token-name for light mode colors and dark:dark-token-name for dark mode colors.",
+		prefixes: [
+			"bg-",
+			"border-",
+			"divide-",
+			"outline-",
+			"ring-",
+			"ring-offset-",
+			"text-",
+			"placeholder-",
+			"caret-",
+			"decoration-",
+			"accent-",
+			"shadow-",
+			"fill-",
+			"stroke-",
+			"from-",
+			"via-",
+			"to-"
+		],
+		examples: [
+			{
+				description: "Basic text and background colors",
+				code: `<div className="bg-light-sds-color-semantic-base-background-primary dark:bg-dark-sds-color-semantic-base-background-primary text-light-sds-color-semantic-base-text-primary dark:text-dark-sds-color-semantic-base-text-primary">
   Content with semantic colors
 </div>`
-      },
-      {
-        description: "Dark mode with hover states",
-        code: `<button className="bg-light-sds-color-semantic-accent-fill-primary dark:bg-dark-sds-color-semantic-accent-fill-primary
+			},
+			{
+				description: "Dark mode with hover states",
+				code: `<button className="bg-light-sds-color-semantic-accent-fill-primary dark:bg-dark-sds-color-semantic-accent-fill-primary
         hover:bg-light-sds-color-semantic-accent-fill-hover dark:hover:bg-dark-sds-color-semantic-accent-fill-hover">
   Click me
 </button>`
-      },
-      {
-        description: "Border and focus states",
-        code: `<input className="
+			},
+			{
+				description: "Border and focus states",
+				code: `<input className="
   border-light-sds-color-semantic-base-border-primary
   hover:border-light-sds-color-semantic-base-border-primary-hover
   focus:border-light-sds-color-semantic-base-border-primary-pressed
@@ -244,21 +191,22 @@ var TAILWIND_TOKEN_GUIDANCE = {
   dark:hover:border-dark-sds-color-semantic-base-border-primary-hover
   dark:focus:border-dark-sds-color-semantic-base-border-primary-pressed
 "/>`
-      }
-    ],
-    tips: [
-      "Always use semantic colors (e.g., 'bg-light-sds-color-semantic-base-background-primary dark:bg-dark-sds-color-semantic-base-background-primary') over primitive colors when possible",
-      "Include both light and dark variants for proper theme support"
-    ]
-  },
-  typography: {
-    category: "Typography",
-    description: "Complete text styling presets including font, size, weight, and spacing",
-    prefixes: ["font-", "text-", "leading-", "tracking-"],
-    examples: [
-      {
-        description: "Typography presets (recommended). SDS typography tokens come in narrow and wide variants: use token-narrow on screens smaller than md, and token-wide on md and up.",
-        code: `<!-- Use typography tokens for complete text styling -->
+			}
+		],
+		tips: ["Always use semantic colors (e.g., 'bg-light-sds-color-semantic-base-background-primary dark:bg-dark-sds-color-semantic-base-background-primary') over primitive colors when possible", "Include both light and dark variants for proper theme support"]
+	},
+	typography: {
+		category: "Typography",
+		description: "Complete text styling presets including font, size, weight, and spacing",
+		prefixes: [
+			"font-",
+			"text-",
+			"leading-",
+			"tracking-"
+		],
+		examples: [{
+			description: "Typography presets (recommended). SDS typography tokens come in narrow and wide variants: use token-narrow on screens smaller than md, and token-wide on md and up.",
+			code: `<!-- Use typography tokens for complete text styling -->
 <h1 className="prose-sds-title-l-700-wide">Title</h1>     
 <h1 className="prose-sds-header-xl-600-wide">Heading</h1>
 <p className="prose-sds-body-m-500-wide">Body text</p>
@@ -266,10 +214,9 @@ var TAILWIND_TOKEN_GUIDANCE = {
 <span className="prose-sds-tabular-xxs-600-wide">Tabular Numbers</span>
 <span className="prose-sds-code-s-500-wide">Code</span>
 <span className="prose-sds-link-l-500-wide">Link style</span>`
-      },
-      {
-        description: "Individual typography properties",
-        code: `<!-- Or use individual properties when needed -->
+		}, {
+			description: "Individual typography properties",
+			code: `<!-- Or use individual properties when needed -->
 <p className="
   font-sds-body
   text-sds-body-m-400-wide
@@ -278,48 +225,47 @@ var TAILWIND_TOKEN_GUIDANCE = {
 ">
   Custom styled text
 </p>`
-      }
-    ],
-    tips: [
-      "Use 'narrow' variants for mobile/compact layouts",
-      "Use 'wide' variants for desktop/spacious layouts",
-      "Font weights: 400 (regular), 500 (medium), 600 (semibold), 700 (bold)"
-    ]
-  },
-  spacing: {
-    category: "Spacing",
-    description: "Consistent spacing scale for padding, margin, and gaps",
-    prefixes: [
-      "p-",
-      "px-",
-      "py-",
-      "pt-",
-      "pr-",
-      "pb-",
-      "pl-",
-      "m-",
-      "mx-",
-      "my-",
-      "mt-",
-      "mr-",
-      "mb-",
-      "ml-",
-      "gap-",
-      "gap-x-",
-      "gap-y-",
-      "space-x-",
-      "space-y-"
-    ],
-    examples: [
-      {
-        description: "Padding and margin",
-        code: `<div className="p-sds-m mx-sds-l my-sds-s">
+		}],
+		tips: [
+			"Use 'narrow' variants for mobile/compact layouts",
+			"Use 'wide' variants for desktop/spacious layouts",
+			"Font weights: 400 (regular), 500 (medium), 600 (semibold), 700 (bold)"
+		]
+	},
+	spacing: {
+		category: "Spacing",
+		description: "Consistent spacing scale for padding, margin, and gaps",
+		prefixes: [
+			"p-",
+			"px-",
+			"py-",
+			"pt-",
+			"pr-",
+			"pb-",
+			"pl-",
+			"m-",
+			"mx-",
+			"my-",
+			"mt-",
+			"mr-",
+			"mb-",
+			"ml-",
+			"gap-",
+			"gap-x-",
+			"gap-y-",
+			"space-x-",
+			"space-y-"
+		],
+		examples: [
+			{
+				description: "Padding and margin",
+				code: `<div className="p-sds-m mx-sds-l my-sds-s">
   Content with medium padding and different margins
 </div>`
-      },
-      {
-        description: "Flexbox and grid gaps",
-        code: `<div className="flex gap-sds-m">
+			},
+			{
+				description: "Flexbox and grid gaps",
+				code: `<div className="flex gap-sds-m">
   <div>Item 1</div>
   <div>Item 2</div>
 </div>
@@ -327,72 +273,71 @@ var TAILWIND_TOKEN_GUIDANCE = {
 <div className="grid grid-cols-3 gap-sds-l">
   <div>Grid item</div>
 </div>`
-      },
-      {
-        description: "Negative margins for overlapping",
-        code: `<div className="-mt-sds-s">
+			},
+			{
+				description: "Negative margins for overlapping",
+				code: `<div className="-mt-sds-s">
   Overlapping element
 </div>`
-      }
-    ],
-    tips: [
-      "Scale: sds-s (small), sds-default (default), sds-m (medium), sds-l (large), sds-xl (extra large)",
-      "Use consistent spacing throughout your component",
-      "Combine with responsive prefixes: sm:p-sds-m lg:p-sds-l"
-    ]
-  },
-  borderRadius: {
-    category: "Border Radius",
-    description: "Corner radius values for rounded elements",
-    prefixes: [
-      "rounded-",
-      "rounded-t-",
-      "rounded-r-",
-      "rounded-b-",
-      "rounded-l-"
-    ],
-    examples: [
-      {
-        description: "Basic rounded corners",
-        code: `<div className="rounded-sds-default">
+			}
+		],
+		tips: [
+			"Scale: sds-s (small), sds-default (default), sds-m (medium), sds-l (large), sds-xl (extra large)",
+			"Use consistent spacing throughout your component",
+			"Combine with responsive prefixes: sm:p-sds-m lg:p-sds-l"
+		]
+	},
+	borderRadius: {
+		category: "Border Radius",
+		description: "Corner radius values for rounded elements",
+		prefixes: [
+			"rounded-",
+			"rounded-t-",
+			"rounded-r-",
+			"rounded-b-",
+			"rounded-l-"
+		],
+		examples: [{
+			description: "Basic rounded corners",
+			code: `<div className="rounded-sds-default">
   Standard rounded corners
 </div>
 
 <button className="rounded-sds-m">
   More rounded button
 </button>`
-      },
-      {
-        description: "Directional radius",
-        code: `<div className="rounded-t-sds-l rounded-b-none">
+		}, {
+			description: "Directional radius",
+			code: `<div className="rounded-t-sds-l rounded-b-none">
   Only top corners rounded
 </div>`
-      }
-    ],
-    tips: [
-      "Use sds-default for most UI elements",
-      "Larger values (sds-l, sds-xl) for prominent elements",
-      "Combine with borders: border rounded-sds-m"
-    ]
-  },
-  boxShadow: {
-    category: "Box Shadow",
-    description: "Elevation shadows for depth and hierarchy",
-    prefixes: ["shadow-", "hover:shadow-", "focus:shadow-"],
-    examples: [
-      {
-        description: "Basic shadows",
-        code: `<div className="shadow-sds-s">
+		}],
+		tips: [
+			"Use sds-default for most UI elements",
+			"Larger values (sds-l, sds-xl) for prominent elements",
+			"Combine with borders: border rounded-sds-m"
+		]
+	},
+	boxShadow: {
+		category: "Box Shadow",
+		description: "Elevation shadows for depth and hierarchy",
+		prefixes: [
+			"shadow-",
+			"hover:shadow-",
+			"focus:shadow-"
+		],
+		examples: [{
+			description: "Basic shadows",
+			code: `<div className="shadow-sds-s">
   Subtle shadow
 </div>
 
 <div className="shadow-sds-m">
   Medium elevation
 </div>`
-      },
-      {
-        description: "Interactive shadows",
-        code: `<button className="
+		}, {
+			description: "Interactive shadows",
+			code: `<button className="
   shadow-sds-s
   hover:shadow-sds-m
   active:shadow-sds-xs
@@ -400,18 +345,16 @@ var TAILWIND_TOKEN_GUIDANCE = {
 ">
   Interactive element
 </button>`
-      }
-    ],
-    tips: [
-      "Use smaller shadows (sds-xs, sds-s) for subtle depth",
-      "Use larger shadows (sds-l, sds-xl) for modals and popovers",
-      "Combine with hover states for interactive feedback"
-    ]
-  }
+		}],
+		tips: [
+			"Use smaller shadows (sds-xs, sds-s) for subtle depth",
+			"Use larger shadows (sds-l, sds-xl) for modals and popovers",
+			"Combine with hover states for interactive feedback"
+		]
+	}
 };
 function getTokenGuidance(category) {
-  if (!category || category === "all") {
-    return `SDS Design System Tokens for Tailwind CSS
+	if (!category || category === "all") return `SDS Design System Tokens for Tailwind CSS
 
 The Science Design System provides a comprehensive set of design tokens that map directly to Tailwind utilities.
 
@@ -438,450 +381,210 @@ typography: This category can be used for formatting typography in the tailwind.
 height, width, borderRadius, boxShadow, breakpoints: These categories can be used for formatting height, width, border radius, box shadow, and breakpoints in the tailwind.config.js file
 spacing: This category can be used for formatting spacing in the tailwind.config.js file
 colors: This category can be used for formatting colors in the tailwind.config.js file`;
-  }
-  const guidance = TAILWIND_TOKEN_GUIDANCE[category];
-  if (!guidance) {
-    return `Category "${category}" not found. Available categories: ${Object.keys(
-      TAILWIND_TOKEN_GUIDANCE
-    ).join(", ")}`;
-  }
-  let output = `## ${guidance.category} Tokens
-
-`;
-  output += `${guidance.description}
-
-`;
-  output += `**Tailwind Prefixes:** ${guidance.prefixes.join(", ")}
-
-`;
-  output += `### Examples:
-
-`;
-  guidance.examples.forEach((example, index) => {
-    output += `${index + 1}. **${example.description}**
-\`\`\`jsx
-${example.code}
-\`\`\`
-
-`;
-  });
-  if (guidance.tips && guidance.tips.length > 0) {
-    output += `### Tips:
-`;
-    guidance.tips.forEach((tip) => {
-      output += `- ${tip}
-`;
-    });
-  }
-  return output;
-}
-
-// src/tools/get-tailwind-tokens.ts
-var getTailwindTokensTool = {
-  name: "get_tailwind_tokens",
-  description: "Get all available Tailwind tokens from the SDS design system. Available design tokens include fontFamily, fontSize, fontVariantNumeric, letterSpacing, lineHeight, textDecoration, textTransform, typography, height, width, borderRadius, boxShadow, breakpoints, colors, spacing, and more.",
-  async ctx() {
-    try {
-      const tailwindTokens = await fetchTailwindTokens();
-      return { tailwindTokens };
-    } catch (error) {
-      throw new Error(
-        `Failed to initialize tailwind tokens tool: ${error instanceof Error ? error.message : "Unknown error"}`
-      );
-    }
-  },
-  exec(server2, { ctx, name, description }) {
-    server2.tool(
-      name,
-      description,
-      {
-        category: z.enum([
-          "all",
-          "fontFamily",
-          "fontSize",
-          "fontVariantNumeric",
-          "letterSpacing",
-          "lineHeight",
-          "textDecoration",
-          "textTransform",
-          "typography",
-          "height",
-          "width",
-          "borderRadius",
-          "boxShadow",
-          "breakpoints",
-          "colors",
-          "spacing"
-        ]).optional().describe(
-          "Optional category of tokens to retrieve. If not specified, returns all tokens."
-        )
-      },
-      async ({ category }) => {
-        try {
-          const tokens = ctx.tailwindTokens;
-          let result;
-          if (!category || category === "all") {
-            result = tokens;
-          } else {
-            result = tokens[category] || {};
-          }
-          const responseContent = [];
-          const guidance = getTokenGuidance(category);
-          responseContent.push({
-            type: "text",
-            text: guidance
-          });
-          responseContent.push({
-            type: "text",
-            text: JSON.stringify(result, null, 2)
-          });
-          return {
-            content: responseContent
-          };
-        } catch (error) {
-          return {
-            content: [
-              {
-                type: "text",
-                text: `Failed to get Tailwind tokens: ${error instanceof Error ? error.message : "Unknown error"}`
-              }
-            ]
-          };
-        }
-      }
-    );
-  }
-};
-var filename2 = fileURLToPath(import.meta.url);
-var dirname2 = path.dirname(filename2);
-function mapComponentToFile(componentName, exportedFiles) {
-  const componentToFileMap = {
-    // Button components
-    Button: "Buttons",
-    ButtonDropdown: "Buttons",
-    ButtonIcon: "Buttons",
-    ButtonToggle: "Buttons",
-    // Table components
-    TableHeader: "Table",
-    TableRow: "Table",
-    // Input components
-    InputCheckbox: "Control-Inputs",
-    InputRadio: "Control-Inputs",
-    InputToggle: "Control-Inputs",
-    InputText: "Field-Inputs",
-    InputDropdown: "Dropdown-Input",
-    InputSearch: "Search-Input",
-    InputSlider: "Control-Inputs",
-    // Dropdown components
-    Dropdown: "Dropdown-Menu",
-    DropdownMenu: "Dropdown-Menu",
-    // Content components
-    ContentCard: "Content-Card",
-    LoadingIndicator: "Loading-Indicator",
-    // Navigation components
-    NavigationFooter: "Navigation",
-    NavigationHeader: "Navigation",
-    NavigationJumpTo: "Navigation",
-    // Control components
-    SegmentedControl: "Segmented-Control",
-    // List and menu components
-    List: "Lists",
-    Menu: "Dropdown-Menu",
-    MenuItem: "Dropdown-Menu",
-    MenuSelect: "Dropdown-Menu",
-    // Tag components
-    Tag: "Tags",
-    TagFilter: "Tags",
-    // Tooltip components
-    Tooltip: "Tooltips",
-    TooltipCondensed: "Tooltips",
-    TooltipTable: "Tooltips",
-    // Table Cell components
-    CellBasic: "Table",
-    CellComponent: "Table",
-    CellHeader: "Table",
-    // Filter components
-    ComplexFilter: "Filters",
-    // Other components
-    Icon: "Icons",
-    Chip: "Tags",
-    // Chips are often similar to tags
-    Pagination: "Navigation"
-    // Pagination is often part of navigation
-  };
-  const mappedFile = componentToFileMap[componentName];
-  if (mappedFile && exportedFiles.includes(mappedFile)) {
-    return `${mappedFile}.md`;
-  }
-  if (exportedFiles.includes(componentName)) {
-    return `${componentName}.md`;
-  }
-  return null;
-}
-function getExportedFiles() {
-  try {
-    const possiblePaths = [
-      path.join(dirname2, "../../data/zeroheight-exports"),
-      // From src/lib in dev
-      path.join(dirname2, "../data/zeroheight-exports"),
-      // From dist in prod
-      path.join(process.cwd(), "data/zeroheight-exports")
-      // From current working directory
-    ];
-    let exportDir = "";
-    for (const p of possiblePaths) {
-      if (fs.existsSync(p)) {
-        exportDir = p;
-        break;
-      }
-    }
-    if (!exportDir) {
-      console.warn(
-        "Export directory not found in any expected location. Please run Zeroheight export first."
-      );
-      return [];
-    }
-    const files = fs.readdirSync(exportDir).filter((file) => file.endsWith(".md") && file !== "README.md").map((file) => file.replace(".md", ""));
-    return files;
-  } catch (error) {
-    console.warn("Could not read exported files:", error);
-    return [];
-  }
-}
-function getComponentsWithDocs(allComponents, exportedFiles) {
-  return allComponents.filter((component) => {
-    const mappedFile = mapComponentToFile(component, exportedFiles);
-    return mappedFile !== null;
-  });
+	const guidance = TAILWIND_TOKEN_GUIDANCE[category];
+	if (!guidance) return `Category "${category}" not found. Available categories: ${Object.keys(TAILWIND_TOKEN_GUIDANCE).join(", ")}`;
+	let output = `## ${guidance.category} Tokens\n\n`;
+	output += `${guidance.description}\n\n`;
+	output += `**Tailwind Prefixes:** ${guidance.prefixes.join(", ")}\n\n`;
+	output += `### Examples:\n\n`;
+	guidance.examples.forEach((example, index) => {
+		output += `${index + 1}. **${example.description}**\n\`\`\`jsx\n${example.code}\n\`\`\`\n\n`;
+	});
+	if (guidance.tips && guidance.tips.length > 0) {
+		output += `### Tips:\n`;
+		guidance.tips.forEach((tip) => {
+			output += `- ${tip}\n`;
+		});
+	}
+	return output;
 }
-var getComponentDocsTool = {
-  name: "get_component_docs",
-  description: "Get design system documentation for a specific component. Retrieves the corresponding Zeroheight documentation file for the given component name. Supports all SDS components and maps them to their appropriate documentation files.",
-  async ctx() {
-    try {
-      const componentList = await getAllComponentNames();
-      const allComponents = [
-        ...componentList.components,
-        ...componentList["data-viz"]
-      ];
-      const exportedFiles = getExportedFiles();
-      const componentsWithDocs = getComponentsWithDocs(
-        allComponents,
-        exportedFiles
-      );
-      return {
-        componentsWithDocs,
-        exportedFiles
-      };
-    } catch (error) {
-      throw new Error(
-        `Failed to initialize get component docs tool: ${error instanceof Error ? error.message : "Unknown error"}`
-      );
-    }
-  },
-  exec(server2, { ctx, name, description }) {
-    server2.tool(
-      name,
-      description,
-      {
-        component: z.enum(ctx.componentsWithDocs).describe("The name of the SDS component to get documentation for")
-      },
-      async ({ component }) => {
-        try {
-          const mappedFile = mapComponentToFile(component, ctx.exportedFiles);
-          if (!mappedFile) {
-            return {
-              content: [
-                {
-                  type: "text",
-                  text: `No documentation found for component '${component}'. This component may not have design system documentation available.`
-                }
-              ]
-            };
-          }
-          const possiblePaths = [
-            path.join(dirname2, "../../data/zeroheight-exports", mappedFile),
-            // From src/lib in dev
-            path.join(dirname2, "../data/zeroheight-exports", mappedFile),
-            // From dist in prod
-            path.join(process.cwd(), "data/zeroheight-exports", mappedFile)
-            // From current working directory
-          ];
-          let filePath = "";
-          for (const p of possiblePaths) {
-            if (fs.existsSync(p)) {
-              filePath = p;
-              break;
-            }
-          }
-          if (!filePath) {
-            throw new Error(`Documentation file ${mappedFile} not found`);
-          }
-          const documentation = fs.readFileSync(filePath, "utf8");
-          return {
-            content: [
-              {
-                type: "text",
-                text: `# Documentation for ${component}
-
-Source: ${mappedFile}
-
-${documentation}`
-              }
-            ]
-          };
-        } catch (error) {
-          return {
-            content: [
-              {
-                type: "text",
-                text: `Error reading documentation file for '${component}': ${error instanceof Error ? error.message : "Unknown error"}`
-              }
-            ]
-          };
-        }
-      }
-    );
-  }
-};
-
-// src/tools/index.ts
-var tools = [
-  getComponentPropsTool,
-  getComponentDocsTool,
-  listComponentsTool,
-  getTailwindTokensTool
+//#endregion
+//#region src/tools/index.ts
+const tools = [
+	getComponentPropsTool,
+	{
+		name: "get_component_docs",
+		description: "Get design system documentation for a specific SDS component. Returns the component's full documentation, including how it differs from the underlying MUI component, its props, and runnable code examples for each supported variation.",
+		async ctx() {
+			try {
+				const index = await getComponentDocsIndex();
+				return {
+					index,
+					documented: Object.keys(index)
+				};
+			} catch (error) {
+				throw new Error(`Failed to initialize get component docs tool: ${error instanceof Error ? error.message : "Unknown error"}`);
+			}
+		},
+		exec(server, { ctx, name, description }) {
+			server.tool(name, description, { component: z.enum(ctx.documented).describe("The name of the SDS component to get documentation for") }, async ({ component }) => {
+				try {
+					const entry = ctx.index[component];
+					if (!entry) return { content: [{
+						type: "text",
+						text: `No documentation found for component '${component}'. This component may not have design system documentation available.`
+					}] };
+					const documentation = await fetchComponentDocs(entry.file);
+					return { content: [{
+						type: "text",
+						text: `Package: ${entry.package}\nSource: ${entry.source}\n\n${documentation}`
+					}] };
+				} catch (error) {
+					return { content: [{
+						type: "text",
+						text: `Error reading documentation for '${component}': ${error instanceof Error ? error.message : "Unknown error"}`
+					}] };
+				}
+			});
+		}
+	},
+	listComponentsTool,
+	{
+		name: "get_tailwind_tokens",
+		description: "Get all available Tailwind tokens from the SDS design system. Available design tokens include fontFamily, fontSize, fontVariantNumeric, letterSpacing, lineHeight, textDecoration, textTransform, typography, height, width, borderRadius, boxShadow, breakpoints, colors, spacing, and more.",
+		async ctx() {
+			try {
+				return { tailwindTokens: await fetchTailwindTokens() };
+			} catch (error) {
+				throw new Error(`Failed to initialize tailwind tokens tool: ${error instanceof Error ? error.message : "Unknown error"}`);
+			}
+		},
+		exec(server, { ctx, name, description }) {
+			server.tool(name, description, { category: z.enum([
+				"all",
+				"fontFamily",
+				"fontSize",
+				"fontVariantNumeric",
+				"letterSpacing",
+				"lineHeight",
+				"textDecoration",
+				"textTransform",
+				"typography",
+				"height",
+				"width",
+				"borderRadius",
+				"boxShadow",
+				"breakpoints",
+				"colors",
+				"spacing"
+			]).optional().describe("Optional category of tokens to retrieve. If not specified, returns all tokens.") }, async ({ category }) => {
+				try {
+					const tokens = ctx.tailwindTokens;
+					let result;
+					if (!category || category === "all") result = tokens;
+					else result = tokens[category] || {};
+					const responseContent = [];
+					const guidance = getTokenGuidance(category);
+					responseContent.push({
+						type: "text",
+						text: guidance
+					});
+					responseContent.push({
+						type: "text",
+						text: JSON.stringify(result, null, 2)
+					});
+					return { content: responseContent };
+				} catch (error) {
+					return { content: [{
+						type: "text",
+						text: `Failed to get Tailwind tokens: ${error instanceof Error ? error.message : "Unknown error"}`
+					}] };
+				}
+			});
+		}
+	}
 ];
-var registeredToolCache = /* @__PURE__ */ new Map();
-var initializeTools = async (server2, config) => {
-  const enabledTools = tools.filter((tool) => !tool.disabled?.(config));
-  await Promise.all(
-    enabledTools.map(async (tool) => {
-      const toolCtx = await tool.ctx?.();
-      if (registeredToolCache.has(tool.name)) {
-        return;
-      }
-      registeredToolCache.set(tool.name, tool);
-      tool.exec(server2, {
-        config,
-        ctx: toolCtx,
-        description: tool.description,
-        name: tool.name
-      });
-    })
-  );
+const registeredToolCache = /* @__PURE__ */ new Map();
+const initializeTools = async (server, config) => {
+	const enabledTools = tools.filter((tool) => !tool.disabled?.(config));
+	await Promise.all(enabledTools.map(async (tool) => {
+		const toolCtx = await tool.ctx?.();
+		if (registeredToolCache.has(tool.name)) return;
+		registeredToolCache.set(tool.name, tool);
+		tool.exec(server, {
+			config,
+			ctx: toolCtx,
+			description: tool.description,
+			name: tool.name
+		});
+	}));
 };
-var FILENAME = fileURLToPath(import.meta.url);
-var DIRNAME = dirname$1(FILENAME);
-var MIME_TYPE_MARKDOWN = "text/markdown";
-var UNKNOWN_ERROR = "Unknown error";
+//#endregion
+//#region src/resources/index.ts
+const DIRNAME = dirname(fileURLToPath(import.meta.url));
+const MIME_TYPE_MARKDOWN = "text/markdown";
+const UNKNOWN_ERROR = "Unknown error";
+/**
+* Finds the resource file by trying multiple paths
+* to support both dev and production environments
+*/
 function findResourceFile(fileName) {
-  const possiblePaths = [
-    join(DIRNAME, "../../data/resources", fileName),
-    // From src/resources in dev
-    join(DIRNAME, "../data/resources", fileName),
-    // From dist/resources in prod
-    join(process.cwd(), "data/resources", fileName)
-    // From current working directory
-  ];
-  for (const p of possiblePaths) {
-    if (existsSync(p)) {
-      return p;
-    }
-  }
-  throw new Error(
-    `Resource file '${fileName}' not found in any expected location`
-  );
+	const possiblePaths = [
+		join(DIRNAME, "../../data/resources", fileName),
+		join(DIRNAME, "../data/resources", fileName),
+		join(process.cwd(), "data/resources", fileName)
+	];
+	for (const p of possiblePaths) if (existsSync(p)) return p;
+	throw new Error(`Resource file '${fileName}' not found in any expected location`);
 }
-function initializeResources(server2) {
-  server2.resource(
-    "Figma to Code Translation Rules",
-    "sds://rules/figma",
-    {
-      mimeType: MIME_TYPE_MARKDOWN,
-      description: "Rules for translating Figma designs to SDS code"
-    },
-    async () => {
-      try {
-        const filePath = findResourceFile("figma-rules.md");
-        const content = readFileSync(filePath, "utf-8");
-        return {
-          contents: [
-            {
-              uri: "sds://rules/figma",
-              mimeType: MIME_TYPE_MARKDOWN,
-              text: content
-            }
-          ]
-        };
-      } catch (err) {
-        const message = err instanceof Error ? err.message : UNKNOWN_ERROR;
-        throw new Error("Failed to read Figma rules: " + message);
-      }
-    }
-  );
-  server2.resource(
-    "SDS Component Usage Rules",
-    "sds://rules/components",
-    {
-      mimeType: MIME_TYPE_MARKDOWN,
-      description: "Guidelines for using SDS components correctly"
-    },
-    async () => {
-      try {
-        const filePath = findResourceFile("sds-component-rules.md");
-        const content = readFileSync(filePath, "utf-8");
-        return {
-          contents: [
-            {
-              uri: "sds://rules/components",
-              mimeType: MIME_TYPE_MARKDOWN,
-              text: content
-            }
-          ]
-        };
-      } catch (err) {
-        const message = err instanceof Error ? err.message : UNKNOWN_ERROR;
-        throw new Error("Failed to read component rules: " + message);
-      }
-    }
-  );
-  server2.resource(
-    "Zeroheight Documentation Rules",
-    "sds://rules/zeroheight",
-    {
-      mimeType: MIME_TYPE_MARKDOWN,
-      description: "Rules for following Zeroheight documentation"
-    },
-    async () => {
-      try {
-        const filePath = findResourceFile("zeroheight-rules.md");
-        const content = readFileSync(filePath, "utf-8");
-        return {
-          contents: [
-            {
-              uri: "sds://rules/zeroheight",
-              mimeType: MIME_TYPE_MARKDOWN,
-              text: content
-            }
-          ]
-        };
-      } catch (err) {
-        const message = err instanceof Error ? err.message : UNKNOWN_ERROR;
-        throw new Error("Failed to read Zeroheight rules: " + message);
-      }
-    }
-  );
+function initializeResources(server) {
+	server.resource("Figma to Code Translation Rules", "sds://rules/figma", {
+		mimeType: MIME_TYPE_MARKDOWN,
+		description: "Rules for translating Figma designs to SDS code"
+	}, async () => {
+		try {
+			return { contents: [{
+				uri: "sds://rules/figma",
+				mimeType: MIME_TYPE_MARKDOWN,
+				text: readFileSync(findResourceFile("figma-rules.md"), "utf-8")
+			}] };
+		} catch (err) {
+			const message = err instanceof Error ? err.message : UNKNOWN_ERROR;
+			throw new Error("Failed to read Figma rules: " + message);
+		}
+	});
+	server.resource("SDS Component Usage Rules", "sds://rules/components", {
+		mimeType: MIME_TYPE_MARKDOWN,
+		description: "Guidelines for using SDS components correctly"
+	}, async () => {
+		try {
+			return { contents: [{
+				uri: "sds://rules/components",
+				mimeType: MIME_TYPE_MARKDOWN,
+				text: readFileSync(findResourceFile("sds-component-rules.md"), "utf-8")
+			}] };
+		} catch (err) {
+			const message = err instanceof Error ? err.message : UNKNOWN_ERROR;
+			throw new Error("Failed to read component rules: " + message);
+		}
+	});
+	server.resource("SDS Documentation Rules", "sds://rules/documentation", {
+		mimeType: MIME_TYPE_MARKDOWN,
+		description: "Rules for following the SDS component documentation"
+	}, async () => {
+		try {
+			return { contents: [{
+				uri: "sds://rules/documentation",
+				mimeType: MIME_TYPE_MARKDOWN,
+				text: readFileSync(findResourceFile("documentation-rules.md"), "utf-8")
+			}] };
+		} catch (err) {
+			const message = err instanceof Error ? err.message : UNKNOWN_ERROR;
+			throw new Error("Failed to read documentation rules: " + message);
+		}
+	});
 }
-
-// src/stdio.ts
+//#endregion
+//#region src/stdio.ts
 async function main() {
-  await initializeTools(server, {});
-  initializeResources(server);
-  const transport = new StdioServerTransport();
-  await server.connect(transport);
+	await initializeTools(server, {});
+	initializeResources(server);
+	const transport = new StdioServerTransport();
+	await server.connect(transport);
 }
 main().catch((error) => {
-  console.error("Fatal error in main():", error);
-  process.exit(1);
+	console.error("Fatal error in main():", error);
+	process.exit(1);
 });
+//#endregion
+export {};