igniteui-cli 15.3.0 → 15.3.1-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-cli",
-  "version": "15.3.0",
+  "version": "15.3.1-beta.1",
   "description": "CLI tool for creating Ignite UI projects",
   "keywords": [
     "CLI",
@@ -66,9 +66,9 @@
     "all": true
   },
   "dependencies": {
-    "@igniteui/angular-templates": "~21.2.1530",
-    "@igniteui/cli-core": "~15.3.0",
-    "@igniteui/mcp-server": "~15.3.0",
+    "@igniteui/angular-templates": "~22.0.1531-beta.1",
+    "@igniteui/cli-core": "~15.3.1-beta.1",
+    "@igniteui/mcp-server": "~15.3.1-beta.1",
     "@inquirer/prompts": "^7.9.0",
     "chalk": "^5.3.0",
     "glob": "^11.0.0",
@@ -79,9 +79,9 @@
     "yargs": "^17.7.2"
   },
   "devDependencies": {
-    "@angular-devkit/core": "^21.0.0",
-    "@angular-devkit/schematics": "^21.0.0",
-    "@schematics/angular": "^21.0.0",
+    "@angular-devkit/core": "^22.0.0",
+    "@angular-devkit/schematics": "^22.0.0",
+    "@schematics/angular": "^22.0.0",
     "@types/jasmine": "^5.1.4",
     "@types/node": "^22.5.5",
     "@types/yargs": "^17.0.33",

package/templates/blazor/igb/projects/ai-config/files/skills/igniteui-blazor-grids/references/grid-migration.md

@@ -0,0 +1,322 @@
+# Grid Migration - Grid Lite → Premium IgbGrid
+
+> **Part of the [`igniteui-blazor-grids`](../SKILL.md) skill hub.**
+> For `IgbGrid` setup and column configuration — see [`structure.md`](./structure.md).
+> For specialized grid types including `IgbGridLite` — see [`types.md`](./types.md).
+> For cell and row editing after migration — see [`editing.md`](./editing.md).
+
+## Contents
+
+- [When to Migrate from Grid Lite to IgbGrid](#when-to-migrate-from-grid-lite-to-igbgrid)
+- [Setup](#setup)
+- [Minimal Migration Example](#minimal-migration-example)
+- [Component and API Changes](#component-and-api-changes)
+- [Cell Templates](#cell-templates)
+- [Header Templates](#header-templates)
+- [Remote Data](#remote-data)
+- [Programmatic Sort / Filter](#programmatic-sort--filter)
+- [Common Enterprise Features](#common-enterprise-features)
+- [Cleanup After Migration](#cleanup-after-migration)
+- [Key Rules](#key-rules)
+
+---
+
+## When to Migrate from Grid Lite to IgbGrid
+
+Migrate when you need any of the following features (not available in `IgbGridLite`):
+
+| Feature | Grid Lite | Premium Grid (`IgbGrid`) |
+|---|---|---|
+| Cell editing | ✗ | ✓ `Editable` on column, `RowEditable` on grid |
+| Batch editing (with undo) | ✗ | ✗ (not supported in Blazor) |
+| Row adding / deleting | ✗ | ✓ `RowEditable` + `IgbActionStrip` |
+| Row selection | ✗ | ✓ `RowSelection="GridSelectionMode.Single|Multiple"` |
+| Cell selection | ✗ | ✓ `CellSelection` |
+| Column selection | ✗ | ✓ `ColumnSelection` |
+| Paging | ✗ | ✓ `IgbPaginator` child |
+| GroupBy | ✗ | ✓ `GroupingExpressions` (IgbGrid only) |
+| Column summaries | ✗ | ✓ `HasSummary` on `IgbColumn` |
+| Column pinning | ✗ | ✓ `Pinned` on `IgbColumn` |
+| Column moving | ✗ | ✓ `Moving="true"` on grid |
+| Master-detail rows | ✗ | ✓ `IgbGrid` row expansion |
+| Excel / CSV export (toolbar) | ✗ | ✓ `IgbGridToolbarExporter` |
+| Column hiding toolbar | ✗ | ✓ `IgbGridToolbarHiding` |
+| Column pinning toolbar | ✗ | ✓ `IgbGridToolbarPinning` |
+| Advanced filtering UI | ✗ | ✓ `IgbGridToolbarAdvancedFiltering` |
+| State persistence | ✗ | ✓ `IgbGridState` |
+| Clipboard operations | ✗ | ✓ `ClipboardOptions` |
+| Action strip | ✗ | ✓ `IgbActionStrip` |
+| Row drag and drop | ✗ | ✓ `RowDraggable="true"` |
+
+---
+
+## Setup
+
+### 1. Replace the NuGet package registration
+
+```csharp
+// Remove:
+builder.Services.AddIgniteUIBlazor(typeof(IgbGridLiteModule));
+
+// Add:
+builder.Services.AddIgniteUIBlazor(typeof(IgbGridModule));
+```
+
+### 2. Replace the CSS link in `index.html`
+
+```html
+<!-- Remove: -->
+<link href="_content/IgniteUI.Blazor.GridLite/css/themes/light/bootstrap.css" rel="stylesheet" />
+
+<!-- Add: -->
+<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+<link href="_content/IgniteUI.Blazor/themes/grid/light/bootstrap.css" rel="stylesheet" />
+```
+
+### 3. Update `_Imports.razor`
+
+`IgniteUI.Blazor.Controls` covers both `IgbGridLite` and `IgbGrid` — no change needed if already present.
+
+```razor
+@using IgniteUI.Blazor.Controls
+```
+
+---
+
+## Minimal Migration Example
+
+```razor
+<!-- Before: -->
+<IgbGridLite TItem="Product" Data="@products">
+    <IgbGridLiteColumn Field="Name" Header="Name" DataType="GridLiteColumnDataType.String" Sortable Filterable Resizable />
+    <IgbGridLiteColumn Field="Price" Header="Price" DataType="GridLiteColumnDataType.Number" />
+</IgbGridLite>
+
+<!-- After: -->
+<IgbGrid @ref="grid" Data="@products" PrimaryKey="Id" AutoGenerate="false"
+         Width="100%" Height="600px" AllowFiltering="true">
+    <IgbColumn Field="Name" Header="Name" DataType="GridColumnDataType.String" Sortable="true" Filterable="true" Resizable="true" />
+    <IgbColumn Field="Price" Header="Price" DataType="GridColumnDataType.Number" Sortable="true" />
+</IgbGrid>
+
+@code {
+    private IgbGrid grid = default!;
+    private List<Product> products = new();
+}
+```
+
+**Key additions vs Grid Lite:**
+- `PrimaryKey` — required for editing, selection, and row-targeted APIs
+- `Height` — required for row virtualization
+- `AllowFiltering="true"` on the grid — enables the filter row UI; `Filterable="true"` on a column opts that column in
+- `@ref` — required for programmatic API access
+
+---
+
+## Component and API Changes
+
+| Grid Lite | Premium Grid |
+|---|---|
+| `IgbGridLite` | `IgbGrid` |
+| `IgbGridLiteColumn` | `IgbColumn` |
+| `GridLiteColumnDataType` | `GridColumnDataType` |
+| `IgbGridLiteModule` | `IgbGridModule` |
+| `IgbGridLiteSortingExpression` | `IgbSortingExpression` |
+| `IgbGridLiteFilterExpression` | `IgbFilteringExpression` |
+| Column `Key` (in sort/filter objects) | Column `FieldName` (in sort/filter objects) |
+| `TItem` generic parameter | `TItem` (unchanged) |
+| No `PrimaryKey` | `PrimaryKey` required for most features |
+
+---
+
+## Cell Templates
+
+Grid Lite has no cell templates. In `IgbGrid`, use the `BodyTemplate` render fragment on `IgbColumn`:
+
+```razor
+<IgbColumn Field="Status" Header="Status">
+    <BodyTemplate>
+        @{
+            var cell = (IgbCellTemplateContext)context;
+            var status = cell.Cell.Value?.ToString();
+        }
+        <span style="color: @(status == "Active" ? "green" : "red")">@status</span>
+    </BodyTemplate>
+</IgbColumn>
+```
+
+| | Grid Lite | Premium Grid |
+|---|---|---|
+| Cell template | Not supported | `BodyTemplate` render fragment |
+| Cell value | — | `((IgbCellTemplateContext)context).Cell.Value` |
+| Row data | — | `((IgbCellTemplateContext)context).Cell.Row.Data` |
+| Edit template | — | `InlineEditorTemplate` render fragment |
+
+---
+
+## Header Templates
+
+Grid Lite has no header templates. In `IgbGrid`, use the `HeaderTemplate` render fragment:
+
+```razor
+<IgbColumn Field="Price" Header="Price">
+    <HeaderTemplate>
+        <strong>@((context as IgbColumnTemplateContext)?.Column.Header)</strong>
+    </HeaderTemplate>
+</IgbColumn>
+```
+
+---
+
+## Remote Data
+
+For server-side sort/filter, handle the `SortingDone` / `FilteringDone` events to reload data:
+```razor
+<IgbGrid @ref="grid" Data="@data" PrimaryKey="Id" Height="600px"
+         SortingDone="OnSortingDone" FilteringDone="OnFilteringDone">
+</IgbGrid>
+
+@code {
+    private IgbGrid grid = default!;
+    private List<MyItem> data = new();
+
+
+    private async Task OnSortingDone(IgbSortingExpressionEventArgs args)
+    {
+        data = await DataService.SortAsync(args.Detail);
+        StateHasChanged();
+    }
+
+    private async Task OnFilteringDone(IgbFilteringExpressionsTreeEventArgs args)
+    {
+        data = await DataService.FilterAsync(args.Detail);
+        StateHasChanged();
+    }
+}
+```
+
+---
+
+## Programmatic Sort / Filter
+
+```razor
+@code {
+    private IgbGrid grid = default!;
+
+    // Sort
+    private async Task SortByName()
+    {
+        await grid.SortAsync(new IgbSortingExpression[]
+        {
+            new IgbSortingExpression { FieldName = "Name", Dir = SortingDirection.Asc }
+        });
+    }
+
+    private async Task ClearSorting() => await grid.ClearSortAsync();
+
+    // Filter
+    private void FilterActive()
+    {
+        var tree = new IgbFilteringExpressionsTree() { Operator = FilteringLogic.And };
+        tree.FilteringOperands = new IgbFilteringExpression[]
+        {
+            new IgbFilteringExpression { FieldName = "IsActive", ConditionName = "true", SearchVal = true }
+        };
+        grid.FilteringExpressionsTree = tree;
+    }
+
+    private async Task ClearFilters() => await grid.ClearFilterAsync();
+}
+```
+
+> In Grid Lite, sort/filter expressions used a `Key` property. In `IgbGrid`, use `FieldName`.
+
+---
+
+## Common Enterprise Features
+
+### Editing
+
+```razor
+<IgbGrid Data="@data" PrimaryKey="Id" RowEditable="true" Height="600px">
+    <IgbColumn Field="Name" Editable="true" />
+    <IgbColumn Field="Price" Editable="true" DataType="GridColumnDataType.Number" />
+</IgbGrid>
+```
+
+See [`editing.md`](./editing.md) for cell editing, row editing, validation, and custom editors.
+
+### Row Selection
+
+```razor
+<IgbGrid Data="@data" PrimaryKey="Id" RowSelection="GridSelectionMode.Multiple" Height="600px">
+    <IgbColumn Field="Name" />
+</IgbGrid>
+
+@code {
+    // Read selected rows via grid.SelectedRows
+}
+```
+
+### Paging
+
+```razor
+<IgbGrid Data="@data" PrimaryKey="Id" Height="600px">
+    <IgbPaginator PerPage="15" />
+    <IgbColumn Field="Name" />
+</IgbGrid>
+```
+
+See [`paging-remote.md`](./paging-remote.md) for remote paging and paginator configuration.
+
+### Summaries
+
+```razor
+<IgbColumn Field="Price" DataType="GridColumnDataType.Number" HasSummary="true" />
+```
+
+### Toolbar + Export
+
+```razor
+<IgbGrid Data="@data" PrimaryKey="Id" Height="600px">
+    <IgbGridToolbar>
+        <IgbGridToolbarTitle>Products</IgbGridToolbarTitle>
+        <IgbGridToolbarActions>
+            <IgbGridToolbarHiding />
+            <IgbGridToolbarPinning />
+            <IgbGridToolbarAdvancedFiltering />
+            <IgbGridToolbarExporter ExportExcel="true" ExportCSV="true" />
+        </IgbGridToolbarActions>
+    </IgbGridToolbar>
+    <IgbColumn Field="Name" />
+    <IgbColumn Field="Price" />
+</IgbGrid>
+```
+
+See [`features.md`](./features.md) for toolbar customization, export events, grouping, summaries, and action strip.
+
+---
+
+## Cleanup After Migration
+
+1. Remove `IgbGridLiteModule` registration from `Program.cs`.
+2. Remove the `IgniteUI.Blazor.GridLite` CSS `<link>` from `index.html`.
+3. Rename all `IgbGridLite` → `IgbGrid`, `IgbGridLiteColumn` → `IgbColumn` in `.razor` files.
+4. Replace `GridLiteColumnDataType` → `GridColumnDataType` enum values.
+5. In sort/filter expression objects, rename the `Key` property → `FieldName`.
+6. Remove the `IgniteUI.Blazor.GridLite` NuGet package if no `IgbGridLite` instances remain:
+   ```bash
+   dotnet remove package IgniteUI.Blazor.GridLite
+   ```
+
+---
+
+## Key Rules
+
+- `PrimaryKey` is required for editing, selection, row APIs, and `IgbActionStrip` — Grid Lite had no equivalent.
+- `Height` (or a CSS-constrained container) is required for row virtualization in `IgbGrid`.
+- `AllowFiltering="true"` must be set on the grid to show the filter row; `Filterable="true"` on a column opts that column in.
+- Cell and header templates use Blazor render fragments (`BodyTemplate`, `HeaderTemplate`, `InlineEditorTemplate`) — not callbacks or delegates.
+- For remote data, handle `SortingDone` / `FilteringDone` and reload `Data` from your server.
+- `IgbColumn.FieldName` (in expression objects) replaces `IgbGridLiteColumn.Key` used in Grid Lite sort/filter expressions.
+

package/templates/react/igr-ts/projects/ai-config/files/skills/grid-lite-to-igr-grid-migration/SKILL.md

@@ -0,0 +1,274 @@
+---
+name: grid-lite-to-igr-grid-migration
+description: Step-by-step migration guide from Grid Lite (IgrGridLite) to the premium Ignite UI for React Data Grid (IgrGrid), covering every import, registration, component name, property, event, template, sorting, filtering, and toolbar API change.
+user-invocable: true
+---
+
+# Ignite UI for React — Grid Lite → Premium Data Grid Migration
+
+## MANDATORY AGENT PROTOCOL
+
+> **DO NOT write any code from memory.** Grid APIs change between versions.
+
+Before producing migration code:
+
+1. **Read the user's existing component files** to understand current Grid Lite usage (columns, templates, data binding, `dataPipelineConfiguration`).
+2. **Use the MCP server** — call `get_doc` or `search_docs` with `framework: "react"` to confirm API details when in doubt.
+3. **Only then produce output** — base all code on verified references, not memory.
+
+---
+
+## When to Migrate from Grid Lite to Premium Grid
+
+Migrate when you need any of the following features (not available in Grid Lite):
+
+| Feature | Grid Lite | Premium Grid (`IgrGrid`) |
+|---|---|---|
+| Cell editing | ✗ | ✓ `editable`, `rowEditable` |
+| Batch editing (with undo) | ✗ | ✓ Transaction service |
+| Row adding / deleting | ✗ | ✓ `rowEditable` + `IgrActionStrip` |
+| Row selection | ✗ | ✓ `rowSelection="single|multiple"` |
+| Cell selection | ✗ | ✓ `cellSelection` |
+| Column selection | ✗ | ✓ `columnSelection` |
+| Paging | ✗ | ✓ `IgrPaginator` child |
+| GroupBy | ✗ | ✓ `groupingExpressions` |
+| Column summaries | ✗ | ✓ `hasSummary` on `IgrColumn` |
+| Column pinning | ✗ | ✓ `pinned` on `IgrColumn` |
+| Column moving | ✗ | ✓ `moving={true}` on grid |
+| Master-detail rows | ✗ | ✓ `IgrGrid` row expansion |
+| Excel / CSV export (toolbar) | ✗ | ✓ `IgrGridToolbarExporter` |
+| Column hiding toolbar | ✗ | ✓ `IgrGridToolbarHiding` |
+| Column pinning toolbar | ✗ | ✓ `IgrGridToolbarPinning` |
+| Advanced filtering UI | ✗ | ✓ `filterMode="excelStyleFilter"` / `IgrGridToolbarAdvancedFiltering` |
+| State persistence | ✗ | ✓ `IgrGridState` directive |
+| Clipboard operations | ✗ | ✓ `clipboardOptions` |
+| Action strip | ✗ | ✓ `IgrActionStrip` |
+| Row drag and drop | ✗ | ✓ `rowDraggable={true}` |
+
+---
+
+## Setup
+
+```bash
+npm install --save igniteui-react-grids
+# licensed: npm install --save @infragistics/igniteui-react-grids
+```
+
+```tsx
+import { IgrGridModule, IgrGrid, IgrColumn, IgrPaginator,
+         IgrCellTemplateContext, IgrColumnTemplateContext } from "igniteui-react-grids";
+import "igniteui-react-grids/grids/themes/light/bootstrap.css";
+
+// Required once before render — Grid Lite has no equivalent
+IgrGridModule.register();
+```
+
+> Use `@infragistics/igniteui-react-grids` and the matching CSS path for the licensed package.
+> Check `package.json` — `igniteui-grid-lite` may be a standalone dependency alongside `igniteui-react`.
+
+---
+
+## Minimal Migration Example
+
+```tsx
+import { useRef, useState } from "react";
+import { IgrGrid, IgrColumn, IgrGridModule } from "igniteui-react-grids";
+import "igniteui-react-grids/grids/themes/light/bootstrap.css";
+IgrGridModule.register();
+
+export default function MyView() {
+  const gridRef = useRef<IgrGrid>(null);
+  const [data] = useState<Product[]>([]);
+
+  return (
+    <IgrGrid ref={gridRef} data={data} primaryKey="id" autoGenerate={false}
+             height="600px" allowFiltering={true}>
+      <IgrColumn field="name" header="Name" sortable={true} filterable={true} resizable={true} />
+      <IgrColumn field="price" header="Price" dataType="number" sortable={true} />
+    </IgrGrid>
+  );
+}
+```
+
+**Key additions vs Grid Lite:**
+- `primaryKey` — required for editing, selection, row-targeted APIs
+- `height` — required for row virtualization
+- `allowFiltering={true}` on the grid — required for filter UI; `filterable={true}` on the column opts that column in
+
+---
+
+## Cell Templates
+
+Prop renamed: `cellTemplate` → `bodyTemplate`. Context type changes.
+
+```tsx
+import { IgrCellTemplateContext } from "igniteui-react-grids";
+
+const statusCell = (ctx: IgrCellTemplateContext) => (
+  <span style={{ color: ctx.cell.value === "Active" ? "green" : "red" }}>
+    {ctx.cell.value}
+  </span>
+);
+
+<IgrColumn field="status" bodyTemplate={statusCell} />
+```
+
+| | Grid Lite | Premium Grid |
+|---|---|---|
+| Prop | `cellTemplate` | `bodyTemplate` |
+| Value | `ctx.value` | `ctx.cell.value` or `ctx.implicit` |
+| Row data | `ctx.row.data` | `ctx.cell.row.data` |
+| Edit template | — | `inlineEditorTemplate` |
+
+---
+
+## Header Templates
+
+Prop name unchanged (`headerTemplate`); context type changes to `IgrColumnTemplateContext` from `igniteui-react-grids`.
+
+```tsx
+import { IgrColumnTemplateContext } from "igniteui-react-grids";
+
+const priceHeader = (ctx: IgrColumnTemplateContext) => (
+  <strong>{ctx.column.header}</strong>
+);
+
+<IgrColumn field="price" headerTemplate={priceHeader} />
+```
+
+---
+
+## Remote Data (replaces `dataPipelineConfiguration`)
+
+For server-side operations, disable local sort/filter processing first by assigning noop strategies, then listen to the done events to issue new requests.
+
+```tsx
+import { IgrGrid, IgrGridModule,
+         IgrNoopSortingStrategy, IgrNoopFilteringStrategy } from "igniteui-react-grids";
+
+// Disable built-in sort/filter so the grid does not process data locally.
+// Set these once after the grid mounts (e.g., in a useEffect or ref callback).
+useEffect(() => {
+  if (!gridRef.current) return;
+  gridRef.current.sortStrategy = IgrNoopSortingStrategy.instance();
+  gridRef.current.filterStrategy = IgrNoopFilteringStrategy.instance();
+}, []);
+```
+
+```tsx
+const handleSortingDone = async () => {
+  if (!gridRef.current) return;
+  setData(await dataService.sort(gridRef.current.sortingExpressions));
+};
+const handleFilteringDone = async () => {
+  if (!gridRef.current) return;
+  setData(await dataService.filter(gridRef.current.filteringExpressionsTree));
+};
+
+<IgrGrid ref={gridRef} data={data} primaryKey="id" height="600px"
+         onSortingDone={handleSortingDone} onFilteringDone={handleFilteringDone}>
+  {/* columns */}
+</IgrGrid>
+```
+
+---
+
+## Programmatic Sort / Filter
+
+```tsx
+import { SortingDirection, IgrNumberFilteringOperand } from "igniteui-react-grids";
+
+// fieldName + SortingDirection enum (not key + string)
+gridRef.current.sort([{ fieldName: 'name', dir: SortingDirection.Asc, ignoreCase: true }]);
+gridRef.current.clearSort('name');      // or clearSort() for all
+
+// Positional args with operand
+// Note: verify IgrNumberFilteringOperand.instance() is available in your version
+gridRef.current.filter('age', 21, IgrNumberFilteringOperand.instance().condition('greaterThan'));
+gridRef.current.clearFilter('age');     // or clearFilter() for all
+```
+
+---
+
+## Common Enterprise Features
+
+### Editing
+
+```tsx
+<IgrGrid data={data} primaryKey="id" rowEditable={true} onRowEditDone={handleRowEditDone} height="600px">
+  <IgrColumn field="name" editable={true} />
+</IgrGrid>
+```
+
+### Row Selection
+
+```tsx
+<IgrGrid data={data} primaryKey="id" rowSelection="multiple" height="600px">
+  {/* columns */}
+</IgrGrid>
+// Read: gridRef.current.selectedRows
+```
+
+### Paging
+
+```tsx
+<IgrGrid data={data} primaryKey="id" height="600px">
+  <IgrPaginator perPage={15} />
+</IgrGrid>
+```
+
+### Summaries
+
+```tsx
+<IgrColumn field="price" dataType="number" hasSummary={true} />
+```
+
+### Toolbar + Export
+
+> **Note:** `IgrExcelExporterService` / `IgrExcelExporterOptions` (programmatic export) must be imported from `"igniteui-react"`, **not** `"igniteui-react-grids"`. The toolbar approach below does not need them.
+
+```tsx
+import { IgrGrid, IgrColumn, IgrGridToolbar, IgrGridToolbarTitle,
+         IgrGridToolbarActions, IgrGridToolbarHiding, IgrGridToolbarPinning,
+         IgrGridToolbarExporter, IgrGridToolbarAdvancedFiltering,
+         IgrGridToolbarExportEventArgs, IgrGridModule } from "igniteui-react-grids";
+IgrGridModule.register();
+
+<IgrGrid data={data} primaryKey="id" height="600px" onToolbarExporting={handleExporting}>
+  <IgrGridToolbar>
+    <IgrGridToolbarTitle>Products</IgrGridToolbarTitle>
+    <IgrGridToolbarActions>
+      <IgrGridToolbarHiding />
+      <IgrGridToolbarPinning />
+      <IgrGridToolbarAdvancedFiltering />
+      <IgrGridToolbarExporter exportExcel={true} exportCSV={true} />
+    </IgrGridToolbarActions>
+  </IgrGridToolbar>
+  {/* columns */}
+</IgrGrid>
+```
+
+```tsx
+const handleExporting = (e: IgrGridToolbarExportEventArgs) => {
+  e.detail.options.fileName = "MyExport";
+  // set e.detail.cancel = true to abort
+};
+```
+
+---
+
+## Cleanup After Migration
+
+1. Remove all `dataPipelineConfiguration` usage — replace with events (see Remote Data).
+2. Remove `IgrCellContext` / `IgrHeaderContext` imports from `igniteui-react/grid-lite`.
+3. Uninstall `igniteui-grid-lite` if no Grid Lite instances remain: `npm uninstall igniteui-grid-lite`.
+
+---
+
+## Related Skills
+
+- [igniteui-react-components](../igniteui-react-components/SKILL.md) — Identify the right `Igr*` components, install, import, and use them; covers JSX patterns, events, refs, and forms. Use this after migrating to explore the full premium grid feature set.
+- [igniteui-react-customize-theme](../igniteui-react-customize-theme/SKILL.md) — Customize `IgrGrid` styling using CSS custom properties and the Ignite UI theming system.
+- [igniteui-react-optimize-bundle-size](../igniteui-react-optimize-bundle-size/SKILL.md) — Reduce bundle size after migrating to `igniteui-react-grids` with granular imports, tree-shaking, and lazy loading.
+- [igniteui-react-generate-from-image-design](../igniteui-react-generate-from-image-design/SKILL.md) — Build a full React view from a screenshot or mockup using Ignite UI components and MCP-driven theming.
+

package/templates/react/igr-ts/projects/ai-config/files/skills/igniteui-react-generate-from-image-design/reference/gotchas.md

@@ -139,8 +139,8 @@ For core UI component theming, prefer `create_component_theme` and apply the ret
 Override the drawer width using the nav drawer CSS custom properties measured from the design image:
 ```css
 igc-nav-drawer {
-  --ig-nav-drawer-size: <extracted-sidebar-width>;
-  --ig-nav-drawer-size--mini: <extracted-mini-drawer-width>;
+  --menu-full-width: <extracted-sidebar-width>;
+  --menu-mini-width: <extracted-mini-drawer-width>;
 }
 ```
 

package/templates/webcomponents/igc-ts/projects/ai-config/files/skills/igniteui-wc-migrate-grid-lite-to-premium/SKILL.md

@@ -0,0 +1,446 @@
+---
+name: igniteui-wc-migrate-grid-lite-to-premium
+description: Step-by-step migration guide from igniteui-grid-lite (IgcGridLite) to the premium igniteui-webcomponents-grids (IgcGridComponent), covering every import, class name, HTML tag, property, event, template, sorting, filtering, and theming API change.
+user-invocable: true
+---
+
+# Migrate from Grid Lite to Premium Data Grid (Web Components)
+
+## Purpose
+
+This skill automates the migration from **Grid Lite** (`igniteui-grid-lite`, MIT licensed, `<igc-grid-lite>`) to the **Premium Data Grid** (`igniteui-webcomponents-grids`, commercially licensed, `<igc-grid>`). Use it when a project outgrows Grid Lite's read-only capabilities and needs enterprise features such as editing, selection, paging, grouping, summaries, Excel export, or state persistence.
+
+## MANDATORY AGENT PROTOCOL
+
+> **DO NOT write any code from memory.** Grid APIs change between versions.
+
+Before producing migration code:
+
+1. **Identify the current Grid Lite usage** - read the user's existing TypeScript and HTML files to understand their column configuration, cell templates, data binding, and any `dataPipelineConfiguration` usage.
+2. **Use the MCP server** - call `mcp_igniteui-cli_get_api_reference` or `mcp_igniteui-cli_get_doc` (framework: `webcomponents`) to verify current API details when in doubt.
+3. **Only then produce output** - base all code on verified references, not memory.
+
+---
+
+## When to Migrate
+
+Migrate from Grid Lite to the Premium Grid when the user needs **any** of these features:
+
+| Required Feature | Grid Lite | Premium Grid |
+|---|---|---|
+| Cell / Row / Batch editing | No | Yes |
+| Row adding / deleting | No | Yes |
+| Row / Cell / Column selection | No | Yes |
+| Paging (client or remote) | No | Yes |
+| GroupBy | No | Yes |
+| Summaries (built-in & custom) | No | Yes |
+| Column pinning | No | Yes |
+| Column moving | No | Yes |
+| Master-Detail rows | No | Yes |
+| Export (Excel / CSV) | No | Yes |
+| Toolbar | No | Yes |
+| State persistence | No | Yes |
+| Advanced filtering | No | Yes |
+| Action strip | No | Yes |
+| Row drag | No | Yes |
+| Clipboard support | No | Yes |
+| Cell merging | No | Yes |
+
+> **IMPORTANT:** The upgrade path from Grid Lite is **always** to `IgcGridComponent` (`<igc-grid>`). Never recommend a different component type as a substitute.
+
+---
+
+## Step 1 - Install / Verify the Premium Package
+
+Grid Lite uses the separate `igniteui-grid-lite` npm package. The Premium Grid ships in `igniteui-webcomponents-grids` (or `@infragistics/igniteui-webcomponents-grids` for licensed builds).
+
+> **AGENT INSTRUCTION:** Check `package.json` to determine which package variant is installed. If only `igniteui-grid-lite` is present, the user needs to install the premium package.
+
+```bash
+# Remove Grid Lite
+npm uninstall igniteui-grid-lite
+
+# Open-source / trial (shows watermark)
+npm install igniteui-webcomponents-grids
+
+# OR licensed package (requires private registry)
+npm install @infragistics/igniteui-webcomponents-grids
+```
+
+## Step 2 - Update Imports and Registration
+
+**Before (Grid Lite):**
+
+```typescript
+import { IgcGridLite, IgcGridLiteColumn } from 'igniteui-grid-lite';
+import type { BaseIgcCellContext } from 'igniteui-grid-lite';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+```
+
+**After (Premium Grid):**
+
+```typescript
+// Side-effect import - registers all premium grid custom elements; must come first
+import 'igniteui-webcomponents-grids/grids/combined.js';
+
+// Type imports
+import type {
+  IgcGridComponent,
+  IgcColumnComponent,
+  IgcCellTemplateContext,
+  IgcColumnTemplateContext,
+  IgcSortingEventArgs,
+  IgcFilteringEventArgs,
+  IgcRowSelectionEventArgs,
+  IgcSortingExpression,
+} from 'igniteui-webcomponents-grids';
+
+// Value imports
+import {
+  SortingDirection,
+  IgcStringFilteringOperand,
+  IgcNumberFilteringOperand,
+  IgcBooleanFilteringOperand,
+  IgcDateFilteringOperand,
+  IgcFilteringExpressionsTree,
+  FilteringLogic,
+  IgcNoopSortingStrategy,
+  IgcNoopFilteringStrategy,
+} from 'igniteui-webcomponents-grids';
+
+// Theme - change to the grids-specific path
+// Available: light|dark x bootstrap|material|fluent|indigo
+import 'igniteui-webcomponents-grids/grids/themes/light/bootstrap.css';
+```
+
+## Step 3 - Update HTML Tags
+
+| Grid Lite | Premium Grid |
+|---|---|
+| `<igc-grid-lite>` | `<igc-grid>` |
+| `<igc-grid-lite-column>` | `<igc-column>` |
+| Bare boolean attrs (`sortable`, `filterable`, `hidden`) | Quoted values (`sortable="true"`, `filterable="true"`, `hidden="true"`) |
+| No grid-level filter toggle | `allow-filtering="true"` required on `<igc-grid>` |
+| No height requirement | `height` attribute required for row virtualization |
+
+**Before:**
+
+```html
+<igc-grid-lite id="grid" auto-generate>
+  <igc-grid-lite-column field="name" sortable filterable resizable></igc-grid-lite-column>
+  <igc-grid-lite-column field="price" data-type="number" sortable></igc-grid-lite-column>
+</igc-grid-lite>
+```
+
+**After:**
+
+```html
+<!-- height is required for row virtualization; set it here or on a fixed-height parent -->
+<igc-grid id="grid" auto-generate="true" allow-filtering="true" height="600px">
+  <igc-column field="name" sortable="true" filterable="true" resizable="true"></igc-column>
+  <igc-column field="price" data-type="number" sortable="true"></igc-column>
+</igc-grid>
+```
+
+> **Note:** `allow-filtering="true"` on `<igc-grid>` is required to enable filtering. Grid Lite had no grid-level filter toggle.
+
+## Step 4 - Update TypeScript References
+
+```typescript
+// Before
+const grid   = document.getElementById('grid') as IgcGridLite;
+const column = document.querySelector('igc-grid-lite-column[field="name"]') as IgcGridLiteColumn;
+
+// After
+const grid   = document.getElementById('grid') as IgcGridComponent;
+const column = document.querySelector('igc-column[field="name"]') as IgcColumnComponent;
+
+// grid.data = myArray  - unchanged
+```
+
+## Step 5 - Migrate Column Properties
+
+| Grid Lite Property | Premium Grid Property | Notes |
+|---|---|---|
+| `field` | `field` | Unchanged |
+| `header` | `header` | Unchanged |
+| `width` | `width` | Unchanged |
+| `hidden` | `hidden` | Unchanged |
+| `resizable` | `resizable` | Unchanged |
+| `sortable` | `sortable` | Unchanged |
+| `filterable` | `filterable` | Unchanged |
+| `dataType` | `dataType` | Premium adds `dateTime`, `time`, `currency`, `percent` |
+| `filteringCaseSensitive` | `filteringIgnoreCase` | **Logic inverted** - `true` becomes `false` |
+| `sortingCaseSensitive` | `sortingIgnoreCase` | **Logic inverted** - `true` becomes `false` |
+| `sortConfiguration: { comparer }` | `sortStrategy: IgcSortingStrategy` | Class-based (see below) |
+| _(none)_ | `editable`, `pinned`, `groupable`, `hasSummary`, `disableHiding`, `disablePinning`, `selectable`, `searchable`, `formatter`, `minWidth`, `maxWidth` | Premium-only |
+
+**Custom sort strategy migration:**
+
+```typescript
+// Before (Grid Lite) - function comparer on column
+column.sortConfiguration = { comparer: (a, b) => a.length - b.length };
+
+// After (Premium Grid) - class extending DefaultSortingStrategy
+import { DefaultSortingStrategy } from 'igniteui-webcomponents-grids';
+
+class LengthSort extends DefaultSortingStrategy {
+  override compareValues(a: string, b: string) { return a.length - b.length; }
+}
+column.sortStrategy = new LengthSort();
+```
+
+## Step 6 - Migrate Cell and Header Templates
+
+| Aspect | Grid Lite | Premium Grid |
+|---|---|---|
+| Cell template property | `column.cellTemplate` | `column.bodyTemplate` |
+| Cell context type | `BaseIgcCellContext` | `IgcCellTemplateContext` |
+| Cell value | `ctx.value` | `ctx.implicit` |
+| Row data | `ctx.row` | `ctx.cell.row.data` |
+| Header template | no params | `IgcColumnTemplateContext` param |
+
+**Cell template migration:**
+
+```typescript
+// Before (Grid Lite)
+column.cellTemplate = (ctx) => html`<span class=${ctx.value}>${ctx.value}</span>`;
+
+// After (Premium Grid)
+column.bodyTemplate = (ctx: IgcCellTemplateContext) =>
+  html`<span class=${ctx.implicit}>${ctx.implicit}</span>`;
+```
+
+**Header template migration:**
+
+```typescript
+// Before (Grid Lite) - no parameters
+column.headerTemplate = () => html`<strong>Name</strong>`;
+
+// After (Premium Grid) - receives IgcColumnTemplateContext
+column.headerTemplate = (ctx: IgcColumnTemplateContext) =>
+  html`<strong>${ctx.column.header ?? ctx.column.field}</strong>`;
+```
+
+## Step 7 - Migrate Remote Data Operations
+
+Grid Lite uses `dataPipelineConfiguration` (async callbacks). The Premium Grid uses **noop strategies + events**.
+
+**Before (Grid Lite):**
+
+```typescript
+grid.dataPipelineConfiguration = {
+  sort:   async ({ grid }) => dataService.sortRemote(grid.sortingExpressions),
+  filter: async ({ grid }) => dataService.filterRemote(grid.filterExpressions),
+};
+```
+
+**After (Premium Grid):**
+
+```typescript
+const grid = document.getElementById('grid') as IgcGridComponent;
+
+// Disable built-in sort/filter so the grid does not process data locally
+grid.sortStrategy   = IgcNoopSortingStrategy.instance();
+grid.filterStrategy = IgcNoopFilteringStrategy.instance();
+
+// React to done events and reload data from the server
+grid.addEventListener('sortingDone', async () => {
+  grid.data = await dataService.sortRemote(grid.sortingExpressions);
+});
+
+grid.addEventListener('filteringDone', async () => {
+  grid.data = await dataService.filterRemote(grid.filteringExpressionsTree);
+});
+```
+
+## Step 8 - Migrate Sort / Filter Events
+
+| Grid Lite Event | Premium Grid Event | Notes |
+|---|---|---|
+| `sorting` | `sorting` | Same name - both cancellable (`e.detail.cancel = true`) |
+| `sorted` | `sortingDone` | Name changed - `CustomEvent<IgcSortingExpression[]>` |
+| `filtering` | `filtering` | Same name - both cancellable |
+| `filtered` | `filteringDone` | Name changed - `CustomEvent<IgcFilteringExpressionsTree>` |
+
+```typescript
+// Cancel a sort before it applies
+grid.addEventListener('sorting', (e: CustomEvent<IgcSortingEventArgs>) => {
+  e.detail.cancel = true;
+});
+
+// React after sort completes
+grid.addEventListener('sortingDone', (e: CustomEvent<IgcSortingExpression[]>) => {
+  console.log('Sorted by', e.detail);
+});
+
+// Cancel a filter before it applies
+grid.addEventListener('filtering', (e: CustomEvent<IgcFilteringEventArgs>) => {
+  e.detail.cancel = true;
+});
+
+// React after filter completes
+grid.addEventListener('filteringDone', (e: CustomEvent<IgcFilteringExpressionsTree>) => {
+  console.log('Filter tree', e.detail);
+});
+```
+
+## Step 9 - Migrate Programmatic Sort / Filter API
+
+**Grid Lite API:**
+
+```typescript
+grid.sort({ key: 'name', direction: 'ascending' });
+grid.filter({ key: 'age', condition: 'greaterThan', searchTerm: 21 });
+grid.clearSort();
+grid.clearFilter();
+```
+
+**Premium Grid API:**
+
+```typescript
+import { SortingDirection, IgcNumberFilteringOperand } from 'igniteui-webcomponents-grids';
+
+// Sorting - fieldName + SortingDirection enum (Asc = 1, Desc = 2, None = 0)
+grid.sort([{ fieldName: 'name', dir: SortingDirection.Asc, ignoreCase: true }]);
+grid.clearSort('name');   // clear one column
+grid.clearSort();           // clear all
+
+// Filtering - positional arguments with typed operand instances
+grid.filter('age', 21, IgcNumberFilteringOperand.instance().condition('greaterThan'), true);
+grid.clearFilter('age');   // clear one column
+grid.clearFilter();          // clear all
+
+// Multi-column filtering via expression tree
+const tree = new IgcFilteringExpressionsTree(FilteringLogic.And);
+tree.filteringOperands.push({
+  fieldName: 'age',
+  condition: IgcNumberFilteringOperand.instance().condition('greaterThan'),
+  searchVal: 21,
+  ignoreCase: true,
+});
+grid.filteringExpressionsTree = tree;
+```
+
+**Key expression shape changes:**
+
+| Aspect | Grid Lite | Premium Grid |
+|---|---|---|
+| Sort target field | `key` | `fieldName` |
+| Sort direction | `direction: 'ascending'` (string) | `dir: SortingDirection.Asc` (enum) |
+| Filter target field | `key` | `fieldName` |
+| Filter search value | `searchTerm` | `searchVal` (expression tree) |
+| Case sensitivity (sort) | `caseSensitive: true` | `ignoreCase: false` (**inverted**) |
+| Case sensitivity (filter) | `caseSensitive: true` | `ignoreCase: false` (**inverted**) |
+| Filter criteria | `criteria` string | `FilteringLogic` enum on the tree |
+
+---
+
+## Adding Enterprise Features Post-Migration
+
+Once on the Premium Grid, enable the features that motivated the migration:
+
+### Row Editing
+
+```html
+<igc-grid id="grid" row-editable="true" primary-key="id" height="600px">
+  <igc-column field="name" editable="true"></igc-column>
+  <igc-column field="price" data-type="number" editable="true"></igc-column>
+</igc-grid>
+```
+
+> **Note:** `primary-key` is strongly recommended whenever editing, selection, or row-targeted APIs (`getRowByKey`, row pinning, transactions) are used. Without it the grid falls back to object identity, which breaks across virtualization and remote data.
+
+### Row Selection
+
+```html
+<igc-grid id="grid" row-selection="multiple" primary-key="id" height="600px">
+  <!-- columns -->
+</igc-grid>
+```
+
+```typescript
+grid.addEventListener('rowSelectionChanging', (e: CustomEvent<IgcRowSelectionEventArgs>) => {
+  console.log('Selected rows:', e.detail.added);
+});
+```
+
+### Paging
+
+```html
+<igc-grid id="grid" primary-key="id" height="600px">
+  <!-- columns -->
+  <igc-paginator per-page="15"></igc-paginator>
+</igc-grid>
+```
+
+### GroupBy
+
+```html
+<igc-grid id="grid" primary-key="id" height="600px">
+  <igc-column field="category" groupable="true"></igc-column>
+</igc-grid>
+```
+
+```typescript
+grid.groupBy([{ fieldName: 'category', dir: SortingDirection.Asc }]);
+```
+
+### Column Pinning
+
+```typescript
+const column = grid.getColumnByName('name');
+column.pin();    // pin to start (default)
+column.unpin();
+```
+
+### Summaries
+
+```html
+<igc-column field="price" data-type="number" has-summary="true"></igc-column>
+```
+
+### Toolbar (Column Hiding, Pinning, Export)
+
+```html
+<igc-grid id="grid" auto-generate="true" height="600px">
+  <igc-grid-toolbar>
+    <igc-grid-toolbar-title>My Grid</igc-grid-toolbar-title>
+    <igc-grid-toolbar-actions>
+      <igc-grid-toolbar-advanced-filtering></igc-grid-toolbar-advanced-filtering>
+      <igc-grid-toolbar-hiding></igc-grid-toolbar-hiding>
+      <igc-grid-toolbar-pinning></igc-grid-toolbar-pinning>
+      <igc-grid-toolbar-exporter></igc-grid-toolbar-exporter>
+    </igc-grid-toolbar-actions>
+  </igc-grid-toolbar>
+  <!-- columns -->
+</igc-grid>
+```
+
+### Advanced Filtering Dialog
+
+```typescript
+grid.allowAdvancedFiltering = true;
+grid.openAdvancedFilteringDialog();
+```
+
+### Excel-Style Filter UI
+
+```typescript
+grid.filterMode = 'excelStyleFilter';  // default is 'quickFilter'
+```
+
+### Batch Editing
+
+```html
+<igc-grid id="grid" batch-editing="true" row-editable="true" primary-key="id" height="600px">
+  <igc-column field="name" editable="true"></igc-column>
+</igc-grid>
+```
+
+---
+## Related Skills
+
+- **[`igniteui-wc-integrate-with-framework`](../igniteui-wc-integrate-with-framework/SKILL.md)** - Framework integration setup
+- **[`igniteui-wc-customize-component-theme`](../igniteui-wc-customize-component-theme/SKILL.md)** - Theming and styling
+- **[`igniteui-wc-choose-components`](../igniteui-wc-choose-components/SKILL.md)** - Choosing the right grid component