shellui-dev · Shewart · Jun 3, 2026 · Feb 10, 2026 · Feb 10, 2026 · Feb 10, 2026
diff --git a/.github/workflows/preview-pages.yml b/.github/workflows/preview-pages.yml
@@ -0,0 +1,60 @@
+# Deploy ShellUI Preview to GitHub Pages (for docs embedding)
+name: Deploy Preview to GitHub Pages
+
+on:
+  push:
+    branches: [ main ]
+    paths:
+      - 'NET9/ShellUI.Preview/**'
+      - 'src/ShellUI.Components/**'
+      - '.github/workflows/preview-pages.yml'
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup .NET
+        uses: actions/setup-dotnet@v4
+        with:
+          dotnet-version: '9.0.x'
+
+      - name: Publish Preview (Blazor WASM)
+        run: |
+          dotnet publish NET9/ShellUI.Preview/ShellUI.Preview.csproj \
+            -c Release \
+            -o ./preview-publish
+        env:
+          # For GH Pages: base href = /repo-name/ (set your repo name)
+          # Leave empty for root: https://user.github.io/repo-name/
+          BASE_HREF: /
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./preview-publish/wwwroot
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -51,6 +51,10 @@ jobs:
         if ls src/ShellUI.CLI/bin/Release/*.snupkg 1> /dev/null 2>&1; then
           dotnet nuget push src/ShellUI.CLI/bin/Release/*.snupkg --api-key ${{ secrets.NUGET_API_KEY }} --source https://api.nuget.org/v3/index.json --skip-duplicate
         fi
+        dotnet nuget push src/ShellUI.Core/bin/Release/*.nupkg --api-key ${{ secrets.NUGET_API_KEY }} --source https://api.nuget.org/v3/index.json --skip-duplicate
+        if ls src/ShellUI.Core/bin/Release/*.snupkg 1> /dev/null 2>&1; then
+          dotnet nuget push src/ShellUI.Core/bin/Release/*.snupkg --api-key ${{ secrets.NUGET_API_KEY }} --source https://api.nuget.org/v3/index.json --skip-duplicate
+        fi
         dotnet nuget push src/ShellUI.Components/bin/Release/*.nupkg --api-key ${{ secrets.NUGET_API_KEY }} --source https://api.nuget.org/v3/index.json --skip-duplicate
         if ls src/ShellUI.Components/bin/Release/*.snupkg 1> /dev/null 2>&1; then
           dotnet nuget push src/ShellUI.Components/bin/Release/*.snupkg --api-key ${{ secrets.NUGET_API_KEY }} --source https://api.nuget.org/v3/index.json --skip-duplicate
@@ -69,6 +73,7 @@ jobs:
         prerelease: ${{ contains(github.ref, '-') }}
         files: |
           src/ShellUI.CLI/bin/Release/*.nupkg
+          src/ShellUI.Core/bin/Release/*.nupkg
           src/ShellUI.Components/bin/Release/*.nupkg
       env:
         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.gitignore b/.gitignore
@@ -362,4 +362,7 @@ MigrationBackup/
 # Fody - auto-generated XML schema
 FodyWeavers.xsd
 
-shellui-installation-tests/
+shellui-installation-tests/
+
+# Preview publish output (testing artifacts)
+preview-publish/
diff --git a/Directory.Build.props b/Directory.Build.props
@@ -3,7 +3,7 @@
   <!-- Centralized ShellUI Version - Update this single file to version all components -->
   <PropertyGroup>
     <ShellUIVersion>0.3.0</ShellUIVersion>
-    <ShellUIVersionSuffix>alpha.2</ShellUIVersionSuffix>
+    <ShellUIVersionSuffix>alpha.3</ShellUIVersionSuffix>
   </PropertyGroup>
 
   <!-- Common properties for all ShellUI projects -->

diff --git a/NET9/BlazorInteractiveServer/Components/App.razor b/NET9/BlazorInteractiveServer/Components/App.razor
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="en" class="dark">
 
 <head>
@@ -14,6 +14,9 @@
     <!-- Material Icons -->
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
 
+    <!-- Font Awesome Icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+
     <!-- ShellUI - Tailwind CSS (compiled by standalone CLI, no Node.js!) -->
     <link rel="stylesheet" href="@Assets["app.css"]" />
     <link rel="stylesheet" href="@Assets["BlazorInteractiveServer.styles.css"]" />
@@ -50,10 +53,22 @@
 
     <ImportMap />
     <HeadOutlet @rendermode="InteractiveServer" />
+    <style>
+        /* Blazor adds .show only when an unhandled error occurs - hidden otherwise */
+        #blazor-error-ui { display: none !important; position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); padding: 1rem; text-align: center; box-shadow: 0 -4px 6px -1px rgb(0 0 0/0.2); }
+        #blazor-error-ui.show { display: block !important; }
+        #blazor-error-ui a { color: inherit; text-decoration: underline; }
+        #blazor-error-ui .dismiss { cursor: pointer; margin-left: 1rem; }
+    </style>
 </head>
 
 <body class="bg-background text-foreground">
     <Routes @rendermode="InteractiveServer" />
+    <div id="blazor-error-ui">
+        An unhandled error has occurred.
+        <a href="." class="reload">Reload</a>
+        <span class="dismiss">×</span>
+    </div>
     <script src="_framework/blazor.web.js"></script>
     <script src="shellui.js"></script>
 </body>

diff --git a/NET9/BlazorInteractiveServer/Components/Demo/NavigationDemo.razor b/NET9/BlazorInteractiveServer/Components/Demo/NavigationDemo.razor
@@ -15,9 +15,9 @@
                             <span class="font-bold text-lg">ShellUI</span>
                         </div>
                         <nav class="flex items-center space-x-6 text-sm font-medium flex-1">
-                            <a href="#" class="transition-colors hover:text-foreground/80 text-foreground">Home</a>
-                            <a href="#" class="transition-colors hover:text-foreground/80 text-muted-foreground">Docs</a>
-                            <a href="#" class="transition-colors hover:text-foreground/80 text-muted-foreground">Components</a>
+                            <a href="/" class="transition-colors hover:text-foreground/80 text-foreground">Home</a>
+                            <a href="/dashboard" class="transition-colors hover:text-foreground/80 text-muted-foreground">Dashboard</a>
+                            <a href="/components" class="transition-colors hover:text-foreground/80 text-muted-foreground">Components</a>
                         </nav>
                         <Button Variant="@ButtonVariant.Outline" Size="@ButtonSize.Sm">Sign In</Button>
                     </div>
@@ -40,15 +40,15 @@
                         <div class="space-y-4">
                             <h4 class="font-semibold text-lg">Navigation</h4>
                             <nav class="space-y-2">
-                                <a href="#" class="flex items-center space-x-2 px-3 py-2 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors">
+                                <a href="/dashboard" class="flex items-center space-x-2 px-3 py-2 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors">
                                     <span class="material-symbols-outlined text-sm">home</span>
                                     <span>Dashboard</span>
                                 </a>
-                                <a href="#" class="flex items-center space-x-2 px-3 py-2 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors">
+                                <a href="/components" class="flex items-center space-x-2 px-3 py-2 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors">
                                     <span class="material-symbols-outlined text-sm">folder</span>
-                                    <span>Projects</span>
+                                    <span>Components</span>
                                 </a>
-                                <a href="#" class="flex items-center space-x-2 px-3 py-2 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors">
+                                <a href="/dashboard" class="flex items-center space-x-2 px-3 py-2 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors">
                                     <span class="material-symbols-outlined text-sm">settings</span>
                                     <span>Settings</span>
                                 </a>

diff --git a/NET9/BlazorInteractiveServer/Components/Layout/BlocksLayout.razor b/NET9/BlazorInteractiveServer/Components/Layout/BlocksLayout.razor
@@ -0,0 +1,20 @@
+@inherits LayoutComponentBase
+@using BlazorInteractiveServer.Components.UI
+
+@* Blocks page layout — no main sidebar, full-width. Demos are independent. *@
+<div class="min-h-screen bg-background text-foreground">
+    <header class="sticky top-0 z-10 flex h-14 items-center gap-4 border-b border-border bg-background px-4">
+        <a href="/dashboard" class="text-sm text-muted-foreground hover:text-foreground transition-colors flex items-center gap-2">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="size-4">
+                <path d="M19 12H5M12 19l-7-7 7-7"/>
+            </svg>
+            Back to Dashboard
+        </a>
+        <span class="text-muted-foreground">|</span>
+        <h1 class="text-lg font-semibold">Layout Blocks</h1>
+        <ThemeToggle Size="sm" Variant="outline" Class="ml-auto" />
+    </header>
+    <main class="p-6">
+        @Body
+    </main>
+</div>
diff --git a/NET9/BlazorInteractiveServer/Components/Layout/DashboardLayout.razor b/NET9/BlazorInteractiveServer/Components/Layout/DashboardLayout.razor
@@ -0,0 +1,108 @@
+@inherits LayoutComponentBase
+@implements IDisposable
+@using BlazorInteractiveServer.Components.UI
+@using Microsoft.AspNetCore.Components.Routing
+@inject NavigationManager Navigation
+
+@* Dashboard layout — sidebar + content, no navbar/footer *@
+<SidebarProvider>
+    <AppSidebar />
+    <SidebarInset>
+        @* Shared header: trigger, breadcrumbs, theme toggle — sticky so expand/collapse stays accessible on scroll *@
+        <header class="sticky top-0 z-10 flex h-16 shrink-0 items-center gap-2 border-b border-border bg-background">
+            <div class="flex min-w-0 flex-1 items-center gap-2 px-4">
+                <SidebarTrigger Class="-ml-1 shrink-0" />
+                <Separator Orientation="vertical" Class="mr-2 h-4 shrink-0" />
+                @if (HeaderContent != null)
+                {
+                    @HeaderContent
+                }
+                else
+                {
+                    <div class="flex min-w-0 flex-1 items-center overflow-x-auto">
+                        <Breadcrumb Class="flex flex-1 min-w-0 items-center">
+                            @foreach (var item in _breadcrumbItems)
+                            {
+                                <BreadcrumbItem Href="@(item.IsLast ? null : item.Href)" IsLast="@item.IsLast">@item.Label</BreadcrumbItem>
+                            }
+                        </Breadcrumb>
+                    </div>
+                }
+            </div>
+            <div class="ml-auto px-4">
+                <ThemeToggle Size="sm" Variant="outline" />
+            </div>
+        </header>
+
+        @* Page content *@
+        <div class="flex flex-1 flex-col gap-4 p-4 pt-0">
+            @Body
+        </div>
+    </SidebarInset>
+</SidebarProvider>
+
+@code {
+    /// <summary>
+    /// Optional header content (breadcrumbs, page title, etc.) 
+    /// Pages can set this via a cascading parameter or just leave it empty.
+    /// </summary>
+    [Parameter] public RenderFragment? HeaderContent { get; set; }
+
+    private List<BreadcrumbItemData> _breadcrumbItems = new();
+
+    protected override void OnInitialized()
+    {
+        BuildBreadcrumb();
+        Navigation.LocationChanged += OnLocationChanged;
+    }
+
+    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
+    {
+        BuildBreadcrumb();
+        InvokeAsync(StateHasChanged);
+    }
+
+    public void Dispose() => Navigation.LocationChanged -= OnLocationChanged;
+
+    private void BuildBreadcrumb()
+    {
+        var uri = new Uri(Navigation.Uri);
+        var path = uri.AbsolutePath.TrimEnd('/');
+        var segments = path.Split('/', StringSplitOptions.RemoveEmptyEntries);
+
+        _breadcrumbItems.Clear();
+        if (segments.Length == 0 || (segments.Length == 1 && segments[0] == ""))
+        {
+            _breadcrumbItems.Add(new BreadcrumbItemData { Label = "Home", Href = "/", IsLast = true });
+            return;
+        }
+
+        var href = "";
+        for (var i = 0; i < segments.Length; i++)
+        {
+            href += "/" + segments[i];
+            var label = TitleCase(segments[i]);
+            if (i == 0 && segments[i].Equals("components", StringComparison.OrdinalIgnoreCase))
+                label = "Components";
+            _breadcrumbItems.Add(new BreadcrumbItemData
+            {
+                Label = label,
+                Href = href,
+                IsLast = i == segments.Length - 1
+            });
+        }
+    }
+
+    private static string TitleCase(string s)
+    {
+        if (string.IsNullOrEmpty(s)) return s;
+        return char.ToUpperInvariant(s[0]) + s[1..].ToLowerInvariant();
+    }
+
+    private class BreadcrumbItemData
+    {
+        public string Label { get; set; } = "";
+        public string Href { get; set; } = "";
+        public bool IsLast { get; set; }
+    }
+}