igniteui-cli 15.1.0 → 15.2.1-alpha.3

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

@@ -0,0 +1,180 @@
+# Layout Manager Components - Dock Manager & Tile Manager
+
+> **Part of the [`igniteui-blazor-components`](../SKILL.md) skill hub.**
+> For project setup and module registration - see [`setup.md`](./setup.md).
+
+## Contents
+
+- [Dock Manager](#dock-manager)
+  - [Basic Setup](#basic-setup)
+  - [Pane Types](#pane-types)
+  - [Layout Serialization](#layout-serialization)
+  - [Events](#events)
+- [Tile Manager](#tile-manager)
+- [Key Rules](#key-rules)
+
+---
+
+## Overview
+This reference gives high-level guidance on when to use each layout manager component, their key features, and common API members. For detailed documentation, call `get_doc` from `igniteui-cli`; use `search_api` and `get_api_reference` for Blazor API details.
+
+## Dock Manager
+
+> **Docs:** [Dock Manager](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/dock-manager)
+
+Dock Manager provides an IDE-like dockable pane layout. Users can drag panes to dock, float, pin/unpin, and close them at runtime.
+
+```csharp
+builder.Services.AddIgniteUIBlazor(typeof(IgbDockManagerModule));
+```
+
+### Basic Setup
+
+Dock Manager uses a C# layout object graph to define pane structure. Pane content is projected via named slots.
+
+```razor
+<IgbDockManager @ref="DockRef" Layout="DockLayout" style="height: 600px;">
+    <!-- Content slots - the slot name matches IgbContentPane.ContentId -->
+    <div slot="panel1">Panel 1 Content</div>
+    <div slot="panel2">Panel 2 Content</div>
+    <div slot="panel3">Panel 3 Content</div>
+</IgbDockManager>
+
+@code {
+    IgbDockManager DockRef { get; set; }
+
+    IgbDockManagerLayout DockLayout { get; set; } = new IgbDockManagerLayout
+    {
+        RootPane = new IgbSplitPane
+        {
+            PaneType = DockManagerPaneType.SplitPane,
+            Orientation = SplitPaneOrientation.Horizontal,
+            Panes = new()
+            {
+                new IgbTabGroupPane
+                {
+                    PaneType = DockManagerPaneType.TabGroupPane,
+                    Panes = new List<IgbContentPane>
+                    {
+                        new IgbContentPane
+                        {
+                            PaneType = DockManagerPaneType.ContentPane,
+                            ContentId = "panel1",
+                            Header = "Panel 1"
+                        },
+                        new IgbContentPane
+                        {
+                            PaneType = DockManagerPaneType.ContentPane,
+                            ContentId = "panel2",
+                            Header = "Panel 2"
+                        }
+                    }
+                },
+                new IgbContentPane
+                {
+                    PaneType = DockManagerPaneType.ContentPane,
+                    ContentId = "panel3",
+                    Header = "Panel 3",
+                    Size = 250
+                }
+            }
+        }
+    };
+}
+```
+
+### Pane Types
+
+| Class | Description |
+|---|---|
+| `IgbSplitPane` | Container that splits horizontally or vertically into child panes |
+| `IgbTabGroupPane` | Container that groups content panes into tabs |
+| `IgbContentPane` | Leaf pane with actual content (maps to a named slot) |
+
+Key properties on `IgbContentPane`:
+
+| Property | Type | Description |
+|---|---|---|
+| `ContentId` | `string` | Must match the `slot` name on the projected content element |
+| `Header` | `string` | Pane tab header title |
+| `Size` | `double` | Initial size (pixels or percentage depending on parent) |
+| `AllowClose` | `bool` | Shows/hides the close button (default: `true`) |
+| `AllowPinning` | `bool` | Allows pin/unpin (default: `true`) |
+| `AllowMaximize` | `bool` | Allows maximize (default: `true`) |
+| `AllowFloating` | `bool` | Allows tearing off into a floating window (default: `true`) |
+| `IsPinned` | `bool` | Set to `false` to start as an unpinned (collapsed to edge) pane |
+| `Floating` | `bool` | Starts as a floating window |
+| `FloatingLocation` | `IgbDockManagerPoint` | Initial position of a floating pane |
+| `FloatingWidth` | `double` | Initial width of a floating pane |
+| `FloatingHeight` | `double` | Initial height of a floating pane |
+
+Key properties on `IgbSplitPane`:
+
+| Property | Type | Description |
+|---|---|---|
+| `Orientation` | `SplitPaneOrientation` | `Horizontal` or `Vertical` |
+| `Panes` | pane collection | Child panes. Use the exact collection type and initialization style shown in the current MCP docs. |
+| `Size` | `double` | Size in parent context |
+
+### Layout Serialization
+
+Persisting a Dock Manager layout is version-sensitive. The current `dock-manager` MCP overview documents the layout object graph, pane content slots, styling, and keyboard behavior; it does not show a verified Blazor serialization sample in this reference. Before generating persistence code, inspect the current installed API and use only the documented event signatures and methods for that version.
+
+> **AGENT INSTRUCTION - Layout serialization:** The serialized JSON contains only pane structure and positions. It does **not** serialize the slot content. The slot content markup must remain static in the Razor template; only pane arrangement changes at runtime.
+
+### Events
+
+| Event | Description |
+|---|---|
+| `LayoutChange` | Fires when the layout is modified by user interaction (drag, close, resize) |
+| `PaneClose` | Fires when a pane is closed; `e.Detail.Panes` contains the closed pane(s) |
+| `ActivePaneChange` | Fires when the active (focused) pane changes |
+| `Splitter Resize` | Fires while a splitter is being dragged |
+
+---
+
+## Tile Manager
+
+> **Docs:** [Tile Manager](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/tile-manager)
+
+Tile Manager provides a resizable, draggable tile/widget dashboard layout.
+
+```csharp
+builder.Services.AddIgniteUIBlazor(typeof(IgbTileManagerModule));
+```
+
+```razor
+<IgbTileManager ColumnCount="4" Gap="8px" ResizeMode="@TileManagerResizeMode.Always" DragMode="@TileManagerDragMode.TileHeader">
+    <IgbTile ColSpan="2" RowSpan="1">
+        <span slot="title">Revenue Chart</span>
+        <!-- tile content -->
+    </IgbTile>
+    <IgbTile ColSpan="1" RowSpan="2">
+        <span slot="title">KPIs</span>
+        <!-- tile content -->
+    </IgbTile>
+    <IgbTile ColSpan="1">
+        <span slot="title">Recent Orders</span>
+        <!-- tile content -->
+    </IgbTile>
+</IgbTileManager>
+```
+
+Key attributes on `IgbTileManager`: `ColumnCount`, `Gap` (CSS length string such as `"8px"`), `MinColumnWidth`, `MinRowHeight`, `ResizeMode` (`TileManagerResizeMode.*`), `DragMode` (`TileManagerDragMode.*`).
+
+Key attributes on `IgbTile`: `ColSpan`, `RowSpan`, `ColStart`, `RowStart`, `DisableFullscreen`, `DisableMaximize`, `DisableResize`.
+
+Slots on `IgbTile`: `title` (header), `actions` (header action buttons), `fullscreen-action`, `maximize-action`, `side-adorner`, `corner-adorner`, `bottom-adorner`. Default slot = tile body content.
+
+Methods on `IgbTileManager`: `SaveLayout()` and `LoadLayout(string)` persist tile order, size, and position. Tile content is not serialized.
+
+---
+
+## Key Rules
+
+1. **`IgbContentPane.ContentId` must exactly match the `slot` attribute of the projected HTML element.** A mismatch causes the pane to render empty.
+2. **Dock Manager must have an explicit height** (via CSS or inline style). Without a height it renders as 0px.
+3. **Layout serialization only persists structure, not content.** Slot content is always defined in Razor markup.
+4. **`IgbTileManager` uses CSS Grid internally.** Set `ColumnCount` to control the number of columns.
+5. **Do not invent Dock Manager serialization APIs.** Use `dock-manager` and the installed API before writing persistence code.
+6. **Tile Manager serialization uses `SaveLayout()` / `LoadLayout(string)`.** The saved payload stores tile layout properties, not tile content.

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

@@ -0,0 +1,322 @@
+# Layout & Navigation Components
+
+> **Part of the [`igniteui-blazor-components`](../SKILL.md) skill hub.**
+> For project setup and module registration - see [`setup.md`](./setup.md).
+
+## Contents
+
+- [Tabs](#tabs)
+- [Stepper](#stepper)
+- [Accordion & Expansion Panel](#accordion--expansion-panel)
+- [Navbar](#navbar)
+- [Navigation Drawer](#navigation-drawer)
+- [Tree](#tree)
+- [Key Rules](#key-rules)
+
+---
+
+## Overview
+This reference gives high-level guidance on layout and navigation components, their key features, and common API members. For detailed documentation, call `get_doc` from `igniteui-cli`; use `search_api` and `get_api_reference` for Blazor API details.
+
+## Tabs
+
+> **Docs:** [Tabs](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/tabs)
+
+```csharp
+builder.Services.AddIgniteUIBlazor(typeof(IgbTabsModule));
+```
+
+```razor
+<IgbTabs>
+    <IgbTab Label="Tab 1">
+      <span>Content for tab 1</span>
+    </IgbTab>
+    <IgbTab Label="Tab 2">
+      <span>Content for tab 2</span>
+    </IgbTab>
+    <IgbTab>
+      <div slot="label">Tab 3</div>
+      <span>Content for tab 3</span>
+    </IgbTab>
+</IgbTabs>
+```
+Tab text can be set either as simple string using the `Label` property or by assigning children to the `label` slot. Any remaining children in the default slot are rendered as the tab content.
+
+For icon tabs, use the `label` slot inside `IgbTab`:
+
+```razor
+<IgbTab>
+    <IgbIcon slot="label" IconName="home" Collection="material" />
+    Home
+</IgbTab>
+```
+
+Key attributes on `IgbTabs`: `Alignment` (`TabsAlignment.Start` / `End` / `Center` / `Justify`), `Activation` (`TabsActivation.Auto` / `Manual`). On `IgbTab`: `Label`, `Disabled`, `Selected`.
+
+Events on `IgbTabs`: `Change` - fires when the selected tab changes.
+
+CSS parts: `headers`, `headers-content`, `headers-wrapper`, `header`, `selected-indicator`, `content`.
+
+---
+
+## Stepper
+
+> **Docs:** [Stepper](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/stepper)
+
+```csharp
+builder.Services.AddIgniteUIBlazor(typeof(IgbStepperModule));
+```
+
+```razor
+<IgbStepper Linear="true" Orientation="StepperOrientation.Horizontal" @ref="StepperRef">
+    <IgbStep>
+        <span slot="title">Personal Info</span>
+        <!-- step content -->
+        <IgbInput Label="Name" />
+    </IgbStep>
+    <IgbStep>
+        <span slot="title">Address</span>
+        <!-- step content -->
+    </IgbStep>
+    <IgbStep>
+        <span slot="title">Confirm</span>
+        <!-- step content -->
+    </IgbStep>
+</IgbStepper>
+
+@code {
+    IgbStepper StepperRef { get; set; }
+
+    void GoNext() => StepperRef.Next();
+    void GoPrev() => StepperRef.Prev();
+}
+```
+
+Key attributes on `IgbStepper`: `Linear` (prevents skipping steps), `Orientation` (`StepperOrientation.Horizontal` / `Vertical`), `StepType` (`StepperStepType.Indicator` / `Title` / `Full`), `TitlePosition` (`StepperTitlePosition.Bottom` / `Top` / `End` / `Start`), `HorizontalAnimation`, `VerticalAnimation`, `AnimationDuration`.
+
+Key attributes on `IgbStep`: `Complete`, `Optional`, `Disabled`, `Invalid`, `Active`.
+
+Slots on `IgbStep`: `indicator` (custom icon/number), `title`, `subtitle`.
+
+Methods on `IgbStepper`: `Next()`, `Prev()`, `NavigateTo(index)`, `Reset()`.
+
+Events: `ActiveStepChanging` (cancellable), `ActiveStepChanged`.
+
+---
+
+## Accordion & Expansion Panel
+
+> **Docs:** [Accordion](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/accordion), [Expansion Panel](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/expansion-panel)
+
+```csharp
+builder.Services.AddIgniteUIBlazor(typeof(IgbAccordionModule));
+// IgbExpansionPanel is included in IgbAccordionModule
+```
+
+```razor
+<!-- Accordion (wraps multiple expansion panels) -->
+<IgbAccordion SingleExpand="true">
+    <IgbExpansionPanel>
+        <span slot="title">Section 1</span>
+        <span slot="subtitle">Optional subtitle</span>
+        <p>Content for section 1.</p>
+    </IgbExpansionPanel>
+    <IgbExpansionPanel Open="true">
+        <span slot="title">Section 2</span>
+        <p>Content for section 2.</p>
+    </IgbExpansionPanel>
+</IgbAccordion>
+
+<!-- Standalone expansion panel -->
+<IgbExpansionPanel @ref="PanelRef">
+    <span slot="title">Details</span>
+    <p>Expanded content here.</p>
+</IgbExpansionPanel>
+
+@code {
+    IgbExpansionPanel PanelRef { get; set; }
+    void Toggle() => PanelRef.Toggle();
+}
+```
+
+Key attributes on `IgbAccordion`: `SingleExpand` (only one panel open at a time). On `IgbExpansionPanel`: `Open`, `Disabled`.
+
+Slots on `IgbExpansionPanel`: `title`, `subtitle`, `indicator` (custom expand icon).
+
+Events on `IgbExpansionPanel`: `Opening` (cancellable), `Opened`, `Closing` (cancellable), `Closed`.
+
+Methods: `Show()`, `Hide()`, `Toggle()`.
+
+---
+
+## Navbar
+
+> **Docs:** [Navbar](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/menus/navbar)
+
+```csharp
+builder.Services.AddIgniteUIBlazor(typeof(IgbNavbarModule));
+```
+
+```razor
+<IgbNavbar>
+    <IgbIconButton slot="start" IconName="menu" Collection="material" @onclick="() => DrawerRef.Toggle()" />
+    <h3>My Application</h3>
+    <IgbIconButton slot="end" IconName="search" Collection="material" />
+    <IgbIconButton slot="end" IconName="more_vert" Collection="material" />
+</IgbNavbar>
+```
+
+Slots: `start` (left content, e.g., menu button), `end` (right content, e.g., action icons). The default slot is used for the title.
+
+CSS parts: `base`, `start`, `middle`, `end`.
+
+Required theme CSS:
+
+```html
+<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+```
+
+> **AGENT INSTRUCTION:** Register icons used by `IgbNavbar` and `IgbIconButton` before relying on them in samples. Call `await iconRef.EnsureReady()` before `RegisterIconAsync()` or `RegisterIconFromTextAsync()`.
+
+---
+
+## Navigation Drawer
+
+> **Docs:** [Navigation Drawer](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/menus/navigation-drawer)
+
+```csharp
+builder.Services.AddIgniteUIBlazor(
+    typeof(IgbNavDrawerModule),
+    typeof(IgbNavDrawerItemModule),
+    typeof(IgbNavDrawerHeaderItemModule)
+);
+```
+
+```razor
+<IgbNavDrawer @ref="DrawerRef" Open="true">
+    <IgbNavDrawerHeaderItem>My App</IgbNavDrawerHeaderItem>
+
+    <IgbNavDrawerItem @ref="HomeItem" @onclick="() => Activate(HomeItem)">
+        <IgbIcon slot="icon" IconName="home" Collection="material" />
+        <span slot="content">Home</span>
+    </IgbNavDrawerItem>
+
+    <IgbNavDrawerItem @ref="SearchItem" @onclick="() => Activate(SearchItem)">
+        <IgbIcon slot="icon" IconName="search" Collection="material" />
+        <span slot="content">Search</span>
+    </IgbNavDrawerItem>
+</IgbNavDrawer>
+
+<IgbIconButton IconName="menu" Collection="material" @onclick="() => DrawerRef.Toggle()" />
+
+@code {
+    IgbNavDrawer DrawerRef { get; set; }
+    IgbNavDrawerItem HomeItem { get; set; }
+    IgbNavDrawerItem SearchItem { get; set; }
+
+    List<IgbNavDrawerItem> AllItems => new() { HomeItem, SearchItem };
+
+    void Activate(IgbNavDrawerItem item)
+    {
+        item.Active = true;
+        foreach (var i in AllItems.Where(x => x != item))
+            i.Active = false;
+    }
+}
+```
+
+Navbar integration:
+
+```razor
+<IgbNavbar>
+    <IgbIconButton slot="start" IconName="menu" Collection="material" @onclick="() => DrawerRef.Show()" />
+    <span>Home</span>
+</IgbNavbar>
+
+<IgbNavDrawer @ref="DrawerRef" Open="true" Position="NavDrawerPosition.Start">
+    <IgbNavDrawerHeaderItem>Navigation</IgbNavDrawerHeaderItem>
+
+    <IgbNavDrawerItem @ref="HomeItem" @onclick="() => Activate(HomeItem)">
+        <IgbIcon slot="icon" IconName="home" Collection="material" />
+        <span slot="content">Home</span>
+    </IgbNavDrawerItem>
+
+    <IgbNavDrawerItem @ref="SearchItem" @onclick="() => Activate(SearchItem)">
+        <IgbIcon slot="icon" IconName="search" Collection="material" />
+        <span slot="content">Search</span>
+    </IgbNavDrawerItem>
+</IgbNavDrawer>
+```
+
+Mini variant:
+
+```razor
+<IgbNavDrawer @ref="DrawerRef" Open="true">
+    <IgbNavDrawerHeaderItem>Navigation</IgbNavDrawerHeaderItem>
+
+    <IgbNavDrawerItem>
+        <IgbIcon slot="icon" IconName="home" Collection="material" />
+        <span slot="content">Home</span>
+    </IgbNavDrawerItem>
+
+    <div slot="mini">
+        <IgbNavDrawerItem>
+            <IgbIcon slot="icon" IconName="home" Collection="material" />
+        </IgbNavDrawerItem>
+    </div>
+</IgbNavDrawer>
+```
+
+Key attributes on `IgbNavDrawer`: `Open`, `Position` (`NavDrawerPosition.Start` / `End` / `Top` / `Bottom`). Use the `mini` slot to provide collapsed icon-only content.
+
+Methods: `Show()`, `Hide()`, `Toggle()`.
+
+CSS parts: `base`, `main`, `mini`.
+
+> **AGENT INSTRUCTION - IgbNavDrawer shadow DOM mechanics:**
+>
+> Regardless of `Open` state or `style` on the host, `::part(base)` is always rendered as `position: fixed; transform: translateX(-Npx)`. When the component considers itself closed it also sets `inert` on `::part(base)`. The host element itself contributes `width: 0` to the layout because the fixed part takes no space.
+>
+> This means:
+> - `Open="true"` alone makes the panel visible but it still floats over content as an overlay.
+> - `slot="mini"` content switches the component to a collapsible expand/collapse mode with an icon-only collapsed state.
+> - To make the drawer occupy real space in the layout (pinned sidebar), the shadow DOM parts must be overridden in **global CSS** (not `.razor.css`): give the host an explicit width, override `::part(base)` to `position: relative; transform: none`, hide `::part(overlay)`, and remove the `inert` attribute via JS in `OnAfterRenderAsync`. Do **not** call `DrawerRef.Show()` in `OnAfterRenderAsync` - it throws "component not ready"; CSS handles visibility instead.
+
+> **AGENT INSTRUCTION:** Icons used inside `IgbNavDrawerItem` must be registered via `IgbIcon.RegisterIconFromTextAsync()` or `RegisterIconAsync()` in `OnAfterRenderAsync(bool firstRender)` before they display. Call `await iconRef.EnsureReady()` first.
+
+---
+
+## Tree
+
+> **Docs:** [Tree](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/grids/tree)
+
+```csharp
+builder.Services.AddIgniteUIBlazor(typeof(IgbTreeModule));
+```
+
+```razor
+<IgbTree Selection="TreeSelection.Multiple">
+    <IgbTreeItem Expanded="true" Label="Documents">
+        <IgbTreeItem Label="Report.docx" />
+        <IgbTreeItem Label="Notes.txt" />
+    </IgbTreeItem>
+    <IgbTreeItem Label="Downloads">
+        <IgbTreeItem Label="archive.zip" />
+    </IgbTreeItem>
+</IgbTree>
+```
+
+Key attributes on `IgbTree`: `Selection` (`TreeSelection.None` / `Multiple` / `Cascade`). On `IgbTreeItem`: `Label`, `Expanded`, `Selected`, `Disabled`, `Active`.
+
+Slots on `IgbTreeItem`: `label` (custom label content), `indicator` (expand/collapse icon override). Nest `IgbTreeItem` children directly inside a parent `IgbTreeItem`.
+
+Events on `IgbTree`: `NodeSelectionChanging` (cancellable), `NodeSelectionChanged`, `NodeExpanded`, `NodeCollapsed`.
+
+---
+
+## Key Rules
+
+1. **Stepper with `Linear="true"` prevents users from skipping steps.** Do not set `Linear` if free navigation is intended.
+2. **Activate/deactivate `IgbNavDrawerItem` programmatically** by setting `item.Active` - there is no automatic selection tracking.
+3. **Register icons via `RegisterIconFromTextAsync` in `OnAfterRenderAsync(bool firstRender)`**, and always call `await component.EnsureReady()` first.
+4. **`IgbAccordion` with `SingleExpand="true"` closes other panels when one is opened.** This is the most common use case for accordions.

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

@@ -0,0 +1,78 @@
+# Setting Up the Ignite UI CLI MCP Server
+
+> **Part of the [`igniteui-blazor-components`](../SKILL.md) skill hub.**
+
+## Contents
+
+- [VS Code](#vs-code)
+- [Cursor](#cursor)
+- [Claude Desktop](#claude-desktop)
+- [WebStorm / JetBrains IDEs](#webstorm--jetbrains-ides)
+- [Verifying the Setup](#verifying-the-setup)
+
+The Ignite UI CLI MCP server enables AI assistants to discover Ignite UI components, access Blazor documentation, and support related Ignite UI workflows. It must be configured in your editor before these tools become available.
+
+## VS Code
+
+Create or edit `.vscode/mcp.json` in your project:
+
+```json
+{
+  "servers": {
+    "igniteui-cli": {
+      "command": "npx",
+      "args": ["-y", "igniteui-cli", "mcp"]
+    }
+  }
+}
+```
+
+This works whether `igniteui-cli` is installed locally in `node_modules` or needs to be pulled from the npm registry; `npx -y` handles both cases.
+
+## Cursor
+
+Create or edit `.cursor/mcp.json`:
+
+```json
+{
+  "mcpServers": {
+    "igniteui-cli": {
+      "command": "npx",
+      "args": ["-y", "igniteui-cli", "mcp"]
+    }
+  }
+}
+```
+
+## Claude Desktop
+
+Edit the Claude Desktop config file:
+
+- **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json`
+- **Windows**: `%APPDATA%\Claude\claude_desktop_config.json`
+
+```json
+{
+  "mcpServers": {
+    "igniteui-cli": {
+      "command": "npx",
+      "args": ["-y", "igniteui-cli", "mcp"]
+    }
+  }
+}
+```
+
+## WebStorm / JetBrains IDEs
+
+1. Go to **Settings -> Tools -> AI Assistant -> MCP Servers**
+2. Click **+ Add MCP Server**
+3. Set Command to `npx` and Arguments to `igniteui-cli mcp`
+4. Click OK and restart the AI Assistant
+
+## Verifying the Setup
+
+After configuring the MCP server, ask your AI assistant:
+
+> "List all available Ignite UI for Blazor components"
+
+If the MCP server is running, the `list_components(framework: "blazor")` tool will return available Blazor component documentation entries.