@czi-sds/mcp 0.15.0 → 0.16.0

package/dist/stdio.js

@@ -1,242 +1,186 @@
 #!/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$1 = fileURLToPath(import.meta.url);
+const dirname$2 = path.dirname(filename$1);
+/**
+* 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 {
+		const possiblePaths = [
+			path.join(dirname$2, "../../data/component-list.json"),
+			path.join(dirname$2, "../data/component-list.json"),
+			path.join(process.cwd(), "data/component-list.json")
+		];
+		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");
+		return JSON.parse(fileContent);
+	} 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 propsPaths = [
+			path.join(dirname$2, `../../data/component-props/${component}.json`),
+			path.join(dirname$2, `../data/component-props/${component}.json`),
+			path.join(process.cwd(), `data/component-props/${component}.json`)
+		];
+		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"}`);
+	}
 }
+/**
+* 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 {
+		const possiblePaths = [
+			path.join(dirname$2, "../../data/tailwind.json"),
+			path.join(dirname$2, "../data/tailwind.json"),
+			path.join(process.cwd(), "data/tailwind.json")
+		];
+		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");
+		return JSON.parse(fileContent);
+	} 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 +188,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 +211,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 +222,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 +270,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 +342,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 +378,309 @@ 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;
+	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;
 }
-
-// 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"}`
-              }
-            ]
-          };
-        }
-      }
-    );
-  }
+//#endregion
+//#region src/tools/get-tailwind-tokens.ts
+const 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 {
+			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 filename2 = fileURLToPath(import.meta.url);
-var dirname2 = path.dirname(filename2);
+//#endregion
+//#region src/tools/get-component-docs.ts
+const filename = fileURLToPath(import.meta.url);
+const dirname$1 = path.dirname(filename);
+/**
+* Maps a component name to the corresponding Zeroheight file using manual mapping
+*/
 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;
+	const mappedFile = {
+		Button: "Buttons",
+		ButtonDropdown: "Buttons",
+		ButtonIcon: "Buttons",
+		ButtonToggle: "Buttons",
+		TableHeader: "Table",
+		TableRow: "Table",
+		InputCheckbox: "Control-Inputs",
+		InputRadio: "Control-Inputs",
+		InputToggle: "Control-Inputs",
+		InputText: "Field-Inputs",
+		InputDropdown: "Dropdown-Input",
+		InputSearch: "Search-Input",
+		InputSlider: "Control-Inputs",
+		Dropdown: "Dropdown-Menu",
+		DropdownMenu: "Dropdown-Menu",
+		ContentCard: "Content-Card",
+		LoadingIndicator: "Loading-Indicator",
+		NavigationFooter: "Navigation",
+		NavigationHeader: "Navigation",
+		NavigationJumpTo: "Navigation",
+		SegmentedControl: "Segmented-Control",
+		List: "Lists",
+		Menu: "Dropdown-Menu",
+		MenuItem: "Dropdown-Menu",
+		MenuSelect: "Dropdown-Menu",
+		Tag: "Tags",
+		TagFilter: "Tags",
+		Tooltip: "Tooltips",
+		TooltipCondensed: "Tooltips",
+		TooltipTable: "Tooltips",
+		CellBasic: "Table",
+		CellComponent: "Table",
+		CellHeader: "Table",
+		ComplexFilter: "Filters",
+		Icon: "Icons",
+		Chip: "Tags",
+		Pagination: "Navigation"
+	}[componentName];
+	if (mappedFile && exportedFiles.includes(mappedFile)) return `${mappedFile}.md`;
+	if (exportedFiles.includes(componentName)) return `${componentName}.md`;
+	return null;
 }
+/**
+* Get list of exported documentation files
+*/
 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 [];
-  }
+	try {
+		const possiblePaths = [
+			path.join(dirname$1, "../../data/zeroheight-exports"),
+			path.join(dirname$1, "../data/zeroheight-exports"),
+			path.join(process.cwd(), "data/zeroheight-exports")
+		];
+		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 [];
+		}
+		return fs.readdirSync(exportDir).filter((file) => file.endsWith(".md") && file !== "README.md").map((file) => file.replace(".md", ""));
+	} catch (error) {
+		console.warn("Could not read exported files:", error);
+		return [];
+	}
 }
+/**
+* Get list of components that have documentation available
+*/
 function getComponentsWithDocs(allComponents, exportedFiles) {
-  return allComponents.filter((component) => {
-    const mappedFile = mapComponentToFile(component, exportedFiles);
-    return mappedFile !== null;
-  });
+	return allComponents.filter((component) => {
+		return mapComponentToFile(component, exportedFiles) !== null;
+	});
 }
-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 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();
+				return {
+					componentsWithDocs: getComponentsWithDocs(allComponents, exportedFiles),
+					exportedFiles
+				};
+			} 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.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(dirname$1, "../../data/zeroheight-exports", mappedFile),
+						path.join(dirname$1, "../data/zeroheight-exports", mappedFile),
+						path.join(process.cwd(), "data/zeroheight-exports", mappedFile)
+					];
+					let filePath = "";
+					for (const p of possiblePaths) if (fs.existsSync(p)) {
+						filePath = p;
+						break;
+					}
+					if (!filePath) throw new Error(`Documentation file ${mappedFile} not found`);
+					return { content: [{
+						type: "text",
+						text: `# Documentation for ${component}\n\nSource: ${mappedFile}\n\n${fs.readFileSync(filePath, "utf8")}`
+					}] };
+				} catch (error) {
+					return { content: [{
+						type: "text",
+						text: `Error reading documentation file for '${component}': ${error instanceof Error ? error.message : "Unknown error"}`
+					}] };
+				}
+			});
+		}
+	},
+	listComponentsTool,
+	getTailwindTokensTool
 ];
-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("Zeroheight Documentation Rules", "sds://rules/zeroheight", {
+		mimeType: MIME_TYPE_MARKDOWN,
+		description: "Rules for following Zeroheight documentation"
+	}, async () => {
+		try {
+			return { contents: [{
+				uri: "sds://rules/zeroheight",
+				mimeType: MIME_TYPE_MARKDOWN,
+				text: readFileSync(findResourceFile("zeroheight-rules.md"), "utf-8")
+			}] };
+		} catch (err) {
+			const message = err instanceof Error ? err.message : UNKNOWN_ERROR;
+			throw new Error("Failed to read Zeroheight 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 {};