igniteui-cli 15.2.2 → 15.3.1-beta.1

package/templates/webcomponents/igc-ts/projects/ai-config/files/skills/igniteui-wc-generate-from-image-design/references/component-mapping.md

@@ -9,18 +9,24 @@
 - [Package Requirements](#package-requirements)
 - [Import Patterns](#import-patterns)
 
+> **MCP lookup pattern (applies to all sections):**
+> - Find doc names → `list_components({ framework: "webcomponents", filter: "<keyword>" })`
+> - Usage examples and slots → `get_doc({ framework: "webcomponents", name: "<doc-name>" })`
+> - Find exact class names → `search_api({ platform: "webcomponents", query: "<keyword>" })`
+> - Full property/method/event API → `get_api_reference({ platform: "webcomponents", component: "<ClassName>" })`
+
 ## Dashboard & Layout Components
 
-| UI Pattern | Ignite UI Component | Key Properties |
-|---|---|---|
-| Top navigation bar | `IgcNavbarComponent` | `slot="start"`, default slot, `slot="end"` |
-| Side navigation | `IgcNavDrawerComponent` | `open`, `position`, default slot, `slot="mini"` |
-| Content cards/panels | `IgcCardComponent` | `<igc-card-header>`, `<igc-card-content>`, `<igc-card-actions>` |
-| Tabbed content | `IgcTabsComponent` | `<igc-tab>` children, `alignment`, `activation` |
-| Accordion sections | `IgcAccordionComponent` | `IgcExpansionPanelComponent` children |
-| Split layouts | `IgcSplitterComponent` | pane-based layout, nested split regions |
-| Tile dashboard | `IgcTileManagerComponent` | drag/resize tiles |
-| IDE-style dock layout | `IgcDockManagerComponent` | floating/docking panels (Commercial) |
+| UI Pattern | Ignite UI Component |
+|---|---|
+| Top navigation bar | `IgcNavbarComponent` |
+| Side navigation | `IgcNavDrawerComponent` |
+| Content cards/panels | `IgcCardComponent` |
+| Tabbed content | `IgcTabsComponent` |
+| Accordion sections | `IgcAccordionComponent` |
+| Split layouts | `IgcSplitterComponent` |
+| Tile dashboard | `IgcTileManagerComponent` |
+| IDE-style dock layout | `IgcDockManagerComponent` |
 
 Decision rule:
 
@@ -47,17 +53,19 @@ Component decision matrix (by visual pattern, domain-neutral):
 
 ## Chart Components
 
-| UI Pattern | Ignite UI Component | Key Properties |
-|---|---|---|
-| Area chart | `IgcCategoryChartComponent` | `chartType`, `markerTypes`, `brushes`, `outlines` |
-| Line chart | `IgcCategoryChartComponent` | `chartType`, `markerTypes`, `brushes` |
-| Column chart | `IgcCategoryChartComponent` | `chartType`, `markerTypes`|
-| Bar chart | `IgcDataChartComponent` | `IgxBarSeriesComponent`, `valueMemberPath`, `argumentMemberPath` |
-| Sparkline (mini chart) | `IgcSparklineComponent` | `displayType`, `valueMemberPath` |
-| Pie chart | `IgcPieChartComponent` | `valueMemberPath`, `labelMemberPath` |
-| Donut chart | `IgcDoughnutChartComponent` | `innerExtent`; bind data via child `IgcRingSeriesBaseComponent` with `valueMemberPath`, `labelMemberPath` |
-| Financial chart | `IgcFinancialChartComponent` | OHLC/candlestick data |
-| Complex multi-series | `IgcDataChartComponent` | multiple series plus axes |
+> Use the lookup pattern above with `filter: "chart"` to find all chart doc names.
+
+| UI Pattern | Ignite UI Component |
+|---|---|
+| Area chart | `IgcCategoryChartComponent` |
+| Line chart | `IgcCategoryChartComponent` |
+| Column chart | `IgcCategoryChartComponent` |
+| Bar chart | `IgcDataChartComponent` |
+| Sparkline (mini chart) | `IgcSparklineComponent` |
+| Pie chart | `IgcPieChartComponent` |
+| Donut chart | `IgcDoughnutChartComponent` |
+| Financial chart | `IgcFinancialChartComponent` |
+| Complex multi-series | `IgcDataChartComponent` |
 
 Decision rule:
 
@@ -67,17 +75,17 @@ Decision rule:
 
 ## Data Display Components
 
-| UI Pattern | Ignite UI Component | Key Properties |
-|---|---|---|
-| Item list | `IgcListComponent` + `IgcListItemComponent` | `slot="title"`, `slot="subtitle"`, `slot="start"`, `slot="end"` |
-| User avatar | `IgcAvatarComponent` | `initials`, `shape`, `src` |
-| Status badge | `IgcBadgeComponent` | `value`, styling |
-| Icons | `IgcIconComponent` | `name`, `collection`, styling |
-| Progress bar | `IgcLinearProgressComponent` | `value`, `max` |
-| Circular progress | `IgcCircularProgressComponent` | `value`, `max` |
-| Flat data grid | `IgcGridComponent` | Grid Lite or full Data Grid depending features |
-| Hierarchical/tree data grid | `IgcTreeGridComponent` / `IgcHierarchicalGridComponent` | hierarchical data support |
-| Filter/tag chips | `IgcChipComponent` | `removable`, `selectable` |
+| UI Pattern | Ignite UI Component |
+|---|---|
+| Item list | `IgcListComponent` + `IgcListItemComponent` |
+| User avatar | `IgcAvatarComponent` |
+| Status badge | `IgcBadgeComponent` |
+| Icons | `IgcIconComponent` |
+| Progress bar | `IgcLinearProgressComponent` |
+| Circular progress | `IgcCircularProgressComponent` |
+| Flat data grid | `IgcGridComponent` |
+| Hierarchical/tree data grid | `IgcTreeGridComponent` / `IgcHierarchicalGridComponent` |
+| Filter/tag chips | `IgcChipComponent` |
 
 Decision rule:
 
@@ -88,42 +96,33 @@ Decision rule:
 
 ## Form & Input Components
 
-| UI Pattern | Ignite UI Component | Key Properties |
-|---|---|---|
-| Text input | `IgcInputComponent` | `type`, `value`, prefix/suffix/helper slots |
-| Dropdown select | `IgcSelectComponent` | `<igc-select-item>` children, prefix/suffix slots |
-| Searchable multi-select | `IgcComboComponent` | data binding, display/value keys, selection mode |
-| Date picker | `IgcDatePickerComponent` | `value`, `min`, `max` |
-| Time or date-time entry | `IgcDateTimeInputComponent` | typed editing for date/time fields |
-| Toggle switch | `IgcSwitchComponent` | checked state, change events |
-| Checkbox | `IgcCheckboxComponent` | checked state, validation |
-| Radio button group | `IgcRadioGroupComponent` + `IgcRadioComponent` | grouped selection |
-| Slider | `IgcSliderComponent` | `min`, `max`, labels/ticks |
-| Multi-step wizard | `IgcStepperComponent` + `IgcStepComponent` | orientation, linear step flow |
-| Chip filter bar | `IgcChipComponent` or `IgcButtonGroupComponent` | choose based on chip versus segmented-control anatomy |
+| UI Pattern | Ignite UI Component |
+|---|---|
+| Text input | `IgcInputComponent` |
+| Dropdown select | `IgcSelectComponent` |
+| Searchable multi-select | `IgcComboComponent` |
+| Date picker | `IgcDatePickerComponent` |
+| Time or date-time entry | `IgcDateTimeInputComponent` |
+| Toggle switch | `IgcSwitchComponent` |
+| Checkbox | `IgcCheckboxComponent` |
+| Radio button group | `IgcRadioGroupComponent` + `IgcRadioComponent` |
+| Slider | `IgcSliderComponent` |
+| Multi-step wizard | `IgcStepperComponent` + `IgcStepComponent` |
+| Chip filter bar | `IgcChipComponent` or `IgcButtonGroupComponent` |
 
 ## Calendar & Scheduling Components
 
-| UI Pattern | Ignite UI Component | Key Properties |
-|---|---|---|
-| Calendar view | `IgcCalendarComponent` | `value`, selection mode |
-| Date range picker | `IgcDateRangePickerComponent` | `value`, range selection |
-| Month/year picker | `IgcCalendarComponent` | month/year modes when the calendar UI is primary |
+| UI Pattern | Ignite UI Component |
+|---|---|
+| Calendar view | `IgcCalendarComponent` |
+| Date range picker | `IgcDateRangePickerComponent` |
+| Month/year picker | `IgcCalendarComponent` |
 
 ## Package Requirements
 
-The main `igniteui-webcomponents` package contains general UI components (list, avatar, navbar, drawer, card, badge, progress, icon, inputs, scheduling, layout, etc.).
-
-Additional packages may be required beyond the main package:
-
-| Capability | Additional packages |
-|---|---|
-| Lightweight tabular data | `igniteui-grid-lite` |
-| Advanced grids | `igniteui-webcomponents-grids` (trial) or `@infragistics/igniteui-webcomponents-grids` (licensed) |
-| Charts / sparklines | `igniteui-webcomponents-core` + `igniteui-webcomponents-charts` (trial) or licensed equivalents |
-| Dock manager | `igniteui-dockmanager` (trial) or `@infragistics/igniteui-dockmanager` (licensed) |
+See [`igniteui-wc-choose-components`](../../igniteui-wc-choose-components/SKILL.md) for the full package routing table (general UI, grids, charts, dock manager, trial vs. licensed).
 
-Install only the packages required by the components you actually selected. Resolve the exact package layout from the current workspace before installing or importing.
+Install only the packages required by the components you actually selected.
 
 ## Import Patterns
 

package/templates/webcomponents/igc-ts/projects/ai-config/files/skills/igniteui-wc-generate-from-image-design/references/gotchas.md

@@ -28,14 +28,21 @@ Do not assume everything comes from `igniteui-webcomponents`. Advanced grids, ch
 
 ## Chart Properties
 
+> **Always use the MCP lookup pattern before coding any chart.** Chart APIs are extensive and change between versions.
+> - Find doc names → `list_components({ framework: "webcomponents", filter: "chart" })`
+> - Usage examples and slots → `get_doc({ framework: "webcomponents", name: "<doc-name>" })`
+> - Find exact class names → `search_api({ platform: "webcomponents", query: "<keyword>" })`
+> - Full property/method/event API → `get_api_reference({ platform: "webcomponents", component: "<ClassName>" })`
+
 ### Markers shown by default
 Category charts can show markers by default. If the screenshot does not show markers, set `markerTypes` to the matching no-marker option documented for the component. Confirm the exact value shape from `get_doc`.
 
-### `plotAreaBackground` does NOT exist on `igc-category-chart`
-Use CSS to style the chart container background instead.
-
-### `areaFillOpacity` exists on `IgcCategoryChartComponent`
-It does NOT exist on `IgcSparklineComponent`.
+### `plotAreaBackground` and `areaFillOpacity` are inherited — not visible in `get_api_reference`
+Both properties exist but are defined on parent classes, so `get_api_reference({ platform: "webcomponents", component: "IgcCategoryChartComponent" })` will not list them. Use `search_api` to find them:
+```ts
+chart.plotAreaBackground = 'transparent';  // inherited from IgcSeriesViewerComponent
+chart.areaFillOpacity = 0.3;               // inherited from IgcDomainChartComponent (not on IgcSparklineComponent)
+```
 
 ### `includedProperties` must be a real array
 Assign it as an array through JavaScript or TypeScript, not as a serialized string:
@@ -74,9 +81,6 @@ igc-category-chart {
 
 ## Component Properties
 
-### Avatar shape is controlled by `shape`
-Use the supported `shape` API (`circle`, `rounded`, `square`, etc. as documented for the component).
-
 ### List item title and subtitle are slots
 Use the Web Components slot anatomy:
 ```html
@@ -94,11 +98,11 @@ Use the Web Components slot anatomy:
 ```
 
 ### Nav drawer width
-The drawer sizing hooks in the current implementation are `--menu-full-width` and `--menu-mini-width`:
+Width is controlled by two CSS custom properties exposed on the host — they are **not** design tokens and won't appear in `get_component_design_tokens`. Override them directly:
 ```css
 igc-nav-drawer {
-  --menu-full-width: <extracted-sidebar-width>;
-  --menu-mini-width: <extracted-mini-drawer-width>;
+  --menu-full-width: 280px;  /* default: 240px */
+  --menu-mini-width: 56px;   /* no default — collapses to content width if unset */
 }
 ```
 

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