igniteui-theming 25.1.0 → 25.2.0

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

@@ -1,229 +1,169 @@
-import "../../knowledge/colors.js";
-import { hasVariants, getVariants, isCompoundComponent, getCompoundComponentInfo, getTokenDerivationsForChild, getComponentSelector } from "../../knowledge/component-metadata.js";
-import { resolveComponentTheme, searchComponents, COMPONENT_NAMES } from "../../knowledge/component-themes.js";
-import "../../knowledge/custom-palettes.js";
-import "../../utils/types.js";
-import "../../knowledge/palettes.js";
-import "node:fs";
-import "node:path";
+import { getComponentSelector, getCompoundComponentInfo, getTokenDerivationsForChild, getVariants, hasVariants, isCompoundComponent } from "../../knowledge/component-metadata.js";
+import { COMPONENT_NAMES, resolveComponentTheme, searchComponents } from "../../knowledge/component-themes.js";
+import "../../knowledge/index.js";
+//#region src/tools/handlers/component-tokens.ts
 async function handleGetComponentDesignTokens(params) {
-  const { component } = params;
-  const normalizedName = component.toLowerCase().trim();
-  const formatSelectorList = (selectors) => {
-    if (!selectors || selectors.length === 0) {
-      return "N/A";
-    }
-    const selectorText = Array.isArray(selectors) ? selectors.join(" | ") : selectors;
-    return `\`${selectorText}\``;
-  };
-  const getScopeSelectorForPlatform = (compoundInfo, componentName, scopeName, platform) => {
-    const selectorPlatform = platform === "angular" ? "angular" : "webcomponents";
-    if (scopeName === "inline") {
-      const selectors = getComponentSelector(componentName, platform);
-      return formatSelectorList(
-        selectors.length > 0 ? selectors.length === 1 ? selectors[0] : selectors : null
-      );
-    }
-    const scope = compoundInfo.additionalScopes?.[scopeName];
-    if (!scope) {
-      return "N/A";
-    }
-    return formatSelectorList(scope[selectorPlatform]);
-  };
-  const resolveChildScopeName = (compoundInfo, childThemeName, platform) => {
-    const scopePlatform = platform === "angular" ? "angular" : "webcomponents";
-    const childScope = compoundInfo?.childScopes?.[childThemeName];
-    return childScope?.[scopePlatform] ?? "inline";
-  };
-  const resolution = resolveComponentTheme(normalizedName);
-  const theme = resolution?.theme;
-  if (!theme) {
-    if (resolution?.error) {
-      return {
-        content: [
-          {
-            type: "text",
-            text: `**Error:** ${resolution.error}
+	const { component } = params;
+	const normalizedName = component.toLowerCase().trim();
+	const formatSelectorList = (selectors) => {
+		if (!selectors || selectors.length === 0) return "N/A";
+		return `\`${Array.isArray(selectors) ? selectors.join(" | ") : selectors}\``;
+	};
+	const getScopeSelectorForPlatform = (compoundInfo, componentName, scopeName, platform) => {
+		const selectorPlatform = platform === "angular" ? "angular" : "webcomponents";
+		if (scopeName === "inline") {
+			const selectors = getComponentSelector(componentName, platform);
+			return formatSelectorList(selectors.length > 0 ? selectors.length === 1 ? selectors[0] : selectors : null);
+		}
+		const scope = compoundInfo.additionalScopes?.[scopeName];
+		if (!scope) return "N/A";
+		return formatSelectorList(scope[selectorPlatform]);
+	};
+	const resolveChildScopeName = (compoundInfo, childThemeName, platform) => {
+		const scopePlatform = platform === "angular" ? "angular" : "webcomponents";
+		return (compoundInfo?.childScopes?.[childThemeName])?.[scopePlatform] ?? "inline";
+	};
+	const resolution = resolveComponentTheme(normalizedName);
+	const theme = resolution?.theme;
+	if (!theme) {
+		if (resolution?.error) return {
+			content: [{
+				type: "text",
+				text: `**Error:** ${resolution.error}
 
 Use a valid component name or update component metadata to point to a valid theme.`
-          }
-        ],
-        isError: true
-      };
-    }
-    const suggestions = searchComponents(normalizedName);
-    const componentList = suggestions.length > 0 ? suggestions.slice(0, 10) : COMPONENT_NAMES.slice(0, 20);
-    return {
-      content: [
-        {
-          type: "text",
-          text: `Component "${component}" not found.
+			}],
+			isError: true
+		};
+		const suggestions = searchComponents(normalizedName);
+		const componentList = suggestions.length > 0 ? suggestions.slice(0, 10) : COMPONENT_NAMES.slice(0, 20);
+		return { content: [{
+			type: "text",
+			text: `Component "${component}" not found.
 
 ${suggestions.length > 0 ? "**Similar components:**" : "**Available components (partial list):**"}
 ${componentList.map((c) => `- ${c}`).join("\n")}
 
-${suggestions.length === 0 ? `
-Total available: ${COMPONENT_NAMES.length} components. Use a more specific name to search.` : ""}
+${suggestions.length === 0 ? `\nTotal available: ${COMPONENT_NAMES.length} components. Use a more specific name to search.` : ""}
 
 **Tip:** For button variants, use specific names like "flat-button", "contained-button", "outlined-button", or "fab-button".`
-        }
-      ]
-    };
-  }
-  const PLATFORM_GROUPS = [
-    { label: "Angular", platform: "angular" },
-    { label: "Web Components", platform: "webcomponents" },
-    { label: "Blazor", platform: "blazor" },
-    { label: "React", platform: "react" }
-  ];
-  const responseParts = [];
-  responseParts.push(
-    `Implement a theme for the \`${normalizedName}\` component using the following guidance.`
-  );
-  responseParts.push("");
-  responseParts.push(`**Theme Function:** \`${theme.themeFunctionName}()\``);
-  responseParts.push("");
-  if (hasVariants(normalizedName)) {
-    const variants = getVariants(normalizedName);
-    responseParts.push("**Note:** This component has variant-specific themes:");
-    responseParts.push(variants.map((v) => `- \`${v}\``).join("\n"));
-    responseParts.push("");
-    responseParts.push(
-      "Consider using the specific variant theme for more targeted styling."
-    );
-    responseParts.push("");
-  }
-  if (isCompoundComponent(normalizedName)) {
-    const compoundInfo = getCompoundComponentInfo(normalizedName);
-    if (compoundInfo) {
-      responseParts.push("**Compound Component:**");
-      responseParts.push(compoundInfo.description);
-      responseParts.push("");
-      responseParts.push("**Steps:**");
-      responseParts.push(
-        "1. Choose your platform and use the matching scopes below."
-      );
-      responseParts.push(
-        "2. For each related theme: call `get_component_design_tokens`, then `create_component_theme` using the selector for that platform scope."
-      );
-      responseParts.push(
-        "3. Apply `@include tokens(child-theme(...))` inside the scope selector."
-      );
-      responseParts.push("");
-      const allScopeNames = [
-        "inline",
-        ...Object.keys(compoundInfo.additionalScopes ?? {})
-      ];
-      for (const group of PLATFORM_GROUPS) {
-        responseParts.push(`**${group.label}:**`);
-        const scopeRows = allScopeNames.map((scopeName) => {
-          const selectorText = getScopeSelectorForPlatform(
-            compoundInfo,
-            normalizedName,
-            scopeName,
-            group.platform
-          );
-          return { scopeName, selectorText };
-        }).filter((row) => row.selectorText !== "N/A");
-        if (scopeRows.length > 0) {
-          responseParts.push("| Scope | Selector |");
-          responseParts.push("| --- | --- |");
-          responseParts.push(
-            scopeRows.map((row) => `| ${row.scopeName} | ${row.selectorText} |`).join("\n")
-          );
-          responseParts.push("");
-        }
-        responseParts.push(`**Related themes (${group.label})**`);
-        responseParts.push("| Theme | Scope | Selector |");
-        responseParts.push("| --- | --- | --- |");
-        responseParts.push(
-          compoundInfo.relatedThemes.map((relatedTheme) => {
-            const scopeName = resolveChildScopeName(
-              compoundInfo,
-              relatedTheme,
-              group.platform
-            );
-            const selectorText = getScopeSelectorForPlatform(
-              compoundInfo,
-              normalizedName,
-              scopeName,
-              group.platform
-            );
-            return `| \`${relatedTheme}\` | ${scopeName} | ${selectorText} |`;
-          }).join("\n")
-        );
-        responseParts.push("");
-      }
-      const derivationRows = compoundInfo.relatedThemes.flatMap(
-        (relatedTheme) => {
-          const derivations = getTokenDerivationsForChild(
-            normalizedName,
-            relatedTheme
-          );
-          return Object.entries(derivations).map(([token, derivation]) => {
-            const transformDesc = derivation.transform === "identity" ? `same as \`${derivation.from}\`` : `\`${derivation.transform}\` of \`${derivation.from}\``;
-            return `| \`${relatedTheme}\` | \`${token}\` | ${transformDesc} |`;
-          });
-        }
-      );
-      responseParts.push("**Token derivations:**");
-      if (derivationRows.length > 0) {
-        responseParts.push("| Theme | Token | Derivation |");
-        responseParts.push("| --- | --- | --- |");
-        responseParts.push(derivationRows.join("\n"));
-      } else {
-        responseParts.push("None.");
-      }
-      responseParts.push("");
-      if (compoundInfo.guidance) {
-        responseParts.push("**Guidance:**");
-        responseParts.push(compoundInfo.guidance);
-        responseParts.push("");
-      }
-    }
-  }
-  if (theme.primaryTokens && theme.primaryTokens.length > 0) {
-    responseParts.push("**Primary Tokens:**");
-    for (const pt of theme.primaryTokens) {
-      responseParts.push(`- \`$${pt.name}\` — ${pt.description}`);
-    }
-    if (theme.primaryTokensSummary) {
-      responseParts.push("");
-      responseParts.push(theme.primaryTokensSummary);
-    }
-    responseParts.push("");
-  }
-  if (theme.tokens.length > 0) {
-    responseParts.push(`**Available Tokens (${theme.tokens.length}):**`);
-    responseParts.push("");
-    responseParts.push("| Token Name | Type | Description |");
-    responseParts.push("|------------|------|-------------|");
-    for (const token of theme.tokens) {
-      const cleanDesc = token.description.replace(/\s+/g, " ").trim();
-      responseParts.push(
-        `| \`${token.name}\` | ${token.type} | ${cleanDesc} |`
-      );
-    }
-    responseParts.push("");
-  } else {
-    responseParts.push(
-      "**No customizable tokens available for this component.**"
-    );
-    responseParts.push("");
-  }
-  responseParts.push("---");
-  responseParts.push(
-    "**Next step:** Use `create_component_theme` with the tokens above to generate Sass/CSS code."
-  );
-  return {
-    content: [
-      {
-        type: "text",
-        text: responseParts.join("\n")
-      }
-    ]
-  };
+		}] };
+	}
+	const PLATFORM_GROUPS = [
+		{
+			label: "Angular",
+			platform: "angular"
+		},
+		{
+			label: "Web Components",
+			platform: "webcomponents"
+		},
+		{
+			label: "Blazor",
+			platform: "blazor"
+		},
+		{
+			label: "React",
+			platform: "react"
+		}
+	];
+	const responseParts = [];
+	responseParts.push(`Implement a theme for the \`${normalizedName}\` component using the following guidance.`);
+	responseParts.push("");
+	responseParts.push(`**Theme Function:** \`${theme.themeFunctionName}()\``);
+	responseParts.push("");
+	if (hasVariants(normalizedName)) {
+		const variants = getVariants(normalizedName);
+		responseParts.push("**Note:** This component has variant-specific themes:");
+		responseParts.push(variants.map((v) => `- \`${v}\``).join("\n"));
+		responseParts.push("");
+		responseParts.push("Consider using the specific variant theme for more targeted styling.");
+		responseParts.push("");
+	}
+	if (isCompoundComponent(normalizedName)) {
+		const compoundInfo = getCompoundComponentInfo(normalizedName);
+		if (compoundInfo) {
+			responseParts.push("**Compound Component:**");
+			responseParts.push(compoundInfo.description);
+			responseParts.push("");
+			responseParts.push("**Steps:**");
+			responseParts.push("1. Choose your platform and use the matching scopes below.");
+			responseParts.push("2. For each related theme: call `get_component_design_tokens`, then `create_component_theme` using the selector for that platform scope.");
+			responseParts.push("3. Apply `@include tokens(child-theme(...))` inside the scope selector.");
+			responseParts.push("");
+			const allScopeNames = ["inline", ...Object.keys(compoundInfo.additionalScopes ?? {})];
+			for (const group of PLATFORM_GROUPS) {
+				responseParts.push(`**${group.label}:**`);
+				const scopeRows = allScopeNames.map((scopeName) => {
+					return {
+						scopeName,
+						selectorText: getScopeSelectorForPlatform(compoundInfo, normalizedName, scopeName, group.platform)
+					};
+				}).filter((row) => row.selectorText !== "N/A");
+				if (scopeRows.length > 0) {
+					responseParts.push("| Scope | Selector |");
+					responseParts.push("| --- | --- |");
+					responseParts.push(scopeRows.map((row) => `| ${row.scopeName} | ${row.selectorText} |`).join("\n"));
+					responseParts.push("");
+				}
+				responseParts.push(`**Related themes (${group.label})**`);
+				responseParts.push("| Theme | Scope | Selector |");
+				responseParts.push("| --- | --- | --- |");
+				responseParts.push(compoundInfo.relatedThemes.map((relatedTheme) => {
+					const scopeName = resolveChildScopeName(compoundInfo, relatedTheme, group.platform);
+					return `| \`${relatedTheme}\` | ${scopeName} | ${getScopeSelectorForPlatform(compoundInfo, normalizedName, scopeName, group.platform)} |`;
+				}).join("\n"));
+				responseParts.push("");
+			}
+			const derivationRows = compoundInfo.relatedThemes.flatMap((relatedTheme) => {
+				const derivations = getTokenDerivationsForChild(normalizedName, relatedTheme);
+				return Object.entries(derivations).map(([token, derivation]) => {
+					return `| \`${relatedTheme}\` | \`${token}\` | ${derivation.transform === "identity" ? `same as \`${derivation.from}\`` : `\`${derivation.transform}\` of \`${derivation.from}\``} |`;
+				});
+			});
+			responseParts.push("**Token derivations:**");
+			if (derivationRows.length > 0) {
+				responseParts.push("| Theme | Token | Derivation |");
+				responseParts.push("| --- | --- | --- |");
+				responseParts.push(derivationRows.join("\n"));
+			} else responseParts.push("None.");
+			responseParts.push("");
+			if (compoundInfo.guidance) {
+				responseParts.push("**Guidance:**");
+				responseParts.push(compoundInfo.guidance);
+				responseParts.push("");
+			}
+		}
+	}
+	if (theme.primaryTokens && theme.primaryTokens.length > 0) {
+		responseParts.push("**Primary Tokens:**");
+		for (const pt of theme.primaryTokens) responseParts.push(`- \`$${pt.name}\` — ${pt.description}`);
+		if (theme.primaryTokensSummary) {
+			responseParts.push("");
+			responseParts.push(theme.primaryTokensSummary);
+		}
+		responseParts.push("");
+	}
+	if (theme.tokens.length > 0) {
+		responseParts.push(`**Available Tokens (${theme.tokens.length}):**`);
+		responseParts.push("");
+		responseParts.push("| Token Name | Type | Description |");
+		responseParts.push("|------------|------|-------------|");
+		for (const token of theme.tokens) {
+			const cleanDesc = token.description.replace(/\s+/g, " ").trim();
+			responseParts.push(`| \`${token.name}\` | ${token.type} | ${cleanDesc} |`);
+		}
+		responseParts.push("");
+	} else {
+		responseParts.push("**No customizable tokens available for this component.**");
+		responseParts.push("");
+	}
+	responseParts.push("---");
+	responseParts.push("**Next step:** Use `create_component_theme` with the tokens above to generate Sass/CSS code.");
+	return { content: [{
+		type: "text",
+		text: responseParts.join("\n")
+	}] };
 }
-export {
-  handleGetComponentDesignTokens
-};
+//#endregion
+export { handleGetComponentDesignTokens };