feat(shell): keep-alive tab navigation for instant sample switching

.gitignore

@@ -53,3 +53,9 @@ npm-debug.log
 # OS files
 .DS_Store
 Thumbs.db
+
+
+# Others
+*.claude
+*.mcp.json
+e2e

BlazorGridExamples/BlazorGridExamples.csproj

@@ -8,7 +8,7 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="IgniteUI.Blazor" Version="25.2.104" />
+    <PackageReference Include="IgniteUI.Blazor" Version="26.1.51" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="10.0.8" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="10.0.8" PrivateAssets="all" />
   </ItemGroup>

BlazorGridExamples/Layout/NavMenu.razor

@@ -1,19 +1,26 @@
 @inject NavigationManager NavigationManager
+@inject IJSRuntime JS
+@implements IDisposable
+@using Microsoft.AspNetCore.Components.Routing
+@using Microsoft.JSInterop
 
 <IgbThemeProvider Theme="Theme.Material">
     <div class="tabs-info-wrapper-element material-theme-scope">
-        <div class="tab-container ig-typography ig-scrollbar">
-            @foreach (var tab in Tabs)
-            {
-                <div type="button" class="tab-item-container" @onclick="() => NavigateToSample(tab.Key)">
-                    <div class="tab-item @(IsActive(tab.Key) ? "tab-item--selected" : "")">
-                        <div class="tab-header">
-                            @tab.Title.ToUpper()
+        @if (!isFullscreen)
+        {
+            <div class="tab-container ig-typography ig-scrollbar">
+                @foreach (var tab in Tabs)
+                {
+                    <div type="button" class="tab-item-container" @onclick="() => NavigateToSample(tab.Key)">
+                        <div class="tab-item @(IsActive(tab.Key) ? "tab-item--selected" : "")">
+                            <div class="tab-header">
+                                @tab.Title.ToUpper()
+                            </div>
                         </div>
                     </div>
-                </div>
-            }
-        </div>
+                }
+            </div>
+        }
 
         @if (CurrentTab != null)
         {
@@ -26,22 +33,28 @@
 
                     <div class="sample-actions">
                         <div class="theme-info">Theme: @CurrentTab.Theme</div>
-                        <div class="theme-info">Mode: Light</div>
+                        <div class="theme-info">Mode: @CurrentTab.Mode</div>
                         <div class="action-buttons">
-                            <IgbButton Variant="ButtonVariant.Outlined" class="custom-button" @onclick="() => DownloadSample(CurrentTab.Key)">
-                                <span class="download-icon">⬇</span>
-                                Download
-                            </IgbButton>
-
-                            <IgbButton Variant="ButtonVariant.Outlined" class="custom-button" @onclick="() => ViewMore(CurrentTab.Key)">
-                                <span>👁</span>
-                                View More
-                            </IgbButton>
-
-                            <IgbButton Variant="ButtonVariant.Outlined" class="custom-button" @onclick="ToggleFullscreen">
-                                <span>@(isFullscreen ? "⊗" : "⛶")</span>
-                                <span>@(isFullscreen ? "Exit Fullscreen" : "Fullscreen")</span>
-                            </IgbButton>
+                            <span class="action-btn" @onclick="() => DownloadSample(CurrentTab.Key)">
+                                <IgbButton Variant="ButtonVariant.Outlined" class="custom-button">
+                                    <IgbIcon @ref="iconRef" IconName="file_download" Collection="material" class="btn-icon"></IgbIcon>
+                                    Download
+                                </IgbButton>
+                            </span>
+
+                            <span class="action-btn" @onclick="() => ViewMore(CurrentTab.Key)">
+                                <IgbButton Variant="ButtonVariant.Outlined" class="custom-button">
+                                    <IgbIcon IconName="view_more" Collection="material" class="btn-icon"></IgbIcon>
+                                    View More
+                                </IgbButton>
+                            </span>
+
+                            <span class="action-btn" @onclick="ToggleFullscreen">
+                                <IgbButton Variant="ButtonVariant.Outlined" class="custom-button">
+                                    <IgbIcon IconName="@(isFullscreen ? "exit_full_screen" : "full_screen")" Collection="material" class="btn-icon"></IgbIcon>
+                                    <span>@(isFullscreen ? "Exit Fullscreen" : "Fullscreen")</span>
+                                </IgbButton>
+                            </span>
                         </div>
                     </div>
                 </div>
@@ -54,83 +67,145 @@
 
     private bool isFullscreen = false;
 
+    private const string DownloadSvg = """<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M10.41 11.21V3.616c0-.43.167-.84.466-1.144A1.578 1.578 0 0 1 12 2c.422 0 .826.17 1.125.473.298.304.466.715.466 1.144v7.586l2.195-2.282a1.49 1.49 0 0 1 1.05-.455 1.47 1.47 0 0 1 1.06.434l.022.021c.284.294.443.689.443 1.1 0 .412-.16.807-.443 1.1l-4.81 4.972a1.496 1.496 0 0 1-1.069.454h-.084a1.47 1.47 0 0 1-1.066-.454L6.076 11.12a1.586 1.586 0 0 1-.44-1.098c0-.41.158-.805.44-1.098a1.49 1.49 0 0 1 1.05-.457 1.47 1.47 0 0 1 1.06.432l.025.025 2.199 2.284Z"/><path fill="currentColor" d="M20.41 14.729a1.59 1.59 0 0 0-1.592 1.591v1.613a.886.886 0 0 1-.884.884H6.07a.892.892 0 0 1-.89-.884V16.32a1.591 1.591 0 0 0-3.181 0v1.618A4.087 4.087 0 0 0 6.066 22h11.868A4.07 4.07 0 0 0 22 17.931V16.32a1.59 1.59 0 0 0-1.59-1.591Z"/></svg>""";
+    private const string ViewMoreSvg = """<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17L17 7"/><path d="M17 7H7"/><path d="M17 7V17"/></svg>""";
+    private const string FullScreenSvg = """<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h6M4 4v6M20 20h-6M20 20v-6M20 4h-6M20 4v6M4 20h6M4 20v-6"/></svg>""";
+    private const string ExitFullScreenSvg = """<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter"><line x1="5.5" y1="2" x2="5.5" y2="6.5"/><line x1="5.5" y1="6.5" x2="1" y2="6.5"/><line x1="14.5" y1="2" x2="14.5" y2="6.5"/><line x1="14.5" y1="6.5" x2="19" y2="6.5"/><line x1="5.5" y1="17" x2="5.5" y2="12.5"/><line x1="5.5" y1="12.5" x2="1" y2="12.5"/><line x1="14.5" y1="17" x2="14.5" y2="12.5"/><line x1="14.5" y1="12.5" x2="19" y2="12.5"/></svg>""";
+    private DotNetObjectReference<NavMenu>? _selfRef;
+    private IgbIcon? iconRef;
+
 
     private class TabInfo
     {
         public string Key { get; set; } = "";
         public string Title { get; set; } = "";
         public string Description { get; set; } = "";
         public string Theme { get; set; } = "Bootstrap";
+        public string Mode { get; set; } = "Light";
     }
 
     private List<TabInfo> Tabs = new()
     {
         new TabInfo
         {
-            Key = "erp-inventory",
+            Key = "inventory",
             Title = "ERP/Inventory",
-            Description = "Sample app for ERP/Inventory handling large data volumes using Hierarchical Grid."
+            Description = "Tracking and managing quantity, location and details of products in stock.",
+            Theme = "Material",
+            Mode = "Light"
         },
         new TabInfo
         {
             Key = "hr-portal",
             Title = "Org Chart/HR Portal",
-            Description = "Example featuring a Tree Grid to manage and display employee information.",
-            Theme = "Fluent"
+            Description = "Displaying company's hierarchical structure and showing employees data.",
+            Theme = "Fluent",
+            Mode = "Light"
         },
         new TabInfo
         {
-            Key = "finance-grid",
+            Key = "finance",
             Title = "Financial Portfolio",
-            Description = "An example app showing assets, profit, and loss analyses with live data updates and high-performance Data Grid."
+            Description = "Asset tracking, profit and loss analysis, featuring interactive dynamic charts.",
+            Theme = "Bootstrap",
+            Mode = "Light"
         },
         new TabInfo
         {
-            Key = "sales-grid",
+            Key = "sales",
             Title = "Sales Dashboard",
-            Description = "Sales app example with summaries by region, product, and time periods using Pivot Grid."
+            Description = "For trend analysis, KPIs and viewing sales summaries by region, product, etc.",
+            Theme = "Indigo",
+            Mode = "Light"
         },
         new TabInfo
         {
-            Key = "fleet-management",
+            Key = "fleet",
             Title = "Fleet Management",
-            Description = "Sample app with a Master-Detail Grid for managing vehicle acquisition, operations, and maintenance."
+            Description = "A master-detail grid for managing vehicle acquisition, operations, and maintenance.",
+            Theme = "Material",
+            Mode = "Dark"
         }
     };
 
     private TabInfo? CurrentTab => Tabs.FirstOrDefault(t => IsActive(t.Key));
 
     private bool IsActive(string key)
     {
-        var currentPath = new Uri(NavigationManager.Uri).LocalPath;
-        return currentPath.Contains(key, StringComparison.OrdinalIgnoreCase);
+        var path = new Uri(NavigationManager.Uri).LocalPath;
+        var current = path.Contains("/home/", StringComparison.OrdinalIgnoreCase)
+            ? path.Split("/home/")[^1].TrimEnd('/')
+            : "inventory";
+        return string.Equals(current, key, StringComparison.OrdinalIgnoreCase);
     }
 
     private void NavigateToSample(string key)
     {
-        NavigationManager.NavigateTo($"/{key}");
+        NavigationManager.NavigateTo($"/home/{key}");
+    }
+
+    protected override void OnInitialized()
+    {
+        // The NavMenu lives in the layout and isn't re-rendered automatically on route
+        // changes, so the active tab / current-tab-info would go stale. Re-render on navigation.
+        NavigationManager.LocationChanged += HandleLocationChanged;
+    }
+
+    private void HandleLocationChanged(object? sender, LocationChangedEventArgs e)
+    {
+        InvokeAsync(StateHasChanged);
     }
 
     private async Task DownloadSample(string key)
     {
-        // TODO: Implement download functionality
-        // This would zip the sample project and download it
-        await Task.CompletedTask;
+        await JS.InvokeVoidAsync("shellInterop.download",
+            "https://github.com/IgniteUI/blazor-grid-examples/archive/refs/heads/master.zip");
+    }
+
+    private async Task ViewMore(string key)
+    {
+        await JS.InvokeVoidAsync("shellInterop.openTab",
+            "https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/grids/grid/overview");
+    }
+
+    private async Task ToggleFullscreen()
+    {
+        // Browser fullscreen is toggled here; isFullscreen is then synced by the
+        // fullscreenchange listener so pressing Esc also restores the tab strip.
+        await JS.InvokeVoidAsync("shellInterop.toggleFullscreen");
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            _selfRef = DotNetObjectReference.Create(this);
+            await JS.InvokeVoidAsync("shellInterop.registerFullscreenListener", _selfRef);
+
+            if (iconRef is not null)
+            {
+                await iconRef.EnsureReady();
+                await iconRef.RegisterIconFromTextAsync("file_download", DownloadSvg, "material");
+                await iconRef.RegisterIconFromTextAsync("view_more", ViewMoreSvg, "material");
+                await iconRef.RegisterIconFromTextAsync("full_screen", FullScreenSvg, "material");
+                await iconRef.RegisterIconFromTextAsync("exit_full_screen", ExitFullScreenSvg, "material");
+            }
+        }
     }
 
-    private void ViewMore(string key)
+    [JSInvokable]
+    public void OnFullscreenChange(bool isFs)
     {
-        // Navigate to documentation or more info
-        var tab = Tabs.FirstOrDefault(t => t.Key == key);
-        if (tab != null)
+        if (isFullscreen != isFs)
         {
-            NavigationManager.NavigateTo($"https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/grids/grid/overview", true);
+            isFullscreen = isFs;
+            InvokeAsync(StateHasChanged);
         }
     }
 
-    private void ToggleFullscreen()
+    public void Dispose()
     {
-        isFullscreen = !isFullscreen;
-        // TODO: Implement actual fullscreen toggle using JS Interop
+        NavigationManager.LocationChanged -= HandleLocationChanged;
+        _selfRef?.Dispose();
     }
 }

BlazorGridExamples/Pages/SampleHost.razor

@@ -0,0 +1,58 @@
+@page "/"
+@page "/home"
+@page "/home/{Sample?}"
+
+@* Single host for all five samples. Each sample is lazily mounted the first time its tab is
+   opened and then kept alive; switching tabs only toggles pane visibility, so the grids are
+   never destroyed/recreated and every revisit is instant. Lazy (not prewarmed) so background
+   grid-building never competes with the active view. *@
+<div class="sample-host">
+    @if (_mounted.Contains("inventory"))
+    {
+        <div class="sample-pane @Hidden("inventory")">
+            <ERPInventory.ERPInventoryComponent IsActive="@(Active == "inventory")" />
+        </div>
+    }
+    @if (_mounted.Contains("hr-portal"))
+    {
+        <div class="sample-pane @Hidden("hr-portal")">
+            <HRPortal.HRPortalComponent />
+        </div>
+    }
+    @if (_mounted.Contains("finance"))
+    {
+        <div class="sample-pane @Hidden("finance")">
+            <FinanceGrid.FinanceGridComponent IsActive="@(Active == "finance")" />
+        </div>
+    }
+    @if (_mounted.Contains("sales"))
+    {
+        <div class="sample-pane @Hidden("sales")">
+            <SalesGrid.SalesGridComponent />
+        </div>
+    }
+    @if (_mounted.Contains("fleet"))
+    {
+        <div class="sample-pane @Hidden("fleet")">
+            <FleetManagement.FleetManagementComponent />
+        </div>
+    }
+</div>
+
+@code {
+    [Parameter] public string? Sample { get; set; }
+
+    private static readonly string[] AllKeys = { "inventory", "hr-portal", "finance", "sales", "fleet" };
+    private readonly HashSet<string> _mounted = new();
+    private string Active = "inventory";
+
+    private string Hidden(string key) => Active == key ? "" : "sample-pane--hidden";
+
+    protected override void OnParametersSet()
+    {
+        var key = string.IsNullOrWhiteSpace(Sample) ? "inventory" : Sample.Trim().ToLowerInvariant();
+        if (!AllKeys.Contains(key)) key = "inventory";
+        Active = key;
+        _mounted.Add(key); // lazily mount the active tab on first visit; it stays mounted after
+    }
+}

BlazorGridExamples/Pages/SampleHost.razor.css

@@ -0,0 +1,28 @@
+.sample-host {
+    position: relative;
+    /* Fill the router area so panes (and percentage-height grids inside them) have a
+       definite height to resolve against. */
+    height: 100%;
+    /* Clip the off-screen inactive panes so they can't add phantom scrollbars. */
+    overflow: hidden;
+}
+
+/* Panes fill the host's height. Samples that size their grid with calc(100vh - N) (HR, Fleet)
+   are unaffected; samples that use height:100% (Finance, Sales) need this height chain to
+   reach #finance-section / #sales-section, otherwise the grid collapses to content height. */
+.sample-pane {
+    height: 100%;
+}
+
+/* Inactive panes are moved fully off-screen rather than hidden with visibility:hidden --
+   some Ignite UI parts (e.g. pivot value chips) force visibility:visible on themselves and
+   would bleed through over the active sample. Off-screen positioning can't be overridden by a
+   descendant, and it keeps the panes laid out at the same size, so prewarmed grids stay
+   measured and activating a pane needs no reflow (the switch is instant). */
+.sample-pane--hidden {
+    position: absolute;
+    top: 0;
+    left: -100000px;
+    width: 100%;
+    pointer-events: none;
+}