igniteui-theming 25.1.0 → 25.2.0

package/dist/mcp/tools/handlers/component-theme.js

@@ -1,29 +1,20 @@
-import { generateComponentTheme } from "../../generators/sass.js";
-import "../../knowledge/colors.js";
-import { hasVariants, getVariants, isComponentAvailable, getComponentPlatformAvailability, getComponentSelector } from "../../knowledge/component-metadata.js";
-import { getComponentTheme, searchComponents, COMPONENT_NAMES, validateTokens } from "../../knowledge/component-themes.js";
-import "../../knowledge/custom-palettes.js";
-import "../../utils/types.js";
-import "../../knowledge/palettes.js";
+import { getComponentPlatformAvailability, getComponentSelector, getVariants, hasVariants, isComponentAvailable } from "../../knowledge/component-metadata.js";
+import { COMPONENT_NAMES, getComponentTheme, searchComponents, validateTokens } from "../../knowledge/component-themes.js";
 import { PLATFORM_METADATA } from "../../knowledge/platforms/index.js";
+import "../../knowledge/index.js";
+import { generateComponentTheme } from "../../generators/sass.js";
+//#region src/tools/handlers/component-theme.ts
+/**
+* Handler for create_component_theme tool.
+* Generates Sass code to customize a component's appearance.
+*/
 async function handleCreateComponentTheme(params) {
-  const {
-    platform,
-    component,
-    tokens,
-    selector,
-    name,
-    output = "sass",
-    designSystem = "material",
-    variant = "light"
-  } = params;
-  const normalizedComponent = component.toLowerCase().trim();
-  if (!platform) {
-    return {
-      content: [
-        {
-          type: "text",
-          text: `**Error:** The \`platform\` parameter is required.
+	const { platform, component, tokens, selector, name, output = "sass", designSystem = "material", variant = "light" } = params;
+	const normalizedComponent = component.toLowerCase().trim();
+	if (!platform) return {
+		content: [{
+			type: "text",
+			text: `**Error:** The \`platform\` parameter is required.
 
 **Valid platforms:**
 - \`angular\` - Ignite UI for Angular
@@ -32,17 +23,13 @@ async function handleCreateComponentTheme(params) {
 - \`blazor\` - Ignite UI for Blazor
 
 Please specify which platform you're using to generate the correct variable prefixes and selectors.`
-        }
-      ],
-      isError: true
-    };
-  }
-  if (platform === "generic") {
-    return {
-      content: [
-        {
-          type: "text",
-          text: `**Error:** \`create_component_theme\` requires a specific Ignite UI product platform.
+		}],
+		isError: true
+	};
+	if (platform === "generic") return {
+		content: [{
+			type: "text",
+			text: `**Error:** \`create_component_theme\` requires a specific Ignite UI product platform.
 
 The \`"generic"\` platform is not supported for component theming because component selectors and variable prefixes are platform-specific and do not exist in generic mode.
 
@@ -51,37 +38,31 @@ The \`"generic"\` platform is not supported for component theming because compon
 - \`webcomponents\` - Ignite UI for Web Components
 - \`react\` - Ignite UI for React
 - \`blazor\` - Ignite UI for Blazor`
-        }
-      ],
-      isError: true
-    };
-  }
-  const theme = getComponentTheme(normalizedComponent);
-  if (!theme) {
-    const suggestions = searchComponents(normalizedComponent);
-    const componentList = suggestions.length > 0 ? suggestions.slice(0, 10) : COMPONENT_NAMES.slice(0, 15);
-    return {
-      content: [
-        {
-          type: "text",
-          text: `**Error:** Component "${component}" not found.
+		}],
+		isError: true
+	};
+	if (!getComponentTheme(normalizedComponent)) {
+		const suggestions = searchComponents(normalizedComponent);
+		const componentList = suggestions.length > 0 ? suggestions.slice(0, 10) : COMPONENT_NAMES.slice(0, 15);
+		return {
+			content: [{
+				type: "text",
+				text: `**Error:** Component "${component}" not found.
 
 ${suggestions.length > 0 ? "**Similar components:**" : "**Available components:**"}
 ${componentList.map((c) => `- ${c}`).join("\n")}
 
 **Tip:** Use \`get_component_design_tokens\` first to discover valid component names and their tokens.`
-        }
-      ],
-      isError: true
-    };
-  }
-  if (hasVariants(normalizedComponent)) {
-    const variants = getVariants(normalizedComponent);
-    return {
-      content: [
-        {
-          type: "text",
-          text: `**Error:** The \`${component}\` component has multiple variants and requires a specific variant for theming.
+			}],
+			isError: true
+		};
+	}
+	if (hasVariants(normalizedComponent)) {
+		const variants = getVariants(normalizedComponent);
+		return {
+			content: [{
+				type: "text",
+				text: `**Error:** The \`${component}\` component has multiple variants and requires a specific variant for theming.
 
 **Available variants:**
 ${variants.map((v) => `- \`${v}\``).join("\n")}
@@ -89,175 +70,132 @@ ${variants.map((v) => `- \`${v}\``).join("\n")}
 Please use \`create_component_theme\` with one of the specific variant names above.
 
 **Tip:** Use \`get_component_design_tokens\` with a specific variant (e.g., \`${variants[0]}\`) to see available tokens.`
-        }
-      ],
-      isError: true
-    };
-  }
-  if (platform) {
-    const isAvailable = isComponentAvailable(normalizedComponent, platform);
-    if (!isAvailable) {
-      const availability = getComponentPlatformAvailability(normalizedComponent);
-      const availablePlatforms = [];
-      if (availability?.angular) availablePlatforms.push("Angular");
-      if (availability?.webcomponents)
-        availablePlatforms.push("Web Components");
-      const error = `**Error:** The \`${component}\` component is not available on ${PLATFORM_METADATA[platform]?.name ?? platform}. ${availablePlatforms.length > 0 ? `It is available on: ${availablePlatforms.join(", ")}.` : ""}`;
-      return {
-        content: [{ type: "text", text: error }],
-        isError: true
-      };
-    }
-  }
-  const tokenNames = Object.keys(tokens);
-  if (tokenNames.length === 0) {
-    return {
-      content: [
-        {
-          type: "text",
-          text: `**Error:** No tokens provided. At least one token must be specified.
+			}],
+			isError: true
+		};
+	}
+	if (platform) {
+		if (!isComponentAvailable(normalizedComponent, platform)) {
+			const availability = getComponentPlatformAvailability(normalizedComponent);
+			const availablePlatforms = [];
+			if (availability?.angular) availablePlatforms.push("Angular");
+			if (availability?.webcomponents) availablePlatforms.push("Web Components");
+			return {
+				content: [{
+					type: "text",
+					text: `**Error:** The \`${component}\` component is not available on ${PLATFORM_METADATA[platform]?.name ?? platform}. ${availablePlatforms.length > 0 ? `It is available on: ${availablePlatforms.join(", ")}.` : ""}`
+				}],
+				isError: true
+			};
+		}
+	}
+	const tokenNames = Object.keys(tokens);
+	if (tokenNames.length === 0) return {
+		content: [{
+			type: "text",
+			text: `**Error:** No tokens provided. At least one token must be specified.
 
 Use \`get_component_design_tokens\` with component "${component}" to see available tokens.`
-        }
-      ],
-      isError: true
-    };
-  }
-  const validation = validateTokens(normalizedComponent, tokenNames);
-  if (!validation.isValid) {
-    return {
-      content: [
-        {
-          type: "text",
-          text: `**Error:** Invalid token(s) for component "${component}":
+		}],
+		isError: true
+	};
+	const validation = validateTokens(normalizedComponent, tokenNames);
+	if (!validation.isValid) return {
+		content: [{
+			type: "text",
+			text: `**Error:** Invalid token(s) for component "${component}":
 ${validation.invalidTokens.map((t) => `- \`${t}\``).join("\n")}
 
 **Valid tokens for ${component}:**
-${validation.validTokens.slice(0, 20).map((t) => `- \`${t}\``).join(
-            "\n"
-          )}${validation.validTokens.length > 20 ? `
-... and ${validation.validTokens.length - 20} more` : ""}
+${validation.validTokens.slice(0, 20).map((t) => `- \`${t}\``).join("\n")}${validation.validTokens.length > 20 ? `\n... and ${validation.validTokens.length - 20} more` : ""}
 
 Use \`get_component_design_tokens\` to see all tokens with descriptions.`
-        }
-      ],
-      isError: true
-    };
-  }
-  let finalSelector = selector;
-  if (!finalSelector && platform) {
-    const selectors = getComponentSelector(normalizedComponent, platform);
-    if (selectors.length > 0) {
-      finalSelector = selectors[0];
-    }
-  }
-  if (output === "css") {
-    try {
-      const { generateComponentThemeCss, formatCssOutput } = await import("../../generators/css.js");
-      const result = await generateComponentThemeCss({
-        platform,
-        component: normalizedComponent,
-        tokens,
-        selector: finalSelector,
-        name,
-        designSystem,
-        variant
-      });
-      const responseParts = [];
-      responseParts.push(result.description);
-      responseParts.push("");
-      const platformNote = platform ? `Platform: ${PLATFORM_METADATA[platform]?.name ?? platform}` : "Platform: Not specified (generic output). Specify `platform` for optimized imports.";
-      responseParts.push(platformNote);
-      responseParts.push(
-        `Design System: ${designSystem.charAt(0).toUpperCase() + designSystem.slice(1)} (${variant})`
-      );
-      if (finalSelector) {
-        responseParts.push(`Selector: \`${finalSelector}\``);
-      }
-      responseParts.push("");
-      responseParts.push("```css");
-      responseParts.push(
-        formatCssOutput(result.css, result.description).trimEnd()
-      );
-      responseParts.push("```");
-      responseParts.push("");
-      responseParts.push("---");
-      responseParts.push(
-        "**Usage:** Include this CSS in your stylesheet or add it to your application's global styles."
-      );
-      return {
-        content: [
-          {
-            type: "text",
-            text: responseParts.join("\n")
-          }
-        ]
-      };
-    } catch (error) {
-      return {
-        content: [
-          {
-            type: "text",
-            text: `**Error generating CSS:** ${error instanceof Error ? error.message : String(error)}`
-          }
-        ],
-        isError: true
-      };
-    }
-  }
-  try {
-    const result = generateComponentTheme({
-      platform,
-      licensed: params.licensed,
-      component: normalizedComponent,
-      tokens,
-      selector: finalSelector,
-      name,
-      designSystem,
-      variant
-    });
-    const responseParts = [];
-    responseParts.push(result.description);
-    responseParts.push("");
-    const platformNote = platform ? `Platform: ${PLATFORM_METADATA[platform]?.name ?? platform}` : "Platform: Not specified (generic output). Specify `platform` for optimized imports.";
-    responseParts.push(platformNote);
-    responseParts.push(
-      `Design System: ${designSystem.charAt(0).toUpperCase() + designSystem.slice(1)} (${variant})`
-    );
-    if (finalSelector) {
-      responseParts.push(`Selector: \`${finalSelector}\``);
-    }
-    responseParts.push("");
-    responseParts.push(`Variables created: ${result.variables.join(", ")}`);
-    responseParts.push("");
-    responseParts.push("```scss");
-    responseParts.push(result.code.trimEnd());
-    responseParts.push("```");
-    responseParts.push("");
-    responseParts.push("---");
-    responseParts.push(
-      "**Usage:** Import this Sass file in your main styles file, or include the code in your theme file."
-    );
-    return {
-      content: [
-        {
-          type: "text",
-          text: responseParts.join("\n")
-        }
-      ]
-    };
-  } catch (error) {
-    return {
-      content: [
-        {
-          type: "text",
-          text: `**Error generating theme:** ${error instanceof Error ? error.message : String(error)}`
-        }
-      ],
-      isError: true
-    };
-  }
+		}],
+		isError: true
+	};
+	let finalSelector = selector;
+	if (!finalSelector && platform) {
+		const selectors = getComponentSelector(normalizedComponent, platform);
+		if (selectors.length > 0) finalSelector = selectors[0];
+	}
+	if (output === "css") try {
+		const { generateComponentThemeCss, formatCssOutput } = await import("../../generators/css.js");
+		const result = await generateComponentThemeCss({
+			platform,
+			component: normalizedComponent,
+			tokens,
+			selector: finalSelector,
+			name,
+			designSystem,
+			variant
+		});
+		const responseParts = [];
+		responseParts.push(result.description);
+		responseParts.push("");
+		const platformNote = platform ? `Platform: ${PLATFORM_METADATA[platform]?.name ?? platform}` : "Platform: Not specified (generic output). Specify `platform` for optimized imports.";
+		responseParts.push(platformNote);
+		responseParts.push(`Design System: ${designSystem.charAt(0).toUpperCase() + designSystem.slice(1)} (${variant})`);
+		if (finalSelector) responseParts.push(`Selector: \`${finalSelector}\``);
+		responseParts.push("");
+		responseParts.push("```css");
+		responseParts.push(formatCssOutput(result.css, result.description).trimEnd());
+		responseParts.push("```");
+		responseParts.push("");
+		responseParts.push("---");
+		responseParts.push("**Usage:** Include this CSS in your stylesheet or add it to your application's global styles.");
+		return { content: [{
+			type: "text",
+			text: responseParts.join("\n")
+		}] };
+	} catch (error) {
+		return {
+			content: [{
+				type: "text",
+				text: `**Error generating CSS:** ${error instanceof Error ? error.message : String(error)}`
+			}],
+			isError: true
+		};
+	}
+	try {
+		const result = generateComponentTheme({
+			platform,
+			licensed: params.licensed,
+			component: normalizedComponent,
+			tokens,
+			selector: finalSelector,
+			name,
+			designSystem,
+			variant
+		});
+		const responseParts = [];
+		responseParts.push(result.description);
+		responseParts.push("");
+		const platformNote = platform ? `Platform: ${PLATFORM_METADATA[platform]?.name ?? platform}` : "Platform: Not specified (generic output). Specify `platform` for optimized imports.";
+		responseParts.push(platformNote);
+		responseParts.push(`Design System: ${designSystem.charAt(0).toUpperCase() + designSystem.slice(1)} (${variant})`);
+		if (finalSelector) responseParts.push(`Selector: \`${finalSelector}\``);
+		responseParts.push("");
+		responseParts.push(`Variables created: ${result.variables.join(", ")}`);
+		responseParts.push("");
+		responseParts.push("```scss");
+		responseParts.push(result.code.trimEnd());
+		responseParts.push("```");
+		responseParts.push("");
+		responseParts.push("---");
+		responseParts.push("**Usage:** Import this Sass file in your main styles file, or include the code in your theme file.");
+		return { content: [{
+			type: "text",
+			text: responseParts.join("\n")
+		}] };
+	} catch (error) {
+		return {
+			content: [{
+				type: "text",
+				text: `**Error generating theme:** ${error instanceof Error ? error.message : String(error)}`
+			}],
+			isError: true
+		};
+	}
 }
-export {
-  handleCreateComponentTheme
-};
+//#endregion
+export { handleCreateComponentTheme };