From 69f65ed585227ecfee50d19b368c808a400100a0 Mon Sep 17 00:00:00 2001
From: Shephard Tseisi <shephard@kernel.co.zw>
Date: Thu, 23 Jul 2026 22:24:32 +0200
Subject: [PATCH 01/10] feat: enhance UI components with dismiss behavior and
 new parameters

Added `CloseOnScroll` parameter to various UI components (e.g., Combobox, DatePicker, MultiSelect) to control dropdown dismissal on page scroll, aligning with shadcn/Radix behavior. Implemented async disposal and JS interop for managing dismiss events. Updated Drawer and Sheet components to support compositional behavior. Enhanced DataTable with server-side data handling capabilities, including new request and response models for better data management.
---
 .../Components/Demo/OverlayDemo.razor         |    4 +-
 .../Components/Models/DataTableModels.cs      |   17 +
 .../Components/Services/SonnerService.cs      |   51 +-
 .../Components/UI/Combobox.razor              |   75 +-
 .../Components/UI/Command.razor               |    2 +-
 .../Components/UI/DataPicker.razor            |   65 +-
 .../Components/UI/DataTable.razor             |   95 +-
 .../Components/UI/DatePicker.razor            |   79 +-
 .../Components/UI/DateRangePicker.razor       |   79 +-
 .../Components/UI/DialogContent.razor         |   27 +-
 .../Components/UI/DrawerContent.razor         |   27 +-
 .../Components/UI/MultiSelect.razor           |   62 +-
 .../Components/UI/SheetContent.razor          |   27 +-
 .../Components/UI/Sonner.razor                |    5 +-
 .../Components/UI/Stepper.razor               |   17 +-
 .../Components/UI/StepperStep.razor           |   12 +-
 .../Components/UI/Toast.razor                 |    4 +-
 .../Components/UI/TypedSelect.razor           |   76 +
 .../wwwroot/shellui.js                        |   35 +
 NET10/ShellUI.Preview/App.razor               |   11 -
 .../Components/DashboardBlockPreview.razor    |   32 -
 .../Components/DialogPreview.razor            |   26 -
 NET10/ShellUI.Preview/Layout/MainLayout.razor |   14 -
 .../Layout/PreviewLayout.razor                |   11 -
 .../Pages/ComponentPreview.razor              |  249 --
 NET10/ShellUI.Preview/Pages/Home.razor        |   59 -
 NET10/ShellUI.Preview/Pages/NotFound.razor    |    5 -
 NET10/ShellUI.Preview/Program.cs              |   11 -
 .../Properties/launchSettings.json            |   25 -
 NET10/ShellUI.Preview/ShellUI.Preview.csproj  |   20 -
 NET10/ShellUI.Preview/_Imports.razor          |   13 -
 NET10/ShellUI.Preview/tailwind.config.js      |    8 -
 NET10/ShellUI.Preview/wwwroot/css/app.css     | 2721 -----------------
 NET10/ShellUI.Preview/wwwroot/index.html      |   55 -
 NET10/ShellUI.Preview/wwwroot/input.css       |  188 --
 .../wwwroot/sample-data/weather.json          |   27 -
 36 files changed, 671 insertions(+), 3563 deletions(-)
 create mode 100644 NET10/BlazorInteractiveServer/Components/UI/TypedSelect.razor
 delete mode 100644 NET10/ShellUI.Preview/App.razor
 delete mode 100644 NET10/ShellUI.Preview/Components/DashboardBlockPreview.razor
 delete mode 100644 NET10/ShellUI.Preview/Components/DialogPreview.razor
 delete mode 100644 NET10/ShellUI.Preview/Layout/MainLayout.razor
 delete mode 100644 NET10/ShellUI.Preview/Layout/PreviewLayout.razor
 delete mode 100644 NET10/ShellUI.Preview/Pages/ComponentPreview.razor
 delete mode 100644 NET10/ShellUI.Preview/Pages/Home.razor
 delete mode 100644 NET10/ShellUI.Preview/Pages/NotFound.razor
 delete mode 100644 NET10/ShellUI.Preview/Program.cs
 delete mode 100644 NET10/ShellUI.Preview/Properties/launchSettings.json
 delete mode 100644 NET10/ShellUI.Preview/ShellUI.Preview.csproj
 delete mode 100644 NET10/ShellUI.Preview/_Imports.razor
 delete mode 100644 NET10/ShellUI.Preview/tailwind.config.js
 delete mode 100644 NET10/ShellUI.Preview/wwwroot/css/app.css
 delete mode 100644 NET10/ShellUI.Preview/wwwroot/index.html
 delete mode 100644 NET10/ShellUI.Preview/wwwroot/input.css
 delete mode 100644 NET10/ShellUI.Preview/wwwroot/sample-data/weather.json

diff --git a/NET10/BlazorInteractiveServer/Components/Demo/OverlayDemo.razor b/NET10/BlazorInteractiveServer/Components/Demo/OverlayDemo.razor
index 8fb28d7..cb13e82 100644
--- a/NET10/BlazorInteractiveServer/Components/Demo/OverlayDemo.razor
+++ b/NET10/BlazorInteractiveServer/Components/Demo/OverlayDemo.razor
@@ -124,7 +124,7 @@
         <div>
             <h3 class="text-xl font-semibold mb-2 text-card-foreground">Drawer & Sheet</h3>
             <div class="flex flex-wrap gap-2">
-                <Drawer @bind-Open="drawerOpen" Side="@DrawerSide.Bottom">
+                <Drawer @bind-Open="drawerOpen" Side="@DrawerSide.Bottom" Compositional="true">
                     <DrawerTrigger>
                         <Button Variant="@ButtonVariant.Outline">Open Drawer</Button>
                     </DrawerTrigger>
@@ -134,7 +134,7 @@
                         <Button @onclick="() => drawerOpen = false">Close</Button>
                     </DrawerContent>
                 </Drawer>
-                <Sheet @bind-Open="sheetOpen" Side="@SheetSide.Right">
+                <Sheet @bind-Open="sheetOpen" Side="@SheetSide.Right" Compositional="true">
                     <SheetTrigger>
                         <Button Variant="@ButtonVariant.Outline">Open Sheet</Button>
                     </SheetTrigger>
diff --git a/NET10/BlazorInteractiveServer/Components/Models/DataTableModels.cs b/NET10/BlazorInteractiveServer/Components/Models/DataTableModels.cs
index 218233e..a7040d8 100644
--- a/NET10/BlazorInteractiveServer/Components/Models/DataTableModels.cs
+++ b/NET10/BlazorInteractiveServer/Components/Models/DataTableModels.cs
@@ -24,3 +24,20 @@ public enum SortDirection
     Ascending,
     Descending
 }
+
+// Passed to OnDataRequest when DataTable is in ServerSide mode. The server-side data
+// loader receives filter / sort / page state and returns just the current page.
+public class DataTableRequest
+{
+    public int Skip { get; set; }
+    public int Take { get; set; }
+    public string? SortBy { get; set; }
+    public SortDirection SortDirection { get; set; } = SortDirection.None;
+    public string SearchQuery { get; set; } = "";
+}
+
+public class DataTableResponse<TItem>
+{
+    public IEnumerable<TItem> Items { get; set; } = Array.Empty<TItem>();
+    public int TotalCount { get; set; }
+}
diff --git a/NET10/BlazorInteractiveServer/Components/Services/SonnerService.cs b/NET10/BlazorInteractiveServer/Components/Services/SonnerService.cs
index de05d84..08b0a1f 100644
--- a/NET10/BlazorInteractiveServer/Components/Services/SonnerService.cs
+++ b/NET10/BlazorInteractiveServer/Components/Services/SonnerService.cs
@@ -6,13 +6,20 @@ public class SonnerToastItem
     public string Message { get; set; } = "";
     public string? Description { get; set; }
     public string Variant { get; set; } = "default";
+    // Zero or negative disables auto-dismiss (toast stays until manually closed).
+    public TimeSpan Duration { get; set; } = TimeSpan.FromSeconds(4);
     public DateTime CreatedAt { get; } = DateTime.UtcNow;
 }
 
 public interface ISonnerService
 {
     IReadOnlyList<SonnerToastItem> Toasts { get; }
-    void Show(string message, string? description = null, string variant = "default");
+    void Show(string message, string? description = null, string variant = "default", TimeSpan? duration = null);
+    void Success(string message, string? description = null, TimeSpan? duration = null);
+    void Error(string message, string? description = null, TimeSpan? duration = null);
+    void Info(string message, string? description = null, TimeSpan? duration = null);
+    void Warning(string message, string? description = null, TimeSpan? duration = null);
+    void Remove(string id);
 }
 
 public class SonnerService : ISonnerService
@@ -21,15 +28,49 @@ public class SonnerService : ISonnerService
     public IReadOnlyList<SonnerToastItem> Toasts => _toasts;
     public event Action? OnChange;
 
-    public void Show(string message, string? description = null, string variant = "default")
+    public void Show(string message, string? description = null, string variant = "default", TimeSpan? duration = null)
     {
-        _toasts.Add(new SonnerToastItem { Message = message, Description = description, Variant = variant });
+        var toast = new SonnerToastItem
+        {
+            Message = message,
+            Description = description,
+            Variant = variant,
+            Duration = duration ?? TimeSpan.FromSeconds(4)
+        };
+        _toasts.Add(toast);
         OnChange?.Invoke();
+
+        if (toast.Duration > TimeSpan.Zero)
+        {
+            _ = AutoDismissAsync(toast.Id, toast.Duration);
+        }
     }
 
+    public void Success(string message, string? description = null, TimeSpan? duration = null)
+        => Show(message, description, "success", duration);
+
+    public void Error(string message, string? description = null, TimeSpan? duration = null)
+        => Show(message, description, "destructive", duration);
+
+    public void Info(string message, string? description = null, TimeSpan? duration = null)
+        => Show(message, description, "info", duration);
+
+    public void Warning(string message, string? description = null, TimeSpan? duration = null)
+        => Show(message, description, "warning", duration);
+
     public void Remove(string id)
     {
-        _toasts.RemoveAll(t => t.Id == id);
-        OnChange?.Invoke();
+        var removed = _toasts.RemoveAll(t => t.Id == id);
+        if (removed > 0) OnChange?.Invoke();
+    }
+
+    private async Task AutoDismissAsync(string id, TimeSpan delay)
+    {
+        try
+        {
+            await Task.Delay(delay);
+            Remove(id);
+        }
+        catch { }
     }
 }
diff --git a/NET10/BlazorInteractiveServer/Components/UI/Combobox.razor b/NET10/BlazorInteractiveServer/Components/UI/Combobox.razor
index 010736f..eeb75df 100644
--- a/NET10/BlazorInteractiveServer/Components/UI/Combobox.razor
+++ b/NET10/BlazorInteractiveServer/Components/UI/Combobox.razor
@@ -1,4 +1,7 @@
 @namespace BlazorInteractiveServer.Components.UI
+@using Microsoft.JSInterop
+@implements IAsyncDisposable
+@inject IJSRuntime JS
 
 <div class="@Shell.Cn("relative", Class)" @attributes="AdditionalAttributes">
     <button type="button"
@@ -75,6 +78,9 @@
     [Parameter] public bool Disabled { get; set; }
     [Parameter] public IEnumerable<string>? Options { get; set; }
     [Parameter] public bool Searchable { get; set; } = true;
+    /// Dismiss the dropdown when the page scrolls. Matches shadcn/Radix behavior.
+    /// Set false to keep the dropdown open across scroll (useful for infinite-scroll pages).
+    [Parameter] public bool CloseOnScroll { get; set; }
     [Parameter] public RenderFragment? ChildContent { get; set; }
     [Parameter] public string? Class { get; set; }
     [Parameter(CaptureUnmatchedValues = true)]
@@ -82,23 +88,72 @@
     
     private bool IsOpen { get; set; }
     private string searchQuery = "";
-    
-    private void Toggle() 
+    private DotNetObjectReference<Combobox>? _selfRef;
+    private readonly string _dismissHandle = Guid.NewGuid().ToString("N");
+    private bool _dismissRegistered;
+
+    private async Task Toggle()
     {
-        if (!Disabled)
+        if (Disabled) return;
+        IsOpen = !IsOpen;
+        if (IsOpen)
+        {
+            searchQuery = "";
+            await RegisterDismissAsync();
+        }
+        else
         {
-            IsOpen = !IsOpen;
-            if (IsOpen) searchQuery = "";
+            await UnregisterDismissAsync();
         }
     }
-    
-    private void Close() => IsOpen = false;
-    
+
+    private async Task Close()
+    {
+        IsOpen = false;
+        await UnregisterDismissAsync();
+    }
+
+    [JSInvokable]
+    public async Task OnDismissEvent()
+    {
+        if (IsOpen)
+        {
+            IsOpen = false;
+            await UnregisterDismissAsync();
+            StateHasChanged();
+        }
+    }
+
+    private async Task RegisterDismissAsync()
+    {
+        if (!CloseOnScroll || _dismissRegistered) return;
+        _selfRef ??= DotNetObjectReference.Create(this);
+        try
+        {
+            await JS.InvokeVoidAsync("ShellUI.onDismissEvents", _dismissHandle, _selfRef);
+            _dismissRegistered = true;
+        }
+        catch { }
+    }
+
+    private async Task UnregisterDismissAsync()
+    {
+        if (!_dismissRegistered) return;
+        try { await JS.InvokeVoidAsync("ShellUI.offDismissEvents", _dismissHandle); } catch { }
+        _dismissRegistered = false;
+    }
+
     public async Task SelectValue(string value)
     {
         Value = value;
-        await ValueChanged.InvokeAsync(value);
         IsOpen = false;
+        await UnregisterDismissAsync();
+        await ValueChanged.InvokeAsync(value);
     }
-}
 
+    public async ValueTask DisposeAsync()
+    {
+        await UnregisterDismissAsync();
+        _selfRef?.Dispose();
+    }
+}
diff --git a/NET10/BlazorInteractiveServer/Components/UI/Command.razor b/NET10/BlazorInteractiveServer/Components/UI/Command.razor
index 8a74fe8..0fa7813 100644
--- a/NET10/BlazorInteractiveServer/Components/UI/Command.razor
+++ b/NET10/BlazorInteractiveServer/Components/UI/Command.razor
@@ -5,7 +5,7 @@
     <DialogContent Class="overflow-hidden p-0">
         <!-- Search Input -->
         <div class="flex items-center border-b border-border px-3 py-2">
-            <svg class="mr-2 h-4 w-4 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <svg class="mr-2 h-4 w-4 text-foreground/70" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
             </svg>
             <input
diff --git a/NET10/BlazorInteractiveServer/Components/UI/DataPicker.razor b/NET10/BlazorInteractiveServer/Components/UI/DataPicker.razor
index fe40efb..1239b7b 100644
--- a/NET10/BlazorInteractiveServer/Components/UI/DataPicker.razor
+++ b/NET10/BlazorInteractiveServer/Components/UI/DataPicker.razor
@@ -1,6 +1,9 @@
 @namespace BlazorInteractiveServer.Components.UI
+@using Microsoft.JSInterop
 @typeparam TItem
 @typeparam TKey where TKey : notnull
+@implements IAsyncDisposable
+@inject IJSRuntime JS
 
 <div class="@Shell.Cn("relative", Class)" @attributes="AdditionalAttributes">
     <button type="button"
@@ -30,7 +33,7 @@
     {
         <div class="absolute z-50 mt-1 w-full rounded-md border border-border bg-popover shadow-md animate-in fade-in-0 zoom-in-95">
             <div class="flex items-center border-b border-border px-3">
-                <svg class="mr-2 h-4 w-4 shrink-0 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <svg class="mr-2 h-4 w-4 shrink-0 text-foreground/70" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                 </svg>
                 <input @ref="_searchInput"
@@ -103,6 +106,9 @@
     [Parameter] public string SearchPlaceholder { get; set; } = "Search...";
     [Parameter] public string EmptyText { get; set; } = "No results found.";
     [Parameter] public bool Disabled { get; set; }
+    /// Dismiss the dropdown when the page scrolls. Matches shadcn/Radix behavior.
+    /// Set false to keep the dropdown open across scroll (useful for infinite-scroll pages).
+    [Parameter] public bool CloseOnScroll { get; set; }
     [Parameter] public string? Class { get; set; }
     [Parameter(CaptureUnmatchedValues = true)]
     public Dictionary<string, object>? AdditionalAttributes { get; set; }
@@ -112,6 +118,9 @@
     private int _highlightedIndex;
     private ElementReference _searchInput;
     private bool _shouldFocus;
+    private DotNetObjectReference<DataPicker<TItem, TKey>>? _selfRef;
+    private readonly string _dismissHandle = Guid.NewGuid().ToString("N");
+    private bool _dismissRegistered;
 
     private string DisplayFor(TItem item) => DisplaySelector?.Invoke(item) ?? item?.ToString() ?? "";
     private TKey KeyFor(TItem item) => KeySelector(item);
@@ -124,7 +133,7 @@
         return Items.Where(i => DisplayFor(i).Contains(q, StringComparison.OrdinalIgnoreCase));
     }
 
-    private void Toggle()
+    private async Task Toggle()
     {
         if (Disabled) return;
         IsOpen = !IsOpen;
@@ -133,10 +142,51 @@
             _searchQuery = "";
             _highlightedIndex = 0;
             _shouldFocus = true;
+            await RegisterDismissAsync();
+        }
+        else
+        {
+            await UnregisterDismissAsync();
+        }
+    }
+
+    private async Task Close()
+    {
+        IsOpen = false;
+        await UnregisterDismissAsync();
+    }
+
+    // Fires when the page scrolls or the window resizes — bubble-phase, so scrolling
+    // through the option list inside the popover does NOT dismiss.
+    [JSInvokable]
+    public async Task OnDismissEvent()
+    {
+        if (IsOpen)
+        {
+            IsOpen = false;
+            await UnregisterDismissAsync();
+            StateHasChanged();
         }
     }
 
-    private void Close() => IsOpen = false;
+    private async Task RegisterDismissAsync()
+    {
+        if (!CloseOnScroll || _dismissRegistered) return;
+        _selfRef ??= DotNetObjectReference.Create(this);
+        try
+        {
+            await JS.InvokeVoidAsync("ShellUI.onDismissEvents", _dismissHandle, _selfRef);
+            _dismissRegistered = true;
+        }
+        catch { }
+    }
+
+    private async Task UnregisterDismissAsync()
+    {
+        if (!_dismissRegistered) return;
+        try { await JS.InvokeVoidAsync("ShellUI.offDismissEvents", _dismissHandle); } catch { }
+        _dismissRegistered = false;
+    }
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
@@ -151,13 +201,14 @@
     {
         Value = item;
         IsOpen = false;
+        await UnregisterDismissAsync();
         await ValueChanged.InvokeAsync(item);
     }
 
     private async Task OnKeyDown(KeyboardEventArgs e)
     {
         var filtered = Filter().ToList();
-        if (e.Key == "Escape") { Close(); return; }
+        if (e.Key == "Escape") { await Close(); return; }
         if (e.Key == "ArrowDown") { _highlightedIndex = Math.Min(_highlightedIndex + 1, filtered.Count - 1); return; }
         if (e.Key == "ArrowUp") { _highlightedIndex = Math.Max(_highlightedIndex - 1, 0); return; }
         if (e.Key == "Enter" && filtered.Count > 0)
@@ -166,4 +217,10 @@
             await SelectItem(filtered[idx]);
         }
     }
+
+    public async ValueTask DisposeAsync()
+    {
+        await UnregisterDismissAsync();
+        _selfRef?.Dispose();
+    }
 }
diff --git a/NET10/BlazorInteractiveServer/Components/UI/DataTable.razor b/NET10/BlazorInteractiveServer/Components/UI/DataTable.razor
index 648cac6..ffdaa5d 100644
--- a/NET10/BlazorInteractiveServer/Components/UI/DataTable.razor
+++ b/NET10/BlazorInteractiveServer/Components/UI/DataTable.razor
@@ -33,7 +33,7 @@
                     @foreach (var column in Columns)
                     {
                         <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground @(column.Sortable ? "cursor-pointer hover:bg-accent/50" : "")"
-                            @onclick="() => { if (column.Sortable) OnSortClicked(column); }">
+                            @onclick="async () => { if (column.Sortable) await OnSortClicked(column); }">
                             <div class="flex items-center gap-2">
                                 @column.Header
                                 @if (column.Sortable)
@@ -114,7 +114,7 @@
     </div>
 
     <!-- Pagination -->
-    @if (ShowPagination && _filteredItems.Any())
+    @if (ShowPagination && (_filteredItems.Any() || (ServerSide && _serverTotalCount > 0)))
     {
         <div class="flex flex-col gap-4 px-2 py-4 sm:flex-row sm:items-center sm:justify-between">
             <div class="flex-1 text-sm text-muted-foreground">
@@ -124,7 +124,7 @@
                 }
                 else
                 {
-                    @($"Showing {_startIndex} - {_endIndex} of {_filteredItems.Count()} results")
+                    @($"Showing {_startIndex} - {_endIndex} of {(ServerSide ? _serverTotalCount : _filteredItems.Count())} results")
                 }
             </div>
             <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:space-x-6 lg:space-x-8">
@@ -138,7 +138,7 @@
                             }
                         </select>
                         <div class="absolute inset-y-0 right-1 flex items-center pointer-events-none">
-                            <svg class="h-3 w-3 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <svg class="h-3 w-3 text-foreground/70" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                             </svg>
                         </div>
@@ -191,6 +191,16 @@
     [Parameter]
     public EventCallback<HashSet<TItem>> SelectedItemsChanged { get; set; }
 
+    /// When true, `Items` is ignored and the table calls `OnDataRequest` for each
+    /// filter / sort / page change. Use for datasets too large to materialize client-side.
+    [Parameter]
+    public bool ServerSide { get; set; }
+
+    /// Required when `ServerSide` is true. Receives the current DataTableRequest
+    /// (skip/take/sort/search) and returns the page of items plus total count.
+    [Parameter]
+    public Func<DataTableRequest, Task<DataTableResponse<TItem>>>? OnDataRequest { get; set; }
+
     private string _filterText = "";
     private IEnumerable<TItem> _filteredItems = new List<TItem>();
     private IEnumerable<TItem> _paginatedItems = new List<TItem>();
@@ -200,11 +210,51 @@
     private int _startIndex = 1;
     private int _endIndex = 1;
     private int _pageSize = 10;
+    private int _serverTotalCount = 0;
     private TItem? _openActionsItem = default(TItem);
 
-    protected override void OnParametersSet()
+    protected override async Task OnParametersSetAsync()
+    {
+        await RefreshAsync();
+    }
+
+    private async Task RefreshAsync()
     {
-        UpdateFilteredItems();
+        if (ServerSide && OnDataRequest is not null)
+        {
+            await LoadServerPageAsync();
+        }
+        else
+        {
+            UpdateFilteredItems();
+        }
+    }
+
+    private async Task LoadServerPageAsync()
+    {
+        var sortColumn = Columns.FirstOrDefault(c => c.SortDirection != SortDirection.None);
+        var request = new DataTableRequest
+        {
+            Skip = (_currentPage - 1) * _pageSize,
+            Take = _pageSize,
+            SortBy = sortColumn?.PropertyName,
+            SortDirection = sortColumn?.SortDirection ?? SortDirection.None,
+            SearchQuery = _filterText ?? ""
+        };
+
+        var response = await OnDataRequest!(request);
+
+        _paginatedItems = response.Items;
+        _serverTotalCount = response.TotalCount;
+        _totalPages = Math.Max(1, (int)Math.Ceiling(_serverTotalCount / (double)_pageSize));
+        _currentPage = Math.Min(_currentPage, _totalPages);
+        _startIndex = _serverTotalCount == 0 ? 0 : (_currentPage - 1) * _pageSize + 1;
+        _endIndex = Math.Min(_currentPage * _pageSize, _serverTotalCount);
+        // Keep the "select-all" checkbox and count displays honest — they only ever
+        // reference the currently loaded page in server-side mode.
+        _filteredItems = _paginatedItems;
+
+        StateHasChanged();
     }
 
     private void UpdateFilteredItems()
@@ -213,7 +263,7 @@
         _filteredItems = string.IsNullOrWhiteSpace(_filterText)
             ? Items
             : Items.Where(item =>
-                Columns.Any(col => 
+                Columns.Any(col =>
                 {
                     // Simple text search - check if any property contains the filter text
                     var property = typeof(TItem).GetProperty(col.PropertyName);
@@ -243,31 +293,29 @@
         StateHasChanged();
     }
 
-    private void OnFilterInput(ChangeEventArgs e)
+    private async Task OnFilterInput(ChangeEventArgs e)
     {
         _filterText = e.Value?.ToString() ?? "";
-        _currentPage = 1; // Reset to first page
-        UpdateFilteredItems();
+        _currentPage = 1;
+        await RefreshAsync();
     }
 
-    private void OnFilterChanged(string value)
+    private async Task OnFilterChanged(string value)
     {
         _filterText = value;
-        _currentPage = 1; // Reset to first page
-        UpdateFilteredItems();
+        _currentPage = 1;
+        await RefreshAsync();
     }
 
-    private void OnSortClicked(DataTableColumn<TItem> column)
+    private async Task OnSortClicked(DataTableColumn<TItem> column)
     {
         if (!column.Sortable) return;
 
-        // Reset other columns
         foreach (var col in Columns.Where(c => c != column))
         {
             col.SortDirection = SortDirection.None;
         }
 
-        // Cycle sort direction
         column.SortDirection = column.SortDirection switch
         {
             SortDirection.None => SortDirection.Ascending,
@@ -276,7 +324,7 @@
             _ => SortDirection.Ascending
         };
 
-        UpdateFilteredItems();
+        await RefreshAsync();
     }
 
     private void OnSelectAllChanged(bool selected)
@@ -311,31 +359,31 @@
 
     private bool IsSelected(TItem item) => _selectedItems.Contains(item);
 
-    private void OnPageSizeChanged(ChangeEventArgs e)
+    private async Task OnPageSizeChanged(ChangeEventArgs e)
     {
         if (int.TryParse(e.Value?.ToString(), out var size))
         {
             _pageSize = size;
             _currentPage = 1;
-            UpdateFilteredItems();
+            await RefreshAsync();
         }
     }
 
-    private void OnPreviousPage()
+    private async Task OnPreviousPage()
     {
         if (_currentPage > 1)
         {
             _currentPage--;
-            UpdateFilteredItems();
+            await RefreshAsync();
         }
     }
 
-    private void OnNextPage()
+    private async Task OnNextPage()
     {
         if (_currentPage < _totalPages)
         {
             _currentPage++;
-            UpdateFilteredItems();
+            await RefreshAsync();
         }
     }
 
@@ -351,3 +399,4 @@
         StateHasChanged();
     }
 }
+
diff --git a/NET10/BlazorInteractiveServer/Components/UI/DatePicker.razor b/NET10/BlazorInteractiveServer/Components/UI/DatePicker.razor
index 26fc5a7..65b5bb9 100644
--- a/NET10/BlazorInteractiveServer/Components/UI/DatePicker.razor
+++ b/NET10/BlazorInteractiveServer/Components/UI/DatePicker.razor
@@ -1,24 +1,27 @@
 @namespace BlazorInteractiveServer.Components.UI
+@using Microsoft.JSInterop
+@implements IAsyncDisposable
+@inject IJSRuntime JS
 
 <div class="@Shell.Cn("relative", Class)" @attributes="AdditionalAttributes">
     <div class="relative">
         <button type="button"
                 @onclick="Toggle"
                 disabled="@Disabled"
-                class="@Shell.Cn("flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", Disabled ? "cursor-not-allowed opacity-50" : "")">
-            <span class="@(Value == null ? "text-muted-foreground" : "")">
+                class="@Shell.Cn("flex h-10 w-full items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", Disabled ? "cursor-not-allowed opacity-50" : "")">
+            <span class="@("flex-1 text-left " + (Value == null ? "text-muted-foreground" : ""))">
                 @(Value?.ToString("MMM dd, yyyy") ?? Placeholder)
             </span>
-            <div class="flex items-center gap-1">
+            <div class="ml-auto flex items-center gap-1 shrink-0">
                 @if (AllowClear && Value.HasValue && !Disabled)
                 {
                     <div role="button" @onclick:stopPropagation @onclick="Clear" class="text-muted-foreground hover:text-foreground">
-                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                         </svg>
                     </div>
                 }
-                <svg class="h-4 w-4 opacity-50" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <svg class="h-4 w-4 text-foreground/70" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                 </svg>
             </div>
@@ -81,21 +84,68 @@
     [Parameter] public string Placeholder { get; set; } = "Pick a date";
     [Parameter] public bool Disabled { get; set; }
     [Parameter] public bool AllowClear { get; set; } = true;
+    /// Dismiss the calendar when the page scrolls. Matches shadcn/Radix behavior.
+    /// Set false to keep the calendar open across scroll.
+    [Parameter] public bool CloseOnScroll { get; set; }
     [Parameter] public string? Class { get; set; }
     [Parameter(CaptureUnmatchedValues = true)]
     public Dictionary<string, object>? AdditionalAttributes { get; set; }
     
     private bool IsOpen { get; set; }
     private DateTime currentMonth = DateTime.Now;
-    
-    private void Toggle() => IsOpen = !IsOpen;
-    private void Close() => IsOpen = false;
-    
+    private DotNetObjectReference<DatePicker>? _selfRef;
+    private readonly string _dismissHandle = Guid.NewGuid().ToString("N");
+    private bool _dismissRegistered;
+
+    private async Task Toggle()
+    {
+        IsOpen = !IsOpen;
+        if (IsOpen) await RegisterDismissAsync();
+        else await UnregisterDismissAsync();
+    }
+
+    private async Task Close()
+    {
+        IsOpen = false;
+        await UnregisterDismissAsync();
+    }
+
+    [JSInvokable]
+    public async Task OnDismissEvent()
+    {
+        if (IsOpen)
+        {
+            IsOpen = false;
+            await UnregisterDismissAsync();
+            StateHasChanged();
+        }
+    }
+
+    private async Task RegisterDismissAsync()
+    {
+        if (!CloseOnScroll || _dismissRegistered) return;
+        _selfRef ??= DotNetObjectReference.Create(this);
+        try
+        {
+            await JS.InvokeVoidAsync("ShellUI.onDismissEvents", _dismissHandle, _selfRef);
+            _dismissRegistered = true;
+        }
+        catch { }
+    }
+
+    private async Task UnregisterDismissAsync()
+    {
+        if (!_dismissRegistered) return;
+        try { await JS.InvokeVoidAsync("ShellUI.offDismissEvents", _dismissHandle); } catch { }
+        _dismissRegistered = false;
+    }
+
     private async Task SelectDate(DateTime date)
     {
         Value = date;
-        await ValueChanged.InvokeAsync(date);
         IsOpen = false;
+        await UnregisterDismissAsync();
+        await ValueChanged.InvokeAsync(date);
     }
 
     private async Task Clear()
@@ -103,9 +153,14 @@
         Value = null;
         await ValueChanged.InvokeAsync(null);
     }
-    
+
     private void PreviousMonth() => currentMonth = currentMonth.AddMonths(-1);
     private void NextMonth() => currentMonth = currentMonth.AddMonths(1);
     private int GetDaysInMonth() => DateTime.DaysInMonth(currentMonth.Year, currentMonth.Month);
-}
 
+    public async ValueTask DisposeAsync()
+    {
+        await UnregisterDismissAsync();
+        _selfRef?.Dispose();
+    }
+}
diff --git a/NET10/BlazorInteractiveServer/Components/UI/DateRangePicker.razor b/NET10/BlazorInteractiveServer/Components/UI/DateRangePicker.razor
index 0dd7c4c..c0bb4cd 100644
--- a/NET10/BlazorInteractiveServer/Components/UI/DateRangePicker.razor
+++ b/NET10/BlazorInteractiveServer/Components/UI/DateRangePicker.razor
@@ -1,19 +1,21 @@
 @namespace BlazorInteractiveServer.Components.UI
-@using BlazorInteractiveServer.Components
+@using Microsoft.JSInterop
+@implements IAsyncDisposable
+@inject IJSRuntime JS
 
 <div class="@Shell.Cn("relative", Class)" @attributes="AdditionalAttributes">
     <button type="button"
             @onclick="ToggleCalendar"
             disabled="@Disabled"
-            class="@Shell.Cn("flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", Disabled ? "opacity-50 cursor-not-allowed" : "")">
-        <span class="@(StartDate == null && EndDate == null ? "text-muted-foreground" : "")">
+            class="@Shell.Cn("flex h-10 w-full items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", Disabled ? "opacity-50 cursor-not-allowed" : "")">
+        <span class="@("flex-1 text-left " + (StartDate == null && EndDate == null ? "text-muted-foreground" : ""))">
             @GetDisplayText()
         </span>
-        <div class="flex items-center gap-1">
+        <div class="ml-auto flex items-center gap-1 shrink-0">
             @if (AllowClear && (StartDate.HasValue || EndDate.HasValue))
             {
-                <button type="button" 
-                        @onclick="ClearRange" 
+                <button type="button"
+                        @onclick="ClearRange"
                         @onclick:stopPropagation="true"
                         class="p-0.5 hover:bg-accent rounded transition-colors">
                     <svg class="h-3.5 w-3.5 text-muted-foreground hover:text-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -21,7 +23,7 @@
                     </svg>
                 </button>
             }
-            <svg class="h-4 w-4 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <svg class="h-4 w-4 text-foreground/70" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
             </svg>
         </div>
@@ -73,7 +75,7 @@
 
 @if (_isOpen)
 {
-    <div class="fixed inset-0 z-40" @onclick="() => _isOpen = false"></div>
+    <div class="fixed inset-0 z-40" @onclick="CloseBackdrop"></div>
 }
 
 @code {
@@ -84,6 +86,9 @@
     [Parameter] public string Placeholder { get; set; } = "Pick a date range";
     [Parameter] public bool AllowClear { get; set; } = true;
     [Parameter] public bool Disabled { get; set; }
+    /// Dismiss the calendar when the page scrolls. Matches shadcn/Radix behavior.
+    /// Set false to keep the calendar open across scroll.
+    [Parameter] public bool CloseOnScroll { get; set; }
     [Parameter] public string? Class { get; set; }
     [Parameter(CaptureUnmatchedValues = true)]
     public Dictionary<string, object>? AdditionalAttributes { get; set; }
@@ -91,6 +96,9 @@
     private bool _isOpen;
     private DateTime _currentMonth = DateTime.Now;
     private bool _selectingStart = true;
+    private DotNetObjectReference<DateRangePicker>? _selfRef;
+    private readonly string _dismissHandle = Guid.NewGuid().ToString("N");
+    private bool _dismissRegistered;
     
     private string GetDisplayText()
     {
@@ -128,7 +136,43 @@
         return baseClass;
     }
     
-    private void ToggleCalendar() => _isOpen = !_isOpen;
+    private async Task ToggleCalendar()
+    {
+        _isOpen = !_isOpen;
+        if (_isOpen) await RegisterDismissAsync();
+        else await UnregisterDismissAsync();
+    }
+
+    [JSInvokable]
+    public async Task OnDismissEvent()
+    {
+        if (_isOpen)
+        {
+            _isOpen = false;
+            await UnregisterDismissAsync();
+            StateHasChanged();
+        }
+    }
+
+    private async Task RegisterDismissAsync()
+    {
+        if (!CloseOnScroll || _dismissRegistered) return;
+        _selfRef ??= DotNetObjectReference.Create(this);
+        try
+        {
+            await JS.InvokeVoidAsync("ShellUI.onDismissEvents", _dismissHandle, _selfRef);
+            _dismissRegistered = true;
+        }
+        catch { }
+    }
+
+    private async Task UnregisterDismissAsync()
+    {
+        if (!_dismissRegistered) return;
+        try { await JS.InvokeVoidAsync("ShellUI.offDismissEvents", _dismissHandle); } catch { }
+        _dismissRegistered = false;
+    }
+
     private void PreviousMonth() => _currentMonth = _currentMonth.AddMonths(-1);
     private void NextMonth() => _currentMonth = _currentMonth.AddMonths(1);
     
@@ -176,11 +220,22 @@
         var firstDay = new DateTime(_currentMonth.Year, _currentMonth.Month, 1);
         var lastDay = firstDay.AddMonths(1).AddDays(-1);
         var startDayOfWeek = (int)firstDay.DayOfWeek;
-        
+
         for (int i = 0; i < startDayOfWeek; i++) days.Add(null);
         for (int day = 1; day <= lastDay.Day; day++) days.Add(new DateTime(_currentMonth.Year, _currentMonth.Month, day));
-        
+
         return days;
     }
-}
 
+    private async Task CloseBackdrop()
+    {
+        _isOpen = false;
+        await UnregisterDismissAsync();
+    }
+
+    public async ValueTask DisposeAsync()
+    {
+        await UnregisterDismissAsync();
+        _selfRef?.Dispose();
+    }
+}
diff --git a/NET10/BlazorInteractiveServer/Components/UI/DialogContent.razor b/NET10/BlazorInteractiveServer/Components/UI/DialogContent.razor
index 6eb2fc1..ca643c5 100644
--- a/NET10/BlazorInteractiveServer/Components/UI/DialogContent.razor
+++ b/NET10/BlazorInteractiveServer/Components/UI/DialogContent.razor
@@ -1,5 +1,7 @@
 @namespace BlazorInteractiveServer.Components.UI
-@using BlazorInteractiveServer.Components
+@using Microsoft.JSInterop
+@implements IAsyncDisposable
+@inject IJSRuntime JS
 
 @if (Dialog?.Open == true)
 {
@@ -20,6 +22,8 @@
     [Parameter(CaptureUnmatchedValues = true)]
     public Dictionary<string, object>? AdditionalAttributes { get; set; }
 
+    private bool _isLocked;
+
     private async Task Close()
     {
         if (Dialog != null)
@@ -27,6 +31,25 @@
             await Dialog.SetOpen(false);
         }
     }
-}
 
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        var shouldBeLocked = Dialog?.Open == true;
+        if (shouldBeLocked && !_isLocked)
+        {
+            try { await JS.InvokeVoidAsync("ShellUI.lockBodyScroll"); _isLocked = true; } catch { }
+        }
+        else if (!shouldBeLocked && _isLocked)
+        {
+            try { await JS.InvokeVoidAsync("ShellUI.unlockBodyScroll"); _isLocked = false; } catch { }
+        }
+    }
 
+    public async ValueTask DisposeAsync()
+    {
+        if (_isLocked)
+        {
+            try { await JS.InvokeVoidAsync("ShellUI.unlockBodyScroll"); } catch { }
+        }
+    }
+}
diff --git a/NET10/BlazorInteractiveServer/Components/UI/DrawerContent.razor b/NET10/BlazorInteractiveServer/Components/UI/DrawerContent.razor
index ca38146..206fae0 100644
--- a/NET10/BlazorInteractiveServer/Components/UI/DrawerContent.razor
+++ b/NET10/BlazorInteractiveServer/Components/UI/DrawerContent.razor
@@ -1,5 +1,7 @@
 @namespace BlazorInteractiveServer.Components.UI
-@using BlazorInteractiveServer.Components
+@using Microsoft.JSInterop
+@implements IAsyncDisposable
+@inject IJSRuntime JS
 
 @if (Parent?.Open == true)
 {
@@ -19,8 +21,31 @@
     [Parameter(CaptureUnmatchedValues = true)]
     public Dictionary<string, object>? AdditionalAttributes { get; set; }
 
+    private bool _isLocked;
+
     private async Task Close()
     {
         if (Parent != null) await Parent.SetOpen(false);
     }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        var shouldBeLocked = Parent?.Open == true;
+        if (shouldBeLocked && !_isLocked)
+        {
+            try { await JS.InvokeVoidAsync("ShellUI.lockBodyScroll"); _isLocked = true; } catch { }
+        }
+        else if (!shouldBeLocked && _isLocked)
+        {
+            try { await JS.InvokeVoidAsync("ShellUI.unlockBodyScroll"); _isLocked = false; } catch { }
+        }
+    }
+
+    public async ValueTask DisposeAsync()
+    {
+        if (_isLocked)
+        {
+            try { await JS.InvokeVoidAsync("ShellUI.unlockBodyScroll"); } catch { }
+        }
+    }
 }
diff --git a/NET10/BlazorInteractiveServer/Components/UI/MultiSelect.razor b/NET10/BlazorInteractiveServer/Components/UI/MultiSelect.razor
index 8750345..300c04b 100644
--- a/NET10/BlazorInteractiveServer/Components/UI/MultiSelect.razor
+++ b/NET10/BlazorInteractiveServer/Components/UI/MultiSelect.razor
@@ -1,6 +1,9 @@
 @namespace BlazorInteractiveServer.Components.UI
+@using Microsoft.JSInterop
 @typeparam TItem
 @typeparam TKey where TKey : notnull
+@implements IAsyncDisposable
+@inject IJSRuntime JS
 
 <div class="@Shell.Cn("relative", Class)" @attributes="AdditionalAttributes">
     <button type="button"
@@ -48,7 +51,7 @@
     {
         <div class="absolute z-50 mt-1 w-full rounded-md border border-border bg-popover shadow-md animate-in fade-in-0 zoom-in-95">
             <div class="flex items-center border-b border-border px-3">
-                <svg class="mr-2 h-4 w-4 shrink-0 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <svg class="mr-2 h-4 w-4 shrink-0 text-foreground/70" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                 </svg>
                 <input @ref="_searchInput"
@@ -121,6 +124,9 @@
     [Parameter] public string SearchPlaceholder { get; set; } = "Search...";
     [Parameter] public string EmptyText { get; set; } = "No results found.";
     [Parameter] public bool Disabled { get; set; }
+    /// Dismiss the dropdown when the page scrolls. Matches shadcn/Radix behavior.
+    /// Set false to keep the dropdown open across scroll (useful for infinite-scroll pages).
+    [Parameter] public bool CloseOnScroll { get; set; }
     [Parameter] public string? Class { get; set; }
     [Parameter(CaptureUnmatchedValues = true)]
     public Dictionary<string, object>? AdditionalAttributes { get; set; }
@@ -130,6 +136,9 @@
     private int _highlightedIndex;
     private ElementReference _searchInput;
     private bool _shouldFocus;
+    private DotNetObjectReference<MultiSelect<TItem, TKey>>? _selfRef;
+    private readonly string _dismissHandle = Guid.NewGuid().ToString("N");
+    private bool _dismissRegistered;
 
     private string DisplayFor(TItem item) => DisplaySelector?.Invoke(item) ?? item?.ToString() ?? "";
     private TKey KeyFor(TItem item) => KeySelector(item);
@@ -142,7 +151,7 @@
         return Items.Where(i => DisplayFor(i).Contains(q, StringComparison.OrdinalIgnoreCase));
     }
 
-    private void Toggle()
+    private async Task Toggle()
     {
         if (Disabled) return;
         IsOpen = !IsOpen;
@@ -151,10 +160,49 @@
             _searchQuery = "";
             _highlightedIndex = 0;
             _shouldFocus = true;
+            await RegisterDismissAsync();
+        }
+        else
+        {
+            await UnregisterDismissAsync();
         }
     }
 
-    private void Close() => IsOpen = false;
+    private async Task Close()
+    {
+        IsOpen = false;
+        await UnregisterDismissAsync();
+    }
+
+    [JSInvokable]
+    public async Task OnDismissEvent()
+    {
+        if (IsOpen)
+        {
+            IsOpen = false;
+            await UnregisterDismissAsync();
+            StateHasChanged();
+        }
+    }
+
+    private async Task RegisterDismissAsync()
+    {
+        if (!CloseOnScroll || _dismissRegistered) return;
+        _selfRef ??= DotNetObjectReference.Create(this);
+        try
+        {
+            await JS.InvokeVoidAsync("ShellUI.onDismissEvents", _dismissHandle, _selfRef);
+            _dismissRegistered = true;
+        }
+        catch { }
+    }
+
+    private async Task UnregisterDismissAsync()
+    {
+        if (!_dismissRegistered) return;
+        try { await JS.InvokeVoidAsync("ShellUI.offDismissEvents", _dismissHandle); } catch { }
+        _dismissRegistered = false;
+    }
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
@@ -186,7 +234,7 @@
     private async Task OnKeyDown(KeyboardEventArgs e)
     {
         var filtered = Filter().ToList();
-        if (e.Key == "Escape") { Close(); return; }
+        if (e.Key == "Escape") { await Close(); return; }
         if (e.Key == "ArrowDown") { _highlightedIndex = Math.Min(_highlightedIndex + 1, filtered.Count - 1); return; }
         if (e.Key == "ArrowUp") { _highlightedIndex = Math.Max(_highlightedIndex - 1, 0); return; }
         if (e.Key == "Enter" && filtered.Count > 0)
@@ -195,4 +243,10 @@
             await ToggleItem(filtered[idx]);
         }
     }
+
+    public async ValueTask DisposeAsync()
+    {
+        await UnregisterDismissAsync();
+        _selfRef?.Dispose();
+    }
 }
diff --git a/NET10/BlazorInteractiveServer/Components/UI/SheetContent.razor b/NET10/BlazorInteractiveServer/Components/UI/SheetContent.razor
index 80a1c94..f44099e 100644
--- a/NET10/BlazorInteractiveServer/Components/UI/SheetContent.razor
+++ b/NET10/BlazorInteractiveServer/Components/UI/SheetContent.razor
@@ -1,5 +1,7 @@
 @namespace BlazorInteractiveServer.Components.UI
-@using BlazorInteractiveServer.Components
+@using Microsoft.JSInterop
+@implements IAsyncDisposable
+@inject IJSRuntime JS
 
 @if (Parent?.Open == true)
 {
@@ -18,8 +20,31 @@
     [Parameter(CaptureUnmatchedValues = true)]
     public Dictionary<string, object>? AdditionalAttributes { get; set; }
 
+    private bool _isLocked;
+
     private async Task Close()
     {
         if (Parent != null) await Parent.SetOpen(false);
     }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        var shouldBeLocked = Parent?.Open == true;
+        if (shouldBeLocked && !_isLocked)
+        {
+            try { await JS.InvokeVoidAsync("ShellUI.lockBodyScroll"); _isLocked = true; } catch { }
+        }
+        else if (!shouldBeLocked && _isLocked)
+        {
+            try { await JS.InvokeVoidAsync("ShellUI.unlockBodyScroll"); _isLocked = false; } catch { }
+        }
+    }
+
+    public async ValueTask DisposeAsync()
+    {
+        if (_isLocked)
+        {
+            try { await JS.InvokeVoidAsync("ShellUI.unlockBodyScroll"); } catch { }
+        }
+    }
 }
diff --git a/NET10/BlazorInteractiveServer/Components/UI/Sonner.razor b/NET10/BlazorInteractiveServer/Components/UI/Sonner.razor
index 78b93ff..8756d4b 100644
--- a/NET10/BlazorInteractiveServer/Components/UI/Sonner.razor
+++ b/NET10/BlazorInteractiveServer/Components/UI/Sonner.razor
@@ -1,6 +1,5 @@
 @namespace BlazorInteractiveServer.Components.UI
 @using BlazorInteractiveServer.Components.Services
-@using BlazorInteractiveServer.Components
 @implements IDisposable
 @inject SonnerService SonnerService
 
@@ -14,7 +13,7 @@
         var stackClass = i > 0 ? (IsTop ? "-mt-20 group-hover:mt-0" : "-mb-20 group-hover:mb-0") : "";
         <div @key="toast.Id"
              style="z-index: @(i + 1)"
-             class="@stackClass @GetToastClasses(toast.Variant) pointer-events-auto relative flex min-w-0 w-full items-center gap-3 overflow-hidden rounded-lg p-4 shadow-lg transition-all duration-300 animate-in fade-in-0 @SonnerVariants.GetToastAnimation(Position) shrink-0">
+             class="@stackClass @GetToastClasses(toast.Variant) pointer-events-auto relative flex min-w-0 w-full items-center gap-3 overflow-hidden rounded-lg p-4 shadow-lg transition-all duration-300 motion-reduce:transition-none animate-in fade-in-0 motion-reduce:animate-none @SonnerVariants.GetToastAnimation(Position) shrink-0">
             <div class="grid flex-1 gap-1">
                 @if (!string.IsNullOrEmpty(toast.Message))
                 {
@@ -51,6 +50,8 @@
     {
         "destructive" => "bg-destructive text-destructive-foreground",
         "success" => "bg-green-500/20 text-green-700 dark:bg-green-900/30 dark:text-green-100",
+        "info" => "bg-blue-500/20 text-blue-700 dark:bg-blue-900/30 dark:text-blue-100",
+        "warning" => "bg-yellow-500/20 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-100",
         _ => "bg-background text-foreground"
     };
 }
diff --git a/NET10/BlazorInteractiveServer/Components/UI/Stepper.razor b/NET10/BlazorInteractiveServer/Components/UI/Stepper.razor
index 907d4b9..5d26546 100644
--- a/NET10/BlazorInteractiveServer/Components/UI/Stepper.razor
+++ b/NET10/BlazorInteractiveServer/Components/UI/Stepper.razor
@@ -1,7 +1,7 @@
 @namespace BlazorInteractiveServer.Components.UI
 @using BlazorInteractiveServer.Components.Models
 
-<CascadingValue Value="this" IsFixed="true">
+<CascadingValue Value="this">
     <div class="@Shell.Cn("w-full", Class)">
         @if (StepItems.Count > 0)
         {
@@ -13,13 +13,22 @@
                     var isActive = i == _activeStep;
                     var isCompleted = i < _highestStepReached;
                     var isClickable = i <= _highestStepReached;
+                    var capturedIndex = i;
+
+                    string stateClass;
+                    if (isActive)
+                        stateClass = "border-primary bg-primary text-primary-foreground ring-2 ring-primary/20 ring-offset-2 ring-offset-background";
+                    else if (isCompleted)
+                        stateClass = "border-primary bg-primary/10 text-primary";
+                    else
+                        stateClass = "border-muted bg-background text-muted-foreground";
 
                     <div class="flex flex-col items-center relative">
                         <button type="button"
-                                class="@Shell.Cn("flex h-10 w-10 items-center justify-center rounded-full border-2 text-sm font-medium transition-colors", isCompleted ? "border-primary bg-primary text-primary-foreground" : isActive ? "border-primary bg-background text-primary" : "border-muted bg-background text-muted-foreground", isClickable ? "cursor-pointer hover:border-primary/50" : "cursor-not-allowed")"
+                                class="@Shell.Cn("flex h-10 w-10 items-center justify-center rounded-full border-2 text-sm font-medium transition-colors", stateClass, isClickable ? "cursor-pointer" : "cursor-not-allowed", isClickable && !isActive ? "hover:border-primary/50" : "")"
                                 disabled="@(!isClickable)"
-                                @onclick="async () => await GoToStepAsync(i)">
-                            @if (isCompleted)
+                                @onclick="async () => await GoToStepAsync(capturedIndex)">
+                            @if (isCompleted && !isActive)
                             {
                                 <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
diff --git a/NET10/BlazorInteractiveServer/Components/UI/StepperStep.razor b/NET10/BlazorInteractiveServer/Components/UI/StepperStep.razor
index adeafd5..aec19c9 100644
--- a/NET10/BlazorInteractiveServer/Components/UI/StepperStep.razor
+++ b/NET10/BlazorInteractiveServer/Components/UI/StepperStep.razor
@@ -5,13 +5,21 @@
     var isActive = ParentStepper?.ActiveStep == index;
     var isCompleted = ParentStepper != null && index < ParentStepper.HighestStepReached;
     var isClickable = ParentStepper != null && index <= ParentStepper.HighestStepReached;
+
+    string stateClass;
+    if (isActive)
+        stateClass = "border-primary bg-primary text-primary-foreground ring-2 ring-primary/20 ring-offset-2 ring-offset-background";
+    else if (isCompleted)
+        stateClass = "border-primary bg-primary/10 text-primary";
+    else
+        stateClass = "border-muted bg-background text-muted-foreground";
 }
 <div class="flex flex-col items-center relative">
     <button type="button"
-            class="@Shell.Cn("flex h-10 w-10 items-center justify-center rounded-full border-2 text-sm font-medium transition-colors", isCompleted ? "border-primary bg-primary text-primary-foreground" : isActive ? "border-primary bg-background text-primary" : "border-muted bg-background text-muted-foreground", isClickable ? "cursor-pointer hover:border-primary/50" : "cursor-not-allowed")"
+            class="@Shell.Cn("flex h-10 w-10 items-center justify-center rounded-full border-2 text-sm font-medium transition-colors", stateClass, isClickable ? "cursor-pointer" : "cursor-not-allowed", isClickable && !isActive ? "hover:border-primary/50" : "")"
             disabled="@(!isClickable)"
             @onclick="async () => { if (ParentStepper != null) await ParentStepper.GoToStepAsync(index); }">
-        @if (isCompleted)
+        @if (isCompleted && !isActive)
         {
             <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
diff --git a/NET10/BlazorInteractiveServer/Components/UI/Toast.razor b/NET10/BlazorInteractiveServer/Components/UI/Toast.razor
index 8e74a53..f4729ec 100644
--- a/NET10/BlazorInteractiveServer/Components/UI/Toast.razor
+++ b/NET10/BlazorInteractiveServer/Components/UI/Toast.razor
@@ -1,10 +1,9 @@
 @namespace BlazorInteractiveServer.Components.UI
-@using BlazorInteractiveServer.Components
 
 @if (IsVisible)
 {
     <div class="@Shell.Cn("fixed z-50 flex max-h-screen w-full flex-col-reverse gap-2 p-4 sm:flex-col md:max-w-[420px]", GetPositionClass())">
-        <div class="@Shell.Cn("pointer-events-auto group relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border border-border p-6 pr-8 shadow-lg transition-all", GetVariantClass(), Class)"
+        <div class="@Shell.Cn("pointer-events-auto group relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border border-border p-6 pr-8 shadow-lg transition-all motion-reduce:transition-none", GetVariantClass(), Class)"
              @attributes="AdditionalAttributes">
             <div class="grid gap-1">
                 @if (!string.IsNullOrEmpty(Title))
@@ -60,4 +59,3 @@
         _ => "bottom-0 right-0"
     };
 }
-
diff --git a/NET10/BlazorInteractiveServer/Components/UI/TypedSelect.razor b/NET10/BlazorInteractiveServer/Components/UI/TypedSelect.razor
new file mode 100644
index 0000000..3a76a46
--- /dev/null
+++ b/NET10/BlazorInteractiveServer/Components/UI/TypedSelect.razor
@@ -0,0 +1,76 @@
+@namespace BlazorInteractiveServer.Components.UI
+@typeparam TValue
+@using System.Globalization
+
+<div class="relative w-full">
+    <select value="@FormatValue()"
+            @onchange="OnChange"
+            disabled="@Disabled"
+            class="@ComputedClass"
+            @attributes="AdditionalAttributes">
+        @ChildContent
+    </select>
+    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+        <svg class="h-4 w-4 text-foreground/70" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+        </svg>
+    </div>
+</div>
+
+@code {
+    [Parameter] public TValue? Value { get; set; }
+    [Parameter] public EventCallback<TValue?> ValueChanged { get; set; }
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+    [Parameter] public bool Disabled { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+
+    private string ComputedClass => Shell.Cn(
+        "flex h-10 w-full appearance-none rounded-md border border-input bg-background pl-3 pr-9 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        Class
+    );
+
+    // InvariantCulture on IFormattable so decimals/dates round-trip cleanly across a
+    // German user's `0,5` vs an English user's `0.5` (the browser sends whatever the
+    // user's <option value=""> literal was).
+    private string? FormatValue() => Value switch
+    {
+        null => null,
+        IFormattable f => f.ToString(null, CultureInfo.InvariantCulture),
+        _ => Value.ToString()
+    };
+
+    private async Task OnChange(ChangeEventArgs e)
+    {
+        var raw = e.Value?.ToString();
+        if (raw is null)
+        {
+            await ValueChanged.InvokeAsync(default);
+            return;
+        }
+
+        // Unwrap Nullable<T> so switch matches T, not T?.
+        var targetType = Nullable.GetUnderlyingType(typeof(TValue)) ?? typeof(TValue);
+
+        try
+        {
+            object? parsed = targetType switch
+            {
+                _ when targetType == typeof(string) => raw,
+                _ when targetType.IsEnum => string.IsNullOrEmpty(raw) ? null : Enum.Parse(targetType, raw),
+                _ when targetType == typeof(Guid) => string.IsNullOrEmpty(raw) ? Guid.Empty : Guid.Parse(raw),
+                _ when targetType == typeof(bool) => bool.Parse(raw),
+                _ when string.IsNullOrEmpty(raw) => null,
+                _ => Convert.ChangeType(raw, targetType, CultureInfo.InvariantCulture)
+            };
+            await ValueChanged.InvokeAsync(parsed is null ? default : (TValue?)parsed);
+        }
+        catch
+        {
+            // Placeholder <option value=""> and other unparseable values gracefully
+            // resolve to default(TValue) instead of throwing across the render loop.
+            await ValueChanged.InvokeAsync(default);
+        }
+    }
+}
diff --git a/NET10/BlazorInteractiveServer/wwwroot/shellui.js b/NET10/BlazorInteractiveServer/wwwroot/shellui.js
index e90b373..73ce727 100644
--- a/NET10/BlazorInteractiveServer/wwwroot/shellui.js
+++ b/NET10/BlazorInteractiveServer/wwwroot/shellui.js
@@ -140,6 +140,41 @@ window.ShellUI = {
             window.removeEventListener("keydown", listener);
             this._shortcutHandlers.delete(handle);
         }
+    },
+
+    _scrollLockCount: 0,
+    _originalOverflow: "",
+    lockBodyScroll: function () {
+        if (this._scrollLockCount === 0) {
+            this._originalOverflow = document.body.style.overflow;
+            document.body.style.overflow = "hidden";
+        }
+        this._scrollLockCount++;
+    },
+    unlockBodyScroll: function () {
+        if (this._scrollLockCount === 0) return;
+        this._scrollLockCount--;
+        if (this._scrollLockCount === 0) {
+            document.body.style.overflow = this._originalOverflow;
+        }
+    },
+
+    // Fire a .NET callback when the window scrolls or resizes. Used by dropdowns
+    // to close when the page scrolls (Blazor can't reposition popovers natively).
+    _dismissHandlers: new Map(),
+    onDismissEvents: function (handle, dotNetRef) {
+        const listener = () => dotNetRef.invokeMethodAsync("OnDismissEvent");
+        window.addEventListener("scroll", listener);
+        window.addEventListener("resize", listener);
+        this._dismissHandlers.set(handle, listener);
+    },
+    offDismissEvents: function (handle) {
+        const listener = this._dismissHandlers.get(handle);
+        if (listener) {
+            window.removeEventListener("scroll", listener);
+            window.removeEventListener("resize", listener);
+            this._dismissHandlers.delete(handle);
+        }
     }
 };
 
diff --git a/NET10/ShellUI.Preview/App.razor b/NET10/ShellUI.Preview/App.razor
deleted file mode 100644
index edffe82..0000000
--- a/NET10/ShellUI.Preview/App.razor
+++ /dev/null
@@ -1,11 +0,0 @@
-<Router AppAssembly="@typeof(App).Assembly">
-    <Found Context="routeData">
-        <RouteView RouteData="@routeData" DefaultLayout="@typeof(Layout.PreviewLayout)" />
-        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
-    </Found>
-    <NotFound>
-        <LayoutView Layout="@typeof(Layout.PreviewLayout)">
-            <NotFound />
-        </LayoutView>
-    </NotFound>
-</Router>
diff --git a/NET10/ShellUI.Preview/Components/DashboardBlockPreview.razor b/NET10/ShellUI.Preview/Components/DashboardBlockPreview.razor
deleted file mode 100644
index 014011f..0000000
--- a/NET10/ShellUI.Preview/Components/DashboardBlockPreview.razor
+++ /dev/null
@@ -1,32 +0,0 @@
-@using ShellUI.Components
-
-@* Renders dashboard block inside a bounded container (shadcn-style preview) *@
-<div class="h-full min-h-0 flex">
-<SidebarProvider Class="h-full min-h-0 flex-1">
-    <AppSidebar />
-    <SidebarInset>
-        <header class="@(StickyHeader ? "sticky top-0 z-10 bg-background" : "") flex h-16 shrink-0 items-center gap-2 border-b border-border px-4">
-            <SidebarTrigger Class="-ml-1 shrink-0" />
-            <Separator Orientation="vertical" Class="mr-2 h-4 shrink-0" />
-            <Breadcrumb Class="flex flex-1 min-w-0 items-center">
-                <BreadcrumbItem Href="/">Home</BreadcrumbItem>
-                <BreadcrumbItem Href="/dashboard">Dashboard</BreadcrumbItem>
-                <BreadcrumbItem IsLast="true">Preview</BreadcrumbItem>
-            </Breadcrumb>
-            <ThemeToggle Size="sm" Variant="outline" Class="ml-auto" />
-        </header>
-        <div class="flex flex-1 flex-col gap-4 overflow-auto p-4">
-            <div class="grid auto-rows-min gap-4 md:grid-cols-3">
-                <div class="aspect-video rounded-xl bg-muted/50" />
-                <div class="aspect-video rounded-xl bg-muted/50" />
-                <div class="aspect-video rounded-xl bg-muted/50" />
-            </div>
-            <div class="min-h-[120px] flex-1 rounded-xl bg-muted/50" />
-        </div>
-    </SidebarInset>
-</SidebarProvider>
-</div>
-
-@code {
-    [Parameter] public bool StickyHeader { get; set; }
-}
diff --git a/NET10/ShellUI.Preview/Components/DialogPreview.razor b/NET10/ShellUI.Preview/Components/DialogPreview.razor
deleted file mode 100644
index 1f95431..0000000
--- a/NET10/ShellUI.Preview/Components/DialogPreview.razor
+++ /dev/null
@@ -1,26 +0,0 @@
-@using ShellUI.Components
-
-<Dialog Open="_open" OpenChanged="@(v => { _open = v; StateHasChanged(); })">
-    <DialogTrigger>
-        <Button>Open Dialog</Button>
-    </DialogTrigger>
-    <DialogContent>
-        <DialogHeader>
-            <DialogTitle>Dialog Title</DialogTitle>
-            <DialogDescription>Preview for docs embedding.</DialogDescription>
-        </DialogHeader>
-        <p class="text-sm text-muted-foreground">Content goes here.</p>
-        <DialogFooter>
-            <DialogClose>
-                <Button Variant="@ButtonVariant.Outline">Cancel</Button>
-            </DialogClose>
-            <DialogClose>
-                <Button>Confirm</Button>
-            </DialogClose>
-        </DialogFooter>
-    </DialogContent>
-</Dialog>
-
-@code {
-    private bool _open;
-}
diff --git a/NET10/ShellUI.Preview/Layout/MainLayout.razor b/NET10/ShellUI.Preview/Layout/MainLayout.razor
deleted file mode 100644
index 41ebcea..0000000
--- a/NET10/ShellUI.Preview/Layout/MainLayout.razor
+++ /dev/null
@@ -1,14 +0,0 @@
-@inherits LayoutComponentBase
-<div class="min-h-screen bg-background text-foreground flex">
-    <aside class="w-48 border-r border-border p-4 shrink-0">
-        <nav class="space-y-2 text-sm">
-            <a href="/" class="block text-muted-foreground hover:text-foreground">Home</a>
-            <a href="/preview/button" class="block text-muted-foreground hover:text-foreground">Button</a>
-            <a href="/preview/dialog" class="block text-muted-foreground hover:text-foreground">Dialog</a>
-            <a href="/preview/accordion" class="block text-muted-foreground hover:text-foreground">Accordion</a>
-        </nav>
-    </aside>
-    <main class="flex-1 p-8">
-        @Body
-    </main>
-</div>
diff --git a/NET10/ShellUI.Preview/Layout/PreviewLayout.razor b/NET10/ShellUI.Preview/Layout/PreviewLayout.razor
deleted file mode 100644
index b2b5c2d..0000000
--- a/NET10/ShellUI.Preview/Layout/PreviewLayout.razor
+++ /dev/null
@@ -1,11 +0,0 @@
-@inherits LayoutComponentBase
-
-<div class="min-h-screen bg-background text-foreground flex flex-col">
-    <header class="flex items-center gap-4 border-b border-border px-4 py-2 shrink-0">
-        <a href="/" class="text-sm text-muted-foreground hover:text-foreground transition-colors">← Components</a>
-    </header>
-    <main class="flex-1 flex items-center justify-center p-8">
-        @Body
-    </main>
-</div>
-
diff --git a/NET10/ShellUI.Preview/Pages/ComponentPreview.razor b/NET10/ShellUI.Preview/Pages/ComponentPreview.razor
deleted file mode 100644
index 6ee4409..0000000
--- a/NET10/ShellUI.Preview/Pages/ComponentPreview.razor
+++ /dev/null
@@ -1,249 +0,0 @@
-@page "/preview/{ComponentName}"
-@layout Layout.PreviewLayout
-@using ShellUI.Components
-@using ShellUI.Components.Models
-@using ShellUI.Preview.Components
-
-<div class="preview-container">
-    @switch (_id)
-    {
-        case "button":
-            <Button Variant="@_buttonVariant" Size="@_buttonSize">Button</Button>
-            break;
-        case "badge":
-            <Badge Variant="@_badgeVariant">Badge</Badge>
-            break;
-        case "switch":
-            <Switch />
-            break;
-        case "checkbox":
-            <Checkbox Label="Accept terms" />
-            break;
-        case "input":
-            <Input Placeholder="Type something..." />
-            break;
-        case "textarea":
-            <Textarea Placeholder="Enter your message..." Class="min-h-[100px] w-full max-w-md" />
-            break;
-        case "alert":
-            <Alert Variant="@_alertVariant" Title="Heads up!">You can add components to your app using the cli.</Alert>
-            break;
-        case "card":
-            <Card Class="w-[350px]">
-                <CardHeader>
-                    <CardTitle>Create project</CardTitle>
-                    <CardDescription>Deploy your new project in one-click.</CardDescription>
-                </CardHeader>
-                <CardContent>
-                    <p class="text-sm text-muted-foreground">Card Content Area</p>
-                </CardContent>
-                <CardFooter>
-                    <Button>Deploy</Button>
-                </CardFooter>
-            </Card>
-            break;
-        case "tabs":
-            <Tabs Items="@_tabItems" Class="w-[400px]" />
-            break;
-        case "combobox":
-            <Combobox Options="@_comboboxOptions" Placeholder="Select framework..." />
-            break;
-        case "data-picker":
-            <div class="w-[280px]">
-                <DataPicker TItem="Framework" TKey="string"
-                            Items="@_frameworks"
-                            Value="@_pickedFramework"
-                            ValueChanged="@(f => _pickedFramework = f)"
-                            KeySelector="@(f => f.Id)"
-                            DisplaySelector="@(f => f.Name)"
-                            Placeholder="Select framework..." />
-                @if (_pickedFramework is not null)
-                {
-                    <p class="mt-3 text-xs text-muted-foreground">Picked: <span class="font-mono">@_pickedFramework.Name</span> (@_pickedFramework.Category)</p>
-                }
-            </div>
-            break;
-        case "multi-select":
-            <div class="w-[320px]">
-                <MultiSelect TItem="Framework" TKey="string"
-                             Items="@_frameworks"
-                             Values="@_pickedFrameworks"
-                             ValuesChanged="@(vs => _pickedFrameworks = vs)"
-                             KeySelector="@(f => f.Id)"
-                             DisplaySelector="@(f => f.Name)"
-                             Placeholder="Pick multiple frameworks..." />
-                <p class="mt-3 text-xs text-muted-foreground">Selected: @_pickedFrameworks.Count</p>
-            </div>
-            break;
-        case "tag-input":
-            <div class="w-[320px]">
-                <TagInput Tags="@_tags"
-                          TagsChanged="@(ts => _tags = ts)"
-                          Placeholder="Add tag, Enter to confirm..." />
-                <p class="mt-3 text-xs text-muted-foreground">Enter to add, Backspace to remove last, paste comma/newline-separated to bulk-add.</p>
-            </div>
-            break;
-        case "command-palette":
-            <div class="flex flex-col items-center gap-3">
-                <p class="text-sm text-muted-foreground">Press <kbd class="rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-xs">Ctrl</kbd> + <kbd class="rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-xs">K</kbd> (or <kbd class="rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-xs">⌘K</kbd>) to open.</p>
-                <CommandPalette Commands="@_paletteCommands" CommandSelected="@(c => _lastCommand = c.Title)" />
-                @if (_lastCommand is not null)
-                {
-                    <p class="text-xs text-muted-foreground">Last selected: <span class="font-mono">@_lastCommand</span></p>
-                }
-            </div>
-            break;
-        case "select":
-            <div class="w-full max-w-[200px]">
-                <Select @bind-Value="_selectValue">
-                    <option value="">Choose...</option>
-                    <option value="a">Option A</option>
-                    <option value="b">Option B</option>
-                    <option value="c">Option C</option>
-                </Select>
-            </div>
-            break;
-        case "datepicker":
-            <DatePicker />
-            break;
-        case "skeleton":
-            <div class="flex items-center space-x-4">
-                <Skeleton Class="h-12 w-12 rounded-full" />
-                <div class="space-y-2">
-                    <Skeleton Class="h-4 w-[250px]" />
-                    <Skeleton Class="h-4 w-[200px]" />
-                </div>
-            </div>
-            break;
-        case "dialog":
-            <DialogPreview />
-            break;
-        case "accordion":
-            <Accordion>
-                <AccordionItem Title="Is it accessible?">
-                    <p class="text-sm text-muted-foreground">Yes. It adheres to the WAI-ARIA design pattern.</p>
-                </AccordionItem>
-                <AccordionItem Title="Is it styled?">
-                    <p class="text-sm text-muted-foreground">Yes. It comes with default styles.</p>
-                </AccordionItem>
-                <AccordionItem Title="Is it animated?">
-                    <p class="text-sm text-muted-foreground">Yes. Animated with Tailwind CSS transitions.</p>
-                </AccordionItem>
-            </Accordion>
-            break;
-        case "avatar":
-            <div class="flex items-center gap-4">
-                <Avatar Fallback="AB" />
-                <Avatar Fallback="CD" Class="h-10 w-10" />
-                <Avatar Fallback="EF" Class="h-14 w-14" />
-            </div>
-            break;
-        case "breadcrumb":
-            <Breadcrumb>
-                <BreadcrumbItem Href="/">Home</BreadcrumbItem>
-                <BreadcrumbItem Href="/components">Components</BreadcrumbItem>
-                <BreadcrumbItem IsLast="true">Breadcrumb</BreadcrumbItem>
-            </Breadcrumb>
-            break;
-        case "progress":
-            <div class="space-y-4 w-full max-w-xs">
-                <Progress Value="@(33)" />
-                <Progress Value="@(66)" />
-                <Progress Value="@(100)" />
-            </div>
-            break;
-        case "slider":
-            <div class="w-full max-w-xs">
-                <Slider Value="@(50)" />
-            </div>
-            break;
-        case "separator":
-            <div class="flex flex-col gap-4 w-full max-w-xs">
-                <div class="space-y-1">
-                    <h4 class="text-sm font-medium">Section</h4>
-                    <p class="text-sm text-muted-foreground">Content above separator.</p>
-                </div>
-                <Separator />
-                <div class="space-y-1">
-                    <h4 class="text-sm font-medium">Section</h4>
-                    <p class="text-sm text-muted-foreground">Content below separator.</p>
-                </div>
-            </div>
-            break;
-        case "label":
-            <div class="space-y-2">
-                <Label>Your email</Label>
-                <Input Placeholder="name@example.com" Type="email" />
-            </div>
-            break;
-        case "toggle":
-            <Toggle>Toggle</Toggle>
-            break;
-        case "dashboard-01":
-        case "dashboard-02":
-            <div class="w-full max-w-4xl">
-                <div class="rounded-xl border border-border bg-card shadow-sm overflow-hidden" style="min-height: 520px; height: 560px;">
-                    <DashboardBlockPreview StickyHeader="@(_id == "dashboard-02")" />
-                </div>
-                <p class="mt-2 text-xs text-muted-foreground">@(_id == "dashboard-02" ? "Sticky header (breadcrumb bar stays fixed on scroll)" : "Header scrolls with content")</p>
-            </div>
-            break;
-        default:
-            <div class="text-muted-foreground text-sm">
-                Component <span class="font-mono bg-muted px-1 rounded">@ComponentName</span> not found.
-            </div>
-            break;
-    }
-</div>
-
-@code {
-    [Parameter] public string ComponentName { get; set; } = "";
-
-    [SupplyParameterFromQuery] public string? Variant { get; set; }
-    [SupplyParameterFromQuery] public string? Size { get; set; }
-
-    private string _id => ComponentName?.ToLowerInvariant() ?? "";
-
-    private ButtonVariant _buttonVariant => Enum.TryParse<ButtonVariant>(Variant, true, out var v) ? v : ButtonVariant.Default;
-    private ButtonSize _buttonSize => Enum.TryParse<ButtonSize>(Size, true, out var s) ? s : ButtonSize.Default;
-    private BadgeVariant _badgeVariant => Enum.TryParse<BadgeVariant>(Variant, true, out var b) ? b : BadgeVariant.Default;
-    private AlertVariant _alertVariant => Enum.TryParse<AlertVariant>(Variant, true, out var a) ? a : AlertVariant.Default;
-
-    private List<TabItem> _tabItems => new()
-    {
-        new() { Id = "account", Label = "Account", Content = b => b.AddMarkupContent(0, "<div class='p-4 border rounded mt-2'>Account settings here.</div>") },
-        new() { Id = "password", Label = "Password", Content = b => b.AddMarkupContent(0, "<div class='p-4 border rounded mt-2'>Change password here.</div>") }
-    };
-
-    private List<string> _comboboxOptions => new() { "Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro" };
-
-    private string _selectValue { get; set; } = "";
-
-    private record Framework(string Id, string Name, string Category);
-
-    private List<Framework> _frameworks => new()
-    {
-        new("next", "Next.js", "React"),
-        new("sveltekit", "SvelteKit", "Svelte"),
-        new("nuxt", "Nuxt.js", "Vue"),
-        new("remix", "Remix", "React"),
-        new("astro", "Astro", "Multi"),
-        new("qwik", "Qwik", "Fresh"),
-        new("solidstart", "SolidStart", "Solid"),
-        new("blazor", "Blazor", ".NET"),
-    };
-    private Framework? _pickedFramework;
-    private List<Framework> _pickedFrameworks = new();
-
-    private List<string> _tags = new() { "blazor", "shellui" };
-
-    private List<CommandItem> _paletteCommands => new()
-    {
-        new() { Title = "Go to Home", Description = "Navigate to home page", Shortcut = "Ctrl+H" },
-        new() { Title = "Toggle Theme", Description = "Switch light/dark mode", Shortcut = "Ctrl+T" },
-        new() { Title = "Search Components", Description = "Open component search" },
-        new() { Title = "Open Settings", Description = "Application preferences" },
-        new() { Title = "Sign Out", Description = "End your session" },
-    };
-    private string? _lastCommand;
-}
diff --git a/NET10/ShellUI.Preview/Pages/Home.razor b/NET10/ShellUI.Preview/Pages/Home.razor
deleted file mode 100644
index ca30643..0000000
--- a/NET10/ShellUI.Preview/Pages/Home.razor
+++ /dev/null
@@ -1,59 +0,0 @@
-@page "/"
-
-<PageTitle>ShellUI Components</PageTitle>
-
-<div class="w-fit max-w-5xl mx-auto px-6 py-10">
-    <div class="mb-8">
-        <h1 class="text-2xl font-semibold tracking-tight text-foreground">ShellUI Components</h1>
-        <p class="mt-1 text-sm text-muted-foreground">Click a component to view its preview.</p>
-    </div>
-
-    <Separator Class="mb-6" />
-
-    <div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-2">
-        @foreach (var item in _components)
-        {
-            <a href="/preview/@item.Id"
-               class="flex flex-col items-center gap-2 rounded-lg border border-border bg-card px-3 py-3 text-center text-xs font-medium text-foreground transition-colors hover:border-primary/50 hover:bg-accent/50 min-w-0">
-                <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-muted/60 text-muted-foreground [&>svg]:size-4">
-                    @((MarkupString)item.IconSvg)
-                </span>
-                <span class="truncate w-full">@item.Label</span>
-            </a>
-        }
-    </div>
-</div>
-
-@code {
-    private readonly List<(string Id, string Label, string IconSvg)> _components = new()
-    {
-        ("button", "Button", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"4\" y=\"8\" width=\"16\" height=\"8\" rx=\"2\"/></svg>"),
-        ("badge", "Badge", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3 7h7l-5.5 4 2 7L12 16l-6.5 4 2-7L5 9h7z\"/></svg>"),
-        ("switch", "Switch", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"2\" y=\"6\" width=\"20\" height=\"12\" rx=\"6\"/><circle cx=\"8\" cy=\"12\" r=\"4\" fill=\"currentColor\"/></svg>"),
-        ("checkbox", "Checkbox", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"2\"/><path d=\"M9 12l2 2 4-4\"/></svg>"),
-        ("input", "Input", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"4\" y=\"6\" width=\"16\" height=\"12\" rx=\"2\"/><path d=\"M8 10h8M8 14h4\"/></svg>"),
-        ("textarea", "Textarea", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"2\"/><path d=\"M8 8h8M8 12h8M8 16h4\"/></svg>"),
-        ("alert", "Alert", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 9v2M12 17h.01\"/><path d=\"M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z\"/></svg>"),
-        ("card", "Card", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"2\" y=\"4\" width=\"20\" height=\"16\" rx=\"2\"/><path d=\"M2 10h20\"/></svg>"),
-        ("tabs", "Tabs", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"2\" y=\"6\" width=\"20\" height=\"12\" rx=\"1\"/><path d=\"M2 10h20\"/><rect x=\"4\" y=\"8\" width=\"6\" height=\"4\" fill=\"currentColor\" opacity=\"0.3\"/></svg>"),
-        ("combobox", "Combobox", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M4 6h16M4 12h16M4 18h8\"/><path d=\"M18 15l3 3-3 3\"/></svg>"),
-        ("data-picker", "DataPicker", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"6\" rx=\"1\"/><path d=\"M7 14h10M7 18h6\"/><circle cx=\"18\" cy=\"18\" r=\"1.5\" fill=\"currentColor\"/></svg>"),
-        ("multi-select", "MultiSelect", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"3\" y=\"5\" width=\"7\" height=\"4\" rx=\"1\"/><rect x=\"12\" y=\"5\" width=\"9\" height=\"4\" rx=\"1\"/><path d=\"M3 14h18M3 18h12\"/></svg>"),
-        ("tag-input", "TagInput", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z\"/><circle cx=\"7\" cy=\"7\" r=\"1.5\" fill=\"currentColor\"/></svg>"),
-        ("command-palette", "CommandPalette", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/><path d=\"M8 12h8M8 15h5\"/><rect x=\"6\" y=\"7\" width=\"12\" height=\"3\" rx=\"1\" fill=\"currentColor\" opacity=\"0.2\"/></svg>"),
-        ("select", "Select", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"4\" y=\"6\" width=\"16\" height=\"12\" rx=\"2\"/><path d=\"M9 10h6M9 14h4\"/><path d=\"M12 16l2-2 2 2\"/></svg>"),
-        ("datepicker", "DatePicker", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"4\" y=\"4\" width=\"16\" height=\"18\" rx=\"2\"/><path d=\"M16 2v4M8 2v4M4 10h16\"/></svg>"),
-        ("skeleton", "Skeleton", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"2\" stroke-dasharray=\"4 2\"/></svg>"),
-        ("dialog", "Dialog", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"2\"/><path d=\"M8 8h8M8 12h6\"/></svg>"),
-        ("accordion", "Accordion", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M4 6h16M4 12h16M4 18h10\"/><path d=\"M16 10l2 2-2 2\"/></svg>"),
-        ("avatar", "Avatar", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"8\" r=\"4\"/><path d=\"M4 20c0-4 4-6 8-6s8 2 8 6\"/></svg>"),
-        ("breadcrumb", "Breadcrumb", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M4 12h8M4 12l4-4M4 12l4 4\"/><path d=\"M16 12h4\"/></svg>"),
-        ("progress", "Progress", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"2\" y=\"8\" width=\"20\" height=\"8\" rx=\"4\"/><rect x=\"4\" y=\"10\" width=\"8\" height=\"4\" rx=\"2\" fill=\"currentColor\"/></svg>"),
-        ("slider", "Slider", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M4 12h16\"/><circle cx=\"8\" cy=\"12\" r=\"2\" fill=\"currentColor\"/></svg>"),
-        ("separator", "Separator", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M4 12h16\"/></svg>"),
-        ("label", "Label", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M4 6h8l2 4-2 4H4\"/><path d=\"M14 6h6v12h-6\"/></svg>"),
-        ("toggle", "Toggle", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"4\" y=\"6\" width=\"16\" height=\"12\" rx=\"2\"/><circle cx=\"10\" cy=\"12\" r=\"3\" fill=\"currentColor\"/></svg>"),
-        ("dashboard-01", "Dashboard 01", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"2\" y=\"4\" width=\"20\" height=\"16\" rx=\"2\"/><path d=\"M2 10h20\"/><path d=\"M8 14h8\"/></svg>"),
-        ("dashboard-02", "Dashboard 02", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"2\" y=\"4\" width=\"20\" height=\"16\" rx=\"2\"/><path d=\"M2 10h20\"/><rect x=\"4\" y=\"10\" width=\"16\" height=\"2\" fill=\"currentColor\" opacity=\"0.3\"/></svg>"),
-    };
-}
diff --git a/NET10/ShellUI.Preview/Pages/NotFound.razor b/NET10/ShellUI.Preview/Pages/NotFound.razor
deleted file mode 100644
index 917ada1..0000000
--- a/NET10/ShellUI.Preview/Pages/NotFound.razor
+++ /dev/null
@@ -1,5 +0,0 @@
-@page "/not-found"
-@layout MainLayout
-
-<h3>Not Found</h3>
-<p>Sorry, the content you are looking for does not exist.</p>
\ No newline at end of file
diff --git a/NET10/ShellUI.Preview/Program.cs b/NET10/ShellUI.Preview/Program.cs
deleted file mode 100644
index 16b0e85..0000000
--- a/NET10/ShellUI.Preview/Program.cs
+++ /dev/null
@@ -1,11 +0,0 @@
-using Microsoft.AspNetCore.Components.Web;
-using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
-using ShellUI.Preview;
-
-var builder = WebAssemblyHostBuilder.CreateDefault(args);
-builder.RootComponents.Add<App>("#app");
-builder.RootComponents.Add<HeadOutlet>("head::after");
-
-builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
-
-await builder.Build().RunAsync();
diff --git a/NET10/ShellUI.Preview/Properties/launchSettings.json b/NET10/ShellUI.Preview/Properties/launchSettings.json
deleted file mode 100644
index 730f848..0000000
--- a/NET10/ShellUI.Preview/Properties/launchSettings.json
+++ /dev/null
@@ -1,25 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/launchsettings.json",
-  "profiles": {
-    "http": {
-      "commandName": "Project",
-      "dotnetRunMessages": true,
-      "launchBrowser": true,
-      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
-      "applicationUrl": "http://localhost:5222",
-      "environmentVariables": {
-        "ASPNETCORE_ENVIRONMENT": "Development"
-      }
-    },
-    "https": {
-      "commandName": "Project",
-      "dotnetRunMessages": true,
-      "launchBrowser": true,
-      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
-      "applicationUrl": "https://localhost:7208;http://localhost:5222",
-      "environmentVariables": {
-        "ASPNETCORE_ENVIRONMENT": "Development"
-      }
-    }
-  }
-}
diff --git a/NET10/ShellUI.Preview/ShellUI.Preview.csproj b/NET10/ShellUI.Preview/ShellUI.Preview.csproj
deleted file mode 100644
index 073b212..0000000
--- a/NET10/ShellUI.Preview/ShellUI.Preview.csproj
+++ /dev/null
@@ -1,20 +0,0 @@
-<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
-
-  <PropertyGroup>
-    <TargetFramework>net10.0</TargetFramework>
-    <Nullable>enable</Nullable>
-    <ImplicitUsings>enable</ImplicitUsings>
-    <OverrideHtmlAssetPlaceholders>true</OverrideHtmlAssetPlaceholders>
-    <RootNamespace>ShellUI.Preview</RootNamespace>
-  </PropertyGroup>
-
-  <ItemGroup>
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="10.0.0" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="10.0.0" PrivateAssets="all" />
-  </ItemGroup>
-
-  <ItemGroup>
-    <ProjectReference Include="..\..\src\ShellUI.Components\ShellUI.Components.csproj" />
-  </ItemGroup>
-
-</Project>
diff --git a/NET10/ShellUI.Preview/_Imports.razor b/NET10/ShellUI.Preview/_Imports.razor
deleted file mode 100644
index 9777ed8..0000000
--- a/NET10/ShellUI.Preview/_Imports.razor
+++ /dev/null
@@ -1,13 +0,0 @@
-@using System.Net.Http
-@using System.Net.Http.Json
-@using Microsoft.AspNetCore.Components.Forms
-@using Microsoft.AspNetCore.Components.Routing
-@using Microsoft.AspNetCore.Components.Web
-@using Microsoft.AspNetCore.Components.Web.Virtualization
-@using Microsoft.AspNetCore.Components.WebAssembly.Http
-@using Microsoft.JSInterop
-@using ShellUI.Preview
-@using ShellUI.Preview.Pages
-@using ShellUI.Preview.Layout
-@using ShellUI.Preview.Components
-@using ShellUI.Components
diff --git a/NET10/ShellUI.Preview/tailwind.config.js b/NET10/ShellUI.Preview/tailwind.config.js
deleted file mode 100644
index e3e016d..0000000
--- a/NET10/ShellUI.Preview/tailwind.config.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: [
-    './Components/**/*.{razor,html,cshtml}',
-    './Pages/**/*.{razor,html,cshtml}',
-  ],
-  darkMode: 'class',
-}
diff --git a/NET10/ShellUI.Preview/wwwroot/css/app.css b/NET10/ShellUI.Preview/wwwroot/css/app.css
deleted file mode 100644
index 7bb7dde..0000000
--- a/NET10/ShellUI.Preview/wwwroot/css/app.css
+++ /dev/null
@@ -1,2721 +0,0 @@
-/*! tailwindcss v4.1.0 | MIT License | https://tailwindcss.com */
-@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
-  @layer base {
-    *, ::before, ::after, ::backdrop {
-      --tw-translate-x: 0;
-      --tw-translate-y: 0;
-      --tw-translate-z: 0;
-      --tw-rotate-x: rotateX(0);
-      --tw-rotate-y: rotateY(0);
-      --tw-rotate-z: rotateZ(0);
-      --tw-skew-x: skewX(0);
-      --tw-skew-y: skewY(0);
-      --tw-space-y-reverse: 0;
-      --tw-space-x-reverse: 0;
-      --tw-border-style: solid;
-      --tw-gradient-position: initial;
-      --tw-gradient-from: #0000;
-      --tw-gradient-via: #0000;
-      --tw-gradient-to: #0000;
-      --tw-gradient-stops: initial;
-      --tw-gradient-via-stops: initial;
-      --tw-gradient-from-position: 0%;
-      --tw-gradient-via-position: 50%;
-      --tw-gradient-to-position: 100%;
-      --tw-leading: initial;
-      --tw-font-weight: initial;
-      --tw-tracking: initial;
-      --tw-shadow: 0 0 #0000;
-      --tw-shadow-color: initial;
-      --tw-shadow-alpha: 100%;
-      --tw-inset-shadow: 0 0 #0000;
-      --tw-inset-shadow-color: initial;
-      --tw-inset-shadow-alpha: 100%;
-      --tw-ring-color: initial;
-      --tw-ring-shadow: 0 0 #0000;
-      --tw-inset-ring-color: initial;
-      --tw-inset-ring-shadow: 0 0 #0000;
-      --tw-ring-inset: initial;
-      --tw-ring-offset-width: 0px;
-      --tw-ring-offset-color: #fff;
-      --tw-ring-offset-shadow: 0 0 #0000;
-      --tw-outline-style: solid;
-      --tw-blur: initial;
-      --tw-brightness: initial;
-      --tw-contrast: initial;
-      --tw-grayscale: initial;
-      --tw-hue-rotate: initial;
-      --tw-invert: initial;
-      --tw-opacity: initial;
-      --tw-saturate: initial;
-      --tw-sepia: initial;
-      --tw-drop-shadow: initial;
-      --tw-drop-shadow-color: initial;
-      --tw-drop-shadow-alpha: 100%;
-      --tw-drop-shadow-size: initial;
-      --tw-backdrop-blur: initial;
-      --tw-backdrop-brightness: initial;
-      --tw-backdrop-contrast: initial;
-      --tw-backdrop-grayscale: initial;
-      --tw-backdrop-hue-rotate: initial;
-      --tw-backdrop-invert: initial;
-      --tw-backdrop-opacity: initial;
-      --tw-backdrop-saturate: initial;
-      --tw-backdrop-sepia: initial;
-      --tw-duration: initial;
-      --tw-ease: initial;
-    }
-  }
-}
-@layer theme, base, components, utilities;
-@layer theme {
-  :root, :host {
-    --font-sans: var(--font-sans);
-    --font-serif: var(--font-serif);
-    --font-mono: var(--font-mono);
-    --color-yellow-400: oklch(85.2% 0.199 91.936);
-    --color-yellow-500: oklch(79.5% 0.184 86.047);
-    --color-yellow-600: oklch(68.1% 0.162 75.834);
-    --color-yellow-700: oklch(55.4% 0.135 66.442);
-    --color-green-50: oklch(98.2% 0.018 155.826);
-    --color-green-100: oklch(96.2% 0.044 156.743);
-    --color-green-400: oklch(79.2% 0.209 151.711);
-    --color-green-500: oklch(72.3% 0.219 149.579);
-    --color-green-600: oklch(62.7% 0.194 149.214);
-    --color-green-700: oklch(52.7% 0.154 150.069);
-    --color-green-900: oklch(39.3% 0.095 152.535);
-    --color-blue-400: oklch(70.7% 0.165 254.624);
-    --color-blue-500: oklch(62.3% 0.214 259.815);
-    --color-blue-600: oklch(54.6% 0.245 262.881);
-    --color-blue-700: oklch(48.8% 0.243 264.376);
-    --color-gray-400: oklch(70.7% 0.022 261.325);
-    --color-gray-800: oklch(27.8% 0.033 256.848);
-    --color-black: #000;
-    --color-white: #fff;
-    --spacing: 0.25rem;
-    --container-xs: 20rem;
-    --container-sm: 24rem;
-    --container-md: 28rem;
-    --container-lg: 32rem;
-    --container-4xl: 56rem;
-    --text-xs: 0.75rem;
-    --text-xs--line-height: calc(1 / 0.75);
-    --text-sm: 0.875rem;
-    --text-sm--line-height: calc(1.25 / 0.875);
-    --text-base: 1rem;
-    --text-base--line-height: calc(1.5 / 1);
-    --text-lg: 1.125rem;
-    --text-lg--line-height: calc(1.75 / 1.125);
-    --text-xl: 1.25rem;
-    --text-xl--line-height: calc(1.75 / 1.25);
-    --text-2xl: 1.5rem;
-    --text-2xl--line-height: calc(2 / 1.5);
-    --text-3xl: 1.875rem;
-    --text-3xl--line-height: calc(2.25 / 1.875);
-    --text-4xl: 2.25rem;
-    --text-4xl--line-height: calc(2.5 / 2.25);
-    --text-5xl: 3rem;
-    --text-5xl--line-height: 1;
-    --font-weight-normal: 400;
-    --font-weight-medium: 500;
-    --font-weight-semibold: 600;
-    --font-weight-bold: 700;
-    --tracking-tight: -0.025em;
-    --shadow-2xs: var(--shadow-2xs);
-    --shadow-xs: var(--shadow-xs);
-    --shadow-sm: var(--shadow-sm);
-    --shadow-md: var(--shadow-md);
-    --shadow-lg: var(--shadow-lg);
-    --shadow-xl: var(--shadow-xl);
-    --shadow-2xl: var(--shadow-2xl);
-    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
-    --animate-spin: spin 1s linear infinite;
-    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-    --animate-bounce: bounce 1s infinite;
-    --blur-sm: 8px;
-    --blur-md: 12px;
-    --default-transition-duration: 150ms;
-    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    --default-font-family: var(--font-sans);
-    --default-mono-font-family: var(--font-mono);
-    --shadow: var(--shadow);
-  }
-}
-@layer base {
-  *, ::after, ::before, ::backdrop, ::file-selector-button {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    border: 0 solid;
-  }
-  html, :host {
-    line-height: 1.5;
-    -webkit-text-size-adjust: 100%;
-    tab-size: 4;
-    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
-    font-feature-settings: var(--default-font-feature-settings, normal);
-    font-variation-settings: var(--default-font-variation-settings, normal);
-    -webkit-tap-highlight-color: transparent;
-  }
-  hr {
-    height: 0;
-    color: inherit;
-    border-top-width: 1px;
-  }
-  abbr:where([title]) {
-    -webkit-text-decoration: underline dotted;
-    text-decoration: underline dotted;
-  }
-  h1, h2, h3, h4, h5, h6 {
-    font-size: inherit;
-    font-weight: inherit;
-  }
-  a {
-    color: inherit;
-    -webkit-text-decoration: inherit;
-    text-decoration: inherit;
-  }
-  b, strong {
-    font-weight: bolder;
-  }
-  code, kbd, samp, pre {
-    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
-    font-feature-settings: var(--default-mono-font-feature-settings, normal);
-    font-variation-settings: var(--default-mono-font-variation-settings, normal);
-    font-size: 1em;
-  }
-  small {
-    font-size: 80%;
-  }
-  sub, sup {
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
-  }
-  sub {
-    bottom: -0.25em;
-  }
-  sup {
-    top: -0.5em;
-  }
-  table {
-    text-indent: 0;
-    border-color: inherit;
-    border-collapse: collapse;
-  }
-  :-moz-focusring {
-    outline: auto;
-  }
-  progress {
-    vertical-align: baseline;
-  }
-  summary {
-    display: list-item;
-  }
-  ol, ul, menu {
-    list-style: none;
-  }
-  img, svg, video, canvas, audio, iframe, embed, object {
-    display: block;
-    vertical-align: middle;
-  }
-  img, video {
-    max-width: 100%;
-    height: auto;
-  }
-  button, input, select, optgroup, textarea, ::file-selector-button {
-    font: inherit;
-    font-feature-settings: inherit;
-    font-variation-settings: inherit;
-    letter-spacing: inherit;
-    color: inherit;
-    border-radius: 0;
-    background-color: transparent;
-    opacity: 1;
-  }
-  :where(select:is([multiple], [size])) optgroup {
-    font-weight: bolder;
-  }
-  :where(select:is([multiple], [size])) optgroup option {
-    padding-inline-start: 20px;
-  }
-  ::file-selector-button {
-    margin-inline-end: 4px;
-  }
-  ::placeholder {
-    opacity: 1;
-  }
-  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
-    ::placeholder {
-      color: color-mix(in oklab, currentColor 50%, transparent);
-    }
-  }
-  textarea {
-    resize: vertical;
-  }
-  ::-webkit-search-decoration {
-    -webkit-appearance: none;
-  }
-  ::-webkit-date-and-time-value {
-    min-height: 1lh;
-    text-align: inherit;
-  }
-  ::-webkit-datetime-edit {
-    display: inline-flex;
-  }
-  ::-webkit-datetime-edit-fields-wrapper {
-    padding: 0;
-  }
-  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
-    padding-block: 0;
-  }
-  :-moz-ui-invalid {
-    box-shadow: none;
-  }
-  button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button {
-    appearance: button;
-  }
-  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
-    height: auto;
-  }
-  [hidden]:where(:not([hidden='until-found'])) {
-    display: none !important;
-  }
-}
-@layer utilities {
-  .pointer-events-auto {
-    pointer-events: auto;
-  }
-  .pointer-events-none {
-    pointer-events: none;
-  }
-  .sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border-width: 0;
-  }
-  .absolute {
-    position: absolute;
-  }
-  .fixed {
-    position: fixed;
-  }
-  .relative {
-    position: relative;
-  }
-  .static {
-    position: static;
-  }
-  .sticky {
-    position: sticky;
-  }
-  .inset-0 {
-    inset: calc(var(--spacing) * 0);
-  }
-  .inset-x-0 {
-    inset-inline: calc(var(--spacing) * 0);
-  }
-  .inset-y-0 {
-    inset-block: calc(var(--spacing) * 0);
-  }
-  .top-0 {
-    top: calc(var(--spacing) * 0);
-  }
-  .top-1\/2 {
-    top: calc(1/2 * 100%);
-  }
-  .top-2 {
-    top: calc(var(--spacing) * 2);
-  }
-  .top-4 {
-    top: calc(var(--spacing) * 4);
-  }
-  .top-5 {
-    top: calc(var(--spacing) * 5);
-  }
-  .top-8 {
-    top: calc(var(--spacing) * 8);
-  }
-  .top-\[1px\] {
-    top: 1px;
-  }
-  .top-\[50\%\] {
-    top: 50%;
-  }
-  .top-full {
-    top: 100%;
-  }
-  .right-0 {
-    right: calc(var(--spacing) * 0);
-  }
-  .right-1 {
-    right: calc(var(--spacing) * 1);
-  }
-  .right-2 {
-    right: calc(var(--spacing) * 2);
-  }
-  .right-4 {
-    right: calc(var(--spacing) * 4);
-  }
-  .right-full {
-    right: 100%;
-  }
-  .bottom-0 {
-    bottom: calc(var(--spacing) * 0);
-  }
-  .bottom-4 {
-    bottom: calc(var(--spacing) * 4);
-  }
-  .bottom-full {
-    bottom: 100%;
-  }
-  .left-0 {
-    left: calc(var(--spacing) * 0);
-  }
-  .left-1\/2 {
-    left: calc(1/2 * 100%);
-  }
-  .left-2 {
-    left: calc(var(--spacing) * 2);
-  }
-  .left-4 {
-    left: calc(var(--spacing) * 4);
-  }
-  .left-\[50\%\] {
-    left: 50%;
-  }
-  .left-full {
-    left: 100%;
-  }
-  .z-10 {
-    z-index: 10;
-  }
-  .z-40 {
-    z-index: 40;
-  }
-  .z-50 {
-    z-index: 50;
-  }
-  .container {
-    width: 100%;
-    @media (width >= 40rem) {
-      max-width: 40rem;
-    }
-    @media (width >= 48rem) {
-      max-width: 48rem;
-    }
-    @media (width >= 64rem) {
-      max-width: 64rem;
-    }
-    @media (width >= 80rem) {
-      max-width: 80rem;
-    }
-    @media (width >= 96rem) {
-      max-width: 96rem;
-    }
-  }
-  .mx-auto {
-    margin-inline: auto;
-  }
-  .my-1 {
-    margin-block: calc(var(--spacing) * 1);
-  }
-  .my-4 {
-    margin-block: calc(var(--spacing) * 4);
-  }
-  .mt-1 {
-    margin-top: calc(var(--spacing) * 1);
-  }
-  .mt-2 {
-    margin-top: calc(var(--spacing) * 2);
-  }
-  .mt-4 {
-    margin-top: calc(var(--spacing) * 4);
-  }
-  .mt-6 {
-    margin-top: calc(var(--spacing) * 6);
-  }
-  .mt-8 {
-    margin-top: calc(var(--spacing) * 8);
-  }
-  .mt-12 {
-    margin-top: calc(var(--spacing) * 12);
-  }
-  .mt-24 {
-    margin-top: calc(var(--spacing) * 24);
-  }
-  .mt-auto {
-    margin-top: auto;
-  }
-  .mr-2 {
-    margin-right: calc(var(--spacing) * 2);
-  }
-  .mr-3 {
-    margin-right: calc(var(--spacing) * 3);
-  }
-  .mb-1 {
-    margin-bottom: calc(var(--spacing) * 1);
-  }
-  .mb-2 {
-    margin-bottom: calc(var(--spacing) * 2);
-  }
-  .mb-3 {
-    margin-bottom: calc(var(--spacing) * 3);
-  }
-  .mb-4 {
-    margin-bottom: calc(var(--spacing) * 4);
-  }
-  .mb-6 {
-    margin-bottom: calc(var(--spacing) * 6);
-  }
-  .mb-8 {
-    margin-bottom: calc(var(--spacing) * 8);
-  }
-  .mb-24 {
-    margin-bottom: calc(var(--spacing) * 24);
-  }
-  .-ml-1 {
-    margin-left: calc(var(--spacing) * -1);
-  }
-  .ml-1 {
-    margin-left: calc(var(--spacing) * 1);
-  }
-  .ml-2 {
-    margin-left: calc(var(--spacing) * 2);
-  }
-  .ml-3 {
-    margin-left: calc(var(--spacing) * 3);
-  }
-  .ml-64 {
-    margin-left: calc(var(--spacing) * 64);
-  }
-  .ml-auto {
-    margin-left: auto;
-  }
-  .block {
-    display: block;
-  }
-  .flex {
-    display: flex;
-  }
-  .grid {
-    display: grid;
-  }
-  .hidden {
-    display: none;
-  }
-  .inline-block {
-    display: inline-block;
-  }
-  .inline-flex {
-    display: inline-flex;
-  }
-  .table {
-    display: table;
-  }
-  .table-cell {
-    display: table-cell;
-  }
-  .table-row {
-    display: table-row;
-  }
-  .aspect-square {
-    aspect-ratio: 1 / 1;
-  }
-  .h-1\.5 {
-    height: calc(var(--spacing) * 1.5);
-  }
-  .h-1\/2 {
-    height: calc(1/2 * 100%);
-  }
-  .h-2 {
-    height: calc(var(--spacing) * 2);
-  }
-  .h-2\.5 {
-    height: calc(var(--spacing) * 2.5);
-  }
-  .h-3 {
-    height: calc(var(--spacing) * 3);
-  }
-  .h-3\.5 {
-    height: calc(var(--spacing) * 3.5);
-  }
-  .h-4 {
-    height: calc(var(--spacing) * 4);
-  }
-  .h-5 {
-    height: calc(var(--spacing) * 5);
-  }
-  .h-6 {
-    height: calc(var(--spacing) * 6);
-  }
-  .h-7 {
-    height: calc(var(--spacing) * 7);
-  }
-  .h-8 {
-    height: calc(var(--spacing) * 8);
-  }
-  .h-9 {
-    height: calc(var(--spacing) * 9);
-  }
-  .h-10 {
-    height: calc(var(--spacing) * 10);
-  }
-  .h-11 {
-    height: calc(var(--spacing) * 11);
-  }
-  .h-12 {
-    height: calc(var(--spacing) * 12);
-  }
-  .h-14 {
-    height: calc(var(--spacing) * 14);
-  }
-  .h-16 {
-    height: calc(var(--spacing) * 16);
-  }
-  .h-20 {
-    height: calc(var(--spacing) * 20);
-  }
-  .h-24 {
-    height: calc(var(--spacing) * 24);
-  }
-  .h-32 {
-    height: calc(var(--spacing) * 32);
-  }
-  .h-64 {
-    height: calc(var(--spacing) * 64);
-  }
-  .h-96 {
-    height: calc(var(--spacing) * 96);
-  }
-  .h-\[1px\] {
-    height: 1px;
-  }
-  .h-auto {
-    height: auto;
-  }
-  .h-full {
-    height: 100%;
-  }
-  .h-px {
-    height: 1px;
-  }
-  .h-screen {
-    height: 100vh;
-  }
-  .max-h-60 {
-    max-height: calc(var(--spacing) * 60);
-  }
-  .max-h-\[300px\] {
-    max-height: 300px;
-  }
-  .max-h-screen {
-    max-height: 100vh;
-  }
-  .min-h-\[80px\] {
-    min-height: 80px;
-  }
-  .min-h-screen {
-    min-height: 100vh;
-  }
-  .w-1 {
-    width: calc(var(--spacing) * 1);
-  }
-  .w-1\.5 {
-    width: calc(var(--spacing) * 1.5);
-  }
-  .w-1\/2 {
-    width: calc(1/2 * 100%);
-  }
-  .w-2 {
-    width: calc(var(--spacing) * 2);
-  }
-  .w-2\.5 {
-    width: calc(var(--spacing) * 2.5);
-  }
-  .w-2\/3 {
-    width: calc(2/3 * 100%);
-  }
-  .w-3 {
-    width: calc(var(--spacing) * 3);
-  }
-  .w-3\.5 {
-    width: calc(var(--spacing) * 3.5);
-  }
-  .w-3\/4 {
-    width: calc(3/4 * 100%);
-  }
-  .w-4 {
-    width: calc(var(--spacing) * 4);
-  }
-  .w-5 {
-    width: calc(var(--spacing) * 5);
-  }
-  .w-6 {
-    width: calc(var(--spacing) * 6);
-  }
-  .w-7 {
-    width: calc(var(--spacing) * 7);
-  }
-  .w-8 {
-    width: calc(var(--spacing) * 8);
-  }
-  .w-9 {
-    width: calc(var(--spacing) * 9);
-  }
-  .w-10 {
-    width: calc(var(--spacing) * 10);
-  }
-  .w-11 {
-    width: calc(var(--spacing) * 11);
-  }
-  .w-12 {
-    width: calc(var(--spacing) * 12);
-  }
-  .w-16 {
-    width: calc(var(--spacing) * 16);
-  }
-  .w-20 {
-    width: calc(var(--spacing) * 20);
-  }
-  .w-24 {
-    width: calc(var(--spacing) * 24);
-  }
-  .w-56 {
-    width: calc(var(--spacing) * 56);
-  }
-  .w-64 {
-    width: calc(var(--spacing) * 64);
-  }
-  .w-72 {
-    width: calc(var(--spacing) * 72);
-  }
-  .w-80 {
-    width: calc(var(--spacing) * 80);
-  }
-  .w-\[1px\] {
-    width: 1px;
-  }
-  .w-\[70px\] {
-    width: 70px;
-  }
-  .w-\[100px\] {
-    width: 100px;
-  }
-  .w-full {
-    width: 100%;
-  }
-  .w-max {
-    width: max-content;
-  }
-  .max-w-4xl {
-    max-width: var(--container-4xl);
-  }
-  .max-w-lg {
-    max-width: var(--container-lg);
-  }
-  .max-w-max {
-    max-width: max-content;
-  }
-  .max-w-md {
-    max-width: var(--container-md);
-  }
-  .max-w-sm {
-    max-width: var(--container-sm);
-  }
-  .max-w-xs {
-    max-width: var(--container-xs);
-  }
-  .min-w-0 {
-    min-width: calc(var(--spacing) * 0);
-  }
-  .min-w-\[8rem\] {
-    min-width: 8rem;
-  }
-  .min-w-\[640px\] {
-    min-width: 640px;
-  }
-  .flex-1 {
-    flex: 1;
-  }
-  .flex-shrink-0 {
-    flex-shrink: 0;
-  }
-  .shrink-0 {
-    flex-shrink: 0;
-  }
-  .caption-bottom {
-    caption-side: bottom;
-  }
-  .origin-top-right {
-    transform-origin: top right;
-  }
-  .-translate-x-1\/2 {
-    --tw-translate-x: calc(calc(1/2 * 100%) * -1);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
-  .-translate-x-full {
-    --tw-translate-x: -100%;
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
-  .translate-x-0 {
-    --tw-translate-x: calc(var(--spacing) * 0);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
-  .translate-x-5 {
-    --tw-translate-x: calc(var(--spacing) * 5);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
-  .translate-x-\[-50\%\] {
-    --tw-translate-x: -50%;
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
-  .-translate-y-1\/2 {
-    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
-  .translate-y-\[-50\%\] {
-    --tw-translate-y: -50%;
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
-  .scale-\[1\.02\] {
-    scale: 1.02;
-  }
-  .rotate-180 {
-    rotate: 180deg;
-  }
-  .transform {
-    transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
-  }
-  .animate-bounce {
-    animation: var(--animate-bounce);
-  }
-  .animate-pulse {
-    animation: var(--animate-pulse);
-  }
-  .animate-spin {
-    animation: var(--animate-spin);
-  }
-  .cursor-default {
-    cursor: default;
-  }
-  .cursor-not-allowed {
-    cursor: not-allowed;
-  }
-  .cursor-pointer {
-    cursor: pointer;
-  }
-  .touch-none {
-    touch-action: none;
-  }
-  .list-none {
-    list-style-type: none;
-  }
-  .appearance-none {
-    appearance: none;
-  }
-  .grid-cols-2 {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-  .grid-cols-3 {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-  .grid-cols-7 {
-    grid-template-columns: repeat(7, minmax(0, 1fr));
-  }
-  .flex-col {
-    flex-direction: column;
-  }
-  .flex-col-reverse {
-    flex-direction: column-reverse;
-  }
-  .flex-row {
-    flex-direction: row;
-  }
-  .flex-wrap {
-    flex-wrap: wrap;
-  }
-  .items-center {
-    align-items: center;
-  }
-  .items-end {
-    align-items: flex-end;
-  }
-  .items-start {
-    align-items: flex-start;
-  }
-  .justify-between {
-    justify-content: space-between;
-  }
-  .justify-center {
-    justify-content: center;
-  }
-  .justify-end {
-    justify-content: flex-end;
-  }
-  .gap-0\.5 {
-    gap: calc(var(--spacing) * 0.5);
-  }
-  .gap-1 {
-    gap: calc(var(--spacing) * 1);
-  }
-  .gap-1\.5 {
-    gap: calc(var(--spacing) * 1.5);
-  }
-  .gap-2 {
-    gap: calc(var(--spacing) * 2);
-  }
-  .gap-3 {
-    gap: calc(var(--spacing) * 3);
-  }
-  .gap-4 {
-    gap: calc(var(--spacing) * 4);
-  }
-  .gap-6 {
-    gap: calc(var(--spacing) * 6);
-  }
-  .gap-8 {
-    gap: calc(var(--spacing) * 8);
-  }
-  .space-y-1\.5 {
-    :where(& > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
-    }
-  }
-  .space-y-2 {
-    :where(& > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
-    }
-  }
-  .space-y-3 {
-    :where(& > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
-    }
-  }
-  .space-y-4 {
-    :where(& > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
-    }
-  }
-  .space-y-6 {
-    :where(& > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
-    }
-  }
-  .space-y-8 {
-    :where(& > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
-    }
-  }
-  .space-x-1 {
-    :where(& > :not(:last-child)) {
-      --tw-space-x-reverse: 0;
-      margin-inline-start: calc(calc(var(--spacing) * 1) * var(--tw-space-x-reverse));
-      margin-inline-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-x-reverse)));
-    }
-  }
-  .space-x-2 {
-    :where(& > :not(:last-child)) {
-      --tw-space-x-reverse: 0;
-      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
-      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
-    }
-  }
-  .space-x-4 {
-    :where(& > :not(:last-child)) {
-      --tw-space-x-reverse: 0;
-      margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
-      margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
-    }
-  }
-  .space-x-6 {
-    :where(& > :not(:last-child)) {
-      --tw-space-x-reverse: 0;
-      margin-inline-start: calc(calc(var(--spacing) * 6) * var(--tw-space-x-reverse));
-      margin-inline-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-x-reverse)));
-    }
-  }
-  .truncate {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .overflow-auto {
-    overflow: auto;
-  }
-  .overflow-hidden {
-    overflow: hidden;
-  }
-  .overflow-x-auto {
-    overflow-x: auto;
-  }
-  .overflow-y-auto {
-    overflow-y: auto;
-  }
-  .rounded {
-    border-radius: 0.25rem;
-  }
-  .rounded-full {
-    border-radius: calc(infinity * 1px);
-  }
-  .rounded-lg {
-    border-radius: var(--radius);
-  }
-  .rounded-md {
-    border-radius: calc(var(--radius) - 2px);
-  }
-  .rounded-sm {
-    border-radius: calc(var(--radius) - 4px);
-  }
-  .rounded-t-\[10px\] {
-    border-top-left-radius: 10px;
-    border-top-right-radius: 10px;
-  }
-  .rounded-b-\[10px\] {
-    border-bottom-right-radius: 10px;
-    border-bottom-left-radius: 10px;
-  }
-  .border {
-    border-style: var(--tw-border-style);
-    border-width: 1px;
-  }
-  .border-2 {
-    border-style: var(--tw-border-style);
-    border-width: 2px;
-  }
-  .border-4 {
-    border-style: var(--tw-border-style);
-    border-width: 4px;
-  }
-  .border-t {
-    border-top-style: var(--tw-border-style);
-    border-top-width: 1px;
-  }
-  .border-r {
-    border-right-style: var(--tw-border-style);
-    border-right-width: 1px;
-  }
-  .border-b {
-    border-bottom-style: var(--tw-border-style);
-    border-bottom-width: 1px;
-  }
-  .border-l {
-    border-left-style: var(--tw-border-style);
-    border-left-width: 1px;
-  }
-  .border-dashed {
-    --tw-border-style: dashed;
-    border-style: dashed;
-  }
-  .border-blue-500\/50 {
-    border-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-blue-500) 50%, transparent);
-    }
-  }
-  .border-border {
-    border-color: var(--border);
-  }
-  .border-destructive {
-    border-color: var(--destructive);
-  }
-  .border-destructive\/50 {
-    border-color: color-mix(in oklab, var(--destructive) 50%, transparent);
-  }
-  .border-green-500 {
-    border-color: var(--color-green-500);
-  }
-  .border-green-500\/50 {
-    border-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-green-500) 50%, transparent);
-    }
-  }
-  .border-input {
-    border-color: var(--input);
-  }
-  .border-muted {
-    border-color: var(--muted);
-  }
-  .border-primary {
-    border-color: var(--primary);
-  }
-  .border-primary\/20 {
-    border-color: color-mix(in oklab, var(--primary) 20%, transparent);
-  }
-  .border-ring {
-    border-color: var(--ring);
-  }
-  .border-transparent {
-    border-color: transparent;
-  }
-  .border-yellow-500\/50 {
-    border-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-yellow-500) 50%, transparent);
-    }
-  }
-  .border-t-primary {
-    border-top-color: var(--primary);
-  }
-  .border-r-primary\/50 {
-    border-right-color: color-mix(in oklab, var(--primary) 50%, transparent);
-  }
-  .bg-accent {
-    background-color: var(--accent);
-  }
-  .bg-accent\/30 {
-    background-color: color-mix(in oklab, var(--accent) 30%, transparent);
-  }
-  .bg-background {
-    background-color: var(--background);
-  }
-  .bg-background\/80 {
-    background-color: color-mix(in oklab, var(--background) 80%, transparent);
-  }
-  .bg-background\/95 {
-    background-color: color-mix(in oklab, var(--background) 95%, transparent);
-  }
-  .bg-black\/50 {
-    background-color: color-mix(in srgb, #000 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
-    }
-  }
-  .bg-black\/80 {
-    background-color: color-mix(in srgb, #000 80%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
-    }
-  }
-  .bg-blue-500 {
-    background-color: var(--color-blue-500);
-  }
-  .bg-border {
-    background-color: var(--border);
-  }
-  .bg-card {
-    background-color: var(--card);
-  }
-  .bg-destructive {
-    background-color: var(--destructive);
-  }
-  .bg-green-50 {
-    background-color: var(--color-green-50);
-  }
-  .bg-green-500 {
-    background-color: var(--color-green-500);
-  }
-  .bg-input {
-    background-color: var(--input);
-  }
-  .bg-muted {
-    background-color: var(--muted);
-  }
-  .bg-muted\/30 {
-    background-color: color-mix(in oklab, var(--muted) 30%, transparent);
-  }
-  .bg-muted\/50 {
-    background-color: color-mix(in oklab, var(--muted) 50%, transparent);
-  }
-  .bg-popover {
-    background-color: var(--popover);
-  }
-  .bg-primary {
-    background-color: var(--primary);
-  }
-  .bg-primary\/10 {
-    background-color: color-mix(in oklab, var(--primary) 10%, transparent);
-  }
-  .bg-primary\/20 {
-    background-color: color-mix(in oklab, var(--primary) 20%, transparent);
-  }
-  .bg-secondary {
-    background-color: var(--secondary);
-  }
-  .bg-transparent {
-    background-color: transparent;
-  }
-  .bg-yellow-500 {
-    background-color: var(--color-yellow-500);
-  }
-  .bg-gradient-to-br {
-    --tw-gradient-position: to bottom right in oklab;
-    background-image: linear-gradient(var(--tw-gradient-stops));
-  }
-  .from-white {
-    --tw-gradient-from: var(--color-white);
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
-  .to-gray-400 {
-    --tw-gradient-to: var(--color-gray-400);
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
-  .fill-primary-foreground {
-    fill: var(--primary-foreground);
-  }
-  .object-cover {
-    object-fit: cover;
-  }
-  .p-0 {
-    padding: calc(var(--spacing) * 0);
-  }
-  .p-0\.5 {
-    padding: calc(var(--spacing) * 0.5);
-  }
-  .p-1 {
-    padding: calc(var(--spacing) * 1);
-  }
-  .p-2 {
-    padding: calc(var(--spacing) * 2);
-  }
-  .p-3 {
-    padding: calc(var(--spacing) * 3);
-  }
-  .p-4 {
-    padding: calc(var(--spacing) * 4);
-  }
-  .p-6 {
-    padding: calc(var(--spacing) * 6);
-  }
-  .p-8 {
-    padding: calc(var(--spacing) * 8);
-  }
-  .px-1 {
-    padding-inline: calc(var(--spacing) * 1);
-  }
-  .px-1\.5 {
-    padding-inline: calc(var(--spacing) * 1.5);
-  }
-  .px-2 {
-    padding-inline: calc(var(--spacing) * 2);
-  }
-  .px-2\.5 {
-    padding-inline: calc(var(--spacing) * 2.5);
-  }
-  .px-3 {
-    padding-inline: calc(var(--spacing) * 3);
-  }
-  .px-4 {
-    padding-inline: calc(var(--spacing) * 4);
-  }
-  .px-5 {
-    padding-inline: calc(var(--spacing) * 5);
-  }
-  .px-8 {
-    padding-inline: calc(var(--spacing) * 8);
-  }
-  .py-0\.5 {
-    padding-block: calc(var(--spacing) * 0.5);
-  }
-  .py-1 {
-    padding-block: calc(var(--spacing) * 1);
-  }
-  .py-1\.5 {
-    padding-block: calc(var(--spacing) * 1.5);
-  }
-  .py-2 {
-    padding-block: calc(var(--spacing) * 2);
-  }
-  .py-4 {
-    padding-block: calc(var(--spacing) * 4);
-  }
-  .py-6 {
-    padding-block: calc(var(--spacing) * 6);
-  }
-  .py-12 {
-    padding-block: calc(var(--spacing) * 12);
-  }
-  .pt-0 {
-    padding-top: calc(var(--spacing) * 0);
-  }
-  .pt-2 {
-    padding-top: calc(var(--spacing) * 2);
-  }
-  .pr-2 {
-    padding-right: calc(var(--spacing) * 2);
-  }
-  .pr-2\.5 {
-    padding-right: calc(var(--spacing) * 2.5);
-  }
-  .pr-3 {
-    padding-right: calc(var(--spacing) * 3);
-  }
-  .pr-6 {
-    padding-right: calc(var(--spacing) * 6);
-  }
-  .pr-8 {
-    padding-right: calc(var(--spacing) * 8);
-  }
-  .pb-4 {
-    padding-bottom: calc(var(--spacing) * 4);
-  }
-  .pl-2 {
-    padding-left: calc(var(--spacing) * 2);
-  }
-  .pl-2\.5 {
-    padding-left: calc(var(--spacing) * 2.5);
-  }
-  .pl-4 {
-    padding-left: calc(var(--spacing) * 4);
-  }
-  .text-center {
-    text-align: center;
-  }
-  .text-left {
-    text-align: left;
-  }
-  .align-middle {
-    vertical-align: middle;
-  }
-  .font-mono {
-    font-family: var(--font-mono);
-  }
-  .text-2xl {
-    font-size: var(--text-2xl);
-    line-height: var(--tw-leading, var(--text-2xl--line-height));
-  }
-  .text-5xl {
-    font-size: var(--text-5xl);
-    line-height: var(--tw-leading, var(--text-5xl--line-height));
-  }
-  .text-lg {
-    font-size: var(--text-lg);
-    line-height: var(--tw-leading, var(--text-lg--line-height));
-  }
-  .text-sm {
-    font-size: var(--text-sm);
-    line-height: var(--tw-leading, var(--text-sm--line-height));
-  }
-  .text-xl {
-    font-size: var(--text-xl);
-    line-height: var(--tw-leading, var(--text-xl--line-height));
-  }
-  .text-xs {
-    font-size: var(--text-xs);
-    line-height: var(--tw-leading, var(--text-xs--line-height));
-  }
-  .text-\[10px\] {
-    font-size: 10px;
-  }
-  .leading-none {
-    --tw-leading: 1;
-    line-height: 1;
-  }
-  .font-bold {
-    --tw-font-weight: var(--font-weight-bold);
-    font-weight: var(--font-weight-bold);
-  }
-  .font-medium {
-    --tw-font-weight: var(--font-weight-medium);
-    font-weight: var(--font-weight-medium);
-  }
-  .font-normal {
-    --tw-font-weight: var(--font-weight-normal);
-    font-weight: var(--font-weight-normal);
-  }
-  .font-semibold {
-    --tw-font-weight: var(--font-weight-semibold);
-    font-weight: var(--font-weight-semibold);
-  }
-  .tracking-tight {
-    --tw-tracking: var(--tracking-tight);
-    letter-spacing: var(--tracking-tight);
-  }
-  .break-words {
-    overflow-wrap: break-word;
-  }
-  .whitespace-nowrap {
-    white-space: nowrap;
-  }
-  .text-accent-foreground {
-    color: var(--accent-foreground);
-  }
-  .text-blue-700 {
-    color: var(--color-blue-700);
-  }
-  .text-card-foreground {
-    color: var(--card-foreground);
-  }
-  .text-destructive {
-    color: var(--destructive);
-  }
-  .text-destructive-foreground {
-    color: var(--destructive-foreground);
-  }
-  .text-foreground {
-    color: var(--foreground);
-  }
-  .text-gray-800 {
-    color: var(--color-gray-800);
-  }
-  .text-green-700 {
-    color: var(--color-green-700);
-  }
-  .text-green-900 {
-    color: var(--color-green-900);
-  }
-  .text-muted-foreground {
-    color: var(--muted-foreground);
-  }
-  .text-popover-foreground {
-    color: var(--popover-foreground);
-  }
-  .text-primary {
-    color: var(--primary);
-  }
-  .text-primary-foreground {
-    color: var(--primary-foreground);
-  }
-  .text-secondary-foreground {
-    color: var(--secondary-foreground);
-  }
-  .text-white {
-    color: var(--color-white);
-  }
-  .text-yellow-700 {
-    color: var(--color-yellow-700);
-  }
-  .underline {
-    text-decoration-line: underline;
-  }
-  .underline-offset-4 {
-    text-underline-offset: 4px;
-  }
-  .opacity-0 {
-    opacity: 0%;
-  }
-  .opacity-25 {
-    opacity: 25%;
-  }
-  .opacity-50 {
-    opacity: 50%;
-  }
-  .opacity-70 {
-    opacity: 70%;
-  }
-  .opacity-75 {
-    opacity: 75%;
-  }
-  .opacity-90 {
-    opacity: 90%;
-  }
-  .shadow-lg {
-    --tw-shadow: var(--shadow-lg);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-  .shadow-md {
-    --tw-shadow: var(--shadow-md);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-  .shadow-sm {
-    --tw-shadow: var(--shadow-sm);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-  .shadow-xl {
-    --tw-shadow: var(--shadow-xl);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-  .ring {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-  .ring-0 {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-  .ring-2 {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-  .ring-ring {
-    --tw-ring-color: var(--ring);
-  }
-  .ring-offset-2 {
-    --tw-ring-offset-width: 2px;
-    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  }
-  .ring-offset-background {
-    --tw-ring-offset-color: var(--background);
-  }
-  .outline {
-    outline-style: var(--tw-outline-style);
-    outline-width: 1px;
-  }
-  .blur {
-    --tw-blur: blur(8px);
-    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
-  }
-  .filter {
-    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
-  }
-  .backdrop-blur {
-    --tw-backdrop-blur: blur(8px);
-    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
-    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
-  }
-  .backdrop-blur-md {
-    --tw-backdrop-blur: blur(var(--blur-md));
-    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
-    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
-  }
-  .backdrop-blur-sm {
-    --tw-backdrop-blur: blur(var(--blur-sm));
-    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
-    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
-  }
-  .transition {
-    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
-  .transition-all {
-    transition-property: all;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
-  .transition-colors {
-    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
-  .transition-opacity {
-    transition-property: opacity;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
-  .transition-transform {
-    transition-property: transform, translate, scale, rotate;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
-  .duration-200 {
-    --tw-duration: 200ms;
-    transition-duration: 200ms;
-  }
-  .duration-300 {
-    --tw-duration: 300ms;
-    transition-duration: 300ms;
-  }
-  .ease-in-out {
-    --tw-ease: var(--ease-in-out);
-    transition-timing-function: var(--ease-in-out);
-  }
-  .outline-none {
-    --tw-outline-style: none;
-    outline-style: none;
-  }
-  .select-none {
-    -webkit-user-select: none;
-    user-select: none;
-  }
-  .group-hover\:opacity-100 {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        opacity: 100%;
-      }
-    }
-  }
-  .peer-disabled\:cursor-not-allowed {
-    &:is(:where(.peer):disabled ~ *) {
-      cursor: not-allowed;
-    }
-  }
-  .peer-disabled\:opacity-70 {
-    &:is(:where(.peer):disabled ~ *) {
-      opacity: 70%;
-    }
-  }
-  .file\:border-0 {
-    &::file-selector-button {
-      border-style: var(--tw-border-style);
-      border-width: 0px;
-    }
-  }
-  .file\:bg-transparent {
-    &::file-selector-button {
-      background-color: transparent;
-    }
-  }
-  .file\:text-sm {
-    &::file-selector-button {
-      font-size: var(--text-sm);
-      line-height: var(--tw-leading, var(--text-sm--line-height));
-    }
-  }
-  .file\:font-medium {
-    &::file-selector-button {
-      --tw-font-weight: var(--font-weight-medium);
-      font-weight: var(--font-weight-medium);
-    }
-  }
-  .placeholder\:text-muted-foreground {
-    &::placeholder {
-      color: var(--muted-foreground);
-    }
-  }
-  .hover\:border-primary\/50 {
-    &:hover {
-      @media (hover: hover) {
-        border-color: color-mix(in oklab, var(--primary) 50%, transparent);
-      }
-    }
-  }
-  .hover\:bg-accent {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--accent);
-      }
-    }
-  }
-  .hover\:bg-accent\/50 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in oklab, var(--accent) 50%, transparent);
-      }
-    }
-  }
-  .hover\:bg-background\/90 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in oklab, var(--background) 90%, transparent);
-      }
-    }
-  }
-  .hover\:bg-black\/70 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, #000 70%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-black) 70%, transparent);
-        }
-      }
-    }
-  }
-  .hover\:bg-blue-600 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-blue-600);
-      }
-    }
-  }
-  .hover\:bg-destructive\/80 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in oklab, var(--destructive) 80%, transparent);
-      }
-    }
-  }
-  .hover\:bg-destructive\/90 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
-      }
-    }
-  }
-  .hover\:bg-green-600 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-green-600);
-      }
-    }
-  }
-  .hover\:bg-muted {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--muted);
-      }
-    }
-  }
-  .hover\:bg-muted\/50 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in oklab, var(--muted) 50%, transparent);
-      }
-    }
-  }
-  .hover\:bg-primary {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--primary);
-      }
-    }
-  }
-  .hover\:bg-primary\/80 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in oklab, var(--primary) 80%, transparent);
-      }
-    }
-  }
-  .hover\:bg-primary\/90 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in oklab, var(--primary) 90%, transparent);
-      }
-    }
-  }
-  .hover\:bg-secondary\/80 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
-      }
-    }
-  }
-  .hover\:bg-yellow-600 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-yellow-600);
-      }
-    }
-  }
-  .hover\:text-accent-foreground {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--accent-foreground);
-      }
-    }
-  }
-  .hover\:text-destructive {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--destructive);
-      }
-    }
-  }
-  .hover\:text-foreground {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--foreground);
-      }
-    }
-  }
-  .hover\:text-foreground\/80 {
-    &:hover {
-      @media (hover: hover) {
-        color: color-mix(in oklab, var(--foreground) 80%, transparent);
-      }
-    }
-  }
-  .hover\:text-muted-foreground {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--muted-foreground);
-      }
-    }
-  }
-  .hover\:text-primary-foreground {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--primary-foreground);
-      }
-    }
-  }
-  .hover\:underline {
-    &:hover {
-      @media (hover: hover) {
-        text-decoration-line: underline;
-      }
-    }
-  }
-  .hover\:opacity-100 {
-    &:hover {
-      @media (hover: hover) {
-        opacity: 100%;
-      }
-    }
-  }
-  .focus\:border-ring {
-    &:focus {
-      border-color: var(--ring);
-    }
-  }
-  .focus\:bg-accent {
-    &:focus {
-      background-color: var(--accent);
-    }
-  }
-  .focus\:bg-primary {
-    &:focus {
-      background-color: var(--primary);
-    }
-  }
-  .focus\:text-accent-foreground {
-    &:focus {
-      color: var(--accent-foreground);
-    }
-  }
-  .focus\:text-primary-foreground {
-    &:focus {
-      color: var(--primary-foreground);
-    }
-  }
-  .focus\:ring-2 {
-    &:focus {
-      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-  }
-  .focus\:ring-ring {
-    &:focus {
-      --tw-ring-color: var(--ring);
-    }
-  }
-  .focus\:ring-offset-2 {
-    &:focus {
-      --tw-ring-offset-width: 2px;
-      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-    }
-  }
-  .focus\:outline-none {
-    &:focus {
-      --tw-outline-style: none;
-      outline-style: none;
-    }
-  }
-  .focus-visible\:ring-1 {
-    &:focus-visible {
-      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-  }
-  .focus-visible\:ring-2 {
-    &:focus-visible {
-      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-  }
-  .focus-visible\:ring-destructive {
-    &:focus-visible {
-      --tw-ring-color: var(--destructive);
-    }
-  }
-  .focus-visible\:ring-ring {
-    &:focus-visible {
-      --tw-ring-color: var(--ring);
-    }
-  }
-  .focus-visible\:ring-offset-2 {
-    &:focus-visible {
-      --tw-ring-offset-width: 2px;
-      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-    }
-  }
-  .focus-visible\:ring-offset-background {
-    &:focus-visible {
-      --tw-ring-offset-color: var(--background);
-    }
-  }
-  .focus-visible\:outline-none {
-    &:focus-visible {
-      --tw-outline-style: none;
-      outline-style: none;
-    }
-  }
-  .active\:scale-\[0\.98\] {
-    &:active {
-      scale: 0.98;
-    }
-  }
-  .disabled\:pointer-events-none {
-    &:disabled {
-      pointer-events: none;
-    }
-  }
-  .disabled\:cursor-not-allowed {
-    &:disabled {
-      cursor: not-allowed;
-    }
-  }
-  .disabled\:opacity-50 {
-    &:disabled {
-      opacity: 50%;
-    }
-  }
-  .data-\[disabled\]\:pointer-events-none {
-    &[data-disabled] {
-      pointer-events: none;
-    }
-  }
-  .data-\[disabled\]\:opacity-50 {
-    &[data-disabled] {
-      opacity: 50%;
-    }
-  }
-  .data-\[state\=closed\]\:duration-300 {
-    &[data-state="closed"] {
-      --tw-duration: 300ms;
-      transition-duration: 300ms;
-    }
-  }
-  .data-\[state\=open\]\:bg-accent {
-    &[data-state="open"] {
-      background-color: var(--accent);
-    }
-  }
-  .data-\[state\=open\]\:bg-secondary {
-    &[data-state="open"] {
-      background-color: var(--secondary);
-    }
-  }
-  .data-\[state\=open\]\:text-muted-foreground {
-    &[data-state="open"] {
-      color: var(--muted-foreground);
-    }
-  }
-  .data-\[state\=open\]\:duration-500 {
-    &[data-state="open"] {
-      --tw-duration: 500ms;
-      transition-duration: 500ms;
-    }
-  }
-  .data-\[state\=selected\]\:bg-muted {
-    &[data-state="selected"] {
-      background-color: var(--muted);
-    }
-  }
-  .supports-\[backdrop-filter\]\:bg-background\/60 {
-    @supports (backdrop-filter: var(--tw)) {
-      background-color: color-mix(in oklab, var(--background) 60%, transparent);
-    }
-  }
-  .sm\:block {
-    @media (width >= 40rem) {
-      display: block;
-    }
-  }
-  .sm\:inline-flex {
-    @media (width >= 40rem) {
-      display: inline-flex;
-    }
-  }
-  .sm\:w-auto {
-    @media (width >= 40rem) {
-      width: auto;
-    }
-  }
-  .sm\:max-w-sm {
-    @media (width >= 40rem) {
-      max-width: var(--container-sm);
-    }
-  }
-  .sm\:flex-col {
-    @media (width >= 40rem) {
-      flex-direction: column;
-    }
-  }
-  .sm\:flex-row {
-    @media (width >= 40rem) {
-      flex-direction: row;
-    }
-  }
-  .sm\:items-center {
-    @media (width >= 40rem) {
-      align-items: center;
-    }
-  }
-  .sm\:justify-between {
-    @media (width >= 40rem) {
-      justify-content: space-between;
-    }
-  }
-  .sm\:justify-end {
-    @media (width >= 40rem) {
-      justify-content: flex-end;
-    }
-  }
-  .sm\:gap-2\.5 {
-    @media (width >= 40rem) {
-      gap: calc(var(--spacing) * 2.5);
-    }
-  }
-  .sm\:space-x-2 {
-    @media (width >= 40rem) {
-      :where(& > :not(:last-child)) {
-        --tw-space-x-reverse: 0;
-        margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
-        margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
-      }
-    }
-  }
-  .sm\:space-x-6 {
-    @media (width >= 40rem) {
-      :where(& > :not(:last-child)) {
-        --tw-space-x-reverse: 0;
-        margin-inline-start: calc(calc(var(--spacing) * 6) * var(--tw-space-x-reverse));
-        margin-inline-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-x-reverse)));
-      }
-    }
-  }
-  .sm\:rounded-lg {
-    @media (width >= 40rem) {
-      border-radius: var(--radius);
-    }
-  }
-  .sm\:p-6 {
-    @media (width >= 40rem) {
-      padding: calc(var(--spacing) * 6);
-    }
-  }
-  .sm\:text-left {
-    @media (width >= 40rem) {
-      text-align: left;
-    }
-  }
-  .sm\:text-3xl {
-    @media (width >= 40rem) {
-      font-size: var(--text-3xl);
-      line-height: var(--tw-leading, var(--text-3xl--line-height));
-    }
-  }
-  .sm\:text-base {
-    @media (width >= 40rem) {
-      font-size: var(--text-base);
-      line-height: var(--tw-leading, var(--text-base--line-height));
-    }
-  }
-  .sm\:text-xl {
-    @media (width >= 40rem) {
-      font-size: var(--text-xl);
-      line-height: var(--tw-leading, var(--text-xl--line-height));
-    }
-  }
-  .md\:inline-flex {
-    @media (width >= 48rem) {
-      display: inline-flex;
-    }
-  }
-  .md\:max-w-\[420px\] {
-    @media (width >= 48rem) {
-      max-width: 420px;
-    }
-  }
-  .md\:grid-cols-2 {
-    @media (width >= 48rem) {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-  }
-  .md\:p-8 {
-    @media (width >= 48rem) {
-      padding: calc(var(--spacing) * 8);
-    }
-  }
-  .md\:text-4xl {
-    @media (width >= 48rem) {
-      font-size: var(--text-4xl);
-      line-height: var(--tw-leading, var(--text-4xl--line-height));
-    }
-  }
-  .lg\:flex {
-    @media (width >= 64rem) {
-      display: flex;
-    }
-  }
-  .lg\:hidden {
-    @media (width >= 64rem) {
-      display: none;
-    }
-  }
-  .lg\:space-x-8 {
-    @media (width >= 64rem) {
-      :where(& > :not(:last-child)) {
-        --tw-space-x-reverse: 0;
-        margin-inline-start: calc(calc(var(--spacing) * 8) * var(--tw-space-x-reverse));
-        margin-inline-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-x-reverse)));
-      }
-    }
-  }
-  .dark\:border-blue-500 {
-    @media (prefers-color-scheme: dark) {
-      border-color: var(--color-blue-500);
-    }
-  }
-  .dark\:border-destructive {
-    @media (prefers-color-scheme: dark) {
-      border-color: var(--destructive);
-    }
-  }
-  .dark\:border-green-500 {
-    @media (prefers-color-scheme: dark) {
-      border-color: var(--color-green-500);
-    }
-  }
-  .dark\:border-yellow-500 {
-    @media (prefers-color-scheme: dark) {
-      border-color: var(--color-yellow-500);
-    }
-  }
-  .dark\:bg-green-900\/20 {
-    @media (prefers-color-scheme: dark) {
-      background-color: color-mix(in srgb, oklch(39.3% 0.095 152.535) 20%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-green-900) 20%, transparent);
-      }
-    }
-  }
-  .dark\:text-blue-400 {
-    @media (prefers-color-scheme: dark) {
-      color: var(--color-blue-400);
-    }
-  }
-  .dark\:text-green-100 {
-    @media (prefers-color-scheme: dark) {
-      color: var(--color-green-100);
-    }
-  }
-  .dark\:text-green-400 {
-    @media (prefers-color-scheme: dark) {
-      color: var(--color-green-400);
-    }
-  }
-  .dark\:text-yellow-400 {
-    @media (prefers-color-scheme: dark) {
-      color: var(--color-yellow-400);
-    }
-  }
-  .\[\&_tr\]\:border-b {
-    & tr {
-      border-bottom-style: var(--tw-border-style);
-      border-bottom-width: 1px;
-    }
-  }
-  .\[\&_tr\:last-child\]\:border-0 {
-    & tr:last-child {
-      border-style: var(--tw-border-style);
-      border-width: 0px;
-    }
-  }
-  .\[\&\:\:-moz-range-thumb\]\:h-5 {
-    &::-moz-range-thumb {
-      height: calc(var(--spacing) * 5);
-    }
-  }
-  .\[\&\:\:-moz-range-thumb\]\:w-5 {
-    &::-moz-range-thumb {
-      width: calc(var(--spacing) * 5);
-    }
-  }
-  .\[\&\:\:-moz-range-thumb\]\:rounded-full {
-    &::-moz-range-thumb {
-      border-radius: calc(infinity * 1px);
-    }
-  }
-  .\[\&\:\:-moz-range-thumb\]\:bg-primary {
-    &::-moz-range-thumb {
-      background-color: var(--primary);
-    }
-  }
-  .\[\&\:\:-moz-range-thumb\]\:ring-offset-background {
-    &::-moz-range-thumb {
-      --tw-ring-offset-color: var(--background);
-    }
-  }
-  .\[\&\:\:-moz-range-thumb\]\:transition-colors {
-    &::-moz-range-thumb {
-      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
-      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-      transition-duration: var(--tw-duration, var(--default-transition-duration));
-    }
-  }
-  .focus-visible\:\[\&\:\:-moz-range-thumb\]\:ring-2 {
-    &:focus-visible {
-      &::-moz-range-thumb {
-        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
-        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-      }
-    }
-  }
-  .focus-visible\:\[\&\:\:-moz-range-thumb\]\:ring-ring {
-    &:focus-visible {
-      &::-moz-range-thumb {
-        --tw-ring-color: var(--ring);
-      }
-    }
-  }
-  .focus-visible\:\[\&\:\:-moz-range-thumb\]\:ring-offset-2 {
-    &:focus-visible {
-      &::-moz-range-thumb {
-        --tw-ring-offset-width: 2px;
-        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-      }
-    }
-  }
-  .\[\&\:\:-webkit-slider-thumb\]\:h-5 {
-    &::-webkit-slider-thumb {
-      height: calc(var(--spacing) * 5);
-    }
-  }
-  .\[\&\:\:-webkit-slider-thumb\]\:w-5 {
-    &::-webkit-slider-thumb {
-      width: calc(var(--spacing) * 5);
-    }
-  }
-  .\[\&\:\:-webkit-slider-thumb\]\:appearance-none {
-    &::-webkit-slider-thumb {
-      appearance: none;
-    }
-  }
-  .\[\&\:\:-webkit-slider-thumb\]\:rounded-full {
-    &::-webkit-slider-thumb {
-      border-radius: calc(infinity * 1px);
-    }
-  }
-  .\[\&\:\:-webkit-slider-thumb\]\:bg-primary {
-    &::-webkit-slider-thumb {
-      background-color: var(--primary);
-    }
-  }
-  .\[\&\:\:-webkit-slider-thumb\]\:ring-offset-background {
-    &::-webkit-slider-thumb {
-      --tw-ring-offset-color: var(--background);
-    }
-  }
-  .\[\&\:\:-webkit-slider-thumb\]\:transition-colors {
-    &::-webkit-slider-thumb {
-      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
-      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-      transition-duration: var(--tw-duration, var(--default-transition-duration));
-    }
-  }
-  .focus-visible\:\[\&\:\:-webkit-slider-thumb\]\:ring-2 {
-    &:focus-visible {
-      &::-webkit-slider-thumb {
-        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
-        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-      }
-    }
-  }
-  .focus-visible\:\[\&\:\:-webkit-slider-thumb\]\:ring-ring {
-    &:focus-visible {
-      &::-webkit-slider-thumb {
-        --tw-ring-color: var(--ring);
-      }
-    }
-  }
-  .focus-visible\:\[\&\:\:-webkit-slider-thumb\]\:ring-offset-2 {
-    &:focus-visible {
-      &::-webkit-slider-thumb {
-        --tw-ring-offset-width: 2px;
-        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-      }
-    }
-  }
-  .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0 {
-    &:has([role=checkbox]) {
-      padding-right: calc(var(--spacing) * 0);
-    }
-  }
-  .\[\&\>svg\]\:absolute {
-    &>svg {
-      position: absolute;
-    }
-  }
-  .\[\&\>svg\]\:top-4 {
-    &>svg {
-      top: calc(var(--spacing) * 4);
-    }
-  }
-  .\[\&\>svg\]\:left-4 {
-    &>svg {
-      left: calc(var(--spacing) * 4);
-    }
-  }
-  .\[\&\>svg\]\:text-blue-600 {
-    &>svg {
-      color: var(--color-blue-600);
-    }
-  }
-  .\[\&\>svg\]\:text-destructive {
-    &>svg {
-      color: var(--destructive);
-    }
-  }
-  .\[\&\>svg\]\:text-foreground {
-    &>svg {
-      color: var(--foreground);
-    }
-  }
-  .\[\&\>svg\]\:text-green-600 {
-    &>svg {
-      color: var(--color-green-600);
-    }
-  }
-  .\[\&\>svg\]\:text-yellow-600 {
-    &>svg {
-      color: var(--color-yellow-600);
-    }
-  }
-  .\[\&\>svg\+div\]\:translate-y-\[-3px\] {
-    &>svg+div {
-      --tw-translate-y: -3px;
-      translate: var(--tw-translate-x) var(--tw-translate-y);
-    }
-  }
-  .\[\&\>svg\~\*\]\:pl-7 {
-    &>svg~* {
-      padding-left: calc(var(--spacing) * 7);
-    }
-  }
-}
-:root {
-  --background: oklch(0.9900 0 0);
-  --foreground: oklch(0 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0 0 0);
-  --popover: oklch(0.9900 0 0);
-  --popover-foreground: oklch(0 0 0);
-  --primary: oklch(0 0 0);
-  --primary-foreground: oklch(1 0 0);
-  --secondary: oklch(0.9400 0 0);
-  --secondary-foreground: oklch(0 0 0);
-  --muted: oklch(0.9700 0 0);
-  --muted-foreground: oklch(0.4400 0 0);
-  --accent: oklch(0.9400 0 0);
-  --accent-foreground: oklch(0 0 0);
-  --destructive: oklch(0.6300 0.1900 23.0300);
-  --destructive-foreground: oklch(1 0 0);
-  --border: oklch(0.9200 0 0);
-  --input: oklch(0.9400 0 0);
-  --ring: oklch(0 0 0);
-  --chart-1: oklch(0.8100 0.1700 75.3500);
-  --chart-2: oklch(0.5500 0.2200 264.5300);
-  --chart-3: oklch(0.7200 0 0);
-  --chart-4: oklch(0.9200 0 0);
-  --chart-5: oklch(0.5600 0 0);
-  --sidebar: oklch(0.9900 0 0);
-  --sidebar-foreground: oklch(0 0 0);
-  --sidebar-primary: oklch(0 0 0);
-  --sidebar-primary-foreground: oklch(1 0 0);
-  --sidebar-accent: oklch(0.9400 0 0);
-  --sidebar-accent-foreground: oklch(0 0 0);
-  --sidebar-border: oklch(0.9400 0 0);
-  --sidebar-ring: oklch(0 0 0);
-  --font-sans: Geist, sans-serif;
-  --font-serif: Georgia, serif;
-  --font-mono: Geist Mono, monospace;
-  --radius: 0.5rem;
-  --shadow-x: 0px;
-  --shadow-y: 1px;
-  --shadow-blur: 2px;
-  --shadow-spread: 0px;
-  --shadow-opacity: 0.18;
-  --shadow-color: hsl(0 0% 0%);
-  --shadow-2xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);
-  --shadow-xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);
-  --shadow-sm: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);
-  --shadow: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);
-  --shadow-md: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 2px 4px -1px hsl(0 0% 0% / 0.18);
-  --shadow-lg: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 4px 6px -1px hsl(0 0% 0% / 0.18);
-  --shadow-xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 8px 10px -1px hsl(0 0% 0% / 0.18);
-  --shadow-2xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.45);
-  --tracking-normal: 0em;
-  --spacing: 0.25rem;
-}
-.dark {
-  --background: oklch(0 0 0);
-  --foreground: oklch(1 0 0);
-  --card: oklch(0.1400 0 0);
-  --card-foreground: oklch(1 0 0);
-  --popover: oklch(0.1800 0 0);
-  --popover-foreground: oklch(1 0 0);
-  --primary: oklch(1 0 0);
-  --primary-foreground: oklch(0 0 0);
-  --secondary: oklch(0.2500 0 0);
-  --secondary-foreground: oklch(1 0 0);
-  --muted: oklch(0.2300 0 0);
-  --muted-foreground: oklch(0.7200 0 0);
-  --accent: oklch(0.3200 0 0);
-  --accent-foreground: oklch(1 0 0);
-  --destructive: oklch(0.6900 0.2000 23.9100);
-  --destructive-foreground: oklch(0 0 0);
-  --border: oklch(0.2600 0 0);
-  --input: oklch(0.3200 0 0);
-  --ring: oklch(0.7200 0 0);
-  --chart-1: oklch(0.8100 0.1700 75.3500);
-  --chart-2: oklch(0.5800 0.2100 260.8400);
-  --chart-3: oklch(0.5600 0 0);
-  --chart-4: oklch(0.4400 0 0);
-  --chart-5: oklch(0.9200 0 0);
-  --sidebar: oklch(0.1800 0 0);
-  --sidebar-foreground: oklch(1 0 0);
-  --sidebar-primary: oklch(1 0 0);
-  --sidebar-primary-foreground: oklch(0 0 0);
-  --sidebar-accent: oklch(0.3200 0 0);
-  --sidebar-accent-foreground: oklch(1 0 0);
-  --sidebar-border: oklch(0.3200 0 0);
-  --sidebar-ring: oklch(0.7200 0 0);
-  --font-sans: Geist, sans-serif;
-  --font-serif: Georgia, serif;
-  --font-mono: Geist Mono, monospace;
-  --radius: 0.5rem;
-  --shadow-x: 0px;
-  --shadow-y: 1px;
-  --shadow-blur: 2px;
-  --shadow-spread: 0px;
-  --shadow-opacity: 0.18;
-  --shadow-color: hsl(0 0% 0%);
-  --shadow-2xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);
-  --shadow-xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);
-  --shadow-sm: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);
-  --shadow: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);
-  --shadow-md: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 2px 4px -1px hsl(0 0% 0% / 0.18);
-  --shadow-lg: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 4px 6px -1px hsl(0 0% 0% / 0.18);
-  --shadow-xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 8px 10px -1px hsl(0 0% 0% / 0.18);
-  --shadow-2xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.45);
-}
-html, body, :host {
-  font-family: var(--font-sans) !important;
-}
-@keyframes bars {
-  0%, 100% {
-    transform: scaleY(0.4);
-    opacity: 0.7;
-  }
-  50% {
-    transform: scaleY(1);
-    opacity: 1;
-  }
-}
-@keyframes bars-vertical {
-  0%, 100% {
-    transform: scaleY(0.4);
-    opacity: 0.7;
-  }
-  50% {
-    transform: scaleY(1);
-    opacity: 1;
-  }
-}
-@keyframes bars-pulse {
-  0%, 100% {
-    transform: scaleY(0.3);
-    opacity: 0.5;
-  }
-  50% {
-    transform: scaleY(1);
-    opacity: 1;
-  }
-}
-@keyframes orbit {
-  0% {
-    transform: translate(-50%, 0) rotate(0deg) translateX(calc((var(--size, 1rem) - 0.5rem) / 2)) rotate(0deg);
-  }
-  100% {
-    transform: translate(-50%, 0) rotate(360deg) translateX(calc((var(--size, 1rem) - 0.5rem) / 2)) rotate(-360deg);
-  }
-}
-@property --tw-translate-x {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
-@property --tw-translate-y {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
-@property --tw-translate-z {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
-@property --tw-rotate-x {
-  syntax: "*";
-  inherits: false;
-  initial-value: rotateX(0);
-}
-@property --tw-rotate-y {
-  syntax: "*";
-  inherits: false;
-  initial-value: rotateY(0);
-}
-@property --tw-rotate-z {
-  syntax: "*";
-  inherits: false;
-  initial-value: rotateZ(0);
-}
-@property --tw-skew-x {
-  syntax: "*";
-  inherits: false;
-  initial-value: skewX(0);
-}
-@property --tw-skew-y {
-  syntax: "*";
-  inherits: false;
-  initial-value: skewY(0);
-}
-@property --tw-space-y-reverse {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
-@property --tw-space-x-reverse {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
-@property --tw-gradient-position {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-gradient-from {
-  syntax: "<color>";
-  inherits: false;
-  initial-value: #0000;
-}
-@property --tw-gradient-via {
-  syntax: "<color>";
-  inherits: false;
-  initial-value: #0000;
-}
-@property --tw-gradient-to {
-  syntax: "<color>";
-  inherits: false;
-  initial-value: #0000;
-}
-@property --tw-gradient-stops {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-gradient-via-stops {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-gradient-from-position {
-  syntax: "<length-percentage>";
-  inherits: false;
-  initial-value: 0%;
-}
-@property --tw-gradient-via-position {
-  syntax: "<length-percentage>";
-  inherits: false;
-  initial-value: 50%;
-}
-@property --tw-gradient-to-position {
-  syntax: "<length-percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
-@property --tw-leading {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-font-weight {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-tracking {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-shadow-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-shadow-alpha {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
-@property --tw-inset-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-inset-shadow-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-inset-shadow-alpha {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
-@property --tw-ring-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-ring-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-inset-ring-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-inset-ring-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-ring-inset {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-ring-offset-width {
-  syntax: "<length>";
-  inherits: false;
-  initial-value: 0px;
-}
-@property --tw-ring-offset-color {
-  syntax: "*";
-  inherits: false;
-  initial-value: #fff;
-}
-@property --tw-ring-offset-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-outline-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
-@property --tw-blur {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-brightness {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-contrast {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-grayscale {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-hue-rotate {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-invert {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-opacity {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-saturate {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-sepia {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-drop-shadow {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-drop-shadow-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-drop-shadow-alpha {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
-@property --tw-drop-shadow-size {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-blur {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-brightness {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-contrast {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-grayscale {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-hue-rotate {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-invert {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-opacity {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-saturate {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-sepia {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-duration {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-ease {
-  syntax: "*";
-  inherits: false;
-}
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-@keyframes pulse {
-  50% {
-    opacity: 0.5;
-  }
-}
-@keyframes bounce {
-  0%, 100% {
-    transform: translateY(-25%);
-    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
-  }
-  50% {
-    transform: none;
-    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
-  }
-}
diff --git a/NET10/ShellUI.Preview/wwwroot/index.html b/NET10/ShellUI.Preview/wwwroot/index.html
deleted file mode 100644
index c0d3e2a..0000000
--- a/NET10/ShellUI.Preview/wwwroot/index.html
+++ /dev/null
@@ -1,55 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>ShellUI Preview</title>
-    <base href="/" />
-    <link rel="icon" type="image/png" href="favicon.png" />
-    
-    <!-- Use the same CSS as the main library -->
-    <link rel="stylesheet" href="css/app.css" />
-    
-    <!-- Google Fonts (Inter) -->
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
-    
-    <style>
-        body { font-family: 'Inter', sans-serif; }
-        /* Blazor error UI - hidden by default, only visible when Blazor adds .show on error */
-        #blazor-error-ui { display: none !important; position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background: #dc2626; color: #fff; padding: 1rem; text-align: center; }
-        #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>
-    <div id="app">
-        <!-- Simple Loading State -->
-        <div style="display:flex;align-items:center;justify-content:center;height:100vh;background:#09090b;color:#fff">
-            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="animate-spin">
-                <path d="M21 12a9 9 0 1 1-6.219-8.56" />
-            </svg>
-        </div>
-    </div>
-
-    <div id="blazor-error-ui">
-        An unhandled error has occurred.
-        <a href="." class="reload">Reload</a>
-        <span class="dismiss">×</span>
-    </div>
-    
-    <!-- Blazor Boot -->
-    <script src="_framework/blazor.webassembly.js"></script>
-    
-    <!-- Theme Script -->
-    <script>
-        // Force dark mode for now, or read from query param
-        document.documentElement.classList.add('dark');
-    </script>
-</body>
-
-</html>
diff --git a/NET10/ShellUI.Preview/wwwroot/input.css b/NET10/ShellUI.Preview/wwwroot/input.css
deleted file mode 100644
index 1428af4..0000000
--- a/NET10/ShellUI.Preview/wwwroot/input.css
+++ /dev/null
@@ -1,188 +0,0 @@
-@import "tailwindcss";
-
-:root {
-  --background: oklch(0.9900 0 0);
-  --foreground: oklch(0 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0 0 0);
-  --popover: oklch(0.9900 0 0);
-  --popover-foreground: oklch(0 0 0);
-  --primary: oklch(0 0 0);
-  --primary-foreground: oklch(1 0 0);
-  --secondary: oklch(0.9400 0 0);
-  --secondary-foreground: oklch(0 0 0);
-  --muted: oklch(0.9700 0 0);
-  --muted-foreground: oklch(0.4400 0 0);
-  --accent: oklch(0.9400 0 0);
-  --accent-foreground: oklch(0 0 0);
-  --destructive: oklch(0.6300 0.1900 23.0300);
-  --destructive-foreground: oklch(1 0 0);
-  --border: oklch(0.9200 0 0);
-  --input: oklch(0.9400 0 0);
-  --ring: oklch(0 0 0);
-  --chart-1: oklch(0.8100 0.1700 75.3500);
-  --chart-2: oklch(0.5500 0.2200 264.5300);
-  --chart-3: oklch(0.7200 0 0);
-  --chart-4: oklch(0.9200 0 0);
-  --chart-5: oklch(0.5600 0 0);
-  --sidebar: oklch(0.9900 0 0);
-  --sidebar-foreground: oklch(0 0 0);
-  --sidebar-primary: oklch(0 0 0);
-  --sidebar-primary-foreground: oklch(1 0 0);
-  --sidebar-accent: oklch(0.9400 0 0);
-  --sidebar-accent-foreground: oklch(0 0 0);
-  --sidebar-border: oklch(0.9400 0 0);
-  --sidebar-ring: oklch(0 0 0);
-  --font-sans: Geist, sans-serif;
-  --font-serif: Georgia, serif;
-  --font-mono: Geist Mono, monospace;
-  --radius: 0.5rem;
-  --shadow-x: 0px;
-  --shadow-y: 1px;
-  --shadow-blur: 2px;
-  --shadow-spread: 0px;
-  --shadow-opacity: 0.18;
-  --shadow-color: hsl(0 0% 0%);
-  --shadow-2xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);
-  --shadow-xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);
-  --shadow-sm: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);
-  --shadow: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);
-  --shadow-md: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 2px 4px -1px hsl(0 0% 0% / 0.18);
-  --shadow-lg: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 4px 6px -1px hsl(0 0% 0% / 0.18);
-  --shadow-xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 8px 10px -1px hsl(0 0% 0% / 0.18);
-  --shadow-2xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.45);
-  --tracking-normal: 0em;
-  --spacing: 0.25rem;
-}
-
-.dark {
-  --background: oklch(0 0 0);
-  --foreground: oklch(1 0 0);
-  --card: oklch(0.1400 0 0);
-  --card-foreground: oklch(1 0 0);
-  --popover: oklch(0.1800 0 0);
-  --popover-foreground: oklch(1 0 0);
-  --primary: oklch(1 0 0);
-  --primary-foreground: oklch(0 0 0);
-  --secondary: oklch(0.2500 0 0);
-  --secondary-foreground: oklch(1 0 0);
-  --muted: oklch(0.2300 0 0);
-  --muted-foreground: oklch(0.7200 0 0);
-  --accent: oklch(0.3200 0 0);
-  --accent-foreground: oklch(1 0 0);
-  --destructive: oklch(0.6900 0.2000 23.9100);
-  --destructive-foreground: oklch(0 0 0);
-  --border: oklch(0.2600 0 0);
-  --input: oklch(0.3200 0 0);
-  --ring: oklch(0.7200 0 0);
-  --chart-1: oklch(0.8100 0.1700 75.3500);
-  --chart-2: oklch(0.5800 0.2100 260.8400);
-  --chart-3: oklch(0.5600 0 0);
-  --chart-4: oklch(0.4400 0 0);
-  --chart-5: oklch(0.9200 0 0);
-  --sidebar: oklch(0.1800 0 0);
-  --sidebar-foreground: oklch(1 0 0);
-  --sidebar-primary: oklch(1 0 0);
-  --sidebar-primary-foreground: oklch(0 0 0);
-  --sidebar-accent: oklch(0.3200 0 0);
-  --sidebar-accent-foreground: oklch(1 0 0);
-  --sidebar-border: oklch(0.3200 0 0);
-  --sidebar-ring: oklch(0.7200 0 0);
-  --font-sans: Geist, sans-serif;
-  --font-serif: Georgia, serif;
-  --font-mono: Geist Mono, monospace;
-  --radius: 0.5rem;
-  --shadow-x: 0px;
-  --shadow-y: 1px;
-  --shadow-blur: 2px;
-  --shadow-spread: 0px;
-  --shadow-opacity: 0.18;
-  --shadow-color: hsl(0 0% 0%);
-  --shadow-2xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);
-  --shadow-xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);
-  --shadow-sm: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);
-  --shadow: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);
-  --shadow-md: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 2px 4px -1px hsl(0 0% 0% / 0.18);
-  --shadow-lg: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 4px 6px -1px hsl(0 0% 0% / 0.18);
-  --shadow-xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 8px 10px -1px hsl(0 0% 0% / 0.18);
-  --shadow-2xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.45);
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-
-  --font-sans: var(--font-sans);
-  --font-mono: var(--font-mono);
-  --font-serif: var(--font-serif);
-
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-
-  --shadow-2xs: var(--shadow-2xs);
-  --shadow-xs: var(--shadow-xs);
-  --shadow-sm: var(--shadow-sm);
-  --shadow: var(--shadow);
-  --shadow-md: var(--shadow-md);
-  --shadow-lg: var(--shadow-lg);
-  --shadow-xl: var(--shadow-xl);
-  --shadow-2xl: var(--shadow-2xl);
-}
-
-/* Ensure font-family updates when theme changes - must come after @theme inline */
-html, body, :host {
-  font-family: var(--font-sans) !important;
-}
-
-/* Loading component animations - Add these when installing the loading component */
-@keyframes bars {
-  0%, 100% { transform: scaleY(0.4); opacity: 0.7; }
-  50% { transform: scaleY(1); opacity: 1; }
-}
-
-@keyframes bars-vertical {
-  0%, 100% { transform: scaleY(0.4); opacity: 0.7; }
-  50% { transform: scaleY(1); opacity: 1; }
-}
-
-@keyframes bars-pulse {
-  0%, 100% { transform: scaleY(0.3); opacity: 0.5; }
-  50% { transform: scaleY(1); opacity: 1; }
-}
-
-@keyframes orbit {
-  0% { transform: translate(-50%, 0) rotate(0deg) translateX(calc((var(--size, 1rem) - 0.5rem) / 2)) rotate(0deg); }
-  100% { transform: translate(-50%, 0) rotate(360deg) translateX(calc((var(--size, 1rem) - 0.5rem) / 2)) rotate(-360deg); }
-}
diff --git a/NET10/ShellUI.Preview/wwwroot/sample-data/weather.json b/NET10/ShellUI.Preview/wwwroot/sample-data/weather.json
deleted file mode 100644
index b745973..0000000
--- a/NET10/ShellUI.Preview/wwwroot/sample-data/weather.json
+++ /dev/null
@@ -1,27 +0,0 @@
-[
-  {
-    "date": "2022-01-06",
-    "temperatureC": 1,
-    "summary": "Freezing"
-  },
-  {
-    "date": "2022-01-07",
-    "temperatureC": 14,
-    "summary": "Bracing"
-  },
-  {
-    "date": "2022-01-08",
-    "temperatureC": -13,
-    "summary": "Freezing"
-  },
-  {
-    "date": "2022-01-09",
-    "temperatureC": -16,
-    "summary": "Balmy"
-  },
-  {
-    "date": "2022-01-10",
-    "temperatureC": -2,
-    "summary": "Chilly"
-  }
-]

From cf38399860cc8b50e6ca9c52471e6ce502ef0f1f Mon Sep 17 00:00:00 2001
From: Shephard Tseisi <shephard@kernel.co.zw>
Date: Thu, 23 Jul 2026 22:25:48 +0200
Subject: [PATCH 02/10] chore: remove GitHub Actions workflow for ShellUI
 Preview deployment

Deleted the `preview-pages.yml` workflow file, which was responsible for deploying the ShellUI Preview to GitHub Pages. This change simplifies the CI/CD setup by removing an unused workflow.
---
 .github/workflows/preview-pages.yml | 65 -----------------------------
 1 file changed, 65 deletions(-)
 delete mode 100644 .github/workflows/preview-pages.yml

diff --git a/.github/workflows/preview-pages.yml b/.github/workflows/preview-pages.yml
deleted file mode 100644
index decd86b..0000000
--- a/.github/workflows/preview-pages.yml
+++ /dev/null
@@ -1,65 +0,0 @@
-# Deploy ShellUI Preview to GitHub Pages (for docs embedding)
-name: Deploy Preview to GitHub Pages
-
-on:
-  push:
-    branches: [ main ]
-    paths:
-      - 'NET10/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: '10.0.x'
-
-      - name: Publish Preview (Blazor WASM)
-        run: |
-          dotnet publish NET10/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
-        with:
-          # Auto-enable Pages on first run so this workflow can deploy without
-          # someone clicking through Settings → Pages first. Requires the
-          # GITHUB_TOKEN to have `pages: write` (already set above).
-          enablement: true
-
-      - 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

From a7456357191c2a4fb785fb8849103f7839b0bc37 Mon Sep 17 00:00:00 2001
From: Shephard Tseisi <shephard@kernel.co.zw>
Date: Thu, 23 Jul 2026 22:26:44 +0200
Subject: [PATCH 03/10] feat: implement dismiss behavior and async disposal in
 UI components

Added `CloseOnScroll` parameter to Combobox, DatePicker, MultiSelect, and other components to control dropdown dismissal on page scroll, aligning with shadcn/Radix behavior. Implemented async disposal and JavaScript interop for managing dismiss events. Enhanced DataTable with server-side data handling capabilities, including new request and response models for better data management.
---
 .../Components/Combobox.razor                 | 74 +++++++++++++--
 .../Components/Command.razor                  |  2 +-
 .../Components/DataPicker.razor               | 65 ++++++++++++-
 .../Components/DataTable.razor                | 94 ++++++++++++++-----
 .../Components/DatePicker.razor               | 78 ++++++++++++---
 .../Components/DateRangePicker.razor          | 77 +++++++++++++--
 .../Components/DialogContent.razor            | 27 +++++-
 .../Components/DrawerContent.razor            | 26 +++++
 .../Components/MultiSelect.razor              | 62 +++++++++++-
 .../Components/SheetContent.razor             | 26 +++++
 .../Components/Sonner.razor                   |  4 +-
 .../Components/Stepper.razor                  | 17 +++-
 .../Components/StepperStep.razor              | 15 ++-
 src/ShellUI.Components/Components/Toast.razor |  2 +-
 .../Components/TypedSelect.razor              | 76 +++++++++++++++
 15 files changed, 574 insertions(+), 71 deletions(-)
 create mode 100644 src/ShellUI.Components/Components/TypedSelect.razor

diff --git a/src/ShellUI.Components/Components/Combobox.razor b/src/ShellUI.Components/Components/Combobox.razor
index d263f79..a9b26c0 100644
--- a/src/ShellUI.Components/Components/Combobox.razor
+++ b/src/ShellUI.Components/Components/Combobox.razor
@@ -1,4 +1,7 @@
 @namespace ShellUI.Components
+@using Microsoft.JSInterop
+@implements IAsyncDisposable
+@inject IJSRuntime JS
 
 <div class="@Shell.Cn("relative", Class)" @attributes="AdditionalAttributes">
     <button type="button"
@@ -75,6 +78,9 @@
     [Parameter] public bool Disabled { get; set; }
     [Parameter] public IEnumerable<string>? Options { get; set; }
     [Parameter] public bool Searchable { get; set; } = true;
+    /// Dismiss the dropdown when the page scrolls. Matches shadcn/Radix behavior.
+    /// Set false to keep the dropdown open across scroll (useful for infinite-scroll pages).
+    [Parameter] public bool CloseOnScroll { get; set; }
     [Parameter] public RenderFragment? ChildContent { get; set; }
     [Parameter] public string? Class { get; set; }
     [Parameter(CaptureUnmatchedValues = true)]
@@ -82,22 +88,72 @@
     
     private bool IsOpen { get; set; }
     private string searchQuery = "";
-    
-    private void Toggle() 
+    private DotNetObjectReference<Combobox>? _selfRef;
+    private readonly string _dismissHandle = Guid.NewGuid().ToString("N");
+    private bool _dismissRegistered;
+
+    private async Task Toggle()
     {
-        if (!Disabled)
+        if (Disabled) return;
+        IsOpen = !IsOpen;
+        if (IsOpen)
+        {
+            searchQuery = "";
+            await RegisterDismissAsync();
+        }
+        else
         {
-            IsOpen = !IsOpen;
-            if (IsOpen) searchQuery = "";
+            await UnregisterDismissAsync();
         }
     }
-    
-    private void Close() => IsOpen = false;
-    
+
+    private async Task Close()
+    {
+        IsOpen = false;
+        await UnregisterDismissAsync();
+    }
+
+    [JSInvokable]
+    public async Task OnDismissEvent()
+    {
+        if (IsOpen)
+        {
+            IsOpen = false;
+            await UnregisterDismissAsync();
+            StateHasChanged();
+        }
+    }
+
+    private async Task RegisterDismissAsync()
+    {
+        if (!CloseOnScroll || _dismissRegistered) return;
+        _selfRef ??= DotNetObjectReference.Create(this);
+        try
+        {
+            await JS.InvokeVoidAsync("ShellUI.onDismissEvents", _dismissHandle, _selfRef);
+            _dismissRegistered = true;
+        }
+        catch { }
+    }
+
+    private async Task UnregisterDismissAsync()
+    {
+        if (!_dismissRegistered) return;
+        try { await JS.InvokeVoidAsync("ShellUI.offDismissEvents", _dismissHandle); } catch { }
+        _dismissRegistered = false;
+    }
+
     public async Task SelectValue(string value)
     {
         Value = value;
-        await ValueChanged.InvokeAsync(value);
         IsOpen = false;
+        await UnregisterDismissAsync();
+        await ValueChanged.InvokeAsync(value);
+    }
+
+    public async ValueTask DisposeAsync()
+    {
+        await UnregisterDismissAsync();
+        _selfRef?.Dispose();
     }
 }
diff --git a/src/ShellUI.Components/Components/Command.razor b/src/ShellUI.Components/Components/Command.razor
index 0222115..72ed30a 100644
--- a/src/ShellUI.Components/Components/Command.razor
+++ b/src/ShellUI.Components/Components/Command.razor
@@ -5,7 +5,7 @@
     <DialogContent Class="overflow-hidden p-0">
         <!-- Search Input -->
         <div class="flex items-center border-b border-border px-3 py-2">
-            <svg class="mr-2 h-4 w-4 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <svg class="mr-2 h-4 w-4 text-foreground/70" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
             </svg>
             <input
diff --git a/src/ShellUI.Components/Components/DataPicker.razor b/src/ShellUI.Components/Components/DataPicker.razor
index b7c2dd0..afcbb08 100644
--- a/src/ShellUI.Components/Components/DataPicker.razor
+++ b/src/ShellUI.Components/Components/DataPicker.razor
@@ -1,6 +1,9 @@
 @namespace ShellUI.Components
+@using Microsoft.JSInterop
 @typeparam TItem
 @typeparam TKey where TKey : notnull
+@implements IAsyncDisposable
+@inject IJSRuntime JS
 
 <div class="@Shell.Cn("relative", Class)" @attributes="AdditionalAttributes">
     <button type="button"
@@ -30,7 +33,7 @@
     {
         <div class="absolute z-50 mt-1 w-full rounded-md border border-border bg-popover shadow-md animate-in fade-in-0 zoom-in-95">
             <div class="flex items-center border-b border-border px-3">
-                <svg class="mr-2 h-4 w-4 shrink-0 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <svg class="mr-2 h-4 w-4 shrink-0 text-foreground/70" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                 </svg>
                 <input @ref="_searchInput"
@@ -103,6 +106,9 @@
     [Parameter] public string SearchPlaceholder { get; set; } = "Search...";
     [Parameter] public string EmptyText { get; set; } = "No results found.";
     [Parameter] public bool Disabled { get; set; }
+    /// Dismiss the dropdown when the page scrolls. Matches shadcn/Radix behavior.
+    /// Set false to keep the dropdown open across scroll (useful for infinite-scroll pages).
+    [Parameter] public bool CloseOnScroll { get; set; }
     [Parameter] public string? Class { get; set; }
     [Parameter(CaptureUnmatchedValues = true)]
     public Dictionary<string, object>? AdditionalAttributes { get; set; }
@@ -112,6 +118,9 @@
     private int _highlightedIndex;
     private ElementReference _searchInput;
     private bool _shouldFocus;
+    private DotNetObjectReference<DataPicker<TItem, TKey>>? _selfRef;
+    private readonly string _dismissHandle = Guid.NewGuid().ToString("N");
+    private bool _dismissRegistered;
 
     private string DisplayFor(TItem item) => DisplaySelector?.Invoke(item) ?? item?.ToString() ?? "";
     private TKey KeyFor(TItem item) => KeySelector(item);
@@ -124,7 +133,7 @@
         return Items.Where(i => DisplayFor(i).Contains(q, StringComparison.OrdinalIgnoreCase));
     }
 
-    private void Toggle()
+    private async Task Toggle()
     {
         if (Disabled) return;
         IsOpen = !IsOpen;
@@ -133,10 +142,51 @@
             _searchQuery = "";
             _highlightedIndex = 0;
             _shouldFocus = true;
+            await RegisterDismissAsync();
+        }
+        else
+        {
+            await UnregisterDismissAsync();
+        }
+    }
+
+    private async Task Close()
+    {
+        IsOpen = false;
+        await UnregisterDismissAsync();
+    }
+
+    // Fires when the page scrolls or the window resizes — bubble-phase, so scrolling
+    // through the option list inside the popover does NOT dismiss.
+    [JSInvokable]
+    public async Task OnDismissEvent()
+    {
+        if (IsOpen)
+        {
+            IsOpen = false;
+            await UnregisterDismissAsync();
+            StateHasChanged();
         }
     }
 
-    private void Close() => IsOpen = false;
+    private async Task RegisterDismissAsync()
+    {
+        if (!CloseOnScroll || _dismissRegistered) return;
+        _selfRef ??= DotNetObjectReference.Create(this);
+        try
+        {
+            await JS.InvokeVoidAsync("ShellUI.onDismissEvents", _dismissHandle, _selfRef);
+            _dismissRegistered = true;
+        }
+        catch { }
+    }
+
+    private async Task UnregisterDismissAsync()
+    {
+        if (!_dismissRegistered) return;
+        try { await JS.InvokeVoidAsync("ShellUI.offDismissEvents", _dismissHandle); } catch { }
+        _dismissRegistered = false;
+    }
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
@@ -151,13 +201,14 @@
     {
         Value = item;
         IsOpen = false;
+        await UnregisterDismissAsync();
         await ValueChanged.InvokeAsync(item);
     }
 
     private async Task OnKeyDown(KeyboardEventArgs e)
     {
         var filtered = Filter().ToList();
-        if (e.Key == "Escape") { Close(); return; }
+        if (e.Key == "Escape") { await Close(); return; }
         if (e.Key == "ArrowDown") { _highlightedIndex = Math.Min(_highlightedIndex + 1, filtered.Count - 1); return; }
         if (e.Key == "ArrowUp") { _highlightedIndex = Math.Max(_highlightedIndex - 1, 0); return; }
         if (e.Key == "Enter" && filtered.Count > 0)
@@ -166,4 +217,10 @@
             await SelectItem(filtered[idx]);
         }
     }
+
+    public async ValueTask DisposeAsync()
+    {
+        await UnregisterDismissAsync();
+        _selfRef?.Dispose();
+    }
 }
diff --git a/src/ShellUI.Components/Components/DataTable.razor b/src/ShellUI.Components/Components/DataTable.razor
index e726b90..6cd2839 100644
--- a/src/ShellUI.Components/Components/DataTable.razor
+++ b/src/ShellUI.Components/Components/DataTable.razor
@@ -33,7 +33,7 @@
                     @foreach (var column in Columns)
                     {
                         <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground @(column.Sortable ? "cursor-pointer hover:bg-accent/50" : "")"
-                            @onclick="() => { if (column.Sortable) OnSortClicked(column); }">
+                            @onclick="async () => { if (column.Sortable) await OnSortClicked(column); }">
                             <div class="flex items-center gap-2">
                                 @column.Header
                                 @if (column.Sortable)
@@ -114,7 +114,7 @@
     </div>
 
     <!-- Pagination -->
-    @if (ShowPagination && _filteredItems.Any())
+    @if (ShowPagination && (_filteredItems.Any() || (ServerSide && _serverTotalCount > 0)))
     {
         <div class="flex flex-col gap-4 px-2 py-4 sm:flex-row sm:items-center sm:justify-between">
             <div class="flex-1 text-sm text-muted-foreground">
@@ -124,7 +124,7 @@
                 }
                 else
                 {
-                    @($"Showing {_startIndex} - {_endIndex} of {_filteredItems.Count()} results")
+                    @($"Showing {_startIndex} - {_endIndex} of {(ServerSide ? _serverTotalCount : _filteredItems.Count())} results")
                 }
             </div>
             <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:space-x-6 lg:space-x-8">
@@ -138,7 +138,7 @@
                             }
                         </select>
                         <div class="absolute inset-y-0 right-1 flex items-center pointer-events-none">
-                            <svg class="h-3 w-3 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <svg class="h-3 w-3 text-foreground/70" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                             </svg>
                         </div>
@@ -191,6 +191,16 @@
     [Parameter]
     public EventCallback<HashSet<TItem>> SelectedItemsChanged { get; set; }
 
+    /// When true, `Items` is ignored and the table calls `OnDataRequest` for each
+    /// filter / sort / page change. Use for datasets too large to materialize client-side.
+    [Parameter]
+    public bool ServerSide { get; set; }
+
+    /// Required when `ServerSide` is true. Receives the current DataTableRequest
+    /// (skip/take/sort/search) and returns the page of items plus total count.
+    [Parameter]
+    public Func<DataTableRequest, Task<DataTableResponse<TItem>>>? OnDataRequest { get; set; }
+
     private string _filterText = "";
     private IEnumerable<TItem> _filteredItems = new List<TItem>();
     private IEnumerable<TItem> _paginatedItems = new List<TItem>();
@@ -200,11 +210,51 @@
     private int _startIndex = 1;
     private int _endIndex = 1;
     private int _pageSize = 10;
+    private int _serverTotalCount = 0;
     private TItem? _openActionsItem = default(TItem);
 
-    protected override void OnParametersSet()
+    protected override async Task OnParametersSetAsync()
+    {
+        await RefreshAsync();
+    }
+
+    private async Task RefreshAsync()
+    {
+        if (ServerSide && OnDataRequest is not null)
+        {
+            await LoadServerPageAsync();
+        }
+        else
+        {
+            UpdateFilteredItems();
+        }
+    }
+
+    private async Task LoadServerPageAsync()
     {
-        UpdateFilteredItems();
+        var sortColumn = Columns.FirstOrDefault(c => c.SortDirection != SortDirection.None);
+        var request = new DataTableRequest
+        {
+            Skip = (_currentPage - 1) * _pageSize,
+            Take = _pageSize,
+            SortBy = sortColumn?.PropertyName,
+            SortDirection = sortColumn?.SortDirection ?? SortDirection.None,
+            SearchQuery = _filterText ?? ""
+        };
+
+        var response = await OnDataRequest!(request);
+
+        _paginatedItems = response.Items;
+        _serverTotalCount = response.TotalCount;
+        _totalPages = Math.Max(1, (int)Math.Ceiling(_serverTotalCount / (double)_pageSize));
+        _currentPage = Math.Min(_currentPage, _totalPages);
+        _startIndex = _serverTotalCount == 0 ? 0 : (_currentPage - 1) * _pageSize + 1;
+        _endIndex = Math.Min(_currentPage * _pageSize, _serverTotalCount);
+        // Keep the "select-all" checkbox and count displays honest — they only ever
+        // reference the currently loaded page in server-side mode.
+        _filteredItems = _paginatedItems;
+
+        StateHasChanged();
     }
 
     private void UpdateFilteredItems()
@@ -213,7 +263,7 @@
         _filteredItems = string.IsNullOrWhiteSpace(_filterText)
             ? Items
             : Items.Where(item =>
-                Columns.Any(col => 
+                Columns.Any(col =>
                 {
                     // Simple text search - check if any property contains the filter text
                     var property = typeof(TItem).GetProperty(col.PropertyName);
@@ -243,31 +293,29 @@
         StateHasChanged();
     }
 
-    private void OnFilterInput(ChangeEventArgs e)
+    private async Task OnFilterInput(ChangeEventArgs e)
     {
         _filterText = e.Value?.ToString() ?? "";
-        _currentPage = 1; // Reset to first page
-        UpdateFilteredItems();
+        _currentPage = 1;
+        await RefreshAsync();
     }
 
-    private void OnFilterChanged(string value)
+    private async Task OnFilterChanged(string value)
     {
         _filterText = value;
-        _currentPage = 1; // Reset to first page
-        UpdateFilteredItems();
+        _currentPage = 1;
+        await RefreshAsync();
     }
 
-    private void OnSortClicked(DataTableColumn<TItem> column)
+    private async Task OnSortClicked(DataTableColumn<TItem> column)
     {
         if (!column.Sortable) return;
 
-        // Reset other columns
         foreach (var col in Columns.Where(c => c != column))
         {
             col.SortDirection = SortDirection.None;
         }
 
-        // Cycle sort direction
         column.SortDirection = column.SortDirection switch
         {
             SortDirection.None => SortDirection.Ascending,
@@ -276,7 +324,7 @@
             _ => SortDirection.Ascending
         };
 
-        UpdateFilteredItems();
+        await RefreshAsync();
     }
 
     private void OnSelectAllChanged(bool selected)
@@ -311,31 +359,31 @@
 
     private bool IsSelected(TItem item) => _selectedItems.Contains(item);
 
-    private void OnPageSizeChanged(ChangeEventArgs e)
+    private async Task OnPageSizeChanged(ChangeEventArgs e)
     {
         if (int.TryParse(e.Value?.ToString(), out var size))
         {
             _pageSize = size;
             _currentPage = 1;
-            UpdateFilteredItems();
+            await RefreshAsync();
         }
     }
 
-    private void OnPreviousPage()
+    private async Task OnPreviousPage()
     {
         if (_currentPage > 1)
         {
             _currentPage--;
-            UpdateFilteredItems();
+            await RefreshAsync();
         }
     }
 
-    private void OnNextPage()
+    private async Task OnNextPage()
     {
         if (_currentPage < _totalPages)
         {
             _currentPage++;
-            UpdateFilteredItems();
+            await RefreshAsync();
         }
     }
 
diff --git a/src/ShellUI.Components/Components/DatePicker.razor b/src/ShellUI.Components/Components/DatePicker.razor
index ff7a00e..c620e2d 100644
--- a/src/ShellUI.Components/Components/DatePicker.razor
+++ b/src/ShellUI.Components/Components/DatePicker.razor
@@ -1,24 +1,27 @@
 @namespace ShellUI.Components
+@using Microsoft.JSInterop
+@implements IAsyncDisposable
+@inject IJSRuntime JS
 
 <div class="@Shell.Cn("relative", Class)" @attributes="AdditionalAttributes">
     <div class="relative">
         <button type="button"
                 @onclick="Toggle"
                 disabled="@Disabled"
-                class="@Shell.Cn("flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", Disabled ? "cursor-not-allowed opacity-50" : "")">
-            <span class="@(Value == null ? "text-muted-foreground" : "")">
+                class="@Shell.Cn("flex h-10 w-full items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", Disabled ? "cursor-not-allowed opacity-50" : "")">
+            <span class="@("flex-1 text-left " + (Value == null ? "text-muted-foreground" : ""))">
                 @(Value?.ToString("MMM dd, yyyy") ?? Placeholder)
             </span>
-            <div class="flex items-center gap-1">
+            <div class="ml-auto flex items-center gap-1 shrink-0">
                 @if (AllowClear && Value.HasValue && !Disabled)
                 {
                     <div role="button" @onclick:stopPropagation @onclick="Clear" class="text-muted-foreground hover:text-foreground">
-                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                         </svg>
                     </div>
                 }
-                <svg class="h-4 w-4 opacity-50" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <svg class="h-4 w-4 text-foreground/70" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                 </svg>
             </div>
@@ -81,21 +84,68 @@
     [Parameter] public string Placeholder { get; set; } = "Pick a date";
     [Parameter] public bool Disabled { get; set; }
     [Parameter] public bool AllowClear { get; set; } = true;
+    /// Dismiss the calendar when the page scrolls. Matches shadcn/Radix behavior.
+    /// Set false to keep the calendar open across scroll.
+    [Parameter] public bool CloseOnScroll { get; set; }
     [Parameter] public string? Class { get; set; }
     [Parameter(CaptureUnmatchedValues = true)]
     public Dictionary<string, object>? AdditionalAttributes { get; set; }
     
     private bool IsOpen { get; set; }
     private DateTime currentMonth = DateTime.Now;
-    
-    private void Toggle() => IsOpen = !IsOpen;
-    private void Close() => IsOpen = false;
-    
+    private DotNetObjectReference<DatePicker>? _selfRef;
+    private readonly string _dismissHandle = Guid.NewGuid().ToString("N");
+    private bool _dismissRegistered;
+
+    private async Task Toggle()
+    {
+        IsOpen = !IsOpen;
+        if (IsOpen) await RegisterDismissAsync();
+        else await UnregisterDismissAsync();
+    }
+
+    private async Task Close()
+    {
+        IsOpen = false;
+        await UnregisterDismissAsync();
+    }
+
+    [JSInvokable]
+    public async Task OnDismissEvent()
+    {
+        if (IsOpen)
+        {
+            IsOpen = false;
+            await UnregisterDismissAsync();
+            StateHasChanged();
+        }
+    }
+
+    private async Task RegisterDismissAsync()
+    {
+        if (!CloseOnScroll || _dismissRegistered) return;
+        _selfRef ??= DotNetObjectReference.Create(this);
+        try
+        {
+            await JS.InvokeVoidAsync("ShellUI.onDismissEvents", _dismissHandle, _selfRef);
+            _dismissRegistered = true;
+        }
+        catch { }
+    }
+
+    private async Task UnregisterDismissAsync()
+    {
+        if (!_dismissRegistered) return;
+        try { await JS.InvokeVoidAsync("ShellUI.offDismissEvents", _dismissHandle); } catch { }
+        _dismissRegistered = false;
+    }
+
     private async Task SelectDate(DateTime date)
     {
         Value = date;
-        await ValueChanged.InvokeAsync(date);
         IsOpen = false;
+        await UnregisterDismissAsync();
+        await ValueChanged.InvokeAsync(date);
     }
 
     private async Task Clear()
@@ -103,8 +153,14 @@
         Value = null;
         await ValueChanged.InvokeAsync(null);
     }
-    
+
     private void PreviousMonth() => currentMonth = currentMonth.AddMonths(-1);
     private void NextMonth() => currentMonth = currentMonth.AddMonths(1);
     private int GetDaysInMonth() => DateTime.DaysInMonth(currentMonth.Year, currentMonth.Month);
+
+    public async ValueTask DisposeAsync()
+    {
+        await UnregisterDismissAsync();
+        _selfRef?.Dispose();
+    }
 }
diff --git a/src/ShellUI.Components/Components/DateRangePicker.razor b/src/ShellUI.Components/Components/DateRangePicker.razor
index e3bc2e2..9eff0e8 100644
--- a/src/ShellUI.Components/Components/DateRangePicker.razor
+++ b/src/ShellUI.Components/Components/DateRangePicker.razor
@@ -1,18 +1,21 @@
 @namespace ShellUI.Components
+@using Microsoft.JSInterop
+@implements IAsyncDisposable
+@inject IJSRuntime JS
 
 <div class="@Shell.Cn("relative", Class)" @attributes="AdditionalAttributes">
     <button type="button"
             @onclick="ToggleCalendar"
             disabled="@Disabled"
-            class="@Shell.Cn("flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", Disabled ? "opacity-50 cursor-not-allowed" : "")">
-        <span class="@(StartDate == null && EndDate == null ? "text-muted-foreground" : "")">
+            class="@Shell.Cn("flex h-10 w-full items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", Disabled ? "opacity-50 cursor-not-allowed" : "")">
+        <span class="@("flex-1 text-left " + (StartDate == null && EndDate == null ? "text-muted-foreground" : ""))">
             @GetDisplayText()
         </span>
-        <div class="flex items-center gap-1">
+        <div class="ml-auto flex items-center gap-1 shrink-0">
             @if (AllowClear && (StartDate.HasValue || EndDate.HasValue))
             {
-                <button type="button" 
-                        @onclick="ClearRange" 
+                <button type="button"
+                        @onclick="ClearRange"
                         @onclick:stopPropagation="true"
                         class="p-0.5 hover:bg-accent rounded transition-colors">
                     <svg class="h-3.5 w-3.5 text-muted-foreground hover:text-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -20,7 +23,7 @@
                     </svg>
                 </button>
             }
-            <svg class="h-4 w-4 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <svg class="h-4 w-4 text-foreground/70" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
             </svg>
         </div>
@@ -72,7 +75,7 @@
 
 @if (_isOpen)
 {
-    <div class="fixed inset-0 z-40" @onclick="() => _isOpen = false"></div>
+    <div class="fixed inset-0 z-40" @onclick="CloseBackdrop"></div>
 }
 
 @code {
@@ -83,6 +86,9 @@
     [Parameter] public string Placeholder { get; set; } = "Pick a date range";
     [Parameter] public bool AllowClear { get; set; } = true;
     [Parameter] public bool Disabled { get; set; }
+    /// Dismiss the calendar when the page scrolls. Matches shadcn/Radix behavior.
+    /// Set false to keep the calendar open across scroll.
+    [Parameter] public bool CloseOnScroll { get; set; }
     [Parameter] public string? Class { get; set; }
     [Parameter(CaptureUnmatchedValues = true)]
     public Dictionary<string, object>? AdditionalAttributes { get; set; }
@@ -90,6 +96,9 @@
     private bool _isOpen;
     private DateTime _currentMonth = DateTime.Now;
     private bool _selectingStart = true;
+    private DotNetObjectReference<DateRangePicker>? _selfRef;
+    private readonly string _dismissHandle = Guid.NewGuid().ToString("N");
+    private bool _dismissRegistered;
     
     private string GetDisplayText()
     {
@@ -127,7 +136,43 @@
         return baseClass;
     }
     
-    private void ToggleCalendar() => _isOpen = !_isOpen;
+    private async Task ToggleCalendar()
+    {
+        _isOpen = !_isOpen;
+        if (_isOpen) await RegisterDismissAsync();
+        else await UnregisterDismissAsync();
+    }
+
+    [JSInvokable]
+    public async Task OnDismissEvent()
+    {
+        if (_isOpen)
+        {
+            _isOpen = false;
+            await UnregisterDismissAsync();
+            StateHasChanged();
+        }
+    }
+
+    private async Task RegisterDismissAsync()
+    {
+        if (!CloseOnScroll || _dismissRegistered) return;
+        _selfRef ??= DotNetObjectReference.Create(this);
+        try
+        {
+            await JS.InvokeVoidAsync("ShellUI.onDismissEvents", _dismissHandle, _selfRef);
+            _dismissRegistered = true;
+        }
+        catch { }
+    }
+
+    private async Task UnregisterDismissAsync()
+    {
+        if (!_dismissRegistered) return;
+        try { await JS.InvokeVoidAsync("ShellUI.offDismissEvents", _dismissHandle); } catch { }
+        _dismissRegistered = false;
+    }
+
     private void PreviousMonth() => _currentMonth = _currentMonth.AddMonths(-1);
     private void NextMonth() => _currentMonth = _currentMonth.AddMonths(1);
     
@@ -175,10 +220,22 @@
         var firstDay = new DateTime(_currentMonth.Year, _currentMonth.Month, 1);
         var lastDay = firstDay.AddMonths(1).AddDays(-1);
         var startDayOfWeek = (int)firstDay.DayOfWeek;
-        
+
         for (int i = 0; i < startDayOfWeek; i++) days.Add(null);
         for (int day = 1; day <= lastDay.Day; day++) days.Add(new DateTime(_currentMonth.Year, _currentMonth.Month, day));
-        
+
         return days;
     }
+
+    private async Task CloseBackdrop()
+    {
+        _isOpen = false;
+        await UnregisterDismissAsync();
+    }
+
+    public async ValueTask DisposeAsync()
+    {
+        await UnregisterDismissAsync();
+        _selfRef?.Dispose();
+    }
 }
diff --git a/src/ShellUI.Components/Components/DialogContent.razor b/src/ShellUI.Components/Components/DialogContent.razor
index 11aed6e..5540fea 100644
--- a/src/ShellUI.Components/Components/DialogContent.razor
+++ b/src/ShellUI.Components/Components/DialogContent.razor
@@ -1,4 +1,7 @@
 @namespace ShellUI.Components
+@using Microsoft.JSInterop
+@implements IAsyncDisposable
+@inject IJSRuntime JS
 
 @if (Dialog?.Open == true)
 {
@@ -19,6 +22,8 @@
     [Parameter(CaptureUnmatchedValues = true)]
     public Dictionary<string, object>? AdditionalAttributes { get; set; }
 
+    private bool _isLocked;
+
     private async Task Close()
     {
         if (Dialog != null)
@@ -26,5 +31,25 @@
             await Dialog.SetOpen(false);
         }
     }
-}
 
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        var shouldBeLocked = Dialog?.Open == true;
+        if (shouldBeLocked && !_isLocked)
+        {
+            try { await JS.InvokeVoidAsync("ShellUI.lockBodyScroll"); _isLocked = true; } catch { }
+        }
+        else if (!shouldBeLocked && _isLocked)
+        {
+            try { await JS.InvokeVoidAsync("ShellUI.unlockBodyScroll"); _isLocked = false; } catch { }
+        }
+    }
+
+    public async ValueTask DisposeAsync()
+    {
+        if (_isLocked)
+        {
+            try { await JS.InvokeVoidAsync("ShellUI.unlockBodyScroll"); } catch { }
+        }
+    }
+}
diff --git a/src/ShellUI.Components/Components/DrawerContent.razor b/src/ShellUI.Components/Components/DrawerContent.razor
index e3a38f4..4cdb3b7 100644
--- a/src/ShellUI.Components/Components/DrawerContent.razor
+++ b/src/ShellUI.Components/Components/DrawerContent.razor
@@ -1,4 +1,7 @@
 @namespace ShellUI.Components
+@using Microsoft.JSInterop
+@implements IAsyncDisposable
+@inject IJSRuntime JS
 
 @if (Parent?.Open == true)
 {
@@ -18,8 +21,31 @@
     [Parameter(CaptureUnmatchedValues = true)]
     public Dictionary<string, object>? AdditionalAttributes { get; set; }
 
+    private bool _isLocked;
+
     private async Task Close()
     {
         if (Parent != null) await Parent.SetOpen(false);
     }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        var shouldBeLocked = Parent?.Open == true;
+        if (shouldBeLocked && !_isLocked)
+        {
+            try { await JS.InvokeVoidAsync("ShellUI.lockBodyScroll"); _isLocked = true; } catch { }
+        }
+        else if (!shouldBeLocked && _isLocked)
+        {
+            try { await JS.InvokeVoidAsync("ShellUI.unlockBodyScroll"); _isLocked = false; } catch { }
+        }
+    }
+
+    public async ValueTask DisposeAsync()
+    {
+        if (_isLocked)
+        {
+            try { await JS.InvokeVoidAsync("ShellUI.unlockBodyScroll"); } catch { }
+        }
+    }
 }
diff --git a/src/ShellUI.Components/Components/MultiSelect.razor b/src/ShellUI.Components/Components/MultiSelect.razor
index e90bb93..60c93ad 100644
--- a/src/ShellUI.Components/Components/MultiSelect.razor
+++ b/src/ShellUI.Components/Components/MultiSelect.razor
@@ -1,6 +1,9 @@
 @namespace ShellUI.Components
+@using Microsoft.JSInterop
 @typeparam TItem
 @typeparam TKey where TKey : notnull
+@implements IAsyncDisposable
+@inject IJSRuntime JS
 
 <div class="@Shell.Cn("relative", Class)" @attributes="AdditionalAttributes">
     <button type="button"
@@ -48,7 +51,7 @@
     {
         <div class="absolute z-50 mt-1 w-full rounded-md border border-border bg-popover shadow-md animate-in fade-in-0 zoom-in-95">
             <div class="flex items-center border-b border-border px-3">
-                <svg class="mr-2 h-4 w-4 shrink-0 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <svg class="mr-2 h-4 w-4 shrink-0 text-foreground/70" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                 </svg>
                 <input @ref="_searchInput"
@@ -121,6 +124,9 @@
     [Parameter] public string SearchPlaceholder { get; set; } = "Search...";
     [Parameter] public string EmptyText { get; set; } = "No results found.";
     [Parameter] public bool Disabled { get; set; }
+    /// Dismiss the dropdown when the page scrolls. Matches shadcn/Radix behavior.
+    /// Set false to keep the dropdown open across scroll (useful for infinite-scroll pages).
+    [Parameter] public bool CloseOnScroll { get; set; }
     [Parameter] public string? Class { get; set; }
     [Parameter(CaptureUnmatchedValues = true)]
     public Dictionary<string, object>? AdditionalAttributes { get; set; }
@@ -130,6 +136,9 @@
     private int _highlightedIndex;
     private ElementReference _searchInput;
     private bool _shouldFocus;
+    private DotNetObjectReference<MultiSelect<TItem, TKey>>? _selfRef;
+    private readonly string _dismissHandle = Guid.NewGuid().ToString("N");
+    private bool _dismissRegistered;
 
     private string DisplayFor(TItem item) => DisplaySelector?.Invoke(item) ?? item?.ToString() ?? "";
     private TKey KeyFor(TItem item) => KeySelector(item);
@@ -142,7 +151,7 @@
         return Items.Where(i => DisplayFor(i).Contains(q, StringComparison.OrdinalIgnoreCase));
     }
 
-    private void Toggle()
+    private async Task Toggle()
     {
         if (Disabled) return;
         IsOpen = !IsOpen;
@@ -151,10 +160,49 @@
             _searchQuery = "";
             _highlightedIndex = 0;
             _shouldFocus = true;
+            await RegisterDismissAsync();
+        }
+        else
+        {
+            await UnregisterDismissAsync();
         }
     }
 
-    private void Close() => IsOpen = false;
+    private async Task Close()
+    {
+        IsOpen = false;
+        await UnregisterDismissAsync();
+    }
+
+    [JSInvokable]
+    public async Task OnDismissEvent()
+    {
+        if (IsOpen)
+        {
+            IsOpen = false;
+            await UnregisterDismissAsync();
+            StateHasChanged();
+        }
+    }
+
+    private async Task RegisterDismissAsync()
+    {
+        if (!CloseOnScroll || _dismissRegistered) return;
+        _selfRef ??= DotNetObjectReference.Create(this);
+        try
+        {
+            await JS.InvokeVoidAsync("ShellUI.onDismissEvents", _dismissHandle, _selfRef);
+            _dismissRegistered = true;
+        }
+        catch { }
+    }
+
+    private async Task UnregisterDismissAsync()
+    {
+        if (!_dismissRegistered) return;
+        try { await JS.InvokeVoidAsync("ShellUI.offDismissEvents", _dismissHandle); } catch { }
+        _dismissRegistered = false;
+    }
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
@@ -186,7 +234,7 @@
     private async Task OnKeyDown(KeyboardEventArgs e)
     {
         var filtered = Filter().ToList();
-        if (e.Key == "Escape") { Close(); return; }
+        if (e.Key == "Escape") { await Close(); return; }
         if (e.Key == "ArrowDown") { _highlightedIndex = Math.Min(_highlightedIndex + 1, filtered.Count - 1); return; }
         if (e.Key == "ArrowUp") { _highlightedIndex = Math.Max(_highlightedIndex - 1, 0); return; }
         if (e.Key == "Enter" && filtered.Count > 0)
@@ -195,4 +243,10 @@
             await ToggleItem(filtered[idx]);
         }
     }
+
+    public async ValueTask DisposeAsync()
+    {
+        await UnregisterDismissAsync();
+        _selfRef?.Dispose();
+    }
 }
diff --git a/src/ShellUI.Components/Components/SheetContent.razor b/src/ShellUI.Components/Components/SheetContent.razor
index a901a9b..ccd9d70 100644
--- a/src/ShellUI.Components/Components/SheetContent.razor
+++ b/src/ShellUI.Components/Components/SheetContent.razor
@@ -1,4 +1,7 @@
 @namespace ShellUI.Components
+@using Microsoft.JSInterop
+@implements IAsyncDisposable
+@inject IJSRuntime JS
 
 @if (Parent?.Open == true)
 {
@@ -17,8 +20,31 @@
     [Parameter(CaptureUnmatchedValues = true)]
     public Dictionary<string, object>? AdditionalAttributes { get; set; }
 
+    private bool _isLocked;
+
     private async Task Close()
     {
         if (Parent != null) await Parent.SetOpen(false);
     }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        var shouldBeLocked = Parent?.Open == true;
+        if (shouldBeLocked && !_isLocked)
+        {
+            try { await JS.InvokeVoidAsync("ShellUI.lockBodyScroll"); _isLocked = true; } catch { }
+        }
+        else if (!shouldBeLocked && _isLocked)
+        {
+            try { await JS.InvokeVoidAsync("ShellUI.unlockBodyScroll"); _isLocked = false; } catch { }
+        }
+    }
+
+    public async ValueTask DisposeAsync()
+    {
+        if (_isLocked)
+        {
+            try { await JS.InvokeVoidAsync("ShellUI.unlockBodyScroll"); } catch { }
+        }
+    }
 }
diff --git a/src/ShellUI.Components/Components/Sonner.razor b/src/ShellUI.Components/Components/Sonner.razor
index 5d28106..9db9ad7 100644
--- a/src/ShellUI.Components/Components/Sonner.razor
+++ b/src/ShellUI.Components/Components/Sonner.razor
@@ -13,7 +13,7 @@
         var stackClass = i > 0 ? (IsTop ? "-mt-20 group-hover:mt-0" : "-mb-20 group-hover:mb-0") : "";
         <div @key="toast.Id"
              style="z-index: @(i + 1)"
-             class="@stackClass @GetToastClasses(toast.Variant) pointer-events-auto relative flex min-w-0 w-full items-center gap-3 overflow-hidden rounded-lg p-4 shadow-lg transition-all duration-300 animate-in fade-in-0 @SonnerVariants.GetToastAnimation(Position) shrink-0">
+             class="@stackClass @GetToastClasses(toast.Variant) pointer-events-auto relative flex min-w-0 w-full items-center gap-3 overflow-hidden rounded-lg p-4 shadow-lg transition-all duration-300 motion-reduce:transition-none animate-in fade-in-0 motion-reduce:animate-none @SonnerVariants.GetToastAnimation(Position) shrink-0">
             <div class="grid flex-1 gap-1">
                 @if (!string.IsNullOrEmpty(toast.Message))
                 {
@@ -50,6 +50,8 @@
     {
         "destructive" => "bg-destructive text-destructive-foreground",
         "success" => "bg-green-500/20 text-green-700 dark:bg-green-900/30 dark:text-green-100",
+        "info" => "bg-blue-500/20 text-blue-700 dark:bg-blue-900/30 dark:text-blue-100",
+        "warning" => "bg-yellow-500/20 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-100",
         _ => "bg-background text-foreground"
     };
 }
diff --git a/src/ShellUI.Components/Components/Stepper.razor b/src/ShellUI.Components/Components/Stepper.razor
index 6a31099..803e564 100644
--- a/src/ShellUI.Components/Components/Stepper.razor
+++ b/src/ShellUI.Components/Components/Stepper.razor
@@ -1,7 +1,7 @@
 @namespace ShellUI.Components
 @using ShellUI.Components.Models
 
-<CascadingValue Value="this" IsFixed="true">
+<CascadingValue Value="this">
     <div class="@Shell.Cn("w-full", Class)">
         @if (StepItems.Count > 0)
         {
@@ -13,13 +13,22 @@
                     var isActive = i == _activeStep;
                     var isCompleted = i < _highestStepReached;
                     var isClickable = i <= _highestStepReached;
+                    var capturedIndex = i;
+
+                    string stateClass;
+                    if (isActive)
+                        stateClass = "border-primary bg-primary text-primary-foreground ring-2 ring-primary/20 ring-offset-2 ring-offset-background";
+                    else if (isCompleted)
+                        stateClass = "border-primary bg-primary/10 text-primary";
+                    else
+                        stateClass = "border-muted bg-background text-muted-foreground";
 
                     <div class="flex flex-col items-center relative">
                         <button type="button"
-                                class="@Shell.Cn("flex h-10 w-10 items-center justify-center rounded-full border-2 text-sm font-medium transition-colors", isCompleted ? "border-primary bg-primary text-primary-foreground" : isActive ? "border-primary bg-background text-primary" : "border-muted bg-background text-muted-foreground", isClickable ? "cursor-pointer hover:border-primary/50" : "cursor-not-allowed")"
+                                class="@Shell.Cn("flex h-10 w-10 items-center justify-center rounded-full border-2 text-sm font-medium transition-colors", stateClass, isClickable ? "cursor-pointer" : "cursor-not-allowed", isClickable && !isActive ? "hover:border-primary/50" : "")"
                                 disabled="@(!isClickable)"
-                                @onclick="async () => await GoToStepAsync(i)">
-                            @if (isCompleted)
+                                @onclick="async () => await GoToStepAsync(capturedIndex)">
+                            @if (isCompleted && !isActive)
                             {
                                 <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
diff --git a/src/ShellUI.Components/Components/StepperStep.razor b/src/ShellUI.Components/Components/StepperStep.razor
index fe51d2f..d26bb2c 100644
--- a/src/ShellUI.Components/Components/StepperStep.razor
+++ b/src/ShellUI.Components/Components/StepperStep.razor
@@ -5,13 +5,24 @@
     var isActive = ParentStepper?.ActiveStep == index;
     var isCompleted = ParentStepper != null && index < ParentStepper.HighestStepReached;
     var isClickable = ParentStepper != null && index <= ParentStepper.HighestStepReached;
+
+    // Active wins over completed so clicking back to a visited step still shows
+    // "you are here" instead of the completed checkmark. Ring adds a subtle glow
+    // that reads as "current" independent of fill.
+    string stateClass;
+    if (isActive)
+        stateClass = "border-primary bg-primary text-primary-foreground ring-2 ring-primary/20 ring-offset-2 ring-offset-background";
+    else if (isCompleted)
+        stateClass = "border-primary bg-primary/10 text-primary";
+    else
+        stateClass = "border-muted bg-background text-muted-foreground";
 }
 <div class="flex flex-col items-center relative">
     <button type="button"
-            class="@Shell.Cn("flex h-10 w-10 items-center justify-center rounded-full border-2 text-sm font-medium transition-colors", isCompleted ? "border-primary bg-primary text-primary-foreground" : isActive ? "border-primary bg-background text-primary" : "border-muted bg-background text-muted-foreground", isClickable ? "cursor-pointer hover:border-primary/50" : "cursor-not-allowed")"
+            class="@Shell.Cn("flex h-10 w-10 items-center justify-center rounded-full border-2 text-sm font-medium transition-colors", stateClass, isClickable ? "cursor-pointer" : "cursor-not-allowed", isClickable && !isActive ? "hover:border-primary/50" : "")"
             disabled="@(!isClickable)"
             @onclick="async () => { if (ParentStepper != null) await ParentStepper.GoToStepAsync(index); }">
-        @if (isCompleted)
+        @if (isCompleted && !isActive)
         {
             <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
diff --git a/src/ShellUI.Components/Components/Toast.razor b/src/ShellUI.Components/Components/Toast.razor
index 71a1d7f..1946e41 100644
--- a/src/ShellUI.Components/Components/Toast.razor
+++ b/src/ShellUI.Components/Components/Toast.razor
@@ -3,7 +3,7 @@
 @if (IsVisible)
 {
     <div class="@Shell.Cn("fixed z-50 flex max-h-screen w-full flex-col-reverse gap-2 p-4 sm:flex-col md:max-w-[420px]", GetPositionClass())">
-        <div class="@Shell.Cn("pointer-events-auto group relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border border-border p-6 pr-8 shadow-lg transition-all", GetVariantClass(), Class)"
+        <div class="@Shell.Cn("pointer-events-auto group relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border border-border p-6 pr-8 shadow-lg transition-all motion-reduce:transition-none", GetVariantClass(), Class)"
              @attributes="AdditionalAttributes">
             <div class="grid gap-1">
                 @if (!string.IsNullOrEmpty(Title))
diff --git a/src/ShellUI.Components/Components/TypedSelect.razor b/src/ShellUI.Components/Components/TypedSelect.razor
new file mode 100644
index 0000000..b03d077
--- /dev/null
+++ b/src/ShellUI.Components/Components/TypedSelect.razor
@@ -0,0 +1,76 @@
+@namespace ShellUI.Components
+@typeparam TValue
+@using System.Globalization
+
+<div class="relative w-full">
+    <select value="@FormatValue()"
+            @onchange="OnChange"
+            disabled="@Disabled"
+            class="@ComputedClass"
+            @attributes="AdditionalAttributes">
+        @ChildContent
+    </select>
+    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+        <svg class="h-4 w-4 text-foreground/70" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+        </svg>
+    </div>
+</div>
+
+@code {
+    [Parameter] public TValue? Value { get; set; }
+    [Parameter] public EventCallback<TValue?> ValueChanged { get; set; }
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+    [Parameter] public bool Disabled { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+
+    private string ComputedClass => Shell.Cn(
+        "flex h-10 w-full appearance-none rounded-md border border-input bg-background pl-3 pr-9 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        Class
+    );
+
+    // InvariantCulture on IFormattable so decimals/dates round-trip cleanly across a
+    // German user's `0,5` vs an English user's `0.5` (the browser sends whatever the
+    // user's <option value=""> literal was).
+    private string? FormatValue() => Value switch
+    {
+        null => null,
+        IFormattable f => f.ToString(null, CultureInfo.InvariantCulture),
+        _ => Value.ToString()
+    };
+
+    private async Task OnChange(ChangeEventArgs e)
+    {
+        var raw = e.Value?.ToString();
+        if (raw is null)
+        {
+            await ValueChanged.InvokeAsync(default);
+            return;
+        }
+
+        // Unwrap Nullable<T> so switch matches T, not T?.
+        var targetType = Nullable.GetUnderlyingType(typeof(TValue)) ?? typeof(TValue);
+
+        try
+        {
+            object? parsed = targetType switch
+            {
+                _ when targetType == typeof(string) => raw,
+                _ when targetType.IsEnum => string.IsNullOrEmpty(raw) ? null : Enum.Parse(targetType, raw),
+                _ when targetType == typeof(Guid) => string.IsNullOrEmpty(raw) ? Guid.Empty : Guid.Parse(raw),
+                _ when targetType == typeof(bool) => bool.Parse(raw),
+                _ when string.IsNullOrEmpty(raw) => null,
+                _ => Convert.ChangeType(raw, targetType, CultureInfo.InvariantCulture)
+            };
+            await ValueChanged.InvokeAsync(parsed is null ? default : (TValue?)parsed);
+        }
+        catch
+        {
+            // Placeholder <option value=""> and other unparseable values gracefully
+            // resolve to default(TValue) instead of throwing across the render loop.
+            await ValueChanged.InvokeAsync(default);
+        }
+    }
+}

From 199f968c69f20ed3bbc01de67a116e27a76d8bcb Mon Sep 17 00:00:00 2001
From: Shephard Tseisi <shephard@kernel.co.zw>
Date: Thu, 23 Jul 2026 22:29:05 +0200
Subject: [PATCH 04/10] feat: implement dismiss behavior and async disposal in
 various UI components

Enhanced UI components such as Combobox, DatePicker, MultiSelect, and others with a new `CloseOnScroll` parameter to control dropdown dismissal on page scroll, aligning with shadcn/Radix behavior. Implemented async disposal and JavaScript interop for managing dismiss events. Improved DataTable with server-side data handling capabilities, introducing new request and response models for better data management.
---
 .../Templates/ComboboxTemplate.cs             | 74 +++++++++++++--
 .../Templates/CommandTemplate.cs              |  2 +-
 .../Templates/DataPickerTemplate.cs           | 63 ++++++++++++-
 .../Templates/DataTableModelsTemplate.cs      | 16 ++++
 .../Templates/DataTableTemplate.cs            | 93 ++++++++++++++-----
 .../Templates/DatePickerTemplate.cs           | 77 ++++++++++++---
 .../Templates/DateRangePickerTemplate.cs      | 71 ++++++++++++--
 .../Templates/DialogContentTemplate.cs        | 28 +++++-
 .../Templates/DrawerContentTemplate.cs        | 26 ++++++
 .../Templates/MultiSelectTemplate.cs          | 62 ++++++++++++-
 .../Templates/SheetContentTemplate.cs         | 26 ++++++
 .../Templates/ShellUIJsTemplate.cs            | 33 +++++++
 .../Templates/SonnerServiceTemplate.cs        | 51 +++++++++-
 .../Templates/SonnerTemplate.cs               |  4 +-
 .../Templates/StepperStepTemplate.cs          | 12 ++-
 .../Templates/StepperTemplate.cs              |  2 +-
 .../Templates/ToastTemplate.cs                |  2 +-
 .../Templates/TypedSelectTemplate.cs          | 88 ++++++++++++++++++
 18 files changed, 656 insertions(+), 74 deletions(-)
 create mode 100644 src/ShellUI.Templates/Templates/TypedSelectTemplate.cs

diff --git a/src/ShellUI.Templates/Templates/ComboboxTemplate.cs b/src/ShellUI.Templates/Templates/ComboboxTemplate.cs
index e225cb0..36c003e 100644
--- a/src/ShellUI.Templates/Templates/ComboboxTemplate.cs
+++ b/src/ShellUI.Templates/Templates/ComboboxTemplate.cs
@@ -15,6 +15,9 @@ public static class ComboboxTemplate
     };
 
     public static string Content => @"@namespace YourProjectNamespace.Components.UI
+@using Microsoft.JSInterop
+@implements IAsyncDisposable
+@inject IJSRuntime JS
 
 <div class=""@Shell.Cn(""relative"", Class)"" @attributes=""AdditionalAttributes"">
     <button type=""button""
@@ -91,6 +94,9 @@ public static class ComboboxTemplate
     [Parameter] public bool Disabled { get; set; }
     [Parameter] public IEnumerable<string>? Options { get; set; }
     [Parameter] public bool Searchable { get; set; } = true;
+    /// Dismiss the dropdown when the page scrolls. Matches shadcn/Radix behavior.
+    /// Set false to keep the dropdown open across scroll.
+    [Parameter] public bool CloseOnScroll { get; set; }
     [Parameter] public RenderFragment? ChildContent { get; set; }
     [Parameter] public string? Class { get; set; }
     [Parameter(CaptureUnmatchedValues = true)]
@@ -98,23 +104,73 @@ public static class ComboboxTemplate
     
     private bool IsOpen { get; set; }
     private string searchQuery = """";
-    
-    private void Toggle() 
+    private DotNetObjectReference<Combobox>? _selfRef;
+    private readonly string _dismissHandle = Guid.NewGuid().ToString(""N"");
+    private bool _dismissRegistered;
+
+    private async Task Toggle()
     {
-        if (!Disabled)
+        if (Disabled) return;
+        IsOpen = !IsOpen;
+        if (IsOpen)
+        {
+            searchQuery = """";
+            await RegisterDismissAsync();
+        }
+        else
         {
-            IsOpen = !IsOpen;
-            if (IsOpen) searchQuery = """";
+            await UnregisterDismissAsync();
         }
     }
-    
-    private void Close() => IsOpen = false;
-    
+
+    private async Task Close()
+    {
+        IsOpen = false;
+        await UnregisterDismissAsync();
+    }
+
+    [JSInvokable]
+    public async Task OnDismissEvent()
+    {
+        if (IsOpen)
+        {
+            IsOpen = false;
+            await UnregisterDismissAsync();
+            StateHasChanged();
+        }
+    }
+
+    private async Task RegisterDismissAsync()
+    {
+        if (!CloseOnScroll || _dismissRegistered) return;
+        _selfRef ??= DotNetObjectReference.Create(this);
+        try
+        {
+            await JS.InvokeVoidAsync(""ShellUI.onDismissEvents"", _dismissHandle, _selfRef);
+            _dismissRegistered = true;
+        }
+        catch { }
+    }
+
+    private async Task UnregisterDismissAsync()
+    {
+        if (!_dismissRegistered) return;
+        try { await JS.InvokeVoidAsync(""ShellUI.offDismissEvents"", _dismissHandle); } catch { }
+        _dismissRegistered = false;
+    }
+
     public async Task SelectValue(string value)
     {
         Value = value;
-        await ValueChanged.InvokeAsync(value);
         IsOpen = false;
+        await UnregisterDismissAsync();
+        await ValueChanged.InvokeAsync(value);
+    }
+
+    public async ValueTask DisposeAsync()
+    {
+        await UnregisterDismissAsync();
+        _selfRef?.Dispose();
     }
 }
 ";
diff --git a/src/ShellUI.Templates/Templates/CommandTemplate.cs b/src/ShellUI.Templates/Templates/CommandTemplate.cs
index f5b2a88..8b6cf88 100644
--- a/src/ShellUI.Templates/Templates/CommandTemplate.cs
+++ b/src/ShellUI.Templates/Templates/CommandTemplate.cs
@@ -23,7 +23,7 @@ @using Microsoft.JSInterop
     <div class=""fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-0 shadow-lg duration-200 sm:rounded-lg"">
         <!-- Search Input -->
         <div class=""flex items-center border-b px-3"">
-            <svg class=""mr-2 h-4 w-4 shrink-0 opacity-50"" xmlns=""http://www.w3.org/2000/svg"" fill=""none"" viewBox=""0 0 24 24"" stroke=""currentColor"">
+            <svg class=""mr-2 h-4 w-4 shrink-0 text-foreground/70"" xmlns=""http://www.w3.org/2000/svg"" fill=""none"" viewBox=""0 0 24 24"" stroke=""currentColor"">
                 <path stroke-linecap=""round"" stroke-linejoin=""round"" stroke-width=""2"" d=""M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"" />
             </svg>
             <input
diff --git a/src/ShellUI.Templates/Templates/DataPickerTemplate.cs b/src/ShellUI.Templates/Templates/DataPickerTemplate.cs
index baf69fb..9abcb3e 100644
--- a/src/ShellUI.Templates/Templates/DataPickerTemplate.cs
+++ b/src/ShellUI.Templates/Templates/DataPickerTemplate.cs
@@ -14,8 +14,11 @@ public static class DataPickerTemplate
     };
 
     public static string Content => @"@namespace YourProjectNamespace.Components.UI
+@using Microsoft.JSInterop
 @typeparam TItem
 @typeparam TKey where TKey : notnull
+@implements IAsyncDisposable
+@inject IJSRuntime JS
 
 <div class=""@Shell.Cn(""relative"", Class)"" @attributes=""AdditionalAttributes"">
     <button type=""button""
@@ -45,7 +48,7 @@ @typeparam TItem
     {
         <div class=""absolute z-50 mt-1 w-full rounded-md border border-border bg-popover shadow-md animate-in fade-in-0 zoom-in-95"">
             <div class=""flex items-center border-b border-border px-3"">
-                <svg class=""mr-2 h-4 w-4 shrink-0 text-muted-foreground"" fill=""none"" viewBox=""0 0 24 24"" stroke=""currentColor"">
+                <svg class=""mr-2 h-4 w-4 shrink-0 text-foreground/70"" fill=""none"" viewBox=""0 0 24 24"" stroke=""currentColor"">
                     <path stroke-linecap=""round"" stroke-linejoin=""round"" stroke-width=""2"" d=""M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"" />
                 </svg>
                 <input @ref=""_searchInput""
@@ -118,6 +121,9 @@ @typeparam TItem
     [Parameter] public string SearchPlaceholder { get; set; } = ""Search..."";
     [Parameter] public string EmptyText { get; set; } = ""No results found."";
     [Parameter] public bool Disabled { get; set; }
+    /// Dismiss the dropdown when the page scrolls. Matches shadcn/Radix behavior.
+    /// Set false to keep the dropdown open across scroll (useful for infinite-scroll pages).
+    [Parameter] public bool CloseOnScroll { get; set; }
     [Parameter] public string? Class { get; set; }
     [Parameter(CaptureUnmatchedValues = true)]
     public Dictionary<string, object>? AdditionalAttributes { get; set; }
@@ -127,6 +133,9 @@ @typeparam TItem
     private int _highlightedIndex;
     private ElementReference _searchInput;
     private bool _shouldFocus;
+    private DotNetObjectReference<DataPicker<TItem, TKey>>? _selfRef;
+    private readonly string _dismissHandle = Guid.NewGuid().ToString(""N"");
+    private bool _dismissRegistered;
 
     private string DisplayFor(TItem item) => DisplaySelector?.Invoke(item) ?? item?.ToString() ?? """";
     private TKey KeyFor(TItem item) => KeySelector(item);
@@ -139,7 +148,7 @@ private IEnumerable<TItem> Filter()
         return Items.Where(i => DisplayFor(i).Contains(q, StringComparison.OrdinalIgnoreCase));
     }
 
-    private void Toggle()
+    private async Task Toggle()
     {
         if (Disabled) return;
         IsOpen = !IsOpen;
@@ -148,10 +157,49 @@ private void Toggle()
             _searchQuery = """";
             _highlightedIndex = 0;
             _shouldFocus = true;
+            await RegisterDismissAsync();
+        }
+        else
+        {
+            await UnregisterDismissAsync();
+        }
+    }
+
+    private async Task Close()
+    {
+        IsOpen = false;
+        await UnregisterDismissAsync();
+    }
+
+    [JSInvokable]
+    public async Task OnDismissEvent()
+    {
+        if (IsOpen)
+        {
+            IsOpen = false;
+            await UnregisterDismissAsync();
+            StateHasChanged();
         }
     }
 
-    private void Close() => IsOpen = false;
+    private async Task RegisterDismissAsync()
+    {
+        if (!CloseOnScroll || _dismissRegistered) return;
+        _selfRef ??= DotNetObjectReference.Create(this);
+        try
+        {
+            await JS.InvokeVoidAsync(""ShellUI.onDismissEvents"", _dismissHandle, _selfRef);
+            _dismissRegistered = true;
+        }
+        catch { }
+    }
+
+    private async Task UnregisterDismissAsync()
+    {
+        if (!_dismissRegistered) return;
+        try { await JS.InvokeVoidAsync(""ShellUI.offDismissEvents"", _dismissHandle); } catch { }
+        _dismissRegistered = false;
+    }
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
@@ -166,13 +214,14 @@ private async Task SelectItem(TItem item)
     {
         Value = item;
         IsOpen = false;
+        await UnregisterDismissAsync();
         await ValueChanged.InvokeAsync(item);
     }
 
     private async Task OnKeyDown(KeyboardEventArgs e)
     {
         var filtered = Filter().ToList();
-        if (e.Key == ""Escape"") { Close(); return; }
+        if (e.Key == ""Escape"") { await Close(); return; }
         if (e.Key == ""ArrowDown"") { _highlightedIndex = Math.Min(_highlightedIndex + 1, filtered.Count - 1); return; }
         if (e.Key == ""ArrowUp"") { _highlightedIndex = Math.Max(_highlightedIndex - 1, 0); return; }
         if (e.Key == ""Enter"" && filtered.Count > 0)
@@ -181,6 +230,12 @@ private async Task OnKeyDown(KeyboardEventArgs e)
             await SelectItem(filtered[idx]);
         }
     }
+
+    public async ValueTask DisposeAsync()
+    {
+        await UnregisterDismissAsync();
+        _selfRef?.Dispose();
+    }
 }
 ";
 }
diff --git a/src/ShellUI.Templates/Templates/DataTableModelsTemplate.cs b/src/ShellUI.Templates/Templates/DataTableModelsTemplate.cs
index a5b8c38..9988565 100644
--- a/src/ShellUI.Templates/Templates/DataTableModelsTemplate.cs
+++ b/src/ShellUI.Templates/Templates/DataTableModelsTemplate.cs
@@ -41,6 +41,22 @@ public enum SortDirection
     Ascending,
     Descending
 }
+
+// Passed to OnDataRequest when DataTable is in ServerSide mode.
+public class DataTableRequest
+{
+    public int Skip { get; set; }
+    public int Take { get; set; }
+    public string? SortBy { get; set; }
+    public SortDirection SortDirection { get; set; } = SortDirection.None;
+    public string SearchQuery { get; set; } = """";
+}
+
+public class DataTableResponse<TItem>
+{
+    public IEnumerable<TItem> Items { get; set; } = Array.Empty<TItem>();
+    public int TotalCount { get; set; }
+}
 ";
 }
 
diff --git a/src/ShellUI.Templates/Templates/DataTableTemplate.cs b/src/ShellUI.Templates/Templates/DataTableTemplate.cs
index 62c168b..fdc8ec6 100644
--- a/src/ShellUI.Templates/Templates/DataTableTemplate.cs
+++ b/src/ShellUI.Templates/Templates/DataTableTemplate.cs
@@ -55,7 +55,7 @@ @namespace YourProjectNamespace.Components.UI
                     @foreach (var column in Columns)
                     {
                         <th class=""h-12 px-4 text-left align-middle font-medium text-muted-foreground @(column.Sortable ? ""cursor-pointer hover:bg-accent/50"" : """")""
-                            @onclick=""() => { if (column.Sortable) OnSortClicked(column); }"">
+                            @onclick=""async () => { if (column.Sortable) await OnSortClicked(column); }"">
                             <div class=""flex items-center gap-2"">
                                 @column.Header
                                 @if (column.Sortable)
@@ -136,7 +136,7 @@ No results found.
     </div>
 
     <!-- Pagination -->
-    @if (ShowPagination && _filteredItems.Any())
+    @if (ShowPagination && (_filteredItems.Any() || (ServerSide && _serverTotalCount > 0)))
     {
         <div class=""flex flex-col gap-4 px-2 py-4 sm:flex-row sm:items-center sm:justify-between"">
             <div class=""flex-1 text-sm text-muted-foreground"">
@@ -146,7 +146,7 @@ No results found.
                 }
                 else
                 {
-                    @($""Showing {_startIndex} - {_endIndex} of {_filteredItems.Count()} results"")
+                    @($""Showing {_startIndex} - {_endIndex} of {(ServerSide ? _serverTotalCount : _filteredItems.Count())} results"")
                 }
             </div>
             <div class=""flex flex-col gap-4 sm:flex-row sm:items-center sm:space-x-6 lg:space-x-8"">
@@ -160,7 +160,7 @@ No results found.
                             }
                         </select>
                         <div class=""absolute inset-y-0 right-1 flex items-center pointer-events-none"">
-                            <svg class=""h-3 w-3 text-muted-foreground"" xmlns=""http://www.w3.org/2000/svg"" fill=""none"" viewBox=""0 0 24 24"" stroke=""currentColor"">
+                            <svg class=""h-3 w-3 text-foreground/70"" xmlns=""http://www.w3.org/2000/svg"" fill=""none"" viewBox=""0 0 24 24"" stroke=""currentColor"">
                                 <path stroke-linecap=""round"" stroke-linejoin=""round"" stroke-width=""2"" d=""M19 9l-7 7-7-7"" />
                             </svg>
                         </div>
@@ -213,6 +213,16 @@ Page @_currentPage of @_totalPages
     [Parameter]
     public EventCallback<HashSet<TItem>> SelectedItemsChanged { get; set; }
 
+    /// When true, `Items` is ignored and the table calls `OnDataRequest` for each
+    /// filter / sort / page change. Use for datasets too large to materialize client-side.
+    [Parameter]
+    public bool ServerSide { get; set; }
+
+    /// Required when `ServerSide` is true. Receives the current DataTableRequest
+    /// (skip/take/sort/search) and returns the page of items plus total count.
+    [Parameter]
+    public Func<DataTableRequest, Task<DataTableResponse<TItem>>>? OnDataRequest { get; set; }
+
     private string _filterText = """";
     private IEnumerable<TItem> _filteredItems = new List<TItem>();
     private IEnumerable<TItem> _paginatedItems = new List<TItem>();
@@ -222,11 +232,49 @@ Page @_currentPage of @_totalPages
     private int _startIndex = 1;
     private int _endIndex = 1;
     private int _pageSize = 10;
+    private int _serverTotalCount = 0;
     private TItem? _openActionsItem = default(TItem);
 
-    protected override void OnParametersSet()
+    protected override async Task OnParametersSetAsync()
+    {
+        await RefreshAsync();
+    }
+
+    private async Task RefreshAsync()
+    {
+        if (ServerSide && OnDataRequest is not null)
+        {
+            await LoadServerPageAsync();
+        }
+        else
+        {
+            UpdateFilteredItems();
+        }
+    }
+
+    private async Task LoadServerPageAsync()
     {
-        UpdateFilteredItems();
+        var sortColumn = Columns.FirstOrDefault(c => c.SortDirection != SortDirection.None);
+        var request = new DataTableRequest
+        {
+            Skip = (_currentPage - 1) * _pageSize,
+            Take = _pageSize,
+            SortBy = sortColumn?.PropertyName,
+            SortDirection = sortColumn?.SortDirection ?? SortDirection.None,
+            SearchQuery = _filterText ?? """"
+        };
+
+        var response = await OnDataRequest!(request);
+
+        _paginatedItems = response.Items;
+        _serverTotalCount = response.TotalCount;
+        _totalPages = Math.Max(1, (int)Math.Ceiling(_serverTotalCount / (double)_pageSize));
+        _currentPage = Math.Min(_currentPage, _totalPages);
+        _startIndex = _serverTotalCount == 0 ? 0 : (_currentPage - 1) * _pageSize + 1;
+        _endIndex = Math.Min(_currentPage * _pageSize, _serverTotalCount);
+        _filteredItems = _paginatedItems;
+
+        StateHasChanged();
     }
 
     private void UpdateFilteredItems()
@@ -235,9 +283,8 @@ private void UpdateFilteredItems()
         _filteredItems = string.IsNullOrWhiteSpace(_filterText)
             ? Items
             : Items.Where(item =>
-                Columns.Any(col => 
+                Columns.Any(col =>
                 {
-                    // Simple text search - check if any property contains the filter text
                     var property = typeof(TItem).GetProperty(col.PropertyName);
                     if (property != null)
                     {
@@ -265,31 +312,29 @@ private void UpdateFilteredItems()
         StateHasChanged();
     }
 
-    private void OnFilterInput(ChangeEventArgs e)
+    private async Task OnFilterInput(ChangeEventArgs e)
     {
         _filterText = e.Value?.ToString() ?? """";
-        _currentPage = 1; // Reset to first page
-        UpdateFilteredItems();
+        _currentPage = 1;
+        await RefreshAsync();
     }
 
-    private void OnFilterChanged(string value)
+    private async Task OnFilterChanged(string value)
     {
         _filterText = value;
-        _currentPage = 1; // Reset to first page
-        UpdateFilteredItems();
+        _currentPage = 1;
+        await RefreshAsync();
     }
 
-    private void OnSortClicked(DataTableColumn<TItem> column)
+    private async Task OnSortClicked(DataTableColumn<TItem> column)
     {
         if (!column.Sortable) return;
 
-        // Reset other columns
         foreach (var col in Columns.Where(c => c != column))
         {
             col.SortDirection = SortDirection.None;
         }
 
-        // Cycle sort direction
         column.SortDirection = column.SortDirection switch
         {
             SortDirection.None => SortDirection.Ascending,
@@ -298,7 +343,7 @@ private void OnSortClicked(DataTableColumn<TItem> column)
             _ => SortDirection.Ascending
         };
 
-        UpdateFilteredItems();
+        await RefreshAsync();
     }
 
     private void OnSelectAllChanged(bool selected)
@@ -333,31 +378,31 @@ private void OnItemSelectionChanged(TItem item, bool selected)
 
     private bool IsSelected(TItem item) => _selectedItems.Contains(item);
 
-    private void OnPageSizeChanged(ChangeEventArgs e)
+    private async Task OnPageSizeChanged(ChangeEventArgs e)
     {
         if (int.TryParse(e.Value?.ToString(), out var size))
         {
             _pageSize = size;
             _currentPage = 1;
-            UpdateFilteredItems();
+            await RefreshAsync();
         }
     }
 
-    private void OnPreviousPage()
+    private async Task OnPreviousPage()
     {
         if (_currentPage > 1)
         {
             _currentPage--;
-            UpdateFilteredItems();
+            await RefreshAsync();
         }
     }
 
-    private void OnNextPage()
+    private async Task OnNextPage()
     {
         if (_currentPage < _totalPages)
         {
             _currentPage++;
-            UpdateFilteredItems();
+            await RefreshAsync();
         }
     }
 
diff --git a/src/ShellUI.Templates/Templates/DatePickerTemplate.cs b/src/ShellUI.Templates/Templates/DatePickerTemplate.cs
index 5b68ca7..c9ae0cd 100644
--- a/src/ShellUI.Templates/Templates/DatePickerTemplate.cs
+++ b/src/ShellUI.Templates/Templates/DatePickerTemplate.cs
@@ -16,20 +16,23 @@ public class DatePickerTemplate
     };
 
     public static string Content => @"@namespace YourProjectNamespace.Components.UI
+@using Microsoft.JSInterop
+@implements IAsyncDisposable
+@inject IJSRuntime JS
 
 <div class=""@(""relative "" + ClassName)"" @attributes=""AdditionalAttributes"">
     <button type=""button""
             @onclick=""ToggleCalendar""
             disabled=""@Disabled""
-            class=""@(""flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 "" + (Disabled ? ""opacity-50 cursor-not-allowed"" : """"))"">
-        <span class=""@(SelectedDate == null ? ""text-muted-foreground"" : """")"">
+            class=""@(""flex h-10 w-full items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 "" + (Disabled ? ""opacity-50 cursor-not-allowed"" : """"))"">
+        <span class=""@(""flex-1 text-left "" + (SelectedDate == null ? ""text-muted-foreground"" : """"))"">
             @(SelectedDate?.ToString(""MMM dd, yyyy"") ?? Placeholder)
         </span>
-        <div class=""flex items-center gap-1"">
+        <div class=""ml-auto flex items-center gap-1 shrink-0"">
             @if (AllowClear && SelectedDate.HasValue)
             {
-                <button type=""button"" 
-                        @onclick=""ClearDate"" 
+                <button type=""button""
+                        @onclick=""ClearDate""
                         @onclick:stopPropagation=""true""
                         class=""p-0.5 hover:bg-accent rounded transition-colors"">
                     <svg class=""h-3.5 w-3.5 text-muted-foreground hover:text-foreground"" fill=""none"" viewBox=""0 0 24 24"" stroke=""currentColor"">
@@ -37,7 +40,7 @@ public class DatePickerTemplate
                     </svg>
                 </button>
             }
-            <svg class=""h-4 w-4 text-muted-foreground"" fill=""none"" viewBox=""0 0 24 24"" stroke=""currentColor"">
+            <svg class=""h-4 w-4 text-foreground/70"" fill=""none"" viewBox=""0 0 24 24"" stroke=""currentColor"">
                 <path stroke-linecap=""round"" stroke-linejoin=""round"" stroke-width=""2"" d=""M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"" />
             </svg>
         </div>
@@ -102,7 +105,12 @@ public class DatePickerTemplate
     
     [Parameter]
     public bool Disabled { get; set; }
-    
+
+    /// Dismiss the calendar when the page scrolls. Matches shadcn/Radix behavior.
+    /// Set false to keep the calendar open across scroll.
+    [Parameter]
+    public bool CloseOnScroll { get; set; }
+
     [Parameter]
     public string ClassName { get; set; } = """";
     
@@ -111,24 +119,71 @@ public class DatePickerTemplate
     
     private bool _isOpen;
     private DateTime _currentMonth = DateTime.Now;
-    
-    private void ToggleCalendar() => _isOpen = !_isOpen;
+    private DotNetObjectReference<DatePicker>? _selfRef;
+    private readonly string _dismissHandle = Guid.NewGuid().ToString(""N"");
+    private bool _dismissRegistered;
+
+    private async Task ToggleCalendar()
+    {
+        _isOpen = !_isOpen;
+        if (_isOpen) await RegisterDismissAsync();
+        else await UnregisterDismissAsync();
+    }
+
+    [JSInvokable]
+    public async Task OnDismissEvent()
+    {
+        if (_isOpen)
+        {
+            _isOpen = false;
+            await UnregisterDismissAsync();
+            StateHasChanged();
+        }
+    }
+
+    private async Task RegisterDismissAsync()
+    {
+        if (!CloseOnScroll || _dismissRegistered) return;
+        _selfRef ??= DotNetObjectReference.Create(this);
+        try
+        {
+            await JS.InvokeVoidAsync(""ShellUI.onDismissEvents"", _dismissHandle, _selfRef);
+            _dismissRegistered = true;
+        }
+        catch { }
+    }
+
+    private async Task UnregisterDismissAsync()
+    {
+        if (!_dismissRegistered) return;
+        try { await JS.InvokeVoidAsync(""ShellUI.offDismissEvents"", _dismissHandle); } catch { }
+        _dismissRegistered = false;
+    }
+
     private void PreviousMonth() => _currentMonth = _currentMonth.AddMonths(-1);
     private void NextMonth() => _currentMonth = _currentMonth.AddMonths(1);
-    
+
     private async Task SelectDate(DateTime date)
     {
         SelectedDate = date;
         _isOpen = false;
+        await UnregisterDismissAsync();
         await SelectedDateChanged.InvokeAsync(date);
     }
-    
+
     private async Task ClearDate()
     {
         SelectedDate = null;
         _isOpen = false;
+        await UnregisterDismissAsync();
         await SelectedDateChanged.InvokeAsync(null);
     }
+
+    public async ValueTask DisposeAsync()
+    {
+        await UnregisterDismissAsync();
+        _selfRef?.Dispose();
+    }
     
     private List<DateTime?> GetCalendarDays()
     {
diff --git a/src/ShellUI.Templates/Templates/DateRangePickerTemplate.cs b/src/ShellUI.Templates/Templates/DateRangePickerTemplate.cs
index c5e6bdc..d26df79 100644
--- a/src/ShellUI.Templates/Templates/DateRangePickerTemplate.cs
+++ b/src/ShellUI.Templates/Templates/DateRangePickerTemplate.cs
@@ -16,20 +16,23 @@ public class DateRangePickerTemplate
     };
 
     public static string Content => @"@namespace YourProjectNamespace.Components.UI
+@using Microsoft.JSInterop
+@implements IAsyncDisposable
+@inject IJSRuntime JS
 
 <div class=""@(""relative "" + ClassName)"" @attributes=""AdditionalAttributes"">
     <button type=""button""
             @onclick=""ToggleCalendar""
             disabled=""@Disabled""
-            class=""@(""flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 "" + (Disabled ? ""opacity-50 cursor-not-allowed"" : """"))"">
-        <span class=""@(StartDate == null && EndDate == null ? ""text-muted-foreground"" : """")"">
+            class=""@(""flex h-10 w-full items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 "" + (Disabled ? ""opacity-50 cursor-not-allowed"" : """"))"">
+        <span class=""@(""flex-1 text-left "" + (StartDate == null && EndDate == null ? ""text-muted-foreground"" : """"))"">
             @GetDisplayText()
         </span>
-        <div class=""flex items-center gap-1"">
+        <div class=""ml-auto flex items-center gap-1 shrink-0"">
             @if (AllowClear && (StartDate.HasValue || EndDate.HasValue))
             {
-                <button type=""button"" 
-                        @onclick=""ClearRange"" 
+                <button type=""button""
+                        @onclick=""ClearRange""
                         @onclick:stopPropagation=""true""
                         class=""p-0.5 hover:bg-accent rounded transition-colors"">
                     <svg class=""h-3.5 w-3.5 text-muted-foreground hover:text-foreground"" fill=""none"" viewBox=""0 0 24 24"" stroke=""currentColor"">
@@ -37,7 +40,7 @@ public class DateRangePickerTemplate
                     </svg>
                 </button>
             }
-            <svg class=""h-4 w-4 text-muted-foreground"" fill=""none"" viewBox=""0 0 24 24"" stroke=""currentColor"">
+            <svg class=""h-4 w-4 text-foreground/70"" fill=""none"" viewBox=""0 0 24 24"" stroke=""currentColor"">
                 <path stroke-linecap=""round"" stroke-linejoin=""round"" stroke-width=""2"" d=""M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"" />
             </svg>
         </div>
@@ -108,7 +111,12 @@ public class DateRangePickerTemplate
     
     [Parameter]
     public bool Disabled { get; set; }
-    
+
+    /// Dismiss the calendar when the page scrolls. Matches shadcn/Radix behavior.
+    /// Set false to keep the calendar open across scroll.
+    [Parameter]
+    public bool CloseOnScroll { get; set; }
+
     [Parameter]
     public string ClassName { get; set; } = """";
     
@@ -118,6 +126,9 @@ public class DateRangePickerTemplate
     private bool _isOpen;
     private DateTime _currentMonth = DateTime.Now;
     private bool _selectingStart = true;
+    private DotNetObjectReference<DateRangePicker>? _selfRef;
+    private readonly string _dismissHandle = Guid.NewGuid().ToString(""N"");
+    private bool _dismissRegistered;
     
     private string GetDisplayText()
     {
@@ -155,7 +166,43 @@ private string GetDateButtonClass(DateTime date)
         return baseClass;
     }
     
-    private void ToggleCalendar() => _isOpen = !_isOpen;
+    private async Task ToggleCalendar()
+    {
+        _isOpen = !_isOpen;
+        if (_isOpen) await RegisterDismissAsync();
+        else await UnregisterDismissAsync();
+    }
+
+    [JSInvokable]
+    public async Task OnDismissEvent()
+    {
+        if (_isOpen)
+        {
+            _isOpen = false;
+            await UnregisterDismissAsync();
+            StateHasChanged();
+        }
+    }
+
+    private async Task RegisterDismissAsync()
+    {
+        if (!CloseOnScroll || _dismissRegistered) return;
+        _selfRef ??= DotNetObjectReference.Create(this);
+        try
+        {
+            await JS.InvokeVoidAsync(""ShellUI.onDismissEvents"", _dismissHandle, _selfRef);
+            _dismissRegistered = true;
+        }
+        catch { }
+    }
+
+    private async Task UnregisterDismissAsync()
+    {
+        if (!_dismissRegistered) return;
+        try { await JS.InvokeVoidAsync(""ShellUI.offDismissEvents"", _dismissHandle); } catch { }
+        _dismissRegistered = false;
+    }
+
     private void PreviousMonth() => _currentMonth = _currentMonth.AddMonths(-1);
     private void NextMonth() => _currentMonth = _currentMonth.AddMonths(1);
     
@@ -206,9 +253,15 @@ private async Task ClearRange()
         
         for (int i = 0; i < startDayOfWeek; i++) days.Add(null);
         for (int day = 1; day <= lastDay.Day; day++) days.Add(new DateTime(_currentMonth.Year, _currentMonth.Month, day));
-        
+
         return days;
     }
+
+    public async ValueTask DisposeAsync()
+    {
+        await UnregisterDismissAsync();
+        _selfRef?.Dispose();
+    }
 }
 ";
 }
diff --git a/src/ShellUI.Templates/Templates/DialogContentTemplate.cs b/src/ShellUI.Templates/Templates/DialogContentTemplate.cs
index 596a543..d09a7c5 100644
--- a/src/ShellUI.Templates/Templates/DialogContentTemplate.cs
+++ b/src/ShellUI.Templates/Templates/DialogContentTemplate.cs
@@ -16,6 +16,9 @@ public static class DialogContentTemplate
     };
 
     public static string Content => @"@namespace YourProjectNamespace.Components.UI
+@using Microsoft.JSInterop
+@implements IAsyncDisposable
+@inject IJSRuntime JS
 
 @if (Dialog?.Open == true)
 {
@@ -36,6 +39,8 @@ public static class DialogContentTemplate
     [Parameter(CaptureUnmatchedValues = true)]
     public Dictionary<string, object>? AdditionalAttributes { get; set; }
 
+    private bool _isLocked;
+
     private async Task Close()
     {
         if (Dialog != null)
@@ -43,8 +48,27 @@ private async Task Close()
             await Dialog.SetOpen(false);
         }
     }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        var shouldBeLocked = Dialog?.Open == true;
+        if (shouldBeLocked && !_isLocked)
+        {
+            try { await JS.InvokeVoidAsync(""ShellUI.lockBodyScroll""); _isLocked = true; } catch { }
+        }
+        else if (!shouldBeLocked && _isLocked)
+        {
+            try { await JS.InvokeVoidAsync(""ShellUI.unlockBodyScroll""); _isLocked = false; } catch { }
+        }
+    }
+
+    public async ValueTask DisposeAsync()
+    {
+        if (_isLocked)
+        {
+            try { await JS.InvokeVoidAsync(""ShellUI.unlockBodyScroll""); } catch { }
+        }
+    }
 }
 ";
 }
-
-
diff --git a/src/ShellUI.Templates/Templates/DrawerContentTemplate.cs b/src/ShellUI.Templates/Templates/DrawerContentTemplate.cs
index d68f652..256b87d 100644
--- a/src/ShellUI.Templates/Templates/DrawerContentTemplate.cs
+++ b/src/ShellUI.Templates/Templates/DrawerContentTemplate.cs
@@ -18,6 +18,9 @@ public class DrawerContentTemplate
 
     public static string Content => @"@namespace YourProjectNamespace.Components.UI
 @using YourProjectNamespace.Components.UI.Variants
+@using Microsoft.JSInterop
+@implements IAsyncDisposable
+@inject IJSRuntime JS
 
 @if (Parent?.Open == true)
 {
@@ -37,10 +40,33 @@ @using YourProjectNamespace.Components.UI.Variants
     [Parameter(CaptureUnmatchedValues = true)]
     public Dictionary<string, object>? AdditionalAttributes { get; set; }
 
+    private bool _isLocked;
+
     private async Task Close()
     {
         if (Parent != null) await Parent.SetOpen(false);
     }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        var shouldBeLocked = Parent?.Open == true;
+        if (shouldBeLocked && !_isLocked)
+        {
+            try { await JS.InvokeVoidAsync(""ShellUI.lockBodyScroll""); _isLocked = true; } catch { }
+        }
+        else if (!shouldBeLocked && _isLocked)
+        {
+            try { await JS.InvokeVoidAsync(""ShellUI.unlockBodyScroll""); _isLocked = false; } catch { }
+        }
+    }
+
+    public async ValueTask DisposeAsync()
+    {
+        if (_isLocked)
+        {
+            try { await JS.InvokeVoidAsync(""ShellUI.unlockBodyScroll""); } catch { }
+        }
+    }
 }
 ";
 }
diff --git a/src/ShellUI.Templates/Templates/MultiSelectTemplate.cs b/src/ShellUI.Templates/Templates/MultiSelectTemplate.cs
index 468ee8d..1221963 100644
--- a/src/ShellUI.Templates/Templates/MultiSelectTemplate.cs
+++ b/src/ShellUI.Templates/Templates/MultiSelectTemplate.cs
@@ -14,8 +14,11 @@ public static class MultiSelectTemplate
     };
 
     public static string Content => @"@namespace YourProjectNamespace.Components.UI
+@using Microsoft.JSInterop
 @typeparam TItem
 @typeparam TKey where TKey : notnull
+@implements IAsyncDisposable
+@inject IJSRuntime JS
 
 <div class=""@Shell.Cn(""relative"", Class)"" @attributes=""AdditionalAttributes"">
     <button type=""button""
@@ -63,7 +66,7 @@ @typeparam TItem
     {
         <div class=""absolute z-50 mt-1 w-full rounded-md border border-border bg-popover shadow-md animate-in fade-in-0 zoom-in-95"">
             <div class=""flex items-center border-b border-border px-3"">
-                <svg class=""mr-2 h-4 w-4 shrink-0 text-muted-foreground"" fill=""none"" viewBox=""0 0 24 24"" stroke=""currentColor"">
+                <svg class=""mr-2 h-4 w-4 shrink-0 text-foreground/70"" fill=""none"" viewBox=""0 0 24 24"" stroke=""currentColor"">
                     <path stroke-linecap=""round"" stroke-linejoin=""round"" stroke-width=""2"" d=""M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"" />
                 </svg>
                 <input @ref=""_searchInput""
@@ -136,6 +139,9 @@ @typeparam TItem
     [Parameter] public string SearchPlaceholder { get; set; } = ""Search..."";
     [Parameter] public string EmptyText { get; set; } = ""No results found."";
     [Parameter] public bool Disabled { get; set; }
+    /// Dismiss the dropdown when the page scrolls. Matches shadcn/Radix behavior.
+    /// Set false to keep the dropdown open across scroll (useful for infinite-scroll pages).
+    [Parameter] public bool CloseOnScroll { get; set; }
     [Parameter] public string? Class { get; set; }
     [Parameter(CaptureUnmatchedValues = true)]
     public Dictionary<string, object>? AdditionalAttributes { get; set; }
@@ -145,6 +151,9 @@ @typeparam TItem
     private int _highlightedIndex;
     private ElementReference _searchInput;
     private bool _shouldFocus;
+    private DotNetObjectReference<MultiSelect<TItem, TKey>>? _selfRef;
+    private readonly string _dismissHandle = Guid.NewGuid().ToString(""N"");
+    private bool _dismissRegistered;
 
     private string DisplayFor(TItem item) => DisplaySelector?.Invoke(item) ?? item?.ToString() ?? """";
     private TKey KeyFor(TItem item) => KeySelector(item);
@@ -157,7 +166,7 @@ private IEnumerable<TItem> Filter()
         return Items.Where(i => DisplayFor(i).Contains(q, StringComparison.OrdinalIgnoreCase));
     }
 
-    private void Toggle()
+    private async Task Toggle()
     {
         if (Disabled) return;
         IsOpen = !IsOpen;
@@ -166,10 +175,49 @@ private void Toggle()
             _searchQuery = """";
             _highlightedIndex = 0;
             _shouldFocus = true;
+            await RegisterDismissAsync();
+        }
+        else
+        {
+            await UnregisterDismissAsync();
         }
     }
 
-    private void Close() => IsOpen = false;
+    private async Task Close()
+    {
+        IsOpen = false;
+        await UnregisterDismissAsync();
+    }
+
+    [JSInvokable]
+    public async Task OnDismissEvent()
+    {
+        if (IsOpen)
+        {
+            IsOpen = false;
+            await UnregisterDismissAsync();
+            StateHasChanged();
+        }
+    }
+
+    private async Task RegisterDismissAsync()
+    {
+        if (!CloseOnScroll || _dismissRegistered) return;
+        _selfRef ??= DotNetObjectReference.Create(this);
+        try
+        {
+            await JS.InvokeVoidAsync(""ShellUI.onDismissEvents"", _dismissHandle, _selfRef);
+            _dismissRegistered = true;
+        }
+        catch { }
+    }
+
+    private async Task UnregisterDismissAsync()
+    {
+        if (!_dismissRegistered) return;
+        try { await JS.InvokeVoidAsync(""ShellUI.offDismissEvents"", _dismissHandle); } catch { }
+        _dismissRegistered = false;
+    }
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
@@ -201,7 +249,7 @@ private async Task RemoveItem(TItem item)
     private async Task OnKeyDown(KeyboardEventArgs e)
     {
         var filtered = Filter().ToList();
-        if (e.Key == ""Escape"") { Close(); return; }
+        if (e.Key == ""Escape"") { await Close(); return; }
         if (e.Key == ""ArrowDown"") { _highlightedIndex = Math.Min(_highlightedIndex + 1, filtered.Count - 1); return; }
         if (e.Key == ""ArrowUp"") { _highlightedIndex = Math.Max(_highlightedIndex - 1, 0); return; }
         if (e.Key == ""Enter"" && filtered.Count > 0)
@@ -210,6 +258,12 @@ private async Task OnKeyDown(KeyboardEventArgs e)
             await ToggleItem(filtered[idx]);
         }
     }
+
+    public async ValueTask DisposeAsync()
+    {
+        await UnregisterDismissAsync();
+        _selfRef?.Dispose();
+    }
 }
 ";
 }
diff --git a/src/ShellUI.Templates/Templates/SheetContentTemplate.cs b/src/ShellUI.Templates/Templates/SheetContentTemplate.cs
index 1ffb0b1..0c4c7f8 100644
--- a/src/ShellUI.Templates/Templates/SheetContentTemplate.cs
+++ b/src/ShellUI.Templates/Templates/SheetContentTemplate.cs
@@ -18,6 +18,9 @@ public class SheetContentTemplate
 
     public static string Content => @"@namespace YourProjectNamespace.Components.UI
 @using YourProjectNamespace.Components.UI.Variants
+@using Microsoft.JSInterop
+@implements IAsyncDisposable
+@inject IJSRuntime JS
 
 @if (Parent?.Open == true)
 {
@@ -36,10 +39,33 @@ @using YourProjectNamespace.Components.UI.Variants
     [Parameter(CaptureUnmatchedValues = true)]
     public Dictionary<string, object>? AdditionalAttributes { get; set; }
 
+    private bool _isLocked;
+
     private async Task Close()
     {
         if (Parent != null) await Parent.SetOpen(false);
     }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        var shouldBeLocked = Parent?.Open == true;
+        if (shouldBeLocked && !_isLocked)
+        {
+            try { await JS.InvokeVoidAsync(""ShellUI.lockBodyScroll""); _isLocked = true; } catch { }
+        }
+        else if (!shouldBeLocked && _isLocked)
+        {
+            try { await JS.InvokeVoidAsync(""ShellUI.unlockBodyScroll""); _isLocked = false; } catch { }
+        }
+    }
+
+    public async ValueTask DisposeAsync()
+    {
+        if (_isLocked)
+        {
+            try { await JS.InvokeVoidAsync(""ShellUI.unlockBodyScroll""); } catch { }
+        }
+    }
 }
 ";
 }
diff --git a/src/ShellUI.Templates/Templates/ShellUIJsTemplate.cs b/src/ShellUI.Templates/Templates/ShellUIJsTemplate.cs
index c4185d2..91d37db 100644
--- a/src/ShellUI.Templates/Templates/ShellUIJsTemplate.cs
+++ b/src/ShellUI.Templates/Templates/ShellUIJsTemplate.cs
@@ -119,6 +119,39 @@ function handleDrop(e) {
             window.removeEventListener("keydown", listener);
             this._shortcutHandlers.delete(handle);
         }
+    },
+
+    _scrollLockCount: 0,
+    _originalOverflow: "",
+    lockBodyScroll: function () {
+        if (this._scrollLockCount === 0) {
+            this._originalOverflow = document.body.style.overflow;
+            document.body.style.overflow = "hidden";
+        }
+        this._scrollLockCount++;
+    },
+    unlockBodyScroll: function () {
+        if (this._scrollLockCount === 0) return;
+        this._scrollLockCount--;
+        if (this._scrollLockCount === 0) {
+            document.body.style.overflow = this._originalOverflow;
+        }
+    },
+
+    _dismissHandlers: new Map(),
+    onDismissEvents: function (handle, dotNetRef) {
+        const listener = () => dotNetRef.invokeMethodAsync("OnDismissEvent");
+        window.addEventListener("scroll", listener);
+        window.addEventListener("resize", listener);
+        this._dismissHandlers.set(handle, listener);
+    },
+    offDismissEvents: function (handle) {
+        const listener = this._dismissHandlers.get(handle);
+        if (listener) {
+            window.removeEventListener("scroll", listener);
+            window.removeEventListener("resize", listener);
+            this._dismissHandlers.delete(handle);
+        }
     }
 };
 """;
diff --git a/src/ShellUI.Templates/Templates/SonnerServiceTemplate.cs b/src/ShellUI.Templates/Templates/SonnerServiceTemplate.cs
index 07406fe..1df6ea9 100644
--- a/src/ShellUI.Templates/Templates/SonnerServiceTemplate.cs
+++ b/src/ShellUI.Templates/Templates/SonnerServiceTemplate.cs
@@ -23,13 +23,20 @@ public class SonnerToastItem
     public string Message { get; set; } = """";
     public string? Description { get; set; }
     public string Variant { get; set; } = ""default"";
+    // Zero or negative disables auto-dismiss (toast stays until manually closed).
+    public TimeSpan Duration { get; set; } = TimeSpan.FromSeconds(4);
     public DateTime CreatedAt { get; } = DateTime.UtcNow;
 }
 
 public interface ISonnerService
 {
     IReadOnlyList<SonnerToastItem> Toasts { get; }
-    void Show(string message, string? description = null, string variant = ""default"");
+    void Show(string message, string? description = null, string variant = ""default"", TimeSpan? duration = null);
+    void Success(string message, string? description = null, TimeSpan? duration = null);
+    void Error(string message, string? description = null, TimeSpan? duration = null);
+    void Info(string message, string? description = null, TimeSpan? duration = null);
+    void Warning(string message, string? description = null, TimeSpan? duration = null);
+    void Remove(string id);
 }
 
 public class SonnerService : ISonnerService
@@ -38,16 +45,50 @@ public class SonnerService : ISonnerService
     public IReadOnlyList<SonnerToastItem> Toasts => _toasts;
     public event Action? OnChange;
 
-    public void Show(string message, string? description = null, string variant = ""default"")
+    public void Show(string message, string? description = null, string variant = ""default"", TimeSpan? duration = null)
     {
-        _toasts.Add(new SonnerToastItem { Message = message, Description = description, Variant = variant });
+        var toast = new SonnerToastItem
+        {
+            Message = message,
+            Description = description,
+            Variant = variant,
+            Duration = duration ?? TimeSpan.FromSeconds(4)
+        };
+        _toasts.Add(toast);
         OnChange?.Invoke();
+
+        if (toast.Duration > TimeSpan.Zero)
+        {
+            _ = AutoDismissAsync(toast.Id, toast.Duration);
+        }
     }
 
+    public void Success(string message, string? description = null, TimeSpan? duration = null)
+        => Show(message, description, ""success"", duration);
+
+    public void Error(string message, string? description = null, TimeSpan? duration = null)
+        => Show(message, description, ""destructive"", duration);
+
+    public void Info(string message, string? description = null, TimeSpan? duration = null)
+        => Show(message, description, ""info"", duration);
+
+    public void Warning(string message, string? description = null, TimeSpan? duration = null)
+        => Show(message, description, ""warning"", duration);
+
     public void Remove(string id)
     {
-        _toasts.RemoveAll(t => t.Id == id);
-        OnChange?.Invoke();
+        var removed = _toasts.RemoveAll(t => t.Id == id);
+        if (removed > 0) OnChange?.Invoke();
+    }
+
+    private async Task AutoDismissAsync(string id, TimeSpan delay)
+    {
+        try
+        {
+            await Task.Delay(delay);
+            Remove(id);
+        }
+        catch { }
     }
 }
 ";
diff --git a/src/ShellUI.Templates/Templates/SonnerTemplate.cs b/src/ShellUI.Templates/Templates/SonnerTemplate.cs
index f9bdb71..556e71c 100644
--- a/src/ShellUI.Templates/Templates/SonnerTemplate.cs
+++ b/src/ShellUI.Templates/Templates/SonnerTemplate.cs
@@ -32,7 +32,7 @@ @inject SonnerService SonnerService
         var stackClass = i > 0 ? (IsTop ? ""-mt-20 group-hover:mt-0"" : ""-mb-20 group-hover:mb-0"") : """";
         <div @key=""toast.Id""
              style=""z-index: @(i + 1)""
-             class=""@stackClass @GetToastClasses(toast.Variant) pointer-events-auto relative flex min-w-0 w-full items-center gap-3 overflow-hidden rounded-lg p-4 shadow-lg transition-all duration-300 animate-in fade-in-0 @SonnerVariants.GetToastAnimation(Position) shrink-0"">
+             class=""@stackClass @GetToastClasses(toast.Variant) pointer-events-auto relative flex min-w-0 w-full items-center gap-3 overflow-hidden rounded-lg p-4 shadow-lg transition-all duration-300 motion-reduce:transition-none animate-in fade-in-0 motion-reduce:animate-none @SonnerVariants.GetToastAnimation(Position) shrink-0"">
             <div class=""grid flex-1 gap-1"">
                 @if (!string.IsNullOrEmpty(toast.Message))
                 {
@@ -69,6 +69,8 @@ @inject SonnerService SonnerService
     {
         ""destructive"" => ""bg-destructive text-destructive-foreground"",
         ""success"" => ""bg-green-500/20 text-green-700 dark:bg-green-900/30 dark:text-green-100"",
+        ""info"" => ""bg-blue-500/20 text-blue-700 dark:bg-blue-900/30 dark:text-blue-100"",
+        ""warning"" => ""bg-yellow-500/20 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-100"",
         _ => ""bg-background text-foreground""
     };
 }
diff --git a/src/ShellUI.Templates/Templates/StepperStepTemplate.cs b/src/ShellUI.Templates/Templates/StepperStepTemplate.cs
index 8360502..7d2ab02 100644
--- a/src/ShellUI.Templates/Templates/StepperStepTemplate.cs
+++ b/src/ShellUI.Templates/Templates/StepperStepTemplate.cs
@@ -21,13 +21,21 @@ public static class StepperStepTemplate
     var isActive = ParentStepper?.CurrentStep == index;
     var isCompleted = ParentStepper != null && index < ParentStepper.HighestStepReached;
     var isClickable = ParentStepper != null && index <= ParentStepper.HighestStepReached;
+
+    string stateClass;
+    if (isActive)
+        stateClass = ""border-primary bg-primary text-primary-foreground ring-2 ring-primary/20 ring-offset-2 ring-offset-background"";
+    else if (isCompleted)
+        stateClass = ""border-primary bg-primary/10 text-primary"";
+    else
+        stateClass = ""border-muted bg-background text-muted-foreground"";
 }
 <div class=""flex flex-col items-center relative"">
     <button type=""button""
-            class=""@Shell.Cn(""flex h-10 w-10 items-center justify-center rounded-full border-2 text-sm font-medium transition-colors"", isCompleted ? ""border-primary bg-primary text-primary-foreground"" : isActive ? ""border-primary bg-background text-primary"" : ""border-muted bg-background text-muted-foreground"", isClickable ? ""cursor-pointer hover:border-primary/50"" : ""cursor-not-allowed"")""
+            class=""@Shell.Cn(""flex h-10 w-10 items-center justify-center rounded-full border-2 text-sm font-medium transition-colors"", stateClass, isClickable ? ""cursor-pointer"" : ""cursor-not-allowed"", isClickable && !isActive ? ""hover:border-primary/50"" : """")""
             disabled=""@(!isClickable)""
             @onclick=""async () => { if (ParentStepper != null) await ParentStepper.GoToStepAsync(index); }"">
-        @if (isCompleted)
+        @if (isCompleted && !isActive)
         {
             <svg class=""h-4 w-4"" xmlns=""http://www.w3.org/2000/svg"" fill=""none"" viewBox=""0 0 24 24"" stroke=""currentColor"">
                 <path stroke-linecap=""round"" stroke-linejoin=""round"" stroke-width=""2"" d=""M5 13l4 4L19 7"" />
diff --git a/src/ShellUI.Templates/Templates/StepperTemplate.cs b/src/ShellUI.Templates/Templates/StepperTemplate.cs
index c5141ce..1bbe0ae 100644
--- a/src/ShellUI.Templates/Templates/StepperTemplate.cs
+++ b/src/ShellUI.Templates/Templates/StepperTemplate.cs
@@ -18,7 +18,7 @@ public static class StepperTemplate
     public const string Content = """
 @namespace YourProjectNamespace.Components.UI
 
-<CascadingValue Value="this" IsFixed="true">
+<CascadingValue Value="this">
     <div class="@Shell.Cn("w-full", Class)">
         @ChildContent
         @if (ShowNavigation)
diff --git a/src/ShellUI.Templates/Templates/ToastTemplate.cs b/src/ShellUI.Templates/Templates/ToastTemplate.cs
index 9a76fe4..506d5e6 100644
--- a/src/ShellUI.Templates/Templates/ToastTemplate.cs
+++ b/src/ShellUI.Templates/Templates/ToastTemplate.cs
@@ -22,7 +22,7 @@ @implements IAsyncDisposable
 @if (IsVisible)
 {
     <div class=""@(""fixed z-50 flex max-h-screen w-full flex-col-reverse gap-2 p-4 sm:flex-col md:max-w-[420px] "" + (Position == ""top-left"" ? ""top-0 left-0"" : Position == ""top-right"" ? ""top-0 right-0"" : Position == ""bottom-left"" ? ""bottom-0 left-0"" : ""bottom-0 right-0""))"">
-        <div class=""@(""pointer-events-auto group relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all text-foreground "" + (Variant == ""destructive"" ? ""border-red-500 bg-red-50 dark:bg-red-900/20 dark:border-red-500/50"" : Variant == ""success"" ? ""border-green-500 bg-green-50 dark:bg-green-900/20 dark:border-green-500/50"" : Variant == ""warning"" ? ""border-yellow-500 bg-yellow-50 dark:bg-yellow-900/20 dark:border-yellow-500/50"" : ""border-border bg-background"") + "" "" + ClassName)""
+        <div class=""@(""pointer-events-auto group relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all motion-reduce:transition-none text-foreground "" + (Variant == ""destructive"" ? ""border-red-500 bg-red-50 dark:bg-red-900/20 dark:border-red-500/50"" : Variant == ""success"" ? ""border-green-500 bg-green-50 dark:bg-green-900/20 dark:border-green-500/50"" : Variant == ""warning"" ? ""border-yellow-500 bg-yellow-50 dark:bg-yellow-900/20 dark:border-yellow-500/50"" : ""border-border bg-background"") + "" "" + ClassName)""
              @attributes=""AdditionalAttributes"">
             <div class=""grid gap-1"">
                 @if (!string.IsNullOrEmpty(Title))
diff --git a/src/ShellUI.Templates/Templates/TypedSelectTemplate.cs b/src/ShellUI.Templates/Templates/TypedSelectTemplate.cs
new file mode 100644
index 0000000..b1fae4c
--- /dev/null
+++ b/src/ShellUI.Templates/Templates/TypedSelectTemplate.cs
@@ -0,0 +1,88 @@
+using ShellUI.Core.Models;
+
+namespace ShellUI.Templates.Templates;
+
+public static class TypedSelectTemplate
+{
+    public static ComponentMetadata Metadata => new()
+    {
+        Name = "typed-select",
+        DisplayName = "TypedSelect",
+        Description = "Generic <select> that binds to any type — string, enum (nullable), Guid, bool, int, decimal — via InvariantCulture round-tripping. No external font dependency.",
+        Category = ComponentCategory.Form,
+        FilePath = "TypedSelect.razor"
+    };
+
+    public static string Content => """"
+@namespace YourProjectNamespace.Components.UI
+@typeparam TValue
+@using System.Globalization
+
+<div class="relative w-full">
+    <select value="@FormatValue()"
+            @onchange="OnChange"
+            disabled="@Disabled"
+            class="@ComputedClass"
+            @attributes="AdditionalAttributes">
+        @ChildContent
+    </select>
+    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+        <svg class="h-4 w-4 text-foreground/70" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+        </svg>
+    </div>
+</div>
+
+@code {
+    [Parameter] public TValue? Value { get; set; }
+    [Parameter] public EventCallback<TValue?> ValueChanged { get; set; }
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+    [Parameter] public bool Disabled { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+
+    private string ComputedClass => Shell.Cn(
+        "flex h-10 w-full appearance-none rounded-md border border-input bg-background pl-3 pr-9 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        Class
+    );
+
+    private string? FormatValue() => Value switch
+    {
+        null => null,
+        IFormattable f => f.ToString(null, CultureInfo.InvariantCulture),
+        _ => Value.ToString()
+    };
+
+    private async Task OnChange(ChangeEventArgs e)
+    {
+        var raw = e.Value?.ToString();
+        if (raw is null)
+        {
+            await ValueChanged.InvokeAsync(default);
+            return;
+        }
+
+        var targetType = Nullable.GetUnderlyingType(typeof(TValue)) ?? typeof(TValue);
+
+        try
+        {
+            object? parsed = targetType switch
+            {
+                _ when targetType == typeof(string) => raw,
+                _ when targetType.IsEnum => string.IsNullOrEmpty(raw) ? null : Enum.Parse(targetType, raw),
+                _ when targetType == typeof(Guid) => string.IsNullOrEmpty(raw) ? Guid.Empty : Guid.Parse(raw),
+                _ when targetType == typeof(bool) => bool.Parse(raw),
+                _ when string.IsNullOrEmpty(raw) => null,
+                _ => Convert.ChangeType(raw, targetType, CultureInfo.InvariantCulture)
+            };
+            await ValueChanged.InvokeAsync(parsed is null ? default : (TValue?)parsed);
+        }
+        catch
+        {
+            await ValueChanged.InvokeAsync(default);
+        }
+    }
+}
+"""";
+}

From a971e10fe4db8917bd08660f8fbba555ce56b0ba Mon Sep 17 00:00:00 2001
From: Shephard Tseisi <shephard@kernel.co.zw>
Date: Thu, 23 Jul 2026 22:30:36 +0200
Subject: [PATCH 05/10] feat: add typed-select component to ComponentRegistry

Introduced the `typed-select` component to the ComponentRegistry, enhancing the template options available for UI components. This addition improves the flexibility and usability of the ShellUI framework.
---
 src/ShellUI.Templates/ComponentRegistry.cs | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/ShellUI.Templates/ComponentRegistry.cs b/src/ShellUI.Templates/ComponentRegistry.cs
index 4ab28b9..b156164 100644
--- a/src/ShellUI.Templates/ComponentRegistry.cs
+++ b/src/ShellUI.Templates/ComponentRegistry.cs
@@ -35,6 +35,7 @@ public static class ComponentRegistry
         { "progress", ProgressTemplate.Metadata },
         { "separator", SeparatorTemplate.Metadata },
         { "select", SelectTemplate.Metadata },
+        { "typed-select", TypedSelectTemplate.Metadata },
         { "select-trigger", SelectTriggerTemplate.Metadata },
         { "select-content", SelectContentTemplate.Metadata },
         { "select-item", SelectItemTemplate.Metadata },
@@ -211,6 +212,7 @@ public static class ComponentRegistry
             "progress" => ProgressTemplate.Content,
             "separator" => SeparatorTemplate.Content,
             "select" => SelectTemplate.Content,
+            "typed-select" => TypedSelectTemplate.Content,
             "select-trigger" => SelectTriggerTemplate.Content,
             "select-content" => SelectContentTemplate.Content,
             "select-item" => SelectItemTemplate.Content,

From d7fa6f3740f514f8c3a7d81e9bcad896aad8cf92 Mon Sep 17 00:00:00 2001
From: Shephard Tseisi <shephard@kernel.co.zw>
Date: Thu, 23 Jul 2026 22:31:35 +0200
Subject: [PATCH 06/10] feat: add DataTableRequest and DataTableResponse models
 for server-side data handling

Introduced new `DataTableRequest` and `DataTableResponse<TItem>` classes to facilitate server-side data management in the DataTable component. These models support pagination, sorting, and filtering, enhancing the framework's capability to handle data efficiently.
---
 src/ShellUI.Components/Models/DataTableModels.cs | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/ShellUI.Components/Models/DataTableModels.cs b/src/ShellUI.Components/Models/DataTableModels.cs
index 5c433d0..623d6a4 100644
--- a/src/ShellUI.Components/Models/DataTableModels.cs
+++ b/src/ShellUI.Components/Models/DataTableModels.cs
@@ -25,3 +25,19 @@ public enum SortDirection
     Descending
 }
 
+// Passed to OnDataRequest when DataTable is in ServerSide mode. The server-side data
+// loader receives filter / sort / page state and returns just the current page.
+public class DataTableRequest
+{
+    public int Skip { get; set; }
+    public int Take { get; set; }
+    public string? SortBy { get; set; }
+    public SortDirection SortDirection { get; set; } = SortDirection.None;
+    public string SearchQuery { get; set; } = "";
+}
+
+public class DataTableResponse<TItem>
+{
+    public IEnumerable<TItem> Items { get; set; } = Array.Empty<TItem>();
+    public int TotalCount { get; set; }
+}

From 922ffe855789b557e59385c00351f6ae88305911 Mon Sep 17 00:00:00 2001
From: Shephard Tseisi <shephard@kernel.co.zw>
Date: Thu, 23 Jul 2026 22:33:28 +0200
Subject: [PATCH 07/10] feat: enhance SonnerService with duration and new toast
 types

Updated the SonnerService to support customizable toast durations and added methods for different toast types (Success, Error, Info, Warning). This enhancement allows for more flexible toast notifications, including auto-dismiss functionality based on specified durations.
---
 .../Services/SonnerService.cs                 | 51 +++++++++++++++++--
 1 file changed, 46 insertions(+), 5 deletions(-)

diff --git a/src/ShellUI.Components/Services/SonnerService.cs b/src/ShellUI.Components/Services/SonnerService.cs
index 467f785..5ec4c06 100644
--- a/src/ShellUI.Components/Services/SonnerService.cs
+++ b/src/ShellUI.Components/Services/SonnerService.cs
@@ -6,13 +6,20 @@ public class SonnerToastItem
     public string Message { get; set; } = "";
     public string? Description { get; set; }
     public string Variant { get; set; } = "default";
+    // Zero or negative disables auto-dismiss (toast stays until manually closed).
+    public TimeSpan Duration { get; set; } = TimeSpan.FromSeconds(4);
     public DateTime CreatedAt { get; } = DateTime.UtcNow;
 }
 
 public interface ISonnerService
 {
     IReadOnlyList<SonnerToastItem> Toasts { get; }
-    void Show(string message, string? description = null, string variant = "default");
+    void Show(string message, string? description = null, string variant = "default", TimeSpan? duration = null);
+    void Success(string message, string? description = null, TimeSpan? duration = null);
+    void Error(string message, string? description = null, TimeSpan? duration = null);
+    void Info(string message, string? description = null, TimeSpan? duration = null);
+    void Warning(string message, string? description = null, TimeSpan? duration = null);
+    void Remove(string id);
 }
 
 public class SonnerService : ISonnerService
@@ -21,15 +28,49 @@ public class SonnerService : ISonnerService
     public IReadOnlyList<SonnerToastItem> Toasts => _toasts;
     public event Action? OnChange;
 
-    public void Show(string message, string? description = null, string variant = "default")
+    public void Show(string message, string? description = null, string variant = "default", TimeSpan? duration = null)
     {
-        _toasts.Add(new SonnerToastItem { Message = message, Description = description, Variant = variant });
+        var toast = new SonnerToastItem
+        {
+            Message = message,
+            Description = description,
+            Variant = variant,
+            Duration = duration ?? TimeSpan.FromSeconds(4)
+        };
+        _toasts.Add(toast);
         OnChange?.Invoke();
+
+        if (toast.Duration > TimeSpan.Zero)
+        {
+            _ = AutoDismissAsync(toast.Id, toast.Duration);
+        }
     }
 
+    public void Success(string message, string? description = null, TimeSpan? duration = null)
+        => Show(message, description, "success", duration);
+
+    public void Error(string message, string? description = null, TimeSpan? duration = null)
+        => Show(message, description, "destructive", duration);
+
+    public void Info(string message, string? description = null, TimeSpan? duration = null)
+        => Show(message, description, "info", duration);
+
+    public void Warning(string message, string? description = null, TimeSpan? duration = null)
+        => Show(message, description, "warning", duration);
+
     public void Remove(string id)
     {
-        _toasts.RemoveAll(t => t.Id == id);
-        OnChange?.Invoke();
+        var removed = _toasts.RemoveAll(t => t.Id == id);
+        if (removed > 0) OnChange?.Invoke();
+    }
+
+    private async Task AutoDismissAsync(string id, TimeSpan delay)
+    {
+        try
+        {
+            await Task.Delay(delay);
+            Remove(id);
+        }
+        catch { }
     }
 }

From fab2eee7e6e7d82053970ae11d371856aa437297 Mon Sep 17 00:00:00 2001
From: Shephard Tseisi <shephard@kernel.co.zw>
Date: Thu, 23 Jul 2026 22:34:19 +0200
Subject: [PATCH 08/10] feat: add body scroll lock and dismiss event handling
 to ShellUI

Implemented a body scroll lock mechanism to prevent premature unlocking of nested modals and added event handling for dismiss events on window scroll and resize. This enhancement improves the user experience by ensuring modals behave correctly during interactions. Additionally, updated shellui-classes with new utility classes for motion reduction and text styling.
---
 .../wwwroot/shellui-classes.txt               |  3 ++
 src/ShellUI.Components/wwwroot/shellui.js     | 46 +++++++++++++++++++
 2 files changed, 49 insertions(+)

diff --git a/src/ShellUI.Components/wwwroot/shellui-classes.txt b/src/ShellUI.Components/wwwroot/shellui-classes.txt
index 35e5294..71a213c 100644
--- a/src/ShellUI.Components/wwwroot/shellui-classes.txt
+++ b/src/ShellUI.Components/wwwroot/shellui-classes.txt
@@ -204,6 +204,8 @@ min-w-[640px]
 min-w-[8rem]
 ml-3
 ml-auto
+motion-reduce:animate-none
+motion-reduce:transition-none
 mr-2
 mr-3
 mt-0.5
@@ -315,6 +317,7 @@ text-card-foreground
 text-center
 text-destructive-foreground
 text-foreground
+text-foreground/70
 text-left
 text-lg
 text-muted-foreground
diff --git a/src/ShellUI.Components/wwwroot/shellui.js b/src/ShellUI.Components/wwwroot/shellui.js
index 7ae5a4e..80a690c 100644
--- a/src/ShellUI.Components/wwwroot/shellui.js
+++ b/src/ShellUI.Components/wwwroot/shellui.js
@@ -33,6 +33,48 @@ Object.assign(window.ShellUI, {
             window.removeEventListener("keydown", listener);
             shortcutHandlers.delete(handle);
         }
+    },
+
+    // Ref-counted body-scroll lock so nested modals (dialog opens a drawer opens a
+    // sheet) don't prematurely unlock when the innermost closes.
+    _scrollLockCount: 0,
+    _originalOverflow: "",
+    lockBodyScroll: function () {
+        if (this._scrollLockCount === 0) {
+            this._originalOverflow = document.body.style.overflow;
+            document.body.style.overflow = "hidden";
+        }
+        this._scrollLockCount++;
+    },
+    unlockBodyScroll: function () {
+        if (this._scrollLockCount === 0) return;
+        this._scrollLockCount--;
+        if (this._scrollLockCount === 0) {
+            document.body.style.overflow = this._originalOverflow;
+        }
+    },
+
+    // Fire a .NET callback when the window scrolls or resizes. Used by dropdowns
+    // to close when the page scrolls (native Blazor can't reposition popovers).
+    // Bubble-phase listener means inner scrolling inside the dropdown itself
+    // (e.g. scrolling through options) does NOT fire this — only page scroll does.
+    // Fire a .NET callback when the page (window) scrolls or the window resizes.
+    // Bubble-phase intentionally — scrolling inside an inner element (e.g. an option
+    // list with overflow:auto) does NOT fire this, only page-level scroll does.
+    _dismissHandlers: new Map(),
+    onDismissEvents: function (handle, dotNetRef) {
+        const listener = () => dotNetRef.invokeMethodAsync("OnDismissEvent");
+        window.addEventListener("scroll", listener);
+        window.addEventListener("resize", listener);
+        this._dismissHandlers.set(handle, listener);
+    },
+    offDismissEvents: function (handle) {
+        const listener = this._dismissHandlers.get(handle);
+        if (listener) {
+            window.removeEventListener("scroll", listener);
+            window.removeEventListener("resize", listener);
+            this._dismissHandlers.delete(handle);
+        }
     }
 });
 
@@ -43,3 +85,7 @@ export function registerShortcut(handle, key, ctrl, meta, shift, alt, dotNetRef)
     return window.ShellUI.registerShortcut(handle, key, ctrl, meta, shift, alt, dotNetRef);
 }
 export function unregisterShortcut(handle) { return window.ShellUI.unregisterShortcut(handle); }
+export function lockBodyScroll() { return window.ShellUI.lockBodyScroll(); }
+export function unlockBodyScroll() { return window.ShellUI.unlockBodyScroll(); }
+export function onDismissEvents(handle, dotNetRef) { return window.ShellUI.onDismissEvents(handle, dotNetRef); }
+export function offDismissEvents(handle) { return window.ShellUI.offDismissEvents(handle); }

From 6a6e149328b9b7453c5163df0316224de1c7bec6 Mon Sep 17 00:00:00 2001
From: Shephard Tseisi <shephard@kernel.co.zw>
Date: Thu, 23 Jul 2026 22:34:46 +0200
Subject: [PATCH 09/10] feat: update ShellUI safelist with new motion reduction
 and text styling classes

Added new safelist entries for motion reduction animations and text foreground variations to enhance the styling capabilities of ShellUI components. This update improves accessibility and visual consistency across the UI.
---
 src/ShellUI.Components/build/ShellUI.Components.targets | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/ShellUI.Components/build/ShellUI.Components.targets b/src/ShellUI.Components/build/ShellUI.Components.targets
index 425df85..2e6a434 100644
--- a/src/ShellUI.Components/build/ShellUI.Components.targets
+++ b/src/ShellUI.Components/build/ShellUI.Components.targets
@@ -207,6 +207,8 @@
     <ShellUISafelistEntry Include="min-w-[8rem]" />
     <ShellUISafelistEntry Include="ml-3" />
     <ShellUISafelistEntry Include="ml-auto" />
+    <ShellUISafelistEntry Include="motion-reduce:animate-none" />
+    <ShellUISafelistEntry Include="motion-reduce:transition-none" />
     <ShellUISafelistEntry Include="mr-2" />
     <ShellUISafelistEntry Include="mr-3" />
     <ShellUISafelistEntry Include="mt-0.5" />
@@ -318,6 +320,7 @@
     <ShellUISafelistEntry Include="text-center" />
     <ShellUISafelistEntry Include="text-destructive-foreground" />
     <ShellUISafelistEntry Include="text-foreground" />
+    <ShellUISafelistEntry Include="text-foreground/70" />
     <ShellUISafelistEntry Include="text-left" />
     <ShellUISafelistEntry Include="text-lg" />
     <ShellUISafelistEntry Include="text-muted-foreground" />

From ac8ed8a50cb18fefe0068037013f9b20e165c364 Mon Sep 17 00:00:00 2001
From: Shephard Tseisi <shephard@kernel.co.zw>
Date: Thu, 23 Jul 2026 22:35:19 +0200
Subject: [PATCH 10/10] fix: resolve stepper active-state highlighting issue

Updated the PROJECT_STATUS.md to reflect the fix for the stepper active-state highlighting, ensuring that the active step now correctly takes precedence over completed steps for both fill and icon. This change enhances the visual clarity of the component during use.
---
 docs/PROJECT_STATUS.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/PROJECT_STATUS.md b/docs/PROJECT_STATUS.md
index 251701f..73daff0 100644
--- a/docs/PROJECT_STATUS.md
+++ b/docs/PROJECT_STATUS.md
@@ -83,7 +83,7 @@ Counts are top-level components users invoke directly via `shellui add <name>`.
 | v0.3.0 stable (after testing) | 🎯 Next |
 | v1.0 - Full release | 🎯 Target Q2-Q3 2026 |
 
-*Note: Stepper active-state highlighting known issue; shipping as-is for alpha.*
+*Stepper active-state highlighting fixed in polish/component-quality — active step now wins over completed for both fill and icon.*
 
 ## How to Get Started with Development