igniteui-theming 25.0.0 → 25.0.2

package/dist/mcp/tools/descriptions.js

@@ -1,6 +1,6 @@
 const FRAGMENTS = {
   /** Platform parameter description */
-  PLATFORM: `Target platform: "angular" for Ignite UI for Angular, "webcomponents" for Ignite UI for Web Components, "react" for Ignite UI for React, or "blazor" for Ignite UI for Blazor. If omitted, generates generic code. Use detect_platform tool first to auto-detect from project files.`,
+  PLATFORM: `Target platform: "angular" for Ignite UI for Angular, "webcomponents" for Ignite UI for Web Components, "react" for Ignite UI for React, "blazor" for Ignite UI for Blazor, or "generic" for platform-agnostic output (standalone igniteui-theming usage). If omitted, generates generic code. Use detect_platform tool first to auto-detect from project files.`,
   /** Color format examples - CSS Color Level 4 */
   COLOR_FORMAT: `Valid CSS color formats: hex ("#3F51B5", "#3F51B5AA"), rgb/rgba ("rgb(63, 81, 181)", "rgb(63 81 181 / 0.5)"), hsl/hsla ("hsl(231, 48%, 48%)", "hsl(231 48% 48% / 0.5)"), hwb ("hwb(231 20% 30%)"), lab/lch ("lab(50% 40 59)", "lch(50% 80 30)"), oklab/oklch ("oklab(59% 0.1 0.1)", "oklch(60% 0.15 50)"), color() for wide-gamut ("color(display-p3 1 0.5 0)"), or CSS named colors ("indigo", "rebeccapurple").`,
   /** Variant parameter description */
@@ -18,7 +18,7 @@ const TOOL_DESCRIPTIONS = {
   // ---------------------------------------------------------------------------
   // detect_platform - Simple tool
   // ---------------------------------------------------------------------------
-  detect_platform: `Detect the target Ignite UI platform by analyzing package.json dependencies and project config files.
+  detect_platform: `Detect the target platform by analyzing dependencies and project config files.
 
 <use_case>
   Use this tool FIRST before generating any theme code to ensure platform-optimized output.
@@ -30,21 +30,28 @@ const TOOL_DESCRIPTIONS = {
   1. Ignite UI packages (HIGH - 100): igniteui-angular, igniteui-webcomponents, igniteui-react, IgniteUI.Blazor
   2. Config files (MEDIUM-HIGH - 80): angular.json, vite.config.*, next.config.*, .csproj
   3. Framework packages (LOW - 40): @angular/core, react, lit (fallback only)
+  4. Generic fallback: When no Ignite UI product is found, returns "generic" for standalone theming
 </detection_signals>
 
 <output>
   Returns:
-  - platform: "angular" | "webcomponents" | "react" | "blazor" | null
+  - platform: "angular" | "webcomponents" | "react" | "blazor" | "generic" | null
   - confidence: "high" | "medium" | "low" | "none"
-  - ambiguous: true if multiple platforms detected (requires user to specify explicitly)
+  - ambiguous: true if multiple Ignite UI platforms detected (requires user to specify explicitly)
   - alternatives: Array of detected platforms when ambiguous
   - signals: Array of detection signals found
   - detectedPackage: The primary package that triggered detection
   - platformInfo: Name, theming module path, and description
+
+  "generic" means no Ignite UI product framework was found. Most tools work in generic mode
+  (palette, typography, elevations, theme generation, color references, layout tokens with scope).
+  Component-specific tools (create_component_theme, get_component_design_tokens) are NOT available
+  in generic mode. The response includes Sass load path guidance based on detected build tooling.
+  null is reserved for error states (package.json read failure) or ambiguous multi-product detection.
 </output>
 
 <ambiguous_handling>
-  When multiple platforms are detected with significant confidence (≥60), returns:
+  When multiple Ignite UI platforms are detected with significant confidence (≥60), returns:
   - platform: null
   - ambiguous: true
   - alternatives: List of possible platforms with their signals
@@ -57,7 +64,11 @@ const TOOL_DESCRIPTIONS = {
   - create_theme: Generate complete theme
   - create_typography: Set up typography
   - create_elevations: Configure shadows
-</related_tools>`,
+</related_tools>
+
+<related_resources>
+  - "theming://guidance/platform-setup": Comprehensive setup guide covering detection workflow, Sass load path configuration, dependency handling, and the recommended theming sequence. Read this for detailed platform-specific setup instructions.
+</related_resources>`,
   // ---------------------------------------------------------------------------
   // create_palette - Medium complexity
   // ---------------------------------------------------------------------------
@@ -542,6 +553,7 @@ const TOOL_DESCRIPTIONS = {
 <behavior>
   - Sets --ig-size in the chosen scope (defaults to :root)
   - Accepts "small", "medium", "large" (mapped to 1, 2, 3) or numeric values
+  - When platform is "generic", do NOT use the "component" parameter (it resolves Ignite UI component selectors). Use "scope" with a custom CSS selector instead, or omit both for :root.
 </behavior>
 
 <sass_notes>
@@ -585,6 +597,7 @@ const TOOL_DESCRIPTIONS = {
   - Optional overrides for --ig-spacing-inline and --ig-spacing-block
   - 0 = no spacing, 1 = default, 2 = double (fractions allowed)
   - spacing is required; inline/block are optional overrides
+  - When platform is "generic", do NOT use the "component" parameter (it resolves Ignite UI component selectors). Use "scope" with a custom CSS selector instead, or omit both for :root.
 </behavior>
 
 <sass_notes>
@@ -626,6 +639,7 @@ const TOOL_DESCRIPTIONS = {
 <behavior>
   - Sets --ig-radius-factor in the chosen scope (defaults to :root)
   - 0 = minimum radius, 1 = maximum radius, values between interpolate
+  - When platform is "generic", do NOT use the "component" parameter (it resolves Ignite UI component selectors). Use "scope" with a custom CSS selector instead, or omit both for :root.
 </behavior>
 
 <sass_notes>
@@ -659,6 +673,10 @@ const TOOL_DESCRIPTIONS = {
   ALWAYS call this tool FIRST before using create_component_theme. It returns the
   exact token names that can be customized for a component, preventing hallucination
   of invalid property names.
+
+  NOTE: This tool returns tokens for Ignite UI framework components. It is NOT useful
+  when the detected platform is "generic" — component theming requires a specific
+  Ignite UI product (angular, webcomponents, react, or blazor).
 </use_case>
 
 <workflow>
@@ -1032,7 +1050,7 @@ Important: Gray progression is INVERTED for dark themes (50=darkest, 900=lightes
   // ---------------------------------------------------------------------------
   // Layout tool parameters
   // ---------------------------------------------------------------------------
-  layoutComponent: `Optional component name to scope the layout change (e.g., "flat-button", "calendar", "avatar"). If omitted, the change applies globally via :root.`,
+  layoutComponent: `Optional component name to scope the layout change (e.g., "flat-button", "calendar", "avatar"). If omitted, the change applies globally via :root. Note: component targets Ignite UI framework selectors — do not use with platform "generic". Use "scope" instead for custom CSS selectors.`,
   scope: `Optional CSS selector scope for the change (e.g., ".my-theme", ":root", "#app"). Ignored when component is provided.`,
   sizeValue: `Size value to set for --ig-size. Accepts "small" (1), "medium" (2), "large" (3), or numeric 1, 2, 3 only.`,
   spacing: "Spacing scale multiplier for --ig-spacing. 0 = none, 1 = default, 2 = double. Fractions allowed.",

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

@@ -5,8 +5,7 @@ import { getComponentTheme, searchComponents, COMPONENT_NAMES, validateTokens }
 import "../../knowledge/custom-palettes.js";
 import "../../utils/types.js";
 import "../../knowledge/palettes.js";
-import "node:fs";
-import "node:path";
+import { PLATFORM_METADATA } from "../../knowledge/platforms/index.js";
 async function handleCreateComponentTheme(params) {
   const {
     platform,
@@ -38,6 +37,25 @@ Please specify which platform you're using to generate the correct variable pref
       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.
+
+**Valid platforms:**
+- \`angular\` - Ignite UI for Angular
+- \`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);
@@ -84,7 +102,7 @@ Please use \`create_component_theme\` with one of the specific variant names abo
       if (availability?.angular) availablePlatforms.push("Angular");
       if (availability?.webcomponents)
         availablePlatforms.push("Web Components");
-      const error = `**Error:** The \`${component}\` component is not available on ${platform === "angular" ? "Ignite UI for Angular" : "Ignite UI for Web Components"}. ${availablePlatforms.length > 0 ? `It is available on: ${availablePlatforms.join(", ")}.` : ""}`;
+      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
@@ -148,7 +166,7 @@ Use \`get_component_design_tokens\` to see all tokens with descriptions.`
       const responseParts = [];
       responseParts.push(result.description);
       responseParts.push("");
-      const platformNote = platform ? `Platform: ${platform === "angular" ? "Ignite UI for Angular" : `Ignite UI for ${platform.charAt(0).toUpperCase() + platform.slice(1)}`}` : "Platform: Not specified (generic output). Specify `platform` for optimized imports.";
+      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})`
@@ -201,7 +219,7 @@ Use \`get_component_design_tokens\` to see all tokens with descriptions.`
     const responseParts = [];
     responseParts.push(result.description);
     responseParts.push("");
-    const platformNote = platform ? `Platform: ${platform === "angular" ? "Ignite UI for Angular" : `Ignite UI for ${platform.charAt(0).toUpperCase() + platform.slice(1)}`}` : "Platform: Not specified (generic output). Specify `platform` for optimized imports.";
+    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})`

package/dist/mcp/tools/handlers/custom-palette.js

@@ -1,5 +1,6 @@
 import { generateCustomPaletteCss, formatCssOutput } from "../../generators/css.js";
 import { PALETTE_PRESETS } from "../../knowledge/palettes.js";
+import { PLATFORM_METADATA } from "../../knowledge/platforms/index.js";
 import { toVariableName, generateCustomPaletteCode, generateHeader, generateUseStatement } from "../../utils/sass.js";
 import { validateCustomPalette, formatCustomPaletteValidation } from "../../validators/custom-palette.js";
 import "../../utils/color.js";
@@ -157,7 +158,7 @@ ${paletteLines.join("\n")}
   responseParts.push(
     `Created a custom ${variant} color palette based on ${designSystem} defaults.`
   );
-  const platformNote = params.platform ? `Platform: ${params.platform === "angular" ? "Ignite UI for Angular" : "Ignite UI for Web Components"}` : "Platform: Not specified (generic output). Specify `platform` for optimized code.";
+  const platformNote = params.platform ? `Platform: ${PLATFORM_METADATA[params.platform]?.name ?? params.platform}` : "Platform: Not specified (generic output). Specify `platform` for optimized code.";
   responseParts.push("");
   responseParts.push(platformNote);
   const shadesMode = Object.entries(colors).filter(([_, def]) => def.mode === "shades").map(([name]) => name);

package/dist/mcp/tools/handlers/elevations.js

@@ -1,4 +1,5 @@
 import { generateElevations } from "../../generators/sass.js";
+import { PLATFORM_METADATA } from "../../knowledge/platforms/index.js";
 function handleCreateElevations(params) {
   const result = generateElevations({
     platform: params.platform,
@@ -7,7 +8,7 @@ function handleCreateElevations(params) {
     name: params.name
   });
   const responseParts = [result.description];
-  const platformNote = params.platform ? `Platform: ${params.platform === "angular" ? "Ignite UI for Angular" : "Ignite UI for Web Components"}` : "Platform: Not specified (generic output). Specify `platform` for optimized code.";
+  const platformNote = params.platform ? `Platform: ${PLATFORM_METADATA[params.platform]?.name ?? params.platform}` : "Platform: Not specified (generic output). Specify `platform` for optimized code.";
   responseParts.push("");
   responseParts.push(platformNote);
   responseParts.push("");

package/dist/mcp/tools/handlers/layout.js

@@ -36,7 +36,7 @@ ${list.map((name) => `- ${name}`).join("\n")}`
     }
     const selectorsEntry = COMPONENT_METADATA[normalized].selectors;
     let selectors = [];
-    if (platform) {
+    if (platform && platform !== "generic") {
       selectors = getComponentSelector(normalized, platform);
       if (selectors.length === 0) {
         const availability = getComponentPlatformAvailability(normalized);

package/dist/mcp/tools/handlers/palette.js

@@ -1,12 +1,11 @@
 import { generatePaletteCss, formatCssOutput } from "../../generators/css.js";
 import { generatePalette } from "../../generators/sass.js";
+import { PLATFORM_METADATA } from "../../knowledge/platforms/index.js";
 import "../../knowledge/colors.js";
 import "../../knowledge/component-metadata.js";
 import "../../knowledge/custom-palettes.js";
 import "../../utils/types.js";
 import "../../knowledge/palettes.js";
-import "node:fs";
-import "node:path";
 import "../../utils/color.js";
 import { validatePaletteColors, formatValidationResult, generateWarningComments } from "../../validators/palette.js";
 async function handleCreatePalette(params) {
@@ -100,7 +99,7 @@ function handleSassOutput(params, validation) {
     }
   }
   const responseParts = [result.description];
-  const platformNote = params.platform ? `Platform: ${params.platform === "angular" ? "Ignite UI for Angular" : "Ignite UI for Web Components"}` : "Platform: Not specified (generic output). Specify `platform` for optimized code.";
+  const platformNote = params.platform ? `Platform: ${PLATFORM_METADATA[params.platform]?.name ?? params.platform}` : "Platform: Not specified (generic output). Specify `platform` for optimized code.";
   responseParts.push("");
   responseParts.push(platformNote);
   const validationText = formatValidationResult(validation);

package/dist/mcp/tools/handlers/platform.js

@@ -18,11 +18,250 @@ function formatSignal(signal) {
       return "unknown";
   }
 }
+const SASS_CONFIG_GUIDANCE = [
+  {
+    match: "exact",
+    key: "angular.json",
+    description: "An `angular.json` config file was detected. To use Sass output from this MCP, ensure your Angular project includes `node_modules` in the Sass load paths:",
+    lang: "json",
+    code: [
+      "// In angular.json → architect → build → options:",
+      '"stylePreprocessorOptions": {',
+      '  "includePaths": ["node_modules"]',
+      "}"
+    ].join("\n")
+  },
+  {
+    match: "prefix",
+    key: "vite.config",
+    description: "A Vite config file was detected. To use Sass output from this MCP, ensure your Vite config includes `node_modules` in the Sass load paths:",
+    lang: "js",
+    code: [
+      "// In vite.config.ts/js:",
+      "css: {",
+      "  preprocessorOptions: {",
+      "    scss: {",
+      "      loadPaths: ['node_modules']",
+      "    }",
+      "  }",
+      "}"
+    ].join("\n")
+  },
+  {
+    match: "prefix",
+    key: "next.config",
+    description: "A Next.js config file was detected. To use Sass output from this MCP, ensure your Next.js config includes `node_modules` in the Sass load paths:",
+    lang: "js",
+    code: [
+      "// In next.config.js/mjs/ts:",
+      "sassOptions: {",
+      "  loadPaths: ['node_modules']",
+      "}"
+    ].join("\n")
+  }
+];
+const SASS_CONFIG_FALLBACK = "To use Sass output from this MCP, ensure your project's Sass compiler has `node_modules` in its `loadPaths`. The exact configuration depends on your build tool — Angular CLI uses `includePaths` in `angular.json`, while most other tools (Vite, Next.js, sass CLI) use `loadPaths`. Investigate the project's build configuration to find the right place to add this.";
+function findSassGuidance(fileName) {
+  return SASS_CONFIG_GUIDANCE.find(
+    (entry) => entry.match === "exact" ? fileName === entry.key : fileName.startsWith(entry.key)
+  );
+}
+function buildToolEligibilitySection() {
+  return [
+    "### Available Tools",
+    "",
+    "The following tools work in generic (standalone) mode:",
+    "",
+    "- `create_palette` — Generate color palettes",
+    "- `create_custom_palette` — Generate fully custom palettes",
+    "- `create_typography` — Set up typography/type scales",
+    "- `create_elevations` — Configure shadow/elevation system",
+    "- `create_theme` — Generate a complete theme",
+    "- `set_size` / `set_spacing` / `set_roundness` — Layout tokens (use `scope` with a custom CSS selector or omit for `:root`; do **not** use `component` as it targets Ignite UI component selectors)",
+    "- `get_color` — Get CSS variable references for palette colors",
+    "- `read_resource` — Read theming reference data",
+    "",
+    "### Not Available in Generic Mode",
+    "",
+    "- `create_component_theme` — Requires a specific Ignite UI product platform (angular, webcomponents, react, or blazor) for component selectors and variable prefixes",
+    "- `get_component_design_tokens` — Returns tokens for Ignite UI framework components which are not present in generic mode",
+    ""
+  ];
+}
+function buildSassConfigSection(signals) {
+  const lines = ["### Sass Configuration", ""];
+  const configFileSignals = signals.filter((s) => s.type === "config_file");
+  if (configFileSignals.length === 0) {
+    lines.push(SASS_CONFIG_FALLBACK, "");
+    return lines;
+  }
+  for (const signal of configFileSignals) {
+    if (signal.type !== "config_file") continue;
+    const guidance = findSassGuidance(signal.file);
+    if (guidance) {
+      lines.push(
+        guidance.description,
+        "",
+        `\`\`\`${guidance.lang}`,
+        guidance.code,
+        "```",
+        ""
+      );
+    }
+  }
+  return lines;
+}
+function buildOutputFormatNotes(hasThemingPackage) {
+  const lines = ["### Output Format Notes", ""];
+  if (!hasThemingPackage) {
+    lines.push(
+      "The `igniteui-theming` package was **not found** in this project's dependencies.",
+      "",
+      "- **CSS output** works without any local installation — the MCP compiles Sass to CSS server-side.",
+      "- **Sass output** requires `igniteui-theming` to be resolvable in your project. Run `npm install igniteui-theming` to install it, then configure `loadPaths` as described above."
+    );
+  } else {
+    lines.push(
+      "The `igniteui-theming` package is installed in this project.",
+      "",
+      "- **CSS output** is compiled server-side by the MCP — no Sass toolchain needed.",
+      "- **Sass output** uses `@use 'igniteui-theming' as *;` and requires the `loadPaths` configuration described above."
+    );
+  }
+  return lines;
+}
+function buildAmbiguousResponse(result) {
+  const alternatives = result.alternatives;
+  const lines = [
+    "## Platform Detection Result",
+    "",
+    "**Status:** Ambiguous - Multiple platforms detected",
+    "",
+    "The project appears to contain dependencies for multiple Ignite UI platforms. This might be a monorepo or a project transitioning between frameworks.",
+    "",
+    "### Detected Platforms",
+    ""
+  ];
+  for (const alt of alternatives) {
+    const metadata = PLATFORM_METADATA[alt.platform];
+    lines.push(
+      `#### ${metadata.name}`,
+      `- **Confidence:** ${alt.confidence}%`,
+      `- **Signals:** ${alt.signals.map(formatSignal).join(", ")}`,
+      `- **Theming module:** \`${metadata.themingModule}\``,
+      ""
+    );
+  }
+  lines.push(
+    "### Action Required",
+    "",
+    "Please specify the platform explicitly when calling theme generation tools:",
+    ""
+  );
+  for (const alt of alternatives) {
+    const metadata = PLATFORM_METADATA[alt.platform];
+    lines.push(`- Use \`platform: '${alt.platform}'\` for ${metadata.name}`);
+  }
+  return lines;
+}
+function buildGenericResponse(result, hasThemingPackage) {
+  const metadata = PLATFORM_METADATA.generic;
+  const lines = [
+    "## Platform Detection Result",
+    "",
+    `**Detected Platform:** ${metadata.name}`,
+    `**Confidence:** ${result.confidence}`,
+    `**Theming Module:** \`${metadata.themingModule}\``,
+    "",
+    metadata.description,
+    ""
+  ];
+  if (result.signals && result.signals.length > 0) {
+    lines.push(
+      `**Detection Signals:** ${result.signals.map(formatSignal).join(", ")}`,
+      ""
+    );
+  }
+  lines.push(
+    ...buildToolEligibilitySection(),
+    ...buildSassConfigSection(result.signals ?? []),
+    ...buildOutputFormatNotes(hasThemingPackage)
+  );
+  return lines;
+}
+function buildPlatformResponse(result, licensed) {
+  const platform = result.platform;
+  const metadata = PLATFORM_METADATA[platform];
+  const lines = [
+    "## Platform Detection Result",
+    "",
+    `**Detected Platform:** ${metadata.name}`,
+    `**Confidence:** ${result.confidence}`
+  ];
+  if (result.detectedPackage) {
+    lines.push(`**Detected Package:** ${result.detectedPackage}`);
+    if (platform === "angular") {
+      const isLicensed = isLicensedPackage(result.detectedPackage);
+      lines.push(
+        `**Package Type:** ${isLicensed ? "Licensed (@infragistics)" : "Open Source (npm)"}`
+      );
+    }
+  }
+  if (result.signals && result.signals.length > 0) {
+    lines.push(
+      `**Detection Signals:** ${result.signals.map(formatSignal).join(", ")}`
+    );
+  }
+  const themingModule = platform === "angular" && licensed ? metadata.licensedThemingModule : metadata.themingModule;
+  lines.push(`**Theming Module:** \`${themingModule}\``, "");
+  let usageLine = `When generating theme code, use \`platform: '${platform}'\``;
+  if (platform === "angular" && licensed) {
+    usageLine += " and `licensed: true`";
+  }
+  usageLine += " to ensure the correct Sass syntax is generated for this platform.";
+  lines.push("### Usage", "", usageLine, "", metadata.description);
+  if (result.confidence === "low") {
+    lines.push(
+      "",
+      "### Note",
+      "",
+      "Detection confidence is **low**. This means no Ignite UI package was found, only framework packages. Please verify this is the correct platform before generating themes."
+    );
+  } else if (result.confidence === "medium") {
+    lines.push(
+      "",
+      "### Note",
+      "",
+      "Detection confidence is **medium**. Consider verifying the platform if the generated code doesn't work as expected."
+    );
+  }
+  return lines;
+}
+function buildNullPlatformResponse(result) {
+  return [
+    "## Platform Detection Result",
+    "",
+    "**Platform:** Not detected",
+    `**Reason:** ${result.reason}`,
+    "",
+    "### Recommendation",
+    "",
+    "Please specify the platform explicitly when calling theme generation tools:",
+    "",
+    "- Use `platform: 'angular'` for Ignite UI for Angular",
+    "- Use `platform: 'webcomponents'` for Ignite UI for Web Components",
+    "- Use `platform: 'react'` for Ignite UI for React",
+    "- Use `platform: 'blazor'` for Ignite UI for Blazor",
+    "- Use `platform: 'generic'` for platform-agnostic output"
+  ];
+}
 async function handleDetectPlatform(params) {
   const packageJsonPath = params.packageJsonPath ?? "./package.json";
   const resolvedPath = resolve(process.cwd(), packageJsonPath);
   const projectRoot = dirname(resolvedPath);
   let result;
+  let parsedDeps = {};
+  let parsedDevDeps = {};
   try {
     const packageJsonContent = await readFile(resolvedPath, "utf-8");
     const parseResult = packageJsonSchema.safeParse(
@@ -37,9 +276,11 @@ async function handleDetectPlatform(params) {
       };
     } else {
       const packageJson = parseResult.data;
+      parsedDeps = packageJson.dependencies ?? {};
+      parsedDevDeps = packageJson.devDependencies ?? {};
       result = detectPlatformFromDependencies(
-        packageJson.dependencies,
-        packageJson.devDependencies,
+        parsedDeps,
+        parsedDevDeps,
         projectRoot
       );
     }
@@ -52,6 +293,8 @@ async function handleDetectPlatform(params) {
       reason: `Could not read package.json: ${errorMessage}`
     };
   }
+  const allDeps = { ...parsedDeps, ...parsedDevDeps };
+  const hasThemingPackage = "igniteui-theming" in allDeps;
   const response = {
     platform: result.platform,
     confidence: result.confidence,
@@ -75,96 +318,14 @@ async function handleDetectPlatform(params) {
       description: metadata.description
     };
   }
-  let text;
-  if (result.ambiguous && result.alternatives) {
-    text = "## Platform Detection Result\n\n";
-    text += "**Status:** Ambiguous - Multiple platforms detected\n\n";
-    text += "The project appears to contain dependencies for multiple Ignite UI platforms. ";
-    text += "This might be a monorepo or a project transitioning between frameworks.\n\n";
-    text += "### Detected Platforms\n\n";
-    for (const alt of result.alternatives) {
-      const metadata = PLATFORM_METADATA[alt.platform];
-      text += `#### ${metadata.name}
-`;
-      text += `- **Confidence:** ${alt.confidence}%
-`;
-      text += `- **Signals:** ${alt.signals.map(formatSignal).join(", ")}
-`;
-      text += `- **Theming module:** \`${metadata.themingModule}\`
-
-`;
-    }
-    text += "### Action Required\n\n";
-    text += "Please specify the platform explicitly when calling theme generation tools:\n\n";
-    for (const alt of result.alternatives) {
-      const metadata = PLATFORM_METADATA[alt.platform];
-      text += `- Use \`platform: '${alt.platform}'\` for ${metadata.name}
-`;
-    }
-  } else if (result.platform) {
-    const metadata = PLATFORM_METADATA[result.platform];
-    text = "## Platform Detection Result\n\n";
-    text += `**Detected Platform:** ${metadata.name}
-`;
-    text += `**Confidence:** ${result.confidence}
-`;
-    if (result.detectedPackage) {
-      text += `**Detected Package:** ${result.detectedPackage}
-`;
-      const licensed = isLicensedPackage(result.detectedPackage);
-      if (result.platform === "angular") {
-        text += `**Package Type:** ${licensed ? "Licensed (@infragistics)" : "Open Source (npm)"}
-`;
-      }
-    }
-    if (result.signals && result.signals.length > 0) {
-      text += `**Detection Signals:** ${result.signals.map(formatSignal).join(", ")}
-`;
-    }
-    const themingModule = result.platform === "angular" && response.licensed ? metadata.licensedThemingModule : metadata.themingModule;
-    text += `**Theming Module:** \`${themingModule}\`
-
-`;
-    text += "### Usage\n\n";
-    text += `When generating theme code, use \`platform: '${result.platform}'\``;
-    if (result.platform === "angular" && response.licensed) {
-      text += " and `licensed: true`";
-    }
-    text += " to ensure the correct Sass syntax is generated for this platform.\n\n";
-    text += `${metadata.description}`;
-    if (result.confidence === "low") {
-      text += "\n\n### Note\n\n";
-      text += "Detection confidence is **low**. This means no Ignite UI package was found, ";
-      text += "only framework packages. Please verify this is the correct platform before generating themes.";
-    } else if (result.confidence === "medium") {
-      text += "\n\n### Note\n\n";
-      text += "Detection confidence is **medium**. Consider verifying the platform if the generated ";
-      text += `code doesn't work as expected.`;
-    }
-  } else {
-    text = "## Platform Detection Result\n\n";
-    text += "**Platform:** Not detected\n";
-    text += `**Reason:** ${result.reason}
-
-`;
-    text += "### Recommendation\n\n";
-    text += "Please specify the platform explicitly when calling theme generation tools:\n\n";
-    text += `- Use \`platform: 'angular'\` for Ignite UI for Angular
-`;
-    text += `- Use \`platform: 'webcomponents'\` for Ignite UI for Web Components
-`;
-    text += `- Use \`platform: 'react'\` for Ignite UI for React
-`;
-    text += `- Use \`platform: 'blazor'\` for Ignite UI for Blazor`;
-  }
+  const lines = result.ambiguous && result.alternatives ? buildAmbiguousResponse(result) : result.platform === "generic" ? buildGenericResponse(result, hasThemingPackage) : result.platform ? buildPlatformResponse(result, response.licensed) : buildNullPlatformResponse(result);
   return {
     content: [
       {
         type: "text",
-        text
+        text: lines.join("\n")
       }
     ],
-    // Also include structured data for programmatic access
     structuredData: response
   };
 }

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

@@ -68,6 +68,9 @@ async function handleCreateTheme(params) {
     case "blazor":
       platformNote = "Platform: Ignite UI for Blazor";
       break;
+    case "generic":
+      platformNote = "Platform: Ignite UI Theming (Standalone)";
+      break;
     default:
       platformNote = "Platform: Not specified (generic output). Specify `platform` for optimized code.";
       break;

package/dist/mcp/tools/handlers/typography.js

@@ -1,4 +1,5 @@
 import { generateTypography } from "../../generators/sass.js";
+import { PLATFORM_METADATA } from "../../knowledge/platforms/index.js";
 function handleCreateTypography(params) {
   const result = generateTypography({
     platform: params.platform,
@@ -9,7 +10,7 @@ function handleCreateTypography(params) {
     name: params.name
   });
   const responseParts = [result.description];
-  const platformNote = params.platform ? `Platform: ${params.platform === "angular" ? "Ignite UI for Angular" : "Ignite UI for Web Components"}` : "Platform: Not specified (generic output). Specify `platform` for optimized code.";
+  const platformNote = params.platform ? `Platform: ${PLATFORM_METADATA[params.platform]?.name ?? params.platform}` : "Platform: Not specified (generic output). Specify `platform` for optimized code.";
   responseParts.push("");
   responseParts.push(platformNote);
   responseParts.push("");