igniteui-cli 15.0.0-rc.2 → 15.0.0

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

@@ -1,6 +1,5 @@
-import { IFileSystem } from "@igniteui/cli-core";
 import { CommandModule } from "yargs";
-export declare function configureMCP(fileSystem?: IFileSystem): void;
+export declare function configureMCP(): void;
 export declare function configureSkills(): void;
 export declare function configure(skills?: boolean): void;
 declare const command: CommandModule;

package/lib/commands/ai-config.js

@@ -1,27 +1,4 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -36,50 +13,13 @@ exports.configureMCP = configureMCP;
 exports.configureSkills = configureSkills;
 exports.configure = configure;
 const cli_core_1 = require("@igniteui/cli-core");
-const path = __importStar(require("path"));
-const IGNITEUI_SERVER_KEY = "igniteui-cli";
-const IGNITEUI_THEMING_SERVER_KEY = "igniteui-theming";
-const igniteuiServer = {
-    command: "npx",
-    args: ["-y", "igniteui-cli@next", "mcp"]
-};
-const igniteuiThemingServer = {
-    command: "npx",
-    args: ["-y", "igniteui-theming", "igniteui-theming-mcp"]
-};
-function getConfigPath() {
-    return path.join(process.cwd(), ".vscode", "mcp.json");
-}
-function readJson(filePath, fallback, fileSystem) {
-    try {
-        return JSON.parse(fileSystem.readFile(filePath));
-    }
-    catch (_a) {
-        return fallback;
-    }
-}
-function writeJson(filePath, data, fileSystem) {
-    fileSystem.writeFile(filePath, JSON.stringify(data, null, 2) + "\n");
-}
-function configureMCP(fileSystem = new cli_core_1.FsFileSystem()) {
-    const configPath = getConfigPath();
-    const config = readJson(configPath, { servers: {} }, fileSystem);
-    config.servers = config.servers || {};
-    let modified = false;
-    if (!config.servers[IGNITEUI_SERVER_KEY]) {
-        config.servers[IGNITEUI_SERVER_KEY] = igniteuiServer;
-        modified = true;
-    }
-    if (!config.servers[IGNITEUI_THEMING_SERVER_KEY]) {
-        config.servers[IGNITEUI_THEMING_SERVER_KEY] = igniteuiThemingServer;
-        modified = true;
-    }
+function configureMCP() {
+    const modified = (0, cli_core_1.addMcpServers)(cli_core_1.VS_CODE_MCP_PATH);
     if (!modified) {
-        cli_core_1.Util.log(` Ignite UI MCP servers already configured in ${configPath}`);
+        cli_core_1.Util.log(` Ignite UI MCP servers already configured in ${cli_core_1.VS_CODE_MCP_PATH}`);
         return;
     }
-    writeJson(configPath, config, fileSystem);
-    cli_core_1.Util.log(cli_core_1.Util.greenCheck() + ` MCP servers configured in ${configPath}`);
+    cli_core_1.Util.log(cli_core_1.Util.greenCheck() + ` MCP servers configured in ${cli_core_1.VS_CODE_MCP_PATH}`);
 }
 function configureSkills() {
     const result = (0, cli_core_1.copyAISkillsToProject)();

package/lib/templates/IgniteUIForReactTemplate.d.ts

@@ -12,6 +12,7 @@ export declare class IgniteUIForReactTemplate implements Template {
     framework: string;
     projectType: string;
     hasExtraConfiguration: boolean;
+    isHidden: boolean;
     packages: any[];
     delimiters: import("@igniteui/cli-core").TemplateDelimiters;
     protected widget: string;

package/lib/templates/IgniteUIForReactTemplate.js

@@ -40,6 +40,7 @@ class IgniteUIForReactTemplate {
         this.dependencies = [];
         this.framework = "react";
         this.hasExtraConfiguration = false;
+        this.isHidden = false;
         this.packages = [];
         this.delimiters = cli_core_1.defaultDelimiters;
     }

package/lib/templates/IgniteUIForWebComponentsTemplate.d.ts

@@ -11,6 +11,7 @@ export declare class IgniteUIForWebComponentsTemplate implements Template {
     framework: string;
     projectType: string;
     hasExtraConfiguration: boolean;
+    isHidden: boolean;
     packages: any[];
     dependencies: TemplateDependency[];
     delimiters: import("@igniteui/cli-core").TemplateDelimiters;

package/lib/templates/IgniteUIForWebComponentsTemplate.js

@@ -38,6 +38,7 @@ class IgniteUIForWebComponentsTemplate {
         this.framework = "webcomponents";
         this.projectType = "igc-ts";
         this.hasExtraConfiguration = false;
+        this.isHidden = false;
         this.packages = [];
         this.dependencies = [];
         this.delimiters = cli_core_1.defaultDelimiters;

package/lib/templates/jQueryTemplate.d.ts

@@ -15,6 +15,7 @@ export declare class jQueryTemplate implements Template {
     framework: string;
     projectType: string;
     hasExtraConfiguration: boolean;
+    isHidden: boolean;
     packages: any[];
     delimiters: import("@igniteui/cli-core").TemplateDelimiters;
     private configFile;

package/lib/templates/jQueryTemplate.js

@@ -34,6 +34,7 @@ class jQueryTemplate {
     constructor(rootPath) {
         this.rootPath = rootPath;
         this.framework = "jquery";
+        this.isHidden = false;
         this.packages = [];
         this.delimiters = cli_core_1.defaultDelimiters;
         this.configFile = "ignite-cli-views.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-cli",
-  "version": "15.0.0-rc.2",
+  "version": "15.0.0",
   "description": "CLI tool for creating Ignite UI projects",
   "keywords": [
     "CLI",
@@ -66,9 +66,9 @@
     "all": true
   },
   "dependencies": {
-    "@igniteui/angular-templates": "~21.1.1500-rc.2",
-    "@igniteui/cli-core": "~15.0.0-rc.2",
-    "@igniteui/mcp-server": "~15.0.0-rc.2",
+    "@igniteui/angular-templates": "~21.2.1500",
+    "@igniteui/cli-core": "~15.0.0",
+    "@igniteui/mcp-server": "~15.0.0",
     "@inquirer/prompts": "^7.9.0",
     "@types/yargs": "^17.0.33",
     "chalk": "^5.3.0",

package/templates/jquery/js/projects/empty/index.js

@@ -43,6 +43,7 @@ class EmptyProject {
         this.framework = "jquery";
         this.projectType = "js";
         this.hasExtraConfiguration = false;
+        this.isHidden = false;
         this.routesFile = "bs-routes.json";
         this.delimiters = cli_core_1.defaultDelimiters;
     }

package/templates/react/igr-ts/grid/basic/index.js

@@ -14,7 +14,7 @@ class GridTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
         this.projectType = "igr-ts";
         this.components = ["Grid"];
         this.controlGroup = "Data Grids";
-        this.packages = ["igniteui-react-grids@~19.6.0"];
+        this.packages = ["igniteui-react-grids@~19.6.1"];
         this.hasExtraConfiguration = false;
     }
 }

package/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-components/SKILL.md

@@ -8,6 +8,24 @@ user-invocable: true
 
 This skill covers everything from identifying the right component for a UI requirement to installing, setting up, and using Ignite UI for React components — including JSX patterns, event handling, refs, controlled/uncontrolled form components, and TypeScript.
 
+## Before You Answer
+
+- Do not guess package names or import paths from memory.
+- First identify the component family, then read the relevant reference files from the Content Guide below.
+- Check `package.json` and keep public or licensed package names consistent.
+- If the required package is not present in `package.json`, add or install the correct Ignite UI dependency first. Absence from `package.json` does not mean the package is invalid.
+
+### Package Routing
+
+| Component family | Install packages | Import from |
+|---|---|---|
+| Core UI components | `igniteui-react` | `igniteui-react` |
+| Advanced grids | `igniteui-react-grids` (trial) `@infragistics/igniteui-react-grids` (licensed) | `igniteui-react-grids` |
+| Grid Lite | `igniteui-react`, `igniteui-grid-lite` | `igniteui-react`, `igniteui-grid-lite` |
+| Charts | `igniteui-react-charts` (trial) `@infragistics/igniteui-react-charts` (licensed) | `igniteui-react-charts` |
+| Gauges | `igniteui-react-gauges` (trial) `@infragistics/igniteui-react-gauges` (licensed) | `igniteui-react-gauges` |
+| Maps | `igniteui-react-maps` (trial) `@infragistics/igniteui-react-maps` (licensed) | `igniteui-react-maps` |
+
 ## Example Usage
 
 - "What component should I use to display a list of items with actions?"
@@ -58,9 +76,11 @@ This skill is organized into focused reference files. Load the appropriate file
 
 ---
 
-## Quick Start
+## Quick Start (Core UI Example)
+
+This example uses the core UI package `igniteui-react`. For grids, Grid Lite, charts, gauges, and maps, use the package routing table above first.
 
-### 1. Install
+### 1. Install Core UI Package
 
 ```bash
 npm install igniteui-react
@@ -143,7 +163,7 @@ Use [COMPONENT-CATALOGUE.md](./reference/COMPONENT-CATALOGUE.md) to map any UI n
 
 ## Best Practices
 
-1. **Start with the MIT package** (`igniteui-react`) — it covers most common UI needs
+1. **Use the package routing table first**
 2. **Import theme CSS first** — components need it to render correctly
 3. **Register chart/gauge/map modules** — call `.register()` at module level
 4. **Wrap charts/gauges/maps in sized containers** — they need explicit dimensions

package/templates/react/igr-ts/projects/_base/files/__dot__vscode/mcp.json

@@ -2,7 +2,7 @@
   "servers": {
     "igniteui-cli": {
       "command": "npx",
-      "args": ["-y", "igniteui-cli@next", "mcp"]
+      "args": ["-y", "igniteui-cli", "mcp"]
     },
     "igniteui-theming": {
       "command": "npx",

package/templates/react/igr-ts/projects/_base/files/package.json

@@ -15,7 +15,7 @@
     "@testing-library/react": "^16.3.0",
     "element-internals-polyfill": "^3.0.2",
     "functions-have-names": "^1.2.3",
-    "igniteui-react": "~19.6.0",
+    "igniteui-react": "~19.6.1",
     "react": "^19.2.4",
     "react-app-polyfill": "^3.0.0",
     "react-dom": "^19.2.4",

package/templates/react/igr-ts/projects/_base/index.d.ts

@@ -7,6 +7,7 @@ export declare class BaseIgrTsProject implements ProjectTemplate {
     projectType: string;
     dependencies: string[];
     hasExtraConfiguration: boolean;
+    isHidden: boolean;
     delimiters: import("@igniteui/cli-core").TemplateDelimiters;
     get templatePaths(): string[];
     generateConfig(name: string, theme: string, ...options: any[]): {

package/templates/react/igr-ts/projects/_base/index.js

@@ -43,6 +43,7 @@ class BaseIgrTsProject {
         this.framework = "react";
         this.projectType = "tsx";
         this.hasExtraConfiguration = false;
+        this.isHidden = true;
         this.delimiters = cli_core_1.defaultDelimiters;
     }
     get templatePaths() {

package/templates/react/igr-ts/projects/_base_with_home/index.d.ts

@@ -8,6 +8,7 @@ export declare class BaseWithHomeIgrTsProject extends BaseIgrTsProject implement
     framework: string;
     projectType: string;
     hasExtraConfiguration: boolean;
+    isHidden: boolean;
     get templatePaths(): string[];
 }
 declare const _default: BaseWithHomeIgrTsProject;

package/templates/react/igr-ts/projects/_base_with_home/index.js

@@ -36,6 +36,7 @@ class BaseWithHomeIgrTsProject extends _base_1.BaseIgrTsProject {
         this.framework = "react";
         this.projectType = "igr-ts";
         this.hasExtraConfiguration = false;
+        this.isHidden = true;
     }
     get templatePaths() {
         return [...super.templatePaths, path.join(__dirname, "files")];

package/templates/react/igr-ts/projects/base/index.d.ts

@@ -8,6 +8,7 @@ export declare class BasePageIgrTsProject extends BaseIgrTsProject implements Pr
     framework: string;
     projectType: string;
     hasExtraConfiguration: boolean;
+    isHidden: boolean;
     get templatePaths(): string[];
 }
 declare const _default: BasePageIgrTsProject;

package/templates/react/igr-ts/projects/base/index.js

@@ -36,6 +36,7 @@ class BasePageIgrTsProject extends _base_1.BaseIgrTsProject {
         this.framework = "react";
         this.projectType = "igr-ts";
         this.hasExtraConfiguration = false;
+        this.isHidden = true;
     }
     get templatePaths() {
         return [...super.templatePaths, path.join(__dirname, "files")];

package/templates/react/igr-ts/projects/empty/index.d.ts

@@ -8,6 +8,7 @@ export declare class EmptyIgrTsProject extends BaseWithHomeIgrTsProject implemen
     framework: string;
     projectType: string;
     hasExtraConfiguration: boolean;
+    isHidden: boolean;
     get templatePaths(): string[];
 }
 declare const _default: EmptyIgrTsProject;

package/templates/react/igr-ts/projects/empty/index.js

@@ -36,6 +36,7 @@ class EmptyIgrTsProject extends _base_with_home_1.BaseWithHomeIgrTsProject {
         this.framework = "react";
         this.projectType = "igr-ts";
         this.hasExtraConfiguration = false;
+        this.isHidden = false;
     }
     get templatePaths() {
         return [...super.templatePaths, path.join(__dirname, "files")];

package/templates/react/igr-ts/projects/top-nav/index.d.ts

@@ -8,6 +8,7 @@ export declare class TopNavIgrTsProject extends BaseWithHomeIgrTsProject impleme
     framework: string;
     projectType: string;
     hasExtraConfiguration: boolean;
+    isHidden: boolean;
     get templatePaths(): string[];
 }
 declare const _default: TopNavIgrTsProject;

package/templates/react/igr-ts/projects/top-nav/index.js

@@ -36,6 +36,7 @@ class TopNavIgrTsProject extends _base_with_home_1.BaseWithHomeIgrTsProject {
         this.framework = "react";
         this.projectType = "igr-ts";
         this.hasExtraConfiguration = false;
+        this.isHidden = false;
     }
     get templatePaths() {
         return [...super.templatePaths, path.join(__dirname, "files")];

package/templates/webcomponents/igc-ts/card/default/files/src/app/__path__/__filePrefix__.ts

@@ -2,10 +2,12 @@ import { html, css, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import {
   defineComponents,
+  IgcButtonComponent,
   IgcCardComponent,
+  IgcIconButtonComponent,
 } from 'igniteui-webcomponents';
 
-defineComponents(IgcCardComponent);
+defineComponents(IgcCardComponent, IgcButtonComponent, IgcIconButtonComponent);
 
 @customElement('app-$(path)')
 export default class $(ClassName) extends LitElement {
@@ -20,7 +22,7 @@ export default class $(ClassName) extends LitElement {
       <igc-card>
         <igc-card-media style="max-height: 194px">
           <img
-            src="https://images.unsplash.com/photo-1518235506717-e1ed3306a89b?ixlib=rb-1.2.1&auto=format&fit=crop&w=320&q=180"
+            src="https://images.unsplash.com/photo-1518235506717-e1ed3306a89b?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=320&amp;q=180"
           />
         </igc-card-media>
         <igc-card-header>
@@ -46,9 +48,9 @@ export default class $(ClassName) extends LitElement {
           style="height: 1px; margin: 0 0 8px 0; background-color: rgba(0,0,0, 0.2); border: 0px"
         />
         <igc-card-actions>
-          <igc-button slot="start" variant="flat">Like</igc-button>
-          <igc-button slot="start" variant="flat">Learn More</igc-button>
-          <igc-icon slot="end" name="home" collection="default"></igc-icon>
+          <igc-button slot="start">Like</igc-button>
+          <igc-button slot="start">Learn More</igc-button>
+          <igc-icon-button slot="end" name="home" collection="default"></igc-icon-button>
         </igc-card-actions>
       </igc-card>
     `;

package/templates/webcomponents/igc-ts/dock-manager/default/files/src/app/__path__/__filePrefix__.ts

@@ -3,7 +3,7 @@ import { customElement, state } from 'lit/decorators.js';
 import {
   defineComponents,
   IgcDockManagerComponent,
-  IgcDockManagerLayout,
+  type IgcDockManagerLayout,
 } from 'igniteui-dockmanager';
 
 defineComponents(IgcDockManagerComponent);

package/templates/webcomponents/igc-ts/grid/default/files/src/app/__path__/__filePrefix__.ts

@@ -1,6 +1,6 @@
 import { html, css, LitElement } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import { IgcGridComponent, IgcGroupingExpression, SortingDirection } from 'igniteui-webcomponents-grids';
+import { IgcGridComponent, type IgcGroupingExpression, SortingDirection } from 'igniteui-webcomponents-grids';
 
 import gridThemeLightMaterial from 'igniteui-webcomponents-grids/grids/themes/light/material.css?inline'
 

package/templates/webcomponents/igc-ts/grid/grid-editing/files/src/app/__path__/__filePrefix__.ts

@@ -1,6 +1,6 @@
 import { css, html, LitElement } from 'lit';
 import { customElement, query, state } from 'lit/decorators.js';
-import { defineComponents, IgcButtonComponent, IgcCheckboxChangeEventArgs, IgcSwitchComponent } from 'igniteui-webcomponents';
+import { defineComponents, IgcButtonComponent, type IgcCheckboxChangeEventArgs, IgcSwitchComponent } from 'igniteui-webcomponents';
 import {
   IgcGridComponent
 } from 'igniteui-webcomponents-grids';

package/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/README.md

@@ -13,6 +13,7 @@ Skills are structured instructions that help AI agents understand and execute co
 | [igniteui-wc-choose-components](./igniteui-wc-choose-components/SKILL.md)                   | Identify the right components for a UI pattern and navigate to official docs/demos | Deciding which components to use      |
 | [igniteui-wc-integrate-with-framework](./igniteui-wc-integrate-with-framework/SKILL.md)     | Integrate components into React, Angular, Vue, or vanilla JS applications          | Setting up components in your project |
 | [igniteui-wc-customize-component-theme](./igniteui-wc-customize-component-theme/SKILL.md)   | Customize styling using CSS custom properties, parts, and theming system           | Applying custom brand colors/styles   |
+| [igniteui-wc-generate-from-image-design](./igniteui-wc-generate-from-image-design/SKILL.md) | Implement a view from a screenshot or mockup using Ignite UI Web Components        | Converting a design image into UI     |
 | [igniteui-wc-optimize-bundle-size](./igniteui-wc-optimize-bundle-size/SKILL.md)             | Reduce bundle size by importing only needed components and lazy loading            | Optimizing production performance     |
 
 ## How to Use
@@ -22,12 +23,14 @@ When working with an AI agent like GitHub Copilot, reference skills by name or a
 ### Natural Questions
 - "How do I integrate igniteui-webcomponents with React?"
 - "Help me customize the button colors to match my brand"
+- "Build this screenshot with Ignite UI Web Components"
 - "My bundle size is too large, how can I reduce it?"
 - "Show me how to use these components in Vue"
 
 ### Direct Skill Reference
 - "Follow the integrate-with-framework skill for my Angular app"
 - "Use the customize-component-theme skill to help me style components"
+- "Use the generate-from-image-design skill to implement this mockup"
 - "Apply the optimize-bundle-size skill to reduce my bundle"
 
 ## Skill Structure

package/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-choose-components/SKILL.md

@@ -8,6 +8,12 @@ user-invocable: true
 
 This skill helps AI agents and developers identify the best Ignite UI components for any UI requirement, then provides direct links to official documentation, usage examples, and API references.
 
+## Before You Answer
+
+- Choose the package before writing imports or install steps.
+- If the required package is not present in `package.json`, add or install the correct Ignite UI dependency first. Absence from `package.json` does not mean the package is invalid.
+- If the user also needs setup or code, then load [igniteui-wc-integrate-with-framework](../igniteui-wc-integrate-with-framework/SKILL.md).
+
 ## Example Usage
 
 - "What component should I use to display a list of items with actions?"
@@ -46,10 +52,31 @@ Ignite UI for Web Components is distributed across several packages depending on
 | [`igniteui-webcomponents-grids`](https://www.npmjs.com/package/igniteui-webcomponents-grids) | Commercial | `npm install igniteui-webcomponents-grids` (trial) | Advanced data grids (Data Grid, Tree Grid, Hierarchical Grid, Pivot Grid) with many built-in functionalities  |
 | [`igniteui-grid-lite`](https://www.npmjs.com/package/igniteui-grid-lite) | MIT | `npm install igniteui-grid-lite` | Lightweight data grid for simpler tabular data |
 | [`igniteui-dockmanager`](https://www.npmjs.com/package/igniteui-dockmanager) | Commercial | `npm install igniteui-dockmanager` (trial) | Windowing / docking layouts (IDE-style panels) |
+| [`igniteui-webcomponents-grids`](https://www.npmjs.com/package/igniteui-webcomponents-grids) | Commercial | `npm install igniteui-webcomponents-grids` (trial) | Advanced data grids (Data Grid, Tree Grid, Hierarchical Grid, Pivot Grid) with many built-in functionalities  |
+| [`@infragistics/igniteui-webcomponents-grids`](https://packages.infragistics.com/feeds/js-licensed/@infragistics/igniteui-webcomponents-grids) | Commercial | `npm install @infragistics/igniteui-webcomponents-grids` (licensed) | Advanced data grids (Data Grid, Tree Grid, Hierarchical Grid, Pivot Grid) with many built-in functionalities  |
+| [`igniteui-grid-lite`](https://www.npmjs.com/package/igniteui-grid-lite) | MIT | `npm install igniteui-grid-lite` | Lightweight data grid for simpler tabular data |
+| [`igniteui-dockmanager`](https://www.npmjs.com/package/igniteui-dockmanager) | Commercial | `npm install igniteui-dockmanager` (trial) | Windowing / docking layouts (IDE-style panels) |
+| [`@infragistics/igniteui-dockmanager`](https://packages.infragistics.com/feeds/js-licensed/@infragistics/igniteui-dockmanager) | Commercial | `npm install @infragistics/igniteui-dockmanager` (licensed) | Windowing / docking layouts (IDE-style panels) |
 | [`igniteui-webcomponents-charts`](https://www.npmjs.com/package/igniteui-webcomponents-charts) | Commercial | `npm install igniteui-webcomponents-core igniteui-webcomponents-charts` (trial) | Charts and data visualizations (65+ chart types) |
+| [`@infragistics/igniteui-webcomponents-charts`](https://packages.infragistics.com/feeds/js-licensed/@infragistics/igniteui-webcomponents-charts) | Commercial | `npm install @infragistics/igniteui-webcomponents-core @infragistics/igniteui-webcomponents-charts` (licensed) | Charts and data visualizations (65+ chart types) |
 
 ---
 
+## Package Routing
+
+| Component family | Package |
+|---|---|
+| General UI components | `igniteui-webcomponents` |
+| Advanced grids | `igniteui-webcomponents-grids` (trial) `@infragistics/igniteui-webcomponents-grids` (licensed) |
+| Grid Lite | `igniteui-grid-lite` |
+| Dock Manager | `igniteui-dockmanager` (trial) `@infragistics/igniteui-dockmanager` (licensed) |
+| Charts | `igniteui-webcomponents-charts` (trial) `@infragistics/igniteui-webcomponents-charts` (licensed) |
+
+If the request only says "grid", choose by features:
+
+- Advanced features such as editing, paging, summaries, grouping, hierarchical data, or pivot behavior -> `igniteui-webcomponents-grids`
+- Lightweight table -> `igniteui-grid-lite`
+
 ## Component Catalogue by UI Pattern
 
 Use the table below to map a UI need to the right component, then follow the documentation link.