igniteui-cli 15.2.2-alpha.2 → 15.2.2

package/lib/PromptSession.js

@@ -58,7 +58,7 @@ class PromptSession extends cli_core_1.BasePromptSession {
     }
     configureAI(frameworkId) {
         return __awaiter(this, void 0, void 0, function* () {
-            yield (0, ai_config_1.configure)(frameworkId);
+            yield (0, ai_config_1.configure)(frameworkId, { verbose: false });
         });
     }
     templateSelectedTask(type = "component") {

package/lib/commands/ai-config.d.ts

@@ -1,10 +1,17 @@
 import { type AIAgentTarget, type AiCodingAssistant } from "@igniteui/cli-core";
 import { CommandModule } from "yargs";
 export declare function configureMCP(assistants: AiCodingAssistant[]): void;
-export declare function configureSkills(agents: AIAgentTarget[], framework: string): void;
+export declare function configureSkills(agents: AIAgentTarget[], framework: string, verbose?: boolean): void;
+export declare function configureInstructions(agents: AIAgentTarget[], framework: string, verbose?: boolean): void;
 type AIAgentOption = AIAgentTarget | "none";
 type AIAssistantOption = AiCodingAssistant | "none";
-export declare function configure(framework: string, agents?: AIAgentOption[], assistants?: AIAssistantOption[], skills?: boolean): Promise<{
+interface ConfigureOptions {
+    agents?: AIAgentOption[];
+    assistants?: AIAssistantOption[];
+    skills?: boolean;
+    verbose?: boolean;
+}
+export declare function configure(framework: string, options?: ConfigureOptions): Promise<{
     agents: AIAgentTarget[];
     assistants: AiCodingAssistant[];
 }>;

package/lib/commands/ai-config.js

@@ -11,6 +11,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.configureMCP = configureMCP;
 exports.configureSkills = configureSkills;
+exports.configureInstructions = configureInstructions;
 exports.configure = configure;
 const cli_core_1 = require("@igniteui/cli-core");
 function configureMCP(assistants) {
@@ -18,32 +19,66 @@ function configureMCP(assistants) {
         const { mcpFilePath } = cli_core_1.AI_ASSISTANT_MCP_CONFIGS[assistant];
         const modified = (0, cli_core_1.addMcpServers)(assistant);
         if (!modified) {
-            cli_core_1.Util.log(` Ignite UI MCP servers already configured in ${mcpFilePath}`);
+            cli_core_1.Util.log(cli_core_1.Util.greenCheck() + ` Ignite UI MCP servers already configured in ${mcpFilePath}`);
         }
         else {
             cli_core_1.Util.log(cli_core_1.Util.greenCheck() + ` MCP servers configured in ${mcpFilePath}`);
         }
     }
 }
-function configureSkills(agents, framework) {
+function logFileActions(result) {
+    for (const detail of result.details) {
+        if (detail.action === "created") {
+            cli_core_1.Util.log(`  Created ${detail.path}`);
+        }
+        else if (detail.action === "updated") {
+            cli_core_1.Util.log(`  Updated ${detail.path}`);
+        }
+    }
+}
+function logResultSummary(result, label) {
+    if (result.failed > 0) {
+        cli_core_1.Util.warn(`Failed to write ${result.failed} ${label} file(s) out of ${result.found}.`, "yellow");
+    }
+    else if (result.found > 0 && result.skipped === result.found) {
+        cli_core_1.Util.log(cli_core_1.Util.greenCheck() + ` ${label} file(s) already up-to-date.`);
+    }
+    else if (result.found > 0) {
+        const written = result.found - result.skipped;
+        cli_core_1.Util.log(cli_core_1.Util.greenCheck() + ` ${written} ${label} file(s) created or updated.`);
+    }
+}
+function configureSkills(agents, framework, verbose = true) {
     const result = (0, cli_core_1.copyAISkillsToProject)(agents, framework);
     if (result.found === 0) {
         cli_core_1.Util.warn("No AI skill files found. Make sure packages are installed (npm install) " +
             "and your Ignite UI packages are up-to-date.", "yellow");
+        return;
     }
-    else if (result.failed > 0) {
-        cli_core_1.Util.warn(`Failed to write ${result.failed} skill file(s) out of ${result.found}.`, "yellow");
-    }
-    else if (result.skipped === result.found) {
-        cli_core_1.Util.log("Everything is already up-to-date.");
+    if (verbose) {
+        for (const source of result.sources) {
+            if (source.type === "package") {
+                cli_core_1.Util.log(`Using skills from ${source.packageName}@${source.packageVersion}`);
+            }
+            else {
+                cli_core_1.Util.log("Using bundled Ignite UI skills");
+            }
+        }
+        logFileActions(result);
     }
-    else {
-        const written = result.found - result.skipped;
-        cli_core_1.Util.log(cli_core_1.Util.greenCheck() + ` ${written} AI skill file(s) created or updated.`);
+    logResultSummary(result, "AI skill");
+}
+function configureInstructions(agents, framework, verbose = true) {
+    const result = (0, cli_core_1.copyAgentInstructionFiles)(agents, framework);
+    if (verbose) {
+        logFileActions(result);
     }
+    logResultSummary(result, "instruction");
 }
 function configure(framework_1) {
-    return __awaiter(this, arguments, void 0, function* (framework, agents = [], assistants = [], skills = true) {
+    return __awaiter(this, arguments, void 0, function* (framework, options = {}) {
+        const { skills = true, verbose = true } = options;
+        let { agents = [], assistants = [] } = options;
         if (framework === "jquery") {
             // currently not supported
             return { agents: [], assistants: [] };
@@ -65,9 +100,9 @@ function configure(framework_1) {
         }
         else {
             if (skills) {
-                configureSkills(resolvedAgents, framework);
+                configureSkills(resolvedAgents, framework, verbose);
             }
-            (0, cli_core_1.copyAgentInstructionFiles)(resolvedAgents, framework);
+            configureInstructions(resolvedAgents, framework, verbose);
         }
         return { agents: resolvedAgents, assistants: resolvedAssistants };
     });
@@ -184,7 +219,7 @@ const command = {
             if (framework === "jquery") {
                 cli_core_1.Util.log("AI Config currently not available for jQuery projects.");
             }
-            const result = yield configure(framework, agents, assistants);
+            const result = yield configure(framework, { agents, assistants });
             cli_core_1.GoogleAnalytics.post({
                 t: "event",
                 ec: "$ig ai-config",

package/lib/commands/new.js

@@ -174,7 +174,10 @@ const command = {
                 yield cli_core_1.Util.processTemplates(templatePath, path.join(process.cwd(), argv.name), config, projTemplate.delimiters, false);
             }
             process.chdir(argv.name);
-            yield (0, ai_config_1.configure)(argv.framework, argv.agents, argv.assistants);
+            yield (0, ai_config_1.configure)(argv.framework, {
+                agents: argv.agents,
+                assistants: argv.assistants
+            });
             process.chdir("..");
             cli_core_1.Util.log(cli_core_1.Util.greenCheck() + " Project Created");
             if (!argv.skipInstall) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-cli",
-  "version": "15.2.2-alpha.2",
+  "version": "15.2.2",
   "description": "CLI tool for creating Ignite UI projects",
   "keywords": [
     "CLI",
@@ -66,9 +66,9 @@
     "all": true
   },
   "dependencies": {
-    "@igniteui/angular-templates": "^21.2.1522-alpha.2",
-    "@igniteui/cli-core": "^15.2.2-alpha.2",
-    "@igniteui/mcp-server": "^15.2.2-alpha.2",
+    "@igniteui/angular-templates": "~21.2.1522",
+    "@igniteui/cli-core": "~15.2.2",
+    "@igniteui/mcp-server": "~15.2.2",
     "@inquirer/prompts": "^7.9.0",
     "chalk": "^5.3.0",
     "glob": "^11.0.0",

package/templates/blazor/igb/projects/ai-config/files/skills/AGENTS.md

@@ -1,4 +1,4 @@
-You are an expert in C#, Blazor, and scalable web application development. You write functional, maintainable, performant, and accessible code following .NET and Blazor best practices. You are currently immersed in the latest .NET and Blazor, adopting modern C# features, component-based architecture with clean separation of concerns, and modern Blazor patterns for reactive UI and dependencygit pull injection.
+You are an expert in C#, Blazor, and scalable web application development. You write functional, maintainable, performant, and accessible code following .NET and Blazor best practices. You are currently immersed in the latest .NET and Blazor, adopting modern C# features, component-based architecture with clean separation of concerns, and modern Blazor patterns for reactive UI and dependency injection.
 
 ## Coding Standards
 
@@ -57,9 +57,10 @@ You are an expert in C#, Blazor, and scalable web application development. You w
 
 ## UI Components
 
-- Use `IgniteUI.Blazor.Lite`, `IgniteUI.Blazor.GridLite` for general purpose components and light-weight grid, and `IgniteUI.Blazor` (trial version available publicly as `IgniteUI.Blazor.Trial`) for specialized feature-rich grids and charts.
+- Use `IgniteUI.Blazor.Lite`, `IgniteUI.Blazor.GridLite` for general purpose components and light-weight grid, and `IgniteUI.Blazor` (trial version available publicly as `IgniteUI.Blazor.Trial`) for specialized feature-rich grids and charts. If the project already references full `IgniteUI.Blazor`, do not add `IgniteUI.Blazor.Lite` or `IgniteUI.Blazor.GridLite` unless the user explicitly chooses to switch package strategy.
 - Components use the `Igb` prefix (e.g., `IgbGrid`, `IgbCombo`, `IgbDatePicker`).
 - Every component requires module registration in `Program.cs`: `builder.Services.AddIgniteUIBlazor(typeof(IgbGridModule))`.
 - Add `@using IgniteUI.Blazor.Controls` to `_Imports.razor`.
 - Link a theme stylesheet in the host page (e.g., `_content/IgniteUI.Blazor/themes/light/bootstrap.css`).
-- If the `IgniteUI.Blazor.Lite`, `IgniteUI.Blazor.GridLite` NuGet packages are not present in the project file, add it first.
+- Add the Ignite UI runtime script before the Blazor framework script in the host page: `<script src="_content/IgniteUI.Blazor/app.bundle.js"></script>`. **If this script is missing, web components will not register and the app will render blank or broken - verify this is present in every new project.**
+- If no Ignite UI package is present, add the package that matches the chosen package strategy.

package/templates/blazor/igb/projects/ai-config/files/skills/igniteui-blazor-components/SKILL.md

@@ -12,7 +12,7 @@ user-invocable: true
 - The correct NuGet package installed: `IgniteUI.Blazor.Lite` (NuGet.org, MIT) for general purpose UI components; `IgniteUI.Blazor.GridLite` (NuGet.org, MIT) for the lightweight grid; `IgniteUI.Blazor` (Infragistics private feed, licensed) for the full suite including charts, maps, gauges, and enterprise grids; or `IgniteUI.Blazor.Trial` (NuGet.org) for evaluation of the full suite
 - `builder.Services.AddIgniteUIBlazor(...)` called in `Program.cs`
 - `@using IgniteUI.Blazor.Controls` added to `_Imports.razor`
-- A theme CSS file linked in the host page (see [`references/setup.md`](./references/setup.md))
+- A theme CSS file and `_content/IgniteUI.Blazor/app.bundle.js` runtime script linked in the host page (see [`references/setup.md`](./references/setup.md))
 - The **Ignite UI CLI MCP server** (`igniteui-cli`) is available as a tool provider
 
 > **AGENT INSTRUCTION - MCP Server Setup (REQUIRED)**
@@ -76,9 +76,9 @@ Base your code and explanation exclusively on what you read. If the reference fi
 | `IgniteUI.Blazor.Lite` | NuGet.org | Open-source / MIT users needing core UI components (forms, layout, navigation, data display, feedback) |
 | `IgniteUI.Blazor.GridLite` | NuGet.org | Open-source / MIT users needing the lightweight `IgbGridLite` data grid |
 | `IgniteUI.Blazor` | Infragistics private NuGet feed (`https://packages.infragistics.com/nuget/licensed/`) | Licensed / enterprise users that need the full component suite (grids, charts, maps, gauges, Dock Manager) |
-| `IgniteUI.Blazor.Trial` | NuGet.org | Evaluation users — same full suite as `IgniteUI.Blazor` but with a trial watermark |
+| `IgniteUI.Blazor.Trial` | NuGet.org | Evaluation users - same full suite as `IgniteUI.Blazor` but with a trial watermark |
 
-`IgniteUI.Blazor.Lite` contains the open-source UI component set, while `IgniteUI.Blazor.GridLite` contains the free `IgbGridLite` data grid package. Both use the `IgniteUI.Blazor.Controls` namespace. Do **not** mix the licensed `IgniteUI.Blazor` package with `IgniteUI.Blazor.Lite` in the same project; they use the same namespaces and duplicate some components.
+`IgniteUI.Blazor.Lite` contains the open-source UI component set, while `IgniteUI.Blazor.GridLite` contains the free `IgbGridLite` data grid package. Both use the `IgniteUI.Blazor.Controls` namespace. Do **not** mix the licensed `IgniteUI.Blazor` package with `IgniteUI.Blazor.Lite` in the same project; they use the same namespaces and duplicate some components. If full `IgniteUI.Blazor` is already referenced, do not add Lite/GridLite unless the user explicitly asks to switch package strategy.
 
 ## Key Blazor-Specific Notes
 

package/templates/blazor/igb/projects/ai-config/files/skills/igniteui-blazor-components/references/charts.md

@@ -70,7 +70,7 @@ Key attributes: `DataSource`, `ChartType` (`CategoryChartType.Line` / `Area` / `
 
 > **AGENT INSTRUCTION:** `CategoryChartType.Bar` does **not** exist. For a horizontal bar-style chart, use `CategoryChartType.Column` (vertical) or switch to `IgbDataChart` with `IgbBarSeries` for true horizontal bars. Never generate `ChartType="CategoryChartType.Bar"`.
 
-> **AGENT INSTRUCTION:** The `XAxisLabel` parameter on `IgbCategoryChart` is not a plain string property name. To control which data field is used as the X-axis label, set `XAxisMemberPath` with the property name string (e.g., `XAxisMemberPath="Month"`).
+> **AGENT INSTRUCTION:** `IgbCategoryChart` auto-detects which string or date property in the data to use as X-axis labels. To control which data properties are charted, use `IncludedProperties` or `ExcludedProperties` (string arrays).
 
 Brush list properties such as `Brushes`, `Outlines`, `MarkerBrushes`, and `MarkerOutlines` are **string** parameters. Separate multiple colors with spaces, as in `Brushes="DodgerBlue IndianRed"`.
 
@@ -328,4 +328,5 @@ Use Dashboard Tile when the requested component should infer or render compact d
 5. **`IgbDataChart` series must match axes by name.** The `XAxisName` / `YAxisName` on each series must match the `Name` attribute of the axis component.
 6. **`IncludedProperties` and `ExcludedProperties` are `string[]` arrays.** Bind with `@(new string[] { "Prop1", "Prop2" })`. Do not pass a plain string.
 7. **`CategoryChartType.Bar` does not exist.** Use `Column` for vertical bars in `IgbCategoryChart`. For horizontal bars, use `IgbDataChart` with `IgbBarSeries`.
-8. **Use `XAxisMemberPath` to set the X-axis label field**, not `XAxisLabel`. Passing a property name string to `XAxisLabel` is evaluated as a C# expression and silently fails.
+8. **Do not use `XAxisLabel` to specify a data field.** It controls label formatting only. Use `IncludedProperties`/`ExcludedProperties` on `IgbCategoryChart`, or `Label` on `IgbCategoryXAxis` for `IgbDataChart`.
+9. **Scatter and bubble series use `XMemberPath`/`YMemberPath`, not `XAxisMemberPath`.** For `IgbScatterSeries` and `IgbBubbleSeries`, map data fields with `XMemberPath="FieldX"` and `YMemberPath="FieldY"`. `IgbBubbleSeries` additionally requires `RadiusMemberPath`.

package/templates/blazor/igb/projects/ai-config/files/skills/igniteui-blazor-components/references/data-display.md

@@ -110,11 +110,12 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbCardModule));
     <IgbCardActions>
         <IgbButton slot="start" Variant="@ButtonVariant.Flat">Like</IgbButton>
         <IgbButton slot="start" Variant="@ButtonVariant.Flat">Share</IgbButton>
+        <IgbButton slot="end" Variant="@ButtonVariant.Contained">Buy Now</IgbButton>
     </IgbCardActions>
 </IgbCard>
 ```
 
-Sub-components: `IgbCardMedia`, `IgbCardHeader`, `IgbCardContent`, `IgbCardActions`. Slots on `IgbCardHeader`: `thumbnail`, `title`, `subtitle`.
+Sub-components: `IgbCardMedia`, `IgbCardHeader`, `IgbCardContent`, `IgbCardActions`. Slots on `IgbCardHeader`: `thumbnail`, `title`, `subtitle`. Slots on `IgbCardActions`: `start` (left-aligned actions) and `end` (right-aligned actions).
 
 ---
 

package/templates/blazor/igb/projects/ai-config/files/skills/igniteui-blazor-generate-from-image-design/references/component-mapping.md

@@ -270,6 +270,16 @@ builder.Services.AddIgniteUIBlazor(
 <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
 ```
 
+> **If the generated view includes any full-featured grid** (`IgbGrid`, `IgbTreeGrid`, `IgbHierarchicalGrid`, `IgbPivotGrid`), also add the grid-specific stylesheet immediately after:
+> ```html
+> <link href="_content/IgniteUI.Blazor/themes/grid/light/bootstrap.css" rel="stylesheet" />
+> ```
+>
+> **If the generated view includes `IgbGridLite`**, replace both links above with the single Grid Lite stylesheet (from the `IgniteUI.Blazor.GridLite` package):
+> ```html
+> <link href="_content/IgniteUI.Blazor.GridLite/css/themes/light/bootstrap.css" rel="stylesheet" />
+> ```
+
 ### 5. JS interop script (`wwwroot/index.html` or `App.razor`)
 
 ```html

package/templates/blazor/igb/projects/ai-config/files/skills/igniteui-blazor-generate-from-image-design/references/gotchas.md

@@ -94,11 +94,11 @@ Brushes="#FF6B6B #4ECDC4 #45B7D1"
 ### `AreaFillOpacity` exists on `IgbCategoryChart`
 It does **NOT** exist on `IgbSparkline`. For sparkline fill, use the `Brush` parameter.
 
-### `IgbSparkline` has no SplineArea type — use `IgbCategoryChart` for smooth area sparklines
+### `IgbSparkline` has no SplineArea type - use `IgbCategoryChart` for smooth area sparklines
 `IgbSparkline` supports only `Line`, `Area`, `Column`, and `WinLoss` display types. `Area` renders as angular polygon fills, not smooth curves. If the design shows smooth mountain-shaped area sparklines, use a small `IgbCategoryChart` with `ChartType="CategoryChartType.SplineArea"`:
 
 ```razor
-<!-- ❌ Angular fill — no smooth curves available on IgbSparkline -->
+<!-- ❌ Angular fill - no smooth curves available on IgbSparkline -->
 <IgbSparkline DisplayType="SparklineDisplayType.Area" Brush="#5B57E8" ... />
 
 <!-- ✅ Smooth spline area sparkline -->
@@ -121,7 +121,7 @@ Pass them as bound parameters:
 <IgbCategoryChart IncludedProperties='@(new string[] { "Month", "Revenue" })' ... />
 ```
 
-### `InnerExtent` is a chart-level property — never a series-level property
+### `InnerExtent` is a chart-level property - never a series-level property
 
 `InnerExtent` controls the hole size at the center of a donut/pie chart. It is a property of the **chart** component (`IgbDoughnutChart`, `IgbPieChart`, `IgbDataPieChart`), not of any series child. Placing it on `IgbRingSeries` causes a runtime crash:
 
@@ -140,12 +140,12 @@ Correct usage:
 <IgbRingSeries InnerExtent="0.45" ... />
 ```
 
-### Set `Brushes`, `Outlines`, and visual parameters inline — not via `@ref` in `OnAfterRenderAsync`
+### Set `Brushes`, `Outlines`, and visual parameters inline - not via `@ref` in `OnAfterRenderAsync`
 
 Setting visual parameters via `@ref` property assignment in `OnAfterRenderAsync` triggers Blazor warning **BL0005** (*Component parameter should not be set outside of its component*). Always pass them as **inline Razor markup attributes** instead.
 
 ```razor
-<!-- ✅ Inline markup — no BL0005 -->
+<!-- ✅ Inline markup - no BL0005 -->
 <IgbRingSeries Brushes="#CF6E7A #6C74DC #D4A84B" Outlines="#13131F #13131F #13131F" ... />
 
 <!-- ❌ BL0005 warning -->
@@ -160,7 +160,7 @@ Match `ChartType` to the curve shape in the screenshot:
 
 Do not default to `Line` or `Area` when the screenshot shows smooth curves. The difference is immediately visible and is the most common chart fidelity mistake.
 
-### Circular ring with centered percentage — choosing the right component
+### Circular ring with centered percentage - choosing the right component
 - **Thick static ring with a centred label and no needle** → `IgbDoughnutChart` + `IgbRingSeries`. Place `InnerExtent` on the chart, not the series. Overlay the label with `position: absolute` inside a `position: relative` wrapper.
 - **Thin animated spinner / loading progress** → `IgbCircularProgress`. Not a data visualisation.
 - **Needle pointer on a scale arc** → `IgbRadialGauge`.
@@ -378,6 +378,22 @@ Switch the theme `<link>` from light to dark:
 <link href="_content/IgniteUI.Blazor/themes/dark/bootstrap.css" rel="stylesheet" />
 ```
 
+> **If the view includes any full-featured grid**, switch the grid-specific stylesheet variant too:
+> ```html
+> <!-- Light -->
+> <link href="_content/IgniteUI.Blazor/themes/grid/light/bootstrap.css" rel="stylesheet" />
+> <!-- Dark -->
+> <link href="_content/IgniteUI.Blazor/themes/grid/dark/bootstrap.css" rel="stylesheet" />
+> ```
+>
+> **If the view uses `IgbGridLite`**, switch its single stylesheet instead:
+> ```html
+> <!-- Light -->
+> <link href="_content/IgniteUI.Blazor.GridLite/css/themes/light/bootstrap.css" rel="stylesheet" />
+> <!-- Dark -->
+> <link href="_content/IgniteUI.Blazor.GridLite/css/themes/dark/bootstrap.css" rel="stylesheet" />
+> ```
+
 ### CSS custom properties for dark panels
 When the design has multiple dark surface depths (e.g., sidebar darker than content area), define semantic tokens:
 ```css
@@ -414,6 +430,29 @@ Or toggle a CSS class with variable overrides (see `igniteui-blazor-theming` ski
 
 ## Blazor-specific Gotchas
 
+### RZ9986 - Dynamic CSS class on Ignite UI components
+
+Blazor raises **RZ9986: Component attributes do not support complex content** when a CSS class string is built inline on an Ignite UI component:
+
+```razor
+@* WRONG - RZ9986 build failure *@
+<IgbChip class="chip @(item == _selected ? "chip-active" : "")" />
+```
+
+Move the class logic into a C# helper method that returns the complete string:
+
+```razor
+@* RIGHT - no RZ9986 *@
+<IgbChip class="@ChipClass(item)" />
+
+@code {
+    private string ChipClass(Item item) =>
+        item == _selected ? "chip chip-active" : "chip";
+}
+```
+
+This applies to **any** `Igb*` component. The `RZ9986` issue is caused by **complex attribute content** on components (for example, mixing literal text with `@(...)` blocks in the same attribute). To avoid it, make the entire `class` value a single C# expression - either by using a helper method as shown above or by returning the full class string from one inline expression.
+
 ### Always register modules in `Program.cs`
 Every `Igb*` component needs its `IgbXxxModule` registered via `AddIgniteUIBlazor()`. If a component silently fails to render, the most common cause is a missing module registration:
 ```csharp

package/templates/blazor/igb/projects/ai-config/files/skills/igniteui-blazor-grids/SKILL.md

@@ -62,7 +62,8 @@ Before using any Ignite UI for Blazor grid component you must have:
 | NuGet package | `IgniteUI.Blazor` (licensed) for all full-featured grids; `IgniteUI.Blazor.GridLite` (MIT, separate NuGet) for Grid Lite only - grids are **not** included in `IgniteUI.Blazor.Lite` |
 | Service registration | `builder.Services.AddIgniteUIBlazor(typeof(IgbGridModule), ...)` in **Program.cs** with required module types |
 | Using directive | `@using IgniteUI.Blazor.Controls` in **_Imports.razor** |
-| CSS theme | `<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />` in **index.html** or **_Host.cshtml** |
+| CSS theme (IgbGrid / IgbTreeGrid / IgbHierarchicalGrid / IgbPivotGrid) | Add **both** in **index.html** / **_Host.cshtml**: base theme `<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />` **and** grid-specific `<link href="_content/IgniteUI.Blazor/themes/grid/light/bootstrap.css" rel="stylesheet" />` (always required when any full-featured grid is used) |
+| CSS theme (IgbGridLite) | `<link href="_content/IgniteUI.Blazor.GridLite/css/themes/light/bootstrap.css" rel="stylesheet" />` — from the `IgniteUI.Blazor.GridLite` package; do **not** use the paths above |
 | JS interop script | `<script src="_content/IgniteUI.Blazor/app.bundle.js"></script>` in **index.html** or **_Host.cshtml** |
 | Ignite UI CLI MCP | The **Ignite UI CLI MCP server** (`igniteui-cli`) available as a tool provider - see [`references/mcp-setup.md`](./references/mcp-setup.md) |
 
@@ -154,7 +155,7 @@ builder.Services.AddIgniteUIBlazor(
 | State persistence | ❌ | ✅ | ✅ | ✅ | ✅ |
 | Virtualization | ✅ | ✅ | ✅ | ✅ | ✅ |
 | Cell merging | ❌ | ✅ | ❌ | ❌ | ❌ |
-| Load on demand | ❌ | ❌ | ✅ **Exclusive** | ❌ | ❌ |
+| Load on demand | ❌ | ❌ | ✅ (JS interop via `LoadChildrenOnDemandScript`) | ✅ (`GridCreatedScript` on `IgbRowIsland` + JS interop) | ❌ |
 | Remote data ops | `DataPipelineConfiguration` | Events + noop strategies | Events + noop strategies | Events + noop strategies | N/A |
 
 ---

package/templates/blazor/igb/projects/ai-config/files/skills/igniteui-blazor-theming/SKILL.md

@@ -13,7 +13,7 @@ This skill teaches AI agents how to theme Ignite UI for Blazor applications usin
 ## Prerequisites
 
 - A Blazor project using Ignite UI for Blazor components
-- A theme CSS file linked in the host page (see [`references/common-patterns.md`](./references/common-patterns.md))
+- A theme CSS file and `_content/IgniteUI.Blazor/app.bundle.js` runtime script linked in the host page (see [`references/common-patterns.md`](./references/common-patterns.md))
 - The **Ignite UI Theming MCP server** (`igniteui-theming`) available as a tool provider
 
 > **AGENT INSTRUCTION - MCP Server Setup (REQUIRED)**
@@ -122,7 +122,7 @@ Use this as the lightweight availability check and platform reference for Blazor
 
 ### Step 2 - Generate a Palette
 
-> **Note:** For Blazor (CSS-first, no Sass pipeline), use `create_palette` with `output: "css"` to get CSS custom properties directly. Do NOT use `create_theme` for Blazor — it always outputs Sass which requires a compilation step not present in standard Blazor projects. The `create_palette` param names are `primary`/`secondary`/`surface` (not `primaryColor`/`secondaryColor`/`surfaceColor` — those belong to `create_theme`).
+> **Note:** For Blazor (CSS-first, no Sass pipeline), use `create_palette` with `output: "css"` to get CSS custom properties directly. Do NOT use `create_theme` for Blazor - it always outputs Sass which requires a compilation step not present in standard Blazor projects. **Even passing `platform: "blazor"` to `create_theme` will still produce Sass output - the platform parameter does not change the output format.** The `create_palette` param names are `primary`/`secondary`/`surface` (not `primaryColor`/`secondaryColor`/`surfaceColor` - those belong to `create_theme`).
 
 ```
 Tool: create_palette
@@ -182,6 +182,7 @@ Place generated CSS in an app stylesheet loaded after the Ignite UI theme CSS, s
 ```html
 <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
 <link href="css/app.css" rel="stylesheet" />
+<script src="_content/IgniteUI.Blazor/app.bundle.js"></script>
 ```
 
 Palette and global layout CSS normally go in `:root`. Component theme CSS goes on the generated `igc-*` selector or under a scoped wrapper selector.

package/templates/blazor/igb/projects/ai-config/files/skills/igniteui-blazor-theming/references/common-patterns.md

@@ -46,6 +46,14 @@ Add a single `<link>` tag in your host page:
 <link href="_content/IgniteUI.Blazor/themes/light/material.css" rel="stylesheet" />
 ```
 
+### Additional
+
+Also add the Ignite UI runtime script before the Blazor framework script:
+
+```html
+<script src="_content/IgniteUI.Blazor/app.bundle.js"></script>
+```
+
 ### .NET 9+ Web App - use `Assets` collection
 
 ```razor

package/templates/react/igr-ts/accordion/default/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+const constants_1 = require("../../constants");
 class IgrAccordionTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
     constructor() {
         super(__dirname);
@@ -11,7 +12,7 @@ class IgrAccordionTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTe
         this.projectType = "igr-ts";
         this.name = "Accordion";
         this.description = "basic IgrAccordion";
-        this.packages = ["igniteui-react@~19.5.2"];
+        this.packages = [constants_1.IGNITEUI_REACT_PACKAGE];
     }
 }
 module.exports = new IgrAccordionTemplate();

package/templates/react/igr-ts/avatar/default/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+const constants_1 = require("../../constants");
 class IgrAvatarTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
     constructor() {
         super(__dirname);
@@ -11,7 +12,7 @@ class IgrAvatarTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTempl
         this.projectType = "igr-ts";
         this.name = "Avatar";
         this.description = "displays an avatar with customizable shape, size, and initials.";
-        this.packages = ["igniteui-react@~19.5.2"];
+        this.packages = [constants_1.IGNITEUI_REACT_PACKAGE];
     }
 }
 module.exports = new IgrAvatarTemplate();

package/templates/react/igr-ts/badge/default/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+const constants_1 = require("../../constants");
 class IgrBadgeTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
     constructor() {
         super(__dirname);
@@ -11,7 +12,7 @@ class IgrBadgeTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTempla
         this.projectType = "igr-ts";
         this.name = "Badge";
         this.description = "displays a badge with customizable variants and styles.";
-        this.packages = ["igniteui-react@~19.5.2"];
+        this.packages = [constants_1.IGNITEUI_REACT_PACKAGE];
     }
 }
 module.exports = new IgrBadgeTemplate();

package/templates/react/igr-ts/banner/default/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+const constants_1 = require("../../constants");
 class IgrBannerTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
     constructor() {
         super(__dirname);
@@ -11,7 +12,7 @@ class IgrBannerTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTempl
         this.projectType = "igr-ts";
         this.name = "Banner";
         this.description = "basic IgrBanner";
-        this.packages = ["igniteui-react@~19.5.2"];
+        this.packages = [constants_1.IGNITEUI_REACT_PACKAGE];
     }
 }
 module.exports = new IgrBannerTemplate();

package/templates/react/igr-ts/button/default/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+const constants_1 = require("../../constants");
 class IgrButtonTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
     constructor() {
         super(__dirname);
@@ -11,7 +12,7 @@ class IgrButtonTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTempl
         this.projectType = "igr-ts";
         this.name = "Button";
         this.description = "displays a button with customizable size and content.";
-        this.packages = ["igniteui-react@~19.5.2"];
+        this.packages = [constants_1.IGNITEUI_REACT_PACKAGE];
     }
 }
 module.exports = new IgrButtonTemplate();

package/templates/react/igr-ts/button-group/default/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+const constants_1 = require("../../constants");
 class IgrButtonGroupTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
     constructor() {
         super(__dirname);
@@ -11,7 +12,7 @@ class IgrButtonGroupTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReact
         this.projectType = "igr-ts";
         this.name = "Button group";
         this.description = "basic IgrButtonGroup";
-        this.packages = ["igniteui-react@~19.5.2"];
+        this.packages = [constants_1.IGNITEUI_REACT_PACKAGE];
     }
 }
 module.exports = new IgrButtonGroupTemplate();

package/templates/react/igr-ts/calendar/default/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+const constants_1 = require("../../constants");
 class IgrCalendarTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
     constructor() {
         super(__dirname);
@@ -11,7 +12,7 @@ class IgrCalendarTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTem
         this.projectType = "igr-ts";
         this.name = "Calendar";
         this.description = "basic IgrCalendar";
-        this.packages = ["igniteui-react@~19.5.2"];
+        this.packages = [constants_1.IGNITEUI_REACT_PACKAGE];
     }
 }
 module.exports = new IgrCalendarTemplate();

package/templates/react/igr-ts/card/default/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+const constants_1 = require("../../constants");
 class IgrCardTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
     constructor() {
         super(__dirname);
@@ -11,7 +12,7 @@ class IgrCardTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplat
         this.projectType = "igr-ts";
         this.name = "Card";
         this.description = "basic IgrCard";
-        this.packages = ["igniteui-react@~19.5.2"];
+        this.packages = [constants_1.IGNITEUI_REACT_PACKAGE];
     }
 }
 module.exports = new IgrCardTemplate();

package/templates/react/igr-ts/checkbox/default/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+const constants_1 = require("../../constants");
 class IgrCheckboxTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
     constructor() {
         super(__dirname);
@@ -11,7 +12,7 @@ class IgrCheckboxTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTem
         this.projectType = "igr-ts";
         this.name = "Checkbox";
         this.description = "basic IgrCheckbox";
-        this.packages = ["igniteui-react@~19.5.2"];
+        this.packages = [constants_1.IGNITEUI_REACT_PACKAGE];
     }
 }
 module.exports = new IgrCheckboxTemplate();

package/templates/react/igr-ts/chip/default/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+const constants_1 = require("../../constants");
 class IgrChipTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
     constructor() {
         super(__dirname);
@@ -11,7 +12,7 @@ class IgrChipTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplat
         this.projectType = "igr-ts";
         this.name = "Chip";
         this.description = "basic IgrChip";
-        this.packages = ["igniteui-react@~19.5.2"];
+        this.packages = [constants_1.IGNITEUI_REACT_PACKAGE];
     }
 }
 module.exports = new IgrChipTemplate();

package/templates/react/igr-ts/circular-progress/default/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+const constants_1 = require("../../constants");
 class IgrCircularProgressTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
     constructor() {
         super(__dirname);
@@ -11,7 +12,7 @@ class IgrCircularProgressTemplate extends IgniteUIForReactTemplate_1.IgniteUIFor
         this.projectType = "igr-ts";
         this.name = "Circular Progress";
         this.description = "basic IgrCircularProgress";
-        this.packages = ["igniteui-react@~19.5.2"];
+        this.packages = [constants_1.IGNITEUI_REACT_PACKAGE];
     }
 }
 module.exports = new IgrCircularProgressTemplate();